/*==============================================================================
  Astute Technologies — public site stylesheet

  One hand-written file, served from this origin. The previous site loaded the
  Tailwind Play CDN on all 13 pages, which downloads a ~400KB script and
  compiles the stylesheet in the browser on every page load, re-running on
  every DOM mutation. That was the largest single cause of the reported
  freezing. Everything below is plain CSS: no runtime, no build step, no
  third-party request.

  Design language
    Dark-grounded and editorial. Sections alternate between paper and a deep
    navy ink so the page has rhythm instead of being one long white scroll.
    Headings are large and tightly tracked; section labels are indexed and
    left-aligned. Red is reserved for actions and emphasis — a cool cyan does
    the quieter "technology" signalling — so the brand colour keeps its force.

  Contents
    1. Tokens
    2. Reset & base
    3. Layout primitives
    4. Typography & prose
    5. Buttons, tags, icons
    6. Header & navigation
    7. Hero
    8. Sections
    9. Cards & content blocks
   10. Interior pages
   11. Forms
   12. Footer
   13. Utilities, error & maintenance
   14. Responsive
   15. Motion & print
==============================================================================*/

/*------------------------------------------------------------------------------
  1. Tokens
------------------------------------------------------------------------------*/
:root {
    /* Ink — the dark ground ------------------------------------------------ */
    --ink-950: #05090f;
    --ink-900: #080e1a;
    --ink-850: #0c1424;
    --ink-800: #111b2e;
    --ink-750: #16233a;
    --ink-700: #1d2d48;
    --ink-600: #2a3f61;

    /* Paper — the light ground --------------------------------------------- */
    --paper:      #ffffff;
    --paper-soft: #f5f7fa;
    --paper-mid:  #eef1f6;
    --paper-line: #e0e5ee;

    /* Neutral text ---------------------------------------------------------- */
    --slate-900: #0d1626;
    --slate-700: #35435c;
    --slate-600: #4d5c78;
    --slate-500: #6b7a95;

    /*
     * --slate-500 is the muted grey on BOTH grounds, and one value cannot
     * serve both: dark enough for 4.5:1 on white is too dark to read on the
     * ink footer, and vice versa. So the light-ground case gets its own
     * token. #616e87 clears AA on paper, paper-soft and paper-mid
     * (5.12 / 4.77 / 4.52); --slate-500 stays as it is for dark grounds,
     * where it already passes.
     */
    --muted-on-paper: #616e87;
    --slate-400: #94a2ba;
    --slate-300: #c2cbda;

    /* Brand ----------------------------------------------------------------- */
    --brand:        #d81e34;
    --brand-bright: #f2354c;
    --brand-deep:   #a4142a;
    --brand-tint:   #fdeaed;

    /* A cool secondary that reads as "technology" without competing with the
       brand red. Used for rules, indices and quiet accents only. */
    --tech:      #37c2e0;
    --tech-deep: #1b8fa8;

    --ok:    #0f7a5f;
    --warn:  #b26205;
    --error: #c2192c;

    /* Semantic --------------------------------------------------------------- */
    --bg:          var(--paper);
    --bg-alt:      var(--paper-soft);
    --surface:     var(--paper);
    --text:        var(--slate-900);
    --text-muted:  var(--slate-600);
    --text-invert: #ffffff;
    --border:      var(--paper-line);
    --accent:      var(--brand);

    /* Typography -------------------------------------------------------------
       A system stack: zero network requests, no layout shift while a webfont
       downloads, and a native feel on every platform. The old site pulled a
       Font Awesome webfont from a CDN purely for icons; those are now an
       inline SVG sprite. */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                 Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Fluid scale — no media queries needed for type. */
    /*
     * Body copy sits at the 16px browsers default to, rather than below it,
     * and the display sizes were pulled back so headings lead the page
     * without dominating it. The previous top end (5rem / 80px) made every
     * section feel zoomed in and pushed the real content below the fold.
     */
    /*
     * Uppercase, letter-spaced micro-labels (eyebrows, stat captions, footer
     * headings, catalogue badges). They were scattered hard-coded values from
     * 8px to 10.5px; at 320px an 8px badge is simply not readable. Uppercase
     * letterforms read larger than lowercase at the same size, so this sits
     * just under --fs-xs and is now the floor for real text on the site.
     */
    --fs-label: 0.72rem;

    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-md:   clamp(1rem, 0.15vw + 0.96rem, 1.0625rem);
    --fs-lg:   clamp(1.0625rem, 0.35vw + 0.99rem, 1.1875rem);
    --fs-xl:   clamp(1.25rem, 0.7vw + 1.05rem, 1.5rem);
    --fs-2xl:  clamp(1.5rem, 1.3vw + 1.05rem, 2.125rem);
    --fs-3xl:  clamp(1.875rem, 2.2vw + 1.1rem, 2.75rem);
    --fs-4xl:  clamp(2.25rem, 3.6vw + 1rem, 3.75rem);

    --lh-tight: 1.04;
    --lh-snug:  1.22;
    --lh-base:  1.68;

    /* Spacing ---------------------------------------------------------------- */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.5rem;
    --sp-6:  2rem;
    --sp-7:  2.5rem;
    --sp-8:  3rem;
    --sp-9:  4rem;
    --sp-10: 5.5rem;
    --sp-section: clamp(3.25rem, 5.5vw, 5.5rem);

    /* Shape ------------------------------------------------------------------ */
    --radius-sm: 4px;
    --radius:    8px;
    --radius-lg: 14px;
    --radius-xl: 22px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(8, 14, 26, .05);
    --shadow:    0 2px 8px rgba(8, 14, 26, .06), 0 1px 2px rgba(8, 14, 26, .04);
    --shadow-md: 0 10px 26px rgba(8, 14, 26, .08), 0 2px 6px rgba(8, 14, 26, .04);
    --shadow-lg: 0 26px 60px rgba(8, 14, 26, .14), 0 6px 14px rgba(8, 14, 26, .06);
    --shadow-ink: 0 26px 60px rgba(0, 0, 0, .5);

    --container: 1240px;
    --container-narrow: 780px;
    --header-h: 76px;

    --ease: cubic-bezier(.22, .61, .36, 1);
    --transition: 200ms var(--ease);
}

/*------------------------------------------------------------------------------
  2. Reset & base
------------------------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Paired with the body rule below: without it the documentElement still
       reports the wider scrollWidth even though nothing can scroll to it. */
    overflow-x: hidden;
    /* Keeps an anchored heading clear of the sticky header. */
    scroll-padding-top: calc(var(--header-h) + var(--sp-5));
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Guards against a long word or wide table forcing sideways scroll on a
       320px screen. */
    overflow-x: hidden;
}

img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }

/*
 * The hidden attribute must always win.
 *
 * Without this, any class that sets `display` beats the browser's own
 * [hidden] { display: none } rule, because an author class selector outranks
 * the UA stylesheet. That is exactly what happened to .nav-scrim: it is
 * display:none at the top level and display:block inside the mobile media
 * query, so on every screen 880px and under the scrim stayed in the layout
 * while marked hidden — an invisible, full-viewport, z-index:98 sheet with
 * pointer-events:auto sitting over the whole site.
 *
 * The result was that every tap on a phone or tablet landed on the scrim
 * instead of the thing underneath: the cookie Accept/Decline buttons, the hero
 * CTAs, the WhatsApp button, the menu — all inert. The site was, correctly,
 * reported as "completely dead" on Android and iOS. It could not be reproduced
 * with scripted element.click() calls, which bypass hit-testing entirely.
 */
[hidden] { display: none !important; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-deep); }

ul, ol { padding: 0; list-style: none; }

/* Visible, high-contrast focus for keyboard users (WCAG 2.4.7). */
:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--brand); color: #fff; }

/*------------------------------------------------------------------------------
  3. Layout primitives
------------------------------------------------------------------------------*/
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.container--narrow { max-width: var(--container-narrow); }

.section {
    position: relative;
    padding-block: var(--sp-section);
}

/* Keeps section edges polished when the site is viewed on large displays. */
.section::after {
    content: "";
    position: absolute;
    inset: auto clamp(1.25rem, 5vw, 3rem) 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(29, 45, 72, .09), transparent);
}

.section--trust::after,
.section--process::after,
.section--technology::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13), transparent); }

.section--alt { background: var(--bg-alt); }

/*
 * Page rhythm.
 *
 * The homepage runs twelve sections. Left to itself that is a very long white
 * scroll, which is what made the old site feel flat. The grounds below
 * alternate deliberately, in the order the sections actually appear, so the
 * eye gets a reset every screen or two and the two dark anchors (the opening
 * hero/trust block and "How we work") give the page a spine.
 *
 *   1  hero          ink      6  about         soft     11  partners  soft
 *   2  trust         ink      7  why us        paper    12  cta       paper
 *   3  services      paper    8  process       ink
 *   4  catalogue     soft     9  testimonials  soft
 *   5  portfolio     paper   10  faq           paper
 *
 * Changing a section's order in the admin does not break this — every ground
 * still contrasts with the default paper on either side of it.
 */
.section--catalogue,
.section--about,
.section--testimonials,
.section--partners { background: var(--bg-alt); }

.section--services,
.section--portfolio,
.section--why,
.section--faq,
.section--cta { background: var(--bg); }


/*
 * Dark sections. Applied to specific blocks rather than offered as a generic
 * modifier, so the page's light/dark rhythm is a design decision made here
 * rather than something a template can get wrong.
 */
.section--trust,
.section--process,
.section--technology {
    background: var(--ink-900);
    color: var(--slate-300);
}

.section--trust .section__title,
.section--process .section__title,
.section--technology .section__title { color: #fff; }

.section--trust .section__lead,
.section--process .section__lead,
.section--technology .section__lead { color: var(--slate-400); }

/* A hairline rule at the top of each dark band. */
.section--trust::before,
.section--process::before,
.section--technology::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ink-600) 30%, var(--ink-600) 70%, transparent);
}

/* Section heading block ------------------------------------------------------ */
.section__head {
    max-width: 62ch;
    margin-bottom: var(--sp-7);
}

.section__head--compact { margin-bottom: var(--sp-6); }

.section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brand);
}

/* A short rule leading into the label — reads as an index marker. */
.section__eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
    flex: none;
}

.section--trust .section__eyebrow,
.section--process .section__eyebrow,
.section--technology .section__eyebrow { color: var(--tech); }

.section__title {
    font-size: var(--fs-3xl);
    line-height: var(--lh-tight);
    letter-spacing: -.035em;
    font-weight: 800;
    color: var(--slate-900);
    text-wrap: balance;
}

.section__title--sm { font-size: var(--fs-2xl); letter-spacing: -.028em; }

.section__lead {
    margin-top: var(--sp-5);
    font-size: var(--fs-md);
    line-height: 1.7;
    color: var(--text-muted);
    text-wrap: pretty;
}

.section__actions {
    display: flex;
    gap: var(--sp-3);
    margin-top: var(--sp-8);
    flex-wrap: wrap;
}

/*------------------------------------------------------------------------------
  4. Typography & prose
------------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    line-height: var(--lh-snug);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--slate-900);
    text-wrap: balance;
}

.prose { color: var(--text-muted); font-size: var(--fs-md); line-height: 1.75; }
.prose > * + * { margin-top: var(--sp-5); }
.prose h2 { margin-top: var(--sp-8); font-size: var(--fs-xl); color: var(--slate-900); }
.prose h3 { margin-top: var(--sp-6); font-size: var(--fs-lg); color: var(--slate-900); }
.prose ul, .prose ol { padding-left: var(--sp-5); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--sp-2); }
.prose li::marker { color: var(--brand); }
.prose strong { color: var(--slate-900); font-weight: 650; }
.prose a { font-weight: 500; }

.prose blockquote {
    padding: var(--sp-5) var(--sp-6);
    border-left: 3px solid var(--brand);
    background: var(--paper-soft);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
}

.prose code {
    padding: .15em .4em;
    font-family: var(--font-mono);
    font-size: .9em;
    background: var(--paper-mid);
    border-radius: var(--radius-sm);
}

.prose pre {
    padding: var(--sp-5);
    overflow-x: auto;
    background: var(--ink-900);
    color: var(--slate-300);
    border-radius: var(--radius);
}

.prose pre code { background: none; padding: 0; color: inherit; }

/* Wide tables scroll inside their own box rather than widening the page. */
.table-scroll { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td { padding: var(--sp-3); border-bottom: 1px solid var(--border); text-align: left; }
.prose th { background: var(--paper-soft); font-weight: 650; color: var(--slate-900); }

/*------------------------------------------------------------------------------
  5. Buttons, tags, icons
------------------------------------------------------------------------------*/
.btn {
    --btn-bg: var(--ink-900);
    --btn-fg: #fff;
    --btn-bd: transparent;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: .85rem 1.5rem;
    /* 44px minimum target, per WCAG 2.5.8. */
    min-height: 46px;
    font-size: var(--fs-sm);
    font-weight: 650;
    letter-spacing: .01em;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: 1.5px solid var(--btn-bd);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition),
                background-color var(--transition), color var(--transition),
                border-color var(--transition);
}

/* A restrained moving highlight gives every primary action a premium, tactile
   feel while retaining the existing button markup and colour contrast. */
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 22%, rgba(255, 255, 255, .22) 48%, transparent 73%);
    transform: translateX(-125%);
    transition: transform 520ms var(--ease);
    pointer-events: none;
}
.btn:hover::before { transform: translateX(125%); }

.btn:hover { color: var(--btn-fg); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
    --btn-bg: var(--brand);
    --btn-fg: #fff;
    box-shadow: 0 6px 20px rgba(216, 30, 52, .3);
}

.btn--primary:hover {
    --btn-bg: var(--brand-bright);
    box-shadow: 0 12px 30px rgba(216, 30, 52, .4);
}

.btn--outline {
    --btn-bg: transparent;
    --btn-fg: var(--slate-900);
    --btn-bd: var(--slate-300);
}

.btn--outline:hover { --btn-bg: var(--ink-900); --btn-fg: #fff; --btn-bd: var(--ink-900); }

.btn--light { --btn-bg: #fff; --btn-fg: var(--ink-900); }
.btn--light:hover { --btn-bg: var(--paper-mid); --btn-fg: var(--ink-900); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text-muted); --btn-bd: transparent; }
.btn--ghost:hover { --btn-bg: var(--paper-mid); --btn-fg: var(--slate-900); }

.btn--sm { padding: .55rem 1rem; min-height: 38px; font-size: var(--fs-xs); }
.btn--lg { padding: 1.05rem 2rem; min-height: 54px; font-size: var(--fs-base); }
.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
    opacity: .55; cursor: not-allowed; transform: none; box-shadow: none;
}

/*
 * On a dark ground the default outline button (dark text) fails contrast
 * badly. Rather than asking every template to remember a modifier, the dark
 * surfaces re-point the button's own custom properties.
 */
.hero .btn--outline,
.page-header .btn--outline,
.cta-panel .btn--outline,
.section--trust .btn--outline,
.section--process .btn--outline,
.section--technology .btn--outline,
.error-block .btn--outline {
    --btn-fg: #fff;
    --btn-bd: rgba(255, 255, 255, .3);
}

.hero .btn--outline:hover,
.page-header .btn--outline:hover,
.cta-panel .btn--outline:hover,
.section--trust .btn--outline:hover,
.section--process .btn--outline:hover,
.section--technology .btn--outline:hover,
.error-block .btn--outline:hover {
    --btn-bg: #fff; --btn-fg: var(--ink-900); --btn-bd: #fff;
}

.icon { display: inline-block; flex: none; vertical-align: middle; fill: none; }

/*
 * The <symbol> sprite is a real element in the document. Without this it
 * renders at the SVG default 300x150 and pushes the page down — and the CSP
 * (style-src 'self', no 'unsafe-inline') means a style attribute cannot be
 * used to collapse it.
 */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.tag {
    display: inline-block;
    padding: .28rem .65rem;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    /* --brand on --brand-tint is 4.37:1 at this size; --brand-deep clears AA. */
    color: var(--brand-deep);
    background: var(--brand-tint);
    border-radius: var(--radius-sm);
}

/*------------------------------------------------------------------------------
  6. Header & navigation
------------------------------------------------------------------------------*/
.topbar {
    background: var(--ink-950);
    color: var(--slate-400);
    font-size: var(--fs-xs);
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: 40px;
    flex-wrap: wrap;
}

.topbar__tagline { color: var(--slate-500); letter-spacing: .04em; }
.topbar__contact { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }

.topbar__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    /* WCAG 2.5.8: 24px minimum, comfortably clear of the text's own height. */
    min-height: 28px;
    padding-block: var(--sp-1);
    color: var(--slate-400);
    text-decoration: none;
    transition: color var(--transition);
}

.topbar__link:hover { color: #fff; }
.topbar__link--strong { color: #fff; font-weight: 600; }
.topbar__link .icon { color: var(--tech); }

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(8, 14, 26, .88);
    /* Progressive enhancement: the solid colour above is the fallback. */
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    transition: box-shadow var(--transition), background-color var(--transition);
}

.site-header::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(55, 194, 224, .75), rgba(216, 30, 52, .75), transparent);
    transition: opacity var(--transition);
}

.site-header.is-scrolled {
    background: rgba(5, 9, 15, .97);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
}
.site-header.is-scrolled::after { opacity: 1; }

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    min-height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    color: #fff;
    text-decoration: none;
    flex: none;
}

.brand__mark { color: var(--brand); display: grid; place-items: center; }
.brand__logo { width: auto; height: 40px; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-size: var(--fs-md); font-weight: 800; letter-spacing: -.02em; }
.brand__tagline { font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--slate-500); }

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    color: #fff;
    border-radius: var(--radius-sm);
}

.nav-toggle__bars { display: grid; gap: 5px; width: 22px; }
.nav-toggle__bars span {
    display: block; height: 2px; background: currentColor; border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.primary-nav__list { display: flex; align-items: center; gap: var(--sp-1); }
.primary-nav__item { position: relative; }
.primary-nav__group { display: flex; align-items: center; }

.primary-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: .7rem .9rem;
    min-height: 44px;
    font-size: var(--fs-sm);
    font-weight: 550;
    letter-spacing: .01em;
    color: var(--slate-300);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color var(--transition);
}

.primary-nav__link:hover { color: #fff; }
.primary-nav__link.is-active { color: #fff; font-weight: 650; }

/* An underline that grows from the centre on the active item. */
.primary-nav__link::after {
    content: "";
    position: absolute;
    left: .9rem; right: .9rem; bottom: .5rem;
    height: 2px;
    background: var(--brand);
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform var(--transition);
}

.primary-nav__link:hover::after { transform: scaleX(.55); }
.primary-nav__link.is-active::after { transform: scaleX(1); }

.primary-nav__disclosure {
    display: grid;
    place-items: center;
    width: 26px; height: 44px;
    color: var(--slate-400);
    transition: transform var(--transition), color var(--transition);
}

.primary-nav__disclosure:hover { color: #fff; }
.primary-nav__disclosure[aria-expanded="true"] { transform: rotate(180deg); color: #fff; }

.primary-nav__cta { margin-left: var(--sp-3); }

/* Drawer chrome — only ever visible in the mobile panel. */
.nav-scrim,
.primary-nav__head,
.primary-nav__foot { display: none; }


.submenu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 20;
    min-width: 260px;
    padding: var(--sp-2);
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);

    /* Hidden via opacity/visibility rather than display:none so the panel can
       animate, and so its links stay out of the tab order while closed. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.primary-nav__item:hover > .submenu,
.primary-nav__item:focus-within > .submenu,
.primary-nav__item.is-open > .submenu {
    opacity: 1; visibility: visible; transform: translateY(0);
}

.submenu__link {
    display: block;
    padding: .65rem .85rem;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--slate-700);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition), color var(--transition), padding-left var(--transition);
}

.submenu__link:hover { background: var(--paper-soft); color: var(--brand); padding-left: 1.1rem; }

/*------------------------------------------------------------------------------
  7. Hero
------------------------------------------------------------------------------*/
.hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3rem, 6vw, 5.5rem);
    background: var(--ink-950);
    color: #fff;
    isolation: isolate;
}

.hero__backdrop { position: absolute; inset: 0; z-index: -1; }

/* A custom 3D network render is deliberately kept as a backdrop. It enriches
   the hero whether an administrator has selected a hero photograph or not,
   and it never competes with the CMS-managed copy. */
.hero__backdrop {
    background-image:
        linear-gradient(90deg, rgba(5, 9, 15, .97) 0%, rgba(5, 9, 15, .82) 43%, rgba(5, 9, 15, .27) 100%),
        url("../img/tech-network-3d-hero.webp");
    background-repeat: no-repeat;
    background-position: center, 72% center;
    background-size: cover, auto 118%;
}

.hero__glow { position: absolute; border-radius: 50%; filter: blur(110px); }

.hero__glow--one {
    top: -20%; right: -8%;
    width: 620px; height: 620px;
    background: radial-gradient(circle, rgba(216, 30, 52, .5), transparent 68%);
}

.hero__glow--two {
    bottom: -35%; left: -12%;
    width: 680px; height: 680px;
    background: radial-gradient(circle, rgba(55, 194, 224, .26), transparent 70%);
}

.hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 35%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 35%, transparent 100%);
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    padding: .45rem 1rem .45rem .75rem;
    margin-bottom: var(--sp-6);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--slate-300);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--radius-pill);
}

.hero__eyebrow-dot {
    width: 7px; height: 7px;
    background: var(--brand-bright);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(242, 53, 76, .18);
}

.hero__title {
    font-size: var(--fs-4xl);
    line-height: 1.03;
    letter-spacing: -.035em;
    font-weight: 800;
    color: #fff;
}

.hero__lead {
    max-width: 52ch;
    margin-top: var(--sp-6);
    font-size: var(--fs-lg);
    line-height: 1.62;
    color: rgba(226, 232, 240, .82);
    text-wrap: pretty;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }

.hero__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: var(--sp-6);
    margin-top: var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.hero__stat-value {
    display: block;
    margin: 0;
    font-size: var(--fs-2xl);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    color: #fff;
}

.hero__stat-label {
    display: block;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--tech);
}

.hero__visual { position: relative; min-height: 320px; }

.hero__content { min-width: 0; }

/* One figure in the hero stat row. */
.hero__stat { min-width: 0; }


/* The photograph sits in a light frame, which reads as deliberate against the
   dark ground and keeps product shots on white backgrounds looking intentional. */
.hero__visual picture,
.hero__visual img {
    width: 100%;
    border-radius: var(--radius-lg);
}

.hero__visual img {
    object-fit: cover;
    aspect-ratio: 4 / 3;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .1);
}

.hero__visual::after {
    content: "";
    position: absolute;
    inset: auto -8% -14% -8%;
    height: 55%;
    z-index: -1;
    background: radial-gradient(ellipse at center, rgba(216, 30, 52, .4), transparent 70%);
    filter: blur(55px);
}

.hero__visual--abstract { display: grid; place-items: center; }

.hero__visual--abstract::before {
    content: "";
    position: absolute;
    inset: 12% 10%;
    border: 1px solid rgba(55, 194, 224, .22);
    border-radius: 50%;
    box-shadow: 0 0 80px rgba(55, 194, 224, .1), inset 0 0 65px rgba(216, 30, 52, .08);
    animation: tech-orbit 13s linear infinite;
}

.hero-orb {
    width: min(320px, 72%);
    aspect-ratio: 1;
    background: conic-gradient(from 210deg, rgba(216, 30, 52, .5), rgba(55, 194, 224, .4), rgba(216, 30, 52, .5));
    border-radius: 50%;
    filter: blur(3px);
    opacity: .55;
    animation: tech-float 7s ease-in-out infinite;
}

.hero-card {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    padding: .8rem 1.15rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-card .icon { color: var(--brand-bright); }
.hero-card--one   { top: 6%;  left: 0; }
.hero-card--two   { top: 45%; right: 0; }
.hero-card--three { bottom: 6%; left: 10%; }
.hero-card--one { animation: tech-float 6s ease-in-out -1.5s infinite; }
.hero-card--two { animation: tech-float 7s ease-in-out -3s infinite; }
.hero-card--three { animation: tech-float 6.5s ease-in-out -4s infinite; }

/*------------------------------------------------------------------------------
  8. Sections — trust, process, technology, catalogue, cta
------------------------------------------------------------------------------*/

/* Trust band ----------------------------------------------------------------- */
.stat-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: var(--ink-700);
    border: 1px solid var(--ink-700);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.stat-band__item {
    padding: var(--sp-7) var(--sp-5);
    text-align: center;
    background: var(--ink-850);
    transition: background-color var(--transition);
}

.stat-band__item:hover { background: var(--ink-800); }

.stat-band__value {
    display: block;
    margin: 0;
    font-size: var(--fs-3xl);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1;
    color: #fff;
}

.stat-band__label {
    display: block;
    margin-top: var(--sp-3);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--tech);
}

.partner-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-5);
    flex-wrap: wrap;
    margin-top: var(--sp-8);
}

.partner-strip__label {
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--slate-400);
}

.partner-strip__list { display: flex; gap: var(--sp-6); flex-wrap: wrap; align-items: center; }

.partner-strip__list a, .partner-strip__list span {
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
    text-decoration: none;
}

.partner-strip__list a:hover { color: var(--tech); }

/* Amateta is our POS Suite partner, so its mark is given a purposeful home in
   the trust band instead of being reduced to another line of partner text. */
.partner-strip__item--amateta { width: min(100%, 470px); }

.amateta-partner-link {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 1.5rem);
    padding: .8rem 1.1rem .8rem .85rem;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(115deg, rgba(255, 255, 255, .1), rgba(55, 194, 224, .07));
    border: 1px solid rgba(55, 194, 224, .38);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .1);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

.amateta-partner-link:hover {
    color: #fff;
    transform: translateY(-3px);
    background: linear-gradient(115deg, rgba(255, 255, 255, .15), rgba(55, 194, 224, .14));
    border-color: var(--tech);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .3), 0 0 30px rgba(55, 194, 224, .13);
}

.amateta-partner-link__logo {
    width: clamp(150px, 22vw, 215px);
    height: 94px;
    padding: .25rem;
    object-fit: contain;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .25);
}

.amateta-partner-link__copy { display: grid; gap: .3rem; min-width: 0; }
.amateta-partner-link__copy strong { font-size: var(--fs-lg); letter-spacing: -.02em; color: #fff; }
.amateta-partner-link__copy span { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--tech); }
.amateta-partner-link__copy .icon { transition: transform var(--transition); }
.amateta-partner-link:hover .amateta-partner-link__copy .icon { transform: translateX(4px); }

/* Process --------------------------------------------------------------------- */
.process-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-7) var(--sp-6);
}

.process-list__item { display: flex; gap: var(--sp-4); }
.process-list__marker { flex: none; }
.process-list__body { min-width: 0; }


.process-list__number {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    font-size: var(--fs-sm);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--tech);
    background: var(--ink-850);
    border: 1px solid var(--ink-700);
    border-radius: var(--radius);
    transition: all var(--transition);
}

.process-list__item:hover .process-list__number {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}

.process-list__title { font-size: var(--fs-md); color: #fff; }
.process-list__text { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--slate-400); line-height: 1.7; }

/* Technology ------------------------------------------------------------------- */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--ink-700);
    border: 1px solid var(--ink-700);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.tech-grid__item {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-6);
    background: var(--ink-850);
    transition: background-color var(--transition);
}

.tech-grid__item:hover { background: var(--ink-800); }
.tech-grid__name { font-size: var(--fs-md); font-weight: 700; letter-spacing: -.02em; color: #fff; }
.tech-grid__category { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .13em; color: var(--tech); }
.tech-grid__desc { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--slate-400); line-height: 1.65; }

/* Catalogue chips ---------------------------------------------------------------- */

.chip-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3);
}

.category-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    height: 100%;
    padding: var(--sp-5);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    background: var(--paper);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}

.category-chip::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--brand);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--transition);
}

.category-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: inherit; }
.category-chip:hover::after { transform: scaleY(1); }

.category-chip__icon {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    flex: none;
    color: var(--brand);
    background: var(--brand-tint);
    border-radius: var(--radius-sm);
}

.category-chip__body { display: flex; flex-direction: column; min-width: 0; }
.category-chip__name { font-weight: 650; color: var(--slate-900); letter-spacing: -.01em; }
.category-chip__count { font-size: var(--fs-xs); color: var(--muted-on-paper); }
.chip-grid__item { display: flex; }


.featured-strip { margin-top: var(--sp-10); }

.featured-strip__title {
    margin-bottom: var(--sp-6);
    font-size: var(--fs-lg);
    letter-spacing: -.02em;
    color: var(--slate-900);
}

/* CTA panel ----------------------------------------------------------------------- */
.cta-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-7);
    flex-wrap: wrap;
    padding: clamp(2.5rem, 6vw, 4.5rem);
    background: var(--ink-950);
    border-radius: var(--radius-xl);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

.cta-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .34;
    background: linear-gradient(90deg, rgba(5, 9, 15, .92) 2%, rgba(5, 9, 15, .3) 100%), url("../img/tech-network-3d-hero.webp") 88% center / auto 175% no-repeat;
}

.cta-panel__glow {
    position: absolute;
    top: -70%; right: -12%;
    width: 540px; height: 540px;
    z-index: -1;
    background: radial-gradient(circle, rgba(216, 30, 52, .55), transparent 68%);
    filter: blur(70px);
}

.cta-panel__content { flex: 1 1 400px; }

.cta-panel__title {
    font-size: var(--fs-2xl);
    letter-spacing: -.035em;
    line-height: 1.1;
    color: #fff;
}

.cta-panel__text { margin-top: var(--sp-4); font-size: var(--fs-md); color: rgba(226, 232, 240, .78); }
.cta-panel__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/*------------------------------------------------------------------------------
  9. Cards & content blocks
------------------------------------------------------------------------------*/
/*
 * One grid for the whole site: three across on desktop, two on tablet, one on
 * a phone. Fixed column counts rather than auto-fit, because auto-fit gave
 * each section a different column count depending on how wide its own cards
 * happened to be — which is what made the pages look inconsistent.
 *
 * minmax(0, 1fr) rather than a bare 1fr: a 1fr track refuses to shrink below
 * its content, so one long unbroken product name would widen the whole row.
 */
.card-grid {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }


.card {
    position: relative;
    overflow: hidden;
    background: var(--paper);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(13, 22, 38, .055);
    transition: transform var(--transition), box-shadow var(--transition);
}

/* An accent edge that reveals on hover, in place of a permanent border. */
.card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 2;
    background: linear-gradient(90deg, var(--brand), var(--tech));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 320ms var(--ease);
}

.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.card:hover::before { transform: scaleX(1); }

.section--alt .card,
.section--catalogue .card { box-shadow: var(--shadow); }

.card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--sp-6);
    color: inherit;
    text-decoration: none;
}

.card--project .card__link,
.card--product .card__link,
.card--service .card__link { padding: 0; }

.card__body { padding: var(--sp-5) var(--sp-6) var(--sp-6); }

.card__icon {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    margin-bottom: var(--sp-5);
    color: var(--brand);
    background: var(--brand-tint);
    border-radius: var(--radius);
    transition: all var(--transition);
}

.card__icon--ghost { color: var(--ink-700); background: var(--paper-mid); }
.card--service:hover .card__icon { color: #fff; background: var(--brand); }
.card--value { padding: var(--sp-6); }

.card__title { font-size: var(--fs-lg); letter-spacing: -.025em; color: var(--slate-900); }
.card__title--sm { font-size: var(--fs-md); letter-spacing: -.02em; }
.card__text { margin-top: var(--sp-3); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.7; }
.card__text--sm { font-size: var(--fs-sm); }
.card__meta { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--muted-on-paper); }

.card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: auto;
    padding-top: var(--sp-6);
    flex-wrap: wrap;
}

.card__price { font-size: var(--fs-sm); font-weight: 750; letter-spacing: -.01em; color: var(--slate-900); }
.card__note  { font-size: var(--fs-xs); color: var(--muted-on-paper); }

.card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 26px;
    font-size: var(--fs-sm);
    font-weight: 650;
    color: var(--brand);
}

.card__cta .icon { transition: transform var(--transition); }
.card:hover .card__cta .icon { transform: translateX(5px); }

.card__media { display: block; position: relative; overflow: hidden; background: #fff; }

.card__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    /* Service and portfolio photographs must be fully visible: a product or
       terminal should never lose an edge to an arbitrary card crop. */
    object-fit: contain;
    transition: transform 650ms var(--ease), filter 650ms var(--ease);
}

.card__media--wide img { aspect-ratio: 16 / 10; }

/* The service icon, kept as a small mark over the photograph so the card is
   still scannable by category at a glance. */
.card__badge {
    position: absolute;
    left: 12px; bottom: 12px;
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    color: #fff;
    background: var(--brand);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(5, 9, 15, .3);
}

/* A soft scrim so the badge holds against a light photograph. */
.card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(175deg, transparent 55%, rgba(5, 9, 15, .3));
    pointer-events: none;
}

.card:hover .card__media img { filter: saturate(1.08) contrast(1.03); }

.card__media-fallback {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    color: var(--slate-400);
    background: linear-gradient(135deg, var(--paper-mid), var(--paper-line));
}

.card__logo { height: 40px; width: auto; object-fit: contain; margin-bottom: var(--sp-5); }

/*
 * Partner cards.
 *
 * The grid was hard-coded to two columns, so a single partner sat in the left
 * half of the row with the right half simply empty — 658px of section holding
 * one 364px tile. And .card__logo is sized for a wordmark (40px tall, width
 * auto), which turns a square 426x426 logo into a 40x40 stamp filling 11% of
 * the card. Together that is what made the section read as unfinished.
 *
 * The grid now fits itself to however many partners exist, and a lone partner
 * is presented deliberately: a framed logo panel beside the copy, running the
 * full width of the container, which reads as a feature rather than a gap.
 */
.section--partners .card-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    align-items: stretch;
}

.card--partner { padding: var(--sp-7) var(--sp-6); text-align: center; }
.card--partner .card__body { display: grid; justify-items: center; gap: var(--sp-4); }

/* The logo sits in a tinted, bordered plate, so a square mark and a wide
   wordmark both land in the same shape and the row stays even. */
.card--partner .card__body > picture,
.card--partner .card__body > img {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 190px;
    aspect-ratio: 16 / 9;
    padding: var(--sp-4);
    /* White, not the soft grey: most supplied logos are PNGs with their own
       white ground, and a tinted plate turns that into a visible box inside a
       box. The border does the framing instead. */
    background: var(--paper);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
}

.card--partner .card__logo {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 76px;
    margin: 0;
    object-fit: contain;
}

.card--partner .card__title { font-size: var(--fs-xl); letter-spacing: -.02em; }
.card--partner .card__text  { margin: 0; max-width: 46ch; }
.card--partner .card__cta   { margin-top: var(--sp-1); }

/*
 * One partner: a full-width panel, logo plate left, copy right.
 * :only-child keeps this in CSS — the template needs no change, and adding a
 * second partner in the admin returns it to a normal grid automatically.
 */
.section--partners .card--partner:only-child {
    /*
     * Capped and centred rather than stretched across the full 1144px
     * container: one partner does not carry that much width, and a panel that
     * ends where its content ends reads as considered instead of half-empty.
     */
    max-width: 880px;
    margin-inline: auto;
    padding: clamp(var(--sp-6), 4vw, var(--sp-8));
    text-align: left;
}

.section--partners .card--partner:only-child .card__body {
    display: grid;
    grid-template-columns: minmax(190px, 240px) 1fr;
    /*
     * Three explicit rows so the logo plate can span the full height with
     * grid-row: 1 / -1 — with only implicit rows, -1 resolves to line 2 and
     * the copy wraps back underneath the plate instead of sitting beside it.
     * The card__body children are the plate plus at most three text elements
     * (name, description, link), and an absent one simply leaves its row at
     * zero height.
     */
    grid-template-rows: auto auto auto;
    align-content: center;
    justify-items: start;
    column-gap: clamp(var(--sp-5), 4vw, var(--sp-8));
    row-gap: var(--sp-3);
}

.section--partners .card--partner:only-child .card__body > picture {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
}

.section--partners .card--partner:only-child .card__body > :not(picture) {
    grid-column: 2;
}

.section--partners .card--partner:only-child .card__body > picture {
    width: 100%;
    max-width: none;
    aspect-ratio: 4 / 3;
}

.section--partners .card--partner:only-child .card__logo { max-height: 120px; }
.section--partners .card--partner:only-child .card__title { font-size: var(--fs-2xl); }

/*
 * A phone has nowhere to put the two-column panel, so it stacks. The explicit
 * placement above has to be undone as well as the columns: leaving the copy
 * pinned to `grid-column: 2` on a one-column grid invents a second column and
 * collapses the logo plate to nothing.
 */
@media (max-width: 720px) {
    .section--partners .card--partner:only-child { text-align: center; }

    .section--partners .card--partner:only-child .card__body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        /* stretch, not center: centring sizes each item to its content, which
           squeezed the description into a 220px column inside a 350px card.
           text-align does the centring instead. */
        justify-items: stretch;
        row-gap: var(--sp-4);
    }

    .section--partners .card--partner:only-child .card__text { max-width: none; }

    .section--partners .card--partner:only-child .card__body > picture {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        max-width: 220px;
        margin-inline: auto;
        aspect-ratio: 16 / 9;
    }

    .section--partners .card--partner:only-child .card__body > :not(picture) {
        grid-column: 1;
    }

    .section--partners .card--partner:only-child .card__logo { max-height: 84px; }
}

/* Card head groups a title with a tag or price on one line. */
.card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
}


/* About ------------------------------------------------------------------------ */
.about__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
}

.about__content .btn { margin-top: var(--sp-7); }

.about__media picture, .about__media img {
    width: 100%;
    border-radius: var(--radius-lg);
    object-fit: cover;
}

.about__media img { box-shadow: var(--shadow-lg); }

/* Testimonials ------------------------------------------------------------------ */

.quote-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: var(--sp-7);
    background: var(--paper);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

/* A large decorative quote mark behind the text. */
.quote-card::before {
    content: "\201C";
    position: absolute;
    top: -1.4rem; right: 1rem;
    font-size: 7rem;
    line-height: 1;
    font-weight: 800;
    color: var(--brand);
    opacity: .09;
    pointer-events: none;
}

.quote-card__rating { display: flex; gap: 3px; color: #e0a400; margin-bottom: var(--sp-4); }
.quote-card__rating .icon { fill: currentColor; }

.quote-card__quote { flex: 1; }
.quote-card__quote p { color: var(--slate-700); font-size: var(--fs-md); line-height: 1.75; }

.quote-card__author {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
}

.quote-card__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.quote-card__name { display: block; font-weight: 700; color: var(--slate-900); font-size: var(--fs-sm); }
.quote-card__role { display: block; font-size: var(--fs-xs); color: var(--muted-on-paper); }
.quote-card--feature { margin-top: var(--sp-8); }

/* FAQ accordion ------------------------------------------------------------------ */

.accordion { display: grid; gap: var(--sp-2); }

.accordion__item {
    background: var(--paper);
    /* A hairline so the item still reads when the FAQ sits on white. */
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}

.accordion__item[open] { box-shadow: var(--shadow-md); }

.accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-6);
    min-height: 60px;
    font-size: var(--fs-md);
    font-weight: 650;
    letter-spacing: -.015em;
    color: var(--slate-900);
    cursor: pointer;
    list-style: none;
}

/* Hide the native disclosure triangle in favour of the chevron icon. */
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary::marker { content: ""; }
.accordion__summary:hover { color: var(--brand); }

.accordion__chevron { flex: none; color: var(--slate-400); transition: transform var(--transition), color var(--transition); }
.accordion__item[open] .accordion__chevron { transform: rotate(180deg); color: var(--brand); }
.accordion__panel { padding: 0 var(--sp-6) var(--sp-6); font-size: var(--fs-sm); }

/*------------------------------------------------------------------------------
  10. Interior pages
------------------------------------------------------------------------------*/
.page-header {
    position: relative;
    padding-block: clamp(2.75rem, 5vw, 4.25rem);
    background: var(--ink-950);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

.page-header__backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 50% 90% at 85% 0%,  rgba(216, 30, 52, .38), transparent 66%),
        radial-gradient(ellipse 45% 80% at 5% 100%, rgba(55, 194, 224, .2), transparent 70%),
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 100% 72px,
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 72px 100%,
        linear-gradient(90deg, rgba(5, 9, 15, .9), rgba(5, 9, 15, .42)),
        url("../img/tech-network-3d-hero.webp");
    background-repeat: no-repeat;
    background-position: center, center, center, center, center, 78% 48%;
    background-size: auto, auto, 100% 72px, 72px 100%, cover, auto 190%;
    mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, #000 40%, transparent 100%);
}

.page-header__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tech);
}

.page-header__eyebrow::before {
    content: "";
    width: 28px; height: 2px;
    background: currentColor;
    flex: none;
}

.page-header__title {
    font-size: var(--fs-3xl);
    line-height: var(--lh-tight);
    letter-spacing: -.04em;
    color: #fff;
}

.page-header__subtitle {
    max-width: 60ch;
    margin-top: var(--sp-5);
    font-size: var(--fs-md);
    line-height: 1.7;
    color: rgba(226, 232, 240, .78);
    text-wrap: pretty;
}

/* Breadcrumbs -------------------------------------------------------------------- */
.breadcrumbs { margin-bottom: var(--sp-6); font-size: var(--fs-xs); }
.breadcrumbs ol { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.breadcrumbs li { display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumbs a {
    display: inline-block;
    /* A breadcrumb is a navigation control, so it gets a real target rather
       than the height of its own text (WCAG 2.5.8). */
    min-height: 26px;
    padding-block: 3px;
    color: var(--slate-400);
    text-decoration: none;
}
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs [aria-current] { color: #fff; font-weight: 600; }
.breadcrumbs__sep { color: var(--ink-600); transform: rotate(-90deg); }

/* Two-column detail layout --------------------------------------------------------- */
.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 350px);
    align-items: start;
    gap: clamp(2.5rem, 5vw, 4rem);
}

.detail-layout__main  { min-width: 0; }
.detail-layout__aside { min-width: 0; }


.detail-hero {
    width: 100%;
    margin-bottom: var(--sp-7);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    object-fit: cover;
}

.detail-subtitle {
    margin-top: var(--sp-9);
    margin-bottom: var(--sp-5);
    font-size: var(--fs-xl);
    letter-spacing: -.03em;
    color: var(--slate-900);
}

.detail-facts { display: grid; gap: var(--sp-3); }
.detail-facts > div { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); }
.detail-facts dt { color: var(--muted-on-paper); }
.detail-facts dd { margin: 0; font-weight: 600; color: var(--slate-900); text-align: right; }

/* Sidebar card ---------------------------------------------------------------------- */
.sidebar-card {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-5));
    display: grid;
    gap: var(--sp-5);
    padding: var(--sp-7);
    background: var(--paper);
    border: 1px solid rgba(55, 194, 224, .16);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.sidebar-card::before {
    content: "";
    width: 36px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand), var(--tech));
}

.sidebar-card__title { font-size: var(--fs-lg); letter-spacing: -.025em; color: var(--slate-900); }
.sidebar-card__subtitle { font-size: var(--fs-sm); font-weight: 700; color: var(--slate-900); }

.sidebar-card__price {
    font-size: var(--fs-2xl);
    font-weight: 800;
    letter-spacing: -.04em;
    color: var(--brand);
    line-height: 1.05;
}

.sidebar-card__price--quote { font-size: var(--fs-lg); color: var(--slate-900); }

.sidebar-card__price-label {
    display: block;
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--muted-on-paper);
}

.sidebar-card__note { font-size: var(--fs-xs); color: var(--muted-on-paper); }
.sidebar-card__meta { font-size: var(--fs-xs); color: var(--muted-on-paper); }

.stock-pill {
    justify-self: start;
    padding: .32rem .8rem;
    font-size: var(--fs-xs);
    font-weight: 700;
    border-radius: var(--radius-sm);
}

.stock-pill--ok   { color: var(--ok);    background: #e7f6f1; }
.stock-pill--warn { color: var(--warn);  background: #fdf3e3; }
.stock-pill--off  { color: var(--slate-600); background: var(--paper-mid); }

/* Service list ------------------------------------------------------------------------ */
.service-list { display: grid; gap: var(--sp-4); }

.service-row {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-6);
    padding: var(--sp-5);
    overflow: hidden;
    background: var(--paper);
    border: 1px solid rgba(13, 22, 38, .055);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}

.service-row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--brand), var(--tech));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 320ms var(--ease);
}

.service-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); background: linear-gradient(105deg, #fff, #fbfdff); }
.service-row:hover::before { transform: scaleY(1); }

.service-row__media {
    position: relative;
    display: block;
    width: 200px;
    flex: none;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--paper-mid);
}

.service-row__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; transition: transform 650ms var(--ease), filter 650ms var(--ease); }
.service-row:hover .service-row__media img { filter: saturate(1.08) contrast(1.03); }

.service-row__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(170deg, transparent 50%, rgba(5, 9, 15, .4));
    pointer-events: none;
}

.service-row__badge {
    position: absolute;
    left: 10px; bottom: 10px;
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    color: #fff;
    background: var(--brand);
    border-radius: var(--radius-sm);
}

.service-row__icon {
    display: grid;
    place-items: center;
    width: 64px; height: 64px;
    color: var(--brand);
    background: var(--brand-tint);
    border-radius: var(--radius);
}

.service-row__title { font-size: var(--fs-lg); letter-spacing: -.025em; }
.service-row__body { min-width: 0; }

.service-row__title a { color: var(--slate-900); text-decoration: none; }
.service-row__title a:hover { color: var(--brand); }
.service-row__text { margin-top: var(--sp-2); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.7; }
.service-row__meta { display: flex; gap: var(--sp-4); align-items: baseline; margin-top: var(--sp-3); flex-wrap: wrap; }
.service-row__price { font-weight: 750; color: var(--slate-900); font-size: var(--fs-sm); }
.service-row__note  { font-size: var(--fs-xs); color: var(--muted-on-paper); }

.feature-list { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
.feature-list__item { display: flex; gap: var(--sp-4); }

.feature-list__tick {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    flex: none;
    color: #fff;
    background: var(--brand);
    border-radius: 50%;
}

.feature-list__label { display: block; color: var(--slate-900); }
.feature-list__text  { display: block; margin-top: 3px; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.65; }

/* Catalogue --------------------------------------------------------------------------- */
.catalogue-jump {
    position: sticky;
    top: calc(var(--header-h) + 10px);
    z-index: 20;
    margin-bottom: var(--sp-9);
    padding: var(--sp-2);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.catalogue-jump ul { display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: thin; }

.catalogue-jump a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: .55rem .9rem;
    font-size: var(--fs-xs);
    font-weight: 650;
    white-space: nowrap;
    color: var(--slate-700);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition), color var(--transition);
}

.catalogue-jump a:hover { background: var(--brand-tint); color: var(--brand); }

.catalogue-group { margin-bottom: var(--sp-10); scroll-margin-top: calc(var(--header-h) + 90px); }

.catalogue-group__head {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding-bottom: var(--sp-5);
    margin-bottom: var(--sp-6);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.catalogue-group__icon {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    flex: none;
    color: var(--brand);
    background: var(--brand-tint);
    border-radius: var(--radius-sm);
}

.catalogue-group__title { font-size: var(--fs-xl); letter-spacing: -.03em; }
.catalogue-group__title a { color: var(--slate-900); text-decoration: none; }
.catalogue-group__title a:hover { color: var(--brand); }
.catalogue-group__desc { margin-top: 3px; font-size: var(--fs-sm); color: var(--text-muted); }

.catalogue-group__count {
    margin-left: auto;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-on-paper);
}

.product-tiles {
    display: grid;
    /*
     * Self-sizing rather than a fixed three columns: the catalogue runs to 92
     * entries, which was very sparse at three across on a wide screen and
     * needed a media query for every step down. auto-fill gives roughly six
     * columns at the container width and two on a phone, with no breakpoint
     * involved. The phone case is pinned to exactly two in section 14.
     */
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--sp-4);
}

/*
 * A catalogue entry is a proper picture box, not a row with a stamp-sized
 * thumbnail: the image leads at a fixed 4:3 so every tile in a row lines up
 * whatever shape the source photograph is.
 */
.product-tile { display: flex; }

.product-tile a {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    color: var(--slate-700);
    text-decoration: none;
    background: var(--paper);
    border: 1px solid rgba(13, 22, 38, .055);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), color var(--transition);
}

.product-tile a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--brand); }

.product-tile__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #fff;
}

/*
 * The picture partial wraps every image in <picture>, and the base reset gives
 * that height:auto. Without stretching the wrapper too, the img's height:100%
 * has nothing to resolve against and collapses back to the source's own
 * aspect ratio — which turned the wide banner-shaped product shots into a
 * thin strip floating in the box.
 */
.product-tile__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.product-tile__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    background: #fff;
    transition: transform 500ms var(--ease);
}

.product-tile a:hover .product-tile__media img { transform: scale(1.04); }

/*
 * Not every product has its own photograph. Rather than a stretched generic
 * icon, an entry without one gets a tinted panel carrying its category icon,
 * which reads as deliberate at this size.
 */
.product-tile__fallback {
    display: grid;
    place-items: center;
    width: 100%; height: 100%;
    color: var(--brand);
    /* A faint version of the hero's grid, so a product still awaiting its
       photograph reads as part of the design rather than a missing image. */
    background:
        linear-gradient(rgba(13, 22, 38, .05) 1px, transparent 1px) 0 0 / 100% 20px,
        linear-gradient(90deg, rgba(13, 22, 38, .05) 1px, transparent 1px) 0 0 / 20px 100%,
        radial-gradient(circle at 50% 45%, rgba(216, 30, 52, .13), transparent 62%),
        linear-gradient(140deg, var(--paper-soft), var(--paper-mid));
}

.product-tile__fallback .icon {
    width: 38px; height: 38px;
    opacity: .85;
}

.product-tile__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-4);
    min-width: 0;
    border-top: 1px solid var(--paper-line);
}

.product-tile__name { font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
.product-tile.is-featured .product-tile__name { font-weight: 750; }

.product-tile__badge {
    align-self: flex-start;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand);
}

.spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.spec-table th, .spec-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); text-align: left; }
.spec-table th { width: 38%; font-weight: 650; color: var(--slate-900); background: var(--paper-soft); }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3);
    margin-top: var(--sp-6);
}

.gallery-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.gallery-grid__caption { display: block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--muted-on-paper); }

/* Filter bar ---------------------------------------------------------------------------- */
.filter-bar { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-8); }

.filter-bar__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: .6rem 1.1rem;
    min-height: 42px;
    font-size: var(--fs-sm);
    font-weight: 620;
    color: var(--slate-700);
    text-decoration: none;
    background: var(--paper);
    border: 1px solid rgba(13, 22, 38, .055);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), color var(--transition), background-color var(--transition);
}

.filter-bar__chip:hover { color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow); }
.filter-bar__chip.is-active { background: var(--ink-900); color: #fff; }
.filter-bar__count { font-size: var(--fs-xs); opacity: .65; }

.chip-list { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.chip-list__item {
    padding: .32rem .75rem;
    font-size: var(--fs-xs);
    font-weight: 620;
    color: var(--slate-700);
    background: var(--paper-mid);
    border-radius: var(--radius-sm);
}

/* Contact -------------------------------------------------------------------------------- */
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(270px, 1fr);
    align-items: start;
    gap: clamp(2.5rem, 5vw, 4rem);
}

.contact-layout__form  { min-width: 0; }
.contact-layout__aside { min-width: 0; }

.contact-layout__form {
    padding: clamp(1.35rem, 3vw, 2rem);
    background: linear-gradient(145deg, #fff, #fbfcff);
    border: 1px solid rgba(55, 194, 224, .14);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.contact-layout__aside { padding-top: var(--sp-3); }

.contact-intro { margin-bottom: var(--sp-7); }
.form-actions { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.form-actions__note { font-size: var(--fs-xs); color: var(--muted-on-paper); }

.contact-details { display: grid; gap: var(--sp-5); }
.contact-details li { display: flex; gap: var(--sp-4); align-items: flex-start; }

.contact-details__icon {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    flex: none;
    color: var(--brand);
    background: var(--brand-tint);
    border-radius: var(--radius-sm);
}

.contact-details__label {
    display: block;
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--muted-on-paper);
}

.contact-details a { color: var(--slate-900); text-decoration: none; font-weight: 620; }
.contact-details a:hover { color: var(--brand); }

/* Search ----------------------------------------------------------------------------------- */
.search-form { margin-bottom: var(--sp-8); }
.search-form__control { position: relative; display: flex; gap: var(--sp-2); }
.search-form__control .field__control { padding-left: 2.9rem; }

.search-form__icon {
    position: absolute;
    left: 1.05rem; top: 50%;
    transform: translateY(-50%);
    color: var(--slate-400);
    pointer-events: none;
}

.search-summary { margin-bottom: var(--sp-6); color: var(--text-muted); }
.search-group { margin-bottom: var(--sp-8); }
.search-group__title { font-size: var(--fs-lg); margin-bottom: var(--sp-4); letter-spacing: -.025em; color: var(--slate-900); }
.search-results { display: grid; gap: var(--sp-2); }

.search-results__item a {
    display: block;
    padding: var(--sp-5);
    text-decoration: none;
    background: var(--paper);
    border: 1px solid rgba(13, 22, 38, .055);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}

.search-results__item a:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }
.search-results__title { display: block; font-weight: 650; color: var(--slate-900); }
.search-results__text  { display: block; margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--text-muted); }

.faq-group { margin-bottom: var(--sp-9); }
.faq-group__title { margin-bottom: var(--sp-5); font-size: var(--fs-xl); letter-spacing: -.03em; color: var(--slate-900); }

.empty-state {
    padding: var(--sp-9);
    text-align: center;
    color: var(--text-muted);
    background: var(--paper-soft);
    border: 1px dashed var(--paper-line);
    border-radius: var(--radius-lg);
}

.empty-state--sm { padding: var(--sp-5); font-size: var(--fs-sm); }

.article-meta { margin-bottom: var(--sp-6); font-size: var(--fs-sm); color: var(--muted-on-paper); }
.article-tags { margin-top: var(--sp-8); }

/*------------------------------------------------------------------------------
  11. Forms
------------------------------------------------------------------------------*/
.form { display: grid; gap: var(--sp-5); }

.form-row {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label { font-size: var(--fs-sm); font-weight: 650; color: var(--slate-900); }
.field__required { color: var(--brand); }
.field__hint { font-size: var(--fs-xs); color: var(--muted-on-paper); }

.field__control {
    width: 100%;
    padding: .85rem 1.05rem;
    min-height: 50px;
    font-size: var(--fs-base);
    color: var(--text);
    background: linear-gradient(180deg, #fff, #fbfcfe);
    border: 1.5px solid var(--paper-line);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.field__control:hover { border-color: var(--slate-300); }
.field__control:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(216, 30, 52, .12);
}

.field__control::placeholder { color: var(--slate-400); }
textarea.field__control { min-height: 160px; resize: vertical; line-height: 1.7; }

select.field__control {
    appearance: none;
    padding-right: 2.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a95' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.05rem center;
    background-size: 16px;
}

/* Invalid fields are marked by colour AND an icon plus text, never colour
   alone (WCAG 1.4.1). */
.field--invalid .field__control { border-color: var(--error); }
.field--invalid .field__control:focus { box-shadow: 0 0 0 4px rgba(194, 25, 44, .12); }

.field__error {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 650;
    color: var(--error);
}

.field__error::before {
    content: "!";
    display: grid;
    place-items: center;
    width: 16px; height: 16px;
    font-size: var(--fs-label);
    color: #fff;
    background: var(--error);
    border-radius: 50%;
    flex: none;
}

/* Honeypot: hidden from people, reachable by naive bots. Kept out of the
   accessibility tree so screen readers never announce it. */
.field--honeypot {
    position: absolute !important;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--fs-sm);
    border-radius: var(--radius);
    border: 1px solid transparent;
}

.alert--success { color: #0a5c47; background: #e8f7f1; border-color: #b6e5d5; }
.alert--error   { color: #8f1220; background: #fdecee; border-color: #f7c4ca; }
.alert--warning { color: #8a4b04; background: #fdf4e5; border-color: #f5d9a8; }
.alert--info    { color: #14507d; background: #e9f4fb; border-color: #b9dcf1; }

/*------------------------------------------------------------------------------
  12. Footer
------------------------------------------------------------------------------*/
.site-footer {
    position: relative;
    padding-top: var(--sp-10);
    background: var(--ink-950);
    color: var(--slate-400);
    font-size: var(--fs-sm);
    overflow: hidden;
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--brand), var(--tech), transparent);
}

.site-footer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .14;
    pointer-events: none;
    background: radial-gradient(ellipse at 88% 18%, rgba(55, 194, 224, .48), transparent 26%), url("../img/tech-network-3d-hero.webp") 108% 33% / auto 115% no-repeat;
}

.site-footer > .container { position: relative; z-index: 1; }

.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.5fr) repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-8);
    padding-bottom: var(--sp-9);
}

.site-footer__name { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.03em; color: #fff; }
.site-footer__brand { min-width: 0; }
.site-footer__col { min-width: 0; }

.site-footer__desc { margin-top: var(--sp-4); max-width: 38ch; color: var(--slate-500); line-height: 1.7; }

.site-footer__heading {
    margin-bottom: var(--sp-5);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
}

.site-footer__links { display: grid; gap: var(--sp-2); }

.site-footer__links a {
    display: inline-block;
    /* Comfortable tap target without visually spacing the list out. */
    padding-block: 4px;
    color: var(--slate-500);
    text-decoration: none;
    transition: color var(--transition), transform var(--transition);
}

.site-footer__links a:hover { color: #fff; transform: translateX(3px); }

.site-footer__contact { display: grid; gap: var(--sp-4); }
.site-footer__contact li { display: flex; align-items: flex-start; gap: var(--sp-3); }
.site-footer__contact .icon { margin-top: 4px; color: var(--tech); flex: none; }
.site-footer__contact a {
    display: inline-block;
    /* Phone and email in the footer are tap targets, not running text. */
    min-height: 26px;
    padding-block: 3px;
    color: var(--slate-400);
    text-decoration: none;
}
.site-footer__contact a:hover { color: #fff; }

.social-list { display: flex; gap: var(--sp-2); margin-top: var(--sp-6); }

.social-list__link {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    color: var(--slate-400);
    background: rgba(255, 255, 255, .05);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.social-list__link:hover { background: var(--brand); color: #fff; transform: translateY(-3px); }

.support-badge {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
    padding: var(--sp-4) var(--sp-5);
    background: rgba(216, 30, 52, .1);
    border: 1px solid rgba(216, 30, 52, .28);
    border-radius: var(--radius);
}

.support-badge__pulse {
    width: 10px; height: 10px;
    flex: none;
    background: var(--brand-bright);
    border-radius: 50%;
    animation: pulse 2.4s infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(242, 53, 76, .6); }
    50%      { box-shadow: 0 0 0 9px rgba(242, 53, 76, 0); }
}

.support-badge__label {
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: #fff;
}

.support-badge__number {
    display: inline-block;
    min-height: 26px;
    padding-block: 2px;
    font-size: var(--fs-md);
    font-weight: 750;
    letter-spacing: -.02em;
    color: #fff;
    text-decoration: none;
}

.support-badge--light { background: var(--brand-tint); border-color: rgba(216, 30, 52, .22); }
.support-badge--light .support-badge__label  { color: var(--brand-deep); }
.support-badge--light .support-badge__number { color: var(--slate-900); }


/* Legal links and the staff entrance share the right-hand end of the bar. */
.site-footer__bar-end {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    flex-wrap: wrap;
}

/*
 * Staff link to the CMS. Quiet on purpose — outlined, muted, and only picking
 * up the brand on hover. It is a door for the owner, not a call to action for
 * a customer, so it should read as furniture until you are looking for it.
 */
.footer-admin-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: .4rem .85rem;
    font-size: var(--fs-label);
    font-weight: 650;
    letter-spacing: .04em;
    color: var(--slate-400);
    text-decoration: none;
    white-space: nowrap;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-pill);
    transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}

.footer-admin-link:hover,
.footer-admin-link:focus-visible {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}

.footer-admin-link .icon { flex: none; opacity: .9; }

@media (pointer: coarse) {
    .footer-admin-link { min-height: 44px; padding-inline: var(--sp-4); }
}

.site-footer__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    padding-block: var(--sp-6);
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: var(--fs-xs);
    color: var(--slate-500);
}

.site-footer__legal ul { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.site-footer__legal a { color: var(--slate-500); text-decoration: none; }
.site-footer__legal a:hover { color: #fff; }
.site-footer__copy { margin: 0; }


/*------------------------------------------------------------------------------
  13. Utilities, error & maintenance
------------------------------------------------------------------------------*/
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -60px;
    left: var(--sp-4);
    z-index: 200;
    padding: .75rem 1.25rem;
    font-weight: 650;
    color: #fff;
    background: var(--brand);
    border-radius: 0 0 var(--radius) var(--radius);
    text-decoration: none;
    transition: top var(--transition);
}

.skip-link:focus { top: 0; color: #fff; }

.floating-whatsapp {
    position: fixed;
    right: clamp(1rem, 3vw, 1.75rem);
    bottom: clamp(1rem, 3vw, 1.75rem);
    z-index: 90;
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    color: #fff;
    background: #25d366;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(37, 211, 102, .4);
    transition: transform var(--transition);
}

.floating-whatsapp:hover { transform: scale(1.08); color: #fff; }

.cookie-notice {
    position: fixed;
    left: clamp(1rem, 3vw, 1.5rem);
    bottom: clamp(1rem, 3vw, 1.5rem);
    z-index: 95;
    max-width: 420px;
    padding: var(--sp-6);
    font-size: var(--fs-sm);
    background: var(--paper);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.cookie-notice[hidden] { display: none; }
.cookie-notice__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }

/* Scroll reveal: the visible state is the default, so content is never
   invisible if JavaScript fails to run. site.js adds .reveal-ready first. */
.reveal-ready .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}

.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }

/* Error & maintenance ---------------------------------------------------------- */
.error-block {
    position: relative;
    padding-block: clamp(4rem, 10vw, 8rem);
    background: var(--ink-950);
    color: #fff;
    overflow: hidden;
    text-align: center;
    isolation: isolate;
}

.error-block__backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 50% 80% at 50% 0%, rgba(216, 30, 52, .32), transparent 68%),
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 100% 72px;
}

.error-block__code {
    font-size: clamp(4.5rem, 16vw, 10rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.06em;
    color: var(--brand-bright);
}

.error-block__title { margin-top: var(--sp-3); font-size: var(--fs-2xl); letter-spacing: -.035em; color: #fff; }
.error-block__text  { margin: var(--sp-4) auto 0; max-width: 46ch; color: rgba(226, 232, 240, .78); }

.error-block__actions {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--sp-8);
}

.error-block__links { margin-top: var(--sp-9); }

.error-block__links-label {
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--slate-500);
}

.error-block__links ul { display: flex; gap: var(--sp-5); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-4); }
.error-block__links a { color: var(--slate-300); text-decoration: none; font-weight: 600; }
.error-block__links a:hover { color: #fff; }

.error-block__trace {
    margin: var(--sp-8) auto 0;
    max-width: min(900px, 92vw);
    padding: var(--sp-5);
    overflow-x: auto;
    text-align: left;
    font-family: var(--font-mono);
    font-size: .75rem;
    line-height: 1.6;
    color: #fca5a5;
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--radius);
}

.maintenance {
    display: grid;
    place-items: center;
    /* 100vh excludes the iOS URL bar, so the panel overflowed the screen and
       the action sat under the fold. dvh tracks the bar as it hides. */
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--sp-6);
    text-align: center;
    background: var(--ink-950);
    color: #fff;
}

.maintenance__icon {
    display: grid;
    place-items: center;
    width: 84px; height: 84px;
    margin: 0 auto var(--sp-6);
    color: var(--brand-bright);
    background: rgba(216, 30, 52, .13);
    border: 1px solid rgba(216, 30, 52, .3);
    border-radius: 50%;
}

.maintenance__title { font-size: var(--fs-3xl); letter-spacing: -.04em; color: #fff; }
.maintenance__text  { margin: var(--sp-4) auto 0; max-width: 52ch; color: rgba(226, 232, 240, .78); }

.maintenance__until {
    display: inline-block;
    margin-top: var(--sp-6);
    padding: .55rem 1.1rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    background: rgba(255, 255, 255, .07);
    border-radius: var(--radius-pill);
}

/*------------------------------------------------------------------------------
  14. Responsive

  A single, deliberate breakpoint ladder. The previous version had eight
  ad-hoc stops (1000 / 980 / 920 / 880 / 700 / 640 / 620 / 380), each moving a
  different subset of the grids, so components fell out of step with one
  another and the phone layout was never designed as a whole — it was whatever
  the desktop rules happened to collapse into.

     1080px   the hero stops being a two-column composition
      900px   three-up grids become two-up; side-by-side layouts stack
      880px   the navigation becomes a drawer  (site.js uses the same value)
      720px   rows become stacks; the top bar compacts
      560px   two-up becomes one-up; phone layout proper
      380px   the tightest phones

  Type, spacing and touch targets are handled by tokens, clamp() and
  auto-fitting grids wherever possible, so most components need no entry here.
------------------------------------------------------------------------------*/

@media (max-width: 1080px) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero__visual { display: none; }
    .hero__backdrop {
        background-image:
            linear-gradient(90deg, rgba(5, 9, 15, .95), rgba(5, 9, 15, .7)),
            url("../img/tech-network-3d-hero.webp");
        background-position: center, 75% center;
        background-size: cover, auto 100%;
    }
}

/*
 * Every editorial grid steps down together — three across, then two, then one
 * — so no section can fall out of step with its neighbours.
 */
@media (max-width: 900px) {
    .card-grid,
    .card-grid--3,
    .card-grid--4,
    .chip-grid,
    .process-list,
    .tech-grid,
    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .detail-layout,
    .contact-layout { grid-template-columns: 1fr; }
    .sidebar-card { position: static; }
}

@media (max-width: 560px) {
    .card-grid,
    .card-grid--2,
    .card-grid--3,
    .card-grid--4,
    .chip-grid,
    .process-list,
    .tech-grid,
    .gallery-grid,
    .form-row { grid-template-columns: minmax(0, 1fr); }
}

/*==============================================================================
  Mobile navigation — an app-style side sheet

  The panel is a sheet over the page, not a second page: it covers most but
  not all of the width so the site stays visible behind a dimmed scrim, it has
  its own header with a close control, and it keeps the phone number pinned at
  the bottom the way a native app keeps its primary action reachable.
==============================================================================*/
@media (max-width: 880px) {
    .nav-toggle { display: inline-flex; }

    /*
     * A backdrop-filter on an ancestor makes that ancestor the containing
     * block for any position:fixed descendant. The drawer and its scrim live
     * inside the header, so with the blur applied they were being clipped to
     * the header bar instead of covering the viewport. The blur is dropped at
     * this width and the bar painted opaque instead — which is also cheaper
     * to composite on a phone.
     */
    .site-header {
        background: var(--ink-950);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Clear of the notch in landscape, where the inset is on the sides. */
    .site-header__inner {
        padding-left: max(var(--sp-5), env(safe-area-inset-left));
        padding-right: max(var(--sp-5), env(safe-area-inset-right));
    }

    /* Dimmed backdrop. Fades in rather than appearing, and swallows the tap
       that closes the sheet. */
    .nav-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 98;
        background: rgba(3, 6, 12, .6);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        opacity: 0;
        transition: opacity 260ms var(--ease);
    }

    .nav-scrim.is-visible { opacity: 1; }

    /*
     * Belt and braces alongside the [hidden] rule above. opacity:0 hides a
     * layer visually but it still swallows taps, so anything that is not
     * actively showing must also refuse them.
     */
    .nav-scrim:not(.is-visible) { pointer-events: none; }

    .primary-nav {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        z-index: 99;
        display: flex;
        flex-direction: column;
        width: min(88vw, 380px);
        background: var(--ink-950);
        box-shadow: -24px 0 60px rgba(0, 0, 0, .55);
        /* Slid out of view rather than display:none so it can animate; the
           visibility change keeps its links out of the tab order while shut. */
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 300ms var(--ease), visibility 300ms var(--ease);
        /*
         * Clears the notch and the home indicator. These insets only resolve
         * to a real value because the layout now ships viewport-fit=cover in
         * its viewport meta — without that they are permanently 0 and this
         * padding silently did nothing.
         */
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-right: env(safe-area-inset-right);
        /* A flick inside the drawer must not chain to the page behind it. */
        overscroll-behavior: contain;
    }

    .primary-nav.is-open { transform: translateX(0); visibility: visible; }

    .primary-nav__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-4);
        flex: none;
        padding: var(--sp-4) var(--sp-5);
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .primary-nav__title {
        font-size: var(--fs-xs);
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--slate-400);
    }

    .primary-nav__close {
        display: grid;
        place-items: center;
        width: 44px; height: 44px;
        color: #fff;
        background: rgba(255, 255, 255, .07);
        border-radius: var(--radius-sm);
        transition: background-color var(--transition);
    }

    .primary-nav__close:hover { background: var(--brand); }

    /* The link list is the only part that scrolls, so the header and the
       contact actions stay put while a long menu moves under them. */
    .primary-nav__list {
        flex: 1;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: var(--sp-3) var(--sp-5) var(--sp-5);
    }

    .primary-nav__item { border-bottom: 1px solid rgba(255, 255, 255, .06); }
    .primary-nav__group { justify-content: space-between; gap: var(--sp-2); }

    .primary-nav__link {
        padding: var(--sp-4) 0;
        /* 48px: a comfortable list row, above the 44px floor. */
        min-height: 48px;
        font-size: var(--fs-md);
        font-weight: 550;
        color: var(--slate-300);
        flex: 1;
    }

    .primary-nav__link::after { display: none; }

    .primary-nav__link.is-active {
        color: #fff;
        font-weight: 700;
    }

    /* A bar down the left edge marks the current page, the way a native
       app's list marks its selected row. */
    .primary-nav__item:has(.is-active) {
        box-shadow: inset 3px 0 0 var(--brand);
        padding-left: var(--sp-4);
        margin-left: calc(var(--sp-4) * -1);
    }

    .primary-nav__cta {
        margin: var(--sp-5) 0 0;
        width: 100%;
        min-height: 48px;
        font-size: var(--fs-sm);
    }

    .primary-nav__disclosure {
        width: 44px; height: 44px;
        flex: none;
        color: var(--slate-300);
        background: rgba(255, 255, 255, .07);
        border-radius: var(--radius-sm);
    }

    .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: 0;
        padding: 0;
        overflow: hidden;
        background: transparent;
        border: 0;
        box-shadow: none;
        transition: max-height 300ms var(--ease), padding 300ms var(--ease);
    }

    .primary-nav__item.is-open > .submenu { max-height: 720px; padding-bottom: var(--sp-3); }
    .primary-nav__item:hover > .submenu { max-height: 0; }
    .primary-nav__item.is-open:hover > .submenu { max-height: 720px; }

    .submenu__link {
        display: flex;
        align-items: center;
        /* Was a 38px row: under the 44px touch floor, on a list people scroll
           past with a thumb. */
        min-height: 44px;
        color: var(--slate-400);
        padding-left: var(--sp-4);
        margin-left: var(--sp-1);
        border-left: 1px solid rgba(255, 255, 255, .1);
        border-radius: 0;
    }

    .submenu__link:hover {
        background: rgba(255, 255, 255, .05);
        color: #fff;
        padding-left: var(--sp-5);
    }

    /* Contact actions pinned to the foot of the sheet. */
    .primary-nav__foot {
        display: grid;
        gap: var(--sp-2);
        flex: none;
        padding: var(--sp-4) var(--sp-5) var(--sp-5);
        border-top: 1px solid rgba(255, 255, 255, .08);
        background: rgba(255, 255, 255, .02);
    }

    .nav-action {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        padding: var(--sp-3) var(--sp-4);
        min-height: 52px;
        color: #fff;
        text-decoration: none;
        background: rgba(255, 255, 255, .06);
        border-radius: var(--radius);
        transition: background-color var(--transition);
    }

    .nav-action:hover { background: rgba(255, 255, 255, .12); color: #fff; }
    .nav-action .icon { color: var(--tech); flex: none; }
    .nav-action--call { background: var(--brand); }
    .nav-action--call:hover { background: var(--brand-bright); }
    .nav-action--call .icon { color: #fff; }
    /* min-width:0 lets a long address ellipsis instead of widening the row. */
    .nav-action > span { min-width: 0; }

    .nav-action__label {
        display: block;
        /* Was 10.5px — small enough to be a struggle, and it is a real label,
           not decoration. */
        font-size: var(--fs-xs);
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        opacity: .8;
    }

    .nav-action__value {
        display: block;
        font-size: var(--fs-sm);
        font-weight: 650;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*
     * position:fixed rather than overflow:hidden — iOS Safari ignores
     * overflow on the body and scrolls the page behind the sheet anyway.
     * site.js stores and restores the scroll offset around this.
     */
    body.nav-open {
        position: fixed;
        width: 100%;
        overflow: hidden;
        overscroll-behavior: none;
    }
}

/*
 * Phone held sideways. The drawer is the case that actually breaks here: a
 * ~380px-tall viewport leaves the pinned contact block sitting on top of the
 * menu, so the whole sheet is tightened rather than letting it collide.
 */
@media (max-width: 880px) and (max-height: 480px) {
    .primary-nav { width: min(70vw, 340px); }
    .primary-nav__head { padding-block: var(--sp-2); }
    .primary-nav__list { padding-block: var(--sp-1) var(--sp-3); }
    .primary-nav__link { min-height: 42px; padding-block: var(--sp-2); }
    .primary-nav__cta { margin-top: var(--sp-3); min-height: 42px; }
    .primary-nav__foot { padding-block: var(--sp-2) var(--sp-3); }
    .nav-action { min-height: 42px; padding-block: var(--sp-2); }

    /* A full-height hero in landscape is a screen of nothing but heading. */
    .hero { padding-block: var(--sp-7); }
    .hero__title { font-size: var(--fs-3xl); }
}

@media (max-width: 720px) {
    .service-row { grid-template-columns: 1fr; gap: var(--sp-4); }
    .service-row__media { width: 100%; }
    .service-row__action .btn { width: 100%; }

    .section__actions { flex-direction: column; align-items: stretch; }
    .section__actions .btn { width: 100%; }

    .cta-panel { flex-direction: column; align-items: flex-start; }
    .cta-panel__actions { width: 100%; }
    .cta-panel__actions .btn { flex: 1; }

    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7); }

    /*
     * The top bar was the worst offender on a phone. Its two contact links
     * wrapped onto separate rows, which together with the header put 165px —
     * 23% of a 720px screen, and closer to 45% in landscape — above the
     * content before anything had been said. It is one compact row now.
     */
    .topbar__inner {
        justify-content: center;
        flex-wrap: nowrap;
        min-height: 34px;
        padding-left: max(var(--sp-5), env(safe-area-inset-left));
        padding-right: max(var(--sp-5), env(safe-area-inset-right));
    }

    .topbar__tagline { display: none; }
    .topbar__contact { gap: var(--sp-5); min-width: 0; }
    .topbar__link { min-height: 34px; }
    .topbar__link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 560px) {
    /*
     * One line, one action: the number people actually tap. The address is
     * still in the drawer's footer, in the page footer and on the contact
     * page, so nothing is lost by dropping it from a 320px bar.
     */
    .topbar__contact > .topbar__link:not(.topbar__link--strong) { display: none; }

    .card__link { padding: var(--sp-5); }

    /*
     * The catalogue used to force three tiles across a phone. At 320px that
     * is an 88px tile carrying a 9.9px product name and an 8px badge — below
     * anything readable, and well under the 44px touch floor. Two up gives a
     * ~146px tile and lets the name sit at the body size.
     */
    .product-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
    .product-tile__body { padding: var(--sp-3); }
    .product-tile__name { font-size: var(--fs-sm); line-height: 1.35; }
    .product-tile__badge { font-size: var(--fs-xs); letter-spacing: .06em; }

    /* The "Popular packages" strip follows the catalogue rather than keeping
       a compact grid of its own. */
    .featured-strip .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
    .featured-strip .card__title { padding: var(--sp-3) var(--sp-3) 0; font-size: var(--fs-sm); line-height: 1.3; }
    .featured-strip .card__text { padding: 0 var(--sp-3) var(--sp-3); margin-top: var(--sp-1); font-size: var(--fs-xs); line-height: 1.5; }

    .site-footer__grid { grid-template-columns: 1fr; }

    .partner-strip { align-items: stretch; }
    .partner-strip__item--amateta { width: 100%; }
    .amateta-partner-link { justify-content: center; }
    .amateta-partner-link__logo { width: 142px; height: 82px; }
}

@media (max-width: 380px) {
    .hero__actions { flex-direction: column; }
    .hero__actions .btn { width: 100%; }
    .breadcrumbs { font-size: var(--fs-xs); }
}

/*------------------------------------------------------------------------------
  Touch, safe areas and pointer quality

  Keyed on input type rather than width: a 1024px tablet is a touch device and
  a 700px desktop window is not.
------------------------------------------------------------------------------*/
@media (pointer: coarse) {
    /*
     * WCAG 2.5.5 asks for 44x44. These were the controls under it: category
     * chips (27-38px), breadcrumb, footer and contact-detail links (21-27px),
     * and the catalogue jump list.
     *
     * Links sitting inside a sentence are deliberately left alone — WCAG
     * exempts them, and giving a mid-paragraph phone number a 44px box breaks
     * the line it lives on.
     */
    .filter-bar__chip,
    .category-chip,
    .catalogue-jump a,
    .breadcrumbs a,
    .site-footer__links a,
    .site-footer__contact a,
    .contact-details a,
    .error-block__links a,
    .catalogue-group__title a,
    .service-row__title a,
    .card__title a,
    .support-badge__number,
    .card__cta,
    .brand,
    .pagination a,
    .pagination span { min-height: 44px; display: inline-flex; align-items: center; }

    /*
     * Every button, including the --sm variant used for "Details" on the
     * service rows, which sat at 38px.
     */
    .btn { min-height: 44px; }

    /*
     * The slim top bar keeps its 34px height on a mouse, but its one link is
     * a phone number — the single most likely thing to be tapped on a phone —
     * so on a touch screen the bar grows to a full 44px target. Ten pixels,
     * and only where they buy something.
     */
    .topbar__inner,
    .topbar__link { min-height: 44px; }

    /* Hover transforms are noise on a touch screen: they fire on tap and stay
       stuck until the next tap somewhere else. */
    .card:hover, .service-row:hover, .product-tile a:hover { transform: none; }
    .product-tile a:hover .product-tile__media img { transform: none; }
}

/*
 * Fixed furniture has to clear the home indicator and, in landscape, the
 * notch — otherwise it sits underneath both.
 */
.floating-whatsapp {
    right: max(clamp(1rem, 3vw, 1.75rem), env(safe-area-inset-right));
    bottom: max(clamp(1rem, 3vw, 1.75rem), env(safe-area-inset-bottom));
}

.cookie-notice {
    left: max(clamp(1rem, 3vw, 1.5rem), env(safe-area-inset-left));
    right: max(clamp(1rem, 3vw, 1.5rem), env(safe-area-inset-right));
    bottom: max(clamp(1rem, 3vw, 1.5rem), env(safe-area-inset-bottom));
}

/* A floating button always covers something; at 320px it should cover as
   little of it as possible while staying a legitimate 48px target. */
@media (max-width: 560px) {
    .floating-whatsapp { width: 48px; height: 48px; }
    .floating-whatsapp svg { width: 22px; height: 22px; }
}

.site-footer {
    padding-bottom: max(var(--sp-8), env(safe-area-inset-bottom));
}

/*------------------------------------------------------------------------------
  15. Motion & print
------------------------------------------------------------------------------*/
@keyframes tech-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -12px, 0); }
}

@keyframes tech-orbit {
    from { transform: rotate(0deg) scale(.96); }
    50% { transform: rotate(180deg) scale(1.04); }
    to { transform: rotate(360deg) scale(.96); }
}

/*
 * Respect an explicit OS-level preference for reduced motion. Animations are
 * reduced to near-instant rather than removed, so state changes remain
 * perceptible. (WCAG 2.3.3)
 */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal-ready .reveal { opacity: 1; transform: none; }
    .card:hover, .btn:hover, .category-chip:hover, .service-row:hover { transform: none; }
    .card::before, .service-row::before, .category-chip::after { transform: none; }
}

@media (forced-colors: active) {
    .btn { border: 1px solid ButtonText; }
    .card, .accordion__item, .service-row { border: 1px solid CanvasText; }
}

@media print {
    .topbar, .site-header, .site-footer, .floating-whatsapp,
    .cookie-notice, .skip-link, .section__actions, .catalogue-jump { display: none !important; }

    body { color: #000; background: #fff; font-size: 11pt; }
    .hero, .page-header { background: none; color: #000; padding-block: 1rem; }
    .hero__title, .page-header__title, .section__title { color: #000; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
    .card, .accordion__item, .service-row { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; }
}