@font-face{font-display:swap;font-family:'Cormorant Garamond';font-style:italic;font-weight:500;src:url('fonts/cormorant-garamond-v21-latin-500italic.woff2') format('woff2');}
@font-face{font-display:swap;font-family:'Playfair Display';font-style:normal;font-weight:400;src:url('fonts/playfair-display-v40-latin-regular.woff2') format('woff2');}

:root {
    /* ===== source palette — edit these six, everything follows ===== */
    --page:  #F8F7F8;   /* page background      */
    --card:  #FFFFFF;   /* cards / surfaces     */
    --navy:  #143A5C;   /* primary brand dark   */
    --rose:  #C97B8E;   /* soft accent          */
    --deep:  #9E3F58;   /* deep accent          */
    --slate: #4A5460;   /* secondary body text  */

    /* rgb channels — used to build the translucent tints below */
    --navy-rgb: 20, 58, 92;          /* #143A5C */
    --navy-deep-rgb: 14, 42, 67;     /* #0E2A43 — a darker navy for depth */
    --olive-rgb: 74, 84, 96;         /* slate  */
    --accent-rgb: 201, 123, 142;     /* rose   */

    /* solid versions, for normal use */
    --navy-deep: rgb(var(--navy-deep-rgb));
    --olive: rgb(var(--olive-rgb));
    --accent: rgb(var(--accent-rgb));

    /* navy tint scale — 5 steps, all follow --navy-rgb */
    --navy-10: rgba(var(--navy-rgb), 0.10);
    --navy-15: rgba(var(--navy-rgb), 0.15);
    --navy-20: rgba(var(--navy-rgb), 0.20);
    --navy-40: rgba(var(--navy-rgb), 0.40);
    --navy-75: rgba(var(--navy-rgb), 0.75);

    /* deep-navy tints */
    --navy-deep-30: rgba(var(--navy-deep-rgb), 0.30);
    --navy-deep-70: rgba(var(--navy-deep-rgb), 0.70);

    /* ===== flat colours ===== */
    --paper: var(--page);
    --paper2: var(--card);
    --deep-olive: #5a4a55;
    --light-olive: #F1DEE4;   /* soft rose tint  — testimonial card */
    --light-navy:  #D9E0E7;   /* soft slate tint — testimonial card */
    --brand: var(--deep);     /* hover / link accent */
    --dark: #1a1a1a;

    /* accent gradient stops (were undefined — caused the broken look) */
    --pink: var(--rose);
    --violet: var(--deep);
}

html { overflow-x: hidden; }
html.page-navy { background: var(--navy); }   /* navy overscroll / browser chrome on the case-studies page */

body {
    margin: 0;
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 500;
    background: var(--paper);
    color: var(--slate);
    overflow-x: hidden;   /* never let stray content widen the page past the viewport */
}


img {
    max-inline-size: 100%;
    block-size: auto;
    display: block;
}

header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 10;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

header.hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}


nav{
  max-inline-size: none;
  margin: 0;
  border-radius: 0;
  background: transparent;     /* sits over the hero image's grey */
  color: var(--navy);
  padding: 2rem 3rem;
}

nav > ul {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    font-size: 0.1rem;
    font-weight: 500;
    list-style: none;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding-inline-start: 0;
}

nav a {
    text-decoration: none;
    color: inherit;
}

nav ul a {
    opacity: 0.5;            
    transition: opacity 0.2s;
    font-size: 0.7rem;   
    letter-spacing: 0.25em;     
    font-weight: 400;
}

nav ul a:hover,
nav ul a[aria-current="page"] {
    opacity: 1;
}

.brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.brand-text{
  font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}

.hero {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      min-block-size: 100vh;      /* fallback for older browsers */
      min-block-size: 100dvh;     /* visible phone screen height */
      margin: 0;
      padding-block: 9rem 2rem;
      padding-inline-start: max(2rem, calc((100% - 90rem) / 2));
      padding-inline-end: max(2rem, calc((100% - 90rem) / 2));
  }

.hero-main {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 3rem;
  }

.hero-photo {
      flex: 1.2;
  }

  .hero-photo img {
      inline-size: 100%;
      aspect-ratio: 18 / 10;
      object-fit: cover;
      display: block;
      border-radius: 1.5rem;
  }

.hero-text {
    flex: 1;
    color: var(--navy);
}


.hero-heading {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 1.5rem;
    color: #7a8497;                          /* grey span — strong is navy */
    padding-block-end: 1rem;
    border-block-end: 1px solid var(--navy-20);
}
.hero-heading strong { color: var(--navy); font-weight: 400; }

.hero-body {
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.6;
    margin: 0 0 1rem;
    color: var(--navy);
    opacity: 0.85;
}

.hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-block-start: 2.5rem;
  }

  .hero-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.6rem 1.1rem;
      border-radius: 0.4rem;
      font-size: 0.6rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-decoration: none;
      white-space: nowrap;
      transition: background 0.2s ease, color 0.2s ease, border-color
  0.2s ease;
  }

  /* filled (primary) — Request Appointment */
  .hero-btn--solid {
      background: var(--navy);
      color: white;
      border: 1px solid var(--navy);
  }
  .hero-btn--solid:hover {
      background: #030722;
  }

.hero-btn--outline {
      background: transparent;
      color: var(--navy);
      border: 1px solid var(--navy-40);
}

.hero-btn--outline:hover {
      border-color: var(--navy);
}

.hero-logos {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap; 
      gap: 2.5rem;
      margin-block-start: 1rem;
      padding-block-start: 3rem;
      border-block-start: 1px solid var(--navy-15);
}
  
.hero-logos img {
      block-size: 1.75rem;    /* uniform logo height */
      inline-size: auto;
      opacity: 0.8;
}

@media (max-width: 48rem) {
    /* stack the photo below the text + buttons */
    .hero-main {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-text,
    .hero-photo {
        flex: 0 0 auto;
    }

    /* insurers: 4 per row, shrinking to fit */
    .hero-logos {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        justify-items: center;
        align-items: center;
        gap: 1.75rem 1rem;
    }

    .hero-logos img {
        block-size: auto;
        inline-size: auto;
        max-inline-size: 100%;
        max-block-size: 1.5rem;
    }
}

.cta {
    color: white;        
    font-weight: 500;
    font-size: 0.75rem;     
    letter-spacing: 0.05em;      
    text-transform: uppercase;    
    transition: background 0.2s, transform 0.2s;
    text-decoration: none;
}

.cta:hover {
    color: rgb(253, 245, 245, 0.6);
    opacity: 0.6; 
}

.menu-toggle {
    display: none;
    position: relative;      
    background: none;
    border: 1px solid white;
    border-radius: 0.5rem;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    cursor: pointer;
    color: inherit;
    padding: 0;
    transition: color 350ms ease, border-color 350ms ease;
}

.thumb {
    display: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.testimonials {
    padding: 3.5rem 0rem 3.5rem 0rem;
    background: var(--paper);
    color: var(--navy);
}

.testimonials-header {
    max-inline-size: min(90rem, calc(100% - 4rem));
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    padding-block-end: 0;
    position: relative;
}

/* ===== Standard section header: italic-serif eyebrow + two-tone heading ===== */
.eyebrow {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    color: var(--accent);
    margin: 0 0 0.15rem;
}

.testimonials-heading {
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 400;
    line-height: 1.0;
    letter-spacing: -0.01em;
    color: #7a8497;                          /* grey span — strong is navy */
    margin: 0;
    padding-bottom: 0.5rem;
}
.testimonials-heading strong { color: var(--navy); font-weight: 400; }

.testimonials-controls {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
    margin-block-end: 1rem;   /* keep the pills clear of the divider line */
}

.carousel-arrow {
    display: grid;
    place-items: center;
    inline-size: 4rem;
    block-size: 2.75rem;
    border: 1px solid var(--navy-75);
    border-radius: 999px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, background-image 0.2s;
    padding: 0;
}

.carousel-arrow[data-direction="prev"] {
    background-image: url('images/arrow-back-dark.svg');
}

.carousel-arrow[data-direction="next"] {
    background-image: url('images/arrow-forward-dark.svg');
}

.carousel-arrow:hover {
    background-color: var(--navy);
    border-color: var(--navy);
}

.carousel-arrow[data-direction="prev"]:hover {
    background-image: url('images/arrow-back-light.svg');
}

.carousel-arrow[data-direction="next"]:hover {
    background-image: url('images/arrow-forward-light.svg');
}

.carousel-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.testimonials-track {
    padding-block-start: 1.5rem;
    padding-block-end: 1.5rem;
    padding-inline: max(2rem, calc((100% - 90rem) / 2));
    scroll-padding-inline-start: max(2rem, calc((100% - 90rem) / 2));
    display: flex;
    align-items: stretch;           /* every card matches the tallest (longest review) */
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.testimonials-track::-webkit-scrollbar {
    display: none;                     
}

.testimonial-card {
    flex: 0 0 22rem;
    scroll-snap-align: start;
    background: var(--paper);
    border-radius: 1rem;
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-block-size: 22rem;
}


.testimonial-quote {
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--navy-deep-70);
    margin: 0;
}

.testimonial-meta {
    margin-block-start: auto;      /* name pinned to the bottom */
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--navy-deep-30);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.testimonial-source {
    font-weight: 400;
    font-size: 0.9375rem;
    color: var(--navy-deep);
    margin: 0;
}

.testimonial-date {
    font-weight: 400;
    font-size: 0.8125rem;
    color: var(--navy-deep-70);
}

.testimonial-card[data-variant="soft"]   { background: rgba(var(--accent-rgb), 0.12); }   /* soft rose */
.testimonial-card[data-variant="mist"]   { background: var(--light-navy); }               /* light slate */
.testimonial-card[data-variant="navy"]   { background: #34567a; }                          /* muted, lighter navy */

/* deep-navy cards flip to light text */
.testimonial-card[data-variant="navy"] .testimonial-quote { color: rgba(255, 255, 255, 0.82); }
.testimonial-card[data-variant="navy"] .testimonial-meta { border-block-start-color: rgba(255, 255, 255, 0.20); }
.testimonial-card[data-variant="navy"] .testimonial-source { color: #fff; }

.testimonials-progress {
    max-inline-size: 90rem;
    margin: 2rem auto 0;
    margin-inline: max(2rem, calc((100% - 90rem) / 2));
    block-size: 2px;
    background: var(--navy-10);
    position: relative;
    overflow: hidden;
}

.testimonials-progress-fill {
    block-size: 100%;
    background: var(--navy);                /* brand navy */
    inline-size: 20%;                    /* will be set by JS — placeholder */
    transition: inline-size 200ms ease;  /* smooth movement */
}

.services {
    background: white;
    padding: 3.5rem 0;
    color: var(--navy);
    border-block-end: 2px solid #e6e9ef;   /* section divider */
}


/* ===== Examination journey — dark band image carousel ===== */
.journey{
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: #fff;
    padding: 4.5rem 0 3rem;
}
.journey-inner{
    max-inline-size: 90rem;
    margin-inline: auto;
    padding-inline: 2rem;
}
.journey-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-block-end: 2.5rem;
}
/* standard section header, adapted for the dark band */
.journey .testimonials-heading{ color: rgba(255, 255, 255, 0.55); }
.journey .testimonials-heading strong{ color: #fff; }
.journey-controls{
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}
.journey-arrow{
    display: grid;
    place-items: center;
    inline-size: 4rem;
    block-size: 2.75rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.journey-arrow svg{ inline-size: 1.15rem; block-size: 1.15rem; }
.journey-arrow:hover{ background: rgba(255, 255, 255, 0.10); border-color: #fff; }
.journey-arrow:disabled{ opacity: 0.3; cursor: not-allowed; }
.journey-seeall{
    display: inline-flex;
    align-items: center;
    block-size: 2.75rem;
    padding-inline: 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.2s, border-color 0.2s;
}
.journey-seeall:hover{ background: #fff; color: var(--navy); border-color: #fff; }

.journey-track{
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-block-end: 0.5rem;
}
.journey-track::-webkit-scrollbar{ display: none; }

.journey-card{
    position: relative;
    flex: 0 0 clamp(15rem, 24vw, 21rem);
    aspect-ratio: 4 / 5;
    scroll-snap-align: start;
    border-radius: 1.5rem;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
}
.journey-card img{
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.journey-card::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}
.journey-card:hover img,
.journey-card:focus-visible img{ transform: scale(1.05); }

.journey-card-arrow{
    position: absolute;
    z-index: 1;
    inset-block-end: 3.9rem;
    inset-inline-start: 1.4rem;
    display: grid;
    place-items: center;
    inline-size: 3.4rem;
    block-size: 2.6rem;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    color: #fff;
    transition: background 0.25s ease;
}
.journey-card-arrow svg{ inline-size: 1.1rem; block-size: 1.1rem; }
.journey-card:hover .journey-card-arrow,
.journey-card:focus-visible .journey-card-arrow{ background: rgba(255, 255, 255, 0.18); }

.journey-card-title{
    position: absolute;
    z-index: 1;
    inset-block-end: 1.1rem;
    inset-inline: 1.4rem;
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.15;
    margin: 0;
}

.journey-progress{
    margin-block-start: 2.25rem;
    block-size: 2px;
    background: rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden;
}
.journey-progress-fill{
    block-size: 100%;
    background: #fff;
    inline-size: 10%;
    transition: inline-size 200ms ease;
}

/* ===== Expertise — stacked feature blocks ===== */
.expertise-list{
    max-inline-size: 70rem;
    margin-inline: auto;
    padding: 1rem 2rem 3.5rem;
}
.expertise-item{
    display: grid;
    gap: 1.75rem;
    padding-block: 3rem;
    border-block-start: 1px solid var(--navy-15);
}
.expertise-item:last-child{ border-block-end: 1px solid var(--navy-15); }
.expertise-photo{
    margin: 0;
}
.expertise-photo img{
    display: block;
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 1.25rem;
}
.expertise-body .testimonials-heading{ margin-block-end: 0.6rem; }
.expertise-desc{
    margin: 0;
    max-inline-size: 38rem;
}
.expertise-more{
    display: inline-block;
    margin-block-start: 1.4rem;
    color: var(--navy);
    text-decoration: none;
    font-weight: 500;
    padding-block-end: 0.3rem;
    border-block-end: 2px solid var(--accent);
    transition: color 0.2s, border-color 0.2s;
}
.expertise-more:hover{ color: var(--deep); border-color: var(--deep); }

/* expertise blocks on desktop: photo drifts in from the left, text from the right
   (phones keep the standard rise-up fade on the whole block) */
@media (min-width: 800px){
    .expertise-item.fade-init{ opacity: 1; transform: none; }
    .expertise-item.fade-init .expertise-photo{ opacity: 0; transform: translateX(-2.75rem); }
    .expertise-item.fade-init .expertise-body{ opacity: 0; transform: translateX(2.75rem); }
    .expertise-item.fade-init.is-visible .expertise-photo,
    .expertise-item.fade-init.is-visible .expertise-body{
        opacity: 1;
        transform: none;
        transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    }
}
@media (prefers-reduced-motion: reduce){
    .expertise-item.fade-init .expertise-photo,
    .expertise-item.fade-init .expertise-body{ opacity: 1; transform: none; transition: none; }
}

/* scroll-triggered fade-in — .fade-init is added by JS so content stays visible without it */
.fade-init{
    opacity: 0;
    transform: translateY(1.75rem);
}
.fade-init.is-visible{
    opacity: 1;
    transform: none;
    transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce){
    .fade-init{ opacity: 1; transform: none; transition: none; }
}

/* side-by-side on wider screens — photo left, text right */
@media (min-width: 800px){
    .expertise-item{
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 4.5rem;
    }
}

/* On phones the arrows go and "See all" sits under the progress line, full width */
.journey-seeall--mobile{ display: none; }
@media (width < 700px) {
    .journey-controls{ display: none; }
    .journey-seeall--mobile{
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        inline-size: 100%;
        block-size: 2.5rem;
        margin-block-start: 1.5rem;
    }
}

.service-row-icon {
      justify-self: end;
      align-self: center;
      inline-size: 3.5rem;     
      block-size: 3.5rem;
      object-fit: contain;
      transition: transform 0.25s ease;
  }

.service-row:hover .service-row-icon {
      transform: translateX(4px);
  }

.service-row:hover .service-row-name {
      color: var(--brand);
  }

body.services-page .services {
    padding-block-start: 10rem;
}

body.patient-information-page .patient-info {
    padding-block-start: 10rem;
}

.services-header {
    text-align: center;
    margin-block-end: 2rem;
}

.services-heading {
    display: inline-block;
    font-size: clamp(1.1rem, 4vw, 2rem); 
    font-weight: 400; 
    margin: 0;
    padding-block-end: 0.75rem;
    border-block-end: 3px solid var(--navy);
    text-transform: uppercase;                
    letter-spacing: 0.08em;                   
}

.service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: white;
    text-align: center;
}

.service-card-image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    padding: 1.75rem;
    box-sizing: border-box;
    transition: transform 0.5s ease;
}

.service-card-image-wrap {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 1rem;
    overflow: hidden;
    margin-block-end: 1.25rem;
    background: #fff;
}

.service-card-title {
    font-size: 0.875rem;             
    font-weight: 500;                       
    margin: 0;
    padding-block-end: 0.25rem;
    border-block-end: 2px solid transparent;
    transition: border-color 0.2s;
    text-transform: uppercase;              
    letter-spacing: 0.08em;                   
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-inline-size: 70vw;
    margin-inline: auto;
    background: var(--brand);
    padding: 3rem 3rem 1.5rem 3rem;
    border-radius: 1rem;
}

.services-rows {
    max-inline-size: 90rem;  
    margin-inline: auto;
    padding-inline: 2rem;
}

.services-head,
.service-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 4rem;
    gap: 2.5rem;
}

.services-head {
    align-items: center;
    padding-block-end: 0;
    position: relative;
}

.services-head-text {
      grid-column: 1 / -1;
  }

.service-row {
    align-items: start;
    padding-block: 1.25rem;
    border-block-end: 1px solid var(--navy);  
    text-decoration: none;
    color: var(--navy);
}

.service-row-name {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--navy);
}

.service-row-desc {
    margin: 0;
    max-inline-size: 38rem;
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.6;
    margin: 0 0 1rem;
    color: var(--navy);
    opacity: 0.85;
}

/* responsive: name + icon on one line, description drops below */
@media (width < 760px) {
    .services-head,
    .service-row {
        grid-template-columns: 1fr auto;
        gap: 0.75rem 1.5rem;
    }
    .service-row-desc {
        grid-column: 1 / -1;
    }
}

.service-card:hover .service-card-image,
.service-card:focus-visible .service-card-image {
    transform: scale(1.08);
}

.service-card:hover .service-card-title,
.service-card:focus-visible .service-card-title {
    border-block-end-color: var(--navy);
}

.patient-info {
      background: white;
      color: var(--navy);
      padding: 3.5rem 2rem;
  }

.patient-head {
    padding-block-end: 2.5rem;
}

  .patient-info-inner {
      max-inline-size: 90rem;
      margin-inline: auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: start;
  }

  .patient-info-image {
      border-radius: 1rem;
      overflow: hidden;
      aspect-ratio: 4 / 3;
  }

  .patient-info-image img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
  }

  .patient-info-links {
      list-style: none;
      margin: 7rem 0 0;
      padding: 0;
      border-block-start: 1px solid rgb(20, 58, 92, 0.85);
  }

  .patient-info-links a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      padding: 1.05rem 0;
      border-block-end: 1px solid rgb(20, 58, 92, 0.85);
      font-size: 0.75rem;      
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--navy);
      text-decoration: none;
      transition: opacity 0.2s, padding-inline-start 0.2s;
  }

  .patient-info-links a:hover {
      opacity: 0.7;
      padding-inline-start: 0.5rem; 
  }

  .patient-info-arrow {
      display: grid;
      place-items: center;
      inline-size: 2.5rem;
      block-size: 2.5rem;
      border: 1px solid rgb(20, 58, 92, 0.85);
      border-radius: 999px;
      flex-shrink: 0;
      font-size: 1.1rem;
  }

  /* stack on smaller screens */
  @media (width < 800px) {
      .patient-info-inner {
          grid-template-columns: 1fr;
          gap: 2.5rem;
      }

      .patient-info-links {
          margin-block-start: 0;
      }
  }

.site-footer {
    background: var(--paper);
    color: var(--slate);
    padding: 3.5rem 2rem 2rem;
    border-block-start: 2px solid #e6e9ef;   /* section divider above the footer, every page */
}
body.case-studies-page .site-footer{ border-block-start-color: rgba(255, 255, 255, 0.12); }

.footer-content {
    max-inline-size: 90rem;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2.5rem;
    padding-block-end: 2.5rem;
}

.footer-brand { min-inline-size: 0; }

.footer-logo {
    display: inline-block;
    margin-block-end: 1.1rem;
    text-decoration: none;
}
/* footer wordmark inherits the exact nav .brand-text style (Euclid, lowercase, 0.2em) */

.footer-blurb {
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.45;
    margin: 0;
    max-inline-size: 24rem;
    color: var(--slate);
}

.footer-eyebrow {
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 1.25rem;
    color: var(--navy);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.footer-links a {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--slate);
    text-decoration: none;
    transition: color 0.2s;
    overflow-wrap: anywhere;
}

.footer-links a:hover { color: var(--navy); }

.footer-social {
    margin: 2rem 0 0;         /* sits under the blurb inside the brand column */
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;          /* never clip — wrap chips if space runs out */
    gap: 0.75rem;
}
.footer-social li { flex-shrink: 0; }

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: 0.6rem;
    background: rgba(var(--navy-rgb), 0.06);
    color: var(--navy);
    transition: background 0.2s, color 0.2s;
}

.footer-social a:hover { background: var(--navy); }
.footer-social img { inline-size: 1.15rem; block-size: 1.15rem; display: block; }
.footer-social a:hover img { filter: brightness(0) invert(1); }   /* navy icon -> white on hover */

.footer-bottom {
    max-inline-size: 90rem;
    margin: 0 auto 0;
    padding-block-start: 2rem;
    border-block-start: 1px solid var(--navy-15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    font-size: 0.9rem;
}

.footer-legal {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.footer-legal a {
    font-size: 0.75rem;
    color: var(--slate);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-legal a:hover { color: var(--navy); }

.footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.75rem;
    color: var(--slate);
}

.footer-brand-credit {
    color: var(--navy);
    font-weight: 600;
    text-decoration: none;
}

/* mobile menu open/close */
@keyframes menuIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes menuOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes menuItemIn {
    from { opacity: 0; transform: translateY(0.9rem); }
    to   { opacity: 1; transform: none; }
}

.about-hero {
    background: var(--paper);
    color: var(--navy);
    padding: 8rem 2rem 1rem;
}


.about-hero-photo {
      float: right;
      inline-size: 100%;
      max-inline-size: 40rem;
      block-size: auto;
      margin: 0.5rem 0 1.5rem 2.5rem;
      border-radius: 1rem;
  }

.surgeon-headshot {
      float: right;
      inline-size: 35%;
      max-inline-size: 20rem;
      block-size: auto;
      margin: 0.5rem 0 1.5rem 2.5rem;
      border-radius: 1rem;
  }

.about-hero-content {
    max-inline-size: 90rem;
    margin-inline: auto;
}

.about-hero-title {
    font-family: 'Euclid', Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--navy);
    line-height: 1.2;
}

.about-hero-content h2.about-hero-title {
    margin-block-start: 3rem;
}

.about-hero-lead,
.about-hero-body {
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300;
    font-size: 0.875rem;
    line-height: 1.65;
    margin: 0 0 1rem;
    opacity: 0.7;
}

.page-main .testimonials-heading {
      padding-block-end: 1rem;
      border-block-end: 1px solid var(--navy-20);
      inline-size: fit-content;
  }

.interests-list {
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300;
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--navy);
    opacity: 0.85;
    columns: 2;
    margin: 0.5rem 0 0;
    padding-inline-start: 1.1rem;
}

/* surgical results page */
.results-subheading {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--navy);
    margin: 2.5rem 0 1rem;
}

.results-table {
    inline-size: 100%;
    border-collapse: collapse;
    margin: 0 0 1.5rem;
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.875rem;
    color: var(--navy);
}

.results-table th,
.results-table td {
    text-align: start;
    padding: 0.75rem 1rem;
    border-block-end: 1px solid var(--navy-20);
}

.results-table th {
    font-weight: 600;
    background: var(--paper2);
}

.download-list,
.references-list {
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.875rem;
    color: var(--navy);
    line-height: 1.7;
    padding-inline-start: 1.1rem;
    margin: 0 0 1.5rem;
}

.download-list a {
    color: var(--navy);
    font-weight: 500;
}

.about-hero-heading {
    font-size: clamp(1.1rem, 4vw, 2rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--navy);
    margin: 0 0 2rem;
    padding-block-end: 1rem;
    border-block-end: 1px solid var(--navy-20);
    display: block;
    inline-size: fit-content;
    max-inline-size: 100%;
}


.about-hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-block-start: 2rem;
}

.about-stats {
    background: white;
    padding: 4rem 2rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-inline-size: 90rem;
    margin-inline: auto;
    text-align: center;
}

.about-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.about-stat-number {
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    color: var(--navy);
    margin: 0;
    line-height: 1;
}

.about-stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0;
}


.section-heading {
    display: inline-block;
    font-size: clamp(1.1rem, 4vw, 2rem);
    font-weight: 400;
    margin: 0 0 3rem;
    padding-block-end: 0.75rem;
    border-block-end: 3px solid var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--navy);
}

.specialists {
    background: white;
    padding: 2rem 2rem 5rem;
    text-align: center;
}

.specialists-grid {
    max-inline-size: 90rem;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.specialist-card {
    flex: 0 0 calc(20% - 1.2rem);
    text-decoration: none;
    color: inherit;
    display: block;
}

.specialist-photo-wrap {
    position: relative;
    inline-size: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 0.5rem;
    margin-block-end: 0.75rem;
    background: var(--paper);
}

.specialist-name {
    font-family: 'Euclid', Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--navy);
    margin: 0;
    line-height: 1.2;
    display: inline-block;
    padding-block-end: 0.25rem;
    border-block-end: 2px solid transparent;
    transition: border-color 0.2s;
}

.specialist-card:hover .specialist-name {
      border-color: var(--navy);
  }

.specialist-photo-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.specialist-photo-wrap::after {
    content: "";
    position: absolute;
    inset-block-end: 1rem;
    inset-inline-start: 1rem;
    inline-size: 3rem;
    block-size: 3rem;
    border: 1px solid white;
    border-radius: 50%;
    background-image: url('images/arrow-forward-light.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.25rem;
    opacity: 0;
    transform: translateY(0.5rem) scaleY(-1);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

.specialist-card:hover .specialist-photo-wrap::before,
.specialist-card:focus-visible .specialist-photo-wrap::before,
.specialist-card:hover .specialist-photo-wrap::after,
.specialist-card:focus-visible .specialist-photo-wrap::after {
    opacity: 1;
}

.specialist-card:hover .specialist-photo-wrap::after,
.specialist-card:focus-visible .specialist-photo-wrap::after {
    transform: translateY(0) rotate(0);
}

.review-badge {
      display: inline-flex;
      align-items: stretch;
      gap: 1.25rem;
      padding: 1rem 1.5rem;
      background: #fff;
      border: 1px solid var(--navy-10);
      border-radius: 1rem;
      box-shadow: 0 6px 20px var(--navy-10);
      text-decoration: none;
      color: var(--navy);
      font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .review-badge:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px var(--navy-15);
  }

  .review-badge-score {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      inline-size: 2.75rem;
  }

  .review-badge-out {
      font-size: 0.85rem;
      font-weight: 500;
      opacity: 0.55;
  }

  .review-badge-body {
      display: flex;
      justify-content: center;
      flex-direction: column;
      gap: 0.3rem;
      padding-inline-start: 1.25rem;
      border-inline-start: 1px solid var(--navy-15);   /* 
  divider */
  }

  .review-badge-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-sizing: border-box;
      inline-size: 9.5rem;        /* fixed logo column so both badges match */
      padding-inline-start: 1.1rem;
      border-inline-start: 1px solid var(--navy-15);
  }

  .review-badge-logo img {
      block-size: auto;
      inline-size: auto;
      max-block-size: 1.7rem;     /* caps height */
      max-inline-size: 100%;      /* fit inside the fixed logo column */
  }

  .review-badge-stars {
      color: var(--rose);
      font-size: 1.15rem;
      letter-spacing: 3px;
  }

  .review-badge-meta {
      font-size: 0.8rem;
      opacity: 0.75;
  }

  .review-badge-brand {
      padding-inline-start: 1.25rem;
      font-weight: 600;
      color: var(--navy);
      white-space: nowrap;
  }

  .review-badge-arrow {
      display: inline-block;
      transition: transform 0.2s ease;
  }

  .review-badge:hover .review-badge-arrow {
      transform: translateX(4px);
  }

.reviews-strip {
      padding: 2rem 2rem;
  }

.reviews-strip-inner {
      max-inline-size: 90rem;
      margin-inline: auto;
  }
  
  .reviews-strip-inner .eyebrow {
      margin: 0 0 1.5rem;        /* eyebrow stays top-left */
  }

  .review-badges {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;   /* centre the two badges as a row */
      align-items: stretch;      /* equal height */
      gap: 1.5rem;
  }

  /* phones: let badges fill the width so there's a gap either side */
  @media (max-width: 30rem) {
      .reviews-strip {
          padding-inline: 1.25rem;
      }

      .review-badge {
          inline-size: 100%;
          box-sizing: border-box;
          gap: 0.6rem;
          padding: 0.85rem;
      }

      .review-badge-score {
          inline-size: 2.25rem;
      }

      .review-badge-body {
          flex: 1;
          min-inline-size: 0;
          padding-inline-start: 0.75rem;
      }

      .review-badge-logo {
          inline-size: 5.5rem;
          padding-inline-start: 0.75rem;
      }

      .review-badge-stars {
          font-size: 0.9rem;
          letter-spacing: 2px;
      }

      .review-badge-meta {
          font-size: 0.72rem;
      }
  }

.faq-item {
    border-block-end: 1px solid rgb(20, 58, 92, 0.18);
}

.faq-question {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    cursor: pointer;
    padding-block: 1.6rem;
    font-family: 'Euclid', Arial, sans-serif;
    font-weight: 400;
    font-size: clamp(1.1rem, 1.9vw, 1.6rem);
    line-height: 1.3;
    color: var(--navy);
    transition: opacity 0.2s;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question::marker {
    content: "";
}

.faq-question:hover {
    opacity: 0.7;
}

/* +/- toggle pill on the right */
.faq-question::after {
    content: "";
    flex-shrink: 0;
    inline-size: 2.85rem;
    block-size: 2.3rem;
    border-radius: 999px;
    border: 1px solid var(--navy);
    background-color: var(--navy);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.95rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
    transition: background-color 0.2s;
}

.faq-item[open] .faq-question::after {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23143A5C' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}

.faq-answer {
    padding-block: 0 1.85rem;
    max-inline-size: 60rem;
}

.faq-answer p {
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--navy);
    margin: 0 0 1rem;
}

.faq-answer p:last-child {
    margin: 0;
}

.faq-answer a {
    color: var(--brand);
    word-break: break-word;
}

@media (width < 950px) {
    .about-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .specialist-card {
        flex-basis: calc(33.333% - 1rem);
    }
}

@media (width < 600px) {
    .specialist-card {
        flex-basis: calc(50% - 0.75rem);
    }

    .about-hero-content {
        padding: 2rem 1.5rem;
    }
}

@media (width < 1000px) {
    nav.is-open .has-dropdown {
        display: flex;
        flex-direction: column;
    }

    nav.is-open .nav-dropdown-toggle {
        display: flex;
        align-items: center;
        gap: 0.1rem;
        inline-size: 100%;
        padding: 1rem 0;
        font-size: 0.75rem;
        opacity: 0.6;
    }

    nav.is-open .nav-dropdown {
        position: static;
        transform: none;
        min-inline-size: 0;
        background: none;
        backdrop-filter: none;
        border-radius: 0;
        padding: 0 0 0.75rem 1.5rem;
    }

    nav.is-open .nav-dropdown a {
        padding: 0.6rem 0;
        font-size: 0.7rem;
        opacity: 0.6;
    }

    nav.is-open > ul,
    nav.is-open .cta {
        display: flex;
    }

    nav ul,
    nav .cta {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .menu-toggle span {
        position: absolute;
        inset-inline-start: 50%;
        inset-block-start: 50%;
        inline-size: 1.1rem;         
        block-size: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: transform 300ms ease, opacity 200ms ease;
    }

    .menu-toggle span:nth-child(1) {
        transform: translate(-50%, -8px);    
    }

    .menu-toggle span:nth-child(2) {
        transform: translate(-50%, -50%);    
    }

    .menu-toggle span:nth-child(3) {
        transform: translate(-50%, 6px);    
    }

    nav.is-open .menu-toggle span:nth-child(1) {
        transform: translate(-50%, -50%) rotate(45deg);  
    }

    nav.is-open .menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    nav.is-open .menu-toggle span:nth-child(3) {
        transform: translate(-50%, -50%) rotate(-45deg);
    }
    
    nav.is-open > ul {
        grid-area: links;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        align-self: center;
        list-style: none;
        padding: 0;
        margin: 0;
        gap: 0;
    }

    nav.is-open > ul > li {
        border-block-end: 1px solid var(--navy-15);
    }

    nav.is-open > ul > li:first-child {
        border-block-start: 1px solid var(--navy-15);
    }

    nav.is-open {
        position: fixed;
        inset: 0;
        z-index: 10;
        background: transparent;        /* the ::before backdrop carries the fill so it can fade alone */
        color: var(--navy);
        padding: 1.4rem 1.25rem;        /* match the closed bar so brand + toggle don't move */
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "brand close"
            "links links"
            "cta   cta";
        gap: 2rem;
        border-radius: 0;
        max-inline-size: none;
        margin: 0;
    }

    /* backdrop fades in/out on its own — brand + hamburger stay solid throughout */
    nav.is-open::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--paper);
        animation: menuIn 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* links glide up one after another */
    nav.is-open > ul > li {
        animation: menuItemIn 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    nav.is-open > ul > li:nth-child(1) { animation-delay: 100ms; }
    nav.is-open > ul > li:nth-child(2) { animation-delay: 170ms; }
    nav.is-open > ul > li:nth-child(3) { animation-delay: 240ms; }
    nav.is-open > ul > li:nth-child(4) { animation-delay: 310ms; }
    nav.is-open > ul > li:nth-child(5) { animation-delay: 380ms; }

    /* soft fade-out while closing (class removed by script.js after it finishes) */
    nav.is-open.is-closing { pointer-events: none; }
    nav.is-open.is-closing::before { animation: menuOut 240ms ease both; }
    nav.is-open.is-closing > ul { animation: menuOut 200ms ease both; }
    nav.is-open.is-closing > ul > li { animation: none; }

    /* morph the X back to a hamburger during the fade-out */
    nav.is-open.is-closing .menu-toggle span:nth-child(1) { transform: translate(-50%, -8px); }
    nav.is-open.is-closing .menu-toggle span:nth-child(2) { opacity: 1; }
    nav.is-open.is-closing .menu-toggle span:nth-child(3) { transform: translate(-50%, 6px); }

    @media (prefers-reduced-motion: reduce) {
        nav.is-open::before,
        nav.is-open.is-closing::before,
        nav.is-open.is-closing > ul,
        nav.is-open > ul > li { animation: none; }
    }

    nav.is-open .brand        { grid-area: brand; }
    nav.is-open .menu-toggle  { grid-area: close; justify-self: end; }

    nav.is-open .cta {
        grid-area: cta;
        justify-content: center;
        padding: 1.25rem;
        border-radius: 0.75rem;
        font-size: 0.9rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    nav.is-open ul a {
        display: flex;
        align-items: center;
        padding: 1rem 0;
        color: var(--navy);
        opacity: 0.6;
        font-size: 0.75rem;      
        font-weight: 500;
        text-transform: uppercase;     
        letter-spacing: 0.05em;          
    }   

    nav.is-open ul a:hover,
    nav.is-open ul a:focus-visible,
    nav.is-open ul a[aria-current="page"] {
          opacity: 1;
      }

    nav.is-open .nav-dropdown-toggle:hover,
    nav.is-open .nav-dropdown-toggle:focus-visible,
    nav.is-open .nav-dropdown-toggle[aria-expanded="true"] {
          opacity: 1;
      }


    nav.is-open .menu-toggle {
        grid-area: close;
        justify-self: end;
        align-self: center;
        border-color: var(--navy);
        color: var(--navy);
    }

    .testimonial-card {
    flex: 0 0 14rem;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem 2rem;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (width < 700px) {

}

@media (width < 500px) {

    .testimonials-controls {
        display: none;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
    }

    .footer-legal {
        justify-content: space-between;
    }

    .footer-bottom-right {
        justify-content: space-between;
        gap: 1rem;
    }

    .patient-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .patient-info-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
        padding: 1.5rem 1.25rem;
    }

    .hero {
        margin: 0;
        gap: 1.5rem;
    }

    .about-hero-photo {
          float: none;
          inline-size: 100%;
          max-inline-size: none;
          margin: 0 0 1.5rem;
      }

    .footer-content {
          grid-template-columns: repeat(2, 1fr);
          gap: 2rem;
      }
      .footer-brand {
          grid-column: 1 / -1;
      }

}

/* shared scaffold for stub/coming-soon pages */
.page-main {
    max-inline-size: 90rem;
    margin: 9rem auto 4rem;
    padding-inline: 2rem;
    min-block-size: 50vh;
    color: var(--navy);
}

.page-heading {
    font-weight: 400;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    margin: 0 0 1rem;
}

.page-lead {
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300;
    opacity: 0.7;
}

.breadcrumb {
    margin-block-end: 1.5rem;
    padding: 0;               
    background: none;        
    backdrop-filter: none;    
    border-radius: 0;         
    max-inline-size: none;   
    color: var(--navy);      
    display: block;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.8rem;
    color: var(--navy);
}

.breadcrumb li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb li:not(:first-child)::before {
    content: "\203A";
    opacity: 0.5;
}

.breadcrumb a {
    color: var(--navy);
    text-decoration: none;
    opacity: 0.65;
    transition: opacity 0.2s;
}

.breadcrumb a:hover {
    opacity: 1;
}

.breadcrumb [aria-current="page"] {
    font-weight: 600;
}

/* ===== Treatments list (service pages) ===== */
.treatments-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-block-start: 1px solid rgb(20, 58, 92, 0.85);
}

.treatments-list li {
    padding: 1.05rem 0;
    border-block-end: 1px solid rgb(20, 58, 92, 0.85);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--navy);
}

/* links inside the list (e.g. operations) look like the plain rows */
.treatments-list a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s, padding-inline-start 0.2s;
}

.treatments-list a:hover {
    opacity: 0.7;
    padding-inline-start: 0.5rem;
}

/* ===== Article / leaflet pages ===== */
.article {
    margin-block-start: 1rem;
    color: var(--navy);
}

/* tighten the gap under the heading on treatment article pages */
.patient-head:has(+ .article) {
    padding-block-end: 1rem;
}

.article p,
.article ul,
.article ol {
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0 0 1.25rem;
}

.article ul,
.article ol {
    padding-inline-start: 1.25rem;
    display: grid;
    gap: 0.5rem;
    line-height: 1.6;
}

.article h2 {
    font-weight: 500;
    font-size: clamp(1.2rem, 2.5vw, 1.55rem);
    line-height: 1.25;
    margin: 2.75rem 0 1rem;
}

.article h3 {
    font-weight: 600;
    font-size: 1.1rem;
    margin: 2rem 0 0.75rem;
}

.article a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.article strong {
    font-weight: 600;
}

.article-intro {
    font-style: italic;
    opacity: 0.7;
}

.article > :last-child {
    margin-block-end: 0;
}

/* self-assessment table (Eustachian tube page) */
.table-scroll {
    overflow-x: auto;
    margin: 0 0 1.25rem;
}

.etd-table {
    border-collapse: collapse;
    inline-size: 100%;
    min-inline-size: 32rem;
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.85rem;
    color: var(--navy);
}

.etd-table th,
.etd-table td {
    border: 1px solid var(--navy-20);
    padding: 0.6rem 0.5rem;
    text-align: center;
}

.etd-table thead th {
    font-weight: 600;
    background: var(--paper2);
}

.etd-table th.etd-q {
    inline-size: 45%;
}

.etd-table tbody th[scope="row"] {
    text-align: start;
    font-weight: 400;
}

/* procedure codes tables */
.codes-table {
    min-inline-size: 24rem;
}

.codes-table thead th,
.codes-table td {
    text-align: start;
}

.codes-table .code-col,
.codes-table tbody th[scope="row"] {
    inline-size: 9rem;
    white-space: nowrap;
    font-weight: 600;
}

/* ===== Locations (clinic tabs + cards) ===== */
.locations-lead {
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.7;
    max-inline-size: 42rem;
    margin: 0 0 2rem;
    color: var(--navy);
}

.location-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-block-end: 2.5rem;
}

.location-tab {
    font-family: 'Euclid', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--navy);
    background: transparent;
    border: 1px solid rgb(20, 58, 92, 0.35);
    border-radius: 999px;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.location-tab:hover {
    border-color: var(--navy);
}

.location-tab.is-active {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.location-panels {
    display: flex;
    flex-direction: column;
    gap: 6rem;
}

.location-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--navy);
    border-radius: 2rem;
    overflow: hidden;
    color: #fff;
}

.location-panels.is-filtered .location-card {
    display: none;
}

.location-panels.is-filtered .location-card.is-active {
    display: grid;
}

.location-card-media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.location-card-body {
    position: relative;
    padding: 3.5rem;
    display: flex;
    flex-direction: column;
}

.location-card-link {
    position: absolute;
    inset-block-start: 2.5rem;
    inset-inline-end: 3.5rem;
    inline-size: 3rem;
    block-size: 3rem;
    display: grid;
    place-items: center;
    border: 1px solid rgb(255, 255, 255, 0.4);
    border-radius: 999px;
    color: #fff;
    transition: background 0.2s, color 0.2s;
}

.location-card-link:hover {
    background: #fff;
    color: var(--navy);
}

.location-card-affil {
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--paper);
    opacity: 0.6;
    margin: 0 0 0.75rem;
}

.location-card-title {
    font-family: 'Euclid', sans-serif;
    font-weight: 400;
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    line-height: 1.05;
    margin: 0 0 1.25rem;
    max-inline-size: 80%;
}

.location-card-address {
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--paper);
    margin: 0 0 1.5rem;
}

.location-card-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-block-start: auto;
    padding-block-start: 1.75rem;
    border-block-start: 1px solid rgb(255, 255, 255, 0.15);
}

.location-meta-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--paper);
    opacity: 0.6;
    margin: 0 0 0.75rem;
}

.location-meta-text {
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgb(255, 255, 255, 0.9);
    margin: 0;
}

.location-meta-text a {
    color: #fff;
    text-decoration: none;
}

.location-meta-text a:hover {
    opacity: 0.7;
}

@media (max-width: 60rem) {
    .location-card,
    .location-card.is-active {
        grid-template-columns: 1fr;
    }

    .location-card-media img {
        block-size: 16rem;
    }

    .location-card-body {
        padding: 2.5rem 1.75rem;
    }

    .location-card-link {
        inset-inline-end: 1.75rem;
        inset-block-start: 2rem;
    }

    .location-card-title {
        max-inline-size: 70%;
    }

    .location-card-meta {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ===== Contact (split: navy aside + paper form) ===== */
.contact-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-block-size: 100vh;
}

.contact-aside {
    display: flex;
    align-items: center;
    background: var(--paper);
    color: var(--navy);
    padding: 4rem 3.5rem;
}

.contact-aside-inner {
    max-inline-size: 28rem;
    margin-inline-start: auto;
}

.contact-title {
    font-family: 'Euclid', sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0 0 1.5rem;
    color: var(--navy);
}

.contact-details {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-details li {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.contact-detail-icon {
    display: inline-flex;
    color: var(--navy);
    opacity: 0.7;
}

.contact-details a {
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.05rem;
    color: var(--navy);
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 0.2s;
}

.contact-details a:hover {
    opacity: 1;
}

.contact-address {
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--navy);
    opacity: 0.85;
    margin: 0 0 2rem;
}

.contact-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-block-end: 2rem;
    padding-block-start: 2rem;
    border-block-start: 1px solid rgb(20, 58, 92, 0.2);
}

.contact-meta-label {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--navy);
    opacity: 0.6;
    margin: 0 0 0.5rem;
}

.contact-meta-text {
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--navy);
    opacity: 0.9;
    margin: 0;
}

.contact-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.25rem;
}

.contact-social a {
    display: inline-flex;
    opacity: 0.75;
    transition: opacity 0.2s;
}

.contact-social a:hover {
    opacity: 1;
}

.contact-social img {
    inline-size: 1.4rem;
    block-size: 1.4rem;
    /* recolours the white social SVGs to ~var(--navy) */
    filter: brightness(0) saturate(100%) invert(37%) sepia(9%) saturate(1066%) hue-rotate(167deg) brightness(94%) contrast(86%);
}

.contact-form-panel {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 4rem 3.5rem;
}

.contact-form {
    inline-size: 100%;
    max-inline-size: 32rem;
    margin-inline-end: auto;
}

.contact-field {
    margin-block-end: 2.25rem;
}

.contact-field:first-child {
    margin-block-start: 6rem;
}

.contact-field label {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--navy);
    margin-block-end: 0.9rem;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    inline-size: 100%;
    box-sizing: border-box;
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: var(--navy);
    background: transparent;
    border: none;
    border-block-end: 1px solid rgb(20, 58, 92, 0.3);
    padding: 0 0 0.75rem;
    transition: border-color 0.2s;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    outline: none;
    border-block-end-color: var(--navy);
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: rgb(20, 58, 92, 0.45);
}

.contact-field textarea {
    resize: vertical;
    min-block-size: 6rem;
    line-height: 1.6;
}

.contact-select {
    appearance: none;
    cursor: pointer;
    padding-inline-end: 1.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23143A5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 1rem;
}

.contact-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 1rem;
    padding: 0.85rem 2rem;
    background: var(--navy);
    color: #fff;
    border: 1px solid var(--navy);
    border-radius: 0.4rem;
    font-family: 'Euclid', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
}

.contact-submit:hover {
    background: #030722;
}

@media (max-width: 60rem) {
    .contact-split {
        grid-template-columns: 1fr;
        min-block-size: 0;
    }

    .contact-aside,
    .contact-form-panel {
        padding: 11rem 1.75rem 3rem;
    }

    .contact-form-panel {
        padding-block-start: 3rem;
        align-items: stretch;
    }

    .contact-field:first-child {
        margin-block-start: 0;
    }

    .contact-aside-inner,
    .contact-form {
        max-inline-size: none;
        margin: 0;
    }

    .contact-meta {
        grid-template-columns: 1fr;
    }
}

/* ===== Request appointment (referral forms) ===== */
.referral-lead {
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--navy);
    max-inline-size: 46rem;
    margin: 0 0 2rem;
}

.req {
    color: var(--navy);
    font-weight: 600;
}

.referral-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-block-start: 3.5rem;   /* keeps the space the intro line used to occupy */
    margin-block-end: 2.5rem;
}

.referral-tab {
    font-family: 'Euclid', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--navy);
    background: transparent;
    border: 1px solid rgb(20, 58, 92, 0.35);
    border-radius: 999px;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.referral-tab:hover {
    border-color: var(--navy);
}

.referral-tab.is-active {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.referral-form {
    display: none;
}

.referral-form.is-active {
    display: block;
}

.referral-section {
    border: none;
    margin: 0;
    padding: 0;
}

.referral-section-title {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--navy);
    padding: 2.5rem 0 1.5rem;
    margin-block-end: 0.5rem;
    border-block-start: 1px solid rgb(20, 58, 92, 0.15);
}

.referral-section:first-of-type .referral-section-title {
    padding-block-start: 0;
    border-block-start: none;
}

.referral-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem 2.5rem;
}

.referral-field {
    display: flex;
    flex-direction: column;
}

.referral-field--full {
    grid-column: 1 / -1;
}

.referral-field label {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--navy);
    margin-block-end: 0.75rem;
}

.referral-field input,
.referral-field select,
.referral-field textarea {
    inline-size: 100%;
    box-sizing: border-box;
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: var(--navy);
    background: transparent;
    border: none;
    border-block-end: 1px solid rgb(20, 58, 92, 0.3);
    padding: 0 0 0.6rem;
    transition: border-color 0.2s;
}

.referral-field input:focus,
.referral-field select:focus,
.referral-field textarea:focus {
    outline: none;
    border-block-end-color: var(--navy);
}

.referral-field textarea {
    resize: vertical;
    min-block-size: 4rem;
    line-height: 1.6;
}

.referral-select {
    appearance: none;
    cursor: pointer;
    padding-inline-end: 1.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23143A5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 1rem;
}

.referral-file {
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 300;
    color: var(--navy);
}

/* privacy consent checkbox (contact + referral forms) */
.form-consent {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-block: 1.5rem 1.75rem;
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--navy);
    cursor: pointer;
}

.form-consent input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    flex-shrink: 0;
    margin: 0;
    border: 1px solid rgb(20, 58, 92, 0.5);
    border-radius: 0.25rem;
    background: transparent;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.form-consent input[type="checkbox"]:checked {
    border-color: var(--navy);
    background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.95rem no-repeat;
}

.form-consent input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

.form-consent a {
    color: var(--navy);
    text-decoration: underline;
}

.referral-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    background: var(--navy);
    color: #fff;
    border: 1px solid var(--navy);
    border-radius: 0.4rem;
    font-family: 'Euclid', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
}

.referral-submit:hover {
    background: #030722;
}

@media (max-width: 48rem) {
    .referral-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ===== Request appointment — split layout (sticky left) ===== */
.referral-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-block-size: 100vh;
}

.referral-aside {
    background: var(--paper);
    color: var(--navy);
    padding-inline: 3.5rem;
}

.referral-aside-inner {
    inline-size: 100%;
    max-inline-size: 28rem;
    margin-inline-start: auto;
    box-sizing: border-box;
    min-block-size: 100vh;
    padding-block: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: sticky;
    inset-block-start: 0;
}

.referral-intro {
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--navy);
    opacity: 0.85;
    max-inline-size: 24rem;
    margin: 0 0 2rem;
}

.referral-hours {
    padding-block-start: 2rem;
    border-block-start: 1px solid rgb(20, 58, 92, 0.2);
}

.referral-form-panel {
    background: #fff;
    padding: 9rem 3.5rem 4rem;
}

.referral-form-inner {
    inline-size: 100%;
    max-inline-size: 34rem;
    margin-inline-end: auto;
}

@media (max-width: 60rem) {
    .referral-split {
        grid-template-columns: 1fr;
        min-block-size: 0;
    }

    .referral-aside,
    .referral-form-panel {
        padding: 11rem 1.75rem 3rem;
    }

    .referral-form-panel {
        padding-block-start: 3rem;
    }

    .referral-aside-inner {
        position: static;
        min-block-size: 0;
        padding-block: 0;
        max-inline-size: none;
        margin: 0;
    }

    .referral-form-inner {
        max-inline-size: none;
        margin: 0;
    }
}

/* photo floated into a treatment article (text wraps around it) */
.article-photo {
    float: right;
    inline-size: 50%;
    max-inline-size: 36rem;
    block-size: auto;
    margin: 0.25rem 0 1.5rem 2.5rem;
    border-radius: 1rem;
}

@media (max-width: 40rem) {
    .article-photo {
        float: none;
        inline-size: 100%;
        max-inline-size: none;
        margin: 0 0 1.5rem;
    }
}

/* ===== Skip to content (hidden until keyboard focus) ===== */
.skip-link {
    position: absolute;
    inset-block-start: -3rem;
    inset-inline-start: 1rem;
    z-index: 20;
    padding: 0.6rem 1rem;
    background: #143A5C;
    color: #fff;
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: 0 0 0.5rem 0.5rem;
    transition: inset-block-start 0.2s ease;
}

.skip-link:focus {
    inset-block-start: 0;
}

/* ===== Medically reviewed byline ===== */
.medically-reviewed {
    font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.85rem;
    color: rgb(20, 58, 92, 0.85);
    margin: 0 0 1.5rem;
}

.medically-reviewed a {
    color: inherit;
    font-weight: 500;
    text-decoration: underline;
}

/* Primary (filled) button -> pink->violet gradient */
.hero-btn--solid{
  background: linear-gradient(120deg, var(--pink), var(--violet));
  border-color: transparent;
  color: #fff;
}
.hero-btn--solid:hover{
  background: linear-gradient(120deg, var(--violet), var(--pink));
}

/* Gradient-text highlight for hero headings */
.accent{
  background: linear-gradient(120deg, var(--pink), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* Inner-page hero: keep header clearance, drop the full-height.
   6rem top matches the case-studies page gap. */
.hero--inner{ min-block-size: 0; padding-block: 6rem 1rem; }
.hero--inner .hero-heading{ border-block-end: 0; padding-block-end: 0; }

/* Home hero: portrait of Paul inside a rounded "bubble" card */
.hero--bubble{
  display: grid;
  grid-template-columns: minmax(0, 1fr);  /* track fills the padded area so children centre evenly */
  justify-items: center;
  align-content: center;                /* centre the photo + name as one group */
  gap: 1.5rem;
  min-block-size: 100vh;
  box-sizing: border-box;
  padding: 5.5rem 1.5rem 2.5rem;          /* top clears the fixed nav */
  background: var(--paper);
  border-block-end: 2px solid #e6e9ef;   /* section divider */
}
.hero-bubble{
  margin: 0;
  box-sizing: border-box;
  inline-size: min(100%, 30rem);          /* never wider than the padded area → even gaps both sides */
  aspect-ratio: 1122 / 1402;            /* match the photo so it fills the bubble with no side-cropping */
  max-block-size: 72vh;                 /* leave room below for the name + title */
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(var(--navy-rgb), 0.18);
}
.hero-caption{
  text-align: center;
}
.hero-name{
  font-family: 'Playfair Display', Georgia, serif;   /* matches his name on paul-trikha-landing-page */
  font-weight: 400;
  font-size: clamp(1.6rem, 4.5vw, 2.75rem);
  line-height: 1.1;
  color: var(--navy);
  margin: 0;
}
.hero-role{
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0.75rem 0 0;
}
.hero-bubble-img{
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;                    /* the whole bubble IS the picture */
  object-position: center;
}
/* insurer strip — a quieter take on the Kent & Sussex hero-logos.
   Phones: 4 per row like theirs; laptop+ switches to a spread flex row below */
.hero-insurers{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  align-items: center;
  gap: 1.1rem 1rem;
  inline-size: min(100%, 30rem);
  margin-block-start: 0.25rem;
}
.hero-insurers img{
  block-size: auto;
  inline-size: auto;
  max-inline-size: 100%;
  max-block-size: 1.05rem;
  opacity: 0.55;
  filter: grayscale(1);
}
/* Cigna's stacked lockup needs extra height for its wordmark to read level */
.hero-insurers img[src*="cigna.svg"]{ max-block-size: 1.8rem; }

/* laptop+: spread across the same width as the grey photo box */
@media (min-width: 1000px){
  .hero-insurers{
    display: flex;
    flex-wrap: wrap;
    inline-size: min(100%, 86rem);
    justify-content: space-between;
  }
  .hero-insurers img{ max-block-size: 1.25rem; }
  .hero-insurers img[src*="cigna.svg"]{ max-block-size: 2.1rem; }
}

/* standalone insurers band — the strip lives below Locations, not in the hero */
.insurers-band{
  background: var(--paper);
  border-block-start: 2px solid #e6e9ef;
  padding: 2.5rem 2rem;
  display: flex;
  justify-content: center;
}
.insurers-band .hero-insurers{
  margin-block-start: 0;
}

/* phones/tablets: the hero fills the phone screen, photo + name centred.
   Sizing copied from the landing page hero: taller than the viewport so it
   fully covers the first screen in any browser-chrome state. */
@media (max-width: 999px){
  .hero--bubble{
    min-block-size: calc(100lvh + 6rem);
    padding-block-end: 8rem;   /* balances the 6rem below-fold overflow, lifting the photo group */
    gap: 1.25rem;
  }
  .hero-bubble{
    inline-size: min(88%, 26rem);
    max-block-size: 52vh;
  }
}

/* laptop+: the studio grey runs edge to edge; the photo sits centred and its
   sides fade into a matching CSS gradient so the join is invisible */
@media (min-width: 1000px){
  .hero--bubble{ padding-inline: 2rem; }
  .hero-bubble{
    inline-size: min(100%, 86rem);        /* same content width as the Specialisms band */
    aspect-ratio: auto;
    block-size: min(72vh, 46rem);
    max-block-size: none;
    background: linear-gradient(180deg, #dcdadd 0%, #e0dedf 50%, #d8d6d9 100%);  /* matches the studio grey backdrop */
    display: flex;
    justify-content: center;
  }
  .hero-bubble-img{
    inline-size: auto;
    block-size: 100%;
    object-fit: contain;
  }
}

/* ===== Intro video band (stadium pill → squares off on play) ===== */
.video-band{
  background: white;
  padding: 3.5rem 0;
  border-block-end: 2px solid #e6e9ef;   /* section divider */
}
.video-band-inner{
  max-inline-size: 56rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ===== Credentials in the About band ===== */
.credentials{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem 3rem;
  margin-block-start: 2rem;
  padding-block-start: 1.75rem;
  border-block-start: 1px solid var(--navy-15);
}
@media (min-width: 700px){ .credentials{ grid-template-columns: 1fr 1fr; } }
.cred-title{
  font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  margin: 0 0 0.6rem;
}
.cred-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.cred-list li{
  font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--navy);
  opacity: 0.85;
}
.cred-list strong{ font-weight: 500; }

/* ===== Publications page ===== */
.pub-list{
  max-inline-size: 46rem;
  margin-inline: auto;
  padding: 0 2rem 3.5rem;
}
.pubs{
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: pub;
  display: grid;
  gap: 1.6rem;
}
.pub{
  counter-increment: pub;
  position: relative;
  padding-inline-start: 2.75rem;
}
.pub::before{
  content: counter(pub, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.05rem;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--accent);
}
.pub-title{
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--navy);
}
.pub-meta, .pub-authors{
  margin: 0;
  font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--slate);
}
.pub-authors{ opacity: 0.8; }

/* courses for GPs */
.gp-courses{
  max-inline-size: 46rem;
  margin-inline: auto;
  padding: 0 2rem 3.5rem;
}
.gp-courses .faq-head{ margin-block-end: 1.25rem; }
.gp-course-list li a{ color: var(--deep); }

/* YouTube embed — responsive 16:9, rounded like the intro video */
.yt-embed{
  position: relative;
  max-inline-size: 30rem;   /* modest player, not a full-width stage */
  aspect-ratio: 16 / 9;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(var(--navy-rgb), 0.12);
}
/* home-player facade treatment, but keep the rounded-rect radius (no pill) */
.yt-embed.sv,
.yt-embed.sv.expanded{ border-radius: 1.25rem; }
.yt-embed iframe{
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

/* ===== Research & publications — feature card (ported from the landing page) ===== */
.research-note{
  background: #f6f8fb;   /* the landing page's section grey */
  padding: 3rem 0;
}
.research-note-inner{
  max-inline-size: 56rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.note-card{
  max-inline-size: 21rem;   /* phones: compact stacked card */
  margin-inline: auto;
  background: #fff;   /* white card on the grey band */
  border-radius: 1.25rem;
  overflow: hidden;   /* clip photo top corners to the card */
  box-shadow: 0 24px 50px rgba(var(--navy-rgb), 0.12);
}
.note-media{
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.note-media img{
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 110%;
  transform: scale(1.55);   /* zoom crop tuned for the lecture photo */
  transform-origin: center 52%;
  display: block;
}
.note-body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.4rem 1.4rem 1.5rem;
}
.note-text{
  font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--slate);
  margin: 0 0 1.1rem;
}
.note-cta{
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: 0.7rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 0.7rem;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.note-cta:hover{ background: var(--navy-deep); transform: translateY(-1px); }

/* desktop: wide card — photo left, text right — so it stays one screen tall */
@media (min-width: 800px){
  .note-card{
    max-inline-size: 100%;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: stretch;
  }
  .note-media{
    aspect-ratio: auto;
    block-size: 100%;
    min-block-size: 26rem;
  }
  .note-media img{
    transform: none;   /* the tight zoom crop is only for the small stacked card */
    object-position: center 22%;
  }
  .note-body{
    padding: 2.5rem 2.75rem;
    justify-content: center;
  }
  .note-text{
    font-size: 0.95rem;
    line-height: 1.7;
    margin-block-end: 1.5rem;
  }
}

/* Standard section divider: short accent tick (1.5px) + hairline rule (1px) */
.section-divider{
  display: flex;
  align-items: center;
  margin-block-end: 1.75rem;
}
.section-tick{ inline-size: 1.75rem; block-size: 1.5px; background: var(--accent); }
.section-rule{ flex: 1; block-size: 1px; background: var(--navy-15); }

/* inside a section header, pin the divider to the bottom so it hugs the heading */
.testimonials-header .section-divider,
.services-head .section-divider{
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  margin: 0;
}

.video-band-body{
  margin-block-start: 2.25rem;   /* text runs the full width of the video above */
}
.video-band-body p{
  font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--navy);
  opacity: 0.85;
  margin: 0 0 1.1rem;
}
.video-band-body p:last-child{ margin-block-end: 0; }

.sv{
  position: relative;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
  line-height: 0;
  border-radius: 999px;                 /* really round at rest — matches the play pill */
  transition: border-radius 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  background: #000;
}
.sv.expanded{ border-radius: 1.25rem; cursor: default; }  /* squares off to the player on play */

.sv-video{ inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

.sv-shade{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(var(--navy-rgb), 0.30);  /* gentle dim so the white Play pill pops */
  transition: opacity 0.45s ease;
}

.sv-play{
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
  color: var(--navy);
  border: none;
  border-radius: 999px;
  padding: 0.85rem 1.5rem;
  font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.sv-play svg{ inline-size: 1.05rem; block-size: 1.05rem; }
.sv-play-time{ color: var(--accent); font-weight: 600; }

/* once started, hide the pill/dim and hand over to the native controls */
.sv.expanded .sv-shade,
.sv.expanded .sv-play{ opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce){ .sv{ transition: none; } }

/* ---- Enquiry form ---- */
.form{ display:grid; gap:1.1rem; max-inline-size: 40rem; }
.field{ display:grid; gap:0.4rem; }
.field label{
  font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase;
  font-weight:500; color: var(--navy);
}
.field input, .field select, .field textarea{
  font: inherit;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--navy-20);
  border-radius: 0.6rem;
  padding: 0.8rem 0.9rem;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .25);
}
.field textarea{ resize: vertical; min-block-size: 8rem; }
.form .hero-btn--solid{ justify-self: start; font-size: 0.7rem; padding: 0.85rem 1.5rem; }
.form-note{
  margin:0; padding:0.85rem 1rem; border-radius:0.6rem;
  background: rgba(var(--accent-rgb), .10); color: var(--deep); font-size:0.9rem;
}

/* inline field errors */
.field-err{ font-size: 0.78rem; color: var(--deep); display: none; }
.field-err.show{ display: block; }
.field input.is-invalid, .field textarea.is-invalid{
  border-color: var(--deep);
  box-shadow: 0 0 0 3px rgba(158, 63, 88, 0.12);
}

/* consent checkbox row */
.field-consent .consent-row{ display: flex; align-items: flex-start; gap: 0.6rem; }
.field-consent input[type="checkbox"]{
  inline-size: 1.05rem; block-size: 1.05rem; margin-block-start: 0.15rem;
  flex-shrink: 0; accent-color: var(--navy); cursor: pointer;
}
.field-consent .consent-text{
  font-size: 0.85rem; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--slate); line-height: 1.5; cursor: pointer;
}
.field-consent .consent-text a{ color: var(--deep); }

/* submit button loading spinner */
.btn-submit .btn-spinner{
  inline-size: 1rem; block-size: 1rem; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45); border-block-start-color: #fff;
  display: none; animation: spin 0.7s linear infinite;
}
.btn-submit.is-loading{ opacity: 0.9; }
.btn-submit.is-loading .btn-spinner{ display: inline-block; }
@keyframes spin{ to { transform: rotate(360deg); } }

.form-status{ margin: 0; font-size: 0.9rem; }
.form-status-error{ color: var(--deep); }

/* success confirmation */
.form-success{
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.65rem;
  max-inline-size: 40rem; padding: 1.75rem; border-radius: 0.9rem;
  background: rgba(var(--accent-rgb), 0.08); border: 1px solid var(--navy-15);
}
.form-success:focus{ outline: none; }
.form-success-icon{
  inline-size: 2.75rem; block-size: 2.75rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--navy); color: #fff;
}
.form-success-title{ font-size: 1.2rem; font-weight: 500; color: var(--navy); margin: 0; }
.form-success-body{ font-size: 0.95rem; line-height: 1.6; color: var(--slate); margin: 0; }
/* keep the hidden attribute working despite the display rules above */
.form[hidden], .form-success[hidden]{ display: none; }

/* ---- Contact details (enquire page) ---- */
.contact-list{ list-style:none; margin:0; padding:0; }
.contact-list li{ padding-block:1.1rem; border-block-end:1px solid var(--navy-20); }
.contact-list li:first-child{ padding-block-start:0; }
.contact-list .k{
  font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase;
  color: var(--pink); margin-block-end:0.35rem;
}
.contact-list a{ color: var(--navy); text-decoration:none; font-size:1.05rem; }
.contact-list a:hover{ color: var(--pink); }

/* ---- Enquire page two-column layout ---- */
.enquire-contact{
  max-inline-size: 40rem; margin-inline: auto; padding-inline: 2rem;
  display: grid; gap: 2rem; padding-block: 0.5rem 3.5rem;
}
.enquire-contact > *{ min-inline-size: 0; }   /* long content (e.g. the email button) must shrink, not push the card off-centre */

/* the "nice box" — form on a dark navy card, like the landing page */
.contact-card{
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: 1.25rem;
  padding: 2.25rem 1.9rem;
  box-shadow: 0 24px 50px rgba(var(--navy-rgb), 0.18);
  color: #fff;
}
.contact-card .field label{ color: rgba(255, 255, 255, 0.55); }
.contact-card .field input,
.contact-card .field textarea{
  background: transparent;
  border: none;
  border-block-end: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0;
  padding: 0.5rem 0.15rem;
  color: #fff;
  font-weight: 300;
}
.contact-card .field input::placeholder,
.contact-card .field textarea::placeholder{ color: rgba(255, 255, 255, 0.4); }
.contact-card .field input:focus,
.contact-card .field textarea:focus{ border-color: var(--pink); box-shadow: none; }
.contact-card .field input.is-invalid,
.contact-card .field textarea.is-invalid{ border-block-end-color: #eaa9a9; box-shadow: none; }
.contact-card .field-err{ color: #eaa9a9; }
.contact-card .field-consent input[type="checkbox"]{ accent-color: var(--pink); }
.contact-card .consent-text{ color: rgba(255, 255, 255, 0.65); }
.contact-card .consent-text a{ color: #fff; }
.contact-card .form-success{ background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.15); }
.contact-card .form-success-icon{ background: #fff; color: var(--navy); }
.contact-card .form-success-title{ color: #fff; }
.contact-card .form-success-body{ color: rgba(255, 255, 255, 0.75); }
.contact-card .form-success-meta{ font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); margin: 0.35rem 0 0; }
.contact-card .form-success-meta a{ color: #fff; font-weight: 500; text-decoration: none; }
.contact-card .form-success-meta a:hover{ text-decoration: underline; }

/* reason tick boxes — same quick options as the landing page form */
.contact-card .reason-heading{
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  margin-block-end: 0.35rem;
}
.contact-card .reason-options{ display: flex; flex-direction: column; gap: 0.75rem; }
.contact-card .reason-option{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  font-weight: 300;
  text-transform: none;      /* undo the uppercase .field label styling */
  letter-spacing: normal;
}
.contact-card .reason-option input[type="checkbox"]{
  inline-size: 1rem;
  block-size: 1rem;
  margin: 0;
  accent-color: var(--pink);
  flex: 0 0 auto;
  cursor: pointer;
}
/* the "Additional information" box is short like the landing form, not a tall message box */
.contact-card .field textarea{ min-block-size: 5rem; }

/* full-width, thin, white submit button */
.contact-card .btn-submit{
  justify-self: stretch;
  inline-size: 100%;
  justify-content: center;
  background: #fff;
  color: var(--navy);
  border-color: #fff;
  padding: 0.8rem 1.25rem;
  font-weight: 500;
}
.contact-card .btn-submit:hover{ background: var(--paper); border-color: var(--paper); }

/* direct contact under the card — just phone + email */
/* phone + email — grey full-width buttons inside the navy card, under Send message */
.contact-direct{ display: flex; flex-direction: column; gap: 0.85rem; margin-block-start: 1rem; }
.contact-direct-item{
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  box-sizing: border-box;   /* keep the padding inside the 100% width */
  inline-size: 100%;
  background: rgba(255, 255, 255, 0.10); color: #fff;   /* ghost button — clearly secondary to the solid white Send message */
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0.4rem;
  padding: 0.6rem 1.25rem;   /* a step smaller than Send message */
  text-decoration: none;
  font-size: 0.82rem; font-weight: 500;
  transition: background 0.2s ease, transform 0.2s ease;
}
.contact-direct-item svg{ inline-size: 1.1rem; block-size: 1.1rem; color: var(--accent); flex-shrink: 0; }
.contact-direct-item span{ min-inline-size: 0; overflow-wrap: anywhere; }
.contact-direct-item:hover{ background: rgba(255, 255, 255, 0.18); transform: translateY(-1px); }
/* small phones: compact the buttons so the email address fits on one line */
@media (max-width: 480px){
  .contact-direct-item{ font-size: 0.75rem; padding-inline: 0.75rem; gap: 0.45rem; }
}

/* small helper */
.measure{ max-inline-size: 46rem; }

header.hidden{ transform: none; opacity: 1; pointer-events: auto; }

.menu-toggle{ border-color: var(--navy); }

/* Keep the mobile slide-out overlay legible (navy panel, light text) */
@media (width < 1000px){
  /* Closed bar: brand left, hamburger right (is-open overrides with grid) */
  nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.4rem 1.25rem;        /* tighter than the 3rem desktop gutter */
    gap: 1rem;
  }
  .brand-text{ font-size: 0.8rem; letter-spacing: 0.12em; }
  .menu-toggle{ flex-shrink: 0; }   /* never let the wide brand squeeze it to 0 */
  nav.is-open .brand-text{ color: var(--navy); }
  nav.is-open .cta{
    color: var(--navy);
    border-color: var(--navy-40);
    border-radius: 0;
  }
}

/* Desktop: brand on the left, links centred in the bar */
@media (min-width: 1000px){
  nav{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  nav .brand{ justify-self: start; }
  nav > ul{ justify-self: center; }
}

/* ===== Case studies — polaroid cards ===== */
.case-studies{
  background: var(--navy);
  color: var(--paper);
  padding: 6rem 0 3.5rem;
}
body.case-studies-page .case-studies{ padding-block-start: 6rem; }

/* whole page is navy → flip the nav + CTA button to light (menu closed only) */
body.case-studies-page{ background: var(--navy); }
body.case-studies-page nav:not(.is-open) .brand-text,
body.case-studies-page nav:not(.is-open) ul a{ color: var(--paper); }
body.case-studies-page nav:not(.is-open) .menu-toggle{ border-color: var(--paper); color: var(--paper); }

/* case-studies page: the open menu overlay goes navy instead of paper */
@media (width < 1000px){
    body.case-studies-page nav.is-open{ color: var(--paper); }
    body.case-studies-page nav.is-open::before{
        background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    }
    body.case-studies-page nav.is-open .brand-text{ color: var(--paper); }
    body.case-studies-page nav.is-open ul a{ color: var(--paper); }
    body.case-studies-page nav.is-open > ul > li{ border-block-end-color: rgba(255, 255, 255, 0.15); }
    body.case-studies-page nav.is-open > ul > li:first-child{ border-block-start-color: rgba(255, 255, 255, 0.15); }
    body.case-studies-page nav.is-open .menu-toggle{ border-color: rgba(255, 255, 255, 0.55); color: var(--paper); }
}
body.case-studies-page .hero-btn--solid{ background: #fff; color: var(--navy); border-color: #fff; }
body.case-studies-page .hero-btn--solid:hover{ background: var(--paper); border-color: var(--paper); }

/* navy footer to match the page */
body.case-studies-page .site-footer{ background: var(--navy); color: rgba(255, 255, 255, 0.7); }
body.case-studies-page .footer-logo .brand-text{ color: var(--paper); }
body.case-studies-page .footer-blurb{ color: rgba(255, 255, 255, 0.7); }
body.case-studies-page .footer-eyebrow{ color: var(--paper); }
body.case-studies-page .footer-links a{ color: rgba(255, 255, 255, 0.7); }
body.case-studies-page .footer-links a:hover{ color: #fff; }
body.case-studies-page .footer-social a{ background: rgba(255, 255, 255, 0.10); }
body.case-studies-page .footer-social img{ filter: brightness(0) invert(1); }   /* white icons on the navy footer */
body.case-studies-page .footer-social a:hover{ background: #fff; }
body.case-studies-page .footer-social a:hover img{ filter: none; }
body.case-studies-page .footer-bottom{ border-block-start-color: rgba(255, 255, 255, 0.18); }
body.case-studies-page .footer-legal a{ color: rgba(255, 255, 255, 0.7); }
body.case-studies-page .footer-legal a:hover{ color: #fff; }
body.case-studies-page .footer-bottom-right{ color: rgba(255, 255, 255, 0.7); }
body.case-studies-page .footer-brand-credit{ color: #fff; }

/* navy treatment for the other listing pages (Expertise & Blog) that share the
   case-studies-page body class — flip the inner-hero and feature-block text */
body.case-studies-page .hero-text{ color: var(--paper); }
body.case-studies-page .hero--inner .hero-heading{
  color: rgba(255, 255, 255, 0.55);
  border-block-end-color: rgba(255, 255, 255, 0.18);
}
body.case-studies-page .hero--inner .hero-heading strong{ color: var(--paper); }
body.case-studies-page .hero--inner .hero-body{ color: var(--paper); opacity: 0.75; }

body.case-studies-page .expertise-item{ border-block-start-color: rgba(255, 255, 255, 0.15); }
body.case-studies-page .expertise-item:last-child{ border-block-end-color: rgba(255, 255, 255, 0.15); }
body.case-studies-page .expertise-body .testimonials-heading{ color: rgba(255, 255, 255, 0.55); }
body.case-studies-page .expertise-body .testimonials-heading strong{ color: var(--paper); }
body.case-studies-page .expertise-desc{ color: var(--paper); opacity: 0.75; }
body.case-studies-page .expertise-more{ color: var(--paper); }
body.case-studies-page .expertise-more:hover{ color: #fff; border-color: #fff; }

/* case-studies page: journey band sits on the flat navy page */
.journey--cases{
  background: transparent;
  padding-block: 6rem 3.5rem;
}
.journey--cases .journey-card-arrow{
  inset-block-end: auto;
  inset-inline-start: auto;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
}

.case-studies-inner{
  max-inline-size: 84rem;
  margin-inline: auto;
  padding-inline: 2rem;
}

.case-studies-head{
  text-align: left;
  margin-block-end: 3.5rem;
}
.case-studies-head .testimonials-heading{ color: rgba(255, 255, 255, 0.55); }
.case-studies-head .testimonials-heading strong{ color: var(--paper); }
.case-studies-head .section-divider{ margin: 0.5rem 0 0; }
.case-studies-head .section-rule{ background: rgba(255, 255, 255, 0.18); }

/* case studies as journey-style photo cards */
.case-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-inline-size: 30rem;
  margin-inline: auto;
}
.case-grid .journey-card{
  inline-size: 100%;
}
.case-grid .journey-card-arrow{
  inline-size: 2.4rem;
  block-size: 1.9rem;
  inset-block-end: auto;
  inset-inline-start: auto;
  inset-block-start: 0.9rem;
  inset-inline-end: 0.9rem;
}
.case-grid .journey-card-arrow svg{ inline-size: 0.9rem; block-size: 0.9rem; }
.case-grid .journey-card::after{
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.72) 100%);
}
.journey-card-caption{
  position: absolute;
  z-index: 1;
  inset-block-end: 1rem;
  inset-inline: 1.1rem;
}
.journey-card-caption .journey-card-title{
  position: static;
  inset: auto;
  font-size: 1.1rem;
}
.journey-card-sub{
  margin: 0.3rem 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.65);
}

.polaroid-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 3rem 2rem;
  align-items: start;
  justify-items: center;
}

.case-study{
  display: flex;
  flex-direction: column;
  align-items: center;
  inline-size: 100%;
  max-inline-size: 14rem;
  text-decoration: none;
  color: inherit;
}
/* whole card is a link — lift the polaroid on hover/focus anywhere on it */
.case-study:hover .polaroid,
.case-study:focus-visible .polaroid{
  transform: translateY(-6px) scale(1.02) rotate(0deg);
  box-shadow: 0 26px 55px rgba(0, 0, 0, 0.45);
}

/* the polaroid frame */
.polaroid{
  margin: 0;
  inline-size: 100%;
  background: #fff;
  padding: 0.6rem 0.6rem 0;
  border-radius: 3px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.case-study:nth-child(odd)  .polaroid{ --tilt: -2.5deg; }
.case-study:nth-child(even) .polaroid{ --tilt: 2deg; }
.case-study:nth-child(3n)   .polaroid{ --tilt: -1deg; }

.polaroid:hover,
.polaroid:focus-within{
  transform: translateY(-6px) scale(1.02) rotate(0deg);
  box-shadow: 0 26px 55px rgba(0, 0, 0, 0.45);
}

.polaroid-photo{
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(135deg, #dfe7ec, #c4d2db);
}
.polaroid-photo img{
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.polaroid-caption{
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--navy);
  text-align: center;
  padding: 0.6rem 0.4rem 0.8rem;
}

/* case copy beneath the polaroid */
.case-study-body{
  margin-block-start: 1.25rem;
  text-align: center;
}
.case-study-tag{
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0;
}
.case-study-title{
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 0.35rem;
}

/* ===== Case study detail pages ===== */
.case-detail{
  max-inline-size: 46rem;
  margin-inline: auto;
  padding: 0 2rem 3.5rem;
}
.case-detail-photo{
  margin: 0 0 2rem;
}
.case-detail-photo img{
  display: block;
  inline-size: 100%;
  max-inline-size: 30rem;
  border-radius: 1.25rem;
}
/* landscape news photos can use the full column */
.case-detail-photo--wide img{ max-inline-size: 100%; }
.case-detail .hero-body{ margin-block-end: 1.25rem; }
.case-detail h2{
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--navy);
  margin: 2rem 0 0.75rem;
}
.case-detail ul{
  margin: 0 0 1.25rem;
  padding-inline-start: 1.2rem;
}
.case-detail ul li{
  font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--navy);
  opacity: 0.85;
  margin-block-end: 0.6rem;
}
.case-detail ul li strong{ font-weight: 500; }
.case-quote{
  margin: 2rem 0;
  font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--navy);
  opacity: 0.85;
}
.case-quote cite{
  display: block;
  margin-block-start: 0.5rem;
  font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
  font-style: normal;
  font-size: 0.85rem;
  color: var(--slate);
}
.case-detail .expertise-more{ margin-block-start: 0.5rem; }

/* expertise detail pages — photo left, text right on desktop.
   The image is absolutely positioned so the text column sets the height
   and the photo crops to match it. */
@media (min-width: 1000px){
  .case-detail--split{
    max-inline-size: 70rem;
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 4.5rem;
  }
  .case-detail--split .case-detail-photo{
    margin: 0;
    position: relative;
  }
  .case-detail--split .case-detail-photo img{
    position: absolute;
    inset: 0;
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100%;
    object-fit: cover;
  }
  .case-detail--split .case-detail-text > h2:first-child{
    margin-block-start: 0;
  }
  .case-detail--split .case-detail-text > :last-child{
    margin-block-end: 0;
  }

  /* case study pages — same photo-left/text-right split, but the stories
     are long so the photo keeps its natural aspect and sticks on scroll */
  .case-detail--story{
    max-inline-size: 70rem;
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 4.5rem;
    align-items: start;
  }
  .case-detail--story .case-detail-photo{
    margin: 0;
    position: sticky;
    inset-block-start: 6.5rem;
  }
  .case-detail--story .case-detail-photo img{
    inline-size: 100%;
    max-inline-size: none;
  }
  .case-detail--story .case-detail-text > :first-child{
    margin-block-start: 0;
  }
  .case-detail--story .case-detail-text > :last-child{
    margin-block-end: 0;
  }
}

/* ===== FAQ accordion ===== */
.faq{
  max-inline-size: 46rem;
  margin-inline: auto;
  padding: 0 2rem 3.5rem;
}
.faq-head{ margin-block-end: 0.75rem; }
/* when the FAQ directly follows a full-width band (video on the young knee
   page, Doctify reviews on enquire), it needs its own breathing room above */
.video-band + .faq,
.doctify-reviews + .faq{ padding-block-start: 3.5rem; }
.faq-item{
  border-block-end: 1px solid var(--navy-15);
}
.faq-item summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 1.4rem;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-q{
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--navy);
}
.faq-toggle{
  flex-shrink: 0;
  display: grid;
  place-items: center;
  inline-size: 2.6rem;
  block-size: 2rem;
  border-radius: 999px;
  background: var(--navy);
  border: 1px solid var(--navy);
  color: #fff;
  transition: background 0.25s ease, color 0.25s ease;
}
/* plus drawn with two centred bars — the vertical one rotates away to leave a minus */
.faq-toggle::before,
.faq-toggle::after{
  content: "";
  grid-area: 1 / 1;
  inline-size: 0.55rem;
  block-size: 1px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.85;
}
.faq-toggle::after{
  transform: rotate(90deg);
  transition: transform 0.25s ease;
}
.faq-item.is-open .faq-toggle,
.faq-item[open]:not(.faq-js) .faq-toggle{
  background: transparent;
  color: var(--navy);
}
.faq-item.is-open .faq-toggle::after,
.faq-item[open]:not(.faq-js) .faq-toggle::after{ transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce){
  .faq-toggle::after{ transition: none; }
}
.faq-a{
  margin: 0;
  padding-block-end: 1.5rem;
  max-inline-size: 38rem;
}
/* answers slide open and closed — JS keeps <details> open and drives .is-open */
.faq-item.faq-js .faq-a-wrap{
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  padding-block-end: 0;
  transition: grid-template-rows 340ms cubic-bezier(0.22, 1, 0.36, 1),
              padding-block-end 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.faq-js .faq-a-wrap > .faq-a{
  min-block-size: 0;
  padding-block-end: 0;
  opacity: 0;
  transition: opacity 260ms ease;
}
.faq-item.faq-js.is-open .faq-a-wrap{ grid-template-rows: 1fr; padding-block-end: 1.5rem; }
.faq-item.faq-js.is-open .faq-a-wrap > .faq-a{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .faq-item.faq-js .faq-a-wrap,
  .faq-item.faq-js .faq-a-wrap > .faq-a{ transition: none; }
}
.faq .expertise-more{ margin-block-start: 2.25rem; }

/* ===== Blog listing ===== */
.blog-list{
  max-inline-size: 90rem;
  margin-inline: auto;
  padding: 0 2rem 3.5rem;
}

/* ===== Photo collage (blog posts) ===== */
.collage{
  margin-block: 3rem 1rem;
}
.collage-img{
  display: block;
  inline-size: 100%;
  border-radius: 1.25rem;
  box-shadow: 0 14px 32px rgba(var(--navy-rgb), 0.16);
}
.collage-top{
  inline-size: min(58%, 19rem);
  margin-inline: auto 4%;
}
.collage-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
  margin-block-start: -2.5rem;
}
.collage-offset{
  margin-block-start: 3.5rem;
}

/* gallery page wrapper — wide band like the Specialisms section */
.gallery-page{
  max-inline-size: 90rem;
  margin-inline: auto;
  padding: 0 2rem 3.5rem;
}
.gallery-page .expertise-more{ margin-block-start: 1.5rem; }

/* ===== Photo gallery + lightbox ===== */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 8rem;
  grid-auto-flow: dense;
  gap: 0.6rem;
  margin-block: 1.25rem 2rem;
}
@media (min-width: 800px){
  .gallery-grid{
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 10rem;
    gap: 0.75rem;
  }
}
.gallery-thumb{
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 0.75rem;
  overflow: hidden;
}
/* uniform tiles — no spanning, so thumbs are never upscaled and stay sharp */
.gallery-thumb img{
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.gallery-thumb:hover img,
.gallery-thumb:focus-visible img{ transform: scale(1.05); }

.lightbox{
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 22, 34, 0.92);
  padding: 3.5rem 1rem 1rem;
}
.lightbox[hidden]{ display: none; }
.lightbox img{
  max-inline-size: 100%;
  max-block-size: 100%;
  border-radius: 0.75rem;
}
.lightbox-btn{
  position: absolute;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close{ inset-block-start: 1rem; inset-inline-end: 1rem; }
.lightbox-prev{ inset-inline-start: 0.75rem; inset-block-start: 50%; transform: translateY(-50%); }
.lightbox-next{ inset-inline-end: 0.75rem; inset-block-start: 50%; transform: translateY(-50%); }

/* laptop+: FAQ spans the same wide band as the Specialisms section */
@media (min-width: 1000px){
  .faq{ max-inline-size: 90rem; }
}

.case-studies-cta{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-block-start: 5rem;
  text-align: center;
}
.case-studies-cta-text{
  font-size: 1.1rem;
  margin: 0;
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce){
  .polaroid{ transition: none; }
}

/* ===== Review platform badges (ported from the landing page) ===== */
.ratings-band{
  background: var(--paper);
  padding: 0 0 3.5rem;
}
.ratings-inner{
  max-inline-size: min(90rem, calc(100% - 4rem));
  margin-inline: auto;
}
.ratings{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rating-badge{
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #e6e9ef;
  border-radius: 16px;
  padding: 14px 16px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(14, 24, 48, 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.rating-badge:hover{
  box-shadow: 0 10px 24px rgba(14, 24, 48, 0.10);
  transform: translateY(-2px);
  border-color: #dde2ea;
}
.rating-score{
  flex-shrink: 0;
  inline-size: 50px;
  font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #0e1830;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.rating-detail{
  flex: 1;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 12px;
  border-inline: 1px solid #e6e9ef;
}
.rating-stars{
  display: inline-flex;
  gap: 1px;
  color: #f5a623;
}
.rating-stars svg{ inline-size: 13px; block-size: 13px; }
.rating-count{
  font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
  font-size: 10.5px;
  color: #7a8497;
  line-height: 1.3;
}
.rating-brand{
  flex-shrink: 0;
  inline-size: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand-doctify{ color: #33424f; }
.rating-brand img{ block-size: 22px; inline-size: auto; display: block; }
/* Top Doctors lockup is a wide horizontal logo — size to fit the 104px brand slot */
.brand-topdoctors img{ block-size: 17px; }
.brand-iwgc{ font-size: 13px; }
.brand-iwgc span:nth-child(1){ color: #2477c9; }
.brand-iwgc span:nth-child(2){ color: #1f2937; }
.brand-iwgc span:nth-child(3){ color: #2477c9; }
.brand-google img{ block-size: 34px; }
/* only go three-across when there's genuinely room; otherwise stay stacked */
@media (min-width: 1200px){
  .ratings{ flex-direction: row; }
  .rating-badge{ flex: 1; min-inline-size: 0; }
}

/* ===== Live Doctify reviews carousel (ported from the landing page) ===== */
.doctify-reviews{
  background: var(--card);
  border-block-start: 2px solid #e6e9ef;
  padding-block: 3rem;
}
.doctify-embed{
  max-inline-size: min(90rem, calc(100% - 4rem));
  margin-inline: auto;
}
.doctify-embed iframe.doctify-widget,
.doctify-embed .doctify-widget{
  display: block;
  inline-size: 100%;
  border: 0;
}
/* Kill the gap above "Excellent": the summary has a forced height that centres
   its content vertically. Drop the height only — keep Doctify's own centring.
   (attribute selector survives Doctify's changing hash suffix) */
.doctify-reviews [class*="doctify_carousel_widget_left_container"]{
  height: auto !important;
  margin-top: 0 !important;
}

/* ===== Locations — where Paul practices (ported from the landing page) ===== */
.affiliations{
  background: var(--paper);
  padding: 3.5rem 0;
  border-block-start: 2px solid #e6e9ef;   /* section divider, matches the footer rule */
}
.affiliations-inner{
  max-inline-size: min(90rem, calc(100% - 4rem));
  margin-inline: auto;
}
.affiliations-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-block-end: 2rem;
}
.loc-controls{
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
  margin-block-end: 1rem;   /* keep the pills clear of the divider line, as testimonials */
}
/* identical styling to the testimonials .carousel-arrow */
.loc-arrow{
  display: grid;
  place-items: center;
  inline-size: 4rem;
  block-size: 2.75rem;
  border: 1px solid var(--navy-75);
  border-radius: 999px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, background-image 0.2s;
  padding: 0;
}
.loc-arrow[data-direction="prev"]{ background-image: url('images/arrow-back-dark.svg'); }
.loc-arrow[data-direction="next"]{ background-image: url('images/arrow-forward-dark.svg'); }
.loc-arrow:hover{ background-color: var(--navy); border-color: var(--navy); }
.loc-arrow[data-direction="prev"]:hover{ background-image: url('images/arrow-back-light.svg'); }
.loc-arrow[data-direction="next"]:hover{ background-image: url('images/arrow-forward-light.svg'); }
.loc-arrow:disabled{ opacity: 0.3; cursor: not-allowed; }
@media (width < 500px){
  .loc-controls{ display: none; }   /* swipe on phones, same breakpoint as testimonials */
}
.loc-label{
  font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.affiliations-head .section-divider{ margin: 0.5rem 0 0; }
.affiliations-list{
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-block-end: 2px;
}
.affiliations-list::-webkit-scrollbar{ display: none; }
.loc-card{
  display: block;
  text-decoration: none;
  flex: 0 0 86%;
  scroll-snap-align: start;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: 26px;
  padding: 14px 14px 30px;
  color: #ffffff;
}
@media (min-width: 800px){
  .loc-card{ flex: 0 0 clamp(20rem, 26vw, 24rem); }
}
.loc-photo{
  position: relative;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.loc-photo img{
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
.loc-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  margin: 22px 0 0 6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.loc-card:hover .loc-link{
  background: var(--accent);
  border-color: var(--accent);
}
.loc-link svg{ inline-size: 18px; block-size: 18px; }
.loc-body{ padding: 0 6px; }
.loc-name{
  font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(20px, 7vw, 26px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 18px 0 12px;
  color: #ffffff;
}
.loc-address{
  font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--accent);
  margin: 0 0 18px;
}
.loc-desc{
  font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.70);
  margin: 0 0 26px;
}
.loc-hours-title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.loc-hours-title svg{ inline-size: 15px; block-size: 15px; }
.loc-hours{
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.loc-hours div{
  font-family: 'Euclid', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}
.loc-hours strong{
  font-weight: 600;
  color: #ffffff;
}
.loc-progress{
  block-size: 2px;
  margin: 16px 0 0;
  background: var(--navy-10);
  border-radius: 2px;
  overflow: hidden;
}
.loc-progress-fill{
  block-size: 100%;
  inline-size: 30%;
  background: var(--navy);
  border-radius: 2px;
  transition: width 0.15s ease;
}