/* ============================================================
   CQ Yard & Landscaping
   All colour, type, space and motion values come from tokens.css.
   Nothing in this file re-decides a token.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--c-page);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }

/* An explicit `display` on an element beats the UA's [hidden] rule, so
   without this the form stays on screen underneath its own success panel. */
[hidden] { display: none !important; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }
a  { color: inherit; text-decoration: none; }

/* Dual-ring focus. The accent is a dark navy, so on the near-black hero
   and form sections an accent-only ring is about 1.8:1 against its
   backdrop and effectively invisible. The cream halo carries it there;
   the navy ring carries it on the cream body sections. Visible on both. */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--c-page);
  border-radius: var(--radius);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 14px 20px;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-size: var(--fs-btn);
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------
   Scroll reveal
   One-shot, opacity and transform only.
   ------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity   var(--dur-reveal) var(--ease-float),
    transform var(--dur-reveal) var(--ease-float);
}
.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; }
.reveal[data-delay="4"] { transition-delay: .48s; }

.reveal.is-revealed { opacity: 1; transform: none; }

/* no-JS safety: never leave content invisible */
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------------------
   Shared type
   ------------------------------------------------------------ */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Section display heading. Same role as the reference's big serif. */
.display {
  font-family: var(--f-display);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: -1px;
  color: var(--c-ink);
}
/* the reference nudges the optical left edge of the big serif */
.display--pull { margin-left: -5px; }
@media (max-width: 1024px) { .display--pull { margin-left: -3px; } }

/* ------------------------------------------------------------
   Section shell
   Deep asymmetric left gutter, second-level indent for content.
   ------------------------------------------------------------ */
.section {
  padding: var(--sec-top) var(--pad-right) 0 var(--pad-left);
}
.section > .eyebrow { margin-bottom: var(--gap-md); }

/* The section display and the first list item are both PPEiko, so without
   a real gap they read as one continuous run of serif and it stops being
   obvious which one is the section title. */
.section > .display,
.work__head { margin-bottom: var(--gap-xl); }

.section__foot { padding-left: var(--indent); padding-top: var(--gap-lg); }

/* Social proof at the handoff from evidence to ask. This was previously
   buried in the fourth footer column, styled identically to "Domestic and
   acreage" and sitting BELOW the form, so most converters never saw the
   most persuasive fact on the page. */
.proof {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-sm);
}
.proof__stat {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 6.5vw, 2.5rem);
  line-height: 1.1;
  color: var(--c-ink);
}
.proof__note {
  font-size: var(--fs-small);
  color: var(--c-muted);
}
.proof .btn { margin-top: var(--gap-sm); }

/* Supporting proof under a lede, not a second lede. Two co-equal 20px ink
   paragraphs in one section made the prose outrank the services list
   sitting between them. */
.section__support {
  max-width: var(--maxw-lede);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-muted);
  margin-top: calc(-1 * var(--gap-sm));   /* hugs the list it supports */
}

/* the hairline that closes a section, revealed left to right */
.rule {
  margin: var(--sec-top) 0 0 var(--indent);
  border-top: 1px solid var(--c-line);
  transform-origin: left center;
}
.reveal[data-reveal="rule"] {
  transform: scaleX(0);
  transition: transform var(--dur-reveal) var(--ease-float);
}
.reveal[data-reveal="rule"].is-revealed { transform: scaleX(1); }

/* ------------------------------------------------------------
   Text arrow link (the reference's button style)
   ------------------------------------------------------------ */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  color: var(--c-accent);
  transition: gap var(--dur-quick) var(--ease-out),
              color var(--dur-quick) var(--ease-out);
}
.link-arrow svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: square;
}
.link-arrow:hover,
.link-arrow:focus-visible { gap: 20px; color: var(--c-ink); }
.link-arrow:active { gap: 16px; }

/* 13px uppercase text is a small target on a phone. Pad the hit area out
   to the 44px minimum without moving the text. */
@media (hover: none) {
  .link-arrow { padding: 12px 0; }
}

/* ------------------------------------------------------------
   Section body: the reference's indented second level. One short
   paragraph, then at most one small supporting element.
   ------------------------------------------------------------ */
.section__body {
  padding-left: var(--indent);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-lg);
}

/* Weight 400, not 300. At 20px a light weight reads QUIETER than 16px
   regular body text, which inverts the intent of a lede. */
.lede {
  max-width: var(--maxw-lede);
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  font-weight: 400;
  color: var(--c-ink);
}

/* A bare list of names. No descriptions, no rules between them - it
   supports the paragraph above rather than competing with it. */
/* These are the actual products. They were 14px muted grey underneath a
   20px ink paragraph ABOUT them, so the prose outranked the services. */
.tagline-list {
  display: grid;
  gap: 8px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .2px;
  color: var(--c-ink);
}
.tagline-list li { display: flex; align-items: center; gap: 12px; }
.tagline-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 16px; height: 1px;
  background: var(--c-line);
}

/* ------------------------------------------------------------
   3. RECENT WORK
   The reference's Our Work grid. Every job shot is 1536 square, so the
   masonry rhythm cannot come from mixed aspect ratios the way it does on
   the reference. It comes from the before/after pairing instead.
   ------------------------------------------------------------ */
.work__grid {
  display: grid;
  gap: var(--gap-xl);
  padding-left: var(--indent);
}

.pair__set {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pair__shot { display: flex; flex-direction: column; gap: 8px; }

.pair__label {
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Source shots are all 1536 square. Cropping them to landscape cuts the
   section height hard without shrinking the photographs, which is what
   makes the difference between a tall stack and an editorial run. */
.pair__shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 58%;   /* the work is in the lower half of these frames */
  background: var(--c-sky);
}

.pair figcaption {
  margin-top: var(--gap-sm);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--c-ink);
  max-width: var(--maxw-lede);
}

/* Reveal variant: photography rises rather than just fading.
   --x carries any horizontal offset the element also needs (the work
   grid's stagger), because a plain `transform: none` on .is-revealed
   would otherwise snap that offset away the moment the row reveals. */
.reveal[data-reveal="up"] { transform: translate3d(var(--x, 0), 40px, 0); }
.reveal[data-reveal="up"].is-revealed { transform: translate3d(var(--x, 0), 0, 0); }

/* ------------------------------------------------------------
   4. GET A QUOTE
   The one theme inversion on the page. It runs straight into the footer,
   which is how the reference ends too.
   ------------------------------------------------------------ */
.section--dark {
  background: var(--c-dark);
  color: var(--c-cream);
  /* no bottom padding: .footer__top already contributes --sec-top, and
     the two together doubled every other section-to-section gap. */
}
.section--dark .display { color: var(--c-cream); }
.section--dark .lede    { color: var(--on-dark-2); }

.quote__inner {
  padding-left: var(--indent);
  display: grid;
  gap: var(--gap-xl);
}
.quote__copy { display: grid; gap: var(--gap-lg); }

.quote__direct { display: grid; gap: 4px; }
.quote__direct-label {
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--on-dark-3);
}
/* Carries the same phone glyph as the hero and the action bar, plus a
   persistent underline. Without them this read as a display heading
   rather than something you tap. */
.quote__direct-num {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  line-height: 1.1;
  color: var(--c-cream);
  transition: color var(--dur-quick) var(--ease-out);
}
.quote__direct-num svg {
  width: .62em; height: .62em;
  fill: currentColor;
  opacity: .7;
}
.quote__direct-num span {
  border-bottom: 1px solid var(--line-on-dark-hi);
  transition: border-color var(--dur-quick) var(--ease-out);
}
.quote__direct-num:hover,
.quote__direct-num:focus-visible { color: var(--c-sky-lt); }
.quote__direct-num:hover span,
.quote__direct-num:focus-visible span { border-bottom-color: currentColor; }

/* --- form --- */
.form { display: grid; gap: var(--gap-md); max-width: 30rem; }

.field { display: grid; gap: 8px; }
.field label {
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--on-dark-2);
}

.field input,
.field select {
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid var(--line-on-dark-hi);
  border-radius: var(--radius);
  background: var(--fill-on-dark);
  color: var(--c-cream);
  font-family: var(--f-sans);
  font-size: 1rem;
  appearance: none;
  transition: border-color var(--dur-quick) var(--ease-out),
              background-color var(--dur-quick) var(--ease-out);
}
.field input::placeholder { color: var(--on-dark-3); }

.field input:hover,
.field select:hover { border-color: var(--on-dark-3); }

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--c-sky-lt);
  background: var(--fill-on-dark);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-sky-lt) 35%, transparent);
}

.field__select { position: relative; }
.field__select svg {
  position: absolute;
  right: 16px; top: 50%;
  width: 18px; height: 18px;
  margin-top: -9px;
  pointer-events: none;
  fill: none; stroke: var(--on-dark-3); stroke-width: 1.5;
}
.field select:invalid { color: var(--on-dark-3); }
.field select option { color: var(--c-ink); }

.field__error {
  font-size: var(--fs-small);
  color: var(--c-error);
  min-height: 0;
}
.field__error:empty { display: none; }

.field.is-invalid input,
.field.is-invalid select { border-color: var(--c-error); }

.form__submit { width: 100%; margin-top: var(--gap-xs); }

.form__note {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--on-dark-3);
}

/* --- designed success state --- */
.form-done {
  max-width: 30rem;
  padding: var(--gap-lg);
  border: 1px solid var(--line-on-dark);
  background: var(--fill-on-dark);
}
.form-done__tick {
  width: 34px; height: 34px;
  margin-bottom: var(--gap-md);
  fill: none;
  stroke: var(--c-sky-lt);
  stroke-width: 1.5;
  stroke-linecap: square;
}
.form-done__title {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--c-cream);
  margin-bottom: var(--gap-sm);
}
.form-done__body {
  color: var(--on-dark-2);
  margin-bottom: 8px;
}
.form-done__body strong { color: var(--c-cream); font-weight: 500; }
.form-done__body--muted { color: var(--on-dark-3); margin-bottom: 0; }
.form-done__body--muted a {
  color: var(--c-cream);
  border-bottom: 1px solid var(--line-on-dark-hi);
}
.form-done__body--muted a:hover { border-bottom-color: var(--c-cream); }

/* Three facts on one hairline-separated line. */
.fact-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--c-muted);
}
.fact-strip li { display: flex; align-items: center; gap: 20px; }
.fact-strip li:not(:last-child)::after {
  content: "";
  width: 1px; height: 11px;
  background: var(--c-line);
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--f-sans);
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-quick) var(--ease-out),
    border-color     var(--dur-quick) var(--ease-out),
    color            var(--dur-quick) var(--ease-out),
    transform        var(--dur-quick) var(--ease-out);
}
.btn__icon { width: 17px; height: 17px; fill: currentColor; }

.btn--accent {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  border-color: var(--c-accent);
}
.btn--accent:hover,
.btn--accent:focus-visible {
  background: var(--c-accent-dk);
  border-color: var(--c-accent-dk);
  transform: translateY(-2px);
}
.btn--accent:active { transform: translateY(0); }

/* Disabled. Nothing on the page ships disabled today, but the form's
   submit is guarded against double-fire and needs somewhere to land. */
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}
.field input[disabled],
.field select[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

.btn--ghost {
  background: transparent;
  color: var(--c-cream);
  border-color: var(--line-on-dark-hi);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--c-cream);
  color: var(--c-ink);
  border-color: var(--c-cream);
  transform: translateY(-2px);
}
.btn--ghost:active { transform: translateY(0); }

/* ------------------------------------------------------------
   Header - overlays the hero
   ------------------------------------------------------------ */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  padding: 20px var(--pad-mobile);
}

/* The supplied logo is a wide bull mark above a wordmark, on a cream
   ground. The bull is too wide to fill a circle on its own without
   dragging the wordmark into frame, so the badge carries the whole
   lockup, sized up enough to stay legible. */
.site-header__logo {
  display: block;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--c-page);
}
.site-header__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* mark is pre-cropped with its own padding */
}
.site-header__logo,
.footer__logo {
  transition: opacity var(--dur-quick) var(--ease-out);
}
.site-header__logo:hover,
.site-header__logo:focus-visible,
.footer__logo:hover,
.footer__logo:focus-visible { opacity: .82; }
.site-header__logo:active,
.footer__logo:active { opacity: .7; }

.site-header__phone {
  display: none;           /* mobile uses the sticky bar instead */
  text-align: right;
  color: var(--c-cream);
  transition: color var(--dur-quick) var(--ease-out);
}
.site-header__phone-label {
  display: block;
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  opacity: .7;
}
.site-header__phone-num {
  display: block;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: .4px;
}
.site-header__phone:hover,
.site-header__phone:focus-visible { color: var(--c-sky-lt); }
.site-header__phone:active { opacity: .8; }

/* ------------------------------------------------------------
   1. HERO
   Portrait 3:4 source photo. Bright overcast sky, near-silhouette
   figure, so the copy sits in a scrim anchored to the bottom.
   ------------------------------------------------------------ */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  /* svh-driven, so nothing resizes when the mobile URL bar collapses */
  padding:
    var(--hero-pad-top, calc(var(--sec-top-mobile) + 40px))
    var(--pad-mobile)
    calc(var(--pad-mobile) + 16px);
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--c-sky); }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The climber is the whole reason this photo was chosen. On a portrait
     phone viewport the 3:4 source is cropped on width only, so the full
     height shows and he lands low - behind the copy scrim. Pushing the
     frame down lifts him into the clear band above the copy. */
  object-position: 58% 62%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Overall grade only. This layer must NOT be responsible for text
     contrast: it is a percentage of the hero height, and the copy block
     is bottom-anchored with variable height, so on a taller or shorter
     phone the headline drifts out of any band defined here. Text
     contrast is owned by .hero__inner::before below, which is anchored
     to the copy itself. */
  background: linear-gradient(
    to bottom,
    rgba(31, 32, 34, .34)  0%,
    rgba(31, 32, 34, .10) 24%,
    rgba(31, 32, 34, .16) 55%,
    rgba(31, 32, 34, .38) 100%
  );
}

.hero__inner {
  position: relative;
  z-index: var(--z-hero-copy);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hero-gap, var(--gap-md));
}

/* The copy's own scrim. Anchored to the copy block and bled out past the
   hero padding on three sides, so every phone height gets the same
   backing regardless of where the block lands. This is what guarantees
   contrast; the section gradient above only sets the mood. */
.hero__inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  left:   calc(-1 * var(--pad-mobile));
  right:  calc(-1 * var(--pad-mobile));
  bottom: calc(-1 * (var(--pad-mobile) + 20px));
  top: calc(-1 * var(--hero-scrim, 92px));
  background: linear-gradient(
    to top,
    rgba(31, 32, 34, .97)   0%,
    rgba(31, 32, 34, .95)  52%,
    rgba(31, 32, 34, .86)  72%,
    rgba(31, 32, 34, .58)  87%,
    rgba(31, 32, 34, 0)   100%
  );
  pointer-events: none;
}

.hero__title {
  font-family: var(--f-display);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: var(--lh-hero);
  letter-spacing: -.5px;
  color: var(--c-cream);
  margin-left: -3px;          /* optical left edge of the serif */
  text-wrap: balance;
}

.hero__lede {
  max-width: var(--maxw-lede);
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  font-weight: 300;
  color: var(--on-dark-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  width: 100%;
}
.hero__actions .btn { flex: 1 1 auto; }

/* Trust strip - hairline separators rather than dot characters.
   The rule is a PREFIX on each item, not a separator between them, so
   the strip can wrap freely without leaving an orphaned divider at the
   end of a line. */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-top: 2px;
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--on-dark-2);
}
.trust-strip li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.trust-strip li::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 1px;
  background: var(--on-dark-3);
}

/* ------------------------------------------------------------
   5. FOOTER
   Continues the dark surface straight out of the quote section.
   ------------------------------------------------------------ */
.footer {
  background: var(--c-dark);
  color: var(--c-cream);
  padding: 0 var(--pad-mobile) calc(var(--pad-mobile) + 80px);
}

.footer__top {
  display: grid;
  gap: var(--gap-lg);
  padding-top: var(--sec-top);
  border-top: 1px solid var(--line-on-dark);
}

.footer__logo {
  width: 92px; height: 92px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-page);
}
.footer__logo img { width: 100%; height: 100%; object-fit: contain; }

/* 2 x 2 on phones. Stacking all four one per row made the footer 932px
   tall, which is longer than the hero. */
.footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-md) var(--gap-lg);
}

.footer__heading {
  font-size: var(--fs-meta);
  font-weight: 400;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--on-dark-3);
  margin-bottom: 12px;
}

.footer__list { display: grid; gap: 8px; font-size: var(--fs-small); }
.footer__list li { color: var(--on-dark-2); }
/* Persistent underline, not hover-only. On a phone there is no hover, so
   without this nothing distinguished the tappable rows from the static
   ones except a barely perceptible brightness step. */
.footer__list a {
  color: var(--c-cream);
  border-bottom: 1px solid var(--line-on-dark-hi);
  transition: border-color var(--dur-quick) var(--ease-out);
}
.footer__list a:hover,
.footer__list a:focus-visible { border-bottom-color: var(--c-cream); }
.footer__list a:active { opacity: .75; }

.footer__totop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--on-dark-2);
  transition: color var(--dur-quick) var(--ease-out);
}
.footer__totop svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square;
}
.footer__totop:hover,
.footer__totop:focus-visible { color: var(--c-cream); }
.footer__totop:active { opacity: .75; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: var(--gap-xl);
  padding-top: var(--gap-md);
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  color: var(--on-dark-3);
}

/* ------------------------------------------------------------
   Sticky action bar
   ------------------------------------------------------------ */
/* Hidden while the hero is on screen: the hero already carries both
   actions, and showing the bar there would duplicate the same CTA twice
   in one viewport. It slides up once the hero scrolls away. */
.callbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-callbar);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--c-dark);
  box-shadow: 0 -1px 0 var(--line-on-dark);
  transform: translateY(101%);
  visibility: hidden;
  transition:
    transform  .34s var(--ease-out),
    visibility 0s linear .34s;
}
.callbar.is-active {
  transform: translateY(0);
  visibility: visible;
  transition:
    transform  .34s var(--ease-out),
    visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .callbar { transition: none; }
}

.callbar__item {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  transition: background-color var(--dur-quick) var(--ease-out);
}
.callbar__item svg { width: 17px; height: 17px; fill: currentColor; }

.callbar__item--call  { background: var(--c-dark); color: var(--c-cream); }
.callbar__item--call:hover,
.callbar__item--call:focus-visible { background: var(--c-dark-hi); }

.callbar__item--quote { background: var(--c-accent); color: var(--c-accent-ink); }
.callbar__item--quote:hover,
.callbar__item--quote:focus-visible { background: var(--c-accent-dk); }

.callbar__item:active { filter: brightness(.94); }

/* ============================================================
   >= 1025px - the reference collapses at 1024, so we expand here
   ============================================================ */
@media (min-width: 1025px) {

  /* The logo sat at a hard-coded 48px while every eyebrow, heading and
     hero line on the page starts at --pad-left (170px). The deep
     asymmetric gutter is the structural idea here, and the first element
     the visitor saw was breaking it. */
  .site-header {
    padding: 28px var(--pad-right) 28px var(--pad-left);
  }
  .site-header__logo { width: 84px; height: 84px; }
  .site-header__phone { display: block; }

  .hero {
    align-items: flex-end;
    min-height: 100vh;
    padding: 0 var(--pad-right) 72px var(--pad-left);
  }
  .hero__media img { object-position: 55% 30%; }

  .hero__scrim {
    background:
      linear-gradient(
        to bottom,
        rgba(31, 32, 34, .40)   0%,
        rgba(31, 32, 34, .06)  26%,
        rgba(31, 32, 34, .40)  66%,
        rgba(31, 32, 34, .78) 100%
      ),
      linear-gradient(
        to right,
        rgba(31, 32, 34, .70)   0%,
        rgba(31, 32, 34, .30)  46%,
        rgba(31, 32, 34, 0)    74%
      );
  }

  /* --- sections --- */
  .section { min-height: 34rem; }
  .section__body { gap: var(--gap-lg); }

  /* --- 3. Recent work ---
     ONE pair per row. The reference's grid gives each photograph roughly
     half the content width; two pairs per row made ours a quarter of
     that and the photography stopped carrying the page. Alternate rows
     step right so the column staggers rather than marching. */
  /* --- 5. Footer --- */
  .footer { padding: 0 var(--pad-right) 40px var(--pad-left); }
  .footer__top {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--gap-xl);
  }
  .footer__logo { width: 118px; height: 118px; }
  .footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-lg); }
  .footer__totop { justify-self: end; }
  .footer__bottom { gap: 8px 40px; }

  /* --- 4. Quote: copy left, form right --- */
  .quote__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gap-xl);
    align-items: start;
  }
  .quote__copy .lede { max-width: 26rem; }
  .form { max-width: none; }
  .form-done { grid-column: 2; }

  .work__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--gap-lg);
  }
  /* caption sits in the right margin rather than under the photographs,
     so each row is only as tall as its images */
  .pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: var(--gap-lg);
    align-items: end;
  }
  /* Stagger without resizing. margin-left narrowed rows 2 and 4, so the
     photographs changed size down a comparison grid and the eye read that
     as a difference in importance. --x shifts without reflowing. */
  .pair:nth-child(even) { --x: calc(var(--indent) / 2); }
  .pair__set { gap: 8px; }
  .pair__shot img { aspect-ratio: 3 / 2; }
  .pair figcaption { margin-top: 0; padding-bottom: 4px; }

  /* --- hero --- */
  /* desktop copy sits left of frame against the horizontal scrim, so the
     block-level backing softens rather than reading as a dark slab */
  .hero__inner::before {
    left: calc(-1 * var(--pad-left));
    right: auto;
    width: calc(100% + var(--pad-left) + 12rem);
    bottom: -72px;
    /* Taller and heavier than it was: the H1 grew from 64px to 80px when
       the hierarchy was corrected, so it now reaches into brighter sky.
       Measured 3.24:1 before this, against a 3.0 floor - too tight. */
    top: -160px;
    background: linear-gradient(
      to top,
      rgba(31, 32, 34, .90)   0%,
      rgba(31, 32, 34, .86)  50%,
      rgba(31, 32, 34, .66)  78%,
      rgba(31, 32, 34, 0)   100%
    );
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 52%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0%, #000 52%, transparent 100%);
  }

  /* desktop restores the inline strip with vertical hairlines */
  .trust-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
  .trust-strip li { gap: 16px; }
  .trust-strip li::before { display: none; }
  .trust-strip li:not(:last-child)::after {
    content: "";
    width: 1px;
    height: 11px;
    background: var(--line-on-dark-hi);
  }

  /* The hero does NOT take the editorial indent. That stepped second
     level is right for the content sections, where a heading introduces
     a separate body of copy, but the hero is one block making one
     argument and splitting it in two pulls it apart. Everything here
     hangs off the same left edge as the headline. */
  .hero__inner { max-width: 46rem; gap: var(--gap-lg); }
  .hero__title { margin-left: -5px; }
  .hero__lede  { max-width: var(--maxw-lede); }
  .hero__actions { width: auto; }
  .hero__actions .btn { flex: 0 0 auto; }

  /* desktop has the header phone; the bar is a phone affordance */
  .callbar { display: none; }
}