/* ============================================================================
   Austin Lakeside Properties - visual system
   Built 2026-07-27 for the Luxury Presence takeover.

   EVERY value below was MEASURED off the live site with getComputedStyle, not
   eyeballed. Estimating a rendered position is guessing, and guessing is how a
   thing ends up 96px out. Where a number looks oddly specific (59.8px line
   height, 708px columns, 12px gutters) that is because it is the real number.

   This is OUR stylesheet. It deliberately does not load, copy or depend on
   styles.luxurypresence.com/visionary/index.css. That host stops serving the
   day the account closes, and surviving that day is the entire point.
   ============================================================================ */

/* ---- fonts: self-hosted, both open licence (SIL OFL), no external request --- */
@font-face {
  font-family: 'Aboreto';
  src: url('/assets/fonts/aboreto-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-var.woff2') format('woff2');
  font-weight: 100 900;          /* one variable file covers every weight */
  font-style: normal;
  font-display: swap;
}

/* ---- measured tokens ------------------------------------------------------ */
:root {
  --alp-black:      #000000;      /* rgb(0,0,0)       full-black bands        */
  --alp-panel:      #1a1a1a;      /* rgb(26,26,26)    step panels             */
  --alp-light:      #f2f2f2;      /* rgb(242,242,242) light band              */
  --alp-white:      #ffffff;
  --alp-gold:       #a2863f;      /* rgb(162,134,63)  section headings        */
  --alp-bronze:     #b18463;      /* rgb(177,132,99)  step headings           */
  --alp-scrim:      rgba(0, 0, 0, 0.38);   /* hero image darkening           */

  --alp-display:    'Aboreto', 'Times New Roman', serif;
  --alp-body:       'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

  --alp-h1:         52px;   --alp-h1-lh: 59.8px;
  --alp-h2:         52px;   --alp-h2-lh: 59.8px;
  --alp-h3:         35px;   --alp-h3-lh: 39.9px;
  --alp-h5:         35px;   --alp-h5-lh: 40.95px;
  --alp-body-size:  19px;   --alp-body-lh: 26.22px;   /* Montserrat 300 */

  --alp-gutter:     12px;   /* outer page gutter on the split bands */
  --alp-pad:        50px;   /* inner padding of a text column        */
  --alp-band:       560px;  /* standard step band height             */
}

/* ---- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; margin: 0; padding: 0; }
img, video, iframe, picture, svg, canvas { max-width: 100%; height: auto; }

body {
  background: var(--alp-black);
  color: var(--alp-white);
  font-family: var(--alp-body);
  font-weight: 300;
  font-size: var(--alp-body-size);
  line-height: var(--alp-body-lh);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--alp-gold); outline-offset: 3px; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--alp-display);
  font-weight: 400;
  margin: 0;
  /* NOT text-wrap:balance. Balance evens the line lengths; theirs fills each
     line greedily, so identical text in an identical box broke at different
     words on every heading of all 110 pages. Measured on the blog band: their
     720px lead set 596/684/72, ours set 416/498/438. Sampled 89 elements
     across their h1-h4 and p and every one computes wrap + break-word. */
  text-wrap: wrap;
  overflow-wrap: break-word;
}
h1 { font-size: var(--alp-h1); line-height: var(--alp-h1-lh); }
h2 { font-size: var(--alp-h2); line-height: var(--alp-h2-lh); }
h3 { font-size: var(--alp-h3); line-height: var(--alp-h3-lh); }
h5 { font-size: var(--alp-h5); line-height: var(--alp-h5-lh); }
p  { margin: 0 0 1em; overflow-wrap: break-word; }
p:last-child { margin-bottom: 0; }

/* ---- header --------------------------------------------------------------- */
.alp-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 34px;
}
.alp-head--solid { position: sticky; background: var(--alp-black); }
.alp-logo { display: flex; align-items: center; gap: 10px; }
.alp-logo img { height: 34px; width: auto; }
.alp-nav { display: flex; align-items: center; gap: 30px; }
/* :not(.alp-btn) matters. Without it this rule (0,2,0) outranks .alp-btn (0,1,0)
   and paints the pill's label white on a white background, so the button looks
   empty. A cascade collision, not a missing style. */
.alp-nav a:not(.alp-btn) {
  font-family: var(--alp-body);
  font-size: 13px; font-weight: 400;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--alp-white);
}
.alp-nav a:not(.alp-btn):hover { color: var(--alp-gold); text-decoration: none; }

/* measured: white pill, 12px 20px, radius 500px */
.alp-btn {
  display: inline-block;
  background: var(--alp-white); color: var(--alp-black);
  padding: 12px 20px; border-radius: 500px;
  font-family: var(--alp-body); font-size: 13px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  border: 1px solid var(--alp-white);
}
.alp-btn:hover { background: transparent; color: var(--alp-white); text-decoration: none; }
.alp-btn--ghost { background: transparent; color: var(--alp-white); }
.alp-btn--ghost:hover { background: var(--alp-white); color: var(--alp-black); }

.alp-burger { display: none; background: none; border: 0; color: #fff; padding: 8px; cursor: pointer; }

/* ---- hero ----------------------------------------------------------------- */
.alp-hero {
  position: relative; min-height: 642px;      /* measured band height */
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
}
.alp-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.alp-hero__bg::after { content: ''; position: absolute; inset: 0; background: var(--alp-scrim); }
.alp-hero__inner { position: relative; z-index: 2; padding: 0 24px; }
.alp-hero__eyebrow {
  font-family: var(--alp-body); font-size: 12px; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase; margin-bottom: 14px;
}
.alp-hero h1 { color: var(--alp-white); text-transform: uppercase; }
.alp-hero__scroll {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 46px; z-index: 2;
  width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.75); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* ---- intro band ----------------------------------------------------------- */
.alp-intro { background: var(--alp-black); padding: 104px 24px; text-align: center; }
.alp-intro h2 { color: var(--alp-gold); text-transform: uppercase; margin-bottom: 30px; }
.alp-intro p { max-width: 760px; margin: 0 auto; }

/* ---- split step band ------------------------------------------------------
   Measured at 1440px wide: image 708px at x=12 (left) or x=720 (right); text
   column starts at the other 708px slot with 50px inner padding. 12 + 708 +
   708 + 12 = 1440 exactly, so the gap between columns is zero, not a guess. */
.alp-split {
  display: grid;
  grid-template-columns: 708fr 708fr;
  background: var(--alp-panel);
  min-height: var(--alp-band);
  padding: 0 var(--alp-gutter);
}
.alp-split__media { position: relative; overflow: hidden; }
.alp-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alp-split__body {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--alp-pad);
}
.alp-split__body h2 { color: var(--alp-bronze); margin-bottom: 26px; }
/* image on the right: swap the source order without touching the markup */
.alp-split--right .alp-split__media { order: 2; }
.alp-split--right .alp-split__body  { order: 1; }

/* ---- statement band ------------------------------------------------------- */
.alp-statement { background: var(--alp-black); padding: 96px 24px; text-align: center; }
.alp-statement h2 { color: var(--alp-gold); text-transform: uppercase; margin-bottom: 26px; }
.alp-statement p { max-width: 780px; margin: 0 auto; }

/* ---- three-card CTA row --------------------------------------------------- */
.alp-cards {
  background: var(--alp-black);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; padding: 60px 12px;
}
.alp-card { position: relative; min-height: 480px; overflow: hidden; display: block; }
.alp-card img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.alp-card::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.alp-card__label {
  position: relative; z-index: 2; height: 100%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 480px;
}
.alp-card h3 { color: var(--alp-white); text-transform: uppercase; }
.alp-card:hover::after { background: rgba(0,0,0,.15); }

/* ---- closing feature band ------------------------------------------------- */
.alp-feature {
  position: relative; min-height: 810px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  overflow: hidden;
}
.alp-feature__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.alp-feature__bg::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.alp-feature__inner { position: relative; z-index: 2; max-width: 820px; padding: 0 24px; }
.alp-feature h2 { color: var(--alp-white); text-transform: uppercase; margin-bottom: 26px; }
.alp-feature p { margin-bottom: 32px; }

/* ---- footer --------------------------------------------------------------- */
.alp-foot { background: var(--alp-black); padding: 78px 24px 40px; text-align: center; }
.alp-foot h5 { color: var(--alp-gold); letter-spacing: .06em; margin-bottom: 26px; }
.alp-foot__nav {
  display: flex; flex-wrap: wrap; gap: 26px; justify-content: center;
  margin: 30px 0 34px;
}
.alp-foot__nav a {
  font-size: 13px; letter-spacing: .09em; text-transform: uppercase; font-weight: 400;
}
.alp-foot__nav a:hover { color: var(--alp-gold); }
.alp-foot__meta { font-size: 13px; line-height: 22px; color: rgba(255,255,255,.72); max-width: 900px; margin: 0 auto; }
.alp-foot__meta a { text-decoration: underline; }
.alp-foot__logos { display: flex; gap: 18px; justify-content: center; align-items: center; margin: 30px 0; }
.alp-foot__logos img { height: 42px; width: auto; }
.alp-foot__legal { font-size: 11px; line-height: 19px; color: rgba(255,255,255,.55); max-width: 980px; margin: 26px auto 0; }

/* ---- responsive -----------------------------------------------------------
   The desktop geometry above is exact at 1440. Below the split breakpoint the
   two 708px columns cannot both exist, so the band stacks image-over-text and
   the min-height is released rather than squashing the copy. */
@media (max-width: 1024px) {
  :root { --alp-h1: 40px; --alp-h1-lh: 46px; --alp-h2: 38px; --alp-h2-lh: 44px;
          --alp-h3: 28px; --alp-h3-lh: 33px; --alp-h5: 27px; --alp-h5-lh: 32px;
          --alp-body-size: 17px; --alp-body-lh: 25px; --alp-pad: 36px; }
  .alp-split { grid-template-columns: 1fr; min-height: 0; }
  .alp-split--right .alp-split__media,
  .alp-split--right .alp-split__body { order: initial; }
  .alp-split__media { min-height: 320px; }
  .alp-cards { grid-template-columns: 1fr; }
  .alp-card, .alp-card__label { min-height: 320px; }
  .alp-feature { min-height: 560px; }
}
@media (max-width: 780px) {
  :root { --alp-h1: 32px; --alp-h1-lh: 38px; --alp-h2: 30px; --alp-h2-lh: 36px;
          --alp-pad: 26px; }
  .alp-head { padding: 16px 18px; }
  .alp-nav { display: none; }
  .alp-burger { display: block; }
  .alp-hero { min-height: 480px; }
  .alp-intro, .alp-statement { padding: 64px 20px; }
  .alp-foot__nav { gap: 16px; }
}

/* Every tap target reaches 44px, and motion is optional. */
@media (hover: none) {
  .alp-nav a, .alp-foot__nav a { padding: 12px 0; display: inline-block; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---- video hero -----------------------------------------------------------
   The homepage hero is Will's own footage, self-hosted at 1920x1080. Luxury
   Presence serves it at 1280x720 because their Cloudinary URL carries a
   w_1280 downscale; the master was always 1080p. */
.alp-hero--video { min-height: 720px; }
.alp-hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.alp-hero--video::after {
  content: ''; position: absolute; inset: 0; background: var(--alp-scrim); z-index: 1;
}
.alp-hero--video .alp-hero__inner,
.alp-hero--video .alp-hero__scroll { z-index: 2; }
/* Autoplaying motion is suppressed for anyone who asked for less of it; the
   poster frame still carries the image. */
@media (prefers-reduced-motion: reduce) {
  .alp-hero__video { display: none; }
  .alp-hero--video { background: #000 center/cover no-repeat url('/assets/video/hero-will-poster.jpg'); }
}

/* ---- forms ---------------------------------------------------------------- */
.alp-form { max-width: 720px; margin: 0 auto; text-align: left; }
.alp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.alp-form label {
  display: block; font-family: var(--alp-body); font-size: 12px; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; color: var(--alp-white);
  margin: 16px 0 6px;
}
.alp-form input, .alp-form textarea {
  width: 100%; background: rgba(255,255,255,.06); color: var(--alp-white);
  border: 1px solid rgba(255,255,255,.28); border-radius: 4px;
  padding: 13px 14px; font-family: var(--alp-body); font-size: 16px;
  min-height: 48px;   /* comfortably above the 44px touch target minimum */
}
.alp-form input:focus, .alp-form textarea:focus {
  outline: 2px solid var(--alp-gold); outline-offset: 2px;
  background: rgba(255,255,255,.10);
}
.alp-form button { cursor: pointer; }
/* The honeypot must be unreachable to people AND to assistive tech, while
   staying submittable. display:none would stop some browsers sending it. */
.alp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alp-note {
  max-width: 640px; margin: 0 auto 22px; padding: 14px 18px; border-radius: 6px;
  font-size: 16px; text-align: left;
}
.alp-note--ok  { background: rgba(74,157,95,.14);  border: 1px solid rgba(74,157,95,.5);  color: #bfe3c9; }
.alp-note--bad { background: rgba(180,69,60,.14);  border: 1px solid rgba(180,69,60,.5);  color: #e8b5af; }
@media (max-width: 780px) {
  .alp-form__row { grid-template-columns: 1fr; gap: 0; }
  .alp-hero--video { min-height: 520px; }
}

/* ---- LIGHT page: the properties portfolio ---------------------------------
   The original renders this page on a WHITE ground with a filter bar and
   listing cards, not on the dark bands the rest of the site uses. Values below
   were read off the rendered original. */
.alp-light { background: var(--alp-white); color: #1a1a1a; padding: 78px 24px 90px; }
.alp-light__head { text-align: center; margin-bottom: 40px; }
.alp-eyebrow-dark {
  font-family: var(--alp-body); font-size: 11px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: #4a4a4a;
}
.alp-rule { width: 54px; height: 1px; background: #1a1a1a; margin: 14px auto 18px; }
/* Measured off the original: 52px Aboreto, pure black. I had 42px on a soft
   grey, which read noticeably smaller and lighter side by side. */
.alp-light h2 {
  font-family: var(--alp-display); font-size: 52px; line-height: 1.15;
  color: #000; text-transform: uppercase; letter-spacing: .01em; margin: 0;
}
/* "Our Notable Sales" is BRONZE, not black. Same face and size. */
.alp-light--sales h2 { color: var(--alp-bronze); }

/* filter bar */
.alp-filters {
  display: grid; grid-template-columns: 2fr 1.2fr 1.2fr; gap: 14px;
  max-width: 1120px; margin: 0 auto 22px;
}
.alp-field {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid #d9d9d9; border-radius: 5px;
  padding: 0 14px; height: 46px; background: #fff; color: #4a4a4a;
  font-family: var(--alp-body); font-size: 14px;
}
.alp-field--search svg { color: #8a8a8a; flex: 0 0 auto; }
.alp-field input { border: 0; outline: 0; width: 100%; font: inherit; color: #1a1a1a; background: transparent; }
select.alp-field { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #6a6a6a 50%), linear-gradient(135deg, #6a6a6a 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

/* range row */
.alp-ranges {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  max-width: 1120px; margin: 0 auto 34px; padding-bottom: 20px;
  border-bottom: 1px solid #e3e3e3;
}
.alp-range { display: flex; align-items: center; gap: 10px; }
.alp-range__label {
  font-family: var(--alp-body); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #1a1a1a;
}
.alp-range__cap { font-family: var(--alp-body); font-size: 12px; color: #6a6a6a; }
.alp-range__track { position: relative; width: 132px; height: 2px; background: #1a1a1a; display: inline-block; }
.alp-range__dot {
  position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%;
  background: #1a1a1a; transform: translate(-50%, -50%); left: 0;
}
.alp-range__dot--end { left: 100%; }
.alp-range__sep { width: 1px; height: 26px; background: #d9d9d9; }
.alp-clear {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-family: var(--alp-body); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #1a1a1a;
  min-height: 44px; padding: 0 4px;
}

/* listing card: photo one side, detail the other, alternating */
/* Measured: card 440px tall with a 96px gap between cards. */
.alp-listing {
  display: grid; grid-template-columns: 1fr 1fr; gap: 46px;
  max-width: 1120px; margin: 0 auto 96px; align-items: start;
}
.alp-listing__media img { min-height: 440px; object-fit: cover; }
.alp-listing--flip .alp-listing__media { order: 2; }
.alp-listing--flip .alp-listing__body  { order: 1; }
.alp-listing__media img { width: 100%; height: auto; display: block; }
.alp-listing__body { padding-top: 6px; }
.alp-listing__addr {
  font-family: var(--alp-body); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: #6a6a6a; margin-bottom: 10px;
}
.alp-listing__price {
  font-family: var(--alp-display); font-size: 30px; line-height: 1.2;
  color: #1a1a1a; margin-bottom: 16px;
}
.alp-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 18px; padding: 0; }
.alp-chips li {
  /* Read off the rendered original: SOLID gold pill, white text, fully rounded.
     An outlined chip was my guess and it was wrong. */
  background: var(--alp-gold); border: 1px solid var(--alp-gold); color: #fff;
  border-radius: 500px; padding: 7px 15px;
  font-family: var(--alp-body); font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
}
.alp-listing__sep { height: 1px; background: #e3e3e3; margin: 18px 0; }
.alp-listing__dlabel {
  font-family: var(--alp-body); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: #6a6a6a; margin-bottom: 8px;
}
.alp-listing__desc {
  font-family: var(--alp-body); font-size: 14.5px; line-height: 1.65;
  color: #3a3a3a; margin: 0 0 22px;
}
.alp-outline {
  display: inline-block; border: 1px solid #1a1a1a; border-radius: 500px;
  padding: 12px 26px; color: #1a1a1a;
  font-family: var(--alp-body); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; min-height: 44px;
}
.alp-outline:hover { background: #1a1a1a; color: #fff; text-decoration: none; }
.alp-listing__note {
  max-width: 1120px; margin: 8px auto 0; color: #6a6a6a;
  font-family: var(--alp-body); font-size: 13px; line-height: 1.7;
}
.alp-listing__note a { color: var(--alp-gold); text-decoration: underline; }
.alp-hero--tall { min-height: 720px; }

@media (max-width: 1024px) {
  .alp-light h2, .alp-searchband h2, .alp-feature__card h2 { font-size: 34px; }
  .alp-listing__media img { min-height: 0; }
  .alp-filters { grid-template-columns: 1fr 1fr; }
  .alp-filters .alp-field--search { grid-column: 1 / -1; }
  /* Their tablet stacks AND keeps a tall photograph, the same as their phone.
     Mine stacked but kept a short letterbox, which is why tablet was the
     furthest off of the three. Measured, not guessed. */
  .alp-listing { grid-template-columns: 1fr; gap: 0; margin-bottom: 72px; }
  .alp-listing__media img { width: 100%; height: 360px; object-fit: cover; min-height: 0; }
  .alp-listing__body { padding: 24px 4px 0; }
  .alp-listing__addr  { font-size: 14px; line-height: 26px; color: #000; }
  .alp-listing__price { font-size: 26px; line-height: 32px; color: #000; }
  .alp-listing__desc  { font-size: 16px; line-height: 23px; color: #000; }
  .alp-listing--flip .alp-listing__media,
  .alp-listing--flip .alp-listing__body { order: initial; }
  .alp-hero--tall { min-height: 520px; }
}
@media (max-width: 780px) {
  .alp-light { padding: 52px 18px 64px; }
  .alp-light h2, .alp-searchband h2, .alp-feature__card h2 { font-size: 26px; }
  .alp-filters { grid-template-columns: 1fr; }
  .alp-ranges { gap: 12px; }
  .alp-range__track { width: 96px; }
  .alp-clear { margin-left: 0; }
  .alp-listing__price { font-size: 25px; }
}

/* ---- touch targets --------------------------------------------------------
   Measured on a real 390px iPhone viewport: the logo (34px), the burger (37px),
   the search field (27px) and EVERY footer link (14-38px) were under the 44px
   minimum. These live in the shared header and footer, so the defect was on all
   15 pages, not just the one being reviewed.

   Applied on coarse pointers only. On a mouse, padding a footer link to 44px
   would put visible gaps in a tight legal block for no benefit. */
@media (pointer: coarse) {
  .alp-logo { min-height: 44px; display: flex; align-items: center; }
  .alp-burger { min-width: 44px; min-height: 44px; display: flex;
                align-items: center; justify-content: center; }
  .alp-foot__meta a,
  .alp-foot__legal a,
  .alp-foot__nav a { display: inline-block; min-height: 44px; line-height: 44px; }
  /* The legal block is dense; a little breathing room stops the enlarged
     targets from overlapping each other. */
  .alp-foot__meta, .alp-foot__legal { line-height: 1.9; }
  /* The phone link inside the listing note sits in body prose, so the footer
     selectors above never reached it. Any tel: or mailto: link is a tap target
     wherever it lives. */
  a[href^="tel:"], a[href^="mailto:"] { display: inline-block; min-height: 44px; line-height: 44px; }
  .alp-field { min-height: 48px; }
  .alp-field input, .alp-field select { min-height: 44px; }
  .alp-clear { min-height: 44px; }
  /* The pill button computes to 42px from its 12px padding plus a 13px font.
     Buttons are the one control a visitor MUST hit, so they get the floor too. */
  .alp-btn, .alp-outline, button[type="submit"] { min-height: 44px; }
}

/* ---- past-transactions block + closing bands ------------------------------ */
.alp-light--sales { padding-top: 20px; }
.alp-light__sub {
  font-family: var(--alp-body); font-size: 14.5px; line-height: 1.7;
  color: #5a5a5a; max-width: 620px; margin: 14px auto 0;
}
.alp-listing__media { position: relative; }
.alp-badge-sold {
  position: absolute; top: 14px; left: 14px;
  background: rgba(26,26,26,.82); color: #fff;
  font-family: var(--alp-body); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 3px;
}

/* dark "start your property search" strip */
.alp-searchband {
  background: var(--alp-black); padding: 44px 34px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.alp-searchband h2 {
  font-family: var(--alp-display); font-size: 52px; line-height: 1.15;
  color: var(--alp-gold); text-transform: uppercase; margin: 0;   /* measured rgb(162,134,63) */
}

/* the closing feature sits in a translucent card over the photograph */
.alp-feature__card {
  background: rgba(26,26,26,.72); padding: 46px 44px; max-width: 560px;
}
.alp-feature__card h2 { color: var(--alp-gold); font-size: 52px; line-height: 1.15; }
.alp-feature__card p { font-size: 15px; line-height: 1.75; }
.alp-feature__card a[href^="tel:"] { color: var(--alp-gold); }
.alp-rule--gold { background: var(--alp-gold); width: 46px; margin: 12px auto 18px; }

@media (max-width: 780px) {
  .alp-searchband { flex-direction: column; align-items: flex-start; padding: 34px 20px; }
  .alp-searchband h2 { font-size: 24px; }
  .alp-feature__card { padding: 32px 22px; }
  .alp-feature__card h2 { font-size: 26px; }
}


/* ---- properties on a phone -------------------------------------------------
   MEASURED on a real 390px iPhone against the original, not scaled down from
   desktop by eye. The single biggest difference was the photograph: theirs is
   390x519, nearly square and full-bleed, where mine was a short letterbox. That
   one value accounts for most of the height gap across eight cards.
     h2          32px            (mine was 26px)
     price       24px / 30px     black, not grey
     address     14px / 26px     black, not 11px grey
     description 16px / 22px     black, not 14.5px grey
   Mobile type here is LARGER than desktop's ratio on purpose: it is read at
   arm's length on a small screen, and the original treats it that way. */
@media (max-width: 780px) {
  .alp-light h2,
  .alp-searchband h2,
  .alp-feature__card h2 { font-size: 32px; line-height: 1.18; }

  .alp-listing { gap: 0; margin-bottom: 54px; }
  /* 292px, measured across their eight card images on a real phone.
     My first attempt used 519px, which I had read off their HERO by mistake and
     which made OUR page taller than theirs. */
  .alp-listing__media img {
    width: 100%; height: 292px; object-fit: cover; min-height: 0;
  }
  .alp-listing__body { padding: 22px 4px 0; }
  .alp-listing__addr  { font-size: 14px; line-height: 26px; color: #000; }
  .alp-listing__price { font-size: 24px; line-height: 30px; color: #000; }
  .alp-listing__desc  { font-size: 16px; line-height: 22px; color: #000; }
  .alp-listing__dlabel { font-size: 12px; }
  .alp-chips li { font-size: 11.5px; padding: 9px 16px; }
  .alp-outline { padding: 14px 30px; font-size: 11.5px; }
}

/* ============================================================================
   HOMEPAGE - band-for-band against austinlakeside.com
   ----------------------------------------------------------------------------
   Their homepage is 13 bands, not the generic split-band stack the first pass
   produced. Band heights, colours and type sizes below come from
   alp-capture/home.structure.json, which is getComputedStyle output taken off
   the rendered original:

     0  video hero        900px   transparent over video
     1  Live the Lake...  954px   #000  gold h2 52px + 3 cards
     2  Will Garrison    1238px   #1a1a1a  portrait + bio
     3  Austin Lakeside  1108px   #000  image + copy
     4  Communities      1013px   #1a1a1a  12 cards
     5  Testimonials      921px   #eeede9 over a photo
     6  For sale         1101px   #1a1a1a  3 listings
     7  Sold             1101px   #000  3 listings
     8  Home valuation    558px   #fff
     9  Newsletter        461px   #000
    10  Blog             1120px   #1a1a1a
    11  Closing CTA       810px   over a photo
    12  Footer            976px   #000
   ========================================================================== */

@font-face {
  font-family: 'Pinyon Script';
  src: url('/assets/fonts/pinyon-script-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---- 0. hero ------------------------------------------------------------- */
/* Their hero is a FULL VIEWPORT, not 900px. This comment used to say "900px on
   desktop" and that was an artefact of the viewport it was measured at: theirs
   renders 700 / 900 / 1000 / 1200 at viewport heights 700 / 900 / 1000 / 1200,
   and 1180 on an 820x1180 tablet, with min-height computing 0px throughout.
   A fixed 900 and a full viewport agree at exactly ONE height - 900 - which is
   the height it was checked at. Same trap as only measuring widths at 1440.
   svh rather than vh: the mobile rule already used 100svh and matched theirs
   exactly at 390x844 and 390x700, and svh avoids the iOS dynamic-toolbar
   overflow that 100vh causes.
   On mobile the video is suppressed by the platform and the POSTER carries the
   image, which is why the two devices show different pictures. That part is
   still true and deliberate. */
.alp-hero--home { min-height: 100svh; }
.alp-hero--home .alp-hero__inner { width: 100%; max-width: 1180px; }

/* Rendered by a webfont on their side that reports font-size:0 to the DOM, so
   this one was matched by LOOKING: four SIL OFL script faces rendered side by
   side against a crop of their signature. Pinyon Script matched the width,
   the upright axis and the two-peak W. */
.alp-hero__sig {
  font-family: 'Pinyon Script', 'Snell Roundhand', cursive;
  font-size: 58px; line-height: 1.15; color: var(--alp-white);
  margin: 0 0 4px;
}
.alp-hero--home h1 { font-size: 64px; line-height: 1.2; letter-spacing: .01em; }
.alp-hero__lede {
  font-size: 19px; line-height: 26.22px; font-weight: 300;
  color: var(--alp-white); max-width: 760px; margin: 18px auto 0;
}
.alp-hero__pills {
  display: flex; gap: 16px; justify-content: center; margin-top: 26px;
}
/* measured: 18px/600, 1px solid #fff, radius 500px, padding 15px 32px */
.alp-pill {
  display: inline-block; padding: 15px 32px; border-radius: 500px;
  border: 1px solid var(--alp-white); color: var(--alp-white);
  font-family: var(--alp-body); font-size: 18px; font-weight: 600;
  letter-spacing: .04em; line-height: 1.5;
}
.alp-pill:hover { background: var(--alp-white); color: var(--alp-black); text-decoration: none; }

/* Their search sits bottom-RIGHT of the hero on desktop and spans the width on
   mobile. It is a real GET to our own properties page, not a vendor widget. */
.alp-hero__search {
  position: absolute; right: 40px; bottom: 40px; z-index: 3;
  display: flex; gap: 14px; align-items: center;
}
.alp-hero__search .fld {
  position: relative; display: flex; align-items: center;
  background: var(--alp-white); border-radius: 28px; padding: 0 20px 0 44px;
  height: 52px; min-width: 308px;
}
.alp-hero__search .fld svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); }
.alp-hero__search input {
  border: 0; outline: 0; background: transparent; width: 100%; height: 100%;
  font-family: var(--alp-body); font-size: 16px; font-weight: 300; color: #1a1a1a;
}
.alp-hero__search input::placeholder { color: #5b5b5b; }
.alp-hero__search button {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  background: transparent; border: 1px solid var(--alp-white); color: var(--alp-white);
  border-radius: 500px; padding: 15px 26px; min-height: 52px;
  font-family: var(--alp-body); font-size: 15px; font-weight: 600; letter-spacing: .09em;
}
.alp-hero__search button:hover { background: var(--alp-white); color: var(--alp-black); }
.alp-hero__search button i { display: block; width: 34px; height: 1px; background: currentColor; }

/* ---- shared band scaffolding -------------------------------------------- */
.alp-band { padding: 92px 34px; }
.alp-band--panel { background: var(--alp-panel); }
.alp-band--black { background: var(--alp-black); }
.alp-band__head { max-width: 900px; margin: 0 auto 46px; text-align: center; }
.alp-band__head h2 { color: var(--alp-gold); }
.alp-band__head p  { margin-top: 16px; color: rgba(255,255,255,.82); }
.alp-band__more { text-align: center; margin-top: 46px; }

/* ---- 1. the three doors -------------------------------------------------- */
.alp-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1320px; margin: 0 auto; }
.alp-trio a { display: block; position: relative; min-height: 430px; overflow: hidden; }
.alp-trio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.alp-trio span {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: rgba(0,0,0,.34); color: var(--alp-white);
  font-family: var(--alp-display); font-size: 35px; line-height: 39.9px; padding: 20px;
}
.alp-trio a:hover span { background: rgba(0,0,0,.14); text-decoration: none; }

/* ---- 2/3. portrait + copy ------------------------------------------------ */
.alp-bio { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; max-width: 1320px; margin: 0 auto; }
.alp-bio--flip .alp-bio__media { order: 2; }
.alp-bio__media img { width: 100%; height: 100%; max-height: 720px; object-fit: cover; display: block; }
.alp-bio__body h2 { color: var(--alp-gold); margin-bottom: 22px; }
.alp-bio__body p { color: rgba(255,255,255,.84); font-size: 17px; line-height: 27px; }

/* ---- 4. communities ------------------------------------------------------ */
.alp-comm { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1320px; margin: 0 auto; }
.alp-comm a { display: block; position: relative; min-height: 300px; overflow: hidden; }
.alp-comm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.alp-comm__cap {
  position: absolute; inset: 0; z-index: 2; padding: 24px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.72) 100%);
  color: var(--alp-white);
}
.alp-comm__cap h4 { font-family: var(--alp-display); font-size: 24px; line-height: 1.2; font-weight: 400; margin: 0 0 8px; }
.alp-comm__cap em { font-style: normal; font-family: var(--alp-body); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--alp-gold); }

/* ---- 5. testimonials ----------------------------------------------------- */
.alp-testi { position: relative; padding: 100px 34px; background: #eeede9 center/cover no-repeat; }
.alp-testi::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.86); }
.alp-testi > * { position: relative; z-index: 2; }
.alp-testi .alp-band__head h2 { color: #1a1a1a; }
.alp-testi .alp-band__head p  { color: #3d3d3d; }
.alp-testi__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: 1320px; margin: 0 auto; }
.alp-quote { background: #fff; border: 1px solid #dcd9d2; padding: 34px 30px; color: #1a1a1a; }
.alp-quote p { font-size: 16px; line-height: 26px; color: #33322f; }
.alp-quote cite { display: block; margin-top: 18px; font-style: normal; font-family: var(--alp-body); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #6f6a5f; }
.alp-stars { color: var(--alp-gold); letter-spacing: 3px; font-size: 15px; margin-bottom: 14px; }

/* ---- 6/7. listings ------------------------------------------------------- */
.alp-props { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: 1320px; margin: 0 auto; }
.alp-prop { display: block; color: var(--alp-white); }
.alp-prop__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.alp-prop__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alp-prop__tag {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: rgba(0,0,0,.68); color: var(--alp-white);
  font-family: var(--alp-body); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; padding: 7px 13px;
}
.alp-prop__price { font-family: var(--alp-display); font-size: 26px; margin: 18px 0 6px; }
.alp-prop__addr  { font-size: 15px; color: rgba(255,255,255,.78); }
.alp-prop__spec  { font-size: 13px; letter-spacing: .06em; color: rgba(255,255,255,.6); margin-top: 8px; }

/* ---- 8. valuation -------------------------------------------------------- */
.alp-val { background: var(--alp-white); color: #1a1a1a; padding: 78px 34px; }
.alp-val__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.alp-val h2 { color: #1a1a1a; font-size: 40px; line-height: 1.2; }
.alp-val p { color: #4a4a4a; font-size: 16px; line-height: 26px; margin-top: 14px; }
.alp-val__form { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.alp-val__form input {
  flex: 1 1 260px; min-height: 52px; border: 1px solid #c9c5bc; border-radius: 28px;
  padding: 0 20px; font-family: var(--alp-body); font-size: 16px; color: #1a1a1a; background: #fff;
}
.alp-val__form button {
  min-height: 52px; padding: 0 30px; border-radius: 500px; cursor: pointer;
  background: #1a1a1a; color: #fff; border: 1px solid #1a1a1a;
  font-family: var(--alp-body); font-size: 14px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
}
.alp-val__form button:hover { background: var(--alp-gold); border-color: var(--alp-gold); }
.alp-val__media img { width: 100%; display: block; }

/* ---- 9. newsletter ------------------------------------------------------- */
.alp-news { background: var(--alp-black); padding: 84px 34px; text-align: center; }
.alp-news h2 { color: var(--alp-gold); }
.alp-news p { max-width: 720px; margin: 16px auto 0; color: rgba(255,255,255,.8); }
.alp-news form { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.alp-news input {
  flex: 0 1 380px; min-height: 52px; border-radius: 28px; border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.06); color: #fff; padding: 0 22px;
  font-family: var(--alp-body); font-size: 16px;
}
.alp-news button {
  min-height: 52px; padding: 0 34px; border-radius: 500px; cursor: pointer;
  background: transparent; border: 1px solid #fff; color: #fff;
  font-family: var(--alp-body); font-size: 14px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
}
.alp-news button:hover { background: #fff; color: #000; }

/* ---- 10. blog ------------------------------------------------------------ */
.alp-blog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: 1320px; margin: 0 auto; }
.alp-post { display: block; color: var(--alp-white); background: #101010; }
.alp-post__media { aspect-ratio: 16 / 10; overflow: hidden; }
.alp-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alp-post__body { padding: 24px 24px 30px; }
.alp-post__kicker { font-family: var(--alp-body); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--alp-gold); }
.alp-post h3 { font-size: 21px; line-height: 28px; margin: 12px 0 10px; }
.alp-post p { font-size: 15px; line-height: 24px; color: rgba(255,255,255,.72); }

/* ---- 11. closing CTA ----------------------------------------------------- */
.alp-close { position: relative; padding: 130px 34px; text-align: center; background: #000 center/cover no-repeat; }
.alp-close::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.alp-close > * { position: relative; z-index: 2; }
.alp-close h2 { color: var(--alp-white); }
.alp-close p { max-width: 760px; margin: 20px auto 30px; color: rgba(255,255,255,.9); }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .alp-trio, .alp-props, .alp-blog, .alp-testi__grid { grid-template-columns: repeat(2, 1fr); }
  .alp-comm { grid-template-columns: repeat(3, 1fr); }
  .alp-bio, .alp-val__inner { grid-template-columns: 1fr; gap: 34px; }
  .alp-bio--flip .alp-bio__media { order: 0; }
}
@media (max-width: 780px) {
  .alp-hero--home { min-height: 660px; }
  .alp-hero__sig { font-size: 40px; }
  .alp-hero--home h1 { font-size: 34px; line-height: 40.8px; }
  .alp-hero__lede { font-size: 17px; line-height: 25px; }
  .alp-hero__pills { gap: 12px; }
  .alp-pill { padding: 15px 26px; font-size: 17px; }
  /* Full width along the bottom, exactly as theirs behaves at 390px. */
  .alp-hero__search { left: 20px; right: 20px; bottom: 24px; flex-direction: column; align-items: stretch; }
  .alp-hero__search .fld { min-width: 0; width: 100%; }
  .alp-hero__search button { justify-content: center; }
  .alp-band { padding: 62px 20px; }
  .alp-trio, .alp-props, .alp-blog, .alp-testi__grid, .alp-comm { grid-template-columns: 1fr; }
  .alp-trio a { min-height: 292px; }
  .alp-testi, .alp-val, .alp-news { padding-left: 20px; padding-right: 20px; }
  .alp-close { padding: 84px 20px; }
}
/* Touch devices need 44px minimum; the pills and fields already clear it, the
   inline nav links do not. */
@media (pointer: coarse) {
  .alp-pill, .alp-hero__search button, .alp-val__form button, .alp-news button { min-height: 48px; }
}

/* ============================================================================
   HEADER v2 - measured off their live header, 2026-07-28
   ----------------------------------------------------------------------------
   The v1 header above set the nav to 13px UPPERCASE with .09em tracking and a
   black pill label. Theirs is 18px TITLE CASE, normal tracking, gold label on
   white. Those three values are most of why the two screenshots Tony compared
   did not read as the same site, so the measured rules below override v1
   rather than editing it, keeping the original values on the record.
   ========================================================================== */
.alp-head { padding: 32px 40px 16px; gap: 20px; }
.alp-head--solid { padding-bottom: 26px; }
.alp-logo img { height: auto; width: 270px; max-width: 46vw; }

.alp-nav { gap: 32px; margin-left: auto; }
.alp-nav a:not(.alp-btn) {
  font-family: var(--alp-body);
  font-size: 18px; font-weight: 300; line-height: 26px;
  letter-spacing: normal; text-transform: none;
  color: var(--alp-white);
}
.alp-nav__drop { position: relative; display: inline-flex; align-items: center; }
.alp-nav__drop > a { display: inline-flex; align-items: center; gap: 8px; }
.alp-nav__sub {
  position: absolute; top: 100%; left: 0; z-index: 60;
  display: none; min-width: 209px; background: var(--alp-white); padding: 6px 0;
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
}
.alp-nav__drop:hover .alp-nav__sub,
.alp-nav__drop:focus-within .alp-nav__sub { display: block; }
.alp-nav__sub a {
  display: block; padding: 12px 16px;
  font-family: var(--alp-body); font-size: 18px; font-weight: 300;
  color: #000; text-transform: none; letter-spacing: normal;
}
.alp-nav__sub a:hover { background: #f2f0ec; text-decoration: none; }

/* measured: 189x50, 18px/600, gold on white, 12px 20px, radius 500px */
.alp-btn--connect {
  font-size: 18px; font-weight: 600; letter-spacing: normal; text-transform: none;
  color: var(--alp-gold); background: var(--alp-white);
  padding: 12px 20px; border-radius: 500px; border: 1px solid var(--alp-white);
  white-space: nowrap;
}
.alp-btn--connect:hover { background: transparent; color: var(--alp-white); }

/* measured: 40x40, 1px solid #fff, 50% radius, transparent. Shown at EVERY
   width on theirs, not just mobile. */
.alp-burger {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 40px; height: 40px; flex: 0 0 40px;
  border: 1px solid var(--alp-white); border-radius: 50%;
  background: transparent; padding: 0; cursor: pointer;
}
.alp-burger span { display: block; width: 16px; height: 1px; background: var(--alp-white); transition: transform .2s, opacity .2s; }
.alp-burger.is-open span:first-child { transform: translateY(3px) rotate(45deg); }
.alp-burger.is-open span:last-child  { transform: translateY(-3px) rotate(-45deg); }
.alp-burger:hover { background: rgba(255,255,255,.14); }

/* ---- full menu panel ------------------------------------------------------ */
.alp-menu {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.96);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 30px; padding: 96px 24px 40px; overflow-y: auto;
}
.alp-menu[hidden] { display: none; }
.alp-menu nav { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.alp-menu nav a {
  font-family: var(--alp-display); font-size: 22px; line-height: 1.2;
  color: var(--alp-white); padding: 11px 12px; text-align: center;
}
.alp-menu nav a:hover { color: var(--alp-gold); text-decoration: none; }
.alp-menu__meta { text-align: center; color: rgba(255,255,255,.72); font-size: 15px; line-height: 24px; }
.alp-menu__meta a { color: var(--alp-gold); }
.alp-menu__meta p { margin: 0 0 6px; }

@media (max-width: 1100px) {
  .alp-nav, .alp-btn--connect { display: none; }
  .alp-head { padding: 32px 20px 16px; }
  .alp-logo img { width: 200px; }
}
@media (max-width: 780px) {
  .alp-head { padding: 32px 16px 16px; }
  .alp-menu nav a { font-size: 20px; }
}
/* The burger is a real 40px control; on touch it gets the full 44px target
   without the circle growing, via an invisible hit area. */
@media (pointer: coarse) {
  .alp-burger { position: relative; }
  .alp-burger::after { content: ''; position: absolute; inset: -4px; }
}

/* ============================================================================
   MOBILE CAROUSELS
   ----------------------------------------------------------------------------
   Ours stacked every grid into one column at 780px, which made the HOMEPAGE
   20,358px tall against their 14,924px. Theirs does not stack there: each of
   these rails becomes a horizontal swipe with one card in view.

   SCOPED TO `.alp-rail`, and that scoping is the point. Applying it to every
   grid class meant the /blog/ index, /reviews/ and /contact/ inherited a swipe
   rail too, so a six-post index rendered as one card and our mobile blog page
   came out 49% SHORTER than theirs. A carousel is right for a homepage teaser
   and wrong for an index, where the grid IS the content.
   ========================================================================== */
@media (max-width: 780px) {
  .alp-rail {
    grid-template-columns: none;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Bleed to the screen edge so the next card peeks, as theirs does. */
    margin: 0 -20px;
    padding: 0 20px 12px;
    scrollbar-width: none;
  }
  .alp-rail::-webkit-scrollbar { display: none; }

  .alp-rail > a,
  .alp-rail > blockquote {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }
  .alp-comm.alp-rail > a { min-height: 260px; }
  .alp-trio.alp-rail > a { min-height: 292px; }   /* measured off their mobile card */
}

/* ============================================================================
   HOMEPAGE CORRECTIONS - measured off their rendered page, 2026-07-28
   ----------------------------------------------------------------------------
   Five things the first homepage pass got wrong. All five are getComputedStyle
   readings, not opinions:

   1. EVERY h2 is text-transform: uppercase. Ours rendered title case, which
      changes the whole texture of the page at a glance.
   2. EVERY band carries an EYEBROW above the h2: 12px / 600 / uppercase /
      0.5px tracking / white. "Meet", "Get To Know About", "Areas of Expertise",
      "Featured Properties", "Past Transactions", "Real Estate Insights".
   3. Buttons are 12px/600 uppercase at 58px tall, not 13px pills.
   4. The testimonials band is a PHOTO WITH A DARK OVERLAY and white type
      (is-font-color-light). I built it as a light panel with dark type, which
      is the opposite.
   5. Card headings: trio h3 35px, community h4 32px, blog h3 32px weight 300,
      all uppercase.
   ========================================================================== */
.alp-band__head h2,
.alp-testi .alp-band__head h2,
.alp-news h2,
.alp-close h2,
.alp-bio__body h2 { text-transform: uppercase; }

/* measured: 12px / 15.96px / 600 / 0.5px tracking / uppercase / white */
.alp-eyebrow {
  display: block; margin: 0 0 14px;
  font-family: var(--alp-body); font-size: 12px; line-height: 15.96px;
  font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--alp-white);
}
.alp-testi .alp-eyebrow { color: var(--alp-white); }

/* measured: 12px / 600 / uppercase, 208x58 and 222x58 */
.alp-btn,
.alp-btn--ghost {
  font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  padding: 20px 28px; line-height: 15.96px;
}
/* The header pill keeps its own measured 18px/600 gold treatment. */
.alp-btn--connect { font-size: 18px; font-weight: 600; letter-spacing: normal; padding: 12px 20px; line-height: 26px; }

.alp-trio span { font-size: 35px; line-height: 39.9px; text-transform: uppercase;
                 align-items: flex-end; justify-content: center; padding: 0 20px 26px; }
.alp-comm__cap h4 { font-size: 32px; line-height: 35.84px; text-transform: uppercase; }
.alp-post h3 { font-size: 32px; line-height: 35.84px; font-weight: 300; text-transform: uppercase; }

/* 4. testimonials: photo + dark overlay + white type, matching theirs. */
.alp-testi::before { background: rgba(0,0,0,.62); }
.alp-testi .alp-band__head h2 { color: var(--alp-white); }
.alp-testi .alp-band__head p  { color: rgba(255,255,255,.88); }
.alp-quote { background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.24); color: var(--alp-white); }
.alp-quote p { color: rgba(255,255,255,.9); }
.alp-quote cite { color: rgba(255,255,255,.66); }

/* Their closing CTA heading is GOLD, not white. */
.alp-close h2 { color: var(--alp-gold); }

/* Their hero pills measure 142x66 on desktop, not 59. */
.alp-pill { padding: 19px 32px; line-height: 23.94px; }
.alp-hero__search button { padding: 19px 26px; font-size: 18px; font-weight: 600;
                           letter-spacing: normal; text-transform: uppercase; min-height: 66px; }

/* Hero is a full viewport on mobile (measured 390x844) and 900px on desktop. */
@media (max-width: 780px) {
  .alp-hero--home { min-height: 100svh; }
  .alp-trio > a { min-height: 430px; }   /* measured 358x430 */
  .alp-trio span { font-size: 28px; line-height: 36.4px; }
  .alp-comm__cap h4 { font-size: 26px; line-height: 30px; }
  .alp-post h3 { font-size: 24px; line-height: 30px; }
  .alp-band__head h2, .alp-news h2, .alp-close h2 { font-size: 32px; line-height: 40px; }
}

/* THE VIDEO IS SUPPRESSED ON MOBILE, and this is not a guess: their <video>
   measures 0x0 with display:none at 390px, so the poster is what a phone
   actually shows. Ours autoplayed the bridge clip there, which is why Tony's
   two phone screenshots showed different pictures. */
@media (max-width: 780px) {
  .alp-hero--video .alp-hero__video { display: none; }
  .alp-hero--home {
    background: #000 center/cover no-repeat url('/assets/img/hero-home-poster.png');
  }
}

/* ---- blog article ---------------------------------------------------------
   A reading column, not a marketing band. 65-ish characters is the comfortable
   measure, which at 19px Montserrat is about 720px. */
.alp-post-hero { min-height: 560px; background: #000 center/cover no-repeat; }
.alp-post-hero::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.56); }
.alp-post-hero .alp-hero__inner { max-width: 940px; z-index: 2; }
.alp-post-hero h1 { font-size: 46px; line-height: 54px; text-transform: uppercase; }
.alp-post-hero__meta { margin-top: 18px; font-size: 14px; letter-spacing: .06em; color: rgba(255,255,255,.78); }
.alp-prose { max-width: 720px; margin: 0 auto; }
.alp-prose h2 { font-size: 32px; line-height: 38px; color: var(--alp-gold);
                text-transform: uppercase; margin: 46px 0 16px; }
.alp-prose h3 { font-size: 24px; line-height: 30px; margin: 34px 0 12px; }
.alp-prose p  { font-size: 18px; line-height: 30px; color: rgba(255,255,255,.86); margin: 0 0 20px; }
/* Consecutive single-item lists come from the source markup one <li> at a time.
   Collapsing the gap between them makes them read as one list, which is what
   they are. */
.alp-prose ul { margin: 0; padding-left: 22px; }
.alp-prose ul + ul { margin-top: -14px; }
.alp-prose li { font-size: 18px; line-height: 30px; color: rgba(255,255,255,.86); margin-bottom: 14px; }
.alp-prose blockquote {
  margin: 34px 0; padding: 22px 26px; border-left: 3px solid var(--alp-gold);
  background: rgba(255,255,255,.04);
}
.alp-prose blockquote p { margin: 0; font-size: 19px; line-height: 31px; color: #fff; }
@media (max-width: 780px) {
  .alp-post-hero { min-height: 420px; }
  .alp-post-hero h1 { font-size: 30px; line-height: 37px; }
  .alp-prose p, .alp-prose li { font-size: 17px; line-height: 28px; }
  .alp-prose h2 { font-size: 26px; line-height: 32px; }
}

/* ============================================================================
   HEADER + TRIO GEOMETRY - second measured pass, 2026-07-28
   ----------------------------------------------------------------------------
   Read off both sites at 1440 with the SAME script, so these are differences,
   not impressions:

     nav text-transform   theirs uppercase   ours none
     nav first item x     theirs 380         ours 520   (nav is left-aligned
                                                        after the logo on
                                                        theirs, not pushed
                                                        right)
     nav link height      theirs 26          ours 50    (a touch-target rule
                                                        scoped to hover:none
                                                        was firing on desktop)
     trio card            theirs 421x506     ours 424x430
     trio label inset     theirs 15px / 20px ours 0 / 0
   ========================================================================== */
.alp-nav a:not(.alp-btn) { text-transform: uppercase; }

/* Their nav sits immediately after the logo; the pill and burger are what get
   pushed to the right edge. Header padding 62px each side puts the logo at
   x=62 and the burger's right edge at 1378, both matching. */
.alp-head { padding: 32px 62px 16px; }
.alp-nav { margin-left: 48px; }
.alp-btn--connect { margin-left: auto; }

/* A 44px touch target belongs on TOUCH devices. Keying it to (hover: none)
   also caught headless and any desktop browser that reports no hover, which
   is what made our nav links 50px tall against their 26px. */
@media (hover: none) {
  .alp-nav a, .alp-foot__nav a { padding: 0; display: inline; }
}
@media (pointer: coarse) {
  .alp-nav a, .alp-foot__nav a { padding: 12px 0; display: inline-block; }
}

.alp-trio a { min-height: 506px; }
.alp-trio span { padding: 0 15px 20px; }

@media (max-width: 1100px) {
  .alp-head { padding: 32px 24px 16px; }
}
@media (max-width: 780px) {
  .alp-head { padding: 32px 16px 16px; }
  .alp-trio a { min-height: 430px; }
}

/* Their logo anchor is 270x90 and everything in the bar centres on y=77.
   Ours centred on y=65 because the anchor was only as tall as the image. */
.alp-logo { min-height: 90px; align-items: center; }
@media (max-width: 1100px) { .alp-logo { min-height: 60px; } }

/* ---- hero fine-tuning, measured ------------------------------------------
   Their tagline is a SINGLE line at 1048px wide. Ours capped at 760px and
   wrapped to two, which shifted every element under it down by 26px. */
.alp-hero__lede { max-width: 1048px; }

/* Their hero carries a stronger scrim than ours plus a darkening under the
   nav, which is what keeps white nav labels legible over a bright frame of
   the video. */
.alp-hero--home::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 260px),
    rgba(0,0,0,.46);
}

/* The accessibility launcher sits bottom-LEFT by default and lands on top of
   the hero copy at some widths. Theirs is bottom-right; ours moves to match,
   overriding the widget's own !important rules rather than editing the shared
   component, which is used by other sites. */
#adaButton,
#adaPanel {
  left: auto !important;
  right: 20px !important;
}

/* The launcher lives inside a fixed #adaWidget wrapper, so overriding the
   BUTTON did nothing: it was already at left:0 of a container pinned left.
   Move the wrapper. (Probed in the browser rather than assumed - the button
   reported right:20px and still rendered at x=20.) */
#adaWidget { left: auto !important; right: 20px !important; }

/* Their tagline is one line at 1048px. Ours needed a few pixels more at the
   same 19px/300, so it gets the full inner width rather than a fixed cap. */
.alp-hero__lede { max-width: 1132px; }

/* ============================================================================
   BAND LAYOUTS - third measured pass, 2026-07-28
   ----------------------------------------------------------------------------
   Cropping their rendered page band by band showed the earlier version was a
   reasonable-looking page that used the WRONG LAYOUT in six places. Measuring
   heights told me the bands were the wrong size; only looking told me why:

     band  4  communities   a LEFT-ALIGNED head, a linked NAME LIST down the
                            left, and a horizontal CARD RAIL on the right.
                            Ours was a centred head over a 4x3 grid.
     bands 6,7 listings     ONE LEAD CARD plus TWO STACKED, with the price and
                            address on a plate INSIDE the photo. Ours was three
                            equal cards with the text underneath.
     band  8  valuation     a PHOTO band with a centred white h1-scale heading,
                            three ticks, and a white search bar. Ours was a
                            white two-column panel.
     band 10  blog          ONE LEAD POST plus a THREE-ROW list. Ours was a
                            3x2 grid.
     band 11  CTA           a translucent PANEL centred over the photo.

   Band heads come in two flavours on their site and the difference is not
   decorative: centred (bands 1, 5, 9) and left with a gold rule before the
   eyebrow (bands 4, 6, 7, 10).
   ========================================================================== */

/* ---- band scaffolding: measured 62px side gutter, 96-150px top ------------ */
.alp-band { padding: 96px 62px; }
.alp-band__inner { max-width: 1316px; margin: 0 auto; }

/* LEFT head with the gold rule. The rule is 44px of gold before the eyebrow. */
.alp-band__head--left { max-width: none; margin: 0 0 40px; text-align: left; }
.alp-band__head--left .alp-eyebrow { display: flex; align-items: center; gap: 14px; }
.alp-band__head--left .alp-eyebrow::before {
  content: ''; width: 44px; height: 1px; background: var(--alp-gold); flex: 0 0 44px;
}
.alp-band__head--left p { margin-top: 14px; max-width: 860px; }

/* Rail controls, top-right of a left head (communities) or bottom-right (blog) */
.alp-railhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 40px; }
.alp-railhead .alp-band__head--left { margin-bottom: 0; }
.alp-rail-nav { display: flex; gap: 12px; flex: 0 0 auto; }
.alp-rail-nav button {
  width: 56px; height: 56px; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1px solid rgba(255,255,255,.6); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.alp-rail-nav button:hover { background: #fff; color: #000; }
.alp-rail-nav button[disabled] { opacity: .35; cursor: default; }

/* ---- band 4: communities -------------------------------------------------- */
.alp-comm-wrap { display: grid; grid-template-columns: 340px 1fr; gap: 52px; align-items: start; }
.alp-comm-list { list-style: none; margin: 0 0 30px; padding: 0; }
.alp-comm-list li { border-bottom: 1px solid rgba(255,255,255,.22); }
.alp-comm-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 0; font-family: var(--alp-body); font-size: 13px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--alp-white);
}
.alp-comm-list a:hover { color: var(--alp-gold); text-decoration: none; }
.alp-comm-list svg { flex: 0 0 auto; opacity: .7; }

/* The rail is a real horizontal scroller, so it works with a trackpad, a swipe,
   a keyboard and the arrow buttons. A carousel that only responds to its own
   buttons is a carousel you cannot use with a keyboard. */
.alp-comm-rail {
  display: flex; gap: 6px; overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.alp-comm-rail::-webkit-scrollbar { display: none; }
.alp-comm-rail > a {
  position: relative; flex: 0 0 407px; height: 600px; overflow: hidden; scroll-snap-align: start;
}
.alp-comm-rail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.alp-comm-rail .alp-comm__cap {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center; background: rgba(0,0,0,.28);
}
.alp-comm-rail .alp-comm__cap h4 { font-size: 32px; line-height: 35.84px; text-transform: uppercase; margin: 0; }
.alp-comm-rail .alp-comm__cap em { display: none; }
.alp-comm-rail > a:hover .alp-comm__cap { background: rgba(0,0,0,.1); }

/* ---- bands 6/7: one lead listing plus two stacked ------------------------- */
.alp-props { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: none; }
.alp-props__stack { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
.alp-prop { position: relative; display: block; overflow: hidden; color: #fff; }
.alp-prop--lead { min-height: 590px; }
.alp-props__stack .alp-prop { min-height: 285px; }
.alp-prop__media { position: absolute; inset: 0; aspect-ratio: auto; }
.alp-prop__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alp-prop__tag {
  position: absolute; top: 18px; left: 18px; z-index: 3;
  background: rgba(26,26,26,.86); color: #fff;
  font-family: var(--alp-body); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; padding: 8px 14px;
}
.alp-prop__plate {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 22px 24px; background: rgba(20,20,20,.72);
}
.alp-prop__price { display: block; font-family: var(--alp-display); font-size: 30px; line-height: 1.1; margin: 0 0 8px; }
.alp-prop__addr  { display: block; font-family: var(--alp-body); font-size: 13px; font-weight: 400;
                   letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.9); }
.alp-prop__spec  { display: block; font-family: var(--alp-body); font-size: 12px; letter-spacing: .08em;
                   color: rgba(255,255,255,.72); margin-top: 6px; }
.alp-prop:hover { text-decoration: none; }
.alp-prop:hover img { transform: scale(1.03); transition: transform .5s; }

/* ---- band 5: testimonials over a photo ----------------------------------- */
.alp-testi { padding: 96px 62px; }
.alp-testi::before { background: rgba(0,0,0,.34); }
.alp-quote { background: rgba(26,26,26,.72); border: 0; padding: 40px 34px 34px; text-align: center; }
.alp-stars { text-align: right; }
.alp-quote cite { display: block; margin-top: 22px; font-family: var(--alp-display);
                  font-size: 19px; letter-spacing: .04em; text-transform: uppercase; color: #fff; }

/* ---- band 8: valuation over a photo -------------------------------------- */
.alp-val {
  position: relative; background: #000 center/cover no-repeat; color: #fff;
  padding: 120px 62px; text-align: center;
}
.alp-val::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.34); }
.alp-val > * { position: relative; z-index: 2; }
.alp-val h2 { color: #fff; font-size: var(--alp-h2); line-height: var(--alp-h2-lh); text-transform: uppercase; }
/* Was a hard-coded 64px/65.92px. Theirs measures 52px/59.8px at 1920 and
   80px/92px at 2560, so it was wrong at 1920 AND could not scale. Driving it
   from the h2 variables fixes both at once. */
.alp-val__ticks {
  display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; margin: 26px 0 34px;
  font-family: var(--alp-body); font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: #fff;
}
.alp-val__ticks span { display: flex; align-items: center; gap: 10px; }
.alp-val__bar {
  display: flex; align-items: center; gap: 12px; max-width: 1100px; margin: 0 auto;
  background: #fff; border-radius: 6px; padding: 12px 12px 12px 22px;
}
.alp-val__bar svg { flex: 0 0 auto; }
.alp-val__bar input {
  flex: 1; border: 0; outline: 0; background: transparent; min-height: 48px;
  font-family: var(--alp-body); font-size: 16px; color: #1a1a1a;
}
.alp-val__bar button {
  flex: 0 0 auto; min-height: 48px; padding: 0 26px; border-radius: 500px; cursor: pointer;
  background: var(--alp-gold); border: 1px solid var(--alp-gold); color: #fff;
  font-family: var(--alp-body); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.alp-val__bar button:hover { background: #8d7436; border-color: #8d7436; }

/* ---- band 9: newsletter --------------------------------------------------- */
.alp-news { padding: 96px 62px; }
.alp-news form { gap: 14px; }
.alp-news input { flex: 0 1 220px; background: #fff; color: #1a1a1a; border-color: #fff; border-radius: 4px; }
.alp-news input::placeholder { color: #6a6a6a; }
.alp-news button { border-radius: 4px; background: #000; border: 1px solid #fff; padding: 0 44px; }
.alp-news__consent {
  display: flex; gap: 10px; align-items: flex-start; justify-content: center;
  max-width: 620px; margin: 22px auto 0; text-align: left;
  font-size: 11px; line-height: 16px; color: rgba(255,255,255,.6);
}
.alp-news__consent input { flex: 0 0 auto; width: 14px; height: 14px; min-height: 0; margin-top: 2px; }
.alp-news__consent a { color: rgba(255,255,255,.85); text-decoration: underline; }

/* ---- band 11: CTA panel over a photo ------------------------------------- */
.alp-close { padding: 0; display: flex; align-items: center; justify-content: center; min-height: 810px; }
.alp-close::before { background: rgba(0,0,0,.2); }
.alp-close__panel {
  position: relative; z-index: 2; width: 546px; max-width: 100%;
  padding: 64px 46px; background: rgba(20,20,20,.66); text-align: center;
}
.alp-close__panel h2 { font-size: var(--alp-h2); line-height: var(--alp-h2-lh); }
/* Right at 1920 but literal, so it stayed 52px while theirs went to 80px
   above their 1981 breakpoint. */
.alp-close__panel p { margin: 20px 0 30px; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .alp-band, .alp-testi, .alp-news, .alp-val { padding-left: 24px; padding-right: 24px; }
  .alp-comm-wrap { grid-template-columns: 1fr; gap: 30px; }
  .alp-props { grid-template-columns: 1fr; }
  .alp-prop--lead { min-height: 420px; }
  .alp-val h2 { font-size: 42px; line-height: 46px; }
}
@media (max-width: 780px) {
  .alp-band, .alp-testi, .alp-news, .alp-val { padding-left: 20px; padding-right: 20px; }
  .alp-band { padding-top: 62px; padding-bottom: 62px; }
  .alp-railhead { flex-direction: column; align-items: stretch; gap: 20px; }
  .alp-rail-nav { display: none; }          /* a swipe replaces the arrows */
  .alp-comm-rail > a { flex: 0 0 82%; height: 420px; }
  .alp-props, .alp-props__stack { grid-template-columns: 1fr; }
  .alp-prop--lead, .alp-props__stack .alp-prop { min-height: 300px; }
  .alp-val { padding-top: 72px; padding-bottom: 72px; }
  .alp-val h2 { font-size: 32px; line-height: 38px; }
  .alp-val__bar { flex-direction: column; align-items: stretch; border-radius: 8px; padding: 12px; }
  .alp-val__bar button { width: 100%; }
  .alp-close { min-height: 560px; }
  .alp-close__panel { padding: 44px 24px; }
  .alp-close__panel h2 { font-size: 32px; line-height: 40px; }
}

/* ---- band 10: lead post + three-row list --------------------------------- */
.alp-blogrow { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.alp-post--lead { background: none; }
.alp-post--lead .alp-post__media { aspect-ratio: 16 / 11; }
.alp-post--lead .alp-post__body { padding: 22px 0 0; }
.alp-post--lead h3 { font-size: 32px; line-height: 35.84px; font-weight: 300; text-transform: uppercase; margin: 0; }

.alp-postlist { display: flex; flex-direction: column; }
.alp-postrow {
  display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.2); color: #fff;
}
.alp-postlist .alp-postrow:first-child { padding-top: 0; }
.alp-postrow__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.alp-postrow__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alp-postrow h3 { font-family: var(--alp-display); font-size: 19px; line-height: 24px;
                  font-weight: 300; text-transform: uppercase; margin: 0; }
.alp-postrow:hover { text-decoration: none; }
.alp-postrow:hover h3 { color: var(--alp-gold); }

@media (max-width: 1100px) {
  .alp-blogrow { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .alp-post--lead h3 { font-size: 24px; line-height: 30px; }
  .alp-postrow { grid-template-columns: 110px 1fr; gap: 16px; }
  .alp-postrow h3 { font-size: 16px; line-height: 21px; }
}

/* ============================================================================
   BIO BANDS + REMAINING SPACING - fourth measured pass, 2026-07-28
   ----------------------------------------------------------------------------
   Cropping bands 2 and 3 showed one thing the numbers alone could not: their
   "Will Garrison" heading is NOT Aboreto uppercase like every other h2 on the
   page. It is the SCRIPT face in gold, which is why getComputedStyle reported
   font-size 0 and a transparent colour on it - the visible glyphs are drawn by
   a means the DOM does not expose. Matched by looking, same as the hero
   signature.

   Measured off the crops at 1440:
     band 2   image 648x1072 on the LEFT, 600px text column right, gap 52
     band 3   600px text column LEFT, image 661x934 right
     both     top padding 150, eyebrow left-aligned with the gold rule
   ========================================================================== */
.alp-bio { grid-template-columns: minmax(0, 1fr) 600px; gap: 52px; }
.alp-bio--flip { grid-template-columns: 600px minmax(0, 1fr); }
.alp-bio__media img { max-height: none; height: 1072px; }
.alp-bio--flip .alp-bio__media img { height: 934px; }
.alp-bio__body .alp-eyebrow { display: flex; align-items: center; gap: 14px; }
.alp-bio__body .alp-eyebrow::before {
  content: ''; width: 44px; height: 1px; background: var(--alp-gold); flex: 0 0 44px;
}

/* The name heading is the script face in gold, not the uppercase display face. */
.alp-bio__body h2.alp-script {
  font-family: 'Pinyon Script', 'Snell Roundhand', cursive;
  font-size: 56px; line-height: 1.15; text-transform: none; color: var(--alp-gold);
}

/* Their bio bands sit on 150px of top padding, not 96. */
.alp-band--bio { padding-top: 150px; }

/* Their hero h1 line-height is 65.92px. Ours inherited 1.2 (76.8px), which
   pushed everything under it down by 11px. */
.alp-hero--home h1 { line-height: 65.92px; }

/* Band 1's standfirst is 20px/27.6px on theirs; ours was styled inline at 13px. */
.alp-lede-caps {
  font-size: 20px; line-height: 27.6px; font-weight: 300;
  letter-spacing: normal; text-transform: uppercase; color: var(--alp-white);
}

/* Their valuation band is 558px tall; ours came out 464. */
.alp-val { padding-top: 150px; padding-bottom: 150px; }

@media (max-width: 1100px) {
  .alp-bio, .alp-bio--flip { grid-template-columns: 1fr; }
  .alp-bio__media img, .alp-bio--flip .alp-bio__media img { height: 460px; }
  .alp-band--bio { padding-top: 72px; }
  .alp-val { padding-top: 90px; padding-bottom: 90px; }
}
@media (max-width: 780px) {
  .alp-bio__media img, .alp-bio--flip .alp-bio__media img { height: 360px; }
  .alp-bio__body h2.alp-script { font-size: 40px; }
  .alp-lede-caps { font-size: 16px; line-height: 24px; }
}

/* Their blog band is 1120px and ours came in at 960. The lead column is wider
   than half (about 724 of the 1316 content width) and the row thumbnails are
   212px, not 150. */
.alp-blogrow { grid-template-columns: 724px minmax(0, 1fr); gap: 30px; }
.alp-post--lead .alp-post__media { aspect-ratio: 16 / 11; }
.alp-postrow { grid-template-columns: 212px 1fr; padding: 22px 0; }
.alp-postrow h3 { font-size: 21px; line-height: 27px; }
@media (max-width: 1100px) {
  .alp-blogrow { grid-template-columns: 1fr; }
  .alp-postrow { grid-template-columns: 150px 1fr; }
}

/* Band 11's scrim was measured, not guessed: the same photo reads (43,37,30)
   on theirs and (60,51,41) on ours at the same pixel, which puts their overlay
   at about 43% rather than the 20% I had. */
.alp-close::before { background: rgba(0, 0, 0, .43); }

/* ---- inner page hero -----------------------------------------------------
   Their inner pages open on a 642px photo band with a 52px white heading, not
   the 900px video hero the homepage uses. */
.alp-hero--page { min-height: 642px; }
.alp-hero--page h1 { font-size: 52px; line-height: 59.8px; text-transform: uppercase; }
.alp-hero--page .alp-hero__bg::after { background: rgba(0,0,0,.42); }
@media (max-width: 780px) {
  .alp-hero--page { min-height: 380px; }
  .alp-hero--page h1 { font-size: 32px; line-height: 40px; }
}

/* ---- the contact form band ------------------------------------------------
   Their heading here is WHITE, not the gold used on every other band, and the
   form sits in a centred column with a hairline border. */
.alp-formband__inner {
  max-width: 900px; margin: 0 auto; padding: 46px 46px 40px;
  border: 1px solid rgba(255,255,255,.18);
}
.alp-formband h2 { color: var(--alp-white); text-transform: uppercase; text-align: center; margin-bottom: 34px; }
.alp-form__row--3 { grid-template-columns: repeat(3, 1fr); }
.alp-formband__alt { margin-top: 26px; text-align: center; font-size: 15px; color: rgba(255,255,255,.7); }
.alp-formband__alt a { color: var(--alp-gold); }
.alp-consent {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 16px;
  font-size: 11px; line-height: 16px; color: rgba(255,255,255,.6);
  font-family: var(--alp-body); font-weight: 300; letter-spacing: normal; text-transform: none;
}
.alp-consent input { flex: 0 0 auto; width: 14px; height: 14px; min-height: 0; margin-top: 2px; }
.alp-consent a { color: rgba(255,255,255,.85); text-decoration: underline; }
@media (max-width: 780px) {
  .alp-formband__inner { padding: 28px 20px 26px; }
  .alp-form__row--3 { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================================
   FOOTER v2 - rebuilt against a crop of their rendered footer, 2026-07-28
   ----------------------------------------------------------------------------
   Theirs is left-aligned with a vertical rule between the name and the contact
   block, a round social row on the right, a gold hairline, then NAVIGATION, the
   broker line, the TREC documents and the REALTOR/EHO marks. Ours was centred
   with five links and no socials.
   ========================================================================== */
.alp-foot { background: var(--alp-black); padding: 76px 62px 40px; text-align: left; }
.alp-foot__inner { max-width: 1316px; margin: 0 auto; }
.alp-foot__logo { display: inline-block; margin-bottom: 40px; }
.alp-foot__logo img { width: 190px; height: auto; }

.alp-foot__top { display: grid; grid-template-columns: 1fr 1fr auto; gap: 40px; align-items: start; }
.alp-foot__id h5 { color: var(--alp-gold); font-size: 35px; line-height: 40.95px; text-transform: uppercase; margin: 0; }
.alp-foot__contact { border-left: 1px solid rgba(255,255,255,.22); padding-left: 40px; }
.alp-foot__label {
  font-family: var(--alp-body); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--alp-gold); margin: 0 0 12px;
}
.alp-foot__contact p { font-size: 14px; line-height: 24px; color: rgba(255,255,255,.8); margin: 0; }
.alp-foot__contact a { color: rgba(255,255,255,.8); text-decoration: underline; }
.alp-foot__contact a:hover { color: var(--alp-gold); }

.alp-foot__social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.alp-foot__social a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4); color: rgba(255,255,255,.8);
}
.alp-foot__social a:hover { background: var(--alp-gold); border-color: var(--alp-gold); color: #000; }

.alp-foot__rule { border: 0; border-top: 1px solid rgba(162,134,63,.55); margin: 40px 0 26px; }

.alp-foot__navrow { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: center; margin-bottom: 30px; }
.alp-foot__navrow .alp-foot__label { margin: 0; }
.alp-foot__nav { display: flex; flex-wrap: wrap; gap: 26px; }
.alp-foot__nav a {
  font-family: var(--alp-body); font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.86);
  text-decoration: underline; text-underline-offset: 4px;
}
.alp-foot__nav a:hover { color: var(--alp-gold); }

.alp-foot__meta { font-size: 12px; line-height: 20px; letter-spacing: .06em; color: rgba(255,255,255,.78); margin: 0 0 22px; }
.alp-foot__meta a { color: rgba(255,255,255,.9); text-decoration: underline; }
.alp-foot__legaldocs { font-size: 12px; line-height: 22px; margin: 0 0 20px; }
.alp-foot__legaldocs a { color: rgba(255,255,255,.78); text-decoration: underline; }
.alp-foot__legaldocs a:hover { color: var(--alp-gold); }
.alp-foot__legal { font-size: 11px; line-height: 18px; color: rgba(255,255,255,.5); margin: 0 0 24px; max-width: 900px; }
.alp-foot__logos img { width: 120px; height: auto; opacity: .9; }
.alp-foot__bar {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14);
  font-size: 11px; letter-spacing: .08em; color: rgba(255,255,255,.5);
}
.alp-foot__bar a { color: rgba(255,255,255,.7); text-decoration: underline; margin-left: 22px; }
.alp-foot__bar a:hover { color: var(--alp-gold); }

@media (max-width: 900px) {
  .alp-foot { padding: 56px 20px 34px; }
  .alp-foot__top { grid-template-columns: 1fr; gap: 26px; }
  .alp-foot__contact { border-left: 0; padding-left: 0; }
  .alp-foot__id h5 { font-size: 26px; line-height: 32px; }
  .alp-foot__navrow { grid-template-columns: 1fr; }
  .alp-foot__nav { gap: 16px 22px; }
  .alp-foot__bar { flex-direction: column; gap: 10px; }
  .alp-foot__bar a { margin: 0 18px 0 0; }
}

/* ---- form fields: theirs are WHITE PILLS, not dark rectangles ------------ */
.alp-form input:not([type="checkbox"]),
.alp-form textarea {
  background: var(--alp-white); color: #1a1a1a;
  border: 1px solid var(--alp-white); border-radius: 500px;
  padding: 14px 22px;
}
.alp-form textarea { border-radius: 14px; }
.alp-form input::placeholder, .alp-form textarea::placeholder { color: #7a7a7a; }
.alp-form input:not([type="checkbox"]):focus,
.alp-form textarea:focus { background: var(--alp-white); outline: 2px solid var(--alp-gold); outline-offset: 2px; }
.alp-form label { font-size: 11px; letter-spacing: .16em; color: rgba(255,255,255,.72); }

/* Their name and contact block are ONE left column with the hairline to its
   right, not two columns side by side, and the name sits on a single line. */
.alp-foot__top { grid-template-columns: minmax(0,1fr) auto; gap: 40px; align-items: start; }
.alp-foot__id { border-right: 1px solid rgba(255,255,255,.22); padding-right: 40px; max-width: 640px; }
.alp-foot__id h5 { white-space: nowrap; margin-bottom: 26px; }
.alp-foot__contact { border-left: 0; padding-left: 0; }
.alp-foot__logo img { width: 230px; }
.alp-foot__logos { text-align: left; }
@media (max-width: 900px) {
  .alp-foot__top { grid-template-columns: 1fr; }
  .alp-foot__id { border-right: 0; padding-right: 0; }
  .alp-foot__id h5 { white-space: normal; }
}

/* Two leftovers from the v1 centred footer that survived the rebuild: the
   REALTOR/EHO marks were still centred, and the NAVIGATION label column was
   200px against their ~90px, pushing the links 87px too far right. */
.alp-foot__logos { display: flex; justify-content: flex-start; }
.alp-foot__navrow { grid-template-columns: auto 1fr; gap: 50px; }
@media (max-width: 900px) { .alp-foot__navrow { grid-template-columns: 1fr; gap: 14px; } }

/* ---- "Coming Soon!" band, measured 285px with a 64px heading -------------- */
.alp-comingsoon { background: var(--alp-panel); padding: 96px 62px; text-align: center; }
.alp-comingsoon h2 { color: var(--alp-white); font-size: 64px; line-height: 65.92px; text-transform: uppercase; }
.alp-comingsoon p { max-width: 640px; margin: 22px auto 0; color: rgba(255,255,255,.78); font-size: 17px; }
.alp-comingsoon a { color: var(--alp-gold); }

/* ---- "Start Your Property Search", measured 252px ------------------------- */
.alp-searchband { background: var(--alp-black); padding: 78px 62px; text-align: center; }
.alp-searchband h2 { color: var(--alp-gold); text-transform: uppercase; margin-bottom: 26px; }
.alp-searchband form {
  position: relative; display: flex; align-items: center; gap: 12px;
  max-width: 780px; margin: 0 auto; background: #fff; border-radius: 6px; padding: 10px 10px 10px 20px;
}
.alp-searchband svg { flex: 0 0 auto; }
.alp-searchband input {
  flex: 1; border: 0; outline: 0; background: transparent; min-height: 46px;
  font-family: var(--alp-body); font-size: 16px; color: #1a1a1a;
}
.alp-searchband button {
  flex: 0 0 auto; min-height: 46px; padding: 0 28px; border-radius: 500px; cursor: pointer;
  background: var(--alp-gold); border: 1px solid var(--alp-gold); color: #fff;
  font-family: var(--alp-body); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.alp-searchband button:hover { background: #8d7436; border-color: #8d7436; }
@media (max-width: 780px) {
  .alp-comingsoon { padding: 62px 20px; }
  .alp-comingsoon h2 { font-size: 34px; line-height: 40px; }
  .alp-searchband { padding: 56px 20px; }
  .alp-searchband form { flex-direction: column; align-items: stretch; padding: 12px; }
  .alp-searchband button { width: 100%; }
}

/* The testimonials PAGE uses the same cards on a flat panel rather than over a
   photo, so they need their own ground. */
.alp-testi__grid--flat { grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: none; }
.alp-testi__grid--flat .alp-quote { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); }
@media (max-width: 1100px) { .alp-testi__grid--flat { grid-template-columns: repeat(2, 1fr); } }

/* ---- listing rows on /sale/ and /sold/ ------------------------------------
   Their cards render a truncated description under a 32px price. Ours keeps
   the full text, so the row is image-left / copy-right rather than a card. */
.alp-listings { display: flex; flex-direction: column; gap: 40px; }
.alp-listing2 { display: grid; grid-template-columns: 648px minmax(0, 1fr); gap: 40px; align-items: center; }
.alp-listing2:nth-child(even) .alp-listing2__media { order: 2; }
.alp-listing2__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.alp-listing2__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alp-listing2__body h4 {
  font-family: var(--alp-display); font-size: 32px; line-height: 35.84px;
  font-weight: 400; color: var(--alp-white); margin: 0 0 10px;
}
.alp-listing2__addr {
  font-family: var(--alp-body); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.86); margin: 0 0 6px;
}
.alp-listing2__spec { font-size: 12px; letter-spacing: .08em; color: var(--alp-gold); margin: 0 0 16px; text-transform: uppercase; }
.alp-listing2__body p { font-size: 16px; line-height: 27px; color: rgba(255,255,255,.78); }
.alp-listing2__body .alp-btn { margin-top: 20px; }
@media (max-width: 1100px) {
  .alp-listing2 { grid-template-columns: 1fr; gap: 22px; }
  .alp-listing2:nth-child(even) .alp-listing2__media { order: 0; }
}

/* ---- /about/ contact details band, measured 469px with a 42px heading ---- */
.alp-contactband { padding: 96px 62px; }
.alp-contactband h3 { color: var(--alp-white); font-size: 42px; line-height: 47.88px;
                      text-transform: uppercase; margin-bottom: 30px; }
.alp-contactband ul { list-style: none; margin: 0; padding: 0;
                      display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 46px; }
.alp-contactband li { display: flex; flex-direction: column; gap: 6px;
                      font-size: 17px; color: rgba(255,255,255,.86);
                      border-top: 1px solid rgba(255,255,255,.16); padding-top: 16px; }
.alp-contactband span { font-family: var(--alp-body); font-size: 11px; font-weight: 600;
                        letter-spacing: .18em; text-transform: uppercase; color: var(--alp-gold); }
.alp-contactband a { color: rgba(255,255,255,.92); text-decoration: underline; }
.alp-contactband a:hover { color: var(--alp-gold); }
@media (max-width: 780px) {
  .alp-contactband { padding: 62px 20px; }
  .alp-contactband h3 { font-size: 28px; line-height: 34px; }
  .alp-contactband ul { grid-template-columns: 1fr; }
}

/* ---- /communities/ card grid --------------------------------------------
   Their neighborhoods page is a grid, not the rail the homepage uses: 12 cards
   in a 2599px band, so three across at 1440. */
.alp-commgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.alp-commgrid > a { position: relative; display: block; min-height: 420px; overflow: hidden; }
.alp-commgrid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.alp-commgrid .alp-comm__cap {
  position: absolute; inset: 0; z-index: 2; padding: 26px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.76) 100%);
}
.alp-commgrid .alp-comm__cap h4 { font-size: 32px; line-height: 35.84px; text-transform: uppercase; margin: 0 0 8px; }
.alp-commgrid > a:hover .alp-comm__cap { background: rgba(0,0,0,.42); }
@media (max-width: 1100px) { .alp-commgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 780px)  { .alp-commgrid { grid-template-columns: 1fr; }
                             .alp-commgrid > a { min-height: 300px; } }

/* ---- the one LIGHT content band on the site (/selling-your-home/) --------
   Measured rgb(226,224,224) with a #333 heading. Everything else on this site
   is dark, so this band needs its own type colours rather than inheriting. */
.alp-lightband { background: #e2e0e0; color: #333; padding: 96px 62px; }
.alp-lightband h2 { color: #333; font-size: 40px; line-height: 46px; text-transform: none; margin-bottom: 34px; max-width: 900px; }
.alp-accordion details { border-top: 1px solid rgba(0,0,0,.18); }
.alp-accordion details:last-child { border-bottom: 1px solid rgba(0,0,0,.18); }
.alp-accordion summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; }
.alp-accordion summary::-webkit-details-marker { display: none; }
.alp-accordion summary::after {
  content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--alp-body); font-size: 22px; color: #6a6a6a; line-height: 1;
}
.alp-accordion details[open] summary::after { content: '\2212'; }
.alp-accordion h3 {
  display: inline; font-family: var(--alp-display); font-size: 24px; line-height: 30px;
  font-weight: 400; text-transform: uppercase; color: #1a1a1a;
}
.alp-accordion__body { padding: 0 40px 26px 0; }
.alp-accordion__body p { font-size: 16px; line-height: 27px; color: #444; margin: 0 0 14px; }
@media (max-width: 780px) {
  .alp-lightband { padding: 62px 20px; }
  .alp-lightband h2 { font-size: 26px; line-height: 33px; }
  .alp-accordion h3 { font-size: 19px; line-height: 25px; }
}

/* ---- /home-valuation/ ----------------------------------------------------- */
.alp-val--page h1 { color: #fff; font-size: 64px; line-height: 65.92px; text-transform: uppercase;
                    font-family: var(--alp-display); font-weight: 400; }
.alp-val__note { margin-top: 20px; font-size: 13px; color: rgba(255,255,255,.8); }
.alp-accordion--dark details { border-top-color: rgba(255,255,255,.2); }
.alp-accordion--dark details:last-child { border-bottom-color: rgba(255,255,255,.2); }
.alp-accordion--dark summary::after { color: rgba(255,255,255,.7); }
.alp-accordion--dark h4 {
  display: inline; font-family: var(--alp-display); font-size: 25px; line-height: 31px;
  font-weight: 400; text-transform: uppercase; color: var(--alp-white);
}
.alp-accordion--dark .alp-accordion__body p { color: rgba(255,255,255,.8); }
.alp-twoup { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.alp-twoup--4 { grid-template-columns: repeat(4, 1fr); gap: 30px; }
.alp-twoup article { border-top: 1px solid rgba(255,255,255,.2); padding-top: 24px; }
.alp-twoup h4 { font-family: var(--alp-display); font-size: 32px; line-height: 35.84px;
                font-weight: 400; text-transform: uppercase; color: var(--alp-white); margin: 8px 0 14px; }
.alp-twoup--4 h4 { font-size: 24px; line-height: 29px; }
.alp-twoup p { font-size: 16px; line-height: 27px; color: rgba(255,255,255,.78); }
@media (max-width: 1100px) { .alp-twoup--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 780px) {
  .alp-val--page h1 { font-size: 32px; line-height: 38px; }
  .alp-twoup, .alp-twoup--4 { grid-template-columns: 1fr; gap: 28px; }
  .alp-twoup h4 { font-size: 24px; line-height: 30px; }
}

/* ---- legal document page --------------------------------------------------
   Their policy sits on a WHITE band. A legal document is read, not scanned, so
   it gets a real measure (about 70 characters) and generous leading rather than
   the full-width treatment the marketing bands use. */
.alp-hero--solidbg { background: var(--alp-black); min-height: 460px; }
.alp-legal { background: var(--alp-white); color: #1f1f1f; padding: 92px 62px 110px; }
.alp-legal__inner { max-width: 860px; margin: 0 auto; }
.alp-legal h3 {
  font-family: var(--alp-display); font-size: 42px; line-height: 47.88px;
  text-transform: uppercase; color: #111; margin: 0 0 10px;
}
.alp-legal h4 {
  font-family: var(--alp-display); font-size: 22px; line-height: 28px; font-weight: 400;
  color: #111; margin: 38px 0 12px;
}
.alp-legal p  { font-size: 16px; line-height: 28px; color: #3a3a3a; margin: 0 0 16px; }
.alp-legal ul { margin: 0 0 18px; padding-left: 22px; }
.alp-legal li { font-size: 16px; line-height: 28px; color: #3a3a3a; margin-bottom: 8px; }
.alp-legal a  { color: #7d6631; text-decoration: underline; }
@media (max-width: 780px) {
  .alp-hero--solidbg { min-height: 300px; }
  .alp-legal { padding: 56px 20px 70px; }
  .alp-legal h3 { font-size: 26px; line-height: 32px; }
  .alp-legal h4 { font-size: 19px; line-height: 25px; }
}

/* ---- property detail ------------------------------------------------------ */
.alp-specrow {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid rgba(255,255,255,.18); margin-bottom: 46px;
}
.alp-specrow > div { padding: 24px 20px; text-align: center; border-right: 1px solid rgba(255,255,255,.18); }
.alp-specrow > div:last-child { border-right: 0; }
.alp-specrow b { display: block; font-family: var(--alp-display); font-size: 28px; font-weight: 400; color: #fff; }
.alp-specrow span { display: block; margin-top: 6px; font-family: var(--alp-body); font-size: 11px;
                    font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--alp-gold); }
.alp-propcols { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 46px; align-items: start; }
.alp-propcols h2 { color: var(--alp-gold); text-transform: uppercase; margin-bottom: 18px; }
.alp-propcols p { font-size: 17px; line-height: 28px; color: rgba(255,255,255,.84); }
.alp-propnote { font-size: 13px !important; line-height: 22px !important; color: rgba(255,255,255,.55) !important; margin-top: 18px; }
.alp-inquire { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); padding: 30px 28px; }
.alp-inquire h3 { font-size: 26px; line-height: 32px; text-transform: uppercase; color: #fff; margin: 8px 0 14px; }
.alp-inquire p { font-size: 15px; line-height: 25px; color: rgba(255,255,255,.78); margin-bottom: 20px; }
.alp-inquire .alp-btn { display: block; text-align: center; margin-bottom: 10px; }
@media (max-width: 1100px) {
  .alp-propcols { grid-template-columns: 1fr; }
  .alp-specrow { grid-template-columns: repeat(2, 1fr); }
  .alp-specrow > div:nth-child(2n) { border-right: 0; }
  .alp-specrow > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.18); }
}

/* ---- numbered process list ------------------------------------------------ */
.alp-steps { counter-reset: alpstep; list-style: none; margin: 0; padding: 0; }
.alp-steps li {
  counter-increment: alpstep; position: relative; padding: 22px 0 22px 62px;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: 17px; line-height: 28px; color: rgba(255,255,255,.84);
}
.alp-steps li:last-child { border-bottom: 1px solid rgba(255,255,255,.18); }
.alp-steps li::before {
  content: counter(alpstep); position: absolute; left: 0; top: 20px;
  font-family: var(--alp-display); font-size: 26px; color: var(--alp-gold); line-height: 1;
}
.alp-steps strong { color: #fff; font-weight: 500; }
@media (max-width: 780px) { .alp-steps li { padding-left: 46px; font-size: 16px; line-height: 26px; } }

/* Bridge classes used by the accessibility statement, which was ported from
   the old design system rather than rewritten (its wording is a commitment, so
   the copy stays byte-for-byte). */
.alp-lead { max-width: 760px; margin-left: auto; margin-right: auto; color: rgba(255,255,255,.82); }
.alp-cardlink {
  display: block; border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04); padding: 24px; color: #fff;
}
.alp-cardlink:hover { border-color: var(--alp-gold); text-decoration: none; }
.alp-cardlink h3 { font-size: 22px; line-height: 28px; margin: 0 0 10px; }

/* ============================================================================
   LEGAL PAGE - matched to their measured values, 2026-07-28
   ----------------------------------------------------------------------------
   Ours ran 21,132px against their 11,334px for the same document. The cause was
   entirely typographic and every number here was read off their rendered page:

     column width   theirs 1265px   ours 860px
     body           19px / 26.22px  16px / 28px
     paragraph gap  13.328px        16px
     body colour    rgb(26,26,26)   rgb(58,58,58)

   I had set a 70-character measure because that is the comfortable one for
   reading. Theirs is wider and tighter. The brief is to match their page, so
   their values win; the sub-headings stay as real <h4> elements because they
   make a 129-block legal document navigable, but their spacing is tightened so
   they cost height rather than adding it.
   ========================================================================== */
.alp-legal__inner { max-width: 1265px; }
.alp-legal p  { font-size: 19px; line-height: 26.22px; color: rgb(26,26,26); margin: 0 0 13.328px; }
.alp-legal li { font-size: 19px; line-height: 26.22px; color: rgb(26,26,26); margin-bottom: 4px; }
.alp-legal ul { margin: 0 0 13.328px; }
.alp-legal h3 { margin-bottom: 24px; color: #000; }
.alp-legal h4 { font-size: 19px; line-height: 26.22px; margin: 18px 0 4px; color: #000;
                font-family: var(--alp-body); font-weight: 600; }
@media (max-width: 780px) {
  .alp-legal p, .alp-legal li, .alp-legal h4 { font-size: 16px; line-height: 25px; }
}

/* Their legal hero is a BLACK band at the same 642px every other inner page
   hero uses; I had shortened it to 460. */
.alp-hero--solidbg { min-height: 642px; }
@media (max-width: 780px) { .alp-hero--solidbg { min-height: 380px; } }

/* Some band headings are WHITE rather than gold on their site: "Submit a
   Message", "Featured Articles", "Notable Sales", "Trusted by Lake Travis
   Homeowners", "How is a valuation performed?". */
.alp-band__head h2.alp-h2--white { color: var(--alp-white); }

/* ---- /blog/ index grid ----------------------------------------------------
   Measured: theirs is TWO cards across at 638x527 with a 16px gap (three rows
   of two), not the three-across grid the homepage rail uses. That is why their
   band is 2214px and ours was 1444px. */
.alp-blog--index { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.alp-blog--index .alp-post__media { aspect-ratio: 16 / 9; }
.alp-blog--index .alp-post h3 { font-size: 26px; line-height: 32px; }
@media (max-width: 780px) { .alp-blog--index { grid-template-columns: 1fr; } }

/* ============================================================================
   LISTING ROWS v2 - matched to their /sold/ "Notable Sales" band
   ----------------------------------------------------------------------------
   Cropping their band showed four things the plain row was missing, which is
   most of why our band ran 2,663px against their 3,327px:
     - the address sits ABOVE the price, in small caps
     - beds / baths / sq ft are GOLD OUTLINE PILL BADGES, not a text line
     - a hairline, then a "Property description" label above the description
     - a "Property details" outline button
   ========================================================================== */
.alp-listing2__body { display: flex; flex-direction: column; }
.alp-listing2__addr { order: 1; font-size: 12px; letter-spacing: .12em; color: rgba(255,255,255,.72); margin: 0 0 10px; }
.alp-listing2__body h4 { order: 2; font-size: 32px; line-height: 35.84px; text-transform: uppercase; margin: 0 0 18px; }
.alp-badges { order: 3; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.alp-badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--alp-gold); border-radius: 500px; padding: 8px 16px;
  font-family: var(--alp-body); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--alp-gold);
}
.alp-listing2__desc { order: 4; }
.alp-listing2__desclabel {
  display: block; padding-top: 20px; margin-bottom: 10px;
  border-top: 1px solid rgba(255,255,255,.2);
  font-family: var(--alp-body); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.7);
}
.alp-listing2__body .alp-btn { order: 5; align-self: flex-start; margin-top: 22px; }
.alp-listing2__spec { display: none; }   /* replaced by the badges */

/* Their filter bar sits inside the band, under the head. */
.alp-filterwrap { margin-bottom: 46px; }

/* Their listing rows sit ~100px apart, not 40. Measured off the gap between
   the bottom of one photo and the top of the next row's copy. */
.alp-listings { gap: 100px; }
@media (max-width: 1100px) { .alp-listings { gap: 56px; } }

/* ---- /home-valuation/ band geometry, measured --------------------------- */
/* Their explainer bands stack one item per row (1224px and 1328px) rather than
   packing two or four across. */
.alp-twoup--stack { grid-template-columns: 1fr; gap: 0; }
.alp-twoup--stack article { padding: 34px 0 40px; }
.alp-twoup--stack h4 { font-size: 32px; line-height: 35.84px; margin: 10px 0 16px; }
.alp-twoup--stack p { font-size: 18px; line-height: 30px; max-width: 1000px; }

/* Their intro band here is 704px, not the 1318px the shared bio band produced
   with its 1072px portrait. */
.alp-band--short .alp-bio__media img,
.alp-band--short.alp-bio--flip .alp-bio__media img { height: 460px; }
.alp-band--short { padding-top: 96px; }
@media (max-width: 780px) {
  .alp-twoup--stack h4 { font-size: 24px; line-height: 30px; }
  .alp-band--short .alp-bio__media img { height: 300px; }
}

/* Their explainer accordion band is 690px for three collapsed items (230 each);
   ours was 422 (140 each). The difference is row padding. */
.alp-accordion--dark summary { padding: 40px 40px 40px 0; }
.alp-accordion--dark .alp-accordion__body { padding-bottom: 34px; }
@media (max-width: 780px) { .alp-accordion--dark summary { padding: 26px 34px 26px 0; } }

/* Their band-1 standfirst measures 20px/27.6px at 390px, and the intro under it
   19px/26.22px. I had shrunk both on mobile; theirs does not shrink them. */
@media (max-width: 780px) {
  .alp-lede-caps { font-size: 20px; line-height: 27.6px; }
  .alp-band__head p { font-size: 19px; line-height: 26.22px; }
}

/* The rule above set .alp-lede-caps to 20px and then .alp-band__head p reset it
   to 19px, because both are single-class selectors and the later one wins.
   Raise the specificity rather than reordering, so the two rules cannot swap
   again if something is appended later. */
@media (max-width: 780px) {
  .alp-band__head p.alp-lede-caps { font-size: 20px; line-height: 27.6px; }
}

/* Body copy in the bio bands is 19px/26.22px on theirs, matching every other
   paragraph on the site. I had set 17px/27px, which showed up as a 3% tablet
   delta and made those two bands read lighter than the rest of the page. */
.alp-bio__body p { font-size: 19px; line-height: 26.22px; }
@media (max-width: 780px) { .alp-bio__body p { font-size: 17px; line-height: 27px; } }

/* ============================================================================
   THE PAGE FRAME - Tony spotted this before any measurement did
   ----------------------------------------------------------------------------
   Their <body> is WHITE with `padding: 12px 12px 0`, so every section sits at
   x=12 with a width of 1416 and the page reads as artwork inside a thin white
   mount. Ours was black and full-bleed at x=0, width=1440.

   Measured, both sides, same viewport:
     theirs   body bg rgb(255,255,255)  padding 12px 12px 0   section box 12,12,1416
     ours     body bg #000              padding 0             section box 0,0,1440

   box-sizing is already border-box site-wide and html/body keep
   overflow-x: hidden, so the frame costs no horizontal scroll.
   ========================================================================== */
body {
  background: var(--alp-white);
  padding: 12px 12px 0;
}

/* The header is absolutely positioned against the viewport, so it has to be
   pulled back inside the frame or it hangs over the white edge. Their logo
   lands at x=62, which is the 12px frame plus 50px of header padding. */
.alp-head { padding-left: 50px; padding-right: 50px; }
.alp-head--solid { left: 12px; right: 12px; }

/* The full-screen menu overlay covers the frame too, exactly as theirs does. */
.alp-menu { top: -12px; left: -12px; right: -12px; }

@media (max-width: 1100px) { .alp-head { padding-left: 12px; padding-right: 12px; } }
@media (max-width: 780px)  { .alp-head { padding-left: 4px;  padding-right: 4px; } }

/* The frame is a DESKTOP/TABLET treatment only. Probed their body padding
   across fourteen widths: 12px from 768px up, 0 below it, switching exactly
   between 767 and 768. A phone gets a full-bleed page on their site and now
   on ours. */
@media (max-width: 767px) {
  body { padding: 0; background: var(--alp-black); }
  .alp-head--solid { left: 0; right: 0; }
  .alp-menu { top: 0; left: 0; right: 0; }
}

/* ============================================================================
   MENU PANEL v2 - measured off their opened menu, 2026-07-28
   ----------------------------------------------------------------------------
   Ours was a black full-screen overlay with a single centred column. Theirs is
   a LIGHT right-anchored sheet:

     sheet        fixed, right-anchored, 1156x100vh, bg rgb(226,224,224)
     padding      135px 55px
     columns      four, at x=363 / 608 / 852 / 1097 (245px apart)
     rows         50px pitch from y=135
     top level    19px Aboreto uppercase, black, with a GOLD two-digit number
     sub-links    14px Montserrat uppercase, underlined
     close        circular, top-right
     foot         CONTACT DETAILS block left, FOLLOW ME + 4 round socials right
   ========================================================================== */
.alp-menu {
  position: fixed; inset: 0; z-index: 90;
  display: block; padding: 0; overflow: visible;
  background: rgba(0, 0, 0, .35);
}
.alp-menu[hidden] { display: none; }
.alp-menu__sheet {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 1156px; max-width: 100%;
  background: #e2e0e0; color: #000;
  padding: 135px 55px; overflow-y: auto;
}
.alp-menu__close {
  position: absolute; top: 34px; right: 34px;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: #1a1a1a; border: 0; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.alp-menu__close:hover { background: var(--alp-gold); }

.alp-menu__cols { display: grid; grid-template-columns: repeat(4, 245px); gap: 0; align-items: start; }
.alp-menu__cols ul { list-style: none; margin: 0; padding: 0; }
.alp-menu__item {
  display: flex; align-items: baseline; gap: 12px;
  padding: 0; height: 50px;
  font-family: var(--alp-display); font-size: 19px; line-height: 50px;
  text-transform: uppercase; color: #000;
}
.alp-menu__item:hover { color: var(--alp-gold); text-decoration: none; }
.alp-menu__num {
  font-family: var(--alp-body); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; color: var(--alp-gold); flex: 0 0 auto;
}
.alp-menu__sub { margin: 0 0 8px 34px; }
.alp-menu__sub a {
  display: block; padding: 5px 0;
  font-family: var(--alp-body); font-size: 14px; font-weight: 400;
  letter-spacing: .04em; text-transform: uppercase; color: #000;
  text-decoration: underline; text-underline-offset: 3px;
}
.alp-menu__sub a:hover { color: var(--alp-gold); }

.alp-menu__rule { border: 0; border-top: 1px solid rgba(0,0,0,.35); margin: 60px 0 70px; max-width: 590px; }

.alp-menu__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.alp-menu__label {
  font-family: var(--alp-body); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #000; margin: 0 0 16px;
}
.alp-menu__biz { font-family: var(--alp-body); font-size: 14px; letter-spacing: .04em; margin: 0 0 4px; color: #000; }
.alp-menu__foot p { font-family: var(--alp-body); font-size: 14px; line-height: 20px; color: #000; margin: 0; }
.alp-menu__foot a { color: #000; text-decoration: underline; text-underline-offset: 3px; }
.alp-menu__foot a:hover { color: var(--alp-gold); }
.alp-menu__social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.alp-menu__social a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.55); color: #000;
}
.alp-menu__social a:hover { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }

@media (max-width: 1240px) {
  .alp-menu__sheet { padding: 110px 34px; }
  .alp-menu__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
}
@media (max-width: 780px) {
  .alp-menu__sheet { width: 100%; padding: 92px 22px 40px; }
  .alp-menu__cols { grid-template-columns: 1fr; }
  .alp-menu__item { font-size: 20px; height: auto; line-height: 1.3; padding: 12px 0; }
  .alp-menu__close { top: 22px; right: 18px; }
  .alp-menu__rule { margin: 34px 0 34px; }
  .alp-menu__foot { grid-template-columns: 1fr; gap: 28px; }
}

/* The v1 menu rules `.alp-menu nav` and `.alp-menu nav a` are (0,1,1) and beat
   the new `.alp-menu__cols` / `.alp-menu__item` classes at (0,1,0), so the four
   columns collapsed into one centred stack at 22px instead of 19px. Exactly the
   same collision as `.alp-nav a` beating `.alp-btn` earlier in this build.
   Neutralise the old rules at equal specificity rather than deleting them, so
   the original values stay on the record. */
.alp-menu nav.alp-menu__cols {
  display: grid; grid-template-columns: repeat(4, 245px);
  flex-direction: unset; align-items: start; gap: 0;
}
.alp-menu nav.alp-menu__cols a.alp-menu__item {
  display: flex; align-items: baseline; justify-content: flex-start;
  font-family: var(--alp-display); font-size: 19px; line-height: 50px;
  padding: 0; text-align: left; color: #000;
}
.alp-menu nav.alp-menu__cols a.alp-menu__item:hover { color: var(--alp-gold); }
.alp-menu nav.alp-menu__cols .alp-menu__sub a {
  font-family: var(--alp-body); font-size: 14px; line-height: 1.5;
  padding: 5px 0; color: #000; text-align: left;
}
@media (max-width: 1240px) {
  .alp-menu nav.alp-menu__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
}
@media (max-width: 780px) {
  .alp-menu nav.alp-menu__cols { grid-template-columns: 1fr; }
  .alp-menu nav.alp-menu__cols a.alp-menu__item { font-size: 20px; line-height: 1.3; padding: 12px 0; }
}

/* ============================================================================
   HEADER ALIGNMENT - measured element by element against theirs at 1440
   ----------------------------------------------------------------------------
   Tony: "navigation and such is not exactly in line". It was not. Every number
   below is the difference between their box and ours, read with the same script
   on both sites:

     element          theirs        ours (before)   fix
     logo             x=62          x=50            header padding 50 -> 62
     Properties       x=380         x=388           kill the 20px flex gap
     Home Search      x=547         x=550
     Home Valuation   x=718         x=722
     Neighborhoods    x=920         x=924
     Let's Connect    50px tall     52px tall       line-height 26 -> 24
     burger           x=1338        x=1350          right edge 1390 -> 1378

   The header is absolutely positioned against the VIEWPORT, so it sits outside
   the body's 12px frame; its own padding is therefore the full 62, not 62-12.
   That was the mistake: I subtracted the frame from a box the frame never
   applied to, which pushed every item 12px right and the burger 12px out. */
.alp-head { padding-left: 62px; padding-right: 62px; gap: 0; }
.alp-nav { margin-left: 48px; }
.alp-btn--connect { line-height: 24px; }

@media (max-width: 1100px) { .alp-head { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 780px)  { .alp-head { padding-left: 16px; padding-right: 16px; } }

/* Two residual offsets, both traced rather than nudged:
   1. Their "Properties" item measures 135px wide, ours 130, because their
      dropdown caret sits further from the label. Every item after it inherited
      the 5px error (Home Search 542 vs 547, and so on down the bar).
   2. Their pill ends at 1330 with an 8px gap before the burger at 1338. With
      the flex gap removed, ours ran straight into it. */
.alp-nav__drop > a { gap: 13px; }
.alp-btn--connect { margin-right: 8px; }

/* ============================================================================
   DROPDOWN LINKS WERE WHITE ON WHITE - Tony caught it on hover
   ----------------------------------------------------------------------------
   `.alp-nav a:not(.alp-btn)` computes to (0,2,1) because :not() carries the
   specificity of its argument, and `.alp-nav__sub a` is only (0,1,1). So the
   white nav colour won inside the WHITE dropdown panel and the two sub-links
   were invisible until you happened to select the text.

   Theirs measures rgb(0,0,0), 18px/300, text-transform NONE on those links -
   title case, not the uppercase the top bar uses. Both are fixed here, at a
   specificity that beats the offender rather than by reordering, so appending
   more CSS later cannot silently swap them back.

   This is the THIRD time in this build that an older descendant selector
   outranked a newer class: `.alp-nav a` over `.alp-btn`, `.alp-menu nav a` over
   `.alp-menu__item`, and now this one. */
.alp-nav .alp-nav__sub a,
.alp-nav .alp-nav__sub a:not(.alp-btn) {
  color: #000;
  text-transform: none;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: normal;
}
.alp-nav .alp-nav__sub a:hover,
.alp-nav .alp-nav__sub a:not(.alp-btn):hover {
  color: #000;
  background: #f2f0ec;
  text-decoration: none;
}

/* The touch-target rule set `display: inline` under (hover: none), which
   headless Chrome and some desktop browsers report. That collapsed the dropdown
   links from full-width block items to inline text, so they measured 92px and
   131px wide against their 209. Only the PADDING belongs in a touch rule; the
   display mode does not. */
@media (hover: none) {
  .alp-nav a, .alp-foot__nav a { padding: 0; display: inline-block; }
  .alp-nav .alp-nav__sub a { display: block; padding: 12px 16px; }
}
@media (pointer: coarse) {
  .alp-nav .alp-nav__sub a { display: block; padding: 12px 16px; }
}
/* Their panel drops 16px below the nav row and its items are 209x50. */
.alp-nav__sub { padding: 16px 0 6px; min-width: 209px; }
.alp-nav .alp-nav__sub a { display: block; width: 100%; padding: 12px 16px; line-height: 26px; }

/* "Featured Properties" wrapped to two lines inside the 209px panel (177px of
   usable width against ~178px of text), making the first item 76px tall where
   theirs is 50. Their panel keeps each item on one line. */
.alp-nav .alp-nav__sub a { white-space: nowrap; }

/* ============================================================================
   NAV HOVER INDICATOR - Tony: "3 small dots appear under the navigation"
   ----------------------------------------------------------------------------
   Their nav links carry a ::before that measures, exactly:

     content ""      width 16px    height 4px    background rgb(255,255,255)
     position absolute   bottom -3px   horizontally centred
     transform translateX(-8px)        transition transform 0.3s

   Headless could not paint it (opacity stays 0 until a real pointer enters, and
   forcing :hover through CDP did not trigger it either), so the CSS values above
   are the source of truth rather than a screenshot. Three 4px dots with 2px gaps
   come to 4+2+4+2+4 = 16px wide and 4px tall: it fills their measured box to the
   pixel and looks like what Tony described on their site.
   ========================================================================== */
.alp-nav a:not(.alp-btn) { position: relative; }
.alp-nav a:not(.alp-btn)::before {
  content: '';
  position: absolute; left: 50%; bottom: -3px;
  width: 16px; height: 4px;
  transform: translateX(-8px) scaleX(.4);
  transform-origin: center;
  opacity: 0;
  transition: transform .3s, opacity .3s;
  background-image:
    radial-gradient(circle 2px at 2px 2px,  #fff 100%, transparent 100%),
    radial-gradient(circle 2px at 8px 2px,  #fff 100%, transparent 100%),
    radial-gradient(circle 2px at 14px 2px, #fff 100%, transparent 100%);
  background-repeat: no-repeat;
}
.alp-nav a:not(.alp-btn):hover::before,
.alp-nav a:not(.alp-btn):focus-visible::before,
.alp-nav__drop:hover > a::before {
  opacity: 1;
  transform: translateX(-8px) scaleX(1);
}
/* The dropdown panel links live inside .alp-nav too; they must not sprout dots. */
.alp-nav .alp-nav__sub a::before { content: none; }

/* ============================================================================
   NAV IS CENTRED ON THE VIEWPORT, NOT PINNED AFTER THE LOGO
   ----------------------------------------------------------------------------
   Tony: "nav is more centered on austinlakeside.com". Measuring the first nav
   item at four widths shows exactly why - ours was anchored to the logo, so it
   drifted further left the wider the screen got:

     width   theirs x   ours x   drift
     1280      332       380      +48
     1440      380       380        0     <- the only width I had checked
     1512      416       380      -36
     1920      620       380     -240

   Their nav block is 713px wide at every width and its centre sits at
   viewport/2 + 16.5px consistently (736.5 at 1440, 976.5 at 1920, 656.5 at
   1280). So it is centred on the VIEWPORT with a small offset, not laid out
   after the logo. Taking it out of the flex flow reproduces that at any width.

   THE LESSON: one viewport is not a measurement. 1440 was the single width
   where the wrong model happened to give the right answer.
   ========================================================================== */
.alp-head { justify-content: space-between; }
.alp-nav {
  position: absolute;
  left: 50%;
  top: 32px;
  transform: translateX(calc(-50% + 16.5px));
  margin-left: 0;
}
@media (max-width: 1100px) { .alp-nav { position: static; transform: none; } }

/* Taking the nav out of the flex flow also took away its vertical centring, so
   the links sat at y=32 (cy 45) against their y=64 (cy 77). The header's content
   box is 32..122, whose centre is 77, so the nav gets that box explicitly. */
.alp-nav { height: 90px; align-items: center; }
@media (max-width: 1100px) { .alp-nav { height: auto; } }

/* The caret gap read 13px but did nothing because the anchor computed to
   `display: block`, not a flex container - a later, equal-specificity rule in
   the (hover: none) block was setting display on `.alp-nav a`. Set it on the
   dropdown anchor at a specificity that wins, so the 13px gap can take effect
   and the item reaches their measured 135px. */
.alp-nav .alp-nav__drop > a {
  display: inline-flex; align-items: center; gap: 13px; white-space: nowrap;
}
@media (hover: none) { .alp-nav .alp-nav__drop > a { display: inline-flex; } }
@media (pointer: coarse) { .alp-nav .alp-nav__drop > a { display: inline-flex; } }

/* 13px overshot to 139 against their 135; 9px lands it exactly. */
.alp-nav .alp-nav__drop > a { gap: 9px; }

/* ============================================================================
   STICKY HEADER - a DELIBERATE improvement on theirs (Tony 2026-07-28)
   ----------------------------------------------------------------------------
   Theirs is position:fixed but jumps to top:-900px once you leave the hero, so
   it only reappears on a scroll UP. Tony asked for it visible scrolling up OR
   down, and only on non-mobile: "on not mobile please make the top bar ...
   sticky ... we want it sticky when scrolling up or down".

   So: fixed from 768px up (the same breakpoint their page frame uses),
   transparent while at the top of the page, and switching to their measured
   scrolled background rgb(0,0,0) once it leaves the top so the white labels
   stay legible over whatever scrolls beneath.
   ========================================================================== */
@media (min-width: 768px) {
  .alp-head { position: fixed; top: 0; left: 0; right: 0; }
  .alp-head.is-stuck {
    background: var(--alp-black);
    box-shadow: 0 1px 0 rgba(255,255,255,.08);
  }
  /* The frame's 12px white gutter must not show through behind a black bar. */
  .alp-head.is-stuck { padding-top: 24px; padding-bottom: 14px; }
  .alp-head.is-stuck .alp-nav { top: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
  .alp-head { transition: background .25s ease, padding .25s ease; }
  .alp-head .alp-nav { transition: top .25s ease; }
}

/* ============================================================================
   CONTENT WIDTHS - Tony: "the width of many items ... are more narrow"
   ----------------------------------------------------------------------------
   He was right, and it was one stale value doing most of the damage: the v1
   `.alp-band__head` cap of 900px, which I never revisited while matching
   everything else. Measured heading widths, theirs vs ours before this block:

     band                     theirs   ours
     1  Live the Lake Travis    1000     900
     4  Discover Communities    1028     880
     5  Trusted by Homeowners   1292     900
     9  Stay Connected          1221    1292 (p was 720 against their 1221)
    10  Real Estate Insights    1292    1292  (p was 860 against their 1292)
    11  Experience the ALP       546     454
     3  Austin Lakeside Prop     546     600

   The left-aligned bands also carried an 860px cap on their intro paragraph,
   which theirs does not have.
   ========================================================================== */
.alp-band__head { max-width: 1000px; }
.alp-band__head--left p { max-width: none; }

/* Testimonials and the blog band run the full 1292 inner width on theirs. */
.alp-testi .alp-band__head { max-width: 1292px; }

/* Newsletter: heading and body both 1221 on theirs; ours had a 720 cap on the
   paragraph, which made the band look half-width next to the heading. */
.alp-news h2 { max-width: 1221px; margin-left: auto; margin-right: auto; }
.alp-news p  { max-width: 1221px; }

/* The closing panel's TEXT is 546 wide on theirs; ours was 454 because the
   46px side padding was eating into a 546px panel. Widen the panel so the
   measure inside it lands on 546. */
.alp-close__panel { width: 638px; }

/* Band 3's copy column is 546 on theirs, not the 600 the shared bio band uses. */
.alp-band--black.alp-band--bio .alp-bio--flip .alp-bio__body { max-width: 546px; }

@media (max-width: 1100px) {
  .alp-close__panel { width: 100%; max-width: 638px; }
  .alp-band--black.alp-band--bio .alp-bio--flip .alp-bio__body { max-width: none; }
}

/* Their left-aligned band heads are three different widths, not one:
   communities 1028, featured/past properties 890, blog 1292. */
.alp-band__head--left { max-width: none; }
.alp-w1028 { max-width: 1028px; }
.alp-w890  { max-width: 890px; }
.alp-w1292 { max-width: 1292px; }

/* Their hero h1 is 936 wide and the tagline 1048; ours ran both to 1132. */
.alp-hero--home h1 { max-width: 936px; margin-left: auto; margin-right: auto; }
.alp-hero__lede { max-width: 1048px; }

/* ---- testimonials: TWO across ---------------------------------------------
   Measured on their /testimonials: cards 369px wide at x=335 and x=736, so a
   32px gap and a 770px block centred in the 1440 viewport. Their homepage
   slider shows one at a time; Tony asked for two, so two it is, everywhere. */
.alp-testi__grid--pair { grid-template-columns: repeat(2, 369px); gap: 32px; justify-content: center; max-width: none; }
.alp-band__head--eyebrowonly { margin-bottom: 28px; }
@media (max-width: 900px) {
  .alp-testi__grid--pair { grid-template-columns: 1fr; }
}

/* ---- floating "Let's Connect", bottom-left --------------------------------
   Measured on theirs: fixed, left 19px, 156x48, 19px/300, hidden at
   bottom:-50px until the page scrolls, then slid up. */
.alp-float-cta {
  position: fixed; left: 19px; bottom: -50px; z-index: 70;
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 156px; height: 48px; padding: 0 20px;
  background: var(--alp-black); color: var(--alp-white);
  border: 1px solid rgba(255,255,255,.5); border-radius: 500px;
  font-family: var(--alp-body); font-size: 15px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  transition: bottom .3s ease, background .2s ease;
}
.alp-float-cta.is-in { bottom: 22px; }
.alp-float-cta:hover { background: var(--alp-gold); border-color: var(--alp-gold); color: #000; text-decoration: none; }
@media (max-width: 780px) {
  .alp-float-cta { left: 14px; font-size: 13px; min-width: 0; height: 44px; padding: 0 16px; }
  .alp-float-cta.is-in { bottom: 16px; }
}

/* The "Success Stories" eyebrow is centred on their page (x=660 in a 1440
   viewport); ours was inheriting the left alignment of the band head. */
.alp-band__head--eyebrowonly { text-align: center; }
.alp-band__head--eyebrowonly .alp-eyebrow { justify-content: center; }

/* The quote cards sat 40px inside their column and measured 289 against a
   369px track. Cause: the browser's default `blockquote { margin: 1em 40px }`,
   which the reset never cleared. 369 - 40 - 40 = 289, and the first card
   started at 375 instead of 335. Exactly the 40px on each side. */
.alp-quote { margin: 0; }

/* Their floating button is 19px/300 and NOT uppercase, which is what makes it
   156px wide; ours was 15px uppercase with letter-spacing and came out 195.
   Their resting position is 28px off the bottom edge. */
.alp-float-cta {
  font-size: 19px; font-weight: 300; letter-spacing: normal; text-transform: none;
  min-width: 156px; justify-content: center;
}
.alp-float-cta.is-in { bottom: 28px; }
@media (max-width: 780px) { .alp-float-cta { font-size: 16px; } }
/* Text only, no caret: that is what makes theirs 156px rather than 189. */
.alp-float-cta { gap: 0; padding: 0 16px; }
/* 161 against their 156; 13px side padding lands it. */
.alp-float-cta { padding: 0 13px; }

/* ============================================================================
   "GET IN TOUCH" MODAL - measured off theirs at 1440
   ----------------------------------------------------------------------------
     overlay   fixed, rgba(0,0,0,0.92)
     heading   64px / 65.92px Aboreto, gold, uppercase, x=112 y=136, 464 wide
     form col  x=768, 512 wide
     label     14px / 20.02px, white
     input     512x56, radius 28px, padding 16px 26px, white ground, black text
     textarea  512x138
     send      243x58, radius 500px, 12px/600 uppercase
   ========================================================================== */
.alp-modal { position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,.92); overflow-y: auto; }
.alp-modal[hidden] { display: none; }
.alp-modal__inner {
  position: relative; min-height: 100%;
  display: grid; grid-template-columns: 464px 512px;
  justify-content: center; column-gap: 192px; align-content: start;
  padding: 136px 0 90px;
}
.alp-modal__close {
  position: absolute; top: 34px; right: 34px;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.alp-modal__close:hover { background: #fff; color: #000; }

.alp-modal__aside h2 {
  font-family: var(--alp-display); font-size: 64px; line-height: 65.92px;
  text-transform: uppercase; color: var(--alp-gold); margin: 0 0 40px; max-width: 464px;
}
.alp-modal__biz { font-family: var(--alp-body); font-size: 14px; letter-spacing: .1em;
                  text-transform: uppercase; color: #fff; margin: 0 0 10px; }
.alp-modal__contact { font-size: 14px; line-height: 22px; margin: 0 0 34px; }
.alp-modal__contact a { color: rgba(255,255,255,.85); text-decoration: underline; text-underline-offset: 3px; }
.alp-modal__contact a:hover { color: var(--alp-gold); }
.alp-modal__social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.alp-modal__social a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45); color: rgba(255,255,255,.85);
}
.alp-modal__social a:hover { background: var(--alp-gold); border-color: var(--alp-gold); color: #000; }

.alp-modal__form label {
  display: block; font-family: var(--alp-body); font-size: 14px; line-height: 20.02px;
  font-weight: 400; letter-spacing: normal; text-transform: none;
  color: #fff; margin: 0 0 6px;
}
.alp-modal__form label + label { margin-top: 0; }
.alp-modal__form input:not([type="checkbox"]),
.alp-modal__form textarea {
  width: 100%; background: #fff; color: #000; border: 0; border-radius: 28px;
  padding: 16px 26px; font-family: var(--alp-body); font-size: 16px; line-height: 22.08px;
  margin: 0 0 22px;
}
.alp-modal__form textarea { min-height: 138px; resize: vertical; }
.alp-modal__form input::placeholder, .alp-modal__form textarea::placeholder { color: #8a8a8a; }
.alp-modal__legal { font-size: 11px; line-height: 17px; color: rgba(255,255,255,.55); margin: 4px 0 18px; }
.alp-modal__legal a { color: rgba(255,255,255,.8); text-decoration: underline; }
.alp-modal__consent {
  display: flex !important; gap: 10px; align-items: flex-start; margin-bottom: 12px;
  font-size: 11px; line-height: 17px; color: rgba(255,255,255,.7);
}
.alp-modal__consent input { width: 14px; height: 14px; margin-top: 2px; flex: 0 0 auto; }
.alp-modal__send { margin-top: 14px; padding: 20px 32px; border-radius: 500px; cursor: pointer; }

@media (max-width: 1240px) {
  .alp-modal__inner { grid-template-columns: minmax(0, 512px); justify-content: center;
                      row-gap: 44px; padding: 100px 24px 70px; }
  .alp-modal__aside h2 { font-size: 44px; line-height: 48px; margin-bottom: 26px; }
}
@media (max-width: 780px) {
  .alp-modal__inner { padding: 86px 20px 56px; }
  .alp-modal__aside h2 { font-size: 34px; line-height: 40px; }
  .alp-modal__close { top: 18px; right: 16px; }
}

/* Four measured offsets in the modal:
   - their block sits at x=112, not the 136 a centred 1168px grid produces, so
     it is centred against an extra 48px of right padding
   - their inputs are 56px tall, ours 54 from line-height alone
   - their form column starts 48px lower than the heading column
   - their send button is 243px wide */
.alp-modal__inner { padding-right: 48px; }
.alp-modal__form { padding-top: 48px; }
.alp-modal__form input:not([type="checkbox"]) { min-height: 56px; }
.alp-modal__send { min-width: 243px; justify-content: center; text-align: center; }
@media (max-width: 1240px) {
  .alp-modal__inner { padding-right: 24px; }
  .alp-modal__form { padding-top: 0; }
}

/* The default head cap goes to the full container width. Capping it at 1000
   made /sale/, /sold/ and /selling-your-home/ NARROWER than theirs, which is
   the complaint Tony raised. The homepage bands that genuinely are narrower on
   their site keep their measured value via an explicit class. */
.alp-band__head { max-width: 1292px; }

/* The width utilities are single classes, same specificity as
   `.alp-band__head`, so raising the default to 1292 AFTER them silently undid
   all four measured caps. Fourth specificity collision in this build; qualify
   the utilities so ordering cannot decide the winner again. */
.alp-band__head.alp-w1000 { max-width: 1000px; }
.alp-band__head.alp-w1028 { max-width: 1028px; }
.alp-band__head.alp-w890  { max-width: 890px; }
.alp-band__head.alp-w1292 { max-width: 1292px; }

/* Their /selling-your-home/ light band heading runs the full 1292; ours was
   capped at 900. Their /contact/ form column is 860 wide; ours was 806 because
   a 900px wrapper minus 46px of padding each side. */
.alp-lightband h2 { max-width: 1292px; }
.alp-formband__inner { max-width: 952px; }

/* Their three door cards sit 14px apart, measured; ours were 24 and read as a
   looser, narrower row. */
.alp-trio { gap: 14px; }

/* THE H1 CAP WAS A NUMBER THAT BROKE THE PICTURE.
   Their h1 measures 936px wide and sits on ONE line. I copied the 936 onto ours
   and it WRAPPED to two, because our Aboreto renders the same string wider.
   Matching their number produced the opposite of their layout. Match the
   OUTCOME - one line - and let the width fall where it lands. */
.alp-hero--home h1 { max-width: none; white-space: nowrap; }
@media (max-width: 1100px) { .alp-hero--home h1 { white-space: normal; } }

/* ============================================================================
   /buyers/ and /sellers/ - the two pages still on the older split-band system
   ----------------------------------------------------------------------------
   Measured against theirs at 1440:

     band            theirs   ours (before)   cause
     intro heading      860        1368        no cap on .alp-intro h2
     split heading      608         596        .alp-split carried a 12px outer
                                               gutter theirs does not, so each
                                               708px column lost 12px and the
                                               text column lost it twice

   1416 / 2 = 708 per column, minus the 50px inner padding on each side = 608,
   which is exactly their number. The gutter was the whole error.
   ========================================================================== */
.alp-split { padding: 0; }
.alp-intro h2 { max-width: 860px; margin-left: auto; margin-right: auto; }
.alp-intro p  { max-width: 860px; }
.alp-statement h2, .alp-statement p { max-width: 860px; margin-left: auto; margin-right: auto; }

/* Their page heroes wrap the h1 inside a narrow centred column: /buyers/ 389
   wide, /sellers/ 540 wide and 249 tall over five lines, in a 642px band. Ours
   ran the title flat to 1368. The homepage hero is deliberately excluded - that
   one is a single line by design. */
.alp-hero:not(.alp-hero--home) .alp-hero__inner h1 {
  max-width: 640px; margin-left: auto; margin-right: auto;
}
@media (max-width: 780px) {
  .alp-hero:not(.alp-hero--home) .alp-hero__inner h1 { max-width: 100%; }
}

/* Their /sellers/ h1 wraps to 540, not the full column. 560 lets the long
   title wrap the same way while leaving /buyers/ at its natural 389. */
.alp-hero:not(.alp-hero--home) .alp-hero__inner h1 { max-width: 560px; }
@media (max-width: 780px) { .alp-hero:not(.alp-hero--home) .alp-hero__inner h1 { max-width: 100%; } }

/* Their about page carries the same 890-wide properties head the homepage uses. */
.alp-band__head--left.alp-w890 { max-width: 890px; }

/* 640 is the right cap, not 560. Their hero column is ~640 wide and each title
   wraps naturally inside it: /buyers/ 389, /about/ 614, /sellers/ 540. At 640
   ours reproduces buyers and about EXACTLY and sellers wraps at 640 instead of
   540 purely because our Aboreto sets that string wider - the same font-metric
   difference as the homepage h1. Matching the column, not the resulting number,
   is what reproduces their layout. */
.alp-hero:not(.alp-hero--home) .alp-hero__inner h1 { max-width: 640px; }
@media (max-width: 780px) { .alp-hero:not(.alp-hero--home) .alp-hero__inner h1 { max-width: 100%; } }

/* ============================================================================
   THE REAL "SQUISHED" BUG - CONTAINERS WERE FIXED, THEIRS ARE FLUID
   ----------------------------------------------------------------------------
   Tony hard-refreshed and still saw it narrow, and he was right: this was never
   a cache problem. I had only ever measured at 1440, where the two sites are
   identical. Measuring the trio cards across the range shows what he sees:

     viewport   theirs card w   ours card w
       1440          421            421      <- the only width I tested
       1920          581            431
       2560          676            431

   Their band containers are FLUID up to a ~2056px content max, then centre.
   Ours were capped at 1316/1320, so on any monitor wider than about 1450 our
   content sat in a narrow column while theirs filled the screen. That is
   exactly "more narrow than the element layout" and "still looks squished".

   Their content max is 2056 (measured at 2560: cards run 252..2308 inside a
   2536 section). Below that they are fluid with the same 62px gutter.

   The BAND HEADINGS stay capped - theirs measure 1000 at 1440, 1920 AND 2560,
   so those are genuinely fixed and are left alone. Only the CONTAINERS change.

   THE LESSON, again: one viewport is not a measurement. 1440 was the single
   width where the wrong model gave the right answer.
   ========================================================================== */
.alp-band__inner,
.alp-foot__inner,
.alp-trio,
.alp-bio,
.alp-comm,
.alp-testi__grid,
.alp-props,
.alp-blog,
.alp-listings,
.alp-commgrid,
.alp-blogrow,
.alp-comm-wrap,
.alp-twoup,
.alp-specrow,
.alp-propcols {
  max-width: 2056px;
  margin-left: auto;
  margin-right: auto;
}
/* The paired testimonial grid is a fixed two-up by design (369px cards), so it
   keeps centring rather than stretching. */
.alp-testi__grid--pair { max-width: none; }

/* ---- communities name list: a seven-row scrolling window -----------------
   Theirs shows seven names at a time and slides so the community matching the
   leading card is at the top. Fixed order, moving window - not a re-sort. */
.alp-comm-list__window { overflow: hidden; height: 371px; margin-bottom: 30px; }
.alp-comm-list { transition: transform .35s ease; margin: 0; }
.alp-comm-list a { justify-content: space-between; }
.alp-comm-list svg { opacity: 0; transition: opacity .2s; }
.alp-comm-list li.is-active a { color: var(--alp-gold); }
.alp-comm-list li.is-active svg { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .alp-comm-list { transition: none; } }
@media (max-width: 1100px) {
  .alp-comm-list__window { height: auto; overflow: visible; }
  .alp-comm-list { transform: none !important; }
}

/* Their list rows sit on a ~31.7px pitch and seven are visible (measured y
   positions 172/204/236/267/299/331/362). Ours were ~53px, so only six fitted.
   Touch devices keep a 44px target - the window is a pointer affordance and the
   list is stacked in full below 1100px anyway. */
.alp-comm-list a { padding: 8px 0; }
.alp-comm-list__window { height: 224px; }
@media (pointer: coarse) { .alp-comm-list a { padding: 12px 0; } }
@media (max-width: 1100px) { .alp-comm-list a { padding: 12px 0; } }

/* Pitch came out 43 against their 32: the links were inheriting the body's
   26.22px line-height. 15px line + 8px padding top and bottom + the 1px rule
   = 32, which is their measured pitch, and seven rows then fill the 224 window. */
.alp-comm-list a { line-height: 15px; }

/* ---- hero overlay: theirs is a FLAT 40%, ours was 46% plus a gradient ------
   Measured: theirs paints one div.overlay-component at rgba(0,0,0,0.4) and
   nothing else. Ours had rgba(0,0,0,0.46) AND a
   linear-gradient(rgba(0,0,0,0.55) -> transparent, 260px) for nav legibility,
   which is what made the top of our hero visibly darker than theirs. The nav
   sits on its own scrim when stuck, so the gradient is not needed. */
.alp-hero--video::after,
.alp-hero--home::after { background: rgba(0, 0, 0, .4); }

/* ---- homepage testimonials: a two-up SLIDER, not three static blocks -------
   Theirs slides; Tony asked for two visible at a time. Real horizontal scroll
   with snap, so a trackpad, a swipe, the arrow keys and a screen reader all
   work; the arrow buttons only nudge it. */
.alp-testi__slider { position: relative; }
.alp-testi__grid--pair {
  display: flex; gap: 32px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; justify-content: flex-start;
  max-width: 770px; margin: 0 auto; padding-bottom: 4px;
}
.alp-testi__grid--pair::-webkit-scrollbar { display: none; }
.alp-testi__grid--pair > blockquote { flex: 0 0 369px; scroll-snap-align: start; }
.alp-rail-nav--testi { justify-content: center; margin-top: 34px; }
@media (max-width: 900px) {
  .alp-testi__grid--pair { max-width: none; gap: 14px; margin: 0 -20px; padding: 0 20px 8px; }
  .alp-testi__grid--pair > blockquote { flex: 0 0 82%; }
  .alp-rail-nav--testi { display: none; }
}

/* Their tagline is ONE line at 1048px. I capped ours at their 1048 and it
   wrapped to two, because our Montserrat sets that string wider - the same
   trap as the h1. Match the OUTCOME (one line), not their number. */
.alp-hero__lede { max-width: none; white-space: nowrap; }
@media (max-width: 1240px) { .alp-hero__lede { white-space: normal; max-width: 1048px; } }

/* ============================================================================
   TRIO CARD HOVER - Tony: "a white overlay appear and the text moves up over
   the image and has a line appear below it"
   ----------------------------------------------------------------------------
   Their card is `a.gallery-style-menu-g` with:
     a::before   full-cover layer, opacity .6, `transition: background-color .3s`
     h3          at y=445 in a 506 card (so 20px off the bottom), height 41,
                 `border-bottom: 1px solid rgba(0,0,0,0)`, `transition: .3s`
   On hover the ::before takes a light background, the heading slides up and its
   border-bottom fades in. Headless would not trigger their JS-driven state, so
   the structure and transitions above are the source of truth.
   ========================================================================== */
.alp-trio a { position: relative; overflow: hidden; }
.alp-trio a::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background-color: rgba(255, 255, 255, 0); opacity: .6;
  transition: background-color .3s ease;
  pointer-events: none;
}
.alp-trio a:hover::before,
.alp-trio a:focus-visible::before { background-color: rgba(255, 255, 255, 1); }

.alp-trio span { transition: background-color .3s ease; }
.alp-trio a:hover span { background: rgba(0, 0, 0, .06); }

.alp-trio span i {
  font-style: normal; display: inline-block;
  border-bottom: 1px solid transparent;
  padding-bottom: 6px;
  transform: translateY(0);
  transition: transform .3s ease, border-color .3s ease, color .3s ease;
}
.alp-trio a:hover span i,
.alp-trio a:focus-visible span i {
  transform: translateY(-34px);
  border-bottom-color: currentColor;
}
@media (prefers-reduced-motion: reduce) {
  .alp-trio a::before, .alp-trio span, .alp-trio span i { transition: none; }
  .alp-trio a:hover span i { transform: none; }
}

/* ============================================================================
   BLOG BAND - matched element by element to theirs at 1440
   ----------------------------------------------------------------------------
     lead   image 720x598, title below, 32px/35.84px w300 uppercase
     rows   556x149, 32px apart, thumb 227 wide, title 329 wide 20px/26px w300
     gap    lead 720 + 16 + side column 556 = 1292
     foot   "View Blog Posts" 241x58 left, two 56x56 arrows right
   Two slides of four, a real scroll-snap rail so a swipe and the keyboard work.
   ========================================================================== */
.alp-blogslides {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
}
.alp-blogslides::-webkit-scrollbar { display: none; }
.alp-blogslide {
  flex: 0 0 100%; scroll-snap-align: start;
  /* The right column is a FIXED 556px (211 thumb + 16 gap + 329 title) and the
     lead image absorbs every extra pixel. Theirs runs 560/720/880/1200 wide as
     the viewport goes 1280/1440/1600/1920 while the row column never moves.
     "720fr 556fr" grew both columns in proportion, which agrees with theirs at
     exactly one width - 1440 - and is wrong at every other. */
  display: grid; grid-template-columns: 1fr 556px; gap: 16px; align-items: start;
}
.alp-blogband .alp-post--lead { background: none; }
.alp-blogband .alp-post--lead .alp-post__media { aspect-ratio: 720 / 598; }
.alp-blogband .alp-post--lead .alp-post__body { padding: 22px 0 0; }
.alp-blogband .alp-post--lead h3 {
  font-family: var(--alp-display); font-size: 32px; line-height: 35.84px;
  font-weight: 300; text-transform: uppercase; margin: 0;
}
.alp-blogband .alp-postlist { display: flex; flex-direction: column; gap: 32px; }
.alp-blogband .alp-postrow {
  /* Their row thumb measures 211x149 at x=810 and the title starts at x=1037.
     Ours was a 227px thumb butted straight against the text, which landed the
     title on the same x by ACCIDENT while the image itself was 16px too wide.
     Match the rule that produced their number, not the number: 211 + 16 gap. */
  grid-template-columns: 211px 1fr; column-gap: 16px; align-items: stretch;
  height: 149px; padding: 0; border-bottom: 0;
}
.alp-blogband .alp-postrow__media { aspect-ratio: auto; height: 149px; }
.alp-blogband .alp-postrow h3 {
  font-family: var(--alp-display); font-size: 20px; line-height: 26px;
  font-weight: 300; text-transform: uppercase; margin: 0;
  /* No padding-left. The 24px here used to fake the thumb-to-text gap before
     the row carried a real 16px grid column-gap, and it survived as a silent
     defect: the h3 BOX still measured 329 and matched theirs exactly, while
     the text column inside it was only 305. "ROTATION, READ FROM INSIDE"
     sets at 307px, so it fitted their line and wrapped early on ours. */
  padding: 16px 0; align-self: start;
}
.alp-blogfoot { display: flex; align-items: center; justify-content: space-between; margin-top: 46px; }
.alp-blogband .alp-btn { min-width: 241px; text-align: center; }
@media (max-width: 1100px) {
  .alp-blogslide { grid-template-columns: 1fr; gap: 26px; }
  .alp-blogband .alp-post--lead .alp-post__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 780px) {
  .alp-blogband .alp-postrow { grid-template-columns: 120px 1fr; height: auto; }
  .alp-blogband .alp-postrow__media { height: 100%; min-height: 90px; }
  .alp-blogband .alp-postrow h3 { font-size: 16px; line-height: 21px; padding: 10px 0 10px 14px; }
  .alp-blogband .alp-post--lead h3 { font-size: 24px; line-height: 30px; }
  .alp-blogfoot { flex-direction: column; gap: 20px; align-items: stretch; }
  .alp-blogfoot .alp-rail-nav { display: none; }
}

/* Three residual deltas in the blog band, all traced:
   1. The lead image came out 720x509 against their 720x598 - an earlier
      `.alp-blogrow .alp-post--lead .alp-post__media { aspect-ratio: 16/11 }`
      was winning on source order. Qualified so the measured ratio holds.
   2. Their first row starts at y=288, ours at 266: their head block carries 22px
      more space below the intro paragraph.
   3. Their row heading sits 16px inside the row (y=304 in a row at 288); ours
      was flush to the top. */
.alp-blogband .alp-post--lead .alp-post__media { aspect-ratio: 720 / 598; }
.alp-blogband .alp-band__head { margin-bottom: 62px; }
.alp-blogband .alp-postrow h3 { padding-top: 16px; align-self: flex-start; }

/* The lead image measured 720x402 against their 720x598 with the correct
   `aspect-ratio: 720/598` computed and doing nothing, because the media element
   is a <span> that computed to `display: inline` - and an inline box ignores
   aspect-ratio and height entirely. 402 was simply the image's natural
   1376x768 ratio at 720 wide. */
.alp-blogband .alp-post__media,
.alp-blogband .alp-postrow__media { display: block; }
.alp-blogband .alp-post--lead .alp-post__media { aspect-ratio: 720 / 598; }
.alp-blogband .alp-post--lead .alp-post__media img { width: 100%; height: 100%; object-fit: cover; }

/* Measuring the ANCHOR gave 598 and I took that for the image height. It is not.
   Measuring the IMG element directly: their lead image is 720x510, absolutely
   positioned inside a 598-tall relative anchor, with the heading in normal flow
   starting 528px down (510 image + an 18px gap) and overflowing the anchor.
   So the ratio is 720/510, not 720/598.
   The lesson is the same one this whole build keeps teaching: measure the
   ELEMENT you mean, not the box that happens to contain it. */
.alp-blogband .alp-post--lead .alp-post__media { aspect-ratio: 720 / 510; }
.alp-blogband .alp-post--lead .alp-post__body { padding-top: 18px; }

/* The heading sat flush against the image because `.alp-post__body` is a <span>
   computing to `display: inline`, and padding on an inline box does not move
   anything in the block direction. Exactly the same trap as the media element
   two rules up - worth stating twice because it cost two rounds. */
.alp-blogband .alp-post__body { display: block; padding-top: 18px; }

/* Their row heading BOX starts 16px into the row (y=304 in a row at 288), so
   the offset is a MARGIN, not padding - padding would leave the box at 288 and
   only move the glyphs. */
.alp-blogband .alp-postrow h3 { margin-top: 16px; padding-top: 0; }
/* The foot row landed 4px low, carried down from a 1px taller lead heading. */
.alp-blogfoot { margin-top: 42px; }
/* Their arrows sit 1px below the button baseline of the foot row. */
.alp-blogfoot .alp-rail-nav { margin-top: 1px; }

/* ---- blog row dividers ----------------------------------------------------
   Tony's screenshots showed theirs has a hairline under each row and ours had
   plain gaps. No border on any row element, so I found it by sampling pixels
   down the right column: two isolated 1px full-width lines at y=454 and y=635,
   colour rgb(226,226,226), spanning x 798..1353 in section coordinates - exactly
   the row width - and sitting 17px BELOW each row box (rows end at 437 and 618).
   There is no line under the last row.
   Drawn as an ::after so the row box stays 149px and the line lives in the
   32px gap, matching their geometry rather than inflating the row. */
.alp-blogband .alp-postrow { position: relative; }
.alp-blogband .alp-postrow:not(:last-child)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -18px;
  height: 1px; background: rgb(226, 226, 226);
}

/* ---- blog row title: a FIXED clipping box, not natural height -------------
   Their three rows carry titles of 48, 91 and 56 characters and EVERY ONE
   measures exactly 133px tall. That is a fixed box with overflow:hidden, so
   their 91-char headline is genuinely clipped mid-phrase after ~5 lines.
   Ours ran 94 / 146 / 94, which is why the rows sat at different heights and
   the band did not line up with theirs.
   NOTE their h3 also declares -webkit-line-clamp:3, which is INERT: line-clamp
   requires display:-webkit-box and theirs computes flow-root. Copying it would
   change nothing. The height + overflow is what actually truncates. */
.alp-blogband .alp-postrow h3 { height: 133px; overflow: hidden; }

/* ---- lead image height is FIXED, width is fluid ---------------------------
   Tony: "big image in cohesive alignment with top and bottom of smaller
   images". Their lead image measures 720x510 at 1440, 880x510 at 1600 and
   1200x510 at 1920 - the HEIGHT never moves, only the width. It is not an
   aspect ratio at all: the height is the stack of the three rows beside it,
   3 x 149 + 2 x 32 = 511, so the big image tops out with row 1 and bottoms
   out with row 3 at every width.
   We had copied the RESULTING NUMBER (720/510) as a ratio, which is correct
   at 1440 and nowhere else: our lead ran 63px long at 1600, 191px at 1920 and
   304px at 2560. Reproduce the rule, not the number.
   Scoped above the stacking breakpoint so the mobile 16/10 ratio still wins. */
@media (min-width: 1101px) {
  .alp-blogband .alp-post--lead .alp-post__media {
    aspect-ratio: auto; height: 510px;
  }
}

/* ---- their >1980 wide model, measured not guessed -------------------------
   Above exactly 1981px theirs abandons the fixed 149px row for a proportional
   layout. Binary-searched the breakpoint (1980 narrow / 1981 wide) and read
   every value at 2000, 2200 and 2560:
       lead      50vw x 30vw
       thumb     square, 26vw/3   (8.65 / 8.68 / 8.67 vw measured)
       row gap   2vw              (40 / 44 / 51 px measured)
       thumb->title  1vw          (20 / 22 / 26 px measured)
       h3        thumb - 16 tall, 16px down from the row top, still 20/26
   The identity that keeps the big image aligned is
       3 x (26vw/3) + 2 x 2vw = 30vw
   which is the lead height exactly, so top and bottom stay flush with rows 1
   and 3 whatever the container width works out to. */
@media (min-width: 1981px) {
  .alp-blogslide { grid-template-columns: 50vw 1fr; }
  .alp-blogband .alp-post--lead .alp-post__media { height: 30vw; }
  .alp-blogband .alp-postlist { gap: 2vw; }
  .alp-blogband .alp-postrow {
    grid-template-columns: calc(26vw / 3) 1fr;
    column-gap: 1vw;
    height: calc(26vw / 3);
  }
  /* An explicit height beats aspect-ratio, and .alp-postrow__media carries an
     unconditional height:149px further up, so the square has to be set as a
     HEIGHT here. With aspect-ratio the thumb stayed 149 inside a 222px row. */
  .alp-blogband .alp-postrow__media { aspect-ratio: auto; height: calc(26vw / 3); }
  .alp-blogband .alp-postrow h3 { height: calc(26vw / 3 - 16px); }
  .alp-blogband .alp-postrow:not(:last-child)::after { bottom: -1vw; }
}

/* ---- the lead column is a FIXED 598px so the footer never moves -----------
   Their lead anchor computes height:598px at 1440, 1600 and 1920 while its
   title is 3 lines at 1440 and 2 lines at 1600+. At 1440 the content overflows
   (scrollHeight 635 vs height 598) and they let it show. 598 = 510 image + 18
   gap + 70, which is exactly two lines of 35.84 reserved.
   The consequence is the whole point: their "View Blog Posts" row and the rail
   arrows sit at a CONSTANT y=967 whatever the headline does. Ours tracked the
   title, so at 1920 the footer sat 36px high. */
@media (min-width: 1101px) and (max-width: 1980px) {
  .alp-blogband .alp-post--lead { height: 598px; }
}
/* With the lead column pinned at 598 the footer is stable at every width, but
   it sat 38px high: the lead column runs 288..886 and their button row starts
   at 967, so the gap is 81 where ours was 43.
   Applied at ALL desktop widths, not just the narrow range. Above 1981 theirs
   has no fixed lead column - the title flows and the gap from the title to the
   buttons is 81 there too - so scoping this to <=1980 left the wide layout
   exactly 38px short at 1981, 2000, 2200 and 2560 alike.
   NOTE the invariant is the BUTTON ROW's position, not the title-to-button
   gap. That gap legitimately reads 44 at 1440 and 79 at 1600+, because the
   lead column is fixed at 598 and a 3-line headline overflows it. */
@media (min-width: 1101px) {
  .alp-blogfoot { margin-top: 81px; }
}

/* ---- their >1980 type scale ----------------------------------------------
   Above the same 1981px breakpoint theirs scales the display type with the
   viewport. Grouped every rendered heading on their homepage by computed
   size at 1920 / 2000 / 2560:
       h1   64 -> 89.0625 -> 114      = 4.453125vw, line-height 1.03
       h2   52 -> 62.5    -> 80       = 3.125vw,    line-height 1.15
       h3   35 -> 46.86   -> 59.98    = 2.34375vw,  line-height 1.14
   Each is the SAME vw constant at two independent widths, so it is a derived
   rule and not a curve fitted through one point.
   CRITICAL: their h3 has THREE distinct sizes and only the 35px one scales.
   The blog band's 32px lead titles and 20px row titles stay fixed at every
   width - they are set explicitly in the band CSS and must stay that way, or
   the band that now matches at nine viewports would break above 1980.
   The hero h1 carries its own 64px at line 610, so it needs the same
   treatment or it would sit flat while every other heading grew. */
@media (min-width: 1981px) {
  :root {
    --alp-h2: 3.125vw;     --alp-h2-lh: 1.15;
    --alp-h3: 2.34375vw;   --alp-h3-lh: 1.14;
  }
  .alp-hero--home h1 { font-size: 4.453125vw; line-height: 1.03; }
}
/* --alp-h1 is deliberately NOT scaled here. 4.453vw is the HOMEPAGE HERO's
   rule, measured on their homepage, and setting it globally leaked onto inner
   pages: /home-search/listings has a plain h1 that reads var(--alp-h1), so at
   2560 it rendered 114px against their 40px. That was a regression I caused by
   verifying a GLOBAL change on a SINGLE page.
   The home hero keeps the rule via its own selector above. */

/* Above the breakpoint the blog band's head must widen or the now-80px h2
   wraps. Theirs runs to their 2056 content max (head width 1772 at 1920,
   2056 at 2560, max-width:none) and sets "Lake Travis Real Estate Insights"
   on ONE line at 1395px. Ours was capped at 1292, so the same string broke
   into 986 + 388 and the head grew 92px, pushing the whole band down.
   Left at 1292 below the breakpoint, where it already matches theirs exactly
   (both set the 52px h2 on one 907px line). */
@media (min-width: 1981px) {
  .alp-blogband .alp-band__head.alp-w1292 { max-width: 2056px; }
}

/* Two remaining head differences above the breakpoint, both measured on their
   live page at 2000 and 2560:
     - their eyebrow line-height drops from 15.96px to 13.08px (the font stays
       12px in both models), worth 3px
     - the head-to-rail gap becomes proportional: theirs runs 31px at 2000 and
       40px at 2560 where ours was a flat 62px
   Solving for their leadTop at 1981 / 2000 / 2200 / 2560 gives 45 / 45 / 48 /
   54, which is ~2.2vw, landing within 2.3px at all four.
   NOT applied below 1981. Down there our eyebrow-to-h2 (14 vs 10), h2-to-intro
   (14 vs 32) and intro-to-rail (62 vs 48) already differ from theirs and
   CANCEL EXACTLY to the same leadTop of 288. Touching any one of them
   individually would break the widths that currently match. */
@media (min-width: 1981px) {
  .alp-blogband .alp-eyebrow { line-height: 13.08px; }
  .alp-blogband .alp-band__head { margin-bottom: 2.2vw; }
}

/* ---- mobile blog band, measured at 390 -----------------------------------
   Theirs:  lead 358x240 at x=16 (ratio 1.492)   thumb 120x98 (ratio 1.224)
   Ours:    lead 350x248 at x=20 (ratio 1.411)   thumb 120x149
   Two causes: our section carries 20px side padding where theirs has 16, and
   the unconditional height:149px on the row media survived into the stacked
   layout, so the thumb stayed desktop-tall and squared off the row. */
@media (max-width: 780px) {
  .alp-blogband { padding-left: 16px; padding-right: 16px; }
  .alp-blogband .alp-band__inner { padding-left: 0; padding-right: 0; }
  .alp-blogband .alp-post--lead .alp-post__media { aspect-ratio: 358 / 240; height: auto; }
  .alp-blogband .alp-postrow__media { aspect-ratio: 120 / 98; height: 98px; min-height: 0; }
  .alp-blogband .alp-postrow { height: auto; }
  .alp-blogband .alp-postrow h3 { height: auto; }
}

/* ---- per-property inquiry band -------------------------------------------
   Their property pages carry a dedicated "I'M INTERESTED IN <address>" band with
   the agent card (name, licence, phone, email) beside the call to action.
   Measured on their /properties/15504-pescado-cir: band 5 of 7, 702px tall,
   sitting between the area band and the featured-properties rail. */
.alp-propinquire .alp-band__head { max-width: 1000px; }
.alp-agentcard {
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
  max-width: 1000px; margin: 38px auto 0;
  padding: 32px 36px; border: 1px solid rgba(255,255,255,.18); border-radius: 4px;
}
.alp-agentcard h3 { font-size: 30px; line-height: 36px; font-weight: 300;
  text-transform: uppercase; margin: 10px 0 0; }
.alp-agentcard__lic { color: var(--alp-gold); font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; margin: 8px 0 14px; }
.alp-agentcard a { color: var(--alp-white); text-decoration: none; }
.alp-agentcard a:hover { text-decoration: underline; }
.alp-agentcard__cta { display: flex; flex-direction: column; gap: 12px; min-width: 260px; }
.alp-agentcard__cta .alp-btn { text-align: center; }
@media (max-width: 780px) {
  .alp-agentcard { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; }
  .alp-agentcard__cta { min-width: 0; }
  .alp-agentcard h3 { font-size: 24px; line-height: 30px; }
}

/* ---- property map band ---------------------------------------------------
   Their band 3 runs 796px tall and carries the gallery plus the map. We hold one
   image per listing so only the map half is honest to build today. */
.alp-propmap .alp-mapwrap {
  max-width: 1000px; margin: 34px auto 0; height: 520px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 4px; overflow: hidden;
  background: #101010;
}
@media (max-width: 780px) { .alp-propmap .alp-mapwrap { height: 340px; margin-top: 24px; } }

/* neighbourhood map band - same wrapper as the property map */
.alp-commmap .alp-mapwrap {
  max-width: 1000px; margin: 34px auto 0; height: 520px;
  border: 1px solid rgba(0,0,0,.12); border-radius: 4px; overflow: hidden; background: #101010;
}
@media (max-width: 780px) { .alp-commmap .alp-mapwrap { height: 340px; margin-top: 24px; } }