/*
* CormackCoreWeb 2.0 — Avesco Front Page
* Author: Charlie - Cormack Advertising
* Design: Avesco corporate (Figma) — IBM Plex Sans / Serif, aurora hero, blue/teal system.
*/
/* ============================================================
1. Design tokens
============================================================ */
:root {
/* Brand */
--ink-0: #02030a; /* deepest hero base */
--ink-1: #030c2a; /* hero mid */
--blue-1: #1426f6; /* primary blue (links, CTAs) */
--blue-2: #3a4bff; /* lighter electric blue */
--teal: #337f9f; /* "trusted by" band + Why Avesco */
--navy-1: #040d2a; /* footer top */
--navy-2: #0e2d90; /* footer bottom */
--navy-deep:#1a2a6e; /* testimonial card */
/* Neutrals (systemGrey scale from Figma) */
--white: #fcfdff;
--grey-900: #212121;
--grey-600: #757575;
--grey-500: #8d8d8d;
--grey-400: #bcbcbc;
--line: #e6e6e6;
/* Type */
--font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-serif: "IBM Plex Serif", Georgia, serif;
/* Layout */
--maxw: 1600px;
--gutter: 50px;
--radius: 5px;
}
/* ============================================================
2. Base / reset (scoped lightly so it doesn't fight WP admin)
============================================================ */
.avesco * { box-sizing: border-box; }
/* Smooth-scroll for in-page anchor links (the teal service anchors, footer
links, etc.) instead of jumping. Disabled for reduced-motion users. */
html:has(.avesco) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html:has(.avesco) { scroll-behavior: auto; }
}
/* ============================================================
Scroll-reveal — elements fade + rise gently as they enter the
viewport, staggered in sequence (delays set inline by reveal.js).
============================================================ */
.av-reveal {
opacity: 0;
transform: translateY(28px);
/* Long, soft ease-out — elegant, never jumpy. */
transition:
opacity 0.9s cubic-bezier(.16, 1, .3, 1),
transform 0.9s cubic-bezier(.16, 1, .3, 1);
transition-delay: var(--reveal-delay, 0ms);
will-change: opacity, transform;
}
.av-reveal.is-in {
opacity: 1;
transform: none;
}
/* Once revealed, drop will-change so it doesn't pin layers forever. */
.av-reveal.is-done { will-change: auto; }
/* Reveal is JS-driven; if JS never runs (or before it tags the page) show
everything. The `js-reveal` flag is added to by reveal.js so the
hidden initial state only applies when JS is present. */
html:not(.js-reveal) .av-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.av-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.avesco {
font-family: var(--font-sans);
color: var(--grey-900);
line-height: 1.6;
font-optical-sizing: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #fff;
overflow-x: clip;
}
.avesco img,
.avesco svg { display: block; max-width: 100%; }
.avesco a { color: inherit; }
/* No underline on any link, in any state (colour left to each component). */
.avesco a,
.avesco a:hover,
.avesco a:focus,
.avesco a:active { text-decoration: none; }
/* Neutralise the generic header/main/.hero base styles from app.css so they
don't leak into the Avesco front page (the holding page had no such base). */
.avesco .av-main { padding: 0; }
.avesco .av-header {
padding: 0;
background: transparent;
border: 0;
}
.av-container {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--gutter);
}
.av-eyebrow {
font-family: var(--font-serif);
font-weight: 500;
font-size: 20px;
line-height: 26px;
color: var(--grey-600);
/* Render eyebrows as authored (sentence case) — no forced Title/upper case. */
text-transform: none;
margin: 0;
}
.av-h2 {
font-family: var(--font-sans);
font-weight: 300;
font-size: clamp(34px, 4.4vw, 48px);
line-height: 1.28;
letter-spacing: -1px;
color: var(--grey-900);
margin: 0;
}
.av-lede {
font-size: 20px;
line-height: 28px;
letter-spacing: 0.2px;
color: var(--grey-600);
margin: 0;
}
/* Text link with chevron */
/* Scoped under .avesco so it beats the `.avesco a { color: inherit }` reset. */
.avesco .av-textlink {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--blue-1);
font-weight: 500;
font-size: 16px;
line-height: 21px;
transition: gap .2s ease;
}
.avesco .av-textlink svg { width: 22px; height: 22px; stroke: var(--blue-1); }
.avesco .av-textlink:hover { gap: 16px; }
/* ============================================================
3. Aurora hero (ported from the approved holding page)
============================================================ */
.av-hero {
position: relative;
width: 100%;
min-height: 760px;
height: 100vh;
max-height: 980px;
overflow: hidden;
isolation: isolate;
color: #e9ecff;
background:
radial-gradient(ellipse 140% 100% at 110% 110%,
var(--white) 0%,
var(--blue-1) 18%,
var(--ink-1) 55%,
var(--ink-0) 100%);
}
.av-aurora {
position: absolute;
inset: -35%;
z-index: 0;
filter: blur(70px) saturate(160%);
will-change: transform, opacity;
pointer-events: none;
mix-blend-mode: screen;
}
.av-aurora--a {
background: radial-gradient(ellipse 60% 50% at 30% 70%,
rgba(20,38,246,1) 0%, rgba(20,38,246,.6) 35%, rgba(20,38,246,0) 70%);
animation: av-drift-a 6s ease-in-out -2.1s infinite alternate;
}
.av-aurora--b {
background: radial-gradient(ellipse 50% 40% at 70% 80%,
rgba(140,160,255,.95) 0%, rgba(58,75,255,.5) 40%, rgba(58,75,255,0) 75%);
animation: av-drift-b 7.3s ease-in-out -3s infinite alternate;
}
.av-aurora--c {
background: radial-gradient(ellipse 45% 35% at 50% 90%,
rgba(220,230,255,.85) 0%, rgba(140,160,255,.4) 45%, rgba(120,140,255,0) 80%);
animation: av-drift-c 4.6s ease-in-out -1.7s infinite alternate;
}
.av-aurora--d {
background: radial-gradient(ellipse 35% 30% at 20% 60%,
rgba(80,110,255,.9) 0%, rgba(20,38,246,.4) 50%, rgba(20,38,246,0) 80%);
animation: av-drift-d 5.3s ease-in-out -2.4s infinite alternate;
}
.av-curtain {
position: absolute;
inset: 0;
z-index: 1;
background: conic-gradient(from 200deg at 25% 35%,
rgba(252,253,255,0) 0deg, rgba(252,253,255,.32) 25deg,
rgba(140,160,255,.25) 70deg, rgba(252,253,255,0) 140deg,
rgba(252,253,255,0) 360deg);
filter: blur(50px);
mix-blend-mode: screen;
animation: av-curtain 8s ease-in-out -3.3s infinite alternate;
pointer-events: none;
}
.av-grain, .av-grain--bright {
position: absolute; inset: 0; z-index: 2; pointer-events: none;
}
.av-grain {
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
opacity: .9;
mix-blend-mode: overlay;
animation: av-static .5s steps(6) infinite;
}
.av-grain--bright {
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 200px;
opacity: .55;
mix-blend-mode: soft-light;
animation: av-static-2 .42s steps(5) infinite;
}
.av-vignette {
position: absolute; inset: 0; z-index: 3; pointer-events: none;
background: radial-gradient(ellipse 90% 80% at 50% 50%,
rgba(0,0,0,0) 60%, rgba(0,0,0,.35) 100%);
}
@keyframes av-drift-a {
0%{transform:translate3d(-12%,8%,0) rotate(-12deg) scale(1.10);opacity:.9}
50%{transform:translate3d(10%,-8%,0) rotate(18deg) scale(1.30);opacity:1}
100%{transform:translate3d(16%,12%,0) rotate(-10deg) scale(1.15);opacity:.95}
}
@keyframes av-drift-b {
0%{transform:translate3d(12%,-10%,0) rotate(0) scale(1.15);opacity:.85}
50%{transform:translate3d(-14%,8%,0) rotate(-22deg) scale(1.35);opacity:1}
100%{transform:translate3d(8%,12%,0) rotate(14deg) scale(1.10);opacity:.95}
}
@keyframes av-drift-c {
0%{transform:translate3d(0,14%,0) rotate(0) scale(1);opacity:.75}
50%{transform:translate3d(12%,-10%,0) rotate(24deg) scale(1.25);opacity:1}
100%{transform:translate3d(-12%,8%,0) rotate(-16deg) scale(1.10);opacity:.85}
}
@keyframes av-drift-d {
0%{transform:translate3d(-8%,10%,0) rotate(15deg) scale(1.05);opacity:.8}
50%{transform:translate3d(14%,-6%,0) rotate(-20deg) scale(1.30);opacity:1}
100%{transform:translate3d(6%,14%,0) rotate(10deg) scale(1.15);opacity:.9}
}
@keyframes av-static {
0%{background-position:0 0}20%{background-position:-97px 53px}
40%{background-position:61px -83px}60%{background-position:-41px -119px}
80%{background-position:113px 29px}100%{background-position:-73px 71px}
}
@keyframes av-static-2 {
0%{background-position:0 0}25%{background-position:67px -91px}
50%{background-position:-109px 37px}75%{background-position:43px 101px}
100%{background-position:-81px -57px}
}
@keyframes av-curtain {
0%{transform:rotate(-10deg) scale(1);opacity:.7}
50%{transform:rotate(20deg) scale(1.25);opacity:1}
100%{transform:rotate(-15deg) scale(1.10);opacity:.85}
}
/* ---------- Header / nav ----------
Sits in normal flow at the top of the hero (relative), exactly like the
approved holding page — not absolutely positioned above/over it. The hero
content is absolutely centred behind it, so the nav rides on top of the hero. */
.av-header {
position: relative;
z-index: 5;
}
.av-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 28px var(--gutter);
}
.av-logo img,
.av-logo svg { height: 38px; width: auto; }
.av-nav-links {
display: flex;
align-items: center;
gap: 12px;
}
.av-burger { display: none; }
/* Liquid-glass buttons (from holding page) */
.av-nav-links a {
position: relative;
color: #f3f4ff;
padding: 7px 28px;
border-radius: var(--radius);
font-size: 14px;
font-weight: 500;
letter-spacing: .01em;
isolation: isolate;
overflow: hidden;
border: 1px solid rgba(255,255,255,.18);
background: linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 45%, rgba(255,255,255,.02) 100%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
backdrop-filter: blur(14px) saturate(160%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.35),
inset 0 -1px 1px rgba(0,0,0,.18),
0 6px 18px rgba(0,0,0,.28);
transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.av-nav-links a::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 70%);
transform: translateX(-120%);
transition: transform .6s ease;
}
.av-nav-links a:hover { transform: translateY(-1px); background: linear-gradient(135deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.08) 45%, rgba(255,255,255,.04) 100%); }
.av-nav-links a:hover::before { transform: translateX(120%); }
.av-nav-links a.av-cta {
margin-left: 10px;
color: #fff;
border-color: rgba(120,140,255,.5);
background: linear-gradient(135deg, rgba(58,75,255,.9) 0%, rgba(20,38,246,.85) 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 2px rgba(0,0,0,.25), 0 8px 22px rgba(20,38,246,.45);
}
.av-nav-links a.av-cta:hover {
background: linear-gradient(135deg, rgba(74,92,255,.95) 0%, rgba(30,50,255,.9) 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 2px rgba(0,0,0,.25), 0 12px 30px rgba(20,38,246,.55);
}
/* ---------- Light nav variant (on white pages, e.g. Services) ----------
Teal-tinted solid buttons with white text; CTA stays bright blue. */
.av-header--light .av-logo svg path { fill: #0b0d15; }
.av-header--light .av-nav-links a {
color: #fff;
border-color: transparent;
background: var(--teal);
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: 0 6px 18px rgba(51,127,159,.28);
}
.av-header--light .av-nav-links a:hover {
transform: translateY(-1px);
background: #2f7591;
box-shadow: 0 10px 24px rgba(51,127,159,.36);
}
.av-header--light .av-nav-links a.av-cta {
background: var(--blue-1);
box-shadow: 0 8px 22px rgba(20,38,246,.4);
}
.av-header--light .av-nav-links a.av-cta:hover { background: var(--blue-2); }
.av-header--light .av-burger { border-color: rgba(0,0,0,.2); background: rgba(0,0,0,.04); }
.av-header--light .av-burger span,
.av-header--light .av-burger span::before,
.av-header--light .av-burger span::after { background: var(--ink-1); }
/* ---------- Hero content ---------- */
.av-hero-content {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 4;
padding: 0 var(--gutter);
max-width: 1180px;
width: 100%;
}
.av-hero-eyebrow {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 500;
color: #e5e5e5;
margin-bottom: 28px;
}
.av-hero-eyebrow em { font-style: italic; color: #fff; }
.av-hero h1 {
font-size: clamp(44px, 6.5vw, 92px);
line-height: 1.02;
letter-spacing: -.02em;
font-weight: 200;
color: rgba(243,244,255,.55);
margin: 0;
}
.av-hero h1 em { font-style: italic; font-weight: 200; color: rgba(255,255,255,.55); }
.av-hero-lede {
margin-top: 36px;
max-width: 460px;
color: #b8b8b8;
font-size: 20px;
line-height: 28px;
letter-spacing: .2px;
}
/* ============================================================
4. Trusted-by logos band
============================================================ */
.av-logos {
background: var(--teal);
padding: 44px var(--gutter) 56px;
text-align: center;
}
.av-logos-title {
font-family: var(--font-serif);
font-weight: 500;
font-size: 20px;
line-height: 26px;
/* Render as authored (title case) so minor words like "by" stay lowercase. */
text-transform: none;
color: #fff;
margin: 0 0 40px;
}
.av-logos-strip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
flex-wrap: nowrap; /* keep all 7 logos on one line (desktop) */
max-width: 1500px;
margin-inline: auto;
}
.av-logos-strip .av-logo-item {
flex: 0 1 auto;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
}
.av-logos-strip svg,
.av-logos-strip img { height: 42px; width: auto; max-width: 100%; opacity: .95; }
/* Arrows (last item) is already the widest/largest mark — keep it smaller so it
stays balanced with the others now that the rest have grown. */
.av-logos-strip .av-logo-item:last-child svg,
.av-logos-strip .av-logo-item:last-child img { height: 34px; }
/* ============================================================
5. Service pillars
============================================================ */
.av-pillars {
position: relative;
padding: 96px 0 110px;
overflow: hidden; /* clip the blue-glory circle to the section box */
isolation: isolate;
}
/* Soft radial "blue-glory" glow (JPG with baked-in grain) — a large circle
centred just below the section's bottom edge, so its top arc peeks up across
the bottom. Sized larger (spread/zoomed) and raised slightly. */
.av-pillars::before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
bottom: 0;
width: 2800px;
height: 2800px;
transform: translate(-50%, 50%); /* centre on the bottom edge → top half shows */
background: url("../images/ui/blue-glory.jpg") center / contain no-repeat;
pointer-events: none;
}
.av-pillars-head {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
text-align: center;
max-width: 820px;
margin: 0 auto 64px;
}
.av-pillars-head .av-h2 { max-width: 800px; }
.av-pillars-grid {
display: grid;
grid-template-columns: 450px 1fr;
gap: 56px;
align-items: start;
}
.av-pillars-left {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.av-pillars-figure {
width: 100%;
border-radius: 6px;
overflow: hidden;
aspect-ratio: 450 / 579;
background: linear-gradient(160deg, #eef1f6, #dfe5ee);
}
.av-pillars-figure img { width: 100%; height: 100%; object-fit: cover; }
.av-pillars-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 56px 64px;
}
.av-pillar-icon { width: 56px; height: 56px; margin-bottom: 22px; }
.av-pillar-icon svg { width: 100%; height: 100%; }
.av-pillar-icon svg path { stroke: var(--blue-1); }
.av-pillar h3 {
font-family: var(--font-sans);
font-weight: 500;
font-size: 24px;
line-height: 31px;
color: var(--blue-1);
text-transform: capitalize;
margin: 0 0 18px;
}
.av-pillar h3 a { display: block; color: var(--blue-1); }
/* Headline always breaks onto two lines; chevron sits inline after line 2. */
.av-pillar-line2 { display: inline-flex; align-items: center; gap: 8px; }
.av-pillar h3 .av-chev {
width: 20px; height: 20px; flex: 0 0 auto;
transition: transform .2s ease;
}
.av-pillar h3 .av-chev path { stroke: var(--blue-1); stroke-width: 2; fill: none; }
/* Hover: nudge the chevron right. */
.av-pillar:hover h3 .av-chev,
.av-pillar h3 a:hover .av-chev { transform: translateX(4px); }
.av-pillar p { font-size: 16px; line-height: 24px; color: var(--grey-600); margin: 0; }
/* "Read more about our services" — fully blue, under the image in the left column. */
.av-pillars-cta { margin-top: 32px; color: #1426F6; }
.av-pillars-cta,
.av-pillars-cta svg { stroke: #1426F6; }
.av-pillars-cta svg path { stroke: #1426F6; }
/* ============================================================
6. "What we do" — growth graph
============================================================ */
.av-whatwedo { padding: 60px 0 110px; }
.av-whatwedo-grid {
display: grid;
grid-template-columns: 415px 1fr;
gap: 80px;
align-items: center;
}
.av-whatwedo-copy { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.av-whatwedo-copy .av-eyebrow { color: var(--grey-600); }
.av-whatwedo-copy .av-h2 { line-height: 1.3; }
.av-graph img,
.av-graph svg { width: 100%; height: auto; }
/* ============================================================
7. "Why Avesco" — teal pattern panel
============================================================ */
.av-why {
position: relative;
background: var(--teal);
color: #fff;
overflow: hidden;
}
.av-why-pattern {
position: absolute;
inset: 0 0 0 50%;
background-repeat: repeat;
background-position: center;
background-size: 666px auto;
opacity: .9;
pointer-events: none;
}
.av-why-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 620px) 1fr;
min-height: 620px;
align-items: center;
padding-block: 90px;
}
.av-why h2 {
font-family: var(--font-sans);
font-weight: 300;
font-size: clamp(40px, 5vw, 56px);
letter-spacing: -1px;
margin: 0 0 200px;
}
.av-why-body { max-width: 590px; display: flex; flex-direction: column; gap: 22px; }
.av-why-body p { font-size: 18px; line-height: 28px; color: rgba(255,255,255,.92); margin: 0; }
.av-why .av-textlink { color: #fff; margin-top: 10px; }
.av-why .av-textlink svg { stroke: #fff; }
/* ============================================================
8. Testimonials
============================================================ */
.av-testimonials { padding: 96px 0 110px; text-align: center; }
.av-testimonials-head { margin-bottom: 56px; }
.av-testimonials-head h2 {
font-family: var(--font-sans);
font-weight: 400;
font-size: clamp(32px, 4vw, 40px);
color: var(--grey-900);
margin: 0 0 10px;
}
.av-testimonials-head p { font-size: 18px; color: var(--grey-600); margin: 0; }
.av-tcard {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 360px;
text-align: left;
}
.av-tcard-quote {
background: var(--navy-deep);
color: #fff;
padding: 64px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.av-tcard-quote blockquote {
font-size: clamp(28px, 3vw, 40px);
font-weight: 300;
line-height: 1.2;
margin: 0 0 32px;
}
.av-tcard-author strong { display: block; font-size: 18px; font-weight: 600; }
.av-tcard-author span { font-size: 15px; color: rgba(255,255,255,.7); }
.av-tcard-logo {
background: #c9ccd1;
display: flex;
align-items: center;
justify-content: center;
padding: 48px;
}
.av-tcard-logo img,
.av-tcard-logo svg { max-height: 70px; width: auto; }
/* Client logos ship white-filled via inline style="fill:#fff" on every shape
(for the teal band). On the grey testimonial panel only, recolour to #101F52.
!important is required to beat the SVGs' inline fill styles. */
.av-tcard-logo svg path,
.av-tcard-logo svg polygon,
.av-tcard-logo svg rect,
.av-tcard-logo svg circle,
.av-tcard-logo svg g { fill: #101F52 !important; }
/* Pagination dots — anchored to the bottom-right corner of the grey logo
panel (the right half of the slider). */
.av-tdots {
position: absolute;
right: 48px; /* grey panel right padding */
bottom: 40px;
display: flex;
gap: 10px;
margin: 0;
z-index: 2;
}
.av-tdots button {
width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
background: #b9bcc2; cursor: pointer; transition: background .2s ease;
}
.av-tdots button[aria-selected="true"] { background: #101F52; }
.av-track-wrap { overflow: hidden; position: relative; }
.av-track {
display: flex;
transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.av-track > * { flex: 0 0 100%; }
/* ============================================================
8b. "Our Sectors" — off-canvas panel (slides down from top)
============================================================ */
.av-sectors {
position: fixed;
inset: 0;
z-index: 200;
visibility: hidden; /* hidden until opened */
pointer-events: none;
}
.av-sectors.is-open {
visibility: visible;
pointer-events: auto;
}
.av-sectors-backdrop {
position: absolute;
inset: 0;
background: rgba(2, 3, 10, .5);
opacity: 0;
transition: opacity .4s ease;
}
.av-sectors.is-open .av-sectors-backdrop { opacity: 1; }
.av-sectors-panel {
position: absolute;
top: 0;
left: 0;
right: 0;
background: #373B49;
color: #fff;
padding: 72px 0 80px;
transform: translateY(-100%); /* parked above the viewport */
transition: transform .5s cubic-bezier(.4, 0, .2, 1);
max-height: 100vh;
overflow-y: auto;
}
.av-sectors.is-open .av-sectors-panel { transform: translateY(0); }
.av-sectors-close {
position: absolute;
top: 28px;
right: var(--gutter);
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
color: #fff;
cursor: pointer;
border-radius: 6px;
transition: background .2s ease, transform .2s ease;
}
.av-sectors-close svg { width: 26px; height: 26px; stroke: #fff; }
/* Rotate only on real pointer devices — on touch this fired on tap and
"flipped" the × away as the panel slid closed. */
@media (hover: hover) {
.av-sectors-close:hover { transform: rotate(90deg); }
}
.av-sectors-inner {
display: grid;
grid-template-columns: minmax(280px, 1fr) 2fr;
gap: 48px 64px;
align-items: start;
}
.av-sectors-intro h2 {
font-family: var(--font-serif);
font-weight: 500;
font-size: 24px;
color: #fff;
margin: 0 0 28px;
}
.av-sectors-intro p {
font-size: 18px;
line-height: 26px;
color: #c7cbd4;
max-width: 460px;
margin: 0;
}
.av-sectors-cols {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0 64px;
}
.av-sectors-list { list-style: none; margin: 0; padding: 0; }
.av-sectors-list li { margin: 0; }
.av-sectors-list a {
display: inline-block;
font-size: 18px;
line-height: 1.7;
font-weight: 400;
color: #aeb3bf;
transition: color .2s ease;
}
/* No font-colour change on hover (per request). */
/* Sectors panel — tablet: stack intro above the lists. */
@media (max-width: 900px) {
.av-sectors-panel { padding: 64px 0 64px; }
.av-sectors-inner {
grid-template-columns: 1fr;
gap: 36px;
}
.av-sectors-intro p { max-width: none; }
}
/* Sectors panel — phone: keep two slim columns, shrink type, fit the gutter. */
@media (max-width: 560px) {
.av-sectors-panel {
padding: 60px 0 48px;
max-height: 100dvh; /* respect mobile browser chrome */
-webkit-overflow-scrolling: touch;
}
.av-sectors-close { top: 14px; right: 12px; }
.av-sectors-inner { gap: 24px; }
.av-sectors-intro h2 { font-size: 21px; margin-bottom: 14px; }
.av-sectors-intro p { font-size: 15px; line-height: 23px; }
.av-sectors-cols { gap: 0 20px; }
.av-sectors-list a { font-size: 14px; line-height: 1.55; }
}
/* Very narrow phones — single column of sectors so long names never clip. */
@media (max-width: 380px) {
.av-sectors-cols { grid-template-columns: 1fr; gap: 0; }
.av-sectors-list a { font-size: 15px; line-height: 1.85; }
}
/* ============================================================
9. Footer
============================================================ */
.av-footer {
position: relative;
background: linear-gradient(180deg, var(--navy-1) 0%, var(--navy-2) 100%);
color: #fff;
padding: 80px 0 40px;
margin-top: 0; /* override app.css's global footer{margin-top:60px} */
}
.av-footer-top {
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
align-items: start;
margin-bottom: 48px;
}
.av-footer h2 {
font-family: var(--font-sans);
font-weight: 300;
font-size: clamp(34px, 4vw, 48px);
margin: 0;
}
.av-footer-logo img,
.av-footer-logo svg { width: 160px; height: auto; }
.av-footer-mid {
display: grid;
/* Contacts block in the left track; the Company + Contact link group lands in
the centred middle track so it sits in the true horizontal middle of the
footer, with an empty balancing track on the right (per design). */
grid-template-columns: 1fr auto 1fr;
gap: 40px;
margin-bottom: 48px;
}
/* Company + Contact grouped, centred across the full footer width. */
.av-footer-links {
display: flex;
gap: 110px; /* separation between the two columns */
}
.av-footer-col { min-width: 0; }
.av-contacts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 220px));
align-items: stretch; /* both groups in a row share the same height */
gap: 26px 28px;
}
/* Stack label + button, and push the button to the bottom so every button in a
row sits on the same baseline regardless of how many lines the label takes. */
.av-contact-group {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.av-contact-group .av-contact-btn { margin-top: auto; }
.av-contact-group .av-contact-label {
display: block;
font-weight: 500;
font-size: 16px;
line-height: 20px;
color: var(--grey-500);
margin-bottom: 12px;
}
.av-contact-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: #fff;
color: var(--grey-600);
border-radius: var(--radius);
padding: 9px 16px;
font-size: 16px;
font-weight: 400;
line-height: 1;
transition: transform .2s ease, box-shadow .2s ease;
}
.av-contact-btn svg { flex: 0 0 auto; width: 20px; height: 15px; }
.av-contact-btn svg path { stroke: var(--grey-600); }
.av-contact-btn span { color: var(--grey-600); white-space: nowrap; }
.av-contact-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.av-footer-col h4 {
font-family: var(--font-serif);
font-weight: 500;
font-size: 20px;
color: var(--grey-500);
margin: 0 0 18px;
}
.av-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.av-footer-col a { font-size: 16px; color: #fff; opacity: .95; transition: opacity .2s ease; }
/* Footer links: no colour/opacity change on hover (per request). */
.av-footer-rule { border: none; border-top: 1px solid rgba(255,255,255,.35); margin: 0 0 26px; }
.av-footer-bottom {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 24px;
}
.av-footer-legal { display: flex; gap: 36px; }
.av-footer-legal a { font-size: 14px; color: var(--grey-400); }
.av-footer-rights { text-align: center; font-size: 14px; color: var(--grey-400); }
/* LinkedIn mark from ui_linkedin white.svg */
.av-footer-social { display: inline-flex; }
.av-footer-social img,
.av-footer-social .av-linkedin { width: 26px; height: 26px; }
.av-footer-social:hover .av-linkedin { opacity: .85; }
/* ============================================================
10. Responsive
============================================================ */
@media (max-width: 1100px) {
:root { --gutter: 40px; }
.av-pillars-grid { grid-template-columns: 1fr; }
.av-pillars-left { max-width: 450px; }
.av-pillars-figure { aspect-ratio: 4 / 3; }
.av-whatwedo-grid { grid-template-columns: 1fr; gap: 48px; }
.av-why-inner { grid-template-columns: 1fr; }
.av-why-pattern { inset: auto 0 0 0; height: 50%; opacity: .35; }
.av-why h2 { margin-bottom: 28px; }
.av-footer-mid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
:root { --gutter: 24px; }
.av-burger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 40px;
border-radius: var(--radius);
border: 1px solid rgba(255,255,255,.25);
background: rgba(255,255,255,.08);
cursor: pointer;
}
.av-burger span { display: block; width: 20px; height: 2px; background: #fff; position: relative; }
.av-burger span::before, .av-burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: #fff; }
.av-burger span::before { top: -6px; } .av-burger span::after { top: 6px; }
.av-nav-links {
position: absolute;
top: 84px;
right: var(--gutter);
left: var(--gutter);
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 14px;
border-radius: 12px;
background: rgba(6,10,30,.92);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
border: 1px solid rgba(255,255,255,.12);
display: none;
}
.av-nav-links.is-open { display: flex; }
.av-nav-links a { text-align: center; padding: 12px; }
.av-nav-links a.av-cta { margin-left: 0; }
.av-hero { min-height: 640px; }
.av-hero h1 { font-size: clamp(30px, 9vw, 52px); }
.av-hero-eyebrow { font-size: 18px; }
/* Let the headline + eyebrow wrap to fit; turn the desktop
into a space. */
.av-hero h1 br,
.av-hero-eyebrow br { display: inline; }
.av-hero h1 br::before,
.av-hero-eyebrow br::before { content: " "; }
.av-hero-lede { font-size: 17px; line-height: 25px; }
.av-hero-content { padding-inline: var(--gutter); }
.av-pillars-list { grid-template-columns: 1fr; gap: 40px; }
.av-tcard { grid-template-columns: 1fr; }
.av-tcard-logo { order: -1; min-height: 160px; padding: 32px; }
.av-tcard-quote { padding: 40px 28px; }
.av-logos { padding-inline: var(--gutter); }
.av-logos-title { font-size: 18px; }
.av-logos-strip { flex-wrap: wrap; gap: 28px 36px; justify-content: center; }
.av-footer-top { grid-template-columns: 1fr; }
.av-footer-logo { order: -1; }
.av-footer-logo img,
.av-footer-logo svg { width: 160px; }
.av-contacts { grid-template-columns: 1fr; }
.av-footer-bottom { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 16px; }
.av-footer-legal { justify-content: center; }
}
/* ============================================================
11. Reduced motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
.av-aurora, .av-curtain, .av-grain, .av-grain--bright, .av-flow { animation: none; }
.av-track { transition: none; }
}