/* BR Handyman -- shared site styles
   Palette: paper #F4EDDF, ink #1B1815, barn red #A22B22, denim #2D4762, mustard #E9A81B */

@font-face { font-family: "Lemon Milk"; src: url("../fonts/LEMONMILK-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lemon Milk"; src: url("../fonts/LEMONMILK-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Lemon Milk"; src: url("../fonts/LEMONMILK-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }

@keyframes splashIn { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: scale(1); } }
@keyframes splashOut { to { opacity: 0; } }

html { scroll-behavior: smooth; }
body { margin: 0; background: #F4EDDF; color: #1B1815; font-family: Barlow, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: #A22B22; text-decoration: none; }
a:hover { color: #2D4762; }
input, textarea, select, button { font-family: inherit; }
::selection { background: #E9A81B; color: #1B1815; }

/* Splash */
.splash { position: fixed; inset: 0; z-index: 200; background: #F4EDDF; display: grid; place-items: center; pointer-events: none; animation: splashOut 0.55s ease 1s forwards; }
.splash img { width: min(58vw, 440px); animation: splashIn 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.splash.is-hidden { display: none; }

/* Stats strip (home page) */
.stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 620px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Contact section (home page) */
.contact-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; }
@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Header nav links */
.nav-link { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #1B1815; white-space: nowrap; }
.nav-link:hover { color: #A22B22; }
.footer-link { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #1B1815; white-space: nowrap; }
.footer-link:hover { color: #A22B22; }

/* Call Now buttons */
.btn-call-now { display: flex; align-items: center; gap: 10px; background: #A22B22; color: #F4EDDF; border: 2px solid #1B1815; padding: 11px 18px 10px; font-family: 'Lemon Milk', Oswald, sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0.02em; white-space: nowrap; }
.btn-call-now:hover { background: #1B1815; color: #F4EDDF; }

.btn-hero-phone { background: #1B1815; color: #F4EDDF; border: 2px solid #1B1815; padding: 18px 26px 16px; font-family: 'Lemon Milk', Oswald, sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 0.01em; }
.btn-hero-phone:hover { background: #A22B22; color: #F4EDDF; }

.btn-dark { background: #1B1815; color: #F4EDDF; border: 2px solid #1B1815; padding: 14px 20px 12px; font-family: 'Lemon Milk', Oswald, sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 0.02em; text-transform: uppercase; }
.btn-dark:hover { background: #A22B22; color: #F4EDDF; }

.btn-red-outline { background: #A22B22; color: #F4EDDF; border: 2px solid #E9A81B; padding: 18px 26px 16px; font-family: 'Lemon Milk', Oswald, sans-serif; font-weight: 700; font-size: 25px; letter-spacing: 0.01em; display: inline-block; }
.btn-red-outline:hover { background: #F4EDDF; color: #1B1815; }

.btn-submit { background: #1B1815; color: #F4EDDF; border: 2px solid #1B1815; padding: 15px 20px 13px; font-family: 'Lemon Milk', Oswald, sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; }
.btn-submit:hover { background: #A22B22; }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.contact-phone-link { display: inline-block; font-family: 'Lemon Milk', Oswald, sans-serif; font-weight: 700; font-size: clamp(30px, 8vw, 44px); letter-spacing: 0; color: #F4EDDF; border-bottom: 4px solid #E9A81B; line-height: 1.1; }
.contact-phone-link:hover { color: #E9A81B; }

.footer-phone { background: #A22B22; color: #F4EDDF; border: 2px solid #1B1815; padding: 11px 16px 9px; font-family: 'Lemon Milk', Oswald, sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.01em; }
.footer-phone:hover { background: #1B1815; color: #F4EDDF; }

/* Work order cards (home page services grid) */
.order-card { border: 2px solid #1B1815; display: flex; flex-direction: column; cursor: pointer; color: #1B1815; transition: border-color .15s; }
.order-card:hover { border-color: #A22B22; }
.order-card.order-card--red { background: #A22B22; }
.order-card.order-card--paper { background: #FBF7EC; }
.order-card__head { display: flex; align-items: center; justify-content: space-between; background: #1B1815; padding: 8px 14px; }
.order-card__eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em; color: #E9A81B; text-transform: uppercase; }
.order-card__num { font-family: 'Lemon Milk', Oswald, sans-serif; font-weight: 700; font-size: 18px; color: #F4EDDF; }
.order-card__body { padding: 18px 18px 16px; display: flex; flex-direction: column; flex: 1; }
.order-card__title { font-family: 'Lemon Milk', Oswald, sans-serif; font-weight: 600; font-size: 20px; text-transform: uppercase; margin: 0 0 9px; line-height: 1.08; }
.order-card--red .order-card__title { color: #F9F3E6; }
.order-card--paper .order-card__title { color: #1B1815; }
.order-card__desc { font-size: 15.5px; line-height: 1.55; margin: 0 0 16px; }
.order-card--red .order-card__desc { color: #F3E7D6; }
.order-card--paper .order-card__desc { color: #3A342C; }
.order-card__cta { margin-top: auto; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.order-card--red .order-card__cta { color: #E9A81B; }
.order-card--paper .order-card__cta { color: #A22B22; }

/* Gallery figures (recent work + before/after grids) */
.shot-figure { margin: 0; position: relative; border: 2px solid #1B1815; background: #1B1815; transition: border-color .15s; }
.shot-figure.is-clickable { cursor: zoom-in; }
.shot-figure.is-clickable:hover { border-color: #A22B22; }
.shot-figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.shot-figure__label { position: absolute; left: 0; bottom: 0; background: #E9A81B; border-top: 2px solid #1B1815; border-right: 2px solid #1B1815; padding: 6px 12px 5px; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #1B1815; }

/* Filter bar buttons (before & after page) */
.filter-btn { background: #FBF7EC; border: 2px solid #1B1815; padding: 9px 14px 8px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #1B1815; cursor: pointer; }
.filter-btn:hover { background: #E9A81B; }
.filter-btn.is-active { background: #E9A81B; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(27, 24, 21, 0.92); display: none; align-items: center; justify-content: center; padding: 48px; cursor: zoom-out; }
.lightbox.is-open { display: flex; }
.lightbox__frame { margin: 0; max-width: 1000px; width: 100%; background: #FBF7EC; border: 2px solid #E9A81B; }
.lightbox__frame img { display: block; width: 100%; max-height: 74vh; object-fit: contain; background: #1B1815; border-bottom: 2px solid #1B1815; }
.lightbox__caption { padding: 16px 20px 18px; display: flex; align-items: baseline; gap: 20px; }
.lightbox__title { font-family: 'Lemon Milk', Oswald, sans-serif; font-weight: 600; font-size: 20px; text-transform: uppercase; line-height: 1.1; }
.lightbox__hint { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: #6B6255; margin-left: auto; letter-spacing: 0.1em; text-transform: uppercase; }

/* Google review card links */
.gr-btn-primary { background: #1A73E8; color: #FFFFFF; border-radius: 4px; padding: 11px 18px; font-family: Arial, Helvetica, sans-serif; font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.gr-btn-primary:hover { background: #1557B0; color: #FFFFFF; }
.gr-btn-secondary { border: 1px solid #DADCE0; border-radius: 4px; padding: 11px 18px; font-family: Arial, Helvetica, sans-serif; font-size: 14.5px; font-weight: 700; color: #1A73E8; white-space: nowrap; }
.gr-btn-secondary:hover { background: #F1F6FE; color: #1A73E8; }

@media (max-width: 640px) {
  .hide-mobile { display: none; }
}