/* =============================================================================
   properties.express — Main Stylesheet
   -----------------------------------------------------------------------------
   STRUCTURE (jump to a section by searching for the === heading):

     1.  DESIGN TOKENS         <- change colors / fonts / spacing here
     2.  RESET & BASE
     3.  TYPOGRAPHY
     4.  LAYOUT HELPERS
     5.  HEADER & NAV
     6.  HERO (animated headline)
     7.  SEARCH BAR (filter widget — used on index + properties pages)
     8.  SECTIONS
     9.  PROPERTY CARDS & RESULTS
    10.  BUTTONS
    11.  FORMS
    12.  LISTING PAGE (individual property page)
    13.  FOOTER
    14.  UTILITIES
    15.  ANIMATIONS
    16.  RESPONSIVE (mobile)

   DESIGN RULES OF THIS BRAND:
     - One typeface: DM Serif Text (regular + italic — it has no other weights).
       Hierarchy comes from SIZE, SPACING and COLOR, never font-weight.
     - Monochromatic slate on bone white. No accent color.
   ============================================================================= */


/* === 1. DESIGN TOKENS =======================================================
   The only values you should need to touch to re-skin the site.
   ============================================================================ */
:root {
  /* --- Colors ----------------------------------------------------- */
  --color-bg:         #F6F3EB;        /* page background — bone white          */
  --color-surface:    #FCFAF4;        /* cards, search bar, lighter panels     */
  --color-ink:        #313B45;        /* primary text — slate                  */
  --color-ink-soft:   #66707A;        /* secondary text — lighter slate        */
  --color-ink-faint:  #9AA2AA;        /* placeholders, fine print              */
  --color-ink-deep:   #1F2830;        /* hover states, darkest slate           */
  --color-hairline:   #DAD5C9;        /* borders and dividers — warm gray      */
  --color-bone-text:  #F6F3EB;        /* light text on dark (footer, buttons)  */

  /* --- Typography --------------------------------------------------
     ONE typeface for everything. DM Serif Text only exists in
     Regular 400 (+ italic), so hierarchy is size/space/color.       */
  --font-serif: 'DM Serif Text', 'Georgia', serif;

  /* --- Spacing scale ----------------------------------------------- */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   32px;
  --space-xl:   64px;
  --space-2xl:  120px;

  /* --- Layout ------------------------------------------------------ */
  --max-width:         1280px;
  --max-width-narrow:  860px;
  --header-height:     76px;

  /* --- Motion ------------------------------------------------------ */
  --ease-slow: 600ms cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-med:  300ms ease;
  --ease-fast: 150ms ease;
}


/* === 2. RESET & BASE ======================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* === 3. TYPOGRAPHY ========================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;                /* the ONLY weight DM Serif Text has        */
  line-height: 1.15;
  letter-spacing: 0.005em;
  margin: 0 0 var(--space-md);
  color: var(--color-ink);
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
h4 { font-size: 1.1rem; }

p {
  margin: 0 0 var(--space-md);
  color: var(--color-ink-soft);
  font-size: 1rem;
}

/* Eyebrow — small text above section headings.
   With only one font weight, the eyebrow's identity comes entirely
   from small size + wide letter-spacing + soft color. */
.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-hairline);
}


/* === 4. LAYOUT HELPERS ====================================================== */
main {
  flex: 1;
  width: 100%;
  padding-top: var(--header-height);   /* clears the fixed header everywhere   */
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container--narrow {
  max-width: var(--max-width-narrow);
}


/* === 5. HEADER & NAV ======================================================== */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-lg);
  z-index: 1000;

  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-hairline);
  box-shadow: 0 2px 20px rgba(49, 59, 69, 0);       /* invisible by default    */

  transition: box-shadow var(--ease-med);
}

/* Scrolled state — js/header.js adds .scrolled once you scroll a little.
   The only change is a soft shadow appearing. Subtle by design. */
header.scrolled {
  box-shadow: 0 2px 20px rgba(49, 59, 69, 0.10);
}

/* The brand mark: "Properties." stacked above "Express" */
.brand {
  text-decoration: none;
  color: var(--color-ink);
  font-size: 1.05rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.brand span {
  display: block;                  /* forces each word onto its own line       */
}

header nav {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

header nav a {
  color: var(--color-ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  padding: var(--space-sm) var(--space-md);
  transition: color var(--ease-fast);
}

header nav a:hover {
  color: var(--color-ink-deep);
}

/* Mobile nav toggle (hamburger) — hidden on desktop */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  color: var(--color-ink);
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background-color: currentColor;
  margin: 6px 0;
}


/* === 6. HERO (animated headline) ============================================ */
.hero {
  min-height: calc(88vh - var(--header-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
}

/* The animated line: "I'm looking for [typed word]" */
.hero__line {
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  line-height: 1.2;
  margin: 0 0 var(--space-xl);
  color: var(--color-ink);
  min-height: 1.3em;               /* reserves space so layout doesn't jump    */
}

/* The word being typed — italic is the one style axis we have, so use it */
.hero__line em {
  font-style: italic;
  color: var(--color-ink-deep);
}

/* The blinking cursor after the typed word */
.typed-cursor {
  display: inline-block;
  width: 2px;
  height: 0.85em;
  margin-left: 5px;
  background-color: var(--color-ink);
  vertical-align: -0.08em;
  animation: cursorBlink 1.1s steps(1) infinite;
}

.hero__sub {
  font-size: 1.05rem;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-lg);
}


/* --- Featured hero (index-featured.html only) --------------------
   Adds a photo/video slideshow behind the hero content and a bone
   pill behind the animated headline. Everything is scoped under
   .hero--featured so the plain hero on index.html is unaffected. */

.hero--featured {
  position: relative;
  overflow: hidden;
}

/* Push the text content and search bar above the slideshow layer */
.hero--featured > * {
  position: relative;
  z-index: 1;
}

/* The slideshow layer itself. Populated at runtime by hero-slideshow.js.
   Sits behind everything else in the hero. */
.hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-hairline);   /* subtle placeholder while images load */
}

/* Each image (or the video) fills the slideshow area. Cross-fades
   between slides come from the opacity transition — CSS handles the
   whole animation, the JS just toggles the is-active class. */
.hero-slideshow__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1500ms ease-in-out;
}

.hero-slideshow__slide.is-active {
  opacity: 1;
}

/* The bone pill behind "I'm looking for [word]".
   - inline-block so it hugs the text width instead of stretching full-width
   - min-width uses ch units so the pill is wide enough for the longest
     word in the animation ("an investment") and barely pulses on shorter
     ones instead of jumping in and out with every keystroke
   - subtle shadow + hairline border so the pill reads as a floating card
     over any photo, not a flat rectangle */
.hero--featured .hero__line {
  display: inline-block;
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-bg);
  border: 1px solid var(--color-hairline);
  box-shadow: 0 4px 24px rgba(49, 59, 69, 0.10);
  border-radius: 4px;
}


/* === 7. SEARCH BAR (filter widget) ==========================================
   Used twice: on the homepage (submits to properties.html) and at the top
   of properties.html itself (filters the grid in place). Same component,
   same classes, so it looks identical in both places.
   ============================================================================ */
.search-bar {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr 1.2fr auto;   /* 4 fields + button    */
  align-items: stretch;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  background-color: var(--color-surface);
  border: 1px solid var(--color-hairline);
  box-shadow: 0 8px 32px rgba(49, 59, 69, 0.06);
}

.search-bar__field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: var(--space-md) var(--space-lg);
  border-right: 1px solid var(--color-hairline);
  text-align: left;
}

.search-bar__field label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.search-bar__field input,
.search-bar__field select {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--color-ink);
  background: transparent;
  border: none;
  outline: none;
  padding: 2px 0;
  width: 100%;
  cursor: pointer;
}

.search-bar__field input {
  cursor: text;
}

.search-bar__field input::placeholder {
  color: var(--color-ink-faint);
  font-style: italic;
}

/* The Find / Apply button occupies the last grid column, full height */
.search-bar__button {
  font-family: var(--font-serif);
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--color-bone-text);
  background-color: var(--color-ink);
  border: none;
  cursor: pointer;
  padding: 0 var(--space-xl);
  transition: background-color var(--ease-med);
}

.search-bar__button:hover {
  background-color: var(--color-ink-deep);
}


/* === 8. SECTIONS ============================================================ */
.section {
  padding: var(--space-2xl) 0;
}

.section--tight { padding: var(--space-xl) 0; }
.section--alt   { background-color: var(--color-surface);
                  border-top: 1px solid var(--color-hairline);
                  border-bottom: 1px solid var(--color-hairline); }

.section__head {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.section__head p {
  max-width: 620px;
  margin: 0 auto;
}


/* === 9. PROPERTY CARDS & RESULTS ============================================ */
.property-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-lg);
}

.property-card {
  display: block;
  background-color: var(--color-surface);
  border: 1px solid var(--color-hairline);
  color: var(--color-ink);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--ease-slow), box-shadow var(--ease-slow);
}

.property-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(49, 59, 69, 0.10);
}


/* --- Swipeable carousel state (added by js/card-carousel.js on cards
       that have more than one photo). Applies only to .is-carousel;
       single-photo cards keep their normal hover-zoom behaviour above. */

.property-card__image.is-carousel {
  cursor: grab;
  touch-action: pan-y;             /* vertical page-scroll still works,
                                      horizontal gestures belong to us */
}

.property-card__image.is-carousel:active {
  cursor: grabbing;
}

/* Turn off the hover-zoom on carousel cards — otherwise scale + translate
   fight each other during a drag */
.property-card:hover .property-card__image.is-carousel img {
  transform: none;
}

/* The strip that holds all photos side-by-side. JS translates it. */
.property-card__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* No transition during active drag — the track must follow the finger 1:1 */
.property-card__track.is-dragging {
  transition: none;
}

/* Each photo takes one full slot. flex: 0 0 100% = no grow, no shrink,
   basis is 100% of the track's parent width. */
.property-card__track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;            /* pointer events go to the container,
                                      not swallowed by the img */
}



.property-card__image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  /* Slate gradient placeholder shows if a photo is missing */
  background: linear-gradient(135deg, #E5E1D6, #C9CBCA);
}

.property-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.property-card:hover .property-card__image img {
  transform: scale(1.05);
}

.property-card__body {
  padding: var(--space-lg);
}

.property-card__eyebrow {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-sm);
}

.property-card__title {
  font-size: 1.45rem;
  margin: 0 0 var(--space-xs);
  color: var(--color-ink);
}

.property-card__location {
  font-size: 0.92rem;
  font-style: italic;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-md);
}

.property-card__price {
  font-size: 1.15rem;
  color: var(--color-ink);
  margin: 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-hairline);
}

/* Small line above the results grid: "4 properties" */
.results-count {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-lg);
}

/* Shown inside the grid area when no listings match the filters */
.empty-state {
  grid-column: 1 / -1;             /* span the full grid width                 */
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  border: 1px dashed var(--color-hairline);
}

.empty-state p {
  margin-bottom: var(--space-lg);
}


/* === 10. BUTTONS ============================================================ */
.btn {
  display: inline-block;
  padding: var(--space-md) var(--space-xl);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--color-ink);
  background-color: transparent;
  color: var(--color-ink);
  transition: background-color var(--ease-med), color var(--ease-med);
}

.btn:hover {
  background-color: var(--color-ink);
  color: var(--color-bone-text);
}

.btn--solid {
  background-color: var(--color-ink);
  color: var(--color-bone-text);
}

.btn--solid:hover {
  background-color: var(--color-ink-deep);
  border-color: var(--color-ink-deep);
}


/* === 11. FORMS (inquire page) =============================================== */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form__field label {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.form__field input,
.form__field textarea,
.form__field select {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--color-ink);
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--color-hairline);
  padding: var(--space-sm) 0;
  outline: none;
  transition: border-color var(--ease-fast);
}

.form__field input:focus,
.form__field textarea:focus,
.form__field select:focus {
  border-bottom-color: var(--color-ink);
}

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

/* --- Privacy consent checkbox row --------------------------------- */
.form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  line-height: 1.5;
  cursor: pointer;
}

.form__checkbox input[type="checkbox"] {
  margin-top: 4px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--color-ink);       /* colors the checkmark itself         */
  cursor: pointer;
}

.form__checkbox a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form__checkbox a:hover {
  color: var(--color-ink-deep);
}

/* --- Form status messages (error + success) ----------------------- */
.form__error {
  color: var(--color-ink-deep);
  font-style: italic;
  font-size: 0.95rem;
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 3px solid var(--color-ink-deep);
  background-color: var(--color-surface);
}

/* Full-screen confirmation overlay shown after a successful submit. */
.form__success {
  position: fixed;
  inset: 0;
  z-index: 2000;                    /* above the header (1000) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-xl);
  background-color: var(--color-bg);
  animation: successFade 500ms ease-out;
}

/* CRITICAL: keeps the `hidden` attribute working. The display:flex
   above is author CSS, which would otherwise override the browser's
   built-in [hidden]{display:none} and the overlay would show on page
   load. This line restores the hide behaviour — don't remove it. */
.form__success[hidden] {
  display: none;
}

.form__success__mark {
  font-size: 3rem;
  line-height: 1;
  color: var(--color-ink);
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-hairline);
  border-radius: 50%;
  margin-bottom: var(--space-lg);
  animation: successPop 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: 150ms;
}

.form__success h3 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: var(--space-md);
}

.form__success p {
  max-width: 420px;
  margin: 0 auto var(--space-xl);
}

.form__success__actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}

/* --- Disabled state for buttons (used while submitting) ----------- */
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}


/* === 12. LISTING PAGE (individual property page) ============================ */
.listing-hero {
  position: relative;
  height: 68vh;
  min-height: 460px;
  overflow: hidden;
  background: linear-gradient(135deg, #E5E1D6, #C9CBCA);
}

.listing-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-header {
  padding: var(--space-xl) 0 var(--space-lg);
  border-bottom: 1px solid var(--color-hairline);
}

.listing-header__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin: 0 0 var(--space-md);
}

.listing-header__title {
  font-size: clamp(2.3rem, 5vw, 3.5rem);
  margin: 0 0 var(--space-sm);
}

.listing-header__location {
  font-style: italic;
  font-size: 1.35rem;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-lg);
}

.listing-header__price {
  font-size: 1.9rem;
  color: var(--color-ink);
  margin: 0;
}

.listing-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-lg);
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--color-hairline);
}

.listing-facts__item {
  text-align: center;
}

.listing-facts__label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-sm);
}

.listing-facts__value {
  font-size: 1.5rem;
  color: var(--color-ink);
}

.listing-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}

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


/* --- Floating "Get More Info" button on listing pages ------------
   Fixed to the bottom-right of the viewport, appears once the user
   scrolls past the .listing-header. Added at runtime by
   js/listing-cta.js; the href is set to inquire.html?property=NAME
   so the inquire page can pre-fill the property field.
   
   For the button to directly inquire for a specific property.
   */
.listing-cta {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  z-index: 900;                    /* above page content, below header (1000) */

  display: inline-block;
  padding: var(--space-md) var(--space-xl);

  font-family: var(--font-serif);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-decoration: none;

  background-color: var(--color-ink);
  color: var(--color-bone-text);
  border: 1px solid var(--color-ink);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(49, 59, 69, 0.20);
  cursor: pointer;

  /* Hidden by default. .is-visible (added by JS on scroll) slides it in. */
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 350ms ease-out,
              transform 350ms ease-out,
              background-color var(--ease-med);
}

.listing-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.listing-cta:hover {
  background-color: var(--color-ink-deep);
  border-color: var(--color-ink-deep);
}

/* Mobile: tighter padding, still bottom-right */
@media (max-width: 768px) {
  .listing-cta {
    bottom: var(--space-md);
    right: var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    font-size: 0.9rem;
  }
}




/* === 13. FOOTER ============================================================= */
footer {
  background-color: var(--color-ink);
  color: rgba(246, 243, 235, 0.75);
  padding: var(--space-xl) var(--space-lg);
  margin-top: auto;
}

.footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}

/* Footer brand mark — same stacked lockup as the header */
.footer__brand {
  color: var(--color-bone-text);
  font-size: 1.25rem;
  line-height: 1.1;
  margin: 0;
  font-weight: 400;
}

.footer__brand span {
  display: block;
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-lg);
  max-width: 700px;
}

footer nav a {
  color: rgba(246, 243, 235, 0.7);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  transition: color var(--ease-fast);
}

footer nav a:hover {
  color: var(--color-bone-text);
}

.footer__small {
  font-size: 0.75rem;
  font-style: italic;
  color: rgba(246, 243, 235, 0.4);
}


/* === 14. UTILITIES ========================================================== */
.text-center { text-align: center; }
.mt-lg       { margin-top: var(--space-lg); }
.mt-xl       { margin-top: var(--space-xl); }


/* === 15. ANIMATIONS ========================================================= */
@keyframes fadeSlideIn {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes cursorBlink {
  50% { opacity: 0; }
}

@keyframes successFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes successPop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

.fade-in {
  opacity: 0;
  animation: fadeSlideIn 1.2s ease-out forwards;
}

.fade-in--delay-1 { animation-delay: 0.2s; }
.fade-in--delay-2 { animation-delay: 0.4s; }

/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* === 16. RESPONSIVE (mobile) ================================================ */
@media (max-width: 900px) {

  /* Search bar stacks vertically — each field full width */
  .search-bar {
    grid-template-columns: 1fr;
  }

  .search-bar__field {
    border-right: none;
    border-bottom: 1px solid var(--color-hairline);
  }

  .search-bar__button {
    padding: var(--space-md);
  }
}

@media (max-width: 768px) {

  .hero__line {
  font-size: clamp(1rem, 5vw, 0.8rem);
  }

  .container {
    padding: 0 var(--space-md);
  }

  header {
    padding: 0 var(--space-md);
  }

  /* Hide desktop nav, show hamburger */
  header nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    flex-direction: column;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-hairline);
    padding: var(--space-lg);
    gap: var(--space-md);
    transform: translateY(-130%);
    transition: transform var(--ease-med);
  }

  header nav.is-open {
    transform: translateY(0);
  }

  header nav a {
    width: 100%;
    text-align: center;
    padding: var(--space-md);
  }

  .nav-toggle {
    display: block;
  }

  .section {
    padding: var(--space-xl) 0;
  }

  .form__row {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: calc(80vh - var(--header-height));
  }
}