/* RIZE — website kit. Screen expression of the print system: navy + grey,
   Lato only, wide tracking, hairline rules, no colour beyond the brand. */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--rz-navy-900);overflow:hidden}
.scroll{position:relative;height:100vh;overflow-y:auto;overflow-x:hidden;background:var(--rz-white);scroll-behavior:smooth}
.scroll.locked{overflow:hidden}

/* --- shared -------------------------------------------------------- */
.eyebrow{font-size:10.5px;font-weight:var(--rz-weight-bold);letter-spacing:var(--rz-track-wider);text-transform:uppercase;color:var(--rz-grey-600)}
.eyebrow.light,.eyebrow.dark{color:rgba(255,255,255,.68)}
.cap{font-size:var(--rz-size-caption);letter-spacing:var(--rz-track-wider);text-transform:uppercase;color:var(--rz-grey-500)}
.cap.invert{color:rgba(255,255,255,.6)}
.cap.dim{color:var(--rz-grey-400)}
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--rz-duration-slow) var(--rz-ease-out),transform var(--rz-duration-slow) var(--rz-ease-out)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.scroll{scroll-behavior:auto}}

.sec-head{padding:0 0 clamp(28px,4vw,54px)}
.sec-rule{width:100%;height:1px;background:var(--rz-rule);margin-bottom:clamp(14px,1.6vw,22px)}
.sec-rule.dark{background:rgba(255,255,255,.34)}
.sec-title{margin:0;white-space:pre-line;font-weight:var(--rz-weight-light);font-size:clamp(44px,7.4vw,96px);line-height:.98;letter-spacing:-.01em;color:var(--rz-grey-600)}
.sec-title.dark{color:var(--rz-white)}

.btn{font-family:inherit;font-size:11px;font-weight:var(--rz-weight-bold);letter-spacing:var(--rz-track-wider);text-transform:uppercase;padding:15px 26px;border:1px solid var(--rz-navy-700);background:var(--rz-navy-700);color:var(--rz-white);cursor:pointer;transition:var(--rz-transition-hover)}
.btn:hover{background:var(--rz-navy-400);border-color:var(--rz-navy-400)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.6);color:var(--rz-white)}
.btn.ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}
.btn.light{background:var(--rz-white);color:var(--rz-navy-700);border-color:var(--rz-white)}
.btn.light:hover{background:rgba(255,255,255,.82);border-color:rgba(255,255,255,.82)}

/* --- nav ----------------------------------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:22px clamp(20px,6vw,84px);transition:background-color var(--rz-duration-base) var(--rz-ease-standard),border-color var(--rz-duration-base) var(--rz-ease-standard);border-bottom:1px solid transparent}
.nav.solid{background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom-color:var(--rz-hairline)}
.nav-mark{background:none;border:0;padding:0;cursor:pointer;transition:var(--rz-transition-hover)}
.nav-mark:hover{opacity:var(--rz-hover-opacity)}
.nav-links{display:flex;gap:clamp(16px,2.4vw,34px)}
.nav-links button{background:none;border:0;padding:4px 0;font-family:inherit;font-size:10.5px;font-weight:var(--rz-weight-bold);letter-spacing:var(--rz-track-wider);text-transform:uppercase;color:rgba(255,255,255,.86);cursor:pointer;transition:var(--rz-transition-hover)}
.nav.solid .nav-links button{color:var(--rz-navy-700)}
.nav-links button:hover{opacity:var(--rz-hover-opacity)}

/* --- hero ---------------------------------------------------------- */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--rz-navy-900)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:heroIn 1400ms var(--rz-ease-out) both}
@keyframes heroIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,30,46,.62) 0%,rgba(16,30,46,.16) 34%,rgba(16,30,46,.5) 66%,rgba(16,30,46,.84) 100%)}
.hero-inner{position:relative;padding:110px clamp(20px,6vw,84px) clamp(28px,4vw,52px);max-width:1100px}
.hero-h1{margin:18px 0 24px;font-weight:var(--rz-weight-light);font-size:clamp(34px,5.6vw,74px);line-height:1.06;letter-spacing:-.012em;color:var(--rz-white);text-wrap:balance}
.hero-h1 em{font-style:normal;font-weight:var(--rz-weight-bold)}
.hero-sub{max-width:52ch;margin:0 0 32px;font-size:clamp(14px,1.2vw,17px);line-height:var(--rz-leading-body);color:rgba(255,255,255,.8)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-foot{position:relative;display:flex;justify-content:space-between;gap:16px;padding:0 clamp(20px,6vw,84px) 26px;border-top:0}
.hero-foot .cap{color:rgba(255,255,255,.62)}

/* --- statement ----------------------------------------------------- */
.statement{padding:clamp(70px,10vw,140px) clamp(20px,6vw,84px)}
.stmt-grid{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:clamp(18px,3vw,48px);align-items:start}
.stmt-lead{margin:0;font-weight:var(--rz-weight-light);font-size:clamp(20px,2.5vw,34px);line-height:1.38;letter-spacing:-.005em;color:var(--rz-navy-700);text-wrap:pretty}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,28px);margin-top:clamp(44px,6vw,86px);padding-top:26px;border-top:1px solid var(--rz-hairline)}
.stat-n{font-weight:var(--rz-weight-light);font-size:clamp(30px,4vw,54px);line-height:1;color:var(--rz-navy-700)}
.stat-l{margin-top:8px;font-size:10.5px;font-weight:var(--rz-weight-bold);letter-spacing:var(--rz-track-wider);text-transform:uppercase;color:var(--rz-grey-600)}

/* --- work ---------------------------------------------------------- */
.work{padding:clamp(50px,7vw,96px) clamp(20px,6vw,84px) clamp(70px,10vw,130px);background:var(--rz-white);border-top:1px solid var(--rz-hairline)}
.work-bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:22px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filter{font-family:inherit;font-size:10.5px;font-weight:var(--rz-weight-bold);letter-spacing:var(--rz-track-wide);text-transform:uppercase;padding:9px 16px;border:1px solid var(--rz-hairline);background:transparent;color:var(--rz-grey-600);cursor:pointer;transition:var(--rz-transition-hover)}
.filter:hover{color:var(--rz-navy-700);border-color:var(--rz-navy-200)}
.filter.on{background:var(--rz-navy-700);border-color:var(--rz-navy-700);color:var(--rz-white)}
.work-count{font-size:10.5px;font-weight:var(--rz-weight-bold);letter-spacing:var(--rz-track-wider);text-transform:uppercase;color:var(--rz-grey-500)}
.work-body{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:clamp(20px,3.4vw,52px);align-items:start}
.work-preview{position:sticky;top:104px}
.preview-frame{position:relative;aspect-ratio:4/5;background:var(--rz-grey-100);overflow:hidden}
.preview-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--rz-duration-base) var(--rz-ease-standard)}
.preview-img.on{opacity:1}
.preview-meta{display:flex;justify-content:space-between;gap:12px;padding-top:10px}
.work-index{border-top:1px solid var(--rz-hairline)}
/* Mobile index folding. On desktop both wrappers are display:contents, so the
   rows lay out exactly as if the markup were flat and the expander is hidden —
   the two-column layout is untouched. */
.work-more,.work-more-in{display:contents}
.work-expand{display:none}
.row{display:grid;grid-template-columns:38px minmax(0,1fr) 62px minmax(0,110px) 24px;align-items:center;gap:clamp(10px,1.6vw,22px);width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--rz-hairline);padding:16px 4px;font-family:inherit;cursor:pointer;transition:background-color var(--rz-duration-fast) var(--rz-ease-standard),padding var(--rz-duration-fast) var(--rz-ease-standard)}
.row:hover,.row.on{background:var(--rz-navy-050);padding-left:12px}
.row-n{font-size:11px;font-weight:var(--rz-weight-bold);letter-spacing:var(--rz-track-wide);color:var(--rz-grey-400)}
.row-main{display:block;min-width:0}
.row-name{display:block;font-size:clamp(15px,1.5vw,20px);font-weight:var(--rz-weight-regular);line-height:1.25;color:var(--rz-navy-700)}
.row-loc{display:block;margin-top:4px;font-size:11px;letter-spacing:var(--rz-track-wide);color:var(--rz-grey-600)}
.row-thumb{width:62px;height:44px;overflow:hidden;background:var(--rz-grey-100)}
.row-thumb img{width:100%;height:100%;object-fit:cover;transition:opacity var(--rz-duration-fast) var(--rz-ease-standard);opacity:.85}
.row:hover .row-thumb img{opacity:1}
.row-status{font-size:10px;font-weight:var(--rz-weight-bold);letter-spacing:var(--rz-track-wide);text-transform:uppercase;color:var(--rz-grey-500)}
.row-go{font-size:15px;color:var(--rz-navy-200);text-align:right;transition:var(--rz-transition-hover)}
.row:hover .row-go{color:var(--rz-navy-700)}

/* --- project sheet -------------------------------------------------- */
.sheet{position:fixed;inset:0;z-index:60;background:var(--rz-navy-900);animation:sheetIn var(--rz-duration-base) var(--rz-ease-out) both}
@keyframes sheetIn{from{opacity:0}to{opacity:1}}
.sheet-scroll{height:100%;overflow-y:auto;padding:clamp(18px,3vw,34px) clamp(20px,6vw,84px) clamp(40px,6vw,80px)}
.sheet-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:18px}
.sheet-x{background:none;border:1px solid rgba(255,255,255,.4);color:#fff;font-family:inherit;font-size:10.5px;font-weight:var(--rz-weight-bold);letter-spacing:var(--rz-track-wider);text-transform:uppercase;padding:10px 16px;cursor:pointer;transition:var(--rz-transition-hover)}
.sheet-x:hover{background:rgba(255,255,255,.14);border-color:#fff}
.sheet-plate{margin:0}
.sheet-plate img{width:100%;max-height:64vh;object-fit:cover;background:var(--rz-navy-800)}
.sheet-plate figcaption{padding-top:10px}
.sheet-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(20px,4vw,64px);padding-top:clamp(28px,4vw,56px);border-top:1px solid rgba(255,255,255,.16);margin-top:clamp(22px,3vw,40px)}
.sheet-name{margin:12px 0 0;font-weight:var(--rz-weight-light);font-size:clamp(30px,4.4vw,60px);line-height:1.04;letter-spacing:-.012em;color:var(--rz-white);text-wrap:balance}
.sheet-right{display:grid;gap:clamp(18px,2.4vw,32px)}
.specs{margin:0;display:grid;gap:0}
.spec{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.13)}
.spec dt{font-size:10px;font-weight:var(--rz-weight-bold);letter-spacing:var(--rz-track-wider);text-transform:uppercase;color:rgba(255,255,255,.5)}
.spec dd{margin:0;font-size:13.5px;letter-spacing:var(--rz-track-body);color:rgba(255,255,255,.92)}
.sheet-body{margin:0;font-size:clamp(14px,1.15vw,16px);line-height:var(--rz-leading-body);color:rgba(255,255,255,.78);text-wrap:pretty}
.sheet-nav{display:flex;justify-content:space-between;gap:16px;margin-top:clamp(30px,4vw,58px);padding-top:20px;border-top:1px solid rgba(255,255,255,.16)}
.sheet-nav button{background:none;border:0;padding:0;font-family:inherit;font-size:11px;font-weight:var(--rz-weight-bold);letter-spacing:var(--rz-track-wide);text-transform:uppercase;color:rgba(255,255,255,.72);cursor:pointer;transition:var(--rz-transition-hover)}
.sheet-nav button:hover{color:#fff}

/* --- services ------------------------------------------------------- */
.services{padding:clamp(70px,10vw,140px) clamp(20px,6vw,84px);background:var(--rz-navy-700);color:var(--rz-white)}
.svc-list{border-top:1px solid rgba(255,255,255,.2)}
.svc{display:grid;grid-template-columns:52px minmax(0,1fr) 28px;align-items:center;gap:14px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.2);padding:clamp(14px,1.8vw,22px) 2px;font-family:inherit;color:var(--rz-white);cursor:pointer;transition:var(--rz-transition-hover)}
.svc:hover{opacity:.82}
.svc-n{font-size:11px;font-weight:var(--rz-weight-bold);letter-spacing:var(--rz-track-wide);color:rgba(255,255,255,.5)}
.svc-t{font-weight:var(--rz-weight-light);font-size:clamp(19px,2.6vw,34px);line-height:1.2}
.svc-x{font-size:19px;text-align:right;color:rgba(255,255,255,.6)}
.svc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--rz-duration-base) var(--rz-ease-standard)}
.svc-body.open{grid-template-rows:1fr;border-bottom:1px solid rgba(255,255,255,.2)}
.svc-body>p{overflow:hidden;margin:0;padding:0 66px;font-size:14.5px;line-height:var(--rz-leading-body);color:rgba(255,255,255,.74);transition:padding var(--rz-duration-base) var(--rz-ease-standard);max-width:74ch}
.svc-body.open>p{padding:2px 66px clamp(18px,2vw,26px)}

/* --- studio --------------------------------------------------------- */
.studio{padding:clamp(70px,10vw,140px) clamp(20px,6vw,84px);border-top:1px solid var(--rz-hairline)}
.team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,68px)}
.member-plate{background:var(--rz-grey-100);aspect-ratio:947/1400;overflow:hidden;margin-bottom:20px}
.member-plate img{width:100%;height:100%;object-fit:cover;object-position:50% 6%}
.member-name{margin:8px 0 14px;font-weight:var(--rz-weight-light);font-size:clamp(22px,2.6vw,34px);line-height:1.14;color:var(--rz-navy-700)}
.member-body{margin:0;font-size:14.5px;line-height:var(--rz-leading-body);color:var(--rz-grey-700);text-wrap:pretty}

/* --- contact -------------------------------------------------------- */
.contact{padding:clamp(70px,10vw,140px) clamp(20px,6vw,84px) clamp(30px,4vw,48px);background:var(--rz-navy-900);color:var(--rz-white)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,72px);align-items:start}
.acr{display:flex;align-items:baseline;gap:2px;padding:clamp(6px,1vw,12px) 0;border-bottom:1px solid rgba(255,255,255,.14)}
.acr-a{font-weight:var(--rz-weight-bold);font-size:clamp(26px,3.6vw,50px);line-height:1.1;color:var(--rz-white)}
.acr-b{font-weight:var(--rz-weight-light);font-size:clamp(22px,3vw,42px);line-height:1.1;color:rgba(255,255,255,.72)}
.contact-right{display:grid;gap:clamp(20px,2.6vw,34px)}
.contact-block{display:grid;gap:8px}
.contact-line{font-size:clamp(15px,1.5vw,19px);font-weight:var(--rz-weight-light);color:rgba(255,255,255,.92);line-height:1.5;border:0}
a.contact-line{border-bottom:1px solid rgba(255,255,255,.3);justify-self:start;transition:var(--rz-transition-hover)}
a.contact-line:hover{color:#fff;border-bottom-color:#fff}
.enquiry{display:grid;gap:10px;padding-top:clamp(8px,1.4vw,16px)}
.enquiry input,.enquiry textarea{font-family:inherit;font-size:14px;color:#fff;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.3);padding:12px 2px;resize:vertical;transition:border-color var(--rz-duration-fast) var(--rz-ease-standard)}
.enquiry input::placeholder,.enquiry textarea::placeholder{color:rgba(255,255,255,.42)}
.enquiry input:focus,.enquiry textarea:focus{outline:0;border-bottom-color:#fff}
.enquiry .btn{justify-self:start;margin-top:8px}
.foot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:end;margin-top:clamp(48px,7vw,100px);padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.foot-legal{font-size:10.5px;line-height:1.7;letter-spacing:.02em;color:rgba(255,255,255,.42);max-width:70ch}

/* --- intro ----------------------------------------------------------- */
.intro{position:fixed;inset:0;z-index:100;background:var(--rz-navy-900);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:opacity 420ms var(--rz-ease-standard)}
.intro.out{opacity:0;pointer-events:none}
.intro-mark{color:var(--rz-white);font-weight:var(--rz-weight-bold);font-size:clamp(40px,6vw,72px);line-height:1;letter-spacing:.42em;margin-right:-.42em;animation:introTrack 1200ms var(--rz-ease-out) both}
@keyframes introTrack{from{letter-spacing:.06em;margin-right:-.06em;opacity:0}to{letter-spacing:.42em;margin-right:-.42em;opacity:1}}
.intro-sub{font-size:11px;font-weight:var(--rz-weight-bold);letter-spacing:var(--rz-track-wider);text-transform:uppercase;color:rgba(255,255,255,.55);animation:introSub 700ms var(--rz-ease-out) 600ms both}
@keyframes introSub{from{opacity:0}to{opacity:1}}

/* --- materials ------------------------------------------------------- */
.materials{padding:clamp(70px,10vw,140px) clamp(20px,6vw,84px);border-top:1px solid var(--rz-hairline)}
.mat-note{margin:-14px 0 clamp(26px,3vw,44px);max-width:52ch;font-size:15px;line-height:var(--rz-leading-body);color:var(--rz-grey-700)}
.mat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px);border-top:1px solid var(--rz-hairline)}
.mat{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:baseline;gap:14px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--rz-hairline);padding:clamp(14px,1.8vw,20px) 10px;font-family:inherit;cursor:pointer;transition:background-color var(--rz-duration-fast) var(--rz-ease-standard)}
.mat-n{font-size:11px;font-weight:var(--rz-weight-bold);letter-spacing:var(--rz-track-wide);color:var(--rz-grey-400)}
.mat-name{font-weight:var(--rz-weight-light);font-size:clamp(17px,1.8vw,24px);line-height:1.25;color:var(--rz-navy-700);transition:color var(--rz-duration-fast) var(--rz-ease-standard)}
.mat-proj{font-size:10px;font-weight:var(--rz-weight-bold);letter-spacing:var(--rz-track-wide);text-transform:uppercase;color:var(--rz-grey-500);transition:color var(--rz-duration-fast) var(--rz-ease-standard)}
.mat:hover{background:var(--rz-navy-700)}
.mat:hover .mat-name{color:var(--rz-white)}
.mat:hover .mat-n,.mat:hover .mat-proj{color:rgba(255,255,255,.66)}

/* --- map ------------------------------------------------------------- */
.mapsec{padding:clamp(70px,10vw,140px) clamp(20px,6vw,84px);border-top:1px solid var(--rz-hairline)}
.map-frame{position:relative;height:clamp(380px,58vh,620px);background:var(--rz-grey-100)}
.map-el{position:absolute;inset:0;z-index:1}
.leaflet-container{font-family:inherit}
.map-el .leaflet-tile{filter:grayscale(1) sepia(.16) hue-rotate(174deg) saturate(2.2) brightness(1.04) contrast(.94)}
.leaflet-bar,.leaflet-bar a{border-radius:0!important}
.leaflet-touch .leaflet-bar a{color:var(--rz-navy-700)}
.pin-in{display:block;position:relative;width:13px;height:13px;animation:pinIn 460ms var(--rz-ease-out) both}
@keyframes pinIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.pin-ring{position:absolute;inset:-7px;border:1.5px solid var(--rz-navy-700);opacity:0;animation:pinPulse 2.8s var(--rz-ease-standard) infinite}
@keyframes pinPulse{0%{transform:scale(.45);opacity:.75}70%{transform:scale(1.3);opacity:0}100%{transform:scale(1.3);opacity:0}}
@media (prefers-reduced-motion:reduce){.pin-in{animation:none}.pin-ring{display:none}}
.pin-dot{display:block;position:relative;width:13px;height:13px;background:var(--rz-navy-700);border:2px solid #fff;box-shadow:0 0 0 1px rgba(26,44,64,.3);transition:var(--rz-transition-hover)}
/* Touch: widen the pin's hit area to ~31px without changing the 13px mark.
   Kept modest on purpose — the Metro Manila pins sit close together and a full
   44px target would have neighbours stealing each other's taps. */
@media (pointer:coarse){.pin-in::after{content:"";position:absolute;inset:-9px}}
.pin:hover .pin-dot{background:var(--rz-navy-400)}
.pin-tip{background:var(--rz-navy-700);color:var(--rz-white);border:0;border-radius:0;box-shadow:none;padding:10px 14px}
.leaflet-tooltip-top.pin-tip::before{border-top-color:var(--rz-navy-700)}
.tip-name{display:block;font-size:12.5px;font-weight:var(--rz-weight-bold);letter-spacing:.02em}
.tip-loc{display:block;margin-top:3px;font-size:9.5px;font-weight:var(--rz-weight-bold);letter-spacing:var(--rz-track-wide);text-transform:uppercase;color:rgba(255,255,255,.66)}
.map-el .leaflet-control-attribution{font-size:9px;background:rgba(255,255,255,.85);color:var(--rz-grey-600)}

/* --- lightbox -------------------------------------------------------- */
.zoomable{cursor:zoom-in}
.plate-zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:80;background:var(--rz-navy-900);animation:sheetIn var(--rz-duration-base) var(--rz-ease-out) both}
.lb-img{width:100%;height:100%;object-fit:contain;padding:clamp(56px,9vh,84px) clamp(64px,8vw,120px);animation:sheetIn 420ms var(--rz-ease-standard) both}
.lb-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:clamp(18px,3vw,30px) clamp(20px,6vw,84px) 0}
.lb-foot{position:absolute;bottom:0;right:0;padding:0 clamp(20px,6vw,84px) 24px}
.lb-arrow{position:absolute;top:50%;margin-top:-24px;width:48px;height:48px;display:grid;place-items:center;background:rgba(16,30,46,.4);border:1px solid rgba(255,255,255,.35);color:var(--rz-white);font-family:inherit;font-size:18px;cursor:pointer;transition:var(--rz-transition-hover)}
.lb-arrow:hover{background:rgba(255,255,255,.14);border-color:#fff}
.lb-arrow.left{left:clamp(12px,2.6vw,32px)}
.lb-arrow.right{right:clamp(12px,2.6vw,32px)}

/* --- before / after -------------------------------------------------- */
.cmp{position:relative;width:100%;aspect-ratio:16/9;max-height:64vh;overflow:hidden;background:var(--rz-navy-800);touch-action:pan-y}
.cmp-after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp-before{position:absolute;inset:0}
.cmp-before-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* --- project sheet gallery ----------------------------------------- */
.sheet-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:clamp(28px,4vw,54px) 0 0}
@media (max-width:960px){.sheet-gallery{grid-template-columns:1fr}}
.sheet-gallery .shot{display:flex;flex-direction:column;gap:10px}
.shot-plate{display:block;width:100%;aspect-ratio:16/10;padding:0;margin:0;border:0;border-radius:0;background:var(--rz-navy-800);overflow:hidden;cursor:zoom-in}
.shot-plate img{display:block;width:100%;height:100%;object-fit:cover}
.shot-plate:focus-visible{outline:2px solid var(--rz-white);outline-offset:2px}
/* Stand-in for the pre-renovation photo, which the client has not supplied yet.
   The caption centres inside the revealed strip (width tracks the divider) so it
   never reads as a half-clipped word. */
.cmp-pending{position:absolute;inset:0;background:var(--rz-navy-700)}
.cmp-pending-in{position:absolute;top:0;bottom:0;left:0;display:grid;place-items:center;overflow:hidden;padding:0 10px}
.cmp-pending-cap{font-size:10.5px;font-weight:var(--rz-weight-bold);letter-spacing:var(--rz-track-wider);text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap}
.cmp-tag{position:absolute;bottom:12px;font-size:10px;font-weight:var(--rz-weight-bold);letter-spacing:var(--rz-track-wider);text-transform:uppercase;color:var(--rz-white);background:rgba(16,30,46,.55);padding:6px 10px;pointer-events:none;z-index:2}
.cmp-tag.left{left:12px}
.cmp-tag.right{right:12px}
.cmp-line{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--rz-white);cursor:ew-resize;touch-action:none;z-index:3}
.cmp-line:focus-visible{outline:2px solid var(--rz-white);outline-offset:2px}
.cmp-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;display:grid;place-items:center;background:var(--rz-navy-700);border:1px solid var(--rz-white);color:var(--rz-white);font-size:15px}

/* --- mobile menu ------------------------------------------------------
   Typographic only — the brand has no icon set, so the trigger is the word
   MENU in the nav-link style inside a hairline box (quiet, like a filter chip).
   Shown only under 560px, where the inline link row stops having comfortable
   clearance from the wordmark. */
.nav-menu{display:none;align-items:center;min-height:42px;background:none;border:1px solid rgba(255,255,255,.4);color:rgba(255,255,255,.86);font-family:inherit;font-size:10.5px;font-weight:var(--rz-weight-bold);letter-spacing:var(--rz-track-wider);text-transform:uppercase;padding:0 16px;cursor:pointer;transition:var(--rz-transition-hover)}
.nav.solid .nav-menu{color:var(--rz-navy-700);border-color:var(--rz-navy-200)}
.nav-menu:hover{opacity:var(--rz-hover-opacity)}

.menu{position:fixed;inset:0;z-index:70;background:var(--rz-navy-900);display:flex;flex-direction:column;overflow-y:auto;padding:22px clamp(20px,6vw,84px) clamp(28px,6vw,64px);animation:sheetIn var(--rz-duration-slow) var(--rz-ease-standard) both}
.menu-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.menu-links{display:flex;flex-direction:column;margin-top:clamp(26px,7vh,60px)}
.menu-links button{background:none;border:0;border-top:1px solid rgba(255,255,255,.13);width:100%;text-align:left;padding:clamp(14px,2.4vh,22px) 0;font-family:inherit;font-weight:var(--rz-weight-light);font-size:clamp(30px,9vw,44px);line-height:1.12;letter-spacing:var(--rz-track-wide);text-transform:uppercase;color:var(--rz-white);cursor:pointer;animation:sheetIn var(--rz-duration-slow) var(--rz-ease-standard) both;transition:var(--rz-transition-hover)}
.menu-links button:last-child{border-bottom:1px solid rgba(255,255,255,.13)}
.menu-links button:hover{opacity:var(--rz-hover-opacity)}
@media (prefers-reduced-motion:reduce){.menu,.menu-links button{animation:none}.work-more{transition:none}}

@media (max-width:560px){
  .nav-links{display:none}
  .nav-menu{display:inline-flex}
}
/* keep the lockup off the menu button on the narrowest phones */
@media (max-width:400px){
  .nav-mark>div:first-child{font-size:16px!important;letter-spacing:.32em!important;text-indent:.32em!important}
  .nav-mark>div:nth-child(2){font-size:7.5px!important;letter-spacing:.22em!important;text-indent:.22em!important}
}

/* --- responsive ------------------------------------------------------ */
@media (max-width:960px){
  .nav-links{gap:14px}
  .stmt-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr);row-gap:24px}
  .work-body{grid-template-columns:1fr}
  /* fold the tail of the index — same mechanic as the services accordion */
  .work-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--rz-duration-slow) var(--rz-ease-standard)}
  .work-more.open{grid-template-rows:1fr}
  .work-more-in{display:block;overflow:hidden}
  .work-expand{display:block;width:100%;margin-top:-1px;min-height:44px;padding:12px 16px;font-family:inherit;font-size:11px;font-weight:var(--rz-weight-bold);letter-spacing:var(--rz-track-wider);text-transform:uppercase;color:var(--rz-navy-700);background:transparent;border:1px solid var(--rz-hairline);cursor:pointer;transition:var(--rz-transition-hover)}
  .work-expand:hover{border-color:var(--rz-navy-200)}
  .work-preview{display:none}
  .row{grid-template-columns:30px minmax(0,1fr) 54px 20px}
  .row-status{display:none}
  .mat-grid{grid-template-columns:1fr}
  .sheet-grid,.contact-grid,.team,.foot{grid-template-columns:1fr}
  .svc-body>p,.svc-body.open>p{padding-left:0;padding-right:0}
}
@media (max-width:620px){
  .nav-links button{font-size:9.5px}
  .hero-foot .cap:last-child{display:none}
  .row-thumb{display:none}
  .row{grid-template-columns:28px minmax(0,1fr) 20px}
  /* iOS zooms the page when a focused input is under 16px */
  .enquiry input,.enquiry textarea{font-size:16px}
  /* touch targets: the sheet/lightbox close and the lightbox arrows */
  .sheet-x{min-height:44px;display:inline-flex;align-items:center;padding:0 16px}
  .lb-arrow{width:44px;height:44px;margin-top:-22px}
  /* the map/preview meta pair reads as two cramped columns at phone widths */
  .preview-meta{flex-direction:column;gap:4px}
}