@font-face{
    font-family:'PT Serif'; font-style:normal; font-weight:400; font-display:swap;
    src:url('assets/fonts/PTSerif-Regular.woff2') format('woff2');
  }
  @font-face{
    font-family:'PT Serif'; font-style:italic; font-weight:400; font-display:swap;
    src:url('assets/fonts/PTSerif-Italic.woff2') format('woff2');
  }
  @font-face{
    font-family:'PT Serif'; font-style:normal; font-weight:700; font-display:swap;
    src:url('assets/fonts/PTSerif-Bold.woff2') format('woff2');
  }
  @font-face{
    font-family:'Albert Sans'; font-style:normal; font-weight:400; font-display:swap;
    src:url('assets/fonts/AlbertSans-Regular.woff2') format('woff2');
  }
  @font-face{
    font-family:'Albert Sans'; font-style:normal; font-weight:500; font-display:swap;
    src:url('assets/fonts/AlbertSans-Medium.woff2') format('woff2');
  }
  :root{
    --aubergine:#420C1E; --maroon:#64263A; --merino:#F5E9D9; --cream:#FBF8F0;
    --salmon:#F5B6AF; --skyblue:#619DEB; --olive:#AA9C56; --offwhite:#F5F5F5;
    --content:1320px;
    --nav-h:89px; /* fixed-header height reserved at the top of each page */
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--cream);color:#2b2b2b;font-family:'PT Serif',Georgia,serif;}
  .sans{font-family:-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;}
  .serif{font-family:'PT Serif',Georgia,serif;}

  /* CONSOLIDATED HEADING SCALE — 2 sizes per level, desktop */
  .h1-std{font-family:'PT Serif',Georgia,serif;font-weight:400;font-size:60px;line-height:1.1;}
  .h2-feature{font-family:'PT Serif',Georgia,serif;font-weight:400;font-size:60px;line-height:68px;}
  .h2-std{font-family:'PT Serif',Georgia,serif;font-weight:400;font-size:46px;line-height:54px;}
  .h3-feature{font-family:'PT Serif',Georgia,serif;font-weight:400;font-size:40px;line-height:1.1;}
  .h3-card{font-family:'Albert Sans',sans-serif;font-weight:600;font-size:22px;line-height:1.3;}
  .wrap{max-width:var(--content);margin:0 auto;padding:0 40px;}
  .label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;}
  a{color:inherit;text-decoration:none;transition:opacity .2s ease;}
  a:hover{opacity:.7;}

  /* NAV / HERO */
  .hero-section{position:relative;background:var(--aubergine);padding-top:120px;padding-bottom:0;overflow:hidden;}
  /* Fixed, transparent header. Its height is reserved per page via --nav-h so
     nothing hides underneath it. */
  nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:24px 40px;max-width:var(--content);margin:0 auto;background:transparent;}
  /* Headroom.js states (basic tutorial): slide the header out on scroll-down,
     back in on scroll-up. */
  nav.headroom{will-change:transform;transition:transform .25s ease-in-out;}
  nav.headroom--pinned{transform:translateY(0);}
  nav.headroom--unpinned{transform:translateY(-100%);}
  /* When scrolled (not at top) and pinned, the header sits over light content,
     so switch the logo + "Medical professionals" to the dark-red variant. */
  nav.headroom--not-top.headroom--pinned:not(.nav-home) .isotype,
  nav.headroom--not-top.headroom--pinned:not(.nav-home) .nav-med{color:var(--aubergine);}
  /* Homepage-only header: hidden on load and over the hero intro, slides in
     once scrolled past the Headroom offset (~300px) and stays while scrolled.
     Its dark-text swap is driven by .nav-ink (set in JS from the actual end
     of the dark hero section) rather than by pin state. */
  nav.nav-home{transform:translateY(-100%);}
  nav.nav-home.headroom--not-top{transform:translateY(0);}
  nav.nav-home.headroom--top{transform:translateY(-100%);}
  nav.nav-ink .isotype,
  nav.nav-ink .nav-med,
  nav.nav-ink .nav-burger{color:var(--aubergine);}
  .nav-links{display:flex;align-items:center;gap:28px;background:var(--cream);color:var(--aubergine);border-radius:999px;padding:12px 28px;font-size:14px;}
  .mobile-home{display:none !important;}
  .nav-links a:hover{color:var(--maroon);}
  .nav-med{color:var(--aubergine);background:var(--salmon);font-size:14px;font-weight:400;padding:10px 20px;border-radius:999px;transition:opacity .25s ease,background-color .25s ease,color .25s ease;}
  .nav-med:hover{opacity:1;background:var(--aubergine);color:var(--salmon);}
  nav.headroom--not-top.headroom--pinned:not(.nav-home) .nav-med,
  nav.nav-ink .nav-med{color:var(--aubergine);background:var(--salmon);}
  .isotype{
    width: 134px;
    color:var(--cream);
    transition:color .25s ease;
  }

  .hero-copy{text-align:center;padding:0 40px 0;color:var(--cream);}
  .hero-logo{display:flex;justify-content:center;margin-bottom:44px;}
  .hero-logo svg{width:190px;height:auto;}
  /* On-load hero entrance (home only) — pure CSS, runs once: logo, headline
     and subline rise in with a small stagger. */
  @keyframes hero-rise{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}}
  @media (prefers-reduced-motion:no-preference){
    .hero-copy .hero-logo{animation:hero-rise .7s ease-out both;}
    .hero-copy h1{animation:hero-rise .7s ease-out .15s both;}
    .hero-copy .hero-sub{animation:hero-rise .7s ease-out .3s both;}
  }
  .hero-copy h1{font-family:'PT Serif',Georgia,serif;font-size:60px;font-style:normal;font-weight:400;line-height:1.1;margin:0;}
  .hero-copy .hero-sub{font-family:'Albert Sans',sans-serif;font-size:25px;font-style:normal;font-weight:400;line-height:30px;margin-top:16px;}

  .collage{width:100%;margin-top:100px;overflow:hidden;transform-origin:center top;will-change:transform;}
  .collage-row{display:flex;align-items:flex-end;justify-content:center;gap:35px;}
  .collage-row img{width:513.91px;height:530.23px;object-fit:cover;border-radius:15px;flex-shrink:0;display:block;}
  .collage-row .stack{display:flex;flex-direction:column;align-items:flex-start;gap:37px;flex-shrink:0;width:253px;height:609px;margin-bottom:60px;}
  .collage-row .stack img{width:253px;height:286px;}
  .hero-bottom-pad{height:56px;background:var(--aubergine);}

  .restoration{position:relative;margin-top:40px;height:700px;width:100%;}
  .restoration img{width:100%;height:100%;object-fit:cover;object-position:100% 56%;display:block;}
  .restoration .overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;text-align:center;}
  .restoration h2{color:var(--cream);font-family:'PT Serif',Georgia,serif;font-size:60px;font-style:normal;font-weight:400;line-height:68px;margin:0;padding:0 24px;}

  /* PRIVATE ROOM */
  .section{padding:64px 40px;}
  .cream-bg{background:var(--cream);}
  .private-room{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;max-width:var(--content);margin:0 auto;}
  .private-room h2{font-family:'PT Serif',Georgia,serif;font-size:60px;font-style:normal;font-weight:400;line-height:68px;color:var(--aubergine);margin:0;}
  .private-room p{margin-top:20px;max-width:90%;font-family:'Albert Sans',sans-serif;font-size:25px;font-style:normal;font-weight:400;line-height:normal;color:#4a4a4a;}
  .link-underline{margin-top:24px;display:inline-block;border-bottom:1px solid var(--aubergine);color:var(--aubergine);font-family:'Albert Sans',sans-serif;font-size:18px;font-style:normal;font-weight:500;line-height:normal;text-transform:uppercase;}
  /* Right-side image gallery bleeds ~30px past the viewport edge (clipped by the
     section's overflow) so the images sit flush and slightly cropped on the right. */
  .pr-grid{display:flex;gap:24px;width:calc(100% + 70px + max(0px,(100vw - 1400px)/2));}
  .pr-grid .col{display:flex;flex-direction:column;gap:49px;flex:1;min-width:0;}
  .pr-grid .col.offset{margin-top:37.12%;}
  .pr-grid img{width:100%;height:425px;object-fit:cover;border-radius:25px;display:block;}

  /* CUSTOM FITTINGS */
  .merino-bg{background:var(--merino);}
  .cf-section{padding-left:80px;padding-right:80px;}
  .cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:var(--content);margin:0 auto;align-items:start;}
  .cf-grid h2{font-family:'PT Serif',Georgia,serif;font-size:60px;font-style:normal;font-weight:400;line-height:68px;color:var(--aubergine);margin:0;}
  .cf-grid p{margin-top:20px;font-family:'Albert Sans',sans-serif;font-size:25px;font-style:normal;font-weight:400;line-height:normal;color:#4a4a4a;}
  .cf-links{margin-top:24px;display:flex;gap:32px;}
  .cf-links a{display:inline-flex;align-items:center;gap:10px;font-family:'Albert Sans',sans-serif;font-size:18px;font-style:normal;font-weight:500;line-height:normal;text-transform:uppercase;color:#642636;}
  .cf-links a .cf-chev{flex-shrink:0;}
  .cf-items{display:grid;grid-template-columns:200px 200px;column-gap:110px;row-gap:45px;justify-self:end;}
  .cf-items>div{max-width:200px;}
  .cf-items .icon{width:38px;height:38px;display:block;}
  .cf-items p{margin-top:8px;color:var(--aubergine);font-family:'PT Serif',Georgia,serif;font-size:20px;font-style:normal;font-weight:400;line-height:normal;max-width:none;}

  /* INSURANCE BANNER */
  .skyblue-bg{background:var(--skyblue);color:#fff;}
  .ins-grid{display:grid;grid-template-columns:380px 1fr;column-gap:110px;align-items:center;max-width:1440px;margin:0 auto;padding:56px 80px 56px 130px;}
  .ins-grid h2{font-family:'PT Serif',Georgia,serif;font-size:46px;font-style:normal;font-weight:400;line-height:54px;margin:0;}
  .ins-grid p{font-family:'Albert Sans',sans-serif;font-size:25px;font-style:normal;font-weight:400;line-height:normal;opacity:.9;}
  .ins-links{margin-top:16px;display:flex;flex-direction:column;gap:14px;}
  .ins-links a{font-family:'Albert Sans',sans-serif;font-size:16px;font-style:normal;font-weight:600;line-height:normal;text-decoration:none;display:inline-flex;align-items:center;gap:10px;width:fit-content;padding:12px 20px;border:1.5px solid #fff;border-radius:999px;background:transparent;color:#fff;transition:background-color .2s ease,color .2s ease;}
  .ins-links a::before{content:'↓';font-size:15px;line-height:1;}
  .ins-links a:hover{background:#fff;color:var(--skyblue);opacity:1;}

  /* SAFE SPACE */
  .aubergine-bg{background:var(--aubergine);color:var(--cream);}
  .safe-wrap{max-width:var(--content);margin:0 auto;}
  .safe-wrap h2{font-size:36px;margin:0;}
  .safe-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-top:40px;}
  .safe-grid .num{font-size:24px;color:var(--salmon);font-family:'PT Serif',Georgia,serif;}
  .safe-grid h3{font-size:13px;letter-spacing:.1em;margin:12px 0 0;}
  .safe-grid p{font-size:14px;line-height:1.6;color:rgba(251,248,240,.75);margin-top:8px;}
  .safe-cta{background:var(--salmon);color:var(--aubergine);border-radius:4px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;}
  .safe-cta .num{color:var(--aubergine);}
  .safe-cta a{margin-top:24px;font-family:'PT Serif',Georgia,serif;font-size:18px;line-height:1.3;}

.masonary-grid-home {
  grid-template-columns: repeat(3,1fr);
  gap: 32px;
}

.masonary-grid-home-item {
  background: rgba(100, 38, 58, 0.50);
  display: flex;
  flex-direction: column;
  padding: 18px 24px 32px 29px;
  align-items: flex-start;
  gap: 10px;
  border-radius: 25px;
  gap: 40px;
}

.masonary-grid-home-item .num {
  font-size: 45px;
}
.masonary-grid-home-item p {
  color: #F5B6AF;
  font-family:'Albert Sans';
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
  margin: 0;
}
.masonary-grid-home-item--header h3{
  margin: 0 !important;
  font-size: 22px;
  color: #F5B6AF;
  font-family:'Albert Sans';
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;

}

.section-masonary-title {
  color: #F5F5F5;
font-family: "PT Serif";
font-size: 60px !important;
font-style: normal;
font-weight: 400;
line-height: 68px; /* consolidated H2-Feature */
max-width: 50%;
padding-bottom: 60px;
}

.masonary-grid-home-item--big {
  background: #F5B6AF;
  grid-column: span 2;
  justify-content: center;
  align-items: center;
}

.masonary-grid-home-item--big .masonary-grid-home-item--header {
  width: 100%;
    display: flex;
    flex-direction: column;
    gap: 120px;

}

.masonary-grid-home-item--big h3 {
  text-align: center;
}

.masonary-grid-home-item--big .num{
  color: #420C1E;
}

.masonary-grid-home-item--big h3{
color: #420C1E;
font-family: "PT Serif";
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: 1.1
}

  /* CARE CARDS */
  .care-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:var(--content);margin:0 auto;}
  .care-card{border-radius:25px;overflow:hidden;display:flex;flex-direction:column;}
  .care-card .photo{position:relative;aspect-ratio:661.864/395.247;flex-shrink:0;min-height:0;}
  .care-card .photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .care-card .photo h3{position:absolute;left:0;right:0;top:42.67%;margin:0;padding:0 24px;text-align:center;white-space:nowrap;color:#fff;font-family:'PT Serif',Georgia,serif;font-size:40px;font-weight:400;line-height:1.1;}
  .care-card .olive{background:var(--olive);display:flex;flex-direction:column;gap:16px;padding:55px 45px 90px;flex:1;}
  .care-card .lede{margin:0;font-family:'PT Serif',Georgia,serif;font-size:35px;font-weight:400;line-height:40px;color:var(--offwhite);}
  .care-card .detail{margin:0;font-family:'Albert Sans',sans-serif;font-weight:400;font-size:25px;line-height:30px;color:var(--offwhite);}
  .care-card .care-more{align-self:flex-start;margin-top:4px;display:inline-flex;align-items:center;gap:10px;font-family:'Albert Sans',sans-serif;font-weight:400;font-size:25px;line-height:30px;color:var(--offwhite);}
  .care-card .care-more svg{flex-shrink:0;}

  /* FAQ */
  .faq-wrap{max-width:980px;margin:0 auto;}
  .faq-wrap h2{text-align:center;font-family:'PT Serif',Georgia,serif;font-size:46px;line-height:54px;font-weight:400;color:var(--aubergine);margin:0;}
  .faq-list{max-width:980px;margin:40px auto 0;}

  footer{background:var(--aubergine);color:var(--cream);padding:56px 40px;}
  .foot-wrap{max-width:var(--content);margin:0 auto;display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;}
  footer h4{font-size:12px;letter-spacing:.1em;color:rgba(251,248,240,.6);margin:0;}
  footer ul{list-style:none;padding:0;margin:12px 0 0;font-size:14px;line-height:1.9;}

  .figma-note{position:sticky;top:0;background:#222;color:#fff;font-size:12px;padding:6px 16px;z-index:50;font-family:sans-serif;}

  /* Products accordion (large PT Serif titles) */
  details.prod-item{border-top:1px solid #E5DED0;}
  details.prod-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 6px;}
  details.prod-item summary::-webkit-details-marker{display:none;}
  details.prod-item summary::after{content:'+';font-size:30px;font-weight:300;color:#420c1e;line-height:1;flex-shrink:0;font-family:system-ui,sans-serif;}
  details.prod-item[open]>summary::after{content:'–';}
  details.prod-item .prod-body{padding:0 6px 34px;font-family:'Albert Sans',sans-serif;font-weight:400;font-size:20px;line-height:1.62;color:#534b47;}
  .prod-body-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
  /* Product accordion body: copy (70%) + image (30%). fr units so the gap
     doesn't push the row past 100%. The image stretches to match the copy
     column's height (min 360px), so panels with extra content (e.g. subitems)
     grow the image proportionally instead of leaving it short. */
  .prod-body-media{display:grid;grid-template-columns:7fr 3fr;gap:34px;align-items:stretch;}
  .prod-body-media > p{margin:0;}
  .prod-body-media .prod-img{min-height:360px;border-radius:15px;overflow:hidden;background:#efe7d8;}
  .prod-body-media .prod-img img{width:100%;height:100%;object-fit:cover;display:block;}
  /* Placeholder state — remove once real images are dropped in. */
  .prod-body-media .prod-img.is-placeholder{display:flex;align-items:center;justify-content:center;font-family:'Albert Sans',sans-serif;font-size:14px;letter-spacing:0.08em;text-transform:uppercase;color:#a2937c;}
  .prod-body-text > p:first-child{margin:0;}
  .prod-subitem{padding:20px 0 0;margin-top:20px;border-top:1px solid #efe7d8;font-family:'Albert Sans',sans-serif;font-weight:400;font-size:20px;line-height:1.62;color:#534b47;}
  .prod-subitem:last-child{padding-bottom:0;}

  /* Insurance plan accordions (dark banner on compression/mastectomy) */
  .insurance-plan{border-bottom:1px solid rgba(251,248,240,0.25);padding-bottom:23px;}
  .insurance-plan summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:'Albert Sans',system-ui,sans-serif;font-size:22px;font-weight:600;color:#fbf8f0;}
  .insurance-plan summary::-webkit-details-marker{display:none;}
  .insurance-plan summary::after{content:'+';font-size:22px;font-weight:300;color:#fbf8f0;line-height:1;flex-shrink:0;}
  .insurance-plan[open]>summary::after{content:'\2013';}
  .insurance-plan ul{font-family:'Albert Sans',system-ui,sans-serif;font-size:20px;color:#fbf8f0;margin:10px 0 0;padding-left:24px;display:flex;flex-direction:column;gap:4px;}

  /* Educational accordion cards (mastectomy page) */
  /* Flow-based accordion: height is content-driven (never a fixed px value),
     so the title/body gap can't break when the title wraps or the screen
     resizes. The body height animates via a grid 0fr->1fr row; the image is
     an absolute overlay on the right that fades in. */
  /* min-height on the CARD (not the summary) equalises every closed header to
     the tallest (two-line) one while the summary stays auto-height, so the
     body's 35px gap is unaffected. */
  .edu-card{
      background:#AA9C56;
      position:relative;
      overflow:hidden;
      border-radius:25px 25px 0 0;
      min-height:220px;
  }
  /* Overlap adjacent cards by 2px so the rounded corners nest together. */
  .edu-card+.edu-card{margin-top:-20px;}
  /* Each card overlaps the previous one, so later cards paint ABOVE earlier
     ones — their rounded top sits over the previous card's bottom edge. */
  .edu-card:nth-child(1){z-index:1;}
  .edu-card:nth-child(2){z-index:2;}
  .edu-card:nth-child(3){z-index:3;}
  .edu-card:nth-child(4){z-index:4;}
  /* Header padding is CONSTANT (80px bottom) — it never animates, so opening
     the card can't produce the "shrinking header" effect. min-height fits a
     two-line title so every header is the same height regardless of wrapping. */
  .edu-card summary{position:relative;z-index:2;list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:70px 50px 80px;color:#fff;font-family:'PT Serif',Georgia,serif;font-size:45px;font-weight:400;line-height:1.05;}
  .edu-card summary span{display:block;max-width:min(600px,56%);}
  .edu-card summary::-webkit-details-marker{display:none;}
  .edu-card summary::after{content:'+';font-size:36px;font-weight:300;color:#fff;line-height:1;flex-shrink:0;font-family:system-ui,sans-serif;}
  .edu-card[open]>summary::after{content:'\2013';}

  /* Image overlays the whole right side (behind the header too) and fades in.
     ~540px on a 1440px screen = 40% of the ~1360px content width. */
  .edu-card-img{position:absolute;top:0;right:0;width:40%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .6s ease .05s;z-index:1;}
  .edu-card[open] .edu-card-img{opacity:1;}

  /* Body collapses/expands via grid rows (no fixed heights). The -45px margin
     pulls it up into the header's 80px padding so the open gap is 35px, while
     the header itself stays put — only the body height + opacity animate. */
  .edu-card-body-wrap{position:relative;z-index:3;margin-top:-45px;display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease;}
  .edu-card[open] .edu-card-body-wrap{grid-template-rows:1fr;}
  .edu-card-content{overflow:hidden;min-height:0;box-sizing:border-box;width:50%;padding:0 50px 80px;opacity:0;transition:opacity .45s ease .12s;color:#fff;font-family:'Albert Sans',sans-serif;font-size:18px;line-height:1.4;}
  .edu-card[open] .edu-card-content{opacity:1;}
  .edu-card-content ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px;}
  .edu-card-content p{margin:0;}
  .edu-card-content a{display:inline-block;margin-top:22px;text-decoration:none;color:#fff;font:inherit;}
  /* Icon-group variant (compression cards): wider column and the smaller type
     scale those groups were built for — the .stack-card-group-* rules below
     still supply the badge, heading and list indent. */
  .edu-card-content.edu-card-groups{width:56%;font-size:15px;line-height:1.5;}

  @media (max-width:820px){
    .edu-card{min-height:0;}
    .edu-card summary{padding:32px 24px;font-size:30px;}
    .edu-card summary span{max-width:none;}
    .edu-card-img{position:static;width:calc(100% - 48px);margin:0 24px;border-radius:12px;height:auto;max-height:300px;opacity:1;}
    .edu-card:not([open]) .edu-card-img{display:none;}
    .edu-card-body-wrap{margin-top:0;}
    .edu-card-content{width:100%;padding:24px 24px 32px;font-size:18px;}
    .edu-card-content.edu-card-groups{width:100%;font-size:16px;}
    .edu-card-content a{font-size:18px;}
  }

  /* Stacked scroll cards (compression page) — always-open cards that pin to
     the viewport as you scroll: each card sticks near the top and the next
     one slides up over it. Pure CSS (position:sticky), no JS.
     Tops are staggered 20px per card so the pinned deck shows each card's
     rounded edge peeking above the one covering it. */
  .stack-card{
      position:sticky;
      background:#AA9C56;
      overflow:hidden;
      border-radius:25px;
      min-height:clamp(420px, 66vh, 640px);
  }
  .stack-card:nth-child(1){top:80px;z-index:1;}
  .stack-card:nth-child(2){top:100px;z-index:2;}
  .stack-card:nth-child(3){top:120px;z-index:3;}
  .stack-card:nth-child(4){top:140px;z-index:4;}
  .stack-card+.stack-card{margin-top:40px;}
  .stack-card-title{position:relative;z-index:2;margin:0;padding:62px 50px 28px;color:#fff;font-family:'PT Serif',Georgia,serif;font-size:45px;font-weight:400;line-height:1.05;}
  .stack-card-title span{display:block;max-width:min(600px,56%);}
  /* Image fills the whole right side, behind the title. */
  .stack-card-img{position:absolute;top:0;right:0;width:40%;height:100%;object-fit:cover;display:block;z-index:1;}
  .stack-card-content{position:relative;z-index:2;box-sizing:border-box;width:50%;padding:0 50px 50px;color:#fff;font-family:'Albert Sans',sans-serif;font-size:15px;line-height:1.5;}
  .stack-card-content ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px;}
  /* Card 1 only — its content is a paragraph + link; cards 2+ use icon groups */
  .stack-card-content p{margin:0;font-size:20px;}
  .stack-card-content a{display:inline-block;margin-top:22px;text-decoration:none;color:#fff;font-family:inherit;font-size:25px;}

  /* Icon-group variant (cards 2+): content sits left of the side photo.
     Each group = white circular icon badge + bold sans heading, with the
     bullet list indented so its markers align with the heading text. */
  .stack-card-content.stack-card-groups{width:56%;padding-top:12px;}
  .stack-card-group+.stack-card-group{margin-top:34px;}
  .stack-card-group-head{display:flex;align-items:center;gap:24px;}
  .stack-card-icon{width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .stack-card-icon svg{display:block;width:20px;height:20px;}
  .stack-card-group-head h4{margin:0;font-family:'Albert Sans',sans-serif;font-weight:700;font-size:21px;line-height:1.2;color:#fff;}
  .stack-card-group ul{margin:14px 0 0;padding-left:90px;gap:8px;}

  /* Compact spacing — applied by scroll-anim.js when the tallest card would
     not fit the viewport at its pinned position (short laptop screens). */
  .stack-compact .stack-card-title{padding:36px 50px 18px;}
  .stack-compact .stack-card-content{padding-bottom:30px;line-height:1.45;}
  .stack-compact .stack-card-content.stack-card-groups{padding-top:4px;}
  .stack-compact .stack-card-group+.stack-card-group{margin-top:22px;}
  .stack-compact .stack-card-group ul{margin-top:10px;padding-left:84px;gap:5px;}
  .stack-compact .stack-card-icon{width:38px;height:38px;}

  @media (max-width:820px){
    /* Phone viewports can't show a whole card while pinned, so the sticky
       stacking is off here — cards scroll normally and nothing gets cut. */
    .stack-card{position:static;min-height:0;}
    .stack-card+.stack-card{margin-top:24px;}
    .stack-card-title{padding:36px 24px 18px;font-size:30px;}
    .stack-card-title span{max-width:none;}
    .stack-card-img{position:static;width:calc(100% - 48px);margin:0 24px 8px;border-radius:12px;height:auto;max-height:300px;}
    .stack-card-content{width:100%;padding:16px 24px 36px;font-size:16px;}
    .stack-card-content p{font-size:17px;}
    .stack-card-content a{margin-top:18px;font-size:19px;}
    .stack-card-content.stack-card-groups{width:100%;padding-top:16px;}
    .stack-card-group+.stack-card-group{margin-top:28px;}
    .stack-card-group-head{gap:16px;}
    .stack-card-icon{width:40px;height:40px;}
    .stack-card-group-head h4{font-size:19px;}
    .stack-card-group ul{margin-top:12px;padding-left:56px;}
  }

  /* Working accordion (details/summary) used for FAQ + product lists */
  details.accordion{border-top:1px solid #E5DED0;}
  details.accordion summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 6px;font-family:'Albert Sans',sans-serif;font-weight:500;font-size:21px;color:#1a1413;}
  details.accordion summary::-webkit-details-marker{display:none;}
  details.accordion summary::after{content:'+';font-size:26px;font-weight:300;color:#420c1e;line-height:1;flex-shrink:0;}
  details.accordion[open] summary::after{content:'\2013';}
  details.accordion .accordion-body{padding:0 6px 30px;font-family:'Albert Sans',sans-serif;font-size:18px;line-height:29.16px;color:#534b47;}
  details.accordion .accordion-body a{color:inherit;text-decoration:underline;}

  /* ─── HAMBURGER BUTTON (hidden on desktop) ─── */
  .nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px 4px;color:inherit;flex-shrink:0;transition:color .25s ease;}
  .nav-burger span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s ease,opacity .2s ease;}
  body.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  body.nav-open .nav-burger span:nth-child(2){opacity:0;}
  body.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* ─── MOBILE BREAKPOINT ─── */
  @media (max-width:768px){

    /* NAV — transparent like desktop; Headroom handles hide/show + colour swap.
       Cream background only appears when the menu is open (below). */
    nav{padding:14px 20px;position:fixed;top:0;left:0;right:0;max-width:100%;}
    .nav-links{display:none !important;}
    .nav-med{display:none !important;}
    .nav-burger{display:flex;color:var(--cream);}
    /* Scrolled (not at top) + pinned → dark-red, matching desktop. */
    nav.headroom--not-top.headroom--pinned:not(.nav-home) .nav-burger{color:var(--aubergine);}
    .isotype{width:32px;}

    /* Mobile menu open state — expand nav full-height (avoids stacking context bugs) */
    body.nav-open{overflow:hidden;}
    body.nav-open nav{
      background:var(--cream) !important;
      flex-wrap:wrap;
      align-items:flex-start;
      align-content:flex-start;
      height:100dvh;
      overflow-y:auto;
      transform:none !important;
      will-change:auto !important;
      gap:0;
      padding:14px 20px 32px;
      position:fixed;
      top:0;left:0;right:0;
    }
    body.nav-open nav > .isotype{flex:0 0 auto;align-self:center;color:var(--aubergine) !important;}
    body.nav-open .nav-burger{color:var(--aubergine);}
    body.nav-open nav > .nav-burger{position:absolute;top:14px;right:20px;}
    body.nav-open .nav-links{
      display:flex !important;
      flex:0 0 100%;
      flex-direction:column;
      align-items:stretch;
      gap:0;
      padding:0;
      margin:20px 0 0;
      border-radius:0;
      background:transparent;
      list-style:none;
    }
    body.nav-open .nav-links li{margin-right:0 !important;border-bottom:1px solid rgba(66,12,30,.1);}
    body.nav-open .mobile-home{display:block !important;}
    body.nav-open .nav-links li a{display:block;padding:18px 0;font-size:20px;color:var(--aubergine);font-family:'Albert Sans',sans-serif;text-align:center;}
    body.nav-open nav > .nav-med{
      display:block !important;
      flex:0 0 auto;
      margin:32px auto 0;
      padding:16px 44px;
      background:var(--maroon);
      color:var(--cream) !important;
      border-radius:999px;
      font-size:20px;
      font-family:'Albert Sans',sans-serif;
      text-align:center;
    }

    /* MASTECTOMY RECOVERY TIMELINE — mobile */
    .recovery-circles{display:none !important;}
    .recovery-cols h2[style*="margin: 0 0 60px"]{margin:0 0 30px !important;}
    section:has(.recovery-circles) h2{margin-bottom:30px !important;}

    /* COMPRESSION TIMELINE — vertical on mobile */
    .compression-timeline-section{padding:54px 20px !important;}
    .compression-timeline-section h2{font-size:35px !important;line-height:40px !important;margin-bottom:54px !important;}
    .compression-timeline{flex-direction:column !important;align-items:center !important;gap:0 !important;position:relative;}
    .compression-timeline::before{display:none;}
    .timeline-hline{display:none !important;}
    .timeline-step{display:flex !important;flex-direction:column;align-items:center;width:100%;padding:15px 0;gap:8px;}
    .timeline-step .timeline-num{margin:0 !important;}
    .timeline-step .timeline-label{font-size:25px !important;}
    .compression-timeline-section > div > p{font-size:16px !important;}

    /* GLOBAL SECTION PADDING */
    .section{padding:48px 20px;}
    .wrap{padding:0 20px;}

    /* HERO (home) */
    .hero-section{padding-top:0;}
    .hero-copy{padding:60px 20px 32px;}
    .hero-logo{margin-bottom:30px;}
    .hero-logo svg{width:132px;}
    .hero-copy h1{font-size:32px;line-height:38px;}
    .hero-copy .hero-sub{font-size:20px;}
    /* Mobile collage — 3-column layout, clips on sides */
    .collage{display:block;margin-top:20px;overflow:visible;}
    .collage-row{display:flex;align-items:flex-end;justify-content:center;gap:12px;}
    .collage-row > img:first-child,.collage-row > img:last-child{display:none;}
    .collage-row > img:nth-child(3){width:200px;height:248px;border-radius:10px;flex-shrink:0;object-fit:cover;}
    .collage-row .stack{width:105px;height:267px;gap:11px;flex-shrink:0;margin-bottom:26px;}
    .collage-row .stack img{width:105px;height:128px;border-radius:10px;object-fit:cover;}
    .hero-bottom-pad{height:28px;}
    .restoration{height:380px;margin-top:0;}
    .restoration h2{font-size:28px;line-height:34px;}

    /* PRIVATE ROOM */
    .private-room{grid-template-columns:1fr;gap:32px;}
    .private-room h2{font-size:28px;line-height:34px;}
    .private-room p{font-size:18px;max-width:100%;}
    .pr-grid{display:none;}

    /* CUSTOM FITTINGS */
    .cf-section{padding-left:30px;padding-right:30px;}
    .cf-grid{grid-template-columns:1fr;gap:47px;}
    .cf-grid h2{font-size:28px;line-height:34px;color:#1a1413;}
    .cf-grid p{font-size:20px;max-width:100%;color:#1a1413;}
    .cf-links{flex-direction:column;gap:20px;}
    .cf-links a{color:#1a1413;border-bottom-color:#1a1413;}
    .cf-items{grid-template-columns:1fr 1fr;column-gap:14px;row-gap:21px;justify-self:start;width:100%;}
    .cf-items>div{max-width:170px;}
    .cf-items .icon{width:32px;height:32px;}
    .cf-items p{color:#1a1413;font-size:20px;}

    /* INSURANCE BANNER (skyblue) */
    .ins-grid{grid-template-columns:1fr;column-gap:0;padding:40px 24px;}
    .ins-grid h2{font-size:24px;line-height:29px;}
    .ins-grid p{font-size:18px;}

    /* MASONRY / SAFE SPACE */
    .masonary-grid-home{grid-template-columns:1fr;padding-left:0;gap:16px;}
    .masonary-grid-home-item--big{grid-column:span 1;}
    .section-masonary-title{font-size:28px !important;line-height:34px !important;max-width:100%;padding-bottom:32px;}
    .masonary-grid-home-item--header h3{font-size:16px !important;}
    .masonary-grid-home-item--big h3{font-size:20px !important;}
    .safe-grid{grid-template-columns:1fr;}

    /* CARE CARDS */
    .care-grid{grid-template-columns:1fr;}
    .care-card .photo h3{font-size:20px;}
    .care-card .lede{font-size:25px;line-height:30px;}
    .care-card .detail{font-size:18px;line-height:24px;}
    .care-card .olive{padding:36px 24px 48px;}

    /* FAQ */
    .faq-wrap h2{font-size:24px;line-height:29px;}

    /* FOOTER */
    .foot-wrap{flex-direction:column;gap:40px;}
    footer{padding:48px 24px 32px;}
    footer div[style*="padding:0 179px"]{padding:0 24px !important;}
    footer div[style*="padding:0 91px"]{padding:0 24px !important;}
    footer .serif[style*="font-size:128px"]{font-size:60px !important;letter-spacing:-1px !important;}
    footer div[style*="gap:56px;flex-wrap:wrap"]{flex-direction:column !important;gap:32px !important;}
    footer div[style*="flex:1 0 300px"]{flex:none !important;min-width:0 !important;}
    footer div[style*="gap:72px"]{gap:32px !important;}

    /* BUILDING SECTION (home contact details) */
    .building-flex{flex-direction:column !important;gap:32px !important;}
    .building-flex > div:first-child{width:100% !important;height:260px !important;}
    .building-flex > div:last-child{gap:24px !important;}
    .building-flex p{font-size:17px !important;}

    /* ABOUT PAGE */
    .about-story-grid,.about-story-grid-2{flex-direction:column !important;gap:24px !important;}
    .about-story-grid > div,.about-story-grid-2 > div{width:100% !important;flex:none !important;height:auto !important;}
    .about-story-grid > div:has(img),.about-story-grid-2 > div:has(img){height:280px !important;}
    .about-gallery-grid{grid-template-columns:1fr 1fr !important;gap:12px 20px !important;}
    .about-gallery-grid > div{height:auto !important;}
    .about-exp-flex{flex-direction:column !important;gap:32px !important;}
    .about-exp-flex h2{width:auto !important;}

    /* PHYSICIANS PAGE hero */
    .phy-hero-flex{flex-direction:column !important;gap:40px !important;padding:100px 24px 60px !important;}
    .phy-hero-flex > div:first-child{width:100% !important;}
    .phy-hero-flex p{font-size:17px !important;}
    .phy-hero-flex > div:last-child{flex-direction:column !important;gap:16px !important;}
    .phy-hero-flex > div:last-child > div{width:100% !important;height:200px !important;}
    .phy-hero-flex > div:last-child > div:last-child{height:260px !important;}

    /* CONTACT PAGE */
    .location-cards-grid{grid-template-columns:1fr !important;margin-top:48px !important;}

    /* INSURANCE SECTION (compression/mastectomy) */
    .insurance-flex{flex-direction:column !important;gap:40px !important;}
    .insurance-flex > div:first-child{flex:none !important;width:100% !important;}
    .insurance-flex h2{font-size:24px !important;}
    .insurance-flex p{font-size:17px !important;}

    /* TESTIMONIALS (compression/mastectomy) */
    .testimonials-flex{flex-direction:column !important;gap:32px !important;}
    .testimonials-section{padding:60px 24px !important;}

    /* RECOVERY TIMELINE (mastectomy) */
    .recovery-timeline-circles{flex-direction:column !important;gap:0 !important;margin-bottom:0 !important;}
    .recovery-timeline-circles > div{flex:none !important;}

    /* HERO SECTIONS (compression/mastectomy full-bleed) */
    section[style*="aspect-ratio:1440"]{aspect-ratio:auto !important;min-height:520px !important;}
    section[style*="aspect-ratio: 1440"]{aspect-ratio:auto !important;min-height:520px !important;}

    /* Inline paddings on content sections */
    section[style*="padding:104px"]{padding:60px 20px !important;}
    section[style*="padding: 104px"]{padding:60px 20px !important;}
    section[style*="padding:80px 40px"]{padding:60px 20px !important;}
    section[style*="padding:100px 80px"]{padding:60px 20px !important;}
    section[style*="padding:90px 83px"]{padding:60px 20px 80px !important;}
    section[style*="padding:151px"]{padding:60px 20px !important;}
    section[style*="padding: 151px"]{padding:60px 20px !important;}
    section[style*="padding:120px"]{padding:60px 20px !important;}
    section[style*="padding:103px"]{padding:60px 20px !important;}
    section[style*="padding:44px 40px"]{padding:40px 20px !important;}
    section[style*="padding:70px 40px"]{padding:40px 20px !important;}

    /* Hero text inside full-bleed hero sections */
    section[style*="aspect-ratio"] p{font-size:17px !important;}

    /* Recovery timeline stacked */
    .recovery-circles{flex-direction:column !important;gap:16px !important;margin-bottom:8px !important;}
    .recovery-circles > div{flex:none !important;}
    .recovery-circles div[style*="position:absolute"]{display:none !important;}
    .recovery-cols{flex-direction:column !important;gap:32px !important;}
    .recovery-cols > div{flex:none !important;}

    /* PHYSICIANS PAGE */

    /* Hero: hide image collage on mobile, text-only */
    .phy-hero-flex > div:last-child{display:none !important;}
    .phy-hero-flex{padding:120px 24px 60px !important;}
    .phy-hero-flex p{font-size:19px !important;}

    /* "Built for the way you practice" */
    section[style*="padding:96px 40px 0"]{padding:60px 20px 0 !important;}
    .practice-photo-box{width:100% !important;height:280px !important;}

    /* Specialized and certified fitters */
    section[style*="background:#fbf8f0;padding:96px 100px"]{padding:60px 20px !important;}
    .fitters-grid{grid-template-columns:1fr !important;gap:10px !important;}

    /* How to refer a patient */
    section[id="refer"]{padding:60px 50px !important;}
    .refer-steps-grid{grid-template-columns:1fr !important;gap:32px !important;}
    .refer-step-num{width:40px !important;height:40px !important;font-size:16px !important;}

    /* Insurance (blue) */
    section[style*="background:#619deb;padding:84px 100px"]{padding:60px 40px !important;}
    section[style*="background:#619deb"] div[style*="grid-template-columns:0.85fr"]{grid-template-columns:1fr !important;gap:32px !important;}

    /* Forms & prescribing resources */
    section[style*="padding:96px 40px;"]{padding:60px 20px !important;}
    section[style*="padding:96px 40px;"] span[style*="font-size:25px"]{font-size:20px !important;}

    /* Testimonials (physicians) — horizontally swipeable cards */
    section[style*="background:#f8f3e5;padding:96px 91px"]{padding:60px 0 !important;}
    section[style*="background:#f8f3e5;padding:96px 91px"] > div{padding:0 20px;}
    .testimonials-cards-wrap{
      display:flex !important;
      grid-template-columns:none !important;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
      gap:16px !important;
      margin:0 -20px;
      padding:4px 20px 16px;
    }
    .testimonials-cards-wrap > div{
      flex:0 0 85%;
      scroll-snap-align:center;
    }

    /* FAQ (physicians) */
    section[style*="padding:96px 40px 112px"]{padding:60px 20px 80px !important;}

    /* NAV — stronger override for pages with inline display:flex on nav-links */
    nav ul.nav-links{display:none !important;}
    body.nav-open nav ul.nav-links{display:flex !important;}

    /* PRACTITIONERS SECTION (mastectomy + compression) */
    section[style*="padding:72px 40px"]{padding:50px 20px !important;}
    section[style*="padding: 72px 40px"]{padding:50px 20px !important;}
    section[style*="padding:72px 40px"] div[style*="grid-template-columns"],
    section[style*="padding: 72px 40px"] div[style*="grid-template-columns"]{
      grid-template-columns:1fr !important;
      gap:24px !important;
    }
    section[style*="padding:72px 40px"] p,
    section[style*="padding: 72px 40px"] p{font-size:17px !important;}

    /* PRODUCTS SECTION — accordion heading font size */
    section[style*="padding:104px 40px"] .scp2 span[style*="font-size: 31px"],
    section[style*="padding:104px 40px"] .scp2 span[style*="font-size:31px"]{font-size:22px !important;}
    details.prod-item > summary{font-size:22px !important;}
    details.prod-item > summary span[style*="font-size"]{font-size:22px !important;}
    .prod-body-cols{grid-template-columns:1fr !important;gap:24px !important;}
    /* 30% of a phone width is too narrow for the product image — stack it under
       the copy at a fixed height instead of matching the text block. */
    .prod-body-media{grid-template-columns:1fr !important;gap:20px !important;}
    .prod-body-media .prod-img{height:260px;}

    /* EDU CARDS SECTION padding */
    section[style*="padding:40px 40px 80px"]{padding:40px 20px 60px !important;}
    section[style*="padding: 40px 40px 80px"]{padding:40px 20px 60px !important;}

    /* COMPRESSION — 7-step "path to compression" timeline */
    div[style*="justify-content:space-between;align-items:center;margin-bottom:16px"],
    div[style*="justify-content: space-between; align-items: center; margin-bottom: 16px"]{display:none !important;}
    div[style*="justify-content:space-between;margin-bottom:52px"],
    div[style*="justify-content: space-between; margin-bottom: 52px"]{
      flex-direction:column !important;
      align-items:flex-start !important;
      gap:8px !important;
      margin-bottom:24px !important;
    }
    div[style*="justify-content:space-between;margin-bottom:52px"] > div,
    div[style*="justify-content: space-between; margin-bottom: 52px"] > div{
      flex:none !important;
      text-align:left !important;
      padding-left:0 !important;
    }

    /* ─── ABOUT PAGE ─── */

    /* Hero */
    section[style*="background:#420c1e"] div[style*="padding:60px 40px"]{padding:60px 20px 70px !important;}
    section[style*="background:#420c1e"] p{font-size:17px !important;}

    /* Our Story — flex row → single col */
    .about-story-grid,.about-story-grid-2{flex-direction:column !important;gap:24px !important;}
    .about-story-grid p,.about-story-grid-2 p{font-size:17px !important;}

    /* Gallery — 4-col → 2-col */
    .about-gallery-grid{grid-template-columns:1fr 1fr !important;gap:12px !important;}
    .about-gallery-tile{height:200px !important;}

    /* Expertise You Can Trust — flex row → col */
    .about-exp-flex{flex-direction:column !important;gap:32px !important;padding:0 !important;}
    .about-exp-flex h2{width:auto !important;}
    section[style*="padding:120px 40px 120px"]{padding:60px 20px !important;}

    /* ─── CONTACT PAGE ─── */

    /* Hero / form */
    section[style*="padding:80px 40px 96px"]{padding:60px 20px 72px !important;}
    section[style*="padding:80px 40px 96px"] p{font-size:17px !important;}

    /* Location cards — 2-col → 1-col */
    .location-cards-grid{grid-template-columns:1fr !important;margin-top:48px !important;}

    /* CONSOLIDATED HEADING SCALE — mobile */
    .h1-std{font-size:32px !important;line-height:38px !important;}
    .h2-feature{font-size:28px !important;line-height:34px !important;}
    .h2-std{font-size:24px !important;line-height:29px !important;}
    .h3-feature{font-size:20px !important;}
    .h3-card{font-size:16px !important;}

  }