/* Research and Development (/research-development), v9 research-development.html. Scoped to .site[data-page="research-development"]. */

/*
   Ported from tax-research-development.css with the lux-v5, v7, v8 and v9 rules that reach this
   page's own sections, flattened: each value below is the one that wins v9's cascade, so the
   reasons are given where the winner is not the obvious rule. The banner, the Solution tabs, the
   closing band, the prev/next pair and the footer are the shared sub-page layer's (site.css) and
   are not repeated here.

   Colours are written out rather than read from site.css's tokens, which keep the home page's
   values: v8 F01 remapped the sub-pages' navy and ink to Proof Grey #545454 and their dark fields
   to Proof Blue #0066B2, and the home page never took that change.

   The markup is ResearchSplit's (the opening band, R&D Center Location) and ResearchCards' (the
   portfolio, the stages), in v9's class names.
*/

/* ---- Section headings ------------------------------------------------------------------------ */

/* An H2 as every v9 sub-page sets one (v8 F05): Montserrat Light in Proof Grey at lux-v5's size.
   The letter-spacing is lux-v5's -.015em, not v8's -.02em: lux-v5's selector carries a :not() and
   outranks v8's. The GenArrow sits on the first line, lifted to the cap height. */
.site[data-page="research-development"] .rd-h2 {
    margin: 0 0 18px;
    font-family: var(--font-body); font-style: normal; font-weight: 300;
    font-size: clamp(1.75rem, 2.8vw, 2.35rem); line-height: 1.22; letter-spacing: -.015em;
    color: #545454;
}
.site[data-page="research-development"] .rd-h2 .ga-sig.lead { margin-bottom: 6px; }
/* Beside the photograph v8 lifts it a pixel less, as it does every heading in a .detail-copy. */
.site[data-page="research-development"] .detail-copy .rd-h2 .ga-sig.lead { margin-bottom: 5px; }

/* The in-text headline under it: Inria Serif Italic in Proof Blue — tax-research-development's
   --teal-deep, which v8 made #0066B2 — and kept out of v8 F06's grey H3 by name. */
.site[data-page="research-development"] .rd-h3 {
    margin: 0 0 10px;
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.3; letter-spacing: 0;
    color: #0066B2;
}

.site[data-page="research-development"] .rd-head { max-width: 760px; margin: 0 0 40px; }
/* v9's 16px floor for sub-page paragraphs (F34) at lux-v5's 1.72, both of which outrank the
   section's own .98rem / 1.8. */
.site[data-page="research-development"] .rd-head p {
    margin: 0;
    font-size: max(16px, 1rem); font-weight: 300; line-height: 1.72; color: #545454;
}

/* ---- The opening band and R&D Center Location -------------------------------------------------- */

/* Both photographs at 4:3, whatever the source's own shape, inside the angled crop .shape-photo
   draws — square-cornered and flat since v8 (F18, F20) — with lux-v5's slow zoom on hover. */
.site[data-page="research-development"] .rd-ph {
    aspect-ratio: 4 / 3;
    border-radius: 0; box-shadow: none; overflow: hidden;
}
.site[data-page="research-development"] .rd-ph .cms-image { height: 100%; }
.site[data-page="research-development"] .rd-ph img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.4s cubic-bezier(.16, 1, .3, 1);
}
.site[data-page="research-development"] .rd-ph:hover img { transform: scale(1.04); }

/* The opening paragraph has no heading over it (v8 F22), so it is set as a lead in the manner of
   Who We Are: larger, Regular rather than Light, centred on the photograph by .detail-hero. */
.site[data-page="research-development"] .rd-lead p {
    margin: 0; max-width: 65ch;
    font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 400; line-height: 1.65; color: #545454;
}
.site[data-page="research-development"] .rd-lead p + p { margin-top: 16px; }

/* The location's photograph on the left at every width; at one column it is above the copy anyway. */
.site[data-page="research-development"] .detail-hero.rd-flip .ph { order: -1; }

/* The address card: white on the band's Soft Light Blue, a teal rule down its left and a pin. Not
   one of v8's two card kinds, so it keeps its frame; only the corner went square (v8 F18). The
   text is Light: v9's Regular for small text names `address` with less weight than v8's Light. */
.site[data-page="research-development"] .rd-addr {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 22px 24px;
    font-style: normal;
    background: #fff; border: 1px solid rgba(10, 137, 170, .16); border-left: 3px solid #0A89AA; border-radius: 0;
}
.site[data-page="research-development"] .rd-pin { flex: none; width: 26px; height: 26px; margin-top: 2px; fill: #0A89AA; }
.site[data-page="research-development"] .rd-addr-txt { min-width: 0; }
.site[data-page="research-development"] .rd-addr-txt p {
    margin: 0;
    font-size: .98rem; font-weight: 300; line-height: 1.8; color: #545454;
}

/* ---- Development Portfolio --------------------------------------------------------------------- */

/* Three equal columns (v9 #3), one from 900px down. lux-v5's editorial gaps. */
.site[data-page="research-development"] .rd-port {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 40px; row-gap: 44px;
}
@media (max-width: 900px) {
    .site[data-page="research-development"] .rd-port { grid-template-columns: minmax(0, 1fr); }
}

/* Each column is v8's editorial kind (F20 a): no fill, no frame, a 2px Innovation Teal rule on top. */
.site[data-page="research-development"] .rd-card {
    min-width: 0; padding: 24px 0 0;
    background: transparent; border: 0; border-top: 2px solid #0A89AA; border-radius: 0; box-shadow: none;
}

/* The column's label: spaced capitals in Proof Blue, never under 12px (v8 F26, F27). */
.site[data-page="research-development"] .rd-lbl {
    margin: 0 0 16px;
    font-family: var(--font-body); font-size: max(12px, .75rem); font-weight: 700; line-height: normal;
    letter-spacing: .16em; text-transform: uppercase; color: #0066B2;
}

/* The product forms: lux-v5 turned the chips into one line of words with a teal dot between each.
   The list is the rich text's own <ul>, so it is styled here rather than given chip classes. */
.site[data-page="research-development"] .rd-forms ul {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0; padding: 0; list-style: none;
}
.site[data-page="research-development"] .rd-forms li {
    margin: 0; padding: 0;
    font-size: max(15px, .95rem); font-weight: 400; line-height: 1.6; color: #545454;
}
.site[data-page="research-development"] .rd-forms li:not(:last-child)::after {
    content: "\00B7"; margin: 0 .7em; font-weight: 700; color: #0A89AA;
}

/* A column made of groups (Pharmaceuticals): each group's name in the display face, a hairline
   between groups (v9 #3), and the list 14px under the name. */
.site[data-page="research-development"] .rd-grp + .rd-grp {
    margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(159, 162, 166, .5);
}
.site[data-page="research-development"] .rd-core-top {
    display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px 12px;
    margin: 0;
}
.site[data-page="research-development"] .rd-sub-t {
    margin: 0 0 4px;
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: 1.1rem; line-height: 1.72; color: #545454;
}
.site[data-page="research-development"] .rd-grp .rd-forms { margin-top: 14px; }

/* "Core Expertise": the small yellow label beside the group's name, all v9 keeps of the dark block
   that once set the column apart. Proof Grey on Genero Yellow (v8 F26), square (lux-v5 §6). */
.site[data-page="research-development"] .rd-badge {
    display: inline-block; padding: 5px 12px;
    font-family: var(--font-body); font-size: .68rem; font-weight: 700; line-height: normal;
    letter-spacing: .12em; text-transform: uppercase;
    color: #545454; background: #FFD41D; border-radius: 0;
}

/* The columns rise one after another as the band comes in (lux-v5 §7). */
.site[data-page="research-development"] .rd-port.reveal > * {
    opacity: 0; transform: translateY(18px);
    transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
}
.site[data-page="research-development"] .rd-port.reveal.in > * { opacity: 1; transform: none; }
.site[data-page="research-development"] .rd-port.reveal.in > :nth-child(2) { transition-delay: .08s; }
.site[data-page="research-development"] .rd-port.reveal.in > :nth-child(3) { transition-delay: .16s; }
.site[data-page="research-development"] .rd-port.reveal.in > :nth-child(n+4) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
    .site[data-page="research-development"] .rd-port.reveal > * { opacity: 1; transform: none; transition: none; }
}

/* ---- Development Capabilities ------------------------------------------------------------------ */

/* Five stages across, three from 1100px, two from 760px, one from 480px. */
.site[data-page="research-development"] .rd-steps {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px;
    margin: 0; padding: 0; list-style: none;
    counter-reset: rd-step;
}
@media (max-width: 1100px) {
    .site[data-page="research-development"] .rd-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .site[data-page="research-development"] .rd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .site[data-page="research-development"] .rd-steps { grid-template-columns: minmax(0, 1fr); }
}

/* Each stage is v8's panel kind (F20 b): Soft Light Blue, no frame, no shadow, square. */
.site[data-page="research-development"] .rd-step {
    position: relative; display: flex; flex-direction: column;
    padding: 22px 20px 24px;
    background: #EDF6F7; border: 0; border-radius: 0; box-shadow: none;
    counter-increment: rd-step;
}

/* The number is the stage's marker since v8 F21 took the icons away: 01–05 in Inria Serif Italic,
   counted rather than written, then the short Genero Yellow rule the guideline uses as a data
   accent (p.24) — drawn under the figure rather than as a third flex child, so the stage's own
   markup stays the number, the name and the line. */
.site[data-page="research-development"] .rd-num {
    display: block;
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: 2rem; line-height: 1; color: #0A89AA;
}
.site[data-page="research-development"] .rd-num::before { content: counter(rd-step, decimal-leading-zero); }
.site[data-page="research-development"] .rd-num::after {
    content: ""; display: block; width: 26px; height: 3px; margin: 14px 0;
    border-radius: 2px; background: #FFD41D;
}

/* The stage's name as v8 F06 sets an in-text H3: Inria Serif Italic, Proof Grey, 1.25rem. */
.site[data-page="research-development"] .rd-name {
    margin: 0 0 8px;
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: 1.25rem; line-height: 1.3; letter-spacing: 0; color: #545454;
}
/* lux-v5's 15px floor for text in a card outranks v9's 16px here; Regular for its size (v9 F34). */
.site[data-page="research-development"] .rd-step p {
    margin: 0;
    font-size: max(15px, .94rem); font-weight: 400; line-height: 1.7; color: #545454;
}