/* ---------------------------------------------------------------------------
   NRV Enterprises — public site
   ---------------------------------------------------------------------------
   Written rather than pulled from a framework. The whole site is a home page, a
   product list, a product page and a contact form; a CSS framework would weigh
   more than the pages it held up, and every override would be an argument with
   somebody else's defaults.

   The palette is the product: charcoal, and the amber of a fire that is burning
   properly. Green stays as the second colour, because the business is selling
   fuel made out of waste and that is worth saying in the design as well as the
   copy.
   --------------------------------------------------------------------------- */

:root {
    /* ground */
    --ink:        #0e1211;   /* charcoal, faintly green */
    --ink-2:      #1b2220;
    --ink-3:      #2c3633;
    --body:       #495753;
    /* 5.32:1 on paper, 4.95:1 on mist. It was #7d8b86, which measured
       3.55 and 3.30 — secondary text across the whole site failing AA
       by a wide margin. Darker, same hue; still reads as secondary
       next to --ink, and now legible to someone who needs it to be. */
    --muted:      #616e6a;
    --paper:      #ffffff;
    --mist:       #f5f7f6;
    --mist-2:     #eaefec;
    --line:       #dde4e0;
    --line-dark:  rgba(255,255,255,.10);

    /* fire */
    --ember:      #d97b26;
    --ember-lit:  #eb9d4d;
    --ember-soft: #fdf3e8;

    /* growth */
    --green:      #1d6b42;
    --green-lit:  #2e8540;
    --green-soft: #e8f2ec;

    --shadow-sm:  0 1px 2px rgba(14,18,17,.05);
    --shadow:     0 2px 6px rgba(14,18,17,.06), 0 10px 28px rgba(14,18,17,.07);
    --shadow-lg:  0 4px 10px rgba(14,18,17,.07), 0 26px 64px rgba(14,18,17,.14);

    --radius:     14px;
    --radius-lg:  22px;

    /* Full scale: the page uses the screen it is given. The stop is high enough
       that a wide monitor is filled rather than framed, and running text is kept
       narrow separately -- a headline may be 1600px wide, a paragraph may not,
       because nobody can read a line that long. */
    --wrap:       1600px;
    --gutter:     clamp(18px, 4.5vw, 72px);

    --font: "Plus Jakarta Sans", "Poppins", -apple-system, BlinkMacSystemFont,
            "Segoe UI", Roboto, sans-serif;
    --ease: cubic-bezier(.22, .61, .36, 1);
}


*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16.5px;
    line-height: 1.68;
    color: var(--body);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
    color: var(--ink);
    line-height: 1.14;
    margin: 0 0 .5em;
    font-weight: 800;
    letter-spacing: -.022em;
    text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
h2 { font-size: clamp(1.55rem, 3.1vw, 2.4rem); }
h3 { font-size: 1.22rem; letter-spacing: -.012em; }
p  { margin: 0 0 1.15em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
    font-size: .73rem; font-weight: 800; letter-spacing: .19em;
    text-transform: uppercase; color: var(--ember);
    margin: 0 0 1em; display: block;
}
.on-dark .eyebrow { color: var(--ember-lit); }

/* ===========================================================================
   Motion
   ---------------------------------------------------------------------------
   Everything is visible with no JavaScript at all. The reveal styles only apply
   once the script has added `js` to <html>, so a reader with scripts blocked --
   or one arriving before the script runs -- sees a finished page rather than a
   blank one waiting for an observer that never fires.
   =========================================================================== */
.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.seen { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .07s; }
.js .reveal.d2 { transition-delay: .14s; }
.js .reveal.d3 { transition-delay: .21s; }
.js .reveal.d4 { transition-delay: .28s; }
.js .reveal.d5 { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important;
                             transition-duration: .001ms !important; }
}

/* ===========================================================================
   Buttons
   =========================================================================== */
.btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 14px 28px; border-radius: 11px;
    font-weight: 700; font-size: .95rem; letter-spacing: -.005em;
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease),
                background .2s var(--ease), color .2s var(--ease),
                border-color .2s var(--ease);
    position: relative; overflow: hidden;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }

/* --ember stays the brand colour and is unchanged: it is right for a
   rule, an eyebrow, an icon, anything that is not carrying text.

   The button is carrying text. White on #d97b26 measures 3.08:1 and
   fails AA at button size, so the fill is one step deeper — the same
   hue, still unmistakably the brand, at 4.54:1. The difference is
   hard to see side by side; the difference in whether the label is
   readable is not. */
.btn-primary {
    background: #b4601a; color: #fff;
    box-shadow: 0 6px 18px rgba(180, 96, 26, .30);
}
.btn-primary:hover {
    background: #9e4f10; color: #fff;
    box-shadow: 0 10px 28px rgba(180, 96, 26, .40);
}

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-2); color: #fff; box-shadow: var(--shadow-lg); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--mist); color: var(--ink); border-color: var(--muted); }

.on-dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,.28); }
.on-dark .btn-ghost:hover { background: rgba(255,255,255,.10); color: #fff; }

.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--mist); color: var(--ink); }

/* ===========================================================================
   Header
   =========================================================================== */
.site-head {
    position: sticky; top: 0; z-index: 60;
    background: rgba(255,255,255,.88);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease),
                background .3s var(--ease);
}
.site-head.stuck {
    border-bottom-color: var(--line);
    box-shadow: 0 6px 24px rgba(14,18,17,.06);
}
.site-head .wrap { display: flex; align-items: center; gap: 20px; min-height: 78px; }

/* Logo and name only. The tagline lives on the page, not in the furniture. */
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; flex-shrink: 0; }
.brand img { height: 46px; width: auto; border-radius: 9px; }
.brand-name {
    font-weight: 800; color: var(--ink); font-size: 1.2rem;
    letter-spacing: -.02em; line-height: 1;
}
.brand:hover { text-decoration: none; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav a {
    padding: 10px 15px; border-radius: 9px; color: var(--body);
    font-size: .93rem; font-weight: 600; text-decoration: none;
    position: relative; white-space: nowrap;
    transition: color .2s var(--ease), background .2s var(--ease);
}
/* The CTA in the nav is a button, not a nav link. `.nav a` above sets
   its colour to --body, which landed grey-on-orange at 2.45:1 — a
   button nobody could read. Restated here rather than reordered,
   because .nav a wants that colour for the eight links it is for. */
.nav a.btn-primary { color: #fff; }
.nav a.btn-primary:hover { color: #fff; }

.nav a::after {
    content: ""; position: absolute; left: 15px; right: 15px; bottom: 5px;
    height: 2px; border-radius: 2px; background: var(--ember);
    transform: scaleX(0); transform-origin: left;
    transition: transform .28s var(--ease);
}
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav a:hover::after { transform: scaleX(1); }
.nav a.on { color: var(--ink); font-weight: 700; }
.nav a.on::after { transform: scaleX(1); }
.nav .btn { margin-left: 12px; padding: 11px 22px; }
.nav .btn::after { display: none; }

.nav-toggle {
    display: none; margin-left: auto; background: none;
    border: 1px solid var(--line); border-radius: 10px;
    width: 44px; height: 44px; cursor: pointer; color: var(--ink);
    align-items: center; justify-content: center; padding: 0;
}
.nav-toggle span {
    display: block; width: 19px; height: 2px; background: currentColor;
    border-radius: 2px; position: relative;
    transition: background .2s var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after {
    content: ""; position: absolute; left: 0; width: 19px; height: 2px;
    background: currentColor; border-radius: 2px;
    transition: transform .28s var(--ease), top .2s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* ===========================================================================
   Hero
   =========================================================================== */
.hero {
    position: relative;
    background: var(--ink);
    color: #cfd8d4;
    padding: clamp(58px, 8vw, 104px) 0 clamp(64px, 9vw, 116px);
    overflow: hidden;
}
.hero::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(760px 420px at 78% 8%,  rgba(217,123,38,.24), transparent 62%),
        radial-gradient(620px 400px at 12% 92%, rgba(29,107,66,.26),  transparent 64%);
    pointer-events: none;
}
/* A slow ember drift, so the page is alive without anything moving in the
   reader's way. Off entirely for anyone who asked for less motion. */
.hero::after {
    content: ""; position: absolute; inset: -30%;
    background: radial-gradient(520px 300px at 50% 50%, rgba(217,123,38,.10), transparent 70%);
    animation: drift 26s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes drift {
    from { transform: translate3d(-6%, -3%, 0) scale(1); }
    to   { transform: translate3d(6%, 4%, 0) scale(1.14); }
}
@media (prefers-reduced-motion: reduce) { .hero::after { animation: none; } }

.hero .wrap { position: relative; z-index: 1; }
.hero h1 { color: #fff; }
.hero h1 .lit {
    background: linear-gradient(96deg, var(--ember-lit), #f6c98a);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-grid {
    display: grid; grid-template-columns: 1.08fr .92fr;
    gap: clamp(34px, 5vw, 68px); align-items: center;
}
.hero p.lead {
    font-size: clamp(1.02rem, 1.35vw, 1.2rem); color: #b6c2bd; max-width: 36em;
}
.hero-actions { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 30px; }

.hero-photo {
    width: 100%; height: auto; border-radius: var(--radius-lg);
    margin-bottom: 18px; box-shadow: 0 30px 70px rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.10);
}
.hero-card {
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: var(--radius-lg);
    padding: 26px 30px;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.hero-card h3 { color: #fff; margin-bottom: 15px; font-size: 1.04rem; }
.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li {
    display: flex; justify-content: space-between; gap: 18px;
    padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.09);
    font-size: .94rem;
}
.spec-list li:last-child { border-bottom: none; }
/* Was #93a19c: 2.68:1 on white, which is a specification label a buyer
   cannot read. --muted is the token for exactly this job. */
.spec-list .k { color: var(--muted); }
.spec-list .v { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

/* trust strip under the hero */
.trust {
    background: var(--ink-2); color: #8b9994;
    border-top: 1px solid rgba(255,255,255,.07);
}
.trust .wrap {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px 30px; padding-block: 22px;
}
.trust div { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.trust b { color: #fff; font-weight: 700; }
.trust .dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--ember);
    flex-shrink: 0;
}

/* ===========================================================================
   Sections
   =========================================================================== */
.section { padding: clamp(56px, 7vw, 96px) 0; }
.section.tint { background: var(--mist); border-block: 1px solid var(--line); }
.section.dark { background: var(--ink); color: #b6c2bd; }
.section.dark h2, .section.dark h3 { color: #fff; }

.section-head { max-width: 44em; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head p { color: var(--muted); margin: 0; font-size: 1.02rem; }
.section.dark .section-head p { color: #93a19c; }

/* ===========================================================================
   Cards and grids
   =========================================================================== */
.grid { display: grid; gap: clamp(16px, 2vw, 26px); }
/* auto-FILL, not auto-fit. With auto-fit a category holding one product
   stretches that card the whole width of the page and blows its photograph up
   to fill it; auto-fill keeps the empty tracks, so one card stays card-sized. */
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    overflow: hidden; display: flex; flex-direction: column;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease),
                border-color .3s var(--ease);
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}
.card-img {
    aspect-ratio: 16 / 10; background: var(--mist-2); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: .84rem;
}
.card-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s var(--ease);
}
.card:hover .card-img img { transform: scale(1.055); }
.card-body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { margin-bottom: .4em; }
.card-body p { color: var(--muted); font-size: .94rem; flex: 1; margin-bottom: .9em; }
.card-more { font-weight: 700; font-size: .9rem; color: var(--green); }
.card-more a { display: inline-flex; align-items: center; gap: 6px; }
.card-more a::after {
    content: "\2192"; transition: transform .25s var(--ease); display: inline-block;
}
.card:hover .card-more a::after { transform: translateX(4px); }

.tag {
    display: inline-block; font-size: .67rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; padding: 5px 10px; border-radius: 6px;
    background: var(--green-soft); color: var(--green); margin-bottom: 12px;
    align-self: flex-start;
}

/* feature blocks */
.feature { position: relative; padding-top: 4px; }
.feature .ico {
    width: 50px; height: 50px; border-radius: 14px;
    background: linear-gradient(140deg, var(--ember-soft), #fff);
    border: 1px solid var(--line);
    color: var(--ember); display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; margin-bottom: 16px;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.feature:hover .ico { transform: translateY(-3px) rotate(-4deg); box-shadow: var(--shadow); }
.feature h3 { font-size: 1.06rem; }
.feature p { color: var(--muted); font-size: .94rem; margin: 0; }

/* numbers */
.figures {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: clamp(16px, 2.4vw, 30px);
}
.figure { border-left: 3px solid var(--ember); padding-left: 20px; }
.figure .n {
    font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; color: var(--ink);
    line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.section.dark .figure .n { color: #fff; }
.figure .t { font-size: .92rem; color: var(--muted); margin-top: 5px; }
.section.dark .figure .t { color: #93a19c; }

/* ===========================================================================
   Prose (content written in the admin panel)
   =========================================================================== */
.prose { max-width: 46em; font-size: 1.03rem; }
.prose h3 { margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin-bottom: .5em; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.3em 0; }
.prose th, .prose td { padding: 10px 13px; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { font-weight: 700; color: var(--ink); }
.prose blockquote {
    margin: 1.4em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--ember);
    color: var(--ink); font-size: 1.08rem;
}

/* ===========================================================================
   Page banner
   =========================================================================== */
.banner {
    background: var(--ink); color: #b6c2bd;
    padding: clamp(46px, 6vw, 78px) 0 clamp(40px, 5vw, 64px);
    position: relative; overflow: hidden;
}
.banner::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(680px 340px at 82% 0%, rgba(217,123,38,.20), transparent 62%);
}
.banner .wrap { position: relative; z-index: 1; }
.banner h1 { color: #fff; margin-bottom: .3em; }
.banner p { color: #93a19c; margin: 0; max-width: 44em; }
.crumb { font-size: .84rem; color: #7d8b86; margin-bottom: 16px; }

/* Underlined, not merely a different grey. A link told apart from the
   text around it by colour alone fails for anyone who cannot see that
   difference — and #a8b4af against #7d8b86 is barely a difference for
   anyone at all. */
.crumb a { color: #c3cdc9; text-decoration: underline; text-underline-offset: 2px; }
.crumb a:hover { color: #fff; }

/* ===========================================================================
   Forms
   =========================================================================== */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.wide { grid-column: 1 / -1; }
.field label { font-size: .86rem; font-weight: 700; color: var(--ink); }
.field .req { color: var(--ember); }
.field input, .field select, .field textarea {
    font-family: inherit; font-size: .96rem; padding: 13px 15px;
    border: 1px solid var(--line); border-radius: 11px; background: #fff;
    color: var(--ink); width: 100%;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--ember);
    box-shadow: 0 0 0 4px rgba(217,123,38,.14);
}
.field .help { font-size: .82rem; color: var(--muted); }

/* ===========================================================================
   Notices
   =========================================================================== */
.notice { border-radius: 12px; padding: 15px 18px; margin-bottom: 22px;
          font-size: .95rem; border: 1px solid; }
.notice-ok  { background: var(--green-soft); border-color: #bcdcc8; color: var(--green); }
.notice-bad { background: #fdf0ea; border-color: #f3cdb8; color: #9a4212; }

/* ===========================================================================
   Contact
   =========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1.08fr .92fr;
                gap: clamp(30px, 4vw, 56px); align-items: start; }
.info-block { margin-bottom: 26px; }
.info-block h3 { font-size: .78rem; margin-bottom: .5em; text-transform: uppercase;
                 letter-spacing: .14em; color: var(--muted); font-weight: 800; }
.info-block p { margin: 0; color: var(--ink); font-size: 1rem; }
.info-block a { color: var(--green); font-weight: 700; }
.map-frame { border: 1px solid var(--line); border-radius: var(--radius-lg);
             overflow: hidden; line-height: 0; margin-top: 10px; }
.map-frame iframe { width: 100%; height: 340px; border: 0; }

/* ===========================================================================
   Call to action
   =========================================================================== */
.cta {
    background: linear-gradient(128deg, var(--ink) 0%, #16211c 100%);
    color: #b6c2bd; border-radius: var(--radius-lg);
    padding: clamp(32px, 5vw, 58px); display: grid;
    grid-template-columns: 1fr auto; gap: 30px; align-items: center;
    position: relative; overflow: hidden;
}
.cta::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(560px 300px at 88% 108%, rgba(217,123,38,.30), transparent 64%);
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { color: #fff; margin-bottom: .35em; }
.cta p { margin: 0; color: #a3b0ab; max-width: 46em; }

/* ===========================================================================
   Footer
   =========================================================================== */
.site-foot { background: var(--ink); color: #8b9994; padding: clamp(46px, 6vw, 72px) 0 26px;
             font-size: .94rem; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(26px, 4vw, 52px); }
.site-foot h4 { color: #fff; font-size: .74rem; letter-spacing: .16em;
                text-transform: uppercase; margin: 0 0 16px; font-weight: 800; }
.site-foot a { color: #b9c4bf; }
.site-foot a:hover { color: #fff; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: 9px; }
.foot-bar {
    border-top: 1px solid rgba(255,255,255,.10); margin-top: clamp(30px, 4vw, 46px);
    padding-top: 22px; display: flex; justify-content: space-between;
    /* 5.31:1 on the footer's ink. It was #6f7d78, which measured 4.38
       and failed AA by a whisker at this size. */
    gap: 14px 26px; flex-wrap: wrap; font-size: .87rem; color: #7d8b86;
}
.foot-bar .maker a { color: #b7c3be; font-weight: 700;
                     text-decoration: underline; text-underline-offset: 2px; }
.foot-bar .maker a:hover { color: var(--ember-lit); }

/* ===========================================================================
   Floating WhatsApp
   =========================================================================== */
.wa {
    position: fixed; right: 22px; bottom: 22px; z-index: 70;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25d366; color: #fff; display: flex;
    align-items: center; justify-content: center; font-size: 1.5rem;
    box-shadow: 0 10px 30px rgba(37,211,102,.42); text-decoration: none;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa:hover { text-decoration: none; transform: scale(1.08) translateY(-2px);
            box-shadow: 0 14px 38px rgba(37,211,102,.5); }

/* ===========================================================================
   Empty states
   =========================================================================== */
.empty { border: 1px dashed var(--line); border-radius: var(--radius-lg);
         padding: 48px 26px; text-align: center; color: var(--muted);
         background: var(--mist); }

/* ===========================================================================
   Responsive
   ---------------------------------------------------------------------------
   Three real breakpoints, chosen where the layout actually stops working
   rather than at the sizes of particular devices.
   =========================================================================== */

/* Small laptops and landscape tablets: the two-column hero gets tight first. */
@media (max-width: 1080px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-grid aside { max-width: 620px; }
    .contact-grid { grid-template-columns: 1fr; }
    .cta { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
}

/* Where the menu stops fitting across the top.
   Measured, not guessed: with seven links, the logo and the price button,
   the nav's right edge sits at 1111px however narrow the window gets, so
   anything under about 1120px pushed the header past the screen and gave
   the whole site a sideways scrollbar. 1160px hands over to the burger
   with a little room to spare — enough for a scrollbar, which eats ~15px
   of the width the nav was measured against. */
@media (max-width: 1160px) {
    .nav-toggle { display: flex; }
    .site-head .wrap { min-height: 68px; }
    .nav {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 3px;
        background: #fff; border-bottom: 1px solid var(--line);
        padding: 14px var(--gutter) 20px; margin: 0;
        box-shadow: var(--shadow-lg);
        max-height: calc(100vh - 68px); overflow-y: auto;
    }
    .nav[hidden] { display: none; }
    .nav a { padding: 13px 14px; font-size: 1rem; }
    .nav a::after { display: none; }
    .nav a.on { background: var(--green-soft); color: var(--green); }
    .nav .btn { margin: 10px 0 0; justify-content: center; }
    .brand img { height: 40px; }
    .brand-name { font-size: 1.08rem; }
}

/* Phones. */
@media (max-width: 620px) {
    body { font-size: 16px; }
    .form-grid { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr; }
    .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
    .figure { border-left: none; border-top: 3px solid var(--ember);
              padding-left: 0; padding-top: 14px; }
    .wa { right: 16px; bottom: 16px; width: 52px; height: 52px; }
    .map-frame iframe { height: 260px; }
}


/* ===========================================================================
   Getting in and getting about
   =========================================================================== */

/* Straight to the content, for anyone using a keyboard or a screen reader.
   Invisible until it is focused, which is the only time it is wanted. */
.skip {
    position: absolute; left: 12px; top: -60px; z-index: 200;
    background: var(--ink); color: #fff; padding: 12px 20px;
    border-radius: 0 0 10px 10px; font-weight: 700; font-size: .9rem;
    transition: top .22s var(--ease);
}
.skip:focus { top: 0; text-decoration: none; }

/* A visible focus ring on everything, not only buttons. Removing it is how a
   keyboard user loses their place on a page. */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--ember);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Back to the top, once there is enough page to be lost in. */
.totop {
    position: fixed; right: 22px; bottom: 88px; z-index: 65;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--ink); color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; line-height: 1;
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .3s var(--ease), transform .3s var(--ease),
                visibility .3s var(--ease), background .2s var(--ease);
}
.totop.on { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--ember); }

/* ===========================================================================
   The hero arrives rather than appears
   ---------------------------------------------------------------------------
   On load, not on scroll -- it is already in view, so an observer would fire
   immediately and the stagger would be lost. Same rule as everywhere else:
   nothing is hidden unless the script is running.
   =========================================================================== */
.js .rise { opacity: 0; transform: translateY(22px); animation: rise .85s var(--ease) forwards; }
.js .rise.r1 { animation-delay: .06s; }
.js .rise.r2 { animation-delay: .16s; }
.js .rise.r3 { animation-delay: .26s; }
.js .rise.r4 { animation-delay: .36s; }

@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .js .rise { opacity: 1; transform: none; animation: none; }
}

/* ===========================================================================
   Figures band
   =========================================================================== */
.band {
    background: var(--ink-2); color: #b6c2bd;
    border-block: 1px solid rgba(255,255,255,.08);
    padding: clamp(34px, 4.5vw, 56px) 0;
}
.band .figures { gap: clamp(20px, 3vw, 44px); }
.band .figure { border-left-color: var(--ember); }
.band .figure .n { color: #fff; }
.band .figure .t { color: #93a19c; }

/* ===========================================================================
   Bigger targets where fingers are used
   ---------------------------------------------------------------------------
   Anything tapped gets at least 44px, which is the smallest a thumb reliably
   hits. On a phone the difference between a 32px and a 44px target is the
   difference between an enquiry and a mis-tap.
   =========================================================================== */
@media (hover: none) {
    .nav a, .card-more a, .site-foot a, .crumb a {
        min-height: 44px; display: flex; align-items: center;
    }
    .site-foot li { margin-bottom: 4px; }
    .btn { padding: 15px 28px; }
}