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

:root { --ink:#121311; --ink-2:#1c1d19; --paper:#e9e5dc; --sand:#b5a27f; --line:rgba(233,229,220,.19); --muted:#a9a79e; --display:"Manrope",Arial,sans-serif; --serif:"Playfair Display",Georgia,serif; --mono:"DM Mono",monospace; --shell:min(100% - 40px, 1400px); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); overflow-x:clip; }
body { margin:0; max-width:100%; overflow-x:hidden; color:var(--paper); background:var(--ink); font-family:var(--display); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.shell { width:var(--shell); margin-inline:auto; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link { position:fixed; z-index:20; left:1rem; top:-5rem; background:var(--paper); color:var(--ink); padding:.75rem 1rem; font-weight:700; }.skip-link:focus { top:1rem; }
.site-header { position:absolute; z-index:10; inset:0 0 auto; border-bottom:1px solid var(--line); transition:background .3s,backdrop-filter .3s; }.site-header.is-scrolled { position:fixed; background:rgba(18,19,17,.9); backdrop-filter:blur(12px); }
.nav-wrap { min-height:77px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; flex-direction:column; gap:0; font:800 clamp(1rem,2vw,1.28rem)/.75 var(--display); letter-spacing:-.08em; }.brand span:last-child { color:var(--sand); }
.main-navigation { position:fixed; visibility:hidden; opacity:0; transform:translateY(-10px); transition:.25s; inset:77px 0 auto; padding:24px 20px 32px; background:var(--ink); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:22px; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.main-navigation.is-open { visibility:visible; opacity:1; transform:translateY(0); }.main-navigation > a:not(.button) { color:var(--paper); }.main-navigation > a:not(.button):hover { color:var(--sand); }
.menu-toggle { width:45px; height:45px; border:0; border-left:1px solid var(--line); background:transparent; color:var(--paper); display:grid; align-content:center; justify-content:end; gap:6px; cursor:pointer; }.menu-toggle span:not(.sr-only) { width:20px; height:1px; background:currentColor; transition:.2s; }.menu-toggle[aria-expanded="true"] span:nth-child(2) { transform:translateY(3.5px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-3.5px) rotate(-45deg); }
.button { display:inline-flex; align-items:center; gap:1.2rem; width:max-content; padding:1.05rem 1.35rem; background:var(--sand); color:var(--ink); font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; transition:background .25s,transform .25s; }.button:hover { background:#d4c39f; transform:translateY(-2px); }.button span { font-size:1rem; }.button--small { padding:.82rem 1rem; margin-top:4px; }.button--light { background:var(--paper); }
.hero { position:relative; min-height:100svh; min-height:650px; display:flex; overflow:hidden; background:#10110f; }.hero-media,.hero-overlay { position:absolute; inset:0; }.hero-media { background:#191a17 url("/media/shed-built-hero-poster.svg") center/cover no-repeat; }.hero-video { width:100%; height:100%; object-fit:cover; }.hero-overlay { background:linear-gradient(90deg,rgba(10,11,9,.78) 0%,rgba(10,11,9,.42) 55%,rgba(10,11,9,.58)),linear-gradient(0deg,rgba(10,11,9,.68),transparent 45%); }.hero-content { position:relative; z-index:1; display:flex; min-height:100svh; min-height:650px; flex-direction:column; justify-content:flex-end; padding-bottom:8.5rem; }
.eyebrow { display:flex; justify-content:space-between; gap:1rem; margin:0 0 1.5rem; color:var(--sand); font:500 .62rem/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; }.eyebrow span { color:var(--muted); }
.hero-title { max-width:800px; margin:0; font-size:clamp(3.2rem,10vw,8.25rem); line-height:.86; letter-spacing:-.075em; font-weight:800; }.hero-title em,.section-heading h2 em,.statement h2 em { font-family:var(--serif); font-weight:500; letter-spacing:-.08em; }.hero-bottom { display:flex; flex-direction:column; gap:1.75rem; margin-top:2rem; }.hero-bottom p { max-width:380px; margin:0; color:#d5d1c9; font-size:.92rem; line-height:1.65; }.scroll-cue { position:absolute; z-index:1; bottom:1.65rem; right:20px; display:flex; align-items:center; gap:.8rem; color:var(--muted); font:500 .57rem var(--mono); text-transform:uppercase; letter-spacing:.1em; }.scroll-cue i { width:25px; height:1px; background:var(--sand); }
.section { padding:5.5rem 0; }.services { background:var(--ink-2); }.section-heading { display:grid; gap:1rem; padding-bottom:2.8rem; border-bottom:1px solid var(--line); }.section-heading h2,.statement h2,.quote-cta h2 { max-width:800px; margin:0; font-size:clamp(2.35rem,5vw,5.5rem); line-height:.98; letter-spacing:-.065em; }.section-intro { max-width:380px; margin:1.5rem 0 0; color:var(--muted); font-size:.92rem; line-height:1.7; }
.service-grid { display:grid; border-left:1px solid var(--line); }.service-card { position:relative; min-height:180px; padding:1.3rem; border:solid var(--line); border-width:0 1px 1px 0; transition:background .25s,color .25s; }.service-card:hover { background:var(--sand); color:var(--ink); }.service-card span,.project-detail p,.fine-print { color:var(--sand); font:500 .58rem var(--mono); text-transform:uppercase; letter-spacing:.08em; }.service-card:hover span { color:#554d3c; }.service-card h3 { position:absolute; left:1.3rem; bottom:1.25rem; margin:0; font-size:1.2rem; line-height:1.05; letter-spacing:-.05em; }.service-card i { position:absolute; right:1.3rem; bottom:1.25rem; font-style:normal; color:var(--sand); }.service-card:hover i { color:var(--ink); }.material-strip { display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.5rem; padding-top:2rem; color:var(--muted); font-size:.78rem; }.material-strip span { color:var(--sand); font:500 .57rem var(--mono); text-transform:uppercase; letter-spacing:.12em; }.material-strip strong { color:var(--paper); font-weight:500; }
.text-link { width:max-content; border-bottom:1px solid var(--sand); padding-bottom:.5rem; color:var(--sand); font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.home-projects-link { margin:2.5rem 0 0; }
.statement { padding:6.5rem 0; background:var(--sand); color:var(--ink); }.statement .eyebrow { color:#5f5747; }.statement .eyebrow span { color:#796f5c; }.statement h2 { max-width:980px; }.statement p:last-child { max-width:400px; margin:2rem 0 0; font-size:.93rem; line-height:1.7; }.quote-form-section { background:#25251f; }.quote-form-heading { display:grid; gap:1rem; padding-bottom:3rem; border-bottom:1px solid var(--line); }.quote-form-heading h2 { max-width:800px; margin:0; font-size:clamp(2.35rem,5vw,5.5rem); line-height:.98; letter-spacing:-.065em; }.quote-form-heading h2 em { font-family:var(--serif); font-weight:500; letter-spacing:-.08em; }.quote-form-heading div > p { max-width:430px; margin:1.5rem 0 0; color:var(--muted); font-size:.92rem; line-height:1.7; }.quote-form { padding-top:1.4rem; }.form-group { padding:2.4rem 0; border-bottom:1px solid var(--line); }.form-group__heading { display:flex; align-items:baseline; gap:1rem; margin-bottom:2rem; }.form-group__heading span { color:var(--sand); font:500 .6rem var(--mono); }.form-group__heading h3 { margin:0; font-size:1.1rem; letter-spacing:-.045em; }.form-grid { display:grid; gap:1.5rem; }.field { display:flex; flex-direction:column; gap:.65rem; }.field label { color:var(--paper); font-size:.67rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }.field label em,.form-submit p em { color:var(--sand); font-style:normal; }.field input,.field select,.field textarea { width:100%; appearance:none; border:0; border-bottom:1px solid rgba(233,229,220,.35); border-radius:0; outline:0; padding:.35rem 0 .75rem; background:transparent; color:var(--paper); font:500 .98rem/1.5 var(--display); transition:border-color .2s,box-shadow .2s; }.field select { padding-right:2rem; background-image:linear-gradient(45deg,transparent 50%,var(--sand) 50%),linear-gradient(135deg,var(--sand) 50%,transparent 50%); background-position:calc(100% - 12px) 50%,calc(100% - 7px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }.field select option { color:var(--ink); }.field textarea { resize:vertical; min-height:130px; }.field input::placeholder,.field textarea::placeholder { color:#85837c; }.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--sand); box-shadow:0 1px 0 var(--sand); }.field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid { border-color:#e39378; }.file-area input { position:absolute; inline-size:1px; block-size:1px; opacity:0; }.file-dropzone { min-height:205px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:1.5rem; border:1px dashed rgba(233,229,220,.35); cursor:pointer; transition:background .2s,border-color .2s; }.file-dropzone:hover,.file-area input:focus-visible + .file-dropzone { background:rgba(181,162,127,.1); border-color:var(--sand); }.file-icon { display:grid; width:34px; height:34px; place-items:center; margin-bottom:1.25rem; border:1px solid var(--sand); color:var(--sand); font-size:1.3rem; }.file-dropzone strong { font-size:1.05rem; letter-spacing:-.03em; }.file-dropzone span:not(.file-icon) { margin-top:.45rem; color:var(--muted); font-size:.78rem; }.file-dropzone small { margin-top:1.25rem; color:var(--sand); font:500 .6rem var(--mono); letter-spacing:.08em; text-transform:uppercase; }.file-status { margin:.8rem 0 0; color:var(--muted); font:500 .6rem var(--mono); letter-spacing:.07em; text-transform:uppercase; }.form-submit { display:flex; flex-direction:column; align-items:flex-start; gap:1.3rem; padding-top:2rem; }.form-submit p { margin:0; color:var(--muted); font:500 .6rem var(--mono); letter-spacing:.07em; text-transform:uppercase; }.form-confirmation { display:flex; gap:1.25rem; align-items:flex-start; max-width:600px; margin-top:2rem; padding:1.5rem; border:1px solid var(--sand); background:rgba(181,162,127,.1); }.form-confirmation > span { display:grid; flex:0 0 auto; width:28px; height:28px; place-items:center; border-radius:50%; background:var(--sand); color:var(--ink); font-weight:800; }.form-confirmation strong { font-size:1.04rem; }.form-confirmation p { margin:.4rem 0 0; color:var(--muted); font-size:.86rem; line-height:1.5; }.site-footer { border-top:1px solid var(--line); padding:2rem 0; color:var(--muted); }.site-footer .shell { display:grid; gap:1.5rem; }.site-footer p { margin:0; font-size:.72rem; line-height:1.6; }
.reveal { animation:reveal .75s both; }.hero-title { animation-delay:.08s; }.hero-bottom { animation-delay:.16s; }@keyframes reveal { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.reveal { animation:none; }.site-header,.main-navigation,.button { transition:none; } }
@media (min-width:700px) { :root { --shell:min(100% - 80px, 1400px); }.nav-wrap { min-height:88px; }.menu-toggle { display:none; }.main-navigation { position:static; visibility:visible; opacity:1; transform:none; inset:auto; padding:0; background:none; border:0; flex-direction:row; align-items:center; gap:clamp(1rem,2vw,2.4rem); font-size:.64rem; }.main-navigation .button { margin:0 0 0 .4rem; }.hero-content { padding-bottom:8rem; }.hero-bottom { flex-direction:row; justify-content:space-between; align-items:end; max-width:810px; }.scroll-cue { right:40px; bottom:2.2rem; }.section { padding:8rem 0; }.section-heading,.quote-form-heading { grid-template-columns:1fr 2.1fr; gap:3rem; }.section-heading > .text-link { align-self:end; justify-self:end; }.section-heading--compact { grid-template-columns:1fr 1.6fr auto; }.service-grid { grid-template-columns:repeat(2,1fr); }.service-card { min-height:255px; padding:1.7rem; }.service-card h3 { left:1.7rem; bottom:1.65rem; font-size:1.65rem; }.service-card i { right:1.7rem; bottom:1.65rem; }.material-strip { justify-content:flex-end; gap:1.5rem 2.5rem; }.project-grid { grid-template-columns:1.35fr .85fr; align-items:start; }.project-card:nth-child(2) { margin-top:7rem; }.statement { padding:10rem 0; }.statement p:last-child { margin-left:calc(33.33% + 1rem); }.form-group { display:grid; grid-template-columns:1fr 2.1fr; gap:3rem; }.form-group__heading { margin:0; }.form-grid { grid-template-columns:repeat(2,1fr); column-gap:2rem; }.field--full { grid-column:1 / -1; }.form-submit { flex-direction:row; align-items:center; justify-content:space-between; }.site-footer .shell { grid-template-columns:1fr 1fr auto; align-items:end; } }
@media (min-width:1100px) { .hero-content { padding-bottom:9rem; }.service-grid { grid-template-columns:repeat(4,1fr); }.service-card { min-height:320px; }.section-intro { margin-top:2rem; }.project-image { aspect-ratio:1.42; } }
.nav-wrap { position:relative; }.site-header .brand { position:absolute; left:50%; transform:translateX(-50%); }.site-header .brand.is-mobile-centred { position:absolute; left:50%; transform:translateX(-50%); }.menu-toggle { margin-left:auto; }.site-footer { padding:3rem 0; }.footer-grid { display:grid; gap:2.5rem; }.footer-nav,.footer-social { display:grid; justify-items:start; gap:.8rem; }.footer-nav a,.footer-social a { display:inline-flex; align-items:center; gap:.65rem; min-height:32px; color:var(--paper); font:500 .64rem var(--mono); letter-spacing:.1em; text-transform:uppercase; }.footer-nav a:last-child { color:var(--sand); }.footer-contact { display:grid; justify-items:center; gap:.95rem; }.footer-contact__link { display:inline-flex; max-width:100%; align-items:flex-start; justify-content:center; gap:.65rem; color:var(--muted); font-size:.8rem; line-height:1.55; text-align:center; }.footer-contact svg,.footer-social svg { flex:0 0 auto; width:16px; height:16px; margin-top:.15rem; fill:none; stroke:currentColor; stroke-width:1.5; }.footer-social svg { margin-top:0; fill:currentColor; stroke:none; }.footer-nav a:hover,.footer-social a:hover,.footer-contact__link:hover { color:var(--sand); } @media (max-width:699px) { .site-header .brand { position:absolute; left:50%; transform:translateX(-50%); } } @media (min-width:700px) { .site-header .brand { position:static; transform:none; }.menu-toggle { margin-left:0; }.site-footer { padding:4.5rem 0; }.footer-grid { grid-template-columns:minmax(0,1fr) minmax(260px,1fr) minmax(0,1fr); align-items:start; }.footer-nav { justify-self:start; }.footer-contact { justify-self:center; }.footer-social { justify-self:end; } }
.site-footer { padding:2.5rem 0; }.footer-grid { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start; column-gap:1.25rem; row-gap:1.25rem; }.footer-nav { grid-column:1; grid-row:1 / span 2; align-content:start; gap:.35rem; }.footer-nav a { min-height:26px; }.footer-contact { grid-column:2; grid-row:1; justify-self:stretch; justify-items:end; align-content:start; gap:.55rem; }.footer-contact__link { justify-content:flex-end; text-align:right; }.footer-social { grid-column:2; grid-row:2; justify-self:stretch; grid-auto-flow:row; justify-items:end; align-content:start; gap:.35rem; }.footer-social a { min-height:26px; } @media (min-width:700px) { .site-footer { padding:3rem 0; }.footer-grid { grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr); column-gap:2rem; row-gap:.9rem; }.footer-nav { grid-column:1; grid-row:1 / span 2; justify-self:start; }.footer-contact { grid-column:2; grid-row:1; justify-self:center; justify-items:center; }.footer-contact__link { justify-content:center; text-align:center; }.footer-social { grid-column:2; grid-row:2; justify-self:center; grid-auto-flow:column; justify-items:center; gap:1.5rem; }.footer-social a { min-height:26px; } }
.button { border:1px solid var(--paper); background:var(--paper); color:var(--ink); }.button--light { background:var(--paper); color:var(--ink); }.button:hover { background:transparent; color:var(--paper); }.button:focus-visible { outline:2px solid var(--paper); outline-offset:3px; }.site-header .brand { width:min(58vw,230px); background-size:contain; } @media (min-width:700px) { .site-header .brand { width:clamp(190px,24vw,260px); }.main-navigation { gap:clamp(.7rem,1.4vw,1.5rem); font-size:clamp(.72rem,.86vw,.84rem); }.main-navigation .button { margin-left:.5rem; padding:.95rem 1.25rem; font-size:.74rem; } }