:root{
      --black:#050505;
      --panel:#0d0d10;
      --panel2:#151218;
      --white:#f7f7f5;
      --muted:#b7b7b7;
      --lime:#72ff00;
      --purple:#65009b;
      --purple2:#3b005c;
      --line:rgba(255,255,255,.13);
      --max:1240px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--black);color:var(--white);font-family:Arial,Helvetica,sans-serif;line-height:1.5}
    a{color:inherit;text-decoration:none}
    img,video{max-width:100%;display:block}
    button{font:inherit}
    .wrap{width:min(var(--max),calc(100% - 42px));margin:auto}
    .eyebrow{font-size:.74rem;letter-spacing:.25em;text-transform:uppercase;font-weight:800;color:var(--lime)}
    h1,h2,h3{margin:0;line-height:.95;text-transform:uppercase}
    h1{font-size:clamp(3.2rem,8vw,7.8rem);letter-spacing:-.055em}
    h2{font-size:clamp(2.2rem,5vw,4.8rem);letter-spacing:-.04em}
    h3{font-size:1.25rem}
    p{color:#d7d7d7}
    .lime{color:var(--lime)}
    .purple{color:#a934e5}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;border-radius:999px;padding:15px 24px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;border:1px solid transparent;transition:.2s}
    .btn:hover{transform:translateY(-2px)}
    .btn-primary{background:var(--lime);color:#050505}
    .btn-secondary{border-color:#8d22c4;background:linear-gradient(135deg,#4a006f,#7c0daf)}
    .btn-ghost{border-color:var(--line)}
    .section{padding:88px 0;border-top:1px solid var(--line)}
    .section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:34px}
    .section-head p{max-width:600px;margin:10px 0 0}

    header{position:sticky;top:0;z-index:20;background:rgba(3,3,4,.91);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
    nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:22px}
    .logo{width:185px}
    .navlinks{display:flex;gap:24px;align-items:center;font-size:.78rem;text-transform:uppercase;font-weight:800}
    .navlinks a:hover{color:var(--lime)}
    .menu{display:none;background:none;color:white;border:1px solid var(--line);border-radius:8px;padding:9px 12px}

    .hero{min-height:760px;position:relative;overflow:hidden;display:flex;align-items:center}
    .hero:before{content:"";position:absolute;inset:0;background:
      radial-gradient(circle at 73% 35%,rgba(103,0,155,.55),transparent 29%),
      linear-gradient(90deg,#050505 0%,rgba(5,5,5,.93) 36%,rgba(5,5,5,.30) 68%,#050505 100%)}
    .hero:after{content:"";position:absolute;right:8%;top:11%;width:340px;height:340px;border:1px solid rgba(114,255,0,.17);transform:rotate(45deg)}
    .hero-photo{position:absolute;right:8%;bottom:0;height:92%;width:auto;max-width:54%;object-fit:contain;filter:drop-shadow(0 25px 40px rgba(0,0,0,.6))}
    .hero-content{position:relative;z-index:2;max-width:760px;padding:80px 0}
    .hero h1 span{display:block}
    .hero-copy{max-width:570px;font-size:1.12rem;margin:24px 0 30px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .domain{margin-top:30px;color:#9b9b9b;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase}

    .about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}
    .portrait{position:relative;min-height:620px}
    .portrait:before{content:"";position:absolute;left:-18px;top:25px;width:74%;height:78%;border:2px solid var(--purple)}
    .portrait img{position:relative;height:620px;width:100%;object-fit:cover;object-position:center top}
    .quote{font-size:1.2rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:white;border-left:4px solid var(--lime);padding-left:18px;margin:28px 0}
    .pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:30px}
    .pillar{border:1px solid var(--line);background:linear-gradient(145deg,#111,#17121b);padding:20px}
    .pillar b{display:block;color:var(--lime);text-transform:uppercase;margin-bottom:6px}

    .workouts{background:linear-gradient(180deg,#050505,#0d0710)}
    .video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .video-card{background:#101012;border:1px solid var(--line);overflow:hidden}
    .video-card video{aspect-ratio:9/16;width:100%;max-height:520px;object-fit:cover;background:#000}
    .video-info{padding:20px}
    .video-info small{color:var(--lime);font-weight:800;text-transform:uppercase;letter-spacing:.1em}
    .video-info p{font-size:.9rem;margin-bottom:0}
    .note{margin-top:18px;color:#999;font-size:.84rem}

    .faith{position:relative;overflow:hidden;background:
      radial-gradient(circle at 15% 20%,rgba(101,0,155,.5),transparent 33%),
      linear-gradient(120deg,#13001e,#09090b 60%)}
    .faith-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:55px;align-items:center}
    .verse-card{border:1px solid rgba(114,255,0,.35);background:rgba(0,0,0,.35);padding:34px;box-shadow:0 0 45px rgba(114,255,0,.05)}
    .verse{font-family:Georgia,serif;font-size:clamp(1.55rem,3vw,2.35rem);line-height:1.25;color:white;margin:10px 0 18px}
    .reference{color:var(--lime);font-weight:900;text-transform:uppercase;letter-spacing:.12em}
    .placeholder{font-size:.8rem;color:#aaa;border-top:1px solid var(--line);padding-top:18px;margin-top:22px}

    .split{display:grid;grid-template-columns:1fr 1fr}
    .events,.resources{padding:70px clamp(32px,4vw,72px);}
    .events{background:linear-gradient(135deg,#500079,#180024)}
    .resources{background:#0c0c0f}
    .empty-card{margin-top:26px;border:1px solid var(--line);padding:28px;background:rgba(0,0,0,.28)}
    .empty-card strong{font-size:1.25rem;text-transform:uppercase}
    .resource-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:25px}
    .resource{border:1px solid var(--line);padding:22px}
    .resource .icon{font-size:1.8rem;margin-bottom:15px}
    .resource span{font-size:.75rem;color:#8d8d8d}

    .connect{padding:80px 0;background:
      linear-gradient(90deg,rgba(0,0,0,.93),rgba(0,0,0,.56)),
      url("../media/image-01-b62364f6c114.jpg") center 34%/cover no-repeat}
    .connect-inner{max-width:690px}
    .socials{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
    .social{border:1px solid var(--line);padding:10px 14px;border-radius:999px;font-weight:800}

    footer{padding:38px 0 48px;border-top:1px solid var(--line);background:#050505}
    .footer-grid{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}
    footer .logo{width:145px}
    footer p{font-size:.8rem;color:#888}

    @media(max-width:900px){
      .navlinks{display:none;position:absolute;left:20px;right:20px;top:72px;background:#0b0b0d;border:1px solid var(--line);padding:20px;flex-direction:column;align-items:flex-start}
      .navlinks.open{display:flex}.menu{display:block}
      .hero{min-height:800px;align-items:flex-end}
      .hero:before{background:linear-gradient(0deg,#050505 6%,rgba(5,5,5,.68) 55%,rgba(5,5,5,.22) 100%)}
      .hero-photo{right:-12%;top:30px;height:64%;max-width:100%;opacity:.92}
      .hero-content{padding:390px 0 55px}
      .about-grid,.faith-grid{grid-template-columns:1fr}
      .portrait{min-height:520px}.portrait img{height:520px}
      .video-grid{grid-template-columns:1fr}
      .video-card video{max-height:620px}
      .split{grid-template-columns:1fr}
      .events,.resources{padding:60px 22px}
    }
    @media(max-width:560px){
      .wrap{width:min(var(--max),calc(100% - 28px))}
      nav{height:72px}.logo{width:145px}
      .hero{min-height:760px}.hero-content{padding-top:365px}
      h1{font-size:3.35rem}
      .section{padding:65px 0}
      .section-head{display:block}
      .pillars,.resource-grid{grid-template-columns:1fr}
      .portrait,.portrait img{height:450px;min-height:450px}
      .footer-grid{grid-template-columns:1fr}
    }
  
    .faith-carousel-wrap{position:relative;min-width:0}
    .faith-carousel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
      scrollbar-width:none;padding:6px 3px 18px;scroll-behavior:smooth}
    .faith-carousel::-webkit-scrollbar{display:none}
    .faith-carousel .verse-card{flex:0 0 min(86%,520px);scroll-snap-align:start}
    .faith-controls{display:flex;align-items:center;gap:10px;margin-top:14px}
    .faith-arrow{width:46px;height:46px;border-radius:50%;border:1px solid rgba(114,255,0,.45);
      background:#09090b;color:var(--lime);font-size:1.35rem;cursor:pointer}
    .faith-arrow:hover{background:var(--lime);color:#050505}
    .faith-count{font-size:.78rem;color:#aaa;text-transform:uppercase;letter-spacing:.14em;margin-left:6px}
    .sample-badge{display:inline-block;margin-bottom:14px;padding:5px 9px;border:1px solid rgba(255,255,255,.16);
      font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#aaa}
    @media(max-width:900px){
      .faith-carousel .verse-card{flex-basis:88%}
    }
    @media(max-width:560px){
      .faith-carousel .verse-card{flex-basis:94%;padding:26px}
    }

  
    /* V3: graphic treatment inspired by the approved mockup */
    body{background:#030303}
    .hero{background:
      linear-gradient(90deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.78) 38%,rgba(24,0,35,.42) 72%,rgba(0,0,0,.88) 100%),
      radial-gradient(circle at 78% 35%,rgba(133,0,200,.65),transparent 28%),
      repeating-linear-gradient(115deg,transparent 0 55px,rgba(122,0,174,.08) 56px 58px,transparent 59px 105px)}
    .hero-graphic-word{position:absolute;right:2%;top:17%;z-index:1;font-size:clamp(3rem,6vw,7rem);
      font-weight:1000;font-style:italic;line-height:.82;text-align:right;text-transform:uppercase;
      color:#f0c7ff;transform:rotate(-7deg);opacity:.92;text-shadow:0 0 30px rgba(140,0,210,.35)}
    .hero-graphic-word span{display:block;color:var(--lime)}
    .hero-swipe{position:absolute;right:-8%;bottom:-11%;width:55%;height:36%;
      background:linear-gradient(135deg,transparent 12%,rgba(103,0,155,.52) 13% 19%,transparent 20% 28%,rgba(114,255,0,.10) 29% 32%,transparent 33%);
      transform:rotate(-8deg);filter:blur(.2px);pointer-events:none}

    .benefit-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
      background:linear-gradient(90deg,#070707,#100814,#070707)}
    .benefit-grid{display:grid;grid-template-columns:repeat(4,1fr)}
    .benefit{padding:30px 25px;text-align:center;border-right:1px solid var(--line);position:relative}
    .benefit:last-child{border-right:0}
    .benefit-icon{font-size:2.25rem;line-height:1;color:var(--lime);margin-bottom:12px}
    .benefit b{display:block;text-transform:uppercase;font-size:.85rem;letter-spacing:.04em}
    .benefit small{display:block;color:#8e8e8e;margin-top:5px}

    #about{position:relative;overflow:hidden;background:
      linear-gradient(90deg,rgba(18,0,27,.96),rgba(4,4,5,.96)),
      repeating-linear-gradient(-20deg,transparent 0 40px,rgba(255,255,255,.03) 41px 43px)}
    #about:before{content:"MEET T";position:absolute;left:-2%;top:6%;font-size:clamp(7rem,17vw,18rem);
      font-weight:1000;letter-spacing:-.08em;color:rgba(255,255,255,.025);line-height:1}
    .brush-note{font-size:clamp(2rem,4vw,4.5rem);font-weight:1000;font-style:italic;
      text-transform:uppercase;color:#d5a4ea;transform:rotate(-4deg);line-height:.9;margin:24px 0}
    .brush-note .slash{color:var(--lime)}

    .workouts{position:relative;overflow:hidden}
    .workouts:before{content:"WORKOUT";position:absolute;left:-1%;top:-1%;font-size:clamp(8rem,19vw,20rem);
      font-weight:1000;letter-spacing:-.09em;color:rgba(255,255,255,.035);line-height:1}
    .video-card{box-shadow:0 18px 50px rgba(0,0,0,.35);border-radius:7px}
    .video-card video{border-bottom:3px solid var(--purple)}

    .faith{background:
      linear-gradient(90deg,rgba(0,0,0,.96),rgba(12,0,18,.86)),
      radial-gradient(circle at 82% 45%,rgba(114,255,0,.09),transparent 20%)}
    .faith:before{content:"FAITH";position:absolute;right:-1%;top:2%;font-size:clamp(8rem,18vw,18rem);
      font-weight:1000;color:rgba(255,255,255,.025);transform:rotate(-7deg)}
    .faith-title-script{font-size:clamp(2.4rem,5vw,5.2rem);font-style:italic;font-weight:1000;
      color:#b13aee;line-height:.82;text-transform:uppercase;margin:18px 0}
    .faith-title-script span{display:block;color:white}
    .verse-card{border-radius:9px;background:
      linear-gradient(145deg,rgba(22,22,24,.98),rgba(8,8,9,.98));
      border-color:rgba(132,23,190,.7);box-shadow:0 14px 40px rgba(0,0,0,.35)}
    .verse-card:nth-child(2){border-color:rgba(114,255,0,.5)}
    .verse-card:nth-child(3){border-color:rgba(185,48,235,.65)}

    .events{position:relative;overflow:hidden;background:
      radial-gradient(circle at 15% 55%,rgba(151,0,214,.55),transparent 30%),
      linear-gradient(135deg,#36004e,#100015)}
    .events:after{content:"SHOW UP.";position:absolute;right:-1%;bottom:1%;font-size:clamp(3rem,7vw,7rem);
      font-weight:1000;font-style:italic;color:rgba(255,255,255,.055);transform:rotate(-8deg)}
    .resources{position:relative;background:
      linear-gradient(135deg,#0c0c0f,#09090a),
      repeating-linear-gradient(45deg,transparent 0 25px,rgba(114,255,0,.025) 26px 27px)}
    .resource{position:relative;overflow:hidden;border-radius:7px;background:linear-gradient(145deg,#101012,#080809)}
    .resource:after{content:"";position:absolute;width:50px;height:4px;background:var(--lime);right:-8px;bottom:9px;transform:rotate(-18deg)}

    .connect{position:relative;overflow:hidden}
    .connect:after{content:"CONSISTENCY\A CREATES\A CHANGE.";white-space:pre;position:absolute;right:4%;top:18%;
      font-size:clamp(1.6rem,3vw,3.1rem);line-height:.9;font-weight:1000;font-style:italic;
      color:#d3a3e8;transform:rotate(-7deg);text-align:right}
    .connect:before{content:"";position:absolute;right:3%;top:55%;width:190px;height:7px;background:var(--lime);
      transform:rotate(-8deg);z-index:1}

    .paint-edge{position:absolute;width:260px;height:90px;pointer-events:none;opacity:.65;
      background:repeating-linear-gradient(-10deg,var(--purple) 0 8px,transparent 9px 17px);
      clip-path:polygon(0 35%,100% 0,88% 62%,12% 100%)}
    .paint-edge.one{left:-90px;bottom:20px;transform:rotate(8deg)}
    .paint-edge.two{right:-90px;top:30px;transform:rotate(-8deg)}

    @media(max-width:900px){
      .hero-graphic-word{top:12%;right:2%;font-size:3.1rem;opacity:.55}
      .benefit-grid{grid-template-columns:repeat(2,1fr)}
      .benefit:nth-child(2){border-right:0}
      .benefit:nth-child(-n+2){border-bottom:1px solid var(--line)}
      .connect:after,.connect:before{display:none}
    }
    @media(max-width:560px){
      .benefit-grid{grid-template-columns:1fr 1fr}
      .benefit{padding:23px 12px}
      .hero-graphic-word{font-size:2.5rem}
    }


    /* V4 actual gym artwork */
    .hero{
      background-image:
        linear-gradient(90deg,rgba(0,0,0,.93) 0%,rgba(0,0,0,.76) 30%,rgba(0,0,0,.22) 58%,rgba(0,0,0,.08) 100%),
        url("../media/purple-gym-discipline-builds-freedom.png") !important;
      background-size:cover !important;
      background-position:center center !important;
      background-repeat:no-repeat !important;
    }
    .hero:before{
      background:linear-gradient(90deg,rgba(0,0,0,.50) 0%,rgba(0,0,0,.18) 45%,rgba(0,0,0,0) 72%) !important;
    }
    .hero-graphic-word{display:none !important}
    .hero-swipe{display:none !important}

    .connect{
      background-image:
        linear-gradient(90deg,rgba(0,0,0,.68),rgba(0,0,0,.30),rgba(0,0,0,.58)),
        url("../media/black-gym-consistency-change.png") !important;
      background-position:center center !important;
      background-size:cover !important;
      background-repeat:no-repeat !important;
      min-height:420px;
      display:flex;
      align-items:center;
    }
    .connect:after,.connect:before{display:none !important}
    .connect-inner{
      background:rgba(0,0,0,.70);
      border:1px solid rgba(255,255,255,.14);
      padding:34px;
      backdrop-filter:blur(4px);
    }
    @media(max-width:900px){
      .hero{background-position:58% center !important}
      .connect{background-position:center center !important}
    }


    /* V5 requested positioning refinements */
    .hero{
      /* Shift the purple gym artwork left so the right-wall slogan is fully visible. */
      background-position: 58% center !important;
    }

    .connect{
      background-position:center center !important;
    }
    .connect .wrap{
      width:100% !important;
      max-width:none !important;
      display:flex;
      justify-content:center;
      padding-left:22px;
      padding-right:22px;
    }
    .connect-inner{
      width:min(860px,92vw);
      max-width:860px !important;
      margin:0 auto;
      text-align:center;
    }
    .connect .socials{
      justify-content:center;
    }

    @media(max-width:900px){
      .hero{background-position:61% center !important;}
      .connect-inner{width:min(92vw,760px);}
    }


    /* V6 — Audiowide brand typography */
    :root{--display-font:"Audiowide","Arial Black",Arial,sans-serif}
    h1,h2,h3,
    .eyebrow,
    .btn,
    .navlinks,
    .domain,
    .quote,
    .pillar b,
    .video-info small,
    .reference,
    .sample-badge,
    .faith-count,
    .benefit b,
    .brush-note,
    .faith-title-script,
    .resource span,
    .social,
    .empty-card strong,
    footer .eyebrow{
      font-family:var(--display-font);
    }

    /* Recreate the mockup's wide futuristic headline treatment */
    .hero h1{
      font-family:var(--display-font);
      font-weight:400;
      letter-spacing:.015em;
      line-height:1.04;
      text-transform:uppercase;
    }
    .hero h1 span{letter-spacing:.01em}
    h2{
      font-family:var(--display-font);
      font-weight:400;
      letter-spacing:.005em;
      line-height:1.05;
    }
    h3{
      font-family:var(--display-font);
      font-weight:400;
      letter-spacing:.015em;
      line-height:1.15;
    }
    .btn{
      font-weight:400;
      letter-spacing:.015em;
    }
    .navlinks{
      font-weight:400;
      letter-spacing:.02em;
    }
    .eyebrow{
      font-weight:400;
      letter-spacing:.20em;
    }
    .benefit b,.pillar b{font-weight:400}


    .benefit-icon svg{display:block;margin:0 auto;color:var(--lime)}

/* V8 responsive layout fixes */
.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split>*{min-width:0}
.events,.resources{box-sizing:border-box;padding:70px clamp(32px,4vw,72px)!important}
.events>*,.resources>*{max-width:720px}
.connect .socials{justify-content:center}
@media(max-width:1100px){.split{grid-template-columns:1fr!important}.events,.resources{padding:64px clamp(28px,6vw,64px)!important}.events>*,.resources>*{max-width:820px;margin-left:auto;margin-right:auto}}
@media(max-width:700px){html,body{max-width:100%;overflow-x:hidden}.wrap{width:min(calc(100% - 32px),var(--max))}.hero{min-height:auto}.hero h1{font-size:clamp(2.7rem,14vw,5rem)!important;line-height:.94!important}.hero .actions{flex-wrap:wrap}.benefit-grid{grid-template-columns:1fr 1fr!important}.video-grid{grid-template-columns:1fr!important}video,iframe{max-width:100%}.events,.resources{padding:52px 20px!important}.events h2,.resources h2{font-size:clamp(2.25rem,12vw,4rem)!important;line-height:.96!important;overflow-wrap:normal;word-break:normal}.resource-grid{grid-template-columns:1fr!important}.btn{max-width:100%;white-space:normal;text-align:center}.connect{min-height:auto}.connect-inner{width:100%!important;padding-left:20px;padding-right:20px;box-sizing:border-box}.connect h2{font-size:clamp(2.5rem,13vw,5rem)!important;line-height:.95!important}.connect .socials{display:flex;justify-content:center;width:100%}}
@media(max-width:430px){.benefit-grid{grid-template-columns:1fr!important}.events,.resources{padding-left:18px!important;padding-right:18px!important}.btn{width:100%}}


/* ===== V8 RESPONSIVE / MOBILE PRODUCTION PASS ===== */
.split>*,
.benefit-grid>*,
.resource-grid>*,
.video-grid>*{min-width:0}

.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.events,.resources{box-sizing:border-box;padding:70px clamp(32px,4vw,72px)!important}
.events>*,.resources>*{max-width:720px}

@media(max-width:1100px){
  .split{grid-template-columns:1fr!important}
  .events,.resources{padding:64px clamp(28px,6vw,64px)!important}
  .events>*,.resources>*{max-width:820px;margin-left:auto;margin-right:auto}
}

@media(max-width:700px){
  html,body{max-width:100%;overflow-x:hidden}
  .wrap{width:min(100% - 32px,var(--max))}
  .hero{min-height:auto}
  .hero h1{font-size:clamp(2.7rem,14vw,5rem)!important;line-height:.94!important}
  .hero-actions{flex-wrap:wrap}
  .benefit-grid{grid-template-columns:1fr 1fr!important}
  .video-grid,.workout-grid{grid-template-columns:1fr!important}
  video,iframe{max-width:100%}
  .events,.resources{padding:52px 20px!important}
  .events h2,.resources h2{font-size:clamp(2.25rem,12vw,4rem)!important;line-height:.96!important}
  .resource-grid{grid-template-columns:1fr!important}
  .btn{max-width:100%;white-space:normal;text-align:center}
  .connect-inner{width:100%!important;padding-left:20px;padding-right:20px;box-sizing:border-box}
  .connect h2{font-size:clamp(2.5rem,13vw,5rem)!important;line-height:.95!important}
}

@media(max-width:430px){
  .benefit-grid{grid-template-columns:1fr!important}
  .events,.resources{padding-left:18px!important;padding-right:18px!important}
  .btn{width:100%}
}

/* ===== V9 PANORAMIC ARTWORK PRESERVATION =====
   These gym images contain important wall typography, so they must not be
   cropped like ordinary photographic backgrounds.
*/

/* HERO — preserve the full purple panoramic artwork */
.hero{
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.54) 34%,rgba(0,0,0,.12) 67%,rgba(0,0,0,.05) 100%),
    url("../media/purple-gym-discipline-builds-freedom.png") !important;
  background-size:100% 100% !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

/* STAY CONNECTED — preserve both wall messages */
.connect{
  background-image:
    linear-gradient(rgba(0,0,0,.24),rgba(0,0,0,.24)),
    url("../media/black-gym-consistency-change.png") !important;
  background-size:100% 100% !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

/* On desktop/tablet, keep the section ratio close to the 2048x768 artwork.
   This prevents visible distortion while allowing content to determine a
   sensible minimum height. */
@media (min-width:701px){
  .hero{
    min-height:min(760px,37.5vw) !important;
    aspect-ratio:8 / 3;
  }
  .connect{
    min-height:min(560px,37.5vw) !important;
    aspect-ratio:8 / 3;
  }
}

/* Mobile: a 2.67:1 panorama cannot fill a portrait screen without either
   cropping or distortion. Show the COMPLETE artwork as an image band, then
   let the section's dark background extend naturally around the content. */
@media (max-width:700px){
  .hero,
  .connect{
    aspect-ratio:auto !important;
    background-color:#050505 !important;
    background-size:100% auto !important;
    background-position:center top !important;
    background-repeat:no-repeat !important;
  }

  .hero{
    min-height:0 !important;
    padding-top:clamp(250px,37.5vw,320px);
  }

  .connect{
    min-height:0 !important;
    padding-top:clamp(220px,37.5vw,300px);
  }

  /* Keep content readable after the full panorama rather than covering the
     important words baked into the artwork. */
  .hero .wrap,
  .connect .wrap{
    position:relative;
    z-index:2;
  }
}

/* Very narrow phones: retain the entire image; never crop the wall slogans. */
@media (max-width:430px){
  .hero,
  .connect{
    background-size:100% auto !important;
    background-position:center top !important;
  }
}