/* Wygenerowane z public/index.html przez narzedzia/podstrony.py. Nie edytuj ręcznie. */
@font-face {
      font-family: 'JetBrains Mono';
      font-style: normal;
      font-weight: 400 600;
      font-display: swap;
      src: url("/fonts/jetbrainsmono-latinext.woff2") format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF
    }

    @font-face {
      font-family: 'JetBrains Mono';
      font-style: normal;
      font-weight: 400 600;
      font-display: swap;
      src: url("/fonts/jetbrainsmono-latin.woff2") format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
    }

    @font-face {
      font-family: 'Instrument Sans';
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      src: url("/fonts/instrument-latinext.woff2") format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF
    }

    @font-face {
      font-family: 'Instrument Sans';
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      src: url("/fonts/instrument-latin.woff2") format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
    }

    @font-face {
      font-family: 'Outfit';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url("/fonts/outfit-500-latin.woff2") format('woff2');
      unicode-range: U+0000-00FF
    }

    /* ======== VARIANT 2: dark premium ======== */
    :root {
      color-scheme: dark;
      --bg: #0F1113;
      --bg-2: #15181B;
      --bg-3: #1C2024;
      --bg-deep: #0A0B0D;
      --text: #F2F0EC;
      --muted: #A3A9AF;
      --faint: #7C838A;
      --line: rgba(255, 255, 255, 0.09);
      --line-2: rgba(255, 255, 255, 0.16);
      --field: #6B7178;
      --accent: #FF8A4C;
      --ink: #0F1113;
      --r: 6px;
      --ease: cubic-bezier(.2, .7, .2, 1)
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 84px
    }

    body {
      margin: 0;
      background: var(--bg)
    }

    .page {
      container-type: inline-size;
      background: var(--bg);
      color: var(--text);
      font-family: 'Instrument Sans', 'Helvetica Neue', Helvetica, sans-serif;
      font-size: 17px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale
    }

    ::selection {
      background: var(--accent);
      color: var(--ink)
    }

    a {
      color: inherit
    }

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

    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px
    }

    .wrap {
      max-width: 1320px;
      margin: 0 auto;
      padding: 0 clamp(16px, 4.5cqi, 56px)
    }

    .eyebrow {
      margin: 0;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted)
    }

    /* small square, echoing the dots of the logo */
    .eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      flex-shrink: 0;
      background: var(--accent)
    }

    .h2 {
      margin: 0;
      font-size: clamp(34px, 4.6cqi, 66px);
      line-height: 1.02;
      letter-spacing: -0.04em;
      font-weight: 500;
      text-wrap: balance
    }

    .muted {
      color: var(--muted)
    }

    .sec {
      padding: clamp(72px, 9cqi, 140px) 0
    }

    .alt {
      background: var(--bg-2);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line)
    }

    .head {
      display: flex;
      flex-wrap: wrap;
      gap: 20px 64px;
      align-items: flex-end;
      justify-content: space-between
    }

    .head>div {
      flex: 1 1 460px;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 20px
    }

    .head>p {
      flex: 0 1 420px;
      min-width: 0;
      margin: 0;
      font-size: 17px;
      line-height: 1.65;
      color: var(--muted)
    }

    .ico {
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    /* ---- buttons ---- */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 54px;
      padding: 0 26px;
      border-radius: 999px;
      font-size: 16px;
      font-weight: 600;
      text-decoration: none;
      white-space: nowrap;
      border: 1px solid transparent;
      font-family: inherit;
      cursor: pointer;
      transition: transform .2s ease, background-color .25s ease, border-color .25s ease, color .25s ease
    }

    .btn:hover {
      transform: translateY(-1px)
    }

    .btn-light {
      background: var(--text);
      color: var(--ink)
    }

    .btn-light:hover {
      background: #FFFFFF
    }

    .btn-line {
      background: transparent;
      color: var(--text);
      border-color: rgba(255, 255, 255, 0.34)
    }

    .btn-line:hover {
      border-color: var(--text);
      background: rgba(255, 255, 255, 0.06)
    }

    /* ---- header (transparent over the hero, solid after scrolling) ---- */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 40;
      color: var(--text);
      background: transparent;
      border-bottom: 1px solid transparent;
      transition: background-color .35s ease, border-color .35s ease, backdrop-filter .35s ease
    }

    .site-header.scrolled,
    .site-header.open {
      background: rgba(12, 13, 15, 0.82);
      -webkit-backdrop-filter: blur(16px) saturate(1.2);
      backdrop-filter: blur(16px) saturate(1.2);
      border-bottom-color: var(--line)
    }

    .site-header.open {
      background: var(--bg)
    }

    .bar {
      height: 80px;
      display: flex;
      align-items: center;
      gap: 24px
    }

    .logo {
      --logo-dot: #FF8A4C;
      display: flex;
      align-items: baseline;
      text-decoration: none;
      flex-shrink: 0;
      color: #FFFFFF;
      font-family: 'Outfit', 'Instrument Sans', sans-serif;
      font-size: 26px;
      font-weight: 500;
      letter-spacing: -0.01em;
      line-height: 1
    }

    /* each "i" is drawn as a stem with a square orange dot */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap
    }

    .logo .i {
      position: relative;
      display: inline-block;
      width: 0.104em;
      height: 0.5em;
      margin: 0 0.06em;
      background: currentColor
    }

    .logo .i::after {
      content: '';
      position: absolute;
      left: 50%;
      top: -0.3em;
      width: 0.19em;
      height: 0.19em;
      transform: translateX(-50%);
      background: var(--logo-dot)
    }

    .nav-main {
      display: flex;
      align-items: center;
      gap: 2px;
      margin-left: 28px
    }

    .nav-main a {
      position: relative;
      padding: 10px 14px;
      text-decoration: none;
      font-size: 15px;
      font-weight: 500;
      color: rgba(242, 240, 236, 0.82);
      transition: color .2s ease
    }

    .nav-main a::after {
      content: '';
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 4px;
      height: 1px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .3s var(--ease)
    }

    .nav-main a:hover {
      color: #FFFFFF
    }

    .nav-main a:hover::after {
      transform: scaleX(1)
    }

    .bar-right {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 18px
    }

    .bar-phone {
      text-decoration: none;
      font-size: 15px;
      font-weight: 600;
      white-space: nowrap;
      font-variant-numeric: tabular-nums
    }

    .bar-phone small {
      margin-right: 4px;
      font-size: 13px;
      font-weight: 400;
      color: var(--muted)
    }

    .bar-phone:hover {
      color: var(--accent)
    }

    .bar-right .btn {
      min-height: 46px;
      padding: 0 20px;
      font-size: 15px
    }

    .wide-only {
      display: flex;
      align-items: center;
      gap: 22px
    }

    .narrow-only {
      display: none
    }

    .round {
      width: 46px;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      padding: 0
    }

    .round-line {
      border: 1px solid rgba(255, 255, 255, 0.4);
      color: var(--text)
    }

    .round-dark {
      border: none;
      background: var(--text);
      color: var(--ink);
      cursor: pointer
    }

    .menu-close {
      display: none
    }

    .site-header.open .menu-close {
      display: block
    }

    .site-header.open .menu-open {
      display: none
    }

    .nav-mobile {
      display: none;
      padding: 8px 16px 24px;
      border-top: 1px solid var(--line);
      flex-direction: column
    }

    .site-header.open .nav-mobile {
      display: flex
    }

    .nav-mobile a {
      display: flex;
      align-items: center;
      min-height: 58px;
      border-bottom: 1px solid var(--line);
      text-decoration: none;
      font-size: 22px;
      font-weight: 500;
      letter-spacing: -0.02em
    }

    .nav-mobile a.btn {
      justify-content: center;
      min-height: 56px;
      margin-top: 20px;
      border-bottom: none;
      font-size: 17px;
      font-weight: 600;
      letter-spacing: 0
    }

    /* ---- hero: full-bleed photo ---- */
    .hero {
      position: relative;
      margin-top: -81px;
      min-height: clamp(620px, 100vh, 1100px);
      min-height: clamp(620px, 100svh, 1100px);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      overflow: hidden;
      background: #1A1612;
      isolation: isolate
    }

    .hero-media {
      position: absolute;
      inset: 0;
      z-index: -2
    }

    .hero-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 55%
    }

    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(180deg, rgba(10, 11, 13, 0.62) 0%, rgba(10, 11, 13, 0) 22%),
        linear-gradient(90deg, rgba(10, 11, 13, 0.72) 0%, rgba(10, 11, 13, 0.35) 45%, rgba(10, 11, 13, 0) 75%),
        linear-gradient(0deg, rgba(10, 11, 13, 0.94) 0%, rgba(10, 11, 13, 0.6) 28%, rgba(10, 11, 13, 0) 60%)
    }

    .hero-inner {
      width: 100%;
      padding-top: 140px;
      padding-bottom: clamp(36px, 4.5cqi, 64px);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 24px
    }

    .hero .eyebrow {
      color: rgba(242, 240, 236, 0.86)
    }

    .hero h1 {
      max-width: 15ch;
      margin: 0;
      font-size: clamp(44px, 6.8cqi, 104px);
      line-height: 0.97;
      letter-spacing: -0.045em;
      font-weight: 500;
      color: #FFFFFF;
      text-wrap: balance;
      text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25)
    }

    .hero h1 span {
      color: rgba(242, 240, 236, 0.66)
    }

    .hero-lead {
      max-width: 520px;
      margin: 4px 0 0;
      font-size: clamp(17px, 1.45cqi, 20px);
      line-height: 1.6;
      color: rgba(242, 240, 236, 0.86)
    }

    /* glass info strip at the bottom of the photo */
    .hero-strip {
      position: relative;
      border-top: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(14, 15, 17, 0.42);
      -webkit-backdrop-filter: blur(18px) saturate(1.3);
      backdrop-filter: blur(18px) saturate(1.3)
    }

    .strip {
      display: flex;
      align-items: stretch
    }

    .strip>* {
      padding: 22px 32px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
      min-width: 0
    }

    .strip>*:first-child {
      padding-left: 0
    }

    .strip>*+* {
      border-left: 1px solid rgba(255, 255, 255, 0.14)
    }

    .strip small {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(242, 240, 236, 0.7)
    }

    .strip-rate b {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 17px;
      font-weight: 600
    }

    .stars {
      display: flex;
      gap: 2px
    }

    .stars svg {
      fill: var(--accent)
    }

    .strip-rate span {
      font-size: 14px;
      color: rgba(242, 240, 236, 0.75)
    }

    .strip-phone {
      text-decoration: none
    }

    .strip-phone strong {
      font-size: 22px;
      font-weight: 500;
      letter-spacing: -0.01em;
      font-variant-numeric: tabular-nums;
      transition: color .2s ease
    }

    .strip-phone:hover strong {
      color: var(--accent)
    }

    .strip-cap span {
      font-size: 15px;
      color: rgba(242, 240, 236, 0.88)
    }

    .strip-cta {
      margin-left: auto;
      padding-right: 0 !important
    }

    .strip-cta .btn {
      min-height: 56px;
      padding: 0 30px
    }

    /* ---- photo frames ---- */
    .shot {
      position: relative;
      margin: 0;
      overflow: hidden;
      border-radius: var(--r);
      background: var(--bg-3)
    }

    .shot>img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    /* ---- about + stats ---- */
    .about-row {
      display: flex;
      flex-wrap: wrap;
      gap: 24px 64px
    }

    .about-row .eyebrow {
      flex: 1 1 220px;
      align-self: flex-start;
      padding-top: 12px
    }

    .about-row p.lead {
      flex: 999 1 640px;
      min-width: 0;
      margin: 0;
      font-size: clamp(20px, 2.2cqi, 32px);
      line-height: 1.35;
      font-weight: 400;
      letter-spacing: -0.025em;
      text-wrap: pretty
    }

    .about-row p.lead em {
      font-style: normal;
      color: var(--muted)
    }

    .stats {
      margin-top: clamp(56px, 7cqi, 104px);
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border-top: 1px solid var(--line)
    }

    .stats>div {
      padding: 32px 28px 0;
      border-left: 1px solid var(--line)
    }

    .stats>div:first-child {
      border-left: none;
      padding-left: 0
    }

    .stats b {
      display: block;
      white-space: nowrap;
      font-size: clamp(40px, 4.4cqi, 66px);
      font-weight: 400;
      letter-spacing: -0.05em;
      line-height: 1
    }

    .stats span {
      display: block;
      margin-top: 14px;
      font-size: 15px;
      color: var(--muted)
    }

    /* ---- offer ---- */
    .cards {
      margin-top: clamp(44px, 5cqi, 72px);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
      gap: 16px
    }

    .card {
      position: relative;
      border: 1px solid var(--line-2);
      border-radius: var(--r);
      background: rgba(255, 255, 255, 0.015);
      padding: clamp(26px, 2.6cqi, 38px);
      display: flex;
      flex-direction: column;
      gap: 16px;
      transition: border-color .35s ease, background-color .35s ease
    }

    .card:hover {
      border-color: rgba(255, 255, 255, 0.32);
      background: rgba(255, 255, 255, 0.035)
    }

    .card-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: clamp(28px, 4cqi, 64px)
    }

    .pill {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .card-ico {
      width: 48px;
      height: 48px;
      border-radius: 999px;
      border: 1px solid var(--line-2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text)
    }

    .card h3 {
      margin: 0;
      font-size: clamp(23px, 2cqi, 28px);
      line-height: 1.15;
      font-weight: 500;
      letter-spacing: -0.025em
    }

    .card>p {
      margin: 0;
      font-size: 16px;
      line-height: 1.65;
      color: var(--muted)
    }

    .card.dark {
      background: var(--bg-3);
      border-color: rgba(255, 255, 255, 0.2)
    }

    .card.dark::before {
      content: '';
      position: absolute;
      left: -1px;
      right: -1px;
      top: -1px;
      height: 2px;
      background: var(--accent);
      border-radius: var(--r) var(--r) 0 0
    }

    .card.dark .pill {
      color: var(--accent)
    }

    /* line drawings in the offer cards (drawing-sheet grid behind white ink) */
    .card .card-top {
      margin-bottom: 4px
    }

    .card-no {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 12px;
      letter-spacing: 0.08em;
      color: var(--muted)
    }

    .card-art {
      position: relative;
      aspect-ratio: 16 / 10;
      margin-bottom: 12px;
      border: 1px solid var(--line);
      border-radius: var(--r);
      overflow: hidden;
      background-color: rgba(255, 255, 255, 0.012);
      background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
      background-size: 20px 20px;
      background-position: -1px -1px
    }

    .card.dark .card-art {
      border-color: rgba(255, 255, 255, 0.14);
      background-color: rgba(255, 255, 255, 0.02)
    }

    .card-art svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%
    }

    .card-art text {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 7.5px;
      letter-spacing: 0.08em;
      fill: var(--faint)
    }

    .card-art .ink {
      fill: none;
      stroke: var(--text);
      stroke-width: 1.4;
      stroke-linejoin: round;
      stroke-linecap: round
    }

    .card-art .thin {
      fill: none;
      stroke: rgba(242, 240, 236, 0.55);
      stroke-width: 1
    }

    .card-art .ghost {
      fill: none;
      stroke: rgba(242, 240, 236, 0.32);
      stroke-width: 1;
      stroke-dasharray: 4 4
    }

    .card-art .acc {
      fill: none;
      stroke: var(--accent);
      stroke-width: 1.2;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .card-art .acc-dash {
      fill: none;
      stroke: var(--accent);
      stroke-width: 1;
      stroke-dasharray: 5 4
    }

    .offer-foot {
      margin-top: 40px;
      padding-top: 32px;
      border-top: 1px solid var(--line);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 20px 32px
    }

    .offer-foot p {
      flex: 1 1 360px;
      margin: 0;
      font-size: 19px;
      line-height: 1.5;
      letter-spacing: -0.01em
    }

    /* ---- realizations ---- */
    .gallery {
      margin-top: clamp(44px, 5cqi, 72px);
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 16px
    }

    .gallery .shot {
      height: clamp(300px, 34cqi, 500px)
    }

    .gallery .shot.wide {
      grid-column: 1 / -1;
      height: clamp(280px, 32cqi, 480px)
    }

    .gallery .shot::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, rgba(10, 11, 13, 0.78) 0%, rgba(10, 11, 13, 0) 45%);
      pointer-events: none
    }

    .gallery .shot>img {
      filter: brightness(0.8) saturate(0.85)
    }

    .gallery figcaption {
      position: absolute;
      z-index: 1;
      left: clamp(18px, 2.2cqi, 32px);
      right: clamp(18px, 2.2cqi, 32px);
      bottom: clamp(16px, 2cqi, 28px);
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: 4px 16px
    }

    .gallery figcaption span:first-child {
      font-size: clamp(20px, 2cqi, 30px);
      font-weight: 500;
      letter-spacing: -0.025em;
      color: #FFFFFF
    }

    .gallery figcaption span+span {
      font-size: 14px;
      color: rgba(242, 240, 236, 0.8)
    }

    /* ---- reviews ---- */
    .rating {
      flex: 0 1 auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px 28px;
      border: 1px solid var(--line-2);
      border-radius: var(--r);
      padding: 20px 24px
    }

    .head>div.rating {
      flex: 0 1 auto;
      flex-direction: row;
      gap: 16px 28px
    }

    .rating>b {
      font-size: 60px;
      font-weight: 400;
      letter-spacing: -0.05em;
      line-height: 1
    }

    .rating-meta {
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .rating-meta>span:last-child {
      font-size: 14px;
      color: var(--muted)
    }

    .rating .btn {
      min-height: 46px;
      padding: 0 18px;
      font-size: 14px
    }

    .reviews {
      margin-top: clamp(40px, 5cqi, 64px);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
      gap: 16px
    }

    .review {
      position: relative;
      margin: 0;
      border: 1px solid var(--line-2);
      border-radius: var(--r);
      padding: clamp(28px, 3.6cqi, 52px);
      display: flex;
      flex-direction: column;
      gap: 24px;
      background: rgba(255, 255, 255, 0.015)
    }

    .review>span {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .review>span::after {
      content: '\201D';
      font-size: 64px;
      line-height: 0.5;
      height: 24px;
      letter-spacing: 0;
      color: var(--accent);
      font-weight: 500
    }

    .review blockquote {
      margin: 0;
      font-size: clamp(21px, 2.1cqi, 29px);
      line-height: 1.4;
      font-weight: 400;
      letter-spacing: -0.02em
    }

    .review figcaption {
      margin-top: auto;
      padding-top: 24px;
      border-top: 1px solid var(--line);
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 15px;
      line-height: 1.4
    }

    .review figcaption>span:first-child {
      width: 44px;
      height: 44px;
      border-radius: 999px;
      overflow: hidden;
      flex-shrink: 0;
      background: #2A2F34
    }

    /* ---- process ---- */
    .steps {
      list-style: none;
      margin: clamp(48px, 5.5cqi, 80px) 0 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
      gap: 40px 28px
    }

    .steps li {
      position: relative;
      padding-top: 30px;
      border-top: 1px solid var(--line-2);
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .steps li::before {
      content: '';
      position: absolute;
      left: 0;
      top: -1px;
      width: 48px;
      height: 2px;
      background: var(--accent)
    }

    .steps .num {
      width: 50px;
      height: 50px;
      border-radius: 999px;
      border: 1px solid var(--line-2);
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px
    }

    .steps small {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .steps h3 {
      margin: 0;
      font-size: 24px;
      line-height: 1.2;
      font-weight: 500;
      letter-spacing: -0.02em
    }

    .steps p {
      margin: 0;
      font-size: 16px;
      line-height: 1.65;
      color: var(--muted)
    }

    /* ---- CTA band: full-bleed photo ---- */
    .cta {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      min-height: clamp(460px, 44cqi, 640px);
      display: flex;
      align-items: center;
      background: #1A1612
    }

    .cta-img {
      position: absolute;
      inset: 0;
      z-index: -2
    }

    .cta-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 60%
    }

    .cta::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(90deg, rgba(10, 11, 13, 0.92) 0%, rgba(10, 11, 13, 0.7) 40%, rgba(10, 11, 13, 0.2) 80%),
        linear-gradient(0deg, rgba(10, 11, 13, 0.5), rgba(10, 11, 13, 0.1))
    }

    .cta .wrap {
      width: 100%
    }

    .cta-body {
      max-width: 600px;
      padding: clamp(64px, 7cqi, 112px) 0;
      display: flex;
      flex-direction: column;
      gap: 22px
    }

    .cta p {
      margin: 0;
      max-width: 480px;
      font-size: 18px;
      line-height: 1.6;
      color: rgba(242, 240, 236, 0.84)
    }

    .cta-actions {
      margin-top: 8px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px 28px
    }

    .cta-actions>a:last-child {
      color: #FFFFFF;
      font-size: 20px;
      font-weight: 500;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.35);
      font-variant-numeric: tabular-nums
    }

    .cta-actions>a:last-child:hover {
      border-color: var(--accent)
    }

    .cta p.eyebrow,
    .contact>div>p.eyebrow {
      max-width: none;
      font-size: 12px;
      line-height: 1.4;
      color: rgba(242, 240, 236, 0.8)
    }

    /* ---- founder ---- */
    .founder {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 40px clamp(40px, 7cqi, 112px)
    }

    .founder .photo {
      position: relative;
      flex: 1 1 300px;
      max-width: 500px;
      aspect-ratio: 4 / 4.9;
      border-radius: var(--r);
      overflow: hidden;
      background: var(--bg-3)
    }

    .founder .photo img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center 72%;
      filter: grayscale(0.35) brightness(0.92)
    }

    .founder-text {
      flex: 1.3 1 360px;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 22px
    }

    .founder-text .h2 {
      font-size: clamp(40px, 5.4cqi, 76px)
    }

    .founder-text>p:not(.eyebrow) {
      margin: 0;
      font-size: 18px;
      line-height: 1.7;
      color: var(--muted);
      max-width: 580px
    }

    .founder-text>p:not(.eyebrow)+p {
      margin-top: 16px
    }

    .founder-list {
      list-style: none;
      margin: 10px 0 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
      border-top: 1px solid var(--line);
      max-width: 640px
    }

    .founder-list li {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 0;
      border-bottom: 1px solid var(--line);
      font-size: 16px;
      font-weight: 500
    }

    .founder-list svg {
      flex-shrink: 0;
      color: var(--accent)
    }

    /* ---- faq ---- */
    .faq-wrap {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 32px 80px
    }

    .faq-wrap>div:first-child {
      flex: 1 1 300px;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 20px
    }

    .faq-wrap>div:first-child p:last-child {
      margin: 0;
      font-size: 17px;
      color: var(--muted)
    }

    .faq-wrap>div:first-child a {
      color: var(--text);
      font-weight: 600;
      text-decoration-color: var(--accent);
      text-underline-offset: 4px
    }

    .faq {
      flex: 999 1 600px;
      min-width: 0;
      border-top: 1px solid var(--line-2)
    }

    .faq details {
      border-bottom: 1px solid var(--line-2)
    }

    .faq summary {
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      padding: 28px 0;
      font-size: clamp(19px, 1.7cqi, 23px);
      font-weight: 500;
      letter-spacing: -0.015em;
      line-height: 1.3;
      cursor: pointer;
      transition: color .2s ease
    }

    .faq summary:hover {
      color: #FFFFFF
    }

    .faq summary::-webkit-details-marker {
      display: none
    }

    .faq summary>span {
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      border-radius: 999px;
      border: 1px solid var(--line-2);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color .25s ease, background-color .25s ease, color .25s ease
    }

    .faq details[open] summary>span {
      background: var(--accent);
      border-color: var(--accent);
      color: var(--ink)
    }

    .faq summary svg {
      transition: transform .25s ease
    }

    .faq details[open] summary svg {
      transform: rotate(45deg)
    }

    .faq details p {
      margin: -6px 0 30px;
      max-width: 700px;
      font-size: 17px;
      line-height: 1.7;
      color: var(--muted)
    }

    /* ---- contact ---- */
    .contact {
      display: flex;
      flex-wrap: wrap;
      gap: 48px clamp(40px, 6cqi, 96px)
    }

    .contact>div:first-child {
      flex: 1 1 360px;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 20px
    }

    .contact>div>p {
      margin: 0;
      font-size: 17px;
      line-height: 1.65;
      color: var(--muted)
    }

    .contact .big-phone {
      margin-top: 12px;
      text-decoration: none;
      font-size: clamp(38px, 4.4cqi, 60px);
      font-weight: 400;
      letter-spacing: -0.04em;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      transition: color .2s ease
    }

    .contact .big-phone:hover {
      color: var(--accent)
    }

    .contact .hours {
      font-size: 17px !important
    }

    .contact .hours a {
      color: var(--text);
      text-decoration-color: rgba(255, 255, 255, 0.35);
      text-underline-offset: 5px
    }

    .contact .hours a:hover {
      text-decoration-color: var(--accent)
    }

    .office {
      margin-top: 16px;
      padding-top: 28px;
      border-top: 1px solid var(--line);
      display: flex;
      flex-wrap: wrap;
      gap: 24px 48px
    }

    .office>div {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .office p {
      margin: 0;
      font-size: 15px;
      line-height: 1.65;
      color: var(--muted)
    }

    .office .office-title {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--faint)
    }

    .office address {
      font-style: normal;
      font-size: 17px;
      font-weight: 500;
      line-height: 1.5
    }

    .office .office-note {
      flex: 1 1 100%;
      max-width: 480px
    }

    .open-hours {
      margin: 0;
      display: grid;
      grid-template-columns: auto auto;
      gap: 0 20px;
      font-size: 15px;
      line-height: 1.7
    }

    .open-hours dt {
      color: var(--muted)
    }

    .open-hours dd {
      margin: 0;
      font-weight: 600;
      font-variant-numeric: tabular-nums
    }

    .office .btn {
      min-height: 48px;
      font-size: 15px
    }

    .contact>.contact-map {
      flex: 1 1 100%;
      height: clamp(280px, 30cqi, 420px);
      border-radius: var(--r);
      overflow: hidden;
      border: 1px solid var(--line-2);
      background: var(--bg-3)
    }

    .contact-map iframe {
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
      /* dark map to match the page; full colour on hover */
      filter: invert(0.9) hue-rotate(180deg) grayscale(0.4) contrast(0.92);
      transition: filter .5s ease
    }

    .contact-map:hover iframe {
      filter: none
    }

    form {
      flex: 1.3 1 440px;
      align-self: flex-start;
      min-width: 0;
      margin: 0;
      background: var(--bg-2);
      border: 1px solid var(--line-2);
      border-radius: var(--r);
      padding: clamp(22px, 3.2cqi, 44px);
      display: flex;
      flex-direction: column;
      gap: 20px
    }

    fieldset {
      margin: 0;
      padding: 0;
      border: none
    }

    legend {
      padding: 0;
      margin-bottom: 12px;
      font-size: 15px;
      font-weight: 600
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px
    }

    .chips input {
      position: absolute;
      opacity: 0;
      pointer-events: none
    }

    .chips label {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: 0 18px;
      border-radius: 999px;
      border: 1px solid var(--field);
      background: transparent;
      color: var(--text);
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color .2s ease, color .2s ease, border-color .2s ease
    }

    .chips label:hover {
      border-color: var(--text)
    }

    .chips input:checked+label {
      background: var(--text);
      border-color: var(--text);
      color: var(--ink);
      font-weight: 600
    }

    .chips input:focus-visible+label {
      outline: 2px solid var(--accent);
      outline-offset: 3px
    }

    .fields {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
      gap: 16px
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .field label {
      font-size: 14px;
      font-weight: 600;
      color: var(--text)
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      border: 1px solid var(--field);
      border-radius: 10px;
      background: var(--bg-deep);
      color: var(--text);
      font-family: inherit;
      font-size: 16px;
      transition: border-color .2s ease, box-shadow .2s ease
    }

    .field input,
    .field select {
      height: 54px;
      padding: 0 16px
    }

    .field select {
      padding: 0 14px
    }

    .field textarea {
      padding: 14px 16px;
      line-height: 1.5;
      resize: vertical
    }

    .field textarea::placeholder {
      color: #8A9097
    }

    .field input:hover,
    .field select:hover,
    .field textarea:hover {
      border-color: #8E959C
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(255, 138, 76, 0.22)
    }

    .hp {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden
    }

    .consent {
      display: flex;
      gap: 12px;
      align-items: flex-start
    }

    .consent input {
      width: 22px;
      height: 22px;
      margin: 1px 0 0;
      flex-shrink: 0;
      accent-color: var(--accent)
    }

    .consent label {
      font-size: 14px;
      line-height: 1.55;
      color: var(--muted)
    }

    .consent a {
      color: var(--text)
    }

    form .btn {
      min-height: 58px;
      font-size: 17px
    }

    /* form feedback: app.js sets .is-error / .is-info on the status line,
       aria-busy while sending and .is-sent once the message has gone */
    .form-status {
      margin: 0;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px 16px;
      border: 1px solid var(--line-2);
      border-left-width: 3px;
      border-radius: var(--r);
      background: rgba(255, 255, 255, 0.04);
      color: var(--text);
      font-size: 16px;
      line-height: 1.5;
      font-weight: 500
    }

    .form-status:empty {
      display: none
    }

    .form-status svg {
      flex-shrink: 0;
      margin-top: 2px
    }

    .form-status a {
      color: inherit;
      font-weight: 600
    }

    .form-status.is-error {
      border-color: rgba(255, 120, 110, 0.55);
      background: rgba(255, 120, 110, 0.1);
      color: #FFC9C4
    }

    .form-status.is-info {
      border-color: rgba(255, 138, 76, 0.5);
      background: rgba(255, 138, 76, 0.08)
    }

    form[aria-busy="true"] fieldset,
    form[aria-busy="true"] .fields,
    form[aria-busy="true"] .field,
    form[aria-busy="true"] .consent {
      opacity: 0.45;
      pointer-events: none;
      transition: opacity .2s ease
    }

    form .btn:disabled {
      cursor: progress;
      opacity: 1
    }

    .spinner {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      border: 2px solid currentColor;
      border-right-color: transparent
    }

    /* sent: the whole form card turns into the confirmation */
    form.is-sent>:not(.form-done) {
      display: none
    }

    .form-done {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      padding: clamp(8px, 2cqi, 24px) 0;
      outline: none
    }

    .form-done[hidden] {
      display: none
    }

    .form-done-ico {
      width: 64px;
      height: 64px;
      border-radius: 999px;
      background: var(--accent);
      color: #0F1113;
      display: grid;
      place-items: center
    }

    .form-done h3 {
      margin: 8px 0 0;
      font-size: clamp(26px, 2.6cqi, 36px);
      line-height: 1.1;
      letter-spacing: -0.03em;
      font-weight: 500
    }

    .form-done p {
      margin: 0;
      max-width: 460px;
      font-size: 17px;
      line-height: 1.6;
      color: var(--muted)
    }

    .form-done p a {
      color: var(--text);
      font-weight: 600
    }

    .form-done .btn {
      margin-top: 8px
    }

    @media (prefers-reduced-motion: no-preference) {
      @keyframes spin {
        to {
          transform: rotate(360deg)
        }
      }

      @keyframes pop-in {
        from {
          opacity: 0;
          transform: translateY(10px) scale(.98)
        }
      }

      .spinner {
        animation: spin .8s linear infinite
      }

      .form-done:not([hidden]) {
        animation: pop-in .5s cubic-bezier(.2, .7, .2, 1) both
      }

      .form-done:not([hidden]) .form-done-ico {
        animation: pop-in .5s cubic-bezier(.2, .7, .2, 1) .1s both
      }

      .form-status:not(:empty) {
        animation: pop-in .3s ease both
      }
    }

    /* ---- gminy ---- */
    .gminy {
      display: flex;
      flex-wrap: wrap;
      gap: 28px 64px;
      align-items: flex-start
    }

    .gminy>div {
      flex: 1 1 300px;
      display: flex;
      flex-direction: column;
      gap: 16px
    }

    .gminy h2 {
      margin: 0;
      font-size: clamp(26px, 2.4cqi, 34px);
      line-height: 1.15;
      letter-spacing: -0.03em;
      font-weight: 500
    }

    .gminy ul {
      flex: 999 1 640px;
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 8px
    }

    .gminy li span {
      display: inline-flex;
      align-items: center;
      min-height: 42px;
      padding: 0 16px;
      border: 1px solid var(--line-2);
      border-radius: 999px;
      font-size: 15px;
      color: rgba(242, 240, 236, 0.88);
      transition: border-color .2s ease
    }

    .gminy li span:hover {
      border-color: rgba(255, 255, 255, 0.4)
    }

    /* gminy with their own subpage (added by narzedzia/podstrony.py) */
    .gminy li a {
      display: inline-flex;
      align-items: center;
      min-height: 42px;
      padding: 0 16px;
      border: 1px solid rgba(255, 138, 76, 0.55);
      border-radius: 999px;
      font-size: 15px;
      color: var(--text);
      text-decoration: none;
      transition: border-color .2s ease, background-color .2s ease
    }

    .gminy li a:hover {
      border-color: var(--accent);
      background: rgba(255, 138, 76, 0.08)
    }

    .card-more {
      margin-top: auto;
      padding-top: 8px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 600;
      color: var(--text);
      text-decoration: none
    }

    .card-more:hover {
      color: var(--accent)
    }

    /* ---- footer ---- */
    .site-foot {
      background: var(--bg-deep);
      border-top: 1px solid var(--line)
    }

    .foot {
      color: var(--muted);
      padding: clamp(56px, 6cqi, 96px) 0 28px;
      font-size: 15px;
      line-height: 1.75
    }

    .foot-cols {
      display: flex;
      flex-wrap: wrap;
      gap: 40px 64px
    }

    .foot-cols>div {
      flex: 1.6 1 300px;
      display: flex;
      flex-direction: column;
      gap: 16px
    }

    .foot-cols p {
      margin: 0
    }

    .foot-cols nav {
      flex: 1 1 160px
    }

    .foot-cols nav p {
      margin: 0 0 12px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--faint)
    }

    .foot-cols ul {
      list-style: none;
      margin: 0;
      padding: 0
    }

    .foot a {
      color: var(--muted);
      text-decoration: none;
      transition: color .2s ease
    }

    .foot a:hover {
      color: #FFFFFF
    }

    .foot .logo {
      --logo-dot: #FF8A4C;
      color: #FFFFFF;
      font-size: 32px
    }

    .copy {
      margin: clamp(48px, 5cqi, 80px) 0 0;
      padding-top: 24px;
      border-top: 1px solid var(--line);
      font-size: 13px;
      color: var(--faint)
    }

    .copy a {
      text-decoration: underline;
      text-underline-offset: 3px
    }

    /* ---- mobile action bar ---- */
    .mobile-bar {
      display: none;
      position: sticky;
      bottom: 0;
      z-index: 30;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
      gap: 8px;
      padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
      background: rgba(12, 13, 15, 0.86);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
      border-top: 1px solid var(--line)
    }

    .mobile-bar .btn {
      min-height: 50px;
      padding: 0 12px
    }

    /* below 1100px: hamburger menu + sticky call/consult bar */
    @media (max-width:1099px) {

      .nav-main,
      .wide-only {
        display: none
      }

      .narrow-only {
        display: flex;
        align-items: center;
        gap: 8px
      }

      .mobile-bar {
        display: grid
      }

      .strip {
        flex-wrap: wrap
      }

      .strip-cap {
        display: none !important
      }
    }

    @media (max-width:760px) {
      .bar {
        height: 72px
      }

      .hero {
        margin-top: -73px;
        min-height: min(92svh, 860px)
      }

      .hero::before {
        background:
          linear-gradient(180deg, rgba(10, 11, 13, 0.7) 0%, rgba(10, 11, 13, 0) 24%),
          linear-gradient(0deg, rgba(10, 11, 13, 0.96) 0%, rgba(10, 11, 13, 0.72) 40%, rgba(10, 11, 13, 0.1) 75%)
      }

      .hero-media img {
        object-position: 42% 55%
      }

      .hero-inner {
        padding-top: 120px;
        gap: 18px
      }

      .strip>* {
        padding: 18px 0
      }

      .strip-rate {
        flex: 1 1 100%
      }

      .strip>*+* {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.14)
      }

      .strip-phone {
        flex: 1 1 100%
      }

      .strip-cta {
        display: none !important
      }

      .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .stats>div {
        padding: 26px 0 26px 20px
      }

      .stats>div:nth-child(odd) {
        border-left: none;
        padding-left: 0
      }

      .stats>div:nth-child(n+3) {
        border-top: 1px solid var(--line)
      }

      .stats>div:nth-child(3) {
        grid-column: 1 / -1
      }

      .gallery {
        grid-template-columns: 1fr
      }

      .gallery .shot,
      .gallery .shot.wide {
        height: auto;
        aspect-ratio: 4 / 3
      }

      .rating>b {
        font-size: 48px
      }

      .cta::before {
        background: linear-gradient(0deg, rgba(10, 11, 13, 0.9) 0%, rgba(10, 11, 13, 0.66) 100%)
      }
    }

    /* ---- motion: slow hero zoom, calm fade-up, gentle hover reveals ---- */
    @media (prefers-reduced-motion: no-preference) {
      .card.reveal .card-art .d {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        transition: stroke-dashoffset 1.6s var(--ease) calc(var(--reveal-delay, 0s) + .3s)
      }

      .card.reveal.is-in .card-art .d {
        stroke-dashoffset: 0
      }

      .card.reveal .card-art .pop {
        opacity: 0;
        transition: opacity .7s ease calc(var(--reveal-delay, 0s) + 1.2s)
      }

      .card.reveal.is-in .card-art .pop {
        opacity: 1
      }

      .card .card-art .lift {
        transition: transform .5s var(--ease)
      }

      .card:hover .card-art .lift {
        transform: translateY(-3px)
      }

      @keyframes rise {
        from {
          opacity: 0;
          transform: translateY(20px)
        }
      }

      @keyframes fade {
        from {
          opacity: 0
        }
      }

      @keyframes kenburns {
        from {
          transform: scale(1.12) translate3d(1.5%, 1%, 0)
        }

        to {
          transform: scale(1.0) translate3d(0, 0, 0)
        }
      }

      .hero-media img {
        animation: kenburns 22s cubic-bezier(.25, .6, .3, 1) both;
        will-change: transform
      }

      .hero .eyebrow,
      .hero h1,
      .hero-lead {
        animation: rise 1.1s var(--ease) both
      }

      .hero h1 {
        animation-delay: .12s
      }

      .hero-lead {
        animation-delay: .26s
      }

      .hero-strip {
        animation: fade 1.2s ease .45s both
      }

      .reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity .9s var(--ease), transform .9s var(--ease);
        transition-delay: var(--reveal-delay, 0s)
      }

      .reveal.is-in {
        opacity: 1;
        transform: none
      }

      .shot>img,
      .founder .photo img {
        transition: transform 1.4s var(--ease), filter .8s ease
      }

      .gallery .shot:hover>img {
        transform: scale(1.04);
        filter: brightness(1) saturate(1)
      }

      .founder .photo:hover img {
        transform: scale(1.03);
        filter: grayscale(0) brightness(1)
      }

      .gallery figcaption span+span {
        transition: transform .5s var(--ease), color .5s ease
      }

      .gallery .shot:hover figcaption span+span {
        transform: translateY(-3px);
        color: #FFFFFF
      }

      .btn svg {
        transition: transform .25s ease
      }

      .btn:hover svg {
        transform: translate(2px, -2px)
      }

    }

    @media (hover: none) {
      .gallery .shot>img {
        filter: brightness(0.9) saturate(0.95)
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto
      }

      .btn,
      .faq summary svg {
        transition: none
      }

      .btn:hover {
        transform: none
      }
    }