@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Jost:wght@200;300;400;500;600&display=swap');

:root{
  --gold: #3d6b8a;
  --gold-light: #6f9bb8;
  --ink: #26302e;
  --cream: #f4f2ee;
  --charcoal: #e7ebe9;
  --page: #eef1f0;
  --panel: #e4e9e7;
  --blush: #e3a894;
  --blush-deep: #b5624a;
  --blush-soft: #f6e4dc;
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --sh-1: 0 1px 2px rgba(38,48,46,.05), 0 4px 12px rgba(38,48,46,.06);
  --sh-2: 0 2px 4px rgba(38,48,46,.05), 0 10px 26px rgba(38,48,46,.08);
  --sh-3: 0 4px 8px rgba(61,107,138,.10), 0 18px 38px rgba(61,107,138,.16), 0 40px 78px rgba(61,107,138,.17);
  --radius: 14px;
  --radius-sm: 8px;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--page);
  color:var(--ink);
  font-family:'Jost', sans-serif;
  overflow-x:hidden;
  cursor:default;
}

::selection{background:var(--gold); color:var(--cream);}

h1,h2,h3,.serif{font-family:'Cormorant Garamond', serif;}

.glow-cursor{
  position:fixed;
  width:26px;height:26px;
  border:1px solid var(--gold);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .3s, height .3s, border-color .3s, background .3s;
  mix-blend-mode:difference;
  display:flex; align-items:center; justify-content:center;
}
.glow-cursor::after{
  content:attr(data-label);
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  opacity:0;
  transition:opacity .2s ease;
  white-space:nowrap;
}
.glow-cursor[data-label]::after{opacity:1;}

::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:var(--page);}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold), var(--gold-light)); border-radius:10px;}

#loader{
  position:fixed; inset:0; background:var(--page);
  z-index:10000;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  gap:18px;
  transition:opacity .6s ease, visibility .6s ease;
}
#loader.hide{opacity:0; visibility:hidden;}

/* Returning visitor: skip the loader and hero/entrance fade sequence entirely — only
   plays once per site visit, not on every page navigation. */
html.returning #loader{display:none;}
html.returning .hero-eyebrow,
html.returning .hero-rotator,
html.returning .hero p,
html.returning .scroll-cue{
  opacity:1 !important;
  animation:none !important;
  transform:none !important;
}
html.returning .btn{
  opacity:1 !important;
  animation:none !important;
}
.loader-mark{
  font-family:'Cormorant Garamond', serif;
  font-size:2.4rem;
  letter-spacing:.5em;
  color:var(--gold);
  opacity:0;
  animation: loaderFade 1s ease forwards;
}
.loader-line{
  width:0; height:1px; background:var(--gold);
  animation: loaderLine .9s .15s ease forwards;
}
@keyframes loaderFade{
  0%{opacity:0; letter-spacing:1.2em;}
  60%{opacity:1;}
  100%{opacity:1; letter-spacing:.5em;}
}
@keyframes loaderLine{
  0%{width:0;}
  100%{width:220px;}
}

nav{
  position:fixed; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 6vw;
  z-index:500;
  mix-blend-mode:normal;
  transition:background .5s ease, padding .5s ease, backdrop-filter .5s ease;
}
nav.scrolled, nav.static-page{
  background:rgba(238,241,240,0.9);
  backdrop-filter:blur(14px);
  padding:16px 6vw;
  border-bottom:1px solid rgba(61,107,138,0.18);
}
.brand{
  font-family:'Cormorant Garamond', serif;
  font-size:1.6rem;
  letter-spacing:.28em;
  color:#FFFFFF;
  text-transform:uppercase;
  text-decoration:none;
  transition:color .5s ease;
}
.brand span{color:inherit; transition:color .5s ease;}
nav.scrolled .brand, nav.static-page .brand{color:var(--ink);}
nav.scrolled .brand span, nav.static-page .brand span{color:inherit;}
.nav-links{display:flex; align-items:center; gap:44px; list-style:none;}
.nav-links a{
  color:var(--cream);
  text-decoration:none;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  position:relative;
  padding-bottom:6px;
  opacity:.85;
  transition:opacity .3s, color .3s;
}
nav.scrolled .nav-links a, nav.static-page .nav-links a{color:var(--ink);}
.nav-links a.active{opacity:1;}
.nav-links a::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:0%; height:1px;
  background:var(--gold);
  transition:width .45s cubic-bezier(.16,1,.3,1);
}
.nav-links a.active::after{width:100%;}
.nav-links a:hover{opacity:1; color:var(--gold-light);}
nav.scrolled .nav-links a:hover, nav.static-page .nav-links a:hover{color:var(--gold);}
.nav-links a:hover::after{width:100%;}
.nav-quote{
  padding:11px 24px;
  border-radius:999px;
  border:1px solid var(--gold-light);
  color:var(--cream) !important;
  opacity:1 !important;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.nav-quote:hover{background:var(--gold); color:var(--cream) !important;}
nav.scrolled .nav-quote, nav.static-page .nav-quote{color:var(--ink) !important; border-color:var(--gold);}
nav.scrolled .nav-quote:hover, nav.static-page .nav-quote:hover{color:var(--cream) !important;}

/* Dropdown: each nav item shows a header link plus sub-points to navigate within that page */
.has-sub{position:relative;}
.sub-menu{
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%) translateY(6px);
  min-width:220px;
  background:rgba(238,241,240,0.98);
  backdrop-filter:blur(14px);
  border:1px solid rgba(61,107,138,.16);
  box-shadow:0 18px 40px -20px rgba(20,30,35,.35);
  padding:10px 0;
  margin-top:18px;
  list-style:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index:10;
}
@media (hover:hover) and (pointer:fine){
.has-sub:hover .sub-menu, .has-sub:focus-within .sub-menu{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
}
.sub-menu li{list-style:none;}
.sub-menu a{
  display:block;
  padding:9px 22px;
  color:var(--ink) !important;
  opacity:.75 !important;
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
  text-decoration:none;
}
.sub-menu a::after{display:none;}
.sub-menu a:hover{opacity:1 !important; color:var(--gold) !important; background:rgba(61,107,138,.07);}

/* Mobile navigation: hidden hamburger on desktop, becomes the only way to reach the
   nav once .nav-links is hidden below 900px (previously there was no fallback at all) */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:30px; height:24px;
  background:none;
  border:none;
  cursor:pointer;
  z-index:600;
}
.nav-toggle span{
  display:block; width:100%; height:2px;
  background:var(--cream);
  transition:background .3s ease, transform .3s ease, opacity .3s ease;
}
nav.scrolled .nav-toggle span, nav.static-page .nav-toggle span{background:var(--ink);}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
nav.static-page .nav-toggle.open span, nav.scrolled .nav-toggle.open span{background:var(--ink);}

@media (max-width:900px){
  .nav-toggle{display:flex;}
  .nav-links{
    position:fixed; top:0; right:0; width:min(320px, 82vw);
    height:100vh; height:100dvh;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    background:rgba(238,241,240,0.98);
    backdrop-filter:blur(16px);
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:8px;
    padding:104px 40px 48px;
    transform:translateX(100%);
    transition:transform .4s cubic-bezier(.16,1,.3,1);
    box-shadow:-20px 0 60px -20px rgba(20,30,35,.35);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links li{width:100%;}
  .nav-links a{color:var(--ink) !important; font-size:.9rem; padding:10px 0;}
  .nav-quote{width:100%; text-align:center; margin-top:14px;}
  .has-sub .sub-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    background:none; border:none; box-shadow:none; padding:0 0 0 16px;
    max-height:0; overflow:hidden;
    transition:max-height .35s ease;
  }
  .has-sub.open .sub-menu{max-height:420px;}
  .sub-menu a{color:var(--ink) !important; font-size:.78rem; padding:7px 0;}
}

.hero{
  position:relative;
  min-height:100vh;
  height:auto;
  padding:170px 0 130px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background:url('images/hero-exterior.jpg') center/cover no-repeat;
  transform:scale(1.18);
  animation: heroZoom 24s ease-in-out infinite alternate;
  filter:brightness(.55) saturate(1.05);
}
@keyframes heroZoom{
  0%{transform:scale(1.18) translateY(0);}
  100%{transform:scale(1.32) translateY(-2%);}
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(38,48,46,0.2) 0%, rgba(38,48,46,0.82) 78%);
  z-index:1;
}
.hero-grain{
  position:absolute; inset:0; z-index:2;
  background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="120" height="120"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity="0.05"/%3E%3C/svg%3E');
  opacity:.5;
  pointer-events:none;
}
.hero-content{
  position:relative; z-index:3;
  text-align:center;
  max-width:900px;
  padding:0 24px;
}
.hero-eyebrow{
  display:inline-block;
  font-size:.75rem;
  letter-spacing:.5em;
  text-transform:uppercase;
  color:var(--gold-light);
  opacity:0;
  animation: fadeUp .6s .05s cubic-bezier(0.25,1,0.5,1) forwards;
}

.hero-rotator{
  position:relative;
  display:inline-block;
  min-height:1.05em;
  font-size:clamp(2.6rem, 6.6vw, 5.4rem);
  font-weight:400;
  line-height:1.12;
  margin:22px 0 26px;
  padding:0 6px;
  opacity:0;
  animation: fadeUp .7s .15s cubic-bezier(0.25,1,0.5,1) forwards;
}
.rotator-text{
  color:var(--cream);
  display:inline-block;
  opacity:1;
  transition:opacity 1s ease;
}
.rotator-text.fade-out{opacity:0;}
.rotator-text.is-brand{
  color:#ffffff;
  font-weight:700;
  font-style:normal;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}

.hero p{
  font-size:1.15rem;
  font-weight:300;
  letter-spacing:.03em;
  color:rgba(246,241,231,.78);
  max-width:560px;
  margin:0 auto 42px;
  opacity:0;
  animation: fadeUp .6s .35s cubic-bezier(0.25,1,0.5,1) forwards;
}
@keyframes fadeUp{
  0%{opacity:0; transform:translateY(32px);}
  100%{opacity:1; transform:translateY(0);}
}
.hero-trust{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:24px;
  opacity:0; transform:translateY(20px);
  animation:fadeUp .6s .62s cubic-bezier(0.25,1,0.5,1) forwards;
}
.hero-trust .stars{margin:0; display:flex; gap:2px;}
.hero-trust .stars svg{width:13px; height:13px; fill:var(--blush); stroke:none;}
.hero-trust span{font-size:.78rem; color:rgba(246,241,231,.82); letter-spacing:.02em;}
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:12px;
  padding:18px 42px;
  border:1px solid var(--gold);
  color:var(--cream);
  text-decoration:none;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.75rem;
  overflow:hidden;
  z-index:1;
  opacity:0;
  animation: fadeUp .6s .5s cubic-bezier(0.25,1,0.5,1) forwards;
  transition:color .5s ease, letter-spacing .5s ease;
}
.btn::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg, var(--gold), var(--gold-light));
  transform:translateX(-101%);
  transition:transform .55s cubic-bezier(.65,0,.35,1);
  z-index:-1;
}
.btn:hover{color:var(--ink); letter-spacing:.3em;}
.btn:hover::before{transform:translateX(0);}
/* Variant for buttons sitting on light page/panel backgrounds — the default .btn
   text color (cream) is meant for dark hero/CTA backgrounds and disappears on light
   ones, so this swaps the resting text color to the readable gold/ink tone. */
.btn.btn-outline{color:var(--gold);}
.btn.btn-outline:hover{color:var(--cream);}

.scroll-cue{
  position:absolute; bottom:42px; left:50%;
  transform:translateX(-50%);
  z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:0;
  animation: fadeUp .6s .7s cubic-bezier(0.25,1,0.5,1) forwards;
}
.scroll-cue span{
  font-size:.65rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(246,241,231,.6);
}
.scroll-line{
  width:1px; height:46px;
  background:linear-gradient(var(--gold), transparent);
  position:relative;
  overflow:hidden;
}
.scroll-line::after{
  content:'';
  position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--gold-light);
  animation:scrollDrop 2.2s ease-in-out infinite;
}
@keyframes scrollDrop{
  0%{top:-100%;}
  60%{top:100%;}
  100%{top:100%;}
}

.marquee-wrap{
  background:var(--gold);
  padding:16px 0;
  overflow:hidden;
  white-space:nowrap;
  position:relative;
  z-index:5;
}
.marquee{
  display:inline-block;
  animation:marquee 26s linear infinite;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:1.4rem;
  color:var(--cream);
  letter-spacing:.02em;
}
.marquee span{margin:0 34px; display:inline-flex; align-items:center; gap:34px;}
.marquee span::after{content:'✦'; font-style:normal; opacity:.75; color:var(--gold-light);}
@keyframes marquee{
  0%{transform:translateX(0);}
  100%{transform:translateX(-33.3333%);}
}

/* Secondary page header (About / Portfolio) */
.page-header{
  position:relative;
  padding:200px 6vw 90px;
  text-align:center;
  background:var(--panel);
  overflow:hidden;
}
.page-header::before{
  content:'';
  position:absolute; inset:0;
  background:url('images/cab-after-marble.jpg') center/cover no-repeat;
  opacity:.14;
}
.page-header-inner{position:relative; z-index:1;}
.page-header .section-label{justify-content:center;}
.page-header h1{
  font-size:clamp(2.6rem, 5vw, 4.4rem);
  font-weight:400;
  margin-top:16px;
}
.page-header h1 em{color:var(--gold); font-style:italic;}

section{position:relative; padding:150px 6vw;}
.section-label{
  font-size:.75rem; letter-spacing:.4em; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:16px;
  margin-bottom:22px;
}
.section-label::before{content:''; width:44px; height:1px; background:var(--gold);}
.section-title{
  font-size:clamp(2.4rem, 4.6vw, 4.2rem);
  font-weight:400;
  max-width:820px;
  line-height:1.08;
}
.section-title em{color:var(--gold); font-style:italic;}

.reveal{
  opacity:0;
  transform:translateY(60px);
  transition:opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
}
.reveal.visible{opacity:1; transform:translateY(0);}
.reveal-scale{opacity:0; transform:scale(.88); transition:opacity 1.2s ease, transform 1.2s cubic-bezier(.16,1,.3,1);}
.reveal-scale.visible{opacity:1; transform:scale(1);}
.reveal-left{opacity:0; transform:translateX(-70px); transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.16,1,.3,1);}
.reveal-left.visible{opacity:1; transform:translateX(0);}
.reveal-right{opacity:0; transform:translateX(70px); transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.16,1,.3,1);}
.reveal-right.visible{opacity:1; transform:translateX(0);}

.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  margin-top:70px;
}
.about-images{
  position:relative;
  height:560px;
}
.about-img{
  position:absolute;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.7);
}
.about-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.4s cubic-bezier(.16,1,.3,1);}
.about-img:hover img{transform:scale(1.09);}
.about-img.a{top:0; left:0; width:70%; height:75%; z-index:2;}
.about-img.b{bottom:0; right:0; width:58%; height:52%; z-index:3; border:6px solid var(--page);}
.about-img.solo{inset:0; width:100%; height:100%; z-index:2;}
.about-img.solo .img-link-badge{opacity:1; transform:translateY(0);}
.about-img.solo:hover .img-link-badge{background:var(--gold); color:var(--cream);}
.about-img{cursor:pointer; text-decoration:none;}
.img-link-badge{
  position:absolute; left:18px; bottom:18px; z-index:4;
  background:rgba(244,242,238,.95);
  color:var(--ink);
  padding:10px 18px;
  border-radius:999px;
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  box-shadow:0 10px 24px -10px rgba(20,30,35,.4);
  opacity:0; transform:translateY(10px);
  transition:opacity .35s ease, transform .35s ease, background .3s ease, color .3s ease;
}
.about-img.b:hover .img-link-badge,
.about-img.b:focus .img-link-badge{
  background:var(--gold); color:var(--cream);
}
.about-img.b .img-link-badge{opacity:1; transform:translateY(0);}
.about-text p{
  font-size:1.05rem; font-weight:300; line-height:1.9;
  color:rgba(38,48,46,.75);
  margin-top:24px;
}
.stat-row{
  display:flex; gap:56px; margin-top:52px; flex-wrap:wrap;
}
.stat{
  border-left:1px solid rgba(61,107,138,.45);
  padding-left:18px;
}
.stat .num{
  font-family:'Cormorant Garamond', serif;
  font-size:2.6rem; color:var(--gold);
  display:block;
}
.stat .label{font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(38,48,46,.6);}

/* Subtle fading grid texture — a light decorative touch behind a few section boxes.
   Kept faint and masked toward the edges so it never competes with text. */
.grid-fade{position:relative;}
.grid-fade::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(61,107,138,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,107,138,.07) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse at center, black 0%, transparent 72%);
  mask-image:radial-gradient(ellipse at center, black 0%, transparent 72%);
  pointer-events:none;
  z-index:0;
}
.grid-fade > *{position:relative; z-index:1;}

.services{background:var(--panel);}
.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  margin-top:70px;
  background:rgba(61,107,138,.18);
}
.service-card{
  background:var(--panel);
  padding:56px 40px;
  position:relative;
  overflow:hidden;
  display:block;
  text-decoration:none;
  color:inherit;
  transition:background .5s ease;
}
.service-card::before{
  content:'';
  position:absolute; left:0; top:0; height:0; width:2px;
  background:var(--gold);
  transition:height .5s ease;
}
.service-card:hover::before{height:100%;}
.service-card:hover{background:#dbe2df;}
.service-num{
  font-family:'Cormorant Garamond', serif;
  font-size:.95rem; color:var(--gold);
  letter-spacing:.1em;
}
.service-card h3{
  font-size:1.7rem; font-weight:400; margin:22px 0 14px;
}
.service-card p{
  font-size:.92rem; font-weight:300; color:rgba(38,48,46,.7); line-height:1.75;
}
.service-icon{
  width:52px; height:52px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(61,107,138,.4);
  border-radius:50%;
  transition:transform .6s cubic-bezier(.16,1,.3,1), border-color .5s;
}
.service-card:hover .service-icon{transform:rotate(180deg); border-color:var(--gold);}
.service-icon svg{width:22px; height:22px; stroke:var(--gold);}

.gallery-head{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px;}

/* True masonry via CSS columns — items flow into whichever column is shortest, so a
   filtered view (or any item count) never leaves an orphaned photo or a ragged gap
   the way a fixed grid with row/column spans can. */
.gallery-grid{
  column-count:3;
  column-gap:14px;
  margin-top:70px;
}
.gallery-item{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  cursor:pointer;
  display:block;
  text-decoration:none;
  color:inherit;
  break-inside:avoid;
  margin-bottom:14px;
}
.gallery-item img{
  width:100%; height:auto; display:block;
  filter:grayscale(35%) brightness(.82);
  transition:transform 1.4s cubic-bezier(.16,1,.3,1), filter .8s ease;
}
.gallery-item:hover img{transform:scale(1.14) rotate(1deg); filter:grayscale(0%) brightness(1);}
.gallery-item .overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(38,48,46,.9) 0%, transparent 55%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:22px;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
}
.gallery-item:hover .overlay{opacity:1; transform:translateY(0);}
.overlay .tag{font-size:.65rem; letter-spacing:.25em; text-transform:uppercase; color:var(--gold-light);}
.overlay h4{font-family:'Cormorant Garamond', serif; font-size:1.5rem; font-weight:500; margin-top:6px; color:var(--cream);}

/* Portfolio lightbox: click a gallery photo to enlarge, click anywhere to close. */
.lightbox-overlay{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:40px;
  background:rgba(20,24,23,.92);
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease-standard, ease), visibility 0s linear .3s;
  cursor:zoom-out;
}
.lightbox-overlay.open{
  opacity:1; visibility:visible;
  transition:opacity .3s var(--ease-standard, ease), visibility 0s linear 0s;
}
.lightbox-img{
  max-width:min(92vw, 1400px);
  max-height:88vh;
  width:auto; height:auto;
  border-radius:10px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
  transform:scale(.96);
  transition:transform .35s var(--ease-out-quart, ease);
}
.lightbox-overlay.open .lightbox-img{transform:scale(1);}
.lightbox-close{
  position:absolute; top:22px; right:28px;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(244,242,238,.35);
  background:rgba(244,242,238,.08);
  color:var(--cream);
  font-size:1.8rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
body.lightbox-open{overflow:hidden;}
@media (prefers-reduced-motion: reduce){
  .lightbox-overlay, .lightbox-img{transition:none;}
}

@media (max-width:900px){
  .gallery-grid{column-count:2;}
}
@media (max-width:560px){
  .gallery-grid{column-count:1;}
}

.process{background:var(--panel);}
.process-track{
  position:relative;
  margin-top:90px;
}
.process-line{
  position:absolute; top:26px; left:0; right:0; height:1px;
  background:rgba(61,107,138,.3);
}
.process-line-fill{
  position:absolute; top:0; left:0; height:100%; width:0%;
  background:var(--gold);
  transition:width 1.8s cubic-bezier(.16,1,.3,1);
}
.process-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  position:relative;
}
.step{text-align:left;}
.step-dot{
  width:52px; height:52px; border-radius:50%;
  background:var(--page);
  border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond', serif;
  font-size:1.3rem; color:var(--gold);
  margin-bottom:26px;
  position:relative; z-index:2;
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s;
}
.step:hover .step-dot{transform:scale(1.15); box-shadow:0 0 30px rgba(61,107,138,.4);}
.step h4{font-size:1.3rem; font-weight:400; margin-bottom:10px;}
.step p{font-size:.9rem; color:rgba(38,48,46,.68); font-weight:300; line-height:1.7;}

.testimonial{
  background:url('images/ext-stucco-after.jpg') center/cover fixed;
  position:relative;
  padding:180px 6vw;
  text-align:center;
}
.testimonial::before{
  content:''; position:absolute; inset:0; background:rgba(38,48,46,.82);
}
.testimonial-inner{position:relative; z-index:2; max-width:820px; margin:0 auto;}
.quote-mark{
  font-family:'Cormorant Garamond', serif;
  font-size:5rem; color:var(--gold); line-height:1; opacity:.7;
}
.testimonial p.quote{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(1.6rem,3vw,2.4rem);
  font-style:italic; font-weight:400; line-height:1.5;
  margin:20px 0 36px;
  color:var(--cream);
}
.testimonial .author{letter-spacing:.2em; text-transform:uppercase; font-size:.78rem; color:var(--gold-light);}
.testimonial .author span{display:block; color:rgba(244,242,238,.6); margin-top:6px; letter-spacing:.05em; text-transform:none; font-size:.85rem;}
.stars{display:flex; gap:6px; justify-content:center; margin-bottom:18px;}
.stars svg{width:18px; height:18px; fill:var(--gold);}

/* Pinterest-style infinite scrolling testimonial wall */
.testimonial-scroll{background:var(--page); padding-bottom:110px;}
.scroll-track-wrap{
  margin-top:34px;
  padding:26px 0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
}
.scroll-track{
  display:flex;
  gap:22px;
  width:max-content;
  animation:scrollTrack 42s linear infinite;
}
.scroll-track-wrap:hover .scroll-track{animation-play-state:paused;}
@keyframes scrollTrack{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
.pin-card{
  background:var(--cream);
  width:320px; flex-shrink:0;
  padding:30px 26px;
  border-radius:var(--radius);
  box-shadow:0 18px 40px -28px rgba(181,98,74,.28);
  border:1px solid rgba(61,107,138,.14);
}
.pin-card .stars{justify-content:flex-start; margin-bottom:14px;}
.pin-card .stars svg{width:14px; height:14px; fill:var(--blush-deep);}
.pin-card p{font-size:.9rem; color:rgba(38,48,46,.78); font-weight:300; line-height:1.7; margin-bottom:18px;}
.pin-card .who{font-size:.76rem; letter-spacing:.08em; color:var(--gold); text-transform:uppercase;}
.pin-card .where{display:block; font-size:.76rem; color:rgba(38,48,46,.55); margin-top:2px;}

.cta{
  text-align:center;
  background:radial-gradient(ellipse at center, #2c3a37 0%, var(--ink) 70%);
}
.cta .section-title{margin:0 auto 34px; color:var(--cream);}
.cta .section-label{color:var(--gold-light); justify-content:center;}
.cta .section-label::before{background:var(--gold-light);}
.cta p.sub{max-width:560px; margin:0 auto 50px; color:rgba(244,242,238,.7); font-weight:300; line-height:1.8;}

footer{
  padding:50px 6vw 40px;
  border-top:1px solid rgba(61,107,138,.2);
  font-size:.8rem; color:rgba(38,48,46,.6);
}
.footer-top{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;
  padding-bottom:26px;
}
footer .brand{font-size:1.2rem; color:var(--ink);}
footer .brand span{color:inherit;}
.footer-links{display:flex; gap:30px; list-style:none; flex-wrap:wrap;}
.footer-links a{color:rgba(38,48,46,.65); text-decoration:none; transition:color .3s;}
.footer-links a:hover{color:var(--gold);}
.footer-secondary{
  display:flex; gap:24px; flex-wrap:wrap;
  padding-top:22px; border-top:1px solid rgba(61,107,138,.14);
  list-style:none;
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
}
.footer-secondary a{color:rgba(38,48,46,.55); text-decoration:none; transition:color .3s;}
.footer-secondary a:hover{color:var(--gold);}

/* FAQ accordion */
.faq-list{max-width:820px; margin-top:60px;}
.faq-item{border-top:1px solid rgba(61,107,138,.25);}
.faq-item:last-child{border-bottom:1px solid rgba(61,107,138,.25);}
.faq-q{
  width:100%; text-align:left;
  display:flex; justify-content:space-between; align-items:center;
  padding:26px 4px;
  background:none; border:none; cursor:pointer;
  font-family:'Cormorant Garamond', serif;
  font-size:1.3rem; color:var(--ink);
}
.faq-q .icon{
  font-size:1.4rem; color:var(--gold); transition:transform .35s ease;
  flex-shrink:0; margin-left:20px;
}
.faq-item.open .faq-q .icon{transform:rotate(45deg);}
.faq-a{
  max-height:0; overflow:hidden;
  transition:max-height .4s cubic-bezier(.16,1,.3,1);
}
.faq-a p{padding:0 4px 26px; font-size:.95rem; color:rgba(38,48,46,.72); font-weight:300; line-height:1.75; max-width:680px;}

/* Reviews wall */
.reviews-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:70px;
}
.review-card{
  background:var(--page); border:1px solid rgba(61,107,138,.18);
  padding:34px 28px;
  border-radius:var(--radius);
  box-shadow:0 18px 40px -28px rgba(181,98,74,.25);
}
.review-card .stars{justify-content:flex-start; margin-bottom:16px;}
.review-card .stars svg{width:15px; height:15px;}
.review-card p{font-size:.92rem; color:rgba(38,48,46,.78); font-weight:300; line-height:1.7; margin-bottom:20px;}
.review-card .who{font-size:.78rem; letter-spacing:.08em; color:var(--gold); text-transform:uppercase;}
.review-card .where{display:block; font-size:.78rem; color:rgba(38,48,46,.55); margin-top:2px;}

/* Service area */
.area-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; margin-top:60px;
}
.area-map{
  aspect-ratio:4/3; background:var(--page);
  border:1px solid rgba(61,107,138,.22);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.area-map svg{width:70%; height:70%;}
.area-list{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:14px 30px;}
.area-list li{
  font-size:.92rem; color:var(--ink);
  padding-left:18px; position:relative;
}
.area-list li::before{
  content:''; position:absolute; left:0; top:8px; width:8px; height:8px; background:var(--gold); border-radius:50%;
}

@media (max-width:900px){
  .reviews-grid{grid-template-columns:1fr;}
  .area-grid{grid-template-columns:1fr;}
}

/* Before / After drag comparison — deliberately plain page background so it doesn't
   visually merge with the panel-colored Services section directly above it */
.ba-section{background:var(--page);}
.ba-slider{
  position:relative;
  width:100%;
  aspect-ratio:16/8;
  max-height:640px;
  overflow:hidden;
  border-radius:var(--radius);
  margin-top:60px;
  cursor:ew-resize;
  user-select:none;
  touch-action:none;
  box-shadow:0 40px 90px -30px rgba(20,30,35,.4);
}
.ba-after, .ba-before{position:absolute; inset:0;}
.ba-after img, .ba-before img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;}
.ba-before{clip-path:inset(0 50% 0 0);}
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%;
  width:2px; background:rgba(255,255,255,.85);
  transform:translateX(-50%);
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.15);
}
.ba-handle::before{
  content:'';
  position:absolute; top:50%; left:50%;
  width:52px; height:52px;
  background:#fff;
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.ba-handle::after{
  content:'⟷';
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-size:1.2rem;
  color:var(--gold);
}
.ba-label{
  position:absolute; top:20px;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:#fff; background:rgba(38,48,46,.65);
  padding:8px 16px;
  pointer-events:none;
}
.ba-label-before{left:20px;}
.ba-label-after{right:20px;}

/* Animated stat counters */
.counters{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  margin-top:70px;
  background:rgba(61,107,138,.18);
}
.counter-card{
  background:var(--page);
  padding:48px 30px;
  text-align:center;
  position:relative;
  z-index:0;
  transition:background .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.counter-card::before{
  content:'';
  position:absolute; inset:0;
  z-index:-1;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(61,107,138,0), 0 0 0 rgba(61,107,138,0);
  transition:box-shadow .45s ease;
  pointer-events:none;
}
.counter-card:hover{background:var(--panel); transform:translateY(-3px);}
.counter-card:hover::before{
  box-shadow:0 0 0 1px rgba(61,107,138,.5), 0 0 34px 6px rgba(61,107,138,.35);
}
.counter-card:hover .count{color:var(--gold);}
.counter-card .count{transition:color .4s ease;}
.counter-card .count{
  font-family:'Cormorant Garamond', serif;
  font-size:3.2rem;
  color:var(--gold);
  display:block;
}
.counter-card .count-label{
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(38,48,46,.65);
  margin-top:8px; display:block;
}

/* Magnetic button wrapper */
.magnetic-wrap{display:inline-block; position:relative;}
.btn.magnetic{transition:transform .25s cubic-bezier(.16,1,.3,1), color .5s ease, letter-spacing .5s ease;}

/* Portfolio filter tabs */
.filter-tabs{
  display:flex; gap:12px; flex-wrap:wrap;
  margin-bottom:10px;
}
.filter-tab{
  padding:10px 22px;
  border:1px solid rgba(61,107,138,.35);
  background:transparent;
  color:var(--ink);
  font-family:'Jost', sans-serif;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.filter-tab:hover{border-color:var(--gold); color:var(--gold);}
.filter-tab.active{background:var(--gold); border-color:var(--gold); color:#fff;}
.gallery-item.hidden-item{
  display:none;
}
.gallery-item.filtering{
  animation:filterIn .5s cubic-bezier(.16,1,.3,1);
}
@keyframes filterIn{
  0%{opacity:0; transform:scale(.9);}
  100%{opacity:1; transform:scale(1);}
}

/* Project detail (mockup) page.
   margin-top clears the fixed nav bar — on inner pages the nav renders opaque
   immediately (no transparent hero to sit over), so without this offset it was
   overlapping the top of the project image. */
.project-hero{
  position:relative; height:56vh; min-height:420px; overflow:hidden;
  margin-top:84px;
}
.project-hero img{width:100%; height:100%; object-fit:cover; display:block;}
.project-hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(38,48,46,.75) 0%, rgba(38,48,46,.15) 60%);
}
.project-meta{
  display:grid; grid-template-columns:1fr 1fr; gap:70px;
  margin-top:60px;
}
.project-meta .details{display:flex; flex-direction:column; gap:22px;}
.project-fact{border-left:1px solid rgba(61,107,138,.4); padding-left:16px;}
.project-fact .label{font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:4px;}
.project-fact .value{font-size:.95rem; color:var(--ink);}
.project-shots{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:60px;
}
.shot-link{position:relative; display:block; border-radius:var(--radius); overflow:hidden; cursor:pointer;}
.project-shots img{width:100%; height:320px; object-fit:cover; display:block; border-radius:var(--radius); transition:transform 1.2s cubic-bezier(.16,1,.3,1);}
.shot-link:hover img{transform:scale(1.08);}
.shot-link .img-link-badge{left:16px; bottom:16px;}
.back-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold);
  text-decoration:none; margin-bottom:30px;
}
.back-link:hover{color:var(--ink);}

@media (max-width: 900px){
  .about-grid{grid-template-columns:1fr;}
  .service-grid{grid-template-columns:1fr;}
  .process-steps{grid-template-columns:1fr 1fr;}
  .project-meta, .project-shots{grid-template-columns:1fr;}
  .counters{grid-template-columns:1fr 1fr;}
}

/* ---------------------------------------------------------------------
   Vision-board pass: premium-feel + conversion upgrades
   --------------------------------------------------------------------- */

/* Sticky mobile call bar — removes scroll-to-find-the-number friction on
   the device most visitors will actually be using. Desktop already has the
   nav's Free Quote button visible, so this only shows below 900px. */
.call-bar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:700;
  background:var(--ink);
  padding:14px 20px;
  align-items:center; justify-content:center; gap:10px;
  box-shadow:0 -10px 30px -10px rgba(0,0,0,.35);
}
.call-bar a{
  flex:1; max-width:420px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--gold);
  color:var(--cream);
  text-decoration:none;
  padding:13px 20px;
  border-radius:999px;
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
}
.call-bar svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2;}
@media (max-width:900px){
  .call-bar{display:flex;}
  body{padding-bottom:70px;}
}

/* Trust badge row under the hero */
.hero-badges{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:12px;
  margin-top:30px;
  opacity:0; transform:translateY(20px);
  animation:fadeUp .6s .58s cubic-bezier(0.25,1,0.5,1) forwards;
}
.hero-badge{
  display:flex; align-items:center; gap:8px;
  padding:9px 18px;
  border:1px solid rgba(244,242,238,.28);
  border-radius:999px;
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(246,241,231,.85);
  background:rgba(244,242,238,.06);
  backdrop-filter:blur(6px);
}
.hero-badge svg{width:13px; height:13px; fill:none; stroke:var(--gold-light); stroke-width:2; flex-shrink:0;}

/* Secondary "text us" link + reassurance line placed next to CTA phone buttons */
.cta-extra{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin-top:20px;
}
.cta-text-link{
  font-size:.78rem; letter-spacing:.08em; text-decoration:none;
  color:var(--gold-light); opacity:.9;
  border-bottom:1px solid rgba(111,155,184,.4);
  padding-bottom:2px;
  transition:opacity .3s ease, border-color .3s ease;
}
.cta-text-link:hover{opacity:1; border-color:var(--gold-light);}
.cta-reassure{
  font-size:.76rem; color:rgba(244,242,238,.55); font-weight:300;
}
/* Variant for use on light backgrounds (outside the dark .cta section) */
.cta-extra.on-light .cta-text-link{color:var(--gold); border-color:rgba(61,107,138,.35);}
.cta-extra.on-light .cta-reassure{color:rgba(38,48,46,.55);}

/* Tasteful, honest availability note */
.availability-note{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:26px;
  padding:10px 20px;
  border:1px solid rgba(227,168,148,.5);
  background:rgba(227,168,148,.08);
  border-radius:999px;
  font-size:.72rem; letter-spacing:.05em;
  color:var(--blush-deep);
}
.availability-note::before{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--blush-deep);
  flex-shrink:0;
  animation:pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot{
  0%,100%{opacity:1; transform:scale(1);}
  50%{opacity:.4; transform:scale(.75);}
}

/* Signature-style treatment for the owners' names */
.owner-signature{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-weight:500;
  color:var(--gold);
}

/* Small paint-swatch accent dots — a subtle nod to the product, used as
   section-divider ornaments instead of a plain rule */
.paint-swatches{
  display:flex; gap:8px; align-items:center; margin:0 0 24px;
}
.paint-swatches span{
  width:13px; height:13px; border-radius:50%;
  display:inline-block;
  box-shadow:0 3px 8px -2px rgba(20,30,35,.3);
}
.paint-swatches span:nth-child(1){background:var(--gold);}
.paint-swatches span:nth-child(2){background:var(--gold-light);}
.paint-swatches span:nth-child(3){background:var(--blush);}
.paint-swatches span:nth-child(4){background:var(--blush-deep);}

/* Page transition fade */
body{transition:opacity .35s ease;}
body.page-fade-out{opacity:0;}

@media (hover: none), (pointer: coarse) {
  .glow-cursor { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   TESTIMONIAL GLOW — travelling ring + cursor-tracked sheen
   Shared by .pin-card (home marquee) and .review-card (reviews page).
   Resting state is fully styled; this is purely additive on hover/focus.
   ═══════════════════════════════════════════════════════════════════ */

@property --glow-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

.pin-card, .review-card{
  position:relative;
  isolation:isolate;
  transition:transform .18s var(--ease-out-quart),
             box-shadow .28s var(--ease-out-quart),
             border-color .28s var(--ease-standard);
}
/* keep copy above both decorative layers */
.pin-card > *, .review-card > *{ position:relative; z-index:2; }

/* the ring: a hairline conic gradient orbiting the border */
.pin-card::before, .review-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1.5px;
  background:conic-gradient(from var(--glow-angle),
    transparent 0deg 190deg,
    rgba(111,155,184,.80) 268deg,
    var(--gold) 302deg,
    rgba(181,98,74,.72) 332deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .32s var(--ease-standard);
  pointer-events:none; z-index:1;
}

/* the sheen: soft light that follows the pointer inside the card */
.pin-card::after, .review-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(210px circle at var(--mx,50%) var(--my,0%),
    rgba(111,155,184,.20), rgba(111,155,184,.06) 44%, transparent 70%);
  opacity:0; transition:opacity .3s var(--ease-standard);
  pointer-events:none; z-index:0;
}

.pin-card:hover, .review-card:hover,
.pin-card:focus-visible, .review-card:focus-visible{
  transform:translateY(-4px);
  box-shadow:var(--sh-3);
  border-color:rgba(61,107,138,.30);
}
.pin-card:hover::before, .review-card:hover::before,
.pin-card:focus-visible::before, .review-card:focus-visible::before{
  opacity:1; animation:glowOrbit 2.6s linear infinite;
}
.pin-card:hover::after, .review-card:hover::after,
.pin-card:focus-visible::after, .review-card:focus-visible::after{ opacity:1; }
.pin-card:focus-visible, .review-card:focus-visible{ outline:none; }

@keyframes glowOrbit{ to{ --glow-angle:360deg; } }

/* sheen is a fine-pointer affordance; ring + lift still work on touch */
@media (hover:none), (pointer:coarse), (max-width:900px){
  .pin-card::after, .review-card::after{ display:none !important; }
}

@media (prefers-reduced-motion: reduce){
  .pin-card, .review-card{ transition:box-shadow .2s linear, border-color .2s linear; }
  .pin-card:hover, .review-card:hover,
  .pin-card:focus-visible, .review-card:focus-visible{ transform:none; }
  .pin-card:hover::before, .review-card:hover::before,
  .pin-card:focus-visible::before, .review-card:focus-visible::before{ animation:none; }
}

/* ── Mobile nav: backdrop + scroll lock ─────────────────────────────
   Drawer is fixed-position, so the page behind it must be frozen or the
   body scrolls under the open menu. */
.nav-backdrop{
  position:fixed; inset:0;
  background:rgba(20,30,35,.42);
  backdrop-filter:blur(2px);
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease-standard), visibility .35s;
  z-index:499;
  border:0; padding:0; margin:0; -webkit-appearance:none; appearance:none;
}
.nav-backdrop.show{opacity:1; visibility:visible;}
body.nav-open{overflow:hidden;}
@media (min-width:901px){
  .nav-backdrop{display:none !important;}
  body.nav-open{overflow:auto;}
}
@media (prefers-reduced-motion: reduce){
  .nav-links{transition:none;}
  .nav-backdrop{transition:none;}
}