/* ---------------------------------------------------------------------------
   NRV Enterprises — the divisions layer
   ---------------------------------------------------------------------------
   Loaded after site.css, and built on it rather than beside it: the same
   tokens, the same easing, the same .reveal mechanism, the same
   reduced-motion contract. Nothing here restyles what site.css already
   owns.

   WHY THIS FILE EXISTS

   site.css was written for a company that sold briquettes. Charcoal and
   ember is exactly right for fuel and it is kept. But the catalogue is a
   supplier of ten different things — gloves, switchgear, RO membranes,
   solvents — and ten tiles in one amber would read as ten of the same
   thing.

   So each division carries one accent, and the tile is the only place it
   appears. The hues are not invented: they are what the products
   themselves are. Safety is the yellow of a helmet, water the blue of a
   filter housing, chemicals the violet of a solvent drum's warning label.
   A visitor scanning the grid learns the colour before they finish
   reading the names, and the colour still means something on the
   division page they land on.
   --------------------------------------------------------------------------- */

:root {
    /* One accent per division, keyed by slug in the markup.
       Each is dark enough to carry white text at 4.5:1 or better, which
       is why none of them is the pure hue you would pick from a wheel. */
    --d-briquettes:              #b4571b;
    --d-firewood-heating:        #a33718;
    --d-safety-equipment:        #a8760a;
    --d-packing:                 #7a6320;
    --d-electrical-electronics:  #1f6a8c;
    --d-industrial-mechanical:   #4a5568;
    --d-water-filtration:        #17708a;
    --d-chemicals-plastics:      #6b4a97;
    --d-housekeeping-stationery: #2b7a5b;
    --d-other-products:          #6a5344;

    --accent: var(--ember);   /* the default, overridden per tile */
}


/* ===========================================================================
   Hero — the range, not one product
   ===========================================================================
   The old hero was a headline beside a photograph of a briquette, which
   was honest when briquettes were the business. A supplier of ten
   divisions cannot lead with one of them, so the picture is replaced by
   the range itself: a slow drift of what NRV actually stocks.
   =========================================================================== */

.hero-range {
    position: relative;
    display: grid;
    gap: clamp(28px, 4vw, 64px);
    align-items: center;

    /* No padding of its own. .hero already carries
       clamp(58px,8vw,104px) top and clamp(64px,9vw,116px) bottom, and
       adding a second helping here is what made the hero 1108px tall
       for a 431px headline — 104 + 72 above it, 116 + 72 below, and the
       headline marooned in the middle. One block owns the breathing
       room, and it is the one that already did. */
}

@media (min-width: 900px) {
    .hero-range { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.hero-range h1 { margin: 0 0 .5em; }

/* The one word that changes colour. It cycles through the divisions,
   which is the whole proposition stated in a single line of type. */
.hero-word {
    display: inline-block;
    position: relative;
    color: var(--ember-lit);
    transition: color .5s var(--ease);
}

.hero-lead {
    max-width: 46ch;
    color: rgba(255, 255, 255, .78);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---- the drifting wall of stock ---- */

.hero-wall {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

    /* Capped, and clipped to the cap. Without a height of its own the
       wall is as tall as its 24 cells — about 2000px — and since the
       row is centre-aligned that pushed the headline a thousand pixels
       down the page, off the screen entirely. The wall is a window
       onto a moving column, not the whole column.

       The cap is also what sets the height of the hero, because the
       wall is the taller of the two columns. At 74vh/660px the hero
       stood 1108px on a 900px screen and the headline floated in the
       middle of it with 340px of empty ground either side. Tied to the
       viewport more tightly, the hero comes in around one screen and
       the headline sits where the eye lands. */
    max-height: min(56vh, 540px);
    overflow: hidden;

    /* Its own stacking context, so the fade sits over the tiles without
       a z-index race with the hero's own decor. */
    position: relative;
    isolation: isolate;
    mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

.hero-wall__col { display: grid; gap: 10px; }

.hero-wall__cell {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, .94);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

.hero-wall__cell img {
    width: 100%; height: 100%;
    object-fit: contain;
    /* Catalogue cut-outs sit on white. Nothing is cropped: a glove that
       loses its fingers to a square frame is not a picture of a glove. */
}

@media (prefers-reduced-motion: no-preference) {
    .hero-wall__col { animation: wall-drift 34s linear infinite; }
    .hero-wall__col:nth-child(2) { animation-duration: 44s; animation-direction: reverse; }
    .hero-wall__col:nth-child(3) { animation-duration: 39s; }
}

/* Half the column's own height, because the markup repeats the set
   twice — so the loop point is the seam between the two copies and
   nothing jumps. */
@keyframes wall-drift {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

@media (max-width: 899px) {
    .hero-wall { max-height: 300px; }
}


/* ===========================================================================
   The division grid
   =========================================================================== */

.divisions {
    display: grid;
    gap: clamp(14px, 1.6vw, 22px);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.division {
    --accent: var(--ember);

    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 260px;
    overflow: hidden;

    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);

    transition: transform .3s var(--ease),
                box-shadow .3s var(--ease),
                border-color .3s var(--ease);
}

/* Keyed off the slug, so adding a division in the admin needs one line
   of CSS and nothing else — and a division with no line still works,
   it simply inherits the ember default. */
.division[data-slug="briquettes"]              { --accent: var(--d-briquettes); }
.division[data-slug="firewood-heating"]        { --accent: var(--d-firewood-heating); }
.division[data-slug="safety-equipment"]        { --accent: var(--d-safety-equipment); }
.division[data-slug="packing"]                 { --accent: var(--d-packing); }
.division[data-slug="electrical-electronics"]  { --accent: var(--d-electrical-electronics); }
.division[data-slug="industrial-mechanical"]   { --accent: var(--d-industrial-mechanical); }
.division[data-slug="water-filtration"]        { --accent: var(--d-water-filtration); }
.division[data-slug="chemicals-plastics"]      { --accent: var(--d-chemicals-plastics); }
.division[data-slug="housekeeping-stationery"] { --accent: var(--d-housekeeping-stationery); }
.division[data-slug="other-products"]          { --accent: var(--d-other-products); }

/* The whole tile is the link — one tab stop, not three. */
.division__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }

.division__media {
    position: relative;
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    padding: 22px;
    background:
        radial-gradient(120% 100% at 50% 0%,
            rgb(from var(--accent) r g b / 12%) 0%, transparent 70%),
        var(--mist);
    overflow: hidden;
}

/* rgb(from …) is recent. Without it the wash is simply absent and the
   tile falls back to the flat mist, which is a fine tile. */
@supports not (color: rgb(from red r g b / 50%)) {
    .division__media { background: var(--mist); }
}

.division__media img {
    width: 100%; height: 100%;
    object-fit: contain;
    transition: transform .6s var(--ease);
}

.division__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px 24px;
    flex: 1;
}

.division__name {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink);
}

.division__blurb {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--body);
}

.division__more {
    margin-top: auto;
    padding-top: 10px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.division__more svg { transition: transform .25s var(--ease); }

/* The accent rule along the top edge. Closed at rest, drawn on
   approach — the one place the division's colour is stated outright. */
.division::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    z-index: 3;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s var(--ease);
}

@media (hover: hover) {
    .division:hover {
        transform: translateY(-4px);
        border-color: transparent;
        box-shadow: var(--shadow-lg);
    }
    .division:hover::before { transform: scaleX(1); }
    .division:hover .division__media img { transform: scale(1.06); }
    .division:hover .division__more svg { transform: translateX(4px); }
}

.division:focus-within {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--shadow-lg);
}

.division:focus-within::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
    .division,
    .division:hover,
    .division:focus-within { transform: none; }
    .division__media img { transition: none; }
}

/* The count, sitting on the picture. Only shown where there is
   something real to count — a division with no products yet says
   nothing rather than "0 products". */
.division__count {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .02em;
}


/* ===========================================================================
   Why NRV — the catalogue's own closing argument
   =========================================================================== */

.reasons {
    display: grid;
    gap: clamp(14px, 1.8vw, 24px);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.reason {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 24px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.reason__mark {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 11px;
    background: var(--ember-soft);
    color: var(--ember);
}

.reason h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ink); }
.reason p  { margin: 0; font-size: .8438rem; line-height: 1.6; color: var(--body); }


/* ===========================================================================
   The strip of figures under the hero
   =========================================================================== */

.tally {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

@media (min-width: 760px) { .tally { grid-template-columns: repeat(4, 1fr); } }

.tally__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 22px 20px;
    background: var(--paper);
}

.tally__n {
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.tally__k { font-size: .8125rem; color: var(--muted); }


/* ===========================================================================
   A division's own page header
   ===========================================================================
   Shorter than the home page's hero and carrying one photograph behind
   the type rather than a moving wall — somebody who has clicked through
   to a division already knows what the company does and is here for the
   detail, so the header gets out of the way faster.
   =========================================================================== */

.page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(52px, 8vw, 104px);
}

.page-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The scrim is not decoration. White type over an unknown photograph is
   a contrast failure waiting for the day somebody swaps the picture for
   a paler one, so the ground is dark by construction and the photograph
   sits underneath it. */
.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg,
        rgba(14, 18, 17, .96) 0%,
        rgba(14, 18, 17, .90) 42%,
        rgba(14, 18, 17, .64) 100%);
}

.page-hero__inner { position: relative; max-width: 62ch; }
.page-hero h1 { margin: 0 0 .35em; }


/* ===========================================================================
   The grades
   ===========================================================================
   No photographs on purpose: three of the four pictures in the
   catalogue are 70-85px, which is a thumbnail inside a layout and not
   an image for a web page. What a buyer needs here is which grade suits
   their firing, and that is words — so the number carries the eye
   instead.
   =========================================================================== */

.grades {
    display: grid;
    gap: clamp(14px, 1.8vw, 22px);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.grade {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 24px 24px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

@media (hover: hover) {
    .grade:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
}

@media (prefers-reduced-motion: reduce) {
    .grade, .grade:hover { transform: none; }
}

.grade__n {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--ember);
    opacity: .28;
    font-variant-numeric: tabular-nums;
}

.grade__name { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--ink); }

.grade__facts { margin: 0; display: grid; gap: 4px; }

.grade__facts dt {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
}

.grade__facts dd {
    margin: 0 0 8px;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--body);
}

.grade__facts dd:last-child { margin-bottom: 0; }


/* ===========================================================================
   The specification table
   =========================================================================== */

/* Scrolls inside its own box. A specification table is the one thing on
   the site that cannot be made narrow enough for a phone and stay
   readable, and the alternative is the whole page moving sideways. */
.spec-scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    -webkit-overflow-scrolling: touch;
}

.spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.spec-table th,
.spec-table td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.spec-table thead th {
    background: var(--mist);
    color: var(--ink);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* The row heading stays put while the figures scroll past it, which is
   the whole reason the table is readable on a phone at all. */
.spec-table tbody th {
    position: sticky;
    left: 0;
    background: var(--paper);
    font-weight: 600;
    color: var(--ink);
    box-shadow: 1px 0 0 var(--line);
}

.spec-table td { color: var(--body); font-variant-numeric: tabular-nums; }
.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td { border-bottom: 0; }


/* Visually hidden, still read aloud. clip-path rather than display:none,
   which would take it out of the accessibility tree entirely. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* It is focusable, so it must show focus. */
.spec-scroll:focus-visible {
    outline: 3px solid var(--ember);
    outline-offset: 2px;
}


/* ===========================================================================
   Headings on a dark ground
   ===========================================================================
   site.css names them one block at a time — .hero h1, .banner h1 — so a
   dark section it did not know about gets the default near-black
   heading on a near-black ground. That is what happened to the
   briquettes page: the word "Briquettes" was there, in charcoal, on
   charcoal.

   .on-dark is already the class that says "this ground is dark". It
   should be the class that says what that means for the type, rather
   than every new dark block having to remember.
   =========================================================================== */

.on-dark :is(h1, h2, h3, h4) { color: #fff; }
.on-dark p { color: rgba(255, 255, 255, .78); }
.on-dark .lead { color: rgba(255, 255, 255, .82); }


/* ===========================================================================
   The lines a division supplies
   ===========================================================================
   Names, not products. Around 150 of them across the ten divisions, and
   the point of the list is that a buyer can find the one they want and
   ask for it by name — so it is set as a list and not dressed up as
   cards, which would turn seventy-three gloves into seventy-three
   things to scroll past.
   =========================================================================== */

.linegroups {
    display: grid;
    gap: clamp(18px, 2.4vw, 30px);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    align-items: start;
}

.linegroup {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 24px 24px;
}

.linegroup__name {
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--accent, var(--ember));
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink);
}

.lineitems {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.lineitems li {
    position: relative;
    padding: 6px 0 6px 18px;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--body);
}

/* A tick rather than a bullet: the list is a claim about what is
   supplied, and a tick says that where a dot only separates. */
.lineitems li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .55em;

    /* Unequal arms and a 45-degree turn: equal ones read as an angle
       bracket rather than a tick, which is what the first attempt at
       this looked like 154 times over. */
    width: 5px;
    height: 9px;
    border-right: 2px solid var(--accent, var(--ember));
    border-bottom: 2px solid var(--accent, var(--ember));
    transform: rotate(45deg);
    opacity: .85;
}


/* A division header with no photograph behind it — the colour does the
   work instead, so a division reads as itself before the words are
   read. */
.page-hero--flat {
    background:
        radial-gradient(90% 140% at 85% 0%,
            rgb(from var(--accent) r g b / 38%) 0%, transparent 62%),
        var(--ink);
}

@supports not (color: rgb(from red r g b / 50%)) {
    .page-hero--flat { background: var(--ink); }
}

.page-hero--flat::after { display: none; }

/* Keyed the same way as a tile, on anything that carries the slug —
   the division header and the lines section both do. */
[data-slug="briquettes"]              { --accent: var(--d-briquettes); }
[data-slug="firewood-heating"]        { --accent: var(--d-firewood-heating); }
[data-slug="safety-equipment"]        { --accent: var(--d-safety-equipment); }
[data-slug="packing"]                 { --accent: var(--d-packing); }
[data-slug="electrical-electronics"]  { --accent: var(--d-electrical-electronics); }
[data-slug="industrial-mechanical"]   { --accent: var(--d-industrial-mechanical); }
[data-slug="water-filtration"]        { --accent: var(--d-water-filtration); }
[data-slug="chemicals-plastics"]      { --accent: var(--d-chemicals-plastics); }
[data-slug="housekeeping-stationery"] { --accent: var(--d-housekeeping-stationery); }
[data-slug="other-products"]          { --accent: var(--d-other-products); }




/* A line count is a softer promise than a product count, and looks it:
   the same pill, outlined rather than filled. */
.division__count--soft {
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--line);
}


/* ===========================================================================
   One product
   ===========================================================================
   Purpose-built rather than borrowed. The old page reused .contact-grid
   for its layout and .map-frame for the photograph — classes named for
   the contact page and its embedded map — so any change to the contact
   page would have moved the product page with it.
   =========================================================================== */

.pdetail {
    display: grid;
    gap: clamp(24px, 3.5vw, 52px);
    align-items: start;
}

@media (min-width: 900px) {
    .pdetail { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
    /* The specification follows you down a long description rather than
       scrolling away at the top — it is the thing a buyer keeps
       glancing back at. */
    .pdetail__side { position: sticky; top: 96px; }
}

.pdetail__main { display: grid; gap: clamp(20px, 2.6vw, 34px); }

.pdetail__shot {
    margin: 0;
    display: grid;
    place-items: center;
    padding: clamp(18px, 2.4vw, 32px);
    background: var(--mist);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.pdetail__shot img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: contain;
}

.pdetail__side { display: grid; gap: 18px; }


/* ---- the specification ---- */

.specbox {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.specbox__title {
    margin: 0;
    padding: 16px 20px;
    background: var(--ink);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.specbox__list { margin: 0; }

.specbox__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--line);
}

.specbox__row dt {
    font-size: .8125rem;
    color: var(--muted);
}

.specbox__row dd {
    margin: 0;
    text-align: right;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.specbox__note {
    margin: 0;
    padding: 14px 20px 16px;
    font-size: .75rem;
    line-height: 1.55;
    color: var(--muted);
    background: var(--mist);
}


/* ---- the enquiry ---- */

.askbox {
    padding: 24px 22px;
    border-radius: var(--radius);
    /* Tinted with the division's own colour, so the panel belongs to
       the product rather than being the same orange box on every page. */
    background:
        linear-gradient(180deg,
            rgb(from var(--accent, var(--ember)) r g b / 10%),
            rgb(from var(--accent, var(--ember)) r g b / 4%));
    border: 1px solid rgb(from var(--accent, var(--ember)) r g b / 26%);
}

@supports not (color: rgb(from red r g b / 50%)) {
    .askbox { background: var(--ember-soft); border-color: var(--line); }
}

.askbox__title { margin: 0 0 8px; font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.askbox p { margin: 0 0 16px; font-size: .875rem; line-height: 1.6; color: var(--body); }

.btn-block { display: flex; width: 100%; }

.askbox__back {
    display: inline-block;
    margin-top: 14px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--body);
}

.askbox__back:hover { color: var(--ink); }