/* ————————————————————————————————————————————————————————————————
   Apex Medical Professionals LLC
   Design brief (from Dr. Palacci): "Imagine landing on the homepage of a
   top litigation firm. White background, navy #163A5F accents, charcoal
   gray text, plenty of white space, minimal clutter."

   Type is a bookish system serif for display (no webfonts: faster, private,
   nothing to consent to) over a neutral sans for reading. Gold appears only
   in hairlines and marks — it is borrowed from the ABIM ribbon and stays a
   garnish, never a theme.
   ———————————————————————————————————————————————————————————————— */

:root {
  --navy: #163a5f;
  --navy-deep: #0e2a45;
  --navy-wash: #eef2f6;
  --charcoal: #33383d;
  --slate: #5c6670;
  --line: #e1e6eb;
  --gold: #c9a227;
  --paper: #ffffff;
  --wash: #f5f7f9;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  font-family: var(--sans);
  font-size: 1.0625rem;            /* 17px */
  line-height: 1.7;
  color: var(--charcoal);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* height:auto is load-bearing: without it, an <img> carrying width/height
   attributes keeps its ATTRIBUTE height when max-width shrinks it, and the
   picture squashes. The About portrait rendered 300x900 against a natural
   643x900 — less than half its true width — until this line existed. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--navy); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: #fff; padding: 0.75rem 1.25rem; z-index: 100;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ————— Layout primitives ————— */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }
.section { padding: 4.5rem 0; }
.section--wash { background: var(--wash); }
.section--navy { background: var(--navy-deep); color: #fff; }

.eyebrow {
  font-size: 0.8125rem;            /* 13px — legible, and never interactive */
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.section--navy .eyebrow { color: #e3c968; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; color: var(--navy); }
.section--navy h2, .section--navy h3 { color: #fff; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.375rem); margin-bottom: 1rem; }
h3 { font-size: 1.1875rem; margin-bottom: 0.5rem; }

.lede { font-size: 1.125rem; color: var(--slate); max-width: 46em; }

/* ————— Header ————— */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.25rem 1.5rem; padding-top: 0.875rem; padding-bottom: 0.875rem;
}
.brand { text-decoration: none; display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 0.25rem 0; }
.brand-name {
  font-family: var(--serif); font-size: 1.1875rem; font-weight: 700;
  letter-spacing: 0.045em; color: var(--navy); text-transform: uppercase;
}
.brand-sub {
  font-size: 0.71rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--slate); margin-top: 0.1rem;
}
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.25rem; }
.site-nav a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 0.75rem;
  text-decoration: none; color: var(--charcoal);
  font-size: 0.9375rem; font-weight: 600; border-radius: 4px;
}
.site-nav a[aria-current="page"] { color: var(--navy); box-shadow: inset 0 -2px 0 var(--gold); }
.site-nav .nav-cta {
  background: var(--navy); color: #fff; padding: 0 1.1rem; border-radius: 999px; margin-left: 0.5rem;
}
@media (hover: hover) {
  .site-nav a:hover { color: var(--navy); }
  .site-nav .nav-cta:hover { background: var(--navy-deep); color: #fff; }
}
@media (max-width: 760px) {
  .site-header .wrap { justify-content: center; text-align: center; }
  .site-nav { justify-content: center; }
}

/* ————— Hero ————— */
.hero { padding: 5rem 0 4rem; }
.hero h1 {
  font-size: clamp(2.125rem, 5vw, 3.25rem);
  max-width: 15em;
  margin-bottom: 1.25rem;
}
.hero-roles {
  font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.5rem;
}
.hero-roles span { color: var(--line); padding: 0 0.5em; }
.hero .lede { margin-bottom: 2.25rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.875rem; align-items: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.55rem 1.75rem;
  font-family: var(--sans); font-size: 1rem; font-weight: 700;
  border-radius: 999px; text-decoration: none; border: 1.5px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-ghost { border-color: var(--line); color: var(--navy); background: transparent; }
.section--navy .btn-primary { background: #fff; color: var(--navy-deep); }
@media (hover: hover) {
  .btn-primary:hover { background: var(--navy-deep); }
  .btn-ghost:hover { border-color: var(--navy); }
  .section--navy .btn-primary:hover { background: var(--navy-wash); }
}
.link-quiet {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--slate); font-size: 0.9375rem; text-decoration: none;
  border-bottom: 1px solid transparent;
}
.link-quiet b { color: var(--navy); margin-left: 0.35em; }
@media (hover: hover) { .link-quiet:hover b { text-decoration: underline; } }

/* ————— Credential strip ————— */
.cred-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cred-strip .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.5rem 3.5rem; padding-top: 1.75rem; padding-bottom: 1.75rem;
}
.cred { display: flex; align-items: center; gap: 1rem; }
.cred img { width: 76px; height: 76px; }
.cred-seal {
  width: 76px; height: 76px; flex: none; border-radius: 50%;
  border: 2px solid var(--navy); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.04em;
  background: var(--navy-wash);
}
.cred-text b { display: block; color: var(--navy); font-size: 0.9375rem; line-height: 1.35; }
.cred-text span { font-size: 0.8125rem; color: var(--slate); line-height: 1.45; display: block; max-width: 24em; }

/* ————— Stat row ————— */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 0 1.5rem; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat b {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.25rem); color: var(--navy); line-height: 1.2;
}
.stat span { font-size: 0.9rem; color: var(--slate); line-height: 1.45; display: block; margin-top: 0.3rem; }
@media (max-width: 860px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 2rem 0; }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
}

/* ————— Cards ————— */
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 1.75rem 1.5rem; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.section--wash .card { border-color: #d8dee5; }
@media (hover: hover) {
  .card:hover { border-color: var(--navy); box-shadow: 0 10px 28px -18px rgba(14, 42, 69, 0.35); }
}
.card .icon { color: var(--navy); margin-bottom: 1rem; }
.card ul { list-style: none; margin-top: 0.75rem; }
.card li { padding: 0.22rem 0 0.22rem 1.3rem; position: relative; font-size: 0.9375rem; color: var(--slate); }
.card li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }
.card p { font-size: 0.9375rem; color: var(--slate); }

/* Expertise tiles: quieter than service cards, navy keyline on top */
.tile {
  border: 1px solid var(--line); border-top: 3px solid var(--navy); border-radius: 8px;
  padding: 1.1rem 1.25rem; background: var(--paper);
  font-family: var(--serif); font-size: 1.02rem; color: var(--navy); font-weight: 600;
  display: flex; align-items: center; min-height: 64px; line-height: 1.3;
}

/* Why-us list */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem 2.5rem; }
@media (max-width: 980px) { .why { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .why { grid-template-columns: 1fr; } }
.why-item { display: flex; gap: 1rem; align-items: flex-start; }
.why-item .mark {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy-wash); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.why-item b { display: block; color: var(--navy); font-size: 1rem; }
.why-item span { font-size: 0.9rem; color: var(--slate); line-height: 1.55; }

/* ————— Bio teaser (home) ————— */
.bio-flex { display: flex; gap: 2.5rem; align-items: center; }
.bio-portrait {
  flex: none; width: 168px; height: 168px; border-radius: 50%;
  object-fit: cover; object-position: 50% 18%;
  border: 4px solid #fff; box-shadow: 0 0 0 1px var(--line), 0 14px 30px -18px rgba(14,42,69,.45);
}
@media (max-width: 640px) { .bio-flex { flex-direction: column; text-align: center; } }

/* ————— Neutrality band ————— */
.neutral { border-left: 4px solid var(--gold); padding: 0.4rem 0 0.4rem 1.75rem; max-width: 52em; }
.neutral p { font-family: var(--serif); font-size: 1.2rem; line-height: 1.65; color: var(--navy); }
.neutral p + p { margin-top: 1rem; }

/* ————— Contact banner ————— */
.banner { text-align: center; }
.banner h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.banner p { color: #c4d1de; max-width: 38em; margin: 0.75rem auto 2rem; }

/* ————— About page ————— */
.about-grid { display: grid; grid-template-columns: 300px 1fr; gap: 3.5rem; align-items: start; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }
.about-side img.portrait { border-radius: 12px; box-shadow: 0 18px 40px -24px rgba(14,42,69,.5); }
.about-side .cred { margin-top: 1.5rem; }
.prose p + p { margin-top: 1rem; }
.prose { max-width: 62em; }

.timeline { list-style: none; margin-top: 0.5rem; }
.timeline li { position: relative; padding: 0 0 1.4rem 1.75rem; border-left: 1px solid var(--line); margin-left: 0.4rem; }
.timeline li:last-child { padding-bottom: 0.2rem; }
.timeline li::before {
  content: ""; position: absolute; left: -5px; top: 0.45em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
}
.timeline b { display: block; color: var(--navy); font-size: 1rem; }
.timeline i { font-style: normal; font-size: 0.875rem; color: var(--slate); display: block; }
.timeline p { font-size: 0.9375rem; color: var(--slate); margin-top: 0.25rem; }

.fact-list { list-style: none; }
.fact-list li { padding: 0.35rem 0 0.35rem 1.6rem; position: relative; }
.fact-list li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }

/* ————— Claimants page ————— */
.notice {
  background: var(--navy-wash); border: 1px solid #cfdae5; border-left: 4px solid var(--navy);
  border-radius: 8px; padding: 1.1rem 1.4rem; font-size: 0.9375rem; max-width: 62em;
}
.notice b { color: var(--navy); }

.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: stretch; }
@media (max-width: 860px) { .visit-grid { grid-template-columns: 1fr; } }
/* The embed sizes its canvas to the iframe's FIRST layout, so the frame must
   have its real height before the map loads — not one it grows into after the
   neighbouring card's images arrive. */
.map-frame { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; height: 460px; }
.map-frame iframe { width: 100%; height: 460px; border: 0; display: block; }
@media (max-width: 860px) { .map-frame, .map-frame iframe { height: 340px; } }

.info-rows { display: grid; gap: 0; }
.info-row { display: flex; gap: 1rem; padding: 0.9rem 0; border-top: 1px solid var(--line); }
.info-row:first-child { border-top: 0; padding-top: 0; }
.info-row .icon { flex: none; color: var(--navy); margin-top: 0.15rem; }
.info-row b { display: block; color: var(--navy); font-size: 0.9375rem; }
.info-row p, .info-row li { font-size: 0.9375rem; color: var(--slate); }
.info-row ul { list-style: none; }

.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 640px) { .photo-pair { grid-template-columns: 1fr; } }
.photo-pair figure { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper); }
.photo-pair img { width: 100%; height: 300px; object-fit: cover; }
.photo-pair figcaption { padding: 0.75rem 1rem; font-size: 0.85rem; color: var(--slate); }

/* FAQ — native details, no JS */
.faq { max-width: 62em; }
.faq details { border: 1px solid var(--line); border-radius: 10px; background: var(--paper); margin-bottom: 0.75rem; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 52px; padding: 0.65rem 1.25rem;
  font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-size: 1.35rem; color: var(--gold); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq .faq-body { padding: 0 1.25rem 1.1rem; color: var(--slate); font-size: 0.9375rem; }
.faq .faq-body p + p, .faq .faq-body p + ul, .faq .faq-body ul + p { margin-top: 0.65rem; }
.faq .faq-body ul { padding-left: 1.2rem; }

/* ————— Contact page ————— */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

form .field { margin-bottom: 1.1rem; }
label { display: block; font-weight: 700; font-size: 0.9rem; color: var(--navy); margin-bottom: 0.3rem; }
input, select, textarea {
  width: 100%; font-family: var(--sans);
  font-size: 1rem;                  /* ≥16px: iOS must not zoom on focus */
  color: var(--charcoal); background: #fff;
  border: 1.5px solid var(--line); border-radius: 8px;
  padding: 0.7rem 0.9rem; min-height: 48px;
}
textarea { min-height: 132px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(22, 58, 95, 0.15);
}
.form-note { font-size: 0.85rem; color: var(--slate); margin-top: 0.9rem; }

.contact-side .info-row { border-top-color: var(--line); }
.contact-side a { text-decoration: none; }
@media (hover: hover) { .contact-side a:hover { text-decoration: underline; } }

/* ————— Footer ————— */
.site-footer { background: var(--navy-deep); color: #b9c7d4; font-size: 0.9rem; }
.site-footer .wrap { padding-top: 3rem; padding-bottom: 2.5rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-sub { color: #8fa3b5; }
.site-footer h4 { color: #fff; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.75rem; }
.site-footer ul { list-style: none; }
.site-footer li { padding: 0.18rem 0; }
.site-footer a { color: #d5e0ea; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.site-footer li { padding: 0; }
@media (hover: hover) { .site-footer a:hover { color: #fff; text-decoration: underline; } }
.footer-legal {
  border-top: 1px solid rgba(255,255,255,0.14); margin-top: 2.25rem; padding-top: 1.5rem;
  font-size: 0.8125rem; color: #8fa3b5; max-width: 62em;
}
.footer-legal p + p { margin-top: 0.5rem; }

/* ————————————————————————————————————————————————————————————————
   Motion
   The rules: transform and opacity only (nothing that re-flows layout),
   every hover effect behind (hover: hover) so nothing sticks on a phone,
   and everything inside prefers-reduced-motion: no-preference so the
   whole system disappears for people who ask it to.
   ———————————————————————————————————————————————————————————————— */

:root {
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

@media (prefers-reduced-motion: no-preference) {

  /* —— Cross-page transitions —— */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation-duration: 0.16s; }
  ::view-transition-new(root) { animation-duration: 0.30s; }
  /* Browsers without view transitions still get a soft arrival. */
  @supports not (view-transition-name: root) {
    body { animation: page-in 0.4s var(--ease-out); }
  }
  @keyframes page-in {
    from { opacity: 0; transform: translateY(10px); }
  }

  /* —— Load entrance for the first screen —— */
  .hero .hero-roles, .hero h1, .hero .lede, .hero .cta-row {
    animation: rise-in 0.7s var(--ease-out) backwards;
  }
  .hero h1 { animation-delay: 0.08s; }
  .hero .lede { animation-delay: 0.16s; }
  .hero .cta-row { animation-delay: 0.24s; }
  @keyframes rise-in {
    from { opacity: 0; transform: translateY(18px); }
  }

  /* —— Scroll reveal ——
     reveal.js hides only what is BELOW the first screen (so nothing on
     screen ever blinks), then lets each element rise in as it scrolls
     into view, siblings staggered through --rd. */
  html.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
    transition-delay: var(--rd, 0ms);
  }
  html.js .reveal.in { opacity: 1; transform: none; }

  /* —— Hover choreography (pointer devices only) —— */
  @media (hover: hover) {
    .card { transition: transform 0.3s var(--ease-spring), border-color 0.25s ease, box-shadow 0.3s ease; }
    .card:hover { transform: translateY(-5px); }
    .card .icon { transition: transform 0.3s var(--ease-spring), color 0.25s ease; }
    .card:hover .icon { transform: translateY(-2px) scale(1.06); color: var(--gold); }

    .tile { transition: transform 0.28s var(--ease-spring), border-color 0.25s ease, box-shadow 0.28s ease; }
    .tile:hover {
      transform: translateY(-3px);
      border-top-color: var(--gold);
      box-shadow: 0 10px 22px -14px rgba(14, 42, 69, 0.4);
    }

    .why-item .mark { transition: background-color 0.25s ease, color 0.25s ease, transform 0.28s var(--ease-spring); }
    .why-item:hover .mark { background: var(--navy); color: #fff; transform: scale(1.1); }

    .btn { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.25s var(--ease-spring), box-shadow 0.25s ease; }
    .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(14, 42, 69, 0.5); }
    .btn:active { transform: translateY(0); box-shadow: none; }

    .link-quiet b { display: inline-block; transition: transform 0.25s var(--ease-spring); }
    .link-quiet:hover b { transform: translateX(4px); }

    .site-nav a { transition: color 0.2s ease; }

    .faq summary { transition: background-color 0.2s ease; }
    .faq details:not([open]) summary:hover { background: var(--wash); border-radius: 10px; }
    .faq summary::after { transition: transform 0.3s var(--ease-spring); }
    .faq details[open] summary::after { transform: rotate(180deg); }

    .photo-pair img { transition: transform 0.5s var(--ease-out); }
    .photo-pair figure:hover img { transform: scale(1.035); }

    .cred img, .cred-seal { transition: transform 0.3s var(--ease-spring); }
    .cred:hover img, .cred:hover .cred-seal { transform: scale(1.06); }

    .info-row .icon { transition: transform 0.28s var(--ease-spring), color 0.25s ease; }
    .info-row:hover .icon { transform: scale(1.12); color: var(--gold); }
  }
}

/* Print: keep it dignified */
@media print {
  .site-header, .site-footer, .cta-row, .nav-cta { display: none; }
  body { font-size: 11pt; }
}