/* =========================================================
   5410 Duval — stylesheet
   Warm editorial. Concrete, oak, and Texas autumn light.
   ========================================================= */

:root {
  --bg:        #efeae0;          /* warm cream */
  --bg-alt:   #e6dfd1;
  --ink:       #18160f;          /* near-black, warm */
  --ink-soft:  #4a463d;
  --rule:      #cfc7b6;
  --accent:    #a64526;          /* terracotta, from the bath tile */
  --accent-2:  #6f6253;          /* mushroom */
  --max:       1480px;

  --serif: "Fraunces", "Times New Roman", serif;
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; transition: opacity .25s ease, color .25s ease; }
a:hover { opacity: .6; }

::selection { background: var(--accent); color: var(--bg); }

/* ---------- shared bits ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.4rem;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 380;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--ink);
}

h2 {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  font-weight: 360;
  letter-spacing: -0.018em;
  line-height: 1.05;
  max-width: 18ch;
}

h2 a { color: var(--accent); border-bottom: 1px solid currentColor; padding-bottom: 2px; }

p {
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  color: var(--ink-soft);
  max-width: 46ch;
}

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.6rem 2rem;
  pointer-events: none;
  transition:
    padding .5s cubic-bezier(.2,.7,.2,1),
    background-color .4s ease;
}
.nav a { pointer-events: auto; }

.nav__mark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 320;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-size: clamp(2.1rem, 5.5vw, 5rem);   /* mobile floor +20%; desktop unchanged */
  line-height: 1;
  letter-spacing: -0.02em;
  color: #f1ebdf;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
  transition:
    font-size .55s cubic-bezier(.2,.7,.2,1),
    color    .4s ease,
    text-shadow .4s ease;
}

.nav__links {
  display: flex;
  gap: 1.6rem;
  margin-top: .55rem;            /* baseline-align with shrunk mark */
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.nav__links a:hover { opacity: .55; }

/* once user has scrolled past the hero */
.nav.is-scrolled {
  padding: 6px 2rem;          /* ~30px tall bar with 1.1rem mark inside */
  background: var(--bg);
  align-items: center;
}
.nav.is-scrolled .nav__mark {
  font-size: 1.1rem;
  color: var(--ink);
  text-shadow: none;
}
.nav.is-scrolled .nav__links {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  margin-top: 0;              /* reset baseline-offset; bar is centered */
}

@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav { padding: 1rem 1.25rem; }
  /* On mobile we never show the condensed cream bar — once it would scroll
     in (after the hero), hide the whole nav. The big title stays on the hero
     because that's its initial state, only the post-scroll bar is suppressed. */
  .nav.is-scrolled { display: none; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: var(--ink);
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  animation: heroIn 1.6s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes heroIn {
  from { transform: scale(1.06); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.hero__caption {
  position: absolute;
  bottom: 2.2rem;
  left: 2.2rem;
  color: #f1ebdf;
}
.hero__caption .eyebrow {
  color: #f1ebdf;
  margin: 0;
  opacity: .9;
}

@media (max-width: 760px) {
  .hero__caption { left: 1.25rem; bottom: 1.4rem; }
}

/* ---------- title block ---------- */
.title {
  max-width: var(--max);
  margin: 0 auto;
  padding: 8rem 2rem 6rem;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 3rem 6rem;
  align-items: end;
}

.title .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }

.title__h1 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 5.75rem);
  line-height: 1;
  letter-spacing: -0.035em;
}
.title__h1 em {
  display: block;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--accent);
  font-weight: 320;
}
.title__h1 .num { display: inline-block; width: .25em; }

.title__lede {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 38ch;
}

.specs {
  grid-column: 1 / -1;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-top: 4rem;
}
.specs li {
  background: var(--bg);
  padding: 1.6rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.specs li span {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 360;
  font-variation-settings: "opsz" 144;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1;
}

@media (max-width: 760px) {
  .title { grid-template-columns: 1fr; padding: 5rem 1.25rem 3rem; gap: 2rem; }
  .specs { grid-template-columns: repeat(2, 1fr); margin-top: 2rem; }
}

/* ---------- feature sections ---------- */
.feature {
  max-width: var(--max);
  margin: 0 auto;
  padding: 6rem 2rem;
  display: grid;
  gap: 3rem 5rem;
  align-items: center;
}
.feature--right { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.feature--left  { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.feature--left .feature__media { order: 2; }

.feature__media {
  position: relative;
  overflow: hidden;
  background: var(--bg-alt);
  aspect-ratio: 4 / 5;
}
.feature__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.feature.is-in .feature__media img { transform: scale(1); }

.feature__copy { padding: 1rem 0; }
.feature__copy h2 { margin-bottom: 1.4rem; }
.feature__copy p { margin-bottom: 2rem; }

.meta {
  display: grid;
  grid-template-columns: 7em 1fr;
  row-gap: .55rem;
  column-gap: 1rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
  font-size: .92rem;
}
.meta dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-2);
  padding-top: 2px;
}
.meta dd { color: var(--ink); }

/* fade-in on scroll */
.feature {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
.feature.is-in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .feature, .feature--right, .feature--left {
    grid-template-columns: 1fr;
    padding: 3rem 1.25rem;
    gap: 1.6rem;
  }
  .feature--left .feature__media { order: 0; }
  .feature__media { aspect-ratio: 4 / 5; }
}

/* ---------- floor plans ---------- */
.plans {
  background: var(--bg-alt);
  padding: 4.5rem 2rem 6rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  isolation: isolate;             /* keep blend-mode contained to this section */
}
.plans__head {
  max-width: var(--max);
  margin: 0 auto 1.5rem;       /* was 3rem — pull plan ~24px closer to title */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2rem;
}
.plans__head h2 { margin-top: .5rem; }

.plans__tabs {
  display: inline-flex;       /* shrinks border to wrap buttons only */
  justify-self: start;        /* required: overrides grid item's default stretch */
  align-self: start;
  gap: 0;
  border: 1px solid var(--ink);
}
.plans__tab {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--ink);
  padding: .75rem 1.1rem;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background .25s, color .25s;
}
.plans__tab:last-child { border-right: 0; }
.plans__tab:hover { background: var(--bg); }
.plans__tab.is-active { background: var(--ink); color: var(--bg); }

.plans__viewer {
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
}

/* each pane = legend (left) + plan figure (right) */
.plans__pane {
  display: none;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
.plans__pane.is-active {
  display: grid;
  /* no animation here — animations create stacking contexts that isolate
     the img's mix-blend-mode from the section background */
}

/* legend */
.plans__legend { padding-top: 2.75rem; }   /* aligns first item with plan's top edge */
.plans__legend ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.plans__legend li {
  display: grid;
  grid-template-columns: 2.25em 1fr;
  gap: .25rem;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(24, 22, 15, .08);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ink);
}
.plans__legend li:first-child { border-top: 1px solid rgba(24, 22, 15, .15); padding-top: .65rem; }
.plans__legend-num {
  color: var(--accent);
  font-weight: 500;
  font-feature-settings: "tnum" 1;
}
.plans__legend-label {
  color: var(--ink-soft);
}

/* figure: aspect-ratio locked to plan, max-width derived from max-height */
.plans__figure {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 1368 / 926;
  max-width: calc(88vh * (1368 / 926));    /* equivalent height cap of 88vh */
  margin-inline: auto 0;                    /* anchor to left of column */
  background-color: var(--bg-alt);          /* matches section so edges blend */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  /* No filter here — contrast(1.15) was lightening the multiplied cream
     and creating a visible color mismatch on mobile. JPG line work is
     already sharp at 1368×926, so the filter wasn't earning its complexity. */
}

/* numbered markers overlaid on the plan */
.plans__marker {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent);
  /* soft cream halo so numbers stay readable against line work */
  text-shadow:
    0 0 3px var(--bg-alt),
    0 0 3px var(--bg-alt),
    0 0 6px var(--bg-alt);
  font-feature-settings: "tnum" 1;
  /* selectable text — markers act as actual content */
  user-select: text;
}

/* ---- edit mode (turn on with ?edit=1 in URL) ---- */
body.is-editing .plans__marker {
  cursor: move;
  padding: 4px 6px;
  margin: -4px -6px;            /* keep optical position; padding is hit area only */
  border-radius: 3px;
  background: rgba(166, 69, 38, .12);
  outline: 1px dashed rgba(166, 69, 38, .5);
  user-select: none;
}
body.is-editing .plans__marker.is-dragging {
  background: rgba(166, 69, 38, .28);
  outline-style: solid;
}

.edit-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .5rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.edit-banner__msg { opacity: .8; }
.edit-banner__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.edit-banner__status {
  font-size: 10px;
  opacity: .75;
  margin-right: .75rem;
  min-width: 12ch;
  text-align: right;
}
.edit-banner__status.is-error { color: var(--accent); opacity: 1; }
.edit-banner__btn {
  background: transparent;
  color: var(--bg);
  border: 1px solid rgba(241, 235, 223, .35);
  padding: .4rem .8rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.edit-banner__btn:hover { background: rgba(241, 235, 223, .1); }
.edit-banner__btn--primary {
  background: var(--accent);
  border-color: var(--accent);
}
.edit-banner__btn--primary:hover { background: var(--accent); opacity: .85; }
body.is-editing { padding-top: 38px; }

@media (max-width: 900px) {
  .plans__pane.is-active {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .plans__figure {
    max-width: 100%;
    margin: 0 auto;
    order: -1;                              /* plan on top, legend below */
  }
  .plans__legend { padding-top: 0; }
}
@media (max-width: 760px) {
  .plans__head {
    grid-template-columns: 1fr;
  }
  .plans__tabs {
    align-self: start;
  }
  .plans { padding: 3.5rem 1.25rem; }
  .plans__tab { padding: .65rem .8rem; font-size: 10px; }
  .plans__marker { font-size: 11px; }
}

/* ---------- gallery (Pinterest-style masonry via CSS columns) ---------- */
.gallery { padding: 6rem 2rem; }
.gallery__head {
  max-width: var(--max);
  margin: 0 auto 3rem;
}
.gallery__head h2 { margin-top: .5rem; }

.gallery__grid {
  max-width: var(--max);
  margin: 0 auto;
  column-count: 3;
  column-gap: 1rem;
}
.gallery__grid img {
  width: 100%;
  margin-bottom: 1rem;
  break-inside: avoid;
  background: var(--bg-alt);
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .6s ease;
  filter: saturate(1);
}
.gallery__grid img:hover {
  transform: scale(.99);
  filter: saturate(1.1);
}

@media (max-width: 900px) {
  .gallery__grid { column-count: 2; }
  .gallery { padding: 3rem 1.25rem; }
}
@media (max-width: 520px) {
  .gallery__grid { column-count: 1; }
}

/* ---------- location / map ---------- */

/* Give all in-page anchor targets some breathing room from the top of the
   viewport so the fixed nav doesn't cover their first line of content. */
:where(#location, #gallery, #plans, #features, #contact) {
  scroll-margin-top: 20px;
}
.location {
  max-width: var(--max);
  margin: 0 auto;
  padding: 6rem 2rem;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr);
  gap: 4rem;
  align-items: center;
}
.location__copy h2 { margin: .5rem 0 1.5rem; }
.location__copy p { margin-bottom: 1.5rem; }
.location__copy address {
  font-style: normal;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 1.25rem;
}
.link-arrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

.location__map {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
  overflow: hidden;
}
.location__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(.3) contrast(1.05);
}

/* ---- SVG neighborhood map ----
   When --svg is active, the section breaks out of the normal 2-col
   copy|map layout into:
     row 1 = copy block (full width)
     row 2 = legend (left) + map (right)
*/
section.location.location--svg {
  display: block;                 /* abandon parent grid; we stack rows */
  max-width: var(--max);
  margin: 0 auto;
  padding: 6rem 2rem;
}
section.location.location--svg .location__copy {
  max-width: 540px;
  margin-bottom: 3rem;
}
.location__map--svg {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 2.5rem;
  align-items: start;
  background: transparent;
  aspect-ratio: auto;
  overflow: visible;
}
.location__map-figure {
  position: relative;
  margin: 0;
  width: 100%;
  background: var(--bg-alt);
  /* aspect-ratio is set inline by PHP based on the active viewBox so the
     figure shape matches the SVG content without letterboxing. Fallback
     below applies only if no inline value is provided. */
  aspect-ratio: 340 / 174;
  overflow: hidden;
  cursor: grab;
  touch-action: none;             /* let our drag handlers manage pan/zoom on touch */
}
.location__map-figure.is-panning { cursor: grabbing; }
/* When edit mode is active, the figure shouldn't show grab cursor — pins
   are the draggable thing, not the canvas. */
body.is-editing .location__map-figure { cursor: default; }
.location__map-figure svg {
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
}

/* ---- Zoom controls (top-right of the map figure) ---- */
.location__map-zoom {
  position: absolute;
  top: .75rem;
  right: .75rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  z-index: 3;
}
.location__map-zoom-btn {
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .15s ease;
}
.location__map-zoom-btn:hover {
  background: var(--bg-alt);
}
.location__map-zoom-btn:active {
  transform: translateY(1px);
}
@media (max-width: 900px) {
  .location__map-zoom-btn { width: 28px; height: 28px; font-size: 14px; }
}
.location__map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--bg);
  background: var(--accent);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px var(--bg-alt);
  user-select: none;
  cursor: default;
  z-index: 2;
}
body.is-editing .location__map-pin {
  cursor: grab;
}
body.is-editing .location__map-pin.is-dragging {
  cursor: grabbing;
  opacity: .85;
}

/* ---- map legend (left column, vertical list like the Huron) ---- */
.location__map-legend ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.location__map-legend li {
  display: grid;
  grid-template-columns: 2.5ch 1fr;
  align-items: baseline;
  gap: .75rem;
  padding: .55rem 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  font-size: .95rem;
}
.location__map-legend li:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.location__map-legend li .num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  text-align: right;
}
.location__map-legend li .label {
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .location { grid-template-columns: 1fr; padding: 3rem 1.25rem; gap: 2rem; }
  .location__map--svg {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .location__map-figure {
    order: -1;                              /* map on top, legend below on mobile */
  }
  .location__map-pin {
    width: 18px;
    height: 18px;
    font-size: 9px;
  }
}

/* ---------- closing image ---------- */
.closer {
  width: 100%;
  height: 80vh;
  min-height: 480px;
  overflow: hidden;
}
.closer img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------- contact / footer ---------- */
.contact {
  background: var(--ink);
  color: var(--bg);
  padding: 7rem 2rem 3rem;
}
.contact__inner {
  max-width: var(--max);
  margin: 0 auto;
}
.contact .eyebrow { color: var(--accent); }
.contact h2 {
  color: var(--bg);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-weight: 320;
  margin-bottom: 4rem;
}

.contact__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem 4rem;
  padding: 2.5rem 0;
  border-top: 1px solid rgba(241, 235, 223, .2);
  border-bottom: 1px solid rgba(241, 235, 223, .2);
  align-items: center;
}
.contact__role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(241, 235, 223, .55);
  margin-bottom: .5rem;
}
.contact__person {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 360;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  letter-spacing: -.02em;
  line-height: 1;
}
.contact__lines {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-size: 1.15rem;
}
.contact__lines a { border-bottom: 1px solid rgba(241, 235, 223, .25); padding-bottom: 4px; align-self: flex-start; }

.colophon {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-top: 4rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(241, 235, 223, .55);
}
.colophon a { color: rgba(241, 235, 223, .85); border-bottom: 1px solid rgba(241, 235, 223, .25); padding-bottom: 2px; }

@media (max-width: 760px) {
  .contact { padding: 4rem 1.25rem 2rem; }
  .contact__card { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 0; }
  .closer { height: 55vh; min-height: 320px; }
}