/* Sanda Dendermonde - shared stylesheet */
:root{
    --ink:#12161B; --ink-2:#1A2029; --ink-3:#222A34;
    --red:#C8102E; --red-deep:#7E0A1D;
    --gold:#E9B949; --gold-dim:#A8853A;
    --cream:#F5F1E8; --body:#C5C0B5; --muted:#8B857A;
    --line:#2C333D; --line-soft:#232A33;
    --fret:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczNCcgaGVpZ2h0PSczNCcgdmlld0JveD0nMCAwIDM0IDM0Jz48cGF0aCBkPSdNMiwyNiBMMiw2IEwzMCw2IEwzMCwyMiBMMTAsMjIgTDEwLDEyIEwyMiwxMiBMMjIsMTgnIGZpbGw9J25vbmUnIHN0cm9rZT0nJTIzRTlCOTQ5JyBzdHJva2Utd2lkdGg9JzMnIHN0cm9rZS1saW5lY2FwPSdzcXVhcmUnLz48L3N2Zz4=");
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}

  body{
    margin:0; background:var(--ink); color:var(--body);
    font-family:Barlow,"Segoe UI",system-ui,sans-serif; font-size:17px; line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }

  .wrap{max-width:1080px; margin:0 auto; padding-inline:20px}
  .narrow{max-width:66ch}

  h1,h2,h3,.dsp{font-family:Oswald,"Arial Narrow",sans-serif; font-weight:700;
    text-transform:uppercase; letter-spacing:.02em; color:var(--cream); text-wrap:balance}
  a{color:var(--gold)}
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
  textarea:focus-visible{outline:3px solid var(--gold); outline-offset:3px}

  .eyebrow{font-family:Oswald,sans-serif; font-weight:500; text-transform:uppercase;
    letter-spacing:.22em; font-size:12.5px; color:var(--gold); margin:0}
  .han{font-family:"Noto Sans SC",sans-serif; font-weight:700}

  /* ---------- header ---------- */
  header.bar{position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
    background:rgba(18,22,27,.93); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line-soft)}
  .bar .wrap{display:flex; align-items:center; gap:18px; height:62px}
  .bar .mark{font-family:Oswald,sans-serif; font-weight:700; text-transform:uppercase;
    letter-spacing:.06em; color:var(--cream); font-size:18px; margin-right:auto;
    text-decoration:none; white-space:nowrap}
  .bar .mark em{color:var(--red); font-style:normal}
  .bar nav{display:flex; gap:20px}
  .bar nav a{font-family:Oswald,sans-serif; font-weight:500; text-transform:uppercase;
    letter-spacing:.12em; font-size:12.5px; color:var(--body); text-decoration:none}
  .bar nav a:hover{color:var(--gold)}
  .lang{display:flex; border:1px solid var(--line); border-radius:2px; overflow:hidden}
  .lang a,.lang .on{font-family:Oswald,sans-serif; font-weight:500; font-size:12.5px;
    letter-spacing:.1em; padding:5px 10px; color:var(--muted); text-decoration:none;
    display:inline-block; line-height:1.5}
  .lang a:hover{color:var(--cream)}
  .lang .on{background:var(--gold); color:#14181E}

  /* ---------- hero ---------- */
  .hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line-soft);
    background:radial-gradient(ellipse 60% 70% at 26% 46%, rgba(200,16,46,.40) 0%,
      rgba(126,10,29,.16) 46%, rgba(0,0,0,0) 74%), var(--ink)}
  .hero .wrap{display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr);
    gap:56px; align-items:center; padding-block:56px 64px}
  .hero img{width:100%; max-width:340px; height:auto; display:block;
    filter:drop-shadow(0 20px 46px rgba(0,0,0,.6))}
  .hero h1{font-size:clamp(38px,6.4vw,68px); line-height:.98; margin:14px 0 0}
  .hero h1 .red{color:var(--red)}
  .hero .lede{font-size:19px; margin:20px 0 0; max-width:54ch}
  .cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
  .btn{display:inline-block; font-family:Oswald,sans-serif; font-weight:700;
    text-transform:uppercase; letter-spacing:.09em; font-size:15px; padding:15px 28px;
    border-radius:2px; text-decoration:none; border:2px solid transparent; cursor:pointer}
  .btn-primary{background:var(--red); color:#fff; border-color:var(--red)}
  .btn-primary:hover{background:#A60D26; border-color:#A60D26}
  .btn-ghost{border-color:var(--gold); color:var(--gold); background:transparent}
  .btn-ghost:hover{background:rgba(233,185,73,.12)}

  /* ---------- bands ---------- */
  section{padding-block:66px}
  section.alt{background:var(--ink-2); border-block:1px solid var(--line-soft)}
  .fretline{height:16px; background-image:var(--fret); background-repeat:repeat-x;
    background-size:auto 16px; opacity:.30}
  h2{font-size:clamp(26px,3.6vw,36px); margin:0 0 6px}
  .rule{width:54px; height:4px; background:var(--red); margin:14px 0 26px}
  p{margin:0 0 18px}
  .lead-note{color:var(--cream); font-weight:500}

  /* ---------- three pillars ---------- */
  .pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px}
  .pillar{background:var(--ink); border:1px solid var(--line); border-top:3px solid var(--gold);
    padding:26px 24px 28px}
  section.alt .pillar{background:var(--ink-3)}
  .pillar .glyph{font-family:"Noto Sans SC",sans-serif; font-weight:700; font-size:54px;
    line-height:1; color:var(--gold); margin:0}
  .pillar .rom{font-family:Oswald,sans-serif; font-weight:500; text-transform:uppercase;
    letter-spacing:.2em; font-size:12.5px; color:var(--muted); margin:10px 0 0}
  .pillar h3{font-size:21px; margin:6px 0 10px}
  .pillar p{font-size:16px; margin:0}

  /* ---------- lists ---------- */
  .flow{list-style:none; padding:0; margin:28px 0 0; counter-reset:step}
  .flow li{position:relative; padding:0 0 18px 52px; border-left:2px solid var(--line);
    margin-left:11px}
  .flow li:last-child{border-left-color:transparent; padding-bottom:0}
  .flow li::before{counter-increment:step; content:counter(step);
    position:absolute; left:-13px; top:0; width:24px; height:24px; border-radius:50%;
    background:var(--red); color:#fff; font-family:Oswald,sans-serif; font-size:13px;
    display:grid; place-items:center}
  .flow b{color:var(--cream); font-weight:600; display:block}
  .cols{display:grid; grid-template-columns:repeat(2,1fr); gap:26px 44px; margin-top:34px}
  .cols > div{border-top:3px solid var(--gold); padding-top:20px}
  .cols h3{font-size:19px; margin:0}
  .cols .ticks{margin-top:14px}
  .ticks{list-style:none; padding:0; margin:22px 0 0}
  .ticks li{position:relative; padding-left:30px; margin-bottom:12px}
  .ticks li::before{content:""; position:absolute; left:4px; top:.62em; width:9px; height:9px;
    background:var(--gold); transform:rotate(45deg)}

  /* ---------- faq ---------- */
  .faq{margin-top:30px; border-top:1px solid var(--line)}
  .faq.narrow{max-width:860px}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{cursor:pointer; padding:18px 0; font-family:Oswald,sans-serif;
    font-weight:500; text-transform:uppercase; letter-spacing:.05em; font-size:17px;
    color:var(--cream); list-style:none; display:flex; justify-content:space-between; gap:16px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+"; color:var(--gold); font-size:22px; line-height:1}
  .faq details[open] summary::after{content:"\2212"}
  .faq .ans{padding:0 0 18px; max-width:66ch}
  .faq .ans p{margin:0}

  /* ---------- contact ---------- */
  #contact{background:
     radial-gradient(ellipse 70% 90% at 50% 0%, rgba(200,16,46,.26) 0%, rgba(0,0,0,0) 62%),
     var(--ink-2); border-top:1px solid var(--line-soft)}
  .form{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:32px}
  .field{display:flex; flex-direction:column; gap:7px}
  .field.full{grid-column:1/-1}
  .field.full > .btn{align-self:flex-start}
  label{font-family:Oswald,sans-serif; font-weight:500; text-transform:uppercase;
    letter-spacing:.12em; font-size:12px; color:var(--gold)}
  input,select,textarea{font-family:Barlow,sans-serif; font-size:16px; color:var(--cream);
    background:var(--ink); border:1px solid var(--line); border-radius:2px;
    padding:12px 13px; width:100%}
  textarea{min-height:110px; resize:vertical}
  .when{display:flex; flex-wrap:wrap; gap:10px}
  .when label{display:inline-flex; align-items:center; gap:8px; cursor:pointer;
    border:1px solid var(--line); border-radius:2px; padding:10px 14px;
    color:var(--body); letter-spacing:.06em; font-size:12.5px; background:var(--ink)}
  .when input{width:auto; accent-color:var(--red)}
  .out{grid-column:1/-1; margin-top:4px; border:1px solid var(--gold);
    background:var(--ink); padding:20px}
  .out h3{font-size:17px; margin:0 0 12px}
  .out pre{white-space:pre-wrap; word-break:break-word; font-family:Barlow,sans-serif;
    font-size:15px; color:var(--body); margin:0 0 16px; max-height:260px; overflow:auto}
  .out .row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
  .say{font-size:14px; color:var(--muted)}
  .direct{margin-top:34px; padding-top:26px; border-top:1px solid var(--line);
    display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
  .direct div b{display:block; font-family:Oswald,sans-serif; font-weight:500;
    text-transform:uppercase; letter-spacing:.14em; font-size:11.5px; color:var(--gold);
    margin-bottom:5px}
  .direct div span{color:var(--cream)}

  footer{padding-block:34px; border-top:1px solid var(--line-soft); color:var(--muted);
    font-size:14px}
  footer .wrap{display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center}

  @media (max-width:860px){
    .hero .wrap{grid-template-columns:1fr; gap:30px; padding-block:38px 46px}
    .hero img{max-width:230px; margin-inline:auto}
    .pillars,.form,.direct,.cols{grid-template-columns:1fr}
    section{padding-block:48px}
    /* keep one persistent way to reach the form; drop the rest of the nav */
    .bar .wrap{gap:12px}
    .bar nav a:not(.nav-cta){display:none}
    .nav-cta{background:var(--red); color:#fff; padding:13px 17px; border-radius:2px}
    .lang a,.lang .on{padding:12px 13px}
    .cta-row .btn{width:100%; text-align:center}
  }
  @media (max-width:560px){
    .bar .mark em,.mark-city{display:none}
    .bar .mark{font-size:17px}
  }