/* ============================================================
   TONELLA CONTRACTING
   Design tokens — charcoal + white beige
   ============================================================ */
:root{
  --gold:35 39% 92%;
  --gold-light:35 45% 95%;
  --gold-dark:35 30% 84%;
  --charcoal:0 0% 7%;
  --charcoal-light:0 0% 12%;
  --charcoal-lighter:0 0% 18%;
  --cream:40 30% 95%;
  --background:0 0% 7%;
  --foreground:40 30% 95%;
  --card:0 0% 12%;
  --primary:35 39% 92%;
  --primary-foreground:0 0% 7%;
  --muted-foreground:40 10% 60%;
  --border:0 0% 20%;
  --white:0 0% 100%;
  --error:0 62% 45%;
  --radius:.375rem;
}

*,*::before,*::after{box-sizing:border-box;border:0 solid hsl(var(--border));margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
:target{scroll-margin-top:96px}
#contact,#services,#about,#gallery,#map,#quote,#quote-form{scroll-margin-top:110px}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{font-family:"Playfair Display",Georgia,serif;letter-spacing:-.025em;font-weight:inherit;font-size:inherit}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,textarea{font:inherit;color:inherit;background:none}
button{cursor:pointer}
:focus-visible{outline:2px solid hsl(var(--primary));outline-offset:3px}

.container{width:100%;max-width:1400px;margin:0 auto;padding:0 1.5rem}
.font-display{font-family:"Playfair Display",Georgia,serif}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================
   1. LOADER
   ============================================================ */
#loader{
  position:fixed;inset:0;z-index:10000;background:hsl(var(--charcoal));
  display:flex;align-items:center;justify-content:center;
  transition:transform .45s cubic-bezier(.76,0,.24,1);
}
#loader.done{transform:translateY(-101%)}
#loader::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 45%,hsl(var(--primary)/.16),transparent 62%);
  animation:pulseGlow 3s ease-in-out infinite;
}
@keyframes pulseGlow{0%,100%{opacity:.6}50%{opacity:1}}
body.loading{overflow:hidden;height:100vh}

.ld-stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;padding:0 1.5rem}
.ld-mark{position:relative;width:150px;height:150px;display:grid;place-items:center;margin-bottom:.5rem}
.ld-mark img{width:92px;animation:markIn .42s cubic-bezier(.34,1.4,.5,1) both}
@keyframes markIn{from{opacity:0;transform:scale(.6) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}
.ld-ring{
  position:absolute;inset:0;border:2px solid hsl(var(--primary)/.15);border-radius:50%;
  border-top-color:hsl(var(--primary));opacity:0;
  animation:ringIn .35s ease .08s forwards,spin 2.4s linear .25s infinite;
}
@keyframes ringIn{to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

.ld-word{display:flex;justify-content:center;flex-wrap:wrap;gap:.02em;margin:1.25rem 0 .75rem;max-width:90vw}
.ld-word span{
  font-family:"Playfair Display",Georgia,serif;font-size:clamp(24px,5.6vw,40px);font-weight:700;
  color:hsl(var(--cream));letter-spacing:.01em;opacity:0;transform:translateY(20px);
  animation:letterUp .3s cubic-bezier(.22,1,.36,1) forwards;
}
.ld-word span.sp{width:.35em}
@keyframes letterUp{to{opacity:1;transform:translateY(0)}}
.ld-sub{
  color:hsl(var(--primary));font-size:10.5px;letter-spacing:.4em;text-transform:uppercase;
  margin-bottom:1.75rem;opacity:0;animation:letterUp .32s ease .15s forwards;text-align:center;
}
.ld-barwrap{width:min(320px,66vw);opacity:0;animation:letterUp .25s ease .12s forwards}
.ld-track{height:2px;background:hsl(var(--foreground)/.14);overflow:hidden;position:relative}
.ld-fill{position:absolute;inset:0 auto 0 0;width:0;
  background:linear-gradient(90deg,hsl(var(--gold-dark)),hsl(var(--gold-light)));
  animation:fillBar .36s cubic-bezier(.5,0,.2,1) .18s forwards}
@keyframes fillBar{to{width:100%}}
.ld-meta{display:flex;justify-content:space-between;margin-top:.75rem;font-size:10px;letter-spacing:.22em;
  color:hsl(var(--muted-foreground));font-weight:600;text-transform:uppercase}

/* ============================================================
   2. SHARED PIECES
   ============================================================ */
.gold-line{height:.25rem;width:4rem;background:hsl(var(--primary));margin:0 auto}
.gold-line.left{margin-left:0}

.btn-primary,.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-width:2px;border-style:solid;padding:1rem 2rem;min-height:48px;
  font-size:.875rem;line-height:1.25rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;text-align:center;
  transition:background-color .3s,color .3s,border-color .3s;
}
.btn-primary{border-color:hsl(var(--primary));background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.btn-primary:hover{background:transparent;color:hsl(var(--primary))}
.btn-outline{border-color:hsl(var(--foreground));background:transparent;color:hsl(var(--foreground))}
.btn-outline:hover{border-color:hsl(var(--primary));color:hsl(var(--primary))}

.section-dark{background:hsl(var(--background));padding:4.5rem 0}
.section-card{background:hsl(var(--card));padding:4.5rem 0}
@media(min-width:768px){.section-dark,.section-card{padding:5rem 0}}
@media(min-width:1024px){.section-dark,.section-card{padding:7rem 0}}

.sec-head{text-align:center;margin-bottom:3rem}
@media(min-width:768px){.sec-head{margin-bottom:4rem}}
.sec-head h2{font-size:clamp(1.75rem,5vw,2.25rem);font-weight:700;margin-bottom:1rem}
.sec-head p{margin-top:1.5rem;font-size:1.0625rem;color:hsl(var(--muted-foreground));max-width:42rem;margin-left:auto;margin-right:auto}

/* ============================================================
   3. HEADER
   ============================================================ */
header.site{position:fixed;top:0;left:0;right:0;z-index:50;
  background:hsl(var(--background)/.95);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  border-bottom:1px solid hsl(var(--border))}
.topbar{display:none;background:hsl(var(--charcoal-light));border-bottom:1px solid hsl(var(--border))}
.topbar .container{display:flex;justify-content:flex-end;gap:1.5rem;padding-top:.5rem;padding-bottom:.5rem}
.topbar a{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:hsl(var(--muted-foreground));transition:color .3s}
.topbar a:hover{color:hsl(var(--primary))}
@media(min-width:1024px){.topbar{display:block}}

nav.main{display:flex;align-items:center;justify-content:space-between;height:4.5rem}
@media(min-width:1024px){nav.main{height:5rem}}
nav.main .logo{flex-shrink:0;display:block}
nav.main .logo img{height:3rem;width:auto}
@media(min-width:1024px){nav.main .logo img{height:4rem}}
.nav-links{display:none;align-items:center;gap:1.75rem}
@media(min-width:1180px){.nav-links{display:flex}}
.nav-link{position:relative;font-size:.8125rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;
  color:hsl(var(--foreground)/.8);transition:color .3s;padding-bottom:.25rem;white-space:nowrap}
.nav-link::after{content:"";position:absolute;bottom:0;left:0;height:.125rem;width:0;background:hsl(var(--primary));transition:width .3s}
.nav-link:hover{color:hsl(var(--primary))}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-link.active{color:hsl(var(--primary))}
.nav-cta{display:none}
@media(min-width:1180px){.nav-cta{display:block}}
.nav-cta .btn-primary{font-size:.75rem;padding:.875rem 1.5rem}
/* Phone in the mobile header row. Below 1180px the nav-links and the CTA are
   hidden, so nav.main lays out as logo | phone | burger, which is the order
   the build standard requires. Above 1180px the topbar already carries it. */
.nav-phone{display:flex;align-items:center;gap:.45rem;flex-shrink:0;margin-left:auto;margin-right:.5rem;
  font-size:.9375rem;font-weight:600;letter-spacing:.01em;color:hsl(var(--foreground));
  padding:.5rem .25rem;white-space:nowrap;transition:color .3s}
.nav-phone svg{flex:none;color:hsl(var(--primary))}
.nav-phone:hover{color:hsl(var(--primary))}
@media(max-width:479px){.nav-phone{font-size:.8125rem;gap:.35rem}.nav-phone svg{width:16px;height:16px}}
@media(min-width:1180px){.nav-phone{display:none}}

/* Burger — three spans that morph into an X in place (Section 8, Rule 11).
   It is the only close control: same button, same corner, so whoever opened
   the drawer closes it without hunting. Bars use currentColor so they stay
   visible over the header when closed and over the drawer when open. */
.burger{position:relative;width:44px;height:44px;padding:0;border:none;background:transparent;
  color:hsl(var(--foreground));cursor:pointer;transition:color .3s;flex:none}
.burger span{position:absolute;left:50%;margin-left:-11px;width:22px;height:2px;border-radius:2px;
  background:currentColor;transition:transform .3s ease,opacity .2s ease}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:28px}
.burger:hover{color:hsl(var(--primary))}
body.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:1180px){.burger{display:none}}

/* --- SERVICES DROPDOWN (desktop nav) --- */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-toggle{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer}
.nav-caret{transition:transform .3s}
.nav-drop:hover .nav-caret,.nav-drop:focus-within .nav-caret{transform:rotate(180deg)}
.nav-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  min-width:230px;background:hsl(var(--charcoal-light));border:1px solid hsl(var(--border));
  border-radius:var(--radius);padding:.5rem 0;box-shadow:0 20px 40px -12px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility .25s;z-index:60}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(4px)}
.nav-menu a{display:block;padding:.7rem 1.25rem;font-size:.8125rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.05em;color:hsl(var(--foreground)/.82);white-space:nowrap;transition:background-color .2s,color .2s}
.nav-menu a:hover{background:hsl(var(--primary)/.12);color:hsl(var(--primary))}
/* --- ABOUT VIDEO (replaces the about photo) --- */
.about-media .frame video.about-video{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   3b. MOBILE DRAWER — Mobile-Optimization.md Part D, Section 6
   Rebuilt from the in-flow panel diagnosed in that document's
   Section 7.3. The panel now lives at body level, not inside
   <header>, so the header's backdrop-filter can no longer trap
   it (Rules 9/10).
   Breakpoint stays at 1180px per 7.3; the JS gate matches it.
   ============================================================ */
:root{
  --nav-bg:hsl(var(--charcoal-light));       /* brand charcoal, not a safe neutral */
  --nav-accent:hsl(var(--primary));          /* the cream accent */
  --nav-scrim:hsl(var(--charcoal)/.55);
  /* DARK preset: --nav-bg luminance 0.014, well under the 0.179
     crossover, so white text wins at 16.6:1. */
  --nav-fg:hsl(var(--white));
  --nav-fg-2:hsl(var(--white)/.85);
  --nav-fg-3:hsl(var(--white)/.80);
  --nav-rule:hsl(var(--white)/.12);
  --nav-cta-fg:hsl(var(--charcoal));         /* computed against the cream accent */
}

.nav-backdrop{display:block;position:fixed;inset:0;background:var(--nav-scrim);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:1000}
.nav-backdrop.show{opacity:1;visibility:visible}
body.nav-open{overflow:hidden;height:100%}
/* Above the breakpoint the drawer block below does not apply, so the panel
   would fall back to a static in-flow list. It is mobile-only furniture. */
@media(min-width:1180px){.navlinks,.nav-backdrop{display:none}}

@media(max-width:1179.98px){
  /* Drawer. bottom:0 not height:100vh — on iOS 100vh is the expanded
     viewport, so the panel overruns while the URL bar is showing. */
  .navlinks{
    position:fixed;top:0;right:0;bottom:0;left:auto;
    width:min(86vw,360px);
    background:var(--nav-bg);
    line-height:1.65;
    display:block;
    padding:102px 24px 40px;   /* 72px header + 30px */
    margin:0;gap:0;
    transform:translateX(110%);
    transition:transform .35s ease;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    box-shadow:-20px 0 60px rgba(0,0,0,.4);
    z-index:1001;
  }
  .navlinks.open{transform:none}

  /* L1 — ~60px rows, 33px apart */
  .navlinks > a,
  .navlinks > .has-dd{display:block;width:100%;margin:0;
    border-bottom:1px solid var(--nav-rule)}
  .navlinks > a,
  .has-dd .dd-trigger{color:var(--nav-fg);font-size:1.05rem;font-weight:600;
    padding:16px 2px;text-align:left;text-transform:none;letter-spacing:normal}
  .navlinks > a::after{display:none}
  .has-dd .dd-trigger{display:flex;align-items:center;justify-content:space-between;cursor:pointer}
  .has-dd .dd-trigger svg{width:15px;height:15px;flex:none;transition:transform .3s ease}
  .has-dd.dd-open .dd-trigger svg{transform:rotate(180deg)}

  /* L2 — ~45px rows, indented 12px, no dividers */
  /* The standard's block sets padding:0 0 6px 12px here. This site sets
     box-sizing:border-box globally, so at max-height:0 that 6px padding box
     stays on screen and the first sub-link bleeds through it. Holding the
     bottom padding until the group opens keeps the collapsed height at 0. */
  .has-dd .dd{position:static;transform:none;opacity:1;visibility:visible;
    display:block;background:transparent;border:none;box-shadow:none;
    margin:0;padding:0 0 0 12px;min-width:0;
    max-height:0;overflow:hidden;transition:max-height .35s ease,padding-bottom .35s ease}
  .has-dd.dd-open .dd{max-height:2800px;padding-bottom:6px}
  .has-dd .dd > a{display:block;color:var(--nav-fg-2);
    font-size:.96rem;font-weight:500;padding:10px 0;white-space:normal;
    text-transform:none;letter-spacing:normal;border:0}

  /* CTA — Rule 15. Label copied verbatim from the existing header button. */
  .navlinks > a.btn{display:block;width:100%;margin-top:28px;padding:16px 20px;
    text-align:center;font-size:1rem;font-weight:700;
    border:none;border-radius:4px;background:var(--nav-accent);
    color:var(--nav-cta-fg);border-bottom:0}

  /* Rule 9 — the header's backdrop-filter would otherwise become the
     containing block for the fixed drawer. Only bites once scrolled. */
  body.nav-open header.site{backdrop-filter:none;-webkit-backdrop-filter:none;
    background:transparent;box-shadow:none;border-bottom-color:transparent}
  /* Rule 11 — header rises above the drawer so the burger stays reachable,
     and its other contents hide so only the burger shows. */
  body.nav-open header.site{z-index:1002}
  body.nav-open header.site .logo,
  body.nav-open header.site .nav-phone{opacity:0;pointer-events:none}
  body.nav-open .burger{color:var(--nav-fg)}
}

/* 6b. Current-page indicator — set at runtime, no per-page markup.
   The bar sits in the drawer's own 24px side padding rather than against the
   text, so it reads as a marker instead of an underline that ran aground.
   Absolutely positioned, so row heights and the left text edge are unchanged. */
.navlinks a[aria-current="page"]{position:relative;font-weight:700;color:var(--nav-fg)}
.navlinks a[aria-current="page"]::before{content:"";position:absolute;
  left:-12px;top:16px;bottom:16px;width:2px;border-radius:1px;background:var(--nav-accent)}
.navlinks .dd > a[aria-current="page"]::before{top:10px;bottom:10px}
.navlinks .dd-current > .dd-trigger{color:var(--nav-accent)}

main{padding-top:4.5rem}
@media(min-width:1024px){main{padding-top:6rem}}

/* ============================================================
   4. HERO
   ============================================================ */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;padding:4rem 0}
@media(min-width:768px){.hero{min-height:90vh}}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg .veil{position:absolute;inset:0;
  background:linear-gradient(to bottom,hsl(var(--background)/.82) 0%,hsl(var(--background)/.62) 60%,hsl(var(--background)/.75) 100%)}
@media(min-width:768px){
  .hero-bg .veil{background:linear-gradient(to right,hsl(var(--background)) 0%,hsl(var(--background)/.7) 50%,transparent 100%)}
}
.hero .container{position:relative;z-index:10}
.hero-inner{max-width:42rem}
.hero h1{font-size:clamp(2.5rem,9vw,4.5rem);font-weight:700;line-height:1.1;margin-bottom:1.5rem}
.hero .sub1{font-size:clamp(1.125rem,3.6vw,1.5rem);color:hsl(var(--foreground)/.9);margin:1.5rem 0 1rem}
.hero .sub2{font-size:1.0625rem;color:hsl(var(--muted-foreground));margin-bottom:2rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem}
@media(max-width:479px){.hero-actions .btn-primary,.hero-actions .btn-outline{width:100%}}

/* ============================================================
   5. ABOUT
   ============================================================ */
.about-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:1024px){.about-grid{grid-template-columns:1fr 1fr;gap:3rem}}
.about-media .frame{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:1rem}
.about-media img{width:100%;height:100%;object-fit:cover}
.about-media .frame::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,hsl(var(--background)/.6),transparent 50%)}
.about-copy h3{font-size:clamp(1.375rem,4.4vw,1.875rem);font-weight:600;margin-bottom:1.5rem}
.about-copy p{color:hsl(var(--muted-foreground));line-height:1.75;margin-bottom:1.5rem}
.about-copy p.lede{font-size:1.0625rem}

.stats-mobile{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
@media(min-width:1024px){.stats-mobile{display:none}}
.stats-mobile .st{text-align:center;padding:1rem .5rem;border-radius:.75rem;background:hsl(var(--card)/.5);border:1px solid hsl(var(--border))}
.stats-mobile .st b{display:block;font-size:1.5rem;font-weight:700;color:hsl(var(--primary))}
.stats-mobile .st span{font-size:.6875rem;color:hsl(var(--muted-foreground))}

.stats-bar{display:none;justify-content:center;margin-top:-2rem;position:relative;z-index:10}
@media(min-width:1024px){.stats-bar{display:flex}}
.stats-card{background:hsl(var(--card)/.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid hsl(var(--primary)/.3);border-radius:1rem;padding:1.5rem;
  box-shadow:0 25px 50px -12px hsl(var(--primary)/.1);width:100%;max-width:48rem}
.stats-card .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.stats-card .st{text-align:center}
.stats-card .ic{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;
  border-radius:9999px;background:hsl(var(--primary)/.1);margin-bottom:.75rem;color:hsl(var(--primary));transition:background .3s}
.stats-card .st:hover .ic{background:hsl(var(--primary)/.2)}
.stats-card .st b{display:block;font-size:1.875rem;font-weight:700;color:hsl(var(--primary));margin-bottom:.25rem}
.stats-card .st span{font-size:.875rem;color:hsl(var(--muted-foreground))}

/* ============================================================
   6. SERVICES — overlapping rectangular cards
   ============================================================ */
.svc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.svc-card:nth-child(1),.svc-card:nth-child(4),.svc-card:nth-child(5){grid-column:span 7}
.svc-card:nth-child(2),.svc-card:nth-child(3),.svc-card:nth-child(6){grid-column:span 5}
.svc-card{position:relative;display:block;overflow:hidden;border-radius:var(--radius);min-height:262px;
  background:hsl(var(--charcoal));border:1px solid hsl(var(--border));transition:border-color .5s}
.svc-card:hover{border-color:hsl(var(--primary))}
.svc-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.svc-card:hover img{transform:scale(1.07)}
.svc-veil{position:absolute;inset:0;opacity:0;transition:opacity .4s ease;
  background:linear-gradient(to top,hsl(var(--charcoal)/.94) 0%,hsl(var(--charcoal)/.68) 60%,hsl(var(--charcoal)/.46) 100%)}
.svc-card:hover .svc-veil{opacity:1}
.svc-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px 66px 24px 26px;display:block}
.svc-title{display:block;font-family:"Playfair Display",Georgia,serif;font-size:clamp(20px,1.7vw,26px);
  font-weight:600;color:hsl(var(--cream));letter-spacing:-.02em;line-height:1.15;
  text-shadow:0 2px 14px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.42);transition:color .3s}
.svc-card:hover .svc-title{color:hsl(var(--primary))}
.svc-copy{display:block;margin-top:0;font-size:14px;line-height:1.55;color:hsl(var(--cream)/.88);
  max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .35s ease,margin-top .45s ease}
.svc-card:hover .svc-copy{max-height:170px;opacity:1;margin-top:9px}
.svc-learn{display:block;max-height:0;opacity:0;overflow:hidden;font-size:.8125rem;font-weight:600;
  color:hsl(var(--primary));text-transform:uppercase;letter-spacing:.05em;
  transition:max-height .45s ease,opacity .35s ease,margin-top .45s ease}
.svc-card:hover .svc-learn{max-height:40px;opacity:1;margin-top:12px}
.svc-arrow{position:absolute;right:24px;bottom:26px;z-index:3;color:hsl(var(--primary));font-size:28px;line-height:1;
  transition:transform .35s ease;text-shadow:0 2px 12px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.45)}
.svc-card:hover .svc-arrow{transform:translateX(6px)}
@media(max-width:900px){
  .svc-card:nth-child(n){grid-column:span 12}
  .svc-card{min-height:230px}
  .svc-body{padding:20px 58px 20px 20px}
}
/* touch devices: no hover, so keep the copy visible */
@media(hover:none),(pointer:coarse){
  .svc-veil{opacity:1}
  .svc-copy{max-height:170px;opacity:1;margin-top:9px}
  .svc-learn{max-height:40px;opacity:1;margin-top:12px}
  .svc-card:hover img{transform:none}
}

/* ============================================================
   7. FEATURED PROJECTS
   ============================================================ */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;align-items:start}
@media(min-width:768px){.gal{grid-template-columns:repeat(3,1fr);gap:1rem}}
/* frames follow the photo's own shape, same rule as the full gallery grid */
.gal .cell{overflow:hidden;border-radius:.5rem;background:hsl(var(--charcoal-lighter));line-height:0}
.gal img{width:100%;height:auto;display:block;transition:transform .5s}
.gal .cell:hover img{transform:scale(1.05)}
/* sits under the section heading, above the grid, flush with its left edge */
/* Centred and given clear space under the gold line. Martin's call 2026-08-15;
   this reverses the top-left placement Build-Standards asked for. */
.gal-more{text-align:center;margin:2.25rem 0 2rem}
@media(min-width:768px){.gal-more{margin-top:2.75rem}}
.gal-more a{
  display:inline-flex;align-items:center;justify-content:center;gap:.75rem;
  padding:1.125rem 2.5rem;min-height:56px;
  border:2px solid hsl(var(--primary));border-radius:9999px;
  background:hsl(var(--primary)/.08);color:hsl(var(--primary));
  font-size:.9375rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  transition:background-color .3s,color .3s,box-shadow .3s;
}
.gal-more a svg{transition:transform .3s}
.gal-more a:hover{background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  box-shadow:0 10px 30px -8px hsl(var(--primary)/.5)}
.gal-more a:hover svg{transform:translateX(5px)}
@media(max-width:479px){.gal-more a{width:100%;padding:1.125rem 1rem;font-size:.875rem;letter-spacing:.06em}}

/* ============================================================
   8. REVIEWS
   ============================================================ */
.rv-head .rv-count{margin-top:.6rem;font-size:.8125rem;color:hsl(var(--muted-foreground));letter-spacing:.02em}
.rv-head{text-align:center;margin-bottom:3rem}
.rv-head h2{font-size:clamp(1.75rem,5vw,2.25rem);font-weight:700;margin-bottom:1rem}
.rv-head .gsub{margin-top:1.25rem;display:inline-flex;align-items:center;gap:.6rem;font-size:.875rem;
  color:hsl(var(--muted-foreground))}
.rv-head .gsub b{color:hsl(var(--foreground));font-weight:600}
.rv-viewport{overflow:hidden}
.rv-track{display:flex;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.rv-card{flex:0 0 33.3333%;padding:0 11px;box-sizing:border-box;display:flex}
@media(max-width:1000px){.rv-card{flex:0 0 50%}}
@media(max-width:700px){.rv-card{flex:0 0 100%;padding:0 4px}}
.rv-inner{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);
  padding:32px 28px;height:100%;transition:border-color .4s}
@media(max-width:700px){.rv-inner{padding:26px 22px}}
.rv-inner:hover{border-color:hsl(var(--primary))}
.rv-stars{color:hsl(var(--primary));font-size:17px;letter-spacing:2px}
.rv-text{color:hsl(var(--foreground)/.9);font-size:15.5px;line-height:1.65;margin:14px 0 22px}
.rv-who{display:flex;align-items:center;gap:13px}
.rv-who span.rv-av{width:44px;height:44px;flex:none;border-radius:50%;background:hsl(var(--primary));
  color:hsl(var(--primary-foreground));display:grid;place-items:center;font-weight:800;font-size:17px}
.rv-who b{display:block;font-size:15px;color:hsl(var(--foreground))}
.rv-who span{font-size:12.5px;color:hsl(var(--muted-foreground))}
.rv-nav{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:2.5rem}
.rv-arrow{width:52px;height:52px;border-radius:50%;border:1.5px solid hsl(var(--border));
  background:hsl(var(--card));color:hsl(var(--primary));font-size:26px;line-height:1;
  display:grid;place-items:center;transition:background-color .3s,color .3s,border-color .3s}
.rv-arrow:hover{background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-color:hsl(var(--primary))}
.rv-dots{display:flex;gap:8px;align-items:center}
.rv-dot{width:9px;height:9px;border-radius:50%;background:hsl(var(--border));padding:0;transition:.3s}
.rv-dot.on{background:hsl(var(--primary));width:26px;border-radius:99px}

/* ============================================================
   9. CTA — vertical project photos stacked into one backdrop
   ============================================================ */
.cta{position:relative;overflow:hidden}
.cta .bg{position:absolute;inset:0}
.cta .bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.6) saturate(.9)}
.cta .bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 50%,hsl(var(--charcoal)/.62) 0%,hsl(var(--charcoal)/.74) 65%,hsl(var(--charcoal)/.84) 100%),
    linear-gradient(to bottom,hsl(var(--charcoal)/.5),hsl(var(--charcoal)/.18) 45%,hsl(var(--charcoal)/.55));
}
.cta .container{position:relative;z-index:10}
.cta-inner{max-width:48rem;margin:0 auto;text-align:center}
.cta-inner h2{font-size:clamp(1.75rem,5.4vw,2.25rem);font-weight:700;margin-bottom:1rem;
  text-shadow:0 2px 18px rgba(0,0,0,.6)}
.cta-inner p{margin-top:1.5rem;margin-bottom:2rem;font-size:1.0625rem;color:hsl(var(--foreground)/.86);
  text-shadow:0 1px 10px rgba(0,0,0,.55)}
.cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
@media(max-width:479px){.cta-actions .btn-primary,.cta-actions .btn-outline{width:100%}}

/* ============================================================
   10. CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr;gap:3rem}
@media(min-width:1024px){.contact-grid{grid-template-columns:1fr 1fr;gap:4rem}}
.contact h2{font-size:clamp(1.75rem,5vw,2.25rem);font-weight:700;margin-bottom:1rem}
.contact .lede{font-size:1.0625rem;color:hsl(var(--muted-foreground));margin:2rem 0}
.info-list{margin-bottom:2rem}
.info-item{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.5rem}
.info-item .ic{padding:.75rem;background:hsl(var(--primary)/.1);border-radius:.5rem;color:hsl(var(--primary));display:flex;flex:none}
.info-item h3{font-family:Inter,sans-serif;font-weight:600;margin-bottom:.25rem}
.info-item a,.info-item p{color:hsl(var(--muted-foreground));transition:color .3s;word-break:break-word}
.info-item a:hover{color:hsl(var(--primary))}
/* no card here on purpose — a boxed panel inside the boxed section reads as
   clutter, so this is a plain block separated by a rule */
.areas{padding-top:2rem;border-top:1px solid hsl(var(--border))}
.areas h3{font-family:Inter,sans-serif;font-weight:600;font-size:.75rem;text-transform:uppercase;
  letter-spacing:.14em;color:hsl(var(--primary));margin-bottom:1.125rem}
.areas .chips{display:flex;flex-wrap:wrap;gap:.5rem}
.areas .chips span{padding:.5rem 1rem;border:1px solid hsl(var(--border));border-radius:9999px;
  font-size:.875rem;color:hsl(var(--foreground)/.75);transition:border-color .3s,color .3s}
.areas .chips span:hover{border-color:hsl(var(--primary)/.55);color:hsl(var(--primary))}

.form-card{background:hsl(var(--charcoal-lighter));border-radius:.5rem;padding:1.5rem;
  border:1px solid hsl(var(--primary)/.4);box-shadow:0 10px 15px -3px hsl(var(--primary)/.25)}
@media(min-width:768px){.form-card{padding:2rem}}
.form-card h3{font-size:1.5rem;font-weight:600;margin-bottom:1.5rem}
.form-card .form-sub{margin:-1.1rem 0 1.4rem;color:hsl(var(--muted-foreground));font-size:.9375rem;line-height:1.55}
.form-card h3+.form-sub{margin-top:-1.1rem}
.form-row{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:768px){.form-row{grid-template-columns:1fr 1fr;gap:1.5rem}}
.field{margin-bottom:1.5rem}
.field label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem}
.field label .req{color:hsl(var(--primary))}
.field input,.field textarea,.field select{width:100%;padding:.75rem 1rem;background:hsl(var(--charcoal));
  border:1px solid hsl(var(--border));border-radius:var(--radius);color:hsl(var(--foreground));
  font-size:16px; /* keeps iOS from zooming on focus */
  transition:border-color .3s,box-shadow .3s}
.field textarea{resize:vertical;min-height:120px}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}
.field select option{background:hsl(var(--charcoal));color:hsl(var(--foreground))}
.field input::placeholder,.field textarea::placeholder{color:hsl(var(--muted-foreground))}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:transparent;box-shadow:0 0 0 2px hsl(var(--primary))}
.filebox{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;background:hsl(var(--charcoal));
  border:1px dashed hsl(var(--border));border-radius:var(--radius);cursor:pointer;
  color:hsl(var(--muted-foreground));transition:border-color .3s}
.filebox:hover{border-color:hsl(var(--primary))}
.filebox input{display:none}
.form-note{font-size:.75rem;color:hsl(var(--muted-foreground));margin-bottom:1.5rem}
.form-card .btn-primary{width:100%}

/* --- submit states --- */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-ok{display:none;margin-top:1rem;padding:1rem;border-radius:var(--radius);
  background:hsl(var(--primary));color:hsl(var(--charcoal));
  text-align:center;font-size:.9375rem;font-weight:600}
.form-ok.show{display:flex;align-items:center;justify-content:center;gap:.625rem}
.form-ok svg{width:20px;height:20px;flex:none}
.form-err{display:none;margin-top:1rem;padding:1rem;border-radius:var(--radius);
  background:hsl(var(--error));color:hsl(var(--white));text-align:center;font-size:.875rem;line-height:1.5}
.form-err.show{display:block}
.form-err a{color:hsl(var(--white));text-decoration:underline}
/* on success every field disappears and only the checkmark remains */
#quote-form.sent>*:not(.form-ok){display:none}
#quote-form.sent .form-ok{margin-top:0;padding:2.5rem 1.5rem;font-size:1.0625rem;
  flex-direction:column;gap:1rem}
#quote-form.sent .form-ok svg{width:46px;height:46px;
  stroke-dasharray:26;stroke-dashoffset:26;
  animation:okdraw .55s .12s cubic-bezier(.65,0,.35,1) forwards}
@keyframes okdraw{to{stroke-dashoffset:0}}

/* ============================================================
   11. FOOTER
   ============================================================ */
footer{background:hsl(var(--charcoal-light));border-top:1px solid hsl(var(--border))}
.foot-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;padding:3.5rem 0}
@media(min-width:768px){.foot-grid{grid-template-columns:repeat(2,1fr);gap:3rem;padding:4rem 0}}
@media(min-width:1024px){.foot-grid{grid-template-columns:repeat(4,1fr)}}
.foot-grid img.logo{height:3.25rem;width:auto;margin-bottom:1.5rem}
.foot-grid h3{font-size:1.25rem;font-weight:600;margin-bottom:1.5rem}
.foot-grid p{color:hsl(var(--muted-foreground));line-height:1.75;margin-bottom:1.5rem}
.foot-grid li{margin-bottom:.75rem;color:hsl(var(--muted-foreground))}
.foot-grid li a{transition:color .3s}
.foot-grid li a:hover{color:hsl(var(--primary))}
.foot-contact a,.foot-contact div{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem;
  transition:color .3s;word-break:break-word}
.foot-contact a:hover{color:hsl(var(--primary))}
.foot-contact svg{flex:none}
.foot-contact div{color:hsl(var(--muted-foreground))}
.foot-cta .btn-primary,.foot-cta .btn-outline{width:100%;margin-bottom:.75rem}
.foot-bottom{border-top:1px solid hsl(var(--border))}
.foot-bottom .container{display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  gap:.75rem;padding-top:1.5rem;padding-bottom:1.5rem;font-size:.8125rem;color:hsl(var(--muted-foreground));
  text-align:center}
@media(min-width:768px){.foot-bottom .container{flex-direction:row;text-align:left;font-size:.875rem}}

/* ============================================================
   11b. FAQ (legacy, unused)
   ============================================================ */
.faq-list{max-width:52rem;margin:0 auto;display:flex;flex-direction:column;gap:1rem}
/* Google My Maps embeds paint their own title bar with the map's name and the
   owning Google account. There is no embed parameter to suppress it, so the
   iframe is made taller than its frame and pulled up by the bar's height,
   with the frame clipping it. --map-chrome is that height. */
.map-embed{--map-chrome:62px;
  max-width:64rem;margin:0 auto;border-radius:var(--radius);overflow:hidden;
  border:1px solid hsl(var(--border));aspect-ratio:16/9;position:relative}
.map-embed iframe{display:block;position:absolute;top:calc(-1 * var(--map-chrome));left:0;
  width:100%;height:calc(100% + var(--map-chrome));border:0}
.faq-item{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);
  overflow:hidden;transition:border-color .3s}
.faq-item[open]{border-color:hsl(var(--primary)/.5)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.25rem 1.5rem;cursor:pointer;list-style:none;font-family:"Playfair Display",Georgia,serif;
  font-size:1.0625rem;font-weight:600;color:hsl(var(--foreground));transition:color .3s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:hsl(var(--primary))}
.faq-ic{flex:none;width:1.75rem;height:1.75rem;display:grid;place-items:center;border-radius:50%;
  background:hsl(var(--primary)/.12);color:hsl(var(--primary));font-size:1.25rem;line-height:1;
  font-family:Inter,sans-serif;transition:transform .3s,background .3s}
.faq-item[open] .faq-ic{transform:rotate(45deg);background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.faq-a{padding:0 1.5rem 1.375rem}
.faq-a p{color:hsl(var(--muted-foreground));line-height:1.7;font-size:.9375rem}

/* ============================================================
   11c. INNER PAGE HERO (service / about / gallery pages)
   ============================================================ */
.page-hero{position:relative;padding:3.5rem 0;background:hsl(var(--charcoal-light));
  border-bottom:1px solid hsl(var(--border));overflow:hidden}
@media(min-width:768px){.page-hero{padding:5rem 0}}
.page-hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,hsl(var(--primary)/.1),transparent 60%)}
.page-hero .container{position:relative;z-index:2;text-align:center}
.page-hero .crumb{font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;
  color:hsl(var(--primary));margin-bottom:1rem}
.page-hero .crumb a{color:hsl(var(--muted-foreground));transition:color .3s}
.page-hero .crumb a:hover{color:hsl(var(--primary))}
.page-hero h1{font-size:clamp(2rem,6vw,3rem);font-weight:700;margin-bottom:1rem}
.page-hero p{max-width:40rem;margin:1.25rem auto 0;color:hsl(var(--muted-foreground));font-size:1.0625rem}

/* service page body */
.svc-detail{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:start}
@media(min-width:1024px){.svc-detail{grid-template-columns:1.05fr .95fr;gap:3.5rem}}
.svc-detail .frame{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:1rem;border:1px solid hsl(var(--border))}
.svc-detail .frame img{width:100%;height:100%;object-fit:cover}
.svc-detail h2{font-size:clamp(1.5rem,4vw,2rem);font-weight:700;margin-bottom:1.25rem}
.svc-detail p{color:hsl(var(--muted-foreground));line-height:1.75;margin-bottom:1.5rem;font-size:1.0625rem}
.svc-detail ul.ticks{margin:1.5rem 0 2rem;display:flex;flex-direction:column;gap:.75rem}
.svc-detail ul.ticks li{display:flex;align-items:flex-start;gap:.65rem;color:hsl(var(--foreground)/.85)}
.svc-detail ul.ticks li svg{flex:none;color:hsl(var(--primary));margin-top:.15rem}
.svc-other{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.6rem}
.svc-other a{padding:.55rem 1rem;border:1px solid hsl(var(--border));border-radius:9999px;font-size:.8125rem;
  color:hsl(var(--foreground)/.75);transition:border-color .3s,color .3s}
.svc-other a:hover{border-color:hsl(var(--primary)/.55);color:hsl(var(--primary))}

/* full gallery grid */
.gallery-full .cell{cursor:zoom-in}
.gallery-full{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}

/* --- LIGHTBOX --- */
.lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(10,10,10,.94);opacity:0;transition:opacity .25s}
.lb.open{display:flex;opacity:1}
.lb::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border:3px solid rgba(255,255,255,.25);border-top-color:hsl(var(--primary));border-radius:50%;animation:lbspin .8s linear infinite;opacity:0;pointer-events:none;transition:opacity .2s}
.lb.lb-loading::after{opacity:1}
.lb.lb-loading>img{opacity:.65}
@keyframes lbspin{to{transform:rotate(360deg)}}
.lb img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:.4rem;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.8);transition:transform .25s;transform:scale(.97);touch-action:none}
.lb.open img{transform:scale(1)}
.lb.zoomed img{cursor:zoom-out;max-width:none;max-height:none}
.lb:not(.zoomed) img{cursor:zoom-in}
.lb-btn{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:0;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;color:hsl(var(--white));
  background:hsl(var(--primary)/.9);transition:background .2s,transform .2s;z-index:2}
.lb-btn:hover{background:hsl(var(--primary));transform:translateY(-50%) scale(1.06)}
.lb-prev{left:max(1rem,3vw)}
.lb-next{right:max(1rem,3vw)}
.lb-close{position:absolute;top:1.1rem;right:1.1rem;transform:none;width:46px;height:46px;
  background:rgba(255,255,255,.12)}
.lb-close:hover{background:hsl(var(--primary));transform:scale(1.06)}
.lb-count{position:absolute;bottom:1.25rem;left:50%;transform:translateX(-50%);
  color:hsl(var(--foreground)/.85);font-size:.8125rem;letter-spacing:.05em;
  background:rgba(0,0,0,.5);padding:.4rem .9rem;border-radius:9999px}
/* the photo's unique identifier, on the left-hand side of the open photo */
.lb-id{position:absolute;top:1.25rem;left:1.25rem;max-width:calc(100% - 8rem);
  color:hsl(var(--primary));font-size:.8125rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;background:rgba(0,0,0,.55);padding:.4rem .9rem;
  border-radius:9999px;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){.lb-id{top:.75rem;left:.75rem;font-size:.75rem;padding:.35rem .75rem}}
@media(max-width:640px){.lb-btn{width:44px;height:44px}.lb-prev{left:.5rem}.lb-next{right:.5rem}}
@media(min-width:640px){.gallery-full{grid-template-columns:repeat(3,1fr);gap:1rem}}
@media(min-width:1024px){.gallery-full{grid-template-columns:repeat(4,1fr)}}
/* Frames follow each photo's own shape. The grid used to force aspect-ratio:1/1
   with object-fit:cover, which cropped every portrait photo square. Cells now
   take their height from the image and align to the top of the row, so nothing
   is cropped and the tall panoramas keep their full framing. */
.gallery-full{align-items:start}
.gallery-full .cell{overflow:hidden;border-radius:.5rem;background:hsl(var(--charcoal-lighter));line-height:0}
.gallery-full .cell img{width:100%;height:auto;display:block;transition:transform .5s}
.gallery-full .cell:hover img{transform:scale(1.05)}

/* ============================================================
   11b. SERVICE PAGE SECTIONS (2026-08-02 revisions)
   ============================================================ */
.svc-sec-head{text-align:center;margin-bottom:2.5rem}
.svc-sec-head h2{font-size:clamp(1.6rem,4.5vw,2rem);font-weight:700;margin-bottom:.75rem}
.svc-sec-head p{color:hsl(var(--muted-foreground));max-width:42rem;margin:1rem auto 0;font-size:1.0313rem}
.sec-alt{background:hsl(var(--charcoal-light));padding:4.5rem 0}
@media(min-width:768px){.sec-alt{padding:5rem 0}}

.fgrid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:2rem}
@media(min-width:640px){.fgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.fgrid.cols3{grid-template-columns:repeat(3,1fr)}}
.fcard{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:.75rem;padding:1.75rem}
.fcard h3{font-size:1.125rem;font-weight:600;margin-bottom:.65rem;color:hsl(var(--gold))}
.fcard p{color:hsl(var(--muted-foreground));font-size:.9688rem;line-height:1.65}

/* Photo-backed cards. The scrim is deliberately heavy: these sit behind a
   full paragraph, not a single line, so the whole card has to stay readable
   rather than just the bottom third. Body copy steps up from muted to full
   foreground because muted grey does not hold up over a photo. */
.fcard.has-bg{position:relative;overflow:hidden;background:hsl(var(--charcoal))}
.fcard-bg{position:absolute;inset:0;margin:0;line-height:0;pointer-events:none}
.fcard-bg img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) brightness(.9)}
.fcard.has-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,hsl(var(--charcoal)/.62),hsl(var(--charcoal)/.73))}
.fcard-body{position:relative;z-index:1}
.fcard.has-bg p{color:hsl(var(--foreground))}
.fcard.has-bg h3{color:hsl(var(--gold-light))}
@media(prefers-reduced-motion:no-preference){
  .fcard-bg img{transition:transform .6s}
  .fcard.has-bg:hover .fcard-bg img{transform:scale(1.04)}
}

.chips-label{text-align:center;font-size:1.05rem;font-weight:600;letter-spacing:.02em;margin:2rem 0 1rem;color:hsl(var(--foreground))}
.style-chips{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center;margin-top:1.75rem}
.style-chips span{background:hsl(var(--charcoal-lighter));border:1px solid hsl(var(--border));color:hsl(var(--foreground));padding:.6rem 1.15rem;border-radius:999px;font-size:.9063rem;white-space:nowrap}
.gal-nav-band{padding:2.25rem 0}
@media(min-width:768px){.gal-nav-band{padding:2.75rem 0}}
.gal-nav-band .chips-label{margin-top:0}
.gal-nav{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center}
.gal-nav .chip{background:hsl(var(--charcoal-lighter));border:1px solid hsl(var(--border));color:hsl(var(--foreground));padding:.6rem 1.15rem;border-radius:999px;font-size:.9063rem;white-space:nowrap;transition:border-color .3s,color .3s}
.gal-nav .chip:hover{border-color:hsl(var(--primary)/.55);color:hsl(var(--primary))}
.gal-sec{scroll-margin-top:5.5rem}
.gal-sec h2{text-align:center;font-size:clamp(1.6rem,4vw,2.25rem);font-weight:700;margin-bottom:2rem}
.gal-sec .gallery-full{margin-top:0}

.duo{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:2rem}
@media(min-width:768px){.duo{grid-template-columns:1fr 1fr;gap:1.5rem}}

.faq-acc{max-width:820px;margin:2rem auto 0}
.faq-acc details{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:.6rem;margin-bottom:.75rem;overflow:hidden}
.faq-acc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.35rem;font-weight:600;font-size:1rem;line-height:1.45}
.faq-acc summary::-webkit-details-marker{display:none}
.faq-acc summary::after{content:"+";flex:0 0 auto;font-size:1.5rem;font-weight:400;color:hsl(var(--gold));transition:transform .25s;line-height:1}
.faq-acc details[open] summary::after{transform:rotate(45deg)}
.faq-acc details[open] summary{border-bottom:1px solid hsl(var(--border))}
.faq-acc .faq-a{padding:1rem 1.35rem 1.25rem;color:hsl(var(--muted-foreground));line-height:1.65;font-size:.9688rem}
.faq-note{text-align:center;color:hsl(var(--muted-foreground));margin-top:1.25rem;font-size:.9375rem}
.faq-note a{color:hsl(var(--gold));text-decoration:underline}

.svc-ctaband{text-align:center}
.svc-ctaband .btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.75rem}
@media(max-width:479px){.svc-ctaband .btns .btn-primary,.svc-ctaband .btns .btn-outline{width:100%}}

/* ============================================================
   11c. SERVICE PAGE — LARGER, MORE LEGIBLE BODY TEXT
   Scoped to body.svc-page so the home, about and gallery pages
   are untouched. Section headings (h1/h2) keep their original
   size; everything else steps up, including the card headings.
   ============================================================ */
body.svc-page .page-hero p{font-size:1.1875rem;line-height:1.7}
body.svc-page .svc-detail p{font-size:1.1875rem;line-height:1.75}
body.svc-page .svc-detail ul.ticks li{font-size:1.125rem;line-height:1.6}
body.svc-page .svc-detail ul.ticks li svg{width:22px;height:22px;margin-top:.2rem}
body.svc-page .svc-sec-head p{font-size:1.1875rem;line-height:1.7;max-width:46rem}
body.svc-page .svc-other a{font-size:.9375rem;padding:.6rem 1.1rem}
body.svc-page .chips-label{font-size:1.1875rem}

/* the squares: card heading and copy both step up */
body.svc-page .fcard{padding:2rem}
body.svc-page .fcard h3{font-size:1.375rem;margin-bottom:.8rem;line-height:1.35}
body.svc-page .fcard p{font-size:1.125rem;line-height:1.7}
body.svc-page .style-chips span{font-size:1.0625rem;padding:.65rem 1.25rem}

/* FAQ boxes */
body.svc-page .faq-acc summary{font-size:1.1875rem;line-height:1.5;padding:1.2rem 1.4rem}
body.svc-page .faq-acc .faq-a{font-size:1.125rem;line-height:1.7}
body.svc-page .faq-note{font-size:1.0625rem}

/* ============================================================
   11e. 404 PAGE
   ============================================================ */
.nf-sec{padding:7rem 0 6rem;text-align:center}
@media(min-width:768px){.nf-sec{padding:9rem 0 7rem}}
.nf-code{font-family:"Playfair Display",Georgia,serif;font-size:clamp(64px,13vw,132px);
  line-height:1;font-weight:700;color:hsl(var(--primary)/.22);margin-bottom:.25rem}
.nf-sec h1{font-size:clamp(28px,5vw,44px);font-weight:700;margin-bottom:1rem}
.nf-sec .gold-line{margin:0 auto 1.5rem}
.nf-lead{max-width:36rem;margin:0 auto 2.25rem;font-size:1.0625rem;line-height:1.7;
  color:hsl(var(--muted-foreground))}
.nf-actions{display:flex;flex-wrap:wrap;gap:.875rem;justify-content:center;margin-bottom:3.5rem}
.nf-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;
  color:hsl(var(--muted-foreground));margin-bottom:1.1rem}
.nf-links{display:flex;flex-wrap:wrap;gap:.625rem;justify-content:center;max-width:44rem;margin:0 auto}
.nf-links a{padding:.6rem 1.15rem;border:1px solid hsl(var(--border));border-radius:99px;
  font-size:.9375rem;color:hsl(var(--foreground)/.85);transition:border-color .3s,color .3s,background .3s}
.nf-links a:hover{border-color:hsl(var(--primary));color:hsl(var(--primary));background:hsl(var(--primary)/.08)}

/* ============================================================
   11d. PROJECT CAROUSEL (service pages)
   ============================================================ */
.pcar-sec{padding:4rem 0}
@media(min-width:768px){.pcar-sec{padding:4.75rem 0}}
.pcar-viewport{overflow:hidden}
.pcar-track{display:flex;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.pcar-slide{flex:0 0 33.3333%;padding:0 9px;box-sizing:border-box}
@media(max-width:1000px){.pcar-slide{flex:0 0 50%}}
@media(max-width:700px){.pcar-slide{flex:0 0 100%;padding:0 4px}}
.pcar-slide figure{margin:0;border:1px solid hsl(var(--border));border-radius:.75rem;overflow:hidden;
  background:hsl(var(--card));aspect-ratio:4/3;transition:border-color .3s}
.pcar-slide figure:hover{border-color:hsl(var(--primary)/.55)}
.pcar-slide img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.pcar-slide figure:hover img{transform:scale(1.04)}
.pcar-nav{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:2.25rem}
.pcar-arrow{width:52px;height:52px;border-radius:50%;border:1.5px solid hsl(var(--border));
  background:hsl(var(--card));color:hsl(var(--primary));font-size:26px;line-height:1;
  display:grid;place-items:center;transition:background-color .3s,color .3s,border-color .3s}
.pcar-arrow:hover{background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-color:hsl(var(--primary))}
.pcar-dots{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.pcar-dot{width:9px;height:9px;border-radius:50%;background:hsl(var(--border));padding:0;transition:.3s}
.pcar-dot.on{background:hsl(var(--primary));width:26px;border-radius:99px}
.pcar-more{text-align:center;margin-top:1.75rem}
.pcar-more a{color:hsl(var(--gold));font-size:1.0625rem;text-decoration:underline;text-underline-offset:3px}

/* current service highlighted in the Services dropdown */
.nav-menu a.active{color:hsl(var(--primary));font-weight:700;background:hsl(var(--primary)/.1)}

/* ============================================================
   12. MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.15s !important;animation-duration:.001s !important;animation-iteration-count:1 !important}
  html{scroll-behavior:auto}
  .ld-word span,.ld-sub,.ld-barwrap,.ld-mark img,.ld-ring{opacity:1;transform:none}
  .ld-fill{width:100%}
}