:root {
  --yellow: #efc826;
  --ink: #1d1d1b;
  --ink-2: #292925;
  --paper: #f8f8f7;
  --white: #ffffff;
  --line: #474741;
  --muted: #b9b9b3;
  --content: min(1320px, calc(100vw - 72px));
  --display: "Helvetica Neue", "Avenir Next", Helvetica, Arial, sans-serif;
  --body: "DM Sans", "Avenir Next", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; background: var(--ink); }
body { margin: 0; color: var(--paper); background: var(--ink); font: 400 16px/1.6 var(--body); }
body, button, input, textarea, select { font-family: var(--body); }
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 5px; }
h1, h2, h3, p, figure { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.035em; line-height: .95; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { color: var(--ink); background: var(--yellow); }
* { scrollbar-color: var(--yellow) var(--ink); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.skip-link { position: fixed; top: 14px; left: 14px; z-index: 100; padding: 10px 15px; color: var(--ink); background: var(--paper); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: absolute; inset: 0 0 auto; z-index: 10; width: var(--content); min-height: 82px; margin: auto; display: grid; grid-template-columns: auto 1fr; align-items: center; border-bottom: 1px solid rgba(248,248,247,.3); }
.brand { width: 176px; }
.brand img { aspect-ratio: 935/382; object-fit: contain; }
.site-nav { justify-self: end; display: flex; align-items: center; gap: 30px; }
.site-nav a { font-size: .8rem; font-weight: 750; text-decoration: none; }
.site-nav a:not(.nav-cta):hover { color: var(--yellow); }
.nav-cta { min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; color: var(--ink); background: var(--yellow); }
.nav-toggle { display: none; }

.hero { position: relative; min-height: 100dvh; padding: 126px max(36px, calc((100vw - 1320px)/2)) 56px; display: grid; grid-template-columns: minmax(0,.88fr) minmax(520px,1.12fr); gap: clamp(50px, 7vw, 118px); align-items: center; isolation: isolate; overflow: hidden; background: linear-gradient(90deg, rgba(20,20,18,.96) 0%, rgba(20,20,18,.88) 40%, rgba(20,20,18,.62) 100%), url("../assets/images/construction-roof-framing-03.webp") center 52% / cover no-repeat; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,20,18,.2), transparent 45%, rgba(20,20,18,.5)); pointer-events: none; }
.hero__copy { position: relative; z-index: 2; }
.hero h1 { max-width: 770px; margin-bottom: 28px; font-size: clamp(4.5rem, 7.2vw, 7.2rem); font-weight: 850; }
.hero h1 em { color: var(--yellow); font-style: normal; }
.hero__copy > span { display: block; max-width: 44ch; color: #d2d2cc; font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
.hero__actions { margin-top: 38px; display: flex; align-items: center; gap: 26px; }
.button { min-height: 52px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 2px; font-size: .9rem; font-weight: 800; line-height: 1; text-decoration: none; cursor: pointer; transition: transform .25s cubic-bezier(.16,1,.3,1), background .25s ease, color .25s ease; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(1px); }
.button--yellow { color: var(--ink); background: var(--yellow); }
.button--yellow:hover { background: #ffda35; }
.button--dark { color: var(--paper); background: var(--ink); }
.button--dark:hover { color: var(--yellow); }
.text-link { padding-bottom: 3px; font-size: .9rem; font-weight: 800; text-decoration: none; border-bottom: 2px solid var(--yellow); }
.hero__build { position: relative; min-height: min(72vh, 760px); transform: translate3d(0, var(--photo-shift, 0), 0); animation: photo-reveal .8s cubic-bezier(.16,1,.3,1) both; }
.hero__frame { position: absolute; margin: 0; overflow: hidden; box-shadow: 0 28px 65px rgba(0,0,0,.28); }
.hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.hero__frame--structure { inset: 0 34% 14% 0; }
.hero__frame--finish { inset: 27% 0 0 51%; border: 10px solid var(--ink); }
.hero__frame--finish img { object-position: center 38%; }
.hero__frame--structure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(29,29,27,.5)); }
.measure { position: absolute; left: 5%; right: 5%; bottom: 5%; z-index: 3; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; color: var(--paper); font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.measure span:last-child { color: var(--ink); }
.measure i { height: 2px; background: var(--yellow); }

.proof { min-height: 66px; padding: 16px max(36px, calc((100vw - 1320px)/2)); display: grid; grid-template-columns: repeat(4,1fr); align-items: center; gap: 20px; color: var(--ink); background: var(--yellow); }
.proof p { margin: 0; font-size: .75rem; font-weight: 850; letter-spacing: .07em; text-align: center; text-transform: uppercase; }

.build-story { width: var(--content); margin: auto; padding: 140px 0 120px; }
.build-story__intro { max-width: 900px; margin-bottom: 76px; }
.build-story__intro h2, .gallery h2, .process h2, .fit h2, .contact h2 { margin-bottom: 24px; font-size: clamp(3.5rem, 6vw, 6rem); }
.build-story__intro p, .gallery__heading p, .process__copy p, .fit__question p { max-width: 56ch; color: var(--muted); font-size: 1.08rem; }
.build-sequence { display: grid; grid-template-columns: 1.25fr .9fr 1fr; align-items: start; gap: 20px; }
.build-sequence article { margin: 0; }
.build-sequence article:nth-child(2) { margin-top: 80px; }
.build-sequence article:nth-child(3) { margin-top: 20px; }
.build-sequence img { height: 440px; object-fit: cover; filter: saturate(.78); }
.build-sequence article:first-child img { height: 560px; }
.build-sequence div { padding: 26px 10px 0; border-top: 1px solid var(--yellow); }
.build-sequence h3 { margin-bottom: 10px; font-size: 1.7rem; }
.build-sequence p { max-width: 38ch; margin: 0; color: var(--muted); }

.signature { display: grid; grid-template-columns: 1.08fr .92fr; min-height: 760px; color: var(--ink); background: var(--yellow); }
.signature__image { min-height: 760px; }
.signature__image img { height: 100%; object-fit: cover; object-position: center 30%; }
.signature__copy { padding: clamp(60px, 8vw, 120px); align-self: center; }
.signature h2 { max-width: 720px; margin-bottom: 30px; font-size: clamp(3.5rem, 6vw, 6rem); }
.signature__copy > p { max-width: 53ch; font-size: 1.1rem; }
.signature dl { margin: 46px 0; }
.signature dl div { padding: 17px 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; border-bottom: 1px solid rgba(29,29,27,.36); }
.signature dt { font-size: .76rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.signature dd { margin: 0; font-weight: 750; }

.gallery { width: var(--content); margin: auto; padding: 150px 0; }
.gallery__heading { max-width: 790px; margin: 0 0 70px auto; }
.gallery__grid { display: grid; grid-template-columns: 1.12fr .7fr .88fr; grid-template-rows: 400px 340px; gap: 18px; }
.gallery__grid img { height: 100%; object-fit: cover; }
.gallery__grid img:nth-child(1) { grid-row: 1 / 3; }
.gallery__grid img:nth-child(2) { grid-column: 2 / 4; }
.gallery__grid img:nth-child(3) { object-position: center top; }

.process { padding: 134px max(36px, calc((100vw - 1320px)/2)); display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(70px, 10vw, 180px); color: var(--ink); background: var(--paper); }
.process__copy { position: sticky; top: 120px; align-self: start; }
.process__copy p { color: var(--ink-2); }
.process ol { margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--ink); }
.process li { min-height: 142px; padding: 30px 0; display: grid; grid-template-columns: .7fr 1.3fr; gap: 36px; border-bottom: 1px solid #c9c9c4; }
.process li strong { font-family: var(--display); font-size: 1.65rem; line-height: 1.05; }
.process li span { color: var(--ink-2); }

.fit { width: var(--content); margin: auto; padding: 130px 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(80px, 12vw, 190px); }
.fit__answers { border-top: 1px solid var(--line); }
.fit__answers p { margin: 0; padding: 28px 0; display: grid; grid-template-columns: 140px 1fr; gap: 26px; border-bottom: 1px solid var(--line); }
.fit__answers strong { color: var(--yellow); }
.fit__answers span { color: var(--muted); }

.contact { padding: 140px max(36px, calc((100vw - 1320px)/2)); display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(70px, 10vw, 160px); color: var(--ink); background: var(--yellow); }
.contact__intro { align-self: start; }
.contact__intro p { max-width: 46ch; font-size: 1.08rem; }
.contact__intro small { display: block; max-width: 52ch; padding-top: 26px; border-top: 1px solid rgba(29,29,27,.35); }
.enquiry-form { padding: clamp(28px, 5vw, 60px); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; background: var(--paper); box-shadow: 0 32px 70px rgba(29,29,27,.18); }
.enquiry-form label { display: grid; gap: 8px; }
.enquiry-form label > span { font-size: .78rem; font-weight: 800; }
.enquiry-form input, .enquiry-form textarea, .enquiry-form select { width: 100%; min-height: 50px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 2px; color: var(--ink); background: var(--white); font-size: 1rem; }
.enquiry-form textarea { resize: vertical; }
.enquiry-form input:focus, .enquiry-form textarea:focus, .enquiry-form select:focus { outline: 3px solid var(--yellow); outline-offset: 2px; }
.enquiry-form .full { grid-column: 1 / -1; }
.enquiry-form .consent { grid-template-columns: auto 1fr; align-items: start; }
.enquiry-form .consent input { width: 20px; min-height: 20px; margin: 3px 0 0; }
.form-actions { display: flex; align-items: center; gap: 22px; }
.form-actions p { margin: 0; font-size: .86rem; }
.form-actions .is-error { color: #941f1f; }
.form-actions .is-success { color: #235e42; }

.site-footer { min-height: 250px; width: var(--content); margin: auto; padding: 70px 0; display: grid; grid-template-columns: 220px 1fr auto; align-items: end; gap: 60px; }
.site-footer img { width: 220px; }
.site-footer p { max-width: 42ch; margin: 0; color: var(--muted); }
.site-footer a { color: var(--yellow); font-weight: 800; }

.motion-ready [data-reveal] { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1), clip-path .7s cubic-bezier(.16,1,.3,1); }
.motion-ready [data-reveal="composition"] { transform: none; clip-path: inset(0 0 12% 0); }
.motion-ready [data-reveal="contact"] { transform: translate3d(0, 14px, 0); }
.motion-ready [data-reveal][data-visible="true"] { opacity: 1; transform: none; clip-path: inset(0); }
.build-sequence article:nth-child(2) { transition-delay: .07s; }
.build-sequence article:nth-child(3) { transition-delay: .14s; }
@keyframes photo-reveal { from { opacity: .72; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0); } }

@media (max-width: 980px) {
  :root { --content: min(100% - 40px, 820px); }
  .site-header { grid-template-columns: 1fr auto; }
  .nav-toggle { width: 46px; height: 46px; display: grid; place-content: center; gap: 6px; border: 1px solid rgba(248,248,247,.4); color: var(--paper); background: var(--ink); }
  .nav-toggle span { width: 20px; height: 2px; background: currentColor; }
  .site-nav { position: absolute; top: 82px; right: 0; width: min(340px, calc(100vw - 40px)); padding: 24px; display: none; align-items: stretch; flex-direction: column; background: var(--paper); color: var(--ink); box-shadow: 0 24px 50px rgba(0,0,0,.3); }
  .site-nav[data-open="true"] { display: flex; }
  .hero { grid-template-columns: 1fr; gap: 48px; padding-top: 130px; background-position: 58% center; }
  .hero__build { min-height: 650px; }
  .proof { grid-template-columns: 1fr 1fr; padding-block: 20px; }
  .build-sequence { grid-template-columns: 1fr 1fr; }
  .build-sequence article:nth-child(3) { grid-column: 1 / -1; width: 62%; margin: 0 0 0 auto; }
  .signature { grid-template-columns: 1fr; }
  .signature__image { min-height: 640px; }
  .gallery__grid { grid-template-columns: 1fr 1fr; grid-template-rows: 500px 330px 420px; }
  .gallery__grid img:nth-child(1) { grid-row: 1 / 2; }
  .gallery__grid img:nth-child(2) { grid-column: 2; }
  .gallery__grid img:nth-child(4) { grid-column: 1 / -1; }
  .process, .fit, .contact { grid-template-columns: 1fr; }
  .process__copy { position: static; }
  .site-footer { grid-template-columns: 180px 1fr; }
  .site-footer a { grid-column: 2; }
}

@media (max-width: 640px) {
  :root { --content: min(100% - 30px, 560px); }
  .brand { width: 140px; }
  .hero { min-height: auto; padding: 112px 15px 56px; background-image: linear-gradient(180deg, rgba(20,20,18,.72) 0%, rgba(20,20,18,.88) 46%, rgba(20,20,18,.96) 100%), url("../assets/images/construction-roof-framing-03-640.webp"); background-position: 58% center; }
  .hero h1 { font-size: clamp(3.45rem, 16vw, 5.3rem); }
  .hero__actions { align-items: flex-start; flex-direction: column; }
  .hero__build { min-height: 480px; }
  .hero__frame--structure { inset: 0 26% 13% 0; }
  .hero__frame--finish { inset: 31% 0 0 46%; border-width: 7px; }
  .proof { grid-template-columns: 1fr; gap: 10px; padding-block: 24px; }
  .build-story { padding: 88px 0; }
  .build-sequence { grid-template-columns: 1fr; }
  .build-sequence article, .build-sequence article:nth-child(2), .build-sequence article:nth-child(3) { width: 100%; margin: 0 0 40px; }
  .build-sequence img, .build-sequence article:first-child img { height: 440px; }
  .signature__image { min-height: 530px; }
  .signature__copy { padding: 68px 24px; }
  .signature dl div { grid-template-columns: 1fr; gap: 6px; }
  .gallery { padding: 90px 0; }
  .gallery__grid { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(4, 470px); }
  .gallery__grid img, .gallery__grid img:nth-child(n) { grid-column: auto; grid-row: auto; }
  .process, .contact { padding: 86px 20px; }
  .process li { grid-template-columns: 1fr; gap: 12px; }
  .fit { padding: 88px 0; gap: 44px; }
  .fit__answers p { grid-template-columns: 1fr; gap: 7px; }
  .enquiry-form { grid-template-columns: 1fr; padding: 25px 18px; }
  .enquiry-form label, .enquiry-form .full { grid-column: auto; }
  .form-actions { align-items: flex-start; flex-direction: column; }
  .site-footer { grid-template-columns: 1fr; gap: 30px; }
  .site-footer a { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .motion-ready [data-reveal] { opacity: 1; transform: none; clip-path: none; transition: none; }
  .hero__build { clip-path: none; transform: none; }
}