/* Nordiska Takbehandlingar - /om-oss and /kontakt.
   Loaded after site.css. Every size was measured from the Framer pages at 390 / 1024 / 1440;
   breakpoints are Framer's: desktop >= 1200, tablet 810-1199.98, mobile < 810. */

:root {
  --on-photo: #f9f9f9;            /* hero card text over the photo */
  --nowocoat: #004b6b;            /* paint supplier logo panel */
  --strip-line: #dddddd;          /* dividers in the kontakt trust strip */
  --input-line: rgba(136, 136, 136, 0.1);
  --input-line-hover: rgba(17, 17, 17, 0.12);
  --input-focus-bg: #e8e3d6;
  --chevron: #999999;
  --tel: #000000;
  --f-dm: "DM Sans", "Helvetica Neue", sans-serif;
  /* Framer spring (stiffness 250, damping 80, mass 1): overdamped, settles in 1.64 s */
  --spring-80: cubic-bezier(0.22, 1, 0.36, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-80: linear(0, 0.004 0.4%, 0.033 1.3%, 0.090 2.5%, 0.164 4.1%, 0.245 6.1%, 0.329 8.3%, 0.412 10.7%, 0.492 13.5%, 0.567 16.5%, 0.636 19.7%, 0.697 23.2%, 0.751 26.9%, 0.798 30.8%, 0.838 34.9%, 0.872 39.3%, 0.899 43.8%, 0.922 48.6%, 0.940 53.5%, 0.955 58.7%, 0.966 64.0%, 0.975 69.6%, 0.981 75.3%, 0.986 81.2%, 0.990 87.3%, 0.993 93.5%, 1);
  }
}

/* Framer's appear effect on these pages: slide 100 px from the side on that spring */
.spring { --reveal-dur: 1.64s; --reveal-ease: var(--spring-80); }

/* =================================== /om-oss =================================== */

/* Framer clips the page at its own wrapper: the 544 px logo panel at phone width and the
   100 px side slides never widen the document (body clip would reach the viewport instead) */
.site > main.om { overflow-x: clip; }
.om-overview { display: flex; flex-direction: column; gap: 72px; padding-top: 175px; }

/* hero card: photo with the whole card desaturated and multiplied onto the page ground,
   exactly as Framer renders it (filter + mix-blend-mode on the card) */
.om-hero {
  position: relative; display: flex; align-items: center; justify-content: center;
  border-radius: 15px;
  filter: brightness(1) saturate(0.63); mix-blend-mode: multiply;
}
.om-hero__media { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.om-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.om-hero__content {
  position: relative; flex: 1 0 0; width: 1px; max-width: 65%;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  padding: 65px 30px; text-align: center;
}
.om-hero__top { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.om-hero__title, .om-hero__lead { width: 100%; color: var(--on-photo); text-align: center; }

/* paint supplier: logo panel + text */
.om-supplier__row { align-items: center; }
.om-logo-panel {
  flex: none; width: 544px; height: 456px; border-radius: 15px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: var(--nowocoat);
}
.om-logo-panel__img { flex: none; width: 436px; aspect-ratio: 1.19298; display: flex; align-items: center; justify-content: center; }
.om-logo-panel__img img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 1199.98px) {
  .om-overview { gap: 56px; }
  .om-hero__content { gap: 24px; }
  .om-supplier { padding: 50px 0; }
  .om-supplier__row { align-items: center; }
  .om-supplier__row .split__text { flex: 1 0 0; width: 1px; max-width: 440px; }
  .om-logo-panel__img { aspect-ratio: auto; height: 100%; }
}
@media (max-width: 809.98px) {
  .om-overview { gap: 48px; }
  .om-hero { flex-direction: column; }
  .om-hero__content { flex: none; width: 100%; }
  .om-supplier { width: calc(100% - 48px); }
  .om-supplier__row { align-items: stretch; }
  .om-supplier__row .split__text { flex: none; width: 100%; max-width: none; }
  /* Framer keeps the 544 px panel at phone width; it reads as a full-bleed band. The logo is
     kept inside the screen instead of being cut at both edges (defect fix). */
  .om-logo-panel { align-self: center; }
  .om-logo-panel__img { width: min(436px, 100vw - 48px); height: auto; aspect-ratio: 1.14; }
}

/* =================================== /kontakt =================================== */

.site > main.kt { gap: 100px; padding-top: 196px; }
.kt-hero { width: 100%; max-width: 760px; display: flex; flex-direction: column; align-items: center; gap: 64px; }
.kt-hero__title { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.kt-h1 {
  width: 100%; font-family: var(--f-display); font-weight: 400; color: var(--ink);
  font-size: 56px; line-height: 1.05; letter-spacing: -0.04em; text-align: center;
}
.kt-lead { width: 100%; }
.kt-call { width: 100%; }
.kt-call__tel { color: var(--tel); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--t-fast) var(--ease-out); }
.kt-call__tel:hover { text-decoration-color: currentColor; }

.kt-content { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }

/* trust strip */
.kt-strip {
  width: 100%; height: 111px; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--card); border-radius: 15px; overflow: hidden;
}
.kt-strip li {
  flex: none; width: 123px; height: 61px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.kt-strip li:nth-child(even) { width: 124px; }
.kt-strip li:not(:last-child) { box-shadow: inset -1px 0 0 var(--strip-line); }
.kt-strip__title {
  width: 100px; font-family: var(--f-display); font-weight: 400; font-size: 16px; line-height: 24px;
  letter-spacing: -0.02em; color: var(--ink); text-align: center;
}
.kt-strip__sub {
  width: 100%; font-family: var(--f-dm); font-weight: 400; font-size: 9px; line-height: 13.5px;
  letter-spacing: -0.01em; color: var(--ink-70); text-align: center;
}

/* the quote form */
.kt-form { width: 100%; }
.kt-form .form-card__title { font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: -0.02em; }
.kt-form .form-card__lead { margin-top: 8px; }
.kt-form__note { margin-top: 32px; font-size: 14px; line-height: 21px; color: var(--ink-70); }
.kt-form .field input, .kt-form .field textarea, .kt-form .field select { box-shadow: inset 0 0 0 1px var(--input-line); }
.kt-form .field input:hover, .kt-form .field textarea:hover, .kt-form .field select:hover { box-shadow: inset 0 0 0 1px var(--input-line-hover); }
.kt-form .field input:focus-visible, .kt-form .field textarea:focus-visible, .kt-form .field select:focus-visible {
  box-shadow: inset 0 0 0 1px var(--green); background: var(--input-focus-bg);
}
.kt-form .field input[aria-invalid="true"], .kt-form .field textarea[aria-invalid="true"], .kt-form .field select[aria-invalid="true"] { box-shadow: inset 0 0 0 1px #a63d2f; }
.kt-select { position: relative; display: block; }
.kt-select::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 16px; width: 16px; pointer-events: none;
  background-color: var(--chevron);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  transition: transform var(--t-fast) var(--ease-out);
}
.kt-select:hover::after { transform: translateY(1px); }
.kt-form .field select {
  display: block; height: 56px; min-height: 56px; padding: 16px 48px 16px 16px;
  color: var(--ink); cursor: pointer; text-overflow: ellipsis; white-space: nowrap;
}
.kt-form .field select option { color: #000; }

/* reviews */
.kt-reviews__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.kt-rating { width: 416px; max-width: 100%; height: 29px; display: flex; align-items: center; justify-content: center; }
.kt-rating__stars { flex: none; width: 125px; height: 24px; padding: 0 13px; display: flex; align-items: center; }
.kt-rating__stars img { width: 99px; }
.kt-rating__text { font-size: 14px; line-height: 21px; color: var(--ink-70); white-space: nowrap; }
.kt-rating__text strong { font-weight: 700; }
.kt-reviews__body { position: relative; margin-top: 56px; }
.kt-reviews__body .carousel__arrows { position: absolute; right: 0; top: -96px; z-index: 1; }
.kt-reviews .carousel { margin-top: 0; height: 403px; }
/* Framer card: quote and footer share a block with a 32 px gap and a 36 px footer row
   (site.css spaces all three children 48 px apart; shared fix requested) */

@media (max-width: 1199.98px) {
  .site > main.kt { padding-top: 128px; }
  .kt-hero { gap: 56px; }
  .kt-strip { height: auto; padding: 10px 0; }
}
@media (max-width: 809.98px) {
  .site > main.kt { padding: 128px 16px 0; }
  .kt-hero { gap: 48px; }
  .kt-hero__title { padding: 22px 0; }
  .kt-h1 { font-size: 38px; }
  .kt-strip { display: none; }
  .kt-form .form-card__title { font-size: 16px; line-height: 24px; }
  .kt-reviews { width: calc(100% - 32px); }
  .kt-reviews__head { padding: 51px 0; }
  .kt-rating { flex-direction: column; width: 323px; height: auto; }
  .kt-reviews__body { margin-top: 53px; }
}

@media (prefers-reduced-motion: reduce) {
  .kt-call__tel, .kt-select::after { transition: none; }
}