/* Elev8 Concrete Constructions — one-page site.
   Brand: black, white and the logo's mid grey. No other colours. */

:root {
  --ink: #0b0b0c;
  --ink-soft: #1a1a1c;
  --line-dark: #2a2a2c;
  --paper: #f5f4f1;
  --white: #ffffff;
  --grey: #8c8c8c;
  --grey-light: #e3e1dc;
  --grey-text: #5c5c5c;
  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.lightbox-open { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }
a[href^="tel:"] { white-space: nowrap; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--white); color: var(--ink); padding: 12px 16px; z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

:focus-visible { outline: 3px solid var(--grey); outline-offset: 3px; }

/* ---------- Type ---------- */

h1, h2, h3 { margin: 0; font-weight: 900; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6.2vw, 4.75rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 16ch; }
h3 { font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0; }

.eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--grey);
}
.eyebrow.dark { color: var(--grey-text); }
/* The grey bar comes from the logo. */
.bar { display: inline-block; width: 54px; height: 7px; background: var(--grey); flex: none; }

.lede { font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.45; color: #cfcfcf; max-width: 34ch; }
.lede.dark-text { color: var(--grey-text); max-width: 46ch; margin-top: 22px; }
.section.dark h2 + .lede { margin-top: 22px; max-width: 46ch; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px;
  font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; text-decoration: none;
  border: 2px solid transparent; border-radius: 999px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover { background: var(--grey-light); }
.btn-ghost { border-color: var(--white); color: var(--white); }
.btn-ghost:hover { background: var(--white); color: var(--ink); }

/* ---------- Header ---------- */

.site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); color: var(--white); }
.header-row { display: flex; align-items: center; gap: 28px; min-height: 84px; }
/* The logo is the biggest thing in the top bar, centred on the same line as the email and phone buttons.
   It pushes everything else to the right, and gives way on narrow phones so the two buttons always fit. */
.logo { flex: 0 1 auto; min-width: 0; margin-right: auto; }
.logo img { display: block; width: 132px; max-width: 100%; height: auto; }
.nav { display: flex; gap: 28px; }
.nav a { font-size: 0.95rem; font-weight: 700; text-decoration: none; color: #d6d6d6; }
.nav a:hover { color: var(--white); }
/* The phone button: a white pill with the number and a round phone icon */
.header-call {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  height: 46px; padding: 0 20px 0 6px;
  border-radius: 999px; background: var(--white); color: var(--ink);
  font-weight: 800; letter-spacing: -0.01em; text-decoration: none;
  transition: background-color .15s ease;
}
.header-call:hover { background: var(--grey-light); }
.call-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--white); }
/* Round "email your plans" button, beside the phone button on every screen size.
   These two are the only call and email buttons at the top of the page. */
.header-plans {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid #55555a; color: var(--white);
  transition: background-color .15s ease, color .15s ease;
}
.header-plans:hover { background: var(--white); color: var(--ink); }
.header-plans + .header-call { margin-left: -16px; }   /* the two buttons sit closer together than the menu links */

/* ---------- Hero ---------- */

/* The top of the page: one heading and the About us paragraph, sitting on a wide job photo.
   The photo is darkened, most on the left where the words are, so they read easily.
   No buttons and no second heading here: Michael's choices, 13 Oct 2026. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink); color: var(--white);
  padding: clamp(60px, 8.5vw, 124px) 0 clamp(56px, 8vw, 116px);
}
.hero-bg, .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-bg { z-index: -2; }
.hero-bg img { object-fit: cover; object-position: center; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(11, 11, 12, .94) 0%, rgba(11, 11, 12, .86) 32%, rgba(11, 11, 12, .5) 66%, rgba(11, 11, 12, .3) 100%);
}
.hero-copy h1 { max-width: 11ch; }
.hero-copy .about-text { margin-top: clamp(18px, 2.4vw, 30px); max-width: 46ch; color: #e6e6e6; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }   /* the button row on the "page not found" page */

/* The "Slab poured for The Block" badge, on that photo in the gallery and in the photo viewer.
   Plain type in the site's own style. */
.credit {
  position: absolute; right: 22px; bottom: 22px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 18px 13px 16px;
  background: rgba(11, 11, 12, .88); color: var(--white);
  border-left: 7px solid var(--grey);
}
.credit-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #b9b9b9; }
.credit-name { font-size: 1.35rem; font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; line-height: 1; }
.credit[hidden] { display: none; }

/* ---------- The elev8. mark on every photo ---------- */

.marked { position: relative; }
.marked::after {
  content: "";
  position: absolute; left: 5%; bottom: 5%;
  width: 26%; max-width: 128px; aspect-ratio: 2762 / 797;
  background: url("assets/brand/brandmark-white.png") left bottom / contain no-repeat;
  opacity: .78;
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .6));
  pointer-events: none;
}
.tile-feature.marked::after { left: 22px; bottom: 22px; width: 20%; max-width: 170px; }

/* ---------- About us, straight under the headline ---------- */

.about-text { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; color: #d2d2d2; max-width: 58ch; }

/* ---------- Sections ---------- */

.section { padding: clamp(64px, 9vw, 120px) 0; }
.section.dark { background: var(--ink); color: var(--white); }
.section.grey { background: var(--grey-light); }

.num { display: block; margin-bottom: 14px; font-size: 0.85rem; font-weight: 900; letter-spacing: 0.08em; color: var(--grey); }

/* What we do: a photo for each service */
.services {
  list-style: none; margin: clamp(36px, 5vw, 64px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 52px) clamp(16px, 2.4vw, 28px);
}
.service-photo { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 20px; background: var(--grey-light); }
.service-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 66%; }
.service .num { margin-bottom: 8px; }
.service p { margin-top: 8px; color: var(--grey-text); }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: clamp(36px, 5vw, 64px); }
.tile { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--ink-soft); text-decoration: none; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tile:hover img { transform: scale(1.04); }
/* The Block slab: the first photo, twice the width and height of the rest, carrying its badge.
   Its picture is pinned to the tile so the rows beside it set its height. */
.tile-feature { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.tile-feature img { position: absolute; inset: 0; }
.tile-cta { display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; background: var(--white); color: var(--ink); }
.tile-cta strong { font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; }
.tile-cta em { margin-top: 10px; font-style: normal; font-weight: 700; color: var(--grey-text); }
.tile-cta:hover { background: var(--grey-light); }
/* On a light section the "send us the plans" tile flips to black */
.section:not(.dark) .tile-cta { background: var(--ink); color: var(--white); }
.section:not(.dark) .tile-cta em { color: #b9b9b9; }
.section:not(.dark) .tile-cta:hover { background: var(--ink-soft); }

/* Photo viewer that opens when a gallery photo is tapped */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; justify-items: center; gap: 10px;
  padding: 68px 12px 20px;
  background: rgba(8, 8, 9, .95);
}
.lightbox[hidden] { display: none; }
/* The photo sits in a frame that shrinks to fit it, so a badge can sit on its corner */
.lightbox-figure { grid-column: 2; position: relative; display: inline-block; max-width: 100%; margin: 0; }
.lightbox img { display: block; max-width: 100%; max-height: calc(100vh - 100px); object-fit: contain; }
.lightbox button {
  min-width: 48px; min-height: 48px;
  background: none; border: 2px solid var(--white); color: var(--white);
  font: inherit; font-weight: 800; cursor: pointer;
}
.lightbox button:hover { background: var(--white); color: var(--ink); }
.lightbox-close { position: absolute; top: 12px; right: 12px; padding: 0 18px; }
.lightbox-prev { grid-column: 1; }
.lightbox-next { grid-column: 3; }

/* Google reviews band. The star yellow is Google's, the one colour outside the brand. */
.reviews { background: var(--ink); color: var(--white); padding: clamp(52px, 7vw, 100px) 0; }
.reviews-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; }
.stars { color: #fbbc04; font-size: 1.7rem; letter-spacing: 0.14em; line-height: 1; }
.reviews-big { margin-top: 14px; font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 900; letter-spacing: -0.035em; line-height: 1.02; }
.reviews-text { margin-top: 14px; max-width: 44ch; color: #cfcfcf; font-size: 1.05rem; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: clamp(36px, 5vw, 64px); }
.step { padding-top: 22px; border-top: 7px solid var(--grey); }
.step .num { font-size: 2.6rem; letter-spacing: -0.04em; color: var(--ink); margin-bottom: 10px; line-height: 1; }
.step p { margin-top: 10px; color: var(--grey-text); }

/* Why */
.two-col { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 90px); align-items: start; }
.why-list { list-style: none; margin: 0; padding: 0; }
.why-list li { padding: 24px 0; border-top: 2px solid var(--ink); }
.why-list li:last-child { border-bottom: 2px solid var(--ink); }
.why-list p { margin-top: 8px; color: var(--grey-text); }

/* Where we work */
.list-title { font-size: 1rem; letter-spacing: 0; font-weight: 800; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.area-list { list-style: none; margin: 0; padding: 18px 0 0; columns: 3; column-gap: 24px; }
.area-list li { padding: 5px 0; color: var(--grey-text); break-inside: avoid; }

/* Common questions */
.faq {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(28px, 5vw, 72px);
  margin-top: clamp(36px, 5vw, 64px); border-top: 2px solid var(--ink);
}
.faq > div { padding: 26px 0 28px; border-bottom: 1px solid #c6c3bc; }
.faq p { margin-top: 10px; color: var(--grey-text); }
.faq a { color: var(--ink); font-weight: 700; }

/* A tighter version of a section, used for the questions */
.section.compact { padding: clamp(44px, 6vw, 80px) 0; }
.section.compact h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }

/* Questions that open when tapped. Each row is a question with a round + button. */
.section.compact .faq { display: block; margin-top: 0; border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid #c6c3bc; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 0; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 1.12rem; }
.faq summary:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.faq-icon {
  position: relative; flex: none; width: 34px; height: 34px;
  border: 2px solid var(--ink); border-radius: 50%;
  transition: background-color .15s ease;
}
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 2px; background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform .2s ease, background-color .15s ease;
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
/* Open: the button fills in and the + turns into a − */
.faq details[open] .faq-icon { background: var(--ink); }
.faq details[open] .faq-icon::before, .faq details[open] .faq-icon::after { background: var(--white); }
.faq details[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq details p { margin: 0; padding: 0 52px 22px 0; font-size: 0.99rem; color: var(--grey-text); }

/* Contact */
.contact h2 { max-width: 14ch; }
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: clamp(32px, 5vw, 56px); }
.contact-card {
  display: block; padding: 28px; text-decoration: none;
  background: var(--white); color: var(--ink);
  transition: background-color .15s ease;
}
.contact-card:hover { background: var(--grey-light); }
.contact-card .label { display: block; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-text); }
.contact-card .value { display: block; margin-top: 10px; font-size: clamp(1.35rem, 3vw, 2.1rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; overflow-wrap: anywhere; }
.area { margin-top: 28px; color: #bdbdbd; }

/* Social links */
.social { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.social-label { color: #bdbdbd; }
.social a { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; color: var(--white); }
.social a:hover { color: var(--grey-light); text-decoration: underline; }
.social svg { flex: none; }
.contact .social { margin-top: 22px; }

/* Footer */
.site-footer { background: var(--ink); color: #bdbdbd; border-top: 1px solid var(--line-dark); padding: 36px 0 44px; font-size: 0.92rem; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 56px; }
.footer-row img { height: 44px; width: auto; }
.footer-row a { text-decoration: none; }
.footer-row a:hover { color: var(--white); }

/* ---------- Smaller screens ---------- */

@media (max-width: 920px) {
  .nav { display: none; }
  .header-plans + .header-call { margin-left: 0; }
  .header-row { gap: 12px; }
  .services { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  /* Two photos across: The Block slab takes a full row of its own, cropped to the slab */
  .tile-feature { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .tile-feature img { object-position: center 64%; }
  .two-col { grid-template-columns: 1fr; }
  /* The words run the full width here, so the photo is darkened evenly */
  .hero::after { background: linear-gradient(180deg, rgba(11, 11, 12, .66) 0%, rgba(11, 11, 12, .8) 100%); }
  .area-list { columns: 2; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .header-row { min-height: 72px; gap: 10px; }
  .logo img { width: 116px; }
  .header-call { height: 42px; padding: 0 16px 0 5px; gap: 8px; font-size: 0.95rem; }
  .call-icon { width: 32px; height: 32px; }
  .header-plans { width: 42px; height: 42px; }
  .services { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .actions .btn { flex: 1 1 100%; }
  .credit { right: 12px; bottom: 12px; padding: 9px 13px 10px 12px; border-left-width: 5px; }
  .credit-name { font-size: 1.1rem; }
  .tile-feature.marked::after { left: 14px; bottom: 14px; width: 24%; }
  .lightbox { padding: 64px 6px 16px; gap: 4px; }
  .lightbox button { min-width: 40px; }
}

/* Very narrow phones: drop the round phone icon so the logo, the email button and the number still fit. */
@media (max-width: 350px) {
  .call-icon { display: none; }
  .header-call { padding: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tile img, .btn, .contact-card, .faq-icon, .faq-icon::before, .faq-icon::after { transition: none; }
}