/* Green & Co. - home page. Hero section. */

.hero {
  position: relative;
  min-height: calc(100svh - var(--nav-h, 68px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--gc-black);
  isolation: isolate;
}

.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  z-index: 0;
  filter: saturate(.88) contrast(.96);   /* calms the listing-HDR sky */
  will-change: transform;
}

/* Directional scrim: solid-dark left column for text, photo breathes right. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(105deg,
      rgba(13,13,13,.95) 0%,
      rgba(13,13,13,.88) 24%,
      rgba(13,13,13,.66) 44%,
      rgba(13,13,13,.28) 68%,
      rgba(13,13,13,0) 92%),
    linear-gradient(to top,
      rgba(13,13,13,.6) 0%,
      rgba(13,13,13,0) 42%);
}

/* Main hero message, vertically centered in a defined left column. */
.hero__inner {
  position: relative; z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: clamp(40px, 7vh, 96px);
}
.hero__content { max-width: 600px; }

.hero__eyebrow, .hero__title, .hero__sub { text-shadow: 0 2px 16px rgba(13,13,13,.5); }

.hero__eyebrow {
  color: var(--gc-gold);
  font-size: var(--gc-fs-label);
  letter-spacing: var(--gc-tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 16px;   /* tight to the headline: they read as one group */
}

.hero__title {
  color: var(--gc-text-on-dark);
  font-weight: 500;
  font-size: var(--gc-fs-display);
  line-height: 1.02;          /* monumental caps: tight leading, no descenders */
  letter-spacing: 0.012em;    /* caps want a hair of air, not the lowercase-display negative track */
  max-width: 15ch;
  margin: 0 0 26px;
  text-wrap: balance;
}

.hero__sub {
  color: var(--gc-text-on-dark);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  max-width: 46ch;
  margin: 0 0 36px;
  text-wrap: pretty;          /* kills orphans / short last lines */
  opacity: .92;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__area {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 22px 0 0;
  color: var(--gc-text-on-dark);
  opacity: .82;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  text-shadow: 0 2px 16px rgba(13,13,13,.5);
}
.hero__area-pin { color: var(--gc-gold); flex: none; }

@media (max-width: 700px) {
  .hero__scrim {
    background: linear-gradient(to top,
      rgba(13,13,13,.95) 0%,
      rgba(13,13,13,.80) 38%,
      rgba(13,13,13,.5) 66%,
      rgba(13,13,13,.5) 100%);
  }
  .hero__inner { padding-block: 40px; }
  .hero__title { font-size: clamp(2.3rem, 10vw, 3rem); max-width: 100%; }
  .hero__sub { max-width: 100%; }
  .hero__cta { flex-direction: column; align-items: stretch; }
}

/* Trust strip: quiet credential band bridging hero and services.
   Only honest, confirmable claims live here. */
.trustbar {
  background: var(--gc-charcoal);
  border-block: 1px solid var(--gc-rule-soft);
}
/* Four credentials in a balanced 2x2. The layout max-width (1080) is too tight
   for a comfortable single row of four, so a symmetric grid reads as intentional
   instead of orphaning the 4th item on a lone centered line. */
.trustbar__list {
  display: grid; grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: 15px clamp(30px, 6vw, 60px);
  padding-block: 18px;
}
.trustbar__list li {
  display: flex; align-items: center;
  color: var(--gc-text-on-dark);
  font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 600; opacity: .9;
}
.trustbar__list li::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-right: 10px;
  background: var(--gc-gold); transform: rotate(45deg);
}
/* Phones: one clean centered column. */
@media (max-width: 560px) {
  .trustbar__list { grid-template-columns: 1fr; justify-items: center; gap: 13px; }
}

/* ============================================================
   Services: dark section, editorial numbered index (01-04).
   Continues the hero's dark/gold world. Filled gold numerals,
   off-white Cinzel names, soft charcoal-to-black gradient for
   depth (no invented texture). No photo dependency.
   ============================================================ */
.services {
  background: linear-gradient(180deg, #1b1b1b 0%, var(--gc-black) 58%);
  color: var(--gc-text-on-dark);
  padding-block: var(--gc-section-y);
}
.services__wrap {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
.services__intro { position: sticky; top: calc(var(--nav-h, 68px) + 24px); }
.services__cred {
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--gc-rule);
  color: var(--gc-text-on-dark);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
}
.services__cred span { color: var(--gc-gold); margin: 0 .3em; }

.section-head { margin-bottom: clamp(36px, 5vw, 64px); }
.eyebrow {
  font-size: var(--gc-fs-label);
  letter-spacing: var(--gc-tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 14px;
}
.eyebrow--ink { color: var(--gc-gold-ink); }   /* gold-look as text on light must be gold-ink (4.8:1) */
.section-title {
  font-family: var(--gc-font-serif);
  font-size: var(--gc-fs-h1);
  font-weight: var(--gc-weight-display);
  color: inherit;
  letter-spacing: var(--gc-tracking-heading);
  line-height: 1.08;
  margin: 0;
}
.section-lead {
  margin: 20px 0 0;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 52ch;
  text-wrap: pretty;
}

/* Section-scoped colors (dark = services; light sections set their own). */
.services .eyebrow { color: var(--gc-gold); }          /* on dark, raw gold is AAA (8.1:1) */
.services .section-lead { color: var(--gc-text-muted); }

.svc-list { border-bottom: 1px solid var(--gc-rule); }
.svc {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding-block: clamp(26px, 3.2vw, 38px);
  border-top: 1px solid var(--gc-rule);
}
.svc__num {
  font-family: var(--gc-font-serif);
  font-weight: var(--gc-weight-display);
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  line-height: .9;
  color: var(--gc-gold);
}
.svc__name {
  font-family: var(--gc-font-serif);
  font-weight: var(--gc-weight-display);
  font-size: clamp(1.3rem, 2.1vw, 1.75rem);
  color: var(--gc-text-on-dark);
  line-height: 1.14;
  letter-spacing: .01em;
  margin: 0 0 8px;
  text-wrap: balance;
}
.svc__desc {
  margin: 0;
  color: var(--gc-text-muted);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 62ch;
  text-wrap: pretty;
}

@media (max-width: 820px) {
  .services__wrap { grid-template-columns: 1fr; gap: 36px; }
  .services__intro { position: static; }
}
@media (max-width: 680px) {
  .svc { gap: 16px; align-items: start; }
  .svc__num { font-size: 2.4rem; }
  .svc__desc { max-width: 100%; }
}

/* ============================================================
   Selected Work: dark section carried entirely by real project
   photography (the evidence Services promises). Asymmetric mosaic,
   fixed row height so any image aspect crops clean; quiet gold
   labels name the scope. Photos are the only color here.
   ============================================================ */
.work {
  background: var(--gc-black);
  color: var(--gc-text-on-dark);
  padding-block: var(--gc-section-y);
}
.work .eyebrow { color: var(--gc-gold); }
.work .section-lead { color: var(--gc-text-muted); }
.work__head { max-width: 52ch; margin-bottom: clamp(32px, 4vw, 52px); }

.work__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(160px, 20vw, 264px);
  gap: clamp(10px, 1vw, 14px);
}
.work__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--gc-radius);
  grid-column: span 2;
  background: #1b1b1b;
}
.work__item--feature { grid-column: span 4; grid-row: span 2; }
.work__item--third { grid-column: span 3; }
.work__item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.work__item:hover img { transform: scale(1.045); }
/* The caption scrim. It reached .72 only at the very bottom EDGE and faded out by
   42%, while .work__cap sits 13px up with its own height on top of that, so on a
   phone (where grid-auto-rows is 46vw, about 179px) the caption sat around 15% of
   the way up, on roughly .46 of the intended cover. Measured per glyph line against
   the composited pixels: three of the five homepage captions failed WCAG AA on a
   390px viewport (2.79, 3.31 and 3.57 against the 4.5:1 that 11.5px text needs) and
   one failed on desktop at 4.47. Holding the band nearly flat through the caption's
   own height, then releasing it, fixes every one without reading as a darker photo. */
.work__item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(13,13,13,.88) 0%,
    rgba(13,13,13,.80) 16%,
    rgba(13,13,13,.34) 38%,
    rgba(13,13,13,0) 56%);
  pointer-events: none;
}
.work__cap {
  position: absolute; left: 16px; bottom: 13px; z-index: 1;
  color: var(--gc-text-on-dark);
  font-size: var(--gc-fs-label); letter-spacing: var(--gc-tracking-label);
  text-transform: uppercase; font-weight: 600;
}
.work__cap::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 14px; height: 2px; background: var(--gc-gold);
  margin-right: 9px; margin-bottom: 2px;
}
/* Clickable state (added by JS only, so no-JS never shows a misleading cursor) */
.work__item.is-zoomable { cursor: zoom-in; }
.work__item.is-zoomable:focus-visible { outline: 2px solid var(--gc-gold); outline-offset: 3px; }
.work__zoom {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(13,13,13,.55); color: var(--gc-text-on-dark);
  opacity: 0; transform: scale(.9); transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.work__item.is-zoomable:hover .work__zoom,
.work__item.is-zoomable:focus-visible .work__zoom { opacity: 1; transform: scale(1); }

/* Lightbox overlay (appended to <body> by JS) */
.gc-lightbox[hidden] { display: none; }
.gc-lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(9,9,9,.93);
  opacity: 0; transition: opacity .22s ease;
}
.gc-lightbox.is-open { opacity: 1; }
html.gc-lightbox-open { overflow: hidden; }
.gc-lightbox__fig { margin: 0; max-width: min(1200px, 100%); text-align: center; }
.gc-lightbox__img {
  display: block; width: auto; max-width: 100%; max-height: 82vh;
  margin: 0 auto; border-radius: var(--gc-radius);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.gc-lightbox__cap {
  margin-top: 16px; color: var(--gc-text-on-dark);
  font-size: var(--gc-fs-label); letter-spacing: var(--gc-tracking-label);
  text-transform: uppercase; font-weight: 600;
}
.gc-lightbox__close {
  position: absolute; top: clamp(12px, 3vw, 26px); right: clamp(12px, 3vw, 26px);
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.1); color: var(--gc-offwhite, #f4f1ea);
  font-size: 1.7rem; line-height: 1; cursor: pointer;
  transition: background .2s, color .2s;
}
.gc-lightbox__close:hover { background: var(--gc-gold); color: var(--gc-black, #0D0D0D); }
@media (prefers-reduced-motion: reduce) {
  .gc-lightbox, .work__zoom { transition: none; }
}

@media (max-width: 820px) {
  .work__grid { grid-auto-rows: clamp(150px, 30vw, 220px); }
}
@media (max-width: 560px) {
  .work__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 46vw; }
  .work__item, .work__item--feature, .work__item--third { grid-column: span 2; grid-row: auto; }
}

/* ============================================================
   Commercial: light section (breathes after the dark hero +
   services). "One contractor, every trade." is the thesis line;
   capability lists with gold dash markers. The charcoal .proof
   panel rules below have no markup on the page right now.
   ============================================================ */
.commercial {
  background: var(--gc-bg-light);
  color: var(--gc-text-on-light);
  padding-block: var(--gc-section-y);
}
.commercial .section-lead { color: var(--gc-grey); }
.commercial__head { max-width: 60ch; margin-bottom: clamp(36px, 5vw, 56px); }
.commercial__lead { max-width: 56ch; }
.commercial__rule { display: block; width: 44px; height: 2px; background: var(--gc-gold); margin-bottom: 18px; }
.commercial__pull {
  margin: 30px 0 0;
  font-family: var(--gc-font-serif);
  font-weight: var(--gc-weight-display);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  color: var(--gc-text-on-light);
  line-height: 1.25;
  letter-spacing: .01em;
}

.commercial__caps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 72px);
  padding-block: clamp(34px, 4vw, 52px);
  border-top: 1px solid var(--gc-rule);
}
.capgroup__label {
  font-size: var(--gc-fs-label);
  letter-spacing: var(--gc-tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gc-gold-ink);
  margin: 0 0 20px;
}
.caplist { display: grid; gap: 13px; }
.caplist li {
  position: relative;
  padding-left: 28px;
  color: var(--gc-text-on-light);
  font-size: 1.02rem;
  line-height: 1.4;
}
.caplist li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 15px; height: 2px; background: var(--gc-gold);
}

.proof {
  background: var(--gc-charcoal);
  color: var(--gc-text-on-dark);
  border-radius: var(--gc-radius);
  border-left: 2px solid var(--gc-gold);
  padding: clamp(26px, 3vw, 38px) clamp(26px, 4vw, 44px);
}
.proof__label {
  margin: 0 0 20px;
  font-size: var(--gc-fs-label); letter-spacing: var(--gc-tracking-label);
  text-transform: uppercase; font-weight: 600; color: var(--gc-gold);
}
.proof__items {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 56px);
}
.proof__items li { display: grid; gap: 5px; }
.proof__project {
  font-family: var(--gc-font-serif); font-weight: var(--gc-weight-display);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem); color: var(--gc-text-on-dark); letter-spacing: .01em;
}
.proof__scope { color: var(--gc-text-muted); font-size: .98rem; line-height: 1.45; }
@media (max-width: 560px) { .proof__items { grid-template-columns: 1fr; gap: 22px; } }

@media (max-width: 680px) {
  .commercial__caps { grid-template-columns: 1fr; gap: 30px; }
}

/* ============================================================
   About: dark section (contrast to light Commercial). Two-column
   so it fills the width: statement left, Scott's owner quote as
   the featured moment right. Faith kept understated per Scott.
   ============================================================ */
.about {
  background: linear-gradient(180deg, #1b1b1b 0%, var(--gc-black) 58%);
  color: var(--gc-text-on-dark);
  padding-block: var(--gc-section-y);
}
.about .eyebrow { color: var(--gc-gold); }
.about .section-lead { color: var(--gc-text-muted); }
.about__wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.about__values {
  margin: 26px 0 0;
  color: var(--gc-text-on-dark);
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
}
.about__values span { color: var(--gc-gold); margin: 0 .45em; }

.ownerquote { margin: 0; position: relative; padding-top: 30px; }
.ownerquote::before {
  content: "\201C";
  position: absolute; top: -18px; left: -8px;
  font-family: var(--gc-font-serif); font-size: 5rem; line-height: 1;
  color: var(--gc-gold); opacity: .45;
}
.ownerquote__text {
  margin: 0;
  font-family: var(--gc-font-serif); font-weight: var(--gc-weight-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.28;
  color: var(--gc-text-on-dark); letter-spacing: .005em; text-wrap: balance;
}
.ownerquote__by {
  margin: 28px 0 0;
  display: flex; align-items: center; gap: 14px;
}
.ownerquote__avatar {
  width: 60px; height: 60px; flex: none;
  border-radius: 50%; object-fit: cover; object-position: center top;
  border: 1px solid var(--gc-rule);
}
.ownerquote__meta { display: flex; flex-direction: column; gap: 3px; }
.ownerquote__name {
  color: var(--gc-gold);
  font-family: var(--gc-font-serif); font-weight: var(--gc-weight-display);
  font-size: 1rem; letter-spacing: .03em;
}
.ownerquote__role {
  color: var(--gc-text-muted);
  font-size: .72rem; letter-spacing: var(--gc-tracking-label);
  text-transform: uppercase; font-weight: 600;
}

@media (max-width: 820px) {
  .about__wrap { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================================
   Contact: light closer. Statement + CTA left, NAP details
   right. Real tel:/mailto: links (tracked). Dark footer follows.
   ============================================================ */
.contact {
  background: var(--gc-bg-light);
  color: var(--gc-text-on-light);
  padding-block: var(--gc-section-y);
}
.contact .section-lead { color: var(--gc-grey); }
.contact__wrap {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
.contact__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.contact__details { display: grid; gap: 0; margin-top: 30px; }
.contact__details li {
  display: grid; gap: 4px;
  padding: 15px 0;
  border-top: 1px solid var(--gc-rule);
  font-size: 1.05rem;
  color: var(--gc-text-on-light);
}
.contact__details li:last-child { border-bottom: 1px solid var(--gc-rule); }
.contact__label {
  font-size: var(--gc-fs-label); letter-spacing: var(--gc-tracking-label);
  text-transform: uppercase; font-weight: 600; color: var(--gc-gold-ink);
}
.contact__details a { color: var(--gc-text-on-light); text-decoration: none; }
.contact__details a:hover { color: var(--gc-gold-ink); }

/* Lead form (light card on the light contact section). */
.leadform {
  background: #fff;
  border: 1px solid var(--gc-rule);
  border-radius: var(--gc-radius);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 1px 0 rgba(13,13,13,.02), 0 18px 40px -28px rgba(13,13,13,.35);
}
.leadform__title {
  margin: 0 0 20px;
  font-family: var(--gc-font-serif); font-weight: var(--gc-weight-display);
  font-size: 1.3rem; color: var(--gc-text-on-light); letter-spacing: .01em;
}
.field { display: grid; gap: 6px; margin-bottom: 15px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.field label {
  font-size: var(--gc-fs-label); letter-spacing: var(--gc-tracking-label);
  text-transform: uppercase; font-weight: 600; color: var(--gc-grey);
}
.field__opt { text-transform: none; letter-spacing: .02em; font-weight: 400; }   /* de-emphasize via weight, not opacity (opacity:.7 pushed #606060 below AA contrast) */
.field-hint { margin: -6px 0 15px; font-size: .82rem; color: var(--gc-grey); }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--gc-font-sans); font-size: 1rem;
  color: var(--gc-text-on-light);
  background: var(--gc-offwhite);
  border: 1px solid rgba(13,13,13,.16);
  border-radius: var(--gc-radius);
  padding: 12px 13px;
  min-height: var(--gc-target-min);
  transition: border-color var(--gc-motion-fast) var(--gc-motion-ease),
              box-shadow var(--gc-motion-fast) var(--gc-motion-ease);
}
.field textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gc-gold-ink);
  box-shadow: 0 0 0 3px rgba(128,106,42,.18);
}

/* ---- Invalid field state ----
   scripts/form.js has always set aria-invalid="true" on the field that failed,
   and until 2026-08-26 nothing was styled to match it. The form announced the
   problem to a screen reader and showed a sighted visitor nothing but a
   sentence at the bottom of the panel, which on a long form can be most of a
   screen away from the empty box it is talking about.

   These live beside the form they style rather than in global.css: the two
   forms in this theme use different class names AND different surfaces, so a
   single shared rule would have to fight both and would fail contrast on one.

   The :focus variant is NOT redundant. form.js focuses the field it just
   marked, so invalid and focused are the same instant by design, and the focus
   rule below is more specific than a bare attribute selector. Without it the
   field kept its gold focus ring and only the label went red.

   Colour is never the only signal: the label changes with the control and the
   status line still carries the sentence, so the state survives a red-green
   colour vision deficiency and a monochrome screen both. */

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field input[aria-invalid="true"]:focus,
.field select[aria-invalid="true"]:focus,
.field textarea[aria-invalid="true"]:focus {
  border-color: var(--gc-err-light);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .16);
}
.field:has([aria-invalid="true"]) label { color: var(--gc-err-light); }
/* The focus ring goes red too. form.js focuses the field it marked, so the
   default accent ring lands on a field the page is calling wrong, and a gold
   box around a red underline reads as two states arguing. Same ring, restated
   in the state's own colour. */
.field [aria-invalid="true"]:focus-visible { outline-color: var(--gc-err-light); }

.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }
.leadform__submit { width: 100%; margin-top: 4px; }
.leadform__status { margin: 14px 0 0; font-size: .92rem; line-height: 1.45; min-height: 1.2em; }
.leadform__status.is-ok { color: #2f7d4f; font-weight: 600; }
.leadform__status.is-error { color: var(--gc-err-light); font-weight: 600; }

@media (max-width: 820px) {
  .contact__wrap { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 420px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================
   404: branded, dark. Fires the 404_not_found GA4 event
   (wired in functions.php). Reuses the shared type + buttons.
   ============================================================ */
.error-page {
  background: linear-gradient(180deg, #1b1b1b 0%, var(--gc-black) 58%);
  color: var(--gc-text-on-dark);
  min-height: 62vh;
  display: flex;
  align-items: center;
  padding-block: var(--gc-section-y);
}
.error-page .eyebrow { color: var(--gc-gold); }
.error-page .section-title { max-width: 18ch; }
.error-page .section-lead { color: var(--gc-text-muted); margin-bottom: 34px; }
.error-page__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* Service-line link. Only the remodel entry carries one today, because it is the
   only service with a page behind it; the others stay plain text rather than
   growing a link that goes nowhere. */
.svc__link {
  display: inline-block;
  margin-top: 12px;
  color: var(--gc-gold);
  font-size: var(--gc-fs-label);
  letter-spacing: var(--gc-tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 162, 77, .45);
  padding-bottom: 3px;
  transition: color var(--gc-motion-fast) var(--gc-motion-ease),
              border-color var(--gc-motion-fast) var(--gc-motion-ease);
}
.svc__link:hover { color: var(--gc-gold-soft); border-color: var(--gc-gold-soft); }