/* Continuous-gallery version (flow.html): one photo wall with the sections set into it.
   flow.js positions everything; these rules style the pieces. */
.flow {
  --gap: clamp(8px, 0.9vw, 16px);
  background: var(--ink);
  padding: 0 var(--gap) var(--gap);
}
.flow-head { text-align: center; padding: clamp(36px, 5vh, 64px) 0 clamp(18px, 2.6vh, 30px); }
.flow-wall { position: relative; }
.flow-wall.is-laid > * { position: absolute; margin: 0; }
.flow-wall .g-item { display: block; overflow: hidden; }
.flow-wall .g-item img { width: 100%; height: 100%; object-fit: cover; }

/* A section block: text (2 columns wide) + its one large photo (1 column) */
.f-tile { display: contents; }
.f-tile > * { position: absolute; }
.f-text {
  background: var(--ink-2);
  padding: clamp(32px, 4vw, 72px);
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
  min-height: 0 !important;
}
.f-text.offer-alt { background: var(--ink-3); }
.f-text > .container { max-width: none; width: 100%; padding: 0; margin: 0; }
.f-text .about-copy { min-height: 0; padding: 0 !important; }
.f-text .offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3vw, 56px); align-items: center; }
.f-text h2 { font-size: clamp(2.2rem, 3.4vw, 3.6rem); }
.f-tile[id] { scroll-margin-top: 80px; }
.f-text { scroll-margin-top: 80px; }

/* Wall is one long block, not one screen per section */
@media (min-width: 901px) and (min-height: 560px) {
  main > section.flow { min-height: 0; display: block; padding: 0 var(--gap) var(--gap); }
}
/* Phones / small tablets: photo above text, full width */
@media (max-width: 900px) {
  .f-text { padding: 32px 22px; }
  .f-text .offer-grid { grid-template-columns: 1fr; }
}

/* About block: let the text use the full width of its block */
.f-text.about .body, .f-text.about .lede, .f-text.about .about-copy > *, .f-text.about .services-strip { max-width: none; }

/* Contact: dark, to match the wall above it */
.contact { background: var(--ink-2); color: var(--cream); }
.contact h2 { color: var(--cream); }
.contact-sub, .form-note { color: var(--text-dim, #a59a8e); }
.contact .field label { color: #b8a898; }
.contact .field input, .contact .field select { color: var(--cream); border-bottom-color: rgba(245, 236, 224, 0.35); }
.contact .field select { background-image: linear-gradient(45deg, transparent 50%, var(--cream) 50%), linear-gradient(135deg, var(--cream) 50%, transparent 50%); }
.contact .field select option { color: var(--ink); }
.contact .field input[type="date"] { color-scheme: dark; }
.contact .field textarea { color: var(--cream); background: rgba(255, 255, 255, 0.05); border-color: rgba(245, 236, 224, 0.3); }
.contact .field textarea::placeholder { color: #8d8174; }
.contact .field textarea:focus { background: rgba(255, 255, 255, 0.08); border-color: var(--copper); }
.contact .field input:focus, .contact .field select:focus { border-bottom-color: var(--copper); }
.contact .btn-dark { color: var(--cream); border-color: var(--copper); }
.contact .btn-dark:hover { background: var(--copper); color: var(--ink); }

/* No divider line under the landing hero */
.hero { border-bottom: 0; }