/* PKB Civils – site styles. Brand: navy #000d28, orange #e85225, Public Sans. */ :root { --navy: #000d28; --navy-2: #121f37; /* Slate Grey 16% over Deep Blue */ --navy-3: #202c42; /* Slate Grey 28% over Deep Blue */ --slate: #727d84; --pearl: #e8e7e7; --orange: #e85225; --orange-dark: #e85225; --grad: linear-gradient(#e85225, #e85225); /* solid brand orange; kept as a gradient so text clipping still works */ --grey: #727d84; --ink: #ffffff; --muted: rgba(232, 231, 231, .78); --line: rgba(255, 255, 255, .12); --paper: #000d28; --surface: #121f37; --heading: #ffffff; --sand: #121f37; --radius: 10px; --radius-lg: 18px; --shadow: 0 1px 2px rgba(0, 13, 40, .06), 0 8px 24px rgba(0, 13, 40, .08); --shadow-lg: 0 20px 50px rgba(0, 13, 40, .18); --max: 1200px; --gutter: clamp(16px, 4vw, 32px); --font: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --ease: cubic-bezier(.2, .7, .2, 1); } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--paper); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img, video { max-width: 100%; display: block; } a { color: inherit; } button { font: inherit; cursor: pointer; } h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5em; color: var(--heading); font-weight: 900; } h3, h4 { font-weight: 700; } h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); } h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); } h3 { font-size: 1.25rem; letter-spacing: -.01em; } p { margin: 0 0 1em; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 16px; z-index: 999; background: var(--surface); padding: 8px 12px; border-radius: 6px; } :focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; } .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: clamp(48px, 6vw, 80px) 0; } .section--tight { padding: clamp(40px, 5vw, 64px) 0; } .section--sand { background: var(--navy); } .section--navy { background: var(--navy); color: #e8e7e7; } .section--navy2 { background: var(--navy); color: #e8e7e7; } .section--navy2 h2, .section--navy2 h3 { color: #fff; } .section--navy2 .section-head p { color: rgba(232, 231, 231, .78); } .band { position: relative; isolation: isolate; color: #e8e7e7; overflow: hidden; } .band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 13, 40, .88) 0%, rgba(0, 13, 40, .62) 60%, rgba(0, 13, 40, .45) 100%); } .band h2, .band h3 { color: #fff; } .band .section-head p { color: #e8e7e7; } .band .card { background: rgba(18, 31, 55, .82); border-color: rgba(255, 255, 255, .08); backdrop-filter: blur(4px); } .band .card p { color: #e8e7e7; } .band .review { border: 0; } .band .icon-btn { background: rgba(255, 255, 255, .1); border-color: transparent; color: #fff; } .band .icon-btn:hover:not(:disabled) { background: var(--orange); } .section--navy h2, .section--navy h3 { color: #fff; } .eyebrow { display: none !important; align-items: center; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; } .lede { font-size: clamp(1.08rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 62ch; } .section--navy .lede, .hero .lede { color: #e8e7e7; } .section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(28px, 4vw, 48px); } .section-head > div { max-width: 720px; } .section-head h2 { margin-bottom: .3em; } .section-head p { margin: 0; color: var(--muted); } .section--navy .section-head p { color: rgba(232, 231, 231, .78); } /* Buttons */ .btn { --bg: var(--orange); display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: var(--bg); color: #fff; font-weight: 700; text-decoration: none; border: 2px solid transparent; transition: transform .2s var(--ease), background .2s, box-shadow .2s; white-space: nowrap; font-size: 1rem; line-height: 1.2; } .btn:hover { background: var(--orange); filter: brightness(.92); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(232, 82, 37, .3); } .btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .5); } .btn--ghost:hover { background: rgba(255, 255, 255, .1); box-shadow: none; } .btn--line { background: transparent; color: var(--heading); border-color: var(--heading); } .btn--line:hover { background: #fff; color: var(--navy); box-shadow: none; } .btn--sm { padding: 10px 16px; font-size: .92rem; } .btn svg { width: 18px; height: 18px; flex: none; } .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--orange); text-decoration: none; } .link-arrow svg { width: 18px; height: 18px; transition: transform .2s var(--ease); } .link-arrow:hover svg { transform: translateX(4px); } /* Header: matches the live site (diagonal navy/grey band, orange menu bar with angled ends) */ .site-header { position: relative; z-index: 50; } .nav__band { background: linear-gradient(315deg, #e8e7e7 0%, #e8e7e7 50%, var(--navy) 50%, var(--navy) 100%); padding: 32px 0 26px; } .nav__band-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; } .nav__logo img { width: 100%; max-width: 250px; height: auto; display: block; } .nav__logo { flex: 0 1 250px; margin-left: 12px; } /* clear space around the logo */ .nav__contact { display: flex; align-items: center; gap: 28px; } .nav__contact-links { display: flex; gap: 24px; } .nav__contact-links a { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); text-decoration: none; font-size: .95rem; font-weight: 700; transition: color .2s; } .nav__contact-links a:hover { color: var(--orange); } .nav__contact-links svg { width: 17px; height: 17px; color: var(--orange); } .nav__brief { white-space: nowrap; } .nav { position: absolute; left: 0; right: 0; top: 100%; margin-top: 0; z-index: 3; } /* sits below the grey band so only the photo shows through the angled ends */ .nav__menu { position: relative; display: flex; justify-content: center; align-items: center; gap: .5rem; margin: 0; padding: 4px 0 0; list-style: none; min-height: 54px; background: linear-gradient(90deg, transparent 0, transparent 50px, #e85225 50px, #e85225 calc(100% - 50px), transparent calc(100% - 50px)); border-radius: 3px; } .nav__menu::before, .nav__menu::after { content: ""; position: absolute; bottom: 0; width: 50.5px; height: 100%; z-index: -1; background-repeat: no-repeat; background-size: 100% 100%; } .nav__menu::before { left: 0; background-image: url("/assets/navbar-bg-left.png"); } .nav__menu::after { right: 0; background-image: url("/assets/navbar-bg-right.png"); } .nav__item { position: relative; } .nav__link { display: flex; align-items: center; gap: 6px; padding: 5px 25px 15px; color: #fff; text-decoration: none; text-transform: uppercase; font-size: 1rem; font-weight: 700; line-height: 1.5; background: none; border: 0; } .nav__link:hover, .nav__item.is-open > .nav__link, .nav__item.is-current > .nav__link, .nav__link[aria-current="page"] { color: #fff; text-decoration: none; } .nav__chev { width: 12px; height: 12px; transition: transform .2s; } .nav__item.is-open .nav__chev { transform: rotate(180deg); } .nav__drop { position: absolute; top: 100%; left: 0; min-width: 100%; width: max-content; max-width: 260px; background: var(--navy); list-style: none; margin: 0; padding: 0; border-radius: 0 0 20px 20px; overflow: hidden; visibility: hidden; opacity: 0; transition: opacity .25s linear, visibility .25s linear; z-index: 100; text-align: center; } .nav__item.is-open .nav__drop { visibility: visible; opacity: 1; } .nav__drop li:first-child { border-top: 1px solid #fff; } .nav__drop li:not(:last-child) { border-bottom: 1px solid #fff; } .nav__drop a { display: block; color: #fff; text-decoration: none; padding: 10px 16px; font-size: .85rem; line-height: 1.3; } .nav__drop a:hover { background: #e85225; } .nav__toggle { display: none; background: none; border: 0; color: var(--navy); padding: 6px; } .nav__toggle svg { width: 30px; height: 30px; } @media (max-width: 1180px) { .nav__link { padding: 5px 14px 15px; font-size: .9rem; } } @media (max-width: 1000px) { .nav__band { background: linear-gradient(225deg, #e8e7e7 0%, #e8e7e7 55%, var(--navy) 55%, var(--navy) 100%); padding: 20px 0; } .nav__logo { flex-basis: 170px; margin-left: 4px; } .nav__contact-links { display: none; } .nav__contact { margin-left: auto; } .nav__brief { padding: 8px 14px; font-size: .88rem; } .nav__toggle { display: block; } .nav { position: fixed; inset: 0; top: 0; margin: 0; background: var(--navy); padding: 90px var(--gutter) 40px; overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity .25s, visibility .25s; z-index: 60; } .site-header.is-open .nav { visibility: visible; opacity: 1; } .site-header.is-open .nav__toggle { position: fixed; top: 16px; right: var(--gutter); z-index: 70; color: #fff; } .nav__menu { flex-direction: column; align-items: stretch; background: none; gap: 0; padding: 0; } .nav__menu::before, .nav__menu::after { display: none; } .nav__link { width: 100%; justify-content: space-between; padding: 16px 4px; font-size: 1.05rem; border-bottom: 1px solid rgba(255, 255, 255, .12); } .nav__drop { position: static; visibility: visible; opacity: 1; display: none; max-width: none; width: 100%; border-radius: 0; background: transparent; text-align: left; } .nav__item.is-open .nav__drop { display: block; } .nav__drop li, .nav__drop li:first-child, .nav__drop li:not(:last-child) { border: 0; } .nav__drop a { padding: 10px 16px; font-size: .98rem; color: #e8e7e7; } } @media (max-width: 420px) { .nav__logo { flex-basis: 150px; } } /* Hero */ .hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; isolation: isolate; } .hero__media { position: absolute; inset: 0; z-index: -2; } .hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; } /* One navy fade on every page header (pages, services, sectors, locations, articles, projects) */ :root { --hero-fade: linear-gradient(90deg, rgba(0, 13, 40, .92) 0%, rgba(0, 13, 40, .74) 40%, rgba(0, 13, 40, .38) 75%, rgba(0, 13, 40, .22) 100%); } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hero-fade); } .hero__inner { padding: clamp(96px, 11vw, 150px) 0 clamp(56px, 8vw, 104px); max-width: 760px; } .hero--home .hero__inner { padding-top: clamp(80px, 13vw, 168px); padding-bottom: clamp(80px, 12vw, 150px); } .hero h1 { color: #fff; } .hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .hero--slim .hero__inner { padding: clamp(88px, 9vw, 120px) 0 clamp(48px, 7vw, 88px); } .crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: .88rem; color: rgba(232, 231, 231, .78); margin-bottom: 18px; padding: 0; list-style: none; } .crumbs a { text-decoration: none; } .crumbs a:hover { color: #fff; } .crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; } /* Benefit bar: orange ticker on every page; icons in navy circles; fades at the edges; pauses on hover */ .trust { background: var(--orange); color: #fff; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } .trust__track { display: flex; width: max-content; animation: ticker 50s linear infinite; } .trust:hover .trust__track { animation-play-state: paused; } .trust ul { list-style: none; margin: 0; padding: 12px 0; display: flex; flex: none; gap: 48px; padding-right: 48px; font-weight: 700; font-size: 1.02rem; letter-spacing: .01em; } .trust li { display: flex; align-items: center; gap: 12px; white-space: nowrap; } .trust__icon { width: 38px; height: 38px; border-radius: 50%; background: var(--navy); display: grid; place-items: center; flex: none; transition: background .25s, transform .3s var(--ease); } .trust__icon svg { width: 20px; height: 20px; color: #fff; stroke-width: 2; transition: color .25s; } .trust li:hover .trust__icon { background: #fff; transform: scale(1.08); } .trust li:hover .trust__icon svg { color: var(--orange); } @keyframes ticker { to { transform: translateX(-50%); } } @media (min-width: 1100px) { .trust { -webkit-mask-image: none; mask-image: none; } .trust__track { animation: none; width: auto; justify-content: center; } .trust ul[aria-hidden] { display: none; } .trust ul { padding-right: 0; gap: 56px; } } @media (max-width: 640px) { .trust ul { gap: 32px; padding-right: 32px; font-size: .92rem; padding-top: 10px; padding-bottom: 10px; } .trust__icon { width: 32px; height: 32px; } .trust__icon svg { width: 17px; height: 17px; } } /* Grids and cards */ .grid { display: grid; gap: clamp(16px, 2.4vw, 28px); } .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)); } @media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; position: relative; } a.card { text-decoration: none; display: block; } a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; } .card h3 { margin-bottom: .4em; } .card p { color: var(--muted); margin: 0; } .card .link-arrow { margin-top: 16px; } .card__icon { width: 48px; height: 48px; border-radius: 12px; background: var(--navy); color: var(--orange); display: grid; place-items: center; margin-bottom: 18px; } .section--navy .card__icon, .band .card__icon, .aside__cta .card__icon { background: var(--orange); color: #fff; } .card__icon svg { width: 24px; height: 24px; } .section--navy .card { background: var(--navy-2); border-color: var(--navy-3); } .card--navy { background: var(--navy); border-color: var(--heading); } .card--navy h3 { color: #fff; } .card--navy p { color: rgba(232, 231, 231, .78); } .card--navy .card__icon { background: var(--orange); color: #fff; } a.card--navy:hover { background: var(--navy-2); } .section--navy .card p { color: rgba(232, 231, 231, .78); } /* Image tiles (sectors) */ .tile { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; color: #fff; text-decoration: none; isolation: isolate; background: var(--navy-2); } .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--ease); } .tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 13, 40, 0) 30%, rgba(0, 13, 40, .9) 100%); } .tile:hover img { transform: scale(1.06); } .tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; } .tile__body h3 { color: #fff; margin: 0 0 4px; font-size: 1.35rem; } .tile__body p { margin: 0; color: #e8e7e7; font-size: .94rem; line-height: 1.45; } .tile__count { position: absolute; top: 16px; right: 16px; background: rgba(0, 13, 40, .7); backdrop-filter: blur(6px); padding: 5px 11px; border-radius: 999px; font-size: .8rem; font-weight: 700; } /* Split / media blocks */ .split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; } .split--rev > :first-child { order: 2; } .split__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--sand); } .split__media img, .split__media video { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split--rev > :first-child { order: 0; } } .prose { max-width: 70ch; } .prose p { color: var(--ink); } .prose h2 { margin-top: 1.6em; font-size: clamp(1.45rem, 2.4vw, 1.9rem); } .prose h3 { margin-top: 1.4em; } .prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1.2em; } .prose li { margin-bottom: .45em; } .prose li::marker { color: var(--orange); } .prose img { border-radius: var(--radius); margin: 1.6em 0; } .prose a { color: var(--orange); } .ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .ticks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; } .ticks li::before { content: ""; width: 24px; height: 24px; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat; margin-top: 2px; } /* Stats */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--navy-3); border-radius: var(--radius-lg); overflow: hidden; } .stat { background: var(--navy-2); padding: 26px 22px; } .stat b { display: block; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; color: #fff; letter-spacing: -.03em; margin-bottom: 8px; } .stat span { color: rgba(232, 231, 231, .78); font-size: .94rem; } .stats--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; } .stats--3 { grid-template-columns: 1fr; } } /* Steps */ .steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(16px, 2.4vw, 28px); } .step { position: relative; padding: 26px 24px 24px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: block; font-size: 2.2rem; font-weight: 900; letter-spacing: -.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; line-height: 1; } .step h3 { font-size: 1.12rem; } .step p { color: var(--muted); margin: 0; font-size: .97rem; } .section--navy2 .tile { box-shadow: 0 10px 30px rgba(0, 0, 0, .3); } .section--navy .step { background: var(--navy-2); border-color: var(--navy-3); } .section--navy .step p { color: rgba(232, 231, 231, .78); } /* Reviews */ .reviews { position: relative; } .reviews__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 24px) / 3); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; } .reviews__track::-webkit-scrollbar { display: none; } @media (max-width: 980px) { .reviews__track { grid-auto-columns: calc((100% - 24px) / 2); } } @media (max-width: 640px) { .reviews__track { grid-auto-columns: 88%; } } .review { scroll-snap-align: start; background: var(--surface); border-radius: var(--radius-lg); padding: 28px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; } .review__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .review__stars { color: #fbbc04; display: inline-flex; gap: 2px; } .review__stars svg { width: 18px; height: 18px; } .review__stars svg.is-off { color: #d5d9de; } .review__src { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); font-weight: 500; } .grating { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; margin-right: 6px; } .grating b { font-size: 1.1rem; color: var(--heading); } .grating span { color: var(--muted); font-size: .88rem; } .logos { border-bottom: 1px solid var(--line); } .logos__title { text-align: center; font-weight: 700; color: var(--muted); font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 22px; } .logos__window { display: flex; overflow: hidden; justify-content: center; } .logos__window.is-moving { justify-content: flex-start; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .logos__track { display: flex; align-items: center; gap: 56px; list-style: none; margin: 0; padding: 0 28px; flex: none; } .logos__window.is-moving .logos__track { animation: logos 40s linear infinite; } .logos__track img { height: 44px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .25s, opacity .25s; } .logos__track img:hover { filter: none; opacity: 1; } @keyframes logos { to { transform: translateX(-100%); } } .review blockquote { margin: 0; color: var(--ink); font-size: 1.02rem; } .review cite { font-style: normal; color: var(--muted); font-size: .9rem; margin-top: auto; } .reviews__nav { display: flex; gap: 10px; } .icon-btn { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--heading); transition: .2s; } .icon-btn:hover:not(:disabled) { background: var(--navy); color: #fff; border-color: var(--heading); } .icon-btn:disabled { opacity: .35; cursor: default; } .icon-btn svg { width: 20px; height: 20px; } /* FAQ */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative; font-weight: 700; font-size: 1.08rem; color: var(--heading); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .25s var(--ease), background-color .2s; } .faq details[open] summary::after { transform: rotate(45deg); } .faq summary:hover { color: var(--orange); } .faq__a { padding: 0 48px 22px 0; color: var(--muted); } .faq__a p:last-child { margin: 0; } .faq-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(28px, 5vw, 72px); align-items: start; } @media (max-width: 860px) { .faq-layout { grid-template-columns: 1fr; } } /* CTA band */ .cta-band { position: relative; background: var(--orange); color: #fff; border-radius: var(--radius-lg); overflow: hidden; padding: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: 1.4fr auto; gap: 24px 40px; align-items: center; isolation: isolate; } .cta-band h2 { color: #fff; margin-bottom: .25em; text-wrap: balance; } .cta-band p { color: #fff; margin: 0; max-width: 56ch; } .cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; } @media (max-width: 860px) { .cta-band { grid-template-columns: 1fr; } } /* Pills / chips */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--orange); color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .01em; text-decoration: none; } .pill--navy { background: rgba(0, 13, 40, .78); color: #fff; backdrop-filter: blur(6px); } .pill--line { background: transparent; border: 1px solid rgba(255, 255, 255, .35); color: #fff; } .pill svg { width: 14px; height: 14px; } /* Project cards: photo fills the card, navy fade, details slide up on hover */ .pcard { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--navy); text-decoration: none; color: #fff; isolation: isolate; transition: transform .35s var(--ease), box-shadow .35s; } .pcard:hover, .pcard.is-hot { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(0, 13, 40, .35); } .pcard__media { position: absolute; inset: 0; z-index: -1; } .pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .pcard:hover .pcard__media img { transform: scale(1.07); } .pcard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 13, 40, 0) 30%, rgba(0, 13, 40, .78) 62%, rgba(0, 13, 40, .97) 100%); transition: background .35s; } .pcard:hover .pcard__media::after { background: linear-gradient(180deg, rgba(0, 13, 40, .1) 0%, rgba(0, 13, 40, .85) 45%, rgba(0, 13, 40, .98) 100%); } .pcard__media .pill { position: absolute; top: 16px; left: 16px; z-index: 1; } .pcard__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 22px 20px; } .pcard__place { display: flex; align-items: center; gap: 6px; color: var(--orange); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; } .pcard__place svg { width: 15px; height: 15px; } .pcard h3 { color: #fff; font-size: 1.25rem; margin-bottom: 0; } .pcard p { color: #e8e7e7; font-size: .95rem; margin: 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s var(--ease), opacity .3s, margin .3s; } .pcard:hover p, .pcard:focus-visible p { max-height: 8em; opacity: 1; margin-top: 10px; } .pcard__facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .pcard__facts span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); backdrop-filter: blur(4px); font-size: .82rem; font-weight: 500; color: #fff; } .pcard__facts svg { width: 14px; height: 14px; color: var(--orange); } .pcard__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 700; color: #fff; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s var(--ease), opacity .3s; } .pcard__cta svg { width: 18px; height: 18px; color: var(--orange); } .pcard:hover .pcard__cta, .pcard:focus-visible .pcard__cta { max-height: 2em; opacity: 1; } @media (hover: none) { .pcard p { max-height: none; opacity: 1; margin-top: 10px; } .pcard__cta { max-height: none; opacity: 1; } } @media (max-width: 640px) { .pcard { aspect-ratio: 4 / 4.4; } } /* Projects explorer */ .explorer__bar { position: sticky; top: 0; z-index: 20; background: rgba(0, 13, 40, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .explorer__bar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 14px; padding-bottom: 14px; } .chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1 1 520px; padding: 2px; } .chips::-webkit-scrollbar { display: none; } .chip { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--heading); font-weight: 500; font-size: .93rem; transition: .18s; } .chip:hover { border-color: var(--heading); } .chip[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--heading); } .chip b { font-size: .78rem; background: var(--sand); color: var(--muted); padding: 1px 7px; border-radius: 999px; } .chip[aria-pressed="true"] b { background: rgba(255, 255, 255, .16); color: #fff; } .chip:disabled { opacity: .4; cursor: default; } .explorer__tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .field { position: relative; } .field svg { position: absolute; left: 13px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; color: var(--grey); pointer-events: none; } .input, .select { font: inherit; font-size: .95rem; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); min-height: 42px; } .field .input { padding-left: 38px; width: 210px; } .select { padding-right: 34px; appearance: none; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center / 14px no-repeat; } .input:focus, .select:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232, 82, 37, .18); } .seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--sand); } .seg button { border: 0; background: none; padding: 8px 14px; border-radius: 999px; font-weight: 500; font-size: .92rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; } .seg button svg { width: 16px; height: 16px; } .seg button[aria-pressed="true"] { background: var(--orange); color: #fff; } .explorer__summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--muted); } .explorer__summary strong { color: var(--heading); } .explorer__reset { border: 0; background: none; color: var(--orange); font-weight: 700; padding: 0; } .explorer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } @media (max-width: 980px) { .explorer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .explorer__grid { grid-template-columns: 1fr; } .field .input { width: 100%; } .field { flex: 1; } } .explorer__grid > * { animation: rise .45s var(--ease) both; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } } .explorer__empty { text-align: center; padding: 64px 16px; border: 2px dashed var(--line); border-radius: var(--radius-lg); color: var(--muted); } .explorer__map { display: grid; grid-template-columns: 380px 1fr; height: min(72vh, 680px); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); } .explorer__list { overflow-y: auto; background: var(--surface); border-right: 1px solid var(--line); } .mitem { display: grid; grid-template-columns: 88px 1fr; gap: 14px; padding: 14px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background .15s; } .mitem:hover, .mitem.is-hot { background: var(--sand); } .mitem img { width: 88px; height: 66px; object-fit: cover; border-radius: 8px; } .mitem strong { display: block; color: var(--heading); font-size: .97rem; line-height: 1.3; margin-bottom: 4px; } .mitem span { color: var(--muted); font-size: .85rem; } #map { width: 100%; height: 100%; background: #121f37; } @media (max-width: 860px) { .explorer__map { grid-template-columns: 1fr; grid-template-rows: 52vh auto; height: auto; } .explorer__list { order: 2; max-height: 50vh; border-right: 0; border-top: 1px solid var(--line); } } .leaflet-container, .leaflet-container * { font-family: var(--font) !important; } /* keep each map's own layers (Leaflet uses z-index 400 to 1000) inside the map, so a map never sits over the cookie pop-up, menus or other pop-ups */ .leaflet-container { isolation: isolate; z-index: 0; } .leaflet-tile-pane { filter: grayscale(.85) contrast(.95) brightness(1.04); } .pin { width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--orange); border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0, 13, 40, .35); display: grid; place-items: center; transition: transform .2s, background .2s; } .pin span { transform: rotate(45deg); color: #fff; font-weight: 900; font-size: 12px; } .pin.is-hot { background: var(--navy); transform: rotate(-45deg) scale(1.2); } .pin--home { background: var(--navy); } .leaflet-popup-content-wrapper { border-radius: 14px; padding: 0; overflow: hidden; } .leaflet-popup-content { margin: 0; width: 260px !important; } .mpop img { width: 100%; height: 130px; object-fit: cover; } .mpop div { padding: 12px 14px 14px; } .mpop strong { display: block; color: var(--heading); font-size: 1rem; line-height: 1.3; margin-bottom: 6px; } .mpop a { color: var(--orange); font-weight: 700; text-decoration: none; } /* Project detail */ .phero { position: relative; min-height: min(78vh, 720px); display: flex; align-items: flex-end; color: #fff; background: var(--navy); isolation: isolate; overflow: hidden; } .phero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.04); animation: heroIn 1.4s var(--ease) forwards; } @keyframes heroIn { to { transform: none; } } /* Project headers: navy behind the text on the left, clearing to the bright photo on the right (Lauren, 6 Nov 2026) */ .phero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 13, 40, 0) 70%, rgba(0, 13, 40, .35) 100%), linear-gradient(90deg, rgba(0, 13, 40, .92) 0%, rgba(0, 13, 40, .8) 32%, rgba(0, 13, 40, .3) 55%, rgba(0, 13, 40, 0) 72%); } .phero__inner { padding-top: 150px; padding-bottom: 48px; } .phero h1 { color: #fff; max-width: 20ch; margin-bottom: .35em; } .phero .lede { color: #e8e7e7; max-width: 60ch; margin-bottom: 0; } .phero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .facts { background: var(--navy); color: #fff; } .facts__row { display: flex; flex-wrap: wrap; border-top: 1px solid var(--navy-3); } .facts__row > .fact { flex: 1 1 auto; } /* each fact as wide as its text, so values stay on one line */ .fact b { white-space: nowrap; } .fact { padding: 22px 20px 22px 0; display: flex; gap: 14px; align-items: center; } .fact + .fact { padding-left: 20px; border-left: 1px solid var(--navy-3); } .fact svg { width: 26px; height: 26px; color: var(--orange); flex: none; } .fact small { display: block; color: rgba(232, 231, 231, .7); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; } .fact b { display: block; font-size: 1.12rem; line-height: 1.25; } .fact b[data-count] { font-variant-numeric: tabular-nums; } @media (max-width: 760px) { .facts__row { display: grid; grid-template-columns: 1fr 1fr; } .fact b { white-space: normal; } .fact { padding: 16px 12px 16px 0; } .fact + .fact { padding-left: 0; border-left: 0; } } .pbody { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 5vw, 72px); align-items: start; } @media (max-width: 960px) { .pbody { grid-template-columns: 1fr; } } .story { position: relative; } .story__step { position: relative; padding: 0 0 40px 72px; } .story__step::before { content: ""; position: absolute; left: 23px; top: 52px; bottom: 6px; width: 2px; background: var(--line); } .story__step:last-child::before { display: none; } .story__step::after { content: ""; position: absolute; left: 23px; top: 52px; width: 2px; height: 0; background: var(--grad); transition: height .9s var(--ease); } .story__step.is-in::after { height: calc(100% - 58px); } .story__step:last-child::after { display: none; } .story__num { position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--sand); color: var(--heading); font-weight: 900; transition: background .4s, color .4s, transform .4s var(--ease); } .story__step.is-in .story__num { background: var(--grad); color: #fff; transform: scale(1.05); } .story__step h2 { font-size: 1.5rem; margin: 8px 0 12px; } .story__step p { color: var(--ink); } .story__step .ticks { margin-top: 6px; } .aside { position: sticky; top: 24px; display: grid; gap: 18px; } .aside .card { padding: 24px; } .aside dl { margin: 0; display: grid; gap: 0; } .aside dl div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .95rem; } .aside dl div:last-child { border: 0; } .aside dt { color: var(--muted); } .aside dd { margin: 0; font-weight: 700; color: var(--heading); text-align: right; } .aside__cta { background: var(--navy); color: #fff; border: 0; } .aside__cta h3 { color: #fff; } .aside__cta p { color: rgba(232, 231, 231, .78); margin-bottom: 18px; } .aside__cta .btn { width: 100%; } .aside__cta .btn + .btn { margin-top: 10px; } .minimap { height: 200px; border-radius: var(--radius); overflow: hidden; margin-top: 16px; background: var(--sand); } .quote { position: relative; background: var(--sand); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 48px); padding-left: clamp(28px, 6vw, 88px); } .quote::before { content: "\201C"; position: absolute; left: clamp(14px, 2vw, 28px); top: clamp(4px, 1vw, 10px); font-size: clamp(5rem, 9vw, 7rem); line-height: 1; font-weight: 900; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .quote blockquote { margin: 0 0 14px; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.45; color: var(--heading); font-weight: 500; letter-spacing: -.01em; } .quote cite { font-style: normal; color: var(--muted); } /* Before / after */ .compare { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 10; user-select: none; touch-action: pan-y; background: var(--sand); --pos: 50%; } .compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .compare__top { clip-path: inset(0 calc(100% - var(--pos)) 0 0); } .compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; } .compare__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--surface); box-shadow: 0 0 12px rgba(0, 0, 0, .3); } .compare__knob { position: absolute; top: 50%; left: 0; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); cursor: ew-resize; } .compare__knob svg { width: 26px; height: 26px; } .compare input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: ew-resize; } .stages { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } /* Gallery */ .gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 12px; } .gallery button { border: 0; padding: 0; border-radius: var(--radius); overflow: hidden; position: relative; background: var(--sand); } .gallery button:first-child { grid-column: span 2; grid-row: span 2; } .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .3s; } .gallery button:hover img { transform: scale(1.06); filter: brightness(.85); } .gallery button::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 40px no-repeat; opacity: 0; transition: opacity .25s; } .gallery button:hover::after { opacity: 1; } @media (max-width: 760px) { .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; } } .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0, 13, 40, .96); display: none; align-items: center; justify-content: center; } .lightbox.is-open { display: flex; animation: fade .2s; } @keyframes fade { from { opacity: 0; } } .lightbox figure { margin: 0; max-width: min(92vw, 1400px); max-height: 86vh; display: flex; flex-direction: column; align-items: center; } .lightbox img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 8px; } .lightbox figcaption { color: rgba(232, 231, 231, .78); margin-top: 12px; font-size: .92rem; } .lightbox .icon-btn { position: absolute; background: rgba(255, 255, 255, .1); border-color: transparent; color: #fff; } .lightbox .icon-btn:hover { background: var(--orange); } .lightbox__close { top: 18px; right: 18px; } .lightbox__prev { left: 18px; top: 50%; margin-top: -23px; } .lightbox__next { right: 18px; top: 50%; margin-top: -23px; } .pnav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .pnav a { display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; transition: .2s; } .pnav a:hover { border-color: var(--orange); background: var(--sand); } .pnav small { color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: .76rem; } .pnav strong { color: var(--heading); } .pnav a:last-child { text-align: right; } @media (max-width: 640px) { .pnav { grid-template-columns: 1fr; } .pnav a:last-child { text-align: left; } } /* Articles */ .hub-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; } .acard { display: flex; flex-direction: column; text-decoration: none; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); transition: .25s var(--ease); height: 100%; } .acard:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .acard__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--sand); } .acard__media img { width: 100%; height: 100%; object-fit: cover; } .acard__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .acard h3 { font-size: 1.12rem; margin: 0; } .acard p { color: var(--muted); font-size: .95rem; margin: 0; } .acard__meta { margin-top: auto; color: var(--grey); font-size: .85rem; display: flex; gap: 14px; } .article { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; } @media (max-width: 960px) { .article { grid-template-columns: 1fr; } .toc { display: none; } } .toc { position: sticky; top: 24px; font-size: .92rem; } .toc strong { display: block; margin-bottom: 12px; color: var(--heading); } .toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); } .toc a { display: block; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; line-height: 1.35; } .toc a:hover { color: var(--heading); } .toc a.is-active { color: var(--orange); border-left-color: var(--orange); font-weight: 500; } .progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--grad); z-index: 60; width: 0; } .callout { background: var(--sand); border-radius: var(--radius); padding: 20px 24px; margin: 0 0 1.6em; } .callout h2 { margin-top: 0 !important; font-size: 1.25rem !important; font-weight: 700; letter-spacing: -.01em; color: #fff; } .callout p:last-child { margin-bottom: 0; } .author { display: flex; gap: 14px; align-items: center; padding: 20px 0; border-top: 1px solid var(--line); margin-top: 40px; color: var(--muted); font-size: .94rem; } .author img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; } .author strong { color: var(--heading); display: block; } /* People */ .person { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; } .person__media { aspect-ratio: 1 / 1; background: var(--navy); position: relative; } .person__media video, .person__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } .person__media--empty { display: grid; place-items: center; color: #fff; font-size: 2.6rem; font-weight: 900; background: var(--grad); } .person__body { padding: 22px 24px 26px; } .person__body h3 { margin: 0 0 2px; } .person__role { color: var(--orange); font-weight: 700; font-size: .92rem; margin-bottom: 12px; display: block; } .person__body p { color: var(--muted); font-size: .96rem; margin: 0; } /* Timeline */ .timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; position: relative; } .timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 2px; background: var(--navy-3); } .tl { position: relative; padding: 52px 24px 0 0; } .tl::before { content: ""; position: absolute; top: 10px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--navy); border: 4px solid var(--orange); } .tl b { display: block; font-size: 1.9rem; color: #fff; letter-spacing: -.03em; margin-bottom: 6px; } .tl p { color: rgba(232, 231, 231, .78); margin: 0; } @media (max-width: 640px) { .timeline { grid-template-columns: 1fr; } .timeline::before { left: 9px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; } .tl { padding: 0 0 28px 44px; } .tl::before { top: 6px; } } /* Jobs */ .job { display: grid; grid-template-columns: 1fr auto; gap: 16px 24px; align-items: center; padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); text-decoration: none; transition: .2s; } .job:hover { border-color: var(--orange); box-shadow: var(--shadow); } .job h3 { margin: 0 0 6px; } .job p { margin: 8px 0 0; color: var(--muted); } .job__meta { display: flex; flex-wrap: wrap; gap: 8px; } @media (max-width: 640px) { .job { grid-template-columns: 1fr; } } /* Forms */ .form { display: grid; gap: 18px; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } } .form label, .form legend { display: block; font-weight: 700; font-size: .93rem; color: var(--heading); margin-bottom: 7px; } .form label span, .form legend span { color: var(--muted); font-weight: 400; } .form input:not([type=checkbox]):not([type=radio]), .form select, .form textarea { width: 100%; font: inherit; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); transition: border-color .15s, box-shadow .15s; } .form textarea { min-height: 140px; resize: vertical; } .form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232, 82, 37, .16); } .form fieldset { border: 0; padding: 0; margin: 0; } .form .checks { display: flex; flex-wrap: wrap; gap: 8px; } .form .checks label { margin: 0; font-weight: 500; font-size: .92rem; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; color: var(--ink); transition: .15s; } .form .checks input { accent-color: var(--orange); } .form .checks label:has(input:checked) { border-color: var(--heading); background: var(--navy); color: #fff; } .form__note { font-size: .88rem; color: var(--muted); } .form__alert { border-radius: var(--radius); padding: 16px 18px; background: var(--sand); border: 0; color: var(--ink); display: none; } .form__alert.is-shown { display: block; } .form__alert strong { color: var(--orange-dark); } .form [aria-invalid="true"] { border-color: #c0392b !important; } .form__error { color: #c0392b; font-size: .86rem; margin-top: 5px; display: none; } [aria-invalid="true"] + .form__error { display: block; } .form-card { background: var(--surface); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-lg); } .form-steps { display: flex; gap: 8px; margin-bottom: 24px; } .form-steps span { flex: 1; height: 4px; border-radius: 2px; background: var(--line); transition: background .3s; } .form-steps span.is-done { background: var(--grad); } .form-page[hidden] { display: none; } .form__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; } .contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .contact-list li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; } .contact-list .card__icon { width: 44px; height: 44px; margin: 0; } .contact-list strong { display: block; color: var(--heading); } .contact-list a { color: var(--orange); font-weight: 500; text-decoration: none; } .section--navy .contact-list strong { color: #fff; } /* Footer */ .site-footer { background: var(--navy); color: rgba(232, 231, 231, .78); font-size: .95rem; padding-top: clamp(56px, 7vw, 88px); } .site-footer a { text-decoration: none; } .site-footer a:hover { color: #fff; } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 32px; padding-bottom: 48px; } .footer__grid h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 16px; } .footer__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .footer__brand img { height: 32px; width: auto; margin-bottom: 18px; } .footer__brand p { max-width: 34ch; } .footer__accred { display: flex; align-items: center; gap: 12px; margin-top: 18px; } .footer__accred img { height: 54px; width: auto; background: var(--surface); border-radius: 6px; padding: 4px; margin: 0; } .footer__social { display: flex; gap: 10px; margin-top: 18px; } .footer__social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-2); } .footer__social--li:hover { background: #0a66c2; } .footer__social--yt:hover { background: #ff0000; } .footer__social svg { width: 18px; height: 18px; color: #fff; } .footer__more { border-top: 1px solid var(--navy-2); padding: 26px 0 28px; } .footer__more h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 14px; } .footer__more ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px 28px; font-size: .92rem; } .footer__base { border-top: 1px solid var(--navy-2); padding: 22px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: .86rem; } .footer__base ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; } @media (max-width: 1080px) { .footer__grid { grid-template-columns: 1fr 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } } @media (max-width: 640px) { .footer__grid { grid-template-columns: 1fr 1fr; } } /* Mobile sticky call bar */ .callbar { display: none; } @media (max-width: 640px) { .callbar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--navy); box-shadow: 0 -6px 18px rgba(0, 0, 0, .2); } .callbar a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; color: #fff; text-decoration: none; font-weight: 700; } .callbar a + a { background: var(--orange); } .callbar svg { width: 18px; height: 18px; } body { padding-bottom: 52px; } } /* Reveal on scroll */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } /* hidden only when JS can reveal it */ .js .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .center { text-align: center; } .mt-l { margin-top: clamp(32px, 4vw, 48px); } .video-btn { position: relative; display: block; width: 100%; border: 0; padding: 0; background: var(--navy); border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 9; } .video-btn img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: transform .6s var(--ease), opacity .3s; } .video-btn:hover img { transform: scale(1.04); opacity: 1; } .video-btn__play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(232, 82, 37, .25); transition: transform .25s var(--ease); } .video-btn:hover .video-btn__play { transform: scale(1.08); } .video-btn__play svg { width: 30px; height: 30px; margin-left: 4px; } .video-btn video { width: 100%; height: 100%; object-fit: cover; } /* How it works stepper */ .stepper { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } .stepper__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .stepper__tab { position: relative; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-lg); padding: 18px 20px 22px; display: flex; align-items: center; gap: 14px; overflow: hidden; transition: background .25s, border-color .25s, transform .25s var(--ease); } .stepper__tab:hover { transform: translateY(-2px); border-color: var(--heading); } .stepper__num { font-size: 1.6rem; font-weight: 900; letter-spacing: -.04em; color: var(--grey); transition: color .25s; } .stepper__label { font-weight: 700; color: var(--heading); line-height: 1.25; } .stepper__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: transparent; } .stepper__bar i { display: block; height: 100%; width: 0; background: var(--orange); } .stepper__tab[aria-selected="true"] { background: var(--navy); border-color: var(--heading); } .stepper__tab[aria-selected="true"] .stepper__num { color: var(--orange); } .stepper__tab[aria-selected="true"] .stepper__label { color: #fff; } .stepper__tab.is-done .stepper__num { color: var(--orange); } .stepper__panel { display: grid; grid-template-columns: 5fr 7fr; background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); min-height: 400px; animation: panelIn .45s var(--ease); } @keyframes panelIn { from { opacity: 0; transform: translateY(10px); } } .stepper__media { position: relative; background: var(--navy); overflow: hidden; } .stepper__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns 7s ease-out both; } @keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1); } } .stepper__big { position: absolute; left: 20px; bottom: 6px; font-size: clamp(4rem, 9vw, 7rem); font-weight: 900; line-height: 1; color: #fff; letter-spacing: -.05em; text-shadow: 0 4px 24px rgba(0, 13, 40, .5); } .stepper__body { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; } .stepper__body h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); } .stepper__body p { color: var(--muted); font-size: 1.05rem; } .stepper__body .ticks { margin: 8px 0 24px; } .stepper__body .btn { align-self: flex-start; } @media (max-width: 860px) { .stepper__tabs { display: flex; overflow-x: auto; scrollbar-width: none; } .stepper__tabs::-webkit-scrollbar { display: none; } .stepper__tab { flex: 0 0 auto; padding: 14px 16px 18px; } .stepper__panel { grid-template-columns: 1fr; } .stepper__media { aspect-ratio: 16 / 10; } } /* Our values: original layout, photo band with white cards over its edge */ .values { padding-bottom: clamp(56px, 8vw, 104px); } .values__band { position: relative; isolation: isolate; color: #fff; padding: clamp(64px, 9vw, 112px) 0 clamp(150px, 16vw, 200px); overflow: hidden; } .values__band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .values__band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 13, 40, .82), rgba(0, 13, 40, .55)); } .values__band h2 { color: #fff; } .values__band .lede { color: #e8e7e7; } .values__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); margin-top: clamp(-150px, -13vw, -110px); position: relative; } .value { background: var(--surface); border-radius: var(--radius-lg); padding: 40px 30px 36px; text-align: center; box-shadow: 0 10px 30px rgba(0, 13, 40, .14); transition: transform .3s var(--ease), box-shadow .3s; } .value:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 13, 40, .2); } .value img { width: 96px; height: 96px; margin: 0 auto 22px; object-fit: contain; } .value h3 { color: var(--grey); font-size: 1.6rem; font-weight: 700; } .value p { color: var(--grey); margin: 0; } @media (max-width: 860px) { .values__grid { grid-template-columns: 1fr; } } /* Yard checker */ .checker { background: var(--navy); color: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .checker__head { display: flex; justify-content: space-between; align-items: center; padding: 20px clamp(20px, 4vw, 40px); border-bottom: 1px solid var(--navy-3); } .checker__dots { display: flex; gap: 8px; } .checker__dots span { width: 34px; height: 6px; border-radius: 3px; background: var(--navy-3); transition: background .3s; } .checker__dots span.is-on { background: var(--orange); } .checker__count { color: rgba(232, 231, 231, .7); font-size: .9rem; font-weight: 500; } .checker__body { padding: clamp(24px, 4vw, 40px); } .checker__step { border: 0; margin: 0; padding: 0; animation: panelIn .4s var(--ease); } .checker legend { font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 900; letter-spacing: -.02em; margin-bottom: 20px; padding: 0; color: #fff; } .checker legend span { display: block; font-size: .95rem; font-weight: 400; color: rgba(232, 231, 231, .7); letter-spacing: 0; margin-top: 4px; } .opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .opt { position: relative; cursor: pointer; } .opt input { position: absolute; opacity: 0; pointer-events: none; } .opt span { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--radius); background: var(--navy-2); border: 2px solid var(--navy-3); font-weight: 500; transition: border-color .2s, background .2s, transform .2s var(--ease); } .opt span svg { width: 22px; height: 22px; color: var(--orange); flex: none; } .opt:hover span { border-color: #727d84; transform: translateY(-2px); } .opt input:checked + span { border-color: var(--orange); background: var(--orange); } .opt input:checked + span svg { color: #fff; } .opt input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; } .opt--sm span { justify-content: center; } .checker__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; } .checker__nav .btn--line { color: #fff; border-color: rgba(255, 255, 255, .4); } .checker__nav .btn--line:hover { background: rgba(255, 255, 255, .1); } .checker__nav .btn:disabled { opacity: .4; cursor: default; transform: none; box-shadow: none; } .checker__nav [data-go]:only-child, .checker__nav [data-back][hidden] + [data-go] { margin-left: auto; } .result__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(20px, 3vw, 40px); } .result h3 { color: #fff; font-size: 1.5rem; } .result p { color: rgba(232, 231, 231, .78); } .result__svc { display: grid; gap: 10px; margin: 18px 0 24px; } .result__svc a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--navy-2); text-decoration: none; font-weight: 700; transition: background .2s; } .result__svc a:hover { background: var(--orange); } .result__svc svg { width: 18px; height: 18px; } .result__projects { display: grid; gap: 12px; } .result__projects a { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; background: var(--navy-2); border-radius: var(--radius); overflow: hidden; text-decoration: none; transition: transform .2s var(--ease); } .result__projects a:hover { transform: translateX(4px); } .result__projects img { width: 120px; height: 84px; object-fit: cover; } .result__projects strong { display: block; color: #fff; line-height: 1.3; } .result__projects span { color: rgba(232, 231, 231, .7); font-size: .88rem; } @media (max-width: 860px) { .result__grid { grid-template-columns: 1fr; } } /* Photo carousel */ .slides { grid-auto-columns: calc((100% - 24px) / 2.3); } @media (max-width: 640px) { .slides { grid-auto-columns: 85%; } } .slide { position: relative; display: block; scroll-snap-align: start; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--navy); text-decoration: none; } .slide img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .slide:hover img { transform: scale(1.05); } .slide__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; background: linear-gradient(180deg, transparent, rgba(0, 13, 40, .9)); color: #e8e7e7; font-size: .88rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; } .slide__cap b { width: 100%; color: #fff; font-size: 1.02rem; } .slide__cap svg { width: 14px; height: 14px; color: var(--orange); } .section--navy2 .icon-btn { background: rgba(255, 255, 255, .1); border-color: transparent; color: #fff; } .section--navy2 .icon-btn:hover:not(:disabled) { background: var(--orange); } /* Project quick view */ .qv { position: fixed; inset: 0; z-index: 90; visibility: hidden; } .qv.is-open { visibility: visible; } .qv__scrim { position: absolute; inset: 0; background: rgba(0, 13, 40, .6); opacity: 0; transition: opacity .3s; } .qv.is-open .qv__scrim { opacity: 1; } .qv__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 100%); background: var(--surface); overflow-y: auto; transform: translateX(100%); transition: transform .35s var(--ease); box-shadow: var(--shadow-lg); } .qv.is-open .qv__panel { transform: none; } .qv__close { position: absolute; top: 14px; right: 14px; z-index: 3; } .qv__media { position: relative; aspect-ratio: 16 / 10; background: var(--navy); } .qv__media img { width: 100%; height: 100%; object-fit: cover; } .qv__prev, .qv__next { position: absolute; top: 50%; margin-top: -23px; background: rgba(0, 13, 40, .6); border-color: transparent; color: #fff; } .qv__prev { left: 14px; } .qv__next { right: 14px; } .qv__count { position: absolute; right: 14px; bottom: 14px; background: rgba(0, 13, 40, .75); color: #fff; padding: 4px 10px; border-radius: 999px; font-size: .82rem; font-weight: 700; } .qv__body { padding: 28px clamp(20px, 4vw, 36px) 36px; } .qv__place { color: var(--orange); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .86rem; } .qv__body h2 { font-size: 1.7rem; line-height: 1.2; margin: 8px 0 16px; } .qv__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .qv__facts span { background: var(--navy); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: .86rem; font-weight: 500; } .qv__summary { color: var(--muted); line-height: 1.6; margin: 0 0 28px; } .qv__body h3 { margin: 0 0 14px; font-size: 1.1rem; } .qv__body .ticks { margin: 0; } .qv__body .ticks li { line-height: 1.5; } .qv__quote { margin: 32px 0 0; padding: 0 0 0 48px; border: 0; background: none; } .qv__quote blockquote { font-size: 1.05rem; line-height: 1.6; margin: 0; } .qv__quote::before { font-size: 3.4rem; line-height: 1; left: 0; top: -4px; } .qv__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; } /* Parallax photos */ .band__img, .values__band > img { height: 124% !important; top: -12% !important; will-change: transform; } /* Yard checker inside the home hero */ .hero__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: clamp(28px, 4vw, 56px); align-items: center; } .hero__split .hero__inner { max-width: none; } .hero--home .hero__split { padding-top: 70px; } .hero--home .hero__split .hero__inner { padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(64px, 9vw, 120px); } .checker--hero { background: rgba(0, 13, 40, .86); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 24px 60px rgba(0, 0, 0, .4); } .checker--hero .checker__head { padding: 16px 24px; } .checker--hero .checker__dots span { width: 26px; } .checker--hero .checker__body { padding: 20px 24px 24px; } .checker__intro { margin: 0 0 6px; color: var(--orange); font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; } .checker--hero legend { font-size: 1.3rem; margin-bottom: 14px; } .checker--hero legend span { font-size: .88rem; } .checker--hero .opts { grid-template-columns: 1fr 1fr; gap: 8px; } .checker--hero .opt span { padding: 11px 12px; font-size: .9rem; gap: 10px; line-height: 1.3; } .checker--hero .opt span svg { width: 18px; height: 18px; } .checker--hero .checker__nav { margin-top: 18px; } .checker--hero .result__grid { grid-template-columns: 1fr; gap: 16px; } .checker--hero .result h3 { font-size: 1.25rem; } .checker--hero .result p { font-size: .92rem; margin-bottom: 8px; } .checker--hero .result__svc { margin: 10px 0 14px; gap: 8px; } .checker--hero .result__svc a { padding: 10px 14px; } .checker--hero .result__projects a:nth-child(n+3) { display: none; } .checker--hero .result__projects a { grid-template-columns: 90px 1fr; } .checker--hero .result__projects img { width: 90px; height: 64px; } .checker--hero .result .btn { width: 100%; white-space: normal; text-align: center; } @media (max-width: 1000px) { .hero__split { grid-template-columns: 1fr; } .hero--home .hero__split .hero__inner { padding-bottom: 0; } .checker--hero { margin-bottom: 48px; } } @media (max-width: 600px) { .checker--hero .opts { grid-template-columns: 1fr; } .checker--hero .opt span { padding: 13px 14px; } } /* Home: core services as full-photo cards (same family as the project cards) */ .svc-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px clamp(28px, 5vw, 72px); align-items: start; margin-bottom: clamp(28px, 4vw, 44px); } .svc-head .lede { margin-top: 6px; } .svc-head h2 { margin: 0; } .svc-head .lede { margin-bottom: 18px; } @media (max-width: 860px) { .svc-head { grid-template-columns: 1fr; } } .svc { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--navy); text-decoration: none; color: #fff; isolation: isolate; transition: transform .35s var(--ease), box-shadow .35s; } .svc:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(0, 13, 40, .35); } .svc__media { position: absolute; inset: 0; z-index: -1; } .svc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .svc:hover .svc__media img { transform: scale(1.07); } .svc__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 13, 40, 0) 25%, rgba(0, 13, 40, .8) 60%, rgba(0, 13, 40, .97) 100%); } .svc__body { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; padding: 26px; display: flex; flex-direction: column; } /* same height on every card so icons and titles line up */ .svc__body .card__icon { background: var(--orange); color: #fff; margin-bottom: 16px; } .svc__body h3 { color: #fff; font-size: 1.5rem; margin-bottom: 8px; } .svc__body p { color: #e8e7e7; margin: 0; } .svc__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; font-weight: 700; color: #fff; } .svc__cta svg { width: 18px; height: 18px; color: var(--orange); transition: transform .2s; } .svc:hover .svc__cta svg { transform: translateX(4px); } @media (max-width: 640px) { .svc { aspect-ratio: 4 / 4.2; } } /* Home: projects filtered by sector */ .hp-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } /* Home: knowledge hub links */ .reads { display: grid; grid-template-columns: 240px 1fr auto; gap: 16px 40px; align-items: center; } .reads h2 { font-size: 1.35rem; margin: 0; } .reads ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .reads li a { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--radius); background: var(--sand); text-decoration: none; color: var(--heading); font-weight: 700; transition: background .2s, color .2s; } .reads li a span { flex: none; width: 110px; color: var(--orange); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; } .reads li a svg { width: 18px; height: 18px; margin-left: auto; flex: none; color: var(--orange); transition: transform .2s; } .reads li a:hover svg { transform: translateX(4px); } @media (max-width: 860px) { .reads { grid-template-columns: 1fr; } .reads li a span { width: 90px; } } .home-compare .compare { max-width: 900px; margin: 0 auto; aspect-ratio: 2000 / 1414; } .home-compare .stages { justify-content: center; } /* Headline numbers */ .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(40px, 5vw, 64px); } .section--navy .kpi b { color: #fff; } .section--navy .kpi__label { color: rgba(232, 231, 231, .78); } .kpi b { display: flex; align-items: baseline; gap: 4px; font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--heading); font-variant-numeric: tabular-nums; } .kpi b i { font-style: normal; font-size: .45em; letter-spacing: 0; color: var(--orange); } .kpi__label { display: block; margin-top: 10px; color: var(--muted); font-size: .95rem; font-weight: 500; white-space: nowrap; } .kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 760px) { .kpis { grid-template-columns: 1fr 1fr; row-gap: 28px; } .kpis--3 { grid-template-columns: 1fr; } .kpi__label { white-space: normal; } } /* Reviews: quote mark instead of a generic icon */ .review__mark { font-size: 4rem; line-height: .6; height: 28px; font-weight: 900; color: var(--orange); } /* Dark theme: buttons inside orange blocks */ .cta-band .btn:not(.btn--ghost), .aside__cta .btn:not(.btn--ghost) { background: var(--navy); } .cta-band .btn:not(.btn--ghost):hover, .aside__cta .btn:not(.btn--ghost):hover { background: #fff; color: var(--navy); } .cta-band .btn--ghost, .aside__cta .btn--ghost { border-color: rgba(255, 255, 255, .7); } .aside__cta { background: var(--orange) !important; } .aside__cta p { color: #fff !important; } .reads li a:hover { background: var(--orange); color: #fff; } .reads li a:hover span, .reads li a:hover svg { color: #fff; } .form input:not([type=checkbox]):not([type=radio]), .form select, .form textarea { color: #fff; border-color: rgba(255, 255, 255, .2) !important; } .form .checks label { border-color: rgba(255, 255, 255, .2); color: #fff; } .form .checks label:has(input:checked) { background: var(--orange) !important; border-color: var(--orange) !important; } .form-steps span { background: rgba(255, 255, 255, .15); } .input, .select { color: #fff; } .quote blockquote { color: #fff; } .card__icon { background: var(--orange); color: #fff; } .mitem strong, .pnav strong, .acard h3, .job h3, .person__body h3 { color: #fff; } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #fff; } .mpop strong { color: var(--navy) !important; } .mpop div { color: var(--slate); } .minimap, #map { background: var(--surface); } /* Button text is always white, even inside areas that restyle links (e.g. the article contents list) */ a.btn:not(.btn--line), button.btn:not(.btn--line), .toc a.btn { color: #fff; } .toc a.btn { display: inline-flex; padding: 10px 16px; border-left: 0; margin-left: 0; } /* Orange feature section (home before/after) */ .section--orange { background: var(--orange); color: #fff; } .section--orange h2, .section--orange h3 { color: #fff; } .section--orange .section-head p { color: #fff; } .section--orange .link-arrow, .section--orange .link-arrow svg { color: #fff; } .section--orange .chip { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; } .section--orange .chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); } .section--orange .compare { box-shadow: 0 24px 60px rgba(0, 13, 40, .35); } .section--orange .compare__knob { background: var(--navy); } /* Numbers on a photo band */ .band .kpi b { color: #fff; } .band .kpi__label { color: #e8e7e7; } .review cite { display: block; font-style: normal; color: #fff; font-weight: 700; font-size: .95rem; margin-top: auto; } .review cite small { display: block; color: var(--muted); font-weight: 400; font-size: .86rem; margin-top: 2px; } /* Featured testimonials: quote beside the job it came from */ .testi__stage { position: relative; } .testi__slide { display: grid; grid-template-columns: 1fr 1.1fr; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); min-height: 440px; animation: panelIn .45s var(--ease); } .testi__media { position: relative; display: block; overflow: hidden; } .testi__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .testi__slide:hover .testi__media img { transform: scale(1.04); } .testi__body { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .testi__repeat { display: inline-flex; align-items: center; gap: 6px; background: var(--orange); color: #fff; font-weight: 700; font-size: .82rem; padding: 6px 12px; border-radius: 999px; margin-bottom: 14px; } .testi__repeat svg { width: 14px; height: 14px; } .testi__mark { font-size: 5rem; line-height: .7; height: 44px; font-weight: 900; color: var(--orange); } .testi blockquote { margin: 0 0 22px; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.45; font-weight: 500; color: #fff; letter-spacing: -.01em; } .testi cite { font-style: normal; font-weight: 700; color: #fff; } .testi__job { margin: 18px 0 20px; padding: 14px 16px; border-radius: var(--radius); background: rgba(255, 255, 255, .05); width: 100%; } .testi__job strong { display: block; color: #fff; font-size: .98rem; } .testi__job span { color: var(--muted); font-size: .9rem; } .testi__count { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 6px; align-self: center; } .testi__dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; } .testi__dot { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, .25); transition: background .2s, width .2s; } .testi__dot[aria-current="true"] { background: var(--orange); width: 28px; border-radius: 5px; } @media (max-width: 860px) { .testi__slide { grid-template-columns: 1fr; min-height: 0; } .testi__media { aspect-ratio: 16 / 10; } } /* Iconography p.27-29: bold white outline icons, turning orange when animated */ .card__icon { background: transparent !important; color: #fff !important; width: auto; height: auto; border-radius: 0; justify-content: start; } .card__icon svg { width: 34px; height: 34px; stroke-width: 1.8; transition: color .25s, transform .25s var(--ease); } a:hover .card__icon svg, .card:hover .card__icon svg, .svc:hover .card__icon svg { color: var(--orange); transform: scale(1.08); } .contact-list .card__icon { width: 44px; height: 44px; } .contact-list .card__icon svg { width: 26px; height: 26px; color: var(--orange); } .opt span svg { color: #fff !important; } .opt:hover span svg { color: var(--orange) !important; } .opt input:checked + span svg { color: #fff !important; } /* About: values on a photo band, original layout (centred illustration, title, text) */ .values__grid--band { margin-top: 0; } .band .value { background: rgba(18, 31, 55, .88); backdrop-filter: blur(6px); box-shadow: none; } .band .value img { filter: brightness(0) invert(1); transition: transform .3s var(--ease); } .band .value:hover img { transform: scale(1.08); } .band .value h3 { color: #fff; } .band .value p { color: var(--pearl); } .about-video-list { margin-top: 20px; } /* About: directors slider, rebuilt from the live site (orange triangle, cut-out photos, 5s autoplay) */ .directors { position: relative; background: var(--navy); overflow: hidden; isolation: isolate; padding-top: clamp(48px, 6vw, 72px); } .directors__tri { position: absolute; right: 0; top: 0; bottom: 0; width: 58%; background: var(--orange); clip-path: polygon(100% 0, 100% 100%, 0 100%); z-index: 2; } /* between the dimmed and active director */ .directors__stage { display: grid; } .dslide { grid-area: 1 / 1; position: relative; z-index: 1; } .dslide.is-active { z-index: 3; } .dslide__grid { display: grid; grid-template-columns: 7fr 5fr; align-items: end; gap: 24px; min-height: clamp(420px, 42vw, 540px); } .dslide__text { align-self: center; padding: 24px 32px 24px 0; opacity: 0; visibility: hidden; transform: translateX(-40px); transition: opacity .6s var(--ease), transform .8s var(--ease), visibility .6s; } .dslide.is-active .dslide__text { opacity: 1; visibility: visible; transform: none; } .dslide__text h2 { margin-bottom: 22px; } .dslide__quote { position: relative; margin: 0 0 18px; padding-left: 26px; font-size: 1.15rem; line-height: 1.6; color: #fff; max-width: 52ch; } .dslide__quote::before { content: "\2018"; position: absolute; left: 0; top: -6px; font-size: 3.2rem; line-height: 1; font-weight: 700; color: var(--orange); } .dslide__quote::after { content: "\2019"; font-size: 3.2rem; line-height: 0; font-weight: 700; color: var(--orange); vertical-align: -.55em; margin-left: 4px; } .dslide__by { color: var(--pearl); font-weight: 700; margin-bottom: 22px; padding-left: 26px; } .dslide__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-left: 26px; } .dslide__img { display: flex; justify-content: center; align-items: flex-end; } .dslide__img img { max-height: 500px; width: auto; filter: brightness(.5); transform: translateX(-300px); opacity: .55; transition: transform 1s var(--ease), filter 1s ease, opacity 1s ease; } .dslide.is-active .dslide__img img { filter: none; transform: none; opacity: 1; } .directors__nav { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 4; pointer-events: none; } .directors__dots { pointer-events: auto; } .directors__dots { display: flex; gap: 8px; } .directors__dot { width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, .35); transition: width .25s, background .25s; } .directors__dot[aria-current="true"] { background: #fff; width: 30px; border-radius: 6px; } .dslide__actions .link-arrow { color: #fff; } .dslide__actions .link-arrow svg { color: var(--orange); } .directors__stage { cursor: grab; } @media (max-width: 860px) { .directors__tri { width: 100%; clip-path: polygon(100% 45%, 100% 100%, 0 100%); } .dslide__grid { grid-template-columns: 1fr; min-height: 0; } .dslide__text { padding-right: 0; background: none; } .dslide__img img { max-height: 340px; } .dslide:not(.is-active) { visibility: hidden; } } /* Projects map key */ .map-key { background: rgba(0, 13, 40, .92); color: #fff; padding: 10px 14px; border-radius: 10px; display: grid; gap: 6px; font-size: .85rem; font-weight: 500; } .map-key span { display: flex; align-items: center; gap: 8px; } .map-key__pin { width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--orange); border: 2px solid #fff; } .map-key__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--navy); border: 1.5px solid #fff; margin: 0 2px; } /* Projects header stats: solid brand orange */ .stats { background: var(--orange); gap: 0; } .stats .stat { background: transparent; } .stats .stat b, .stats .stat span { color: #fff; } /* short dividers that stop short of the top and bottom edges */ .stats .stat { position: relative; } .stats .stat + .stat::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: rgba(255, 255, 255, .4); } @media (max-width: 760px) { .stats--3 .stat + .stat::before { top: 0; bottom: auto; left: 22px; right: 22px; width: auto; height: 1px; } } .kpis--hero { margin-top: 36px; max-width: 900px; gap: 32px; } .kpis--hero .kpi__label { white-space: normal; max-width: 22ch; } .hero .kpi b { color: #fff; } .hero .kpi__label { color: var(--pearl); } /* Video thumbnails: play control bottom-left, clear of faces */ .video-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 13, 40, .7) 0%, rgba(0, 13, 40, 0) 40%); pointer-events: none; } .video-btn__bar { position: absolute; left: 18px; top: 16px; z-index: 1; display: flex; align-items: center; gap: 12px; text-align: left; } .video-btn .video-btn__play { position: static; margin: 0; width: 52px; height: 52px; box-shadow: 0 0 0 6px rgba(232, 82, 37, .3); flex: none; } .video-btn .video-btn__play svg { width: 22px; height: 22px; margin-left: 3px; } .video-btn__label { display: flex; flex-direction: column; color: #fff; font-size: .9rem; line-height: 1.3; } .video-btn__label b { font-size: 1rem; } .video-btn:hover .video-btn__play { transform: scale(1.08); } /* Home SEO copy */ .seo-block h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); max-width: 24ch; margin-bottom: clamp(24px, 3vw, 36px); } .seo-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); } .seo-cols h3 { font-size: 1.1rem; color: var(--orange); margin-bottom: 10px; } .seo-cols p { color: var(--pearl); margin: 0; } @media (max-width: 860px) { .seo-cols { grid-template-columns: 1fr; } } .seo-block a:not(.btn) { color: #fff; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; text-decoration-thickness: 2px; } .seo-block a:not(.btn):hover { color: var(--orange); } /* Home: knowledge hub as three cards */ .reads-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .read { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--radius-lg); background: var(--surface); text-decoration: none; min-height: 190px; transition: background .25s, transform .25s var(--ease); } .read:hover { background: var(--orange); transform: translateY(-4px); } .read__topic { color: var(--orange); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; transition: color .25s; } .read h3 { color: #fff; font-size: 1.12rem; line-height: 1.35; margin: 0; } .read__meta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; color: var(--pearl); font-size: .88rem; } .read__meta svg { width: 20px; height: 20px; color: var(--orange); transition: transform .25s, color .25s; } .read:hover .read__topic, .read:hover .read__meta, .read:hover .read__meta svg { color: #fff; } .read:hover .read__meta svg { transform: translateX(4px); } @media (max-width: 860px) { .reads-grid { grid-template-columns: 1fr; } .read { min-height: 0; } } /* Testimonials: compact layout */ .testi__slide { grid-template-columns: 34% 1fr; min-height: 0; } .testi__media { min-height: 300px; } .testi__body { padding: clamp(24px, 3vw, 36px) clamp(24px, 3.5vw, 44px); } .testi__mark { font-size: 3.6rem; height: 30px; } .testi blockquote { font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.55; font-weight: 500; margin-bottom: 14px; max-width: 62ch; } .testi cite { font-size: .95rem; } .testi__job { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; margin: 18px 0 0; padding: 0; background: none; border-radius: 0; } .testi__job > span { display: flex; flex-direction: column; color: var(--muted); font-size: .88rem; } .testi__job strong { color: #fff; font-size: .95rem; } .testi__job .link-arrow { white-space: nowrap; } .testi__dots { margin-top: 16px; } @media (max-width: 860px) { .testi__slide { grid-template-columns: 1fr; } .testi__media { min-height: 0; aspect-ratio: 16 / 9; } } .hero--home h1 { font-size: clamp(2rem, 3.5vw, 2.85rem); } /* longer keyword-led heading */ /* Service pages */ .svc-intro { align-items: center; } .svc-intro .prose h2 { margin-top: 0; } .svc-intro .btn { margin-top: 8px; } .svc-intro .split__media { aspect-ratio: 4 / 3.2; } .svc-intro + .kpis { margin-top: clamp(40px, 5vw, 64px); } .includes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px clamp(28px, 5vw, 64px); } .includes li { position: relative; padding-left: 40px; } .includes li::before { content: ""; position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 15px no-repeat; } .includes h3 { font-size: 1.12rem; margin: 0 0 4px; color: #fff; } .includes p { margin: 0; color: var(--pearl); } @media (max-width: 760px) { .includes { grid-template-columns: 1fr; } } .other-svcs { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; } .other-svcs h2 { font-size: 1.2rem; margin: 0; } .other-svcs > div { display: flex; flex-wrap: wrap; gap: 10px; } .other-svcs a { padding: 9px 16px; border-radius: 999px; background: var(--surface); color: #fff; text-decoration: none; font-weight: 500; font-size: .94rem; transition: background .2s; } .other-svcs a:hover { background: var(--orange); } /* Send your brief / Contact */ .hero-ticks { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: #fff; font-weight: 500; } .hero-ticks li { display: flex; align-items: center; gap: 8px; } .hero-ticks li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; flex: none; } .brief-main { padding-top: clamp(32px, 4vw, 52px); } .brief-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; } .brief-side { display: grid; gap: 20px; position: sticky; top: 24px; } .brief-side .card { padding: 24px; background: var(--surface); border: 0; } .call-card { background: var(--orange) !important; } .call-card h3 { color: #fff; margin-bottom: 4px; } .call-card p { color: #fff; margin: 0 0 16px; } .call-card .btn { background: var(--navy); } .call-card .btn:hover { background: #fff; color: var(--navy); filter: none; } .nsteps-card h3 { margin-bottom: 14px; } .nsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .nsteps li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; color: var(--pearl); font-size: .95rem; } .nsteps__n { font-weight: 900; color: var(--orange); font-size: 1.05rem; } .brief-grid .form-card { background: var(--surface); box-shadow: none; } /* answer options as rounded buttons */ .form .checks label { position: relative; background: var(--navy); border: 1px solid rgba(255, 255, 255, .18) !important; padding: 10px 16px; } .form .checks input { position: absolute; opacity: 0; pointer-events: none; } .form .checks label:hover { border-color: var(--orange) !important; } .form .checks label:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 2px; } @media (max-width: 960px) { .brief-grid { grid-template-columns: 1fr; } .brief-side { position: static; } } /* Brief and Contact: steps as a full-width row under the form, matched field heights */ .nsteps-band { margin-top: clamp(40px, 5vw, 64px); } .nsteps-band h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin: 0 0 20px; } .nsteps--row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .nsteps--row li { grid-template-columns: 1fr; gap: 10px; padding: 22px; background: var(--surface); border-radius: var(--radius); align-content: start; } .nsteps--row .nsteps__n { font-size: 1.6rem; line-height: 1; } @media (max-width: 960px) { .nsteps--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .nsteps--row { grid-template-columns: 1fr; } } .form input:not([type=checkbox]):not([type=radio]), .form select { height: 52px; box-sizing: border-box; } .brief-side { position: static; } .brief-grid { align-items: stretch; } .brief-side { align-content: start; } .brief-grid > .brief-side > .card:only-child { height: 100%; } /* Contact header: the full yard photo. Text sits top left over the car park; the cabin sign and yard stay clear */ .hero--contact { min-height: clamp(460px, 42vw, 640px); } .hero--contact .hero__inner { max-width: 440px; padding-top: clamp(72px, 7vw, 96px); } .hero--contact .hero__media img { object-position: 50% 82%; } /* What happens next: steps light up in turn; hover or tap to pick one */ .nsteps--row li { position: relative; cursor: default; transition: background .35s, transform .35s, box-shadow .35s; outline: none; } .nsteps__top { display: flex; align-items: center; justify-content: space-between; } .nsteps__icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; transition: background .35s, color .35s; } .nsteps__icon svg { width: 22px; height: 22px; } .nsteps--row .nsteps__n { transition: color .35s; } .nsteps__go { color: #fff; font-weight: 700; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; margin-top: 2px; justify-self: start; } .nsteps--row li.is-active { background: var(--orange); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .35); } .nsteps--row li.is-active, .nsteps--row li.is-active span { color: #fff; } .nsteps--row li.is-active .nsteps__icon { background: #fff; color: var(--orange); } .nsteps--row li:focus-visible { box-shadow: 0 0 0 3px #fff; } @media (prefers-reduced-motion: reduce) { .nsteps--row li { transition: none; } .nsteps--row li.is-active { transform: none; } } /* What happens next, v2: titled steps, calmer active state */ .brief-main--brief .brief-grid { align-items: start; } .form fieldset { margin-top: 6px; } .nsteps-band { margin-top: clamp(48px, 6vw, 72px); } .nsteps--row li { gap: 8px; padding: 24px; } .nsteps__top { margin-bottom: 8px; } .nsteps--row .nsteps__n { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(232, 231, 231, .6); } .nsteps__t { display: block; color: #fff; font-size: 1.15rem; font-weight: 900; line-height: 1.25; } .nsteps__d { color: rgba(232, 231, 231, .78); font-size: .93rem; line-height: 1.55; } .nsteps__icon { background: rgba(255, 255, 255, .08); } .nsteps--row li:hover .nsteps__icon { color: var(--orange); } .nsteps__go { display: inline-flex; margin-top: 10px; padding: 9px 16px; border-radius: 999px; background: var(--orange); color: #fff; text-decoration: none; font-size: .88rem; } .nsteps--row li.is-active { transform: none; box-shadow: none; } .nsteps--row li.is-active .nsteps__d, .nsteps--row li.is-active .nsteps__n { color: rgba(255, 255, 255, .92); } .nsteps--row li.is-active .nsteps__go { background: var(--navy); } .brief-main--brief { padding-bottom: clamp(32px, 4vw, 48px); } .brief-stats { padding-top: 0; } /* Send your brief: aligned blocks, no stray gaps */ .brief-main--brief .brief-grid { align-items: stretch; } .brief-main--brief .brief-side { display: flex; flex-direction: column; } .call-card--full { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: clamp(24px, 3vw, 36px) !important; border-radius: var(--radius-lg); } .call-card--full h3 { font-size: 1.5rem; } .call-card__foot strong { display: block; color: #fff; margin-bottom: 4px; } .call-card__foot p { margin: 0 !important; } .call-card__foot a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .nsteps-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: stretch; } .nsteps-split .video-btn { aspect-ratio: 16 / 9; height: 100%; } .nsteps--grid { grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 8px; } .nsteps--grid li { grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 1px; padding: 10px 16px; align-content: center; align-items: center; } .nsteps--grid .nsteps__top { grid-row: 1 / 3; margin: 0; } .nsteps--grid .nsteps__n { display: none; } .nsteps--grid .nsteps__t { font-size: 1.02rem; } .nsteps--grid .nsteps__d { font-size: .86rem; line-height: 1.4; align-self: start; } .nsteps--grid .nsteps__icon { width: 42px; height: 42px; } .nsteps--grid .nsteps__go { display: none; } @media (max-width: 960px) { .nsteps-split { grid-template-columns: 1fr; } .nsteps--grid { grid-auto-rows: auto; } } .brief-stats .kpis { margin-top: 0; } /* Photo and drawing upload on the brief form */ .upload__label { display: block; font-weight: 700; font-size: .93rem; color: var(--heading); margin-bottom: 7px; } .upload__label span { color: var(--muted); font-weight: 400; } .upload__drop { display: flex !important; align-items: center; gap: 14px; margin: 0 !important; padding: 16px 18px; border: 1px dashed rgba(255, 255, 255, .28); border-radius: var(--radius); background: var(--navy); cursor: pointer; transition: border-color .15s, background .15s; font-weight: 400 !important; } .upload__drop:hover, .upload.is-over .upload__drop { border-color: var(--orange); } .upload__drop svg { width: 26px; height: 26px; color: var(--orange); flex: none; } .upload__drop b { display: block; color: #fff; font-size: .95rem; } .upload__drop small { display: block; color: rgba(232, 231, 231, .7); font-size: .84rem; margin-top: 2px; } .upload__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .upload__input:focus-visible + .upload__list, .upload:focus-within .upload__drop { border-color: var(--orange); } .upload__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .upload__list:empty { display: none; } .upload__list li { display: grid; grid-template-columns: 40px minmax(0, 1fr) 28px; align-items: center; gap: 8px; padding: 6px; border-radius: 10px; background: var(--navy); color: #fff; font-size: .8rem; } .upload__list img, .upload__list .upload__pdf { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; display: grid; place-items: center; background: rgba(255, 255, 255, .08); font-size: .7rem; font-weight: 700; } .upload__list .upload__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .upload__list button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; font-size: 1rem; line-height: 1; } .upload__list button:hover { background: var(--orange); } .upload__msg { grid-column: 1 / -1; color: #ffb59e; font-size: .84rem; background: none !important; padding: 0 !important; } .upload__list li.upload__msg { display: block; } /* Panel matches the form on step 1; on the longer steps it keeps its own height and follows the form down */ .brief-main--brief .brief-grid:not(:has([data-page="1"]:not([hidden]))) { align-items: start; } .brief-main--brief .brief-grid:not(:has([data-page="1"]:not([hidden]))) .brief-side { position: sticky; top: 24px; } .brief-main--brief .brief-grid:not(:has([data-page="1"]:not([hidden]))) .call-card--full { min-height: 0; } .upload { position: relative; } .form .upload__input { position: absolute; left: 0; top: 0; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; overflow: hidden; } /* Embedded HubSpot form: its colours and fields come from HubSpot's form editor */ .form-card--hs { padding: 0; background: none !important; overflow: hidden; border-radius: var(--radius-lg); } .form-card--hs .hs-form-frame { min-height: 520px; } .form-card--hs noscript p { padding: 24px; color: #fff; } .brief-main--brief .brief-grid:has(.form-card--hs) { align-items: start; } .brief-grid:has(.form-card--hs) .brief-side { position: sticky; top: 24px; } /* Brief page with the HubSpot form: one column beside it, same height */ .brief-main--brief .brief-grid:has(.brief-side--stack) { align-items: stretch; } .brief-grid .brief-side--stack { position: static; display: flex; flex-direction: column; gap: 20px; } .call-card--navy { background: var(--surface) !important; border-radius: var(--radius-lg); padding: clamp(22px, 2.6vw, 30px) !important; display: grid; gap: 18px; } .call-card--navy .btn { background: var(--orange); } .call-card--navy .btn:hover { background: #fff; color: var(--navy); } .call-card--navy .call-card__foot p { color: rgba(232, 231, 231, .78) !important; } .call-card--navy p { color: rgba(232, 231, 231, .85) !important; } .side-steps { flex: 1; display: flex; flex-direction: column; } .side-steps h2 { font-size: 1.35rem; margin: 0 0 12px; } .side-steps .nsteps--grid { flex: 1; } .brief-side--stack .video-btn { aspect-ratio: 16 / 9; flex: none; } .brief-main--brief:has(.brief-side--stack) + .brief-stats { padding-top: clamp(16px, 2vw, 24px); } .call-card--navy .contact-list { margin: 4px 0 0; } .call-card--navy .contact-list strong { color: #fff; } .brief-main--brief .brief-grid:has(.brief-side--stack) { align-items: start; } .brief-grid:has(.form-card--hs) .brief-side.brief-side--stack { position: static; } .contact-list--grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .contact-list--grid li { display: block !important; padding: 0 !important; border: 0 !important; font-size: .86rem; color: rgba(232, 231, 231, .85); } .contact-list--grid .card__icon { display: none; } .contact-list--grid strong { display: block; font-size: .88rem; margin-bottom: 2px; } .contact-list--grid a { word-break: break-word; } @media (max-width: 420px) { .contact-list--grid { grid-template-columns: 1fr; } } .contact-row { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .contact-row li { display: flex; gap: 14px; align-items: flex-start; padding: 22px; border-radius: var(--radius); background: var(--surface); color: rgba(232, 231, 231, .85); font-size: .93rem; } .contact-row strong { display: block; color: #fff; margin-bottom: 4px; } .contact-row a { color: var(--orange); font-weight: 700; word-break: break-word; } .contact-row .card__icon { flex: none; } @media (max-width: 960px) { .contact-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .contact-row { grid-template-columns: 1fr; } } /* Side column beside the HubSpot form: fills the form's height, never slides */ .brief-main--brief .brief-grid:has(.brief-side--stack) { align-items: stretch !important; } .brief-grid .brief-side.brief-side--stack { position: static !important; } .contact-row li { flex-direction: column; gap: 12px; } .contact-row a { word-break: normal; overflow-wrap: anywhere; font-size: .9rem; } /* Contact details: one open row, no boxes */ .contact-row { margin-top: clamp(32px, 4vw, 48px); gap: 24px 32px; } .contact-row li { flex-direction: row; gap: 14px; padding: 0; background: none; border-radius: 0; } .contact-row .card__icon { margin: 2px 0 0; } .contact-row .card__icon svg { width: 24px; height: 24px; } .contact-row a { text-decoration: none; } .contact-row a:hover { text-decoration: underline; } /* Contact: other ways to reach us, one panel */ .contact-panel { margin-top: clamp(32px, 4vw, 48px); background: var(--surface); border-radius: var(--radius-lg); padding: clamp(28px, 3.5vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px clamp(32px, 5vw, 72px); align-items: start; } .contact-panel__head h2 { font-size: clamp(1.45rem, 2.2vw, 1.9rem); margin: 0 0 8px; } .contact-panel__head p { margin: 0; color: rgba(232, 231, 231, .78); } .contact-panel .contact-row { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; } .contact-panel .contact-row li { gap: 16px; font-size: .95rem; } .contact-panel .contact-row .card__icon { color: var(--orange) !important; } .contact-panel .contact-row .card__icon svg { width: 26px; height: 26px; } .contact-panel .contact-row strong { font-size: .9rem; color: rgba(232, 231, 231, .7); font-weight: 500; margin-bottom: 4px; } .contact-panel .contact-row a { color: #fff; font-size: 1.08rem; font-weight: 700; } .contact-panel .contact-row a:hover { color: var(--orange); text-decoration: none; } .contact-row__addr { display: block; color: #fff; font-weight: 700; font-size: 1.02rem; line-height: 1.45; } .contact-panel .contact-row .contact-row__dir { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .9rem; color: var(--orange); } .contact-row__dir svg { width: 16px; height: 16px; } @media (max-width: 960px) { .contact-panel { grid-template-columns: 1fr; } } @media (max-width: 560px) { .contact-panel .contact-row { grid-template-columns: 1fr; } } /* HubSpot's fields can't be styled from here, so the whole form is scaled down evenly on larger screens */ @media (min-width: 961px) { .form-card--hs .hs-form-frame { min-height: 0; } } .form-card--hs { align-self: start; } .form-card--hs iframe { display: block; border-radius: var(--radius-lg); } /* Careers */ .careers-why { align-items: center; } .perks h2 { color: #fff; margin: 0 0 clamp(24px, 3vw, 36px); } .perks__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 40px); } .perks__list li { display: grid; gap: 14px; align-content: start; } .perks__list p { margin: 0; color: #fff; font-size: 1.12rem; font-weight: 700; line-height: 1.35; } .perk__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; } .perk__icon svg { width: 26px; height: 26px; } @media (max-width: 960px) { .perks__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .perks__list { grid-template-columns: 1fr; } } .jobs { display: grid; gap: 16px; } .jobs .job h3 { font-size: 1.25rem; } /* Job adverts */ .job-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; } .pill--hero { background: rgba(0, 13, 40, .55) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .25) !important; padding: 7px 14px !important; font-size: .9rem !important; } .job-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 5vw, 64px); align-items: start; } .job-block { margin-bottom: clamp(36px, 4vw, 48px); } .job-block h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-bottom: 16px; } .ticks--2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; } .ticks--2col li { margin: 0; } .pay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .pay-card { background: var(--surface); border-radius: var(--radius-lg); padding: 24px 26px; } .pay-card h3 { color: #fff; margin: 0 0 14px; font-size: 1.15rem; } .pay-card .ticks { margin: 0; } .job-side { position: sticky; top: 24px; } .job-side__card { background: var(--surface); border-radius: var(--radius-lg); padding: 28px; display: grid; gap: 14px; } .job-side__card h3 { color: #fff; margin: 0 0 4px; font-size: 1.25rem; } .job-facts { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 14px; } .job-facts li { display: flex; gap: 12px; align-items: flex-start; color: rgba(232, 231, 231, .85); font-size: .95rem; } .job-facts strong { display: block; color: rgba(232, 231, 231, .6); font-size: .82rem; font-weight: 500; } .job-facts .card__icon { margin: 1px 0 0; color: var(--orange) !important; } .job-facts .card__icon svg { width: 22px; height: 22px; } .job-side__card .btn { justify-content: center; } .job-side__card .link-arrow { justify-self: center; margin-top: 4px; } @media (max-width: 960px) { .job-layout { grid-template-columns: 1fr; } .job-side { position: static; order: -1; } } @media (max-width: 640px) { .ticks--2col, .pay-grid { grid-template-columns: 1fr; } } /* Job adverts: plain orange dots instead of a tick on every line */ .job-main .ticks li { grid-template-columns: 8px 1fr; gap: 14px; } .job-main .ticks li::before { width: 8px; height: 8px; background: var(--orange); margin-top: .62em; } @media (max-width: 960px) { .job-side { order: 0; } } /* Sector pages: "how we help" boxes always fill whole rows */ .works { grid-template-columns: repeat(3, minmax(0, 1fr)); } .works--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .works--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .works--5 > * { grid-column: span 2; } .works--5 > :nth-child(n+4) { grid-column: span 3; } @media (max-width: 860px) { .works, .works--4, .works--5 { grid-template-columns: 1fr; } .works--5 > * { grid-column: auto !important; } } /* One case study shown big */ .feature-job { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; } .feature-job__photos { display: grid; gap: 12px; } .feature-job__main img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); display: block; } .feature-job__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .feature-job__thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); display: block; transition: opacity .2s; } .feature-job__thumbs a:hover img { opacity: .8; } .feature-job__body h3 { color: #fff; font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 8px 0 14px; } .feature-job__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .feature-job__body p { color: rgba(232, 231, 231, .82); } .feature-job__body .btn { margin-top: 8px; } @media (max-width: 960px) { .feature-job { grid-template-columns: 1fr; } } /* Sector pages: problems list in the photo band */ .band .familiar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; max-width: 980px; margin-bottom: 28px; } .band .familiar li { color: #fff; font-size: 1.02rem; } @media (max-width: 760px) { .band .familiar { grid-template-columns: 1fr; } } /* Illustrated header (sector pages without a photo) */ .hero--illus::before { display: none; } .hero-illus { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: center; } .hero--illus .hero__inner { padding: clamp(72px, 8vw, 110px) 0 clamp(48px, 6vw, 80px); } .hero-illus__art { padding: clamp(24px, 4vw, 48px) 0; } .illus { display: block; width: 100%; height: auto; } .illus text { font-family: inherit; } @media (max-width: 900px) { .hero-illus { grid-template-columns: 1fr; } .hero--illus .hero__inner { padding-bottom: 0; } .hero-illus__art { padding-top: 0; } } /* Interactive yard plan */ .yardmap .section-head p { color: #fff; } .yardmap__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: stretch; } .yardmap__plan { position: relative; align-self: start; } .yardmap__plan .illus { border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0, 13, 40, .35); } .yardmap__pin { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 3px solid #fff; background: var(--orange); color: #fff; font: inherit; font-weight: 900; font-size: 1rem; cursor: pointer; display: grid; place-items: center; transition: transform .2s, background .2s; } .yardmap__pin::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid #fff; opacity: 0; animation: pinPulse 2.2s ease-out infinite; } .yardmap.is-used .yardmap__pin::after { animation: none; } .yardmap__pin:hover { transform: scale(1.1); } .yardmap__pin.is-on { background: #fff; color: var(--navy); transform: scale(1.15); } .yardmap__pin:focus-visible, .yardmap__tab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } @keyframes pinPulse { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.4); } } .yardmap__panel { background: var(--navy); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: 18px; color: rgba(232, 231, 231, .85); } .yardmap__tabs { display: flex; flex-wrap: wrap; gap: 8px; } .yardmap__tab { border: 1px solid rgba(255, 255, 255, .22); background: none; color: #fff; font: inherit; font-size: .86rem; font-weight: 700; padding: 7px 13px; border-radius: 999px; cursor: pointer; } .yardmap__tab:hover { border-color: var(--orange); } .yardmap__tab.is-on { background: var(--orange); border-color: var(--orange); } .yardmap__card { flex: 1; display: flex; flex-direction: column; gap: 16px; animation: cardIn .35s ease both; } .yardmap__card[hidden] { display: none; } @keyframes cardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .yardmap__head { display: flex; align-items: baseline; gap: 12px; } .yardmap__head h3 { color: #fff; margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.75rem); } .yardmap__n { color: var(--orange); font-weight: 900; font-size: 1.4rem; } .yardmap__row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; } .yardmap__row strong { display: block; color: #fff; margin-bottom: 4px; } .yardmap__row p { margin: 0; } .yardmap__ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: #fff; } .yardmap__ic--fix { background: var(--orange); } .yardmap__ic svg { width: 20px; height: 20px; } .yardmap__card .link-arrow { margin-top: auto; } .yardmap__nav { display: flex; align-items: center; gap: 10px; padding-top: 6px; } .yardmap__nav .btn { margin-left: auto; } .yardmap__nav .icon-btn { background: rgba(255, 255, 255, .1); border-color: transparent; color: #fff; } .yardmap__nav .icon-btn:hover { background: var(--orange); } @media (max-width: 960px) { .yardmap__grid { grid-template-columns: 1fr; } .yardmap__pin { width: 32px; height: 32px; margin: -16px 0 0 -16px; font-size: .85rem; } } @media (prefers-reduced-motion: reduce) { .yardmap__pin::after, .yardmap__card { animation: none; } } /* Modular header: the unit is lowered onto the pads as the page loads */ /* Sector drawings are static: the modular unit sits in its landed position */ .illus__drop { transform: translateY(36px); } /* Labelled plan: the picked area is outlined in orange */ .yardmap .zone .zone__shape { transition: stroke .2s, stroke-opacity .2s; } .yardmap .zone.is-on .zone__shape { stroke: #e85225; stroke-opacity: 1; stroke-width: 5; stroke-dasharray: none; } .yardmap__plan .illus text { font-family: "Public Sans", system-ui, sans-serif; } /* Sector pages: opening, "how we help" and stats as one section */ .sector-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px clamp(32px, 6vw, 88px); align-items: start; margin-bottom: clamp(32px, 4vw, 48px); } .sector-intro h2 { margin: 0 0 24px; max-width: 14ch; } .sector-intro .prose p:last-child { margin-bottom: 0; } .sector-help { background: var(--orange); border-radius: var(--radius-lg); padding: clamp(26px, 3.5vw, 44px); } .sector-help h3 { color: #fff; font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin: 0 0 24px; } .sector-help__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(24px, 3vw, 44px); } .sector-help__list--5, .sector-help__list--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .sector-help__list--5 > *, .sector-help__list--6 > * { grid-column: span 2; } .sector-help__list--5 > :nth-child(n+4) { grid-column: span 3; } .sector-help__list li { position: relative; padding-left: 40px; } .sector-help__list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 50%; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 15px no-repeat; } .sector-help__list h3 { color: #fff; font-size: 1.08rem; margin: 0 0 4px; } .sector-help__list p { color: #fff; font-size: .95rem; margin: 0; } @media (max-width: 900px) { .sector-intro { grid-template-columns: 1fr; } .sector-help__list, .sector-help__list--5, .sector-help__list--6 { grid-template-columns: 1fr; } .sector-help__list > * { grid-column: auto !important; } } /* Orange testimonials band (sector pages): navy quote cards on solid orange */ .testi--orange { background: var(--orange); } .testi--orange .section-head p, .testi--orange h2 { color: #fff; } .testi--orange .testi__slide { background: var(--navy); } .testi--orange .testi__mark { color: var(--orange); } .testi--orange .testi__dot { background: rgba(255, 255, 255, .45); } .testi--orange .testi__dot[aria-current="true"] { background: var(--navy); } .testi--orange .icon-btn { background: var(--navy); border-color: var(--navy); color: #fff; } .testi--orange .icon-btn:hover:not(:disabled) { background: #fff; color: var(--navy); } .testi--orange .reviews__count, .testi--orange [class*="count"] { color: #fff; } /* "How we help" open on the page, no block */ .sector-help { background: none; border-radius: 0; padding: 0; margin-bottom: clamp(8px, 2vw, 16px); } .sector-help__list li::before { background-color: var(--orange); } .sector-help__list p { color: rgba(232, 231, 231, .82); } /* "How we help" as a full-width orange section */ .sector-help.section--orange { background: var(--orange); border-radius: 0; padding: clamp(48px, 6vw, 80px) 0; margin: 0; } .sector-help h2 { color: #fff; margin: 0 0 clamp(24px, 3vw, 36px); } .sector-help.section--orange .sector-help__list li::before { background-color: var(--navy); } .sector-help.section--orange .sector-help__list p { color: #fff; } /* "How we help": pick a service on the left, its detail shows on the right */ .helps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: stretch; } .helps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; } .helps__tab { width: 100%; display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 0; border-radius: var(--radius); background: rgba(0, 13, 40, .14); color: #fff; font: inherit; font-weight: 700; font-size: 1.05rem; text-align: left; cursor: pointer; transition: background .25s, transform .25s; } .helps__tab:hover { background: rgba(0, 13, 40, .3); } .helps__tab.is-on { background: var(--navy); transform: translateX(6px); } .helps__tab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .helps__n { font-weight: 900; font-size: .95rem; opacity: .8; min-width: 24px; } .helps__tab.is-on .helps__n { color: var(--orange); opacity: 1; } .helps__panel { background: var(--navy); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 48px); display: flex; } .helps__card { display: flex; flex-direction: column; gap: 14px; animation: cardIn .35s ease both; } .helps__card[hidden] { display: none; } .helps__big { color: var(--orange); font-weight: 900; font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1; } .helps__card h3 { color: #fff; margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); } .helps__card p { color: rgba(232, 231, 231, .85); margin: 0; font-size: 1.05rem; line-height: 1.6; } .helps__card .btn { margin-top: auto; align-self: flex-start; } @media (max-width: 860px) { .helps { grid-template-columns: 1fr; } .helps__tab.is-on { transform: none; } } @media (prefers-reduced-motion: reduce) { .helps__tab, .helps__card { transition: none; animation: none; } } /* "How we help" panel with a job photo for each service */ .helps__panel { padding: 0; overflow: hidden; } .helps__card { gap: 0; width: 100%; } .helps__photo { position: relative; display: block; } .helps__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .helps__cap { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(0, 13, 40, .82); color: #fff; font-size: .82rem; font-weight: 700; } .helps__cap svg { width: 15px; height: 15px; color: var(--orange); } .helps__body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; padding: clamp(22px, 3vw, 32px); } .helps__big { font-size: clamp(2.4rem, 4vw, 3.2rem); } .helps__body h3 { margin: 4px 0 8px; } /* Photo bands: darker photo and solid cards so the text is easy to read */ .band::after { background: linear-gradient(180deg, rgba(0, 13, 40, .78) 0%, rgba(0, 13, 40, .9) 100%); } .band .card { background: var(--navy); border: 0; backdrop-filter: none; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); padding: 28px; } .band .card h3 { font-size: 1.2rem; line-height: 1.3; margin: 0 0 10px; } .band .card p { color: rgba(232, 231, 231, .88); font-size: 1rem; line-height: 1.65; } /* "Why clients choose us": lighter photo, icons, cards turn orange on hover */ .band::after { background: linear-gradient(180deg, rgba(0, 13, 40, .62) 0%, rgba(0, 13, 40, .82) 100%); } .why-card { transition: transform .25s, background .25s, box-shadow .25s; } .why-card__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: #fff; margin-bottom: 18px; transition: background .25s, color .25s; } .why-card__icon svg { width: 24px; height: 24px; } .why-card:hover { background: var(--orange); transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0, 0, 0, .45); } .why-card:hover .why-card__icon { background: #fff; color: var(--orange); } .why-card:hover p { color: #fff; } @media (prefers-reduced-motion: reduce) { .why-card, .why-card:hover { transition: none; transform: none; } } /* About header: the live-site photo is already darkened, so only a light tint behind the text */ /* Desktop menu bar: hover, keyboard focus, an open dropdown and the current section show a navy pill behind the word. Dropdowns open as a separate rounded navy card just below the bar, fading and sliding down into place. */ @media (min-width: 1001px) { .nav__menu { align-items: center; gap: 6px; padding: 0; } .nav__link { padding: 8px 18px; white-space: nowrap; border-radius: 999px; transition: background-color .2s; } .nav__item.is-open > .nav__link, .nav__link:hover, .nav__link:focus-visible, .nav__item.is-current > .nav__link, .nav__link[aria-current="page"] { background: var(--navy); text-decoration: none; } .nav__drop { top: calc(100% + 14px); left: 50%; width: max-content; min-width: 210px; max-width: none; padding: 8px; background: var(--surface); border-radius: 16px; overflow: visible; text-align: left; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); transform: translate(-50%, -6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; } .nav__item.is-open .nav__drop { transform: translate(-50%, 0); } /* invisible bridge over the gap so the card stays open while the pointer moves down to it */ .nav__drop::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } .nav__drop { text-align: center; } .nav__drop li, .nav__drop li:first-child, .nav__drop li:not(:last-child) { border: 0; margin: 0 10px; } .nav__drop li:not(:first-child) { border-top: 1px solid #fff; } .nav__drop a { padding: 11px 14px; margin: 3px -10px; border-radius: 10px; font-size: .9rem; transition: background-color .15s; } } @media (min-width: 1001px) and (max-width: 1240px) { .nav__menu { gap: 2px; } .nav__link { padding: 8px 12px; font-size: .9rem; } } @media (min-width: 1001px) and (max-width: 1100px) { .nav__link { padding: 7px 9px; font-size: .84rem; } } @media (min-width: 1001px) and (prefers-reduced-motion: reduce) { .nav__drop, .nav__item.is-open .nav__drop { transform: translate(-50%, 0); } } /* Sector "Sound familiar?": heading and button left, each problem a solid navy card with a matching icon on the right */ .familiar-band { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .familiar-band__head h2 { margin-bottom: 14px; } .familiar-band__head .lede { color: #fff; margin-bottom: 28px; } .familiar-band__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; } /* open list over the photo, no boxes, so the band reads lighter */ .problem { display: flex; align-items: center; gap: 18px; color: #fff; font-size: 1.08rem; font-weight: 500; line-height: 1.45; text-shadow: 0 1px 12px rgba(0, 13, 40, .6); transition: transform .25s var(--ease); } .problem__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); transition: background-color .25s, color .25s; } .problem__icon svg { width: 22px; height: 22px; } .problem:hover { transform: translateX(6px); } .problem:hover .problem__icon { background: #fff; color: var(--orange); } @media (max-width: 900px) { .familiar-band { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .problem, .problem:hover { transform: none; transition: none; } } .helps__more { margin: 22px 0 0 4px; } .sector-help .helps__more .link-arrow { color: #fff; } /* "How we help": more compact, so the photo card isn't much taller than the list beside it */ .sector-help.section--orange { padding: clamp(40px, 5vw, 64px) 0; } .helps { align-items: start; } .helps__tab { padding: 14px 18px; font-size: 1rem; } .helps__photo img { aspect-ratio: 2 / 1; } .helps__body { gap: 16px; padding: 20px 24px 22px; } .helps__big { font-size: clamp(2rem, 3vw, 2.5rem); } .helps__body h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); margin: 2px 0 6px; } .helps__card p { font-size: .98rem; line-height: 1.55; } /* Meet the team: directors as wide cards, then the rest of the team in a centred grid */ .team-block + .team-block { margin-top: clamp(48px, 6vw, 72px); } .team-block h2 { margin-bottom: 24px; text-align: center; } .team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } .team-grid .person { flex: 0 1 calc((100% - 48px) / 3); } .person { transition: transform .25s, border-color .25s; } .person:hover { transform: translateY(-4px); border-color: var(--orange); } .team-join { margin: 36px 0 0; text-align: center; color: var(--pearl); } @media (max-width: 980px) { .team-grid .person { flex-basis: calc((100% - 24px) / 2); } } @media (max-width: 600px) { .team-grid .person { flex-basis: 100%; } } @media (prefers-reduced-motion: reduce) { .person, .person:hover { transform: none; transition: none; } } /* Contact and brief headers on phones: the text runs full width, so tint the whole photo, not just the top-left corner */ @media (max-width: 760px) { .hero--contact::before { background: linear-gradient(180deg, rgba(0, 13, 40, .82) 0%, rgba(0, 13, 40, .72) 60%, rgba(0, 13, 40, .85) 100%); } } /* Cookie consent: a small pop-up centred at the bottom on a first visit; Preferences drops down inside it */ .cookies { position: fixed; left: 0; right: 0; bottom: 20px; z-index: 80; margin: 0 auto; width: min(500px, calc(100vw - 32px)); color: #fff; background: var(--surface); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0, 0, 0, .55); max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; animation: cookies-in .45s var(--ease) both .6s; } @keyframes cookies-in { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .cookies { animation: none; } } .cookies[hidden] { display: none; } .cookies__bar { padding: 26px 26px 18px; } .cookies__text h2 { margin: 0 0 8px; font-size: 1.3rem; } .cookies__text p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--pearl); } .cookies__text a { color: #fff; } .cookies__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; } .cookies__btns .btn { justify-content: center; white-space: nowrap; } .cookies__more { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 4px 0; background: none; border: 0; color: var(--pearl); font: inherit; font-size: .92rem; cursor: pointer; } .cookies__more:hover { color: #fff; } .cookies__more svg { width: 15px; height: 15px; transition: transform .25s; } .cookies__more[aria-expanded="true"] svg { transform: rotate(180deg); } .cookies__prefs { overflow-y: auto; border-top: 1px solid rgba(255, 255, 255, .1); } .cookies__prefs-in { padding: 0 26px; } .cookies__cats { list-style: none; margin: 0; padding: 0; } .cookies__cat { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); } .cookies__cat h3 { margin: 0 0 2px; font-size: 1rem; } .cookies__cat p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--pearl); } .cookies__always { flex: none; font-size: .78rem; font-weight: 600; color: var(--orange); } .cookies__save { padding: 12px 0 16px; } .cookies__save .btn { width: 100%; justify-content: center; } .switch { position: relative; flex: none; width: 50px; height: 28px; cursor: pointer; } .switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; } .switch span { position: absolute; inset: 0; border-radius: 999px; background: rgba(255, 255, 255, .2); transition: background .2s; } .switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; } .switch input:checked + span { background: var(--orange); } .switch input:checked + span::after { transform: translateX(22px); } .switch input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; } @media (max-width: 640px) { .cookies { bottom: 66px; max-height: calc(100vh - 82px); } } .linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; } .linklike:hover { color: var(--orange); } /* About: what we do. One compact row, brand icons: bold white outlines that turn orange on hover */ .about-svcs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); margin-top: 8px; } .about-svc { display: flex; flex-direction: column; gap: 8px; color: #fff; text-decoration: none; } .about-svc__icon { color: #fff; transition: color .2s, transform .2s; } .about-svc__icon svg { width: 40px; height: 40px; stroke-width: 2.2; } .about-svc h3 { margin: 6px 0 0; font-size: 1.08rem; transition: color .2s; } .about-svc p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.5; } .about-svc:hover .about-svc__icon, .about-svc:hover h3 { color: var(--orange); } .about-svc:hover .about-svc__icon { transform: translateY(-3px); } .about-sectors { margin: 32px 0 0; color: var(--pearl); } /* About: everything in house */ .in-house__head { max-width: 760px; margin-bottom: 32px; } .in-house__head h2 { color: #fff; margin-bottom: 12px; } .in-house__head .lede { color: #fff; } .ih-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .ih-step { flex: 0 1 calc((100% - 64px) / 5); } .ih-step { position: relative; background: var(--navy); border-radius: var(--radius-lg); padding: 24px 20px 22px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 16px 36px rgba(0, 0, 0, .25); } .ih-step__n { position: absolute; top: 18px; right: 20px; color: var(--orange); font-weight: 900; font-size: 1.1rem; } .ih-step__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--orange); color: #fff; margin-bottom: 6px; } .ih-step__icon svg { width: 22px; height: 22px; } .ih-step h3 { color: #fff; margin: 0; font-size: 1.08rem; } .ih-step__who { color: var(--orange); font-weight: 700; font-size: .85rem; } .ih-step p { margin: 0; color: rgba(232, 231, 231, .85); font-size: .93rem; line-height: 1.5; } .in-house__foot { margin: 28px 0 0; color: #fff; } .in-house .link-arrow { color: #fff; } /* About: story with a vertical timeline */ .about-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; margin-bottom: clamp(40px, 5vw, 64px); } .about-story .prose { margin-bottom: 24px; } .vtl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .vtl__item { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 16px; align-items: baseline; background: var(--surface); border-radius: var(--radius); padding: 14px 18px; } .vtl__item b { color: var(--orange); font-size: 1.35rem; font-weight: 900; letter-spacing: -.02em; } .vtl__item p { margin: 0; color: var(--pearl); font-size: .97rem; line-height: 1.5; } /* About: our home */ .home-yard__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; } .home-yard__main img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); display: block; } .home-yard__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } .home-yard__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); display: block; } .home-yard__addr { display: flex; gap: 10px; align-items: center; color: #fff; font-weight: 700; margin: 18px 0 24px; } .home-yard__addr svg { width: 20px; height: 20px; color: var(--orange); flex: none; } @media (max-width: 1100px) { .ih-step { flex-basis: calc((100% - 32px) / 3); } } @media (max-width: 900px) { .about-svcs { display: flex; flex-wrap: wrap; justify-content: center; } .about-svc { flex: 0 1 calc(50% - 16px); } .about-story, .home-yard__grid { grid-template-columns: 1fr; } .ih-step { flex-basis: calc((100% - 16px) / 2); } } @media (max-width: 600px) { .about-svc { flex-basis: 100%; } .ih-step { flex-basis: 100%; } .vtl__item { grid-template-columns: 64px minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .about-svc__icon, .about-svc:hover .about-svc__icon { transform: none; transition: none; } } .home-yard__photos { display: grid; gap: 14px; } .home-yard__shot { position: relative; margin: 0; } .home-yard__shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); display: block; } .home-yard__tag { position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; } .home-yard__shot:last-child .home-yard__tag { background: var(--orange); } /* About: our story, text only. Heading and years stay in view; the chapter being read lights up */ .chapters__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .chapters__side { align-self: stretch; } .chapters__sticky { position: sticky; top: 140px; } .chapters__sticky h2 { margin-bottom: 16px; } .chapters__years { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 4px; } .chapters__years li { position: relative; padding: 6px 0 6px 22px; color: rgba(232, 231, 231, .4); font-weight: 800; font-size: 1.05rem; transition: color .35s, transform .35s var(--ease); } .chapters__years li::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: rgba(232, 231, 231, .25); transition: background .35s, transform .35s var(--ease); } .chapters__years li.is-past { color: rgba(232, 231, 231, .65); } .chapters__years li.is-on { color: var(--orange); transform: translateX(4px); } .chapters__years li.is-on::before { background: var(--orange); transform: scale(1.35); } .chapters__list { list-style: none; margin: 0; padding: 0; } .chapter { min-height: 42vh; padding: 24px 0; display: flex; flex-direction: column; justify-content: center; opacity: .3; transform: translateY(10px); transition: opacity .45s, transform .45s var(--ease); } .chapter:last-child { min-height: 34vh; } .chapter.is-on { opacity: 1; transform: none; } .chapter__year { color: var(--orange); font-weight: 900; font-size: clamp(2.2rem, 4vw, 3.2rem); letter-spacing: -.02em; line-height: 1; } .chapter h3 { color: #fff; font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin: 12px 0 10px; } .chapter p { color: var(--pearl); font-size: 1.08rem; line-height: 1.65; margin: 0; max-width: 560px; } @media (max-width: 900px) { .chapters__grid { grid-template-columns: 1fr; gap: 8px; } .chapters__sticky { position: static; margin-bottom: 28px; } .chapters__years { display: none; } .chapter { opacity: 1; transform: none; min-height: 0; padding: 0 0 32px; } } @media (prefers-reduced-motion: reduce) { .chapter, .chapters__years li { transition: none; } } /* About "Our home": text row, then the yard photo (Before / Now toggle) and the delivered-sites map side by side */ .home-yard__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 72px); align-items: start; margin-bottom: clamp(28px, 4vw, 44px); } .home-yard__intro h2 { margin: 0; } .home-yard__intro p:first-child { margin-top: 0; } .home-yard__addr { margin: 16px 0 22px; } .home-yard__panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .home-yard__panel { margin: 0; } .home-yard__panel figcaption { margin-top: 12px; color: var(--pearl); font-size: .95rem; } .yard-toggle, .home-map { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 18px 44px rgba(0, 0, 0, .35); } .yard-toggle__img { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; } .yard-toggle__img.is-on { opacity: 1; } .yard-toggle__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .yard-toggle__btns { position: absolute; left: 14px; top: 14px; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--navy); z-index: 2; } .yard-toggle__btns button { border: 0; background: none; color: #fff; font: inherit; font-weight: 700; font-size: .85rem; padding: 7px 14px; border-radius: 999px; cursor: pointer; } .yard-toggle__btns button.is-on { background: var(--orange); } .home-map { background: var(--navy); } .home-map .leaflet-control-attribution { font-size: 10px; } .home-map__fail { padding: 24px; color: var(--pearl); } @media (max-width: 900px) { .home-yard__intro, .home-yard__panels { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .yard-toggle__img { transition: none; } } /* ---------------------------------------------------------------- type scale (one set of sizes site-wide) h1 3.6rem (home 2.85rem, beside the questionnaire); section h2 2.5rem; h2 inside copy 1.9rem; h3: large 1.45rem, standard 1.25rem, small 1.1rem. Weights: headings Black 900, h3 Bold 700. */ .seo-block h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); } .prose h2, .job-block h2, .story__step h2, .side-steps h2, .article h2 { font-size: clamp(1.45rem, 2.2vw, 1.9rem); } .h-card { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .5em; } .helps__body h3, .chapter h3, .value h3, .svc__body h3 { font-size: 1.45rem; } .band .card h3, .why-card h3, .pay-card h3, .job h3 { font-size: 1.25rem; } .read h3, .acard h3, .acard__body h3, .about-svc h3, .ih-step h3, .seo-cols h3, .qv__body h3 { font-size: 1.1rem; } /* Policies (tender readiness) */ .about-svcs--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 48px; } .pdocs { display: block; } .pdocs h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-bottom: 20px; } .pdocs__list ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .pdoc { display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--navy-2); color: #fff; text-decoration: none; transition: transform .3s var(--ease), background .3s; } .pdoc:hover { transform: translateY(-3px); background: var(--navy-3); } .pdoc__icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(232, 78, 40, .14); color: var(--orange); } .pdoc__icon svg, .pdoc__go svg { width: 20px; height: 20px; } .pdoc__name { flex: 1; font-weight: 600; line-height: 1.3; } .pdoc__name small { display: block; margin-top: 3px; font-weight: 400; font-size: .8rem; color: var(--muted); letter-spacing: .06em; } .pdoc__go { flex: none; color: var(--muted); transition: color .3s, transform .3s var(--ease); } .pdoc:hover .pdoc__go { color: var(--orange); transform: translateY(2px); } @media (max-width: 980px) { .pdocs__list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .pdocs__list ul { grid-template-columns: 1fr; } } @media (max-width: 900px) { .about-svcs--3 { display: flex; } .about-svcs--3 .about-svc { flex: 0 1 100%; } } .aside__reads { margin-top: 28px; } .aside__reads h3 { font-size: 1.1rem; margin: 0 0 10px; } .aside__reads ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .aside__reads a { color: #fff; font-weight: 500; text-decoration: none; line-height: 1.4; } .aside__reads a:hover { color: var(--orange); } .kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .about-svcs--3 .about-svc h3 { font-size: 1.45rem; } .about-svcs--3 .about-svc p { font-size: 1rem; } .about-svcs--3 .about-svc__icon svg { width: 48px; height: 48px; } .section--orange .lede, .section--orange p { color: #fff; } .kpis--2 .kpi__label { white-space: normal; } .section--orange .kpi__label { color: #fff; } .section--orange .kpi b { color: #fff; } /* Date under the headline stats (audit, Nov 2026) */ /* Article bylines link to the author's card on Meet the team */ .person { scroll-margin-top: 120px; } .author strong a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* ---- Team and About, laid out like tru7.com (Nov 2026) ---- */ /* Team cards: no box, square photo, name and role underneath */ .team-band__title { margin: 0 0 clamp(24px, 4vw, 40px); } .team-grid { justify-content: center; gap: clamp(20px, 3vw, 32px); } .team-grid .person { flex: 0 1 calc((100% - 3 * clamp(20px, 3vw, 32px)) / 4); background: none; border: 0; border-radius: 0; } .team-grid .person:hover { transform: none; } .team-grid .person__media { border-radius: var(--radius-lg); overflow: hidden; } .team-grid .person:hover .person__media img { transform: scale(1.04); } .team-grid .person__media img { transition: transform .4s var(--ease); } .team-grid .person__body { padding: 16px 2px 0; } .team-grid .person__body h3 { font-size: 1.2rem; } .section--orange .person__role, .section--orange .person__bio summary { color: #fff; } .person__bio { margin-top: 10px; } .person__bio summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; color: var(--orange); font-weight: 700; font-size: .9rem; } .person__bio summary::-webkit-details-marker { display: none; } .person__bio summary svg { width: 16px; height: 16px; transition: transform .2s; } .person__bio[open] summary svg { transform: rotate(180deg); } .person__bio p { margin: 8px 0 0; font-size: .95rem; color: var(--muted); } .section--orange .person__bio p { color: #fff; } @media (max-width: 900px) { .team-grid .person { flex-basis: calc((100% - clamp(20px, 3vw, 32px)) / 2); } } .team-intro { max-width: 760px; margin: 0 auto; text-align: center; } .team-intro .lede { margin: 12px auto 16px; } /* About: intro split, team head row, photo with overlapping card, three columns */ .about-intro { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 5vw, 64px); align-items: start; } .about-intro h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 0; } .about-intro .lede { margin-top: 0; } .about-team__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(24px, 4vw, 40px); } .about-team__head h2 { margin: 0; } .feature { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; } .feature__img { grid-column: 1 / 2; grid-row: 1; border-radius: var(--radius-lg); overflow: hidden; } .feature__img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; } .feature__card { grid-column: 2 / 3; grid-row: 1; margin-left: -80px; position: relative; background: var(--orange); color: #fff; border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 44px); } .feature__card h2 { margin-top: 0; } .feature__list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 14px; } .feature__list h3 { font-size: 1.05rem; margin: 0 0 2px; } .feature__list p { margin: 0; font-size: .95rem; } .about-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 48px); } .about-cols p { color: #fff; } .about-cols__links { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; } .about-cols__links a, .about-cols .link-arrow { color: #fff; font-weight: 700; } .about-cols__links a:hover { text-decoration: underline; } @media (max-width: 900px) { .about-intro, .about-cols { grid-template-columns: 1fr; } .feature { grid-template-columns: 1fr; } .feature__img, .feature__card { grid-column: 1; } .feature__card { grid-row: 2; margin: -48px 16px 0; } } /* Directors: two large cards filling the row; the team: five across on desktop, so every row is full */ .directors-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px); } .director { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(16px, 2.5vw, 28px); align-items: start; scroll-margin-top: 120px; } .director__photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--navy); } .director__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } .director__body h3 { margin: 0 0 2px; font-size: 1.5rem; } .director__body .person__role { color: #fff; opacity: .85; margin-bottom: 12px; } .director__body p { color: #fff; margin: 0 0 14px; } .director__body blockquote { margin: 0; padding: 0; font-size: 1.05rem; font-weight: 700; color: #fff; } .director__body blockquote::before { content: "\201C"; display: block; font-size: 2.6rem; line-height: .8; color: var(--navy); } .team-grid--5 .person { flex-basis: calc((100% - 4 * clamp(20px, 3vw, 32px)) / 5); } @media (max-width: 1100px) { .team-grid--5 .person { flex-basis: calc((100% - 2 * clamp(20px, 3vw, 32px)) / 3); } } @media (max-width: 900px) { .directors-grid { grid-template-columns: 1fr; } .team-grid--5 .person { flex-basis: calc((100% - clamp(20px, 3vw, 32px)) / 2); } } @media (max-width: 520px) { .director { grid-template-columns: 1fr; } .director__photo { aspect-ratio: 1 / 1; } } /* ---- Softer team and About (Nov 2026): orange as rounded panels, round portraits, captions under tiles ---- */ .soft-panel { background: var(--orange); color: #fff; border-radius: 36px; padding: clamp(28px, 5vw, 64px); } .soft-panel .person__role, .soft-panel .person__bio summary, .soft-panel .person__bio p, .soft-panel p { color: #fff; } .soft-panel .director__body blockquote::before { color: var(--navy); } .team-band { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(24px, 3vw, 40px); } /* round portraits, text centred under each */ .team-grid .person { text-align: center; } .team-grid .person__media { border-radius: 50%; aspect-ratio: 1 / 1; max-width: 220px; margin: 0 auto; } .team-grid .person__body { padding-top: 18px; } .director__photo { border-radius: 50%; aspect-ratio: 1 / 1; } .director { align-items: center; } /* the photo beside "How we work" gets the same soft corners */ .feature__img, .feature__card { border-radius: 32px; } @media (max-width: 520px) { .director__photo { max-width: 240px; } .soft-panel { border-radius: 24px; } } /* directors: round photo on top, then name, role, bio and quote */ .director { grid-template-columns: 1fr; justify-items: start; gap: 18px; } .director__photo { width: clamp(160px, 18vw, 220px); } /* portraits: square with soft corners (Lauren: square, not circles) */ .team-grid .person__media, .director__photo { border-radius: 28px; } .team-grid .person__media { max-width: none; } .directors-grid, .director { align-items: start; } /* ---- Team cards link to full profile pages (as on tru7.com) ---- */ a.person { color: inherit; text-decoration: none; } .person__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 700; font-size: .9rem; color: var(--orange); } .person__more svg { width: 16px; height: 16px; transition: transform .2s; } a.person:hover .person__more svg { transform: translateX(4px); } .soft-panel .person__more { color: #fff; } .team-grid--lead { justify-content: flex-start; } .team-grid--lead .person { flex: 0 1 calc((100% - 3 * clamp(20px, 3vw, 32px)) / 4); text-align: left; } @media (max-width: 900px) { .team-grid--lead .person { flex-basis: calc((100% - clamp(20px, 3vw, 32px)) / 2); } } .profile__back { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; text-decoration: none; margin-bottom: clamp(24px, 4vw, 48px); } .profile__back svg { width: 18px; height: 18px; color: var(--orange); } .profile__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; } .profile__photo img, .profile__photo .person__media--empty { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: 32px; display: grid; } .profile__role { display: block; color: var(--orange); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; } .profile__text h1 { margin: 6px 0 20px; font-size: clamp(2.4rem, 5vw, 3.6rem); } .profile__quote { margin: 0 0 24px; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.4; font-weight: 700; color: #fff; } .profile__quote::before { content: "\201C"; display: block; font-size: 3.6rem; line-height: .7; color: var(--orange); } .profile__bio { font-size: 1.1rem; line-height: 1.7; color: var(--pearl); max-width: 60ch; } .profile__reads { margin: 28px 0; } .profile__reads ul { padding-left: 20px; margin: 10px 0 0; display: grid; gap: 8px; } .profile__reads a { color: #fff; } .profile__text .hero__actions { margin-top: 28px; } .profile__nav { margin-top: clamp(40px, 6vw, 72px); } @media (max-width: 900px) { .profile__grid { grid-template-columns: 1fr; } .profile__photo img { aspect-ratio: 1 / 1; max-width: 420px; } } .lead-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 56px); align-items: center; } .lead-panel__text p { font-size: 1.1rem; line-height: 1.6; margin: 0; } .team-grid--lead .person { flex: 1 1 0; max-width: 320px; } @media (max-width: 900px) { .lead-panel { grid-template-columns: 1fr; } .team-grid--lead .person { flex: 0 1 calc((100% - clamp(20px, 3vw, 32px)) / 2); } } /* ---- Team cards: left-aligned, buttons lined up at the bottom, animated pill button (Nov 2026) ---- */ .team-grid .person { text-align: left; display: flex; flex-direction: column; } .team-grid .person__media { margin: 0; } .team-grid .person__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 18px 0 0; } .team-grid .person__body h3 { font-size: 1.25rem; margin: 0 0 4px; } .team-grid .person__role { margin: 0 0 20px; line-height: 1.35; } .person__more { margin-top: auto; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; padding: 11px 12px 11px 22px; border-radius: 999px; border: 2px solid var(--orange); color: #fff; font-size: 1rem; font-weight: 700; transition: color .3s var(--ease), border-color .3s; } .person__more::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--orange); transform: scaleX(0); transform-origin: left center; transition: transform .4s var(--ease); } .person__more svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--orange); color: #fff; transition: transform .4s var(--ease), background .3s, color .3s; } a.person:hover .person__more::before, a.person:focus-visible .person__more::before { transform: scaleX(1); } a.person:hover .person__more svg, a.person:focus-visible .person__more svg { transform: translateX(4px) rotate(-45deg); background: #fff; color: var(--orange); } a.person:focus-visible { outline: 3px solid var(--orange); outline-offset: 6px; border-radius: 20px; } a.person .person__media img { transition: transform .5s var(--ease); } a.person:hover .person__media img { transform: scale(1.05); } /* on the orange panels the button is white-edged and fills navy */ .soft-panel .person__more { border-color: #fff; color: #fff; } .soft-panel .person__more::before { background: var(--navy); } .soft-panel .person__more svg { background: #fff; color: var(--orange); } .soft-panel a.person:hover .person__more svg { background: var(--orange); color: #fff; } @media (prefers-reduced-motion: reduce) { .person__more::before, .person__more svg, a.person .person__media img { transition: none; } } /* About: four page links in the standard card (same as project cards) */ .link-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .link-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 980px) { .link-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .link-cards { grid-template-columns: 1fr; } } /* About three columns: service and sector links as the site's pill tags */ .about-cols__links { display: flex; flex-wrap: wrap; gap: 8px; } .pill--link { text-decoration: none; transition: background .25s, color .25s, transform .25s; } .soft-panel .pill--link { background: rgba(0, 13, 40, .22); color: #fff; } .soft-panel .pill--link svg { color: #fff; } .soft-panel .pill--link:hover { background: var(--navy); transform: translateY(-2px); text-decoration: none; } /* ---- About redesign 2 (Nov 2026) ---- */ /* How we work: the three values are the feature */ .value-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 3vw, 30px); } .value-rows li { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; } .value-row__icon { width: 56px; height: 56px; border-radius: 16px; background: var(--navy); display: grid; place-items: center; } .value-row__icon svg { width: 28px; height: 28px; color: var(--orange); } .value-rows h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin: 4px 0 6px; color: #fff; } .value-rows p { margin: 0; color: #fff; font-size: 1rem; line-height: 1.55; } .feature { margin-top: clamp(24px, 4vw, 40px); } .feature__card { padding: clamp(28px, 4vw, 48px); } /* Everything in house: one step open at a time */ .steps-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 72px); align-items: start; } .steps-layout .lede { margin: 12px 0 16px; } .steps-layout p { color: #fff; } .ihx-list { display: grid; gap: 10px; } .ihx { background: rgba(0, 13, 40, .18); border-radius: 22px; transition: background .3s var(--ease); } .ihx[open] { background: var(--navy); } .ihx summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 18px 22px; } .ihx summary::-webkit-details-marker { display: none; } .ihx__n { font-weight: 900; font-size: 1.1rem; color: #fff; opacity: .75; font-variant-numeric: tabular-nums; } .ihx[open] .ihx__n { color: var(--orange); opacity: 1; } .ihx__title b { display: block; font-size: 1.15rem; color: #fff; } .ihx__title small { display: block; font-size: .85rem; font-weight: 700; color: #fff; opacity: .85; margin-top: 2px; } .ihx[open] .ihx__title small { color: var(--orange); opacity: 1; } .ihx__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); transition: background .3s, transform .3s var(--ease); } .ihx__icon svg { width: 22px; height: 22px; color: #fff; } .ihx[open] .ihx__icon { background: var(--orange); } .ihx summary:hover .ihx__icon { transform: scale(1.08); } .ihx p { margin: 0; padding: 0 22px 22px calc(22px + 16px + 2ch); color: var(--pearl); font-size: 1.02rem; line-height: 1.6; animation: ihx-in .35s var(--ease); } @keyframes ihx-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* Our home (About): head office and yard showcase */ .yard-show__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: center; } .yard-show__media { margin: 0; } .yard-show__media .compare { border-radius: 28px; aspect-ratio: 4 / 3; } .yard-show__media figcaption { margin-top: 12px; color: var(--muted); font-size: .95rem; } .yard-show__reach { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; margin-top: clamp(40px, 6vw, 80px); } .yard-show__map .home-map { width: 100%; margin: 0; aspect-ratio: auto; border-radius: 28px; overflow: hidden; height: 100%; min-height: 460px; } .yard-stats { display: flex; flex-direction: column; gap: 24px; padding: clamp(28px, 4vw, 48px); } .yard-stats .h-card { margin: 0; color: #fff; } .yard-stat b { display: flex; align-items: baseline; gap: 6px; font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; } .yard-stat b i { font-style: normal; font-size: .4em; letter-spacing: 0; color: var(--navy); } .yard-stat > span { display: block; margin-top: 8px; font-weight: 600; } .yard-stats .btn { align-self: flex-start; margin-top: auto; border-color: #fff; } .yard-stats .btn:hover { background: var(--navy); border-color: var(--navy); } @media (max-width: 900px) { .steps-layout, .yard-show__top, .yard-show__reach { grid-template-columns: minmax(0, 1fr); } .yard-show__map .home-map { min-height: 0; height: auto; aspect-ratio: 4 / 3; } .ihx p { padding-left: 22px; } } @media (prefers-reduced-motion: reduce) { .ihx p { animation: none; } } /* ---- Videos (Nov 2026): Videos page, "Watch" rows, YouTube embeds ---- */ .video-grid { gap: 20px; } .video-card[hidden] { display: none; } .video-btn--frame { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-lg); display: block; } .video-grid .video-btn, .video-feature .video-btn { width: 100%; } .video-grid .video-btn img, .video-feature .video-btn img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; } .video-feature { margin: 0 0 28px; border-radius: 28px; overflow: hidden; } .hub-switch { display: inline-flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--navy-2); margin-bottom: 28px; } .hub-switch__tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; color: #fff; font-weight: 700; text-decoration: none; transition: background .25s; } .hub-switch__tab svg { width: 16px; height: 16px; } .hub-switch__tab:hover { background: rgba(255, 255, 255, .08); } .hub-switch__tab[aria-current="page"] { background: var(--orange); } .video-card__title { margin: 14px 0 2px; font-size: 1.1rem; } .video-card__cat { color: var(--orange); font-weight: 700; font-size: .85rem; } .video-card .video-btn__label { display: none; } /* PKB's branded video thumbnails carry their own title on the left: no label, play button bottom right */ .video-btn--branded .video-btn__label { display: none; } .video-btn--branded .video-btn__bar { left: auto; top: auto; right: 14px; bottom: 14px; } /* Client name and logo on testimonials and project pages */ .client-logo { width: 80px; height: 50px; border-radius: 12px; object-fit: cover; flex: none; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); } .client-by { display: flex; align-items: center; gap: 12px; margin-top: 18px; } .client-by cite { display: block; font-style: normal; font-weight: 700; } .client-by small { display: block; font-size: .9rem; opacity: .8; margin-top: 2px; } .fact .client-logo { width: 64px; height: 40px; border-radius: 10px; } /* Every page header (not the home video) is one height, text centred in the same place */ .hero:not(.hero--home), .phero { min-height: clamp(520px, 46vw, 680px); display: flex; align-items: center; } .hero:not(.hero--home) > .wrap, .phero > .wrap { width: 100%; } .hero:not(.hero--home) .hero__inner, .hero--slim .hero__inner, .hero--contact .hero__inner, .phero__inner { padding: 56px 0; } @media (max-width: 760px) { .hero:not(.hero--home), .phero { min-height: 580px; } } /* Link cards without a photo (About: Projects, Policies, Knowledge hub, Careers) */ .lcard { display: flex; flex-direction: column; align-items: flex-start; padding: 28px 26px 24px; border-radius: var(--radius-lg); background: var(--navy-2); color: #fff; text-decoration: none; transition: transform .35s var(--ease), background .35s, box-shadow .35s; } .lcard:hover { transform: translateY(-6px); background: var(--navy-3); box-shadow: 0 22px 50px rgba(0, 0, 0, .3); } .lcard__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--orange); color: #fff; margin-bottom: 22px; } .lcard__icon svg { width: 26px; height: 26px; } .lcard h3 { color: #fff; font-size: 1.3rem; margin: 0 0 10px; } .lcard p { color: var(--muted); font-size: .95rem; margin: 0 0 18px; } .lcard__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-weight: 700; } .lcard__cta svg { width: 18px; height: 18px; color: var(--orange); transition: transform .3s var(--ease); } .lcard:hover .lcard__cta svg { transform: translateX(4px); } /* About: How we work, no photo. Heading left (stays in view), the three values as a numbered list right */ .how-work { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .how-work__head { position: sticky; top: 140px; } .how-work__head h2 { margin-bottom: 16px; } .how-work__head .lede { margin-bottom: 28px; } .how-work__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .how-work__list li { display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 3vw, 32px); align-items: start; padding: clamp(24px, 3vw, 34px); border-radius: var(--radius-lg); background: var(--navy-2); transition: background .35s, transform .35s var(--ease); } .how-work__list li:hover { background: var(--navy-3); transform: translateX(6px); } .how-work__num { font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 800; line-height: .9; color: var(--orange); font-variant-numeric: tabular-nums; } .how-work__list h3 { display: flex; align-items: center; gap: 10px; color: #fff; font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 2px 0 8px; } .how-work__icon { display: inline-grid; color: var(--orange); } .how-work__icon svg { width: 24px; height: 24px; } .how-work__list p { margin: 0; color: var(--muted); line-height: 1.6; } @media (max-width: 900px) { .how-work { grid-template-columns: 1fr; } .how-work__head { position: static; } } /* Sound familiar band: the open list needs an even navy wash on the right as well as the left */ .band:has(.familiar-band)::after { background: linear-gradient(90deg, rgba(0, 13, 40, .9) 0%, rgba(0, 13, 40, .72) 42%, rgba(0, 13, 40, .8) 100%); } /* Video pop-up: used when the screen or the video card is too small to watch in place */ .vpop { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 13, 40, .92); backdrop-filter: blur(6px); } .vpop.is-open { display: flex; } .vpop__box { position: relative; width: min(1100px, 100%); } .vpop__frame { aspect-ratio: 16 / 9; width: 100%; max-height: calc(100vh - 120px); border-radius: var(--radius-lg); overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); } .vpop__frame iframe, .vpop__frame video { width: 100%; height: 100%; border: 0; display: block; object-fit: contain; } .vpop__close { position: absolute; right: 0; top: -58px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--orange); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .25s var(--ease); } .vpop__close:hover { transform: rotate(90deg); } .vpop__close svg { width: 22px; height: 22px; } @media (orientation: landscape) and (max-height: 520px) { .vpop__box { width: min(100%, calc((100vh - 32px) * 16 / 9)); } .vpop__close { top: 8px; right: 8px; z-index: 1; } } /* Videos page: big player carousel */ .vcar { margin: 0 0 32px; } .vcar__stage { position: relative; border-radius: 28px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; } .vcar__slide { position: absolute; inset: 0; animation: vcarIn .45s var(--ease); } .vcar__slide[hidden] { display: none; } @keyframes vcarIn { from { opacity: 0; } to { opacity: 1; } } .vcar__slide > .video-btn, .vcar__slide > iframe, .vcar__slide > video { width: 100%; height: 100%; border-radius: 0; aspect-ratio: auto; } .vcar__slide .video-btn img { width: 100%; height: 100%; object-fit: cover; } .vcar__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; } .vcar__title { margin: 4px 0 0; font-size: clamp(1.15rem, 2vw, 1.5rem); } .vcar__nav { display: flex; align-items: center; gap: 10px; flex: none; } .vcar__count { color: var(--muted); font-size: .92rem; font-variant-numeric: tabular-nums; margin-right: 6px; } .vcar .icon-btn:hover:not(:disabled) { background: var(--orange); border-color: var(--orange); } .vpick { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--navy-2); cursor: pointer; aspect-ratio: 16 / 9; } .vpick img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), opacity .3s; opacity: .9; } .vpick:hover img { transform: scale(1.04); opacity: 1; } .vpick::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px transparent; transition: box-shadow .25s; } .vpick.is-on::after { box-shadow: inset 0 0 0 3px var(--orange); } .vpick__now { position: absolute; left: 12px; top: 12px; padding: 5px 11px; border-radius: 999px; background: var(--orange); color: #fff; font-size: .8rem; font-weight: 700; opacity: 0; transform: translateY(-4px); transition: .25s; } .vpick.is-on .vpick__now { opacity: 1; transform: none; } @media (max-width: 640px) { .vcar__stage { border-radius: 18px; } .vcar__bar { flex-direction: column-reverse; align-items: stretch; gap: 12px; } .vcar__nav { justify-content: space-between; } .vcar__count { order: 1; flex: 1; } .vcar__nav [data-vcar-prev] { order: 2; } .vcar__nav [data-vcar-next] { order: 3; } } .story-lead { color: #fff; font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700; line-height: 1.35; letter-spacing: -.01em; margin: 0; } /* Service pages: what we do. Navy cards on the orange band, icon + title + text all readable at once. Hover: card lifts, a soft light follows the pointer, icon swaps colour, a brief link slides in */ .wwd__head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 44px); } .wwd__head h2 { margin-bottom: 10px; } .wwd__head p { color: #fff; font-size: 1.08rem; margin: 0; } .wwd__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .wwd__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wwd__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .wwd__card { --mx: 50%; --my: 0%; position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 26px 24px 22px; border-radius: var(--radius-lg); background: var(--navy); color: #fff; box-shadow: 0 10px 30px rgba(0, 13, 40, .22); transition: transform .35s var(--ease), box-shadow .35s; } .wwd__card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(320px circle at var(--mx) var(--my), rgba(232, 82, 37, .22), transparent 60%); opacity: 0; transition: opacity .35s; pointer-events: none; } .wwd__card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0, 13, 40, .4); } .wwd__card:hover::before { opacity: 1; } .wwd__icon { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--orange); color: #fff; margin-bottom: 18px; transition: background .3s, color .3s, transform .35s var(--ease); } .wwd__icon svg { width: 27px; height: 27px; } .wwd__card:hover .wwd__icon { background: #fff; color: var(--orange); transform: rotate(-6deg) scale(1.06); } .wwd__card h3 { position: relative; color: #fff; font-size: 1.2rem; line-height: 1.3; margin: 0 0 8px; } .wwd__card p { position: relative; color: var(--pearl); font-size: .98rem; line-height: 1.55; margin: 0 0 18px; } .wwd__go { position: relative; margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: .95rem; text-decoration: none; opacity: .55; transition: opacity .3s, gap .3s var(--ease); } .wwd__go svg { width: 18px; height: 18px; color: var(--orange); } .wwd__card:hover .wwd__go, .wwd__go:focus-visible { opacity: 1; gap: 12px; } .wwd__more { margin: 32px 0 0; } @media (max-width: 1100px) { .wwd__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .wwd__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .wwd__grid { gap: 10px; } .wwd__grid--3, .wwd__grid--4 { grid-template-columns: 1fr; } .wwd__card { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; padding: 18px; } .wwd__icon { grid-row: span 2; width: 44px; height: 44px; border-radius: 13px; margin: 0; } .wwd__icon svg { width: 22px; height: 22px; } .wwd__card h3 { font-size: 1.08rem; margin: 2px 0 4px; } .wwd__card p { font-size: .94rem; margin: 0; } .wwd__go { display: none; } } @media (hover: none) { .wwd__go { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .wwd__card, .wwd__icon { transition: none; } } .btn--navy { --bg: var(--navy); } .btn--navy:hover { --bg: #0d1c3d; } /* Service pages: Why clients choose us. Open rows over the photo, no cards (differs from the What we do cards above) */ .why-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; } .why-row { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; transition: transform .25s var(--ease); } .why-row:hover { transform: translateX(6px); } .why-row:hover .problem__icon { background: #fff; color: var(--orange); } .why-row h3 { color: #fff; font-size: 1.2rem; margin: 8px 0 6px; text-shadow: 0 1px 12px rgba(0, 13, 40, .6); } .why-row p { color: #e8e7e7; margin: 0; line-height: 1.6; text-shadow: 0 1px 12px rgba(0, 13, 40, .6); } /* Testimonials: the client's logo in white (no box) beside their name and the role of the person quoted */ .testi__by { display: flex; align-items: center; gap: 16px; } .testi__logo { display: block; height: 38px; width: auto; max-width: 140px; object-fit: contain; opacity: .95; flex: none; } .testi__by p { margin: 0; display: flex; flex-direction: column; gap: 2px; } .testi__by cite { font-style: normal; font-weight: 700; color: #fff; font-size: 1.05rem; } .testi__by span { color: var(--muted); font-size: .92rem; } /* Project cards: cleaner photos. Only a short fade along the bottom for the title; it deepens on hover to show the summary */ .pcard__media::after { background: linear-gradient(180deg, rgba(0, 13, 40, 0) 52%, rgba(0, 13, 40, .45) 72%, rgba(0, 13, 40, .88) 100%); } .pcard:hover .pcard__media::after { background: linear-gradient(180deg, rgba(0, 13, 40, .05) 20%, rgba(0, 13, 40, .7) 55%, rgba(0, 13, 40, .95) 100%); } .pcard__media img { opacity: 1; } .pcard h3, .pcard__place { text-shadow: 0 1px 14px rgba(0, 13, 40, .55); } /* Project headers: the photo fills the right of the header at every screen size (no navy bands), fading into the navy behind the text on its left edge (Lauren, 6 Nov 2026) */ .phero > img { left: auto; right: 0; width: 64%; object-position: center; transform: none; animation: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 20%, #000 45%); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 20%, #000 45%); } .phero::after { background: linear-gradient(90deg, rgba(0, 13, 40, .55) 0%, rgba(0, 13, 40, .25) 40%, rgba(0, 13, 40, 0) 60%), linear-gradient(180deg, rgba(0, 13, 40, 0) 75%, rgba(0, 13, 40, .3) 100%); } @media (max-width: 900px) { .phero > img { width: 100%; -webkit-mask-image: none; mask-image: none; } .phero::after { background: linear-gradient(180deg, rgba(0, 13, 40, .45) 0%, rgba(0, 13, 40, .7) 55%, rgba(0, 13, 40, .92) 100%); } } /* project header photo shown whole at full header height (e.g. AVK), never wider than the header */ .phero > img.phero__full { width: auto; height: 100%; max-width: 100%; } @media (max-width: 900px) { .phero > img.phero__full { width: 100%; aspect-ratio: auto !important; } } /* project pages: Further reading sits under the story (balances the columns), and less space before the next section */ .story .aside__reads { margin-top: 40px; padding-left: 72px; } .story .aside__reads ul { gap: 12px; } .pbody { padding-bottom: 0; } section:has(> .wrap.pbody) { padding-bottom: clamp(32px, 4vw, 48px); } @media (max-width: 900px) { .story .aside__reads { padding-left: 0; } } /* Further reading on project pages: article rows with a photo, title, read time and arrow */ .story .aside__reads { padding: 24px; border-radius: var(--radius-lg); background: var(--navy-2); margin-left: 72px; padding-left: 24px; } .story .aside__reads h3 { margin: 0 0 14px; } .story .aside__reads ul { gap: 10px; } .read-row { display: grid; grid-template-columns: 112px 1fr auto; gap: 16px; align-items: center; padding: 8px; margin: -8px; border-radius: var(--radius); text-decoration: none; transition: background .25s; } .read-row:hover { background: var(--navy-3); } .read-row__img { display: block; width: 112px; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--navy); } .read-row__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); } .read-row:hover .read-row__img img { transform: scale(1.06); } .read-row__text { display: flex; flex-direction: column; gap: 4px; } .read-row__text strong { color: #fff; font-weight: 700; line-height: 1.35; } .read-row__text span { color: var(--muted); font-size: .88rem; } .read-row__go { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .06); color: var(--orange); transition: background .25s, color .25s, transform .25s var(--ease); } .read-row__go svg { width: 18px; height: 18px; } .read-row:hover .read-row__go { background: var(--orange); color: #fff; transform: translateX(3px); } @media (max-width: 900px) { .story .aside__reads { margin-left: 0; } } @media (max-width: 560px) { .read-row { grid-template-columns: 88px 1fr; } .read-row__img { width: 88px; } .read-row__go { display: none; } } @media (max-width: 1520px) and (min-width: 761px) { .fact { padding: 20px 14px 20px 0; gap: 10px; } .fact + .fact { padding-left: 14px; } .fact b { font-size: 1.02rem; } .fact small { letter-spacing: .06em; } } /* project card place: a solid orange tag instead of spaced-out orange capitals */ .pcard .pcard__place { display: inline-flex; align-self: flex-start; width: max-content; gap: 5px; padding: 5px 11px 5px 8px; margin-bottom: 10px; border-radius: 999px; background: var(--orange); color: #fff; font-size: .82rem; font-weight: 700; text-transform: none; letter-spacing: 0; text-shadow: none; box-shadow: 0 4px 14px rgba(0, 13, 40, .3); } .pcard .pcard__place svg { width: 14px; height: 14px; color: #fff; } /* titles take two lines at rest so the place tags line up across the cards; on hover a one-line title's spare line closes up, so the summary follows straight on (no gap) */ .pcard h3 { min-height: 2.6em; line-height: 1.3; transition: min-height .45s var(--ease); } .pcard:hover h3, .pcard:focus-visible h3 { min-height: 1.3em; } @media (hover: none) { .pcard h3 { min-height: 0; } } /* client logos: white, no tile; size comes from the logo itself (same visual area for every client) */ .client-logo, .fact .client-logo { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; object-fit: contain; flex: none; } .testi__logo { height: auto; max-width: none; object-fit: contain; opacity: 1; } /* facts row: Client label with the white logo underneath (no repeated name) */ .fact--client small { margin-bottom: 8px; } .fact--client img { display: block; } /* phones: the bottom bar already has Send your brief, so the header keeps just the logo and menu (no button over the diagonal) */ @media (max-width: 600px) { .nav__brief { display: none; } } @media (max-width: 600px) { .nav__band { background: linear-gradient(225deg, #e8e7e7 0%, #e8e7e7 36%, var(--navy) 36%, var(--navy) 100%); } } @media (max-width: 760px) { .fact b { white-space: nowrap; font-size: 1rem; } .fact { gap: 10px; } .fact svg { width: 22px; height: 22px; } } @media (max-width: 380px) { .facts__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fact b { white-space: normal; } } /* mobile fixes (6 Nov 2026) */ .person__more { white-space: nowrap; } .fact { align-items: flex-start; } .fact svg { margin-top: 2px; } @media (max-width: 900px) { .chapter:last-child { min-height: 0; } } @media (max-width: 640px) { .pbody .quote { padding: 64px 22px 24px; } .pbody .quote::before { left: 20px; top: 6px; font-size: 3.6rem; } .person__more { padding-left: 14px; padding-right: 10px; font-size: .85rem; gap: 8px; } } /* Thank you page: progress tracker (step 1 done, step 2 up next) */ .track-head { margin-bottom: 36px; } .track-head h2 { margin-bottom: 8px; } .track { --node: 64px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; position: relative; } /* the track behind the nodes, and the orange progress from step 1 to step 2 */ .track::before, .track::after { content: ""; position: absolute; top: calc(var(--node) / 2 - 2px); left: calc(12.5% - 10px); height: 4px; border-radius: 4px; } .track::before { right: calc(12.5% - 10px); background: var(--navy-2); } .track::after { width: 0; background: var(--orange); transition: width 1.1s var(--ease) .3s; } .track.is-in::after { width: calc(25% + 5px); } .track__step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; } .track__node { position: relative; z-index: 1; display: grid; place-items: center; width: var(--node); height: var(--node); border-radius: 50%; background: var(--navy-2); color: var(--pearl); border: 3px solid var(--navy); transition: transform .3s var(--ease), background .3s, color .3s; } .track__node svg { width: 26px; height: 26px; } .track__step.is-done .track__node { background: var(--orange); color: #fff; } .track__step.is-done .track__node svg { width: 30px; height: 30px; stroke-width: 3; } .track__step.is-next .track__node { background: #fff; color: var(--orange); } .track__step.is-next .track__node::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--orange); animation: track-pulse 2s ease-out infinite; } @keyframes track-pulse { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.35); opacity: 0; } } .track__card { flex: 1; margin-top: 18px; width: 100%; padding: 22px 20px 20px; border-radius: var(--radius-lg); background: var(--navy-2); border: 1px solid transparent; transition: transform .3s var(--ease), border-color .3s, background .3s; } .track__n { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .track__card h3 { font-size: 1.1rem; margin: 0 0 8px; } .track__card p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--pearl); } .track__tag { display: inline-block; margin-top: 14px; padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: rgba(232, 82, 37, .16); color: var(--orange); } .track__step.is-done .track__tag { background: var(--orange); color: #fff; } .track__step.is-next .track__card { border-color: var(--orange); } .track__step:not(.is-done):not(.is-next) { opacity: .75; } .track__step:hover { opacity: 1; } .track__step:hover .track__node { transform: scale(1.08); } .track__step:hover .track__card { transform: translateY(-6px); background: var(--navy-3); } /* steps appear one after another */ .track .track__step { opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .5s var(--ease); transition-delay: calc(var(--i) * 120ms); } .track.is-in .track__step { opacity: 1; transform: none; } .track.is-in .track__step:not(.is-done):not(.is-next) { opacity: .75; } .track.is-in .track__step:not(.is-done):not(.is-next):hover { opacity: 1; } @media (prefers-reduced-motion: reduce) { .track .track__step, .track::after { transition: none; } .track__step.is-next .track__node::after { animation: none; } } /* phones and tablets: a vertical timeline */ @media (max-width: 860px) { .track { --node: 52px; grid-template-columns: 1fr; gap: 14px; } .track::before, .track::after { top: calc(var(--node) / 2); left: calc(var(--node) / 2 - 2px); width: 4px; height: auto; } .track::before { bottom: calc(var(--node) / 2); right: auto; } .track::after { height: 0; bottom: auto; transition: height 1.1s var(--ease) .3s; } .track.is-in::after { width: 4px; height: calc(25% + 10px); } .track__step { flex-direction: row; align-items: flex-start; text-align: left; gap: 16px; } .track__node { flex: none; } .track__card { margin-top: 0; } } .thanks-call { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-top: 36px; padding: 26px 30px; border-radius: var(--radius-lg); } .thanks-call h2 { margin: 0 0 4px; color: #fff; } .thanks-call p { margin: 0; }