/* Hitarth Event — site styles
   Layout + components. Design-system components from the UI reference
   (Button, Tag, Badge, SectionHeader, ServiceCard, EventCard, TestimonialCard,
   form fields) are expressed here as plain CSS classes. */

/* ==========================================================
   1. Layout primitives
   ========================================================== */
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}
section{padding:var(--space-section) 0}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-gold);display:block}

.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}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--accent-primary);color:#fff;padding:12px 20px;border-radius:0 0 var(--radius-md) 0}
.skip-link:focus{left:0;color:#fff}

.dark-section{background:var(--surface-inverse);color:var(--text-on-dark)}
.dark-section .eyebrow{color:var(--accent-gold)}
.dark-section h2,.dark-section h3{color:var(--text-on-dark)}
.dark-section p{color:var(--text-on-dark-secondary)}

.grain-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(36,23,20,.78),rgba(36,23,20,.15) 55%,rgba(36,23,20,.35));pointer-events:none}

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

/* ==========================================================
   2. Header / navigation
   ========================================================== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:200;transition:background var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),padding var(--duration-base) var(--ease-standard)}
.site-header.at-top{background:transparent;border-bottom:1px solid transparent;padding:26px 0}
.site-header.scrolled{background:rgba(255,249,242,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);padding:14px 0}
.site-header .bar{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad);display:flex;align-items:center;justify-content:space-between;gap:32px}
.wordmark{font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.site-header.at-top .wordmark,.site-header.at-top .nav-link{color:#fff}
.site-header.scrolled .wordmark,.site-header.scrolled .nav-link{color:var(--text-primary)}
.nav-links{display:flex;align-items:center;gap:36px;list-style:none;margin:0;padding:0}
.nav-link{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;position:relative;padding-bottom:4px}
.nav-link::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent-gold);transition:width var(--duration-base) var(--ease-out)}
.nav-link:hover::after,.nav-link.current::after{width:100%}
.nav-right{display:flex;align-items:center;gap:20px}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:300}
.hamburger span{width:24px;height:2px;background:currentColor;display:block;transition:all var(--duration-fast) var(--ease-standard)}
.site-header.at-top .hamburger{color:#fff}
.site-header.scrolled .hamburger{color:var(--text-primary)}

/* Pages without a full-bleed hero start below the header instead of under it */
.has-solid-header{padding-top:96px}
.has-solid-header .site-header.at-top{background:rgba(255,249,242,.96);border-bottom:1px solid var(--border-subtle);padding:18px 0}
.has-solid-header .site-header.at-top .wordmark,
.has-solid-header .site-header.at-top .nav-link{color:var(--text-primary)}
.has-solid-header .site-header.at-top .hamburger{color:var(--text-primary)}

.mobile-menu{position:fixed;inset:0;background:var(--color-footer);z-index:250;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;overflow:hidden;transform:translateY(-100%);transition:transform var(--duration-slow) var(--ease-out)}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{color:var(--color-ivory);font-family:var(--font-display);font-size:28px}
.mobile-menu .mm-close{position:absolute;top:26px;right:28px;background:none;border:none;color:#fff;font-size:28px;cursor:pointer;line-height:1}
.mobile-menu .mm-cta{font-family:var(--font-body);font-size:13px;letter-spacing:.14em;text-transform:uppercase;background:var(--accent-gold);color:var(--color-footer);padding:14px 30px;border-radius:var(--radius-pill)}
.mobile-menu .mm-quick{display:flex;gap:20px;margin-top:16px}
.mobile-menu .mm-quick a{font-family:var(--font-body);font-size:13px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--border-on-dark);padding:12px 22px;border-radius:var(--radius-pill)}

/* Nav gets tighter before it collapses, so it never wraps. */
@media (max-width:1180px){
  .site-header .bar{gap:20px}
  .nav-links{gap:24px}
  .nav-link{font-size:12px}
  .site-header .nav-right .btn{padding:12px 22px;white-space:nowrap}
}
@media (max-width:1024px){
  .nav-links,.site-header .nav-right .btn{display:none}
  .hamburger{display:flex}
}

/* ==========================================================
   3. Buttons, tags, badges, section headers
   ========================================================== */
.btn{
  font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 30px;
  transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard);
}
.btn:hover{transform:translateY(-1px)}
.btn-sm{font-size:12px;padding:10px 20px}
.btn-lg{padding:18px 40px}
.btn-block{width:100%}
.btn-primary{background:var(--accent-primary);color:var(--color-ivory)}
.btn-primary:hover{background:var(--accent-primary-hover);color:var(--color-ivory)}
.btn-secondary{background:transparent;color:var(--color-ivory);border-color:rgba(255,249,242,.5)}
.btn-secondary:hover{background:rgba(255,249,242,.12);color:var(--color-ivory);border-color:var(--color-ivory)}
.btn-outline{background:transparent;color:var(--accent-primary);border-color:var(--accent-primary)}
.btn-outline:hover{background:var(--accent-primary);color:var(--color-ivory)}
.btn-gold{background:var(--accent-gold);color:var(--color-footer)}
.btn-gold:hover{background:var(--color-gold-light);color:var(--color-footer)}
.btn-ghost{background:transparent;color:var(--text-primary)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

.tag{
  font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 18px;border-radius:var(--radius-pill);border:1px solid var(--border-subtle);
  background:transparent;color:var(--text-secondary);cursor:pointer;
  transition:all var(--duration-fast) var(--ease-standard);
}
.tag:hover{border-color:var(--accent-primary);color:var(--accent-primary)}
.tag.active{border-color:var(--accent-primary);background:var(--accent-primary);color:#fff}
.dark-section .tag{border-color:var(--border-on-dark);color:var(--text-on-dark-secondary)}
.dark-section .tag:hover{border-color:var(--accent-gold);color:var(--accent-gold)}
.dark-section .tag.active{background:var(--accent-gold);border-color:var(--accent-gold);color:var(--color-footer)}
.tag-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:44px 0 36px}

.badge{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;border-radius:var(--radius-pill);display:inline-block}
.badge-burgundy{background:rgba(122,31,43,.08);color:var(--accent-primary)}
.badge-gold{background:rgba(201,154,74,.14);color:#8a6420}
.badge-neutral{background:var(--surface-sunken);color:var(--text-secondary)}

.section-header{text-align:center;max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.section-header.align-left{text-align:left;margin:0}
.section-header h2{font-family:var(--font-display);font-size:var(--text-h1);color:var(--text-primary);line-height:1.1}
.section-header p{font-size:var(--text-lead);color:var(--text-secondary);line-height:1.6;margin:0 auto}
.section-header.align-left p{margin:0}

/* ==========================================================
   4. Cards
   ========================================================== */
.service-card{
  background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);height:100%;
  transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out);
}
a.service-card{display:block;color:inherit}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.service-card .sc-media{aspect-ratio:4/3;background:var(--surface-sunken);overflow:hidden}
.service-card .sc-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-out)}
.service-card:hover .sc-media img{transform:scale(1.05)}
.service-card .sc-body{padding:24px;display:flex;flex-direction:column;gap:10px}
.service-card h3{font-family:var(--font-display);font-size:22px;color:var(--text-primary)}
.service-card p{font-size:14px;color:var(--text-secondary);line-height:1.6}
.service-card .sc-link{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-primary)}

.event-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;display:block}
.event-card .ec-media{position:absolute;inset:0;background:var(--surface-sunken)}
.event-card .ec-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-out)}
.event-card:hover .ec-media img{transform:scale(1.06)}
.event-card .ec-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(36,23,20,.85),rgba(36,23,20,.1) 60%);pointer-events:none}
.event-card .ec-body{position:absolute;left:0;right:0;bottom:0;padding:24px;color:#FFF9F2;font-family:var(--font-body)}
.event-card .ec-cat{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-gold)}
.event-card h3{font-family:var(--font-display);font-size:24px;margin:8px 0 4px;color:#FFF9F2}
.event-card .ec-loc{font-size:13px;opacity:.85}

.testimonial-card{
  background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:32px;display:flex;flex-direction:column;gap:20px;height:100%;
}
.testimonial-card .tc-quote{font-family:var(--font-display);font-style:italic;font-size:20px;color:var(--text-primary);line-height:1.5;margin:0}
.testimonial-card .tc-name{font-weight:600;color:var(--text-primary)}
.testimonial-card .tc-meta{font-size:13px;color:var(--text-secondary)}
.stars{display:flex;gap:4px;margin-bottom:12px}

/* ==========================================================
   5. Form fields
   ========================================================== */
.field{display:flex;flex-direction:column;gap:8px;font-family:var(--font-body)}
.field > span{font-size:13px;font-weight:600;color:var(--text-primary)}
.field .req{color:var(--accent-primary)}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:15px;color:var(--text-primary);background:var(--color-white);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:14px 16px;width:100%;
  transition:border-color var(--duration-fast) var(--ease-standard);outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent-primary)}
.field textarea{resize:vertical}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--color-danger)}
/* Two classes so it beats the `.field > span` label rule above. */
.field .field-error{font-size:12px;font-weight:400;color:var(--color-danger)}

/* ==========================================================
   6. Motion
   ========================================================== */
.fade-up{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.fade-up.in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.fade-up{opacity:1;transform:none;transition:none}}
.no-js .fade-up{opacity:1;transform:none}

/* ==========================================================
   7. WhatsApp float + lightbox
   ========================================================== */
.wa-float{position:fixed;right:24px;bottom:24px;z-index:180;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);transition:transform var(--duration-fast) var(--ease-standard)}
.wa-float:hover{transform:scale(1.06)}

.lightbox{position:fixed;inset:0;background:rgba(20,12,10,.94);z-index:400;display:none;align-items:center;justify-content:center}
.lightbox.open{display:flex}
.lightbox img,.lightbox video{max-width:86vw;max-height:80vh;object-fit:contain}
.lightbox button{position:absolute;background:none;border:none;color:#fff;cursor:pointer;font-size:32px;line-height:1;padding:12px}
.lightbox .lb-close{top:24px;right:32px}
.lightbox .lb-prev{left:24px;top:50%;transform:translateY(-50%)}
.lightbox .lb-next{right:24px;top:50%;transform:translateY(-50%)}
.lightbox .lb-caption{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:rgba(255,249,242,.75);font-size:13px;letter-spacing:.1em;text-transform:uppercase}

/* ==========================================================
   8. Footer
   ========================================================== */
.site-footer{background:var(--surface-inverse);color:var(--text-on-dark);padding:var(--space-9) 0 var(--space-6)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:48px}
.footer-brand{font-family:var(--font-display);font-size:24px;margin-bottom:14px}
.footer-about{font-size:14px;color:var(--text-on-dark-secondary);line-height:1.7;max-width:320px}
.footer-social{display:flex;gap:14px;margin-top:20px;flex-wrap:wrap}
.footer-social a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-on-dark-secondary);border:1px solid var(--border-on-dark);padding:8px 14px;border-radius:var(--radius-pill)}
.footer-social a:hover{color:var(--accent-gold);border-color:var(--accent-gold)}
.footer-title{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-gold);margin-bottom:16px}
.footer-col-links{display:flex;flex-direction:column;gap:12px}
.footer-col-links a,.footer-col-links span{color:var(--text-on-dark-secondary);font-size:14px}
.footer-col-links a:hover{color:var(--accent-gold)}
.footer-bottom{border-top:1px solid var(--border-on-dark);margin-top:48px;padding-top:24px;font-size:13px;color:var(--text-on-dark-secondary);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-bottom a{color:var(--text-on-dark-secondary)}
.footer-bottom a:hover{color:var(--accent-gold)}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ==========================================================
   9. Home — hero
   ========================================================== */
.hero{position:relative;height:100svh;min-height:640px;display:flex;align-items:flex-end;color:#fff;overflow:hidden;padding:0}
.hero .hero-media{position:absolute;inset:0}
.hero .hero-media img,.hero .hero-media video{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 8s var(--ease-out)}
.hero.animin .hero-media img,.hero.animin .hero-media video{transform:scale(1)}
.hero-content{position:relative;z-index:2;padding-bottom:clamp(60px,9vw,110px)}
.hero-content .eyebrow{color:var(--color-gold-light)}
.hero-content h1{font-family:var(--font-display);font-size:var(--text-hero);line-height:var(--leading-tight);margin:18px 0 20px;max-width:820px;color:#fff;font-weight:800}
.hero-content p{font-size:var(--text-lead);max-width:520px;color:rgba(255,249,242,.85);margin:0 0 36px;line-height:1.6}
.hero-actions{display:flex;gap:18px;flex-wrap:wrap}
.hero-scroll{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:2;color:rgba(255,249,242,.8);font-size:11px;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px}
.hero-scroll .line{width:1px;height:36px;background:rgba(255,249,242,.5);overflow:hidden}
.hero-scroll .line::after{content:'';display:block;width:100%;height:50%;background:var(--color-gold);animation:scrollLine 2.2s ease-in-out infinite}
@keyframes scrollLine{0%{transform:translateY(-100%)}100%{transform:translateY(200%)}}

/* ---------- Home — about ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);align-items:center}
.about-media{aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-sunken)}
.about-media img{width:100%;height:100%;object-fit:cover}
.about-copy h2{font-family:var(--font-display);font-size:var(--text-h1);line-height:1.15;margin:14px 0 22px}
.about-copy p{font-size:var(--text-body);color:var(--text-secondary);line-height:var(--leading-relaxed);margin:0 0 24px}
.about-stats{display:flex;gap:40px;margin:0 0 28px;flex-wrap:wrap}
.about-stats div{display:flex;flex-direction:column}
.about-stats strong{font-family:var(--font-display);font-size:34px;color:var(--accent-primary);line-height:1}
.about-stats span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);margin-top:6px}

/* ---------- Home — grids ---------- */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px}
.events-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.videos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.center-cta{text-align:center;margin-top:48px}

.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:14px}
.gallery-grid .g-item{border-radius:var(--radius-md);overflow:hidden;cursor:pointer;position:relative;padding:0;border:none;background:var(--surface-sunken);display:block}
.gallery-grid .g-item img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-out)}
.gallery-grid .g-item:hover img{transform:scale(1.05)}
.gallery-grid .g-tall{grid-row:span 2}
.gallery-grid .g-item.is-hidden{display:none}

.video-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/9;cursor:pointer;background:#000;width:100%;padding:0;border:none;display:block}
.video-card img,.video-card video{width:100%;height:100%;object-fit:cover}
.video-card .play-btn{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:rgba(255,249,242,.92);display:flex;align-items:center;justify-content:center;transition:transform var(--duration-fast) var(--ease-standard)}
.video-card:hover .play-btn{transform:scale(1.08)}
.video-card .v-title{position:absolute;left:0;right:0;bottom:0;padding:18px;color:#fff;font-family:var(--font-display);font-size:18px;text-align:left;background:linear-gradient(to top,rgba(20,12,10,.75),transparent)}
.video-card.is-hidden{display:none}
.video-item.is-hidden{display:none}

.moments-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:48px}
.moments-grid .m-item{aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-sunken)}
.moments-grid .m-item img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-out)}
.moments-grid .m-item:hover img{transform:scale(1.06)}

/* ---------- Home — closing CTA ---------- */
.cta-final{position:relative;color:#fff;overflow:hidden;padding:0}
.cta-final .cta-media{position:absolute;inset:0;background:var(--surface-inverse)}
.cta-final .cta-media img{width:100%;height:100%;object-fit:cover}
.cta-final-content{position:relative;z-index:2;text-align:center;max-width:680px;margin:0 auto;padding:var(--space-9) 0}
.cta-final-content h2{font-family:var(--font-display);font-size:var(--text-h1);margin:0 0 18px;color:#fff}
.cta-final-content p{font-size:var(--text-lead);color:rgba(255,249,242,.85);margin:0 0 36px}
.cta-actions{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}

/* ==========================================================
   10. Inner page heroes + detail pages
   ========================================================== */
.page-hero{position:relative;height:46vh;min-height:340px;display:flex;align-items:flex-end;color:#fff;overflow:hidden;padding:0}
.page-hero .hero-media{position:absolute;inset:0;background:var(--surface-inverse)}
.page-hero .hero-media img{width:100%;height:100%;object-fit:cover}
.page-hero-content{position:relative;z-index:2;padding-bottom:56px;color:#fff}
.page-hero-content h1{font-family:var(--font-display);font-size:var(--text-h1);margin:14px 0 0;color:#fff}

.detail-hero{position:relative;height:64vh;min-height:440px;display:flex;align-items:flex-end;color:#fff;overflow:hidden;padding:0}
.detail-hero .hero-media{position:absolute;inset:0;background:var(--surface-inverse)}
.detail-hero .hero-media img,.detail-hero .hero-media video{width:100%;height:100%;object-fit:cover}
.detail-hero-content{position:relative;z-index:2;padding-bottom:60px;max-width:760px;color:#fff}
.detail-hero-content h1{font-family:var(--font-display);font-size:var(--text-h1);margin:14px 0 0;color:#fff}
.detail-meta{display:flex;gap:28px;flex-wrap:wrap;margin-top:18px;font-size:14px;color:rgba(255,249,242,.9)}

.breadcrumb{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:28px}
.breadcrumb a{color:var(--text-secondary)}
.breadcrumb a:hover{color:var(--accent-primary)}

.detail-body{display:grid;grid-template-columns:2fr 1fr;gap:64px;align-items:start}
.detail-copy p{font-size:var(--text-body);color:var(--text-secondary);line-height:var(--leading-relaxed);margin:0 0 20px}
.detail-side{background:var(--surface-sunken);border-radius:var(--radius-lg);padding:32px;display:flex;flex-direction:column;gap:16px;position:sticky;top:110px}
.detail-side h3{font-family:var(--font-display);font-size:22px;margin:0}
.detail-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:var(--space-8)}
.detail-gallery .dg-item{aspect-ratio:4/5;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;background:var(--surface-sunken);padding:0;border:none;display:block}
.detail-gallery .dg-item img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-out)}
.detail-gallery .dg-item:hover img{transform:scale(1.05)}

/* ==========================================================
   11. Contact page
   ========================================================== */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.contact-info{display:flex;flex-direction:column;gap:28px}
.contact-info h2{font-family:var(--font-display);font-size:var(--text-h2);margin:0 0 8px}
.contact-info p{color:var(--text-secondary);line-height:1.7;margin:0 0 8px}
.contact-info .info-row{display:flex;gap:14px;align-items:flex-start;font-size:15px}
.contact-info .info-row strong{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-gold);margin-bottom:4px}
.contact-info .info-row a{color:var(--text-primary)}
.contact-info .info-row a:hover{color:var(--accent-primary)}
.contact-form{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:40px;box-shadow:var(--shadow-sm)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-grid .full{grid-column:1/-1}
.form-alert{margin-top:18px;padding:14px 16px;border-radius:var(--radius-md);font-size:14px}
.form-alert-error{background:rgba(154,46,46,.08);color:var(--color-danger)}
.success-panel{text-align:center;padding:48px 24px}
.success-panel h3{font-family:var(--font-display);font-size:28px;margin:16px 0 8px}
.success-panel svg{margin:0 auto}
.map-embed{margin-top:var(--space-8);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-subtle)}
.map-embed iframe{display:block;width:100%;height:380px;border:0}

/* ==========================================================
   11b. Dark-section overrides
   These come last on purpose: the component rules above set colours for the
   light background, and a plain `.dark-section h2` ties them on specificity.
   ========================================================== */
.dark-section .section-header h2,
.dark-section .detail-copy h2,
.dark-section h2,
.dark-section h3{color:var(--text-on-dark)}
.dark-section .section-header p,
.dark-section .detail-copy p,
.dark-section p{color:var(--text-on-dark-secondary)}
.dark-section .section-header .eyebrow,
.dark-section .eyebrow{color:var(--accent-gold)}
/* Cards keep their own light surface inside a dark section. */
.dark-section .service-card h3,
.dark-section .testimonial-card .tc-quote{color:var(--text-primary)}
.dark-section .service-card p,
.dark-section .testimonial-card .tc-meta{color:var(--text-secondary)}

/* ==========================================================
   12. Empty state
   ========================================================== */
.empty-note{text-align:center;color:var(--text-secondary);font-size:15px;padding:40px 0}
.dark-section .empty-note{color:var(--text-on-dark-secondary)}

/* ==========================================================
   13. Responsive
   ========================================================== */
@media (max-width:920px){
  .about-grid,.services-grid,.events-grid,.videos-grid,.testi-grid{grid-template-columns:1fr 1fr}
  .gallery-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:150px}
  .moments-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  .contact-wrap{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .detail-body{grid-template-columns:1fr}
  .detail-side{position:static}
  .detail-gallery{grid-template-columns:repeat(2,1fr)}
  .contact-form{padding:28px}
}
@media (max-width:640px){
  .about-grid{grid-template-columns:1fr}
  .services-grid,.events-grid,.videos-grid,.testi-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px}
  .moments-grid{grid-template-columns:repeat(2,1fr)}
  .hero-content h1{font-size:clamp(36px,10vw,52px)}
  .hero{min-height:560px}
  .has-solid-header{padding-top:80px}
  /* Not enough room for the scroll cue next to the stacked hero buttons. */
  .hero-scroll{display:none}
  .hero-actions .btn{width:100%}
  .cta-actions .btn{width:100%}
  .contact-form{padding:24px 20px}
}