/* New Era "Products we install": one component, spliced into every public page by add-brand-products.py.
   A full-bleed section over a slow macro loop of gold and black metallic epoxy, with the manufacturers' logos on
   dark glass plates edged in bevelled gold. Desktop runs two rows drifting in opposite directions; a phone runs one
   row of large plates that drifts and swipes. Hover or tap lifts a plate and tilts it; the plate stays dark glass,
   its gold edge brightens with a soft glow, one light sweep crosses it and the logo brightens a touch. Each track holds its set twice and slides exactly one set width, so the loop
   has no seam. Motion is transform and background only. Reduced motion: the poster stands still and the plates sit
   in one static row. brand-products.js is the single place that plays the clip, tilts the plates and drives the
   phone row. */
.ne-prod{position:relative;isolation:isolate;overflow:clip;background:var(--black,#050505);padding:clamp(76px,9vw,132px) 0 clamp(64px,8vw,112px);border-block:1px solid rgba(253,190,0,.42)}
.ne-prod-media{position:absolute;inset:0;z-index:-1;pointer-events:none;background:#070605 center/cover no-repeat}
.ne-prod-vid{display:block;width:100%;height:100%;object-fit:cover}
.ne-prod-media::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 70% at 50% 50%,transparent 30%,rgba(5,5,5,.55) 100%),
  linear-gradient(180deg,rgba(5,5,5,.94) 0%,rgba(5,5,5,.66) 26%,rgba(5,5,5,.42) 52%,rgba(5,5,5,.6) 78%,rgba(5,5,5,.95) 100%)}

.ne-prod-head{position:relative;text-align:center;margin-bottom:clamp(38px,4.6vw,64px)}
.ne-prod-kick{display:inline-flex;align-items:center;gap:12px;font-family:'Space Mono',monospace;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold,#fdbe00);line-height:1.6}
.ne-prod-kick::before,.ne-prod-kick::after{content:"";flex:none;width:28px;height:1px;background:var(--gold,#fdbe00);box-shadow:0 0 8px var(--gold,#fdbe00)}
.ne-prod-head h2{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(3rem,6.4vw,5.9rem);line-height:.94;margin:16px auto 20px;max-width:none;color:var(--pearl,#f6f3ec);overflow-wrap:break-word;text-wrap:balance;text-shadow:0 4px 34px rgba(0,0,0,.7)}
.ne-prod-head h2 span{display:block;color:var(--gold,#fdbe00);-webkit-text-fill-color:var(--gold,#fdbe00);background:none}
.ne-prod-head p{margin:0 auto;max-width:620px;color:#d6cfc2;font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.6;text-shadow:0 1px 14px rgba(0,0,0,.8)}

.ne-prod-rows{display:grid;gap:clamp(14px,1.6vw,24px)}
.ne-prod-row{position:relative;overflow-x:clip;overflow-y:visible;padding-block:18px;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ne-prod-track{display:flex;width:max-content}
/* One ribbon at every width, so each brand draws once. On desktop brand-products.js moves the first plate to the end as it
   leaves, and one set of seven is wider than the screen plus a plate from 820 to 2560, so the loop needs no copy. */
.ne-prod-row-b{display:none}
@media(min-width:701px){.ne-prod-row-a .ne-prod-set[aria-hidden]{display:none}}
.ne-prod-set{display:flex;flex:none;list-style:none;margin:0;padding:0}

.ne-plate{--pw:clamp(220px,19vw,420px);--rx:5deg;--ry:-7deg;position:relative;flex:none;display:grid;place-items:center;width:var(--pw);aspect-ratio:16/9;margin:0 clamp(14px,1.6vw,24px) 0 0;border:2px solid transparent;border-radius:16px;overflow:hidden;container-type:inline-size;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),transparent 42%) padding-box,
    linear-gradient(160deg,rgba(40,35,27,.8),rgba(9,8,7,.9) 56%,rgba(24,20,14,.86)) padding-box,
    linear-gradient(140deg,#fff2bd,#d9a106 20%,#6e4e00 46%,#fdbe00 68%,#8a6200 88%,#ffe07a) border-box;
  box-shadow:inset 0 1px 0 rgba(255,238,178,.32),inset 0 -1px 0 rgba(0,0,0,.75),inset 0 0 0 1px rgba(0,0,0,.4),0 22px 44px -20px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.5);
  transform:perspective(900px) translate3d(0,0,0);transition:transform .5s cubic-bezier(.2,.75,.2,1),box-shadow .5s}
.ne-plate::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:38%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,244,205,.06) 30%,rgba(255,250,232,.32) 50%,rgba(255,244,205,.06) 70%,transparent);transform:translate3d(-170%,0,0) skewX(-18deg);animation:neSweep 8.4s cubic-bezier(.45,0,.25,1) infinite;animation-delay:calc(var(--i) * 1.2s)}
@keyframes neSweep{0%{transform:translate3d(-170%,0,0) skewX(-18deg)}13%{transform:translate3d(330%,0,0) skewX(-18deg)}100%{transform:translate3d(330%,0,0) skewX(-18deg)}}
@keyframes neSweepOnce{from{transform:translate3d(-170%,0,0) skewX(-18deg)}to{transform:translate3d(330%,0,0) skewX(-18deg)}}
.ne-plate>img{grid-area:1/1;position:relative;z-index:1;display:block;width:calc(var(--f) * 100cqi);height:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));transition:filter .4s,transform .5s cubic-bezier(.2,.75,.2,1)}
.ne-plate:hover,.ne-plate.is-on{transform:perspective(900px) translate3d(0,-10px,0) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.04);z-index:2;
  background:
    linear-gradient(180deg,rgba(255,255,255,.1),transparent 42%) padding-box,
    linear-gradient(160deg,rgba(40,35,27,.8),rgba(9,8,7,.9) 56%,rgba(24,20,14,.86)) padding-box,
    linear-gradient(140deg,#fffbe6,#ffd23f 20%,#b98a10 46%,#ffe27a 68%,#e0a90c 88%,#fff3c4) border-box;
  box-shadow:inset 0 1px 0 rgba(255,240,190,.5),inset 0 0 0 1px rgba(255,214,90,.38),0 0 0 1px rgba(253,190,0,.7),0 30px 60px -22px rgba(0,0,0,.95),0 0 30px -4px rgba(253,190,0,.55),0 0 80px -18px rgba(253,190,0,.38)}
.ne-plate:hover::after,.ne-plate.is-on::after{animation:neSweepOnce 1.05s cubic-bezier(.45,0,.25,1) 1 both}
.ne-plate:hover>img,.ne-plate.is-on>img{filter:brightness(1.12) drop-shadow(0 0 12px rgba(255,240,200,.3)) drop-shadow(0 2px 10px rgba(0,0,0,.55));transform:scale(1.03)}

.ne-prod-foot{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;margin-top:clamp(30px,3.6vw,48px)}
.ne-prod-also{margin:0;color:#b9b1a3;font-size:.98rem;line-height:1.5;text-shadow:0 1px 12px rgba(0,0,0,.8)}
.ne-prod-also b{color:#eee7d9;font-weight:600}
.ne-prod-foot .btn{margin:0}

@media(max-width:520px){.ne-prod-kick::before,.ne-prod-kick::after{display:none}.ne-prod-kick{letter-spacing:.14em}}
/* Phone: one row of large plates the reader can swipe, nudged along by brand-products.js. */
@media(max-width:700px){
  .ne-prod-row-b{display:none}
  .ne-prod-row-a{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;padding-block:22px 26px;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .ne-prod-row-a::-webkit-scrollbar{display:none}
  .ne-prod-row-a .ne-prod-track{animation:none}
  .ne-plate{--pw:min(68vw,300px);margin-right:14px}
}
@media(prefers-reduced-motion:reduce){
  .ne-plate::after{animation:none;display:none}
  .ne-plate{transition:box-shadow .3s}
  .ne-plate:hover,.ne-plate.is-on{transform:none}
  .ne-prod-media{background-image:url(/assets/img/brand-pour-poster.jpg)}
}
@media(prefers-reduced-motion:reduce) and (min-width:701px){
  .ne-prod-row-b,.ne-prod-row-a .ne-prod-set[aria-hidden]{display:none}
  .ne-prod-row-a{-webkit-mask:none;mask:none}
  .ne-prod-row-a .ne-prod-track{animation:none;width:auto;justify-content:center}
  .ne-prod-row-a .ne-prod-set{flex-wrap:wrap;justify-content:center;gap:18px}
  .ne-prod-row-a .ne-plate{margin:0}
}
/* On a phone the floating call buttons own the right edge, so the line under the ribbon stops short of them. */
@media(max-width:560px){.ne-prod-also{padding-right:calc(var(--wk-fab,66px) + 8px)}}

/* Site-wide layout consistency (ruling 79). This file is the one stylesheet every public page loads, after its own inline
   styles, so a fix here reaches every template at once. */

/* Sticky rails, sticky nav and sticky band videos. With html{overflow-x:clip}, a body set to overflow-x:hidden computes
   overflow-y:auto and becomes a scroll container that never scrolls, so every position:sticky inside it pinned to the body
   and never stuck: the "Where we work" heading scrolled away and left the column beside the 30-community map empty.
   clip trims sideways overflow the same way without making body a scroll container. */
body{overflow-x:clip}

/* Section headings line up the same way on every section. The centred sections set this inline; the five that did not
   (what we do, industries, transformation, method, ecosystem) and the outro band sat left between centred neighbours. */
.sec-head{text-align:center;margin-left:auto;margin-right:auto}
.sec-head p{margin-left:auto;margin-right:auto}
.band .band-in{text-align:center}
.band .band-in>p{margin-left:auto;margin-right:auto}

/* Two plain sections in a row stacked 76px of bottom padding on 76px of top padding, a dead band under the service
   cards with nothing in it. The second one keeps a short lead-in instead. */
section.wrap:not(.bv)+section.wrap:not(.bv){padding-top:24px}

/* FAQ answer actions are real buttons on every template: the homepage and polishing (a.faq-cta), the FAQ page
   (.faq-cta-btn, .faq-cta-call), every city and service page (.fa-btn), the channel page (.ch-fq-cta .btn) and flakes.
   They were 11.8px to 13.5px underlined or pill links. Now body size with a 48px tap target, in the site button styles:
   gold for the main action, gold outline for the second. City pages keep their own call, quote and WhatsApp colours. */
details a.faq-cta,.faq-cta a.faq-cta-btn,.faq-cta a.faq-cta-call,.fa-cta a.fa-btn,.ch-fq-cta a.btn,.fl-faq .ans a[href="#contact"]{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:13px 24px;border-radius:60px;box-sizing:border-box;font-family:Manrope,system-ui,sans-serif;font-size:1rem;font-weight:800;font-style:normal;letter-spacing:.005em;text-transform:none;line-height:1.2;text-decoration:none;text-align:center;white-space:normal;transition:transform .25s,box-shadow .25s,background .25s,border-color .25s}
details a.faq-cta:not(.faq-cta-call),.faq-cta a.faq-cta-btn,.ch-fq-cta a.btn:not(.ghost),.fl-faq .ans a[href="#contact"]{background:var(--gold,#FDBE00);color:#000;border:0;box-shadow:0 6px 22px rgba(253,190,0,.28)}
details a.faq-cta:not(.faq-cta-call):hover,.faq-cta a.faq-cta-btn:hover,.ch-fq-cta a.btn:not(.ghost):hover,.fl-faq .ans a[href="#contact"]:hover{background:var(--gold-hi,#FFD84D);transform:translateY(-2px);box-shadow:0 10px 30px rgba(253,190,0,.42)}
details a.faq-cta.faq-cta-call,.faq-cta a.faq-cta-call,.ch-fq-cta a.btn.ghost{background:transparent;color:var(--gold,#FDBE00);border:1px solid rgba(253,190,0,.6);box-shadow:none}
details a.faq-cta.faq-cta-call:hover,.faq-cta a.faq-cta-call:hover,.ch-fq-cta a.btn.ghost:hover{background:rgba(253,190,0,.08);border-color:var(--gold,#FDBE00);color:var(--gold,#FDBE00);transform:translateY(-2px)}
details a.faq-cta{margin:4px 0 16px 16px}
details a.faq-cta+a.faq-cta{margin-left:10px}
.fl-faq .ans a[href="#contact"]{display:flex;width:fit-content;margin-top:14px}
@media(max-width:560px){
  details a.faq-cta,details a.faq-cta+a.faq-cta{display:flex;margin:0 16px 10px}
  details a.faq-cta:last-of-type{margin-bottom:16px}
  div.faq-cta,.fa-cta,.ch-fq-cta{flex-direction:column;align-items:stretch}
  div.faq-cta a,.fa-cta a.fa-btn,.ch-fq-cta a.btn,.fl-faq .ans a[href="#contact"]{width:100%}
}

/* Gold estimate band between tablet and full desktop. Three columns left the heading about 300px wide, wrapping to four
   lines, beside a 200px photo, with empty gold above and below both. From 700px to 1279px the photo fills the left
   column at the band height, the heading takes the rest of the width, and the two buttons sit in a row under it.
   Phones and 1280px up keep the layout they had. */
@media(min-width:700px) and (max-width:1279px){
  section.ne-quote24 .ne-quote24-in{grid-template-columns:minmax(240px,34%) 1fr;grid-template-areas:"photo copy" "photo cta";align-items:start;gap:20px 38px;padding:34px 40px}
  section.ne-quote24 .ne-quote24-photo{grid-area:photo;align-self:stretch;height:100%;min-height:220px;aspect-ratio:auto;max-height:none}
  section.ne-quote24 .ne-quote24-copy{grid-area:copy;min-width:0}
  section.ne-quote24 .ne-quote24-h{font-size:clamp(2rem,3.6vw,2.9rem)}
  section.ne-quote24 .ne-quote24-cta{grid-area:cta;flex-direction:row;flex-wrap:wrap;min-width:0;gap:12px}
}

/* Gold estimate band, tablet and desktop: the band took the 120px section padding on top of its own 34px inner padding,
   so empty gold above and below matched the content height. From 700px up the gold now fits the content. */
@media(min-width:700px){section.ne-quote24{padding-top:10px;padding-bottom:10px}}

/* In-between widths, every template (ruling 79 sweep, measured at 390 to 1440 on every page family). Each rule below
   fixes a grid that left a card alone on its row, or a column with nothing in it, at widths between phone and desktop. */

/* Industries: ten cards in three columns left Luxury Garages alone with two empty slots from 681px to 1040px. */
@media(min-width:681px) and (max-width:1040px){.ind-grid{grid-template-columns:1fr 1fr}}

/* City and service card grids. 312 pages sized these with auto-fit, so six cards ran four then two from about 1180px up;
   56 pages already used three, two, one. Every page now uses the fixed pattern, and three-card grids stay three across. */
html .cty-grid:not(.bento){grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:980px){
  html .cty-grid:not(.bento){grid-template-columns:repeat(2,minmax(0,1fr))}
  html .cty-grid:not(.bento)>:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:560px){html .cty-grid:not(.bento){grid-template-columns:minmax(0,1fr)}}
@media(min-width:768px){
  html .cty-grid:not(.bento):has(>:nth-child(3):last-child),
  html .sx-three:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  html .cty-grid:not(.bento):has(>:nth-child(3):last-child)>:last-child{grid-column:auto}
}

/* Tier and price cards: 35 pages size these three-card grids inline with auto-fit, which a stylesheet cannot override
   without !important. From 561px to 980px they ran two then one; they now sit two over one, the third spanning the row,
   the same pattern as the city card grids. From 981px up they already fit three across. */
@media(min-width:561px) and (max-width:980px){
  html .cty-tier-grid:has(>:nth-child(3):last-child),
  html .cty-price-grid:has(>:nth-child(3):last-child){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html .cty-tier-grid:has(>:nth-child(3):last-child)>:last-child,
  html .cty-price-grid:has(>:nth-child(3):last-child)>:last-child{grid-column:1/-1}
}

/* ESD steps: five steps ran four then one from about 990px to 1160px and three then two below that. They now sit three
   over two, the last two sharing the second row evenly. */
@media(min-width:700px) and (max-width:1179px){
  html .esd-steps:has(>:nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
  html .esd-steps:has(>:nth-child(5):last-child)>*{grid-column:span 2}
  html .esd-steps:has(>:nth-child(5):last-child)>:nth-child(n+4){grid-column:span 3}
}

/* ESD "why" list: five points in two columns left the fifth alone; it now spans the row. */
.why-grid{container-type:inline-size}
@container (min-width:472px) and (max-width:713px){.why-grid>:last-child:nth-child(odd){grid-column:1/-1}}

/* Polishing: the before and after slider was a square beside a taller grit list, leaving its column empty above and
   below. In two columns it now runs the full height of the list. */
@media(min-width:901px){
  .pol-grit{align-items:stretch}
  .pol-grit>div:first-child{display:flex}
  .pol-grit .pol-ba{aspect-ratio:auto;width:100%;height:100%;min-height:420px}
}

/* Closing contact block and the flakes gallery headings: centred like the same blocks on every other page. */
#contact.cty-final{text-align:center}
.fl-gal-head{align-items:center;text-align:center}
.fl-gal-head .sec-head p{margin-left:auto;margin-right:auto}

/* City hero text and the footer set their own padding, which zeroed the side padding .wrap gives. Below 1280px there is no spare page width to hide that. Same inset as the steel heroes. */
@media(max-width:1279px){
  .wrap.cty-hero-in,.wrap.foot-inner{padding-left:clamp(18px,4vw,28px);padding-right:clamp(18px,4vw,28px)}
}

/* Small phones: a one-line button, a fixed-minimum card or a fixed-width tile wider than the screen pushes the whole page sideways. Long buttons wrap; the two grids take the width they are given. */
@media(max-width:400px){
  a.btn,button.btn{white-space:normal;text-align:center;justify-content:center;max-width:100%}
  main .hub-grid{grid-template-columns:minmax(0,1fr)}
  .ch-shorts-rail .ch-short{width:auto}
}