/* Concept 01 — "Blueprint" · dark, call-first one-page layout.
   Display: Saira 800/900. Body: Inter. Dark theme (--js-black). */

#main, body { background: var(--js-black); color: #E9E9E6; }
h1,h2,h3 { font-family: Saira, Inter, sans-serif; font-weight: 800; letter-spacing: -0.01em; line-height: var(--lh-tight); }

/* ---- topbar ---- */
.topbar { background: var(--js-ink); border-bottom: 1px solid #262626; font-size: .82rem; }
.topbar-in { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 7px; color: var(--js-gray-light); }
.topbar-lic { color: #fff; font-weight: 600; letter-spacing: .02em; }
.topbar-lic strong { color: var(--js-green-glow); }
@media (max-width: 560px){ .topbar-serving { display: none; } }

/* ---- header ---- */
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: rgba(10,10,10,.92);
  backdrop-filter: blur(10px); border-bottom: 1px solid #1d1d1d; }
.header-in { display: flex; align-items: center; gap: 20px; padding-block: 12px; }
.brand img { width: clamp(150px, 20vw, 190px); height: auto; }
.mainnav { display: flex; gap: clamp(14px, 2vw, 26px); margin-left: auto; }
.mainnav a { font-weight: 600; font-size: .98rem; color: #d6d6d6; padding: 6px 2px; position: relative; }
.mainnav a:hover { color: #fff; }
.mainnav a::after { content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background: var(--js-green-logo); transition: right var(--dur) var(--ease); }
.mainnav a:hover::after { right: 0; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.lang-toggle { border: 1.5px solid #3a3a3a; border-radius: var(--r-pill); padding: 7px 13px; font-weight: 700; font-size: .82rem; color: #cfcfcf; display:flex; gap:4px; }
.lang-toggle .lang-sep { opacity: .4; }
.lang-toggle[aria-pressed="true"] .lang-es, .lang-toggle[aria-pressed="false"] .lang-en { color: var(--js-green-glow); }
.lang-toggle:hover { border-color: var(--js-green-logo); }
@media (max-width: 900px){ .mainnav { display: none; } }
@media (max-width: 440px){ .header-cta span { display: none; } .header-cta::after { content: "Call"; } }

/* ---- hero ---- */
.hero { position: relative; overflow: hidden; padding-block: clamp(42px, 7vw, 92px);
  background:
    radial-gradient(900px 500px at 82% 12%, rgba(0,138,18,.14), transparent 60%),
    linear-gradient(180deg, #0c0c0c, var(--js-black)); }
.hero::before { content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 38px, rgba(255,255,255,.025) 39px),
    repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(255,255,255,.025) 39px); }
.hero-in { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.hero-eyebrow { color: var(--js-green-glow); margin-bottom: 14px; }
.hero h1 { font-size: var(--fs-h1); font-weight: 900; margin-bottom: 18px; }
.hero-lead { color: #cfcfcf; font-size: var(--fs-lg); max-width: 54ch; }
.hero-region { color: var(--js-green-glow); font-weight: 600; margin-top: 14px; }
.checklist { display: grid; gap: 12px; margin: 26px 0; }
.checklist li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 1.05rem; }
.checklist .ck { width: 26px; height: 26px; flex: none; border-radius: var(--r-sm); background: var(--js-green-logo);
  position: relative; box-shadow: 0 0 0 4px rgba(0,138,18,.15); }
.checklist .ck::after { content:""; position:absolute; left:8px; top:4px; width:7px; height:13px; border:solid #fff; border-width:0 3px 3px 0; transform: rotate(45deg); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.btn-lg { padding: 17px 26px; font-size: 1.05rem; }
.hero-cta .btn-ghost { color: #fff; }
.hero-emblem { position: relative; display: grid; place-items: center; }
.hero-emblem img { width: min(100%, 520px); filter: drop-shadow(0 20px 50px rgba(0,0,0,.6)); }
.hero-emblem-glow { position: absolute; inset: 10% 6%; z-index: -1; background: radial-gradient(closest-side, rgba(0,138,18,.22), transparent); filter: blur(10px); }
@media (max-width: 860px){ .hero-in { grid-template-columns: 1fr; } .hero-emblem { order: -1; } .hero-emblem img { width: min(78%, 360px); } }

/* ---- section furniture ---- */
.section-eyebrow { color: var(--js-green-glow); margin-bottom: 12px; }
.section-title { font-size: var(--fs-h2); margin-bottom: 10px; }
.section-sub { color: var(--js-gray-light); max-width: 62ch; margin-bottom: 30px; }

/* ---- services ---- */
.services { background: linear-gradient(180deg, var(--js-black), #0d0d0d); }
.services-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px){ .services-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px){ .services-grid { grid-template-columns: 1fr; } }
.svc-card { display: block; background: var(--js-charcoal); border: 1px solid #2a2a2a; border-radius: var(--r-lg); padding: 26px 24px;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.svc-card:hover { transform: translateY(-4px); border-color: var(--js-green-logo); box-shadow: var(--sh-dark); }
.svc-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-md); background: rgba(0,138,18,.14); color: var(--js-green-glow); margin-bottom: 16px; }
.svc-ico svg { width: 28px; height: 28px; }
.svc-card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.svc-card p { color: var(--js-gray-light); font-size: .98rem; }
.svc-link { display: inline-block; margin-top: 14px; color: var(--js-green-glow); font-weight: 700; font-size: .95rem; }

/* ---- work ---- */
.work-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.work-grid .ph-photo { min-height: 180px; border-radius: var(--r-md); }
.work-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; max-width: 640px; }
.vclip { min-height: 260px; border-radius: var(--r-md); position: relative; }
.vclip .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-60%); width: 54px; height: 54px; border-radius: 50%; background: rgba(0,138,18,.85); }
.vclip .play::after { content:""; position:absolute; top:50%; left:54%; transform: translate(-50%,-50%); border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
@media (max-width: 860px){ .work-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px){ .work-videos { grid-template-columns: 1fr; } .vclip { min-height: 200px; } }

/* ---- reviews ---- */
.reviews { background: #0d0d0d; }
.reviews-grid { grid-template-columns: repeat(3,1fr); }
@media (max-width: 860px){ .reviews-grid { grid-template-columns: 1fr; } }
.review-card { background: var(--js-charcoal); border: 1px solid #2a2a2a; border-left: 3px solid var(--js-green-logo); border-radius: var(--r-md); padding: 22px; }
.review-card .stars { display: flex; gap: 3px; margin-bottom: 12px; }
.review-card .stars::before { content: "★★★★★"; color: var(--js-green-glow); letter-spacing: 3px; font-size: 1.05rem; }
.review-card p { color: #d6d6d6; font-style: italic; }
.review-card footer { margin-top: 14px; color: var(--js-gray-light); font-size: .85rem; font-style: normal; }

/* ---- about ---- */
.about-in { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px,4vw,56px); align-items: center; }
.about-photo { min-height: 360px; border-radius: var(--r-lg); }
.about-copy p { color: #cfcfcf; margin-top: 14px; }
.about-lic { color: #fff !important; font-weight: 600; margin-top: 18px; }
.about-lic strong { color: var(--js-green-glow); }
@media (max-width: 760px){ .about-in { grid-template-columns: 1fr; } .about-photo { min-height: 240px; } }

/* ---- contact ---- */
.contact { background: linear-gradient(180deg, #0d0d0d, var(--js-black)); }
.contact-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px,4vw,56px); align-items: start; }
.contact-promise { color: var(--js-green-glow); font-weight: 600; margin-bottom: 20px; }
.contact-list { display: grid; gap: 14px; margin-bottom: 30px; }
.contact-list li { display: flex; align-items: center; gap: 12px; font-size: 1.05rem; }
.contact-list .ci { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); background: rgba(0,138,18,.14); color: var(--js-green-glow); flex: none; }
.contact-list .ci svg { width: 20px; height: 20px; }
.contact-list a:hover { color: var(--js-green-glow); }
.service-area h3 { font-size: 1.1rem; margin-bottom: 12px; }
.area-cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.area-cols strong { color: var(--js-green-glow); display: block; margin-bottom: 4px; }
.area-cols p { color: var(--js-gray-light); font-size: .9rem; }
@media (max-width: 760px){ .contact-in { grid-template-columns: 1fr; } .area-cols { grid-template-columns: 1fr; } }

/* form skin on dark */
.contact-form { background: var(--js-charcoal); border: 1px solid #2a2a2a; border-radius: var(--r-lg); padding: clamp(20px,3vw,32px); }
.contact-form .jsform-field label { color: #e6e6e6; }
.contact-form .jsform-input, .contact-form .jsform-select, .contact-form .jsform-textarea { background: var(--js-ink); border-color: #333; color: #fff; }
.contact-form .jsform-hint { color: var(--js-gray-light); }

/* ---- call/text band ---- */
.calltext { background: var(--js-green-deep); background: linear-gradient(90deg, var(--js-green-deep), var(--js-green)); }
.calltext-in { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 28px; flex-wrap: wrap; }
.calltext-in p { font-family: Saira, sans-serif; font-weight: 800; font-size: clamp(1.2rem,2.4vw,1.8rem); color: #fff; }
.calltext-btns { display: flex; gap: 12px; }
.calltext .btn-primary { background: #fff; color: var(--js-green-deep); }
.calltext .btn-ghost { color: #fff; }

/* ---- footer ---- */
.site-footer { background: var(--js-ink); border-top: 1px solid #262626; padding-block: 44px; }
.footer-in { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 28px; align-items: start; }
.footer-brand img { width: 160px; margin-bottom: 12px; }
.footer-brand p, .footer-meta p { color: var(--js-gray-light); font-size: .92rem; margin-top: 6px; }
.footer-meta strong { color: var(--js-green-glow); }
.footer-meta a:hover { color: var(--js-green-glow); }
.footer-legal { text-align: right; color: var(--js-gray-light); font-size: .88rem; }
.footer-legal a { display: inline-block; margin-top: 8px; text-decoration: underline; }
@media (max-width: 760px){ .footer-in { grid-template-columns: 1fr; } .footer-legal { text-align: left; } }