/*
  styles.css — FriDesk sales page (redesign-landing branch).
  Palette/token block and the base reset are kept from the previous
  design; everything from "Header" down is a rewrite for the new section
  order and the asymmetric layout described in the redesign-landing
  briefing (left-aligned hero/statement/how-it-works, centered
  services/why-fridesk/stories/faq/contact, dark/light band alternation).
  Mobile-first: base rules are the phone layout; @media (min-width:1024px)
  is the desktop layout, same breakpoint convention as before.
  Does NOT style the chat widget itself — widget.js renders inside its
  own Shadow DOM with its own embedded CSS, so nothing here can reach it
  except the size/position of the [data-fs-chat="inline"] mount point.
*/

/* ---------- Palette & tokens ---------- */
:root {
  --blue: #14529B;
  --navy: #0B2A57;
  --green: #8CAB2C;
  --green-dark: #5F7B14;
  --ground: #F6F8FB;
  --blue-tint: #EEF3FA;
  --green-tint: #F1F6E1;
  --ink: #14213A;

  --white: #FFFFFF;
  --border: #DCE4F0;
  --border-soft: #E1E8F2;
  --muted: #4F5B6E;
  --muted-2: #5A6679;
  --on-dark-muted: #C3D2E8;

  --font-display: 'Roboto Serif', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

  --container-max: 1200px;
  --container-narrow-max: 980px;
  --container-faq-max: 720px;
  --radius-lg: 20px;
  --radius-md: 16px;
  --shadow-soft: 0 10px 30px rgba(11, 42, 87, 0.08);
  --shadow-card: 0 16px 40px rgba(11, 42, 87, 0.12);
  --section-pad: 64px;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.55;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); }
a:hover { color: var(--navy); }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.005em;
}
p { margin: 0; }
ul { margin: 0; padding: 0; }
/* Only used on dark (navy) backgrounds (hero h1, statement h2) — bright
   green #8CAB2C, not the dark green, because dark-green-on-navy measures
   under 3:1 contrast. See the hero/statement rules below for placement. */
.accent-italic { font-style: italic; color: var(--green); font-weight: inherit; }

/* Visible focus state everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  background: var(--navy);
  color: var(--white);
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  z-index: 1000;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 16px;
}
.container-narrow {
  max-width: var(--container-narrow-max);
  margin: 0 auto;
  padding: 0 16px;
}
.container-faq {
  max-width: var(--container-faq-max);
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------- Buttons & small utilities ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 26px;
  border-radius: 999px;
  min-height: 44px;
  border: none;
  white-space: nowrap;
}
.btn-block { width: 100%; }
/* Blue is the primary action on light backgrounds. */
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--navy); color: var(--white); }
.btn-outline {
  background: var(--white);
  color: var(--blue);
  border: 2px solid var(--blue);
  padding: 12px 24px;
}
.btn-outline:hover { background: var(--blue-tint); }
/* Ghost/secondary button for use ON NAVY backgrounds. Blue-on-navy reads
   weak, so the accent on dark bands is green with navy text instead. */
.btn-ghost {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.5);
  padding: 12px 24px;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--white); color: var(--white); }

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 10px;
  display: block;
}
.eyebrow-on-dark { color: var(--green); }

.section-head { text-align: center; padding: 0 16px; margin-bottom: 32px; }
.section-head h2 { max-width: 640px; margin: 0 auto; }

.section { padding: var(--section-pad) 0 var(--section-pad); }

.inline-now, .inline-soon {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}
.inline-now { background: var(--green-tint); color: var(--green-dark); }
.inline-soon { background: var(--border-soft); color: var(--muted-2); }

/* ---------- Header ---------- */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  z-index: 40;
}
.header-inner {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand-lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo { height: 38px; width: auto; }
.brand-lockup-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--navy); }
.brand-sub { font-size: 11px; color: var(--muted); }
.main-nav { display: none; }
.main-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  color: var(--muted-2);
}
.main-nav a:hover { color: var(--blue); }
.nav-cta { display: none; }

/* ---------- Hero (dark navy band) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
  padding: 48px 0 56px;
  padding-top: 240px; /* clears the mobile image band below; reset on desktop */
}

/* Mobile-first: top banner, chip visible in the upper part, fades to the
   solid navy .hero background by its own bottom edge so the headline below
   always sits on solid navy, never on circuit-board pixels. */
.hero-image {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 260px;
  overflow: hidden;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
.hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 32%; /* keeps the chip in frame — verified by screenshot */
}
.hero-image-glow {
  position: absolute;
  top: 20%;
  left: 55%;
  width: 46%;
  height: 46%;
  background: radial-gradient(circle, rgba(140, 171, 44, 0.30), rgba(140, 171, 44, 0) 70%);
  filter: blur(10px);
  animation: heroChipPulse 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heroChipPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.hero-copy { display: flex; flex-direction: column; gap: 20px; }
.status-pill {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--on-dark-muted);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
}
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; }

.hero-copy h1 {
  color: var(--white);
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.hero-copy h1 em.accent-italic { display: block; margin-top: 4px; }
.hero-copy .lead { font-size: 16px; color: var(--on-dark-muted); max-width: 520px; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
/* Brand rule: on navy backgrounds the primary action is GREEN with NAVY
   text, not blue-on-navy (weak contrast — see contrast notes in the
   report). .btn-primary stays blue everywhere else (light backgrounds). */
.hero .btn-primary { background: var(--green); color: var(--navy); }
.hero .btn-primary:hover { background: var(--green-dark); color: var(--white); }

/* Voice trigger: always visible (hero-polish round) — voice-modal.js
   decides what clicking it does based on VOICE_MODE (open the real/mock
   modal, or a small "coming soon" dialog when off); it never claims voice
   works while off. */
.voice-trigger { flex-direction: column; align-items: center; gap: 2px; padding: 10px 20px; line-height: 1.2; }
.voice-trigger svg { margin-bottom: 2px; }
.voice-trigger-caption { display: block; font-size: 11px; font-weight: 600; opacity: 0.8; }

.hero-facts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--on-dark-muted);
  list-style: none;
}
.hero-facts li { display: flex; align-items: center; gap: 8px; }
.hero-facts li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}

.hero-visual { position: relative; min-height: 0; }
.hero-chat-mount {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  min-height: 360px;
}
.hero-chat-mount [data-fs-chat='inline'] { min-height: 360px; display: block; }
.hero-chat-mount noscript { display: block; padding: 20px; color: var(--ink); text-align: center; }

.hero-chip {
  position: absolute;
  background: var(--white);
  color: var(--navy);
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  padding: 10px 16px 10px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
  font-size: 13px;
  font-weight: 700;
}
.hero-chip-icon {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
/* One consistent accent-dot badge, reused on every icon in the system
   (hero chips, chat header online dot) — green, white ring, same size. */
.hero-chip-icon-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--white);
}
.hero-chip span.sub { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }

/* ---------- Services (light) ---------- */
.service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 56px;
}
.service-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.service-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.service-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--blue-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.status-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}
.status-tag.is-live { background: var(--green-tint); color: var(--green-dark); }
.status-tag.is-soon { background: var(--border-soft); color: var(--muted-2); }
.service-card h3 { font-size: 20px; }
.service-problem { font-size: 14px; font-weight: 700; color: var(--muted-2); }
.service-desc { font-size: 14px; color: var(--muted); }
.service-solves {
  background: var(--ground);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.service-solves-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 4px;
}
.service-solves p { font-size: 14px; color: var(--ink); }
.service-checks { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.service-checks li { padding-left: 24px; position: relative; }
.service-checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--green-tint);
  box-shadow: inset 0 0 0 1px var(--green);
}
.service-best { font-size: 13px; color: var(--muted-2); }
.service-price { font-size: 14px; font-weight: 700; color: var(--blue); }
.service-ctas { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }

.pricing-intro {
  border-top: 1px solid var(--border-soft);
  padding-top: 40px;
}
.pricing-intro-heading { font-size: 24px; margin-bottom: 20px; }
.pricing-points { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 28px; }
.pricing-points-col { display: flex; flex-direction: column; gap: 20px; }
.pricing-point-title { font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.pricing-point p:not(.pricing-point-title) { font-size: 14px; color: var(--muted); }
.pricing-intro-cta { text-align: center; }

/* ---------- Statement band (dark navy) ---------- */
.statement {
  background: var(--navy);
  color: var(--white);
  padding: var(--section-pad) 0;
}
.statement-inner h2 {
  color: var(--white);
  font-size: 28px;
  line-height: 1.25;
  max-width: 760px;
  font-weight: 600;
}

/* ---------- How it works (light) ---------- */
.how-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
.how-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 28px 24px 24px;
}
.how-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--blue-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.how-number {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  color: var(--border-soft);
  line-height: 1;
}
.how-card h3 { font-size: 18px; margin-bottom: 8px; }
.how-card p { font-size: 14px; color: var(--muted); }

/* ---------- Why FriDesk (light) ---------- */
.why-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.why-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 24px;
}
.why-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--green-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.why-card h3 { font-size: 17px; margin-bottom: 6px; }
.why-card p { font-size: 14px; color: var(--muted); }

/* ---------- Client stories (dark navy-green) ---------- */
.stories {
  background: linear-gradient(135deg, var(--navy) 0%, #15351F 100%);
  color: var(--white);
  padding: var(--section-pad) 0;
}
.stories-eyebrow { text-align: center; }
.stories-heading { color: var(--white); text-align: center; font-size: 28px; margin-bottom: 36px; }

.story-featured {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}
.story-featured-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(140, 171, 44, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.story-featured-text h3 { color: var(--white); font-size: 19px; margin-bottom: 8px; }
.story-featured-text p { color: var(--on-dark-muted); font-size: 14px; }

.story-placeholders {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 1px, transparent 1.5px);
  background-size: 14px 14px;
  padding: 16px 0;
}
.story-placeholder {
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md);
  padding: 22px;
  text-align: center;
  color: var(--on-dark-muted);
  font-size: 13px;
  font-weight: 600;
}
.story-placeholder-offset { margin-left: 0; }

.stories-strip {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin-top: 28px;
}

/* ---------- FAQ (light) ---------- */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-q { margin: 0; }
.faq-trigger {
  width: 100%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}
.faq-number {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--border-soft);
  flex: none;
}
.faq-question-text { flex: 1; }
.faq-chevron {
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted-2);
  border-bottom: 2px solid var(--muted-2);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.faq-trigger[aria-expanded='true'] .faq-chevron { transform: rotate(-135deg); }
.faq-a { padding: 0 18px 18px 46px; font-size: 14px; color: var(--muted); }

/* ---------- Book a free demo (light, two columns) ---------- */
.contact-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-side { display: flex; flex-direction: column; gap: 14px; }
.contact-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-soft);
}
.contact-card-label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 4px; }
.contact-card-value { font-size: 15px; font-weight: 700; color: var(--navy); }
.contact-card-todo { color: var(--muted); font-weight: 600; }
.contact-card-try { display: flex; flex-direction: column; gap: 10px; }

.contact-form-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 20px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field-full { grid-column: 1 / -1; }
.form-field label { font-size: 13px; font-weight: 700; color: var(--navy); }
.form-field input,
.form-field select,
.form-field textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  width: 100%;
}
.form-field textarea { resize: vertical; min-height: 96px; }
.form-field-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.consent-label { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; font-weight: 600; color: var(--muted-2); }
.consent-label input { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.form-status { margin-top: 12px; font-size: 13px; font-weight: 700; min-height: 18px; }
.form-status.is-error { color: #B23A3A; }
.form-status.is-success { color: var(--green-dark); }

/* ---------- Footer (dark navy) ---------- */
.site-footer { background: var(--navy); color: var(--on-dark-muted); padding: 48px 0 20px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin-bottom: 28px; }
.footer-col p { margin-bottom: 8px; font-size: 14px; }
.footer-col a { color: var(--on-dark-muted); }
.footer-col a:hover { color: var(--white); }
.logo-on-dark { filter: brightness(0) invert(1); height: 34px; margin-bottom: 10px; }
.footer-brand-name { font-family: var(--font-display); font-weight: 700; color: var(--white); font-size: 16px; margin-bottom: 8px; }
.footer-col-title { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); margin-bottom: 10px; }
.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}
.footer-legal-links a { color: var(--on-dark-muted); text-decoration: underline; }

/* These must come AFTER every component rule above that also sets
   `display` on a .hero-chip/etc element (e.g. .hero-chip sets
   display:flex) — same specificity, so source order decides, and this
   needs to win. Placing it here (not with the other base utilities near
   the top) is deliberate, matching the pre-redesign stylesheet's same
   placement for the same reason. */
.only-desktop { display: none; }
.only-mobile { display: block; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .faq-chevron { transition: none; }
  .hero-image-glow { animation: none; opacity: 0.7; }
}

/* =========================================================
   Desktop layout — 1024px and up
   ========================================================= */
@media (min-width: 1024px) {
  .container { padding: 0 40px; }
  .container-narrow { padding: 0 40px; }
  .container-faq { padding: 0 40px; }
  .only-desktop { display: block; }
  .only-mobile { display: none; }

  :root { --section-pad: 112px; }

  .header-inner { padding: 14px 40px; }
  .main-nav { display: flex; align-items: center; gap: 28px; }
  .nav-cta { display: inline-flex; }

  /* Hero: left content ~55%, right side open for chips + chat */
  .hero { padding: 96px 0 104px; }

  /* Desktop: right-anchored panel, left edge blended into the solid navy
     .hero background via a mask fade instead of a visible seam. */
  .hero-image {
    top: 0; right: 0; bottom: 0; left: auto;
    height: auto;
    width: 73%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 35%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 35%, #000 100%);
  }
  .hero-image img { object-position: 60% 38%; }
  .hero-image-glow { top: 16%; left: 48%; width: 40%; height: 40%; }
  .hero-scrim {
    background: linear-gradient(to right,
      rgba(11, 42, 87, 0.88) 0%,
      rgba(11, 42, 87, 0.55) 50%,
      rgba(11, 42, 87, 0.10) 100%);
  }

  .hero-inner {
    flex-direction: row;
    align-items: center;
    gap: 48px;
  }
  .hero-copy { flex: 0 0 55%; max-width: 620px; gap: 26px; }
  .hero-copy h1 { font-size: 52px; }
  .hero-copy .lead { font-size: 18px; }

  /* Chips sit OUTSIDE the chat card's own box (clipped at a corner at
     most, never over its header/input/text) — the card is pushed down
     and the section given enough height for both chips' clearance. */
  .hero-visual { flex: 1 1 45%; position: relative; min-height: 660px; }
  .hero-chat-mount { max-width: 400px; margin: 0 auto; position: relative; top: 76px; }
  .hero-chip-a { top: 0; left: -4%; }
  .hero-chip-b { bottom: -56px; right: -4%; }

  .section { padding: var(--section-pad) 0; }
  .section-head h2 { font-size: 38px; }

  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .pricing-points { grid-template-columns: 1fr 1fr; }

  .statement-inner h2 { font-size: 46px; }

  .how-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .why-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }

  .story-featured { flex-direction: row; align-items: flex-start; padding: 36px; }
  .story-placeholders { flex-direction: row; gap: 24px; }
  .story-placeholder { flex: 1 1 0; }
  .story-placeholder-offset { margin-top: 32px; }

  .contact-grid { flex-direction: row; align-items: flex-start; gap: 32px; }
  .contact-side { flex: 0 0 300px; }
  .contact-form-card { flex: 1 1 0; padding: 32px; }
  .form-grid { grid-template-columns: 1fr 1fr; }

  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-legal { flex-direction: row; justify-content: space-between; }
}

@media (max-width: 479px) {
  .hero-copy h1 { font-size: 28px; }
  .service-card { padding: 22px; }
}