/* Clean Construction and Property Maintenance — site styles
   Brand: navy #26408B, clay #99685A, Poppins */
:root{
  --navy:#26408B; --navy-d:#1B2F68; --clay:#99685A; --clay-l:#F3EAE6;
  --ink:#1E2330; --muted:#5B6172; --line:#DCDFE8; --wash:#F3F5FA; --white:#fff;
  --r:10px; --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;font-family:Poppins,system-ui,sans-serif;font-size:17px;line-height:1.65;color:var(--ink);background:var(--white)}
img{max-width:100%;display:block}
a{color:var(--navy)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--clay);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:99}
h1,h2,h3{color:var(--navy);line-height:1.15;letter-spacing:-.01em;margin:0 0 .45em}
h1{font-size:clamp(2.2rem,4.6vw,3.6rem);font-weight:700}
h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:700}
h3{font-size:1.18rem;font-weight:600}
p{margin:0 0 1em;max-width:68ch}
.lede{font-size:1.15rem;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:.9rem}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.78em 1.35em;border-radius:999px;font:600 .98rem Poppins,sans-serif;text-decoration:none;border:2px solid var(--navy);color:var(--navy);background:transparent;cursor:pointer}
.btn-solid{background:var(--navy);color:#fff}
.btn-solid:hover{background:var(--navy-d);border-color:var(--navy-d)}
.btn:hover{text-decoration:none}
.btn-clay{background:var(--clay);border-color:var(--clay);color:#fff}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* header */
.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;min-height:78px}
.brand img{height:54px;width:auto}
.nav{display:flex;align-items:center;gap:26px}
.nav a{text-decoration:none;font-weight:500;font-size:.97rem;color:var(--ink)}
.nav a[aria-current=page]{color:var(--navy);box-shadow:inset 0 -2px 0 var(--clay)}
.nav .btn{color:#fff}
.menu-btn{display:none;font:600 .95rem Poppins;background:none;border:2px solid var(--navy);color:var(--navy);border-radius:999px;padding:.45em 1em}
@media (max-width:900px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:78px;background:#fff;flex-direction:column;align-items:flex-start;padding:18px 24px 24px;border-bottom:1px solid var(--line);gap:16px}
  .nav.open{display:flex}
}

/* sections */
.sec{padding:84px 0}
.sec.wash{background:var(--wash)}
.sec-head{max-width:720px;margin-bottom:36px}
.hr{width:64px;height:4px;border-radius:4px;background:var(--clay);margin:0 0 18px}

/* hero with before/after */
.hero{padding:56px 0 72px}
.hero-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.hero p.lede{margin-bottom:28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-facts{display:flex;gap:34px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.hero-facts b{display:block;font-size:1.6rem;color:var(--navy);line-height:1.1}
.hero-facts span{font-size:.85rem;color:var(--muted)}
.ba{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3;user-select:none;touch-action:pan-y;background:#ddd}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .ba-after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba .ba-line{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;background:#fff;transform:translateX(-50%)}
.ba .ba-knob{position:absolute;top:50%;left:var(--pos,50%);transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:#fff;border:0;color:var(--navy);font:700 1rem Poppins;display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.25);cursor:ew-resize}
.ba .tag{position:absolute;bottom:14px;padding:.25em .8em;border-radius:999px;background:rgba(27,47,104,.85);color:#fff;font-size:.82rem;font-weight:500}
.ba .tag.l{left:14px}.ba .tag.r{right:14px;background:rgba(153,104,90,.92)}
.ba-cap{font-size:.88rem;color:var(--muted);margin-top:10px}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:34px}.hero{padding-top:28px}}

/* services list */
.svc-list{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.svc{display:grid;grid-template-columns:112px 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--line)}
.svc img{width:112px;height:88px;object-fit:cover;border-radius:8px}
.svc h3{margin-bottom:.2em}
.svc p{margin:0;font-size:.95rem;color:var(--muted)}
@media (max-width:800px){.svc-list{grid-template-columns:1fr}}

/* steps (a real sequence) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:s}
.step{position:relative;padding-top:58px}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;width:42px;height:42px;border-radius:50%;background:var(--clay);color:#fff;font-weight:700;display:grid;place-items:center}
.step p{font-size:.95rem;color:var(--muted);margin:0}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* project features */
.proj-row{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:center;padding:34px 0;border-top:1px solid var(--line)}
.proj-row:nth-child(even) .proj-img{order:2}
.proj-img img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px}
.status{display:inline-block;font-size:.8rem;font-weight:600;padding:.2em .8em;border-radius:999px;background:var(--clay-l);color:var(--clay);margin-bottom:10px}
.status.prog{background:#E6EBF8;color:var(--navy)}
.meta{font-size:.92rem;color:var(--muted);margin-bottom:12px}
@media (max-width:800px){.proj-row{grid-template-columns:1fr;gap:20px}.proj-row:nth-child(even) .proj-img{order:0}}

/* project detail */
.pdetail h2{margin-top:0}
.prow{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}
.prow.p{grid-template-columns:repeat(2,minmax(0,300px));justify-content:center}
.prow figure,.pfull{margin:0}
.prow img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;cursor:zoom-in}
.prow.p img{aspect-ratio:3/4}
.pfull img{width:100%;max-height:560px;object-fit:cover;border-radius:12px;cursor:zoom-in}
figcaption{font-size:.86rem;color:var(--muted);margin-top:6px}
.plabel{font-weight:600;color:var(--clay);margin:26px 0 4px}
.toc{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px;padding:0;list-style:none}
.toc a{display:block;padding:.4em .95em;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-size:.9rem;color:var(--ink)}
.toc a:hover{border-color:var(--navy);color:var(--navy)}
.pblock{padding:48px 0;border-top:1px solid var(--line);scroll-margin-top:90px}
@media (max-width:640px){.prow,.prow.p{grid-template-columns:1fr}}

/* gallery */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.gal-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;cursor:zoom-in}
.gal-item{padding:30px 0;border-top:1px solid var(--line)}
.gal-item .date{color:var(--clay);font-weight:600;font-size:.9rem}
.lightbox{position:fixed;inset:0;background:rgba(15,20,35,.92);display:none;align-items:center;justify-content:center;z-index:90;padding:20px}
.lightbox.on{display:flex}
.lightbox img{max-height:86vh;max-width:92vw;border-radius:8px}
.lightbox button{position:absolute;top:16px;right:16px;background:#fff;border:0;border-radius:999px;padding:.5em 1em;font:600 .9rem Poppins;cursor:pointer}

/* overseas band */
.band{background:var(--navy);color:#dfe5f6}
.band h2{color:#fff}
.band .btn{border-color:#fff;color:#fff}
.band .btn-clay{border-color:var(--clay)}
.band-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.band img{border-radius:14px;width:100%;aspect-ratio:4/3;object-fit:cover}
.ticks{list-style:none;padding:0;margin:0 0 26px}
.ticks li{padding-left:30px;position:relative;margin-bottom:10px}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:8px;border-left:3px solid var(--clay);border-bottom:3px solid var(--clay);transform:rotate(-45deg)}
@media (max-width:800px){.band-grid{grid-template-columns:1fr}}

/* about */
.team{width:100%;border-radius:18px;aspect-ratio:21/9;object-fit:cover;object-position:center 30%}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.values{display:grid;grid-template-columns:1fr 1fr;gap:26px 48px}
.values div{border-left:4px solid var(--clay);padding-left:18px}
.values p{color:var(--muted);margin:0;font-size:.95rem}
table.tbl{width:100%;border-collapse:collapse;font-size:.95rem}
table.tbl th{text-align:left;background:var(--navy);color:#fff;font-weight:600;padding:.7em .9em}
table.tbl td{padding:.62em .9em;border-bottom:1px solid var(--line);vertical-align:top}
table.tbl tr:nth-child(even) td{background:var(--wash)}
table.tbl td.p{color:var(--navy);font-weight:600}
.tbl-wrap{overflow-x:auto}
dl.kv{display:grid;grid-template-columns:200px 1fr;margin:0}
dl.kv dt{color:var(--muted);padding:.55em 0;border-bottom:1px solid var(--line)}
dl.kv dd{margin:0;padding:.55em 0;border-bottom:1px solid var(--line);font-weight:500}
@media (max-width:800px){.two,.values{grid-template-columns:1fr}dl.kv{grid-template-columns:1fr}dl.kv dt{border:0;padding-bottom:0}}

/* forms */
.form-wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:start}
.panel{background:var(--wash);border-radius:16px;padding:28px}
form .field{margin-bottom:18px}
label{display:block;font-weight:500;font-size:.95rem;margin-bottom:6px}
.hint{display:block;font-size:.84rem;color:var(--muted);font-weight:400}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],input[type=password],select,textarea{width:100%;font:400 1rem Poppins,sans-serif;padding:.72em .85em;border:1.5px solid #C9CEDB;border-radius:8px;background:#fff;color:var(--ink)}
textarea{min-height:120px;resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.checks label,.radio label{font-weight:400;display:flex;gap:10px;align-items:flex-start;margin:0}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.slots label{border:1.5px solid #C9CEDB;border-radius:8px;padding:.6em .8em;font-weight:500;cursor:pointer;display:flex;gap:8px;align-items:center;margin:0}
.slots input:checked+span{color:var(--navy)}
.seg{display:flex;gap:10px;flex-wrap:wrap}
.seg label{border:1.5px solid #C9CEDB;border-radius:999px;padding:.5em 1.1em;cursor:pointer;margin:0;font-weight:500;display:flex;gap:8px;align-items:center}
.err{background:#FBECEA;color:#8A2A1F;border-radius:10px;padding:14px 18px;margin-bottom:22px}
.ok{background:#E8F3EC;color:#1E5B34;border-radius:12px;padding:20px 22px;margin-bottom:22px}
.ok h2{color:#1E5B34}
@media (max-width:900px){.form-wrap{grid-template-columns:1fr}.grid2,.checks,.slots{grid-template-columns:1fr}}

/* pay */
.methods{display:grid;gap:14px;margin:8px 0 22px}
.method{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;border:1.5px solid #C9CEDB;border-radius:12px;padding:16px 18px;cursor:pointer;margin:0;font-weight:400}
.method b{display:block;color:var(--navy)}
.method small{color:var(--muted)}
.method:has(input:checked){border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.method.off{opacity:.55;cursor:not-allowed}
.receipt{max-width:640px;border:1px solid var(--line);border-radius:16px;padding:30px}
.receipt dl.kv{grid-template-columns:170px 1fr}

/* CTA band + footer */
.cta{background:var(--clay-l)}
.cta-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:22px}
.cta h2{margin:0}
.foot{background:var(--navy-d);color:#C9D2EC;padding:60px 0 20px;font-size:.93rem}
.foot a{color:#fff;text-decoration:none}.foot a:hover{text-decoration:underline}
.foot-in{display:grid;grid-template-columns:.8fr 1fr 1fr 1.2fr;gap:36px}
.foot-h{color:#fff;font-size:1rem;margin-bottom:.6em}
.foot-logo{width:110px;height:auto}
.foot-small{margin-top:40px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-size:.82rem;max-width:none}
@media (max-width:900px){.foot-in{grid-template-columns:1fr 1fr}}
.wa{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:50}

/* admin */
.admin table.tbl{font-size:.88rem}
.pill{display:inline-block;padding:.1em .7em;border-radius:999px;font-size:.8rem;font-weight:600;background:#E6EBF8;color:var(--navy)}
.pill.paid{background:#E8F3EC;color:#1E5B34}.pill.failed{background:#FBECEA;color:#8A2A1F}

/* ---- Pacific accents: masi (tapa) watermark, ocean waves, palm and frangipani ----
   All decoration is background art: aria-hidden by nature, never blocks clicks. */
body{background:#fff url(/assets/img/deco/masi.svg) 0 0/200px repeat}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:6px;background:url(/assets/img/deco/tapa-ribbon.svg) 0 0/18px 6px repeat-x;opacity:.55;pointer-events:none}
.hr{width:84px;height:8px;border-radius:0;background:url(/assets/img/deco/tapa-ribbon.svg) 0 0/19px 8px repeat-x}

/* hero: palm fronds drifting in from the corners */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;background:url(/assets/img/deco/palm.svg) no-repeat center/contain;opacity:.08}
.hero::before{width:560px;height:560px;left:-160px;bottom:-130px}
.hero::after{width:440px;height:440px;right:-150px;top:-130px;transform:scaleX(-1) rotate(-20deg);opacity:.06}

/* tinted sections carry a slightly stronger masi print */
.sec.wash{background:var(--wash) url(/assets/img/deco/masi-wash.svg) 0 0/200px repeat}

/* ocean-wave edges on the navy band and the footer */
.band,.foot{position:relative}
.band{background:var(--navy) url(/assets/img/deco/masi-light.svg) 0 0/200px repeat}
.band::before,.foot::before{content:"";position:absolute;left:0;right:0;top:-34px;height:35px;pointer-events:none;background-repeat:no-repeat;background-size:100% 100%}
.band::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath fill='%2326408B' d='M0 26C120 8 240 6 360 18S600 40 720 30 960 4 1080 12 1200 28 1200 28V40H0Z'/%3E%3Cpath fill='%2399685A' opacity='.35' d='M0 34C150 20 300 18 450 28S750 40 900 30 1200 22 1200 22V40H0Z'/%3E%3C/svg%3E")}
.foot{background:var(--navy-d) url(/assets/img/deco/masi-light.svg) 0 0/200px repeat}
.foot::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath fill='%2326408B' opacity='.45' d='M0 20C200 4 400 6 600 18S1000 34 1200 16V40H0Z'/%3E%3Cpath fill='%231B2F68' d='M0 30C160 16 320 14 480 24S800 40 960 30 1200 18 1200 18V40H0Z'/%3E%3C/svg%3E")}
.foot::after{content:"";position:absolute;right:4%;bottom:46px;width:150px;height:150px;background:url(/assets/img/deco/frangipani.svg) no-repeat center/contain;opacity:.12;pointer-events:none}

/* call-to-action: a frangipani resting in the corner */
.cta{position:relative;overflow:hidden;isolation:isolate}
.cta::after{content:"";position:absolute;z-index:-1;right:-40px;top:50%;width:230px;height:230px;transform:translateY(-50%) rotate(18deg);background:url(/assets/img/deco/frangipani.svg) no-repeat center/contain;opacity:.16;pointer-events:none}

/* project photos sit on an offset masi-printed card */
.proj-img{position:relative;isolation:isolate}
.proj-img::before{content:"";position:absolute;z-index:-1;inset:16px -16px -16px 16px;border-radius:16px;background:var(--clay-l) url(/assets/img/deco/masi-clay.svg) 0 0/120px repeat}
.proj-row:nth-child(even) .proj-img::before{inset:16px 16px -16px -16px}
.proj-row{padding:44px 0}

/* step numbers wear a thin tapa ring */
.step::before{box-shadow:0 0 0 4px #fff,0 0 0 6px var(--clay-l)}

/* the before/after frame gets the same soft offset card */
.ba{box-shadow:16px 16px 0 -2px var(--clay-l)}

@media (max-width:800px){
  .hero::before{width:380px;height:380px;left:-150px;bottom:-150px}
  .hero::after{display:none}
  .proj-img::before{inset:10px -10px -10px 10px}
  .proj-row:nth-child(even) .proj-img::before{inset:10px -10px -10px 10px}
  .foot::after{width:110px;height:110px}
}

/* ---- invoices ---- */
.invoice{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px}
.inv-head{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start;padding-bottom:18px;border-bottom:3px solid var(--navy)}
.inv-head img{height:58px;width:auto}
.inv-co{text-align:right;color:var(--muted);line-height:1.5}
.inv-title{display:flex;align-items:center;gap:14px;margin:22px 0 10px}
.inv-title h1{font-size:2rem;margin:0}
.inv-meta{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:22px}
.inv-meta dl.kv{grid-template-columns:140px 1fr}
.inv-tot{display:grid;grid-template-columns:1fr 160px;gap:6px 18px;margin:16px 0 18px;text-align:right}
.inv-tot dt,.inv-tot dd{margin:0}
.inv-tot .big{font-size:1.25rem;font-weight:700;color:var(--navy);border-top:2px solid var(--navy);padding-top:8px}
@media (max-width:700px){.invoice{padding:20px}.inv-meta{grid-template-columns:1fr}.inv-co{text-align:left}.inv-tot{grid-template-columns:1fr 120px}}
@media print{
  .top,.foot,.wa,.panel,.btn,.admin-nav{display:none!important}
  body{background:#fff}.sec{padding:0}.invoice{border:0;padding:0}
}

/* ---- admin ---- */
.admin-nav{display:flex;flex-wrap:wrap;gap:8px 22px;padding:0 0 14px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.admin-nav a{text-decoration:none;font-weight:500;color:var(--ink)}
.admin-nav a[aria-current=page]{color:var(--navy);box-shadow:inset 0 -2px 0 var(--clay)}
.linkbtn{background:none;border:0;padding:0;color:var(--navy);font:inherit;text-decoration:underline;cursor:pointer}
.tbl input[type=text],.tbl input[type=number]{padding:.45em .6em;font-size:.92rem}
.paygrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.paybox{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:18px 20px}
.paybox.on{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy)}
.paybox h3{margin-bottom:.4em}
.paybox dl.kv{grid-template-columns:130px 1fr;margin-bottom:12px}
@media (max-width:760px){.paygrid{grid-template-columns:1fr}}
#pay{scroll-margin-top:96px}