/* ---------------------------------------------------
   N TANZ — Reformer Pilates Studio
   Brand system per N-TANZ-brand-sheet.pdf
--------------------------------------------------- */
:root{
  --ink: #0D0D0D;        /* Stage Black — primary, backgrounds/containers */
  --coral: #E79A8A;      /* Coral — accent: mark, buttons, active states (max 10% of layout) */
  --chalk: #FAF7F5;      /* Chalk — base: page background, negative space */
  --blush: #F5D3CA;      /* Blush — support: tints, panels, hover fills */
  --clay: #A85E4E;       /* Clay — coral-for-text: links/small type on light bg */

  --line: rgba(13, 13, 13, 0.14);
  --line-strong: rgba(13, 13, 13, 0.26);
  --line-on-dark: rgba(250, 247, 245, 0.16);

  --font-display: "Jost", sans-serif;
  --font-body: "Inter", sans-serif;

  --wrap: 1180px;
  --gutter: clamp(24px, 6vw, 64px);

  /* Reformer-spring line motif: a coiled wave standing in for photography,
     echoing the studio's own "opruga po opruga" (spring by spring) language.
     Light version for dark placeholders, dark version for the light one. */
  --spring-line-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 60'%3E%3Cpath d='M0 20 Q10 4 20 20 T40 20 T60 20 T80 20' stroke='rgba(250,247,245,0.16)' stroke-width='1.5' fill='none'/%3E%3Cpath d='M0 46 Q10 30 20 46 T40 46 T60 46 T80 46' stroke='rgba(250,247,245,0.16)' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  --spring-line-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 60'%3E%3Cpath d='M0 20 Q10 4 20 20 T40 20 T60 20 T80 20' stroke='rgba(13,13,13,0.10)' stroke-width='1.5' fill='none'/%3E%3Cpath d='M0 46 Q10 30 20 46 T40 46 T60 46 T80 46' stroke='rgba(13,13,13,0.10)' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

:focus-visible{
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}

.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section[id]{
  scroll-margin-top: 96px;
}

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}

p{ margin: 0 0 1em; max-width: 68ch; }
p:last-child{ margin-bottom: 0; }

/* ---------------------------------------------------
   Scroll progress rail
--------------------------------------------------- */
.rail-progress{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: transparent;
  z-index: 100;
}
.rail-progress span{
  display: block;
  height: 100%;
  width: 0%;
  background: var(--coral);
  transition: width 0.08s linear;
}

/* ---------------------------------------------------
   Eyebrows (brand role: Jost SemiBold, uppercase, tracking +160)
--------------------------------------------------- */
.eyebrow{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin: 0 0 16px;
}
.eyebrow-light{ color: var(--clay); }   /* coral fails AA on chalk under 24pt — use clay */
.eyebrow-dark{ color: var(--coral); }   /* coral passes AA on stage black */

/* ---------------------------------------------------
   Buttons
--------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 15px 30px;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.btn-primary{
  background: var(--coral);
  color: var(--ink);
}
.btn-primary:hover{
  background: var(--blush);
}
.btn-ghost{
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover{
  border-color: var(--ink);
  background: var(--coral);
}
.btn-sm{ padding: 10px 20px; font-size: 0.85rem; }
.btn-lg{ padding: 17px 36px; font-size: 1.02rem; }
.btn:active{ transform: scale(0.98); }

/* ---------------------------------------------------
   Header
--------------------------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.site-header.is-scrolled{
  background: rgba(250, 247, 245, 0.9);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
}
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-mark img{ display: block; }
.brand-word{
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.95rem;
  color: var(--chalk);
  transition: color 0.3s ease;
}
.site-header.is-scrolled .brand-word{
  color: var(--ink);
}
.main-nav{
  display: flex;
  gap: clamp(18px, 2.2vw, 30px);
}
.main-nav a{
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--chalk);
  position: relative;
  padding: 4px 0;
  transition: color 0.3s ease;
}
.site-header.is-scrolled .main-nav a{
  color: var(--ink);
}
.main-nav a::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0%;
  height: 1px;
  background: var(--clay);
  transition: width 0.2s ease;
}
.main-nav a:hover::after{ width: 100%; }

.header-actions{
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span{
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--chalk);
  transition: background 0.3s ease;
}
.site-header.is-scrolled .nav-toggle span{
  background: var(--ink);
}

/* ---------------------------------------------------
   Hero — full-bleed photo placeholder + scrim + frame
--------------------------------------------------- */
.hero{
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: -84px; /* pull up under sticky header */
  padding-top: 84px;
}
.hero-photo{
  position: absolute;
  inset: 0;
  background: var(--ink);
}
.hero-photo .fade-slide-a{ object-position: center 30%; }
.hero-photo .fade-slide-b{ object-position: center 50%; }
.hero-photo .fade-slide-c{ object-position: center 35%; }
.hero-photo .fade-slide{ animation: fade-slideshow-3 10s ease-in-out infinite; }
.hero-photo .fade-slide-a{ animation-delay: 0s; }
.hero-photo .fade-slide-b{ animation-delay: 3.33s; }
.hero-photo .fade-slide-c{ animation-delay: 6.67s; }
@keyframes fade-slideshow-3{
  0%, 20% { opacity: 1; }
  40%, 80% { opacity: 0; }
  100% { opacity: 1; }
}
.hero-photo::after{
  /* scrim so text stays legible */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(13,13,13,0.55) 0%, rgba(13,13,13,0.28) 38%, transparent 60%),
    linear-gradient(180deg, rgba(13,13,13,0.18) 0%, rgba(13,13,13,0.58) 65%, rgba(13,13,13,0.86) 100%);
}
.frame-corner{
  position: absolute;
  width: 34px;
  height: 34px;
  z-index: 1;
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.frame-corner.is-visible{
  opacity: 0.9;
  transform: scale(1);
}
.frame-tl{ top: 26px; left: 26px; border-top: 3px solid var(--coral); border-left: 3px solid var(--coral); border-top-left-radius: 10px; transition-delay: 0.15s; }
.frame-br{ bottom: 26px; right: 26px; border-bottom: 3px solid var(--coral); border-right: 3px solid var(--coral); border-bottom-right-radius: 10px; transition-delay: 0.35s; }
.hero-photo .frame-tl{ top: 108px; left: var(--gutter); }
.hero-photo .frame-br{ bottom: 28px; right: var(--gutter); }

.hero-inner{
  position: relative;
  z-index: 1;
  max-width: 640px;
}
.hero-title{
  font-size: clamp(2.6rem, 5.6vw, 4.2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--chalk);
  max-width: 14ch;
}
.hero-sub{
  margin-top: 22px;
  font-size: 1.1rem;
  max-width: 42ch;
  color: rgba(250,247,245,0.82);
}
.hero-inner .btn{ margin-top: 30px; }

/* ---------------------------------------------------
   Section shell
--------------------------------------------------- */
.section{
  padding: clamp(64px, 10vw, 128px) 0;
}
.section-tint{
  background: var(--blush);
}
.section-grid{
  position: relative;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.section-heading h2, .section-heading h3{
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  max-width: 14ch;
}
#o-nama > .wrap:first-child{
  margin-bottom: 28px;
}
.about-block + .about-block{
  margin-top: clamp(56px, 9vw, 96px);
}
.block-kicker{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--clay);
  margin: 0 0 10px;
}

.reviews-strip{
  margin-top: clamp(56px, 9vw, 96px);
}
.reviews-card{
  background: var(--blush);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 44px);
}
.reviews-rating{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 24px;
}
.reviews-stars{
  display: inline-flex;
  gap: 2px;
}
.reviews-stars svg{ fill: var(--clay); }
.reviews-score{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}
.reviews-count{
  font-weight: 600;
  color: var(--clay);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
}
.reviews-count:hover{ border-color: var(--clay); }
.reviews-quotes{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
.reviews-quote{
  margin: 0;
}
.reviews-quote p{
  font-size: 0.98rem;
  color: rgba(13,13,13,0.82);
  margin: 0 0 10px;
}
.reviews-quote footer{
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 500;
  color: rgba(13,13,13,0.6);
}
.section-lede{
  margin-top: 18px;
  font-size: 1.02rem;
  color: rgba(13,13,13,0.72);
  max-width: 34ch;
}
.section-body{
  font-size: 1.02rem;
  max-width: 62ch;
}
.section-body p{ max-width: 58ch; }
.section-body h4{
  font-size: 1.12rem;
  margin: 30px 0 12px;
}
.equipment-block{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  align-items: start;
  margin: 30px 0 0;
}
.equipment-block img{
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 16px;
}
.equipment-block h4{ margin-top: 0; }

/* Wide screens: pull the equipment photo out of the text column and
   sink it into the quiet space under the heading, roughly level with
   the "Originalna Merrithew® oprema" copy it illustrates. */
@media (min-width: 901px){
  .equipment-block{
    grid-template-columns: 1fr;
  }
  .equipment-block img{
    position: absolute;
    left: 0;
    top: 392px;
    width: calc(85% - clamp(16px, 3vw, 40px));
    max-width: 260px;
    aspect-ratio: 4 / 3;
  }
}
.pristup-tagline{
  margin-top: 26px;
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--clay);
  max-width: 42ch;
}

/* fact strip + contact list (used in Pristup / O nama / Kontakt) */
.fact-strip{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 0 0 28px;
}
.fact-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.86rem;
  padding: 9px 16px;
  border-radius: 100px;
  background: var(--blush);
  color: var(--ink);
}
a.fact-item{
  transition: background 0.2s ease;
}
a.fact-item:hover{
  background: var(--coral);
}
.contact-list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 16px;
}
.contact-list a{
  font-weight: 600;
  color: var(--clay);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
}
.contact-list a:hover{ border-color: var(--clay); }
.contact-list-dark{ margin-top: 30px; justify-content: center; }
.contact-list-dark a{
  color: var(--coral);
  border-bottom: 1px solid var(--line-on-dark);
}

.text-link{
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--clay);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
}
.text-link:hover{ border-color: var(--clay); }

/* ---------------------------------------------------
   O nama — image + text, side by side
--------------------------------------------------- */
.about-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.about-photo{
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(140deg, #d8cec8 0%, #b7aaa2 55%, #8d7d74 100%);
  overflow: hidden;
  border-radius: 28px;
}
.about-photo::before{
  /* one spring, turned upright — a single, precise focus */
  content: "";
  position: absolute;
  inset: -20%;
  background-image: var(--spring-line-dark);
  background-size: 340px 255px;
  transform: rotate(90deg);
}
.fade-slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: fade-slideshow 12s ease-in-out infinite;
}
.fade-slide-a{ object-position: center 30%; animation-delay: 0s; }
.fade-slide-b{ object-position: center 22%; animation-delay: 6s; }
@keyframes fade-slideshow{
  0%, 42% { opacity: 1; }
  50%, 92% { opacity: 0; }
  100% { opacity: 1; }
}
.about-copy h3{ max-width: none; font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.on-dark{ color: var(--chalk); }
.on-dark-body{ color: rgba(250,247,245,0.78); max-width: 46ch; }
.about-copy p{ color: rgba(13,13,13,0.82); max-width: 46ch; }

/* ---------------------------------------------------
   Događaji — three event cards, each media type distinct
--------------------------------------------------- */
.events-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 40px);
}
.event-media{
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.event-media-tag{
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(250,247,245,0.7);
}
.event-media-photo{
  background: linear-gradient(140deg, #2a2a2a 0%, #0f0f0f 60%, #000 100%);
}
.event-media-photo::before{
  content: "";
  position: absolute;
  inset: -20%;
  opacity: 0.5;
  background-image: var(--spring-line-light);
  background-size: 130px 97px;
}
.event-media-photo img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}
.event-media-video{
  background: var(--ink);
}
.event-media-video > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.event-play-trigger{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 0;
  padding: 0;
  background: linear-gradient(180deg, rgba(13,13,13,0.15) 0%, rgba(13,13,13,0.55) 100%);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.event-media-video video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.event-play{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(250,247,245,0.5);
  position: relative;
}
.event-play::before{
  content: "";
  position: absolute;
  top: 50%; left: 56%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent rgba(250,247,245,0.85);
}
.event-media-press{
  background: var(--blush);
}
.event-media-press img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.event-media-press:hover img{ transform: scale(1.04); }
.event-media-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(180deg, rgba(13,13,13,0.05) 35%, rgba(13,13,13,0.6) 100%);
}
.event-media-overlay .event-media-tag{ color: rgba(250,247,245,0.92); }
.event-media-overlay .event-link-icon{
  background: rgba(13,13,13,0.35);
  border-color: rgba(250,247,245,0.6);
}
.event-media-overlay .event-link-icon::before{ border-color: var(--coral); }
.event-link-icon{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(13,13,13,0.3);
  position: relative;
  transition: border-color 0.2s ease;
}
.event-link-icon::before{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 12px;
  transform: translate(-50%, -50%);
  border-top: 1.5px solid var(--clay);
  border-right: 1.5px solid var(--clay);
  transform: translate(-50%, -50%) rotate(45deg);
}
.event-kicker{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.86rem;
  color: var(--clay);
  margin: 0 0 6px;
}
.event-card h3{
  font-size: 1.15rem;
  margin: 0 0 8px;
}
.event-card p:not(.event-kicker){
  font-size: 0.94rem;
  color: rgba(13,13,13,0.72);
}

/* ---------------------------------------------------
   Galerija
--------------------------------------------------- */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.6vw, 16px);
}
.gallery-grid img{
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
}

/* ---------------------------------------------------
   Price list (Cenovnik)
--------------------------------------------------- */
.specijal-card{
  background: var(--coral);
  border-radius: 24px;
  padding: 28px 28px 24px;
  margin: 0 0 40px;
}
.specijal-label{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  margin: 0 0 14px;
}
.specijal-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(13,13,13,0.2);
}
.specijal-row .price-name{
  font-weight: 600;
}
.specijal-row .price-value{
  color: var(--ink);
  font-style: normal;
  font-weight: 600;
}
.specijal-note{
  margin: 12px 0 0;
  font-size: 0.88rem;
  color: rgba(13,13,13,0.72);
}

.price-group-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--clay);
  margin: 0 0 6px;
}
.price-group-title:not(:first-of-type){
  margin-top: 8px;
}
.price-list{
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  border-top: 1px solid var(--line-strong);
}
.price-list li{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 10px;
  transition: background 0.15s ease;
}
.price-list li:hover{
  background: rgba(250,247,245,0.5);
}
.price-name{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
}
.price-value{
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* ---------------------------------------------------
   Schedule tables (Termini)
--------------------------------------------------- */
.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;
}
.schedule-title{
  font-size: 1.1rem;
  margin: 36px 0 14px;
}
.schedule-title:first-of-type{ margin-top: 28px; }
.schedule-table-wrap{
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.schedule-table{
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display);
  font-size: 0.86rem;
}
.schedule-table th, .schedule-table td{
  padding: 10px 8px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.schedule-table tbody tr:last-child th, .schedule-table tbody tr:last-child td{ border-bottom: none; }
.schedule-table thead th{
  font-weight: 600;
  font-size: 0.76rem;
  color: rgba(13,13,13,0.6);
  background: var(--blush);
}
.schedule-table th[scope="row"]{
  text-align: left;
  font-weight: 500;
  color: rgba(13,13,13,0.85);
  background: rgba(250,247,245,0.6);
}
.schedule-table td.on::after{
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
}
.schedule-table-individual td.on::after{
  background: var(--clay);
}
.schedule-note{
  margin-top: 12px;
  font-size: 0.88rem;
  color: rgba(13,13,13,0.72);
}

/* ---------------------------------------------------
   CTA band
--------------------------------------------------- */
.cta-band{
  background: var(--ink);
  padding: clamp(72px, 12vw, 140px) 0;
  text-align: center;
}
.cta-band h2{
  font-size: clamp(2rem, 4vw, 3rem);
  max-width: 16ch;
  margin: 0 auto;
}
.cta-band p{
  margin: 18px auto 0;
  font-size: 1.05rem;
}
.cta-band .btn{
  margin-top: 34px;
}
.map-address{
  display: inline-block;
  margin-top: 30px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(250,247,245,0.78);
  border-bottom: 1px solid var(--line-on-dark);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.map-address:hover{
  color: var(--coral);
  border-color: var(--coral);
}
.map-embed{
  margin: 16px auto 0;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--line-on-dark);
}
.map-embed iframe{ display: block; }

/* ---------------------------------------------------
   Footer
--------------------------------------------------- */
.site-footer{
  background: var(--ink);
  color: var(--chalk);
  padding-top: 56px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line-on-dark);
}
.footer-brand{
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-brand .brand-word{
  font-size: 0.9rem;
  margin: 0;
}
.footer-tagline{
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: rgba(250,247,245,0.6);
}
.footer-nav, .footer-contact{
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.94rem;
}
.footer-nav a:hover, .footer-contact a:hover{
  color: var(--coral);
}
.footer-bottom{
  padding: 22px 0 28px;
}
.footer-bottom p{
  margin: 0;
  font-size: 0.8rem;
  color: rgba(250,247,245,0.5);
}

/* ---------------------------------------------------
   Responsive
--------------------------------------------------- */
@media (max-width: 900px){
  .section-grid{
    grid-template-columns: 1fr;
  }
  .about-grid{
    grid-template-columns: 1fr;
  }
  .about-photo{
    aspect-ratio: 16/10;
  }
  .events-grid{
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .reviews-quotes{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .equipment-block{
    grid-template-columns: 1fr;
  }
  .equipment-block img{
    aspect-ratio: 16 / 10;
    max-width: 280px;
  }
  .gallery-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 880px){
  .main-nav{
    position: fixed;
    top: 76px;
    left: 12px; right: 12px;
    background: var(--chalk);
    flex-direction: column;
    gap: 0;
    padding: 8px var(--gutter) 24px;
    border-radius: 20px;
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .main-nav.is-open{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    box-shadow: 0 16px 32px rgba(13, 13, 13, 0.12);
  }
  .main-nav a{
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink) !important;
  }
  .nav-toggle{ display: flex; }
  .price-list li{
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

@media (max-width: 380px){
  .header-actions{ gap: 8px; }
  .btn-sm{ padding: 8px 14px; font-size: 0.78rem; }
  .brand-word{ font-size: 0.82rem; }
}