/* ===================================================================
   landing.css   Public marketing landing page for Insight.
   Standalone (does not use the app shell). Desktop + tablet first,
   graceful stacking on narrow screens.
   =================================================================== */

:root {
  --ink: #1b2733;
  --ink-soft: #5b6976;
  --accent: #2096B0;
  --accent-bright: #2ba0d6;
  --accent-soft: #51B1C7;
  --navy: #0a2230;
  --navy-2: #0d2a3a;
  --line: #e6ecf1;
  --max: 1200px;
  --display: 'Chakra Petch', 'Segoe UI', sans-serif;
  --orbitron: 'Orbitron', 'Chakra Petch', sans-serif;
  --body: 'Roboto', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Share Tech Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 4px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform .12s ease, background .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); }
.btn-ghost { background: transparent; color: var(--ink); border-color: #b9c4cd; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ===== Fancy "button1" sign-in: faithful port of the app's NEW TEMPLATE =====
   (corner brackets fly outward and the whole thing turns red on hover) */
.lp-btn1 {
  border: 2px solid #51B1C7;
  font-family: var(--orbitron);
  font-weight: 700;
  font-size: 15px;
  padding: 0;
  color: #6FAFBE;
  cursor: pointer;
  border-radius: 1px;
  background: linear-gradient(to bottom, #ffffff 0%, #f3fbfd 100%);
  transition: all 150ms ease-out;
}
.lp-btn1-inner {
  display: block;
  position: relative;
  border: 1px solid #d6eef4;
  margin: 2px;
  padding: 6px 16px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: border 250ms ease-out;
}
.lp-btn1:hover { border: 2px solid #6F9FAA; color: #d65b5b; }
.lp-btn1:hover .lp-btn1-inner { border: 1px solid #f0d0d0; }
.lp-btn1-corner { display: block; width: 3px; height: 3px; position: absolute; }
.lp-btn1-corner.c1 { left: 0; top: 0; border-right: 1px solid #51B1C7; border-bottom: 1px solid #51B1C7; transition: all 150ms ease-out; }
.lp-btn1-corner.c2 { right: 0; top: 0; border-left: 1px solid #51B1C7; border-bottom: 1px solid #51B1C7; transition: all 150ms ease-out 240ms; }
.lp-btn1-corner.c3 { right: 0; bottom: 0; border-top: 1px solid #51B1C7; border-left: 1px solid #51B1C7; transition: all 150ms ease-out 80ms; }
.lp-btn1-corner.c4 { left: 0; bottom: 0; border-top: 1px solid #51B1C7; border-right: 1px solid #51B1C7; transition: all 150ms ease-out 160ms; }
.lp-btn1:hover .lp-btn1-corner.c1 { border: 1px solid #c75151; left: -10px; top: -10px; }
.lp-btn1:hover .lp-btn1-corner.c2 { border: 1px solid #c75151; right: -10px; top: -10px; }
.lp-btn1:hover .lp-btn1-corner.c3 { border: 1px solid #c75151; right: -10px; bottom: -10px; }
.lp-btn1:hover .lp-btn1-corner.c4 { border: 1px solid #c75151; left: -10px; bottom: -10px; }

/* ===================== NAV ===================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 80; /* stays above the slide-in drawer so the toggle is clickable */
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(150%) blur(6px);
  border-bottom: 1px solid rgba(20,45,70,0.10);
  box-shadow: 0 1px 4px rgba(16,42,67,0.07);
}

/* Dimmed backdrop behind the mobile/tablet menu. Sits ABOVE the nav bar
   (z 80) so the whole screen, nav included, is tinted; the drawer sits above. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8,22,32,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
  z-index: 90;
}
.nav-backdrop.open { opacity: 1; pointer-events: auto; }

/* Top-level slide-in drawer for tablet/mobile (above the backdrop). */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  width: min(272px, 82vw);
  background: #0e2637;
  flex-direction: column;
  padding: 10px 0 14px;
  border-bottom-left-radius: 14px;
  transform: translateX(105%);
  transition: transform .28s ease;
}
.mobile-menu.open { transform: translateX(0); box-shadow: -16px 0 40px rgba(8,22,32,0.4); }
.mobile-menu-close {
  align-self: flex-end;
  background: none;
  border: none;
  color: #cdd9e2;
  font-size: 30px;
  line-height: 1;
  padding: 2px 18px 6px;
  cursor: pointer;
}
.mobile-menu-close:hover { color: #fff; }
.mobile-menu > a {
  color: #eaf1f6;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 500;
  font-size: 16px;
  padding: 15px 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.mobile-menu > a:hover { background: rgba(255,255,255,0.07); color: #fff; }
.mobile-menu .mobile-menu-signin {
  color: #6fd0e6;
  font-family: var(--orbitron);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-top: none;
}
.mobile-menu .mobile-menu-signin:hover { color: #a8f0ff; background: rgba(111,208,230,0.08); }
@media (max-width: 1024px) {
  .mobile-menu { display: flex; }
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.nav-logo { justify-self: start; }
.nav-logo img { height: 34px; width: auto; }
.nav-links {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav-links > a {
  font-family: var(--display);
  font-weight: 500;
  font-size: 15px;
  color: #2a3742;
}
.nav-links > a:hover { color: var(--accent); }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 10px; }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: #2a3742;
  border-radius: 2px;
  transform-origin: center;
  transition: transform .25s ease, opacity .2s ease;
}
/* Morph the three bars into an X when the menu is open. */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===================== HERO ===================== */
.hero {
  position: relative;
  /* Light wash reconstructed from bghero.webp: bright bloom lower-centre,
     cooler blue toward the edges. Resolution-independent, scales to any size. */
  background: radial-gradient(120% 120% at 60% 68%, #fafefe 0%, #edf5f9 38%, #d6e6ef 72%, #bccfda 100%), #eef4f8;
}
.hero-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 791;
  overflow: hidden;
}
/* Positioned as a percentage of the banner so it tracks the woman at any
   screen width (she is a fixed share of the banner since its aspect ratio is
   locked to the source image). */
.hero-circles-pos {
  position: absolute;
  top: 45%;
  left: 68%; /* ~40px left of 70.5% at a ~1440px laptop width */
  width: 56%;
  aspect-ratio: 1166 / 791;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}
.hero-circles-img {
  width: 100%;
  height: 100%;
  opacity: 0.16;
  mix-blend-mode: overlay;
  animation: heroSpin 90s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes heroSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero-circles-img { animation: none; } }
.hero-woman {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 2;
}
.hero-copy-wrap {
  position: absolute;
  inset: 0;
  z-index: 3;
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0 24px;
  pointer-events: none;
}
.hero-copy { max-width: 470px; pointer-events: auto; }
.hero-title {
  font-family: var(--orbitron);
  font-weight: 800;
  font-size: 52px;
  line-height: 1.05;
  margin: 0 0 22px;
  color: #2a3742;
  letter-spacing: 0.005em;
}
.hero-title-light { color: #9aa7b2; font-weight: 500; }
.hero-sub { font-size: 17px; color: #3c4a56; max-width: 420px; margin: 0 0 30px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ===================== CHALLENGE ===================== */
.challenge {
  background: url('/static/landingassets/bgchallenge.jpg') left center/cover no-repeat, var(--navy);
  position: relative;
}
.challenge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,34,48,0) 30%, rgba(11,33,46,0.55) 55%, rgba(11,33,46,0.85) 100%);
  pointer-events: none;
}
.challenge-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 64px 24px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 30px;
  position: relative;
  z-index: 1;
}
.challenge-items { display: flex; flex-direction: column; gap: 30px; }
.challenge-item { display: flex; gap: 18px; }
.challenge-icon { width: 46px; height: 46px; flex: 0 0 46px; margin-top: 4px; }
.challenge-item h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 23px;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}
.challenge-item p { margin: 0; color: #c4d2dc; font-size: 14.5px; line-height: 1.6; }

/* ===================== BENEFITS ===================== */
.benefits { background: #fff; }
.benefits-inner { max-width: var(--max); margin: 0 auto; padding: 72px 24px 84px; text-align: center; }
.benefits-title { font-family: var(--display); font-weight: 700; font-size: 34px; color: #16222c; margin: 0 0 14px; }
.benefits-sub { max-width: 560px; margin: 0 auto 54px; color: #54626e; font-size: 16px; }
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.benefit { padding: 0 10px; }
/* Fixed icon row height; each image keeps its natural width/aspect. */
.benefit-icon {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.benefit-icon img { height: 90px; width: auto; max-width: none; }
.benefit h3 { font-family: var(--body); font-weight: 700; font-size: 18px; color: #1b2733; margin: 0 0 12px; }
.benefit p { color: #5b6976; font-size: 14.5px; margin: 0; }

/* ===================== CONTACT / DEMO ===================== */
.contact { background: radial-gradient(130% 100% at 50% 0%, #0e1f2c 0%, #0a1925 100%), var(--navy); }
.contact-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 70px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.kicker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--accent-soft);
  border: 1px solid rgba(81,177,199,0.4);
  padding: 4px 10px;
  border-radius: 3px;
  margin-bottom: 20px;
}
.contact-copy h2 { font-family: var(--display); font-weight: 700; font-size: 33px; color: #fff; margin: 0 0 18px; line-height: 1.15; }
.contact-lead { color: #b4c2cd; font-size: 15px; margin: 0 0 26px; }
.contact-points { list-style: none; padding: 0; margin: 0 0 24px; }
.contact-points li { position: relative; padding-left: 26px; margin-bottom: 12px; color: #c4d2dc; font-size: 14.5px; }
.contact-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 12px; height: 12px;
  border: 1.5px solid var(--accent-soft);
  border-radius: 3px;
}
.contact-points strong { color: #fff; }
.contact-reassure { color: #8ea0ad; font-size: 13px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 16px; margin: 0; }

/* Form */
.demo-form {
  border: 1px solid rgba(120,150,170,0.28);
  border-radius: 8px;
  padding: 28px;
  background: rgba(255,255,255,0.02);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { margin-bottom: 16px; display: flex; flex-direction: column; }
.form-field label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #93a4b1;
  margin-bottom: 6px;
}
.form-field label span { color: var(--accent-soft); }
.form-field input,
.form-field select,
.form-field textarea {
  background: rgba(8,24,34,0.6);
  border: 1px solid rgba(120,150,170,0.35);
  border-radius: 5px;
  padding: 11px 12px;
  color: #e8eef2;
  font-family: var(--body);
  font-size: 14px;
  width: 100%;
}
/* Custom dropdown: dark control, custom chevron, dark option list */
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2351B1C7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-color: rgba(8,24,34,0.6);
}
.form-field select option { background-color: #0d2330; color: #e8eef2; }
.form-field textarea { resize: vertical; min-height: 84px; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: #6b7d8a; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 2px rgba(81,177,199,0.18);
}
.form-submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.form-note { color: #8ea0ad; font-size: 13px; }
.form-note.is-error { color: #ff9a8a; }
.form-note.is-success { color: #6fd3a8; }

/* ===================== FOOTER ===================== */
.footer { background: linear-gradient(115deg, #2a5a75 0%, #21496a 45%, #1e4665 100%), #1f5586; color: #d7e3ec; }
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 46px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 24px;
}
.footer-col { display: flex; flex-direction: column; }
.footer-left { align-items: flex-start; gap: 14px; }
.footer-asimo img { height: 46px; width: auto; }
.footer-legal { font-size: 13px; color: #9fb6c6; }
.footer-legal a { color: #cfe0ec; text-decoration: underline; text-underline-offset: 2px; }
.footer-legal a:hover { color: #fff; }
.footer-center { align-items: center; }
.footer-logo { height: 44px; width: auto; filter: brightness(0) invert(1); }
.footer-right { align-items: flex-end; gap: 16px; }
.footer-address { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: #eaf1f6; text-align: right; }
.footer-address svg { flex: 0 0 18px; margin-top: 2px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  color: #fff;
  transition: .15s;
}
.footer-social a:hover { background: #fff; color: #1f5586; }

/* ===================== LOGIN MODAL ===================== */
.lp-login {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lp-login.open { display: flex; }
.lp-login-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8,22,32,0.62);
  backdrop-filter: blur(2px);
}
.lp-login.open .lp-login-backdrop { animation: lpFadeIn .28s ease-out; }
.lp-login.closing .lp-login-backdrop { animation: lpFadeOut .26s ease-in forwards; }
.lp-login-card {
  position: relative;
  z-index: 1;
  overflow: hidden; /* clips the scan-line sweep */
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 10px;
  padding: 34px 32px 26px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.32);
  text-align: center;
  will-change: transform, opacity, filter, clip-path;
}
.lp-login.open .lp-login-card { animation: lpHoloIn .5s cubic-bezier(0.16, 0.84, 0.34, 1) both; }
.lp-login.closing .lp-login-card { animation: lpHoloOut .28s ease-in forwards; }

/* Cyan edge-glow that blooms then settles, like a hologram powering on. */
.lp-login-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(81,177,199,0.55), 0 0 26px rgba(81,177,199,0.45);
  opacity: 0;
}
.lp-login.open .lp-login-card::before { animation: lpHoloGlow 0.85s ease-out; }

/* A single soft scan line sweeps down as the panel resolves. */
.lp-login-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(81,177,199,0.85) 40%, rgba(168,240,255,0.95) 50%, rgba(81,177,199,0.85) 60%, transparent);
  box-shadow: 0 0 9px rgba(81,177,199,0.7);
  opacity: 0;
  pointer-events: none;
}
.lp-login.open .lp-login-card::after { animation: lpScan 0.7s ease-out 0.05s; }

/* Hologram materialize: a soft blurred panel scales up and sharpens, with a
   gentle vertical build via clip-path. Smooth easing, no chroma jitter. */
@keyframes lpHoloIn {
  0%   { opacity: 0; transform: translateY(14px) scale(0.965); filter: blur(9px); clip-path: inset(42% 0 42% 0 round 10px); }
  60%  { opacity: 1; filter: blur(0); clip-path: inset(0 0 0 0 round 10px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); clip-path: inset(0 0 0 0 round 10px); }
}
@keyframes lpHoloOut {
  0%   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(8px) scale(0.985); filter: blur(6px); }
}
@keyframes lpHoloGlow {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes lpScan {
  0%   { opacity: 0; transform: translateY(-2px); }
  15%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(420px); }
}
@keyframes lpFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lpFadeOut { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .lp-login.open .lp-login-card,
  .lp-login.closing .lp-login-card { animation: none; }
  .lp-login.open .lp-login-card::after,
  .lp-login.open .lp-login-card::before { animation: none; }
}
.lp-login-close {
  position: absolute;
  top: 12px; right: 14px;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: #9aa7b2;
  cursor: pointer;
}
.lp-login-close:hover { color: #2a3742; }
.lp-login-logo { height: 40px; width: auto; margin: 0 auto 14px; }
.lp-login-card h2 { font-family: var(--display); font-weight: 700; font-size: 22px; color: #1b2733; margin: 0 0 18px; }
.lp-login-error {
  background: #fdecec;
  color: #c0392b;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 13px;
  margin-bottom: 14px;
}
.lp-login-card form { display: flex; flex-direction: column; gap: 12px; }
.lp-login-card input {
  border: 1px solid #d2dbe2;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: var(--body);
  width: 100%;
}
.lp-login-card input:focus { outline: none; border-color: var(--accent-soft); box-shadow: 0 0 0 2px rgba(81,177,199,0.18); }
.lp-login-submit { width: 100%; margin-top: 4px; }
.lp-login-trouble { display: inline-block; margin-top: 16px; font-size: 13px; color: var(--accent); }
.lp-login-trouble:hover { text-decoration: underline; }

/* ===================== BACK TO TOP ===================== */
.back-to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 90;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(13,42,58,0.28);
  /* Hidden until scrolled: sits lower and faded. */
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease, background .15s ease;
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover { background: var(--accent-bright); }
.back-to-top svg { transition: transform .25s ease; }
.back-to-top:hover svg { transform: translateY(-3px); }

/* ===================== SCROLL REVEAL ===================== */
/* Elements start offset + faded, then ease up into place when scrolled into
   view (the "pop up" effect). Only active when JS is present, so content is
   never hidden if scripting fails. */
.has-js .reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.99);
  transition: opacity .65s cubic-bezier(0.16, 0.84, 0.34, 1),
              transform .65s cubic-bezier(0.16, 0.84, 0.34, 1);
  will-change: opacity, transform;
}
.has-js .reveal.in { opacity: 1; transform: none; }
/* Staggered children so grids cascade rather than popping all at once. */
.has-js .benefit:nth-child(2),
.has-js .challenge-item:nth-child(2) { transition-delay: .12s; }
.has-js .benefit:nth-child(3),
.has-js .challenge-item:nth-child(3) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .has-js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
  .hero-title { font-size: 44px; }
  .challenge-inner { grid-template-columns: 1fr; }
  .challenge-spacer { display: none; }
  /* Stacked layout: shift to the person-free right side of the photo so no
     half-face peeks into the text column, and darken the overlay so the photo
     reads as a subtle industrial texture. */
  .challenge { background-position: right top; }
  .challenge::after { background: linear-gradient(180deg, rgba(9,28,40,0.80) 0%, rgba(10,30,42,0.94) 55%); }
}

@media (max-width: 1024px) {
  .nav-toggle { display: flex; }
  .nav-inner { grid-template-columns: auto 1fr; }
  /* Desktop links + the bar's sign-in button are replaced by the drawer. */
  .nav-links { display: none; }
  .nav-right .lp-btn1 { display: none; }

  /* Hero stacks: full-width banner strip, copy below on light bg */
  .hero-banner { aspect-ratio: auto; height: 300px; }
  .hero-woman { object-position: 72% center; }
  .hero-circles-pos { left: 72%; width: 80%; }
  .hero-copy-wrap { position: static; padding: 40px 24px 48px; }
  .hero-copy { max-width: none; }
  .hero-title { font-size: 40px; }
  .hero-sub { max-width: none; }

  /* Benefits stay 3-up on tablet (they only collapse to one column on phones,
     via the 640px rule) so tablet portrait doesn't get a lone narrow column. */
  .benefits-grid { gap: 28px; }
  .benefits-inner { padding-left: 24px; padding-right: 24px; }
  .benefit { padding: 0 4px; }
  .contact-inner { grid-template-columns: 1fr; gap: 36px; }

  .footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 28px; }
  .footer-left, .footer-right { align-items: center; }
  .footer-address { text-align: center; }
}

/* Phones: benefits finally collapse to a single centered column. */
@media (max-width: 640px) {
  .benefits-grid { grid-template-columns: 1fr; gap: 40px; max-width: 420px; margin: 0 auto; }
  .benefit { padding: 0 10px; }
}

@media (max-width: 520px) {
  .hero-banner { height: 240px; }
  .hero-title { font-size: 32px; }
  .form-row { grid-template-columns: 1fr; }
  .benefits-title { font-size: 28px; }
  .contact-copy h2 { font-size: 27px; }
}