/* ===========================================================================
   Northline Arbor & Tree Co. — tree service
   Built on the Grawlix Tree Service template.
   ---------------------------------------------------------------------------
   Palette for the fictional Northline Arbor & Tree Co. mark: a struck-gold lockup
   on a near-black textured field. The reusable tree-service template keeps its
   original pine-and-amber visual language while using a fictional brand identity.

   The three golds are the highlight, body, and shadow side of those letterforms.
   --gold-deep exists because the bright gold fails contrast on the cream panels
   — every accent sitting on a light surface uses the deep one.

   components/chat/chat-widget.css reads --gold / --gold-2, so changing the
   accent here recolours the widget's launcher, chips, and user bubbles with it.
   =========================================================================== */
:root {
  --ink: #0a0908;
  --coal: #17140f;
  --night: #100e0c;
  --night-2: #1c1812;
  --bark: #4a3f29;
  --cream: #f6f2e8;
  --paper: #ece5d4;
  --gold: #d9a521;
  --gold-2: #f6dc8f;
  --gold-deep: #8a6212;
  --white: #fffdf8;
  --line-dark: rgba(10,9,8,.18);
  /* Warm, not neutral: a white hairline on these near-black panels reads blue. */
  --line-light: rgba(246,220,143,.18);
  --sans: "Manrope", system-ui, sans-serif;
  --condensed: "Barlow Condensed", "Arial Narrow", sans-serif;
  /* Only the brand lockup uses this — it echoes the engraved serif of the logo.
     Headings stay condensed: that is the template's voice and it suits the trade. */
  --display: "Playfair Display", Georgia, serif;
  --serif: "Playfair Display", Georgia, serif;
  --max: 1380px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.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; }
.hidden { display: none; }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 999; transform: translateY(-180%); background: var(--gold); color: var(--ink); padding: .75rem 1rem; font-weight: 800; }
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
  padding: 0 clamp(1rem, 4vw, 4.5rem);
  color: var(--white);
  background: rgba(10,9,8, .54);
  border-bottom: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(16px);
  transition: background .25s ease, min-height .25s ease;
}
.site-header.is-scrolled { background: rgba(10,9,8, .96); min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: .8rem; flex-shrink: 0; }
/* The template drew a triangle-tree glyph here. The template uses a fictional lockup, so
   the mark is their own artwork — a gold emblem on the same near-black the header
   sits on, which is why it needs a hairline to read as an object rather than a
   hole. Supplied at 206px, so it is never upscaled at these sizes. */
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; color: var(--gold); }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--line-light); border-radius: 4px; }
.footer-brand .brand-mark { width: 60px; height: 60px; }
.brand-copy { display: grid; line-height: 1; }
.brand-copy strong { font-family: var(--display); font-weight: 900; font-size: 1.35rem; letter-spacing: -.01em; }
.brand-copy span { margin-top: .25rem; font-size: .67rem; letter-spacing: .22em; text-transform: uppercase; opacity: .72; }
.site-nav { display: flex; align-items: center; gap: clamp(.8rem, 1.8vw, 2rem); font-size: .86rem; font-weight: 700; }
.site-nav > a:not(.button) { position: relative; }
/* scaleX rather than the template's width 0 -> 100%: identical wipe, but it runs on
   the compositor instead of relayouting the link on every frame of the hover. */
.site-nav > a:not(.button)::after { content: ""; position: absolute; left: 0; bottom: -.35rem; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.site-nav > a:hover::after { transform: scaleX(1); }
.nav-call { color: var(--gold); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; color: white; padding: 10px; }
.nav-toggle span:not(.sr-only) { display: block; width: 100%; height: 2px; background: currentColor; margin: 7px 0; transition: transform .2s ease; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: .95rem 1.35rem; border: 1px solid transparent; font-weight: 800; letter-spacing: -.01em; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 42px; padding: .7rem 1rem; font-size: .82rem; }
.button-gold { background: var(--gold); color: var(--ink); }
.button-gold:hover { background: #f6dc8f; }
.button-cream { background: var(--cream); color: var(--ink); }
.button-outline { border-color: rgba(255,255,255,.55); color: var(--white); }
.text-link { display: inline-flex; align-items: center; gap: .65rem; font-weight: 800; padding-bottom: .25rem; border-bottom: 1px solid rgba(255,255,255,.45); }
.text-link span { color: var(--gold); }
.dark-link { border-color: rgba(10,9,8,.35); }

.hero { position: relative; min-height: 100vh; background: var(--night); color: var(--white); overflow: hidden; padding-top: 78px; }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .09; background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 24px 24px; pointer-events: none; }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(430px, .98fr); min-height: calc(100vh - 78px); max-width: 1600px; margin: 0 auto; }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(4rem, 8vw, 8.5rem) clamp(1.3rem, 5vw, 6rem); }
.eyebrow { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.4rem; font-family: var(--condensed); font-size: .78rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.eyebrow span { width: 28px; height: 2px; background: var(--gold); }
.eyebrow.dark { color: rgba(10,9,8,.66); }
.hero h1 { max-width: 900px; margin: 0; font-family: var(--condensed); font-size: clamp(4rem, 7vw, 7.8rem); line-height: .88; letter-spacing: -.035em; text-transform: uppercase; }
.hero h1 em { color: var(--gold); font-style: normal; }
.hero-lede { max-width: 710px; margin: 2rem 0 0; color: rgba(255,255,255,.76); font-size: clamp(1rem, 1.5vw, 1.16rem); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 2.2rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: .7rem 1.8rem; margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line-light); color: rgba(255,255,255,.62); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.hero-trust span { position: relative; }
/* Separator only when a later non-empty sibling exists. :not(:last-child) left a dangling "/"
   on the last visible item once the empty-slot guard hid the trailing spans. */
.hero-trust span:not(:empty):has(~ span:not(:empty))::after { content: "/"; position: absolute; right: -.95rem; color: var(--gold); }
.hero-visual { position: relative; min-height: 720px; border-left: 1px solid var(--line-light); overflow: hidden; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.hero-visual::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(16,14,12,.45), transparent 50%); }
/* The template put a 4px gold bar down the left edge of this card. Swapped for a
   hairline on all four sides: the card still separates from the photo behind it,
   which is the job the border was doing, without the one-sided accent tab. The gold
   is still here — it is in the kicker directly above the heading. */
.hero-tag { position: absolute; left: clamp(1rem, 3vw, 3rem); bottom: clamp(2rem, 5vw, 5rem); z-index: 3; width: min(390px, calc(100% - 5rem)); padding: 1.5rem; background: rgba(16,14,12,.92); border: 1px solid var(--line-light); backdrop-filter: blur(10px); box-shadow: 0 16px 40px rgba(0,0,0,.22); }
.tag-kicker { display: block; color: var(--gold); font-family: var(--condensed); letter-spacing: .18em; font-size: .72rem; }
.hero-tag strong { display: block; margin-top: .4rem; font-family: var(--condensed); text-transform: uppercase; font-size: 1.65rem; line-height: 1; }
.hero-tag p { margin: .75rem 0 0; color: rgba(255,255,255,.7); font-size: .86rem; line-height: 1.5; }
.vertical-type { position: absolute; top: 50%; right: .6rem; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: var(--condensed); font-size: .75rem; letter-spacing: .28em; color: rgba(255,255,255,.42); }
.service-ticker { position: relative; z-index: 3; overflow: hidden; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); background: var(--gold); color: var(--ink); }
.service-ticker > div { display: flex; align-items: center; gap: 1.6rem; width: max-content; min-width: 100%; padding: .65rem 0; animation: ticker 24s linear infinite; font-family: var(--condensed); font-size: .82rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.service-ticker i { font-size: .55rem; }
@keyframes ticker { to { transform: translateX(-50%); } }

.section { padding: clamp(4.5rem, 8vw, 8.5rem) clamp(1.2rem, 5vw, 5.5rem); }
.section-heading { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2rem; align-items: end; max-width: var(--max); margin: 0 auto; }
.section h2 { margin: 0; font-family: var(--condensed); font-size: clamp(3.2rem, 6vw, 6rem); line-height: .91; letter-spacing: -.03em; text-transform: uppercase; }
.section h2 em { color: var(--gold); font-style: normal; }
.intro-panel { background: var(--cream); }
.intro-panel .section-heading .eyebrow { align-self: start; }
.intro-copy { max-width: var(--max); margin: -3rem auto 4rem; display: flex; justify-content: flex-end; }
.intro-copy p { width: min(580px, 100%); font-size: 1.1rem; color: rgba(10,9,8,.68); }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); max-width: var(--max); margin: 0 auto; border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
.service-card { position: relative; min-height: 290px; display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; padding: 2rem; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); background: rgba(255,255,255,.12); transition: background .2s ease, color .2s ease, transform .2s ease; }
.service-card:hover { background: var(--night); color: var(--white); transform: translateY(-4px); }
.service-card.featured { background: var(--gold); }
.service-card.featured:hover { background: var(--gold-deep); color: var(--ink); }
.service-number { font-family: var(--condensed); font-size: 1.1rem; color: var(--gold-deep); font-weight: 800; }
.service-card:hover .service-number { color: var(--gold); }
.service-card.featured .service-number { color: var(--ink); }
.service-card h3 { margin: 0; font-family: var(--condensed); font-size: 2rem; line-height: 1; text-transform: uppercase; }
.service-card p { margin: 1rem 0 0; color: rgba(10,9,8,.62); font-size: .92rem; }
.service-card:hover p { color: rgba(255,255,255,.7); }
.service-card.featured p { color: rgba(10,9,8,.7); }
.service-arrow { position: absolute; right: 1.4rem; top: 1.35rem; font-size: 1.3rem; }
.service-cta { display: block; background: var(--paper); }
.service-cta h3 { font-size: 2.7rem; }
.service-cta .text-link { margin-top: 2rem; }

.warning-section { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); gap: clamp(3rem, 7vw, 8rem); background: var(--night); color: var(--white); }
.warning-copy h2 { max-width: 760px; }
.warning-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line-light); }
.warning-list li { display: grid; grid-template-columns: 54px 1fr; gap: 1rem; align-items: start; padding: 1.45rem 0; border-bottom: 1px solid var(--line-light); }
.warning-list span { color: var(--gold); font-family: var(--condensed); font-weight: 800; font-size: 1.2rem; }
.warning-list p { margin: 0; color: rgba(255,255,255,.78); font-size: 1.02rem; }

.work-section { background: var(--paper); }
.work-header { max-width: var(--max); margin: 0 auto 4rem; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 4rem; align-items: end; }
.work-header > p { margin: 0 0 .5rem; color: rgba(10,9,8,.6); }
.project-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.2fr .8fr; gap: 3.2rem 2rem; }
.project { min-width: 0; }
.project-image { display: block; width: 100%; height: clamp(240px, 30vw, 380px); object-fit: cover; background-color: #241f16; filter: saturate(.88) contrast(1.03); }
/* The tall tile spans both rows so the before/after pair can stack beside it. With
   three non-wide tiles in a two-column grid, auto-placement otherwise left the
   second cell of row two empty — a hole the size of a tile. */
.project-large { grid-row: span 2; display: flex; flex-direction: column; }
.project-large .project-image { flex: 1; height: auto; min-height: clamp(340px, 48vw, 620px); }
/* The example before/after photographs carry a burned-in "Before!" / "After!" chip
   near the bottom of the frame. A landscape crop of a square source clipped it in
   half, which reads as a rendering fault. Anchoring to the top drops it cleanly and
   keeps the canopy, which is the part that actually changed — the chip is redundant
   next to the headings below, which already say BEFORE and AFTER. */
.project-crop-top .project-image { object-position: center top; }
.project-meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--line-dark); color: rgba(10,9,8,.56); font-family: var(--condensed); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.project h3 { margin: .8rem 0 0; max-width: 760px; font-family: var(--condensed); text-transform: uppercase; font-size: clamp(2rem, 3vw, 3.4rem); line-height: .98; }
.project > p, .project-copy-wide p { margin: .8rem 0 0; max-width: 660px; color: rgba(10,9,8,.62); }
.project-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.25fr .75fr; background: var(--cream); }
.project-wide .project-image { min-height: 500px; }
.project-copy-wide { align-self: end; padding: clamp(2rem, 5vw, 5rem); }

.process-section { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); gap: clamp(3rem, 7vw, 9rem); background: var(--coal); color: var(--white); }
.process-intro { align-self: start; position: sticky; top: 120px; }
.process-intro p:last-child { max-width: 430px; color: rgba(255,255,255,.64); font-size: 1.05rem; }
.process-list { border-top: 1px solid var(--line-light); }
.process-list article { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(130px, .32fr); gap: 1.2rem; padding: 2.2rem 0; border-bottom: 1px solid var(--line-light); }
.process-no { font-family: var(--condensed); font-size: 1.8rem; font-weight: 800; color: var(--gold); }
.process-list h3 { margin: 0; font-family: var(--condensed); font-size: 2.2rem; text-transform: uppercase; line-height: 1; }
.process-list p { margin: .75rem 0 0; color: rgba(255,255,255,.68); }
.process-list small { color: rgba(255,255,255,.42); font-family: var(--condensed); letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; }

.property-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; background: var(--cream); }
.property-image { display: block; width: 100%; height: 100%; min-height: clamp(420px, 55vw, 780px); object-fit: cover; }
.property-copy { padding: clamp(4rem, 8vw, 8rem) clamp(1.4rem, 6vw, 7rem); }
.property-copy > p:not(.eyebrow) { margin: 1.8rem 0 0; max-width: 650px; color: rgba(10,9,8,.65); }
.property-points { margin-top: 3rem; border-top: 1px solid var(--line-dark); }
.property-points div { display: grid; grid-template-columns: 50px 1fr; gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line-dark); }
.property-points span { font-family: var(--condensed); color: var(--gold-deep); font-weight: 800; }
.property-points p { margin: 0; }

.emergency-section { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: end; background: var(--gold); }
.emergency-section .eyebrow { color: rgba(10,9,8,.65); }
.emergency-section .eyebrow span { background: var(--ink); }
.emergency-section h2 { max-width: 850px; }
.emergency-section p:not(.eyebrow) { max-width: 720px; margin: 1.5rem 0 0; }
.emergency-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.emergency-section .button-outline { border-color: var(--ink); color: var(--ink); }

.metric { display: grid; padding: 1.15rem 0; border-bottom: 1px solid var(--line-dark); }
.metric strong { font-family: var(--condensed); font-size: 1.9rem; text-transform: uppercase; }
.metric span { color: rgba(10,9,8,.55); }

.faq-section { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); gap: clamp(3rem, 7vw, 8rem); background: var(--paper); }
.faq-heading { align-self: start; position: sticky; top: 120px; }
.faq-list { border-top: 1px solid var(--line-dark); }
details { border-bottom: 1px solid var(--line-dark); }
summary { position: relative; list-style: none; cursor: pointer; padding: 1.5rem 3rem 1.5rem 0; font-weight: 800; font-size: 1.04rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); font-family: var(--condensed); font-size: 1.8rem; color: var(--gold-deep); }
details[open] summary::after { content: "–"; }
details p { margin: -.4rem 3rem 1.5rem 0; color: rgba(10,9,8,.62); }

.estimate-section { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); gap: clamp(3rem, 7vw, 8rem); background: var(--night); color: var(--white); }
.estimate-copy { align-self: start; position: sticky; top: 120px; }
.estimate-copy > p:not(.eyebrow) { max-width: 620px; color: rgba(255,255,255,.68); }
.contact-block { display: grid; gap: .45rem; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line-light); }
.contact-block a:first-child { color: var(--gold); font-family: var(--condensed); font-size: 2rem; font-weight: 800; }
.contact-block span { color: rgba(255,255,255,.5); font-size: .82rem; }
.estimate-form { padding: clamp(1.4rem, 4vw, 3rem); border: 1px solid var(--line-light); background: rgba(255,255,255,.035); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.estimate-form label, .estimate-form fieldset { display: grid; gap: .5rem; min-width: 0; }
.estimate-form label > span, .estimate-form legend { font-family: var(--condensed); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; color: rgba(255,255,255,.68); }
.full { grid-column: 1 / -1; }
.estimate-form input, .estimate-form textarea { width: 100%; border: 1px solid rgba(255,255,255,.2); border-radius: 0; background: rgba(255,255,255,.05); color: var(--white); padding: 1rem; outline: none; }
.estimate-form input:focus, .estimate-form textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.estimate-form input::placeholder, .estimate-form textarea::placeholder { color: rgba(255,255,255,.36); }
.estimate-form fieldset { border: 0; padding: 0; margin: 0; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }
.choice-grid label { display: block; }
.choice-grid input { position: absolute; opacity: 0; pointer-events: none; }
.choice-grid span { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: .7rem; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.74); text-align: center; font-family: var(--sans) !important; font-size: .82rem !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; }
.choice-grid input:checked + span { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: 800; }
.form-submit { width: 100%; margin-top: 1.2rem; justify-content: space-between; }
.form-note { margin: .8rem 0 0; color: rgba(255,255,255,.38); font-size: .72rem; }

.site-footer { padding: clamp(3rem, 6vw, 6rem) clamp(1.2rem, 5vw, 5.5rem) 2rem; background: #0a0908; color: var(--white); }
.footer-top { max-width: var(--max); margin: 0 auto 3rem; display: flex; justify-content: space-between; gap: 2rem; align-items: end; }
.footer-top > p { margin: 0; max-width: 390px; color: rgba(255,255,255,.54); text-align: right; }
.footer-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: .8fr 1.2fr 1.5fr 1fr; gap: 2rem; padding: 2.5rem 0; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.footer-label { display: block; margin-bottom: .6rem; color: var(--gold); font-family: var(--condensed); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.footer-grid p { margin: 0; color: rgba(255,255,255,.62); font-size: .85rem; }
.footer-grid a { color: rgba(255,255,255,.82); font-size: .9rem; word-break: break-word; }
.footer-bottom { max-width: var(--max); margin: 1.5rem auto 0; display: flex; justify-content: space-between; gap: 1.5rem; color: rgba(255,255,255,.36); font-size: .72rem; }
.mobile-cta { display: none; }

@media (max-width: 1100px) {
  .site-nav { gap: .85rem; }
  .site-nav a:nth-child(2), .site-nav a:nth-child(4) { display: none; }
  .hero-grid { grid-template-columns: 1fr .9fr; }
  .hero h1 { font-size: clamp(4rem, 7vw, 6.5rem); }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .project-grid { gap: 2.4rem 1.4rem; }
  .metric { border-right: 1px solid var(--line-dark); border-bottom: 0; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  body { padding-bottom: 66px; }
  .site-header { min-height: 70px; padding: 0 1rem; }
  .site-header.is-scrolled { min-height: 64px; }
  .nav-toggle { display: block; }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }
  .site-nav { position: fixed; top: 0; right: 0; width: min(360px, 88vw); height: 100vh; padding: 7rem 1.5rem 2rem; display: flex; flex-direction: column; align-items: stretch; gap: 0; background: var(--coal); transform: translateX(105%); transition: transform .25s ease; box-shadow: -20px 0 50px rgba(0,0,0,.28); }
  .site-nav.is-open { transform: translateX(0); }
  .site-nav > a, .site-nav a:nth-child(2), .site-nav a:nth-child(4) { display: block; padding: 1rem .25rem; border-bottom: 1px solid var(--line-light); font-size: 1rem; }
  .site-nav .button { margin-top: 1rem; border-bottom: 0; text-align: center; }
  .hero { padding-top: 70px; }
  .hero-grid { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { padding: 4.7rem 1.25rem 3.6rem; }
  .hero h1 { font-size: clamp(3.65rem, 15vw, 6rem); }
  .hero-visual { min-height: 620px; border-left: 0; border-top: 1px solid var(--line-light); }
  .hero-tag { left: 1rem; bottom: 1rem; width: calc(100% - 3.5rem); }
  .section { padding: 4.5rem 1.25rem; }
  .section-heading, .warning-section, .work-header, .process-section, .faq-section, .estimate-section { grid-template-columns: 1fr; }
  .section-heading { gap: 1rem; }
  .intro-copy { margin: 1.2rem auto 3rem; justify-content: flex-start; }
  .intro-copy p { width: 100%; }
  .warning-section { gap: 3rem; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 230px; }
  .work-header { gap: 1.6rem; }
  .project-grid { grid-template-columns: 1fr; }
  .project-large .project-image, .project-image { min-height: 430px; }
  .project-wide { grid-column: auto; grid-template-columns: 1fr; }
  .project-wide .project-image { min-height: 420px; }
  .project-copy-wide { padding: 1.5rem; }
  .process-section { gap: 3rem; }
  .process-intro, .faq-heading, .estimate-copy { position: static; }
  .process-list article { grid-template-columns: 52px minmax(0,1fr); }
  .process-list small { grid-column: 2; }
  .property-section { grid-template-columns: 1fr; }
  .property-image { min-height: 560px; }
  .property-copy { padding: 4.5rem 1.25rem; }
  .emergency-section { grid-template-columns: 1fr; align-items: start; }
  .metric { border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .form-grid { grid-template-columns: 1fr; }
  .full { grid-column: auto; }
  .choice-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { display: grid; align-items: start; }
  .footer-top > p { text-align: left; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { display: grid; }
  .mobile-cta { position: fixed; z-index: 150; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: .85fr 1.15fr; min-height: 66px; box-shadow: 0 -10px 28px rgba(0,0,0,.18); }
  .mobile-cta a { display: flex; align-items: center; justify-content: center; font-weight: 800; }
  .mobile-cta a:first-child { background: var(--coal); color: var(--white); }
  .mobile-cta a:last-child { background: var(--gold); color: var(--ink); }
}

@media (max-width: 520px) {
  .brand-copy strong { font-size: 1.35rem; }
  .brand-mark { width: 34px; height: 34px; }
  .hero h1 { font-size: clamp(3.15rem, 16vw, 4.4rem); }
  .hero-actions { align-items: stretch; }
  .hero-actions .button, .hero-actions .text-link { width: 100%; justify-content: center; }
  .hero-trust { display: grid; gap: .65rem; }
  .hero-trust span::after { display: none; }
  .hero-visual { min-height: 520px; }
  .hero-tag { width: calc(100% - 2rem); }
  .section h2 { font-size: clamp(2.8rem, 14vw, 4rem); }
  .service-card { grid-template-columns: 38px 1fr; padding: 1.5rem; }
  .service-card h3 { font-size: 1.8rem; }
  .warning-list li { grid-template-columns: 44px 1fr; }
  .project-large .project-image, .project-image, .project-wide .project-image { min-height: 330px; }
  .process-list article { grid-template-columns: 42px minmax(0,1fr); padding: 1.6rem 0; }
  .process-list h3 { font-size: 1.75rem; }
  .property-image { min-height: 430px; }
  .choice-grid { grid-template-columns: 1fr; }
  .estimate-form { padding: 1rem; }
  .emergency-actions { display: grid; width: 100%; }
  .footer-brand .brand-copy strong { font-size: 1.6rem; }
}

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

/* --------------------------------------------------------------------------
   RESPONSIVE AUDIT PASS
   Keeps the editorial layouts intact while preventing text collisions,
   horizontal drift, and cramped grid tracks across desktop, tablet, and phone.
   -------------------------------------------------------------------------- */

html {
  max-width: 100%;
  overflow-x: clip;
  scroll-padding-top: 90px;
}

body {
  max-width: 100%;
  overflow-x: clip;
}

main,
.site-footer,
.hero,
.section {
  width: 100%;
  max-width: 100%;
}

#services,
#work,
#process,
#about,
#estimate {
  scroll-margin-top: 88px;
}

/* Grid and flex children must be allowed to shrink instead of forcing the page
   wider than the viewport. */
.hero-grid > *,
.section-heading > *,
.warning-section > *,
.work-header > *,
.project-grid > *,
.project-wide > *,
.process-section > *,
.process-list article > *,
.property-section > *,
.emergency-section > *,
.standards-section > *,
.faq-section > *,
.estimate-section > *,
.form-grid > *,
.footer-grid > * {
  min-width: 0;
}

h1,
h2,
h3,
.brand-copy,
.project-meta,
.footer-grid {
  max-width: 100%;
}

h1,
h2,
h3,

p,
li,
summary,
a,
span {
  overflow-wrap: break-word;
}

/* The ticker is intentionally wider than the viewport. Contain it so it never
   creates a root-level horizontal scrollbar. */
.service-ticker {
  max-width: 100vw;
  contain: paint;
}

.service-ticker > div {
  will-change: transform;
}

/* The original negative margin placed the intro paragraph on top of the large
   heading at several desktop widths. Keep the split-column look, but give each
   block its own row. */
.intro-panel .section-heading {
  align-items: start;
}

.intro-copy {
  margin: 2rem auto 4rem;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 2rem;
}

.intro-copy p {
  grid-column: 2;
  margin: 0;
}

/* Hide checkbox controls without leaving viewport-sized invisible inputs. */
.choice-grid input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.choice-grid input:focus-visible + span {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Keep the closed mobile drawer from contributing to visual overflow. */
@media (max-width: 820px) {
  .site-nav {
    visibility: hidden;
    pointer-events: none;
  }

  .site-nav.is-open {
    visibility: visible;
    pointer-events: auto;
  }

  .section-heading,
  .warning-section,
  .work-header,
  .process-section,
  .faq-section,
  .estimate-section,
  .intro-copy {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .intro-copy {
    margin: 1.35rem auto 3rem;
    gap: 0;
  }

  .intro-copy p {
    grid-column: 1;
  }

  .process-intro,
  .process-list,
  .warning-copy,
  .warning-list,
  .faq-heading,
  .faq-list,
  .estimate-copy,
  .estimate-form {
    width: 100%;
    max-width: 100%;
  }

  .property-section {
    padding: 0;
  }

  .property-copy {
    width: 100%;
  }

  .mobile-cta a {
    min-width: 0;
    padding: .8rem .65rem;
    text-align: center;
    line-height: 1.15;
  }
}

@media (max-width: 620px) {
  .section {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .section h2 {
    font-size: clamp(2.7rem, 12vw, 3.55rem);
    line-height: .94;
    letter-spacing: -.025em;
  }

  .intro-panel .section-heading h2 {
    font-size: clamp(2.7rem, 11.5vw, 3.45rem);
  }

  .warning-copy h2,
  .property-copy h2,
  .estimate-copy h2 {
    font-size: clamp(2.65rem, 11.5vw, 3.45rem);
  }

  .service-card {
    min-height: 0;
  }

  .project-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: .25rem;
  }

  .process-list article {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: .85rem;
  }

  .process-list small {
    grid-column: 2;
  }

  .property-copy {
    padding: 4rem 1rem;
  }

  .property-points div {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  summary {
    padding-right: 2.4rem;
  }

  details p {
    margin-right: 0;
  }

  .contact-block a:first-child {
    font-size: 1.7rem;
  }

  .footer-top,
  .footer-grid,
  .footer-bottom {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .brand {
    gap: .5rem;
  }

  .brand-copy strong {
    font-size: .92rem;
    white-space: nowrap;
  }

  .brand-copy span {
    font-size: .58rem;
    letter-spacing: .17em;
  }

  .hero h1 {
    font-size: clamp(2.85rem, 14.2vw, 3.65rem);
  }

  .hero-tag {
    left: .75rem;
    bottom: .75rem;
    width: calc(100% - 1.5rem);
  }

  .service-card {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: .8rem;
    padding: 1.25rem;
  }

  .service-card h3 {
    font-size: 1.65rem;
  }

  .mobile-cta {
    grid-template-columns: .8fr 1.2fr;
  }

  .mobile-cta a {
    font-size: .86rem;
  }
}

/* ---------------------------------------------------------------------------
   Empty-slot guards.

   A token template cannot drop a card the way a loop can: an unfilled token
   renders as an empty string, so a business with four services or three FAQs
   used to leave a bordered box with no words in it. These hide any card whose
   heading came back empty, which is why the markup can safely declare five
   service slots and five questions without padding them with invented copy.
   --------------------------------------------------------------------------- */
.service-grid .service-card:not(.service-cta):has(h3:empty),
.project-grid .project:has(h3:empty),
.faq-list details:has(summary:empty),
.process-list article:has(h3:empty),
.warning-list li:has(p:empty),
/* Added for this build. The template guarded the card grids but not the contact
   details, so the unconfirmed email rendered as an empty gold link in the contact
   block and a bare "Email" heading over nothing in the footer. */
.contact-block a:empty,
.contact-block span:empty,
.footer-grid > div:has(a:empty),
.footer-grid > div:has(p:empty),
.hero-trust span:empty { display: none; }

/* Standards band — replaces the removed testimonial pull-quote. Same rhythm as
   the section it succeeds, without asserting that a customer said anything. */
.standards-section { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(300px, .5fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; background: var(--cream); }
.standards-mark { font-family: Georgia, serif; font-size: 5rem; color: var(--gold); line-height: .7; }
.standards-lead h2 { margin: .6rem 0 0; max-width: 22ch; }
.standards-side { border-left: 1px solid var(--line-dark); padding-left: clamp(1.5rem, 4vw, 4rem); }

@media (max-width: 900px) {
  .standards-section { grid-template-columns: 60px 1fr; }
  .standards-side { grid-column: 2; border-left: 0; border-top: 1px solid var(--line-dark); padding: 2rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
@media (max-width: 640px) {
  .standards-section { grid-template-columns: 1fr; gap: 1.2rem; }
  .standards-mark { font-size: 3.5rem; }
  .standards-side { grid-column: auto; grid-template-columns: 1fr; }
}

/* Client-ready refinements */
.brand-mark { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; flex: 0 0 58px; background: #080706; }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.hero-trust span strong { color: var(--gold); font-family: var(--condensed); font-size: 1.15em; }

.reviews-band { position: relative; overflow: hidden; padding: 2.6rem 0 2.8rem; background: #0a0908; color: var(--white); border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.reviews-summary { padding: 0 clamp(1.2rem, 5vw, 5.5rem) 1.6rem; text-align: center; }
.reviews-summary .eyebrow { justify-content: center; margin-bottom: .65rem; }
.reviews-summary h2 { margin: 0; font-family: var(--condensed); font-size: clamp(1.8rem, 4vw, 3rem); text-transform: uppercase; letter-spacing: .02em; }
.reviews-summary h2 strong { color: var(--gold); }
.reviews-summary h2 .review-divider { margin: 0 .35rem; color: rgba(255,255,255,.35); }
.reviews-summary h2 .review-rating,
.reviews-summary h2 .review-count { white-space: nowrap; }
.reviews-marquee { position: relative; overflow: hidden; }
.reviews-marquee::before, .reviews-marquee::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: clamp(34px, 7vw, 110px); pointer-events: none; }
.reviews-marquee::before { left: 0; background: linear-gradient(90deg, #0a0908, transparent); }
.reviews-marquee::after { right: 0; background: linear-gradient(-90deg, #0a0908, transparent); }
.reviews-track { display: flex; width: max-content; gap: 1rem; padding: .25rem .5rem; animation: review-scroll 50s linear infinite; }
.reviews-marquee:hover .reviews-track { animation-play-state: paused; }
.review-card { width: min(360px, 82vw); min-height: 150px; padding: 1.25rem 1.35rem; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.045); display: flex; flex-direction: column; justify-content: space-between; }
.review-stars { color: var(--gold); letter-spacing: .12em; font-size: .9rem; }
.review-card p { margin: .8rem 0; font-family: var(--serif); font-size: 1.1rem; line-height: 1.42; }
.review-card span { color: rgba(255,255,255,.48); font-family: var(--condensed); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }
@keyframes review-scroll { to { transform: translateX(calc(-50% - .5rem)); } }

.property-copy .button { margin-top: 1.8rem; }
.button-ink { background: var(--ink); color: var(--white); border-color: var(--ink); }
.button-ink:hover { background: #2a251f; border-color: #2a251f; }
.estimate-form select { width: 100%; border: 1px solid rgba(255,255,255,.2); border-radius: 0; background: #201d19; color: var(--white); padding: 1rem; outline: none; }
.estimate-form select:focus { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.file-field small { color: rgba(255,255,255,.45); font-size: .72rem; }
.file-field input[type="file"] { padding: .7rem; }

@media (prefers-reduced-motion: reduce) {
  .reviews-track { animation: none; width: auto; overflow-x: auto; padding-inline: 1.25rem; }
}

@media (max-width: 820px) {
  .brand-copy { display: grid; }
  .brand-copy strong { font-size: 1.05rem; white-space: nowrap; }
  .brand-copy > span { display: none; }
  .brand-mark { width: 48px; height: 48px; flex-basis: 48px; }
  .reviews-band { padding: 2.1rem 0 2.3rem; }
  .reviews-summary h2 { font-size: clamp(1.55rem, 7vw, 2.2rem); line-height: 1.15; }
  .reviews-summary h2 .review-divider { margin-inline: .2rem; }
  .review-card { min-height: 140px; }
}


/* Final client-review refinements */
@media (min-width: 821px) {
  .process-section {
    grid-template-columns: minmax(380px, .9fr) minmax(0, 1.1fr);
    gap: clamp(3rem, 6vw, 7rem);
  }

  .process-intro h2 {
    font-size: clamp(4rem, 6vw, 6.6rem);
    line-height: .92;
    letter-spacing: -.035em;
    max-width: 7.8ch;
  }
}

.file-field input[type="file"] {
  padding: 0;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.72);
  cursor: pointer;
}

.file-field input[type="file"]::file-selector-button {
  margin-right: 1rem;
  padding: 1rem 1.15rem;
  border: 0;
  border-right: 1px solid rgba(10,9,8,.18);
  background: var(--gold);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 800;
  cursor: pointer;
  transition: background-color .2s ease;
}

.file-field input[type="file"]::file-selector-button:hover {
  background: #efbc25;
}

.file-field input[type="file"]::-webkit-file-upload-button {
  margin-right: 1rem;
  padding: 1rem 1.15rem;
  border: 0;
  border-right: 1px solid rgba(10,9,8,.18);
  background: var(--gold);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 820px) {
  .process-intro h2 {
    max-width: 11ch;
  }
}

/* Mobile process-heading fix: keep “Straightforward” intact instead of allowing
   the global overflow-wrap rule to split it mid-word. */
.process-intro h2 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

@media (max-width: 820px) {
  .process-intro h2 {
    width: 100%;
    max-width: none;
    font-size: clamp(2.65rem, 11vw, 3.8rem);
    line-height: .94;
  }
}

@media (max-width: 420px) {
  .process-intro h2 {
    font-size: clamp(2.35rem, 10.6vw, 2.8rem);
  }
}