/* ======= Design tokens ======= */
:root{
  /* TODO: replace with exact brand orange from your logo */
  --brand:#ff6a00;
  --ink:#111;
  --muted:#5b5b5b;
  --bg:#fff;
  --card:#f7f7f7;
  --ring:rgba(0,0,0,.08);
  --soft:#f6f3ef;
  --max:1120px;
}

/* ======= Base ======= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  text-rendering:optimizeLegibility;
}

/* Utility */
.container{max-width:1100px;margin-inline:auto;padding:0 16px}
h1,h2{line-height:1.2;margin:0 0 .5rem}
h2{font-size:1.6rem;margin-top:2rem}
p{margin:.5rem 0 1rem}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* Header */
.site-header{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 16px; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--ring);
}
.brand{display:flex; align-items:center; gap:.6rem; color:inherit; text-decoration:none}
.top-actions{display:flex; align-items:center; gap:12px}
.top-link{font-weight:600}
.lang-toggle{
  border:1px solid var(--ring); background:#fff; color:var(--ink);
  padding:.4rem .6rem; border-radius:999px; cursor:pointer; font-weight:700;
}
.lang-toggle:focus{outline:2px solid var(--brand); outline-offset:2px}
.btn:focus-visible,
.cta-sticky:focus-visible,
.top-link:focus-visible,
.lang-toggle:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  text-decoration:none;
}

/* Hero */
.hero{position:relative; display:grid; min-height:56vh; overflow:hidden}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 35%, rgba(0,0,0,.58) 100%);
}
.hero picture, .hero picture img{width:100%; height:100%; object-fit:cover; display:block}
.hero-copy{
  position:absolute; inset:auto 0 0 0; z-index:1;
  padding:24px 16px; background:linear-gradient(180deg,rgba(0,0,0,0) 0, rgba(0,0,0,.55) 100%);
  color:#fff;
}
.tagline{font-size:1.1rem; opacity:.95}
.hero-cta{margin-top:10px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.35em;
  font-weight:700; border-radius:10px; padding:.7rem 1rem; text-decoration:none; border:2px solid transparent; white-space:nowrap;
}
.btn-label{display:none}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{filter:brightness(.95); text-decoration:none}

/* Sections */
.features,.pricing,.events,.gallery,.faqs,.contact{padding:24px 16px}
.features>.feature-list{display:grid; gap:.6rem; list-style:none; padding:0; max-width:1000px; margin:0 auto}
.pricing p{max-width:1000px; margin:0 auto 8px}
.events p{max-width:1000px; margin:0 auto 8px}

/* Gallery */
.gallery .grid{
  display:grid; gap:10px;
  grid-template-columns:repeat(2,1fr);
}
.gallery figure{margin:0; background:var(--card); border-radius:8px; overflow:hidden; border:1px solid var(--ring); aspect-ratio:4/5}
.gallery figure img{display:block; width:100%; height:100%; object-fit:cover}
@media (min-width:900px){
  .gallery .grid{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:760px){
  body{font-size:17px}

  .site-header{
    padding:14px max(28px, calc((100vw - var(--max)) / 2 + 24px));
  }
  .site-header .brand img{width:44px;height:44px}
  .top-actions{gap:18px}

  .hero{
    min-height:620px;
    height:calc(100svh - 72px);
    max-height:760px;
  }
  .hero::after{
    background:
      linear-gradient(90deg,rgba(0,0,0,.58) 0%, rgba(0,0,0,.28) 44%, rgba(0,0,0,.08) 72%),
      linear-gradient(180deg,rgba(0,0,0,.05) 0%, rgba(0,0,0,.62) 100%);
  }
  .hero picture{position:absolute; inset:0}
  .hero picture img{object-position:center 42%}
  .hero-copy{
    inset:0 auto 0 0;
    display:flex;
    width:min(760px, 58vw);
    flex-direction:column;
    justify-content:flex-end;
    padding:0 40px 72px max(40px, calc((100vw - var(--max)) / 2 + 24px));
    background:none;
  }
  h1{
    max-width:720px;
    font-size:clamp(2.65rem, 4.6vw, 4.75rem);
    line-height:1.02;
  }
  .tagline{
    max-width:520px;
    margin-top:14px;
    font-size:1.35rem;
  }
  .hero-cta{margin-top:24px}
  .btn{padding:.85rem 1.15rem}

  .features,.pricing,.events,.gallery,.faqs,.contact{
    padding:48px max(28px, calc((100vw - var(--max)) / 2 + 24px));
  }
  .features,.events,.faqs{background:#fff}
  .pricing,.gallery,.contact{background:var(--soft)}
  h2{
    max-width:var(--max);
    margin:0 auto 20px;
    font-size:2rem;
  }
  .features>.feature-list{
    max-width:var(--max);
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
  }
  .feature-list li{
    min-height:150px;
    padding:18px;
    border:1px solid var(--ring);
    border-radius:8px;
    background:#fff;
    box-shadow:0 10px 24px rgba(0,0,0,.05);
  }
  .feature-list strong{
    display:block;
    margin-bottom:6px;
    color:#1d1d1d;
  }
  .pricing p,.events p,.contact p{
    max-width:var(--max);
  }
  .pricing p,.events p{
    font-size:1.08rem;
  }
  .gallery .grid{
    max-width:var(--max);
    margin:0 auto;
    gap:16px;
  }
  .gallery figure{
    aspect-ratio:4/3;
    box-shadow:0 12px 28px rgba(0,0,0,.08);
  }
  .faqs details{
    max-width:var(--max);
    padding:16px 18px;
  }
  .site-footer{padding-top:30px}
}

@media (min-width:1180px){
  .gallery .grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
  .gallery figure{
    aspect-ratio:3/4;
  }
}

/* FAQs */
.faqs details{background:#fff; border:1px solid var(--ring); border-radius:10px; padding:12px 14px; margin:10px auto; max-width:1000px}
.faqs summary{cursor:pointer; font-weight:700}
.faqs p{margin-top:.5rem}

/* Contact */
.contact p{max-width:1000px; margin:0 auto 8px}
.location{color:var(--muted)}

/* Footer */
.site-footer{padding:24px 16px; text-align:center; color:var(--muted); border-top:1px solid var(--ring)}

/* Sticky CTA */
.cta-sticky{
  position:fixed; left:50%; transform: translate(-50%, 150%);
  display:inline-flex; align-items:center; justify-content:center;
  gap:.35em;
  bottom: calc(14px + env(safe-area-inset-bottom)); z-index:50;
  padding:.9rem 1.2rem; border-radius:999px; font-weight:800;
  background:var(--brand); color:#fff; text-decoration:none; box-shadow:0 8px 20px rgba(0,0,0,.25);
  white-space: nowrap;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: transform .25s ease, opacity .25s ease;
  will-change: transform;
}
.cta-sticky:hover{text-decoration:none; filter:brightness(.95)}

body.cta-visible .cta-sticky{ transform: translate(-50%, 0); opacity:1; visibility:visible; pointer-events:auto }

@media (prefers-reduced-motion: reduce){
  .cta-sticky{ transition:none }
}
.cta-sticky:hover{text-decoration:none; filter:brightness(.95)}

/* NoScript */
.noscript{padding:10px; text-align:center; background:#fff7d6; border-bottom:1px solid var(--ring)}

/* Header logo sizing + mobile tweaks */
.site-header .brand img{width:36px;height:36px}
@media (max-width:480px){
  .site-header .brand img{width:28px;height:28px}
  .site-header{white-space:nowrap}
  .brand{flex:0 0 auto}
  .top-actions{gap:6px;flex-wrap:nowrap;min-width:0;justify-content:flex-end}
  .top-actions .top-link{font-size:.9rem;white-space:nowrap}
  .top-actions a[href^="mailto:"]{max-width:40vw;overflow:hidden;text-overflow:ellipsis;display:inline-block}
  .lang-toggle{white-space:nowrap}
}

/* Square wordmark image inside CTA buttons/links */
.sqmark{height:1em;width:auto;vertical-align:-0.15em;margin-left:.35em}
.btn .sqmark{height:1em}
.cta-sticky .sqmark{height:1em}

/* Extra-narrow safety adjustments */
@media (max-width:360px){
  .site-header{padding:8px 12px}
  .top-actions{gap:4px}
  .top-actions .top-link{font-size:.85rem}
  .lang-toggle{padding:.3rem .5rem}
}
/* Reserve space so sticky CTA doesn’t overlap footer copy */
:root{ --cta-bottom-safe: calc(64px + env(safe-area-inset-bottom)); }
.site-footer{ padding-bottom: calc(24px + var(--cta-bottom-safe)); }

@media (min-width:760px){
  .site-header .brand img{width:44px;height:44px}
  .faqs details{max-width:var(--max); padding:16px 18px}
  .contact p{max-width:var(--max)}
  .site-footer{
    padding-top:30px;
    padding-bottom:calc(30px + var(--cta-bottom-safe));
  }
}