/* Purpose: About Us page (Figma 50:3740). Hero, Story, Values, Categories, Showrooms.
   Mobile-first. Colours/fonts from design-system.css tokens. */

/* ============================================================
   Shared: eyebrow (Cinzel + gold rules) and gold heading accent
   ============================================================ */
.about-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-eyebrow);
    font-size: 13px;
    font-weight: var(--weight-regular);
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--color-text);
    margin: 0;
}
.about-eyebrow__rule {
    display: block;
    width: 44px;
    height: 1px;
    background: var(--color-gold);
    opacity: 0.5;
    flex: 0 0 auto;
}
.about-eyebrow--light { color: var(--color-on-navy); }
.about-eyebrow--light .about-eyebrow__rule { opacity: 0.6; }

.about-accent { color: var(--color-gold); }

@media (min-width: 1024px) { .about-eyebrow { font-size: 14px; } }

/* ============================================================
   HERO — Figma 50:3809
   ============================================================ */
.about-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 340px;
    padding: var(--space-16) 0;
    background: var(--color-primary);
    overflow: hidden;
    isolation: isolate;
}
.about-hero__bg { position: absolute; inset: 0; z-index: -1; }
.about-hero__img { width: 100%; height: 100%; object-fit: cover; }
.about-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        var(--color-primary) 15%,
        rgba(11, 30, 56, 0.55) 70%,
        rgba(11, 30, 56, 0.40) 100%);
}
.about-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
}

.about-hero__crumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: 12px;
}
.about-hero__crumb a {
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 1.1px;
    text-decoration: none;
}
.about-hero__crumb a:hover { color: rgba(255, 255, 255, 0.8); }
.about-hero__crumb-sep { color: rgba(255, 255, 255, 0.25); }
.about-hero__crumb-current {
    color: var(--color-gold-light);
    font-weight: var(--weight-medium);
}

.about-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-eyebrow);
    font-size: 13px;
    text-transform: uppercase;
    color: var(--color-gold);
    margin: 0;
}
.about-hero__eyebrow-rule {
    display: block;
    width: 44px;
    height: 1px;
    background: var(--color-gold);
    flex: 0 0 auto;
}

.about-hero__title {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: clamp(2.5rem, 8vw, 5.25rem);   /* 40 → 84px */
    line-height: 1.08;
    color: var(--color-on-navy);
    margin: 0;
    max-width: 20ch;
}
.about-hero__sub {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.4vw, 1.125rem);
    line-height: 1.5;
    text-transform: capitalize; /* Figma 50:3809 — Title Case */
    color: var(--color-on-navy);
    margin: 0;
    max-width: 62ch;
}

@media (min-width: 1024px) { .about-hero { min-height: 480px; } }

/* ============================================================
   STORY — Figma 50:3906
   ============================================================ */
.about-story {
    background: var(--color-bg-alt);
    padding: var(--space-16) 0;
}
.about-story__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}
.about-story__media {
    position: relative;
    aspect-ratio: 491 / 500;
    background: var(--color-primary);
    overflow: hidden;
}
.about-story__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.about-story__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.about-story .about-eyebrow { justify-content: flex-start; }

.about-story__title {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: clamp(2rem, 4.5vw, 3.375rem);   /* 32 → 54px */
    line-height: 1.15;
    color: var(--color-primary);
    margin: 0;
}
.about-story__copy {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text-muted);
}
.about-story__copy p { margin: 0 0 var(--space-4); }
.about-story__copy p:last-child { margin-bottom: 0; }
.about-story__copy strong { color: var(--color-primary); font-weight: var(--weight-medium); }

.about-story__stats {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}
.about-story__stat { display: flex; flex-direction: column; gap: var(--space-1); }
.about-story__stat-num {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: 32px;
    line-height: 1.25;
    color: var(--color-gold);
    font-variant-numeric: lining-nums;
}
.about-story__stat-label {
    font-family: var(--font-body);
    font-size: 12px;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.about-story__stat-div {
    width: 1px;
    align-self: stretch;
    min-height: 44px;
    background: var(--color-border);
}

@media (min-width: 1024px) {
    .about-story__inner {
        flex-direction: row;
        align-items: center;
        gap: var(--space-8);
    }
    .about-story__media { flex: 0 0 40%; align-self: stretch; }
    .about-story__body  { flex: 1 1 auto; }
}

/* ============================================================
   VALUES (Built On Service) — Figma 50:4032
   ============================================================ */
.about-values {
    background: var(--color-bg);
    padding: var(--space-16) 0;
}
.about-values__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
}
.about-values__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
}
.about-values__title {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: clamp(2rem, 4.5vw, 3.375rem);
    line-height: 1.15;
    color: var(--color-primary);
    margin: 0;
}

.about-values__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8) var(--space-4);
    width: 100%;
}
.about-values__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-md);
    position: relative;
}
/* Hover: soft light-gold wash (replaces the earlier lift + shadow). Uses a ::before overlay so its
   own opacity transition is independent of the reveal-group's opacity/transform transition. */
.about-values__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: rgba(201, 168, 76, 0.08);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
    pointer-events: none;
}
.about-values__card:hover::before { opacity: 1; }
.about-values__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border: 1px solid var(--color-gold);
    border-radius: var(--radius-full);
    color: var(--color-gold);
    flex: 0 0 auto;
}
.about-values__icon svg,
.about-values__icon .icon { width: 22px; height: 22px; }
.about-values__card-title {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: 24px;
    line-height: 1.33;
    color: var(--color-primary);
    margin: 0;
}
.about-values__card-text {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.57;
    color: var(--color-text-muted);
    margin: 0;
}

@media (min-width: 600px)  { .about-values__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
    .about-values__grid { grid-template-columns: repeat(4, 1fr); gap: 0; }
    .about-values__card { border-right: 1px solid #dedfe2; }
    .about-values__card:last-child { border-right: 0; }
}

/* ============================================================
   CATEGORIES (Ten Categories, One Roof) — Figma 50:3970
   ============================================================ */
.about-cats {
    background: var(--color-bg-alt);
    padding: var(--space-16) 0;
}
.about-cats__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-10); }
.about-cats__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
    max-width: 660px;
}
.about-cats__title {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: clamp(2rem, 4.5vw, 3.375rem);
    line-height: 1.15;
    color: var(--color-primary);
    margin: 0;
}
.about-cats__sub {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0;
}

.about-cats__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    width: 100%;
}
.about-cat-card {
    position: relative;
    display: block;
    aspect-ratio: 280 / 380;
    overflow: hidden;
    background: var(--color-primary);
    text-decoration: none;
    isolation: isolate;
}
.about-cat-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    transition: transform var(--duration-slow) var(--ease-out);
}
.about-cat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(11,30,56,0.88) 0%, rgba(11,30,56,0.22) 55%, rgba(11,30,56,0.05) 100%);
}
.about-cat-card:hover .about-cat-card__img { transform: scale(1.05); }
.about-cat-card__body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6);
}
.about-cat-card__title {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: 24px;
    line-height: 1.33;
    color: var(--color-on-navy);
}
@media (min-width: 768px)  { .about-cats__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .about-cats__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }

/* ============================================================
   SHOWROOMS (Visit Us In Person) — Figma 50:3933
   ============================================================ */
.about-showrooms {
    background: #0e2647;
    padding: var(--space-16) 0;
}
.about-showrooms__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }
.about-showrooms__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
.about-showrooms__title {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: clamp(2rem, 4.5vw, 3.375rem);
    line-height: 1.15;
    color: var(--color-on-navy);
    margin: 0;
}

.about-showrooms__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    width: 100%;
}
.about-showroom {
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.about-showroom__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.about-showroom__name {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: 24px;
    line-height: 1.33;
    color: var(--color-gold-light);
    margin: 0;
}
.about-showroom__logo {
    flex: 0 0 auto;
    display: inline-flex;
}
.about-showroom__logo img {
    width: auto;
    height: 34px;
    max-width: 130px;
    object-fit: contain;
    display: block;
}
.about-showroom__addr {
    font-family: var(--font-body);
    font-weight: var(--weight-light);
    font-size: 14px;
    line-height: 1.57;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}
.about-showroom__addr--link {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--duration-base) var(--ease-out);
}
.about-showroom__addr--link:hover,
.about-showroom__addr--link:focus-visible {
    color: var(--color-gold-light);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.about-showroom__phone {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: 12px;
    line-height: 1.67;
    color: var(--color-gold);
    text-decoration: none;
    margin-top: auto;
}
.about-showroom__phone:hover { text-decoration: underline; }

@media (min-width: 600px)  { .about-showrooms__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .about-showrooms__grid { grid-template-columns: repeat(3, 1fr); } }