/*
Theme Name: KSP Hands
Theme URI: https://ksphands.co.uk
Author: Katarzyna Studnicka-Perkin
Description: Custom one-page theme for KSP Hands — hand and wrist surgery, North Wales.
Version: 1.6
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ksphands
*/


  :root{
    --paper:#FFFFFF;
    --paper-raised:#F1F4F3;
    --ink:#12161A;
    --navy:#0B2338;
    --navy-deep:#071A2B;
    --green:#1F4D3E;
    --green-deep:#163B30;
    --stone:#5F6663;
    --hairline:#E1E6E3;
    --white:#FFFFFF;
    --max:1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif; font-size:17px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation:none !important; transition:none !important;} }
  h1,h2,h3,h4{ font-family:'Fraunces', serif; font-weight:500; line-height:1.12; margin:0; color:var(--ink); }
  p{margin:0;}
  a{color:inherit;}
  img{max-width:100%; display:block;}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
  @media (max-width:640px){ .wrap{padding:0 20px;} }
  a:focus-visible, button:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; }

  header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.94); backdrop-filter:blur(6px); border-bottom:1px solid var(--hairline); }
  .nav{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; }
  .brand{ display:flex; align-items:center; gap:9px; text-decoration:none; font-family:'Fraunces',serif; font-size:1.25rem; font-weight:500; color:var(--ink); letter-spacing:-0.01em; }
  .brand-icon{ height:38px; width:auto; }
  nav.links{display:flex; gap:26px; align-items:center;}
  nav.links a{ text-decoration:none; font-size:0.92rem; color:var(--ink); padding-bottom:3px; border-bottom:1px solid transparent; }
  nav.links a:hover{border-bottom-color:var(--navy);}
  .nav-cta{ background:var(--navy); color:var(--white); padding:9px 18px; border-radius:2px; text-decoration:none; font-size:0.87rem; font-weight:500; }
  .nav-cta:hover{background:var(--navy-deep);}
  .menu-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
  .menu-toggle svg{width:24px; height:24px;}
  @media (max-width:940px){
    nav.links{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0;
      background:var(--paper); border-bottom:1px solid var(--hairline); padding:8px 20px 18px; display:none; }
    nav.links.open{display:flex;}
    nav.links a{width:100%; padding:12px 0; border-bottom:1px solid var(--hairline);}
    .nav-cta{margin-top:10px;}
    .menu-toggle{display:block;}
  }

  .topo{position:absolute; inset:0; width:100%; height:100%; opacity:0.5; pointer-events:none;}
  .topo path{fill:none; stroke:var(--navy); stroke-width:1;}

  .hero{position:relative; overflow:hidden; padding:64px 0 64px; border-bottom:1px solid var(--hairline);}
  .hero-grid{ display:grid; grid-template-columns:1.2fr 0.9fr; gap:56px; align-items:center; position:relative; z-index:2; }
  .hero h1{ font-size:clamp(2.1rem, 4.2vw, 3.25rem); max-width:15ch; letter-spacing:-0.01em; }
  .hero-lede{ margin-top:22px; max-width:46ch; font-size:1.08rem; color:#2B3033; }
  .hero-actions{margin-top:32px; display:flex; gap:16px; flex-wrap:wrap;}
  .btn{ display:inline-block; padding:13px 24px; text-decoration:none; font-size:0.95rem; font-weight:500; border-radius:2px; }
  .btn-primary{background:var(--navy); color:var(--white);}
  .btn-primary:hover{background:var(--navy-deep);}
  .btn-ghost{border:1px solid var(--ink); color:var(--ink);}
  .btn-ghost:hover{background:var(--ink); color:var(--white);}

  .hero-photo-card{ background:var(--white); border:1px solid var(--hairline); overflow:hidden; }
  .hero-photo-card img{ width:100%; aspect-ratio:4/3.3; object-fit:cover; object-position:center 15%; }
  .hero-photo-meta{ padding:20px 22px; }
  .hero-photo-meta .name{font-family:'Fraunces',serif; font-size:1.2rem;}
  .hero-photo-meta .cred{font-size:0.8rem; color:var(--stone); margin-top:4px;}
  .stat-row{display:flex; gap:24px; border-top:1px solid var(--hairline); padding:16px 22px 0; margin-top:16px;}
  .stat b{display:block; font-family:'Fraunces',serif; font-size:1.5rem; font-weight:500; color:var(--navy);}
  .stat span{font-size:0.76rem; color:var(--stone);}
  @media (max-width:860px){ .hero-grid{grid-template-columns:1fr;} .hero-photo-card{order:-1; max-width:380px;} }

  .trust-strip{ background:var(--paper-raised); border-bottom:1px solid var(--hairline); padding:20px 0; }
  .trust-strip .wrap{ display:flex; align-items:center; justify-content:center; }
  .trust-badge{ display:inline-flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink);
    background:var(--white); border:1px solid var(--hairline); border-radius:40px; padding:10px 20px 10px 10px; }
  .trust-badge:hover{ border-color:var(--navy); }
  .trust-badge-mark{ display:flex; align-items:center; justify-content:center; background:var(--navy); color:var(--white);
    font-family:'Fraunces',serif; font-weight:600; font-size:0.95rem; letter-spacing:0.01em; border-radius:30px; padding:6px 14px; white-space:nowrap; }
  .trust-badge-text{ display:flex; flex-direction:column; line-height:1.25; }
  .trust-stars{ color:var(--green); letter-spacing:1px; font-size:0.82rem; }
  .trust-badge-text b{ font-size:0.88rem; font-weight:600; }
  .trust-badge-text span.cta{ font-size:0.78rem; color:var(--stone); text-decoration:underline; text-underline-offset:2px; }
  section{padding:84px 0; border-bottom:1px solid var(--hairline);}
  .kicker{ font-size:0.83rem; color:var(--stone); font-weight:500; margin-bottom:14px; letter-spacing:0.02em; }
  .section-head{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-bottom:52px; align-items:end; }
  .section-head h2{font-size:clamp(1.7rem,3vw,2.35rem); max-width:16ch;}
  .section-head p{color:#454B4D; max-width:44ch;}
  @media (max-width:760px){ .section-head{grid-template-columns:1fr;} }

  .about-grid{display:grid; grid-template-columns:0.72fr 1.1fr 0.85fr; gap:44px;}
  .about-photo{border:1px solid var(--hairline);}
  .about-photo img{width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top;}
  .about-body p{margin-bottom:18px; color:#1E2224;}
  .about-body p:last-child{margin-bottom:0;}
  .pull{ font-family:'Fraunces',serif; font-style:italic; font-size:1.25rem; color:var(--navy-deep); border-left:2px solid var(--green); padding-left:22px; margin:26px 0; max-width:36ch; }
  .timeline{border-left:1px solid var(--hairline); padding-left:28px; display:flex; flex-direction:column; gap:24px;}
  .t-item{position:relative;}
  .t-item::before{ content:''; position:absolute; left:-33px; top:5px; width:7px; height:7px; background:var(--navy); border-radius:50%; }
  .t-year{font-size:0.8rem; color:var(--navy); font-weight:600; margin-bottom:3px;}
  .t-item h4{font-size:1rem; font-weight:500; margin-bottom:3px;}
  .t-item p{font-size:0.88rem; color:var(--stone);}
  @media (max-width:980px){ .about-grid{grid-template-columns:1fr 1fr;} .about-photo{grid-row:1/3;} }
  @media (max-width:700px){ .about-grid{grid-template-columns:1fr;} .about-photo{max-width:280px;} }

  .memberships{margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline);}
  .m-card{background:var(--white); padding:22px 20px;}
  .m-card h4{font-size:0.98rem; margin-bottom:6px;}
  .m-card p{font-size:0.85rem; color:var(--stone); line-height:1.5;}
  @media (max-width:760px){ .memberships{grid-template-columns:1fr 1fr;} }
  @media (max-width:480px){ .memberships{grid-template-columns:1fr;} }

  .cond-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline);}
  .cond{background:var(--white); padding:26px 24px;}
  .cond h3{font-size:1.04rem; font-weight:500; margin-bottom:9px;}
  .cond p{font-size:0.9rem; color:#3A3F41;}
  @media (max-width:860px){ .cond-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .cond-grid{grid-template-columns:1fr;} }
  .band-tag{ display:inline-block; font-size:0.78rem; color:var(--white); border:1px solid rgba(255,255,255,0.4); padding:3px 10px; border-radius:20px; margin-bottom:16px; }

  .proc-wrap{margin-top:56px; border:1px solid var(--hairline); background:var(--white);}
  .proc-head{padding:22px 26px; border-bottom:1px solid var(--hairline);}
  .proc-head h3{font-size:1.1rem; font-weight:500; margin-bottom:6px;}
  .proc-head p{font-size:0.88rem; color:var(--stone);}
  .proc-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline);}
  .proc-col{background:var(--white); padding:26px;}
  .proc-col h4{font-size:0.85rem; font-weight:600; color:var(--navy); margin-bottom:14px; text-transform:none;}
  .proc-col ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px;}
  .proc-col li{font-size:0.9rem; color:#1E2224; padding-left:16px; position:relative;}
  .proc-col li::before{content:''; position:absolute; left:0; top:9px; width:5px; height:5px; background:var(--navy); opacity:0.55; border-radius:50%;}
  .proc-col li.featured{padding:10px 12px 10px 30px; background:var(--paper-raised); border-radius:2px; margin:-2px -12px;}
  .proc-col li.featured::before{left:12px; top:19px;}
  .usg{ display:inline-block; font-size:0.68rem; font-weight:600; color:var(--green); border:1px solid var(--green); padding:1px 7px; border-radius:20px; margin-left:7px; letter-spacing:0.01em; white-space:nowrap; }
  .soon{ display:inline-block; font-size:0.68rem; font-weight:600; color:var(--stone); border:1px dashed var(--stone); padding:1px 7px; border-radius:20px; margin-left:7px; letter-spacing:0.01em; white-space:nowrap; }
  @media (max-width:900px){ .proc-cols{grid-template-columns:1fr 1fr;} }
  @media (max-width:600px){ .proc-cols{grid-template-columns:1fr;} }

  .mi-wrap{ background:var(--navy-deep); color:var(--white); border-radius:2px; padding:52px 48px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; }
  .mi-wrap h2{color:var(--white); font-size:clamp(1.6rem,2.8vw,2.1rem); max-width:18ch;}
  .mi-wrap p{color:#D6DCE4;}
  .mi-list{display:flex; flex-direction:column; gap:16px; margin-top:8px;}
  .mi-item{border-top:1px solid rgba(255,255,255,0.18); padding-top:14px;}
  .mi-item h4{color:var(--white); font-size:0.98rem; font-weight:500; margin-bottom:4px;}
  .mi-item p{font-size:0.86rem; color:#B9C2CE;}
  .mi-item.soon-item{opacity:0.75;}
  .mi-soon-tag{ display:inline-block; font-size:0.68rem; font-weight:600; color:#B9C2CE; border:1px dashed rgba(255,255,255,0.4); padding:1px 7px; border-radius:20px; margin-left:8px; letter-spacing:0.01em; white-space:nowrap; vertical-align:middle; }
  @media (max-width:860px){ .mi-wrap{grid-template-columns:1fr; padding:36px 26px;} }

  .theatre-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:56px;}
  .theatre-strip img{width:100%; aspect-ratio:3/4; object-fit:cover; border:1px solid var(--hairline);}
  @media (max-width:700px){ .theatre-strip{grid-template-columns:1fr 1fr;} .theatre-strip img:last-child{display:none;} }

  .finder{border:1px solid var(--hairline); background:var(--white); padding:26px 28px; margin-bottom:28px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
  .finder-text h3{font-size:1.02rem; font-weight:500; margin-bottom:4px;}
  .finder-text p{font-size:0.87rem; color:var(--stone);}
  .finder-btn{ background:var(--navy); color:var(--white); border:none; padding:12px 22px; border-radius:2px; font-size:0.9rem; font-weight:500; cursor:pointer; white-space:nowrap; font-family:'IBM Plex Sans',sans-serif; }
  .finder-btn:hover{background:var(--navy-deep);}
  .finder-btn:disabled{opacity:0.6; cursor:default;}
  .finder-status{font-size:0.85rem; color:var(--stone); margin-top:6px;}
  .loc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
  .loc-card{border:1px solid var(--hairline); background:var(--white); padding:24px;}
  .loc-card.legal-only{background:var(--paper-raised); border-style:dashed;}
  .loc-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px;}
  .loc-card h3{font-size:1.06rem; font-weight:500;}
  .loc-status{font-size:0.7rem; color:var(--navy); border:1px solid var(--navy); padding:3px 9px; border-radius:20px; white-space:nowrap;}
  .loc-status.pending{color:var(--stone); border-color:var(--stone);}
  .loc-distance{font-size:0.7rem; color:var(--navy); border:1px solid var(--navy); padding:3px 9px; border-radius:20px; white-space:nowrap; display:none;}
  .loc-meta{font-size:0.87rem; color:#3A3F41; margin-bottom:4px;}
  .loc-meta b{color:var(--ink); font-weight:500;}
  .loc-links{display:flex; gap:18px; margin-top:12px; flex-wrap:wrap;}
  .loc-card a.book{ font-size:0.84rem; font-weight:500; color:var(--navy); text-decoration:none; border-bottom:1px solid var(--navy); }
  @media (max-width:760px){ .loc-grid{grid-template-columns:1fr;} .finder{flex-direction:column; align-items:flex-start;} }

  .clinics-table-wrap{margin-top:56px; border:1px solid var(--hairline); background:var(--white);}
  .clinics-table-head{display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--hairline); flex-wrap:wrap; gap:10px;}
  .clinics-table-head h3{font-size:1.05rem; font-weight:500;}
  .clinics-table-head span{font-size:0.85rem; color:var(--stone);}
  table.clinics{width:100%; border-collapse:collapse; font-size:0.9rem;}
  table.clinics th{ text-align:left; font-weight:500; color:var(--stone); font-size:0.78rem; padding:12px 24px; border-bottom:1px solid var(--hairline); }
  table.clinics td{ padding:13px 24px; border-bottom:1px solid var(--hairline); color:#1E2224; }
  table.clinics tr:last-child td{border-bottom:none;}
  .tag-pill{font-size:0.72rem; border:1px solid var(--navy); color:var(--navy); padding:2px 9px; border-radius:20px;}
  .clinics-note{padding:16px 24px; font-size:0.85rem; color:var(--stone); border-top:1px solid var(--hairline);}
  @media (max-width:700px){
    table.clinics thead{display:none;}
    table.clinics, table.clinics tbody, table.clinics tr, table.clinics td{display:block; width:100%;}
    table.clinics tr{padding:14px 24px; border-bottom:1px solid var(--hairline);}
    table.clinics td{padding:2px 0; border:none;}
  }

  .ml-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
  .ml-body p{color:#1E2224; margin-bottom:16px;}
  .area-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;}
  .area-list span{ font-size:0.83rem; border:1px solid var(--hairline); padding:6px 13px; border-radius:20px; color:#3A3F41; }
  .ml-card{border:1px solid var(--hairline); background:var(--white); padding:28px;}
  .ml-card h4{font-size:0.95rem; font-weight:500; margin-bottom:14px;}
  .ml-row{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--hairline); font-size:0.89rem;}
  .ml-row:first-of-type{border-top:none;}
  .ml-row span:first-child{color:var(--stone); white-space:nowrap;}
  .ml-row span:last-child, .ml-row a{text-align:right;}
  @media (max-width:860px){ .ml-grid{grid-template-columns:1fr;} }

  .reviews-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:36px; flex-wrap:wrap;}
  .reviews-head-left{display:flex; align-items:center; gap:16px;}
  .review-score{ font-family:'Fraunces',serif; font-size:2.4rem; color:var(--navy); }
  .review-meta{font-size:0.9rem; color:var(--stone);}
  .review-cta{ font-size:0.87rem; font-weight:500; color:var(--navy); text-decoration:none; border-bottom:1px solid var(--navy); white-space:nowrap; }
  .review-frame-wrap{border:1px solid var(--hairline); background:var(--white); padding:8px;}
  iframe.review-frame{width:100%; border:0; display:block; min-height:220px;}

  .team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .team-card{border:1px solid var(--hairline); background:var(--white); overflow:hidden;}
  .team-card .team-photo{width:100%; aspect-ratio:1/1; object-fit:cover; object-position:top;}
  .team-avatar{ width:46px; height:46px; border-radius:50%; background:var(--paper-raised); border:1px solid var(--hairline);
    display:flex; align-items:center; justify-content:center; color:var(--navy); font-family:'Fraunces',serif; font-weight:500; }
  .team-body{padding:20px;}
  .team-card h4{font-size:1rem; font-weight:500; margin-bottom:3px;}
  .team-card p{font-size:0.86rem; color:var(--stone);}
  .partner-body{padding:24px;}
  .partner-logo{ max-width:180px; height:auto; margin-bottom:16px; }
  .partner-body p{ margin:6px 0 14px; line-height:1.55; }
  .partner-link{ font-size:0.85rem; font-weight:500; color:var(--navy); text-decoration:none; border-bottom:1px solid var(--navy); }
  @media (max-width:760px){ .team-grid{grid-template-columns:1fr;} }

  .insurer-strip{ margin-top:56px; padding-top:36px; border-top:1px solid var(--hairline); display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
  .insurer-strip span.lbl{font-size:0.85rem; color:var(--stone); margin-right:6px;}
  .insurer-chip{font-size:0.85rem; border:1px solid var(--hairline); padding:7px 14px; border-radius:20px; color:#3A3F41;}
  .insurer-chip.pending{border-style:dashed; color:var(--stone);}

  #contact{border-bottom:none;}
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
  .contact-block{border:1px solid var(--hairline); background:var(--white); padding:32px;}
  .contact-block h3{font-size:1.15rem; font-weight:500; margin-bottom:8px;}
  .contact-block p.desc{color:var(--stone); font-size:0.92rem; margin-bottom:22px;}
  .cline{display:flex; justify-content:space-between; gap:10px; padding:13px 0; border-top:1px solid var(--hairline); font-size:0.92rem;}
  .cline:first-of-type{border-top:none;}
  .cline span:first-child{color:var(--stone);}
  .cline a{text-decoration:none; font-weight:500; color:var(--navy);}
  @media (max-width:760px){ .contact-grid{grid-template-columns:1fr; gap:24px;} }

  footer{padding:44px 0;}
  .foot-grid{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
  .foot-brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:'Fraunces',serif; font-size:1.05rem; font-weight:500; color:var(--ink);}
  .foot-links{display:flex; gap:22px; flex-wrap:wrap;}
  .foot-links a{font-size:0.85rem; text-decoration:none; color:var(--stone);}
  .foot-links a:hover{color:var(--ink);}
  .foot-social{display:flex; gap:16px;}
  .foot-social a{color:var(--stone); text-decoration:none; font-size:0.85rem;}
  .foot-social a:hover{color:var(--navy);}
  .foot-bottom{margin-top:26px; padding-top:22px; border-top:1px solid var(--hairline); font-size:0.8rem; color:var(--stone);}