/* ============================================================
   Northgate Green — concept site
   Fictional landscaping company, north Tarrant County.
   Standalone stylesheet: this is a different brand from
   FlowLocal and shares none of its tokens.
   ============================================================ */

:root{
  --forest:   #14281D;   /* deep planting-bed green */
  --forest-2: #0C1A12;
  --lime:     #A8D84A;   /* the accent, used sparingly */
  --lime-ink: #16240A;   /* text that sits on lime */
  --sand:     #F5F2E9;   /* warm page ground */
  --sand-2:   #EAE5D6;
  --paper:    #FFFFFF;
  --ink:      #191C18;
  --ink-2:    #4A5148;
  --mute:     #6E7569;
  --line:     #DDD8C9;

  --display: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;
  --body:    'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 44px);
  --r: 18px;      /* generous radius — the reference leans on soft shapes */
  --r-sm: 10px;
  --pill: 999px;
}

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

html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Native controls, scrollbars and form fields follow the page, not the OS. */
html{ color-scheme: light; }

/* Removes the ~300ms wait the browser holds every tap for, in case it
   turns out to be a double-tap zoom. Straight perceived-speed win. */
a, button, input, select, textarea, label, summary{ touch-action: manipulation; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; transition-duration:.001ms !important;
  }
}

body{
  margin:0; background:var(--sand); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--forest); color:#fff; padding:12px 18px; border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{ left:0; }

:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid var(--lime); outline-offset:2px; border-radius:4px;
}

h1,h2,h3{ font-family:var(--display); font-weight:800; letter-spacing:-.02em; margin:0; }
.hl{ color:var(--lime); }

/* ---------- concept banner ---------- */
.concept{ background:var(--lime-ink); color:#E8F2D6; }
.concept-in{
  display:flex; gap:12px; align-items:baseline; flex-wrap:wrap;
  padding-top:10px; padding-bottom:10px;
}
.concept-tag{
  font-family:var(--display); font-weight:700; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase;
  background:var(--lime); color:var(--lime-ink);
  padding:3px 9px; border-radius:var(--pill); flex:none;
}
.concept p{ margin:0; font-size:.86rem; line-height:1.5; }
.concept a{ color:var(--lime); }

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:100;
  background:rgba(20,40,29,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.head-in{
  display:flex; align-items:center; gap:20px;
  padding-top:12px; padding-bottom:12px;
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; color:#fff; flex:none;
}
.brand-mark{ color:var(--lime); display:inline-flex; }
.brand-name{
  font-family:var(--display); font-weight:800; font-size:1.16rem;
  letter-spacing:-.02em;
}
.brand-name span{ color:var(--lime); }

.nav{ display:flex; gap:4px; margin-left:auto; }
.nav a{
  color:rgba(255,255,255,.82); text-decoration:none;
  font-size:.93rem; font-weight:500;
  padding:9px 15px; border-radius:var(--pill);
  transition:background var(--dur-tap) var(--ease-snap), color var(--dur-tap) var(--ease-snap);
}
.nav a:hover{ background:rgba(255,255,255,.10); color:#fff; }

.head-cta{ display:flex; align-items:center; gap:12px; }
.tel{
  display:inline-flex; align-items:center; gap:7px;
  color:#fff; text-decoration:none; font-weight:600; font-size:.93rem;
  white-space:nowrap;
}
.tel svg{ color:var(--lime); flex:none; }
.tel:hover{ text-decoration:underline; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--body); font-weight:600; font-size:.95rem;
  padding:12px 22px; min-height:46px;
  border-radius:var(--pill); border:0; text-decoration:none; cursor:pointer;
  transition:transform var(--dur-hover) var(--ease), background var(--dur-tap) var(--ease-snap), color var(--dur-tap) var(--ease-snap);
}
.btn-lime{ background:var(--lime); color:var(--lime-ink); }
.btn-lime:hover{ background:#B9E663; transform:translateY(-1px); }
.btn-glass{
  background:rgba(255,255,255,.14); color:#fff;
  border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(6px);
}
.btn-glass:hover{ background:rgba(255,255,255,.22); }
.btn-lg{ padding:15px 28px; min-height:54px; font-size:1rem; }
.btn-block{ width:100%; }

/* ---------- hero ---------- */
.hero{ position:relative; isolation:isolate; overflow:hidden; }
.hero-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-2;
  /* pushed right so the house clears the headline on wide screens */
  object-position:72% center;
}
/* <picture> is inline by default and would collapse the absolute child */
.hero picture, .band picture{ display:contents; }
.hero-shade{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(12,26,18,.92) 0%, rgba(12,26,18,.74) 38%, rgba(12,26,18,.22) 70%),
    linear-gradient(to top, rgba(12,26,18,.70), transparent 45%);
}
.hero-in{
  padding-top:clamp(74px, 12vw, 128px);
  padding-bottom:clamp(74px, 12vw, 128px);
  color:#fff; max-width:none;
}
.eyebrow{
  font-family:var(--display); font-weight:700;
  font-size:.74rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--lime); margin:0 0 20px;
}
.hero h1{
  font-size:clamp(2.5rem, 6.6vw, 4.6rem);
  line-height:1.02; margin:0 0 22px; max-width:16ch;
  text-wrap:balance;
}
.hero .lede{
  font-size:clamp(1.02rem, 2vw, 1.18rem);
  color:rgba(255,255,255,.88); max-width:46ch; margin:0 0 32px;
}
.hero-btns{ display:flex; flex-wrap:wrap; gap:12px; }
.hero-trust{
  display:flex; flex-wrap:wrap; gap:10px 26px;
  list-style:none; margin:38px 0 0; padding:0;
  font-size:.9rem; color:rgba(255,255,255,.80);
}
.hero-trust li{ display:flex; align-items:center; gap:8px; }
.hero-trust li::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--lime); flex:none;
}

/* ---------- sections ---------- */
.sec{ padding:clamp(64px, 9vw, 108px) 0; }
.sec-tint{ background:var(--sand-2); }
.sec-dark{ background:var(--forest); color:#fff; }

.sec-head{ max-width:62ch; margin:0 0 clamp(34px, 5vw, 52px); }
.kicker{
  font-family:var(--display); font-weight:700;
  font-size:.74rem; letter-spacing:.17em; text-transform:uppercase;
  color:#5E8C2E; margin:0 0 14px;
}
.sec-dark .kicker{ color:var(--lime); }
.sec h2{ font-size:clamp(1.9rem, 4.2vw, 3rem); line-height:1.06; text-wrap:balance; }
.sec-lede{ color:var(--ink-2); margin:16px 0 0; font-size:1.04rem; }
.sec-dark .sec-lede{ color:rgba(255,255,255,.80); }

/* ---------- service cards ---------- */
.cards{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:720px){ .cards{ grid-template-columns:repeat(3,1fr); } }
.card{
  background:var(--paper); border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line);
  display:flex; flex-direction:column;
  transition:transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.card:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(20,40,29,.13); }
.card img{ width:100%; height:210px; object-fit:cover; }
.card-b{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card h3{ font-size:1.28rem; }
.card p{ margin:0; color:var(--ink-2); font-size:.96rem; }
.from{ margin-top:auto !important; padding-top:12px; color:var(--mute) !important; font-size:.9rem !important; }
.from strong{ color:var(--ink); font-size:1.02rem; }

/* ---------- band ---------- */
.band{ position:relative; isolation:isolate; overflow:hidden; color:#fff; }
.band-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-2;
}
.band-shade{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(95deg, rgba(12,26,18,.94) 0%, rgba(12,26,18,.80) 48%, rgba(12,26,18,.42) 100%);
}
.band-in{ padding:clamp(64px, 9vw, 104px) var(--gut); }
.band h2{ font-size:clamp(1.9rem, 4.4vw, 3rem); line-height:1.06; margin-bottom:18px; }
.band p{ max-width:52ch; color:rgba(255,255,255,.86); margin:0; }
.stats{
  display:grid; gap:22px; grid-template-columns:1fr;
  margin:38px 0 0; padding-top:30px;
  border-top:1px solid rgba(255,255,255,.20);
}
@media (min-width:660px){ .stats{ grid-template-columns:repeat(3,1fr); } }
.stats div{ display:flex; flex-direction:column; gap:5px; }
.stats dt{
  font-family:var(--display); font-weight:700; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--lime);
}
.stats dd{ margin:0; font-size:1.16rem; font-weight:600; }

/* ---------- work ---------- */
.work-grid{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:800px){
  .work-grid{ grid-template-columns:1.4fr 1fr; grid-template-rows:auto auto; }
  .w-lg{ grid-row:span 2; }
  .w-lg img{ height:100%; min-height:420px; }
}
.work-grid figure{
  margin:0; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.work-grid img{ width:100%; height:230px; object-fit:cover; }
.work-grid figcaption{
  padding:16px 20px 20px; display:flex; flex-direction:column; gap:3px;
  font-size:.95rem;
}
.work-grid figcaption strong{ font-family:var(--display); font-size:1.06rem; }
.work-grid figcaption span{ color:var(--mute); font-size:.9rem; }

/* ---------- why ---------- */
.why-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:32px; grid-template-columns:1fr;
}
@media (min-width:760px){ .why-list{ grid-template-columns:1fr 1fr; gap:44px 56px; } }
.why-list li{ display:flex; flex-direction:column; gap:8px; }
.why-list .n{
  font-family:var(--display); font-weight:800; font-size:.86rem;
  color:var(--lime); background:var(--forest);
  width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:6px;
}
.why-list h3{ font-size:1.2rem; }
.why-list p{ margin:0; color:var(--ink-2); }

/* ---------- contact ---------- */
.contact-grid{ display:grid; gap:44px; grid-template-columns:1fr; }
@media (min-width:860px){ .contact-grid{ grid-template-columns:1fr 1fr; gap:64px; } }
.contact-copy h2{ font-size:clamp(1.9rem,4vw,2.7rem); line-height:1.06; margin-bottom:16px; }
.contact-copy > p{ color:rgba(255,255,255,.84); max-width:44ch; }
.contact-list{
  list-style:none; margin:32px 0 0; padding:0;
  display:flex; flex-direction:column; gap:20px;
}
.contact-list li{ display:flex; flex-direction:column; gap:4px; }
.contact-list span{
  font-family:var(--display); font-weight:700; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--lime);
}
.contact-list a{ color:#fff; font-size:1.18rem; font-weight:600; text-decoration:none; }
.contact-list a:hover{ text-decoration:underline; }
.contact-list p{ margin:0; color:rgba(255,255,255,.84); }

.quote{
  background:var(--paper); color:var(--ink);
  border-radius:var(--r); padding:clamp(24px,3.4vw,34px);
  display:flex; flex-direction:column; gap:16px;
}
.f{ display:flex; flex-direction:column; gap:6px; }
.f2{ display:grid; grid-template-columns:1.6fr 1fr; gap:14px; }
.quote label{ font-weight:600; font-size:.9rem; }
.opt{ color:var(--mute); font-weight:400; }
.quote input, .quote select, .quote textarea{
  font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--sand); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:12px 14px; min-height:48px;
  width:100%;
}
.quote textarea{ resize:vertical; min-height:88px; }
.q-note{ margin:0; font-size:.84rem; color:var(--mute); text-align:center; }
.q-note.is-loud{ color:#8A4B12; font-weight:600; }

/* ---------- footer ---------- */
.foot{ background:var(--forest-2); color:#fff; padding:clamp(46px,6vw,68px) 0 34px; }
.foot-in{
  display:flex; flex-wrap:wrap; gap:26px; justify-content:space-between;
  align-items:flex-start;
}
.brand-foot{ display:inline-flex; align-items:center; gap:10px; margin:0 0 10px; }
.foot-note{ margin:0; color:rgba(255,255,255,.68); font-size:.94rem; }
.foot-cta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.tel-foot{ font-size:1.1rem; }
.foot-legal{
  margin-top:34px; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);
}
.foot-legal p{
  margin:0; font-size:.83rem; line-height:1.6;
  color:rgba(255,255,255,.62); max-width:76ch;
}
.foot-legal strong{ color:rgba(255,255,255,.86); }
.foot-legal a{ color:var(--lime); }

/* ---------- narrow screens ---------- */
@media (max-width:900px){
  .nav{ display:none; }
  .head-in{ gap:12px; }
  .tel span{ display:none; }        /* icon still taps through */
  .tel{ padding:10px; }
}
@media (max-width:520px){
  .f2{ grid-template-columns:1fr; }
  .hero-btns .btn{ width:100%; }
  .card img{ height:180px; }
}