/* ============================================================
   GoTomado — remote property management team
   Design system: navy + gold, Poppins, frosted glass
   Sibling to property-management-coordinator.pages.dev
   ============================================================ */

:root {
  /* navy blue + faint gold, on the Tomado-style layout */
  --navy: #0F2747;
  --navy-deep: #0a1c33;
  --navy-hover: #1a3a5f;
  --gold: #90836a;                 /* faint gold accent */
  --gold-deep: #6a5f45;
  --gold-soft: rgba(144, 131, 106, 0.12);
  --gold-line: rgba(144, 131, 106, 0.32);

  --ink: #0F2747;         /* headings / buttons / brand = navy */
  --ink-2: #1a3a5f;       /* hover */
  --near-black: #0a1c33;  /* dark bands, footer */
  --body: #46536a;        /* body copy */
  --muted: #6b7488;       /* secondary text / hero lead */
  --faint: #aab2c2;       /* soft two-tone headline */
  --nav-link: #46536a;    /* nav links */

  --canvas: #f7f7f5;      /* soft off-white page background */
  --canvas-alt: #eceef1;  /* alt sections */
  --surface: #ffffff;

  --line: rgba(15, 39, 71, 0.09);
  --line-2: rgba(15, 39, 71, 0.15);
  --shadow-sm: 0 2px 10px rgba(15, 39, 71, 0.05);
  --shadow: 0 10px 30px rgba(15, 39, 71, 0.10);
  --shadow-lg: 0 30px 70px -30px rgba(15, 39, 71, 0.30);

  --radius: 18px;
  --radius-sm: 12px;
  --wrap: 1140px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: 'Google Sans', 'Poppins', 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-head: 'Poppins', 'Google Sans', 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { font-size: 15px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--body);
  background: var(--canvas);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--ink);
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 700;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- section rhythm ---------- */
.section { padding: 104px 0; position: relative; }
.section-alt { background: var(--canvas-alt); }
section[id] { scroll-margin-top: 84px; }

.intro { max-width: 680px; margin: 0 auto 56px; text-align: center; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--gold-deep);
  margin: 0 0 14px;
}
.eyebrow::before {
  content: ""; display: inline-block; width: 22px; height: 1px;
  background: var(--gold); vertical-align: middle; margin-right: 10px;
  transform: translateY(-2px);
}
.eyebrow-light { color: var(--gold); }
.intro h2 { font-size: clamp(1.5rem, 2.9vw, 2.15rem); font-weight: 600; }
.intro-sub { margin-top: 16px; color: var(--muted); font-size: 1.05rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 12px 22px; border-radius: 14px;
  font-family: var(--font); font-weight: 500; font-size: 0.95rem; cursor: pointer;
  border: 1px solid transparent; transition: all 0.22s var(--ease);
  white-space: nowrap; letter-spacing: -0.01em;
}
/* dark solid pill (primary) */
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--ink-2); transform: translateY(-1px); box-shadow: var(--shadow); }
/* light outline pill (secondary) */
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: #fff; border-color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-nav { padding: 9px 16px; border-radius: 11px; background: var(--ink); color: #fff; font-size: 0.9rem; }
.btn-nav:hover { background: var(--ink-2); }
.btn-block { width: 100%; }
.footer-email-btn {
  display: block; background: none; border: 0; padding: 5px 0; margin: 0; cursor: pointer;
  font-family: var(--font); font-size: 0.92rem; text-align: left;
  color: rgba(255, 255, 255, 0.6); transition: color 0.2s var(--ease);
}
.footer-email-btn:hover { color: #fff; }
/* msg / email retained as aliases in the monochrome system (dark pill + light outline) */
.btn-msg { background: var(--ink); color: #fff; }
.btn-msg:hover { background: var(--ink-2); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-email { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); }
.btn-email:hover { background: #fff; border-color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* ============================================================
   NAV
   ============================================================ */
.nav { position: sticky; top: 16px; z-index: 100; background: transparent; }
.nav-inner {
  width: fit-content; max-width: calc(100% - 24px); margin: 0 auto;
  height: auto; display: flex; align-items: center; gap: 4px;
  padding: 7px 7px 7px 16px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(10, 10, 20, 0.08);
  transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.nav.scrolled .nav-inner { background: rgba(255, 255, 255, 0.86); box-shadow: 0 10px 34px rgba(10, 10, 20, 0.12); }

.brand { display: inline-flex; align-items: center; gap: 9px; margin-right: 10px; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--navy); color: #fff;
  font-weight: 700; font-size: 0.95rem; line-height: 1;
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
.brand-word { font-weight: 500; font-size: 1.05rem; color: var(--ink); letter-spacing: -0.02em; }
.brand-word strong { font-weight: 700; }

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links > a:not(.btn) {
  font-size: 0.875rem; font-weight: 500; color: var(--nav-link);
  padding: 7px 12px; border-radius: 9px;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav-links > a:not(.btn):hover { color: var(--ink); background: rgba(0, 0, 0, 0.04); }
.nav-links > a.active { color: var(--ink); }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px; background: none; border: 0;
  cursor: pointer; padding: 8px; margin-left: 4px;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: all 0.28s var(--ease); }
.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); }

.mobile-menu {
  display: flex; flex-direction: column; gap: 2px;
  width: fit-content; min-width: 230px; margin: 8px auto 0; padding: 10px 12px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px;
  box-shadow: 0 8px 30px rgba(10, 10, 20, 0.1);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a { padding: 10px 12px; font-weight: 500; font-size: 0.9rem; color: var(--ink); border-radius: 9px; }
.mobile-menu a:hover { background: rgba(0, 0, 0, 0.04); }

/* ============================================================
   HERO
   ============================================================ */
/* pure-white hero so the orb video's (inverted-to-white) background blends in
   even on iOS Safari, where mix-blend-mode does not apply to a <video> layer */
.hero { position: relative; background: #ffffff; padding: 132px 0 92px; overflow: hidden; }
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center;
}
.hero-copy { max-width: 620px; }
.hero-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--gold-deep); background: var(--surface); border: 1px solid var(--gold-line);
  padding: 6px 13px; border-radius: 999px; margin-bottom: 22px;
}
.hero-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }
.hero h1 {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(2.3rem, 4.7vw, 3.5rem); line-height: 1.04; letter-spacing: -0.045em;
  color: var(--ink); margin: 0 0 20px;
}
.hero h1 .h1-soft { color: var(--faint); }
.hero .lead { font-size: 1.02rem; color: var(--muted); max-width: 500px; line-height: 1.62; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 0; }
.hero-sub { margin-top: 20px; font-size: 0.84rem; color: var(--faint); }

/* the real black-and-white liquid-chrome orb (looping video).
   invert flips the black bg to white, grayscale drops the colour, then
   mix-blend-mode:multiply knocks the white out so it floats on the light page */
.hero-visual { position: relative; display: grid; place-items: center; min-height: 440px; }
.hero-orb-wrap { position: relative; display: grid; place-items: center; width: 100%; }
.hero-orb-video {
  width: min(460px, 92%); height: auto; aspect-ratio: 1; object-fit: contain;
  /* the black-and-white conversion is baked into the video pixels and its
     background is pure white, so it blends into the white hero on every browser
     with no filter or blend mode (both of which iOS Safari mishandles). A soft
     radial mask feathers the orb's outer edge into the background so there is no
     hard frame, while the orb itself stays clearly visible. */
  -webkit-mask-image: radial-gradient(closest-side, #000 78%, rgba(0, 0, 0, 0) 98%);
  mask-image: radial-gradient(closest-side, #000 78%, rgba(0, 0, 0, 0) 98%);
  transform: scale(1.14);
  animation: orbFloat 7s ease-in-out infinite alternate;
}
@keyframes orbFloat { from { transform: translateY(-12px) scale(1.14); } to { transform: translateY(12px) scale(1.14); } }
@keyframes heroZoom { from { transform: scale(1.03); } to { transform: scale(1.12); } }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--canvas-alt); }
.strip-inner { display: flex; align-items: center; gap: 28px; padding: 22px 24px; flex-wrap: wrap; justify-content: center; }
.strip-inner > span { font-size: 0.8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.strip-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.strip-logos li {
  display: flex; align-items: center; justify-content: center; height: 54px; min-width: 108px; padding: 0 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
.strip-logos li:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--gold-line); }
.strip-logos img { height: 26px; width: auto; max-width: 132px; object-fit: contain; display: block; }
.strip-logos .logo-word { font-size: 0.98rem; font-weight: 600; color: var(--navy); white-space: nowrap; }

/* ============================================================
   CARDS / GRIDS
   ============================================================ */
.grid { display: grid; gap: 22px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--gold-line); }
.card-num { font-size: 0.82rem; font-weight: 700; color: var(--gold-deep); letter-spacing: 0.14em; margin-bottom: 14px; }
.card h3 { font-size: 1.16rem; font-weight: 600; margin-bottom: 10px; }
.card p { font-size: 0.95rem; color: var(--body); }

.services-note { text-align: center; margin-top: 34px; color: var(--muted); font-size: 0.98rem; }

/* services 2-col head with photo */
.services-head { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; margin-bottom: 52px; }
.services-photo { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); outline: 1px solid var(--line); }
.services-photo img { width: 100%; height: 300px; object-fit: cover; display: block; }
.intro-left { text-align: left; margin: 0; max-width: none; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.step {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px; position: relative; box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.step-num {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--navy); color: var(--gold); font-weight: 700; font-size: 1.05rem; margin-bottom: 18px;
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
.step h3 { font-size: 1.08rem; font-weight: 600; margin-bottom: 9px; }
.step p { font-size: 0.93rem; color: var(--body); }

/* team members */
.member {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; text-align: center; box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.member:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--gold-line); }
.avatar {
  width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 18px;
  display: grid; place-items: center; font-weight: 700; font-size: 1.35rem;
  color: #fff; background: linear-gradient(150deg, var(--navy), var(--navy-hover));
  box-shadow: inset 0 0 0 2px var(--gold-line);
}
.member h3 { font-size: 1.08rem; font-weight: 600; margin-bottom: 8px; }
.member-role { font-size: 0.9rem; color: var(--muted); }

/* tools */
/* tools: open groups, no boxes, generous spacing so every logo reads clearly */
/* tools: each category is its own full-width row (label left, logos right),
   stacked vertically with hairline dividers, generous spacing and larger icons */
.tools-grid { display: flex; flex-direction: column; gap: 0; }
.tool-card {
  display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: center;
  background: transparent; border: 0; box-shadow: none;
  padding: 36px 0; border-top: 1px solid var(--line);
}
.tool-card:first-child { border-top: 0; padding-top: 6px; }
.tool-card:hover { transform: none; box-shadow: none; }
.tool-card h3 {
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--gold-deep); font-weight: 600; margin: 0;
}
.logo-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 50px; }
.logo-grid span {
  display: inline-flex; align-items: center; justify-content: flex-start;
  height: 42px; padding: 0; background: transparent; border: 0;
}
.logo-grid span:hover { transform: none; box-shadow: none; }
.logo-grid img { height: 36px; width: auto; max-width: 170px; object-fit: contain; display: block; }
.logo-grid .lw { font-size: 1.05rem; font-weight: 600; color: var(--navy); line-height: 1.15; }
/* white band so logos that ship with baked-in white backgrounds blend in and read boxless */
#tools { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* capability cards (the detailed "everything we handle" grid) */
.cap-card { padding: 28px 28px; }
.cap-card h3 {
  font-size: 1.06rem; font-weight: 600; color: var(--navy);
  margin-bottom: 15px; padding-bottom: 13px; border-bottom: 1px solid var(--line);
}
.cap-card ul { display: flex; flex-direction: column; gap: 10px; }
.cap-card li { position: relative; padding-left: 19px; font-size: 0.9rem; color: var(--body); line-height: 1.45; }
.cap-card li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--gold);
}
.cap-ill {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
  background: var(--gold-soft); color: var(--navy); margin-bottom: 16px;
}
.cap-ill svg { width: 23px; height: 23px; }
.cap-ill .acc { stroke: var(--gold-deep); }

/* why remote */
.why-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--gold);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.why-card h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 10px; }
.why-card p { font-size: 0.95rem; color: var(--body); }

/* value cards with custom illustrations */
.value-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--gold-line); }
.value-ill {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 15px;
  background: var(--gold-soft); color: var(--navy); margin-bottom: 18px;
}
.value-ill svg { width: 30px; height: 30px; }
.value-ill .acc { stroke: var(--gold-deep); }
.value-card h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 9px; }
.value-card p { font-size: 0.93rem; color: var(--body); }

/* ============================================================
   FAQ
   ============================================================ */
.wrap-narrow { max-width: 780px; }
.faq { display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.faq-item[open] { border-color: var(--gold-line); box-shadow: var(--shadow); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 20px 24px; font-weight: 600; color: var(--navy);
  font-size: 1.02rem; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-mark { position: relative; width: 14px; height: 14px; flex: none; }
.faq-mark::before, .faq-mark::after {
  content: ""; position: absolute; background: var(--gold-deep); border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.faq-mark::before { left: 0; top: 6px; width: 14px; height: 2px; }
.faq-mark::after { left: 6px; top: 0; width: 2px; height: 14px; }
.faq-item[open] .faq-mark::after { transform: scaleY(0); opacity: 0; }
.faq-a { padding: 0 24px 22px; }
.faq-a p { color: var(--body); font-size: 0.96rem; }

/* ============================================================
   BLOG CARDS
   ============================================================ */
.post-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); color: inherit;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--gold-line); }
.post-cover { overflow: hidden; }
.post-cover img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform 0.5s var(--ease); }
.post-card:hover .post-cover img { transform: scale(1.05); }
.post-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.post-tag {
  align-self: flex-start; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--gold-deep); background: var(--gold-soft); padding: 4px 11px; border-radius: 999px; margin-bottom: 13px;
}
.post-body h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.32; margin-bottom: 10px; }
.post-body p { font-size: 0.93rem; color: var(--body); margin-bottom: 16px; flex: 1; }
.post-link { font-size: 0.9rem; font-weight: 600; color: var(--navy); }
.post-link::after { content: " \2192"; color: var(--gold-deep); }
.blog-more { text-align: center; margin-top: 38px; }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--gold-line); }
.btn-ghost:hover { background: var(--gold-soft); transform: translateY(-2px); }

/* ============================================================
   CONTACT
   ============================================================ */
.section-cta { background: linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 100%); color: #fff; }
.section-cta h2, .section-cta .eyebrow { color: #fff; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact-copy h2 { font-size: clamp(1.5rem, 2.9vw, 2.1rem); margin: 12px 0 16px; }
.contact-copy > p { color: rgba(255, 255, 255, 0.82); font-size: 1.05rem; max-width: 460px; }
.contact-direct { display: flex; align-items: center; gap: 20px; margin-top: 28px; flex-wrap: wrap; }
.contact-mail { color: var(--gold); font-weight: 500; border-bottom: 1px solid var(--gold-line); padding-bottom: 2px; }
.contact-mail:hover { color: #fff; }

.contact-form {
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius); padding: 30px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.85rem; font-weight: 500; color: rgba(255, 255, 255, 0.88); margin-bottom: 7px; }
.field input, .field textarea {
  width: 100%; padding: 12px 15px; border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.9);
  font-family: var(--font); font-size: 0.95rem; color: var(--navy); resize: vertical;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: #6b7488; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); background: #fff;
}
.form-status { margin-top: 14px; font-size: 0.9rem; min-height: 1.2em; }
.form-status.ok { color: #6ee7b7; }
.form-status.err { color: #fca5a5; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--navy-deep); color: rgba(255, 255, 255, 0.72); padding: 60px 0 28px; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 2fr; gap: 48px; }
.footer .brand-word { color: #fff; }
.footer .brand-mark { background: rgba(255, 255, 255, 0.06); }
.footer-brand p { margin-top: 16px; font-size: 0.92rem; max-width: 300px; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.footer-links h3 { color: #fff; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; font-weight: 600; }
.footer-links a { display: block; font-size: 0.92rem; padding: 5px 0; color: rgba(255, 255, 255, 0.66); transition: color 0.2s var(--ease); }
.footer-links a:hover { color: var(--gold); }
.footer-base {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.82rem; color: rgba(255, 255, 255, 0.5);
}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
/* Reveal only hides content once JS is confirmed (html.js set in <head>).
   Without JS the content stays fully visible, never a blank page.
   A pure-CSS safety animation guarantees visibility even if the reveal
   script never runs (e.g. it fails to load), so the page can never stay blank. */
.reveal { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
html.js .reveal { opacity: 0; transform: translateY(22px); animation: revealSafety 0.01s linear 2s forwards; }
html.js .reveal.in { opacity: 1; transform: none; animation: none; }
@keyframes revealSafety { to { opacity: 1; transform: none; } }
.reveal:nth-child(2) { transition-delay: 0.06s; }
.reveal:nth-child(3) { transition-delay: 0.12s; }
.reveal:nth-child(4) { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, html.js .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .hero-orb-video { animation: none !important; transform: scale(1.14) !important; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ============================================================
   FOCUS-VISIBLE (keyboard affordance)
   ============================================================ */
a:focus-visible, .btn:focus-visible, button:focus-visible, .nav-toggle:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px;
}
.nav-links > a:not(.btn):focus-visible { outline-offset: 2px; }

/* ============================================================
   HOW-IT-WORKS TIMELINE (distinct layout from the card sections)
   ============================================================ */
.steps { position: relative; }
.step { background: transparent; border: 0; box-shadow: none; padding: 0 14px; text-align: center; }
.step:hover { transform: none; box-shadow: none; }
.step .step-num { margin: 0 auto 18px; position: relative; z-index: 1; }
@media (min-width: 961px) {
  .steps::before {
    content: ""; position: absolute; top: 20px; left: 12.5%; right: 12.5%;
    height: 2px; background: var(--gold-line); z-index: 0;
  }
}

/* ============================================================
   AI-FORWARD BAND
   ============================================================ */
.section-ai { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); color: #fff; }
.section-ai .eyebrow { color: var(--gold); }
.section-ai .eyebrow::before { background: var(--gold); }
.section-ai h2 { color: #fff; }
.section-ai .intro-sub { color: rgba(255, 255, 255, 0.74); }
.ai-card {
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius); padding: 30px 28px;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.ai-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, 0.08); border-color: var(--gold-line); }
.ai-card .card-num { color: var(--gold); }
.ai-card h3 { color: #fff; font-size: 1.12rem; font-weight: 600; margin-bottom: 10px; }
.ai-card p { color: rgba(255, 255, 255, 0.74); font-size: 0.94rem; }
.ai-figure {
  margin: 0 0 40px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--shadow-lg);
}
.ai-figure img { width: 100%; height: 340px; object-fit: cover; display: block; }
.ai-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-top: 46px; padding-top: 38px; border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.metric { text-align: center; }
.metric b { display: block; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--gold); letter-spacing: -0.02em; }
.metric span { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); }

/* ============================================================
   ABOUT / FOUNDER
   ============================================================ */
.about-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items: center; }
.about-copy h2 { margin-bottom: 18px; }
.about-copy p { color: var(--body); font-size: 1.02rem; }
.about-copy p + p { margin-top: 16px; }
.about-name { font-weight: 600; color: var(--navy); }
.founder-byline { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.founder-byline img {
  width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid var(--gold-line); box-shadow: var(--shadow-sm);
}
.founder-byline b { display: block; color: var(--navy); font-size: 1rem; font-weight: 600; }
.founder-byline span { font-size: 0.85rem; color: var(--muted); }
.about-photo { display: grid; place-items: center; }
.founder-frame {
  position: relative; margin: 0; max-width: 380px; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-lg); outline: 1px solid var(--line);
}
.founder-frame img { width: 100%; height: auto; display: block; }
.founder-frame figcaption {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  background: rgba(15, 39, 71, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; padding: 11px 15px;
}
.founder-frame figcaption b { display: block; color: #fff; font-size: 0.98rem; font-weight: 600; }
.founder-frame figcaption span { font-size: 0.82rem; color: rgba(255, 255, 255, 0.72); }

/* ============================================================
   iOS / GLASS CARD SYSTEM
   ============================================================ */
.card, .value-card, .why-card, .member, .post-card, .faq-item, .cap-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15, 39, 71, 0.04), 0 10px 26px -18px rgba(15, 39, 71, 0.2);
}
.card:hover, .value-card:hover, .why-card:hover, .member:hover, .post-card:hover, .cap-card:hover {
  border-color: var(--line-2);
  box-shadow: 0 2px 4px rgba(15, 39, 71, 0.05), 0 20px 44px -22px rgba(15, 39, 71, 0.28);
}
.strip-logos li { background: var(--surface); border-color: var(--line); }
.faq-item[open] { border-color: var(--line-2); }
/* neutralize the old gold accent tab on why cards */
.why-card { border-top: 1px solid var(--line); }

/* logo size normalization: keep every logo optically consistent, tame the ones
   that render large (Zillow, Airbnb wordmarks) so they match their neighbours */
.strip-logos img[alt="Zillow"] { height: 19px; }
.strip-logos img[alt="Airbnb"] { height: 22px; }
.logo-grid img[alt="Zillow"] { height: 26px; }
.logo-grid img[alt="Airbnb"] { height: 30px; }
.logo-grid img[alt="Craigslist"], .logo-grid img[alt="Facebook Marketplace"] { height: 31px; }

/* dark contact band: invert the pill buttons so they stay high-contrast */
.section-cta .btn-msg, .section-cta .btn-primary { background: #fff; color: var(--ink); border-color: transparent; }
.section-cta .btn-msg:hover, .section-cta .btn-primary:hover { background: #f4f4f5; }
.section-cta .btn-email { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.section-cta .btn-email:hover { background: rgba(255, 255, 255, 0.08); border-color: #fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .hero { padding: 116px 0 72px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-copy { max-width: 640px; }
  .hero-frame { max-width: 520px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .services-head { grid-template-columns: 1fr; gap: 28px; margin-bottom: 40px; }
  .services-photo img { height: 240px; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-inner { grid-template-columns: 1fr; gap: 36px; }
}

/* Guard: never show the stacked mobile menu at desktop widths (open-on-resize) */
@media (min-width: 721px) { .mobile-menu { display: none !important; } }

@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .section { padding: 72px 0; }
  .hero { padding: 104px 0 60px; }
  .grid-3 { grid-template-columns: 1fr; }
  .ai-metrics { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
  .footer-base { justify-content: flex-start; }
  /* tools: stack the category label above its logos on small screens */
  .tool-card { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; }
  .tool-card h3 { margin-bottom: 2px; }
  .logo-grid { gap: 22px 36px; }
}

@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .hero-cta .btn { flex: 1; }
}