/* ============================================================
   AMTEX Roofing & Construction — main.css
   Heritage direction · all tokens, components, and layouts
   ============================================================ */

/* Google Fonts — Inter, Poppins, Bodoni Moda */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=Poppins:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* === Design tokens ================================================
   To swap in the final licensed Bodoni: update --ff-display here
   and add a self-hosted @font-face block above. One line change.
   ================================================================== */
:root {
  --green:        #47562a;   /* primary ink */
  --green-deep:   #2e3719;   /* dark sections */
  --green-deeper: #232a13;   /* deepest: footer, partnership */
  --green-soft:   #5d6d3c;
  --amber:        #a86e00;   /* accent */
  --amber-bright: #c08418;   /* hover / on-dark accent */
  --cream:        #faf9f6;   /* canvas */
  --cream-2:      #f3f0e8;
  --cream-3:      #ece7da;
  --line:         rgba(71,86,42,.16);
  --line-strong:  rgba(71,86,42,.30);

  /* Display font — Playfair Display (placeholder for the final licensed Bodoni).
     Sturdier/less hairline-thin than Bodoni Moda. Swap by updating this one
     variable (plus the @import above or a self-hosted @font-face block). */
  --ff-display: 'Playfair Display', 'Bodoni FLF', Georgia, serif;
  --ff-label:   'Poppins', system-ui, sans-serif;
  --ff-body:    'Inter', system-ui, sans-serif;

  --maxw:     1320px;
  --gut:      clamp(20px, 5vw, 84px);
  --header-h: 74px;
  --ease:     cubic-bezier(.22,.61,.36,1);
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--green);
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--amber); color: var(--cream); }

/* Subtle paper grain on cream sections */
.grain { position: relative; }
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

/* === Type primitives === */
.eyebrow {
  font-family: var(--ff-label);
  font-weight: 500; font-size: .72rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--amber); display: inline-flex; align-items: center; gap: .7em;
}
.eyebrow--line::before { content: ""; width: 34px; height: 1px; background: var(--amber); display: inline-block; }
.lede { font-size: 1.18rem; line-height: 1.6; color: color-mix(in srgb, var(--green) 88%, transparent); max-width: 54ch; }
.fine { font-size: .82rem; letter-spacing: .02em; }

/* === Layout === */
.section { position: relative; padding: clamp(64px,9vw,140px) var(--gut); }
.wrap { max-width: var(--maxw); margin-inline: auto; position: relative; z-index: 1; }
.dark { background: var(--green-deep); color: var(--cream); }
.dark .eyebrow { color: var(--amber-bright); }
.alt { background: var(--cream-2); }

/* === Buttons === */
.btn {
  --bg: var(--green); --fg: var(--cream); --bd: var(--green);
  font-family: var(--ff-label); font-weight: 500; font-size: .78rem;
  letter-spacing: .16em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .95em 1.7em; border: 1px solid var(--bd); background: var(--bg); color: var(--fg);
  cursor: pointer; transition: .4s var(--ease); white-space: nowrap;
}
.btn:hover { --bg: var(--amber); --bd: var(--amber); --fg: var(--cream); }
.btn--amber { --bg: var(--amber); --bd: var(--amber); --fg: var(--cream); }
.btn--amber:hover { --bg: var(--green); --bd: var(--green); }
.btn--on-dark { --bg: transparent; --fg: var(--cream); --bd: rgba(250,249,246,.4); }
.btn--on-dark:hover { --bg: var(--amber); --bd: var(--amber); --fg: var(--cream); }
.btn svg { width: 1em; height: 1em; }

.textlink {
  font-family: var(--ff-label); font-weight: 500; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .6em; color: var(--green);
  border-bottom: 1px solid var(--line-strong); padding-bottom: .35em; transition: .35s var(--ease);
}
.textlink:hover { color: var(--amber); border-color: var(--amber); gap: 1em; }
.dark .textlink { color: var(--cream); border-color: rgba(250,249,246,.35); }
.dark .textlink:hover { color: var(--amber-bright); border-color: var(--amber-bright); }

/* === Social icons === */
.social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; color: inherit; transition: color .3s var(--ease);
}
.social-icon:hover { color: var(--amber); }
.social-icon svg { width: 18px; height: 18px; flex-shrink: 0; }

/* === Header === */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--header-h);
  display: flex; align-items: center; padding-inline: var(--gut);
  transition: background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom: 1px solid transparent;
}
.site-head__inner {
  width: 100%; max-width: 1500px; margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.brand { display: inline-flex; align-items: center; }
.brand img { height: 38px; width: auto; }
.brand .logo-cream { display: none; }

.nav { display: flex; gap: 34px; justify-self: center; }
.nav a {
  font-family: var(--ff-label); font-weight: 400; font-size: .74rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--green);
  position: relative; padding-block: 6px; transition: color .3s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--amber); transition: right .35s var(--ease);
}
.nav a:hover::after { right: 0; }
.nav a:hover { color: var(--amber); }

.head-actions { display: flex; align-items: center; gap: 16px; justify-self: end; }
.head-social { display: flex; align-items: center; gap: 4px; }
.head-phone {
  font-family: var(--ff-label); font-weight: 500; font-size: .82rem; letter-spacing: .04em;
  color: var(--green); display: inline-flex; align-items: center; gap: .5em; transition: color .3s;
}
.head-phone:hover { color: var(--amber); }
.head-phone svg { width: 14px; height: 14px; }
.head-cta { padding: .7em 1.3em; font-size: .72rem; }
.menu-toggle { display: none; }

/* Over-dark variant (transparent header over dark hero) */
.site-head--over-dark .nav a { color: var(--cream); }
.site-head--over-dark .head-phone { color: var(--cream); }
.site-head--over-dark .brand .logo-green { display: none; }
.site-head--over-dark .brand .logo-cream { display: block; }
.site-head--over-dark .head-cta { --bg: var(--amber); --bd: var(--amber); --fg: var(--cream); }
.site-head--over-dark .head-cta:hover { --bg: var(--cream); --bd: var(--cream); --fg: var(--green); }
.site-head--over-dark .social-icon { color: var(--cream); }

/* Scrolled — solid frosted cream */
.site-head.is-scrolled {
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: saturate(1.1) blur(14px);
  -webkit-backdrop-filter: saturate(1.1) blur(14px);
  border-bottom-color: var(--line);
}
.site-head.is-scrolled .nav a { color: var(--green); }
.site-head.is-scrolled .head-phone { color: var(--green); }
.site-head.is-scrolled .brand .logo-green { display: block; }
.site-head.is-scrolled .brand .logo-cream { display: none; }
.site-head.is-scrolled .head-cta { --bg: var(--amber); --bd: var(--amber); --fg: var(--cream); }
.site-head.is-scrolled .nav a:hover { color: var(--amber); }
.site-head.is-scrolled .social-icon { color: var(--green); }

/* === Mobile menu === */
.mnav {
  position: fixed; inset: 0; z-index: 80; background: var(--green-deep); color: var(--cream);
  display: flex; flex-direction: column; padding: 28px var(--gut) 40px;
  transform: translateY(-100%); transition: transform .55s var(--ease); visibility: hidden;
}
.mnav.open { transform: translateY(0); visibility: visible; }
.mnav__top { display: flex; justify-content: space-between; align-items: center; }
.mnav__top img { height: 34px; }
.mnav__close {
  background: none; border: 0; color: var(--cream); font-size: 30px; line-height: 1;
  cursor: pointer; padding: 8px; min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: flex-end;
}
.mnav__links { display: flex; flex-direction: column; gap: 6px; margin-top: auto; margin-bottom: 28px; }
.mnav__links a {
  font-family: var(--ff-display); font-size: clamp(2rem,9vw,3rem); font-weight: 500;
  padding: 8px 0; border-bottom: 1px solid rgba(250,249,246,.14); min-height: 44px;
  display: flex; align-items: center;
}
.mnav__links a:hover { color: var(--amber-bright); }
.mnav__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.mnav__social { display: flex; gap: 8px; align-items: center; margin-top: 20px; }
.mnav__social .social-icon { color: color-mix(in srgb, var(--cream) 72%, transparent); }
.mnav__social .social-icon:hover { color: var(--amber-bright); }

/* === Mobile sticky call bar === */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none;
  grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
  border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(46,55,25,.10);
  padding-bottom: env(safe-area-inset-bottom);
}
.callbar a {
  background: var(--cream); display: flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 54px; padding: 15px; font-family: var(--ff-label); font-weight: 500; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.callbar a:active { background: var(--cream-3); }
.callbar a.is-amber { background: var(--amber); color: var(--cream); }
.callbar a.is-amber:active { background: var(--amber-bright); }
.callbar svg { width: 15px; height: 15px; }

/* === Motif / divider === */
.motif { display: block; color: var(--amber); }
.motif path, .motif line, .motif polyline {
  stroke: currentColor; fill: none; stroke-width: 2; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round;
}
.divider { display: flex; align-items: center; gap: 22px; }
.divider::before, .divider::after { content: ""; height: 1px; background: var(--line-strong); flex: 1; }
.dark .divider::before, .dark .divider::after { background: rgba(250,249,246,.22); }

/* === Photo slots ===
   A slot is either a real <img class="photo-slot"> OR an empty placeholder
   <div class="photo-slot" data-label="..."> that shows its label until a
   real photo is dropped in. */
figure { margin: 0; }
.photo-slot { display: block; width: 100%; height: auto; }
/* real photo */
img.photo-slot { object-fit: cover; object-position: center; }
.photo-slot > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
/* empty placeholder — branded, intentional-looking, never "broken" */
.photo-slot[data-label] {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--cream-2), var(--cream-3));
  border: 1px solid var(--line);
}
.photo-slot[data-label]::before {
  /* amber roof/peak motif watermark */
  content: ""; position: absolute; top: 50%; left: 50%; width: 64px; height: 24px;
  transform: translate(-50%, -150%); opacity: .5;
  background: var(--amber);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 38'%3E%3Cg fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M6 36 V14 L26 3 L46 17'/%3E%3Cpath d='M34 17 L54 5 L74 19'/%3E%3Cline x1='66' y1='19' x2='104' y2='19'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 38'%3E%3Cg fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M6 36 V14 L26 3 L46 17'/%3E%3Cpath d='M34 17 L54 5 L74 19'/%3E%3Cline x1='66' y1='19' x2='104' y2='19'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
.photo-slot[data-label]::after {
  content: attr(data-label); position: absolute; inset: 0; padding: 1.5em;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--ff-label); font-weight: 500; font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--green-soft); opacity: .8; line-height: 1.5;
  transform: translateY(14px);
}
.figcap {
  font-family: var(--ff-label); font-weight: 700; font-size: .68rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--green-soft); margin-top: 14px;
  display: flex; align-items: center; gap: .8em;
}
.figcap span { color: var(--amber); }

/* === Trust strip === */
.trust { display: grid; grid-template-columns: repeat(3,1fr); }
.trust__item { padding: clamp(28px,4vw,52px) clamp(20px,3vw,44px); text-align: center; position: relative; }
.trust__item + .trust__item::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px;
  background: rgba(250,249,246,.2);
}
.trust__num { font-family: var(--ff-display); font-size: clamp(2.6rem,5vw,4rem); font-weight: 500; line-height: 1; }
.trust__num em { font-style: normal; color: var(--amber-bright); }
.trust__lab { font-family: var(--ff-label); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; margin-top: 14px; color: color-mix(in srgb, var(--cream) 75%, transparent); }

/* === Estimate form === */
.estimate { display: grid; gap: 18px; }
/* min-width:0 lets fields shrink inside the grid so long <select> options
   (e.g. "Repairs & Service…") can't blow the column past the viewport */
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field.col-2 { grid-column: span 2; }
.field label {
  font-family: var(--ff-label); font-weight: 500; font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--green-soft);
}
.field input, .field select, .field textarea {
  font-family: var(--ff-body); font-size: 1rem; color: var(--green);
  background: var(--cream); border: 0; border-bottom: 1.5px solid var(--line-strong);
  padding: 12px 2px; transition: border-color .3s var(--ease); border-radius: 0;
  width: 100%; max-width: 100%; box-sizing: border-box;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--amber); }
.field textarea { resize: vertical; min-height: 96px; }
.field select { appearance: none; cursor: pointer; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.form-msg { font-family: var(--ff-label); font-size: .8rem; letter-spacing: .04em; padding: 12px 0; min-height: 1em; }
.form-msg.ok { color: var(--amber); }
.form-msg.err { color: #b3402a; }

/* Contact form sits inside a .dark section — override with visible light styling */
#contact .contact__form .field label { color: var(--green-soft); }
#contact .contact__form .field input,
#contact .contact__form .field select,
#contact .contact__form .field textarea {
  background: #fff; color: var(--green);
  border: 1px solid var(--line-strong); border-bottom-width: 1px; border-radius: 3px;
  padding: 13px 14px;
}
#contact .contact__form .field input::placeholder,
#contact .contact__form .field textarea::placeholder { color: color-mix(in srgb, var(--green) 52%, transparent); }
#contact .contact__form .field input:focus,
#contact .contact__form .field select:focus,
#contact .contact__form .field textarea:focus {
  outline: none; border-color: var(--amber);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 22%, transparent);
}
#contact .contact__form .form-msg.ok { color: var(--amber); }

/* === Before/after slider ===
   Both images are identical full-size layers (same object-fit/position), so
   there is zero scaling as you drag — the foreground is simply clipped with
   clip-path to reveal the layer behind it. */
.ba { position: relative; overflow: hidden; user-select: none; touch-action: pan-y; cursor: ew-resize; }
.ba__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block; pointer-events: none;
}
.ba__layer { position: absolute; inset: 0; }
/* foreground (the "before" image) — clipped from the right; left half shows by default */
.ba__after { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); -webkit-clip-path: inset(0 50% 0 0); }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--cream);
  transform: translateX(-50%); pointer-events: none;
}
.ba__knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 46px; height: 46px; border-radius: 50%; background: var(--cream);
  display: flex; align-items: center; justify-content: center; gap: 3px;
  box-shadow: 0 4px 18px rgba(0,0,0,.3);
}
.ba__knob::before, .ba__knob::after { content: ""; width: 0; height: 0; border-block: 5px solid transparent; }
.ba__knob::before { border-right: 7px solid var(--amber); }
.ba__knob::after { border-left: 7px solid var(--amber); }
.ba__tag {
  position: absolute; bottom: 16px; font-family: var(--ff-label); font-size: .62rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--cream);
  background: rgba(46,55,25,.6); padding: 6px 12px; backdrop-filter: blur(4px);
  pointer-events: none;
}
.ba__tag.before { right: 16px; }
.ba__tag.after  { left: 16px; }

/* === Footer === */
.site-foot { background: var(--green-deeper); color: var(--cream); padding: clamp(56px,7vw,96px) var(--gut) 0; }
.foot-grid { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; }
.foot-brand img { height: 74px; width: auto; margin-bottom: 22px; }
.foot-brand p { color: color-mix(in srgb, var(--cream) 68%, transparent); max-width: 32ch; font-size: .95rem; }
.foot-col h4 { font-family: var(--ff-label); font-weight: 500; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--amber-bright); margin: 0 0 18px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.foot-col a, .foot-col li { color: color-mix(in srgb, var(--cream) 72%, transparent); font-size: .92rem; }
.foot-col a:hover { color: var(--amber-bright); }
.foot-contact b { display: block; font-family: var(--ff-display); font-size: 1.7rem; font-weight: 500; color: var(--cream); margin-bottom: 4px; }
.foot-social { display: flex; gap: 8px; align-items: center; margin-top: 20px; }
.foot-social .social-icon { color: color-mix(in srgb, var(--cream) 72%, transparent); }
.foot-social .social-icon:hover { color: var(--amber-bright); }
.foot-rule {
  max-width: var(--maxw); margin: clamp(48px,6vw,72px) auto 0;
  border-top: 1px solid rgba(250,249,246,.16); padding: 26px 0 30px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.foot-rule small { color: color-mix(in srgb, var(--cream) 52%, transparent); font-size: .78rem; letter-spacing: .04em; }

/* === Scroll reveal === */
.reveal { opacity: 1; transform: none; }
.reveal.in { opacity: 1; transform: none; }

/* Hero video — green fallback while loading */
video[poster] { background: var(--green-deep); }

/* ============================================================
   Take 01 — Full-Bleed Monument (production styles)
   ============================================================ */

/* Hero */
.hero {
  position: relative; min-height: 100svh; display: flex;
  align-items: center; justify-content: center; text-align: center;
  color: var(--cream); overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(35,42,19,.62) 0%, rgba(35,42,19,.38) 38%, rgba(35,42,19,.72) 100%);
}
.hero__inner { position: relative; z-index: 2; padding: 120px var(--gut) 96px; max-width: 1280px; }
.hero .eyebrow { color: var(--amber-bright); justify-content: center; margin-bottom: 30px; }
.hero h1 {
  font-family: var(--ff-display); font-weight: 500; line-height: 1.02; letter-spacing: -.018em;
  font-size: clamp(2.5rem,6.4vw,6.4rem); margin: 0; text-wrap: balance;
}
.hero h1 em { font-style: italic; font-weight: 400; }
.hero p.lede { margin: 34px auto 0; max-width: 46ch; color: color-mix(in srgb, var(--cream) 88%, transparent); }
.hero__cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 44px; }
.hero__scroll {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: color-mix(in srgb, var(--cream) 70%, transparent);
  font-family: var(--ff-label); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase;
}
.hero__scroll span { width: 1px; height: 46px; background: linear-gradient(var(--amber-bright),transparent); }

/* Trust statement / creed */
.creed { text-align: center; }
.creed h2 {
  font-family: var(--ff-label); font-weight: 300; font-size: clamp(1.55rem,3.2vw,2.6rem);
  line-height: 1.32; letter-spacing: -.005em; max-width: 26ch; margin: 30px auto;
}
.creed h2 b { font-weight: 600; }
.creed .divider { max-width: 520px; margin-inline: auto; }

/* Section heading block */
.shead { text-align: center; max-width: 760px; margin: 0 auto clamp(48px,6vw,76px); }
.shead .eyebrow { justify-content: center; margin-bottom: 22px; }
.shead h2 { font-family: var(--ff-display); font-weight: 500; font-size: clamp(2.4rem,5.2vw,4.2rem); line-height: 1.02; margin: 0; }
.shead p { margin: 22px auto 0; max-width: 58ch; color: color-mix(in srgb, var(--green) 82%, transparent); }

/* Construction service cards */
.feat { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,2.6vw,40px); }
.fcard { display: flex; flex-direction: column; }
.fcard .photo-slot { aspect-ratio: 4/5; }
.fcard__no { font-family: var(--ff-label); font-size: .7rem; letter-spacing: .28em; color: var(--amber); margin: 22px 0 10px; }
.fcard h3 { font-family: var(--ff-display); font-weight: 500; font-size: 1.85rem; margin: 0 0 12px; line-height: 1.05; }
.fcard p { margin: 0 0 18px; font-size: .98rem; color: color-mix(in srgb, var(--green) 82%, transparent); }
.fcard .textlink { margin-top: auto; align-self: flex-start; }

/* Capabilities list */
.caps { margin-top: clamp(56px,6vw,84px); border-top: 1px solid var(--line); }
.caps__head { font-family: var(--ff-label); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--green-soft); padding-top: 26px; }
.caps__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-top: 26px; }
.caps__grid div {
  font-family: var(--ff-display); font-size: 1.5rem; padding: 20px 0;
  border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: .6em;
}
.caps__grid div::before { content: ""; width: 6px; height: 6px; background: var(--amber); flex: none; transform: translateY(-3px); }

/* Partnership — "We build the homes" */
.partner {
  position: relative; min-height: 72svh; display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--cream); overflow: hidden;
  background: var(--green-deep);
  padding: clamp(110px,14vw,180px) var(--gut);
}
.partner__inner { position: relative; z-index: 2; max-width: 840px; min-width: 0; width: 100%; }
.partner .eyebrow { color: var(--amber-bright); justify-content: center; margin-bottom: 26px; }
.partner h2 {
  font-family: var(--ff-display); font-weight: 500; letter-spacing: -.015em; line-height: .98;
  font-size: clamp(2.2rem,6.4vw,5.2rem); margin: 0;
}
.partner h2 em { font-style: italic; font-weight: 400; }
.partner__line {
  margin: 30px auto 0; max-width: 50ch; font-size: clamp(1.05rem,1.6vw,1.25rem); line-height: 1.6;
  color: color-mix(in srgb, var(--cream) 90%, transparent);
}
.partner__line b { font-family: var(--ff-display); font-style: italic; font-weight: 500; color: var(--amber-bright); }
.partner__cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 42px; }
.partner__cta .btn { padding: 1.1em 2.1em; font-size: .82rem; }
.partner__cta .btn svg { width: 1.05em; height: 1.05em; }
/* Site not live yet — link is present but visually muted.
   When toplevelhomebuilds.com launches, remove this rule to enable the link. */
.partner__cta .btn[data-coming-soon] {
  opacity: .55; pointer-events: none; cursor: default;
}
.partner__coming-note {
  font-family: var(--ff-label); font-size: .62rem; letter-spacing: .24em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 48%, transparent); margin: 0;
}

/* Amber line-art motif divider — clean break between the partnership
   ("We build the homes") and roofing sections. Both stay the same green. */
.sectionbreak { background: var(--green-deep); padding: clamp(22px,4vw,44px) var(--gut); }
.sectionbreak .divider { max-width: 540px; margin-inline: auto; }
.sectionbreak .divider::before,
.sectionbreak .divider::after { background: rgba(250,249,246,.24); }
.sectionbreak .motif { margin-inline: auto; }

/* Roofing section (secondary, dark green) */
.roof__top {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; flex-wrap: wrap; margin-bottom: clamp(40px,5vw,68px);
}
.roof__top h2 { font-family: var(--ff-display); font-weight: 500; font-size: clamp(2.2rem,4.6vw,3.6rem); margin: 0; line-height: 1; }
.roof__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(250,249,246,.16); border: 1px solid rgba(250,249,246,.16); }
.rcard { background: var(--green-deep); padding: clamp(28px,3vw,44px); }
.rcard__no { font-family: var(--ff-display); font-size: 2.4rem; color: var(--amber-bright); line-height: 1; }
.rcard h3 { font-family: var(--ff-display); font-weight: 500; font-size: 1.5rem; margin: 18px 0 12px; }
.rcard p { margin: 0; color: color-mix(in srgb, var(--cream) 72%, transparent); font-size: .95rem; }

/* Projects gallery */
.gal { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(18px,2.4vw,32px); }
.gal figure.wide { grid-column: span 2; }
.gal .a { aspect-ratio: 3/2; }
.gal .b { aspect-ratio: 16/8; }
.gal .photo-slot { width: 100%; }
.ba-wrap { margin-top: clamp(18px,2.4vw,32px); }
.ba { aspect-ratio: 16/8; }

/* Contact layout */
.contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px,6vw,96px); align-items: start; }
.contact__aside h2 { font-family: var(--ff-display); font-weight: 500; font-size: clamp(2.2rem,4.4vw,3.4rem); line-height: 1.02; margin: 24px 0 20px; }
.contact__aside .big-phone {
  font-family: var(--ff-display); font-size: clamp(1.8rem,3vw,2.4rem);
  display: inline-flex; align-items: center; gap: .4em; margin-top: 8px; white-space: nowrap;
}
.contact__aside .big-phone:hover { color: var(--amber-bright); }
.contact__points { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-direction: column; gap: 16px; }
.contact__points li { display: flex; gap: 14px; color: color-mix(in srgb, var(--cream) 78%, transparent); }
.contact__points li b { color: var(--amber-bright); font-family: var(--ff-label); font-weight: 500; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.contact__form { background: var(--cream); color: var(--green); padding: clamp(28px,3.4vw,48px); }
.contact__form h3 { font-family: var(--ff-display); font-weight: 500; font-size: 1.6rem; margin: 0 0 24px; }

/* --- Selected headings rendered in Poppins instead of Bodoni (client request).
   All other display headlines stay on --ff-display. --- */
.contact__form h3,
.contact__aside h2,            /* "Tell us about your project." */
.contact__aside .big-phone,    /* the big phone number */
.trust__num { font-family: var(--ff-label); }

/* All-caps treatment — these two stay on the Playfair display font */
#construction-heading,         /* "From foundation to final coat." */
#projects-heading,             /* "Built across the Panhandle." */
.trust__num { text-transform: uppercase; }

/* Poppins bold for the contact heading + big phone number (Section 7) */
.contact__aside h2,
.contact__aside .big-phone { font-weight: 700; }

/* Italicize the roofing headline */
#roofing-heading { font-style: italic; }

/* Ampersands sitting inside a Playfair heading render in Poppins — lighter
   weight and a touch smaller so they don't read big or bold. Wrap with
   <span class="amp">&amp;</span>. */
.amp { font-family: var(--ff-label); font-weight: 400; font-size: .9em; font-style: normal; }

/* ============================================================
   Responsive breakpoints
   ============================================================ */
@media (max-width: 1150px) {
  .head-social { display: none; } /* social icons move to mobile menu at this width */
}
@media (max-width: 1080px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 900px) {
  .feat { grid-template-columns: 1fr; gap: 34px; }
  .caps__grid { grid-template-columns: 1fr 1fr; }
  .roof__grid { grid-template-columns: 1fr; }
  .gal { grid-template-columns: 1fr; }
  .gal figure.wide { grid-column: auto; }
  .contact { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 860px) {
  body { font-size: 16px; }
  .nav { display: none; }
  .head-phone { display: none; }
  .head-actions { display: none; }
  .menu-toggle {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    background: none; border: 0; cursor: pointer; padding: 10px; min-width: 44px; min-height: 44px; justify-self: end;
  }
  .menu-toggle span { width: 26px; height: 1.5px; background: var(--green); display: block; transition: .3s; }
  .site-head--over-dark:not(.is-scrolled) .menu-toggle span { background: var(--cream); }
  .site-head__inner { grid-template-columns: auto 1fr; }
  /* Safe-area inset — logo clears the notch/status bar on iOS */
  .site-head {
    height: calc(var(--header-h) + max(env(safe-area-inset-top), 0px));
    padding-top: max(env(safe-area-inset-top), 0px);
    align-items: end;
    padding-bottom: 10px;
  }
  .mnav { padding-top: calc(28px + max(env(safe-area-inset-top), 0px)); }
  .callbar { display: grid; }
  body { padding-bottom: 54px; }
  .trust { grid-template-columns: 1fr; }
  .trust__item + .trust__item::before { left: 22%; right: 22%; top: 0; bottom: auto; width: auto; height: 1px; }
  .form-grid { grid-template-columns: 1fr; }
  .field.col-2 { grid-column: auto; }
  .foot-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 600px) {
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .hero { min-height: 88svh; }
  .lede { font-size: 1.05rem; }
  .hero__cta .btn { flex: 1 1 auto; min-height: 50px; }
  .partner { min-height: 78svh; }
  .partner__cta { width: 100%; }
  .partner__cta .btn { width: 100%; white-space: normal; line-height: 1.35; }
  .hero h1 br { display: none; }
  /* Prevent long words from breaking the 2-col caps grid past viewport */
  .caps__grid { grid-template-columns: 1fr; }
  /* Let contact and form fields shrink */
  .contact > * { min-width: 0; }
  .contact__form { padding: clamp(20px,5vw,40px); }
  .field input, .field select, .field textarea { min-width: 0; max-width: 100%; }
}

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