/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --white:        #ffffff;
  --beige:        #f7f3ec;
  --beige-deep:   #efe7d8;
  --gold:         #b8924a;
  --gold-soft:    #d6b87a;
  --ink:          #1a1a1a;
  --ink-soft:     #4a4a4a;
  --muted:        #8a8579;
  --hairline:     #e8e0d2;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --maxw: 1180px;
  --pad-x: clamp(20px, 5vw, 56px);
  --section-y: clamp(72px, 10vw, 140px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }

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

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--pad-x);
  padding-right:var(--pad-x);
}
section{ padding-top:var(--section-y); padding-bottom:var(--section-y); }

/* Typography */
h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:.005em;
  color:var(--ink);
  margin:0;
}
h1{ font-size:clamp(1.9rem, 3.6vw, 2.9rem); line-height:1.15; }
h2{ font-size:clamp(2rem, 4vw, 3rem); line-height:1.1; }
h3{ font-size:clamp(1.25rem, 1.8vw, 1.5rem); line-height:1.3; }
p{ margin:0 0 1em; color:var(--ink-soft); }

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
  display:inline-block;
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:28px; height:1px;
  background:var(--gold);
  margin-right:12px;
  vertical-align:middle;
}

.rule{
  width:40px; height:1px;
  background:var(--gold);
  border:0; margin:24px 0;
}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.header.scrolled{ border-bottom-color:var(--hairline); }
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:18px; padding-bottom:18px;
}
.brand{
  display:inline-flex; align-items:center;
  color:var(--ink);
  transition:opacity .25s var(--ease);
}
.brand:hover{ opacity:.75; }
.brand__logo{
  display:block;
  height:52px;
  width:auto;
  max-width:220px;
  object-fit:contain;
}
.nav{
  display:flex; align-items:center; gap:32px;
}
.nav__links{ display:flex; gap:28px; }
.nav__links a{
  font-size:.78rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-soft);
  position:relative; padding:6px 0;
  transition:color .25s var(--ease);
}
.nav__links a:hover{ color:var(--gold); }

/* Language switcher */
.lang{
  display:flex; align-items:center; gap:2px;
  border:1px solid var(--hairline);
  padding:4px;
  border-radius:999px;
}
.lang button{
  background:transparent; border:0;
  font-size:.7rem; letter-spacing:.14em; font-weight:500;
  color:var(--ink-soft);
  padding:6px 10px; border-radius:999px;
  transition:all .25s var(--ease);
}
.lang button:hover{ color:var(--ink); }
.lang button[aria-current="true"]{
  background:var(--ink); color:#fff;
}

/* Mobile nav toggle */
.nav-toggle{
  display:none;
  background:transparent; border:0;
  width:32px; height:32px; padding:0;
}
.nav-toggle span{
  display:block; width:22px; height:1px; background:var(--ink);
  margin:5px auto; transition:transform .25s var(--ease);
}

@media (max-width: 820px){
  .nav__links{ display:none; }
  .nav-toggle{ display:block; }
  .nav.open .nav__links{
    display:flex; flex-direction:column;
    position:absolute; top:100%; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--hairline);
    padding:20px var(--pad-x); gap:16px;
  }
}

/* ============================================================
   BUTTONS — pill shape, metallic gold variant
   ============================================================ */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:12px;
  padding:16px 30px;
  font-size:.74rem; letter-spacing:.28em;
  text-transform:uppercase; font-weight:500;
  border:1px solid var(--ink);
  background:var(--ink); color:#fff;
  border-radius:999px;
  transition:transform .35s var(--ease),
             background .35s var(--ease),
             border-color .35s var(--ease),
             color .35s var(--ease),
             box-shadow .35s var(--ease);
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
}
.btn:hover{
  background-color:var(--gold); border-color:var(--gold); color:#fff;
}
.btn--ghost{
  background:transparent; color:var(--ink);
}
.btn--ghost:hover{
  background-color:var(--ink); color:#fff;
}

/* Flat metallic gold button — gradient + sheen sweep on hover, no depth */
.btn--gold{
  color:#fff;
  border:1px solid transparent;
  background:
    linear-gradient(135deg,
      #8a6529 0%,
      #c69a4a 18%,
      #f4dfa6 42%,
      #b8924a 58%,
      #8a6529 82%,
      #c69a4a 100%);
  background-size:200% 200%;
  background-position:0% 50%;
}
.btn--gold::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg,
    transparent 30%,
    rgba(255,255,255,.55) 50%,
    transparent 70%);
  transform:translateX(-120%);
  transition:transform .9s var(--ease);
  pointer-events:none;
  z-index:1;
}
.btn--gold > *{ position:relative; z-index:2; }
.btn--gold:hover{
  background-position:100% 50%;
  transform:none;
  box-shadow:none;
}
.btn--gold:hover::before{ transform:translateX(120%); }

.btn .arrow{ width:14px; height:1px; background:currentColor; position:relative; transition:width .25s var(--ease); }
.btn .arrow::after{
  content:""; position:absolute; right:0; top:-3px;
  width:7px; height:7px; border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.btn:hover .arrow{ width:22px; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  padding-top:clamp(64px, 9vw, 120px);
  padding-bottom:clamp(64px, 9vw, 120px);
  position:relative; overflow:hidden;
}
.hero__grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(32px, 6vw, 88px);
  align-items:center;
}

/* Staggered entry on hero copy elements */
.hero__copy > *{
  opacity:0;
  transform:translateY(24px);
  animation:heroIn 1s var(--ease) forwards;
}
.hero__copy .eyebrow   { animation-delay:.10s; margin-bottom:24px; }
.hero__copy .hero__title{ animation-delay:.25s; }
.hero__copy .hero__lede { animation-delay:.50s; }
.hero__copy .hero__ctas { animation-delay:.70s; }
@keyframes heroIn{
  to{ opacity:1; transform:none; }
}

.hero__title{
  font-style:italic;
  color:var(--ink);
}
.hero__title em{
  font-style:normal; color:var(--gold);
  position:relative; display:inline-block;
}
/* Gold underline drawing in beneath the accent word */
.hero__title em::after{
  content:"";
  position:absolute; left:0; right:0; bottom:.06em;
  height:2px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(184,146,74,.0) 5%,
    var(--gold-soft) 30%,
    var(--gold) 50%,
    var(--gold-soft) 70%,
    rgba(184,146,74,.0) 95%,
    transparent 100%);
  transform:scaleX(0); transform-origin:left center;
  animation:underlineIn 1.6s var(--ease) 1.1s forwards;
}
@keyframes underlineIn{ to{ transform:scaleX(1); } }

.hero__lede{
  font-size:clamp(1.05rem, 1.4vw, 1.18rem);
  color:var(--ink-soft);
  max-width:46ch; margin-top:24px; margin-bottom:36px;
  line-height:1.65;
}
.hero__ctas{
  display:flex; gap:16px;
  align-items:center; flex-wrap:wrap;
}

/* Google rating badge — sits inline with the primary CTA */
.hero__rating{
  display:inline-flex; align-items:center; gap:14px;
  padding:11px 22px 11px 14px;
  text-decoration:none;
  color:var(--ink);
  background:
    linear-gradient(135deg, #fdfaf2 0%, #ffffff 60%);
  border:1px solid rgba(184,146,74,.28);
  border-radius:999px;
  box-shadow:0 6px 22px -16px rgba(184,146,74,.4);
  transition:transform .35s var(--ease),
             box-shadow .35s var(--ease),
             border-color .35s var(--ease);
}
.hero__rating:hover{
  transform:translateY(-2px);
  border-color:var(--gold);
  box-shadow:0 14px 30px -16px rgba(184,146,74,.55);
}
.hero__rating__star{
  width:22px; height:22px;
  color:var(--gold);
  flex-shrink:0;
  filter:drop-shadow(0 1px 0 rgba(184,146,74,.35));
  animation: ratingStarPulse 3.6s ease-in-out infinite;
}
@keyframes ratingStarPulse{
  0%,100% { transform:scale(1);    filter:drop-shadow(0 1px 0 rgba(184,146,74,.35)); }
  50%     { transform:scale(1.08); filter:drop-shadow(0 0 6px rgba(212,178,116,.6)); }
}
.hero__rating__score{
  font-family:var(--sans);
  font-size:1.1rem; font-weight:600;
  letter-spacing:.01em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.hero__rating__divider{
  width:1px; height:26px;
  background:linear-gradient(180deg, transparent, rgba(184,146,74,.45), transparent);
}
.hero__rating__copy{
  display:flex; flex-direction:column; line-height:1.1;
}
.hero__rating__label{
  font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold);
}
.hero__rating__sub{
  font-size:.68rem; letter-spacing:.05em;
  color:var(--ink-soft);
  margin-top:3px;
}

/* Hero image with Ken Burns + entry fade, plus pointer-parallax target */
.hero__image{
  position:relative;
  aspect-ratio: 4/5;
  background:var(--beige);
  overflow:hidden;
  opacity:0;
  transform:translateY(24px);
  animation:heroIn 1.1s var(--ease) .35s forwards;
  will-change:transform;
}
.hero__image img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.08);
  animation:kenBurns 16s ease-in-out infinite alternate;
  transition:transform .4s var(--ease);
}
@keyframes kenBurns{
  0%   { transform:scale(1.06) translate(0%, 0%); }
  100% { transform:scale(1.14) translate(-1.5%, -1.5%); }
}
.hero__image::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(184,146,74,.18);
  pointer-events:none;
}

/* Decorative ornaments */
.hero__deco{
  position:absolute;
  pointer-events:none;
  z-index:1;
}
.hero__deco--ring{
  width:clamp(260px, 38vw, 460px);
  aspect-ratio:1;
  border:1px solid rgba(184,146,74,.22);
  border-radius:50%;
  top:-14%;
  right:-8%;
  animation:floatRing 14s ease-in-out infinite;
}
.hero__deco--ring::before{
  content:"";
  position:absolute; inset:14%;
  border:1px solid rgba(184,146,74,.14);
  border-radius:50%;
}
.hero__deco--dot{
  width:10px; height:10px;
  background:var(--gold);
  border-radius:50%;
  top:42%; left:48%;
  box-shadow:0 0 0 8px rgba(184,146,74,.10);
  animation:pulseDot 4.5s ease-in-out infinite;
}
.hero__deco--line{
  width:80px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  bottom:18%; left:-20px;
  animation:slideLine 6s ease-in-out infinite;
}
@keyframes floatRing{
  0%,100% { transform:translate(0,0) rotate(0deg); }
  50%     { transform:translate(-10px,14px) rotate(6deg); }
}
@keyframes pulseDot{
  0%,100% { opacity:.55; transform:scale(1);   box-shadow:0 0 0 8px  rgba(184,146,74,.10); }
  50%     { opacity:1;   transform:scale(1.15); box-shadow:0 0 0 14px rgba(184,146,74,.04); }
}
@keyframes slideLine{
  0%,100% { transform:translateX(0); opacity:.6; }
  50%     { transform:translateX(40px); opacity:1; }
}

@media (max-width: 820px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__image{ aspect-ratio: 4/3; order:-1; }
  .hero__deco--ring{ top:-6%; right:-22%; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about{
  background:var(--beige);
}
.about__inner{
  max-width:780px; margin:0 auto; text-align:center;
}
.about__eyebrow{ margin-bottom:24px; }
.about__title{ margin-bottom:24px; font-style:italic; }
.about__text{
  font-family:var(--serif);
  font-size:clamp(1.15rem, 1.6vw, 1.4rem);
  line-height:1.6;
  color:var(--ink);
  font-weight:300;
}
.about__rule{
  width:40px; height:1px; background:var(--gold);
  margin:32px auto; border:0;
}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery__header{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:48px; gap:24px; flex-wrap:wrap;
}
.gallery__title{ font-style:italic; }
.gallery__grid{
  display:grid;
  grid-template-columns:repeat(11, 1fr);
  gap:0;
  align-items:start;
  padding-bottom:120px; /* room for the offset bottom image */
  position:relative;
}
.gallery__item{
  position:relative;
  overflow:hidden;
  background:var(--beige);
  aspect-ratio: 3/4;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.22);
  transition:box-shadow .5s var(--ease);
  grid-row:1;
}
/* All three images same size (5 of 11 cols), staggered diagonally.
   Left is front (z:3), center mid (z:2), right back (z:1).
   Vertical offset via margin-top (transform is reserved for entry animation). */
.gallery__item:nth-child(1){
  grid-column: 1 / span 5;
  z-index:3;             /* left — front */
  margin-top:0;
}
.gallery__item:nth-child(2){
  grid-column: 4 / span 5;
  z-index:2;             /* center — mid */
  margin-top:50px;
}
.gallery__item:nth-child(3){
  grid-column: 7 / span 5;
  z-index:1;             /* right — back */
  margin-top:100px;
}
.gallery__item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease);
}
.gallery__item:hover{
  box-shadow:0 40px 80px -30px rgba(0,0,0,.32);
  z-index:4;
}
.gallery__item:hover img{ transform:scale(1.04); }
.gallery__item::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(184,146,74,.18);
  pointer-events:none;
}
@media (max-width: 820px){
  .gallery__grid{
    grid-template-columns:1fr;
    padding-bottom:0;
    gap:0;
  }
  .gallery__item{ transform:none !important; }
  /* Left image is the hero — show only this one on mobile, full natural height */
  .gallery__item:nth-child(1){
    grid-column:1;
    margin:0;
    aspect-ratio:auto;   /* lift the fixed crop — image shows in full */
  }
  .gallery__item:nth-child(1) img{
    height:auto;         /* natural height instead of 100% of a clipped box */
    object-fit:initial;
  }
  .gallery__item:nth-child(2){ display:none; }
  .gallery__item:nth-child(3){ display:none; }
}

/* ============================================================
   SERVICES
   ============================================================ */
.services{
  background:#fff;
}
.services__header{
  text-align:center; margin-bottom:64px;
}
.services__title{ font-style:italic; margin-bottom:18px; }
.services__intro{
  max-width:580px; margin:0 auto;
  color:var(--ink-soft);
}
.services__list{
  max-width:880px; margin:0 auto;
  border-top:1px solid var(--hairline);
  list-style:none; padding:0;
}
.services__list > li{ display:block; }
.service{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:clamp(20px, 4vw, 56px);
  padding:32px 0;
  border-bottom:1px solid var(--hairline);
  align-items:center;
  color:inherit;
  cursor:pointer;
  transition:padding .3s var(--ease);
}
.service:hover{
  padding-left:12px; padding-right:12px;
}
.service:hover .service__name{ color:var(--gold); }
.service:hover .service__arrow{
  transform:translateX(4px);
  opacity:1;
}
.service__body{ min-width:0; }
.service__name{
  font-family:var(--serif);
  font-size:clamp(1.3rem, 2vw, 1.6rem);
  color:var(--ink);
  line-height:1.2;
  margin:0 0 10px;
  display:inline-flex; align-items:center; gap:14px;
  transition:color .3s var(--ease);
}
.service__arrow{
  display:inline-block;
  width:18px; height:1px;
  background:var(--gold);
  position:relative;
  opacity:0;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.service__arrow::after{
  content:""; position:absolute; right:0; top:-3px;
  width:7px; height:7px;
  border-top:1px solid var(--gold);
  border-right:1px solid var(--gold);
  transform:rotate(45deg);
}
.service__desc{
  color:var(--ink-soft);
  margin:0;
  max-width:60ch;
  font-size:.96rem;
}
.service__variants{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column;
  align-items:stretch;
  gap:8px;
  min-width:150px;
}
.service__variant{
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:baseline;
  white-space:nowrap;
}

/* Card with per-variant links — outer div, not clickable as a whole */
.service--linked{ cursor:default; }
.service--linked .service__name{ padding-right:0; }

/* Individual variant row as a link */
.service__variant--link{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:18px;
  align-items:baseline;
  white-space:nowrap;
  text-decoration:none;
  color:inherit;
  padding:5px 10px;
  margin:0 -10px;
  border-radius:6px;
  transition:background .25s var(--ease);
  cursor:pointer;
}
.service__variant--link:hover{
  background:rgba(184,146,74,.07);
}
.service__variant--link:hover .service__duration{ color:var(--ink); }

/* Small arrow that slides in on hover */
.service__variant-arrow{
  display:inline-block;
  width:14px; height:1px;
  background:var(--gold);
  position:relative;
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
  align-self:center;
}
.service__variant-arrow::after{
  content:""; position:absolute; right:0; top:-3px;
  width:6px; height:6px;
  border-right:1px solid var(--gold);
  border-top:1px solid var(--gold);
  transform:rotate(45deg);
}
.service__variant--link:hover .service__variant-arrow{
  opacity:1;
  transform:translateX(0);
}
.service__duration{
  font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted);
  font-weight:500;
}
.service__price{
  font-family:var(--sans);
  font-size:clamp(1rem, 1.2vw, 1.1rem);
  font-weight:500;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
  color:var(--gold);
  text-align:right;
  line-height:1.2;
}
@media (max-width: 600px){
  .service{ grid-template-columns: 1fr; }
  .service__variants{
    align-items:flex-start; min-width:0;
    width:100%;
    padding-top:6px;
    border-top:1px dashed var(--hairline);
  }
  .service__variant{ width:100%; }
  /* On mobile remove the bleed margin so the arrow stays inside the card */
  .service__variant--link{
    margin:0;
    padding:6px 0;
    gap:12px;
  }
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner{
  background:#0d0d0d;
  color:#fff;
  text-align:center;
  padding-top:clamp(72px, 9vw, 120px);
  padding-bottom:clamp(72px, 9vw, 120px);
}
.cta-banner h2{ color:#fff; margin:0 0 28px; }
.cta-banner__mark{
  display:block;
  margin:0 auto;
  width:100%;
  max-width:min(336px, 70%);
  height:auto;
}
.cta-banner p{
  color:#fff;
  max-width:520px; margin:0 auto 36px;
}
.cta-banner .eyebrow{ color:#fff; margin-bottom:24px; }
.cta-banner .eyebrow::before{ background:#fff; }
/* CTA banner button uses the same flat metallic gold treatment */
.cta-banner .btn{
  color:#fff;
  border:1px solid transparent;
  background:
    linear-gradient(135deg,
      #8a6529 0%,
      #c69a4a 18%,
      #f4dfa6 42%,
      #b8924a 58%,
      #8a6529 82%,
      #c69a4a 100%);
  background-size:200% 200%;
  background-position:0% 50%;
}
.cta-banner .btn::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg,
    transparent 30%,
    rgba(255,255,255,.55) 50%,
    transparent 70%);
  transform:translateX(-120%);
  transition:transform .9s var(--ease);
  pointer-events:none;
}
.cta-banner .btn:hover{
  background-position:100% 50%;
  transform:none;
  box-shadow:none;
}
.cta-banner .btn:hover::before{ transform:translateX(120%); }

/* Team photo inside CTA banner — double gold frame on dark background */
.cta-banner__photo{
  margin: 0 auto 44px;
  max-width: 460px;
  /* double gold border: inner line, dark gap, outer line */
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 6px #0d0d0d, 0 0 0 8px var(--gold);
  overflow: hidden;
}
.cta-banner__photo img{
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   LOCATION / FOOTER
   ============================================================ */
.location{
  background:var(--beige);
}
.location__grid{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:clamp(32px, 5vw, 64px);
  align-items:stretch;
}
.location__info .eyebrow{ margin-bottom:18px; }
.location__title{ font-style:italic; margin-bottom:24px; }
.info-block{ margin-bottom:28px; }
.info-block__label{
  font-size:.7rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold);
  font-weight:500;
  margin-bottom:8px;
}
.info-block__value{
  font-family:var(--sans);
  font-size:1.02rem;
  font-weight:400;
  letter-spacing:.005em;
  color:var(--ink);
  line-height:1.55;
}
.info-block__value a{
  color:var(--ink);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease);
}
.info-block__value a:hover{ border-bottom-color:var(--gold); }
.location__ctas{
  display:flex; gap:14px; flex-wrap:wrap;
  margin-top:8px;
}
.map{
  aspect-ratio: 4/3;
  background:var(--beige-deep);
  overflow:hidden;
  position:relative;
  border:1px solid var(--hairline);
}
.map iframe{
  width:100%; height:100%; border:0;
  filter:grayscale(.4) contrast(.95);
}
@media (max-width: 820px){
  .location__grid{ grid-template-columns:1fr; }
}

.footer{
  background:#fff;
  border-top:1px solid var(--hairline);
  padding:36px 0 28px;
  font-size:.78rem;
  color:var(--muted);
}
.footer__inner{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
}
.footer a{ color:var(--muted); }
.footer a:hover{ color:var(--gold); }

/* Back-to-top with gold arrow icon */
.footer__top{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--muted);
  transition:color .25s var(--ease);
}
.footer__top:hover{ color:var(--ink); }
.footer__top__arrow{
  width:16px; height:16px;
  color:var(--gold);
  stroke:currentColor;
  fill:none;
  transition:transform .35s var(--ease);
}
.footer__top:hover .footer__top__arrow{
  transform:translateY(-4px);
}

/* ============================================================
   SERVICES — CATEGORY SWITCHER (pill-style nav above the list)
   ============================================================ */
.services__cats-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  margin: 0 0 48px;
}

/* Hint text above the pills */
.services__filter-hint{
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
  text-align:center;
}

/* Standalone pills — no outer border, each pill is independent */
.services__cats{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  background:transparent;
  border:none;
  padding:0;
  border-radius:0;
}
.services__cats button{
  background:transparent;
  border:1px solid var(--hairline);
  font-size:.7rem; letter-spacing:.2em; font-weight:500;
  text-transform:uppercase; color:var(--ink-soft);
  padding:10px 20px; border-radius:999px; cursor:pointer;
  transition:color .3s var(--ease),
             border-color .3s var(--ease),
             background .3s var(--ease),
             transform .35s var(--ease),
             box-shadow .35s var(--ease);
  transform:translateY(0);
}
.services__cats button:hover{
  color:var(--ink);
  border-color:var(--gold-soft);
  transform:translateY(-2px);
  box-shadow:0 6px 16px -6px rgba(184,146,74,.22);
}
.services__cats button[aria-current="true"]{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 20px -8px rgba(26,26,26,.32);
}

/* Mobile category dropdown — replaces pills below 640px */
.services__cats-select{ display:none; }

@media (max-width: 640px){
  .services__cats-wrap .services__cats{ display:none; }
  .services__cats-select{
    display:block;
    width:100%;
    max-width:480px;
    padding:13px 44px 13px 22px;
    font-family:var(--sans);
    font-size:.76rem;
    letter-spacing:.16em;
    font-weight:500;
    text-transform:uppercase;
    color:var(--ink);
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8579' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center;
    border:1px solid var(--hairline);
    border-radius:999px;
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
    transition:border-color .25s var(--ease);
  }
  .services__cats-select:focus{
    border-color:var(--gold);
    outline:none;
  }
  .services__cats-select:hover{
    border-color:var(--gold-soft);
  }
}

/* ============================================================
   FOOTER SEPARATOR (between address and cookie settings link)
   ============================================================ */
.footer__copy{ line-height:1.7; }
.footer__sep{ color:var(--hairline); margin:0 6px; }

/* ============================================================
   COOKIE CONSENT BANNER
   ============================================================ */
.cookie{
  position:fixed;
  left:24px; right:24px; bottom:24px;
  z-index:90;
  display:flex; justify-content:center;
  pointer-events:none;
}
.cookie__card{
  pointer-events:auto;
  background:#fff;
  border-top:3px solid var(--gold);
  box-shadow:0 20px 60px -20px rgba(0,0,0,.35);
  padding:22px 26px;
  max-width:680px; width:100%;
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  transform:translateY(150%);
  transition:transform .55s var(--ease);
}
.cookie.is-visible .cookie__card{ transform:translateY(0); }
.cookie__text{
  color:var(--ink-soft);
  margin:0;
  font-size:.86rem; line-height:1.55;
}
.cookie__actions{
  display:flex; gap:10px;
  flex-shrink:0;
}
.cookie__btn{
  padding:12px 22px;
  font-size:.66rem;
}
@media (max-width: 640px){
  .cookie{ left:14px; right:14px; bottom:14px; }
  .cookie__card{
    grid-template-columns:1fr;
    padding:18px 20px;
    gap:16px;
  }
  .cookie__actions{ justify-content:flex-end; }
}

/* ============================================================
   CONTACT MODAL (intercepts tel: and mailto: clicks)
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease);
}
.modal.is-open{ opacity:1; pointer-events:auto; }
.modal__overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.modal__card{
  position:relative;
  background:#fff;
  padding:52px 40px 36px;
  max-width:460px; width:100%;
  text-align:center;
  transform:translateY(20px) scale(.98);
  transition:transform .35s var(--ease);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.4);
  border-top:3px solid var(--gold);
}
.modal.is-open .modal__card{ transform:none; }
.modal__close{
  position:absolute; top:12px; right:12px;
  width:34px; height:34px;
  background:transparent; border:0;
  font-size:1.5rem; line-height:1;
  color:var(--muted); cursor:pointer;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s var(--ease);
}
.modal__close:hover{ color:var(--ink); background:var(--beige); }
.modal__title{
  font-family:var(--serif);
  font-size:clamp(1.5rem, 2.4vw, 1.85rem);
  font-style:italic;
  margin:0 0 18px;
  color:var(--ink);
}
.modal__text{
  color:var(--ink-soft);
  margin:0 0 32px;
  font-size:.95rem; line-height:1.6;
}
.modal__actions{
  display:flex; gap:12px;
  justify-content:center; flex-wrap:wrap;
}
.modal__actions .btn{ padding:14px 24px; }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
  html{ scroll-behavior:auto; }
}