/* ============================================================================
   LUKHANYO M PROJECTS : BRAND STYLESHEET
   Palette: charcoal black / brick red / warm ivory / steel grey
   Type:    "Archivo" (headings) + "Karla" (body)
   Motif:   diagonal cuts + sharp corners, echoing the site hoarding / flyer
   ============================================================================ */

/* Archivo (headings) + Karla (body).
   Archivo is a sturdy grotesque built for signage and print, which suits a
   fabrication business better than a condensed display face. Karla has real
   character in its lowercase, so body copy does not read as a default.
   Archivo is normal-width where the previous heading face was condensed, so
   heading sizes and tracking below are tuned tighter to compensate. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Karla:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
    --ink:        #17140f;
    --charcoal:   #211d18;
    --steel:      #4d4c46;
    --steel-lt:   #837f74;
    --ivory:      #f6f1e7;
    --ivory-dim:  #ece4d4;
    --brick:      #a91d2c;
    --brick-dark: #7a1420;
    --brick-lt:   #c73142;
    --gold:       #b98a3d;
    --line:       #ddd3bd;
    --white:      #fffdf9;

    --font-head: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Karla', 'Segoe UI', system-ui, sans-serif;

    --shadow: 0 10px 30px -12px rgba(23, 20, 15, 0.35);
    --cut: 22px;
}


/* ---------------------------------------------------------------------- */
/* Reset & base                                                           */
/* ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--ivory);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
    font-family: var(--font-head);
    text-transform: uppercase;
    /* Negative tracking: uppercase Archivo sets loose by default, and this
       pulls it back to the tight, engineered feel the brand wants. */
    letter-spacing: -0.012em;
    line-height: 1.08;
    margin: 0 0 0.5em;
    color: var(--ink);
}
h1 { font-size: clamp(1.95rem, 4.1vw, 3.05rem); font-weight: 800; }
h2 { font-size: clamp(1.45rem, 2.7vw, 2.05rem); font-weight: 700; }
h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.005em; }
p  { margin: 0 0 1em; color: var(--steel); }
.container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}
.section { padding: 72px 0; }
.section-tight { padding: 40px 0; }
.text-center { text-align: center; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-head);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brick);
    font-weight: 600;
    margin-bottom: 10px;
}
.eyebrow::before {
    content: '';
    width: 28px;
    height: 3px;
    background: var(--brick);
    display: inline-block;
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                */
/* ---------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-head);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.8rem;
    padding: 15px 30px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .18s ease;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    white-space: nowrap;
}
.btn-primary { background: var(--brick); color: var(--white); }
.btn-primary:hover { background: var(--brick-dark); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: var(--charcoal); }
.btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); clip-path: none;}
.btn-outline:hover { background: var(--ink); color: var(--white); }
.btn-outline-light { background: transparent; border-color: rgba(255,255,255,.5); color: var(--white); clip-path: none; }
.btn-outline-light:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 18px; font-size: 0.72rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
/* Horizontal group of buttons. Wraps rather than overflowing on narrow
   screens (buttons carry white-space:nowrap, so they cannot shrink). */
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------- */
/* Top bar + header                                                       */
/* ---------------------------------------------------------------------- */
.topbar {
    background: var(--ink);
    color: var(--ivory-dim);
    font-size: 0.8rem;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; gap: 6px;}
.topbar a { color: var(--ivory-dim); }
.topbar .topbar-contacts { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar .topbar-contacts span { display: inline-flex; align-items: center; gap: 6px; }
.topbar .topbar-social a { margin-left: 14px; font-weight: 600; letter-spacing: .04em; }
.topbar .dot { color: var(--brick); }

header.site-header {
    background: var(--white);
    border-bottom: 3px solid var(--ink);
    position: sticky;
    top: 0;
    z-index: 50;
}
.nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Keep .container's horizontal padding. The shorthand used to be
       "12px 0", which (same specificity, declared later) zeroed it: the
       header sat flush to the viewport edge while every other section was
       inset by 24px, and the cart badge's right:-14px hung off-screen
       between 981px and ~1228px. */
    padding: 12px 24px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 54px; width: auto; }
.brand-text { line-height: 1.1; }
.brand-text .brand-name { font-family: var(--font-head); font-weight: 800; font-size: 1.02rem; letter-spacing: -0.01em; }
.brand-text .brand-sub { font-size: 0.68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brick); font-weight: 600;}

.main-nav ul { display: flex; gap: 30px; align-items: center; }
.main-nav a {
    font-family: var(--font-head);
    font-size: 0.79rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 8px 2px;
    border-bottom: 2px solid transparent;
    transition: border-color .15s ease, color .15s ease;
}
.main-nav a:hover, .main-nav a.active { border-color: var(--brick); color: var(--brick); }

.header-actions { display: flex; align-items: center; gap: 18px; }
.icon-link { position: relative; font-family: var(--font-head); font-size: 0.85rem; display:flex; align-items:center; gap:6px; text-transform: uppercase; letter-spacing:.04em;}
.cart-badge {
    position: absolute;
    top: -9px;
    right: -14px;
    background: var(--brick);
    color: var(--white);
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}
.nav-toggle { display: none; background: none; border: 2px solid var(--ink); padding: 8px 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; }

/* Off-canvas nav furniture. Both are inert until the drawer breakpoint
   (<= 980px) switches them on. */
.nav-close {
    display: none;
    position: absolute;
    top: 18px;
    right: 20px;
    width: 42px;
    height: 42px;
    background: none;
    border: 1px solid rgba(255,255,255,.4);
    color: var(--white);
    font-family: var(--font-head);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.nav-close:hover { border-color: var(--brick); color: #ffd08a; }
.nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,13,10,.55); z-index: 55; }
/* Keeps the page behind the open drawer from scrolling on touch devices. */
body.nav-open { overflow: hidden; }

/* ---------------------------------------------------------------------- */
/* Top bar controls: language picker + theme toggle                        */
/* ---------------------------------------------------------------------- */
.topbar-tools { display: flex; align-items: center; gap: 10px; }

.lang-picker { position: relative; }
.lang-current {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 1px solid rgba(255,255,255,.25);
    color: var(--ivory-dim); cursor: pointer;
    font-family: var(--font-body); font-size: 0.76rem;
    padding: 5px 9px; line-height: 1.2;
}
.lang-current:hover { border-color: var(--brick-lt); color: #fff; }
.lang-current .chev { font-size: 0.6rem; opacity: .7; }

.lang-menu {
    position: absolute; right: 0; top: calc(100% + 6px);
    background: var(--white); border: 1px solid var(--line);
    box-shadow: var(--shadow); min-width: 178px; z-index: 80; padding: 5px;
}
.lang-menu[hidden] { display: none; }
.lang-menu a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 10px; font-size: 0.84rem; color: var(--ink);
}
.lang-menu a:hover, .lang-menu a:focus-visible { background: var(--ivory-dim); color: var(--brick); }
.lang-menu a[aria-current="true"] { color: var(--brick); font-weight: 700; }
.lang-menu a .native { color: var(--steel-lt); font-size: 0.75rem; }
.lang-menu a[aria-current="true"] .native { color: var(--brick); }


@media (max-width: 720px) {
    /* The tools stay visible on mobile even though the rest of the top bar
       collapses, since they are the only way to change language or theme. */
    .topbar .container { justify-content: space-between; }
    .topbar-tools { gap: 8px; }
    .lang-current { font-size: 0.72rem; padding: 6px 8px; min-height: 32px; }
    .lang-menu { min-width: 160px; }
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                   */
/* ---------------------------------------------------------------------- */
.hero {
    position: relative;
    background: linear-gradient(115deg, var(--ink) 46%, var(--brick) 46.3%);
    color: var(--white);
    overflow: hidden;
}
.hero .container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
    padding-top: 84px;
    padding-bottom: 84px;
}
.hero h1 { color: var(--white); margin-bottom: 18px; }
.hero h1 span { color: #ffd08a; }
.hero p.lead { color: rgba(255,255,255,.82); font-size: 1.08rem; max-width: 480px; }
.hero-cta { display: flex; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.hero-media { position: relative; }
.hero-media img {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
    border: 4px solid var(--white);
    box-shadow: var(--shadow);
}
.hero-tags { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------- */
/* Hero entrance animation                                                 */
/*                                                                         */
/* The starting opacity lives in the keyframe, NOT in a base rule. If the  */
/* animation never runs (very old browser, or animations disabled) the     */
/* content simply renders normally instead of being stuck invisible.       */
/*                                                                         */
/* Only opacity and transform are animated, so this runs on the compositor */
/* and causes no layout shift.                                             */
/* ---------------------------------------------------------------------- */
@keyframes heroRise {
    from { opacity: 0; transform: translate3d(0, 20px, 0); }
    to   { opacity: 1; transform: none; }
}
@keyframes heroMediaIn {
    from { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.985); }
    to   { opacity: 1; transform: none; }
}
@keyframes heroRuleGrow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.hero-copy > * {
    animation: heroRise 0.62s cubic-bezier(0.22, 0.68, 0.35, 1) both;
}
/* Staggered so the eye is led down the block rather than everything
   appearing at once. */
.hero-copy > *:nth-child(1) { animation-delay: 0.06s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.16s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.28s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.40s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.50s; }

.hero-media {
    animation: heroMediaIn 0.85s cubic-bezier(0.22, 0.68, 0.35, 1) 0.18s both;
}

/* The eyebrow's brick rule draws itself outwards from the left. */
.hero .eyebrow::before {
    transform-origin: left center;
    animation: heroRuleGrow 0.5s cubic-bezier(0.22, 0.68, 0.35, 1) 0.34s both;
}

/* A slow settle on the hero image, so the section is not completely static
   once the entrance has finished. Deliberately small. */
.hero-media img { transition: transform 0.6s cubic-bezier(0.22, 0.68, 0.35, 1); }
.hero-media:hover img { transform: scale(1.015); }

/* Respect the system setting. Anyone who has asked for less motion gets the
   final state immediately, with no movement at all. */
@media (prefers-reduced-motion: reduce) {
    .hero-copy > *,
    .hero-media,
    .hero .eyebrow::before {
        animation: none;
    }
    .hero-media img { transition: none; }
    .hero-media:hover img { transform: none; }
}
.hero-tags span {
    font-family: var(--font-head);
    font-size: 0.72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,.4);
    padding: 6px 12px;
}

/* ---------------------------------------------------------------------- */
/* Scroll reveal                                                           */
/*                                                                         */
/* Tiles fade and rise as they enter the viewport.                         */
/*                                                                         */
/* The hiding rules are scoped to .js-reveal, a class main.js puts on       */
/* <html> only once the observer is actually running. Without JavaScript,   */
/* or before the script executes, none of these rules apply and every tile  */
/* renders normally. Content is never hidden by CSS alone.                  */
/* ---------------------------------------------------------------------- */
.js-reveal .card-category,
.js-reveal .product-card,
.js-reveal .card-service,
.js-reveal .value-item,
.js-reveal .trust-item,
.js-reveal .section-head,
.js-reveal .founder-block > *,
.js-reveal .gallery-grid > a {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    /* Slightly longer than the hero so it reads as settling, not snapping. */
    transition: opacity 0.55s cubic-bezier(0.22, 0.68, 0.35, 1),
                transform 0.55s cubic-bezier(0.22, 0.68, 0.35, 1);
    will-change: opacity, transform;
}

.js-reveal .is-revealed {
    opacity: 1;
    transform: none;
    /* Dropped once settled so the compositor is not holding layers for the
       whole page. */
    will-change: auto;
}

/* Items inside a grid cascade rather than all arriving together. The delay
   is capped so a long product grid never feels slow. */
.js-reveal .grid > *:nth-child(1),
.js-reveal .gallery-grid > a:nth-child(1)  { transition-delay: 0.00s; }
.js-reveal .grid > *:nth-child(2),
.js-reveal .gallery-grid > a:nth-child(2)  { transition-delay: 0.07s; }
.js-reveal .grid > *:nth-child(3),
.js-reveal .gallery-grid > a:nth-child(3)  { transition-delay: 0.14s; }
.js-reveal .grid > *:nth-child(4),
.js-reveal .gallery-grid > a:nth-child(4)  { transition-delay: 0.21s; }
.js-reveal .grid > *:nth-child(n+5),
.js-reveal .gallery-grid > a:nth-child(n+5) { transition-delay: 0.28s; }
.js-reveal .trust-item:nth-child(2) { transition-delay: 0.06s; }
.js-reveal .trust-item:nth-child(3) { transition-delay: 0.12s; }
.js-reveal .trust-item:nth-child(4) { transition-delay: 0.18s; }

/* main.js does not switch reveal on at all when the system asks for less
   motion, but this is belt and braces in case the class is ever forced. */
@media (prefers-reduced-motion: reduce) {
    .js-reveal .card-category,
    .js-reveal .product-card,
    .js-reveal .card-service,
    .js-reveal .value-item,
    .js-reveal .trust-item,
    .js-reveal .section-head,
    .js-reveal .founder-block > *,
    .js-reveal .gallery-grid > a {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---------------------------------------------------------------------- */
/* Map band                                                                */
/* ---------------------------------------------------------------------- */
.map-band { background: var(--charcoal); border-top: 1px solid rgba(255,255,255,.08); }
.map-band .container { padding-top: 54px; padding-bottom: 54px; }
.map-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px; align-items: center; }
.map-layout > * { min-width: 0; }
.map-band h2 { color: var(--white); }
.map-band p { color: rgba(255,255,255,.72); }
.map-band .eyebrow { color: #ffd08a; }
.map-band .eyebrow::before { background: #ffd08a; }
.map-details li { color: #c7c0b1; font-size: 0.9rem; margin-bottom: 12px; display: flex; gap: 10px; align-items: flex-start; }
.map-details li strong { color: var(--white); font-family: var(--font-head); font-size: 0.78rem; letter-spacing: .04em; text-transform: uppercase; display: block; margin-bottom: 2px; }
.map-embed {
    position: relative;
    /* Reserving the aspect ratio up front means the iframe cannot shift the
       page as it loads. */
    aspect-ratio: 16 / 10;
    border: 4px solid var(--white);
    background: var(--steel);
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 900px) {
    .map-layout { grid-template-columns: 1fr; gap: 28px; }
    .map-embed { aspect-ratio: 4 / 3; }
    .map-band .container { padding-top: 40px; padding-bottom: 40px; }
}

/* ---------------------------------------------------------------------- */
/* Trust strip                                                            */
/* ---------------------------------------------------------------------- */
.trust-strip { background: var(--charcoal); color: var(--ivory-dim); }
.trust-strip .container { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; padding: 26px 24px; }
.trust-item { display: flex; align-items: center; gap: 12px; }
.trust-item .num { font-family: var(--font-head); font-size: 1.6rem; color: var(--brick-lt); font-weight: 700; }
.trust-item .label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .06em; }

/* ---------------------------------------------------------------------- */
/* Section headers                                                        */
/* ---------------------------------------------------------------------- */
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------------------------------------------------------------------- */
/* Cards: services / categories                                          */
/* ---------------------------------------------------------------------- */
.grid { display: grid; gap: 26px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* Two-column page splits (about mission, contact form + details) and the
   sidebar layout on the account page. These used to be inline styles on the
   pages themselves, which meant no media query could ever collapse them.
   Both fall back to a single column in the 980px block below. */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.split-2.align-top { align-items: flex-start; }
.split-sidebar { display: grid; grid-template-columns: 320px 1fr; gap: 40px; align-items: flex-start; }

.card-service {
    background: var(--white);
    border: 1px solid var(--line);
    padding: 30px 26px;
    position: relative;
    transition: transform .18s ease, box-shadow .18s ease;
}
.card-service:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card-service .icon-badge {
    width: 52px; height: 52px;
    background: var(--ink);
    color: var(--white);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
    font-family: var(--font-head);
    font-size: 1.3rem;
}
.card-service h3 { margin-bottom: 8px; font-size: 1.05rem; }
.card-service p { font-size: 0.92rem; margin-bottom: 0; }

.card-category {
    position: relative;
    height: 230px;
    overflow: hidden;
    background: var(--ink);
}
.card-category img { width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: transform .35s ease, opacity .2s ease; }
.card-category:hover img { transform: scale(1.06); opacity: .38; }
.card-category .cat-label {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 18px 20px;
    background: linear-gradient(0deg, rgba(0,0,0,.75), transparent);
    color: var(--white);
}
.card-category .cat-label h3 { color: var(--white); margin-bottom: 4px; }
.card-category .cat-label span { font-size: 0.78rem; color: var(--brick-lt); font-family: var(--font-head); letter-spacing: .05em; text-transform: uppercase; }

/* ---------------------------------------------------------------------- */
/* Product cards & grid                                                   */
/* ---------------------------------------------------------------------- */
.product-card {
    background: var(--white);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    position: relative;
}
.product-card .thumb { position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--ivory-dim); }
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.product-card:hover .thumb img { transform: scale(1.05); }
.product-card .badge {
    position: absolute; top: 12px; left: 0;
    background: var(--brick); color: var(--white);
    font-family: var(--font-head); font-size: 0.66rem; letter-spacing: .08em; text-transform: uppercase;
    padding: 5px 12px 5px 10px;
    clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
}
.product-card .body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.product-card .cat-tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--brick); font-family: var(--font-head); margin-bottom: 6px; }
.product-card h3 { font-size: 1rem; margin-bottom: 8px; }
.product-card h3 a:hover { color: var(--brick); }
.product-card p { font-size: 0.85rem; flex: 1; }
.product-card .price-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; margin-bottom: 14px; }
.product-card .price { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.product-card .price small { font-size: 0.68rem; color: var(--steel-lt); font-family: var(--font-body); text-transform: none; letter-spacing: 0; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.filter-bar a {
    font-family: var(--font-head);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 9px 18px;
    border: 1px solid var(--line);
    background: var(--white);
}
.filter-bar a:hover, .filter-bar a.active { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* ---------------------------------------------------------------------- */
/* Product detail page                                                   */
/* ---------------------------------------------------------------------- */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: flex-start; }
.product-detail .gallery-main { border: 1px solid var(--line); aspect-ratio: 4/3; overflow: hidden; background: var(--ivory-dim); }
.product-detail .gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.product-detail .sku { font-size: 0.78rem; color: var(--steel-lt); margin-bottom: 6px; letter-spacing: .04em;}
.product-detail .price-block { font-family: var(--font-head); font-size: 2rem; color: var(--brick); font-weight: 700; margin: 14px 0; }
.product-detail .price-block small { font-size: 0.9rem; color: var(--steel-lt); font-family: var(--font-body); }
.qty-row { display: flex; align-items: center; gap: 16px; margin: 22px 0; }
.qty-stepper { display: flex; align-items: center; border: 2px solid var(--ink); }
.qty-stepper button { background: var(--ink); color: var(--white); border: none; width: 40px; height: 44px; font-size: 1.1rem; cursor: pointer; }
.qty-stepper input { width: 54px; text-align: center; border: none; font-family: var(--font-head); font-size: 1rem; }
.stock-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; }
.stock-flag.made { color: var(--gold); }
.stock-flag.stock { color: #2c7a3c; }
.spec-list { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 20px; }
.spec-list dt { font-family: var(--font-head); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--steel-lt); margin-top: 10px;}
.spec-list dd { margin: 2px 0 0; }

/* ---------------------------------------------------------------------- */
/* Founder / About                                                        */
/* ---------------------------------------------------------------------- */
.founder-block { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 50px; align-items: center; }
.founder-photo { position: relative; }
.founder-photo img { clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%); border: 4px solid var(--ink); }
blockquote.founder-quote {
    font-size: 1.25rem;
    font-style: italic;
    color: var(--ink);
    margin: 0 0 20px;
    padding-top: 6px;
    font-weight: 500;
    position: relative;
}
blockquote.founder-quote::before {
    content: '\201C';
    display: block;
    font-family: var(--font-head);
    font-style: normal;
    font-size: 3.6rem;
    line-height: 1;
    color: var(--brick);
    margin-bottom: -14px;
}
.founder-name { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; }
.founder-role { color: var(--brick); font-size: 0.85rem; text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-head);}

.value-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 46px; }
.value-item { text-align: center; padding: 26px 14px; background: var(--white); border: 1px solid var(--line); }
.value-item .vi-icon { width: 46px; height: 46px; margin: 0 auto 14px; background: var(--brick); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.value-item h3 { font-size: 0.95rem; }
.value-item p { font-size: 0.82rem; margin: 0; }

/* ---------------------------------------------------------------------- */
/* Gallery                                                                 */
/* ---------------------------------------------------------------------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery-grid a { display: block; overflow: hidden; aspect-ratio: 1/1; border: 1px solid var(--line); }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gallery-grid a:hover img { transform: scale(1.08); }

/* ---------------------------------------------------------------------- */
/* Forms                                                                  */
/* ---------------------------------------------------------------------- */
.form-card { background: var(--white); border: 1px solid var(--line); padding: 40px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-family: var(--font-head); font-size: 0.78rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; color: var(--charcoal); }
.form-control {
    width: 100%;
    padding: 13px 14px;
    border: 1.5px solid var(--line);
    background: var(--white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--ink);
}
.form-control:focus { outline: none; border-color: var(--brick); }
textarea.form-control { min-height: 130px; resize: vertical; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-hint { font-size: 0.78rem; color: var(--steel-lt); margin-top: 6px; }
.radio-card { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--line); padding: 14px 16px; margin-bottom: 10px; cursor: pointer; }
.radio-card:has(input:checked) { border-color: var(--brick); background: #fbf3ee; }
.radio-card input { margin-top: 4px; }
.radio-card strong { display: block; font-family: var(--font-head); font-size: 0.9rem; text-transform: uppercase; letter-spacing: .03em; }
.radio-card span.desc { font-size: 0.82rem; color: var(--steel); }

/* ---------------------------------------------------------------------- */
/* Alerts                                                                 */
/* ---------------------------------------------------------------------- */
.alert { padding: 15px 20px; border-left: 4px solid; margin-bottom: 24px; font-size: 0.92rem; }
.alert-success { background: #eef7ee; border-color: #2c7a3c; color: #205a2b; }
.alert-error   { background: #fbeceb; border-color: var(--brick); color: var(--brick-dark); }
.alert-info    { background: #eef3f7; border-color: #2c5f7a; color: #1f4457; }

/* ---------------------------------------------------------------------- */
/* Tables (cart / account / admin)                                       */
/* ---------------------------------------------------------------------- */
table.data-table { width: 100%; border-collapse: collapse; background: var(--white); }
table.data-table th, table.data-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; font-size: 0.9rem; }
table.data-table th { font-family: var(--font-head); text-transform: uppercase; font-size: 0.72rem; letter-spacing: .06em; background: var(--ink); color: var(--white); }
table.data-table .prod-cell { display: flex; align-items: center; gap: 14px; }
table.data-table .prod-cell img { width: 60px; height: 60px; object-fit: cover; border: 1px solid var(--line); }

/* Wide tables (mainly the admin panel, up to 8 columns) scroll sideways
   inside their own container so the page body never scrolls horizontally.
   Wrap any table that can't sensibly shrink in <div class="table-wrap">. */
.table-wrap { width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap > table.data-table { min-width: 620px; }
.status-pill { font-family: var(--font-head); font-size: 0.68rem; text-transform: uppercase; letter-spacing: .05em; padding: 5px 12px; display: inline-block; }
.status-pending { background: #fdf0da; color: #8a5c10; }
.status-confirmed { background: #e4effa; color: #1c4e80; }
.status-in_production { background: #f3e6fb; color: #6a2c9e; }
.status-ready { background: #e6f3ea; color: #1c6b34; }
.status-completed { background: #dff0e6; color: #0f5c33; }
.status-cancelled { background: #fbe4e4; color: #a5231f; }

/* ---------------------------------------------------------------------- */
/* Cart / checkout summary                                                */
/* ---------------------------------------------------------------------- */
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: flex-start; }
/* Grid items default to min-width:auto, so the 620px min-width on a wide
   table inside this column would push the whole grid wider than the page
   instead of scrolling within .table-wrap. */
.cart-layout > *, .split-2 > *, .split-sidebar > * { min-width: 0; }
.summary-box { background: var(--ink); color: var(--white); padding: 30px; position: sticky; top: 110px; }
.summary-box h3 { color: var(--white); }
.summary-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.15); font-size: 0.92rem; }
.summary-row.total { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; border-bottom: none; padding-top: 16px; }
.remove-link { color: var(--brick); font-size: 0.78rem; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em; }

/* ---------------------------------------------------------------------- */
/* CTA band                                                                */
/* ---------------------------------------------------------------------- */
.cta-band {
    background: var(--ink);
    color: var(--white);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}
.cta-band::before {
    content: '';
    position: absolute; right: -60px; top: -60px; width: 260px; height: 260px;
    background: var(--brick); opacity: .9;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.cta-band .container { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.cta-band h2 { color: var(--white); margin-bottom: 6px; }
.cta-band p { color: rgba(255,255,255,.75); margin: 0; }

/* ---------------------------------------------------------------------- */
/* Footer                                                                 */
/* ---------------------------------------------------------------------- */
footer.site-footer { background: var(--charcoal); color: var(--ivory-dim); padding-top: 60px; }
footer .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 40px; }
footer h4 { color: var(--white); font-size: 0.9rem; margin-bottom: 18px; letter-spacing: .06em; }
footer p, footer li, footer a { color: #c7c0b1; font-size: 0.88rem; }
footer ul li { margin-bottom: 10px; }
footer a:hover { color: var(--brick-lt); }
footer .foot-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
footer .foot-brand img { height: 42px; }
footer .foot-brand span { font-family: var(--font-head); font-weight: 700; color: var(--white); font-size: 1.05rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 20px 0; text-align: center; font-size: 0.8rem; color: #a39c8c; }
.footer-bottom strong { color: var(--brick-lt); }

/* ---------------------------------------------------------------------- */
/* Misc                                                                    */
/* ---------------------------------------------------------------------- */
.lightbox { position: fixed; inset: 0; background: rgba(15,13,10,.92); display: none; align-items: center; justify-content: center; z-index: 200; padding: 30px; cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 88vh; border: 4px solid var(--white); }
@media (max-width: 720px) { .hide-sm { display: none; } }
.empty-state { text-align: center; padding: 80px 20px; }
.empty-state .icon { font-size: 3rem; margin-bottom: 16px; }
.breadcrumb { font-size: 0.82rem; color: var(--steel-lt); margin-bottom: 26px; }
.breadcrumb a:hover { color: var(--brick); }
.page-banner {
    background: var(--ink);
    color: var(--white);
    padding: 54px 0;
    position: relative;
}
.page-banner h1 { color: var(--white); margin-bottom: 8px; }
.page-banner p { color: rgba(255,255,255,.7); margin: 0; }

/* ---------------------------------------------------------------------- */
/* Responsive                                                              */
/*                                                                         */
/* Breakpoints:                                                            */
/*   <= 1080px  laptop / large tablet landscape: tighten the nav           */
/*   <= 980px   tablet: collapse two-column layouts, switch to the         */
/*              hamburger (the full nav stops fitting well below this)     */
/*   <= 720px   phone: single column, stacked tables, larger tap targets   */
/*   <= 400px   small phone: trim padding and type                         */
/* ---------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .main-nav ul { gap: 20px; }
    .main-nav a { font-size: 0.8rem; }
    .header-actions { gap: 14px; }
    .brand-text .brand-name { font-size: 1.05rem; }
}

@media (max-width: 980px) {
    /* Nav becomes the off-canvas drawer here, not at 720px: between roughly
       760px and 980px the brand + six links + account/cart no longer fit on
       one line and the nav wrapped on top of the logo. */
    .main-nav {
        position: fixed;
        top: 0;
        /* Hidden with a transform rather than right:-100%. An element parked
           off-screen to the right still counts towards the document's scroll
           width, which added ~16px of horizontal page scroll on narrow
           screens. Transforms do not affect layout, so this hides it without
           widening the page, and it animates on the compositor. */
        right: 0;
        transform: translateX(100%);
        height: 100%;
        width: 80%;
        max-width: 330px;
        background: var(--ink);
        padding: 88px 30px 30px;
        transition: transform .25s ease;
        z-index: 60;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .main-nav.open { transform: translateX(0); }
    .main-nav ul { flex-direction: column; align-items: flex-start; gap: 4px; }
    .main-nav li { width: 100%; }
    .main-nav a {
        color: var(--white);
        font-size: 1rem;
        display: block;
        width: 100%;
        padding: 13px 0;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .main-nav a:hover, .main-nav a.active { color: #ffd08a; border-color: var(--brick); }
    .nav-toggle { display: block; }
    .nav-close { display: block; }
    .nav-backdrop.open { display: block; }
    /* Below this width the layout is being driven by touch, so the header
       links need a comfortable vertical target even where the label shows. */
    .header-actions .icon-link { min-height: 44px; }

    .hero .container { grid-template-columns: 1fr; padding-top: 50px; padding-bottom: 50px; }
    .hero { background: linear-gradient(180deg, var(--ink) 70%, var(--brick) 70.3%); }
    .hero p.lead { max-width: none; }
    .founder-block { grid-template-columns: 1fr; }
    .product-detail { grid-template-columns: 1fr; gap: 34px; }
    .cart-layout { grid-template-columns: 1fr; }
    .split-2, .split-sidebar { grid-template-columns: 1fr; gap: 34px; align-items: stretch; }
    .summary-box { position: static; }
    .grid-4 { grid-template-columns: repeat(2,1fr); }
    .grid-3 { grid-template-columns: repeat(2,1fr); }
    .trust-strip .container { grid-template-columns: repeat(2,1fr); }
    .value-grid { grid-template-columns: repeat(2,1fr); }
    footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
    .section { padding: 56px 0; }
}

@media (max-width: 720px) {
    /* With the text label hidden only the glyph is left, which is a ~19px
       tap target. Give the account/cart links a proper touch area. */
    .header-actions { gap: 8px; }
    .header-actions .icon-link span.label { display: none; }
    .header-actions .icon-link { min-width: 40px; justify-content: center; }
    .cart-badge { top: 2px; right: 0; }
    .topbar .topbar-social { display: none; }
    .topbar .container { justify-content: center; }
    .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: repeat(2,1fr); gap: 12px; }
    .form-row-2 { grid-template-columns: 1fr; gap: 0; }
    footer .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .cta-band .container { flex-direction: column; align-items: flex-start; text-align: left; }
    .cta-band { padding: 46px 0; }
    .cta-band::before { width: 170px; height: 170px; right: -50px; top: -50px; }

    .section { padding: 44px 0; }
    .section-head { margin-bottom: 30px; }
    .page-banner { padding: 38px 0; }
    .form-card { padding: 24px 20px; }
    .brand img { height: 44px; }
    .brand-text .brand-name { font-size: 0.98rem; }
    .brand-text .brand-sub { font-size: 0.6rem; letter-spacing: .12em; }

    /* Stops iOS Safari zooming the viewport when a field takes focus, which
       it does for any input rendered below 16px. */
    .form-control, .qty-stepper input, select.form-control { font-size: 16px; }

    /* The stepper and Add-to-Cart button together exceed a phone's width. */
    .qty-row { flex-wrap: wrap; gap: 12px; }
    .qty-row .btn { flex: 1 1 auto; }

    .trust-strip .container { gap: 16px; padding-top: 20px; padding-bottom: 20px; }
    .trust-item { flex-direction: column; align-items: flex-start; gap: 2px; }
    .trust-item .num { font-size: 1.35rem; }
    .trust-item .label { font-size: 0.72rem; line-height: 1.3; }

    blockquote.founder-quote { font-size: 1.08rem; }
    .card-category { height: 190px; }

    /* Customer-facing tables become one card per row. Each cell shows its
       column name from data-label, so the header row can be dropped.
       These tables sit inside .table-wrap for the tablet range, so the
       wrapper's min-width has to be released once they stack, otherwise the
       cards would still force a 620px horizontal scroll. */
    .table-wrap > table.data-table.stack-sm { min-width: 0; }
    table.data-table.stack-sm thead { display: none; }
    table.data-table.stack-sm,
    table.data-table.stack-sm tbody,
    table.data-table.stack-sm tr,
    table.data-table.stack-sm td { display: block; width: 100%; }
    table.data-table.stack-sm tr {
        border: 1px solid var(--line);
        margin-bottom: 14px;
        background: var(--white);
    }
    table.data-table.stack-sm td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        text-align: right;
        padding: 11px 16px;
        border-bottom: 1px dashed var(--line);
    }
    table.data-table.stack-sm td:last-child { border-bottom: none; }
    table.data-table.stack-sm td::before {
        content: attr(data-label);
        font-family: var(--font-head);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--steel-lt);
        text-align: left;
        flex: 0 0 auto;
    }
    /* Product name + thumbnail acts as the card's heading, full width. */
    table.data-table.stack-sm td.cell-main {
        display: block;
        text-align: left;
        background: var(--ivory);
        border-bottom: 1px solid var(--line);
        padding: 14px 16px;
    }
    table.data-table.stack-sm td.cell-main::before { content: none; }
    table.data-table.stack-sm td.cell-action { justify-content: flex-end; }
    table.data-table.stack-sm td.cell-action::before { content: none; }
    table.data-table.stack-sm td .form-control { width: 90px; }
    table.data-table.stack-sm tfoot { display: block; }
    table.data-table.stack-sm tfoot tr { border: none; }
    table.data-table.stack-sm tfoot td { border-bottom: none; }
}

@media (max-width: 400px) {
    /* Buttons carry white-space:nowrap so they keep their shape at normal
       sizes. On the narrowest phones a long label ("Need a bulk/custom quote
       instead?") then pushes past the viewport, so allow wrapping here. */
    .btn { white-space: normal; text-align: center; }

    .container { padding: 0 16px; }
    /* .container's padding would otherwise strip the header's vertical
       padding, since .nav-wrap is also a .container. */
    .nav-wrap { padding: 10px 16px; }
    .section { padding: 36px 0; }
    .gallery-grid { grid-template-columns: 1fr; }
    .trust-strip .container { grid-template-columns: 1fr; }
    .btn { padding: 13px 22px; font-size: 0.8rem; }
    .form-card { padding: 20px 16px; }
    .brand-text .brand-sub { display: none; }
}