/* ==========================================================================
   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 */


/* GEAR ISSUES PREMIUM HOME START */


/* ==========================================================
   PREMIUM FOUNDATION
   ========================================================== */

.premium-home {
    background:
        linear-gradient(
            rgba(29, 29, 26, 0.025) 1px,
            transparent 1px
        ),
        var(--paper-light);
    background-size: 100% 32px;
    color: var(--ink);
}

.premium-home main {
    overflow: hidden;
}

.premium-home .eyebrow {
    margin: 0 0 18px;
    color: var(--red);
    font-family: var(--mono);
    font-size: 0.7rem;
    line-height: 1.45;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.premium-home .text-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.72rem;
    line-height: 1.3;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.035em;
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px;
}

.premium-home .text-link:hover {
    color: var(--red);
}


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

.premium-home .site-header {
    z-index: 1000;
}

.premium-home .site-header__main {
    width: min(
        var(--wide),
        calc(100% - (var(--side) * 2))
    );
}

.premium-home .site-nav {
    gap: clamp(18px, 2vw, 30px);
}

.premium-home .site-nav > a:not(.site-nav__cta) {
    font-family: var(--body);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.015em;
}

.premium-home .site-nav__cta {
    margin-left: 6px;
}


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

.premium-hero {
    position: relative;
    padding:
        clamp(64px, 6.5vw, 104px)
        0
        clamp(76px, 7vw, 116px);
}

.premium-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 31px,
            rgba(29, 29, 26, 0.035) 32px
        );
}

.premium-hero__grid {
    position: relative;
    z-index: 1;
    width: min(
        var(--wide),
        calc(100% - (var(--side) * 2))
    );
    margin-inline: auto;
    display: grid;
    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(520px, 1.12fr);
    gap: clamp(52px, 6vw, 92px);
    align-items: center;
}

.premium-hero__content {
    position: relative;
}

.premium-hero__ticket {
    width: fit-content;
    min-width: 190px;
    margin-bottom: 38px;
    padding: 15px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    background: var(--kraft-light);
    border: 2px solid var(--ink);
    box-shadow:
        5px 5px 0 var(--ink);
    transform: rotate(-1.3deg);
}

.premium-hero__ticket span {
    font-family: var(--mono);
    font-size: 0.62rem;
    line-height: 1;
    text-transform: uppercase;
}

.premium-hero__ticket strong {
    font-family: var(--display);
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 800;
}

.premium-hero h1 {
    max-width: 690px;
    margin: 0;
    font-family: var(--editorial);
    font-size: clamp(4.6rem, 6.8vw, 7.4rem);
    line-height: 0.88;
    letter-spacing: -0.055em;
    font-weight: 400;
    text-transform: none;
}

.premium-hero h1 em {
    display: block;
    margin-top: 14px;
    color: var(--red);
    font-family: var(--editorial);
    font-size: 0.68em;
    line-height: 0.98;
    font-weight: 400;
    font-style: italic;
    letter-spacing: -0.04em;
    text-transform: none;
}

.premium-hero__lead {
    max-width: 650px;
    margin: 30px 0 0;
    font-family: var(--body);
    font-size: clamp(1rem, 1.25vw, 1.13rem);
    line-height: 1.75;
}

.premium-hero__actions {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.premium-hero__quick-info {
    margin-top: 44px;
    padding-top: 20px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid rgba(29, 29, 26, 0.35);
}

.premium-hero__quick-info > div {
    min-height: 76px;
    padding: 0 18px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border-left: 1px solid rgba(29, 29, 26, 0.2);
}

.premium-hero__quick-info > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.premium-hero__quick-info span {
    color: var(--ink-muted);
    font-family: var(--mono);
    font-size: 0.58rem;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.premium-hero__quick-info strong {
    font-family: var(--body);
    font-size: 0.78rem;
    line-height: 1.45;
}

.premium-hero__visual {
    position: relative;
    margin: 0;
    padding: 10px 12px 12px 10px;
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow:
        11px 12px 0 var(--ink);
    transform: rotate(0.6deg);
}

.premium-hero__visual::before {
    content: "";
    position: absolute;
    top: -13px;
    left: 38%;
    width: 118px;
    height: 28px;
    z-index: 5;
    background: rgba(223, 195, 148, 0.78);
    transform: rotate(-1.5deg);
}

.premium-hero__visual img {
    display: block;
    width: 100%;
    height: clamp(520px, 52vw, 710px);
    object-fit: cover;
    object-position: center;
}

.premium-hero__photo-tag {
    position: absolute;
    top: 28px;
    left: -18px;
    z-index: 6;
    padding: 10px 13px;
    background: var(--ink);
    color: var(--paper-light);
    border: 1px solid var(--paper-light);
    font-family: var(--mono);
    font-size: 0.59rem;
    line-height: 1;
    text-transform: uppercase;
    transform: rotate(-2deg);
}

.premium-hero__visual figcaption {
    position: absolute;
    right: -26px;
    bottom: 28px;
    width: min(390px, 72%);
    padding: 22px 24px 23px;
    background: var(--paper-light);
    border: 2px solid var(--ink);
    box-shadow:
        7px 7px 0 var(--ink);
    transform: rotate(-1.1deg);
}

.premium-hero__visual figcaption span {
    display: block;
    margin-bottom: 10px;
    color: var(--red);
    font-family: var(--mono);
    font-size: 0.6rem;
    line-height: 1.2;
    text-transform: uppercase;
}

.premium-hero__visual figcaption strong {
    display: block;
    font-family: var(--editorial);
    font-size: clamp(1.55rem, 2vw, 2.2rem);
    line-height: 1;
    font-weight: 400;
}

.premium-hero__visual figcaption small {
    display: block;
    margin-top: 12px;
    font-family: var(--body);
    font-size: 0.78rem;
    line-height: 1.45;
}


/* ==========================================================
   SHOP STATUS STRIP
   ========================================================== */

.shop-status {
    overflow: hidden;
    background: var(--ink);
    color: var(--paper-light);
    border-block:
        2px solid var(--ink);
}

.shop-status__track {
    width: max-content;
    min-width: 100%;
    padding: 17px var(--side);
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 38px;
}

.shop-status__track span {
    display: inline-flex;
    align-items: center;
    gap: 38px;
    font-family: var(--mono);
    font-size: 0.65rem;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.shop-status__track span::after {
    content: "/";
    color: var(--orange-light);
}


/* ==========================================================
   GENERIC PREMIUM SECTIONS
   ========================================================== */

.premium-section {
    position: relative;
    padding:
        var(--section-space)
        0;
}

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

.premium-section__header {
    margin-bottom: clamp(44px, 5vw, 72px);
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(280px, 0.8fr);
    gap: clamp(40px, 7vw, 100px);
    align-items: end;
}

.premium-section__header h2,
.repair-department h2,
.diagnostic-teaser h2,
.premium-why-us h2,
.shop-story h2,
.premium-visit h2,
.premium-final-cta h2 {
    margin: 0;
    font-family: var(--editorial);
    font-size: clamp(3.7rem, 5.7vw, 6rem);
    line-height: 0.94;
    letter-spacing: -0.045em;
    font-weight: 400;
    text-transform: none;
}

.premium-section__intro {
    max-width: 440px;
}

.premium-section__intro p {
    margin: 0 0 22px;
    font-size: 1rem;
    line-height: 1.75;
}


/* ==========================================================
   FEATURED BIKES
   ========================================================== */

.featured-bikes {
    background: var(--paper-light);
}

.featured-bike-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border:
        2px solid var(--ink);
}

.featured-bike-card {
    min-height: 430px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--paper);
    border-left:
        2px solid var(--ink);
}

.featured-bike-card:first-child {
    border-left: 0;
}

.featured-bike-card:nth-child(2) {
    background: var(--paper-dark);
}

.featured-bike-card__number {
    width: 48px;
    height: 48px;
    margin-bottom: 34px;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--paper-light);
    border: 2px solid var(--ink);
    box-shadow:
        4px 4px 0 var(--red);
    font-family: var(--display);
    font-size: 1.35rem;
    font-weight: 800;
}

.featured-bike-card__meta {
    margin-bottom: 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--mono);
    font-size: 0.59rem;
    line-height: 1.4;
    text-transform: uppercase;
}

.featured-bike-card__meta span:last-child {
    color: var(--ink-muted);
}

.featured-bike-card h3 {
    margin: 0 0 18px;
    font-family: var(--editorial);
    font-size: clamp(2.4rem, 3.2vw, 3.55rem);
    line-height: 0.95;
    font-weight: 400;
}

.featured-bike-card p {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.7;
}

.featured-bike-card__footer {
    margin-top: auto;
    padding-top: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top:
        1px solid rgba(29, 29, 26, 0.22);
}

.featured-bike-card__footer strong {
    font-family: var(--body);
    font-size: 1rem;
}

.featured-bike-card__footer a {
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.65rem;
    text-decoration: none;
    text-transform: uppercase;
}

.featured-bike-card__footer a:hover {
    color: var(--red);
}


/* ==========================================================
   REPAIR DEPARTMENT
   ========================================================== */

.repair-department {
    background: var(--steel-dark);
    color: var(--paper-light);
}

.repair-department__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 0.78fr)
        minmax(520px, 1.22fr);
    gap: clamp(58px, 7vw, 108px);
    align-items: start;
}

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

.repair-department h2 {
    color: var(--paper-light);
}

.repair-department h2 em {
    display: block;
    margin-top: 10px;
    color: var(--orange-light);
    font-size: 0.72em;
    font-weight: 400;
}

.repair-department__lead {
    max-width: 600px;
    margin: 28px 0 0;
    font-size: 1rem;
    line-height: 1.8;
}

.repair-department__actions {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}

.repair-department .text-link {
    color: var(--paper-light);
}

.repair-menu {
    border:
        2px solid var(--paper-light);
}

.repair-menu__item {
    min-height: 132px;
    padding: 24px 26px;
    display: grid;
    grid-template-columns:
        42px
        minmax(0, 1fr)
        auto;
    gap: 20px;
    align-items: center;
    border-top:
        1px solid rgba(251, 247, 238, 0.35);
}

.repair-menu__item:first-child {
    border-top: 0;
}

.repair-menu__item > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border:
        1px solid var(--paper-light);
    font-family: var(--mono);
    font-size: 0.62rem;
}

.repair-menu__item h3 {
    margin: 0 0 6px;
    font-family: var(--body);
    font-size: 1.08rem;
    font-weight: 700;
}

.repair-menu__item p {
    margin: 0;
    color: rgba(251, 247, 238, 0.78);
    font-size: 0.88rem;
    line-height: 1.55;
}

.repair-menu__item > strong {
    color: var(--orange-light);
    font-family: var(--mono);
    font-size: 0.67rem;
    text-align: right;
    text-transform: uppercase;
}

.repair-menu__item--urgent {
    background: var(--red);
}

.repair-menu__item--urgent > strong {
    color: var(--paper-light);
}


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

.specialty-services {
    background: var(--kraft-light);
}

.specialty-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    border:
        2px solid var(--ink);
}

.specialty-card {
    min-height: 350px;
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    background:
        rgba(251, 247, 238, 0.36);
    border-left:
        1px solid var(--ink);
}

.specialty-card:first-child {
    border-left: 0;
}

.specialty-card__index {
    width: fit-content;
    margin-bottom: 56px;
    padding: 8px 10px;
    background: var(--red);
    color: var(--paper-light);
    border: 2px solid var(--ink);
    box-shadow:
        3px 3px 0 var(--ink);
    font-family: var(--mono);
    font-size: 0.65rem;
}

.specialty-card h3 {
    margin: 0 0 16px;
    font-family: var(--editorial);
    font-size: clamp(2rem, 2.6vw, 2.75rem);
    line-height: 1;
    font-weight: 400;
}

.specialty-card p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.7;
}

.specialty-card a {
    margin-top: auto;
    padding-top: 28px;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.63rem;
    text-decoration: none;
    text-transform: uppercase;
}

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


/* ==========================================================
   DIAGNOSTIC TEASER
   ========================================================== */

.diagnostic-teaser {
    background: var(--ink);
    color: var(--paper-light);
}

.diagnostic-teaser__grid {
    display: grid;
    grid-template-columns:
        minmax(300px, 0.62fr)
        minmax(0, 1.38fr);
    gap: clamp(58px, 8vw, 120px);
    align-items: start;
}

.diagnostic-teaser h2 {
    color: var(--paper-light);
}

.diagnostic-teaser__grid > div:first-child > p:last-child {
    max-width: 430px;
    margin: 24px 0 0;
    color: rgba(251, 247, 238, 0.8);
    font-size: 1rem;
    line-height: 1.75;
}

.diagnostic-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border:
        1px solid rgba(251, 247, 238, 0.45);
}

.diagnostic-option {
    min-height: 260px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    color: var(--paper-light);
    border:
        1px solid rgba(251, 247, 238, 0.28);
    text-decoration: none;
    transition:
        background 160ms ease,
        color 160ms ease;
}

.diagnostic-option:hover {
    background: var(--paper-light);
    color: var(--ink);
}

.diagnostic-option > span {
    color: var(--orange-light);
    font-family: var(--mono);
    font-size: 0.6rem;
}

.diagnostic-option strong {
    margin-top: 52px;
    font-family: var(--editorial);
    font-size: clamp(2rem, 2.6vw, 2.8rem);
    line-height: 1;
    font-weight: 400;
}

.diagnostic-option small {
    margin-top: auto;
    padding-top: 28px;
    font-family: var(--body);
    font-size: 0.8rem;
    line-height: 1.6;
}

.diagnostic-option--alert {
    background: var(--red);
}

.diagnostic-option--alert > span {
    color: var(--paper-light);
}


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

.premium-why-us {
    background: var(--paper-light);
}

.premium-why-us__grid {
    display: grid;
    grid-template-columns:
        minmax(420px, 0.88fr)
        minmax(0, 1.12fr);
    gap: clamp(62px, 8vw, 120px);
    align-items: center;
}

.premium-why-us__visual {
    position: relative;
    margin: 0;
    padding: 9px;
    background: var(--paper);
    border:
        2px solid var(--ink);
    box-shadow:
        11px 12px 0 var(--ink);
    transform: rotate(-0.7deg);
}

.premium-why-us__visual::before {
    content: "";
    position: absolute;
    top: -14px;
    right: 29%;
    width: 110px;
    height: 28px;
    z-index: 4;
    background: rgba(223, 195, 148, 0.8);
    transform: rotate(2deg);
}

.premium-why-us__visual img {
    display: block;
    width: 100%;
    height: clamp(540px, 52vw, 720px);
    object-fit: cover;
}

.premium-why-us__visual figcaption {
    position: absolute;
    left: -18px;
    bottom: 28px;
    padding: 12px 16px;
    background: var(--red);
    color: var(--paper-light);
    border:
        2px solid var(--ink);
    box-shadow:
        4px 4px 0 var(--ink);
    font-family: var(--mono);
    font-size: 0.61rem;
    text-transform: uppercase;
    transform: rotate(1.5deg);
}

.premium-why-us__lead {
    max-width: 660px;
    margin: 26px 0 0;
    font-size: 1.02rem;
    line-height: 1.75;
}

.premium-proof-list {
    margin-top: 40px;
    border-top:
        2px solid var(--ink);
}

.premium-proof-list article {
    padding: 25px 0;
    display: grid;
    grid-template-columns:
        52px
        minmax(0, 1fr);
    gap: 28px;
    border-bottom:
        1px solid rgba(29, 29, 26, 0.3);
}

.premium-proof-list article > span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border:
        2px solid var(--ink);
    font-family: var(--mono);
    font-size: 0.61rem;
}

.premium-proof-list h3 {
    margin: 0 0 7px;
    font-family: var(--body);
    font-size: 1.08rem;
    font-weight: 700;
}

.premium-proof-list p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.65;
}

.premium-why-us__content > .text-link {
    margin-top: 30px;
}


/* ==========================================================
   SHOP STORY
   ========================================================== */

.shop-story {
    background: var(--paper-dark);
}

.shop-story__grid {
    display: grid;
    grid-template-columns:
        150px
        minmax(0, 0.9fr)
        minmax(0, 0.75fr);
    gap: clamp(40px, 6vw, 90px);
    align-items: start;
}

.shop-story__stamp {
    width: 112px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    background: var(--red);
    color: var(--paper-light);
    border:
        3px solid var(--ink);
    box-shadow:
        7px 7px 0 var(--ink);
    font-family: var(--display);
    font-size: 1.4rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-4deg);
}

.shop-story h2 em {
    display: block;
    margin-top: 8px;
    color: var(--red);
    font-weight: 400;
}

.shop-story__copy p {
    margin: 0 0 20px;
    font-size: 0.96rem;
    line-height: 1.78;
}

.shop-story__copy .button {
    margin-top: 10px;
}


/* ==========================================================
   REVIEWS
   ========================================================== */

.premium-reviews {
    background: var(--paper-light);
}

.review-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    border:
        2px solid var(--ink);
}

.review-card {
    min-height: 390px;
    padding: 29px;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border-left:
        1px solid var(--ink);
}

.review-card:first-child {
    border-left: 0;
}

.review-card:nth-child(2) {
    background: var(--paper-dark);
}

.review-card__stars {
    color: var(--red);
    font-size: 1rem;
    letter-spacing: 0.12em;
}

.review-card blockquote {
    margin: 46px 0 0;
    font-family: var(--editorial);
    font-size: clamp(1.75rem, 2.3vw, 2.5rem);
    line-height: 1.12;
    font-weight: 400;
}

.review-card footer {
    margin-top: auto;
    padding-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-top:
        1px solid rgba(29, 29, 26, 0.25);
}

.review-card footer strong {
    font-family: var(--body);
    font-size: 0.8rem;
}

.review-card footer span {
    color: var(--ink-muted);
    font-family: var(--mono);
    font-size: 0.58rem;
    line-height: 1.5;
    text-transform: uppercase;
}


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

.premium-visit {
    background: var(--steel-dark);
    color: var(--paper-light);
}

.premium-visit__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(400px, 0.72fr);
    gap: clamp(60px, 8vw, 120px);
    align-items: start;
}

.premium-visit h2 {
    color: var(--paper-light);
}

.premium-visit h2 em {
    display: block;
    margin-top: 10px;
    color: var(--orange-light);
    font-size: 0.74em;
    font-weight: 400;
}

.premium-visit__content > p:not(.eyebrow) {
    max-width: 650px;
    margin: 28px 0 0;
    color: rgba(251, 247, 238, 0.82);
    font-size: 1rem;
    line-height: 1.75;
}

.premium-visit .visit__contact {
    margin-top: 38px;
    border-top-color: rgba(251, 247, 238, 0.65);
}

.premium-visit .visit__contact a {
    color: var(--paper-light);
}

.premium-visit .visit__contact a:hover {
    color: var(--orange-light);
}

.premium-visit .visit__contact address {
    color: rgba(251, 247, 238, 0.82);
}

.premium-visit__actions {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.premium-visit .button--secondary {
    background: transparent;
    color: var(--paper-light);
    border-color: var(--paper-light);
    box-shadow:
        4px 4px 0 var(--paper-light);
}

.premium-hours {
    background: var(--paper-light);
    color: var(--ink);
    border:
        2px solid var(--ink);
    box-shadow:
        9px 9px 0 var(--ink);
    transform: rotate(0.7deg);
}

.premium-hours__note {
    padding: 20px 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--kraft-light);
    border-top:
        2px solid var(--ink);
}

.premium-hours__note span {
    font-family: var(--mono);
    font-size: 0.59rem;
    text-transform: uppercase;
}

.premium-hours__note strong {
    font-family: var(--body);
    font-size: 0.85rem;
}


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

.premium-final-cta {
    position: relative;
    overflow: hidden;
    padding:
        clamp(90px, 10vw, 150px)
        var(--side);
    background: var(--orange);
    color: var(--ink);
    text-align: center;
    border-top:
        2px solid var(--ink);
}

.premium-final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.24;
    background:
        repeating-linear-gradient(
            135deg,
            transparent 0,
            transparent 11px,
            rgba(29, 29, 26, 0.32) 12px,
            rgba(29, 29, 26, 0.32) 13px
        );
}

.premium-final-cta__inner {
    position: relative;
    z-index: 1;
    width: min(980px, 100%);
    margin-inline: auto;
}

.premium-final-cta__ticket {
    display: inline-block;
    margin-bottom: 32px;
    padding: 11px 15px;
    background: var(--paper-light);
    border:
        2px solid var(--ink);
    box-shadow:
        4px 4px 0 var(--ink);
    font-family: var(--mono);
    font-size: 0.63rem;
    text-transform: uppercase;
    transform: rotate(-1deg);
}

.premium-final-cta h2 {
    font-size: clamp(4.2rem, 7vw, 7.2rem);
}

.premium-final-cta h2 em {
    display: block;
    margin-top: 8px;
    color: var(--paper-light);
    font-size: 0.7em;
    font-weight: 400;
}

.premium-final-cta__actions {
    margin-top: 38px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}


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

.premium-home .site-footer {
    background: var(--ink);
    color: var(--paper-light);
}

.premium-home .site-footer__main {
    width: min(
        var(--wide),
        calc(100% - (var(--side) * 2))
    );
    margin-inline: auto;
    padding:
        58px
        0
        42px;
}

.premium-home .site-footer__brand {
    padding-bottom: 34px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    border-bottom:
        1px solid rgba(251, 247, 238, 0.3);
}

.premium-home .site-footer__brand strong {
    color: var(--paper-light);
    font-family: var(--editorial);
    font-size: clamp(3.1rem, 5vw, 5rem);
    line-height: 0.9;
    font-weight: 400;
}

.premium-home .site-footer__brand em {
    color: var(--orange-light);
    font-family: var(--editorial);
    font-size: 1.35rem;
    font-weight: 400;
}

.premium-home .site-footer__grid {
    padding-top: 36px;
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 35px;
}

.premium-home .site-footer__grid > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.premium-home .site-footer__label {
    margin-bottom: 8px;
    color: var(--orange-light);
    font-family: var(--mono);
    font-size: 0.6rem;
    text-transform: uppercase;
}

.premium-home .site-footer__grid a {
    color: var(--paper-light);
    font-family: var(--body);
    font-size: 0.82rem;
    text-decoration: none;
}

.premium-home .site-footer__grid a:hover {
    color: var(--orange-light);
}

.premium-home .site-footer__grid address {
    margin: 0;
    color: rgba(251, 247, 238, 0.8);
    font-family: var(--body);
    font-size: 0.8rem;
    line-height: 1.65;
}

.premium-home .site-footer__bottom {
    width: min(
        var(--wide),
        calc(100% - (var(--side) * 2))
    );
    margin-inline: auto;
    padding:
        20px
        0
        28px;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    border-top:
        1px solid rgba(251, 247, 238, 0.2);
    color: rgba(251, 247, 238, 0.65);
    font-family: var(--mono);
    font-size: 0.56rem;
    line-height: 1.5;
}


/* ==========================================================
   LARGE DESKTOP
   ========================================================== */

@media (min-width: 1440px) {

    .premium-hero h1 {
        font-size: 5.8rem;
    }

    .premium-section__header h2,
    .repair-department h2,
    .diagnostic-teaser h2,
    .premium-why-us h2,
    .shop-story h2,
    .premium-visit h2 {
        font-size: 4.9rem;
    }

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


@media (min-width: 1800px) {

    .premium-hero__grid,
    .premium-section > .section-shell,
    .premium-home .site-header__main,
    .premium-home .site-footer__main,
    .premium-home .site-footer__bottom {
        max-width: 1240px;
    }

    .premium-hero h1 {
        font-size: 6.1rem;
    }
}


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

@media (max-width: 1180px) {

    .premium-hero__grid {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(440px, 1.1fr);
        gap: 44px;
    }

    .premium-hero h1 {
        font-size: clamp(4rem, 6vw, 5.8rem);
    }

    .premium-hero__quick-info {
        grid-template-columns: 1fr;
    }

    .premium-hero__quick-info > div {
        min-height: auto;
        padding: 12px 0;
        border-left: 0;
        border-top:
            1px solid rgba(29, 29, 26, 0.18);
    }

    .premium-hero__quick-info > div:first-child {
        border-top: 0;
    }

    .featured-bike-card {
        min-height: 390px;
    }

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

    .specialty-card {
        border-top:
            1px solid var(--ink);
    }

    .specialty-card:nth-child(odd) {
        border-left: 0;
    }

    .specialty-card:nth-child(-n+2) {
        border-top: 0;
    }

    .repair-department__grid {
        grid-template-columns:
            minmax(0, 0.85fr)
            minmax(460px, 1.15fr);
        gap: 48px;
    }
}


/* ==========================================================
   TABLET / INTERMEDIATE
   ========================================================== */

@media (max-width: 980px) {

    .premium-hero__grid,
    .repair-department__grid,
    .diagnostic-teaser__grid,
    .premium-why-us__grid,
    .premium-visit__grid {
        grid-template-columns: 1fr;
    }

    .premium-hero__content {
        max-width: 760px;
    }

    .premium-hero h1 {
        max-width: 700px;
    }

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

    .premium-hero__visual img {
        height: min(720px, 88vw);
    }

    .premium-section__header {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .premium-section__intro {
        max-width: 620px;
    }

    .featured-bike-grid,
    .review-grid {
        grid-template-columns: 1fr;
    }

    .featured-bike-card,
    .review-card {
        border-left: 0;
        border-top:
            2px solid var(--ink);
    }

    .featured-bike-card:first-child,
    .review-card:first-child {
        border-top: 0;
    }

    .featured-bike-card {
        min-height: 330px;
    }

    .repair-menu {
        margin-top: 10px;
    }

    .premium-why-us__visual {
        width: min(660px, 92%);
        margin-inline: auto;
    }

    .shop-story__grid {
        grid-template-columns:
            120px
            minmax(0, 1fr);
    }

    .shop-story__copy {
        grid-column: 2;
    }

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

    .premium-home .site-footer__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        row-gap: 40px;
    }
}


/* ==========================================================
   MOBILE NAV BREAKPOINT
   ========================================================== */

@media (max-width: 820px) {

    .premium-home .site-nav {
        gap: 0;
    }

    .premium-home .site-nav > a:not(.site-nav__cta) {
        font-size: 1rem;
    }

    .premium-hero {
        padding-top: 48px;
    }

    .premium-hero__grid {
        gap: 52px;
    }

    .premium-hero h1 {
        font-size: clamp(3.9rem, 13vw, 5.4rem);
    }

    .premium-hero__quick-info {
        margin-top: 34px;
    }

    .premium-section {
        padding:
            clamp(68px, 12vw, 94px)
            0;
    }

    .premium-section__header h2,
    .repair-department h2,
    .diagnostic-teaser h2,
    .premium-why-us h2,
    .shop-story h2,
    .premium-visit h2 {
        font-size: clamp(3.4rem, 10.5vw, 4.8rem);
    }

    .diagnostic-options {
        grid-template-columns: 1fr;
    }

    .diagnostic-option {
        min-height: 220px;
    }

    .premium-final-cta h2 {
        font-size: clamp(3.8rem, 12vw, 5.4rem);
    }
}


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

@media (max-width: 640px) {

    .premium-hero {
        padding:
            40px
            0
            72px;
    }

    .premium-hero__ticket {
        margin-bottom: 30px;
    }

    .premium-hero h1 {
        font-size: clamp(3.45rem, 15vw, 4.7rem);
    }

    .premium-hero__lead {
        margin-top: 24px;
        font-size: 0.96rem;
        line-height: 1.7;
    }

    .premium-hero__actions,
    .premium-visit__actions,
    .premium-final-cta__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .premium-hero__actions .button,
    .premium-visit__actions .button,
    .premium-final-cta__actions .button {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

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

    .premium-hero__visual img {
        height: 112vw;
        max-height: 580px;
    }

    .premium-hero__visual figcaption {
        right: -8px;
        bottom: 18px;
        width: 78%;
        padding: 17px 18px;
    }

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

    .premium-hero__photo-tag {
        left: -8px;
    }

    .shop-status__track {
        justify-content: flex-start;
    }

    .premium-section__header h2,
    .repair-department h2,
    .diagnostic-teaser h2,
    .premium-why-us h2,
    .shop-story h2,
    .premium-visit h2 {
        font-size: clamp(3rem, 13vw, 4.1rem);
    }

    .featured-bike-card,
    .specialty-card,
    .review-card {
        padding: 24px 21px;
    }

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

    .specialty-card,
    .specialty-card:nth-child(odd),
    .specialty-card:nth-child(-n+2) {
        border-left: 0;
        border-top:
            1px solid var(--ink);
    }

    .specialty-card:first-child {
        border-top: 0;
    }

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

    .specialty-card__index {
        margin-bottom: 38px;
    }

    .repair-menu__item {
        padding: 20px;
        grid-template-columns:
            38px
            minmax(0, 1fr);
    }

    .repair-menu__item > strong {
        grid-column: 2;
        text-align: left;
    }

    .diagnostic-option {
        min-height: 205px;
        padding: 22px;
    }

    .diagnostic-option strong {
        margin-top: 38px;
    }

    .premium-why-us__visual {
        width: calc(100% - 8px);
    }

    .premium-why-us__visual img {
        height: 128vw;
        max-height: 650px;
    }

    .premium-proof-list article {
        grid-template-columns:
            44px
            minmax(0, 1fr);
        gap: 18px;
    }

    .premium-proof-list article > span {
        width: 40px;
        height: 40px;
    }

    .shop-story__grid {
        grid-template-columns: 1fr;
    }

    .shop-story__stamp {
        width: 92px;
    }

    .shop-story__copy {
        grid-column: auto;
    }

    .review-card {
        min-height: 340px;
    }

    .premium-home .site-footer__brand {
        align-items: flex-start;
        flex-direction: column;
    }

    .premium-home .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .premium-home .site-footer__bottom {
        flex-direction: column;
        gap: 8px;
    }
}


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

@media (max-width: 420px) {

    .premium-hero h1 {
        font-size: 3.25rem;
    }

    .premium-hero h1 em {
        font-size: 0.72em;
    }

    .premium-hero__visual figcaption {
        position: relative;
        right: auto;
        bottom: auto;
        width: calc(100% + 10px);
        margin:
            -18px
            -5px
            0;
        transform: rotate(-0.5deg);
    }

    .premium-section__header h2,
    .repair-department h2,
    .diagnostic-teaser h2,
    .premium-why-us h2,
    .shop-story h2,
    .premium-visit h2 {
        font-size: 2.85rem;
    }

    .featured-bike-card h3 {
        font-size: 2.3rem;
    }

    .featured-bike-card__footer {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .premium-home .site-footer__grid {
        grid-template-columns: 1fr;
    }
}


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

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

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


/* GEAR ISSUES PREMIUM HOME END */


/* GEAR ISSUES PREMIUM BRAND HEADER START */


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

.premium-home .site-header__main {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 42px;
}


/* ==========================================================
   BRAND LOCKUP
   ========================================================== */

.premium-home .site-brand {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: var(--ink);
    text-decoration: none;
}


.premium-home .site-brand__number {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;

    background: var(--red);
    color: var(--paper-light);

    border: 3px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);

    font-family: var(--display);
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 900;

    transform: rotate(-2deg);
}


.premium-home .site-brand__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}


.premium-home .site-brand__copy strong {
    color: var(--ink);
    font-family: var(--display);
    font-size: 1.55rem;
    line-height: 0.95;
    letter-spacing: -0.025em;
    font-weight: 900;
    text-transform: uppercase;
}


.premium-home .site-brand__copy small {
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.63rem;
    line-height: 1;
    letter-spacing: 0.09em;
    font-weight: 500;
    text-transform: uppercase;
}


/* ==========================================================
   NAV BALANCE
   ========================================================== */

.premium-home .site-nav {
    margin-left: auto;
}


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

@media (max-width: 820px) {

    .premium-home .site-header__main {
        min-height: 82px;
        gap: 20px;
    }

    .premium-home .site-brand {
        gap: 12px;
    }

    .premium-home .site-brand__number {
        width: 46px;
        height: 46px;
        font-size: 1.3rem;
    }

    .premium-home .site-brand__copy strong {
        font-size: 1.28rem;
    }

    .premium-home .site-brand__copy small {
        font-size: 0.55rem;
    }

}


@media (max-width: 420px) {

    .premium-home .site-brand__number {
        width: 42px;
        height: 42px;
    }

    .premium-home .site-brand__copy strong {
        font-size: 1.12rem;
    }

    .premium-home .site-brand__copy small {
        font-size: 0.49rem;
        letter-spacing: 0.06em;
    }

}


/* GEAR ISSUES PREMIUM BRAND HEADER END */


/* GEAR ISSUES PREMIUM BRAND SIZE START */


/* Main header gets a little more breathing room */

.premium-home .site-header__main {
    min-height: 108px;
}


/* Full brand lockup */

.premium-home .site-brand {
    gap: 18px;
}


/* Race number */

.premium-home .site-brand__number {
    width: 62px;
    height: 62px;
    font-size: 1.8rem;
}


/* GEAR ISSUES™ */

.premium-home .site-brand__copy strong {
    font-size: clamp(1.75rem, 2vw, 2rem);
    line-height: 0.92;
}


/* We all have them. */

.premium-home .site-brand__copy small {
    margin-top: 2px;
    font-size: 0.7rem;
    line-height: 1.15;
    letter-spacing: 0.075em;
}


/* Compact desktop */

@media (max-width: 1180px) {

    .premium-home .site-header__main {
        min-height: 98px;
    }

    .premium-home .site-brand__number {
        width: 56px;
        height: 56px;
        font-size: 1.6rem;
    }

    .premium-home .site-brand__copy strong {
        font-size: 1.7rem;
    }

    .premium-home .site-brand__copy small {
        font-size: 0.64rem;
    }

}


/* Mobile */

@media (max-width: 820px) {

    .premium-home .site-header__main {
        min-height: 84px;
    }

    .premium-home .site-brand {
        gap: 12px;
    }

    .premium-home .site-brand__number {
        width: 48px;
        height: 48px;
        font-size: 1.4rem;
    }

    .premium-home .site-brand__copy strong {
        font-size: 1.4rem;
    }

    .premium-home .site-brand__copy small {
        font-size: 0.56rem;
    }

}


/* Very small phones */

@media (max-width: 420px) {

    .premium-home .site-brand__number {
        width: 44px;
        height: 44px;
    }

    .premium-home .site-brand__copy strong {
        font-size: 1.25rem;
    }

    .premium-home .site-brand__copy small {
        font-size: 0.52rem;
    }

}


/* GEAR ISSUES PREMIUM BRAND SIZE END */


/* GEAR ISSUES PREMIUM HEADER LOGO START */


/* Header brand lockup */

.premium-home .site-brand {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    flex: 0 0 auto;
    color: var(--ink);
    text-decoration: none;
}


/* Actual logo */

.premium-home .site-brand__logo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 72px !important;
    height: 72px !important;
    min-width: 72px;
    flex: 0 0 72px;

    object-fit: contain;
    object-position: center;
}


/* Business-name stack */

.premium-home .site-brand__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}


/* GEAR ISSUES™ */

.premium-home .site-brand__copy strong {
    display: block;
    font-family: var(--display);
    font-size: 1.95rem;
    line-height: 0.9;
    font-weight: 900;
    letter-spacing: -0.025em;
    text-transform: uppercase;
}


/* WE ALL HAVE THEM. */

.premium-home .site-brand__copy small {
    display: block;
    font-family: var(--mono);
    font-size: 0.67rem;
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}


/* Give the premium header appropriate height */

.premium-home .site-header__main {
    min-height: 112px;
}


/* Compact desktop */

@media (max-width: 1180px) {

    .premium-home .site-brand__logo {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px;
        flex-basis: 64px;
    }

    .premium-home .site-brand__copy strong {
        font-size: 1.7rem;
    }

    .premium-home .site-brand__copy small {
        font-size: 0.61rem;
    }

}


/* Mobile */

@media (max-width: 820px) {

    .premium-home .site-header__main {
        min-height: 86px;
    }

    .premium-home .site-brand {
        gap: 12px;
    }

    .premium-home .site-brand__logo {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px;
        flex-basis: 52px;
    }

    .premium-home .site-brand__copy strong {
        font-size: 1.4rem;
    }

    .premium-home .site-brand__copy small {
        font-size: 0.53rem;
    }

}


/* Small phones */

@media (max-width: 420px) {

    .premium-home .site-brand__logo {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px;
        flex-basis: 46px;
    }

    .premium-home .site-brand__copy strong {
        font-size: 1.2rem;
    }

}


/* GEAR ISSUES PREMIUM HEADER LOGO END */


/* GEAR ISSUES PREMIUM BIKES START */


/* ==========================================================
   PREMIUM INTERIOR PAGE FOUNDATION
   ========================================================== */

.premium-page {
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 31px,
            rgba(29, 29, 26, 0.028) 32px
        ),
        var(--paper-light);

    color: var(--ink);
}

.premium-page main {
    overflow: hidden;
}

.premium-page .section-shell {
    width: min(
        var(--wide),
        calc(100% - (var(--side) * 2))
    );

    margin-inline: auto;
}

.premium-page .eyebrow {
    margin: 0 0 18px;

    color: var(--red);

    font-family: var(--mono);
    font-size: 0.7rem;
    line-height: 1.4;
    letter-spacing: 0.075em;

    text-transform: uppercase;
}


/* ==========================================================
   SHARED PREMIUM INTERIOR HEADER
   ========================================================== */

.premium-page .site-header__main {
    width: min(
        var(--wide),
        calc(100% - (var(--side) * 2))
    );

    min-height: 112px;

    margin-inline: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 42px;
}

.premium-page .site-brand {
    display: inline-flex;
    align-items: center;

    gap: 18px;

    flex: 0 0 auto;

    color: var(--ink);
    text-decoration: none;
}

.premium-page .site-brand__logo {
    display: block;

    width: 72px;
    height: 72px;

    flex: 0 0 72px;

    object-fit: contain;
}

.premium-page .site-brand__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 6px;
}

.premium-page .site-brand__copy strong {
    color: var(--ink);

    font-family: var(--display);
    font-size: 1.95rem;
    line-height: 0.9;
    letter-spacing: -0.025em;
    font-weight: 900;

    text-transform: uppercase;
}

.premium-page .site-brand__copy small {
    color: var(--ink);

    font-family: var(--mono);
    font-size: 0.67rem;
    line-height: 1;
    letter-spacing: 0.085em;
    font-weight: 500;

    text-transform: uppercase;
}

.premium-page .site-nav {
    margin-left: auto;
    gap: clamp(18px, 2vw, 30px);
}

.premium-page .site-nav > a:not(.site-nav__cta) {
    font-family: var(--body);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: -0.015em;

    text-transform: none;
}

.premium-page .site-nav a[aria-current="page"] {
    color: var(--red);
}


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

.bikes-hero {
    padding:
        clamp(72px, 7vw, 112px)
        0
        clamp(76px, 8vw, 124px);

    border-top: 2px solid var(--ink);
}

.bikes-hero__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(370px, 0.72fr);

    gap: clamp(70px, 9vw, 130px);

    align-items: center;
}

.bikes-hero__ticket {
    width: fit-content;

    min-width: 190px;

    margin-bottom: 38px;

    padding: 15px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    background: var(--kraft-light);

    border: 2px solid var(--ink);

    box-shadow:
        5px 5px 0 var(--ink);

    transform: rotate(-1deg);
}

.bikes-hero__ticket span {
    font-family: var(--mono);
    font-size: 0.62rem;

    text-transform: uppercase;
}

.bikes-hero__ticket strong {
    font-family: var(--display);
    font-size: 1.6rem;
    line-height: 1;

    font-weight: 800;
}

.bikes-hero h1 {
    max-width: 760px;

    margin: 0;

    font-family: var(--editorial);
    font-size: clamp(4.8rem, 7vw, 7.3rem);
    line-height: 0.88;
    letter-spacing: -0.055em;

    font-weight: 400;
}

.bikes-hero h1 em {
    display: block;

    margin-top: 10px;

    color: var(--red);

    font-size: 0.72em;
    line-height: 0.96;

    font-weight: 400;
}

.bikes-hero__lead {
    max-width: 690px;

    margin: 30px 0 0;

    font-size: 1.03rem;
    line-height: 1.78;
}

.bikes-hero__actions {
    margin-top: 32px;

    display: flex;
    flex-wrap: wrap;

    gap: 16px;
}


/* ==========================================================
   HERO REPORT BOARD
   ========================================================== */

.bikes-hero__board {
    position: relative;

    background: var(--paper);

    border: 2px solid var(--ink);

    box-shadow:
        10px 10px 0 var(--ink);

    transform: rotate(0.7deg);
}

.bikes-hero__board::before {
    content: "";

    position: absolute;

    top: -15px;
    left: 32%;

    width: 112px;
    height: 28px;

    z-index: 2;

    background: rgba(223, 195, 148, 0.8);

    transform: rotate(-2deg);
}

.bikes-hero__board-header {
    min-height: 64px;

    padding: 18px 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    background: var(--ink);
    color: var(--paper-light);
}

.bikes-hero__board-header span,
.bikes-hero__board-header strong {
    font-family: var(--mono);
    font-size: 0.62rem;

    text-transform: uppercase;
}

.bikes-hero__board-header strong {
    color: var(--orange-light);
}

.bikes-hero__stat {
    min-height: 118px;

    padding: 22px 24px;

    display: grid;

    grid-template-columns:
        90px
        minmax(0, 1fr);

    gap: 6px 22px;

    align-items: center;

    border-top:
        1px solid rgba(29, 29, 26, 0.25);
}

.bikes-hero__stat > span {
    grid-row: 1 / span 2;

    color: var(--red);

    font-family: var(--mono);
    font-size: 0.62rem;

    text-transform: uppercase;
}

.bikes-hero__stat > strong {
    font-family: var(--editorial);
    font-size: 2rem;
    line-height: 1;

    font-weight: 400;
}

.bikes-hero__stat > small {
    color: var(--ink-muted);

    font-family: var(--body);
    font-size: 0.77rem;
    line-height: 1.45;
}


/* ==========================================================
   CATEGORY BAR
   ========================================================== */

.bike-category-bar {
    background: var(--ink);
    color: var(--paper-light);

    border-block:
        2px solid var(--ink);
}

.bike-category-bar__inner {
    min-height: 68px;

    display: flex;
    align-items: center;

    gap: 0;
}

.bike-category-bar__label,
.bike-category-bar a {
    min-height: 68px;

    padding-inline: 28px;

    display: inline-flex;
    align-items: center;

    font-family: var(--mono);
    font-size: 0.65rem;
    line-height: 1;

    text-transform: uppercase;
}

.bike-category-bar__label {
    padding-left: 0;

    color: var(--orange-light);
}

.bike-category-bar a {
    color: var(--paper-light);

    text-decoration: none;

    border-left:
        1px solid rgba(251, 247, 238, 0.25);
}

.bike-category-bar a:hover {
    background: var(--red);
}


/* ==========================================================
   INVENTORY
   ========================================================== */

.bike-inventory {
    background: var(--paper-light);
}

.bike-product-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 34px;
}

.bike-product-card {
    overflow: hidden;

    background: var(--paper);

    border: 2px solid var(--ink);

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

.bike-product-card__top {
    min-height: 64px;

    padding: 14px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom:
        2px solid var(--ink);
}

.bike-product-card__number {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    background: var(--red);
    color: var(--paper-light);

    border: 2px solid var(--ink);

    box-shadow:
        3px 3px 0 var(--ink);

    font-family: var(--display);
    font-size: 1.15rem;
    font-weight: 800;
}

.bike-product-card__category {
    font-family: var(--mono);
    font-size: 0.62rem;

    text-transform: uppercase;
}

.bike-product-card__visual {
    min-height: 310px;

    padding: 34px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background:
        repeating-linear-gradient(
            -45deg,
            transparent 0,
            transparent 16px,
            rgba(29, 29, 26, 0.05) 17px,
            rgba(29, 29, 26, 0.05) 18px
        ),
        var(--paper-dark);

    border-bottom:
        2px solid var(--ink);
}

.bike-product-card__visual > span {
    color: var(--red);

    font-family: var(--mono);
    font-size: 0.63rem;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}

.bike-product-card__visual > strong {
    margin-top: 26px;

    font-family: var(--display);
    font-size: clamp(4.2rem, 7vw, 7rem);
    line-height: 0.78;
    letter-spacing: -0.03em;

    font-weight: 900;

    text-transform: uppercase;
}

.bike-product-card__visual > small {
    margin-top: 22px;

    font-family: var(--mono);
    font-size: 0.65rem;

    text-transform: uppercase;
}

.bike-product-card__visual--dark {
    background:
        repeating-linear-gradient(
            -45deg,
            transparent 0,
            transparent 16px,
            rgba(251, 247, 238, 0.045) 17px,
            rgba(251, 247, 238, 0.045) 18px
        ),
        var(--steel-dark);

    color: var(--paper-light);
}

.bike-product-card__visual--kraft {
    background:
        repeating-linear-gradient(
            -45deg,
            transparent 0,
            transparent 16px,
            rgba(29, 29, 26, 0.05) 17px,
            rgba(29, 29, 26, 0.05) 18px
        ),
        var(--kraft-light);
}

.bike-product-card__visual--red {
    background:
        repeating-linear-gradient(
            -45deg,
            transparent 0,
            transparent 16px,
            rgba(251, 247, 238, 0.08) 17px,
            rgba(251, 247, 238, 0.08) 18px
        ),
        var(--red);

    color: var(--paper-light);
}

.bike-product-card__visual--red > span,
.bike-product-card__visual--red > small {
    color: var(--paper-light);
}

.bike-product-card__content {
    padding: 28px;
}

.bike-product-card__title {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 28px;
}

.bike-product-card__title h3 {
    margin: 0 0 12px;

    font-family: var(--editorial);
    font-size: clamp(2.5rem, 3.3vw, 3.65rem);
    line-height: 0.96;

    font-weight: 400;
}

.bike-product-card__title p {
    max-width: 520px;

    margin: 0;

    font-size: 0.9rem;
    line-height: 1.7;
}

.bike-product-card__title > strong {
    font-family: var(--body);
    font-size: 1.12rem;
    line-height: 1;

    white-space: nowrap;
}

.bike-product-specs {
    margin:
        28px
        0;

    border-block:
        1px solid rgba(29, 29, 26, 0.28);
}

.bike-product-specs > div {
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 22px;

    border-top:
        1px solid rgba(29, 29, 26, 0.16);
}

.bike-product-specs > div:first-child {
    border-top: 0;
}

.bike-product-specs dt {
    font-family: var(--mono);
    font-size: 0.59rem;

    text-transform: uppercase;
}

.bike-product-specs dd {
    margin: 0;

    font-family: var(--body);
    font-size: 0.78rem;
    font-weight: 700;

    text-align: right;
}


/* ==========================================================
   BIKE FINDER
   ========================================================== */

.bike-finder {
    background: var(--ink);
    color: var(--paper-light);
}

.bike-finder__grid {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.7fr)
        minmax(0, 1.3fr);

    gap: clamp(60px, 8vw, 120px);

    align-items: start;
}

.bike-finder__intro h2 {
    margin: 0;

    color: var(--paper-light);

    font-family: var(--editorial);
    font-size: clamp(3.7rem, 5.8vw, 6rem);
    line-height: 0.94;
    letter-spacing: -0.045em;

    font-weight: 400;
}

.bike-finder__intro > p:last-child {
    max-width: 500px;

    margin: 26px 0 0;

    color: rgba(251, 247, 238, 0.78);

    font-size: 0.96rem;
    line-height: 1.75;
}

.bike-finder__options {
    border:
        1px solid rgba(251, 247, 238, 0.42);
}

.bike-finder__options article {
    min-height: 132px;

    padding: 22px 24px;

    display: grid;

    grid-template-columns:
        44px
        minmax(0, 1fr)
        auto;

    gap: 22px;

    align-items: center;

    border-top:
        1px solid rgba(251, 247, 238, 0.28);
}

.bike-finder__options article:first-child {
    border-top: 0;
}

.bike-finder__options article > span {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border:
        1px solid var(--paper-light);

    font-family: var(--mono);
    font-size: 0.64rem;
}

.bike-finder__options h3 {
    margin: 0 0 6px;

    font-family: var(--body);
    font-size: 1.05rem;
    font-weight: 700;
}

.bike-finder__options p {
    margin: 0;

    color: rgba(251, 247, 238, 0.72);

    font-size: 0.8rem;
}

.bike-finder__options a {
    color: var(--orange-light);

    font-family: var(--mono);
    font-size: 0.64rem;

    text-decoration: none;

    text-transform: uppercase;
}

.bike-finder__options a:hover {
    color: var(--paper-light);
}


/* ==========================================================
   BUYING HELP
   ========================================================== */

.bike-buying-help {
    background: var(--kraft-light);
}

.bike-buying-help__grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border:
        2px solid var(--ink);
}

.bike-buying-help__grid article {
    min-height: 330px;

    padding: 30px;

    display: flex;
    flex-direction: column;

    background:
        rgba(251, 247, 238, 0.32);

    border-left:
        1px solid var(--ink);
}

.bike-buying-help__grid article:first-child {
    border-left: 0;
}

.bike-buying-help__grid article > span {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    margin-bottom: 58px;

    background: var(--ink);
    color: var(--paper-light);

    font-family: var(--mono);
    font-size: 0.62rem;
}

.bike-buying-help__grid h3 {
    margin: 0 0 16px;

    font-family: var(--editorial);
    font-size: clamp(2.2rem, 3vw, 3rem);
    line-height: 1;

    font-weight: 400;
}

.bike-buying-help__grid p {
    margin: 0;

    font-size: 0.9rem;
    line-height: 1.75;
}


/* ==========================================================
   SERVICE CROSSOVER
   ========================================================== */

.bike-purchase-service {
    background: var(--paper-light);
}

.bike-purchase-service__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(360px, 0.72fr);

    gap: clamp(65px, 9vw, 130px);

    align-items: start;
}

.bike-purchase-service h2 {
    margin: 0;

    font-family: var(--editorial);
    font-size: clamp(3.8rem, 5.8vw, 6rem);
    line-height: 0.94;
    letter-spacing: -0.045em;

    font-weight: 400;
}

.bike-purchase-service__copy {
    padding-top: 8px;
}

.bike-purchase-service__copy p {
    margin: 0 0 20px;

    font-size: 0.98rem;
    line-height: 1.78;
}

.bike-purchase-service__actions {
    margin-top: 32px;

    display: flex;
    flex-wrap: wrap;

    gap: 15px;
}


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

.premium-page .site-footer {
    background: var(--ink);
    color: var(--paper-light);
}

.premium-page .site-footer__main {
    width: min(
        var(--wide),
        calc(100% - (var(--side) * 2))
    );

    margin-inline: auto;

    padding:
        58px
        0
        42px;
}

.premium-page .site-footer__brand {
    padding-bottom: 34px;

    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 30px;

    border-bottom:
        1px solid rgba(251, 247, 238, 0.3);
}

.premium-page .site-footer__brand strong {
    color: var(--paper-light);

    font-family: var(--editorial);
    font-size: clamp(3.1rem, 5vw, 5rem);
    line-height: 0.9;

    font-weight: 400;
}

.premium-page .site-footer__brand em {
    color: var(--orange-light);

    font-family: var(--editorial);
    font-size: 1.35rem;

    font-weight: 400;
}

.premium-page .site-footer__grid {
    padding-top: 36px;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 35px;
}

.premium-page .site-footer__grid > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 10px;
}

.premium-page .site-footer__label {
    margin-bottom: 8px;

    color: var(--orange-light);

    font-family: var(--mono);
    font-size: 0.6rem;

    text-transform: uppercase;
}

.premium-page .site-footer__grid a {
    color: var(--paper-light);

    font-family: var(--body);
    font-size: 0.82rem;

    text-decoration: none;
}

.premium-page .site-footer__grid a:hover {
    color: var(--orange-light);
}

.premium-page .site-footer__grid address {
    margin: 0;

    color: rgba(251, 247, 238, 0.8);

    font-family: var(--body);
    font-size: 0.8rem;
    line-height: 1.65;
}

.premium-page .site-footer__bottom {
    width: min(
        var(--wide),
        calc(100% - (var(--side) * 2))
    );

    margin-inline: auto;

    padding:
        20px
        0
        28px;

    display: flex;
    justify-content: space-between;

    gap: 30px;

    border-top:
        1px solid rgba(251, 247, 238, 0.2);

    color: rgba(251, 247, 238, 0.65);

    font-family: var(--mono);
    font-size: 0.56rem;
    line-height: 1.5;
}


/* ==========================================================
   LARGE DESKTOP
   ========================================================== */

@media (min-width: 1440px) {

    .bikes-hero h1 {
        font-size: 6rem;
    }

    .bike-finder__intro h2,
    .bike-purchase-service h2 {
        font-size: 4.9rem;
    }
}


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

@media (max-width: 1180px) {

    .premium-page .site-header__main {
        min-height: 98px;
    }

    .premium-page .site-brand__logo {
        width: 60px;
        height: 60px;

        flex-basis: 60px;
    }

    .premium-page .site-brand__copy strong {
        font-size: 1.7rem;
    }

    .premium-page .site-brand__copy small {
        font-size: 0.61rem;
    }

    .bikes-hero__grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(340px, 0.7fr);

        gap: 52px;
    }

    .bike-product-card__visual {
        min-height: 270px;
    }
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 980px) {

    .bikes-hero__grid,
    .bike-finder__grid,
    .bike-purchase-service__grid {
        grid-template-columns: 1fr;
    }

    .bikes-hero__board {
        width: min(700px, 100%);
    }

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

    .bike-product-card__visual {
        min-height: 300px;
    }

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

    .bike-buying-help__grid article {
        min-height: 260px;

        border-left: 0;
        border-top:
            1px solid var(--ink);
    }

    .bike-buying-help__grid article:first-child {
        border-top: 0;
    }

    .premium-page .site-footer__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


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

@media (max-width: 820px) {

    .premium-page .site-header__main {
        min-height: 86px;
    }

    .premium-page .site-brand {
        gap: 12px;
    }

    .premium-page .site-brand__logo {
        width: 52px;
        height: 52px;

        flex-basis: 52px;
    }

    .premium-page .site-brand__copy strong {
        font-size: 1.4rem;
    }

    .premium-page .site-brand__copy small {
        font-size: 0.53rem;
    }

    .premium-page .site-nav {
        gap: 0;
    }

    .premium-page .site-nav > a:not(.site-nav__cta) {
        font-size: 1rem;
    }

    .bikes-hero {
        padding-top: 52px;
    }

    .bikes-hero h1 {
        font-size: clamp(4rem, 13vw, 5.5rem);
    }

    .bike-category-bar__inner {
        overflow-x: auto;

        justify-content: flex-start;

        scrollbar-width: thin;
    }

    .bike-category-bar__label,
    .bike-category-bar a {
        flex: 0 0 auto;
    }

    .bike-finder__intro h2,
    .bike-purchase-service h2 {
        font-size: clamp(3.4rem, 10vw, 4.7rem);
    }
}


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

@media (max-width: 640px) {

    .bikes-hero {
        padding:
            42px
            0
            74px;
    }

    .bikes-hero h1 {
        font-size: clamp(3.45rem, 15vw, 4.7rem);
    }

    .bikes-hero__lead {
        font-size: 0.95rem;
    }

    .bikes-hero__actions,
    .bike-purchase-service__actions {
        flex-direction: column;

        align-items: stretch;
    }

    .bikes-hero__actions .button,
    .bike-purchase-service__actions .button {
        width: 100%;

        justify-content: center;

        text-align: center;
    }

    .bikes-hero__stat {
        grid-template-columns:
            72px
            minmax(0, 1fr);

        padding: 19px;
    }

    .bike-category-bar__label,
    .bike-category-bar a {
        padding-inline: 20px;
    }

    .bike-product-card__content {
        padding: 22px;
    }

    .bike-product-card__title {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .bike-product-card__visual {
        min-height: 240px;

        padding: 25px;
    }

    .bike-product-card__visual > strong {
        font-size: clamp(4rem, 18vw, 6rem);
    }

    .bike-finder__options article {
        grid-template-columns:
            40px
            minmax(0, 1fr);

        padding: 20px;
    }

    .bike-finder__options article > a {
        grid-column: 2;
    }

    .bike-buying-help__grid article {
        padding: 24px;
    }

    .bike-buying-help__grid article > span {
        margin-bottom: 40px;
    }

    .premium-page .site-footer__brand {
        flex-direction: column;
        align-items: flex-start;
    }

    .premium-page .site-footer__grid {
        grid-template-columns:
            1fr
            1fr;
    }

    .premium-page .site-footer__bottom {
        flex-direction: column;

        gap: 8px;
    }
}


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

@media (max-width: 420px) {

    .premium-page .site-brand__logo {
        width: 46px;
        height: 46px;

        flex-basis: 46px;
    }

    .premium-page .site-brand__copy strong {
        font-size: 1.2rem;
    }

    .bikes-hero h1 {
        font-size: 3.2rem;
    }

    .bikes-hero__board-header {
        align-items: flex-start;
        flex-direction: column;

        gap: 7px;
    }

    .bike-product-card__title h3 {
        font-size: 2.35rem;
    }

    .bike-finder__intro h2,
    .bike-purchase-service h2 {
        font-size: 2.9rem;
    }

    .premium-page .site-footer__grid {
        grid-template-columns: 1fr;
    }
}


/* GEAR ISSUES PREMIUM BIKES END */


/* GEAR ISSUES PRODUCT IMAGES START */


/* ==========================================================
   CONCEPT BIKE PRODUCT PHOTOGRAPHY
   ========================================================== */

.bike-product-card__image-wrap {
    position: relative;

    margin: 0;

    aspect-ratio: 3 / 2;

    overflow: hidden;

    background:
        repeating-linear-gradient(
            -45deg,
            var(--paper-dark) 0,
            var(--paper-dark) 18px,
            var(--kraft-light) 18px,
            var(--kraft-light) 20px
        );

    border-bottom: 2px solid var(--ink);
}


.bike-product-card__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 350ms ease;
}


.bike-product-card:hover .bike-product-card__image {
    transform: scale(1.025);
}


/* Product service tag */

.bike-product-card__image-label {
    position: absolute;

    left: 20px;
    bottom: 20px;

    z-index: 2;

    max-width: calc(100% - 40px);

    padding: 11px 15px 12px;

    display: flex;
    flex-direction: column;

    gap: 4px;

    background: rgba(251, 247, 238, 0.96);
    color: var(--ink);

    border: 2px solid var(--ink);

    box-shadow:
        4px 4px 0 var(--ink);
}


.bike-product-card__image-label span {
    color: var(--red);

    font-family: var(--mono);
    font-size: 0.56rem;
    line-height: 1.2;

    letter-spacing: 0.075em;

    text-transform: uppercase;
}


.bike-product-card__image-label strong {
    font-family: var(--display);
    font-size: 1.08rem;
    line-height: 1;

    font-weight: 800;
}


/* Wide screens */

@media (min-width: 1180px) {

    .bike-product-card__image-wrap {
        min-height: 330px;
    }

}


/* Mobile */

@media (max-width: 640px) {

    .bike-product-card__image-wrap {
        aspect-ratio: 4 / 3;
    }

    .bike-product-card__image-label {
        left: 14px;
        bottom: 14px;

        max-width: calc(100% - 28px);
    }

    .bike-product-card__image-label strong {
        font-size: 0.95rem;
    }

}


/* Reduced motion */

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

    .bike-product-card__image {
        transition: none;
    }

    .bike-product-card:hover .bike-product-card__image {
        transform: none;
    }

}


/* GEAR ISSUES PRODUCT IMAGES END */


/* GEAR ISSUES PREMIUM BIKE DETAIL START */


/* ==========================================================
   BREADCRUMB
   ========================================================== */

.bike-detail-breadcrumb {
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid rgba(29, 29, 26, 0.2);

    background: var(--paper);
}

.bike-detail-breadcrumb .section-shell {
    min-height: 54px;

    display: flex;
    align-items: center;

    gap: 10px;
}

.bike-detail-breadcrumb a,
.bike-detail-breadcrumb span {
    font-family: var(--mono);
    font-size: 0.6rem;
    line-height: 1;

    text-transform: uppercase;
}

.bike-detail-breadcrumb a {
    color: var(--red);
    text-decoration: none;
}

.bike-detail-breadcrumb a:hover {
    color: var(--ink);
}


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

.bike-detail-hero {
    padding:
        clamp(54px, 6vw, 92px)
        0
        clamp(76px, 8vw, 124px);

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 31px,
            rgba(29, 29, 26, 0.028) 32px
        ),
        var(--paper-light);
}

.bike-detail-hero__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(360px, 0.72fr);

    gap: clamp(54px, 7vw, 100px);

    align-items: start;
}


/* ----------------------------------------------------------
   HERO MEDIA
   ---------------------------------------------------------- */

.bike-detail-hero__media {
    position: relative;
}

.bike-detail-hero__number {
    position: absolute;

    top: -18px;
    left: -14px;

    z-index: 3;

    padding: 11px 15px;

    background: var(--red);
    color: var(--paper-light);

    border: 2px solid var(--ink);

    box-shadow:
        4px 4px 0 var(--ink);

    font-family: var(--mono);
    font-size: 0.6rem;
    line-height: 1;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    transform: rotate(-1deg);
}

.bike-detail-hero__image-wrap {
    position: relative;

    margin: 0;

    aspect-ratio: 3 / 2;

    overflow: hidden;

    background: var(--ink);

    border: 2px solid var(--ink);

    box-shadow:
        10px 10px 0 var(--ink);
}

.bike-detail-hero__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.bike-detail-hero__image-wrap::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    box-shadow:
        inset 0 0 0 1px rgba(251, 247, 238, 0.25);
}

.bike-detail-hero__image-note {
    width: min(390px, 78%);

    margin:
        -38px
        18px
        0
        auto;

    position: relative;
    z-index: 3;

    padding: 18px 20px;

    background: var(--paper-light);

    border: 2px solid var(--ink);

    box-shadow:
        5px 5px 0 var(--ink);
}

.bike-detail-hero__image-note span {
    display: block;

    margin-bottom: 7px;

    color: var(--red);

    font-family: var(--mono);
    font-size: 0.55rem;

    text-transform: uppercase;
}

.bike-detail-hero__image-note strong {
    font-family: var(--editorial);
    font-size: 1.45rem;
    line-height: 1;

    font-weight: 400;
}


/* ----------------------------------------------------------
   HERO PRODUCT COPY
   ---------------------------------------------------------- */

.bike-detail-hero__content {
    padding-top: 22px;
}

.bike-detail-hero h1 {
    margin: 0;

    font-family: var(--editorial);
    font-size: clamp(4.2rem, 6.3vw, 6.8rem);
    line-height: 0.87;
    letter-spacing: -0.055em;

    font-weight: 400;
}

.bike-detail-hero h1 em {
    display: block;

    margin-top: 7px;

    color: var(--red);

    font-weight: 400;
}

.bike-detail-hero__tagline {
    margin: 24px 0 0;

    font-family: var(--display);
    font-size: 1.3rem;
    line-height: 1.1;
    font-weight: 700;

    letter-spacing: -0.015em;
}

.bike-detail-hero__description {
    margin: 20px 0 0;

    max-width: 560px;

    font-size: 0.96rem;
    line-height: 1.75;
}


/* ----------------------------------------------------------
   PRICE
   ---------------------------------------------------------- */

.bike-detail-price {
    margin-top: 30px;

    padding:
        19px
        0;

    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 30px;

    border-top:
        1px solid rgba(29, 29, 26, 0.3);

    border-bottom:
        1px solid rgba(29, 29, 26, 0.3);
}

.bike-detail-price span {
    font-family: var(--mono);
    font-size: 0.59rem;

    text-transform: uppercase;
}

.bike-detail-price strong {
    color: var(--red);

    font-family: var(--display);
    font-size: 2.4rem;
    line-height: 0.9;

    font-weight: 800;
}


/* ----------------------------------------------------------
   AVAILABILITY
   ---------------------------------------------------------- */

.bike-detail-availability {
    margin-top: 26px;

    padding: 17px 18px;

    display: grid;

    grid-template-columns:
        12px
        minmax(0, 1fr);

    gap: 14px;

    background: var(--kraft-light);

    border-left: 4px solid var(--ink);
}

.bike-detail-availability__dot {
    width: 10px;
    height: 10px;

    margin-top: 4px;

    background: var(--red);

    border-radius: 50%;

    box-shadow:
        0 0 0 3px rgba(198, 64, 50, 0.15);
}

.bike-detail-availability strong {
    display: block;

    margin-bottom: 5px;

    font-size: 0.85rem;
}

.bike-detail-availability small {
    display: block;

    color: var(--ink-soft);

    font-size: 0.72rem;
    line-height: 1.55;
}


/* ----------------------------------------------------------
   SIZE SELECTOR
   ========================================================== */

.bike-detail-size {
    margin-top: 28px;
}

.bike-detail-size__heading {
    margin-bottom: 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.bike-detail-size__heading span {
    font-family: var(--mono);
    font-size: 0.6rem;

    text-transform: uppercase;
}

.bike-detail-size__heading a {
    color: var(--red);

    font-family: var(--mono);
    font-size: 0.58rem;

    text-decoration: none;

    text-transform: uppercase;
}

.bike-detail-size__options {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 8px;
}

.bike-detail-size__options button {
    min-height: 48px;

    padding: 8px;

    background: var(--paper-light);
    color: var(--ink);

    border: 1px solid var(--ink);

    font-family: var(--mono);
    font-size: 0.68rem;

    cursor: pointer;
}

.bike-detail-size__options button:hover,
.bike-detail-size__options button.is-selected {
    background: var(--ink);
    color: var(--paper-light);
}


/* ----------------------------------------------------------
   ACTIONS
   ---------------------------------------------------------- */

.bike-detail-hero__actions {
    margin-top: 26px;

    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}

.bike-detail-demo-note {
    margin: 20px 0 0;

    color: var(--ink-muted);

    font-family: var(--mono);
    font-size: 0.55rem;
    line-height: 1.55;
}


/* ==========================================================
   QUICK SPEC STRIP
   ========================================================== */

.bike-detail-spec-strip {
    background: var(--ink);
    color: var(--paper-light);

    border-block:
        2px solid var(--ink);
}

.bike-detail-spec-strip__grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));
}

.bike-detail-spec-strip__grid > div {
    min-height: 105px;

    padding: 22px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 10px;

    border-left:
        1px solid rgba(251, 247, 238, 0.22);
}

.bike-detail-spec-strip__grid > div:first-child {
    border-left: 0;
}

.bike-detail-spec-strip span {
    color: var(--orange-light);

    font-family: var(--mono);
    font-size: 0.55rem;

    text-transform: uppercase;
}

.bike-detail-spec-strip strong {
    font-family: var(--body);
    font-size: 0.8rem;
    line-height: 1.3;
}


/* ==========================================================
   DESIGN STORY
   ========================================================== */

.bike-detail-story {
    background: var(--paper);
}

.bike-detail-story__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(360px, 0.7fr);

    gap: clamp(65px, 9vw, 130px);

    align-items: start;
}

.bike-detail-story h2 {
    margin: 0;

    font-family: var(--editorial);
    font-size: clamp(3.8rem, 5.6vw, 5.7rem);
    line-height: 0.94;
    letter-spacing: -0.045em;

    font-weight: 400;
}

.bike-detail-story__copy {
    padding-top: 12px;
}

.bike-detail-story__copy p {
    margin: 0 0 22px;

    font-size: 0.98rem;
    line-height: 1.8;
}

.bike-detail-story__copy p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   DETAIL GALLERY
   ========================================================== */

.bike-detail-gallery {
    background: var(--ink);
    color: var(--paper-light);
}

.bike-detail-gallery .premium-section__header h2 {
    color: var(--paper-light);
}

.bike-detail-gallery__grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}

.bike-detail-gallery__item {
    margin: 0;

    overflow: hidden;

    background: var(--steel-dark);

    border:
        1px solid rgba(251, 247, 238, 0.35);
}

.bike-detail-gallery__item img {
    display: block;

    width: 100%;

    aspect-ratio: 4 / 5;

    object-fit: cover;
    object-position: center;

    background:
        repeating-linear-gradient(
            -45deg,
            rgba(251, 247, 238, 0.04) 0,
            rgba(251, 247, 238, 0.04) 16px,
            rgba(251, 247, 238, 0.08) 16px,
            rgba(251, 247, 238, 0.08) 18px
        ),
        var(--steel-dark);
}

.bike-detail-gallery__item figcaption {
    min-height: 78px;

    padding: 17px;

    display: flex;
    flex-direction: column;

    gap: 5px;

    border-top:
        1px solid rgba(251, 247, 238, 0.28);
}

.bike-detail-gallery__item figcaption span {
    color: var(--orange-light);

    font-family: var(--mono);
    font-size: 0.53rem;

    text-transform: uppercase;
}

.bike-detail-gallery__item figcaption strong {
    color: var(--paper-light);

    font-family: var(--body);
    font-size: 0.82rem;
}


/* ==========================================================
   FEATURES
   ========================================================== */

.bike-detail-features {
    background: var(--paper-light);
}

.bike-detail-features__grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border:
        2px solid var(--ink);
}

.bike-detail-features__grid article {
    min-height: 285px;

    padding: 30px;

    border-top:
        1px solid var(--ink);

    border-left:
        1px solid var(--ink);
}

.bike-detail-features__grid article:nth-child(-n + 2) {
    border-top: 0;
}

.bike-detail-features__grid article:nth-child(odd) {
    border-left: 0;
}

.bike-detail-features__grid article > span {
    display: inline-flex;

    width: 42px;
    height: 42px;

    align-items: center;
    justify-content: center;

    margin-bottom: 46px;

    background: var(--red);
    color: var(--paper-light);

    border: 2px solid var(--ink);

    font-family: var(--mono);
    font-size: 0.58rem;
}

.bike-detail-features__grid h3 {
    margin: 0 0 13px;

    font-family: var(--editorial);
    font-size: 2.3rem;
    line-height: 1;

    font-weight: 400;
}

.bike-detail-features__grid p {
    margin: 0;

    max-width: 520px;

    font-size: 0.88rem;
    line-height: 1.7;
}


/* ==========================================================
   FULL SPECIFICATIONS
   ========================================================== */

.bike-detail-specifications {
    background: var(--kraft-light);
}

.bike-detail-specifications__grid {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.7fr)
        minmax(0, 1.3fr);

    gap: clamp(60px, 8vw, 115px);

    align-items: start;
}

.bike-detail-specifications h2 {
    margin: 0;

    font-family: var(--editorial);
    font-size: clamp(3.6rem, 5.4vw, 5.3rem);
    line-height: 0.94;
    letter-spacing: -0.04em;

    font-weight: 400;
}

.bike-detail-spec-table {
    margin: 0;

    border-top:
        2px solid var(--ink);
}

.bike-detail-spec-table > div {
    min-height: 62px;

    padding:
        14px
        0;

    display: grid;

    grid-template-columns:
        minmax(120px, 0.38fr)
        minmax(0, 1fr);

    gap: 28px;

    align-items: center;

    border-bottom:
        1px solid rgba(29, 29, 26, 0.35);
}

.bike-detail-spec-table dt {
    font-family: var(--mono);
    font-size: 0.57rem;

    text-transform: uppercase;
}

.bike-detail-spec-table dd {
    margin: 0;

    font-size: 0.84rem;
    line-height: 1.5;

    font-weight: 600;
}


/* ==========================================================
   FIT GUIDE
   ========================================================== */

.bike-detail-fit {
    background: var(--paper-light);
}

.bike-detail-fit__grid {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.76fr)
        minmax(0, 1.24fr);

    gap: clamp(60px, 8vw, 110px);

    align-items: start;
}

.bike-detail-fit__intro h2 {
    margin: 0;

    font-family: var(--editorial);
    font-size: clamp(3.7rem, 5.5vw, 5.5rem);
    line-height: 0.94;
    letter-spacing: -0.045em;

    font-weight: 400;
}

.bike-detail-fit__intro > p:last-child {
    margin: 24px 0 0;

    max-width: 500px;

    font-size: 0.92rem;
    line-height: 1.75;
}

.bike-detail-fit__table {
    border:
        2px solid var(--ink);
}

.bike-detail-fit__row {
    min-height: 62px;

    padding: 14px 18px;

    display: grid;

    grid-template-columns:
        70px
        1fr
        1fr;

    gap: 20px;

    align-items: center;

    border-top:
        1px solid rgba(29, 29, 26, 0.28);
}

.bike-detail-fit__row:first-child {
    border-top: 0;
}

.bike-detail-fit__row--heading {
    background: var(--ink);
    color: var(--paper-light);
}

.bike-detail-fit__row--heading span {
    font-family: var(--mono);
    font-size: 0.54rem;

    text-transform: uppercase;
}

.bike-detail-fit__row strong {
    color: var(--red);

    font-family: var(--display);
    font-size: 1.2rem;
}

.bike-detail-fit__row > span:not(:first-child) {
    font-size: 0.8rem;
}


/* ==========================================================
   SHOP SETUP
   ========================================================== */

.bike-detail-setup {
    background: var(--paper-dark);
}

.bike-detail-setup__grid {
    display: grid;

    grid-template-columns:
        minmax(220px, 0.45fr)
        minmax(0, 1fr);

    gap: clamp(60px, 9vw, 130px);

    align-items: start;
}

.bike-detail-setup__ticket {
    padding: 25px;

    display: flex;
    flex-direction: column;

    gap: 10px;

    background: var(--paper-light);

    border: 2px solid var(--ink);

    box-shadow:
        7px 7px 0 var(--ink);

    transform: rotate(-1.5deg);
}

.bike-detail-setup__ticket span {
    color: var(--red);

    font-family: var(--mono);
    font-size: 0.6rem;

    text-transform: uppercase;
}

.bike-detail-setup__ticket strong {
    font-family: var(--display);
    font-size: 2.7rem;
    line-height: 0.9;

    font-weight: 800;

    text-transform: uppercase;
}

.bike-detail-setup__content h2 {
    margin: 0;

    max-width: 800px;

    font-family: var(--editorial);
    font-size: clamp(3.5rem, 5.4vw, 5.4rem);
    line-height: 0.94;
    letter-spacing: -0.04em;

    font-weight: 400;
}

.bike-detail-setup__content > p {
    margin: 25px 0 0;

    max-width: 680px;

    font-size: 0.95rem;
    line-height: 1.75;
}

.bike-detail-setup__content ul {
    margin:
        32px
        0
        0;

    padding: 0;

    list-style: none;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px 28px;
}

.bike-detail-setup__content li {
    position: relative;

    padding:
        12px
        0
        12px
        22px;

    border-bottom:
        1px solid rgba(29, 29, 26, 0.25);

    font-size: 0.82rem;
}

.bike-detail-setup__content li::before {
    content: "✓";

    position: absolute;

    left: 0;

    color: var(--red);

    font-family: var(--mono);
    font-weight: 700;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (min-width: 1440px) {

    .bike-detail-hero h1 {
        font-size: 5.7rem;
    }

    .bike-detail-story h2,
    .bike-detail-specifications h2,
    .bike-detail-fit__intro h2,
    .bike-detail-setup__content h2 {
        font-size: 4.7rem;
    }

}


@media (max-width: 1080px) {

    .bike-detail-hero__grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, 0.72fr);

        gap: 48px;
    }

    .bike-detail-spec-strip__grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .bike-detail-spec-strip__grid > div:nth-child(4) {
        border-left: 0;
    }

}


@media (max-width: 900px) {

    .bike-detail-hero__grid,
    .bike-detail-story__grid,
    .bike-detail-specifications__grid,
    .bike-detail-fit__grid,
    .bike-detail-setup__grid {
        grid-template-columns: 1fr;
    }

    .bike-detail-hero__content {
        padding-top: 0;
    }

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

    .bike-detail-gallery__item img {
        aspect-ratio: 16 / 10;
    }

}


@media (max-width: 720px) {

    .bike-detail-spec-strip__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .bike-detail-spec-strip__grid > div {
        border-left:
            1px solid rgba(251, 247, 238, 0.22);
    }

    .bike-detail-spec-strip__grid > div:nth-child(odd) {
        border-left: 0;
    }

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

    .bike-detail-features__grid article {
        border-left: 0;
        border-top:
            1px solid var(--ink);
    }

    .bike-detail-features__grid article:first-child {
        border-top: 0;
    }

    .bike-detail-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .bike-detail-hero__actions .button {
        width: 100%;

        justify-content: center;

        text-align: center;
    }

}


@media (max-width: 560px) {

    .bike-detail-hero {
        padding-top: 44px;
    }

    .bike-detail-hero h1 {
        font-size: clamp(3.3rem, 15vw, 4.5rem);
    }

    .bike-detail-hero__number {
        left: 10px;
    }

    .bike-detail-hero__image-note {
        width: calc(100% - 24px);

        margin:
            -24px
            auto
            0;
    }

    .bike-detail-price {
        align-items: flex-start;
        flex-direction: column;

        gap: 10px;
    }

    .bike-detail-size__options {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .bike-detail-spec-strip__grid {
        grid-template-columns: 1fr;
    }

    .bike-detail-spec-strip__grid > div,
    .bike-detail-spec-strip__grid > div:nth-child(odd),
    .bike-detail-spec-strip__grid > div:nth-child(4) {
        border-left: 0;

        border-top:
            1px solid rgba(251, 247, 238, 0.2);
    }

    .bike-detail-spec-strip__grid > div:first-child {
        border-top: 0;
    }

    .bike-detail-spec-table > div {
        grid-template-columns: 1fr;

        gap: 6px;
    }

    .bike-detail-fit__row {
        grid-template-columns:
            55px
            1fr;

        gap: 10px 16px;
    }

    .bike-detail-fit__row > span:last-child {
        grid-column: 2;
    }

    .bike-detail-fit__row--heading span:last-child {
        grid-column: 2;
    }

    .bike-detail-setup__content ul {
        grid-template-columns: 1fr;
    }

}


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

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

    .bike-detail-size__options button {
        transition: none;
    }

}


/* GEAR ISSUES PREMIUM BIKE DETAIL END */


/* GEAR ISSUES SPEC TYPE SIZE START */


/* Full specification rows */

.premium-bike-detail-page .bike-detail-spec-table > div {
    min-height: 72px;

    padding:
        17px
        0;
}


/* Spec labels */

.premium-bike-detail-page .bike-detail-spec-table dt {
    font-size: 0.68rem;
    line-height: 1.35;

    letter-spacing: 0.035em;

    font-weight: 500;
}


/* Spec values */

.premium-bike-detail-page .bike-detail-spec-table dd {
    font-size: 0.98rem;
    line-height: 1.55;

    font-weight: 600;
}


/* Slightly larger on roomy desktop */

@media (min-width: 1180px) {

    .premium-bike-detail-page .bike-detail-spec-table dt {
        font-size: 0.7rem;
    }

    .premium-bike-detail-page .bike-detail-spec-table dd {
        font-size: 1rem;
    }

}


/* Mobile remains comfortable */

@media (max-width: 560px) {

    .premium-bike-detail-page .bike-detail-spec-table dt {
        font-size: 0.65rem;
    }

    .premium-bike-detail-page .bike-detail-spec-table dd {
        font-size: 0.92rem;
    }

}


/* GEAR ISSUES SPEC TYPE SIZE END */


/* GEAR ISSUES PREMIUM REPAIRS START */


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

.repairs-hero {
    padding:
        clamp(70px, 7vw, 112px)
        0
        clamp(82px, 8vw, 128px);

    border-top: 2px solid var(--ink);

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 31px,
            rgba(29, 29, 26, 0.03) 32px
        ),
        var(--paper-light);
}


.repairs-hero__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(420px, 1fr);

    gap: clamp(60px, 8vw, 112px);

    align-items: center;
}


/* ----------------------------------------------------------
   WORK ORDER TICKET
   ---------------------------------------------------------- */

.repairs-hero__ticket {
    width: fit-content;
    min-width: 190px;

    margin-bottom: 38px;

    padding: 15px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 34px;

    background: var(--kraft-light);

    border: 2px solid var(--ink);

    box-shadow:
        5px 5px 0 var(--ink);

    transform: rotate(-1.5deg);
}


.repairs-hero__ticket span {
    font-family: var(--mono);
    font-size: 0.62rem;
    line-height: 1;

    text-transform: uppercase;
}


.repairs-hero__ticket strong {
    font-family: var(--display);
    font-size: 1.65rem;
    line-height: 0.9;

    font-weight: 900;
}


/* ----------------------------------------------------------
   HERO COPY
   ---------------------------------------------------------- */

.repairs-hero h1 {
    max-width: 720px;

    margin: 0;

    font-family: var(--editorial);
    font-size: clamp(4.5rem, 7vw, 7rem);
    line-height: 0.88;
    letter-spacing: -0.055em;

    font-weight: 400;
}


.repairs-hero h1 em {
    display: block;

    margin-top: 8px;

    color: var(--red);

    font-weight: 400;
}


.repairs-hero__subhead {
    margin: 20px 0 0;

    font-family: var(--display);
    font-size: clamp(1.6rem, 2.7vw, 2.4rem);
    line-height: 1;

    font-weight: 800;
}


.repairs-hero__lead {
    max-width: 650px;

    margin: 25px 0 0;

    font-size: 1rem;
    line-height: 1.8;
}


.repairs-hero__actions {
    margin-top: 32px;

    display: flex;
    flex-wrap: wrap;

    gap: 14px;
}


/* ----------------------------------------------------------
   HERO QUICK INFO
   ---------------------------------------------------------- */

.repairs-hero__quick {
    margin-top: 42px;

    border-top:
        1px solid rgba(29, 29, 26, 0.3);
}


.repairs-hero__quick > div {
    min-height: 64px;

    padding: 13px 0;

    display: grid;

    grid-template-columns:
        145px
        minmax(0, 1fr);

    gap: 20px;

    align-items: center;

    border-bottom:
        1px solid rgba(29, 29, 26, 0.22);
}


.repairs-hero__quick span {
    font-family: var(--mono);
    font-size: 0.58rem;

    text-transform: uppercase;
}


.repairs-hero__quick strong {
    font-size: 0.82rem;
    line-height: 1.4;
}


/* ----------------------------------------------------------
   HERO MEDIA
   ---------------------------------------------------------- */

.repairs-hero__media {
    position: relative;
}


.repairs-hero__image-wrap {
    margin: 0;

    position: relative;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    border: 2px solid var(--ink);

    box-shadow:
        10px 10px 0 var(--ink);

    transform: rotate(0.6deg);

    background: var(--steel-dark);
}


.repairs-hero__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


.repairs-hero__tag {
    position: absolute;

    top: 30px;
    left: -18px;

    z-index: 3;

    padding: 10px 14px;

    background: var(--ink);
    color: var(--paper-light);

    border: 2px solid var(--paper-light);

    box-shadow:
        4px 4px 0 var(--ink);

    font-family: var(--mono);
    font-size: 0.56rem;

    text-transform: uppercase;
}


.repairs-hero__note {
    position: absolute;

    right: -20px;
    bottom: 35px;

    z-index: 3;

    width: min(390px, 82%);

    padding: 22px;

    background: var(--paper-light);

    border: 2px solid var(--ink);

    box-shadow:
        6px 6px 0 var(--ink);
}


.repairs-hero__note span {
    display: block;

    margin-bottom: 8px;

    color: var(--red);

    font-family: var(--mono);
    font-size: 0.55rem;

    text-transform: uppercase;
}


.repairs-hero__note strong {
    display: block;

    font-family: var(--editorial);
    font-size: 1.65rem;
    line-height: 1;

    font-weight: 400;
}


.repairs-hero__note p {
    margin: 10px 0 0;

    font-size: 0.76rem;
    line-height: 1.5;
}


/* ==========================================================
   REPAIR STATUS STRIP
   ========================================================== */

.repair-status-strip {
    background: var(--ink);
    color: var(--paper-light);

    border-block: 2px solid var(--ink);
}


.repair-status-strip__grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


.repair-status-strip__grid > div {
    min-height: 102px;

    padding: 22px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 10px;

    border-left:
        1px solid rgba(251, 247, 238, 0.22);
}


.repair-status-strip__grid > div:first-child {
    border-left: 0;
}


.repair-status-strip span {
    color: var(--orange-light);

    font-family: var(--mono);
    font-size: 0.55rem;

    text-transform: uppercase;
}


.repair-status-strip strong {
    font-size: 0.82rem;
    line-height: 1.4;
}


/* ==========================================================
   REPAIR PACKAGES
   ========================================================== */

.repair-menu-section {
    background: var(--paper-light);
}


.repair-package-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;

    align-items: stretch;
}


.repair-package-card {
    position: relative;

    min-height: 600px;

    padding: 28px;

    display: flex;
    flex-direction: column;

    background: var(--paper);

    border: 2px solid var(--ink);

    box-shadow:
        6px 6px 0 var(--ink);
}


.repair-package-card--featured {
    background: var(--kraft-light);

    transform: translateY(-12px);
}


.repair-package-card__flag {
    position: absolute;

    top: -18px;
    right: 20px;

    padding: 9px 12px;

    background: var(--red);
    color: var(--paper-light);

    border: 2px solid var(--ink);

    font-family: var(--mono);
    font-size: 0.54rem;

    text-transform: uppercase;
}


.repair-package-card__number {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin-bottom: 38px;

    background: var(--ink);
    color: var(--paper-light);

    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 800;
}


.repair-package-card--featured .repair-package-card__number {
    background: var(--red);
}


.repair-package-card__heading > span {
    color: var(--red);

    font-family: var(--mono);
    font-size: 0.57rem;

    text-transform: uppercase;
}


.repair-package-card__heading h3 {
    margin:
        10px
        0
        16px;

    font-family: var(--editorial);
    font-size: clamp(2.4rem, 3.5vw, 3.4rem);
    line-height: 0.95;

    font-weight: 400;
}


.repair-package-card__heading > strong {
    display: block;

    font-family: var(--display);
    font-size: 1.45rem;
    line-height: 1;

    font-weight: 800;
}


.repair-package-card > p {
    margin: 25px 0 0;

    font-size: 0.86rem;
    line-height: 1.7;
}


.repair-package-card ul {
    margin:
        28px
        0
        30px;

    padding: 0;

    list-style: none;

    border-top:
        1px solid rgba(29, 29, 26, 0.3);
}


.repair-package-card li {
    position: relative;

    min-height: 48px;

    padding:
        14px
        0
        14px
        23px;

    border-bottom:
        1px solid rgba(29, 29, 26, 0.2);

    font-size: 0.76rem;
    line-height: 1.4;
}


.repair-package-card li::before {
    content: "✓";

    position: absolute;

    left: 0;

    color: var(--red);

    font-family: var(--mono);
    font-weight: 700;
}


.repair-package-card .button {
    margin-top: auto;

    width: 100%;

    justify-content: center;

    text-align: center;
}


/* ==========================================================
   DIAGNOSTIC DEPARTMENT
   ========================================================== */

.repair-diagnostic {
    background: var(--ink);
    color: var(--paper-light);
}


.repair-diagnostic__grid {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.68fr)
        minmax(0, 1.32fr);

    gap: clamp(60px, 8vw, 118px);

    align-items: start;
}


.repair-diagnostic__intro h2 {
    margin: 0;

    color: var(--paper-light);

    font-family: var(--editorial);
    font-size: clamp(4rem, 6vw, 6rem);
    line-height: 0.9;
    letter-spacing: -0.045em;

    font-weight: 400;
}


.repair-diagnostic__intro > p:last-child {
    margin: 24px 0 0;

    max-width: 510px;

    color: rgba(251, 247, 238, 0.76);

    font-size: 0.94rem;
    line-height: 1.75;
}


.repair-diagnostic__symptoms {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border:
        1px solid rgba(251, 247, 238, 0.35);
}


.repair-diagnostic__symptoms article {
    min-height: 260px;

    padding: 26px;

    border-left:
        1px solid rgba(251, 247, 238, 0.25);

    border-top:
        1px solid rgba(251, 247, 238, 0.25);
}


.repair-diagnostic__symptoms article:nth-child(-n + 2) {
    border-top: 0;
}


.repair-diagnostic__symptoms article:nth-child(odd) {
    border-left: 0;
}


.repair-diagnostic__symptoms article > span {
    display: inline-block;

    margin-bottom: 48px;

    color: var(--orange-light);

    font-family: var(--mono);
    font-size: 0.6rem;

    text-transform: uppercase;
}


.repair-diagnostic__symptoms h3 {
    margin: 0 0 12px;

    color: var(--paper-light);

    font-family: var(--editorial);
    font-size: 2rem;
    line-height: 1;

    font-weight: 400;
}


.repair-diagnostic__symptoms p {
    margin: 0;

    color: rgba(251, 247, 238, 0.72);

    font-size: 0.8rem;
    line-height: 1.65;
}


/* ==========================================================
   REPAIR WORK PHOTOGRAPHY
   ========================================================== */

.repair-work {
    background: var(--paper);
}


.repair-work__grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


.repair-work-card {
    overflow: hidden;

    background: var(--paper-light);

    border: 2px solid var(--ink);

    box-shadow:
        6px 6px 0 var(--ink);
}


.repair-work-card__media {
    position: relative;

    margin: 0;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background:
        repeating-linear-gradient(
            -45deg,
            var(--steel-dark) 0,
            var(--steel-dark) 16px,
            var(--steel) 16px,
            var(--steel) 17px
        );

    border-bottom: 2px solid var(--ink);
}


.repair-work-card__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 350ms ease;
}


.repair-work-card:hover .repair-work-card__media img {
    transform: scale(1.025);
}


.repair-work-card__media figcaption {
    position: absolute;

    top: 16px;
    left: 16px;

    padding: 8px 10px;

    background: var(--ink);
    color: var(--paper-light);

    border:
        1px solid var(--paper-light);

    font-family: var(--mono);
    font-size: 0.53rem;

    text-transform: uppercase;
}


.repair-work-card__content {
    padding: 25px;
}


.repair-work-card__content h3 {
    margin: 0 0 14px;

    font-family: var(--editorial);
    font-size: 2.2rem;
    line-height: 1;

    font-weight: 400;
}


.repair-work-card__content p {
    margin: 0;

    font-size: 0.84rem;
    line-height: 1.7;
}


/* ==========================================================
   REPAIR PROCESS
   ========================================================== */

.repair-process {
    background: var(--kraft-light);
}


.repair-process__steps {
    margin: 0;
    padding: 0;

    list-style: none;

    border-top:
        2px solid var(--ink);
}


.repair-process__steps li {
    min-height: 125px;

    padding:
        24px
        0;

    display: grid;

    grid-template-columns:
        100px
        minmax(0, 1fr);

    gap: 35px;

    align-items: center;

    border-bottom:
        1px solid rgba(29, 29, 26, 0.35);
}


.repair-process__steps li > span {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    background: var(--ink);
    color: var(--paper-light);

    border: 2px solid var(--ink);

    box-shadow:
        4px 4px 0 var(--red);

    font-family: var(--display);
    font-size: 1.35rem;
    font-weight: 800;
}


.repair-process__steps h3 {
    margin: 0 0 7px;

    font-family: var(--editorial);
    font-size: 2rem;
    line-height: 1;

    font-weight: 400;
}


.repair-process__steps p {
    max-width: 760px;

    margin: 0;

    font-size: 0.83rem;
    line-height: 1.65;
}


/* ==========================================================
   TURNAROUND
   ========================================================== */

.repair-turnaround {
    background: var(--paper-light);
}


.repair-turnaround__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(380px, 0.78fr);

    gap: clamp(65px, 9vw, 125px);

    align-items: start;
}


.repair-turnaround h2 {
    margin: 0;

    font-family: var(--editorial);
    font-size: clamp(3.8rem, 5.8vw, 5.8rem);
    line-height: 0.93;
    letter-spacing: -0.045em;

    font-weight: 400;
}


.repair-turnaround__board {
    background: var(--paper);

    border: 2px solid var(--ink);

    box-shadow:
        8px 8px 0 var(--ink);
}


.repair-turnaround__board > div {
    min-height: 78px;

    padding: 18px 22px;

    display: grid;

    grid-template-columns:
        minmax(120px, 0.8fr)
        minmax(0, 1fr);

    gap: 24px;

    align-items: center;

    border-top:
        1px solid rgba(29, 29, 26, 0.28);
}


.repair-turnaround__board > div:first-child {
    border-top: 0;
}


.repair-turnaround__board span {
    color: var(--red);

    font-family: var(--mono);
    font-size: 0.57rem;

    text-transform: uppercase;
}


.repair-turnaround__board strong {
    font-size: 0.85rem;
    line-height: 1.45;
}


.repair-turnaround__board > p {
    margin: 0;

    padding: 20px 22px;

    background: var(--ink);
    color: rgba(251, 247, 238, 0.72);

    font-size: 0.7rem;
    line-height: 1.6;
}


/* ==========================================================
   REPAIR FAQ
   ========================================================== */

.repair-faq {
    background: var(--paper-dark);
}


.repair-faq__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.74fr)
        minmax(0, 1.26fr);

    gap: clamp(60px, 9vw, 120px);

    align-items: start;
}


.repair-faq h2 {
    margin: 0;

    font-family: var(--editorial);
    font-size: clamp(3.6rem, 5.5vw, 5.4rem);
    line-height: 0.94;
    letter-spacing: -0.04em;

    font-weight: 400;
}


.repair-faq__list {
    border-top: 2px solid var(--ink);
}


.repair-faq__list details {
    border-bottom:
        1px solid rgba(29, 29, 26, 0.35);
}


.repair-faq__list summary {
    min-height: 76px;

    padding: 20px 36px 20px 0;

    position: relative;

    display: flex;
    align-items: center;

    font-family: var(--body);
    font-size: 0.9rem;
    line-height: 1.4;
    font-weight: 700;

    cursor: pointer;

    list-style: none;
}


.repair-faq__list summary::-webkit-details-marker {
    display: none;
}


.repair-faq__list summary::after {
    content: "+";

    position: absolute;

    right: 4px;

    color: var(--red);

    font-family: var(--display);
    font-size: 1.6rem;
    line-height: 1;
}


.repair-faq__list details[open] summary::after {
    content: "−";
}


.repair-faq__list details p {
    margin:
        -2px
        0
        22px;

    padding-right: 46px;

    max-width: 720px;

    font-size: 0.82rem;
    line-height: 1.7;
}


.repair-faq__link {
    display: inline-block;

    margin-top: 26px;

    color: var(--red);

    font-family: var(--mono);
    font-size: 0.62rem;

    text-decoration: none;

    text-transform: uppercase;
}


/* ==========================================================
   LARGE SCREENS
   ========================================================== */

@media (min-width: 1440px) {

    .repairs-hero h1 {
        font-size: 5.8rem;
    }

    .repair-diagnostic__intro h2,
    .repair-turnaround h2,
    .repair-faq h2 {
        font-size: 4.7rem;
    }

}


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

@media (max-width: 1120px) {

    .repairs-hero__grid {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(360px, 0.8fr);

        gap: 50px;
    }

    .repair-package-grid {
        gap: 18px;
    }

    .repair-package-card {
        padding: 23px;
    }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 940px) {

    .repairs-hero__grid,
    .repair-diagnostic__grid,
    .repair-turnaround__grid,
    .repair-faq__grid {
        grid-template-columns: 1fr;
    }

    .repairs-hero__media {
        width: min(680px, 100%);
    }

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

    .repair-status-strip__grid > div:nth-child(3) {
        border-left: 0;

        border-top:
            1px solid rgba(251, 247, 238, 0.22);
    }

    .repair-status-strip__grid > div:nth-child(4) {
        border-top:
            1px solid rgba(251, 247, 238, 0.22);
    }

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

    .repair-package-card {
        min-height: auto;
    }

    .repair-package-card--featured {
        transform: none;
    }

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

    .repair-work-card {
        display: grid;

        grid-template-columns:
            minmax(280px, 0.8fr)
            minmax(0, 1fr);
    }

    .repair-work-card__media {
        aspect-ratio: auto;
        min-height: 360px;

        border-bottom: 0;
        border-right: 2px solid var(--ink);
    }

}


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

@media (max-width: 720px) {

    .repairs-hero {
        padding-top: 50px;
    }

    .repairs-hero h1 {
        font-size: clamp(3.7rem, 14vw, 5rem);
    }

    .repairs-hero__actions {
        flex-direction: column;

        align-items: stretch;
    }

    .repairs-hero__actions .button {
        width: 100%;

        justify-content: center;

        text-align: center;
    }

    .repairs-hero__quick > div {
        grid-template-columns:
            120px
            minmax(0, 1fr);
    }

    .repairs-hero__note {
        width: calc(100% - 24px);

        right: 12px;
        bottom: 18px;
    }

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

    .repair-diagnostic__symptoms article,
    .repair-diagnostic__symptoms article:nth-child(-n + 2),
    .repair-diagnostic__symptoms article:nth-child(odd) {
        border-left: 0;

        border-top:
            1px solid rgba(251, 247, 238, 0.25);
    }

    .repair-diagnostic__symptoms article:first-child {
        border-top: 0;
    }

    .repair-work-card {
        display: block;
    }

    .repair-work-card__media {
        min-height: 0;

        aspect-ratio: 4 / 5;

        border-right: 0;
        border-bottom: 2px solid var(--ink);
    }

}


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

@media (max-width: 560px) {

    .repairs-hero__ticket {
        min-width: 170px;
    }

    .repairs-hero__quick > div {
        grid-template-columns: 1fr;

        gap: 6px;
    }

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

    .repair-status-strip__grid > div,
    .repair-status-strip__grid > div:nth-child(3),
    .repair-status-strip__grid > div:nth-child(4) {
        border-left: 0;

        border-top:
            1px solid rgba(251, 247, 238, 0.22);
    }

    .repair-status-strip__grid > div:first-child {
        border-top: 0;
    }

    .repair-package-card {
        padding: 21px;
    }

    .repair-process__steps li {
        grid-template-columns:
            60px
            minmax(0, 1fr);

        gap: 18px;
    }

    .repair-process__steps li > span {
        width: 50px;
        height: 50px;
    }

    .repair-turnaround__board > div {
        grid-template-columns: 1fr;

        gap: 7px;
    }

    .repair-faq__list details p {
        padding-right: 0;
    }

}


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

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

    .repair-work-card__media img {
        transition: none;
    }

    .repair-work-card:hover .repair-work-card__media img {
        transform: none;
    }

}


/* GEAR ISSUES PREMIUM REPAIRS END */


/* GEAR ISSUES PREMIUM SERVICES START */


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

.services-hero {
    padding:
        clamp(70px, 7vw, 112px)
        0
        clamp(82px, 8vw, 128px);

    border-top: 2px solid var(--ink);

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 31px,
            rgba(29, 29, 26, 0.03) 32px
        ),
        var(--paper-light);
}


.services-hero__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1fr);

    gap: clamp(62px, 8vw, 116px);

    align-items: center;
}


/* Ticket */

.services-hero__ticket {
    width: fit-content;
    min-width: 190px;

    margin-bottom: 38px;

    padding: 15px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 34px;

    background: var(--kraft-light);

    border: 2px solid var(--ink);

    box-shadow:
        5px 5px 0 var(--ink);

    transform: rotate(-1deg);
}


.services-hero__ticket span {
    font-family: var(--mono);
    font-size: 0.62rem;

    text-transform: uppercase;
}


.services-hero__ticket strong {
    font-family: var(--display);
    font-size: 1.65rem;
    line-height: 0.9;

    font-weight: 900;
}


/* Hero copy */

.services-hero h1 {
    max-width: 720px;

    margin: 0;

    font-family: var(--editorial);
    font-size: clamp(4.6rem, 7vw, 7rem);
    line-height: 0.88;
    letter-spacing: -0.055em;

    font-weight: 400;
}


.services-hero h1 em {
    display: block;

    margin-top: 8px;

    color: var(--red);

    font-weight: 400;
}


.services-hero__subhead {
    margin: 22px 0 0;

    font-family: var(--display);
    font-size: clamp(1.55rem, 2.7vw, 2.35rem);
    line-height: 1;

    font-weight: 800;
}


.services-hero__lead {
    max-width: 650px;

    margin: 25px 0 0;

    font-size: 0.98rem;
    line-height: 1.8;
}


.services-hero__actions {
    margin-top: 32px;

    display: flex;
    flex-wrap: wrap;

    gap: 14px;
}


/* Quick info */

.services-hero__quick {
    margin-top: 42px;

    border-top:
        1px solid rgba(29, 29, 26, 0.3);
}


.services-hero__quick > div {
    min-height: 64px;

    padding: 13px 0;

    display: grid;

    grid-template-columns:
        160px
        minmax(0, 1fr);

    gap: 20px;

    align-items: center;

    border-bottom:
        1px solid rgba(29, 29, 26, 0.22);
}


.services-hero__quick span {
    font-family: var(--mono);
    font-size: 0.58rem;

    text-transform: uppercase;
}


.services-hero__quick strong {
    font-size: 0.82rem;
    line-height: 1.4;
}


/* Hero media */

.services-hero__media {
    position: relative;
}


.services-hero__image-wrap {
    margin: 0;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background:
        repeating-linear-gradient(
            -45deg,
            var(--steel-dark) 0,
            var(--steel-dark) 18px,
            var(--steel) 18px,
            var(--steel) 19px
        );

    border: 2px solid var(--ink);

    box-shadow:
        10px 10px 0 var(--ink);

    transform: rotate(0.55deg);
}


.services-hero__image-wrap img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


.services-hero__label {
    position: absolute;

    top: 28px;
    left: -18px;

    z-index: 3;

    padding: 10px 14px;

    background: var(--ink);
    color: var(--paper-light);

    border: 2px solid var(--paper-light);

    box-shadow:
        4px 4px 0 var(--ink);

    font-family: var(--mono);
    font-size: 0.55rem;

    text-transform: uppercase;
}


.services-hero__note {
    position: absolute;

    right: -20px;
    bottom: 34px;

    z-index: 3;

    width: min(390px, 82%);

    padding: 22px;

    background: var(--paper-light);

    border: 2px solid var(--ink);

    box-shadow:
        6px 6px 0 var(--ink);
}


.services-hero__note span {
    display: block;

    margin-bottom: 8px;

    color: var(--red);

    font-family: var(--mono);
    font-size: 0.55rem;

    text-transform: uppercase;
}


.services-hero__note strong {
    display: block;

    font-family: var(--editorial);
    font-size: 1.6rem;
    line-height: 1;

    font-weight: 400;
}


.services-hero__note p {
    margin: 10px 0 0;

    font-size: 0.76rem;
    line-height: 1.5;
}


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

.services-index {
    background: var(--ink);
    color: var(--paper-light);

    border-block: 2px solid var(--ink);
}


.services-index__inner {
    min-height: 68px;

    display: flex;
    align-items: center;

    overflow-x: auto;
}


.services-index__inner > span,
.services-index__inner a {
    min-height: 68px;

    padding-inline: 26px;

    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    font-family: var(--mono);
    font-size: 0.62rem;

    text-transform: uppercase;
}


.services-index__inner > span {
    padding-left: 0;

    color: var(--orange-light);
}


.services-index__inner a {
    color: var(--paper-light);

    text-decoration: none;

    border-left:
        1px solid rgba(251, 247, 238, 0.24);
}


.services-index__inner a:hover {
    background: var(--red);
}


/* ==========================================================
   SPECIALTY SERVICES LIST
   ========================================================== */

.specialty-services {
    background: var(--paper-light);
}


.specialty-service-list {
    border-top: 2px solid var(--ink);
}


.specialty-service {
    min-height: 245px;

    padding:
        30px
        0;

    display: grid;

    grid-template-columns:
        82px
        minmax(0, 1fr)
        180px;

    gap: 36px;

    align-items: start;

    border-bottom:
        1px solid rgba(29, 29, 26, 0.35);
}


.specialty-service__number {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    background: var(--ink);
    color: var(--paper-light);

    border: 2px solid var(--ink);

    box-shadow:
        4px 4px 0 var(--red);

    font-family: var(--display);
    font-size: 1.35rem;
    font-weight: 800;
}


.specialty-service__content > span {
    color: var(--red);

    font-family: var(--mono);
    font-size: 0.57rem;

    text-transform: uppercase;
}


.specialty-service__content h3 {
    margin:
        8px
        0
        14px;

    font-family: var(--editorial);
    font-size: clamp(2.5rem, 4vw, 3.7rem);
    line-height: 0.95;

    font-weight: 400;
}


.specialty-service__content > p {
    max-width: 700px;

    margin: 0;

    font-size: 0.88rem;
    line-height: 1.7;
}


.specialty-service__content ul {
    margin:
        22px
        0
        0;

    padding: 0;

    list-style: none;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px 26px;
}


.specialty-service__content li {
    position: relative;

    padding-left: 18px;

    font-size: 0.74rem;
    line-height: 1.5;
}


.specialty-service__content li::before {
    content: "+";

    position: absolute;

    left: 0;

    color: var(--red);

    font-family: var(--mono);
    font-weight: 700;
}


.specialty-service__price {
    padding: 17px 18px;

    background: var(--kraft-light);

    border: 2px solid var(--ink);

    box-shadow:
        4px 4px 0 var(--ink);
}


.specialty-service__price span {
    display: block;

    margin-bottom: 8px;

    font-family: var(--mono);
    font-size: 0.55rem;

    text-transform: uppercase;
}


.specialty-service__price strong {
    display: block;

    color: var(--red);

    font-family: var(--display);
    font-size: 1.65rem;
    line-height: 1;

    font-weight: 800;
}


/* ==========================================================
   BIKE FITTING FEATURE
   ========================================================== */

.service-feature--fit {
    background: var(--ink);
    color: var(--paper-light);
}


.service-feature__grid {
    display: grid;

    grid-template-columns:
        minmax(380px, 0.9fr)
        minmax(0, 1fr);

    gap: clamp(60px, 8vw, 110px);

    align-items: center;
}


.service-feature__media {
    position: relative;
}


.service-feature__media figure {
    margin: 0;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: var(--steel-dark);

    border:
        1px solid rgba(251, 247, 238, 0.45);
}


.service-feature__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


.service-feature__tag {
    position: absolute;

    left: -15px;
    bottom: 28px;

    padding: 10px 13px;

    background: var(--red);
    color: var(--paper-light);

    border: 2px solid var(--paper-light);

    font-family: var(--mono);
    font-size: 0.55rem;

    text-transform: uppercase;
}


.service-feature__content h2 {
    margin: 0;

    color: var(--paper-light);

    font-family: var(--editorial);
    font-size: clamp(3.8rem, 5.8vw, 5.8rem);
    line-height: 0.92;
    letter-spacing: -0.045em;

    font-weight: 400;
}


.service-feature__content > p {
    max-width: 640px;

    margin: 24px 0 0;

    color: rgba(251, 247, 238, 0.77);

    font-size: 0.92rem;
    line-height: 1.75;
}


.service-feature__facts {
    margin:
        32px
        0;

    border-top:
        1px solid rgba(251, 247, 238, 0.3);
}


.service-feature__facts > div {
    min-height: 58px;

    padding: 13px 0;

    display: grid;

    grid-template-columns:
        140px
        minmax(0, 1fr);

    gap: 22px;

    align-items: center;

    border-bottom:
        1px solid rgba(251, 247, 238, 0.25);
}


.service-feature__facts dt {
    color: var(--orange-light);

    font-family: var(--mono);
    font-size: 0.56rem;

    text-transform: uppercase;
}


.service-feature__facts dd {
    margin: 0;

    color: var(--paper-light);

    font-size: 0.8rem;
    font-weight: 600;
}


/* ==========================================================
   SPECIALTY PHOTO GRID
   ========================================================== */

.specialty-work {
    background: var(--paper);
}


.specialty-work__grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


.specialty-work-card {
    background: var(--paper-light);

    border: 2px solid var(--ink);

    box-shadow:
        6px 6px 0 var(--ink);
}


.specialty-work-card figure {
    position: relative;

    margin: 0;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background:
        repeating-linear-gradient(
            -45deg,
            var(--steel-dark) 0,
            var(--steel-dark) 16px,
            var(--steel) 16px,
            var(--steel) 17px
        );

    border-bottom: 2px solid var(--ink);
}


.specialty-work-card figure img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 350ms ease;
}


.specialty-work-card:hover figure img {
    transform: scale(1.025);
}


.specialty-work-card figcaption {
    position: absolute;

    top: 16px;
    left: 16px;

    padding: 8px 10px;

    background: var(--ink);
    color: var(--paper-light);

    border:
        1px solid var(--paper-light);

    font-family: var(--mono);
    font-size: 0.53rem;

    text-transform: uppercase;
}


.specialty-work-card > div {
    padding: 25px;
}


.specialty-work-card h3 {
    margin: 0 0 13px;

    font-family: var(--editorial);
    font-size: 2.15rem;
    line-height: 1;

    font-weight: 400;
}


.specialty-work-card p {
    margin: 0;

    font-size: 0.82rem;
    line-height: 1.7;
}


/* ==========================================================
   UPGRADE GUIDE
   ========================================================== */

.upgrade-guide {
    background: var(--kraft-light);
}


.upgrade-guide__grid {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.7fr)
        minmax(0, 1.3fr);

    gap: clamp(60px, 9vw, 120px);

    align-items: start;
}


.upgrade-guide h2 {
    margin: 0;

    font-family: var(--editorial);
    font-size: clamp(3.8rem, 5.8vw, 5.8rem);
    line-height: 0.92;
    letter-spacing: -0.045em;

    font-weight: 400;
}


.upgrade-guide__lead {
    margin: 24px 0 0;

    max-width: 500px;

    font-size: 0.92rem;
    line-height: 1.75;
}


.upgrade-guide__questions {
    border-top: 2px solid var(--ink);
}


.upgrade-guide__questions article {
    min-height: 76px;

    padding: 16px 0;

    display: grid;

    grid-template-columns:
        minmax(150px, 0.75fr)
        minmax(0, 1.25fr);

    gap: 28px;

    align-items: center;

    border-bottom:
        1px solid rgba(29, 29, 26, 0.35);
}


.upgrade-guide__questions span {
    color: var(--red);

    font-family: var(--mono);
    font-size: 0.58rem;

    text-transform: uppercase;
}


.upgrade-guide__questions strong {
    font-size: 0.84rem;
    line-height: 1.45;
}


/* ==========================================================
   SPECIALTY PROCESS
   ========================================================== */

.specialty-process {
    background: var(--paper-light);
}


.specialty-process__steps {
    margin: 0;
    padding: 0;

    list-style: none;

    border-top: 2px solid var(--ink);
}


.specialty-process__steps li {
    min-height: 122px;

    padding: 24px 0;

    display: grid;

    grid-template-columns:
        90px
        minmax(0, 1fr);

    gap: 34px;

    align-items: center;

    border-bottom:
        1px solid rgba(29, 29, 26, 0.33);
}


.specialty-process__steps li > span {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    background: var(--red);
    color: var(--paper-light);

    border: 2px solid var(--ink);

    box-shadow:
        4px 4px 0 var(--ink);

    font-family: var(--display);
    font-size: 1.35rem;
    font-weight: 800;
}


.specialty-process__steps h3 {
    margin: 0 0 7px;

    font-family: var(--editorial);
    font-size: 2rem;
    line-height: 1;

    font-weight: 400;
}


.specialty-process__steps p {
    max-width: 760px;

    margin: 0;

    font-size: 0.82rem;
    line-height: 1.65;
}


/* ==========================================================
   SERVICE OR REPAIR
   ========================================================== */

.service-or-repair {
    background: var(--paper-dark);
}


.service-or-repair__grid {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.72fr)
        minmax(0, 1.28fr);

    gap: clamp(60px, 9vw, 120px);

    align-items: start;
}


.service-or-repair h2 {
    margin: 0;

    font-family: var(--editorial);
    font-size: clamp(3.7rem, 5.6vw, 5.5rem);
    line-height: 0.94;
    letter-spacing: -0.045em;

    font-weight: 400;
}


.service-or-repair__choices {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border: 2px solid var(--ink);
}


.service-or-repair__choices article {
    min-height: 330px;

    padding: 28px;

    display: flex;
    flex-direction: column;

    background: var(--paper-light);

    border-left: 1px solid var(--ink);
}


.service-or-repair__choices article:first-child {
    border-left: 0;
}


.service-or-repair__choices article > span {
    color: var(--red);

    font-family: var(--mono);
    font-size: 0.57rem;

    text-transform: uppercase;
}


.service-or-repair__choices h3 {
    margin:
        28px
        0
        14px;

    font-family: var(--editorial);
    font-size: 2.4rem;
    line-height: 0.98;

    font-weight: 400;
}


.service-or-repair__choices p {
    margin: 0 0 28px;

    font-size: 0.82rem;
    line-height: 1.7;
}


.service-or-repair__choices .button {
    margin-top: auto;

    width: 100%;

    justify-content: center;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (min-width: 1440px) {

    .services-hero h1 {
        font-size: 5.9rem;
    }

    .service-feature__content h2,
    .upgrade-guide h2,
    .service-or-repair h2 {
        font-size: 4.8rem;
    }

}


@media (max-width: 1100px) {

    .services-hero__grid {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(360px, 0.8fr);

        gap: 50px;
    }

    .specialty-service {
        grid-template-columns:
            70px
            minmax(0, 1fr)
            155px;
    }

}


@media (max-width: 920px) {

    .services-hero__grid,
    .service-feature__grid,
    .upgrade-guide__grid,
    .service-or-repair__grid {
        grid-template-columns: 1fr;
    }

    .services-hero__media {
        width: min(680px, 100%);
    }

    .specialty-service {
        grid-template-columns:
            70px
            minmax(0, 1fr);
    }

    .specialty-service__price {
        grid-column: 2;

        width: fit-content;
        min-width: 160px;
    }

    .specialty-work__grid {
        grid-template-columns: 1fr;
    }

    .specialty-work-card {
        display: grid;

        grid-template-columns:
            minmax(280px, 0.8fr)
            minmax(0, 1fr);
    }

    .specialty-work-card figure {
        aspect-ratio: auto;
        min-height: 360px;

        border-bottom: 0;
        border-right: 2px solid var(--ink);
    }

}


@media (max-width: 720px) {

    .services-hero {
        padding-top: 50px;
    }

    .services-hero h1 {
        font-size: clamp(3.7rem, 14vw, 5rem);
    }

    .services-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .services-hero__actions .button {
        width: 100%;

        justify-content: center;
    }

    .services-hero__quick > div {
        grid-template-columns:
            130px
            minmax(0, 1fr);
    }

    .services-hero__note {
        width: calc(100% - 24px);

        right: 12px;
        bottom: 18px;
    }

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

        gap: 20px;
    }

    .specialty-service__price {
        grid-column: auto;
    }

    .specialty-service__content ul {
        grid-template-columns: 1fr;
    }

    .specialty-work-card {
        display: block;
    }

    .specialty-work-card figure {
        min-height: 0;

        aspect-ratio: 4 / 5;

        border-right: 0;
        border-bottom: 2px solid var(--ink);
    }

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

    .service-or-repair__choices article {
        border-left: 0;
        border-top: 1px solid var(--ink);
    }

    .service-or-repair__choices article:first-child {
        border-top: 0;
    }

}


@media (max-width: 560px) {

    .services-hero__quick > div {
        grid-template-columns: 1fr;

        gap: 6px;
    }

    .service-feature__facts > div {
        grid-template-columns: 1fr;

        gap: 5px;
    }

    .upgrade-guide__questions article {
        grid-template-columns: 1fr;

        gap: 7px;
    }

    .specialty-process__steps li {
        grid-template-columns:
            58px
            minmax(0, 1fr);

        gap: 18px;
    }

}


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

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

    .specialty-work-card figure img {
        transition: none;
    }

    .specialty-work-card:hover figure img {
        transform: none;
    }

}


/* GEAR ISSUES PREMIUM SERVICES END */


/* GEAR ISSUES PREMIUM ABOUT START */


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

.about-hero {
    padding:
        clamp(70px, 7vw, 112px)
        0
        clamp(82px, 8vw, 128px);

    border-top: 2px solid var(--ink);

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 31px,
            rgba(29, 29, 26, 0.03) 32px
        ),
        var(--paper-light);
}


.about-hero__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1fr);

    gap: clamp(60px, 8vw, 112px);

    align-items: center;
}


/* Ticket */

.about-hero__ticket {
    width: fit-content;
    min-width: 205px;

    margin-bottom: 38px;

    padding: 15px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    background: var(--kraft-light);

    border: 2px solid var(--ink);

    box-shadow:
        5px 5px 0 var(--ink);

    transform: rotate(-1deg);
}


.about-hero__ticket span {
    font-family: var(--mono);
    font-size: 0.62rem;

    text-transform: uppercase;
}


.about-hero__ticket strong {
    font-family: var(--display);
    font-size: 1.35rem;
    line-height: 1;

    font-weight: 900;
}


/* Hero copy */

.about-hero h1 {
    max-width: 740px;

    margin: 0;

    font-family: var(--editorial);
    font-size: clamp(4.5rem, 7vw, 7rem);
    line-height: 0.88;
    letter-spacing: -0.055em;

    font-weight: 400;
}


.about-hero h1 em {
    display: block;

    margin-top: 8px;

    color: var(--red);

    font-weight: 400;
}


.about-hero__lead {
    max-width: 650px;

    margin: 28px 0 0;

    font-size: 0.98rem;
    line-height: 1.8;
}


.about-hero__actions {
    margin-top: 32px;

    display: flex;
    flex-wrap: wrap;

    gap: 14px;
}


/* Facts */

.about-hero__facts {
    margin-top: 42px;

    border-top:
        1px solid rgba(29, 29, 26, 0.3);
}


.about-hero__facts > div {
    min-height: 64px;

    padding: 13px 0;

    display: grid;

    grid-template-columns:
        135px
        minmax(0, 1fr);

    gap: 20px;

    align-items: center;

    border-bottom:
        1px solid rgba(29, 29, 26, 0.22);
}


.about-hero__facts span {
    font-family: var(--mono);
    font-size: 0.58rem;

    text-transform: uppercase;
}


.about-hero__facts strong {
    font-size: 0.82rem;
    line-height: 1.45;
}


/* Hero media */

.about-hero__media {
    position: relative;
}


.about-hero__image-wrap {
    margin: 0;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background:
        repeating-linear-gradient(
            -45deg,
            var(--steel-dark) 0,
            var(--steel-dark) 18px,
            var(--steel) 18px,
            var(--steel) 19px
        );

    border: 2px solid var(--ink);

    box-shadow:
        10px 10px 0 var(--ink);

    transform: rotate(0.5deg);
}


.about-hero__image-wrap img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


.about-hero__label {
    position: absolute;

    top: 28px;
    left: -18px;

    z-index: 3;

    padding: 10px 14px;

    background: var(--ink);
    color: var(--paper-light);

    border: 2px solid var(--paper-light);

    box-shadow:
        4px 4px 0 var(--ink);

    font-family: var(--mono);
    font-size: 0.55rem;

    text-transform: uppercase;
}


.about-hero__note {
    position: absolute;

    right: -20px;
    bottom: 34px;

    z-index: 3;

    width: min(370px, 82%);

    padding: 22px;

    background: var(--paper-light);

    border: 2px solid var(--ink);

    box-shadow:
        6px 6px 0 var(--ink);
}


.about-hero__note span {
    display: block;

    margin-bottom: 8px;

    color: var(--red);

    font-family: var(--mono);
    font-size: 0.55rem;

    text-transform: uppercase;
}


.about-hero__note strong {
    display: block;

    font-family: var(--editorial);
    font-size: 1.65rem;
    line-height: 1;

    font-weight: 400;
}


.about-hero__note p {
    margin: 10px 0 0;

    font-size: 0.76rem;
    line-height: 1.5;
}


/* ==========================================================
   MANIFESTO
   ========================================================== */

.about-manifesto {
    background: var(--ink);
    color: var(--paper-light);

    border-block: 2px solid var(--ink);
}


.about-manifesto__grid {
    min-height: 300px;

    padding-block:
        clamp(48px, 6vw, 82px);

    display: grid;

    grid-template-columns:
        120px
        minmax(0, 1fr)
        220px;

    gap: 44px;

    align-items: center;
}


.about-manifesto__number {
    color: var(--red);

    font-family: var(--display);
    font-size: 3.5rem;
    line-height: 0.9;

    font-weight: 900;
}


.about-manifesto blockquote {
    margin: 0;
}


.about-manifesto blockquote p {
    margin: 0;

    max-width: 900px;

    color: var(--paper-light);

    font-family: var(--editorial);
    font-size: clamp(2.6rem, 4.3vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
}


.about-manifesto__stamp {
    padding: 20px;

    background: var(--kraft-light);
    color: var(--ink);

    border: 2px solid var(--paper-light);

    box-shadow:
        5px 5px 0 var(--red);

    transform: rotate(1.5deg);
}


.about-manifesto__stamp span {
    display: block;

    margin-bottom: 8px;

    color: var(--red);

    font-family: var(--mono);
    font-size: 0.54rem;

    text-transform: uppercase;
}


.about-manifesto__stamp strong {
    font-family: var(--display);
    font-size: 1.25rem;
    line-height: 1;

    font-weight: 800;
}


/* ==========================================================
   STORY
   ========================================================== */

.about-story {
    background: var(--paper-light);
}


.about-story__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    gap: clamp(65px, 9vw, 128px);

    align-items: start;
}


.about-story__heading h2 {
    margin: 0;

    font-family: var(--editorial);
    font-size: clamp(3.8rem, 5.8vw, 5.8rem);
    line-height: 0.93;
    letter-spacing: -0.045em;

    font-weight: 400;
}


.about-story__copy p {
    margin: 0 0 22px;

    font-size: 0.92rem;
    line-height: 1.8;
}


.about-story__copy p:last-child {
    margin-bottom: 0;
}


.about-story__lead {
    font-family: var(--editorial);
    font-size: 1.7rem !important;
    line-height: 1.35 !important;
}


/* ==========================================================
   PRINCIPLES
   ========================================================== */

.about-principles {
    background: var(--kraft-light);
}


.about-principles__grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border: 2px solid var(--ink);
}


.about-principles__grid article {
    min-height: 315px;

    padding: 30px;

    border-top: 1px solid var(--ink);
    border-left: 1px solid var(--ink);
}


.about-principles__grid article:nth-child(-n + 2) {
    border-top: 0;
}


.about-principles__grid article:nth-child(odd) {
    border-left: 0;
}


.about-principles__grid article > span {
    display: inline-flex;

    width: 44px;
    height: 44px;

    align-items: center;
    justify-content: center;

    margin-bottom: 50px;

    background: var(--red);
    color: var(--paper-light);

    border: 2px solid var(--ink);

    font-family: var(--mono);
    font-size: 0.58rem;
}


.about-principles__grid h3 {
    margin: 0 0 14px;

    font-family: var(--editorial);
    font-size: 2.45rem;
    line-height: 1;

    font-weight: 400;
}


.about-principles__grid p {
    margin: 0;

    max-width: 570px;

    font-size: 0.85rem;
    line-height: 1.72;
}


/* ==========================================================
   TEAM
   ========================================================== */

.about-team {
    background: var(--ink);
    color: var(--paper-light);
}


.about-team__grid {
    display: grid;

    grid-template-columns:
        minmax(390px, 0.92fr)
        minmax(0, 1.08fr);

    gap: clamp(60px, 8vw, 112px);

    align-items: center;
}


.about-team__media {
    position: relative;
}


.about-team__media figure {
    margin: 0;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: var(--steel-dark);

    border:
        1px solid rgba(251, 247, 238, 0.45);
}


.about-team__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


.about-team__tag {
    position: absolute;

    left: -16px;
    bottom: 28px;

    padding: 10px 13px;

    background: var(--red);
    color: var(--paper-light);

    border: 2px solid var(--paper-light);

    font-family: var(--mono);
    font-size: 0.54rem;

    text-transform: uppercase;
}


.about-team__content h2 {
    margin: 0;

    color: var(--paper-light);

    font-family: var(--editorial);
    font-size: clamp(3.8rem, 5.8vw, 5.8rem);
    line-height: 0.92;
    letter-spacing: -0.045em;

    font-weight: 400;
}


.about-team__content > p {
    max-width: 650px;

    margin: 24px 0 0;

    color: rgba(251, 247, 238, 0.76);

    font-size: 0.9rem;
    line-height: 1.75;
}


.about-team__roles {
    margin-top: 32px;

    border-top:
        1px solid rgba(251, 247, 238, 0.3);
}


.about-team__roles > div {
    min-height: 58px;

    padding: 13px 0;

    display: grid;

    grid-template-columns:
        110px
        minmax(0, 1fr);

    gap: 20px;

    align-items: center;

    border-bottom:
        1px solid rgba(251, 247, 238, 0.22);
}


.about-team__roles span {
    color: var(--orange-light);

    font-family: var(--mono);
    font-size: 0.55rem;

    text-transform: uppercase;
}


.about-team__roles strong {
    color: var(--paper-light);

    font-size: 0.8rem;
}


/* ==========================================================
   NUMBERS
   ========================================================== */

.about-numbers {
    background: var(--red);
    color: var(--paper-light);

    border-block: 2px solid var(--ink);
}


.about-numbers__grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


.about-numbers article {
    min-height: 210px;

    padding: 28px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 20px;

    border-left:
        1px solid rgba(251, 247, 238, 0.42);
}


.about-numbers article:first-child {
    border-left: 0;
}


.about-numbers strong {
    font-family: var(--display);
    font-size: clamp(3.4rem, 5vw, 5.3rem);
    line-height: 0.8;

    font-weight: 900;
}


.about-numbers span {
    max-width: 230px;

    font-size: 0.78rem;
    line-height: 1.55;

    font-weight: 600;
}


/* ==========================================================
   SHOP FLOOR
   ========================================================== */

.about-shop-floor {
    background: var(--paper);
}


.about-shop-floor__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(390px, 1fr);

    gap: clamp(60px, 8vw, 110px);

    align-items: center;
}


.about-shop-floor__content h2 {
    margin: 0;

    font-family: var(--editorial);
    font-size: clamp(3.7rem, 5.6vw, 5.5rem);
    line-height: 0.94;
    letter-spacing: -0.045em;

    font-weight: 400;
}


.about-shop-floor__content > p {
    margin: 25px 0 0;

    max-width: 650px;

    font-size: 0.9rem;
    line-height: 1.75;
}


.about-shop-floor__content ul {
    margin:
        30px
        0
        32px;

    padding: 0;

    list-style: none;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px 25px;
}


.about-shop-floor__content li {
    position: relative;

    padding:
        11px
        0
        11px
        20px;

    border-bottom:
        1px solid rgba(29, 29, 26, 0.24);

    font-size: 0.78rem;
}


.about-shop-floor__content li::before {
    content: "+";

    position: absolute;

    left: 0;

    color: var(--red);

    font-family: var(--mono);
}


.about-shop-floor__media {
    position: relative;
}


.about-shop-floor__media figure {
    margin: 0;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background:
        repeating-linear-gradient(
            -45deg,
            var(--steel-dark) 0,
            var(--steel-dark) 16px,
            var(--steel) 16px,
            var(--steel) 17px
        );

    border: 2px solid var(--ink);

    box-shadow:
        8px 8px 0 var(--ink);
}


.about-shop-floor__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


.about-shop-floor__media > span {
    position: absolute;

    left: 18px;
    bottom: 18px;

    padding: 9px 12px;

    background: var(--ink);
    color: var(--paper-light);

    border:
        1px solid var(--paper-light);

    font-family: var(--mono);
    font-size: 0.54rem;

    text-transform: uppercase;
}


/* ==========================================================
   POSITION
   ========================================================== */

.about-position {
    background: var(--paper-dark);
}


.about-position__grid {
    display: grid;

    grid-template-columns:
        minmax(280px, 0.68fr)
        minmax(0, 1.32fr);

    gap: clamp(60px, 9vw, 120px);

    align-items: start;
}


.about-position h2 {
    margin: 0;

    font-family: var(--editorial);
    font-size: clamp(3.7rem, 5.5vw, 5.4rem);
    line-height: 0.94;
    letter-spacing: -0.04em;

    font-weight: 400;
}


.about-position__columns {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border: 2px solid var(--ink);
}


.about-position__columns article {
    padding: 28px;

    background: var(--paper-light);

    border-left: 1px solid var(--ink);
}


.about-position__columns article:first-child {
    border-left: 0;
}


.about-position__columns article > span {
    display: block;

    margin-bottom: 28px;

    color: var(--red);

    font-family: var(--mono);
    font-size: 0.58rem;

    text-transform: uppercase;
}


.about-position__columns ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.about-position__columns li {
    position: relative;

    min-height: 48px;

    padding:
        13px
        0
        13px
        22px;

    border-top:
        1px solid rgba(29, 29, 26, 0.22);

    font-size: 0.8rem;
}


.about-position__columns li:first-child {
    border-top: 0;
}


.about-position__columns li::before {
    content: "—";

    position: absolute;

    left: 0;

    color: var(--red);

    font-family: var(--mono);
}


/* ==========================================================
   COMMUNITY QUOTES
   ========================================================== */

.about-community {
    background: var(--paper-light);
}


.about-community__grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}


.about-community blockquote {
    min-height: 320px;

    margin: 0;
    padding: 28px;

    display: flex;
    flex-direction: column;

    background: var(--paper);

    border: 2px solid var(--ink);

    box-shadow:
        5px 5px 0 var(--ink);
}


.about-community blockquote p {
    margin: 0;

    font-family: var(--editorial);
    font-size: 1.65rem;
    line-height: 1.2;

    font-weight: 400;
}


.about-community blockquote footer {
    margin-top: auto;
    padding-top: 32px;

    color: var(--red);

    font-family: var(--mono);
    font-size: 0.55rem;

    text-transform: uppercase;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (min-width: 1440px) {

    .about-hero h1 {
        font-size: 5.9rem;
    }

    .about-story__heading h2,
    .about-team__content h2,
    .about-shop-floor__content h2,
    .about-position h2 {
        font-size: 4.75rem;
    }

}


@media (max-width: 1080px) {

    .about-hero__grid {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(360px, 0.8fr);

        gap: 50px;
    }

    .about-manifesto__grid {
        grid-template-columns:
            80px
            minmax(0, 1fr);

        gap: 30px;
    }

    .about-manifesto__stamp {
        grid-column: 2;

        width: fit-content;
    }

}


@media (max-width: 920px) {

    .about-hero__grid,
    .about-story__grid,
    .about-team__grid,
    .about-shop-floor__grid,
    .about-position__grid {
        grid-template-columns: 1fr;
    }

    .about-hero__media,
    .about-team__media,
    .about-shop-floor__media {
        width: min(680px, 100%);
    }

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

    .about-numbers article:nth-child(3) {
        border-left: 0;
        border-top:
            1px solid rgba(251, 247, 238, 0.42);
    }

    .about-numbers article:nth-child(4) {
        border-top:
            1px solid rgba(251, 247, 238, 0.42);
    }

    .about-community__grid {
        grid-template-columns: 1fr;
    }

    .about-community blockquote {
        min-height: 240px;
    }

}


@media (max-width: 720px) {

    .about-hero {
        padding-top: 50px;
    }

    .about-hero h1 {
        font-size: clamp(3.7rem, 14vw, 5rem);
    }

    .about-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .about-hero__actions .button {
        width: 100%;

        justify-content: center;
    }

    .about-hero__note {
        width: calc(100% - 24px);

        right: 12px;
        bottom: 18px;
    }

    .about-manifesto__grid {
        grid-template-columns: 1fr;
    }

    .about-manifesto__stamp {
        grid-column: auto;
    }

    .about-principles__grid {
        grid-template-columns: 1fr;
    }

    .about-principles__grid article,
    .about-principles__grid article:nth-child(-n + 2),
    .about-principles__grid article:nth-child(odd) {
        border-left: 0;
        border-top: 1px solid var(--ink);
    }

    .about-principles__grid article:first-child {
        border-top: 0;
    }

    .about-position__columns {
        grid-template-columns: 1fr;
    }

    .about-position__columns article {
        border-left: 0;
        border-top: 1px solid var(--ink);
    }

    .about-position__columns article:first-child {
        border-top: 0;
    }

}


@media (max-width: 560px) {

    .about-hero__facts > div {
        grid-template-columns: 1fr;

        gap: 6px;
    }

    .about-team__roles > div {
        grid-template-columns: 1fr;

        gap: 5px;
    }

    .about-numbers__grid {
        grid-template-columns: 1fr;
    }

    .about-numbers article,
    .about-numbers article:nth-child(3),
    .about-numbers article:nth-child(4) {
        border-left: 0;

        border-top:
            1px solid rgba(251, 247, 238, 0.42);
    }

    .about-numbers article:first-child {
        border-top: 0;
    }

    .about-shop-floor__content ul {
        grid-template-columns: 1fr;
    }

}


/* GEAR ISSUES PREMIUM ABOUT END */


/* GEAR ISSUES PREMIUM FAQ START */


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

.faq-hero {
    padding:
        clamp(68px, 7vw, 110px)
        0
        clamp(84px, 8vw, 126px);

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 31px,
            rgba(29, 29, 26, 0.03) 32px
        ),
        var(--paper-light);

    border-top: 2px solid var(--ink);
}


.faq-hero__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(410px, 0.9fr);

    gap: clamp(58px, 8vw, 108px);

    align-items: center;
}


.faq-hero__ticket {
    width: fit-content;

    margin-bottom: 36px;

    padding: 14px 17px;

    display: flex;
    align-items: center;

    gap: 34px;

    background: var(--kraft-light);

    border: 2px solid var(--ink);

    box-shadow:
        5px 5px 0 var(--ink);

    transform: rotate(-1deg);
}


.faq-hero__ticket span {
    font-family: var(--mono);
    font-size: 0.58rem;

    text-transform: uppercase;
}


.faq-hero__ticket strong {
    font-family: var(--display);
    font-size: 1.45rem;
    line-height: 1;

    font-weight: 900;
}


.faq-hero h1 {
    max-width: 760px;

    margin: 0;

    font-family: var(--editorial);
    font-size: clamp(4.5rem, 7vw, 7rem);
    line-height: 0.89;
    letter-spacing: -0.055em;

    font-weight: 400;
}


.faq-hero h1 em {
    display: block;

    margin-top: 8px;

    color: var(--red);

    font-weight: 400;
}


.faq-hero__lead {
    max-width: 660px;

    margin: 28px 0 0;

    font-size: 0.96rem;
    line-height: 1.8;
}


.faq-hero__actions {
    margin-top: 32px;

    display: flex;
    flex-wrap: wrap;

    gap: 14px;
}


.faq-hero__quick {
    margin-top: 40px;

    border-top:
        1px solid rgba(29, 29, 26, 0.3);
}


.faq-hero__quick > div {
    min-height: 60px;

    padding: 12px 0;

    display: grid;

    grid-template-columns:
        150px
        minmax(0, 1fr);

    gap: 20px;

    align-items: center;

    border-bottom:
        1px solid rgba(29, 29, 26, 0.22);
}


.faq-hero__quick span {
    font-family: var(--mono);
    font-size: 0.57rem;

    text-transform: uppercase;
}


.faq-hero__quick strong {
    font-size: 0.82rem;
    line-height: 1.4;
}


/* Hero image */

.faq-hero__media {
    position: relative;
}


.faq-hero__media figure {
    margin: 0;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background:
        repeating-linear-gradient(
            -45deg,
            var(--steel-dark) 0,
            var(--steel-dark) 17px,
            var(--steel) 17px,
            var(--steel) 18px
        );

    border: 2px solid var(--ink);

    box-shadow:
        9px 9px 0 var(--ink);
}


.faq-hero__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


.faq-hero__label {
    position: absolute;

    top: 28px;
    left: -18px;

    z-index: 3;

    padding: 9px 13px;

    background: var(--ink);
    color: var(--paper-light);

    border: 2px solid var(--paper-light);

    font-family: var(--mono);
    font-size: 0.54rem;

    text-transform: uppercase;
}


.faq-hero__note {
    position: absolute;

    right: -18px;
    bottom: 28px;

    z-index: 3;

    width: min(360px, 83%);

    padding: 21px;

    background: var(--paper-light);

    border: 2px solid var(--ink);

    box-shadow:
        6px 6px 0 var(--ink);
}


.faq-hero__note span {
    display: block;

    margin-bottom: 8px;

    color: var(--red);

    font-family: var(--mono);
    font-size: 0.54rem;

    text-transform: uppercase;
}


.faq-hero__note strong {
    display: block;

    font-family: var(--editorial);
    font-size: 1.45rem;
    line-height: 1.08;

    font-weight: 400;
}


.faq-hero__note p {
    margin: 9px 0 0;

    font-size: 0.76rem;
}


/* ==========================================================
   FAQ INDEX
   ========================================================== */

.faq-index {
    position: sticky;

    top: 0;

    z-index: 20;

    background: var(--ink);

    border-block:
        1px solid rgba(251, 247, 238, 0.16);
}


.faq-index__inner {
    min-height: 64px;

    display: flex;
    align-items: center;

    gap: clamp(14px, 2.2vw, 28px);

    overflow-x: auto;

    scrollbar-width: none;
}


.faq-index__inner::-webkit-scrollbar {
    display: none;
}


.faq-index__inner > span {
    flex: 0 0 auto;

    color: var(--orange-light);

    font-family: var(--mono);
    font-size: 0.54rem;

    text-transform: uppercase;
}


.faq-index__inner a {
    flex: 0 0 auto;

    padding: 8px 11px;

    color: var(--paper-light);

    border:
        1px solid rgba(251, 247, 238, 0.25);

    font-family: var(--mono);
    font-size: 0.57rem;

    text-transform: uppercase;

    text-decoration: none;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
}


.faq-index__inner a:hover,
.faq-index__inner a:focus-visible {
    background: var(--red);

    border-color: var(--red);

    color: var(--paper-light);
}


/* ==========================================================
   FAQ GROUPS
   ========================================================== */

.faq-group {
    background: var(--paper-light);
}


.faq-group--dark {
    background: var(--ink);
    color: var(--paper-light);
}


.faq-group--kraft {
    background: var(--kraft-light);
}


.faq-group__grid {
    display: grid;

    grid-template-columns:
        minmax(290px, 0.68fr)
        minmax(0, 1.32fr);

    gap: clamp(58px, 8vw, 110px);

    align-items: start;
}


.faq-group__heading {
    position: sticky;

    top: 98px;
}


.faq-group__number {
    display: inline-flex;

    width: 54px;
    height: 54px;

    margin-bottom: 28px;

    align-items: center;
    justify-content: center;

    background: var(--red);
    color: var(--paper-light);

    border: 2px solid var(--ink);

    font-family: var(--mono);
    font-size: 0.65rem;
}


.faq-group__heading h2 {
    margin: 0;

    max-width: 520px;

    font-family: var(--editorial);
    font-size: clamp(3.4rem, 5vw, 5rem);
    line-height: 0.96;
    letter-spacing: -0.045em;

    font-weight: 400;
}


.faq-group__heading > p:last-child {
    max-width: 470px;

    margin: 22px 0 0;

    font-size: 0.86rem;
    line-height: 1.72;
}


.faq-group--dark .faq-group__heading h2 {
    color: var(--paper-light);
}


.faq-group--dark .faq-group__heading > p:last-child {
    color: rgba(251, 247, 238, 0.72);
}


/* ==========================================================
   FAQ ACCORDIONS
   ========================================================== */

.faq-list {
    border-top: 2px solid var(--ink);
}


.faq-group--dark .faq-list {
    border-color: rgba(251, 247, 238, 0.75);
}


.faq-list details {
    border-bottom: 1px solid var(--ink);
}


.faq-group--dark .faq-list details {
    border-color: rgba(251, 247, 238, 0.3);
}


.faq-list summary {
    position: relative;

    min-height: 94px;

    padding:
        27px
        70px
        27px
        0;

    display: flex;
    align-items: center;

    cursor: pointer;

    list-style: none;

    font-family: var(--editorial);
    font-size: clamp(1.55rem, 2.2vw, 2.15rem);
    line-height: 1.15;

    transition:
        color 160ms ease,
        padding-left 160ms ease;
}


.faq-list summary::-webkit-details-marker {
    display: none;
}


.faq-list summary::after {
    content: "+";

    position: absolute;

    top: 50%;
    right: 8px;

    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    transform: translateY(-50%);

    background: var(--paper);
    color: var(--ink);

    border: 2px solid var(--ink);

    font-family: var(--mono);
    font-size: 1.2rem;
    line-height: 1;

    transition:
        transform 180ms ease,
        background-color 180ms ease,
        color 180ms ease;
}


.faq-group--dark .faq-list summary::after {
    background: var(--paper-light);
}


.faq-list summary:hover,
.faq-list summary:focus-visible {
    color: var(--red);

    padding-left: 8px;
}


.faq-list details[open] summary {
    color: var(--red);
}


.faq-list details[open] summary::after {
    content: "−";

    background: var(--red);
    color: var(--paper-light);

    transform:
        translateY(-50%)
        rotate(2deg);
}


.faq-answer {
    padding:
        0
        72px
        30px
        0;
}


.faq-answer p {
    max-width: 760px;

    margin: 0;

    font-size: 0.88rem;
    line-height: 1.8;
}


.faq-group--dark .faq-answer p {
    color: rgba(251, 247, 238, 0.76);
}


/* ==========================================================
   STILL HAVE A QUESTION
   ========================================================== */

.faq-contact {
    padding:
        clamp(75px, 8vw, 120px)
        0;

    background: var(--paper-dark);

    border-block: 2px solid var(--ink);
}


.faq-contact__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: clamp(60px, 9vw, 120px);

    align-items: center;
}


.faq-contact h2 {
    margin: 0;

    max-width: 680px;

    font-family: var(--editorial);
    font-size: clamp(3.6rem, 5.5vw, 5.4rem);
    line-height: 0.94;
    letter-spacing: -0.045em;

    font-weight: 400;
}


.faq-contact__content p {
    max-width: 600px;

    margin: 0;

    font-size: 0.92rem;
    line-height: 1.75;
}


.faq-contact__actions {
    margin-top: 28px;

    display: flex;
    flex-wrap: wrap;

    gap: 14px;
}


/* ==========================================================
   DESKTOP TUNING
   ========================================================== */

@media (min-width: 1440px) {

    .faq-hero h1 {
        font-size: 5.9rem;
    }

    .faq-group__heading h2 {
        font-size: 4.35rem;
    }

    .faq-contact h2 {
        font-size: 4.6rem;
    }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1080px) {

    .faq-hero__grid {
        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(350px, 0.75fr);

        gap: 48px;
    }

    .faq-group__grid {
        grid-template-columns:
            minmax(240px, 0.62fr)
            minmax(0, 1.38fr);

        gap: 48px;
    }

}


/* ==========================================================
   SMALL TABLET
   ========================================================== */

@media (max-width: 920px) {

    .faq-hero__grid,
    .faq-group__grid,
    .faq-contact__grid {
        grid-template-columns: 1fr;
    }

    .faq-hero__media {
        width: min(680px, 100%);
    }

    .faq-group__heading {
        position: static;
    }

    .faq-group__heading > p:last-child {
        max-width: 650px;
    }

}


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

@media (max-width: 720px) {

    .faq-hero {
        padding-top: 50px;
    }

    .faq-hero h1 {
        font-size: clamp(3.7rem, 14vw, 5rem);
    }

    .faq-hero__actions,
    .faq-contact__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .faq-hero__actions .button,
    .faq-contact__actions .button {
        width: 100%;

        justify-content: center;
    }

    .faq-hero__note {
        right: 12px;

        width: calc(100% - 24px);
    }

    .faq-index {
        position: static;
    }

    .faq-list summary {
        min-height: 82px;

        padding:
            22px
            56px
            22px
            0;

        font-size: 1.45rem;
    }

    .faq-list summary::after {
        right: 0;

        width: 34px;
        height: 34px;
    }

    .faq-answer {
        padding:
            0
            10px
            24px
            0;
    }

}


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

@media (max-width: 560px) {

    .faq-hero__quick > div {
        grid-template-columns: 1fr;

        gap: 5px;
    }

    .faq-group__number {
        width: 46px;
        height: 46px;
    }

    .faq-group__heading h2 {
        font-size: 3.25rem;
    }

    .faq-list summary {
        font-size: 1.32rem;
    }

}


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

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

    .faq-index__inner a,
    .faq-list summary,
    .faq-list summary::after {
        transition: none;
    }

}


/* GEAR ISSUES PREMIUM FAQ END */


/* GEAR ISSUES PREMIUM CONTACT START */


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

.contact-hero {
    padding:
        clamp(68px, 7vw, 110px)
        0
        clamp(84px, 8vw, 126px);

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 31px,
            rgba(29, 29, 26, 0.03) 32px
        ),
        var(--paper-light);

    border-top: 2px solid var(--ink);
}


.contact-hero__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(410px, 0.9fr);

    gap: clamp(58px, 8vw, 108px);

    align-items: center;
}


.contact-hero__ticket {
    width: fit-content;

    margin-bottom: 36px;

    padding: 14px 17px;

    display: flex;
    align-items: center;

    gap: 34px;

    background: var(--kraft-light);

    border: 2px solid var(--ink);

    box-shadow:
        5px 5px 0 var(--ink);

    transform: rotate(-1deg);
}


.contact-hero__ticket span {
    font-family: var(--mono);
    font-size: 0.58rem;

    text-transform: uppercase;
}


.contact-hero__ticket strong {
    font-family: var(--display);
    font-size: 1.45rem;
    line-height: 1;

    font-weight: 900;
}


.contact-hero h1 {
    max-width: 760px;

    margin: 0;

    font-family: var(--editorial);
    font-size: clamp(4.5rem, 7vw, 7rem);
    line-height: 0.89;
    letter-spacing: -0.055em;

    font-weight: 400;
}


.contact-hero h1 em {
    display: block;

    margin-top: 8px;

    color: var(--red);

    font-weight: 400;
}


.contact-hero__lead {
    max-width: 660px;

    margin: 28px 0 0;

    font-size: 0.96rem;
    line-height: 1.8;
}


.contact-hero__actions {
    margin-top: 32px;

    display: flex;
    flex-wrap: wrap;

    gap: 14px;
}


.contact-hero__quick {
    margin-top: 40px;

    border-top:
        1px solid rgba(29, 29, 26, 0.3);
}


.contact-hero__quick > div {
    min-height: 60px;

    padding: 12px 0;

    display: grid;

    grid-template-columns:
        120px
        minmax(0, 1fr);

    gap: 20px;

    align-items: center;

    border-bottom:
        1px solid rgba(29, 29, 26, 0.22);
}


.contact-hero__quick span {
    font-family: var(--mono);
    font-size: 0.57rem;

    text-transform: uppercase;
}


.contact-hero__quick strong {
    font-size: 0.82rem;
    line-height: 1.4;
}


/* Hero media */

.contact-hero__media {
    position: relative;
}


.contact-hero__media figure {
    margin: 0;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background:
        repeating-linear-gradient(
            -45deg,
            var(--steel-dark) 0,
            var(--steel-dark) 17px,
            var(--steel) 17px,
            var(--steel) 18px
        );

    border: 2px solid var(--ink);

    box-shadow:
        9px 9px 0 var(--ink);
}


.contact-hero__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


.contact-hero__label {
    position: absolute;

    top: 28px;
    left: -18px;

    z-index: 3;

    padding: 9px 13px;

    background: var(--ink);
    color: var(--paper-light);

    border: 2px solid var(--paper-light);

    font-family: var(--mono);
    font-size: 0.54rem;

    text-transform: uppercase;
}


.contact-hero__note {
    position: absolute;

    right: -18px;
    bottom: 28px;

    z-index: 3;

    width: min(360px, 83%);

    padding: 21px;

    background: var(--paper-light);

    border: 2px solid var(--ink);

    box-shadow:
        6px 6px 0 var(--ink);
}


.contact-hero__note span {
    display: block;

    margin-bottom: 8px;

    color: var(--red);

    font-family: var(--mono);
    font-size: 0.54rem;

    text-transform: uppercase;
}


.contact-hero__note strong {
    display: block;

    font-family: var(--editorial);
    font-size: 1.55rem;
    line-height: 1.05;

    font-weight: 400;
}


.contact-hero__note p {
    margin: 9px 0 0;

    font-size: 0.76rem;
    line-height: 1.45;
}


/* ==========================================================
   CONTACT STRIP
   ========================================================== */

.contact-strip {
    background: var(--ink);
    color: var(--paper-light);

    border-block: 2px solid var(--ink);
}


.contact-strip__grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


.contact-strip__item {
    min-height: 190px;

    padding: 28px;

    display: flex;
    flex-direction: column;

    border-left:
        1px solid rgba(251, 247, 238, 0.25);

    color: var(--paper-light);

    text-decoration: none;
}


.contact-strip__item:first-child {
    border-left: 0;
}


a.contact-strip__item {
    transition:
        background-color 160ms ease,
        color 160ms ease;
}


a.contact-strip__item:hover,
a.contact-strip__item:focus-visible {
    background: var(--red);
}


.contact-strip__item span {
    margin-bottom: 32px;

    color: var(--orange-light);

    font-family: var(--mono);
    font-size: 0.55rem;

    text-transform: uppercase;
}


.contact-strip__item strong {
    font-family: var(--editorial);
    font-size: clamp(1.55rem, 2.3vw, 2.3rem);
    line-height: 1.05;

    font-weight: 400;
}


.contact-strip__item em {
    margin-top: auto;
    padding-top: 22px;

    color: rgba(251, 247, 238, 0.67);

    font-family: var(--body);
    font-size: 0.73rem;
    line-height: 1.5;

    font-style: normal;
}


/* ==========================================================
   VISIT + HOURS
   ========================================================== */

.contact-visit {
    background: var(--paper-light);
}


.contact-visit__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.86fr)
        minmax(380px, 0.9fr);

    gap: clamp(64px, 9vw, 128px);

    align-items: start;
}


.contact-visit__content h2 {
    margin: 0;

    font-family: var(--editorial);
    font-size: clamp(3.7rem, 5.6vw, 5.6rem);
    line-height: 0.94;
    letter-spacing: -0.045em;

    font-weight: 400;
}


.contact-visit__content > p {
    max-width: 640px;

    margin: 24px 0 0;

    font-size: 0.9rem;
    line-height: 1.75;
}


.contact-visit__address {
    margin-top: 34px;

    padding: 24px;

    display: flex;
    flex-direction: column;

    gap: 5px;

    background: var(--kraft-light);

    border: 2px solid var(--ink);

    box-shadow:
        5px 5px 0 var(--ink);

    font-style: normal;
}


.contact-visit__address strong {
    margin-bottom: 6px;

    font-family: var(--display);
    font-size: 1.7rem;
    line-height: 1;

    font-weight: 900;
}


.contact-visit__address span {
    font-size: 0.82rem;
}


.contact-visit__small-print {
    margin-top: 28px;

    max-width: 620px;

    display: grid;

    grid-template-columns:
        90px
        minmax(0, 1fr);

    gap: 20px;
}


.contact-visit__small-print span {
    color: var(--red);

    font-family: var(--mono);
    font-size: 0.56rem;

    text-transform: uppercase;
}


.contact-visit__small-print p {
    margin: 0;

    font-size: 0.78rem;
    line-height: 1.6;
}


/* Hours ticket */

.contact-hours {
    background: var(--ink);
    color: var(--paper-light);

    border: 2px solid var(--ink);

    box-shadow:
        8px 8px 0 var(--red);
}


.contact-hours__header {
    min-height: 100px;

    padding: 24px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: var(--red);

    border-bottom:
        2px solid var(--paper-light);
}


.contact-hours__header span {
    margin-bottom: 7px;

    font-family: var(--mono);
    font-size: 0.55rem;

    text-transform: uppercase;
}


.contact-hours__header strong {
    font-family: var(--display);
    font-size: 2rem;
    line-height: 1;

    font-weight: 900;
}


.contact-hours dl {
    margin: 0;
    padding: 0 24px;
}


.contact-hours dl > div {
    min-height: 61px;

    display: grid;

    grid-template-columns:
        minmax(100px, 0.7fr)
        minmax(0, 1fr);

    gap: 24px;

    align-items: center;

    border-bottom:
        1px solid rgba(251, 247, 238, 0.2);
}


.contact-hours dt {
    font-family: var(--mono);
    font-size: 0.57rem;

    text-transform: uppercase;
}


.contact-hours dd {
    margin: 0;

    font-size: 0.8rem;
    line-height: 1.4;

    text-align: right;
}


.contact-hours__closed dd {
    color: var(--orange-light);
}


.contact-hours__note {
    margin: 0;

    padding: 20px 24px;

    color: rgba(251, 247, 238, 0.6);

    font-size: 0.68rem;
    line-height: 1.5;
}


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

.contact-repair {
    background: var(--paper-dark);
}


.contact-repair__grid {
    display: grid;

    grid-template-columns:
        minmax(280px, 0.68fr)
        minmax(0, 1.32fr);

    gap: clamp(58px, 8vw, 110px);

    align-items: start;
}


.contact-repair__intro {
    position: sticky;

    top: 100px;
}


.contact-repair__ticket {
    width: fit-content;

    margin-bottom: 34px;

    padding: 14px 16px;

    display: flex;

    gap: 26px;

    background: var(--kraft-light);

    border: 2px solid var(--ink);

    box-shadow:
        4px 4px 0 var(--ink);
}


.contact-repair__ticket span {
    font-family: var(--mono);
    font-size: 0.54rem;

    text-transform: uppercase;
}


.contact-repair__ticket strong {
    font-family: var(--display);
    font-size: 1.1rem;
    line-height: 1;

    font-weight: 900;
}


.contact-repair__intro h2 {
    margin: 0;

    font-family: var(--editorial);
    font-size: clamp(3.5rem, 5vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.045em;

    font-weight: 400;
}


.contact-repair__intro > p {
    margin: 24px 0 0;

    max-width: 500px;

    font-size: 0.86rem;
    line-height: 1.75;
}


.contact-repair__examples {
    margin-top: 34px;

    border-top:
        1px solid rgba(29, 29, 26, 0.3);
}


.contact-repair__examples span {
    display: block;

    margin-top: 18px;

    color: var(--red);

    font-family: var(--mono);
    font-size: 0.53rem;

    text-transform: uppercase;
}


.contact-repair__examples p {
    margin: 6px 0 0;

    font-family: var(--editorial);
    font-size: 1.15rem;
    line-height: 1.35;
}


/* Form */

.contact-repair-form {
    padding: clamp(26px, 4vw, 42px);

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;

    background: var(--paper-light);

    border: 2px solid var(--ink);

    box-shadow:
        8px 8px 0 var(--ink);
}


.repair-form__heading {
    grid-column: 1 / -1;

    min-height: 72px;

    padding-bottom: 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    border-bottom: 2px solid var(--ink);
}


.repair-form__heading span {
    color: var(--red);

    font-family: var(--mono);
    font-size: 0.56rem;

    text-transform: uppercase;
}


.repair-form__heading strong {
    font-family: var(--display);
    font-size: 1.7rem;
    line-height: 1;

    font-weight: 900;
}


.form-field {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.form-field--wide {
    grid-column: 1 / -1;
}


.form-field label {
    font-family: var(--mono);
    font-size: 0.56rem;

    text-transform: uppercase;

    font-weight: 500;
}


.form-field label span {
    color: var(--red);
}


.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;

    padding: 14px 15px;

    background: var(--white);
    color: var(--ink);

    border: 1px solid var(--ink);

    border-radius: 0;

    font: inherit;

    font-size: 0.82rem;

    outline: none;

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background-color 150ms ease;
}


.form-field input,
.form-field select {
    min-height: 52px;
}


.form-field textarea {
    min-height: 180px;

    resize: vertical;
}


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

    box-shadow:
        0 0 0 3px rgba(198, 64, 50, 0.15);
}


.form-field textarea::placeholder {
    color: var(--ink-muted);

    opacity: 0.72;
}


.repair-form__footer {
    grid-column: 1 / -1;

    padding-top: 6px;

    display: flex;
    align-items: center;

    gap: 24px;
}


.repair-form__footer p {
    margin: 0;

    max-width: 390px;

    color: var(--ink-muted);

    font-size: 0.66rem;
    line-height: 1.5;
}


.form-status {
    grid-column: 1 / -1;

    margin: 0;

    min-height: 1.2em;

    font-size: 0.75rem;
    line-height: 1.5;

    font-weight: 700;
}


/* ==========================================================
   BEFORE DROP-OFF
   ========================================================== */

.contact-before {
    background: var(--kraft-light);
}


.contact-before__grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border: 2px solid var(--ink);
}


.contact-before__grid article {
    min-height: 310px;

    padding: 28px;

    border-left: 1px solid var(--ink);
}


.contact-before__grid article:first-child {
    border-left: 0;
}


.contact-before__grid article > span {
    display: inline-flex;

    width: 44px;
    height: 44px;

    align-items: center;
    justify-content: center;

    margin-bottom: 56px;

    background: var(--red);
    color: var(--paper-light);

    border: 2px solid var(--ink);

    font-family: var(--mono);
    font-size: 0.58rem;
}


.contact-before__grid h3 {
    margin: 0 0 14px;

    font-family: var(--editorial);
    font-size: 2.1rem;
    line-height: 1;

    font-weight: 400;
}


.contact-before__grid p {
    margin: 0;

    font-size: 0.8rem;
    line-height: 1.7;
}


/* ==========================================================
   PROCESS
   ========================================================== */

.contact-process {
    background: var(--ink);
    color: var(--paper-light);
}


.contact-process__grid {
    display: grid;

    grid-template-columns:
        minmax(250px, 0.55fr)
        minmax(0, 1.45fr);

    gap: clamp(60px, 8vw, 110px);

    align-items: start;
}


.contact-process__heading h2 {
    margin: 0;

    color: var(--paper-light);

    font-family: var(--editorial);
    font-size: clamp(4rem, 6vw, 6rem);
    line-height: 0.9;
    letter-spacing: -0.05em;

    font-weight: 400;
}


.contact-process__steps {
    margin: 0;
    padding: 0;

    list-style: none;

    border-top:
        1px solid rgba(251, 247, 238, 0.45);
}


.contact-process__steps li {
    min-height: 145px;

    padding: 26px 0;

    display: grid;

    grid-template-columns:
        75px
        minmax(0, 1fr);

    gap: 28px;

    border-bottom:
        1px solid rgba(251, 247, 238, 0.25);
}


.contact-process__steps > li > span {
    color: var(--orange-light);

    font-family: var(--display);
    font-size: 2.2rem;
    line-height: 1;

    font-weight: 900;
}


.contact-process__steps strong {
    display: block;

    margin-bottom: 8px;

    color: var(--paper-light);

    font-family: var(--editorial);
    font-size: 1.8rem;
    line-height: 1;

    font-weight: 400;
}


.contact-process__steps p {
    max-width: 650px;

    margin: 0;

    color: rgba(251, 247, 238, 0.7);

    font-size: 0.82rem;
    line-height: 1.7;
}


/* ==========================================================
   QUICK QUESTIONS
   ========================================================== */

.contact-questions {
    padding:
        clamp(74px, 8vw, 118px)
        0;

    background: var(--paper-light);

    border-bottom: 2px solid var(--ink);
}


.contact-questions__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    gap: clamp(60px, 9vw, 120px);

    align-items: center;
}


.contact-questions h2 {
    margin: 0;

    max-width: 720px;

    font-family: var(--editorial);
    font-size: clamp(3.5rem, 5.4vw, 5.3rem);
    line-height: 0.95;
    letter-spacing: -0.045em;

    font-weight: 400;
}


.contact-questions__content p {
    max-width: 600px;

    margin: 0 0 28px;

    font-size: 0.9rem;
    line-height: 1.75;
}


/* ==========================================================
   DESKTOP TUNING
   ========================================================== */

@media (min-width: 1440px) {

    .contact-hero h1 {
        font-size: 5.9rem;
    }

    .contact-visit__content h2 {
        font-size: 4.75rem;
    }

    .contact-repair__intro h2 {
        font-size: 4.35rem;
    }

    .contact-questions h2 {
        font-size: 4.55rem;
    }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1080px) {

    .contact-hero__grid {
        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(350px, 0.75fr);

        gap: 48px;
    }

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

    .contact-before__grid article:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--ink);
    }

    .contact-before__grid article:nth-child(4) {
        border-top: 1px solid var(--ink);
    }

}


/* ==========================================================
   SMALL TABLET
   ========================================================== */

@media (max-width: 920px) {

    .contact-hero__grid,
    .contact-visit__grid,
    .contact-repair__grid,
    .contact-process__grid,
    .contact-questions__grid {
        grid-template-columns: 1fr;
    }

    .contact-hero__media {
        width: min(680px, 100%);
    }

    .contact-strip__grid {
        grid-template-columns: 1fr;
    }

    .contact-strip__item {
        min-height: 145px;

        border-left: 0;
        border-top:
            1px solid rgba(251, 247, 238, 0.25);
    }

    .contact-strip__item:first-child {
        border-top: 0;
    }

    .contact-repair__intro {
        position: static;
    }

}


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

@media (max-width: 720px) {

    .contact-hero {
        padding-top: 50px;
    }

    .contact-hero h1 {
        font-size: clamp(3.7rem, 14vw, 5rem);
    }

    .contact-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-hero__actions .button {
        width: 100%;

        justify-content: center;
    }

    .contact-hero__note {
        right: 12px;

        width: calc(100% - 24px);
    }

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

    .repair-form__heading,
    .form-field--wide,
    .repair-form__footer,
    .form-status {
        grid-column: 1;
    }

    .repair-form__footer {
        flex-direction: column;
        align-items: stretch;
    }

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

        justify-content: center;
    }

    .contact-before__grid {
        grid-template-columns: 1fr;
    }

    .contact-before__grid article,
    .contact-before__grid article:nth-child(3),
    .contact-before__grid article:nth-child(4) {
        border-left: 0;
        border-top: 1px solid var(--ink);
    }

    .contact-before__grid article:first-child {
        border-top: 0;
    }

}


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

@media (max-width: 560px) {

    .contact-hero__quick > div,
    .contact-visit__small-print {
        grid-template-columns: 1fr;

        gap: 6px;
    }

    .contact-hours dl > div {
        grid-template-columns: 1fr;

        gap: 4px;

        padding: 13px 0;
    }

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

    .repair-form__heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .contact-process__steps li {
        grid-template-columns: 50px minmax(0, 1fr);

        gap: 18px;
    }

}


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

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

    a.contact-strip__item,
    .form-field input,
    .form-field select,
    .form-field textarea {
        transition: none;
    }

}


/* GEAR ISSUES PREMIUM CONTACT END */


/* GEAR ISSUES PREMIUM NAV NORMALIZATION START */


/* ==========================================================
   CANONICAL PREMIUM HEADER
   Homepage + every interior premium page
   ========================================================== */

.premium-home .site-header,
.premium-page .site-header {
    z-index: 1000;
}


.premium-home .site-header__main,
.premium-page .site-header__main {
    width: min(
        var(--wide),
        calc(100% - (var(--side) * 2))
    );

    min-height: 112px;

    margin-inline: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 42px;
}


/* ==========================================================
   CANONICAL BRAND POSITION + SIZE
   ========================================================== */

.premium-home .site-brand,
.premium-page .site-brand {
    display: inline-flex;
    align-items: center;

    gap: 18px;

    flex: 0 0 auto;

    color: var(--ink);
    text-decoration: none;
}


.premium-home .site-brand__logo,
.premium-page .site-brand__logo {
    display: block !important;

    width: 72px !important;
    height: 72px !important;

    min-width: 72px;
    flex: 0 0 72px;

    visibility: visible !important;
    opacity: 1 !important;

    object-fit: contain;
}


.premium-home .site-brand__copy,
.premium-page .site-brand__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 6px;
}


.premium-home .site-brand__copy strong,
.premium-page .site-brand__copy strong {
    color: var(--ink);

    font-family: var(--display);
    font-size: 1.95rem;
    line-height: 0.9;
    letter-spacing: -0.025em;

    font-weight: 900;

    text-transform: uppercase;
}


.premium-home .site-brand__copy small,
.premium-page .site-brand__copy small {
    color: var(--ink);

    font-family: var(--mono);
    font-size: 0.67rem;
    line-height: 1;
    letter-spacing: 0.085em;

    font-weight: 500;

    text-transform: uppercase;
}


/* ==========================================================
   CANONICAL NAV POSITION
   ========================================================== */

.premium-home .site-nav,
.premium-page .site-nav {
    margin-left: auto;

    gap: clamp(
        18px,
        2vw,
        30px
    );
}


.premium-home .site-nav > a:not(.site-nav__cta),
.premium-page .site-nav > a:not(.site-nav__cta) {
    flex: 0 0 auto;

    white-space: nowrap;

    font-family: var(--body);
    font-size: 0.76rem;
    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -0.015em;
    text-transform: none;
}


/* Active interior-page item */

.premium-page .site-nav a[aria-current="page"] {
    color: var(--red);
}


/* ==========================================================
   CANONICAL BOOK-A-REPAIR CTA
   Horizontal on ALL premium desktop pages
   ========================================================== */

@media (min-width: 821px) {

    .premium-home .site-nav__cta,
    .premium-page .site-nav__cta {
        flex: 0 0 auto;

        width: auto !important;
        min-width: 158px;
        min-height: 56px;

        margin-left: 6px;

        padding:
            0
            20px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        white-space: nowrap;

        font-family: var(--mono);
        font-size: 0.74rem;
        line-height: 1;

        text-align: center;
        text-transform: uppercase;

        letter-spacing: 0.04em;
    }

}


/* ==========================================================
   COMPACT DESKTOP
   Same dimensions for homepage + interiors
   ========================================================== */

@media (max-width: 1180px) and (min-width: 821px) {

    .premium-home .site-header__main,
    .premium-page .site-header__main {
        min-height: 98px;

        gap: 30px;
    }


    .premium-home .site-brand__logo,
    .premium-page .site-brand__logo {
        width: 60px !important;
        height: 60px !important;

        min-width: 60px;
        flex-basis: 60px;
    }


    .premium-home .site-brand__copy strong,
    .premium-page .site-brand__copy strong {
        font-size: 1.7rem;
    }


    .premium-home .site-brand__copy small,
    .premium-page .site-brand__copy small {
        font-size: 0.61rem;
    }


    .premium-home .site-nav,
    .premium-page .site-nav {
        gap: clamp(
            14px,
            1.5vw,
            22px
        );
    }


    .premium-home .site-nav__cta,
    .premium-page .site-nav__cta {
        min-width: 148px;

        padding-inline: 16px;
    }

}


/* ==========================================================
   MOBILE
   Keep all premium pages identical
   ========================================================== */

@media (max-width: 820px) {

    .premium-home .site-header__main,
    .premium-page .site-header__main {
        width: auto;

        min-height: 86px;

        margin-inline: 0;

        gap: 20px;
    }


    .premium-home .site-brand,
    .premium-page .site-brand {
        gap: 12px;
    }


    .premium-home .site-brand__logo,
    .premium-page .site-brand__logo {
        width: 52px !important;
        height: 52px !important;

        min-width: 52px;
        flex-basis: 52px;
    }


    .premium-home .site-brand__copy strong,
    .premium-page .site-brand__copy strong {
        font-size: 1.4rem;
    }


    .premium-home .site-brand__copy small,
    .premium-page .site-brand__copy small {
        font-size: 0.53rem;
    }


    .premium-home .site-nav,
    .premium-page .site-nav {
        margin-left: 0;

        gap: 0;
    }


    .premium-home .site-nav > a:not(.site-nav__cta),
    .premium-page .site-nav > a:not(.site-nav__cta) {
        font-size: 1rem;

        white-space: normal;
    }


    .premium-home .site-nav__cta,
    .premium-page .site-nav__cta {
        margin-left: 0;

        white-space: normal;
    }

}


/* ==========================================================
   SMALL PHONES
   ========================================================== */

@media (max-width: 420px) {

    .premium-home .site-brand__logo,
    .premium-page .site-brand__logo {
        width: 46px !important;
        height: 46px !important;

        min-width: 46px;
        flex-basis: 46px;
    }


    .premium-home .site-brand__copy strong,
    .premium-page .site-brand__copy strong {
        font-size: 1.2rem;
    }

}


/* GEAR ISSUES PREMIUM NAV NORMALIZATION END */


/* GEAR ISSUES PREMIUM HEADER WIDTH START */


/* ==========================================================
   FINAL PREMIUM HEADER WIDTH
   Pull the entire navigation system slightly inward.
   ========================================================== */

@media (min-width: 821px) {

    .premium-home .site-header__main,
    .premium-page .site-header__main {
        width: min(
            1180px,
            calc(100% - (var(--side) * 2))
        );
    }

}


/* GEAR ISSUES PREMIUM HEADER WIDTH END */


/* GEAR ISSUES PREMIUM 404 START */


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

.error-hero {
    padding:
        clamp(70px, 7vw, 112px)
        0
        clamp(86px, 8vw, 128px);

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 31px,
            rgba(29, 29, 26, 0.03) 32px
        ),
        var(--paper-light);

    border-top: 2px solid var(--ink);
}


.error-hero__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(390px, 0.85fr);

    gap: clamp(60px, 8vw, 112px);

    align-items: center;
}


.error-ticket {
    width: fit-content;

    margin-bottom: 36px;

    padding: 14px 17px;

    display: flex;
    align-items: center;

    gap: 32px;

    background: var(--kraft-light);

    border: 2px solid var(--ink);

    box-shadow:
        5px 5px 0 var(--ink);

    transform: rotate(-1deg);
}


.error-ticket span {
    font-family: var(--mono);
    font-size: 0.58rem;

    text-transform: uppercase;
}


.error-ticket strong {
    font-family: var(--display);
    font-size: 1.5rem;
    line-height: 1;

    font-weight: 900;
}


.error-hero h1 {
    margin: 0;

    max-width: 720px;

    font-family: var(--editorial);
    font-size: clamp(4.8rem, 7.2vw, 7.2rem);
    line-height: 0.88;
    letter-spacing: -0.055em;

    font-weight: 400;
}


.error-hero h1 em {
    display: block;

    margin-top: 8px;

    color: var(--red);

    font-weight: 400;
}


.error-hero__lead {
    max-width: 650px;

    margin: 28px 0 0;

    font-family: var(--editorial);
    font-size: 1.5rem;
    line-height: 1.35;
}


.error-hero__secondary {
    max-width: 640px;

    margin: 20px 0 0;

    font-size: 0.9rem;
    line-height: 1.75;
}


.error-hero__actions {
    margin-top: 32px;

    display: flex;
    flex-wrap: wrap;

    gap: 14px;
}


.error-hero__quick {
    margin-top: 42px;

    border-top:
        1px solid rgba(29, 29, 26, 0.3);
}


.error-hero__quick a {
    min-height: 68px;

    padding: 13px 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 20px;

    align-items: center;

    border-bottom:
        1px solid rgba(29, 29, 26, 0.22);

    text-decoration: none;
}


.error-hero__quick span {
    font-size: 0.76rem;
    line-height: 1.45;
}


.error-hero__quick strong {
    color: var(--red);

    font-family: var(--mono);
    font-size: 0.6rem;

    text-transform: uppercase;
}


/* ==========================================================
   404 VISUAL / MISSING ITEM REPORT
   ========================================================== */

.error-visual {
    position: relative;
}


.error-visual__paper {
    position: relative;

    min-height: 590px;

    padding:
        30px
        30px
        34px;

    background:
        linear-gradient(
            rgba(255,255,255,0.16),
            rgba(255,255,255,0.16)
        ),
        var(--kraft-light);

    border: 2px solid var(--ink);

    box-shadow:
        10px 10px 0 var(--ink);

    transform: rotate(0.8deg);

    overflow: hidden;
}


.error-visual__paper::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 28px,
            rgba(29, 29, 26, 0.055) 29px
        );
}


.error-visual__header {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-bottom: 18px;

    border-bottom: 2px solid var(--ink);
}


.error-visual__header span {
    font-family: var(--mono);
    font-size: 0.58rem;

    text-transform: uppercase;
}


.error-visual__header strong {
    font-family: var(--display);
    font-size: 1.5rem;
    line-height: 1;
}


.error-visual__number {
    position: relative;
    z-index: 1;

    margin:
        30px
        0
        10px;

    color: var(--red);

    font-family: var(--display);
    font-size: clamp(8rem, 14vw, 12rem);
    line-height: 0.75;
    letter-spacing: -0.05em;

    font-weight: 900;
}


.error-visual__chain {
    position: relative;
    z-index: 1;

    margin: 28px 0 30px;

    display: flex;

    gap: 5px;
}


.error-visual__chain span {
    width: 34px;
    height: 18px;

    border: 3px solid var(--ink);

    border-radius: 50%;
}


.error-visual__chain span:nth-child(even) {
    transform: rotate(90deg);
}


.error-visual__fields {
    position: relative;
    z-index: 1;

    border-top: 1px solid var(--ink);
}


.error-visual__fields > div {
    min-height: 62px;

    padding: 12px 0;

    display: grid;

    grid-template-columns:
        135px
        minmax(0, 1fr);

    gap: 20px;

    align-items: center;

    border-bottom: 1px solid rgba(29, 29, 26, 0.3);
}


.error-visual__fields span {
    color: var(--red);

    font-family: var(--mono);
    font-size: 0.54rem;

    text-transform: uppercase;
}


.error-visual__fields strong {
    font-size: 0.78rem;
    line-height: 1.4;
}


.error-visual__stamp {
    position: absolute;

    right: 26px;
    bottom: 24px;

    z-index: 2;

    padding: 9px 13px;

    color: var(--red);

    border: 4px solid var(--red);

    font-family: var(--display);
    font-size: 1.8rem;
    line-height: 1;

    font-weight: 900;

    transform: rotate(-8deg);

    opacity: 0.86;
}


.error-visual__tag {
    position: absolute;

    right: -18px;
    bottom: -34px;

    z-index: 5;

    width: min(320px, 82%);

    padding: 20px;

    background: var(--paper-light);

    border: 2px solid var(--ink);

    box-shadow:
        6px 6px 0 var(--red);
}


.error-visual__tag span {
    display: block;

    margin-bottom: 7px;

    color: var(--red);

    font-family: var(--mono);
    font-size: 0.53rem;

    text-transform: uppercase;
}


.error-visual__tag strong {
    display: block;

    font-family: var(--editorial);
    font-size: 1.45rem;
    line-height: 1.1;

    font-weight: 400;
}


.error-visual__tag p {
    margin: 8px 0 0;

    font-size: 0.72rem;
    line-height: 1.45;
}


/* ==========================================================
   RECOVERY LINKS
   ========================================================== */

.error-recovery {
    padding:
        clamp(82px, 8vw, 128px)
        0;

    background: var(--ink);
    color: var(--paper-light);

    border-top: 2px solid var(--ink);
}


.error-recovery__header {
    margin-bottom: 42px;
}


.error-recovery__header h2 {
    margin: 0;

    color: var(--paper-light);

    font-family: var(--editorial);
    font-size: clamp(3.6rem, 5.5vw, 5.4rem);
    line-height: 0.94;
    letter-spacing: -0.045em;

    font-weight: 400;
}


.error-recovery__grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border:
        1px solid rgba(251, 247, 238, 0.4);
}


.error-recovery__grid a {
    min-height: 260px;

    padding: 26px;

    display: flex;
    flex-direction: column;

    border-left:
        1px solid rgba(251, 247, 238, 0.4);

    color: var(--paper-light);

    text-decoration: none;

    transition:
        background-color 160ms ease,
        color 160ms ease;
}


.error-recovery__grid a:first-child {
    border-left: 0;
}


.error-recovery__grid a:hover,
.error-recovery__grid a:focus-visible {
    background: var(--red);
}


.error-recovery__grid a > span {
    margin-bottom: 56px;

    color: var(--orange-light);

    font-family: var(--mono);
    font-size: 0.58rem;
}


.error-recovery__grid strong {
    font-family: var(--editorial);
    font-size: 2.15rem;
    line-height: 1;

    font-weight: 400;
}


.error-recovery__grid p {
    margin:
        auto
        0
        0;

    padding-top: 28px;

    color: rgba(251, 247, 238, 0.7);

    font-size: 0.76rem;
    line-height: 1.6;
}


/* ==========================================================
   LARGE DESKTOP
   ========================================================== */

@media (min-width: 1440px) {

    .error-hero h1 {
        font-size: 6rem;
    }

    .error-recovery__header h2 {
        font-size: 4.6rem;
    }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1080px) {

    .error-hero__grid {
        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(350px, 0.75fr);

        gap: 48px;
    }

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

    .error-recovery__grid a:nth-child(3) {
        border-left: 0;

        border-top:
            1px solid rgba(251, 247, 238, 0.4);
    }

    .error-recovery__grid a:nth-child(4) {
        border-top:
            1px solid rgba(251, 247, 238, 0.4);
    }

}


/* ==========================================================
   SMALL TABLET
   ========================================================== */

@media (max-width: 920px) {

    .error-hero__grid {
        grid-template-columns: 1fr;
    }

    .error-visual {
        width: min(620px, 100%);
    }

}


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

@media (max-width: 720px) {

    .error-hero {
        padding-top: 50px;
    }

    .error-hero h1 {
        font-size: clamp(3.8rem, 14vw, 5rem);
    }

    .error-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .error-hero__actions .button {
        width: 100%;

        justify-content: center;
    }

    .error-visual__paper {
        min-height: 520px;

        padding: 24px;
    }

    .error-visual__fields > div {
        grid-template-columns: 1fr;

        gap: 5px;
    }

    .error-visual__tag {
        position: relative;

        right: auto;
        bottom: auto;

        width: calc(100% - 24px);

        margin:
            -12px
            auto
            0;
    }

    .error-recovery__grid {
        grid-template-columns: 1fr;
    }

    .error-recovery__grid a,
    .error-recovery__grid a:nth-child(3),
    .error-recovery__grid a:nth-child(4) {
        min-height: 220px;

        border-left: 0;

        border-top:
            1px solid rgba(251, 247, 238, 0.4);
    }

    .error-recovery__grid a:first-child {
        border-top: 0;
    }

}


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

@media (max-width: 520px) {

    .error-hero__quick a {
        grid-template-columns: 1fr;

        gap: 4px;
    }

    .error-visual__number {
        font-size: 7rem;
    }

    .error-visual__chain {
        gap: 2px;
    }

    .error-visual__chain span {
        width: 26px;
        height: 14px;
    }

}


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

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

    .error-recovery__grid a {
        transition: none;
    }

}


/* GEAR ISSUES PREMIUM 404 END */