/* Alamo Ranch v2: eliminate empty column space and swap abstract service glyphs
   for meaningful miniature website, search and advertising experiences.
   Scoped to Alamo Ranch only; Helotes and Boerne are unaffected. */
.ngcity:has(.ngar2-hero){--ngar2-lime:#86c442;--ngar2-sage:#e5eedf;--ngar2-gray:#f3f3f3;--ngar2-charcoal:#262626;--ngar2-line:#dedede;}

/* Fill the illustrative browser and search panels so no unused white space appears. */
.ngcity .ngar2-services .ngar2-web-browser{display:flex;flex-direction:column;}
.ngcity .ngar2-services .ngar2-browser-body{flex:1;display:flex;flex-direction:column;min-height:225px;}
.ngcity .ngar2-services .ngar2-web-previews{
  display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:auto;padding-top:22px;padding-right:55px;
}
.ngcity .ngar2-services .ngar2-web-previews span{
  display:flex;flex-direction:column;gap:6px;justify-content:center;min-height:43px;
  padding:8px 7px;background:#f0f3ed;border-radius:5px;
  color:#4b5c48;font-weight:700;font-size:8px;
}
.ngcity .ngar2-services .ngar2-web-previews b{font-size:8px;color:#598a36;}
.ngcity .ngar2-services .ngar2-search-panel{display:flex;flex-direction:column;min-height:0}
.ngcity .ngar2-services .ngar2-search-takeaway{
  margin-top:auto;padding-top:15px;display:flex;flex-wrap:wrap;gap:5px;border-top:1px solid #e5e9e1;
}
.ngcity .ngar2-services .ngar2-search-takeaway span{
  font-size:8px;font-weight:700;color:#466635;background:#e7efdf;
  padding:6px 7px;border-radius:10px;white-space:normal;
}
@media(max-width:650px){
 .ngcity .ngar2-services .ngar2-web-previews{padding-right:62px}
 .ngcity .ngar2-services .ngar2-search-takeaway{gap:4px}
}

/* Give the content the width it can use, instead of left-aligned text with
   unusually large empty areas next to it. */
.ngcity .ngar2-hero {padding-top:112px;padding-bottom:44px;background:#fff;}
.ngcity .ngar2-hero .nght-hero-grid{
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(24px,3vw,42px);
}
.ngcity .ngar2-hero .nght-hero-visual{box-shadow:10px 10px 0 #e5eedf;margin:0}
.ngcity .ngar2-hero .nght-hero-copy>p:not(.nght-kicker){max-width:580px;margin:21px 0}
.ngcity .ngar2-hero .nght-hero-trust{margin-top:23px}
.ngcity .ngar2-intro{padding:62px 0 66px;background:#f3f3f3}
.ngcity .ngar2-intro .nght-intro-grid{display:block}
.ngcity .ngar2-intro .nght-intro-grid>div:first-child{
  display:flex;gap:26px;align-items:flex-end;justify-content:space-between;
  margin-bottom:28px;padding-bottom:23px;border-bottom:1px solid #d9d9d9;
}
.ngcity .ngar2-intro .nght-intro-grid>div:first-child .nght-label{
  max-width:240px;flex:0 0 auto;align-self:flex-start;padding-top:10px;
}
.ngcity .ngar2-intro .nght-intro-grid>div:first-child h2{margin:0;font-size:clamp(37px,3.7vw,56px)}
.ngcity .ngar2-intro .nght-intro-grid>div:last-child{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.8vw,36px);align-items:start;
}
.ngcity .ngar2-intro .nght-intro-grid>div:last-child p{
  font-size:16px;line-height:1.65;color:#444;margin:0;
}

/* The service rows now form a compact two-column editorial composition.
   Each graphic stretches alongside its text instead of leaving empty space. */
.ngcity .ngar2-services{padding:68px 0 72px;background:#fff}
.ngcity .ngar2-services .nght-heading{
  grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:32px;align-items:end;padding-bottom:21px;margin-bottom:0;
  border-bottom:2px solid #333;
}
.ngcity .ngar2-services .nght-heading>p{max-width:390px;font-size:16px;line-height:1.6}
.ngcity .ngar2-services .nght-service-rows article,
.ngcity .ngar2-services .nght-service-rows article:nth-child(2){
  display:grid;grid-template-columns:minmax(230px,310px) minmax(0,1fr);
  grid-template-areas:"visual number" "visual heading" "visual body" "visual deliverables" "visual link";
  gap:12px clamp(25px,3.4vw,48px);
  align-items:start;
  min-height:0;margin:0;padding:34px 0 38px;
  border-bottom:1px solid #dcdcdc;
  background:transparent;
}
.ngcity .ngar2-services .nght-service-rows .nght-num{grid-area:number;margin:0;align-self:end;color:#536d42}
.ngcity .ngar2-services .nght-service-rows h3{
  grid-area:heading;font-size:clamp(27px,2.65vw,40px);line-height:1.1;letter-spacing:-.037em;
  max-width:720px;margin:0;color:#242424;
}
.ngcity .ngar2-services .nght-service-rows p{grid-area:body;font-size:16px;line-height:1.64;margin:0;max-width:none;color:#464646}
.ngcity .ngar2-services .nght-service-rows ul{
  grid-area:deliverables;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 20px;
  margin:1px 0 0;padding:0;list-style:none;
}
.ngcity .ngar2-services .nght-service-rows li{
  position:relative;font-size:14px;line-height:1.48;color:#434a43;margin:0;padding:0 0 0 17px;
}
.ngcity .ngar2-services .nght-service-rows li:before{
  content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
  background:#86c442;border-radius:50%;
}
.ngcity .ngar2-services .nght-service-rows a{
  grid-area:link;margin-top:4px;align-self:start;justify-self:start;
  display:inline-block;font-size:15px;padding-bottom:5px;
  color:#252525;border-bottom:2px solid #86c442;font-weight:700;
}

/* Visuals are bespoke service illustrations, not unicode symbols. */
.ngcity .ngar2-services .ngar2-service-art{
  grid-area:visual;min-width:0;width:100%;height:100%;min-height:345px;
  border:1px solid #dde2d8;border-radius:16px;padding:17px;
  display:flex;flex-direction:column;align-items:stretch;position:relative;
  overflow:hidden;background:#e5eedf;color:#252525;align-self:stretch;
}
.ngcity .ngar2-services .ngar2-service-art--seo{background:#f1f2f1;border-color:#dadada}
.ngcity .ngar2-services .ngar2-service-art--ads{background:#f2f5ef;border-color:#d5e5cc}
.ngcity .ngar2-mock-label{
  display:flex;justify-content:space-between;align-items:center;gap:7px;
  font-size:10px;font-weight:800;letter-spacing:.09em;color:#4e6650;
  padding:0 2px 11px;line-height:1.3;
}
.ngcity .ngar2-mock-label span{display:grid;place-items:center;width:25px;height:25px;border:1px solid #b3c6a5;border-radius:50%;color:#3e5d2b}
.ngcity .ngar2-art-caption{font-size:11px;letter-spacing:.035em;color:#555f51;margin-top:auto;padding-top:14px;font-weight:700}
.ngcity .ngar2-web-browser{
  background:#fff;border:1px solid #d1d3ce;border-radius:10px;
  overflow:hidden;box-shadow:0 8px 22px #42513e24;flex:1;
}
.ngcity .ngar2-browser-bar{
  display:flex;align-items:center;gap:4px;height:30px;padding:0 10px;
  background:#f2f3f2;border-bottom:1px solid #e4e4e4;
}
.ngcity .ngar2-browser-bar i{width:5px;height:5px;background:#b8bdb4;border-radius:50%}
.ngcity .ngar2-browser-bar span{font-size:7px;font-weight:700;letter-spacing:.05em;color:#777;margin:auto}
.ngcity .ngar2-browser-body{padding:18px 16px 28px;position:relative;}
.ngcity .ngar2-browser-menu{display:flex;justify-content:space-between;gap:6px;align-items:center;padding-bottom:21px}
.ngcity .ngar2-browser-menu strong{font-size:11px;color:#242424;letter-spacing:-.04em}
.ngcity .ngar2-browser-menu span{font-size:7px;white-space:nowrap;color:#787878}
.ngcity .ngar2-browser-kicker{font-size:7px;letter-spacing:.11em;font-weight:800;color:#689a3c;margin-bottom:7px}
.ngcity .ngar2-browser-headline{display:block;font-size:clamp(21px,2.6vw,30px);line-height:1.02;letter-spacing:-.05em;color:#262626}
.ngcity .ngar2-browser-rule{margin:11px 0 12px;width:65%;height:3px;background:#e3e5e1;border-radius:5px}
.ngcity .ngar2-browser-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;background:#86c442;border-radius:5px;font-size:9px;font-weight:800;color:#242424}
.ngcity .ngar2-phone-mock{
  position:absolute;right:24px;bottom:43px;background:#262626;
  color:white;border-radius:13px;border:3px solid #454545;
  width:78px;height:130px;box-shadow:0 7px 20px #0003;
  display:flex;flex-direction:column;align-items:center;padding:12px 7px;gap:9px;
}
.ngcity .ngar2-phone-notch{width:20px;height:4px;border-radius:3px;background:#707070}
.ngcity .ngar2-phone-mock i{width:34px;height:5px;background:#86c442;border-radius:2px;margin-top:12px}
.ngcity .ngar2-phone-mock b{font-size:11px;line-height:1.15;text-align:center}
.ngcity .ngar2-phone-btn{font-size:6px;padding:6px 9px;border-radius:3px;background:#86c442;color:#262626;font-weight:800}
.ngcity .ngar2-search-panel{
  background:#fff;border:1px solid #d8dad8;border-radius:12px;
  box-shadow:0 7px 18px #3332;flex:1;padding:14px;
}
.ngcity .ngar2-search-query{
  border:1px solid #d8dfd4;border-radius:99px;
  display:flex;gap:9px;align-items:center;padding:9px 12px;
  font-size:11px;font-weight:700;color:#343c35;background:#fff;white-space:nowrap;
}
.ngcity .ngar2-search-query svg{width:15px;height:15px;stroke:#679647;stroke-width:2;fill:none;flex:none}
.ngcity .ngar2-result-tiny{font-size:9px;color:#777;padding:16px 0 12px}
.ngcity .ngar2-result-url{font-size:9px;color:#53763b;margin-bottom:5px}
.ngcity .ngar2-search-panel strong{font-size:13px;color:#2a2a2a;line-height:1.25;display:block;margin-bottom:7px}
.ngcity .ngar2-search-panel p{font-size:10px!important;line-height:1.45;color:#636a63;margin:0!important}
.ngcity .ngar2-result-divider{border-bottom:1px solid #e9e9e9;margin:17px 0}
.ngcity .ngar2-ads-panel{
  background:#fff;border:1px solid #d6dbd2;border-radius:11px;
  box-shadow:0 7px 19px #3332;flex:1;display:flex;flex-direction:column;padding:15px 13px;
}
.ngcity .ngar2-ads-top{display:flex;align-items:center;gap:7px;color:#343a33}
.ngcity .ngar2-ads-top strong{font-size:12px}
.ngcity .ngar2-ads-top>span:last-child{margin-left:auto;font-size:9px;font-weight:800;color:#648c47}
.ngcity .ngar2-ads-status{width:9px;height:9px;border-radius:50%;background:#86c442}
.ngcity .ngar2-ads-graph{margin:17px 0 11px;flex:1;min-height:110px;position:relative}
.ngcity .ngar2-ads-axis{display:flex;justify-content:space-between;font-size:9px;color:#6f746d;margin-bottom:12px}
.ngcity .ngar2-ads-bars{
  position:absolute;inset:28px 4px 4px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;align-items:end;border-bottom:1px solid #e2e5df;
  background:repeating-linear-gradient(0deg,transparent,transparent 28%,#ededed 28%,#ededed calc(28% + 1px));
}
.ngcity .ngar2-ads-bars i{width:100%;border-radius:4px 4px 0 0;background:#9ac86a;height:40%}
.ngcity .ngar2-ads-bars i:nth-child(2){height:58%;background:#c3dcaf}
.ngcity .ngar2-ads-bars i:nth-child(3){height:49%;background:#91bb67}
.ngcity .ngar2-ads-bars i:nth-child(4){height:77%;background:#80b64c}
.ngcity .ngar2-ads-bars i:nth-child(5){height:69%;background:#6c9c43}
.ngcity .ngar2-ads-bars i:nth-child(6){height:92%;background:#86c442}
.ngcity .ngar2-ads-funnel{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:12px 0 7px;border-top:1px solid #e5e7e3}
.ngcity .ngar2-ads-funnel span{font-size:9px;font-weight:750;color:#3d473b}
.ngcity .ngar2-ads-funnel b{font-size:12px;color:#86ad64}
.ngcity .ngar2-ads-footnote{font-size:8px;color:#737b72}

/* Tighten areas that previously left a large unused half-column. */
.ngcity .ngar2-proof{padding:58px 0;background:#f1f2f1}
.ngcity .ngar2-proof .nght-proof-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,3.4vw,43px);align-items:stretch;
}
.ngcity .ngar2-proof .nght-proof-grid>div:first-child{min-width:0}
.ngcity .ngar2-proof .nght-proof-feature{
  display:flex;flex-direction:column;justify-content:center;min-width:0;
  padding:28px 30px;height:100%;
}
.ngcity .ngar2-proof .nght-proof-feature strong{font-size:clamp(29px,3vw,45px)}
.ngcity .ngar2-local-seo{padding:58px 0;background:#fff}
.ngcity .ngar2-local-seo .nght-local-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:26px;align-items:stretch}
.ngcity .ngar2-local-seo .nght-local-grid>div:last-child{
  align-self:stretch;display:flex;flex-direction:column;justify-content:center;
  padding:29px;
}
.ngcity .ngar2-cta{padding:45px 0;background:#e5eedf}
.ngcity .ngar2-cta .nght-cta-grid{
  width:calc(100% - 80px);max-width:1050px;margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:28px;
  align-items:center;
}
.ngcity .ngar2-cta .nght-cta-grid>div{max-width:660px}
.ngcity .ngar2-cta .nght-cta-grid>a{white-space:normal;justify-self:start;text-align:center}
.ngcity .ngar2-cta h2{font-size:clamp(34px,3.7vw,52px)}
.ngcity .ngar2-map-head{padding-top:30px;padding-bottom:5px}
.ngcity:has(.ngar2-hero) #city-community{padding-top:8px;padding-bottom:40px}
.ngcity:has(.ngar2-hero) #city-community .ngcity-local-showcase{margin-top:15px;gap:20px;align-items:stretch}
.ngcity:has(.ngar2-hero) .ngcity-local-showcase .ngcity-local-visual{min-width:0;align-self:stretch}
.ngcity:has(.ngar2-hero) .ngcity-local-showcase .ngcity-local-visual figcaption{padding:18px 22px}
.ngcity:has(.ngar2-hero) .ngcity-work{padding:48px 0}
.ngcity:has(.ngar2-hero) .ngcity-process{padding:53px 0}
.ngcity:has(.ngar2-hero) .ngcity-faq{padding:50px 0}
.ngcity:has(.ngar2-hero) .ngcity-contact{padding:50px 0}
.ngcity:has(.ngar2-hero) .ngcity-contact .ngcity-contact-grid{
  width:calc(100% - 80px);max-width:1110px;margin-inline:auto;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:26px;align-items:start;
}
.ngcity:has(.ngar2-hero) .ngcity-contact-form{min-width:0;width:100%}
@media(max-width:1000px){
  .ngcity .ngar2-services .nght-service-rows article,
  .ngcity .ngar2-services .nght-service-rows article:nth-child(2){
    grid-template-columns:minmax(210px,260px) minmax(0,1fr);
    column-gap:26px;padding:30px 0 32px;
  }
  .ngcity .ngar2-intro .nght-intro-grid>div:last-child{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ngcity .ngar2-intro .nght-intro-grid>div:last-child p:last-child{grid-column:1/-1;max-width:760px}
  .ngcity .ngar2-services .nght-service-rows ul{grid-template-columns:1fr 1fr;gap:8px 15px}
}
@media(max-width:800px){
  .ngcity .ngar2-hero .nght-hero-grid{grid-template-columns:1fr;gap:25px}
  .ngcity .ngar2-hero .nght-hero-visual{max-width:640px}
  .ngcity .ngar2-intro .nght-intro-grid>div:first-child{
    display:block;margin-bottom:24px;
  }
  .ngcity .ngar2-intro .nght-intro-grid>div:first-child .nght-label{margin-bottom:12px}
  .ngcity .ngar2-proof .nght-proof-grid{grid-template-columns:1fr;gap:24px}
  .ngcity .ngar2-cta .nght-cta-grid{width:calc(100% - 56px);grid-template-columns:1fr;gap:18px}
  .ngcity:has(.ngar2-hero) .ngcity-contact .ngcity-contact-grid{
    width:calc(100% - 56px);max-width:640px;grid-template-columns:1fr;gap:25px;
  }
}
@media(max-width:650px){
  .ngcity .ngar2-hero{padding-top:94px;padding-bottom:35px}
  .ngcity .ngar2-intro{padding:46px 0}
  .ngcity .ngar2-intro .nght-intro-grid>div:last-child{grid-template-columns:1fr;gap:15px}
  .ngcity .ngar2-intro .nght-intro-grid>div:last-child p:last-child{grid-column:auto}
  .ngcity .ngar2-services{padding:46px 0}
  .ngcity .ngar2-services .nght-heading{grid-template-columns:1fr;gap:10px}
  .ngcity .ngar2-services .nght-service-rows article,
  .ngcity .ngar2-services .nght-service-rows article:nth-child(2){
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"number" "heading" "visual" "body" "deliverables" "link";
    gap:14px;padding:28px 0;
  }
  .ngcity .ngar2-services .nght-service-rows .ngar2-service-art{
    min-height:270px;height:285px;
  }
  .ngcity .ngar2-services .nght-service-rows ul{grid-template-columns:1fr;gap:9px}
  .ngcity .ngar2-services .ngar2-browser-headline{font-size:28px}
  .ngcity .ngar2-services .nght-service-rows h3{font-size:clamp(26px,6.2vw,34px)}
  .ngcity .ngar2-proof,.ngcity .ngar2-local-seo{padding:45px 0}
  .ngcity .ngar2-cta{padding:39px 0}
  .ngcity .ngar2-cta .nght-cta-grid{width:calc(100% - 40px)}
  .ngcity:has(.ngar2-hero) .ngcity-contact .ngcity-contact-grid{width:calc(100% - 40px)}
}
@media(prefers-reduced-motion:reduce){
  .ngcity .ngar2-service-art *{animation:none!important;transition:none!important}
}