/* =====================================================
   DM EXERCISE CLINIC — INNER PAGES STYLESHEET
   Shared components reused across About, Assessment, Programs,
   Services, Success Stories and Contact pages.
   ===================================================== */

/* ---------- Page Banner (simple full-width photo, no text overlay) ---------- */
.page-banner{
  position:relative;
  overflow:hidden;
}
.page-banner img{
  width:100%;
  height:auto;
  display:block;
}
.page-banner::after{
  content:"";
  position:absolute;
  bottom:0; left:0; right:0;
  height:18px;
  background:var(--color-red);
  clip-path:polygon(0 100%, 100% 0, 100% 100%);
}

/* ---------- Page Intro (centered heading + lede paragraph) ---------- */
.page-intro{
  padding:90px 0 60px;
  text-align:center;
}
.page-intro h1{
  font-size:38px;
  font-weight:800;
  text-transform:uppercase;
  margin-bottom:28px;
}
.page-intro p{
  max-width:780px;
  margin:0 auto;
  font-size:16px;
  line-height:1.8;
  color:var(--color-text-body);
}
.page-intro p + p{ margin-top:18px; }

/* ---------- Dark Info Box (icon + heading + paragraph, used for
   "Our Philosophy", "Root-Cause Correction", "Why It Matters" etc.) ---------- */
.info-box-stack{
  padding-bottom:70px;
}
.info-box{
  display:flex;
  align-items:center;
  gap:40px;
  background:var(--color-black);
  border-radius:4px;
  padding:44px 50px;
  margin-bottom:28px;
}
.info-box-icon{
  flex-shrink:0;
  width:90px;
  height:90px;
  border-radius:50%;
  background:#2b2b2b;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-red);
}
.info-box-icon svg{ width:38px; height:38px; }
.info-box-body h3{
  color:#fff;
  font-size:24px;
  font-weight:700;
  margin-bottom:12px;
}
.info-box-body p{
  color:#cfcfcf;
  font-size:15.5px;
  line-height:1.75;
  max-width:760px;
}

/* ---------- Comparison Table (3 cards: Gym / Physio / Exercise Clinic) ---------- */
.compare-section{
  padding:30px 0 80px;
  text-align:center;
}
.compare-section h2{
  font-size:30px;
  font-weight:800;
  text-transform:uppercase;
  margin-bottom:50px;
}
.compare-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  text-align:left;
}
.compare-col{
  border-radius:4px;
  overflow:hidden;
  border:1px solid #ececec;
}
.compare-col-head{
  background:var(--color-black);
  color:#fff;
  text-align:center;
  font-size:18px;
  font-weight:700;
  padding:22px 16px;
}
.compare-col.is-featured .compare-col-head{
  background:var(--color-red);
}
.compare-row{
  background:var(--color-light-gray);
  text-align:center;
  padding:26px 20px;
  font-size:15px;
  line-height:1.6;
  color:var(--color-black);
  border-top:1px solid #fff;
}
.compare-col.is-featured .compare-row{
  font-weight:600;
}

/* ---------- Photo Grid ("Who the Clinic Helps", team/results galleries) ---------- */
.photo-grid-section{
  padding:30px 0 90px;
  text-align:center;
}
.photo-grid-section h2{
  font-size:30px;
  font-weight:800;
  text-transform:uppercase;
  margin-bottom:50px;
}
.photo-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:30px 24px;
}
.photo-grid.cols-3{
  grid-template-columns:repeat(3, 1fr);
}

/* ---------- Icon Badge Grid (used where the source assets are line-art
   icons rather than photos — smaller circular badges instead of full
   photo cards, to avoid blowing up small icon art) ---------- */
.icon-grid-section{
  padding:30px 0 90px;
  text-align:center;
}
.icon-grid-section h2{
  font-size:30px;
  font-weight:800;
  text-transform:uppercase;
  margin-bottom:50px;
}
.icon-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:36px 24px;
}
.icon-grid.cols-3{
  grid-template-columns:repeat(3, 1fr);
}
.icon-grid-item{
  text-align:center;
}
.icon-badge{
  width:140px;
  height:140px;
  border-radius:50%;
  background:transparent !important;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
  overflow:hidden;
}
.icon-badge img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:2px;
  box-sizing:border-box;
}
.icon-badge.is-photo img{
  object-fit:cover;
  padding:0;
}
.icon-grid-item p{
  font-size:15px;
  font-weight:500;
  color:var(--color-black);
  line-height:1.5;
  max-width:190px;
  margin:0 auto;
  text-align:center;
}
.photo-grid-item{
  background:none !important;
  text-align:center;
}
.photo-grid-item img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:4px;
  margin-bottom:16px;
}
.photo-grid-item p{
  font-size:15px;
  font-weight:500;
  color:var(--color-black);
  line-height:1.5;
  text-align:center;
  background:none !important;
  padding:0;
  margin:0 auto;
}

/* ---------- Audience / Bullet List Grid (2 columns of checked items) ---------- */
.audience-section{
  padding:30px 0 80px;
}
.audience-section h2{
  font-size:28px;
  font-weight:800;
  text-transform:uppercase;
  text-align:center;
  margin-bottom:44px;
}
.audience-grid{
  column-count:2;
  column-gap:50px;
  max-width:920px;
  margin:0 auto;
}
.audience-grid li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:15.5px;
  line-height:1.6;
  color:var(--color-black);
  break-inside:avoid;
  margin-bottom:16px;
  background:none !important;
  padding:0;
}
.audience-grid .check{
  width:22px; height:22px;
  border-radius:50%;
  background:var(--color-red);
  color:#fff;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:1px;
}
.audience-grid .check svg{ width:12px; height:12px; }

/* ---------- 4-Phase Journey (used in both Programs pages) ---------- */
.phases-section{
  padding:30px 0 90px;
  background:var(--color-offwhite);
}
.phases-section h2{
  font-size:30px;
  font-weight:800;
  text-transform:uppercase;
  text-align:center;
  margin-bottom:50px;
}
.phases-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
.phase-card{
  background:#fff;
  border-radius:4px;
  padding:32px 26px;
  position:relative;
  border:1px solid #ececec;
}
.phase-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--color-red);
  color:#fff;
  font-weight:700;
  font-size:17px;
  margin-bottom:20px;
}
.phase-card h3{
  font-size:18px;
  font-weight:700;
  margin-bottom:12px;
}
.phase-card p{
  font-size:14.5px;
  line-height:1.7;
  color:var(--color-text-body);
}

/* ---------- Modalities chip list (reuses programs-section visual rhythm) ---------- */
.chips-section{
  padding:30px 0 90px;
  text-align:center;
}
.chips-section h2{
  font-size:30px;
  font-weight:800;
  text-transform:uppercase;
  margin-bottom:40px;
}
.chips-wrap{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  max-width:900px;
  margin:0 auto;
}
.chip{
  background:var(--color-offwhite);
  border:1px solid #ececec;
  border-radius:999px;
  padding:12px 26px;
  font-size:14.5px;
  font-weight:600;
  color:var(--color-black);
}

/* ---------- Pricing Table ---------- */
.pricing-section{
  padding:30px 0 90px;
  text-align:center;
}
.pricing-section h2{
  font-size:30px;
  font-weight:800;
  text-transform:uppercase;
  margin-bottom:16px;
}
.pricing-section .assessment-fee-note{
  font-size:15px;
  color:var(--color-text-body);
  margin-bottom:44px;
}
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  text-align:left;
}
.price-card{
  border-radius:4px;
  border:1px solid #ececec;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.price-card.is-popular{
  border-color:var(--color-red);
  box-shadow:0 18px 40px -16px rgba(228,3,25,0.25);
}
.price-card-head{
  background:var(--color-black);
  color:#fff;
  padding:26px 26px 22px;
}
.price-card.is-popular .price-card-head{ background:var(--color-red); }
.price-card-head .duration{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  opacity:0.8;
  margin-bottom:6px;
  display:block;
}
.price-card-head h3{
  color:#fff;
  font-size:19px;
  font-weight:700;
}
.price-card-body{
  padding:26px 26px 30px;
  background:#fff;
  flex:1;
  display:flex;
  flex-direction:column;
}
.price-now{
  font-size:30px;
  font-weight:800;
  color:var(--color-black);
}
.price-now sup{ font-size:16px; font-weight:600; }
.price-was{
  font-size:15px;
  color:var(--color-text-muted);
  text-decoration:line-through;
  margin-left:8px;
}
.price-card-body p.price-label{
  font-size:13px;
  color:var(--color-text-muted);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:6px;
}
.price-card-body .btn{
  margin-top:auto;
  align-self:flex-start;
}

/* ---------- Highlighted Fee Card (single-price call-out, e.g. Assessment Fee) ---------- */
.fee-highlight{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin:0 auto;
  padding:30px 60px;
  background:var(--color-black);
  border-radius:8px;
  border:2px solid var(--color-red);
  box-shadow:0 18px 40px -16px rgba(228,3,25,0.35);
}
.fee-highlight-label{
  font-size:13px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#cfcfcf;
}
.fee-highlight-amount{
  font-size:40px;
  font-weight:800;
  color:#fff;
}

/* ---------- Outcomes Strip (simple checklist, reused for "Expected Outcomes") ---------- */
.outcomes-strip{
  padding:10px 0 80px;
  text-align:center;
}
.outcomes-strip h2{
  font-size:30px;
  font-weight:800;
  text-transform:uppercase;
  margin-bottom:28px;
}
.outcomes-strip ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px 36px;
  max-width:900px;
  margin:0 auto 36px;
}
.outcomes-strip li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:500;
}
.outcomes-strip .check{
  width:20px; height:20px;
  border-radius:50%;
  background:var(--color-red);
  color:#fff;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.outcomes-strip .check svg{ width:11px; height:11px; }
.outcomes-strip .tagline{
  font-size:18px;
  font-weight:700;
  text-align:center;
  max-width:680px;
  margin:0 auto;
}

/* ---------- Generic two-column media + text block (used for Sports
   Performance "How It Fits", Pilates intro, etc.) ---------- */
.media-text-section{
  padding:30px 0 90px;
}
.media-text-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
}
.media-text-grid img{
  width:100%;
  border-radius:4px;
  height:420px;
  object-fit:cover;
}
.media-text-grid.reverse .media-text-media{ order:2; }
.media-text-content h2{
  font-size:28px;
  font-weight:800;
  text-transform:uppercase;
  margin-bottom:20px;
}
.media-text-content p{
  font-size:15.5px;
  line-height:1.75;
  color:var(--color-text-body);
  margin-bottom:16px;
}

/* ---------- Simple list section (used for Rehab Support Areas, Key
   Focus Areas, Program Focus, Support Areas) ---------- */
.list-section{
  padding:30px 0 80px;
}
.list-section h2{
  font-size:28px;
  font-weight:800;
  text-transform:uppercase;
  text-align:center;
  margin-bottom:16px;
}
.list-section > .container > p.lede{
  text-align:center;
  max-width:760px;
  margin:0 auto 44px;
  font-size:15.5px;
  line-height:1.75;
  color:var(--color-text-body);
}
.list-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 50px;
  max-width:920px;
  margin:0 auto;
}
.list-grid li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:15.5px;
  line-height:1.6;
  padding:14px 0;
  border-bottom:1px solid #ececec;
}
.list-grid li svg{
  flex-shrink:0;
  width:14px;
  height:14px;
  margin-top:5px;
  color:var(--color-red);
}

/* ---------- Mini Compare (2 columns, used for Clinical Pilates vs Fitness Pilates) ---------- */
.mini-compare-section{
  padding:10px 0 80px;
}
.mini-compare-section h2{
  font-size:26px;
  font-weight:800;
  text-transform:uppercase;
  text-align:center;
  margin-bottom:40px;
}
.mini-compare-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  max-width:980px;
  margin:0 auto;
}
.mini-compare-col{
  border-radius:4px;
  overflow:hidden;
  border:1px solid #ececec;
}
.mini-compare-col-head{
  background:var(--color-black);
  color:#fff;
  text-align:center;
  font-weight:700;
  font-size:16px;
  padding:18px 16px;
}
.mini-compare-col.is-featured .mini-compare-col-head{ background:var(--color-red); }
.mini-compare-col-body{
  background:var(--color-light-gray);
  padding:24px;
}
.mini-compare-col-body ul li{
  font-size:14.5px;
  line-height:1.7;
  padding:10px 0;
  border-bottom:1px solid #e2e2e2;
}
.mini-compare-col-body ul li:last-child{ border-bottom:none; }

/* ---------- FAQ Accordion (Contact page) ---------- */
.faq-section{
  padding:30px 0 90px;
}
.faq-section h2{
  font-size:28px;
  font-weight:800;
  text-transform:uppercase;
  text-align:center;
  margin-bottom:44px;
}
.faq-list{
  max-width:820px;
  margin:0 auto;
}
.faq-item{
  border-bottom:1px solid #ececec;
}
.faq-question{
  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding:22px 4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:16px;
  font-weight:600;
  color:var(--color-black);
}
.faq-question .faq-icon{
  flex-shrink:0;
  width:22px; height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform var(--transition-fast);
}
.faq-item.is-open .faq-question .faq-icon{ transform:rotate(45deg); }
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height var(--transition-med);
}
.faq-answer-inner{
  padding:0 4px 22px;
  font-size:15px;
  line-height:1.75;
  color:var(--color-text-body);
}

/* ---------- Contact Page Layout ---------- */
.contact-section{
  padding:30px 0 90px;
}
.contact-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:50px;
  align-items:flex-start;
}
.contact-details h2{
  font-size:26px;
  font-weight:800;
  text-transform:uppercase;
  margin-bottom:20px;
}
.contact-details address{
  font-style:normal;
  font-size:15.5px;
  line-height:1.8;
  color:var(--color-text-body);
  margin-bottom:24px;
}
.contact-details .contact-phone{
  font-size:20px;
  font-weight:700;
  margin-bottom:24px;
  display:block;
}
.contact-details .contact-phone a{ color:var(--color-black); }
.contact-map{
  border-radius:4px;
  overflow:hidden;
  margin-top:24px;
  border:1px solid #ececec;
}
.contact-map iframe{
  width:100%;
  height:280px;
  border:0;
  display:block;
}
.contact-form-wrap{
  background:var(--color-black);
  border-radius:4px;
  padding:44px;
}
.contact-form-wrap h2{
  color:#fff;
  font-size:22px;
  font-weight:800;
  text-transform:uppercase;
  margin-bottom:26px;
}
/* The form fields inside .contact-form-wrap reuse the homepage's
   .enquire-form / .enquire-row / .enquire-field classes (see main.css)
   so both forms look and behave identically. The homepage's 3-column
   row is sized for that section's full-width container; inside this
   narrower side-by-side panel it's dropped to 1 column so each field
   has room to breathe. */
.contact-form-wrap .enquire-row{
  grid-template-columns:1fr;
}
.contact-form-wrap .enquire-note{
  color:#9a9a9a;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .compare-grid{ grid-template-columns:1fr; }
  .phases-grid{ grid-template-columns:1fr 1fr; }
  .pricing-grid{ grid-template-columns:1fr; max-width:480px; margin:0 auto; }
  .media-text-grid{ grid-template-columns:1fr; }
  .media-text-grid.reverse .media-text-media{ order:0; }
  .contact-grid{ grid-template-columns:1fr; }
}

@media (max-width: 900px){
  .page-intro h1{ font-size:30px; }
  .info-box{ flex-direction:column; text-align:center; padding:32px; }
  .photo-grid{ grid-template-columns:1fr 1fr; }
  .icon-grid{ grid-template-columns:1fr 1fr; }
  .audience-grid{ column-count:1; }
  .phases-grid{ grid-template-columns:1fr; }
  .list-grid{ grid-template-columns:1fr; }
  .mini-compare-grid{ grid-template-columns:1fr; }
}

@media (max-width: 600px){
  .page-intro{ padding:60px 0 40px; }
  .page-intro h1{ font-size:25px; }
  .info-box{ padding:26px 22px; }
  .info-box-icon{ width:70px; height:70px; }
  .photo-grid{ grid-template-columns:1fr 1fr; gap:20px 14px; }
  .icon-grid{ grid-template-columns:1fr 1fr; gap:26px 14px; }
  .icon-badge{ width:120px; height:120px; }
  .compare-section h2,
  .photo-grid-section h2,
  .icon-grid-section h2,
  .phases-section h2,
  .chips-section h2,
  .pricing-section h2,
  .list-section h2,
  .mini-compare-section h2,
  .faq-section h2,
  .outcomes-strip h2{ font-size:23px; }
  .contact-row{ grid-template-columns:1fr; }
  .contact-form-wrap{ padding:28px; }
}