/* ===== Qwas Acoustics — styles.css (light theme, SVG wordmark) ===== */

/* --- Design tokens --- */
:root{
  /* Sage & neutrals */
  --sage-900:#1e2a22;
  --sage-800:#2b3a30;
  --sage-700:#3a4c40;
  --sage-600:#4c5f51;
  --sage-500:#5f7464;
  --sage-400:#6f846f;
  --sage-300:#7ea17e;
  --sage-200:#9bb49b;
  --sage-100:#c8d7c8;

  /* Light UI base + ink */
  --paper:#86927e;          /* page background */
  --paper-elev:#b5bab5;     /* card/input base */
  --ink:#d0d2d0;            /* body copy */
  --ink-dim:#2b2f2b;        /* headings/nav */
  --muted:#5A5F5A;          /* secondary text */
  --rule:rgba(0,0,0,.12);
  --accent:#7ea17e;         /* buttons / accents */
}

/* --- Base --- */
*{box-sizing:border-box}
html,body{
  margin:8px; padding:0;
  background:var(--paper);
  color:var(--ink);
  scroll-behavior:smooth;
}
body{
  font-family:Rokkitt, ui-serif, Georgia, "Times New Roman", serif;
  line-height:1.45;
}
img{max-width:100%; height:auto; display:block}

/* A11y helper (hide visually, keep for SR) */
.visually-hidden{
  position:absolute!important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}

/* --- Layout --- */
.container{max-width:1100px;margin:0 auto;padding:24px}

/* --- Header / Nav --- */
header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg, rgba(250,250,248,.95), rgba(250,250,248,.7), rgba(250,250,248,0));
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
nav{
  display:flex; gap:18px; align-items:center; justify-content:space-between;
}
nav a, nav button{
  color:var(--ink-dim); text-decoration:none; font-weight:600;
}
#about {
  background: var(--sage-600);   /* or try --sage-200 / --paper-elev for subtle variation */
}
#commission {
  background: var(--sage-500);   /* or try --sage-200 / --paper-elev for subtle variation */
}
/* Brand wordmark (SVG) */
nav .brand{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--ink-dim);
}
nav .brand .wordmark{
  display:block; height:38px; width:auto;
}
@media (min-width:1100px){
  nav .brand .wordmark{ height:32px; }
}

/* Pills */
.pill{
  border:1px solid rgba(0,0,0,.14);
  border-radius:999px; padding:8px 14px;
  background:var(--paper-elev); cursor:pointer;
}
.pill:hover{background:#F2F2EE}

/* --- Hero --- */
.hero{
  padding:0 0 48px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background:
    radial-gradient(900px 420px at 15% -10%, rgba(126,161,126,.16), transparent),
    radial-gradient(700px 320px at 85% 10%, rgba(95,116,100,.12), transparent),
    linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.00));
}
.hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:28px; align-items:center; padding-top:64px;
}
.kicker{
  text-transform:uppercase; letter-spacing:.18em; font-size:.78rem; color:var(--muted);
}
h1{
  font-family:Play, system-ui, sans-serif; font-weight:700;
  color:var(--ink-dim);
  font-size:clamp(2.2rem, 4.5vw, 4.2rem); margin:.3em 0 .2em;
}

h2{
  font-family:Play, system-ui, sans-serif; font-weight:700;
  color:var(--sage-200);
  font-size:clamp(2.2rem, 4.5vw, 4.2rem); margin:.3em 0 .2em;
}

.lede{font-size:clamp(1.05rem, 1.6vw, 1.25rem);max-width:60ch;color:var(--muted)}
.cta-row{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}

/* --- Sections --- */
section{padding:56px 0;border-bottom:1px solid rgba(0,0,0,.08)}
section h2{
  font-family:Play, system-ui, sans-serif; color:var(--ink-dim);
  font-size:clamp(1.6rem, 2.8vw, 2.2rem); margin:0 0 .4em;
}
.two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:28px}
p{margin:.6em 0;color:var(--ink)}
ul{margin:.4em 0 .6em 1.2em;color:var(--ink)}
li{margin:.3em 0}
.mt-8{ margin-top:8px }

/* --- Cards / Media --- */
.card{
  background:var(--sage-400);
  border:1px solid rgba(0,0,0,.12);
  border-radius:16px; padding:20px;
  box-shadow:0 1px 12px rgba(0,0,0,.04);
  color:var(--ink);
}
.media{
  border-radius:16px; overflow:hidden;
  border:1px solid rgba(0,0,0,.12);
  background:#F7F7F4;
}
.media img{object-fit:cover}
.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.caption{font-size:.9rem;color:#676C67;margin-top:8px}

/* --- Forms --- */
form{display:grid;gap:12px}
input, textarea{
  width:100%; padding:12px 14px;
  border:1px solid rgba(0,0,0,.14);
  border-radius:12px;
  background:var(--paper-elev);
  color:var(--ink); font:inherit;
}
textarea{min-height:120px; resize:vertical}
button.primary{
  border:1px solid rgba(0,0,0,.14);
  background:var(--accent); color:#0f1a10;
  padding:12px 16px; border-radius:12pxZ; font-weight:700; cursor:pointer;
}
button.primary:hover{filter:brightness(1.05)}

/* Optional container to visually integrate the Turnstile area */
#turnstile-target, .turnstile-wrap{
  background:var(--paper-elev);
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px; padding:6px;
}

/* --- Footer --- */
footer{padding:36px 0;color:#6A6E6A;font-size:.9rem}

/* --- Responsive --- */
@media (max-width:1980px){
  .hero-grid{grid-template-columns:1fr}

}

.hero-bg{
  position:relative; min-height:56vh; display:flex; align-items:flex-end;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.00) 20%, rgba(0,0,0,.35) 70%),
    url('hero001.jpg');          /* <-- make sure filename + path are exact */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  padding-top:14vh; padding-bottom:48px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.hero-bg .kicker, .hero-bg h1, .hero-bg .lede, .hero-bg .pill { color:#fff; }
.hero-bg .pill{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.35); }
.on-hero{ color:#f5f5f3; }


/* Tighten spacing for subsections inside the Philosophy block */
#philosophy { padding:40px 0; }                  /* optional: slightly less than 56px */
#philosophy .two-col { gap:20px; }               /* narrower column gap */

#philosophy section {                            /* override global section rule */
  padding:14px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
}
#philosophy section:first-of-type { padding-top:8px; }
#philosophy section:last-of-type  { padding-bottom:0; border-bottom:0; }

#philosophy h3 { margin:0 0 .35em; }
#philosophy p  { margin:.4em 0 1em; }


.sulphur-font {
  font-family: 'Sulphur Point', sans-serif;
  font-size: 38pt;    /* exactly what you requested */
  font-weight: 700;   /* adjust to 300 or 700 if desired */
  line-height: 1.2;   /* keeps spacing tidy at larger sizes */
}