:root {
  --navy-950: #071426;
  --navy-900: #0c1b33;
  --navy-850: #102440;
  --navy-800: #173052;
  --blue-600: #2f6fed;
  --blue-700: #2258c5;
  --blue-100: #dce8ff;
  --blue-50: #eef4ff;
  --teal-600: #2a8c82;
  --teal-100: #d9eeeb;
  --canvas: #f7f8fa;
  --warm-white: #fbfaf7;
  --white: #ffffff;
  --text: #182230;
  --muted: #5d6878;
  --border: #dde3ec;
  --border-strong: #cad3df;
  --success: #1d756b;
  --error: #a43f48;
  --header-height: 80px;
  --container: 1220px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-soft: 0 18px 50px rgba(15, 34, 59, 0.08);
  --shadow-panel: 0 26px 70px rgba(8, 25, 48, 0.16);
  --transition: 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  background: var(--canvas);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.nav-open,
body.dialog-open {
  overflow: hidden;
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: inherit;
  line-height: 1.12;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Body copy across cards and sections is justified (Word-style "Justify").
   Headings, labels, buttons and single-line meta rows stay left aligned. */
.hero-intro,
.hero-list li span:last-child,
.section-heading > p,
.taxes-copy > p,
.audience-item p,
.check-list li,
.advice-copy p,
.about-copy p,
.quote-box p,
.form-card-heading > p:last-child {
  text-align: justify;
  text-justify: inter-word;
}

/* Narrow cards would otherwise get very wide word gaps when justified. */
.audience-item p,
.check-list li,
.quote-box p {
  hyphens: auto;
}

/* On phones justified text produces the ragged "rivers" of white space seen in
   narrow single columns, so every body block falls back to a clean left edge. */
@media (max-width: 680px) {
  .hero-intro,
  .hero-list li span:last-child,
  .section-heading > p,
  .taxes-copy > p,
  .audience-item p,
  .check-list li,
  .advice-copy p,
  .about-copy p,
  .quote-box p,
  .form-card-heading > p:last-child {
    text-align: left;
    text-justify: auto;
    hyphens: manual;
  }
}

:focus-visible {
  outline: 3px solid rgba(47, 111, 237, 0.46);
  outline-offset: 3px;
}

/* The markup ships in Slovak. When another language is active the content is
   held back for the single frame the translation pass needs, so no Slovak text
   flashes first. boot.js also clears the class on a timer, so a script failure
   can never leave the page hidden. */
html.is-i18n-pending body {
  visibility: hidden;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 200;
  padding: 10px 14px;
  transform: translateY(-160%);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy-900);
  font-weight: 700;
  transition: transform var(--transition);
}

.skip-link:focus {
  transform: translateY(0);
}

.container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: clamp(84px, 8vw, 124px);
}

/* Scroll reveal — the classes are added by main.js and removed once the
   animation has finished, so hover transforms stay untouched afterwards. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  /* !important so the entrance timing beats the shorter hover transitions the
     cards declare later in this file — without it they animate in at 220ms. */
  transition:
    opacity 2304ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms),
    transform 2304ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms) !important;
  will-change: opacity, transform;
}

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

.icon {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  color: var(--blue-700);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 28px;
  height: 2px;
  background: currentColor;
  content: "";
}

.eyebrow-light {
  color: #94b5ff;
}

/* The decorative dot only. The eyebrow also holds a span for its translated
   text, which must not be turned into a dot. */
.eyebrow-light > span[aria-hidden="true"] {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7ea7ff;
  box-shadow: 0 0 0 5px rgba(126, 167, 255, 0.13);
}

.eyebrow-light::before {
  display: none;
}

.section-heading {
  max-width: 760px;
  margin-bottom: clamp(38px, 5vw, 58px);
}

.section-heading h2,
.taxes-copy h2,
.contact-section-heading h2 {
  margin-bottom: 18px;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 650;
  letter-spacing: -0.045em;
}

.section-heading > p:last-child,
.taxes-copy > p:last-child {
  max-width: 67ch;
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.08rem);
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 20px;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0) scale(0.985);
}

.button-primary {
  border-color: var(--blue-600);
  background: var(--blue-600);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(47, 111, 237, 0.23);
}

.button-primary:hover {
  border-color: var(--blue-700);
  background: var(--blue-700);
  box-shadow: 0 14px 30px rgba(34, 88, 197, 0.28);
}

.button-secondary {
  border-color: var(--border);
  background: #f0f3f7;
  color: var(--text);
}

.button-secondary:hover {
  border-color: var(--border-strong);
  background: #e8edf3;
}

.button-large {
  min-height: 54px;
  padding-inline: 24px;
  font-size: 0.98rem;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  border-bottom: 1px solid rgba(12, 27, 51, 0.08);
  background: rgba(255, 255, 255, 0.95);
  transition: box-shadow var(--transition), background-color var(--transition);
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 28px rgba(16, 36, 64, 0.07);
  backdrop-filter: blur(14px);
}

/* Locking the scroll with overflow:hidden on the body turns the body into its
   own scroll container, so the sticky header re-anchors to the top of the
   document rather than the viewport and scrolls out of sight. Pinning it keeps
   it visible; the body padding replaces the space it gives up by leaving the
   flow, so the content underneath does not shift. */
body.nav-open,
body.dialog-open {
  padding-top: var(--header-height);
}

body.nav-open .site-header,
body.dialog-open .site-header {
  position: fixed;
  right: 0;
  left: 0;
}

.header-inner {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  min-width: max-content;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border: 1px solid rgba(12, 27, 51, 0.1);
  border-radius: 50%;
  background: var(--white);
}

.brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand-name {
  font-size: 0.98rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.brand-subtitle {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.5vw, 24px);
}

.site-nav-links a {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: #364355;
  font-size: 0.83rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--transition);
}

.site-nav-links a::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: right;
  background: var(--blue-600);
  content: "";
  transition: transform var(--transition);
}

.site-nav-links a:hover,
.site-nav-links a[aria-current="true"] {
  color: var(--blue-700);
}

.site-nav-links a:hover::after,
.site-nav-links a[aria-current="true"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-action {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 0.82rem;
  white-space: nowrap;
}

/* Language selector — a compact flag-and-code dropdown that keeps the header
   calm while making every language easy to identify. */
.header-tools {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lang-switch {
  position: relative;
  flex: 0 0 auto;
}

.lang-switch-current {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 7px 10px;
  color: var(--navy-900);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  list-style: none;
  transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.lang-switch-current::-webkit-details-marker {
  display: none;
}

.lang-switch-current::after {
  width: 6px;
  height: 6px;
  margin-left: 2px;
  transform: translateY(-2px) rotate(45deg);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  transition: transform var(--transition);
}

.lang-switch-current:hover,
.lang-switch[open] .lang-switch-current {
  border-color: rgba(47, 111, 237, 0.22);
  background: var(--blue-50);
  box-shadow: 0 8px 20px rgba(34, 88, 197, 0.09);
}

.lang-switch[open] .lang-switch-current::after {
  transform: translateY(1px) rotate(225deg);
}

.lang-switch-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 110;
  display: grid;
  min-width: 118px;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 5px;
  background: var(--white);
  box-shadow: 0 18px 38px rgba(20, 48, 87, 0.16);
}

.lang-switch-option {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 9px;
  border-radius: 8px;
  padding: 7px 9px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  transition: color var(--transition), background-color var(--transition);
}

.lang-switch-flag {
  display: inline-flex;
  width: 19px;
  height: 13px;
  flex: 0 0 19px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(12, 27, 51, 0.12);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(12, 27, 51, 0.12);
}

.lang-switch-flag-sk {
  background: url("/assets/images/slovak%20flag.png") center / cover no-repeat;
}

.lang-switch-flag-en {
  background: url("/assets/images/eng%20flag.jpg") center / cover no-repeat;
}

.lang-switch-flag-hu {
  background: url("/assets/images/hun%20flag.png") center / cover no-repeat;
}

.lang-switch-option:hover,
.lang-switch-option:focus-visible,
.lang-switch-option[aria-current="true"] {
  background: var(--blue-50);
  color: var(--blue-700);
}

.nav-dropdown {
  position: relative;
  display: inline-flex;
}

.nav-dropdown-toggle {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 6px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #364355;
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition);
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle[aria-expanded="true"],
.nav-dropdown-toggle[aria-current="true"] {
  color: var(--blue-700);
}

.nav-dropdown-caret {
  width: 15px;
  height: 15px;
  transition: transform var(--transition);
}

.nav-dropdown.is-open .nav-dropdown-caret {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 60;
  display: grid;
  min-width: 236px;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-panel);
  opacity: 0;
  transform: translate(-50%, -8px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
  visibility: visible;
}

.nav-dropdown-label {
  padding: 6px 12px 4px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.nav-dropdown-menu a {
  display: flex;
  min-height: 42px;
  align-items: center;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: #364355;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--transition), color var(--transition);
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a[aria-current="true"] {
  background: var(--blue-50);
  color: var(--blue-700);
}

.menu-toggle,
.nav-scrim {
  display: none;
}

/* Hero */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 79% 45%, rgba(47, 111, 237, 0.27), transparent 31%),
    radial-gradient(circle at 14% 0%, rgba(42, 140, 130, 0.1), transparent 29%),
    var(--navy-900);
  color: var(--white);
}

.hero::after {
  position: absolute;
  right: -110px;
  bottom: -250px;
  z-index: -1;
  width: 560px;
  height: 560px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(255, 255, 255, 0.018), 0 0 0 160px rgba(255, 255, 255, 0.012);
  content: "";
}

.hero-grid-pattern,
.tax-grid-pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.22;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, transparent 5%, #000 56%, #000 100%);
}

.hero-layout {
  display: grid;
  min-height: 710px;
  grid-template-columns: minmax(0, 1.08fr) minmax(430px, 0.92fr);
  align-items: center;
  gap: clamp(42px, 6vw, 88px);
  padding-block: clamp(74px, 8vw, 112px) clamp(88px, 9vw, 128px);
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 690px;
  animation: hero-rise 700ms both;
}

.hero h1 {
  max-width: 680px;
  margin-bottom: 25px;
  font-size: clamp(3rem, 5vw, 4rem);
  font-weight: 650;
  letter-spacing: -0.057em;
}

.hero-intro {
  max-width: 63ch;
  margin-bottom: 28px;
  color: #c9d4e5;
  font-size: clamp(1.02rem, 1.35vw, 1.12rem);
  line-height: 1.75;
}

.hero-intro strong {
  display: block;
  margin-top: 8px;
  color: var(--white);
  font-weight: 600;
}

.hero-list {
  display: grid;
  max-width: 660px;
  gap: 12px;
  margin: 0 0 34px;
  padding: 0;
  color: #e6edf8;
  font-size: 0.97rem;
  list-style: none;
}

.hero-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
}

.list-check {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  border: 1px solid rgba(125, 165, 255, 0.35);
  border-radius: 50%;
  background: rgba(47, 111, 237, 0.16);
  color: #a9c3ff;
  font-size: 0.72rem;
  font-weight: 700;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.hero-contact {
  display: grid;
  gap: 5px;
}

.hero-contact a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 9px;
  color: #d8e1ef;
  font-size: 0.86rem;
  font-weight: 550;
  transition: color var(--transition);
}

.hero-contact a:hover {
  color: var(--white);
}

.hero-contact .icon {
  width: 17px;
  height: 17px;
  color: #89adff;
}

.hero-visual {
  position: relative;
  min-height: 530px;
  animation: hero-rise 850ms 100ms both;
}

.logo-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 324px;
  height: 324px;
  transform: translate(-50%, -50%);
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: 0 0 80px rgba(47, 111, 237, 0.22);
}

.logo-orbit::before,
.logo-orbit::after {
  position: absolute;
  border: 1px dashed rgba(161, 189, 255, 0.18);
  border-radius: 50%;
  content: "";
}

.logo-orbit::before {
  inset: -32px;
}

.logo-orbit::after {
  inset: 19px;
}

.logo-disc {
  position: relative;
  z-index: 2;
  width: 246px;
  height: 246px;
  overflow: hidden;
  border: 9px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 28px 70px rgba(0, 8, 22, 0.38), inset 0 0 0 1px rgba(12, 27, 51, 0.08);
}

.logo-disc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-ledger {
  position: absolute;
  width: 224px;
  height: 286px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 30px 25px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035));
  box-shadow: 0 24px 60px rgba(2, 12, 29, 0.22);
  backdrop-filter: blur(8px);
}

.hero-ledger > span {
  display: block;
  height: 1px;
  margin-bottom: 27px;
  background: rgba(255, 255, 255, 0.15);
}

.hero-ledger-back {
  top: 70px;
  right: -24px;
  transform: rotate(10deg);
}

.hero-ledger-front {
  bottom: 36px;
  left: -2px;
  transform: rotate(-9deg);
}

.ledger-heading {
  display: flex;
  justify-content: space-between;
  margin-bottom: 28px;
}

.ledger-heading span {
  width: 68px;
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.28);
}

.ledger-heading i {
  width: 26px;
  height: 7px;
  border-radius: 4px;
  background: rgba(79, 137, 255, 0.6);
}

.audience-tag {
  position: absolute;
  z-index: 5;
  display: flex;
  min-height: 54px;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 13px;
  padding: 13px 17px;
  background: rgba(16, 36, 64, 0.84);
  color: #eef3fb;
  box-shadow: 0 14px 28px rgba(2, 10, 24, 0.22);
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.audience-tag:hover {
  transform: scale(1.08);
  z-index: 20;
  border-color: rgba(134, 170, 255, 0.42);
  box-shadow: 0 22px 44px rgba(2, 10, 24, 0.4);
}

.audience-tag .icon {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  color: #86aaff;
}

.audience-tag-company {
  top: 22px;
  left: 0;
  transform-origin: top left;
}

.audience-tag-self {
  top: 86px;
  right: 0;
  transform-origin: top right;
}

.audience-tag-employer {
  right: 6px;
  bottom: 74px;
  transform-origin: bottom right;
}

.audience-tag-advice {
  bottom: 8px;
  left: 0;
  transform-origin: bottom left;
}

@keyframes hero-rise {
  from {
    transform: translateY(18px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Audiences */
.audiences {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  padding-block: clamp(64px, 6vw, 84px);
}

.section-heading-compact {
  margin-bottom: 36px;
}

.section-heading-compact .eyebrow {
  display: none;
}

.section-heading-compact h2 {
  margin-bottom: 0;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.audience-item {
  position: relative;
  min-width: 0;
  padding: 30px 28px 31px;
  border-right: 1px solid var(--border);
  background: var(--white);
  transition: transform var(--transition), box-shadow var(--transition);
}

.audience-item:hover {
  z-index: 2;
  transform: translateY(-10px);
  box-shadow: 0 26px 50px rgba(16, 36, 64, 0.13);
}

.audience-item .icon-box {
  transition: transform var(--transition), background-color var(--transition);
}

.audience-item:hover .icon-box {
  transform: scale(1.09);
  background: var(--blue-100);
}

.audience-item:first-child {
  border-left: 1px solid var(--border);
}

.icon-box,
.service-icon,
.contact-icon,
.result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
}

.icon-box {
  width: 42px;
  height: 42px;
  margin-bottom: 21px;
  background: var(--blue-50);
  color: var(--blue-700);
}

.audience-item h3 {
  margin-bottom: 9px;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.audience-item p {
  max-width: 29ch;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.89rem;
  line-height: 1.6;
}

/* Services */
.services {
  overflow: hidden;
  background-color: var(--warm-white);
  background-image: repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(12, 27, 51, 0.025) 48px);
}

.service-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.service-panel {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: clamp(30px, 4vw, 44px);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 40px rgba(16, 36, 64, 0.055);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.service-panel:hover {
  transform: translateY(-10px);
  border-color: currentColor;
  box-shadow: 0 30px 58px rgba(16, 36, 64, 0.14);
}

.service-panel::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  content: "";
}

.service-panel::after {
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 230px;
  height: 230px;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
  opacity: 0.055;
}

.service-panel-blue {
  color: var(--blue-700);
}

.service-panel-blue::before {
  background: var(--blue-600);
}

.service-panel-teal {
  color: var(--teal-600);
}

.service-panel-teal::before {
  background: var(--teal-600);
}

.service-panel-heading {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-bottom: 29px;
}

.service-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  background: currentColor;
}

.service-icon .icon {
  width: 25px;
  height: 25px;
  color: var(--white);
}

.service-panel h3 {
  margin-bottom: 0;
  color: var(--text);
  font-size: clamp(1.3rem, 2.1vw, 1.55rem);
  font-weight: 650;
  letter-spacing: -0.035em;
}

.check-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  color: var(--text);
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 31px;
}

.check-list li::before {
  position: absolute;
  top: 4px;
  left: 0;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue-700);
  content: "✓";
  font-size: 0.67rem;
  font-weight: 800;
}

.service-panel-teal .check-list li::before {
  background: #e6f3f1;
  color: var(--teal-600);
}

/* Advisory */
.advisory {
  overflow: hidden;
  background: var(--blue-50);
}

.advisory-shape {
  position: absolute;
  top: -260px;
  right: -180px;
  width: 610px;
  height: 610px;
  border: 1px solid rgba(47, 111, 237, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(47, 111, 237, 0.025), 0 0 0 160px rgba(47, 111, 237, 0.018);
}

.advisory .container {
  position: relative;
}

.advisory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.advisory-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  border: 1px solid rgba(202, 211, 223, 0.75);
  border-radius: var(--radius-md);
  padding: 34px 30px 36px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 34px rgba(34, 88, 197, 0.055);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.advisory-card:hover,
.advice-card:hover {
  transform: translateY(-10px);
  border-color: rgba(47, 111, 237, 0.42);
  box-shadow: 0 30px 58px rgba(34, 88, 197, 0.16);
}

.icon-box-large {
  width: 50px;
  height: 50px;
  margin-bottom: 27px;
}

.icon-box-large .icon {
  width: 24px;
  height: 24px;
}

.advisory-card-heading {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-bottom: 24px;
}

.advisory-card-heading .icon-box-large {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.advisory-card h3 {
  margin-bottom: 0;
  font-size: 1.3rem;
  font-weight: 650;
  letter-spacing: -0.035em;
}

.advisory-card .check-list {
  gap: 14px;
  color: #344154;
  font-size: 0.93rem;
}

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

@media (max-width: 760px) {
  .payroll-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.advice-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(36px, 6vw, 88px);
}

.advice-copy .icon-box-large {
  margin-bottom: 22px;
}

.advice-copy h2 {
  margin-bottom: 16px;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 650;
  letter-spacing: -0.045em;
}

.advice-copy p {
  max-width: 44ch;
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.08rem);
}

.advice-card {
  border: 1px solid rgba(202, 211, 223, 0.75);
  border-radius: var(--radius-md);
  padding: clamp(28px, 3.6vw, 42px);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 34px rgba(34, 88, 197, 0.055);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.advice-card .check-list {
  gap: 18px;
  color: #344154;
  font-size: 0.95rem;
}

@media (max-width: 860px) {
  .advice-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

/* Taxes */
.taxes {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 7% 100%, rgba(42, 140, 130, 0.18), transparent 31%),
    var(--navy-900);
  color: var(--white);
}

.tax-grid-pattern {
  opacity: 0.2;
  mask-image: linear-gradient(90deg, #000, transparent 72%);
}

.taxes-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(480px, 1.22fr);
  align-items: center;
  gap: clamp(50px, 8vw, 110px);
}

.taxes-copy h2 {
  color: var(--white);
}

.taxes-copy > p:last-child {
  color: #c4d0e1;
  line-height: 1.75;
}

.taxes-checklist {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  padding: clamp(30px, 4vw, 44px);
  background: rgba(255, 255, 255, 0.075);
  box-shadow: 0 24px 58px rgba(0, 8, 22, 0.24);
  backdrop-filter: blur(8px);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.taxes-checklist:hover {
  transform: translateY(-10px);
  border-color: rgba(160, 192, 255, 0.4);
  box-shadow: 0 34px 70px rgba(0, 8, 22, 0.38);
}

.check-list-light {
  gap: 20px;
  color: #edf2fa;
  font-size: 0.96rem;
}

.check-list-light li {
  padding-left: 37px;
}

.check-list-light li::before {
  top: 2px;
  width: 24px;
  height: 24px;
  background: rgba(42, 140, 130, 0.25);
  color: #7ccec5;
}

/* Contact */
.about {
  border-top: 1px solid var(--border);
  background: var(--white);
}

/* Cursor-following coloured glow. main.js injects one .section-spotlight into
   every main section. Each is clipped to its own section and sits behind the
   content (z-index 0); the cards and form stay opaque above it, so the glow
   reads only around and behind them, never on top. Position is driven by
   --spot-x / --spot-y (px, relative to the section) set in main.js. */
.has-spotlight {
  position: relative;
  isolation: isolate;
}

.has-spotlight > .container {
  position: relative;
  z-index: 1;
}

.section-spotlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}

.has-spotlight.is-spot-active .section-spotlight {
  opacity: 1;
}

.section-spotlight-orb {
  position: absolute;
  top: 0;
  left: 0;
  width: 448px;
  height: 448px;
  margin: -224px 0 0 -224px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(47, 111, 237, 0.25) 0%,
    rgba(42, 140, 130, 0.15) 38%,
    rgba(47, 111, 237, 0) 72%
  );
  transform: translate3d(var(--spot-x, 50%), var(--spot-y, 50%), 0);
  transition: transform 340ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .section-spotlight-orb {
    transition: none;
  }
}

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: stretch;
}

.about-heading {
  margin-bottom: 28px;
}

.about-portrait {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.about-portrait img {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

.about-portrait figcaption {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px 18px;
  border-top: 1px solid var(--border);
}

.about-portrait figcaption strong {
  color: var(--text);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.about-portrait figcaption span {
  color: var(--muted);
  font-size: 0.9rem;
}

.about-copy {
  min-width: 0;
}

.about-lead {
  margin-bottom: 22px;
  color: var(--text);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.about-copy p {
  margin-bottom: 18px;
  color: var(--muted);
  font-size: clamp(1rem, 1.2vw, 1.06rem);
}

.about-copy p:last-child {
  margin-bottom: 0;
}

.about-copy strong {
  color: var(--text);
  font-weight: 650;
}

.why-us {
  margin-top: clamp(40px, 5vw, 64px);
}

.why-us .section-heading {
  margin-bottom: 28px;
}

.why-us-title,
#why-us-title {
  color: var(--text);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.why-us-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

.why-us-item {
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid rgba(202, 211, 223, 0.75);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: 0 14px 34px rgba(34, 88, 197, 0.055);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.why-us-item:hover {
  transform: translateY(-10px);
  border-color: rgba(47, 111, 237, 0.42);
  box-shadow: 0 30px 58px rgba(34, 88, 197, 0.16);
}

.why-us-item:hover .icon-box {
  transform: scale(1.09);
  background: var(--blue-100);
}

.why-us-heading {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 6px;
}

.why-us-item .icon-box {
  flex: 0 0 auto;
  margin-bottom: 0;
  transition: transform var(--transition), background-color var(--transition);
}

.why-us-item h4 {
  margin: 0;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.why-us-item p {
  color: var(--muted);
  font-size: clamp(0.98rem, 1.1vw, 1.04rem);
}

@media (max-width: 720px) {
  .why-us-grid {
    grid-template-columns: 1fr;
  }
}

/* Referencie – testimonial carousel.
   The cards are stacked in a single grid cell so the track is always as tall as
   the tallest card; only transform/opacity/filter are animated. Their position
   comes from --pos (the offset from the active card, set by main.js) times the
   step width, so no layout is recalculated while sliding. */
.testimonials {
  overflow: hidden;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, var(--white) 0%, #eef4ff 56%, var(--canvas) 100%);
}

.testimonials-heading {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.testimonials-heading > p:last-child {
  margin-inline: auto;
  text-align: center;
}

.testimonial-carousel {
  --testimonial-card-width: clamp(300px, 42vw, 560px);
  --testimonial-step: calc(var(--testimonial-card-width) * 0.8);
  --testimonial-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --testimonial-duration: 460ms;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(6px, 1.6vw, 18px);
  /* Soft framed panel that holds the three cards, echoing the reference design.
     The vertical padding is kept tight so the frame hugs the active card. */
  padding: clamp(16px, 1.8vw, 26px) clamp(14px, 2.6vw, 36px);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius-lg) + 8px);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.testimonial-arrow {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy-900);
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition), color var(--transition),
    box-shadow var(--transition);
}

.testimonial-arrow:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 111, 237, 0.55);
  color: var(--blue-600);
  box-shadow: 0 14px 30px rgba(34, 88, 197, 0.16);
}

.testimonial-viewport {
  /* overflow-x only, so the card shadows are not clipped top and bottom. */
  overflow-x: clip;
  overflow-y: visible;
  padding-block: 8px;
  touch-action: pan-y;
}

.testimonial-track {
  display: grid;
}

.testimonial-card {
  z-index: 1;
  display: flex;
  width: var(--testimonial-card-width);
  max-width: 100%;
  flex-direction: column;
  padding: clamp(11px, 1.2vw, 16px) clamp(26px, 3vw, 40px) clamp(22px, 2.4vw, 32px);
  border: 1px solid rgba(202, 211, 223, 0.85);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 12px 30px rgba(34, 88, 197, 0.05);
  grid-area: 1 / 1;
  justify-self: center;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(calc(var(--pos, 0) * var(--testimonial-step)), 0, 0) scale(0.81);
  transition: transform var(--testimonial-duration) var(--testimonial-ease),
    opacity var(--testimonial-duration) var(--testimonial-ease),
    filter var(--testimonial-duration) var(--testimonial-ease),
    box-shadow var(--testimonial-duration) var(--testimonial-ease);
  will-change: transform, opacity;
}

.testimonial-card.is-side {
  z-index: 2;
  opacity: 0.72;
  box-shadow: 0 10px 26px rgba(34, 88, 197, 0.04);
}

.testimonial-card.is-active {
  z-index: 3;
  border-color: rgba(47, 111, 237, 0.26);
  box-shadow: 0 30px 66px rgba(34, 88, 197, 0.16);
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
}

.testimonial-mark {
  /* A high opening quote (“) sitting clearly above the text as a decorative
     accent, rather than tucked against the first line. */
  margin-bottom: 8px;
  color: rgba(47, 111, 237, 0.28);
  font-size: 4rem;
  font-weight: 700;
  line-height: 0.7;
  transform: translateY(-5px);
  user-select: none;
}

.testimonial-quote {
  margin: 0 0 clamp(20px, 2.4vw, 28px);
}

.testimonial-quote p {
  margin-bottom: 0;
  color: var(--text);
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  line-height: 1.62;
  text-align: justify;
  text-wrap: pretty;
}

.testimonial-meta {
  margin-top: auto;
  padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid var(--border);
}

.testimonial-meta p {
  margin-bottom: 0;
}

.testimonial-company {
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.testimonial-person {
  color: var(--muted);
  font-size: 0.98rem;
}

.testimonial-role {
  color: var(--muted);
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  opacity: 0.85;
}

/* Development placeholder – shown only while real references are missing. */
.testimonial-card.is-placeholder {
  border-style: dashed;
  border-color: var(--border-strong);
  background: var(--warm-white);
  box-shadow: none;
}

.testimonial-card.is-placeholder .testimonial-quote p,
.testimonial-card.is-placeholder .testimonial-company {
  color: var(--muted);
}

.testimonial-card.is-placeholder .testimonial-mark {
  color: var(--border-strong);
}

.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: clamp(14px, 2vw, 20px);
  grid-column: 1 / -1;
}

.testimonial-dot {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.testimonial-dot::before {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--border-strong);
  content: "";
  transition: width var(--transition), background-color var(--transition);
}

.testimonial-dot:hover::before {
  background: var(--blue-600);
}

.testimonial-dot[aria-current="true"]::before {
  width: 24px;
  background: var(--blue-600);
}

/* A single real reference needs no controls. */
.testimonial-carousel.is-single .testimonial-arrow,
.testimonial-carousel.is-single .testimonial-dots {
  display: none;
}

.testimonial-carousel.is-single {
  --testimonial-card-width: min(100%, 660px);
}

@media (max-width: 900px) {
  .testimonial-carousel {
    --testimonial-card-width: min(74vw, 460px);
    --testimonial-step: calc(var(--testimonial-card-width) * 0.86);
  }
}

@media (max-width: 760px) {
  /* Arrows drop below the cards so the active testimonial keeps the full width. */
  .testimonial-carousel {
    --testimonial-card-width: min(78vw, 420px);
    row-gap: 0;
  }

  .testimonial-viewport {
    grid-row: 1;
    grid-column: 1 / -1;
  }

  /* Each active review sets the carousel height from its own content, rather
     than inheriting the tallest review's empty space. */
  .testimonial-track {
    transition: height var(--testimonial-duration) var(--testimonial-ease);
  }

  .testimonial-card {
    align-self: start;
  }

  .testimonial-quote p {
    text-align: left;
    text-justify: auto;
  }

  .testimonial-arrow-prev {
    grid-row: 2;
    grid-column: 1;
  }

  .testimonial-arrow-next {
    grid-row: 2;
    grid-column: 3;
  }

  .testimonial-dots {
    grid-row: 2;
    grid-column: 2;
    align-self: center;
  }
}

@media (max-width: 520px) {
  /* The narrower card is what makes room for the peeking neighbours on a phone;
     the smaller step then pushes them out to the edge of the viewport. */
  .testimonial-carousel {
    --testimonial-card-width: min(76vw, 360px);
    --testimonial-step: calc(var(--testimonial-card-width) * 0.88);
  }

  .testimonial-arrow {
    width: 44px;
    height: 44px;
  }
}

/* Client logos below the carousel. They form a centred group; at these sizes
   the five logos can't share one line, so a hard break (.reference-logos-break)
   splits them into two balanced, centred rows (3 + 2) instead of stranding one
   logo on its own line. Each logo is a link to the client's site; hovering (or
   focusing) one scales it up and the extra inline margin nudges its row-mates
   aside so the enlarged logo never overlaps them. */
.reference-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 28px) clamp(22px, 4vw, 56px);
  margin-top: clamp(38px, 5vw, 62px);
}

/* Hard line break: forces everything after it onto the second row. */
.reference-logos-break {
  flex-basis: 100%;
  height: 0;
  margin: 0;
  padding: 0;
}

.reference-logo-divider {
  width: 1px;
  height: clamp(34px, 4vw, 52px);
  background: var(--border-strong);
}

.reference-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-900);
  transform-origin: center;
  transition: transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1),
    margin 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.reference-logo-text span {
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Background-size / -position are derived from the badge's bounding box inside
   the source file (badge ≈ 78.2% wide × 72.0% tall, centred), so the white
   margin around it is cropped away and only the badge shows. */
.reference-logo-badge {
  display: block;
  height: clamp(48px, 6vw, 70px);
  aspect-ratio: 1.446;
  background-image: url("/assets/images/giorgios-bistro-logo.webp");
  background-repeat: no-repeat;
  background-position: 50% 55%;
  background-size: 127.85% 138.81%;
}

/* Wide wordmark; height is tuned to the cap height of the text logos so it sits
   in line with them. The white margin was already keyed out of the source PNG. */
.reference-logo-normoq {
  display: block;
  height: clamp(30px, 3.6vw, 44px);
  width: auto;
}

.reference-logo:hover,
.reference-logo:focus-visible {
  z-index: 2;
  margin-inline: clamp(16px, 3vw, 32px);
  transform: scale(1.32);
}

/* Reduced motion keeps the enlarge-on-hover (it aids recognition) but drops the
   sideways shove, which is the part that reads as animation. */
@media (prefers-reduced-motion: reduce) {
  .reference-logo:hover,
  .reference-logo:focus-visible {
    margin-inline: 0;
    transform: scale(1.12);
  }
}

@media (max-width: 520px) {
  .reference-logos {
    gap: clamp(14px, 4vw, 24px) clamp(18px, 6vw, 34px);
  }
}

.contact {
  overflow: hidden;
  background: linear-gradient(135deg, #f1f6ff 0%, #f7f9fc 48%, #ffffff 100%);
}

.contact-mark {
  position: absolute;
  right: -35px;
  bottom: -165px;
  color: rgba(47, 111, 237, 0.028);
  font-family: Georgia, serif;
  font-size: 590px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.contact-section-heading {
  position: relative;
  margin-bottom: 44px;
}

.contact-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: stretch;
  border-radius: var(--radius-lg);
  background: var(--navy-900);
  box-shadow: var(--shadow-panel);
}

.contact-details {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(38px, 5vw, 60px);
  color: var(--white);
}

.contact-person {
  margin-bottom: 34px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.contact-person > span {
  display: block;
  margin-bottom: 8px;
  color: #9eabc0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-person h3 {
  margin-bottom: 0;
  font-size: clamp(1.35rem, 2.3vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.035em;
}

.contact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px 20px;
  margin-bottom: 34px;
  font-style: normal;
}

.contact-row {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 13px;
}

a.contact-row {
  transition: color var(--transition);
}

a.contact-row:hover strong {
  color: #a9c3ff;
}

.contact-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.065);
  color: #91b2ff;
}

.contact-icon .icon {
  width: 18px;
  height: 18px;
}

.contact-row > span:last-child {
  min-width: 0;
}

.contact-row small {
  display: block;
  margin-bottom: 2px;
  color: #98a7bd;
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.contact-row strong {
  display: block;
  overflow-wrap: anywhere;
  color: #f1f4f9;
  font-size: 0.87rem;
  font-weight: 550;
  line-height: 1.55;
  transition: color var(--transition);
}

.quote-box {
  margin-top: auto;
  border: 1px solid rgba(141, 178, 255, 0.2);
  border-radius: 14px;
  padding: 24px;
  background: rgba(47, 111, 237, 0.11);
}

.quote-box h3 {
  margin-bottom: 13px;
  color: var(--white);
  font-size: 1.06rem;
  font-weight: 650;
}

.quote-box p {
  margin-bottom: 10px;
  color: #cbd5e4;
  font-size: 0.84rem;
  line-height: 1.65;
}

.quote-box p:last-child {
  margin-bottom: 0;
}

.quote-box a {
  color: #a8c2ff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-card {
  position: relative;
  margin: 12px;
  border-radius: 20px;
  padding: clamp(34px, 5vw, 54px);
  background: var(--white);
  color: var(--text);
}

.form-card-heading {
  margin-bottom: 31px;
}

.form-card-heading .eyebrow {
  margin-bottom: 12px;
}

.form-card-heading h3 {
  margin-bottom: 12px;
  font-size: clamp(1.65rem, 3vw, 2.1rem);
  font-weight: 650;
  letter-spacing: -0.045em;
}

.form-card-heading > p:last-child {
  max-width: 54ch;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 19px 16px;
}

.form-field {
  min-width: 0;
}

.form-field-message,
.form-status,
.form-submit {
  grid-column: 1 / -1;
}

.form-field label {
  display: inline-block;
  margin-bottom: 7px;
  color: #344154;
  font-size: 0.82rem;
  font-weight: 650;
}

/* The required marker only. The label text sits in its own span so it can be
   translated, and must keep the normal label colour. */
.form-field label span[aria-hidden="true"] {
  color: var(--blue-700);
}

.form-field input,
.form-field textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fbfcfe;
  color: var(--text);
  outline: 0;
  transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.form-field input {
  height: 51px;
  padding-inline: 15px;
}

.form-field textarea {
  min-height: 146px;
  padding: 13px 15px;
  resize: vertical;
}

.form-field input:hover,
.form-field textarea:hover {
  border-color: #aeb9c9;
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--blue-600);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(47, 111, 237, 0.11);
}

.form-field input:user-invalid,
.form-field textarea:user-invalid {
  border-color: rgba(164, 63, 72, 0.58);
}

.bot-field {
  position: absolute !important;
  top: auto !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.form-status {
  display: none;
  min-height: 46px;
  align-items: center;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 0.84rem;
  font-weight: 550;
}

.form-status:not(:empty) {
  display: flex;
}

.form-status--pending {
  background: #f0f4f9;
  color: var(--muted);
}

.form-status--success {
  background: #e9f5f2;
  color: var(--success);
}

.form-status--error {
  border: 1px solid rgba(164, 63, 72, 0.16);
  background: #fbf0f1;
  color: var(--error);
}

.form-submit {
  position: relative;
  width: 100%;
  min-height: 54px;
  margin-top: 2px;
}

.form-submit:disabled {
  cursor: wait;
  opacity: 0.78;
  transform: none;
}

.button-loader {
  display: none;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255, 255, 255, 0.38);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: button-spin 800ms linear infinite;
}

.form-submit.is-loading .button-loader {
  display: block;
}

@keyframes button-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Footer */
.site-footer {
  background: var(--navy-950);
  color: #aeb9c9;
}

.footer-inner {
  display: grid;
  min-height: 118px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
}

.footer-brand {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 11px;
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 650;
}

.footer-brand img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.footer-inner p {
  margin-bottom: 0;
  font-size: 0.76rem;
  text-align: center;
}

.footer-privacy {
  justify-self: end;
  border: 0;
  padding: 10px 0;
  background: transparent;
  color: #aeb9c9;
  cursor: pointer;
  font-size: 0.76rem;
  text-decoration: underline;
  text-decoration-color: rgba(174, 185, 201, 0.4);
  text-underline-offset: 4px;
  transition: color var(--transition);
}

.footer-privacy:hover {
  color: var(--white);
}

/* Visually hidden but available to screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Contact form privacy note (plain text, not a consent checkbox). */
.form-consent-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.form-consent-note a {
  color: var(--blue-700);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Footer legal links */
.footer-legal {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  justify-self: end;
}

/* Cookie banner, cookie preferences modal and result dialog */
.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(560px, calc(100vw - 48px));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 26px 70px rgba(8, 25, 48, 0.2);
  backdrop-filter: blur(14px);
}

.cookie-banner[hidden],
.cookie-modal-backdrop[hidden],
.dialog-backdrop[hidden] {
  display: none;
}

.cookie-banner-title {
  margin-bottom: 8px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cookie-banner p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cookie-banner-actions .button {
  flex: 1 1 auto;
  min-height: 46px;
  padding: 10px 16px;
  font-size: 0.82rem;
}

.button-ghost {
  flex-basis: 100%;
  border-color: transparent;
  background: transparent;
  color: var(--blue-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.button-ghost:hover {
  background: var(--blue-50);
}

.cookie-modal {
  width: min(560px, 100%);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  border-radius: var(--radius-md);
  padding: clamp(24px, 4vw, 34px);
  background: var(--white);
  box-shadow: 0 30px 90px rgba(0, 9, 23, 0.34);
  text-align: left;
}

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

.cookie-modal-head h2 {
  margin-bottom: 0;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.cookie-modal-close {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  color: var(--muted);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.cookie-modal-close:hover {
  background: #f0f3f7;
  color: var(--text);
}

.cookie-modal-close .icon {
  width: 18px;
  height: 18px;
}

.cookie-modal-intro {
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.cookie-category {
  padding: 18px 0;
  border-top: 1px solid var(--border);
}

.cookie-category:last-of-type {
  border-bottom: 1px solid var(--border);
}

.cookie-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cookie-category-toggle {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.cookie-category-toggle h3 {
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 650;
}

.cookie-chevron {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transition);
}

.cookie-category-toggle[aria-expanded="true"] .cookie-chevron {
  transform: rotate(180deg);
}

.cookie-category-toggle:hover .cookie-chevron,
.cookie-category-toggle:focus-visible .cookie-chevron {
  stroke: var(--blue-600);
}

.cookie-category-body {
  padding-top: 12px;
}

.cookie-category-body[hidden] {
  display: none;
}

.cookie-category-body > p {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.55;
}

.cookie-detail-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cookie-detail-list li {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--canvas);
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.cookie-detail-list strong {
  color: var(--text);
  font-weight: 650;
}

.cookie-locked {
  color: var(--success);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Toggle switch */
.switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  cursor: pointer;
}

.switch input {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.switch-track {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background-color var(--transition);
}

.switch-track::before {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(8, 25, 48, 0.3);
  content: "";
  transition: transform var(--transition);
}

.switch input:checked + .switch-track {
  background: var(--blue-600);
}

.switch input:checked + .switch-track::before {
  transform: translateX(20px);
}

.switch input:focus-visible + .switch-track {
  outline: 3px solid rgba(47, 111, 237, 0.46);
  outline-offset: 3px;
}

.cookie-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.cookie-modal-actions .button {
  flex: 1 1 auto;
  min-height: 46px;
  padding: 10px 16px;
  font-size: 0.82rem;
}

.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 20, 38, 0.66);
  backdrop-filter: blur(5px);
}

.result-dialog {
  width: min(440px, 100%);
  border-radius: var(--radius-md);
  padding: 34px;
  background: var(--white);
  box-shadow: 0 30px 90px rgba(0, 9, 23, 0.34);
  text-align: center;
}

.result-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 21px;
  background: #e5f3f0;
  color: var(--teal-600);
}

.result-icon .icon {
  width: 27px;
  height: 27px;
  stroke-width: 2.1;
}

.result-dialog h2 {
  margin-bottom: 11px;
  font-size: 1.42rem;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.result-dialog p {
  margin-bottom: 25px;
  color: var(--muted);
  font-size: 0.92rem;
}

.result-dialog .button {
  min-width: 112px;
}

/* Privacy Notice (Ochrana osobných údajov) page */
.legal {
  padding-block: clamp(40px, 6vw, 76px);
  background: var(--white);
}

.legal .container {
  width: min(calc(100% - 48px), 820px);
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  color: var(--blue-700);
  font-size: 0.86rem;
  font-weight: 600;
}

.legal-back .icon {
  width: 17px;
  height: 17px;
}

.legal h1 {
  margin-bottom: 10px;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 650;
  letter-spacing: -0.04em;
}

.legal-updated {
  margin-bottom: 34px;
  color: var(--muted);
  font-size: 0.86rem;
}

.legal h2 {
  margin-top: 40px;
  margin-bottom: 14px;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.legal h3 {
  margin-top: 24px;
  margin-bottom: 8px;
  font-size: 1.02rem;
  font-weight: 650;
}

.legal p,
.legal li {
  color: #33404f;
  font-size: 0.95rem;
  line-height: 1.7;
}

.legal p {
  margin-bottom: 14px;
}

.legal ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.legal li {
  margin-bottom: 6px;
}

.legal a {
  color: var(--blue-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-card {
  margin-bottom: 16px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--canvas);
}

.legal-card p:last-child {
  margin-bottom: 0;
}

.legal-todo {
  padding: 1px 6px;
  border-radius: 5px;
  background: #fff4d6;
  color: #7a5a00;
  font-size: 0.85em;
  font-weight: 600;
}

/* Tighten the spacing between bullets in every card list on small screens.
   Placed after the base list rules so it wins the cascade at equal specificity. */
@media (max-width: 680px) {
  .check-list,
  .advisory-card .check-list,
  .advice-card .check-list,
  .check-list-light {
    gap: 11px;
  }

  .hero-list {
    gap: 9px;
  }

  /* A phone header row cannot hold the brand, the selector and a text button at
     once. The selector stays; the "back" button drops out, because the brand
     logo and the in-page back link above the heading both already lead home. */
  .header-tools {
    gap: 8px;
  }

  .header-tools .header-action {
    display: none;
  }

  .header-tools .lang-switch-option {
    min-width: 32px;
    padding-inline: 4px;
  }

  /* The tagline is the widest part of the brand block and varies most between
     languages. Dropping it on the legal page keeps the selector on the row;
     the home page and every larger screen keep it. */
  body[data-page="privacy"] .brand-subtitle {
    display: none;
  }
}

/* Responsive layout */
@media (max-width: 1160px) {
  .site-nav {
    gap: 14px;
  }

  .site-nav-links {
    gap: 14px;
  }

  .site-nav-links a {
    font-size: 0.78rem;
  }

  .hero-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.95fr);
    gap: 40px;
  }

  .hero-visual {
    transform: scale(0.92);
  }

  .contact-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1040px) {
  :root {
    --header-height: 74px;
  }

  .brand-logo {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .menu-toggle {
    position: relative;
    z-index: 103;
    display: inline-grid;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--white);
    cursor: pointer;
  }

  .menu-toggle-lines {
    display: grid;
    width: 20px;
    gap: 4px;
  }

  .menu-toggle-lines span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--navy-900);
    transition: transform var(--transition), opacity var(--transition);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle-lines span:first-child {
    transform: translateY(6px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle-lines span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle-lines span:last-child {
    transform: translateY(-6px) rotate(-45deg);
  }

  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 102;
    display: flex;
    width: min(390px, 88vw);
    height: 100dvh;
    align-items: stretch;
    flex-direction: column;
    gap: 26px;
    padding: 102px 26px 28px;
    clip-path: inset(0 0 0 100%);
    pointer-events: none;
    border-left: 1px solid var(--border);
    background: var(--white);
    box-shadow: -20px 0 60px rgba(7, 20, 38, 0.16);
    visibility: hidden;
    transition: clip-path 300ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 300ms;
  }

  .site-nav.is-open {
    clip-path: inset(0);
    pointer-events: auto;
    visibility: visible;
  }


  .site-nav-links {
    display: grid;
    gap: 0;
  }

  .site-nav-links a {
    min-height: 56px;
    border-bottom: 1px solid var(--border);
    font-size: 0.96rem;
  }

  .site-nav-links a::after {
    top: 50%;
    right: 2px;
    bottom: auto;
    left: auto;
    width: 6px;
    height: 6px;
    transform: translateY(-50%) scale(0);
    border-radius: 50%;
  }

  .site-nav-links a:hover::after,
  .site-nav-links a[aria-current="true"]::after {
    transform: translateY(-50%) scale(1);
  }

  .nav-dropdown {
    display: block;
  }

  .nav-dropdown-toggle {
    width: 100%;
    min-height: 56px;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    font-size: 0.96rem;
  }

  .nav-dropdown-menu {
    position: static;
    display: block;
    min-width: 0;
    max-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    transform: none;
    visibility: visible;
    overflow: hidden;
    pointer-events: auto;
    transition: max-height var(--transition);
  }

  .nav-dropdown.is-open .nav-dropdown-menu {
    max-height: 420px;
    transform: none;
  }

  .nav-dropdown-label {
    padding: 16px 14px 6px;
  }

  .nav-dropdown-menu a {
    min-height: 52px;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
    padding-left: 14px;
    font-size: 0.92rem;
  }

  .header-action {
    width: 100%;
    min-height: 52px;
    margin-top: auto;
  }

  /* Inside the drawer the selector expands as its own full-width row. */
  .site-nav .lang-switch {
    display: block;
    border-bottom: 1px solid var(--border);
  }

  .site-nav .lang-switch-current {
    width: 100%;
    min-height: 56px;
    justify-content: space-between;
    padding-inline: 0;
    font-size: 0.86rem;
  }

  .site-nav .lang-switch-menu {
    position: static;
    min-width: 0;
    margin-bottom: 10px;
    box-shadow: none;
  }

  .site-nav .lang-switch-option {
    min-height: 46px;
    font-size: 0.86rem;
  }

  /* The legal page has no drawer, so its selector stays inline in the header. */
  .header-tools {
    gap: 12px;
  }

  .header-tools .header-action {
    width: auto;
    min-height: 44px;
    margin-top: 0;
  }

  .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 101;
    display: block;
    border: 0;
    padding: 0;
    background: rgba(7, 20, 38, 0.48);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
  }

  .nav-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  .hero-layout {
    min-height: 660px;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
    gap: 26px;
  }

  .hero h1 {
    font-size: clamp(2.8rem, 5.6vw, 3.5rem);
  }

  .hero-visual {
    min-height: 480px;
    transform: scale(0.84);
    transform-origin: center;
  }

  .audience-item {
    padding-inline: 20px;
  }

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

  .advisory-card:last-child {
    grid-column: 1 / -1;
  }

  .advisory-card:last-child h3 {
    min-height: 0;
  }

  .taxes-layout {
    grid-template-columns: minmax(0, 0.75fr) minmax(430px, 1.25fr);
    gap: 44px;
  }

  .contact-details,
  .form-card {
    padding: 38px;
  }
}

@media (max-width: 860px) {
  .hero-layout {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding-top: 76px;
  }

  .about-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .about-heading {
    margin-bottom: 20px;
  }

  .about-portrait {
    height: auto;
    max-width: 300px;
    margin-inline: auto;
  }

  .about-portrait img {
    flex: 0 0 auto;
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .hero-copy {
    max-width: 720px;
  }

  .hero h1 {
    max-width: 700px;
  }

  .hero-visual {
    width: min(520px, 100%);
    min-height: 450px;
    margin-inline: auto;
    transform: none;
  }

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

  .audience-item:nth-child(2) {
    border-right: 1px solid var(--border);
  }

  .audience-item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }

  .audience-item:nth-child(3) {
    border-left: 1px solid var(--border);
  }

  .service-panels,
  .taxes-layout,
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .taxes-layout {
    gap: 38px;
  }

  .taxes-copy {
    max-width: 680px;
  }

  .contact-layout {
    border-radius: 24px;
  }

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

  .form-card {
    margin: 0 12px 12px;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  .footer-inner p {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-bottom: 25px;
  }
}

@media (max-width: 680px) {
  .container {
    width: min(calc(100% - 40px), var(--container));
  }

  .section {
    padding-block: 78px;
  }

  .hero-layout {
    padding-block: 65px 78px;
  }

  .hero h1 {
    margin-bottom: 21px;
    font-size: clamp(2.45rem, 11vw, 3.15rem);
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .hero-contact a {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .hero-visual {
    min-height: 390px;
  }

  .logo-orbit {
    width: 264px;
    height: 264px;
  }

  .logo-disc {
    width: 198px;
    height: 198px;
    border-width: 7px;
  }

  .hero-ledger {
    transform: scale(0.83) rotate(-9deg);
  }

  .hero-ledger-back {
    transform: scale(0.83) rotate(10deg);
  }

  .audience-tag {
    min-height: 44px;
    padding: 9px 11px;
    font-size: 0.68rem;
  }

  .advisory-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .advisory-card:last-child {
    grid-column: auto;
  }

  .advisory-card h3 {
    min-height: 0;
  }

  .contact-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-field-message,
  .form-status,
  .form-submit {
    grid-column: auto;
  }

  .cookie-banner {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    border-radius: 18px 18px 12px 12px;
    padding: 20px 18px;
  }

  .cookie-banner-actions .button,
  .cookie-modal-actions .button {
    flex-basis: 100%;
  }
}

@media (max-width: 520px) {
  .brand-logo {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .brand-name {
    font-size: 0.9rem;
  }

  .brand-subtitle {
    font-size: 0.62rem;
  }

  .hero-intro {
    line-height: 1.68;
  }

  .hero-contact {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-contact a {
    min-height: 38px;
  }

  .hero-visual {
    min-height: 430px;
    margin-top: 10px;
  }

  .logo-orbit {
    top: 50%;
    width: 200px;
    height: 200px;
  }

  .logo-orbit::before {
    inset: -22px;
  }

  .logo-disc {
    width: 150px;
    height: 150px;
  }

  .hero-ledger {
    display: none;
  }

  /* Keep the audience tags scattered around the logo (like desktop), not stacked below it. */
  .audience-tag {
    max-width: calc(50% - 6px);
    min-height: 46px;
    justify-content: flex-start;
    background: rgba(16, 36, 64, 0.96);
    white-space: normal;
  }

  .audience-tag-company {
    top: 4px;
    left: 0;
    right: auto;
    bottom: auto;
  }

  .audience-tag-self {
    top: 62px;
    right: 0;
    left: auto;
    bottom: auto;
  }

  .audience-tag-employer {
    bottom: 66px;
    right: 0;
    left: auto;
    top: auto;
  }

  .audience-tag-advice {
    bottom: 4px;
    left: 0;
    right: auto;
    top: auto;
  }

  .audience-grid {
    grid-template-columns: minmax(0, 1fr);
    border: 0;
    gap: 0;
  }

  .audience-item,
  .audience-item:first-child,
  .audience-item:nth-child(2),
  .audience-item:nth-child(3) {
    display: grid;
    grid-template-columns: 46px 1fr;
    column-gap: 17px;
    border: 0;
    border-top: 1px solid var(--border);
    padding: 24px 0;
  }

  .audience-item:last-child {
    border-bottom: 1px solid var(--border);
  }

  .audience-item .icon-box {
    grid-row: 1 / 3;
    margin-bottom: 0;
  }

  .audience-item h3 {
    margin-bottom: 5px;
  }

  .audience-item p {
    max-width: none;
  }

  .service-panel,
  .advisory-card {
    padding: 28px 24px 30px;
  }

  /* Keep the panel title beside its icon on phones so the card stays compact. */
  .service-panel-heading {
    align-items: center;
    flex-direction: row;
    gap: 14px;
    margin-bottom: 22px;
  }

  .service-icon {
    width: 44px;
    height: 44px;
  }

  .service-icon .icon {
    width: 22px;
    height: 22px;
  }

  .taxes-checklist {
    padding: 27px 23px;
  }

  .contact-layout {
    margin-inline: -8px;
    border-radius: 20px;
  }

  .contact-details,
  .form-card {
    padding: 30px 24px;
  }

  .form-card {
    margin: 0 8px 8px;
    border-radius: 16px;
  }

  .quote-box {
    padding: 21px;
  }

  .footer-inner {
    display: flex;
    padding-block: 28px;
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }

  .footer-brand,
  .footer-legal {
    align-self: center;
  }

  .footer-inner p {
    padding-bottom: 0;
  }

  .result-dialog {
    padding: 30px 24px;
  }
}

@media (max-width: 374px) {
  .container {
    width: min(calc(100% - 32px), var(--container));
  }

  .brand-copy {
    gap: 0;
  }

  .brand-subtitle {
    letter-spacing: 0.04em;
  }

  .hero h1 {
    font-size: 2.25rem;
  }

  .hero-visual {
    min-height: 430px;
  }

  .audience-tag {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    min-height: 60px;
    max-width: calc(50% - 4px);
    padding: 8px 10px;
  }

  .audience-tag-self {
    top: 70px;
  }

  .audience-tag-employer {
    bottom: 74px;
  }

  .site-nav {
    width: 94vw;
  }
}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}