/* css/site.css — PUBLIC WEBSITE (PUBLIC-WEBSITE-SPEC.md §5.4, premium pass 2026-10-21). Scoped to #site (and #login-site-back); loads AFTER styles.css on the homepage and on its own on /catalogue/ (which sets and wraps its page in #site). Own light --site-* tokens (never --bg/--text/--primary), so a dark or astral device theme still gets a white site. Palette from the brand's logo: deep navy, gold ONLY as hairlines / eyebrows / small numerals, warm off-white. No bright blue. No 4-digit z-index (CHECK 1). Catalogue-only rules live in css/catalogue.css. */ /* view state machine: html[data-view] is set by the head script, corrected by js/app.js */ #site{display:none} html[data-view="site"] #site{display:block} html[data-view="site"] #splash-screen, html[data-view="site"] #login-screen, html[data-view="site"] #app-shell, html[data-view="site"] #modal-overlay, html[data-view="site"] #profile-drawer, html[data-view="site"] #drawer-overlay, html[data-view="site"] #dialog-overlay{display:none !important} html[data-standalone] #login-site-back{display:none !important} /* The website view loads NO app stylesheet (css/tokens.css + css/styles.css are in index.html's app-kit template, written only for the app views — see the PERF note there), and a few global rules of that stylesheet used to shape this page. They are restated here, scoped to the website view, with the SAME values, so the page looks and behaves as it did. Verified element by element: the computed styles of all 448 #site elements are identical with and without the app stylesheet (and so is a full-page screenshot at 412 and 1280 px); html and body differ only in the canvas colour (white here, the app theme's there) and in the overscroll behaviour below. html:not([data-view]) is the no-JavaScript case, which loads no app stylesheet either. After "Back to website" from the sign-in the app stylesheet IS present; these rules win on specificity and agree with it. Deliberately NOT carried over: the app's own overscroll-behavior:none (it exists so the app's pull-to-refresh is not fought) — a public page keeps the browser's native one. */ html[data-view="site"],html:not([data-view]){scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;background:#fff} html[data-view="site"] body,html:not([data-view]) body{position:relative;margin:0;background:#fff;overflow-x:hidden} #site a,#site button,#site input,#site select,#site textarea,#site summary,#site [role="button"]{touch-action:manipulation} @media (max-width:768px){ html[data-view="site"] body,html:not([data-view]) body{-webkit-text-size-adjust:100%;text-size-adjust:100%;text-rendering:optimizeLegibility} } /* the app stylesheet's thin light scrollbar, which the homepage always showed on desktop (light-theme values; #site is always white) */ html[data-view="site"]::-webkit-scrollbar,html[data-view="site"] ::-webkit-scrollbar{width:4px;height:4px} html[data-view="site"]::-webkit-scrollbar-track,html[data-view="site"] ::-webkit-scrollbar-track{background:transparent} html[data-view="site"]::-webkit-scrollbar-thumb,html[data-view="site"] ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.14);border-radius:2px} html[data-view="site"]::-webkit-scrollbar-thumb:hover,html[data-view="site"] ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.24)} /* tokens + base */ #site{ --site-navy:#0B1B3F;--site-navy-2:#17306A; --site-gold:#C9A227; /* hairlines, rules, numerals on dark */ --site-gold-ink:#85690F; /* gold TEXT on light backgrounds: 4.9:1 on the paper tone */ --site-gold-big:#9A7A14; /* the large gold numeral on light: >= 3:1 */ --site-gold-lite:#E2C766; /* gold text on the navy hero overlay */ --site-paper:#FAF8F4;--site-bg:#fff; --site-ink:#0E1116;--site-muted:#5E6672; --site-line:#E6E1D6;--site-line-gold:rgba(201,162,39,.5); --site-tint:#E6EAF2; /* the land on the Luzon map: a pale navy tint */ --site-serif:'Fraunces','Iowan Old Style','Palatino Linotype',Georgia,serif; --site-sans:'Inter',-apple-system,'SF Pro Text',system-ui,sans-serif; --site-radius:8px;--site-max:1180px;--site-head:64px; --site-sec:clamp(64px,9vw,120px); box-sizing:border-box;background:var(--site-bg);color:var(--site-ink);min-height:100dvh; font:400 16px/1.65 var(--site-sans);-webkit-font-smoothing:antialiased; overflow-x:hidden;overflow-x:clip; /* clip: no scroll container, so the sticky header still sticks */ } #site *,#site *::before,#site *::after{box-sizing:border-box;margin:0;padding:0} #site h1,#site h2,#site h3,#site h4{color:var(--site-navy);font-family:var(--site-serif);font-weight:500;font-optical-sizing:auto;line-height:1.1;letter-spacing:-.015em} #site ul{list-style:none} #site .nowrap{white-space:nowrap} #site a{color:var(--site-navy)} #site img{display:block;max-width:100%;height:auto} #site [hidden]{display:none !important} #site .sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} #site a:focus-visible,#site button:focus-visible,#site input:focus-visible{outline:2px solid var(--site-navy);outline-offset:3px} #hero a:focus-visible,#hero button:focus-visible{outline-color:#fff} #site .site-wrap{max-width:var(--site-max);margin:0 auto;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))} #site section[id]{scroll-margin-top:calc(var(--site-head) - 1px)} #site .site-sec{padding:var(--site-sec) 0} #site .site-sec-paper{background:var(--site-paper)} #site h2{font-size:clamp(2rem,3.2vw + .8rem,3.25rem);line-height:1.08;letter-spacing:-.02em} #site h3{font-size:clamp(1.5rem,1.2vw + 1.1rem,2rem);line-height:1.18} #site .site-lead{max-width:36em;color:var(--site-muted);font-size:clamp(1.0625rem,.3vw + 1rem,1.1875rem)} #site .skip-link{position:absolute;left:12px;top:-64px;z-index:3;padding:12px 18px;border-radius:6px;background:var(--site-navy);color:#fff;font:600 14px/1 var(--site-sans);text-decoration:none} #site .skip-link:focus{top:10px} /* eyebrow: small caps, wide tracking, a gold hairline before it */ #site .eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:18px;color:var(--site-gold-ink);font:600 12px/1.4 var(--site-sans);letter-spacing:.18em;text-transform:uppercase} #site .eyebrow::before{content:"";flex:none;width:34px;height:1px;background:var(--site-gold)} /* buttons: slightly squarer, solid navy primary + thin navy outline */ #site .site-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border:1px solid transparent;border-radius:6px;font:600 15px/1 var(--site-sans);letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s} #site .site-btn-primary{background:var(--site-navy);border-color:var(--site-navy);color:#fff} #site .site-btn-primary:hover{background:var(--site-navy-2);border-color:var(--site-navy-2)} #site .site-btn-outline{background:transparent;border-color:var(--site-navy);color:var(--site-navy)} #site .site-btn-outline:hover{background:var(--site-navy);color:#fff} #site .site-btn-sm{min-height:40px;padding:0 18px;font-size:14px} /* inverse pair, used on the photo hero only (navy-on-navy would vanish) */ #site .site-btn-light{background:#fff;border-color:#fff;color:var(--site-navy)} #site .site-btn-light:hover{background:var(--site-paper);border-color:var(--site-paper)} #site .site-btn-ghost{background:transparent;border-color:rgba(255,255,255,.72);color:#fff} #site .site-btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff} #site .link-arrow{display:inline-block;padding-bottom:3px;border-bottom:1px solid var(--site-gold);color:var(--site-navy);font-weight:600;text-decoration:none} #site .link-arrow::after{content:" →"} #site .link-arrow:hover{border-bottom-color:var(--site-navy)} /* header: sticky and solid by default; on the homepage it is transparent over the hero until js/site.js adds .is-solid (scrolled past the hero) or .is-menu-open */ #site-header{position:sticky;top:0;z-index:2;height:var(--site-head);background:#fff;border-bottom:1px solid var(--site-line);color:var(--site-navy);transition:background-color .25s,border-color .25s} #site .site-header-in{display:flex;align-items:center;gap:12px;height:100%} #site #site-brand{display:flex;flex:1 1 auto;align-items:center;gap:11px;min-width:0;margin-right:auto;color:inherit;text-decoration:none} #site #site-brand img{flex:none;width:36px;height:36px;border-radius:7px} #site .site-brand-text{display:flex;flex-direction:column;min-width:0} #site .site-brand-name{overflow:hidden;text-overflow:ellipsis;font:600 19px/1.1 var(--site-serif);letter-spacing:-.005em;white-space:nowrap} #site .site-brand-sub{overflow:hidden;margin-top:4px;color:var(--site-muted);font:600 9.5px/1 var(--site-sans);letter-spacing:.17em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap} #site .site-head-cta,#site #site-menu-btn{flex:none} #site .site-head-cta{white-space:nowrap} #site #site-nav{display:none;position:absolute;top:var(--site-head);left:0;right:0;flex-direction:column;padding:4px 16px 14px;background:#fff;border-bottom:1px solid var(--site-line);box-shadow:0 18px 30px rgba(11,27,63,.08)} #site #site-nav.is-open{display:flex} #site #site-nav a{padding:14px 4px;border-top:1px solid var(--site-line);color:var(--site-navy);font-weight:500;text-decoration:none} #site #site-nav a[aria-current="page"]{color:var(--site-gold-ink)} #site #site-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--site-navy);border-radius:6px;background:transparent;color:var(--site-navy);cursor:pointer} #site.is-home #site-header:not(.is-solid):not(.is-menu-open){background:transparent;border-bottom-color:transparent;color:#fff} #site.is-home #site-header:not(.is-solid):not(.is-menu-open) .site-brand-sub{color:rgba(255,255,255,.82)} #site.is-home #site-header:not(.is-solid):not(.is-menu-open) .site-btn-outline, #site.is-home #site-header:not(.is-solid):not(.is-menu-open) #site-menu-btn{border-color:rgba(255,255,255,.75);color:#fff} #site.is-home #site-header:not(.is-solid):not(.is-menu-open) .site-btn-outline:hover{background:rgba(255,255,255,.16)} #site.is-home #site-header:not(.is-solid):not(.is-menu-open) .site-head-cta{background:#fff;border-color:#fff;color:var(--site-navy)} #site.is-home #site-header:not(.is-solid):not(.is-menu-open) .site-head-cta:hover{background:var(--site-paper);border-color:var(--site-paper)} #site.is-home #site-header:not(.is-solid):not(.is-menu-open) a:focus-visible, #site.is-home #site-header:not(.is-solid):not(.is-menu-open) button:focus-visible{outline-color:#fff} /* hero: full-bleed photo under a navy gradient, white serif headline */ #hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;margin-top:calc(var(--site-head) * -1);min-height:560px;min-height:max(560px,70svh);overflow:hidden;background:var(--site-navy);color:#fff} #site .hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;object-fit:cover;object-position:46% 50%} #site .hero-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,27,63,.72) 0,rgba(11,27,63,.8) 50%,rgba(11,27,63,.93) 100%)} #site .hero-in{width:100%;padding-top:calc(var(--site-head) + 48px);padding-bottom:calc(clamp(48px,9vh,104px) + var(--proof-lift))} /* the logo intro (owner, 2026-10-22): the brand's logo animation plays LARGE and translucent behind the headline for a moment, then js/site.js flies it onto the header logo and removes it (the note in index.html has the whole sequence). The hidden attribute keeps it out of the page without script, and it stays at opacity 0 until the clip is really playing. It sits above the photo and its scrim and below the text (z-index -1, after the scrim in the markup), takes no click, and is an absolutely positioned box, so it cannot move the layout. Its vertical position is a constant of the viewport (46svh, 43svh from 900px: the middle of the hero's first screen), NOT a percentage of the hero: the hero grows by tens of pixels when the web fonts swap in a moment after load, and a box centred in it would move with it — a measured layout shift (CLS 0.021 -> 0.026) — while this one stays where it faded in. The clip is a dark navy square, so a circular mask feathers it (the cube and its flame sit inside the first 62% of the radius; nothing reaches the edge of the square) and the whole box is drawn at a quarter (behind the text) to a third (over the open photo) of its opacity: that leaves the logo readable, the photo showing and every line of text above AA contrast (measured at 1920 to 360px, over all 10 s of the clip). The width and height have a plain-vw fallback before the min() / svh version, so a browser that does not know svh never stretches the box over the whole hero. Plain alpha, not mix-blend-mode:screen — screen was tried and drops every dark pixel, which erases the navy face of the cube and its lettering (the logo's own identity) and leaves a pale outline on the bright photo; it also costs an extra blend pass on a phone. */ #site .hero-ghost{position:absolute;z-index:-1;top:calc(46vh - 35vw);top:calc(46svh - min(35vw,45svh));right:0;bottom:auto;left:0;width:70vw;height:70vw;width:min(70vw,90svh);height:min(70vw,90svh);margin:0 auto;opacity:0;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);transition:opacity .7s ease-out} #site .hero-ghost.is-on{opacity:.25} #site .hero-ghost.is-off{opacity:0;transition-duration:.22s} #site .hero-ghost video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none} #site .hero-years{display:flex;align-items:flex-end;gap:16px;margin-bottom:24px} #site .hero-years-num{color:var(--site-gold);font:500 clamp(5rem,9vw + 1.6rem,8.25rem)/.8 var(--site-serif);font-optical-sizing:auto;letter-spacing:-.03em} #site .hero-years-label{padding:0 0 4px 16px;border-left:1px solid var(--site-line-gold);color:var(--site-gold-lite);font:600 12px/1.5 var(--site-sans);letter-spacing:.18em;text-transform:uppercase} #site #hero h1{max-width:15em;margin-bottom:22px;color:#fff;font-size:clamp(2.2rem,4.2vw + .7rem,4.1rem);line-height:1.06;letter-spacing:-.02em} #site .hero-lead{max-width:34em;color:rgba(255,255,255,.92);font-size:clamp(1.0625rem,.4vw + 1rem,1.25rem);line-height:1.6} #site .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px} @media (min-width:900px){ #site #hero h1{font-size:clamp(2rem,2.8vw + .7rem,3.5rem)} /* from 900px the photo is open on the right (the scrim below fades out there): the intro sits in that part, clear of the text, about 54vmin across (the owner's 46-60) and never wider than 36vw. Below 900px the text covers the whole hero, so the intro sits behind it at the lower opacity above. */ #site .hero-ghost{top:calc(43vh - 18vw);top:calc(43svh - min(27vmin,18vw));left:auto;right:clamp(16px,2vw,40px);width:36vw;height:36vw;width:min(54vmin,36vw);height:min(54vmin,36vw);margin:0} #site .hero-ghost.is-on{opacity:.35} } /* proof bar: a white card that lifts over the bottom of the hero (a serif value, a muted line, inset gold rules) */ #site{--proof-lift:44px} #site .proof{padding-bottom:clamp(0px,2vw,16px);background:var(--site-paper)} #site .proof-bar{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);margin-top:calc(var(--proof-lift) * -1);padding:4px 0;border-radius:var(--site-radius);background:#fff;box-shadow:0 24px 48px -16px rgba(11,27,63,.24),0 2px 8px rgba(11,27,63,.06)} #site .proof-bar li{position:relative;display:flex;flex-direction:column;justify-content:flex-start;padding:20px 24px} #site .proof-bar li+li::before{content:"";position:absolute;top:0;left:24px;right:24px;height:1px;background:var(--site-line-gold)} #site .proof-val{color:var(--site-navy);font:500 1.5rem/1.12 var(--site-serif);font-optical-sizing:auto;letter-spacing:-.012em} #site .proof-num{color:var(--site-gold-big)} #site .proof-sub{margin-top:6px;color:var(--site-muted);font-size:14px;line-height:1.45;text-wrap:balance} /* section heads */ #site .sec-head{max-width:40rem;margin-bottom:clamp(40px,5vw,72px)} #site .sec-head h2,#site .about-copy h2,#site .contact-intro h2{margin-bottom:20px} /* services: photo-led rows, flipping each row */ #site .svc-list{display:grid;gap:clamp(56px,8vw,112px)} #site .svc{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:center} #site .svc-media{overflow:hidden;border-radius:4px;aspect-ratio:4/3;background:#E9E6DF} #site .svc-media img{width:100%;height:100%;object-fit:cover} #site .svc-num{display:flex;align-items:center;gap:14px;margin-bottom:14px;color:var(--site-gold-ink);font:500 15px/1 var(--site-serif);letter-spacing:.1em} #site .svc-num::after{content:"";width:40px;height:1px;background:var(--site-gold)} #site .svc h3{margin-bottom:16px} #site .svc-body p{color:var(--site-muted);font-size:1.0625rem} #site .svc-body p+p{margin-top:20px} /* stainless-steel fabrication spotlight (right after Services): a navy band, one large project photo and what we fabricate, with two buttons. A phone sees the photo first, then the words; from 900px the photo is on the left behind a gold frame, as in the About section. */ #site .fab{background:var(--site-navy);color:#fff} #site .fab-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,56px);align-items:center} #site .fab-media{margin:0} #site .fab-photo{position:relative;isolation:isolate} #site .fab-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;background:var(--site-navy-2)} #site .fab-media figcaption{margin-top:14px;color:rgba(255,255,255,.8);font-size:13px;line-height:1.5} #site .fab a:not(.site-btn){color:#fff;text-decoration-color:var(--site-gold);text-underline-offset:3px} #site .fab .eyebrow{color:var(--site-gold-lite)} #site .fab h2{margin-bottom:18px;color:#fff} #site .fab .site-lead{max-width:34em;color:rgba(255,255,255,.88)} #site .fab-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} #site .fab-list li{padding:8px 16px;border:1px solid var(--site-line-gold);border-radius:999px;color:#fff;font:600 14px/1.2 var(--site-sans);letter-spacing:.01em} #site .fab-grades{max-width:34em;margin-top:22px;color:rgba(255,255,255,.88);font-size:1rem;line-height:1.6} #site .fab-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} /* projects: an editorial gallery — one lead image, then a tight grid */ #site .proj{margin-top:clamp(48px,7vw,88px)} #site .proj+.proj{padding-top:clamp(48px,7vw,88px);border-top:1px solid var(--site-line)} #site .proj-head{max-width:46rem;margin-bottom:28px} #site .proj-tag{margin-bottom:12px;color:var(--site-gold-ink);font:600 12px/1.4 var(--site-sans);letter-spacing:.18em;text-transform:uppercase} #site .proj-head h3{margin-bottom:12px;font-size:clamp(1.65rem,1.6vw + 1.1rem,2.375rem)} #site .proj-head p:last-child{color:var(--site-muted);font-size:1.0625rem} #site .proj-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #site .proj-gallery li:last-child:nth-child(even){grid-column:1/-1} #site .proj-gallery .is-lead{grid-column:1/-1} #site .proj-gallery a{display:block;overflow:hidden;border-radius:3px;aspect-ratio:4/3;background:#ECE9E2} #site .proj-gallery .is-lead a{aspect-ratio:16/10} #site .proj-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease} #site .proj-gallery a:hover img,#site .proj-gallery a:focus-visible img{transform:scale(1.03)} /* projects across Luzon: a schematic map beside a plain-text list of the places. js/site.js lights a place's pin and label when its list item is hovered, and the other way round; with no script the page is complete as it is. */ #site #luzon{padding-bottom:0} #site .luzon-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,44px)} #site .luzon-grid .sec-head{margin-bottom:0} #site .luzon-map{margin:0;padding:clamp(12px,2.6vw,22px) clamp(12px,2.6vw,22px) 14px;border:1px solid var(--site-line);border-radius:var(--site-radius);background:var(--site-paper)} #site .lz-svg{display:block;width:100%;max-width:520px;height:auto;margin:0 auto} #site .luzon-map figcaption{margin-top:10px;color:var(--site-muted);font:600 11px/1.4 var(--site-sans);letter-spacing:.16em;text-align:center;text-transform:uppercase} /* the map itself: navy line on a pale navy tint, gold pins ringed in navy */ #site .lz-sea{fill:none;stroke:var(--site-navy);stroke-linejoin:round;stroke-linecap:round} #site .lz-sea-1{stroke-width:8;opacity:.06} #site .lz-sea-2{stroke-width:17;opacity:.035} #site .lz-land{fill:var(--site-tint);stroke:var(--site-navy);stroke-width:1.1;stroke-linejoin:round} #site .lz-lake{fill:var(--site-paper);stroke:var(--site-navy);stroke-width:.7;stroke-linejoin:round} #site .lz-isle{fill:var(--site-tint);stroke:var(--site-navy);stroke-width:.6;stroke-linejoin:round} #site .lz-leader{fill:none;stroke:var(--site-navy);stroke-width:.8;opacity:.42;transition:opacity .2s,stroke .2s} #site .lz-ring{fill:#fff;opacity:.94} #site .lz-core{fill:var(--site-gold);stroke:var(--site-navy);stroke-width:1.5;transform-box:fill-box;transform-origin:center;transition:transform .2s} #site .lz-glow{fill:var(--site-gold);opacity:0;transition:opacity .2s} #site .lz-label{fill:var(--site-navy);font:600 13px/1 var(--site-sans);paint-order:stroke;stroke:var(--site-tint);stroke-width:3;stroke-linejoin:round;transition:fill .2s} #site .lz-north path{fill:none;stroke:var(--site-navy);stroke-width:1;opacity:.55} #site .lz-north text{fill:var(--site-navy);font:600 9px/1 var(--site-sans);letter-spacing:.1em;opacity:.7} /* linked highlight: the same data-pin on the list item, leader, pin and label */ #site .lz-pin.is-on .lz-core{transform:scale(1.35)} #site .lz-pin.is-on .lz-glow{opacity:.3} #site .lz-label.is-on{fill:var(--site-gold-ink)} #site .lz-leader.is-on{stroke:var(--site-gold-ink);opacity:.9} /* the list of places: plain HTML text */ #site .luzon-places{display:grid;grid-template-columns:minmax(0,1fr);gap:30px 44px} #site .luzon-stat{display:flex;align-items:flex-end;gap:16px;align-self:start} #site .luzon-stat-num{color:var(--site-gold-big);font:500 clamp(4rem,6vw,5.25rem)/.8 var(--site-serif);font-optical-sizing:auto;letter-spacing:-.03em} #site .luzon-stat-label{padding:0 0 3px 16px;border-left:1px solid var(--site-line-gold);color:var(--site-muted);font:600 12px/1.5 var(--site-sans);letter-spacing:.18em;text-transform:uppercase;text-wrap:balance} #site .luzon-group h3{margin-bottom:10px;color:var(--site-gold-ink);font:600 12px/1.4 var(--site-sans);letter-spacing:.18em;text-transform:uppercase} #site .luzon-group ul{border-top:1px solid var(--site-line-gold)} #site .luzon-group li{display:flex;align-items:center;gap:13px;padding:11px 2px;border-bottom:1px solid var(--site-line);color:var(--site-navy);font-weight:500;transition:background-color .2s,color .2s} #site .luzon-group li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--site-gold);box-shadow:0 0 0 1.5px var(--site-navy);transition:transform .2s} #site .luzon-group li.is-on{background:var(--site-paper)} #site .luzon-group li.is-on::before{transform:scale(1.35)} @media (min-width:600px){ #site .luzon-places{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1024px){ #site .lz-label{font-size:12px} #site .luzon-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"head map" "places map";column-gap:clamp(48px,6vw,88px);row-gap:40px;align-items:start} #site .luzon-grid .sec-head{grid-area:head} #site .luzon-places{grid-area:places} #site .luzon-map{grid-area:map} } /* trusted by: typography only (the owner named these two institutions; no logos or seals) */ #site .sec-head-tight{margin-bottom:clamp(24px,3vw,36px)} #site .trust{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;padding:22px 0;border-top:1px solid var(--site-line-gold);border-bottom:1px solid var(--site-line-gold)} #site .trust-label{flex:0 0 100%;color:var(--site-gold-ink);font:600 12px/1.4 var(--site-sans);letter-spacing:.18em;text-transform:uppercase} #site .trust-name{flex:0 0 100%;color:var(--site-navy);font:500 1.1875rem/1.35 var(--site-serif);letter-spacing:-.005em} #site .trust-sep{display:none;color:var(--site-gold);font:600 1.75rem/1 var(--site-sans)} /* registrations: the owner's three stated facts — PhilGEPS-registered, SEC-registered, VAT-registered — as plain-text pills, each with the same generic shield-and-check line-icon (inline SVG, decorative). No agency logo or seal (the agencies restrict them) and no registration number (none given). */ #site .regs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px} #site .regs li{display:inline-flex;align-items:center;gap:7px;padding:7px 14px 7px 10px;border:1px solid var(--site-line-gold);border-radius:999px;background:#fff;color:var(--site-navy);font:600 13px/1.2 var(--site-sans);letter-spacing:.01em;white-space:nowrap} #site .regs-ic{flex:none;color:var(--site-gold-ink)} /* directly under the proof bar: a slim row, the label first (small gold caps, like the "Trusted by" label), then the pills */ #site .regs-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:18px 4px 0} #site .regs-label{color:var(--site-gold-ink);font:600 12px/1.4 var(--site-sans);letter-spacing:.18em;text-transform:uppercase} /* under the "Trusted by state universities" line, and in both footers */ #site .regs-trust{margin-top:16px} #site .regs-foot{margin-top:16px} #site .regs-foot li{font-size:12.5px} /* how we work: a numbered timeline, vertical on a phone and one horizontal line from 1024px. Each step carries a TODO-NEIL comment where a typical duration can go; nothing about time is shown. */ #site .steps{display:grid;grid-template-columns:minmax(0,1fr);list-style:none} #site .step{position:relative;padding:0 0 38px 68px} #site .step:last-child{padding-bottom:0} #site .step::before{content:"";position:absolute;left:21px;top:52px;bottom:8px;width:1px;background:var(--site-line-gold)} #site .step:last-child::before{content:none} #site .step-num{position:absolute;left:0;top:0;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--site-gold);border-radius:50%;background:var(--site-paper);color:var(--site-gold-ink);font:500 17px/1 var(--site-serif)} #site .step h3{margin:9px 0 8px;font-size:1.3rem;line-height:1.2} #site .step p{color:var(--site-muted);font-size:1rem;line-height:1.55} /* warranty and after-sales: two navy cards with a gold inner frame */ #site .wcards{display:grid;grid-template-columns:minmax(0,1fr);gap:20px} #site .wcard{position:relative;isolation:isolate;padding:clamp(30px,4vw,46px) clamp(26px,3.4vw,42px);border-radius:var(--site-radius);background:var(--site-navy);color:#fff} #site .wcard::before{content:"";position:absolute;z-index:-1;inset:10px;border:1px solid var(--site-line-gold);border-radius:4px} #site .wcard-fig{display:flex;align-items:flex-end;gap:14px;margin-bottom:24px} #site .wcard-num{color:var(--site-gold-lite);font:500 clamp(4.5rem,7vw,6.25rem)/.8 var(--site-serif);font-optical-sizing:auto;letter-spacing:-.03em} #site .wcard-unit{padding:0 0 4px 14px;border-left:1px solid var(--site-line-gold);color:rgba(255,255,255,.82);font:600 12px/1.5 var(--site-sans);letter-spacing:.18em;text-transform:uppercase} #site .wcard h3{margin-bottom:12px;color:#fff;font-size:clamp(1.5rem,1.2vw + 1.1rem,1.9rem)} #site .wcard p:last-child{max-width:30em;color:rgba(255,255,255,.9);font-size:1.0625rem} @media (min-width:360px) and (max-width:599px){ #site .luzon-group ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px} } @media (min-width:720px){ #site .wcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} } @media (min-width:1100px){ #site .trust{gap:8px 22px} #site .trust-name{flex:0 1 auto} #site .trust-sep{display:inline} } @media (min-width:1024px){ #site .steps{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:26px} #site .step{padding:64px 0 0} #site .step::before{left:58px;right:-20px;top:22px;bottom:auto;width:auto;height:1px} #site .step h3{margin-top:0;font-size:1.2rem} } /* about: the "23" story moment */ #site .about-in{display:grid;grid-template-columns:minmax(0,1fr);gap:44px;align-items:center} #site .about-media img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px} #site .about-years{display:flex;align-items:flex-end;gap:16px;margin:4px 0 26px} #site .about-years-num{color:var(--site-gold-big);font:500 clamp(6rem,11vw + 1rem,10rem)/.8 var(--site-serif);font-optical-sizing:auto;letter-spacing:-.04em} #site .about-years-label{padding:0 0 4px 16px;border-left:1px solid var(--site-line-gold);color:var(--site-muted);font:600 12px/1.5 var(--site-sans);letter-spacing:.18em;text-transform:uppercase} #site .about-copy p+p{margin-top:16px} #site .about-copy .site-lead{color:var(--site-ink)} #site .about-copy .about-note{color:var(--site-muted)} #site .values{margin-top:28px;padding-top:20px;border-top:1px solid var(--site-line-gold);color:var(--site-navy);font-weight:600;letter-spacing:.01em} #site .tagline{margin-top:14px;color:var(--site-gold-ink);font:italic 500 1.25rem/1.4 var(--site-serif)} /* contact */ #site .contact-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:44px} #site .contact-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} /* "Message us" opens the Messenger chat (an m.me link: no logo image, no script, no widget): a small inline chat-bubble icon before the words, in the footer row, the contact buttons and the call-to-action bands. currentColor, so it follows the link's colour and its hover. */ #site .msg-ic{flex:none;margin-right:8px;vertical-align:-3px} #site .contact-list{border-top:1px solid var(--site-line)} #site .contact-list li{display:grid;grid-template-columns:86px minmax(0,1fr);gap:4px 18px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--site-line)} #site .contact-label{color:var(--site-muted);font:600 11px/1.4 var(--site-sans);letter-spacing:.16em;text-transform:uppercase} #site .contact-list a{color:var(--site-navy);font-weight:500;text-decoration:none;overflow-wrap:anywhere} #site .contact-list a:hover{text-decoration:underline;text-decoration-color:var(--site-gold);text-underline-offset:4px} #site address{font-style:normal} #site .contact-dirs{grid-column:2;display:flex;flex-wrap:wrap;gap:4px 22px} #site .contact-dir{font-size:14px} /* links to the public content pages (/services/, /work/, /areas-we-serve/, /faq/): an arrow link under a section lead, a row of them under a card or a CTA, the muted "Also: …" line under the fit-out card, and the link after a project gallery. Plain links, no script. */ #site .sec-link{margin-top:22px} #site .link-row{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:20px} #site .svc-body .svc-also{margin-top:14px;color:var(--site-muted);font-size:.9375rem;line-height:1.6} #site .svc-also a{color:var(--site-navy);font-weight:500;text-decoration-color:var(--site-gold);text-underline-offset:3px} #site .proj-more{margin-top:26px} #site .proj-all{margin-top:clamp(40px,5vw,64px)} /* footer */ #site-footer{padding:52px 0 60px;border-top:1px solid var(--site-line);background:var(--site-paper);color:var(--site-muted);font-size:14px} #site .foot-in{display:grid;grid-template-columns:minmax(0,1fr);gap:26px} #site .foot-name{margin-bottom:6px;color:var(--site-navy);font:600 17px/1.2 var(--site-serif)} #site .foot-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 26px} #site .foot-files{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px} /* the three PDF downloads, under the registrations (owner, 2026-10-22) */ #site #site-footer a.foot-portal{color:var(--site-muted);font-size:13px;font-weight:400} #site #site-footer a{color:var(--site-navy);font-weight:500;text-decoration:none} #site #site-footer a:hover{text-decoration:underline;text-decoration-color:var(--site-gold);text-underline-offset:4px} #site .foot-legal{padding-top:22px;border-top:1px solid var(--site-line);font-size:13px;line-height:1.55} /* the copyright notice (owner, 2026-10-22): small, in the footer's own colours */ /* scroll reveal: js/site.js adds .js-reveal to #site only when motion is allowed */ #site.js-reveal .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)} #site.js-reveal .reveal.is-in{opacity:1;transform:none} /* project photo lightbox (