/* =========================================================
   Diverse Claims Adjusters — responsive behaviour

   The original site is a fixed 980px Wix canvas that does not
   reflow; its phone layout is a separately authored Wix mobile
   stack served by user-agent sniffing. This file is an original
   responsive adaptation that preserves the desktop design intent
   down to 320px. See README.md → Known differences.
   ========================================================= */

/* ---------------------------------------------------------
   Large tablet / small laptop  (< 1012px)
   Content column stops being 980px and starts flexing.
   --------------------------------------------------------- */

@media (max-width: 1011px) {
  :root {
    --t-hero:     46px;
    --t-hero-sub: 32px;
    --t-tagline:  clamp(16px, 2.9vw, 30px);
    --t-catbar:   clamp(15px, 2.55vw, 30px);
    --t-callbar:  26px;
    --t-body:     18px;
    --gap-header: 56px;
  }

  .mark--lg,
  .mark--md { line-height: 1.14; padding-block: 4px; }

  .callbar { padding-bottom: 44px; }

  .cards { grid-template-columns: repeat(2, 1fr); }

  /* Bio blocks: tighten the gutters so the text column stays readable */
  .bio { gap: 40px; padding: 40px 32px 36px; }
  .bio + .bio { padding-top: 52px; }
  .bio--nophoto { padding-left: 348px; }
  .page-title { margin-left: 32px; }

  /* Interior pages: tighten the 60px gutters */
  .panel__inner--links   { min-height: 0; padding: 60px 32px 48px; }
  .panel__inner--contact { min-height: 0; padding: 29px 32px 40px; }
  .contact-grid { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
  .contact-form { padding: 22px 32px 48px; }
  .subpanel { padding: 28px 32px 48px; }
}

/* ---------------------------------------------------------
   Tablet  (< 900px) — nav starts to crowd the logo
   --------------------------------------------------------- */

@media (max-width: 899px) {
  :root { --t-nav: 18px; }
  .nav__list { gap: 2px; }
  .footer__inner { padding-inline: 28px; grid-template-columns: 1fr auto; gap: 24px; }
}

/* ---------------------------------------------------------
   Mobile  (< 768px)
   Collapsed navigation, single-column content.
   --------------------------------------------------------- */

@media (max-width: 767px) {
  :root {
    --t-hero:     34px;
    --t-hero-sub: 24px;
    --t-tagline:  18px;
    --t-catbar:   19px;
    --t-callbar:  20px;
    --t-body:     16px;
    --nav-band-h: 84px;
    --shell-pad:  12px;
    --sp-7:       26px;
    --sp-8:       34px;
    --gap-header: 32px;
  }

  /* Call bar spans the column instead of sitting right-aligned */
  .callbar { padding-block: 0; }
  .callbar__box {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: var(--t-callbar);
  }

  /* --- Collapsed navigation --- */
  .navbar__inner { position: relative; flex-wrap: wrap; padding-inline: 4px; }
  .logo img { width: 132px; }

  .nav-toggle { display: block; }

  .nav {
    flex-basis: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .nav.is-open { max-height: 380px; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-right: 0;
    padding-bottom: 8px;
  }
  .nav__list li + li { border-top: 1px solid rgba(255, 255, 255, .35); }

  .nav__link {
    padding: 13px 8px;
    font-size: 19px;
    line-height: 1.2;
  }

  /* --- Headings wrap as continuous highlight blocks --- */
  .hero__title,
  .hero__sub { margin-left: 0; }

  .mark {
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 3px 8px;
    line-height: 1.5;
  }
  .hero__sub { display: block; margin-top: 6px; }

  .hero__tagline { margin-top: 22px; }

  .prose p + p { margin-top: 18px; }

  /* --- Category bar --- */
  .catbar__list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 10px;
    min-height: 0;
    padding-block: 12px;
  }

  /* --- Bio blocks stack: photo above the text --- */
  .panel__inner--dark { padding-top: 28px; }
  .page-title { margin-left: 18px; }
  .mark-mono { font-size: 22px; line-height: 22px; }

  .bio,
  .bio + .bio {
    display: block;
    padding: 26px 18px 24px;
  }
  .bio--nophoto { padding-left: 18px; }
  .bio__media {
    width: 100%;
    max-width: 276px;
    height: auto;
    aspect-ratio: 266 / 282;
    margin-bottom: 20px;
  }
  .bio__text { font-size: 15px; line-height: 20px; }
  .bio__text p + p { margin-top: 20px; }

  /* --- Interior pages stack --- */
  .panel__inner--links   { padding: 30px 18px 34px; }
  .panel__inner--contact { padding: 28px 18px 30px; }
  .linklist { gap: 14px; }

  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .contact-grid .page-title { margin-top: 0; }
  .contact-form { padding: 20px 18px 36px; }
  .contact-form__title { font-size: 24px; line-height: 32px; }
  .contact-form__grid { grid-template-columns: 1fr; margin-top: 22px; }

  .jobs-banner { margin-top: 14px; }
  .subpanel { margin-top: 22px; padding: 22px 18px 30px; }

  /* --- Cards stack --- */
  .cards { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 22px 18px 20px; }
  .card__list,
  .card__prose { font-size: 15px; line-height: 20px; }

  /* --- Footer stacks --- */
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: 0;
    padding: 28px 20px 34px;
  }
  .footer__heading { margin-top: 0; }
  .footer__address { font-size: 14px; line-height: 19px; }
  .footer__block + .footer__block { margin-top: 18px; }
}

/* ---------------------------------------------------------
   Small phones  (< 480px)
   --------------------------------------------------------- */

@media (max-width: 479px) {
  :root {
    --t-hero:     27px;
    --t-hero-sub: 20px;
    --t-tagline:  15px;
    --t-catbar:   17px;
    --t-callbar:  17px;
  }

  .callbar__box { height: 36px; line-height: 36px; }
  .logo img { width: 118px; }

  /* Slashes are decorative — drop them once the bar wraps to a grid */
  .catbar__slash { display: none; }
  .catbar__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    gap: 8px;
  }
}

/* ---------------------------------------------------------
   Very small phones  (<= 360px)
   --------------------------------------------------------- */

@media (max-width: 360px) {
  :root { --t-hero: 24px; --t-hero-sub: 18px; --t-callbar: 15px; --shell-pad: 10px; }
  .card { padding: 18px 14px; }
}

/* ---------------------------------------------------------
   Wide desktop — the design is a fixed column, so it simply
   stays centred over a larger background photo.
   --------------------------------------------------------- */

@media (min-width: 1600px) {
  .page-bg { background-position: center 40%; }
}

/* ---------------------------------------------------------
   Print
   --------------------------------------------------------- */

@media print {
  .page-bg, .nav-toggle, .catbar { display: none !important; }
  body { background: #fff; color: #000; }
  .panel__inner, .footer__inner { background: none; color: #000; }
  .card { background: none; color: #000; border: 1px solid #999; }
}