/* =====================================================================
SKOTIO GROUP — public website
---------------------------------------------------------------------
Same family as the back office (Barlow / Barlow Condensed / JetBrains
Mono, graphite and blueprint blue) so the two halves feel like one
business — but louder, because this side has to sell rather than record.
⚠️ NO PHOTOGRAPHS ANYWHERE IN THIS STYLESHEET, and none in the markup.
Stock images of somebody else's building site are worse than none: a
customer who arrives at a real yard and recognises nothing feels sold to.
The whole design carries its weight with type, rule lines and the
drafting-grid motif instead, and real site photographs can drop straight
into the spaces marked for them later.
===================================================================== */
@font-face { font-family:'Barlow'; font-style:normal; font-weight:400; font-display:swap;
src:url('fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:500; font-display:swap;
src:url('fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:600; font-display:swap;
src:url('fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:500; font-display:swap;
src:url('fonts/barlow-condensed-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:600; font-display:swap;
src:url('fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
src:url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap;
src:url('fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }
:root {
--ink:#16191c; --ink-70:#4a5158; --ink-40:#868e95;
--concrete:#e6e9e6; --paper:#fff; --line:#d0d6d0; --line-strong:#9aa39a;
--blueprint:#1f4e79; --blueprint-d:#14324c; --safety:#d94f0d; --go:#1c7a4d;
--sans:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
--cond:'Barlow Condensed','Barlow',system-ui,sans-serif;
--mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
--shell:1140px;
}
*,*::before,*::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; font-family:var(--sans); font-size:17px; line-height:1.6;
color:var(--ink); background:var(--paper); }
img { max-width:100%; height:auto; display:block; }
h1,h2,h3,h4 { font-family:var(--cond); font-weight:600; line-height:1.08; margin:0 0 .45em;
letter-spacing:.005em; }
h1 { font-size:clamp(2.4rem,6vw,4.1rem); }
h2 { font-size:clamp(1.8rem,3.6vw,2.7rem); }
h3 { font-size:1.3rem; }
p { margin:0 0 1.1em; }
a { color:var(--blueprint); text-underline-offset:2px; }
a:hover { color:var(--blueprint-d); }
:focus-visible { outline:3px solid var(--safety); outline-offset:3px; }
.shell { max-width:var(--shell); margin:0 auto; padding:0 20px; }
.small { font-size:.9rem; }
.muted { color:var(--ink-70); }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:8px; top:8px; z-index:99; background:var(--ink); color:#fff; padding:10px 14px; }
/* ---- Top strip ------------------------------------------------------ */
.topstrip { background:var(--ink); color:#c8d0d7; font-family:var(--cond);
letter-spacing:.08em; text-transform:uppercase; font-size:.83rem; }
.topstrip .shell { display:flex; gap:18px; align-items:center; min-height:38px; flex-wrap:wrap; }
.topstrip a { color:#fff; text-decoration:none; }
.topstrip-phone { font-family:var(--mono); letter-spacing:0; font-size:.9rem; }
.topstrip-hours { color:#8f9aa3; }
.topstrip-wa { margin-left:auto; border:1px solid #4a5158; padding:3px 10px; }
.topstrip-wa:hover { background:var(--go); border-color:var(--go); }
/* ---- Masthead ------------------------------------------------------- */
.masthead { border-bottom:2px solid var(--ink); position:sticky; top:0; z-index:20;
background:var(--paper); }
.masthead .shell { display:flex; align-items:center; gap:20px; min-height:76px; flex-wrap:wrap; }
.brand { display:flex; flex-direction:column; align-items:flex-start; gap:4px;
text-decoration:none; color:var(--ink); padding:8px 0; }
/* ⚠️ width AND height are set on the ![]()
so the masthead does not jump as the
logo loads — a header that shifts under the cursor makes the first tap miss. */
.brand-logo { display:block; width:auto; height:56px; max-width:min(300px,64vw); }
.brand-sub { display:block; font-family:var(--cond); font-size:.72rem; letter-spacing:.16em;
text-transform:uppercase; color:var(--ink-40); }
@media (max-width:620px) { .brand-logo { height:42px; } .brand-sub { font-size:.62rem; letter-spacing:.1em; } }
.nav { margin-left:auto; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.nav a { font-family:var(--cond); text-transform:uppercase; letter-spacing:.09em;
font-size:1rem; color:var(--ink); text-decoration:none; padding:9px 13px;
border-bottom:3px solid transparent; }
.nav a:hover { border-bottom-color:var(--line-strong); }
.nav a.is-current { border-bottom-color:var(--safety); }
.nav-cta { background:var(--blueprint); color:#fff !important; border-bottom-color:transparent !important;
margin-left:8px; padding:10px 18px !important; }
.nav-cta:hover { background:var(--blueprint-d); }
/* ---- Hero ----------------------------------------------------------- */
.hero { background:var(--ink); color:#f2f4f2; padding:clamp(56px,9vw,110px) 0;
background-image:
linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
background-size:34px 34px; }
.hero h1 { color:#fff; max-width:16ch; }
.hero h1 em { font-style:normal; color:var(--safety); }
.hero-lead { font-size:clamp(1.05rem,2vw,1.3rem); color:#c3ccd3; max-width:52ch; margin-bottom:1.6em; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
/* A drawing title block, reused from the back office as the signature. */
.titleblock { border:1px solid rgba(255,255,255,.28); display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin-top:clamp(36px,5vw,56px); }
.titleblock > div { padding:14px 16px; border-right:1px solid rgba(255,255,255,.18); }
.titleblock > div:last-child { border-right:0; }
.tb-label { display:block; font-family:var(--cond); font-size:.72rem; font-weight:600;
letter-spacing:.16em; text-transform:uppercase; color:#8f9aa3; margin-bottom:3px; }
.tb-value { font-family:var(--mono); font-size:1rem; color:#fff; }
/* ---- Buttons -------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--cond);
font-size:1.05rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
padding:14px 26px; border:2px solid var(--blueprint); background:var(--blueprint);
color:#fff; text-decoration:none; cursor:pointer; line-height:1.2; }
.btn:hover { background:var(--blueprint-d); border-color:var(--blueprint-d); color:#fff; }
.btn-ghost { background:transparent; border-color:currentColor; color:inherit; }
.btn-ghost:hover { background:#fff; color:var(--ink); border-color:#fff; }
.btn-wa { background:var(--go); border-color:var(--go); }
.btn-wa:hover { background:#155e3b; border-color:#155e3b; }
.btn-lg { padding:16px 32px; font-size:1.15rem; }
/* ---- Sections ------------------------------------------------------- */
.band { padding:clamp(50px,7vw,88px) 0; }
.band-grey { background:var(--concrete); }
.band-rule { border-top:1px solid var(--line); }
.sec-label { font-family:var(--cond); font-size:.8rem; font-weight:600; letter-spacing:.2em;
text-transform:uppercase; color:var(--safety); display:block; margin-bottom:10px; }
.sec-lead { font-size:1.15rem; color:var(--ink-70); max-width:60ch; }
/* ---- Service cards -------------------------------------------------- */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px;
margin-top:38px; }
.card { border:1px solid var(--line-strong); background:var(--paper); padding:26px 24px 28px;
display:flex; flex-direction:column; }
/* The number is the point of the card head — it reads like a drawing sheet. */
.card-no { font-family:var(--mono); font-size:.85rem; color:var(--ink-40); display:block;
padding-bottom:14px; margin-bottom:16px; border-bottom:2px solid var(--ink); }
.card h3 { font-size:1.55rem; }
.card ul { list-style:none; margin:14px 0 0; padding:0; }
.card li { position:relative; padding-left:20px; margin-bottom:8px; font-size:.96rem;
color:var(--ink-70); }
.card li::before { content:''; position:absolute; left:0; top:.62em; width:9px; height:2px;
background:var(--safety); }
.card .card-link { margin-top:auto; padding-top:20px; font-family:var(--cond);
text-transform:uppercase; letter-spacing:.09em; font-weight:600; text-decoration:none; }
.card .card-link::after { content:' →'; }
/* ---- Steps ---------------------------------------------------------- */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:0;
margin-top:38px; border:1px solid var(--line-strong); }
.step { padding:24px 22px; border-right:1px solid var(--line); }
.step:last-child { border-right:0; }
.step-no { font-family:var(--mono); font-size:2rem; color:var(--line-strong); line-height:1; }
.step h3 { margin-top:10px; font-size:1.2rem; }
.step p { margin:0; font-size:.95rem; color:var(--ink-70); }
/* ---- Facts strip ---------------------------------------------------- */
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
border:2px solid var(--ink); }
.facts > div { padding:22px 20px; border-right:1px solid var(--line); }
.facts > div:last-child { border-right:0; }
.fact-fig { font-family:var(--mono); font-size:2rem; font-weight:500; line-height:1; }
.fact-txt { font-family:var(--cond); font-size:.82rem; letter-spacing:.14em;
text-transform:uppercase; color:var(--ink-40); margin-top:8px; display:block; }
/* ---- CTA band ------------------------------------------------------- */
.cta { background:var(--blueprint); color:#fff; padding:clamp(44px,6vw,72px) 0; }
.cta h2 { color:#fff; }
.cta p { color:#cfe0ef; max-width:56ch; }
.cta .btn { background:#fff; color:var(--blueprint); border-color:#fff; }
.cta .btn:hover { background:var(--ink); color:#fff; border-color:var(--ink); }
.cta .btn-wa { background:var(--go); color:#fff; border-color:var(--go); }
/* ---- Forms ---------------------------------------------------------- */
.formwrap { display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:start; }
.field { margin-bottom:18px; }
.field label { display:block; font-family:var(--cond); font-size:.85rem; font-weight:600;
letter-spacing:.13em; text-transform:uppercase; color:var(--ink-70); margin-bottom:6px; }
.field input[type=text],.field input[type=tel],.field input[type=email],
.field select,.field textarea {
width:100%; font-family:var(--sans); font-size:1.05rem; padding:13px 14px;
border:1px solid var(--line-strong); background:#fff; border-radius:0; color:var(--ink); }
.field textarea { min-height:150px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus {
border-color:var(--blueprint); outline:2px solid rgba(31,78,121,.22); }
.field .hint { font-size:.86rem; color:var(--ink-40); margin-top:5px; }
.field.has-error input,.field.has-error select,.field.has-error textarea { border-color:var(--safety); }
.field-error { color:var(--safety); font-size:.9rem; margin-top:5px; font-weight:500; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
/* ⚠️ The honeypot. Hidden from people without display:none, because some bots
skip anything display:none — and kept out of the tab order and off screen
readers so a real person can never fill it in by accident. */
.trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.notice { border:1px solid var(--line-strong); border-left:5px solid var(--blueprint);
background:var(--concrete); padding:14px 18px; margin-bottom:22px; }
.notice.is-error { border-left-color:var(--safety); }
.notice.is-good { border-left-color:var(--go); }
.aside-box { border:2px solid var(--ink); padding:24px 22px; }
.aside-box h3 { font-size:1.25rem; }
.aside-box ul { list-style:none; margin:0; padding:0; }
.aside-box li { padding:9px 0; border-bottom:1px solid var(--line); font-size:.97rem; }
.aside-box li:last-child { border-bottom:0; }
.aside-box .mono { font-family:var(--mono); }
/* ---- Prose ---------------------------------------------------------- */
.prose { max-width:66ch; }
.prose h2 { margin-top:1.6em; }
.prose ul { padding-left:20px; }
.prose li { margin-bottom:9px; }
/* ---- Footer --------------------------------------------------------- */
.siteft { background:var(--ink); color:#b9c1c8; padding:clamp(42px,6vw,64px) 0 0;
margin-top:0; font-size:.96rem; }
.siteft-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:34px; }
.ft-label { display:block; font-family:var(--cond); font-size:.78rem; font-weight:600;
letter-spacing:.18em; text-transform:uppercase; color:#fff; margin-bottom:12px; }
.ft-lead { color:#cdd5db; }
.siteft a { color:#fff; text-decoration:none; border-bottom:1px solid #4a5158; }
.siteft a:hover { border-bottom-color:var(--safety); }
.ft-list { list-style:none; margin:0; padding:0; }
.ft-list li { padding:5px 0; }
.siteft-legal { display:flex; gap:18px; flex-wrap:wrap; padding-top:26px; padding-bottom:26px;
margin-top:34px; border-top:1px solid #2c3238; font-family:var(--mono); font-size:.78rem;
color:#98a2ab; }
.staff-link { margin-left:auto; }
/* ---- Responsive ----------------------------------------------------- */
@media (max-width:880px) {
.formwrap { grid-template-columns:1fr; }
.masthead .shell { min-height:64px; padding-top:10px; padding-bottom:10px; }
.nav { margin-left:0; width:100%; overflow-x:auto; }
.step { border-right:0; border-bottom:1px solid var(--line); }
.step:last-child { border-bottom:0; }
}
@media (max-width:560px) {
body { font-size:16px; }
.field-row { grid-template-columns:1fr; }
.facts > div { border-right:0; border-bottom:1px solid var(--line); }
.facts > div:last-child { border-bottom:0; }
.topstrip-wa { margin-left:0; }
}
@media (prefers-reduced-motion:reduce) {
html { scroll-behavior:auto; }
*,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
@media print {
.topstrip,.nav,.cta,.siteft { display:none !important; }
body { font-size:11pt; }
}
/* ---- Photographs -----------------------------------------------------
The site carried no images at all until the business had its own. Stock
photographs of somebody else's trucks would have been worse than none;
these are his, on his sites, which is the whole point of showing them.
--------------------------------------------------------------------- */
/* The hero now sits over a photograph. The scrim is not decoration — white
text on a bright sky is unreadable, and the grid stays on top of it so the
drawing-sheet motif survives. */
.hero { position:relative; overflow:hidden; }
.hero-photo { position:absolute; inset:0; background-size:cover; background-position:center 62%;
z-index:0; }
.hero-photo::after { content:''; position:absolute; inset:0;
background:linear-gradient(100deg, rgba(15,18,20,.93) 0%, rgba(15,18,20,.82) 45%,
rgba(15,18,20,.55) 100%); }
.hero .shell { position:relative; z-index:1; }
@media (max-width:700px) {
/* On a narrow screen the text covers the whole frame, so the picture has to
go darker or the headline sits on gravel and cannot be read. */
.hero-photo::after { background:rgba(15,18,20,.86); }
}
.shots { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px;
margin-top:38px; }
.shot { margin:0; border:1px solid var(--line-strong); background:var(--paper); }
.shot img { display:block; width:100%; height:auto; }
.shot figcaption { padding:12px 16px; font-family:var(--cond); font-size:.84rem;
letter-spacing:.12em; text-transform:uppercase; color:var(--ink-40);
border-top:1px solid var(--line); }
/* A single photograph beside a block of text. */
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,56px);
align-items:center; }
.split img { display:block; width:100%; height:auto; border:1px solid var(--line-strong); }
@media (max-width:820px) { .split { grid-template-columns:1fr; } }
/* ---- Service cards: words, then the photograph -----------------------
The picture used to sit BEHIND the text. Behind text a photograph is always
a compromise — strong enough to see is strong enough to fight the reading.
Underneath it can be at full strength and the words are on plain paper.
⚠️ THE PHOTOGRAPHS LINE UP ACROSS THE ROW even though the three blocks of
text are different lengths. The words take the space they need, then
margin-top:auto pushes every picture to the same baseline — three pictures
starting at three different heights reads as a broken page.
--------------------------------------------------------------------- */
.card-shot { padding:0; overflow:hidden; }
.card-words { padding:26px 24px 24px; }
.card-words > *:last-child { margin-bottom:0; }
.shot-link { display:block; position:relative; margin-top:auto; text-decoration:none;
background:var(--ink); }
/* ⚠️ aspect-ratio AND width/height on the ![]()
: the ratio holds the box while
the picture loads, so the card does not grow under the reader's thumb. */
.shot-link img { display:block; width:100%; height:auto; aspect-ratio:4/3;
object-fit:cover; }
.shot-cta { position:absolute; left:0; right:0; bottom:0;
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:13px 20px;
font-family:var(--cond); font-size:1rem; font-weight:600; letter-spacing:.09em;
text-transform:uppercase; color:#fff;
background:linear-gradient(180deg, rgba(31,78,121,0) 0%, rgba(22,25,28,.55) 38%,
rgba(22,25,28,.82) 100%); }
.shot-cta::after { content:'→'; font-size:1.1rem; }
.shot-link:hover .shot-cta { background:linear-gradient(180deg, rgba(31,78,121,.15) 0%,
rgba(31,78,121,.78) 38%, rgba(31,78,121,.95) 100%); }
.shot-link:focus-visible { outline:3px solid var(--safety); outline-offset:-3px; }
/* ---- The footer photograph -------------------------------------------
⚠️ THE SCRIM IS HEAVIER HERE THAN ANYWHERE ELSE ON THE SITE, because the
footer is the one block with LIGHT text on a DARK ground. Everywhere else a
photograph only has to stay out of the way of black text on paper; here it
has to stay behind pale grey text, and a sunset in the middle of the frame
is exactly the sort of bright patch that swallows it.
⚠️ AND IT IS FIXED TO THE INK COLOUR UNDERNEATH. If the photograph fails to
load, the footer is the solid dark band it was before rather than pale text
on nothing.
--------------------------------------------------------------------- */
.siteft { position:relative; isolation:isolate; overflow:hidden; }
.siteft::before {
content:''; position:absolute; inset:0; z-index:-2;
background:url('img/footer-site.jpg') center 38% / cover no-repeat;
}
.siteft::after {
content:''; position:absolute; inset:0; z-index:-1;
background:linear-gradient(180deg,
rgba(22,25,28,.88) 0%,
rgba(22,25,28,.90) 45%,
rgba(22,25,28,.94) 100%);
}
.siteft .shell { position:relative; }
@media (max-width:820px) {
/* On a phone the footer is tall and narrow, so the picture is blown up and
the sunset lands right behind the contact details. Darker still. */
.siteft::after { background:rgba(22,25,28,.93); }
}
@media (prefers-contrast:more) { .siteft::before { display:none; } }
@media print { .siteft::before, .siteft::after { display:none; } }