/* Tree Hunks, added November 2026: the content pages and the homepage's new bands.
   Built on the site's own tokens in styles.css (ink, paper, lime, Barlow Condensed, DM Sans). Phone first. */
.home-hero h1,.page-hero h1{text-transform:uppercase;font-size:clamp(50px,13vw,64px);line-height:.92}
.page-hero .hero-inner{padding-bottom:40px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#c8d2c9;margin-bottom:18px}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.desktop-nav a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:3px}
#mobile-nav a[aria-current=page]{color:var(--lime)}

/* overview: the document's opening paragraph, first band below the hero */
.overview{background:var(--paper)}
.overview p{font-size:18px;line-height:1.65;max-width:68ch}
.overview a,.split-copy a,.faq-answer a,.contact-copy p a,.why-intro a{text-decoration-color:#6b8612;text-decoration-thickness:2px;font-weight:500}
.overview a:hover,.split-copy a:hover,.faq-answer a:hover{color:#3f5a0c}

/* explainer: a heading and its copy beside one of the crew's photographs */
.split{display:grid;gap:30px}
.split:nth-of-type(even){background:var(--paper)}
.split h2,.steps-band h2,.faq h2,.services h2,.why-copy h2,.crane-copy h2,.contact h2,.insurance h2{text-transform:uppercase}
.split h2{font-size:clamp(36px,9vw,48px);margin-bottom:6px}
.split-photo{position:relative;overflow:hidden;background:var(--ink)}
.split-photo img{width:100%;height:300px;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.split:hover .split-photo img{transform:scale(1.03)}
.split-copy p{margin-top:16px;font-size:16px;color:var(--muted)}
.split-copy p strong{color:var(--ink)}
.tick-list{list-style:none;padding:0;margin:20px 0 4px}
.tick-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.55;padding:11px 0;border-top:1px solid var(--line)}
.tick-list li:last-child{border-bottom:1px solid var(--line)}
.tick-list svg{width:20px;height:20px;color:#6b8612;margin-top:1px}

/* process: numbered steps on the ink ground */
.steps-band{background:var(--ink);color:#fff}
.steps-band h2{font-size:clamp(40px,10vw,56px);margin-bottom:10px}
.steps-intro{color:#c8d2c9;margin-top:14px}
.step-list{list-style:none;padding:0;margin:30px 0 0;counter-reset:step;display:grid;gap:0}
.step-list li{counter-increment:step;position:relative;padding:22px 0 22px 64px;border-top:1px solid #344334;font-size:15px;line-height:1.6;color:#d5ddd2}
.step-list li:before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:16px;font:700 40px/1 var(--display);color:var(--lime)}
.step-list strong{display:block;color:#fff;font-size:17px;margin-bottom:3px}
.crane-copy .step-list{margin:6px 0 32px}

/* faq: closed by default; the answers stay in the page */
.faq h2{font-size:clamp(38px,9vw,56px);margin-bottom:26px;max-width:18ch}
.faq-list{border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font:700 17px/1.4 var(--body);letter-spacing:0}
.faq summary:hover h3{text-decoration:underline;text-underline-offset:4px}
.faq-icon{position:relative;width:34px;height:34px;flex-shrink:0;border:1px solid #a1ae9c;transition:background .2s}
.faq-icon:before,.faq-icon:after{content:'';position:absolute;left:50%;top:50%;width:13px;height:2px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .25s}
.faq-icon:after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] .faq-icon{background:var(--lime);border-color:var(--lime)}
.faq details[open] .faq-icon:after{transform:translate(-50%,-50%) rotate(0)}
.faq-answer{padding:0 54px 22px 0}
.faq-answer p{color:var(--muted);font-size:15px}
.faq details[open] .faq-answer{animation:faq-in .3s ease}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* homepage: card titles set in capitals like the rest of the site; the why photo sized to its one sentence */
.service-photo h3,.secondary-services h3{text-transform:uppercase}
@media(min-width:721px){.home-hero~.why .why-photo>img,.why .why-photo>img{min-height:0;height:100%;max-height:520px;aspect-ratio:4/5}}
/* homepage: two secondary services instead of three */
.secondary-services.two{grid-template-columns:repeat(2,1fr)}
.services .section-heading h2{max-width:14ch}
.insurance>div p{font-size:15px;font-weight:700}

@media(prefers-reduced-motion:reduce){.split-photo img,.faq-icon,.faq-icon:before,.faq-icon:after{transition:none}.faq details[open] .faq-answer{animation:none}}

@media(min-width:721px){
  .home-hero h1,.page-hero h1{font-size:clamp(60px,6vw,86px)}
  .split{grid-template-columns:5fr 6fr;gap:7vw;align-items:center}
  .split-flip .split-photo{order:2}
  .split-photo img{height:auto;aspect-ratio:4/5;max-height:560px}
  .split h2{font-size:clamp(38px,3.6vw,54px)}
  .overview p{font-size:21px}
  .step-list{grid-template-columns:repeat(3,1fr);gap:0 34px}
  .step-list li{padding:76px 0 0;border-top:3px solid var(--lime)}
  .step-list li:before{top:20px}
  .crane-copy .step-list{grid-template-columns:1fr}
  .crane-copy .step-list li{padding:22px 0 22px 70px;border-top:1px solid #344334}
  .crane-copy .step-list li:before{top:18px}
  .faq{display:grid;grid-template-columns:4fr 7fr;gap:7vw;align-items:start}
}
@media(min-width:1700px){.home-hero h1,.page-hero h1{font-size:92px}}
@media(max-width:1250px){.desktop-nav{gap:14px}.desktop-nav a{font-size:11.5px}}