/* ═══════════════════════════════════════════════════
   Ridera Labs – Main Stylesheet
   ═══════════════════════════════════════════════════ */

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

:root {
  --white:       #FFFFFF;
  --off:         #F7F8FC;
  --off2:        #EEF0F8;
  --off3:        #DDE1F0;
  --ink:         #14193A;
  --ink-2:       #414868;
  --ink-3:       #8B90A8;
  --blue:        #3B5BDB;
  --blue-light:  #EEF2FF;
  --blue-mid:    #C5D0FA;
  --green:       #2F9E6F;
  --green-light: #EDFAF3;
  --amber:       #D08A0C;
  --amber-light: #FFF8E1;
  --coral:       #E8654A;
  --coral-light: #FFF0EC;
  --serif:       'Fraunces', Georgia, serif;
  --sans:        'Outfit', system-ui, sans-serif;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --shadow-sm:   0 2px 8px rgba(59,91,219,0.07);
  --shadow:      0 6px 28px rgba(59,91,219,0.11);
}

body {
  font-family: var(--sans);
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── NAV ─────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--off3);
  padding: 0 56px;
  display: flex; align-items: center; justify-content: space-between;
  height: 66px;
}

.nav-logo {
  font-family: var(--serif); font-size: 22px; font-weight: 400;
  color: var(--ink); letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 8px;
  text-decoration: none;
}

.logo-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue); display: inline-block;
}

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

.nav-links a {
  font-size: 14px; font-weight: 400; color: var(--ink-2);
  text-decoration: none; transition: color .2s;
}

.nav-links a:hover,
.nav-links a.nav-active { color: var(--blue); }

.nav-cta {
  background: var(--blue) !important; color: #fff !important;
  padding: 10px 22px; border-radius: 100px; font-weight: 500 !important;
  box-shadow: 0 3px 14px rgba(59,91,219,.22);
  transition: opacity .2s, transform .15s !important;
}

.nav-cta:hover { opacity: .88 !important; transform: translateY(-1px) !important; }

/* ── BUTTONS ─────────────────────────────────────── */
.btn-primary {
  background: var(--blue); color: #fff;
  padding: 13px 28px; border-radius: 100px;
  font-size: 15px; font-weight: 500; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 18px rgba(59,91,219,.26);
  transition: opacity .2s, transform .15s;
  font-family: var(--sans);
}

.btn-primary:hover { opacity: .88; transform: translateY(-1px); }

.btn-ghost {
  background: var(--off); color: var(--ink-2);
  padding: 13px 28px; border-radius: 100px;
  font-size: 15px; font-weight: 400; text-decoration: none;
  border: 1px solid var(--off3);
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .2s, transform .15s;
  font-family: var(--sans);
}

.btn-ghost:hover { background: var(--off2); transform: translateY(-1px); }

/* ── HERO ─────────────────────────────────────────── */
.hero {
  padding: 96px 56px 80px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: center; max-width: 1240px; margin: 0 auto;
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue-light); color: var(--blue);
  font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 100px; margin-bottom: 24px;
}

.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }

.hero h1 {
  font-family: var(--serif); font-size: clamp(38px, 4.5vw, 60px);
  font-weight: 300; line-height: 1.1; letter-spacing: -.02em;
  color: var(--ink); margin-bottom: 22px;
}

.hero h1 em { font-style: italic; color: var(--blue); }

.hero-sub {
  font-size: 16px; color: var(--ink-2); line-height: 1.72;
  margin-bottom: 38px; max-width: 420px; font-weight: 300;
}

.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── HERO VISUAL ─────────────────────────────────── */
.hero-visual { position: relative; height: 420px; }

.hcard {
  position: absolute; background: var(--white);
  border-radius: var(--radius-xl); border: 1px solid var(--off3);
  padding: 20px 24px; box-shadow: var(--shadow);
}

.hc-main {
  width: 300px; top: 0; right: 0;
  background: linear-gradient(140deg, #3B5BDB 0%, #4C6EF5 100%);
  border-color: transparent;
}
.hc-stat  { width: 174px; bottom: 36px; left: 10px; }
.hc-pill  { width: 224px; top: 158px;   left: 0;    }
.hc-mini  { width: 160px; bottom: 108px; right: 8px; }

.hcard-label {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: 14px; font-weight: 600;
}

.srows { display: flex; flex-direction: column; gap: 9px; }

.srow {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 300; color: rgba(255,255,255,.88);
}

.srow-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.sd-w { background: rgba(255,255,255,.55); }
.sd-g { background: #6EE7B7; }
.sd-y { background: #FCD34D; }

.stat-big {
  font-family: var(--serif); font-size: 38px; font-weight: 300;
  color: var(--ink); line-height: 1; margin-bottom: 4px;
}
.stat-sub { font-size: 12px; color: var(--ink-3); font-weight: 300; }

.pill-row { display: flex; align-items: center; gap: 12px; }

.pill-icon {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--blue-light);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.pill-text .pt { font-size: 13px; font-weight: 500; color: var(--ink); }
.pill-text .ps { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

.mini-tag {
  font-size: 11px; font-weight: 600; color: var(--green);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px;
}
.mini-val { font-size: 13px; color: var(--ink-2); font-weight: 300; }

/* ── STRIP ───────────────────────────────────────── */
.strip {
  background: var(--off);
  border-top: 1px solid var(--off2); border-bottom: 1px solid var(--off2);
  padding: 20px 56px;
}

.strip-inner {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; gap: 40px;
}

.strip-label {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap; flex-shrink: 0; font-weight: 600;
}

.strip-items { display: flex; gap: 36px; }
.strip-item  { font-size: 13px; font-weight: 500; color: var(--ink-2); opacity: .5; }

/* ── SECTION HELPERS ─────────────────────────────── */
.section { padding: 92px 56px; max-width: 1240px; margin: 0 auto; }

.sec-hd {
  display: flex; align-items: flex-end;
  justify-content: space-between; margin-bottom: 52px;
}

.eyebrow {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); font-weight: 600; margin-bottom: 10px;
}

.sec-title {
  font-family: var(--serif); font-size: clamp(26px, 3vw, 42px);
  font-weight: 300; letter-spacing: -.02em; line-height: 1.15; color: var(--ink);
}
.sec-title em { font-style: italic; color: var(--blue); }

.sec-link {
  font-size: 14px; color: var(--ink-3); text-decoration: none;
  border-bottom: 1px solid var(--off3); padding-bottom: 2px; white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.sec-link:hover { color: var(--blue); border-color: var(--blue); }

/* ── SERVICES ────────────────────────────────────── */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.svc-card {
  background: var(--off); border: 1px solid var(--off2);
  border-radius: var(--radius-lg); padding: 28px 28px 30px;
  transition: box-shadow .2s, transform .2s, border-color .2s; cursor: default;
}
.svc-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--blue-mid); }
.svc-card.wide  { grid-column: span 2; background: var(--blue-light); border-color: var(--blue-mid); }
.svc-card.wide:hover { border-color: var(--blue); }

.svc-ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.ico-blue  { background: var(--blue-light); }
.ico-blue2 { background: var(--blue-mid); }
.ico-green { background: var(--green-light); }
.ico-amber { background: var(--amber-light); }
.ico-coral { background: var(--coral-light); }

.svc-tag { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.tag-b { color: var(--blue); }
.tag-g { color: var(--green); }
.tag-a { color: var(--amber); }

.svc-name { font-family: var(--serif); font-size: 20px; font-weight: 300; letter-spacing: -.01em; color: var(--ink); margin-bottom: 9px; }
.svc-desc { font-size: 13px; color: var(--ink-3); line-height: 1.65; font-weight: 300; }

/* ── WHY US ──────────────────────────────────────── */
.why-section {
  background: var(--off);
  border-top: 1px solid var(--off2); border-bottom: 1px solid var(--off2);
  padding: 92px 56px;
}

.why-inner { max-width: 1240px; margin: 0 auto; }

.why-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; margin-top: 52px; align-items: start;
}

.why-cards { display: flex; flex-direction: column; gap: 12px; }

.why-card {
  background: var(--white); border: 1px solid var(--off3);
  border-radius: var(--radius-lg); padding: 24px 28px;
  display: flex; gap: 18px; align-items: flex-start;
  transition: box-shadow .2s, border-color .2s; cursor: default;
}
.why-card:hover { box-shadow: var(--shadow-sm); border-color: var(--blue-mid); }

.why-num {
  font-family: var(--serif); font-size: 13px; font-style: italic;
  color: var(--blue); opacity: .55; flex-shrink: 0; margin-top: 2px; width: 20px;
}

.why-title { font-size: 15px; font-weight: 500; color: var(--ink); margin-bottom: 5px; }
.why-desc  { font-size: 13px; color: var(--ink-3); line-height: 1.65; font-weight: 300; }

.why-callout {
  background: var(--white); border: 1px solid var(--off3);
  border-radius: var(--radius-xl); padding: 36px;
  box-shadow: var(--shadow-sm); position: sticky; top: 80px;
}

.callout-title {
  font-family: var(--serif); font-size: 30px; font-weight: 300;
  letter-spacing: -.02em; color: var(--ink); line-height: 1.25; margin-bottom: 22px;
}
.callout-title em { font-style: italic; color: var(--blue); }

.pills-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }

.cpill { font-size: 13px; padding: 6px 14px; border-radius: 100px; font-weight: 400; }
.cp-blue    { background: var(--blue-light); color: var(--blue); }
.cp-green   { background: var(--green-light); color: var(--green); }
.cp-outline { background: var(--off); border: 1px solid var(--off3); color: var(--ink-3); }

.callout-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue); color: #fff;
  padding: 13px 24px; border-radius: 100px;
  font-size: 14px; font-weight: 500; text-decoration: none;
  font-family: var(--sans);
  box-shadow: 0 4px 16px rgba(59,91,219,.22);
  transition: opacity .2s, transform .15s;
}
.callout-cta:hover { opacity: .88; transform: translateY(-1px); }

/* ── PROCESS ─────────────────────────────────────── */
.process-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-top: 52px;
}

.pstep {
  background: var(--off); border: 1px solid var(--off2);
  border-radius: var(--radius-lg); padding: 30px 26px;
  transition: border-color .2s, box-shadow .2s; cursor: default;
}
.pstep:hover { border-color: var(--blue-mid); box-shadow: var(--shadow-sm); }
.pstep.accent { background: var(--blue); border-color: transparent; }

.pstep-num {
  font-family: var(--serif); font-size: 46px;
  font-weight: 300; font-style: italic;
  color: var(--off3); line-height: 1; margin-bottom: 14px;
}
.pstep.accent .pstep-num { color: rgba(255,255,255,.18); }

.pstep-title { font-size: 15px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.pstep.accent .pstep-title { color: #fff; }

.pstep-desc { font-size: 13px; color: var(--ink-3); line-height: 1.65; font-weight: 300; }
.pstep.accent .pstep-desc { color: rgba(255,255,255,.6); }

/* ── FOOTER ──────────────────────────────────────── */
footer {
  background: var(--off);
  border-top: 1px solid var(--off2);
  padding: 68px 56px 38px;
}

.footer-inner { max-width: 1240px; margin: 0 auto; }

.footer-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 48px;
}

.footer-logo {
  font-family: var(--serif); font-size: 20px; font-weight: 400;
  letter-spacing: -.02em; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; margin-bottom: 12px;
}

.footer-tagline {
  font-size: 14px; color: var(--ink-3);
  line-height: 1.68; max-width: 260px; font-weight: 300;
}

.fcol-title {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; margin-bottom: 14px;
}

.flinks { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.flinks a {
  font-size: 14px; color: var(--ink-2); text-decoration: none;
  font-weight: 300; transition: color .2s;
}
.flinks a:hover { color: var(--blue); }

.footer-bottom {
  border-top: 1px solid var(--off2); padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
}

.footer-copy,
.footer-loc { font-size: 13px; color: var(--ink-3); font-weight: 300; }

/* ── ANIMATIONS ──────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-left > * { animation: fadeUp .6s ease both; }
.hero-left > *:nth-child(1) { animation-delay: .05s; }
.hero-left > *:nth-child(2) { animation-delay: .14s; }
.hero-left > *:nth-child(3) { animation-delay: .24s; }
.hero-left > *:nth-child(4) { animation-delay: .33s; }

.hc-main { animation: fadeUp .5s .08s ease both; }
.hc-pill { animation: fadeUp .5s .18s ease both; }
.hc-stat { animation: fadeUp .5s .28s ease both; }
.hc-mini { animation: fadeUp .5s .37s ease both; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Mobile & Tablet
   No design changes. Layout adjustments only.
   ═══════════════════════════════════════════════════ */

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
  nav       { padding: 0 28px; }
  .hero     { padding: 88px 28px 64px; gap: 40px; }
  .section  { padding: 72px 28px; }
  .why-section { padding: 72px 28px; }
  .why-inner   { padding: 0; }
  .strip    { padding: 20px 28px; }
  footer    { padding: 56px 28px 32px; }

  .hero-visual { height: 360px; }
  .hc-main  { width: 260px; }
  .hc-pill  { width: 200px; }
  .hc-stat  { width: 154px; }
  .hc-mini  { width: 144px; }

  .svc-grid     { grid-template-columns: 1fr 1fr; }
  .svc-card.wide { grid-column: span 2; }
  .process-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .footer-top   { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
  /* Nav: hide desktop links, show burger */
  nav           { padding: 0 16px; height: 60px; position: fixed; top: 0; left: 0; right: 0; z-index: 900; }
  .nav-links    { display: none; }
  .nav-burger   { display: flex; }

  /* Hero: single column, no visual cards */
  .hero {
    grid-template-columns: 1fr;
    padding: 84px 20px 48px;
    gap: 0;
  }
  .hero-visual  { display: none; }
  .hero h1      { font-size: clamp(32px, 8vw, 48px); }
  .hero-sub     { max-width: 100%; font-size: 15px; }
  .hero-btns    { flex-direction: column; gap: 10px; }
  .btn-primary,
  .btn-ghost    { width: 100%; justify-content: center; padding: 14px 24px; }

  /* Sections */
  .section      { padding: 56px 20px; }
  .why-section  { padding: 56px 20px; }
  .why-inner    { padding: 0; }
  .strip        { padding: 16px 20px; }
  .strip-inner  { flex-direction: column; align-items: flex-start; gap: 12px; }
  .strip-items  { gap: 8px; flex-wrap: wrap; }

  /* Sec header */
  .sec-hd       { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 32px; }

  /* Services */
  .svc-grid     { grid-template-columns: 1fr; gap: 12px; }
  .svc-card.wide { grid-column: span 1; }

  /* Why us */
  .why-cols     { grid-template-columns: 1fr; gap: 32px; }
  .why-callout  { position: static; }

  /* Process */
  .process-grid { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }

  /* Footer */
  footer        { padding: 48px 20px 28px; margin-top: 0; }
  .footer-top   { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
  .footer-tagline { max-width: 100%; }
}

/* ── Small mobile (≤480px) ── */
@media (max-width: 480px) {
  .hero         { padding: 76px 16px 40px; }
  .section      { padding: 44px 16px; }
  .why-section  { padding: 44px 16px; }
  .strip        { padding: 14px 16px; }
  footer        { padding: 40px 16px 24px; }

  .hero h1      { font-size: clamp(28px, 9vw, 40px); }
  .hero-btns    { gap: 8px; }

  /* Stack all grids to 1 col */
  .svc-grid,
  .process-grid,
  .footer-top   { grid-template-columns: 1fr; }

  .why-card     { padding: 18px 20px; }
  .why-callout  { padding: 24px 20px; }
  .callout-title { font-size: 24px; }
  .pstep        { padding: 22px 18px; }
  .svc-card     { padding: 22px 20px; }
}

/* ═══════════════════════════════════════════════════
   GLOBAL MOBILE FOUNDATIONS
   ═══════════════════════════════════════════════════ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, video, svg { max-width: 100%; }
a { -webkit-tap-highlight-color: transparent; }
button, input, select, textarea {
  font-family: inherit;
  touch-action: manipulation;
}

/* Page-top offset for fixed nav on every page */
body > section:first-of-type,
.hero, .about-page, .sw-page, .svc-page,
.careers-page, .pricing-page, .contact-wrap,
.legal-wrap { padding-top: max(100px, calc(68px + 32px)); }

@media (max-width: 768px) {
  body > section:first-of-type,
  .hero, .about-page, .sw-page, .svc-page,
  .careers-page, .pricing-page, .contact-wrap,
  .legal-wrap { padding-top: max(80px, calc(60px + 20px)); }
}

/* Touch-friendly tap targets */
@media (max-width: 768px) {
  .btn-primary, .btn-ghost,
  .nav-drawer-cta, .callout-cta,
  .price-cta, .csubmit { min-height: 48px; }
  .nav-links a, .nav-drawer-links li a { min-height: 44px; }
}

/* Prevent horizontal scroll from any overflowing element */
@media (max-width: 768px) {
  .hero-visual, .hc-main, .hc-pill, .hc-stat, .hc-mini { display: none !important; }
  .strip-items { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: 4px; }
  .strip-items::-webkit-scrollbar { display: none; }
}

/* ═══════════════════════════════════════════════════
   SERVICES PAGE — mobile
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .svc-page     { padding: 80px 20px 60px; }
  .svc-hero     { margin-bottom: 48px; }
  .svc-hero h1  { font-size: clamp(28px, 7vw, 42px); }
  .svc-row      { grid-template-columns: 40px 1fr 32px; gap: 12px; padding: 16px 18px; }
  .svc-row-name { font-size: 16px; }
  .svc-row-right .svc-tag { display: none; }
  .svc-body-inner { grid-template-columns: 1fr; padding: 0 18px 20px; padding-top: 18px; }
  .svc-cta-banner { grid-template-columns: 1fr; padding: 28px 20px; gap: 20px; }
  .svc-cta-btns { align-items: stretch; }
  .svc-cta-btns a { text-align: center; justify-content: center; }
}
@media (max-width: 480px) {
  .svc-page { padding: 76px 16px 48px; }
  .svc-row  { padding: 14px 14px; }
}

/* ═══════════════════════════════════════════════════
   SOFTWARE PAGE — mobile
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .sw-page         { padding: 80px 20px 60px; }
  .sw-hero         { grid-template-columns: 1fr; gap: 32px; margin-bottom: 56px; }
  .sw-hero-left p  { max-width: 100%; }
  .sw-stats        { gap: 8px; }
  .sw-stat         { padding: 10px 14px; }
  .sw-hero-right   { padding: 24px 20px; border-radius: 16px; }
  .sw-caps         { gap: 6px; }
  .sw-cap          { font-size: 12px; padding: 5px 11px; }
  .project-grid    { grid-template-columns: 1fr; }
  .project-inner   { padding: 22px 18px; }
  .project-stats   { flex-wrap: wrap; }
  .project-stat    { min-width: calc(50% - 1px); border-right: none !important; }
  .project-stat:nth-child(odd)  { border-right: 1px solid var(--off2) !important; }
  .project-stat:last-child      { border-top: 1px solid var(--off2); min-width: 100%; }
  .sw-build        { margin: 0 -20px 64px; padding-left: 20px; padding-right: 20px; }
  .sw-build-grid   { grid-template-columns: 1fr; }
  .sw-process-steps { grid-template-columns: 1fr 1fr; gap: 24px; }
  .sw-process-steps::before { display: none; }
  .sw-cta          { grid-template-columns: 1fr; padding: 28px 20px; }
  .sw-cta-btns     { align-items: stretch; flex-direction: column; }
  .sw-cta-btns a   { text-align: center; justify-content: center; }
}
@media (max-width: 480px) {
  .sw-page       { padding: 76px 16px 48px; }
  .sw-build      { margin: 0 -16px 48px; padding-left: 16px; padding-right: 16px; }
  .sw-process-steps { grid-template-columns: 1fr; }
  .project-stat  { min-width: 100%; border-right: none !important; border-top: 1px solid var(--off2) !important; }
  .project-stat:first-child { border-top: none !important; }
}

/* ═══════════════════════════════════════════════════
   ABOUT PAGE — mobile
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .about-page      { padding: 80px 20px 60px; }
  .about-hero      { grid-template-columns: 1fr; gap: 32px; margin-bottom: 56px; padding-bottom: 56px; }
  .about-hero-left p { max-width: 100%; }
  .about-identity  { padding: 24px 20px; }
  .identity-wordmark { font-size: 30px; }
  .identity-pills  { gap: 6px; }
  .identity-pill   { font-size: 11px; padding: 4px 10px; }
  .about-story     { grid-template-columns: 1fr; gap: 28px; }
  .about-story-label { position: static; }
  .about-values    { margin: 0 -20px 64px; padding-left: 20px; padding-right: 20px; padding-top: 56px; padding-bottom: 56px; }
  .about-values-grid { grid-template-columns: 1fr 1fr; }
  .about-ops       { grid-template-columns: 1fr; gap: 36px; }
  .about-cta       { padding: 36px 20px; }
  .about-cta-btns  { flex-direction: column; }
  .about-cta-btns a { text-align: center; justify-content: center; }
}
@media (max-width: 480px) {
  .about-page      { padding: 76px 16px 48px; }
  .about-values    { margin: 0 -16px 48px; padding-left: 16px; padding-right: 16px; }
  .about-values-grid { grid-template-columns: 1fr; }
  .value-card      { padding: 20px 16px; }
  .about-cta       { padding: 28px 16px; }
  .identity-wordmark { font-size: 26px; }
}

/* ═══════════════════════════════════════════════════
   PRICING PAGE — mobile
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pricing-page    { padding: 80px 20px 60px; }
  .pricing-hero    { margin-bottom: 48px; }
  .pricing-tab-wrap { width: 100%; }
  .ptab            { flex: 1; padding: 10px 12px; font-size: 13px; }
  .ptable          { font-size: 13px; }
  .ptable thead th:nth-child(2),
  .ptable td:nth-child(2) { display: none; }
  .ptable td       { padding: 14px 14px; }
  .pages-badge     { width: 32px; height: 32px; font-size: 12px; }
  .pages-label     { font-size: 13px; }
  .price-val       { font-size: 17px; }
  .price-cta       { padding: 6px 12px; font-size: 12px; }
  .inclusions-grid { grid-template-columns: 1fr 1fr; }
  .pricing-cta     { grid-template-columns: 1fr; padding: 28px 20px; }
  .pricing-cta-btns { flex-direction: column; align-items: stretch; }
  .pricing-cta-btns a { text-align: center; justify-content: center; }
  .integrations-note { flex-direction: column; gap: 10px; }
}
@media (max-width: 480px) {
  .pricing-page    { padding: 76px 16px 48px; }
  .ptable          { font-size: 12px; }
  .ptable td       { padding: 12px 12px; }
  .inclusions-grid { grid-template-columns: 1fr; }
  .pages-sub       { display: none; }
  .ptable thead th:nth-child(3) { display: none; }
  .ptable td:nth-child(3)       { display: none; }
  .td-cta          { width: 100%; }
  .price-cta       { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════
   CONTACT PAGE — mobile
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .contact-wrap    { grid-template-columns: 1fr; gap: 36px; padding: 80px 20px 60px; }
  .contact-left    { position: static; }
  .contact-left .lead { max-width: 100%; }
  .contact-card    { padding: 24px 20px; }
  .cfield-row      { grid-template-columns: 1fr; }
  .services-grid   { grid-template-columns: 1fr 1fr; }
  .direct-email .emails { flex-direction: column; gap: 8px; }
}
@media (max-width: 480px) {
  .contact-wrap    { padding: 76px 16px 48px; }
  .contact-card    { padding: 20px 16px; }
  .services-grid   { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   CAREERS PAGE — mobile
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .careers-page    { padding: 80px 20px 60px; }
  .careers-hero    { grid-template-columns: 1fr; gap: 36px; margin-bottom: 56px; padding-bottom: 56px; }
  .careers-hero-left p { max-width: 100%; }
  .perks-grid      { grid-template-columns: 1fr 1fr; }
  .careers-form-wrap { grid-template-columns: 1fr; gap: 32px; }
  .careers-form-left { position: static; }
  .careers-card    { padding: 24px 20px; }
  .cfield-row      { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .careers-page    { padding: 76px 16px 48px; }
  .perks-grid      { grid-template-columns: 1fr; }
  .careers-card    { padding: 20px 16px; }
}

/* ═══════════════════════════════════════════════════
   LEGAL PAGES — mobile
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .legal-wrap      { padding: 80px 20px 56px; }
  .legal-contact   { padding: 20px 18px; }
  .legal-section ul li { padding: 8px 12px; }
}
@media (max-width: 480px) {
  .legal-wrap      { padding: 76px 16px 48px; }
  .legal-hero h1   { font-size: clamp(22px, 7vw, 32px); }
}

/* ═══════════════════════════════════════════════════
   QUOTE FORMS — mobile
   ═══════════════════════════════════════════════════ */
@media (max-width: 520px) {
  .card-header, .card-body { padding: 20px 16px !important; }
  .col-2 { grid-template-columns: 1fr !important; }
  .toggle-group { gap: 6px !important; }
  .toggle-group label { font-size: .78rem !important; padding: 7px 10px !important; }
}

/* ═══════════════════════════════════════════════════
   CREATE TICKET — mobile
   ═══════════════════════════════════════════════════ */
@media (max-width: 640px) {
  section.contact-ticket-section > div { padding: 16px !important; }
  #ticketForm .grid-cols-2-phone { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════
   POPUP — mobile sheet improvements
   ═══════════════════════════════════════════════════ */
@media (max-width: 639px) {
  #rl-popup { padding-bottom: env(safe-area-inset-bottom, 20px); }
}

/* ═══════════════════════════════════════════════════
   FOOTER — mobile
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  footer { padding: 48px 20px 28px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-tagline { max-width: 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (max-width: 480px) {
  footer { padding: 40px 16px 24px; }
  .footer-top { grid-template-columns: 1fr; gap: 24px; }
  .footer-brand { grid-column: auto; }
}

/* ═══════════════════════════════════════════════════
   SAFE AREA (iPhone notch / Dynamic Island)
   ═══════════════════════════════════════════════════ */
nav {
  padding-left: max(40px, env(safe-area-inset-left));
  padding-right: max(40px, env(safe-area-inset-right));
}
@media (max-width: 768px) {
  nav {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}
footer .footer-inner {
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}