/* H&H Creations — landing page styles
   Conventions:
   - Shared component classes for repeated blocks (cards, stats, features, fields).
   - Unique sections are styled by their #id, so they need no extra markup.
   - Dynamic, per-instance values (carousel opacity, status color) stay inline in the HTML. */

:root{
  --gold:#e7bd45;
  --bg:#121414;
  --card:#1a1c1c;
  --panel:#15233c;
  --field:#10192a;
  --ink:#e6e4df;
  --ink-dim:#a8a293;
  --heading:#f5f3ee;
  --g16:rgba(231,189,69,.16);
  --g18:rgba(231,189,69,.18);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Montserrat',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; }

.ms{ font-family:'Material Symbols Outlined'; font-weight:normal; font-style:normal; line-height:1; letter-spacing:normal; text-transform:none; white-space:nowrap; direction:ltr; -webkit-font-smoothing:antialiased; }

/* Shared layout + typography ---------------------------------------------- */
.wrap{ max-width:1240px; margin:0 auto; padding:0 28px; }
.section{ padding:104px 0; }
.eyebrow{ color:var(--gold); font-weight:700; font-size:12px; letter-spacing:.32em; text-transform:uppercase; }
.h2{ margin:14px 0 0; font-weight:900; font-size:clamp(30px,4vw,44px); line-height:1.08; letter-spacing:-.01em; text-transform:uppercase; color:var(--heading); }

/* Buttons ----------------------------------------------------------------- */
.qbtn{ background:var(--gold); color:#1a1500; text-decoration:none; font-weight:800; text-transform:uppercase; transition:filter .2s, transform .1s; }
.qbtn:hover{ filter:brightness(1.08); }
.qbtn:active{ transform:scale(.97); }
.ghost{ border:2px solid var(--gold); color:var(--gold); text-decoration:none; font-weight:800; text-transform:uppercase; transition:background .2s; }
.ghost:hover{ background:rgba(231,189,69,.12); }

/* Header / nav ------------------------------------------------------------ */
.site-header{ position:fixed; top:0; left:0; z-index:60; width:100%; background:rgba(16,18,18,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--g16); }
/* Fixed header floats over the hero, which now starts at 0. Offset the other
   in-page anchors so their headings clear the header; #top scrolls to 0. */
#services, #work, #about, #contact{ scroll-margin-top:79px; }
.site-header .bar{ display:flex; justify-content:space-between; align-items:center; height:78px; }
.brand{ display:flex; align-items:center; gap:13px; text-decoration:none; }
.brand-logo{ height:56px; width:56px; object-fit:contain; }
.brand-name{ font-weight:900; font-size:19px; letter-spacing:.04em; text-transform:uppercase; color:#f5f3ee; }
.nav{ display:flex; align-items:center; gap:34px; }
.navlink{ position:relative; text-decoration:none; color:#c9c4b6; font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; }
.navlink::after{ content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--gold); transition:width .25s ease; }
.navlink:hover::after{ width:100%; }
.header-actions{ display:flex; align-items:center; gap:22px; }
.header-phone{ text-decoration:none; color:var(--gold); font-weight:800; font-size:16px; }
.site-header .qbtn{ padding:13px 24px; font-size:12px; letter-spacing:.14em; }

/* Hero -------------------------------------------------------------------- */
.hero{ position:relative; min-height:90vh; display:flex; align-items:center; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-photo{ position:absolute; inset:0; background:url('assets/roof-sunset.jpeg') center 62%/cover no-repeat; animation:heroZoom 24s ease-in-out infinite alternate; }
.hero-shade-h{ position:absolute; inset:0; background:linear-gradient(90deg,#0c0f16 0%,rgba(12,15,22,.84) 44%,rgba(12,15,22,.28) 78%,rgba(12,15,22,.5) 100%); }
.hero-shade-v{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(12,15,22,.55) 0%,transparent 28%,transparent 58%,rgba(12,15,22,.9) 100%); }
.hero .wrap{ position:relative; z-index:2; width:100%; }
.hero-inner{ max-width:700px; }
.hero-kicker{ display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.hero-kicker .rule{ width:38px; height:2px; background:var(--gold); }
.hero-kicker span:last-child{ color:var(--gold); font-weight:700; font-size:13px; letter-spacing:.28em; text-transform:uppercase; }
.hero h1{ margin:0; font-weight:900; font-size:clamp(44px,6.6vw,80px); line-height:1.0; letter-spacing:-.02em; text-transform:uppercase; color:#f7f5ef; }
.hero h1 span{ color:var(--gold); }
.hero p{ margin:28px 0 0; font-size:18px; line-height:1.65; color:#cfcabd; max-width:540px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:40px; }
.hero-cta .qbtn{ padding:17px 38px; font-size:13px; letter-spacing:.14em; }
.hero-cta .ghost{ padding:15px 38px; font-size:13px; letter-spacing:.14em; }
@keyframes heroZoom{ from{ transform:scale(1.05); } to{ transform:scale(1.15); } }

/* Stats bar --------------------------------------------------------------- */
.stats{ background:var(--panel); border-top:1px solid rgba(231,189,69,.2); border-bottom:1px solid rgba(231,189,69,.2); }
.stats .wrap{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:32px 18px; text-align:center; }
.stat-num{ font-weight:900; font-size:34px; color:var(--gold); }
.stat-label{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#aeb6c6; margin-top:6px; }
/* Snap between 4-up, 2x2, and stacked — never an orphaned cell. Each range is
   exclusive, and dividers are drawn only between cells (left between columns,
   top between rows), so no border ever hangs off an outer edge. */
@media(min-width:861px){
  .stat:not(:nth-child(4n+1)){ border-left:1px solid var(--g16); }
}
@media(min-width:521px) and (max-width:860px){
  .stats .wrap{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2n){ border-left:1px solid var(--g16); }
  .stat:nth-child(n+3){ border-top:1px solid var(--g16); }
}
@media(max-width:520px){
  .stats .wrap{ grid-template-columns:1fr; }
  .stat:nth-child(n+2){ border-top:1px solid var(--g16); }
}

/* Services ---------------------------------------------------------------- */
#services{ background:var(--bg); }
.section-head{ margin-bottom:54px; max-width:640px; }
.section-head .rule{ width:62px; height:3px; background:var(--gold); margin-top:22px; }
.svc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:24px; }
.svc{ background:var(--card); border:1px solid var(--g18); overflow:hidden; transition:transform .3s ease, border-color .3s ease; }
.svc:hover{ transform:translateY(-6px); border-color:var(--gold) !important; }
.svc-media{ height:188px; overflow:hidden; }
.svc-img{ height:100%; background-position:center; background-size:cover; background-repeat:no-repeat; transition:transform .5s ease; }
.svc:hover .svc-img{ transform:scale(1.07); }
.svc-body{ padding:28px 26px 32px; }
.svc-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.svc-head .ms{ font-size:26px; color:var(--gold); }
.svc-head h3{ margin:0; font-weight:800; font-size:20px; letter-spacing:.02em; text-transform:uppercase; color:var(--heading); }
.svc-body p{ margin:0; font-size:15px; line-height:1.6; color:var(--ink-dim); }
/* per-card focal points */
.svc-img.roof{ background-image:url('assets/roof-skylight.jpeg'); }
.svc-img.deck{ background-image:url('assets/deck-sunset.jpeg'); background-position:center 40%; }
.svc-img.remodel{ background-image:url('assets/remodel-bath.jpeg'); background-position:center 70%; }
.svc-img.fence{ background-image:url('assets/fence-cedar.jpeg'); background-position:center 55%; }

/* Work / gallery ---------------------------------------------------------- */
#work{ background:#0e1118; border-top:1px solid rgba(231,189,69,.14); }
.work-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:44px; }
.work-head > div:first-child{ max-width:560px; }
.work-count{ font-weight:800; font-size:15px; color:#aeb6c6; letter-spacing:.06em; }
.work-count b{ color:var(--gold); font-size:22px; font-weight:800; }
.gallery{ position:relative; background:#070a0f; border:1px solid var(--g18); }
.gallery-stage{ position:relative; width:100%; height:clamp(360px,62vh,640px); overflow:hidden; }
.gallery-stage > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.gallery-shade{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(7,10,15,.9) 100%); }
.gallery-caption{ position:absolute; left:0; bottom:0; padding:30px 34px; }
.gallery-tag{ display:inline-block; background:var(--gold); color:#10182a; font-weight:800; font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:6px 12px; margin-bottom:12px; }
.gallery-caption h3{ margin:0; font-weight:800; font-size:clamp(22px,3vw,32px); letter-spacing:.01em; text-transform:uppercase; color:#fff; }
.arrow{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; display:flex; align-items:center; justify-content:center; background:rgba(7,10,15,.6); border:1px solid rgba(255,255,255,.25); color:#fff; cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.arrow .ms{ font-size:30px; }
.arrow:hover{ background:var(--gold); color:#10182a; border-color:var(--gold); }
.arrow.prev{ left:18px; }
.arrow.next{ right:18px; }
.thumbs{ display:flex; gap:10px; padding:16px; overflow-x:auto; background:#0a0d12; border-top:1px solid rgba(231,189,69,.14); }
.thumb{ flex:0 0 auto; width:104px; height:70px; padding:0; border:none; cursor:pointer; overflow:hidden; transition:opacity .25s, box-shadow .25s; }
.thumb:hover{ opacity:1 !important; }
.thumb img{ width:100%; height:100%; object-fit:cover; }

/* About ------------------------------------------------------------------- */
#about{ background:var(--bg); }
#about .wrap{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:60px; align-items:center; }
.about-copy{ margin:24px 0 0; font-size:17px; line-height:1.7; color:#bdb8aa; }
.features{ display:flex; flex-direction:column; gap:22px; margin-top:34px; }
.feature{ display:flex; gap:18px; align-items:flex-start; }
.feature-ico{ flex:0 0 auto; width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:rgba(231,189,69,.12); border:1px solid rgba(231,189,69,.3); }
.feature-ico .ms{ color:var(--gold); font-size:24px; }
.feature h4{ margin:0 0 4px; font-weight:800; font-size:16px; text-transform:uppercase; letter-spacing:.04em; color:#f0eee7; }
.feature p{ margin:0; font-size:14px; line-height:1.55; color:var(--ink-dim); }
.about-photo{ position:relative; }
.about-photo .corner{ position:absolute; width:90px; height:90px; }
.about-photo .corner.tl{ top:-16px; left:-16px; border-top:3px solid var(--gold); border-left:3px solid var(--gold); }
.about-photo .corner.br{ bottom:-16px; right:-16px; border-bottom:3px solid var(--gold); border-right:3px solid var(--gold); }
.about-photo img{ width:100%; height:560px; object-fit:cover; }

/* Contact ----------------------------------------------------------------- */
#contact{ background:#0c0f16; border-top:1px solid var(--g16); }
#contact .wrap{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:54px; align-items:start; }
.contact-h2{ margin:14px 0 0; font-weight:900; font-size:clamp(32px,4.4vw,52px); line-height:1.04; letter-spacing:-.01em; text-transform:uppercase; color:var(--heading); }
.contact-h2 span{ color:var(--gold); }
.contact-copy{ margin:22px 0 0; font-size:17px; line-height:1.7; color:#bdb8aa; max-width:440px; }
.contact-list{ display:flex; flex-direction:column; gap:8px; margin-top:38px; }
.ctrow{ display:flex; align-items:center; gap:20px; text-decoration:none; padding:14px 0; }
.ctico{ flex:0 0 auto; width:54px; height:54px; display:flex; align-items:center; justify-content:center; border:1px solid var(--gold); color:var(--gold); font-size:24px; transition:background .2s, color .2s; }
.ctrow:hover .ctico{ background:var(--gold); color:#10182a; }
.ctrow .label{ display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#8b93a4; font-weight:700; }
.ctrow .value{ display:block; font-size:22px; font-weight:800; color:#f3f1ea; margin-top:3px; }

.contact-form{ background:var(--panel); padding:40px 38px; border-top:4px solid var(--gold); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-top:18px; }
.form-row .field{ margin-top:0; }
.flabel{ display:block; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.fld{ width:100%; background:var(--field); border:1px solid rgba(255,255,255,.14); color:#fff; padding:14px; font-family:inherit; font-size:15px; transition:border-color .2s, background .2s; }
.fld:focus{ outline:none; border-color:var(--gold); background:#1f2430; }
.fld::placeholder{ color:#6f6a5d; }
.fld[aria-invalid="true"]{ border-color:#e5654a !important; background:#2a1714 !important; }
textarea.fld{ resize:vertical; }
.field-error{ margin:7px 0 0; font-size:12px; font-weight:600; color:#ef7a5f; }
.contact-form .qbtn{ width:100%; margin-top:24px; border:none; cursor:pointer; font-family:inherit; font-size:13px; letter-spacing:.16em; padding:18px; }
.form-status{ margin:16px 0 0; text-align:center; font-size:14px; font-weight:600; }

/* Footer ------------------------------------------------------------------ */
.site-footer{ background:#0a0c0c; padding:72px 0 36px; border-top:4px solid var(--gold); }
.footer-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:44px; }
.footer-brand{ display:flex; align-items:center; gap:14px; }
.footer-brand img{ height:72px; width:72px; object-fit:contain; }
.footer-brand span{ font-weight:900; font-size:20px; letter-spacing:.04em; text-transform:uppercase; color:var(--heading); }
.footer-blurb{ margin:22px 0 0; font-size:14px; line-height:1.7; color:#8e887a; max-width:340px; }
.footer-col h4{ margin:0 0 18px; font-weight:800; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.footer-links{ display:flex; flex-direction:column; gap:12px; }
.footer-links a{ text-decoration:none; color:#aaa496; font-size:15px; }
.footer-contact{ display:flex; flex-direction:column; gap:14px; }
.footer-contact a, .footer-contact span{ display:flex; gap:12px; align-items:center; text-decoration:none; color:#aaa496; font-size:15px; }
.footer-contact .ms{ color:var(--gold); font-size:20px; }
.footer-legal{ margin:48px auto 0; max-width:1240px; padding:24px 28px 0; border-top:1px solid rgba(255,255,255,.07); }
.footer-legal p{ margin:0; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#6d685c; }

/* Responsive -------------------------------------------------------------- */
@media(max-width:860px){ .hide-mob{ display:none !important; } }
/* Stack the contact info + form into one column before the form gets cramped,
   so the form spans the full container width. */
@media(max-width:900px){ #contact .wrap{ grid-template-columns:1fr; } }
/* On narrow phones, drop name/phone to a single column too. */
@media(max-width:480px){ .form-row{ grid-template-columns:1fr; } }