/*
 * North House Tech - Stylesheet
 * "Warm atelier lookbook" design system:
 * off-white / beige paper, serif typography, hairline rules,
 * matted image plates and a long editorial flow.
 */

/* --- DESIGN TOKENS --- */
:root {
  --paper: #F8F6F1;         /* Warm White */
  --paper-2: #E8E5DE;       /* Warm Gray panel */
  --card: #FFFFFF;          /* Pure white card */
  --ink: #0B1F33;           /* Deep Navy for headings */
  --ink-soft: #374151;      /* Charcoal for readable body text */
  --ink-faint: #6B7280;     /* Muted gray-blue for secondary text */
  --line: #DCEAF5;          /* Soft Blue for borders */
  --line-strong: #B5C9DB;   /* Darker soft blue/gray border */
  --accent: #D6A84F;        /* Lighthouse Gold */
  --accent-hover: #C0923B;  /* Darker Gold */
  --accent-tint: rgba(214, 168, 79, 0.08);

  --shadow-plate: 0 18px 40px -24px rgba(11, 31, 51, 0.15);
  --shadow-card: 0 1px 3px rgba(11, 31, 51, 0.05), 0 1px 2px rgba(11, 31, 51, 0.03);
  --shadow-lift: 0 20px 40px -20px rgba(11, 31, 51, 0.25);

  --radius-sm: 4px;
  --radius-md: 8px;

  --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);

  --max-width: 1180px;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --header-height: 78px;
}

/* --- RESET & BASE --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--paper);
  color: var(--ink-soft);
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

/* Subtle paper-grain overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

p { color: var(--ink-soft); }

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

a {
  color: var(--accent);
  text-decoration: none;
  transition: var(--transition-fast);
}

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

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

/* --- ACCESSIBILITY --- */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* --- LAYOUT --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 2;
}

.section {
  padding: 80px 0;
}

.section + .section,
.section-alt + .section {
  border-top: 1px solid var(--line);
}

.section-alt {
  background-color: var(--paper-2);
  padding: 80px 0;
}

/* --- SHARED TYPE ELEMENTS --- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  background-color: var(--accent);
  vertical-align: middle;
  margin-right: 12px;
  transform: translateY(-2px);
}

.section-header {
  max-width: 660px;
  margin-bottom: 48px;
}

.section-title {
  font-size: clamp(34px, 4.5vw, 50px);
  color: var(--ink);
  margin-bottom: 20px;
}

.section-subtitle {
  font-size: 21px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* --- BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-primary {
  background-color: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.btn-primary:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -14px rgba(214, 168, 79, 0.6);
}

.btn-secondary {
  background-color: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn-secondary:hover {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
}

/* Understated inline "read more" text link */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 3px;
}

.text-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.text-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.text-link:hover svg { transform: translateX(4px); }

/* --- IMAGE PLATE (solid, frameless) --- */
.plate {
  position: relative;
}

.plate-frame {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #efe6d6 0%, #e4d8c3 100%);
  box-shadow: var(--shadow-plate);
  aspect-ratio: 4 / 3;
}

.plate-frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.plate-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  opacity: 0.55;
}

.plate-fallback svg { width: 54px; height: 54px; }

.plate-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.plate-caption .plate-index { color: var(--accent); }

/* --- STICKY HEADER --- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background-color: rgba(243, 237, 225, 0.82);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--line);
  z-index: 1000;
  display: flex;
  align-items: center;
  transition: var(--transition-smooth);
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  user-select: none;
}

.logo-img {
  height: 48px;
  width: auto;
  display: block;
  /* white artwork -> solid ink on the light header */
  filter: brightness(0) saturate(100%);
  opacity: 0.9;
  transition: var(--transition-smooth);
}

.logo:hover .logo-img { opacity: 1; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 32px;
}

.header .nav-link {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 6px 0;
  position: relative;
  transition: var(--transition-fast);
}

.header .nav-link:hover,
.header .nav-link.active { color: var(--ink); }

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Services dropdown */
.nav-item--dropdown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: var(--transition-fast);
}

.nav-dropdown-toggle svg {
  width: 15px;
  height: 15px;
  transition: transform 0.3s ease;
}

.nav-item--dropdown:hover .nav-dropdown-toggle,
.nav-item--dropdown:focus-within .nav-dropdown-toggle { color: var(--ink); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 260px;
  background-color: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
  padding: 8px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  z-index: 1200;
}

/* Bridge the gap so hover doesn't drop */
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 18px;
}

.nav-item--dropdown:hover .nav-dropdown,
.nav-item--dropdown:focus-within .nav-dropdown,
.nav-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}

.nav-item--dropdown:hover .nav-dropdown-toggle svg,
.nav-item--dropdown:focus-within .nav-dropdown-toggle svg { transform: rotate(180deg); }

.nav-dropdown-link {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-soft);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.nav-dropdown-link:hover {
  background-color: var(--paper-2);
  color: var(--ink);
}

/* Language switcher */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 3px;
}

.lang-btn {
  background: none;
  border: none;
  padding: 5px 11px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.lang-btn.active {
  background-color: var(--ink);
  color: var(--paper);
}

/* Mobile hamburger */
.mobile-menu-btn {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  width: 42px;
  height: 42px;
  cursor: pointer;
  padding: 0;
  z-index: 1100;
  transition: var(--transition-smooth);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mobile-menu-btn:hover { border-color: var(--accent); }

.mobile-menu-btn span {
  display: block;
  width: 18px;
  height: 1.5px;
  background-color: var(--ink);
  margin: 2.5px 0;
  transition: var(--transition-smooth);
}

/* --- HERO (full-viewport fade carousel) --- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}

.hero-carousel {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s ease, visibility 0s linear 1.1s;
  display: flex;
  align-items: center;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.1s ease, visibility 0s;
}

.hero-slide-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, #2a2620 0%, #14110d 100%);
  overflow: hidden;
}

.hero-slide-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}

/* Slow Ken Burns drift on the active slide */
.hero-slide.is-active .hero-slide-media img {
  animation: heroDrift 14s ease-out forwards;
}

@keyframes heroDrift {
  from { transform: scale(1.04); }
  to { transform: scale(1.13); }
}

/* Warm scrim keeps serif text legible over the photo, without crushing it black */
.hero-slide-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(20, 17, 13, 0.64) 0%, rgba(20, 17, 13, 0.38) 45%, rgba(20, 17, 13, 0.1) 100%),
    linear-gradient(0deg, rgba(20, 17, 13, 0.42) 0%, rgba(20, 17, 13, 0) 45%);
}

/* The IT hero photo is busier than the others — deepen the scrim under the copy */
.hero--dense .hero-slide-scrim {
  background:
    linear-gradient(90deg, rgba(11, 20, 30, 0.86) 0%, rgba(11, 20, 30, 0.62) 48%, rgba(11, 20, 30, 0.22) 100%),
    linear-gradient(0deg, rgba(11, 20, 30, 0.5) 0%, rgba(11, 20, 30, 0) 48%);
}

.hero-slide-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.hero .hero-eyebrow {
  color: #e6b79c;
  margin-bottom: 22px;
}

.hero .hero-eyebrow::before { background-color: #e6b79c; }

.hero-title {
  font-size: clamp(44px, 6.4vw, 82px);
  line-height: 1.02;
  color: #f6efe3;
  margin-bottom: 26px;
  font-weight: 400;
  max-width: 16ch;
}

.hero-title em { color: #e6b79c; }

.hero-subtitle {
  font-size: clamp(18px, 1.5vw, 21px);
  color: rgba(246, 239, 227, 0.82);
  line-height: 1.6;
  margin-bottom: 38px;
  max-width: 540px;
}

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

/* Trust reassurance line under the hero CTAs (campaign pages) */
.hero-trust-line {
  margin-top: 24px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(246, 239, 227, 0.72);
}

/* Ghost button tuned for the dark hero */
.btn-secondary--on-dark {
  color: #f6efe3;
  border-color: rgba(246, 239, 227, 0.45);
}

.btn-secondary--on-dark:hover {
  background-color: #f6efe3;
  border-color: #f6efe3;
  color: var(--ink);
}

/* Carousel dots (hidden by JS when a single slide) */
.hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.hero-dots[hidden] { display: none; }

.hero-dot {
  width: 30px;
  height: 3px;
  border: none;
  padding: 0;
  background-color: rgba(246, 239, 227, 0.35);
  cursor: pointer;
  transition: var(--transition-fast);
}

.hero-dot.is-active { background-color: #e6b79c; }

/* Scroll cue */
.hero-scroll-cue {
  position: absolute;
  z-index: 3;
  right: 32px;
  bottom: 30px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246, 239, 227, 0.8);
}

.hero-scroll-cue:hover { color: #f6efe3; }

.hero-scroll-cue svg {
  width: 16px;
  height: 16px;
  animation: scrollBob 1.8s ease-in-out infinite;
}

@keyframes scrollBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* --- SERVICES (editorial alternating rows) --- */
.services-intro { margin-bottom: 24px; }

/* Quick-jump pills */
.service-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.service-pill {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 9px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  white-space: nowrap;
  transition: var(--transition-fast);
}

.service-pill:hover {
  color: var(--paper);
  background-color: var(--ink);
  border-color: var(--ink);
}

.service-pill.is-active {
  color: var(--paper);
  background-color: var(--accent);
  border-color: var(--accent);
}

/* Icon card grid (replaces the per-service photo rows) */
.service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 48px;
}

.service-card {
  background-color: var(--card);
  border: 1px solid var(--line);
  padding: 34px 32px 36px;
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
  scroll-margin-top: calc(var(--header-height) + 20px);
}

.service-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-plate);
  transform: translateY(-4px);
}

.service-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.service-card-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: var(--transition-smooth);
}

.service-card:hover .service-card-icon {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #f6efe3;
}

.service-card-icon svg { width: 26px; height: 26px; }

.service-card-index {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}

.service-card-title {
  font-size: 25px;
  color: var(--ink);
  margin-bottom: 12px;
}

.service-card-desc {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Cards that lead to a page of their own */
.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.service-card-link svg { transition: var(--transition-fast); }

.service-card:hover .service-card-link svg { transform: translateX(3px); }

.service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
  padding: 52px 0;
  border-top: 1px solid var(--line);
}

.service-row:last-child { padding-bottom: 8px; }

.service-figure { position: relative; }

.service-row--reverse .service-figure { order: 2; }

.service-figure .plate-frame { aspect-ratio: 4 / 3; }

.service-figure:hover .plate-frame img { transform: scale(1.04); }

/* Industries grid (homepage links into the campaign landing pages) */
.industry-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 48px;
}

.industry-card {
  background-color: var(--card);
  border: 1px solid var(--line);
  padding: 32px 28px 30px;
  display: flex;
  flex-direction: column;
  color: inherit;
  transition: var(--transition-smooth);
}

.industry-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-plate);
  transform: translateY(-4px);
}

.industry-card-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  margin-bottom: 22px;
  transition: var(--transition-smooth);
}

.industry-card:hover .industry-card-icon {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #f6efe3;
}

.industry-card-icon svg { width: 24px; height: 24px; }

.industry-card-title {
  font-size: 21px;
  color: var(--ink);
  margin-bottom: 10px;
}

.industry-card-desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  flex-grow: 1;
}

.industry-card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.industry-card-link svg { transition: var(--transition-fast); }

.industry-card:hover .industry-card-link svg { transform: translateX(3px); }

.service-eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.service-title {
  font-size: clamp(30px, 3.4vw, 40px);
  color: var(--ink);
  margin-bottom: 20px;
}

.service-desc {
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 26px;
}

.service-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 34px;
}

.service-bullets li {
  position: relative;
  padding-left: 26px;
  font-size: 18px;
  color: var(--ink);
  line-height: 1.5;
}

.service-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 1px;
  background-color: var(--accent);
}

/* --- PORTFOLIO --- */
.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.portfolio-filter-btn {
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: var(--transition-fast);
}

.portfolio-filter-btn:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.portfolio-filter-btn.is-active {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.portfolio-card {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), var(--transition-smooth);
  will-change: opacity, transform;
}

.portfolio-img-container {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(135deg, #efe6d6 0%, #e4d8c3 100%);
  box-shadow: var(--shadow-plate);
  transition: var(--transition-smooth);
}

.portfolio-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-fallback-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  opacity: 0.5;
}

.portfolio-fallback-bg svg { width: 48px; height: 48px; }

.portfolio-card:hover .portfolio-img { transform: scale(1.05); }

.portfolio-card:hover .portfolio-img-container {
  box-shadow: var(--shadow-lift);
  border-color: var(--line-strong);
}

.portfolio-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(38, 34, 28, 0.32);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
  z-index: 2;
}

.portfolio-card:hover .portfolio-overlay { opacity: 1; }

.portfolio-btn {
  background-color: var(--paper);
  color: var(--ink);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(10px);
  transition: var(--transition-smooth);
}

.portfolio-card:hover .portfolio-btn { transform: translateY(0); }

.portfolio-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.portfolio-tag {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
}

.portfolio-card-title {
  font-size: 24px;
  color: var(--ink);
  margin: 6px 0 0;
}

.portfolio-card-desc { display: none; } /* description reserved for modal */

/* --- ABOUT --- */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: start;
}

.about-intro-text {
  font-size: 24px;
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 40px;
  font-weight: 400;
}

.about-pillars {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.about-pillar {
  display: flex;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.about-pillar:last-child { border-bottom: 1px solid var(--line); }

.about-pillar-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  color: var(--accent);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.about-pillar-icon svg { width: 26px; height: 26px; }

.about-pillar-title {
  font-size: 21px;
  color: var(--ink);
  margin-bottom: 6px;
}

.about-pillar-desc { font-size: 17px; color: var(--ink-soft); }

.about-founder-card {
  background-color: var(--card);
  border: 1px solid var(--line);
  padding: 40px;
  box-shadow: var(--shadow-card);
  position: sticky;
  top: calc(var(--header-height) + 24px);
}

.founder-profile {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.founder-avatar-placeholder {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--paper-2) 0%, var(--line) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.founder-avatar-placeholder svg { width: 32px; height: 32px; }

.founder-info-name {
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 2px;
}

.founder-info-role {
  font-size: 15px;
  font-style: italic;
  color: var(--ink-faint);
}

.founder-quote {
  font-size: 20px;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  line-height: 1.5;
}

/* --- CONTACT --- */
.contact-card {
  background-color: var(--card);
  border: 1px solid var(--line);
  padding: 72px 56px;
  text-align: center;
  box-shadow: var(--shadow-plate);
  max-width: 860px;
  margin: 0 auto;
}

.contact-title {
  font-size: clamp(34px, 4.5vw, 52px);
  color: var(--ink);
  margin-bottom: 18px;
}

.contact-desc {
  font-size: 20px;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

.contact-form {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group { display: flex; flex-direction: column; }

.form-group.full-width { grid-column: span 2; }

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  background-color: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  transition: var(--transition-smooth);
}

.form-group select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2326221c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 40px;
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--ink-faint); }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.contact-submit-btn {
  align-self: center;
  margin-top: 6px;
}

.form-status {
  text-align: center;
  font-size: 16px;
  font-style: italic;
  margin-top: 4px;
  min-height: 1.2em;
}

.form-status.is-success { color: #4d7c4a; font-style: normal; }
.form-status.is-error { color: #b0472f; font-style: normal; }

.contact-email-text {
  display: block;
  margin-top: 26px;
  font-size: 17px;
  font-style: italic;
  color: var(--ink-faint);
}

.contact-email-text a {
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  font-style: normal;
}

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

/* --- FOOTER --- */
.footer {
  border-top: 1px solid var(--line);
  padding: 40px 0;
  font-size: 16px;
  color: var(--ink-faint);
}

.footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-serving {
  display: flex;
  align-items: center;
  gap: 10px;
  font-style: italic;
}

.footer-serving svg { color: var(--accent); }

/* --- FLOATING ACTION BUTTON --- */
.fab {
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 999;
  background-color: var(--ink);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: var(--transition-smooth);
}

.fab svg { width: 18px; height: 18px; }

.fab:hover {
  background-color: var(--accent);
  color: var(--paper);
  transform: translateY(-3px);
}

/* --- PORTFOLIO MODAL --- */
.modal {
  position: fixed;
  inset: 0;
  background-color: rgba(38, 34, 28, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background-color: var(--card);
  border: 1px solid var(--line);
  max-width: 780px;
  width: 100%;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  position: relative;
  transform: scale(0.96);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.modal.active .modal-content { transform: scale(1); }

.modal-header-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #efe6d6 0%, #e4d8c3 100%);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.modal-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background-color: rgba(38, 34, 28, 0.75);
  border: none;
  color: var(--paper);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
  z-index: 10;
}

.modal-close-btn:hover {
  background-color: var(--ink);
  transform: scale(1.05);
}

.modal-close-btn svg { width: 20px; height: 20px; }

.modal-body { padding: 36px; overflow-y: auto; }

.modal-tag-wrapper { margin-bottom: 10px; }

.modal-title {
  font-size: 32px;
  color: var(--ink);
  margin-bottom: 16px;
}

.modal-desc {
  font-size: 18px;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* --- SCROLL REVEAL (fade + rise) --- */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

/* --- LIGHTHOUSE BEAM --- */
.lighthouse-beam {
  position: absolute;
  top: 10%;
  left: -25%;
  width: 150vw;
  height: 60vh;
  background: radial-gradient(ellipse at 0% 50%, rgba(214, 168, 79, 0.14) 0%, rgba(214, 168, 79, 0.03) 45%, transparent 75%);
  transform-origin: 0% 50%;
  transform: rotate(-25deg);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}

/* Single sweep animation on page load */
.reveal-ready .lighthouse-beam {
  animation: beamSweep 2.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes beamSweep {
  0% {
    transform: rotate(-38deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: rotate(12deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .lighthouse-beam {
    animation: none;
    opacity: 0;
  }
}

/* --- BRAND MEANING SECTION --- */
.brand-meaning-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: center;
}

.brand-meaning-lead {
  font-size: 22px;
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: 24px;
}

.brand-meaning-pillars {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.brand-meaning-pillar {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 12px 0;
}

.brand-meaning-pillar h3 {
  font-size: 22px;
  margin-bottom: 6px;
  color: var(--ink);
}

.brand-meaning-pillar p {
  font-size: 18px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.brand-meaning-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background-color: var(--paper-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

.brand-meaning-icon svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 768px) {
  .brand-meaning-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* --- IT PAGE: CROSS-LINK TO CUSTOM SOFTWARE --- */
.it-cross {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: start;
  gap: 34px;
  padding: 44px 46px;
  background-color: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
}

.it-cross-mark {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}

.it-cross-mark svg { width: 46px; height: 46px; }

.it-cross-title {
  font-size: clamp(26px, 3vw, 34px);
  margin-bottom: 14px;
}

.it-cross-desc {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 22px;
  max-width: 62ch;
}

/* --- SPOTLIGHT: RECENT CUSTOM BUILD (dark editorial band) --- */
.spotlight {
  position: relative;
  padding: 84px 0;
  background-color: var(--ink);
  border-top: 1px solid var(--line);
  overflow: hidden;
}

.spotlight::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60%;
  height: 130%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(214, 168, 79, 0.16) 0%, transparent 68%);
}

.spotlight .container { position: relative; }

.eyebrow--on-dark { color: #e6b79c; }
.eyebrow--on-dark::before { background-color: #e6b79c; }

.spotlight-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 56px;
}

.spotlight-title {
  font-size: clamp(30px, 3.7vw, 44px);
  line-height: 1.08;
  color: #f6efe3;
  margin-bottom: 22px;
}

.spotlight-lead {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.55;
  color: rgba(246, 239, 227, 0.88);
  margin-bottom: 18px;
}

.spotlight-body {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(246, 239, 227, 0.66);
}

.spotlight-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* The default primary button is navy — invisible on this band, so it goes gold */
.spotlight-actions .btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}

.spotlight-actions .btn-primary:hover {
  background-color: #f6efe3;
  border-color: #f6efe3;
  box-shadow: 0 14px 26px -14px rgba(246, 239, 227, 0.5);
}

/* Card + scan-frame illustration (drawn, so there is no photo to keep in sync) */
.spotlight-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 10px;
}

.spotlight-card {
  position: relative;
  width: min(380px, 100%);
  aspect-ratio: 1.586;
  padding: 26px 28px;
  border-radius: 16px;
  background: linear-gradient(140deg, #163149 0%, #0b1f33 58%, #1b3b56 100%);
  border: 1px solid rgba(214, 168, 79, 0.42);
  box-shadow: 0 34px 60px -30px rgba(0, 0, 0, 0.8);
  transform: rotate(-3.5deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.spotlight-card-label,
.spotlight-card-balance {
  font-family: var(--font-display);
  max-width: 55%;
}

.spotlight-card-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
}

.spotlight-card-balance {
  font-size: 21px;
  color: #f6efe3;
}

.spotlight-qr {
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-46%);
  width: 108px;
  height: 108px;
  padding: 8px;
  border-radius: 6px;
  background-color: #f6efe3;
  fill: var(--ink);
}

.spotlight-scan {
  --scan-line: 2px;
  --scan-len: 30px;
  position: absolute;
  inset: 6% 2%;
  pointer-events: none;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 0 / var(--scan-len) var(--scan-line) no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 0 / var(--scan-line) var(--scan-len) no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 0 / var(--scan-len) var(--scan-line) no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 0 / var(--scan-line) var(--scan-len) no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 100% / var(--scan-len) var(--scan-line) no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 100% / var(--scan-line) var(--scan-len) no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 100% / var(--scan-len) var(--scan-line) no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 100% / var(--scan-line) var(--scan-len) no-repeat;
}

.spotlight-scan::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 168, 79, 0.85), transparent);
  animation: spotlight-sweep 3.6s ease-in-out infinite alternate;
}

@keyframes spotlight-sweep {
  from { top: 4%; }
  to { top: 96%; }
}

@media (prefers-reduced-motion: reduce) {
  .spotlight-scan::after { animation: none; top: 50%; }
}

.spotlight-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  list-style: none;
  margin-top: 64px;
  border-top: 1px solid rgba(246, 239, 227, 0.18);
}

.spotlight-feature {
  padding: 26px 26px 0;
  border-left: 1px solid rgba(246, 239, 227, 0.12);
}

.spotlight-feature:first-child {
  padding-left: 0;
  border-left: 0;
}

.spotlight-feature h3 {
  font-size: 19px;
  color: #f6efe3;
  margin-bottom: 8px;
}

.spotlight-feature p {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(246, 239, 227, 0.62);
}

/* --- LANDING: TRUST BAR --- */
.trust-bar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background-color: var(--card);
}

.trust-bar .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 44px;
  padding-top: 26px;
  padding-bottom: 26px;
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}

.trust-item svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex-shrink: 0;
}

/* --- LANDING: FEATURE GRID --- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 52px;
  background-color: var(--line);
  border: 1px solid var(--line);
}

.feature-card {
  background-color: var(--card);
  padding: 40px 38px;
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
}

.feature-grid--three { grid-template-columns: repeat(3, 1fr); }

.feature-card:hover { background-color: var(--paper); }

.feature-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  margin-bottom: 22px;
}

.feature-icon svg { width: 24px; height: 24px; }

.feature-title {
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 12px;
}

.feature-desc {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* --- LANDING: NUMBERED STEPS --- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 52px;
  counter-reset: step;
}

.steps--four {
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.step {
  position: relative;
  padding-top: 30px;
  border-top: 2px solid var(--accent);
}

.step-index {
  display: block;
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 18px;
  font-weight: 500;
}

.step-title {
  font-size: 23px;
  color: var(--ink);
  margin-bottom: 10px;
}

.step-desc {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* --- LANDING: FAQ --- */
.faq-list {
  max-width: 820px;
  margin: 48px auto 0;
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 4px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 24px);
  color: var(--ink);
  transition: var(--transition-fast);
}

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

.faq-item summary:hover { color: var(--accent); }

.faq-toggle {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  position: relative;
}

.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 1.5px;
  background-color: var(--accent);
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

.faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq-item[open] .faq-toggle::after { transform: translate(-50%, -50%) rotate(0); }

.faq-answer {
  padding: 0 4px 28px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 68ch;
}

.faq-cta {
  text-align: center;
  margin-top: 44px;
  font-size: 18px;
  font-style: italic;
  color: var(--ink-faint);
}

.faq-cta a {
  font-style: normal;
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

.faq-cta a:hover { color: var(--accent); }

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .hero-title { max-width: 18ch; }
  .service-cards { grid-template-columns: repeat(2, 1fr); }
  .industry-cards { grid-template-columns: repeat(2, 1fr); }
  .service-row { gap: 44px; }
  .about-grid { gap: 52px; }
  .spotlight-grid { gap: 44px; }
  .feature-grid--three { grid-template-columns: repeat(2, 1fr); }
  .steps--four { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .spotlight-features { grid-template-columns: repeat(2, 1fr); }
  .spotlight-feature:nth-child(3) { padding-left: 0; border-left: 0; }
  .spotlight-feature:nth-child(n + 3) { padding-top: 30px; }
}

@media (max-width: 768px) {
  :root { --header-height: 66px; }

  body { font-size: 18px; }

  .container { padding: 0 22px; }

  .section,
  .section-alt { padding: 72px 0; }

  .section-header { margin-bottom: 44px; }

  /* Hamburger nav */
  .mobile-menu-btn { display: flex; }

  .nav-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    /* The header's backdrop-filter is the containing block for this fixed
       panel, so size it with viewport units instead of bottom:0. */
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    background-color: var(--paper);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 44px 28px;
    gap: 28px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    border-top: 1px solid var(--line);
  }

  .nav-menu.active { transform: translateX(0); }

  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 22px;
  }

  .header .nav-menu .nav-link { font-size: 22px; }

  .mobile-menu-btn.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
  .mobile-menu-btn.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Services dropdown collapses inline within the mobile panel */
  .nav-item--dropdown {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  .nav-dropdown-toggle {
    margin-left: auto;
    color: var(--ink);
  }

  .nav-dropdown-toggle svg { width: 20px; height: 20px; }

  .nav-dropdown {
    position: static;
    transform: none;
    width: 100%;
    min-width: 0;
    box-shadow: none;
    border: none;
    border-left: 1px solid var(--line);
    background: none;
    padding: 6px 0 6px 14px;
    margin-top: 8px;
    display: none;
  }

  /* On touch, the panel opens only via the explicit toggle (.is-open),
     never on hover/focus — the base mobile rule keeps it display:none. */
  .nav-item--dropdown .nav-dropdown.is-open {
    display: flex;
    transform: none;
  }

  .nav-dropdown-link { font-size: 18px; padding: 8px 6px; }

  /* Hero — on short phone viewports, vertically-centered content pushes
     the eyebrow up underneath the fixed translucent header, hiding it.
     Anchor content to the bottom instead, and let overflow:visible stop
     any remaining overflow from being invisibly clipped. */
  .hero-slide {
    align-items: flex-end;
    padding-bottom: 40px;
  }
  .hero {
    min-height: 520px;
    overflow: visible;
  }
  .hero-title {
    max-width: 100%;
    font-size: clamp(28px, 8.5vw, 44px);
    margin-bottom: 14px;
  }
  .hero-subtitle { font-size: 15px; margin-bottom: 20px; }
  .hero .hero-eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    margin-bottom: 10px;
  }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { padding: 13px 22px; font-size: 14px; }
  .hero-trust-line { margin-top: 10px; }
  /* Full-width text on mobile needs even coverage, not a left-to-right fade */
  .hero-slide-scrim {
    background:
      linear-gradient(180deg, rgba(20, 17, 13, 0.3) 0%, rgba(20, 17, 13, 0.58) 40%, rgba(20, 17, 13, 0.72) 100%);
  }
  .hero-scroll-cue { display: none; }
  .service-pills { gap: 8px; }
  .service-pill { font-size: 12px; padding: 8px 14px; }

  /* Service cards stack to a single column */
  .service-cards { grid-template-columns: 1fr; }
  .industry-cards { grid-template-columns: 1fr; }
  .service-card { padding: 30px 26px 32px; }

  /* Services stack, image always on top */
  .service-row {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 52px 0;
  }
  .service-row--reverse .service-figure { order: 0; }

  /* About */
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-founder-card { position: static; }

  /* Portfolio */
  .portfolio-grid { grid-template-columns: 1fr; gap: 28px; }

  /* Contact */
  .contact-card { padding: 44px 24px; }
  .form-grid { grid-template-columns: 1fr; gap: 16px; }
  .form-group.full-width { grid-column: span 1; }

  .footer .container { flex-direction: column; text-align: center; }

  .fab { bottom: 16px; right: 16px; padding: 11px 18px; }

  /* Landing components stack */
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { padding: 32px 26px; }
  .steps,
  .steps--four { grid-template-columns: 1fr; gap: 34px; }
  .feature-grid--three { grid-template-columns: 1fr; }
  .trust-bar .container { gap: 14px 28px; }

  /* IT cross-link stacks, icon above the copy */
  .it-cross {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 34px 26px;
  }
  .it-cross-mark { width: 72px; height: 72px; }
  .it-cross-mark svg { width: 34px; height: 34px; }
  .trust-item { font-size: 13px; letter-spacing: 0.03em; }

  /* Spotlight stacks: copy first, illustration below */
  .spotlight { padding: 72px 0; }
  .spotlight-grid { grid-template-columns: 1fr; gap: 40px; }
  .spotlight-art { order: 2; padding: 20px 4px; }
  .spotlight-lead { font-size: 19px; }
  .spotlight-actions .btn { flex: 1 1 auto; }
  .spotlight-features {
    grid-template-columns: 1fr;
    margin-top: 48px;
  }
  .spotlight-feature {
    padding: 24px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(246, 239, 227, 0.12);
  }
  .spotlight-feature:first-child { border-top: 0; }
}

/* =====================================================
   BLOG
   ===================================================== */

/* --- Index grid --- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}

.blog-card {
  display: block;
  color: inherit;
}

.blog-card:hover { color: inherit; }

.blog-card-plate {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, #efe6d6 0%, #e4d8c3 100%);
  box-shadow: var(--shadow-plate);
}

.blog-card-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-card:hover .blog-card-plate img { transform: scale(1.05); }

.blog-card-plate-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  opacity: 0.55;
}

.blog-card-plate-fallback svg { width: 44px; height: 44px; }

.blog-card-plate.is-fallback img { display: none; }
.blog-card-plate.is-fallback .blog-card-plate-fallback { display: flex; }

.blog-card-body { padding-top: 20px; }

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.blog-card-category { color: var(--accent); }
.blog-card-reading-time { color: var(--ink-faint); }

.blog-card-title {
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 10px;
}

.blog-card:hover .blog-card-title { color: var(--accent-hover); }

.blog-card-excerpt {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 16px;
}

/* --- Post header --- */
.blog-post-header {
  padding-top: calc(var(--header-height) + 64px);
  padding-bottom: 40px;
}

.blog-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 28px;
}

.blog-back-link:hover { color: var(--accent); }
.blog-back-link svg { width: 16px; height: 16px; }

.blog-post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.blog-post-date,
.blog-post-reading-time { color: var(--ink-faint); }

.blog-post-title {
  font-size: clamp(32px, 4.5vw, 52px);
  max-width: 20ch;
  margin-bottom: 0;
}

.blog-post-cover {
  position: relative;
  margin-top: 40px;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background: linear-gradient(135deg, #efe6d6 0%, #e4d8c3 100%);
}

.blog-post-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-post-cover-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 17, 13, 0.56) 0%, rgba(20, 17, 13, 0) 55%);
}

.blog-post-cover-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
}

.blog-post-cover-caption span {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(19px, 2.4vw, 26px);
  color: var(--paper);
  max-width: 20ch;
}

/* --- Prose (rendered Markdown body) --- */
.blog-prose {
  max-width: 720px;
  margin: 0 auto;
  font-size: 19px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.blog-prose > *:first-child { margin-top: 0; }

.blog-prose h2 {
  font-size: clamp(24px, 3vw, 30px);
  color: var(--ink);
  margin: 48px 0 18px;
}

.blog-prose h3 {
  font-size: clamp(20px, 2.4vw, 23px);
  color: var(--ink);
  margin: 36px 0 14px;
}

.blog-prose p { margin: 0 0 22px; }

.blog-prose ul,
.blog-prose ol {
  margin: 0 0 22px;
  padding-left: 26px;
}

.blog-prose li { margin-bottom: 10px; }
.blog-prose li > ul,
.blog-prose li > ol { margin-top: 10px; margin-bottom: 0; }

.blog-prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.blog-prose a:hover { color: var(--accent-hover); text-decoration-color: var(--accent); }

.blog-prose strong { color: var(--ink); }

.blog-prose blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
}

.blog-prose blockquote p:last-child { margin-bottom: 0; }

.blog-prose code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--paper-2);
  padding: 2px 6px;
  border-radius: 3px;
}

.blog-prose pre {
  margin: 0 0 22px;
  padding: 20px 22px;
  background: var(--paper-2);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}

.blog-prose pre code { background: none; padding: 0; }

.blog-prose img {
  width: 100%;
  height: auto;
  margin: 8px 0 32px;
  box-shadow: var(--shadow-plate);
}

.blog-prose hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 40px 0;
}

/* --- Tags --- */
.blog-post-tags {
  max-width: 720px;
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.blog-tag {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 14px;
}

@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .blog-grid { grid-template-columns: 1fr; gap: 36px; }
  .blog-post-header { padding-top: calc(var(--header-height) + 40px); }
  .blog-post-cover { aspect-ratio: 4 / 3; margin-top: 28px; }
  .blog-prose { font-size: 17px; }
}

/* =====================================================
   PROMO LANDING PAGE (/connecticut-business-solutions)
   Paid-traffic page. The hero is a dark band carrying the
   lead form instead of a photo, so the form reads as the
   brightest object on the screen the moment the page paints.
   ===================================================== */

.promo-hero {
  position: relative;
  background-color: var(--ink);
  padding: calc(var(--header-height) + 56px) 0 64px;
  overflow: hidden;
}

/* Same gold wash used on the spotlight band, mirrored to sit behind the copy */
.promo-hero::before {
  content: "";
  position: absolute;
  top: -35%;
  left: -12%;
  width: 62%;
  height: 140%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(214, 168, 79, 0.18) 0%, transparent 68%);
}

/* Copy and proof points stack in the left column; the form spans both rows on
   the right. Splitting them into two grid items (rather than one block) is what
   lets the phone layout put the form directly under the headline. */
.promo-hero-grid {
  display: grid;
  grid-template-columns: 1fr 460px;
  grid-template-areas:
    "copy    form"
    "support form";
  align-content: start;
  column-gap: 60px;
  row-gap: 30px;
}

.promo-hero-copy {
  grid-area: copy;
  padding-top: 8px;
}

.promo-hero-support { grid-area: support; }

.promo-form-card { grid-area: form; }

.promo-hero-title {
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.06;
  color: #f6efe3;
  margin-bottom: 22px;
}

.promo-hero-title em { color: #e6b79c; }

.promo-hero-lead {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.55;
  color: rgba(246, 239, 227, 0.86);
  max-width: 34ch;
}

.promo-hero-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-bottom: 28px;
}

.promo-hero-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(246, 239, 227, 0.78);
}

.promo-hero-list svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--accent);
}

.promo-hero-note {
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(246, 239, 227, 0.5);
  padding-top: 22px;
  border-top: 1px solid rgba(246, 239, 227, 0.14);
}

/* --- LEAD FORM CARD --- */
.promo-form-card {
  background-color: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 34px 32px 30px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  /* Sits above the hero's gold wash */
  position: relative;
}

.promo-form-title {
  font-size: 30px;
  color: var(--ink);
  margin-bottom: 10px;
}

.promo-form-subtitle {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-faint);
  margin-bottom: 24px;
}

.promo-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.promo-form-row { display: flex; flex-direction: column; }

.promo-form-row--split {
  flex-direction: row;
  gap: 12px;
}

.promo-form-row--split > div {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.promo-form input,
.promo-form select,
.promo-form textarea {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--ink);
  background-color: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.promo-form select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.promo-form textarea { resize: vertical; line-height: 1.5; }

.promo-form input::placeholder,
.promo-form textarea::placeholder { color: var(--ink-faint); }

.promo-form input:focus,
.promo-form select:focus,
.promo-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.promo-form-submit {
  width: 100%;
  margin-top: 6px;
  padding: 17px 26px;
  font-size: 16px;
}

.promo-form-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.promo-form .form-status { margin-top: 12px; text-align: center; }

.promo-form-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink-faint);
}

.promo-form-privacy svg { flex-shrink: 0; color: var(--accent); }

/* --- REVIEW TOTEM ILLUSTRATION (drawn, no photo to keep in sync) --- */
.promo-totem {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 300px;
}

.promo-totem-screen {
  width: 100%;
  background-color: #12283d;
  border: 1px solid rgba(246, 239, 227, 0.16);
  border-radius: 14px;
  padding: 24px 20px 20px;
  text-align: center;
  box-shadow: 0 26px 50px -26px rgba(0, 0, 0, 0.8);
}

.promo-totem-brand {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(246, 239, 227, 0.42);
  margin-bottom: 16px;
}

.promo-totem-question {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.25;
  color: #f6efe3;
  margin-bottom: 20px;
}

.promo-totem-faces {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 18px;
}

.promo-totem-face {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 0;
  border-radius: 8px;
  color: rgba(246, 239, 227, 0.45);
}

.promo-totem-face svg { width: 100%; height: auto; max-width: 40px; }

/* The 5-star face reads as the one just tapped */
.promo-totem-face.is-picked {
  color: var(--ink);
  background-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(214, 168, 79, 0.22);
  animation: promo-totem-pulse 2.6s ease-in-out infinite;
}

@keyframes promo-totem-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(214, 168, 79, 0.22); }
  50% { box-shadow: 0 0 0 10px rgba(214, 168, 79, 0.06); }
}

.promo-totem-stars {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-bottom: 16px;
}

.promo-totem-stars svg {
  width: 17px;
  height: 17px;
  color: var(--accent);
}

.promo-totem-foot {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246, 239, 227, 0.4);
}

/* Pedestal */
.promo-totem-neck {
  width: 26px;
  height: 54px;
  background: linear-gradient(180deg, rgba(246, 239, 227, 0.22) 0%, rgba(246, 239, 227, 0.09) 100%);
}

.promo-totem-base {
  width: 132px;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(246, 239, 227, 0.2) 0%, rgba(246, 239, 227, 0.06) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .promo-totem-face.is-picked { animation: none; }
}

/* --- INLINE SECTION LINK --- */
.promo-inline-link {
  margin-top: 40px;
  text-align: center;
}

/* --- SERVICE AREA --- */
.promo-area {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: start;
}

.promo-area-title {
  font-size: clamp(28px, 3.4vw, 40px);
  color: var(--ink);
  margin-bottom: 18px;
}

.promo-area-desc {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* Hairlines live on the cells, not in a gap over a tinted parent: the town
   count rarely divides evenly into the column count, and a gap technique
   would paint the leftover cells of the last row as solid blocks. */
.promo-town-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.promo-town-list li {
  background-color: var(--card);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
  font-size: 15px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.promo-area-note {
  margin-top: 18px;
  font-size: 16px;
  font-style: italic;
  color: var(--ink-faint);
}

/* --- PROMO RESPONSIVE --- */
@media (max-width: 1024px) {
  /* Single column: headline → form → proof points. */
  .promo-hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "form"
      "support";
    row-gap: 32px;
  }
  .promo-hero { padding-top: calc(var(--header-height) + 40px); }
  .promo-hero-lead { max-width: none; }
  .promo-form-card { max-width: 560px; }
  .promo-hero-list { margin-bottom: 24px; }
  .promo-area { grid-template-columns: 1fr; gap: 36px; }
  .promo-town-list { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  /* Phone: the headline stays short and the form follows immediately, so the
     submit button is one thumb-scroll from the top of the page. */
  .promo-hero { padding: calc(var(--header-height) + 28px) 0 48px; }
  .promo-hero-grid { row-gap: 26px; }
  .promo-hero-title { font-size: clamp(29px, 8vw, 40px); margin-bottom: 16px; }
  .promo-hero-lead { font-size: 18px; }
  .promo-hero-list { gap: 10px; margin-bottom: 22px; }
  .promo-hero-list li { font-size: 16px; }
  .promo-form-card { padding: 28px 22px 24px; }
  .promo-form-title { font-size: 26px; }
  .promo-form-row--split { flex-direction: column; gap: 12px; }
  .promo-totem { max-width: 260px; }
  .promo-town-list { grid-template-columns: repeat(2, 1fr); }
  .promo-town-list li { font-size: 14px; padding: 11px 12px; }
  .promo-inline-link { margin-top: 32px; }
}