/* jaschahal.ca: the one stylesheet.
   Jas's palette and fonts, pulled from his Elementor kit on 2026-09-23
   (KICKOFF §3). Keep the colours; do not invent a new palette (Trevor's ask,
   2026-09-23). Every page loads this file and nothing else; page-specific
   looks are modifiers here, never inline styles, so the CSP can stay strict.
   Mobile first; breakpoints at 600, 900 and 1200px. */

/* ============ Tokens ============ */
:root {
  --bg: #F4F3F2;          /* kit primary: the off-white page background */
  --surface: #FFFFFF;     /* cards, forms */
  --surface-2: #ECEAE6;   /* alternate section bands */
  --line: #DDD9D3;        /* hairlines */
  --line-2: #BFBEBA;      /* kit secondary: warm grey borders, muted UI */
  --ink: #222222;         /* headings */
  --ink-2: #4A4A4A;       /* body copy: the kit's #7A7A7A fails 4.5:1 on white */
  --ink-soft: #7A7A7A;    /* large captions and decorative meta only (4.48:1 on white) */
  --navy: #0F1B33;        /* the JC monogram; buttons, nav accents, footer */
  --navy-2: #1C2D52;      /* navy hover (derived) */
  --sky: #BEDDEA;         /* the round social buttons on the old hero */
  --sky-hover: #3B5998;   /* their hover */
  --gold: #B8862B;        /* the script "Just Sold": ribbon, eyebrow rules, one accent per screen */
  --gold-soft: #E9D9B8;   /* tints of gold */
  --success: #2F7D4F;
  --danger: #B3261E;
  --on-navy: rgba(255, 255, 255, 0.78); /* secondary text on navy, 10:1 */

  --bar-h: 72px;
  --gutter: 20px;
  --max: 1200px;
  --narrow: 760px;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-1: 0 1px 2px rgba(15, 27, 51, 0.06), 0 6px 18px rgba(15, 27, 51, 0.06);
  --shadow-2: 0 2px 6px rgba(15, 27, 51, 0.08), 0 18px 40px rgba(15, 27, 51, 0.12);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Roboto Slab', 'Iowan Old Style', Georgia, serif;
}
@media (min-width: 600px) { :root { --gutter: 28px; } }
@media (min-width: 900px) { :root { --gutter: 36px; } }

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* The topbar is fixed; the page starts under it. */
  padding-top: var(--bar-h);
}
body.nav-open { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--navy-2); }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 700; }
h2 { font-size: clamp(28px, 3.6vw, 40px); }
h3 { font-size: clamp(20px, 2.2vw, 24px); }
h4 { font-size: 18px; }
p, ul, ol { margin: 0 0 1.1em; }
strong { font-weight: 700; color: var(--ink); }
small { font-size: 0.875em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible {
  outline: 3px solid var(--sky-hover);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection { background: var(--gold-soft); color: var(--ink); }
/* On navy and on the hero photo the default ring is close to invisible; the
   sky tint is the same ring contact.css uses on its navy card. */
.hero :focus-visible, .cta-band :focus-visible, .band--navy :focus-visible, .footer :focus-visible { outline-color: var(--sky); }

/* ============ Utilities ============ */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 300;
  padding: 10px 14px;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.skip-link:focus { top: 12px; color: #fff; }
.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap--narrow { max-width: var(--narrow); }
.measure { max-width: 62ch; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--ink-2); }
[hidden] { display: none !important; }

/* ============ Top bar ============
   White on the off-white page with a hairline; 72px; brand left, links in the
   middle, phone and the navy Let's Talk button at the right. Under 900px the
   links fold into a drawer driven by a checkbox (the reference repo's
   pattern); assets/nav.js adds aria-current, Escape and the scrolled shadow. */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--bar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  z-index: 200;
  transition: box-shadow 0.25s ease;
}
.topbar.is-scrolled { box-shadow: 0 2px 14px rgba(15, 27, 51, 0.08); }
.topbar__inner {
  position: relative;
  height: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 16px;
}
.topbar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  flex: 0 0 auto;
  min-width: 0;
  min-height: 44px; /* thumb-sized tap target (verify pass, 2026-09-24) */
}
.topbar__mark { width: 30px; height: 40px; object-fit: contain; }
.topbar__wordmark { display: flex; flex-direction: column; line-height: 1.1; }
.topbar__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.09em;
  color: var(--navy);
}
.topbar__role {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 3px;
}

/* The checkbox is the real control (keyboard reachable, toggled by Space); it
   sits invisibly over the burger drawing so a tap on either hits it. */
.nav-toggle {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  width: 44px; height: 44px;
  margin: 0;
  transform: translateY(-50%);
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}
.nav-burger {
  margin-left: auto;
  width: 44px; height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
}
.nav-burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.22s var(--ease), opacity 0.18s ease;
  transform-origin: center;
}
.nav-toggle:focus-visible ~ .nav-burger { outline: 3px solid var(--sky-hover); outline-offset: 2px; }
.nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
.nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer (mobile default) */
.nav {
  position: fixed;
  top: var(--bar-h);
  left: 0; right: 0;
  max-height: calc(100dvh - var(--bar-h));
  overflow-y: auto;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(15, 27, 51, 0.14);
  padding: 8px var(--gutter) 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.22s var(--ease), visibility 0s linear 0.22s;
}
.nav-toggle:checked ~ .nav {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.2s ease, transform 0.22s var(--ease), visibility 0s;
}
.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.nav__link {
  display: block;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.01em;
  position: relative;
}
.nav__link:hover { color: var(--navy); }
.nav__link[aria-current="page"] { color: var(--navy); font-weight: 700; }
.nav__link[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 4px; bottom: -1px;
  width: 28px; height: 2px;
  background: var(--gold);
}
.nav__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.nav__phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* drawer tap target (verify pass, 2026-09-24) */
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.nav__phone svg { width: 16px; height: 16px; color: var(--gold); }
.nav__phone:hover { color: var(--navy); }
/* Partners (Trevor's ask, 2026-09-26: links to the sister sites). A native
   <details> so it opens by tap, click, Enter or Space with no script and no
   hover-only state; nav.js only closes it on Escape or an outside tap. In
   the drawer it expands in place; on the desktop bar it drops a panel. */
.nav__details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.nav__details > summary::-webkit-details-marker { display: none; }
.nav__drop-toggle::after {
  content: '';
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
}
.nav__details[open] > .nav__drop-toggle::after { transform: translateY(2px) rotate(-135deg); }
.nav__drop-toggle.is-current { color: var(--navy); font-weight: 700; }
.nav__sublink[aria-current="page"] { color: var(--navy); font-weight: 700; }
.nav__drop-toggle:focus-visible { outline: 3px solid var(--sky-hover); outline-offset: 2px; }
.nav__sub { list-style: none; margin: 0; padding: 4px 0 8px 16px; border-bottom: 1px solid var(--line); }
.nav__sublink {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
}
.nav__sublink:hover, .nav__sublink:focus-visible { color: var(--navy); text-decoration: underline; }

/* In the drawer the small button grows to a thumb-sized 44px; the desktop bar
   below sets it back to 40px (verify pass, 2026-09-24). */
.nav .btn--sm { min-height: 44px; }

@media (min-width: 900px) {
  .nav-toggle, .nav-burger { display: none; }
  .nav .btn--sm { min-height: 40px; }
  .nav {
    position: static;
    max-height: none;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav__list {
    flex-direction: row;
    gap: 2px;
    margin: 0 auto;
  }
  .nav__link {
    padding: 8px 12px;
    border: 0;
    font-size: 15px;
    border-radius: var(--radius-sm);
  }
  .nav__link:hover { background: var(--bg); }
  .nav__link[aria-current="page"]::after {
    left: 12px; right: 12px; bottom: 2px;
    width: auto;
  }
  .nav__actions { flex-wrap: nowrap; gap: 18px; }
  .nav__drop { position: relative; }
  .nav__sub {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 250px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
    z-index: 10;
  }
  /* The first dropdown (About) opens under its label; Partners, near the
     right edge, opens leftward so it never runs off the bar. */
  .nav__drop:first-child .nav__sub { left: 0; right: auto; }
  .nav__sublink { font-size: 15px; padding: 0 12px; border-radius: var(--radius-sm); white-space: nowrap; }
  .nav .btn--sm { white-space: nowrap; }
  .nav__sublink:hover { background: var(--bg); text-decoration: none; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .topbar__role { display: none; }
  .nav__phone { display: none; }
  /* Eight items plus the button: tighter padding so nothing wraps (2026-09-26). */
  .nav__link { padding: 8px 8px; }
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--navy);
  background: var(--navy);
  color: #fff;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s var(--ease), box-shadow 0.18s ease;
}
.btn:hover { background: var(--navy-2); border-color: var(--navy-2); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-1); }
.btn:active { transform: none; box-shadow: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn--primary { background: var(--navy); }
.btn--secondary { background: transparent; color: var(--navy); }
.btn--secondary:hover { background: var(--navy); color: #fff; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.btn--ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn--light { background: #fff; color: var(--navy); border-color: #fff; }
.btn--light:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--navy); }
.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.btn--gold:hover { background: #a3761f; border-color: #a3761f; color: #fff; }
.btn--sm { min-height: 40px; padding: 7px 16px; font-size: 14px; }
.btn--lg { min-height: 52px; padding: 12px 28px; font-size: 16px; }
.btn--block { width: 100%; }
.btn svg { width: 16px; height: 16px; }

/* Text link with an arrow: "See all sales", "More about Jas". */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}
.link-arrow::after { content: '\2192'; transition: transform 0.18s var(--ease); }
.link-arrow:hover::after { transform: translateX(3px); }

/* ============ Sections ============ */
.section { padding: clamp(52px, 8vw, 96px) 0; }
.section--tight { padding: clamp(36px, 5vw, 60px) 0; }
.band { background: var(--surface-2); }
.band--white { background: var(--surface); }
.band--navy { background: var(--navy); color: var(--on-navy); }
.band--navy h1, .band--navy h2, .band--navy h3, .band--navy strong { color: #fff; }
.band--navy a { color: #fff; }
.section__head { margin-bottom: clamp(24px, 4vw, 40px); }
.section__head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
}
.section__head p:last-child { margin-bottom: 0; }
.section__foot { margin-top: clamp(24px, 4vw, 36px); }

/* Eyebrow: small caps label with a short gold rule. The text stays ink so it
   passes contrast; gold carries the rule only. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--gold); flex: 0 0 auto; }
.band--navy .eyebrow { color: var(--on-navy); }
.eyebrow--center { justify-content: center; }
.lede {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 62ch;
}
.band--navy .lede { color: var(--on-navy); }

/* A vertical stack of cards or blocks. */
.stack { display: grid; gap: 14px; }

/* Two columns from 900px: .split > .split__media + .split__body */
.split { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
  .split--top { align-items: start; }
}

/* ============ Hero ============ */
.hero {
  position: relative;
  min-height: clamp(560px, 86vh, 820px);
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
  background: var(--navy);
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 27, 51, 0.35) 0%, rgba(15, 27, 51, 0.15) 35%, rgba(15, 27, 51, 0.78) 100%),
    linear-gradient(90deg, rgba(15, 27, 51, 0.55) 0%, rgba(15, 27, 51, 0) 60%);
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding-top: 120px;
  padding-bottom: clamp(48px, 7vw, 88px);
  display: grid;
  gap: 22px;
}
.hero__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0;
}
.hero__title {
  color: #fff;
  font-size: clamp(38px, 6.2vw, 74px);
  font-weight: 700;
  line-height: 1.05;
  margin: 0;
  max-width: 14ch;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.hero__lede {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  max-width: 52ch;
  margin: 0;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero__social { margin-top: 10px; }

/* Round social buttons: the old hero's --sky circles, hover --sky-hover.
   Reused in the footer at a smaller size. */
.social-links {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--sky);
  color: var(--navy);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s var(--ease);
}
.social-links svg { width: 19px; height: 19px; fill: currentColor; }
.social-links a:hover, .social-links a:focus-visible { background: var(--sky-hover); color: #fff; transform: translateY(-2px); }
.social-links--sm a { width: 38px; height: 38px; }
.social-links--sm svg { width: 16px; height: 16px; }

/* ============ Cards ============ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 28px);
  box-shadow: var(--shadow-1);
  color: var(--ink-2);
}
.card > :last-child { margin-bottom: 0; }
.card__title { margin-bottom: 8px; }
.card__kicker {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 8px;
  font-weight: 700;
}
a.card { display: block; text-decoration: none; transition: transform 0.2s var(--ease), box-shadow 0.2s ease, border-color 0.2s ease; }
a.card:hover, a.card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-2); }
.card-grid { display: grid; gap: 18px; }
@media (min-width: 600px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .card-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }

/* Service card: title, one question, arrow. Linked whole. */
.card--service { display: grid; gap: 6px; position: relative; padding-right: 56px; }
.card--service .card__title { font-size: 22px; }
.card--service p { margin: 0; }
.card--service::after {
  content: '\2192';
  position: absolute;
  right: 22px; top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  display: grid;
  place-items: center;
  color: var(--navy);
  font-size: 16px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.card--service:hover::after, .card--service:focus-visible::after { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Figure with the soft-shadow rounded photo (headshot, band photos).
   margin: 0 drops the browser default figure margin (1em 40px), which
   otherwise renders every photo 80px narrower than its column. */
.photo {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  background: var(--surface-2);
}
.photo img { width: 100%; height: auto; display: block; }
.photo--portrait { max-width: 428px; }
/* Gold-soft offset frame behind the photo. The figure itself must not clip
   (the frame sits 18px outside it) and the img paints above the frame, so
   the shadow and radius move from the figure to the img here. The right and
   bottom margins reserve room for the frame inside a grid column. */
.photo--offset {
  position: relative;
  overflow: visible;
  box-shadow: none;
  background: transparent;
  margin: 0 18px 18px 0;
}
.photo--offset img {
  position: relative;
  z-index: 1;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  background: var(--surface-2);
}
.photo--offset::before {
  content: '';
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 2px solid var(--gold-soft);
  border-radius: var(--radius);
  z-index: 0;
}

/* Icon list (about bullets, "How I work"). */
.ticks { list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; }
.ticks li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 10px; height: 10px;
  background: var(--navy);
  border-radius: 2px;
  transform: rotate(45deg);
}
.ticks--gold li::before { background: var(--gold); }

/* Contact rows with icons (phone, email). */
.contact-list { list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: 10px; }
.contact-list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
}
.contact-list a:hover { color: var(--navy); text-decoration: underline; }
.contact-list svg { width: 18px; height: 18px; color: var(--gold); flex: 0 0 auto; }

/* Numbered steps (Buying, Selling). */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 1.5em; display: grid; gap: 14px; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 18px 20px 18px 66px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 20px; top: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--gold);
  line-height: 1;
}
.steps h3 { font-size: 19px; margin-bottom: 4px; }
.steps p { margin: 0; }

/* ============ Listings ============ */
.listing-grid { display: grid; gap: 22px; }
@media (min-width: 600px) { .listing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .listing-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; } }

.listing-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform 0.2s var(--ease), box-shadow 0.2s ease;
}
.listing-card:hover, .listing-card:focus-within { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.listing-card__link { display: block; color: inherit; text-decoration: none; height: 100%; }
.listing-card__link:focus-visible { outline-offset: -3px; }
.listing-card__media {
  position: relative;
  /* Square: Jas's sold graphics are 1080x1080 with the script title across
     the top, so anything else would crop it. Uploaded photos are cropped to
     the square centre. */
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  overflow: hidden;
}
.listing-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.listing-card:hover .listing-card__img { transform: scale(1.03); }
/* No photo yet: the monogram, small, on the warm grey. */
.listing-card__img--placeholder { object-fit: contain; padding: 28%; opacity: 0.35; }
.listing-card__body { padding: 16px 18px 18px; display: grid; gap: 4px; }
.listing-card__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--navy);
  margin: 0;
}
.listing-card__price--sold { color: var(--gold); }
.listing-card__address { font-family: var(--font-body); font-weight: 700; font-size: 17px; color: var(--ink); margin: 0; line-height: 1.35; }
.listing-card__place { margin: 0; font-size: 14px; color: var(--ink-2); }
.listing-card__facts {
  list-style: none;
  padding: 10px 0 0;
  margin: 6px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 13px;
  color: var(--ink-2);
}
.listing-card__facts li { display: inline-flex; align-items: center; gap: 6px; }
.listing-card__facts li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

/* Status ribbon: Sold in gold with navy text (5.2:1), For Sale navy with
   white, Pending outlined. Works on cards and on the listing detail page. */
.ribbon {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1;
  display: inline-block;
  padding: 5px 11px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.ribbon--sold { background: var(--gold); color: var(--navy); }
.ribbon--active { background: var(--navy); color: #fff; }
.ribbon--pending { background: var(--surface); color: var(--navy); border: 1.5px solid var(--navy); }
.ribbon--static { position: static; }

/* Empty state for a grid. Also the shape of .vid-empty. */
.listing-empty, .vid-empty {
  grid-column: 1 / -1;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  padding: 26px 28px;
  color: var(--ink-2);
  background: var(--surface);
  margin: 0;
}
.listing-empty a, .vid-empty a { color: var(--navy); }

/* Tabs (listings page: For Sale / Recently Sold; admin filters). Buttons with
   role="tab"; the active one carries aria-selected="true". */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.tab {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  padding: 12px 16px;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink-2);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.tab:hover { color: var(--navy); background: var(--surface); }
.tab[aria-selected="true"] { color: var(--navy); font-weight: 700; border-bottom-color: var(--gold); }
.tab__count { font-weight: 400; color: var(--ink-2); margin-left: 6px; font-size: 13px; }

/* Filter chips (city filter). */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip {
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
}
.chip:hover { border-color: var(--navy); color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Listing detail: gallery + facts */
.gallery { display: grid; gap: 10px; }
.gallery__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-1);
}
.gallery__stage img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px; list-style: none; margin: 0; scrollbar-width: thin; }
.gallery__thumb {
  flex: 0 0 auto;
  width: 84px; height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
  opacity: 0.8;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb[aria-current="true"] { border-color: var(--gold); opacity: 1; }
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 0 0 1.5em;
  padding: 0;
}
.facts div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.facts dt { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.facts dd { margin: 2px 0 0; font-weight: 700; color: var(--ink); font-size: 17px; }
.price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 34px);
  color: var(--navy);
  margin: 0 0 6px;
}
/* The button hover's darker gold: --gold on --bg is 2.9:1, a hair under the
   3:1 large-text floor; this one is 3.7:1 (verify pass, 2026-09-24). */
.price--sold { color: #a3761f; }

/* ============ Videos (cards match the reference /videos structure) ============
   Each card is a thumbnail facade with a play ring; assets/videos.js swaps in
   the Instagram embed on press, so nothing third-party loads until asked.
   The class names are the worker's render contract: do not rename them. */
.vid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 26px 22px;
}
.vid { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vid__stage {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.18s ease;
}
.vid__stage.is-playing { aspect-ratio: auto; box-shadow: 0 0 0 2px var(--gold), var(--shadow-2); }
.vid__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid__play {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  padding: 0;
  background: linear-gradient(180deg, rgba(15, 27, 51, 0) 50%, rgba(15, 27, 51, 0.78));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vid__play::before {
  content: '';
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.92);
  background: rgba(15, 27, 51, 0.72);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  transition: background 0.18s ease, transform 0.18s var(--ease);
}
.vid__play::after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent #fff;
  margin-left: 5px;
}
.vid__play:hover::before, .vid__play:focus-visible::before { background: var(--gold); transform: scale(1.06); }
.vid__play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.vid__play span {
  position: absolute;
  left: 14px; right: 14px; bottom: 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
.vid__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.vid__meta {
  display: flex;
  flex-wrap: wrap; /* narrow columns (the home three-up) wrap the link under the date instead of breaking the date mid-phrase */
  justify-content: space-between;
  gap: 2px 10px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.vid__meta time { white-space: nowrap; }
.vid__meta a { color: var(--navy); text-decoration: none; white-space: nowrap; }
.vid__meta a:hover { text-decoration: underline; }
.vid__cap {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
@media (max-width: 480px) {
  .vid-grid { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .vid__play::before { width: 48px; height: 48px; }
}
/* Home: intro on the left, three cards on the right. */
.videos-home .vid-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 480px) { .videos-home .vid-grid { grid-template-columns: 1fr 1fr; } }
.videos-home__links { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }

/* ============ Forms ============ */
.form { display: grid; gap: 18px; }
.form__row { display: grid; gap: 18px; }
@media (min-width: 600px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; }
.field__label { font-weight: 500; color: var(--ink); font-size: 15px; }
.field__label .req { color: var(--danger); margin-left: 2px; }
.field__hint { font-size: 13px; color: var(--ink-2); margin: 0; }
.field__error { font-size: 13px; color: var(--danger); margin: 0; font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(59, 89, 152, 0.25);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--danger); }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 10px; }
.field--check input { width: 20px; height: 20px; min-height: 0; margin-top: 3px; padding: 0; accent-color: var(--navy); }
.form__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.form__note { font-size: 13px; color: var(--ink-2); margin: 0; }
/* Honeypot: off-screen, never display:none (some bots check). */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* forms.js states (site/assets/forms.js markup contract), shared by the
   contact, guide and valuation forms. The page stylesheets carry scoped
   copies from the parallel build; these are the site-wide defaults so a new
   form needs no page CSS. */
.form__fields { display: grid; gap: 18px; }
.form__field--hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__field--invalid .field__label { color: var(--danger); }
.form__field--invalid input,
.form__field--invalid textarea,
.form__field--invalid select { border-color: var(--danger); }
.form__field--invalid .field__error[hidden] { display: block !important; } /* [hidden] above is !important too */
.form__status:empty { display: none; }
/* forms.js moves focus here so the result is announced; the alert's coloured
   border is the visible cue (the same rule contact.css carries). */
.form__status:focus { outline: none; }
.alert__body { margin: 0; }
.alert__action { margin: 12px 0 0; }

.alert {
  border: 1px solid var(--line-2);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 14px 16px;
  color: var(--ink);
}
.alert > :last-child { margin-bottom: 0; }
.alert--success { border-color: var(--success); background: #eef6f0; }
.alert--error { border-color: var(--danger); background: #fbeeed; }
.alert--info { border-color: var(--sky-hover); background: #eef4fa; }
.alert--warn { border-color: var(--gold); background: #f8f2e6; }
.alert__title { font-weight: 700; margin: 0 0 4px; color: var(--ink); }

/* ============ CTA band ============ */
.cta-band { background: var(--navy); color: var(--on-navy); padding: clamp(48px, 7vw, 80px) 0; }
.cta-band__inner { display: grid; gap: 22px; align-items: center; }
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: 1fr auto; } }
.cta-band .eyebrow { color: var(--on-navy); } /* was --ink-2 on navy, 1.9:1 (verify pass, 2026-09-24) */
.cta-band h2 { color: #fff; margin-bottom: 8px; }
.cta-band p { margin: 0; max-width: 56ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.cta-band__phone {
  display: inline-block;
  padding: 4px 0; /* 44px tall on phones (verify pass, 2026-09-24) */
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  white-space: nowrap;
}
.cta-band__phone:hover { color: var(--gold-soft); }

/* ============ Interior page header ============ */
.page { padding-top: clamp(40px, 6vw, 72px); }
.page__head { margin-bottom: clamp(28px, 4vw, 48px); }
.page__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.page__eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--gold); }
.page__title { font-size: clamp(34px, 5vw, 56px); font-weight: 700; margin-bottom: 14px; }
.page__lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.65; color: var(--ink-2); max-width: 62ch; margin: 0; }
.page__body { max-width: var(--narrow); }
.prose h2 { margin-top: 1.6em; font-size: clamp(24px, 2.6vw, 30px); }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: 0.4em; }

/* Breadcrumbs: ordered list; separators drawn in CSS (a slash, never a dash). */
.crumbs { margin: 0 0 18px; padding: 0; font-size: 13px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.crumbs li { display: inline-flex; align-items: center; color: var(--ink-2); }
.crumbs li + li::before { content: '/'; margin: 0 8px; color: var(--line-2); }
.crumbs a { color: var(--ink-2); text-decoration: none; display: inline-block; padding: 4px 0; }
.crumbs a:hover { color: var(--navy); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 500; }

/* ============ 404 ============ */
/* padding-top/bottom, not the shorthand: .notfound sits on .wrap and the
   shorthand was wiping out the side gutters (verify pass, 2026-09-24). */
.notfound { text-align: center; padding-top: clamp(60px, 10vw, 120px); padding-bottom: clamp(60px, 10vw, 120px); }
.notfound__code { font-family: var(--font-display); font-weight: 700; font-size: clamp(96px, 18vw, 180px); line-height: 0.9; color: var(--line-2); margin: 0 0 12px; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }

/* ============ Footer ============ */
.footer { background: var(--navy); color: var(--on-navy); font-size: 15px; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; color: #fff; }
.footer__inner {
  padding-top: clamp(44px, 6vw, 72px);
  padding-bottom: clamp(32px, 4vw, 48px);
  display: grid;
  gap: 32px;
}
@media (min-width: 600px) { .footer__inner { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .footer__inner { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } }
.footer__brand { display: grid; gap: 4px; align-content: start; }
.footer__mark { width: 40px; height: 54px; object-fit: contain; margin-bottom: 8px; filter: brightness(0) invert(1); }
.footer__name { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: #fff; letter-spacing: 0.06em; margin: 0; }
.footer__role { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 8px; }
.footer__brokerage { margin: 0; font-size: 13px; line-height: 1.6; }
.footer__brokerage .placeholder {
  display: inline-block;
  border: 1px dashed rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  padding: 2px 8px;
  color: var(--gold-soft);
}
.footer__heading { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; margin: 0 0 14px; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer__list a { display: inline-flex; align-items: center; gap: 10px; }
.footer__list svg { width: 16px; height: 16px; color: var(--gold-soft); }
.footer .social-links { margin-top: 16px; }
.footer .social-links a { background: rgba(255, 255, 255, 0.1); color: #fff; }
.footer .social-links a:hover, .footer .social-links a:focus-visible { background: var(--sky); color: var(--navy); }
/* The version stamp carries the one em dash the site allows (UI chrome, the
   reference repo's rule); check-ca-style exempts .statusbar by name. */
.statusbar {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 14px var(--gutter);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-navy);
}
.statusbar__inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 20px;
}

/* ============ Motion and print ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .listing-card:hover .listing-card__img { transform: none; }
}
@media print {
  body { padding-top: 0; background: #fff; color: #000; }
  .topbar, .nav, .cta-band, .hero__actions, .social-links, .skip-link, .vid__play, .btn { display: none !important; }
  .hero { min-height: 0; color: #000; background: none; }
  .hero::after, .hero__img { display: none; }
  .hero__title, .hero__lede { color: #000; text-shadow: none; }
  .footer { background: none; color: #000; }
  .footer a, .statusbar { color: #000; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.85em; }
  .listing-card, .card { break-inside: avoid; box-shadow: none; }
}