/*
Theme Name:  SIOW GmbH
Theme URI:   https://siow.ch
Author:      SIOW GmbH
Description: Switzerland–China Business Bridge. Premium WordPress theme for SIOW GmbH — two pillars: Business Development & Business Concierge.
Version:     2.0.0
Text Domain: siow
*/

/* ============================================================
   VARIABLES — change colours here only
============================================================ */
:root {
  --ink:        #0f0f0e;
  --paper:      #f7f4ef;
  --cream:      #ede9e1;
  --gold:       #b8953a;
  --gold-lt:    #d4b86a;
  --mist:       rgba(247,244,239,0.96);
  --serif:      'Cormorant Garamond', Georgia, serif;
  --sans:       'DM Sans', sans-serif;
  --zh:         'Noto Serif SC', serif;
  --radius:     0px;
  --max:        1240px;
  --gap:        4rem;
}

/* ============================================================
   RESET
============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--cream)}
::-webkit-scrollbar-thumb{background:var(--gold)}

/* ============================================================
   TYPOGRAPHY
============================================================ */
h1,h2,h3,h4{font-family:var(--serif);font-weight:300;line-height:1.12}
p{line-height:1.78}

.label {
  font-family:var(--sans);font-size:.68rem;letter-spacing:.25em;
  text-transform:uppercase;color:var(--gold);font-weight:500;
  display:block;margin-bottom:.8rem;
}
.heading {
  font-family:var(--serif);font-size:clamp(2rem,3.5vw,3.4rem);
  font-weight:300;line-height:1.12;color:var(--ink);
}
.heading em{font-style:italic;color:var(--gold)}
.heading--light{color:var(--paper)}
.heading--light em{color:var(--gold-lt)}
.body-text{
  font-size:.95rem;font-weight:300;line-height:1.8;
  color:rgba(15,15,14,.62);max-width:520px;margin-top:1.2rem;
}
.body-text--light{color:rgba(247,244,239,.55)}

/* ============================================================
   LAYOUT
============================================================ */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gap)}
section{padding:7rem 0}
section.tight{padding:4rem 0}
section.dark{background:var(--ink)}
section.cream{background:var(--cream)}
section.gold-bg{background:var(--gold)}

/* ============================================================
   BUTTONS
============================================================ */
.btn{
  display:inline-block;
  font-family:var(--sans);font-size:.75rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.9rem 2.2rem;transition:.2s;cursor:pointer;border:none;
}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:var(--gold-lt);color:var(--ink);transform:translateY(-1px)}
.btn--dark{background:var(--ink);color:var(--paper)}
.btn--dark:hover{background:var(--gold);color:var(--ink)}
.btn--ghost{
  background:transparent;color:var(--paper);
  border:1px solid rgba(247,244,239,.3);
}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn--ghost-dark{
  background:transparent;color:var(--ink);
  border:1px solid rgba(15,15,14,.25);
}
.btn--ghost-dark:hover{border-color:var(--gold);color:var(--gold)}

/* ============================================================
   NAVIGATION
============================================================ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem var(--gap);
  background:var(--mist);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(184,149,58,.15);
  transition:padding .3s;
}
#nav.scrolled{padding:.85rem var(--gap)}
.nav-logo{
  font-family:var(--serif);font-size:1.55rem;font-weight:600;
  letter-spacing:.12em;color:var(--ink);
}
.nav-logo span{color:var(--gold)}
.nav-links{display:flex;gap:2.2rem}
.nav-links a{
  font-size:.75rem;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);opacity:.65;
  transition:opacity .2s,color .2s;
}
.nav-links a:hover,.nav-links a.active{opacity:1;color:var(--gold)}
.nav-cta{
  font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);background:var(--ink);padding:.6rem 1.5rem;
  transition:background .2s;
}
.nav-cta:hover{background:var(--gold);color:var(--ink)}

/* hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;padding:4px}
.hamburger span{display:block;width:23px;height:1.5px;background:var(--ink);transition:.3s}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* mobile overlay */
.mobile-overlay{
  display:none;position:fixed;inset:0;z-index:850;
  background:var(--paper);flex-direction:column;
  align-items:center;justify-content:center;gap:2.2rem;
}
.mobile-overlay.open{display:flex}
.mobile-overlay a{
  font-family:var(--serif);font-size:2.2rem;font-weight:300;
  color:var(--ink);letter-spacing:.06em;
}
.mobile-overlay a:hover{color:var(--gold)}

/* ============================================================
   MARQUEE
============================================================ */
.marquee{background:var(--gold);padding:.75rem 0;overflow:hidden;white-space:nowrap}
.marquee-inner{display:inline-block;animation:marquee 30s linear infinite}
.marquee-inner span{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);margin:0 2rem;font-family:var(--sans);font-weight:500;
}
.marquee-inner span::before{content:'◆  ';font-size:.45rem}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   PAGE HERO (inner pages)
============================================================ */
.page-hero{
  background:var(--ink);padding:9rem 0 5rem;
  position:relative;overflow:hidden;
}
.page-hero::after{
  content:attr(data-zh);
  font-family:var(--zh);font-size:22rem;font-weight:300;
  color:rgba(255,255,255,.04);
  position:absolute;bottom:-2rem;right:3rem;line-height:1;
  pointer-events:none;
}
.page-hero .label{color:var(--gold)}
.page-hero-title{
  font-family:var(--serif);font-size:clamp(3rem,6vw,6rem);
  font-weight:300;color:var(--paper);line-height:1.06;margin-top:.4rem;
}
.page-hero-title em{font-style:italic;color:var(--gold-lt)}
.page-hero-sub{
  font-size:1rem;font-weight:300;line-height:1.75;
  color:rgba(247,244,239,.58);max-width:500px;margin-top:1.4rem;
}

/* ============================================================
   FOOTER
============================================================ */
#footer{
  background:#090908;padding:2.8rem var(--gap);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1.2rem;
  border-top:1px solid rgba(184,149,58,.1);
}
.footer-logo{
  font-family:var(--serif);font-size:1.25rem;font-weight:600;
  letter-spacing:.12em;color:var(--paper);
}
.footer-logo span{color:var(--gold)}
.footer-links{display:flex;gap:1.8rem;flex-wrap:wrap}
.footer-links a{
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(247,244,239,.3);transition:color .2s;
}
.footer-links a:hover{color:var(--gold)}
.footer-copy{font-size:.7rem;color:rgba(247,244,239,.22)}

/* ============================================================
   REVEAL ANIMATION
============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

/* ============================================================
   CONTACT FORM (shared)
============================================================ */
.siow-form .fg{margin-bottom:1.4rem}
.siow-form label{
  display:block;font-size:.63rem;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:.45rem;
  color:rgba(247,244,239,.38);font-family:var(--sans);
}
.siow-form.light label{color:rgba(15,15,14,.45)}
.siow-form input,.siow-form textarea,.siow-form select{
  width:100%;background:rgba(247,244,239,.05);
  border:1px solid rgba(184,149,58,.2);color:var(--paper);
  font-family:var(--sans);font-size:.88rem;font-weight:300;
  padding:.8rem 1rem;outline:none;transition:border-color .2s;
  -webkit-appearance:none;border-radius:0;
}
.siow-form.light input,.siow-form.light textarea,.siow-form.light select{
  background:var(--paper);color:var(--ink);
  border-color:rgba(15,15,14,.18);
}
.siow-form input:focus,.siow-form textarea:focus,.siow-form select:focus{border-color:var(--gold)}
.siow-form select option{background:var(--ink)}
.siow-form.light select option{background:var(--paper);color:var(--ink)}
.siow-form textarea{resize:vertical;min-height:108px}
.siow-form .fs{
  width:100%;margin-top:.4rem;padding:.95rem;
  font-family:var(--sans);font-size:.75rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  background:var(--gold);color:var(--ink);border:none;
  cursor:pointer;transition:background .2s;
}
.siow-form .fs:hover{background:var(--gold-lt)}
.form-msg{font-size:.8rem;padding:.5rem 0;min-height:1.4rem;color:var(--gold-lt)}
.form-msg.err{color:#f09090}

/* ============================================================
   RESPONSIVE BASE
============================================================ */
@media(max-width:1024px){
  :root{--gap:2rem}
  #nav .nav-links,#nav .nav-cta{display:none}
  .hamburger{display:flex}
}
@media(max-width:600px){
  :root{--gap:1.4rem}
  section{padding:4.5rem 0}
  .page-hero{padding:7rem 0 4rem}
}