/* =================================================================
   Pasquini Engineering, Inc. — styles.css
   1. Tokens   2. Base   3. Keyframes   4. Shared classes
   5. Section classes (named <page>-<section>__<role>)
   6. Responsive overrides (tablet ≤1024px, mobile ≤768px)
   7. Hand-built components (nav toggle, sticky bar, chat, motion prefs)
   Class names were generated from the design. Edit values here, not in HTML.
   ================================================================= */

/* ---------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------- */
:root {
  /* Color */
  --black: #1a1a1a;
  --cream: #fbf9f5;
  --gold: #d9a441;
  --gold-dark: #c28f2e;
  --gold-light: #e9c78a;
  --ink: #1e2a35;
  --ink-dark: #131c24;
  --ink-deep: #0f161d;
  --ink-soft: #25323f;
  --line: #e3dccf;
  --line-strong: #d6cdbd;
  --muted: #857c70;
  --muted-light: #9a9084;
  --on-dark-muted: #d4cbbb;
  --online-green: #7fb069;
  --sand: #e7c9a6;
  --slate: #c9d2da;
  --terracotta: #b9603a;
  --terracotta-dark: #9a4c2d;
  --text: #3a3631;
  --text-soft: #5c564e;
  --travertine: #f4efe6;
  --travertine-dark: #eae3d6;
  --white: #ffffff;

  /* Type */
  --font-display: Jost, sans-serif;
  --font-body: 'Source Sans 3', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;

  /* Motion */
  --ease-out: cubic-bezier(.22,1,.36,1);

  /* Layout */
  --container: 1140px;
  --radius-sm: 2px;
  --radius: 3px;
  --radius-arch: 160px 160px 3px 3px;
  --shadow-lift: 0 18px 40px rgba(30,42,53,0.14);
}

/* ---------------------------------------------------------------
   2. Base
   --------------------------------------------------------------- */
body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--white); }
body.bg-cream { background: var(--cream); }
/* Zero-specificity link defaults so every component class wins. */
:where(a) { color: var(--terracotta); text-decoration: none; }
:where(a:hover) { color: var(--ink); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 10001; background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 700; transition: top .2s; }
.skip-link:focus { top: 12px; color: var(--white); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
pe-house-3d { display: block; }

/* ---------------------------------------------------------------
   3. Keyframes
   --------------------------------------------------------------- */
@keyframes peFlyUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes peFadeIn{from{opacity:0}to{opacity:1}}
@keyframes peChatIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes peDot{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* ---------------------------------------------------------------
   4. Shared (used in 2+ sections)
   --------------------------------------------------------------- */
.div {
  font-family: var(--font-body);
}
.span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
}
.row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.container {
  max-width: 1140px;
  margin: 0 auto;
}
.rule {
  width: 48px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 500;
  margin-bottom: 14px;
}
.rule-2 {
  width: 32px;
  height: 1px;
  background: var(--terracotta);
  display: inline-block;
}
.link {
  font-weight: 600;
  font-size: 15px;
  border-bottom: 1px solid var(--terracotta);
  padding-bottom: 2px;
  white-space: nowrap;
}
.rule-3 {
  width: 32px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}
.eyebrow-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 500;
  margin-bottom: 14px;
}
.section {
  background: var(--travertine);
  padding: 96px 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.container-2 {
  padding: 96px 24px;
  max-width: 1140px;
  margin: 0 auto;
}
.section-2 {
  background: var(--travertine);
  padding: 96px 24px;
  border-top: 1px solid var(--line);
}
.grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
  margin-bottom: 40px;
}
.h2 {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
}
.div-2 {
  font-size: 14px;
  line-height: 1.6;
}
.eyebrow-3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 500;
  margin-bottom: 16px;
}
.row-2 {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-gold {
  background: var(--gold);
  color: var(--black);
  padding: 15px 30px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 15.5px;
  font-family: var(--font-display);
}
.btn-gold:hover {
  background: var(--gold-dark);
  color: var(--black);
}
.btn-outline-light {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.7);
  color: var(--white);
  padding: 14px 28px;
  border-radius: 2px;
  font-weight: 600;
  font-size: 15.5px;
  font-family: var(--font-display);
}
.btn-outline-light:hover {
  background: var(--white);
  color: var(--ink);
}
.div-3 {
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--gold-light);
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.span-2 {
  color: var(--muted);
}
.section-3 {
  background-color: var(--ink);
  background-image: linear-gradient(rgba(233,199,138,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(233,199,138,0.07) 1px,transparent 1px);
  background-size: 48px 48px;
  color: var(--white);
  text-align: center;
  padding: 76px 24px;
  border-bottom: 3px solid var(--terracotta);
}
.eyebrow-4 {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 700;
  margin-bottom: 12px;
}
.h1 {
  animation: peFlyUp .8s var(--ease-out) .15s backwards;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  margin: 0;
}
.container-3 {
  padding: 76px 24px;
  max-width: 1140px;
  margin: 0 auto;
}
.img {
  width: 100%;
  border-radius: 3px;
}
.h2-2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 18px;
}
.text {
  line-height: 1.8;
  margin: 0 0 26px;
}
.section-4 {
  background: var(--terracotta);
  color: var(--white);
  text-align: center;
  padding: 66px 24px;
}
.h2-3 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 12px;
}
.row-3 {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}
.btn-gold-2 {
  background: var(--gold);
  color: var(--black);
  padding: 13px 28px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 15px;
}
.btn-gold-2:hover {
  background: var(--gold-dark);
  color: var(--black);
}
.btn-outline-light-2 {
  background: transparent;
  border: 2px solid var(--white);
  color: var(--white);
  padding: 11px 26px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 15px;
}
.btn-outline-light-2:hover {
  background: var(--white);
  color: var(--ink);
}
.div-4 {
  margin-top: 16px;
  font-size: 13.5px;
  opacity: 0.85;
}
.h1-2 {
  animation: peFlyUp .8s var(--ease-out) .15s backwards;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
.link-2 {
  font-weight: 700;
  font-size: 14px;
}
.section-5 {
  background-color: var(--ink);
  background-image: linear-gradient(rgba(233,199,138,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(233,199,138,0.07) 1px,transparent 1px);
  background-size: 48px 48px;
  color: var(--white);
  text-align: center;
  padding: 80px 24px;
  border-bottom: 3px solid var(--terracotta);
}
.eyebrow-5 {
  animation: peFlyUp .7s var(--ease-out) 0s backwards;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 700;
  margin-bottom: 12px;
}
.div-5 {
  position: relative;
  aspect-ratio: 975/610;
  border: 1px solid var(--line);
  background: var(--cream);
  border-radius: 3px;
  overflow: hidden;
}
.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}
.stack-2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
}
.row-4 {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
}
.row-5 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.span-3 {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: var(--sand);
  display: inline-block;
  flex: none;
}
.span-4 {
  font-weight: 600;
  color: var(--ink);
}
.span-5 {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: var(--slate);
  display: inline-block;
  flex: none;
}
.text-2 {
  margin: 0;
  text-wrap: pretty;
}
.strong {
  color: var(--ink);
}
.container-4 {
  padding: 70px 24px;
  max-width: 1140px;
  margin: 0 auto;
}
.h2-4 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
  text-align: center;
}
.text-3 {
  text-align: center;
  margin: 0 0 36px;
  line-height: 1.7;
}
.section-6 {
  background: var(--travertine);
  padding: 70px 24px;
}
.h2-5 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 36px;
  text-align: center;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}
.div-6 {
  background: var(--white);
  border-radius: 3px;
  padding: 22px 24px;
}
.div-7 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: 16px;
}
.h2-6 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 12px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 26px;
}
.h2-7 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
}
.link-3 {
  background: var(--ink);
  color: var(--white);
  padding: 13px 28px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 15px;
}
.link-3:hover {
  background: var(--ink-dark);
  color: var(--white);
}
.link-4 {
  background: var(--terracotta);
  color: var(--white);
  padding: 13px 28px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 15px;
}
.link-4:hover {
  background: var(--terracotta-dark);
  color: var(--white);
}
.eyebrow-6 {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 700;
  margin-bottom: 10px;
}
.div-8 {
  background: var(--travertine);
  padding: 12px 40px;
  font-size: 13px;
}
.span-6 {
  color: var(--ink);
  font-weight: 600;
}
.section-7 {
  color: var(--white);
  padding: 90px 24px;
  text-align: center;
}
.h1-3 {
  animation: peFlyUp .8s var(--ease-out) .15s backwards;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  margin: 0 0 16px;
  line-height: 1.2;
  text-wrap: balance;
}
.text-4 {
  animation: peFlyUp .8s var(--ease-out) .3s backwards;
  max-width: 680px;
  margin: 0 auto 28px;
  font-size: 17px;
  line-height: 1.7;
  opacity: 0.9;
}
.div-9 {
  margin-top: 14px;
  font-size: 13px;
  opacity: 0.8;
}
.h3 {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 10px;
}
.text-5 {
  margin: 0;
  line-height: 1.7;
  font-size: 14.5px;
}
.row-6 {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.btn-gold-3 {
  background: var(--gold);
  color: var(--black);
  padding: 12px 24px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 14px;
}
.btn-gold-3:hover {
  background: var(--gold-dark);
  color: var(--black);
}
.h2-8 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
  text-align: center;
}
.text-6 {
  max-width: 760px;
  margin: 0 auto 44px;
  line-height: 1.7;
  text-align: center;
}
.div-10 {
  background: var(--white);
  border-radius: 3px;
  padding: 28px;
}
.text-7 {
  max-width: 720px;
  margin: 0 auto 44px;
  line-height: 1.7;
  text-align: center;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 22px;
}
.div-11 {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 24px;
}
.h3-2 {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 8px;
}
.text-8 {
  margin: 0;
  line-height: 1.65;
  font-size: 14px;
}
.section-8 {
  background: var(--travertine);
  padding: 76px 24px;
}
.div-12 {
  max-width: 860px;
  margin: 0 auto;
}
.h2-9 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 36px;
  text-align: center;
}
.details {
  background: var(--white);
  border-radius: 3px;
  padding: 18px 22px;
}
.summary {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  font-size: 16px;
}
.text-9 {
  line-height: 1.7;
  margin: 12px 0 0;
  font-size: 14.5px;
}
.section-9 {
  background: var(--ink);
  color: var(--white);
  text-align: center;
  padding: 70px 24px;
}
.text-10 {
  max-width: 600px;
  margin: 0 auto 28px;
  line-height: 1.7;
  opacity: 0.9;
}
.grid-5 {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 52px;
  align-items: center;
}
.text-11 {
  line-height: 1.8;
  margin: 0 0 14px;
}
.container-5 {
  padding: 72px 24px;
  max-width: 1140px;
  margin: 0 auto;
}
.h2-10 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 18px;
}
.text-12 {
  line-height: 1.8;
  margin: 0;
}
.section-10 {
  background: var(--travertine);
  padding: 72px 24px;
}
.section-11 {
  padding: 72px 24px;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.row-7 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.text-13 {
  max-width: 580px;
  margin: 0 auto 26px;
  line-height: 1.7;
  opacity: 0.9;
}
.section-12 {
  color: var(--white);
  padding: 88px 24px;
  text-align: center;
}

/* ---------------------------------------------------------------
   5. Section styles — header
   --------------------------------------------------------------- */
.header__header {
  display: contents;
  font-family: var(--font-body);
}
.header__div {
  background: var(--ink);
  color: var(--white);
  font-size: 13.5px;
  border-bottom: 1px solid rgba(233,199,138,0.25);
}
.header__container {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 24px;
  flex-wrap: wrap;
  gap: 8px;
}
.header__row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.header__link {
  color: var(--white);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.header__link:hover {
  color: var(--gold-light);
}
.header__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(233,199,138,0.45);
  color: var(--gold-light);
  border-radius: 2px;
  padding: 2px 9px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.header__row-2 {
  display: flex;
  align-items: center;
  gap: 18px;
}
.header__tag-2 {
  color: var(--gold-light);
  font-family: var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11.5px;
  font-weight: 500;
}
.header__link-2 {
  color: var(--white);
  font-weight: 600;
}
.header__link-2:hover {
  color: var(--gold-light);
}
.header__link-3 {
  color: var(--white);
}
.header__link-3:hover {
  color: var(--gold-light);
}
.header__div-2 {
  background: rgba(251,249,245,0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 900;
  box-shadow: 0 1px 0 rgba(30,42,53,0.04);
}
.header__container-2 {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  flex-wrap: wrap;
  gap: 14px;
}
.header__img {
  height: 54px;
  width: auto;
}
.header__tag-3 {
  border-left: 1px solid var(--terracotta);
  padding-left: 14px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.header__row-3 {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 15px;
  font-weight: 600;
  flex-wrap: wrap;
}
.header__link-4 {
  color: var(--ink);
}
.header__link-4:hover {
  color: var(--terracotta);
}
.header__btn-gold {
  background: var(--gold);
  color: var(--black);
  padding: 11px 22px;
  border-radius: 2px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}
.header__btn-gold:hover {
  background: var(--gold-dark);
  color: var(--black);
}

/* ---------------------------------------------------------------
   home-hero
   --------------------------------------------------------------- */
.home-hero__section {
  position: relative;
  color: var(--white);
  padding: 120px 24px 110px;
}
.home-hero__eyebrow {
  animation: peFlyUp .7s var(--ease-out) 0s backwards;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 13.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 500;
  margin-bottom: 22px;
}
.home-hero__h1 {
  animation: peFlyUp .8s var(--ease-out) .15s backwards;
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 600;
  margin: 0 0 22px;
  line-height: 1.08;
  max-width: 820px;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.home-hero__text {
  animation: peFlyUp .8s var(--ease-out) .3s backwards;
  max-width: 560px;
  margin: 0 0 36px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--travertine);
}
.home-hero__row {
  animation: peFlyUp .8s var(--ease-out) .45s backwards;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.home-hero__btn-gold {
  background: var(--gold);
  color: var(--black);
  padding: 15px 30px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 15.5px;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}
.home-hero__btn-gold:hover {
  background: var(--gold-dark);
  color: var(--black);
}
.home-hero__btn-outline-light {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.7);
  color: var(--white);
  padding: 14px 28px;
  border-radius: 2px;
  font-weight: 600;
  font-size: 15.5px;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}
.home-hero__btn-outline-light:hover {
  background: var(--white);
  color: var(--ink);
}
.home-hero__row-2 {
  animation: peFadeIn 1s ease .7s backwards;
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gold-light);
}
.home-hero__link {
  color: var(--white);
  font-weight: 700;
}

/* ---------------------------------------------------------------
   home-section-2
   --------------------------------------------------------------- */
.home-section-2__section {
  background: var(--travertine);
  border-bottom: 1px solid var(--line);
}
.home-section-2__container {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  padding: 0 24px;
}
.home-section-2__div {
  padding: 28px 24px 28px 0;
  border-right: 1px solid var(--line);
}
.home-section-2__div-2 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
.home-section-2__eyebrow {
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}
.home-section-2__div-3 {
  padding: 28px 24px;
  border-right: 1px solid var(--line);
}
.home-section-2__div-4 {
  padding: 28px 0 28px 24px;
}
.home-section-2__div-5 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  color: var(--terracotta);
  line-height: 1;
}

/* ---------------------------------------------------------------
   home-homeowner-projects
   --------------------------------------------------------------- */
.home-homeowner-projects__container {
  padding: 96px 24px 90px;
  max-width: 1140px;
  margin: 0 auto;
}
.home-homeowner-projects__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
  margin-bottom: 48px;
}
.home-homeowner-projects__h2 {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
  text-wrap: balance;
}
.home-homeowner-projects__grid-2 {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 24px;
}
.home-homeowner-projects__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--text);
}
.home-homeowner-projects__card:hover {
  color: var(--terracotta);
}
.home-homeowner-projects__div {
  aspect-ratio: 3/4;
  border-radius: 160px 160px 3px 3px;
}
.home-homeowner-projects__div-2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.home-homeowner-projects__div-3 {
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---------------------------------------------------------------
   home-scroll-build
   --------------------------------------------------------------- */
.home-scroll-build__section {
  position: relative;
  height: 520vh;
  background: var(--ink-deep);
}
.home-scroll-build__grid {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  align-items: stretch;
  color: var(--white);
  background: radial-gradient(ellipse at 65% 60%,var(--ink-soft),var(--ink-deep) 70%);
}
.home-scroll-build__layer {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(233,199,138,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(233,199,138,0.05) 1px,transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.home-scroll-build__stack {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px,6vh,80px) 24px clamp(48px,8vh,80px) max(24px,calc((100vw - 1140px) / 2));
  z-index: 2;
  overflow: hidden;
}
.home-scroll-build__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 500;
  margin-bottom: clamp(12px,3vh,28px);
}
.home-scroll-build__div {
  font-family: var(--font-display);
  font-size: clamp(56px,11vh,96px);
  font-weight: 600;
  line-height: 0.9;
  color: var(--terracotta);
  letter-spacing: -0.02em;
  margin-bottom: clamp(10px,2vh,18px);
}
.home-scroll-build__h2 {
  font-family: var(--font-display);
  font-size: clamp(26px,4.2vh,40px);
  font-weight: 600;
  margin: 0 0 12px;
  line-height: 1.1;
  text-wrap: balance;
}
.home-scroll-build__text {
  line-height: 1.6;
  margin: 0 0 18px;
  color: var(--on-dark-muted);
  font-size: clamp(14px,2vh,17px);
  max-width: 420px;
}
.home-scroll-build__row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: clamp(16px,4vh,40px);
}
.home-scroll-build__tag {
  border: 1px solid rgba(233,199,138,0.45);
  color: var(--gold-light);
  border-radius: 2px;
  padding: 4px 9px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.home-scroll-build__div-2 {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,0.12);
  position: relative;
}
.home-scroll-build__layer-2 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--terracotta);
  transition: width .15s linear;
}
.home-scroll-build__div-3 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  white-space: nowrap;
}
.home-scroll-build__layer-3 {
  position: absolute;
  left: max(24px,calc((100vw - 1140px) / 2));
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gold-light);
  opacity: 1;
  transition: opacity .4s;
}
.home-scroll-build__div-4 {
  position: relative;
  z-index: 1;
}
.home-scroll-build__layer-4 {
  position: absolute;
  inset: 0;
}
.home-scroll-build__layer-5 {
  position: absolute;
  right: max(24px,calc((100vw - 1140px) / 2));
  top: 32px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-align: right;
  line-height: 1.8;
  pointer-events: none;
}

/* ---------------------------------------------------------------
   home-services
   --------------------------------------------------------------- */
.home-services__container {
  padding: 90px 24px;
  max-width: 1140px;
  margin: 0 auto;
  text-align: center;
}
.home-services__h2 {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 52px;
}
.home-services__grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 0;
  border: 1px solid var(--line);
  text-align: left;
  background-image: linear-gradient(rgba(185,96,58,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(185,96,58,0.08) 1px,transparent 1px);
  background-size: 24px 24px;
  padding: 24px;
}
.home-services__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--ink);
  padding: 30px 24px 28px;
  border-right: 1px solid var(--line);
  background: var(--cream);
  min-height: 230px;
  transition: background .25s;
}
.home-services__card:hover {
  background: var(--ink);
  color: var(--white);
}
.home-services__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.home-services__span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--terracotta);
}
.home-services__row-2 {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-services__stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 32px;
}
.home-services__span-2 {
  height: 2px;
  background: var(--terracotta);
}
.home-services__span-3 {
  height: 2px;
  background: var(--terracotta);
  width: 70%;
}
.home-services__span-4 {
  height: 2px;
  background: var(--terracotta);
  width: 85%;
}
.home-services__span-5 {
  height: 2px;
  background: var(--terracotta);
  width: 55%;
}
.home-services__span-6 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
}
.home-services__span-7 {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: auto;
}
.home-services__tag {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
}
.home-services__stack-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 28px;
}
.home-services__span-8 {
  height: 3px;
  width: 100%;
  background: var(--terracotta);
}
.home-services__span-9 {
  height: 22px;
  width: 4px;
  background: var(--terracotta);
}
.home-services__row-3 {
  width: 28px;
  height: 28px;
  border: 2px solid var(--terracotta);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.home-services__span-10 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--terracotta);
}
.home-services__grid-2 {
  display: grid;
  grid-template-columns: repeat(2,12px);
  gap: 4px;
}
.home-services__span-11 {
  height: 12px;
  background: var(--terracotta);
}
.home-services__span-12 {
  height: 12px;
  border: 2px solid var(--terracotta);
  box-sizing: border-box;
}
.home-services__card-2 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--ink);
  padding: 30px 24px 28px;
  background: var(--cream);
  min-height: 230px;
  transition: background .25s;
}
.home-services__card-2:hover {
  background: var(--ink);
  color: var(--white);
}
.home-services__grid-3 {
  display: grid;
  grid-template-columns: repeat(3,6px);
  gap: 5px;
}
.home-services__span-13 {
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
}
.home-services__span-14 {
  height: 6px;
  border-radius: 50%;
  background: var(--gold-light);
}

/* ---------------------------------------------------------------
   home-heritage
   --------------------------------------------------------------- */
.home-heritage__container {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.2fr);
  gap: 64px;
  align-items: center;
}
.home-heritage__div {
  position: relative;
}
.home-heritage__img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 200px 200px 3px 3px;
  display: block;
}
.home-heritage__layer {
  position: absolute;
  right: -18px;
  bottom: 28px;
  background: var(--ink);
  color: var(--gold-light);
  padding: 14px 18px;
  border-radius: 2px;
  font-family: var(--font-display);
  line-height: 1.1;
}
.home-heritage__eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.home-heritage__div-2 {
  font-size: 34px;
  font-weight: 600;
}
.home-heritage__h2 {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 20px;
  line-height: 1.15;
}
.home-heritage__text {
  line-height: 1.8;
  margin: 0 0 16px;
  font-size: 16px;
}
.home-heritage__blockquote {
  margin: 0 0 22px;
  padding: 18px 0 18px 22px;
  border-left: 2px solid var(--terracotta);
  font-style: italic;
  line-height: 1.75;
  color: var(--ink);
  font-size: 16.5px;
}
.home-heritage__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.home-heritage__div-3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}
.home-heritage__span {
  color: var(--muted);
  font-weight: 500;
}
.home-heritage__link {
  font-weight: 600;
  font-size: 15px;
  border-bottom: 1px solid var(--terracotta);
  padding-bottom: 2px;
}

/* ---------------------------------------------------------------
   home-what-happens-next
   --------------------------------------------------------------- */
.home-what-happens-next__div {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}
.home-what-happens-next__h2 {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1.15;
}
.home-what-happens-next__text {
  line-height: 1.7;
  margin: 0;
  font-size: 16px;
}
.home-what-happens-next__grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.home-what-happens-next__div-2 {
  padding: 28px 24px 0 0;
  border-right: 1px solid var(--line);
}
.home-what-happens-next__div-3 {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: 14px;
}
.home-what-happens-next__div-4 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.home-what-happens-next__text-2 {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
}
.home-what-happens-next__div-5 {
  padding: 28px 24px 0;
  border-right: 1px solid var(--line);
}
.home-what-happens-next__div-6 {
  padding: 28px 0 0 24px;
}
.home-what-happens-next__row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 52px;
  align-items: center;
}
.home-what-happens-next__link {
  background: var(--ink);
  color: var(--white);
  padding: 14px 28px;
  border-radius: 2px;
  font-weight: 600;
  font-size: 15px;
  font-family: var(--font-display);
}
.home-what-happens-next__link:hover {
  background: var(--ink-dark);
  color: var(--white);
}
.home-what-happens-next__link-2 {
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 13px 26px;
  border-radius: 2px;
  font-weight: 600;
  font-size: 15px;
  font-family: var(--font-display);
}
.home-what-happens-next__link-2:hover {
  background: var(--ink);
  color: var(--white);
}
.home-what-happens-next__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  border-radius: 2px;
  padding: 6px 10px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---------------------------------------------------------------
   home-service-areas
   --------------------------------------------------------------- */
.home-service-areas__grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
  margin-bottom: 20px;
}
.home-service-areas__card {
  background: var(--ink);
  color: var(--white);
  border-radius: 3px;
  padding: 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 3px solid var(--terracotta);
}
.home-service-areas__card:hover {
  background: var(--ink-dark);
  color: var(--white);
}
.home-service-areas__tag {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 600;
}
.home-service-areas__span {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
}
.home-service-areas__span-2 {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--on-dark-muted);
}
.home-service-areas__span-3 {
  color: var(--gold-light);
  font-weight: 600;
  font-size: 14px;
  margin-top: 6px;
}
.home-service-areas__grid-2 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.home-service-areas__row {
  background: var(--cream);
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.home-service-areas__span-4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-size: 15.5px;
}
.home-service-areas__link {
  font-weight: 600;
  font-size: 14px;
}
.home-service-areas__text {
  margin: 22px 0 0;
  line-height: 1.7;
  font-size: 14.5px;
  color: var(--muted);
}

/* ---------------------------------------------------------------
   home-portfolio
   --------------------------------------------------------------- */
.home-portfolio__grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
}
.home-portfolio__img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 3px;
}

/* ---------------------------------------------------------------
   home-blog
   --------------------------------------------------------------- */
.home-blog__grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
}
.home-blog__card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--text);
}
.home-blog__card:hover {
  color: var(--terracotta);
}
.home-blog__img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.home-blog__stack {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.home-blog__eyebrow {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-blog__div {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  line-height: 1.35;
}

/* ---------------------------------------------------------------
   home-cta
   --------------------------------------------------------------- */
.home-cta__section {
  background-color: var(--ink);
  background-image: linear-gradient(rgba(233,199,138,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(233,199,138,0.06) 1px,transparent 1px);
  background-size: 48px 48px;
  color: var(--white);
  text-align: center;
  padding: 96px 24px;
  border-top: 3px solid var(--terracotta);
}
.home-cta__h2 {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  margin: 0 0 16px;
  line-height: 1.1;
}
.home-cta__text {
  max-width: 600px;
  margin: 0 auto 34px;
  line-height: 1.7;
  color: var(--on-dark-muted);
  font-size: 17px;
}
.home-cta__link {
  background: var(--terracotta);
  color: var(--white);
  padding: 15px 30px;
  border-radius: 2px;
  font-weight: 600;
  font-size: 15.5px;
  font-family: var(--font-display);
}
.home-cta__link:hover {
  background: var(--terracotta-dark);
  color: var(--white);
}

/* ---------------------------------------------------------------
   footer
   --------------------------------------------------------------- */
.footer__footer {
  background: var(--ink);
  color: var(--on-dark-muted);
  font-family: var(--font-body);
  font-size: 14px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 56px 60px 40px;
  max-width: 1240px;
  margin: 0 auto;
}
.footer__img {
  width: 75px;
  height: auto;
}
.footer__text {
  margin: 0;
  line-height: 1.7;
}
.footer__link {
  color: var(--white);
  font-weight: 700;
  font-size: 17px;
}
.footer__link:hover {
  color: var(--gold-light);
}
.footer__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(233,199,138,0.45);
  color: var(--gold-light);
  border-radius: 2px;
  padding: 3px 9px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  align-self: flex-start;
}
.footer__tag-2 {
  font-family: var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11.5px;
  color: var(--gold-light);
  margin-top: 6px;
}
.footer__stack {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.footer__h4 {
  margin: 0 0 6px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer__link-2 {
  color: var(--on-dark-muted);
}
.footer__link-2:hover {
  color: var(--white);
}
.footer__link-3 {
  color: var(--gold-light);
}
.footer__link-3:hover {
  color: var(--white);
}
.footer__row {
  border-top: 1px solid rgba(212,203,187,0.2);
  padding: 18px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 1240px;
  margin: 0 auto;
  font-size: 13px;
}
.footer__row-2 {
  display: flex;
  gap: 16px;
  align-items: center;
}
.footer__row-3 {
  color: var(--on-dark-muted);
  display: flex;
}
.footer__row-3:hover {
  color: var(--white);
}
.footer__link-4 {
  color: var(--on-dark-muted);
  border-left: 1px solid rgba(212,203,187,0.3);
  padding-left: 16px;
}
.footer__link-4:hover {
  color: var(--gold-light);
}

/* ---------------------------------------------------------------
   sticky-bar
   --------------------------------------------------------------- */
.sticky-bar__row {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  display: flex;
  font-family: var(--font-body);
  box-shadow: 0 -4px 16px rgba(30,42,53,0.25);
}
.sticky-bar__btn-gold {
  flex: 1;
  background: var(--gold);
  color: var(--black);
  text-align: center;
  padding: 15px 8px;
  font-weight: 700;
  font-size: 15px;
}
.sticky-bar__btn-gold:hover {
  background: var(--gold-dark);
  color: var(--black);
}
.sticky-bar__link {
  flex: 1;
  background: var(--ink);
  color: var(--white);
  text-align: center;
  padding: 15px 8px;
  font-weight: 700;
  font-size: 15px;
}
.sticky-bar__link:hover {
  background: var(--ink-dark);
  color: var(--white);
}

/* ---------------------------------------------------------------
   about-us-section-2
   --------------------------------------------------------------- */
.about-us-section-2__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 52px;
  align-items: center;
}
.about-us-section-2__row {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.about-us-section-2__div {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--terracotta);
}
.about-us-section-2__eyebrow {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------------------------------------------------------------
   about-us-why-us
   --------------------------------------------------------------- */
.about-us-why-us__grid {
  display: grid;
  grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap: 64px;
  align-items: start;
  margin-bottom: 64px;
}
.about-us-why-us__h2 {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
  text-wrap: balance;
}
.about-us-why-us__div {
  padding-top: 8px;
}
.about-us-why-us__text {
  line-height: 1.8;
  margin: 0 0 18px;
  font-size: 17px;
}
.about-us-why-us__text-2 {
  line-height: 1.8;
  margin: 0;
  font-size: 17px;
}
.about-us-why-us__grid-2 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 64px;
}
.about-us-why-us__div-2 {
  background: var(--cream);
  padding: 26px 24px;
}
.about-us-why-us__div-3 {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: 10px;
}
.about-us-why-us__div-4 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.about-us-why-us__div-5 {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.about-us-why-us__grid-3 {
  display: grid;
  grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap: 64px;
  align-items: center;
}
.about-us-why-us__h2-2 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.about-us-why-us__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}
.about-us-why-us__text-3 {
  line-height: 1.8;
  margin: 0;
  font-size: 16px;
  flex: 1 1 320px;
}
.about-us-why-us__btn-gold {
  background: var(--gold);
  color: var(--black);
  padding: 15px 30px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 15.5px;
  font-family: var(--font-display);
  display: inline-block;
  white-space: nowrap;
}
.about-us-why-us__btn-gold:hover {
  background: var(--gold-dark);
  color: var(--black);
}

/* ---------------------------------------------------------------
   our-services-section-2
   --------------------------------------------------------------- */
.our-services-section-2__container {
  padding: 76px 24px;
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.our-services-section-2__grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 26px;
}
.our-services-section-2__stack {
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.our-services-section-2__img {
  width: 100%;
  height: 230px;
  object-fit: cover;
}
.our-services-section-2__stack-2 {
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.our-services-section-2__h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.our-services-section-2__text {
  margin: 0;
  line-height: 1.7;
  font-size: 15px;
}

/* ---------------------------------------------------------------
   service-areas-areas-hero
   --------------------------------------------------------------- */
.service-areas-areas-hero__h1 {
  animation: peFlyUp .8s var(--ease-out) .15s backwards;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  margin: 0 0 16px;
}
.service-areas-areas-hero__text {
  animation: peFlyUp .8s var(--ease-out) .3s backwards;
  max-width: 660px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.7;
  opacity: 0.9;
}

/* ---------------------------------------------------------------
   service-areas-map
   --------------------------------------------------------------- */
.service-areas-map__container {
  padding: 70px 24px 0;
  max-width: 1140px;
  margin: 0 auto;
}
.service-areas-map__text {
  text-align: center;
  margin: 16px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}
.service-areas-map__div {
  margin-top: 20px;
}

/* ---------------------------------------------------------------
   service-areas-section-3
   --------------------------------------------------------------- */
.service-areas-section-3__grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 20px;
}
.service-areas-section-3__card {
  background: var(--ink);
  color: var(--white);
  border-radius: 3px;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.service-areas-section-3__card:hover {
  background: var(--ink-dark);
  color: var(--white);
}
.service-areas-section-3__tag {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 700;
}
.service-areas-section-3__span {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
}
.service-areas-section-3__span-2 {
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.85;
}
.service-areas-section-3__span-3 {
  color: var(--gold-light);
  font-weight: 700;
  font-size: 14px;
}

/* ---------------------------------------------------------------
   service-areas-section-4
   --------------------------------------------------------------- */
.service-areas-section-4__card {
  background: var(--white);
  border-radius: 3px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.service-areas-section-4__card:hover {
  background: var(--travertine-dark);
}
.service-areas-section-4__span {
  font-weight: 700;
  font-size: 14px;
  color: var(--terracotta);
}

/* ---------------------------------------------------------------
   service-areas-section-5
   --------------------------------------------------------------- */
.service-areas-section-5__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(190px,1fr));
  gap: 16px;
}
.service-areas-section-5__card {
  background: var(--travertine);
  border-radius: 3px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ink);
}
.service-areas-section-5__card:hover {
  background: var(--travertine-dark);
  color: var(--ink);
}
.service-areas-section-5__span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
}
.service-areas-section-5__span-2 {
  font-size: 13px;
  color: var(--terracotta);
  font-weight: 600;
}
.service-areas-section-5__stack {
  background: var(--ink);
  border-radius: 3px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--white);
}
.service-areas-section-5__link {
  font-size: 13px;
  color: var(--gold-light);
  font-weight: 600;
}
.service-areas-section-5__link:hover {
  color: var(--white);
}

/* ---------------------------------------------------------------
   service-areas-section-6
   --------------------------------------------------------------- */
.service-areas-section-6__section {
  background: var(--ink);
  color: var(--white);
  text-align: center;
  padding: 64px 24px;
}
.service-areas-section-6__text {
  max-width: 560px;
  margin: 0 auto 26px;
  line-height: 1.7;
  opacity: 0.9;
}

/* ---------------------------------------------------------------
   projects-projects-hero
   --------------------------------------------------------------- */
.projects-projects-hero__section {
  background-color: var(--ink);
  background-image: linear-gradient(rgba(233,199,138,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(233,199,138,0.07) 1px,transparent 1px);
  background-size: 48px 48px;
  color: var(--white);
  padding: 90px 24px 80px;
  border-bottom: 3px solid var(--terracotta);
}
.projects-projects-hero__eyebrow {
  animation: peFlyUp .7s var(--ease-out) 0s backwards;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 13.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 500;
  margin-bottom: 18px;
}
.projects-projects-hero__h1 {
  animation: peFlyUp .8s var(--ease-out) .15s backwards;
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 600;
  margin: 0 0 18px;
  line-height: 1.08;
  max-width: 820px;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.projects-projects-hero__text {
  animation: peFlyUp .8s var(--ease-out) .3s backwards;
  max-width: 600px;
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--on-dark-muted);
}

/* ---------------------------------------------------------------
   projects-map
   --------------------------------------------------------------- */
.projects-map__section {
  background: var(--travertine);
  padding: 80px 24px;
  border-bottom: 1px solid var(--line);
}
.projects-map__container {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0,4fr) minmax(0,8fr);
  gap: 48px;
  align-items: center;
}
.projects-map__h2 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 16px;
  line-height: 1.15;
}
.projects-map__text {
  line-height: 1.75;
  margin: 0 0 24px;
  font-size: 15.5px;
}
.projects-map__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.projects-map__div {
  background: var(--cream);
  padding: 16px 18px;
}
.projects-map__div-2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
.projects-map__eyebrow {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
.projects-map__div-3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--terracotta);
  line-height: 1;
}
.projects-map__stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------------------------------------------------------------
   projects-plan-to-built
   --------------------------------------------------------------- */
.projects-plan-to-built__container {
  padding: 90px 24px;
  max-width: 1140px;
  margin: 0 auto;
}
.projects-plan-to-built__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
  margin-bottom: 20px;
}
.projects-plan-to-built__row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.projects-plan-to-built__button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border-radius: 2px;
  cursor: pointer;
  transition: all .2s;
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--ink);
}
.projects-plan-to-built__button:hover {
  border-color: var(--terracotta);
  color: var(--terracotta);
}
.projects-plan-to-built__button-2 {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border-radius: 2px;
  cursor: pointer;
  transition: all .2s;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-strong);
}
.projects-plan-to-built__button-2:hover {
  border-color: var(--terracotta);
  color: var(--terracotta);
}
.projects-plan-to-built__row-2 {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.projects-plan-to-built__grid-2 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 32px 28px;
}
.projects-plan-to-built__stack {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.projects-plan-to-built__div {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 3px;
  overflow: hidden;
  background: var(--ink);
  user-select: none;
}
.projects-plan-to-built__layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
}
.projects-plan-to-built__layer-2 {
  position: absolute;
  inset: 0;
  background: var(--travertine);
  clip-path: inset(0 50% 0 0);
  transition: clip-path .05s linear;
}
.projects-plan-to-built__layer-3 {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(30,42,53,0.12) 1px,transparent 1px),linear-gradient(90deg,rgba(30,42,53,0.12) 1px,transparent 1px);
  background-size: 24px 24px;
}
.projects-plan-to-built__layer-4 {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(30,42,53,0.5);
}
.projects-plan-to-built__layer-5 {
  position: absolute;
  inset: 26px;
  border: 1px solid rgba(30,42,53,0.25);
}
.projects-plan-to-built__layer-6 {
  position: absolute;
  left: 34px;
  top: 30px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink);
  line-height: 1.7;
}
.projects-plan-to-built__layer-7 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 36px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--terracotta-dark);
}
.projects-plan-to-built__layer-8 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--terracotta);
  transform: translateX(-1px);
  pointer-events: none;
  transition: left .05s linear;
}
.projects-plan-to-built__layer-9 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--terracotta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--terracotta);
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(30,42,53,0.3);
}
.projects-plan-to-built__eyebrow {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(251,249,245,0.9);
  padding: 4px 8px;
  border-radius: 2px;
  pointer-events: none;
}
.projects-plan-to-built__eyebrow-2 {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(30,42,53,0.75);
  padding: 4px 8px;
  border-radius: 2px;
  pointer-events: none;
}
.projects-plan-to-built__layer-10 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.projects-plan-to-built__row-3 {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.projects-plan-to-built__div-2 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-size: 19px;
  margin-bottom: 4px;
}
.projects-plan-to-built__div-3 {
  font-size: 14px;
  color: var(--muted);
}
.projects-plan-to-built__row-4 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 50%;
}
.projects-plan-to-built__tag {
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 2px;
  padding: 3px 8px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}
.projects-plan-to-built__text {
  text-align: center;
  margin: 44px 0 0;
  font-size: 14.5px;
  color: var(--muted);
}
.projects-plan-to-built__link {
  font-weight: 600;
}

/* ---------------------------------------------------------------
   projects-cta
   --------------------------------------------------------------- */
.projects-cta__section {
  background-color: var(--ink);
  background-image: linear-gradient(rgba(233,199,138,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(233,199,138,0.06) 1px,transparent 1px);
  background-size: 48px 48px;
  color: var(--white);
  text-align: center;
  padding: 90px 24px;
  border-top: 3px solid var(--terracotta);
}
.projects-cta__h2 {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 600;
  margin: 0 0 30px;
  line-height: 1.1;
}

/* ---------------------------------------------------------------
   blog-section-2
   --------------------------------------------------------------- */
.blog-section-2__card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--text);
}
.blog-section-2__card:hover {
  color: var(--ink);
}
.blog-section-2__img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}
.blog-section-2__stack {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.blog-section-2__div {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  line-height: 1.4;
}
.blog-section-2__div-2 {
  font-size: 12.5px;
  color: var(--muted);
}
.blog-section-2__text {
  text-align: center;
  margin: 34px 0 0;
  font-size: 14.5px;
}
.blog-section-2__link {
  font-weight: 700;
}

/* ---------------------------------------------------------------
   contact-us-section-2
   --------------------------------------------------------------- */
.contact-us-section-2__section {
  padding: 76px 24px;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.contact-us-section-2__text {
  line-height: 1.8;
  margin: 0 0 30px;
}
.contact-us-section-2__text-2 {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}

/* ---------------------------------------------------------------
   contact-us-section-3
   --------------------------------------------------------------- */
.contact-us-section-3__div {
  text-align: center;
  margin-bottom: 40px;
}
.contact-us-section-3__h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

/* ---------------------------------------------------------------
   altadena-section-2
   --------------------------------------------------------------- */
.altadena-section-2__container {
  padding: 76px 24px;
  max-width: 1140px;
  margin: 0 auto;
  text-align: center;
}
.altadena-section-2__h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
}
.altadena-section-2__text {
  max-width: 720px;
  margin: 0 auto 44px;
  line-height: 1.7;
}
.altadena-section-2__grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 26px;
  text-align: left;
}
.altadena-section-2__div {
  background: var(--travertine);
  border-radius: 3px;
  padding: 28px;
}

/* ---------------------------------------------------------------
   altadena-eaton-fire-rebuild
   --------------------------------------------------------------- */
.altadena-eaton-fire-rebuild__section {
  background: var(--ink);
  color: var(--white);
  padding: 76px 24px;
}
.altadena-eaton-fire-rebuild__container {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 52px;
  align-items: center;
}
.altadena-eaton-fire-rebuild__eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 700;
  margin-bottom: 10px;
}
.altadena-eaton-fire-rebuild__h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 18px;
}
.altadena-eaton-fire-rebuild__text {
  line-height: 1.8;
  margin: 0 0 14px;
  opacity: 0.92;
}
.altadena-eaton-fire-rebuild__text-2 {
  line-height: 1.8;
  margin: 0 0 24px;
  opacity: 0.92;
}
.altadena-eaton-fire-rebuild__btn-outline-light {
  border: 2px solid var(--white);
  color: var(--white);
  padding: 10px 22px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 14px;
}
.altadena-eaton-fire-rebuild__btn-outline-light:hover {
  background: var(--white);
  color: var(--ink);
}

/* ---------------------------------------------------------------
   altadena-section-4
   --------------------------------------------------------------- */
.altadena-section-4__section {
  padding: 76px 24px;
  background: var(--travertine);
}

/* ---------------------------------------------------------------
   pacific-palisades-palisades-fire-rebuild
   --------------------------------------------------------------- */
.pacific-palisades-palisades-fire-rebuild__text {
  line-height: 1.8;
  margin: 0 0 24px;
}
.pacific-palisades-palisades-fire-rebuild__link {
  border: 2px solid var(--ink);
  color: var(--ink);
  padding: 10px 22px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 14px;
}
.pacific-palisades-palisades-fire-rebuild__link:hover {
  background: var(--ink);
  color: var(--white);
}

/* ---------------------------------------------------------------
   service-section-2
   --------------------------------------------------------------- */
.service-section-2__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 52px;
  align-items: center;
}
.service-section-2__img {
  width: 100%;
  border-radius: 3px;
  object-fit: cover;
  max-height: 420px;
}

/* ---------------------------------------------------------------
   service-section-4
   --------------------------------------------------------------- */
.service-section-4__link {
  background: var(--travertine);
  border-radius: 16px;
  padding: 7px 15px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.service-section-4__link:hover {
  background: var(--travertine-dark);
  color: var(--terracotta);
}

/* ---------------------------------------------------------------
   state-state-hero
   --------------------------------------------------------------- */
.state-state-hero__h1 {
  animation: peFlyUp .8s var(--ease-out) .15s backwards;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  margin: 0 0 16px;
  line-height: 1.2;
}

/* ---------------------------------------------------------------
   state-section-2
   --------------------------------------------------------------- */
.state-section-2__link {
  background: var(--travertine);
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.state-section-2__link:hover {
  background: var(--travertine-dark);
  color: var(--terracotta);
}

/* ---------------------------------------------------------------
   state-section-4
   --------------------------------------------------------------- */
.state-section-4__text {
  line-height: 1.8;
  margin: 0 0 10px;
}

/* ---------------------------------------------------------------
   6. Responsive overrides (generated)
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .home-hero__h1 {
    font-size: 51px;
  }
  .home-section-2__container {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .home-homeowner-projects__h2 {
    font-size: 34px;
  }
  .home-homeowner-projects__grid-2 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .home-services__grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .home-services__grid-3 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .home-what-happens-next__grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .home-service-areas__grid-2 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .home-portfolio__grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .home-blog__grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .home-cta__h2 {
    font-size: 37px;
  }
  .footer__grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .h1 {
    font-size: 37px;
  }
  .about-us-why-us__grid-2 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .h1-2 {
    font-size: 37px;
  }
  .service-areas-areas-hero__h1 {
    font-size: 37px;
  }
  .grid-2 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .projects-projects-hero__h1 {
    font-size: 46px;
  }
  .projects-cta__h2 {
    font-size: 36px;
  }
  .grid-3 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .h1-3 {
    font-size: 37px;
  }
  .altadena-section-2__grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .grid-4 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .state-state-hero__h1 {
    font-size: 37px;
  }
}
@media (max-width: 768px) {
  .home-hero__section {
    padding: 56px 24px 56px 24px;
  }
  .home-hero__h1 {
    font-size: 40px;
  }
  .home-section-2__container {
    grid-template-columns: minmax(0,1fr);
  }
  .home-section-2__div-2 {
    font-size: 30px;
  }
  .home-section-2__div-5 {
    font-size: 30px;
  }
  .home-homeowner-projects__container {
    padding: 56px 24px 56px 24px;
  }
  .home-homeowner-projects__grid {
    grid-template-columns: minmax(0,1fr);
  }
  .home-homeowner-projects__h2 {
    font-size: 30px;
  }
  .home-homeowner-projects__grid-2 {
    grid-template-columns: minmax(0,1fr);
  }
  .home-scroll-build__grid {
    grid-template-columns: minmax(0,1fr);
  }
  .home-services__container {
    padding: 56px 24px 56px 24px;
  }
  .home-services__h2 {
    font-size: 31px;
  }
  .home-services__grid {
    grid-template-columns: minmax(0,1fr);
  }
  .home-services__grid-2 {
    grid-template-columns: minmax(0,1fr);
  }
  .home-services__grid-3 {
    grid-template-columns: minmax(0,1fr);
  }
  .section {
    padding: 56px 24px 56px 24px;
  }
  .home-heritage__container {
    grid-template-columns: minmax(0,1fr);
    gap: 28px;
  }
  .home-heritage__div-2 {
    font-size: 28px;
  }
  .home-heritage__h2 {
    font-size: 31px;
  }
  .container-2 {
    padding: 56px 24px 56px 24px;
  }
  .home-what-happens-next__h2 {
    font-size: 31px;
  }
  .home-what-happens-next__grid {
    grid-template-columns: minmax(0,1fr);
  }
  .section-2 {
    padding: 56px 24px 56px 24px;
  }
  .grid {
    grid-template-columns: minmax(0,1fr);
  }
  .h2 {
    font-size: 31px;
  }
  .home-service-areas__grid {
    grid-template-columns: minmax(0,1fr);
  }
  .home-service-areas__grid-2 {
    grid-template-columns: minmax(0,1fr);
  }
  .home-portfolio__grid {
    grid-template-columns: minmax(0,1fr);
  }
  .home-blog__grid {
    grid-template-columns: minmax(0,1fr);
  }
  .home-cta__section {
    padding: 56px 24px 56px 24px;
  }
  .home-cta__h2 {
    font-size: 30px;
  }
  .footer__grid {
    grid-template-columns: minmax(0,1fr);
    gap: 28px;
    padding: 40px 20px 40px 20px;
  }
  .footer__row {
    padding: 18px 20px 18px 20px;
  }
  .section-3 {
    padding: 56px 24px 56px 24px;
  }
  .h1 {
    font-size: 30px;
  }
  .container-3 {
    padding: 56px 24px 56px 24px;
  }
  .about-us-section-2__grid {
    grid-template-columns: minmax(0,1fr);
    gap: 28px;
  }
  .h2-2 {
    font-size: 26px;
  }
  .about-us-section-2__row {
    gap: 28px;
  }
  .about-us-why-us__grid {
    grid-template-columns: minmax(0,1fr);
    gap: 28px;
  }
  .about-us-why-us__h2 {
    font-size: 31px;
  }
  .about-us-why-us__grid-2 {
    grid-template-columns: minmax(0,1fr);
  }
  .about-us-why-us__grid-3 {
    grid-template-columns: minmax(0,1fr);
    gap: 28px;
  }
  .about-us-why-us__h2-2 {
    font-size: 25px;
  }
  .section-4 {
    padding: 40px 24px 40px 24px;
  }
  .h2-3 {
    font-size: 26px;
  }
  .h1-2 {
    font-size: 30px;
  }
  .our-services-section-2__container {
    padding: 56px 24px 56px 24px;
  }
  .our-services-section-2__grid {
    grid-template-columns: minmax(0,1fr);
  }
  .section-5 {
    padding: 56px 24px 56px 24px;
  }
  .service-areas-areas-hero__h1 {
    font-size: 30px;
  }
  .service-areas-map__container {
    padding: 40px 24px 0px 24px;
  }
  .container-4 {
    padding: 40px 24px 40px 24px;
  }
  .h2-4 {
    font-size: 25px;
  }
  .service-areas-section-3__grid {
    grid-template-columns: minmax(0,1fr);
  }
  .section-6 {
    padding: 40px 24px 40px 24px;
  }
  .h2-5 {
    font-size: 25px;
  }
  .grid-2 {
    grid-template-columns: minmax(0,1fr);
  }
  .service-areas-section-6__section {
    padding: 40px 24px 40px 24px;
  }
  .h2-6 {
    font-size: 25px;
  }
  .projects-projects-hero__section {
    padding: 56px 24px 56px 24px;
  }
  .projects-projects-hero__h1 {
    font-size: 36px;
  }
  .projects-map__section {
    padding: 56px 24px 56px 24px;
  }
  .projects-map__container {
    grid-template-columns: minmax(0,1fr);
    gap: 28px;
  }
  .projects-map__h2 {
    font-size: 30px;
  }
  .projects-plan-to-built__container {
    padding: 56px 24px 56px 24px;
  }
  .projects-plan-to-built__grid {
    grid-template-columns: minmax(0,1fr);
  }
  .projects-plan-to-built__grid-2 {
    grid-template-columns: minmax(0,1fr);
  }
  .projects-plan-to-built__row-4 {
    max-width: 100%;
  }
  .projects-cta__section {
    padding: 56px 24px 56px 24px;
  }
  .projects-cta__h2 {
    font-size: 30px;
  }
  .grid-3 {
    grid-template-columns: minmax(0,1fr);
  }
  .contact-us-section-2__section {
    padding: 56px 24px 56px 24px;
  }
  .h2-7 {
    font-size: 25px;
  }
  .contact-us-section-3__h2 {
    font-size: 26px;
  }
  .section-7 {
    padding: 56px 24px 56px 24px;
  }
  .h1-3 {
    font-size: 30px;
  }
  .altadena-section-2__container {
    padding: 56px 24px 56px 24px;
  }
  .altadena-section-2__h2 {
    font-size: 26px;
  }
  .altadena-section-2__grid {
    grid-template-columns: minmax(0,1fr);
  }
  .altadena-eaton-fire-rebuild__section {
    padding: 56px 24px 56px 24px;
  }
  .altadena-eaton-fire-rebuild__container {
    grid-template-columns: minmax(0,1fr);
    gap: 28px;
  }
  .altadena-eaton-fire-rebuild__h2 {
    font-size: 26px;
  }
  .altadena-section-4__section {
    padding: 56px 24px 56px 24px;
  }
  .h2-8 {
    font-size: 26px;
  }
  .grid-4 {
    grid-template-columns: minmax(0,1fr);
  }
  .section-8 {
    padding: 56px 24px 56px 24px;
  }
  .h2-9 {
    font-size: 26px;
  }
  .section-9 {
    padding: 40px 24px 40px 24px;
  }
  .grid-5 {
    grid-template-columns: minmax(0,1fr);
    gap: 28px;
  }
  .container-5 {
    padding: 56px 24px 56px 24px;
  }
  .service-section-2__grid {
    grid-template-columns: minmax(0,1fr);
    gap: 28px;
  }
  .h2-10 {
    font-size: 25px;
  }
  .section-10 {
    padding: 56px 24px 56px 24px;
  }
  .section-11 {
    padding: 56px 24px 56px 24px;
  }
  .section-12 {
    padding: 56px 24px 56px 24px;
  }
  .state-state-hero__h1 {
    font-size: 30px;
  }
}

/* ---------------------------------------------------------------
   7. Hand-built components & breakpoints
   Breakpoints: desktop > 1024px · tablet 769–1024px · mobile ≤ 768px
   (header collapses to a menu button at ≤ 960px)
   --------------------------------------------------------------- */

/* Mobile menu button */
.nav-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); transition: transform .3s var(--ease-out), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@keyframes peNavIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Mobile call/text bar (shown ≤ 768px only) */
[data-component="sticky-bar"] { display: none; }

@media (max-width: 960px) {
  .nav-toggle { display: flex; }
  #site-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 0; }
  #site-nav.is-open { display: flex; animation: peNavIn .25s var(--ease-out); }
  #site-nav a { padding: 14px 4px; border-top: 1px solid var(--line); font-size: 16px; }
  #site-nav a:last-child { margin-top: 12px; padding: 14px 22px; text-align: center; border-top: 0; }
}

@media (max-width: 768px) {
  [data-component="sticky-bar"] { display: flex; }
  body { padding-bottom: 52px; }
  /* Home scroll-build: stack copy over the 3D canvas */
  [data-js="build-stage"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  [data-js="build-copy"] { padding: 72px 20px 12px; }
  .brand > span { display: none; }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* 404 page */
.p404{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:96px 24px;background-color:var(--cream);background-image:linear-gradient(rgba(185,96,58,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(185,96,58,.06) 1px,transparent 1px);background-size:48px 48px;text-align:center}
.p404__inner{max-width:640px;display:flex;flex-direction:column;align-items:center;gap:18px}
.p404__code{font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;color:var(--terracotta)}
.p404 h1{font-family:var(--font-display);font-weight:600;font-size:clamp(34px,5vw,52px);line-height:1.1;color:var(--ink);margin:0}
.p404 p{margin:0;font-size:17px;line-height:1.7;color:var(--text)}
.p404__links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:10px}
.p404__links a{font-family:var(--font-display);font-weight:600;font-size:15px;padding:13px 26px;border-radius:2px;border:1px solid var(--ink);color:var(--ink)}
.p404__links a:first-child{background:var(--gold);border-color:var(--gold);color:var(--black)}
.p404__links a:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}