:root{
    /* High contrast color palette tuned for 60-80 age demographic */
    --ink:#11222c; 
    --navy:#0f3147; 
    --navy-deep:#0a1e2b; 
    --slate:#3d4e57;
    --brass:#72501e; 
    --brass-bright:#9e7235; 
    --brass-soft:#cbb482; 
    --brass-tint:#f6f1e5;
    --ivory:#f7f6f0; 
    --stone:#e2ded4; 
    --mist:#d0e0e7; 
    --card:#ffffff; 
    --line:#c7c0b0;
    --serif:"Newsreader",Georgia,"Times New Roman",serif;
    --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --wrap:1120px; 
    --radius:16px;
    --shadow:0 2px 4px rgba(10,30,43,.08), 0 14px 34px -24px rgba(10,30,43,.25);
    --shadow-lift:0 4px 8px rgba(10,30,43,.12), 0 22px 44px -26px rgba(10,30,43,.35);
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

  /* Nothing may widen the document. `clip` (not `hidden`) is deliberate:
     overflow-x:hidden creates a scroll container and breaks the sticky
     header, whereas clip contains overflow and leaves sticky working. */
  html,body{overflow-x:clip;max-width:100%}

  body{
    margin:0;
    background:var(--ivory);
    color:var(--ink);
    font-family:var(--sans);
    font-size:20px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3{
    font-family:var(--serif);
    font-weight:600;
    line-height:1.2;
    letter-spacing:-.01em;
    color:var(--navy-deep);
    margin:0;
  }
  
  p{margin:0 0 1.2rem}
  a{color:var(--navy);text-decoration-color:var(--brass-soft);text-underline-offset:4px}
  img{max-width:100%;display:block}
  
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
  .eyebrow{
    font-family:var(--sans);
    font-weight:700;
    font-size:.88rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--brass);
    margin:0 0 .8rem;
  }
  .lead{font-size:1.3rem;color:var(--slate);line-height:1.6}
  
  :focus-visible{
    outline:3px solid var(--brass-bright) !important;
    outline-offset:3px !important;
    border-radius:6px;
  }

  .arrowlink{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    font-family:var(--sans);
    font-weight:700;
    font-size:1.05rem;
    color:var(--navy);
    text-decoration:none;
    border-bottom:2px solid var(--brass-bright);
    padding-bottom:3px;
    min-height:48px;
  }
  .arrowlink svg{width:20px;height:20px;transition:transform .15s ease}
  .arrowlink:hover{border-bottom-color:var(--navy);color:var(--navy-deep)}
  .arrowlink:hover svg{transform:translateX(4px)}
  .arrowlink.light{color:#ffffff;border-bottom-color:var(--brass-soft)}

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    font-family:var(--sans);
    font-weight:700;
    font-size:1.08rem;
    line-height:1.2;
    padding:14px 24px;
    border-radius:999px;
    border:2px solid transparent;
    cursor:pointer;
    text-decoration:none;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
    min-height:50px;
    white-space:nowrap;
  }
  .btn-primary{background:var(--navy);color:#ffffff}
  .btn-primary:hover{background:var(--navy-deep);transform:translateY(-1px);box-shadow:var(--shadow-lift)}
  .btn-ghost{background:#ffffff;color:var(--navy);border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--navy);background:var(--ivory)}
  .btn svg{width:20px;height:20px}

  /* Header & Navigation */
  header.site{
    position:sticky;
    top:0;
    z-index:100;
    background:linear-gradient(180deg,#fbfaf6,var(--ivory));
    border-bottom:1px solid var(--line);
    box-shadow:0 4px 16px -12px rgba(10,30,43,.15);
  }
  .nav{
    display:flex;
    align-items:center;
    gap:28px;
    min-height:80px;
  }
  .brand{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
    line-height: 1.15;
    flex-shrink: 0;
    margin-right: auto;
  }
  .brand .nm{font-family:var(--serif);font-weight:700;font-size:1.35rem;color:var(--navy-deep)}
  .brand .rl{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);font-weight:700;margin-top:2px}
  
  .menu{
    display:flex;
    gap:4px;
    align-items:center;
    list-style:none;
    margin:0;
    padding:0;
  }
  .menu li{display:flex}
  .menu a{
    font-family:var(--sans);
    font-weight:600;
    font-size:.98rem;
    color:var(--ink);
    text-decoration:none;
    padding:8px 8px;
    border-radius:8px;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
  }
  .menu a:hover{background:var(--stone);color:var(--navy-deep)}
  
  .nav .btn-nav{padding:10px 20px;min-height:46px;font-size:.98rem;flex-shrink:0}
  
  .burger{
    display:none;
    background:#ffffff;
    border:2px solid var(--line);
    border-radius:10px;
    width:48px;
    height:48px;
    cursor:pointer;
    color:var(--navy);
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .burger svg{width:26px;height:26px}

  /* Hero */
  .hero{
    padding-top: 0px;
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(1000px 560px at 85% -8%,  rgba(185,138,74,.42), transparent 60%),
      radial-gradient(760px 520px at 100% 55%,  rgba(196,152,88,.26), transparent 62%),
      radial-gradient(900px 640px at -10% 95%,  rgba(21,59,82,.20),   transparent 58%),
      radial-gradient(760px 520px at 18% -12%,  rgba(176,206,219,.55), transparent 62%),
      linear-gradient(168deg, #fdfcf8 0%, #f3f1ea 55%, #e8ece6 100%);
  }
  /* fine grain so the large soft area doesn't band on wide screens */
  .hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
  .hero .wrap{position:relative;z-index:1}
  .hero .wrap{
    display:block;              /* image is now a bleed panel, not a grid column */
    padding-top:76px;
    padding-bottom:76px;
    min-height:520px;
  }
  .hero-text{max-width:min(52%,600px)}
  .hero h1{font-size:clamp(2.4rem,4.5vw,3.6rem);margin-bottom:1.2rem}
  .hero h1 .accent{font-style:italic;color:var(--navy)}
  .hero .lead{margin-bottom:2rem;max-width:38ch}
  
  .tick{
    flex:none;
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--mist);
    color:var(--navy-deep);
    display:grid;
    place-items:center;
    margin-top:2px;
  }
  .tick svg{width:16px;height:16px}

  /* Reassurance strip */
  .assure{background:var(--navy)}
  .assure .wrap{padding:36px 24px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
  .assure p{margin:0;font-family:var(--serif);font-size:1.45rem;line-height:1.45;color:#ffffff;flex:1;min-width:min(290px,100%)}
  .assure .who{font-size:1.08rem;color:#d2e2eb;font-family:var(--sans);font-weight:500}

  /* Sections */
  section{padding:52px 0}
  .sec-head{max-width:64ch;margin-bottom:38px}
  .sec-head h2{font-size:clamp(1.8rem,3.2vw,2.4rem);margin-bottom:.7rem}
  .sec-head p{color:var(--slate);font-size:1.18rem;margin:0}
  .alt{background:var(--stone)}

  
  .inline-trust{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid var(--line);
  }
  .inline-trust-item{
    background:var(--stone);
    border:1px solid var(--line);
    border-radius:10px;
    padding:12px 10px;
    text-align:center;
  }
  .inline-trust-item b{display:block;font-size:.95rem;color:var(--navy-deep);line-height:1.2}
  .inline-trust-item span{display:block;font-size:.82rem;color:var(--slate);margin-top:2px}

  /* Compact HoLEP Section */
  section.holep{background:var(--navy);color:#e2edf3;padding:48px 0}
  .holep .eyebrow{color:var(--brass-soft);margin-bottom:.4rem}
  .holep h2{color:#ffffff;font-size:clamp(1.6rem,2.8vw,2.1rem)}
  .holep-head{display:grid;grid-template-columns:.85fr 1.15fr;gap:36px;align-items:center;margin-bottom:24px}
  .holep-intro p{color:#d2e2eb;font-size:1.02rem;line-height:1.55;margin-bottom:.6rem}
  .holep-intro p:last-child{margin-bottom:0}
  .holep-feats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    border-top:1px solid rgba(255,255,255,.15);
    padding-top:24px;
  }
  .feat{display:flex;gap:14px;align-items:flex-start}
  .feat .fi{
    width:38px;
    height:38px;
    border-radius:10px;
    background:rgba(228,211,173,.2);
    color:var(--brass-soft);
    display:grid;
    place-items:center;
    flex-shrink:0;
  }
  .feat .fi svg{width:20px;height:20px}
  .feat b{color:#ffffff;display:block;font-size:1.02rem;margin-bottom:2px;line-height:1.25}
  .feat p{color:#c5d8e2;font-size:.92rem;margin:0;line-height:1.4}
  .holep-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);flex-wrap:wrap}
  .holep-foot .src{font-size:.88rem;color:#b2c8d4;max-width:62ch;margin:0}

  /* Conditions */
  .cond{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .cond-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:24px;
    text-decoration:none;
    color:var(--ink);
    display:flex;
    flex-direction:column;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .cond-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--brass-bright)}
  .cond-card b{font-family:var(--serif);font-weight:600;font-size:1.24rem;color:var(--navy-deep);margin-bottom:.4rem}
  .cond-card p{color:var(--slate);font-size:1.02rem;margin:0 0 1rem;flex:1}
  .cond-card .more{color:var(--navy);font-weight:700;font-size:1rem;display:inline-flex;align-items:center;gap:.4rem}
  .cond-card .more .arw{color:var(--brass);transition:transform .15s ease}
  .cond-card:hover .more .arw{transform:translateX(4px)}

  /* Private & International */
  .pi-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
  /* Compact treatment: icon sits inline with the heading rather than stacked
     above it, per-card intro paragraphs removed, tighter padding and gaps. */
  .pi-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
  .pi-card .ic{
    width:34px;
    height:34px;
    border-radius:9px;
    background:var(--mist);
    color:var(--navy-deep);
    display:inline-grid;
    place-items:center;
    flex:none;
  }
  .pi-card .ic svg{width:19px;height:19px}
  .pi-card h3{
    font-size:1.16rem;margin:0 0 14px;
    display:flex;align-items:center;gap:11px;line-height:1.25;
  }
  .pi-card p{color:var(--slate);font-size:1.05rem;margin:0 0 1rem}
  .pi-card ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
  .pi-card li{display:flex;gap:12px;align-items:flex-start;color:var(--ink);font-size:1.05rem;font-weight:500}

  /* Reviews */
  .reviews{background:var(--navy)}
  .reviews h2 {color:var(--stone);}
   .rev-box{
    background:transparent;
    border:0;
    border-radius:var(--radius);
    padding:0;
    text-align:center;
    color:var(--navy);
    max-width:1080px;
    margin:0 auto;
    font-size:1.1rem;
  }

  /* Accessible FAQ Accordion */
  .faq{max-width:860px;margin:0 auto}
  details{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    margin-bottom:14px;
    overflow:hidden;
  }
  details[open]{border-color:var(--brass-bright);box-shadow:var(--shadow)}
  summary{
    cursor:pointer;
    list-style:none;
    padding:22px 26px;
    font-weight:700;
    font-size:1.18rem;
    color:var(--navy-deep);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    min-height:64px;
  }
  summary::-webkit-details-marker{display:none}
  summary .pm{
    flex:none;
    display:flex;
    align-items:center;
    gap:6px;
    padding:9px 15px;
    border-radius:999px;
    background:var(--mist);
    color:var(--navy-deep);
    font-family:var(--sans);
    font-weight:700;
    font-size:.92rem;
    letter-spacing:.02em;
    min-height:36px;
    transition:background .2s ease, color .2s ease;
  }
  summary .pm .pm-hide{display:none}
  summary .pm svg{width:16px;height:16px;flex:none;transition:transform .2s ease}
  details[open] summary .pm{background:var(--brass-bright);color:#ffffff}
  details[open] summary .pm .pm-show{display:none}
  details[open] summary .pm .pm-hide{display:inline}
  details[open] summary .pm svg{transform:rotate(180deg)}
  details .body{padding:0 26px 24px;color:var(--slate);font-size:1.1rem;line-height:1.65}

  .contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px}
  .form-card{background:#ffffff;border-radius:var(--radius);padding:34px;color:var(--ink)}
  .form-card h3{font-size:1.35rem;margin-bottom:1.2rem}
  .field{margin-bottom:18px}
  .field label{display:block;font-weight:700;font-size:1rem;margin-bottom:8px;color:var(--navy-deep)}
  .field input,.field select,.field textarea{
    width:100%;
    font-family:var(--sans);
    font-size:1.08rem;
    padding:14px 16px;
    border:2px solid var(--line);
    border-radius:10px;
    background:var(--ivory);
    color:var(--ink);
  }
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);outline:none;background:#ffffff}
  .form-card .btn{width:100%;margin-top:8px}
  .form-note{font-size:.92rem;color:var(--slate);margin:16px 0 0;text-align:center;line-height:1.5}
  
  .contact-info h3{color:#ffffff;font-size:1.3rem;margin:0 0 16px;font-family:var(--serif);font-weight:600}
  
  .loc{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
    border-radius:14px;
    padding:20px 22px;
    margin-bottom:16px;
  }
  .loc b{color:#ffffff;display:block;margin-bottom:4px;font-size:1.1rem}
  .loc span{color:#d2e2eb;font-size:1.02rem;display:block}
  .loc a{color:var(--navy-deep);text-decoration:none}
  .loc a:hover{text-decoration:underline}
  .contact-info .line{display:flex;gap:14px;align-items:center;color:#ffffff;margin:16px 0;font-size:1.12rem;font-weight:500}
  .contact-info .line svg{width:22px;height:22px;color:var(--brass-soft);flex:none}

  /* Footer */
  footer.site{background:var(--navy-deep);color:#b6cbd6;font-size:1rem;padding:52px 0 120px}
  .foot-grid{display:grid;grid-template-columns:1.5fr 1fr auto;gap:36px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.15)}
  footer .brand .nm{color:#ffffff}
  footer .brand{margin-bottom:14px}
  .foot-dpms{margin-top:14px;font-size:.88rem;color:#92aab7;letter-spacing:.04em}
  footer h4{color:#ffffff;font-family:var(--sans);font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 16px;font-weight:700}
  footer ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
  footer a{color:#d6e4ec;text-decoration:none;padding:2px 0;display:inline-block}
  footer a:hover{text-decoration:underline;text-decoration-color:var(--brass-soft)}
  .foot-legal{padding-top:24px;font-size:.9rem;color:#92aab7;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}

  /* Mobile Action Bar */
  .mobar{
    display:none;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:90;
    background:#ffffff;
    border-top:2px solid var(--line);
    padding:12px 16px;
    gap:12px;
    box-shadow:0 -8px 24px rgba(10,30,43,.15);
  }
  .mobar a{flex:1;min-height:52px;font-size:1.05rem}

  /* Responsive Adjustments */
  @media (max-width:1120px){
    .menu{display:none}
    .burger{display:flex}
    .header-phone{display:none}

    .menu.open{
      display:flex;
      position:absolute;
      top:80px;
      left:0;
      right:0;
      flex-direction:column;
      background:var(--ivory);
      border-bottom:1px solid var(--line);
      padding:6px 24px 18px;
      gap:0;
      box-shadow:0 12px 28px rgba(10,30,43,.14);
    }
    .menu.open li{border-top:1px solid var(--line)}
    .menu.open li:first-child{border-top:0}
    .menu.open a{
      padding:16px 4px;
      border-radius:0;
      font-size:1.08rem;
      font-weight:600;
      background:transparent;
      border:0;
      width:100%;
      color:var(--navy-deep);
    }
    .menu.open a:hover{background:transparent;color:var(--brass)}
  }

  @media (max-width:960px){
    .hero .wrap{grid-template-columns:1fr;gap:36px;padding-bottom:0px}
    .holep-head,.contact-grid,.pi-grid{grid-template-columns:1fr;gap:24px}
    .holep-feats{grid-template-columns:1fr;gap:16px}
    .inline-trust{grid-template-columns:repeat(2,1fr)}
.cond{grid-template-columns:1fr 1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
  }

  @media (max-width:640px){
    body{font-size:20px}

    .nav .btn-nav{display:none}
.cond,.inline-trust,.foot-grid{grid-template-columns:1fr}
    .assure p{font-size:1.25rem}
    section{padding:52px 0}
    .form-card{padding:26px 20px}
    .mobar{display:flex}
    footer.site{padding-bottom:110px}
    section.hero{padding:0px;margin:0px}
    .hero .wrap {gap:0px; margin-bottom: 0px}
  }

  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  }

/* =========================================================
   INTERIOR PAGE COMPONENTS (symptoms/conditions/treatments)
   ========================================================= */

/* Breadcrumb */
.crumb{font-family:var(--sans);font-size:.92rem;color:var(--slate);margin-bottom:14px}
.crumb a{color:var(--slate);text-decoration:none;border-bottom:1px dotted var(--line)}
.crumb a:hover{color:var(--navy)}
.crumb span{color:var(--brass);font-weight:600}

/* Sub-hero: shorter hero band for interior pages */
.subhero{
  background:
    radial-gradient(1000px 420px at 90% -20%, rgba(154,114,51,.10), transparent 60%),
    var(--ivory);
  padding:40px 0 44px;
  border-bottom:1px solid var(--line);
}
.subhero .eyebrow{margin-bottom:.6rem}
.subhero h1{font-size:clamp(2rem,4vw,2.9rem);margin-bottom:.9rem;max-width:20ch}
.subhero .lead{max-width:62ch;margin-bottom:0}
.subhero .tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.tag{display:inline-flex;align-items:center;font-family:var(--sans);font-weight:600;font-size:.86rem;
  background:var(--mist);color:var(--navy-deep);padding:6px 14px;border-radius:999px}
.tag.brass{background:var(--brass-tint);color:#684a1a}

/* Article layout: content + sticky sidebar */
.article-grid{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start}
.article{max-width:72ch}
.article h2{font-size:1.5rem;margin:2.2rem 0 .8rem}
.article h2:first-child{margin-top:0}
.article h3{font-size:1.18rem;margin:1.6rem 0 .6rem;color:var(--navy)}
.article p{color:var(--ink);font-size:1.08rem;line-height:1.72}
.article ul,.article ol{padding-left:1.3rem;margin:0 0 1.2rem;color:var(--ink);font-size:1.06rem;line-height:1.7}
.article li{margin-bottom:.5rem}
.article strong{color:var(--navy-deep)}

/* Sidebar quick-facts card */
.sidebar{position:sticky;top:100px;display:flex;flex-direction:column;gap:20px}
.quickfacts{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;box-shadow:var(--shadow)}
.quickfacts h3{font-size:1.05rem;margin-bottom:14px;font-family:var(--sans);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--brass)}
.quickfacts dl{margin:0;display:grid;gap:14px}
.quickfacts dt{font-size:.86rem;color:var(--slate);font-weight:500}
.quickfacts dd{margin:2px 0 0;font-size:1.02rem;color:var(--navy-deep);font-weight:600;font-family:var(--serif)}
.sidebar .btn{width:100%;justify-content:center}
.sidebar-cta{background:var(--navy);border-radius:var(--radius);padding:24px;color:#fff}
.sidebar-cta p{color:#d2e2eb;font-size:.98rem;margin-bottom:14px}
.sidebar-cta .btn-primary{background:var(--brass-bright)}
.sidebar-cta .btn-primary:hover{background:var(--brass)}

/* Callout boxes */
.callout{border-radius:14px;padding:20px 22px;margin:1.6rem 0;font-size:1.02rem;line-height:1.6}
.callout-info{background:var(--mist);border:1px solid #c3d8e0}
.callout-urgent{background:var(--brass-tint);border:1px solid var(--brass-soft)}
.callout b{display:block;margin-bottom:6px;font-family:var(--sans);font-size:.98rem;
  text-transform:uppercase;letter-spacing:.04em}
.callout-info b{color:var(--navy)}
.callout-urgent b{color:var(--brass)}
.callout p{margin:0;font-size:1rem;color:var(--ink)}

/* Numbered step list */
.steps{list-style:none;margin:1.4rem 0;padding:0;counter-reset:step}
.steps li{display:flex;gap:18px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--line)}
.steps li:first-child{border-top:0}
.steps .num{flex:none;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:1.05rem}
.steps b{display:block;font-size:1.08rem;color:var(--navy-deep);margin-bottom:3px}
.steps p{margin:0;color:var(--slate);font-size:.99rem}

/* Comparison table */
.compare-wrap{margin:1.4rem 0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
table.compare{width:100%;border-collapse:collapse;font-size:.98rem;background:var(--card)}
table.compare th,table.compare td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);
  vertical-align:top}
table.compare th{background:var(--stone);font-family:var(--sans);font-weight:700;color:var(--navy-deep);
  font-size:.9rem;text-transform:uppercase;letter-spacing:.03em}
table.compare tbody tr:last-child td{border-bottom:0}
table.compare td.row-head{font-weight:600;color:var(--navy-deep)}

/* ---------------------------------------------------------
   Tables on mobile.
   Three-column comparison tables with long text cannot work
   at phone width — horizontal scrolling hid half the content.
   Below 720px each row becomes its own stacked card: the first
   cell is the card heading, and every other cell shows its
   column heading as a small label above the value.
   --------------------------------------------------------- */
@media (max-width:720px){
  .compare-wrap{border:0;border-radius:0;overflow:visible}
  table.compare{background:transparent;display:block}
  table.compare thead{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;  /* hidden visually, still read by screen readers */
  }
  table.compare tbody{display:block}
  table.compare tr{
    display:block;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:12px;
    padding:16px 18px;
    margin-bottom:14px;
    box-shadow:var(--shadow);
  }
  table.compare td{
    display:block;
    padding:0;
    border-bottom:0;
  }
  table.compare td.row-head{
    font-family:var(--serif);
    font-weight:600;
    font-size:1.14rem;
    color:var(--navy-deep);
    padding-bottom:10px;
    margin-bottom:12px;
    border-bottom:1px solid var(--line);
  }
  table.compare td[data-label]{padding-top:12px}
  table.compare td[data-label]:first-of-type{padding-top:0}
  table.compare td[data-label]::before{
    content:attr(data-label);
    display:block;
    font-family:var(--sans);
    font-size:.76rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--brass);
    margin-bottom:3px;
  }
  /* rows whose header cell is blank (e.g. HoLEP vs TURP) need no label gap */
  table.compare td[data-label=""]::before{display:none}
}

/* Related pages grid (reuses cond-card look) */
.related{margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--line)}
.related h3{font-family:var(--sans);font-size:.86rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--brass);margin-bottom:16px}

/* Hub grids (symptoms/conditions/treatments landing pages) */
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hub-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  text-decoration:none;color:var(--ink);display:flex;flex-direction:column;box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.hub-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--brass-bright)}
.hub-card .ic{width:48px;height:48px;border-radius:12px;background:var(--mist);color:var(--navy-deep);
  display:grid;place-items:center;margin-bottom:16px}
.hub-card .ic svg{width:26px;height:26px}
.hub-card b{font-family:var(--serif);font-weight:600;font-size:1.44rem;color:var(--navy-deep);margin-bottom:6px}
.hub-card p{color:var(--slate);font-size:1rem;margin:0 0 1rem;flex:1}
.hub-card .more{color:var(--navy);font-weight:700;font-size:.96rem;display:inline-flex;align-items:center;gap:.4rem}
.hub-card .more .arw{color:var(--brass);transition:transform .15s ease}
.hub-card:hover .more .arw{transform:translateX(4px)}

/* Symptom list rows (symptoms.html) */
.symptom-rows{display:flex;flex-direction:column;gap:14px}
.symptom-row{display:flex;justify-content:space-between;align-items:center;gap:20px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 24px;
  text-decoration:none;color:var(--ink);transition:border-color .15s ease, background .15s ease}
.symptom-row:hover{border-color:var(--brass-bright);background:#fff}
.symptom-row b{font-family:var(--serif);font-weight:600;font-size:1.44rem;color:var(--navy-deep);
  display:block;margin-bottom:5px;line-height:1.3}
.symptom-row span.sub{display:block;color:var(--slate);font-size:.96rem;line-height:1.4}
.symptom-row .arw{color:var(--brass);font-size:1.3rem;flex:none}

@media (max-width:960px){
  .article-grid{grid-template-columns:1fr}
  .sidebar{position:static}
  .hub-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .hub-grid{grid-template-columns:1fr}
  .symptom-row{flex-direction:row;padding:16px 18px}
}

/* Embedded location maps */
.map-wrap{overflow:hidden;border-radius:12px;margin-top:14px;border:1px solid var(--line);
  box-shadow:var(--shadow)}
.loc-map{width:100%;height:230px;display:block;border:0}

/* =========================================================
   ACCESSIBILITY ADDITIONS — phone prominence, location line,
   compact conditions grid (for the decluttered homepage)
   ========================================================= */

/* Header phone number (desktop) — sits beside the Request-appointment button */
.header-phone{
  display:flex;align-items:center;gap:9px;
  font-family:var(--sans);font-weight:700;font-size:1.05rem;color:var(--navy-deep);
  text-decoration:none;white-space:nowrap;padding:8px 4px;min-height:48px;
}
.header-phone svg{width:20px;height:20px;color:var(--brass);flex:none}
.header-phone:hover{color:var(--brass)}

/* Hero: location line + phone reassurance line */
.hero-location{
  display:inline-flex;align-items:bottom;gap:8px;font-family:var(--sans);font-weight:800; text-transform: uppercase; letter-spacing: 1px;
  font-size:.88rem;color:var(--brass);margin-bottom:1.1rem;
}
.hero-location svg{width:18px;height:18px;color:var(--brass);flex:none}

/* Compact 4-across conditions grid for the decluttered homepage */
.cond-compact{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:960px){.cond-compact{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cond-compact{grid-template-columns:1fr}}

/* Mobile sticky bar: restore a Call action alongside Request-an-appointment,
   now made consistent since the header ALSO shows the phone number on desktop */
.mobar{gap:8px}
.mobar .btn{flex:1;padding:14px 10px;font-size:.95rem}
.mobar .btn svg{width:18px;height:18px}

/* Consent checkbox (contact form) */
.field-consent label{display:flex;align-items:flex-start;gap:12px;font-weight:400;
  font-size:.98rem;line-height:1.5;color:var(--ink);cursor:pointer;padding:4px 0}
.field-consent input[type="checkbox"]{flex:none;width:24px;height:24px;margin-top:2px;
  accent-color:var(--navy);cursor:pointer}
.field-consent a{color:var(--navy);font-weight:600}

/* Thank-you page confirmation panel */
.thanks-panel{max-width:640px;margin:0 auto;text-align:center;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:48px 36px;box-shadow:var(--shadow)}
.thanks-panel .tick-big{width:72px;height:72px;border-radius:50%;background:var(--mist);
  color:var(--navy);display:grid;place-items:center;margin:0 auto 24px}
.thanks-panel .tick-big svg{width:36px;height:36px}
.thanks-panel h1{font-size:clamp(1.7rem,3.2vw,2.3rem);margin-bottom:.8rem}
.thanks-panel p{color:var(--slate);font-size:1.1rem}
.thanks-panel .thanks-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}

/* =========================================================
   HERO PORTRAIT + EXPECT STRIP (homepage declutter)
   ========================================================= */
 
.hero-portrait-wrap{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:clamp(360px, 46vw, 760px);
  overflow:hidden;
}
.hero-portrait{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
  object-position:58% 18%;
  border:0;
  border-radius:0;
  box-shadow:none;
  display:block;
}
/* crisp brass edge defining the panel's left boundary */
.hero-portrait-wrap::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:3px;
  pointer-events:none;
}

/* Hero actions: one primary CTA + a quieter phone alternative, clearly ranked */

/* Top Doctors seal in the footer */
.td-seal{margin-top:18px;max-width:170px;overflow:hidden}
.td-seal img,.td-seal svg{max-width:100%;height:auto;display:block}
@media (max-width:640px){.td-seal{margin-inline:auto}}

/* =========================================================
   OVERFLOW GUARDS
   Third-party widgets render markup we don't control, so
   constrain their containers rather than the page body
   (overflow-x:hidden on html/body would break the sticky header).
   ========================================================= */
/* Constrain the CONTAINER only. Do not restyle the widget's internal markup —
   forcing max-width on every descendant squashes its own responsive layout. */
#topdoctors-gb-widget-container-12{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
/* The footer seal must never scroll or overflow — it sits on every page,
   so anything escaping it widens the whole document. */
#topdoctors-gb-widget-container-8{
  max-width:100%;
  overflow:hidden;
}
.rev-box{max-width:100%}
.td-seal{max-width:170px}

/* Belt-and-braces: nothing should be able to push the page sideways */
img,svg,iframe,video,table{max-width:100%}

/* ---------------------------------------------------------
   Review widget on narrow screens.
   The Top Doctors widget lays its header out as a non-wrapping
   flex row. Squeezed below ~700px the title column collapses to
   ~100px and breaks one word per line, and part of the header
   overflows. Rather than fight its internal CSS, give it the width
   it needs and let it scroll horizontally inside its own box.
   --------------------------------------------------------- */
@media (max-width:860px){
  .reviews .wrap{padding-left:12px;padding-right:12px}

  .rev-box{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding-bottom:10px;
    /* fade the right edge so it's obvious there's more to see */
    -webkit-mask-image:linear-gradient(to right,#000 88%,rgba(0,0,0,.35) 100%);
            mask-image:linear-gradient(to right,#000 88%,rgba(0,0,0,.35) 100%);
  }
  /* the inner container must NOT also scroll, or you get nested scrollers */
  #topdoctors-gb-widget-container-12{
    min-width:700px;
    max-width:none;
    overflow-x:visible;
  }
  .rev-hint{display:block}
}

/* Swipe affordance — hidden on desktop where the widget fits */
.rev-hint{
  display:none;
  margin:12px auto 0;
  font-size:.92rem;
  color:var(--slate);
  text-align:center;
}
.rev-hint svg{width:16px;height:16px;vertical-align:-3px;margin-left:4px;color:var(--brass)}

/* Introduction video (self-hosted — deliberately NOT a YouTube embed, which
   would set third-party cookies before consent and add a fourth tracker
   alongside Maps, Fonts and Top Doctors). */
.intro-video{margin:0 0 2rem;padding:0}
.intro-video video{
  width:100%;height:auto;display:block;
  border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  background:var(--navy-deep);
}
.intro-video figcaption{
  margin-top:12px;font-size:.95rem;color:var(--slate);line-height:1.5;
}

/* Private & international — compact refinements.
   Bullets use a smaller tick, and the long insurer list moved out of the
   card into a single quiet line so it stops inflating the card height. */
.pi-card li{font-size:1rem;line-height:1.45;align-items:flex-start}
.pi-card li .tick{width:20px;height:20px;margin-top:2px}
.pi-card li .tick svg{width:12px;height:12px}

.pi-insurers{
  margin:18px 0 0;
  font-size:.95rem;
  line-height:1.5;
  color:var(--slate);
  max-width:78ch;
}
.pi-insurers strong{color:var(--navy-deep);font-weight:600}

#private .arrowlink{margin-top:16px;display:inline-flex}

/* "Known to patients as Danny" — the bridge between his formal name
   (used in the header, titles, schema and legal pages) and the informal
   name used in body copy */
.known-as{
  margin:-4px 0 14px;
  font-size:1rem;
  color:var(--brass);
  font-weight:600;
  letter-spacing:.01em;
}

/* "Contact" appears in the hamburger menu only — the desktop header already
   carries the phone number and the Request an appointment button.
   NOTE: the selectors below are deliberately `.menu li.nav-contact`, not
   `.nav-contact`. There is a `.menu li{display:flex}` rule earlier in this
   file with specificity (0,1,1); a bare `.nav-contact` is only (0,1,0) and
   loses to it, so the item stayed visible on desktop. */
.menu li.nav-contact{display:none}
@media (max-width:1120px){
  .menu.open li.nav-contact{display:flex}
}

/* ------------------------------------------------------------------
   Hero portrait — responsive cascade.
   Above 1024px the portrait is an absolutely-positioned bleed panel with a
   clean hard edge and no caption. Below that it keeps the SAME character —
   an edge-to-edge photo band, no frame, no border, no rounded corners —
   rather than reverting to a framed thumbnail. Everything the absolute
   rules set must be explicitly reset or it leaks through and collapses.
   ------------------------------------------------------------------ */
@media (max-width:1024px){
  .hero-text{max-width:none}

  .hero-portrait-wrap{
    position:static;
    display:block;
    width:100%;
    max-width:none;
    height:360px;
    margin:34px 0 0;
    padding:0;
    overflow:hidden;
  }
  .hero-portrait-wrap::after{display:none}

  .hero-portrait{
    position:static;
    inset:auto;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    margin:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    object-fit:cover;
    object-position:center 18%;
  }
}

@media (max-width:640px){
  .hero-portrait-wrap{height:380px;margin-top:0px}
  .hero-portrait{object-position:center 15%}
}

/* Footer: legal links now live in the small print rather than a nav column */
.foot-legal-links{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center}
.foot-legal-links a{color:#9db4bd;text-decoration:none;font-size:.82rem}
.foot-legal-links a:hover{color:#fff;text-decoration:underline}

/* The nav column no longer has a heading, so align it with the brand column */
.foot-grid > div > ul:first-child{margin-top:4px}

/* Footer accreditation badges — right-hand column */
.foot-badges{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:18px;
}
.foot-badges .td-seal{margin-top:0}
.doctify-badge{
  display:block;
  max-width:170px;
  line-height:0;
  border-radius:8px;
  transition:opacity .15s ease;
}
.doctify-badge:hover{opacity:.85}
.doctify-badge img{width:100%;height:auto;display:block;border-radius:8px}

@media (max-width:960px){
  .foot-badges{align-items:flex-start}
}
@media (max-width:640px){
  .foot-badges{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:20px;
  }
  .foot-badges .td-seal{margin-inline:0}
  .doctify-badge{max-width:140px}
}

/* =========================================================
   SOURCE-ORDER FIX — must stay at the end of this file.

   The base `.header-phone` rule is defined further down this
   stylesheet than the @media (max-width:1120px) block that hides
   it. Media queries do NOT add specificity, so on a tie the LATER
   rule wins — the phone stayed visible on mobile, consumed the
   header width, and pushed the hamburger out of view.
   These rules re-assert the mobile behaviour last.
   ========================================================= */
@media (max-width:1120px){
  .header-phone{display:none !important}
  .burger{display:flex !important}
}

/* The hamburger must never be squeezed or pushed out of the header */
.nav{flex-wrap:nowrap}
.burger{flex:0 0 auto}
.brand{min-width:0}
.brand .nm{overflow-wrap:anywhere}