/* Sharpe's Plumbing — styles.css */

:root {
  --color-dark:#0D1B2A; --color-dark-alt:#162336; --color-dark-muted:#2A3F5A;
  --color-copper:#1B3A6B; --color-copper-light:#A8C4E4; --color-copper-dark:#0F2347;
  --color-bg:#FFFFFF; --color-bg-alt:#EEF2F7;
  --color-text:#1A2233; --color-text-muted:#4D6070; --color-text-light:#8A9BB0;
  --color-white:#FFFFFF; --color-border:rgba(26,34,51,0.10); --color-border-light:rgba(255,255,255,0.12);
  --font-display:'Playfair Display',Georgia,serif; --font-body:'Nunito',system-ui,sans-serif;
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.25rem;
  --text-5xl:3rem; --text-6xl:3.75rem;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06); --shadow-md:0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:0 10px 30px rgba(0,0,0,.10); --shadow-xl:0 20px 50px rgba(0,0,0,.12);
  --shadow-copper:0 4px 20px rgba(27,58,107,.25);
  --transition-fast:150ms ease; --transition-base:250ms ease; --transition-slow:400ms ease;
  --container-max:1200px; --header-height:72px;
  --section-pad-y:var(--space-24); --angled-offset:60px;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem;
  --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;
  --radius-sm:4px; --radius-md:8px; --radius-lg:16px; --radius-xl:24px; --radius-full:9999px;
}

/* Reset */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { font-family:var(--font-body); font-size:var(--text-base); line-height:1.65;
  color:var(--color-text); background-color:var(--color-bg); overflow-x:hidden; }
img,picture,video,canvas,svg { display:block; max-width:100%; }
input,button,textarea,select { font:inherit; }
p,h1,h2,h3,h4,h5,h6 { overflow-wrap:break-word; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
button { cursor:pointer; border:none; background:none; }

/* Typography */
h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); line-height:1.2; font-weight:700; color:var(--color-dark); }
h1 { font-size:clamp(var(--text-4xl),6vw,var(--text-6xl)); }
h2 { font-size:clamp(var(--text-3xl),4vw,var(--text-5xl)); }
h3 { font-size:clamp(var(--text-2xl),3vw,var(--text-4xl)); }
h4 { font-size:clamp(var(--text-xl),2.5vw,var(--text-3xl)); }
h5 { font-size:var(--text-xl); } h6 { font-size:var(--text-lg); }
p { margin-bottom:var(--space-4); color:var(--color-text); }
p:last-child { margin-bottom:0; }
.lead { font-size:var(--text-lg); line-height:1.7; color:var(--color-text-muted); font-weight:500; }
.eyebrow,.section-eyebrow { font-family:var(--font-body); font-size:var(--text-xs); font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--color-copper); display:block; margin-bottom:var(--space-3);
  opacity:.85; }
.text-center { text-align:center; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Layout */
.container { width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--space-6); }
.section { padding-block:var(--section-pad-y); position:relative; }
.section--light { background-color:var(--color-bg); }
.section--alt { background-color:var(--color-bg-alt); }
.section--dark { background-color:var(--color-dark); color:var(--color-white); }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4,.section--dark h5,.section--dark h6 { color:var(--color-white); }
.section--dark p { color:rgba(255,255,255,.60); }
.section--dark .lead { color:rgba(255,255,255,.90); }
.section--dark .eyebrow,.section--dark .section-eyebrow { color:var(--color-copper-light); opacity:1; }
.section--angled-top { clip-path:polygon(0 var(--angled-offset),100% 0,100% 100%,0 100%);
  margin-top:calc(var(--angled-offset)*-1); padding-top:calc(var(--section-pad-y) + var(--angled-offset)); }
.section--angled-reverse { clip-path:polygon(0 0,100% var(--angled-offset),100% 100%,0 calc(100% - var(--angled-offset)));
  padding-bottom:calc(var(--section-pad-y) + var(--angled-offset)); }
.mt-8 { margin-top:var(--space-8); }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:var(--space-4) var(--space-8); font-family:var(--font-body); font-size:var(--text-base);
  font-weight:700; letter-spacing:.02em; border-radius:var(--radius-sm); border:2px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color var(--transition-base),color var(--transition-base),
    border-color var(--transition-base),transform var(--transition-fast),box-shadow var(--transition-base); }
.btn:active { transform:translateY(1px); }
.btn--primary { background-color:var(--color-copper); color:var(--color-white);
  border-color:var(--color-copper); box-shadow:var(--shadow-copper); }
.btn--primary:hover { background-color:var(--color-copper-dark); border-color:var(--color-copper-dark);
  box-shadow:0 6px 24px rgba(27,58,107,.35); transform:translateY(-2px); }
.btn--secondary { background-color:transparent; color:var(--color-dark); border-color:var(--color-dark); }
.btn--secondary:hover { background-color:var(--color-dark); color:var(--color-white); transform:translateY(-2px); }
.btn--outline-light { background-color:transparent; color:var(--color-white); border-color:rgba(255,255,255,.6); }
.btn--outline-light:hover { background-color:var(--color-white); color:var(--color-dark); border-color:var(--color-white); }
.btn--white { background-color:var(--color-white); color:var(--color-copper-dark); border-color:var(--color-white); font-weight:700; }
.btn--white:hover { background-color:transparent; color:var(--color-white); border-color:var(--color-white); }
.btn--ghost-white { background-color:transparent; color:var(--color-white); border-color:rgba(255,255,255,.5); }
.btn--ghost-white:hover { background-color:rgba(255,255,255,.1); border-color:var(--color-white); }
.btn--lg { padding:var(--space-5) var(--space-10); font-size:var(--text-lg); }
.btn--sm { padding:var(--space-2) var(--space-5); font-size:var(--text-sm); }
.btn--full { width:100%; }

/* Header */
.site-header { position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--header-height);
  display:flex; align-items:center;
  transition:background-color var(--transition-base),box-shadow var(--transition-base); }
.site-header--transparent { background-color:transparent; }
.site-header--solid { background-color:var(--color-dark); box-shadow:0 2px 20px rgba(0,0,0,.25); backdrop-filter:blur(10px); }
.site-header .container { display:flex; align-items:center; justify-content:space-between; width:100%; }
.site-logo { display:flex; align-items:center; gap:var(--space-3); text-decoration:none; flex-shrink:0; }
.site-logo__mark { width:44px; height:44px; background-color:transparent;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.site-logo__mark img { width:100%; height:100%; display:block; }
.site-logo__text { display:flex; flex-direction:column; line-height:1; }
.site-logo__name { font-family:var(--font-display); font-size:var(--text-lg); font-weight:700;
  color:var(--color-white); letter-spacing:-.01em; }
.site-logo__tagline { font-family:var(--font-body); font-size:var(--text-xs); font-weight:500;
  color:rgba(255,255,255,.55); letter-spacing:.05em; text-transform:uppercase; margin-top:4px; }
.site-nav { display:none; }
.site-nav__list { display:flex; align-items:center; gap:var(--space-8); }
.site-nav__link { font-size:var(--text-sm); font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(255,255,255,.80); transition:color var(--transition-fast);
  position:relative; padding-bottom:var(--space-1); }
.site-nav__link::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px;
  background-color:rgba(255,255,255,.70); transition:width var(--transition-base); }
.site-nav__link:hover { color:var(--color-white); }
.site-nav__link:hover::after,.site-nav__link--active::after { width:100%; }
.site-nav__link--active { color:var(--color-white); }
.site-header__cta { display:none; }

/* Hamburger */
.hamburger { width:40px; height:40px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:5px; cursor:pointer; padding:var(--space-2);
  border-radius:var(--radius-sm); transition:background-color var(--transition-fast); }
.hamburger:hover { background-color:rgba(255,255,255,.1); }
.hamburger__line { display:block; width:22px; height:2px; background-color:var(--color-white);
  border-radius:2px; transition:transform var(--transition-base),opacity var(--transition-base),
    width var(--transition-base); transform-origin:center; }
.hamburger.is-open .hamburger__line:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.is-open .hamburger__line:nth-child(2) { opacity:0; width:0; }
.hamburger.is-open .hamburger__line:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.mobile-nav { position:fixed; top:var(--header-height); left:0; right:0;
  background-color:var(--color-dark); padding:var(--space-6) var(--space-6) var(--space-8);
  z-index:999; transform:translateY(-110%); opacity:0;
  transition:transform var(--transition-slow),opacity var(--transition-base);
  box-shadow:0 8px 30px rgba(0,0,0,.4); border-bottom:1px solid rgba(255,255,255,.08); }
.mobile-nav.is-open { transform:translateY(0); opacity:1; }
.mobile-nav__list { display:flex; flex-direction:column; gap:var(--space-1); margin-bottom:var(--space-6); }
.mobile-nav__link { display:block; padding:var(--space-3) var(--space-2); font-size:var(--text-lg);
  font-weight:600; color:rgba(255,255,255,.85); border-bottom:1px solid rgba(255,255,255,.06);
  transition:color var(--transition-fast),padding-left var(--transition-fast); }
.mobile-nav__link:hover { color:var(--color-white); padding-left:var(--space-4); }
.mobile-nav__cta { display:flex; flex-direction:column; gap:var(--space-3); }

/* Hero */
.hero { position:relative; min-height:100svh; min-height:100vh; display:flex; align-items:center;
  background-color:var(--color-dark); overflow:hidden; padding-top:var(--header-height); }
.hero__bg { position:absolute; inset:0; background-image:linear-gradient(160deg,rgba(28,28,30,.92) 0%,rgba(28,28,30,.75) 50%,rgba(28,28,30,.88) 100%);
  background-color:var(--color-dark-alt); z-index:0; }
.hero__bg-image { position:absolute; inset:0; background-size:cover; background-position:center;
  background-repeat:no-repeat; opacity:.35; z-index:-1; }
.hero__content { position:relative; z-index:2; padding-block:var(--space-24); max-width:720px; }
.hero__eyebrow { display:inline-flex; align-items:center; gap:var(--space-3); font-size:var(--text-xs);
  font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-bottom:var(--space-5); }
.hero__eyebrow::before { content:''; display:block; width:28px; height:2px; background-color:rgba(255,255,255,.45); }
.hero__headline { font-family:var(--font-display); font-size:clamp(2.5rem,7vw,4.75rem); font-weight:800;
  line-height:1.08; color:var(--color-white); margin-bottom:var(--space-6); letter-spacing:-.02em; }
.hero__headline em { font-style:italic; color:rgba(255,255,255,.85); }
.hero__subheadline { font-size:clamp(var(--text-base),2.5vw,var(--text-xl)); line-height:1.65;
  color:rgba(255,255,255,.75); margin-bottom:var(--space-10); max-width:540px; font-weight:500; }
.hero__actions { display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center; }

/* Trust bar */
.trust-bar { background-color:var(--color-dark-alt); padding-block:var(--space-5); border-bottom:1px solid rgba(255,255,255,.06); }
.trust-bar__list { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-6) var(--space-10); }
.trust-bar__item { display:flex; align-items:center; gap:var(--space-3); color:rgba(255,255,255,.75);
  font-size:var(--text-sm); font-weight:600; letter-spacing:.02em; white-space:nowrap; }
.trust-bar__icon { color:rgba(255,255,255,.85); font-size:var(--text-lg); flex-shrink:0; line-height:1; }
.trust-bar__divider { width:1px; height:24px; background-color:rgba(255,255,255,.12); display:none; }

/* Section header */
.section-header { margin-bottom:var(--space-12); text-align:center; }
.section-header--left { text-align:left; }
.section-header__title,.section-title { margin-bottom:var(--space-4); }
.section-header__subtitle,.section-intro { font-size:var(--text-lg); color:var(--color-text-muted); max-width:560px; margin-inline:auto; }
.section-header--left .section-header__subtitle { margin-inline:0; }

/* Service cards */
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--space-8); }
.service-grid { display:grid; grid-template-columns:1fr; gap:var(--space-6); }
.service-card { background-color:var(--color-white); border-radius:var(--radius-lg);
  padding:var(--space-8) var(--space-8) var(--space-6); box-shadow:var(--shadow-sm);
  border:1px solid var(--color-border); transition:box-shadow var(--transition-base),transform var(--transition-base),border-color var(--transition-base); }
.service-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); border-color:rgba(27,58,107,.18); }
.service-card__icon { width:52px; height:52px; background-color:rgba(27,58,107,.08); border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-5); font-size:24px; color:var(--color-copper); }
.service-card__title { font-size:var(--text-xl); margin-bottom:var(--space-3); color:var(--color-dark); }
.service-card__description,.service-card__desc { font-size:var(--text-base); color:var(--color-text-muted); line-height:1.65; margin-bottom:var(--space-6); }
.service-card__link { display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm);
  font-weight:700; color:var(--color-copper); letter-spacing:.02em; transition:gap var(--transition-fast); }
.service-card__link:hover { gap:var(--space-4); }
.service-card__link::after { content:'→'; }

/* About teaser */
.about-teaser { display:grid; gap:var(--space-12); align-items:center; }
.about-teaser__photo { display:flex; justify-content:center; }
.about-teaser__photo-wrap { width:200px; height:200px; border-radius:50%; background-color:var(--color-dark-muted);
  border:4px solid var(--color-copper-light); overflow:hidden; flex-shrink:0;
  box-shadow:0 0 0 8px rgba(168,196,228,.15),var(--shadow-xl); }
.about-teaser__photo-wrap img { width:100%; height:100%; object-fit:cover; }
.about-teaser__content h2 { margin-bottom:var(--space-5); }
.about-teaser__content p { color:rgba(255,255,255,.72); font-size:var(--text-lg); line-height:1.75; }

/* Testimonials */
.testimonial-block { background-color:var(--color-bg-alt); border-radius:var(--radius-xl);
  padding:var(--space-10); border:1px solid var(--color-border); }
.rating-display { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-8); }
.rating-display__stars { display:flex; gap:3px; color:#F59E0B; font-size:var(--text-xl); line-height:1; }
.rating-display__score { font-family:var(--font-display); font-size:var(--text-3xl); font-weight:700; color:var(--color-dark); line-height:1; }
.rating-display__count { font-size:var(--text-sm); color:var(--color-text-muted); }
.testimonials-grid { display:grid; gap:var(--space-6); }
.testimonial-card { background-color:var(--color-white); border-radius:var(--radius-lg);
  padding:var(--space-6) var(--space-8); border:1px solid var(--color-border);
  box-shadow:var(--shadow-sm); position:relative; }
.testimonial-card::before { content:'\201C'; position:absolute; top:var(--space-4); right:var(--space-6);
  font-family:var(--font-display); font-size:80px; line-height:1; color:var(--color-copper); opacity:.15; }
.testimonial-card__stars { display:flex; gap:2px; color:#F59E0B; font-size:var(--text-base); margin-bottom:var(--space-3); }
.testimonial-card__text { font-size:var(--text-base); line-height:1.7; color:var(--color-text); margin-bottom:var(--space-4); font-style:italic; }
.testimonial-card__author { font-weight:700; font-size:var(--text-sm); color:var(--color-dark); }
.testimonial-card__source { font-size:var(--text-xs); color:var(--color-text-muted); margin-top:var(--space-1); }

/* Area tags */
.area-tags { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-bottom:var(--space-8); }
.area-tag { display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4);
  background-color:var(--color-white); border:1px solid var(--color-border); border-radius:var(--radius-full);
  font-size:var(--text-sm); font-weight:600; color:var(--color-text); box-shadow:var(--shadow-sm);
  transition:border-color var(--transition-fast),color var(--transition-fast); }
.area-tag:hover { border-color:var(--color-copper); color:var(--color-copper); }
.area-tag--highlight { background-color:rgba(27,58,107,.08); border-color:var(--color-copper); color:var(--color-copper-dark); }
.area-tag::before { content:'◉'; font-size:8px; color:var(--color-copper); }

/* CTA banner */
.cta-banner { background-color:var(--color-copper); position:relative; overflow:hidden; }
.cta-banner .container { position:relative; z-index:1; }
.cta-banner__eyebrow { color:rgba(255,255,255,.7); font-size:var(--text-xs); letter-spacing:.15em;
  text-transform:uppercase; font-weight:700; margin-bottom:var(--space-3); display:block; }
.cta-banner__headline { font-size:clamp(var(--text-3xl),5vw,var(--text-5xl)); color:var(--color-white);
  font-weight:800; margin-bottom:var(--space-3); line-height:1.1; }
.cta-banner__phone { font-size:clamp(var(--text-2xl),4vw,var(--text-4xl)); font-weight:800;
  color:var(--color-white); text-decoration:none; display:block; margin-bottom:var(--space-6);
  font-family:var(--font-display); letter-spacing:-.01em; }
.cta-banner__phone:hover { opacity:.85; }
.cta-banner__sub { font-size:var(--text-base); color:rgba(255,255,255,.8); margin-bottom:var(--space-8); }
.cta-banner__actions { display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center; }

/* Footer */
.site-footer { background-color:var(--color-dark); color:rgba(255,255,255,.65);
  padding-top:var(--space-16); padding-bottom:var(--space-8); position:relative; overflow:hidden; }
.site-footer::before { content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--color-dark),var(--color-copper),var(--color-copper-light),var(--color-copper)); }
.footer-grid { display:grid; gap:var(--space-10); margin-bottom:var(--space-12); }
.footer-brand__logo { margin-bottom:var(--space-5); }
.footer-brand__desc,.footer-tagline { font-size:var(--text-sm); line-height:1.7; color:rgba(255,255,255,.5); max-width:280px; }
.footer-tagline { margin-top:var(--space-5); }
.footer-contact { display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-5); }
.footer-contact__item { display:flex; align-items:flex-start; gap:var(--space-3); font-size:var(--text-sm); color:rgba(255,255,255,.65); }
.footer-contact__icon { color:var(--color-copper); flex-shrink:0; width:18px; text-align:center; line-height:1.65; }
.footer-contact__phone { font-size:var(--text-lg); font-weight:700; color:var(--color-white);
  text-decoration:none; transition:color var(--transition-fast); }
.footer-contact__phone:hover { color:var(--color-copper-light); }
.footer-nav__heading { font-family:var(--font-body); font-size:var(--text-xs); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:var(--space-4); }
.footer-nav__list { display:flex; flex-direction:column; gap:var(--space-3); }
.footer-nav__link { font-size:var(--text-sm); color:rgba(255,255,255,.6); display:block;
  transition:color var(--transition-fast),padding-left var(--transition-fast); }
.footer-nav__link:hover { color:var(--color-copper-light); padding-left:var(--space-2); }
.footer-hours { font-size:var(--text-sm); color:rgba(255,255,255,.6); line-height:1.8; }
.footer-hours__badge { display:inline-flex; align-items:center; gap:var(--space-2);
  background-color:rgba(168,196,228,.10); border:1px solid rgba(168,196,228,.25); color:var(--color-copper-light);
  padding:var(--space-1) var(--space-3); border-radius:var(--radius-full); font-size:var(--text-xs);
  font-weight:700; letter-spacing:.05em; margin-bottom:var(--space-3); }
.footer-hours__badge::before { content:''; width:6px; height:6px; border-radius:50%; background-color:#22C55E; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding-top:var(--space-6);
  display:flex; flex-direction:column; gap:var(--space-3); }
.footer-bottom__copy { font-size:var(--text-xs); color:rgba(255,255,255,.35); }
.footer-bottom__tagline { font-size:var(--text-xs); color:rgba(255,255,255,.25); font-style:italic; }

/* Fade-in-up animation */
.animate-fade-up { opacity:0; transform:translateY(32px); transition:opacity .6s ease,transform .6s ease; }
.animate-fade-up.is-visible { opacity:1; transform:translateY(0); }
.animate-stagger > *:nth-child(1) { transition-delay:0ms; }
.animate-stagger > *:nth-child(2) { transition-delay:100ms; }
.animate-stagger > *:nth-child(3) { transition-delay:200ms; }
.animate-stagger > *:nth-child(4) { transition-delay:300ms; }
.animate-stagger > *:nth-child(5) { transition-delay:400ms; }

/* Forms */
.form-group { margin-bottom:var(--space-5); }
.form-label { display:block; font-size:var(--text-sm); font-weight:600; color:var(--color-dark);
  margin-bottom:var(--space-2); letter-spacing:.01em; }
.form-input,.form-textarea,.form-select { width:100%; padding:var(--space-3) var(--space-4);
  font-family:var(--font-body); font-size:var(--text-base); color:var(--color-text);
  background-color:var(--color-white); border:1.5px solid var(--color-border); border-radius:var(--radius-md);
  outline:none; transition:border-color var(--transition-fast),box-shadow var(--transition-fast); -webkit-appearance:none; }
.form-input:focus,.form-textarea:focus,.form-select:focus { border-color:var(--color-copper); box-shadow:0 0 0 3px rgba(27,58,107,.10); }
.form-input::placeholder,.form-textarea::placeholder { color:var(--color-text-light); }
.form-textarea { resize:vertical; min-height:120px; line-height:1.6; }
.form-hint { font-size:var(--text-xs); color:var(--color-text-muted); margin-top:var(--space-1); }
.form-error { font-size:var(--text-xs); color:#DC2626; margin-top:var(--space-1); }

/* FAQ accordion */
.faq-list { display:flex; flex-direction:column; max-width:760px; margin-inline:auto; }
.faq-item { border-bottom:1px solid var(--color-border); }
.faq-item:first-child { border-top:1px solid var(--color-border); }
.faq-question { list-style:none; padding:var(--space-5) 0; font-family:var(--font-display); font-size:var(--text-xl);
  font-weight:600; color:var(--color-dark); cursor:pointer; display:flex; justify-content:space-between;
  align-items:center; gap:var(--space-4); }
.faq-question::-webkit-details-marker { display:none; }
.faq-question::after { content:'+'; font-family:var(--font-body); font-size:var(--text-2xl); color:var(--color-dark-muted);
  flex-shrink:0; line-height:1; transition:transform var(--transition-base); }
details[open] .faq-question::after { transform:rotate(45deg); }
.faq-answer { padding:0 0 var(--space-5) 0; color:var(--color-text-muted); line-height:1.7; max-width:640px; }

/* Responsive */
@media (min-width:768px) {
  :root { --section-pad-y:var(--space-32); --angled-offset:80px; }
  .site-nav { display:flex; }
  .site-header__cta { display:flex; align-items:center; gap:var(--space-4); }
  .hamburger { display:none; }
  .mobile-nav { display:none; }
  .trust-bar__divider { display:block; }
  .trust-bar__list { gap:var(--space-4); }
  .about-teaser { grid-template-columns:200px 1fr; gap:var(--space-12); }
  .about-teaser__photo { justify-content:flex-start; }
  .testimonials-grid { grid-template-columns:1fr 1fr; }
  .service-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1.5fr 1fr 1fr 1fr; }
  .footer-bottom { flex-direction:row; justify-content:space-between; align-items:center; }
}
@media (min-width:1024px) {
  .hero__content { max-width:640px; }
  .cta-banner .container { display:flex; align-items:center; justify-content:space-between; gap:var(--space-12); }
  .cta-banner__text { flex:1; }
  .cta-banner__actions-wrap { flex-shrink:0; text-align:right; }
}
@media (max-width:767px) {
  .hero__actions,.cta-banner__actions { flex-direction:column; align-items:flex-start; }
  .hero__actions .btn,.cta-banner__actions .btn { width:100%; justify-content:center; }
}