/* ---- tokens ---- */
@font-face {
  font-family: 'Southwark Display';
  src: url('/fonts/big-shoulders-display.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Southwark Serif';
  src: url('/fonts/libre-baskerville.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  

  
  --c-olive: #9b966c;
  --c-green: #719045;

  
  --c-red: #b74235;

  
  --c-white: #ffffff;

  
  --c-ink: #1e1e1e;

  
  --c-field: #ebeae1;
  --c-field-disabled: #e2e1d8;

  
  --c-pattern-olive: #a5a075;
  --c-pattern-green: #7b9851;

  
  --c-green-hover: #63813b;
  --c-red-hover: #a3382c;

  
  --c-label: #3a3a32;
  --c-field-border: #d9d8cc;

  
  --c-error: #7a1c14;

  
  --font-display: 'Southwark Display', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
  --font-body: 'Southwark Serif', Georgia, serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  
  --fs-hero-display: 98px;      
  --fs-hero-display-xl: 120px;  
  --fs-hero-display-m: 56px;    
  --fs-h2-aerial: 40px;         
  --fs-h2: 36px;                
  --fs-h2-m: 30px;              
  --fs-form-head: 26px;         
  --fs-form-head-m: 24px;
  --fs-submit: 26px;            
  --fs-submit-m: 24px;

  
  --fs-hero-serif: 32px;        
  --fs-hero-serif-m: 20px;
  --fs-body: 16px;
  --fs-legal: 14px;             
  --fs-label: 13px;             
  --fs-kicker: 10px;            

  
  --fs-marker: 12px;

  
  --lh-hero-display: 0.94;
  --lh-hero-display-m: 0.92;
  --lh-hero-serif: 1.2;
  --lh-hero-serif-m: 1.25;
  --lh-h2: 1.05;       
  --lh-body: 26px;     
  --lh-legal: 22px;    
  --lh-solid: 1;       

  
  --ls-hero-display: -0.04em;
  --ls-hero-display-m: -0.03em;
  --ls-form-head: 0.04em;
  --ls-submit: 0.06em;
  --ls-kicker: 0.32em;
  --ls-marker: 0.16em;

  
  --sp-12: 12px;
  --sp-18: 18px;
  --sp-24: 24px;
  --sp-26: 26px;
  --sp-32: 32px;
  --sp-44: 44px;
  --sp-48: 48px;
  --sp-56: 56px;
  --sp-64: 64px;
  --sp-72: 72px;
  --sp-76: 76px;
  --sp-80: 80px;
  --sp-84: 84px;
  --sp-88: 88px;

  
  --r-pill: 7px;      
  --r-card: 0;        
  --r-tile: 34px;     
  --r-tile-m: 23px;   

  
  --page-w: 1366px;
  --rail: 175px;             
  --rail-hero-right: 169px;  
  --rail-1440: 160px;
  --rail-1920: 300px;
  --rail-m: 24px;            

  
  --h-header: 148px;
  --h-header-m: 112px;
  --logo-h: 82px;
  --logo-h-m: 68px;

  
  --hero-min-h: 700px;
  --hero-gap: 72px;
  --form-card-w: 614px;
  --measure-hero: 520px;

  
  --pill-h: 44px;
  --pill-h-m: 48px;
  --submit-h: 52px;

  
  --tram-img-w: 640px;
  --tram-img-h: 400px;
  --tram-gap: 56px;
  --measure-tram: 420px;

  
  --aerial-img-w: 620px;
  --aerial-gap: 64px;

  
  --homes-img-w: 620px;
  --homes-img-h: 420px;
  --homes-gap: 64px;
  --measure-homes: 520px;

  
  --band-img-h-m: 260px;

  
  --footer-logo-w: 240px;
  --footer-logo-w-m: 180px;
  --credit-h: 20px;

  
  --tile: 168px;
  --tile-inset: 14px;
  --tile-rect: 140px;
  --tile-stroke: 10px;
  --tile-m: 112px;
  --tile-inset-m: 10px;
  --tile-rect-m: 92px;
  --tile-stroke-m: 7px;

  
  --focus-ring: 3px solid var(--c-ink);
  --focus-offset: 2px;
}
/* ---- base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-olive);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

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

h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}

.display {
  font-family: var(--font-display);
  text-transform: uppercase;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

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

.skip-link {
  position: absolute;
  left: 0;
  top: -64px;
  z-index: 99;
  padding: var(--sp-12) 20px;
  background: var(--c-ink);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: var(--fs-legal);
  text-decoration: underline;
}

.skip-link:focus {
  top: 0;
}

.band {
  position: relative;
}

.pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.band__content {
  position: relative;
}

:root {
  --rail-x: var(--rail-m);
  --rail-x-right: var(--rail-m);
}

@media (min-width: 1366px) {
  :root {
    --rail-x: var(--rail);
    --rail-x-right: var(--rail-hero-right);
  }
}

@media (min-width: 1440px) {
  :root {
    --rail-x: clamp(
      var(--rail-1440),
      calc(var(--rail-1440) + (100vw - 1440px) * 140 / 480),
      var(--rail-1920)
    );
    --rail-x-right: var(--rail-x);
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--submit-h);
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-card);
  font-family: var(--font-display);
  font-size: var(--fs-submit-m);
  line-height: var(--lh-solid);
  letter-spacing: var(--ls-submit);
  color: var(--c-white);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

@media (min-width: 1366px) {
  .btn {
    font-size: var(--fs-submit);
  }
}

.btn--green {
  background: var(--c-green);
}

.btn--green:hover {
  background: var(--c-green-hover);
}

.btn--red {
  background: var(--c-red);
}

.btn--red:hover {
  background: var(--c-red-hover);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  background: var(--c-field-disabled);
  color: var(--c-ink);
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.page-prose { background: var(--paper); }
.prose {
  max-width: 720px;
  margin: 0 auto;
  padding: 72px 24px 96px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
}
.prose h1 { font-size: 44px; line-height: 1.1; margin: 0 0 8px; }
.prose h2 {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 40px 0 10px;
  color: var(--ink);
}
.prose p, .prose ul { margin: 0 0 14px; }
.prose ul { padding-left: 22px; }
.prose li { margin: 0 0 6px; }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.prose__meta { font-size: 14px; color: var(--ink); opacity: 1; margin-bottom: 28px; }
.prose__back { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line, #dedbcd); }
@media (max-width: 600px) {
  .prose { padding: 44px 20px 64px; }
  .prose h1 { font-size: 32px; }
}
/* ---- section: header ---- */
.hdr {
  display: flex;
  align-items: center;
  height: var(--h-header-m);
  padding-inline: var(--rail-x);
  background: var(--c-olive);
}

.hdr__logo {
  width: auto;
  height: var(--logo-h-m);
}

@media (min-width: 1366px) {
  .hdr {
    height: var(--h-header);
  }

  .hdr__logo {
    height: var(--logo-h);
  }
}
/* ---- section: hero ---- */
.hero {
  padding: var(--sp-48) var(--rail-x) var(--sp-64);
  background: var(--c-olive);
}

.hero__tile {
  fill: none;
  stroke: var(--c-pattern-olive);
}

.hero__motif--desktop {
  display: none;
}

.hero__content {
  display: grid;
  gap: var(--sp-44);
}

.hero__title {
  font-weight: 400;
}

.hero__title-serif {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-hero-serif-m);
  font-style: italic;
  line-height: var(--lh-hero-serif-m);
  color: var(--c-white);
}

.hero__title-display {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-hero-display-m);
  line-height: var(--lh-hero-display-m);
  letter-spacing: var(--ls-hero-display-m);
  color: var(--c-red);
}

.hero__body {
  margin-top: var(--sp-24);
  max-width: var(--measure-hero);
  color: var(--c-ink);
}

.hero__card {
  padding: 28px 20px 32px;
  border-radius: var(--r-card);
  background: var(--c-white);
  color: var(--c-ink);
}

.hero__card-head {
  margin-bottom: 22px;
  font-size: var(--fs-form-head-m);
  font-weight: 400;
  line-height: var(--lh-solid);
  letter-spacing: var(--ls-form-head);
  color: var(--c-ink);
}

.ss-form {
  position: relative;
}

.ss-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-18);
}

.ss-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ss-label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-style: italic;
  line-height: var(--lh-solid);
  color: var(--c-label);
}

.ss-pill {
  width: 100%;
  height: var(--pill-h-m);
  padding: 0 14px;
  border: 1px solid var(--c-field-border);
  border-radius: var(--r-pill);
  background: var(--c-field);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.ss-pill:focus-visible {
  border-color: var(--c-ink);
}

.ss-pill[aria-invalid='true'] {
  border-width: 2px;
  border-color: var(--c-error);
}

.ss-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px;
}

.ss-control {
  position: relative;
  display: block;
}

.ss-chevron {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 12px;
  height: 10px;
  margin-top: -5px;
  background-color: var(--c-ink);
  -webkit-mask-image: url('/assets/select-chevron.svg');
  mask-image: url('/assets/select-chevron.svg');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: rotate(180deg);
  pointer-events: none;
}

.ss-error {
  color: var(--c-error);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  line-height: var(--lh-legal);
}

.ss-gotcha {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.ss-submit {
  margin-top: 22px;
}

.ss-status {
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.ss-status:not(:empty) {
  margin-top: 14px;
}

@media (min-width: 1366px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: var(--hero-min-h);
    padding: var(--sp-72) var(--rail-x-right) var(--sp-72) var(--rail-x);
  }

  .hero__motif--mobile {
    display: none;
  }

  .hero__motif--desktop {
    display: block;
  }

  
  .hero__content {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) var(--form-card-w);
    gap: var(--hero-gap);
    align-items: center;
  }

  .hero__title-serif {
    font-size: var(--fs-hero-serif);
    line-height: var(--lh-hero-serif);
  }

  .hero__title-display {
    margin-top: 10px;
    font-size: var(--fs-hero-display);
    line-height: var(--lh-hero-display);
    letter-spacing: var(--ls-hero-display);
  }

  .hero__card {
    padding: 36px 40px 40px;
  }

  .hero__card-head {
    margin-bottom: var(--sp-24);
    font-size: var(--fs-form-head);
  }

  
  .ss-fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-18) 20px;
  }

  .ss-field {
    gap: 7px;
  }

  .ss-field--full {
    grid-column: 1 / -1;
  }

  .ss-pill {
    height: var(--pill-h);
  }

  .ss-submit {
    margin-top: var(--sp-26);
  }
}

@media (min-width: 1920px) {
  .hero__title-display {
    font-size: var(--fs-hero-display-xl);
  }
}
/* ---- section: tram ---- */
.tram {
  
  padding-block: var(--sp-64) 0;
}

.tram__copy {
  padding-inline: var(--rail-x);
}

.tram__heading {
  font-size: var(--fs-h2-m);
  font-weight: 400;
  line-height: var(--lh-h2);
  color: var(--c-white);
  text-wrap: pretty;
}

.tram__body {
  max-width: var(--measure-tram);
  margin-top: var(--sp-18);
  margin-bottom: var(--sp-32);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  text-wrap: pretty; 
}

.tram__img {
  width: 100%;
  height: var(--band-img-h-m);
  object-fit: cover;
  object-position: 50% 60%;
}

@media (min-width: 1366px) {
  .tram {
    display: grid;
    grid-template-columns: 1fr var(--tram-img-w);
    gap: var(--tram-gap);
    align-items: center;
    padding-block: var(--sp-76) 0;
    padding-inline: var(--rail-x);
  }

  .tram__copy {
    padding-inline: 0;
  }

  .tram__heading {
    font-size: var(--fs-h2);
  }

  .tram__body {
    margin-bottom: 0;
  }

  .tram__img {
    width: var(--tram-img-w);
    height: var(--tram-img-h);
  }
}
/* ---- section: aerial ---- */
.aerial {
  
  padding-block: var(--sp-64);
  padding-inline: var(--rail-x);
}

.aerial__render {
  width: 100%;
  max-width: var(--aerial-img-w);
  height: auto;
}

.aerial__heading {
  margin-top: 34px;
  font-size: var(--fs-h2-m);
  font-weight: 400;
  line-height: var(--lh-h2);
  color: var(--c-white);
  text-wrap: pretty;
}

.aerial__body {
  margin-top: var(--sp-18);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  text-wrap: pretty; 
}

@media (min-width: 1366px) {
  .aerial {
    display: grid;
    grid-template-columns: var(--aerial-img-w) 1fr;
    gap: var(--aerial-gap);
    align-items: center;
    padding-block: var(--sp-80) var(--sp-76);
  }

  .aerial__heading {
    margin-top: 0;
    font-size: var(--fs-h2-aerial);
  }

  
  .aerial__body {
    margin-top: 22px;
  }
}

.aerial__caption {
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  
  color: var(--ink);
}
/* ---- section: homes ---- */
.homes {
  
  --homes-copy-gap: 22px;

  padding-block: 0 var(--sp-64);
  padding-inline: var(--rail-x);
}

.homes__heading {
  font-size: var(--fs-h2-m);
  line-height: var(--lh-h2);
  color: var(--c-white);
}

.homes__body {
  margin-top: var(--sp-18);
}

.homes__image {
  margin-top: var(--sp-32);
  width: 100%;
  height: var(--band-img-h-m);
  object-fit: cover;
}

@media (min-width: 1366px) {
  .homes {
    padding-block: 0 var(--sp-84);
    display: grid;
    
    grid-template-columns: minmax(0, 1fr) var(--homes-img-w);
    gap: var(--homes-gap);
    align-items: center;
  }

  .homes__heading {
    font-size: var(--fs-h2);
  }

  .homes__body {
    margin-top: var(--homes-copy-gap);
    max-width: var(--measure-homes);
  }

  .homes__image {
    margin-top: 0;
    width: var(--homes-img-w);
    height: var(--homes-img-h);
  }
}
/* ---- section: footer ---- */
.ftr {
  
  --ftr-kicker-lh: 13px;
  --ftr-credit-gap: 14px;
  --ftr-credit-gap-stage: 12px;

  background: var(--c-green);
  padding-block: var(--sp-72) var(--sp-64);
  padding-inline: var(--rail-x);
}

.ftr__tile {
  fill: none;
  stroke: var(--c-pattern-green);
}

.ftr__tiles {
  fill: url(#ftr-tile-mobile);
}

.ftr__logo {
  width: var(--footer-logo-w-m);
  height: auto;
}

.ftr__address {
  margin: var(--sp-56) 0 0;
  font-size: var(--fs-legal);
  line-height: var(--lh-legal);
  font-style: normal;
}

.ftr__credit {
  margin-top: var(--sp-80);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ftr-credit-gap);
}

.ftr__kicker {
  font-size: var(--fs-kicker);
  line-height: var(--ftr-kicker-lh);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
}

.ftr__credit-mark {
  width: auto;
  height: var(--credit-h);
}

.ftr__terms {
  margin-top: var(--sp-56);
  font-size: var(--fs-legal);
  line-height: var(--lh-legal);
  font-style: italic;
  text-align: center;
}

@media (min-width: 1366px) {
  .ftr {
    padding-block: var(--sp-88) var(--sp-48);
  }

  .ftr__tiles {
    fill: url(#ftr-tile);
  }

  .ftr__logo {
    width: var(--footer-logo-w);
  }

  .ftr__address {
    margin-top: var(--sp-26);
  }

  .ftr__credit {
    margin-top: var(--sp-64);
    gap: var(--ftr-credit-gap-stage);
  }

  .ftr__terms {
    margin-top: var(--sp-44);
  }
}