/* ============================================================================
   v4.css — the pre-launch site's design layer.

   Loaded after styles.css (and article.css on reading pages), so it is both the
   home page's own stylesheet and the place where the full site's components get
   dialled back for this one.

   The brief this layer answers: simple, elegant, refined — not bulky. Three
   rules follow from that, and everything below is an application of them.

     1. RULES, NOT BOXES. Sections are built from hairlines and whitespace
        rather than bordered, rounded, shadowed cards. A grid of floating
        rounded rectangles is the single most template-looking thing a marketing
        page can do, and it makes ragged content lengths look like a defect.

     2. ONE ACCENT, USED SPARINGLY. --color-deep carries every accent: the
        kicker rule, links, the primary button, the active tab. Multi-colour
        gradient chips and pastel buttons read as decoration applied after the
        fact. The logo is where the palette gets to be colourful.

     3. NO DECORATIVE ICONOGRAPHY. Icons earn their place by carrying
        information (mail, LinkedIn, direction). A gradient tile above a heading
        carries none, and three of them in a row is a signature of generated
        layouts. Typography does the work instead. The hero's four
        facet icons pass the test: each names the problem class beside it.

   Colours all resolve to styles.css :root tokens — nothing new is invented.
   ========================================================================== */

:root {
    --v-accent: var(--color-deep);   /* #0014AF — the only accent on the page */
    --v-ink: var(--gray-900);        /* headings */
    --v-body: var(--gray-600);       /* body copy */
    --v-meta: var(--gray-500);       /* dates, labels, counts */
    --v-rule: var(--gray-200);       /* hairlines */

    /* One spacing scale, so section rhythm is a choice rather than an accident. */
    --v-s1: 8px;
    --v-s2: 14px;
    --v-s3: 22px;
    --v-s4: 34px;
    --v-s5: 52px;
    --v-s6: 76px;
    --v-s7: 112px;
}

/* ---------- Base ---------------------------------------------------------- */

/* Keyboard focus was invisible: the browser default outline is suppressed by the
   components this site borrows. :focus-visible keeps it off mouse clicks. */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--v-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

::selection { background: var(--color-teal); color: var(--color-navy); }

/* Off-screen until focused, then pinned over the fixed navbar. */
.v-skip {
    position: absolute;
    left: -9999px;
    z-index: 1100;
    padding: 12px 20px;
    background: var(--v-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 3px 0;
}

.v-skip:focus {
    left: 0;
    top: 0;
}

#v-main:focus { outline: none; }

/* Dates and counts sit in columns; proportional digits make them jitter. */
.v-tile-date {
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Buttons ------------------------------------------------------- */

/* The site-wide large buttons are pastel blocks — 12px radii, 34px of side
   padding and a coloured drop shadow each. Restated here as one solid mark and
   one hairline outline: same hierarchy, a third of the visual weight. */
.btn-primary-large,
.btn-secondary-large {
    gap: 10px;
    padding: 14px 26px;
    border-radius: 3px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
    box-shadow: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn-primary-large {
    background: var(--v-accent);
    color: #fff;
}

.btn-primary-large:hover {
    background: var(--color-navy);
    color: #fff;
    transform: none;
    box-shadow: none;
}

.btn-secondary-large {
    background: transparent;
    color: var(--v-ink);
    border: 1px solid var(--gray-300);
    padding: 13px 25px;
}

.btn-secondary-large:hover {
    background: transparent;
    border-color: var(--v-ink);
    color: var(--v-ink);
    transform: none;
    box-shadow: none;
}

.btn-primary-large svg,
.btn-secondary-large svg { width: 16px; height: 16px; flex: none; }

.btn-primary-large:hover svg { transform: translateX(3px); }

.btn-primary-large span,
.btn-secondary-large span { white-space: nowrap; }

/* Nav CTA: same language as the primary button, at nav scale. */
.btn-book-call {
    padding: 9px 18px;
    border-radius: 3px;
    background: var(--v-accent);
    font-weight: 600;
    letter-spacing: -0.005em;
}

.btn-book-call:hover {
    background: var(--color-navy);
    transform: none;
    box-shadow: none;
}

.nav-link { font-weight: 500 !important; }

/* ---------- Hero ---------------------------------------------------------- */

/* The hero ground was three stacked radial gradients, the first of them teal at
   14%/16% — which is what tinted the whole fold mint. Replaced by one soft cool
   light behind the graphic side, so the type sits on white and the only colour
   in the fold comes from the mesh, the logos and the four facet marks. */
.hero-bg-gradient {
    background: radial-gradient(112% 82% at 88% 6%, rgba(0, 111, 205, 0.11) 0%, transparent 62%);
}

/* The triangulation keeps the original site's colors, but its box ended in four
   hard straight edges and read as a picture pasted onto the page. Feathering the
   edges lets it dissolve into the hero instead. */
.hero-right .network-pattern-container svg {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
                        linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
                        linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
            mask-composite: intersect;
}

/* The wavy bottom edge is the most dated thing on the page — a scalloped section
   divider is a template signature, and it also forced 56px of dead zone above the
   logo band so the wave would not crop it. A straight edge, and the band moves
   up. Delete this rule to put the wave back. */
.hero-modern {
    -webkit-mask: none;
    mask: none;
    padding: clamp(124px, 8.5vh, 176px) 0 0;
}

/* .hero-modern is a column flexbox, and .container-wide centers itself with auto
   margins, which in a flex column also shrinks it to its content. Between 600px
   and 968px the widest line in the hero (the facet row, 588px) is narrower than
   the page, so the whole hero shrank to it and sat indented from every other
   section: 90px in at 768px, against 32px for everything below it. */
.hero-modern > .container-wide { width: 100%; }

/* styles.css gives the hero a minimum height of 83% of the screen and pushes the
   Trusted by band to its foot with an auto margin. On a laptop the content is
   taller than that anyway, but on a large screen the leftover height opened a gap
   of hundreds of pixels between the facets and the band. The hero is as tall as
   its content, and the band sits the same distance below the text on every screen. */
.hero-modern { min-height: 0; }



/* The four problem classes, each marked by a small icon on a soft rounded tile in
   one of the logo's colours. The description above them is the main site's own
   paragraph, verbatim, with its original styling. */
.hero-facets {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hero-facets li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--v-ink);
}

.hero-facet-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: var(--v-facet-ink, var(--v-facet-color));
    background: color-mix(in srgb, var(--v-facet-color) var(--v-facet-tint, 13%), #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-facet-color) 26%, transparent);
}

.hero-facet-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Teal is too light to draw a line in, so its icon is inked in a teal-leaning
   navy and its tile takes a stronger tint to stay visible. */
.hero-facets li:nth-child(1) {
    --v-facet-color: var(--color-teal);
    --v-facet-ink: color-mix(in srgb, var(--color-teal) 38%, var(--color-navy));
    --v-facet-tint: 30%;
}
.hero-facets li:nth-child(2) { --v-facet-color: var(--color-blue); }
.hero-facets li:nth-child(3) { --v-facet-color: var(--color-indigo); }
.hero-facets li:nth-child(4) { --v-facet-color: var(--color-navy); }

/* ---------- Hero trusted-by band ------------------------------------------ */

/* The main site lays this band out as a single no-wrap row at a 60px gap, which
   overruns the container and clips the marks at both ends. Same logos, same
   order, same sizes — the gap is tightened so all eight fit the container at
   desktop width, and they wrap rather than run off the edge below it. This band
   is the whole of the recognition story on this site, so nothing may be clipped. */
/* The band was a centred strip under a left-aligned page — the one bit of the
   fold still laid out to a template's habits. Now it sits on the same left edge
   as everything else, under a hairline of the kind the rest of the site is built
   from, with the marks spread across the measure instead of huddled mid-page. */
/* The space above the hairline used to come from the hero's button row, which now
   sits in the contact section; the band keeps that space itself, and no longer
   drops to the foot of the screen (see .hero-modern above). */
.trusted-section--hero {
    margin-top: 0;
    padding: var(--v-s5) 0 26px;
}

.trusted-section--hero .container {
    padding-top: 26px;
    border-top: 1px solid var(--v-rule);
}

/* The marks carry a lot of transparent padding of their own — NQCC's fills a
   quarter of a square canvas — so the row's box is far taller than its ink. The
   label is pulled into that slack rather than sitting a clear 90px above
   anything visible. */
.trusted-section--hero .trusted-label {
    text-align: left;
    margin-bottom: -16px;
}

.trusted-section--hero .trusted-logos {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 22px 36px;
}

/* Full colour, as supplied. These six are all transparent wordmarks of similar
   optical weight, so they hold together as a row without being flattened to one
   ink — which is only a problem when marks on dark grounds are mixed in. */
.trusted-section--hero .company-logo-img {
    opacity: 0.9;
    transition: opacity var(--transition-fast);
}

.trusted-section--hero .logo-item:hover .company-logo-img {
    opacity: 1;
    transform: none;
}

.trusted-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--v-meta);
}

/* The main site tucks the label into the logo row with a -30px margin, which
   works only while the row is a single line of whitespace-padded artwork. Once
   the band wraps, the label lands on top of the first mark. */
@media (max-width: 1200px) {
    .trusted-section--hero .trusted-label { margin-bottom: 8px; }
}

/* ---------- Section scaffolding ------------------------------------------- */

.v-section { padding: var(--v-s7) 0; }
.v-section--tight { padding: var(--v-s6) 0 var(--v-s7); }
.v-section--gray { background: var(--gray-50); }

.v-section-head { max-width: 720px; margin-bottom: var(--v-s5); }

/* A short accent rule instead of a coloured all-caps kicker floating on its own.
   The rule ties the label to the grid below it and lets the label itself stay
   quiet. */
.v-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: var(--v-s3);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--v-meta);
}

.v-kicker::before {
    content: '';
    width: 26px;
    height: 2px;
    background: var(--v-kicker-color, var(--v-accent));
    flex: none;
}

/* Each section signs itself with a different one of the four. */
#what-we-do { --v-kicker-color: var(--color-blue); }
#newsroom   { --v-kicker-color: var(--color-indigo); }
#contact    { --v-kicker-color: var(--color-teal); }

/* The listing's bottom padding, the contact section's top padding and the contact
   block's own rule-plus-padding stacked into ~280px of white. */
#newsroom { padding-bottom: var(--v-s6); }
#contact  { padding-top: 0; }

/* 700, not 800, and a smaller top end: the specimen at 800/46px reads as
   shouting, and the extra weight is what makes a page feel heavy. */
.v-section-title {
    font-family: var(--font-display);
    font-size: clamp(27px, 2.7vw, 38px);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.022em;
    color: var(--v-ink);
    margin: 0 0 var(--v-s3);
    text-wrap: balance;
}

.v-section-lede {
    font-size: 17.5px;
    line-height: 1.66;
    color: var(--v-body);
    max-width: 62ch;
    margin: 0;
}

.v-section-foot { margin-top: var(--v-s5); }

/* ---------- What we do: an editorial column grid -------------------------- */

/* Hairlines, not cards. The rules do the separating, the columns share a
   baseline at the top, and unequal text lengths stop looking like broken boxes. */
/* The shared grey rule above the columns becomes three coloured ones — the
   clearest place on the page to say what the name means, and it costs nothing
   but the rule that was already there. Decorative, so teal is free to be teal. */
.v-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 46px;
}

/* The gap does the separating, so each coloured rule can span exactly its own
   column and start where its text starts. With a vertical hairline between the
   columns the rule had to run edge to edge, and the colour changes landed 46px
   away from the headings they belong to. */
.v-col {
    padding: 26px 0 0;
    border-top: 3px solid var(--v-col-color);
}

.v-col:nth-child(1) { --v-col-color: var(--color-teal); }
.v-col:nth-child(2) { --v-col-color: var(--color-blue); }
.v-col:nth-child(3) { --v-col-color: var(--color-indigo); }

.v-col h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--v-ink);
    margin: 0 0 var(--v-s2);
}

.v-col p {
    font-size: 16px;
    line-height: 1.68;
    color: var(--v-body);
    margin: 0;
}

/* ---------- Statement ----------------------------------------------------- */

/* The best-looking thing on this site was the teal-ruled pull quote inside the
   posts, and the marketing pages had no equivalent — nothing between the hero
   and the footer that makes you stop. This borrows that exact device at a larger
   size, which also ties the two layers of the site together.

   It carries the page's one tint. The newsroom section used to be the tinted
   band; two tinted bands in a row would have cancelled each other out, and the
   pause belongs here, before the listing rather than around it. */
.v-statement { background: var(--gray-50); }

.v-quote {
    max-width: 940px;
    margin: 0 auto;
    text-align: center;
}

.v-quote blockquote {
    margin: 0;
    padding: 44px 0;
    border-top: 2px solid var(--color-teal);
    border-bottom: 2px solid var(--color-teal);
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 68px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--v-ink);
    text-wrap: balance;
}

/* ---------- Listing grid -------------------------------------------------- */

/* A dense editorial grid: type and date, title, summary, then a square picture
   at the FOOT of the cell rather than the head. Leading with the image turns a
   listing into a wall of pictures; leading with the words keeps it scannable and
   lets the images sit on a second, quieter baseline of their own.

   No cards — the only frame is the hairline above each cell, which reads as one
   broken rule across each row. */
.v-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Grid and flex items default to min-width:auto, so the non-wrapping metadata
   line sets a floor under the track and the last column runs off the screen at
   narrow widths. Both levels have to be told they may shrink. */
.v-grid-item { display: flex; min-width: 0; }

.v-tile {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    padding: 14px 0 38px;
    border-top: 1px solid var(--v-rule);
    text-decoration: none;
    transition: border-color var(--transition-fast);
}

.v-tile-meta {
    display: flex;
    align-items: baseline;
    margin-bottom: 10px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v-meta);
}


.v-tile:hover { border-top-color: var(--v-accent); }

.v-tile-date { flex: none; color: var(--v-meta); }

/* Clamped so every cell in a row reaches its picture at a predictable depth. A
   listing is a promise of the piece, not a summary of it. */
.v-tile-title {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.014em;
    color: var(--v-ink);
}

.v-tile:hover .v-tile-title { color: var(--v-accent); }

.v-tile-sum {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.52;
    color: var(--v-body);
}

/* auto pushes the picture to the foot of the cell, so every image in a row lines
   up however long the titles above them run. */
.v-tile-media {
    display: block;
    margin-top: auto;
    padding-top: 20px;
}

.v-tile-media picture { display: block; }

.v-tile-media img,
.v-tile-media svg {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    background: var(--gray-50);
    transition: opacity var(--transition-fast);
}

.v-tile:hover .v-tile-media svg { opacity: 0.88; }

.v-tile:hover .v-tile-media img { opacity: 0.88; }

/* The newest announcements take two columns each — only as many as the grid needs
   to end on a full row. Their pictures use a ratio matching a square tile's height
   across two columns plus the gap, so every picture in a row still lines up. */
.v-tile--wide { grid-column: span 2; }
.v-tile--wide .v-tile-title { font-size: 20px; -webkit-line-clamp: 2; }
.v-tile--wide .v-tile-sum { font-size: 15px; }
.v-tile--wide .v-tile-media img { aspect-ratio: 2.09 / 1; }

/* OPTION — picture above the text.

   The default puts it at the foot, which is what makes the grid scan as writing
   with pictures rather than as a wall of pictures, and what lets the images
   bottom-align into a second rhythm. Leading with the image is the more
   conventional, more visual arrangement, and it aligns the pictures along the
   top instead. Add v-grid--media-top to the grid to switch. */
.v-grid--media-top .v-tile-media {
    order: -1;
    margin-top: 0;
    margin-bottom: 16px;
    padding-top: 0;
}

.v-latest-empty { color: var(--v-meta); }

/* ---------- Contact ------------------------------------------------------- */

/* Was a full-width blue gradient panel with a radial glow and 28px corners,
   sitting directly above an equally dark footer. A CTA banner is a template
   move; this is the same invitation set as type, and it lets the footer be the
   page's only dark mass. */
.v-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    padding-top: var(--v-s5);
    border-top: 1px solid var(--v-rule);
}

.v-contact h2 { margin-bottom: 0; }

.v-contact p {
    font-size: 17.5px;
    line-height: 1.66;
    color: var(--v-body);
    margin: 0 0 var(--v-s4);
    max-width: 54ch;
}

.v-mail {
    display: inline-block;
    font-family: var(--font-display);
    font-size: clamp(22px, 2.1vw, 30px);
    font-weight: 600;
    letter-spacing: -0.022em;
    color: var(--v-ink);
    text-decoration: none;
    border-bottom: 2px solid var(--v-accent);
    padding-bottom: 3px;
    transition: color var(--transition-fast);
}

.v-mail:hover { color: var(--v-accent); }

/* The section's call to action, under the heading. styles.css stretches large
   buttons to full width from 768px down; this one keeps its own width at every
   size, a mark under a heading rather than a bar across the screen. */
.v-contact-cta {
    width: auto;
    margin-top: var(--v-s4);
}

.v-linkedin svg {
    width: 16px;
    height: 16px;
    flex: none;
    color: #0A66C2;
}

/* ---------- Index pages --------------------------------------------------- */

/* article.css sets these for the full site's index pages; here they only need to
   agree with the section scale above. */
.a-index-head { margin-bottom: var(--v-s5); }

/* article.css caps index pages at 1120px, which gives a five-column grid 200px
   tracks. 1280 puts them at ~240px — enough for a three-line title. */
.a-wrap--index { max-width: 1280px; }

.a-index-intro {
    font-size: 17.5px !important;
    line-height: 1.66 !important;
    color: var(--v-body) !important;
    max-width: 62ch;
}

/* ---------- Article furniture --------------------------------------------- */

/* The reading pages are the strongest thing on this site and are left alone —
   except for the two components at their foot, which are bordered, rounded
   boxes. Once the home page and the newsroom are built from rules, those boxes
   are the only rounded rectangles left on the site. Same content, same order,
   restated as rows. */
/* The container's own divider plus a rule on each item stacked two lines 32px
   apart; the item rules alone read as one broken line across the two columns. */
.c-seqnav {
    border-top: 0;
    padding-top: 0;
    gap: 28px;
}

.c-seqnav-item {
    padding: 18px 0 0;
    border: 0;
    border-top: 1px solid var(--v-rule);
    border-radius: 0;
}

.c-seqnav-item:hover {
    border-top-color: var(--v-ink);
    transform: none;
    box-shadow: none;
}

.c-seqnav-item--next { text-align: right; }

.c-cards { gap: 0; }

.c-card-inner {
    padding: 20px 0;
    border: 0;
    border-top: 1px solid var(--v-rule);
    border-radius: 0;
    background: none;
}

.c-card:last-child .c-card-inner { border-bottom: 1px solid var(--v-rule); }

a.c-card-inner:hover {
    border-top-color: var(--v-ink);
    transform: none;
    box-shadow: none;
}

.c-card-label { color: var(--v-meta); }

.c-related-heading {
    font-family: var(--font-primary);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--v-meta);
}

/* ---------- Footer -------------------------------------------------------- */

/* One row: the logo in its own colours, the ways to reach us, the legal line
   beneath. The full site's footer is a dark four-column sitemap; this site is one
   page, so an index of it would only repeat the nav — and a navy wordmark cannot
   be shown in colour on a navy ground, so the footer goes light. */
.v-footer {
    background: #fff;
    color: var(--v-body);
    padding: 52px 0 34px;
    border-top: 1px solid var(--v-rule);
}

.v-footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px 40px;
    padding-bottom: 30px;
}

/* The mark carries its own transparent margin; the negative offsets put the
   visible artwork on the page's left edge. */
.v-footer-logo img {
    display: block;
    height: 112px;
    width: auto;
    margin: -14px 0 -14px -19px;
}

.v-footer-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 30px;
    font-size: 15.5px;
    font-weight: 500;
}

.v-footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--v-ink);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.v-footer-links a:hover { color: var(--v-accent); }

.v-footer-links .v-linkedin svg { width: 19px; height: 19px; }

.v-footer .footer-bottom {
    padding-top: 22px;
    border-top: 1px solid var(--v-rule);
}

.v-footer .footer-legal,
.v-footer .footer-location {
    font-size: 14px;
    color: var(--v-meta);
}

.v-footer .footer-legal a { color: var(--v-meta); }
.v-footer .footer-legal a:hover { color: var(--v-ink); }

/* ---------- Mobile controls ----------------------------------------------- */

/* Sections reached from the menu stop below the fixed navbar instead of sliding
   under it; #contact has no top padding of its own to absorb the bar. */
#what-we-do, #newsroom, #contact { scroll-margin-top: 48px; }

/* The menu button is 34x28 — under the 44px a thumb needs. An invisible
   extension of its hit area fixes that without moving anything in the bar. */
.mobile-menu-btn { position: relative; }
.mobile-menu-btn::after { content: ''; position: absolute; inset: -8px -5px; }

/* The logo and "Get in touch" share a 40px bar with the menu button. At 360px the
   wordmark ran into the button, and at 320px the button covered "RESEARCH". The
   mark steps down a little and the button's side padding tightens; nothing is
   hidden. The margins scale with the mark, which carries its own transparent edge. */
@media (max-width: 400px) {
    .nav-actions { gap: 10px; }
    .btn-book-call { padding: 9px 13px; }
    .logo-icon { height: 56px; margin-left: -10.5px; margin-right: -14px; }
}

@media (max-width: 343px) {
    .nav-container { padding: 0 14px; }
    .logo { left: 12px; }
    .logo-icon { height: 52px; margin-left: -9.75px; margin-right: -13px; }
    .btn-book-call { padding: 9px 11px; font-size: 12.5px; }
}

/* ---------- Responsive ---------------------------------------------------- */

@media (max-width: 1100px) {
    .v-cols { grid-template-columns: repeat(2, 1fr); column-gap: 36px; }

    /* Three items in two columns leaves one alone on the second row; it takes the
       full width, with its measure capped so the line length still matches. */
    .v-col:nth-child(3) { grid-column: 1 / -1; margin-top: var(--v-s4); }
    .v-col:nth-child(3) p { max-width: 62ch; }
}

@media (max-width: 968px) {
    :root { --v-s7: 76px; --v-s6: 56px; --v-s5: 40px; }
    .v-cols { grid-template-columns: 1fr; }
    .v-col:nth-child(n+2) { margin-top: var(--v-s4); }
    .v-contact { grid-template-columns: 1fr; gap: var(--v-s4); }
}

@media (max-width: 760px) {
}

/* The grid steps down on its own track: what matters is the column width, not the
   device. A two-column tile would leave holes in a three-column grid, so the wide
   treatment belongs to the four-column layout only. */
@media (max-width: 1100px) {
    .v-grid { grid-template-columns: repeat(3, 1fr); }
    .v-tile--wide { grid-column: auto; }
    .v-tile--wide .v-tile-title { font-size: 17px; -webkit-line-clamp: 3; }
    .v-tile--wide .v-tile-sum { font-size: 14px; }
    .v-tile--wide .v-tile-media img { aspect-ratio: 1 / 1; }
}

@media (max-width: 760px) {
    .v-grid { grid-template-columns: repeat(2, 1fr); gap: 0 18px; }
    .v-tile { padding-bottom: 28px; }
}

/* On a phone, two columns clipped every title mid-phrase. The announcements become
   a list: date, title and summary on the left, a small square picture on the right. */
@media (max-width: 560px) {
    .v-grid { grid-template-columns: 1fr; }
    .v-tile {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 96px;
        grid-template-rows: auto auto 1fr;
        grid-template-areas: "meta media" "title media" "sum media";
        column-gap: 16px;
        padding: 16px 0 18px;
    }
    .v-tile-meta { grid-area: meta; margin-bottom: 6px; }
    .v-tile-title,
    .v-tile--wide .v-tile-title { grid-area: title; font-size: 16px; -webkit-line-clamp: 3; }
    .v-tile-sum,
    .v-tile--wide .v-tile-sum { grid-area: sum; margin-top: 5px; font-size: 13.5px; -webkit-line-clamp: 2; }
    .v-tile-media { grid-area: media; align-self: start; margin: 0; padding: 0; }
    .v-tile-media img,
    .v-tile--wide .v-tile-media img { width: 96px; aspect-ratio: 1 / 1; }
}

/* Below 968px the hero stacks, and its graphic was a square as wide as the column
   (326px on a phone, 588px on a tablet) under 68px of margin. The generator only
   draws squares (script.js centers one on the shorter side), so it stays a square,
   centered, at a size suited to the stacked layout. The height is !important
   because script.js sizes this box inline for the side-by-side layout, and a
   tablet rotated out of landscape would keep that stale height. */
@media (max-width: 968px) {
    .hero-content-wrapper { gap: 24px; }
    .hero-right .network-pattern-container {
        width: min(100%, clamp(220px, 62vw, 340px));
        height: auto !important;
        aspect-ratio: 1;
        margin: 0 auto;
    }
    .trusted-section--hero { padding-top: 28px; }
}

/* Six marks need about 985px of row. Below that the band broke unevenly (5+1 at
   1024px, 4+2 at 768px, 1+2+1+1+1 on a 360px phone), so it becomes a grid: three
   columns, then two. The artwork also carries a lot of transparent padding (Airbus
   and NQCC are about three-quarters empty top to bottom), which made every wrapped
   row far taller than its ink. Each mark is cropped to its ink at its desktop
   width, and Airbus is nudged left by its side padding so its ink meets the column
   edge. The one-row desktop band keeps the artwork exactly as supplied. */
@media (max-width: 1140px) {
    .trusted-section--hero .trusted-label { margin-bottom: 16px; }
    .trusted-section--hero .trusted-logos {
        display: grid;
        grid-template-columns: repeat(3, auto);
        justify-content: space-between;
        align-items: center;
        gap: 26px 32px;
    }
    .trusted-section--hero .company-logo-img {
        display: block;
        height: auto;
        max-width: 100%;
        object-fit: cover;
    }
    .trusted-section--hero .v-mark-airbus   { width: 174px; aspect-ratio: 174 / 36; translate: -15.2% 0; }
    .trusted-section--hero .v-mark-bmw      { width: 97px; }
    .trusted-section--hero .v-mark-dstl     { width: 86px; aspect-ratio: 86 / 50; }
    .trusted-section--hero .v-mark-innovate { width: 158px; }
    .trusted-section--hero .v-mark-nqcc     { width: 150px; aspect-ratio: 150 / 46; }
    .trusted-section--hero .v-mark-uksa     { width: 138px; }
}

@media (max-width: 600px) {
    .trusted-section--hero .trusted-logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 28px;
    }
}

/* The address is a single word to the browser; at 320px it broke after the hyphen. */
@media (max-width: 400px) {
    .v-mail { font-size: min(22px, 6.1vw); }
}

@media (max-width: 760px) {
    .v-footer-top { flex-direction: column; align-items: flex-start; }
    .v-footer-logo img { height: 88px; margin: -11px 0 -11px -15px; }
    .v-footer .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
    .v-footer-links { flex-direction: column; align-items: flex-start; gap: 12px; }
    .v-footer .footer-legal { flex-wrap: wrap; gap: 6px 22px; }
    .v-footer .footer-legal span { flex-basis: 100%; }
    .v-footer .footer-legal a { display: inline-block; padding: 8px 0; }
}

/* At phone width the four facets wrapped one short line at a time; a 2x2 grid
   keeps them as a set. */
@media (max-width: 480px) {
    .hero-facets {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 16px;
    }
}

/* ============================================================================
   ALTERNATIVE — editorial serif headings

   Fraunces is already self-hosted in fonts/. Swapping it in for section
   headings makes the page unmistakably art-directed and is the single biggest
   change available here; it was not taken as the default only because the hero
   is the main site's, set in Schibsted Grotesk, and two display faces on one
   fold reads as indecision. If the hero ever moves to this treatment too,
   uncomment:

   .v-section-title, .v-tile-title, .v-col h3, .v-mail {
       font-family: 'Fraunces', Georgia, serif;
       font-variation-settings: 'SOFT' 0, 'WONK' 0;
       letter-spacing: -0.012em;
   }
   ========================================================================== */