/* ==========================================================================
   Mains & Crosses — site styles
   Built on Bootstrap 5.3. Square-edged, high-contrast editorial style.
   ========================================================================== */

:root {
  --mc-ink: #0e0e0e;
  --mc-ink-2: #2a2c2e;
  --mc-ink-line: #3a3d40;
  --mc-white: #ffffff;
  --mc-lime: #d7ff3f;
  --mc-grey-50: #f3f4f4;
  --mc-grey-100: #e4e5e6;
  --mc-line: #d9dadb;
  --mc-muted: #5c5f63;
  --mc-muted-dark: #9a9da1;
  --mc-text-dark-bg: #c4c7ca;
  --mc-gutter: clamp(24px, 3.9vw, 56px);
  --mc-section: clamp(72px, 8.3vw, 120px);

  /* Bootstrap overrides */
  --bs-body-font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-color: var(--mc-ink);
  --bs-body-bg: var(--mc-white);
  --bs-link-color: var(--mc-ink);
  --bs-link-color-rgb: 14, 14, 14;
  --bs-link-hover-color: var(--mc-ink-2);
  --bs-link-hover-color-rgb: 42, 44, 46;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-pill: 0;
  --bs-border-color: var(--mc-line);
  --bs-focus-ring-color: rgba(14, 14, 14, .35);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--bs-body-font-family);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { color: inherit; }

:focus-visible { outline: 2px solid var(--mc-ink); outline-offset: 3px; }
.bg-ink :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--mc-lime); }

.visually-hidden-focusable:focus {
  position: fixed !important; top: 12px; left: 12px; z-index: 2000;
  padding: 12px 18px; background: var(--mc-lime); color: var(--mc-ink);
  font-weight: 600; text-decoration: none;
}

.container-mc { padding-left: var(--mc-gutter); padding-right: var(--mc-gutter); max-width: 1600px; margin: 0 auto; }
.section { padding-top: var(--mc-section); padding-bottom: var(--mc-section); }

.bg-ink { background: var(--mc-ink); color: var(--mc-white); }
.bg-lime { background: var(--mc-lime); color: var(--mc-ink); }
.bg-grey { background: var(--mc-grey-50); }
.text-muted-mc { color: var(--mc-muted); }
.bg-ink .text-muted-mc { color: var(--mc-muted-dark); }
.text-lime { color: var(--mc-lime); }

/* ---------- Typography ---------- */
.eyebrow {
  display: block;
  font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--mc-muted); margin-bottom: 1.25rem;
}
.bg-ink .eyebrow, .hero .eyebrow, .calc-result .eyebrow { color: var(--mc-muted-dark); }
.bg-lime .eyebrow { color: var(--mc-ink); font-weight: 600; }

.display-mc {
  font-weight: 600; letter-spacing: -.05em; line-height: .94;
  font-size: clamp(48px, 8.2vw, 120px); margin: 0;
}
.display-hero {
  font-weight: 600; letter-spacing: -.045em; line-height: .98;
  font-size: clamp(46px, 6.4vw, 92px); margin: 0;
}
.h-section {
  font-weight: 600; letter-spacing: -.04em; line-height: 1.02;
  font-size: clamp(36px, 3.9vw, 56px); margin: 0;
}
.lead-mc { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.65; font-weight: 300; color: #3a3d40; }
.bg-ink .lead-mc, .hero .lead-mc, .featured-guide .lead-mc { color: var(--mc-text-dark-bg); }
.dot-lime { background: var(--mc-lime); color: var(--mc-ink); padding: 0 .08em; margin-left: .06em; }

/* ---------- Buttons ---------- */
.btn { --bs-btn-border-radius: 0; }
.btn-mc {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 56px; padding: 0 28px;
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: 0; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-mc:active { transform: translateY(1px); }
.btn-lime { background: var(--mc-lime); color: var(--mc-ink); border-color: var(--mc-lime); }
.btn-lime:hover, .btn-lime:focus-visible { background: #c6ef2b; border-color: #c6ef2b; color: var(--mc-ink); }
.btn-ink { background: var(--mc-ink); color: var(--mc-white); border-color: var(--mc-ink); }
.btn-ink:hover, .btn-ink:focus-visible { background: var(--mc-ink-2); border-color: var(--mc-ink-2); color: var(--mc-white); }
.btn-outline-white { background: transparent; color: var(--mc-white); border-color: var(--mc-white); }
.btn-outline-white:hover, .btn-outline-white:focus-visible { background: var(--mc-white); color: var(--mc-ink); }
.btn-white { background: var(--mc-white); color: var(--mc-ink); border-color: var(--mc-white); }
.btn-white:hover { background: var(--mc-lime); border-color: var(--mc-lime); }

.link-arrow {
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 6px; color: inherit;
}
.link-arrow:hover { text-decoration-color: var(--mc-lime); text-decoration-thickness: 3px; }

/* ---------- Header / nav ---------- */
.site-header { background: var(--mc-ink); position: sticky; top: 0; z-index: 1030; }
.site-header .navbar { min-height: 84px; padding-top: 0; padding-bottom: 0; }
.brand {
  display: inline-flex; align-items: center; gap: 14px;
  color: var(--mc-white); text-decoration: none;
  font-size: 17px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
}
.brand:hover { color: var(--mc-white); }
.brand-mark { width: 14px; height: 14px; background: var(--mc-lime); flex-shrink: 0; }
.site-header .nav-link {
  color: var(--mc-white); font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 0 !important;
}
.site-header .nav-link:hover, .site-header .nav-link:focus-visible { color: var(--mc-lime); }
.site-header .nav-link.active, .site-header .nav-link[aria-current="page"] { color: var(--mc-lime); }
.site-header .navbar-nav { gap: 40px; }
.navbar-toggler { border: 1px solid var(--mc-ink-line); border-radius: 0; padding: 10px 12px; }
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='square' stroke-width='2' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e");
}
@media (max-width: 1199.98px) {
  .site-header .navbar-collapse { padding: 12px 0 28px; }
  .site-header .navbar-nav { gap: 0; }
  .site-header .nav-link { padding: 14px 0 !important; border-bottom: 1px solid var(--mc-ink-2); font-size: 15px; }
  .site-header .nav-cta { margin-top: 20px; width: 100%; }
}

/* ---------- Home hero ---------- */
.hero { background: var(--mc-ink); color: var(--mc-white); }
.hero-copy { padding: clamp(56px, 6vw, 88px) var(--mc-gutter) var(--mc-gutter); display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: 100%; }
@media (min-width: 992px) { .hero-copy { border-right: 1px solid var(--mc-ink-2); min-height: 760px; } }
.hero-media { position: relative; height: 100%; min-height: 360px; background: var(--mc-ink-2); overflow: hidden; }
.hero-media picture, .hero-media img { width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: 40% 50%; position: absolute; inset: 0; animation: heroZoom 14s ease-out both; }
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }

/* ---------- Marquee strip ---------- */
.marquee { background: var(--mc-lime); color: var(--mc-ink); overflow: hidden; height: 64px; display: flex; align-items: center; }
.marquee-track {
  display: flex; gap: 48px; padding-left: 48px; white-space: nowrap; flex-shrink: 0;
  font-size: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: -.01em;
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ---------- Stats ---------- */
.stats { border-bottom: 1px solid var(--mc-line); }
.stat { padding: 40px var(--mc-gutter); border-right: 1px solid var(--mc-line); }
.stat:last-child { border-right: 0; }
.stat-value { display: block; font-size: clamp(32px, 3vw, 44px); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.stat-label { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--mc-muted); margin-top: 6px; }
@media (max-width: 767.98px) { .stat:nth-child(2n) { border-right: 0; } .stat:nth-child(-n+2) { border-bottom: 1px solid var(--mc-line); } }

/* ---------- Service list ---------- */
.service-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mc-ink); }
.service-row {
  display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 8px 16px;
  padding: 32px 0; border-bottom: 1px solid var(--mc-line);
  transition: padding-left .25s ease, background-color .25s ease;
}
@media (min-width: 768px) { .service-row { grid-template-columns: 64px 1fr 220px 140px; } }
.service-row:hover { padding-left: 12px; background: var(--mc-grey-50); }
.service-num { font-size: 14px; color: var(--mc-muted); }
.service-name { font-size: clamp(22px, 2.1vw, 30px); font-weight: 500; letter-spacing: -.02em; margin: 0; }
.service-desc { font-size: 14px; font-weight: 300; color: var(--mc-muted); }
.service-price { font-size: 18px; font-weight: 500; text-align: right; }
@media (max-width: 767.98px) { .service-desc { grid-column: 2 / 4; grid-row: 2; } }

/* ---------- Process band ---------- */
.process-tile { height: 460px; overflow: hidden; background: var(--mc-grey-100); }
.process-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.process-tile:hover img { transform: scale(1.04); }
.process-panel { height: 100%; min-height: 460px; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.process-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 22px; font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
.process-steps span { color: var(--mc-lime); margin-right: 12px; }

/* ---------- CTA band ---------- */
.cta-band { padding: clamp(48px, 5vw, 72px) clamp(28px, 4.4vw, 64px); }
.cta-band h2 { font-size: clamp(38px, 4.4vw, 64px); font-weight: 600; letter-spacing: -.045em; line-height: 1; margin: 0; }

/* ---------- Photo placeholders (swap for real photos) ---------- */
.photo-ph {
  background: var(--mc-grey-100); display: flex; align-items: flex-end; padding: 16px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mc-muted);
}
.bg-ink .photo-ph { background: var(--mc-ink-2); color: var(--mc-muted-dark); }

/* ---------- Guide cards ---------- */
.guide-card { display: flex; flex-direction: column; gap: 18px; color: var(--mc-ink); text-decoration: none; height: 100%; }
.guide-card.ruled { padding-top: 20px; border-top: 1px solid var(--mc-ink); }
.guide-meta { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.guide-meta .read { color: var(--mc-muted); font-weight: 400; }
.guide-media { height: 260px; overflow: hidden; }
.guide-media.tall { height: 300px; }
.guide-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.guide-card:hover .guide-media img { transform: scale(1.05); }
.guide-title { font-size: 24px; line-height: 1.25; font-weight: 500; letter-spacing: -.02em; margin: 0; }
.guide-card:hover .guide-title { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.guide-cat { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mc-muted); }

.featured-guide { display: grid; grid-template-columns: 1fr; background: var(--mc-ink); color: var(--mc-white); text-decoration: none; }
@media (min-width: 992px) { .featured-guide { grid-template-columns: 1.4fr 1fr; } }
.featured-guide:hover { color: var(--mc-white); }
.featured-media { min-height: 320px; overflow: hidden; }
@media (min-width: 992px) { .featured-media { min-height: 520px; } }
.featured-media img { width: 100%; height: 100%; object-fit: cover; }
.featured-body { padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.featured-body h2 { font-size: clamp(32px, 3vw, 44px); line-height: 1.05; font-weight: 600; letter-spacing: -.04em; margin: 0 0 20px; }
.tag-lime { align-self: flex-start; padding: 8px 12px; background: var(--mc-lime); color: var(--mc-ink); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }

.filter-bar { border-top: 1px solid var(--mc-ink); border-bottom: 1px solid var(--mc-line); overflow-x: auto; }
.filter-bar .btn-filter {
  min-height: 60px; padding: 0 28px; background: var(--mc-white); color: var(--mc-ink);
  border: 0; border-right: 1px solid var(--mc-line); border-radius: 0; white-space: nowrap;
  font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
}
.filter-bar .btn-filter:hover { background: var(--mc-grey-50); }
.filter-bar .btn-filter[aria-pressed="true"] { background: var(--mc-ink); color: var(--mc-white); font-weight: 600; }
.guide-item { transition: opacity .3s ease; }
.guide-item[hidden] { display: none !important; }

/* ---------- Prices ---------- */
.price-col { padding-top: 64px; padding-bottom: 64px; }
@media (min-width: 992px) { .price-col + .price-col { border-left: 1px solid var(--mc-line); padding-left: 56px; } .price-col:first-child { padding-right: 56px; } }
.price-col h2 { font-size: 44px; font-weight: 600; letter-spacing: -.04em; margin: 0; }
.price-note { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--mc-muted); }
.price-list { margin: 28px 0 0; padding: 0; }
.price-list div { display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; border-top: 1px solid var(--mc-line); font-size: 18px; }
.price-list div:last-child { border-bottom: 1px solid var(--mc-line); }
.price-list dt { font-weight: 400; }
.price-list dd { margin: 0; font-weight: 600; white-space: nowrap; }
.extras { border-top: 1px solid var(--mc-ink-line); }
.extra { padding: 32px 32px 0 0; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 768px) { .extra + .extra { border-left: 1px solid var(--mc-ink-line); padding-left: 32px; } }
.extra-name { font-size: 20px; font-weight: 500; }
.extra-price { font-size: 32px; font-weight: 600; color: var(--mc-lime); }

/* ---------- Page intro ---------- */
.page-intro { padding-top: var(--mc-section); padding-bottom: 72px; }
.page-intro.ruled { border-bottom: 1px solid var(--mc-ink); }

/* ---------- Tension calculator ---------- */
.calc-q { display: flow-root; padding: 48px 0; border: 0; border-bottom: 1px solid var(--mc-line); margin: 0; min-width: 0; }
.calc-q:last-of-type { border-bottom: 0; }
.calc-q legend { float: left; width: 100%; margin: 0 0 16px; padding: 0; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; display: flex; flex-direction: column; gap: 6px; line-height: 1.3; }
.calc-q legend .num { color: var(--mc-muted); font-weight: 400; }
.calc-q legend + * { clear: both; }
@media (min-width: 768px) {
  .calc-q legend { width: 200px; margin: 0; }
  .calc-q legend + * { clear: none; margin-left: 224px; }
}
.calc-options { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-options .btn-choice {
  min-height: 52px; padding: 0 20px; display: inline-flex; align-items: center;
  background: var(--mc-white); color: var(--mc-ink); border: 1px solid #b9bbbe; border-radius: 0;
  font-size: 14px; font-weight: 400; transition: background-color .2s, color .2s, border-color .2s;
}
.calc-options .btn-choice:hover { border-color: var(--mc-ink); }
.calc-options .btn-check:checked + .btn-choice { background: var(--mc-ink); color: var(--mc-white); border-color: var(--mc-ink); font-weight: 500; }
.calc-options .btn-check:focus-visible + .btn-choice { outline: 2px solid var(--mc-ink); outline-offset: 2px; }

.calc-result { background: var(--mc-ink); color: var(--mc-white); padding: clamp(32px, 4vw, 56px); height: 100%; display: flex; flex-direction: column; gap: 28px; }
.gauge { width: 100%; max-width: 360px; }
.gauge-track { fill: none; stroke: var(--mc-ink-2); stroke-width: 14; }
.gauge-fill { fill: none; stroke: var(--mc-lime); stroke-width: 14; stroke-linecap: butt; transition: stroke-dashoffset 1s cubic-bezier(.2, .8, .2, 1); }
.gauge-tick { stroke: var(--mc-ink-line); stroke-width: 2; }
.gauge-label { fill: var(--mc-muted-dark); font: 500 11px "Poppins", sans-serif; letter-spacing: .08em; }
.gauge-needle { transform-origin: 150px 150px; transition: transform 1s cubic-bezier(.34, 1.4, .5, 1); }
.gauge-needle line { stroke: var(--mc-white); stroke-width: 3; stroke-linecap: round; }
.gauge-hub { fill: var(--mc-lime); }
.result-number { display: flex; align-items: baseline; gap: 12px; margin-top: -8px; }
.result-lbs { font-size: clamp(96px, 11vw, 160px); line-height: .9; font-weight: 600; letter-spacing: -.06em; color: var(--mc-lime); font-variant-numeric: tabular-nums; }
.result-unit { font-size: 24px; font-weight: 500; }
.result-meta { display: flex; flex-wrap: wrap; gap: 8px 32px; padding-top: 20px; border-top: 1px solid var(--mc-ink-line); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--mc-muted-dark); }
.result-meta strong { color: var(--mc-white); font-weight: 600; }
.result-why { font-size: 15px; line-height: 1.75; font-weight: 300; color: var(--mc-text-dark-bg); margin: 0; }
.calc-result.is-updating .result-lbs { animation: pop .5s ease; }
@keyframes pop { 0% { transform: scale(.94); opacity: .5; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); } }

/* Animated string bed — strings visibly tighten as tension rises */
.string-bed { width: 100%; max-width: 140px; }
.string-bed path { fill: none; stroke: var(--mc-lime); stroke-width: 1.5; transition: d .8s cubic-bezier(.2, .8, .2, 1); }
.string-bed .frame { stroke: var(--mc-white); stroke-width: 3; }

/* ---------- Contact ---------- */
.form-mc .form-label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; }
.form-mc .form-control, .form-mc .form-select {
  border: 0; border-bottom: 1px solid var(--mc-ink); border-radius: 0; padding: 12px 0;
  font-size: 18px; font-weight: 300; background-color: transparent; box-shadow: none;
}
.form-mc .form-select { background-position: right 0 center; padding-right: 28px; }
.form-mc .form-control:focus, .form-mc .form-select:focus { border-bottom: 2px solid var(--mc-ink); box-shadow: none; }
.form-mc .form-check-input { border-radius: 0; border-color: var(--mc-ink); }
.form-mc .form-check-input:checked { background-color: var(--mc-ink); border-color: var(--mc-ink); }
.form-mc .invalid-feedback { font-size: 13px; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.contact-media { height: 320px; overflow: hidden; }
.contact-media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; }
.contact-info { padding: 48px var(--mc-gutter); }
.contact-info dt { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--mc-lime); margin-bottom: 6px; }
.contact-info dd { font-size: 16px; line-height: 1.7; font-weight: 300; margin: 0 0 28px; }
.contact-info a { color: var(--mc-white); }

/* ---------- Footer ---------- */
.site-footer { background: var(--mc-ink); color: var(--mc-text-dark-bg); }
.site-footer a { color: var(--mc-white); text-decoration: none; }
.site-footer a:hover { color: var(--mc-lime); }
.footer-title { font-size: clamp(32px, 2.8vw, 40px); line-height: 1.05; font-weight: 600; letter-spacing: -.04em; color: var(--mc-white); }
.footer-head { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--mc-muted-dark); margin-bottom: 8px; }
.footer-col { font-size: 14px; line-height: 1.8; font-weight: 300; }
.footer-col address { margin: 0; }
.footer-base { border-top: 1px solid var(--mc-ink-2); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mc-muted-dark); }

/* ---------- Cookie consent ---------- */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1080; max-width: 560px;
  background: var(--mc-ink); color: var(--mc-white); border: 1px solid var(--mc-ink-line);
  padding: 24px; box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
  transform: translateY(140%); transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.consent.is-visible { transform: translateY(0); }
.consent p { font-size: 14px; line-height: 1.6; font-weight: 300; color: var(--mc-text-dark-bg); margin: 0 0 16px; }
.consent .btn-mc { min-height: 48px; padding: 0 20px; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
}

/* ==========================================================================
   Direct Racket Restrings — additions for the Umbraco site
   (everything above this line is the untouched MasterHTMLStructure design)
   ========================================================================== */

/* ---------- Brand: Direct Racket Restrings logo pack (wwwroot/assets/img/brand) ---------- */
/* the "on-dark" logos carry their own #0E0E0E panel, the same colour as the header and footer */
/* header is taller than the design's 84px so the logo can be bigger; --header-h is reused by the menu rules further down */
.site-header { --header-h: 104px; }
.site-header .navbar { min-height: var(--header-h); }
.brand-img { display: block; line-height: 0; margin-left: -18px; } /* cancel the logo panel padding (~7% of its width) so the mark lines up with the page gutter */
.brand-img img { height: 96px; width: auto; } /* nearly fills the header; the logo's own panel padding keeps it off the edges */
@media (max-width: 399.98px) {
  .site-header { --header-h: 84px; }
  .brand-img { margin-left: -13px; }
  .brand-img img { height: 72px; }
}
.footer-logo { display: block; width: 206px; height: 76px; margin-left: -14px; } /* logo has ~7% built-in left padding, so pull it back to line up with the text */

/* ---------- Hero extras ---------- */
.hero .tag-lime { display: inline-block; margin-bottom: 28px; }
.hero-note { font-size: 14px; font-weight: 300; color: var(--mc-text-dark-bg); margin: 20px 0 0; }
.hero-actions { row-gap: 12px; } /* only shows when the buttons wrap onto two lines (narrow phones) */
/* Stacked hero (below lg): the 84px header already leaves space under the logo, so the design's 56px top padding looked like a hole */
@media (max-width: 991.98px) { .hero-copy { padding-top: 24px; gap: 36px; } }
/* Two-column hero: the design's fixed 760px height left a hole under the heading on narrower desktops, where the
   heading is smaller. Scale the height with the viewport instead; it reaches the full 760px at 1440px wide.
   Only 16px top padding, so the lime badminton tag starts near the top of the image beside it without touching the header. */
@media (min-width: 992px) { .hero-copy { min-height: min(760px, 52.8vw); padding-top: 16px; } }

/* Long CMS headings (e.g. "Tennis Racket Stringing Service | Expert Restringing") at a size that still fits */
.display-mc.is-long { font-size: clamp(40px, 5.2vw, 76px); letter-spacing: -.04em; line-height: 1; }
.display-hero.is-long { font-size: clamp(40px, 5vw, 76px); }

/* ---------- Rich text from the back office (guides, privacy, terms, price intro) ---------- */
.prose { font-size: 17px; line-height: 1.75; font-weight: 300; color: #2a2c2e; max-width: 760px; }
.prose > :first-child { margin-top: 0; }
.prose h2, .prose h3, .prose h4 { font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--mc-ink); margin: 2.2rem 0 1rem; }
.prose h2 { font-size: clamp(24px, 2.2vw, 32px); }
.prose h3 { font-size: 22px; }
.prose h4 { font-size: 18px; }
.prose p, .prose ul, .prose ol, .prose table { margin-bottom: 1.25rem; }
.prose strong, .prose b { font-weight: 600; color: var(--mc-ink); }
.prose a { color: var(--mc-ink); text-decoration: underline; text-decoration-color: var(--mc-lime); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.prose a:hover { text-decoration-color: var(--mc-ink); }
.prose img { max-width: 100%; height: auto; margin: 1.5rem 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 12px 14px; border-bottom: 1px solid var(--mc-line); text-align: left; vertical-align: top; }
.prose th { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; border-bottom-color: var(--mc-ink); }
.prose blockquote { border-left: 4px solid var(--mc-lime); padding-left: 20px; font-style: italic; }
/* the legal pages were entered with their own Bootstrap container/row wrappers, so stop them doubling the padding */
.prose .container, .prose .container-fluid { padding-left: 0; padding-right: 0; max-width: none; }
.prose .py-5 { padding-top: 0 !important; padding-bottom: 0 !important; }
.prose .row { margin-left: 0; margin-right: 0; }
.prose .row > * { padding-left: 0; padding-right: 0; width: 100%; }

/* ---------- Why-us accordion (home page tabs) ---------- */
.accordion-mc { --bs-accordion-border-width: 0; --bs-accordion-bg: transparent; --bs-accordion-btn-focus-box-shadow: none; border-top: 1px solid var(--mc-ink); }
.accordion-mc .accordion-item { border-bottom: 1px solid var(--mc-line); }
.accordion-mc .accordion-button {
  padding: 28px 0; gap: 16px; background: transparent; color: var(--mc-ink); box-shadow: none;
  font-size: clamp(20px, 1.9vw, 26px); font-weight: 500; letter-spacing: -.02em;
}
.accordion-mc .accordion-button:not(.collapsed) { color: var(--mc-ink); background: transparent; box-shadow: none; }
.accordion-mc .accordion-button .num { font-size: 14px; font-weight: 400; color: var(--mc-muted); min-width: 48px; }
.accordion-mc .accordion-button::after { background-image: none; content: "+"; font-size: 28px; font-weight: 300; width: auto; height: auto; transform: none; line-height: 1; }
.accordion-mc .accordion-button:not(.collapsed)::after { background-image: none; content: "\2013"; transform: none; }
.accordion-mc .accordion-button:focus-visible { outline: 2px solid var(--mc-ink); outline-offset: 2px; }
.accordion-mc .accordion-body { padding: 0 0 32px 64px; }
@media (max-width: 767.98px) { .accordion-mc .accordion-body { padding-left: 0; } }
.accordion-mc .accordion-body .prose { max-width: none; font-size: 16px; }

/* ---------- Local area block ---------- */
.area-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--mc-ink); }
.area-list li { padding: 18px 0; border-bottom: 1px solid var(--mc-line); font-size: 18px; font-weight: 500; }
.area-list li::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--mc-lime); margin-right: 14px; vertical-align: middle; outline: 1px solid var(--mc-ink); }
.tick-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.tick-list li { padding: 10px 0 10px 36px; position: relative; font-size: 16px; }
.tick-list li::before { content: "\2713"; position: absolute; left: 0; top: 10px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: var(--mc-lime); color: var(--mc-ink); font-size: 13px; font-weight: 700; }

/* ---------- Reviews ---------- */
.reviews { background: var(--mc-ink); color: var(--mc-white); }
.review { margin: 0; max-width: 980px; }
.review-stars { color: var(--mc-lime); letter-spacing: .2em; font-size: 18px; margin-bottom: 20px; }
.review-text { font-size: clamp(24px, 2.6vw, 38px); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 24px; }
.review-author { font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--mc-muted-dark); font-style: normal; }
.reviews .carousel-controls { display: flex; align-items: center; gap: 8px; margin-top: 40px; }
.reviews .carousel-controls button {
  width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--mc-white); border: 1px solid var(--mc-ink-line); font-size: 18px;
}
.reviews .carousel-controls button:hover { border-color: var(--mc-lime); color: var(--mc-lime); }
.reviews .source { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mc-muted-dark); }
.reviews .callout { font-size: 18px; font-weight: 300; color: var(--mc-text-dark-bg); }
.reviews .callout a { color: var(--mc-lime); }
@media (prefers-reduced-motion: reduce) { .reviews .carousel-item { transition: none; } }

/* ---------- Prices: sub-groups & descriptions ---------- */
.price-sub { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mc-muted); margin: 40px 0 0; }
.price-sub + .price-list { margin-top: 12px; }
.price-list dt .price-desc { display: block; margin-top: 6px; font-size: 14px; line-height: 1.6; font-weight: 300; color: var(--mc-muted); }
.price-list dt .price-desc p { margin: 0 0 .4rem; }
.price-list dt .price-desc p:last-child { margin-bottom: 0; }
.price-list dt .price-desc a { color: inherit; }
.price-thumb { display: inline-block; margin-top: 10px; border: 0; padding: 0; background: none; cursor: zoom-in; }
.price-thumb img { width: 88px; height: 88px; object-fit: cover; }
.extra-desc { font-size: 14px; line-height: 1.6; font-weight: 300; color: var(--mc-muted-dark); margin: 0 0 24px; }
.extra-desc p { margin: 0; }
.modal-mc .modal-content { border-radius: 0; border: 0; background: var(--mc-ink); color: var(--mc-white); }
.modal-mc .btn-close { filter: invert(1); opacity: 1; }
.modal-mc img { width: 100%; height: auto; }

/* ---------- Guides (CMS driven) ---------- */
.guide-excerpt { font-size: 15px; line-height: 1.65; font-weight: 300; color: var(--mc-muted); margin: 0; }
.featured-media .photo-ph { height: 100%; min-height: 320px; }
.article-media { margin-bottom: 40px; max-width: 760px; }
.article-media img { width: 100%; height: auto; }
.article-meta { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--mc-muted); }

/* ---------- Tension guide table (calculator page) ---------- */
.table-mc { width: 100%; border-collapse: collapse; font-size: 16px; }
.table-mc th { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 0 0 14px; border-bottom: 1px solid var(--mc-ink); text-align: left; }
.table-mc td { padding: 18px 0; border-bottom: 1px solid var(--mc-line); }
.table-mc td:last-child, .table-mc th:last-child { text-align: right; white-space: nowrap; }
.table-mc td:last-child { font-weight: 600; }

/* ---------- Contact ---------- */
.form-alert { padding: 24px 28px; border-left: 6px solid var(--mc-lime); background: var(--mc-grey-50); }
.form-alert.is-error { border-left-color: #b3261e; }
.form-alert h2 { font-size: 28px; font-weight: 600; letter-spacing: -.03em; margin: 0 0 8px; }
.form-alert p { margin: 0; font-weight: 300; }
.form-mc .field-validation-error { display: block; margin-top: .25rem; font-size: 13px; color: var(--bs-form-invalid-color); }
.form-mc .input-validation-error { border-bottom-color: var(--bs-form-invalid-color); }
.btn-whatsapp { background: transparent; color: var(--mc-white); border-color: var(--mc-ink-line); width: 100%; justify-content: flex-start; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 500; }
.btn-whatsapp:hover, .btn-whatsapp:focus-visible { border-color: var(--mc-lime); color: var(--mc-lime); }
.btn-whatsapp + .btn-whatsapp { margin-top: 8px; }
.grecaptcha-badge { visibility: hidden; } /* permitted by Google when the reCAPTCHA notice is shown next to the form */
.recaptcha-note { font-size: 12px; font-weight: 300; color: var(--mc-muted); }
.recaptcha-note a { color: inherit; }

/* ---------- 404: bouncing tennis ball (kept from the old site, recoloured) ---------- */
.nf-score { display: inline-flex; align-items: flex-end; gap: .08em; font-size: clamp(96px, 24vw, 220px); font-weight: 600; letter-spacing: -.05em; line-height: 1; color: var(--mc-ink); padding-top: .75em; position: relative; }
.nf-digit { display: block; line-height: .8; }
.nf-ball { position: relative; width: .72em; height: .72em; margin: 0 .02em; }
.nf-ball-bounce { position: absolute; inset: 0; animation: nf-bounce 1.1s infinite; }
.nf-ball-squash { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; animation: nf-squash 1.1s infinite; }
.nf-ball-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.nf-ball-seams { transform-origin: 50px 50px; animation: nf-spin 1.6s linear infinite; }
.nf-shadow { position: absolute; left: 10%; bottom: -.07em; width: 80%; height: .08em; border-radius: 50%; background: rgba(0, 0, 0, .25); animation: nf-shadow 1.1s infinite; }
.nf-court { height: 4px; max-width: 3.2em; margin: .03em 0 0; background: var(--mc-ink); font-size: clamp(96px, 24vw, 220px); }
@keyframes nf-bounce {
  0% { transform: translateY(-.9em); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  46% { transform: translateY(0); }
  54% { transform: translateY(0); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  100% { transform: translateY(-.9em); }
}
@keyframes nf-squash { 0%, 42%, 58%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.18, .8); } }
@keyframes nf-spin { to { transform: rotate(360deg); } }
@keyframes nf-shadow { 0%, 100% { transform: scaleX(.45); opacity: .35; } 50% { transform: scaleX(1.1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nf-ball-bounce, .nf-ball-squash, .nf-ball-seams, .nf-shadow { animation: none; } }

/* ---------- Back-to-top button (script from the DC Motor site) ---------- */
.back-to-top {
  position: fixed; right: 16px; bottom: 16px; z-index: 1040; width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mc-lime); color: var(--mc-ink); border: 1px solid var(--mc-ink); font-size: 20px; font-weight: 600;
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }
/* keep it clear of the cookie banner while that is open */
.consent.is-visible ~ .back-to-top { bottom: 200px; }

/* ---------- Fixes ---------- */
/* The design's ".site-footer a" (white, lime on hover) outranks .btn-lime, leaving white/lime text on the lime button */
.site-footer .btn-lime, .site-footer .btn-lime:hover, .site-footer .btn-lime:focus-visible { color: var(--mc-ink); }

/* Lime full stop on headings: the design paints the glyph background, which is taller than the headings' tight
   line-height, so on wrapped headings the lime block rose into the line above. An inline-block with a short line
   box keeps the block within its own line. */
.dot-lime { display: inline-block; line-height: .72; }

/* Machine note under the tension calculator result */
.result-note { font-size: 13px; line-height: 1.6; font-weight: 300; color: var(--mc-muted-dark); padding-top: 20px; border-top: 1px solid var(--mc-ink-line); }

/* ---------- Main menu: clearer current page ---------- */
/* current page = lime text, bolder weight and a lime bar under the link; parent section (e.g. Guides while
   reading a guide) = the same bar at half strength */
.site-header .nav-link { position: relative; }
.site-header .nav-link[aria-current="page"] { font-weight: 700; }
.site-header .nav-link[aria-current="page"]::after,
.site-header .nav-link.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--mc-lime);
}
.site-header .nav-link.active::after { opacity: .5; }
@media (min-width: 1200px) {
  /* sit the bar just under the text (the link has 10px bottom padding), not down on the header's bottom edge */
  .site-header .nav-link[aria-current="page"]::after, .site-header .nav-link.active::after { bottom: -4px; }
}
@media (max-width: 1199.98px) {
  /* collapsed phone/tablet menu: a bar down the left edge instead, with the text nudged across */
  .site-header .nav-link[aria-current="page"], .site-header .nav-link.active { padding-left: 16px !important; }
  .site-header .nav-link[aria-current="page"]::after, .site-header .nav-link.active::after {
    left: 0; right: auto; top: 10px; bottom: 10px; width: 4px; height: auto;
  }
}

/* Mobile menu: stop the logo jumping when the menu opens/closes. Bootstrap's navbar wraps the menu onto a second
   flex row, which shrank the first row from the 84px header height to the logo's height (a 16px jump). Fixing
   the logo row at 84px and packing rows to the top keeps the logo and toggler still. */
@media (max-width: 1199.98px) {
  .site-header .navbar { align-content: flex-start; }
  .site-header .brand-img { height: var(--header-h); display: flex; align-items: center; }
}