/* 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; }
}