/* Shared design language. The original logo font and colors remain in style.css. */
@font-face {
  font-family: Manrope;
  src: url('/assets/manrope-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
body {
  font-family: Manrope, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  --ink: #202930;
  --muted: #616c74;
  --line: #e2e6e8;
  --panel: #f5f7f8;
}
.icon { display: inline-block; width: 18px; height: 18px; vertical-align: middle; flex: 0 0 auto; }
.icon.service-icon { width: 26px; height: 26px; }
h1, h2, h3 { letter-spacing: -.045em; }
h1 { font-weight: 700; } h2 { font-weight: 650; line-height: 1.13; }
h3 { font-weight: 650; }
/* Exceeds the sticky header by the 20px it loses while compacting mid-scroll. */
html { scroll-padding-top: 128px; }
.wrap { width: min(1240px, calc(100% - 96px)); }
.topline { padding: 10px max(48px, calc((100% - 1240px) / 2)); font-size: 12px; letter-spacing: .015em; }
.topline a { display: flex; align-items: center; gap: 9px; }
.topline .icon { width: 14px; height: 14px; }
.header { height: 112px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; background: var(--bg); transition: height .25s, box-shadow .25s; }
.header.scrolled { height: 92px; box-shadow: 0 8px 28px #172b3a14; }
.header nav { gap: 32px; font-size: 14px; font-weight: 600; }
.header nav a { position: relative; }
.header nav a::after { content: ''; position: absolute; bottom: 6px; left: 0; width: 0; height: 2px; background: var(--accent); transition: width .2s; }
.header nav a:hover::after, .header nav a:focus-visible::after, .header nav a.is-active::after { width: 100%; }
.header nav a.is-active { color: var(--accent); }
.button { border-radius: 7px; padding: 16px 22px; gap: 18px; font-size: 14px; font-weight: 700; box-shadow: 0 3px 8px #172b3a08; }
.button:hover { transform: translateY(-1px); }
.button>span:empty { display: none; }
.text-link { font-size: 14px; text-decoration: none; border-bottom: 1px solid var(--line); padding: 11px 0; }
.text-link .icon { margin-left: 8px; width: 16px; }
.eyebrow { font-size: 11px; letter-spacing: .14em; font-weight: 750; }
.hero-copy>p:not(.eyebrow) { font-size: 17px; line-height: 1.75; }
.section-heading { margin-bottom: 36px; }
.section-heading>p { font-size: 15px; }
.services { padding: 96px 0; }
.service-card { border-radius: 12px; padding: 28px; min-height: 280px; transition: border-color .2s, box-shadow .2s, background .2s; }
.service-card:hover { transform: none; box-shadow: 0 12px 32px #172b3a09; }
.card-top { margin-bottom: 30px; }
.card-number { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .8; }
.service-card h3 { font-size: 21px; line-height: 1.3; letter-spacing: -.03em; }
.service-card p { font-size: 14px; line-height: 1.75; margin: 12px 0 24px; }
.service-card>span.card-more { font-size: 13px; padding-top: 16px; border-top: 1px solid var(--line); }
.card-more .icon { width: 17px; height: 17px; transition: transform .2s; }
.service-card:hover .card-more .icon { transform: translateX(3px); }
.about { gap: 80px; padding-bottom: 96px; }
.about>img { border-radius: 14px; }
.about p:not(.eyebrow), .electric p:not(.eyebrow), .contact p:not(.eyebrow) { font-size: 15px; line-height: 1.85; }
.electric { padding: 52px 56px; border-radius: 14px; margin-bottom: 96px; }
.electric h2 { font-size: clamp(30px, 3.1vw, 44px); }
.visit { gap: 80px; padding-bottom: 96px; }
.visit li { gap: 24px; padding: 24px 0; }
.visit li>span { font-variant-numeric: tabular-nums; }
.visit h3 { font-size: 19px; }.visit p { font-size: 14px; line-height: 1.75; }
.contact { padding-top: 64px; gap: 80px; }
.contact-info { border: 1px solid var(--line); border-radius: 14px; padding: 36px; }
.contact-info h3 { font-size: 22px; }
.contact-info>a { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; padding: 12px 0; }
.hours { font-size: 13px; }.hours>span:first-child { display: inline-flex; align-items: center; gap: 7px; }.hours .icon { width: 15px; height: 15px; }
.email { display: flex; align-items: center; gap: 12px; margin-top: 18px; }.email .email-copy { color: var(--ink); font-size: 14px; font-weight: 650; }.email small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 3px; }
.footer { padding-top: 32px; }.footer>span,.footer>a:last-child { font-size: 12px; }.footer>a:last-child { display: inline-flex; align-items: center; gap: 7px; padding: 12px 0; }
.design-switch { font-family: Manrope, Arial, sans-serif; padding: 5px; background: #202930f5; border-radius: 12px; box-shadow: 0 6px 20px #0002; }
.design-switch a { border-radius: 8px; font-weight: 650; }
dialog { border-radius: 16px; padding: 48px; }.dialog-note { font-size: 14px; }.close-dialog { display: grid; place-items: center; border-radius: 8px; }.close-dialog:hover { background: var(--panel); }.close-dialog .icon { width: 22px; height: 22px; }
.menu { align-items: center; justify-content: center; padding: 10px; }.menu .icon { width: 22px; height: 22px; }.menu-close-icon { display: none; }.menu-open .menu-icon { display: none; }.menu-open .menu-close-icon { display: block; }
/* 01: precise, restrained red accents and a light workshop canvas. */
.v1 { --accent: #c82430; --bg: #fff; }
.v1 .hero-one { padding-top: 48px; padding-bottom: 48px; gap: 56px; align-items: center; }
.v1 .hero-copy { padding: 0; }.v1 .hero-one h1 { font-size: clamp(40px, 4.15vw, 60px); line-height: 1.12; letter-spacing: -.05em; }
.v1 .hero-image { min-height: 500px; border-radius: 14px; }
.v1 .image-label { left: 20px; right: 20px; bottom: 20px; border: 1px solid #fff8; border-radius: 9px; background: #fffffff2; padding: 19px 22px; }
.v1 .image-label span { font-size: 9px; color: var(--muted); }.v1 .image-label strong { display: flex; gap: 10px; align-items: center; font-size: 16px; font-weight: 650; }.v1 .image-label .icon { color: var(--accent); width: 20px; height: 20px; }
.v1 .trust { padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }.trust>span { display: flex; align-items: center; gap: 9px; }.trust .icon { color: var(--accent); width: 16px; height: 16px; }
.v1 .service-card { border: 1px solid var(--line); border-radius: 12px; background: #fff; }.v1 .service-card:hover { border-color: var(--accent); }.v1 .service-icon { color: var(--accent); padding: 12px; box-sizing: content-box; background: #fbf0f1; border-radius: 10px; }
.v1 .electric { background: #f5f7f8; border: 1px solid var(--line); }
/* 02: graphite with muted lime, structured like an instrument panel. */
.v2 { --bg: #141917; --ink: #f1f4ef; --muted: #adb7b0; --accent: #c9e887; --panel: #1c2420; --line: #354039; }
.v2 .topline { background: #1b221e; }.v2 .hero-two { padding-top: 44px; }
.v2 .sport-title h1 { font-size: clamp(48px, 5.5vw, 80px); font-weight: 750; letter-spacing: -.055em; line-height: 1.05; }
.v2 .sport-title { grid-template-columns: 2.2fr 1fr; gap: 48px; margin-bottom: 36px; }.v2 .sport-title p { font-size: 14px; line-height: 1.8; }
.v2 .sport-image { border-radius: 12px; height: 400px; }.v2 .sport-image>img { filter: brightness(.65) saturate(.6); }.v2 .vertical-label { font-size: 9px; left: 24px; }
.v2 .sport-stamp { display: flex; gap: 16px; align-items: center; padding: 20px 24px; border-radius: 10px; border: 1px solid #ffffff30; background: #141917dc; font-size: 19px; line-height: 1.3; font-weight: 650; }.v2 .sport-stamp>.icon { color: var(--accent); width: 30px; height: 30px; }
.v2 .sport-strip { font-size: 11px; padding: 24px 0; }.v2 .sport-strip a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 0; }
.v2 h2 { font-weight: 650; font-size: clamp(32px, 3vw, 44px); letter-spacing: -.035em; }
.v2 .service-grid { border: 0; background: transparent; gap: 16px; }.v2 .service-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }.v2 .service-card:hover { border-color: #8dA56b; background: #232e27; }.v2 .card-top { flex-direction: row; }.v2 .card-number { color: var(--muted); }
.v2 .electric { border: 1px solid var(--line); background: var(--panel); }.v2 .electric .eyebrow { color: var(--accent); }
.v2 dialog { background: var(--panel); }
/* 03: warm editorial composition, fine rules, calm serif headings. */
.v3 { --bg: #f7f5ef; --ink: #273f47; --muted: #55636a; --accent: #2c5361; --panel: #eeeee6; --line: #d9ded7; }
.v3 .header { height: 112px; }.v3 .header.scrolled { height: 92px; }.v3 .editorial-top { padding: 36px 0; }.v3 .editorial-top>span { font-size: 15px; }
.v3 .editorial-grid { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 80px; }.v3 .editorial-grid h1 { font-size: clamp(50px, 5.2vw, 75px); line-height: 1.08; }
.v3 .editorial-grid figure img { height: 470px; border-radius: 180px 180px 12px 12px; }.v3 .editorial-grid>div>p { font-size: 15px; line-height: 1.85; }.v3 .editorial-note { margin-top: 30px; gap: 12px; }.v3 .editorial-note>span { display: flex; }.v3 .editorial-note .icon { width: 20px; height: 20px; }.v3 .editorial-note p { font-size: 13px; }
.v3 .editorial-banner { margin-top: 52px; padding: 24px 0; }.v3 .editorial-banner>span { font-size: 27px; }.v3 .editorial-banner p { font-size: 13px; }
.v3 .service-grid { column-gap: 56px; }.v3 .service-card { border-radius: 0; padding: 28px 0; min-height: 260px; }.v3 .service-card:hover { transform: none; background: #eeeee670; }.v3 .service-card h3 { font-size: 27px; }.v3 .service-card>span.card-more { border: 0; padding-top: 0; }
.v3 .electric { border: 1px solid var(--line); background: #eeeee6; border-radius: 4px; }.v3 .contact-info { border-radius: 4px; }.v3 .about img { border-radius: 4px 100px 4px 4px; }
/* 04: blue service workspace with clear, consistent action surfaces. */
.v4 { --bg: #f5f7fb; --ink: #21344f; --muted: #5e6f85; --accent: #245bc6; --panel: #fff; --line: #dee5ef; }
.v4 .topline { background: #ebeff6; }.v4 .hero-four { padding-top: 32px; gap: 20px; }
.v4 .bento-main { background: #e8eef8; border: 1px solid #dce5f3; border-radius: 16px; grid-template-columns: 1.65fr 1fr; min-height: 510px; }.v4 .bento-main>div { padding: 40px 0 40px 32px; }.v4 .bento-main h1 { font-size: clamp(36px, 3.4vw, 49px); line-height: 1.14; }.v4 .bento-main p:not(.eyebrow) { font-size: 14px; line-height: 1.85; }.v4 .bento-main>img { mask-image: linear-gradient(to right, transparent, black 40%); }
.v4 .bento-side { gap: 20px; }.v4 .quick-contact,.v4 .electric-card { border-radius: 16px; padding: 28px; }.v4 .quick-contact>span,.v4 .electric-card>span:first-child { display: flex; align-items: center; gap: 10px; font-size: 9px; letter-spacing: .09em; }.v4 .quick-contact h2,.v4 .electric-card h2 { font-size: 25px; line-height: 1.2; margin: 24px 0; }.v4 .quick-contact strong { font-size: 19px; }.v4 .quick-contact small { font-size: 12px; margin-top: 9px; }
.v4 .electric-card { background: #e9efea; border: 1px solid #dbe4dc; color: #2c4935; }.v4 .electric-card p { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
.v4 .quick-service { border: 1px solid var(--line); padding: 18px 24px; border-radius: 12px; }.v4 .quick-service button { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; background: #f4f7fc; font-size: 13px; border-radius: 7px; }.v4 .quick-service button:hover { background: #e8eef8; }
.v4 .service-card { border: 1px solid var(--line); border-radius: 12px; box-shadow: none; }.v4 .service-icon { background: #eef3fc; padding: 12px; border-radius: 10px; }.v4 .electric { background: #21344f; }.v4 .electric .eyebrow { color: #c0d2f1; }.v4 .electric .text-link { border-color: #ffffff40; }.v4 .visit { border: 1px solid var(--line); border-radius: 14px; }
/* Overview follows the same type and icon system. */
.overview { background: #f6f7f8; color: #24323b; }.overview main { width: min(1240px, calc(100% - 96px)); }.overview header { border-color: #dce2e6; }.overview h1 { font-size: clamp(42px, 5.5vw, 78px); font-weight: 600; letter-spacing: -.055em; }.overview h1 span { color: #77848c; }.overview main>p { color: #63717a; font-size: 15px; line-height: 1.85; }
.overview article { background: #fff; border-color: #dfe5e9; border-radius: 14px; }.overview .info { padding: 24px; }.overview .info h2 { font-size: 23px; }.overview .info small,.overview .info p { color: #63717a; }.overview .arrow { display: grid; place-items: center; border: 1px solid #dfe5e9; border-radius: 50%; width: 44px; height: 44px; }.overview .arrow .icon { width: 20px; height: 20px; }.overview footer { color: #63717a; }
@media (max-width: 1100px) {
  .wrap,.overview main { width: calc(100% - 64px); }.topline { padding-inline: 32px; }.header nav { gap: 18px; }.headercta { padding: 14px; font-size: 12px; }
  .v1 .hero-one { gap: 32px; }.v1 .hero-one h1 { font-size: 44px; }.v1 .hero-image { min-height: 450px; }.hero-actions { flex-wrap: wrap; }.v2 .sport-title { gap: 24px; }.v2 .sport-title h1 { font-size: 54px; }
  .v3 .editorial-grid { gap: 36px; }.v3 .editorial-grid h1 { font-size: 58px; }.v4 .bento-main { grid-template-columns: 1.3fr 1fr; min-height: 430px; }.v4 .bento-main h1 { font-size: 52px; }
  .about,.visit,.contact { gap: 48px; }.service-card { padding: 24px; }.service-card h3 { font-size: 19px; }
}
@media (min-width: 761px) and (max-width: 850px) {
  .header nav { gap: 12px; font-size: 12px; }.headercta { padding: 12px; font-size: 11px; gap: 8px; }.headercta .icon { width: 15px; }.brand { gap: 8px; padding: 6px; }.brand .original-wordmark { font-size: 16px; }.brand .original-logo { width: 44px; }
  .v2 .sport-title { grid-template-columns: 2fr 1fr; }.v2 .sport-title h1 { font-size: 44px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 104px; }
  .wrap,.overview main { width: calc(100% - 40px); }.topline { padding: 0 20px; font-size: 11px; }.topline a { gap: 6px; min-height: 44px; }.topline>span { align-self: center; }.topline .icon { width: 13px; height: 13px; }.header,.v3 .header { height: 88px; position: sticky; }.header.scrolled,.v3 .header.scrolled { height: 68px; }.header nav { top: 100%; margin-top: 6px; gap: 0; }.menu { display: flex; border-color: var(--line); border-radius: 8px; }.headercta .icon { display: none; }
  .eyebrow { font-size: 10px; }.button { font-size: 14px; padding: 15px 18px; }.hero-actions .button { font-size: 14px; }.hero-actions { gap: 14px 20px; }.text-link { font-size: 14px; padding: 13px 0; }
  .v1 .hero-one { padding: 32px 0; gap: 28px; }.v1 .hero-one h1 { font-size: clamp(32px, 8.5vw, 52px); line-height: 1.16; }.v1 .hero-image { min-height: 320px; }.v1 .image-label { padding: 16px; left: 14px; right: 14px; bottom: 14px; }.v1 .trust { padding: 18px; gap: 16px; font-size: 12px; }.trust>span { align-items: flex-start; gap: 7px; }.trust .icon { width: 14px; height: 14px; }
  .services { padding: 64px 0; }.section-heading h2 { font-size: 34px; }.section-heading>p { font-size: 14px; }.service-card { padding: 24px; min-height: 0; }.service-card h3 { font-size: 21px; }.service-card p { font-size: 15px; }.service-card>span.card-more { font-size: 13px; }.card-top,.v1 .card-top { margin-bottom: 24px; }
  .about,.visit,.contact { gap: 28px; }.about,.visit { padding-bottom: 64px; }.about>img { height: 290px; }.about h2,.contact h2,.visit h2 { font-size: 34px; }.electric { padding: 30px 24px; margin-bottom: 64px; }.electric h2 { font-size: 30px; }.visit p { font-size: 15px; }.contact { padding-top: 40px; }.contact-info { padding: 24px; }.hours { font-size: 13px; }
  .v2 .hero-two { padding-top: 32px; }.v2 .sport-title { grid-template-columns: 1fr; gap: 24px; }.v2 .sport-title h1 { font-size: clamp(34px, 9.5vw, 62px); }.v2 .sport-title p { font-size: 14px; }.v2 .sport-image { height: 320px; }.v2 .sport-stamp { padding: 14px 16px; font-size: 16px; right: 16px; bottom: 16px; }.v2 .sport-stamp>.icon { width: 24px; height: 24px; }.v2 .sport-strip { font-size: 11px; }.v2 .sport-strip a { padding: 13px 0; }.v2 .service-grid { gap: 12px; }
  .v3 .editorial-top { padding: 28px 0; }.v3 .editorial-top>span { font-size: 13px; }.v3 .editorial-grid { grid-template-columns: 1fr; gap: 24px; }.v3 .editorial-grid h1 { font-size: clamp(45px, 11vw, 68px); }.v3 .editorial-grid figure img { height: 360px; }.v3 .editorial-banner { margin-top: 30px; }.v3 .editorial-banner>span { font-size: 25px; }.v3 .service-card { min-height: 0; padding: 24px 0; }.v3 .service-card h3 { font-size: 27px; }
  .v4 .hero-four { padding-top: 24px; gap: 14px; }.v4 .bento-main { min-height: 0; }.v4 .bento-main>div { padding: 28px 24px; }.v4 .bento-main h1 { font-size: clamp(34px, 9vw, 52px); }.v4 .bento-main p:not(.eyebrow) { font-size: 14px; }.v4 .bento-main .button { font-size: 14px; }.v4 .bento-main>img { mask-image: none; height: 210px; }.v4 .bento-side { gap: 14px; }.v4 .quick-contact,.v4 .electric-card { padding: 24px; }.v4 .quick-contact h2,.v4 .electric-card h2 { font-size: 27px; margin: 18px 0; }.v4 .quick-contact strong { font-size: 20px; }.v4 .quick-service { padding: 18px; }.v4 .quick-service button { font-size: 13px; gap: 5px; padding: 12px 10px; }.v4 .quick-service button .icon { width: 15px; }.v4 .visit { padding: 28px 24px; margin-bottom: 64px; }
  .mobile-contact { gap: 8px; padding-inline: 16px; }.mobile-contact a { font-size: 13px; gap: 8px; border-radius: 8px; }.mobile-contact .icon { width: 16px; height: 16px; }.design-switch { margin-bottom: 100px; }.footer { padding-bottom: 28px; }
  dialog { padding: 44px 24px 28px; }dialog h2 { font-size: 28px; }.dialog-actions { align-items: stretch; }.dialog-actions .text-link { font-size: 12px; }
  .overview .info { padding: 20px; }.overview .info h2 { font-size: 21px; }.overview .preview { height: 230px; }.overview .arrow { width: 36px; height: 36px; flex-shrink: 0; }
}