/* ============================================================
   George's Home Works — Florida Craftsman
   Hand-coded by TMN Creative · 2026
   Palette: sage / cream / wood / forest
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  /* Palette - sourced from logo: navy primary + sage secondary + gold tertiary */
  --bg:           #fbfaf6;    /* warm white */
  --bg-alt:       #f3f1ea;    /* warm stone */
  --bg-elev:      #ffffff;
  --ink:          #1d3057;    /* logo navy - primary */
  --ink-2:        #243a68;
  --ink-mid:      #4a5775;
  --ink-soft:     #65718b;
  --ink-faint:    #a0a8bc;
  --line:         #e2dfd4;
  --line-soft:    #ece9de;
  --accent:       #6fa291;    /* logo sage - secondary */
  --accent-2:     #82b6a4;    /* lighter sage */
  --accent-deep:  #44796b;    /* deeper sage */
  --accent-soft:  #e8efeb;    /* sage tint surface */
  --gold:         #b8985a;    /* logo gold - tertiary */
  --gold-2:       #d4b577;    /* lighter gold */
  --gold-soft:    #f4ecd8;    /* gold tint surface */

  /* Type */
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Motion */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Space */
  --rail: clamp(1.25rem, 4vw, 3rem);
  --sec-y: clamp(4rem, 8vw, 7rem);
  --nav-h: 72px;

  /* Radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: clamp(1rem, 0.18vw + 0.94rem, 1.0625rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
  overflow-x: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

::selection{background:var(--accent-soft); color:var(--ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}
:focus:not(:focus-visible){outline:none}

a, button{cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation}
button{border:none; background:none; font:inherit; color:inherit}
img, svg{max-width:100%; display:block; height:auto}

/* ===== TYPE ===== */
h1, h2, h3, h4{
  font-family: var(--sans);
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
h1{
  font-size: clamp(2.25rem, 4vw + 1rem, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
h2{
  font-size: clamp(1.75rem, 1.5vw + 1.1rem, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.025em;
}
h3{
  font-size: clamp(1.2rem, 0.4vw + 1.05rem, 1.4rem);
  font-weight: 600;
}
h4{
  font-size: 1.05rem;
  font-weight: 600;
}
p{ max-width: 70ch }

.serif{ font-family: var(--serif); font-weight: 400; font-style: italic }

/* Eye = mono uppercase label */
.eye{
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--accent-deep);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.eye::before{
  content: '';
  width: 0.5rem;
  height: 1px;
  background: var(--accent);
}

/* ===== SKIP LINK ===== */
.skip-link{
  position: fixed; top: -100px; left: 1rem; z-index: 999;
  background: var(--ink); color: var(--bg);
  padding: 0.65rem 1rem; border-radius: var(--r-sm);
  font-weight: 500;
  transition: top 200ms var(--e-out);
}
.skip-link:focus{ top: 1rem }

/* ===== NAV ===== */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  height: var(--nav-h);
  background: rgba(253, 251, 246, 0.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background 250ms var(--e-out), border-color 250ms var(--e-out), height 250ms var(--e-out);
}
.nav.scrolled{
  height: 60px;
  background: rgba(253, 251, 246, 0.94);
  border-bottom-color: var(--line);
}
.nav-inner{
  max-width: 1280px;
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--rail);
  display: flex;
  align-items: center;
  gap: 2rem;
}
.logo{
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.018em;
  flex-shrink: 0;
  min-width: 0;
}
.logo-mark{
  width: 50px; height: 50px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: width 250ms var(--e-out), height 250ms var(--e-out);
}
.logo-mark img{
  width: 100%; height: 100%;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 1px 0 rgba(29,48,87,0.08));
}
/* Fallback: navy square with white "G" only when logo image fails to load */
.logo-mark.logo-fallback{
  background: var(--ink);
  color: white;
  border-radius: 8px;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
}
.logo-mark.logo-fallback::before{
  content: 'G';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav.scrolled .logo-mark{ width: 44px; height: 44px }
.logo-name{ display: inline-flex; flex-direction: column; line-height: 1.05; min-width: 0 }
.logo-name > span:first-child{ white-space: nowrap }
.logo-sub{
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-links{
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-left: auto;
}
.nav-link{
  color: var(--ink-mid);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  transition: color 200ms var(--e-out);
}
.nav-link:hover, .nav-link.active{ color: var(--accent-deep) }

.nav-actions{
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.nav-phone{
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--r-sm);
  transition: background 200ms var(--e-out);
}
.nav-phone:hover{ background: var(--accent-soft) }
.nav-phone svg{ width: 16px; height: 16px; color: var(--accent) }

.nav-cta{
  background: var(--accent-deep);
  color: white;
  text-decoration: none;
  padding: 0.7rem 1.15rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 200ms var(--e-out), transform 200ms var(--e-out);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.nav-cta:hover{ background: #3a6a5e; transform: translateY(-1px) }

.nav-toggle{
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink);
  margin-left: auto;
}
.nav-toggle svg{ width: 24px; height: 24px }

/* Mobile nav overlay */
.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: var(--rail);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 350ms var(--e-out), visibility 350ms var(--e-out);
}
.mobile-menu.open{
  transform: translateY(0);
  visibility: visible;
}
.mobile-menu-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
}
.mobile-menu-close{
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--ink);
}
.mobile-menu-close svg{ width: 24px; height: 24px }
.mobile-menu-items{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0;
}
.mobile-menu-items a{
  color: var(--ink);
  text-decoration: none;
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  display: block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 350ms var(--e-out), transform 350ms var(--e-out);
}
.mobile-menu.open .mobile-menu-items a{
  opacity: 1;
  transform: translateY(0);
}
.mobile-menu.open .mobile-menu-items a:nth-child(1){ transition-delay: 80ms }
.mobile-menu.open .mobile-menu-items a:nth-child(2){ transition-delay: 130ms }
.mobile-menu.open .mobile-menu-items a:nth-child(3){ transition-delay: 180ms }
.mobile-menu.open .mobile-menu-items a:nth-child(4){ transition-delay: 230ms }
.mobile-menu.open .mobile-menu-items a:nth-child(5){ transition-delay: 280ms }

.mobile-menu-bottom{
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding-bottom: 1.5rem;
}
.mobile-menu-bottom a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.05rem 1rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  min-height: 56px;
}
.mobile-menu-cta{
  background: var(--accent-deep);
  color: white;
}
.mobile-menu-phone{
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.mobile-menu-phone svg{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

@media (max-width: 880px){
  .nav-links, .nav-phone, .nav-cta{ display: none }
  .nav-toggle{ display: inline-flex }
}
@media (max-width: 720px){
  .nav-inner{
    padding: 0 clamp(0.95rem, 4vw, 1.35rem);
    gap: 0.75rem;
  }
  .logo{
    gap: 0.58rem;
    font-size: clamp(1.02rem, 4.8vw, 1.2rem);
  }
  .logo-mark{ width: 48px; height: 48px }
  .nav.scrolled .logo-mark{ width: 42px; height: 42px }
  .logo-sub{
    font-size: clamp(0.48rem, 1.95vw, 0.58rem);
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
  .nav-toggle{
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
  }
  .mobile-menu{
    padding: clamp(1.1rem, 4vw, 1.5rem);
  }
  .mobile-menu-bottom{
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
}
@media (max-width: 370px){
  .logo-sub{ display: none }
  .logo-mark{ width: 44px; height: 44px }
}

/* ===== HERO ===== */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-h) + 3rem) var(--rail) 4rem;
  background: var(--ink);
  color: white;
  overflow: hidden;
}
.hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.68) saturate(1.04);
}
.hero-bg::after{
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(9,18,35,0.86) 0%, rgba(9,18,35,0.68) 44%, rgba(9,18,35,0.34) 72%, rgba(9,18,35,0.58) 100%),
    linear-gradient(180deg, rgba(9,18,35,0.16) 0%, rgba(9,18,35,0.36) 48%, rgba(9,18,35,0.92) 100%);
}
.hero-inner{
  position: relative;
  z-index: 1;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}
.hero-eye{
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}
.hero-eye::before{
  content: '';
  width: 0.6rem;
  height: 1px;
  background: var(--gold-2);
}
.hero h1{
  color: white;
  max-width: 18ch;
  margin-bottom: 1.25rem;
  font-weight: 700;
  text-shadow: 0 3px 24px rgba(0,0,0,0.66), 0 1px 1px rgba(0,0,0,0.28);
}
.hero h1 .em{
  color: #bde2d6;
}
.hero-lead{
  font-size: clamp(1.05rem, 0.4vw + 1rem, 1.2rem);
  color: rgba(255,255,255,0.96);
  max-width: 56ch;
  line-height: 1.55;
  margin-bottom: 2rem;
  font-weight: 500;
  text-shadow: 0 2px 18px rgba(0,0,0,0.62);
}
.hero-ctas{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.35rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 200ms var(--e-out), transform 200ms var(--e-out), border-color 200ms var(--e-out);
  border: 1px solid transparent;
  min-height: 48px;
}
.btn-p{
  background: var(--accent-deep);
  color: white;
  box-shadow: 0 6px 18px rgba(68, 121, 107, 0.35);
}
.btn-p:hover{ background: #3a6a5e; transform: translateY(-1px) }
.btn-s{
  background: transparent;
  color: white;
  border-color: rgba(255,255,255,0.25);
}
.btn-s:hover{ border-color: var(--accent-2); color: var(--accent-2) }
.btn-i{
  background: var(--accent-deep);
  color: white;
}
.btn-i:hover{ background: #3a6a5e; transform: translateY(-1px) }
.btn-text{
  color: var(--accent-deep);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
}
.btn-text:hover{ color: #3a6a5e }
.btn-text svg, .btn svg{ width: 14px; height: 12px; transition: transform 200ms var(--e-out) }
.btn:hover svg, .btn-text:hover svg{ transform: translateX(3px) }

/* Hero ribbon strip - service pills at the bottom */
.hero-ribbon{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  background: var(--accent-deep);
  padding: 0.65rem var(--rail);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  justify-content: center;
}
.hero-ribbon span{ padding: 0.15rem 1rem; position: relative }
.hero-ribbon span:not(:last-child)::after{
  content: '·';
  position: absolute;
  right: -2px;
  color: rgba(255,255,255,0.4);
}

@media (max-width: 720px){
  .hero{
    min-height: 92svh;
    padding: calc(var(--nav-h) + 2.5rem) var(--rail) 6.75rem;
  }
  .hero-bg img{
    object-position: 47% center;
    filter: brightness(0.58) saturate(1.02);
  }
  .hero-bg::after{
    background:
      linear-gradient(90deg, rgba(8,16,30,0.9) 0%, rgba(8,16,30,0.78) 54%, rgba(8,16,30,0.5) 100%),
      linear-gradient(180deg, rgba(8,16,30,0.32) 0%, rgba(8,16,30,0.4) 38%, rgba(8,16,30,0.94) 100%);
  }
  .hero h1{
    font-size: clamp(2.65rem, 12vw, 3.45rem);
    max-width: 10.8ch;
    letter-spacing: -0.045em;
  }
  .hero h1 .em{ color: #cdeade }
  .hero-lead{
    font-size: clamp(1.05rem, 4vw, 1.22rem);
    max-width: 30ch;
  }
  .hero-ctas{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: min(100%, 360px);
  }
  .hero-ctas .btn{
    justify-content: center;
    width: 100%;
  }
}

/* ===== TRUST BAND ===== */
.trust-band{
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  padding: 1.5rem var(--rail);
}
.trust-band-inner{
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-items: center;
}
.trust-item{
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: center;
}
.trust-k{
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-deep);
  letter-spacing: -0.02em;
}
.trust-l{
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-soft);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
@media (max-width: 720px){
  .trust-band-inner{ grid-template-columns: 1fr 1fr; gap: 1.25rem 0.75rem }
}

/* ===== SECTION ===== */
.sec{ padding: var(--sec-y) var(--rail) }
.sec-alt{ background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.sec-dark{ background: var(--ink); color: white }
.sec-dark .eye{ color: var(--accent-2) }
.sec-dark h2{ color: white }
.sec-dark p{ color: rgba(255,255,255,0.85) }

.sec-head{ max-width: 1280px; margin: 0 auto clamp(2.5rem, 4vw, 3.5rem) }
.sec-head .eye{ margin-bottom: 1rem }
.sec-head h1,
.sec-head h2{ margin-bottom: 0.85rem; max-width: 24ch }
.sec-head p{ color: var(--ink-mid); font-size: 1.05rem; max-width: 60ch }
.sec-head.center{ text-align: center; margin-left: auto; margin-right: auto }
.sec-head.center .eye{ justify-content: center }
.sec-head.center h1,
.sec-head.center h2{ margin-left: auto; margin-right: auto }
.sec-head.center p{ margin: 0 auto }

/* ===== STORY (40-yr mechanic) ===== */
.story{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 4vw, 4rem);
  max-width: 1280px;
  margin: 0 auto;
  align-items: center;
}
.story-image{
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--bg-alt);
  position: relative;
}
.story-image img{
  width: 100%; height: 100%;
  object-fit: cover;
}
.story-image::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(74, 131, 105, 0.15) 100%);
  z-index: 1;
}
.story-text .eye{ margin-bottom: 1rem }
.story-text h2{ margin-bottom: 1.5rem }
.story-text p{
  color: var(--ink-mid);
  margin-bottom: 1.1rem;
  line-height: 1.7;
}
.story-text p:last-of-type{ margin-bottom: 2rem }
.story-sig{
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.story-sig-name{
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}
.story-sig-role{
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 880px){
  .story{ grid-template-columns: 1fr; gap: 2rem }
  .story-image{ aspect-ratio: 16/10; max-height: 480px }
}

/* ===== SERVICES (asymmetric) ===== */
.services{
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.svc{
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  position: relative;
  overflow: hidden;
  transition: transform 300ms var(--e-out), border-color 300ms var(--e-out), box-shadow 300ms var(--e-out);
}
.svc::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--e-out);
}
.svc:hover{
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 16px 36px rgba(31, 51, 41, 0.08);
}
.svc:hover::before{ transform: scaleX(1) }
.svc-num{
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent-deep);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.svc h3{ margin-bottom: 0.15rem }
.svc-desc{
  color: var(--ink-mid);
  font-size: 0.96rem;
  line-height: 1.6;
}
.svc-list{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin-top: 0.4rem;
}
.svc-list li{
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.32rem 0.6rem;
  border-radius: 100px;
  font-family: var(--mono);
}
.svc.featured{
  background: var(--ink);
  color: white;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}
.svc.featured h3, .svc.featured h4{ color: white }
.svc.featured .svc-desc{ color: rgba(255,255,255,0.85) }
.svc.featured .svc-list li{
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.9);
}
.svc.featured::before{ background: var(--accent-2) }
.svc.featured .svc-num{ color: var(--accent-2) }
.svc-featured-img{
  margin-top: auto;
  margin-left: clamp(-2.25rem, -2.5vw, -1.5rem);
  margin-right: clamp(-2.25rem, -2.5vw, -1.5rem);
  margin-bottom: clamp(-2.25rem, -2.5vw, -1.5rem);
  height: 240px;
  overflow: hidden;
  border-radius: 0;
  border: 0;
  background: transparent;
  padding: 0;
}
.svc-featured-img img{
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.1);
  transition: transform 700ms var(--e-out);
}
.svc.featured:hover .svc-featured-img img{
  transform: scale(1.04);
}

@media (max-width: 880px){
  .services{ grid-template-columns: 1fr }
  .svc.featured{ grid-row: span 1 }
}

/* ===== GALLERY ===== */
.gallery{
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.gallery-item{
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform 350ms var(--e-out);
}
.gallery-item:hover{ transform: translateY(-3px) }
.gallery-item img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--e-out), filter 350ms var(--e-out);
}
.gallery-item:hover img{ transform: scale(1.04); filter: saturate(1.1) }
.gallery-item.tall{ aspect-ratio: 4/5 }
.gallery-item.wide{ aspect-ratio: 16/10; grid-column: span 2 }
.gallery-cap{
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.2rem;
  background: linear-gradient(0deg, rgba(31,51,41,0.85) 0%, rgba(31,51,41,0) 100%);
  color: white;
  font-size: 0.88rem;
  font-weight: 500;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms var(--e-out), transform 300ms var(--e-out);
}
.gallery-item:hover .gallery-cap{ opacity: 1; transform: translateY(0) }
@media (max-width: 880px){
  .gallery{ grid-template-columns: 1fr 1fr; gap: 0.65rem }
  .gallery-item.wide{ grid-column: span 2 }
}
@media (max-width: 520px){
  .gallery{ grid-template-columns: 1fr }
  .gallery-item.wide{ grid-column: span 1 }
}
.gallery-footer{ text-align: center; margin-top: 2.5rem }

/* ===== COORDINATED TRADES (insert) ===== */
.coord{
  max-width: 1100px;
  margin: 0 auto;
  background: var(--ink);
  color: white;
  padding: clamp(2.5rem, 4vw, 4rem);
  border-radius: var(--r-md);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.5rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.coord::before{
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(74, 131, 105, 0.28) 0%, transparent 60%);
  pointer-events: none;
}
.coord-text{ position: relative; z-index: 1 }
.coord-text .eye{ color: var(--accent-2); margin-bottom: 1rem }
.coord-text h2{ color: white; margin-bottom: 1rem; max-width: 22ch }
.coord-text p{
  color: rgba(255,255,255,0.85);
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
  max-width: 50ch;
}
.coord-list{
  position: relative;
  z-index: 1;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0;
}
.coord-list li{
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.96rem;
  color: rgba(255,255,255,0.92);
  padding: 0.65rem 1rem;
  background: rgba(255,255,255,0.05);
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,0.1);
}
.coord-list svg{
  width: 18px; height: 18px;
  color: var(--accent-2);
  flex-shrink: 0;
}
@media (max-width: 880px){
  .coord{ grid-template-columns: 1fr; gap: 1.5rem }
}

/* ===== FAQ (details) ===== */
.faq-list{
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.faq-item{
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 250ms var(--e-out), box-shadow 250ms var(--e-out);
}
.faq-item:hover{ border-color: var(--accent-2) }
.faq-item summary{
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  user-select: none;
}
.faq-item summary::-webkit-details-marker{ display: none }
.faq-item summary::after{
  content: '';
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23335248' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
  transition: transform 200ms var(--e-out);
}
.faq-item[open] summary::after{ transform: rotate(180deg) }
.faq-item-body{
  padding: 0 1.5rem 1.4rem;
  color: var(--ink-mid);
  line-height: 1.65;
  font-size: 0.96rem;
}

/* ===== CONTACT ===== */
.contact-wrap{
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.contact-info h2{ margin-bottom: 1rem }
.contact-info > p{ color: var(--ink-mid); margin-bottom: 2rem; max-width: 44ch }

.contact-row{
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: color 200ms var(--e-out);
}
.contact-row:last-of-type{ border-bottom: 1px solid var(--line) }
.contact-row:hover{ color: var(--accent-deep) }
.contact-row-static{
  cursor: default;
}
.contact-row-static:hover{ color: var(--ink) }
.contact-icon{
  width: 40px; height: 40px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-icon svg{ width: 18px; height: 18px }
.contact-row-text{ display: flex; flex-direction: column; gap: 0.15rem }
.contact-row-label{
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.contact-row-value{ font-weight: 600; font-size: 1rem }

.contact-form{
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
.field{ margin-bottom: 1.1rem }
.field label{
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-mid);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.field input, .field textarea, .field select{
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color 200ms var(--e-out), background 200ms var(--e-out);
  min-height: 48px;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color: var(--accent);
  background: var(--bg-elev);
  outline: none;
}
.field textarea{ resize: vertical; min-height: 110px }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem }
.contact-form .btn{ width: 100%; justify-content: center; margin-top: 0.5rem }
@media (max-width: 880px){
  .contact-wrap{ grid-template-columns: 1fr; gap: 2rem }
  .field-row{ grid-template-columns: 1fr }
}

/* ===== FINAL CTA ===== */
.fcta{
  padding: var(--sec-y) var(--rail);
  background: var(--ink);
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.fcta::before{
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 160%;
  background: radial-gradient(ellipse at center, rgba(74, 131, 105, 0.22) 0%, transparent 60%);
}
.fcta-inner{ position: relative; z-index: 1; max-width: 760px; margin: 0 auto }
.fcta h2{
  color: white;
  margin-bottom: 1rem;
  font-size: clamp(2rem, 2vw + 1.4rem, 3.25rem);
}
.fcta p{
  color: rgba(255,255,255,0.85);
  font-size: 1.1rem;
  margin: 0 auto 2.25rem;
  max-width: 50ch;
}
.fcta-ctas{ display: inline-flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center }

/* ===== FOOTER ===== */
.foot{
  background: #0f1c16;
  color: rgba(255,255,255,0.72);
  padding: clamp(3rem, 5vw, 4.5rem) var(--rail) 1.5rem;
}
.foot-grid{
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.foot-brand{ display: flex; flex-direction: column; gap: 1.2rem; max-width: 32ch }
.foot-logo{
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
}
.foot-logo img{
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.12));
}
.foot-brand p{
  font-size: 0.92rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.65;
}
.foot-col h5{
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.foot-col a{
  display: block;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  padding: 0.25rem 0;
  transition: color 200ms var(--e-out);
}
.foot-col a:hover{ color: var(--accent-2) }
.foot-bar{
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  flex-wrap: wrap;
  gap: 0.75rem;
}
.foot-bar a{ color: inherit; text-decoration: none }
.foot-bar a:hover{ color: var(--accent-2) }
@media (max-width: 880px){
  .foot-grid{ grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem }
}
@media (max-width: 480px){
  .foot-grid{ grid-template-columns: 1fr }
  .foot-bar{ flex-direction: column; text-align: center; gap: 0.5rem }
}

/* ===== STICKY MOBILE CTA ===== */
.sticky-mobile-cta{
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 70;
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
  padding: 0.65rem 1rem;
  box-shadow: 0 -8px 24px rgba(31,51,41,0.08);
}
.sticky-mobile-cta-inner{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: stretch;
}
.sticky-mobile-cta a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  min-height: 48px;
}
.sticky-mobile-cta-call{
  background: var(--bg-alt);
  color: var(--ink);
}
.sticky-mobile-cta-est{
  background: var(--accent-deep);
  color: white;
}
.sticky-mobile-cta svg{ width: 16px; height: 16px }
@media (max-width: 720px){
  .sticky-mobile-cta{ display: block }
  body{ padding-bottom: 78px }
}

/* ===== REVEAL MOTION ===== */
[data-r]{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--e-out), transform 700ms var(--e-out);
}
[data-r].in{ opacity: 1; transform: translateY(0) }

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-r]{ opacity: 1; transform: none }
}

/* ===== UTIL ===== */
.center{ text-align: center }
.muted{ color: var(--ink-soft) }
.nowrap{ white-space: nowrap }
.hide-mobile{ display: initial }
.hide-desktop{ display: none }
@media (max-width: 720px){
  .hide-mobile{ display: none }
  .hide-desktop{ display: initial }
}