/* CalvinFvand — mobile/tablet adaptation layer
   This file is intentionally loaded after main.css. Desktop styles are left untouched. */

:root {
  --cf-mobile-pad: clamp(16px, 5vw, 24px);
  --cf-mobile-gap: clamp(14px, 4vw, 22px);
  --cf-safe-top: env(safe-area-inset-top, 0px);
  --cf-safe-bottom: env(safe-area-inset-bottom, 0px);
  --cf-mobile-header-height: 77px;
  --cf-mobile-header-gap: clamp(16px, 5vw, 24px);
  --cf-mobile-first-offset: calc(var(--cf-mobile-header-height) + var(--cf-safe-top) + var(--cf-mobile-header-gap));
}

.work-detail .big-image.big-img-offset.screen-double-mobile > figure.bs-img {
  display: none !important;
}

html,
body {
  max-width: 100%;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

.mobile-process-kicker {
  display: none;
}

.fp-back-btn {
  display: none;
}

.community-mobile-grid-title {
  display: none;
}

.cp-read-review,
.cp-review-sheet {
  display: none;
}

@media (min-width: 768px) {
  body:has(.content.work) #cpTestimonialTrack .cp-card {
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body:has(.content.work) #cpTestimonialTrack .cp-quote {
    position: relative !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 6 !important;
    min-height: calc(1.55em * 6) !important;
    max-height: calc(1.55em * 6) !important;
    overflow: hidden !important;
  }

  body:has(.content.work) #cpTestimonialTrack .cp-quote::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 2.6em !important;
    pointer-events: none !important;
    background: linear-gradient(to bottom, rgba(34, 38, 80, 0), #222650 82%) !important;
  }

  body:has(.content.work) #cpTestimonialTrack .cp-person {
    margin-top: auto !important;
    padding-top: 14px !important;
    flex: 0 0 auto !important;
    min-height: 48px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  body:has(.content.work) #cpTestimonialTrack .cp-person-since {
    display: none !important;
  }

  body:has(.content.work) #cpTestimonialTrack .cp-person-name {
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  body:has(.content.work) #cpTestimonialTrack .cp-read-review {
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #d62e49 !important;
    font-family: "Suisse Intl Bold", "Open Sans", sans-serif !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: 0.06em !important;
    text-transform: none !important;
    cursor: pointer !important;
  }

  .cp-review-sheet {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1400 !important;
    display: none;
    pointer-events: none;
  }

  .cp-review-sheet.is-open {
    display: block !important;
    pointer-events: auto !important;
  }

  .cp-review-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 28, 0.58);
    opacity: 0;
    transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .cp-review-sheet.is-open .cp-review-sheet__backdrop {
    opacity: 1;
  }

  .cp-review-sheet__panel {
    position: absolute;
    right: 50%;
    bottom: 0;
    left: auto;
    width: min(620px, calc(100vw - 48px));
    max-height: min(78vh, 680px);
    padding: 22px 28px 30px;
    overflow-y: auto;
    color: #eeeef2;
    background: #222650;
    border: 1px solid rgba(238, 238, 242, 0.12);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 48px rgba(8, 10, 28, 0.42);
    transform: translate3d(50%, 105%, 0);
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .cp-review-sheet.is-open .cp-review-sheet__panel {
    transform: translate3d(50%, 0, 0);
  }

  .cp-review-sheet__handle {
    width: 46px;
    height: 4px;
    margin: 0 auto 20px;
    border-radius: 999px;
    background: rgba(238, 238, 242, 0.28);
  }

  .cp-review-sheet__close {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1px solid rgba(238, 238, 242, 0.14) !important;
    border-radius: 50% !important;
    background: rgba(238, 238, 242, 0.06) !important;
    color: #eeeef2 !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  .cp-review-sheet__stars {
    color: #d62e49;
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 18px;
  }

  .cp-review-sheet__quote {
    margin: 0;
    color: rgba(238, 238, 242, 0.78);
    font-size: 18px;
    line-height: 1.62;
  }

  .cp-review-sheet__quote b {
    color: #eeeef2;
  }

  .cp-review-sheet__person {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(238, 238, 242, 0.12);
  }

  .cp-review-sheet__name {
    font-family: "Suisse Intl Bold", "Open Sans", sans-serif;
    font-size: 14px;
  }

  .cp-review-sheet__since {
    display: none;
  }
}

@media only screen and (max-width: 1199px), (hover: none) and (pointer: coarse) {
  html,
  body {
    width: 100%;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    overscroll-behavior-y: auto;
  }

  body.default:has(.content.work) {
    position: relative !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 100dvh !important;
  }

  body.loading {
    opacity: 1 !important;
  }

  #loading-overlay {
    pointer-events: none;
  }

  #smooth-wrapper {
    position: relative !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }

  #smooth-wrapper .content,
  .content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    overflow-x: clip;
  }

  #smooth-wrapper .content {
    padding-top: var(--cf-mobile-first-offset);
  }

  .grid-inner {
    width: 100% !important;
    padding-left: var(--cf-mobile-pad) !important;
    padding-right: var(--cf-mobile-pad) !important;
  }

  .bs-grid {
    flex-wrap: wrap;
  }

  [class*="bs-xl-os-"],
  [class*="bs-lg-os-"],
  [class*="bs-sm-os-"] {
    margin-left: 0 !important;
  }

  .bs-xl-24,
  .bs-xl-23,
  .bs-xl-22,
  .bs-xl-21,
  .bs-xl-20,
  .bs-xl-19,
  .bs-xl-18,
  .bs-xl-17,
  .bs-xl-16,
  .bs-xl-15,
  .bs-xl-14,
  .bs-xl-13,
  .bs-xl-12,
  .bs-xl-11,
  .bs-xl-10,
  .bs-xl-9,
  .bs-xl-8,
  .bs-xl-7,
  .bs-xl-6,
  .bs-xl-5,
  .bs-xl-4,
  .bs-xl-3,
  .bs-xl-2,
  .bs-xl-1 {
    max-width: 100%;
  }

  .bs-240,
  .bs-220,
  .bs-180,
  .bs-160,
  .bs-120,
  .bs-100,
  .bs-80,
  .bs-60 {
    letter-spacing: -0.035em;
    overflow-wrap: normal;
  }

  .bs-240 { font-size: clamp(58px, 21vw, 132px) !important; }
  .bs-220 { font-size: clamp(48px, 18vw, 112px) !important; }
  .bs-180 { font-size: clamp(44px, 16vw, 96px) !important; }
  .bs-160 { font-size: clamp(42px, 15vw, 88px) !important; }
  .bs-120 { font-size: clamp(38px, 13vw, 72px) !important; }
  .bs-100 { font-size: clamp(34px, 11vw, 64px) !important; }
  .bs-80  { font-size: clamp(30px, 9vw, 54px) !important; }
  .bs-60  { font-size: clamp(26px, 7.5vw, 44px) !important; }

  h1,
  h2,
  h3,
  p {
    max-width: 100%;
  }

  p,
  li,
  input,
  textarea,
  button,
  a {
    font-size-adjust: none;
  }

  #webglBlur,
  .scrollPattern,
  #drag-ico,
  .hero-hex {
    display: none !important;
  }

  #hero-video {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    height: 100svh !important;
    object-fit: cover !important;
    opacity: 0.22 !important;
    z-index: 0 !important;
  }

  #logo {
    top: calc(12px + var(--cf-safe-top)) !important;
    left: var(--cf-mobile-pad) !important;
    width: 65px !important;
    height: 65px !important;
    transform: none !important;
    opacity: 1 !important;
    z-index: 120 !important;
  }

  #hamburger {
    top: calc(14px + var(--cf-safe-top)) !important;
    right: var(--cf-mobile-pad) !important;
    width: 58px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    justify-content: flex-end !important;
    z-index: 130 !important;
    transform: none !important;
    touch-action: manipulation;
  }

  #hamburger svg {
    width: 48px !important;
    height: 48px !important;
  }

  #menu-slide {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 100dvh !important;
    max-height: none !important;
    padding: calc(92px + var(--cf-safe-top)) var(--cf-mobile-pad) calc(28px + var(--cf-safe-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #EEEEF2 !important;
    border-radius: 0 !important;
    z-index: 115 !important;
  }

  #menu-slide > div {
    min-height: calc(100dvh - 120px) !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 28px !important;
  }

  #menu-slide #links div:first-of-type {
    padding: 0 !important;
  }

  #menu-slide #links div:first-of-type a {
    display: block !important;
    width: 100% !important;
    margin: 0 0 0.12em !important;
    font-size: clamp(42px, 13vw, 78px) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.045em !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.dynamic.menu-open #menu-slide a,
  body.menu-open #menu-slide a {
    color: #1D2145 !important;
  }

  body.dynamic.menu-open #menu-slide a.mask-link::before,
  body.menu-open #menu-slide a.mask-link::before {
    color: #463281 !important;
  }

  #menu-slide #links div:first-of-type a .menu-aa {
    position: relative;
    display: inline-block;
    overflow: visible;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }

  #menu-slide #links div:first-of-type a .menu-aa::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -0.1em;
    width: 0.18em;
    height: 0.18em;
    border: 0.035em solid currentColor;
    border-radius: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    pointer-events: none;
  }

  #menu-slide .social {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px 18px !important;
  }

  #menu-slide .social a {
    margin: 0 !important;
    padding: 10px 0 !important;
    font-size: 14px !important;
  }

  body.menu-open {
    overflow: hidden !important;
  }

  #fixed-cta {
    width: 56px !important;
    height: 56px !important;
    right: max(14px, var(--cf-mobile-pad)) !important;
    bottom: calc(14px + var(--cf-safe-bottom)) !important;
    z-index: 100 !important;
  }

  .page-community #fixed-cta {
    display: none !important;
  }

  a,
  button,
  input[type="button"],
  input[type="submit"] {
    -webkit-tap-highlight-color: rgba(214, 46, 73, 0.22);
  }

  input,
  textarea,
  select,
  button {
    max-width: 100%;
  }

  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}

@media only screen and (max-width: 768px) {
  #smooth-wrapper .content {
    padding-top: var(--cf-mobile-first-offset) !important;
  }

  section {
    max-width: 100%;
  }

  .home #hero {
    height: auto !important;
    min-height: calc(100svh - 82px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 28px var(--cf-mobile-pad) 54px !important;
  }

  .home #hero > div {
    width: 100% !important;
    padding-bottom: 0 !important;
  }

  .home #hero h1 {
    height: auto !important;
    text-align: center !important;
    margin: 0 auto 48px !important;
  }

  .home #hero h1 div {
    display: block !important;
    line-height: 0.92 !important;
    text-align: center !important;
  }

  .home #hero .hero-split,
  .home #hero .hero-split.right,
  .home #hero .hero-split.xs-left {
    display: block !important;
    float: none !important;
    text-align: center !important;
    margin: 0 !important;
  }

  #webglBubble {
    top: -8vh !important;
  }

  #webglBubble canvas {
    transform: scale(0.87);
    transform-origin: center center;
  }

  #hero-work-link,
  #hero-cta-link,
  .hero-kursstart {
    position: relative !important;
    width: 100% !important;
    margin: 16px 0 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
  }

  .hero-kursstart {
    padding-left: 0 !important;
    font-family: inherit !important;
    font-size: 0.78rem !important;
  }

  .hero-kursstart i.circle-tag {
    display: none !important;
  }

  #hero-work-link a,
  #hero-cta-link a,
  .ansokan-hero-cta,
  .intro-actions__button,
  .intro-actions__link {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
  }

  .intro-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(90vw, 280px) !important;
    margin: 0 auto !important;
  }

  .intro-actions__button {
    width: auto !important;
    margin: 0 auto !important;
  }

  #usp {
    transform: none !important;
    margin: 14px auto 0 !important;
    padding: 0 var(--cf-mobile-pad) !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
  }

  #usp > a:first-of-type,
  #usp > span:first-of-type {
    background: none !important;
    color: inherit !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    flex: 0 0 auto !important;
  }

  #usp .usp-tags {
    display: block !important;
    flex: 0 0 1em !important;
  }

  #usp .usp-carousel {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: clamp(9px, 2.6vw, 11px) !important;
    height: auto !important;
    line-height: 1.6 !important;
    overflow: visible !important;
  }

  #usp .usp-carousel .inner {
    white-space: nowrap !important;
  }

  #breadcrumb {
    margin: 0 var(--cf-mobile-pad) 24px !important;
    text-align: left !important;
  }

  #clients header,
  #intro,
  #attitude,
  #work,
  #awards,
  #testimonials,
  #varfor-jag,
  .goal,
  .manifesto,
  #about-intro,
  #why-bee,
  #community-proof,
  #project-gallery,
  #faq {
    padding-left: var(--cf-mobile-pad) !important;
    padding-right: var(--cf-mobile-pad) !important;
  }

  #project-gallery {
    overflow: visible !important;
  }

  .content.service-detail #varfor-jag {
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .content.service-detail #varfor-jag > .bs-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .content.service-detail #varfor-jag > .bs-grid > div {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .content.service-detail #varfor-jag .section-title {
    margin: 0 0 28px !important;
    text-align: left !important;
  }

  .content.service-detail #varfor-jag .bs-20 {
    max-width: 34ch !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    font-size: clamp(18px, 4.8vw, 20px) !important;
    line-height: 1.5 !important;
    text-align: left !important;
  }

  .content.service-detail #varfor-jag .bs-20 + .bs-20 {
    margin-top: 28px !important;
  }

  .content.service-detail #varfor-jag .parallax-wrap {
    margin-bottom: 28px !important;
  }

  #about-intro .bs-16 {
    display: block !important;
  }

  #about-intro .bs-xs-22 {
    width: 100% !important;
  }

  #about-intro .bs-xs-os-1 {
    margin-left: 0 !important;
  }

  #project-gallery #gallery-btn {
    position: absolute !important;
    top: clamp(132px, 30vw, 168px) !important;
    right: max(12px, var(--cf-mobile-pad)) !important;
    left: auto !important;
    width: 88px !important;
    height: 88px !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 3 !important;
  }

  #project-gallery #gallery-btn span {
    font-size: 10px !important;
    line-height: 1 !important;
  }

  .work-detail .big-image.big-img-offset.screen-double-mobile .section-title,
  .work-detail .big-image.big-img-offset.screen-double-mobile .university-title {
    position: relative !important;
    z-index: 4 !important;
    transform: translateY(-56px) !important;
  }

  .work-detail .big-image.big-img-offset.screen-double-mobile .screen.img-view {
    margin-top: 18px !important;
  }

  /* Intro manifesto paragraph ("Jag vill inte att du ska bli beroende...")
     Desktop hand-breaks this with <br> for its 44px display size; on
     mobile that forces short/single-word lines regardless of viewport.
     Hide the mid-sentence single <br> tags so text reflows naturally,
     while keeping the <br><br> pairs that mark paragraph breaks. */
  #intro .bs-xl-10.bs-xs-22 {
    width: 96vw !important;
  }

  #intro p.bs-60 {
    font-size: clamp(15px, 4vw, 19px) !important;
    line-height: 1.55 !important;
    text-align: left !important;
  }

  #intro p.bs-60 br {
    display: none !important;
  }

  #intro p.bs-60 br:has(+ br),
  #intro p.bs-60 br + br {
    display: inline !important;
  }

  #clients .client-wrap {
    margin-top: 0 !important;
  }

  #clients .client-wrap .row {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 16px !important;
    padding: 0 8vw !important;
    margin-left: 0 !important;
    margin-top: 8vh !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: 8vw !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  #clients .client-wrap .row::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
  }

  #clients .client-wrap .row:nth-of-type(2) {
    margin-top: 16px !important;
  }

  #clients .client-wrap .row > div {
    flex: 0 0 84vw !important;
    width: 84vw !important;
    padding: 0 !important;
    scroll-snap-align: center !important;
  }

  #clients .client-wrap .client-item {
    min-height: 128px !important;
    height: auto !important;
    padding: 24px 14px !important;
    margin: 0 !important;
  }

  #clients .client-label {
    font-size: clamp(22px, 6.2vw, 28px) !important;
    line-height: 1.1 !important;
  }

  #clients .client-stat {
    display: flex !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 96px !important;
    height: 96px !important;
    margin: 16px auto 0 !important;
  }

  #clients .client-stat .stat-icon {
    width: auto !important;
    height: auto !important;
    text-align: center !important;
  }

  #clients + #intro {
    margin-top: 5vh !important;
  }

  #attitude {
    height: auto !important;
    min-height: auto !important;
    margin-left: 0 !important;
    overflow: visible !important;
  }

  /* Swap the static navy PRECISION word for the two-layer red/navy
     version main.css hides ≤767px, so the mobile card animation can
     progressively reveal red the same way desktop does. Stays in normal
     document flow, in its own row above the cards (same place the old
     .big-fade word sat) — just bigger and higher-contrast. */
  #attitude .big-fade {
    display: none !important;
  }

  #attitude .big-fade + .bs-grid {
    display: flex !important;
    justify-content: center !important;
  }

  #attitude .text-progress {
    font-size: clamp(72px, 26vw, 140px) !important;
    transform: none !important;
    margin: 0 auto !important;
  }

  #attitude .text-progress p:nth-of-type(2) {
    opacity: 0.35 !important;
  }

  #attitude .text-progress p:first-of-type {
    opacity: 0.9 !important;
  }

  .content.service-detail #attitude .mobile-process-kicker {
    display: block !important;
    color: #e83a55 !important;
    font-family: "TT Tunnels Bold", Impact, sans-serif !important;
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1 !important;
    margin: -7.8rem 0 22px !important;
    padding: 0 var(--cf-mobile-pad) !important;
    text-align: left !important;
  }

  #attitude .boxes {
    width: 100% !important;
    margin: 0 !important;
    gap: 14px !important;
  }

  #attitude .boxes > div {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 0 14px !important;
    padding-left: 0 !important;
  }

  #attitude .box {
    min-height: 0 !important;
  }

  .content.service-detail #attitude:has(.mobile-process-kicker) .boxes {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--cf-mobile-pad) !important;
    padding-right: var(--cf-mobile-pad) !important;
    box-sizing: border-box !important;
  }

  .content.service-detail #attitude:has(.mobile-process-kicker) .boxes > div,
  .content.service-detail #attitude:has(.mobile-process-kicker) .boxes > div:first-of-type,
  .content.service-detail #attitude:has(.mobile-process-kicker) .boxes > div.b-middle,
  .content.service-detail #attitude:has(.mobile-process-kicker) .boxes > div.b-end {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    margin: 0 0 14px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  .content.service-detail #attitude:has(.mobile-process-kicker) .boxes .box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .content.service-detail #attitude:has(.mobile-process-kicker) .boxes h4 {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    font-size: clamp(24px, 7vw, 30px) !important;
    line-height: 1.05 !important;
  }

  #attitude .hex-wrap {
    margin: 18px auto 0 !important;
  }

  /* "I MEDIA" press section — .press-copy-align has an inline
     height:100% meant for desktop's side-by-side row (stretched to
     match the image column's height). On mobile the image/text wrap
     onto separate lines, but the percentage height still resolves
     against the flex line, leaving a large empty gap between the copy
     and the "Läs intervjun" link. Let it size to its own content. */
  .press-copy-align {
    height: auto !important;
  }

  /* Desktop pins #work and swaps slide 0/1 in place on scroll (dot nav +
     ScrollTrigger, disabled for mobile in index.html's inline script).
     On mobile both articles just stack normally: slide 1 drops its
     position:absolute overlay and both slides + their copy render
     instead of being toggled via opacity/visibility. */
  .press-slide {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    margin-bottom: 8vw !important;
  }

  .press-slide:last-of-type {
    margin-bottom: 0 !important;
  }

  .press-slide .press-copy-align {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .press-dots {
    display: none !important;
  }

  /* Both .press-card figures now render (and stay composited) at once
     on mobile instead of only ever one at a time. Each carries a
     desktop hover tilt (perspective + rotateX/rotateY, meaningless on
     touch) plus a 4-layer shadow with up to 90px blur — expensive to
     rasterize/composite, doubled now that both are always on screen.
     Flatten and simplify for scroll performance. */
  .press-media-col {
    perspective: none !important;
  }

  .press-card {
    transform: none !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
  }

  #awards {
    height: auto !important;
  }

  /* Award circles (300+ ELEVER / 4.9/5 BETYG / 95% REKOMMENDERAR):
     .award-icons > div is flex:0 0 30% + aspect-ratio:1/1, which keeps
     the three circles equal-sized as long as their content fits — but
     "REKOMMENDERAR" at the fixed 12px .bs-tech size is wider than a
     30%-of-viewport circle on a phone, so it overflowed past the edge
     (and could grow that one circle taller than the other two). Shrink
     the label and let it wrap within the circle instead of overflowing. */
  #awards .award-icons > div {
    overflow: hidden !important;
  }

  #awards .award-icons .award-number {
    font-size: clamp(20px, 6vw, 28px) !important;
  }

  #awards .award-icons span.bs-tech {
    display: block !important;
    max-width: 78% !important;
    margin: 0 auto !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  #awards .awards-scroll,
  .awards-scroll {
    display: none !important;
  }

  #testimonials .testimonial-slider,
  .testimonial-slider {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* .draggable .slide-item is flex:0 0 auto (shrink-to-fit) and JS sets
     .slider-inner's width from each slide-item's measured offsetWidth —
     with no explicit width here, that measurement (and the child
     .testimonial's width:100%) resolved against an indeterminate parent,
     letting the long testimonial text render unwrapped past the right
     edge instead of wrapping inside the card. Give the card itself an
     explicit viewport-relative width, same pattern used for the other
     drag/swipe cards on mobile (#clients row items). */
  /* Gap via margin/flex `gap` isn't included in offsetWidth, which the
     drag JS uses for its snap step (dragItemWidth) — that would drift
     the snap points out of sync with the actual cards after a few
     swipes. Padding is included in offsetWidth (box-sizing:border-box),
     so it creates real air between cards without touching main.js. */
  #testimonials .testimonial-slider .slide-item {
    flex: 0 0 88vw !important;
    width: 88vw !important;
    box-sizing: border-box !important;
    padding-right: 4vw !important;
  }

  #testimonials .testimonial-slider .testimonial,
  .testimonial {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 22px !important;
  }

  .work-listing figure,
  .work-listing .work-item,
  .work-listing article,
  .result-card,
  .community-card,
  .cf-card,
  .price-card,
  .proof-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .work-detail #hero,
  .services #hero,
  .service-detail #hero,
  .about #hero {
    height: auto !important;
    min-height: auto !important;
    padding: 24px var(--cf-mobile-pad) 42px !important;
    text-align: center !important;
  }

  .work-detail #hero h1,
  .services #hero h1,
  .service-detail #hero h1,
  .about #hero h1 {
    margin: 0 auto 22px !important;
    text-align: center !important;
  }

  .content.work .work-slider {
    min-height: 100dvh !important;
    height: auto !important;
    padding-top: calc(92px + var(--cf-safe-top)) !important;
    padding-bottom: calc(92px + var(--cf-safe-bottom)) !important;
    touch-action: pan-y !important;
  }

  body:has(.content.work) #webglBubble,
  body:has(.content.work) #webglBlur {
    display: none !important;
  }

  .content.work .work-slider .work-slide > .bs-xl-9 {
    display: block !important;
    width: 100% !important;
    max-width: min(100%, 360px) !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  .content.work .work-slider .slider-inner .work-slide > .bs-xl-9 figure {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    margin: 0 auto !important;
    opacity: 0.72 !important;
  }

  .content.work .work-slider .slider-inner .work-slide > .bs-xl-9 figure img.image-contain {
    object-fit: cover !important;
  }

  .content.work .work-slider .cf-slide-nav {
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
    margin-top: 16px !important;
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
  }

  .content.work .work-slider .cf-slide-arrow {
    width: 48px !important;
    height: 48px !important;
    border-color: rgba(196, 158, 118, 0.72) !important;
    background: rgba(29, 33, 69, 0.42) !important;
    color: #eeeef2 !important;
    touch-action: manipulation !important;
  }

  .content.work #work-titles {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    margin: 22px auto 0 !important;
    transform: none !important;
    text-align: center !important;
  }

  .content.work .work-slider .work-service {
    position: relative !important;
    bottom: auto !important;
    margin-top: 18px !important;
  }

  .content.work .work-slider #slide-count {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: max-content !important;
    margin: 18px auto 0 !important;
    transform: none !important;
  }

  .content.work .swipe-info {
    top: calc(72px + var(--cf-safe-top)) !important;
  }

  body:has(.content.work) .work-slider .swipe-info,
  body:has(.content.work) .work-slider #work-switch,
  body:has(.content.work) .work-slider [data-layout="1"],
  body:has(.content.work) .work-slider .blur-circle {
    display: none !important;
  }

  body:has(.content.work) .work-slider {
    min-height: auto !important;
    height: auto !important;
    padding-top: calc(86px + var(--cf-safe-top)) !important;
    padding-bottom: 36px !important;
  }

  body:has(.content.work) #smooth-wrapper .content.work,
  body:has(.content.work) .content.work,
  body:has(.content.work) .work {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body:has(.content.work) #smooth-wrapper {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body:has(.content.work) .work-slider .layout-b[data-layout="2"] {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    margin: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  body:has(.content.work) .work-slider .community-mobile-grid-title {
    display: block !important;
    margin: 0 0 24px !important;
    color: #eeeef2 !important;
    font-family: "TT Tunnels Bold", Impact, sans-serif !important;
    font-size: clamp(42px, 13vw, 64px) !important;
    font-weight: 700 !important;
    line-height: 0.95 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-transform: uppercase !important;
    text-wrap: balance;
  }

  body:has(.content.work) .work-slider .layout-b .bs-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  body:has(.content.work) .work-slider .layout-b article {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  body:has(.content.work) .work-slider .layout-b article a {
    display: block !important;
    color: inherit !important;
    text-decoration: none !important;
  }

  body:has(.content.work) .work-slider .layout-b article figure {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    opacity: 0.9 !important;
  }

  body:has(.content.work) .work-slider .layout-b article img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  body:has(.content.work) .work-slider .layout-b article h2 {
    display: block !important;
    position: static !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    color: #eeeef2 !important;
    font-size: clamp(20px, 7vw, 30px) !important;
    line-height: 1 !important;
    text-align: left !important;
    opacity: 0.9 !important;
    transform: none !important;
  }

  body:has(.content.work) #community-proof {
    padding-top: 24px !important;
  }

  body:has(.content.work) #community-proof .cp-proof-bar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: min(100%, 340px) !important;
    margin: 0 auto 32px !important;
    padding: 16px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  body:has(.content.work) #community-proof .cp-proof-item {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    text-align: left !important;
  }

  body:has(.content.work) #community-proof .cp-proof-item svg {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
  }

  body:has(.content.work) #community-proof .cp-proof-item.live {
    margin-left: 0 !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(238, 238, 242, 0.1) !important;
  }

  body:has(.content.work) #community-proof .cp-proof-item.live a {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    text-decoration: none !important;
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  body:has(.content.work) #community-proof .cp-live-dot {
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;
  }

  body:has(.content.work) #cpTestimonialTrack .cp-card {
    height: 286px !important;
    min-height: 286px !important;
    max-height: 286px !important;
    flex: 0 0 min(82vw, 320px) !important;
    padding: 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body:has(.content.work) #community-proof .cp-transform-viewport {
    overflow: hidden !important;
  }

  body:has(.content.work) #community-proof .cp-track.cp-transform-track {
    width: max-content !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    transition: none !important;
  }

  body:has(.content.work) #community-proof .cp-cta-row {
    margin-top: 34px !important;
    margin-bottom: calc(96px + var(--cf-safe-bottom)) !important;
  }

  body:has(.content.work) #community-proof .cp-cta {
    flex: 0 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 24px 24px 22px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #262b5b 0%, #222650 100%) !important;
    box-shadow: inset 0 1px 0 rgba(238, 238, 242, 0.06) !important;
  }

  body:has(.content.work) #community-proof .cp-cta h3 {
    margin-bottom: 12px !important;
    font-size: clamp(21px, 6.2vw, 28px) !important;
    line-height: 0.98 !important;
  }

  body:has(.content.work) #community-proof .cp-cta p {
    max-width: 25ch !important;
    margin-bottom: 18px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  body:has(.content.work) #community-proof .cp-cta-micro {
    align-items: flex-start !important;
    margin-bottom: 22px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  body:has(.content.work) #community-proof .cp-cta-button {
    display: flex !important;
    width: 100% !important;
    min-height: 58px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px 22px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    box-shadow: 0 16px 32px -20px rgba(214, 46, 73, 0.85) !important;
  }

  body:has(.content.work) #community-proof .cp-cta-note {
    margin-top: 15px !important;
    align-items: flex-start !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  body:has(.content.work) #community-proof .cp-wall-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 18px !important;
    width: 100% !important;
    margin: 26px 0 28px !important;
  }

  body:has(.content.work) #community-proof .cp-wall-stat {
    min-width: 0 !important;
  }

  body:has(.content.work) #community-proof .cp-wall-stat--sep {
    border-left: 0 !important;
    padding-left: 0 !important;
  }

  body:has(.content.work) #community-proof .cp-wall-stat-value {
    font-size: clamp(34px, 11vw, 48px) !important;
    line-height: 0.95 !important;
    white-space: nowrap !important;
  }

  body:has(.content.work) #community-proof .cp-wall-stat-label {
    max-width: 15ch !important;
    margin-top: 9px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.035em !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }

  body:has(.content.work) #cpTestimonialTrack .cp-quote {
    position: relative !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 6 !important;
    min-height: calc(1.55em * 6) !important;
    max-height: calc(1.55em * 6) !important;
    overflow: hidden !important;
  }

  body:has(.content.work) #cpTestimonialTrack .cp-quote::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 2.4em !important;
    pointer-events: none !important;
    background: linear-gradient(to bottom, rgba(34, 38, 80, 0), #222650 82%) !important;
  }

  body:has(.content.work) #cpTestimonialTrack .cp-person {
    margin-top: auto !important;
    padding-top: 12px !important;
    flex: 0 0 auto !important;
    min-height: 48px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  body:has(.content.work) #cpTestimonialTrack .cp-person-since {
    display: none !important;
  }

  body:has(.content.work) #cpTestimonialTrack .cp-person-name {
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  body:has(.content.work) #cpTestimonialTrack .cp-read-review {
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    width: auto !important;
    min-height: 0 !important;
    margin: -2px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #d62e49 !important;
    font-family: "Suisse Intl Bold", "Open Sans", sans-serif !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: 0.06em !important;
    text-transform: none !important;
  }

  .cp-review-sheet {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1400 !important;
    display: none;
    pointer-events: none;
  }

  .cp-review-sheet.is-open {
    display: block !important;
    pointer-events: auto !important;
  }

  .cp-review-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 28, 0.58);
    opacity: 0;
    transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .cp-review-sheet.is-open .cp-review-sheet__backdrop {
    opacity: 1;
  }

  .cp-review-sheet__panel {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: min(82dvh, 680px);
    padding: 14px 20px calc(24px + var(--cf-safe-bottom));
    overflow-y: auto;
    color: #eeeef2;
    background: #222650;
    border: 1px solid rgba(238, 238, 242, 0.12);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 48px rgba(8, 10, 28, 0.42);
    transform: translate3d(0, 105%, 0);
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-overflow-scrolling: touch;
  }

  .cp-review-sheet.is-open .cp-review-sheet__panel {
    transform: translate3d(0, 0, 0);
  }

  .cp-review-sheet__handle {
    width: 42px;
    height: 4px;
    margin: 0 auto 18px;
    border-radius: 999px;
    background: rgba(238, 238, 242, 0.28);
  }

  .cp-review-sheet__close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 1px solid rgba(238, 238, 242, 0.14) !important;
    border-radius: 50% !important;
    background: rgba(238, 238, 242, 0.06) !important;
    color: #eeeef2 !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  .cp-review-sheet__stars {
    color: #d62e49;
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 18px;
  }

  .cp-review-sheet__quote {
    margin: 0;
    color: rgba(238, 238, 242, 0.78);
    font-size: 17px;
    line-height: 1.62;
  }

  .cp-review-sheet__quote b {
    color: #eeeef2;
  }

  .cp-review-sheet__person {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(238, 238, 242, 0.12);
  }

  .cp-review-sheet__name {
    font-family: "Suisse Intl Bold", "Open Sans", sans-serif;
    font-size: 14px;
  }

  .cp-review-sheet__since {
    margin-top: 4px;
    color: rgba(238, 238, 242, 0.44);
    font-size: 12px;
  }

  .content.service-detail #hero .service-hero > div {
    justify-content: center !important;
  }

  .content.service-detail #hero .service-hero .hero-in-text:first-of-type {
    flex: 0 1 32ch !important;
    width: min(100%, 32ch) !important;
    max-width: 32ch !important;
    margin-top: -3.2em !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
  }

  .content.service-detail #kurs-accordion {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .content.service-detail #kurs-accordion .accordion-trigger {
    position: relative !important;
    padding: 1.35rem 3.25rem 1.35rem 1.35rem !important;
    box-sizing: border-box !important;
  }

  .content.service-detail #kurs-accordion .accordion-arrow {
    position: absolute !important;
    top: 1.35rem !important;
    right: 1rem !important;
    margin: 0 !important;
  }

  .content.service-detail #kurs-accordion .accordion-open-layout {
    width: 100% !important;
    padding: 0.7rem 1.35rem 2.2rem !important;
    box-sizing: border-box !important;
  }

  .content.service-detail #kurs-accordion .accordion-open-copy,
  .content.service-detail #kurs-accordion .accordion-open-copy p,
  .content.service-detail #kurs-accordion .accordion-open-kicker,
  .content.service-detail #kurs-accordion .accordion-lesson-list,
  .content.service-detail #kurs-accordion .accordion-lesson-list li > span {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .content.service-detail #kurs-accordion .accordion-lesson-list li {
    padding: 1.1rem 0 !important;
  }

  .about #hero h1 {
    width: calc(100% - 18px) !important;
    margin-left: -10px !important;
    margin-right: auto !important;
  }

  .about #hero h1 > div {
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-8px) !important;
  }

  .about #hero [data-scroll="hero"] {
    animation: cfSignalMobilePulse 1.8s ease-in-out 2s infinite;
    text-shadow: 0 0 0 rgba(214, 46, 73, 0);
    transform-origin: center center;
  }

  @keyframes cfSignalMobilePulse {
    0%,
    100% {
      filter: brightness(1);
      text-shadow: 0 0 0 rgba(214, 46, 73, 0);
      transform: scaleX(1) scaleY(1);
    }

    42% {
      filter: brightness(1.18);
      text-shadow: 0 0 18px rgba(214, 46, 73, 0.55);
      transform: scaleX(1.035) scaleY(0.92);
    }
  }

  .about .about-team {
    margin-top: clamp(48px, 14vw, 72px) !important;
    padding: 0 !important;
  }

  .about .about-team .big-fade {
    display: none !important;
  }

  .about .about-team > .bs-grid {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 clamp(20px, 6vw, 24px) !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  .about .about-team > .bs-grid > div,
  .about .about-team .chapter-two-main,
  .about .about-team .chapter-two-copy {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .about .about-team .chapter-glow {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding-top: 0 !important;
    margin-bottom: 24px !important;
  }

  .about .about-team .chapter-mark,
  .about .about-team .chapter-num,
  .about .about-team .section-title {
    margin: 0 !important;
    line-height: 1.15 !important;
    text-align: left !important;
  }

  .about .about-team .chapter-mark {
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
    opacity: 0.58 !important;
  }

  .about .about-team .chapter-num {
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    opacity: 0.78 !important;
  }

  .about .about-team .section-title {
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
  }

  .about .about-team .chapter-two-main {
    margin-top: 66px !important;
  }

  .about .about-team .chapter-two-main > .bs-60 {
    max-width: 12.5ch !important;
    margin: 0 !important;
    font-size: clamp(28px, 7.2vw, 38px) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-wrap: balance;
  }

  .about .about-team .chapter-two-heading-line {
    display: block !important;
  }

  .about .about-team .chapter-two-visual {
    width: 100% !important;
    height: clamp(210px, 56vw, 320px) !important;
    margin: 32px 0 24px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  .about .about-team .chapter-two-visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 18% !important;
  }

  .about .about-team .chapter-two-copy {
    max-width: 34rem !important;
    font-size: clamp(18px, 5vw, 20px) !important;
    line-height: 1.55 !important;
    text-align: left !important;
  }

  .about .about-team .chapter-two-copy + .chapter-two-copy {
    margin-top: 16px !important;
  }

  body:has(.content.about) #fixed-cta {
    bottom: calc(86px + var(--cf-safe-bottom)) !important;
  }

  #why-bee .why-bee-quote {
    margin-top: 66px !important;
  }

  .about .manifesto .manifesto-title {
    margin-top: -2em !important;
  }

  .about .manifesto .manifesto-title .split:last-child {
    margin-top: -0.18em !important;
    transform: translateY(-0.08em) !important;
  }

  .about .manifesto .manifesto-title .mobile-punch,
  .about .manifesto .manifesto-title .mobile-punch div {
    font-size: clamp(38px, 13vw, 72px) !important;
    line-height: 0.9 !important;
  }

  .about .timeline {
    display: none !important;
  }

  .services .goal .goal-boxes.ansokan-goal-cards {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: min(100%, 306px) !important;
    max-width: 306px !important;
    height: auto !important;
    min-height: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 14px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .services .goal .goal-boxes.ansokan-goal-cards article {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .services .goal .goal-boxes.ansokan-goal-cards article .inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 20px 10px !important;
  }

  .services .goal .goal-boxes.ansokan-goal-cards figure {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .services .goal .goal-boxes.ansokan-goal-cards article .inner > div {
    width: 100% !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, auto) !important;
    justify-content: center !important;
    align-items: center !important;
    column-gap: 10px !important;
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    text-align: center !important;
  }

  .services .goal .goal-boxes.ansokan-goal-cards .stat,
  .services .goal .goal-boxes.ansokan-goal-cards .stat > div {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .services .goal .goal-boxes.ansokan-goal-cards h3,
  .services .goal .goal-boxes.ansokan-goal-cards .bs-tech {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .services .goal .goal-boxes.ansokan-goal-cards h3 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .services .goal .goal-boxes.ansokan-goal-cards .bs-tech {
    grid-column: 1 / -1 !important;
    margin-top: 10px !important;
  }

  .services .goal .goal-boxes.ansokan-goal-cards .bs-tech {
    margin-bottom: 0 !important;
  }

  .about-img-wrap,
  .about-intro-media,
  .team-img,
  .parallax-wrap,
  .project-media,
  .project-gallery,
  figure {
    max-width: 100% !important;
  }

  .about-img-wrap,
  .parallax-wrap {
    transform: none !important;
  }

  .contact {
    height: auto !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 24px var(--cf-mobile-pad) 56px !important;
  }

  .step-item,
  .step-item .bs-grid,
  #intake-form,
  #interest-form,
  #interest-form-section,
  form {
    max-width: 100% !important;
  }

  .services #interest-form-section .flying-panes {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    touch-action: pan-y !important;
    position: relative !important;
  }

  body:has(.content.services) #interest-form-section {
    padding-bottom: calc(132px + var(--cf-safe-bottom)) !important;
    scroll-margin-bottom: calc(132px + var(--cf-safe-bottom)) !important;
  }

  body:has(.content.services) #interest-form {
    padding-bottom: calc(64px + var(--cf-safe-bottom)) !important;
  }

  body:has(.content.services #interest-form-section .fp-item[data-step="6"].active) #fixed-cta {
    display: none !important;
  }

  body:has(.content.services) #fixed-cta {
    display: none !important;
  }

  .services #interest-form-section .fp-item {
    position: relative !important;
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    padding: 22px !important;
    border-radius: 16px !important;
    background: #eeeef2 !important;
    box-shadow: 0 14px 38px rgba(8, 10, 28, 0.32) !important;
    transform: none !important;
    opacity: 1 !important;
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
  }

  .services #interest-form-section .fp-item.active {
    display: block !important;
  }

  .services #interest-form-section .fp-item.slide-out-left,
  .services #interest-form-section .fp-item.slide-out-right {
    display: block !important;
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .services #interest-form-section .fp-item.slide-in-left,
  .services #interest-form-section .fp-item.slide-in-right {
    z-index: 2 !important;
  }

  .services #interest-form-section .fp-item.slide-out-left {
    animation: cfFormSlideOutLeft 420ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
  }

  .services #interest-form-section .fp-item.slide-out-right {
    animation: cfFormSlideOutRight 420ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
  }

  .services #interest-form-section .fp-item.slide-in-right {
    animation: cfFormSlideInRight 420ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
  }

  .services #interest-form-section .fp-item.slide-in-left {
    animation: cfFormSlideInLeft 420ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
  }

  @keyframes cfFormSlideOutLeft {
    from {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    to {
      opacity: 0.55;
      transform: translate3d(-38%, 0, 0);
    }
  }

  @keyframes cfFormSlideOutRight {
    from {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    to {
      opacity: 0.55;
      transform: translate3d(38%, 0, 0);
    }
  }

  @keyframes cfFormSlideInRight {
    from {
      opacity: 0.75;
      transform: translate3d(32%, 0, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes cfFormSlideInLeft {
    from {
      opacity: 0.75;
      transform: translate3d(-32%, 0, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  .services #interest-form-section .fp-item .inner,
  .services #interest-form-section .fp-item div,
  .services #interest-form-section .fp-item .self-end,
  .services #interest-form-section .fp-item .fp-form-fields {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    transform: none !important;
  }

  .services #interest-form-section .fp-item h3,
  .services #interest-form-section .fp-item p {
    transform: none !important;
  }

  .services #interest-form-section .fp-item.active .self-end p,
  .services #interest-form-section .fp-item.active .fp-form-fields {
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  .services #interest-form-section .fp-next-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .services #interest-form-section .fp-back-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 0 1rem !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: rgba(29, 33, 69, 0.58) !important;
    font-family: inherit !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  .services #interest-form-section .fp-back-btn span {
    font-size: 1rem !important;
    line-height: 0 !important;
  }

  .services #interest-form-section .fp-form-fields label {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    color: #1d2145 !important;
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
    letter-spacing: 0.03em !important;
    text-align: left !important;
  }

  .services #interest-form-section .fp-form-fields label input[type="radio"],
  .services #interest-form-section .fp-form-fields label input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0.08em 0 0 !important;
    flex: 0 0 auto !important;
  }

  .services #interest-form-section .fp-form-fields > div[style*="flex-direction:column"] {
    gap: 13px !important;
    margin-bottom: 1.25rem !important;
  }

  .services #interest-form-section .fp-item[data-step="6"] .fp-form-fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding-bottom: calc(28px + var(--cf-safe-bottom)) !important;
  }

  .services #interest-form-section .fp-item[data-step="6"] .fp-form-fields > div,
  .services #interest-form-section .fp-item[data-step="6"] .fp-form-fields > p,
  .services #interest-form-section .fp-item[data-step="6"] .fp-form-fields > label {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .services #interest-form-section .fp-item[data-step="6"] textarea {
    min-height: 112px !important;
    max-height: 150px !important;
    resize: vertical !important;
    line-height: 1.45 !important;
  }

  .services #interest-form-section .fp-item[data-step="6"] input[type="text"] {
    margin-top: 2px !important;
  }

  .services #interest-form-section .fp-item[data-step="6"] .fp-form-fields > p {
    color: rgba(29, 33, 69, 0.66) !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    letter-spacing: 0.04em !important;
  }

  .services #interest-form-section .fp-item[data-step="6"] .fp-form-fields label {
    align-items: start !important;
    color: rgba(29, 33, 69, 0.68) !important;
  }

  .services #interest-form-section .fp-item[data-step="6"] .fp-form-fields > div[style*="flex-wrap:wrap"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .services #interest-form-section .fp-item[data-step="6"] button[type="submit"] {
    display: inline-flex !important;
    width: 100% !important;
    min-height: 52px !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 4px !important;
    padding: 0.85rem 1.2rem !important;
  }

  .input-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .input-row input,
  .input-row textarea,
  form input,
  form textarea,
  form select {
    width: 100% !important;
    min-width: 0 !important;
  }

  #submit,
  button[type="submit"],
  input[type="submit"],
  input[type="button"] {
    width: 100% !important;
    min-height: 50px !important;
  }

  .step-btn,
  .jelly-button {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    white-space: normal !important;
  }

  .progress {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 20px auto 0 !important;
  }

  .cf-footer,
  #footer {
    padding: 48px var(--cf-mobile-pad) calc(38px + var(--cf-safe-bottom)) !important;
  }

  .cf-footer *,
  #footer * {
    max-width: 100%;
  }

  .cf-footer .bs-grid,
  #footer .bs-grid,
  .footer-bottom,
  .footer-top {
    gap: 20px !important;
  }

  .cf-footer a,
  #footer a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
  }

  #footer .footer-bottom ul,
  .cf-footer__social {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px 18px !important;
    padding-left: 0 !important;
  }

  #footer .footer-bottom li,
  .cf-footer__social li {
    margin-left: 0 !important;
  }

  #interest-form .fp-item[data-step="6"].active {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  #interest-form .fp-item[data-step="6"].active .inner {
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
  }
}

@media only screen and (max-width: 520px) {
  .grid-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #clients .client-wrap .row {
    grid-template-columns: 1fr !important;
  }

  .home #hero .bs-220 {
    font-size: clamp(38px, 15vw, 62px) !important;
  }

  /* Root cause fix (not overflow-x masking): these headings force
     white-space: nowrap in main.css with clamp() sizes up to 96-118px.
     On narrow/tablet viewports the text is wider than the screen and
     either overlaps neighbouring content or gets invisibly clipped by
     the overflow-x:hidden safety net above. Let them wrap naturally. */
  #footer .contact-link .contact-single-line,
  #testimonials .testimonial-title,
  .work #work-titles .title-two-lines {
    white-space: normal !important;
    word-break: break-word;
  }

  #menu-slide #links div:first-of-type a {
    font-size: clamp(38px, 12.5vw, 58px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}