/*
 * Al Taiyeb storefront.
 *
 * Hand-written rather than generated: this server has no Node toolchain, and a
 * catalogue of this size does not need one. Layout uses CSS logical properties
 * (inline-start / inline-end rather than left / right) so the Arabic RTL
 * version is the same stylesheet flipped by dir="rtl", with no second build.
 *
 * Palette is taken from the company logo: #14497f blue, #c1444f terracotta.
 */

:root {
    --brand: #14497f;
    --brand-dark: #0c2441;
    --brand-light: #4a86c4;
    --brand-tint: #eaf1f9;
    --accent: #c1444f;

    --ink: #16202e;
    --ink-soft: #55637a;
    --line: #dfe5ee;
    /*
     * Form controls only. An empty text field has no content of its own, so
     * its border is the only thing that says a field is there — #dfe5ee is
     * 1.27:1 on white and WCAG 1.4.11 wants 3:1. This is the lightest colour
     * on the existing --line -> --ink-soft ramp that clears 3:1 against both
     * white (3.22:1) and the search field's #f6f8fb fill (3.03:1).
     * Decorative borders keep --line: they sit around content that already
     * identifies the component.
     */
    --line-control: #8590a3;
    --bg: #ffffff;
    --bg-soft: #f6f8fb;

    --radius: 10px;
    --shadow: 0 1px 2px rgba(12, 36, 65, .06), 0 8px 24px rgba(12, 36, 65, .06);
    --wrap: 1200px;

    --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-ar: "Segoe UI", "Noto Naskh Arabic", "Traditional Arabic", Tahoma, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;

    /* Model numbers and part codes run long and have nowhere to break. Without
       this, one of them widens the whole page on a phone. */
    overflow-wrap: break-word;
}

[dir="rtl"] body { font-family: var(--font-ar); }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 650; color: var(--brand-dark); }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); }
h3 { font-size: 1.02rem; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }

.visually-hidden, .skip-link:not(:focus) {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

.skip-link:focus {
    position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 100;
    background: var(--brand); color: #fff; padding: .6rem 1rem; border-radius: 6px;
}

.muted { color: var(--ink-soft); font-weight: 400; }

/* ---------- buttons ---------- */

/*
 * .55rem is the floor, not a taste call: it leaves the button ~44px tall,
 * which is the smallest reliable touch target on a phone. Going lower makes
 * these harder to hit than they look.
 */
.btn {
    display: inline-block; padding: .55rem 1.25rem; border-radius: 8px;
    font-weight: 600; font-size: .95rem; border: 1px solid transparent;
    cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { text-decoration: none; }

.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }

.btn-outline { background: #fff; color: var(--brand); border-color: var(--line); }
.btn-outline:hover { border-color: var(--brand); background: var(--brand-tint); }

.btn-ghost { color: var(--brand-dark); padding: .5rem .9rem; }
.btn-ghost:hover { background: var(--brand-tint); }

/* ---------- header ---------- */

.site-header { border-block-end: 1px solid var(--line); background: #fff; }

.topbar { background: var(--brand-dark); color: #cfdcec; font-size: .82rem; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 28px; }
.topbar-note { opacity: .9; }

.lang-switch { display: flex; gap: .5rem; align-items: center; }
.topbar-link { color: #cfdcec; padding: .15rem .45rem; border-radius: 4px; white-space: nowrap; }
.topbar-link:first-of-type { margin-inline-start: auto; }
.topbar-link:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }
.lang-switch a { color: #cfdcec; padding: .15rem .45rem; border-radius: 4px; }
.lang-switch a:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }
.lang-current { color: #fff; font-weight: 600; padding: .15rem .45rem; }

.header-inner {
    display: flex; align-items: center; gap: 1.5rem;
    padding-block: .6rem; flex-wrap: wrap;
}

/*
 * The phone menu button. Hidden until the document is marked as scripted, and
 * hidden again above the breakpoint where everything fits on one row.
 */
.nav-toggle {
    display: none; margin-inline-start: auto; cursor: pointer;
    width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--line); border-radius: 8px; background: #fff;
    align-items: center; justify-content: center;
}
.nav-toggle:hover { border-color: var(--brand); background: var(--brand-tint); }

/* Three bars drawn from one element, so there is no extra markup and nothing
   to load. The middle bar is the element; the other two are its pseudos. */
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block; width: 20px; height: 2px; border-radius: 2px;
    background: var(--brand-dark); transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; position: absolute; inset-inline-start: 0; }
.nav-toggle-bars::before { inset-block-start: -6px; }
.nav-toggle-bars::after { inset-block-start: 6px; }

/* Open: the bars become a cross. */
.is-open .nav-toggle-bars { background: transparent; }
.is-open .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.is-open .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }
/* The mark is an inline <svg>, so height is the only dimension worth setting —
   the viewBox ratio gives the width. The clamp lets it grow on a desktop
   without the ~5:1 wordmark running off the side of a narrow phone. */
.logo-mark { display: block; height: clamp(40px, 11vw, 54px); width: auto; }

/* Takes the room "All categories" used to occupy, so the placeholder stops
   being cut off mid-word. */
.header-actions { display: flex; align-items: center; gap: .3rem; }

.search { display: flex; flex: 1 1 440px; min-width: 260px; }
.search input {
    flex: 1; min-width: 0; font: inherit; padding: .45rem .85rem;
    border: 1px solid var(--line-control); border-radius: 8px 0 0 8px;
    background: var(--bg-soft); color: inherit;
}
[dir="rtl"] .search input { border-radius: 0 8px 8px 0; }
.search input:focus { outline: 2px solid var(--brand-light); outline-offset: -1px; background: #fff; }
.search button {
    font: inherit; font-weight: 600; cursor: pointer; padding: .45rem 1.1rem;
    border: 1px solid var(--brand); background: var(--brand); color: #fff;
    border-radius: 0 8px 8px 0;
}
[dir="rtl"] .search button { border-radius: 8px 0 0 8px; }
.search button:hover { background: var(--brand-dark); }

/* ---------- main nav ---------- */

/*
 * The nav must sit above the hero, which is a stacking context of its own
 * (`isolation: isolate`), so give the whole bar a z-index rather than relying
 * on the dropdown's alone.
 */
.mainnav {
    position: relative; z-index: 50;
    border-block-start: 1px solid var(--line); background: #fff;
}
/*
 * Wrap, never scroll. `overflow-x: auto` forces `overflow-y` to `auto` too, so
 * a scrolling nav bar clips its own dropdowns at the bottom edge instead of
 * letting them hang over the page below — no z-index can rescue that.
 */
.mainnav-inner { display: flex; flex-wrap: wrap; gap: .25rem; }

.mainnav-item { position: relative; flex: 0 0 auto; }

/* Not a category, so it is set slightly apart from the ones that follow. The
   rule is logical, not left/right, so Arabic pins it to the other end. */
.mainnav-all {
    margin-inline-end: .45rem; padding-inline-end: .6rem;
    border-inline-end: 1px solid var(--line);
}
.mainnav-all > a { color: var(--brand); }

.mainnav-item > a {
    display: block; padding: .55rem 1rem; font-weight: 600; font-size: .93rem;
    color: var(--brand-dark); white-space: nowrap;
    border-start-start-radius: 6px; border-start-end-radius: 6px;
    transition: color .15s, background .15s, box-shadow .15s;
}
/*
 * Keyed to the item, not the link: the moment the pointer moves down into the
 * open panel the link is no longer hovered, and the parent would drop back to
 * plain text exactly when it most needs to show which menu is open. The inset
 * shadow draws the underline without changing the item's height.
 */
.mainnav-item:hover > a,
.mainnav-item:focus-within > a {
    color: var(--brand); background: var(--brand-tint);
    box-shadow: inset 0 -3px 0 var(--brand);
    text-decoration: none;
}

.dropdown {
    position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: 40;
    min-width: 260px; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
    /* Both top corners square: the panel hangs off the nav bar like a sheet of
       paper, so its top edge should be a straight line, not two arcs. */
    border-start-start-radius: 0; border-start-end-radius: 0;
    padding: .6rem;

    /*
     * Hidden with visibility rather than `display: none`, which cannot be
     * transitioned. `visibility` also keeps the closed panel out of the
     * accessibility tree and out of hit-testing, which `opacity: 0` alone
     * would not.
     *
     * Closing is deliberately quicker than opening and eased flat: a menu you
     * are leaving should get out of the way, not perform on the way out.
     */
    opacity: 0; visibility: hidden;
    transform: translateY(-10px) scale(.97);
    transform-origin: top var(--menu-origin, left);
    transition:
        opacity .14s ease-in,
        transform .14s ease-in,
        /* Held back until the fade finishes, or it would vanish mid-animation. */
        visibility 0s linear .14s;
}
/* So the panel unfolds from under its own tab rather than from the far side. */
[dir="rtl"] .dropdown { --menu-origin: right; }

/* Hover-only reveal is acceptable here because every category in this menu is
   also reachable from /catalogue, which is linked in the header and footer. */
.mainnav-item:hover .dropdown,
.mainnav-item:focus-within .dropdown {
    opacity: 1; visibility: visible; transform: translateY(0) scale(1);
    /*
     * Motion starts the instant you hover — the unhurried feel comes from the
     * duration and the curve, not from dead time before anything moves. The
     * curve leaves quickly and decelerates hard, which reads as weight
     * settling into place. It also means a pointer sweeping along the bar only
     * ever shows the first few frames, so passing menus never snap open.
     */
    transition:
        opacity .28s ease-out,
        transform .42s cubic-bezier(.16, .84, .28, 1),
        visibility 0s;
}

.dropdown-grid { display: grid; gap: .1rem; }
.dropdown-grid a {
    padding: .45rem .6rem; border-radius: 6px; font-size: .9rem; color: var(--ink);

    /*
     * The links cascade in behind the panel. `--i` is the row index, set on
     * each link in the header partial. The first row starts with the panel, so
     * nothing waits; the cap keeps a thirteen-item menu from turning a
     * flourish into a wait.
     */
    opacity: 0; transform: translateY(-8px);
    --stagger: min(calc(var(--i, 0) * 22ms), 200ms);
    transition:
        opacity .14s ease-in, transform .14s ease-in,
        background .15s ease, color .15s ease;
}
.mainnav-item:hover .dropdown-grid a,
.mainnav-item:focus-within .dropdown-grid a {
    opacity: 1; transform: translateY(0);
    /* Repeated in full rather than as transition-delay, which would also
       delay the background on hover and make the links feel unresponsive. */
    transition:
        opacity .3s ease-out var(--stagger),
        transform .36s cubic-bezier(.16, .84, .28, 1) var(--stagger),
        background .15s ease, color .15s ease;
}
.dropdown-grid a:hover { background: var(--brand-tint); color: var(--brand); text-decoration: none; }

/* ---------- the header on a phone ----------
 *
 * Below this width the logo, the search box and five links will not share a
 * row without squeezing the search down to nothing, so the navigation folds
 * behind a button.
 *
 * Every rule that hides something is gated on `.js`. If the script never runs,
 * nothing is hidden and the visitor gets the same links as a wrapped list —
 * unlovely on a phone, but a menu behind a button that does not work is worse.
 */
@media (max-width: 980px) {
    .js .nav-toggle { display: inline-flex; }

    /* Two lines of tagline is a lot of a phone screen for something already in
       the meta description and the footer. */
    .topbar-note { display: none; }
    .topbar-inner { justify-content: flex-end; }

    .header-inner { gap: .7rem; }
    /* Search takes its own full-width row beneath the logo and the button. */
    .search { order: 3; flex: 1 1 100%; min-width: 0; }

    .js .header-actions,
    .js .mainnav { display: none; }
    .js .site-header.is-open .header-actions { display: flex; }
    .js .site-header.is-open .mainnav { display: block; }

    .header-actions {
        order: 4; flex: 1 1 100%; flex-wrap: wrap;
        gap: .4rem; padding-block-end: .5rem;
    }
    .header-actions .btn { flex: 1 1 auto; text-align: center; }

    /* One category per row. A six-item strip otherwise needs either sideways
       scrolling, which clips the dropdowns, or three wrapped lines. */
    .mainnav-inner { flex-direction: column; align-items: stretch; }
    .mainnav-item { inline-size: 100%; }
    .mainnav-item > a { padding-block: .7rem; }
    .mainnav-item + .mainnav-item { border-block-start: 1px solid var(--line); }
    .mainnav-all { margin-inline-end: 0; padding-inline-end: 0; border-inline-end: 0; }

    /* A touch screen has no hover, so the panels would never open. The
       "All categories" link above reaches every one of these pages. */
    .dropdown { display: none; }
}

@media (max-width: 400px) {
    .wrap { padding-inline: 14px; }
}

/* ---------- hero ---------- */

.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, var(--brand-dark), #123258);
    color: #fff;
}

/* Poster image, painted instantly so the hero is never blank. */
.hero-bg {
    position: absolute; inset: 0; z-index: -3;
    background-size: cover; background-position: center;
}

.hero-video {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover;
    /* Fades in once the browser has enough frames to play smoothly. */
    opacity: 0; transition: opacity .6s ease;
}
.hero-video[data-playing="1"] { opacity: 1; }

/*
 * Without this the headline sits on whatever the video happens to show and
 * becomes unreadable half a second later. The gradient keeps contrast on the
 * text side while leaving the footage visible on the other.
 */
.hero-scrim {
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(to var(--scrim-dir, right),
            rgba(8, 26, 48, .92) 0%,
            rgba(8, 26, 48, .78) 45%,
            rgba(8, 26, 48, .45) 100%),
        linear-gradient(to bottom, rgba(8, 26, 48, .35), rgba(8, 26, 48, .55));
}
[dir="rtl"] .hero-scrim { --scrim-dir: left; }

.hero-media { min-height: clamp(380px, 62vh, 620px); display: flex; align-items: center; }

.hero-inner { padding-block: clamp(2.5rem, 5vw, 4.5rem); width: 100%; }
.hero-text { max-width: 44rem; }
.hero h1 {
    color: #fff; margin-block-end: .85rem;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.hero p {
    color: #dbe6f2; font-size: 1.06rem; margin-block: 0 1.75rem;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}
.hero-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.btn-hero-ghost {
    background: rgba(255, 255, 255, .1); color: #fff;
    border-color: rgba(255, 255, 255, .5); backdrop-filter: blur(2px);
}
.btn-hero-ghost:hover { background: rgba(255, 255, 255, .2); border-color: #fff; }

.hero-stats { color: #b6cbe1; font-size: .88rem; margin-block: 1.25rem 0; }

@media (prefers-reduced-motion: reduce) {
    .hero-video { display: none; }
}

/* ---------- sections ---------- */

.section { padding-block: clamp(2rem, 4vw, 3.25rem); }
.section-tint { background: var(--bg-soft); border-block: 1px solid var(--line); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-block-end: 1.5rem; }
.link-more { font-size: .9rem; font-weight: 600; }

.subhead { font-size: 1.15rem; margin-block: 0 1.1rem; display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }

.page-head { padding-block: 1.75rem .5rem; }
/* Wider than the 68ch body measure: this paragraph is the page's own
   introduction, sits alone at the top, and read short against the empty space
   beside it. Still bounded — full-bleed text is unreadable. */
.page-head .prose { max-width: 90ch; }
.page-head h1 { margin-block-end: .35rem; }

.empty { color: var(--ink-soft); padding-block: 2rem; }

/* ---------- breadcrumbs ---------- */

.breadcrumbs { border-block-end: 1px solid var(--line); background: var(--bg-soft); font-size: .85rem; }
.breadcrumbs ol {
    list-style: none; display: flex; flex-wrap: wrap; gap: .4rem;
    margin: 0; padding: .7rem 0;
}
.breadcrumbs li + li::before { content: "›"; color: var(--ink-soft); margin-inline-end: .4rem; }
[dir="rtl"] .breadcrumbs li + li::before { content: "‹"; }
.breadcrumbs [aria-current] { color: var(--ink-soft); }

/* ---------- category grids ---------- */

.cat-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
.cat-card {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.1rem 1.2rem; background: #fff;
    transition: box-shadow .15s, border-color .15s;
}
.cat-card:hover { box-shadow: var(--shadow); border-color: var(--brand-light); }
.cat-card h2, .cat-card h3 { font-size: 1rem; margin-block-end: .6rem; }
.cat-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.cat-card li a { font-size: .9rem; color: var(--ink-soft); }
.cat-card li a:hover { color: var(--brand); }
.cat-count { margin: 0; font-size: .85rem; color: var(--ink-soft); }

.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: .5rem; }
.chip {
    display: inline-flex; align-items: center; gap: .45rem;
    border: 1px solid var(--line); border-radius: 999px;
    padding: .4rem .9rem; font-size: .9rem; background: #fff; color: var(--ink);
}
.chip:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; background: var(--brand-tint); }
.chip-count {
    background: var(--brand-tint); color: var(--brand); border-radius: 999px;
    padding: 0 .45rem; font-size: .78rem; font-weight: 600;
}

/* ---------- product cards ---------- */

.product-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr));
}

.card {
    display: flex; flex-direction: column; background: #fff; color: inherit;
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    transition: box-shadow .15s, border-color .15s, transform .15s;
}
.card:hover {
    box-shadow: var(--shadow); border-color: var(--brand-light);
    text-decoration: none; transform: translateY(-2px);
}

.card-media {
    aspect-ratio: 1 / 1; background: #fff; display: grid; place-items: center;
    padding: .9rem; border-block-end: 1px solid var(--line);
}
.card-media img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.card-noimage { width: 100%; height: 100%; background: var(--bg-soft); border-radius: 6px; }

.card-body { padding: .85rem .95rem 1rem; display: grid; gap: .3rem; }
.card-brand { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.card-title { font-size: .93rem; font-weight: 600; color: var(--brand-dark); margin: 0; }
.card-model { font-size: .8rem; color: var(--ink-soft); }

/* ---------- product page ---------- */

.product {
    display: grid; gap: clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: minmax(0, 1fr);
    padding-block: 1.5rem;
}
@media (min-width: 860px) {
    .product { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
}

.product-media {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.25rem; background: #fff;
}
.product-image { width: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply; }

.thumb-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-block-start: .9rem; }
.thumb-row img {
    width: 64px; height: 64px; object-fit: contain; padding: 4px;
    border: 1px solid var(--line); border-radius: 6px; background: #fff;
}

.product-brand {
    margin: 0 0 .35rem; font-size: .78rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
}
.product-model { margin: 0 0 1rem; color: var(--ink-soft); font-size: .92rem; }
.product-lede { font-size: 1.03rem; color: var(--ink); margin-block: 0 1.5rem; }

.options { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; background: var(--bg-soft); margin-block-end: 1.5rem; }
.options label { display: block; font-weight: 600; font-size: .9rem; margin-block-end: .5rem; }
.options select {
    width: 100%; font: inherit; padding: .6rem .7rem;
    border: 1px solid var(--line-control); border-radius: 8px; background: #fff; color: inherit;
}
.options-note { margin: .6rem 0 0; font-size: .84rem; color: var(--ink-soft); }

.product-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-block-end: 1rem; }
.datasheet { font-size: .9rem; font-weight: 600; }

/* ---------- product documents ---------- */

.doc-list { margin-block-start: 1.5rem; border-block-start: 1px solid var(--line); padding-block-start: 1.1rem; }
.doc-list-title {
    margin: 0 0 .6rem; font-size: .78rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
}
.doc-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
/*
 * `minmax(0, 1fr)` on the name, not a fixed width: a certificate title can be
 * long and a 320px phone has nowhere to put the overflow. The name wraps, the
 * size column never does.
 */
.doc-link {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .5rem;
    padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 8px;
    background: var(--bg-soft); text-decoration: none; color: inherit;
}
.doc-link:hover, .doc-link:focus-visible { border-color: var(--accent); background: #fff; }
.doc-name { font-size: .92rem; font-weight: 600; color: var(--brand-dark); overflow-wrap: anywhere; }
.doc-meta { font-size: .78rem; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.doc-note { margin: .7rem 0 0; font-size: .82rem; color: var(--ink-soft); }

/* ---------- tables ---------- */

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }

.spec-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.spec-table th, .spec-table td {
    padding: .7rem .95rem; text-align: start;
    border-block-end: 1px solid var(--line); vertical-align: top;
}
.spec-table thead th { background: var(--bg-soft); font-weight: 650; color: var(--brand-dark); white-space: nowrap; }
.spec-table tbody th { width: 34%; font-weight: 600; color: var(--brand-dark); background: #fbfcfe; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-block-end: 0; }

/* ---------- prose ---------- */

.prose { max-width: 68ch; color: var(--ink); }
.prose p { margin-block: 0 .9rem; }
.prose ul, .prose ol { margin-block: 0 .9rem; padding-inline-start: 1.4rem; }
.prose li { margin-block-end: .3rem; }
/*
 * This body is written in the admin, so it can contain anything. A wide table
 * pasted in from a datasheet would otherwise stretch the whole page sideways
 * on a phone; `display: block` lets it scroll inside its own box instead.
 */
.prose table {
    display: block; max-width: 100%; overflow-x: auto;
    border-collapse: collapse; margin-block-end: 1rem;
}
.prose th, .prose td { border: 1px solid var(--line); padding: .5rem .7rem; text-align: start; }
.prose img, .prose video, .prose iframe { max-width: 100%; height: auto; }
.prose pre { max-width: 100%; overflow-x: auto; }

/* ---------- pagination ---------- */

.pagination { margin-block-start: 2rem; }
/*
 * The markup is ours (resources/views/vendor/pagination/default.blade.php), so
 * these selectors can name exactly the controls rather than every span in the
 * subtree. The previous rule matched Laravel's Tailwind wrappers as well, which
 * put a box around each numeral and then a box around that.
 */
.page-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .35rem;
}
.page-link {
    display: inline-block; padding: .45rem .8rem;
    border: 1px solid var(--line); border-radius: 6px;
    font-size: .9rem; line-height: 1.2;
    /* 44px is the smallest comfortable tap target on a phone. */
    min-width: 2.75rem; min-height: 2.75rem; text-align: center;
    display: flex; align-items: center; justify-content: center;
}
a.page-link:hover, a.page-link:focus-visible { border-color: var(--brand); text-decoration: none; }
.page-link.is-current { background: var(--brand); color: #fff; border-color: var(--brand); }
.page-link.is-disabled { color: var(--ink-soft); opacity: .55; }
.page-gap { display: inline-block; padding: .45rem .3rem; color: var(--ink-soft); }

/* ---------- footer ---------- */

.site-footer { background: var(--brand-dark); color: #b9cadd; margin-block-start: 3rem; }
.footer-grid {
    display: grid; gap: 2rem; padding-block: 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
/* Drawn in white now, so it no longer needs a white plate to sit on. */
.footer-logo { display: block; height: clamp(34px, 9vw, 46px); width: auto; }
.footer-tagline { font-size: .9rem; margin-block-start: 1rem; }
.site-footer h2 { color: #fff; font-size: .95rem; margin-block-end: .8rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.site-footer a { color: #b9cadd; font-size: .9rem; }
.site-footer a:hover { color: #fff; }
.footer-bottom { border-block-start: 1px solid rgba(255, 255, 255, .12); padding-block: 1.1rem; }
.footer-bottom p { margin: 0; font-size: .84rem; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    .card:hover { transform: none; }
}

/* ---------- contact page & enquiry form ---------- */

.contact-layout {
    display: grid; gap: clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}
@media (min-width: 880px) {
    .contact-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

.alert-success {
    display: grid; gap: .2rem;
    border: 1px solid #b8dfc4; background: #eefaf1; color: #15653a;
    border-radius: var(--radius); padding: 1rem 1.15rem; margin-block-end: 1.5rem;
}

.form-errors {
    border: 1px solid #eec2c6; background: #fdf1f2; color: #8d2b34;
    border-radius: var(--radius); padding: .9rem 1.1rem; margin-block-end: 1.25rem;
}
.form-errors ul { margin: 0; padding-inline-start: 1.1rem; }

.enquiry-form { max-width: 44rem; }
.field-row { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }

.field { margin: 0 0 1rem; display: grid; gap: .35rem; }
.field label { font-weight: 600; font-size: .9rem; color: var(--brand-dark); }
.field .req { color: var(--accent); }
.field input, .field textarea {
    font: inherit; width: 100%; padding: .65rem .8rem; color: inherit;
    border: 1px solid var(--line-control); border-radius: 8px; background: #fff;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--brand-light); outline-offset: -1px; }
.field textarea { resize: vertical; min-height: 7rem; }

.field-hint { font-size: .85rem; color: var(--ink-soft); margin-block: 0 1rem; }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-product {
    display: flex; align-items: center; gap: .9rem; margin-block-end: 1.5rem;
    border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; background: var(--bg-soft);
}
.contact-product img { width: 56px; height: 56px; object-fit: contain; mix-blend-mode: multiply; }
/* min-width: 0 lets a long product name wrap instead of forcing the row
   wider than the screen — flex and grid children default to min-content. */
.contact-product div { display: grid; min-width: 0; }
.contact-product .muted { font-size: .8rem; }

.contact-aside section { margin-block-end: 2rem; }
.contact-aside h2 { font-size: 1rem; margin-block-end: .8rem; }

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.contact-list li {
    display: grid; gap: .15rem; font-size: .92rem;
    border-inline-start: 3px solid var(--brand-tint); padding-inline-start: .85rem;
}
.contact-role { font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.contact-phone { font-size: 1.05rem; font-weight: 650; }
.contact-wa { font-size: .85rem; }

.product-price-note { font-size: .85rem; color: var(--ink-soft); margin-block: 0 1rem; }

/* ---------- brands ---------- */

.brand-strip { display: flex; flex-wrap: wrap; gap: .75rem; }

.brand-chip {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 120px; height: 62px; padding: .6rem 1.1rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: #fff; color: var(--brand-dark);
    font-weight: 650; font-size: .95rem; letter-spacing: .01em;
    transition: border-color .15s, box-shadow .15s, color .15s;
}
.brand-chip:hover { border-color: var(--brand-light); box-shadow: var(--shadow); color: var(--brand); text-decoration: none; }
.brand-chip img { max-height: 38px; width: auto; object-fit: contain; mix-blend-mode: multiply; }

.brand-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
}
.brand-card {
    display: grid; gap: .35rem; justify-items: center; text-align: center;
    padding: 1.4rem 1rem 1.2rem; background: #fff; color: inherit;
    border: 1px solid var(--line); border-radius: var(--radius);
    transition: box-shadow .15s, border-color .15s, transform .15s;
}
.brand-card:hover {
    box-shadow: var(--shadow); border-color: var(--brand-light);
    transform: translateY(-2px); text-decoration: none;
}
.brand-card-mark { display: grid; place-items: center; height: 56px; margin-block-end: .5rem; }
.brand-card-mark img { max-height: 52px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
/* Until a logo is uploaded, the brand name itself is the mark. */
.brand-wordmark { font-size: 1.15rem; font-weight: 700; color: var(--brand); letter-spacing: -.01em; }
.brand-card-name { font-weight: 600; color: var(--brand-dark); }
.brand-card-count { font-size: .82rem; color: var(--ink-soft); }

.brand-head {
    display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap;
    padding-block: 1.75rem .5rem;
}
.brand-head-logo {
    max-width: 160px; max-height: 80px; object-fit: contain;
    border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem; background: #fff;
}
.brand-site { font-size: .9rem; font-weight: 600; display: inline-block; margin-block-start: .5rem; }

.product-brand a { color: inherit; }
.product-brand a:hover { text-decoration: underline; }

/* ---------- category tiles ---------- */

.cat-tiles {
    display: grid; gap: 1.1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
}

.cat-tile {
    display: flex; flex-direction: column; background: #fff; color: inherit;
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    transition: box-shadow .18s, border-color .18s, transform .18s;
}
.cat-tile:hover {
    box-shadow: var(--shadow); border-color: var(--brand-light);
    transform: translateY(-3px); text-decoration: none;
}

.cat-tile-media {
    aspect-ratio: 16 / 10; background: var(--bg-soft);
    display: grid; place-items: center; padding: 1rem;
    border-block-end: 1px solid var(--line); overflow: hidden;
}
.cat-tile-media img {
    max-height: 100%; width: auto; object-fit: contain;
    mix-blend-mode: multiply; transition: transform .3s ease;
}
.cat-tile:hover .cat-tile-media img { transform: scale(1.04); }

.cat-tile-body { padding: .9rem 1rem 1.05rem; display: grid; gap: .25rem; }
.cat-tile-body h3 { margin: 0; font-size: 1rem; color: var(--brand-dark); }
.cat-tile-sub {
    margin: 0; font-size: .82rem; color: var(--ink-soft); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-tile-count { font-size: .78rem; font-weight: 600; color: var(--accent); }

/* ---------- what we do ---------- */

.section-dark {
    background:
        radial-gradient(900px 420px at 12% 0%, rgba(74, 134, 196, .18), transparent 62%),
        linear-gradient(180deg, var(--brand-dark), #0e2b4d);
    color: #dbe6f2;
}
.section-dark h2, .section-dark h3 { color: #fff; }
.section-head-dark { display: block; margin-block-end: 1.9rem; }
.section-intro { margin: .5rem 0 0; color: #b6cbe1; max-width: 60ch; }

.service-grid {
    display: grid; gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}

.service-card {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius); overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color .18s, transform .18s, background .18s;
}
.service-card:hover {
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .08);
    transform: translateY(-3px);
}

.service-media { aspect-ratio: 16 / 10; overflow: hidden; background: #0b2340; }
.service-media img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }

.service-body { padding: 1.05rem 1.15rem 1.3rem; }
.service-body h3 { font-size: 1.02rem; margin: 0 0 .45rem; }
.service-body p { margin: 0; font-size: .92rem; line-height: 1.6; color: #c3d4e6; }

/* ---------- projects & services ---------- */

.eyebrow {
    display: inline-block; font-size: .72rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
    margin-block-end: .4rem;
}
.eyebrow-light { color: #7fb0e0; }

.lede { font-size: 1.06rem; color: var(--ink-soft); max-width: 62ch; }

.read-more { font-size: .88rem; font-weight: 650; display: inline-block; margin-block-start: .6rem; }
.read-more-light { color: #8dc0ef; }
.service-card:hover .read-more-light { color: #fff; }

.link-more-dark { color: #9ec6ec; }
.link-more-dark:hover { color: #fff; }

/* listing */
.story-list { display: grid; gap: 1.6rem; }
.story {
    display: grid; gap: 1.4rem; align-items: center;
    grid-template-columns: minmax(0, 1fr);
    border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; background: #fff;
    transition: box-shadow .18s, border-color .18s;
}
.story:hover { box-shadow: var(--shadow); border-color: var(--brand-light); }
@media (min-width: 760px) {
    .story { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; }
}
.story-media { display: block; aspect-ratio: 16 / 11; background: var(--bg-soft); overflow: hidden; }
.story-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.story:hover .story-media img { transform: scale(1.03); }
.story-body { padding: 1.4rem 1.6rem; }
.story-body h2 { font-size: 1.3rem; margin-block-end: .5rem; }
.story-body h2 a { color: inherit; }
.story-body p { color: var(--ink-soft); margin: 0; }

/* article */
.article { max-width: 860px; padding-block: 1.5rem; }
.article-head { margin-block-end: 1.5rem; }
.article-cover {
    width: 100%; height: auto; border-radius: var(--radius);
    border: 1px solid var(--line); margin-block-end: 1.75rem;
}
.article-body { max-width: none; }
.article-body h3 {
    font-size: 1.1rem; margin-block: 1.6rem .5rem; color: var(--brand-dark);
    padding-inline-start: .7rem; border-inline-start: 3px solid var(--accent);
}
.article-gallery {
    display: grid; gap: 1rem; margin-block-start: 1.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.article-gallery img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }

.article-cta {
    margin-block-start: 2.25rem; padding: 1.4rem 1.5rem;
    background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
}
.article-cta p { margin: 0 0 1rem; color: var(--ink); }

.story-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.story-card {
    background: #fff; color: inherit; border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
    transition: box-shadow .18s, border-color .18s, transform .18s;
}
.story-card:hover { box-shadow: var(--shadow); border-color: var(--brand-light); transform: translateY(-2px); text-decoration: none; }
.story-card-media { aspect-ratio: 16 / 10; background: var(--bg-soft); overflow: hidden; }
.story-card-media img { width: 100%; height: 100%; object-fit: cover; }
.story-card-body { padding: .9rem 1rem 1.1rem; }
.story-card-body h3 { font-size: .98rem; margin: 0; }

/* ---------- video ---------- */

.video-block { margin-block-start: 2rem; }

.video-grid {
    display: grid; gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.video-item { margin: 0; }
.video-item video {
    width: 100%; display: block; background: #0b2340;
    border: 1px solid var(--line); border-radius: var(--radius);
    /* Portrait phone clips sit alongside landscape ones; capping the height
       stops a vertical video from taking over the page. */
    max-height: 70vh; object-fit: contain;
}
.video-item figcaption {
    font-size: .88rem; color: var(--ink-soft);
    margin-block-start: .55rem; display: flex; gap: .5rem;
    align-items: baseline; justify-content: space-between;
}
.video-duration {
    flex: 0 0 auto; font-variant-numeric: tabular-nums;
    font-size: .8rem; color: var(--brand); font-weight: 600;
}

/* Play badge on cards that lead to a page with footage */
.story-media, .service-media { position: relative; }
.video-badge {
    position: absolute; inset-block-end: .7rem; inset-inline-end: .7rem;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(12, 36, 65, .82); color: #fff;
    display: grid; place-items: center; font-size: .8rem;
    padding-inline-start: 2px; backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, .3);
}

/* ---------- capabilities band ---------- */

.capability-section { padding-block-start: 1rem; }

.capability-grid {
    display: grid; gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.capability {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.4rem 1.5rem 1.5rem; background: #fff;
    border-block-start: 3px solid var(--accent);
}
.capability-icon {
    width: 56px; height: 56px; object-fit: contain;
    margin-block-end: .9rem; opacity: .9;
}
.capability h2 { font-size: 1.05rem; margin-block-end: .5rem; }
.capability p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ink-soft); }

/* Catalogue downloads
   ------------------------------------------------------------------------ */

.download-grid {
    display: grid; gap: 1.25rem;
    list-style: none; padding: 0; margin: 0;
    /* min() so the track collapses on a 320px screen instead of overflowing. */
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.download-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--bg); overflow: hidden;
}

.download-card:hover { box-shadow: var(--shadow); }

/* The cover keeps the proportions of the PDF behind it, so a row of cards
   lines up whatever shape the uploaded artwork happens to be. */
.download-cover {
    display: block; aspect-ratio: 210 / 297;
    background: var(--brand-tint);
}

.download-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.download-cover-blank {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    color: var(--brand); font-weight: 700; letter-spacing: .12em;
}

.download-body {
    display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
    padding: 1rem 1.1rem 1.2rem;
}

.download-body h2 { font-size: 1.05rem; margin: 0; }
.download-subtitle { margin: 0; color: var(--ink-soft); }
.download-meta { margin: 0 0 .5rem; color: var(--ink-soft); font-size: .9rem; }

/* ---------- form errors ---------- */

.form-errors-title { font-size: 1rem; margin: 0 0 .5rem; color: #8d2b34; }
.form-errors ul { margin: 0; padding-inline-start: 1.2rem; }
.form-errors a { color: #8d2b34; }
/* 7.53:1 on white — an error must be readable, not merely red. */
.field-error { display: block; margin-block-start: .3rem; font-size: .85rem; color: #8d2b34; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #8d2b34; }

/* ---------- product description beside specifications ---------- */

/*
 * `minmax(0, …)` on both tracks, never a bare px minimum: a spec value like
 * "0…0.4 to 0…1,600 bar [0…10 to 0…20,000 psi]" cannot wrap without it and
 * pushes the whole page sideways. The project has a test that fails on a bare
 * `minmax(Npx`.
 */
.product-detail {
    display: grid;
    gap: 2rem 2.5rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

/*
 * Stacks below 900px. Reading order puts the description first, which is what
 * a phone should show first — the table is the reference, the prose is the
 * explanation.
 */
@media (min-width: 900px) {
    .product-detail {
        /* The prose is capped at 68ch, so give it the narrower track and let
           the table take the room it actually needs. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    }
}

/* Both headings sit on the same line whatever the column heights. */
.product-detail > * > .subhead { margin-block-start: 0; }
.product-detail-text .prose { max-width: 62ch; }

/* About page ---------------------------------------------------------- */
.branch-list {
  list-style: none; padding: 0; margin: 1rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1rem;
}
.branch-list li {
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1rem 1.1rem; background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px;
}
.branch-list strong { font-size: 1.05rem; }
.branch-list span { color: var(--ink-soft); font-size: .95rem; }
.branch-list a { align-self: flex-start; }

.review-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem;
  margin-block-start: .5rem;
}
.review {
  margin: 0; padding: 1.1rem 1.25rem; border-inline-start: 3px solid var(--brand);
  background: var(--bg); border-radius: 0 6px 6px 0;
}
.review p { margin: 0 0 .6rem; font-size: 1.02rem; }
.review footer { color: var(--ink-soft); font-size: .9rem; }

/* Catalogue flipbook ---------------------------------------------------- */
.flipbook-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-block-end: 1rem; }
.flipbook-head h1 { margin: 0; }
.flipbook-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.btn-note { opacity: .75; font-weight: 400; margin-inline-start: .35rem; font-size: .85em; }

/* Before the script runs, and without it, the pages stack in a readable
   column — every page there, nothing lost. Once page-flip takes over the
   stage it lays the pages out itself. */
.flipbook-stage { display: grid; gap: 1rem; justify-items: center; }
.flipbook-page img { max-width: min(100%, 560px); height: auto; box-shadow: 0 2px 12px rgba(0, 0, 0, .18); background: #fff; }
/* Without the script the pages stand in a column: the noscript copies show and the source-less frames the script would have filled do not. */
.flipbook:not(.is-book) .flipbook-page img[data-src] { display: none; }
.flipbook.is-book .flipbook-stage { display: block; margin-inline: auto; transition: transform .7s ease; }
/* page-flip injects styles for its parent, block and items, and none for the
   wrapper between them. Left to the cascade here the wrapper measured zero
   wide and sat at the centre, so the absolutely positioned block hung off it
   from the middle of the stage and the book was clipped at the right edge. */
.flipbook.is-book .stf__wrapper { position: relative; display: block; width: 100%; margin: 0; }
.flipbook.is-book .stf__block { inset-inline-start: 0; inset-block-start: 0; }
/* page-flip wraps each page in an absolutely positioned item and sizes it;
   the image simply fills that. */
.flipbook.is-book .flipbook-page { background: #fff; overflow: hidden; }
/* A pixel over the page box on every side, clipped by it. A photograph
   scaled down is resampled past its own edge, which leaves its outermost
   pixel half transparent; fitted exactly, that showed as a pale hairline
   down the spine of every spread and along the top of the band. */
.flipbook.is-book .flipbook-page img { display: block; max-width: none; width: calc(100% + 2px); height: calc(100% + 2px); margin: -1px; object-fit: fill; box-shadow: none; }
.flipbook.is-book .stf__block { box-shadow: 0 8px 30px rgba(0, 0, 0, .25); }
.flipbook-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; margin-block-start: 1rem; }
.flipbook-controls .btn { white-space: nowrap; }
.flipbook-counter { font-variant-numeric: tabular-nums; color: var(--ink-soft); min-width: 5ch; text-align: center; }
@media (prefers-reduced-motion: reduce) { .flipbook.is-book .stf__item { transition: none !important; } .flipbook.is-book .flipbook-stage { transition: none; } }

/* Full screen: the display becomes the desk. */
.flipbook-fullscreen { display: inline-flex; align-items: center; gap: .4rem; }
.flipbook:fullscreen { background: #14181d; padding: 1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.flipbook:fullscreen .flipbook-stage { margin: 0 auto; }
.flipbook:fullscreen .flipbook-controls { color: #e7eaed; }
.flipbook:fullscreen .flipbook-counter { color: #cfd6de; }
.flipbook:fullscreen .btn-ghost { color: #fff; background: rgba(255, 255, 255, .12); }
.flipbook:fullscreen .btn-ghost:hover { background: rgba(255, 255, 255, .22); }