/* brand.css — Båstad Stegen brand layer on top of WEQ tokens.
   WEQ provides: orange ramp (--o1..o5), neutrals, Outfit + Space Mono, type classes.
   Stegen adds: navy ink, Anton display wordmark, court-line + serve-arc motifs. */
@import url('weq-tokens.css');

:root{
  --navy:#0D2E20;
  --navy-deep:#061712;
  --navy-surface:#0D2A1D;
  --court-line:#F6EFE2;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--navy); color:var(--white);
  font-family:var(--font-sans); -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ---------- shared atoms ---------- */
.wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(22px, 5vw, 72px); }
.eyebrow{
  font-family:var(--font-mono); font-weight:400; font-size:12px;
  letter-spacing:4px; text-transform:uppercase;
}
.wordmark{
  font-family:'Anton',sans-serif; text-transform:uppercase;
  line-height:.78; transform:skewX(-8deg); display:inline-flex; flex-direction:column;
}
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--font-mono); font-size:13px; letter-spacing:2px; text-transform:uppercase;
  padding:14px 24px; border:0; transition:transform .15s ease, background .15s ease, color .15s;
}
.btn-primary{ background:var(--o2); color:#0C140B; font-weight:700; }
.btn-primary:hover{ background:var(--o1); transform:translateY(-2px); }
.btn-ghost{ background:transparent; border:1px solid rgba(255,255,255,.28); color:var(--white); }
.btn-ghost:hover{ border-color:var(--o1); color:var(--o1); }
.btn-ghost-dark{ background:transparent; border:1px solid rgba(18,58,40,.35); color:var(--navy); }
.btn-ghost-dark:hover{ border-color:var(--navy); }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy-deep); transform:translateY(-2px); }

/* court-line painted bar */
.pline{
  position:absolute; background:var(--court-line);
  box-shadow:0 0 0 1px rgba(120,40,0,.18), inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(120,40,0,.12);
}
/* diagonal hairline + grain textures */
.tex-hair{ position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(170deg, transparent 0 18px, rgba(0,0,0,0.05) 18px 19px); }
.tex-grain{ position:absolute; inset:0; pointer-events:none; opacity:.45; mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px), radial-gradient(rgba(0,0,0,.10) 1px, transparent 1px);
  background-size:3px 3px,4px 4px; background-position:0 0,1px 2px; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

section{ position:relative; }
.sec-pad{ padding:120px 0; }
.sec-eyebrow{ color:var(--accent-soft); margin-bottom:22px; }
.sec-title{ font-family:var(--font-sans); font-weight:800; font-size:clamp(34px,5vw,56px);
  line-height:1.04; letter-spacing:-1.5px; margin:0; }
.sec-lead{ font-weight:300; font-size:19px; line-height:1.6; color:var(--muted2); max-width:600px; margin:18px 0 0; }

/* ---------- responsiv sidomarginal (gäller alla sidor) ---------- */
@media (max-width:760px){
  .sec-pad{ padding:80px 0; }
}