/* Shared role-based type scale for the three service pages. */
.brand-service-page{
  --service-h1-size:var(--hero-h1-size);
  --service-h2-size:clamp(40px,3.65vw,62px);
  --service-card-title-size:clamp(25px,2vw,31px);
  --service-body-size:clamp(18px,1.25vw,21px);
  --service-step-size:var(--service-body-size);
}
:is(.brand-service-page--dentistry,.brand-service-page--blepharoplasty,.brand-service-page--manual-therapy) .brand-service-hero h1{
  font-size:var(--service-h1-size);
  line-height:1.08;
  letter-spacing:-.065em;
}
.brand-service-page :is(.brand-service-intro,.brand-service-feature,.brand-service-path,.brand-service-close) h2{
  font-size:var(--service-h2-size);
  line-height:1.1;
}
.brand-service-page .brand-service-step h3{font-size:var(--service-card-title-size)}
.brand-service-page .brand-service-step:nth-child(n) p{font-size:var(--service-step-size);line-height:1.5}
.brand-service-page .brand-service-hero-copy>p,
.brand-service-page .brand-service-intro-grid p,
.brand-service-page .brand-service-feature-copy>p,
.brand-service-page .brand-service-close-grid>div:last-child>p{font-size:var(--service-body-size);line-height:1.5}

/* The image is a full-bleed scene; copy follows the next section's text line. */
@media(min-width:761px){
  .brand-service-page .brand-service-hero{padding-bottom:0}
  .brand-service-page .brand-service-hero-stage{
    width:100vw;
    min-height:clamp(680px,calc(100svh - 88px),900px);
    margin:0 0 0 calc(50% - 50vw);
    border-radius:0;
    background:#f3f9fe;
  }
  .brand-service-page .brand-service-hero-picture{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
  }
  .brand-service-page .brand-service-hero-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:right center;
    padding:0;
    transform:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 26%,#000 68%);
    mask-image:linear-gradient(90deg,transparent 26%,#000 68%);
  }
  .brand-service-page:is(.brand-service-page--blepharoplasty,.brand-service-page--manual-therapy) .brand-service-hero-image{
    object-fit:cover;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 45%);
  }
  .brand-service-page .brand-service-hero-stage::before{
    background:linear-gradient(90deg,#f3f9fe 0%,rgba(243,249,254,.99) 22%,rgba(243,249,254,.82) 42%,rgba(243,249,254,0) 72%);
  }
  .brand-service-page .brand-service-hero-stage::after{
    content:'';
    position:absolute;
    z-index:1;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,transparent 78%,rgba(255,255,255,.18) 85%,#fff 100%);
  }
  .brand-service-page .brand-service-hero-copy{
    width:var(--hero-copy-width);
    min-height:inherit;
    padding:70px 0 60px max(var(--space),calc((100vw - 1640px)/2 + var(--space)));
  }
  .brand-service-page--blepharoplasty .brand-service-hero-copy{width:var(--hero-copy-width)}
  .brand-service-page--blepharoplasty .brand-service-hero h1{max-width:none}
}

/* Taller editorial frames display the complete subject instead of scaling it offscreen. */
@media(min-width:761px){
  .brand-service-page--manual-therapy .brand-service-step figure{height:244px}
  .brand-service-page--manual-therapy .brand-service-step figure img{object-fit:cover;object-position:center;transform:none}
  .brand-service-page--manual-therapy .brand-service-step:nth-child(3) figure img{transform:scale(1.08)}
}

/* A 4:3 source cannot fill a short tablet-wide stage without a visible letterbox. */
@media(min-width:761px) and (max-width:900px){
  .brand-service-page .brand-service-hero-stage{display:flex;flex-direction:column;min-height:0}
  .brand-service-page .brand-service-hero-stage::before{display:none}
  .brand-service-page .brand-service-hero-copy,
  .brand-service-page--blepharoplasty .brand-service-hero-copy{order:1;width:100%;min-height:0;padding:42px var(--space) 44px}
  .brand-service-page .brand-service-hero-copy>.brand-v4-cta{margin-top:32px}
  .brand-service-page .brand-service-hero-picture{position:relative;inset:auto;order:2;height:auto;aspect-ratio:4/3}
  .brand-service-page .brand-service-hero-image{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;padding:0;-webkit-mask-image:none;mask-image:none}
}
@media(max-width:760px){
  .brand-service-page .brand-service-hero-stage::after{
    content:'';
    position:absolute;
    z-index:1;
    inset:auto 0 0;
    height:100px;
    pointer-events:none;
    background:linear-gradient(180deg,transparent,#fff);
  }
}

/* Keep the pale section number entirely behind the dentistry text, not the photo. */
.brand-service-page--dentistry .brand-service-intro::before{content:none}
.brand-service-page--dentistry .brand-service-intro-grid{
  position:relative;
  isolation:isolate;
  grid-template-rows:max-content minmax(0,1fr);
}
.brand-service-page--dentistry .brand-service-intro-grid::before{
  content:'01';
  position:absolute;
  z-index:0;
  top:-110px;
  left:80px;
  color:rgba(73,153,253,.105);
  font:500 clamp(190px,22vw,360px)/1 Unbounded,sans-serif;
  letter-spacing:-.12em;
  pointer-events:none;
}
.brand-service-page--dentistry .brand-service-intro-grid :is(h2,div,figure){position:relative;z-index:1}
@media(max-width:900px){
  .brand-service-page--dentistry .brand-service-intro-grid{grid-template-rows:none}
  .brand-service-page--dentistry .brand-service-intro-grid::before{top:-45px;right:0;left:auto;font-size:clamp(130px,25vw,220px)}
}
@media(max-width:760px){
  .brand-service-page--dentistry .brand-service-intro-grid::before{top:-25px}
  .brand-service-page--dentistry .brand-service-intro-grid>div p{margin-top:0}
}

/* Closing route: three real information cards with 3D cues and plain corner numbers. */
.brand-service-page--dentistry .brand-service-close-grid>div:last-child{grid-row:1;align-self:center}
.brand-service-page--dentistry .brand-service-close-diagram{
  grid-column:1/-1;
  grid-row:2;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  gap:18px;
  max-width:none;
  margin:52px 0 0;
}
.brand-service-page--dentistry .brand-service-close-diagram li{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  min-height:280px;
  padding:25px 27px 27px;
  border:1px solid rgba(190,221,246,.25);
  border-radius:25px;
  background:linear-gradient(150deg,rgba(211,235,252,.13),rgba(211,235,252,.055));
  text-align:left;
}
.brand-service-page--dentistry .brand-service-close-diagram .close-card-number{
  position:absolute;
  top:25px;
  right:27px;
  color:#9fc9e9;
  font:500 17px/1 Golos,sans-serif;
}
.brand-service-page--dentistry .brand-service-close-diagram img{width:112px;height:112px;max-width:100%;object-fit:contain}
.brand-service-page--dentistry .brand-service-close-diagram h3{margin:12px 0 0;color:#f5fafe;font:500 22px/1.2 Unbounded,sans-serif;letter-spacing:-.05em}
.brand-service-page--dentistry .brand-service-close-diagram p{max-width:36ch;margin:13px 0 0;color:#cfe1f0;font:400 16px/1.5 Golos,sans-serif}
.brand-service-page--dentistry .brand-service-related{grid-row:3}

@media(max-width:760px){
  .brand-service-page{
    --service-h1-size:clamp(32px,8.2vw,42px);
    --service-h2-size:clamp(33px,8vw,46px);
    --service-card-title-size:24px;
    --service-body-size:17px;
  }
  .brand-service-page .brand-service-hero{padding-bottom:0}
  .brand-service-page .brand-service-hero-stage{margin-top:0}
  .brand-service-page .brand-service-hero-stage{background:#f3f9fe}
  .brand-service-page .brand-service-hero-picture{position:relative;inset:auto;order:2;display:block;width:100%;height:auto;aspect-ratio:3/4}
  .brand-service-page .brand-service-hero-image{position:absolute;inset:0;display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%);mask-image:linear-gradient(180deg,transparent,#000 12%)}
  .brand-service-page--manual-therapy .brand-service-hero-image{padding-top:0}
  .brand-service-page--manual-therapy .brand-service-step figure{aspect-ratio:1.75}
  .brand-service-page--manual-therapy .brand-service-step figure img,
  .brand-service-page--manual-therapy .brand-service-step:nth-child(3) figure img{object-fit:cover;object-position:center;transform:none}
  .brand-service-page--dentistry .brand-service-close-grid>div:last-child{grid-row:2}
  .brand-service-page--dentistry .brand-service-close-diagram{grid-column:1;grid-row:3;grid-template-columns:1fr;gap:12px;margin-top:33px}
  .brand-service-page--dentistry .brand-service-close-diagram li{min-height:0;padding:22px 23px 25px}
  .brand-service-page--dentistry .brand-service-close-diagram img{width:96px;height:96px}
  .brand-service-page--dentistry .brand-service-close-diagram h3{font-size:20px}
  .brand-service-page--dentistry .brand-service-close-diagram p{font-size:15px}
  .brand-service-page--dentistry .brand-service-related{grid-row:4}
}
@media(max-width:390px){
  :is(.brand-service-page--dentistry,.brand-service-page--blepharoplasty,.brand-service-page--manual-therapy) .brand-service-hero h1{font-size:clamp(28px,7.7vw,30px)}
}