/* ==========================================================================
   KIRKGATE HANDYMAN
   Bone and workwear navy: a still photo wall behind the hero, bento services,
   recent jobs, priced metric columns, team, FAQ.
   ========================================================================== */

:root {
  --background: #F1F1EE;
  --card: #FFFFFF;
  --foreground: #16181C;
  --primary-cta: #1F3A5F;
  --primary-cta-text: #FFFFFF;
  --secondary-cta: #E3E4DF;
  --secondary-cta-text: #16181C;
  --accent: #C2721C;
  --background-accent: #9FB4CE;
  --radius: 0.75rem;
  --content-width: 87.5vw;
  --section-head-size: var(--text-6xl);
  --nav-ink: #16181C;
  --nav-ink-scrolled: #16181C;
  --font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Cabinet Grotesk', 'Satoshi', -apple-system, sans-serif;
}

@media (width >= 1536px) { :root { --section-head-size: var(--text-7xl); } }

.card {
  background: linear-gradient(to bottom right,
    color-mix(in srgb, var(--card) 95%, transparent),
    color-mix(in srgb, var(--card) 70%, transparent));
  border-color: color-mix(in srgb, var(--foreground) 10%, transparent);
}

/* --- Hero with vertical marquee columns ----------------------------------- */

.hero {
  position: relative;
  height: 100svh;
  min-height: 42rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-bottom: 5rem;
}

.hero__rail {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding-inline: 1rem;
  opacity: 0.75;
}

.hero__col { flex: 1; max-width: 22rem; overflow: hidden; }

/* The template scrolled these four columns past each other forever. Nothing on
   this site moves on its own, so the wall is composed once and left still,
   each column offset so it reads as a considered grid rather than a stalled
   animation. */
.hero__col-track {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hero__col:nth-child(1) .hero__col-track { transform: translateY(-6%); }
.hero__col:nth-child(2) .hero__col-track { transform: translateY(-22%); }
.hero__col:nth-child(3) .hero__col-track { transform: translateY(-13%); }
.hero__col:nth-child(4) .hero__col-track { transform: translateY(-28%); }

.hero__col img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

@keyframes rail-up { to { transform: translateY(-50%); } }

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(241,241,238,0.72) 0%, rgba(241,241,238,0.94) 66%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  text-align: center;
}

.hero__title {
  max-width: 18ch;
  font-size: var(--text-8xl);
  line-height: 1.03;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.hero__lede { max-width: 50ch; font-size: var(--text-xl); line-height: 1.45; opacity: 0.75; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 0.5rem; }

@media (width <= 768px) {
  .hero { margin-bottom: 3rem; }
  .hero__title { font-size: var(--text-7xl); max-width: 14ch; }
  .hero__rail { opacity: 0.28; }
}

/* --- Bento ---------------------------------------------------------------- */

.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.bento__cell { padding: 2rem; border-radius: var(--radius); }
.bento__cell h3 { font-size: var(--text-3xl); margin-bottom: 0.5rem; }
.bento__cell p { font-size: var(--text-lg); line-height: 1.45; opacity: 0.8; }
.bento__cell--wide { grid-column: span 2; }

.timeline { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 1.25rem; }

.timeline li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  font-size: var(--text-lg);
}

.timeline li:last-child { border-bottom: 0; padding-bottom: 0; }
.timeline span { opacity: 0.55; font-size: var(--text-base); }

@media (width <= 900px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento__cell--wide { grid-column: auto; }
}

/* --- Work ------------------------------------------------------------------ */

.work-card { padding: 1rem; border-radius: var(--radius); }

.work-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius) - 0.5rem);
  transition: transform 0.5s ease-out;
}

.work-card:hover img { transform: scale(1.04); }
.work-card__body { padding: 1.25rem 0.5rem 0.4rem; }
.work-card__body h3 { font-size: var(--text-3xl); margin-bottom: 0.2rem; }
.work-card__body p { font-size: var(--text-lg); opacity: 0.65; }

/* --- Metrics --------------------------------------------------------------- */

.metric { padding: 2rem; border-radius: var(--radius); }
.metric strong { display: block; font-size: var(--text-7xl); font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.metric > p { font-size: var(--text-2xl); margin: 0.5rem 0 1.5rem; }
.metric ul { display: flex; flex-direction: column; gap: 0.6rem; }
.metric li { font-size: var(--text-lg); opacity: 0.7; }

/* --- Contact ---------------------------------------------------------------- */

.cta-band { display: flex; flex-direction: column; align-items: center; gap: 1.15rem; text-align: center; padding-block: 5rem; }
.cta-band h2 { max-width: 20ch; font-size: var(--text-7xl); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.cta-band p { max-width: 46ch; font-size: var(--text-lg); line-height: 1.5; opacity: 0.75; }

/* --- Footer ------------------------------------------------------------------ */

.site-footer { border-radius: var(--radius) var(--radius) 0 0; background: var(--card); color: var(--foreground); padding-block: 4rem; border-top: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent); }
.footer-top { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: start; }
.footer-brand { font-size: var(--text-5xl); font-weight: 700; letter-spacing: -0.03em; }
.footer-nav { display: grid; grid-template-columns: repeat(3, minmax(9rem, auto)); gap: 2.5rem; }
.footer-nav h3 { font-size: var(--text-base); font-weight: 500; opacity: 0.5; margin-bottom: 1rem; }
.footer-nav ul { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-nav a { font-size: var(--text-lg); opacity: 0.85; transition: opacity 0.2s; }
.footer-nav a:hover { opacity: 1; }

.footer-legal-bar {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  font-size: var(--text-base); opacity: 0.55;
}
.footer-legal-bar div { display: flex; gap: 1.25rem; }

@media (width <= 768px) {
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}


/* On a phone a full viewport hero with a faint photo wall behind it reads as
   an empty screen. The wall comes up in strength, the hero stops trying to
   fill the viewport, and the copy starts nearer the top. */
@media (width <= 768px) {
  .hero { height: auto; min-height: 0; padding-block: 7rem 3.5rem; }
  .hero__rail { opacity: 0.95; }
  .hero__col { max-width: none; }
  .navbar__actions .btn { padding-inline: 0.9rem; font-size: var(--text-sm); }
}

/* Footer labels and legal line at full strength (were 3.4 to 3.9:1). */
.footer-nav h3,
.footer-legal-bar { opacity: 1; }