/* Daher’s Hybrid Training V4 — public website refinements only.
   This file is loaded exclusively by the five public pages.
   The coach admin, client app and login keep their V3 source files unchanged. */

/* A restrained editorial scale, especially on laptop screens. */
h1 {font-size:clamp(68px,8.5vw,130px)}
h2 {font-size:clamp(37px,4.6vw,66px)}
h3 {font-size:clamp(26px,2.7vw,37px)}
.section {padding:86px 0}
.section-head {margin-bottom:34px;gap:30px}
.section-head p {max-width:390px}
.pill {margin-bottom:10px}
.eyebrow {font-size:10px}
.page-hero {padding:83px 0 52px}
.page-hero h1 {font-size:clamp(55px,7.3vw,96px);max-width:920px}
.page-hero p {font-size:14px;line-height:1.7;margin-top:18px}
.page-hero + .section {padding-top:72px}

/* Homepage: shorter photographic cover, efficient content rhythm. */
.hero {min-height:clamp(640px,85svh,810px)}
.hero .wrap {padding-top:160px;padding-bottom:78px}
.hero h1 {font-size:clamp(74px,9.3vw,134px)}
.hero .lead {font-size:14px;line-height:1.7;margin:17px 0 25px}
.strip-cell {padding-top:19px;padding-bottom:19px}
.strip-cell strong {font-size:22px}
.step-card {padding:23px;min-height:202px}
.step-num {font-size:38px}
.step-card h3 {font-size:26px}
.focus-card {min-height:0;height:390px}
.focus-card .body {padding:24px}
.focus-card h3 {font-size:33px}
.focus-card .body p {font-size:12px}
.focus-card img {transition:transform 1.1s cubic-bezier(.2,.65,.22,1),filter 1.1s}
.focus-card:hover img {transform:scale(1.035)}
.coach-grid {gap:6%}
.coach-grid img {height:480px;object-position:center 24%}
/* Keep Daher's face in frame in the About portrait. */
.coach-grid > img[src$='daher-05.jpg'] {object-position:center 0%}
.coach-grid h2 {margin:12px 0 17px}
.coach-grid p {font-size:14px;line-height:1.8}
.coach-quote {font-size:16px;margin-top:25px}
.line-link {margin-top:26px}
.banner-cta {padding:51px 0}
.banner-cta h2 {font-size:clamp(39px,5vw,65px)}

/* Inner pages: cards and gallery shouldn't overpower the copy. */
.plan {padding:27px;min-height:365px}
.plan h3 {font-size:50px;margin-top:20px}
.plan p {margin-top:13px}
.feature-item {padding:18px 6px 18px 0}
.feature-item h4 {font-size:22px}
.photo-grid .img-a,.photo-grid .img-b {height:380px}
.photo-grid .img-c,.photo-grid .img-d,.photo-grid .img-e {height:275px}
.faq-item summary {padding:18px 0;font-size:14px}
.faq-item p {font-size:13px}
.contact-details h2 {font-size:clamp(37px,4vw,58px)}
.form-card {padding:30px}

/* One compact, consistent footer across all public routes. */
.footer {padding:35px 0 18px}
.footer-grid {grid-template-columns:1.65fr 1fr .9fr;gap:32px}
.footer .brand {font-size:31px}
.footer .brand em {font-size:8px;margin-top:6px}
.footer p {font-size:11px;line-height:1.6;max-width:300px;margin-top:13px!important}
.footer-kicker {font-size:9px;margin-bottom:12px}
.footer-links {gap:8px;font-size:11px}
.footer-bottom {margin-top:27px;padding-top:15px;font-size:10px}

/* Home-only motion: subtle and responsive; safely bypassed by reduced-motion. */
@media (prefers-reduced-motion:no-preference) {
  .home-page .hero>img {animation:hero-breathe 18s ease-in-out infinite alternate;will-change:transform}
  .home-page .hero .eyebrow {animation:hero-in .66s .05s both}
  .home-page .hero h1 {animation:hero-in .85s .16s both}
  .home-page .hero .lead {animation:hero-in .8s .3s both}
  .home-page .hero .hero-bottom {animation:hero-in .8s .42s both}
  .home-page .reveal.visible {animation:content-in .76s cubic-bezier(.2,.8,.3,1) both}
  .home-page .step-card:nth-child(2).visible,
  .home-page .focus-card:nth-child(2).visible {animation-delay:.10s}
  .home-page .step-card:nth-child(3).visible,
  .home-page .focus-card:nth-child(3).visible {animation-delay:.20s}
  .home-page.motion-ready .strip-cell,
  .home-page.motion-ready .banner-cta .pill,
  .home-page.motion-ready .banner-cta h2,
  .home-page.motion-ready .banner-cta .btn {opacity:0;transform:translateY(14px)}
  .home-page .strip-cell.is-inview,
  .home-page .banner-cta .is-inview {animation:content-in .75s cubic-bezier(.16,.8,.3,1) forwards}
  .home-page .strip-cell:nth-child(2).is-inview {animation-delay:.09s}
  .home-page .strip-cell:nth-child(3).is-inview {animation-delay:.18s}
  .home-page .banner-cta h2.is-inview {animation-delay:.1s}
  .home-page .banner-cta .btn.is-inview {animation-delay:.18s}
  @keyframes hero-in {from {opacity:0;transform:translateY(20px)}to {opacity:1;transform:none}}
  @keyframes content-in {from {opacity:0;transform:translateY(17px)}to {opacity:1;transform:none}}
  @keyframes hero-breathe {from {transform:scale(1.005)}to {transform:scale(1.045)}}
}

@media (max-width:900px) {
  .section {padding:71px 0}
  .page-hero {padding-top:130px;padding-bottom:39px}
  .page-hero h1 {font-size:clamp(45px,9vw,76px)}
  .page-hero + .section {padding-top:54px}
  .hero {min-height:670px}
  .coach-grid img {height:390px}
  .photo-grid .img-a,.photo-grid .img-b {height:320px}
  .photo-grid .img-c,.photo-grid .img-d,.photo-grid .img-e {height:235px}
  .footer-grid {gap:24px}
}

@media (max-width:700px) {
  :root {--mobile-pad:22px}
  .wrap {width:calc(100% - var(--mobile-pad)*2)}
  .site-header,.site-header.solid {height:67px}
  .site-header .brand {font-size:22px}
  .site-header .brand em {font-size:7px;margin-top:6px}
  .site-header .menu-toggle {width:39px;height:39px}
  .site-header .nav-menu {padding-top:98px}
  .nav-menu > a {font-size:clamp(31px,8.9vw,45px);padding:7px 0}
  .nav-menu .mobile-menu-intro {margin-bottom:12px}
  .nav-menu .mobile-menu-bottom {padding-top:16px}

  /* All public text uses a consistent, more restrained mobile scale. */
  .section {padding:54px 0}
  .section-head {margin-bottom:22px}
  .section-head h2 {font-size:clamp(32px,8.4vw,43px);line-height:1.02}
  .section-head p {font-size:12.5px;line-height:1.65;margin-top:12px}
  .pill {font-size:9px;margin-bottom:9px}
  .eyebrow {font-size:9px}
  .section-head p,.coach-grid p,.page-hero p {text-wrap:pretty}
  .page-hero {padding:109px 0 33px}
  .page-hero h1 {font-size:clamp(39px,9.7vw,52px);line-height:1}
  .page-hero p {font-size:12.5px;line-height:1.65;margin-top:12px}
  .page-hero + .section {padding-top:41px}

  /* Keep personality without consuming an entire phone screen. */
  .hero {min-height:610px;height:83svh;max-height:760px}
  .hero>img {object-position:57% 23%}
  .hero .wrap {padding:155px 0 30px}
  .hero h1 {font-size:clamp(56px,15.2vw,76px);line-height:.84}
  .hero .lead {font-size:12px;line-height:1.65;max-width:325px;margin:17px 0 20px}
  .hero .btn {min-height:44px}
  .strip-cell {padding:14px 4px!important}
  .strip-cell strong {font-size:clamp(10px,2.9vw,12px);white-space:normal;line-height:1.2}
  .step-card {grid-template-columns:43px minmax(0,1fr);gap:12px;padding:14px 0!important}
  .step-num {font-size:29px}
  .step-card h3 {font-size:24px;margin:0 0 5px}
  .step-card p {font-size:12px}

  /* Training cards: all captions outside photos, no image overlay, more compact. */
  .section.alt .cols3:has(.focus-card) {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .section.alt .focus-card,
  .section.alt .cols3:has(.focus-card) > .focus-card:first-child,
  .section.alt .cols3:has(.focus-card) > .focus-card:not(:first-child) {
    display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;
    overflow:hidden;position:relative;height:auto;max-height:none;min-height:0;aspect-ratio:auto;
    border:1px solid #33444c;background:#17242b;
  }
  .focus-card:after {display:none}
  .section.alt .focus-card img {
    position:relative;inset:auto;display:block;flex:0 0 auto;width:100%;height:135px;
    object-fit:cover;object-position:center 31%;filter:saturate(.86);
    transform:none!important;
  }
  .section.alt .cols3:has(.focus-card) > .focus-card:first-child {grid-column:1 / -1}
  .section.alt .cols3:has(.focus-card) > .focus-card:first-child img {height:182px;object-position:center 25%}
  .section.alt .focus-card .body,
  .section.alt .cols3:has(.focus-card) > .focus-card:not(:first-child) .body {
    position:relative;z-index:1;padding:13px 13px 15px;flex:1;display:flex;flex-direction:column;
    justify-content:flex-start;min-width:0;background:#17242b;
  }
  .section.alt .focus-card h3,
  .section.alt .cols3:has(.focus-card) > .focus-card:not(:first-child) h3 {
    font-size:clamp(21px,5.5vw,27px);line-height:1.02;overflow-wrap:normal;word-break:normal;
  }
  .section.alt .cols3:has(.focus-card) > .focus-card:first-child h3 {font-size:27px}
  .section.alt .focus-card:nth-child(3) h3 {font-size:clamp(18px,4.8vw,22px)!important}
  .section.alt .focus-card .pill,
  .section.alt .cols3:has(.focus-card) > .focus-card:not(:first-child) .pill {
    display:block;margin:0 0 7px;font-size:9px;letter-spacing:.12em;
  }
  .section.alt .focus-card .body p,
  .section.alt .cols3:has(.focus-card) > .focus-card:not(:first-child) .body p {
    font-size:11px;line-height:1.5;color:#c1cfd2;margin:7px 0 0;
  }

  /* Meet Daher: photograph is an accent, not an entire page. */
  .coach-grid {gap:19px}
  .coach-grid img {width:100%;height:248px;aspect-ratio:auto;object-fit:cover;object-position:center 29%}
  .coach-grid > img[src$='daher-05.jpg'] {object-position:center 0%}
  .coach-grid h2 {font-size:clamp(34px,8.6vw,44px);margin:10px 0 13px;line-height:1.02}
  .coach-grid p {font-size:12.5px;line-height:1.67;margin-bottom:10px}
  .coach-quote {font-size:13px;line-height:1.5;margin-top:17px}
  .line-link {margin-top:17px;font-size:10px}
  .section.alt .coach-grid:has(img) > img {height:230px;aspect-ratio:auto}

  .banner-cta {padding:31px 0 34px}
  .banner-cta h2 {font-size:clamp(36px,9.6vw,49px);line-height:.96}
  .banner-cta .pill {margin-bottom:11px}
  .banner-cta .btn {margin-top:19px}

  .plan {padding:20px;min-height:0}
  .plan h3 {font-size:43px;margin-top:11px}
  .plan .plan-name {font-size:12px}
  .plan p {font-size:12px;line-height:1.65;margin:13px 0}
  .plan li {font-size:11px;padding:9px 0}
  .feature-item {padding:14px 0 10px}
  .feature-item h4 {font-size:20px}
  .feature-item p {font-size:11px}
  .photo-grid .img-a {height:245px}
  .photo-grid .img-b,.photo-grid .img-c,.photo-grid .img-d {height:165px}
  .photo-grid .img-e {height:215px}
  .faq-item summary {padding:17px 0;font-size:12.5px;line-height:1.5}
  .faq-item p {font-size:12px;line-height:1.6}
  .contact-layout {gap:28px}
  .contact-layout .form-card {padding:20px 17px}
  .contact-details h2 {font-size:30px}
  .form-card h3 {font-size:28px!important;margin-bottom:15px!important}

  /* Mobile footer: <300px in a typical phone viewport, all links remain accessible. */
  .footer {padding:25px 0 13px}
  .footer-grid {grid-template-columns:1fr 1fr;gap:19px 15px}
  .footer-grid > div:first-child {grid-column:1 / -1;padding-bottom:14px}
  .footer .brand {font-size:24px}
  .footer .brand em {font-size:7px;margin-top:5px}
  .footer p {font-size:10.5px;line-height:1.5;max-width:320px;margin-top:9px!important}
  .footer-kicker {font-size:9px;margin-bottom:10px}
  .footer-links {gap:7px;font-size:11px;line-height:1.45}
  .footer-bottom {margin-top:21px;padding-top:12px;font-size:9px;gap:7px}
}

@media(max-width:365px) {
  :root {--mobile-pad:18px}
  .hero h1 {font-size:54px}
  .section-head h2 {font-size:32px}
  .page-hero h1 {font-size:37px}
  .section.alt .cols3:has(.focus-card) {grid-template-columns:1fr}
  .section.alt .cols3:has(.focus-card) > .focus-card:first-child {grid-column:auto}
  .section.alt .focus-card img,.section.alt .cols3:has(.focus-card) > .focus-card:first-child img {height:155px}
  .section.alt .focus-card .body {padding:12px 13px}
}
@media (prefers-reduced-motion:reduce) {
  .home-page .hero>img {animation:none!important}
  .home-page .strip-cell,.home-page .banner-cta * {opacity:1!important;transform:none!important}
}