/* Shoulder Solutions — site stylesheet.
   Palette and type follow the practice brand reference (v1). */

@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/fraunces.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/public-sans.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:italic;font-weight:400 700;font-display:swap;src:url('../fonts/public-sans-italic.woff2') format('woff2')}

:root{
  --paper:#F7F5F1;
  --stone:#D8D2C6;
  --stone-light:#E8E4DC;
  --stone-dark:#B8B0A0;
  --teal:#5B7B7A;
  --teal-dark:#44605F;
  --teal-pale:#BFD1D0;
  --clay:#A15C3E;
  --clay-dark:#8A4D33;
  --ink:#1C2B39;
  --ink-muted:#51606E;
  --white:#FFFFFF;

  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --container:1120px;
  --gutter:clamp(20px,4vw,32px);
  --section:clamp(64px,9vw,112px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.15;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--teal-dark);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--white);padding:10px 16px;z-index:10}
.skip:focus{left:8px;top:8px}

/* Header */
.site-header{background:var(--paper)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px 40px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}
.brand{display:flex;align-items:center;gap:14px;color:var(--ink);text-decoration:none}
.brand img{width:44px;height:44px}
.brand-name{display:block;font-family:var(--font-display);font-size:1.375rem;font-weight:500;line-height:1.2}
.brand-role{display:block;font-size:.8125rem;color:var(--ink-muted);line-height:1.4}
.site-nav{display:flex;flex-wrap:wrap;gap:6px 28px;font-size:.9375rem}
.site-nav a{color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.site-nav a:hover{border-bottom-color:var(--teal)}

/* Buttons */
.button{display:inline-block;font-weight:600;font-size:1rem;line-height:1.2;padding:15px 24px;border-radius:3px;text-decoration:none;text-align:center}
.button-primary{background:var(--clay);color:var(--white)}
.button-primary:hover{background:var(--clay-dark);color:var(--white)}

/* Hero */
.hero{background:var(--ink);color:var(--white);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:24px;min-height:min(640px,78vh);padding-top:56px;padding-bottom:56px}
.hero h1{font-size:clamp(2.375rem,5.2vw,3.75rem);line-height:1.06;letter-spacing:-.01em;max-width:13ch}
.hero-lead{margin-top:24px;font-size:1.1875rem;color:rgba(255,255,255,.84);max-width:40ch}
.hero-actions{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.hero-actions a:not(.button){color:var(--teal-pale);font-weight:600}
.hero-actions a:not(.button):hover{color:var(--white)}
.hero-model{position:relative;display:block;color:inherit;text-decoration:none}
.hero-model::before{content:'';position:absolute;left:50%;top:50%;width:88%;aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid rgba(191,209,208,.28);border-radius:50%}
.hero-model img{position:relative;width:100%}
.hero-model-note{position:relative;display:block;margin-top:-8px;text-align:center;font-size:.9375rem;color:var(--teal-pale)}
.hero-model:hover .hero-model-note{color:var(--white)}
.hero-model-note span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* Sections */
.section{padding-top:var(--section);padding-bottom:var(--section)}
.section-tint{background:var(--stone-light)}
.section h2{font-size:clamp(1.75rem,3.2vw,2.25rem)}
.section-intro{margin-top:16px;font-size:1.1875rem;color:var(--ink-muted);max-width:60ch}

/* About */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:clamp(32px,6vw,72px);align-items:center}
.about p{max-width:58ch}
.about-body{margin-top:20px}
.facts{margin:32px 0 0;border-top:1px solid var(--stone-dark)}
.facts div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--stone-dark)}
.facts dt{color:var(--ink-muted);font-size:.9375rem}
.facts dd{margin:0}
.about-links{margin-top:24px;font-size:1rem;color:var(--ink-muted)}
.about img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:62% 40%;border-radius:4px}

/* Conditions */
.group-title{margin-top:56px;font-family:var(--font-body);font-size:.9375rem;font-weight:600;color:var(--teal-dark)}
.conditions{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--stone)}
.conditions li{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr) minmax(0,230px);gap:8px 40px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--stone)}
.conditions h3{font-size:1.375rem;line-height:1.25}
.conditions p{color:var(--ink-muted);max-width:52ch}
.resources{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:1rem}
.model-note{margin-top:40px;padding:24px 28px;background:var(--white);border:1px solid var(--stone);border-radius:4px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px}
.model-note p{max-width:60ch}
.model-note a{font-weight:600;white-space:nowrap}

/* Clinics */
.clinics{margin-top:48px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,56px)}
.clinic img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px}
.clinic h3{margin-top:24px;font-size:1.5rem}
.clinic address{font-style:normal;color:var(--ink-muted);margin-top:4px}
.contact{margin:20px 0 0;border-top:1px solid var(--stone-dark)}
.contact div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--stone-dark)}
.contact dt{color:var(--ink-muted);font-size:.9375rem}
.contact dd{margin:0;overflow-wrap:anywhere}
.contact a{font-weight:600}
.privacy-note{margin-top:40px;font-size:1rem;color:var(--ink-muted);max-width:64ch}

/* Footer */
.site-footer{background:var(--ink);color:rgba(255,255,255,.78);font-size:.9375rem}
.site-footer .wrap{padding-top:48px;padding-bottom:40px}
.footer-cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px 64px}
.footer-brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:1.25rem;color:var(--white);margin-bottom:10px}
.footer-brand img{width:32px;height:32px;border:1px solid rgba(255,255,255,.35);border-radius:50%}
.footer-title{font-weight:600;color:var(--white);margin-bottom:8px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.site-footer a{color:var(--teal-pale)}
.site-footer a:hover{color:var(--white)}
.small-print{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16);font-size:.875rem;color:rgba(255,255,255,.62);display:grid;gap:8px;max-width:80ch}

/* Narrow screens */
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;min-height:0;padding-top:48px;padding-bottom:32px;gap:8px}
  .hero-model{margin:0 auto;max-width:440px}
  .about{grid-template-columns:1fr}
  .about img{max-width:380px;aspect-ratio:4/3;order:-1}
  .conditions li{grid-template-columns:1fr;gap:8px;padding:20px 0}
  .resources{flex-direction:row;flex-wrap:wrap;gap:6px 24px;margin-top:4px}
  .clinics{grid-template-columns:1fr}
}
@media (max-width:520px){
  .brand-role{font-size:.75rem}
  .site-nav{gap:2px 22px}
  .facts div{grid-template-columns:1fr;gap:2px}
  .hero-actions .button{width:100%}
}

@media print{
  .site-nav,.hero-model,.skip{display:none}
  .hero,.site-footer{background:none;color:var(--ink)}
  .hero-lead,.site-footer,.small-print{color:var(--ink)}
}