/* =============================================================
   BAM Landscapes — stylesheet
   Design system: "Artisan Terroir" (see DESIGN.md)
   ============================================================= */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/libre-caslon-text-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/libre-caslon-text-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/work-sans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/work-sans-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  /* Charcoal scale — the dark half of the page is layered rather than flat,
     so sections separate tonally instead of by rule alone. Values follow the
     surface-container ramp in DESIGN.md. Slightly warm, never blue-grey. */
  --charcoal-900: #1a1a1a; /* deepest — footer                 */
  --charcoal-850: #1e1e1e; /* portfolio ground, images pop     */
  --charcoal-800: #232323; /* page ground — hero, header       */
  --charcoal-700: #2a2a29; /* about band, lifted               */
  --charcoal-600: #323231; /* raised panels and image beds     */
  --charcoal-500: #3f3f3d; /* edges and bright hairlines       */

  /* Aliases kept so existing rules read the same */
  --charcoal: var(--charcoal-800);
  --charcoal-deep: var(--charcoal-900);
  --charcoal-raised: var(--charcoal-600);

  --cream: #f9f7f2;
  --card: #ffffff;
  --stone: #e7dccb; /* warm stone — contact section */

  /* Brand accents */
  --gold: #efbe80; /* on dark only */
  --gold-quiet: #b48950; /* hairlines, decorative */
  --gold-deep: #7f5d21; /* accessible on light backgrounds */
  --champagne: #dcc4a1;

  /* Text */
  --on-dark: #e9e6e4;
  --on-dark-muted: #c3bcb2;
  --on-light: #1a1a1a;
  --on-light-muted: #55524d;

  /* Lines */
  --line-dark: rgb(255 255 255 / 0.11);
  --line-light: rgb(26 26 26 / 0.12);

  /* Type */
  --font-display: 'Libre Caslon Text', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* h1 sets on three lines. The longest, "Outdoor Spaces,", measures 7.665em,
     and the hero text column is at its tightest around 1920px (the content
     aligns to the 1440 wrap, so side padding grows faster than the column).
     This clamp keeps that line unbroken from 320px up. */
  --fs-h1: clamp(2.15rem, 4.7vw - 0.26rem, 3.5rem);
  --fs-h2: clamp(1.9rem, 1.25rem + 2.1vw, 2.9rem);
  --fs-h3: clamp(1.4rem, 1.25rem + 0.5vw, 1.7rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.2rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-label: 0.75rem;

  /* Rhythm */
  --wrap: 1440px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --header-h: 76px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.85s;
}

@media (min-width: 1024px) {
  :root { --header-h: 100px; }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--charcoal);
  color: var(--on-dark);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.nav-open { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.01em;
}
h2 { text-wrap: balance; }

p { margin: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection { background: var(--gold); color: #2a1800; }

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

.light-section :focus-visible { outline-color: var(--gold-deep); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 0; left: 50%;
  z-index: 200;
  transform: translate(-50%, -120%);
  background: var(--gold);
  color: #2a1800;
  padding: 0.85rem 1.5rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: transform 0.25s var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ---------- Layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

.light-section {
  background: var(--cream);
  color: var(--on-light);
}

.eyebrow {
  display: block;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
@media (min-width: 560px) {
  .eyebrow { letter-spacing: 0.34em; }
}
.light-section .eyebrow { color: var(--gold-deep); }

.eyebrow-rule {
  width: 3rem;
  height: 1px;
  border: 0;
  margin: 1.15rem 0 0;
  background: var(--gold-quiet);
  opacity: 0.55;
  /* Draws itself out from the eyebrow when the section reveals */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out) 0.18s;
}
.is-visible .eyebrow-rule { transform: scaleX(1); }

.lead {
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.75;
  color: var(--on-dark-muted);
}
.light-section .lead { color: var(--on-light-muted); }

.section-head { max-width: 46rem; }
.section-head .eyebrow { margin-bottom: 1.25rem; }
.section-head h2 { font-size: var(--fs-h2); }
.section-head p { margin-top: 1.5rem; }

/* ---------- Icons ---------- */
.icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
  flex: none;
}
.icon--solid { fill: currentColor; stroke: none; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--gold);
  --btn-border: color-mix(in srgb, var(--gold-quiet) 60%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  min-height: 56px;
  padding: 1rem 2.25rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color 0.35s var(--ease-out),
              color 0.35s var(--ease-out),
              border-color 0.35s var(--ease-out),
              transform 0.2s var(--ease-out);
}
.btn .icon { font-size: 1rem; transition: transform 0.35s var(--ease-out); }
/* Micro-lift on hover, settle on press — the whole control acknowledges you */
.btn:hover { transform: translateY(-2px); }
.btn:hover .icon { transform: translateX(4px); }
.btn:active { transform: translateY(0) scale(0.985); transition-duration: 0.09s; }

.btn--primary {
  --btn-bg: var(--champagne);
  --btn-fg: #1a1a1a;
  --btn-border: var(--champagne);
}
.btn--primary:hover { --btn-bg: var(--gold); --btn-border: var(--gold); }

.btn--ghost:hover {
  --btn-bg: rgb(239 190 128 / 0.09);
  --btn-border: var(--gold);
}

.btn--dark {
  --btn-bg: var(--charcoal);
  --btn-fg: #f4f2ef;
  --btn-border: var(--charcoal);
  padding-inline: 2.75rem;
  min-height: 62px;
}
.btn--dark:hover { --btn-bg: #2f2a22; --btn-border: #2f2a22; }

.btn--small { min-height: 48px; padding: 0.75rem 1.6rem; }

/* Text link with underline rule */
.link-rule {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding-block: 0.75rem 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  color: var(--gold);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: border-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
}
.link-rule .icon { font-size: 1.05rem; transition: transform 0.35s var(--ease-out); }
.link-rule:hover { border-bottom-color: var(--gold); }
.link-rule:hover .icon { transform: translateX(5px); }

/* =============================================================
   Header
   ============================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: var(--charcoal-800);
  border-bottom: 1px solid color-mix(in srgb, var(--gold-quiet) 35%, transparent);
  transition: box-shadow 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
}
.site-header.is-scrolled {
  background: var(--charcoal-850);
  box-shadow: 0 12px 30px -20px rgb(0 0 0 / 0.85);
}

/* Scroll-progress hairline pinned to the bottom edge of the header.
   Injected by JS, so it only exists when the enhancement is running. */
.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--gold-quiet), var(--gold));
  opacity: 0.85;
  pointer-events: none;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { transition: none; }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  padding-block: 0.35rem; /* keeps the tap target at 44px+ on phones */
}
.brand img {
  height: 40px;
  width: auto;
  transition: height 0.4s var(--ease-out);
}
@media (min-width: 1024px) {
  .brand img { height: 54px; }
  .is-scrolled .brand img { height: 46px; }
}

.nav-desktop { display: none; }

@media (min-width: 1024px) {
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: clamp(1.75rem, 2.6vw, 3rem);
  }
}

.nav-link {
  position: relative;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-dark);
  padding-block: 0.5rem;
  transition: color 0.3s var(--ease-out);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.nav-link:hover { color: var(--gold); }
.nav-link:hover::after,
.nav-link[aria-current='page']::after { transform: scaleX(1); }
.nav-link[aria-current='page'] { color: var(--gold); }

.header-cta { display: none; }
@media (min-width: 768px) { .header-cta { display: inline-flex; } }

/* Hamburger — the two icons are stacked and cross-fade with a quarter turn,
   so open/close reads as one control morphing rather than two swapping. */
.nav-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -0.6rem;
  color: var(--gold);
}
.nav-toggle .icon {
  position: absolute;
  font-size: 1.7rem;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.nav-toggle .icon--menu { opacity: 1; transform: none; }
.nav-toggle .icon--close { opacity: 0; transform: rotate(-90deg); }
.nav-toggle[aria-expanded='true'] .icon--menu { opacity: 0; transform: rotate(90deg); }
.nav-toggle[aria-expanded='true'] .icon--close { opacity: 1; transform: none; }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

/* Mobile drawer */
.nav-mobile {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 99;
  background: var(--charcoal-850);
  padding: 2.5rem var(--gutter) 3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-1.25rem);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out),
              visibility 0s linear 0.35s;
}
.nav-mobile[data-open='true'] {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
@media (min-width: 1024px) { .nav-mobile { display: none; } }

.nav-mobile ul {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-dark);
}
.nav-mobile li { border-bottom: 1px solid var(--line-dark); }
.nav-mobile li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--on-dark);
  transition: color 0.3s var(--ease-out);
}
.nav-mobile li > a .icon { font-size: 1.05rem; color: var(--gold-quiet); }
.nav-mobile li > a:hover { color: var(--gold); }
.nav-mobile .btn {
  width: 100%;
  margin-top: 2.25rem;
  font-family: var(--font-body);
  font-size: var(--fs-label);
}
.nav-mobile__contact {
  margin-top: 2.25rem;
  display: grid;
  gap: 0.9rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--on-dark-muted);
}
.nav-mobile__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
}
.nav-mobile__contact a:hover { color: var(--gold); }

/* =============================================================
   Hero
   ============================================================= */
main { padding-top: var(--header-h); }

/* The dark ground is graded rather than flat — a soft grey lift sits behind
   the headline and falls away toward the edges. The diagonal cut in the image
   panel exposes it, so the gradient lives on .hero, not on the text column. */
.hero {
  display: grid;
  background:
    radial-gradient(118% 96% at 20% 26%,
      var(--charcoal-600) 0%,
      var(--charcoal-800) 52%,
      var(--charcoal-850) 100%);
}

@media (min-width: 940px) {
  .hero {
    grid-template-columns: 44fr 56fr;
    min-height: min(780px, calc(100svh - var(--header-h)));
  }
}

.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3.5rem, 9vw, 6rem) var(--gutter);
  max-width: 46rem;
}
@media (min-width: 940px) {
  .hero__content {
    max-width: none;
    padding-block: clamp(4rem, 7vw, 6rem);
    padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
    padding-right: clamp(2rem, 3vw, 3.5rem);
  }
  .hero__content > * { max-width: 36rem; }
}

.hero__eyebrow { margin-bottom: clamp(2rem, 4vw, 2.75rem); }

.hero__title {
  font-size: var(--fs-h1);
  line-height: 1.08;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-block: 0.1em;
  margin-block: -0.1em;
}
.hero__title .line > span {
  display: block;
  text-wrap: balance;
}

.hero__rule {
  width: 4.5rem;
  height: 1px;
  border: 0;
  margin: 0 0 clamp(1.75rem, 3vw, 2.25rem);
  background: var(--gold-quiet);
  opacity: 0.7;
}
.hero__lead { margin-bottom: clamp(2.25rem, 4vw, 3rem); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.hero__actions .btn { flex: 1 1 15rem; }
@media (min-width: 480px) {
  .hero__actions .btn { flex: 0 0 auto; }
}

/* Portrait-ish frame on small screens keeps the paving and lawn in shot;
   the desktop panel fills whatever height the split hero resolves to. */
.hero__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 6;
  background: var(--charcoal-600);
}
@media (min-width: 600px) { .hero__media { aspect-ratio: 3 / 2; } }
@media (min-width: 940px) { .hero__media { aspect-ratio: auto; } }

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
}
/* Desktop only: the image panel is cut on a diagonal, with a bronze hairline
   running the length of the cut. Below 940px the hero stacks and the edge goes
   back to straight — a diagonal across a full-width phone image reads as a
   glitch, not a detail. */
@media (min-width: 940px) {
  .hero__media {
    --cut: 20%;
    clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%);
  }
  .hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: var(--gold-quiet);
    clip-path: polygon(
      calc(var(--cut) + 0.5px) 0,
      calc(var(--cut) + 2px) 0,
      2px 100%,
      0.5px 100%
    );
  }
}

/* =============================================================
   Services
   ============================================================= */
.services__head { text-align: center; margin-inline: auto; }
.services__head .eyebrow-rule { margin-inline: auto; }
.services__head p { margin-inline: auto; }

.card-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--card);
  border: 1px solid var(--line-light);
  color: var(--on-light);
  transition: transform 0.45s var(--ease-out),
              border-color 0.45s var(--ease-out),
              box-shadow 0.45s var(--ease-out);
}
.card:hover,
.card:focus-visible {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--gold-quiet) 55%, transparent);
  box-shadow: 0 18px 34px -26px rgb(26 26 26 / 0.55);
}

.card__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.card:hover .card__media img,
.card:focus-visible .card__media img { transform: scale(1.045); }

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
.card__body h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.9rem;
  text-wrap: balance;
}
/* Keep the body copy of all three cards starting on the same line */
@media (min-width: 720px) {
  .card__body h3 { min-height: 2.24em; }
}
.card__body p {
  flex: 1;
  color: var(--on-light-muted);
  margin-bottom: 2rem;
}

.card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.card__cta {
  position: relative;
  align-self: flex-start;
}
/* A gold underline wipes in beneath "Enquire" as the card lifts */
.card__cta::after {
  content: '';
  position: absolute;
  left: 0;
  right: 1.8rem;
  bottom: -0.35rem;
  height: 1px;
  background: var(--gold-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.card:hover .card__cta::after,
.card:focus-visible .card__cta::after { transform: scaleX(1); }
.card__cta .icon { font-size: 1.05rem; transition: transform 0.45s var(--ease-out); }
.card:hover .card__cta .icon,
.card:focus-visible .card__cta .icon { transform: translateX(6px); }

/* =============================================================
   About
   ============================================================= */
/* The about block carries the most air on the page, and sits a step
   lighter than the hero so the two dark bands read as separate rooms. */
.about {
  background: var(--charcoal-700);
  border-block: 1px solid var(--charcoal-500);
  padding-block: clamp(5.5rem, 12vw, 11rem);
}

.about__grid {
  display: grid;
  gap: clamp(3rem, 7vw, 6rem);
  align-items: stretch;
}
@media (min-width: 900px) {
  .about__grid { grid-template-columns: 1fr 1fr; gap: clamp(3.5rem, 7vw, 7rem); }
}

.about__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--charcoal-600);
}
/* On desktop the panel drops its fixed ratio and fills the full height of the
   text column, so its top and bottom line up with the copy instead of the
   image floating vertically-centred and sitting low. */
@media (min-width: 900px) {
  .about__media { aspect-ratio: auto; height: 100%; min-height: 100%; }
}
.about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about__media::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--line-dark);
  pointer-events: none;
}

.about__body h2 {
  font-size: var(--fs-h2);
  margin: 1.25rem 0 1.75rem;
}
.about__body p + p { margin-top: 1.25rem; }
.about__body .link-rule { margin-top: 2.5rem; }

.about__points {
  display: grid;
  gap: 1rem;
  margin-top: 2.75rem;
  padding: clamp(1.4rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem);
  background: var(--charcoal-600);
  border: 1px solid var(--charcoal-500);
}
@media (min-width: 560px) {
  .about__points { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
.about__points li {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--on-dark-muted);
  padding-top: 0.95rem;
  border-top: 1px solid color-mix(in srgb, var(--gold-quiet) 45%, transparent);
  text-wrap: balance;
}

/* =============================================================
   Portfolio
   ============================================================= */
.work {
  background: var(--charcoal-850);
  border-top: 1px solid var(--charcoal-500);
}

.work__head {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
}
@media (min-width: 900px) {
  .work__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
  }
}

.work-grid {
  display: grid;
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
}
/* Tablet: two full-width bands over a pair of squares — no orphan cell */
@media (min-width: 700px) {
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(0, 300px);
  }
  .work-item--feature,
  .work-item--wide { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .work-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, minmax(0, 340px));
  }
  .work-item--feature { grid-column: span 2; grid-row: span 2; }
  .work-item--wide { grid-column: span 2; }
}

.work-item {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: var(--charcoal-600);
  min-height: 0;
}
@media (max-width: 699px) {
  .work-item { aspect-ratio: 4 / 3; }
  .work-item--feature { aspect-ratio: 4 / 5; }
}

.work-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
/* Bias the feature crop downwards so the paving reads, not the pergola roof */
.work-item--feature img { object-position: center 68%; }
.work-item:hover img,
.work-item:focus-visible img { transform: scale(1.04); }

.work-item__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(19 19 19 / 0.88) 0%,
    rgb(19 19 19 / 0.55) 32%,
    rgb(19 19 19 / 0.12) 62%,
    rgb(19 19 19 / 0) 100%
  );
  transition: opacity 0.5s var(--ease-out);
  opacity: 0.9;
}
.work-item:hover .work-item__scrim,
.work-item:focus-visible .work-item__scrim { opacity: 1; }

.work-item__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.35rem, 2.6vw, 2.5rem);
  transition: transform 0.5s var(--ease-out);
}
.work-item:hover .work-item__caption,
.work-item:focus-visible .work-item__caption { transform: translateY(-6px); }

/* Circular arrow badge — fades and eases in on hover, an editorial
   "view this project" affordance. Decorative, so aria-hidden in markup. */
.work-item__badge {
  position: absolute;
  top: clamp(1rem, 2vw, 1.5rem);
  right: clamp(1rem, 2vw, 1.5rem);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: 50%;
  background: rgb(19 19 19 / 0.35);
  color: #fff;
  opacity: 0;
  transform: translateY(-6px) scale(0.9);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out),
              background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.work-item__badge .icon { font-size: 1.05rem; }
.work-item:hover .work-item__badge,
.work-item:focus-visible .work-item__badge {
  opacity: 1;
  transform: none;
  background: var(--gold);
  border-color: var(--gold);
  color: #2a1800;
}

.work-item__place {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.work-item__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.6rem);
  line-height: 1.2;
  color: #fff;
}
.work-item--feature .work-item__title {
  font-size: clamp(1.4rem, 1rem + 1.3vw, 2.15rem);
}

.work__footer {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  display: flex;
  justify-content: center;
}
@media (min-width: 900px) { .work__footer { display: none; } }

.work__head .btn--headline { display: none; }
@media (min-width: 900px) { .work__head .btn--headline { display: inline-flex; } }

/* =============================================================
   Contact CTA
   ============================================================= */
.contact {
  background: var(--stone);
  color: var(--on-light);
  text-align: center;
}
.contact .wrap { max-width: 56rem; }
.contact .eyebrow { color: var(--gold-deep); }
.contact .eyebrow-rule { margin-inline: auto; opacity: 0.7; }
.contact h2 {
  font-size: var(--fs-h2);
  margin: 1.5rem 0 1.75rem;
}
.contact p {
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.75;
  color: #4a453d;
  max-width: 38rem;
  margin-inline: auto;
}
.contact .btn { margin-top: clamp(2.25rem, 4vw, 3rem); }
.contact__aside {
  margin-top: 2rem;
  font-size: 0.95rem;
  color: #5b554b;
}
.contact__aside a {
  color: #3a352d;
  border-bottom: 1px solid rgb(58 53 45 / 0.35);
  padding-bottom: 1px;
  transition: border-color 0.3s var(--ease-out);
}
.contact__aside a:hover { border-bottom-color: #3a352d; }

/* =============================================================
   Footer
   ============================================================= */
.site-footer {
  background: var(--charcoal-900);
  border-top: 1px solid var(--charcoal-500);
  color: var(--on-dark-muted);
  font-size: 1.0625rem;
  line-height: 1.8;
}

.site-footer__grid {
  display: grid;
  gap: clamp(2.75rem, 5vw, 4.5rem);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: clamp(2.5rem, 4vw, 5rem);
  }
}

.site-footer__brand img { height: 46px; width: auto; margin-bottom: 1.75rem; }
.site-footer__brand p { max-width: 30rem; margin-bottom: 2rem; }

.footer-heading {
  display: block;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
}

.footer-list { display: grid; gap: 0.25rem; }
.footer-list a,
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px; /* comfortable tap targets on phones */
  color: var(--on-dark-muted);
  transition: color 0.3s var(--ease-out);
}
.footer-list a:hover,
.footer-contact a:hover { color: var(--gold); }

/* Footer nav links grow a short gold rule and step in slightly on hover */
.footer-list a {
  position: relative;
  padding-left: 0;
  transition: color 0.3s var(--ease-out), padding-left 0.3s var(--ease-out);
}
.footer-list a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--gold-quiet);
  transition: width 0.3s var(--ease-out);
}
.footer-list a:hover,
.footer-list a:focus-visible { padding-left: 1.4rem; }
.footer-list a:hover::before,
.footer-list a:focus-visible::before { width: 0.9rem; }

.footer-contact { display: grid; gap: 0.35rem; justify-items: start; }
.footer-contact .icon { font-size: 1.05rem; color: var(--gold-quiet); }
.footer-contact address .icon { margin-top: 0.4em; }
.footer-contact address {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 0.75rem;
  font-style: normal;
}

.social {
  display: flex;
  gap: 0.85rem;
}
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: var(--charcoal-700);
  border: 1px solid var(--charcoal-500);
  color: var(--on-dark-muted);
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out),
              background-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.social a .icon { font-size: 1.15rem; transition: transform 0.3s var(--ease-out); }
.social a:hover {
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold-quiet) 60%, transparent);
  background: var(--charcoal-600);
  transform: translateY(-3px);
}
.social a:active { transform: translateY(-1px); transition-duration: 0.09s; }

.site-footer__base {
  border-top: 1px solid var(--charcoal-500);
  padding-block: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: #979089;
}
@media (min-width: 768px) {
  .site-footer__base { flex-direction: row; justify-content: space-between; align-items: center; }
}
.site-footer__areas { max-width: 60ch; }

/* =============================================================
   Motion — hero load-in + scroll reveal
   ============================================================= */
.hero__eyebrow,
.hero__rule,
.hero__lead,
.hero__actions {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur) var(--ease-out) var(--d, 0s),
              transform var(--dur) var(--ease-out) var(--d, 0s);
}
.hero__title .line > span {
  transform: translateY(105%);
  transition: transform var(--dur) var(--ease-out) var(--d, 0s);
}
.hero__media img {
  transform: scale(1.04);
  transition: transform 1.6s var(--ease-out);
}

.hero.is-loaded .hero__eyebrow,
.hero.is-loaded .hero__rule,
.hero.is-loaded .hero__lead,
.hero.is-loaded .hero__actions { opacity: 1; transform: none; }
.hero.is-loaded .hero__title .line > span { transform: none; }
.hero.is-loaded .hero__media img { transform: scale(1); }

.hero__eyebrow { --d: 0.05s; }
.hero__title .line:nth-child(1) > span { --d: 0.16s; }
.hero__title .line:nth-child(2) > span { --d: 0.27s; }
.hero__title .line:nth-child(3) > span { --d: 0.38s; }
.hero__rule { --d: 0.52s; }
.hero__lead { --d: 0.60s; }
.hero__actions { --d: 0.72s; }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-out) var(--d, 0s),
              transform 0.9s var(--ease-out) var(--d, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Image reveal — mask wipes upward, image settles from a slight scale */
.reveal-media { overflow: hidden; }
.reveal-media > img {
  transform: scale(1.06);
  opacity: 0;
  transition: transform 1.4s var(--ease-out), opacity 1s var(--ease-out);
}
.reveal-media.is-visible > img { transform: scale(1); opacity: 1; }

/* Stagger helper */
.stagger > * { transition-delay: var(--d, 0s); }

/* =============================================================
   Reduced motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .hero__eyebrow,
  .hero__rule,
  .hero__lead,
  .hero__actions,
  .reveal { opacity: 1; transform: none; }
  .hero__title .line > span { transform: none; }
  .hero__media img,
  .reveal-media > img { transform: none; opacity: 1; }
  .eyebrow-rule { transform: none; }
}

/* No-JS fallback — never hide content if the script fails */
.no-js .reveal,
.no-js .hero__eyebrow,
.no-js .hero__rule,
.no-js .hero__lead,
.no-js .hero__actions { opacity: 1; transform: none; }
.no-js .hero__title .line > span { transform: none; }
.no-js .hero__media img,
.no-js .reveal-media > img { transform: none; opacity: 1; }
.no-js .eyebrow-rule { transform: none; }
.no-js .nav-toggle { display: none; }

/* Print */
@media print {
  .site-header, .nav-mobile, .work__footer, .skip-link { display: none; }
  body { background: #fff; color: #000; }
}