/* ============================================================
   BRANDING WEBDESIGN — PREMIUM V2
   Byggd enligt build-order DEL 1 + DEL 2 + DEL 3 (2026-09-11)
   ============================================================ */

:root {
  --white: #ffffff;
  --black: #080808;
  --soft-black: #151515;
  --body: #565656;
  --line: #d8d8d8;
  --light: #f8f8f6;
  --header-line: #e5e5e5;
  --red: #a91520;

  --serif: "Bodoni Moda", Didot, "Bodoni 72", "Times New Roman", serif;
  --sans: Inter, Arial, Helvetica, sans-serif;
}

/* RESET */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; }

button { cursor: pointer; }

section[id] { scroll-margin-top: 86px; }

/* 4. HEADER */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--header-line);
}

.header-inner {
  width: min(1360px, calc(100% - 60px));
  height: 72px;
  margin: auto;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.mini-brand {
  display: inline-flex;
  flex-direction: column;
  justify-self: start;
}

/* Silverkontur pa varumarkes-texterna (header + footer) — samma diskreta
   behandling som hero-SVG:n: paint-order=stroke maler stryken bakom fylningen. */
.mini-brand strong,
.mini-brand span,
.footer-logo strong,
.footer-logo span {
  -webkit-text-stroke: .6px #c9c9c9;
  paint-order: stroke fill;
}

.mini-brand strong {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 500;
  line-height: .9;
  letter-spacing: .02em;
  color: var(--black);
}

.mini-brand span {
  font-size: 6.5px;
  letter-spacing: .55em;
  padding-left: .55em;
  margin-top: 6px;
  color: var(--black);
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 42px;
}

.desktop-nav a {
  font-size: 12.5px;
  font-weight: 600;
  position: relative;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -9px;
  width: 0;
  height: 1px;
  background: var(--red);
  transition: width .25s ease;
}

.desktop-nav a:hover::after { width: 100%; }

.header-cta {
  justify-self: end;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 126px;
  height: 42px;

  background: var(--black);
  color: var(--white);

  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;

  border-radius: 2px;

  transition: background .2s ease;
}

.header-cta:hover { background: #202020; }

.menu-button {
  display: none;
  border: 0;
  background: transparent;
  font-size: 21px;
  color: var(--black);
}

/* MOBIL MENY */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--white);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);

  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-menu-close {
  position: absolute;
  top: 18px;
  right: 18px;
  border: 0;
  background: transparent;
  font-size: 21px;
  color: var(--black);
  padding: 12px;
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.mobile-menu-nav a {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
}

.mobile-menu-cta {
  margin-top: 6px;
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 14px 32px;
  border-radius: 2px;
}

.mobile-menu-stars {
  color: var(--red);
  font-size: 13px;
  letter-spacing: .3em;
}

/* 5. HERO */

.hero {
  position: relative;
  min-height: 600px;
  overflow: hidden;

  display: grid;
  grid-template-columns:
    minmax(220px,.9fr)
    minmax(650px,2.2fr)
    minmax(190px,.8fr);

  align-items: center;

  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.hero-center {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 68px 10px 54px;
}

/* 6. STJÄRNOR */

.star-decoration {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  margin-bottom: 23px;
}

.star-decoration > i {
  width: 82px;
  height: 1px;
  background: var(--soft-black);
}

.star-decoration div {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--red);
}

.star-decoration span {
  font-size: 17px;
  line-height: 1;
}

.star-decoration .main-star {
  font-size: 28px;
}

/* 7–9. BRANDING WORDMARK (SVG + gravyrlinjer) */

.branding-svg {
  width: min(780px, 60vw);
  margin: 0 auto;
  overflow: visible;
  display: block;
}

.branding-svg-text {
  font-family: var(--serif);
  font-size: 200px;
  font-weight: 500;
  letter-spacing: -9px;
}

.branding-fill {
  fill: var(--black);

  /* Finjustering (order 2026-09-11): mycket tunn silverkontur runt ytterformen.
     paint-order=stroke maler fylningen PA stalllet -> ca 0.65px synlig utsida,
     insidan haller ren svart och de vita gravyrlinjerna ororda. Ej glansigt, ej krom. */
  stroke: #c9c9c9;
  stroke-width: 1.3px;
  paint-order: stroke fill;
  vector-effect: non-scaling-stroke;
}

.engraving-lines line {
  stroke: rgba(255,255,255,.94);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* 10. WEBBDESIGN */

.webdesign-mark {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 27px;
  margin-top: 14px;
}

.webdesign-mark i {
  width: 70px;
  height: 1px;
  background: var(--black);
}

.webdesign-mark strong {
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 400;
  letter-spacing: .36em;
  padding-left: .36em;
  color: var(--black);
}

/* 11. HERO TEXTER */

.hero-kicker {
  margin: 30px 0 0;

  font-size: 13.5px;
  letter-spacing: .24em;
  font-weight: 500;
}

.hero-copy {
  max-width: 590px;
  margin: 20px auto 0;

  font-size: 15.5px;
  line-height: 1.7;
  color: var(--body);
}

/* 12. HERO CTA */

.hero-buttons {
  margin-top: 29px;

  display: flex;
  justify-content: center;
  gap: 14px;
}

.hero-btn {
  min-width: 184px;
  height: 50px;
  padding: 0 26px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;

  border-radius: 2px;

  transition: background .2s ease, color .2s ease;
}

.hero-btn-dark {
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--black);
}

.hero-btn-dark:hover { background: #202020; }

.hero-btn-light {
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--black);
}

.hero-btn-light:hover {
  background: var(--black);
  color: var(--white);
}

.hero-line {
  width: 70px;
  height: 1px;
  margin: 36px auto 20px;
  background: var(--black);
}

.hero-values {
  margin: 0;
  font-size: 10px;
  letter-spacing: .43em;
  color: var(--body);
}

/* 13–14. LAPTOP + TELEFON */

.hero-laptop,
.hero-phone {
  position: relative;
  z-index: 1;
  align-self: end;
}

.hero-laptop {
  transform: translateX(-4%) translateY(4%) rotate(-1.5deg);
}

.hero-phone {
  transform: translateX(4%) translateY(2%) rotate(1.5deg);
  display: flex;
  justify-content: flex-end;
}

.laptop-mock {
  width: min(360px, 26vw);
  min-height: 250px;
  padding: 50px 32px;

  background: linear-gradient(135deg, #f0f0ee, #dcdcd8);
  border: 10px solid #111;
  border-radius: 10px;

  box-shadow: 0 40px 70px rgba(0,0,0,.16);

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.laptop-mock span,
.phone-mock span {
  font-size: 8.5px;
  letter-spacing: .3em;
  color: var(--body);
}

.laptop-mock strong {
  margin-top: 40px;
  max-width: 190px;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--black);
}

.phone-mock {
  width: 160px;
  min-height: 330px;
  padding: 36px 20px;

  background: linear-gradient(180deg, #ffffff, #e8e8e5);
  border: 8px solid #111;
  border-radius: 32px;

  box-shadow: 0 35px 70px rgba(0,0,0,.2);

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.phone-mock strong {
  margin-top: 50px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.12;
  color: var(--black);
}

/* 16–18. TJÄNSTER */

.services {
  width: min(1360px,100%);
  margin: auto;

  display: grid;
  grid-template-columns: repeat(4,1fr);

  border-bottom: 1px solid var(--line);
}

.services article {
  min-height: 285px;
  padding: 46px 46px 40px;
  border-right: 1px solid var(--line);
}

.services article:last-child { border-right: none; }

.service-no {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  font-weight: 700;
  color: var(--black);
}

.service-no i {
  width: 38px;
  height: 1px;
  background: var(--black);
}

.services h2 {
  margin: 28px 0 13px;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 500;
}

.services p {
  min-height: 72px;
  margin: 0;
  max-width: 245px;
  color: var(--body);
  font-size: 13px;
  line-height: 1.55;
}

.services a {
  display: inline-block;
  margin-top: 22px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--black);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  transition: color .2s ease, border-color .2s ease;
}

.services a:hover { color: var(--red); border-bottom-color: var(--red); }

/* 19–23. UTVALDA PROJEKT */

.mini-red-stars {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--red);
  font-size: 13px;
  letter-spacing: .1em;
}

.mini-red-stars i {
  width: 55px;
  height: 1px;
  margin-left: 8px;
  background: var(--red);
}

.projects {
  width: min(1360px,100%);
  min-height: 470px;
  margin: auto;

  display: grid;
  grid-template-columns: 34% 66%;

  border-bottom: 1px solid var(--line);
}

.projects-copy {
  padding: 68px 58px;
  background: #fcfcfb;
}

.projects h2 {
  margin: 16px 0;
  font-family: var(--serif);
  font-size: 44px;
  line-height: .95;
  font-weight: 500;
}

.projects-copy p {
  max-width: 330px;
  color: var(--body);
  font-size: 14px;
  line-height: 1.65;
}

.projects-cta {
  display: inline-block;
  margin-top: 26px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--black);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  transition: color .2s ease, border-color .2s ease;
}

.projects-cta:hover { color: var(--red); border-bottom-color: var(--red); }

.projects-visual {
  position: relative;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;

  padding: 48px 38px 40px;

  background: #f4f4f1;
}

.project-laptop {
  width: 62%;
  max-width: 640px;
}

.project-screen {
  padding: 9px;
  border: 10px solid #111;
  border-radius: 9px 9px 4px 4px;
  background: var(--white);
}

.project-image {
  position: relative;
  aspect-ratio: 16/9;
  padding: 35px;
  background: linear-gradient(145deg, #e6e5e1, #9c9b97);

  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.project-slide {
  position: absolute;
  inset: 35px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity .6s ease;
}

.project-slide.active { opacity: 1; }

.concept-label {
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--black);
}

.project-slide strong {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1;
  font-weight: 400;
  color: var(--black);
}

.project-slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-top: 18px;
}

.slider-arrow {
  border: 0;
  background: transparent;
  font-size: 20px;
  color: var(--black);
  padding: 4px 10px;
  line-height: 1;
}

.slider-arrow:hover { color: var(--red); }

.slider-dots {
  display: flex;
  gap: 9px;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 0;
  background: #d8d8d8;
  padding: 0;
  transition: background .3s ease;
}

.dot.active { background: var(--red); }

.project-phone {
  align-self: flex-end;

  width: 118px;
  min-height: 250px;
  padding: 26px 15px;

  background: var(--white);
  border: 7px solid #111;
  border-radius: 24px;

  box-shadow: 0 22px 45px rgba(0,0,0,.16);

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.project-phone span {
  font-size: 7.5px;
  letter-spacing: .2em;
  color: var(--body);
}

.project-phone strong {
  margin-top: 34px;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--black);
}

.project-decor {
  align-self: flex-start;

  width: 72px;
  padding: 22px 12px;

  border: 1px solid var(--black);
  background: var(--white);

  font-size: 11px;
  letter-spacing: .25em;
  color: var(--red);
  text-align: center;
}

/* 24–27. MÄNNISKA + AI */

.human-ai {
  width: min(1360px,100%);
  min-height: 430px;
  margin: auto;

  display: grid;
  grid-template-columns: 1fr 1fr;

  border-bottom: 1px solid var(--line);
}

.human-copy {
  padding: 66px 68px;
}

.human-ai h2 {
  margin: 16px 0;
  font-family: var(--serif);
  font-size: 44px;
  line-height: .95;
  font-weight: 500;
}

.human-ai h3 {
  margin: 0 0 23px;
  font-size: 9px;
  letter-spacing: .15em;
  font-weight: 700;
}

.human-copy p {
  max-width: 530px;
  color: var(--body);
  font-size: 13px;
  line-height: 1.68;
}

.human-rule {
  width: 60px;
  height: 1px;
  margin-top: 30px;
  background: var(--black);
}

.human-micro {
  display: block;
  margin-top: 18px;
  font-size: 9px;
  letter-spacing: .24em;
  color: var(--body);
}

.human-image {
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(rgba(8,8,8,.14), rgba(8,8,8,.38)),
    url("images/human-ai-office.jpg") center / cover no-repeat,
    linear-gradient(140deg, #777, #222);
}

.human-poster {
  position: absolute;
  right: 54px;
  top: 56px;

  width: 236px;
  padding: 30px;

  background: rgba(255,255,255,.95);
}

.human-poster span {
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--black);
}

.human-poster strong {
  display: block;
  margin-top: 16px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--black);
}

/* 28–29. PROCESS */

.process {
  width: min(1360px,100%);
  margin: auto;
  padding: 56px 60px 50px;
  border-bottom: 1px solid var(--line);
}

.process-heading {
  display: flex;
  align-items: center;
  gap: 18px;
}

.process-heading h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
}

.process-grid {
  margin-top: 38px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
}

.process-grid article {
  min-height: 115px;
  padding-right: 34px;
  margin-right: 34px;
  border-right: 1px solid var(--line);
}

.process-grid article:last-child {
  border-right: none;
  margin-right: 0;
}

.process-no {
  font-size: 11px;
  font-weight: 700;
}

.process-grid h3 {
  margin: 10px 0 7px;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
}

.process-grid p {
  margin: 0;
  color: var(--body);
  font-size: 12px;
  line-height: 1.55;
}

/* 31–33. OM OSS */

.about {
  width: min(1360px,100%);
  min-height: 390px;
  margin: auto;

  display: grid;
  grid-template-columns: 44% 56%;

  border-bottom: 1px solid var(--line);
}

.about-image {
  position: relative;
  min-height: 390px;
  overflow: hidden;

  background:
    linear-gradient(rgba(20,20,20,.12), rgba(20,20,20,.3)),
    url("images/about-office.jpg") center / cover no-repeat,
    linear-gradient(145deg, #bdbcb7, #333);
}

.about-image-copy {
  position: absolute;
  right: 48px;
  top: 62px;
  color: var(--white);
  text-align: right;
}

.about-image-copy span {
  display: block;
  font-size: 9.5px;
  letter-spacing: .24em;
}

.about-image-copy strong {
  display: block;
  margin-top: 12px;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.05;
}

.about-copy {
  padding: 65px 68px;
}

.about-copy h2 {
  margin: 16px 0;
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 500;
}

.about-copy p {
  max-width: 540px;
  color: var(--body);
  font-size: 13px;
  line-height: 1.68;
}

.about-cta {
  display: inline-block;
  margin-top: 24px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--black);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  transition: color .2s ease, border-color .2s ease;
}

.about-cta:hover { color: var(--red); border-bottom-color: var(--red); }

/* 34–35. KONTAKTA OSS */

.contact {
  min-height: 305px;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  color: var(--white);

  background:
    linear-gradient(
      rgba(0,0,0,.78),
      rgba(0,0,0,.84)
    ),
    url("images/contact-dark.jpg") center / cover no-repeat,
    linear-gradient(135deg, #555, #080808);
}

.contact-inner {
  padding: 48px 20px;
}

.contact small {
  font-size: 8px;
  letter-spacing: .25em;
}

.contact h2 {
  margin: 11px 0 8px;
  font-family: var(--serif);
  font-size: 67px;
  font-weight: 400;
}

.contact p {
  margin: 0;
  color: rgba(255,255,255,.75);
  font-size: 12px;
}

.contact-btn {
  min-width: 145px;
  height: 44px;
  margin-top: 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;

  background: var(--white);
  color: var(--black);

  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;

  border-radius: 2px;

  transition: transform .2s ease;
}

.contact-btn:hover { transform: translateY(-2px); }

/* TELEFON I KONTAKTSEKTIONEN */

.contact-phone {
  margin: 24px 0 0;
  color: rgba(255,255,255,.75);
}

.contact-phone span {
  display: block;
  font-size: 8px;
  letter-spacing: .25em;
  margin-bottom: 7px;
}

.contact-phone a {
  color: var(--white);
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: .06em;
  border-bottom: 1px solid rgba(255,255,255,.4);
  padding-bottom: 2px;
  transition: border-color .2s ease;
}

.contact-phone a:hover { border-bottom-color: var(--white); }

/* 36. FOOTER */

.footer {
  min-height: 100px;
  padding: 26px 60px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;

  background: var(--white);
}

.footer-logo {
  display: flex;
  flex-direction: column;
  width: max-content;
}

.footer-logo strong {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
}

.footer-logo span {
  font-size: 6.5px;
  letter-spacing: .5em;
  margin-top: 4px;
}

.footer nav {
  display: flex;
  gap: 27px;
  font-size: 11px;
}

.footer p {
  justify-self: end;
  margin: 0;
  color: var(--body);
  font-size: 10px;
}

.footer-phone {
  color: var(--black);
  border-bottom: 1px solid var(--black);
  transition: color .2s ease, border-color .2s ease;
}

.footer-phone:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* 37. KONTAKTFORMULÄR */

.quote-section {
  width: min(1200px, calc(100% - 60px));
  margin: auto;
  padding: 90px 0;
}

.quote-intro {
  max-width: 700px;
  margin-bottom: 48px;
}

.quote-intro h2 {
  margin: 16px 0;
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 500;
}

.quote-intro p {
  color: var(--body);
  font-size: 14px;
}

.quote-form {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 30px;
}

.quote-form label {
  display: flex;
  flex-direction: column;
  gap: 10px;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.quote-form input,
.quote-form select,
.quote-form textarea {
  width: 100%;
  padding: 17px 5px;
  border: 0;
  border-bottom: 1px solid var(--black);
  background: transparent;
  outline: none;

  font-size: 15px;
  font-weight: 400;
  text-transform: none;
}

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  border-bottom-color: var(--red);
}

.full-width { grid-column: 1 / -1; }

.submit-button {
  width: auto;
  min-width: 184px;
}

.form-feedback {
  display: none;
  padding: 16px 20px;
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: none;
}

.form-feedback.show { display: block; }

.form-success {
  background: var(--light);
  border-left: 2px solid var(--black);
}

.form-error {
  border-left: 2px solid var(--red);
  color: var(--red);
}

/* 44. ANIMATION — extremt diskret */

@media (prefers-reduced-motion: no-preference) {

  .hero-center,
  .services article,
  .projects-copy,
  .human-copy {
    animation: fadeUp .7s ease both;
  }

  .services article:nth-child(2) { animation-delay: .06s; }
  .services article:nth-child(3) { animation-delay: .12s; }
  .services article:nth-child(4) { animation-delay: .18s; }

}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 43. RESPONSIVE */

@media (max-width: 1050px) {

  .hero {
    grid-template-columns: 1fr;
  }

  .hero-laptop,
  .hero-phone {
    display: none;
  }

  .branding-svg {
    width: min(760px, 90vw);
  }

  .services {
    grid-template-columns: repeat(2,1fr);
  }

  .services article {
    border-bottom: 1px solid var(--line);
  }

  .services article:nth-child(even) { border-right: none; }

  .projects {
    grid-template-columns: 1fr;
  }

  .human-ai {
    grid-template-columns: 1fr;
  }

  .about {
    grid-template-columns: 1fr;
  }

  .process {
    padding: 50px 40px 44px;
  }

}

@media (max-width: 720px) {

  .header-inner {
    width: calc(100% - 34px);
    height: 66px;
    grid-template-columns: 1fr auto;
  }

  .desktop-nav,
  .header-cta {
    display: none;
  }

  .menu-button {
    display: block;
  }

  .mini-brand strong { font-size: 20px; }

  .hero {
    min-height: calc(100svh - 66px);
  }

  .hero-center {
    padding: 58px 18px 55px;
  }

  .star-decoration {
    gap: 14px;
  }

  .star-decoration > i {
    width: 48px;
  }

  .star-decoration span {
    font-size: 14px;
  }

  .star-decoration .main-star {
    font-size: 23px;
  }

  .branding-svg {
    width: 100%;
  }

  .branding-svg-text {
    font-size: 180px;
    letter-spacing: -10px;
  }

  .webdesign-mark {
    gap: 11px;
    margin-top: 10px;
  }

  .webdesign-mark i {
    width: 28px;
  }

  .webdesign-mark strong {
    font-size: 16px;
    letter-spacing: .27em;
    padding-left: .27em;
  }

  .hero-kicker {
    margin-top: 25px;
    font-size: 9px;
    line-height: 1.7;
    letter-spacing: .17em;
  }

  .hero-copy {
    max-width: 370px;
    font-size: 13px;
  }

  .hero-buttons {
    flex-direction: column;
    width: min(340px,100%);
    margin-left: auto;
    margin-right: auto;
  }

  .hero-btn {
    width: 100%;
  }

  .services {
    grid-template-columns: 1fr;
  }

  .services article {
    min-height: 0;
    padding: 38px 24px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .services article:last-child { border-bottom: none; }

  .services p { min-height: 0; }

  .projects-copy,
  .human-copy,
  .about-copy {
    padding: 55px 25px;
  }

  .projects h2,
  .human-ai h2,
  .about h2 {
    font-size: 38px;
  }

  .quote-intro h2 { font-size: 38px; }

  .process {
    padding: 50px 24px;
  }

  .process-grid {
    grid-template-columns: 1fr;
  }

  .process-grid article {
    min-height: 0;
    margin: 0;
    padding: 24px 0;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .process-grid article:last-child { border-bottom: none; }

  .about {
    grid-template-columns: 1fr;
  }

  .about-image {
    min-height: 320px;
  }

  .about-image-copy {
    right: 25px;
    top: 45px;
  }

  .human-image {
    min-height: 380px;
  }

  .human-poster {
    right: 25px;
    top: 40px;
    width: 210px;
  }

  .contact h2 {
    font-size: 48px;
  }

  .quote-section {
    width: calc(100% - 40px);
    padding: 66px 0;
  }

  .quote-form {
    grid-template-columns: 1fr;
  }

  .full-width { grid-column: auto; }

  .footer {
    padding: 36px 25px;
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .footer-logo {
    align-items: center;
  }

  .footer p { justify-self: center; }

  .footer nav {
    flex-wrap: wrap;
    justify-content: center;
  }

}

@media (max-width: 420px) {

  .branding-svg-text {
    font-size: 172px;
  }

  .star-decoration .main-star { font-size: 21px; }

  .star-decoration span { font-size: 13px; }

}


/* ---- Språkväljare ---- */
.lang-switch{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;}
.lang-switch a{color:#666B73;text-decoration:none;transition:color .25s ease;}
.lang-switch a:hover{color:#111;}
.lang-switch a[aria-current="page"]{color:#D71920;}
.lang-switch-mobile{justify-content:center;margin-top:22px;font-size:12px;gap:18px;}
@media (max-width:720px){.site-header .lang-switch{display:none;}}