@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');

:root { --ink:#101b2d; --navy:#15263e; --paper:#f8f5ef; --cream:#efe8dc; --gold:#ef9c36; --rust:#d85f38; --muted:#596270; --line:rgba(16,27,45,.17); --mono:'DM Mono',monospace; --sans:'DM Sans',sans-serif; --serif:'Playfair Display',serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.5; }
a { color:inherit; }
.section-shell { width:min(1160px,calc(100% - 48px)); margin-inline:auto; }
.section-space { padding-block:120px; }
.skip-link { position:fixed; z-index:10; top:8px; left:8px; transform:translateY(-150%); padding:9px 12px; background:white; color:var(--ink); }
.skip-link:focus { transform:none; }
.site-header { min-height:86px; width:min(1160px,calc(100% - 48px)); margin:auto; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-size:12px; line-height:1.13; letter-spacing:.02em; text-transform:uppercase; }
.brand strong { font-weight:700; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; background:var(--ink); color:var(--paper); font-family:var(--serif); font-size:17px; font-style:italic; text-transform:none; }
.site-nav { display:flex; align-items:center; gap:30px; font-size:14px; font-weight:600; }
.site-nav a { text-decoration:none; }
.nav-cta { border-bottom:2px solid var(--gold); padding-bottom:3px; }
.menu-toggle { display:none; }
.hero { min-height:624px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:52px; padding-block:56px 88px; }
.eyebrow { margin:0 0 18px; color:var(--rust); font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:630px; margin-bottom:24px; font-family:var(--serif); font-size:clamp(47px,5.3vw,78px); font-weight:600; letter-spacing:-.055em; line-height:.98; }
h1 em { color:var(--rust); font-weight:600; }
.hero-intro { max-width:520px; color:var(--muted); font-size:19px; line-height:1.5; }
.hero-actions { display:flex; align-items:center; gap:28px; margin-top:32px; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:50px; padding:13px 20px; border:0; font:600 14px var(--sans); text-decoration:none; cursor:pointer; transition:transform .2s,background .2s; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--ink); color:white; box-shadow:4px 4px 0 var(--gold); }
.button-primary:hover { background:var(--rust); }
.text-link { font-size:14px; font-weight:700; text-decoration:none; }
.text-link span { color:var(--rust); font-size:18px; margin-left:4px; }
.hero-art { position:relative; min-height:432px; overflow:hidden; background:var(--navy); box-shadow:14px 14px 0 var(--gold); color:white; }
.hero-art::before { content:""; position:absolute; inset:0; opacity:.24; background-image:linear-gradient(90deg,transparent 49%,rgba(255,255,255,.3) 50%,transparent 51%),linear-gradient(0deg,transparent 49%,rgba(255,255,255,.3) 50%,transparent 51%); background-size:58px 58px; }
.art-label { position:absolute; top:28px; left:30px; color:#c6d1dd; font:11px var(--mono); letter-spacing:.08em; }
.art-card { position:absolute; z-index:1; width:194px; min-height:117px; padding:17px; background:#f9f6f0; color:var(--ink); box-shadow:4px 4px 0 rgba(0,0,0,.18); }
.art-card strong,.art-card small { display:block; }
.art-card strong { margin:10px 0 5px; font-size:16px; line-height:1.15; }
.art-card small { color:#5e6874; font-size:11px; line-height:1.35; }
.card-icon { color:var(--rust); font:11px var(--mono); }
.card-call { top:89px; left:48px; }
.card-followup { top:177px; right:47px; }
.card-job { bottom:40px; left:95px; background:var(--gold); }
.art-line { position:absolute; width:115px; height:1px; background:var(--gold); transform-origin:left; }
.line-one { top:197px; left:201px; transform:rotate(26deg); }
.line-two { top:290px; left:274px; transform:rotate(134deg); }
.art-stamp { position:absolute; right:19px; bottom:22px; z-index:1; width:85px; height:85px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.8); border-radius:50%; text-align:center; font:10px/1.25 var(--mono); letter-spacing:.06em; transform:rotate(13deg); }
.proof-strip { background:var(--cream); border-block:1px solid var(--line); }
.proof-content { display:flex; align-items:center; justify-content:space-between; gap:40px; padding-block:20px; font-size:14px; }
.proof-content p { margin:0; }
.proof-content strong { color:var(--rust); }
.section-heading { display:grid; grid-template-columns:1fr 1fr; column-gap:50px; margin-bottom:46px; }
.section-heading .eyebrow { grid-column:1/-1; }
h2 { margin-bottom:0; font-family:var(--serif); font-size:clamp(37px,4vw,56px); letter-spacing:-.045em; line-height:1.03; }
.section-heading > p:last-child { align-self:end; max-width:415px; margin-bottom:0; color:var(--muted); font-size:17px; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.service-card { min-height:290px; padding:28px; background:var(--paper); }
.service-number { color:var(--rust); font:11px var(--mono); }
.service-card h3 { max-width:230px; margin:66px 0 14px; font-size:22px; line-height:1.12; }
.service-card p { margin-bottom:0; color:var(--muted); font-size:14px; }
.accent-card { background:var(--ink); color:white; }
.accent-card p { color:#c9d1dc; }
.approach { color:white; background:var(--navy); }
.approach-layout { display:grid; grid-template-columns:.88fr 1.12fr; gap:90px; padding-block:110px; }
.approach .eyebrow { color:var(--gold); }
.approach h2 { max-width:450px; }
.approach-copy > p:last-child { margin:24px 0 0; color:#c4ced9; }
.steps { margin:0; padding:0; list-style:none; border-top:1px solid rgba(255,255,255,.27); }
.steps li { display:grid; grid-template-columns:64px 1fr; gap:14px; padding:24px 0; border-bottom:1px solid rgba(255,255,255,.27); }
.steps span { color:var(--gold); font:11px var(--mono); }
.steps h3 { margin-bottom:3px; font-size:20px; }
.steps p { margin-bottom:0; color:#c4ced9; font-size:14px; }
.statement { padding-bottom:115px; }
blockquote { max-width:965px; margin:0; font-family:var(--serif); font-size:clamp(38px,5vw,69px); font-weight:600; letter-spacing:-.055em; line-height:1.06; }
.contact { display:grid; grid-template-columns:.84fr 1.16fr; gap:96px; padding-top:95px; border-top:1px solid var(--line); }
.contact-intro h2 { margin-bottom:20px; }
.contact-intro > p { color:var(--muted); }
.email-link { display:inline-block; margin-top:11px; color:var(--rust); font-weight:700; text-decoration-thickness:1px; text-underline-offset:4px; }
.enquiry-form { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.enquiry-form label { display:grid; gap:7px; color:#344253; font-size:13px; font-weight:700; }
.enquiry-form label:nth-of-type(3),.enquiry-form label:nth-of-type(4),.enquiry-form button,.form-status { grid-column:1/-1; }
input,textarea { width:100%; border:1px solid #abb2b9; border-radius:0; padding:12px; background:#fffdfa; color:var(--ink); font:16px var(--sans); }
input:focus,textarea:focus { outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); }
textarea { resize:vertical; }
.enquiry-form button { justify-self:start; margin-top:4px; }
.form-status { min-height:20px; margin:0; color:var(--muted); font-size:13px; }
.site-footer { margin-top:120px; background:var(--ink); color:white; }
.footer-content { display:flex; justify-content:space-between; padding-block:24px; color:#ced4dc; font-size:12px; }
.footer-content p { margin:0; }
.footer-content a { color:white; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:760px) { .section-shell,.site-header { width:min(100% - 32px,1160px); } .site-header { min-height:74px; } .menu-toggle { display:grid; gap:5px; padding:8px 0 8px 10px; border:0; background:none; cursor:pointer; } .menu-toggle span:not(.sr-only) { display:block; width:22px; height:2px; background:var(--ink); } .site-nav { position:absolute; z-index:4; top:74px; left:0; right:0; display:none; flex-direction:column; align-items:stretch; gap:0; padding:10px 16px 18px; background:var(--paper); border-bottom:1px solid var(--line); } .site-nav.is-open { display:flex; } .site-nav a { padding:13px 0; } .nav-cta { border-bottom:0; } .hero { min-height:auto; grid-template-columns:1fr; gap:48px; padding-block:52px 62px; } h1 { font-size:clamp(44px,12vw,61px); } .hero-intro { font-size:17px; } .hero-actions { flex-direction:column; align-items:flex-start; gap:19px; } .hero-art { min-height:385px; width:calc(100% - 10px); } .card-call { top:73px; left:22px; } .card-followup { top:170px; right:20px; } .card-job { bottom:30px; left:50px; } .line-one { left:177px; } .line-two { left:256px; } .proof-content { display:block; padding-block:18px; } .proof-content p + p { margin-top:4px; } .section-space { padding-block:78px; } .section-heading,.approach-layout,.contact { grid-template-columns:1fr; gap:34px; } .section-heading { margin-bottom:32px; } .section-heading > p:last-child { margin-top:18px; } .service-grid { grid-template-columns:1fr; } .service-card { min-height:215px; } .service-card h3 { margin-top:40px; } .approach-layout { padding-block:77px; } .statement { padding-bottom:75px; } .contact { padding-top:76px; } .enquiry-form { grid-template-columns:1fr; } .enquiry-form label,.enquiry-form label:nth-of-type(3),.enquiry-form label:nth-of-type(4),.enquiry-form button,.form-status { grid-column:auto; } .site-footer { margin-top:76px; } .footer-content { gap:12px; flex-direction:column; } }