/* ============================================================
   ELITE STUDIOS - form
   Färger och typsnitt ur Elite Studios Graphics 2024.
   Off black, off white, fyra gråa. Barlow rakt igenom.
   Kvadraten ur logotypen är enda grafiska elementet.
   ============================================================ */

:root{
  --black:#0C0C0C;
  --white:#F4F4F4;
  --g1:#636668;      /* cold grey 1 */
  --g12:#9FA2A3;     /* cold grey 1.2 */
  --g2:#313233;      /* cold grey 2 */
  --flat:#CBCBCB;    /* flat grey */

  --bg:var(--black);
  --fg:var(--white);
  --mute:var(--g12);
  --line:var(--g2);

  --font:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(20px,4vw,64px);
  --max:1360px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font); font-weight:400; font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--fg); outline-offset:3px; }

/* ljus grund: byter roll på svart och vitt */
.light{ --bg:var(--white); --fg:var(--black); --mute:var(--g1); --line:var(--flat); background:var(--bg); color:var(--fg); }

.wrap{ width:min(100% - 2*var(--gutter), var(--max)); margin-inline:auto; }

/* ---------- typografi ---------- */
.label{
  font-weight:600; text-transform:uppercase; font-size:.72rem; letter-spacing:.2em;
  color:var(--mute); display:flex; align-items:center; gap:10px; margin:0;
}
.label::before{ content:""; width:9px; height:9px; background:currentColor; flex:none; }
.display{
  font-weight:800; text-transform:uppercase; letter-spacing:-.01em; line-height:.94;
  margin:0; text-wrap:balance;
}
h1.display{ font-size:clamp(2.6rem,6.6vw,6rem); }
h2.display{ font-size:clamp(2rem,4.6vw,3.9rem); }
h3{ font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:1.25rem; line-height:1.15; margin:0; }
.lede{ font-size:clamp(1.1rem,1.6vw,1.35rem); line-height:1.5; max-width:34em; margin:0; color:var(--fg); }
p{ margin:0; max-width:62ch; }
.mute{ color:var(--mute); }

/* kvadraten ur logotypen, inuti text */
.sq{ display:inline-block; width:.62em; height:.62em; background:currentColor; vertical-align:baseline; margin-inline:.16em; transform:translateY(-.02em); }

/* ---------- topp ---------- */
.top{
  /* Över showreelens sticky-nav (z-index:40), annars glider den upp och
     lägger sig över headern när showreel-blocket tar slut. */
  position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--black) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--g2);
}
.top-in{ display:flex; align-items:center; gap:28px; height:66px; }
.brand{ margin-right:auto; display:flex; align-items:center; }
.brand img{ height:14px; width:auto; }
.nav{ display:flex; gap:26px; }
.nav a{
  text-decoration:none; font-weight:600; text-transform:uppercase; font-size:.72rem; letter-spacing:.18em;
  color:var(--g12); padding:8px 0; transition:color .18s;
}
.nav a:hover{ color:var(--white); }
.cta{
  text-decoration:none; font-weight:700; text-transform:uppercase; font-size:.72rem; letter-spacing:.18em;
  padding:11px 16px; border:1px solid var(--white); color:var(--white); transition:background .18s,color .18s;
}
.cta:hover,.cta.fill{ background:var(--white); color:var(--black); }
.cta.fill:hover{ background:var(--flat); border-color:var(--flat); }
.light .cta{ border-color:var(--black); color:var(--black); }
.light .cta:hover{ background:var(--black); color:var(--white); }
.burger{ display:none; font-weight:600; text-transform:uppercase; font-size:.72rem; letter-spacing:.18em; padding:8px 0; }

/* ---------- hero ---------- */
/* Heron fyller skärmen under toppmenyn, så showreelens snabbval börjar under vecket. */
.hero{ min-height:calc(100vh - 66px); min-height:calc(100svh - 66px); display:flex; align-items:center; padding:clamp(48px,6vw,96px) 0; }
.hero .wrap{ width:min(100% - 2*var(--gutter), var(--max)); }
.hero-in{ display:grid; grid-template-columns:minmax(0,11fr) minmax(0,1fr); }
.hero-text{ display:flex; flex-direction:column; gap:26px; }
.hero-text .lede{ color:var(--flat); }
.actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
/* tjänsterna som en rad, kvadraten ur logotypen som skiljetecken */
.tjanster{ font-weight:600; text-transform:uppercase; font-size:.78rem; letter-spacing:.2em; color:var(--g12); max-width:none; line-height:2; }
.tjanster .sq{ width:.45em; height:.45em; margin-inline:.6em; opacity:.55; }

/* kontakt */
/* Kontakten fyller skärmen under toppmenyn, så ett klick på Contact landar rent utan att förra kapitlet hänger med. */
.contact{ min-height:calc(100vh - 66px); min-height:calc(100svh - 66px); display:flex; align-items:center; padding:clamp(72px,10vw,150px) 0; scroll-margin-top:66px; }
.contact-in{ display:flex; flex-direction:column; gap:28px; }
.mail{ font-weight:800; text-transform:uppercase; letter-spacing:-.01em; line-height:1; font-size:clamp(1.6rem,5.2vw,4.4rem); text-decoration:none; word-break:break-all; transition:color .18s; }
.mail:hover{ color:var(--flat); }
.ways{ display:flex; flex-wrap:wrap; gap:12px 34px; }
.ways a{ text-decoration:none; font-weight:600; text-transform:uppercase; font-size:.78rem; letter-spacing:.18em; color:var(--g12); padding:6px 0; border-bottom:1px solid transparent; transition:color .18s,border-color .18s; }
.ways a:hover{ color:var(--white); border-color:var(--white); }

/* fot */
.foot{ border-top:1px solid var(--g2); padding:28px 0; }
.foot-in{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot img{ height:11px; width:auto; opacity:.8; }
.foot small{ color:var(--g1); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; }

/* avslöjning vid scroll */
.rv{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none; } }

/* ---------- responsivt ---------- */
@media (max-width:820px){
  .hero-in{ grid-template-columns:1fr; }
  .nav{ display:none; position:absolute; left:0; right:0; top:66px; flex-direction:column; gap:0; background:var(--black); border-bottom:1px solid var(--g2); padding:8px var(--gutter) 16px; }
  .nav.open{ display:flex; }
  .nav a{ padding:12px 0; border-top:1px solid var(--g2); }
  .burger{ display:block; }
  .top .cta{ display:none; }
}
@media (max-width:520px){
  .mail{ font-size:clamp(1.25rem,7.4vw,2rem); }
}