/* Cementaid public site */

:root {
    --navy: #3c4975;
    --navy-dark: #2b3152;
    --navy-deep: #232845;
    --coral: #f26b4f;
    --ink: #3d3d3d;
    --muted: #6d6d6d;
    --line: #d9d9d9;
    --grey-bg: #f1f1f1;
    --grey-2: #e3e3e3;
    --footer: #231f20;
    --white: #fff;
    --font-head: "Roboto Condensed", "Noto Sans TC", "Noto Sans SC", "Arial Narrow", sans-serif;
    --font-body: "Inter", "Noto Sans TC", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
    --container: 1200px;
    --header-h: 96px;
}

html[lang="zh-Hans"] {
    --font-head: "Roboto Condensed", "Noto Sans SC", "Arial Narrow", sans-serif;
    --font-body: "Inter", "Noto Sans SC", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; margin: 0; line-height: 1.15; }
button { font: inherit; cursor: pointer; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.text-coral { color: var(--coral); }
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--navy); color: #fff; padding: 8px 16px; }
.skip-link:focus { left: 8px; }

/* Images from View::img(): real file, or a placeholder until it is supplied */
.img-real,
.img-placeholder { width: 100%; height: 100%; object-fit: cover; }
.img-placeholder { background: #c9ccd6; }
.media { position: relative; overflow: hidden; background: #c9ccd6; }
.media > img, .media > picture > img { position: absolute; inset: 0; }
picture { display: contents; }

/* ------------------------------------------------------------- buttons */
.btn {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 10px 16px 10px 17px;
    background: var(--navy); color: #fff;
    font-family: var(--font-head); font-size: 22px; font-weight: 400;
    line-height: 1.2; border: 0; transition: background .2s;
}
.btn::after {
    content: ""; width: 10px; height: 10px; margin-right: 2px;
    border-top: 3px solid var(--coral); border-right: 3px solid var(--coral);
    transform: rotate(45deg);
}
.btn:hover { background: var(--navy-dark); }
.btn--dark { background: var(--navy-dark); }
.btn--dark:hover { background: var(--navy); }
.chev {
    display: inline-block; width: 12px; height: 12px;
    border-top: 3px solid var(--coral); border-right: 3px solid var(--coral);
    transform: rotate(45deg);
}

/* ------------------------------------------------------------- header */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--header-h); padding: 0 50px; max-width: 1440px; margin: 0 auto;
}

.logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; color: var(--navy); }
.logo__top { font: italic 700 10px/1 Arial, sans-serif; margin-bottom: 3px; }
.logo__top b { color: var(--coral); }
.logo__pill {
    background: var(--navy); color: var(--coral);
    font: 900 19px/1 "Arial Black", Arial, sans-serif; letter-spacing: 2px;
    padding: 5px 14px; border-radius: 20px;
}
.logo__tag { font: italic 700 10px/1 Arial, sans-serif; margin-top: 4px; }
.logo--lg .logo__top { font-size: 22px; }
.logo--lg .logo__pill { font-size: 40px; padding: 10px 28px; border-radius: 40px; letter-spacing: 5px; }
.logo--lg .logo__tag { font-size: 22px; margin-top: 8px; }

.main-nav { display: flex; align-items: stretch; height: 100%; gap: 32px; }
.main-nav__item { position: relative; display: flex; align-items: center; }
.main-nav__link {
    position: relative; display: flex; align-items: center; height: 100%;
    font-family: var(--font-head); font-size: 15px; color: var(--navy);
    text-transform: uppercase; letter-spacing: .2px; background: none; border: 0; padding: 0;
}
.main-nav__link::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--navy); transform: scaleX(0); transition: transform .2s;
}
.main-nav__link:hover::before, .main-nav__link.is-active::before { transform: scaleX(1); }

/* Products dropdown (mega menu) */
.mega {
    position: absolute; top: 100%; left: 0; width: 292px;
    background: var(--navy); color: #fff; display: none;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.main-nav__item.is-open .mega { display: block; }
.mega__cat { border-bottom: 1px solid rgba(255,255,255,.12); }
.mega__cat-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; padding: 16px 20px; background: none; border: 0; color: #fff; text-align: left;
    font-family: var(--font-head); font-size: 15px; text-transform: uppercase;
}
.mega__cat-head .chev { flex: none; transform: rotate(45deg) scale(.9); transition: transform .2s; }
.mega__cat.is-open .mega__cat-head .chev { transform: rotate(-45deg) scale(.9); }
.mega__subs { display: none; list-style: none; margin: 0; padding: 0 0 8px; }
.mega__cat.is-open .mega__subs { display: block; }
.mega__subs a {
    display: block; margin: 0 36px 0 34px; padding: 11px 0;
    font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.35);
}
.mega__subs li:last-child a { border-bottom: 0; }
.mega__subs a:hover, .mega__subs a.is-active {
    background: var(--coral); margin: 0; padding: 11px 36px 11px 34px; border-bottom-color: transparent;
}

/* Language switcher */
.lang { position: relative; }
.lang__toggle {
    display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 8px 0;
    font-family: var(--font-head); font-size: 15px; color: var(--navy); text-transform: uppercase;
}
.lang__toggle::after {
    content: ""; width: 8px; height: 8px; margin-top: -4px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}
.lang__menu {
    position: absolute; right: 0; top: calc(100% + 12px); min-width: 96px;
    list-style: none; margin: 0; padding: 0; background: var(--navy); display: none;
}
.lang.is-open .lang__menu { display: block; }
.lang__menu a {
    display: block; padding: 12px 20px; text-align: center; color: #fff;
    font-family: var(--font-head); font-size: 15px; border-bottom: 1px solid rgba(255,255,255,.25);
}
.lang__menu li:last-child a { border-bottom: 0; }
.lang__menu a.is-active, .lang__menu a:hover { background: var(--coral); }

.burger { display: none; background: none; border: 0; padding: 8px; }
.burger span { display: block; width: 40px; height: 3px; margin: 8px 0; background: var(--navy); border-radius: 2px; }

/* Mobile drawer */
.drawer {
    position: fixed; inset: 0; z-index: 150; background: var(--navy); color: #fff;
    overflow-y: auto; display: none;
}
.drawer.is-open { display: block; }
.drawer__top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 28px 24px 24px 38px; border-bottom: 1px solid rgba(255,255,255,.2);
}
.drawer__langs { display: flex; align-items: center; gap: 0; font-family: var(--font-head); font-size: 18px; }
.drawer__langs a { padding: 0 20px; border-left: 1px solid rgba(255,255,255,.3); }
.drawer__langs a:first-of-type { border-left: 0; padding-left: 10px; }
.drawer__langs a.is-active { color: var(--coral); font-weight: 700; }
.drawer__close { background: none; border: 0; color: #fff; font-size: 34px; line-height: 1; padding: 0 4px; }
.drawer__nav { list-style: none; margin: 0; padding: 26px 40px; }
.drawer__nav > li > a, .drawer__nav > li > button {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
    padding: 18px 0; background: none; border: 0; color: #fff; text-align: left;
    font-family: var(--font-head); font-size: 19px; text-transform: uppercase;
}
.drawer__sub { display: none; list-style: none; margin: 0 0 8px; padding: 0 0 0 14px; }
.drawer__sub.is-open { display: block; }
.drawer__sub a { display: block; padding: 8px 0; font-size: 15px; opacity: .9; }
.drawer__sub .drawer__sub-cat { font-family: var(--font-head); text-transform: uppercase; opacity: 1; margin-top: 8px; }

/* ------------------------------------------------------------- footer */
.site-footer__nav-row {
    display: flex; align-items: center; justify-content: space-between;
    max-width: 1440px; margin: 0 auto; padding: 40px 56px 40px 208px;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 31px; list-style: none; margin: 0; padding: 0; }
.footer-nav a { font-family: var(--font-head); font-size: 14px; color: var(--navy); text-transform: uppercase; }
.footer-nav a:hover { color: var(--coral); }
.social { display: flex; gap: 28px; }
.social a { color: var(--navy); display: block; width: 34px; height: 34px; }
.social a:hover { color: var(--coral); }
.social svg { width: 100%; height: 100%; fill: currentColor; }
.site-footer__bottom { background: var(--footer); color: #e7e7e7; font-size: 14px; }
.site-footer__bottom-inner {
    display: flex; justify-content: space-between; gap: 16px;
    max-width: 1440px; margin: 0 auto; padding: 12px 48px;
}
.site-footer__legal a + a::before { content: "|"; margin: 0 10px; opacity: .8; }

/* ------------------------------------------------------------- shared sections */
.section { padding: 72px 0 100px; }
.section-head { text-align: center; margin-bottom: 64px; }
.section-head h2 { font-size: 52px; color: var(--navy); text-transform: uppercase; }
.section-head p { margin: 6px 0 0; font-size: 16px; color: var(--muted); }
.section-head--light h2 { color: #fff; }
.section-head--light p { color: #fff; }

.page-hero { position: relative; height: 514px; background: var(--navy-dark); overflow: hidden; }
.page-hero > .img-real, .page-hero > picture > .img-real,
.page-hero > .img-placeholder { position: absolute; inset: 0; }
.page-hero__title {
    position: absolute; right: max(120px, calc((100% - 1200px) / 2)); top: 140px;
    font-size: 58px; color: #fff; text-transform: uppercase; text-align: right;
    text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.page-hero--short { height: 346px; }
.page-hero--short .page-hero__title { top: 140px; }

.overlap { position: relative; margin-top: -168px; z-index: 2; }
.panel { background: #fff; padding: 70px 80px; }
.panel--grey { background: var(--grey-bg); }
.band-grey { background: var(--grey-bg); padding-bottom: 120px; }

/* Category cards */
.cat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
/* The whole card is a toggle; its sub-category list drops down over the content below */
.cat-card { position: relative; display: flex; flex-direction: column; background: var(--navy); color: #fff; transition: box-shadow .2s; }
.cat-card:hover, .cat-card.is-open { box-shadow: 0 12px 26px rgba(0,0,0,.18); }
.cat-card.is-open { z-index: 20; }
.cat-card__toggle {
    display: flex; flex-direction: column; flex: 1; width: 100%; padding: 0; border: 0;
    background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.cat-card__img { display: block; width: 100%; aspect-ratio: 376 / 197; }
.cat-card__body { position: relative; display: block; flex: 1; padding: 28px 70px 34px 26px; min-height: 222px; }
.cat-card__name { display: block; font-family: var(--font-head); font-weight: 700; line-height: 1.15; font-size: 22px; text-transform: uppercase; min-height: 62px; margin-bottom: 26px; }
.cat-card__intro { display: block; margin: 0; font-size: 14px; }
.cat-card__body .chev { position: absolute; right: 28px; bottom: 42px; transition: transform .2s; }
.cat-card.is-open .cat-card__body .chev { top: 36px; bottom: auto; transform: rotate(-45deg); }
.cat-card__subs {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    margin: 0; padding: 0 0 6px; list-style: none; background: #4a5683; box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.cat-card.is-open .cat-card__subs { display: block; }
.cat-card__subs a { display: block; padding: 12px 26px; color: #fff; font-size: 13px; line-height: 1.3; }
.cat-card__subs li + li a { border-top: 1px solid rgba(255,255,255,.35); margin: 0 22px; padding-left: 4px; padding-right: 4px; }
.cat-card__subs a:hover { color: var(--coral); }
.cat-card__subs a.is-active { background: var(--coral); color: #fff; }

/* Project category band */
/* --split: where the artwork's upper ground line sits, as a share of its height */
.proj-cats { --split: 45.5%; background: var(--navy); color: #fff; padding-bottom: 90px; }
.proj-cats .section-head { background: var(--navy-dark); margin: 0; padding: 84px 24px 40px; }
.proj-cats__band { background: linear-gradient(var(--navy-dark) var(--split), var(--navy) var(--split)); }
.proj-cats__art { display: block; width: min(1042px, 100% - 48px); margin: 0 auto; }
.proj-cats__art img { display: block; width: 100%; height: auto; }
.proj-cats__art:focus-visible { outline: 2px solid var(--coral); outline-offset: 6px; }

/* Two-column call-to-action band */
.cta-split { display: grid; grid-template-columns: 1fr 1fr; }
.cta-split__col { padding: 62px 0 64px; }
.cta-split__col:first-child { padding-left: max(24px, calc((100vw - 1200px) / 2)); }
.cta-split__col:last-child { padding-left: 128px; }
.cta-split h2 { font-size: 52px; text-transform: uppercase; }
.cta-split p { margin: 4px 0 20px; font-size: 16px; }
.cta-split--light .cta-split__col:first-child { background: var(--grey-bg); }
.cta-split--light .cta-split__col:last-child { background: var(--grey-2); }
.cta-split--light h2 { color: var(--navy); }
.cta-split--dark { color: #fff; }
.cta-split--dark .cta-split__col:first-child { background: var(--navy-dark); }
.cta-split--dark .cta-split__col:last-child { background: var(--navy); }

/* Accordion */
.acc-item + .acc-item { margin-top: 2px; }
.acc-item__head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: 100%; padding: 14px 24px 14px 20px; background: var(--navy); color: #fff; border: 0; text-align: left;
    font-family: var(--font-head); font-size: 28px; font-weight: 700; text-transform: uppercase;
}
.acc-item__head sup { font-size: .55em; }
.acc-item__head .chev { flex: none; transform: rotate(135deg); margin-top: -6px; transition: transform .2s; }
.acc-item.is-open .acc-item__head .chev { transform: rotate(-45deg); margin-top: 6px; }
.acc-item__body { display: none; background: #fff; padding: 30px 40px 40px; font-size: 15px; text-align: justify; }
.acc-item.is-open .acc-item__body { display: block; }
.acc-item__body p:last-child { margin-bottom: 0; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-weight: 500; color: var(--navy); font-size: 16px; }
.field label .req { color: var(--coral); }
.input, .select, .textarea {
    width: 100%; padding: 9px 15px; border: 1px solid #bdbdbd; background: #fff;
    font: inherit; font-weight: 300; color: var(--ink); border-radius: 0;
}
.input::placeholder, .textarea::placeholder { color: #aaa; }
.select {
    appearance: none; padding-right: 40px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23555' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.textarea { min-height: 240px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--navy); outline-offset: -1px; }
.field.has-error .input, .field.has-error .select { border-color: #d0342c; }
.field__error { color: #d0342c; font-size: 13px; font-weight: 400; }
.alert { padding: 14px 18px; margin-bottom: 26px; font-weight: 400; }
.alert--ok { background: #e6f4ea; color: #1e6b34; }
.alert--err { background: #fdecea; color: #a12a22; }

/* ------------------------------------------------------------- home */
.featured { position: relative; background: #000; }
.featured__slides { position: relative; height: 640px; }
.featured__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.featured__slide.is-active { opacity: 1; z-index: 1; }
.featured__bar {
    display: flex; align-items: center; justify-content: center; gap: 28px;
    height: 60px; background: #000; color: #fff;
}
.featured__label { font-family: var(--font-head); font-size: 17px; text-transform: uppercase; padding-right: 14px; border-right: 2px solid var(--coral); }
.featured__title { font-family: var(--font-head); font-size: 24px; font-weight: 700; min-width: 0; }
.featured__title a:hover { color: var(--coral); }
.featured__arrow { background: none; border: 0; padding: 6px 14px; }
.featured__arrow .chev { width: 14px; height: 14px; }
.featured__arrow--prev .chev { transform: rotate(-135deg); }
.featured__overlay-label { display: none; }

.intro { display: grid; grid-template-columns: 865fr 575fr; min-height: 340px; }
.intro__text {
    background: var(--navy); color: #fff; text-align: right;
    display: flex; flex-direction: column; justify-content: center; padding: 70px 67px 70px 40px;
}
.intro__text h1 { font-size: 52px; font-weight: 400; text-transform: uppercase; line-height: 1.17; margin-bottom: 22px; }
.intro__text h1 span { color: var(--coral); }
.intro__text p { margin: 0; font-size: 16px; }

.info-split { display: grid; grid-template-columns: 1fr 1fr; }
.info-split__col { padding: 58px 0 64px; }
.info-split__col:first-child { background: var(--grey-bg); padding-left: max(24px, calc((100vw - 1200px) / 2)); }
.info-split__col:last-child { background: var(--grey-2); padding-left: 128px; }
.info-split h2 { font-size: 52px; color: var(--navy); text-transform: uppercase; }
.info-split p { margin: 0 0 20px; color: var(--muted); }

/* ------------------------------------------------------------- about */
.timeline { position: relative; padding-left: 137px; }
.timeline::before { content: ""; position: absolute; left: 89px; top: 0; bottom: 0; width: 1px; background: var(--coral); }
.timeline__mark { position: relative; }
.timeline__mark::before {
    content: ""; position: absolute; left: -55px; top: 10px; width: 14px; height: 14px; background: var(--coral);
}
.group-card { display: grid; grid-template-columns: 300px 1fr; gap: 80px; background: var(--navy); color: #fff; padding: 72px 80px 70px 137px; position: relative; }
.group-card::before { content: ""; position: absolute; left: 89px; top: 88px; bottom: 0; width: 1px; background: var(--coral); }
.group-card__title { position: relative; font-size: 52px; text-transform: uppercase; line-height: 1.2; }
.group-card__title::before { content: ""; position: absolute; left: -55px; top: 10px; width: 14px; height: 14px; background: var(--coral); }
.group-card__body { font-size: 15px; text-align: justify; line-height: 1.6; }
.founder { padding: 80px 0 70px; }
.founder h2 { font-size: 52px; color: var(--navy); text-transform: uppercase; }
.founder__sub { margin: 6px 0 40px; color: var(--muted); }
.founder__grid { display: grid; grid-template-columns: 1fr 320px; gap: 54px; }
.founder__text { text-align: justify; font-size: 15px; line-height: 1.6; }
.founder__photo { aspect-ratio: 321 / 428; }
.founder__caption { margin-top: 18px; padding-left: 10px; border-left: 3px solid var(--coral); font-size: 15px; }
.founder__credo { margin: 24px 0 40px; }
.founder__sign strong { font-weight: 600; }
.quote-box { position: relative; margin-top: 60px; background: var(--grey-bg); padding: 22px 28px; font-size: 15px; }
.quote-box::before { content: ""; position: absolute; left: -4px; top: -10px; width: 14px; height: 14px; background: var(--coral); }
.clients { background: var(--grey-bg); padding: 80px 0 120px; }
.clients h2 { font-size: 52px; color: var(--navy); text-transform: uppercase; margin-bottom: 84px; }
.clients__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; background: #fff; padding: 40px 30px; max-width: 927px; }
.clients__logo { aspect-ratio: 16 / 9; }

/* ------------------------------------------------------------- Everdure Caltite */
/* Banner, then the intro card overlapping it by --overlap; navy starts at the banner edge */
.page-hero--ec { height: 510px; }
.ec-top {
    --overlap: 163px;
    position: relative; z-index: 2; margin-top: calc(-1 * var(--overlap));
    background: linear-gradient(transparent var(--overlap), var(--navy) var(--overlap));
}
.ec-top > .container { max-width: calc(1200px + 48px); }
.ec-intro { display: grid; grid-template-columns: 250px 1fr; gap: 49px; padding: 76px 80px; background: #fff; }
.ec-intro h1 { font-size: 58px; color: var(--navy); text-transform: uppercase; align-self: center; line-height: 1; }
.ec-intro h2 { font-size: 24px; color: var(--navy); margin-bottom: 18px; }
.ec-intro p { font-size: 15px; text-align: justify; margin: 0; }
.ec-how { background: var(--navy); color: #fff; padding: 80px 0 90px; }
.ec-how > .container { max-width: calc(1035px + 48px); }
.ec-how h2 { font-size: 52px; text-transform: uppercase; margin-bottom: 26px; }
.ec-how > .container > p { font-size: 15px; text-align: justify; margin: 0 0 24px; }
.ec-step { max-width: 800px; margin: 54px auto 0; }
.ec-step__lead { display: flex; gap: 10px; font-weight: 600; font-size: 16px; margin-bottom: 20px; }
.ec-step__lead b { color: var(--coral); }
.ec-compare { margin: 0; }
.ec-compare img { display: block; width: 100%; height: auto; }
.ec-why { padding: 80px 0 90px; }
.ec-why h2 { font-size: 52px; color: var(--navy); text-transform: uppercase; margin-bottom: 40px; }
.bullets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 56px; }
.bullets li { position: relative; padding-left: 20px; font-size: 15px; text-align: justify; }
.bullets li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; background: var(--coral); }

/* ------------------------------------------------------------- products */
.prod-hero { display: grid; grid-template-columns: 839fr 601fr; min-height: 551px; }
.prod-hero__text { background: var(--navy-dark); color: #fff; padding: 140px 60px 120px 82px; }
.prod-hero__text h1 { font-size: 52px; color: var(--coral); text-transform: uppercase; line-height: 1.2; margin-bottom: 30px; }
.prod-hero__text p { font-size: 16px; max-width: 380px; }
.prod-body { display: grid; grid-template-columns: 290px 1fr; gap: 0; padding: 74px 84px 84px 80px; }
.prod-body__label { font-size: 52px; color: var(--navy); text-transform: uppercase; line-height: 1.15; }
.prod-body__title { font-size: 36px; color: var(--navy); text-transform: uppercase; line-height: 1.3; margin-bottom: 70px; }
.prod-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 44px; }
.prod-tools__region { display: flex; align-items: center; gap: 28px; }
.prod-tools__region label { font-weight: 500; color: var(--navy); }
.prod-tools__region .select { width: 241px; }
.expand-all { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--navy); font-weight: 500; }
.expand-all__icon { display: grid; place-items: center; width: 26px; height: 26px; background: var(--navy); color: #fff; border-radius: 4px; font-size: 14px; }
.prod-empty { display: none; padding: 30px; background: #fff; color: var(--muted); }

/* ------------------------------------------------------------- projects */
.city-hero { position: relative; background: var(--navy-dark); height: 346px; overflow: hidden; }
/* Banner artwork (sky, skyline, ground) zoomed from the top so the ground line sits
   about 72% down the hero, as in the design; the sides are cropped */
.city-hero__art { position: absolute; top: 0; left: 0; right: 0; height: 502px; }
.city-hero__art img { object-position: center top; }
.city-hero__title {
    position: absolute; z-index: 2; right: max(108px, calc((100% - 1224px) / 2)); top: 44px;
    font-size: 58px; color: var(--coral); text-transform: uppercase;
}
.projects-layout { display: grid; grid-template-columns: 398px 1fr; }
.filters { background: var(--grey-bg); padding: 80px 78px 80px 80px; }
.filters .field { margin-bottom: 38px; }
.filters .field label { font-size: 16px; }
.filters .input, .filters .select { height: 40px; padding-top: 0; padding-bottom: 0; }
.filters__clear { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); font-weight: 500; }
.filters__clear-icon { display: grid; place-items: center; width: 24px; height: 24px; background: var(--navy); color: #fff; border-radius: 4px; font-size: 15px; }
.projects-main { padding: 82px 100px 80px 100px; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 40px; }
.project-card__img { aspect-ratio: 1; margin-bottom: 11px; transition: opacity .2s; }
.project-card:hover .project-card__img { opacity: .85; }
.project-card h3 { font-family: var(--font-body); font-size: 16px; font-weight: 500; color: var(--navy); line-height: 1.25; }
.project-card:hover h3 { color: var(--coral); }
.project-card p { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
.no-results { padding: 40px; background: var(--grey-bg); text-align: center; }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 60px; list-style: none; padding: 0; }
.pagination a, .pagination span {
    display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px;
    border: 1px solid var(--line); color: var(--navy); font-weight: 400;
}
.pagination a:hover { border-color: var(--navy); }
.pagination .is-current { background: var(--navy); border-color: var(--navy); color: #fff; }
.pagination .gap { border: 0; }

/* Project detail: the card starts at the banner edge with a navy strip (--band) behind its top */
.project-band { --band: 168px; background: linear-gradient(var(--navy) var(--band), var(--grey-bg) var(--band)); padding-bottom: 120px; }
.project-band > .container { max-width: calc(1200px + 48px); }
.project-detail { display: grid; grid-template-columns: 480px 1fr; gap: 82px; padding: 82px 80px 84px; background: #fff; }
.project-detail__img { aspect-ratio: 480 / 476; }
.project-detail h1 { font-size: 28px; color: var(--navy); text-transform: uppercase; line-height: 1.3; padding-bottom: 20px; }
.spec { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec th, .spec td { padding: 18px 0 17px; line-height: 20px; border-top: 1px solid var(--line); vertical-align: top; text-align: left; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 1px solid var(--line); }
.spec th { width: 136px; font-weight: 600; color: #333; }
.spec td { white-space: pre-line; }
.spec a { color: var(--coral); }
.spec a:hover { text-decoration: underline; }
.project-desc { grid-column: 1 / -1; font-size: 15px; text-align: justify; }
.project-desc h2 { font-size: 24px; color: var(--navy); margin-bottom: 14px; text-transform: uppercase; }
.back-link { display: inline-block; margin-top: 30px; color: var(--navy); font-weight: 500; }
.back-link:hover { color: var(--coral); }

/* ------------------------------------------------------------- technical resources */
.resources { padding: 68px 100px 90px; }
.resources .acc-item + .acc-item { margin-top: 40px; }
.resources .acc-item__head { font-size: 24px; padding: 17px 24px; }
.resources .acc-item__body { padding: 0; }
.res-list { list-style: none; margin: 0; padding: 0; }
.res-list li { border-bottom: 1px solid #e6e6e6; }
.res-list a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; font-weight: 400; font-size: 16px; }
.res-list a:hover { color: var(--coral); }
.res-list svg { width: 30px; height: 30px; flex: none; fill: #333; }
.res-empty { padding: 20px 24px; color: var(--muted); }

/* ------------------------------------------------------------- text pages */
.prose { font-size: 15px; line-height: 1.75; text-align: justify; }
.prose h2 { font-size: 24px; color: var(--navy); margin: 30px 0 4px; }
.prose h3 { font-size: 18px; color: var(--navy); margin: 26px 0 6px; }
.prose ol { padding-left: 20px; }
.prose .ticks { list-style: none; padding: 0; margin: 0 0 1em; }
.prose .ticks li::before { content: "\2713"; margin-right: 6px; }
.legal-title { font-size: 36px; color: var(--navy); text-transform: uppercase; margin-bottom: 30px; }
.legal-list { counter-reset: legal; list-style: none; padding: 0; margin: 0; }
.legal-list li { counter-increment: legal; position: relative; padding-left: 25px; margin-bottom: 18px; }
.legal-list h3 { font-family: var(--font-head); font-size: 20px; color: var(--navy); margin: 0 0 4px; }
/* Number hangs in the margin so the heading and its text share one left edge */
.legal-list h3::before { content: counter(legal) "."; position: absolute; left: 0; }

/* ------------------------------------------------------------- locations */
.map-card { background: #fff; }
.map-card img { display: block; width: 100%; height: auto; }
.branches { margin-top: 40px; background: #fff; padding: 74px 100px 90px; }
.branches h2 { font-size: 52px; color: var(--navy); text-transform: uppercase; margin-bottom: 60px; }
.tabs { display: flex; flex-wrap: wrap; gap: 50px; margin-bottom: 64px; }
.tabs button {
    display: inline-flex; align-items: center; gap: 12px; padding: 9px 20px; margin-left: -20px;
    background: none; border: 0; font-family: var(--font-head); font-size: 22px; font-weight: 700;
    color: var(--navy); text-transform: uppercase;
}
.tabs button .chev { width: 9px; height: 9px; border-color: currentColor; border-width: 2.5px; }
.tabs button.is-active { background: var(--coral); color: #fff; margin-left: 0; }
.tabs button.is-active .chev { transform: rotate(135deg); margin-top: -5px; }
.tab-panel { display: none; }
.tab-panel.is-active { display: grid; grid-template-columns: repeat(3, 1fr); gap: 66px 54px; }
.branch { position: relative; padding-left: 20px; font-size: 14px; }
.branch::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; background: var(--coral); }
.branch h3 { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: #444; margin-bottom: 8px; }
.branch h4 { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--coral); text-transform: uppercase; margin-bottom: 10px; }
.branch p { margin: 0 0 8px; }
.branch a:hover { color: var(--coral); }

/* ------------------------------------------------------------- contact */
.follow { padding: 70px 100px 60px; background: #fff; }
.follow h2, .enquiry h2 { font-size: 52px; color: var(--navy); text-transform: uppercase; }
.follow__links { display: grid; gap: 22px; margin-top: 40px; }
.follow__links a { display: flex; align-items: center; gap: 18px; color: var(--ink); }
.follow__links svg { width: 34px; height: 34px; fill: var(--navy); flex: none; }
.follow__links strong { display: block; font-weight: 500; color: var(--navy); }
.enquiry { margin-top: 60px; background: #fff; padding: 74px 100px 100px; }
.enquiry__note { margin: 4px 0 40px; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; }
.form-grid .field--full { grid-column: 1 / -1; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* 404 */
.not-found { text-align: center; padding: 120px 24px; }
.not-found h1 { font-size: 96px; color: var(--coral); }
.not-found p { margin: 10px 0 30px; }

/* ============================================================= responsive */
@media (max-width: 1280px) {
    .site-header__inner { padding: 0 24px; }
    .main-nav { gap: 22px; }
    .site-footer__nav-row { padding: 40px 24px; }
    .projects-main { padding: 60px 40px; }
    .filters { padding: 60px 40px; }
    .projects-layout { grid-template-columns: 320px 1fr; }
}

@media (max-width: 1100px) {
    :root { --header-h: 80px; }
    .main-nav, .site-header .lang { display: none; }
    .burger { display: block; }
    .site-header__inner { justify-content: center; position: relative; }
    .burger { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }

    .site-footer__nav-row { flex-direction: column; align-items: flex-start; gap: 30px; padding: 40px; }
    .footer-nav { flex-direction: column; gap: 22px; }
    .footer-nav a { font-size: 18px; }

    .cat-cards { grid-template-columns: 1fr 1fr; }
    .proj-cats { --split: 48.2%; }
    .panel, .branches, .follow, .enquiry, .resources { padding-left: 48px; padding-right: 48px; }
    .group-card { grid-template-columns: 1fr; gap: 30px; padding: 60px 48px 60px 100px; }
    .group-card::before { left: 60px; }
    .group-card__title::before { left: -46px; }
    .timeline { padding-left: 100px; }
    .timeline::before { left: 60px; }
    .timeline__mark::before { left: -46px; }
    .founder__grid { grid-template-columns: 1fr; }
    .founder__photo-wrap { max-width: 320px; }
    .clients__grid { grid-template-columns: repeat(4, 1fr); }
    .ec-intro { grid-template-columns: 1fr; gap: 24px; padding: 60px 48px; }
    .prod-hero { grid-template-columns: 1fr 1fr; }
    .prod-hero__text { padding: 80px 40px; }
    .prod-body { grid-template-columns: 1fr; padding: 60px 48px; }
    .prod-body__label { margin-bottom: 30px; }
    /* Tablet design (1024): sidebar kept, three card columns, shorter hero */
    .city-hero { height: 263px; }
    .city-hero__art { height: 365px; }
    .city-hero__title { top: 34px; right: 88px; }
    .projects-layout { grid-template-columns: 307px 1fr; }
    .filters { padding: 60px 25px; }
    .filters .field { margin-bottom: 40px; }
    .filters .input, .filters .select { height: 48px; }
    .projects-main { padding: 57px 30px 60px; }
    .project-grid { grid-template-columns: repeat(3, 1fr); gap: 20px 30px; }
    .project-band { --band: 129px; padding-bottom: 76px; }
    .project-band > .container { padding: 0 33px; }
    .project-detail { grid-template-columns: 308px 1fr; gap: 48px; padding: 57px 59px 60px; }
    .project-detail__img { aspect-ratio: 1; }
    .project-detail h1 { font-size: 24px; padding-bottom: 12px; }
    .spec th { width: 150px; }
    .tab-panel.is-active { grid-template-columns: 1fr 1fr; }
    .cta-split__col:last-child, .info-split__col:last-child { padding-left: 60px; }
}

@media (max-width: 900px) {
    .project-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    body { font-size: 15px; }
    .site-header__inner { height: 80px; }
    .section { padding: 50px 0 70px; }
    .section-head { margin-bottom: 36px; }
    .section-head h2 { font-size: 40px; }

    .featured__slides { height: 316px; }
    .featured__overlay-label {
        display: block; position: absolute; z-index: 2; top: 50px; left: 0; right: 0; text-align: center;
        color: #fff; font-family: var(--font-head); font-size: 17px; text-transform: uppercase;
    }
    .featured__label { display: none; }
    .featured__bar { height: auto; min-height: 76px; justify-content: space-between; gap: 8px; padding: 10px 6px; }
    .featured__title { font-size: 18px; text-align: center; }

    .intro { grid-template-columns: 1fr; }
    .intro__text { text-align: center; padding: 80px 20px; }
    .intro__text h1 { font-size: 36px; font-weight: 700; }
    .intro__img { height: 116px; }

    .cat-cards { grid-template-columns: 1fr; gap: 30px; }
    .cat-card__name { min-height: 0; }
    .cat-card__body { min-height: 0; }

    .proj-cats { --split: 48.47%; padding-bottom: 60px; }
    .proj-cats .section-head { padding-top: 60px; }
    .proj-cats__art { width: calc(100% - 40px); }

    .cta-split, .info-split { grid-template-columns: 1fr; }
    .cta-split__col, .cta-split__col:first-child, .cta-split__col:last-child,
    .info-split__col, .info-split__col:first-child, .info-split__col:last-child { padding: 50px 24px; }
    .cta-split h2, .info-split h2 { font-size: 40px; }

    .site-footer__nav-row { padding: 30px 40px; }
    .social { align-self: flex-start; }
    .site-footer__bottom-inner { flex-direction: column; align-items: center; padding: 16px 24px; text-align: center; }

    .page-hero { height: 360px; }
    .page-hero__title { top: 90px; right: 24px; font-size: 40px; }
    .page-hero--short { height: 300px; }
    .overlap { margin-top: -120px; }
    .container { padding: 0 20px; }
    .panel, .branches, .follow, .enquiry, .resources { padding: 40px 20px; }

    .group-card { padding: 40px 20px 40px 56px; }
    .group-card::before { left: 30px; top: 50px; }
    .group-card__title { font-size: 36px; }
    .group-card__title::before { left: -32px; }
    .timeline { padding-left: 56px; }
    .timeline::before { left: 30px; }
    .timeline__mark::before { left: -32px; }
    .founder h2, .clients h2 { font-size: 36px; }
    .founder__grid > * { min-width: 0; }
    .logo--lg .logo__top, .logo--lg .logo__tag { font-size: 15px; }
    .logo--lg .logo__pill { font-size: 26px; padding: 8px 18px; letter-spacing: 3px; }
    .clients__grid { grid-template-columns: repeat(2, 1fr); }

    .ec-intro { padding: 40px 20px; }
    .ec-intro h1 { font-size: 44px; }
    .page-hero--ec { height: 392px; }
    .ec-top { --overlap: 116px; }
    .ec-top > .container { padding: 0 20px; }
    .ec-intro p { text-align: left; }
    .ec-how { padding-top: 60px; }
    .ec-how h2, .ec-why h2 { font-size: 36px; }
    .bullets { grid-template-columns: 1fr; }

    .prod-hero { grid-template-columns: 1fr; }
    .prod-hero__img { height: 240px; }
    .prod-hero__text { padding: 50px 24px 150px; }
    .prod-hero__text h1 { font-size: 40px; }
    .prod-body { padding: 40px 20px; }
    .prod-body__label { font-size: 40px; }
    .prod-body__title { font-size: 26px; margin-bottom: 40px; }
    .prod-tools__region { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
    .prod-tools__region .select { width: 100%; }
    .acc-item__head { font-size: 22px; }
    .acc-item__body { padding: 24px 20px 30px; text-align: left; }

    /* Mobile design: whole square banner at screen width, cut just below the ground
       line; the filters continue on its navy, then two card columns */
    .city-hero { height: 47vw; }
    .city-hero__art { height: 100vw; }
    .city-hero__title { top: 40px; right: 30px; font-size: 40px; }
    .projects-layout { grid-template-columns: 1fr; }
    .filters { display: grid; grid-template-columns: 1fr auto; gap: 0 25px; padding: 14px 30px 41px; background: var(--navy); }
    .filters .field { grid-column: 1 / -1; margin-bottom: 18px; }
    .filters .field label { color: #fff; }
    .filters .field--country { grid-column: 1; margin-bottom: 0; }
    .filters__actions { align-self: end; justify-self: end; padding-bottom: 12px; }
    .filters__clear { color: #fff; }
    .filters__clear-icon { background: var(--navy-dark); }
    .projects-main { padding: 40px 21px; }
    .project-grid { grid-template-columns: 1fr 1fr; gap: 20px 19px; }
    .project-card h3 { font-size: 15px; }
    /* Mobile design: no card; the photo sits on the navy strip, the rest on white */
    .project-band { --band: 207px; background: linear-gradient(var(--navy) var(--band), #fff var(--band)); padding-bottom: 50px; }
    .project-band > .container { padding: 0; }
    .project-detail { grid-template-columns: 1fr; gap: 25px; padding: 25px 22px 0; background: transparent; }
    .project-detail h1 { font-size: 22px; padding-bottom: 20px; }
    .spec th { width: 138px; }

    .tab-panel.is-active { grid-template-columns: 1fr; gap: 40px; }
    .tabs { flex-wrap: nowrap; justify-content: space-between; gap: 8px; margin-bottom: 40px; }
    .tabs button { gap: 6px; padding: 8px 0; margin-left: 0; font-size: 16px; white-space: nowrap; }
    .tabs button.is-active { padding: 8px 12px 8px 14px; }
    .tabs button .chev { width: 7px; height: 7px; border-width: 2px; }
    .branches h2, .follow h2, .enquiry h2 { font-size: 36px; }
    .form-grid { grid-template-columns: 1fr; }
    .legal-title { font-size: 28px; }
}

/* -------------------------------------- technical resources, sustainability */
/* Full-height banners; the panel overlaps the banner's bottom edge */
.page-hero--sus { height: 456px; }
.res-wrap { position: relative; z-index: 2; margin-top: -168px; padding-bottom: 80px; }
.sus-wrap { padding-bottom: 83px; }
.sus-wrap > .container { position: relative; z-index: 2; margin-top: -110px; }
.res-wrap > .container, .sus-wrap > .container { max-width: calc(1200px + 48px); }
.resources .acc-item__head { height: 64px; padding-top: 0; padding-bottom: 0; }
.cert-logos { margin-top: 40px; text-align: right; }
.cert-logos img { display: inline-block; width: 346px; max-width: 100%; height: auto; }

@media (max-width: 1100px) {
    .page-hero--res, .page-hero--sus { height: 388px; }
    .page-hero--res .page-hero__title, .page-hero--sus .page-hero__title { top: 82px; right: 89px; font-size: 44px; }
    .res-wrap { margin-top: -144px; padding-bottom: 68px; }
    .sus-wrap { padding-bottom: 58px; }
    .sus-wrap > .container { margin-top: -144px; }
    .res-wrap > .container, .sus-wrap > .container { padding: 0 34px; }
    .resources { padding: 61px 60px 60px; }
    .sus-wrap .panel { padding: 62px 60px 55px; }
    .cert-logos img { width: 344px; }
    .resources .acc-item + .acc-item { margin-top: 32px; }
    .resources .acc-item__head { height: 48px; padding: 0 14px 0 19px; font-size: 20px; }
    .res-list a { padding: 12px 15px 12px 19px; font-size: 18px; }
}

@media (max-width: 720px) {
    .page-hero--res, .page-hero--sus { height: 390px; }
    .page-hero--res .page-hero__title, .page-hero--sus .page-hero__title { top: 120px; right: 36px; max-width: 260px; font-size: 40px; line-height: 1.05; }
    .res-wrap { margin-top: -114px; padding-bottom: 82px; }
    .sus-wrap { padding-bottom: 40px; }
    .sus-wrap > .container { margin-top: -114px; }
    .res-wrap > .container, .sus-wrap > .container { padding: 0 20px; }
    .resources { padding: 41px 20px; }
    .sus-wrap .panel { padding: 40px 20px; }
    .prose { text-align: left; }
    .cert-logos { text-align: center; }
    .cert-logos img { width: 286px; }
    .resources .acc-item + .acc-item { margin-top: 24px; }
    .resources .acc-item__head { font-size: 18px; padding: 0 14px 0 15px; }
    .res-list a { padding: 12px 15px; font-size: 16px; }
}

/* ------------------------------------------------------------ locations */
/* Full-height banner; the map card (one SVG, label included) overlaps it */
.page-hero--loc { height: 514px; }
.loc-wrap > .container { position: relative; z-index: 2; margin-top: -168px; max-width: calc(1200px + 48px); }

@media (max-width: 1100px) {
    .page-hero--loc { height: 390px; }
    .page-hero--loc .page-hero__title { top: 82px; right: 95px; font-size: 44px; }
    .loc-wrap > .container { margin-top: -143px; padding: 0 35px; }
    .loc-wrap .branches { margin-top: 34px; padding-left: 61px; padding-right: 61px; }
}

@media (max-width: 720px) {
    .page-hero--loc .page-hero__title { top: 120px; right: 36px; font-size: 40px; }
    .loc-wrap > .container { margin-top: -114px; padding: 0 20px; }
    .loc-wrap .branches { margin-top: 20px; padding: 40px 20px; }
    .loc-wrap .branches h2 { font-size: 24px; margin-bottom: 30px; }
}

/* -------------------------------------------------------------- contact */
/* Same banner/overlap as Locations; Follow Us and the enquiry form are two panels */
.page-hero--ct { height: 514px; }
.ct-wrap { padding-bottom: 114px; }
.ct-wrap > .container { position: relative; z-index: 2; margin-top: -168px; max-width: calc(1200px + 48px); }
.ct-wrap .enquiry { margin-top: 84px; }

@media (max-width: 1100px) {
    .page-hero--ct { height: 390px; }
    .page-hero--ct .page-hero__title { top: 82px; right: 92px; font-size: 44px; }
    .ct-wrap { padding-bottom: 64px; }
    .ct-wrap > .container { margin-top: -145px; padding: 0 33px; }
    .ct-wrap .follow, .ct-wrap .enquiry { padding: 50px 59px 60px; }
    .ct-wrap .follow h2, .ct-wrap .enquiry h2 { font-size: 40px; }
    .ct-wrap .follow__links { margin-top: 24px; }
    .ct-wrap .enquiry { margin-top: 27px; }
}

@media (max-width: 720px) {
    .page-hero--ct .page-hero__title { top: 120px; right: 36px; font-size: 40px; }
    .ct-wrap { padding-bottom: 40px; }
    .ct-wrap > .container { margin-top: -114px; padding: 0 20px; }
    .ct-wrap .follow, .ct-wrap .enquiry { padding: 40px 20px; }
    .ct-wrap .follow__links { gap: 30px; margin-top: 28px; }
    .ct-wrap .follow__links a { flex-direction: column; align-items: flex-start; gap: 10px; }
    .ct-wrap .follow__links svg { width: 40px; height: 40px; }
    .ct-wrap .enquiry { margin-top: 22px; }
}

/* ---------------------------------------------------------- legal pages */
/* Disclaimer and Privacy Policy: full banner, white panel on a navy band */
.page-hero--legal { height: 514px; }
.legal-wrap { background: var(--navy); padding-bottom: 118px; }
.legal-wrap > .container { position: relative; z-index: 2; margin-top: -168px; max-width: calc(1200px + 48px); }
.legal-wrap .panel { padding: 80px 90px 78px 88px; }
.legal-wrap .prose { text-align: left; }
.legal-wrap .legal-title { font-size: 52px; margin: 0 0 50px 12px; }
.legal-wrap .legal-list { padding-left: 0; }
.legal-wrap .legal-list h3 { font-size: 24px; }
.legal-wrap .legal-list li { margin-bottom: 26px; }
.legal-wrap .legal-list li:last-child { margin-bottom: 20px; }
/* Privacy Policy: roomier paragraphs; the closing company block is navy */
.legal-wrap .prose > p { font-size: 16px; line-height: 1.56; margin: 0 0 39px; }
.legal-wrap .prose > p:last-child { margin-bottom: 0; color: var(--navy); }
.legal-wrap .prose > p:last-child a, .legal-wrap .prose > p:last-child strong { color: inherit; }

@media (max-width: 1100px) {
    .page-hero--legal { height: 390px; }
    .page-hero--legal .page-hero__title { top: 82px; right: 92px; font-size: 44px; }
    .legal-wrap { padding-bottom: 65px; }
    .legal-wrap > .container { margin-top: -145px; padding: 0 33px; }
    .legal-wrap .panel { padding: 55px 61px 58px; }
    .legal-wrap .legal-list p { line-height: 1.45; }
    .legal-wrap .prose { text-align: justify; }
    .legal-wrap .legal-title { font-size: 40px; margin: 0 0 50px 10px; }
    .legal-wrap .legal-list { padding-left: 10px; }
    .legal-wrap .legal-list h3 { font-size: 22px; }
    .legal-wrap .legal-list li { margin-bottom: 20px; }
    .legal-wrap .legal-list li:last-child { margin-bottom: 40px; }
    .legal-wrap .prose > p { line-height: 1.1; margin-bottom: 28px; }
}

@media (max-width: 720px) {
    .page-hero--legal .page-hero__title { top: 120px; right: 36px; max-width: 260px; font-size: 40px; line-height: 1.05; }
    .legal-wrap { padding-bottom: 40px; }
    .legal-wrap > .container { margin-top: -114px; padding: 0 20px; }
    .legal-wrap .panel { padding: 35px 18px 40px; }
    .legal-wrap .prose { text-align: left; }
    .legal-wrap .legal-title { font-size: 36px; line-height: 1.1; margin: 0 0 40px; }
    .legal-wrap .legal-list { padding-left: 6px; }
    .legal-wrap .legal-list h3 { font-size: 22px; line-height: 1.1; }
    .legal-wrap .prose > p { line-height: 1.4; margin-bottom: 24px; }
}

/* ------------------------------------------------------ product category */
/* Photo + navy intro split; the grey "Products available" panel overlaps its foot */
.prod-hero { min-height: 736px; }
.prod-hero__img .img-real { object-position: center bottom; }
.prod-hero__text { padding: 150px 60px 120px 82px; }
.prod-hero__text h1 { max-width: 380px; }
.prod-wrap > .container { position: relative; z-index: 2; margin-top: -185px; max-width: calc(1200px + 48px); }

@media (max-width: 1100px) {
    .prod-hero { grid-template-columns: 598fr 426fr; min-height: 540px; }
    .prod-hero__text { padding: 120px 40px 60px 45px; }
    .prod-hero__text h1 { font-size: 36px; margin-bottom: 18px; }
    .prod-hero__text p { font-size: 15px; }
    .prod-wrap > .container { margin-top: -122px; padding: 0 33px; }
    .prod-body { grid-template-columns: 213px 1fr; padding: 50px 60px 60px; }
    .prod-body__label { font-size: 32px; margin-bottom: 0; }
    .prod-body__title { font-size: 24px; margin-bottom: 50px; }
    /* Category cards stay three across on tablets, as in the design */
    .cat-cards { grid-template-columns: repeat(3, 1fr); gap: 22px; }
    .cat-card__body { padding: 22px 40px 50px 20px; min-height: 200px; }
    .cat-card__name { font-size: 19px; min-height: 48px; margin-bottom: 14px; }
    .cat-card__body .chev { right: 20px; bottom: 26px; }
}

@media (max-width: 720px) {
    /* Photo on top, the navy intro box overlaps it, then the panel on grey */
    .prod-hero { grid-template-columns: 1fr; min-height: 0; background: var(--grey-bg); }
    .prod-hero__img { height: 390px; }
    .prod-hero__text { position: relative; z-index: 2; margin: -114px 20px 0; padding: 32px 22px 44px; }
    .prod-hero__text h1 { font-size: 36px; }
    .prod-wrap { background: var(--grey-bg); }
    .prod-wrap > .container { margin-top: 0; padding: 0; }
    .prod-body { grid-template-columns: 1fr; padding: 40px 20px; }
    .prod-body__label { font-size: 36px; margin-bottom: 30px; }
    .prod-body__title { font-size: 22px; margin-bottom: 30px; }
    .cat-cards { grid-template-columns: 1fr; gap: 30px; }
    .cat-card__body { padding: 28px 70px 34px 26px; min-height: 0; }
    .cat-card__name { font-size: 22px; min-height: 0; margin-bottom: 26px; }
    .cat-card__body .chev { right: 28px; bottom: 42px; }
    /* Single column: the list opens in place instead of covering the next card */
    .cat-card__subs { position: static; box-shadow: none; }
}

/* Very narrow phones: keep the three region tabs on one row */
@media (max-width: 360px) {
    .tabs button { gap: 4px; font-size: 13px; }
    .tabs button.is-active { padding: 8px 10px; }
}