/* ==========================================================================
   Kate's Kuts — homepage sections
   ========================================================================== */

/* ---------- Hero: split layout, copy left / arched photo right ---------- */
.hero {
  position: relative;
  padding: calc(var(--head-h) + clamp(40px, 7vw, 84px)) 0 clamp(56px, 8vw, 104px);
  background:
    radial-gradient(820px 480px at 92% 0%, var(--rose-wash) 0%, transparent 62%),
    radial-gradient(600px 420px at -8% 110%, var(--bg-alt) 0%, transparent 60%),
    var(--bg);
  overflow: hidden;
}
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { max-width: 13ch; }
.hero h1 em { font-style: italic; color: var(--rose); }
.hero .lead { max-width: 50ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-perks { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 34px; font-size: .94rem; color: var(--ink-soft); }
.hero-perks span { display: inline-flex; align-items: center; gap: 8px; }
.hero-perks svg { width: 16px; height: 16px; color: var(--sage); flex: none; }

.hero-media { position: relative; }
.hero-media .arch-frame { aspect-ratio: 4 / 5; max-width: 470px; margin-left: auto; }
.hero-badge {
  position: absolute; left: clamp(-10px, -2vw, -28px); bottom: 36px;
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 16px 22px;
  display: flex; align-items: center; gap: 14px;
}
.hero-badge .num { font-family: var(--font-display); font-size: 1.7rem; color: var(--rose-deep); line-height: 1; }
.hero-badge .lbl { font-size: .82rem; color: var(--ink-soft); line-height: 1.35; }

/* ---------- Trust strip ---------- */
.trust-strip { background: var(--ink); color: #E9DFD8; padding: 26px 0; }
.trust-strip .wrap { display: flex; flex-wrap: wrap; gap: clamp(18px, 4vw, 64px); align-items: center; justify-content: center; }
.trust-strip .t { display: flex; align-items: center; gap: 12px; font-size: .96rem; }
.trust-strip .t b { color: #fff; font-size: 1.18rem; font-family: var(--font-display); font-weight: 400; }
.trust-strip svg { width: 20px; height: 20px; color: var(--rose-soft); flex: none; }

/* ---------- Services cards ---------- */
.svc-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.svc-card .pic { aspect-ratio: 4 / 3; overflow: hidden; }
.svc-card .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.svc-card:hover .pic img { transform: scale(1.05); }
.svc-card .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.svc-card .from { margin-top: auto; padding-top: 10px; font-weight: 600; color: var(--rose-deep); font-size: .95rem; }
.svc-card .go { font-weight: 600; font-size: .94rem; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Sensory callout ---------- */
.sensory { background: linear-gradient(135deg, var(--rose-wash) 0%, var(--bg-alt) 100%); }
.sensory .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.sensory .arch-frame { aspect-ratio: 4 / 5; max-width: 420px; }
.sensory .pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border-radius: 999px; padding: 8px 18px;
  font-weight: 600; font-size: .88rem; color: var(--sage); box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
}

/* ---------- Team preview ---------- */
.team-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 28px); }
.team-tile { text-align: center; }
.team-tile .arch-frame { aspect-ratio: 3 / 4; margin-bottom: 14px; box-shadow: var(--shadow-sm); }
.team-tile h4 { margin-bottom: 2px; }
.team-tile .role { font-size: .88rem; color: var(--ink-soft); }

/* ---------- Products band ---------- */
.brands-band { display: flex; flex-wrap: wrap; gap: clamp(20px, 5vw, 72px); align-items: center; justify-content: center; }
.brands-band .b {
  font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  color: var(--ink-soft); letter-spacing: .03em;
}

/* ---------- Visit / map CTA ---------- */
.visit .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.visit iframe { width: 100%; height: 100%; min-height: 380px; border: 0; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td { padding: 9px 0; border-bottom: 1px dashed var(--line); }
.hours-table td:last-child { text-align: right; font-weight: 600; }
.hours-table tr.today td { color: var(--rose-deep); }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .hero .wrap, .sensory .wrap, .visit .wrap { grid-template-columns: 1fr; }
  .hero-media .arch-frame { margin: 0 auto; }
  .hero-badge { left: 8px; }
  .team-strip { grid-template-columns: repeat(2, 1fr); }
  .sensory .arch-frame { margin: 0 auto; }
}
@media (max-width: 560px) {
  .hero-actions .btn { width: 100%; }
}