/* Brothers section styles (NXT Lab 3.4 site layer).
 * In 2.6.4 these rules were appended to the engine stylesheet cms-sections.css. That file is an
 * immutable engine member in 3.4, so they live here, byte-for-byte, loaded right after it.
 * Kept at the document root so the relative url(assets/...) references resolve exactly as before. */

/* br-request-form - holiday / service request form (on-brand, uses site tokens) */
.request-form-section{padding:56px 0}
.request-form-card{background:#fff;border:1px solid var(--line,#e3e6e1);border-radius:16px;padding:32px 30px;box-shadow:var(--shadow-card,0 10px 30px rgba(0,0,0,.06))}
.request-form__title{font-family:var(--font-heading,inherit);color:var(--green-deep,#122818);margin:0 0 8px;font-size:28px;line-height:1.15}
.request-form__intro{color:var(--text-muted,#5b6358);margin:0 0 22px;max-width:58ch}
.request-form .rf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rf-field{display:flex;flex-direction:column;gap:6px;margin:0 0 16px}
.rf-label{font-weight:600;color:var(--text-dark,#1c231b);font-size:14px}
.rf-req{color:var(--orange,#ea6510);margin-left:3px}
.rf-opt{color:var(--text-muted,#8a9184);font-weight:400}
.request-form input,.request-form textarea{border:1px solid #cfd4cc;border-radius:10px;padding:11px 13px;font:inherit;font-size:15px;width:100%;background:#fff;color:#1c231b}
.request-form input:focus,.request-form textarea:focus{outline:2px solid var(--green,#5aa832);outline-offset:1px;border-color:var(--green,#5aa832)}
.rf-fieldset{border:0;padding:0;margin:0 0 16px;min-width:0}
.rf-choices{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px}
.rf-choices--wrap{gap:12px 18px}
.rf-choice{display:inline-flex;align-items:center;gap:8px;color:var(--text-dark,#1c231b);font-size:15px}
.rf-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px}
.rf-hint{color:var(--text-muted,#5b6358);font-size:14px}
.rf-status{color:#b3261e;font-weight:600;margin:12px 0 0}
.rf-success{color:var(--green-deep,#14532d);font-weight:600;font-size:17px;margin:8px 0 0}
@media (max-width:640px){.request-form .rf-grid{grid-template-columns:1fr}.request-form-card{padding:24px 18px}}

/* Festive decorations: Christmas-page hero image + garland swag, final-CTA wreath.
   Opt-in per section (hero_image / decor fields); inert on every other page. */
.page-hero{position:relative;overflow:hidden}
.page-hero--image{background-size:cover;background-position:center;background-repeat:no-repeat}
.page-hero .container{position:relative;z-index:2}
.page-hero__garland{position:absolute;top:-2px;left:50%;transform:translateX(-50%);width:min(1500px,99%);height:118px;background:url('assets/decor-garland.webp') center top/contain no-repeat;pointer-events:none;z-index:3;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.final-cta{position:relative}
.final-cta-inner{position:relative;z-index:2}
.final-cta__wreath{position:absolute;right:22px;bottom:-30px;width:148px;height:148px;background:url('assets/decor-wreath.webp') center/contain no-repeat;pointer-events:none;z-index:1;filter:drop-shadow(0 8px 16px rgba(0,0,0,.28))}
@media(max-width:860px){.page-hero__garland{height:66px}.final-cta__wreath{width:96px;height:96px;right:8px;bottom:-20px;opacity:.92}}

/* ---- Tree pages body kit (2026-09-24) --------------------------------------
 * Enhancements for /tree-services and the tree landing page, built only from the
 * site's existing tokens (--green, --orange, --green-dark, --shadow-card,
 * Oswald/Inter) and existing patterns (page-hero gradient, .trust-item,
 * .about-card check list, .btn). Every hook is opt-in: pages that do not set the
 * new fields render exactly as before. */

/* page hero: optional service/location line, quiet third link, trust row */
.page-hero .page-hero__subline{font-family:var(--font-heading);font-size:clamp(18px,1.7vw,22px);font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:#fff;margin:-2px 0 14px;max-width:none}
.page-hero__link{display:inline-flex;align-items:center;gap:9px;margin-top:18px;color:#fff;font-weight:700;font-size:15px;text-decoration:underline;text-decoration-color:rgba(255,255,255,.38);text-underline-offset:5px}
.page-hero__link:hover{text-decoration-color:#fff}
.page-hero__link svg{width:18px;height:18px;fill:var(--orange);flex:0 0 auto}
.page-hero__link span::after{content:" \2192"}
.page-hero__trust{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);max-width:820px}
.page-hero__trust .trust-item span{white-space:normal;font-size:14px}
.page-hero__trust .trust-item:not(:first-child){padding-left:26px}
@media(max-width:560px){
  .page-hero:has(.page-hero__trust){padding-top:108px;padding-bottom:44px}
  .page-hero:has(.page-hero__trust) p{font-size:16.5px;margin-bottom:22px}
  .page-hero__link{margin-top:16px}
  .page-hero__trust{display:grid;grid-template-columns:1fr;gap:9px;margin-top:22px;padding-top:18px}
  .page-hero__trust .trust-item:not(:first-child){padding-left:0;border-left:0}
}

/* service groups: three image-free cards, icon badge + title + check list */
.svc-groups{padding:84px 0;background:var(--bg-light)}
.svc-groups-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.svc-group{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-card);padding:30px 28px 28px;display:flex;flex-direction:column;gap:14px}
.svc-group__icon{width:58px;height:58px;border-radius:50%;background:rgba(110,183,53,.14);display:grid;place-items:center;color:var(--green-dark)}
.svc-group__icon svg{width:28px;height:28px}
.svc-group h3{font-family:var(--font-body);font-size:21px;line-height:1.22;font-weight:700;letter-spacing:-.01em;color:var(--green-dark)}
.svc-group__list{list-style:none;display:flex;flex-direction:column;gap:11px;margin:2px 0 0;padding:0}
.svc-group__list li{position:relative;padding-left:30px;font-size:15px;line-height:1.5;color:var(--text-muted)}
.svc-group__list li::before{content:"";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;background:rgba(110,183,53,.16)}
.svc-group__list li::after{content:"";position:absolute;left:7px;top:6px;width:5px;height:9px;border:solid #3d7a1c;border-width:0 2px 2px 0;transform:rotate(45deg)}
.svc-groups__note{text-align:center;color:var(--text-muted);font-size:16px;max-width:680px;margin:30px auto 0}
@media(max-width:860px){.svc-groups{padding:64px 0}.svc-groups-grid{grid-template-columns:1fr;gap:16px}.svc-group{padding:24px 22px}}

/* help band: dark "not sure what you need?" row with the site's hero gradient */
.help-band{background:linear-gradient(135deg,var(--green-deep) 0%,var(--green-dark) 70%);color:#fff;padding:58px 0}
.help-band-inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:34px;align-items:center}
.help-band h2{font-family:var(--font-body);font-size:clamp(26px,2.6vw,34px);line-height:1.15;font-weight:700;letter-spacing:-.02em;color:#fff}
.help-band p{color:rgba(255,255,255,.88);font-size:16.5px;line-height:1.6;margin-top:10px;max-width:580px}
.help-band-actions{display:flex;flex-wrap:wrap;gap:12px 14px;justify-content:flex-end;align-items:center}
.help-band .btn-outline{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}
.help-band .btn-outline:hover{border-color:#fff;color:#fff}
.help-band__link{flex-basis:100%;justify-content:flex-end;margin-top:4px}
@media(max-width:860px){.help-band-inner{grid-template-columns:1fr;gap:22px}.help-band-actions{justify-content:flex-start}.help-band__link{justify-content:flex-start}}
@media(max-width:560px){.help-band{padding:46px 0}.help-band-actions .btn{flex:1 1 100%;justify-content:center}}

/* booking widget "band" preset: explainer on the left, the scheduler card on the right */
.cms-section--booking-widget.cms-section--preset-band{background:linear-gradient(135deg,var(--green-deep) 0%,var(--green-dark) 70%);color:#fff;padding:76px 0}
.cms-section--booking-widget.cms-section--preset-band .cms-section__inner{max-width:1240px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2fr);gap:44px;align-items:start}
.cms-section--booking-widget.cms-section--preset-band .cms-section__head h2{font-family:var(--font-body);color:#fff;font-size:clamp(27px,2.7vw,36px);line-height:1.14;font-weight:700;letter-spacing:-.02em;margin:0 0 14px}
.cms-section--booking-widget.cms-section--preset-band .cms-section__sub{color:rgba(255,255,255,.86);font-size:16.5px;line-height:1.6}
.cms-section--booking-widget.cms-section--preset-band .cms-bkg{color:var(--text-dark)}
.cms-section--booking-widget.cms-section--preset-band .cms-bkg__layout{max-width:none}
@media(max-width:1000px){.cms-section--booking-widget.cms-section--preset-band .cms-section__inner{grid-template-columns:1fr;gap:22px}}
@media(max-width:560px){.cms-section--booking-widget.cms-section--preset-band{padding:52px 0}}

/* In-page anchors (#book, #arborist) land below the fixed header, not under it. */
#book,#arborist{scroll-margin-top:84px}
@media(max-width:860px){#book,#arborist{scroll-margin-top:76px}}

/* ---- Tree pages aesthetic pass (2026-09-24, from the ChatGPT mockups) ------------
 * Opt-in visual variants; every rule is scoped to a class that only appears when a
 * section sets the new field, so the rest of the site renders unchanged. Tokens only. */

/* hero with a side photo: right-hand panel fading into the hero green (desktop) */
.page-hero--split .page-hero__media{position:absolute;top:0;right:0;bottom:0;width:50%;z-index:1;pointer-events:none}
.page-hero--split .page-hero__media img{width:100%;height:100%;object-fit:cover;object-position:60% 45%;display:block}
.page-hero--split .page-hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,34,20,1) 0%,rgba(15,34,20,.72) 18%,rgba(15,34,20,.18) 48%,rgba(15,34,20,0) 70%)}
@media(min-width:1001px){
  .page-hero--split .container > :not(.breadcrumbs){max-width:min(640px,46vw)}
  .page-hero--split .page-hero__trust{max-width:min(640px,46vw)}
}
@media(max-width:1000px){
  .page-hero--split .page-hero__media{width:100%}
  .page-hero--split .page-hero__media img{object-position:65% 40%}
  .page-hero--split .page-hero__media::after{background:linear-gradient(180deg,rgba(9,20,12,.9) 0%,rgba(9,20,12,.82) 55%,rgba(9,20,12,.9) 100%)}
}

/* band-style trust row under the hero (mockup: icon badge + bold line + small line) */
.trust-band{background:var(--green-deep);border-top:1px solid rgba(255,255,255,.08);color:#fff}
.trust-band-inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.trust-band__item{display:flex;align-items:center;gap:14px;padding:20px 26px}
.trust-band__item + .trust-band__item{border-left:1px solid rgba(255,255,255,.12)}
.trust-band__icon{width:46px;height:46px;border-radius:50%;background:rgba(110,183,53,.16);display:grid;place-items:center;flex:0 0 auto}
.trust-band__icon svg{width:22px;height:22px;fill:var(--green)}
.trust-band__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.trust-band__text strong{font-family:var(--font-body);font-size:15.5px;font-weight:700;color:#fff;line-height:1.3}
.trust-band__text small{font-size:13.5px;color:rgba(255,255,255,.72);line-height:1.4}
@media(max-width:860px){.trust-band-inner{grid-template-columns:1fr}.trust-band__item{padding:14px 4px}.trust-band__item + .trust-band__item{border-left:0;border-top:1px solid rgba(255,255,255,.1)}}

/* light arborist card with icon rows */
.about-card.about-card--light{background:var(--bg-soft);border:1px solid var(--line);box-shadow:var(--shadow-card);gap:0;padding:14px 30px}
.about-card--light .about-card__row{display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:center;padding:20px 0}
.about-card--light .about-card__row + .about-card__row{border-top:1px solid var(--line)}
.about-card--light .about-card__icon{width:56px;height:56px;border-radius:50%;background:#fff;box-shadow:0 6px 16px rgba(18,40,24,.1);display:grid;place-items:center;color:var(--green-dark)}
.about-card--light .about-card__icon svg{width:26px;height:26px}
.about-card--light strong{display:block;font-family:var(--font-body);font-size:17.5px;font-weight:700;color:var(--green-dark);line-height:1.3;margin-bottom:3px}
.about-card--light p{font-size:14.5px;line-height:1.55;color:var(--text-muted);margin:0}

/* service groups: split header + photo cards with the home-card badge */
.svc-groups__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 48px;align-items:end;margin-bottom:34px;text-align:left}
.svc-groups__head h2{margin:0}
.svc-groups__intro{color:var(--text-muted);font-size:16px;line-height:1.65;max-width:520px;justify-self:end;margin:0}
.svc-group--media{padding:0;gap:0;overflow:hidden}
.svc-group__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--green-dark)}
.svc-group__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.svc-group--media:hover .svc-group__media img{transform:scale(1.035)}
.svc-group__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,6,0) 56%,rgba(4,10,6,.24))}
.svc-group--media .svc-group__icon{position:relative;z-index:2;margin:-30px 0 0 24px;width:60px;height:60px;background:var(--green);color:#fff;border:3px solid #fff;box-shadow:0 6px 16px rgba(18,40,24,.3)}
.svc-group--media .svc-group__body{padding:14px 28px 28px}
.svc-group--media h3{margin-bottom:12px}
.svc-group:not(.svc-group--media) .svc-group__body h3{margin-bottom:12px}
@media(prefers-reduced-motion:reduce){.svc-group__media img{transition:none}.svc-group--media:hover .svc-group__media img{transform:none}}
@media(max-width:860px){.svc-groups__head{grid-template-columns:1fr;gap:12px}.svc-groups__intro{justify-self:start}}

/* final CTA on a photo: dark green overlay, white copy */
.final-cta--image .final-cta-inner{position:relative;overflow:hidden;border:0;background:var(--green-dark) var(--fc-bg) center/cover no-repeat;box-shadow:var(--shadow-soft)}
.final-cta--image .final-cta-inner::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,20,12,.94) 0%,rgba(9,20,12,.82) 45%,rgba(9,20,12,.55) 100%);z-index:0}
.final-cta--image .final-cta-inner > *{position:relative;z-index:1}
.final-cta--image .final-cta-copy h2{color:#fff}
.final-cta--image .final-cta-copy p,.final-cta--image .cta-tagline{color:rgba(255,255,255,.85)}
.final-cta--image .btn-outline{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.06)}
.final-cta--image .btn-outline:hover{border-color:#fff;color:#fff}
@media(max-width:860px){.final-cta--image .final-cta-inner::before{background:rgba(9,20,12,.86)}}
.page-hero--split .page-hero__media::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;z-index:1;background:linear-gradient(180deg,rgba(9,20,12,.62) 0%,rgba(9,20,12,0) 100%)}
/* Website notice from Team tools (closed days / weather delays), 2026-09-25. Rendered only while a notice
   is in effect. The fixed header sits below the bar until the bar scrolls away (--br-notice-offset is set
   by the bar's own inline script before first paint; 0 when there is no bar). */
.site-header{top:var(--br-notice-offset,0px)}
.br-site-notice{position:relative;z-index:41;background:var(--green-dark);color:#fff;border-bottom:3px solid var(--orange);padding:11px 24px;text-align:center;font-size:15px;line-height:1.45;font-weight:500}
.br-site-notice__text{max-width:1100px;margin:0 auto;overflow-wrap:anywhere}
.br-site-notice__text+.br-site-notice__text{margin-top:4px}
@media(max-width:600px){.br-site-notice{padding:10px 16px;font-size:14px}}
/* Portrait gallery (br-gallery-grid layout=portrait): tall phone photos in a centered row of up to four. */
.gallery-page--portrait .section-header.center{margin-bottom:30px}
.gal-grid--portrait{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.gal-grid--portrait .gal-tile{flex:0 1 calc((100% - 48px)/4);aspect-ratio:2/3}
.gal-more{margin:26px 0 0;text-align:center;font-weight:600}
.gal-more a{color:var(--green-dark);text-decoration:underline;text-underline-offset:3px}
@media(max-width:860px){.gal-grid--portrait{gap:12px}.gal-grid--portrait .gal-tile{flex-basis:calc((100% - 12px)/2)}}
/* Header nav polish (2026-10-22): every item stays on one line, so the row reads as one even strip instead of a mix of
   one- and two-line labels, with a steady 22px rhythm. Measured fit (logo 139px, quote button, phone 140px): the full
   row plus the phone needs 1407px of header, so the phone steps out of the header between 1366px and 1540px (it stays
   in the hero Call button and the mobile bar) and below 1366px the menu button takes over (it used to wait until 860px
   and squeeze the labels onto two lines). The logo never shrinks. */
.main-nav a{white-space:nowrap}
.site-header .logo-img{max-width:none}
@media(min-width:1366px){.main-nav{gap:22px}}
@media(min-width:1366px) and (max-width:1540px){.header-phone{display:none}}
@media(min-width:861px) and (max-width:1365px){.header-phone{display:inline-flex}}
@media(max-width:1365px){
  .header-inner{grid-template-columns:1fr auto}
  .main-nav{display:none}
  .nav-toggle{display:inline-grid;place-items:center;width:44px;height:44px;margin-left:14px;padding:0;border:1px solid rgba(255,255,255,.34);border-radius:10px;background:rgba(7,18,8,.28);color:#fff;cursor:pointer;flex:0 0 auto}
  .nav-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
  .nav-toggle__close{display:none}
  .nav-open .nav-toggle__open{display:none}
  .nav-open .nav-toggle__close{display:block}
  .nav-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
  .site-header.nav-open{background:var(--green-deep);box-shadow:0 6px 24px rgba(7,18,8,.22);transition:none}
  .site-header.nav-open .main-nav{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow-y:auto;padding:6px 18px 18px;background:var(--green-deep);box-shadow:0 16px 30px rgba(7,18,8,.35);border-top:1px solid rgba(255,255,255,.08)}
  .site-header.nav-open .main-nav a{display:flex;align-items:center;min-height:50px;font-size:15px;letter-spacing:.6px;border-bottom:1px solid rgba(255,255,255,.08)}
  .site-header.nav-open .main-nav a:last-child{border-bottom:0}
}
@media(min-width:861px) and (max-width:1365px){.site-header.nav-open .main-nav{left:auto;width:min(380px,100%);border-radius:0 0 0 14px}}
/* Hero with a featured video (br-page-hero side_video, 2026-10-22): copy and quote buttons on the left, a framed
   portrait video on the right (desktop); on phones the video follows the buttons. Only heroes that set a video. */
.page-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(32px,4vw,64px);align-items:center}
.page-hero__heading{grid-column:1;grid-row:1;align-self:end;min-width:0}
.page-hero__copy{grid-column:1;grid-row:2;align-self:start;min-width:0}
.page-hero__video{grid-column:2;grid-row:1 / span 2;width:clamp(250px,21vw,310px)}
.page-hero__video video{display:block;width:100%;height:auto;object-fit:contain;border-radius:18px;background:var(--green-deep);border:1px solid rgba(255,255,255,.16);box-shadow:0 22px 50px rgba(0,0,0,.45),0 0 0 6px rgba(110,183,53,.10)}
.page-hero--video .page-hero__copy > p:not(.page-hero__subline){max-width:640px}
@media(max-width:1000px){
  .page-hero__grid{grid-template-columns:1fr;gap:24px}
  .page-hero__heading{grid-column:1;grid-row:1}
  .page-hero__heading h1{margin-bottom:0}
  .page-hero__video{grid-column:1;grid-row:2;width:min(340px,100%);justify-self:center}
  .page-hero__copy{grid-column:1;grid-row:3}
}
/* Footer logo: the stacked oak lockup (header.logo_image_footer) reads at a larger size than the header bar allows. */
.footer .logo-img--footer{height:118px;width:auto}
@media(max-width:560px){.footer .logo-img--footer{height:100px}}
/* Orange Brothers logo badge (2026-10-22, owner): rounded corners in the header and the footer. */
.site-header .logo-img,.footer .logo-img{border-radius:9px}