/* ==========================================================================
   Spik & Span Cleaning — shared design system
   One copy of the chrome every page uses: variables, type, buttons, reveal
   animation, offer bar, nav, section shell and footer. Page-specific styles
   (hero photography, service cards, price tables, forms, etc.) stay inline
   in each page's own <style> block.
   ========================================================================== */
:root{
  --bg:#F0E4D3;          /* warm light tan — one colour for the whole page */
  --surface:#FFFFFF;     /* raised cards — clean white, high contrast against bg */
  --deep:#1A0F0A;         /* darkest brown-black — footer, buttons, badges */
  --deep-soft:#2A1810;
  --heading:#241611;      /* near-black warm brown — headings, high contrast */
  --ink:#4A3527;          /* body text — dark warm brown */
  --ink-soft:#8A7259;     /* secondary / labels */
  --sage:#A87B12;         /* accent — sunflower gold, used sparingly */
  --sage-light:#D4A017;
  --sage-deep:#7A5A0D;    /* small-text accent (AA on light) */
  --accent:#8B3A4A;       /* rich burgundy — the single highlighted word in a headline */
  --teal:#2C6B64;         /* the logo's turquoise droplet, reused sparingly as an accent */
  --line:#DDC9AC;
  --line-soft:#E8D9C3;
  --shadow:0 18px 36px -28px rgba(43,33,31,.16);
  --shadow-lift:0 26px 48px -30px rgba(43,33,31,.22);
  --space-4:26px; --space-5:40px; --space-6:64px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }
body{
  font-family:'Inter',sans-serif;font-weight:400;
  color:var(--ink);background:var(--bg);
  line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Playfair Display',serif;color:var(--heading);font-weight:400;font-style:normal;line-height:1.2}
a{color:inherit;text-decoration:none}
::selection{background:var(--sage);color:#fff}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px;border-radius:2px}
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}

/* type hierarchy — restrained, editorial sizes; hierarchy comes from spacing as much as scale */
.eyebrow{font-family:'Inter',sans-serif;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--sage-deep);font-weight:600}
.display{font-family:'Anton',sans-serif;font-weight:400;font-style:normal;text-transform:uppercase;
  font-size:clamp(36px,5.6vw,68px);letter-spacing:.005em;line-height:1.08;color:var(--heading)}
.h2{font-size:clamp(22px,2.6vw,32px);letter-spacing:-.005em}
.h3{font-size:clamp(17px,1.4vw,19px)}
.lead{font-size:clamp(15.5px,1.4vw,17px);color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 34px;
  font-family:'Inter',sans-serif;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  appearance:none;background:none;
  border:1px solid transparent;border-radius:3px;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,background .25s,color .25s,border-color .25s;will-change:transform}
.btn-dark{background:var(--deep);color:#fff;box-shadow:0 10px 22px -14px rgba(43,33,31,.4)}
.btn-dark:hover{background:var(--deep-soft);transform:translateY(-2px);box-shadow:0 16px 28px -14px rgba(43,33,31,.4)}
.btn-ghost{border-color:var(--heading);color:var(--heading)}
.btn-ghost:hover{background:var(--heading);color:#fff;transform:translateY(-2px)}
.btn svg{width:16px;height:16px;flex:none}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none}}
.stagger > *{transition-delay:calc(var(--i,0) * 70ms)}

/* offer bar */
.offer{position:relative;z-index:60;display:block;text-align:center;background:var(--deep);color:#fff;
  padding:10px 20px;font-size:13px;letter-spacing:.03em}
.offer strong{color:var(--sage-light);font-weight:600}
.offer .sep{opacity:.4;margin:0 10px}

/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(240,228,211,.8);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:background .4s,box-shadow .4s,border-color .4s}
nav.scrolled{background:rgba(240,228,211,.95);border-bottom-color:var(--line);box-shadow:0 10px 30px -22px rgba(43,33,31,.3)}
.nav-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 28px;max-width:1240px;margin:0 auto}
.brand{display:inline-flex;align-items:center;gap:12px;flex:none;min-width:0}
.brand-mark{width:54px;height:54px;flex:none}
.brand-name{font-family:'Playfair Display',serif;font-size:22px;color:var(--heading);font-weight:500;letter-spacing:.01em;line-height:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.brand-name em{color:var(--sage);font-style:normal;font-weight:500}
.brand-name .co{font-size:13px;color:var(--ink-soft);letter-spacing:.14em}

/* desktop link nav — Home / Services / Reviews / Contact, plus a distinct Book Now CTA */
/* absolutely positioned so it's centred on the bar itself, not just the leftover space between logo and CTA */
.nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:30px}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--heading);letter-spacing:.01em;transition:color .2s;position:relative}
.nav-links a:hover{color:var(--sage-deep)}
.nav-links a.current{color:var(--sage-deep)}
.nav-cta.btn{flex:none;padding:11px 24px;font-size:12px}
@media(max-width:900px){.nav-links{display:none}.nav-cta.btn{display:none}}

/* mobile menu button + panel (shown at narrow widths, hidden nav-links take over) */
.menu-btn{display:none;position:relative;align-items:center;gap:10px;flex:none;
  background:var(--deep);color:#fff;padding:12px 22px 12px 18px;border-radius:999px;border:none;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  transition:background .25s,transform .3s,box-shadow .3s;box-shadow:0 10px 22px -12px rgba(43,33,31,.45)}
.menu-btn:hover{background:var(--deep-soft);transform:translateY(-2px)}
.menu-btn .bars{width:18px;height:13px;position:relative;flex:none}
.menu-btn .bars span{position:absolute;left:0;right:0;height:1.6px;background:#fff;transition:transform .3s,opacity .3s}
.menu-btn .bars span:nth-child(1){top:0}
.menu-btn .bars span:nth-child(2){top:5.5px}
.menu-btn .bars span:nth-child(3){top:11px}
.menu-btn[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .bars span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.menu-panel{position:absolute;top:calc(100% + 10px);right:28px;z-index:55;min-width:230px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lift);
  padding:12px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility .25s}
.menu-panel.open{opacity:1;visibility:visible;transform:none}
.menu-panel a{display:block;padding:12px 16px;border-radius:8px;color:var(--heading);font-size:14.5px;font-weight:500;transition:background .2s,color .2s}
.menu-panel a:hover{background:var(--line-soft);color:var(--sage-deep)}
@media(max-width:900px){.menu-btn{display:inline-flex}}
@media(max-width:560px){.brand-name{font-size:20px}.brand-mark{width:42px;height:42px}.nav-inner{padding:12px 18px}
  .menu-btn{padding:11px 18px 11px 15px}.menu-panel{right:18px}}
section{position:relative;scroll-margin-top:76px}

/* section shell */
.section{padding:var(--space-6) 0}
@media(max-width:600px){.section{padding:40px 0}}
.sec-head{max-width:660px;margin:0 auto var(--space-5);text-align:center}
.sec-head .eyebrow{display:block;margin-bottom:16px}
.sec-head p{margin-top:16px;color:var(--ink-soft)}
.sec-cta{margin-top:var(--space-5);display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.more-link{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--sage-deep);border:none;border-bottom:1px solid var(--line);padding:0 0 2px;background:none;font-family:'Inter',sans-serif;cursor:pointer;transition:border-color .25s}
.more-link:hover{border-color:var(--sage-deep)}

/* simple page header, for pages without a photo hero (services, reviews, faqs, contact, gallery, legal, auth) */
.page-hero{padding:64px 0 16px;text-align:center}
.page-hero .eyebrow{display:block;margin-bottom:18px;font-size:12.5px;letter-spacing:.26em}
.page-hero h1{max-width:16ch;margin:0 auto}
.page-hero p{margin:18px auto 0;max-width:56ch;color:var(--ink)}

/* footer */
footer{background:var(--deep);color:rgba(255,255,255,.66);padding:26px 28px 14px}
.foot-top{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1.1fr;gap:22px}
@media(max-width:820px){.foot-top{grid-template-columns:1fr 1fr;gap:20px 22px}}
@media(max-width:480px){.foot-top{grid-template-columns:1fr;text-align:center}}
.foot-brand .brand{margin-bottom:6px}
.foot-brand .brand-name{color:#fff}
.foot-brand .brand-name .co{color:rgba(255,255,255,.5)}
.foot-brand p{color:rgba(255,255,255,.6);font-size:12.5px;max-width:34ch}
@media(max-width:480px){.foot-brand p{margin:0 auto}}
.foot-social{margin-top:10px;display:flex;gap:8px}
@media(max-width:480px){.foot-social{justify-content:center}}
.foot-social a{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;color:#fff;transition:all .3s}
.foot-social a:hover{color:var(--deep);background:var(--sage);border-color:var(--sage);transform:translateY(-3px)}
.foot-social svg{width:13px;height:13px}
.foot-col h4{font-family:'Inter',sans-serif;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:600;margin-bottom:8px}
.foot-col a,.foot-col .fi{display:block;color:rgba(255,255,255,.66);font-size:12.5px;margin-bottom:4px;transition:color .2s}
.foot-col a:hover{color:var(--sage-light)}
.foot-bottom{max-width:1140px;margin:16px auto 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11px;color:rgba(255,255,255,.5)}
@media(max-width:600px){.foot-bottom{flex-direction:column;text-align:center}}
.foot-bottom a{color:rgba(255,255,255,.8);border-bottom:1px solid var(--sage);margin:0 8px}
.foot-bottom a:hover{color:#fff}
.foot-owner{text-align:center;padding:0 24px 12px;font-size:10.5px;opacity:.6}

/* mobile call bar */
.call-bar{display:none}
@media(max-width:760px){
  body{padding-bottom:62px}
  .call-bar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;box-shadow:0 -8px 30px rgba(43,33,31,.2)}
  .call-bar a{flex:1;text-align:center;padding:18px 10px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
  .call-bar .cb-call{background:var(--deep);color:#fff}
  .call-bar .cb-wa{background:linear-gradient(135deg,var(--sage-light),var(--sage));color:#fff}
}