/* ============================================================
   DG KNITTING — DESIGN SYSTEM
   Shared tokens and primitives. Loaded after style.css so it can
   modernise the legacy rules without rewriting every page.
   ============================================================ */

:root {
    /* ---- brand (unchanged, this is the existing identity) ---- */
    --crimson: #df2229;
    --crimson-dark: #b81a20;
    --crimson-soft: #fdf2f1;
    --orchid: #e18c94;

    /* ---- warm neutrals, biased toward the brand rather than pure grey ---- */
    --ink: #1f1c1b;
    --ink-2: #3d3836;
    --ink-3: #6b625e;
    --ink-4: #9a908b;
    --line: #e9e3df;
    --line-2: #f2ede9;
    --paper: #ffffff;
    --paper-2: #faf7f5;
    --paper-3: #f4efec;

    /* ---- type scale (1.2 minor third, fluid) ---- */
    --fs-xs:   clamp(.72rem, .70rem + .10vw, .78rem);
    --fs-sm:   clamp(.83rem, .81rem + .12vw, .89rem);
    --fs-base: clamp(.95rem, .92rem + .15vw, 1.03rem);
    --fs-lg:   clamp(1.08rem, 1.02rem + .28vw, 1.22rem);
    --fs-xl:   clamp(1.3rem, 1.18rem + .5vw, 1.6rem);
    --fs-2xl:  clamp(1.6rem, 1.35rem + 1.1vw, 2.3rem);
    --fs-3xl:  clamp(2rem, 1.5rem + 2.2vw, 3.4rem);
    --fs-4xl:  clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem);

    /* ---- spacing (8pt) ---- */
    --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
    --sp-9: 88px;  --sp-10: 120px;

    /* ---- radii ---- */
    --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;  --r-xl: 26px;  --r-full: 999px;

    /* ---- elevation: tight contact shadow + soft ambient ---- */
    --sh-1: 0 1px 2px rgba(31,28,27,.05), 0 1px 3px rgba(31,28,27,.04);
    --sh-2: 0 2px 4px rgba(31,28,27,.05), 0 6px 16px rgba(31,28,27,.06);
    --sh-3: 0 4px 8px rgba(31,28,27,.06), 0 16px 36px rgba(31,28,27,.09);
    --sh-4: 0 8px 20px rgba(31,28,27,.08), 0 30px 70px rgba(31,28,27,.13);

    /* ---- motion ---- */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --t-fast: .16s;  --t: .24s;  --t-slow: .4s;

    --header-h: 76px;
}

/* ============================================================ base */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
    font-size: var(--fs-base);
    color: var(--ink-2);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { color: var(--ink); letter-spacing: -.015em; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }

:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--crimson);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ================================================ section rhythm */
.section-padding { padding: var(--sp-9) 0; }

.section-header { margin-bottom: var(--sp-7); }

/* Eyebrow: a small capsule rather than bare uppercase text */
.section-subtitle {
    display: inline-block;
    font-size: var(--fs-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--crimson);
    background: var(--crimson-soft);
    border: 1px solid rgba(223, 34, 41, .14);
    padding: 5px 14px;
    border-radius: var(--r-full);
    margin-bottom: var(--sp-4);
}

.section-title {
    font-size: var(--fs-2xl);
    line-height: 1.15;
    margin: 0 0 var(--sp-3);
    font-weight: 500;
}

.section-title .highlight { color: var(--crimson); }

.section-description {
    font-size: var(--fs-lg);
    color: var(--ink-3);
    max-width: 62ch;
    margin: 0 auto;
    line-height: 1.6;
}

.section-header:not(.text-center) .section-description { margin-inline: 0; }

/* ==================================================== surfaces */
.dg-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
                border-color var(--t) var(--ease);
}

.dg-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-3);
    border-color: var(--orchid);
}

/* Legacy cards inherit the new surface treatment so every page lifts
   at once without editing each template. */
.strength-card,
.process-card,
.industry-card,
.stat-card,
.quality-card,
.value-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
                border-color var(--t) var(--ease);
}

.strength-card:hover,
.process-card:hover,
.industry-card:hover,
.stat-card:hover,
.quality-card:hover,
.value-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-3);
    border-color: var(--orchid);
}

/* ===================================================== buttons */
.dg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 13px 26px;
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--t) var(--ease);
    line-height: 1;
}

.dg-btn-primary { background: var(--crimson); color: #fff; box-shadow: 0 6px 18px rgba(223,34,41,.24); }
.dg-btn-primary:hover { background: var(--crimson-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(223,34,41,.3); }

.dg-btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--line); }
.dg-btn-ghost:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); }

.dg-btn-quiet { background: transparent; color: var(--ink-2); padding-inline: 4px; }
.dg-btn-quiet:hover { color: var(--crimson); }

/* ==================================================== utilities */
.dg-stack   { display: flex; flex-direction: column; }
.dg-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.dg-muted   { color: var(--ink-3); }
.dg-tnum    { font-variant-numeric: tabular-nums; }

.dg-eyebrow {
    font-size: var(--fs-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--crimson);
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Reveal-on-scroll, applied by js/reveal.js */
[data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}

[data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 767px) {
    .section-padding { padding: var(--sp-7) 0; }
    :root { --header-h: 64px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================ hero */
.dg-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(560px, 82vh, 780px);
    padding: calc(var(--header-h) + var(--sp-8)) 0 var(--sp-8);
    overflow: hidden;
    isolation: isolate;
}

.dg-hero-media { position: absolute; inset: 0; z-index: -1; }

.dg-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
}

/* Warm scrim: dark enough on the left for AA text contrast, clearing
   toward the right so the fabric photography still reads. */
.dg-hero-wash {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(24,20,19,.92) 0%, rgba(24,20,19,.78) 38%,
                        rgba(24,20,19,.42) 62%, rgba(24,20,19,.28) 100%),
        radial-gradient(120% 90% at 12% 50%, rgba(223,34,41,.20) 0%, transparent 60%);
}

.dg-hero-inner {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 32px);
}

.dg-hero-copy { max-width: 44rem; }

.dg-hero-eyebrow {
    display: inline-block;
    font-size: var(--fs-xs);
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px);
    padding: 7px 16px;
    border-radius: var(--r-full);
    margin-bottom: var(--sp-5);
}

.dg-hero-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: var(--fs-4xl);
    line-height: 1.04;
    color: #fff;
    font-weight: 500;
    margin: 0 0 var(--sp-4);
    letter-spacing: -.02em;
}

.dg-hero-title em {
    font-style: italic;
    color: var(--orchid);
}

.dg-hero-sub {
    font-size: var(--fs-lg);
    color: rgba(255, 255, 255, .86);
    line-height: 1.6;
    max-width: 40rem;
    margin: 0 0 var(--sp-6);
}

.dg-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-8);
}

.dg-hero-actions .dg-btn-ghost {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
    backdrop-filter: blur(6px);
}

.dg-hero-actions .dg-btn-ghost:hover { background: rgba(255, 255, 255, .18); border-color: #fff; color: #fff; }

/* stat strip */
.dg-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-6) var(--sp-8);
    margin: 0;
    padding-top: var(--sp-5);
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.dg-hero-stats div { display: flex; flex-direction: column; gap: 2px; }

.dg-hero-stats dt {
    font-size: var(--fs-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
    font-weight: 500;
}

.dg-hero-stats dd {
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: 600;
    color: #fff;
    line-height: 1.1;
}

.dg-hero-stats dd span { font-size: var(--fs-sm); font-weight: 400; color: rgba(255,255,255,.65); }

@media (max-width: 767px) {
    .dg-hero { min-height: auto; padding: calc(var(--header-h) + var(--sp-6)) 0 var(--sp-7); }
    .dg-hero-media img { object-position: center 42%; }
    .dg-hero-wash { background: linear-gradient(180deg, rgba(24,20,19,.86) 0%, rgba(24,20,19,.9) 100%); }
    .dg-hero-actions { margin-bottom: var(--sp-6); }
    .dg-hero-actions .dg-btn { flex: 1 1 100%; }
    .dg-hero-stats { gap: var(--sp-4) var(--sp-6); }
    .dg-hero-stats dd { font-size: var(--fs-lg); }
}