/* ==========================================================================
   PRIME FACILITIES & MANAGEMENT LTD — Stylesheet
   White / spacious / premium corporate theme matching brand reference.
   Green accent + dark navy type on white, thin line icons, soft shadows.
   ========================================================================== */

:root{
  --c-bg:            #FFFFFF;
  --c-bg-soft:       #F6F8F6;
  --c-surface:       #FFFFFF;
  --c-navy:          #17222B;
  --c-navy-soft:     #5B6B66;
  --c-green:         #1E7145;
  --c-green-dark:    #124A2C;
  --c-green-mid:     #278A55;
  --c-green-soft:    #E9F3EC;
  --c-green-line:    #1E7145;
  --c-border:        #E6E9E4;
  --c-border-soft:   #EFF2EE;

  --shadow-sm: 0 2px 12px rgba(23,34,43,.06);
  --shadow-md: 0 12px 34px rgba(23,34,43,.10);
  --shadow-lg: 0 24px 60px rgba(23,34,43,.14);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;

  --font-heading: "Poppins", "Inter", -apple-system, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.22,.9,.32,1);
  --header-h: 84px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0; background:var(--c-bg); color:var(--c-navy); font-family:var(--font-body);
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:.95rem; }

.wrap{ width:100%; max-width:1240px; margin-inline:auto; padding-inline:28px; }

h1,h2,h3,h4{ font-family:var(--font-heading); color:var(--c-navy); line-height:1.15; margin:0; font-weight:600; letter-spacing:-.01em; }

::selection{ background:var(--c-green-soft); color:var(--c-green-dark); }
:focus-visible{ outline:2.5px solid var(--c-green); outline-offset:3px; border-radius:4px; }

/* ============ shared bits ============ */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--c-green); margin:0 0 10px;
}
.section-head{ text-align:center; max-width:640px; margin:0 auto 40px; }
.section-head h2{ font-size:clamp(1.7rem,3vw,2.15rem); letter-spacing:.02em; text-transform:uppercase; }
.section-lede{ color:var(--c-navy-soft); font-size:1rem; max-width:52ch; margin:12px auto 0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:6px; border:1.5px solid transparent;
  font-weight:600; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn-primary{ background:var(--c-green); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); background:var(--c-green-dark); }
.btn-outline{ background:#fff; border-color:var(--c-navy); color:var(--c-navy); }
.btn-outline:hover{ border-color:var(--c-green); color:var(--c-green); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn-sm{ padding:11px 20px; font-size:.74rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none !important; }

/* ============ reveal animations (fallback, GSAP enhances) ============ */
.reveal-up{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--d,0) * 80ms); }
.reveal-up.is-visible{ opacity:1; transform:translateY(0); }

/* ============ header ============ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:1000; height:var(--header-h);
  display:flex; align-items:center; background:#fff; border-bottom:1px solid transparent;
  transition:box-shadow .35s var(--ease), height .35s var(--ease), border-color .35s;
}
.site-header.is-scrolled{ height:68px; box-shadow:var(--shadow-sm); border-color:var(--c-border); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; }

.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ color:var(--c-green); width:32px; height:32px; flex:none; }
.brand-mark svg{ width:100%; height:100%; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong{ font-family:var(--font-heading); font-size:1.2rem; letter-spacing:.08em; color:var(--c-navy); font-weight:700; }
.brand-text em{ font-style:normal; font-size:.58rem; letter-spacing:.06em; color:var(--c-navy-soft); text-transform:uppercase; }

.main-nav{ display:flex; align-items:center; gap:32px; }
.nav-link{ position:relative; font-size:.82rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--c-navy); padding:6px 0; }
.nav-link::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--c-green); transition:right .3s var(--ease); }
.nav-link:hover::after, .nav-link.is-active::after{ right:0; }
.nav-link.is-active{ color:var(--c-green); }

.header-actions{ display:flex; align-items:center; gap:16px; }
.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; border:none; background:none; padding:0; }
.nav-toggle span{ width:100%; height:2px; background:var(--c-navy); border-radius:2px; transition:transform .3s var(--ease), opacity .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============ hero ============ */
.hero{ position:relative; padding:calc(var(--header-h) + 46px) 0 0; overflow:hidden; background:#fff; }
.hero-inner{ display:grid; grid-template-columns:.95fr 1.05fr; gap:40px; align-items:center; position:relative; }

.hero-brush{ position:absolute; top:8%; left:36%; width:56%; height:84%; pointer-events:none; z-index:0; opacity:.9; }
.hero-brush svg{ width:100%; height:100%; }

.hero-copy{ position:relative; z-index:2; padding-bottom:60px; }
.hero-title{ font-size:clamp(2rem,4vw,2.9rem); text-transform:uppercase; font-weight:700; letter-spacing:.01em; margin-bottom:20px; }
.hero-title .line{ display:block; opacity:0; transform:translateY(24px); animation:lineIn .75s var(--ease) forwards; animation-delay:calc(var(--d) * .12s + .1s); }
.hero-title .line.is-accent{ color:var(--c-green); }
@keyframes lineIn{ to{ opacity:1; transform:translateY(0); } }

.hero-sub{ color:var(--c-navy-soft); font-size:.98rem; max-width:42ch; margin-bottom:28px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }

.hero-art{ position:relative; z-index:1; padding-bottom:40px; }
.hero-art-frame{ position:relative; border-radius:4px; overflow:visible; }
.hero-art-frame img{ width:100%; height:auto; border-radius:4px; box-shadow:var(--shadow-lg); object-fit:cover; aspect-ratio:1000/820; }
.hero-art-tape{ position:absolute; inset:0; background:linear-gradient(115deg, #fff 0%, #fff 32%, transparent 46%); pointer-events:none; z-index:2; }

/* ============ quick strip ============ */
.quick-strip{ padding:44px 0 8px; position:relative; z-index:5; }
.quick-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.quick-card{
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-sm);
  padding:22px 16px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
  font-size:.82rem; font-weight:600; color:var(--c-navy);
}
.quick-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--c-green); }
.quick-icon{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; color:var(--c-green); }
.quick-icon svg{ width:28px; height:28px; }

/* ============ before / after ============ */
.transform-section{ padding:96px 0 90px; background:var(--c-bg-soft); }
.compare{
  --pos:50%; position:relative; max-width:980px; margin:0 auto; border-radius:var(--radius-md);
  overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:520/300; user-select:none; touch-action:pan-y;
}
.compare-frame{ position:absolute; inset:0; }
.compare-pane{ position:absolute; inset:0; }
.compare-pane img{ width:100%; height:100%; object-fit:cover; }
.compare-before{ clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.compare-tag{ position:absolute; top:16px; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:7px 14px; border-radius:100px; color:#fff; }
.compare-tag.before{ left:16px; background:rgba(23,34,43,.72); }
.compare-tag.after{ right:16px; background:var(--c-green); }
.compare-range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; }
.compare-handle{ position:absolute; top:0; bottom:0; left:var(--pos); width:0; pointer-events:none; transform:translateX(-50%); }
.compare-handle::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff; transform:translateX(-50%); box-shadow:0 0 0 1px rgba(0,0,0,.06); }
.compare-handle-btn{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:#fff; color:var(--c-green); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); }

/* ============ services ============ */
.services{ padding:96px 0; }
.service-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.service-card{
  position:relative; background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-sm);
  padding:28px 18px; text-align:center; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--c-green); }
.service-icon{ width:48px; height:48px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; color:var(--c-green); }
.service-icon svg{ width:30px; height:30px; }
.service-card h3{ font-size:.92rem; font-weight:600; margin:0; line-height:1.35; }

/* ============ projects ============ */
.projects{ padding:96px 0; background:var(--c-bg-soft); }
.project-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.project-card{ display:block; border-radius:var(--radius-sm); overflow:hidden; background:#fff; border:1px solid var(--c-border); box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.project-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.project-thumb{ aspect-ratio:1/0.82; overflow:hidden; }
.project-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.project-card:hover .project-thumb img{ transform:scale(1.08); }
.pt-sky{ fill:#EAF3EC; } .pt-wall{ fill:#F7F8F6; stroke:#17222B; stroke-width:2; } .pt-alt{ fill:#EFEDE3; }
.pt-window{ fill:#CFE7DA; stroke:#17222B; stroke-width:1.1; } .pt-ground{ fill:#DCE7DE; }
.pt-roof{ fill:#F7F8F6; stroke:#17222B; stroke-width:2; }
.pt-desk{ fill:#1E7145; opacity:.35; } .pt-shelf{ fill:#17222B; opacity:.4; } .pt-lamp{ fill:#1E7145; }
.pt-tree{ fill:#3F8A5F; }
.project-body{ padding:16px 16px 20px; }
.project-tag{ font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--c-green); display:inline-block; margin-bottom:6px; }
.project-body h3{ font-size:.92rem; margin-bottom:4px; font-weight:600; }
.project-body p{ margin:0; color:var(--c-navy-soft); font-size:.8rem; }
.projects-cta{ text-align:center; margin-top:40px; }

/* ============ footer ============ */
.site-footer{ background:#fff; padding:76px 0 0; border-top:1px solid var(--c-border); }
.footer-grid{ display:grid; grid-template-columns:1.1fr .8fr 1.3fr .9fr; gap:44px; padding-bottom:50px; }
.footer-brand p{ color:var(--c-navy-soft); font-size:.9rem; margin:14px 0 0; line-height:1.7; }
.footer-brand .brand{ margin-bottom:4px; }
.footer-col h5{ font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-navy); margin:0 0 18px; }
.footer-col{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ color:var(--c-navy-soft); font-size:.9rem; transition:color .3s, padding-left .3s; }
.footer-col a:hover{ color:var(--c-green); padding-left:4px; }

.why-list{ display:flex; flex-direction:column; gap:11px; }
.why-list li{ display:flex; align-items:center; gap:9px; color:var(--c-navy-soft); font-size:.88rem; }
.why-list svg{ width:15px; height:15px; color:var(--c-green); flex:none; }

.social-row{ display:flex; gap:10px; margin-top:18px; }
.social-btn{ width:36px; height:36px; border-radius:50%; border:1px solid var(--c-border); color:var(--c-navy); display:flex; align-items:center; justify-content:center; transition:background .3s, transform .3s var(--ease), border-color .3s, color .3s; }
.social-btn svg{ width:16px; height:16px; }
.social-btn:hover{ background:var(--c-green); border-color:var(--c-green); color:#fff; transform:translateY(-3px); }

/* footer contact form */
.footer-form .field{ margin-bottom:12px; }
.footer-form .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.field label{ display:block; font-size:.72rem; font-weight:600; color:var(--c-navy-soft); margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em; }
.field input, .field select, .field textarea{
  width:100%; padding:11px 13px; border-radius:6px; border:1.4px solid var(--c-border); background:var(--c-bg-soft);
  color:var(--c-navy); font-size:.86rem; transition:border-color .25s, box-shadow .25s, background .25s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--c-green); box-shadow:0 0 0 3px var(--c-green-soft); background:#fff; }
.field textarea{ resize:vertical; min-height:80px; }
.hp-field{ position:absolute; left:-9999px; opacity:0; }
.footer-form .btn-block{ margin-top:4px; }
.form-note{ margin:12px 0 0; font-size:.82rem; font-weight:600; min-height:1.2em; }
.form-note.is-error{ color:#B4432E; }
.form-note.is-ok{ color:var(--c-green-dark); }

.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding:22px 0; border-top:1px solid var(--c-border); margin-top:8px; flex-wrap:wrap; gap:10px; }
.footer-bottom p{ margin:0; font-size:.8rem; color:var(--c-navy-soft); }
.to-top{ width:40px; height:40px; border-radius:50%; border:1px solid var(--c-border); background:#fff; color:var(--c-navy); display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease), background .3s, color .3s; }
.to-top svg{ width:17px; height:17px; }
.to-top:hover{ background:var(--c-green); border-color:var(--c-green); color:#fff; transform:translateY(-3px); }

/* ============ WhatsApp FAB ============ */
.fab{
  position:fixed; right:22px; bottom:22px; width:54px; height:54px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); z-index:900; transition:transform .3s var(--ease);
}
.fab svg{ width:26px; height:26px; }
.fab:hover{ transform:scale(1.08); }
.fab::after{
  content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; opacity:.6;
  animation:fabPulse 2.4s ease-out infinite;
}
@keyframes fabPulse{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(1.6); opacity:0; } }

/* ============ mobile nav ============ */
.mobile-overlay{ position:fixed; inset:0; background:rgba(23,34,43,.45); z-index:990; opacity:0; pointer-events:none; transition:opacity .35s var(--ease); }
.mobile-overlay.is-active{ opacity:1; pointer-events:auto; }

/* ============ inner/service page hero ============ */
.page-hero{ padding:calc(var(--header-h) + 56px) 0 60px; background:var(--c-bg-soft); border-bottom:1px solid var(--c-border); }
.page-hero .eyebrow{ justify-content:center; }
.page-hero-inner{ text-align:center; max-width:760px; margin:0 auto; }
.breadcrumb{ display:flex; justify-content:center; gap:8px; font-size:.78rem; color:var(--c-navy-soft); margin-bottom:18px; }
.breadcrumb a{ color:var(--c-green); }
.page-hero h1{ font-size:clamp(1.9rem,4vw,2.6rem); text-transform:uppercase; margin-bottom:16px; }
.page-hero p{ color:var(--c-navy-soft); font-size:1.02rem; }

.svc-image{ margin:-30px auto 0; max-width:980px; padding:0 28px; }
.svc-image svg{ width:100%; height:auto; border-radius:var(--radius-md); box-shadow:var(--shadow-lg); }

.svc-body{ padding:80px 0; }
.svc-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:start; }
.svc-grid h2{ font-size:1.5rem; text-transform:uppercase; margin-bottom:16px; }
.svc-grid p{ color:var(--c-navy-soft); margin-bottom:18px; }
.svc-list{ display:flex; flex-direction:column; gap:14px; margin-top:8px; }
.svc-list li{ display:flex; gap:12px; align-items:flex-start; color:var(--c-navy-soft); font-size:.94rem; }
.svc-list svg{ width:18px; height:18px; color:var(--c-green); flex:none; margin-top:2px; }

.svc-panel{ background:var(--c-bg-soft); border:1px solid var(--c-border); border-radius:var(--radius-md); padding:30px; }
.svc-panel h3{ font-size:1.05rem; margin-bottom:14px; text-transform:uppercase; }
.svc-benefits{ display:flex; flex-direction:column; gap:12px; }
.svc-benefits li{ display:flex; gap:10px; align-items:center; font-size:.9rem; color:var(--c-navy); }
.svc-benefits svg{ width:16px; height:16px; color:var(--c-green); flex:none; }

.process{ background:var(--c-bg-soft); padding:80px 0; border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border); }
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.process-step{ background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-sm); padding:26px 20px; position:relative; }
.process-num{ font-family:var(--font-heading); font-size:1.6rem; font-weight:700; color:var(--c-green-soft); -webkit-text-stroke:1.5px var(--c-green); display:block; margin-bottom:10px; }
.process-step h4{ font-size:.98rem; margin-bottom:8px; font-weight:600; }
.process-step p{ font-size:.85rem; color:var(--c-navy-soft); margin:0; }

.svc-cta{ padding:80px 0; text-align:center; }
.svc-cta h2{ font-size:1.7rem; text-transform:uppercase; margin-bottom:14px; }
.svc-cta p{ color:var(--c-navy-soft); max-width:52ch; margin:0 auto 26px; }
.svc-cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.related-projects .section-head{ margin-bottom:32px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1160px){
  .service-grid{ grid-template-columns:repeat(3,1fr); }
  .project-grid{ grid-template-columns:repeat(3,1fr); }
  .quick-grid{ grid-template-columns:repeat(3,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:1024px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-art{ order:-1; max-width:560px; margin:0 auto; padding-bottom:0; }
  .hero-brush{ display:none; }
  .hero-copy{ text-align:center; padding-top:20px; }
  .hero-sub{ margin-inline:auto; }
  .hero-cta{ justify-content:center; }
  .svc-grid{ grid-template-columns:1fr; }
  .process-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .main-nav{
    position:fixed; top:0; right:0; bottom:0; width:min(320px,80vw); height:100vh;
    background:#fff; flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:110px 30px 40px; gap:6px; transform:translateX(100%); transition:transform .4s var(--ease);
    z-index:995; box-shadow:var(--shadow-lg);
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav .nav-link{ width:100%; padding:14px 0; border-bottom:1px solid var(--c-border-soft); font-size:.95rem; }
  .header-actions .btn-sm{ display:none; }
  .nav-toggle{ display:flex; }
  .quick-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .wrap{ padding-inline:20px; }
  .hero{ padding-top:calc(var(--header-h) + 26px); }
  .hero-title{ font-size:clamp(1.7rem,8vw,2.3rem); }
  .hero-cta{ flex-direction:column; align-items:stretch; width:100%; }
  .hero-cta .btn{ width:100%; }
  .service-grid{ grid-template-columns:1fr 1fr; }
  .project-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
  .footer-form .form-row{ grid-template-columns:1fr; }
  .transform-section{ padding:64px 0; }
  .services{ padding:64px 0; }
  .projects{ padding:64px 0; }
  .svc-body, .process, .svc-cta{ padding:56px 0; }
  .process-grid{ grid-template-columns:1fr; }
  .fab{ width:50px; height:50px; right:16px; bottom:16px; }
}
@media (max-width:480px){
  .quick-grid{ grid-template-columns:1fr 1fr; }
  .service-grid{ grid-template-columns:1fr; }
  .project-grid{ grid-template-columns:1fr; }
  .compare-handle-btn{ width:38px; height:38px; }
  .hero-title{ font-size:1.9rem; }
}

/* ==========================================================================\n   HOMEPAGE REFERENCE MATCH — white / green screenshot direction\n   ========================================================================== */
.home-page{
  --font-heading:"Libre Baskerville", Georgia, serif;
  --c-navy:#13233d;
  --c-green:#0c8b50;
  --c-green-dark:#076d3e;
  --c-green-soft:#eaf7f0;
  background:#fff;
}
.home-page .site-header{height:72px;background:rgba(255,255,255,.98)}
.home-page .site-header.is-scrolled{height:64px}
.home-page .brand-text strong{font-family:"Libre Baskerville",Georgia,serif;font-size:1.28rem;font-weight:400;letter-spacing:.06em}
.home-page .brand-mark{width:30px;height:30px}
.home-page .main-nav{gap:28px}
.home-page .nav-link{font-size:.66rem;font-weight:700}
.home-page .header-actions .btn{font-size:.64rem;padding:10px 17px}

.home-page .hero{
  padding:72px 0 0;
  min-height:0;
  overflow:hidden;
  border-bottom:1px solid var(--c-border-soft);
}
.home-page .hero-inner{
  max-width:none;
  padding:0;
  grid-template-columns:42% 58%;
  gap:0;
  min-height:430px;
  align-items:stretch;
}
.home-page .hero-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:46px 24px 44px max(28px,calc((100vw - 1180px)/2));
  z-index:4;
  background:#fff;
}
.home-page .hero-title{
  font-family:"Libre Baskerville",Georgia,serif;
  font-size:clamp(2rem,3.15vw,3.1rem);
  line-height:1.23;
  letter-spacing:-.025em;
  font-weight:700;
  margin:0 0 20px;
}
.home-page .hero-title .line{text-transform:uppercase}
.home-page .hero-title .line.is-accent{color:var(--c-green)}
.home-page .hero-sub{
  max-width:40ch;
  color:#53616b;
  font-size:.9rem;
  line-height:1.75;
  margin:0 0 24px;
}
.home-page .hero-cta{gap:14px}
.home-page .hero-cta .btn{padding:12px 20px;font-size:.7rem;border-radius:4px}
.home-page .hero-cta .btn-outline{border-color:#d5dce0}
.home-page .hero-art{padding:0;overflow:hidden;min-height:430px}
.home-page .hero-art-frame{height:100%;border-radius:0;overflow:hidden;background:#fff}
.home-page .hero-art-frame img{
  width:100%;height:100%;min-height:430px;object-fit:cover;object-position:center;
  border-radius:0;box-shadow:none;aspect-ratio:auto;
}
.home-page .hero-art-tape{display:none}
.home-page .hero-brush{display:none}

.home-brush-accent{
  position:absolute;
  right:-72px;
  top:700px;
  width:180px;
  height:420px;
  pointer-events:none;
  z-index:1;
  opacity:.72;
  transform:rotate(-8deg);
}
.home-brush-accent span{
  position:absolute;inset:auto 10px 40px auto;width:68px;height:360px;
  border:18px solid rgba(17,150,101,.62);border-left-color:transparent;border-bottom-color:transparent;
  border-radius:55% 45% 60% 40%;transform:rotate(22deg);
  filter:blur(.15px)
}
.home-brush-accent span+span{right:44px;bottom:8px;height:300px;width:50px;border-width:9px;opacity:.55;transform:rotate(-8deg)}

.home-page .quick-strip{padding:10px 0 28px;background:#fff}
.home-page .quick-grid{gap:12px}
.home-page .quick-card{
  min-height:108px;
  justify-content:center;
  padding:15px 10px;
  border-radius:5px;
  box-shadow:0 4px 18px rgba(20,40,55,.07);
  font-size:.72rem;
  line-height:1.32;
}
.home-page .quick-icon{width:34px;height:34px}.home-page .quick-icon svg{width:25px;height:25px}

.home-page .transform-section{padding:34px 0 36px;background:#fff}
.home-page .transform-section .section-head{margin-bottom:18px}
.home-page .transform-section .section-head .eyebrow,.home-page .transform-section .section-lede{display:none}
.home-page .section-head h2{font-family:var(--font-body);font-size:1rem;font-weight:700;letter-spacing:.02em}
.home-page .compare{max-width:960px;border-radius:6px;box-shadow:0 8px 24px rgba(20,40,55,.11);aspect-ratio:3.55/1}
.home-page .compare-tag{top:10px;padding:5px 11px;font-size:.58rem;border-radius:3px}
.home-page .compare-tag.before{left:10px}.home-page .compare-tag.after{right:10px}
.home-page .compare-handle-btn{width:38px;height:38px}

.home-page .services{padding:24px 0 44px}
.home-page .services .section-head{margin-bottom:18px}
.home-page .services .section-head .eyebrow{display:none}
.home-page .service-grid{gap:13px}
.home-page .service-card{min-height:108px;padding:18px 10px;border-radius:5px;box-shadow:0 4px 18px rgba(20,40,55,.07)}
.home-page .service-icon{width:36px;height:36px;margin-bottom:9px}.home-page .service-icon svg{width:26px;height:26px}
.home-page .service-card h3{font-family:var(--font-body);font-size:.72rem;line-height:1.35}

.home-page .projects{padding:34px 0 42px;background:#fff}
.home-page .projects .section-head{margin-bottom:20px}
.home-page .projects .section-head .eyebrow{display:none}
.home-page .project-grid{gap:12px}
.home-page .project-card{border-radius:5px;box-shadow:0 4px 18px rgba(20,40,55,.06)}
.home-page .project-thumb{aspect-ratio:1.28/1}
.home-page .project-body{padding:10px 10px 12px}
.home-page .project-tag{display:none}
.home-page .project-body h3{font-family:var(--font-body);font-size:.72rem;line-height:1.3;margin-bottom:4px}
.home-page .project-body p{font-size:.63rem}
.home-page .projects-cta{margin-top:20px}.home-page .projects-cta .btn{font-size:.65rem;padding:10px 19px}

.home-page .site-footer{padding-top:42px}
.home-page .footer-grid{gap:30px;padding-bottom:34px}
.home-page .footer-col h5{font-size:.7rem}
.home-page .footer-col a,.home-page .footer-brand p,.home-page .why-list li{font-size:.76rem}
.home-page .footer-form .field input,.home-page .footer-form .field select,.home-page .footer-form .field textarea{font-size:.74rem;padding:9px 10px}
.home-page .footer-bottom{padding:15px 0}

@media (max-width:1024px){
  .home-page .hero-inner{grid-template-columns:1fr;min-height:0}
  .home-page .hero-art{order:0;max-width:none;min-height:330px}
  .home-page .hero-art-frame img{min-height:330px;object-position:center}
  .home-page .hero-copy{text-align:left;padding:38px 24px 28px}
  .home-page .hero-sub{margin-inline:0}
  .home-page .hero-cta{justify-content:flex-start}
  .home-brush-accent{display:none}
}
@media (max-width:760px){
  .home-page .hero{padding-top:72px}
  .home-page .hero-copy{padding:32px 20px 24px}
  .home-page .hero-title{font-size:clamp(1.7rem,9vw,2.35rem)}
  .home-page .hero-art{min-height:270px}.home-page .hero-art-frame img{min-height:270px}
  .home-page .hero-cta{flex-direction:row;align-items:center}.home-page .hero-cta .btn{width:auto;flex:1;padding-inline:10px}
  .home-page .quick-grid{grid-template-columns:repeat(2,1fr)}
  .home-page .service-grid{grid-template-columns:repeat(2,1fr)}
  .home-page .project-grid{grid-template-columns:repeat(2,1fr)}
  .home-page .compare{aspect-ratio:1.9/1}
}
@media (max-width:480px){
  .home-page .hero-title{font-size:1.75rem}
  .home-page .hero-sub{font-size:.82rem}
  .home-page .hero-art,.home-page .hero-art-frame img{min-height:235px}
  .home-page .project-grid{grid-template-columns:repeat(2,1fr);gap:9px}
  .home-page .project-body{padding:8px}
}

/* === 2026-08-24: Transformation slider layering fix === */
.compare-frame{overflow:hidden;}
.compare-after{z-index:1;}
.compare-before{z-index:2;}
.compare-range{z-index:10;}
.compare-handle{z-index:11;}
.compare-tag{z-index:4;}
.compare-pane img{display:block;}

/* === 2026-08 visual fixes === */
.brand-logo{display:block;width:clamp(180px,18vw,260px);height:auto;object-fit:contain}
.home-page .brand-logo{width:clamp(165px,16vw,235px)}
.quick-icon img,.service-icon img{display:block;width:100%;height:100%;object-fit:contain}
.home-page .quick-icon,.home-page .service-icon{width:42px;height:42px}
.home-page .quick-icon img,.home-page .service-icon img{filter:none}
/* Keep the transformation photography fully readable instead of heavily cropping it. */
.home-page .compare{aspect-ratio:2.15/1;max-width:980px}
.compare-pane img{object-fit:cover;object-position:center center}
/* Only HTML overlay labels are shown; source photos have no baked-in labels. */
.compare-tag{z-index:6}
/* Sharper project presentation */
.project-thumb{aspect-ratio:1.42/1;overflow:hidden;background:#eef3ef}
.project-thumb img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;image-rendering:auto}
.svc-image{max-width:1180px;margin:34px auto 50px;padding:0 24px}
.svc-image img{display:block;width:100%;height:auto;max-height:620px;object-fit:cover;object-position:center;border-radius:10px;box-shadow:0 12px 34px rgba(17,37,55,.10)}
.svc-body .project-thumb{aspect-ratio:1.43/1}
@media(max-width:768px){
  .brand-logo,.home-page .brand-logo{width:165px}
  .home-page .compare{aspect-ratio:1.6/1}
  .quick-icon img,.service-icon img{width:34px;height:34px;margin:auto}
}

/* ===== v4 image-quality fixes ===== */
.home-page .compare{
  aspect-ratio: 12 / 5;
  max-width: 1040px;
  background:#eef2ef;
}
.home-page .compare-pane img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 52%;
  image-rendering:auto;
  transform:translateZ(0);
}
.home-page .project-thumb{
  aspect-ratio: 4 / 3;
  background:#f3f5f3;
}
.home-page .project-thumb img,
.projects-page .project-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  image-rendering:auto;
  backface-visibility:hidden;
}
/* avoid browsers magnifying project imagery too aggressively on hover */
.home-page .project-card:hover .project-thumb img{transform:scale(1.025)}
@media (max-width: 700px){
  .home-page .compare{aspect-ratio: 1.55 / 1;}
  .home-page .compare-pane img{object-position:center;}
}
\n\n/* ===== V5 approved transformation + project imagery ===== */\n/* Keep the approved before/after photographs completely visible at the default 50/50 split. */\n.home-page .compare{\n  aspect-ratio: 3.11 / 1;\n  max-width: 1120px;\n  background:#f4f6f4;\n}\n.home-page .compare-frame{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:#f4f6f4;}\n.home-page .compare-pane{position:absolute;top:0;bottom:0;overflow:hidden;clip-path:none !important;}\n.home-page .compare-before{left:0;width:var(--pos);z-index:2;}\n.home-page .compare-after{right:0;width:calc(100% - var(--pos));z-index:1;}\n.home-page .compare-pane img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  object-position:center;\n  transform:none !important;\n}\n/* Approved source artwork already contains one Before and one After Prime label. */\n.home-page .compare-tag{display:none !important;}\n\n/* Recent Projects: preserve image sharpness; no aggressive browser crop/zoom. */\n.home-page .project-thumb{aspect-ratio:1.28 / 1;background:#fff;}\n.home-page .project-thumb img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  object-position:center;\n  transform:none !important;\n}\n.home-page .project-card:hover .project-thumb img{transform:none !important;}\n\n@media(max-width:900px){\n  .home-page .compare{aspect-ratio:2.6 / 1;}\n}\n@media(max-width:620px){\n  .home-page .compare{aspect-ratio:1.72 / 1;}\n  .home-page .compare-before{width:var(--pos);}\n  .home-page .compare-after{width:calc(100% - var(--pos));}\n}\n