/* Capistrano Real Estate Partners — layout only.
   Color, type, and focus come from assets/brand.css under .crep-brand.
   Do not add colors outside those tokens. */

html { scroll-behavior: smooth; }

.crep-brand { color-scheme: light; }
.crep-brand p,
.crep-brand a,
.crep-brand h1,
.crep-brand h2,
.crep-brand h3,
.crep-brand li { overflow-wrap: anywhere; }

.crep-brand img { display: block; }

.crep-brand a { text-underline-offset: 0.18em; }

.skip {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 100;
  background: var(--crep-white);
  color: var(--crep-navy);
  padding: 12px 16px;
}

.skip:focus { top: 12px; }

section[id],
[id].legacy-anchor { scroll-margin-top: 112px; }

/* Header. Solid navy so the text wordmark stays on an approved pair. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  min-height: 72px;
  padding: 12px 24px;
  background: var(--crep-navy);
  color: var(--crep-ivory);
}

.wordmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: calc(100% - 52px);
  color: var(--crep-ivory);
  text-decoration: none;
  flex: 0 1 auto;
}

.wordmark-name {
  font-family: var(--crep-editorial);
  font-weight: 600;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--crep-ivory);
}

.wordmark-line {
  margin-top: 4px;
  max-width: 16rem;
  font-family: var(--crep-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--crep-ivory);
}

.desk-nav {
  display: none;
  align-items: center;
  gap: 8px 20px;
  margin-left: auto;
}

.desk-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--crep-ivory);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.desk-nav a[aria-current="page"],
.desk-nav a:hover {
  text-decoration: underline;
}

.crep-brand .crep-dark a.nav-cta {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--crep-ivory);
  border-radius: var(--crep-radius);
  background: var(--crep-ivory);
  color: var(--crep-navy);
  font: 600 16px/1.25 var(--crep-text);
  text-decoration: none;
}

.nav-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--crep-ivory);
  border-radius: var(--crep-radius);
  background: transparent;
  color: var(--crep-ivory);
  cursor: pointer;
}

.nav-toggle svg { width: 24px; height: 24px; }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow: auto;
  padding: 120px 24px 48px;
  background: var(--crep-navy);
  color: var(--crep-ivory);
}

.mobile-nav[hidden] { display: none; }

.mobile-nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--crep-rule);
  color: var(--crep-ivory);
  font-size: 18px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.crep-brand .mobile-nav a.nav-cta {
  display: inline-flex;
  width: auto;
  margin-top: 24px;
  border-bottom: 0;
  background: var(--crep-ivory);
  color: var(--crep-navy);
  text-decoration: none;
}

.site-header :focus-visible,
.mobile-nav :focus-visible,
.site-footer :focus-visible,
.hero-copy :focus-visible,
.page-hero :focus-visible,
.band-navy :focus-visible,
.sticky-cta :focus-visible {
  outline-color: var(--crep-ivory);
}

@media (min-width: 1180px) {
  .site-header {
    flex-wrap: nowrap;
    min-height: 80px;
    padding: 12px 48px;
  }
  .wordmark { max-width: none; }
  .wordmark-line { max-width: none; white-space: nowrap; }
  .desk-nav { display: flex; }
  .crep-brand .crep-dark a.nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* Hero. Copy sits on navy, not on the photograph. */

.hero-shot {
  margin: 0;
  background: var(--crep-navy);
}

.hero-shot img {
  width: 100%;
  height: min(42vh, 520px);
  min-height: 220px;
  object-fit: cover;
  object-position: center 40%;
}

.hero-copy {
  background: var(--crep-navy);
  color: var(--crep-ivory);
}

.hero-copy .crep-container { padding-block: clamp(32px, 5vw, 64px); }

.kicker {
  margin: 0 0 12px;
  color: var(--crep-dark-brass);
  font-family: var(--crep-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.crep-dark .kicker,
.hero-copy .kicker,
.page-hero .kicker { color: var(--crep-ivory); }

.hero-copy h1,
.page-hero h1 { color: var(--crep-ivory); }

.lead,
.sub {
  margin: 0 0 24px;
  max-width: var(--crep-reading-max);
  color: var(--crep-muted);
  font-size: 16px;
}

.hero-copy .lead,
.hero-copy .sub,
.page-hero .sub,
.band-navy .sub { color: var(--crep-ivory); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 24px;
  border: 1px solid var(--crep-navy);
  border-radius: var(--crep-radius);
  background: var(--crep-navy);
  color: var(--crep-ivory);
  font: 600 16px/1.25 var(--crep-text);
  text-decoration: none;
  cursor: pointer;
}

.crep-brand .crep-dark a.btn,
.crep-brand .hero-copy a.btn,
.crep-brand .sticky-cta a {
  border-color: var(--crep-ivory);
  background: var(--crep-ivory);
  color: var(--crep-navy);
}

.btn-ghost {
  background: var(--crep-white);
  color: var(--crep-navy);
}

.hero-aside,
.note,
figcaption,
.sell-note {
  margin: 16px 0 0;
  max-width: var(--crep-reading-max);
  color: var(--crep-muted);
  font-size: 14px;
  line-height: 1.5;
}

.hero-copy .hero-aside { color: var(--crep-ivory); }

.prose p { margin: 0 0 24px; }
.prose p:last-child { margin-bottom: 0; }

.prose a {
  color: var(--crep-navy);
  text-decoration: underline;
}

.hero-copy .prose a,
.page-hero .prose a,
.band-navy .prose a { color: var(--crep-ivory); }

/* Bands */

.band { background: var(--crep-ivory); }
.band-white { background: var(--crep-white); }
.band-navy { background: var(--crep-navy); color: var(--crep-ivory); }

.band h2 { max-width: 22ch; }

.split { align-items: start; }

/* Target-market coverage. Shaded regions, no pins. */

.coverage {
  margin: 0;
  padding: 24px;
  background: var(--crep-white);
  border: 1px solid var(--crep-rule);
}

.coverage figcaption {
  margin: 0 0 16px;
  color: var(--crep-slate);
  font-size: 14px;
}

.regions {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.regions a {
  display: block;
  min-height: 44px;
  padding: 16px;
  background: var(--crep-ivory);
  color: var(--crep-navy);
  text-decoration: none;
}

.regions a:hover .region-name,
.regions a:focus-visible .region-name { text-decoration: underline; }

.region-name {
  display: block;
  font-family: var(--crep-editorial);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.region-note {
  display: block;
  margin-top: 8px;
  color: var(--crep-muted);
  font-size: 14px;
  line-height: 1.5;
}

.market-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--crep-rule);
}

.market-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--crep-rule);
}

.market-list a {
  color: var(--crep-navy);
  font-family: var(--crep-editorial);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: underline;
}

.market-list p {
  margin: 8px 0 0;
  max-width: 42ch;
  color: var(--crep-muted);
  font-size: 14px;
}

.more-link { margin: 24px 0 0; font-size: 16px; }
.more-link a { color: var(--crep-navy); }

@media (min-width: 768px) {
  .lead, .sub { font-size: 18px; }
  .regions { grid-template-columns: 1fr 1fr; }
  .region-wide { grid-column: 1 / -1; }
}

/* Prior experience figures */

.facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 32px 0 0;
}

.facts div {
  min-width: 0;
  padding: 16px;
  background: var(--crep-white);
  border-top: 1px solid var(--crep-brass);
}

.facts span {
  display: block;
  margin-bottom: 8px;
  color: var(--crep-navy);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.facts strong {
  color: var(--crep-navy);
  font-family: var(--crep-editorial);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.return-flag[hidden] { display: none; }

.gallery {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0 24px 48px;
  background: var(--crep-ivory);
}

.gallery figure {
  margin: 0;
  background: var(--crep-white);
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery figcaption {
  margin: 0;
  padding: 12px 16px 16px;
  color: var(--crep-slate);
}

@media (min-width: 640px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 800px) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100% - 96px, 1200px);
    margin-inline: auto;
    padding-inline: 0;
  }
  .gallery figure:first-child { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
  .facts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* People */

.person {
  background: var(--crep-white);
  border: 1px solid var(--crep-rule);
}

.person img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  background: var(--crep-ivory);
}

.person div { padding: 24px; }

.person h3 { margin-bottom: 8px; }

.role {
  margin: 0 0 16px;
  color: var(--crep-navy);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.person p { margin: 0 0 16px; color: var(--crep-slate); }
.person p:last-child { margin-bottom: 0; }
.person a { color: var(--crep-navy); }

/* Sequence */

.ops {
  display: grid;
  gap: 24px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.ops li {
  padding-top: 16px;
  border-top: 1px solid var(--crep-rule);
}

.ops-n {
  display: block;
  margin-bottom: 8px;
  color: var(--crep-navy);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.ops h3 { margin-bottom: 8px; font-size: 28px; }
.ops p { margin: 0; color: var(--crep-muted); font-size: 16px; }

@media (min-width: 980px) {
  .ops { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
}

/* Form */

.deal-form {
  display: grid;
  gap: 16px;
}

.deal-form label {
  display: block;
  margin-bottom: 8px;
  color: var(--crep-navy);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.deal-form input,
.deal-form textarea {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: 12px;
  border: 1px solid var(--crep-navy);
  border-radius: var(--crep-radius);
  background: var(--crep-white);
  color: var(--crep-slate);
}

.deal-form textarea { min-height: 140px; resize: vertical; }

.deal-form input::placeholder,
.deal-form textarea::placeholder { color: var(--crep-muted); }

.deal-form input[aria-invalid="true"],
.deal-form textarea[aria-invalid="true"] { border-width: 2px; }

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  margin: 0;
  color: var(--crep-navy);
  font-size: 16px;
  font-weight: 600;
}

.form-success h3 { margin-bottom: 8px; }
.form-success p { margin: 0; }

.contact-line {
  margin: 0 0 16px;
  color: var(--crep-navy);
  font-family: var(--crep-editorial);
  font-size: clamp(22px, 7vw, 40px);
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.contact-line a { color: var(--crep-navy); }

@media (min-width: 720px) {
  .deal-form { grid-template-columns: 1fr 1fr; }
  .deal-form .full { grid-column: 1 / -1; }
}

/* Interior */

.page-hero { background: var(--crep-navy); color: var(--crep-ivory); }
.page-hero .crep-container { padding-block: clamp(32px, 5vw, 64px); }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  color: var(--crep-ivory);
  font-size: 14px;
}

.crumbs a { color: var(--crep-ivory); }

.page-body .measure { max-width: var(--crep-reading-max); }

.market-block {
  padding: 8px 0 16px;
  border-top: 1px solid var(--crep-rule);
}

.market-photo { margin: 16px 0 0; max-width: 640px; }
.market-photo img { width: 100%; height: auto; }

.portal-status {
  margin: 0 0 24px;
  max-width: var(--crep-reading-max);
  font-size: 18px;
}

/* Footer */

.site-footer {
  background: var(--crep-navy);
  color: var(--crep-ivory);
}

.site-footer .crep-container { padding-block: 48px; }

.footer-grid {
  display: grid;
  gap: 32px;
  padding-bottom: 32px;
}

.footer-label {
  margin: 0 0 12px;
  color: var(--crep-ivory);
  font-family: var(--crep-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer p { margin: 16px 0 0; color: var(--crep-ivory); font-size: 16px; }
.site-footer .wordmark + p { max-width: 36ch; }

.site-footer a {
  color: var(--crep-ivory);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.site-footer .wordmark { text-decoration: none; }

.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin: 0 0 8px; }
.site-footer li a { font-size: 16px; }

.fine {
  display: grid;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--crep-rule);
}

.fine p {
  margin: 0;
  color: var(--crep-ivory);
  font-size: 14px;
  line-height: 1.5;
}

.fine strong {
  display: block;
  margin-bottom: 4px;
  color: var(--crep-ivory);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legal-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--crep-rule);
  color: var(--crep-ivory);
  font-size: 14px;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.admin-login {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

@media (min-width: 800px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* Consent */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: 12px 16px;
}

.consent[hidden] { display: none; }

.consent-card {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 16px;
  border: 1px solid var(--crep-rule);
  background: var(--crep-white);
}

.consent-title {
  margin: 0 0 8px;
  color: var(--crep-navy);
  font-family: var(--crep-editorial);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
}

.consent p { margin: 0; color: var(--crep-slate); font-size: 14px; }
.consent p a { color: var(--crep-navy); }

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.consent button {
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--crep-navy);
  border-radius: var(--crep-radius);
  background: var(--crep-white);
  color: var(--crep-navy);
  cursor: pointer;
}

.consent .accept {
  background: var(--crep-navy);
  color: var(--crep-ivory);
}

@media (min-width: 720px) {
  .consent-card {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 24px;
  }
  .consent-actions { margin-top: 0; flex: 0 0 auto; }
}

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--crep-navy);
  color: var(--crep-ivory);
  transform: translateY(110%);
}

.sticky-cta.is-on { transform: translateY(0); }

.sticky-cta p {
  margin: 0;
  color: var(--crep-ivory);
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sticky-cta { transition: none; }
}