/* css/pages.css — the public content pages: /services/ (and its six service pages), /work/ (and its two project pages),
   /areas-we-serve/ and /faq/. Loads AFTER css/site.css, which supplies the tokens, the header, the buttons, the footer, the
   "How we work" steps, the warranty cards, the registration badges, the photo gallery and the Luzon map; this file adds only what
   those pages need on top. Scoped to #site (every rule starts with "#site" or "#site.pg"), so nothing here can reach the app.
   Not precached by the service worker, like css/catalogue.css. No inline style anywhere (the pages' CSP has no 'unsafe-inline').
   No 4-digit z-index (CHECK 1). Phone first: every grid is minmax(0,1fr), nothing is wider than the viewport. */

/* standalone-page base: these pages load none of the app's styles */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:#fff}
body{margin:0;background:#fff;color:#0E1116}
#site a,#site button{touch-action:manipulation}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

#site.pg{--site-sec:clamp(48px,6.5vw,88px);--proof-lift:0px;--pg-well:#F4F3F0}
#site.pg section[id]{scroll-margin-top:calc(var(--site-head) + 8px)}
#site #site-main:focus{outline:none}   /* the skip link moves focus here; the whole page is not a control, so no ring */

/* ── header: css/site.css draws it (the "Get a quote" button top right, the six links, the phone sizes down to 320px); here the section the visitor
   is in is marked in gold, on a project page too (aria-current="true" on the parent section's link) ── */
#site #site-nav a[aria-current]{color:var(--site-gold-ink)}

/* ── breadcrumb (the same trail is in the page's JSON-LD) ── */
#site .crumbs{margin-bottom:22px}
#site .crumbs ol{display:flex;flex-wrap:wrap;gap:2px 0;list-style:none;color:var(--site-muted);font-size:13.5px;line-height:1.5}
#site .crumbs li{display:flex;align-items:center}
#site .crumbs li+li::before{content:"";flex:none;width:5px;height:5px;margin:0 11px;border-top:1px solid var(--site-gold);border-right:1px solid var(--site-gold);transform:rotate(45deg)}
#site .crumbs a{color:var(--site-muted);text-decoration:none}
#site .crumbs a:hover{color:var(--site-navy);text-decoration:underline;text-decoration-color:var(--site-gold);text-underline-offset:3px}
#site .crumbs [aria-current]{color:var(--site-navy);font-weight:500}

/* ── page hero: the title, the intro and two buttons beside one photo (or the Luzon map) ── */
#site .pg-hero{padding:clamp(24px,3.4vw,48px) 0 clamp(32px,4.4vw,56px);background:var(--site-paper)}
#site .pg-hero-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,44px);align-items:center}
#site .pg-hero h1{margin-bottom:18px;font-size:clamp(2.05rem,3.2vw + 1rem,3.5rem);line-height:1.07;letter-spacing:-.02em}
#site .pg-hero .site-lead{max-width:35em}
#site .pg-hero .site-lead+.site-lead{margin-top:14px}
#site .pg-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
#site .pg-hero-media{margin:0}
#site .pg-hero-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;background:#E9E6DF}
#site .pg-hero-media figcaption,#site .pg-cap{margin-top:10px;color:var(--site-muted);font-size:13px;line-height:1.5}
#site .pg-hero-media figcaption a,#site .pg-cap a{color:var(--site-navy);font-weight:500}
#site .pg-hero-plain .pg-hero-copy{max-width:46rem}
@media (min-width:900px){
  #site .pg-hero-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,88px)}
  #site .pg-hero-plain .pg-hero-in{grid-template-columns:minmax(0,1fr)}
  #site .pg-hero-media{position:relative;isolation:isolate}
  #site .pg-hero-media img,#site .pg-hero-media .luzon-map{position:relative}
  #site .pg-hero-media::after{content:"";position:absolute;z-index:-1;inset:14px -14px 38px 14px;border:1px solid var(--site-gold);border-radius:4px}
}

/* proof bar under the hero: the homepage's four facts on a white card (no overlap here), two by two on a phone */
#site.pg .proof{padding:0 0 clamp(36px,5vw,56px)}
@media (max-width:599px){
  #site.pg .proof-bar{grid-template-columns:repeat(2,minmax(0,1fr));padding:0}
  #site.pg .proof-bar li{padding:16px 14px;border-top:1px solid var(--site-line)}
  #site.pg .proof-bar li::before,#site.pg .proof-bar li::after{content:none}
  #site.pg .proof-bar li:nth-child(-n+2){border-top:0}
  #site.pg .proof-bar li:nth-child(even){border-left:1px solid var(--site-line)}
  #site.pg .proof-val{font-size:1.2rem}
  #site.pg .proof-sub{font-size:13px}
}
/* a 320px phone: the cells are 144px wide, so "SS304 / SS316" and "and laboratory-grade" may wrap instead of leaving the card */
@media (max-width:359px){
  #site.pg .proof-bar li{padding:14px 12px}
  #site.pg .proof-val{font-size:1.02rem}
  #site.pg .proof-sub{font-size:12.5px}
  #site.pg .proof-sub .nowrap{white-space:normal}
}

/* ── section rhythm ── */
#site.pg .sec-head{margin-bottom:clamp(26px,3.4vw,44px)}
#site.pg .sec-head h2,#site .pg-h2{margin-bottom:14px}
#site .pg-prose{max-width:42em}
#site .pg-prose p{color:var(--site-ink);font-size:1.0625rem}
#site .pg-prose p+p{margin-top:16px}
#site .pg-prose a,#site .incl a,#site .pg-note a{color:var(--site-navy);text-decoration-color:var(--site-gold);text-underline-offset:3px}
#site .pg-sub{margin:0 0 14px;color:var(--site-gold-ink);font:600 12px/1.4 var(--site-sans);letter-spacing:.18em;text-transform:uppercase}

/* ── "what's included": a hairline grid of short entries, one or two columns ── */
#site .incl{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--site-line-gold)}
#site .incl li{padding:20px 2px 22px;border-bottom:1px solid var(--site-line)}
#site .incl h3{margin-bottom:6px;font:500 1.3rem/1.25 var(--site-serif);letter-spacing:-.01em}
#site .incl p{color:var(--site-muted);font-size:1rem;line-height:1.6}
#site .incl p+p{margin-top:8px}
@media (min-width:720px){
  #site .incl{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,72px)}
}

/* ── the owner's standard example (hoods, ducting, gas, fire suppression): a framed panel with a short list ── */
#site .pg-example{padding:clamp(24px,3.6vw,44px);border:1px solid var(--site-line-gold);border-radius:var(--site-radius);background:var(--site-paper)}
#site .pg-example h3{margin-bottom:6px;font-size:clamp(1.4rem,1vw + 1.1rem,1.8rem)}
#site .pg-example>p{max-width:40em;color:var(--site-muted)}
#site .pg-example dl{display:grid;grid-template-columns:minmax(0,1fr);margin-top:22px;border-top:1px solid var(--site-line-gold)}
#site .pg-example dl>div{padding:16px 0;border-bottom:1px solid var(--site-line)}
#site .pg-example dt{margin-bottom:4px;color:var(--site-gold-ink);font:600 12px/1.4 var(--site-sans);letter-spacing:.16em;text-transform:uppercase}
#site .pg-example dd{color:var(--site-ink);font-size:1.0625rem}
#site .pg-note{max-width:44em;margin-top:18px;color:var(--site-muted);font-size:14.5px;line-height:1.6}
@media (min-width:720px){
  #site .pg-example dl>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:4px 28px;align-items:baseline}
  #site .pg-example dt{margin-bottom:0}
}

/* ── representative product pictures: white-ground catalogue images on a soft well, never passed off as projects ── */
#site .pg-figs{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
#site .pg-fig{margin:0;overflow:hidden;border:1px solid var(--site-line);border-radius:6px;background:#fff}
#site .pg-fig-well{position:relative;aspect-ratio:4/3;background:var(--pg-well)}
#site .pg-fig-well img{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);max-width:none;object-fit:contain}
#site .pg-fig figcaption{padding:12px 14px 14px;border-top:1px solid var(--site-line);color:var(--site-ink);font-size:14.5px;line-height:1.45}
#site .pg-fig figcaption span{display:block;margin-top:2px;color:var(--site-muted);font-size:12px}
@media (min-width:600px){
  #site .pg-figs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
#site .pg-figs.pg-figs-one{grid-template-columns:minmax(0,1fr);max-width:420px;margin-top:28px}

/* ── cards: the six services on the hub, the related services at the foot of a page ── */
#site .pg-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
#site .pg-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--site-line);border-radius:6px;background:#fff;transition:border-color .2s,box-shadow .2s}
#site .pg-card:hover{border-color:rgba(11,27,63,.3);box-shadow:0 10px 28px rgba(11,27,63,.07)}
#site .pg-card-media{aspect-ratio:4/3;overflow:hidden;background:#E9E6DF}
#site .pg-card-media img{width:100%;height:100%;object-fit:cover}
#site .pg-card-body{display:flex;flex:1;flex-direction:column;padding:20px 20px 22px}
#site .pg-card h3{margin-bottom:8px;font-size:1.45rem;line-height:1.2}
#site .pg-card h3 a{color:inherit;text-decoration:none}
#site .pg-card h3 a::after{content:"";position:absolute;inset:0}
#site .pg-card p{margin-bottom:16px;color:var(--site-muted);font-size:1rem;line-height:1.6}
#site .pg-card .link-arrow{align-self:flex-start;margin-top:auto}
#site .pg-card p.pg-card-tag{margin-bottom:10px;color:var(--site-gold-ink);font:600 12px/1.4 var(--site-sans);letter-spacing:.18em;text-transform:uppercase}
#site .pg-cards-text .pg-card-body{padding:22px 22px 24px}
#site .pg-cards-text .pg-card{border-top:2px solid var(--site-gold)}
@media (min-width:640px){
  #site .pg-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
}
@media (min-width:1024px){
  #site .pg-cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ── finishes (plain-text pills, the look of the registration badges without the icon) ── */
#site .pg-sub.pg-sub-gap{margin-top:34px}
#site .pg-tags{display:flex;flex-wrap:wrap;gap:8px 10px}
#site .pg-tags li{display:inline-flex;align-items:center;padding:8px 18px;border:1px solid var(--site-line-gold);border-radius:999px;background:#fff;color:var(--site-navy);font:600 14px/1.2 var(--site-sans);letter-spacing:.01em}

/* ── the catalogue category links (pills) ── */
#site .pg-chips{display:flex;flex-wrap:wrap;gap:8px}
#site .pg-chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--site-line);border-radius:999px;background:#fff;color:var(--site-navy);font-size:15px;font-weight:500;text-decoration:none;transition:border-color .2s,background-color .2s}
#site .pg-chips a:hover{border-color:var(--site-navy);background:var(--site-paper)}

/* ── options table (stainless fabrication): a real table from 720px, one card per row on a phone ── */
#site .pg-table-wrap{border-top:1px solid var(--site-line-gold)}
#site .pg-table{width:100%;border-collapse:collapse;text-align:left}
#site .pg-table caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
#site .pg-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
#site .pg-table tr{display:block;padding:18px 2px;border-bottom:1px solid var(--site-line)}
#site .pg-table th,#site .pg-table td{display:block;font-weight:400}
#site .pg-table tbody th{margin-bottom:6px;color:var(--site-navy);font:500 1.3rem/1.25 var(--site-serif)}
#site .pg-table tbody th a{color:inherit;text-decoration-color:var(--site-gold);text-underline-offset:4px}
#site .pg-table td{color:var(--site-ink);font-size:1rem;line-height:1.55}
#site .pg-table td+td{margin-top:4px}
#site .pg-table td::before{content:attr(data-label);display:block;color:var(--site-gold-ink);font:600 11px/1.6 var(--site-sans);letter-spacing:.16em;text-transform:uppercase}
@media (min-width:720px){
  #site .pg-table thead{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  #site .pg-table thead th{padding:14px 18px 12px 2px;color:var(--site-muted);font:600 11px/1.4 var(--site-sans);letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--site-line)}
  #site .pg-table tr{display:table-row;padding:0;border:0}
  #site .pg-table th,#site .pg-table td{display:table-cell;padding:18px 18px 18px 2px;border-bottom:1px solid var(--site-line);vertical-align:top}
  #site .pg-table tbody th{margin:0;width:22%;font-size:1.2rem}
  #site .pg-table td+td{margin:0}
  #site .pg-table td::before{content:none}
}

/* ── project pages: the facts panel (the same label / value rows as the homepage's contact list) ── */
#site .facts{border-top:1px solid var(--site-line-gold)}
#site .facts>div{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 0;border-bottom:1px solid var(--site-line)}
#site .facts dt{color:var(--site-muted);font:600 11px/1.6 var(--site-sans);letter-spacing:.16em;text-transform:uppercase}
#site .facts dd{color:var(--site-navy);font-weight:500}
@media (min-width:480px){
  #site .facts>div{grid-template-columns:116px minmax(0,1fr);gap:4px 18px}
}
#site .facts+.pg-prose{margin-top:24px}
#site .pg-split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,64px)}
@media (min-width:900px){
  #site .pg-split{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}
}
#site .pg-trust{margin-bottom:clamp(24px,3vw,36px)}

/* project photographs: the two project pages reuse the homepage's .proj-gallery as it is (css/site.css; 7 and 6 photos). The service pages show
   three or four photos, so they have their own small grid: one wide lead photo, then the rest side by side. */
#site .pg-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#site .pg-gallery li:first-child{grid-column:1/-1}
#site .pg-gallery[data-n="4"] li:last-child{grid-column:1/-1}
#site .pg-gallery a{display:block;overflow:hidden;border-radius:3px;aspect-ratio:4/3;background:#ECE9E2}
#site .pg-gallery li:first-child a{aspect-ratio:16/10}
#site .pg-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
#site .pg-gallery a:hover img,#site .pg-gallery a:focus-visible img{transform:scale(1.03)}
@media (min-width:720px){
  #site .pg-gallery{gap:12px}
  #site .pg-gallery li:first-child a{aspect-ratio:2/1}
  #site .pg-gallery[data-n="4"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  #site .pg-gallery[data-n="4"] li:last-child{grid-column:auto}
}
@media (min-width:1280px){
  #site .pg-gallery li:first-child a{aspect-ratio:21/9}
}

/* ── the Luzon map as the hero of /areas-we-serve/, and the one short paragraph under each group's list ── */
#site .pg-hero-media .luzon-map{background:#fff}
#site .luzon-group p{margin:14px 0 0;color:var(--site-muted);font-size:.9875rem;line-height:1.6}
#site .luzon-group p a{color:var(--site-navy);font-weight:500}
#site .pg-areas-places{margin-top:clamp(36px,5vw,64px)}
@media (min-width:900px){
  #site .pg-areas-places .luzon-places{grid-template-columns:repeat(3,minmax(0,1fr))}
  #site .pg-areas-places .luzon-stat{grid-column:1/-1}
}

/* ── FAQ ── */
#site .faq-group+.faq-group{margin-top:clamp(40px,5vw,64px)}
#site .faq-group>h2{margin-bottom:6px;font-size:clamp(1.6rem,1.4vw + 1.15rem,2.2rem)}
#site .faq-list{max-width:46rem;border-top:1px solid var(--site-line-gold);margin-top:18px}
#site .faq-item{padding:24px 0 26px;border-bottom:1px solid var(--site-line)}
#site .faq-item h3{margin-bottom:10px;font-size:clamp(1.25rem,.6vw + 1.1rem,1.5rem);line-height:1.25}
#site .faq-item p{color:var(--site-ink);font-size:1.0625rem}
#site .faq-item p+p{margin-top:12px}
#site .faq-item a{color:var(--site-navy);text-decoration-color:var(--site-gold);text-underline-offset:3px}

/* ── the registrations on the supply page ── */
#site .pg-regs{margin-top:20px}

/* ── closing call to action (the same band as the catalogue's "Can't find it?") ── */
#site .pg-cta{padding:clamp(44px,6vw,72px) 0;border-top:1px solid var(--site-line)}
#site .pg-cta h2{margin-bottom:14px}
#site .pg-cta-in{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
#site .pg-cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}
#site .pg-cta-or{color:var(--site-muted);font-size:15px}
#site .pg-cta-or a{font-weight:600;text-decoration:none}
#site .pg-cta-or a:hover{text-decoration:underline;text-decoration-color:var(--site-gold);text-underline-offset:4px}
@media (min-width:900px){
  #site .pg-cta-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px}
}

@media (prefers-reduced-motion:reduce){
  #site .pg-card,#site .pg-chips a{transition:none}
}