/* style.css */
/* ===== Master radius controller ===== */
:root{ --R:14px; }
body.radius-8  { --R:8px; }
body.radius-12 { --R:12px; }
body.radius-16 { --R:16px; }
body.radius-20 { --R:20px; }

:root{
  --green:#014421;
  --cream:#FFF8E1;
  --cream-2:#F3E6C8;
  --cream-3:#EFE7D0;
  --copper:#B87333;
  --copper-dark:#8d5a28;
  --ink:#0e0e0e; --ink-2:#222; --muted:#6b6b6b; --charcoal:#3a3a3a; --bg:#fcf9f0;
  --shadow:0 6px 20px rgba(0,0,0,.08);

  /* Logo sizes. Adjust directly. (mobile/desktop independent) */
  --header-h-m: 64px;
  --header-h-d: 98px;
  --logo-h-m: 60px;
  --logo-h-d: 104px;

  /* Buttons follow master radius */
  --btn-radius: calc(var(--R) * 4);
}

/* anchor offset for in-page #quote links */
#quote{scroll-margin-top:118px}
@media (min-width:980px){
  #quote{scroll-margin-top:128px}
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.5;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit}
.container{width:min(100%,1100px);margin:0 auto;padding-inline:16px}

/* Utilities */
.section{padding-block:20px}
.center{text-align:center}
.mt-2{margin-top:12px} .mt-3{margin-top:14px} .mt-4{margin-top:18px} .mt-5{margin-top:24px}
.mb-0{margin-bottom:0}
.badge{
  display:flex;align-items:center;gap:8px;padding:10px 14px;
  box-sizing:border-box; max-width:100%;
  border-radius:999px;background:var(--cream-2);color:#2a2a2a;font-size:.9rem;
  justify-content:center;
   white-space:normal; line-height:1.2;
  overflow:hidden; /* nothing spills outside the pill */
}

/* Type */
.h-eyebrow{letter-spacing:.08em;text-transform:uppercase;font-weight:800;font-size:.82rem;color:inherit}
h1,h2,h3{line-height:1.1;margin:0;color:inherit}
h1{font-size:2rem} h2{font-size:1.6rem} h3{font-size:1.15rem}

/* Buttons */
.btn{
  --btn-bg: var(--green);
  --btn-fg: var(--cream);
  --btn-border: none;

  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 18px;border-radius:var(--btn-radius);
  background:var(--btn-bg);color:var(--btn-fg);border:var(--btn-border);
  font-weight:900;text-transform:uppercase;letter-spacing:.02em;
  box-shadow:var(--shadow);transition:transform .08s ease,opacity .2s ease
}
.btn:active{transform:translateY(1px)}
.btn--block{width:100%}
.btn--green{--btn-bg:var(--green);--btn-fg:var(--cream)}
.btn--copper{--btn-bg:var(--copper);--btn-fg:var(--cream)}
.btn--dark{--btn-bg:#111;--btn-fg:var(--cream)}
.btn--cream{--btn-bg:var(--cream);--btn-fg:#111}
.btn--outline-dark{--btn-bg:transparent;--btn-fg:#111;--btn-border:2px solid #111}

/* Stacked label (mobile sticky) */
.btn--stacked{flex-direction:column;line-height:1.1}
.btn__title{font-weight:900}
.btn__sub{display:none;font-size:.78rem;opacity:.9;margin-top:1px}
.btn__sub{display:block}

/* Header */
.header{background:var(--cream-2);border-bottom:1px solid #ece6d7;position:sticky;top:0;z-index:20}
@media (min-width:980px){ .brand__logo{height:var(--logo-h-d)} }

/* In-row nav between brand (left) and numbers (right) */
.nav a{padding:0;font-weight:800;font-size:.92rem;white-space:nowrap}
@media (min-width:980px){
  .nav{gap:28px;align-self:flex-end}
  .nav a{font-size:1rem}
}

/* Mobile header layout: nav below numbers */
@media (max-width:679px){
  .brand{order:1}
  .topcall{order:2;align-self:flex-end}
  .nav{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:18px;padding:8px 0 4px;border-top:1px solid #ece6d7}
}

/* Dual numbers: always stacked, always right-aligned */
.topcall{
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:0 0 auto
}
.topcall .group{display:flex;flex-direction:column;align-items:flex-end}
.topcall .label{font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:#000;opacity:.8}
.topcall .num{display:inline-flex;align-items:center;gap:6px;font-weight:1000;color:var(--ink);line-height:1;text-align:right}
.topcall .num.copper{color:var(--copper)}
.topcall .num img{width:16px;height:16px}
@media (max-width:679px){ .topcall .label{display:none} }

/* Hero */
.hero{background:var(--cream);border-bottom:1px solid #ece6d7;color:#0e0e0e;padding-top:8px} /* tighten space above H1 */
.hero__wrap{display:grid;gap:20px;align-items:start}
.hero__copy h1{font-size:2rem;font-weight:1000; padding-top: 0;}
.hero__copy p{color:var(--ink-2)}
.hero__subnote{font-size:.92rem;color:var(--muted);text-align:center}
/* Eyebrow banner — one line, larger size, no JS */
.hero_banner{
  background:var(--green);
  color:var(--cream);
  padding:6px 8px;                 /* slimmer to gain width */
  width:100%;
  text-align:center;
  font-weight:700;
  line-height:1.25;
  white-space:nowrap;               /* force single line */
  font-size:clamp(12px, calc(2.9vw + 2px), 18px);
}
/* micro-compression on very small screens so size can stay up */
@media (max-width:300px){
  .hero_banner{ letter-spacing:-0.2px; word-spacing:-1px; }
}

/* Hide hero CTA above-the-fold on mobile */
@media (max-width:680px){ .hero__cta{display:none} }

/* Pills layout: two on row 1, one centered below */
.hero__badges{
  display:grid;grid-template-columns:repeat(2, minmax(0,1fr));
  justify-content:center;gap:10px 12px;margin-top:16px; 
}

/* Tablet+: back to 3 in one row */
@media (min-width:640px){
  .hero__badges{grid-template-columns:repeat(3, minmax(0,1fr))}
  .hero__badges > *:last-child{grid-column:auto;justify-self:stretch}
}
/* Mobile: 2 cols, center lone 3rd pill on its own row */
@media (max-width:639px){
  .hero__badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:stretch}
  .hero__badges > :nth-child(3){grid-column:1 / -1}
}

/* Trust */
.trust-grid{display:grid;gap:12px;margin-top:18px;overflow:hidden}
.trust-item{background:transparent;border:0;padding:0}
.trust-item--logos{display:flex;gap:12px;align-items:center;justify-content:center;}
.trust-logo{height:68px;width:auto;padding:10px;display:block;} /* Google Rating Logo, BBB Accreditation, etc. */
@media (max-width:680px){
  .trust-grid{grid-template-columns:1fr; justify-items:center;}
  .trust-item--test{grid-column:1 / -1;}
  }
  
/* Testimonials: normal case, copper cards */
.testimonials{display:grid;gap:8px;max-width:100%}
.testimonial{
  background: rgb(184 115 51 / 0.16);         /* light copper wash */
  border: 1px solid color-mix(in srgb, #B87333 55%, black 15%);
  color: #1d1a16;
  border-radius: var(--R);
  padding: 10px 12px;
  overflow-wrap: anywhere;
}

figure{margin:0}
.frame{display:block;width:100%;box-sizing:border-box}
.frame > img{display:block;width:100%;height:auto;border-radius:inherit}

/* To have the hero photo's border flush with the bottom of the last testimonial block */
@media (min-width:980px){
  .hero__media{margin-top:var(--hero-media-top);height:var(--hero-media-h)}
  .hero__media img, .hero__media video{width:100%;height:100%;object-fit:cover;display:block}
}

/* Generic framed image (used in hero) */
.frame{
  background:var(--cream-2);border:18px solid #F3E6C8;border-radius:var(--R);
}

/* MOBILE FIX: cap hero photo and allow next section to rise */
@media (max-width:680px){
  .hero, .section-hero, .hero-wrap { min-height:auto; padding-bottom:16px; }
  .hero .frame,
  .section-hero .frame,
  .hero-media,
  .hero .media,
  .hero .photo {
    height: clamp(220px, 42vh, 360px);
    overflow: hidden;
    border-radius: 16px;
  }

  .hero .frame img,
  .hero .frame video,
  .hero-media img,
  .hero-media video,
  .hero .media img,
  .hero .media video,
  .hero .photo img,
  .hero .photo video {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: 50% 15%;
    display: block;
  }
}

/* optional: ultra-small phones hide image */
@media (max-width:359px){
  .hero .frame, .hero-media, .hero .media, .hero .photo { display:none; }
}

/* Quote */
.quote{background:var(--copper);color:var(--cream)}
.form-shell{
  background:#181818;border-radius:calc(var(--R) * 1.2);padding:24px;box-shadow:var(--shadow);
  overflow:visible;
}
.form-shell iframe{
  height:1px; /* will be set exactly by JS */
  min-height:420px;
  width:100%!important;min-width:100%!important;max-width:100%!important;border:0;display:block;
}

.quote.section{padding-bottom:0}

/* Pull the Key Benefits title up without touching the treeline */
.quote + .benefits .section-band.band--benefits{
  margin-top:-28px;           /* adjust to taste: -24 to -40px */
}
/* Keep it a bit softer on small screens */
@media (max-width:680px){
  .quote + .benefits .section-band.band--benefits{ margin-top:-18px; }
}

.quote.section-band{
  border-radius:var(--R);padding:0px 16px;margin-bottom:0px
}
/* Section bands (title blocks) */
.section-band{
  background:var(--band-bg);color:var(--band-fg);
  border-radius:var(--R);padding:14px 16px;margin-bottom:18px
}
.section-band .h-eyebrow{letter-spacing:.1em;text-transform:uppercase;font-weight:1000;font-size:1rem}
.section-band h2{font-size:2rem;margin:0}
.band--quote{--band-bg:var(--copper);--band-fg:var(--cream); padding:0px 16px 10px;margin-bottom:0px}
.band--benefits{--band-bg:var(--ink);--band-fg:var(--cream);}
.band--work{--band-bg:var(--cream);--band-fg:#0e0e0e}
.band--faq{--band-bg:var(--green);--band-fg:var(--cream)}

.benefits{background: var(--ink);color:#181818;--seam-bg:#0f0f0f; padding-top:0;}
.work{background:var(--cream);color:#0e0e0e;--seam-bg:var(--cream)}
.faq{background:var(--green);color:var(--cream);--seam-bg:var(--green)}

/* Benefits */
.benefit-grid{display:grid;gap:14px;margin-top:18px}
.benefit{
  background:var(--cream);border:1px solid rgba(255,255,255,.08);border-radius:var(--R);padding:16px
}
.benefit__title{display:flex;align-items:center;gap:15px;margin:0 0 px}
.benefit__icon{width:28px;height:28px;object-fit:contain; margin-left: 10px}

/* Benefit list bullets: use local Tough Oak green check-in icon */
.benefit ul{
  margin: 8px 0 0;
  padding-left: 0;
  list-style: none;
}
.benefit li{
  margin: 6px 0;
  display: flex;
  align-items: flex-start;
  gap: 20px; /* matches title gap */
  padding-left: 10px; /* matches icon margin-left to align bullets with icon */
}
.benefit li::before{
  content: "";
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 4px; /* centers 16px bullet with text line-height */
  margin-left: 6px; /* centers 16px bullet under 28px icon (28-16)/2 = 6px */
  background: url('../img/tough-oak-check-in-green-circle.png') no-repeat 0 0 / 16px 16px;
}

/* Work */
.work-grid{display:grid;gap:14px}
.work-card{
  background:var(--cream-2);border:0;border-radius:var(--R);
  overflow:hidden;box-shadow:var(--shadow);padding:18px
}
.work-card .body{padding:12px 6px 4px}
.work-card h3{font-size:1rem}
.work-card p{color:#4b4b4b;font-size:.92rem}
.work-photo{display:block;width:100%;border-radius:var(--R)}

/* FAQ */
.faq .container{max-width:900px;}
details{background:#151515;border:1px solid rgba(255,255,255,.08);border-radius:var(--R);margin-top:12px;overflow:hidden}
summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:800;display:flex;align-items:center;justify-content:space-between}
summary::-webkit-details-marker{display:none}
details[open] summary{border-bottom:1px solid rgba(255,255,255,.08)}
details .answer{padding:14px 16px;color:var(--cream)}
.faq-foot{margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:8px}
.faq.section{padding-bottom:0}

/* Footer with seamless treeline at top */
.treeline{
  position:relative; z-index:2; height:140px;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  pointer-events:none;
  --gap:20px;
  margin-top:var(--gap);
  margin-bottom:-2px;                 /* overlap next section to kill hairline */
  background:var(--ink);              /* use Ink only */
  -webkit-mask:url('../img/treeline-seemless-background.png') repeat-x 0 100%/auto 140px;
          mask:url('../img/treeline-seemless-background.png') repeat-x 0 100%/auto 140px;
}
.treeline::after{                      /* hard fuse for rare subpixel gaps */
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--ink);
}
.footer{
  position:relative;background:var(--ink);color:var(--cream);
  text-align:center;padding:32px 16px;
}

/* Sticky CTA (full-width docked bar) */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; justify-content:center; align-items:center;
  background:var(--cream-2);
  border-top:1px solid rgba(0,0,0,.08);
  box-shadow:0 -8px 24px rgba(0,0,0,.18);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
}
.sticky-cta .btn{
  width:min(100%,720px);
  margin:0 auto;
  transform-origin:50% 50%;
  border-radius:999px;
}
.sticky-cta__note{font-size:.82rem;color:#111;opacity:.85;text-align:center;margin-top:6px}

/* Optional: hide sticky bar on desktop */
/* @media (min-width: 992px){ .sticky-cta{ display:none; } } */

/* Responsive */
@media (min-width:680px){
  h1{font-size:2.4rem}
  .hero__wrap{grid-template-columns:1.1fr .9fr}
  .benefit-grid{grid-template-columns:1fr 1fr}
  .work-grid{grid-template-columns:repeat(3,1fr)}
  .work-grid--two-col{grid-template-columns:repeat(2,minmax(320px,400px));max-width:900px;margin-left:auto;margin-right:auto;justify-content:center}
}
@media (min-width:980px){
  h1{font-size:3rem}
}

/* CLEAN HEADER: logo left, nav centered row 2, numbers top-right */
.header{ background:var(--cream-2); text-rendering:auto; }
.header__row{
  display:grid;
  grid-template-columns:auto 1fr auto;   /* logo | nav | numbers */
  grid-template-rows:auto auto;          /* row1: top, row2: bottom */
  column-gap:24px;
  row-gap:4px;
  padding:10px 16px;                     /* controls top/side padding */
  align-items:end;                       /* nav aligns with bottom local number */
  min-height:auto;
}
.brand{ grid-column:1; grid-row:1 / span 2; align-self:start; }
.brand__logo{ display:block; height:clamp(56px,8vw,96px); width:auto; }
.topcall{ grid-column:3; grid-row:1 / span 2; align-self:center; justify-self:end; }
.nav{
  grid-column:2; grid-row:2; align-self:end; justify-self:center;
  display:flex; gap:24px; flex-wrap:wrap; margin:0;
}

/* MOBILE: numbers on top-right, nav below; horizontal scroll if needed */
@media (max-width:679px){
  .header__row{
    grid-template-columns:1fr auto;      /* brand | numbers */
    grid-template-rows:auto auto;        /* row1: brand+numbers, row2: nav */
    padding:8px 12px;                     /* keeps space from edges */
  }
  .brand{ grid-column:1; grid-row:1; align-self:center; }
  .topcall{ grid-column:2; grid-row:1; align-self:center; }
  .nav{
    grid-column:1 / -1; grid-row:2;
    overflow-x:auto; white-space:nowrap; gap:18px; padding-top:6px;
  }
}

/* Ensure images don't add stray line-height */
img, .brand__logo{ display:block; }

/* Force single-row nav */
.nav{
  display:flex;
  gap:24px;
  flex-wrap:nowrap;       /* was wrap */
  white-space:nowrap;
  overflow-x:auto;        /* scroll if too tight */
  min-width:0;            /* prevent grid squeeze */
}
.nav a{
  flex:0 0 auto;
  white-space:nowrap;
}