/* ========= TEXSIX RANCH — the Atlas design system in ranch colours =========
   styles.css and home-extras.css are Atlas's (see the note atop home-extras.css). This file loads last
   and only re-points the brand tokens and adds the photo-led layouts. */
:root {
  --atlas-red: #B0592A;        /* clay — the accent (Atlas red's job) */
  --atlas-red-deep: #8C4119;
  --atlas-blue: #6B4128;
  --atlas-blue-deep: #4A2A1A;  /* TX6 logo brown (Atlas navy's job) */
  --atlas-blue-ink: #2B170D;
  --bg: #FAF7F0;
  --bg-soft: #F2ECE0;
  --surface: #FFFFFF;
  --ink: #1F1812;
  --ink-2: #4B4036;
  --ink-3: #7C7064;
  --line: #E7DFD1;
  --line-strong: #D3C7B4;
}

/* Nav / footer brand: the TX6 stamp beside a typeset wordmark */
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo img { height: 40px; width: auto; }
.brand-word { font-family: var(--font-serif); font-size: 24px; letter-spacing: -0.01em; color: var(--ink); line-height: 1; white-space: nowrap; }
.brand-word em { font-style: italic; color: var(--signal); }

/* Hero: the photo under a warm brown wash instead of Atlas navy */
.hero-visual-tx .hero-bg-grad {
  background:
    linear-gradient(105deg, rgba(43,23,13,0.92) 0%, rgba(43,23,13,0.78) 42%, rgba(43,23,13,0.25) 78%, rgba(43,23,13,0.10) 100%),
    linear-gradient(0deg, rgba(43,23,13,0.55) 0%, transparent 50%);
}
.hero-visual-tx .hero-bg img { object-position: center 55%; }
/* Atlas greys the hero's italic phrase (var(--ink-2)); on the brown wash it vanishes. */
.hero-visual-tx .display .serif { color: #F1E3CF; }
.dispatch-strip { background: var(--atlas-blue-ink); }
.accuracy-photo { box-shadow: 0 30px 60px rgba(43,23,13,0.18); }
.accuracy-points strong { color: var(--atlas-blue-deep); }

/* Offer cards: Atlas service cards with a photo on top */
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.offer-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, transform .2s; }
.offer-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.offer-card .ph { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-soft); }
.offer-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.offer-card .body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.offer-card .svc-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-3); margin-bottom: 8px; }
.offer-card h3 { font-size: 24px; font-weight: 500; letter-spacing: -0.015em; margin: 0 0 10px; }
.offer-card h3 .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.offer-card p { color: var(--ink-2); font-size: 15px; line-height: 1.55; margin: 0 0 18px; flex: 1; }
.offer-card .svc-link { font-weight: 600; font-size: 14px; color: var(--ink); display: inline-flex; gap: 6px; }
.offer-card .svc-link .arr { transition: transform .2s; }
.offer-card:hover .svc-link .arr { transform: translateX(3px); color: var(--signal); }

/* Photo rows on the activity pages: picture beside its story, alternating */
.feature-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; padding: 64px 0; border-bottom: 1px solid var(--line); }
.feature-row:last-child { border-bottom: none; }
.feature-row.flip .feature-photo { order: 2; }
.feature-photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-soft); }
.feature-photo img { width: 100%; height: 100%; object-fit: cover; }
.feature-copy .svc-num-lg { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--ink-3); margin-bottom: 8px; }
.feature-copy h2 { font-size: 44px; font-weight: 500; letter-spacing: -0.022em; line-height: 1.05; margin: 0 0 18px; }
.feature-copy h2 .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.feature-copy p { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin: 0 0 16px; }

/* Photo wall (gallery page and the home preview) */
.photo-wall { columns: 3 260px; column-gap: 14px; }
.photo-wall figure { margin: 0 0 14px; break-inside: avoid; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-soft); }
.photo-wall img { width: 100%; height: auto; }
.photo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.photo-strip figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1; background: var(--bg-soft); }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; }

/* Page photo banner under a subhero */
.page-banner { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 21 / 8; margin-bottom: 16px; background: var(--bg-soft); }
.page-banner img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 960px) {
  .offer-grid { grid-template-columns: 1fr; }
  .feature-row, .feature-row.flip { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .feature-row.flip .feature-photo { order: 0; }
  .feature-copy h2 { font-size: 32px; }
  .photo-strip { grid-template-columns: repeat(2, 1fr); }
  .page-banner { aspect-ratio: 4 / 3; }
  .brand-word { font-size: 20px; }
}