/* The Notary Way — homepage service choice, 2026-10-09. Loaded only on / and /es/, after the shared
   immutable tnw-focus-20261009.css (never edit that file for homepage-only changes).

   WHY (owner, phone screenshot 2026-10-09 19:56): "you completely regression the point of online notary
   your making this too much only mobile notary don't put all the location bullshit at the top".
   Online and mobile are both core services. The entry therefore names both in plain words — online first —
   and offers them as ONE decision: a single panel with two equal paths, each with one human sentence and a
   direct destination (online → its own page; mobile → the local details just below). Cities, ZIP codes,
   fees and hours stay in their own bands lower on the page. Keep this a two-path choice: adding badges,
   prices, a photo or a Call/Text cluster back into the hero repeats both rejected first screens. */

/* ---------- Service choice (hero) ---------- */
/* The shared hero spacing was tuned for a large photo. With two concise service
   paths, its next local heading intruded into the initial phone view. Give this
   homepage decision its own quiet exit; content still sets the height and scroll
   remains ordinary. The online landing page keeps its separate shared treatment. */
.hero { padding-block-end: clamp(144px, 19vw, 224px); }

.service-choice {
  list-style: none; padding: 0; margin: 0; max-width: 40rem;
  background: var(--card); border: 2px solid var(--forest); border-radius: var(--radius);
}
.service-choice > li + li { border-top: 1px solid var(--line); }
.service-path {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 24px; column-gap: 16px; align-items: center;
  min-height: 104px; padding: 18px 20px; color: var(--ink); text-decoration: none;
}
.service-choice > li:first-child > .service-path { border-radius: 20px 20px 0 0; }
.service-choice > li:last-child > .service-path { border-radius: 0 0 20px 20px; }
.service-path:hover { background: var(--sage); color: var(--ink); }
/* Equal weight: both services share the same icon treatment; reading order alone puts online first. */
.service-icon {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--forest); color: var(--cream);
}
.service-icon .icon { width: 26px; height: 26px; }
.service-text { display: grid; gap: 4px; min-width: 0; }
.service-name { font-size: 1.375rem; line-height: 1.2; font-weight: 720; letter-spacing: -.015em; color: var(--forest); --glyph-w: .8px; }
.service-desc { font-size: 1.0625rem; line-height: 1.45; color: var(--ink-soft); }
.service-go { width: 24px; height: 24px; color: var(--forest); stroke-width: 2.2; }
@media (max-width: 374px) {
  .service-path { grid-template-columns: 44px minmax(0, 1fr) 20px; column-gap: 12px; padding: 16px 14px; }
  .service-icon { width: 44px; height: 44px; }
  .service-icon .icon { width: 22px; height: 22px; }
  .service-name { font-size: 1.25rem; }
}
@media (min-width: 1024px) {
  .service-path { padding: 22px 24px; min-height: 120px; }
  .service-name { font-size: 1.5rem; }
  .service-desc { font-size: 1.125rem; }
}

/* ---------- Mobile service area: the stamp photo now illustrates the in-person service here ---------- */
/* WHY: in the hero the stamping photo made the whole business read as in-person only. Beside the mobile
   area it shows that service; on phones it sits between the area details and the price/hours facts. */
.area-media {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 58%;
  border-radius: var(--radius); background: var(--paper-deep);
}
@media (min-width: 900px) {
  .area-band .area-grid { grid-template-areas: "main media" "glance glance" "fork fork"; align-items: center; }
  .area-band .area-main { grid-area: main; }
  .area-band .area-media { grid-area: media; }
  .area-band .glance { grid-area: glance; }
  .area-band .area-fork { grid-area: fork; }
  /* The facts read as one row of four on wide screens, two by two between. */
  .area-band .glance .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
}
@media (min-width: 1180px) {
  .area-band .glance .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 0) and (prefers-reduced-motion: no-preference) {
  .service-path { transition: background-color .16s ease; }
}
@media (forced-colors: active) {
  .service-choice { border: 2px solid CanvasText; }
  .service-icon { border: 2px solid CanvasText; }
}