/* ==========================================================================
   WD Thomas Homes — Design System + Homepage styles
   Rules live in STYLE-GUIDE.md. Every new page must use these tokens.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Reckless Neue";
  src: url("../fonts/RecklessNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Color */
  --bg: #E8E6E6;
  --secondary: #221E1F;
  --accent: #998478;
  --white: #FFFFFF;

  /* Type families */
  --font-head: "Reckless Neue", Georgia, serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Type scale — desktop */
  --fs-h1: 64px;
  --fs-h2: 48px;
  --fs-h3: 30px;
  --fs-h4: 24px;
  --fs-body: 16px;
  --fs-eyebrow: 14px;
  --fs-btn: 14px;
  --fs-menu: 15px;

  /* Layout: wide sections, minimal side padding */
  --gutter: clamp(24px, 4.2vw, 80px);
  --section-y: clamp(64px, 8vw, 128px);
  --gap: clamp(12px, 1.4vw, 24px);
  --max: 2000px;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* Type scale — mobile */
@media (max-width: 768px) {
  :root {
    --fs-h1: 48px;
    --fs-h2: 34px;
    --fs-h3: 24px;
    --fs-h4: 18px;
    --fs-body: 14px;
    --fs-eyebrow: 12px;
    --fs-btn: 12px;
    --fs-menu: 13px;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--secondary);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.7;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 400;
  margin: 0;
  line-height: 1.1;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4 { font-family: var(--font-head); font-weight: 400; margin: 0; font-size: var(--fs-h4); line-height: 1.2; }

.eyebrow, .label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--accent);
}

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.stack > * + * { margin-top: 20px; }
.stack > .eyebrow + h2, .stack > .eyebrow + h1 { margin-top: 14px; }
.section-head { margin-bottom: clamp(32px, 4vw, 56px); }
.section-head h2 { margin-top: 14px; }
.section-cta { margin-top: clamp(32px, 4vw, 56px); display: flex; justify-content: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 34px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-btn);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover { background: var(--secondary); border-color: var(--secondary); }
.btn--outline { background: transparent; color: var(--secondary); }
.btn--outline:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
/* on dark backgrounds the solid button flips to white on hover */
.on-dark .btn:hover, .btn--on-dark:hover { background: var(--white); border-color: var(--white); color: var(--secondary); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  color: var(--white);
  transition: background-color .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
/* Solid state (scrolled, or .is-solid pages): the page background color, dark menu text, standard dark logo */
.site-header.is-scrolled { background: var(--bg); color: var(--secondary); }
.site-header::after { /* full-width 1px accent line along the bottom of the solid header (a pseudo-element, so the header's height doesn't change) */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent);
  opacity: 0; transition: opacity .4s var(--ease); pointer-events: none;
}
.site-header.is-scrolled::after, .site-header.is-solid::after { opacity: 1; }
.menu-open .site-header::after { opacity: 0; }
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px var(--gutter);
  transition: padding .4s var(--ease);
}
.is-scrolled .nav { padding-block: 8px; }
.site-header { --nav-pad: 18px; --logo-box: 92px; --logo-img: 62px; --logo-circle: 110px; }
.site-header.is-scrolled, .site-header.is-solid { --nav-pad: 8px; --logo-box: 62px; --logo-img: 62px; }
.nav__side { display: flex; align-items: center; align-self: stretch; gap: clamp(20px, 2.6vw, 44px); }
.nav__side--right { justify-content: flex-end; }
.nav__link {
  font-size: var(--fs-menu);
  text-transform: uppercase;
  line-height: 1;
  padding-block: 10px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: .92;
  transition: opacity .3s var(--ease), color .3s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 4px;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__link:hover, .nav__item:hover > .nav__link { opacity: 1; color: var(--accent); }
.nav__link:hover::after, .nav__item:hover > .nav__link::after { transform: scaleX(1); }
.nav__link .chev { width: 9px; height: 9px; transition: transform .3s var(--ease); }
.nav__item:hover .chev, .nav__item:focus-within .chev { transform: rotate(180deg); }

.nav__item { position: relative; }
/* The About item reaches down to the header's bottom edge (through the header's own padding), so its dropdown opens below the header and its accent line, never under them, and the pointer never leaves the item on the way down */
.nav__side .nav__item { align-self: stretch; display: flex; align-items: center; padding-bottom: var(--nav-pad); margin-bottom: calc(var(--nav-pad) * -1); }
.dropdown {
  position: absolute;
  top: 100%; left: -22px; /* touches the header's bottom edge, so its side strokes run straight down from the header's accent line */
  min-width: 210px; width: max-content; /* as wide as the longest link, so none of them wrap */
  padding: 10px 0;
  background: var(--bg); color: var(--secondary); border: 1px solid var(--accent); border-top: 0; /* no top stroke: the header's own line sits above it */
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.nav__item:hover .dropdown, .nav__item:focus-within .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a {
  display: block; white-space: nowrap;
  padding: 12px 22px;
  font-size: var(--fs-menu);
  text-transform: uppercase;
  opacity: .85;
  transition: opacity .25s, color .25s;
}
.dropdown a:hover { opacity: 1; color: var(--accent); }

/* The logo sits in a fixed-height box (the header's height never depends on the logo). Over a hero it is the standard dark logo inside an off-white circle; once the header goes solid the circle fades out and the logo settles into the bar. */
.nav__logo { position: relative; display: grid; place-items: center; height: var(--logo-box); transition: height .4s var(--ease); }
.nav__logo::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: var(--logo-circle); aspect-ratio: 1; border-radius: 50%;
  background: var(--bg); transform: translate(-50%, -50%);
  transition: opacity .4s var(--ease); pointer-events: none;
}
.site-header.is-scrolled .nav__logo::before, .site-header.is-solid .nav__logo::before { opacity: 0; }
.nav__logo img { position: relative; height: var(--logo-img); width: auto; transition: height .4s var(--ease); }

.nav .btn { padding: 14px 26px; }
/* over the hero the button flips to white on hover; on the light header it uses the normal dark hover */
.site-header:not(.is-scrolled):not(.is-solid) .nav .btn:hover { background: var(--white); border-color: var(--white); color: var(--secondary); }

.burger { display: none; width: 44px; height: 44px; position: relative; }
.burger span { position: absolute; left: 10px; right: 10px; height: 1px; background: currentColor; transition: transform .35s var(--ease), opacity .25s; }
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 28px; }
.menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-open .burger span:nth-child(2) { opacity: 0; }
.menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0;
  z-index: 90;
  background: var(--bg);
  color: var(--secondary);
  padding: 120px var(--gutter) 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
  overflow-y: auto;
}
.menu-open .mobile-menu { opacity: 1; visibility: visible; }
/* the open mobile menu uses the page background color, so the header over it keeps dark text and the dark logo */
.menu-open .site-header, .menu-open .site-header.is-scrolled, .menu-open .site-header.is-solid { background: transparent; color: var(--secondary); }
.menu-open { overflow: hidden; }
.mobile-menu nav { margin-top: auto; border-bottom: 1px solid rgba(34,30,31,.18); } /* links sit at the bottom, just above the Contact Us button */
.mobile-menu nav > a, .mnav__toggle {
  display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left;
  font-family: var(--font-head); font-size: var(--fs-h2); line-height: 1.2; color: var(--secondary);
  padding: 16px 0;
  border-top: 1px solid rgba(34,30,31,.18);
}
.mnav__icon { position: relative; width: 14px; height: 14px; flex: none; opacity: .6; }
.mnav__icon::before, .mnav__icon::after { content: ""; position: absolute; background: currentColor; transition: transform .35s var(--ease); }
.mnav__icon::before { left: 0; right: 0; top: 50%; height: 1px; }
.mnav__icon::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.mnav__toggle[aria-expanded="true"] .mnav__icon::after { transform: scaleY(0); } /* plus turns into a minus */
.mnav__group { border-top: 1px solid rgba(34,30,31,.18); }
.mnav__group .mnav__toggle { border-top: 0; }
.mnav__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.mnav__sub > div { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.mnav__toggle[aria-expanded="true"] + .mnav__sub { grid-template-rows: 1fr; }
.mnav__sub a { font-size: var(--fs-body); opacity: .75; }
.mnav__sub > div::after { content: ""; display: block; height: 4px; } /* breathing room under the sub links */
.mobile-menu .btn { margin-top: 32px; width: 100%; }

@media (max-width: 1024px) {
  .nav { grid-template-columns: 44px 1fr 44px; }
  .nav__side { display: none; }
  .burger { display: block; grid-column: 3; grid-row: 1; }
  .nav__logo { grid-column: 2; grid-row: 1; justify-self: center; }
  .site-header { --logo-box: 70px; --logo-img: 48px; --logo-circle: 88px; }
  .site-header.is-scrolled, .site-header.is-solid { --logo-box: 54px; --logo-img: 54px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 600px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--white);
  overflow: hidden;
}
.hero__bg, .hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__bg img { transform: scale(1.04); animation: heroZoom 14s var(--ease) forwards; }
@keyframes heroZoom { to { transform: scale(1); } }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(20,17,18,.55), rgba(20,17,18,.5) 50%, rgba(20,17,18,.62)); }
.hero__content { position: relative; z-index: 2; padding: 100px var(--gutter) 40px; max-width: 1100px; }
.hero .eyebrow { color: var(--white); opacity: .9; }
.hero h1 { margin-top: 20px; }
.hero .btn { margin-top: 40px; }

/* ---------- Stats ---------- */
.stats { background: var(--secondary); color: var(--white); padding-block: clamp(48px, 6vw, 88px); }
.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.stat h2 { color: var(--white); line-height: 1.05; }
.stat .label { margin-top: 8px; color: var(--accent); }
.stat + .stat { border-left: 1px solid rgba(255,255,255,.1); }
@media (max-width: 768px) { .stats__grid { grid-template-columns: .8fr .8fr 1.4fr; } .stat { padding-inline: 4px; } }
@media (max-width: 768px) {
}

/* ---------- About ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); align-items: center; }
.about .split { gap: clamp(32px, 6vw, 112px); }
.about__img { aspect-ratio: 1 / 1; overflow: hidden; }
.about__img img { width: 100%; height: 100%; object-fit: cover; }
.about__copy { max-width: 620px; }
.about__copy .btn { margin-top: 12px; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
}

/* ---------- Why us ---------- */
.why { padding-top: 0; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.why-card { position: relative; background: var(--white); padding: clamp(40px, 4vw, 68px) clamp(32px, 3.4vw, 60px); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.why-card::before { content: ""; position: absolute; inset: 12px; border: 1px solid var(--accent); pointer-events: none; }
.why-card .rule { display: block; width: 44px; height: 1px; background: var(--accent); margin: 22px auto; }
.why-card .num { margin-bottom: 26px; }
@media (max-width: 900px) { .cards-3 { grid-template-columns: 1fr; } }

/* ---------- What we build ---------- */
.build { position: relative; color: var(--white); overflow: hidden; }
.build__bg { position: absolute; inset: 0; }
.build__bg img { width: 100%; height: 100%; object-fit: cover; }
.build__bg::after { content: ""; position: absolute; inset: 0; background: rgba(10,8,9,.8); }
.build .wrap { position: relative; z-index: 1; }
.build .split { gap: clamp(32px, 6vw, 112px); }
.build__copy { max-width: 620px; }
.build__copy p { opacity: .88; }
.ticks { margin-top: 28px !important; }
.ticks li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.14); }
.ticks li:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.ticks li::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--accent); transform: translateY(-2px); }
.build__copy .btn { margin-top: 36px; }
.build__img { aspect-ratio: 4 / 3.3; overflow: hidden; }
.build__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .build__img { aspect-ratio: 4 / 3; } }

/* ---------- Featured projects ---------- */
.projects__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.project { background: var(--white); display: block; }
.project__img { aspect-ratio: 4 / 3; overflow: hidden; }
.project__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.project:hover .project__img img { transform: scale(1.04); }
.project__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(20px, 2vw, 32px); }
.project__bar h3 { text-align: left; }
.project__bar .label { margin-top: 6px; }
.project__bar .btn { padding: 14px 24px; }
.project:hover .btn--outline { background: var(--accent); color: var(--white); }
@media (max-width: 1100px) { .project__bar { flex-direction: column; align-items: flex-start; } } /* two narrow columns on tablets: stack the name above the button */
@media (max-width: 768px) {
  .projects__grid { grid-template-columns: 1fr; }
}

/* ---------- Process ---------- */
.process { padding-top: 0; }
.step { position: relative; padding-top: 8px; text-align: center; }
.step__num {
  display: block;
  font-family: var(--font-head);
  font-size: 84px; /* unique size, exception to the scale */
  position: relative;
  top: -8px;
  line-height: 1;
  color: var(--secondary);
  opacity: .08;
}
.step h3 { margin-top: calc(84px * -.42); position: relative; }
.step .rule { display: block; width: 44px; height: 1px; background: var(--accent); margin: 26px auto 20px; }
.process__grid { gap: clamp(28px, 4vw, 72px); }

/* ---------- Where we build ---------- */
.where { background: var(--secondary); color: var(--white); }
.where .split { align-items: stretch; gap: clamp(32px, 5vw, 96px); }
.where__img { min-height: 480px; overflow: hidden; }
.where__img img { width: 100%; height: 100%; object-fit: cover; }
.where__copy { display: flex; flex-direction: column; justify-content: center; }
.where__copy > p { opacity: .8; max-width: 560px; }
.areas { margin-top: 32px; }
.areas li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.14); }
.areas li:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.areas h4 { font-size: var(--fs-h4); }
.areas li.is-secondary { opacity: .8; }
.where .btn { margin-top: 36px; align-self: flex-start; }
@media (max-width: 900px) { .where__img { width: 100%; min-height: 0; aspect-ratio: 4 / 3; } } /* no min-height here: with an aspect-ratio it would force the image wider than a phone screen */

/* ---------- Testimonials ---------- */
.testimonials { padding-bottom: 0; }
.tst { max-width: 980px; margin-inline: auto; text-align: center; }
.stars { display: flex; justify-content: center; gap: 6px; color: var(--accent); margin-bottom: 30px; }
.stars svg { width: 18px; height: 18px; fill: currentColor; }
.tst__stage { display: grid; }
.tst__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility .7s; }
.tst__slide.is-active { opacity: 1; visibility: visible; }
.tst__quote { font-family: var(--font-head); font-size: var(--fs-h4); line-height: 1.4; }
.tst__name { margin-top: 28px; }
.tst__nav { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 40px; }
.tst__btn {
  width: 52px; height: 52px; border: 1px solid var(--accent); display: grid; place-items: center;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.tst__btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.2; }
.tst__btn:hover { background: var(--accent); color: var(--white); }
.tst__count { min-width: 56px; }

/* ---------- FAQ ---------- */
.faq .split { align-items: stretch; gap: clamp(32px, 6vw, 112px); }
.faq__list { margin-top: 32px; border-bottom: 1px solid rgba(34,30,31,.18); }
.faq-item { border-top: 1px solid rgba(34,30,31,.18); }
.faq-item__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0; text-align: left;
  font-family: var(--font-head); font-size: var(--fs-h4); line-height: 1.25;
}
.faq-item__icon { position: relative; flex: none; width: 16px; height: 16px; }
.faq-item__icon::before, .faq-item__icon::after {
  content: ""; position: absolute; background: var(--accent); top: 50%; left: 0; width: 100%; height: 1px;
  transition: transform .4s var(--ease);
}
.faq-item__icon::after { transform: rotate(90deg); }
.faq-item.is-open .faq-item__icon::after { transform: rotate(0); }
.faq-item__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.faq-item.is-open .faq-item__a { grid-template-rows: 1fr; }
.faq-item__a > div { overflow: hidden; }
.faq-item__a p { padding: 0 40px 26px 0; opacity: 0; transform: translateY(-6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.faq-item.is-open .faq-item__a p { opacity: .85; transform: none; }
.faq__img { overflow: hidden; min-height: 520px; }
.faq__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .faq__img { min-height: 0; aspect-ratio: 4 / 3; } }

/* ---------- CTA ---------- */
.cta { position: relative; color: var(--white); text-align: center; overflow: hidden; padding-block: clamp(96px, 12vw, 190px); }
.cta__bg { position: absolute; inset: 0; }
.cta__bg img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; will-change: transform; } /* a little taller than the banner so it can drift (parallax, see main.js) */
.cta__bg::after { content: ""; position: absolute; inset: 0; background: rgba(15,12,13,.62); }
.cta .wrap { position: relative; z-index: 1; }
.cta h2 { max-width: 900px; margin-inline: auto; }
.cta .btn { margin-top: 36px; }
.cta .btn:hover { background: var(--white); border-color: var(--white); color: var(--secondary); }

/* ---------- Map ---------- */
.map { height: clamp(360px, 38vw, 560px); background: #cfcdcd; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) contrast(1.05); }

/* ---------- Footer ---------- */
.footer { background: var(--secondary); color: var(--white); padding-top: clamp(56px, 6vw, 96px); }
.footer__grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.3fr; gap: clamp(28px, 4vw, 72px); padding-bottom: clamp(48px, 5vw, 80px); }
.footer__logo img { width: 190px; height: auto; }
.footer .label { color: var(--accent); margin-bottom: 22px; }
.footer li + li { margin-top: 10px; }
.footer a { opacity: .85; transition: opacity .25s, color .25s; }
.footer a:hover { opacity: 1; color: var(--accent); }
.footer address { font-style: normal; opacity: .85; }
.footer__contact li { display: block; }
.footer__contact .k { display: block; opacity: .55; font-size: var(--fs-body); }
.footer__bar { border-top: 1px solid rgba(255,255,255,.12); padding-block: 26px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 10px; opacity: .7; }
.footer__bar a { opacity: 1; }
.social { display: inline-flex; align-items: center; gap: 10px; }
.social svg { width: 20px; height: 20px; fill: currentColor; }
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.btn.reveal { transition: opacity .9s var(--ease), transform .9s var(--ease), background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); } /* a button that fades in keeps its soft hover color change */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__bg img { animation: none; transform: none; }
  html { scroll-behavior: auto; }
}

/* Shown where CMS content goes if it is empty or can't load */
.cms-note { grid-column: 1 / -1; text-align: center; padding: 48px 0; }