/* ==========================================================================
   OMD Plastic Surgery Marketing landing page
   Loaded after style.css (the shared base). Everything here is either a new
   section or a deliberate override for this page.
   ========================================================================== */

/* ==========================================================================
   Hero: the two-column layout from /medical-seo/, with result cards in place
   of the search chips. .hero, .hero-viz, .fc and .fc-avatar all come from
   style.css; only the white card below is new to this page.
   ========================================================================== */
.fc-quote{
  display:flex;flex-direction:column;gap:7px;max-width:210px;
  background:var(--white);color:var(--ink);border-radius:14px;padding:9px 12px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 14px 28px -12px rgba(0,0,0,.75),inset 0 0 0 1px rgba(0,0,0,.02);
}
/* balance, or "...in 18 / months" leaves the unit orphaned on its own line */
.fc-stat{display:block;font-size:.66rem;font-weight:600;line-height:1.25;letter-spacing:-.005em;text-wrap:balance}
/* not var(--green): #00DB98 is a dark-background colour and goes illegible on white */
.fc-stat b{
  display:block;margin-bottom:4px;color:#008f63;
  font-family:var(--action);font-weight:600;font-size:1.5rem;line-height:1;letter-spacing:.01em;
}
.fc-who{display:block;padding-top:7px;border-top:1px solid rgba(0,0,0,.09);font-size:.6rem;line-height:1.3}
.fc-who b{display:block;font-weight:700}
.fc-who small{display:block;font-size:1em;font-weight:500;color:var(--ink-3)}
/* the card is three lines taller than the search pill it replaces, so the head
   lines up with the number instead of the middle of the card */
.viz-quotes .fc{align-items:flex-start}
.viz-quotes .fc-avatar{margin-top:8px}

@media (max-width:1180px){
  .fc-quote{max-width:176px;padding:8px 10px;gap:6px}
  .fc-stat{font-size:.6rem}
  .fc-stat b{font-size:1.28rem}
  .fc-who{font-size:.55rem;padding-top:6px}
}
@media (max-width:920px){
  /* a result card is four times the height of the search pill this rule was
     sized for, so the fourth card drops and the other three get their own
     stops down a slightly taller map */
  .hero-viz.viz-quotes{aspect-ratio:1/1.18}
  .viz-quotes .fc{top:var(--my,var(--y))}
  .viz-quotes .fc-wide{display:none}
  .fc-quote{max-width:148px;padding:7px 9px;gap:5px;border-radius:12px}
  .fc-stat{font-size:.55rem}
  .fc-stat b{font-size:1.1rem;margin-bottom:3px}
  .fc-who{font-size:.5rem;padding-top:5px}
  .viz-quotes .fc-avatar{margin-top:5px}
}

/* the hero carries more copy than the shared scale was drawn for: a six
   line headline and a five line paragraph. The display size comes down a
   step here and the gaps tighten, so the call to action stays close to
   the fold rather than a screen below it. */
.hero h1{font-size:clamp(2.2rem,3.3vw,2.95rem);margin-bottom:14px}
.hero .hero-sub{margin-bottom:18px}
.hero .points{gap:8px;margin-bottom:22px}

/* each sentence of the headline gets its own block and balances its own
   lines, so the second never runs on from "list." and neither is left
   with a one-word last line */
.h1-line{display:block;text-wrap:balance}

/* the line that leads into the button, set like the hero paragraph so it
   reads as copy rather than as a sixth bullet */
.hero-cta-lead{margin:0 0 14px;color:var(--on-dark-2);font-size:clamp(.98rem,1.15vw,1.08rem);max-width:56ch}

/* ==========================================================================
   Letter: full-bleed dusk photograph behind the notebook page
   ========================================================================== */
.letter-bg.dusk img{object-position:50% 38%}
.letter-bg.dusk::after{background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.2) 45%,rgba(0,0,0,.72))}
.letter .letter-side .t-lead{max-width:44ch}
/* the copy sits at the foot of the section, under the surgeon's shoulder,
   so the headline never covers his face */
.letter .letter-grid{align-items:end}
.letter .letter-side{align-self:end;padding-top:0;padding-bottom:clamp(8px,2vw,24px)}
.letter .paper{align-self:start}
@media (max-width:920px){
  .letter-bg.dusk img{width:140%;object-position:62% 40%}
}

/* ==========================================================================
   Proof: stat ledger with a video card riding up over the letter section
   ========================================================================== */
.proof{background:var(--off);position:relative;padding-block:clamp(72px,9vw,120px);overflow:visible}
.proof-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,80px);align-items:center}
.proof-copy{padding-top:0}
.proof-copy h2{margin-bottom:18px;max-width:16ch}
.proof-copy .t-lead{margin-bottom:12px}
.proof .stat-row{grid-template-columns:repeat(2,1fr);gap:22px 32px;margin-top:34px}
.proof .stat .num{font-size:clamp(2.6rem,4.6vw,4rem)}
.proof-media{position:relative}
.proof-media .video-card{aspect-ratio:16/10}
.proof-quote{
  position:relative;margin:-54px 0 0 clamp(18px,4vw,64px);padding:26px 28px;
  background:var(--white);border-radius:12px;box-shadow:var(--shadow-lg);z-index:2;
}
.proof-quote p{font-size:1.02rem;font-weight:500;line-height:1.5;margin:0 0 14px}
.proof-quote .q-who{margin-top:0}
.proof-quote .q-who small{color:var(--ink-2)}
.proof-quote .q-tag{
  position:absolute;right:20px;top:-16px;padding:7px 12px;border-radius:999px;background:var(--green);color:var(--black);
  font-family:var(--action);letter-spacing:.08em;text-transform:uppercase;font-size:.68rem;font-weight:600;
}
@media (max-width:920px){
  .proof-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .proof-media{order:-1}
  .proof-quote{margin:-34px 12px 0;padding:20px 20px}
  .proof-copy{padding-top:6px}
  .proof .stat-row{grid-template-columns:1fr 1fr;gap:16px 18px}
  /* four stats sit as a 2 x 2 grid; the base rule stretches the last of three */
  .proof .stat-row .stat:last-child{grid-column:auto}
}

/* ==========================================================================
   Services: side rail of twelve services with a panel per service
   ========================================================================== */
.svc{background:var(--black);color:var(--on-dark);padding-block:clamp(72px,9vw,120px)}
.svc-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:end;margin-bottom:clamp(30px,4vw,48px)}
.svc-head h2{margin-bottom:12px}
.svc-head .side{font-size:1rem;opacity:.8;max-width:44ch}
.svc .muted{color:var(--on-dark-2)}
.svc-layout{display:grid;grid-template-columns:minmax(230px,268px) minmax(0,1fr);gap:clamp(24px,3vw,56px);align-items:start}
.svc-rail{position:sticky;top:calc(var(--header-h) + 20px);display:flex;flex-direction:column;border-left:1px solid var(--paper-line)}
.svc-tab{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;margin-left:-1px;
  padding:.8em 1em .8em .95em;border-left:2px solid transparent;opacity:.58;
  transition:opacity .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.svc-tab .svc-ic{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.07);color:var(--green)}
.svc-tab .svc-ic svg{width:17px;height:17px}
.svc-tab .svc-name{font-family:var(--action);font-weight:500;letter-spacing:.05em;text-transform:uppercase;font-size:.8rem;line-height:1.15;flex:1 1 auto}
.svc-tab .tab-chev{display:none;width:22px;height:22px;flex:none;color:var(--green);transition:transform .25s var(--ease)}
.svc-tab:hover{opacity:.9}
.svc-tab[aria-selected="true"]{opacity:1;border-left-color:var(--green);background:linear-gradient(90deg,rgba(0,219,152,.16),rgba(0,219,152,0) 80%)}
.svc-tab[aria-selected="true"] .svc-ic{background:var(--green);color:var(--black)}
.svc-panel{display:none}
.svc-panel.is-active{display:block;animation:fade .5s var(--ease)}
/* the service photograph with the intro card riding over its lower corner */
.svc-hero{position:relative;margin-bottom:clamp(28px,3.5vw,44px)}
.svc-hero .svc-img{border-radius:12px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:16/9;background:#111}
.svc-hero .svc-img img{width:100%;height:100%;object-fit:cover}
/* the intro card spans the photograph with a small inset each side, headline
   on the left and the summary beside it */
.svc-card{
  position:relative;z-index:2;margin:-96px clamp(16px,3vw,40px) 0;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(20px,3vw,44px);align-items:end;
  background:var(--white);color:var(--ink);border-radius:12px;padding:clamp(22px,2.6vw,34px);
  box-shadow:var(--shadow-lg);border-top:4px solid var(--green);
}
.svc-card .svc-kicker{grid-column:1/-1;font-family:var(--action);letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;color:var(--green-deep);margin-bottom:12px}
.svc-card h3{font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0;text-wrap:balance}
.svc-card p{margin:0;color:var(--ink-2);font-size:1rem;line-height:1.55}
@media (max-width:1100px){
  .svc-card{grid-template-columns:minmax(0,1fr);row-gap:12px}
}
.svc-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,60px);align-items:start}
.svc-copy p{color:var(--on-dark-2);margin-bottom:.9em}
.svc-copy p strong{color:var(--white)}
.svc-copy .punch{color:var(--white);font-weight:700;font-size:1.08rem}
.svc-aside{background:rgba(255,255,255,.05);border:1px solid var(--paper-line);border-radius:12px;padding:clamp(18px,2vw,26px)}
.svc-aside h4{font-family:var(--action);font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:.76rem;opacity:.7;margin-bottom:12px}
.svc-aside ul{display:grid;gap:9px}
.svc-aside li{padding-left:22px;position:relative;font-size:.94rem;line-height:1.4;opacity:.92}
.svc-aside li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--green)}
.svc-aside .svc-proof{margin-top:18px;padding-top:16px;border-top:1px solid var(--paper-line);display:flex;gap:12px;align-items:baseline}
.svc-aside .svc-proof .num{font-size:2rem;color:var(--green)}
.svc-aside .svc-proof span{font-size:.86rem;opacity:.8;line-height:1.3}
.svc-gallery{margin-top:clamp(28px,3.5vw,44px)}
.svc-gallery .g-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:4px}
.svc-gallery .g-head h4{font-family:var(--action);font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;opacity:.75}
.svc-gallery .g-head span{font-size:.84rem;opacity:.6}
/* website screenshots: tall pages, so show the top of each one and open the whole page on tap */
.svc-gallery .slide.web .shot{aspect-ratio:16/10;padding:0}
.svc-gallery .slide.web .shot img{object-fit:cover;object-position:top}
.svc-gallery .slide.ad .shot{aspect-ratio:4/3;background:#fff}
.svc-gallery .slide.wide .shot{aspect-ratio:16/6}
.svc-gallery .slide.photo{flex-basis:min(100%,380px)}
.svc-gallery .slide.photo .shot{aspect-ratio:4/3;padding:0}
.svc-gallery .slide.photo .shot img{object-fit:cover}
.svc-gallery .vslide{flex-basis:min(100%,420px)}
/* channel chips for the AI service */
.chips-ai{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chips-ai li{padding:8px 13px;border:1px solid var(--paper-line);border-radius:999px;font-size:.82rem;display:inline-flex;align-items:center;gap:8px}
.chips-ai li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
/* press tiles for the PR service */
.press-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px}
.press-grid div{background:var(--white);border-radius:10px;height:84px;display:grid;place-items:center;padding:16px}
.press-grid img{max-height:40px;max-width:100%;width:auto;height:auto;object-fit:contain}
/* a square mark rather than a wordmark: capped at 40px it reads as a stamp
   next to logos three times its width, so it fills the tile instead */
.press-grid .sq{padding:10px}
.press-grid .sq img{max-height:64px}
/* numbered steps only where the content really is a sequence */
.svc-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:14px 0 0;padding:0;list-style:none}
.steps-nav{display:none}
@media (max-width:920px){
  .svc-steps{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .svc-steps::-webkit-scrollbar{display:none}
  .svc-steps li{flex:0 0 min(74vw,320px);scroll-snap-align:start}
  .steps-nav{display:flex;margin-top:4px}
}
.svc-steps li{background:rgba(255,255,255,.05);border:1px solid var(--paper-line);border-radius:10px;padding:16px 16px 18px}
.svc-steps .n{font-family:var(--action);font-weight:600;font-size:1.05rem;width:34px;height:34px;border-radius:8px;background:var(--green);color:var(--black);display:grid;place-items:center;margin-bottom:12px}
.svc-steps b{display:block;font-size:.98rem;margin-bottom:4px}
.svc-steps span{font-size:.88rem;opacity:.72;line-height:1.45;display:block}
.svc-cta{margin-top:clamp(26px,3vw,40px);display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.svc-cta .note{font-size:.88rem;opacity:.65}

@media (max-width:1100px){
  .svc-body{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:920px){
  .svc-head{grid-template-columns:minmax(0,1fr);gap:14px}
  .svc-layout{grid-template-columns:minmax(0,1fr);gap:0}
  /* accordion: the panel opens under the service you tap, and the other
     eleven stay on screen */
  .svc-rail{position:static;border-left:0;border-top:1px solid rgba(127,127,127,.24)}
  .svc-tab{margin-left:0;padding:.95em .2em;border-left:0;border-bottom:1px solid rgba(127,127,127,.24);opacity:.85}
  .svc-tab .tab-chev{display:block}
  .svc-tab[aria-expanded="true"]{opacity:1;background:none;border-bottom-color:transparent}
  .svc-tab[aria-expanded="true"] .svc-name{color:var(--green)}
  .svc-tab[aria-expanded="true"] .tab-chev{transform:rotate(180deg)}
  .svc-tab[aria-expanded="true"] .svc-ic{background:var(--green);color:var(--black)}
  .svc-rail #svcPanels{border-bottom:1px solid rgba(127,127,127,.24);padding:22px 0 26px}
  .svc-card{margin:-56px 12px 0;padding:20px}
  .svc-hero .svc-img{aspect-ratio:4/3}
}

/* ==========================================================================
   Statement band: full-bleed clinic photograph behind one line of copy
   ========================================================================== */
.band{position:relative;isolation:isolate;color:var(--white);min-height:78vh;display:grid;align-items:center;padding-block:clamp(80px,10vw,140px);overflow:hidden}
.band-bg{position:absolute;inset:0;z-index:-1}
.band-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(1.06);transition:transform 1.4s var(--ease)}
.band.in .band-bg img{transform:none}
.band-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.6) 45%,rgba(0,0,0,.15) 100%)}
.band-copy{max-width:640px}
.band-copy h2{margin-bottom:22px}
.band-copy p{color:var(--on-dark-2);font-size:clamp(1rem,1.3vw,1.15rem)}
.band-copy .lines{display:grid;gap:8px;margin:22px 0 26px}
.band-copy .lines li{font-weight:700;font-size:clamp(1.05rem,1.5vw,1.3rem);padding-left:22px;position:relative;line-height:1.3}
.band-copy .lines li::before{content:"";position:absolute;left:0;top:.65em;width:12px;height:3px;background:var(--green)}
.band-copy .aside{font-size:.9rem;color:var(--on-dark-3);font-style:italic}
@media (max-width:920px){.band{min-height:0}.band-bg img{object-position:62% 50%}}

/* ==========================================================================
   Reviews on the off-white ground
   ========================================================================== */
.reviews-light{background:var(--off);color:var(--ink)}
.reviews-light .results-head .t-lead{color:var(--ink-2)}
.reviews-light .wall .text-q{box-shadow:var(--shadow-md);border:1px solid var(--line)}

/* ==========================================================================
   Case studies: local screenshots + a note when the figures are older
   ========================================================================== */
.cs-region{
  display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding:2px 8px;border-radius:999px;
  background:rgba(255,255,255,.1);font-family:var(--action);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-2);
}
.cs-tab .cs-region{margin-left:0;padding:1px 6px}
/* the channels we ran for this clinic, under the headline */
.cs-channels{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 18px}
.cs-channels li{padding:5px 11px;border:1px solid var(--paper-line);border-radius:999px;font-family:var(--action);letter-spacing:.06em;text-transform:uppercase;font-size:.66rem;color:var(--on-dark-2)}
/* a fourth screenshot card, tucked into the left of the second row */
.shot-card.s4{grid-column:1/3;grid-row:2;z-index:1}
/* screenshots are shown whole: each card takes its image's natural height and
   the cards no longer ride over one another. Only full-page website captures,
   which are several screens tall, are cropped to their top. */
.cs-shots{align-items:start}
.cs-shots .shot-card.s1,.cs-shots .shot-card.s2,.cs-shots .shot-card.s3,.cs-shots .shot-card.s4{aspect-ratio:auto;margin-top:0}
.cs-shots .shot-card.s2,.cs-shots .shot-card.s3,.cs-shots .shot-card.s4{margin-top:0}
.cs-shots .shot-card .shot-zoom{height:auto}
.cs-shots .shot-card img{height:auto;object-fit:fill}
.cs-shots .shot-card.tall{aspect-ratio:4/5}
.cs-shots .shot-card.tall .shot-zoom{height:100%}
.cs-shots .shot-card.tall img{height:100%;object-fit:cover;object-position:top}
.cs-shots .shot-card.s1 figcaption{top:auto;bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent)}
.cs-shots .portrait{grid-row:3;align-self:start}
.cs-shots .shot-video .vshot{aspect-ratio:16/9;height:auto}
.cs-shots .shot-video .vshot img{height:100%;object-fit:cover;object-position:center}
.cs-shots .shot-video figcaption{pointer-events:none}
.cs-shots-nav{display:none}
@media (max-width:920px){
  .cs-shots-nav{display:flex;margin-top:6px}
  .cs-grid{grid-template-rows:auto}
}
@media (max-width:920px){
  .shot-card.s4{flex:0 0 min(78vw,440px);scroll-snap-align:start;margin-top:0}
  .cs-shots .shot-card.s1,.cs-shots .shot-card.s2,.cs-shots .shot-card.s3,.cs-shots .shot-card.s4{aspect-ratio:auto}
  .cs-shots .shot-card.tall{aspect-ratio:4/5}
}

/* ==========================================================================
   Founder / qualify: keep the base, swap the address card text
   ========================================================================== */
.founder-imgs .addr b{color:var(--green)}
/* the BAAPS photograph is portrait, so its satellite box is portrait too and
   the crop is anchored to the top where the faces are */
.founder-imgs .b{width:44%;height:60%}
.founder-imgs .b img{object-position:50% 8%}
@media (max-width:920px){
  .founder-imgs .b{width:46%;height:56%}
}

/* ==========================================================================
   Lightbox: tap to zoom at every size. Full-page website screenshots are
   twenty screens tall, so fitted to 90vh they read as a strip; zoomed, they
   render at native width and the wrapper scrolls.
   ========================================================================== */
.lightbox.is-image .zoom-hint{display:block}
.lightbox.is-zoomed .zoom-hint{display:none}
.lightbox.is-image.is-zoomed .frame{width:min(1500px,100%);max-width:100%}
.lightbox.is-image.is-zoomed img{max-width:none;max-height:none;width:auto;height:auto}
.lightbox.is-image.is-zoomed .zoomwrap{place-items:start center}
/* a full-page website screenshot fills the frame width and scrolls straight
   down, the way the page itself does. Rendering it at its native 1400px put
   the sides out of reach on any window narrower than that, so it panned in
   two directions at once. Wide screenshots still zoom to native size, where
   panning across is the only way to read the small print. */
.lightbox.is-image.is-zoomed.is-tall img{width:100%;max-width:100%;height:auto;max-height:none}
@media (max-width:700px){
  .lightbox.is-image.is-zoomed .frame{width:100%}
}

/* ==========================================================================
   Small utilities
   ========================================================================== */
.kbd-note{font-size:.82rem;opacity:.6}
.on-light.sec-kicker{color:var(--white)}