/* ============================================================
   RESPONSIVE — CLAY + MOTION
   Loaded last. Two things need to scale with the viewport that
   the original responsive sheet knows nothing about:

   1. Clay radii and shadow spread. A 46px radius and a 40px
      shadow are correct on a 1440px card and cartoonish on a
      340px one, so both step down with the screen.
   2. Motion distance. A 40px rise reads as a settle on a large
      screen and as a lurch on a phone.
   ============================================================ */

/* ============================================================
   LARGE DESKTOP — the clay can afford to be a little softer
   and a little rounder at this size
   ============================================================ */
@media (min-width: 1600px){
  :root{
    --clay-r-xl: 54px;
    --clay-r-lg: 40px;
    --clay-r-md: 28px;
    --clay-lift:
      20px 24px 50px -16px rgba(120,96,84,.32),
      -12px -14px 34px -14px rgba(255,255,255,.92);
    --clay-lift-hi:
      26px 34px 66px -18px rgba(120,96,84,.38),
      -14px -16px 40px -14px rgba(255,255,255,.95);
  }
  .portrait-img{ border-radius: 44px; }
  .about-portrait-frame::after,
  .about-portrait img{ border-radius: 44px; }
}

/* ============================================================
   TABLET — 1080 and down
   ============================================================ */
@media (max-width: 1080px){
  :root{
    --clay-r-xl: 40px;
    --clay-r-lg: 30px;
  }
  .portrait-img{ border-radius: 32px; }
  .about-portrait-frame::after,
  .about-portrait img{ border-radius: 32px; }
  /* the split is stacked at this width, so the slabs need breathing room */
  .training-panel{ padding: clamp(2.6rem, 6vw, 4rem) clamp(1.75rem, 4vw, 3rem); }
}

/* ============================================================
   SMALL TABLET / LARGE PHONE — 860 and down
   ============================================================ */
@media (max-width: 860px){
  :root{
    --clay-r-xl: 36px;
    --clay-r-lg: 28px;
    --clay-r-md: 20px;
    --clay-r-sm: 14px;
    /* shorter throw, less blur — big soft shadows are expensive to
       composite on mobile and read as haze at this size */
    --clay-lift:
      10px 13px 26px -12px rgba(120,96,84,.32),
      -7px -8px 18px -12px rgba(255,255,255,.9);
    --clay-lift-hi:
      13px 17px 34px -14px rgba(120,96,84,.36),
      -8px -9px 22px -12px rgba(255,255,255,.92);
    --clay-lift-d:
      11px 14px 28px -14px rgba(0,0,0,.5),
      -7px -8px 18px -14px rgba(255,255,255,.06);
  }
  .portrait-img{ border-radius: 28px; }
  .about-portrait-frame::after,
  .about-portrait img{ border-radius: 28px; }

  /* shorter travel so nothing reads as a lurch on a small screen */
  .m-rise{ transform: translateY(18px) scale(.99); }
  .m-slab{ transform: translateY(26px) scale(.985); }
  .highlight-item{ transform: translateY(22px) scale(.97); }
  [data-reveal]{ transform: translateY(16px); }
  h2[data-reveal], .h2[data-reveal]{ transform: translateY(18px); }
}

/* ============================================================
   PHONE — 480 and down
   ============================================================ */
@media (max-width: 480px){
  :root{
    --clay-r-xl: 28px;
    --clay-r-lg: 22px;
    --clay-r-md: 16px;
    --clay-r-sm: 12px;
    --clay-lift:
      7px 9px 20px -10px rgba(120,96,84,.32),
      -5px -6px 14px -10px rgba(255,255,255,.88);
    --clay-lift-hi:
      9px 12px 26px -12px rgba(120,96,84,.36),
      -6px -7px 16px -10px rgba(255,255,255,.9);
    --clay-in:
      inset -5px -5px 10px -5px rgba(120,96,84,.28),
      inset 6px 7px 13px -5px rgba(255,255,255,.92);
    --clay-press:
      inset 6px 7px 14px -5px rgba(120,96,84,.34),
      inset -5px -6px 12px -5px rgba(255,255,255,.82);
  }
  .portrait-frame, .about-portrait-frame{ padding: 8px; }
  .portrait-img{ border-radius: 21px; }
  .about-portrait-frame::after,
  .about-portrait img{ border-radius: 21px; }

  .site-nav, .site-nav.scrolled{ padding: .6rem .6rem .6rem 1rem; }
  .nav-toggle{ width: 38px; height: 38px; }
  .cta-solid{ padding: 1rem 1.7rem; }
  .cta-outline{ padding: .95rem 1.6rem; }
  .hero-meta{ padding: .75rem 1rem; margin-top: .85rem; }
  .highlight-item{ padding: 1.6rem 1.1rem; }
  .faq-q{ padding: 1.15rem 1.2rem; }
  .faq-a p{ padding: 0 1.2rem 1.25rem; }
  .faq-q .plus{ width: 28px; height: 28px; margin-left: 1.1rem; }
  .branch-item{ padding: .85rem 1rem; }
  .contact-form{ padding: 1.3rem; }
  .form-field input, .form-field textarea{ padding: .85rem 1rem; }
  .contact-submit{ padding: 1.05rem 1.2rem; }
  .treatment-card{ padding: 1.2rem 3.1rem 1.2rem 2.8rem; }
  .treatment-icon{ right: .9rem; width: 38px; height: 38px; }
  .treatment-number{ left: 1rem; }
  .factor-icon{ width: 54px; height: 54px; }
  .foot-socials a{ width: 38px; height: 38px; }
  .back-to-top{ width: 44px; height: 44px; }
}

/* ============================================================
   NARROW PHONE — 380 and down
   ============================================================ */
@media (max-width: 380px){
  .nav-mark-name{ font-size: 1.08rem; }
  .nav-mark-role{ display: none; }
  .site-nav, .site-nav.scrolled{ padding: .5rem .5rem .5rem .9rem; }
  .hero-doctor-creds{ font-size: .66rem; letter-spacing: 0; }
  .treatment-card{ padding: 1.1rem 2.9rem 1.1rem 2.5rem; }
  .treatment-card h3{ font-size: 1.1rem; }
  .faq-q{ font-size: 1.02rem; }
}

/* ============================================================
   SHORT LANDSCAPE — the hero has to fit in very little height
   ============================================================ */
@media (max-height: 560px) and (orientation: landscape){
  .hero-portrait{ width: min(28vw, 210px); }
  .portrait-frame{ padding: 7px; }
  .hero-meta{ padding: .6rem .8rem; margin-top: .7rem; }
  .hero-doctor-name{ font-size: 1.05rem; }
  .hero-doctor-role{ font-size: .6rem; margin-top: .2rem; }
  .hero-doctor-creds{ font-size: .62rem; margin-top: .3rem; padding-top: .55rem; }
  .hero-scroll-cue{ display: none; }
}

/* ============================================================
   COARSE POINTERS — hover lifts never fire on touch, so the
   press state has to carry the feedback instead
   ============================================================ */
@media (hover: none){
  .cta-solid:hover, .cta-outline:hover, .cta-link:hover,
  .nav-links .nav-cta:hover, .contact-submit:hover,
  .factor-card:hover, .treatment-card:hover,
  .foot-socials a:hover, .back-to-top:hover,
  .m-in.contact-submit:hover, .m-in.back-to-top:hover{ transform: none; }

  .cta-solid:active, .nav-links .nav-cta:active,
  .contact-submit:active{ box-shadow: var(--clay-press-d); }
  .cta-outline:active, .cta-link:active,
  .treatment-card:active, .factor-card:active{ box-shadow: var(--clay-press); }
}