/* Enviro Contracts Ltd · envirocontracts.com · direction B, dark premium (approved by the client, 2026-09-29).
   Ported from the approved preview (proposal/preview/index.html) with its rules unchanged; additions are marked.
   Fonts: self-hosted, SIL Open Font Licence 1.1 (Manrope, Michroma, IBM Plex Mono). Skyload stays inside the logo. */

@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono--F63fjptAgt5VM-kVkqdyU8n1i8q1w.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono--F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/manrope-xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/manrope-xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/manrope-xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/manrope-xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/michroma-PN_zRfy9qWD8fEagAPg9pTk.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ground:#161510; --ground-2:#1d1b15; --bar:#0f0e0b;
  --text:#f3f1ea; --champagne:#c9bb95; --soft:#c5bea3; --muted:#a9a390;
  --rule:rgba(201,187,149,.28);
  --paper:#f3f1ea; --ink:#1f1d16; --ink-2:#4a463a; --olive-d:#5c553c; --paper-rule:#a79e81;
  --alert:#8a2c1c;
  --pad:clamp(20px,4vw,48px);
  --art:430px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:rgba(201,187,149,.18)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--ground);color:var(--text);font:400 17px/1.65 "Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:var(--champagne);color:var(--ground)}
img{max-width:100%;height:auto;display:block}
a{color:var(--champagne)}
a:focus-visible{outline:2px solid var(--champagne);outline-offset:3px;border-radius:4px}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:max(var(--pad),env(safe-area-inset-left)) max(var(--pad),env(safe-area-inset-right))}
.ico{display:inline-block;width:.85em;height:.85em;margin-left:.45em;vertical-align:-.06em;flex:none}
.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}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:12px;z-index:10;background:var(--champagne);color:var(--ground);padding:8px 14px;border-radius:8px;text-decoration:none;font-weight:600}
[id]{scroll-margin-top:20px}

/* header: logo | nav (true centre) | phone */
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px 28px;padding-block:22px}
.brand{justify-self:start;display:block}
.brand img{height:60px;width:auto}
.top nav{justify-self:center}
.top ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.top nav a{display:inline-block;padding-block:6px;color:var(--soft);text-decoration:none;font-size:15px}
.top nav a:hover{color:var(--text)}
.tel{justify-self:end;color:var(--champagne);font-weight:600;font-size:17px;text-decoration:none;white-space:nowrap;padding-block:8px}
.tel:hover{color:var(--text)}

/* hero: copy on the content's left edge, mark and credential on its right edge */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--art));gap:clamp(32px,5vw,80px);align-items:center;padding-block:clamp(40px,6vw,88px) clamp(40px,5vw,64px)}
.eyebrow{font:400 12px/1.4 "Michroma",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--champagne);margin:0 0 18px}
h1{font:300 clamp(44px,5.8vw,78px)/1.02 "Manrope",sans-serif;letter-spacing:-.025em;margin:0 0 24px;text-wrap:balance}
.lede{margin:0 0 32px;max-width:52ch}
.lede p{margin:0;color:var(--soft);font-size:clamp(17px,1.45vw,19px);line-height:1.6;text-wrap:balance}
.lede p+p{margin-top:6px}
.ctas{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--champagne);border-radius:999px;padding:13px 24px;color:var(--text);font-weight:600;font-size:15px;line-height:1.2;text-decoration:none}
.btn:hover{background:var(--champagne);color:var(--ground)}
.call{color:var(--champagne);font-weight:600;text-decoration:none}
.call:hover{color:var(--text)}
.art{display:grid;justify-items:center;gap:28px}
/* The pyramid shows only beside the copy; stacked layouts go without it.
   As a CSS background inside the media query, phones never download it. */
.mark{display:none}
@media (min-width:961px){
  .mark{display:block;width:min(100%,420px);aspect-ratio:520/454;background:url("../img/mark-champagne.webp") center/contain no-repeat}
}

/* credential, referenced from the SSIP Portal entry (address and personnel left out on purpose) */
.cred{width:100%;background:var(--ground-2);border:1px solid var(--rule);border-radius:14px;padding:20px 22px 16px}
.cred-head{display:grid;gap:6px;margin:0 0 14px}
.cred-k{font:400 11.5px/1.4 "Michroma",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--champagne)}
.cred-no{font:500 15px/1.4 "IBM Plex Mono",monospace;color:var(--text);white-space:nowrap}
.cred-no span{color:var(--muted)}
.cred dl{margin:0}
.cred dl div{display:grid;grid-template-columns:8.8em minmax(0,1fr);gap:12px;align-items:baseline;border-top:1px solid var(--rule);padding-block:8px;font-size:14px;line-height:1.45}
.cred dt{color:var(--muted)}
.cred dd{margin:0;color:var(--text)}
.cred-link{display:inline-flex;align-items:center;margin-top:6px;padding-block:6px;font-weight:600;font-size:14.5px;text-underline-offset:3px}
.cred-link:hover{color:var(--text)}

/* company facts */
.strip{list-style:none;margin:0;padding:15px 0;border-block:1px solid var(--champagne);display:flex;flex-wrap:wrap;gap:8px 36px;font:400 11.5px/1.5 "Michroma",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--champagne)}

/* statements: label and first line share a baseline */
.stmts{padding-block:clamp(56px,7vw,104px) 0}
.stmt{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(12px,3vw,48px);align-items:baseline;padding-block:clamp(26px,3vw,40px);border-top:1px solid var(--rule)}
.stmt:first-child{border-top:0;padding-top:0}
.stmt h2{font:400 12px/1.6 "Michroma",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--champagne);margin:0}
.stmt p{margin:0;font-size:clamp(19px,1.9vw,26px);line-height:1.5;max-width:52ch;text-wrap:pretty}

/* contact */
.intake{margin-block:clamp(24px,3vw,40px) 0;background:var(--paper);color:var(--ink);border-radius:16px;padding:clamp(24px,3.2vw,40px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:28px 40px;align-items:start}
.intake h2{font:300 34px/1.1 "Manrope",sans-serif;letter-spacing:-.01em;margin:0 0 12px}
.intake p{margin:0;color:var(--ink-2);font-size:15.5px}
.intake a:focus-visible{outline-color:var(--olive-d)}
.direct{margin:24px 0 0;display:grid;gap:6px}
.direct div{display:grid;grid-template-columns:3.8em minmax(0,1fr);gap:12px;align-items:baseline;font-size:15.5px}
.direct dt{font:500 12px "IBM Plex Mono",monospace;color:var(--olive-d)}
.direct dd{margin:0}
.direct a{color:var(--ink);font-weight:600;text-decoration-color:var(--paper-rule);text-underline-offset:3px}
.rows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}
.rows li{border-bottom:1px solid var(--paper-rule);padding:13px 0;font-size:15px;color:var(--ink-2)}
.rows b{font:500 12px "IBM Plex Mono",monospace;color:var(--olive-d);margin-right:10px}

/* ADDED 2026-09-29: the preview's six rows become the working form. Each row keeps its number, label and
   hairline; the field sits on the hairline. No JavaScript: native validation, then the server checks again. */
.brief{margin:0}
.rows li.f{display:grid;gap:2px;padding:13px 0 6px;transition:box-shadow .15s}
.rows li.f label{cursor:pointer}
.rows li.f:focus-within{box-shadow:inset 0 -2px 0 var(--olive-d)}
.rows li.f.bad{box-shadow:inset 0 -2px 0 var(--alert)}
.rows input,.rows select,.rows textarea{display:block;width:100%;margin:0;border:0;border-radius:0;background:transparent;color:var(--ink);
  font:500 16px/1.4 "Manrope",system-ui,sans-serif;padding:4px 0 6px;outline:none;-webkit-appearance:none;appearance:none}
.rows textarea{resize:none;min-height:32px;field-sizing:content;max-height:12em;overflow-y:auto}
.rows select{cursor:pointer;padding-right:22px;background-image:linear-gradient(45deg,transparent 50%,var(--olive-d) 50%),linear-gradient(135deg,var(--olive-d) 50%,transparent 50%);
  background-position:calc(100% - 9px) 55%,calc(100% - 4px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.rows .opt{font:400 11px "IBM Plex Mono",monospace;color:var(--olive-d);letter-spacing:.02em;margin-left:6px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:22px}
.btn-ink{border-color:var(--ink);color:var(--ink);background:transparent;cursor:pointer;font-family:inherit}
.btn-ink:hover{background:var(--ink);color:var(--paper)}
.btn-ink:focus-visible{outline:2px solid var(--olive-d);outline-offset:3px}
.send p{font-size:13.5px;color:var(--ink-2);max-width:40ch}
.send a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--paper-rule)}
.notice{margin:0 0 14px;padding:12px 14px;border-radius:10px;font-size:15px;line-height:1.5}
.notice.err{background:#f6e3dd;color:var(--alert);border:1px solid #e3b7aa}
.notice.err ul{margin:6px 0 0;padding-left:18px}
.notice.err a{color:var(--alert);text-decoration-color:currentColor;text-underline-offset:2px}
.sent{border-top:1px solid var(--paper-rule);border-bottom:1px solid var(--paper-rule);padding:22px 0}
.sent-k{font:500 12px "IBM Plex Mono",monospace;color:var(--olive-d);letter-spacing:.04em;margin:0 0 8px}
.intake .sent p.sent-t{font:300 26px/1.25 "Manrope",sans-serif;color:var(--ink);margin:0 0 10px}
.sent a{color:var(--ink);font-weight:600}

/* statutory footer (SI 2015/17 regs 24-25) */
.foot{padding-block:clamp(48px,6vw,80px) 40px;color:var(--muted);font-size:13.5px;line-height:1.75}
.foot-in{border-top:1px solid var(--rule);padding-top:28px;display:grid;gap:4px}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:16px 28px;flex-wrap:wrap;margin-bottom:18px}
.foot-logo{height:44px;width:auto}
.foot-contact{margin:0;font-size:15px}
.foot-contact a{color:var(--champagne);text-decoration:none;font-weight:600}
.foot-contact a:hover{color:var(--text)}
.foot-contact .dot{color:var(--muted);margin-inline:10px}
.foot p{margin:0}
.foot .legal{color:var(--soft)}
/* ADDED 2026-09-29: privacy notice link (UK GDPR Art 13) */
.foot .foot-links{margin-top:10px}
.foot-links a{color:var(--soft);text-underline-offset:3px;text-decoration-color:var(--rule)}
.foot-links a:hover{color:var(--text)}

/* ADDED 2026-09-29: text pages (privacy notice) and the not-found page */
.page{padding-block:clamp(40px,6vw,88px) 0}
.page-k{font:400 12px/1.4 "Michroma",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--champagne);margin:0 0 18px}
.page h1{font-size:clamp(38px,4.6vw,60px);margin-bottom:28px}
.prose{max-width:68ch;color:var(--soft)}
.prose>*:first-child{margin-top:0}
.prose p,.prose li{font-size:17px;line-height:1.7}
.prose p{margin:0 0 16px}
.prose h2{font:400 12px/1.6 "Michroma",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--champagne);margin:44px 0 14px;padding-top:26px;border-top:1px solid var(--rule)}
.prose h3{font:600 17px/1.4 "Manrope",sans-serif;color:var(--text);margin:24px 0 8px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin:0 0 6px}
.prose li::marker{color:var(--champagne)}
.prose strong{color:var(--text);font-weight:600}
.prose a{text-underline-offset:3px}
.prose a:hover{color:var(--text)}
.back{display:inline-flex;margin-top:28px}

@media (max-width:960px){
  .hero,.stmt,.intake{grid-template-columns:minmax(0,1fr)}
  .art{justify-items:start}
  .cred{max-width:480px}
  .stmt{gap:10px}
  .rows{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .top{grid-template-columns:auto 1fr;padding-block:16px 0;row-gap:14px}
  .brand{grid-area:1 / 1}
  .tel{grid-area:1 / 2}
  .brand img{height:52px}
  .top nav{grid-area:2 / 1 / 3 / -1;justify-self:stretch;border-block:1px solid var(--rule)}
  .top ul{justify-content:space-between}
  .top nav a{padding-block:12px}
  .ctas{flex-direction:column;align-items:stretch;gap:6px}
  .btn{padding-block:15px}
  .call{align-self:center;padding:12px 16px}
  .cred{max-width:none;padding:18px 18px 14px}
  .cred dl div{grid-template-columns:minmax(0,1fr);gap:2px}
  .cred dt{font-size:12.5px}
  .cred dd{font-size:15px}
  .cred-link{padding-block:10px;margin-top:2px}
  .strip{flex-direction:column;gap:6px;padding-block:16px;font-size:11px;letter-spacing:.06em}
  .intake h2{font-size:30px}
  .rows{grid-template-columns:minmax(0,1fr)}
  .foot-top{flex-direction:column;align-items:flex-start;gap:14px}
  /* ADDED: full-width send button on phones, like the hero CTA */
  .send{flex-direction:column;align-items:stretch}
  .send .btn-ink{width:100%}
}