/* ==========================================================================
   Boca Raton Garage Door Repair Bro's — editorial coastal design system
   Aesthetic: warm ivory canvas · deep palm green · brass · serif display
   (Intentionally distinct from the Broward industrial/charcoal+orange build.)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500;1,9..144,600&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --bg:#F6F1E6;
  --bg-2:#EFE6D4;
  --paper:#FFFDF7;
  --ink:#16201C;
  --ink-soft:#55615A;
  --line:#DED3BD;
  --line-soft:#E9E0CE;
  --brand:#0C3B33;
  --brand-2:#082A24;
  --brand-soft:#11463C;
  --accent:#B07F2B;
  --accent-2:#C99A45;
  --accent-soft:#F2E7D0;
  --star:#C99A45;
  --maxw:1180px;
  --radius:4px;
  --shadow:0 18px 50px -24px rgba(12,59,51,.35);
  --shadow-soft:0 10px 30px -18px rgba(12,59,51,.30);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* subtle paper grain */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px}
svg{flex-shrink:0}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.04;letter-spacing:-.01em}
.serif-i{font-style:italic;color:var(--accent)}
.eyebrow{
  font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.6rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent)}
.eyebrow.center::after{content:"";width:26px;height:1px;background:var(--accent)}
.lead{font-size:1.22rem;color:var(--ink-soft);font-weight:400}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);font-weight:600;
  font-size:.95rem;letter-spacing:.01em;padding:.95rem 1.6rem;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;transition:.25s ease;white-space:nowrap;
}
.btn svg{width:18px;height:18px}
.btn-solid{background:var(--brand);color:#F6F1E6}
.btn-solid:hover{background:var(--brand-2);transform:translateY(-2px)}
.btn-gold{background:var(--accent);color:#1c1306}
.btn-gold:hover{background:var(--accent-2);transform:translateY(-2px)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-line:hover{background:var(--ink);color:var(--bg)}
.btn-ghost{background:transparent;color:#F6F1E6;border-color:rgba(246,241,230,.4)}
.btn-ghost:hover{border-color:#F6F1E6}
.btn-lg{padding:1.1rem 2rem;font-size:1rem}

/* ---------- top bar ---------- */
.topbar{background:var(--brand);color:#EBE3D2;font-size:.8rem;letter-spacing:.02em}
.topbar .container{display:flex;justify-content:space-between;align-items:center;height:40px;gap:1rem}
.topbar a{color:#EBE3D2;display:inline-flex;align-items:center;gap:.5rem}
.topbar a:hover{color:#fff}
.topbar .tb-left{display:inline-flex;align-items:center;gap:.5rem;opacity:.9}
.topbar svg{width:15px;height:15px;color:var(--accent-2)}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:60;background:rgba(246,241,230,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header .container{display:flex;align-items:center;justify-content:space-between;height:78px;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.7rem}
.brand-mark{width:40px;height:40px;display:grid;place-items:center;background:var(--brand);border-radius:50%;color:var(--accent-2)}
.brand-mark svg{width:22px;height:22px}
.brand-txt{font-family:var(--serif);font-weight:600;font-size:1.18rem;line-height:1;letter-spacing:-.01em}
.brand-txt small{display:block;font-family:var(--sans);font-weight:600;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-top:.28rem}
.nav{display:flex;align-items:center;gap:2rem}
.nav-links{display:flex;list-style:none;gap:1.7rem}
.nav-links a{font-weight:500;font-size:.96rem;color:var(--ink);position:relative;padding:.2rem 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--accent);transition:width .25s}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:1rem}
.nav-tel{font-family:var(--serif);font-size:1.1rem;color:var(--brand);font-weight:600;white-space:nowrap}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:var(--ink);transition:.25s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{padding:5.5rem 0 4rem;position:relative}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:center}
.hero h1{font-size:clamp(2.7rem,6vw,4.6rem);margin:1.4rem 0 1.5rem}
.hero .sub{font-size:1.18rem;color:var(--ink-soft);max-width:34rem;margin-bottom:2rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2rem}
.hero-trust{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;font-size:.9rem;color:var(--ink-soft)}
.hero-trust .stars{display:inline-flex;gap:2px}
.hero-trust .stars svg{width:16px;height:16px;color:var(--star)}
.hero-trust b{color:var(--ink)}
.hero-divider{width:1px;height:18px;background:var(--line)}

/* hero feature card */
.hero-card{position:relative;background:var(--brand);color:#F1ECE0;border-radius:8px;padding:2.4rem 2.2rem;box-shadow:var(--shadow);overflow:hidden}
.hero-card::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 90% 0,rgba(176,127,43,.28),transparent 55%)}
.hero-card .hc-art{position:relative;color:var(--accent-2);margin-bottom:1.4rem}
.hero-card .hc-art svg{width:100%;height:auto;opacity:.95}
.hero-card h3{font-size:1.55rem;color:#fff;margin-bottom:.5rem}
.hero-card p{position:relative;font-size:.95rem;color:#CFC6B2;margin-bottom:1.4rem}
.hero-card .hc-points{position:relative;list-style:none;display:grid;gap:.7rem;margin-bottom:1.6rem}
.hero-card .hc-points li{display:flex;align-items:center;gap:.7rem;font-size:.95rem;color:#E7E0D0}
.hero-card .hc-points svg{width:18px;height:18px;color:var(--accent-2)}
.hero-card .btn{position:relative;width:100%;justify-content:center}

/* ---------- marquee ---------- */
.marquee{background:var(--brand);color:#F1ECE0;border-block:1px solid var(--brand-soft);overflow:hidden;padding:.95rem 0}
.marquee-track{display:flex;gap:0;white-space:nowrap;width:max-content;animation:scroll 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--serif);font-style:italic;font-size:1.15rem;padding:0 1.6rem;display:inline-flex;align-items:center}
.marquee-track span::after{content:"✦";color:var(--accent-2);font-style:normal;margin-left:3.2rem;font-size:.7rem}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- section scaffolding ---------- */
.section{padding:5.5rem 0}
.section.tight{padding:4rem 0}
.section.sand{background:var(--bg-2)}
.section.dark{background:var(--brand);color:#EDE6D6}
.section.dark h2{color:#fff}
.section.dark .lead{color:#C8BFAC}
.sec-head{max-width:46rem;margin-bottom:3rem}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:clamp(2rem,4vw,3rem);margin:1rem 0 .8rem}

/* statement */
.statement p{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.4;font-weight:400;max-width:52rem}
.statement .serif-i{font-weight:500}

/* ---------- service index (numbered editorial list) ---------- */
.svc-list{border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center;padding:2rem 0;border-bottom:1px solid var(--line);transition:.3s}
.svc-row:hover{padding-inline:1.2rem;background:var(--paper)}
.svc-num{font-family:var(--serif);font-size:1.6rem;color:var(--accent);font-weight:500;font-feature-settings:"tnum"}
.svc-main h3{font-size:1.5rem;margin-bottom:.35rem}
.svc-main p{color:var(--ink-soft);max-width:40rem;font-size:.98rem}
.svc-go{display:inline-grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;color:var(--brand);transition:.25s}
.svc-row:hover .svc-go{background:var(--brand);color:var(--bg);border-color:var(--brand);transform:rotate(-45deg)}
.svc-go svg{width:20px;height:20px}

/* ---------- features (why us) ---------- */
.why-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:3.5rem;align-items:start}
.why-sticky{position:sticky;top:110px}
.feat-list{display:grid;gap:0}
.feat{display:flex;gap:1.3rem;padding:1.7rem 0;border-top:1px solid var(--line)}
.feat:last-child{border-bottom:1px solid var(--line)}
.feat-ico{flex-shrink:0;width:48px;height:48px;display:grid;place-items:center;background:var(--accent-soft);border-radius:50%;color:var(--brand)}
.feat-ico svg{width:23px;height:23px}
.feat h3{font-size:1.22rem;margin-bottom:.3rem}
.feat p{color:var(--ink-soft);font-size:.96rem}

/* ---------- coastal / local angle ---------- */
.coastal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.6rem}
.coastal-card{background:rgba(246,241,230,.06);border:1px solid var(--brand-soft);border-radius:6px;padding:1.8rem}
.coastal-card .cc-k{font-family:var(--serif);font-size:2.2rem;color:var(--accent-2);display:block;margin-bottom:.4rem}
.coastal-card h3{font-size:1.18rem;color:#fff;margin-bottom:.4rem}
.coastal-card p{color:#C2B9A6;font-size:.93rem}

/* ---------- areas ---------- */
.areas-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:start}
.area-cols{columns:3;column-gap:2rem}
.area-cols a{display:block;padding:.55rem 0;border-bottom:1px solid var(--line-soft);font-size:1.02rem;color:var(--ink);transition:.2s;break-inside:avoid}
.area-cols a:hover{color:var(--accent);padding-left:.5rem}

/* ---------- reviews (pull quotes) ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.quote{padding:2rem 0}
.quote .mark{font-family:var(--serif);font-size:3.4rem;line-height:.5;color:var(--accent);display:block;height:1.4rem}
.quote p{font-family:var(--serif);font-size:1.18rem;line-height:1.45;margin:1rem 0 1.4rem}
.quote .by{display:flex;align-items:center;gap:.7rem;border-top:1px solid var(--line);padding-top:1rem}
.quote .by b{font-family:var(--sans);font-weight:600;font-size:.95rem}
.quote .by span{font-size:.85rem;color:var(--ink-soft)}
.quote .by .stars{display:inline-flex;gap:1px;margin-left:auto}
.quote .by .stars svg{width:14px;height:14px;color:var(--star)}

/* ---------- FAQ ---------- */
.faq{max-width:50rem;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:1.3rem 0}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;list-style:none;font-family:var(--serif);font-size:1.22rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex-shrink:0;width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;transition:.25s}
.faq details[open] summary .pm{background:var(--brand);color:var(--bg);transform:rotate(45deg)}
.faq summary .pm svg{width:14px;height:14px}
.faq .ans{color:var(--ink-soft);padding-top:.9rem;font-size:1rem;max-width:44rem}

/* ---------- banner (inner pages) ---------- */
.banner{background:var(--brand);color:#EFE8D8;padding:3.4rem 0 3rem}
.banner .crumb{font-size:.82rem;color:#B9B09C;margin-bottom:1rem;display:flex;gap:.5rem;align-items:center}
.banner .crumb a{color:var(--accent-2)}
.banner h1{font-size:clamp(2.2rem,5vw,3.4rem);color:#fff;margin-bottom:.6rem}
.banner p{color:#C8BFAC;max-width:40rem}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:start}
.formcard{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:2.4rem;box-shadow:var(--shadow-soft)}
.formcard h3{font-size:1.7rem;margin-bottom:.4rem}
.fc-sub{color:var(--ink-soft);margin-bottom:1.6rem}
.field{margin-bottom:1rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field label{display:block;font-size:.82rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4rem}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg);font-family:var(--sans);font-size:1rem;color:var(--ink);transition:.2s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px rgba(12,59,51,.08)}
.field textarea{min-height:120px;resize:vertical}
.hp{position:absolute;left:-9999px}
.btn-block{width:100%;justify-content:center}
.form-note{font-size:.85rem;color:var(--ink-soft);margin-top:.9rem;text-align:center}
.form-msg{display:none;padding:.8rem 1rem;border-radius:var(--radius);margin-bottom:1rem;font-size:.92rem}
.form-msg.ok{display:block;background:#10463c;color:#EAF7EF}
.form-msg.err{display:block;background:#F6E5D6;color:#7a3b12;border:1px solid #e6c39e}
.ci{display:flex;gap:1rem;padding:1.3rem 0;border-bottom:1px solid var(--line)}
.ci:first-child{padding-top:0}
.ci-ico{flex-shrink:0;width:44px;height:44px;display:grid;place-items:center;background:var(--accent-soft);border-radius:50%;color:var(--brand)}
.ci-ico svg{width:21px;height:21px}
.ci b{display:block;font-family:var(--serif);font-size:1.1rem;margin-bottom:.15rem}
.ci a,.ci p,.ci span{display:block;color:var(--ink-soft);font-size:.96rem}
.ci a:hover{color:var(--accent)}
.hours-row{display:flex;justify-content:space-between;padding:.3rem 0;font-size:.95rem;border-bottom:1px dashed var(--line-soft)}
.hours-row b{color:var(--ink)}

/* ---------- services page extras ---------- */
.svc-detail{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.svc-detail .card{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:1.8rem;transition:.25s}
.svc-detail .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.svc-detail .card .k{font-family:var(--serif);font-size:1.3rem;color:var(--accent);display:block;margin-bottom:.6rem}
.svc-detail .card h3{font-size:1.25rem;margin-bottom:.4rem}
.svc-detail .card p{color:var(--ink-soft);font-size:.95rem}
.svc-detail .card ul{list-style:none;margin-top:.9rem;display:grid;gap:.4rem}
.svc-detail .card li{display:flex;gap:.5rem;font-size:.92rem;color:var(--ink-soft)}
.svc-detail .card li svg{width:17px;height:17px;color:var(--brand);margin-top:3px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;counter-reset:s}
.step{padding-top:1.2rem;border-top:2px solid var(--accent)}
.step .n{font-family:var(--serif);font-size:1rem;color:var(--accent);font-weight:600}
.step h3{font-size:1.2rem;margin:.5rem 0 .35rem}
.step p{color:var(--ink-soft);font-size:.93rem}

/* about media card */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:center}
.media-card{background:var(--brand);color:#EDE6D6;border-radius:8px;padding:2.6rem;box-shadow:var(--shadow)}
.media-card .big{font-family:var(--serif);font-size:4rem;color:var(--accent-2);line-height:1}
.media-card h3{color:#fff;font-size:1.4rem;margin:.3rem 0 1.4rem}
.media-card .mc-row{display:flex;align-items:center;gap:.7rem;padding:.55rem 0;color:#DBD3C2;font-size:.96rem}
.media-card .mc-row svg{width:19px;height:19px;color:var(--accent-2)}
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;border-block:1px solid var(--line);padding:2.4rem 0}
.stat-strip .stat b{font-family:var(--serif);font-size:2.4rem;color:var(--brand);display:block;line-height:1}
.stat-strip .stat span{font-size:.9rem;color:var(--ink-soft)}

/* ---------- CTA band ---------- */
.cta{background:var(--brand);color:#EFE8D8;text-align:center;position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 50% 0,rgba(176,127,43,.22),transparent 60%)}
.cta .container{position:relative}
.cta h2{font-size:clamp(2rem,4vw,2.8rem);color:#fff;margin-bottom:.7rem}
.cta p{color:#C8BFAC;max-width:36rem;margin:0 auto 1.8rem}
.cta-row{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem}

/* ---------- footer ---------- */
.footer{background:var(--brand-2);color:#C2BAA8;border-top:3px solid var(--accent);padding:4rem 0 2rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:2.5rem}
.footer-word{font-family:var(--serif);font-size:1.5rem;color:#fff;margin-bottom:.8rem;line-height:1.1}
.footer-about{font-size:.93rem;max-width:24rem;color:#A89F8D}
.footer h4{font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);margin-bottom:1.1rem}
.footer ul{list-style:none;display:grid;gap:.6rem}
.footer ul a,.footer-contact li{color:#C2BAA8;font-size:.94rem;display:flex;gap:.55rem;align-items:flex-start}
.footer ul a:hover{color:#fff}
.footer-contact li svg{width:16px;height:16px;color:var(--accent-2);margin-top:3px}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;border-top:1px solid var(--brand-soft);margin-top:3rem;padding-top:1.5rem;font-size:.83rem;color:#8E8674}

/* ---------- mobile call bar ---------- */
.callbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:80;background:var(--accent);box-shadow:0 -6px 24px rgba(0,0,0,.18)}
.callbar a{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:1rem;font-weight:700;color:#1c1306;font-size:1.05rem}
.callbar svg{width:20px;height:20px}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.marquee-track{animation:none}}

/* load stagger for hero */
.hero .eyebrow,.hero h1,.hero .sub,.hero-cta,.hero-trust{opacity:0;animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1{animation-delay:.08s}.hero .sub{animation-delay:.16s}.hero-cta{animation-delay:.24s}.hero-trust{animation-delay:.32s}
.hero-card{opacity:0;animation:rise .9s cubic-bezier(.2,.7,.2,1) .2s forwards}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .hero-grid,.why-grid,.areas-wrap,.contact-grid,.split{grid-template-columns:1fr;gap:2.4rem}
  .why-sticky{position:static}
  .coastal-grid,.svc-detail,.reviews{grid-template-columns:1fr 1fr}
  .steps,.stat-strip{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .area-cols{columns:2}
}
@media(max-width:680px){
  .container{padding:0 20px}
  .topbar .tb-left span{display:none}
  .nav-links,.nav-tel{display:none}
  .nav.mobile-open .nav-links{display:flex;position:absolute;top:78px;left:0;right:0;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--line);padding:1.2rem 28px;gap:1rem}
  .burger{display:flex}
  .section{padding:3.6rem 0}
  .coastal-grid,.svc-detail,.reviews,.steps,.stat-strip,.footer-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .svc-row{grid-template-columns:auto 1fr;gap:1.2rem}.svc-go{display:none}
  .callbar{display:block}
  body{padding-bottom:60px}
  .hero{padding:3rem 0 2rem}
}