/* /our-values — AISHTMLNEWDESIGN-474
Page-owned styles. EVERY selector is scoped to #page-our-values or a
ov- prefixed class: this sheet must never style body, a bare
element, #ais-header or #ais-footer. The document reset
(html,body{margin:0}) is owned by the shared layout sheet.
Font is Inter; no body/UI text below 16px.
VISUAL DIRECTION — "LOAD BEARING".
The record's own claim is structural: "values aren't just words, they're the
backbone of everything we do". So the page is set as a building frame —
pine-dark columns, limestone infill, a jade accent used once per surface,
and lettered gridline tags (A/B/C/D) marking each structural bay the way a
drawing set marks its column lines. Bays sit on a hairline frame rather than
in drop-shadowed cards; the only "depth" is the beam line between storeys.
Deliberately NOT /quality-policy's PROVING GROUND (warm tarmac + safety
amber) — the two share a section order and must not share a look. */
#page-our-values{
--ov-lime:#f4f1ea; /* limestone infill */
--ov-lime-2:#ebe6db; /* infill, one step down */
--ov-pine:#11241f; /* structural pine-dark */
--ov-pine-2:#1b332c; /* pine, raised */
--ov-jade:#0f7a68; /* the single accent */
--ov-jade-lt:#57c9b4; /* accent on dark ground */
--ov-ink:#16211f; /* body text on light */
--ov-ink-2:#4b5a56; /* secondary text on light */
--ov-line:#d6cfc0; /* hairline on light */
--ov-line-d:#2f4a42; /* hairline on dark */
--ov-bone:#e7e2d6; /* text on dark */
font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
color:var(--ov-ink);
background:var(--ov-lime);
-webkit-font-smoothing:antialiased;
}
#page-our-values .ov-wrap{max-width:1200px;margin:0 auto;padding:0 24px;}
#page-our-values .ov-wrap--tight{max-width:900px;}
#page-our-values img{max-width:100%;display:block;}
/* ── gridline tag — the drawing-set column marker ─────────────────── */
#page-our-values .ov-gridline{
display:flex;align-items:center;gap:12px;
margin:0 0 20px;font-size:16px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--ov-ink-2);
}
#page-our-values .ov-gridline__n{
display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;
border:1.5px solid var(--ov-jade);border-radius:50%;
font-size:16px;font-weight:700;letter-spacing:0;color:var(--ov-jade);
}
#page-our-values .ov-gridline__l{padding-top:2px;}
#page-our-values .ov-gridline--dark{color:rgba(231,226,214,.66);}
#page-our-values .ov-gridline--dark .ov-gridline__n{
border-color:var(--ov-jade-lt);color:var(--ov-jade-lt);
}
/* ── buttons ──────────────────────────────────────────────────────── */
#page-our-values .ov-btn{
display:inline-block;border:0;cursor:pointer;
font-family:inherit;font-size:16px;font-weight:700;line-height:1;
letter-spacing:.01em;padding:17px 30px;border-radius:2px;
transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
#page-our-values .ov-btn--jade{background:var(--ov-jade);color:#fff;}
#page-our-values .ov-btn--jade:hover{background:#0b5d50;transform:translateY(-1px);}
#page-our-values .ov-btn:focus-visible{outline:3px solid var(--ov-jade-lt);outline-offset:3px;}
#page-our-values .ov-inline{
font-size:16px;font-weight:600;color:var(--ov-jade);
border-bottom:1.5px solid currentColor;padding-bottom:2px;
}
#page-our-values .ov-inline:hover{color:#0b5d50;}
#page-our-values .ov-prose--dark .ov-inline{color:var(--ov-jade-lt);}
#page-our-values .ov-prose--dark .ov-inline:hover{color:#8fe0ce;}
/* ── HERO — rule 24: flat pine + a STATIC column-bay pinstripe. No url(),
no image, no motion. ───────────────────────────────────────────── */
#page-our-values .ov-hero{
background-color:var(--ov-pine);
background-image:repeating-linear-gradient(
90deg,
rgba(87,201,180,.09) 0px, rgba(87,201,180,.09) 1px,
rgba(87,201,180,0) 1px, rgba(87,201,180,0) 96px);
border-bottom:1px solid var(--ov-line-d);
padding:104px 24px 96px;text-align:center;
}
#page-our-values .ov-hero__inner{max-width:900px;margin:0 auto;}
#page-our-values .ov-eyebrow{
margin:0 0 18px;font-size:16px;font-weight:700;letter-spacing:.24em;
text-transform:uppercase;color:var(--ov-jade-lt);
}
#page-our-values .ov-hero h1{
margin:0 0 24px;font-size:66px;line-height:1.04;font-weight:800;
letter-spacing:-.02em;color:#fff;
}
#page-our-values .ov-hero__lede{
margin:0 auto 34px;max-width:760px;font-size:19px;line-height:1.72;
color:rgba(231,226,214,.9);
}
/* ── breadcrumb ───────────────────────────────────────────────────── */
#page-our-values .ov-crumb{
background:var(--ov-lime-2);border-bottom:1px solid var(--ov-line);
padding:14px 0;
}
#page-our-values .ov-crumb ol{
list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;
font-size:16px;color:var(--ov-ink-2);
}
#page-our-values .ov-crumb a{display:inline-flex;align-items:center;gap:8px;color:var(--ov-jade);font-weight:600;}
#page-our-values .ov-crumb a:hover{color:#0b5d50;}
#page-our-values .ov-crumb img{width:16px;height:16px;}
#page-our-values .ov-crumb li[aria-current]{font-weight:600;color:var(--ov-ink);}
/* ── bay A — opening statement + the record's lead image ──────────── */
#page-our-values .ov-brief{padding:88px 0;}
#page-our-values .ov-brief__grid{
display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
gap:56px;align-items:start;
}
#page-our-values .ov-brief__body{
border-left:2px solid var(--ov-jade);padding-left:30px;
}
#page-our-values .ov-brief__body p{margin:0 0 20px;font-size:17px;line-height:1.8;color:var(--ov-ink-2);}
#page-our-values .ov-brief__body p:last-child{margin-bottom:0;}
/* The values wheel is a TRANSPARENT asset whose eight labels — INTEGRITY,
GROWTH, CREATIVITY, GOALS, QUALITY, TEAM WORK, VALUE, INNOVATION — are
WHITE, and whose discs are dark metallic. It is drawn for a dark ground:
29.9% of its opaque pixels are near-white. On the white panel this figure
used to carry, all eight labels were invisible and the discs washed out to
the background. Hence pine here, not #fff. Do not "tidy" this back to a
white card — check the asset's alpha channel first.
/assets/.../hire-dev-img.webp is transparent too but its near-white content
is t-shirts and dark-text pills, so THAT figure stays on white. */
#page-our-values .ov-brief__fig{
margin:0;border:1px solid var(--ov-line-d);background:var(--ov-pine);
padding:22px;
}
#page-our-values .ov-brief__fig img{width:100%;height:auto;}
/* ── bay B — in practice, on the dark surface ─────────────────────── */
#page-our-values .ov-practice{
background-color:var(--ov-pine);color:var(--ov-bone);padding:82px 0;
border-top:6px solid var(--ov-jade);
}
#page-our-values .ov-prose p{margin:0 0 22px;font-size:17px;line-height:1.82;}
#page-our-values .ov-prose p:last-child{margin-bottom:0;}
#page-our-values .ov-prose--dark p{color:rgba(231,226,214,.86);}
/* ── collaborate beam ─────────────────────────────────────────────── */
#page-our-values .ov-collab{position:relative;isolation:isolate;overflow:hidden;}
#page-our-values .ov-collab__bg{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
}
#page-our-values .ov-collab::after{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(90deg,rgba(17,36,31,.93) 0%,rgba(17,36,31,.78) 60%,rgba(17,36,31,.6) 100%);
}
#page-our-values .ov-collab__inner{
max-width:1200px;margin:0 auto;padding:78px 24px;
}
#page-our-values .ov-collab h2{
margin:0 0 14px;max-width:760px;font-size:38px;line-height:1.22;
font-weight:800;letter-spacing:-.015em;color:#fff;
}
#page-our-values .ov-collab p{
margin:0 0 30px;max-width:680px;font-size:17px;line-height:1.75;
color:rgba(231,226,214,.9);
}
/* ── bay C — the nine values, as bays in the frame ────────────────── */
#page-our-values .ov-values{padding:88px 0 96px;background:var(--ov-lime-2);}
#page-our-values .ov-bays{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
border-top:1px solid var(--ov-line);border-left:1px solid var(--ov-line);
background:var(--ov-lime);
}
#page-our-values .ov-bay{
border-right:1px solid var(--ov-line);border-bottom:1px solid var(--ov-line);
padding:32px 28px 34px;position:relative;
transition:background-color .18s ease;
}
#page-our-values .ov-bay:hover{background:#fff;}
#page-our-values .ov-bay::before{
content:"";position:absolute;left:0;top:0;width:3px;height:0;
background:var(--ov-jade);transition:height .2s ease;
}
#page-our-values .ov-bay:hover::before{height:100%;}
#page-our-values .ov-bay__tick{width:24px;height:24px;margin:0 0 16px;}
#page-our-values .ov-bay__t{
margin:0 0 12px;font-size:20px;line-height:1.32;font-weight:700;
letter-spacing:-.01em;color:var(--ov-ink);
}
#page-our-values .ov-bay p{margin:0;font-size:16px;line-height:1.75;color:var(--ov-ink-2);}
/* ── hire beam ────────────────────────────────────────────────────── */
#page-our-values .ov-hire{padding:88px 0;background:var(--ov-lime);}
#page-our-values .ov-hire__grid{
display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
gap:56px;align-items:center;
}
#page-our-values .ov-hire h2{
margin:0 0 16px;font-size:38px;line-height:1.2;font-weight:800;
letter-spacing:-.015em;color:var(--ov-ink);
}
#page-our-values .ov-hire__text > p{margin:0 0 22px;font-size:17px;line-height:1.8;color:var(--ov-ink-2);}
#page-our-values .ov-hire__sub{
margin:0 0 26px;padding-top:22px;border-top:1px solid var(--ov-line);
font-size:19px;line-height:1.45;font-weight:700;color:var(--ov-jade);
}
#page-our-values .ov-hire__act{display:flex;flex-wrap:wrap;align-items:center;gap:26px;}
#page-our-values .ov-hire__fig{margin:0;border:1px solid var(--ov-line);background:#fff;padding:14px;}
#page-our-values .ov-hire__fig img{width:100%;height:auto;}
/* ── bay D — why us ───────────────────────────────────────────────── */
#page-our-values .ov-why{
background-color:var(--ov-pine-2);color:var(--ov-bone);padding:84px 0;
border-top:6px solid var(--ov-jade);
}
#page-our-values .ov-why h2{
margin:0 0 26px;font-size:36px;line-height:1.24;font-weight:800;
letter-spacing:-.015em;color:#fff;
}
/* ── FAQ ──────────────────────────────────────────────────────────── */
#page-our-values .ov-faq{padding:88px 0;background:var(--ov-lime);}
#page-our-values .ov-faq h2{
margin:0 0 34px;font-size:36px;line-height:1.22;font-weight:800;
letter-spacing:-.015em;text-align:center;color:var(--ov-ink);
}
#page-our-values .ov-faqlist{border-top:1px solid var(--ov-line);}
#page-our-values .ov-q{border-bottom:1px solid var(--ov-line);background:var(--ov-lime);}
#page-our-values .ov-q[open]{background:#fff;}
#page-our-values .ov-q__s{
display:flex;align-items:flex-start;gap:16px;cursor:pointer;
list-style:none;padding:22px 20px;
}
#page-our-values .ov-q__s::-webkit-details-marker{display:none;}
#page-our-values .ov-q__s:focus-visible{outline:3px solid var(--ov-jade);outline-offset:-3px;}
#page-our-values .ov-q__n{
margin:0;flex:0 0 auto;font-size:16px;font-weight:700;color:var(--ov-jade);
line-height:1.5;
}
#page-our-values .ov-q__t{
margin:0;flex:1 1 auto;font-size:18px;line-height:1.5;font-weight:600;
color:var(--ov-ink);
}
#page-our-values .ov-q__m{
position:relative;flex:0 0 22px;width:22px;height:22px;margin-top:2px;
}
#page-our-values .ov-q__m::before,
#page-our-values .ov-q__m::after{
content:"";position:absolute;left:50%;top:50%;background:var(--ov-jade);
transform:translate(-50%,-50%);
}
#page-our-values .ov-q__m::before{width:14px;height:2px;}
#page-our-values .ov-q__m::after{width:2px;height:14px;transition:opacity .15s ease;}
#page-our-values .ov-q[open] .ov-q__m::after{opacity:0;}
#page-our-values .ov-q__a{display:flex;gap:16px;padding:0 20px 24px 20px;}
#page-our-values .ov-q__lab{
margin:0;flex:0 0 auto;font-size:16px;font-weight:700;color:var(--ov-jade);
}
#page-our-values .ov-q__body p{margin:0;font-size:17px;line-height:1.8;color:var(--ov-ink-2);}
/* ── customer stories ─────────────────────────────────────────────── */
#page-our-values .ov-stories{padding:84px 0;background:var(--ov-lime-2);border-top:1px solid var(--ov-line);}
#page-our-values .ov-stories h4{
margin:0 0 34px;font-size:32px;line-height:1.22;font-weight:800;
letter-spacing:-.015em;text-align:center;color:var(--ov-ink);
}
#page-our-values .ov-stories__grid{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;
}
#page-our-values .ov-story{
background:var(--ov-lime);border:1px solid var(--ov-line);
display:flex;flex-direction:column;
}
#page-our-values .ov-story > p{margin:0;padding:22px 22px 26px;font-size:16px;line-height:1.75;color:var(--ov-ink-2);}
#page-our-values .ov-vid{
position:relative;display:block;width:100%;padding:0;border:0;
border-bottom:1px solid var(--ov-line);background:var(--ov-pine);cursor:pointer;
aspect-ratio:4/3;
}
#page-our-values .ov-vid img{width:100%;height:100%;object-fit:cover;}
#page-our-values .ov-vid__play{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:62px;height:62px;border-radius:50%;background:var(--ov-jade);
display:grid;place-items:center;transition:background-color .18s ease,transform .18s ease;
}
#page-our-values .ov-vid__play::after{
content:"";border-style:solid;border-width:11px 0 11px 18px;
border-color:transparent transparent transparent #fff;margin-left:4px;
}
#page-our-values .ov-vid:hover .ov-vid__play{background:#0b5d50;transform:translate(-50%,-50%) scale(1.06);}
#page-our-values .ov-vid:focus-visible{outline:3px solid var(--ov-jade);outline-offset:-3px;}
#page-our-values .ov-story__frame{width:100%;aspect-ratio:4/3;border:0;display:block;}
#page-our-values .ov-more{margin:32px 0 0;text-align:center;}
#page-our-values .ov-more a{
font-size:16px;font-weight:700;color:var(--ov-jade);
border-bottom:1.5px solid currentColor;padding-bottom:2px;
}
#page-our-values .ov-more a:hover{color:#0b5d50;}
/* ── area we serve ────────────────────────────────────────────────── */
#page-our-values .ov-areas{background-color:var(--ov-pine);color:var(--ov-bone);padding:80px 0;}
#page-our-values .ov-areas h2{
margin:0 0 34px;font-size:32px;line-height:1.24;font-weight:800;
letter-spacing:-.015em;color:#fff;
}
#page-our-values .ov-areas__grid{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
background:var(--ov-line-d);border:1px solid var(--ov-line-d);
}
#page-our-values .ov-area{background:var(--ov-pine);padding:26px 22px 28px;}
#page-our-values .ov-area h3{
margin:0 0 14px;font-size:16px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--ov-jade-lt);
}
#page-our-values .ov-area__tel{margin:0 0 10px;font-size:17px;font-weight:700;}
#page-our-values .ov-area__tel a{color:#fff;}
#page-our-values .ov-area__tel a:hover{color:var(--ov-jade-lt);}
#page-our-values .ov-area p:last-child{margin:0;font-size:16px;line-height:1.7;color:rgba(231,226,214,.76);}
/* ── enquiry modal ──────────────────────────────────────────────────
Geometry is /about-us's au-modal, adopted deliberately rather than
re-invented. The enquiry shell is the SAME embedded GHL survey on every
URL, so it must present identically everywhere; only the close button's
hover/focus colour follows this page's accent.
What the first version got wrong, and why each line below is the fix:
· align-items:center + max-height:92vh — the panel is 870px tall and the
viewport was 900, so centring pushed its top edge to -2px and CLIPPED
the close button. Start-aligned with margin:auto centres it only when
it actually fits, and lets it scroll from the top when it does not.
· overflow on the BOX — that gave the panel its own scrollbar while the
870px form had another, so two scroll surfaces fought over the same
drag. The OVERLAY scrolls now; the box never does.
· padding:44px 18px 18px — a white gutter around an already-white form,
reading as a box inside a box. Removed; the form goes edge to edge and
overflow:hidden clips its square corners to the panel radius, which is
the only way all four corners stay round.
· min-height:560px — the survey is 870px, so the last third was cut off
before the widget's own resizer ran. 860px matches /about-us. */
#page-our-values .ov-modal{
/* Pinned so the panel does not inherit this page's type scale or ink —
the enquiry shell must present identically on every URL. */
color:#2c2419;
font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
font-size:17px;
line-height:1.72;
position:fixed;inset:0;z-index:9999;display:none;
align-items:flex-start;justify-content:center;
padding: 100px 20px 20px 20px;overflow-y:auto;
background:rgba(9,18,16,.72);
}
#page-our-values .ov-modal.is-open{display:flex;}
#page-our-values .ov-modal__box{
color:#2c2419;
font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
font-size:17px;
line-height:1.72;
position:relative;width:100%;max-width:620px;margin:auto;
border-radius:16px;background:#fff;
box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
overflow:hidden;
}
#page-our-values .ov-modal__x{
position:absolute;top:12px;right:12px;z-index:2;
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;
border:1px solid #ddd2ba;border-radius:50%;
background:#fff;color:#1d1509;cursor:pointer;
transition:background-color .16s ease,color .16s ease;
}
#page-our-values .ov-modal__x:hover{background:var(--ov-pine);color:#fff;}
#page-our-values .ov-modal__x:focus-visible{outline:3px solid var(--ov-jade);outline-offset:2px;}
#page-our-values .ov-modal iframe{display:block;width:100%;min-height:860px;border:0;}
/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width:1100px){
#page-our-values .ov-bays{grid-template-columns:repeat(2,minmax(0,1fr));}
#page-our-values .ov-areas__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
#page-our-values .ov-hero{padding:76px 24px 70px;}
#page-our-values .ov-hero h1{font-size:46px;}
#page-our-values .ov-hero__lede{font-size:17px;}
#page-our-values .ov-brief__grid,
#page-our-values .ov-hire__grid{grid-template-columns:minmax(0,1fr);gap:36px;}
#page-our-values .ov-collab h2,
#page-our-values .ov-hire h2{font-size:30px;}
#page-our-values .ov-why h2,
#page-our-values .ov-faq h2{font-size:28px;}
#page-our-values .ov-stories__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
#page-our-values .ov-brief,
#page-our-values .ov-values,
#page-our-values .ov-hire,
#page-our-values .ov-faq{padding:60px 0;}
#page-our-values .ov-practice,
#page-our-values .ov-why,
#page-our-values .ov-stories,
#page-our-values .ov-areas{padding:58px 0;}
#page-our-values .ov-collab__inner{padding:58px 24px;}
}
@media (max-width:640px){
#page-our-values .ov-wrap{padding:0 18px;}
#page-our-values .ov-hero{padding:60px 18px 56px;}
#page-our-values .ov-hero h1{font-size:36px;}
#page-our-values .ov-btn{width:100%;text-align:center;padding:16px 22px;}
#page-our-values .ov-bays,
#page-our-values .ov-stories__grid,
#page-our-values .ov-areas__grid{grid-template-columns:minmax(0,1fr);}
#page-our-values .ov-stories__grid{gap:20px;}
#page-our-values .ov-brief__body{padding-left:20px;}
#page-our-values .ov-collab h2,
#page-our-values .ov-hire h2{font-size:26px;}
#page-our-values .ov-why h2,
#page-our-values .ov-faq h2,
#page-our-values .ov-stories h4,
#page-our-values .ov-areas h2{font-size:25px;}
#page-our-values .ov-hire__act{gap:18px;}
#page-our-values .ov-hire__act .ov-inline{width:100%;text-align:center;}
#page-our-values .ov-q__s{padding:18px 14px;gap:12px;}
#page-our-values .ov-q__t{font-size:17px;}
#page-our-values .ov-q__a{padding:0 14px 20px;gap:12px;}
#page-our-values .ov-modal{padding: 100px 12px 12px 12px;}
#page-our-values .ov-modal__box{max-width:none;border-radius:14px;}
}
/* ---------- Per-section CTA row -------------------------------------------
One CTA per section, every label unique page-wide (rule 25). Sits at the end
of the section's own wrap so it inherits that section's ground. FAQ and
Area We Serve deliberately carry none. */
#page-our-values .ov-cta-row{margin-top:clamp(26px,3.2vw,42px);display:flex;}
@media (max-width:640px){
#page-our-values .ov-cta-row{margin-top:24px;}
}