/* /terms-and-conditions — AISHTMLNEWDESIGN-475
Page-owned styles. EVERY selector is scoped to #page-terms-and-conditions or
a tac- 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 — "COUNTERSIGN".
A terms page is a two-party agreement, so the page is set as a signing
sheet: warm paper stock, warm-black ink, and signature claret as the single
accent. Each section opens with a signing rule — a hairline carrying a small
multiplication cross, the mark printed beside where a party signs. The nine
clauses are numbered items on ruled paper, not floating cards.
Deliberately unlike the two sibling legal pages, which must not share a look:
/privacy-policy CLEAN ROOM cool blue-grey #f5f7fa + trust blue #1d5fbf
/quality-policy PROVING GROUND tarmac #17181a + safety amber #9c4f07
and unlike /our-values LOAD BEARING (pine + jade). Warm paper + claret
collides with none of them. */
#page-terms-and-conditions{
--tac-paper:#faf6ef; /* paper stock */
--tac-paper-2:#f1eae0; /* paper, one step down */
--tac-ink:#1c1a17; /* warm near-black — NOT a blue-black */
--tac-ink-2:#57514a; /* secondary text on paper */
--tac-dark:#231f1c; /* warm charcoal ground */
--tac-dark-2:#2e2926; /* charcoal, raised */
--tac-claret:#8e2f3c; /* the single accent */
--tac-claret-dk:#6f2430;
--tac-claret-lt:#dd8e9b; /* accent on dark ground */
--tac-rule:#ded3c2; /* hairline on paper */
--tac-rule-d:#463e39; /* hairline on charcoal */
--tac-onink:#ece5da; /* text on charcoal */
font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
color:var(--tac-ink);
background:var(--tac-paper);
-webkit-font-smoothing:antialiased;
}
#page-terms-and-conditions .tac-wrap{max-width:1200px;margin:0 auto;padding:0 24px;}
#page-terms-and-conditions .tac-wrap--tight{max-width:900px;}
#page-terms-and-conditions img{max-width:100%;display:block;}
/* ── signing rule — the section marker ────────────────────────────── */
#page-terms-and-conditions .tac-sig{
display:flex;align-items:center;gap:12px;
margin:0 0 22px;font-size:16px;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--tac-ink-2);
}
#page-terms-and-conditions .tac-sig::after{
content:"";flex:1 1 auto;height:1px;background:var(--tac-rule);
}
#page-terms-and-conditions .tac-sig__x{
display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;
border:1.5px solid var(--tac-claret);border-radius:50%;
font-size:17px;line-height:1;color:var(--tac-claret);
}
#page-terms-and-conditions .tac-sig--dark{color:rgba(236,229,218,.68);}
#page-terms-and-conditions .tac-sig--dark::after{background:var(--tac-rule-d);}
#page-terms-and-conditions .tac-sig--dark .tac-sig__x{
border-color:var(--tac-claret-lt);color:var(--tac-claret-lt);
}
/* ── buttons ──────────────────────────────────────────────────────── */
#page-terms-and-conditions .tac-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,transform .18s ease;
}
#page-terms-and-conditions .tac-btn--claret{background:var(--tac-claret);color:#fff;}
#page-terms-and-conditions .tac-btn--claret:hover{background:var(--tac-claret-dk);transform:translateY(-1px);}
#page-terms-and-conditions .tac-btn:focus-visible{outline:3px solid var(--tac-claret-lt);outline-offset:3px;}
#page-terms-and-conditions .tac-inline{
font-size:16px;font-weight:600;color:var(--tac-claret);
border-bottom:1.5px solid currentColor;padding-bottom:2px;
}
#page-terms-and-conditions .tac-inline:hover{color:var(--tac-claret-dk);}
/* ── HERO — rule 24: flat ink + a STATIC ruled-sheet gradient. No url(),
no image, no motion. ─────────────────────────────────────────── */
#page-terms-and-conditions .tac-hero{
background-color:var(--tac-dark);
background-image:repeating-linear-gradient(
180deg,
rgba(236,229,218,.055) 0px, rgba(236,229,218,.055) 1px,
rgba(236,229,218,0) 1px, rgba(236,229,218,0) 34px);
border-bottom:4px solid var(--tac-claret);
padding:104px 24px 96px;text-align:center;
}
#page-terms-and-conditions .tac-hero__inner{max-width:900px;margin:0 auto;}
#page-terms-and-conditions .tac-eyebrow{
margin:0 0 18px;font-size:16px;font-weight:700;letter-spacing:.24em;
text-transform:uppercase;color:var(--tac-claret-lt);
}
#page-terms-and-conditions .tac-hero h1{
margin:0 0 24px;font-size:62px;line-height:1.06;font-weight:800;
letter-spacing:-.02em;color:#fff;
}
#page-terms-and-conditions .tac-hero__lede{
margin:0 auto 34px;max-width:780px;font-size:19px;line-height:1.75;
color:rgba(236,229,218,.9);
}
/* ── breadcrumb ───────────────────────────────────────────────────── */
#page-terms-and-conditions .tac-crumb{
background:var(--tac-paper-2);border-bottom:1px solid var(--tac-rule);
padding:14px 0;
}
#page-terms-and-conditions .tac-crumb ol{
list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;
font-size:16px;color:var(--tac-ink-2);
}
#page-terms-and-conditions .tac-crumb a{display:inline-flex;align-items:center;gap:8px;color:var(--tac-claret);font-weight:600;}
#page-terms-and-conditions .tac-crumb a:hover{color:var(--tac-claret-dk);}
#page-terms-and-conditions .tac-crumb img{width:16px;height:16px;}
#page-terms-and-conditions .tac-crumb li[aria-current]{font-weight:600;color:var(--tac-ink);}
/* ── recital ──────────────────────────────────────────────────────────
The figure panel is LIGHT on purpose. terms-and-conditions.webp is a
transparent asset and 46.4% of its opaque pixels are near-white — but
unlike /our-values' wheel, that near-white is the DOCUMENT PAPER, and
every element that must read (blue clipboard border, grey text rules,
dark pen, dark trousers, navy "Sign here" tab) is dark. Composited over
both grounds before choosing: it reads on paper, and on charcoal it
inverts into a glowing slab. Light panel it is. Check the alpha channel
and composite before changing this. */
#page-terms-and-conditions .tac-brief{padding:88px 0;}
#page-terms-and-conditions .tac-brief__grid{
display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
gap:56px;align-items:start;
}
#page-terms-and-conditions .tac-brief__body{
border-left:2px solid var(--tac-claret);padding-left:30px;
}
#page-terms-and-conditions .tac-brief__body p{margin:0 0 20px;font-size:17px;line-height:1.8;color:var(--tac-ink-2);}
#page-terms-and-conditions .tac-brief__body p:last-child{margin-bottom:0;}
#page-terms-and-conditions .tac-brief__body .tac-sig{padding-left:0;}
#page-terms-and-conditions .tac-brief__fig{
margin:0;border:1px solid var(--tac-rule);background:#fff;padding:18px;
}
#page-terms-and-conditions .tac-brief__fig img{width:100%;height:auto;}
/* ── our undertaking ──────────────────────────────────────────────── */
#page-terms-and-conditions .tac-stance{
background-color:var(--tac-dark);color:var(--tac-onink);padding:82px 0;
}
#page-terms-and-conditions .tac-prose p{margin:0 0 22px;font-size:17px;line-height:1.82;}
#page-terms-and-conditions .tac-prose p:last-child{margin-bottom:0;}
#page-terms-and-conditions .tac-prose--dark p{color:rgba(236,229,218,.87);}
/* ── collaborate band ─────────────────────────────────────────────── */
#page-terms-and-conditions .tac-collab{position:relative;isolation:isolate;overflow:hidden;}
#page-terms-and-conditions .tac-collab__bg{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
}
#page-terms-and-conditions .tac-collab::after{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(90deg,rgba(35,31,28,.94) 0%,rgba(35,31,28,.8) 58%,rgba(35,31,28,.6) 100%);
}
#page-terms-and-conditions .tac-collab__inner{max-width:1200px;margin:0 auto;padding:78px 24px;}
#page-terms-and-conditions .tac-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-terms-and-conditions .tac-collab p{
margin:0 0 30px;font-size:17px;line-height:1.75;color:rgba(236,229,218,.9);
}
/* ── the nine clauses, as items on ruled paper ────────────────────── */
#page-terms-and-conditions .tac-clauses{padding:88px 0 96px;background:var(--tac-paper-2);}
#page-terms-and-conditions .tac-list{
list-style:none;margin:0;padding:0;counter-reset:cl;
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
border-top:1px solid var(--tac-rule);border-left:1px solid var(--tac-rule);
background:var(--tac-paper);
}
#page-terms-and-conditions .tac-clause{
counter-increment:cl;position:relative;
border-right:1px solid var(--tac-rule);border-bottom:1px solid var(--tac-rule);
padding:30px 28px 34px;transition:background-color .18s ease;
}
#page-terms-and-conditions .tac-clause:hover{background:#fff;}
#page-terms-and-conditions .tac-clause::after{
content:"Cl. " counter(cl,decimal-leading-zero);
position:absolute;top:30px;right:28px;
font-size:16px;font-weight:700;letter-spacing:.06em;
color:var(--tac-rule);
}
#page-terms-and-conditions .tac-clause::before{
content:"";position:absolute;left:0;top:0;width:3px;height:0;
background:var(--tac-claret);transition:height .2s ease;
}
#page-terms-and-conditions .tac-clause:hover::before{height:100%;}
#page-terms-and-conditions .tac-clause__tick{width:24px;height:24px;margin:0 0 16px;}
#page-terms-and-conditions .tac-clause__t{
margin:0 0 12px;padding-right:56px;
font-size:20px;line-height:1.32;font-weight:700;letter-spacing:-.01em;
color:var(--tac-ink);
}
#page-terms-and-conditions .tac-clause p{margin:0;font-size:16px;line-height:1.75;color:var(--tac-ink-2);}
/* ── hire band ────────────────────────────────────────────────────── */
#page-terms-and-conditions .tac-hire{padding:88px 0;background:var(--tac-paper);}
#page-terms-and-conditions .tac-hire__grid{
display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
gap:56px;align-items:center;
}
#page-terms-and-conditions .tac-hire h2{
margin:0 0 16px;font-size:38px;line-height:1.2;font-weight:800;
letter-spacing:-.015em;color:var(--tac-ink);
}
#page-terms-and-conditions .tac-hire__text > p{margin:0 0 28px;font-size:17px;line-height:1.8;color:var(--tac-ink-2);}
#page-terms-and-conditions .tac-hire__act{display:flex;flex-wrap:wrap;align-items:center;gap:26px;}
#page-terms-and-conditions .tac-hire__fig{margin:0;border:1px solid var(--tac-rule);background:#fff;padding:14px;}
#page-terms-and-conditions .tac-hire__fig img{width:100%;height:auto;}
/* ── what the terms cover — opaque plate + ink scrim ──────────────── */
#page-terms-and-conditions .tac-what{position:relative;isolation:isolate;overflow:hidden;padding:84px 0;}
#page-terms-and-conditions .tac-what__bg{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
}
#page-terms-and-conditions .tac-what::after{
content:"";position:absolute;inset:0;z-index:-1;background:rgba(28,26,23,.9);
}
#page-terms-and-conditions .tac-what h2{
margin:0 0 26px;font-size:36px;line-height:1.24;font-weight:800;
letter-spacing:-.015em;color:#fff;
}
/* ── FAQ ──────────────────────────────────────────────────────────── */
#page-terms-and-conditions .tac-faq{padding:88px 0;background:var(--tac-paper);}
#page-terms-and-conditions .tac-faq h2{
margin:0 0 34px;font-size:36px;line-height:1.22;font-weight:800;
letter-spacing:-.015em;text-align:center;color:var(--tac-ink);
}
#page-terms-and-conditions .tac-faqlist{border-top:1px solid var(--tac-rule);}
#page-terms-and-conditions .tac-q{border-bottom:1px solid var(--tac-rule);}
#page-terms-and-conditions .tac-q[open]{background:#fff;}
#page-terms-and-conditions .tac-q__s{
display:flex;align-items:flex-start;gap:16px;cursor:pointer;
list-style:none;padding:22px 20px;
}
#page-terms-and-conditions .tac-q__s::-webkit-details-marker{display:none;}
#page-terms-and-conditions .tac-q__s:focus-visible{outline:3px solid var(--tac-claret);outline-offset:-3px;}
#page-terms-and-conditions .tac-q__n{margin:0;flex:0 0 auto;font-size:16px;font-weight:700;color:var(--tac-claret);line-height:1.5;}
#page-terms-and-conditions .tac-q__t{margin:0;flex:1 1 auto;font-size:18px;line-height:1.5;font-weight:600;color:var(--tac-ink);}
#page-terms-and-conditions .tac-q__m{position:relative;flex:0 0 22px;width:22px;height:22px;margin-top:2px;}
#page-terms-and-conditions .tac-q__m::before,
#page-terms-and-conditions .tac-q__m::after{
content:"";position:absolute;left:50%;top:50%;background:var(--tac-claret);
transform:translate(-50%,-50%);
}
#page-terms-and-conditions .tac-q__m::before{width:14px;height:2px;}
#page-terms-and-conditions .tac-q__m::after{width:2px;height:14px;transition:opacity .15s ease;}
#page-terms-and-conditions .tac-q[open] .tac-q__m::after{opacity:0;}
#page-terms-and-conditions .tac-q__a{display:flex;gap:16px;padding:0 20px 24px;}
#page-terms-and-conditions .tac-q__lab{margin:0;flex:0 0 auto;font-size:16px;font-weight:700;color:var(--tac-claret);}
#page-terms-and-conditions .tac-q__body p{margin:0;font-size:17px;line-height:1.8;color:var(--tac-ink-2);}
/* ── customer stories ─────────────────────────────────────────────── */
#page-terms-and-conditions .tac-stories{padding:84px 0;background:var(--tac-paper-2);border-top:1px solid var(--tac-rule);}
#page-terms-and-conditions .tac-stories h4{
margin:0 0 34px;font-size:32px;line-height:1.22;font-weight:800;
letter-spacing:-.015em;text-align:center;color:var(--tac-ink);
}
#page-terms-and-conditions .tac-stories__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;}
#page-terms-and-conditions .tac-story{background:var(--tac-paper);border:1px solid var(--tac-rule);display:flex;flex-direction:column;}
#page-terms-and-conditions .tac-story > p{margin:0;padding:22px 22px 26px;font-size:16px;line-height:1.75;color:var(--tac-ink-2);}
#page-terms-and-conditions .tac-vid{
position:relative;display:block;width:100%;padding:0;border:0;
border-bottom:1px solid var(--tac-rule);background:var(--tac-dark);
cursor:pointer;aspect-ratio:4/3;
}
#page-terms-and-conditions .tac-vid img{width:100%;height:100%;object-fit:cover;}
#page-terms-and-conditions .tac-vid__play{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:62px;height:62px;border-radius:50%;background:var(--tac-claret);
display:grid;place-items:center;transition:background-color .18s ease,transform .18s ease;
}
#page-terms-and-conditions .tac-vid__play::after{
content:"";border-style:solid;border-width:11px 0 11px 18px;
border-color:transparent transparent transparent #fff;margin-left:4px;
}
#page-terms-and-conditions .tac-vid:hover .tac-vid__play{background:var(--tac-claret-dk);transform:translate(-50%,-50%) scale(1.06);}
#page-terms-and-conditions .tac-vid:focus-visible{outline:3px solid var(--tac-claret);outline-offset:-3px;}
#page-terms-and-conditions .tac-story__frame{width:100%;aspect-ratio:4/3;border:0;display:block;}
#page-terms-and-conditions .tac-more{margin:32px 0 0;text-align:center;}
#page-terms-and-conditions .tac-more a{
font-size:16px;font-weight:700;color:var(--tac-claret);
border-bottom:1.5px solid currentColor;padding-bottom:2px;
}
#page-terms-and-conditions .tac-more a:hover{color:var(--tac-claret-dk);}
/* ── area we serve ────────────────────────────────────────────────── */
#page-terms-and-conditions .tac-areas{background-color:var(--tac-dark);color:var(--tac-onink);padding:80px 0;}
#page-terms-and-conditions .tac-areas h2{
margin:0 0 34px;font-size:32px;line-height:1.24;font-weight:800;
letter-spacing:-.015em;color:#fff;
}
#page-terms-and-conditions .tac-areas__grid{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
background:var(--tac-rule-d);border:1px solid var(--tac-rule-d);
}
#page-terms-and-conditions .tac-area{background:var(--tac-dark);padding:26px 22px 28px;}
#page-terms-and-conditions .tac-area h3{
margin:0 0 14px;font-size:16px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--tac-claret-lt);
}
#page-terms-and-conditions .tac-area__tel{margin:0 0 10px;font-size:17px;font-weight:700;}
#page-terms-and-conditions .tac-area__tel a{color:#fff;}
#page-terms-and-conditions .tac-area__tel a:hover{color:var(--tac-claret-lt);}
#page-terms-and-conditions .tac-area p:last-child{margin:0;font-size:16px;line-height:1.7;color:rgba(236,229,218,.76);}
/* ── enquiry modal ──────────────────────────────────────────────────
Geometry is /about-us's au-modal, adopted from the start. The scaffold's
own defaults were wrong on /our-values in four ways and all four are
avoided here: the overlay start-aligns and scrolls (centring an 870px
panel in a 900px viewport clips the close button to top:-2px); the box
never scrolls (a scrolling box fights the form's own scrollbar); the box
carries NO padding (a white gutter round a white form reads as a box in a
box) with overflow:hidden to clip the form's square corners to the radius;
and the iframe is 860px, because the survey is 870 and 560 cut off its
last third. The close button is 44px, which clears WCAG 2.5.5.
Typography is pinned so the shell presents identically on every URL. */
#page-terms-and-conditions .tac-modal{
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(20,17,14,.72);
}
#page-terms-and-conditions .tac-modal.is-open{display:flex;}
#page-terms-and-conditions .tac-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-terms-and-conditions .tac-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-terms-and-conditions .tac-modal__x:hover{background:var(--tac-dark);color:#fff;}
#page-terms-and-conditions .tac-modal__x:focus-visible{outline:3px solid var(--tac-claret);outline-offset:2px;}
#page-terms-and-conditions .tac-modal iframe{display:block;width:100%;min-height:860px;border:0;}
/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width:1100px){
#page-terms-and-conditions .tac-list{grid-template-columns:repeat(2,minmax(0,1fr));}
#page-terms-and-conditions .tac-areas__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
#page-terms-and-conditions .tac-hero{padding:76px 24px 70px;}
#page-terms-and-conditions .tac-hero h1{font-size:44px;}
#page-terms-and-conditions .tac-hero__lede{font-size:17px;}
#page-terms-and-conditions .tac-brief__grid,
#page-terms-and-conditions .tac-hire__grid{grid-template-columns:minmax(0,1fr);gap:36px;}
#page-terms-and-conditions .tac-collab h2,
#page-terms-and-conditions .tac-hire h2{font-size:30px;}
#page-terms-and-conditions .tac-what h2,
#page-terms-and-conditions .tac-faq h2{font-size:28px;}
#page-terms-and-conditions .tac-stories__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
#page-terms-and-conditions .tac-brief,
#page-terms-and-conditions .tac-clauses,
#page-terms-and-conditions .tac-hire,
#page-terms-and-conditions .tac-faq{padding:60px 0;}
#page-terms-and-conditions .tac-stance,
#page-terms-and-conditions .tac-what,
#page-terms-and-conditions .tac-stories,
#page-terms-and-conditions .tac-areas{padding:58px 0;}
#page-terms-and-conditions .tac-collab__inner{padding:58px 24px;}
}
@media (max-width:640px){
#page-terms-and-conditions .tac-wrap{padding:0 18px;}
#page-terms-and-conditions .tac-hero{padding:60px 18px 56px;}
#page-terms-and-conditions .tac-hero h1{font-size:34px;}
#page-terms-and-conditions .tac-btn{width:100%;text-align:center;padding:16px 22px;}
#page-terms-and-conditions .tac-list,
#page-terms-and-conditions .tac-stories__grid,
#page-terms-and-conditions .tac-areas__grid{grid-template-columns:minmax(0,1fr);}
#page-terms-and-conditions .tac-stories__grid{gap:20px;}
#page-terms-and-conditions .tac-brief__body{padding-left:20px;}
#page-terms-and-conditions .tac-collab h2,
#page-terms-and-conditions .tac-hire h2{font-size:26px;}
#page-terms-and-conditions .tac-what h2,
#page-terms-and-conditions .tac-faq h2,
#page-terms-and-conditions .tac-stories h4,
#page-terms-and-conditions .tac-areas h2{font-size:25px;}
#page-terms-and-conditions .tac-hire__act{gap:18px;}
#page-terms-and-conditions .tac-hire__act .tac-inline{width:100%;text-align:center;}
#page-terms-and-conditions .tac-q__s{padding:18px 14px;gap:12px;}
#page-terms-and-conditions .tac-q__t{font-size:17px;}
#page-terms-and-conditions .tac-q__a{padding:0 14px 20px;gap:12px;}
#page-terms-and-conditions .tac-clause__t{padding-right:0;}
#page-terms-and-conditions .tac-clause::after{position:static;display:block;margin-bottom:8px;}
#page-terms-and-conditions .tac-modal{padding: 100px 12px 12px 12px;}
#page-terms-and-conditions .tac-modal__box{max-width:none;border-radius:14px;}
}
/* ---------- Per-section CTA row -------------------------------------------
One CTA per section, every label unique page-wide (rule 25). FAQ and
Area We Serve deliberately carry none. */
#page-terms-and-conditions .tac-cta-row{margin-top:clamp(26px,3.2vw,42px);display:flex;}
@media (max-width:640px){
#page-terms-and-conditions .tac-cta-row{margin-top:24px;}
}