/* ==========================================================
   Reset
   ========================================================== */
   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }
   html,
   body,
   h1,
   h2,
   h3,
   p,
   ul,
   ol,
   li,
   figure {
     margin: 0;
     padding: 0;
   }
   a,
   button {
     text-decoration: none;
     border: none;
     background: none;
     font: inherit;
     color: inherit;
     cursor: pointer;
   }
   ul,
   ol {
     list-style: none;
   }
   img {
     display: block;
     max-width: 100%;
   }
   body {
     font-family: var(--font-body);
     color: var(--color-text);
     background: var(--color-white);
     -webkit-font-smoothing: antialiased;
     overflow-x: hidden;
   }
   main {
     transition: margin-left 0.2s ease;
   }
   
   .btn {
     display: inline-block;
     background: var(--color-olive);
     color: var(--color-white);
     font-size: 12px;
     font-weight: 400;
     padding: 0.5rem 0.875rem;
     border-radius: 10px;
     transition: background-color 0.2s ease, font-weight 0.2s ease, transform 0.2s ease;
   }
   .btn:hover,
   .btn:focus-visible {
     background-color: #2e4d0a;
     font-weight: 700;
     transform: translateY(-2px);
   }
   a:focus-visible,
   button:focus-visible {
     outline: 2px solid var(--color-olive);
     outline-offset: 3px;
   }
   
   /* ==========================================================
      Motion — page-load intro + scroll reveal
      ========================================================== */
   .load-in {
     opacity: 0;
     transform: translateY(18px);
     animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
     animation-delay: var(--delay, 0s);
   }
   [data-reveal] {
     opacity: 0;
     transform: translateY(24px);
     transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
       transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
     transition-delay: var(--reveal-delay, 0s);
   }
   [data-reveal].is-visible {
     opacity: 1;
     transform: translateY(0);
   }
   @keyframes fade-up {
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
   
   .hero__bg {
     animation: hero-breathe 16s ease-in-out infinite;
     animation-delay: 1s;
   }
   @keyframes hero-breathe {
     0%,
     100% {
       transform: scale(1);
     }
     50% {
       transform: scale(1.06);
     }
   }
   
   .process__thumb {
     transition: transform 0.35s ease;
   }
   .process__step:hover .process__thumb {
     transform: scale(1.04);
   }
   
   .sidebar__social img,
   .sidebar__logo img,
   .mobile-menu__social img {
     transition: transform 0.2s ease, opacity 0.2s ease;
   }
   .sidebar__social a:hover img,
   .sidebar__logo:hover img,
   .mobile-menu__social a:hover img {
     transform: translateY(-2px);
     opacity: 0.75;
   }
   .sidebar__hamburger:hover span {
     opacity: 0.6;
   }
   
   @media (prefers-reduced-motion: reduce) {
     .load-in,
     [data-reveal] {
       animation: none !important;
       transition: none !important;
       opacity: 1 !important;
       transform: none !important;
     }
     .hero__bg,
     .orbit-badge__svg {
       animation: none !important;
     }
     .process {
       clip-path: none !important;
       transition: none !important;
     }
   }
   
   /* ==========================================================
      Sidebar nav — vertical rail (desktop) / top bar (tablet+mobile)
      ========================================================== */
   .sidebar {
     position: fixed;
     inset: 1.25rem auto 1.25rem 1rem;
     width: 64px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 2rem;
     padding-block: 1.5rem;
     border-radius: 20px;
     background: rgba(217, 217, 217, 0.21);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     z-index: 100;
   }
   .sidebar__logo img {
     width: 36px;
     height: 36px;
   }
   
   .sidebar__hamburger {
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 6px;
     width: 26px;
     height: 18px;
     margin-block: auto;
     padding: 0;
     z-index: 110;
   }
   .sidebar__hamburger span {
     display: block;
     height: 1px;
     background: var(--color-text);
     transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
   }
   .sidebar__hamburger span:nth-child(1) {
     width: 100%;
   }
   .sidebar__hamburger span:nth-child(2) {
     width: 60%;
     align-self: flex-start;
   }
   .sidebar__hamburger[aria-expanded="true"] span {
     width: 100%;
   }
   .sidebar__hamburger[aria-expanded="true"] span:nth-child(1) {
     transform: translateY(3.5px) rotate(45deg);
   }
   .sidebar__hamburger[aria-expanded="true"] span:nth-child(2) {
     transform: translateY(-3.5px) rotate(-45deg);
   }
   
   .sidebar__social {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1.5rem;
   }
   .sidebar__social img {
     width: 20px;
     height: 20px;
   }
   
   /* Slide-in menu — enters from the left edge of the screen */
   .mobile-menu {
     position: fixed;
     inset: 0;
     background: var(--color-black);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     padding: 6rem var(--container-pad) 3rem;
     z-index: 90;
     transform: translateX(-100%);
     transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
   }
   .mobile-menu.is-open {
     transform: translateX(0);
   }
   .mobile-menu__links {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
   }
   .mobile-menu__links a {
     color: var(--color-white);
     font-family: var(--font-display);
     font-size: clamp(2rem, 6vw, 4rem);
     opacity: 0;
     transform: translateX(-16px);
     transition: opacity 0.4s ease, transform 0.4s ease;
     transition-delay: 0.1s;
   }
   .mobile-menu.is-open .mobile-menu__links a {
     opacity: 1;
     transform: translateX(0);
   }
   .mobile-menu.is-open .mobile-menu__links a:nth-child(1) { transition-delay: 0.35s; }
   .mobile-menu.is-open .mobile-menu__links a:nth-child(2) { transition-delay: 0.45s; }
   .mobile-menu.is-open .mobile-menu__links a:nth-child(3) { transition-delay: 0.55s; }
   .mobile-menu.is-open .mobile-menu__links a:nth-child(4) { transition-delay: 0.65s; }
   .mobile-menu__links a:hover,
   .mobile-menu__links a:focus-visible {
     color: var(--color-text-on-dark-faint);
   }
   
   /* Social icons: shown inside the slide-in menu only on tablet/mobile,
      since the desktop rail already shows its own copy. */
   .mobile-menu__social {
     display: none;
     gap: 1.75rem;
   }
   .mobile-menu__social img {
     width: 22px;
     height: 22px;
     filter: invert(1);
   }
   
   /* ==========================================================
      Orbit badge — rotating circular text behind the photo circles
      ========================================================== */
   .orbit-badge {
     position: absolute;
     left: -10%;
     bottom: -10%;
     width: 62%;
     aspect-ratio: 1 / 1;
     z-index: 2;
     filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
   }
   .orbit-badge--small {
     width: 58%;
   }
   .about__media .orbit-badge {
     left: 50%;
     bottom: auto;
     top: 50%;
     transform: translate(-50%, -50%);
   }
   .orbit-badge--large {
     width: 70%;
   }
   .orbit-badge svg {
     width: 100%;
     height: 100%;
     animation: orbit-spin 24s linear infinite;
   }
   @keyframes orbit-spin {
     to {
       transform: rotate(360deg);
     }
   }
   .orbit-badge__text {
     font-family: var(--font-body);
     font-size: 8.5px;
     letter-spacing: 1px;
     fill: var(--color-text);
     text-transform: uppercase;
   }
   
   /* ==========================================================
      Hero — full-bleed photo with overlaid heading, lead + CTA
      ========================================================== */
   .hero {
     position: relative;
     display: flex;
     align-items: flex-end;
     min-height: 100svh;
     overflow: hidden;
   }
   .hero__bg {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: 0;
   }
   .hero__overlay {
     position: absolute;
     inset: 0;
     z-index: 1;
     background: linear-gradient(
         90deg,
         rgba(0, 0, 0, 0.6) 0%,
         rgba(0, 0, 0, 0.25) 40%,
         rgba(0, 0, 0, 0) 65%
       ),
       linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 45%),
       linear-gradient(to bottom, transparent 88%, var(--color-white) 100%);
   }
   .hero__content {
     position: relative;
     z-index: 2;
     max-width: 46rem;
     margin-left: calc(max(0px, (100% - var(--container-max)) / 2) + var(--container-pad));
     padding-right: var(--container-pad);
     padding-bottom: clamp(3rem, 8vw, 6rem);
   }
   .hero__heading {
     font-family: var(--font-display);
     font-weight: 400;
     font-size: var(--fs-hero);
     line-height: 1.2;
     color: var(--color-white);
   }
   .hero__lead {
     font-family: var(--font-body);
     font-size: var(--fs-body);
     line-height: 1.6;
     color: rgba(255, 255, 255, 0.9);
     max-width: 34rem;
     margin-top: 1.5rem;
   }
   .hero__content .btn {
     margin-top: 2.5rem;
   }
   
   /* ==========================================================
      About
      ========================================================== */
   .about {
     display: grid;
     gap: 2.5rem;
     align-items: center;
     padding: var(--section-space-lg) var(--container-pad) var(--section-space);
     max-width: var(--container-max);
     margin-inline: auto;
   }
   .about__media {
     position: relative;
     width: 100%;
     max-width: 360px;
     aspect-ratio: 1 / 1;
     margin-inline: auto;
   }
   .about__image {
     position: relative;
     z-index: 1;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     object-fit: cover;
     filter: brightness(0.85);
   }
   .about__text {
     color: var(--color-text-muted);
     font-size: var(--fs-body);
     line-height: 1.6;
     max-width: 44rem;
     margin-bottom: 0px;
   }
   .about .btn {
     justify-self: start;
     margin-top: -2.5rem;
   }
   
   /* ==========================================================
      Services ("Vad vi gör")
      ========================================================== */
   .services {
     padding: var(--section-space) var(--container-pad) var(--section-space);
     max-width: var(--container-max);
     margin-inline: auto;
     display: grid;
     gap: 2.5rem;
   }
   .services__intro {
     max-width: 34rem;
   }
   .services__heading {
     font-family: var(--font-display);
     font-weight: 400;
     font-size: var(--fs-h2);
     line-height: 1.2;
     margin-bottom: 1.5rem;
   }
   .services__text {
     color: var(--color-text);
     font-size: var(--fs-body);
     line-height: 1.6;
   }
   .services__list {
     display: flex;
     flex-direction: column;
     gap: 0;
     max-width: 34rem;
   }
   .service {
     padding-block: 1.75rem;
   }
   .service__title {
     margin: 0;
   }
   .service__toggle {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     font-family: var(--font-label);
     font-weight: 500;
     font-size: var(--fs-label);
     text-align: left;
   }
   .service__icon {
     position: relative;
     width: 18px;
     height: 18px;
     flex-shrink: 0;
   }
   .service__icon::before,
   .service__icon::after {
     content: "";
     position: absolute;
     background: var(--color-text);
     transition: transform 0.3s ease;
   }
   .service__icon::before {
     left: 0;
     top: 50%;
     width: 100%;
     height: 1px;
     transform: translateY(-50%);
   }
   .service__icon::after {
     top: 0;
     left: 50%;
     width: 1px;
     height: 100%;
     transform: translateX(-50%);
   }
   .service__toggle[aria-expanded="true"] .service__icon::after {
     transform: translateX(-50%) rotate(90deg);
     opacity: 0;
   }
   
   .service__panel {
     display: grid;
     grid-template-rows: 0fr;
     transition: grid-template-rows 0.4s ease;
   }
   .service__panel > * {
     overflow: hidden;
   }
   .service[data-open="true"] .service__panel {
     grid-template-rows: 1fr;
   }
   .service__panel-text {
     color: var(--color-text-muted);
     font-size: var(--fs-body);
     line-height: 1.6;
     padding-top: 1.25rem;
   }
   .service__rule {
     border: none;
     border-top: 1px solid var(--color-text);
     margin-top: 1.75rem;
   }
   
   /* ==========================================================
      Process + CTA + Footer (dark section)
      ========================================================== */
   .process {
     background: var(--color-black);
     color: var(--color-white);
     margin-top: var(--section-space);
     padding-block: var(--section-space) 3rem;
   }
   /* Hidden state is opt-in via JS (.process--wipe), never the default —
      so if JS fails to run for any reason, this section is just visible,
      no animation, instead of permanently stuck invisible. */
   .process.process--wipe {
     clip-path: inset(0 0 100% 0);
     transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1);
   }
   .process.process--wipe.is-revealed {
     clip-path: inset(0 0 0% 0);
   }
   .process__heading {
     font-family: var(--font-display);
     font-weight: 400;
     font-size: var(--fs-h2);
     line-height: 1.2;
     max-width: var(--container-max);
     margin-inline: auto;
     padding-inline: var(--container-pad);
     margin-bottom: 3.5rem;
   }
   
   .process__steps {
     display: grid;
     gap: 2.5rem;
     justify-items: center;
     max-width: var(--container-max);
     margin: 0 auto var(--dark-section-space);
     padding-inline: var(--container-pad);
   }
   .process__step {
     position: relative;
     width: 100%;
     max-width: 280px;
   }
   .process__step::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: 1;
     pointer-events: none;
     background: linear-gradient(
       rgba(0, 0, 0, 0) 20%,
       rgba(0, 0, 0, 0.6) 48%,
       rgba(0, 0, 0, 0) 76%
     );
   }
   .process__number {
     position: absolute;
     top: 0.75rem;
     left: 0.75rem;
     z-index: 2;
     font-family: var(--font-display);
     font-weight: 700;
     font-size: 2rem;
     line-height: 1;
     color: var(--color-olive);
   }
   .process__thumb {
     width: 100%;
     max-width: 280px;
     aspect-ratio: 1 / 1;
     object-fit: cover;
     display: block;
   }
   .process__thumb--placeholder {
     background: #d9d9d9;
   }
   .process__text {
     position: absolute;
     top: 50%;
     left: -0.75rem;
     width: calc(100% + 3rem);
     transform: translateY(-50%);
     z-index: 2;
     font-family: var(--font-display);
     font-size: 1.75rem;
     line-height: 1.3;
     color: var(--color-white);
   }
   
   .cta {
     text-align: center;
     max-width: 60rem;
     margin: 0 auto var(--dark-section-space);
     padding-inline: var(--container-pad);
   }
   .cta__heading {
     font-family: var(--font-display);
     font-weight: 700;
     font-size: var(--fs-cta);
     line-height: 1.15;
     margin-bottom: 1.5rem;
   }
   .cta__text {
     color: var(--color-text-on-dark-muted);
     font-size: var(--fs-body);
     line-height: 1.5;
     max-width: 40rem;
     margin: 0 auto 2rem;
   }
   
   .site-footer {
     display: grid;
     gap: 2.5rem;
     max-width: var(--container-max);
     margin-inline: auto;
     padding-top: 4rem;
     padding-inline: var(--container-pad);
     border-top: 1px solid rgba(255, 255, 255, 0.15);
   }
   .site-footer__logo {
     height: 5rem;
     width: auto;
     margin-bottom: 1.5rem;
   }
   .site-footer__copy {
     font-size: var(--fs-small);
     color: var(--color-white);
   }
   .site-footer__nav {
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
     font-family: "Space Grotesk", sans-serif;
     font-weight: 300;
     font-size: var(--fs-small);
   }
   .site-footer__nav a {
     color: var(--color-white);
     width: fit-content;
   }
   .site-footer__nav a:hover,
   .site-footer__nav a:focus-visible {
     color: var(--color-text-on-dark-faint);
   }
   
   /* ==========================================================
      Breakpoints
      ========================================================== */
   
   /* Tablet and up */
   @media (min-width: 768px) {
     .about {
       grid-template-columns: 0.8fr 1.2fr;
       align-items: start;
     }
     .about__media {
       margin-inline: 0;
       grid-row: 1 / 3;
     }
     .about .btn {
       grid-column: 2;
     }
   
     .services {
       grid-template-columns: 1fr 1fr;
       align-items: start;
     }
     .services__list {
       margin-left: auto;
     }
   
     .process__steps {
       grid-template-columns: repeat(3, 1fr);
     }
   
     .site-footer {
       grid-template-columns: 1.5fr 1fr;
       align-items: start;
     }
     .site-footer__nav {
       justify-self: end;
     }
   }
   
   /* Desktop: vertical rail nav takes over from the top bar */
   @media (min-width: 1024px) {
     :root {
       /* Backgrounds now bleed full-width behind the floating nav pill,
          so content needs its own guaranteed clearance from it here. */
       --container-pad: clamp(6.5rem, 4vw, 8rem);
     }
     .sidebar {
       flex-direction: column;
       inset: 1.25rem auto 1.25rem 1rem;
       width: 64px;
       height: auto;
       border-radius: 20px;
       padding-block: 1.5rem;
       padding-inline: 0;
     }
     .sidebar__social {
       display: flex;
     }
     .mobile-menu {
       inset: 0 0 0 0;
     }
     .mobile-menu__social {
       display: none !important;
     }
   
     .hero {
       min-height: 100svh;
     }
     .about {
       grid-template-columns: 0.6fr 1fr;
       padding-block: var(--section-space-lg) var(--section-space);
     }
   }
   
   /* Below desktop: rail becomes a floating top pill, same glass look as desktop */
   @media (max-width: 1023px) {
     .sidebar {
       flex-direction: row;
       align-items: center;
       justify-content: space-between;
       inset: 1rem 1rem auto 1rem;
       width: auto;
       height: var(--navbar-height);
       padding-inline: 1.25rem;
       padding-block: 0;
       border-radius: 20px;
       gap: 0;
     }
     .sidebar__hamburger {
       margin-block: 0;
     }
     .sidebar__social {
       display: none;
     }
   
     main {
       margin-left: 0;
     }
     .contact-page {
       padding-top: calc(var(--navbar-height) + 2rem);
     }
   
     .mobile-menu {
       inset: 0;
     }
     .mobile-menu__social {
       display: flex;
     }
   }
   
   /* ==========================================================
      Contact page (contact.html)
      ========================================================== */
   .contact-page {
     padding: var(--section-space) var(--container-pad) var(--section-space-lg);
     max-width: var(--container-max);
     margin-inline: auto;
     min-height: 100svh;
     display: flex;
     align-items: center;
   }
   .contact-card {
     background: var(--color-black);
     color: var(--color-white);
     width: 100%;
     display: grid;
     gap: 3rem;
     padding: clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, 6.5rem);
   }
   .contact-page__heading {
     font-family: var(--font-display);
     font-weight: 700;
     font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
     line-height: 1.15;
     margin-bottom: 2rem;
     max-width: 20rem;
   }
   .contact-page__info {
     display: flex;
     flex-direction: column;
     gap: 1rem;
   }
   .contact-page__info li {
     display: flex;
     align-items: center;
     gap: 0.875rem;
   }
   .contact-page__info a {
     font-family: var(--font-body);
     font-size: 0.875rem;
     color: var(--color-white);
   }
   .contact-page__info a[href^="mailto"] {
     text-decoration: underline;
   }
   .contact-page__info a:hover,
   .contact-page__info a:focus-visible {
     color: var(--color-text-on-dark-faint);
   }
   .contact-page__icon {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 38px;
     height: 38px;
     flex-shrink: 0;
     border-radius: 50%;
     background: var(--color-white);
   }
   
   .contact-form {
     display: flex;
     flex-direction: column;
     gap: 1.25rem;
   }
   .contact-form__field {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
   }
   .contact-form__field label {
     font-family: var(--font-body);
     font-size: 0.875rem;
     color: var(--color-white);
   }
   .contact-form__field input,
   .contact-form__field textarea {
     background: transparent;
     border: none;
     border-bottom: 1px solid var(--color-white);
     color: var(--color-white);
     font-family: var(--font-body);
     font-size: 0.875rem;
     padding-block: 0.5rem;
     transition: opacity 0.2s ease;
   }
   .contact-form__field input:focus-visible,
   .contact-form__field textarea:focus-visible {
     outline: none;
     opacity: 0.8;
   }
   .contact-form__field textarea {
     resize: vertical;
     font-family: inherit;
   }
   .contact-form__submit {
     align-self: center;
     margin-top: 0.5rem;
   }
   .contact-form__status {
     font-family: var(--font-body);
     font-size: 0.875rem;
     min-height: 1.2em;
   }
   .contact-form__status.is-success {
     color: #8fd19e;
   }
   .contact-form__status.is-error {
     color: #f2a3a3;
   }
   
   @media (min-width: 768px) {
     .contact-card {
       grid-template-columns: 1fr 1fr;
     }
   }
/* ==========================================================
   Privacy & terms page (privacy.html)
   ========================================================== */
.legal-page {
  padding: var(--section-space) var(--container-pad) var(--section-space-lg);
  max-width: var(--container-max);
  margin-inline: auto;
}
.legal-page__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.15;
  max-width: 40rem;
}
.legal-page__updated {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin-top: 1rem;
  margin-bottom: 3rem;
}
.legal-page__body {
  max-width: 42rem;
}
.legal-page__body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}
.legal-page__body h2:first-child {
  margin-top: 0;
}
.legal-page__body p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text-muted);
}
.legal-page__body a {
  color: var(--color-olive);
  text-decoration: underline;
}
.legal-page__body a:hover,
.legal-page__body a:focus-visible {
  color: var(--color-text);
}