/* ==========================================================================
   GEAR ISSUES™
   Free Bike Shop Landing Page
   Visual System: Bike Workshop × Race Number × Service Tag
   ========================================================================== */


/* ==========================================================================
   ROOT
   ========================================================================== */

:root {

    --paper: #f1eadc;
    --paper-light: #fbf7ee;
    --paper-dark: #dfd2bc;

    --ink: #1d1d1a;
    --ink-soft: #393936;
    --ink-muted: #68665f;

    --red: #c64032;
    --red-dark: #8c2922;
    --red-light: #e06254;

    --orange: #d96d24;
    --orange-light: #ed9a52;

    --kraft: #caa66d;
    --kraft-light: #dfc394;
    --kraft-dark: #957145;

    --steel: #697177;
    --steel-light: #b7bec0;
    --steel-dark: #394047;

    --white: #fffdf8;

    --display: "Barlow Condensed", Impact, sans-serif;
    --body: "Manrope", Arial, sans-serif;
    --mono: "DM Mono", Consolas, monospace;

    --content: 1120px;
    --wide: 1320px;

    --side: clamp(20px, 4vw, 64px);

    --section-space: clamp(82px, 8vw, 132px);

    --border: 1px solid rgba(29, 29, 26, 0.28);
    --border-strong: 2px solid var(--ink);
    --border-heavy: 3px solid var(--ink);

    --shadow-small: 4px 4px 0 var(--ink);
    --shadow-medium: 7px 7px 0 var(--ink);
    --shadow-large: 11px 11px 0 var(--ink);

}


/* ==========================================================================
   RESET / BASE
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.65;
    overflow-x: hidden;
}


body.nav-open {
    overflow: hidden;
}


img {
    display: block;
    max-width: 100%;
}


a {
    color: inherit;
}


button,
input,
textarea,
select {
    font: inherit;
}


button,
a {
    -webkit-tap-highlight-color: transparent;
}


button {
    cursor: pointer;
}


address {
    font-style: normal;
}


::selection {
    background: var(--red);
    color: var(--white);
}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.skip-link {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 9999;
    padding: 11px 15px;
    background: var(--white);
    color: var(--ink);
    border: var(--border-heavy);
    box-shadow: var(--shadow-small);
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    text-decoration: none;
    transform: translateY(-180%);
    transition: transform 150ms ease;
}


.skip-link:focus {
    transform: translateY(0);
}


a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 4px;
}


/* ==========================================================================
   SHARED
   ========================================================================== */

.section-shell {
    width: min(var(--wide), calc(100% - (var(--side) * 2)));
    margin-inline: auto;
}


.eyebrow {
    margin: 0 0 18px;
    color: var(--red);
    font-family: var(--mono);
    font-size: 0.68rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


.button {
    min-height: 54px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--paper-light);
    color: var(--ink);
    border: var(--border-heavy);
    box-shadow: var(--shadow-small);
    font-family: var(--mono);
    font-size: 0.74rem;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition:
        transform 150ms ease,
        box-shadow 150ms ease,
        background 150ms ease,
        color 150ms ease;
}


.button:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--ink);
}


.button--primary {
    background: var(--red);
    color: var(--white);
}


.button--primary:hover {
    background: var(--red-dark);
}


.button--light {
    background: var(--white);
    color: var(--ink);
}


.section-heading {
    max-width: 850px;
    margin-bottom: clamp(46px, 5vw, 78px);
}


.section-heading h2,
.noise-board__header h2,
.why-us__content h2,
.visit__content h2,
.repair-request__intro h2 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(4rem, 7vw, 7rem);
    line-height: 0.85;
    letter-spacing: -0.045em;
    font-weight: 800;
    text-transform: uppercase;
}


.section-heading > p:last-child,
.noise-board__header > p:last-child {
    max-width: 700px;
    margin: 24px 0 0;
    color: var(--ink-soft);
    font-size: clamp(1rem, 1.4vw, 1.14rem);
}


.section-heading--split {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.58fr);
    gap: clamp(50px, 6vw, 90px);
    align-items: end;
}


.section-heading--split > p {
    margin: 0 0 7px;
    color: var(--ink-soft);
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--paper-light);
    border-bottom: var(--border-heavy);
}


.site-header__utility {
    min-height: 30px;
    padding: 0 var(--side);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    background: var(--ink);
    color: var(--white);
    font-family: var(--mono);
    font-size: 0.59rem;
    letter-spacing: 0.07em;
}


.site-header__main {
    min-height: 72px;
    padding: 0 var(--side);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
}


.brand {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
}


.brand__mark {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    background: var(--red);
    color: var(--white);
    border: var(--border-heavy);
    font-family: var(--display);
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 900;
    transform: rotate(-3deg);
}


.brand__text {
    display: grid;
    gap: 1px;
}


.brand__text strong {
    font-family: var(--display);
    font-size: 1.28rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.02em;
}


.brand__text small {
    font-family: var(--mono);
    font-size: 0.52rem;
    font-weight: 500;
    letter-spacing: 0.08em;
}


.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.8vw, 27px);
}


.site-nav a {
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
}


.site-nav a:not(.site-nav__urgent) {
    padding: 7px 0;
    border-bottom: 1px solid transparent;
}


.site-nav a:not(.site-nav__urgent):hover {
    border-color: var(--ink);
}


.site-nav__urgent {
    padding: 10px 13px;
    background: var(--red);
    color: var(--white);
    border: var(--border-heavy);
    box-shadow: 3px 3px 0 var(--ink);
    font-family: var(--mono);
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    text-transform: uppercase;
}


.menu-toggle {
    display: none;
    width: 46px;
    height: 44px;
    padding: 9px;
    background: var(--paper-light);
    border: var(--border-heavy);
}


.menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 5px 0;
    background: var(--ink);
}


/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
    padding: 0 var(--side);
    background:
        linear-gradient(
            rgba(29, 29, 26, 0.025) 1px,
            transparent 1px
        ),
        var(--paper);
    background-size: 100% 30px;
    border-bottom: var(--border-heavy);
}


.hero__inner {
    width: min(var(--wide), 100%);
    min-height: 760px;
    margin-inline: auto;
    padding: clamp(60px, 7vw, 100px) 0 clamp(56px, 6vw, 84px);
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(470px, 1.1fr);
    gap: clamp(50px, 6vw, 95px);
    align-items: center;
}


.hero__copy {
    position: relative;
}


.repair-tag {
    width: 164px;
    margin-bottom: 42px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--kraft);
    border: var(--border-heavy);
    box-shadow: var(--shadow-small);
    font-family: var(--mono);
    transform: rotate(-2deg);
}


.repair-tag span {
    font-size: 0.55rem;
    font-weight: 500;
}


.repair-tag strong {
    font-family: var(--display);
    font-size: 1.6rem;
    line-height: 1;
}


.hero h1 {
    max-width: 720px;
    margin: 0;
    font-family: var(--display);
    font-size: clamp(5rem, 7.3vw, 8.4rem);
    line-height: 0.78;
    letter-spacing: -0.05em;
    font-weight: 900;
    text-transform: uppercase;
}


.hero h1 em {
    display: block;
    margin-top: 22px;
    color: var(--red);
    font-style: normal;
}


.hero__intro {
    max-width: 640px;
    margin: 30px 0 0;
    color: var(--ink-soft);
    font-size: clamp(1rem, 1.3vw, 1.17rem);
}


.hero__actions {
    margin-top: 35px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}


.hero__status {
    margin-top: 46px;
    padding-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    border-top: var(--border);
    font-family: var(--mono);
    font-size: 0.59rem;
    font-weight: 500;
}


.hero__visual {
    position: relative;
    margin: 0;
    border: var(--border-heavy);
    box-shadow: var(--shadow-large);
    background: var(--ink);
    transform: rotate(1deg);
}


.hero__visual::before {
    content: "";
    position: absolute;
    top: -13px;
    left: 50px;
    z-index: 2;
    width: 120px;
    height: 25px;
    background: rgba(223, 195, 148, 0.88);
    transform: rotate(-3deg);
}


.hero__visual img {
    width: 100%;
    height: clamp(500px, 55vw, 680px);
    object-fit: cover;
    filter: saturate(0.9) contrast(1.03);
}


.hero__visual figcaption {
    position: absolute;
    right: -24px;
    bottom: 32px;
    width: min(340px, 80%);
    padding: 20px 22px 23px;
    background: var(--paper-light);
    border: var(--border-heavy);
    box-shadow: var(--shadow-medium);
    transform: rotate(-3deg);
}


.hero__visual figcaption span {
    color: var(--red);
    font-family: var(--mono);
    font-size: 0.61rem;
    font-weight: 500;
}


.hero__visual figcaption strong {
    display: block;
    margin-top: 8px;
    font-family: var(--display);
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 0.9;
    text-transform: uppercase;
}


.hero__visual figcaption em {
    display: inline-block;
    margin-top: 14px;
    padding: 5px 8px;
    background: var(--red);
    color: var(--white);
    font-family: var(--mono);
    font-size: 0.6rem;
    font-style: normal;
    transform: rotate(2deg);
}


.hero__ticker {
    width: min(var(--wide), 100%);
    min-height: 52px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-top: var(--border-heavy);
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}


.hero__ticker span:not(:last-child)::after {
    content: "•";
    margin-left: clamp(18px, 2.5vw, 40px);
    color: var(--red);
}


/* ==========================================================================
   SERVICES
   ========================================================================== */

.services {
    padding: var(--section-space) 0;
    background: var(--paper-light);
    border-bottom: var(--border-heavy);
}


.service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: var(--border-heavy);
    border-left: var(--border-heavy);
}


.service-card {
    position: relative;
    min-height: 350px;
    padding: 80px 26px 27px;
    display: flex;
    flex-direction: column;
    border-right: var(--border-heavy);
    border-bottom: var(--border-heavy);
    background: var(--paper);
}


.service-card:nth-child(even) {
    background: #eadfcb;
}


.service-card__number {
    position: absolute;
    top: 18px;
    left: 20px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--white);
    font-family: var(--display);
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 800;
}


.service-card h3 {
    margin: 0 0 17px;
    font-family: var(--display);
    font-size: clamp(2.6rem, 3.3vw, 3.7rem);
    line-height: 0.9;
    text-transform: uppercase;
}


.service-card p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.93rem;
}


.service-card a {
    margin-top: auto;
    padding-top: 28px;
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
}


.service-card a:hover {
    color: var(--red);
}


/* ==========================================================================
   NOISE DIAGNOSTIC
   ========================================================================== */

.noise-board {
    padding: var(--section-space) 0;
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(255, 255, 255, 0.045),
            transparent 25%
        ),
        var(--ink);
    color: var(--white);
    border-bottom: var(--border-heavy);
}


.noise-board__header {
    max-width: 900px;
    margin-bottom: 62px;
}


.noise-board__header .eyebrow {
    color: var(--orange-light);
}


.noise-board__header > p:last-child {
    color: rgba(255, 255, 255, 0.7);
}


.noise-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}


.noise-card {
    min-height: 320px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    background: #2b2b28;
    border: 1px solid rgba(255, 255, 255, 0.26);
}


.noise-card > span {
    color: var(--orange-light);
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 500;
}


.noise-card strong {
    margin-top: 55px;
    font-family: var(--display);
    font-size: clamp(2.8rem, 3.3vw, 4rem);
    line-height: 0.88;
    text-transform: uppercase;
}


.noise-card p {
    margin: auto 0 0;
    color: rgba(255, 255, 255, 0.67);
    font-size: 0.9rem;
}


.noise-card--danger {
    background: var(--red);
}


.noise-card--danger > span,
.noise-card--danger p {
    color: var(--white);
}


.noise-board__cta {
    margin-top: 35px;
    padding: 28px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border: 1px solid rgba(255, 255, 255, 0.38);
}


.noise-board__cta span {
    display: block;
    margin-bottom: 6px;
    color: var(--orange-light);
    font-family: var(--mono);
    font-size: 0.62rem;
}


.noise-board__cta strong {
    font-family: var(--display);
    font-size: clamp(1.8rem, 3vw, 3rem);
    line-height: 0.95;
    text-transform: uppercase;
}


/* ==========================================================================
   BIKE CATEGORIES
   ========================================================================== */

.bike-categories {
    padding: var(--section-space) 0;
    background: var(--kraft-light);
    border-bottom: var(--border-heavy);
}


.bike-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: var(--border-heavy);
    border-left: var(--border-heavy);
}


.bike-category {
    min-height: 255px;
    padding: 30px;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 28px;
    border-right: var(--border-heavy);
    border-bottom: var(--border-heavy);
    background: rgba(255, 253, 248, 0.24);
}


.bike-category__index {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    background: var(--red);
    color: var(--white);
    border: var(--border-heavy);
    box-shadow: var(--shadow-small);
    font-family: var(--display);
    font-size: 2rem;
    line-height: 1;
    font-weight: 900;
    transform: rotate(-3deg);
}


.bike-category h3 {
    margin: 0 0 16px;
    font-family: var(--display);
    font-size: clamp(3rem, 5vw, 5.2rem);
    line-height: 0.85;
    text-transform: uppercase;
}


.bike-category p {
    max-width: 440px;
    margin: 0;
    color: var(--ink-soft);
}


/* ==========================================================================
   WHY US
   ========================================================================== */

.why-us {
    padding: var(--section-space) 0;
    background: var(--paper-light);
    border-bottom: var(--border-heavy);
}


.why-us__layout {
    display: grid;
    grid-template-columns: minmax(360px, 0.84fr) minmax(0, 1.16fr);
    gap: clamp(56px, 7vw, 110px);
    align-items: center;
}


.why-us__photo {
    position: relative;
    margin: 0;
    border: var(--border-heavy);
    box-shadow: var(--shadow-large);
    transform: rotate(-1deg);
}


.why-us__photo::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: -12px;
    right: 38px;
    width: 110px;
    height: 24px;
    background: rgba(202, 166, 109, 0.88);
    transform: rotate(4deg);
}


.why-us__photo img {
    width: 100%;
    min-height: 620px;
    object-fit: cover;
}


.why-us__photo figcaption {
    position: absolute;
    left: -28px;
    bottom: 35px;
    padding: 10px 13px;
    background: var(--red);
    color: var(--white);
    border: var(--border-heavy);
    box-shadow: var(--shadow-small);
    font-family: var(--mono);
    font-size: 0.62rem;
    transform: rotate(3deg);
}


.why-us__intro {
    max-width: 660px;
    margin: 27px 0 44px;
    color: var(--ink-soft);
    font-size: 1.08rem;
}


.checklist {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--border-heavy);
}


.checklist li {
    padding: 25px 0;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 24px;
    border-bottom: var(--border);
}


.checklist li > span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: var(--border-heavy);
    font-family: var(--mono);
    font-size: 0.67rem;
    font-weight: 500;
}


.checklist strong {
    display: block;
    margin-bottom: 7px;
    font-family: var(--display);
    font-size: 1.8rem;
    line-height: 1;
    text-transform: uppercase;
}


.checklist p {
    max-width: 620px;
    margin: 0;
    color: var(--ink-soft);
}


/* ==========================================================================
   REVIEW STRIP
   ========================================================================== */

.review-strip {
    padding: clamp(55px, 6vw, 88px) 0;
    background: var(--red);
    color: var(--white);
    border-bottom: var(--border-heavy);
}


.review-strip .section-shell {
    display: grid;
    grid-template-columns: minmax(190px, 0.3fr) minmax(0, 1fr);
    gap: clamp(45px, 6vw, 90px);
    align-items: start;
}


.review-strip__rating span {
    display: block;
    margin-bottom: 13px;
    font-family: var(--mono);
    font-size: 0.63rem;
}


.review-strip__rating strong {
    display: block;
    font-size: 1.25rem;
    letter-spacing: 0.15em;
}


.review-strip blockquote {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(2.5rem, 4vw, 4.5rem);
    line-height: 0.96;
    font-weight: 700;
    text-transform: uppercase;
}


.review-strip blockquote footer {
    margin-top: 24px;
    font-family: var(--mono);
    font-size: 0.63rem;
    font-weight: 500;
}


/* ==========================================================================
   VISIT
   ========================================================================== */

.visit {
    padding: var(--section-space) 0;
    background: var(--paper);
    border-bottom: var(--border-heavy);
}


.visit__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.66fr);
    gap: clamp(60px, 7vw, 110px);
    align-items: start;
}


.visit__content > p:not(.eyebrow) {
    max-width: 670px;
    margin: 28px 0 0;
    color: var(--ink-soft);
}


.visit__contact {
    margin-top: 44px;
    padding-top: 26px;
    display: grid;
    gap: 9px;
    border-top: var(--border-heavy);
    font-family: var(--mono);
    font-size: 0.78rem;
}


.visit__contact a {
    width: fit-content;
    font-weight: 500;
    text-decoration: none;
}


.visit__contact a:hover {
    color: var(--red);
}


.visit__contact address {
    margin-top: 15px;
}


.hours-card {
    position: relative;
    padding: 70px 28px 28px;
    background: var(--kraft-light);
    border: var(--border-heavy);
    box-shadow: var(--shadow-large);
    transform: rotate(1deg);
}


.hours-card__tag {
    position: absolute;
    top: -17px;
    left: 24px;
    padding: 9px 13px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--ink);
    color: var(--white);
    border: var(--border-heavy);
    font-family: var(--mono);
    transform: rotate(-2deg);
}


.hours-card__tag span {
    font-size: 0.6rem;
}


.hours-card__tag strong {
    color: var(--orange-light);
    font-size: 0.64rem;
}


.hours-card dl {
    margin: 0;
}


.hours-card dl > div {
    padding: 13px 0;
    display: flex;
    justify-content: space-between;
    gap: 25px;
    border-bottom: 1px solid rgba(29, 29, 26, 0.3);
}


.hours-card dt {
    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
}


.hours-card dd {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.80rem;
    line-height: 1.3;
    font-weight: 500;
    text-align: right;
}


/* ==========================================================================
   REPAIR REQUEST
   ========================================================================== */

.repair-request {
    padding: var(--section-space) 0;
    background: var(--steel-dark);
    color: var(--white);
    border-bottom: var(--border-heavy);
}


.repair-request__layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.55fr) minmax(0, 1fr);
    gap: clamp(58px, 7vw, 105px);
    align-items: start;
}


.repair-request__intro .eyebrow {
    color: var(--orange-light);
}


.repair-request__intro > p:not(.eyebrow) {
    margin: 28px 0 0;
    color: rgba(255, 255, 255, 0.7);
}


.repair-ticket {
    margin-top: 44px;
    padding: 17px 18px;
    background: var(--kraft);
    color: var(--ink);
    border: var(--border-heavy);
    box-shadow: var(--shadow-small);
    transform: rotate(-2deg);
}


.repair-ticket span,
.repair-ticket small {
    display: block;
    font-family: var(--mono);
    font-size: 0.58rem;
}


.repair-ticket strong {
    display: block;
    margin: 8px 0;
    font-family: var(--display);
    font-size: 1.7rem;
    line-height: 0.95;
    text-transform: uppercase;
}


.repair-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--paper-light);
    color: var(--ink);
    border: var(--border-heavy);
    box-shadow: var(--shadow-large);
}


.repair-form__header {
    grid-column: 1 / -1;
    min-height: 48px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--ink);
    color: var(--white);
    font-family: var(--mono);
    font-size: 0.61rem;
}


.repair-form__field {
    padding: 24px;
    border-right: var(--border);
    border-bottom: var(--border);
}


.repair-form__field:nth-of-type(2n) {
    border-right: 0;
}


.repair-form__field--full {
    grid-column: 1 / -1;
    border-right: 0;
}


.repair-form label {
    display: block;
    margin-bottom: 10px;
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 500;
}


.repair-form input,
.repair-form textarea,
.repair-form select {
    width: 100%;
    padding: 11px 0;
    background: transparent;
    color: var(--ink);
    border: 0;
    border-bottom: 2px solid var(--ink);
    border-radius: 0;
    outline: none;
}


.repair-form textarea {
    resize: vertical;
}


.repair-form input:focus,
.repair-form textarea:focus,
.repair-form select:focus {
    border-bottom-color: var(--red);
}


.repair-form [aria-invalid="true"] {
    border-bottom-color: var(--red);
}


.repair-form__footer {
    grid-column: 1 / -1;
    padding: 24px;
}


.repair-form__footer button {
    min-height: 56px;
    padding: 0 22px;
    background: var(--red);
    color: var(--white);
    border: var(--border-heavy);
    box-shadow: var(--shadow-small);
    font-family: var(--mono);
    font-size: 0.71rem;
    font-weight: 500;
    text-transform: uppercase;
    transition:
        transform 150ms ease,
        box-shadow 150ms ease;
}


.repair-form__footer button:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-medium);
}


#form-status {
    min-height: 24px;
    margin: 18px 0 0;
    font-family: var(--mono);
    font-size: 0.67rem;
    font-weight: 500;
}


#form-status[data-status="error"] {
    color: var(--red-dark);
}


#form-status[data-status="success"] {
    color: #305b42;
}


/* ==========================================================================
   FINAL CTA
   ========================================================================== */

.final-cta {
    padding: clamp(90px, 10vw, 150px) 0;
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(29, 29, 26, 0.035) 0,
            rgba(29, 29, 26, 0.035) 2px,
            transparent 2px,
            transparent 12px
        ),
        var(--orange);
    border-bottom: var(--border-heavy);
}


.final-cta .section-shell {
    text-align: center;
}


.final-cta__stamp {
    display: inline-block;
    margin-bottom: 32px;
    padding: 8px 12px;
    background: var(--paper-light);
    border: var(--border-heavy);
    box-shadow: var(--shadow-small);
    font-family: var(--mono);
    font-size: 0.64rem;
    transform: rotate(-2deg);
}


.final-cta h2 {
    max-width: 1000px;
    margin: 0 auto 40px;
    font-family: var(--display);
    font-size: clamp(4.6rem, 9vw, 9.4rem);
    line-height: 0.78;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}


.final-cta h2 em {
    display: block;
    color: var(--paper-light);
    font-style: normal;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
    padding: 52px 0 27px;
    background: var(--ink);
    color: var(--white);
}


.site-footer__brand {
    padding-bottom: 28px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 35px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}


.site-footer__brand strong {
    font-family: var(--display);
    font-size: clamp(3rem, 6vw, 6.5rem);
    line-height: 0.82;
    text-transform: uppercase;
}


.site-footer__brand span {
    color: var(--orange-light);
    font-family: var(--display);
    font-size: clamp(1.5rem, 2.5vw, 2.5rem);
    font-weight: 600;
}


.site-footer__details {
    padding: 25px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    font-family: var(--mono);
    font-size: 0.66rem;
}


.site-footer__details a {
    text-decoration: none;
}


.site-footer__details a:hover {
    color: var(--orange-light);
}


.site-footer__legal {
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    color: rgba(255, 255, 255, 0.46);
    font-family: var(--mono);
    font-size: 0.59rem;
}


/* ==========================================================================
   COMPACT DESKTOP
   ========================================================================== */

@media (max-width: 1180px) {

    :root {
        --side: 30px;
    }


    .site-nav {
        gap: 12px;
    }


    .site-nav a {
        font-size: 0.69rem;
    }


    .hero__inner {
        grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
        gap: 50px;
    }


    .hero h1 {
        font-size: clamp(4.5rem, 7.2vw, 7rem);
    }


    .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .noise-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .noise-card {
        min-height: 300px;
    }

}


/* ==========================================================================
   TABLET / MOBILE NAV
   ========================================================================== */

@media (max-width: 820px) {

    :root {
        --side: 20px;
        --section-space: 82px;
    }


    .site-header__utility {
        min-height: 29px;
        padding: 0 14px;
        overflow-x: auto;
        justify-content: flex-start;
        white-space: nowrap;
    }


    .site-header__utility span:last-child {
        display: none;
    }


    .site-header__main {
        min-height: 66px;
        padding: 0 14px;
    }


    .menu-toggle {
        display: block;
        position: relative;
        z-index: 55;
    }


    .site-nav {
        position: fixed;
        inset: 95px 0 0;
        z-index: 50;
        padding: 28px 20px 40px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        overflow-y: auto;
        background: var(--paper-light);
        border-top: var(--border-heavy);
        transform: translateX(100%);
        transition: transform 220ms ease;
    }


    body.nav-open .site-nav {
        transform: translateX(0);
    }


    .site-nav a {
        padding: 17px 0;
        border-bottom: var(--border) !important;
        font-family: var(--display);
        font-size: 2rem;
        line-height: 1;
        font-weight: 700;
        text-transform: uppercase;
    }


    .site-nav__urgent {
        margin-top: 22px;
        padding: 16px !important;
        font-family: var(--mono) !important;
        font-size: 0.72rem !important;
        line-height: 1.5 !important;
        text-align: center;
    }


    .hero__inner {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 64px;
    }


    .hero__copy {
        max-width: 720px;
    }


    .hero h1 {
        font-size: clamp(5rem, 13vw, 7.7rem);
    }


    .hero__visual {
        width: min(680px, 100%);
        margin-inline: auto;
    }


    .hero__visual img {
        height: 600px;
    }


    .hero__ticker {
        overflow-x: auto;
        justify-content: flex-start;
        white-space: nowrap;
    }


    .hero__ticker span {
        flex: 0 0 auto;
    }


    .section-heading--split {
        grid-template-columns: 1fr;
        gap: 26px;
    }


    .section-heading h2,
    .noise-board__header h2,
    .why-us__content h2,
    .visit__content h2,
    .repair-request__intro h2 {
        font-size: clamp(4rem, 12vw, 6.5rem);
    }


    .bike-category-grid {
        grid-template-columns: 1fr;
    }


    .why-us__layout {
        grid-template-columns: 1fr;
    }


    .why-us__photo {
        width: min(620px, 100%);
        margin-inline: auto;
    }


    .why-us__photo img {
        min-height: 560px;
    }


    .review-strip .section-shell {
        grid-template-columns: 1fr;
        gap: 26px;
    }


    .visit__layout {
        grid-template-columns: 1fr;
    }


    .hours-card {
        width: min(620px, 100%);
    }


    .repair-request__layout {
        grid-template-columns: 1fr;
    }


    .repair-request__intro {
        max-width: 700px;
    }


    .repair-ticket {
        width: min(500px, 100%);
    }


    .site-footer__brand {
        display: block;
    }


    .site-footer__brand span {
        display: block;
        margin-top: 16px;
    }


    .site-footer__legal {
        flex-direction: column;
        gap: 10px;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 560px) {

    :root {
        --side: 14px;
        --section-space: 68px;
    }


    body {
        font-size: 15px;
    }


    .brand__mark {
        width: 38px;
        height: 38px;
        font-size: 1.2rem;
    }


    .brand__text strong {
        font-size: 1.02rem;
    }


    .brand__text small {
        font-size: 0.47rem;
    }


    .hero {
        padding-inline: 14px;
    }


    .hero__inner {
        padding-top: 48px;
        gap: 52px;
    }


    .repair-tag {
        margin-bottom: 34px;
    }


    .hero h1 {
        font-size: clamp(4.4rem, 17vw, 6.3rem);
    }


    .hero h1 em {
        margin-top: 16px;
    }


    .hero__actions {
        display: grid;
    }


    .button {
        width: 100%;
    }


    .hero__status {
        display: grid;
    }


    .hero__visual {
        box-shadow: 7px 7px 0 var(--ink);
    }


    .hero__visual img {
        height: 480px;
    }


    .hero__visual figcaption {
        right: -6px;
        bottom: 20px;
        width: 88%;
        padding: 17px;
    }


    .hero__visual figcaption strong {
        font-size: clamp(1.9rem, 9vw, 2.7rem);
    }


    .service-grid {
        grid-template-columns: 1fr;
    }


    .service-card {
        min-height: 295px;
    }


    .noise-grid {
        grid-template-columns: 1fr;
    }


    .noise-card {
        min-height: 260px;
    }


    .noise-card strong {
        margin-top: 35px;
    }


    .noise-board__cta {
        align-items: stretch;
        flex-direction: column;
    }


    .bike-category {
        min-height: auto;
        padding: 24px 20px;
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 17px;
    }


    .bike-category__index {
        width: 48px;
        height: 48px;
        font-size: 1.55rem;
    }


    .bike-category h3 {
        font-size: clamp(2.8rem, 14vw, 4.2rem);
    }


    .why-us__photo img {
        min-height: 450px;
    }


    .why-us__photo figcaption {
        left: -4px;
        bottom: 20px;
    }


    .checklist li {
        grid-template-columns: 45px minmax(0, 1fr);
        gap: 15px;
    }


    .checklist li > span {
        width: 38px;
        height: 38px;
    }


    .review-strip blockquote {
        font-size: clamp(2.2rem, 11vw, 3.3rem);
    }


    .hours-card {
        padding: 62px 20px 22px;
    }


    .hours-card dl > div {
        display: grid;
        gap: 2px;
    }


    .hours-card dd {
        text-align: left;
    }


    .repair-form {
        grid-template-columns: 1fr;
    }


    .repair-form__field,
    .repair-form__field:nth-of-type(2n) {
        grid-column: 1;
        border-right: 0;
    }


    .repair-form__header {
        padding: 0 15px;
    }


    .repair-form__field {
        padding: 21px 18px;
    }


    .repair-form__footer {
        padding: 21px 18px;
    }


    .repair-form__footer button {
        width: 100%;
    }


    .final-cta h2 {
        font-size: clamp(4.4rem, 18vw, 6.5rem);
    }


    .site-footer__brand strong {
        font-size: clamp(3.7rem, 17vw, 5.4rem);
    }


    .site-footer__details {
        display: grid;
        gap: 10px;
    }

}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 380px) {

    .brand__text small {
        display: none;
    }


    .hero h1 {
        font-size: 4rem;
    }


    .section-heading h2,
    .noise-board__header h2,
    .why-us__content h2,
    .visit__content h2,
    .repair-request__intro h2 {
        font-size: 3.7rem;
    }


    .hero__visual img {
        height: 420px;
    }


    .bike-category {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================================
   ULTRAWIDE CONTROL
   ========================================================================== */

@media (min-width: 1800px) {

    :root {
        --content: 1180px;
        --wide: 1380px;
        --side: max(70px, calc((100vw - 1540px) / 2));
    }


    .hero h1 {
        font-size: 8.2rem;
    }


    .hero__inner {
        min-height: 790px;
        gap: 92px;
    }


    .section-heading h2,
    .noise-board__header h2,
    .why-us__content h2,
    .visit__content h2,
    .repair-request__intro h2 {
        font-size: 6.6rem;
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}

/* ==========================================================================
   GEAR ISSUES™ — TYPOGRAPHY PASS 02
   Editorial Shop Hierarchy
   ========================================================================== */

:root {
    --editorial: "DM Serif Display", Georgia, "Times New Roman", serif;
}


/* --------------------------------------------------------------------------
   HERO
   Primary editorial voice
   -------------------------------------------------------------------------- */

.hero h1 {
    max-width: 700px;
    font-family: var(--editorial);
    font-size: clamp(4.4rem, 6.3vw, 7rem);
    line-height: 0.91;
    letter-spacing: -0.045em;
    font-weight: 400;
    text-transform: none;
}


.hero h1 em {
    display: block;
    margin-top: 22px;
    color: var(--red);
    font-family: var(--editorial);
    font-size: 0.72em;
    line-height: 0.96;
    letter-spacing: -0.025em;
    font-style: italic;
    font-weight: 400;
    text-transform: none;
}


/* Hero photograph quote:
   workshop voice, but no longer giant condensed shouting */

.hero__visual figcaption strong {
    font-family: var(--editorial);
    font-size: clamp(1.75rem, 2.5vw, 2.55rem);
    line-height: 1;
    letter-spacing: -0.025em;
    font-weight: 400;
    text-transform: none;
}


/* --------------------------------------------------------------------------
   MAJOR SECTION HEADINGS
   -------------------------------------------------------------------------- */

.section-heading h2,
.noise-board__header h2,
.why-us__content h2,
.visit__content h2,
.repair-request__intro h2 {
    font-family: var(--editorial);
    font-size: clamp(3.8rem, 5.8vw, 6rem);
    line-height: 0.94;
    letter-spacing: -0.04em;
    font-weight: 400;
    text-transform: none;
}


/* --------------------------------------------------------------------------
   SERVICE CARDS
   Clean modern secondary voice
   -------------------------------------------------------------------------- */

.service-card h3 {
    margin-bottom: 18px;
    font-family: var(--body);
    font-size: clamp(1.75rem, 2.2vw, 2.35rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
    font-weight: 700;
    text-transform: none;
}


/* --------------------------------------------------------------------------
   DIAGNOSTIC CARDS
   Serif gives this section a completely different rhythm
   -------------------------------------------------------------------------- */

.noise-card strong {
    margin-top: 48px;
    font-family: var(--editorial);
    font-size: clamp(2.25rem, 2.9vw, 3.25rem);
    line-height: 0.98;
    letter-spacing: -0.025em;
    font-weight: 400;
    text-transform: none;
}


.noise-board__cta strong {
    font-family: var(--body);
    font-size: clamp(1.4rem, 2vw, 1.85rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-weight: 700;
    text-transform: none;
}


/* --------------------------------------------------------------------------
   BIKE CATEGORIES
   -------------------------------------------------------------------------- */

.bike-category h3 {
    font-family: var(--editorial);
    font-size: clamp(2.8rem, 4.1vw, 4.25rem);
    line-height: 0.96;
    letter-spacing: -0.035em;
    font-weight: 400;
    text-transform: none;
}


/* --------------------------------------------------------------------------
   WHY US CHECKLIST
   -------------------------------------------------------------------------- */

.checklist strong {
    font-family: var(--body);
    font-size: 1.32rem;
    line-height: 1.15;
    letter-spacing: -0.025em;
    font-weight: 700;
    text-transform: none;
}


/* --------------------------------------------------------------------------
   CUSTOMER REVIEW
   -------------------------------------------------------------------------- */

.review-strip blockquote {
    font-family: var(--editorial);
    font-size: clamp(2.45rem, 3.7vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    font-weight: 400;
    text-transform: none;
}


/* --------------------------------------------------------------------------
   HOURS
   -------------------------------------------------------------------------- */

.hours-card dt {
    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: -0.015em;
    font-weight: 700;
    text-transform: none;
}


/* --------------------------------------------------------------------------
   FINAL CTA
   -------------------------------------------------------------------------- */

.final-cta h2 {
    max-width: 920px;
    font-family: var(--editorial);
    font-size: clamp(4.1rem, 7vw, 7.4rem);
    line-height: 0.9;
    letter-spacing: -0.045em;
    font-weight: 400;
    text-transform: none;
}


.final-cta h2 em {
    display: block;
    margin-top: 10px;
    color: var(--paper-light);
    font-family: var(--editorial);
    font-size: 0.76em;
    line-height: 0.96;
    font-style: italic;
    font-weight: 400;
    text-transform: none;
}


/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.site-footer__brand strong {
    font-family: var(--editorial);
    font-size: clamp(3.1rem, 5.2vw, 5.5rem);
    line-height: 0.92;
    letter-spacing: -0.035em;
    font-weight: 400;
    text-transform: none;
}


.site-footer__brand span {
    font-family: var(--editorial);
    font-size: clamp(1.5rem, 2.3vw, 2.2rem);
    line-height: 1;
    font-style: italic;
    font-weight: 400;
}


/* --------------------------------------------------------------------------
   MOBILE NAVIGATION
   Stop turning navigation into another billboard
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {

    .site-nav a {
        font-family: var(--body);
        font-size: 1.3rem;
        line-height: 1.2;
        letter-spacing: -0.02em;
        font-weight: 700;
        text-transform: none;
    }


    .site-nav__urgent {
        font-family: var(--mono) !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }


    .hero h1 {
        font-size: clamp(4.2rem, 11vw, 6.5rem);
    }


    .section-heading h2,
    .noise-board__header h2,
    .why-us__content h2,
    .visit__content h2,
    .repair-request__intro h2 {
        font-size: clamp(3.7rem, 10vw, 5.6rem);
    }

}


/* --------------------------------------------------------------------------
   SMALL MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {

    .hero h1 {
        font-size: clamp(3.75rem, 14vw, 5rem);
        line-height: 0.94;
    }


    .hero h1 em {
        margin-top: 16px;
        font-size: 0.74em;
    }


    .section-heading h2,
    .noise-board__header h2,
    .why-us__content h2,
    .visit__content h2,
    .repair-request__intro h2 {
        font-size: clamp(3.3rem, 12vw, 4.7rem);
        line-height: 0.96;
    }


    .final-cta h2 {
        font-size: clamp(3.7rem, 14vw, 5.2rem);
    }


    .site-footer__brand strong {
        font-size: clamp(3.4rem, 14vw, 4.8rem);
    }

}


/* --------------------------------------------------------------------------
   VERY SMALL MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 380px) {

    .hero h1 {
        font-size: 3.55rem;
    }


    .section-heading h2,
    .noise-board__header h2,
    .why-us__content h2,
    .visit__content h2,
    .repair-request__intro h2 {
        font-size: 3.15rem;
    }

}


/* --------------------------------------------------------------------------
   ULTRAWIDE
   -------------------------------------------------------------------------- */

@media (min-width: 1800px) {

    .hero h1 {
        font-size: 7.2rem;
    }


    .section-heading h2,
    .noise-board__header h2,
    .why-us__content h2,
    .visit__content h2,
    .repair-request__intro h2 {
        font-size: 6.1rem;
    }

}

/* ==========================================================================
   END GEAR ISSUES™ — TYPOGRAPHY PASS 02
   ========================================================================== */


/* GEAR ISSUES WIDE WIDTH START */

/* ==========================================================
   LARGE DESKTOP
   Preserve normal desktop.
   Begin tightening once viewport becomes genuinely wide.
   ========================================================== */

@media (min-width: 1440px) {

    :root {
        --wide: 1200px;
        --content: 1080px;
    }

}


/* ==========================================================
   ULTRAWIDE
   Keep content comfortably centered instead of stretching.
   ========================================================== */

@media (min-width: 1800px) {

    :root {
        --wide: 1240px;
        --content: 1120px;
        --side: max(
            90px,
            calc((100vw - 1420px) / 2)
        );
    }

}


/* ==========================================================
   VERY WIDE / 2K+
   Stop the site from continuing to spread outward.
   ========================================================== */

@media (min-width: 2200px) {

    :root {
        --wide: 1280px;
        --content: 1140px;
        --side: max(
            120px,
            calc((100vw - 1480px) / 2)
        );
    }

}

/* GEAR ISSUES WIDE WIDTH END */


/* GEAR ISSUES WIDE TYPE START */


/* ==========================================================
   LARGE DESKTOP — 1440+
   ========================================================== */

@media (min-width: 1440px) {

    .hero h1 {
        font-size: 4.9rem;
        line-height: 0.94;
        max-width: 620px;
    }

    .hero h1 em {
        font-size: 0.70em;
        line-height: 1;
    }

    .hero__visual figcaption strong {
        font-size: 2rem;
    }

    .section-heading h2,
    .noise-board__header h2,
    .why-us__content h2,
    .visit__content h2,
    .repair-request__intro h2 {
        font-size: 4.7rem;
        line-height: 0.97;
    }

    .bike-category h3 {
        font-size: 3.45rem;
    }

    .review-strip blockquote {
        font-size: 3.25rem;
    }

    .final-cta h2 {
        font-size: 5.8rem;
    }

    .site-footer__brand strong {
        font-size: 4.6rem;
    }

}


/* ==========================================================
   ULTRAWIDE — 1800+
   Slight increase, but never billboard-sized
   ========================================================== */

@media (min-width: 1800px) {

    .hero h1 {
        font-size: 5.25rem;
        max-width: 650px;
    }

    .section-heading h2,
    .noise-board__header h2,
    .why-us__content h2,
    .visit__content h2,
    .repair-request__intro h2 {
        font-size: 4.95rem;
    }

    .bike-category h3 {
        font-size: 3.65rem;
    }

    .review-strip blockquote {
        font-size: 3.45rem;
    }

    .final-cta h2 {
        font-size: 6.1rem;
    }

    .site-footer__brand strong {
        font-size: 4.85rem;
    }

}


/* GEAR ISSUES WIDE TYPE END */


/* GEAR ISSUES CONTACT INFO START */

.visit__contact {
    margin-top: 44px;
    padding-top: 28px;
    display: grid;
    gap: 14px;
    border-top: var(--border-heavy);
    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.5;
}


/* Phone + email */

.visit__contact a {
    width: fit-content;
    color: var(--ink);
    font-family: var(--body);
    font-size: clamp(1.1rem, 1.35vw, 1.3rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color 150ms ease;
}


.visit__contact a:hover {
    color: var(--red);
}


/* Physical address */

.visit__contact address {
    margin-top: 10px;
    color: var(--ink-soft);
    font-family: var(--body);
    font-size: clamp(1rem, 1.15vw, 1.12rem);
    line-height: 1.55;
    font-weight: 600;
}


/* Mobile */

@media (max-width: 560px) {

    .visit__contact {
        gap: 13px;
    }

    .visit__contact a {
        font-size: 1.12rem;
    }

    .visit__contact address {
        font-size: 1rem;
    }

}

/* GEAR ISSUES CONTACT INFO END */


/* GEAR ISSUES REPAIR FORM START */


/* ==========================================================
   FORM HEADER
   ========================================================== */

.repair-form__header {
    min-height: 52px;
    padding-inline: 22px;
    font-size: 0.68rem;
    letter-spacing: 0.035em;
}


/* ==========================================================
   FIELD SPACING
   ========================================================== */

.repair-form__field {
    padding: 26px 26px 22px;
}


/* ==========================================================
   FIELD LABELS
   ========================================================== */

.repair-form label {
    margin-bottom: 13px;
    font-family: var(--body);
    font-size: 0.78rem;
    line-height: 1.3;
    letter-spacing: 0;
    font-weight: 700;
}


/* ==========================================================
   INPUT / SELECT / TEXTAREA
   ========================================================== */

.repair-form input,
.repair-form textarea,
.repair-form select {
    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.45;
}


.repair-form input,
.repair-form select {
    min-height: 46px;
    padding: 8px 0 11px;
}


.repair-form textarea {
    min-height: 155px;
    padding: 8px 0 12px;
    resize: vertical;
}


/* Placeholder readability */

.repair-form input::placeholder,
.repair-form textarea::placeholder {
    color: var(--ink-muted);
    opacity: 0.78;
}


/* ==========================================================
   FULL-WIDTH MESSAGE FIELD
   ========================================================== */

.repair-form__field--full {
    padding-top: 25px;
    padding-bottom: 24px;
}


/* ==========================================================
   FORM FOOTER
   ========================================================== */

.repair-form__footer {
    padding: 24px 26px 28px;
}


.repair-form__footer button {
    min-height: 58px;
    padding-inline: 25px;
    font-size: 0.74rem;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 560px) {

    .repair-form__field {
        padding: 22px 18px 20px;
    }

    .repair-form label {
        font-size: 0.8rem;
    }

    .repair-form input,
    .repair-form textarea,
    .repair-form select {
        font-size: 1rem;
    }

    .repair-form textarea {
        min-height: 140px;
    }

    .repair-form__footer {
        padding: 22px 18px 24px;
    }

}


/* GEAR ISSUES REPAIR FORM END */





/* GEAR ISSUES ESTIMATE SIZE START */

.repair-ticket span {
    font-size: 0.72rem;
}

.repair-ticket strong {
    font-size: 2rem;
}

.repair-ticket small {
    font-size: 0.72rem;
}

/* GEAR ISSUES ESTIMATE SIZE END */


/* GEAR ISSUES ESTIMATE STYLE RESTORE START */

.repair-ticket span {
    font-family: var(--mono);
    font-weight: 400;
    font-style: normal;
    text-transform: none;
}

.repair-ticket strong {
    font-family: var(--display);
    line-height: 0.95;
    font-weight: 700;
    font-style: normal;
    text-transform: none;
}

.repair-ticket small {
    font-family: var(--mono);
    font-weight: 400;
    font-style: normal;
    text-transform: none;
}

/* GEAR ISSUES ESTIMATE STYLE RESTORE END */