/* ============================================================ HARCON SOLUTIONS - homepage concept AW Media. Brand palette is closed: navy, deep navy, teal, pale teal, white. Everything else is an alpha of those. ============================================================ */ :root{ --navy:#041824; --navy-2:#081F2D; --teal:#00A19B; --teal-pale:#CAFBF9; --white:#FFFFFF; /* surfaces derived only from the five above */ --nav-card:rgba(255,255,255,.045); --nav-line:rgba(255,255,255,.10); --nav-line-2:rgba(255,255,255,.16); --on-navy:rgba(255,255,255,.72); --on-navy-dim:rgba(255,255,255,.54); --ink:#041824; --ink-soft:rgba(4,24,36,.72); --ink-dim:rgba(4,24,36,.63); --teal-ink:#00807B; /* the brand teal, darkened only for small text on light */ --line:rgba(4,24,36,.12); --line-soft:rgba(4,24,36,.07); --wash:rgba(202,251,249,.28); --r:14px; --r-lg:22px; --shadow-1:0 1px 2px rgba(4,24,36,.06),0 4px 14px rgba(4,24,36,.06); --shadow-2:0 12px 40px rgba(4,24,36,.14); --shadow-3:0 30px 80px rgba(4,24,36,.28); --bar:38px; /* utility bar height */ --head:74px; /* header height */ --pad:clamp(20px,4.5vw,64px); --maxw:1320px; --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;overscroll-behavior-x:none} body{ margin:0;background:var(--white);color:var(--ink); font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:17px;line-height:1.62;font-weight:400; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:clip;overscroll-behavior-x:none; } img,svg,video{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.028em;line-height:1.06} p{margin:0} ul{margin:0;padding:0;list-style:none} :focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} .skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--teal);color:var(--navy);padding:12px 20px;font-weight:700;border-radius:0 0 10px 0} .skip:focus{left:0} /* ---------- type scale ---------- */ .h-xl{font-size:clamp(33px,4.5vw,57px);line-height:1.03;letter-spacing:-.035em} .h-lg{font-size:clamp(30px,3.7vw,50px);line-height:1.06;letter-spacing:-.032em} .h-md{font-size:clamp(23px,2.2vw,32px);line-height:1.14;letter-spacing:-.025em} .h-sm{font-size:clamp(18px,1.4vw,21px);line-height:1.28;letter-spacing:-.017em;font-weight:700} .lede{font-size:clamp(17px,1.35vw,20px);line-height:1.62;color:var(--ink-soft)} .eyebrow{ font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase; color:var(--teal);display:flex;align-items:center;gap:12px; } .eyebrow::before{display:none} /* Alex 28 Sep: remove decorative teal dash before eyebrows site-wide; eyebrows are plain text */ .eyebrow.c{justify-content:center} .on-dark .lede{color:var(--on-navy)} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:15px 26px;border-radius:10px;font-weight:700;font-size:15.5px; letter-spacing:-.01em;transition:.28s var(--ease);position:relative;overflow:hidden; border:1.5px solid transparent;white-space:nowrap; } .btn svg{flex:none;transition:transform .3s var(--ease)} .btn:hover svg{transform:translateX(4px)} .btn-primary{background:var(--teal);color:var(--navy)} .btn-primary:hover{background:var(--teal-pale);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,161,155,.32)} .btn-ghost{border-color:var(--nav-line-2);color:var(--white);background:rgba(255,255,255,.04)} .btn-ghost:hover{border-color:var(--teal);background:rgba(0,161,155,.14);transform:translateY(-2px)} .btn-dark{background:var(--navy);color:var(--white)} .btn-dark:hover{background:var(--navy-2);transform:translateY(-2px);box-shadow:var(--shadow-2)} .btn-outline{border-color:var(--line);color:var(--ink);background:var(--white)} .btn-outline:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:var(--shadow-1)} .btn-sm{padding:11px 18px;font-size:14px;border-radius:9px} /* ---------- link with arrow ---------- */ .alink{ display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px; color:var(--teal);transition:gap .25s var(--ease) } .alink:hover{gap:15px} .alink svg{flex:none} /* ============================================================ UTILITY BAR (the missing contact strip) ============================================================ */ .util{ background:var(--navy-2);color:var(--on-navy);font-size:13.5px; height:var(--bar);display:flex;align-items:center; border-bottom:1px solid var(--nav-line);position:relative;z-index:60; } .util .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%} .util-l{display:flex;align-items:center;gap:10px;letter-spacing:-.005em} .util-l .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none;box-shadow:0 0 0 3px rgba(0,161,155,.22)} .util-r{display:flex;align-items:center;gap:6px} .util-r a{ display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:7px; font-weight:600;transition:.22s var(--ease);color:var(--on-navy) } .util-r a:hover{background:rgba(255,255,255,.07);color:var(--white)} .util-r a.tel{color:var(--white);font-weight:800;letter-spacing:.01em} .util-r a.tel svg{color:var(--teal)} .util-r .sep{width:1px;height:16px;background:var(--nav-line);margin-inline:4px} @media(max-width:900px){ .util-l{display:none} .util .wrap{justify-content:center} .util-r a span{display:inline} } @media(max-width:520px){ .util-r a.mail span,.util-r .li span{display:none} } /* ============================================================ HEADER + MEGA MENU ============================================================ */ .hdr{ position:sticky;top:0;z-index:80;height:var(--head); display:flex;align-items:center; background:transparent;transition:background .35s var(--ease),box-shadow .35s var(--ease),height .3s var(--ease); border-bottom:1px solid transparent; } .hdr::before{ content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,24,36,.62),rgba(4,24,36,0)); opacity:1;transition:opacity .35s var(--ease);pointer-events:none } body.scrolled .hdr{background:var(--navy);border-bottom-color:var(--nav-line);box-shadow:0 8px 30px rgba(4,24,36,.35);height:66px} body.scrolled .hdr::before{opacity:0} .hdr .wrap{display:flex;align-items:center;gap:26px;width:100%} .brand{display:flex;align-items:center;flex:none;padding:4px 0} .brand img{height:34px;width:auto} .nav{display:flex;align-items:center;gap:2px;margin-left:auto} .nav > li > a,.nav > li > button{ display:inline-flex;align-items:center;gap:7px;padding:10px 15px;border-radius:9px; color:var(--white);font-weight:700;font-size:15.5px;letter-spacing:-.012em; transition:.22s var(--ease);position:relative } .nav > li > a::after{ content:"";position:absolute;left:15px;right:15px;bottom:4px;height:2px;background:var(--teal); transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);border-radius:2px } .nav > li > a:hover::after{transform:scaleX(1)} .nav > li > a:hover,.nav > li > button:hover{color:var(--teal-pale)} .nav .chev{transition:transform .3s var(--ease)} .hdr-cta{display:flex;align-items:center;gap:12px;flex:none;margin-left:10px} /* mega */ .mega-wrap{position:relative} .mega{ position:fixed;left:0;right:0;top:calc(var(--bar) + var(--head)); background:var(--navy);border-top:1px solid var(--nav-line); box-shadow:0 30px 70px rgba(4,24,36,.5); opacity:0;visibility:hidden;transform:translateY(-12px); transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s; z-index:79; } body.scrolled .mega{top:66px} /* Short laptop screens: the open menu is ~556px tall, so cap it to the space below the header and let it scroll inside itself instead of running off screen. */ .mega{max-height:calc(100vh - var(--bar) - var(--head));overflow-y:auto;overscroll-behavior:contain} body.scrolled .mega{max-height:calc(100vh - 66px)} .mega.open{opacity:1;visibility:visible;transform:translateY(0)} .mega-in{display:grid;grid-template-columns:1fr 1fr .82fr;gap:0;padding:0} .mega-col{padding:30px 32px 34px;border-right:1px solid var(--nav-line)} .mega-col:last-child{border-right:0} .mega-h{ font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase; color:var(--teal);margin-bottom:18px } .mega-list{display:flex;flex-direction:column;gap:2px} .mega-item{ display:block;padding:10px 14px;border-radius:11px;transition:.24s var(--ease);line-height:1.3; border:1px solid transparent; } .mega-item:hover{background:var(--nav-card);border-color:var(--nav-line)} .mega-item .t{ display:flex;align-items:center;gap:9px;color:var(--white);font-weight:700;font-size:15.5px; letter-spacing:-.015em;margin-bottom:3px } .mega-item .t svg{opacity:0;transform:translateX(-5px);transition:.24s var(--ease);color:var(--teal);flex:none} .mega-item:hover .t svg{opacity:1;transform:translateX(0)} .mega-item .d{display:block;color:var(--on-navy-dim);font-size:13.5px;line-height:1.42} .mega-promo{background:rgba(0,161,155,.09)} .mega-promo .h-sm{color:var(--white);margin-bottom:10px} .mega-promo p{color:var(--on-navy);font-size:14.5px;line-height:1.55;margin-bottom:18px} .mega-tel{ display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px; background:var(--nav-card);border:1px solid var(--nav-line);margin-bottom:12px;transition:.24s var(--ease) } .mega-tel:hover{border-color:var(--teal);background:rgba(0,161,155,.14)} .mega-tel .ic{width:38px;height:38px;border-radius:10px;background:rgba(0,161,155,.18);display:grid;place-items:center;color:var(--teal);flex:none} .mega-tel .lb{display:block;line-height:1.3;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-navy-dim);font-weight:700} .mega-tel .nu{display:block;line-height:1.3;margin-top:3px;color:var(--white);font-weight:800;font-size:17px;letter-spacing:-.01em} /* burger + mobile drawer */ .burger{display:none;width:44px;height:44px;border-radius:10px;place-items:center;color:var(--white);margin-left:auto;border:1px solid var(--nav-line)} .burger span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:.3s var(--ease)} .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;border-radius:2px;transition:.3s var(--ease)} .burger span::before{top:-6px}.burger span::after{top:6px} body.menu-open .burger span{background:transparent} body.menu-open .burger span::before{top:0;transform:rotate(45deg)} body.menu-open .burger span::after{top:0;transform:rotate(-45deg)} .drawer{ position:fixed;inset:0;top:calc(var(--bar) + var(--head));background:var(--navy);z-index:78; overflow-y:auto;padding:24px var(--pad) 120px; opacity:0;visibility:hidden;transform:translateY(-8px);transition:.3s var(--ease); } body.scrolled .drawer{top:66px} body.menu-open .drawer{opacity:1;visibility:visible;transform:translateY(0)} .drawer .mega-h{margin-top:22px} .drawer .mega-item{padding:14px 12px;border-bottom:1px solid var(--nav-line);border-radius:0} .drawer-cta{display:grid;gap:10px;margin-top:26px} @media(max-width:1180px){ /* AW 20 Oct 2026: was 1120px, the labels wrapped onto two lines from 1121 to about 1150 */ .nav,.hdr-cta{display:none} .burger{display:grid} } /* ============================================================ HERO - everything fits above the fold at 900px ============================================================ */ .hero{ position:relative;background:var(--navy);color:var(--white); margin-top:calc(var(--head) * -1);padding-top:var(--head); min-height:min(100svh,900px);display:flex;align-items:center; overflow:hidden;isolation:isolate; } .hero-photo{ position:absolute;inset:0 0 0 38%;z-index:0; clip-path:polygon(18% 0,100% 0,100% 100%,0 100%); } @media(min-width:1000px){ .hero-photo{clip-path:polygon(22% 0,100% 0,100% 100%,0% 100%)} } .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:60% 42%;transform:scale(1.06)} .hero-photo::after{ content:"";position:absolute;inset:0; background:linear-gradient(100deg,var(--navy) 0%,rgba(4,24,36,.86) 26%,rgba(4,24,36,.30) 58%,rgba(4,24,36,.52) 100%); } @media(max-width:1000px){ .hero-photo{inset:0;clip-path:none} .hero-photo img{object-position:62% 40%} .hero-photo::after{background:linear-gradient(180deg,rgba(4,24,36,.70) 0%,rgba(4,24,36,.84) 42%,rgba(4,24,36,.96) 100%)} } .hero-glow{ position:absolute;left:-12%;top:8%;width:60%;aspect-ratio:1;z-index:0;pointer-events:none; background:radial-gradient(circle,rgba(0,161,155,.20),rgba(0,161,155,0) 66%);filter:blur(10px) } .hero-in{position:relative;z-index:2;width:100%;padding-block:clamp(16px,3vh,38px)} .hero-copy{max-width:min(780px,64%)} @media(max-width:1000px){.hero-copy{max-width:100%}} .hero h1{margin:14px 0 0;color:var(--white)} .hero h1 .tealword{color:var(--teal)} .hero .sub{margin-top:16px;max-width:545px;font-size:clamp(15px,1.1vw,17px);line-height:1.58;color:var(--on-navy)} .hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:24px} .hero-actions .btn{padding:15px 25px;font-size:15.5px} /* A long hero CTA label ("Discuss your railway interface requirements") is wider than a phone-width button. .btn is white-space:nowrap AND overflow:hidden, so the label was silently CLIPPED rather than overflowing, which is why the page-level overflow QC never caught it. The approved pages are add-only so the text cannot be shortened: let the hero CTA wrap instead. Affects ASPRO, Railway Planning and RIA. */ @media(max-width:620px){.hero-actions .btn{white-space:normal;text-align:center;line-height:1.3;padding:14px 20px}} .hero-trust{ margin-top:clamp(18px,2.6vh,32px);padding-top:17px;border-top:1px solid var(--nav-line); display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center } .trust-i{display:flex;align-items:center;gap:7px;font-size:12.4px;font-weight:600;color:var(--on-navy);letter-spacing:-.005em} .trust-i svg{color:var(--teal);flex:none} .hero-scroll{ position:absolute;left:var(--pad);bottom:20px;z-index:3;display:flex;align-items:center;gap:10px; font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-navy-dim);font-weight:700 } .hero-scroll .ln{width:36px;height:1px;background:var(--nav-line-2);position:relative;overflow:hidden} .hero-scroll .ln::after{content:"";position:absolute;inset:0;background:var(--teal);transform:translateX(-100%);animation:sweep 2.4s var(--ease) infinite} @keyframes sweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}} @media(max-width:760px){.hero-scroll{display:none}} /* ============================================================ STANDARDS MARQUEE ============================================================ */ .marq{background:var(--navy-2);border-block:1px solid var(--nav-line);padding:16px 0;overflow:hidden;position:relative} .marq::before,.marq::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none} .marq::before{left:0;background:linear-gradient(90deg,var(--navy-2),rgba(8,31,45,0))} .marq::after{right:0;background:linear-gradient(270deg,var(--navy-2),rgba(8,31,45,0))} .marq-track{display:flex;gap:46px;width:max-content;animation:slide 38s linear infinite} .marq:hover .marq-track{animation-play-state:paused} @keyframes slide{to{transform:translateX(-50%)}} .marq-i{ display:flex;align-items:center;gap:11px;color:var(--on-navy-dim); font-size:13.5px;font-weight:700;letter-spacing:.03em;white-space:nowrap } .marq-i .b{width:5px;height:5px;border-radius:50%;background:var(--teal);flex:none} /* ============================================================ SECTION SHELL ============================================================ */ section{position:relative} section[id],[id^="svc-"]{scroll-margin-top:96px} .sec{padding-block:clamp(64px,8vw,116px)} .sec-tight{padding-block:clamp(48px,6vw,80px)} .on-navy{background:var(--navy);color:var(--white)} .on-navy h2,.on-navy h3{color:var(--white)} .on-wash{background:linear-gradient(180deg,var(--wash),rgba(202,251,249,0))} .sec-head{max-width:780px;margin-bottom:clamp(34px,4vw,54px)} .sec-head.c{margin-inline:auto;text-align:center} .sec-head h2{margin:16px 0 0} .sec-head p{margin-top:18px} .sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:clamp(34px,4vw,54px)} .sec-head-row .sec-head{margin-bottom:0} /* ============================================================ PATHS - "where do you want to start" ============================================================ */ .paths{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media(max-width:1040px){.paths{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.paths{grid-template-columns:1fr}} .path{ position:relative;display:flex;flex-direction:column;gap:14px; padding:26px 24px 24px;border-radius:var(--r-lg);background:var(--white); border:1px solid var(--line);box-shadow:var(--shadow-1);overflow:hidden; transition:.34s var(--ease); } .path::before{ content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--teal); transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease) } .path:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:rgba(0,161,155,.4)} .path:hover::before{transform:scaleX(1)} .path-n{ font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal) } .path .q{font-size:19px;font-weight:800;letter-spacing:-.024em;line-height:1.24} .path .a{font-size:14.5px;color:var(--ink-dim);line-height:1.55;flex:1} .path .go{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding-top:14px;border-top:1px solid var(--line-soft);font-weight:700;font-size:14.5px;color:var(--navy) } .path .go .cir{ width:34px;height:34px;border-radius:50%;background:var(--wash);color:var(--teal); display:grid;place-items:center;flex:none;transition:.3s var(--ease) } .path:hover .go .cir{background:var(--teal);color:var(--white);transform:translateX(3px)} /* ============================================================ SERVICES GRID ============================================================ */ .svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media(max-width:1040px){.svcs{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.svcs{grid-template-columns:1fr}} .svc{ position:relative;display:flex;flex-direction:column;gap:15px;padding:30px 28px 26px; border-radius:var(--r-lg);background:var(--nav-card);border:1px solid var(--nav-line); overflow:hidden;transition:.34s var(--ease) } .svc::after{ content:"";position:absolute;right:-40%;top:-60%;width:100%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,rgba(0,161,155,.16),rgba(0,161,155,0) 70%); opacity:0;transition:opacity .45s var(--ease);pointer-events:none } .svc:hover{transform:translateY(-5px);border-color:rgba(0,161,155,.45);background:rgba(255,255,255,.07)} .svc:hover::after{opacity:1} .svc-ic{ width:50px;height:50px;border-radius:13px;background:rgba(0,161,155,.14);color:var(--teal); display:grid;place-items:center;border:1px solid rgba(0,161,155,.26);transition:.34s var(--ease) } .svc:hover .svc-ic{background:var(--teal);color:var(--navy);transform:rotate(-6deg) scale(1.06)} .svc h3{font-size:20px;letter-spacing:-.026em;line-height:1.2} .svc .for{ display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase; color:var(--teal); } .svc p{color:var(--on-navy);font-size:15px;line-height:1.58;flex:1} .chips{display:flex;flex-wrap:wrap;gap:7px} .chip{ font-size:12px;font-weight:600;padding:5px 11px;border-radius:20px; background:rgba(255,255,255,.06);border:1px solid var(--nav-line);color:var(--on-navy) } .svc .alink{margin-top:2px} /* ============================================================ PROOF NUMBERS ============================================================ */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} @media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}} .stat{background:var(--white);padding:34px 26px;text-align:center} .stat .n{font-size:clamp(38px,4.4vw,58px);font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--navy)} .stat .n span{color:var(--teal)} .stat .l{margin-top:12px;font-size:14px;color:var(--ink-dim);font-weight:600;line-height:1.45} /* ============================================================ SPLIT (why harcon) ============================================================ */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center} @media(max-width:960px){.split{grid-template-columns:minmax(0,1fr)}} .split-media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-3)} .split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.2} .split-badge{ position:absolute;left:22px;bottom:22px;right:22px;padding:18px 20px;border-radius:14px; background:rgba(4,24,36,.82);backdrop-filter:blur(14px);border:1px solid var(--nav-line-2);color:var(--white) } .split-badge .t{font-weight:800;font-size:15.5px;letter-spacing:-.016em;color:var(--white)} .split-badge .d{font-size:13.5px;color:var(--on-navy);margin-top:4px;line-height:1.45} .ticks{display:grid;gap:14px;margin-top:28px} .tick{display:flex;gap:13px;align-items:flex-start} .tick .ic{width:24px;height:24px;border-radius:50%;background:var(--teal);color:var(--navy);display:grid;place-items:center;flex:none;margin-top:2px} .tick .tx{font-size:15.5px;line-height:1.55} .tick .tx b{font-weight:700} .on-dark .tick .tx{color:var(--on-navy)} .on-dark .tick .tx b{color:var(--white)} /* ============================================================ PROCESS ============================================================ */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s} @media(max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.steps{grid-template-columns:1fr}} .step{position:relative;padding:28px 24px;border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line);transition:.32s var(--ease)} .step:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);border-color:rgba(0,161,155,.4)} .step .num{ width:44px;height:44px;border-radius:12px;background:var(--navy);color:var(--teal); display:grid;place-items:center;font-weight:800;font-size:17px;margin-bottom:18px;transition:.32s var(--ease) } .step:hover .num{background:var(--teal);color:var(--navy)} .step h3{font-size:18.5px;letter-spacing:-.022em;margin-bottom:9px} .step p{font-size:14.5px;color:var(--ink-dim);line-height:1.55} /* ============================================================ CASE STUDIES ============================================================ */ .cases{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} @media(max-width:900px){.cases{grid-template-columns:1fr}} .case{ position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--navy-2); border:1px solid var(--nav-line);display:flex;flex-direction:column;transition:.34s var(--ease) } .case:hover{transform:translateY(-6px);box-shadow:var(--shadow-3);border-color:rgba(0,161,155,.45)} .case-img{position:relative;aspect-ratio:16/8.6;overflow:hidden} .case-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .case:hover .case-img img{transform:scale(1.06)} .case-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,24,36,.1),rgba(8,31,45,.9))} .case-tag{ position:absolute;left:20px;top:20px;z-index:2;padding:6px 13px;border-radius:20px; background:rgba(0,161,155,.9);color:var(--navy);font-size:11.5px;font-weight:800; letter-spacing:.1em;text-transform:uppercase } .case-body{padding:26px 26px 28px;display:flex;flex-direction:column;gap:14px;flex:1} .case-client{font-size:12.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--teal)} .case h3{font-size:21px;letter-spacing:-.026em;line-height:1.22;color:var(--white)} .case p{color:var(--on-navy);font-size:14.5px;line-height:1.58;flex:1} .case-meta{display:flex;flex-wrap:wrap;gap:7px} /* ============================================================ INSIGHTS ============================================================ */ .posts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} @media(max-width:1040px){.posts{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.posts{grid-template-columns:1fr}} .post{display:flex;flex-direction:column;gap:13px;border-radius:var(--r);overflow:hidden;transition:.3s var(--ease)} .post-img{aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)} .post-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .post:hover .post-img img{transform:scale(1.07)} .post .k{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)} .post h3{font-size:17px;letter-spacing:-.02em;line-height:1.3} .post:hover h3{color:var(--teal)} /* ============================================================ CTA + FORM ============================================================ */ .cta{position:relative;overflow:hidden} .cta-grid{display:grid;grid-template-columns:1fr .92fr;gap:clamp(34px,5vw,72px);align-items:start} @media(max-width:960px){.cta-grid{grid-template-columns:minmax(0,1fr)}} /* Paul 28 Sep (all-device QC): stop text-content grid tracks blowing out to their content min-content on small phones (<=320px), which pushed content off the right. min-width:0 lets these grid/flex items shrink below their intrinsic content width. */ .split>*,.cta-grid>*,.vm>*,.cmp>*,.deliv>*,.ft-grid>*{min-width:0} .cta-glow{position:absolute;right:-10%;top:-30%;width:52%;aspect-ratio:1;background:radial-gradient(circle,rgba(0,161,155,.20),rgba(0,161,155,0) 66%);pointer-events:none} .contact-cards{display:grid;gap:12px;margin-top:30px} .ccard{ display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:14px; background:var(--nav-card);border:1px solid var(--nav-line);transition:.28s var(--ease) } .ccard:hover{border-color:var(--teal);background:rgba(0,161,155,.12);transform:translateX(4px)} .ccard .ic{width:44px;height:44px;border-radius:12px;background:rgba(0,161,155,.18);color:var(--teal);display:grid;place-items:center;flex:none} .ccard .lb{display:block;line-height:1.3;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--on-navy-dim)} .ccard .vl{display:block;line-height:1.3;font-weight:800;font-size:17.5px;color:var(--white);letter-spacing:-.014em;margin-top:3px;word-break:break-word} .form{background:var(--white);border-radius:var(--r-lg);padding:clamp(26px,3vw,38px);box-shadow:var(--shadow-3)} .form h3{font-size:23px;letter-spacing:-.026em;margin-bottom:6px} .form .fp{font-size:14.5px;color:var(--ink-dim);margin-bottom:24px;line-height:1.5} .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:560px){.fgrid{grid-template-columns:1fr}} .field{display:flex;flex-direction:column;gap:7px} .field.full{grid-column:1/-1} .field label{font-size:13px;font-weight:700;color:var(--ink-soft);letter-spacing:-.005em} .field input,.field select,.field textarea{ font:inherit;font-size:15px;padding:13px 15px;border-radius:10px;border:1.5px solid var(--line); background:var(--white);color:var(--ink);transition:.22s var(--ease);width:100% } .field textarea{resize:vertical;min-height:96px} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(0,161,155,.13)} .form .btn{width:100%;margin-top:20px;padding:16px} .form .note{font-size:12.5px;color:var(--ink-dim);margin-top:14px;text-align:center;line-height:1.5} /* ============================================================ FOOTER ============================================================ */ .ft{background:var(--navy-2);color:var(--on-navy);padding-top:clamp(52px,6vw,76px);border-top:1px solid var(--nav-line)} .ft-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr 1fr;gap:36px} @media(max-width:960px){.ft-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.ft-grid{grid-template-columns:1fr}} .ft img.logo{height:32px;margin-bottom:20px} .ft p{font-size:14.5px;line-height:1.6;max-width:330px} .ft h4{font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);margin-bottom:18px} .ft-list{display:grid;gap:11px} .ft-list a{font-size:14.5px;transition:.22s var(--ease);display:inline-block} .ft-list a:hover{color:var(--white);transform:translateX(3px)} .ft-social{display:flex;gap:10px;margin-top:22px} .ft-social a{width:40px;height:40px;border-radius:11px;border:1px solid var(--nav-line);display:grid;place-items:center;transition:.24s var(--ease)} .ft-social a:hover{border-color:var(--teal);color:var(--teal);background:rgba(0,161,155,.1)} /* Peter 6 Oct: RISQS Verified + Audited stamps. His files are JPEGs on white, so each sits on its own white tile rather than straight on the navy. */ .ft-accred{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} .ft-accred img{display:block;height:84px;width:auto;background:#fff;border-radius:11px;padding:8px 12px;box-sizing:content-box} .ft-bot{ margin-top:clamp(40px,5vw,60px);padding:24px 0;border-top:1px solid var(--nav-line); display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:13px;color:var(--on-navy-dim) } .ft-bot .lk{display:flex;gap:20px;flex-wrap:wrap} /* ============================================================ MOBILE STICKY ACTION BAR ============================================================ */ .mbar{ position:fixed;left:0;right:0;bottom:0;z-index:70;display:none; background:var(--navy);border-top:1px solid var(--nav-line); padding:9px calc(var(--pad) / 2) calc(9px + env(safe-area-inset-bottom)); box-shadow:0 -8px 30px rgba(4,24,36,.4); } .mbar-in{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:8px} .mbar a{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; padding:9px 6px;border-radius:11px;font-size:11.5px;font-weight:700;color:var(--on-navy); border:1px solid var(--nav-line);transition:.22s var(--ease) } .mbar a svg{color:var(--teal)} .mbar a.pri{background:var(--teal);color:var(--navy);border-color:var(--teal)} .mbar a.pri svg{color:var(--navy)} @media(max-width:760px){ .mbar{display:block} body{padding-bottom:82px} .hero{min-height:min(100svh,760px)} } /* ============================================================ SCROLL PROGRESS ============================================================ */ .prog{position:fixed;left:0;top:0;height:3px;background:var(--teal);z-index:100;width:0;transition:width .12s linear} /* ============================================================ REVEALS - visible by default. The hidden pre-state only exists once JS has proved it can reveal again. Plus a failsafe that shows everything after 4 seconds regardless. ============================================================ */ html.anim .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} html.anim .rv.in{opacity:1;transform:none} html.anim .rv-d1{transition-delay:.08s} html.anim .rv-d2{transition-delay:.16s} html.anim .rv-d3{transition-delay:.24s} html.anim .rv-d4{transition-delay:.32s} @media(prefers-reduced-motion:reduce){ html.anim .rv{opacity:1!important;transform:none!important} *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .marq-track{animation:none!important} } /* ============================================================ SERVICE PAGE (aspro.html) ============================================================ */ /* ---------- breadcrumb + page hero ---------- */ .phero{ position:relative;background:var(--navy);color:var(--white); margin-top:calc(var(--head) * -1);padding-top:calc(var(--head) + 40px); padding-bottom:clamp(40px,5vw,64px);overflow:hidden;isolation:isolate; } .phero-photo{position:absolute;inset:0 0 0 44%;z-index:0;clip-path:polygon(20% 0,100% 0,100% 100%,0 100%)} .phero-photo img{width:100%;height:100%;object-fit:cover;object-position:56% 45%} .phero-photo::after{ content:"";position:absolute;inset:0; background:linear-gradient(100deg,var(--navy) 0%,rgba(4,24,36,.9) 30%,rgba(4,24,36,.42) 62%,rgba(4,24,36,.6) 100%); } @media(max-width:1000px){ .phero-photo{inset:0;clip-path:none} .phero-photo::after{background:linear-gradient(180deg,rgba(4,24,36,.76),rgba(4,24,36,.95))} } .phero-in{position:relative;z-index:2} .phero-copy{max-width:min(700px,62%)} @media(max-width:1000px){.phero-copy{max-width:100%}} .crumb{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--on-navy-dim);margin-bottom:22px;flex-wrap:wrap} .crumb a{transition:color .2s var(--ease)} .crumb a:hover{color:var(--teal)} .crumb .sep{opacity:.5} .crumb .cur{color:var(--white);font-weight:600} .phero h1{margin:14px 0 0;color:var(--white)} .phero .sub{margin-top:16px;max-width:560px;font-size:clamp(15px,1.15vw,17.5px);line-height:1.6;color:var(--on-navy)} /* ---------- sticky section nav ---------- */ .subnav{ position:sticky;top:var(--head);z-index:55;background:var(--navy-2); border-block:1px solid var(--nav-line);overflow-x:auto;scrollbar-width:none; } .subnav::-webkit-scrollbar{display:none} body.scrolled .subnav{top:66px} .subnav-in{display:flex;gap:2px;min-width:max-content;padding-block:8px} .subnav a{ padding:9px 15px;border-radius:8px;font-size:14px;font-weight:600;color:var(--on-navy); white-space:nowrap;transition:.22s var(--ease);border:1px solid transparent } .subnav a:hover{color:var(--white);background:var(--nav-card);border-color:var(--nav-line)} .subnav a.on{color:var(--teal);background:rgba(0,161,155,.13);border-color:rgba(0,161,155,.34)} .subnav a.cta-link{color:var(--navy);background:var(--teal);border-color:var(--teal);font-weight:700;margin-left:8px} .subnav a.cta-link:hover{background:var(--teal-pale);color:var(--navy);border-color:var(--teal-pale)} @media(max-width:760px){.subnav{display:none}} /* Paul 28 Sep: on-page jump bar removed on mobile (didn't fit, forced sideways scroll); users scroll the page instead */ /* ---------- two-column body with sticky enquiry rail ---------- */ .svc-layout{display:grid;grid-template-columns:minmax(0,1fr) 384px;gap:clamp(32px,4vw,64px);align-items:start} /* Paul 28 Sep: was bare 1fr, which is minmax(auto,1fr) — the track got blown out to the content's min-content width (the carousel/cards), so the whole main column (body prose + carousels) rendered ~776px wide and clipped off the right on phones. minmax(0,1fr) caps the track at the container width so everything wraps to any screen size. */ @media(max-width:1080px){.svc-layout{grid-template-columns:minmax(0,1fr)}} .svc-layout>*{min-width:0} .rail{position:sticky;top:calc(var(--head) + 76px)} @media(max-width:1080px){.rail{position:static}} .rail .form{padding:26px} .rail .form h3{font-size:20px} .rail-tel{ display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;margin-top:12px; background:var(--navy);border:1px solid var(--nav-line);color:var(--white);transition:.24s var(--ease) } .rail-tel:hover{border-color:var(--teal);background:var(--navy-2)} .rail-tel .ic{width:40px;height:40px;border-radius:11px;background:rgba(0,161,155,.18);color:var(--teal);display:grid;place-items:center;flex:none} .rail-tel .lb{display:block;line-height:1.3;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--on-navy-dim);font-weight:700} .rail-tel .nu{display:block;line-height:1.3;margin-top:3px;font-size:17px;font-weight:800;letter-spacing:-.01em} /* ---------- prose ---------- */ .prose h2{margin-top:0} .prose > * + *{margin-top:20px} .prose p{font-size:16.5px;line-height:1.68;color:var(--ink-soft)} .prose .lead{font-size:18.5px;line-height:1.62;color:var(--ink)} .on-dark .prose p{color:var(--on-navy)} .on-dark .prose .lead{color:var(--white)} .block{padding-block:clamp(44px,5.5vw,76px)} .block + .block{border-top:1px solid var(--line-soft)} /* ---------- trigger cards ---------- */ .trig{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px} @media(max-width:620px){.trig{grid-template-columns:1fr}} .trig-i{ display:flex;gap:14px;padding:20px 20px;border-radius:16px;background:var(--white); border:1px solid var(--line);box-shadow:var(--shadow-1);transition:.3s var(--ease) } .trig-i:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:rgba(0,161,155,.42)} .trig-i .ic{width:38px;height:38px;border-radius:11px;background:var(--wash);color:var(--teal);display:grid;place-items:center;flex:none} .trig-i .t{font-weight:700;font-size:15.5px;letter-spacing:-.016em;line-height:1.3} .trig-i .d{font-size:14px;color:var(--ink-dim);line-height:1.5;margin-top:5px} /* ---------- planning disciplines: a titled block with its own checklist ---------- Peter's rewrite replaced one flat 11-item list with four named disciplines, each carrying a lead paragraph and its own bullets. A cc-list only goes one level deep, so these are four fixed sub-blocks, each holding a real cc-list. Stacked single-column on purpose: side by side, the uneven bullet counts (5/5/5/3) leave ragged whitespace, and the lists stop scanning as lists. */ .disc{display:grid;grid-template-columns:1fr;gap:14px;margin-top:8px} .disc-i{ padding:24px;border-radius:16px;background:var(--white); border:1px solid var(--line);box-shadow:var(--shadow-1);transition:.3s var(--ease) } .disc-i:hover{box-shadow:var(--shadow-2);border-color:rgba(0,161,155,.42)} .disc-t{margin:0;font-weight:700;font-size:18px;letter-spacing:-.018em;line-height:1.3;color:var(--ink)} .disc-d{margin:7px 0 0;font-size:15px;color:var(--ink-dim);line-height:1.6} .disc-i .deliv{grid-template-columns:1fr;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)} .disc-i .deliv li{font-size:15px} /* ---------- deliverables checklist ---------- */ .deliv{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px;margin-top:10px} @media(max-width:700px){.deliv{grid-template-columns:1fr}} .deliv li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.55} .deliv li .ic{width:22px;height:22px;border-radius:50%;background:var(--teal);color:var(--navy);display:grid;place-items:center;flex:none;margin-top:2px} .on-dark .deliv li{color:var(--on-navy)} .on-dark .deliv li b{color:var(--white)} /* Peter 8 Oct: the CEA scope list left a tall empty gap above its seventh item. One item runs to twice the length of the rest, and a two column grid gives every row the height of its tallest cell, so the last item dropped below it. .pack flows the same list as two balanced columns, which closes the hole. Scoped on purpose: bare .deliv is shared by five other lists that pair up evenly, and columns would reflow those for no gain. */ @media(min-width:701px){ .deliv.pack{display:block;columns:2;column-gap:24px} .deliv.pack li{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:12px} .deliv.pack li:last-child{margin-bottom:0} } /* ---------- BAPA vs APA compare ---------- */ .cmp{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} @media(max-width:760px){.cmp{grid-template-columns:1fr}} .cmp-c{ padding:28px 26px;border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line); box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:12px } .cmp-c .tag{font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--teal)} .cmp-c h3{font-size:22px;letter-spacing:-.026em} .cmp-c p{font-size:15px;line-height:1.6;color:var(--ink-dim);flex:1} .cmp-c ul{display:grid;gap:9px;margin-top:2px} .cmp-c li{display:flex;gap:10px;font-size:14.5px;line-height:1.5;color:var(--ink-soft)} .cmp-c li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none;margin-top:8px} /* ---------- timeline ---------- */ .tl{display:grid;gap:0;margin-top:8px} .tl-i{display:grid;grid-template-columns:64px 1fr;gap:20px;padding-bottom:28px;position:relative} .tl-i:last-child{padding-bottom:0} .tl-i::before{ content:"";position:absolute;left:23px;top:52px;bottom:-4px;width:2px;background:var(--line); } .tl-i:last-child::before{display:none} .tl-n{ width:48px;height:48px;border-radius:14px;background:var(--navy);color:var(--teal); display:grid;place-items:center;font-weight:800;font-size:16px;position:relative;z-index:1 } .tl-b h3{font-size:18px;letter-spacing:-.022em;margin-bottom:7px} .tl-b p{font-size:15px;line-height:1.6;color:var(--ink-dim)} .tl-b .tag{ display:inline-block;margin-top:9px;font-size:11.5px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--teal);background:var(--wash);padding:4px 10px;border-radius:20px } /* ---------- risk band ---------- */ .risks{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px} @media(max-width:940px){.risks{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.risks{grid-template-columns:1fr}} .risk{ padding:22px 20px;border-radius:16px;background:var(--nav-card);border:1px solid var(--nav-line); transition:.3s var(--ease) } .risk:hover{border-color:rgba(0,161,155,.4);background:rgba(255,255,255,.07)} .risk .ic{color:var(--teal);margin-bottom:13px} .risk .t{font-weight:700;font-size:16px;color:var(--white);letter-spacing:-.018em;margin-bottom:6px} .risk .d{font-size:14px;line-height:1.52;color:var(--on-navy)} /* ---------- FAQ accordion ---------- */ .faq{display:grid;gap:10px;margin-top:8px} .faq details{ border:1px solid var(--line);border-radius:14px;background:var(--white); box-shadow:var(--shadow-1);overflow:hidden;transition:border-color .25s var(--ease) } .faq details[open]{border-color:rgba(0,161,155,.42)} .faq summary{ list-style:none;cursor:pointer;padding:19px 54px 19px 22px;position:relative; font-weight:700;font-size:16.5px;letter-spacing:-.018em;line-height:1.4; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"";position:absolute;right:22px;top:calc(50% - 6px);width:11px;height:11px; border-right:2.4px solid var(--teal);border-bottom:2.4px solid var(--teal); transform:rotate(45deg);transition:transform .28s var(--ease) } .faq details[open] summary::after{transform:rotate(-135deg);top:calc(50% - 2px)} .faq summary:hover{color:var(--teal)} .faq .ans{padding:0 22px 21px;font-size:15.5px;line-height:1.65;color:var(--ink-soft)} .faq .ans p + p{margin-top:13px} /* ---------- related services ---------- */ .rel{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} @media(max-width:1000px){.rel{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.rel{grid-template-columns:1fr}} .rel-c{ display:flex;flex-direction:column;gap:11px;padding:20px;border-radius:16px; background:var(--white);border:1px solid var(--line);transition:.3s var(--ease) } .rel-c:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:rgba(0,161,155,.42)} .rel-c .im{aspect-ratio:16/9;border-radius:11px;overflow:hidden;background:var(--wash)} .rel-c .im img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .rel-c:hover .im img{transform:scale(1.06)} .rel-c .t{font-weight:700;font-size:16px;letter-spacing:-.02em;line-height:1.3} .rel-c .d{font-size:13.5px;color:var(--ink-dim);line-height:1.5;flex:1} /* ---------- pull quote / callout ---------- */ .callout{ padding:26px 28px;border-radius:18px;background:var(--wash); border:1px solid rgba(0,161,155,.28);border-left:4px solid var(--teal); } .callout p{font-size:17px;line-height:1.6;color:var(--ink);font-weight:500} .callout .k{font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--teal);margin-bottom:9px} /* The callout was light-panel only. Peter's rewrite closes the navy "why it matters" band with one, so it needs a dark skin: same teal spine, panel and hairline borrowed from .risk so it sits with the cards above it. */ .on-navy .callout{background:var(--nav-card);border-color:var(--nav-line);border-left-color:var(--teal)} .on-navy .callout p{color:var(--on-navy)} /* ===== V5 25 Sep: testimonials, about, case study article ===== */ .testis{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:start} .testis.one{grid-template-columns:1fr;max-width:880px} /* Peter: the masonry section "produces a very long, irregular section" because quotes run 190 to 1,300 characters. `.quad` is the About-page answer: four hand-picked excerpts in four EQUAL cards, each linking to the full quote. Scoped to .quad on purpose — bare .testis is shared by eight pages, so changing align-items there would reflow all of them. */ .testis.quad{align-items:stretch} .testis.quad .testi{height:100%} .testis.quad .testi figcaption{margin-top:auto} /* caption + link sit on the baseline whatever the excerpt length */ .testis.one.full{max-width:980px;gap:28px} .testis.one.full .testi{scroll-margin-top:110px} /* the deep link lands clear of the sticky header */ .testi-full{display:inline-flex;align-items:center;gap:7px;margin-top:2px;font-weight:700;font-size:14.5px;color:var(--teal-ink);text-decoration:none} .testi-full:hover{color:var(--teal)} .testi-full svg{transition:transform .22s var(--ease)} .testi-full:hover svg{transform:translateX(3px)} @media(max-width:900px){.testis{grid-template-columns:1fr}} /* Peter 6 Oct: RIA's two full length quotes as equal cards, caption on the baseline. Two column desktop only: on phones the row is a swipe carousel with Read more, which must not stretch every card to the open one. */ @media(min-width:901px){ .testis.eq{align-items:stretch} .testis.eq .testi{height:100%} .testis.eq .testi figcaption{margin-top:auto} } .testi{position:relative;margin:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,36px);box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:14px} .on-wash .testi{background:var(--white)} .testi-q{display:block;color:var(--teal);line-height:0} .testi-tag{display:inline-block;align-self:flex-start;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-ink);background:var(--wash);border:1px solid rgba(0,161,155,.25);padding:6px 11px;border-radius:999px;line-height:1.2} .testi blockquote{margin:0;color:var(--ink-soft);font-size:1rem;line-height:1.62} .testi blockquote p{margin:0 0 12px} .testi blockquote p:last-child{margin-bottom:0} .testi figcaption{display:flex;flex-direction:column;gap:3px;padding-top:14px;border-top:1px solid var(--line-soft)} .testi figcaption .nm{display:block;font-weight:700;color:var(--ink);line-height:1.3} .testi figcaption .rl{display:block;font-size:.88rem;color:var(--ink-dim);line-height:1.4} .vm{display:grid;grid-template-columns:1fr 1fr;gap:20px} @media(max-width:860px){.vm{grid-template-columns:1fr}} .vm-i{background:var(--nav-card);border:1px solid var(--nav-line);border-radius:var(--r-lg);padding:clamp(24px,3vw,36px)} .vm-i p{margin:14px 0 0;color:var(--white);font-size:clamp(1.08rem,1.4vw,1.28rem);line-height:1.55;font-weight:500} .cs-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;background:var(--wash);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:30px} .cs-m .lb{display:block;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-ink);line-height:1.3;margin-bottom:4px} .cs-m .vl{display:block;color:var(--ink);font-weight:600;line-height:1.45;font-size:.95rem} .cs-art h2{margin:34px 0 12px} .cs-list{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:10px} .cs-list li{position:relative;padding:14px 16px 14px 18px;border-left:3px solid var(--teal);background:var(--wash);border-radius:0 var(--r) var(--r) 0;color:var(--ink-soft);line-height:1.55} .cs-list li b{color:var(--ink)} .iso-acc summary .sm{display:block;font-weight:500;font-size:.88rem;color:var(--ink-dim);margin-top:3px} .iso-acc .ans ul{margin:0 0 6px;padding-left:1.1em} .iso-acc .ans li{margin:0 0 6px} .clogos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px} .clogo{background:var(--white);border:1px solid var(--line);border-radius:var(--r);display:grid;place-items:center;padding:14px 18px;aspect-ratio:2/1} .clogo img{max-width:100%;max-height:64px;width:auto;height:auto;object-fit:contain} @media(max-width:600px){.clogos{grid-template-columns:repeat(3,1fr);gap:10px}.clogo{padding:8px 10px}.clogo img{max-height:40px}} .ct-light .ccard{background:var(--white);border-color:var(--line)}.ct-light .ccard .ic{color:var(--teal-ink)}.ct-light .ccard .lb{color:var(--teal-ink)}.ct-light .ccard .vl{color:var(--ink)} /* ============================================================ CONTRAST GATE FIXES (see qa.js) Two root causes, not two symptoms: 1. section-level colour rules leaked INTO light cards nested inside dark sections, and vice versa. 2. the brand teal is 3.2:1 on white, which fails small text. ============================================================ */ /* -- 1. stop dark-section rules leaking into light surfaces -- */ .on-navy .lede{color:var(--on-navy)} .form h1,.form h2,.form h3,.form h4{color:var(--ink)} .form p,.form .lede,.form label{color:var(--ink-soft)} .form .fp,.form .note{color:var(--ink-dim)} .cmp-c h3,.trig-i .t,.path .q,.step h3,.rel-c .t,.faq summary{color:var(--ink)} .case h3,.split-badge .t,.risk .t,.svc h3{color:var(--white)} /* -- 2. small teal text on a light ground uses the darker shade -- */ .eyebrow,.path-n,.post .k,.cmp-c .tag,.tl-b .tag,.callout .k, .case-client,.stat .n span,.faq summary:hover{color:var(--teal-ink)} .alink{color:var(--teal-ink)} .on-navy .eyebrow,.on-navy .alink,.on-navy .case-client,.on-navy .post .k, .hero .eyebrow,.phero .eyebrow,.cta .eyebrow,.risk .ic{color:var(--teal)} .case-client{color:var(--teal)} .case .alink,.case-body .alink{color:var(--teal)} .tl-b .tag{background:var(--wash)} /* teal on a pale-teal tint is still only ~3.2:1, use the darker shade */ .cmp-c .tag,.tl-b .tag,.callout .k,.rel-c .alink{color:var(--teal-ink)} .faq summary::after{border-color:var(--teal-ink)} /* two-column service grid for the wider services block */ .svcs.svcs-2{grid-template-columns:repeat(2,1fr)} @media(max-width:620px){.svcs.svcs-2{grid-template-columns:1fr}} /* the freephone number must never break across two lines */ .util-r a.tel{white-space:nowrap} .util-l{min-width:0} /* .lede has no bottom margin, so two in a row collide */ .lede + .lede{margin-top:14px} /* ============================================================ V3, 23 Sep: Peter's review copy ============================================================ */ /* footer: one "Professional services" column of seven replaces two of three */ .ft-grid{grid-template-columns:1.35fr 1.5fr 1fr} @media(max-width:960px){.ft-grid{grid-template-columns:1fr 1fr}.ft-grid>div:first-child{grid-column:1/-1}} @media(max-width:560px){.ft-grid{grid-template-columns:1fr}} /* "Have a project or assurance requirement to discuss?" strip under the four steps */ .next-cta{margin-top:26px;padding:26px 30px;border-radius:var(--r-lg);background:var(--navy);display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between} .next-cta>div{max-width:680px} .next-cta h3{color:var(--white);margin-bottom:6px} .next-cta p{color:var(--on-navy);font-size:15px;line-height:1.55} /* closing line under the enquiry button */ .form .form-close{font-size:14px;font-weight:600;color:var(--ink);margin-top:18px;text-align:center;line-height:1.5} /* ASPRO page: line that closes the lifecycle */ .tl-close{margin-top:22px;padding:16px 20px;border-left:3px solid var(--teal);background:var(--wash);border-radius:0 var(--r) var(--r) 0;font-weight:700;color:var(--ink);font-size:15.5px} /* services page: "not sure" band */ .notsure{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;padding:clamp(28px,3.4vw,44px);border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-2)} .notsure h2{margin:12px 0 12px} .notsure .acts{display:flex;flex-wrap:wrap;gap:12px} @media(max-width:760px){.notsure{grid-template-columns:1fr}} /* service pages: bullet list inside a timeline step */ .tl-list{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:7px} .tl-list li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.5;color:var(--ink-soft)} .tl-list li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--teal)} .tl-b .tag{display:inline-block;margin-top:12px} /* railway industry assurance: the eight stages of Peter's RISQS guide */ .stages{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .stage{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line)} .stage .n{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink)} .stage .t{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ink)} .stage .d{font-size:14.5px;line-height:1.5;color:var(--ink-dim)} @media(max-width:980px){.stages{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.stages{grid-template-columns:1fr}} a.stage{text-decoration:none;transition:.28s var(--ease)} a.stage:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:rgba(0,161,155,.42)} /* trigger cards: title and description are nested spans, block them or they run together */ .trig-i .t,.trig-i .d{display:block} /* ========================================================================== EDIT MODE (engine stamps html.static): force all motion visible + frozen so the client sees and can click everything in the locked editor. AW house rule. ========================================================================== */ html.static .rv, html.static .rv-d1, html.static .rv-d2, html.static .rv-d3, html.static .rv-d4{opacity:1 !important;transform:none !important} html.static .marq-track{animation:none !important} html.static .hero-scroll .ln::after{animation:none !important} html.static .mbar{position:static !important} /* ============================================================ HARCON aw-wp-build additions (25 Sep): editor layout fixes, the enquiry form (matches the design's white card), AW credit. ============================================================ */ /* EDITOR (html.static / body.cc-editing): the engine un-sticks every fixed/sticky element so the toolbar is never covered, which drops the position:fixed mega menu and full-height drawer (both visibility:hidden, which STILL reserves layout space) into the flow and leaves a big blank band above the hero. Keep them out of flow in the editor. */ html.static .mega,html.static .drawer, body.cc-editing .mega,body.cc-editing .drawer{position:fixed !important} /* The live header is a transparent sticky bar floating over the hero (the hero pulls up under it with a negative top-margin). In the editor the header is un-stuck to static (its z-index stops applying), so the hero paints over it and the header vanishes, and the hero image runs up under the util/header bars (so the "Replace image" chip lands on the thin contact bar). In edit mode only: zero the hero's pull-up so the image starts BELOW the bars, and give the header a solid navy background so it is visible below the contact bar (not sticky, just visible, as on the live site). Public view is untouched. */ html.static .hero{background:var(--navy);margin-top:0 !important} html.static .hero-photo{opacity:1 !important} html.static .hdr{background:var(--navy)} html.static .hdr::before{opacity:0} html.static .hdr .brand img,html.static .nav>li>a,html.static .nav a{color:var(--white)} /* Enquiry form. The engine emits .formwrap.ccform (not the design's .form .fgrid) and injects its own inline field CSS, so match the design's WHITE-CARD form EXACTLY, with !important where the engine sets the prop: dark labels, 1.5px light-line boxed inputs on white, teal focus ring. */ .formwrap.ccform{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:2px} .formwrap.ccform .field{display:flex;flex-direction:column;gap:7px} .formwrap.ccform .field.full{grid-column:1/-1} @media(max-width:560px){.formwrap.ccform{grid-template-columns:1fr}} .ccform .field label{font-size:13px;font-weight:700;color:var(--ink-soft);letter-spacing:-.005em;margin:0} .ccform input.inp,.ccform textarea.inp{ font-family:inherit;font-size:15px !important;padding:13px 15px !important;border-radius:10px !important; border:1.5px solid var(--line) !important;background:var(--white) !important;color:var(--ink) !important; width:100% !important;height:auto !important;box-shadow:none !important;transition:.22s var(--ease)} .ccform textarea.inp.area{min-height:96px !important;padding:14px 15px !important;line-height:1.5} .ccform input.inp::placeholder,.ccform textarea.inp::placeholder{color:var(--ink-dim) !important} .ccform input.inp:focus,.ccform textarea.inp:focus{border-color:var(--teal) !important;box-shadow:0 0 0 4px rgba(0,161,155,.13) !important} /* "Area of support" renders as pills (the editor form has no native dropdown); style them for the white card. */ .ccform .pills{display:flex;flex-wrap:wrap;gap:8px} .ccform .pill{border:1.5px solid var(--line);color:var(--ink-soft);background:var(--white);border-radius:999px;padding:8px 14px;font-size:13.5px;cursor:pointer;transition:.2s var(--ease)} .ccform .pill:hover{border-color:var(--teal);color:var(--ink)} .formwrap.ccform .pill.on{background:var(--teal);border-color:var(--teal);color:var(--navy)} /* "Railway planning requirements" renders as the engine multi-select (type: multi). The engine base styles it for a NAVY panel (bone text, dark panel), but this form sits on the WHITE card, so every part needs the same white-card treatment .inp gets. Without this the closed button is white-on-white and the open options are ink-on-ink. */ .ccform .cc-ms-btn{ font-family:inherit;font-size:15px !important;padding:13px 15px !important;border-radius:10px !important; border:1.5px solid var(--line) !important;background:var(--white) !important;color:var(--ink) !important; width:100% !important;height:auto !important;min-height:49px;box-shadow:none !important;transition:.22s var(--ease)} .ccform .cc-ms-val.is-empty{color:var(--ink-dim) !important} .ccform .cc-ms-btn:hover{border-color:var(--teal) !important} .ccform .cc-ms-btn:focus-visible{outline:none !important;border-color:var(--teal) !important;box-shadow:0 0 0 4px rgba(0,161,155,.13) !important} .ccform .cc-ms-btn[aria-expanded="true"]{border-color:var(--teal) !important;box-shadow:0 0 0 4px rgba(0,161,155,.13) !important} .ccform .cc-ms-caret{color:var(--ink-soft)} .ccform .cc-ms-panel{ border:1.5px solid var(--line) !important;background:var(--white) !important;color:var(--ink) !important; border-radius:10px !important;margin-top:6px;top:100% !important;padding:6px !important; box-shadow:0 14px 34px rgba(4,24,36,.13) !important} /* These options are