/* ==========================================================================
Fortian design refresh
--------------------------------------------------------------------------
Always linked AFTER fortian.css, on every page.
Two scopes:
- The header/navigation block (section 3) is unscoped and applies
site-wide. It matches the specificity of the fortian.css rules it
replaces and wins on source order.
- Everything else is scoped under `.f-refresh` on , which lets a
page opt in. It also guarantees these rules out-specify the Webflow-era
ones they replace rather than relying on order alone.
Purpose is consolidation, not a new identity. The brand marks — Exo,
navy #262f5b, orange #f16339 — are unchanged. What changes is that the
two competing visual languages in fortian.css (the Webflow base and the
newer hand-written .insight-card / .case-study-card house style) collapse
into one, and that one is the newer style.
========================================================================== */
/* --------------------------------------------------------------------------
1. Tokens
All prefixed --f- so they cannot collide with the existing :root block,
where --white and --blue both (incorrectly) resolve to orange.
-------------------------------------------------------------------------- */
:root {
/* Colour — three brand values plus a neutral ramp. Nothing else. */
--f-navy: #262f5b;
--f-navy-deep: #1a2040;
--f-navy-glass: rgba(21, 27, 56, .82);
--f-orange: #f16339;
--f-orange-hover: #d9532e;
--f-ink: #1f2430;
--f-body: #444;
--f-muted: #6b7280;
--f-surface: #fff;
--f-surface-alt: #f5f7fa;
--f-line: #e4ebf3;
--f-on-dark: rgba(255, 255, 255, .88);
--f-on-dark-dim: rgba(255, 255, 255, .62);
/* Type — a fluid scale. Replaces the 14px/20px Webflow default. */
--f-step--1: clamp(0.8125rem, 0.8rem + 0.08vw, 0.875rem); /* 13 → 14 micro */
--f-step-0: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem); /* 16 → 17 body */
--f-step-1: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); /* 18 → 20 lead */
--f-step-2: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem); /* 20 → 24 card */
--f-step-3: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); /* 28 → 36 section */
--f-step-4: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem); /* 36 → 60 hero */
/* Exo is a squared-off technical face: it wants negative tracking when
large and generous tracking when small and uppercase. */
--f-track-display: -0.02em;
--f-track-micro: 0.08em;
/* Space — 8pt */
--f-1: 8px; --f-2: 16px; --f-3: 24px; --f-4: 32px;
--f-5: 48px; --f-6: 64px; --f-7: 96px;
--f-section: clamp(56px, 7vw, 96px);
/* Measure — the values the newer components already converged on */
--f-container: 1200px;
--f-gutter: 40px;
--f-prose: 72ch;
/* Form */
--f-radius: 12px;
--f-radius-sm: 8px;
--f-radius-pill: 999px;
--f-shadow: 0 4px 20px rgba(16, 24, 48, .08);
--f-shadow-lift: 0 12px 32px rgba(16, 24, 48, .14);
--f-ring: 0 0 0 3px rgba(241, 99, 57, .45);
--f-ease: cubic-bezier(.2, .7, .3, 1);
/* Hero scrims. Page titles are left-aligned, so the overlay is directional:
heavy where the type sits, lighter on the right where the photograph does
the work. --f-scrim-open goes further and leaves the right third almost
clear, for heroes whose subject lives on that side. */
--f-scrim: linear-gradient(100deg,
rgba(9, 13, 30, .94) 0%, rgba(9, 13, 30, .78) 50%, rgba(9, 13, 30, .55) 100%);
--f-scrim-open: linear-gradient(95deg,
rgba(9, 13, 30, .92) 0%, rgba(9, 13, 30, .74) 34%,
rgba(9, 13, 30, .34) 62%, rgba(9, 13, 30, .12) 100%);
}
/* --------------------------------------------------------------------------
2. Base
-------------------------------------------------------------------------- */
/* Deliberately does NOT set a background. fortian.css has
`body { background-color: #1a1a2e }`, and several legacy sections carry
`color: #fff` with no background of their own, relying on that dark body
showing through. Painting the body white strands their text invisibly.
Sections that should be light set their own background below. */
.f-refresh {
font-size: var(--f-step-0);
line-height: 1.65;
color: var(--f-body);
-webkit-font-smoothing: antialiased;
}
.f-refresh p { font-size: var(--f-step-0); line-height: 1.7; }
.f-refresh h1, .f-refresh h2, .f-refresh h3 {
color: var(--f-navy);
letter-spacing: var(--f-track-display);
text-wrap: balance;
}
/* Visible keyboard focus everywhere — the base sheet has none. */
.f-refresh a:focus-visible,
.f-refresh button:focus-visible,
.f-refresh [tabindex]:focus-visible {
outline: 2px solid var(--f-orange);
outline-offset: 3px;
border-radius: 4px;
}
.f-skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 2000;
background: var(--f-orange);
color: #fff;
padding: 12px 20px;
font-weight: 600;
border-radius: 0 0 var(--f-radius-sm) 0;
}
.f-skip-link:focus { left: 0; }
/* Shared inner measure */
.f-wrap {
max-width: var(--f-container);
margin-inline: auto;
padding-inline: var(--f-gutter);
}
@media (max-width: 600px) { .f-wrap { padding-inline: 20px; } }
/* --------------------------------------------------------------------------
3. Header / navigation — GLOBAL, applies to every page
Restores a horizontal desktop nav above 1101px. Below that nothing is
touched, so the existing slideout-nav.js keeps working unchanged.
These rules are deliberately NOT scoped under .f-refresh: the nav is shared
site-wide, whereas the page-level system below is only on the pages that
opt in. Specificity matches the fortian.css rules it replaces and wins on
source order, because refresh.css is always linked after fortian.css.
-------------------------------------------------------------------------- */
.section.header {
position: sticky;
top: 0;
z-index: 1002;
background: var(--f-navy-deep);
border-bottom: 1px solid rgba(255, 255, 255, .09);
transition: background .3s var(--f-ease), border-color .3s var(--f-ease);
}
/* Pages whose hero runs under the header (the homepage) opt into a glass bar
so the artwork shows through, then go solid on scroll. Every other page
keeps the solid bar above — translucent navy over a white page body would
just look washed out. */
.f-hero-overlay .section.header {
background: var(--f-navy-glass);
backdrop-filter: blur(14px) saturate(1.3);
-webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.f-hero-overlay .section.header.is-scrolled {
background: var(--f-navy-deep);
border-bottom-color: rgba(255, 255, 255, .06);
}
.section.header .container.navbar {
max-width: var(--f-container);
margin-inline: auto;
padding-inline: var(--f-gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--f-3);
min-height: 68px;
}
/* base.css gives every .w-container a clearfix ::before/::after. Once the
navbar becomes a flex container those pseudo-elements turn into flex items
and shunt the logo ~50px off the left margin. */
.section.header .container.navbar::before,
.section.header .container.navbar::after { display: none; }
/* margin: 0 clears the `.image-8 { margin-left: 20px }` set at ≥1280px, which
otherwise leaves the logo optically 20px inside the nav links' left edge. */
.section.header .image-8 { height: 48px; width: auto; display: block; margin: 0; }
.section.header a:focus-visible,
.section.header .menu-button:focus-visible {
outline: 2px solid var(--f-orange);
outline-offset: 3px;
border-radius: 4px;
}
@media (min-width: 1101px) {
/* Beat the two `!important` rules at fortian.css:5525 and :5530 */
.section.header .nav-menu.w-nav-menu {
display: flex !important;
align-items: center;
gap: 4px;
position: static;
background: none;
}
.section.header .menu-button.w-nav-button { display: none !important; }
.section.header .navbar-text.w-nav-link {
color: var(--f-on-dark);
background: none;
font-size: 15px;
font-weight: 500;
letter-spacing: 0;
padding: 8px 14px;
border-radius: var(--f-radius-sm);
position: relative;
transition: color .2s var(--f-ease);
}
.section.header .navbar-text.w-nav-link::after {
content: '';
position: absolute;
left: 14px; right: 14px; bottom: 2px;
height: 2px;
background: var(--f-orange);
transform: scaleX(0);
transform-origin: left;
transition: transform .25s var(--f-ease);
}
.section.header .navbar-text.w-nav-link:hover,
.section.header .navbar-text.w-nav-link.w--current { color: #fff; }
.section.header .navbar-text.w-nav-link:hover::after,
.section.header .navbar-text.w-nav-link.w--current::after { transform: scaleX(1); }
/* Contact is the single high-contrast element in the bar */
.section.header .navbar-text.w-nav-link.f-nav-cta {
background: var(--f-orange);
color: #fff;
font-weight: 600;
padding: 10px 20px;
margin-left: var(--f-2);
border-radius: var(--f-radius-pill);
}
.section.header .navbar-text.w-nav-link.f-nav-cta:hover { background: var(--f-orange-hover); }
.section.header .navbar-text.w-nav-link.f-nav-cta::after { display: none; }
}
@media (max-width: 1100px) {
.section.header .container.navbar { padding-inline: 20px; min-height: 60px; }
}
.f-refresh .section-cta-center { padding: 0; }
/* --------------------------------------------------------------------------
4. Buttons — one primitive, two variants.
Replaces three unrelated systems (11px / 6px / 999px radius, three hover
oranges, and .button's hard 7px 12px 15px offset drop shadow).
-------------------------------------------------------------------------- */
.f-refresh .f-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--f-1);
background: var(--f-orange);
color: #fff;
font-family: Exo, sans-serif;
font-size: var(--f-step-0);
font-weight: 600;
line-height: 1;
letter-spacing: 0;
padding: 15px 28px;
border: 1px solid transparent;
border-radius: var(--f-radius-sm);
text-decoration: none;
cursor: pointer;
transition: background .2s var(--f-ease), transform .2s var(--f-ease),
box-shadow .2s var(--f-ease), border-color .2s var(--f-ease);
}
.f-refresh .f-btn:hover {
background: var(--f-orange-hover);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(241, 99, 57, .3);
}
.f-refresh .f-btn:focus-visible { outline: none; box-shadow: var(--f-ring); }
.f-refresh .f-btn--ghost {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
.f-refresh .f-btn--ghost:hover {
background: rgba(255, 255, 255, .1);
border-color: #fff;
box-shadow: none;
}
/* Neutralise the legacy .button on preview pages */
.f-refresh .button,
.f-refresh .button.get-in-touch,
.f-refresh .button.get-in-touch.signup {
background-image: none;
border-radius: var(--f-radius-sm);
box-shadow: none;
margin: 0;
padding: 15px 28px;
}
.f-refresh .button:hover { box-shadow: 0 8px 20px rgba(241, 99, 57, .3); }
/* --------------------------------------------------------------------------
5. Section rhythm and headings
-------------------------------------------------------------------------- */
.f-refresh .f-section { padding-block: var(--f-section); }
.f-refresh .f-section--alt { background: var(--f-surface-alt); }
.f-refresh .f-section--dark {
background: linear-gradient(150deg, var(--f-navy) 0%, var(--f-navy-deep) 100%);
}
.f-refresh .f-heading {
font-size: var(--f-step-3);
line-height: 1.15;
color: var(--f-navy);
text-align: center;
margin: 0 0 var(--f-2);
padding: 0;
}
.f-refresh .f-section--dark .f-heading { color: #fff; }
/* The house-style orange rule, abstracted for centred headings. */
.f-refresh .f-heading::after {
content: '';
display: block;
width: 56px;
height: 3px;
background: var(--f-orange);
border-radius: 2px;
margin: var(--f-3) auto 0;
}
.f-refresh .f-heading--left { text-align: left; }
.f-refresh .f-heading--left::after { margin-inline: 0; }
.f-refresh .f-lead {
font-size: var(--f-step-1);
line-height: 1.65;
color: var(--f-body);
max-width: var(--f-prose);
margin: 0 auto var(--f-5);
text-align: center;
}
.f-refresh .f-section--dark .f-lead { color: var(--f-on-dark); }
/* --------------------------------------------------------------------------
6. Card primitive — the .insight-card geometry, applied everywhere.
Retires the .modern-card draft (8px radius, 4px left border, -3px lift).
-------------------------------------------------------------------------- */
.f-refresh .f-card {
display: flex;
flex-direction: column;
background: var(--f-surface);
border: 1px solid var(--f-line);
border-radius: var(--f-radius);
box-shadow: var(--f-shadow);
overflow: hidden;
text-decoration: none;
color: var(--f-body);
transition: transform .3s var(--f-ease), box-shadow .3s var(--f-ease),
border-color .3s var(--f-ease);
}
a.f-refresh .f-card, .f-refresh a.f-card { color: var(--f-body); }
.f-refresh a.f-card:hover {
transform: translateY(-4px);
box-shadow: var(--f-shadow-lift);
border-color: rgba(241, 99, 57, .35);
}
/* Beat `.modern-card { padding: 30px 24px !important }` */
.f-refresh .f-card.modern-card { padding: 0 !important; }
.f-refresh .f-card .f-card-body {
padding: var(--f-4) var(--f-3) var(--f-3);
display: flex;
flex-direction: column;
flex: 1;
}
.f-refresh .f-card--pad { padding: var(--f-4) var(--f-3) !important; }
.f-refresh .f-card h3,
.f-refresh .f-card .f-card-title {
font-size: var(--f-step-2);
line-height: 1.25;
color: var(--f-navy);
margin: 0 0 var(--f-2);
padding: 0;
border: 0;
letter-spacing: var(--f-track-display);
}
.f-refresh .f-card p { margin: 0 0 var(--f-2); color: var(--f-body); }
.f-refresh .f-card-media {
height: 180px;
background-size: cover;
background-position: 50%;
flex: none;
padding: 0;
margin: 0;
}
.f-refresh .f-card-meta {
font-size: var(--f-step--1);
color: var(--f-muted);
letter-spacing: .04em;
margin-bottom: var(--f-1);
display: block;
}
/* Bottom-pinned "Read more" affordance */
.f-refresh .f-card-link {
margin-top: auto;
padding-top: var(--f-2);
color: var(--f-orange);
font-size: var(--f-step--1);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--f-track-micro);
display: inline-flex;
align-items: center;
gap: 6px;
}
.f-refresh a.f-card:hover .f-card-link { text-decoration: underline; }
/* News tiles carry long editorial headlines, so they step the title down a
size and clamp the excerpt — otherwise a three-line title plus a seven-line
excerpt makes the three cards wildly uneven. */
.f-refresh .f-card--news h3 { font-size: var(--f-step-1); line-height: 1.3; }
.f-refresh .f-card--news p {
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: var(--f-step--1);
line-height: 1.6;
}
.f-refresh .f-grid { display: grid; gap: var(--f-4); }
.f-refresh .f-grid--3 { grid-template-columns: repeat(3, 1fr); }
.f-refresh .f-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .f-refresh .f-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
.f-refresh .f-grid--3, .f-refresh .f-grid--2 { grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
7. Hero
-------------------------------------------------------------------------- */
/* Full viewport height: the network artwork fills the window, and the next
section begins below the fold. dvh so mobile browser chrome doesn't crop it. */
.f-refresh .section.hero-heading.hero-fullpage,
.f-refresh .hero-fullpage-inner {
min-height: 100vh;
min-height: 100dvh;
}
.f-refresh .section.hero-heading.hero-fullpage {
/* Left-weighted scrim: the artwork's nodes live on the right, the text on
the left, so the gradient buys contrast without hiding the image. */
background-image:
linear-gradient(100deg, rgba(9, 13, 30, .92) 0%, rgba(9, 13, 30, .72) 45%, rgba(9, 13, 30, .35) 100%),
url('../images/Network-smaller.jpg');
background-position: 0 0, 50% 50%;
background-size: auto, cover;
}
/* Column layout: `margin-block: auto` on the content absorbs the free space
evenly above and below it, so the headline sits optically centred while the
credential strip stays pinned to the bottom edge of the viewport. */
.f-refresh .hero-fullpage-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: var(--f-container);
margin-inline: auto;
padding: calc(var(--f-7) + 20px) var(--f-gutter) var(--f-5);
width: 100%;
}
.f-refresh .hero-fullpage-content {
text-align: left;
width: 100%;
max-width: 780px;
margin-block: auto;
}
.f-refresh .hero-fullpage-content .hero-headline {
font-size: var(--f-step-4);
line-height: 1.02;
text-align: left;
letter-spacing: var(--f-track-display);
margin: 0 0 var(--f-3);
color: #fff;
}
.f-refresh .hero-fullpage-content .hero-subtitle {
font-size: var(--f-step-1);
line-height: 1.55;
text-align: left;
color: var(--f-on-dark);
max-width: 56ch;
margin: 0 0 var(--f-5);
}
.f-refresh .hero-actions { display: flex; flex-wrap: wrap; gap: var(--f-2); }
/* --- Signature: the credential strip ------------------------------------
The brand already owns a motif — the threat-update banner's hairline
Australian coastline with the capitals as nodes on an orange telemetry
mesh. This carries that motif into the page furniture: credentials sit as
nodes on a hairline rule. It is the one deliberately distinctive element;
everything around it stays quiet.
---------------------------------------------------------------------- */
.f-refresh .f-telemetry {
width: 100%;
margin-top: var(--f-5);
padding-top: var(--f-3);
border-top: 1px solid rgba(255, 255, 255, .16);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--f-2) var(--f-5);
}
.f-refresh .f-telemetry-label {
font-size: var(--f-step--1);
text-transform: uppercase;
letter-spacing: var(--f-track-micro);
color: var(--f-on-dark-dim);
}
.f-refresh .f-telemetry-item {
position: relative;
padding-left: 18px;
font-size: var(--f-step--1);
font-weight: 600;
letter-spacing: .04em;
color: var(--f-on-dark);
text-transform: uppercase;
}
.f-refresh .f-telemetry-item::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 7px;
height: 7px;
margin-top: -3.5px;
border-radius: 50%;
background: var(--f-orange);
box-shadow: 0 0 0 4px rgba(241, 99, 57, .18);
}
@media (max-width: 900px) {
.f-refresh .hero-fullpage-inner { padding-block: var(--f-7) var(--f-4); }
.f-refresh .f-telemetry { margin-top: var(--f-4); gap: var(--f-2) var(--f-3); }
}
/* --------------------------------------------------------------------------
8. Certification logos
Was: three empty divs with full-saturation vendor logos at ~150px, no alt
text, two of them cropped by background-size:cover, stacking to ~900px on
mobile. Now: real ![]()
, one row, desaturated until hover.
-------------------------------------------------------------------------- */
.f-refresh .f-creds {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--f-3) var(--f-6);
background: var(--f-surface-alt);
border: 1px solid var(--f-line);
border-radius: var(--f-radius);
padding: var(--f-4) var(--f-5);
max-width: 860px;
margin-inline: auto;
}
/* Held back just enough to stop the vendor blues and reds competing with the
brand, but not so far that an accreditation mark stops being recognisable —
which is the entire reason it is on the page. */
.f-refresh .f-creds img {
height: 104px;
width: auto;
filter: grayscale(.55);
opacity: .88;
transition: filter .3s var(--f-ease), opacity .3s var(--f-ease);
}
.f-refresh .f-creds a:hover img,
.f-refresh .f-creds img:hover { filter: none; opacity: 1; }
.f-refresh .f-creds-note {
flex-basis: 100%;
text-align: center;
font-size: var(--f-step--1);
color: var(--f-muted);
margin: 0;
}
@media (max-width: 600px) {
.f-refresh .f-creds { gap: var(--f-3) var(--f-4); padding: var(--f-3); }
.f-refresh .f-creds img { height: 64px; }
}
/* --------------------------------------------------------------------------
9. Testimonials
-------------------------------------------------------------------------- */
.f-refresh .testimonials-section { padding-block: var(--f-section); }
.f-refresh .carousel-overflow { min-height: 210px; }
.f-refresh .testimonial-quote {
font-size: var(--f-step-1);
line-height: 1.6;
font-style: normal;
color: #fff;
max-width: 62ch;
margin-inline: auto;
}
.f-refresh .testimonial-author {
margin-top: var(--f-3);
color: var(--f-orange);
font-size: var(--f-step-0);
}
.f-refresh .testimonial-role {
color: var(--f-on-dark-dim);
font-size: var(--f-step--1);
letter-spacing: .04em;
}
@media (max-width: 760px) { .f-refresh .carousel-overflow { min-height: 300px; } }
/* --------------------------------------------------------------------------
10. Contact band
-------------------------------------------------------------------------- */
.f-refresh .section.contact {
background-image:
linear-gradient(105deg, rgba(9, 13, 30, .95) 0%, rgba(9, 13, 30, .78) 50%, rgba(9, 13, 30, .55) 100%),
url('../images/Sydney-small.jpg');
background-position: 0 0, 50% 50%;
background-size: auto, cover;
padding-block: var(--f-section);
}
.f-refresh .f-contact-panel { max-width: var(--f-container); margin-inline: auto; padding-inline: var(--f-gutter); }
.f-refresh .f-contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--f-5);
align-items: start;
}
.f-refresh .f-contact-grid h2 { color: #fff; text-align: left; }
.f-refresh .f-contact-grid h2::after { margin-inline: 0; }
.f-refresh .f-contact-intro {
color: var(--f-on-dark);
max-width: 42ch;
margin: 0 0 var(--f-4);
}
.f-refresh .contact-items { padding: 0; }
.f-refresh .contact-item {
font-size: var(--f-step-0);
padding: 10px 0;
color: var(--f-on-dark);
align-items: flex-start;
}
.f-refresh .contact-item svg { margin-top: 3px; }
.f-refresh .contact-item a { color: #fff; text-decoration-color: rgba(255,255,255,.4); }
.f-refresh .contact-item a:hover { text-decoration-color: var(--f-orange); }
@media (max-width: 860px) {
.f-refresh .f-contact-grid { grid-template-columns: 1fr; gap: var(--f-4); }
}
/* --------------------------------------------------------------------------
11. Footer — fills the empty left column with a brand block
-------------------------------------------------------------------------- */
.f-refresh .footer-dark { background: var(--f-surface-alt); padding-top: var(--f-6); }
.f-refresh .container-11 { max-width: var(--f-container); padding-inline: var(--f-gutter); }
.f-refresh .footer-wrapper { max-width: none; }
.f-refresh .footer-content {
grid-template-columns: 1.6fr 1fr 1fr 1fr;
column-gap: var(--f-5);
row-gap: var(--f-4);
justify-content: start;
text-align: left;
width: 100%;
}
.f-refresh .f-footer-mark {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: var(--f-2);
}
.f-refresh .f-footer-mark img { height: 40px; width: 40px; }
.f-refresh .f-footer-mark span {
font-size: var(--f-step-1);
font-weight: 700;
color: var(--f-navy);
letter-spacing: var(--f-track-display);
}
.f-refresh .f-footer-contact { font-weight: 600; color: var(--f-navy); }
.f-refresh .f-footer-brand p {
font-size: var(--f-step--1);
color: var(--f-muted);
max-width: 30ch;
margin: 0 0 var(--f-2);
line-height: 1.6;
}
.f-refresh .title-small { color: var(--f-navy); letter-spacing: var(--f-track-micro); }
.f-refresh .footer-link { color: var(--f-body); font-size: var(--f-step--1); padding: 5px 0; }
.f-refresh .footer-link:hover { color: var(--f-orange); }
.f-refresh .footer-divider { margin-top: var(--f-5); background: var(--f-line); }
.f-refresh .footer-copyright-center { color: var(--f-muted); font-size: var(--f-step--1); }
@media (max-width: 860px) {
.f-refresh .footer-content { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
.f-refresh .footer-content { grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
12. Consulting page
-------------------------------------------------------------------------- */
.f-refresh .section.hero-heading.services {
min-height: 340px;
display: flex;
align-items: center;
padding-block: var(--f-6);
background-image: var(--f-scrim), url('../images/Screen-3.png');
background-position: 0 0, 50% 50%;
background-size: auto, cover;
}
/* Each service page keeps its own hero photograph — only the overlay is
restyled. The rule above ties on specificity with fortian.css's
`.section.hero-heading.services.X` rules and wins on source order, so every
page's image has to be restated here or they all collapse onto Screen-3.png.
Adding a new service page means adding its line below. */
.f-refresh .section.hero-heading.services.consulting {
background-image: var(--f-scrim), url('../images/Screen-3.png');
background-position: 0 0, 50% 50%;
background-size: auto, cover;
}
.f-refresh .section.hero-heading.services.strategy {
background-image: var(--f-scrim), url('../images/Security-Strategy.png');
background-position: 0 0, 50% 30%;
background-size: auto, cover;
}
.f-refresh .section.hero-heading.services.engineering {
background-image: var(--f-scrim), url('../images/Engineering.png');
background-position: 0 0, 50% 50%;
background-size: auto, cover;
}
.f-refresh .section.hero-heading.services.privacy {
background-image: var(--f-scrim), url('../images/Privacy.png');
background-position: 0 0, 50% 50%;
background-size: auto, cover;
}
.f-refresh .section.hero-heading.services.grc {
background-image: var(--f-scrim), url('../images/GRC.png');
background-position: 0 0, 50% 35%;
background-size: auto, cover;
}
.f-refresh .section.hero-heading.services.assurance {
background-image: var(--f-scrim), url('../images/Security-monitoring.png');
background-position: 0 0, 50% 50%;
background-size: auto, cover;
}
.f-refresh .section.hero-heading.services.forensics {
background-image: var(--f-scrim), url('../images/Forensics.png');
background-position: 0 0, 50% 50%;
background-size: auto, cover;
}
/* The SOC analyst sits in the right third of the frame and is the point of
the picture, so this one takes the open scrim. */
.f-refresh .section.hero-heading.services.mss {
background-image: var(--f-scrim-open), url('../images/MSS-picture.png');
background-position: 0 0, 50% 35%;
background-size: auto, cover;
}
/* The five managed-service detail pages sit under .mss, so the rule above
would otherwise reach them as well. */
.f-refresh .section.hero-heading.services.mss.monitoring {
background-image: var(--f-scrim), url('../images/Security-monitoring.png');
background-position: 0 0, 50% 50%;
background-size: auto, cover;
}
.f-refresh .section.hero-heading.services.mss.incident-response {
background-image: var(--f-scrim), url('../images/Incident-Response.png');
background-position: 0 0, 50% 50%;
background-size: auto, cover;
}
.f-refresh .section.hero-heading.services.mss.threat-hunting {
background-image: var(--f-scrim), url('../images/Threat-hunts.png');
background-position: 0 0, 50% 50%;
background-size: auto, cover;
}
.f-refresh .section.hero-heading.services.mss.vuln-mgmt {
background-image: var(--f-scrim), url('../images/Yellow-Lock.png');
background-position: 0 0, 50% 50%;
background-size: auto, cover;
}
.f-refresh .section.hero-heading.services.mss.threat-intel {
background-image: var(--f-scrim), url('../images/Cyber-world.png');
background-position: 0 0, 50% 50%;
background-size: auto, cover;
}
.f-refresh .f-page-hero { max-width: var(--f-container); margin-inline: auto; padding-inline: var(--f-gutter); width: 100%; }
.f-refresh .f-breadcrumb {
font-size: var(--f-step--1);
color: var(--f-on-dark-dim);
letter-spacing: .04em;
margin-bottom: var(--f-2);
}
.f-refresh .f-breadcrumb a { color: var(--f-on-dark-dim); text-decoration: none; }
.f-refresh .f-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.f-refresh .f-page-hero h1 {
font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
line-height: 1.08;
color: #fff;
margin: 0 0 var(--f-2);
padding: 0;
text-align: left;
letter-spacing: var(--f-track-display);
}
.f-refresh .f-page-hero p {
font-size: var(--f-step-1);
color: var(--f-on-dark);
max-width: 58ch;
margin: 0;
}
/* Vision block: one measure, was a 1200px heading over a full-bleed paragraph */
.f-refresh .f-prose {
max-width: var(--f-prose);
margin-inline: auto;
text-align: center;
}
.f-refresh .f-prose p { margin: 0 0 var(--f-3); }
.f-refresh .f-prose p:last-child { margin-bottom: 0; }
/* Service cards: body copy 14px → 17px, matching .container-21 on the
detail pages these cards link to. */
.f-refresh .f-card .services-text-1 {
font-size: var(--f-step-0);
line-height: 1.7;
color: var(--f-body);
margin: 0 0 var(--f-2);
padding: 0;
}
.f-refresh .f-card .services-list { margin: 0 0 var(--f-2); }
.f-refresh .f-card .services-list li { font-size: var(--f-step-0); color: var(--f-body); }
.f-refresh .f-card .services-list li::before { top: 15px; }
/* Was: subgrid reserved a 4th track for a "Read More" these cards never had,
leaving 100–200px of dead space in the shorter ones. Every card now has a
read-more, and grid stretch + `margin-top:auto` on the link pins it to the
bottom — so heights match without subgrid and the dead space is gone. */
.f-refresh .div-block-21 { grid-template-columns: repeat(3, 1fr); gap: var(--f-4); }
.f-refresh .div-block-21 .f-card { grid-row: auto; display: flex; }
@media (max-width: 1100px) { .f-refresh .div-block-21 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .f-refresh .div-block-21 { grid-template-columns: 1fr; } }
/* Proof band */
.f-refresh .f-proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--f-4); }
.f-refresh .f-quote {
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .12);
border-left: 3px solid var(--f-orange);
border-radius: var(--f-radius);
padding: var(--f-4);
}
.f-refresh .f-quote blockquote {
margin: 0 0 var(--f-3);
padding: 0;
border: 0;
font-size: var(--f-step-0);
line-height: 1.7;
color: var(--f-on-dark);
}
.f-refresh .f-quote cite {
font-style: normal;
display: block;
color: var(--f-orange);
font-weight: 600;
font-size: var(--f-step--1);
}
.f-refresh .f-quote cite span { display: block; color: var(--f-on-dark-dim); font-weight: 400; }
@media (max-width: 760px) { .f-refresh .f-proof-grid { grid-template-columns: 1fr; } }
/* CTA panel */
.f-refresh .section-8 { background: var(--f-surface-alt); padding-block: var(--f-section); }
.f-refresh .f-cta-panel {
max-width: 960px;
margin-inline: auto;
background: linear-gradient(150deg, var(--f-navy) 0%, var(--f-navy-deep) 100%);
border-radius: var(--f-radius);
padding: var(--f-6) var(--f-5);
text-align: center;
}
.f-refresh .f-cta-panel .f-eyebrow {
display: block;
font-size: var(--f-step--1);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--f-track-micro);
color: var(--f-orange);
margin-bottom: var(--f-2);
}
.f-refresh .f-cta-panel h2 {
color: #fff;
font-size: var(--f-step-3);
line-height: 1.15;
margin: 0 0 var(--f-2);
padding: 0;
}
.f-refresh .f-cta-panel p {
color: var(--f-on-dark);
max-width: 56ch;
margin: 0 auto var(--f-5);
}
.f-refresh .f-cta-actions { display: flex; flex-wrap: wrap; gap: var(--f-2); justify-content: center; }
@media (max-width: 600px) { .f-refresh .f-cta-panel { padding: var(--f-5) var(--f-3); } }
/* --------------------------------------------------------------------------
13. Why Fortian grid
-------------------------------------------------------------------------- */
.f-refresh .why-fortian-section { background: var(--f-surface); padding-block: var(--f-section); }
.f-refresh .why-fortian-inner { max-width: var(--f-container); padding-inline: var(--f-gutter); }
.f-refresh .why-grid { gap: var(--f-3); margin-bottom: var(--f-5); }
.f-refresh .why-grid-item {
background: var(--f-surface-alt);
border: 1px solid var(--f-line);
border-radius: var(--f-radius);
box-shadow: none;
padding: var(--f-4) var(--f-3);
}
.f-refresh .why-grid-item:hover {
transform: translateY(-4px);
box-shadow: var(--f-shadow-lift);
background: var(--f-surface);
}
.f-refresh .why-grid-item h3 { font-size: var(--f-step-0); margin-bottom: var(--f-1); }
.f-refresh .why-grid-item p { font-size: var(--f-step--1); color: var(--f-muted); line-height: 1.6; }
/* --------------------------------------------------------------------------
14. Motion
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.f-refresh *,
.f-refresh *::before,
.f-refresh *::after {
animation-duration: .001ms !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.f-refresh .carousel-track { transition: none !important; }
}
/* ==========================================================================
15. Legacy furniture, restyled
--------------------------------------------------------------------------
The remaining ~99 pages share their chrome almost exactly: 95 carry the
same CTA block, 101 the same footer, 14 the same service hero. Rather than
rewrite that markup on every page, the legacy classes are restyled here to
land on the same design system. Markup changes stay limited to things CSS
genuinely cannot do: the body class, the heading levels, and the footer
brand block.
========================================================================== */
/* --- Page heroes ---------------------------------------------------------
Excludes every blog hero: the templates use .blog, .blog1, .blog3 and
.blog-2, hence the attribute match rather than :not(.blog). Those heroes
take their height from `aspect-ratio: 16/3`
so the threat-update banner crops predictably (see CLAUDE.md). Touching
their geometry silently re-crops the artwork on ~72 posts.
Excludes .hero-fullpage: the homepage, handled in section 7.
------------------------------------------------------------------------ */
.f-refresh .section.hero-heading:not([class*="blog"]):not(.hero-fullpage) {
min-height: 300px;
display: flex;
align-items: center;
padding-block: var(--f-6);
}
.f-refresh .section.hero-heading:not([class*="blog"]):not(.hero-fullpage) .container-14,
.f-refresh .section.hero-heading:not([class*="blog"]):not(.hero-fullpage) > .w-container {
max-width: var(--f-container);
width: 100%;
margin-inline: auto;
padding: 0 var(--f-gutter);
text-align: left;
}
.f-refresh .section.hero-heading:not([class*="blog"]) .heading.hero,
.f-refresh .section.hero-heading:not([class*="blog"]) .heading.hero.landing-page {
font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
line-height: 1.08;
letter-spacing: var(--f-track-display);
color: #fff;
text-align: left;
margin: 0;
padding: 0;
max-width: 20ch;
}
/* Blog post heroes keep their centred title and tuned crop; only the type
scale is brought into line. */
.f-refresh .section.hero-heading[class*="blog"] .heading.hero.landing-page {
font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
line-height: 1.15;
letter-spacing: var(--f-track-display);
margin: 0;
}
/* --- The shared CTA block (95 pages) ------------------------------------- */
.f-refresh .section-8 { background: var(--f-surface-alt); padding-block: var(--f-section); }
.f-refresh .container-39 {
background: linear-gradient(150deg, var(--f-navy) 0%, var(--f-navy-deep) 100%);
background-image: linear-gradient(150deg, var(--f-navy) 0%, var(--f-navy-deep) 100%);
border: 0;
border-radius: var(--f-radius);
max-width: 960px;
margin-inline: auto;
padding: var(--f-6) var(--f-5);
text-align: center;
}
/* Every child carried its own padding-left: 40px */
.f-refresh .container-39 > * { padding-left: 0; padding-right: 0; }
.f-refresh .container-39 .text-block-3 {
color: var(--f-orange);
padding: 0;
margin-bottom: var(--f-2);
font-size: var(--f-step--1);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--f-track-micro);
}
.f-refresh .container-39 .bold-text-4 { margin: 0; padding: 0; font-size: inherit; }
.f-refresh .container-39 .heading-9 {
color: #fff;
font-size: var(--f-step-3);
line-height: 1.15;
letter-spacing: var(--f-track-display);
text-align: center;
margin: 0 0 var(--f-2);
padding: 0;
}
.f-refresh .container-39 .paragraph-13 {
color: var(--f-on-dark);
font-size: var(--f-step-0);
line-height: 1.7;
max-width: 56ch;
margin: 0 auto var(--f-5);
padding: 0;
}
.f-refresh .container-39 .button {
margin: 0 6px;
background: var(--f-orange);
background-image: none;
box-shadow: none;
border: 1px solid transparent;
border-radius: var(--f-radius-sm);
padding: 15px 28px;
display: inline-block;
}
.f-refresh .container-39 .button:hover {
background: var(--f-orange-hover);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(241, 99, 57, .3);
}
/* Second action reads as secondary */
.f-refresh .container-39 .button.signup {
background: transparent;
border-color: rgba(255, 255, 255, .45);
}
.f-refresh .container-39 .button.signup:hover {
background: rgba(255, 255, 255, .1);
border-color: #fff;
box-shadow: none;
}
.f-refresh .container-39 .bold-text-5 { font-size: var(--f-step-0); font-weight: 600; }
@media (max-width: 600px) {
.f-refresh .container-39 { padding: var(--f-5) var(--f-3); }
.f-refresh .container-39 .button { display: block; margin: 10px 0 0; }
}
/* --- Footer brand block --------------------------------------------------
The old `.footer-brand` anchor pointed at images/with-circle-horizontal.png,
which does not exist in the repo — the logo was broken on all 6 pages that
used it. Replaced by the mark-plus-wordmark block in section 11.
------------------------------------------------------------------------ */
.f-refresh .footer-brand { display: none; }
/* --- Service detail pages (.container-21, 11 pages) ---------------------- */
.f-refresh .container-21 { max-width: var(--f-container); margin-inline: auto; padding-inline: var(--f-gutter); }
.f-refresh .heading-5 {
color: var(--f-navy);
font-size: var(--f-step-2);
line-height: 1.25;
letter-spacing: var(--f-track-display);
padding-right: var(--f-3);
margin: 0;
}
.f-refresh .services-section { padding-block: var(--f-section); }
.f-refresh .section.services { padding-block: var(--f-section); }
/* --- Long-form body (.case-study-content — 79 blog posts + case studies) -- */
.f-refresh .case-study-content { max-width: 1020px; padding: var(--f-6) var(--f-gutter); }
.f-refresh .case-study-content p { font-size: var(--f-step-0); line-height: 1.75; color: var(--f-body); }
.f-refresh .case-study-content h2 {
font-size: var(--f-step-2);
letter-spacing: var(--f-track-display);
border-bottom-color: var(--f-orange);
}
.f-refresh .case-study-content h3 { font-size: var(--f-step-1); letter-spacing: var(--f-track-display); }
.f-refresh .case-study-content li { font-size: var(--f-step-0); line-height: 1.75; color: var(--f-body); }
/* --- About / careers / team --------------------------------------------- */
.f-refresh .landing-page-heading {
font-size: var(--f-step-3);
line-height: 1.15;
letter-spacing: var(--f-track-display);
padding-inline: 0;
margin-inline: auto;
}
.f-refresh .heading-10, .f-refresh .services-heading {
font-size: var(--f-step-3);
line-height: 1.15;
letter-spacing: var(--f-track-display);
}
.f-refresh .heading-12 { font-size: var(--f-step-2); letter-spacing: var(--f-track-display); }
/* Each management-team member is an independent 3-row grid, so the LinkedIn
cell used to sit wherever that person's bio happened to end. Stretch the
column to the full row height and let the last row absorb the slack, so the
icons line up across all three regardless of bio length. */
.f-refresh .div-block-20 .wf-layout-layout {
height: 100%;
grid-template-rows: auto auto 1fr;
}
.f-refresh .div-block-20 .cell-16 { justify-content: flex-end; }
.f-refresh .section-13, .f-refresh .section-10 { padding-block: var(--f-section); margin-top: 0; }
.f-refresh .section-15 { padding-block: var(--f-section); }
/* --- Contact page -------------------------------------------------------- */
.f-refresh .section.contact._2 {
background-image:
linear-gradient(105deg, rgba(9, 13, 30, .94) 0%, rgba(9, 13, 30, .78) 55%, rgba(9, 13, 30, .55) 100%),
url('../images/Melbourne-small.jpg');
background-position: 0 0, 50% 50%;
background-size: auto, cover;
padding-block: var(--f-5) var(--f-6);
}
.f-refresh .heading-4 {
font-size: var(--f-step-3);
line-height: 1.15;
letter-spacing: var(--f-track-display);
padding-left: 0;
}
/* Semantic page title for a hero whose artwork carries the title graphically
(blog/infoexchange-2026.html), so the page still has exactly one . */
.f-visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* --------------------------------------------------------------------------
16. Contrast fixes
All three were failing WCAG AA on master too — found by a contrast sweep
over all 101 pages, not introduced here.
-------------------------------------------------------------------------- */
/* A classless has no background, so fortian.css's
`body { background-color: #1a1a2e }` showed through and the dark body text
sat on dark navy — 404.html's message rendered at 1.5:1, effectively
invisible. */
.f-refresh section:not([class]) { background: var(--f-surface); }
/* .services-section carries `color: #fff` with no background of its own, so
its intro copy was white on the dark body while the one link inside it fell
back to default browser blue — 1.8:1. Make the band explicitly light and
let the copy read as a lead paragraph. */
.f-refresh .services-section {
background: var(--f-surface);
color: var(--f-body);
}
.f-refresh .services-tagline {
font-size: var(--f-step-1);
line-height: 1.6;
color: var(--f-body);
max-width: var(--f-prose);
margin-inline: auto;
text-align: center;
}
.f-refresh .services-tagline strong { color: var(--f-navy); }
.f-refresh .services-tagline a { color: var(--f-orange-hover); font-weight: 600; }
/* #888 on white is 3.5:1; the token grey is 4.8:1 */
.f-refresh .case-study-breadcrumb { color: var(--f-muted); }
.f-refresh .insight-card-date { color: var(--f-muted); }
/* about-us (the only page using either class): .section-10 / .section-13 carry
`color: #fff` with no background, so the dark band was the body showing
through by accident. Both are now white panels like the rest of the site's
body content, which means every inherited white text colour — including the
stray #7eb8e0 light blue, the only place on the site that colour appears —
has to be reset. A hairline separates the two, since they are otherwise the
same surface. */
.f-refresh .section-10,
.f-refresh .section-13 {
background: var(--f-surface);
color: var(--f-body);
}
/* fortian.css insets .section-13 by 20px below 768px, which was invisible
against the navy panel but leaves dark bars of body background either side
of a white one. */
.f-refresh .section-13 { margin-inline: 0; }
.f-refresh .section-10 { border-top: 1px solid var(--f-line); }
.f-refresh .section-10 .landing-page-heading,
.f-refresh .section-13 .landing-page-heading,
.f-refresh .section-10 .heading-12 { color: var(--f-navy); }
.f-refresh .section-10 p,
.f-refresh .section-13 .paragraph-28 { color: var(--f-body); }
.f-refresh .section-10 p strong { color: var(--f-ink); }
/* Long-form posts overflow horizontally on mobile — pre-existing, caused by
wide tables, code blocks, images and unbreakable strings. The larger body
type makes it marginally worse, so contain it properly: wide blocks scroll
inside their own box instead of pushing the page sideways. */
/* `anywhere` rather than `break-word`: it also affects min-content sizing,
which is what actually stops a long hash or URL widening a grid track. */
.f-refresh .case-study-content { overflow-wrap: anywhere; }
.f-refresh .case-study-content img { max-width: 100%; height: auto; }
.f-refresh .case-study-content pre,
.f-refresh .case-study-content table {
display: block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.f-refresh .case-study-content pre { white-space: pre; }
/* IOC / indicator tables are 3-column grids holding hashes, URLs and IPs —
unbreakable strings that force the page sideways on mobile. */
.f-refresh .div-block-25 { overflow-wrap: anywhere; }
@media (max-width: 760px) {
.f-refresh .div-block-25 { grid-template-columns: 1fr; }
}
/* ==========================================================================
17. Card interaction — ONE highlight for every clickable card
--------------------------------------------------------------------------
The site had drifted into three different hover treatments:
.f-card 1px border warming to orange (home, consulting)
.modern-card a 4px solid orange LEFT border (24x7 managed security)
.insight-card
.case-study-card no highlight at all (insights, case studies)
They are now one: lift 4px, deepen the shadow, warm the whole border to
orange. The card is the target, so the highlight belongs to the whole card
rather than one edge of it.
>> Adding a new clickable card? Add its class to these two selector lists
>> rather than writing a fresh hover rule. Do not reintroduce a per-edge
>> border highlight.
========================================================================== */
.f-refresh .f-card,
.f-refresh .modern-card,
.f-refresh .insight-card,
.f-refresh .case-study-card {
border: 1px solid var(--f-line);
border-radius: var(--f-radius);
/* `opacity` is listed because .insight-card / [data-reveal] fade in on
scroll; omitting it here would snap that reveal. */
transition: opacity .6s ease,
transform .3s var(--f-ease),
box-shadow .3s var(--f-ease),
border-color .3s var(--f-ease);
}
.f-refresh a.f-card:hover,
.f-refresh a.f-card:focus-visible,
.f-refresh .services-container.modern-card:hover,
.f-refresh .modern-card:hover,
.f-refresh .modern-card:focus-visible,
.f-refresh .insight-card:hover,
.f-refresh .insight-card:focus-visible,
.f-refresh .case-study-card:hover,
.f-refresh .case-study-card:focus-visible {
transform: translateY(-4px);
box-shadow: var(--f-shadow-lift);
border-color: rgba(241, 99, 57, .35);
/* beat `.services-container.modern-card:hover { border-radius: 8px }` */
border-radius: var(--f-radius);
}
/* The old left-edge highlight, explicitly cleared */
.f-refresh .modern-card,
.f-refresh .services-container.modern-card:hover {
border-left-width: 1px;
border-left-color: var(--f-line);
}
.f-refresh .services-container.modern-card:hover,
.f-refresh .modern-card:hover { border-left-color: rgba(241, 99, 57, .35); }
@media (prefers-reduced-motion: reduce) {
.f-refresh .f-card:hover,
.f-refresh .modern-card:hover,
.f-refresh .insight-card:hover,
.f-refresh .case-study-card:hover { transform: none; }
}
/* --------------------------------------------------------------------------
18. Page hero: breadcrumb + subtitle in the legacy hero markup
The consulting page uses the newer .f-page-hero wrapper; every other page
still has `.container-14 > h1.heading.hero.landing-page`. These give that
markup the same breadcrumb-title-subtitle stack.
-------------------------------------------------------------------------- */
.f-refresh .section.hero-heading:not([class*="blog"]) .container-14 > .f-breadcrumb {
margin-bottom: var(--f-2);
}
.f-refresh .f-page-sub {
font-size: var(--f-step-1);
line-height: 1.55;
color: var(--f-on-dark);
max-width: 58ch;
margin: var(--f-2) 0 0;
padding: 0;
text-align: left;
}
/* contact-us has no hero section; its breadcrumb sits at the top of the
dark contact panel instead. */
.f-refresh .contact-page-wrapper > .f-breadcrumb { margin-bottom: var(--f-3); }
/* The hero's secondary CTA jumps to the Our Services section on the same
page. scroll-margin-top clears the sticky header so the heading isn't
left underneath it; the reduced-motion block above resets scroll-behavior. */
.f-refresh { scroll-behavior: smooth; }
.f-refresh #services { scroll-margin-top: 84px; }