/* hero */
/**
 * Hero Block styles.
 *
 * One layout, five modifiers. The variants differ only in height, how far the image
 * bleeds in from the right, and how wide the copy column runs — everything else is
 * shared, which is the whole reason these are one block rather than five.
 *
 * Below 860px the image unpins into a band above the copy, so the headline sits on
 * flat background instead of a busy part of the photograph.
 */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 440px;
  background: var(--bg-base, #121412);
  color: var(--text, #ffffff);
}

.hero--homepage { min-height: 600px; }
.hero--interior { min-height: 525px; }
.hero--plain    { min-height: 525px; }
.hero--service  { min-height: 525px; }
.hero--article  { min-height: 546px; }

/* Media ------------------------------------------------------------------
   Absolutely positioned so the photograph bleeds off the right edge with no
   container margin. The inset controls how far it reaches toward the copy. */

.hero__media {
  position: absolute;
  inset: 0 0 0 42%;
  z-index: 0;
}

.hero--homepage .hero__media { inset: 0 0 0 38%; }
.hero--article  .hero__media { inset: 0 0 0 40%; }
.hero--plain    .hero__media { inset: 0 0 0 44%; }
.hero--service  .hero__media { inset: 0 0 0 46%; }

.hero__media picture,
.hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Carries the image into the flat background behind the copy. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--bg-base, #121412) 0%,
    rgba(18, 20, 18, 0.88) 20%,
    rgba(18, 20, 18, 0.28) 62%,
    rgba(18, 20, 18, 0) 100%
  );
}

.hero__placeholder {
  height: 100%;
  border-radius: 0;
}

/* Copy -------------------------------------------------------------------- */

/* Padded measure, not --container: the gutter sits on this element rather than
   an outer box, so the copy lines up with the .section blocks either side. */
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-padded);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

.hero__copy {
  max-width: 560px;
  padding-block: clamp(2.75rem, 6.5vw, 5rem);
}

.hero--homepage .hero__copy {
  max-width: 80%;
  padding-top: clamp(3.5rem, 6.4vw, 5.75rem);
  padding-bottom: clamp(3.5rem, 8.3vw, 7.45rem);
}
/* The interior and service comps run the copy to a 1280px measure with a tight
   band above and below — the height comes from the copy, not from padding. In rem
   so it tracks the root scale; at 960px flat the H1s wrapped a line early. */
.hero--interior .hero__copy,
.hero--plain    .hero__copy {
  max-width: 60rem;
  padding-top: 2.3rem;
  padding-bottom: 2.95rem;
}

.hero--service .hero__copy {
  max-width: 60rem;
  padding-top: 3.5rem;
  padding-bottom: 2.3rem;
}

/* The article hero carries just the kicker and the title — the comp sets it on a
   900px measure with a tighter band than the interior heroes. */
.hero--article .hero__copy {
  max-width: 56.25rem;
  padding-top: 4.9rem;
  padding-bottom: 2.9rem;
}

/* Eyebrow, headline and intro sit further apart on the interior heroes than on
   the homepage, where the whole stack is tighter. */
.hero__copy .eyebrow { margin-bottom: 1.625rem; font-size: 1.375rem; }

.hero--interior .hero__heading,
.hero--service  .hero__heading,
.hero--plain    .hero__heading { margin-bottom: 1.47rem; }

.hero--interior .hero__intro,
.hero--service  .hero__intro,
.hero--plain    .hero__intro { max-width: 44rem; margin-bottom: 4.3rem; }

.hero__heading {
  margin: 0 0 0.875rem;
  font-size: clamp(2.1rem, 4.4vw, 3.25rem);
  line-height: 1.19;
  color: var(--text, #ffffff);
}

.hero__subtitle {
  margin: 0 0 0.5rem;
  font-size: 1.656rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #c9cfc9);
}

.hero__intro {
  max-width: 30rem;
  margin: 0 0 1.5rem;
  font-size: 1.3125rem;
  line-height: 1.71;
  color: var(--text, #ffffff);
}

/* The comp drops the homepage button row a long way clear of the intro — roughly
   9% of the viewport width — so the gap is set in vw and capped, not a flat rem. */
.hero--homepage .hero__intro { max-width: 38rem; margin-bottom: clamp(2.5rem, 8.2vw, 7.375rem); }

.hero__note {
  margin-top: 1.5rem;
  font-size: 1.3125rem;
  color: var(--muted, #c9cfc9);
}

.hero__note a {
  color: var(--accent, #5ad05a);
  font-weight: 600;
  text-decoration: none;
}

.hero__note a:hover,
.hero__note a:focus-visible { text-decoration: underline; }

.hero__note > :first-child { margin-top: 0; }
.hero__note > :last-child  { margin-bottom: 0; }

/* The intro is the last element before the buttons on most variants, so the
   button row carries no extra top margin of its own. */
.hero__buttons { margin-top: 0; }

/* Editor-only prompt when no button has been added yet. */
.hero__buttons-empty {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--muted, #c9cfc9);
  font-style: italic;
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 860px) {
  .hero,
  .hero--homepage,
  .hero--interior,
  .hero--plain,
  .hero--service,
  .hero--article {
    display: block;
    min-height: 0;
  }

  .hero__media,
  .hero--homepage .hero__media,
  .hero--article .hero__media,
  .hero--plain .hero__media,
  .hero--service .hero__media {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 10;
  }

  .hero__media::after {
    background: linear-gradient(180deg, rgba(18, 20, 18, 0.5) 0%, rgba(18, 20, 18, 0) 45%);
  }

  .hero__copy,
  .hero--homepage .hero__copy,
  .hero--plain .hero__copy,
  .hero--service .hero__copy,
  .hero--article .hero__copy {
    max-width: none;
    padding-block: clamp(2rem, 8vw, 3rem);
  }

  .hero__intro,
  .hero--homepage .hero__intro { max-width: none; }

  .hero--homepage .hero__intro { margin-bottom: 2rem; }
}

@media (max-width: 560px) {
  .hero__media { aspect-ratio: 16 / 9; }
}

/* contact */
/**
 * Contact Block styles.
 *
 * A white band (.on-light flips the text tokens) holding the form and, beside it, a
 * dark details card. The card sits back on the page's own surface, so it re-declares
 * the dark tokens for its subtree — a block-root style override, per §5.
 */

.contact {
  background: var(--bg-invert, #ffffff);
}

.contact__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}

/* Form ---------------------------------------------------------------------- */

.contact__heading {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 3.2vw, 2.8125rem);
  color: var(--text, #ffffff);
}

.contact__intro {
  max-width: 26rem;
  margin: 0 0 1.5rem;
  font-size: 1.3125rem;
  color: var(--muted, #c9cfc9);
}

.contact__form :where(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--bg-invert, #ffffff);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink, #121412);
  font-family: inherit;
  font-size: 1.125rem;
  transition: border-color 0.22s ease;
}

.contact__form textarea { min-height: 10.625rem; resize: vertical; }

/* Select — the enquirer chooser. Strip the UA chrome and draw our own caret, so it
   matches the text inputs beside it rather than rendering as native browser furniture
   inside the white panel. The caret is --ink, not --text: this block is the white band. */
.contact__form select {
  appearance: none;
  padding-right: 2.75rem;
  line-height: normal;   /* matches the text inputs; 1.4 made it 4px taller */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23121412' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 11px;
  cursor: pointer;
}

/* CF7 validates `select*` in its own round-trip and emits no `required` attribute,
   so :invalid never fires — hence :has(). Where it is unsupported the blank option
   simply shows in full ink, which is cosmetic only. */
.contact__form select:has(option[value=""]:checked) { color: var(--ink-2, #5c625c); }

/* CF7 wraps each control in a span; without this the select shrinks to its content. */
.contact__form .wpcf7-form-control-wrap { display: block; }

/* The comps pair Email and Phone on one row and run everything else full width.
   Collapses to a stack once the column is too narrow to split. */
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form__row > p { margin: 0; }

@media (max-width: 700px) {
  .form__row { grid-template-columns: 1fr; }
}

.contact__form :where(input, select, textarea):focus {
  border-color: var(--accent, #5ad05a);
  outline: none;
}

.contact__form .wpcf7-list-item { margin: 0; }

.contact__form input[type="submit"] { cursor: pointer; }

/* Placeholder fallback — mirrors the real proportions. Inert. */

.contact__fallback { display: grid; gap: 1rem; }

.contact__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.contact__input {
  display: block;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted, #c9cfc9);
  font-size: 1.125rem;
}

.contact__input--area { min-height: 10.625rem; }

.contact__hint {
  margin: 1rem 0 0;
  font-size: 1.125rem;
  font-style: italic;
  color: var(--muted, #c9cfc9);
}

/* Compliance notice ---------------------------------------------------------- */

.contact__notice {
  margin-top: 1rem;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--muted, #c9cfc9);
}

.contact__notice a { color: var(--accent, #5ad05a); text-decoration: underline; }

.contact__notice > :first-child { margin-top: 0; }
.contact__notice > :last-child  { margin-bottom: 0; }

/* Details card ---------------------------------------------------------------
   Dark card inside the white band — re-declares the dark tokens for its subtree. */

.contact__details {
  --text: var(--text-on-dark);
  --muted: var(--muted-on-dark);
  --border: var(--border-on-dark);

  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--bg-base, #121412);
  color: var(--text-on-dark);
}

.contact__details-heading {
  margin: 0 0 1.5rem;
  font-size: clamp(1.35rem, 2.2vw, 1.97rem);
  font-weight: 800;
  color: var(--text-on-dark);
}

.contact__row {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 1rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--border-on-dark);
}

.contact__row:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.contact__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-on-dark);
  border-radius: 50%;
  color: var(--text-on-dark);
}

.contact__row-title {
  margin: 0 0 0.5rem;
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--text-on-dark);
}

.contact__row-body {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--muted-on-dark);
}

.contact__row-body p { margin: 0; }
.contact__row-body a { color: var(--muted-on-dark); text-decoration: none; }
.contact__row-body a:hover,
.contact__row-body a:focus-visible { color: var(--accent, #5ad05a); }

.contact__row-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--accent, #5ad05a);
  text-decoration: none;
}

.contact__row-link:hover,
.contact__row-link:focus-visible { text-decoration: underline; }

/* Responsive ------------------------------------------------------------------ */

@media (max-width: 860px) {
  .contact__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact__intro { max-width: none; }
}

@media (max-width: 640px) {
  .contact__pair { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .contact__row { grid-template-columns: 1fr; gap: 0.75rem; }
}