/* Gentle Practice — site components. Built on tokens.css (the design system). */
*,*::before,*::after{box-sizing:border-box}
img,svg{display:block;max-width:100%}
body{overflow-x:hidden}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--gp-charcoal);color:var(--gp-off-white);padding:10px 16px;border-radius:var(--radius-pill);font:500 15px/1.3 var(--font-ui)}
.skip:focus{left:16px}

/* Layout */
.wrap{max-width:var(--content-max);margin:0 auto;padding:0 40px}
.section{padding:112px 0}
.section--tight{padding:72px 0}
.section--subtle{background:var(--bg-subtle)}
.prose{max-width:var(--prose-max)}
.prose > * + *{margin-top:20px}
.stack > * + *{margin-top:24px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:64px;align-items:center}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px}
p{margin:0}
ul,ol{margin:0;padding-left:1.2em}
li + li{margin-top:8px}

/* Type */
.eyebrow{font:var(--type-tagline-weight) var(--type-tagline-size)/var(--type-tagline-lh) var(--font-tagline);letter-spacing:var(--type-tagline-ls);text-transform:uppercase;color:var(--text-tagline);margin:0 0 16px}
.display{font:400 var(--type-display-size)/var(--type-display-lh) var(--font-serif);letter-spacing:var(--type-display-ls)}
h1,.h1{font:400 var(--type-h1-size)/var(--type-h1-lh) var(--font-serif);letter-spacing:var(--type-h1-ls)}
h2,.h2{font:400 var(--type-h2-size)/var(--type-h2-lh) var(--font-serif);letter-spacing:var(--type-h2-ls)}
h3,.h3{font:500 var(--type-h4-size)/var(--type-h4-lh) var(--font-serif)}
.lead{font:400 var(--type-lead-size)/var(--type-lead-lh) var(--font-serif);color:var(--text-secondary)}
.muted{color:var(--text-secondary)}
.small{font-size:var(--type-small-size);line-height:var(--type-small-lh)}
.section-head{max-width:var(--prose-max);margin-bottom:48px}
.section-head .lead{margin-top:16px}

/* Placeholders still to confirm (visible while drafting) */
mark.tbc{background:var(--gp-orange-50);color:var(--gp-charcoal);outline:1px dashed var(--gp-orange-300);border-radius:4px;padding:0 3px;font:inherit}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:var(--bg-page);border-bottom:1px solid var(--border-subtle)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;padding-top:12px;padding-bottom:12px}
.brand img{width:190px;height:auto}
.nav{display:flex;align-items:center;gap:28px}
.nav ul{display:flex;align-items:center;gap:6px 26px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav li + li{margin-top:0}
.nav a.navlink{position:relative;font:400 15px/1.3 var(--font-ui);letter-spacing:.01em;color:var(--text-primary);text-decoration:none;padding:6px 0}
.nav a.navlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--gp-taupe);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-gentle)}
.nav a.navlink:hover::after{transform:scaleX(1)}
.nav a.navlink[aria-current="page"]{font-weight:600}
.nav a.navlink[aria-current="page"]::after{transform:scaleX(1);background:var(--gp-burnt-orange)}
.menu-toggle{display:none;position:relative;width:40px;height:40px;border-radius:var(--radius-pill);border:1px solid var(--border-default);background:transparent;color:var(--text-primary);cursor:pointer;padding:0}
.menu-toggle span{position:absolute;left:11px;right:11px;height:1.5px;background:currentColor;border-radius:2px;transition:transform var(--dur-base) var(--ease-gentle),opacity var(--dur-fast)}
.menu-toggle span:nth-child(1){top:14px}.menu-toggle span:nth-child(2){top:19px}.menu-toggle span:nth-child(3){top:24px}
.menu-toggle[aria-expanded="true"]{background:var(--gp-stone-100)}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.header-actions{display:flex;align-items:center;gap:10px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 28px;border-radius:var(--radius-pill);font:600 16px/1 var(--font-ui);letter-spacing:.01em;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background var(--dur-fast) var(--ease-gentle),transform var(--dur-fast) var(--ease-gentle)}
.btn:active{transform:scale(.985)}
.btn--accent{background:var(--cta-bg);color:var(--cta-fg);font-size:19px;min-height:56px;padding:0 32px}
.btn--accent:hover{background:var(--cta-bg-hover);color:var(--cta-fg)}
.btn--sm{min-height:36px;padding:0 18px;font-size:15px;font-weight:500}
.btn--accent.btn--sm{background:var(--cta-bg-compact);font-size:15px;min-height:36px;padding:0 18px}
.btn--accent.btn--sm:hover{background:var(--cta-bg-compact-hover)}
.btn--primary{background:var(--action-primary-bg);color:var(--action-primary-fg)}
.btn--primary:hover{background:var(--action-primary-bg-hover);color:var(--action-primary-fg)}
.btn--secondary{background:transparent;color:var(--text-primary);border-color:var(--border-strong);min-height:56px;padding:0 32px}
.btn--secondary:hover{background:var(--gp-stone-100);color:var(--text-primary)}
.btn-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.textlink{font:600 15px/1.3 var(--font-ui);letter-spacing:.01em;color:var(--text-accent);text-decoration:none}
.textlink::after{content:" \2192"}
.textlink:hover{text-decoration:underline;color:var(--gp-orange-800)}

/* Badges */
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:var(--radius-pill);background:var(--gp-stone-100);color:var(--text-primary);font:500 13px/1.4 var(--font-ui)}
.badge--success{background:var(--success-bg);color:var(--success)}
.badge--success::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* Hero */
.hero{padding:80px 0 0}
.hero .grid-2{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.hero .grid-2{align-items:center}
.hero-text > * + *{margin-top:24px}
.hero .lead{max-width:40ch}
.page-hero{padding:80px 0 0}
.page-hero .lead{margin-top:20px}
.nowrap{white-space:nowrap}

/* Photo placeholder */
.photo{aspect-ratio:4/4.6;border-radius:var(--radius-lg);background:linear-gradient(160deg,var(--gp-stone-200),var(--gp-stone-300));display:flex;align-items:flex-end;padding:16px}
.photo span{font:400 12px/1.3 var(--font-ui);letter-spacing:.02em;color:var(--gp-taupe-700)}
.photo--wide{aspect-ratio:16/9}

/* Wave motif (from the logo) */
.wave{width:100%;height:110px;margin-top:24px}
.wave--footer{height:70px;margin-top:0;background:var(--bg-page)}

/* Cards */
.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);padding:28px;display:flex;flex-direction:column;gap:12px}
.card--stone{background:var(--gp-stone-100);border-color:transparent}
.card h3{font:500 var(--type-h4-size)/var(--type-h4-lh) var(--font-serif)}
.card p{color:var(--text-secondary)}
.card .textlink{margin-top:auto;padding-top:8px}
a.card{text-decoration:none;color:inherit;transition:transform var(--dur-base) var(--ease-gentle),box-shadow var(--dur-base) var(--ease-gentle)}
a.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}

/* Service blocks on long pages */
.service{padding:40px 0;border-top:1px solid var(--divider)}
.service:last-child{border-bottom:1px solid var(--divider)}
.service h2{font:400 var(--type-h3-size)/var(--type-h3-lh) var(--font-serif);margin-bottom:16px}
.service .prose > * + *{margin-top:14px}

/* Lists with sun dots */
.dots{list-style:none;padding:0}
.dots li{position:relative;padding-left:22px}
.dots li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--gp-burnt-orange)}

/* Questions */
.faq{border-top:1px solid var(--border-subtle);max-width:760px}
.faq details{border-bottom:1px solid var(--border-subtle)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:22px 0;font:400 20px/1.35 var(--font-serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 26px/1 var(--font-ui);color:var(--text-secondary);transition:transform var(--dur-base) var(--ease-gentle)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .answer{padding:0 0 24px;color:var(--text-secondary);max-width:60ch}

/* Booking band */
.band{position:relative;overflow:hidden;border-radius:var(--radius-xl);background:var(--bg-subtle);padding:72px 64px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:end}
.band::after{content:"";position:absolute;right:-60px;bottom:-150px;width:300px;height:300px;border-radius:50%;background:var(--gp-burnt-orange);opacity:.92}
.band > *{position:relative;z-index:1}
.band h2{margin-bottom:14px}
.band p{color:var(--text-on-stone-secondary);max-width:46ch}

/* Panels */
.panel{border-radius:var(--radius-lg);background:var(--gp-stone-100);padding:32px}
.panel--dashed{background:transparent;border:1px dashed var(--border-strong);text-align:center;padding:48px 32px;color:var(--text-secondary)}
.details-list{list-style:none;padding:0;border-top:1px solid var(--border-subtle)}
.details-list li{margin:0;padding:16px 0;border-bottom:1px solid var(--border-subtle);display:grid;grid-template-columns:120px 1fr;gap:16px}
.details-list .k{font:500 13px/1.6 var(--font-tagline);letter-spacing:.18em;text-transform:uppercase;color:var(--text-tagline)}

/* Forms */
.form{display:grid;gap:20px;max-width:560px}
.field label,.field legend{display:block;font:500 var(--type-label-size)/var(--type-label-lh) var(--font-ui);letter-spacing:var(--type-label-ls);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;font:400 16px/1.4 var(--font-ui);color:var(--text-primary);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-field);padding:12px 14px;box-shadow:var(--shadow-inset)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--focus-ring)}
.field textarea{min-height:140px;resize:vertical}
.check{display:flex;gap:10px;align-items:center;font:400 15px/1.4 var(--font-ui)}
.check input{width:18px;height:18px;accent-color:var(--gp-orange-700)}
.form-note{font:400 14px/1.5 var(--font-ui);color:var(--text-secondary)}
.form-status{font:500 15px/1.5 var(--font-ui);padding:12px 16px;border-radius:var(--radius-sm);background:var(--gp-orange-50)}
.form-status[hidden]{display:none}

/* Team */
.person{display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:start;padding:40px 0;border-top:1px solid var(--divider)}
.person .photo{aspect-ratio:4/5}
.person .role{font:500 15px/1.4 var(--font-ui);color:var(--text-secondary);margin-top:4px}

/* Exercises */
.steps{counter-reset:s;list-style:none;padding:0}
.steps li{counter-increment:s;position:relative;padding-left:52px;margin-top:20px}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:2px;font:500 13px/1.6 var(--font-ui);color:var(--text-accent)}

/* Footer */
.site-footer{background:var(--gp-charcoal);color:var(--gp-off-white)}
.site-footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:40px;padding:56px 0 40px}
.site-footer h2{font:500 12px/1.4 var(--font-tagline);letter-spacing:var(--type-tagline-ls);text-transform:uppercase;color:var(--gp-warm-stone);margin-bottom:12px}
.site-footer ul{list-style:none;padding:0;font:400 15px/1.5 var(--font-ui)}
.site-footer li + li{margin-top:10px}
.site-footer a{color:var(--gp-off-white);text-decoration:none}
.site-footer a:hover{text-decoration:underline;color:var(--gp-off-white)}
.site-footer mark.tbc{background:transparent;color:var(--gp-warm-stone);outline-color:var(--gp-taupe)}
.site-footer .legal{border-top:1px solid rgba(220,194,156,.2);padding:20px 0 32px;font:400 13px/1.5 var(--font-ui);color:var(--gp-warm-stone);display:flex;flex-wrap:wrap;gap:8px 24px}
.site-footer .legal a{color:var(--gp-warm-stone)}
.footer-logo img{width:170px;height:auto}

/* Not found */
.notfound{padding:128px 0;text-align:center}
.notfound .btn-row{justify-content:center;margin-top:32px}

/* Motion: fades only */
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Collapse the nav */
@media (max-width:1080px){
  html.js .menu-toggle{display:inline-block}
  html.js .nav ul{display:none}
  html.js .nav.open ul{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--bg-page);border-bottom:1px solid var(--border-subtle);padding:8px 24px 20px}
  html.js .nav.open li{border-bottom:1px solid var(--border-subtle)}
  html.js .nav.open a.navlink{display:block;padding:16px 0;font:400 22px/1.3 var(--font-serif)}
  html.js .nav.open a.navlink::after{display:none}
  html.js .nav.open a.navlink[aria-current="page"]{font-weight:400;display:flex;justify-content:space-between;align-items:center}
  html.js .nav.open a.navlink[aria-current="page"]::before{content:"";order:2;width:8px;height:8px;border-radius:50%;background:var(--gp-burnt-orange)}
  .nav{gap:10px}
}

/* Phones */
@media (max-width:720px){
  .wrap{padding:0 24px}
  .section{padding:56px 0}
  .section--tight{padding:40px 0}
  .hero{padding:40px 0 0}
  .hero .grid-2{grid-template-columns:minmax(0,1fr)}
  .page-hero{padding:40px 0 0}
  .display{font-size:48px}
  h1,.h1{font-size:40px}
  h2,.h2{font-size:30px}
  .section-head{margin-bottom:32px}
  .brand img{width:160px}
  .site-header .wrap{min-height:64px}
  .band{grid-template-columns:minmax(0,1fr);padding:48px 28px 132px;gap:28px}
  .band::after{width:200px;height:200px;right:-40px;bottom:-110px}
  .wave{height:70px}
  .person{grid-template-columns:1fr}
  .person .photo{max-width:220px}
  .details-list li{grid-template-columns:1fr;gap:4px}
  .btn--accent,.btn--secondary{min-height:52px}
}

/* Price tables */
.price-table{width:100%;border-collapse:collapse;margin:16px 0 8px;font:400 15px/1.45 var(--font-ui);font-variant-numeric:tabular-nums}
.price-table th,.price-table td{text-align:left;padding:12px 12px 12px 0;border-bottom:1px solid var(--border-subtle);vertical-align:top}
.price-table thead th{font:500 12px/1.4 var(--font-tagline);letter-spacing:.16em;text-transform:uppercase;color:var(--text-tagline);border-bottom-color:var(--border-default)}
.price-table tbody th{font-weight:500;color:var(--text-primary)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Photos */
.photo-img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius-lg);background:var(--gp-stone-100)}
.grid-2--photo{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.grid-2--photo .photo-img{max-width:440px}
.grid-cards--4{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.person--lead{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:56px;border-top:0;padding-top:0}
@media (max-width:720px){
  .grid-2--photo{grid-template-columns:minmax(0,1fr)}
  .grid-2--photo .photo-img{max-width:320px}
  .person--lead{grid-template-columns:minmax(0,1fr);gap:32px}
  .person--lead .photo-img{max-width:320px}
  .price-table{font-size:14px}
  .price-table th,.price-table td{padding:10px 8px 10px 0}
  .price-table thead th{font-size:11px;letter-spacing:.1em}
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn-row .textlink{align-self:center}
picture{display:block}
.grid-2--photo picture{max-width:440px}
.mini-person{display:grid;grid-template-columns:160px minmax(0,1fr);gap:32px;align-items:start}
.photo-img--square{aspect-ratio:1/1}
@media (max-width:720px){.mini-person{grid-template-columns:minmax(0,1fr);gap:20px}.mini-person picture{max-width:140px}}
/* Spacing: a little less air after page openings and before the booking banner */
.page-hero + .section{padding-top:56px}
.section + .section--tight{padding-top:0}
@media (max-width:720px){.page-hero + .section{padding-top:32px}}
.site-footer a.footer-more{text-decoration:underline;text-decoration-color:rgba(250,247,242,.45);text-underline-offset:3px}
.site-footer a.footer-more:hover{text-decoration-color:currentColor}
/* Smaller portrait on the home page; the About page keeps the large one */
.grid-2--photo{grid-template-columns:300px minmax(0,1fr);gap:56px}
.grid-2--photo picture,.grid-2--photo .photo-img{max-width:300px}
@media (max-width:720px){.grid-2--photo{grid-template-columns:minmax(0,1fr);gap:32px}.grid-2--photo picture,.grid-2--photo .photo-img{max-width:220px}}
.grid-2--photo .stack{max-width:var(--prose-max)}
.book-panel{text-align:center;padding:40px 32px}
.book-panel .btn-row{justify-content:center}
.book-panel p{margin:20px 0 0}

/* Home hero: breathing shape (stands in for clinic photography) */
.breath{aspect-ratio:4/4.6;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(165deg,var(--gp-stone-50),var(--gp-stone-100))}
.breath svg{display:block;width:100%;height:100%;overflow:hidden}
.breath path{transform-box:fill-box;transform-origin:center}
.breath-halo{fill:var(--gp-stone-200);opacity:.7;animation:gp-halo 12s ease-in-out infinite}
.breath-core{animation:gp-breathe 6s ease-in-out infinite}
.breath-ring{fill:none;stroke:var(--gp-orange-300);stroke-width:1.5;animation:gp-ring 6s ease-out infinite}
.breath-line{fill:none;stroke:var(--gp-charcoal-700);stroke-width:1.5;opacity:.55;animation:gp-drift 28s linear infinite}
.breath-back{fill:var(--gp-taupe);opacity:.85;animation:gp-drift-back 36s linear infinite}
.breath-front{fill:var(--gp-stone-300);animation:gp-drift 22s linear infinite}
.breath-line,.breath-back,.breath-front{transform-box:view-box;transform-origin:0 0}
@keyframes gp-breathe{0%,100%{transform:scale(.9) rotate(-2deg)}45%,55%{transform:scale(1.04) rotate(2deg)}}
@keyframes gp-halo{0%,100%{transform:scale(.96) rotate(0deg)}50%{transform:scale(1.03) rotate(8deg)}}
@keyframes gp-ring{0%,30%{transform:scale(.92);opacity:0}55%{opacity:.55}100%{transform:scale(1.22);opacity:0}}
@keyframes gp-drift{from{transform:translateX(0)}to{transform:translateX(-400px)}}
@keyframes gp-drift-back{from{transform:translateX(0)}to{transform:translateX(400px)}}
@media (max-width:720px){.breath{aspect-ratio:4/3;max-height:320px}}
@media (prefers-reduced-motion:reduce){.breath *{animation:none!important}.breath-ring{opacity:0}}