/* ==========================================================================
   Pooler Tree Service
   poolertreeservice.com
   Design system: Forest #1F3325 + Equipment Yellow #F0B429
   Portfolio 1 of 3 (Tree). Shared by every page on this site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root{
  /* Core pair */
  --authority:      #1F3325;
  --action:         #F0B429;
  --surface:        #F3F1EC;
  --ink:            #131C16;

  /* Derived */
  --muted:              rgba(19,28,22,.65);
  --border:             rgba(0,0,0,.08);
  --authority-deep:     #16241A;
  --authority-soft:     #2B4433;
  --action-hover:       #DBA318;
  --on-authority:       #EDEFEA;
  --on-authority-muted: rgba(237,239,234,.72);
  --card:               #FFFFFF;
  --scrim:              rgba(31,51,37,.55);

  --shadow:      0 2px 4px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --shadow-lift: 0 4px 8px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.10);

  --radius-card: 10px;
  --radius-btn:  6px;

  /* Type */
  --font-display: 'Barlow Condensed', 'Arial Narrow', Helvetica, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --h1:      clamp(2.6rem, 6vw, 4.6rem);
  --h2:      clamp(2rem, 4vw, 3rem);
  --h3:      clamp(1.35rem, 2.4vw, 1.75rem);
  --h4:      1.125rem;
  --body:    clamp(1rem, 1.1vw, 1.125rem);
  --small:   0.875rem;
  --eyebrow: 0.8125rem;

  /* Spacing */
  --gap:       1.5rem;
  --section-y: clamp(3.5rem, 7vw, 6rem);
  --container: 1200px;
  --container-pad: 1.25rem;

  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */

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

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

body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--body);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,picture,video,svg{ max-width:100%; display:block; }

h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  margin:0 0 .5em;
  line-height:1.05;
}

h1{
  font-size:var(--h1);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.01em;
}

h2{
  font-size:var(--h2);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.01em;
}

h3{ font-size:var(--h3); font-weight:700; line-height:1.15; }
h4{ font-size:var(--h4); font-weight:700; line-height:1.2; }

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

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

ul,ol{ margin:0 0 1.15em; padding-left:1.25rem; }
li{ margin-bottom:.4em; }

strong{ font-weight:600; }

hr{
  border:0;
  border-top:1px solid var(--border);
  margin:2rem 0;
}

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

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:9999;
  background:var(--action);
  color:var(--ink);
  padding:.75rem 1.25rem;
  font-weight:600;
  border-radius:0 0 var(--radius-btn) 0;
}
.skip-link:focus{ left:0; }

/* --------------------------------------------------------------------------
   3. LAYOUT HELPERS
   -------------------------------------------------------------------------- */

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--container-pad);
}

.container-narrow{
  width:100%;
  max-width:820px;
  margin-inline:auto;
  padding-inline:var(--container-pad);
}

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

.section-surface{ background:var(--surface); }
.section-card{ background:var(--card); }

.section-authority{
  background:var(--authority);
  color:var(--on-authority);
}
.section-authority h2,
.section-authority h3{ color:#fff; }
.section-authority p{ color:var(--on-authority-muted); }

.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }

.lede{
  font-size:1.0625rem;
  color:var(--muted);
  max-width:62ch;
}
.section-authority .lede{ color:var(--on-authority-muted); }

/* Section header: short action-color rule ABOVE the H2 */
.section-head{ margin-bottom:2.5rem; max-width:70ch; }

.section-head::before{
  content:"";
  display:block;
  width:56px;
  height:4px;
  background:var(--action);
  margin-bottom:1.25rem;
  border-radius:2px;
}

.section-head.is-center{ margin-inline:auto; text-align:center; }
.section-head.is-center::before{ margin-inline:auto; }
.section-head h2{ margin-bottom:.4em; }
.section-head p{ margin-bottom:0; }

.eyebrow{
  display:block;
  font-family:var(--font-body);
  font-size:var(--eyebrow);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.75rem;
}
.section-authority .eyebrow,
.hero .eyebrow{ color:var(--on-authority-muted); }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:600;
  line-height:1.2;
  padding:16px 32px;
  border-radius:var(--radius-btn);
  border:2px solid transparent;
  cursor:pointer;
  text-align:center;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.btn-action{
  background:var(--action);
  color:var(--ink);
}
.btn-action:hover{ background:var(--action-hover); }

.btn-outline{
  background:transparent;
  border-color:rgba(255,255,255,.55);
  color:#fff;
}
.btn-outline:hover{
  border-color:#fff;
  background:rgba(255,255,255,.10);
}

.btn-outline-ink{
  background:transparent;
  border-color:rgba(19,28,22,.28);
  color:var(--ink);
}
.btn-outline-ink:hover{
  border-color:var(--ink);
  background:rgba(19,28,22,.05);
}

.btn-lg{ padding:18px 38px; font-size:1.0625rem; }
.btn-sm{ padding:11px 20px; font-size:.9375rem; }
.btn-block{ display:flex; width:100%; }

.btn-group{
  display:flex;
  flex-wrap:wrap;
  gap:.875rem;
}

/* Approved reassurance line under call buttons */
.call-note{
  font-size:var(--small);
  color:var(--on-authority-muted);
  margin:1rem 0 0;
  max-width:46ch;
}
.section-card .call-note,
.section-surface .call-note{ color:var(--muted); }

/* --------------------------------------------------------------------------
   5. HEADER + NAV
   -------------------------------------------------------------------------- */

.site-header{
  position:sticky;
  top:0;
  z-index:900;
  background:var(--authority);
  color:var(--on-authority);
  border-bottom:1px solid rgba(255,255,255,.10);
}

.header-inner{
  display:flex;
  align-items:center;
  gap:1.5rem;
  min-height:var(--header-h);
}

/* Logo lockup, type only */
.logo{
  display:flex;
  flex-direction:column;
  line-height:1;
  flex-shrink:0;
  color:#fff;
}
.logo-mark{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.5rem;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.logo-sub{
  font-family:var(--font-body);
  font-size:.625rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--on-authority-muted);
  margin-top:.28rem;
}

.nav{ margin-left:auto; }

.nav-list{
  display:flex;
  align-items:center;
  gap:.35rem;
  list-style:none;
  margin:0;
  padding:0;
}
.nav-list li{ margin:0; position:relative; }

.nav-link{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-family:var(--font-display);
  font-size:1.0625rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--on-authority);
  padding:.65rem .8rem;
  border-radius:4px;
  background:none;
  border:0;
  cursor:pointer;
  font-family:var(--font-display);
}
.nav-link:hover,
.nav-link[aria-expanded="true"]{
  color:#fff;
  background:rgba(255,255,255,.08);
}
.nav-link[aria-current="page"]{ color:#fff; }

.nav-caret{
  width:9px;
  height:9px;
  flex-shrink:0;
  transition:transform .18s ease;
}
.nav-link[aria-expanded="true"] .nav-caret{ transform:rotate(180deg); }

/* Services dropdown */
.dropdown{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  min-width:290px;
  background:var(--authority-soft);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-card);
  box-shadow:0 18px 44px rgba(0,0,0,.32);
  padding:.5rem;
  list-style:none;
  margin:0;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}

.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown,
.dropdown.is-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.dropdown li{ margin:0; }

.dropdown a{
  display:block;
  padding:.7rem .85rem;
  border-radius:6px;
  font-size:.9375rem;
  font-weight:500;
  color:var(--on-authority);
  line-height:1.35;
}
.dropdown a:hover{ background:rgba(255,255,255,.10); color:#fff; }

.dropdown .dropdown-hub{
  font-weight:600;
  color:#fff;
}
.dropdown .dropdown-hub::after{
  content:"Main service";
  display:block;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--on-authority-muted);
  margin-top:.2rem;
}

/* Mobile-only CTA block inside the nav drawer. Hidden at desktop, where the
   header-actions phone and button already cover it. */
.nav-mobile-cta{ display:none; }

.header-actions{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-shrink:0;
}

.header-phone{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  color:#fff;
}
.header-phone .header-phone-label{
  font-size:.625rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--on-authority-muted);
}
.header-phone .header-phone-num{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.25rem;
  letter-spacing:.01em;
}
.header-phone:hover .header-phone-num{ color:var(--action); }

/* Mobile nav toggle */
.nav-toggle{
  display:none;
  margin-left:auto;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-btn);
  color:#fff;
  cursor:pointer;
  padding:0;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  display:block;
  width:20px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after{ content:""; position:absolute; }
.nav-toggle-bars::before{ transform:translateY(-6px); }
.nav-toggle-bars::after{ transform:translateY(6px); }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars{ background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{ transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{ transform:rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */

.hero{
  position:relative;
  background:var(--authority);
  color:var(--on-authority);
  overflow:hidden;
  isolation:isolate;
}

.hero-media{
  position:absolute;
  inset:0;
  z-index:-2;
}
.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 40%;
}

/* Forest scrim at 55%, plus a slight left weight so the H1 stays legible */
.hero-scrim{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(100deg, rgba(22,36,26,.86) 0%, rgba(31,51,37,.62) 46%, rgba(31,51,37,.42) 100%),
    var(--scrim);
}

.hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,4vw,3.5rem);
  align-items:center;
  min-height:85vh;
  padding-block:clamp(3rem,6vw,4.5rem);
}

.hero-copy{ max-width:38ch; }
.hero-copy h1{ color:#fff; margin-bottom:.45em; }

.hero-sub{
  font-size:1.125rem;
  color:var(--on-authority-muted);
  max-width:46ch;
  margin-bottom:1.75rem;
}

/* --------------------------------------------------------------------------
   7. FORMS
   -------------------------------------------------------------------------- */

.form-card{
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-lift);
  padding:clamp(1.5rem,2.5vw,2rem);
}

.form-card-head{ margin-bottom:1.25rem; }
.form-card-head h2,
.form-card-head h3{
  font-size:1.6rem;
  text-transform:uppercase;
  letter-spacing:-.01em;
  margin-bottom:.3rem;
  color:var(--ink);
}
.form-card-head p{
  font-size:var(--small);
  color:var(--muted);
  margin:0;
}

.form-field{ margin-bottom:.875rem; }

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
}

.form-field label{
  display:block;
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.02em;
  margin-bottom:.35rem;
  color:var(--ink);
}

.form-field .req{ color:#9A3412; margin-left:.15rem; }

.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--ink);
  background:#fff;
  border:1px solid rgba(0,0,0,.18);
  border-radius:var(--radius-btn);
  padding:.75rem .875rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}

.form-field textarea{ min-height:96px; resize:vertical; }

.form-field select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23131C16' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .9rem center;
  background-size:11px;
  padding-right:2.4rem;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--authority);
  box-shadow:0 0 0 3px rgba(31,51,37,.14);
}

.form-field input::placeholder,
.form-field textarea::placeholder{ color:rgba(19,28,22,.42); }

.form-note{
  font-size:.75rem;
  color:var(--muted);
  margin:.85rem 0 0;
  line-height:1.5;
}

/* Honeypot. Hidden from people, reachable by bots. */
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.form-status{
  margin:.85rem 0 0;
  font-size:var(--small);
  font-weight:500;
  display:none;
}
.form-status.is-visible{ display:block; }
.form-status.is-error{ color:#9A3412; }
.form-status.is-success{ color:#1F3325; }

/* --------------------------------------------------------------------------
   8. PROOF BAND
   -------------------------------------------------------------------------- */

.proof-band{
  background:var(--authority-deep);
  color:#fff;
  border-top:1px solid rgba(255,255,255,.08);
}

.proof-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  list-style:none;
  margin:0;
  padding:0;
}

.proof-list li{
  margin:0;
  padding:1.5rem 1.25rem;
  text-align:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(.9375rem,1.35vw,1.125rem);
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.25;
  border-left:2px solid var(--action);
  display:flex;
  align-items:center;
  justify-content:center;
}
.proof-list li:first-child{ border-left:0; }

/* --------------------------------------------------------------------------
   9. CARDS + GRIDS
   -------------------------------------------------------------------------- */

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover{ box-shadow:var(--shadow-lift); }

.card-body{ padding:1.5rem; flex:1; display:flex; flex-direction:column; }
.card-body h3{ margin-bottom:.5rem; }
.card-body p{
  color:var(--muted);
  font-size:.9688rem;
  margin-bottom:1.15rem;
}
.card-body p:last-of-type{ margin-bottom:1.15rem; }

.card-media{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--authority-soft);
}
.card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.card:hover .card-media img{ transform:scale(1.04); }

.card-link{
  margin-top:auto;
  font-weight:600;
  font-size:.9375rem;
  color:var(--authority);
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.card-link::after{
  content:"";
  width:14px;
  height:9px;
  background:currentColor;
  clip-path:polygon(0 38%, 62% 38%, 62% 0, 100% 50%, 62% 100%, 62% 62%, 0 62%);
  transition:transform .18s ease;
}
.card:hover .card-link::after{ transform:translateX(3px); }

/* Whole card is clickable via the stretched link */
.card-stretch::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}
.card{ position:relative; }

.grid{
  display:grid;
  gap:var(--gap);
}
.grid-3{ grid-template-columns:repeat(auto-fit, minmax(290px,1fr)); }
.grid-4{ grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); }

/* Services grid, 5 cards. Three up, then two centered underneath. */
.services-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:var(--gap);
}
.services-grid > .card{ grid-column:span 2; }
.services-grid > .card:nth-child(4){ grid-column:2 / span 2; }
.services-grid > .card:nth-child(5){ grid-column:4 / span 2; }

/* Why choose us, 4 plain cards, no photo */
.why-card{ padding:1.75rem 1.5rem; }
.why-card h3{ font-size:1.25rem; margin-bottom:.5rem; }
.why-card p{
  color:var(--muted);
  font-size:.9688rem;
  margin:0;
}

/* --------------------------------------------------------------------------
   10. PROCESS
   -------------------------------------------------------------------------- */

.process{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:2rem;
  counter-reset:step;
}

.process-step{ position:relative; padding-top:.5rem; }

.process-step .step-num{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--authority);
  color:#fff;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.75rem;
  line-height:1;
  margin-bottom:1.1rem;
}
.section-authority .process-step .step-num{
  background:var(--action);
  color:var(--ink);
}

.process-step h3{ margin-bottom:.45rem; }
.process-step p{
  color:var(--muted);
  font-size:.9688rem;
  margin:0;
}

/* --------------------------------------------------------------------------
   11. GALLERY
   -------------------------------------------------------------------------- */

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:1rem;
}

.gallery-item{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:var(--radius-card);
  border:1px solid var(--border);
  background:var(--authority-soft);
}
.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.gallery-item:hover img{ transform:scale(1.04); }

/* --------------------------------------------------------------------------
   12. SERVICE AREAS
   -------------------------------------------------------------------------- */

.area-pills{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  list-style:none;
  margin:0;
  padding:0;
}
.area-pills li{ margin:0; }

.area-pill{
  display:inline-block;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.7rem 1.35rem;
  font-weight:500;
  font-size:.9375rem;
  box-shadow:var(--shadow);
  transition:border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.area-pill:hover{
  border-color:rgba(31,51,37,.4);
  transform:translateY(-1px);
}

.area-pill-static{
  background:transparent;
  box-shadow:none;
  color:var(--muted);
}

/* --------------------------------------------------------------------------
   13. FAQ ACCORDION
   -------------------------------------------------------------------------- */

.faq{
  border-top:1px solid var(--border);
  max-width:900px;
}

.faq-item{
  border-bottom:1px solid var(--border);
  background:transparent;
}

.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.35rem 0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.125rem,1.8vw,1.375rem);
  line-height:1.25;
}
.faq-item summary::-webkit-details-marker{ display:none; }

.faq-item summary::after{
  content:"";
  flex-shrink:0;
  width:16px;
  height:16px;
  margin-top:.35rem;
  background:var(--authority);
  clip-path:polygon(43% 0, 57% 0, 57% 43%, 100% 43%, 100% 57%, 57% 57%, 57% 100%, 43% 100%, 43% 57%, 0 57%, 0 43%, 43% 43%);
  transition:transform .2s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }

.faq-item summary:hover{ color:var(--authority); }

.faq-answer{
  padding:0 0 1.5rem;
  max-width:75ch;
}
.faq-answer p{
  color:var(--muted);
  font-size:1rem;
}
.faq-answer a{
  color:var(--authority);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* --------------------------------------------------------------------------
   14. FINAL CTA
   -------------------------------------------------------------------------- */

.cta-final{
  background:var(--authority);
  color:var(--on-authority);
  text-align:center;
}
.cta-final h2{ color:#fff; }
.cta-final .lede{
  margin-inline:auto;
  margin-bottom:2rem;
}
.cta-final .btn-group{ justify-content:center; }
.cta-final .call-note{ margin-inline:auto; text-align:center; }

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */

.site-footer{
  background:var(--authority-deep);
  color:var(--on-authority-muted);
  font-size:.9375rem;
  padding-block:clamp(3rem,5vw,4rem) 0;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:2.5rem;
  padding-bottom:2.5rem;
}

.site-footer h3{
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#fff;
  margin-bottom:1rem;
}

.footer-list{
  list-style:none;
  margin:0;
  padding:0;
}
.footer-list li{ margin-bottom:.6rem; }
.footer-list a:hover{ color:#fff; text-decoration:underline; text-underline-offset:2px; }

.site-footer .logo{ margin-bottom:1rem; }

.footer-about p{ max-width:34ch; margin-bottom:1rem; }

.footer-contact-line{
  display:block;
  margin-bottom:.6rem;
  color:var(--on-authority-muted);
}
.footer-contact-line strong{
  display:block;
  color:#fff;
  font-family:var(--font-display);
  font-size:1.375rem;
  font-weight:700;
  letter-spacing:.01em;
}
a.footer-contact-line:hover strong{ color:var(--action); }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding-block:1.5rem;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1.5rem;
  align-items:center;
  justify-content:space-between;
  font-size:.8125rem;
}
.footer-bottom p{ margin:0; }

.footer-legal{
  display:flex;
  flex-wrap:wrap;
  gap:1.25rem;
  list-style:none;
  margin:0;
  padding:0;
}
.footer-legal li{ margin:0; }
.footer-legal a:hover{ color:#fff; }

/* --------------------------------------------------------------------------
   16. BREADCRUMBS (service and area pages, phase 2)
   -------------------------------------------------------------------------- */

.breadcrumb{
  font-size:var(--small);
  margin-bottom:1.25rem;
}
.breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  list-style:none;
  margin:0;
  padding:0;
}
.breadcrumb li{ margin:0; display:flex; align-items:center; gap:.5rem; }
.breadcrumb li + li::before{ content:"/"; opacity:.5; }
.breadcrumb a{ text-decoration:underline; text-underline-offset:2px; }
.hero .breadcrumb{ color:var(--on-authority-muted); }
.hero .breadcrumb a:hover{ color:#fff; }

/* --------------------------------------------------------------------------
   17. PROSE (service page body copy, phase 2)
   -------------------------------------------------------------------------- */

.prose{ max-width:72ch; }
.prose h2{ margin-top:2.5rem; }
.prose h3{ margin-top:2rem; }
.prose h2:first-child,
.prose h3:first-child{ margin-top:0; }
.prose a{
  color:var(--authority);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
}
.prose a:hover{ color:var(--action-hover); }
.prose ul{ padding-left:1.15rem; }
.prose li{ margin-bottom:.55em; }

/* --------------------------------------------------------------------------
   17b. SERVICE + AREA PAGE COMPONENTS
   -------------------------------------------------------------------------- */

/* Interior hero. Shorter than the homepage 85vh. */
.hero-compact .hero-inner{
  min-height:0;
  padding-block:clamp(2.5rem,5vw,4rem);
}

/* Callout. Authority border, not action. Action stays on CTAs. */
.callout{
  background:var(--card);
  border:1px solid var(--border);
  border-left:4px solid var(--authority);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow);
  padding:1.5rem 1.75rem;
  margin:2rem 0;
}
.callout h3{ font-size:1.25rem; margin-bottom:.5rem; }
.callout p:last-child{ margin-bottom:0; }

/* Checklist */
.checklist{
  list-style:none;
  padding:0;
  margin:0 0 1.15em;
  display:grid;
  gap:.7rem;
}
.checklist li{
  position:relative;
  padding-left:1.9rem;
  margin:0;
}
.checklist li::before{
  content:"";
  position:absolute;
  left:0;
  top:.5em;
  width:14px;
  height:10px;
  background:var(--authority);
  clip-path:polygon(0 45%, 12% 32%, 38% 58%, 88% 0, 100% 13%, 38% 85%);
}
.checklist-2{ grid-template-columns:repeat(auto-fit, minmax(270px,1fr)); gap:.7rem 2rem; }

/* Captioned figure, used by the before and after set */
.fig{ margin:0; }
.fig .gallery-item{ margin-bottom:.65rem; }
.fig-caption{
  font-size:var(--small);
  color:var(--muted);
  line-height:1.5;
}

/* Two column split: prose beside a sticky sidebar */
.split{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.5rem);
  align-items:start;
}
.split-aside{ position:sticky; top:calc(var(--header-h) + 1.5rem); }

/* --------------------------------------------------------------------------
   17c. BLOG
   -------------------------------------------------------------------------- */

.post-meta{
  font-size:var(--small);
  color:var(--muted);
  margin:0 0 1.5rem;
}
.hero .post-meta{ color:var(--on-authority-muted); }

.post-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
  gap:var(--gap);
}

.post-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:box-shadow .2s ease;
}
.post-card:hover{ box-shadow:var(--shadow-lift); }

.post-card .card-media{ aspect-ratio:16/9; }
.post-card:hover .card-media img{ transform:scale(1.04); }

.post-card-body{
  padding:1.5rem;
  flex:1;
  display:flex;
  flex-direction:column;
}
.post-card-body h3{
  font-size:1.25rem;
  line-height:1.2;
  margin-bottom:.5rem;
}
.post-card-body p{
  color:var(--muted);
  font-size:.9688rem;
  margin-bottom:1.15rem;
}

/* Key-takeaway box at the top of a post */
.takeaway{
  background:var(--card);
  border:1px solid var(--border);
  border-left:4px solid var(--authority);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow);
  padding:1.35rem 1.6rem;
  margin:0 0 2rem;
}
.takeaway h2{
  font-size:1.05rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:0 0 .6rem;
}
.takeaway ul{ margin:0; padding-left:1.15rem; }
.takeaway li{ font-size:.9688rem; color:var(--muted); }

/* --------------------------------------------------------------------------
   18. STICKY MOBILE BAR
   -------------------------------------------------------------------------- */

.sticky-bar{
  display:none;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:950;
  background:var(--authority-deep);
  border-top:1px solid rgba(255,255,255,.14);
  padding:.6rem .75rem;
  padding-bottom:calc(.6rem + env(safe-area-inset-bottom));
  gap:.6rem;
  box-shadow:0 -6px 20px rgba(0,0,0,.22);
}
.sticky-bar .btn{ flex:1; padding:14px 12px; font-size:.9688rem; }

/* --------------------------------------------------------------------------
   19. MOTION
   -------------------------------------------------------------------------- */

/* The hidden state is scoped to .js, which an inline script in <head> sets.
   If scripting is off or the script breaks, content renders visible instead of
   leaving the page blank. */
.js .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .4s ease, transform .4s ease;
  will-change:opacity, transform;
}
.js .reveal.is-visible{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal{ opacity:1; transform:none; }
  .card:hover .card-media img,
  .gallery-item:hover img{ transform:none; }
}

/* --------------------------------------------------------------------------
   20. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width:1080px){
  .hero-inner{ grid-template-columns:1fr; align-items:start; min-height:0; }
  .hero-copy{ max-width:none; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:960px){
  :root{ --header-h:66px; }

  .nav-toggle{ display:flex; position:relative; }

  .header-actions{ display:none; }

  .nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--authority);
    border-top:1px solid rgba(255,255,255,.12);
    border-bottom:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 34px rgba(0,0,0,.28);
    max-height:calc(100vh - var(--header-h));
    overflow-y:auto;
    padding:.75rem var(--container-pad) 1.25rem;
  }
  .nav.is-open{ display:block; }

  .nav-list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .nav-list > li{ border-bottom:1px solid rgba(255,255,255,.08); }
  .nav-list > li:last-child{ border-bottom:0; }

  .nav-link{
    width:100%;
    justify-content:space-between;
    padding:.9rem .25rem;
    font-size:1.125rem;
    border-radius:0;
  }
  .nav-link:hover,
  .nav-link[aria-expanded="true"]{ background:none; }

  .dropdown{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    display:none;
    min-width:0;
    background:rgba(255,255,255,.05);
    border:0;
    box-shadow:none;
    border-radius:6px;
    margin:0 0 .75rem;
    padding:.25rem;
  }
  .has-dropdown:hover > .dropdown,
  .has-dropdown:focus-within > .dropdown{ display:none; }
  .dropdown.is-open{ display:block; }

  .nav-mobile-cta{ margin-top:1rem; display:grid; gap:.6rem; }
}

@media (max-width:768px){
  .sticky-bar{ display:flex; }
  body{ padding-bottom:76px; }

  .hero-inner{ padding-block:2.5rem 3rem; }
  .hero-sub{ font-size:1.0625rem; }

  /* Form drops below the CTAs on mobile */
  .hero-form{ margin-top:2rem; }

  .proof-list{ grid-template-columns:1fr 1fr; }
  .proof-list li{
    padding:1.15rem .85rem;
    font-size:.875rem;
    letter-spacing:.05em;
    border-left:0;
    border-top:2px solid var(--action);
  }
  .proof-list li:nth-child(-n+2){ border-top:0; }
  .proof-list li:nth-child(2n){ border-left:2px solid var(--action); }

  .split{ grid-template-columns:1fr; }
  .split-aside{ position:static; }

  .services-grid{ grid-template-columns:1fr; }
  .services-grid > .card,
  .services-grid > .card:nth-child(4),
  .services-grid > .card:nth-child(5){ grid-column:1 / -1; }

  .footer-grid{ grid-template-columns:1fr; gap:2rem; }
  .footer-bottom{ justify-content:flex-start; }

  .btn-group .btn{ flex:1 1 100%; }
}

@media (max-width:420px){
  .form-row{ grid-template-columns:1fr; }

  /* Proof band stays 2x2 here. Stacking to four rows runs it over 200px tall
     and pushes the services grid off the first screen. */
  .proof-list li{
    padding:1rem .6rem;
    font-size:.8125rem;
    letter-spacing:.03em;
  }
}

/* --------------------------------------------------------------------------
   21. PRINT
   -------------------------------------------------------------------------- */

@media print{
  .site-header,.sticky-bar,.hero-media,.hero-scrim,.form-card,.cta-final{ display:none !important; }
  body{ background:#fff; color:#000; padding-bottom:0; }
  .js .reveal{ opacity:1; transform:none; }
}