/*
Theme Name: Efficient IS
Theme URI: https://www.efficient-is.co.uk
Author: Efficient IS
Author URI: https://www.efficient-is.co.uk
Description: Custom WordPress theme for Efficient IS (Irruptus Limited) — AV & IT infrastructure design, build and support across Scotland and the UK. WooCommerce-ready.
Version: 1.1
Requires PHP: 7.4
Text Domain: efficient-is
*/
/* ============================================================
EFFICIENT IS — Design System
Signature idea: the "signal bar" — the segmented level-meter
you see on any AV rack or mixing desk. Used as a structural
device throughout (dividers, coverage map, nav marker) because
it's literally how this industry shows something is live and
working. Not decoration — it's the brief's own vocabulary.
Palette v2 — moved off navy/amber ("black and orange") toward a
near-black base with a refined indigo-violet primary accent and
a vivid aqua-teal secondary, closer to how current premium AI/
tech brands actually read (near-black rather than corporate navy;
violet/coral energy rather than safety-amber). Every existing
class name and custom property kept identical — only the values
changed, so nothing downstream needed touching.
============================================================ */
/* Font loading moved to + in
(see partials.py FONT_LINKS) — faster than @import, which blocks
CSS parsing until the imported file has fetched. */
:root{
/* Colour */
--ink: #0A0B10; /* primary dark ground — near-black, not navy */
--ink-2: #14161F; /* raised dark surface */
--ink-3: #1E212E; /* hover / border on dark */
--paper: #F8F8FA; /* primary light ground — crisp, slightly cool */
--paper-2: #EFEFF3; /* raised light surface */
--text: #1B1E29;
--text-muted: #5B6072;
--text-on-dark: #E9E9F1;
--text-on-dark-muted: #92939E;
--line: rgba(13,14,19,0.09);
--line-dark: rgba(233,233,241,0.12);
--signal: #7C6FF0; /* indigo-violet — project / consultative motion */
--signal-ink: #4A3FA8;
--teal: #22D3B8; /* vivid aqua-teal — transactional / shop motion */
--teal-ink: #0C6D5E;
--danger: #E0587A;
/* Type */
--display: 'Space Grotesk', sans-serif;
--body: 'IBM Plex Sans', sans-serif;
--mono: 'IBM Plex Mono', monospace;
/* Layout */
--maxw: 1200px;
--edge: clamp(20px, 4vw, 64px);
/* Radius scale — the single biggest lever for a premium feel.
Was a near-sharp 3px everywhere; now a real, considered scale. */
--radius-sm: 10px;
--radius: 16px;
--radius-lg: 24px;
--radius-full: 999px;
/* Depth — soft, diffused shadows rather than hard borders.
Nothing in the previous system used a shadow at all. */
--shadow-sm: 0 1px 2px rgba(10,11,16,.04), 0 2px 8px rgba(10,11,16,.05);
--shadow-md: 0 4px 16px rgba(10,11,16,.07), 0 1px 3px rgba(10,11,16,.05);
--shadow-lg: 0 12px 40px rgba(10,11,16,.12), 0 2px 8px rgba(10,11,16,.06);
--shadow-glow: 0 8px 30px rgba(124,111,240,.28);
/* Motion — a considered easing curve instead of linear/ease,
used consistently so every interaction feels like the same hand. */
--ease: cubic-bezier(.16,1,.3,1);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
margin:0;
font-family:var(--body);
color:var(--text);
background:var(--paper);
line-height:1.6;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{
font-family:var(--display);
margin:0 0 .4em;
line-height:1.06;
letter-spacing:-0.02em;
font-weight:600;
}
h1{ letter-spacing:-0.03em; }
p{ margin:0 0 1em; color:var(--text-muted); max-width:62ch; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:3px solid var(--signal); outline-offset:3px; border-radius:4px; }
.wrap{ max-width:var(--maxw); margin:0 inline; margin-left:auto; margin-right:auto; padding-left:var(--edge); padding-right:var(--edge); }
/* ---------- Reveal-on-scroll — the one small addition that makes a
static page feel considered rather than dumped on screen. Applies
automatically to existing structural classes via JS (see
reveal.js-equivalent inline script in partials), no per-page markup
needed. Respects reduced-motion. ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
.reveal{ opacity:1; transform:none; transition:none; }
}
/* ---------- Signal bar signature ---------- */
.signal{
display:inline-flex; align-items:flex-end; gap:3px; height:14px;
}
.signal i{
display:block; width:3px; background:var(--signal); border-radius:2px;
animation:signal-pulse 1.6s ease-in-out infinite;
}
.signal i:nth-child(1){ height:40%; animation-delay:0s; }
.signal i:nth-child(2){ height:100%; animation-delay:.18s; }
.signal i:nth-child(3){ height:65%; animation-delay:.36s; }
.signal i:nth-child(4){ height:85%; animation-delay:.54s; }
.signal i:nth-child(5){ height:50%; animation-delay:.72s; }
@keyframes signal-pulse{
0%,100%{ transform:scaleY(.55); opacity:.55; }
50%{ transform:scaleY(1); opacity:1; }
}
@media (prefers-reduced-motion:reduce){ .signal i{ animation:none; opacity:.85; } }
.rule-signal{
height:6px; display:flex; gap:2px; width:100%; margin:0;
}
.rule-signal i{ flex:1; background:var(--line); border-radius:2px; }
.rule-signal.on i:nth-child(-n+3){ background:var(--signal); }
.rule-signal.teal.on i:nth-child(-n+3){ background:var(--teal); }
/* ---------- Header / nav ---------- */
.site-header{
background:rgba(10,11,16,.78); color:var(--text-on-dark);
position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line-dark);
backdrop-filter:blur(16px) saturate(160%);
-webkit-backdrop-filter:blur(16px) saturate(160%);
transition:background .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-scrolled{ background:rgba(10,11,16,.92); box-shadow:var(--shadow-md); }
.bar-top{ display:flex; align-items:center; justify-content:space-between; padding:22px var(--edge) 18px; max-width:var(--maxw); margin:0 auto; gap:24px; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:14px; font-family:var(--display); font-weight:700; font-size:1.85rem; color:#fff; white-space:nowrap; }
.brand .mark{ width:30px; height:30px; border-radius:9px; background:linear-gradient(155deg,var(--signal),var(--teal)); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:600; color:var(--ink); font-size:.72rem; }
.brand small{ display:block; font-family:var(--body); font-weight:400; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-on-dark-muted); }
.logo-chip{ background:#fff; border-radius:var(--radius-sm); padding:10px 14px; display:inline-flex; align-items:center; line-height:0; box-shadow:var(--shadow-sm); }
.logo-chip img{ display:block; height:56px; width:auto; }
.logo-chip.logo-chip-lg img{ height:50px; }
.bar-top-actions{ display:flex; align-items:center; gap:22px; }
.link-quiet{ font-size:.95rem; font-weight:700; color:#fff; padding:11px 18px; border:1.5px solid var(--line-dark); border-radius:var(--radius-full); transition:border-color .2s var(--ease), background .2s var(--ease); }
.link-quiet:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
.bar-nav{ display:flex; align-items:center; justify-content:space-between; padding:12px var(--edge); max-width:var(--maxw); margin:0 auto; gap:20px; flex-wrap:wrap; border-top:1px solid var(--line-dark); }
nav.primary{ display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
nav.primary a{ font-size:.85rem; color:#C7CAD6; font-weight:600; transition:color .2s var(--ease); position:relative; }
nav.primary a:hover, nav.primary a.active{ color:#fff; }
.phone-link-refined{ font-size:.86rem; font-weight:700; color:var(--danger); white-space:nowrap; transition:color .2s var(--ease); }
.phone-link-refined:hover{ color:#ff8fa3; }
/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--body); font-weight:600; font-size:.88rem; padding:13px 24px; border-radius:var(--radius-full); border:1px solid transparent; cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease); }
.btn:hover{ transform:translateY(-2px); }
.btn-signal{ background:var(--signal); color:#fff; box-shadow:0 1px 2px rgba(10,11,16,.08); }
.btn-call{ background:var(--danger); color:#fff; font-weight:700; box-shadow:0 1px 2px rgba(10,11,16,.08); }
.btn-call:hover{ background:#c73f5f; box-shadow:0 8px 24px rgba(224,88,122,.3); }
.btn-signal:hover{ background:#8F84F3; box-shadow:var(--shadow-glow); }
.btn-teal{ background:var(--teal); color:#04211F; box-shadow:0 1px 2px rgba(10,11,16,.08); }
.btn-teal:hover{ background:#3EE3C9; box-shadow:0 8px 30px rgba(34,211,184,.26); }
.btn-ghost-dark{ border-color:var(--teal); color:#fff; }
.btn-ghost-dark:hover{ border-color:#3EE3C9; background:rgba(34,211,184,.10); }
.btn-ghost-light{ border-color:var(--teal); color:var(--text); }
.btn-ghost-light:hover{ border-color:var(--teal-ink); background:rgba(34,211,184,.06); box-shadow:var(--shadow-sm); }
.hero-inner .btn-ghost-dark, .motion-card:not(.dark) .btn-ghost-dark{ border-color:var(--teal); color:var(--text); }
.hero-inner .btn-ghost-dark:hover, .motion-card:not(.dark) .btn-ghost-dark:hover{ border-color:var(--teal-ink); background:rgba(34,211,184,.06); box-shadow:var(--shadow-sm); }
.btn-sm{ padding:9px 16px; font-size:.78rem; }
/* ---------- Hero ---------- */
.hero{ background:var(--paper); color:var(--text); padding:92px var(--edge) 80px; background-size:cover; background-position:center; transition:background-image .4s var(--ease); position:relative; overflow:hidden; }
.hero::before{
content:''; position:absolute; inset:0; z-index:0;
background:
radial-gradient(ellipse 700px 500px at 15% 20%, rgba(124,111,240,.16), transparent 60%),
radial-gradient(ellipse 600px 500px at 85% 80%, rgba(34,211,184,.14), transparent 60%);
}
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transform:scale(1.02); }
.hero-video-overlay{ position:absolute; inset:0; background:linear-gradient(165deg, rgba(248,248,250,.35) 0%, rgba(248,248,250,.12) 45%, rgba(248,248,250,.4) 100%); z-index:1; }
.hero-inner{
position:relative; z-index:2; max-width:var(--maxw); margin:0 auto;
background: linear-gradient(to right, rgba(255,255,255,.18) 0%, rgba(255,255,255,.12) 42%, rgba(255,255,255,.04) 75%, rgba(255,255,255,0) 100%);
backdrop-filter: blur(44px) saturate(220%); -webkit-backdrop-filter: blur(44px) saturate(220%);
border: 1px solid rgba(14,27,42,.12);
border-radius:var(--radius-lg); padding:48px 52px; box-shadow: 0 24px 60px rgba(14,27,42,.2), 0 2px 8px rgba(14,27,42,.1);
}
@media (max-width:640px){ .hero-inner{ padding:28px 26px; } }
.eyebrow{ font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--signal-ink); display:flex; align-items:center; gap:10px; margin-bottom:20px; }
/* Headline size/reach cut back from clamp(2.6rem,5.4vw,4.6rem) — at a normal
desktop width that set the h1 wrapping onto 4 lines, which made the text
column roughly twice the height of the video next to it. That height
mismatch was the actual root cause of "no video in the first view" (fixed
earlier via align-items) AND of the large empty gap under the video once
you scroll further (the thing that's still being reported). Moving the
buttons around it didn't address that — shrinking the mismatch itself
does: a smaller max size means fewer wrapped lines, so the text column is
meaningfully shorter, and the grid-template-columns/video sizing changes
below make the video meaningfully taller, closing the gap from both
sides at once. */
.hero h1{ font-size:clamp(2.4rem,4.4vw,3.8rem); color:var(--text); max-width:22ch; letter-spacing:-0.03em; }
.hero .lede{ font-size:1.15rem; color:var(--text-muted); max-width:52ch; margin-top:16px; line-height:1.6; }
.hero-ctas{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
/* Columns were 1.1fr .9fr (text got the larger share). Equal 1fr 1fr gives
the video column more physical width, and since it's sized by
aspect-ratio (below), a wider column also means a taller video — helping
close the height gap from the video's side while the h1 change above
closes it from the text's side. */
.hero-split{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
/* The no-video fallback (the state most visitors actually see — the video
only swaps in once it's genuinely loaded playable data) used to leave
#hero-secondary-text as bare text bottom-aligned in the right column,
which read as a large empty gap above a stray paragraph. Giving it the
same glass-card treatment as .hero-inner makes it look like a deliberate
pull-quote instead of leftover space, whether or not the video ever loads.
Scoped to the base (non-video) .hero-split only — the .hero-has-video
override below is untouched. */
#hero-secondary-text{
background: rgba(255,255,255,.45);
border: 1px solid rgba(14,27,42,.1);
border-radius: var(--radius-lg);
padding: 30px 32px;
backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
box-shadow: 0 16px 40px rgba(14,27,42,.1);
}
@media (max-width:900px){ #hero-secondary-text{ margin-top:8px; } }
/* 4:3 → 6:5: a taller ratio renders more height for the same column width,
the other half of closing the gap to the (now-shorter, see .hero h1
above) text column. min-height bumped to match so this doesn't shrink
below a sensible size on a narrower desktop/tablet width either. */
.hero-video-showcase{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); min-height:400px; }
.hero-video-showcase video{ position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; object-fit:cover; display:block; }
.hero.hero-has-video .hero-inner{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border:none; box-shadow:none; padding:0; }
/* This was align-items:end on the assumption that the video showcase
column (min-height:360px, 4:3) is the taller of the two — reported live
as: the video/image doesn't appear at all in the first viewport, and
only shows up lower down looking disconnected from the headline once
you scroll. The actual page disproves that assumption: the h1 at its
current size/max-width wraps onto 3-4 lines on a normal desktop width,
which — plus the eyebrow, lede, bullet list and two CTA buttons above
and below it — makes the TEXT column the taller one by a wide margin.
end bottom-anchors both columns, so with a much taller text column that
pins the video's bottom edge down near the CTA buttons, leaving a large
empty gap above the video where the headline is — exactly "no video in
the first view, oddly placed once you scroll to it". start top-anchors
both columns instead, so the video/image begins right beside the
eyebrow/headline — visible immediately, and reading as a deliberate
paired headline+visual rather than a stray image floating further down
the page.
start still left a large empty gap BELOW the (shorter) video once the
taller text column ran on past it — the video was pinned to its own
fixed aspect-ratio height and then just... stopped, with dead space
under it for the rest of the row. stretch fixes this at the source:
the video column's height becomes "however tall the text column turned
out to be" instead of a fixed ratio, and .hero-video-showcase video's
existing position:absolute + width/height:100% + object-fit:cover (two
rules up) already crops/fills whatever height it's given with no
distortion — so this needs no aspect-ratio on the box at all any more
(removed above) and no future retuning if the copy length changes.
Scoped to hero-has-video only: the no-video fallback keeps
align-items:center on the small #hero-secondary-text pull-quote below,
where stretching it to match a tall text column would look worse, not
better. */
.hero.hero-has-video .hero-split{ align-items:stretch; }
@media (max-width:900px){ .hero-video-showcase{ aspect-ratio:16/10; } }
@media (max-width:900px){ .hero-split{ grid-template-columns:1fr; } }
.pain-list{ margin-top:40px; display:grid; gap:12px; }
.pain-list li{ display:flex; gap:12px; align-items:flex-start; font-size:.94rem; color:var(--text-muted); }
.pain-list li::before{ content:'—'; color:var(--danger); font-weight:700; }
/* ---------- Sections ---------- */
/* Was 88px. Every plain on every page uses this same rule with
no per-section override (the only existing exception is the mobile-only
accreditations trim just below, which shaves an already-tight case down
further) — so two adjacent sections were stacking 88px + 88px = 176px of
flat, empty space at literally every section boundary on the site, on
top of whatever margin/padding the content inside each section already
had (card padding, .section-head's own margin-bottom, a card's "Read
more" link pushed to the bottom of its box). That's what reads as
oversized gaps scrolling through any page, not just the homepage: 64px
+ 64px = 128px between sections is still a clear, deliberate seam
between differently-toned bands, just noticeably tighter — roughly a
27% cut applied everywhere at once, rather than something to chase
section-by-section. */
section{ padding:64px var(--edge); }
/* Was 40px — trimmed by the same proportion so the space above a
section's own heading tightens in step with the section padding above,
instead of the heading suddenly sitting closer to the *previous*
section than to its own content. */
.section-head{ max-width:640px; margin-bottom:32px; }
.section-head .eyebrow{ color:var(--signal-ink); }
.light-on-paper .eyebrow{ color:#B87A00; }
.kicker{ font-family:var(--mono); font-size:.82rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text); }
.two-motion{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; margin-top:0; box-shadow:var(--shadow-md); }
@media (max-width:820px){ .two-motion{ grid-template-columns:1fr; } }
.four-motion{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; margin-top:0; box-shadow:var(--shadow-md); }
@media (max-width:900px){ .four-motion{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .four-motion{ grid-template-columns:1fr; } }
.motion-card{ background:var(--paper); padding:44px; transition:background .25s var(--ease); border-top:3px solid transparent; display:flex; flex-direction:column; }
.motion-card > .btn{ margin-top:auto; align-self:flex-start; }
.four-motion .motion-card{ padding:30px 26px; }
.motion-card.dark{ background:var(--paper-2); color:var(--text); border-top-color:var(--teal); }
.motion-card.signal-tag{ border-top-color:var(--signal); }
.motion-card h3{ font-size:1.5rem; }
.four-motion .motion-card h3{ font-size:1.15rem; }
.motion-card .tag{ display:inline-block; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:var(--radius-full); margin-bottom:16px; }
.motion-card.signal-tag .tag{ background:rgba(124,111,240,.12); color:var(--signal-ink); }
.motion-card.dark .tag{ background:rgba(34,211,184,.14); color:var(--teal-ink); }
.motion-card ul{ margin:18px 0 24px; display:grid; gap:8px; }
.motion-card ul li{ font-size:.9rem; padding-left:18px; position:relative; color:var(--text-muted); }
.motion-card ul li::before{ content:''; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--signal); }
.motion-card.dark ul li::before{ background:var(--teal); }
/* ---------- Grid cards ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid-3,.grid-4{ grid-template-columns:1fr; } }
/* ---------- Planned card-grid rows ----------
Pairs with eis_render_planned_rows() in functions.php. Business rule:
3 cards per row preferred, 4 max, never a single card left stranded
alone in the last row if it can be avoided. The PHP works out, from
the actual card count, how many rows there are and how many cards go
in each (.planned-row-1 through .planned-row-4) — this CSS only lays
out whatever that plan produces, so it always reads as a deliberately
designed grid, never an auto-fit accident, and never needs hand-tuned
percentages again just because a card was added or removed.
Rows of 3 or 4 fill the row edge-to-edge (flex:1 1 0 — the row width
IS exactly right for that many cards, same look as the fixed .grid-3/
.grid-4 above). A paired trailing row (2 cards left over after full
rows of 3) gets a max-width cap so the pair doesn't stretch across the
full row width.
.planned-row-1 is different in kind, not just size: because the
row-planning rule folds any "would-be-1" remainder into a row of 4
instead (see functions.php), a row of exactly 1 card only ever happens
when the WHOLE section has one card — there's no heading or other
content beside it to centre against. Every section-head on this site
(.section-head above) is left-aligned, not centred, so a centred lone
card reads as adrift from it. Left-aligned and wider instead: it reads
as a single deliberate feature continuing the same left edge as the
heading above it, not a shrunken grid cell. */
.planned-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px; margin-bottom:22px; }
.planned-row:last-child{ margin-bottom:0; }
.planned-row > .card{ flex:1 1 0; min-width:0; }
.planned-row-2 > .card{ flex:0 1 340px; }
.planned-row-1{ justify-content:flex-start; }
.planned-row-1 > .card{ flex:0 1 560px; }
@media (max-width:900px){
.planned-row-3 > .card, .planned-row-4 > .card{ flex:1 1 calc(50% - 11px); max-width:calc(50% - 11px); }
}
@media (max-width:560px){
.planned-row > .card{ flex:1 1 100%; max-width:100%; }
}
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease); display:flex; flex-direction:column; }
.card:hover{ border-color:transparent; transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.card .num{ font-family:var(--mono); font-size:.75rem; color:var(--text-muted); }
.card h4{ font-size:1.08rem; margin-top:10px; }
.card p{ font-size:.9rem; margin-bottom:14px; }
.card .go{ font-size:.82rem; font-weight:600; color:var(--text); transition:gap .25s var(--ease); display:inline-flex; margin-top:auto; align-self:flex-start; }
.card:hover .go{ gap:4px; }
/* ---------- Trust strip ---------- */
/* Redesign v2 (icon-card grid). The old version (a stacked list of 4 full-
width text rows) fixed the earlier word-wrapping bug but still read as a
wall of small grey text with no visual hierarchy — the "Brand-agnostic"
fact in particular was just a bare two-word badge tacked onto the end of
an unrelated sentence, with nothing to anchor it. Trust-signal design
guidance (see chat for sources) is consistent: keep a credibility strip
component-based and icon-led rather than paragraph-like, so each fact
reads in under a second. Each item is now its own card: a small line
icon, a short bold heading, and one line of supporting detail — arranged
in a 4-up grid on desktop (divided by hairlines) and a scannable 2x2
grid on mobile, instead of 4 stacked full-bleed rows. */
.trust{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust .wrap{ max-width:var(--maxw); margin:0 auto; padding:28px var(--edge); }
.trust-grid{
display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
}
.trust-card{
display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
padding:12px 18px; border-left:1px solid var(--line);
}
.trust-grid .trust-card:first-child{ border-left:none; }
.trust-icon{
display:flex; align-items:center; justify-content:center;
width:34px; height:34px; border-radius:50%;
background:#fff; border:1.5px solid var(--signal); color:var(--signal-ink);
flex-shrink:0;
}
.trust-icon svg{ width:18px; height:18px; }
.trust-copy{ display:flex; flex-direction:column; gap:3px; }
.trust-copy strong{ font-size:.88rem; font-weight:600; color:var(--text); line-height:1.3; }
.trust-copy span{ font-size:.76rem; line-height:1.45; color:var(--text-muted); }
@media (max-width:900px){
.trust-grid{ grid-template-columns:repeat(2, 1fr); }
.trust-card{ border-left:none; border-top:1px solid var(--line); padding:16px 10px; }
.trust-card:nth-child(1),
.trust-card:nth-child(2){ border-top:none; }
.trust-card:nth-child(odd){ border-right:1px solid var(--line); }
}
@media (max-width:640px){
.trust .wrap{ padding:22px var(--edge); }
.trust-icon{ width:30px; height:30px; }
.trust-icon svg{ width:16px; height:16px; }
.trust-copy strong{ font-size:.84rem; }
.trust-copy span{ font-size:.73rem; }
}
.badge{ font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; background:#fff; color:var(--signal-ink); border:1.5px solid var(--signal); padding:5px 10px; border-radius:var(--radius-full); }
/* ---------- Coverage / locations map strip ---------- */
.coverage{ background:var(--paper-2); color:var(--text); }
.coverage-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border-radius:var(--radius-lg); overflow:hidden; margin-top:32px; border:1px solid var(--line); }
.coverage-cell{ background:#fff; padding:22px; transition:background .25s var(--ease); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.coverage-cell .signal i{ height:10px !important; }
.coverage-cell h4{ font-size:1rem; margin-top:12px; color:var(--text); }
.coverage-cell span{ font-size:.76rem; color:var(--text-muted); font-family:var(--mono); }
/* ---------- Photo gallery block (eis_photo_gallery shortcode) ---------- */
.photo-gallery{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }
.photo-gallery figure{ margin:0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); background:#fff; }
.photo-gallery img{ width:100%; height:240px; object-fit:cover; display:block; }
.photo-gallery figcaption{ padding:12px 16px; font-size:.82rem; line-height:1.4; color:var(--text-muted); }
@media (max-width:640px){
.photo-gallery{ grid-template-columns:1fr; }
.photo-gallery img{ height:200px; }
}
.coverage-cell:hover{ background:var(--paper); }
/* ---------- Case studies ---------- */
.case{ display:grid; grid-template-columns:.9fr 1.1fr; gap:0; border:1px solid var(--line); background:#fff; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
@media (max-width:820px){ .case{ grid-template-columns:1fr; } }
.case-media{ background:var(--paper-2); color:var(--text); padding:38px; display:flex; flex-direction:column; border-right:1px solid var(--line); }
.case-media > .btn{ margin-top:auto; align-self:flex-start; }
@media (max-width:820px){ .case-media{ border-right:none; border-bottom:1px solid var(--line); } }
.case-media .stat{ font-family:var(--display); font-size:2.6rem; color:var(--signal-ink); letter-spacing:-0.03em; }
.case-body{ padding:38px; display:flex; flex-direction:column; }
.case-body .btn{ margin-top:auto; align-self:flex-start; }
.case-body .client{ font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
/* ---------- FAQ ---------- */
.faq-item{ border-top:1px solid var(--line); padding:22px 0; }
.faq-item h4{ font-size:1rem; font-family:var(--body); font-weight:600; }
.faq-item p{ margin-top:8px; font-size:.92rem; }
/* ---------- Pricing table ---------- */
.price-table{ width:100%; border-collapse:separate; border-spacing:0; margin-top:20px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.price-table th,.price-table td{ text-align:left; padding:15px 16px; border-bottom:1px solid var(--line); font-size:.9rem; }
.price-table th{ font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); background:var(--paper-2); }
.price-table tr:last-child td{ border-bottom:none; }
.price-table td.price{ font-family:var(--mono); font-weight:600; }
/* ---------- Shop / product grid ---------- */
.shop-layout{ display:grid; grid-template-columns:220px 1fr; gap:34px; }
@media (max-width:820px){ .shop-layout{ grid-template-columns:1fr; } }
.filters h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; font-family:var(--mono); color:var(--text-muted); margin:20px 0 10px; }
.filters h4:first-child{ margin-top:0; }
.filters label{ display:flex; align-items:center; gap:8px; font-size:.86rem; padding:5px 0; color:var(--text-muted); }
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .product-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .product-grid{ grid-template-columns:1fr; } }
.product{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .3s var(--ease), transform .3s var(--ease); }
.product:hover{ box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.product .thumb{ aspect-ratio:4/3; background:linear-gradient(135deg,var(--paper-2),#fff); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line); }
.product .body{ padding:18px; display:flex; flex-direction:column; }
.product .body .btn{ margin-top:auto; align-self:flex-start; }
.product .cat{ font-family:var(--mono); font-size:.68rem; text-transform:uppercase; color:var(--teal-ink); letter-spacing:.05em; }
.product h4{ font-size:.94rem; margin:6px 0; }
.product .from{ font-family:var(--mono); font-size:.7rem; color:var(--text-muted); }
.product .price{ font-family:var(--mono); font-weight:600; font-size:1.05rem; margin-top:2px; }
.po-badge{ display:inline-flex; align-items:center; gap:6px; font-size:.72rem; color:var(--teal-ink); margin-top:8px; font-weight:500; }
/* ---------- Footer ---------- */
footer{ background:var(--ink); color:var(--text-on-dark-muted); padding:64px var(--edge) 28px; }
.footer-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.4fr repeat(5,1fr); gap:28px; }
@media (max-width:1100px){ .footer-grid{ grid-template-columns:1.4fr repeat(3,1fr); } }
@media (max-width:900px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } }
.footer-grid h5{ font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:#fff; margin-bottom:16px; }
.footer-grid ul{ display:grid; gap:9px; }
.footer-grid a{ font-size:.86rem; color:var(--text-on-dark-muted); transition:color .2s var(--ease); }
.footer-grid a:hover{ color:#fff; }
.footer-bottom{ max-width:var(--maxw); margin:44px auto 0; padding-top:22px; border-top:1px solid var(--line-dark); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.76rem; }
/* ---------- Location page specific ---------- */
.loc-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
@media (max-width:700px){ .loc-stats{ grid-template-columns:repeat(2,1fr); } }
.loc-stat{ background:#fff; padding:24px; transition:background .25s var(--ease); }
.loc-stat:hover{ background:var(--paper-2); }
.loc-stat .n{ font-family:var(--display); font-size:1.9rem; letter-spacing:-0.02em; }
.loc-stat span{ font-size:.78rem; color:var(--text-muted); }
.breadcrumb{ font-family:var(--mono); font-size:.74rem; color:var(--text-muted); padding:16px var(--edge) 0; max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.last-updated{ color:var(--text-muted); opacity:.8; }
.breadcrumb a{ color:var(--text-muted); transition:color .2s var(--ease); } .breadcrumb a:hover{ color:var(--text); }
.cta-band{ background:var(--signal); color:#fff; text-align:left; }
.cta-band .wrap{ max-width:var(--maxw); margin:0 auto; padding:48px var(--edge); display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.cta-band h3{ font-size:1.5rem; }
/* ---------- Survey modal (in-page lightbox, no tab navigation away) ---------- */
.survey-modal-overlay{ position:fixed; inset:0; z-index:200; background:rgba(10,11,16,.55); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .25s var(--ease); }
.survey-modal-overlay.is-open{ display:flex; opacity:1; }
.survey-modal{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; max-width:640px; height:min(720px, 88vh); position:relative; overflow:hidden; transform:translateY(12px); transition:transform .25s var(--ease); }
.survey-modal-overlay.is-open .survey-modal{ transform:translateY(0); }
.survey-modal iframe{ width:100%; height:100%; border:0; }
.survey-modal-close{ position:absolute; top:12px; right:12px; z-index:2; width:36px; height:36px; border-radius:50%; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); font-size:1.1rem; line-height:1; cursor:pointer; color:var(--text); }
.survey-modal-close:hover{ background:var(--paper-2); }
/* Header cart icon */
.cart-link {
position: relative;
display: inline-flex;
align-items: center;
text-decoration: none;
font-size: 1.3rem;
line-height: 1;
}
.cart-count {
position: absolute;
top: -8px;
right: -10px;
background: var(--signal, #7B61FF);
color: #fff;
font-size: 0.65rem;
font-weight: 700;
min-width: 16px;
height: 16px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 3px;
}
.cart-count[data-count="0"] {
display: none;
}
nav.primary{ position:relative; }
nav.primary ul.primary-menu{ display:flex; gap:24px; align-items:center; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
nav.primary ul.primary-menu > li{ position:relative; }
nav.primary ul.primary-menu > li > a{ font-size:.85rem; color:#C7CAD6; font-weight:600; display:inline-flex; align-items:center; gap:4px; transition:color .2s var(--ease); }
nav.primary ul.primary-menu > li > a:hover, nav.primary ul.primary-menu > li > a.active{ color:#fff; }
nav.primary li.menu-item-has-children > a::after{ content:"⌄"; font-size:.75em; opacity:.65; transition:transform .18s var(--ease); }
nav.primary li.menu-item-has-children:hover > a::after{ transform:rotate(180deg); }
nav.primary .sub-menu{ list-style:none; margin:0; padding:10px 0; position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px); min-width:240px; background:#12131c; border:1px solid var(--line-dark); border-radius:10px; box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; z-index:60; }
nav.primary li.menu-item-has-children:hover > .sub-menu, nav.primary li.menu-item-has-children:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
nav.primary .sub-menu a{ display:block; padding:9px 20px; font-size:.82rem; font-weight:500; color:#C7CAD6; white-space:nowrap; }
nav.primary .sub-menu a:hover{ color:#fff; background:rgba(255,255,255,.06); }
/* Blog pagination - horizontal layout */
.woocommerce-pagination ul.page-numbers {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
list-style: none;
margin: 24px 0 0;
padding: 0;
}
.woocommerce-pagination ul.page-numbers li {
display: inline-block;
}
.woocommerce-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 12px;
border-radius: var(--radius-sm, 8px);
text-decoration: none;
border: 1px solid rgba(0,0,0,0.12);
}
.woocommerce-pagination .page-numbers.current {
background: #111;
color: #fff;
border-color: #111;
}
.woocommerce-pagination .page-numbers.dots {
border: none;
}
/* ===== Hero layout + imagery legibility fixes ===== */
.hero-split:has(> div:only-child){
grid-template-columns: minmax(0, 760px);
width: fit-content;
max-width: 100%;
}
.hero-split:has(> div:only-child) > div{
max-width: 760px;
}
/* Secondary hero text (the paragraph under the H1, and the small eyebrow
label) needs real contrast to read crisply — a big bold H1 can survive
on a very transparent panel, but smaller/thinner text can't. Darken it
to var(--ink) and give it a touch more weight instead of leaning on a
heavy text-shadow, which just blurred it against busy photos. */
.hero-inner .lede,
.hero-inner .eyebrow{
color: var(--ink);
font-weight: 600;
}
.hero-inner h1{
text-shadow: 0 1px 2px rgba(255,255,255,.5);
}
/* ============================================================
MOBILE UX PASS — sitewide phone-number colour, collapsible
mobile nav, hero-to-trust-strip spacing.
============================================================ */
/* Every phone number link, sitewide, matches the header's red
(.phone-link-refined). Excludes .btn (e.g. .btn-call already has its own
red-background/white-text treatment — this would make its text
invisible against its own background) and anywhere a phone link already
carries its own inline colour (e.g. inside a coloured band like
.cta-band, where white text is needed for contrast) — an inline style
always wins over this rule regardless, so those stay exactly as set. */
a[href^="tel:"]:not(.btn){ color:var(--danger); }
a[href^="tel:"]:not(.btn):hover{ color:#c73f5f; }
/* Trim the dead space between the hero card and the next section (reported
as a large empty gap above the "Trusted by" strip on desktop) — the
hero's own outer bottom padding was doing more work than the hero-inner
card's own padding + shadow already do visually. */
.hero{ padding-bottom:48px; }
/* ---------- Mobile nav toggle (hamburger) ---------- */
.mobile-nav-toggle{
display:none;
flex-direction:column;
justify-content:center;
align-items:center;
gap:5px;
width:38px; height:38px;
padding:0; margin:0;
background:transparent;
border:1.5px solid var(--line-dark);
border-radius:var(--radius-sm);
cursor:pointer;
flex-shrink:0;
order:-1;
}
.mobile-nav-toggle span{
display:block; width:18px; height:2px;
background:#fff; border-radius:2px;
transition:transform .25s var(--ease), opacity .2s var(--ease);
}
body.mobile-nav-open .mobile-nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.mobile-nav-open .mobile-nav-toggle span:nth-child(2){ opacity:0; }
body.mobile-nav-open .mobile-nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.submenu-toggle{ display:none; }
@media (max-width:900px){
.mobile-nav-toggle{ display:flex; }
.bar-nav{
display:none;
position:absolute;
top:100%; left:0; right:0;
max-height:calc(100vh - 100%);
overflow-y:auto;
-webkit-overflow-scrolling:touch;
flex-direction:column;
align-items:stretch;
background:#0A0B10;
border-top:1px solid var(--line-dark);
box-shadow:var(--shadow-lg);
padding:6px var(--edge) 22px;
gap:0;
}
body.mobile-nav-open .bar-nav{ display:flex; }
nav.primary{ width:100%; }
nav.primary ul.primary-menu{
flex-direction:column; align-items:stretch; gap:0; width:100%;
}
nav.primary ul.primary-menu > li{
width:100%; border-bottom:1px solid var(--line-dark);
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
}
nav.primary ul.primary-menu > li > a{ flex:1 1 auto; padding:14px 4px; }
nav.primary li.menu-item-has-children > a::after{ display:none; }
.submenu-toggle{
display:flex; align-items:center; justify-content:center;
width:38px; height:38px; flex-shrink:0;
background:transparent; border:none; color:#C7CAD6; font-size:1rem;
cursor:pointer; transition:transform .18s var(--ease);
}
li.menu-item-has-children.is-open > .submenu-toggle{ transform:rotate(180deg); }
/* !important on every one of these: the desktop .sub-menu rule sets
position:absolute + left:50% + transform:translateX(-50%), and
.sub-menu-grouped's own display:grid is set in a separate inline