/* Peak Performance LLC — Version 4: deep purple, sculpted surfaces.
   This is a shared theme for all four pages. Decorative geometry is CSS only.
   No content is hidden behind effects or dependent on animation. */
:root {
  --violet-top: #6d438c;
  --violet-bottom: #45205f;
  --violet-edge: #2b113c;
  --gold-soft: #eed8af;
  --surface-radius: 18px;
  --surface-shadow: 0 8px 24px rgba(47, 20, 63, .065);
}
::selection {background: var(--accent); color: #fff;}
h1, h2 {text-wrap: balance;}
.topbar {background: linear-gradient(110deg, var(--accent-deep), var(--accent) 68%, #613982);}
.topbar-inner {height: 36px;}
.site-header {position: relative; z-index: 5; box-shadow: 0 3px 16px rgba(47,20,63,.035);}
.brand-name {color: var(--accent-deep);}
.primary-nav {gap: 18px;}
.primary-nav a {padding: 10px 12px; border-radius: 8px; transition: color .18s, background-color .18s;}
.primary-nav a::after {left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px;}
.primary-nav a[aria-current="page"]:not(.nav-contact) {background: var(--accent-soft);}
.primary-nav a:not(.nav-contact):hover {background: #f5f0f8;}

/* A subtle rim, four-pixel base, and soft cast shadow give real button depth.
   Color variables preserve the same interaction treatment for all variants. */
.button, .primary-nav .nav-contact {
  --btn-top: #6d438c;
  --btn-bottom: #45205f;
  --btn-hover-top: #795097;
  --btn-hover-bottom: #512971;
  --btn-edge: #2b113c;
  --btn-border: #492263;
  --btn-rim: #9977b1;
  --btn-ink: #fff;
  --btn-shadow: rgba(63,29,87,.22);
  --btn-inset: rgba(255,255,255,.2);
}
.button, .cta-inner .button, .primary-nav .nav-contact {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  gap: 17px;
  padding: 14px 24px;
  border: 1px solid var(--btn-border);
  border-top-color: var(--btn-rim);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--btn-top), var(--btn-bottom));
  color: var(--btn-ink);
  box-shadow: inset 0 1px 0 var(--btn-inset), 0 4px 0 var(--btn-edge), 0 10px 20px var(--btn-shadow);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor: pointer;
  isolation: isolate;
}
.button-secondary {
  --btn-top: #ffffff;
  --btn-bottom: #f0e9f5;
  --btn-hover-top: #ffffff;
  --btn-hover-bottom: #e9dcf3;
  --btn-edge: #c6b5d2;
  --btn-border: #c5b2d2;
  --btn-rim: #e0d4e8;
  --btn-ink: #4b236b;
  --btn-shadow: rgba(63,29,87,.1);
  --btn-inset: rgba(255,255,255,.9);
}
.cta-inner .button {
  --btn-top: #f2deb7;
  --btn-bottom: #d9b677;
  --btn-hover-top: #f8e8c9;
  --btn-hover-bottom: #e7c890;
  --btn-edge: #987036;
  --btn-border: #c49c5e;
  --btn-rim: #fff1d2;
  --btn-ink: #321b42;
  --btn-shadow: rgba(17,6,26,.25);
  --btn-inset: rgba(255,255,255,.45);
}
.button .icon {width: 19px; height: 19px; transition: transform .18s ease;}
.button-row {gap: 16px; padding-bottom: 4px;}
.primary-nav .nav-contact {min-height: 43px; padding: 10px 22px; margin-left: 6px; font-size: 13px; border-radius: 10px;}
.primary-nav .nav-contact::after {display: none;}
.primary-nav .nav-contact[aria-current="page"] {color: #fff; text-decoration: underline; text-decoration-color: #e5c58c; text-decoration-thickness: 2px; text-underline-offset: 5px;}
/* Neutralize the base layout's flat hover colors even on touch devices. */
.button:hover, .cta-inner .button:hover, .primary-nav .nav-contact:hover {
  background: linear-gradient(180deg, var(--btn-top), var(--btn-bottom));
  color: var(--btn-ink); border-color: var(--btn-border); border-top-color: var(--btn-rim);
}
@media (hover: hover) and (pointer: fine) {
  .button:hover, .cta-inner .button:hover, .primary-nav .nav-contact:hover {
    background: linear-gradient(180deg, var(--btn-hover-top), var(--btn-hover-bottom));
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 var(--btn-inset), 0 6px 0 var(--btn-edge), 0 15px 25px var(--btn-shadow);
  }
  .button:hover .icon {transform: translateX(2px);}
}
.button:active, .cta-inner .button:active, .primary-nav .nav-contact:active {
  transform: translateY(3px);
  background: linear-gradient(180deg, var(--btn-bottom), var(--btn-top));
  box-shadow: inset 0 2px 3px rgba(0,0,0,.1), 0 1px 0 var(--btn-edge), 0 4px 8px var(--btn-shadow);
}
.button:focus-visible, .primary-nav .nav-contact:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 6px;
}
.text-link {gap: 12px; min-height: 44px;}
.text-link .icon {width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--accent-soft); transition: transform .18s ease;}
.text-link:hover .icon {transform: translateX(3px);}

/* Quiet circle-and-square geometry echoes the existing logo without altering it. */
.home-hero, .page-hero {position: relative; overflow: hidden; isolation: isolate;}
.home-hero {
  padding-block: 67px 60px;
  background: radial-gradient(ellipse at 86% 47%, #e5d9ef 0, #f1eaf5 28%, transparent 63%), var(--paper);
}
.hero-grid {position: relative; z-index: 1; gap: 52px;}
.hero-art {position: relative; isolation: isolate;}
.hero-art::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 116%; aspect-ratio: 1; left: -8%; top: -6%;
  border: 1px solid rgba(109,67,140,.19); border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(109,67,140,.035), 0 0 0 29px rgba(109,67,140,.06);
}
.hero-copy .eyebrow, .page-hero .eyebrow {
  display: flex; align-items: center; gap: 12px;
}
.hero-copy .eyebrow::before, .page-hero .eyebrow::before {
  content: ''; width: 24px; height: 2px; flex-shrink: 0; background: var(--gold);
}
.hero-copy h1 {font-size: clamp(43px, 4.7vw, 70px); line-height: 1.12;}
h1 em {color: var(--accent);}
.hero-lede {max-width: 485px;}
.logo-frame {
  padding: 15px; border: 1px solid #cebedb; border-radius: 24px;
  box-shadow: 0 7px 0 #d6c7e0, 0 22px 45px rgba(47,20,63,.14);
}
.logo-frame::before {inset: 7px; width: auto; height: auto; border: 1px solid #e7d8bd; border-radius: 18px; background: transparent; pointer-events: none;}
.logo-frame::after {display: none;}
.full-logo {border-radius: 15px;}
.art-caption {margin-top: 29px; color: var(--accent); font-weight: 600; letter-spacing: .15em;}
.art-caption span {background: #b99e74; width: 23px;}
.hero-byline {margin-top: 34px;}
.byline-line {width: 31px; height: 2px;}
.highlights {position: relative; background: #fff; border-top: 1px solid #e5dbe9; border-bottom: 1px solid #e5dbe9;}
.highlights-grid {padding-block: 29px;}
.highlight-title {color: var(--accent);}
.highlights-grid > div {position: relative;}
.highlights-grid > div::before {content: ''; width: 20px; height: 2px; border-radius: 1px; background: #b88d48; margin-bottom: 7px;}

/* Sculpted information cards, not fake links: only real controls animate. */
.steps-grid {gap: 24px;}
.step {padding: 28px; border: 1px solid var(--line); border-radius: var(--surface-radius); background: linear-gradient(150deg, #fff 60%, #f4eef8); box-shadow: var(--surface-shadow);}
.step-number {width: 49px; height: 49px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; color: var(--accent); background: #eee4f5; border: 1px solid #dfcfe9; border-radius: 14px; margin-bottom: 23px; box-shadow: inset 0 1px 0 #fff;}
.step h3 {font-size: 19px;}
.location-grid {gap: 19px; border: 0;}
.location-card, .location-card:first-child, .location-card:last-child {
  padding: 25px 22px; border: 1px solid var(--line); border-radius: var(--surface-radius);
  background: #fff; box-shadow: var(--surface-shadow);
}
.location-card > .icon {width: 49px; height: 49px; padding: 11px; border: 1px solid #e2d4eb; border-radius: 14px; background: linear-gradient(145deg, #f6f0fa, #e8ddf1); box-shadow: inset 0 1px 0 #fff;}
.location-card h3 {font-size: 18px;}
.location-card p {font-size: 13px;}
.service-note {margin-top: 27px;}

/* Deep-purple editorial bands provide a more distinctive rhythm. */
.inclusive-section, .gpr-section, .cta-section {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse at 5% 0%, rgba(129,82,163,.4), transparent 62%), linear-gradient(120deg, #4b236b, #2f143f);
  color: #fff;
}
.inclusive-section::before, .gpr-section::before, .cta-section::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 470px; height: 470px; right: -155px; top: -160px;
  border: 1px solid rgba(229,197,140,.19); border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(229,197,140,.025), 0 0 0 39px rgba(229,197,140,.1);
}
.inclusive-section .eyebrow {color: var(--gold-light);}
.inclusive-grid > div:last-child > p:not(.large-copy) {color: #eee3f5;}
.inclusive-section .text-link {color: #f2d5a3;}
.inclusive-section .text-link .icon {background: rgba(255,255,255,.1); border: 1px solid rgba(229,197,140,.4);}
.gpr-grid .scope-note {border-top-color: #866696;}
.cta-section {border-top: 1px solid #b79059;}
.cta-inner {padding-block: 4px;}
.cta-inner h2 {max-width: 790px;}
.audience-section, .principles-section, .contact-locations-section {background: linear-gradient(115deg, #f4eef8, #f7f3ec);}
.page-hero {
  background: radial-gradient(ellipse at 100% 20%, #e8dcef, transparent 65%), var(--paper);
}
.page-hero > .container {position: relative; z-index: 1;}
.page-hero::before {content: ''; position: absolute; width: 360px; height: 360px; right: max(5%, calc((100% - 1250px)/2)); top: 14px; border: 1px solid rgba(75,35,107,.15); border-radius: 50%; box-shadow: 0 0 0 30px rgba(75,35,107,.03); pointer-events: none;}
.page-hero::after {content: ''; position: absolute; width: 246px; height: 246px; right: max(8.8%, calc((100% - 1138px)/2)); top: 71px; border: 1px solid rgba(168,127,63,.3); transform: rotate(8deg); pointer-events: none;}
.focus-list {border: 1px solid var(--line); border-radius: var(--surface-radius); padding: 3px 28px; background: #fff; box-shadow: var(--surface-shadow);}
.focus-list > div:last-child {border-bottom: 0;}
.focus-list > div > span {display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; flex-shrink: 0; border-radius: 10px; color: var(--accent); background: var(--accent-soft); font-weight: 600;}
.rates-panel {border: 1px solid #cfbddc; border-top: 3px solid var(--accent); border-radius: var(--surface-radius); background: linear-gradient(115deg, #fff 55%, #f1eaf6); box-shadow: 0 13px 32px rgba(47,20,63,.08);}
.about-identity {border-radius: var(--surface-radius); overflow: hidden; border-color: #cbbbd6; box-shadow: 0 7px 0 #e2d7ea, 0 17px 30px rgba(47,20,63,.08);}
.identity-details {background: linear-gradient(120deg, #f5eff9, #fff);}
.statement {border-left: 3px solid #b58b4d; padding: 23px 28px; background: linear-gradient(120deg, #f0e7f6, #faf7fc); border-radius: 0 16px 16px 0;}
.statement p {color: var(--accent-deep); font-style: italic;}
.principles-grid > div {padding: 8px 0 0 19px; border-left: 2px solid #bd995f;}
.contact-actions-section {background: linear-gradient(180deg, #faf8f5, #f5eff9);}
.contact-card {border-radius: 20px; border-color: #d5c6df; box-shadow: 0 7px 0 #e6ddec, 0 18px 30px rgba(47,20,63,.07);}
.contact-card:first-child {border-top: 3px solid var(--accent);}
.contact-card:last-child {border-top: 3px solid #b18b51;}
.contact-card .contact-icon {width: 49px; height: 49px; border-radius: 14px; border: 1px solid #ddcde8; background: linear-gradient(145deg, #f6f0fa, #e8ddf1); box-shadow: inset 0 1px 0 #fff;}
.contact-card .button {margin-bottom: 5px;}
.contact-details-grid {gap: 35px;}
.details-block {padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: var(--surface-radius); box-shadow: var(--surface-shadow);}
.details-icon {width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: var(--accent-soft);}
.location-options {gap: 18px;}
.location-options > span {padding: 20px 18px; border: 1px solid #ded2e6; border-radius: 14px; background: rgba(255,255,255,.7); box-shadow: inset 0 1px 0 #fff; font-size: 13px;}
.site-footer {background: linear-gradient(180deg, #fff, #faf7fc);}
.footer-contact {color: var(--accent);}
.footer-bottom {border-top-color: #dacde2;}

@media (min-width: 1550px) {.hero-copy h1 {font-size: 75px;}}
@media (max-width: 1100px) {
  .hero-grid {gap: 35px;}
  .hero-copy h1 {font-size: clamp(43px, 4.65vw, 58px);}
  .primary-nav {gap: 7px;}
  .primary-nav .nav-contact {padding-inline: 18px;}
  .button, .cta-inner .button {padding-inline: 19px; gap: 13px;}
  .steps-grid {gap: 18px;}
  .step {padding: 23px;}
  .location-grid {gap: 16px;}
  .location-card, .location-card:first-child, .location-card:last-child {padding: 23px 19px;}
  .contact-details-grid {gap: 25px;}
  .details-block {padding: 28px;}
  .hours > div {font-size: 13px;}
  .page-hero::before, .page-hero::after {opacity: .6;}
}
@media (max-width: 820px) {
  .primary-nav {gap: 10px; padding-block: 14px; align-items: center;}
  .primary-nav .nav-contact {margin-left: 0; min-height: 44px; font-size: 12px; padding: 10px 19px;}
  .js .menu-toggle {min-height: 44px; min-width: 68px; border-color: #d5c3e2; border-radius: 9px; background: linear-gradient(180deg, #fff, #f1eaf6); color: var(--accent); box-shadow: inset 0 1px 0 #fff, 0 3px 0 #d6c7e0, 0 5px 12px rgba(47,20,63,.06);}
  .js .menu-toggle:active {transform: translateY(2px); box-shadow: inset 0 1px 0 #fff, 0 1px 0 #d6c7e0;}
  .menu-bars {border-color: var(--accent);}
  .menu-bars::after {background: var(--accent);}
  .home-hero {padding-block: 44px;}
  .hero-grid {gap: 26px;}
  .hero-copy h1 {font-size: clamp(38px, 5.15vw, 43px);}
  .hero-copy .eyebrow {font-size: 8px; gap: 8px; letter-spacing: .11em;}
  .hero-copy .eyebrow::before {width: 16px;}
  .button, .cta-inner .button {font-size: 12px; min-height: 50px; padding: 12px 17px; gap: 11px;}
  .button-row {gap: 14px;}
  .logo-frame {padding: 12px; border-radius: 20px;}
  .logo-frame::before {inset: 6px; border-radius: 15px;}
  .art-caption {font-size: 7px; gap: 9px; letter-spacing: .1em;}
  .steps-grid {gap: 16px;}
  .step {padding: 22px 19px;}
  .step h3 {font-size: 18px;}
  .location-card:nth-child(n) {padding: 25px; border: 1px solid var(--line);}
  .focus-list {padding-inline: 22px;}
  .focus-list > div {gap: 15px;}
  .contact-details-grid {gap: 22px;}
  .details-block {padding: 24px;}
  .details-block h2 {font-size: 31px;}
  .hours > div {font-size: 12px; flex-wrap: wrap; justify-content: flex-start; gap: 5px 14px;}
}
@media (max-width: 600px) {
  .topbar-inner {height: 33px;}
  .home-hero {padding-block: 38px 40px; background: radial-gradient(ellipse at 75% 78%, #e9dff2, transparent 62%), var(--paper);}
  .hero-grid {gap: 37px;}
  .hero-copy h1 {font-size: clamp(38px, 10.25vw, 56px); line-height: 1.12;}
  .hero-copy .eyebrow {font-size: 8px; letter-spacing: .11em; gap: 8px;}
  .hero-copy .eyebrow::before {width: 18px;}
  .hero-lede {margin-top: 21px;}
  .button-row {gap: 14px;}
  .button, .cta-inner .button {padding: 13px 17px; min-height: 51px; border-radius: 11px; gap: 12px; font-size: 12px;}
  .button .icon {width: 17px; height: 17px;}
  .hero-byline {margin-top: 27px;}
  .hero-art {width: min(calc(100% - 16px), 380px);}
  .logo-frame {padding: 12px;}
  .art-caption {font-size: 7px; gap: 10px; letter-spacing: .12em; margin-top: 27px;}
  .hero-art::before {width: 114%; left: -7%;}
  .highlights-grid {padding-block: 0;}
  .highlights-grid > div {padding: 22px 0;}
  .highlights-grid > div::before {display: none;}
  .highlight-title {font-size: 22px;}
  .step {padding: 23px; grid-template-columns: 45px 1fr; gap: 0 18px;}
  .step-number {width: 43px; height: 43px; font-size: 22px; border-radius: 12px; margin: 0;}
  .step p {font-size: 14px;}
  .location-grid {gap: 15px;}
  .location-card:nth-child(n) {padding: 21px 18px;}
  .location-card > .icon {width: 46px; height: 46px; padding: 10px;}
  .location-card h3 {font-size: 17px;}
  .location-card p {font-size: 13px;}
  .inclusive-section, .gpr-section {padding-block: 52px;}
  .inclusive-section::before, .gpr-section::before, .cta-section::before {opacity: .55;}
  .page-hero::before {right: -155px; top: 45px; opacity: .45;}
  .page-hero::after {right: -99px; top: 105px; opacity: .45;}
  .focus-list {padding-inline: 23px;}
  .rates-panel {padding: 28px 25px;}
  .rates-actions {gap: 15px;}
  .statement {padding: 20px 23px;}
  .statement p {font-size: 24px;}
  .principles-grid {gap: 28px;}
  .contact-card {padding: 28px;}
  .contact-card:first-child {margin-bottom: 7px;}
  .details-block {padding: 27px;}
  .contact-details-grid {gap: 24px;}
  .details-block h2 {font-size: 34px;}
  .hours > div {font-size: 13px; justify-content: space-between;}
  .location-options {gap: 13px;}
  .location-options > span {padding: 19px; font-size: 14px;}
}
@media (max-width: 600px) {
  .footer-grid {grid-template-columns: 1fr; gap: 26px;}
  .footer-brand, .footer-grid > div:nth-child(2), .footer-grid > div:nth-child(3) {grid-column: 1;}
  .footer-nav {flex-direction: row; flex-wrap: wrap; gap: 6px 23px;}
  .footer-email {font-size: 13px;}
  .footer-contact {font-size: 22px;}
  .footer-grid > div:last-child > p:last-child {font-size: 12px;}
}
@media (max-width: 420px) {
  .location-grid {grid-template-columns: 1fr;}
  .location-card:nth-child(n) {display: grid; grid-template-columns: 45px 1fr; column-gap: 16px; padding: 24px 21px;}
  .location-card > .icon {grid-row: 1 / 3; margin-bottom: 0; width: 44px; height: 44px;}
  .location-card h3 {font-size: 18px;}
  .location-card p {font-size: 13px;}
  .contact-card, .details-block {padding: 25px;}
}
@media (max-width: 359px) {
  .hero-copy h1 {font-size: 36px;}
  .hero-copy .eyebrow {font-size: 7px;}
  .button, .cta-inner .button {font-size: 11px; padding-inline: 13px; gap: 9px;}
  .button-row {gap: 12px;}
  .primary-nav {gap: 4px;}
  .primary-nav a {padding-inline: 9px;}
  .primary-nav .nav-contact {padding-inline: 14px;}
  .contact-card, .details-block {padding: 22px;}
  .hours > div {font-size: 12px;}
}
@media (prefers-reduced-motion: reduce) {
  .button, .primary-nav .nav-contact, .button .icon, .text-link .icon, .menu-toggle {transition: none !important;}
  .button:hover, .primary-nav .nav-contact:hover, .button:active, .primary-nav .nav-contact:active,
  .text-link:hover .icon, .button:hover .icon, .menu-toggle:active {transform: none !important;}
}
@media (forced-colors: active) {
  .button, .cta-inner .button, .primary-nav .nav-contact {background: ButtonFace; color: ButtonText; border: 2px solid ButtonText; box-shadow: none;}
  .button:focus-visible, .primary-nav .nav-contact:focus-visible {outline: 3px solid Highlight;}
}
@media print {
  .home-hero, .page-hero, .inclusive-section, .gpr-section, .cta-section, .statement, .identity-details {background: white; color: black;}
  .inclusive-grid > div:last-child > p:not(.large-copy), .inclusive-section .eyebrow, .inclusive-section .text-link {color: black;}
  .hero-art::before, .page-hero::before, .page-hero::after, .inclusive-section::before, .gpr-section::before, .cta-section::before {display: none;}
  .step, .location-card, .contact-card, .about-identity, .focus-list, .details-block, .rates-panel, .logo-frame {box-shadow: none;}
  .step, .location-card, .contact-card, .details-block {break-inside: avoid;}
  .hero-copy h1 {font-size: 32pt;}
}