/* =========================================================

   ABOUT.CSS — FINAL CLEAN VERSION

   Uses design-system.css as master visual reference.

   Page CSS controls About-specific layout only.

========================================================= */

/* =========================================================

   ABOUT.CSS — FINAL CLEAN LOCKED VERSION

   Uses design-system.css as master visual reference.

   Page CSS controls About-specific layouts only.

=========================================================

01. Global About Rules

02. Hero Section

03. Hero Animation

04. Main Cream Section

05. Philosophy Section

06. Doctor Profile + Consultation Section

07. Refined Approach Section

08. Final CTA Section

09. Buttons + Footer Adjustments

10. iPad / Tablet Layout

11. Mobile Layout

12. Laptop / Desktop Layout

========================================================= */

/* =========================================================

   01. GLOBAL ABOUT RULES

========================================================= */

body.about-page {

  margin: 0;

  padding: 0;

  background: var(--brand-ivory);

  color: var(--brand-charcoal);

  overflow-x: hidden;

  font-family: var(--font-heading);

}

.about-page *,

.about-page *::before,

.about-page *::after {

  box-sizing: border-box;

}

.about-page img {

  max-width: 100%;

  display: block;

}

.about-page a {

  text-decoration: none;

}

/* =========================================================

   02. HERO SECTION

========================================================= */

.about-hero {

  position: relative;

  width: 100%;

  height: 360px;

  overflow: hidden;

  background-image: url('about-hero.png');

  background-size: cover;

  background-position: 68% center;

  background-repeat: no-repeat;

}

.about-hero-content {

  position: absolute;

  left: 5.5%;

  top: 64%;

  transform: translateY(-50%);

  z-index: 2;

  max-width: var(--container-narrow);

}

.about-hero-script {

  margin: 0 0 var(--title-to-line-gap);

  opacity: 0;

}

.about-hero .hero-title {

  margin: 0;

  max-width: 720px;

  color: var(--hero-title-color-light);

  opacity: 0;

  text-shadow: var(--hero-title-text-shadow-light);

}

/* =========================================================

   03. HERO ANIMATION

========================================================= */

.about-hero.animate .about-hero-script {

  animation: aboutScriptReveal 3.8s ease forwards;

}

.about-hero.animate .hero-title {

  animation: aboutHeroDrop 2.8s ease forwards;

  animation-delay: 2.2s;

}

@keyframes aboutScriptReveal {

  0% {

    opacity: 0;

    transform:

      translateX(var(--hero-script-align-x-desktop))

      translateY(14px)

      scaleY(var(--script-scale-y))

      scaleX(var(--script-scale-x))

      skewX(var(--script-skew-x))

      rotate(var(--script-rotate));

    filter: blur(3px);

  }

  100% {

    opacity: 0.94;

    transform:

      translateX(var(--hero-script-align-x-desktop))

      translateY(0)

      scaleY(var(--script-scale-y))

      scaleX(var(--script-scale-x))

      skewX(var(--script-skew-x))

      rotate(var(--script-rotate));

    filter: blur(0);

  }

}

@keyframes aboutHeroDrop {

  0% {

    opacity: 0;

    transform: translateY(55px);

  }

  100% {

    opacity: 1;

    transform: translateY(0);

  }

}

/* =========================================================

   04. MAIN CREAM SECTION

========================================================= */

.about-main-white {

  background: var(--brand-cream);

  padding: 58px var(--page-padding-desktop) 70px;

}

/* =========================================================

   05. PHILOSOPHY PANEL

========================================================= */

.about-philosophy-panel {

  width: 100%;

  background: var(--brand-cream);

  padding: 54px 6% 58px;

  margin-bottom: 64px;

}

.about-philosophy-inner {

  width: 100%;

  max-width: var(--container-wide);

}

.about-section-script,

.about-doctor-script {

  margin: 0 0 var(--script-to-title-gap);

  opacity: 0.94;

  color: var(--brand-gold-script) !important;

}

}

.about-philosophy-inner h2,

.about-refined-inner h2 {

  margin: 0;

  color: var(--section-title-color-blue);

}

.about-doctor-card h2,

.about-consult-box h3,

.about-final-cta h2 {

  margin: 0;

  color: var(--section-title-color-navy);

}

.about-section-line {

  margin: var(--underline-gap-top) 0 var(--underline-gap-bottom);

}

.about-philosophy-inner p,

.about-refined-inner p {

  margin: 0 0 26px;

  max-width: 1180px;

  color: var(--body-copy-color-dark);

}

.about-philosophy-inner p:last-child,

.about-refined-inner p:last-child {

  margin-bottom: 0;

}

/* =========================================================

   06. DOCTOR + CTA SECTION

========================================================= */

.about-doctor-section {

  display: grid;

  grid-template-columns: 0.9fr 1.1fr;

  gap: 80px;

  align-items: center;

}

.about-doctor-card {

  max-width: 420px;

}

.about-doctor-image-wrap img {

  width: 100%;

  height: auto;

}

.about-doctor-honours {

  margin: 20px 0 0;

  color: rgba(47,42,38,0.76);

  font-family: var(--body-copy-font-family);

  font-size: 11px;

  line-height: 1.9;

  font-weight: 300;

  letter-spacing: 0.06em;

}

.about-consult-box {

  background: var(--brand-soft-cream);

  padding: 62px 60px;

  border: 1px solid rgba(185,150,87,0.18);

}

.about-consult-box h3 {

  margin-bottom: 22px;

}

.about-consult-box p {

  margin: 0 0 34px;

  color: var(--body-copy-color-dark);

}

/* =========================================================

   07. REFINED APPROACH SECTION

========================================================= */

.about-refined-section {

  background: var(--brand-cream);

  padding: 62px var(--page-padding-desktop) 66px;

}

.about-refined-inner {

  max-width: var(--container-wide);

}

.about-refined-inner p {

  margin-bottom: 28px;

}

/* =========================================================

   08. FINAL CTA SECTION

========================================================= */

.about-final-cta {

  background: var(--brand-white);

  padding: 58px var(--page-padding-desktop) 64px;

  text-align: center;

}

.about-final-cta-inner {

  max-width: var(--container-narrow);

  margin: 0 auto;

}

.about-final-cta h2 {

  margin-bottom: 20px;

}

.about-final-cta p {

  margin: 0 0 36px;

  color: var(--body-copy-color-muted);

}

/* =========================================================

   09. BUTTONS + FOOTER LOGO

========================================================= */

.about-consult-btn,

.about-final-btn {

  min-width: 240px;

  padding: 0 24px;

  transition:

    background 0.3s ease,

    color 0.3s ease;

}

.about-consult-btn {

  background: var(--brand-steel-blue);

  color: var(--brand-white);

}

.about-consult-btn:hover {

  background: var(--brand-navy);

}

.about-final-btn {

  min-width: 280px;

  background: var(--brand-gold);

  border: 1px solid var(--brand-gold);

  color: var(--brand-white);

}

.about-final-btn:hover {

  background: transparent;

  color: var(--brand-gold);

}

.about-consult-btn::after,

.about-final-btn::after {

  content: "›";

  margin-left: 12px;

  font-size: 20px;

  line-height: 1;

  font-weight: 300;

}

.about-page .site-footer .footer-logo img {

  width: 200px !important;

  max-width: 72% !important;

}

/* =========================================================

   10. iPAD / TABLET

========================================================= */

@media (min-width: 701px) and (max-width: 1180px) {

  .about-hero {

    height: 360px;

    background-position: 68% center;

  }

  .about-hero-content {

    left: 5%;

    top: 58%;

    max-width: 620px;

  }

  @keyframes aboutScriptReveal {

    0% {

      opacity: 0;

      transform:

        translateX(var(--hero-script-align-x-tablet))

        translateY(14px)

        scaleY(var(--script-scale-y))

        scaleX(var(--script-scale-x))

        skewX(var(--script-skew-x))

        rotate(var(--script-rotate));

      filter: blur(3px);

    }

    100% {

      opacity: 0.94;

      transform:

        translateX(var(--hero-script-align-x-tablet))

        translateY(0)

        scaleY(var(--script-scale-y))

        scaleX(var(--script-scale-x))

        skewX(var(--script-skew-x))

        rotate(var(--script-rotate));

      filter: blur(0);

    }

  }

  .about-section-script,

  .about-doctor-script {

    margin-bottom: 6px;

  }

  .about-main-white {

    padding-top: 42px;

    padding-bottom: 52px;

  }

  .about-philosophy-panel {

    padding-top: 18px;

    padding-bottom: 42px;

    margin-bottom: 46px;

  }

  .about-philosophy-inner p,

  .about-refined-inner p {

    margin-bottom: 20px;

  }

  .about-doctor-section {

    grid-template-columns: 0.92fr 0.95fr;

    gap: 34px;

    align-items: center;

  }

  .about-doctor-card {

    max-width: 390px;

  }

  .about-consult-box {

    max-width: 550px;

    width: 100%;

    padding: 40px 42px;

    align-self: center;

    transform: translateY(-36px);

  }

  .about-consult-box h3 {

    margin-bottom: 16px;

  }

  .about-consult-box p {

    margin-bottom: 24px;

  }

  .about-refined-section {

    padding-top: 18px;

    padding-bottom: 48px;

  }

  .about-final-cta {

    padding-top: 30px;

    padding-bottom: 32px;

    text-align: left;

  }

  .about-final-cta-inner {

    max-width: var(--container-standard);

    display: grid;

    grid-template-columns: 1fr auto;

    align-items: center;

    column-gap: 40px;

  }

  .about-final-cta h2 {

    white-space: nowrap;

    margin: 0;

  }

  .about-final-cta p {

    grid-column: 1 / 2;

    margin: 10px 0 0;

  }

  .about-final-btn {

    grid-column: 2 / 3;

    grid-row: 1 / 3;

    justify-self: end;

    align-self: center;

    min-width: 250px;

    width: auto;

    height: 38px;

    margin: 0;

    background: var(--brand-white);

    color: var(--brand-gold);

    border: 1px solid var(--brand-gold);

  }

  .about-final-btn:hover {

    background: var(--brand-gold);

    color: var(--brand-white);

  }

  .about-page .site-footer .footer-brand {

    text-align: center;

  }

  .about-page .site-footer .footer-logo img {

    width: 210px !important;

    max-width: 74% !important;

    margin: 0 auto 20px auto !important;

  }

  .about-page .site-footer .footer-brand p,

  .about-page .site-footer .footer-brand .footer-question {

    text-align: left;

  }

  .about-page .site-footer .footer-brand .footer-cta {

    margin-left: auto;

    margin-right: auto;

  }

.about-doctor-script {

  transform:

    translateX(28px)

    scaleY(var(--script-scale-y))

    scaleX(var(--script-scale-x))

    skewX(var(--script-skew-x))

    rotate(var(--script-rotate));

}

.about-page .site-footer .footer-inner {

  display: grid !important;

  grid-template-columns: 1fr 1fr 1fr !important;

  gap: 42px !important;

  align-items: start !important;

}

.about-page .site-footer .footer-column {

  min-width: 0 !important;

}
   
}

/* =========================================================

   11. MOBILE

========================================================= */

@media (max-width: 700px) {

  .about-hero {

    height: 400px;

    background-size: cover;

    background-position: 58% center;

  }

  .about-hero-content {

    top: 56%;

    left: 7%;

    right: 7%;

    max-width: none;

  }

.about-hero-script {

  max-width: 100%;

  margin-bottom: 12px;

  font-size: var(--hero-script-size-mobile);

  line-height: var(--script-line-height);

  white-space: nowrap;

  transform: translateX(-8px);

}
@keyframes aboutScriptReveal {

  0% {

    opacity: 0;

    transform:

      translateX(2px)

      translateY(14px)

      scaleY(var(--script-scale-y))

      scaleX(var(--script-scale-x))

      skewX(var(--script-skew-x))

      rotate(var(--script-rotate));

    filter: blur(3px);

  }

  100% {

    opacity: 0.94;

    transform:

      translateX(2px)

      translateY(0)

      scaleY(var(--script-scale-y))

      scaleX(var(--script-scale-x))

      skewX(var(--script-skew-x))

      rotate(var(--script-rotate));

    filter: blur(0);

  }

}

  .about-hero .hero-title {

    margin-top: 0;

    max-width: 400px;

  }

  .about-main-white {

    padding: 56px 0 68px;

  }

  .about-philosophy-panel {

    padding: 6px var(--page-padding-mobile) 58px;

    margin-bottom: 20px;

  }

  .about-section-script,

  .about-doctor-script {

    margin: 0 0 4px;

  }

  .about-section-line {

    margin: var(--title-to-line-gap) 0 26px;

  }

  .about-philosophy-inner p,

  .about-refined-inner p {

    margin-bottom: 24px;

  }

  .about-doctor-section {

    grid-template-columns: 1fr;

    gap: 44px;

    padding: 0 var(--page-padding-mobile);

    margin-top: -12px;

  }

  .about-doctor-card {

    max-width: 100%;

  }

  .about-doctor-honours {

    font-size: 10px;

    line-height: 1.8;

  }

  .about-consult-box {

    padding: 42px 28px;

  }

  .about-consult-btn,

  .about-final-btn {

    width: 100%;

    min-width: 0;

  }

  .about-refined-section {

    padding: 6px var(--page-padding-mobile) 62px;

  }

 .about-final-cta {

  padding: 42px var(--page-padding-mobile) 46px;

}

.about-final-cta h2 {

  margin-bottom: 14px;

}

.about-final-cta p {

  margin-bottom: 24px;

}

.about-final-btn {

  height: 42px;

  width: 76%;

  max-width: 540px;

  margin-left: auto;

  margin-right: auto;

}

.about-page .site-footer .footer-logo img {

  width: 190px !important;

  max-width: none !important;

  margin: 0 auto 22px auto !important;

}

.about-page .site-footer .footer-brand {

  max-width: 280px !important;

  margin: 0 auto !important;

  text-align: center !important;

}


 .about-page .site-footer .footer-clinic:last-child {

  padding-bottom: 24px !important;

  margin-bottom: 24px !important;

  border-bottom: 1px solid rgba(198,161,91,0.42) !important;

}

   .about-page .site-footer .footer-column:last-child::before {

  display: none !important;

}

   
}

/* =========================================================

   12. LAPTOP / PC

========================================================= */

@media (min-width: 1181px) {

  .about-main-white {

    padding-top: 18px;

  }

  .about-philosophy-panel {

    padding-top: 18px;

    margin-bottom: 36px;

  }

  .about-doctor-section {

    margin-top: -18px;

  }

  .about-refined-section {

    padding-top: 18px;

  }

  .about-section-script,

  .about-doctor-script {

    margin-bottom: 8px;

  }

.about-doctor-script {

  transform:

    translateX(28px)

    scaleY(var(--script-scale-y))

    scaleX(var(--script-scale-x))

    skewX(var(--script-skew-x))

    rotate(var(--script-rotate));

}

}

@media (min-width: 701px) and (max-width: 1180px) {

  .about-page .site-footer .footer-inner {

    grid-template-columns: 1fr 1fr 1fr !important;

    column-gap: 34px !important;

  }

  .about-page .site-footer .footer-brand,

  .about-page .site-footer .footer-column {

    width: auto !important;

    max-width: none !important;

  }

}