:root{
  --navy:#071421;
  --navy2:#0b1c2b;
  --gold:#b88735;
  --gold2:#d5aa54;
  --cream:#f2eadf;
  --paper:#fffaf3;
  --white:#fff;
  --text:#101826;
  --muted:#5a6473;
  --line:rgba(16,24,38,.13);
  --shadow:0 28px 80px rgba(7,20,33,.16);
  --radius:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;background:var(--cream);color:var(--text);line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 44px));margin:auto}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(7,20,33,.96);backdrop-filter:blur(14px);border-bottom:1px solid rgba(213,170,84,.18)}
.navbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px;min-width:0}
.logo{display:flex;align-items:center;gap:12px;color:#fff;min-width:max-content;flex-shrink:0}
.logo-mark{width:42px;height:42px;border:1.5px solid var(--gold2);border-radius:12px;display:grid;place-items:center;color:var(--gold2);font-weight:900;letter-spacing:.03em}
.logo-text strong{display:block;font-size:21px;letter-spacing:.06em;color:#f6c967;line-height:1}
.logo-text span{display:block;margin-top:6px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.nav-links{display:flex;align-items:center;gap:34px;color:#fff;text-transform:uppercase;font-size:13px;font-weight:800;letter-spacing:.14em;flex:1;justify-content:center;min-width:0}
.nav-links a{opacity:.86;transition:.2s ease}
.nav-links a:hover,.nav-links a.active{opacity:1;color:#f6c967}
.nav-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;border:1px solid transparent;font-weight:900;letter-spacing:.03em;min-height:46px;padding:12px 20px;transition:.2s ease;cursor:pointer;background:transparent;color:inherit;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:linear-gradient(135deg,#f4c968,#b88735);color:#071421;box-shadow:0 14px 30px rgba(184,135,53,.25)}
.btn-line{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.04)}
.menu-btn{display:none;width:46px;height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.04);color:#fff;font-size:24px;flex-shrink:0}
.mobile-panel{display:none;background:#071421;border-top:1px solid rgba(255,255,255,.12);padding:0 22px 22px}
.mobile-panel a{display:block;color:#fff;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:13px}
.mobile-panel .btn{margin-top:14px;width:100%;border-bottom:0;color:#071421;text-transform:none;letter-spacing:.03em}

/* Hero carousel — contained, no overlap with content below */
.spotlight{background:var(--navy);color:#fff;position:relative;isolation:isolate}
.carousel{position:relative;min-height:520px;height:clamp(520px,50vw,760px);max-height:calc(100svh - 78px);background:#071421;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transform:scale(1.015);transition:opacity .75s ease,transform 1.2s ease;pointer-events:none;background:#071421}
.slide.active{opacity:1;transform:scale(1);pointer-events:auto}
.slide img{width:100%;height:100%;object-fit:cover;object-position:center center}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,20,33,.01) 0%,rgba(7,20,33,.01) 46%,rgba(7,20,33,.01) 100%);pointer-events:none}
.slide-caption{position:absolute;left:max(38px,calc((100vw - 1180px)/2));bottom:154px;z-index:2;max-width:480px;padding:22px 24px;border-left:3px solid var(--gold2);background:linear-gradient(90deg,rgba(7,20,33,.01),rgba(7,20,33,.01));backdrop-filter:blur(10px);border-radius:0 24px 24px 0;box-shadow:0 24px 70px rgba(0,0,0,.22)}
.slide-caption .small{display:block;margin-bottom:8px;color:#f6c967;text-transform:uppercase;font-size:13px;font-weight:900;letter-spacing:.22em}
.slide-caption h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(34px,4.6vw,66px);line-height:.97;letter-spacing:-.045em;margin-bottom:12px;color:#fff}
.slide-caption p{font-size:18px;color:rgba(255,255,255,.88)}
.carousel-nav{position:absolute;left:50%;bottom:42px;z-index:3;transform:translateX(-50%);width:min(1180px,calc(100% - 44px));display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.carousel-tab{display:grid;grid-template-columns:82px 1fr;gap:12px;align-items:center;min-width:0;padding:12px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:rgba(7,20,33,.01);color:#fff;text-align:left;backdrop-filter:blur(12px);cursor:pointer;transition:.2s ease}
.carousel-tab.active{border-color:var(--gold2);box-shadow:0 0 0 1px rgba(213,170,84,.22) inset}
.carousel-tab img{width:82px;height:58px;object-fit:cover;border-radius:10px;object-position:center center}
.carousel-tab b{display:block;font-family:Georgia,'Times New Roman',serif;font-size:18px;line-height:1.05}
.carousel-tab span{display:block;margin-top:3px;color:rgba(255,255,255,.72);font-size:12px}
.timer{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.1);z-index:4}
.timer i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),#f7d16e)}
.slider-arrows{position:absolute;inset:0;pointer-events:none;z-index:5}
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.36);background:rgba(7,20,33,.72);color:#fff;font-size:34px;line-height:1;pointer-events:auto}
.arrow.prev{left:22px}.arrow.next{right:22px}

/* Sections */
.section{padding:86px 0}
.section.dark{background:var(--navy);color:#fff}
.section.paper{background:var(--paper)}
.section-head{max-width:820px;margin-bottom:36px}
.section-head.center{text-align:center;margin-left:auto;margin-right:auto}
.eyebrow{display:inline-block;color:var(--gold);font-size:12px;text-transform:uppercase;letter-spacing:.28em;font-weight:900;margin-bottom:12px}
.dark .eyebrow{color:#f6c967}
.section h2,.page-title h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(36px,5vw,64px);line-height:1.03;letter-spacing:-.045em}
.section p{color:var(--muted);font-size:18px}
.dark p{color:rgba(255,255,255,.78)}

/* Panels grid */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 16px 55px rgba(7,20,33,.08)}
.panel-media{aspect-ratio:1.25/1;background:#e8e0d6;overflow:hidden}
.panel-media img{width:100%;height:100%;object-fit:cover;object-position:center center}
.panel-media.contain img{object-fit:contain;background:#fff}
.panel-body{padding:24px}
.panel-body h3{font-family:Georgia,'Times New Roman',serif;font-size:27px;line-height:1.08;margin:8px 0 8px}
.panel-body p{font-size:16px;color:#465266}
.dark .panel{background:#fff;color:var(--text)}
.dark .panel p{color:#465266}
.project-note{display:inline-flex;margin-top:10px;padding:7px 10px;border-radius:999px;background:rgba(184,135,53,.12);color:#7a5723;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.exterior-small .panel-media{aspect-ratio:1.58/1}
.exterior-small .panel-body{padding:18px}
.exterior-small .panel-body h3{font-size:22px}
.exterior-small .panel-body p{font-size:14px}
.exterior-small{padding-bottom:64px}
.pool-card .panel-media{aspect-ratio:1.58/1}
.pool-card .panel-media img{object-position:center 65%}

/* Before/after mini strip — shows the "avant" small and quiet, "après" as the real photo */
.before-strip{display:flex;align-items:center;gap:12px;padding:16px 18px 0}
.before-strip .thumb{width:108px;height:78px;border-radius:10px;overflow:hidden;border:1px solid var(--line);flex-shrink:0;box-shadow:0 6px 16px rgba(7,20,33,.1)}
.before-strip .thumb img{width:100%;height:100%;object-fit:cover}
.before-strip .label-col{display:grid;gap:2px}
.before-strip .label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:800}
.before-strip .arrow-sep{color:var(--gold);font-weight:900;font-size:20px;margin-left:auto;flex-shrink:0}

/* Page band (sub-pages) */
.page-band{background:linear-gradient(135deg,#fff,#f7efe4);padding:72px 0;border-bottom:1px solid rgba(16,24,38,.08)}
.page-title{max-width:860px}
.page-title h1{margin:8px 0 14px}
.page-title p{font-size:19px;color:var(--muted)}
.list-card{display:grid;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:0 12px 44px rgba(7,20,33,.07);color:var(--text)}
.list-card h3{font-family:Georgia,'Times New Roman',serif;font-size:28px;color:var(--text)}
.list-card p{color:var(--muted);font-size:16px}
.contact-box{background:#fff;border:1px solid var(--line);border-radius:30px;padding:34px;box-shadow:var(--shadow)}
.contact-box .email{font-size:clamp(21px,3vw,32px);font-weight:900;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:6px}
.muted{color:var(--muted)}

/* Footer */
.footer{background:#060f18;color:rgba(255,255,255,.72);padding:48px 0 34px;position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px}
.footer h3{font-size:15px;text-transform:uppercase;letter-spacing:.18em;color:#f6c967;margin-bottom:13px}
.footer a{display:block;margin:7px 0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:28px;padding-top:20px;font-size:13px}
.footer-legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);margin-top:18px;padding-top:18px;font-size:12px;line-height:1.65;color:rgba(255,255,255,.62)}
.footer-legal p{margin:0 0 6px}
.footer-legal strong{color:#f6c967}
.footer-legal a{text-decoration:underline;text-underline-offset:3px;display:inline}

/* Reveal-on-scroll: visible by default, JS only enhances. Never hides content. */
.reveal{opacity:1;transform:none}
.js-ready .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js-ready .reveal.visible{opacity:1;transform:none}

@media (max-width:1100px){
  .nav-links{gap:18px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .carousel-nav{grid-template-columns:repeat(2,1fr);bottom:30px}
  .slide-caption{bottom:210px}
}
@media (max-width:1180px) and (min-width:851px){
  .container{width:min(1180px,calc(100% - 24px))}
  .navbar{gap:12px}
  .logo-mark{width:38px;height:38px;border-radius:11px;font-size:14px}
  .logo-text strong{font-size:18px;letter-spacing:.045em}
  .logo-text span{font-size:10px;letter-spacing:.16em}
  .nav-links{gap:16px;font-size:12px;letter-spacing:.105em}
  .nav-actions .btn{min-height:42px;padding:10px 14px;font-size:13px}
  .carousel{height:clamp(500px,50vw,700px);min-height:500px}
  .carousel-tab{grid-template-columns:72px 1fr;padding:10px;gap:10px}
  .carousel-tab img{width:72px;height:52px}
  .carousel-tab b{font-size:16px}
}
@media (max-width:980px){
  .nav-links,.nav-actions{display:none}
  .menu-btn{display:block}
}
@media (max-width:850px){
  .navbar{height:68px}
  .logo-text strong{font-size:17px}
  .logo-text span{font-size:10px}
  .carousel{min-height:auto;height:auto}
  .slide{position:relative;display:none;opacity:1;transform:none}
  .slide.active{display:block}
  .slide img{height:auto;min-height:260px;max-height:60vh;object-fit:cover}
  .slide::after{background:linear-gradient(180deg,rgba(7,20,33,0),rgba(7,20,33,.01))}
  .slide-caption{position:absolute;left:18px;right:18px;bottom:18px;max-width:none;padding:14px 16px;background:rgba(7,20,33,.01);backdrop-filter:none;box-shadow:none;text-shadow:0 2px 8px rgba(0,0,0,.75)}
  .slide-caption h1{font-size:30px}
  .slide-caption p{font-size:15px}
  .carousel-nav{position:relative;left:auto;bottom:auto;transform:none;width:100%;padding:14px 22px 20px;grid-template-columns:1fr;background:rgba(7,20,33,.01)}
  .carousel-tab{grid-template-columns:70px 1fr}
  .carousel-tab img{width:70px;height:52px}
  .arrow{display:none}
  .timer{display:none}
  .section{padding:58px 0}
  .grid-4,.grid-3,.footer-grid{grid-template-columns:1fr}
  .container{width:min(100% - 28px,1180px)}
  .panel-media{aspect-ratio:1.45/1}
  .exterior-small .panel-media{aspect-ratio:1.55/1}
  .footer-legal{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}