/* upgrade.css (10 Nov 2026): design layer for Total Wound Experts.
   Loaded last on public pages, after styles.css, hdr-phone-m.css and each page's own <style>.
   Presentation only: no copy, link, form or script changes. Same palette (slate navy and sky) and the
   same typefaces (Bricolage Grotesque, Source Sans 3) as before; no new fonts or external resources. */

:root{
  --up-gap:12px;
  --up-r:24px;
  --up-under:36px;
  --up-pad:clamp(20px,4vw,48px);
  --up-panel:#132434;
  --up-deep:#0E1B29;
  --up-line:#27405A;
  --up-sky-line:rgba(124,196,240,.24);
  --up-soft:#C3D3E0;
}

/* ---------- base ---------- */
html{scroll-padding-top:108px}
section,[id]{scroll-margin-top:108px}
::selection{background:rgba(124,196,240,.32)}
h1,h2,h3{text-wrap:balance}

/* ---------- header: a floating slate bar that joins the panel beneath it ---------- */
header{position:sticky;top:var(--up-gap);z-index:60;margin:var(--up-gap) var(--up-gap) 0;border:0;border-radius:var(--up-r);
  background:var(--up-panel);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 12px 30px rgba(2,8,16,.42)}
header .nav{height:72px}
header nav ul a{color:#B4C6D6}
header nav ul a:hover,header nav ul a[aria-current]{color:var(--sky)}
header .btn.small{box-shadow:0 6px 18px rgba(124,196,240,.2)}
/* links that are switched off in the bar no longer leave an empty gap behind */
header nav ul li:has(>.hdr-mail),header nav ul li:has(>.hdr-talk){display:none}
/* home: the bar also carries the clinic login, so the phone leaves a little earlier (it overflowed between 1121px and 1210px) */
@media (min-width:901px) and (max-width:1215px){header nav ul:has(.hdr-login) li:has(>.hdr-tel){display:none}}
/* three guide pages carry two long extra links in the bar, which pushed the button 245px past the edge of the
   screen. There the two long labels take two lines and the phone (still in the footer) leaves the bar. */
@media (min-width:901px){
  header nav ul:has(a[href*="order-amniotic-allografts"]){gap:16px;align-items:center}
  header nav ul:has(a[href*="order-amniotic-allografts"]) a{font-size:15px}
  header nav ul:has(a[href*="order-amniotic-allografts"]) a[href*="order-amniotic-allografts"],
  header nav ul:has(a[href*="order-amniotic-allografts"]) a[href*="skin-substitute-distributor"]{display:block;white-space:normal;line-height:1.15;font-size:14.5px;max-width:9.4em;text-wrap:balance}
  header nav ul:has(a[href*="order-amniotic-allografts"]) a[href*="skin-substitute-distributor"]{max-width:7.8em}
  header nav ul:has(a[href*="order-amniotic-allografts"]) li:has(>.hdr-tel){display:none}
}
@media (min-width:901px) and (max-width:1275px){header nav ul:has(a[href*="order-amniotic-allografts"]) li:nth-child(3){display:none}}
@media (min-width:901px) and (max-width:960px){header nav ul:has(a[href*="order-amniotic-allografts"]) li:nth-child(1),header nav ul:has(a[href*="order-amniotic-allografts"]) li:nth-child(2){display:none}}

/* ---------- buttons ---------- */
.btn{transition:background .15s,border-color .15s,transform .15s}
.btn.ghost{background:rgba(124,196,240,.1);border:1.5px solid rgba(124,196,240,.6);color:var(--sky-pale)}
.btn.ghost:hover{background:rgba(124,196,240,.2);border-color:var(--sky)}

/* ---------- home hero: one slate panel, text left, mark right ---------- */
main>.hero{max-width:none;margin:calc(-1*var(--up-under)) var(--up-gap) 0;
  padding:calc(var(--up-under) + 84px) max(calc(var(--up-pad) - var(--up-gap)),calc(50% - 590px - var(--up-gap) + var(--up-pad))) 176px;
  border-radius:0 0 var(--up-r) var(--up-r);
  background:radial-gradient(620px circle at 84% 46%,rgba(124,196,240,.16),transparent 62%),
    linear-gradient(180deg,#132434 0,#132434 64px,#17304A 46%,#1C4263 100%)}
@media (min-width:821px){main>.hero{grid-template-columns:1.7fr 1fr}}
.hero h1{line-height:1.07}
.hero .h1-brand{opacity:1;color:var(--sky-pale);letter-spacing:.2em;margin-bottom:.9em}
.hero p.lede{color:var(--up-soft)}
.hero .hero-sla{color:var(--up-soft)}
.hero-mark{filter:drop-shadow(0 26px 44px rgba(2,8,16,.38))}

/* the four promises: a glass card that overlaps the bottom of the hero */
.band{position:relative;z-index:2;margin-top:-104px;padding:0 var(--up-pad);background:none;border:0}
.band .wrap{max-width:1084px;padding:0;gap:1px;overflow:hidden;border:1px solid var(--up-sky-line);border-radius:var(--up-r);
  background:rgba(124,196,240,.2);box-shadow:0 24px 54px rgba(2,8,16,.45)}
.band .wrap>div{padding:24px 24px 26px;background:rgba(14,27,41,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#B4C6D6}
.band strong{margin-bottom:6px}

/* ---------- sections ---------- */
section{padding:78px 0}
section.alt{margin:0 var(--up-gap);border:0;border-radius:28px;background:var(--up-panel)}
.intro{gap:40px 56px;margin-bottom:44px}
.intro h2,.page-hero .intro h1{font-weight:500;font-size:clamp(34px,4.3vw,56px);line-height:1.04;letter-spacing:-.028em}
.intro p{color:#AFC1D1}

/* comparison table: a rounded panel */
.table-scroll{border:1px solid var(--up-line);border-radius:20px;background:#0F1D2C}
.compare th,.compare td{padding:17px 20px;border-bottom-color:var(--up-line)}
.compare thead th{border-bottom:1px solid rgba(124,196,240,.5);background:rgba(124,196,240,.05)}
.compare thead th.us{background:rgba(124,196,240,.14)}
.compare td.us{background:rgba(124,196,240,.08)}
.compare tbody tr:last-child td{border-bottom:0}
.compare .no{color:#8097AB}

/* product ledger: hairline rows, kept */
.ledger{border-top:1px solid rgba(124,196,240,.5)}
.ledger .row{padding:30px 0;border-bottom-color:var(--up-line)}
.ledger .row:last-child{border-bottom:0;padding-bottom:0}
.ledger li{border-color:#34506B;color:#B4C6D6;background:rgba(11,22,34,.35)}

/* services: filled cards */
.services{gap:16px;border-top:0}
.service{padding:28px 30px;border:1px solid var(--up-line);border-radius:20px;background:var(--up-panel)}
.service p,.service ul{color:#AFC1D1}

/* steps: inset cards on the slate panel */
.steps{gap:14px;border-left:0}
.step{padding:26px 24px 28px;border:1px solid var(--up-sky-line);border-radius:20px;background:var(--up-deep)}
.step .n{font-size:52px}
.step p{color:#AFC1D1}

/* who we serve: outlined cards */
.clinics{gap:14px}
.clinics div{padding:22px 24px 24px;border:1px solid var(--up-line);border-radius:18px}
.clinics p{color:#AFC1D1}

/* checklist: two inset cards */
.checklist{gap:16px}
.checklist>div{padding:28px 30px;border:1px solid var(--up-line);border-radius:20px;background:var(--up-deep)}
.checklist ol{color:#AFC1D1}

/* faq: soft rows */
.faq{border-top:0}
.faq details{margin-bottom:10px;padding:0 24px;border:1px solid var(--up-line);border-radius:16px;background:#0F1D2C}
.faq details[open]{border-color:rgba(124,196,240,.45)}
.faq summary{padding:20px 0}
.faq .a{color:#AFC1D1}

/* blog list: one rounded panel of rows */
.posts{border:1px solid var(--up-line);border-radius:20px;overflow:hidden;background:rgba(11,22,34,.55)}
.post{padding:24px 28px;border-bottom-color:var(--up-line);transition:background .15s}
.post:last-child{border-bottom:0}
.post:hover{background:rgba(124,196,240,.06)}
.post time,.post p{color:#AFC1D1}

/* intake form */
form.intake{background:var(--up-panel);border-color:var(--up-line);border-radius:var(--up-r)}
form.intake input[type=text],form.intake input[type=email],form.intake input[type=tel],form.intake input[type=number],form.intake select,form.intake textarea{background:#0B1622;border-color:#34506B;border-radius:12px}
form.intake select option{background:#0B1622}
form.intake .check,form.intake .radio{background:#0B1622;border-color:#34506B}
form.intake .check{border-radius:12px}
form.intake .check:has(input:checked),form.intake .radio:has(input:checked){border-color:var(--sky);background:var(--raised)}
form.intake details.lf-more{border-color:#3D5B77;border-radius:14px}
.done{border-radius:18px}

/* about and book a call: line up with the page column */
.about-brand{padding:78px 0 12px}
.about-brand .about-wrap,body .book-call .book-wrap{max-width:1180px;padding:0 var(--up-pad)}
.about-brand h2{font-weight:500;font-size:clamp(28px,3.2vw,40px);letter-spacing:-.025em;margin-bottom:16px}
.about-brand p{color:#C9D8E4}
.about-brand .about-nap{opacity:1;color:#AFC1D1}

/* closing card: the one sky panel on the page */
body .book-call{padding:44px 0 84px}
body .book-call .book-card{padding:40px 44px;border:0;border-radius:var(--up-r);color:#0B1622;
  background:linear-gradient(135deg,#7CC4F0 0,#A9DAF7 100%);box-shadow:0 24px 54px rgba(2,8,16,.4)}
body .book-call h2{color:#0B1622;font-weight:700;font-size:clamp(30px,3.4vw,42px);letter-spacing:-.025em}
body .book-call .book-eyebrow{opacity:1;color:#12324B}
body .book-call .book-card p{color:#0F2233}
body .book-call .book-card .book-fine{opacity:1;color:#12324B}
body .book-call .book-actions a.btn.primary{background:#0B1622;color:#F4FAFF}
body .book-call .book-actions a.btn.primary:hover{background:#132434}
body .book-call .book-actions a.btn.ghost{background:transparent;border-color:#0B1622;color:#0B1622}
body .book-call .book-actions a.btn.ghost:hover{background:rgba(11,22,34,.1)}
body .book-call :focus-visible{outline-color:#0B1622}

/* ---------- inner pages: title block joined to the header ---------- */
.page-hero{margin:calc(-1*var(--up-under)) var(--up-gap) 0;padding:calc(var(--up-under) + 68px) 0 60px;border-radius:0 0 var(--up-r) var(--up-r);
  background:radial-gradient(560px circle at 88% 30%,rgba(124,196,240,.13),transparent 62%),
    linear-gradient(180deg,#132434 0,#132434 64px,#17304A 52%,#1C4263 100%)}
article.entry{padding-top:0}
/* text inside the block lines up with the text below it at every width */
.page-hero>.wrap{max-width:calc(var(--max) - 2*var(--up-gap));padding-left:calc(var(--up-pad) - var(--up-gap));padding-right:calc(var(--up-pad) - var(--up-gap))}
.page-hero>.wrap.narrow{max-width:calc(760px - 2*var(--up-gap))}
.pp .page-hero .pp-in{max-width:calc(46em - 2*var(--up-gap));padding-left:calc(24px - var(--up-gap));padding-right:calc(24px - var(--up-gap))}
.page-hero .meta{color:#B4C6D6;margin-bottom:10px}
.page-hero .meta:last-of-type{margin-bottom:24px}
.page-hero h1{line-height:1.06;font-size:clamp(34px,4.7vw,58px)}
.page-hero .lede{color:var(--up-soft);margin-top:22px}
.page-hero .entry-cta .sla{color:var(--up-soft)}
.page-hero .intro{margin-bottom:0;align-items:start}
.page-hero .intro p{color:var(--up-soft)}
.page-hero+section{padding-top:56px}
.entry .page-hero+.wrap>.content{margin-top:52px}
.entry .content h2{font-weight:500;font-size:32px;letter-spacing:-.022em;margin:48px 0 14px}
.entry .content .callout{border-radius:0 16px 16px 0}
.entry .content details{border-bottom-color:var(--up-line)}
.entry .content details:first-of-type{border-top-color:var(--up-line)}
.entry .cta{padding:32px 36px;border:1px solid var(--up-sky-line);border-radius:var(--up-r);background:linear-gradient(135deg,#1C4263 0,#132434 100%)}
.entry .cta p{color:var(--up-soft)}
.disclaimer{border-top-color:var(--up-line)}

/* privacy */
main>.pp{max-width:none;margin:0;padding:0}
.pp .pp-in{max-width:46em;margin:0 auto;padding:0 24px}
.pp>.pp-in{padding:44px 24px 80px}
.pp .page-hero .pp-updated{opacity:1;color:#B4C6D6;margin:10px 0 0}
.pp h2{font-weight:500}

/* ---------- footer ---------- */
footer{padding:64px 0 44px;border-top:1px solid var(--up-line)}
footer h2,footer h3{color:var(--sky)}

/* ---------- tablets and phones ---------- */
@media (max-width:900px){
  .step{border:1px solid var(--up-sky-line);padding-bottom:28px}
}
@media (max-width:820px){
  section{padding:60px 0}
  main>.hero{padding-top:calc(var(--up-under) + 48px);padding-bottom:150px}
  .band{margin-top:-96px}
  .intro{margin-bottom:32px}
  .about-brand{padding:60px 0 8px}
}
@media (max-width:760px){
  :root{--up-gap:8px;--up-r:20px}
  html{scroll-padding-top:92px}
  section,[id]{scroll-margin-top:92px}
  header .nav{height:64px}
  header .wrap{padding:0 12px}
  section.alt{border-radius:22px}
  .band .wrap>div{padding:20px 20px 22px}
  .service,.checklist>div{padding:22px}
  .step{padding:22px 20px 24px}
  .clinics div{padding:18px 20px 20px}
  .faq details{padding:0 18px}
  .post{padding:20px}
  .compare th,.compare td{padding:14px 16px}
  body .book-call{padding:28px 0 60px}
  body .book-call .book-wrap{padding:0 var(--up-pad)}
  body .book-call .book-card{padding:28px 24px;border-radius:var(--up-r)}
  .page-hero{padding:calc(var(--up-under) + 40px) 0 44px}
  .page-hero+section{padding-top:40px}
  .entry .page-hero+.wrap>.content{margin-top:40px}
  .entry .content h2{font-size:28px}
  .entry .cta{padding:24px 22px}
  .pp>.pp-in{padding:32px 20px 64px}
  .pp .pp-in{padding-left:20px;padding-right:20px}
  .pp .page-hero .pp-in{padding-left:calc(20px - var(--up-gap));padding-right:calc(20px - var(--up-gap))}
}
@media (max-width:420px){
  /* logo and phone stay inside the bar between 361px and 400px (the phone pill used to poke past the edge) */
  header .brand{font-size:16px;gap:8px}
  header .brand svg{width:32px;height:32px}
  header .nav{gap:6px}
}
@media (max-width:360px){header .brand{font-size:15px}header .brand svg{width:30px;height:30px}}
@media (max-width:340px){header .brand{font-size:14px;gap:6px}}