/* Legacy alignment for the design system in assets/vx.css.
 *
 * Loaded LAST on every page, after the page's own stylesheet. That is the whole
 * point of it being a separate file: landing.css and job.css declare their type
 * scale with !important, and !important against !important is settled by source
 * order rather than by specificity, so a rule here only wins by coming after.
 *
 * What it is for: the pages that have not been rewritten in the .vx- idiom still
 * carry the class names they were built with. This gives those names the values
 * the system defines, so those pages read as the same site without their markup
 * changing.
 *
 * Measured before this existed, at 1440px: five different h1 sizes (51, 64, 68,
 * 80 and 98px), five h2 sizes, four eyebrow treatments and three button shapes.
 * The 98px h1 came from site.css's own base rule and only ever showed on the
 * four pages that had forgotten to override it -- so the biggest heading on the
 * site was an accident.
 *
 * Everything here is a value, not a layout. Rewriting a page's structure is a
 * separate job; this only stops it looking like a different website.
 */

/* --- One type scale -------------------------------------------------------
   The base rule in site.css is the fallback for a heading no page has claimed;
   it should land on the display size, not above it. */
/* .vx-title, not .vx-display: every one of these is a descriptive sentence
   ("Underwater thrusters for ROV and AUV builds in India"), and a sentence at
   display size wraps to three lines and fills the screen with one heading. */
.lp-hero h1,
.job-hero h1,
.guide-hero h1,
.thruster-hero h1,
.product-hero h1,
.articles-hero h1,
.careers-hero h1,
.sales-hero h1 {
    font-size: clamp(2.1rem, 3.5vw, 3.35rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -.03em;
}

.lp-section h2,
.guide-section h2,
.page-section h2,
.job-section h2,
.lp-quote h2,
.job-apply h2,
.tools-section h2,
.career-openings h2,
.career-cta h2,
.rfq-section h2 {
    font-size: clamp(1.95rem, 3.4vw, 2.95rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -.03em;
}
/* Section headings inside long-form article bodies stay smaller: they are
   subheads within a text, not the title of a section of the page. */
.article-body h2, .lp-section .lp-prose h2 {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem) !important;
    line-height: 1.2 !important;
}

/* --- One eyebrow ----------------------------------------------------------
   Was: .72rem/w500 on landing pages, .68rem/w700 on articles.html, 1.15rem in
   grey on careers.html. All three are the same label doing the same job. */
.eyebrow,
.rfq-eyebrow,
.career-email__label,
.px-notes__label {
    margin: 0 0 1.5rem;
    color: var(--accent) !important;
    font: 600 .72rem 'IBM Plex Mono', monospace !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
}
/* On the dark sections the accent has to lighten to stay legible. */
.lp-quote .eyebrow, .job-apply .eyebrow, .career-cta .eyebrow,
.lp-section--ink .eyebrow, .career-email__label {
    color: var(--accent-light) !important;
}

/* --- One lead paragraph --------------------------------------------------- */
.lp-hero .lead, .job-hero .lead, .guide-hero .lead, .thruster-hero .lead, .product-hero .lead, .career-lead {
    max-width: 46rem;
    color: var(--sub);
    font-size: clamp(1.15rem, 1.9vw, 1.6rem);
    line-height: 1.55;
    letter-spacing: -.01em;
}

/* --- One button -----------------------------------------------------------
   Was: a square uppercase mono block at two different sizes (.btn-elevation,
   .lp-cta__button) alongside the pill above. The pill won because it is the
   one a visitor meets first, on the homepage. */
.lp-cta__button,
.btn-elevation,
.card-contact,
.report-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: .95rem 1.9rem !important;
    border: 0 !important;
    border-radius: 980px !important;
    background: var(--c-accent-fill) !important;
    color: var(--c-on-accent) !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    transition: background .2s ease, transform .2s ease;
}
.lp-cta__button:hover,
.btn-elevation:hover,
.card-contact:hover,
.report-btn:hover {
    background: var(--c-accent-fill-hover) !important;
    transform: translateY(-2px);
}
/* The secondary action beside it. On several pages this was a bare <a> that
   inherited a browser-blue underline, which is the single most off-palette
   thing on the site. */
.report-btn--ghost,
.lp-cta__secondary,
.hero-secondary {
    background: transparent !important;
    color: var(--ink) !important;
    border: 1px solid var(--c-line-hard) !important;
}
.report-btn--ghost:hover,
.lp-cta__secondary:hover,
.hero-secondary:hover {
    background: transparent !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

/* --- One card -------------------------------------------------------------
   Square corners and a hairline on the landing pages; 18px and a lift on the
   newer ones. Same component. */
.lp-card, .lp-note, .lp-group, .lp-pack, .lp-crit, .article-card, .cat-card {
    border-radius: var(--radius) !important;
    border: 1px solid var(--line) !important;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, border-color .3s ease;
}
a.lp-card:hover, a.article-card:hover, a.cat-card:hover {
    transform: translateY(-4px);
    border-color: var(--c-line-firm) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
}

/* --- One section rhythm ---------------------------------------------------
   The landing pages ran at roughly half the vertical padding of the newer
   ones, which is what made moving between them feel like changing sites. */
.lp-hero, .job-hero {
    /* The same numbers as .vx-hero, so the masthead sits the same distance
       above the eyebrow on every page. These ran ~27px deeper, which is not a
       difference you can name but is one you feel moving between pages. */
    padding: clamp(7rem, 12vw, 10rem) 8% clamp(3rem, 6vw, 5rem);
    background: var(--mist);
}
.lp-section, .job-section {
    padding: clamp(5rem, 11vw, 9rem) 8%;
}
.lp-section--cta { padding-top: 0; padding-bottom: 0; }
.lp-wrap, .job-wrap { max-width: 1180px; }

/* --- One card title -------------------------------------------------------
   Card headings were running at 18.4, 18.7, 19.2, 20 and 24px depending on
   which page built the card. .vx-card h3 is 1.2rem; everything that is a card
   title now matches it. A heading that is genuinely a level above a card --
   the discipline headings over the project groups -- keeps its own size. */
.article-card h3, .tool-card h3, .cap-card h3, .delivery-card h3,
.svc-card h3, .lp-card h3, .lp-crit h3, .opening h3, .proj-card h3,
.cat-card h3, .brand-card h3, .trust-card h3, .model-card h3,
.faq-card h3, .step-card h3, .info-block h3 {
    margin: 0 0 .6rem;
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
    letter-spacing: -.02em;
}
.project-group__heading, .lp-group h3, .lp-pack h3, .lp-steps h3 {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
    letter-spacing: -.025em;
}

/* --- The two form buttons -------------------------------------------------
   Both were square uppercase mono blocks, which is the shape the rest of the
   site stopped using. The quotation form sits on mist and takes the accent;
   the application form sits on a dark panel and takes the light accent, so
   the label stays legible against it. */
.rfq-submit, .apply-submit {
    padding: .95rem 1.9rem !important;
    border-radius: 980px !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    transition: background .2s ease, transform .2s ease;
}
.rfq-submit:hover:not(:disabled), .apply-submit:hover:not(:disabled) { transform: translateY(-2px); }

/* --- One "read more" cue --------------------------------------------------
   The small uppercase label at the foot of a card. It was running at .68rem
   w600, .70rem w700, .78rem w700 and .72rem w600 depending on which page built
   the card -- four weights and sizes for one label. .vx-card__cue is the one. */
.project-card__cue, .svc-card span, .lp-card__cue, .opening__cue,
.article-card span, .tool-card span, .cat-card span, .lp-links a span {
    color: var(--accent) !important;
    font: 600 .68rem 'IBM Plex Mono', monospace !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}
/* --- and one small label above a card title ------------------------------- */
.project-card__label, .vx-card__label, .lp-card__label {
    color: var(--accent) !important;
    font: 600 .66rem 'IBM Plex Mono', monospace !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}

/* --- One card shell -------------------------------------------------------
   .svc-card had a 14px radius and a blue-grey border left over from the old
   palette; the catalogue cards were #fafafa at 0px. The system is an 18px
   radius, white, on the shared hairline. */
.svc-card, .article-card, .tool-card, .cap-card, .delivery-card,
.project-card, .product-card, .lp-card, .cat-card {
    border-radius: var(--radius) !important;
    border: 1px solid var(--line) !important;
    background: var(--c-surface) !important;
}

/* --- One measure of body copy ---------------------------------------------
   Section prose ran at 15, 15.2, 16, 16.8, 17.9 and 18px across pages that are
   all doing the same thing: a paragraph under a section heading. .vx-body is
   1.05rem/1.8, and these now match it. Card copy stays smaller -- it is a
   different job -- but is the same size wherever a card appears. */
/* :not([class]) on purpose. Section prose carries no class; everything that
   does -- the revision line under an article, a card's copy, a footnote -- is
   a different job at a deliberately different size, and an unqualified rule
   here reset all of them to the same 1.05rem. */
.lp-section p:not([class]), .lp-section li:not([class]),
.job-section p:not([class]), .job-section li:not([class]),
.lp-quote p:not([class]), .job-apply p:not([class]) {
    font-size: 1.05rem !important;
    line-height: 1.8 !important;
}
.svc-card p, .article-card p, .tool-card p, .cap-card p, .delivery-card p,
.project-card p, .lp-card p, .opening p {
    font-size: .95rem !important;
    line-height: 1.7 !important;
    color: var(--sub) !important;
}

/* --- One card paragraph, one section paragraph ----------------------------
   Card copy was set at .90rem, .92rem and .95rem in three different card
   components; section intros at .98rem, 1rem and 1.125rem. Each of those is
   one job being done at three sizes. */
.vx-card p, .vx-tile p, .vx-brand p, .vx-route p {
    font-size: .95rem !important;
    line-height: 1.7 !important;
}
.px-partner__body p, .project-group__intro, .px-faq__item p,
.shop-route p, .dev-item p {
    font-size: 1.05rem !important;
    line-height: 1.8 !important;
}

/* --- The last card radii --------------------------------------------------
   16px on the calculator panels and the landing cards, 20px on the closing
   panel in the four hand-written articles, 18px everywhere else. All three
   are the same shape drawn three times; --radius is 18px. */
.calc-form, .calc-result, .report-form, .report-preview,
.lp-card, .trust-card, .model-card, .faq-card, .cta-box,
.article-figure img, .proj-shot {
    border-radius: var(--radius) !important;
}
/* Card interiors were variously #fff, #fafafa and transparent. A card sits on
   the page, not in it: white on both the white and the mist band. */
.enquire-box, .info-block, .lp-note, .lp-crit, .lp-pack, .lp-group {
    background: var(--c-surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
}
.lp-section--muted .enquire-box, .lp-section--muted .lp-note { background: var(--c-surface) !important; }

/* A secondary action inside a compact product card is not a full-width page
   CTA. The shared button rule above used to squeeze it out of mobile cards. */
.product-card .card-actions { flex-wrap:wrap; }
.product-card .card-contact { padding:.65rem 1rem !important; font-size:.82rem !important; min-height:44px; }
.product-card .product-body { min-width:0; }
.product-card h3 { overflow-wrap:anywhere; }
@media (max-width:480px) {
    .product-grid { grid-template-columns:minmax(0,1fr); }
    .product-card .product-media { aspect-ratio:4/3; }
}

/* --- Homepage: proof strip ---------------------------------------------
   The numbers and registrations sit straight under the hero now, on the page
   background rather than the dark band they used to close the page in, so
   the credential chips need a border and text colour that read on light and
   dark schemes alike. */
.vx-proof { padding-top: clamp(3rem, 6vw, 4.5rem) !important; padding-bottom: clamp(3rem, 6vw, 4.5rem) !important; border-bottom: 1px solid var(--c-line); }
.vx-proof__line { max-width: 42rem; margin: 0; color: var(--c-ink); font: 500 clamp(1.25rem, 2.4vw, 1.6rem)/1.35 'Space Grotesk', 'Inter', sans-serif; }
.vx-proof .vx-stats { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.vx-proof .vx-credentials { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.vx-proof .vx-credentials span { border-color: var(--c-line-mid); color: var(--c-sub); }

/* --- Homepage: service tiles that are links ------------------------------ */
.vx-tiles--links .vx-tile { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.vx-tiles--links .vx-tile:hover, .vx-tiles--links .vx-tile:focus-visible { border-color: var(--c-accent); }
.vx-tiles--links .vx-tile p { flex: 1; }
.vx-tile__cue { margin-top: 1.1rem; color: var(--c-accent); font: 600 .72rem 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.vx-tiles--links { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.vx-lead a, .vx-body a { color: var(--c-accent); text-underline-offset: 3px; }