/* ==========================================================================
   Alif Construction — theme
   The approved design's visual language, expressed once so every page shares
   it. Colours, radii, type and motion all come from the design handoff.

   Scale lives in one place: the --s* type steps and --section-y rhythm below.
   Adjust those and the whole site rescales together.
   ========================================================================== */

:root {
    /* ---- Colour ---- */
    --midnight: #0B2447;
    --midnight-hover: #163358;
    --mist: #EDEFF3;
    --zebra: #F7F8FA;
    --ink: #4B4B4B;
    --muted: #8A8A8A;
    --hairline: #E0E0E0;
    --field-border: #C9CFD9;
    --silver: #C8CDD6;
    --sky: #8FB3E8;
    --on-midnight: rgba(255, 255, 255, 0.84);
    --on-midnight-label: rgba(255, 255, 255, 0.6);

    /* ---- Layout ---- */
    --maxw: 1240px;
    --gutter: clamp(18px, 2.4vw, 30px);
    --section-y: clamp(36px, 4vw, 60px);

    /* ---- Type scale ----
       Set 20% below the design's original maxima: the composition is
       unchanged, it simply reads at a comfortable size on a normal screen
       at 100% browser zoom. */
    --s-hero: clamp(27px, 3.6vw, 50px);
    --s-h1: clamp(24px, 3.2vw, 43px);
    --s-h2: clamp(21px, 2.7vw, 36px);
    --s-h2-sm: clamp(19px, 2.3vw, 31px);
    --s-h3: clamp(15.5px, 1.3vw, 18px);
    --s-quote: clamp(17px, 2vw, 26px);
    --s-stat: clamp(26px, 2.5vw, 37px);
    --s-body: 14.5px;
    --s-small: 13px;
    --s-tiny: 11.5px;
    --s-label: 10px;

    /* ---- Radius ---- */
    --r-chip: 14px;
    --r-card: 18px;
    --r-frame: 22px;
    --r-band: 26px;
    --r-pill: 30px;

    /* ---- First screen: hero plus the enlistment strip and the metro line
       must land inside one viewport, so the hero is sized from what is
       left after the fixed chrome. ---- */
    --nav-h: 50px;
    --chrome: 88px;
    --strip: 76px;
    --rail: 60px;
    --hero-min: 440px;
    --hero-max: 860px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: #FFFFFF;
    color: var(--ink);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: var(--s-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Archivo and Plex carry no Bengali letters. These faces borrow Noto Sans
   Bengali for the Bengali range only, under the same family names, so every
   heading and label written in Archivo renders in Noto rather than in
   whatever fallback a given phone happens to have. */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notosansbengali/v33/Cn-fJsCGWQxOjaGwMQ6fIiMywrNJIky6nvd8BjzVMvJx2mc4I3mYvNY.woff2) format('woff2');
    unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+200C-200D, U+25CC;
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notosansbengali/v33/Cn-fJsCGWQxOjaGwMQ6fIiMywrNJIky6nvd8BjzVMvJx2mc4I3mYvNY.woff2) format('woff2');
    unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+200C-200D, U+25CC;
}
/* Bengali sets taller than Latin: give it a little more line height */
html[lang="bn"] body { line-height: 1.7; }
html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] h3 { line-height: 1.3; letter-spacing: 0; }
/* Tracking pulls Bengali letters and conjuncts apart, so none in Bangla */
html[lang="bn"] body * { letter-spacing: 0 !important; }

html[lang="bn"] body { font-family: 'Noto Sans Bengali', 'IBM Plex Sans', system-ui, sans-serif; }

a { color: var(--midnight); text-underline-offset: 5px; }
a:hover { color: var(--ink); }
img, video { max-width: 100%; }
::selection { background: var(--midnight); color: #FFFFFF; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    color: var(--midnight);
    letter-spacing: -0.02em;
    line-height: 1.08;
    margin: 0;
}

h1 { font-size: var(--s-h1); }
h2 { font-size: var(--s-h2); }
h3 { font-size: var(--s-h3); letter-spacing: -0.01em; line-height: 1.25; }
p { margin: 0; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--midnight); color: #FFFFFF; padding: 12px 20px; font-weight: 600; text-decoration: none; }
.skip-link:focus { left: 0; }

/* ==========================================================================
   Motion — carried over from the design, ease-out only
   ========================================================================== */

@keyframes opalMoveUp { 0% { transform: translateY(80px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes opalMoveLeft { 0% { transform: translateX(80px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes opalMoveRight { 0% { transform: translateX(-80px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes opalHelix { 0% { transform: rotateY(-180deg); opacity: 0; perspective: 1300px; } 100% { transform: rotateY(0); opacity: 1; } }
@keyframes panScape { from { transform: translateX(0) scale(1.02); } to { transform: translateX(-8%) scale(1.06); } }
@keyframes spinRing { to { transform: rotate(360deg); } }
@keyframes train { from { transform: translateX(calc(100vw + 60px)); } to { transform: translateX(-1120px); } }

/* Hidden only once we know scripting works, so a script failure can never
   leave the page blank.

   Opacity rather than visibility: a visibility:hidden subtree also defers its
   lazy images, so cards could reveal before their photograph had started
   loading. With opacity the images fetch immediately and the entrance
   animation is unchanged. */
.js [data-oa] { opacity: 0; pointer-events: none; }
.js [data-oa][data-oa-in] {
    opacity: 1;
    pointer-events: auto;
    animation-duration: 0.75s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-oa="up"][data-oa-in] { animation-name: opalMoveUp; }
[data-oa="left"][data-oa-in] { animation-name: opalMoveLeft; }
[data-oa="right"][data-oa-in] { animation-name: opalMoveRight; }
[data-oa="helix"][data-oa-in] { animation-name: opalHelix; }

[data-train] { max-width: none; animation: train var(--train-dur, 17s) linear infinite; }
[data-media], [data-media] img { transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
[data-card]:hover [data-media] { transform: scale(1.04); }

/* ==========================================================================
   Layout scaffolding
   ========================================================================== */

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.band { padding: var(--section-y) 0; }
.band--mist { background: var(--mist); }
.band--top0 { padding-top: 0; }
.band--tight { padding-bottom: calc(var(--section-y) * 0.5); }

.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 22px 54px; align-items: start; }

/* The heading column is short while the column it introduces is long, so the
   left side would otherwise leave a tall band of empty page. Pinning the
   heading keeps it beside the content it belongs to and removes the gap.
   Opt out with .split--flat where both columns carry real weight. */
@media (min-width: 981px) {
    .split:not(.split--even):not(.split--flat) > :first-child {
        position: sticky;
        top: calc(var(--nav-h) + 22px);
    }
}
.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* A section head that sits above its content rather than beside it. Used
   wherever a three-word heading would otherwise face a long column and leave
   a tall band of empty page down one side. */
.sec-head { text-align: center; max-width: 46rem; margin-left: auto; margin-right: auto; }
.sec-head h2 { margin-top: 16px; }
.sec-head .lead { margin: 14px auto 0; }

/* Body copy in two columns, so a few paragraphs fill the measure instead of
   running down one half of the page. */
.prose--cols { columns: 2; column-gap: clamp(30px, 4vw, 60px); }
.prose--cols p { break-inside: avoid; max-width: none; margin: 0 0 14px; }
.prose--cols p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .prose--cols { columns: 1; } }

/* Centres a block that reads badly at full width, such as a Q&A list. */
.measure { max-width: 880px; margin-left: auto; margin-right: auto; }

.stack > * + * { margin-top: 14px; }
.prose p + p { margin-top: 14px; }
.prose p { max-width: 62ch; }
.lead { font-size: calc(var(--s-body) + 1.5px); line-height: 1.65; color: var(--ink); max-width: 56ch; }

/* ==========================================================================
   Repeated pieces
   ========================================================================== */

/* Eyebrow pill: outlined capsule with an optional dot */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    font-size: var(--s-label);
    letter-spacing: 0.1em;
    color: var(--midnight);
    text-transform: uppercase;
    border: 0.8px solid rgba(11, 36, 71, 0.4);
    border-radius: 20px;
    padding: 6px 14px;
}
.eyebrow--solid { background: #FFFFFF; }
.eyebrow--rev { color: var(--on-midnight-label); border-color: rgba(255, 255, 255, 0.3); }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Pill CTA: midnight capsule with a circular chip that rotates on hover */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--midnight);
    border: 0;
    border-radius: var(--r-pill);
    color: #FFFFFF;
    text-decoration: none;
    font-family: 'Archivo', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    padding: 4px 4px 4px 18px;
    cursor: pointer;
    transition: background 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    white-space: nowrap;
}
.btn:hover { background: var(--midnight-hover); color: #FFFFFF; }
.btn .chip {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--midnight);
    flex: 0 0 auto;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.btn:hover .chip { transform: rotate(45deg); }
.btn--rev { background: #FFFFFF; color: var(--midnight); }
.btn--rev:hover { background: #E8E9EC; color: var(--midnight); }
.btn--rev .chip { background: var(--midnight); color: #FFFFFF; }
.btn--glass { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.45); color: #FFFFFF; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn--glass:hover { background: rgba(255, 255, 255, 0.2); color: #FFFFFF; }
.btn--glass .chip { background: #FFFFFF; color: var(--midnight); }
.btn--ghost { background: transparent; border: 0.8px solid rgba(11, 36, 71, 0.35); color: var(--midnight); }
.btn--ghost:hover { background: rgba(11, 36, 71, 0.05); border-color: var(--midnight); color: var(--midnight); }
.btn--ghost .chip { background: var(--midnight); color: #FFFFFF; }

/* Corner bite fillet, used where a white shape notches into a photograph */
.fillet {
    position: absolute;
    width: 30px;
    height: 30px;
    -webkit-mask: radial-gradient(circle 30px at 100% 0, transparent 28.8px, #000 30px);
    mask: radial-gradient(circle 30px at 100% 0, transparent 28.8px, #000 30px);
}

/* ---- Detail page header: title beside a capped photograph ---- */
.dhead { padding: clamp(22px, 3vw, 40px) 0 clamp(26px, 3.4vw, 46px); }
.dhead__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.dhead h1 { margin-top: 14px; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.08; max-width: 24ch; text-wrap: balance; }
.dhead .lead { margin-top: 14px; max-width: 52ch; }
.dhead__meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; font-size: var(--s-small); color: var(--muted); }
.dhead__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.dhead__chips li { padding: 7px 13px; border-radius: 30px; background: var(--mist); font-size: 12px; font-weight: 600; color: var(--midnight); }
.dhead__media { position: relative; height: clamp(230px, 27vw, 380px); border-radius: var(--r-band); }
.dhead__status { position: absolute; top: 16px; left: 16px; z-index: 2; display: inline-flex; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #FFFFFF; background: var(--midnight); border-radius: 30px; padding: 6px 13px; }

/* ---- Detail page modules ----
   Content lives in cards on a white page. The rows are composed so that
   only cards which can stretch are paired side by side (a photo grid that
   fills, beside text); long lists and the delivery commitments run full
   width. That way no card is left with a tall empty panel beside a
   longer neighbour. */
.mods { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); align-items: stretch; }
.mod {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 0.8px solid rgba(11, 36, 71, 0.1);
    border-radius: var(--r-band);
    box-shadow: 0 1px 2px rgba(11, 36, 71, 0.04), 0 22px 46px -34px rgba(11, 36, 71, 0.4);
    padding: clamp(22px, 2.6vw, 36px);
}
.mod--wide { grid-column: span 7; }
.mod--narrow { grid-column: span 5; }
.mod--full { grid-column: span 12; }
.mod--dark { border: 0; }
.mod--dark h2, .mod--dark h3, .mod--dark b { color: #FFFFFF; }
.mod--dark > p, .mod--dark li { color: var(--on-midnight); }
.mod__head { margin-bottom: clamp(14px, 1.6vw, 22px); }
.mod__head h3 { margin-top: 10px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: var(--s-h2-sm); line-height: 1.22; letter-spacing: -0.015em; }
.mod__headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: clamp(18px, 2vw, 26px); }
.mod__headrow .mod__head { margin-bottom: 0; }
.mod__rule { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-top: 0.8px solid var(--hairline); }
.mod__rule:first-of-type { border-top: 0; padding-top: 0; }
.mod--dark .mod__rule { border-color: rgba(255, 255, 255, 0.14); }
.mod__rule b { display: block; font-size: var(--s-small); }
.mod__rule p { margin-top: 3px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.mod--dark .mod__rule p { color: var(--on-midnight-label); }
.mod__fill { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mod__foot { margin-top: auto; padding-top: clamp(18px, 2vw, 26px); }

/* Photographs that fill whatever height their card is given */
.mod__grid { flex: 1; min-height: 200px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1.5fr 1fr; gap: 10px; }
.mod__grid figure { margin: 0; border-radius: var(--r-card); overflow: hidden; position: relative; min-height: 90px; }
.mod__grid figure:first-child { grid-column: 1 / -1; }
.mod__grid--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.mod__grid--2 { grid-template-rows: 1fr; }
.mod__grid--1 figure:first-child, .mod__grid--2 figure:first-child { grid-column: auto; }
.mod__strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mod__strip figure { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; position: relative; }

/* Commitments or delivery steps laid across the full width */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.steps__item { position: relative; padding: 18px 18px 20px; border-radius: var(--r-card); background: rgba(255, 255, 255, 0.06); border: 0.8px solid rgba(255, 255, 255, 0.12); }
.steps__item b { display: block; margin-top: 14px; font-family: 'Archivo', sans-serif; font-size: 15px; letter-spacing: -0.01em; }
.steps__item p { margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: var(--on-midnight-label); }
.steps__num { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.14em; color: #8FB3E8; }
.steps--light .steps__item { background: var(--mist); border-color: transparent; }
.steps--light .steps__item b { color: var(--midnight); }
.steps--light .steps__item p { color: var(--ink); }
.steps--light .steps__num { color: var(--muted); }

/* A long work scope reads in three columns, a short one in two */
.scope--three { columns: 3; column-gap: clamp(24px, 3vw, 44px); }
.scope--three li, .scope--cols li { break-inside: avoid; }

/* Questions in two columns; each opens in place */
.faqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); align-items: start; }

/* Key facts as a row of cells */
.factrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; }
.factrow__cell { padding: 4px 22px; border-left: 0.8px solid var(--hairline); }
.factrow__cell:first-child { padding-left: 0; border-left: 0; }
.factrow__label { display: block; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.factrow__value { display: block; margin-top: 6px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: var(--s-h3); letter-spacing: -0.01em; color: var(--midnight); }

@media (max-width: 1080px) {
    .scope--three { columns: 2; }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    .dhead__grid { grid-template-columns: 1fr; }
    .dhead__media { height: clamp(210px, 52vw, 340px); }
    .mod--wide, .mod--narrow { grid-column: span 12; }
    .faqs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .scope--three, .scope--cols { columns: 1; }
    .steps { grid-template-columns: 1fr; }
    .mod__strip { grid-template-columns: 1fr 1fr; }
    .mod__strip figure:first-child { grid-column: 1 / -1; }
    .factrow { grid-template-columns: 1fr 1fr; gap: 16px 0; }
    .factrow__cell { padding: 0 14px; }
    .factrow__cell:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* Breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--s-small); color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--midnight); text-decoration: underline; }
.crumbs [aria-current] { color: var(--midnight); font-weight: 600; }

/* Inner page header */
.pagehead { padding: clamp(26px, 3.4vw, 44px) 0 clamp(20px, 2.6vw, 32px); }
.pagehead h1 { margin-top: 14px; max-width: 20ch; }
.pagehead .lead { margin-top: 16px; }

/* Photo frame */
.frame { position: relative; border-radius: var(--r-band); overflow: hidden; }
.frame--notch { border-radius: 0 var(--r-band) var(--r-band) var(--r-band); }

/* Photo slot: a real image, or a captioned placeholder naming the shot needed */
.shot { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.shot > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot--ratio { aspect-ratio: var(--ratio, 3 / 2); }
/* An empty slot has no picture to give it height. In a container that only
   sets a minimum height, it takes that minimum, so the blank tile still shows
   until a photograph is uploaded. */
.shot:has(> .shot__blank) { min-height: inherit; }
.ph {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 12px;
    background: rgba(127, 127, 127, 0.08);
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.35;
}
.ph::after { content: ""; position: absolute; inset: 0; border: 1.5px dashed currentColor; opacity: 0.3; pointer-events: none; }

/* A slot with no photograph yet: a quiet branded tile in the site's midnight,
   a faint drawing grid and the Alif mark, so an empty slot looks deliberate.
   The shot brief (.ph--brief) shows on top only to someone signed in to the
   admin. */
.shot__blank {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background:
        linear-gradient(rgba(143, 179, 232, 0.07) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(90deg, rgba(143, 179, 232, 0.07) 1px, transparent 1px) 0 0 / 28px 28px,
        radial-gradient(120% 90% at 20% 0%, #1B3A63 0%, var(--midnight) 62%);
}
.shot__mark { width: clamp(34px, 18%, 64px); height: auto; opacity: 0.22; }
.ph--brief { background: rgba(4, 12, 26, 0.55); color: rgba(255, 255, 255, 0.88); }
.ph svg { opacity: 0.45; }
.ph span { max-width: 90%; opacity: 0.8; }
/* Stock imagery is badged so none of it reaches launch unnoticed */
.is-stock::after {
    content: "Stock";
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 3;
    background: rgba(11, 36, 71, 0.72);
    color: #FFFFFF;
    font-family: 'Archivo', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 4px;
    pointer-events: none;
}

/* Icon disc, beside a heading or a contact row */
.disc { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--midnight); color: #FFFFFF; flex-shrink: 0; }
.disc--lg { width: 46px; height: 46px; }
.disc--soft { background: rgba(255, 255, 255, 0.08); color: var(--sky); }

/* Mist tile */
.tile { background: var(--mist); border-radius: var(--r-frame); padding: 21px 22px; }
.tile--white { background: #FFFFFF; border: 0.8px solid var(--hairline); }
.tile h3 { margin-top: 14px; }
.tile p { margin-top: 8px; color: var(--ink); font-size: var(--s-small); line-height: 1.6; }
.tile__num { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.1em; color: var(--muted); }

/* Facts strip: the tender-paperwork motif on project pages */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 0.8px solid var(--hairline); border-radius: var(--r-card); overflow: hidden; }
.facts__cell { padding: 17px 19px; border-right: 0.8px solid var(--hairline); }
.facts__cell:last-child { border-right: 0; }
.facts__label { display: block; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: var(--s-label); letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.facts__value { display: block; margin-top: 8px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--midnight); }

/* Scope list: one circled check per row, hairline between */
.scope { list-style: none; margin: 0; padding: 0; }
.scope li { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; border-bottom: 0.8px solid var(--hairline); }
.scope li:last-child { border-bottom: 0; }
.scope--cols { columns: 2; column-gap: clamp(28px, 4vw, 56px); }
.scope--cols li { break-inside: avoid; }
@media (max-width: 860px) { .scope--cols { columns: 1; } }
.scope svg { flex-shrink: 0; color: var(--midnight); margin-top: 2px; }
.scope b { color: var(--midnight); font-weight: 600; }

/* Registrations table, typeset like tender paperwork */
.record { width: 100%; border-collapse: collapse; border: 0.8px solid var(--hairline); border-radius: var(--r-card); overflow: hidden; }
.record tr:nth-child(even) { background: var(--zebra); }
.record th, .record td { text-align: left; padding: 11px 17px; border-bottom: 0.8px solid var(--hairline); vertical-align: top; }
.record tr:last-child th, .record tr:last-child td { border-bottom: 0; }
.record th { width: 176px; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: var(--s-label); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.record td { font-weight: 600; color: var(--midnight); font-size: var(--s-small); }

/* Disclosure accordion: the chip's plus rotates 45 degrees to a cross */
.faq { border-bottom: 0.8px solid var(--hairline); }
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    cursor: pointer;
    list-style: none;
    padding: 15px 0;
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--midnight);
    min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__chip { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--midnight); color: #FFFFFF; flex-shrink: 0; transition: transform 0.3s ease-out; }
.faq[open] .faq__chip { transform: rotate(45deg); }
.faq__body { padding: 0 0 20px; max-width: 70ch; color: var(--ink); }

/* ---- Surfaces ----
   The midnight bands used to share one pasted silhouette. Each now gets
   depth from layered light, plus line art of its own drawn at low opacity:
   a drawing sheet for tenders, survey contours for delivery, a sketchbook
   for enquiries, a single-line diagram for the electrical licence, and an
   isometric drafting grid for the calls to action. The art drifts slowly. */
.surface {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #FFFFFF;
    background: var(--surface-bg);
}
:root {
    --surface-bg:
        radial-gradient(880px 420px at 92% -12%, rgba(143, 179, 232, 0.24), transparent 62%),
        radial-gradient(760px 420px at -8% 112%, rgba(58, 104, 184, 0.30), transparent 62%),
        linear-gradient(135deg, #0D2A52 0%, #0B2447 45%, #071831 100%);
}
/* Blocks that set their own flat midnight give way to the surface */
.outcome.surface, .deck.surface, .mod.surface { background: var(--surface-bg); }
.surface::before {
    content: "";
    position: absolute;
    inset: -4%;
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    animation: surfaceDrift 40s ease-in-out infinite alternate;
}
.surface::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 0.8px rgba(143, 179, 232, 0.18);
}
/* The flagship, tender and delivery bands were contour and drawing-sheet
   line art, which read as a sports pitch behind the text. They are now a
   quiet field: soft light from two corners and a fine dot grid that only
   shows towards the top right, well clear of the copy on the left. */
.surface--blueprint::before,
.surface--contours::before {
    inset: 0;
    background-image: radial-gradient(rgba(190, 210, 240, 0.16) 1px, transparent 1.4px);
    background-size: 22px 22px;
    background-repeat: repeat;
    background-position: 0 0;
    -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 75%);
    mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 75%);
    animation: none;
}
.surface.surface--blueprint, .surface.surface--contours {
    background:
        radial-gradient(900px 480px at 100% 0%, rgba(120, 160, 220, 0.20), transparent 60%),
        radial-gradient(700px 420px at 0% 100%, rgba(40, 84, 150, 0.28), transparent 65%),
        linear-gradient(160deg, #0F2C55 0%, #0B2447 50%, #081B36 100%);
}
.surface--circuit::before { background-image: url("../assets/bg/circuit.svg"); background-position: right center; }
.surface--doodle::before {
    background-image: url("../assets/bg/doodle.svg");
    background-repeat: repeat;
    background-size: 460px 460px;
    animation: doodleDrift 60s linear infinite;
}
.surface--iso::before {
    background-image: url("../assets/bg/isogrid.svg");
    background-repeat: repeat;
    background-size: 180px auto;
    -webkit-mask-image: linear-gradient(100deg, transparent 8%, #000 55%, #000 100%);
    mask-image: linear-gradient(100deg, transparent 8%, #000 55%, #000 100%);
}
@keyframes surfaceDrift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-2%, 1.5%, 0) scale(1.04); } }
@keyframes doodleDrift { from { background-position: 0 0; } to { background-position: 460px -460px; } }

/* A slow orb of light that wanders across a surface */
.orb {
    position: absolute;
    z-index: -1;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(143, 179, 232, 0.28), rgba(143, 179, 232, 0) 68%);
    filter: blur(8px);
    animation: orbWander 22s ease-in-out infinite alternate;
}
@keyframes orbWander { 0% { transform: translate(0, 0); } 50% { transform: translate(-18vw, 40px); } 100% { transform: translate(-6vw, -30px); } }

/* The construction skyline as a true silhouette. It is painted through a
   mask, so it takes any colour and has no box around it. */
.skyline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    height: clamp(110px, 16vw, 210px);
    pointer-events: none;
    background: currentColor;
    -webkit-mask: url("../assets/bg/skyline-mask.webp") 0 100% / auto 100% repeat-x;
    mask: url("../assets/bg/skyline-mask.webp") 0 100% / auto 100% repeat-x;
    animation: skylinePan 80s linear infinite;
}
@keyframes skylinePan { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; } to { -webkit-mask-position: -1400px 100%; mask-position: -1400px 100%; } }

/* ---- Call to action, at the foot of every page ---- */
.cta {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(26px, 4vw, 60px);
    border-radius: var(--r-band);
    padding: clamp(32px, 4.4vw, 62px) clamp(22px, 4vw, 58px) clamp(96px, 11vw, 150px);
}
.cta .skyline { color: rgba(143, 179, 232, 0.14); }
.cta h2 { margin-top: 16px; color: #FFFFFF; font-size: var(--s-h2); max-width: 17ch; text-wrap: balance; }
.cta__text { margin-top: 14px; color: var(--on-midnight); max-width: 46ch; font-size: 15px; line-height: 1.65; }
.cta__points { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.cta__points li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px 7px 10px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.07);
    border: 0.8px solid rgba(255, 255, 255, 0.12);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.86);
}
.cta__points li::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: #8FB3E8; box-shadow: 0 0 0 4px rgba(143, 179, 232, 0.18); }
.cta__panel {
    position: relative;
    display: grid;
    gap: 12px;
    padding: clamp(20px, 2.4vw, 28px);
    border-radius: var(--r-card);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
    border: 0.8px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.cta__panel-label { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.cta__panel .btn { width: 100%; justify-content: space-between; }
.cta__line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding-top: 12px; border-top: 0.8px solid rgba(255, 255, 255, 0.12); font-size: 12.5px; color: rgba(255, 255, 255, 0.72); }
.cta__line a { color: #FFFFFF; font-weight: 600; text-decoration: none; }
.cta__line a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---- Explore: sideways links to sibling services or projects ---- */
.explore__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.explore__head h2 { margin-top: 14px; font-size: var(--s-h2-sm); max-width: 22ch; }
.explore__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    gap: 16px;
    margin-top: clamp(20px, 2.6vw, 30px);
    overflow-x: auto;
    padding: 4px 2px 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.explore__card {
    position: relative;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    border-radius: var(--r-card);
    background: #FFFFFF;
    border: 0.8px solid rgba(11, 36, 71, 0.1);
    box-shadow: 0 1px 2px rgba(11, 36, 71, 0.04);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s, border-color 0.45s;
}
.explore__card:hover, .explore__card:focus-visible { transform: translateY(-6px); border-color: rgba(11, 36, 71, 0.2); box-shadow: 0 22px 44px -22px rgba(11, 36, 71, 0.42); }
.explore__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist); }
.explore__media > * { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.explore__card:hover .explore__media > * { transform: scale(1.06); }
.explore__body { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex: 1; padding: 16px 16px 18px 18px; }
.explore__num { display: block; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; color: var(--muted); }
.explore__title { display: block; margin-top: 6px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15.5px; line-height: 1.28; letter-spacing: -0.01em; color: var(--midnight); text-wrap: balance; }
.explore__chip { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--midnight); color: #FFFFFF; transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.explore__card:hover .explore__chip { transform: rotate(45deg); }

@media (max-width: 980px) {
    .cta { grid-template-columns: 1fr; }
    .explore__track { grid-auto-columns: minmax(230px, 74%); }
}

/* Midnight statement block, for a project outcome */
.outcome { background: var(--midnight); border-radius: var(--r-band); padding: clamp(24px, 3.2vw, 42px); color: #FFFFFF; }
.outcome h2 { color: #FFFFFF; }
.outcome p { color: var(--on-midnight); margin-top: 14px; max-width: 60ch; }

/* Related pills, linking sideways to sibling pages */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0.8px solid rgba(11, 36, 71, 0.3);
    border-radius: var(--r-pill);
    padding: 8px 15px;
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: var(--midnight);
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s;
}
.pill:hover { background: rgba(11, 36, 71, 0.05); border-color: var(--midnight); color: var(--midnight); }

/* Form fields */
.field {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid var(--field-border);
    border-radius: var(--r-pill);
    padding: 11px 19px;
    box-shadow: 0 2px 10px rgba(11, 36, 71, 0.06);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px; /* 16px keeps iOS from zooming the page on focus */
    color: var(--ink);
}
.field--area { border-radius: 22px; resize: vertical; }
.field:focus { outline: 2px solid var(--midnight); outline-offset: 1px; }
.note { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.alert { padding: 13px 18px; border-radius: var(--r-chip); font-size: var(--s-small); }
.alert--ok { background: #E8F3EC; border: 1px solid #B9DCC6; color: #1C5433; }
.alert--bad { background: #FBECEC; border: 1px solid #E6C0C0; color: #7A2222; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
    .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .facts__cell:nth-child(2) { border-right: 0; }
    .facts__cell:nth-child(-n+2) { border-bottom: 0.8px solid var(--hairline); }
}

@media (max-width: 980px) {
    .split, .split--even { grid-template-columns: 1fr; gap: 26px; }
    .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .record th { width: 150px; }
}

@media (max-width: 640px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
    .facts { grid-template-columns: 1fr; }
    .facts__cell { border-right: 0; border-bottom: 0.8px solid var(--hairline); }
    .facts__cell:last-child { border-bottom: 0; }
    .record, .record tbody, .record tr, .record th, .record td { display: block; width: auto; }
    .record th { padding-bottom: 0; }
    .record td { padding-top: 6px; }
}

/* ---- Phase explorer: a long scope, shown one phase at a time ---- */
.phases { display: grid; grid-template-columns: minmax(250px, 0.9fr) minmax(0, 2.1fr); gap: clamp(18px, 2.4vw, 34px); align-items: start; }
.phases__rail { position: relative; display: grid; gap: 8px; }
.phases__tab {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    border: 0.8px solid rgba(11, 36, 71, 0.1);
    border-radius: var(--r-card);
    background: #FFFFFF;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: background 0.35s, border-color 0.35s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s;
}
.phases__tab:hover { border-color: rgba(11, 36, 71, 0.24); transform: translateX(3px); }
.phases__tab[aria-selected="true"] { background: var(--midnight); border-color: var(--midnight); box-shadow: 0 18px 36px -22px rgba(11, 36, 71, 0.7); }
.phases__num {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--mist);
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--midnight);
    transition: background 0.35s, color 0.35s;
}
.phases__tab[aria-selected="true"] .phases__num { background: #8FB3E8; color: var(--midnight); }
.phases__label { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--midnight); }
.phases__count { font-size: 11.5px; color: var(--muted); }
.phases__tab[aria-selected="true"] .phases__label { color: #FFFFFF; }
.phases__tab[aria-selected="true"] .phases__count { color: rgba(255, 255, 255, 0.62); }
.phases__panel {
    border-radius: var(--r-band);
    padding: clamp(22px, 2.8vw, 36px);
    background: linear-gradient(160deg, #F4F6FA 0%, #EDEFF3 100%);
    border: 0.8px solid rgba(11, 36, 71, 0.06);
    animation: phaseIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.phases__panel[hidden] { display: none; }
@keyframes phaseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.phases__step { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.phases__intro h3 { margin-top: 8px; font-size: var(--s-h2-sm); letter-spacing: -0.015em; }
.phases__intro p { margin-top: 8px; max-width: 56ch; color: var(--ink); font-size: var(--s-small); }
.phases__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: clamp(18px, 2vw, 24px); }
.phases__card { padding: 18px; border-radius: var(--r-card); background: #FFFFFF; box-shadow: 0 1px 2px rgba(11, 36, 71, 0.05); color: var(--midnight); }
.phases__card b { display: block; margin-top: 10px; font-family: 'Archivo', sans-serif; font-size: 15px; letter-spacing: -0.01em; }
.phases__card p { margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: var(--ink); }

/* The phases advance on their own. The bar along the foot of the open tab
   is the timer: when its fill ends, the script opens the next phase.
   Hovering or focusing the explorer, or scrolling it out of view, holds it. */
.phases[data-autoplay] .phases__tab { overflow: hidden; }
.phases[data-autoplay] .phases__tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: #8FB3E8;
    transform-origin: left center;
    animation: phaseTimer 6s linear both;
}
.phases[data-autoplay]:hover .phases__tab::after,
.phases[data-autoplay]:has(:focus-visible) .phases__tab::after,
.phases[data-autoplay]:not(.is-onscreen) .phases__tab::after { animation-play-state: paused; }
@keyframes phaseTimer { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Without script every phase shows, stacked */
html:not(.js) .phases__panel[hidden] { display: block; }

@media (max-width: 980px) {
    .phases { grid-template-columns: 1fr; }
    .phases__rail { grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
    .phases__tab { scroll-snap-align: start; }
    .phases__tab:hover { transform: none; }
}

/* A white tile on a white page needs an edge */
.tile--white { border: 0.8px solid rgba(11, 36, 71, 0.1); }

/* ---- Home: tender band rows, delivery deck, enquiry card ---- */
.fin-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 -14px;
    padding: 13px 14px;
    border-top: 0.8px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    transition: background 0.35s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.fin-row:hover { background: rgba(255, 255, 255, 0.06); transform: translateX(4px); }
.orb--late { animation-delay: -11s; animation-direction: alternate-reverse; background: radial-gradient(circle, rgba(88, 132, 214, 0.34), rgba(88, 132, 214, 0) 68%); }

.deck.surface .glass { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.04) 60%, rgba(255, 255, 255, 0.02) 100%); }
.deck.surface .glass::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 30%, rgba(143, 179, 232, 0.16) 50%, transparent 70%) no-repeat;
    background-size: 250% 100%;
    background-position: 120% 0;
    transition: background-position 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.deck.surface .glass:hover::after { background-position: -20% 0; }

.enq-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    max-width: 860px;
    margin: 0 auto;
    padding: clamp(30px, 4.4vw, 58px) clamp(20px, 3.4vw, 58px) clamp(70px, 8vw, 110px);
    border-radius: var(--r-band);
    background: #FFFFFF;
    text-align: center;
    color: var(--ink);
    box-shadow: 0 40px 80px -40px rgba(3, 10, 24, 0.7);
}
.enq-card__skyline { color: #E8ECF3; height: clamp(90px, 11vw, 140px); }

/* ---- Credential chips: wrap onto two lines on a phone rather than run off ---- */
.cred {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    align-self: flex-start;
    max-width: 100%;
    margin-top: 11px;
    padding: 6px 11px;
    border-radius: 12px;
    background: var(--mist);
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: 1.35;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--midnight);
    white-space: normal;
}
.cred svg { flex-shrink: 0; margin-top: 1px; }
.cred--dark { background: var(--midnight); color: #FFFFFF; }
.cred--rev { background: #FFFFFF; color: var(--midnight); }

/* ---- Electrical licence: a single-line diagram behind a licence seal ---- */
.licence {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 18px clamp(24px, 4vw, 60px);
    margin-top: 20px;
    padding: clamp(26px, 3.6vw, 48px);
    border-radius: var(--r-band);
}
.licence__body h3 { margin-top: 14px; color: #FFFFFF; font-size: clamp(19px, 1.9vw, 25px); line-height: 1.25; max-width: 30ch; }
.licence__body p { margin-top: 10px; color: var(--on-midnight); font-size: var(--s-small); line-height: 1.65; max-width: 60ch; }
.licence__facts { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.licence__facts li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255, 255, 255, 0.86); }
.licence__facts svg { flex-shrink: 0; color: #8FB3E8; }
.licence__seal { grid-row: 1 / 3; grid-column: 2; position: relative; display: grid; place-items: center; width: clamp(150px, 16vw, 200px); aspect-ratio: 1; }
.licence__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spinRing 26s linear infinite; }
.licence__ring text { font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; fill: rgba(255, 255, 255, 0.72); }
.licence__core {
    display: grid;
    place-items: center;
    align-content: center;
    width: 62%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #1B4A8A, #0B2447 70%);
    box-shadow: 0 0 0 1px rgba(143, 179, 232, 0.35), 0 0 0 10px rgba(143, 179, 232, 0.08), 0 20px 40px -18px rgba(0, 0, 0, 0.6);
    color: #8FB3E8;
}
.licence__core b { margin-top: 4px; font-family: 'Archivo', sans-serif; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: 0.04em; color: #FFFFFF; line-height: 1; }
.licence__core small { margin-top: 3px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.licence__cred { grid-column: 1; justify-self: start; margin-top: 0; }

@media (max-width: 760px) {
    .licence { grid-template-columns: 1fr; }
    .licence__seal { grid-row: auto; grid-column: 1; justify-self: start; width: 140px; }
}

/* ---- Gallery: filter chips, a dense bento grid, a full-size viewer ---- */
.gal-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: clamp(18px, 2.4vw, 28px); }
.gal-filters { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.gal-filters::-webkit-scrollbar { display: none; }
.gal-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 9px 15px;
    border: 0.8px solid rgba(11, 36, 71, 0.16);
    border-radius: 30px;
    background: #FFFFFF;
    font: 600 13px/1 'IBM Plex Sans', sans-serif;
    color: var(--midnight);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.gal-filter span { font-size: 11px; color: var(--muted); }
.gal-filter:hover { border-color: var(--midnight); }
.gal-filter[aria-pressed="true"] { background: var(--midnight); border-color: var(--midnight); color: #FFFFFF; }
.gal-filter[aria-pressed="true"] span { color: rgba(255, 255, 255, 0.6); }
.gal-note { font-size: 12.5px; color: var(--muted); }

.gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 16vw, 230px); grid-auto-flow: dense; gap: clamp(10px, 1.2vw, 16px); }
.gal__item { margin: 0; position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--mist); }
.gal__item--big { grid-column: span 2; grid-row: span 2; }
.gal__item--tall { grid-row: span 2; }
.gal__item--wide { grid-column: span 2; }
.gal__item[hidden] { display: none; }
.gal__item.is-entering { animation: phaseIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.gal__open { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; }
.gal__open .shot { position: absolute; inset: 0; }
.gal__open .shot img { transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); }
.gal__open:hover .shot img, .gal__open:focus-visible .shot img { transform: scale(1.05); }
.gal__cap {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 46px 16px 15px;
    background: linear-gradient(to top, rgba(4, 12, 26, 0.88), rgba(4, 12, 26, 0));
    color: #FFFFFF;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.gal__open:hover .gal__cap, .gal__open:focus-visible .gal__cap { opacity: 1; transform: none; }
.gal__tag { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 7px; padding: 4px 9px; border-radius: 20px; background: rgba(255, 255, 255, 0.18); font: 700 9.5px/1.2 'Archivo', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.gal__text { display: block; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.gal__zoom { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--midnight); opacity: 0; transform: scale(0.8); transition: opacity 0.35s, transform 0.35s; }
.gal__open:hover .gal__zoom, .gal__open:focus-visible .gal__zoom { opacity: 1; transform: none; }
@media (hover: none) { .gal__cap { opacity: 1; transform: none; } }
/* A gallery entry still waiting for its photograph: the photo box, with its
   caption always showing so the box says what belongs there. */
.gal__open--empty { cursor: default; }
.gal__open--empty .gal__cap { opacity: 1; transform: none; }

.lightbox { width: min(1100px, calc(100vw - 24px)); max-height: calc(100svh - 24px); padding: 0; border: 0; border-radius: var(--r-band); background: #06142A; color: #FFFFFF; overflow: visible; }
.lightbox::backdrop { background: rgba(3, 10, 22, 0.82); backdrop-filter: blur(6px); }
.lightbox[open] { animation: phaseIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.lightbox__figure { margin: 0; }
.lightbox__figure img { display: block; width: 100%; max-height: calc(100svh - 150px); object-fit: contain; border-radius: var(--r-band) var(--r-band) 0 0; background: #030B18; }
.lightbox__figure figcaption { display: grid; gap: 4px; padding: 16px 22px 20px; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.86); }
.lightbox__project { font: 700 10px/1.2 'Archivo', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #8FB3E8; }
.lightbox__btn { position: absolute; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #FFFFFF; color: var(--midnight); cursor: pointer; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5); }
.lightbox__close { top: 12px; right: 12px; }
.lightbox__prev { top: 40%; left: -22px; }
.lightbox__next { top: 40%; right: -22px; }

@media (max-width: 980px) {
    .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 36vw, 220px); }
    .lightbox__prev { left: 8px; }
    .lightbox__next { right: 8px; }
}

/* ---- Contact page ---- */
.chead { padding: clamp(22px, 3vw, 40px) 0 clamp(26px, 3.4vw, 44px); }
.chead__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 64px); align-items: end; }
.chead h1 { margin-top: 14px; font-size: clamp(26px, 3vw, 42px); line-height: 1.08; max-width: 22ch; text-wrap: balance; }
.chead .lead { margin-top: 14px; max-width: 56ch; }
.chead__channels { display: grid; gap: 10px; }
.channel {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px 14px 14px;
    border: 0.8px solid rgba(11, 36, 71, 0.12);
    border-radius: var(--r-card);
    background: #FFFFFF;
    color: var(--midnight);
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s, border-color 0.4s;
}
.channel:hover { transform: translateY(-3px); border-color: rgba(11, 36, 71, 0.24); box-shadow: 0 18px 36px -24px rgba(11, 36, 71, 0.5); }
.channel__icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--mist); color: var(--midnight); }
.channel__text { flex: 1; min-width: 0; }
.channel__label { display: block; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.channel__value { display: block; margin-top: 2px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15.5px; overflow-wrap: anywhere; }
.channel--primary { background: var(--surface-bg); border-color: transparent; color: #FFFFFF; }
.channel--primary .channel__icon { background: #FFFFFF; color: var(--midnight); }
.channel--primary .channel__label { color: rgba(255, 255, 255, 0.64); }

.contact { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.5fr); grid-template-areas: "aside form" "office form"; gap: clamp(16px, 2vw, 22px) clamp(20px, 3vw, 44px); align-items: start; }
.contact__aside { grid-area: aside; }
.contact .enquiry { grid-area: form; }
.contact .office { grid-area: office; }
.contact__aside > .eyebrow { justify-self: start; }
.contact__aside { display: grid; gap: 16px; }
.contact__intro { font-size: var(--s-small); color: var(--ink); }
.personas { display: grid; gap: 10px; }
.persona {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    padding: 15px 16px;
    border: 0.8px solid rgba(11, 36, 71, 0.12);
    border-radius: var(--r-card);
    background: #FFFFFF;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.3s, background 0.3s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.persona:hover { border-color: rgba(11, 36, 71, 0.3); transform: translateX(3px); }
.persona[aria-pressed="true"] { border-color: var(--midnight); background: var(--mist); box-shadow: inset 3px 0 0 var(--midnight); }
.persona__icon { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--midnight); color: #FFFFFF; }
.persona__title { display: block; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; color: var(--midnight); }
.persona__text { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.office { display: grid; gap: 12px; padding: 18px; border-radius: var(--r-card); background: var(--mist); }
/* Beside the form the office stretches to the form's foot, and the map takes
   whatever height is left over. */
.contact .office { align-self: stretch; grid-template-rows: minmax(240px, 1fr); grid-auto-rows: auto; }
.office__map { position: relative; min-height: 240px; border-radius: calc(var(--r-card) - 6px); overflow: hidden; background: #DDE3EC; }
.office__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(0.85); }
.office__row { display: flex; gap: 12px; align-items: flex-start; font-size: 12.5px; line-height: 1.55; color: var(--ink); }
.office__row svg { flex-shrink: 0; margin-top: 2px; color: var(--midnight); }
.office__row b { display: block; font-family: 'Archivo', sans-serif; font-size: 12.5px; color: var(--midnight); }

.enquiry {
    padding: clamp(22px, 3vw, 40px);
    border: 0.8px solid rgba(11, 36, 71, 0.1);
    border-radius: var(--r-band);
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(11, 36, 71, 0.04), 0 30px 60px -40px rgba(11, 36, 71, 0.45);
}
.enquiry form { display: grid; gap: clamp(18px, 2vw, 26px); }
.enquiry__step { display: grid; gap: 14px; margin: 0; padding: 0 0 clamp(18px, 2vw, 26px); border: 0; border-bottom: 0.8px solid var(--hairline); min-width: 0; }
.enquiry__step legend { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 0; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--midnight); }
.enquiry__num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--midnight); color: #FFFFFF; font-size: 12px; }
.enquiry__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fld { display: grid; gap: 7px; min-width: 0; }
.fld__label { font-size: 12.5px; font-weight: 600; color: var(--midnight); }
.fld__hint { font-size: 12px; line-height: 1.5; color: var(--muted); }
.enquiry select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%230B2447' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 14px; padding-right: 42px; }
.field.is-invalid { border-color: #B42318; }
.docs { display: grid; gap: 10px; padding: 16px; border-radius: var(--r-card); background: var(--mist); }
.docs[hidden] { display: none; }
.docs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.45; color: var(--ink); cursor: pointer; }
.check input { width: 17px; height: 17px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--midnight); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-radio { position: relative; cursor: pointer; }
.chip-radio input { position: absolute; opacity: 0; pointer-events: none; }
.chip-radio span { display: inline-flex; padding: 9px 16px; border: 0.8px solid rgba(11, 36, 71, 0.18); border-radius: 30px; font-size: 13px; font-weight: 600; color: var(--midnight); transition: background 0.25s, color 0.25s, border-color 0.25s; }
.chip-radio input:checked + span { background: var(--midnight); border-color: var(--midnight); color: #FFFFFF; }
.chip-radio input:focus-visible + span { outline: 2px solid #8FB3E8; outline-offset: 2px; }
.enquiry__send { display: flex; align-items: center; justify-content: space-between; gap: 14px 22px; flex-wrap: wrap; }
.enquiry__send .note { max-width: 38ch; }
.enquiry__buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.enquiry__done { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--r-card); background: #EAF3EE; color: #134E2F; }
.enquiry__done[hidden] { display: none; }
.enquiry__done b { font-family: 'Archivo', sans-serif; }
.enquiry__done p { margin-top: 4px; font-size: 13px; line-height: 1.55; }
.enquiry__done a { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: #134E2F; }
.enquiry__done-icon { flex-shrink: 0; }

@media (max-width: 980px) {
    .chead__grid, .contact { grid-template-columns: 1fr; }
    .contact { grid-template-areas: "aside" "form" "office"; }
    .personas { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .enquiry__row, .docs__grid, .personas { grid-template-columns: 1fr; }
    .channel__value { font-size: 14px; overflow-wrap: anywhere; word-break: break-word; }
    .enquiry__buttons, .enquiry__buttons .btn { width: 100%; }
    .enquiry__buttons .btn { justify-content: space-between; }
}

/* ---- Quick enquiry on the home page ---- */
.quick-form { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 600px; margin: clamp(22px, 3vw, 34px) auto 0; text-align: left; }
.quick-form select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%230B2447' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 14px; padding-right: 42px; }
.quick-form__send { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; }
.quick-form__more { grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--midnight); text-align: center; }
@media (max-width: 640px) {
    .quick-form { grid-template-columns: 1fr; }
    .quick-form .field--area { grid-column: auto; }
    .quick-form__send .enquiry__buttons, .quick-form__send .btn { width: 100%; }
    .quick-form__send .btn { justify-content: space-between; }
}

/* ---- Round 2 ----
   Work items: one card per item of a package, each with its own photograph
   slot. Certificates: document cards with a portrait A4 sheet. Both reuse the
   card radius, hairline and type of the modules above. */
.work { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 16px); list-style: none; margin: 0; padding: 0; }
.work--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.work__item { display: flex; flex-direction: column; background: #FFFFFF; border: 0.8px solid var(--hairline); border-radius: var(--r-card); overflow: hidden; }
.work__media { position: relative; aspect-ratio: 4 / 3; background: var(--mist); }
.work__body { padding: 15px 17px 19px; }
.work__num { display: block; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.1em; color: var(--muted); }
.work__title { display: block; margin-top: 7px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15.5px; line-height: 1.3; letter-spacing: -0.01em; color: var(--midnight); }
.work__text { margin-top: 6px; font-size: 12.5px; line-height: 1.55; color: var(--ink); }

/* The flagship band on the home page and the metro page: two packages side by side */
.pkg-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); margin-top: clamp(20px, 2.6vw, 30px); }
.pkg { display: flex; flex-direction: column; border-radius: var(--r-frame); background: rgba(255, 255, 255, 0.06); border: 0.8px solid rgba(255, 255, 255, 0.12); overflow: hidden; text-decoration: none; transition: background 0.3s ease; }
.pkg:hover { background: rgba(255, 255, 255, 0.1); }
.pkg__media { position: relative; height: clamp(150px, 15vw, 210px); }
.pkg__body { display: flex; flex-direction: column; flex: 1; padding: clamp(16px, 1.8vw, 22px); }
.pkg__title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.2; letter-spacing: -0.015em; color: #FFFFFF; }
.pkg__loc { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--on-midnight-label); }
.pkg__items { list-style: none; margin: 14px 0 0; padding: 0; }
.pkg__items li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 0.8px solid rgba(255, 255, 255, 0.12); font-size: 13px; line-height: 1.45; color: var(--on-midnight); }
.pkg__items svg { flex-shrink: 0; margin-top: 2px; color: var(--sky); }
.pkg__more { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 14px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px; color: #FFFFFF; }

.cert { display: flex; align-items: center; gap: 16px; background: #FFFFFF; border: 0.8px solid var(--hairline); border-radius: var(--r-card); padding: 16px 18px; transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.cert:hover { border-color: rgba(11, 36, 71, 0.28); box-shadow: 0 18px 36px -26px rgba(11, 36, 71, 0.45); }
.cert__seal { position: relative; display: grid; place-items: center; flex: 0 0 76px; width: 76px; height: 76px; border-radius: 50%; background: var(--zebra); color: var(--midnight); }
.cert__rosette { position: absolute; inset: 0; width: 100%; height: 100%; }
.cert__seal img { position: relative; width: 40px; height: 40px; object-fit: contain; }
.cert__scan { flex: 0 0 66px; display: block; aspect-ratio: 1 / 1.414; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 0.8px var(--hairline), 0 6px 14px -8px rgba(11, 36, 71, 0.45); }
.cert__scan img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cert__body { display: flex; flex-direction: column; min-width: 0; }
.cert__kicker { display: inline-flex; align-items: center; gap: 6px; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: var(--s-label); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.cert__kicker svg { color: var(--midnight); }
.cert__title { margin-top: 6px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; color: var(--midnight); text-decoration: none; }
.cert__title:hover { text-decoration: underline; text-underline-offset: 4px; }
.cert__issuer { margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.cert__action { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 32px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--midnight); text-decoration: underline; text-underline-offset: 4px; }
.cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(10px, 1.2vw, 14px); }

@media (max-width: 1080px) { .work { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pkg-pair { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .work, .work--3 { grid-template-columns: 1fr; } }

/* ---- Dropdowns (site.js "Dropdowns") ----
   The field keeps its pill; the list is a card in the module language: white,
   18px corners, hairline, the soft midnight shadow, and the chosen option
   ticked in midnight. It floats on the page (position: fixed) so the quick
   enquiry card cannot clip it. */
.pick { position: relative; display: block; width: 100%; }
.pick__native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.pick__btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; cursor: pointer; line-height: 1.45; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.pick__btn:hover { border-color: var(--midnight); }
.pick__btn:focus-visible, .pick.is-open .pick__btn { outline: 2px solid var(--midnight); outline-offset: 1px; }
.pick__btn.is-empty .pick__value { color: var(--muted); }
.pick__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick__chev { display: grid; place-items: center; flex-shrink: 0; color: var(--midnight); transition: transform 0.22s ease; }
.pick.is-open .pick__chev { transform: rotate(180deg); }

.pick__list {
    position: fixed;
    z-index: 300;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    background: #FFFFFF;
    border: 0.8px solid rgba(11, 36, 71, 0.12);
    border-radius: var(--r-card);
    box-shadow: 0 2px 4px rgba(11, 36, 71, 0.05), 0 24px 48px -18px rgba(11, 36, 71, 0.35);
    font-family: 'IBM Plex Sans', 'Noto Sans Bengali', sans-serif;
    opacity: 0;
    transform: translateY(-6px);
    transform-origin: top center;
    transition: opacity 0.16s ease, transform 0.16s ease;
    scrollbar-width: thin;
}
.pick__list.is-up { transform: translateY(6px); transform-origin: bottom center; }
.pick__list.is-shown { opacity: 1; transform: none; }
.pick__list:focus { outline: none; }
.pick__group + .pick__group, .pick__opt + .pick__group { margin-top: 4px; padding-top: 4px; border-top: 0.8px solid var(--hairline); }
.pick__head { display: block; padding: 9px 12px 5px; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: var(--s-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pick__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 9px 12px; border-radius: 11px; font-size: 14.5px; line-height: 1.4; color: var(--ink); cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.pick__opt.is-active { background: var(--mist); color: var(--midnight); }
.pick__opt[aria-selected="true"] { font-weight: 600; color: var(--midnight); }
.pick__tick { display: grid; place-items: center; flex-shrink: 0; color: var(--midnight); opacity: 0; }
.pick__opt[aria-selected="true"] .pick__tick { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .pick__list, .pick__chev { transition: none; }
}

/* ---- Round 3: proof in the hero ---- */
.hero__proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; list-style: none; margin: clamp(18px, 2.2vw, 26px) 0 0; padding: 0; }
.hero__proof li { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.hero__proof svg { color: var(--sky); flex-shrink: 0; }

/* ---- Client reviews, under the statement ring ---- */
.reviews { margin-top: clamp(30px, 4vw, 50px); text-align: left; }
.review {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: clamp(22px, 2.4vw, 30px);
    border-radius: var(--r-band);
    background: #FFFFFF;
    border: 0.8px solid rgba(11, 36, 71, 0.08);
    box-shadow: 0 1px 2px rgba(11, 36, 71, 0.04), 0 22px 40px -32px rgba(11, 36, 71, 0.45);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s;
}
.review:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(11, 36, 71, 0.04), 0 30px 50px -30px rgba(11, 36, 71, 0.5); }
.review__mark { width: 30px; height: auto; color: #8FB3E8; }
.review__quote { flex: 1; margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--midnight); }
.review__by { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 0.8px solid var(--hairline); font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.review__by b { display: block; font-family: 'Archivo', sans-serif; font-size: 14px; color: var(--midnight); }
.review__avatar { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: var(--midnight); color: #FFFFFF; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px; text-transform: uppercase; }

.swipe-hint { display: none; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--muted); }

/* ---- Round 3: phone layout ----
   Long stacks become swipe rows (services, site highlights), work items
   become compact rows with a thumbnail, and side-by-side cards stack. The
   selectors carry an extra class so they win over the layout's 980px rules. */
@media (max-width: 640px) {
    .grid[data-serv-grid], .grid[data-media-grid], .grid[data-review-grid] {
        display: grid !important; grid-auto-flow: column; grid-template-columns: none !important; grid-auto-columns: 84%;
        gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
        margin-right: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 12px 0; scrollbar-width: none;
    }
    .grid[data-serv-grid]::-webkit-scrollbar, .grid[data-media-grid]::-webkit-scrollbar, .grid[data-review-grid]::-webkit-scrollbar { display: none; }
    .grid[data-serv-grid] > *, .grid[data-media-grid] > *, .grid[data-review-grid] > * { scroll-snap-align: start; }
    .grid[data-media-grid] > figure { grid-column: auto !important; aspect-ratio: 4 / 5 !important; }
    .swipe-hint { display: flex; }

    .work, .work--3 { gap: 10px; }
    .work__item { flex-direction: row; align-items: stretch; }
    .work__media { flex: 0 0 104px; aspect-ratio: auto; min-height: 104px; }
    .work__media .ph span { display: none; }
    .work__body { padding: 13px 14px 14px; }
    .work__title { margin-top: 3px; font-size: 15px; }
    .work__text { font-size: 12.5px; }

    [data-pwd-card] { grid-template-columns: 1fr !important; }
    [data-pwd-card] > span:last-child { padding: 4px 6px 8px !important; }

    .cert__action { min-height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    .js [data-oa] { opacity: 1 !important; pointer-events: auto !important; animation: none !important; }
    [data-anim], [data-marquee-track], .surface::before, .orb, .skyline { animation: none !important; }
    [data-train] { animation: none !important; transform: translateX(6vw); }
    *, *::before, *::after { transition-duration: 0.01ms !important; }
}