/* Benny's Tree Service: shared styles for index.html and contact.html. */

:root{
 --ink:#19251f;--green:#285b3b;--green-dark:#193d24;--leaf:#c0d5ad;--sage:#57714f;
 --paper:#fafbf9;--muted:#5b655f;--line:#dce2db;--light:#f0f4ee;--line-soft:#d1dccb;
 --night:#111713;--footer:#17221b;--radius:6px;
 --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
}

/* Base */
*{box-sizing:border-box}
html{min-height:100%;background:var(--footer);scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
main{flex:1}
a{color:inherit;text-underline-offset:5px}
a,button,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,summary:focus-visible{outline:3px solid #78994e;outline-offset:4px}
img{display:block;max-width:100%;height:auto}
.wrap{width:min(1120px,calc(100% - 64px));margin-inline:auto}
.skip{position:absolute;left:16px;top:-100px;z-index:30;padding:12px;background:#fff}
.skip:focus{top:10px}

h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-weight:600;text-wrap:balance}
h1{font-size:clamp(42px,5.5vw,68px);line-height:1.06;letter-spacing:-2.4px;margin-bottom:26px}
h2{font-size:clamp(29px,3.3vw,40px);line-height:1.18;letter-spacing:-1.2px;margin-bottom:18px}
h3{font-size:22px;line-height:1.3;letter-spacing:-.4px;margin-bottom:12px}
p{margin-bottom:22px;text-wrap:pretty}
p:not(.eyebrow){color:var(--muted)}
.intro{font-size:20px;line-height:1.5;color:var(--ink)!important}
.eyebrow{margin:0 0 18px;color:var(--green);font-size:10px;font-weight:650;letter-spacing:1.8px}

/* Buttons and links */
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-block:28px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:50px;padding:13px 22px;background:var(--green);color:#fff;border:1px solid var(--green);border-radius:var(--radius);font-size:14px;font-weight:600;text-decoration:none;transition:background-color .15s,border-color .15s}
.button:hover{background:var(--green-dark)}
.button.outline{background:transparent;color:var(--green)}
.button.outline:hover{background:#dce5d7}
.text-link{font-size:14px;font-weight:600;text-decoration-thickness:1px;text-underline-offset:6px}
.text-link:hover{text-decoration-thickness:2px}
.phone{display:inline-block;font-size:32px;font-weight:600;letter-spacing:-.8px;line-height:1.3;text-decoration:none}

/* Header (stays visible on larger screens so the phone number is always one click away) */
.header{position:sticky;top:0;z-index:20;background:var(--night);color:#fff;border-bottom:1px solid #29312b}
.header-inner{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:grid;line-height:1.1;text-decoration:none}
.brand-name{font-size:28px;font-weight:800;letter-spacing:.8px}
.brand-sub{margin-top:7px;font-size:10px;font-weight:500;letter-spacing:3.5px}
nav{display:flex;gap:28px}
nav a{display:inline-flex;align-items:center;min-height:44px;padding:12px 0;font-size:14px;font-weight:500;text-decoration:none}
nav a:hover,nav a[aria-current]{color:#b9d3ac}
.header-call{padding:10px 16px;border:1px solid #51634f;border-radius:var(--radius);font-size:14px;font-weight:600;text-decoration:none;transition:background-color .15s,border-color .15s}
.header-call:hover{background:#1f2b22;border-color:#7d9373}

/* Hero */
.hero-shell{background:#000;color:#f8f7f2}
.hero{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:60px;padding-block:64px}
.hero h1{font-size:clamp(42px,5vw,62px);line-height:1.08;letter-spacing:-2.2px}
.hero-accent{color:var(--leaf)}
.hero p{color:#bfc6bb}
.hero .eyebrow{color:#adc49e}
.hero .intro{font-size:19px;line-height:1.6;color:#f8f7f2!important}
.hero-copy>p:not(.eyebrow){max-width:510px}
.hero .hero-detail{max-width:440px;font-size:15px}
.hero .button{background:#345f3e;border-color:#345f3e}
.hero .button:hover{background:#3a6f43}
.hero-logo img{width:100%}

/* Trust strip */
.trust-strip{background:var(--light);border-bottom:1px solid var(--line)}
.trust-strip>.wrap{display:flex;justify-content:center;gap:16px 48px;padding-block:18px;font-size:13px;font-weight:500;color:#3a5140}
.trust-strip span{display:inline-flex;align-items:center;gap:9px}
.trust-strip span:before{content:'';width:14px;height:8px;margin-top:-4px;border:solid var(--sage);border-width:0 0 2px 2px;transform:rotate(-45deg)}

/* Sections */
.section{padding-block:72px}
.section-top{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:34px}
.section-top h2{margin-bottom:0}
.section-top>p{margin-bottom:2px;font-size:14px}

/* Services */
.services{border-bottom:1px solid var(--line)}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.service-grid article{display:flex;flex-direction:column;height:100%;padding-top:24px;border-top:1px solid #b8c5b3}
.service-number{display:block;margin-bottom:24px;font-family:var(--mono);font-size:16px;line-height:1;color:var(--sage)}
.service-grid h3{font-size:21px}
.service-grid p{flex:1;margin-bottom:0;font-size:15px;line-height:1.8}
.service-grid .text-link{display:inline-flex;align-items:center;min-height:44px;margin-top:18px;font-size:13px}

/* Work photos */
.work{display:grid;grid-template-columns:1fr 2fr;gap:28px;align-items:end}
.work-intro p:not(.eyebrow){font-size:15px;line-height:1.8}
.work-intro .text-link{display:inline-flex;align-items:center;min-height:44px}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#e3e5dc;border-radius:5px}
.gallery figcaption{display:flex;align-items:baseline;gap:10px;padding-top:12px;font-size:13px;font-weight:500;color:var(--ink)}
.gallery figcaption span{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--sage)}

/* About */
.about{background:var(--light);border-block:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:72px}
.about-story h2{margin-bottom:26px}
.about-story .intro{margin-bottom:20px}
.about-story p{font-size:15px;line-height:1.8}
.about-story p:last-of-type{margin-bottom:24px}
.why-benny{padding-left:38px;border-left:1px solid var(--line-soft)}
.why-benny h2{margin-bottom:10px;font-size:32px}
.reasons>div{padding-block:20px;border-bottom:1px solid var(--line-soft)}
.reasons>div:last-child{padding-bottom:0;border-bottom:0}
.reasons h3{margin-bottom:8px;font-size:17px;letter-spacing:-.2px}
.reasons p{margin:0;font-size:14px;line-height:1.8}
.about-next{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:42px;padding-top:28px;border-top:1px solid var(--line-soft)}
.about-next p{margin:0;font-size:19px;font-weight:500;color:var(--ink)}

/* Questions */
.questions{display:grid;grid-template-columns:1fr 1.15fr;gap:70px}
.questions>div>p:last-child{font-size:14px}
.question-list{border-top:1px solid var(--line)}
.question-list details{border-bottom:1px solid var(--line)}
.question-list summary{position:relative;display:block;min-height:56px;padding:21px 36px 21px 0;font-size:16px;font-weight:600;cursor:pointer;list-style:none}
.question-list summary::-webkit-details-marker{display:none}
.question-list summary:before,.question-list summary:after{content:'';position:absolute;right:6px;top:50%;width:14px;height:2px;background:var(--sage);transition:transform .2s}
.question-list summary:after{transform:rotate(90deg)}
.question-list details[open] summary:after{transform:rotate(0)}
.question-list details p{max-width:520px;padding-right:20px;font-size:15px}

/* Estimate call to action */
.estimate{background:var(--light);border-top:1px solid var(--line)}
.estimate-inner{display:flex;justify-content:space-between;align-items:center;gap:40px}
.estimate h2{font-size:34px}
.estimate p:last-child{margin-bottom:0}
.estimate-contact .actions{margin:18px 0}
.estimate-contact>.text-link{font-size:12px}

/* Footer */
footer{flex-shrink:0;padding:40px 0 20px;background:var(--footer);color:#fff}
.footer-main{display:flex;justify-content:space-between;gap:30px}
.footer-brand{font-size:19px;font-weight:600;text-decoration:none}
footer p{margin:10px 0 30px;font-size:13px;color:#b6c0b6!important}
.footer-links{display:flex;align-items:start;gap:26px;font-size:13px}
.copyright{padding-top:18px;border-top:1px solid #3a453d;font-size:11px;color:#b6c0b6}

/* Contact page */
.contact-hero{padding-block:70px 40px}
.contact-hero h1 span{color:#4f7150}
.contact-hero>.intro{max-width:620px}
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;margin-top:46px}
.contact-panel{position:relative;overflow:hidden;padding:36px;background:#111a14;color:#fff;border:1px solid #273f2b;border-radius:8px}
.contact-panel .eyebrow{padding-right:110px;color:#b8d69f}
.contact-panel .phone{margin-top:12px;font-size:clamp(24px,3vw,36px)}
.contact-panel p:not(.eyebrow){color:#c0cbbc}
.contact-panel>p:not(.eyebrow){margin-top:15px;font-size:14px}
.contact-panel .button{background:var(--leaf);color:#152319;border-color:var(--leaf)}
.contact-panel .button:hover{background:#cbe4b5}
.contact-panel .button.outline{background:transparent;color:#edf2e8;border-color:#7d9373}
.contact-panel .button.outline:hover{background:#29412b}
.contact-mark{position:absolute;right:22px;top:18px;width:84px;height:84px;object-fit:contain;mix-blend-mode:lighten}
.contact-area{margin-top:34px;padding-top:25px;border-top:1px solid #3d4b39}
.contact-area h2{font-size:25px;letter-spacing:-.5px}
.contact-area p{margin-bottom:0;font-size:14px}
.contact-help{padding-top:25px}
.contact-help h2{font-size:29px;line-height:1.25;letter-spacing:-.5px}
.contact-help ol{margin-top:28px;padding:0;list-style:none;counter-reset:steps}
.contact-help li{position:relative;margin-bottom:24px;padding-left:46px;counter-increment:steps}
.contact-help li:before{content:'0' counter(steps);position:absolute;left:0;top:4px;font-family:var(--mono);font-size:15px;color:#6a8553}
.contact-help li strong{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.contact-help li span{display:block;font-size:14px;color:var(--muted)}
.small-note{font-size:13px}
.contact-bottom{display:flex;justify-content:space-between;gap:24px;margin-bottom:30px;padding-block:26px;border-top:1px solid var(--line)}
.contact-bottom p{margin:0;font-size:13px}

/* Phone-only quick contact bar */
.mobile-contact{display:none}

@media(min-width:701px){html{scroll-padding-top:110px}}

@media(max-width:950px){
 .header-inner{gap:20px}nav{gap:17px}
 .hero{gap:30px}
 .actions{gap:12px}
 .hero .text-link{font-size:13px}
 .about-grid{gap:38px}.why-benny{padding-left:28px}
 .contact-grid{gap:40px}
 .estimate-inner{gap:25px}.estimate h2{font-size:30px}
 .phone{font-size:28px}
 .work{grid-template-columns:1fr}
 .work-intro{max-width:560px}
}

@media(max-width:700px){
 html{scroll-padding-bottom:90px}
 body{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
 .wrap{width:calc(100% - 40px)}
 .phone,.text-link{display:inline-flex;align-items:center;min-height:44px}

 .header{position:static}
 .header-inner{flex-wrap:wrap;min-height:0;gap:9px;padding-block:12px}
 .brand-name{font-size:24px}
 .brand-sub{font-size:9px;letter-spacing:2.8px}
 .header-call{display:flex;align-items:center;min-height:44px;margin-left:auto;padding:8px 10px;font-size:12px}
 nav{order:3;width:100%;justify-content:space-between;gap:12px;padding-top:3px;border-top:1px solid #303c31}
 nav a{padding-block:10px}

 .hero{position:relative;display:block;padding-block:28px 34px}
 .hero .eyebrow{display:flex;align-items:center;max-width:180px;min-height:32px;margin-bottom:20px;font-size:9px;letter-spacing:1.5px}
 .hero h1{max-width:100%;margin-bottom:20px;font-size:clamp(34px,9vw,46px);letter-spacing:-1.7px}
 .hero-copy>p{margin-bottom:18px}
 .hero .intro{margin-bottom:14px;font-size:17px;line-height:1.65}
 .hero .hero-detail{font-size:14px;line-height:1.6}
 .hero .actions{margin:23px 0 0;gap:16px}
 .hero .button{padding-inline:18px}
 .hero .text-link{display:flex;font-size:14px}
 .hero-logo{position:absolute;top:12px;right:-3px;width:86px}

 .trust-strip>.wrap{width:100%;justify-content:space-around;gap:8px;padding:14px 12px;font-size:11px}
 .trust-strip span{gap:7px}
 .trust-strip span:before{width:10px;height:6px}

 .section{padding-block:42px}
 .section-top{display:block;margin-bottom:27px}
 .section-top>p{margin-top:20px}

 .service-grid{grid-template-columns:1fr;gap:0}
 .service-grid article{display:grid;grid-template-columns:28px 1fr;align-items:start;gap:0 12px;padding-block:23px}
 .service-number{grid-row:1/4;margin:0;padding-top:6px;font-size:14px}
 .service-grid h3{margin-bottom:8px;font-size:20px}
 .service-grid .text-link{grid-column:2;margin-top:8px}

 .work{gap:22px}
 .gallery{gap:12px}
 .gallery figcaption{flex-direction:column;gap:2px;font-size:12px;line-height:1.4}

 .about-grid{grid-template-columns:1fr;gap:36px}
 .about-story h2{margin-bottom:22px}
 .why-benny{padding:30px 0 0;border-left:0;border-top:1px solid var(--line-soft)}
 .why-benny h2{font-size:30px}
 .reasons>div{padding-block:18px}
 .about-next{display:block;margin-top:30px;padding-top:24px}
 .about-next p{margin-bottom:18px;font-size:20px;line-height:1.4}
 .about-next .button{width:100%;gap:12px;padding-inline:12px}

 .questions{grid-template-columns:1fr;gap:12px}
 .question-list summary{padding-block:20px;font-size:15px}

 .estimate-inner{display:block}
 .estimate-contact{margin-top:28px}
 .estimate .actions{margin-bottom:20px}

 .footer-main{display:block}
 .footer-links{flex-wrap:wrap;gap:24px;margin-bottom:26px}
 .footer-links a{display:inline-flex;align-items:center;min-height:44px}

 .contact-hero{padding-block:32px 28px}
 .contact-hero h1{font-size:45px;letter-spacing:-1.8px}
 .contact-hero>.intro{font-size:18px}
 .contact-grid{grid-template-columns:1fr;gap:22px;margin-top:25px}
 .contact-panel{padding:24px 21px}
 .contact-panel .eyebrow{min-height:35px;padding-right:65px}
 .contact-panel .phone{margin-top:0;font-size:28px}
 .contact-panel .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-block:24px}
 .contact-panel .button{gap:10px;padding-inline:10px}
 .contact-mark{right:14px;top:14px;width:68px;height:68px}
 .contact-area{margin-top:26px}
 .contact-help{padding-top:14px}
 .contact-help h2{font-size:27px}
 .contact-bottom{display:block;margin-bottom:8px}
 .contact-bottom p{margin-bottom:12px}

 .mobile-contact{position:fixed;z-index:20;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:var(--paper);border-top:1px solid #d0d9ca}
 .mobile-contact a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px;border:1px solid var(--green);border-radius:var(--radius);color:var(--green);font-size:14px;font-weight:600;text-decoration:none}
 .mobile-contact a:first-child{background:var(--green);color:#fff}
}

@media(max-width:350px){
 .wrap{width:calc(100% - 32px)}
 .brand-name{font-size:22px}
 .header-call{padding-inline:8px;font-size:11px}
 .hero h1{font-size:33px}
 .trust-strip>.wrap{font-size:10px}
 .trust-strip span:before{display:none}
 .contact-panel .phone{font-size:25px}
}

@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*:before,*:after{transition:none!important}
}

/* Secondary family contact stays below Benny's primary actions. */
.secondary-contact{border-top:1px solid #3d4b39;padding-top:20px;margin-top:24px}
.secondary-contact p{font-size:13px;margin-bottom:8px}
.secondary-contact a{display:inline-flex;align-items:center;min-height:44px;margin-right:18px;font-size:14px;text-underline-offset:4px}
.footer-secondary{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;margin-bottom:18px;color:#b6c0b6;font-size:12px}
.footer-secondary a{display:inline-flex;align-items:center;min-height:44px}

/* Language controls: always available, with a dismissible Spanish suggestion. */
[hidden]{display:none!important}
.header-actions{display:flex;align-items:center;gap:12px;margin-left:auto;flex-shrink:0}
.language-switch{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 13px;border:1px solid #7d9373;border-radius:var(--radius);color:#e1ecd9;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.language-switch:hover{background:#243326;border-color:#c0d5ad}
.language-switch:focus-visible,button:focus-visible{outline:3px solid #78994e;outline-offset:4px}
.language-prompt{background:#eef4e9;border-bottom:1px solid #cfddc6}
.language-prompt-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:18px}
.language-prompt strong{font-size:16px;font-weight:600}
.language-prompt p{margin:2px 0 0;font-size:14px;color:#4f5f4a}
.language-prompt-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}
.language-prompt .button{min-height:44px;padding:10px 16px}
.language-dismiss{min-height:44px;padding:10px 8px;border:0;background:transparent;color:#354c32;font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
@media(min-width:701px) and (max-width:1050px){.header-inner{gap:16px}.header-actions{gap:8px}.header-call{font-size:12px;padding-inline:10px}.language-switch{font-size:12px;padding-inline:10px}.header-inner nav{gap:16px}}
@media(max-width:700px){
 .header-actions{gap:8px}
 .header-actions .header-call{margin-left:0}
 .language-switch{font-size:12px;padding-inline:11px}
 .header-inner>nav{flex-basis:100%}
 .language-prompt-inner{display:block;padding-block:16px}
 .language-prompt-actions{margin-top:12px;gap:14px}
 .language-prompt .button{font-size:13px;padding-inline:14px}
 html[lang="es"] .hero h1{font-size:clamp(31px,8.1vw,43px)}
 html[lang="es"] .trust-strip>.wrap{font-size:10px;gap:8px;padding-inline:9px}
 html[lang="es"] .trust-strip span{gap:5px}
 html[lang="es"] .trust-strip span:before{width:8px;height:5px}
 html[lang="es"] .contact-hero h1{font-size:40px}
 html[lang="es"] .contact-panel .actions{grid-template-columns:1fr}
}
@media(max-width:380px){.header-actions .header-call{display:none}html[lang="es"] .trust-strip span:before{display:none}}

/* Real Google profile links, once verified, sit between About and FAQs. */
.reviews-section{padding-block:58px;border-bottom:1px solid var(--line)}
.reviews-layout{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:center}
.reviews-heading h2{margin-bottom:0}
.reviews-copy{padding-left:38px;border-left:1px solid var(--line-soft)}
.reviews-label{margin:0 0 12px;color:var(--green)!important;font-size:14px;font-weight:600}
.reviews-copy>p:not(.reviews-label){font-size:15px;max-width:490px;line-height:1.8}
.review-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px}
.review-actions .text-link{display:inline-flex;align-items:center;min-height:44px}
.review-preview-button{cursor:default}
.review-preview-note{margin-bottom:24px;padding:12px 16px;border-left:3px solid var(--sage);background:var(--light);color:var(--ink)!important;font-size:13px}
.contact-reviews{padding-block:32px;border-top:1px solid var(--line)}
.contact-reviews h2{font-size:28px;margin-bottom:12px}
.contact-reviews>p{font-size:15px}
/* The website QR is a quiet, downloadable tool below the main contact details. */
.qr-section{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:56px;align-items:center;padding:38px 42px;margin-bottom:32px;background:var(--light);border:1px solid var(--line);border-radius:8px}
.qr-copy h2{font-size:32px;margin-bottom:16px}
.qr-copy>p{max-width:580px;font-size:15px;line-height:1.8}
.qr-copy .qr-note{font-size:13px;margin-bottom:14px}
.qr-downloads{display:flex;align-items:center;flex-wrap:wrap;gap:8px 24px}
.qr-downloads a{display:inline-flex;align-items:center;min-height:44px}
.qr-figure{margin:0;text-align:center}
.qr-figure img{width:220px;height:auto;background:white;border-radius:4px}
.qr-figure figcaption{margin-top:8px;color:var(--muted);font-size:11px}
@media(max-width:950px){.reviews-layout{gap:38px}.reviews-copy{padding-left:28px}.qr-section{padding:30px;gap:30px}}
@media(max-width:700px){
 .reviews-section{padding-block:42px}
 .reviews-layout{grid-template-columns:1fr;gap:24px}
 .reviews-copy{padding:0;border-left:0}
 .review-actions{align-items:stretch;gap:10px 18px}
 .review-actions .button{padding-inline:17px}
 .contact-reviews{padding-block:26px}
 .qr-section{grid-template-columns:1fr;padding:26px 22px;gap:22px;margin-bottom:26px}
 .qr-copy h2{font-size:29px}
 .qr-figure{justify-self:center;max-width:100%}
 .qr-figure img{width:200px}
}