:root {
  --accent: #e8b65a;
  --accent-ink: #33270a;
  --accent-rgb: 232, 182, 90;
  --ink: #f4f6f5;
  --muted: #b9c2c4;
  --glass: rgba(20, 28, 34, 0.76);
  --glass-brd: rgba(255, 255, 255, 0.16);
  --overlay: 0.82;
  --font-head: 'Spectral', Georgia, serif;
  --font-ui: 'Archivo', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: #0a0f12;
}

.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #0a0f12;
  isolation: isolate;
}

/* ── scaled photo scene (native 1535×1024, anchored bottom-centre) ── */
.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1535px;
  height: 1024px;
  transform-origin: top left;
}

.stage img.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.fx {
  position: absolute;
  pointer-events: none;
}

/* legibility overlay above scene, below content */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(115% 80% at 50% 42%, rgba(6, 10, 13, 0) 30%, rgba(6, 10, 13, 0.55) 100%),
    linear-gradient(180deg, rgba(6, 10, 13, 0.78) 0%, rgba(6, 10, 13, 0.30) 26%, rgba(6, 10, 13, 0.34) 60%, rgba(6, 10, 13, 0.88) 100%);
  opacity: var(--overlay);
}

.bar-wrap,
.center,
.services,
.site-bottom,
.trust,
.views {
  position: relative;
  z-index: 2;
}

.bar-wrap {
  z-index: 40;
}

/* ═══════════ SCENE FX ═══════════ */
/* Lamp */
.lamp-core {
  left: 1190px;
  top: 300px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 150, 0.95) 0%, rgba(255, 196, 120, 0.45) 32%, rgba(255, 180, 110, 0) 68%);
  mix-blend-mode: screen;
  opacity: 0;
}

.lamp-pool {
  left: 1080px;
  top: 470px;
  width: 470px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 135, 0.55) 0%, rgba(255, 185, 120, 0.22) 40%, rgba(255, 170, 110, 0) 70%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: rotate(-12deg);
}

/* intro: strike on, then settle into the breathing loop (home, first visit) */
.lamp-core.intro {
  animation: lampStrike 1.2s ease 1.0s both, lampBreathe 5.5s ease-in-out 2.3s infinite;
}

.lamp-pool.intro {
  animation: lampStrike 1.2s ease 1.05s both, lampBreathe 5.5s ease-in-out 2.4s infinite;
}

/* ambient: already lit, breathing only — no strike (subpages / repeat home) */
.lamp-core.ambient,
.lamp-pool.ambient {
  opacity: 1;
  animation: lampBreathe 5.5s ease-in-out infinite;
}

@keyframes lampStrike {
  0% {
    opacity: 0;
  }

  24% {
    opacity: 0;
  }

  30% {
    opacity: .85;
  }

  36% {
    opacity: .15;
  }

  42% {
    opacity: 1;
  }

  48% {
    opacity: .4;
  }

  56% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes lampBreathe {

  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(.84);
  }
}

/* Window: drifting clouds + static breathing glow points + mug steam */
.clouds {
  left: -40px;
  top: 20px;
  width: 920px;
  height: 230px;
  opacity: .5;
  background: radial-gradient(60% 80% at 30% 40%, rgba(120, 140, 180, 0.18), transparent 70%),
    radial-gradient(50% 70% at 70% 55%, rgba(150, 130, 160, 0.15), transparent 70%);
  mix-blend-mode: screen;
}

.clouds.on {
  animation: drift 46s linear infinite alternate;
}

@keyframes drift {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(46px);
  }
}

/* glow points sit ON the real lights and breathe at different rates (“motion” without movement) */
.glow {
  border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  opacity: var(--lo, .4);
}

.glow.on {
  animation: glowPulse var(--dur, 3.5s) ease-in-out var(--del, 0s) infinite;
}

@keyframes glowPulse {

  0%,
  100% {
    opacity: var(--lo, .4);
  }

  50% {
    opacity: var(--hi, .9);
  }
}

.pier {
  left: 20px;
  top: 430px;
  width: 240px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 170, 255, 0.18), transparent 68%);
  mix-blend-mode: screen;
  opacity: .55;
}

.pier.on {
  animation: lampBreathe 6s ease-in-out infinite;
}

/* steam rising from the mug */
.steam {
  left: 700px;
  top: 512px;
  width: 74px;
  height: 150px;
  mix-blend-mode: screen;
}

.wisp {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 28px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(236, 242, 248, 0.92), rgba(236, 242, 248, 0) 72%);
  filter: blur(3.5px);
  opacity: 0;
  transform: translateX(-50%);
}

.wisp.on {
  animation: steam var(--sdur, 5s) ease-in var(--sdel, 0s) infinite;
}

@keyframes steam {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(.65, .55);
  }

  18% {
    opacity: .95;
  }

  55% {
    opacity: .7;
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--sx, 8px)), -96px) scale(1.7, 1.9);
  }
}

/* "system loading" overlay on the laptop screen — solid black, warped to the exact perspective coordinates of the screen */
.screen-fx {
  left: 100px;
  top: 538px;
  width: 470px;
  height: 290px;
  overflow: hidden;
  background: #05080a;
  transform: matrix3d(0.967717, -0.065957, 0.000000, 0.000327, 0.158645, 0.918326, 0.000000, -0.000053, 0.000000, 0.000000, 1.000000, 0.000000, 17.000000, 31.000000, 0.000000, 1.000000);
  transform-origin: 0 0;
}

.screen-fx .lap-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.screen-fx .screen-boot {
  position: absolute;
  inset: 0;
  background: #05080a;
  z-index: 2;
}

/* intro: hold black + spinner for a few seconds, then fade away ("system loaded") */
.screen-fx.intro .screen-boot {
  animation: sysLoad 4.4s ease 0.6s forwards;
}

/* ambient: boot already finished — show the interface immediately, no spinner */
.screen-fx.ambient .screen-boot {
  display: none;
}

@keyframes sysLoad {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.screen-fx .loader {
  position: absolute;
  left: 47.6%;
  top: 46.6%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border-radius: 50%;
  border: 4px solid rgba(150, 240, 222, 0.18);
  border-top-color: rgba(150, 240, 222, 0.95);
}

.screen-fx.intro .loader {
  animation: sysSpin .85s linear infinite;
}

@keyframes sysSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ───────── matte glass top bar ───────── */
.bar-wrap {
  display: flex;
  justify-content: center;
  padding: 22px 26px 0;
}

.bar {
  width: 100%;
  max-width: 1180px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 22px;
  border-radius: 18px;
  background: rgba(18, 25, 31, 0.76);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  white-space: nowrap;
}

.logo-img {
  height: 42px;
  width: auto;
  display: block;
}

nav {
  display: flex;
  gap: 2px;
  margin-left: 18px;
}

nav a {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 15px;
  color: #e7ecec;
  text-decoration: none;
  padding: 9px 15px;
  border-radius: 11px;
  transition: background .18s, color .18s;
}

nav a:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

nav a.active {
  background: rgba(44, 215, 236, 0.14);
  color: #2CD7EC;
  box-shadow: inset 0 0 0 1px rgba(44, 215, 236, 0.38);
}

.logo {
  text-decoration: none;
}

.mobile-nav a.active {
  background: rgba(44, 215, 236, 0.14);
  color: #2CD7EC;
  box-shadow: inset 0 0 0 1px rgba(44, 215, 236, 0.38);
}

.bar .grow {
  flex: 1;
}

/* language switcher — real crawlable links; active state set by main.js */
.lang-switch {
  display: flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  margin-right: 4px;
  border-radius: 999px;
  border: 1px solid var(--glass-brd);
  background: rgba(255, 255, 255, 0.05);
}

.lang-switch a {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .6px;
  color: var(--muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 7px;
  border-radius: 999px;
  transition: background .18s, color .18s;
}

.lang-switch .flag-icon {
  display: block;
  width: 24px;
  height: 16px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .24);
}

.lang-switch a:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #e7ecec;
}

.lang-switch a.active {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.btn {
  font-family: var(--font-ui);
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  justify-content: center;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 15px;
  padding: 11px 19px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.30);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(var(--accent-rgb), 0.42);
}

.bar .btn-primary {
  white-space: nowrap;
  animation: ctaGlow 3.4s ease-in-out infinite;
}

.cta-short {
  display: none;
}

/* hamburger + mobile dropdown (shown only on small screens) */
.menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 11px;
  border: 1px solid var(--glass-brd);
  background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
  margin-left: 4px;
}

.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #e7ecec;
  position: relative;
}

.menu-btn span::before {
  position: absolute;
  top: -6px;
}

.menu-btn span::after {
  position: absolute;
  top: 6px;
}

.mobile-nav {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 14px;
  right: 14px;
  z-index: 30;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(18, 25, 31, 0.86);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
}

.mobile-nav.open {
  display: flex;
}

.mobile-nav a {
  color: #e7ecec;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  padding: 12px 14px;
  border-radius: 10px;
}

.mobile-nav a:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ───────── centred hero content ───────── */
.center {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 60px 26px 30px;
  width: 100%;
  margin: 0 auto;
}

.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px;
  width: 100%;
  padding: 40px 56px 44px;
  border-radius: 30px;
  border: none;
  box-shadow: none;
  --scrim: 0.90;
}

.panel.bk-scrim,
.panel.bk-glass {
  background: radial-gradient(120% 135% at 50% 44%, rgba(6, 10, 13, var(--scrim)) 0%, rgba(6, 10, 13, calc(var(--scrim)*0.92)) 44%, rgba(6, 10, 13, 0) 78%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.panel.bk-glass {
  backdrop-filter: blur(7px) saturate(115%);
  -webkit-backdrop-filter: blur(7px) saturate(115%);
}

.eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}

.eyebrow::after {
  background: linear-gradient(90deg, var(--accent), transparent);
}

h1 {
  font-family: var(--font-head);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.5px;
  font-size: clamp(40px, 6.2vw, 76px);
  max-width: 16ch;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 6px 26px rgba(0, 0, 0, 0.55);
}

h1 em {
  font-style: italic;
  color: var(--accent);
}

/* Polish runs ~20% longer than English, so at the English type scale the hero heading
   wraps onto two extra lines and pushes the home page past the viewport. Widening the
   measure is what fixes the wrap — `ch` scales with font-size, so shrinking the type
   alone would keep the identical break. Both together land Polish on 2 lines, matching
   the English proportions. */
html[lang="pl"] h1 {
  max-width: 20ch;
  font-size: clamp(36px, 5.4vw, 66px);
}

.tagline {
  font-family: var(--font-ui);
  font-weight: 400;
  color: var(--muted);
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.55;
  max-width: 56ch;
  margin: 26px auto 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 16px rgba(0, 0, 0, 0.55);
}

.tagline b {
  color: #eef2f1;
  font-weight: 500;
}

.ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 38px;
}

/* In-page consultation CTAs keep a steady glow; the navigation CTA carries the motion. */
.ctas .btn-primary,
.services-cta .btn-primary {
  position: relative;
  box-shadow: 0 8px 26px rgba(var(--accent-rgb), 0.42), 0 0 26px 4px rgba(var(--accent-rgb), 0.24);
}

@keyframes ctaGlow {

  0%,
  100% {
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.30), 0 0 0 0 rgba(var(--accent-rgb), 0.45);
  }

  50% {
    box-shadow: 0 8px 26px rgba(var(--accent-rgb), 0.45), 0 0 30px 6px rgba(var(--accent-rgb), 0.32);
  }
}

.ctas .btn-primary:hover,
.services-cta .btn-primary:hover {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .bar .btn-primary {
    animation: none;
  }
}

.btn-lg {
  font-size: 16px;
  padding: 15px 28px;
  border-radius: 14px;
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn-ghost:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.12);
}

.btn .arr {
  transition: transform .18s ease;
}

.btn-ghost:hover .arr {
  transform: translateX(4px);
}

/* ───────── view container + content scrim box ───────── */
.views {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.view {
  display: none;
  flex: 1;
  flex-direction: column;
  width: 100%;
}

.view.is-active {
  display: flex;
  animation: viewIn .5s ease both;
}

@keyframes viewIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.about-center {
  align-items: center;
  justify-content: flex-start;
}

.scrim-box {
  position: relative;
  width: 100%;
  max-width: 1040px;
  text-align: left;
  padding: 46px 54px 50px;
  border-radius: 30px;
  --scrim: 0.90;
  background: radial-gradient(120% 135% at 50% 44%, rgba(6, 10, 13, var(--scrim)) 0%, rgba(6, 10, 13, calc(var(--scrim) * 0.92)) 44%, rgba(6, 10, 13, 0) 78%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.view-about.is-active .scrim-box,
.view-services.is-active .scrim-box,
.view-contact.is-active .scrim-box,
.view-book.is-active .scrim-box {
  opacity: 0;
  transform: translateY(22px);
  animation: rise .8s cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: .16s;
}

.scrim-box .eyebrow {
  margin-bottom: 16px;
}

.scrim-box h2 {
  font-family: var(--font-head);
  font-weight: 400;
  color: #fff;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.4px;
  max-width: 24ch;
  text-wrap: balance;
}

.scrim-box h2 em {
  font-style: italic;
  color: var(--accent);
}

.scrim-box .lede {
  font-family: var(--font-ui);
  font-weight: 400;
  color: var(--muted);
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.62;
  max-width: 76ch;
  margin-top: 20px;
  text-wrap: pretty;
}

.scrim-box .lede b {
  color: #eef2f1;
  font-weight: 500;
}

.scrim-box .lede+.lede {
  margin-top: 13px;
}

.about-box {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-box h2 {
  max-width: 28ch;
  margin-left: auto;
  margin-right: auto;
}

.about-box .lede {
  margin-left: auto;
  margin-right: auto;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 34px;
}

.about-features {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 26px 40px;
}

.view-about.is-active .about-features {
  animation: rise .6s cubic-bezier(.2, .7, .2, 1) .12s both;
}

.feat {
  padding: 20px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.feat:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(255, 255, 255, 0.06);
}

.feat .ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  margin-bottom: 13px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.30);
  color: var(--accent);
}

.feat .ico svg {
  width: 22px;
  height: 22px;
  display: block;
}

.feat h4 {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.22;
  color: #fff;
  margin-bottom: 6px;
}

.feat p {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.46;
  color: var(--muted);
}

.feat p.pl {
  font-style: italic;
  color: var(--accent);
  font-size: 14.5px;
}

/* stub pages (services / contact / book) */
.scrim-box.stub {
  max-width: 660px;
  text-align: center;
}

.scrim-box.stub .eyebrow,
.scrim-box.stub .ctas {
  justify-content: center;
}

.scrim-box.stub .lede {
  margin-left: auto;
  margin-right: auto;
}

.scrim-box.stub .ctas {
  margin-top: 30px;
}

/* Services, Contact and Book: keep the cinematic scene fixed and scroll within the glass panel. */
body[data-page="services"],
body[data-page="contact"],
body[data-page="book"] {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

body[data-page="services"] .hero,
body[data-page="contact"] .hero,
body[data-page="book"] .hero {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}

body[data-page="services"] .views,
body[data-page="services"] .view-services,
body[data-page="services"] .services-center,
body[data-page="contact"] .views,
body[data-page="contact"] .view-contact,
body[data-page="contact"] .contact-center,
body[data-page="book"] .views,
body[data-page="book"] .view-book,
body[data-page="book"] .book-center {
  min-height: 0;
}

.services-center {
  flex: 1;
  overflow: hidden;
  justify-content: flex-start;
}

.contact-center,
.book-center {
  flex: 1;
  overflow: hidden;
}

.services-box {
  display: flex;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  max-height: 98%;
  padding: 0;
  overflow: hidden;
}

.services-scroll {
  width: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) rgba(255, 255, 255, 0.07);
  padding: 40px 46px 44px;
}

.services-scroll::-webkit-scrollbar {
  width: 9px;
}

.services-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 10px;
}

.services-scroll::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.82);
  border-radius: 10px;
  border: 2px solid rgba(6, 10, 13, 0.55);
}

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

.contact-box,
.booking-box {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  max-width: 1040px;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  padding: 0;
  overflow: hidden;
}

.contact-scroll,
.booking-scroll {
  width: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) rgba(255, 255, 255, 0.07);
  padding: 40px 46px 44px;
}

.contact-scroll::-webkit-scrollbar,
.booking-scroll::-webkit-scrollbar {
  width: 9px;
}

.contact-scroll::-webkit-scrollbar-track,
.booking-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 10px;
}

.contact-scroll::-webkit-scrollbar-thumb,
.booking-scroll::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.78);
  border-radius: 10px;
}

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

.contact-intro,
.booking-intro {
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: 30px;
  text-align: center;
}

.contact-intro .eyebrow,
.booking-intro .eyebrow {
  justify-content: center;
  margin-bottom: 16px;
}

.contact-intro h2,
.booking-intro h2 {
  max-width: 22ch;
  margin: 0 auto;
}

.contact-intro .lede,
.booking-intro .lede {
  margin: 20px auto 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 40px;
  padding: 32px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-details h3,
.contact-enquiry h3,
.contact-map h3,
.booking-step h3 {
  font-family: var(--font-head);
  color: #fff;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.15;
}

.contact-details h3::after,
.contact-enquiry h3::after,
.contact-map h3::after,
.booking-step h3::after {
  content: "";
  display: block;
  width: 54px;
  height: 1px;
  margin-top: 9px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.contact-details dl {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.contact-details dt,
.map-kicker {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.contact-details dd {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.contact-details a {
  color: #eef2f1;
  text-decoration: none;
}

.contact-details a:hover {
  color: var(--accent);
}

.contact-form,
.booking-form {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.contact-form label,
.booking-form label {
  display: grid;
  gap: 7px;
  color: #eef2f1;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}

.contact-form label span,
.booking-form label span {
  color: var(--muted);
  font-weight: 400;
}

.contact-form input,
.contact-form textarea,
.booking-form input,
.booking-form select,
.booking-form textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  outline: none;
  background: rgba(7, 12, 15, 0.58);
  color: #fff;
  font: inherit;
  line-height: 1.4;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.contact-form textarea,
.booking-form textarea {
  min-height: 108px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus,
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
  border-color: rgba(var(--accent-rgb), .76);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14);
}

.contact-form .btn {
  justify-self: start;
  margin-top: 4px;
}

.form-status {
  min-height: 1.4em;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.contact-map {
  display: grid;
  gap: 18px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 260px;
  border: 0;
  border-radius: 16px;
  filter: saturate(.72) contrast(.93) brightness(.84);
}

/* ───────── booking (book.html): topic → date → time → details ───────── */
.booking-step {
  padding: 30px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.booking-step:last-child {
  padding-bottom: 0;
}

.step-num {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: 11px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.30);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  vertical-align: 3px;
}

.service-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.chip {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #e7ecec;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--glass-brd);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}

.chip:hover {
  background: rgba(255, 255, 255, 0.10);
}

.chip.selected {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.60);
  color: var(--accent);
  font-weight: 600;
}

.booking-datetime {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px;
  margin-top: 24px;
}

.cal {
  padding: 18px 18px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.cal-title {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 500;
  color: #fff;
}

.cal-nav {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  border: 1px solid var(--glass-brd);
  background: rgba(255, 255, 255, 0.06);
  color: #e7ecec;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s;
}

.cal-nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}

.cal-nav:disabled {
  opacity: .35;
  cursor: default;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-dow {
  padding: 6px 0 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

.cal-day {
  font: inherit;
  font-size: 14px;
  color: #e7ecec;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.cal-day:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.09);
}

.cal-day:disabled {
  color: rgba(185, 194, 196, 0.32);
  cursor: default;
}

.cal-day.today {
  border-color: rgba(255, 255, 255, 0.28);
}

.cal-day.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

.cal-note {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.cal-note a {
  color: #eef2f1;
  text-decoration: none;
  border-bottom: 1px solid rgba(238, 242, 241, 0.35);
}

.cal-note a:hover {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.6);
}

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

.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.slot {
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: #e7ecec;
  padding: 10px 4px;
  border-radius: 10px;
  border: 1px solid var(--glass-brd);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.slot:hover {
  background: rgba(255, 255, 255, 0.10);
}

.slot.selected {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.65);
  color: var(--accent);
  font-weight: 600;
}

.booking-form {
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  margin-top: 22px;
}

.booking-form .full {
  grid-column: 1 / -1;
}

.booking-form select {
  color-scheme: dark;
}

.booking-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  margin-top: 8px;
}

.summary-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 60ch;
}

.booking-form .btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.services-intro {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--glass-brd);
}

.services-box h1 {
  font-size: clamp(32px, 4vw, 52px);
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
}

.services-box h1 em {
  font-style: italic;
  color: var(--accent);
}

.services-intro .lede {
  margin-left: auto;
  margin-right: auto;
}

.services-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 34px;
}

.service-detail {
  padding: 28px 0;
  border-bottom: 1px solid var(--glass-brd);
  scroll-margin-top: 24px;
}

.service-detail h2 {
  max-width: none;
  color: #fff;
  font-size: clamp(22px, 2.3vw, 28px);
  line-height: 1.18;
  margin-bottom: 16px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

.service-detail h2::after {
  content: "";
  display: block;
  width: 54px;
  height: 1px;
  margin-top: 9px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.service-detail p {
  color: var(--muted);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.62;
  text-wrap: pretty;
}

.service-detail strong {
  color: var(--ink);
  font-weight: 600;
}

.services-cta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding-top: 34px;
}

/* ───────── glass service cards ───────── */
.services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 0 26px 40px;
}

.card {
  text-align: left;
  padding: 22px 20px 20px;
  border-radius: 18px;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(24, 34, 40, 0.55);
}

.card .ico {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 15px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.30);
  color: var(--accent);
}

.card .ico svg {
  width: 24px;
  height: 24px;
  display: block;
}

.card h3 {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 18.5px;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 7px;
}

.card p {
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}

.card p.pl {
  font-style: italic;
  color: var(--accent);
  font-size: 14.5px;
}

.trust {
  display: flex;
  gap: 14px 24px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 6px 26px 30px;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  color: #e7eceb;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 14px rgba(0, 0, 0, 0.5);
}

/* Shared bottom section: every page reserves identical trust-bar and footer spacing. */
.site-bottom {
  flex: 0 0 auto;
  width: 100%;
}

.trust span:not(.dot) {
  display: inline-flex;
  align-items: center;
}

.trust .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.8);
}

.trust b {
  color: #fff;
  font-weight: 700;
}

.site-foot {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 0 26px 24px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2px;
  color: rgba(190, 199, 198, 0.62);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.site-foot a {
  color: rgba(190, 199, 198, 0.72);
  text-decoration: none;
  border-bottom: 1px solid rgba(190, 199, 198, 0.28);
  transition: color .2s, border-color .2s;
}

.site-foot a:hover {
  color: rgba(231, 236, 235, 0.9);
  border-color: rgba(231, 236, 235, 0.7);
}

.site-foot .foot-sep {
  opacity: .6;
}

/* entrance */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  animation: rise .8s cubic-bezier(.2, .7, .2, 1) forwards;
}

.d1 {
  animation-delay: .05s;
}

.d2 {
  animation-delay: .16s;
}

.d3 {
  animation-delay: .27s;
}

.d4 {
  animation-delay: .38s;
}

.d5 {
  animation-delay: .5s;
}

.services .card {
  opacity: 0;
  transform: translateY(22px);
  animation: rise .7s cubic-bezier(.2, .7, .2, 1) forwards;
}

.services .card:nth-child(1) {
  animation-delay: .55s;
}

.services .card:nth-child(2) {
  animation-delay: .65s;
}

.services .card:nth-child(3) {
  animation-delay: .75s;
}

.services .card:nth-child(4) {
  animation-delay: .85s;
}

@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

@media(prefers-reduced-motion:reduce) {

  .reveal,
  .view-about.is-active .scrim-box,
  .view-services.is-active .scrim-box,
  .view-contact.is-active .scrim-box,
  .view-book.is-active .scrim-box,
  .services .card {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .fx {
    display: none;
  }
}

/* Desktop: Home and About are top-anchored by default, so any spare viewport height
   pools between the last content module and the trust bar. Centre the content block in
   the flexible area instead — when the content exactly fills the screen this is a
   no-op, and any spare space splits evenly above and below at every height (1440p,
   scaled displays, 4K). No height gate: gating on min-height left a dead zone on
   scaled 2K displays, whose CSS viewport is far shorter than the panel resolution.
   Services, Contact and Book already stretch their inner scroll box to fill the
   height, so they need nothing here. Mobile keeps the natural top-anchored flow. */
@media (min-width: 921px) {

  .view-home.is-active,
  .view-about.is-active {
    justify-content: center;
  }

  .center {
    padding-top: 30px;
  }
}

/* 1440p-class displays and wider: extra air between the hero panel and the service
   cards. Gated on WIDTH, not height — OS display scaling makes a 1440p monitor report
   ~2000 CSS px of width but roughly the same height as 1080p, so width is the only
   reliable signal (1080p full-screen tops out at 1920). The centring above absorbs the
   added gap symmetrically. */
@media (min-width: 1960px) {

  .view-home.is-active,
  .view-about.is-active {
    row-gap: 48px;
  }
}

/* Wide but short viewports — the real 1080p/1440p case, where browser chrome leaves
   ~950px of viewport. Tighten the vertical rhythm so Home and About still fit on one
   screen: the design intent is that the page itself never scrolls, only the inner
   content box on Services. Purely spacing; no type or colour changes. */
@media (min-width: 921px) and (max-height: 1010px) {
  .center {
    padding: 34px 26px 20px;
  }

  .panel {
    padding: 30px 56px 32px;
  }

  .tagline {
    margin-top: 18px;
  }

  .ctas {
    margin-top: 26px;
  }

  .services,
  .about-features {
    padding-bottom: 22px;
  }

  .feature-grid {
    margin-top: 22px;
  }

  /* About's content box (Services/Contact/Book zero this out and pad their scroller) */
  .scrim-box {
    padding: 32px 54px 34px;
  }

  .scrim-box h2 {
    font-size: clamp(26px, 3.1vw, 38px);
  }

  .scrim-box .eyebrow {
    margin-bottom: 11px;
  }

  .scrim-box .lede {
    margin-top: 14px;
  }

  .feat {
    padding: 15px 18px;
  }

  .feat .ico {
    margin-bottom: 9px;
  }

  .trust {
    padding: 4px 26px 16px;
  }

  .site-foot {
    padding: 0 26px 16px;
  }
}

/* cookie consent banner */
.cookie-banner {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(960px, calc(100% - 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 20px 22px;
  border: 1px solid var(--glass-brd);
  border-radius: 18px;
  color: var(--ink);
  background: rgba(11, 18, 23, .96);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .48);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.cookie-copy {
  max-width: 620px;
}

.cookie-copy h2 {
  margin: 0 0 6px;
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.25;
  color: #fff;
}

.cookie-copy p {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

.cookie-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
}

.cookie-actions .btn {
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 11px;
  white-space: nowrap;
}

.cookie-reject {
  color: #e7ecec;
  border: 1px solid var(--glass-brd);
  background: rgba(255, 255, 255, .07);
}

.cookie-reject:hover {
  background: rgba(255, 255, 255, .12);
}

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

@media(max-width:920px) {
  nav {
    display: none;
  }

  .menu-btn {
    display: inline-flex;
  }

  /* Mobile: Services, Contact and Book scroll as a whole page, like Home and About —
     the fixed scene + inner text-box scroll is a desktop-only treatment. These undo
     the body/hero lock and let the glass panel grow with its content. */
  body[data-page="services"],
  body[data-page="contact"],
  body[data-page="book"] {
    height: auto;
    overflow: visible;
  }

  body[data-page="services"] .hero,
  body[data-page="contact"] .hero,
  body[data-page="book"] .hero {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .services-center,
  .contact-center,
  .book-center {
    overflow: visible;
  }

  .services-box,
  .contact-box,
  .booking-box {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .services-scroll,
  .contact-scroll,
  .booking-scroll {
    overflow-y: visible;
  }

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

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

  .about-features {
    margin: 0 auto;
    padding: 0 18px 30px;
  }

  .scrim-box {
    padding: 34px 30px 38px;
  }

  .center {
    padding: 48px 18px 26px;
  }

  .services-scroll,
  .booking-scroll {
    padding: 32px 30px 36px;
  }

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

  .booking-datetime {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .panel {
    padding: 32px 28px 32px;
    border-radius: 24px;
  }

  .tagline {
    font-size: 16px;
  }
}

@media(max-width:600px) {
  .cookie-banner {
    bottom: 12px;
    width: calc(100% - 24px);
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border-radius: 16px;
  }

  .cookie-actions {
    width: 100%;
  }

  .cookie-actions .btn {
    flex: 1 1 0;
    white-space: normal;
  }

  .center {
    padding: 32px 16px 20px;
  }

  h1 {
    font-size: clamp(30px, 8.6vw, 42px);
  }

  .panel {
    padding: 24px 18px 26px;
    border-radius: 22px;
  }

  .eyebrow {
    font-size: 11px;
    letter-spacing: 2px;
    margin-bottom: 16px;
  }

  .eyebrow::before,
  .eyebrow::after {
    width: 18px;
  }

  .tagline {
    font-size: 14.5px;
    margin-top: 18px;
  }

  .ctas {
    gap: 10px;
    margin-top: 24px;
    width: 100%;
  }

  .btn-lg {
    flex: 1 1 150px;
    padding: 13px 14px;
    font-size: 14px;
  }

  .services {
    gap: 12px;
    padding: 0 16px 26px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 26px;
  }

  .about-features {
    margin: 0 auto;
    padding: 0 16px 26px;
  }

  .scrim-box {
    padding: 26px 20px 28px;
    border-radius: 22px;
  }

  .services-box {
    padding: 0;
  }

  .services-scroll {
    padding: 24px 20px 28px;
  }

  .contact-scroll,
  .booking-scroll {
    padding: 24px 20px 28px;
  }

  .booking-step {
    padding: 24px 0;
  }

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

  .booking-summary {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .summary-text {
    max-width: none;
  }

  .slots {
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  }

  .chip {
    font-size: 13.5px;
    padding: 9px 14px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 26px 0;
  }

  .contact-map iframe {
    height: 210px;
  }

  .services-box h1 {
    font-size: clamp(27px, 8vw, 36px);
  }

  .services-intro {
    padding-bottom: 22px;
  }

  .service-detail {
    padding: 22px 0;
  }

  .service-detail h2 {
    font-size: 21px;
  }

  .service-detail h2::after {
    width: 42px;
  }

  .services-cta {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding-top: 28px;
  }

  .scrim-box .eyebrow {
    font-size: 11px;
    letter-spacing: 2px;
  }

  .card {
    padding: 16px 15px;
  }

  .card h3 {
    font-size: 16.5px;
  }

  .card .ico {
    width: 40px;
    height: 40px;
    margin-bottom: 11px;
  }

  .bar-wrap {
    padding: 14px 12px 0;
  }

  .bar {
    padding: 9px 9px 9px 15px;
    gap: 6px;
  }

  .logo .mark {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }

  /* the logo is the only elastic item in the bar: let it give way so the CTA,
     language switcher and menu button always stay fully on screen */
  .bar .logo {
    min-width: 0;
    flex: 0 1 auto;
  }

  .logo-img {
    height: 30px;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
  }

  .bar .cta-full {
    display: none;
  }

  .bar .cta-short {
    display: inline;
  }

  .bar .btn-primary {
    font-size: 14px;
    padding: 10px 14px;
  }

  .lang-switch {
    padding: 2px;
    margin-right: 2px;
  }

  .lang-switch a {
    padding: 5px;
  }

  .lang-switch .flag-icon {
    width: 20px;
    height: 13px;
  }

  .trust {
    gap: 9px 16px;
    font-size: 13.5px;
    padding: 4px 16px 28px;
  }
}

@media(max-width:360px) {
  .services {
    grid-template-columns: 1fr;
  }

  /* narrowest phones: the bar carries logo + language switcher + CTA + menu,
     so reclaim space from the logo and the gaps rather than dropping a control. */
  .bar {
    gap: 4px;
    padding: 9px 8px 9px 12px;
  }

  .logo-img {
    height: 26px;
  }
}