/* ============================================================
   DAWSONS WEBSITE — UI kit layout styles
   Composes the design-system tokens. Site-specific layout only.
   ============================================================ */

.site { background: var(--color-bg); min-height: 100vh; }

/* --- Header ------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-bg-dark);
  border-bottom: 1px solid var(--color-border-dark);
}
.site-header .bar { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 24px; }
.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm); color: var(--steel-300);
  text-decoration: none; letter-spacing: 0.01em;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav a:hover, .site-nav a.active { color: var(--white); }
.site-nav a.active { color: var(--white); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.header-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--white); font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-body-sm); text-decoration: none; }
.header-phone .lbl { color: var(--steel-400); }

/* top utility strip */
.utility-strip {
  background: var(--black);
  border-bottom: 1px solid var(--color-border-dark);
  font-size: var(--fs-caption);
}
.utility-strip .row { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.utility-strip .left { display: flex; gap: 22px; color: var(--steel-400); }
.utility-strip .left span { display: inline-flex; align-items: center; gap: 7px; }
.utility-strip .right { display: flex; gap: 16px; align-items: center; color: var(--steel-400); }

/* --- Hero --------------------------------------------------------- */
.hero { position: relative; background: var(--color-bg-dark); color: var(--white); overflow: hidden; }
.blueprint {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(var(--color-border-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border-dark) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(120% 100% at 80% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(120% 100% at 80% 0%, #000 0%, transparent 70%);
}
.hero-glow { position: absolute; width: 620px; height: 620px; border-radius: 50%; filter: blur(120px); background: rgba(216,30,39,0.22); top: -200px; right: -120px; pointer-events: none; }

/* photo placeholder */
.photo {
  position: relative; overflow: hidden;
  background:
    linear-gradient(135deg, rgba(216,30,39,0.10), transparent 60%),
    linear-gradient(180deg, var(--steel-700), var(--steel-900));
  display: flex; align-items: center; justify-content: center;
}
.photo .ph-label {
  position: absolute; bottom: 14px; left: 16px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.6);
  display: inline-flex; align-items: center; gap: 7px;
}
.photo .ph-ico { color: rgba(255,255,255,0.28); }

/* --- Sections ----------------------------------------------------- */
.section { padding-block: var(--section-y); }
.section.dark { background: var(--color-bg-dark); color: var(--white); }
.section.subtle { background: var(--color-bg-subtle); }

/* trust / accreditation strip */
.trust-strip { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; justify-content: center; }
.accred { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: 0.04em; color: var(--steel-500); font-size: var(--fs-body-sm); text-transform: uppercase; }

/* grids */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* footer */
.site-footer { background: var(--black); color: var(--steel-400); padding-top: var(--space-10); }
.site-footer h4 { color: var(--white); font-size: var(--fs-body); font-weight: var(--fw-bold); margin-bottom: 16px; }
.site-footer a { color: var(--steel-400); text-decoration: none; font-size: var(--fs-body-sm); display: block; padding: 5px 0; transition: color var(--dur-fast) var(--ease-out); }
.site-footer a:hover { color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer-bottom { border-top: 1px solid var(--color-border-dark); margin-top: var(--space-9); padding-block: 24px; display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-caption); color: var(--steel-600); }

/* review card */
.review { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.stars { display: inline-flex; gap: 2px; color: var(--amber-500); }
.reviewer { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--steel-200); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--steel-600); font-size: 15px; flex: 0 0 auto; }

/* responsive */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; gap: 32px; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .site-nav { display: none; }
}
@media (max-width: 560px) {
  .grid-3 { grid-template-columns: 1fr; }
  .utility-strip { display: none; }
}