:root {
  --colour-yellow: #fbe601;
  --colour-charcoal: #343434;
  --colour-black: #181817;
  --colour-white: #fff;
  --colour-warm-white: #f7f7f3;
  --colour-stone: #e7e7df;
  --colour-grey: #686863;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --container: 1400px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-space: clamp(5rem, 10vw, 9rem);
  --radius-small: 12px;
  --radius-card: 20px;
  --radius-media: 28px;
  --shadow: 0 24px 70px rgba(20, 20, 18, 0.1);
  --ease: 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--colour-white);
  color: var(--colour-charcoal);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.menu-is-open { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--colour-charcoal); font-weight: 600; letter-spacing: -0.045em; }
h1 { margin-bottom: 1.75rem; font-size: clamp(3.25rem, 6.4vw, 6.25rem); line-height: 0.95; }
h2 { margin-bottom: 1.75rem; font-size: clamp(2.45rem, 4.7vw, 4.75rem); line-height: 1; }
h3 { margin-bottom: 0.75rem; font-size: clamp(1.35rem, 2vw, 1.85rem); line-height: 1.15; }
em { color: var(--colour-grey); font-style: normal; font-weight: 400; }

:focus-visible { outline: 3px solid var(--colour-yellow); outline-offset: 4px; }

.container { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section-space); }
.section--products, .section--process, .section--faq { background: var(--colour-warm-white); }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 1rem;
  left: 1rem;
  padding: 0.8rem 1.1rem;
  transform: translateY(-160%);
  border-radius: 999px;
  background: var(--colour-yellow);
  color: var(--colour-charcoal);
  font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }

.eyebrow {
  margin-bottom: 1.25rem;
  color: var(--colour-grey);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.section-index {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--colour-grey);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.section-index span { display: inline-block; width: 3rem; height: 1px; background: currentColor; opacity: 0.5; }
.section-index--light { color: rgba(255, 255, 255, 0.58); }

.button-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.85rem 0.9rem 0.85rem 1.4rem;
  border: 1px solid var(--colour-charcoal);
  border-radius: 999px;
  background: var(--colour-charcoal);
  color: var(--colour-white);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: color var(--ease), background var(--ease), border-color var(--ease), transform var(--ease);
}
.button > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--colour-yellow);
  color: var(--colour-charcoal);
  font-size: 1rem;
}
.button:hover { transform: translateY(-2px); background: var(--colour-black); }
.button--compact { min-height: 44px; padding: 0.45rem 0.45rem 0.45rem 1.1rem; }
.button--compact > span { width: 32px; height: 32px; }
.button--outline { background: transparent; color: var(--colour-charcoal); }
.button--outline:hover { color: var(--colour-white); }
.button--light { border-color: var(--colour-white); background: var(--colour-white); color: var(--colour-charcoal); }
.button--light:hover { border-color: var(--colour-yellow); background: var(--colour-yellow); }
.button--outline-light { border-color: rgba(255,255,255,0.5); background: transparent; color: var(--colour-white); padding-inline: 1.5rem; }
.button--outline-light:hover { border-color: var(--colour-white); background: var(--colour-white); color: var(--colour-charcoal); }
.quote-cta .button--outline-light { border-color: var(--colour-charcoal); color: var(--colour-charcoal); }
.quote-cta .button--outline-light:hover { border-color: var(--colour-charcoal); background: var(--colour-charcoal); color: var(--colour-white); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.88rem;
  font-weight: 750;
  text-decoration: none;
}
.text-link b { transition: transform var(--ease); }
.text-link:hover b { transform: translate(3px, -3px); }
.text-link--large { padding-bottom: 0.35rem; border-bottom: 1px solid currentColor; font-size: 1rem; }
.text-link--light { color: var(--colour-white); }

.utility-bar { position: relative; z-index: 30; background: var(--colour-black); color: rgba(255,255,255,0.76); }
.utility-bar__inner { display: flex; min-height: 35px; align-items: center; justify-content: space-between; font-size: 0.69rem; letter-spacing: 0.04em; }
.utility-bar p { margin: 0; }
.utility-bar a { text-decoration: none; }

.site-header {
  position: sticky;
  z-index: 25;
  top: 0;
  border-bottom: 1px solid rgba(52,52,52,0.11);
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(18px);
  transition: box-shadow var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 12px 35px rgba(20,20,18,0.07); }
.site-header__inner { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: 0.9rem; color: var(--colour-charcoal); font-size: 0.83rem; font-weight: 750; line-height: 1.15; text-decoration: none; }
.brand img { width: 40px; height: 49px; }
.brand span { max-width: 130px; }
.primary-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.primary-nav > a:not(.button), .nav-dropdown > summary { position: relative; padding-block: 0.75rem; font-size: 0.78rem; font-weight: 650; text-decoration: none; }
.primary-nav > a:not(.button)::after, .nav-dropdown > summary::after { position: absolute; right: 100%; bottom: 0.45rem; left: 0; height: 2px; background: var(--colour-yellow); content: ""; transition: right var(--ease); }
.primary-nav > a:not(.button):hover::after, .primary-nav > a[aria-current="page"]::after, .nav-dropdown > summary:hover::after, .nav-dropdown.is-current > summary::after, .nav-dropdown[open] > summary::after { right: 0; }
.nav-dropdown { position: relative; }
.nav-dropdown > summary { display: flex; align-items: center; gap: .45rem; list-style: none; cursor: pointer; }
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary span { font-size: .9rem; transition: transform var(--ease); }
.nav-dropdown[open] > summary span { transform: rotate(180deg); }
.nav-dropdown__panel { position: absolute; z-index: 20; top: calc(100% + .65rem); left: 50%; display: grid; width: min(280px, 80vw); padding: .65rem; border: 1px solid var(--colour-stone); border-radius: var(--radius-small); transform: translateX(-50%); background: var(--colour-white); box-shadow: var(--shadow); }
.nav-dropdown__panel::before { position: absolute; right: 0; bottom: 100%; left: 0; height: .7rem; content: ""; }
.nav-dropdown__panel a { padding: .78rem .9rem; border-radius: calc(var(--radius-small) * .65); font-size: .82rem; font-weight: 650; text-decoration: none; }
.nav-dropdown__panel a:hover, .nav-dropdown__panel a:focus-visible, .nav-dropdown__panel a[aria-current="page"] { background: var(--colour-yellow); }
.menu-toggle { display: none; border: 0; background: none; color: var(--colour-charcoal); cursor: pointer; }

.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 2.25rem; padding: 0; list-style: none; }
.breadcrumbs li { color: var(--colour-grey); font-size: 0.72rem; font-weight: 650; }
.breadcrumbs li + li::before { margin-right: 0.6rem; content: "/"; opacity: 0.55; }
.breadcrumbs a { text-decoration: none; }

.hero { min-height: calc(100vh - 117px); padding: clamp(2.5rem, 6vw, 6rem) 0 2rem; overflow: hidden; }
.hero__inner { display: grid; min-height: clamp(600px, 70vh, 780px); grid-template-columns: minmax(0, 0.93fr) minmax(400px, 0.82fr); align-items: center; gap: clamp(2.5rem, 6vw, 8rem); }
.hero__content { position: relative; z-index: 2; max-width: 790px; }
.hero__content::before { position: absolute; z-index: -1; top: 8.8rem; left: -4rem; width: 15rem; height: 1rem; background: var(--colour-yellow); content: ""; transform: rotate(-2deg); }
.hero__lead { max-width: 660px; margin-bottom: 2.25rem; color: var(--colour-grey); font-size: clamp(1.08rem, 1.6vw, 1.3rem); line-height: 1.55; }
.hero__media { min-height: min(66vh, 700px); }
.hero__foot { display: flex; align-items: center; gap: 1rem; color: var(--colour-grey); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.hero__foot p { margin: 0; }
.hero__foot i { display: block; width: 100%; height: 1px; background: var(--colour-stone); }

.photo-placeholder {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 1.5rem;
  border-radius: var(--radius-media);
  background: linear-gradient(145deg, #dddcd3 0%, #b6b6ad 48%, #85857f 100%);
  color: var(--colour-white);
  isolation: isolate;
}
.photo-placeholder::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(20,20,18,0.55)); content: ""; }
.photo-placeholder__label { font-size: 0.77rem; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; }
.photo-placeholder__note { font-size: 0.72rem; opacity: 0.72; }
.media-photo { position: relative; overflow: hidden; border-radius: var(--radius-media); background: #d8d8d1; }
.media-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform var(--ease); }
a:hover .media-photo > img { transform: scale(1.018); }
.media-photo--door-hero > img { object-position: center 48%; }
.media-photo--hardware > img { object-position: center 48%; }
.media-photo--bifold > img { object-position: center 52%; }
.media-photo--flush-main > img { object-position: center; }
.media-photo--flush-wide > img { object-position: center; }
.media-photo--flush-profile > img { object-position: center 46%; }
.media-photo--conservatory-main > img { object-position: center 52%; }
.media-photo--conservatory-before-after > img { object-position: center; }
.media-photo--conservatory-renovation > img { object-position: center; }
.media-photo--conservatory-victorian > img { object-position: 72% center; }
.media-photo--extension-main > img { object-position: 52% center; }
.extension-photo--double img { object-position: center 48%; }
.media-photo--casement-bay > img { object-position: center; }
.media-photo--casement-three > img { object-position: center; }
.media-photo--casement-top > img { object-position: center 37%; }
.media-photo--casement-detail > img { object-position: center; }
.media-photo--casement-house > img { object-position: center; }
.media-photo--overlay::after { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, transparent 34%, rgba(20,20,18,.18) 55%, rgba(20,20,18,.88) 100%); content: ""; }
.architectural-frame { position: absolute; z-index: -2; inset: 9% 9% 18%; display: grid; grid-template-columns: 1fr 1.55fr 1fr; gap: 0.55rem; transform: perspective(900px) rotateY(-7deg); }
.architectural-frame i { display: block; border: 9px solid rgba(52,52,52,0.8); background: linear-gradient(165deg, rgba(240,240,230,0.6), rgba(80,85,86,0.28)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.36); }

.proof-strip { border-block: 1px solid var(--colour-stone); }
.proof-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof-strip__grid > div { min-height: 130px; padding: 2rem clamp(1rem, 2.5vw, 2.5rem); border-right: 1px solid var(--colour-stone); }
.proof-strip__grid > div:first-child { padding-left: 0; }
.proof-strip__grid > div:last-child { border-right: 0; }
.proof-strip strong, .proof-strip span { display: block; }
.proof-strip strong { margin-bottom: 0.35rem; font-size: 0.9rem; }
.proof-strip span { color: var(--colour-grey); font-size: 0.78rem; line-height: 1.45; }

.intro-grid { display: grid; grid-template-columns: 0.35fr 1fr; gap: 4rem; }
.intro-grid__content { max-width: 1050px; }
.intro-grid h2 { max-width: 990px; }
.large-copy { max-width: 830px; color: var(--colour-grey); font-size: clamp(1.18rem, 2vw, 1.6rem); line-height: 1.52; }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 4rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.section-heading h2 { margin-bottom: 0; }
.section-heading > p { max-width: 470px; margin: 0; color: var(--colour-grey); font-size: 1.05rem; }
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); }
.product-card { overflow: hidden; border: 1px solid var(--colour-stone); border-radius: var(--radius-card); background: var(--colour-white); transition: transform var(--ease), box-shadow var(--ease); }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product-card > a { display: block; text-decoration: none; }
.product-card__media { aspect-ratio: 16 / 10; }
.product-card__body { padding: clamp(1.4rem, 3vw, 2.25rem); }
.product-card__body > div { display: flex; align-items: baseline; gap: 1rem; }
.product-card__body h3 { margin-bottom: 0.75rem; }
.product-card__body p { max-width: 430px; margin-bottom: 1.5rem; color: var(--colour-grey); }
.product-card__number { color: var(--colour-grey); font-size: 0.65rem; font-weight: 750; }
.product-visual { position: relative; overflow: hidden; background: #d8d8d1; }
.product-visual::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(20,20,18,0.35)); content: ""; }
.product-visual > span { position: absolute; z-index: 2; bottom: 1rem; left: 1rem; color: rgba(255,255,255,0.9); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.product-visual i { position: absolute; display: block; border: 10px solid var(--colour-charcoal); background: linear-gradient(140deg, rgba(255,255,255,.5), rgba(102,108,107,.35)); transition: transform var(--ease); }
.product-card:hover .product-visual i { transform: scale(1.025); }
.product-visual--front-door { background: linear-gradient(135deg, #b9b7ac, #e7e2d7); }
.product-visual--front-door i { top: 10%; right: 29%; bottom: 0; left: 29%; border-width: 9px; background: linear-gradient(100deg, #4c5b58, #28302f); box-shadow: inset 0 0 0 24px #465451; }
.product-visual--patio { background: linear-gradient(135deg, #9ba6a3, #e2dfcf); }
.product-visual--patio i { inset: 12% 9% 0; background: linear-gradient(150deg, #c9d8d8, #788c89); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), inset 11rem 0 0 -10.65rem var(--colour-charcoal); }
.product-visual--french { background: linear-gradient(135deg, #c7c0aa, #eee9de); }
.product-visual--french i { inset: 10% 22% 0; background: linear-gradient(145deg, #d9e1dd, #8e9c98); box-shadow: inset 10rem 0 0 -9.65rem var(--colour-charcoal); }
.product-visual--bifold { background: linear-gradient(135deg, #8f9997, #d8d3c7); }
.product-visual--bifold i { inset: 14% 5% 0; background: repeating-linear-gradient(90deg, #899a97 0 24%, #343434 24% 25%); }
.product-visual--casement { background: linear-gradient(135deg, #b8b7ae, #e9e7df); }
.product-visual--casement i { inset: 10% 20% 8%; background: linear-gradient(145deg, #d7e0dd, #879792); box-shadow: inset 10rem 0 0 -9.7rem var(--colour-charcoal), inset 0 9rem 0 -8.7rem var(--colour-charcoal); }
.product-visual--flush { background: linear-gradient(135deg, #a5a49c, #e1ded5); }
.product-visual--flush i { inset: 12% 17% 7%; border-width: 6px; background: linear-gradient(145deg, #cdd9d7, #6f817d); box-shadow: inset 12rem 0 0 -11.75rem var(--colour-charcoal); }

.section--dark { overflow: hidden; background: var(--colour-black); color: rgba(255,255,255,0.72); }
.section--dark h2, .section--dark h3 { color: var(--colour-white); }
.section--dark em { color: rgba(255,255,255,0.46); }
.section--dark .eyebrow,
.home-reviews .eyebrow,
.featured-project__content .eyebrow,
.case-study-card__content .eyebrow { color: rgba(255,255,255,0.78); }
.dark-intro { position: relative; padding-bottom: clamp(3rem, 7vw, 6rem); }
.dark-intro::after { position: absolute; top: 2rem; right: -13%; width: 34rem; height: 34rem; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 0 6rem rgba(255,255,255,.025), 0 0 0 12rem rgba(255,255,255,.015); content: ""; }
.dark-intro .section-index { margin-bottom: clamp(4rem, 8vw, 7rem); }
.dark-intro h2 { position: relative; z-index: 1; max-width: 1000px; margin-bottom: 0; }
.capability-grid { display: grid; border-top: 1px solid rgba(255,255,255,0.16); grid-template-columns: repeat(4, 1fr); }
.capability { min-height: 310px; padding: 2rem clamp(1rem, 2.2vw, 2.3rem); border-right: 1px solid rgba(255,255,255,0.16); }
.capability:first-child { padding-left: 0; }
.capability:last-child { border-right: 0; }
.capability > span { display: grid; width: 40px; height: 40px; margin-bottom: 4rem; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: var(--colour-yellow); font-size: .68rem; }
.capability p { margin: 0; color: rgba(255,255,255,0.6); font-size: .9rem; }

.process-layout { display: grid; grid-template-columns: minmax(0, .75fr) minmax(440px, 1fr); gap: clamp(4rem, 9vw, 10rem); }
.process-copy { align-self: start; position: sticky; top: 150px; }
.process-copy .section-index { margin-bottom: 5rem; }
.process-copy > p:not(.eyebrow) { max-width: 520px; margin-bottom: 2rem; color: var(--colour-grey); }
.process-list { margin: 0; padding: 0; border-top: 1px solid var(--colour-stone); list-style: none; }
.process-list li { display: grid; min-height: 180px; grid-template-columns: 70px 1fr; gap: 1rem; padding-block: 2.25rem; border-bottom: 1px solid var(--colour-stone); }
.process-list > li > span { color: var(--colour-grey); font-size: .7rem; font-weight: 700; }
.process-list h3 { margin-bottom: .55rem; }
.process-list p { max-width: 570px; margin: 0; color: var(--colour-grey); }

.section--project { padding-block: clamp(4rem, 7vw, 7rem); }
.featured-project { display: grid; overflow: hidden; border-radius: var(--radius-media); background: var(--colour-charcoal); grid-template-columns: 1.15fr .85fr; }
.featured-project__media { min-height: 650px; border-radius: 0; background: linear-gradient(140deg, #bab8ae, #6c706e); }
.featured-project__content { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.5rem, 6vw, 6rem); color: rgba(255,255,255,.68); }
.featured-project__content h2 { color: var(--colour-white); }
.featured-project__content > p:not(.eyebrow) { margin-bottom: 2rem; }
.featured-project__content dl { margin: 0 0 2.5rem; border-top: 1px solid rgba(255,255,255,.16); }
.featured-project__content dl div { display: flex; justify-content: space-between; gap: 2rem; padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.16); font-size: .76rem; }
.featured-project__content dt { color: rgba(255,255,255,.45); }
.featured-project__content dd { margin: 0; color: var(--colour-white); }
.featured-project__content .text-link { align-self: flex-start; color: var(--colour-white); }
.project-story { padding-top: clamp(5rem,9vw,9rem); }
.project-story__intro { display: grid; margin-bottom: clamp(3rem,6vw,6rem); grid-template-columns: minmax(0,1fr) minmax(360px,.8fr); align-items: end; gap: clamp(3rem,7vw,8rem); }
.project-story__intro h2 { max-width: 860px; }
.project-story__intro .large-copy { margin: 0; color: var(--colour-grey); }
.project-story__cards { display: grid; border-top: 1px solid var(--colour-stone); grid-template-columns: repeat(3,1fr); }
.project-story__cards article { min-height: 390px; padding: clamp(1.75rem,3vw,3rem); border-right: 1px solid var(--colour-stone); }
.project-story__cards article:first-child { padding-left: 0; }
.project-story__cards article:last-child { border-right: 0; }
.project-story__cards article > span { display: grid; width: 42px; height: 42px; margin-bottom: clamp(3rem,6vw,5rem); place-items: center; border: 1px solid var(--colour-stone); border-radius: 50%; color: var(--colour-grey); font-size: .67rem; }
.project-story__cards h3 { font-size: clamp(1.45rem,2.6vw,2.4rem); }
.project-story__cards article > p:last-child { margin: 0; color: var(--colour-grey); }
.project-story__trades { display: grid; margin: clamp(4rem,7vw,7rem) 0; padding: clamp(2rem,4vw,4rem); border-radius: var(--radius-card); background: var(--colour-charcoal); color: rgba(255,255,255,.68); grid-template-columns: minmax(0,.8fr) minmax(400px,1fr); align-items: center; gap: clamp(3rem,7vw,8rem); }
.project-story__trades h3 { max-width: 600px; margin: 0; color: var(--colour-white); font-size: clamp(1.7rem,3.2vw,3rem); }
.project-story__trades ul { display: flex; flex-wrap: wrap; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.project-story__trades li { padding: .7rem 1rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: var(--colour-white); font-size: .78rem; }
.project-story__gallery { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.65fr); grid-template-rows: repeat(3,minmax(220px,1fr)); gap: clamp(1rem,2vw,1.5rem); }
.project-story__gallery figure { position: relative; min-height: 260px; margin: 0; overflow: hidden; border-radius: var(--radius-card); background: #777; }
.project-story__gallery figure:nth-child(-n+3) { grid-column: 1; }
.project-story__gallery-interior { grid-column: 2; grid-row: 1 / 4; }
.project-story__gallery--three { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: minmax(500px,1fr); }
.project-story__gallery--three figure,.project-story__gallery--three figure:nth-child(-n+3) { min-height: 500px; grid-column: auto; }
.project-story__gallery--four { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(340px,1fr)); }
.project-story__gallery--four figure,.project-story__gallery--four figure:nth-child(-n+3) { min-height: 340px; grid-column: auto; }
.project-story__gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-story__gallery-interior img { object-position: center; }
.project-story__gallery figure::after { position: absolute; z-index: 1; inset: 45% 0 0; background: linear-gradient(180deg,transparent,rgba(20,20,18,.76)); content: ""; }
.project-story__gallery figcaption { position: absolute; z-index: 2; right: 1.25rem; bottom: 1.25rem; left: 1.25rem; display: grid; gap: .3rem; color: var(--colour-white); }
.project-story__gallery figcaption span { color: var(--colour-yellow); font-size: .64rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.project-story__gallery figcaption strong { font-size: clamp(.95rem,1.7vw,1.3rem); }

.areas-grid { display: grid; grid-template-columns: 1fr .8fr; gap: clamp(4rem, 9vw, 10rem); }
.areas-grid .section-index { margin-bottom: 5rem; }
.areas-copy ul { display: flex; flex-wrap: wrap; gap: .6rem; margin: 2.5rem 0; padding: 0; list-style: none; }
.areas-copy li { padding: .65rem 1rem; border: 1px solid var(--colour-stone); border-radius: 999px; color: var(--colour-grey); font-size: .8rem; }

.faq-layout { display: grid; grid-template-columns: .65fr 1fr; gap: clamp(4rem, 9vw, 10rem); }
.faq-list { border-top: 1px solid var(--colour-stone); }
.faq-list details { border-bottom: 1px solid var(--colour-stone); }
.faq-list summary { position: relative; padding: 1.7rem 3rem 1.7rem 0; cursor: pointer; font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 650; line-height: 1.35; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span, .faq-list summary span::after { position: absolute; top: 50%; right: .25rem; width: 15px; height: 1px; background: var(--colour-charcoal); content: ""; }
.faq-list summary span::after { top: 0; right: 0; transform: rotate(90deg); transition: transform var(--ease); }
.faq-list details[open] summary span::after { transform: rotate(0); }
.faq-list details p { max-width: 650px; padding: 0 3rem 1.75rem 0; color: var(--colour-grey); }

.quote-cta { position: relative; overflow: hidden; padding-block: clamp(5rem, 10vw, 9rem); background: var(--colour-yellow); }
.quote-cta::after { position: absolute; right: -5rem; bottom: -14rem; width: 38rem; height: 38rem; border: 1px solid rgba(52,52,52,.15); border-radius: 50%; box-shadow: 0 0 0 5rem rgba(52,52,52,.035), 0 0 0 10rem rgba(52,52,52,.025); content: ""; }
.quote-cta__inner { position: relative; z-index: 1; }
.quote-cta .eyebrow { color: var(--colour-charcoal); }
.quote-cta h2 { max-width: 1000px; }
.quote-cta h2 em { color: rgba(52,52,52,.53); }
.quote-cta__inner > p:not(.eyebrow) { max-width: 600px; margin-bottom: 2rem; }

.site-footer { padding: clamp(4rem, 8vw, 7rem) 0 1.5rem; background: var(--colour-black); color: rgba(255,255,255,.58); }
.site-footer__top { display: flex; align-items: end; justify-content: space-between; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.14); }
.brand--footer { color: var(--colour-white); font-size: .9rem; }
.brand--footer img { width: 50px; height: 61px; }
.site-footer__top > p { max-width: 340px; margin: 0; font-size: .85rem; text-align: right; }
.site-footer__grid { display: grid; padding-block: 4rem; grid-template-columns: .8fr 1.2fr .7fr 1.3fr; gap: clamp(2rem, 5vw, 6rem); }
.site-footer__grid h2 { margin-bottom: 1.5rem; color: rgba(255,255,255,.46); font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.site-footer__grid a:not(.text-link) { display: block; margin-bottom: .6rem; color: rgba(255,255,255,.8); font-size: .8rem; text-decoration: none; }
.site-footer__grid a:hover { color: var(--colour-white); }
.site-footer__contact p { max-width: 320px; font-size: .85rem; }
.site-footer__legal { display: grid; grid-template-columns: minmax(150px,.35fr) minmax(0,1.65fr); gap: 2rem; padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.56); font-size: .69rem; line-height: 1.65; }
.site-footer__legal p { margin: 0; }
.site-footer__legal strong { color: rgba(255,255,255,.86); }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .67rem; }
.site-footer__bottom p { margin: 0; }

/* Product page template */
.section--warm { background: var(--colour-warm-white); }
.product-hero { padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(4rem, 8vw, 7rem); overflow: hidden; }
.product-hero__grid { display: grid; min-height: clamp(620px, 73vh, 790px); grid-template-columns: minmax(0, .9fr) minmax(430px, .8fr); align-items: center; gap: clamp(3rem, 7vw, 8rem); }
.product-hero__content { max-width: 800px; }
.product-hero__lead { max-width: 650px; margin-bottom: 2.25rem; color: var(--colour-grey); font-size: clamp(1.08rem, 1.65vw, 1.32rem); }
.product-hero__visual { min-height: min(70vh, 730px); background: linear-gradient(145deg, #dedbd1, #969990); }
.product-hero__visual--photo { position: relative; overflow: hidden; border-radius: var(--radius-media); }
.product-hero__visual--photo img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.garage-photo--sports img { object-position: 56% center; }
.garage-photo--living img { object-position: center 48%; }
.garage-photo--exterior img { object-position: center 43%; }
.garage-photo--playroom img { object-position: center 58%; }
.garage-photo--gym img { object-position: center 58%; }
.french-photo--hero img { object-position: center 58%; }
.french-photo--hardware img { object-position: 52% center; }
.french-photo--project img { object-position: 38% center; }
.french-photo--listing img { object-position: center 62%; }
.media-photo--window-handles img { object-position: 54% center; }
.patio-photo--hero img { object-position: 52% center; }
.patio-photo--detail img { object-position: 55% center; }
.patio-photo--project img { object-position: center; }
.patio-photo--listing img { object-position: center; }
.patio-photo--two img { object-position: center; }
.patio-photo--three img { object-position: center; }
.patio-photo--four img { object-position: center; }
.alterations-photo--open-plan img { object-position: center 55%; }
.alterations-photo--opening img { object-position: center 58%; }
.alterations-photo--kitchen img { object-position: 55% center; }
.alterations-photo--garage img { object-position: center 48%; }
.alterations-photo--kitchen-wide img { object-position: 56% center; }
.alterations-photo--home-card img { object-position: center 58%; }
.alterations-photo--work img { object-position: center 54%; }
.alterations-photo--brickwork img { object-position: center 58%; }
.alterations-photo--steelwork img { object-position: center 32%; }
.alterations-photo--porch img { object-position: center 48%; }
.alterations-photo--various img { object-position: center; }
.alterations-photo--project img { object-position: center 58%; }
.alterations-photo--cloakroom img { object-position: center; }
.doors-photo--stable img { object-position: center 50%; }
.bifold-photo--compact img { object-position: center 48%; }
.bifold-photo--wide img { object-position: center; }
.bifold-photo--stacking img { object-position: center; }
.bifold-photo--hardware img { object-position: 39% center; }
.bifold-photo--case img { object-position: center; }

/* Contact and quote */
.contact-hero { padding-block: clamp(2rem, 5vw, 4.5rem) clamp(5rem, 9vw, 8rem); background: var(--colour-warm-white); }
.contact-hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: clamp(3rem, 8vw, 8rem); align-items: end; padding-top: clamp(3rem, 7vw, 6rem); }
.contact-hero__content { max-width: 920px; }
.contact-hero__content h1 { font-size: clamp(3.5rem, 7vw, 7rem); }
.contact-hero__content > p:last-child { max-width: 720px; margin-bottom: 0; color: var(--colour-grey); font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.55; }
.contact-direct { padding: clamp(2rem, 4vw, 3rem); border-radius: var(--radius-media); background: var(--colour-charcoal); color: var(--colour-white); }
.contact-direct .eyebrow { color: rgba(255,255,255,.6); }
.contact-direct__links { border-top: 1px solid rgba(255,255,255,.2); }
.contact-direct__links > a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.2); color: var(--colour-white); font-size: clamp(1.1rem, 1.75vw, 1.45rem); font-weight: 650; letter-spacing: -.025em; text-decoration: none; }
.contact-direct__links > a > span { display: grid; gap: .2rem; }
.contact-direct__links small { color: rgba(255,255,255,.56); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.contact-direct__links b { color: var(--colour-yellow); font-size: 1.1rem; }
.contact-direct > p:last-child { margin: 1.25rem 0 0; color: rgba(255,255,255,.72); }

.contact-layout { display: grid; grid-template-columns: minmax(260px, .68fr) minmax(0, 1.32fr); gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.contact-intro { position: sticky; top: 9rem; }
.contact-intro h2 { font-size: clamp(2.4rem, 4.2vw, 4.3rem); }
.contact-intro > p { max-width: 600px; color: var(--colour-grey); }
.contact-checklist { display: grid; gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.contact-checklist li { position: relative; padding-left: 2rem; }
.contact-checklist li::before { position: absolute; top: .1rem; left: 0; color: var(--colour-charcoal); content: "✓"; font-weight: 800; }

.contact-form-card { padding: clamp(1.5rem, 4vw, 3.5rem); border: 1px solid var(--colour-stone); border-radius: var(--radius-media); background: var(--colour-warm-white); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
.form-field { min-width: 0; }
.form-field--full { grid-column: 1 / -1; }
.form-field > label, .form-choice legend { display: block; margin-bottom: .55rem; color: var(--colour-charcoal); font-size: .83rem; font-weight: 750; letter-spacing: .025em; }
.form-field > label > span[aria-hidden="true"], .form-consent strong { color: #a13a2a; }
.form-field input:not([type="radio"]):not([type="checkbox"]), .form-field select, .form-field textarea { width: 100%; min-height: 54px; border: 1px solid #c9c9c1; border-radius: var(--radius-small); background: var(--colour-white); color: var(--colour-charcoal); padding: .85rem 1rem; transition: border-color var(--ease), box-shadow var(--ease), background var(--ease); }
.form-field textarea { min-height: 180px; resize: vertical; }
.form-field input:hover:not(:disabled), .form-field select:hover, .form-field textarea:hover { border-color: #95958e; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--colour-charcoal); outline: none; box-shadow: 0 0 0 4px rgba(251,230,1,.38); }
.form-field input:disabled { cursor: not-allowed; background: #ededE7; color: var(--colour-grey); }
.form-field [aria-invalid="true"] { border-color: #a13a2a !important; background: #fff8f6 !important; }
.form-help, .form-error { margin: .55rem 0 0; font-size: .79rem; line-height: 1.45; }
.form-help { color: var(--colour-grey); }
.form-field--trap { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
.form-error { min-height: 0; color: #8d2d20; font-weight: 650; }
.form-error:empty { display: none; }
.form-choice { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin: 0; padding: 0; border: 0; }
.form-choice legend { width: 100%; }
.form-choice label { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; }
.form-choice input, .form-consent input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--colour-charcoal); }
.form-consent label { display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; font-size: .9rem; font-weight: 500; line-height: 1.5; }
.form-consent input { flex: 0 0 auto; margin-top: .15rem; }
.form-submit { display: flex; gap: 1.25rem; align-items: center; justify-content: space-between; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--colour-stone); }
.form-submit .button { flex: 0 0 auto; cursor: pointer; }
.form-submit > p { max-width: 430px; margin: 0; color: var(--colour-grey); font-size: .8rem; line-height: 1.5; }
.form-status { margin-top: 1.5rem; padding: 1rem 1.15rem; border-left: 4px solid var(--colour-charcoal); border-radius: 0 var(--radius-small) var(--radius-small) 0; background: var(--colour-yellow); color: var(--colour-charcoal); font-weight: 650; }

.contact-next { background: var(--colour-warm-white); }
.contact-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0; overflow: hidden; border: 1px solid var(--colour-stone); border-radius: var(--radius-media); background: var(--colour-stone); list-style: none; }
.contact-steps li { min-height: 310px; padding: clamp(2rem, 4vw, 3rem); background: var(--colour-white); }
.contact-steps li > span { display: inline-block; margin-bottom: clamp(3rem, 6vw, 5rem); color: var(--colour-grey); font-size: .72rem; font-weight: 750; letter-spacing: .12em; }
.contact-steps h3 { max-width: 260px; }
.contact-steps p { max-width: 350px; margin: 0; color: var(--colour-grey); }

@media (max-width: 1023px) {
  .contact-hero__grid, .contact-layout { grid-template-columns: 1fr; }
  .contact-hero__grid { align-items: start; }
  .contact-direct { max-width: 680px; }
  .contact-intro { position: static; }
}

@media (max-width: 767px) {
  .contact-hero { padding-bottom: 4.5rem; }
  .contact-hero__grid { gap: 2.5rem; padding-top: 3rem; }
  .contact-direct { padding: 1.5rem; }
  .contact-direct__links > a { align-items: flex-start; overflow-wrap: anywhere; }
  .contact-layout { gap: 2.5rem; }
  .contact-form-card { padding: 1.25rem; border-radius: var(--radius-card); }
  .form-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .form-field--full { grid-column: auto; }
  .form-choice { display: grid; }
  .form-submit { align-items: stretch; flex-direction: column; }
  .form-submit .button { width: 100%; }
  .contact-steps { grid-template-columns: 1fr; }
  .contact-steps li { min-height: 0; }
  .contact-steps li > span { margin-bottom: 2rem; }
}
.door-study { --door-colour: #596b62; position: absolute; top: 10%; right: 26%; bottom: 0; left: 26%; border: 9px solid #e4e0d5; background: var(--door-colour); box-shadow: 0 28px 45px rgba(20,20,18,.25), inset 0 0 0 2px rgba(255,255,255,.1); transition: background-color var(--ease); }
.door-study::before, .door-study::after { position: absolute; top: 9%; right: 13%; left: 13%; height: 24%; border: 3px solid rgba(20,20,18,.28); content: ""; }
.door-study::after { top: auto; bottom: 8%; height: 34%; }
.door-study--navy { --door-colour: #25364c; }
.door-study--charcoal { --door-colour: #353735; }
.door-study--red { --door-colour: #743a35; }
.door-study--cream { --door-colour: #ded8c9; }
.door-study__glass { position: absolute; top: 11%; right: 16%; left: 16%; height: 20%; background: linear-gradient(145deg, rgba(225,235,234,.8), rgba(106,122,119,.45)); }
.door-study__letterbox { position: absolute; top: 53%; left: 50%; width: 36%; height: 2.8%; transform: translateX(-50%); background: #aaa394; box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.door-study__handle { position: absolute; top: 48%; right: 12%; width: 3%; height: 15%; border-radius: 4px; background: #b6afa1; box-shadow: 0 2px 5px rgba(0,0,0,.35); }
.patio-study { position: absolute; top: 15%; right: 8%; bottom: 12%; left: 8%; display: grid; overflow: hidden; grid-template-columns: 1fr 1fr; border: 10px solid #edeae0; background: #677875; box-shadow: 0 28px 45px rgba(20,20,18,.25); }
.patio-study::before { position: absolute; z-index: 3; top: 0; bottom: 0; left: 50%; width: 8px; transform: translateX(-50%); background: #edeae0; content: ""; }
.patio-study i { display: block; background: linear-gradient(150deg, rgba(221,234,232,.75), rgba(91,112,108,.42)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); }
.patio-study b { position: absolute; z-index: 4; top: 43%; left: calc(50% - 25px); width: 9px; height: 68px; border-radius: 4px; background: #4a4c48; box-shadow: 0 3px 7px rgba(0,0,0,.3); }
.french-study { position: absolute; top: 11%; right: 16%; bottom: 0; left: 16%; display: grid; overflow: hidden; grid-template-columns: 1fr 1fr; gap: 7px; border: 10px solid #eeeae0; border-bottom: 0; background: #eeeae0; box-shadow: 0 28px 45px rgba(20,20,18,.25); }
.french-study i { display: block; background: linear-gradient(150deg, rgba(221,234,232,.78), rgba(91,112,108,.44)); box-shadow: inset 0 0 0 4px rgba(255,255,255,.52), inset 0 -8rem 0 -7.65rem #eeeae0; }
.french-study b { position: absolute; z-index: 3; top: 43%; width: 8px; height: 70px; border-radius: 4px; background: #535550; box-shadow: 0 3px 7px rgba(0,0,0,.3); }
.french-study b:nth-of-type(1) { right: calc(50% + 10px); }
.french-study b:nth-of-type(2) { left: calc(50% + 10px); }
.bifold-study { position: absolute; top: 16%; right: 6%; bottom: 12%; left: 6%; display: grid; overflow: hidden; grid-template-columns: repeat(4,1fr); gap: 5px; border: 9px solid #343a3a; background: #343a3a; box-shadow: 0 28px 45px rgba(20,20,18,.25); }
.bifold-study i { display: block; background: linear-gradient(150deg, rgba(218,232,230,.78), rgba(80,104,100,.46)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.bifold-study b { position: absolute; z-index: 3; top: 42%; left: calc(25% - 7px); width: 8px; height: 70px; border-radius: 4px; background: #222524; box-shadow: 0 3px 7px rgba(0,0,0,.3); }
.casement-study { position: absolute; top: 11%; right: 13%; bottom: 11%; left: 13%; display: grid; overflow: hidden; grid-template-columns: 1.15fr .85fr; grid-template-rows: 1fr 1fr; gap: 8px; border: 11px solid #f0ede4; background: #f0ede4; box-shadow: 0 28px 45px rgba(20,20,18,.25); }
.casement-study i { display: block; background: linear-gradient(150deg,rgba(220,233,231,.78),rgba(93,114,110,.43)); box-shadow: inset 0 0 0 3px rgba(255,255,255,.46); }
.casement-study i:first-child { grid-row: 1 / 3; }
.flush-study { position: absolute; top: 11%; right: 13%; bottom: 11%; left: 13%; display: grid; overflow: hidden; grid-template-columns: 1.1fr .9fr; grid-template-rows: 1fr 1fr; gap: 5px; border: 8px solid #e9e6dc; background: #e9e6dc; box-shadow: 0 28px 45px rgba(20,20,18,.25); }
.flush-study i { display: block; border: 3px solid rgba(242,240,233,.85); background: linear-gradient(150deg,rgba(215,229,226,.78),rgba(87,109,105,.43)); box-shadow: inset 0 0 0 1px rgba(52,52,52,.2); }
.flush-study i:first-child { grid-row: 1 / 3; }

/* Conservatories */
.conservatory-hero .product-hero__visual { background: linear-gradient(145deg, #d9d4c8, #7e8b87); }
.conservatory-study { position: absolute; top: 19%; right: 7%; bottom: 12%; left: 7%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 7px; border: 8px solid #eeeae0; background: #eeeae0; box-shadow: 0 28px 45px rgba(20,20,18,.25); }
.conservatory-study::before { position: absolute; right: -8px; bottom: 100%; left: -8px; height: 34%; clip-path: polygon(0 100%, 50% 0, 100% 100%); background: #eeeae0; content: ""; }
.conservatory-study::after { position: absolute; right: 5%; bottom: 100%; left: 5%; height: 27%; clip-path: polygon(0 100%, 50% 0, 100% 100%); background: linear-gradient(145deg, rgba(220,232,229,.8), rgba(91,110,106,.52)); content: ""; }
.conservatory-study i { position: relative; z-index: 1; display: block; background: linear-gradient(145deg, rgba(217,232,229,.82), rgba(92,113,109,.48)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.44); }
.conservatory-study b { position: absolute; z-index: 3; right: 12%; bottom: 0; width: 21%; height: 58%; border: 6px solid #eeeae0; border-bottom: 0; background: linear-gradient(145deg, rgba(215,230,227,.82), rgba(82,104,100,.54)); }
.conservatory-option { background: linear-gradient(145deg, #cbc7ba, #818b87); }
.conservatory-option::before { position: absolute; z-index: 1; right: 8%; bottom: 48%; left: 8%; height: 28%; clip-path: polygon(0 100%, 50% 0, 100% 100%); background: #ede9df; content: ""; }
.conservatory-option > i { position: absolute; z-index: 2; bottom: 10%; width: 27%; height: 40%; border: 6px solid #ede9df; background: linear-gradient(145deg, #d1dfdc, #738783); }
.conservatory-option > i:first-child { left: 9%; }
.conservatory-option > i:nth-child(2) { left: 36.5%; }
.conservatory-option > i:nth-child(3) { right: 9%; }
.conservatory-option > b { position: absolute; z-index: 3; right: 39%; bottom: 10%; width: 22%; height: 34%; border: 5px solid #ede9df; background: linear-gradient(145deg, #d4e0de, #70827f); }
.conservatory-option--victorian::before { right: 4%; left: 4%; clip-path: polygon(0 100%, 20% 35%, 50% 0, 80% 35%, 100% 100%); }
.conservatory-option--victorian > i:first-child { left: 6%; transform: skewY(-6deg); }
.conservatory-option--victorian > i:nth-child(3) { right: 6%; transform: skewY(6deg); }
.conservatory-option--warmer-roof { background: linear-gradient(145deg, #bfbcb2, #767d7a); }
.conservatory-option--warmer-roof::before { z-index: 3; right: 5%; bottom: 47%; left: 5%; height: 32%; clip-path: polygon(0 100%, 50% 0, 100% 100%); background: repeating-linear-gradient(165deg, #575954 0 8px, #454743 8px 12px); filter: drop-shadow(0 10px 9px rgba(20,20,18,.22)); }
.conservatory-option--warmer-roof > i { height: 37%; }
.conservatory-renovation { padding-block: clamp(5rem, 9vw, 9rem); }
.renovation-grid { display: grid; grid-template-columns: minmax(420px,.9fr) 1fr; align-items: center; gap: clamp(3rem,8vw,9rem); }
.renovation-visual { min-height: min(72vh,720px); background: linear-gradient(145deg,#b7b4aa,#5d6663); }
.renovation-visual__roof { position: absolute; top: 17%; right: 8%; bottom: 18%; left: 8%; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; padding: 7px; border: 7px solid #e9e5da; background: #e9e5da; }
.renovation-visual__roof::before { position: absolute; z-index: 2; right: -7px; bottom: 100%; left: -7px; height: 36%; clip-path: polygon(0 100%,50% 0,100% 100%); background: repeating-linear-gradient(165deg,#5a5c56 0 9px,#474944 9px 13px); content: ""; filter: drop-shadow(0 9px 8px rgba(20,20,18,.25)); }
.renovation-visual__roof i { display: block; background: linear-gradient(145deg,#cddbd8,#6e837f); }
.renovation-copy .section-index { margin-bottom: clamp(3rem,6vw,5rem); }
.renovation-copy > p:not(.eyebrow) { max-width: 680px; }
.feature-list--dark li { border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.72); }
.feature-list--dark li::before { color: var(--colour-charcoal); }

/* Garage conversions */
.garage-hero .product-hero__visual { background: linear-gradient(145deg, #c8c5bb, #727a77); }
.garage-study { position: absolute; top: 10%; right: 8%; bottom: 12%; left: 8%; overflow: hidden; border: 9px solid #373b39; background: linear-gradient(180deg,#d9d6cd 0 67%,#8d887d 67% 100%); box-shadow: 0 28px 45px rgba(20,20,18,.25); }
.garage-study::before { position: absolute; top: 8%; right: 7%; width: 35%; height: 43%; border: 8px solid #f0ede3; background: linear-gradient(145deg,#cbdad7,#6f8580); box-shadow: inset 0 0 0 2px rgba(52,52,52,.16); content: ""; }
.garage-study::after { position: absolute; right: 5%; bottom: 22%; left: 8%; height: 3%; background: rgba(52,52,52,.18); content: ""; }
.garage-study i:first-child { position: absolute; top: 12%; left: 9%; width: 37%; height: 6%; background: var(--colour-yellow); }
.garage-study i:nth-child(2) { position: absolute; bottom: 16%; left: 10%; width: 49%; height: 22%; border-radius: 5px 5px 0 0; background: #515956; box-shadow: inset 0 12px 0 rgba(255,255,255,.1); }
.garage-study b { position: absolute; right: 12%; bottom: 16%; width: 23%; height: 17%; border-top: 10px solid #454945; border-right: 5px solid #454945; border-left: 5px solid #454945; }
.garage-study span { position: absolute; right: 21%; bottom: 16%; width: 12%; height: 20%; border-radius: 18px 18px 4px 4px; background: #a7a399; }
.product-visual--integral-garage, .product-visual--detached-garage { background: linear-gradient(145deg,#cac7bd,#828884); }
.product-visual--integral-garage i, .product-visual--detached-garage i { inset: 10% 8% 7%; border: 8px solid #e9e5db; background: linear-gradient(180deg,#d9d5cb 0 68%,#8d887d 68%); box-shadow: none; }
.product-visual--integral-garage i::before, .product-visual--detached-garage i::before { position: absolute; top: 10%; right: 8%; width: 34%; height: 46%; border: 6px solid #eeeae0; background: linear-gradient(145deg,#cbd9d6,#718681); content: ""; }
.product-visual--integral-garage b, .product-visual--detached-garage b { position: absolute; z-index: 2; bottom: 11%; left: 18%; width: 38%; height: 20%; border-radius: 4px 4px 0 0; background: #4d5653; }
.product-visual--detached-garage::before { position: absolute; z-index: 2; top: 5%; right: 6%; left: 6%; height: 20%; clip-path: polygon(0 100%,50% 0,100% 100%); background: #4e514d; content: ""; }
.product-visual--detached-garage i { top: 21%; }
.capability-grid--six { grid-template-columns: repeat(3,1fr); }
.capability-grid--six .capability { border-bottom: 1px solid rgba(255,255,255,.16); }
.capability-grid--six .capability:nth-child(3n) { border-right: 0; }
.capability-grid--six .capability:nth-child(n+4) { border-bottom: 0; }
.capability-grid--six .capability:nth-child(4) { padding-left: 0; }

/* Extensions */
.extension-hero .product-hero__visual { background: linear-gradient(145deg,#d4d0c5,#7b827f); }
.extension-study { position: absolute; top: 10%; right: 7%; bottom: 12%; left: 7%; background: linear-gradient(180deg,transparent 0 72%,#8b877d 72%); }
.extension-study::before { position: absolute; top: 15%; bottom: 14%; left: 4%; width: 52%; border: 8px solid #ded8ca; background: #b8ae9d; box-shadow: inset 0 13rem 0 -12.5rem rgba(52,52,52,.34); content: ""; }
.extension-study::after { position: absolute; top: 5%; left: 1%; width: 58%; height: 19%; clip-path: polygon(0 100%,50% 0,100% 100%); background: #555752; content: ""; filter: drop-shadow(0 8px 7px rgba(20,20,18,.2)); }
.extension-study i { position: absolute; z-index: 2; border: 7px solid #eeeae0; background: linear-gradient(145deg,#cfddda,#6d827e); }
.extension-study i:first-child { top: 29%; left: 11%; width: 18%; height: 22%; }
.extension-study i:nth-child(2) { top: 29%; left: 34%; width: 15%; height: 22%; }
.extension-study i:nth-child(3) { right: 4%; bottom: 14%; width: 48%; height: 43%; box-shadow: inset 12rem 0 0 -11.5rem #eeeae0; }
.extension-study b { position: absolute; z-index: 3; right: 1%; bottom: 54%; width: 54%; height: 19%; clip-path: polygon(0 100%,45% 0,100% 100%); background: #4b4e49; filter: drop-shadow(0 8px 6px rgba(20,20,18,.23)); }
.product-visual--single-extension, .product-visual--double-extension { background: linear-gradient(145deg,#c9c4b8,#79817e); }
.product-visual--single-extension i, .product-visual--double-extension i { inset: 9% 45% 8% 7%; border: 7px solid #ddd7ca; background: #b4aa99; box-shadow: none; }
.product-visual--single-extension i::before, .product-visual--double-extension i::before { position: absolute; top: 14%; right: 13%; width: 31%; height: 28%; border: 5px solid #eeeae0; background: linear-gradient(145deg,#cddbd8,#6d827f); content: ""; }
.product-visual--single-extension b, .product-visual--double-extension b { position: absolute; z-index: 2; right: 6%; bottom: 8%; width: 50%; height: 43%; border: 7px solid #eeeae0; background: linear-gradient(145deg,#cedbd8,#6c817d); box-shadow: inset 12rem 0 0 -11.65rem #eeeae0; }
.product-visual--single-extension b::before, .product-visual--double-extension b::before { position: absolute; right: -7px; bottom: 100%; left: -7px; height: 31%; clip-path: polygon(0 100%,48% 0,100% 100%); background: #50534e; content: ""; }
.product-visual--double-extension b { height: 69%; }
.product-visual--double-extension b::after { position: absolute; right: 8%; bottom: 48%; left: 8%; height: 7px; background: #eeeae0; content: ""; }

/* Home alterations */
.alterations-hero .product-hero__visual { background: linear-gradient(145deg,#d3cfc4,#747c79); }
.alteration-study { position: absolute; top: 9%; right: 7%; bottom: 12%; left: 7%; overflow: hidden; background: linear-gradient(180deg,#d8d4ca 0 70%,#89847b 70%); box-shadow: 0 28px 45px rgba(20,20,18,.24); }
.alteration-study::before { position: absolute; z-index: 3; top: 16%; right: 6%; left: 6%; height: 7%; background: var(--colour-yellow); box-shadow: 0 8px 10px rgba(20,20,18,.18); content: ""; }
.alteration-study::after { position: absolute; top: 23%; bottom: 30%; left: 48%; width: 8px; background: #3e423f; content: ""; }
.alteration-study i:first-child { position: absolute; top: 26%; right: 8%; width: 36%; height: 36%; border: 7px solid #eeeae0; background: linear-gradient(145deg,#cedbd8,#6f837f); }
.alteration-study i:nth-child(2) { position: absolute; bottom: 13%; left: 7%; width: 37%; height: 24%; background: repeating-linear-gradient(90deg,#e8e4d9 0 31%,#a9a49a 31% 32%); box-shadow: 0 -8px 0 #4a4d49; }
.alteration-study b { position: absolute; right: 10%; bottom: 13%; width: 32%; height: 17%; border-top: 9px solid #555852; border-right: 5px solid #555852; border-left: 5px solid #555852; }
.alteration-study span { position: absolute; top: 22%; bottom: 30%; left: 7%; width: 35%; border: 8px solid #eeeae0; border-bottom: 0; background: linear-gradient(145deg,#dad6cd,#aaa69c); }
.alteration-option { background: linear-gradient(180deg,#d9d5cc 0 72%,#8b867d 72%); }
.alteration-option > i, .alteration-option > b { position: absolute; display: block; }
.alteration-option--structure > i:first-child { top: 23%; bottom: 19%; left: 13%; width: 31%; border: 8px solid #eeeae0; border-bottom: 0; background: #7f8985; }
.alteration-option--structure > i:nth-child(2) { top: 23%; right: 13%; bottom: 19%; width: 31%; border: 8px solid #eeeae0; border-bottom: 0; background: #65736f; }
.alteration-option--structure > b { z-index: 2; top: 17%; right: 9%; left: 9%; height: 8%; background: var(--colour-yellow); box-shadow: 0 7px 8px rgba(20,20,18,.18); }
.alteration-option--kitchen > i:first-child { right: 9%; bottom: 15%; left: 9%; height: 26%; background: repeating-linear-gradient(90deg,#e9e5da 0 24%,#aaa59b 24% 25%); box-shadow: 0 -9px 0 #4b504c; }
.alteration-option--kitchen > i:nth-child(2) { top: 14%; right: 9%; width: 34%; height: 28%; border: 7px solid #eeeae0; background: linear-gradient(145deg,#cfddda,#6e827e); }
.alteration-option--kitchen > b { right: 18%; bottom: 14%; width: 35%; height: 15%; border-top: 8px solid #555953; border-right: 5px solid #555953; border-left: 5px solid #555953; }
.alteration-option--garage-door { background: linear-gradient(135deg,#b8aa98,#797d79); }
.alteration-option--garage-door > i:first-child { top: 13%; right: 22%; bottom: 9%; left: 22%; border: 10px solid #eeeae0; background: #4d5552; }
.alteration-option--garage-door > i:nth-child(2) { top: 23%; right: 31%; left: 31%; height: 22%; background: linear-gradient(145deg,#cedbd8,#70837f); }
.alteration-option--garage-door > b { top: 47%; right: 25%; width: 7px; height: 64px; border-radius: 4px; background: #b5afa1; }
.alteration-option--porch { background: linear-gradient(145deg,#c7c1b5,#818681); }
.alteration-option--porch > i:first-child { top: 26%; right: 20%; bottom: 8%; left: 20%; border: 8px solid #d9d3c6; background: #b9ae9d; }
.alteration-option--porch > i:nth-child(2) { z-index: 2; top: 38%; right: 36%; bottom: 8%; left: 36%; border: 6px solid #eeeae0; background: #505a56; }
.alteration-option--porch > b { z-index: 3; top: 9%; right: 13%; left: 13%; height: 25%; clip-path: polygon(0 100%,50% 0,100% 100%); background: #50534e; filter: drop-shadow(0 8px 7px rgba(20,20,18,.23)); }
.alteration-option--brickwork { background: repeating-linear-gradient(0deg,#a5866e 0 18px,#c9b19b 18px 21px); }
.alteration-option--brickwork::before { position: absolute; top: 0; bottom: 0; left: 25%; width: 3px; background: rgba(225,210,195,.72); box-shadow: 130px 0 rgba(225,210,195,.72),260px 0 rgba(225,210,195,.72); content: ""; }
.alteration-option--brickwork > i:first-child { z-index: 2; top: 16%; right: 24%; bottom: 8%; left: 24%; border: 10px solid #eeeae0; background: linear-gradient(145deg,#cedbd8,#6c807c); }
.alteration-option--brickwork > b { z-index: 3; top: 11%; right: 20%; left: 20%; height: 7%; background: var(--colour-yellow); }
.alteration-option--bespoke > i:first-child { top: 13%; bottom: 14%; left: 10%; width: 44%; border: 7px solid #eeeae0; background: linear-gradient(145deg,#ccd9d6,#6e827e); }
.alteration-option--bespoke > i:nth-child(2) { top: 17%; right: 10%; width: 27%; height: 47%; background: repeating-linear-gradient(0deg,#545a56 0 7px,transparent 7px 48px); border-inline: 5px solid #545a56; }
.alteration-option--bespoke > b { right: 8%; bottom: 14%; width: 38%; height: 16%; background: #9e998e; box-shadow: inset 0 7px 0 #545853; }
.kitchen-feature { overflow: hidden; }
.kitchen-renovation-visual { background: linear-gradient(145deg,#c8c4b9,#717a77); }
.kitchen-study { position: absolute; top: 11%; right: 7%; bottom: 17%; left: 7%; overflow: hidden; background: linear-gradient(180deg,#d9d5cb 0 69%,#8a857c 69%); }
.kitchen-study i:first-child { position: absolute; right: 6%; bottom: 11%; left: 6%; height: 29%; background: repeating-linear-gradient(90deg,#e9e5da 0 24%,#a7a298 24% 25%); box-shadow: 0 -10px 0 #484d49; }
.kitchen-study i:nth-child(2) { position: absolute; top: 11%; right: 7%; width: 34%; height: 31%; border: 7px solid #eeeae0; background: linear-gradient(145deg,#cedbd8,#6c817d); }
.kitchen-study i:nth-child(3) { position: absolute; top: 12%; left: 8%; width: 36%; height: 15%; background: var(--colour-yellow); }
.kitchen-study b { position: absolute; right: 17%; bottom: 10%; width: 39%; height: 18%; border-top: 10px solid #4d524e; border-right: 5px solid #4d524e; border-left: 5px solid #4d524e; }

.product-proof { border-block: 1px solid var(--colour-stone); }
.product-proof__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.product-proof__grid > div { min-height: 155px; padding: 2rem clamp(1rem, 2.4vw, 2.5rem); border-right: 1px solid var(--colour-stone); }
.product-proof__grid > div:first-child { padding-left: 0; }
.product-proof__grid > div:last-child { border-right: 0; }
.product-proof span { display: block; margin-bottom: 1.3rem; color: var(--colour-grey); font-size: .65rem; font-weight: 700; }
.product-proof strong { display: block; margin-bottom: .3rem; font-size: .92rem; }
.product-proof p { margin: 0; color: var(--colour-grey); font-size: .78rem; line-height: 1.45; }

.product-overview__grid { display: grid; grid-template-columns: .3fr 1fr; gap: 4rem; }
.product-overview__content { max-width: 1100px; }
.two-copy-columns { display: grid; grid-template-columns: 1fr .75fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.two-copy-columns p { margin: 0; }
.two-copy-columns > p:last-child { color: var(--colour-grey); }

.benefit-cards { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--colour-stone); }
.benefit-card { min-height: 340px; padding: 2rem clamp(1rem, 2.5vw, 2.5rem); border-right: 1px solid var(--colour-stone); }
.benefit-card:first-child { padding-left: 0; }
.benefit-card:last-child { border-right: 0; }
.benefit-card > span { display: grid; width: 42px; height: 42px; margin-bottom: 5rem; place-items: center; border: 1px solid var(--colour-stone); border-radius: 50%; color: var(--colour-grey); font-size: .68rem; }
.benefit-card p { margin: 0; color: var(--colour-grey); font-size: .9rem; }

.style-gallery__intro { margin-bottom: clamp(3rem, 7vw, 6rem); }
.style-gallery__intro .section-index { margin-bottom: 5rem; }
.door-style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); }
.door-style-grid--two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.door-style__visual { position: relative; display: grid; overflow: hidden; min-height: 480px; margin-bottom: 1.75rem; place-items: end center; border-radius: var(--radius-card); background: linear-gradient(145deg, #e0ded5, #aaa99f); }
.door-style__visual > span { position: absolute; z-index: 3; right: 1rem; bottom: 1rem; left: 1rem; color: rgba(255,255,255,.85); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.door-style-grid--two .door-style__visual--photo { min-height: 0; aspect-ratio: 4/5; background: #777; }
.door-style__visual--photo::after { position: absolute; z-index: 1; inset: 55% 0 0; background: linear-gradient(180deg,transparent,rgba(20,20,18,.68)); content: ""; }
.door-style__visual--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.door-style__visual--handles img { object-position: 50% 50%; }
.inward-opening-option { display: grid; margin-top: clamp(2.5rem,5vw,4.5rem); padding: clamp(1.5rem,3vw,2.5rem) 0; border-top: 1px solid var(--colour-stone); border-bottom: 1px solid var(--colour-stone); grid-template-columns: minmax(150px,.45fr) minmax(0,1fr) auto; align-items: center; gap: clamp(1.5rem,4vw,4rem); }
.inward-opening-option > span { color: var(--colour-grey); font-size: .67rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.inward-opening-option h3 { margin-bottom: .45rem; font-size: clamp(1.5rem,2.5vw,2.4rem); }
.inward-opening-option p { max-width: 760px; margin: 0; color: var(--colour-grey); }
.inward-opening-option > strong { padding: .7rem 1rem; border: 1px solid var(--colour-stone); border-radius: 999px; font-size: .72rem; white-space: nowrap; }
.mini-door { position: absolute; top: 13%; right: 22%; bottom: 0; left: 22%; border: 7px solid #ece7da; background: #515d57; box-shadow: 0 20px 35px rgba(20,20,18,.22); }
.mini-door::before, .mini-door::after { position: absolute; right: 14%; left: 14%; height: 23%; border: 3px solid rgba(20,20,18,.28); content: ""; }
.mini-door::before { top: 12%; }
.mini-door::after { bottom: 10%; }
.mini-door i { position: absolute; top: 49%; right: 11%; width: 5px; height: 50px; background: #aea99d; }
.mini-door--cottage { background: #3c4a58; }
.mini-door--cottage::before { right: 13%; left: 13%; height: 30%; border: 0; background: linear-gradient(135deg, rgba(225,234,232,.8), rgba(115,129,127,.5)); }
.mini-door--cottage::after { top: 48%; bottom: auto; height: 1px; border-width: 1px 0 0; }
.mini-door--modern { background: #363636; }
.mini-door--modern::before { top: 10%; right: auto; bottom: 10%; left: 14%; width: 19%; height: auto; border: 0; background: linear-gradient(145deg, #dae4e2, #84938f); }
.mini-door--modern::after { display: none; }
.mini-door--stable { background: #f1f0e9; }
.mini-door--stable::before { top: 0; right: 0; left: 0; height: 47%; border: 0; border-bottom: 7px solid #ece7da; background: linear-gradient(145deg, #d4dfdc, #81928e); box-shadow: inset 0 0 0 5px #f1f0e9, inset 0 0 0 8px rgba(52,52,52,.3); }
.mini-door--stable::after { right: 13%; bottom: 11%; left: 13%; height: 29%; border: 0; background: repeating-linear-gradient(90deg, transparent 0 18%, rgba(52,52,52,.14) 18% 20%); }
.mini-door--stable i { top: 45%; background: #4c4c48; }
.patio-config { position: absolute; top: 17%; right: 7%; bottom: 7%; left: 7%; display: grid; overflow: hidden; gap: 5px; border: 8px solid #f1eee4; background: #f1eee4; box-shadow: 0 18px 35px rgba(20,20,18,.22); }
.patio-config--two { grid-template-columns: repeat(2,1fr); }
.patio-config--three { grid-template-columns: repeat(3,1fr); }
.patio-config--four { grid-template-columns: repeat(4,1fr); }
.patio-config i { display: block; background: linear-gradient(145deg,#d0dcda,#718783); box-shadow: inset 0 0 0 2px rgba(255,255,255,.32); }
.patio-config i:nth-child(even) { background: linear-gradient(145deg,#bbc9c6,#607672); }
.french-config { position: absolute; top: 14%; right: 18%; bottom: 0; left: 18%; display: grid; overflow: hidden; grid-template-columns: 1fr 1fr; gap: 6px; border: 8px solid #f0ede3; border-bottom: 0; background: #f0ede3; box-shadow: 0 18px 35px rgba(20,20,18,.22); }
.french-config i { display: block; background: linear-gradient(145deg,#d0dcda,#718783); box-shadow: inset 0 0 0 3px rgba(255,255,255,.45); transform-origin: center right; }
.french-config i:nth-child(2) { transform-origin: center left; }
.french-config--in i:first-child { transform: perspective(400px) rotateY(-12deg); }
.french-config--in i:nth-child(2) { transform: perspective(400px) rotateY(12deg); }
.french-config--out i:first-child { transform: perspective(400px) rotateY(13deg); }
.french-config--out i:nth-child(2) { transform: perspective(400px) rotateY(-13deg); }
.french-config b { position: absolute; z-index: 3; top: 45%; width: 7px; height: 55px; border-radius: 3px; background: #555650; }
.french-config b:nth-of-type(1) { right: calc(50% + 8px); }
.french-config b:nth-of-type(2) { left: calc(50% + 8px); }
.bifold-config { position: absolute; top: 18%; right: 5%; bottom: 8%; left: 5%; display: grid; gap: 4px; border: 7px solid #353a39; background: #353a39; box-shadow: 0 18px 35px rgba(20,20,18,.22); }
.bifold-config--compact { grid-template-columns: repeat(3,1fr); }
.bifold-config--wide { grid-template-columns: repeat(5,1fr); }
.bifold-config--stack { grid-template-columns: repeat(4,1fr); perspective: 500px; }
.bifold-config i { display: block; background: linear-gradient(145deg,#cad8d5,#697f7b); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.bifold-config--stack i:nth-child(1) { transform: rotateY(15deg); transform-origin: right; }
.bifold-config--stack i:nth-child(2) { transform: rotateY(-15deg); transform-origin: left; }
.bifold-config--stack i:nth-child(3) { transform: rotateY(15deg); transform-origin: right; }
.bifold-config--stack i:nth-child(4) { transform: rotateY(-15deg); transform-origin: left; }
.casement-config { position: absolute; top: 14%; right: 12%; bottom: 10%; left: 12%; display: grid; gap: 7px; border: 9px solid #f1eee5; background: #f1eee5; box-shadow: 0 18px 35px rgba(20,20,18,.22); }
.casement-config i { display: block; background: linear-gradient(145deg,#cedbd8,#718681); box-shadow: inset 0 0 0 3px rgba(255,255,255,.42); }
.casement-config--side { grid-template-columns: 1fr 1fr; }
.casement-config--side i:first-child { transform: perspective(500px) rotateY(-8deg); transform-origin: left; }
.casement-config--top { grid-template-columns: repeat(3,1fr); }
.casement-config--top i:nth-child(2) { transform: perspective(500px) rotateX(-8deg); transform-origin: top; }
.casement-config--combined { grid-template-columns: 1.1fr .9fr; grid-template-rows: 1fr 1fr; }
.casement-config--combined i:first-child { grid-row: 1 / 3; }
.flush-config { position: absolute; top: 14%; right: 12%; bottom: 10%; left: 12%; display: grid; gap: 4px; border: 7px solid #e9e6dc; background: #e9e6dc; box-shadow: 0 18px 35px rgba(20,20,18,.22); }
.flush-config i { display: block; border: 2px solid rgba(242,240,233,.88); background: linear-gradient(145deg,#c9d8d5,#6c817d); box-shadow: inset 0 0 0 1px rgba(52,52,52,.2); }
.flush-config--heritage { grid-template-columns: 1fr 1fr; }
.flush-config--contemporary { grid-template-columns: repeat(3,1fr); }
.flush-config--whole-home { grid-template-columns: 1.15fr .85fr; grid-template-rows: 1fr 1fr; }
.flush-config--whole-home i:first-child { grid-row: 1 / 3; }
.door-style > div:last-child > span { color: var(--colour-grey); font-size: .66rem; font-weight: 700; }
.door-style h3 { margin-top: .5rem; }
.door-style p { color: var(--colour-grey); }
.specification-note { max-width: 720px; margin: 3rem 0 0; padding-left: 1rem; border-left: 3px solid var(--colour-yellow); color: var(--colour-grey); font-size: .78rem; }

.colour-studio { overflow: hidden; background: var(--colour-black); color: rgba(255,255,255,.64); }
.colour-studio h2 { color: var(--colour-white); }
.colour-studio__grid { display: grid; grid-template-columns: .8fr 1fr; gap: clamp(4rem, 9vw, 10rem); align-items: center; }
.colour-studio__copy .section-index { margin-bottom: 5rem; }
.colour-studio__copy > p:not(.eyebrow, .colour-selection) { max-width: 600px; }
.colour-promise { display: flex; max-width: 580px; align-items: flex-start; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.17); }
.colour-promise > span { display: grid; width: 28px; height: 28px; flex: none; place-items: center; border-radius: 50%; background: var(--colour-yellow); color: var(--colour-charcoal); font-size: .7rem; font-weight: 800; }
.colour-promise p { margin: 0; color: rgba(255,255,255,.62); font-size: .82rem; }
.colour-promise strong { display: block; margin-bottom: .2rem; color: var(--colour-white); }
.door-scene { position: relative; min-height: 650px; overflow: hidden; border-radius: var(--radius-media); background: #c5c1b6; }
.door-scene__wall { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.3), transparent 45%), repeating-linear-gradient(0deg, transparent 0 51px, rgba(95,91,82,.11) 51px 53px); }
.finish-library { position: absolute; top: 12%; right: 10%; bottom: 16%; left: 10%; display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(.6rem,1.5vw,1.25rem); transform: perspective(1000px) rotateY(-5deg); }
.finish-library i { display: block; border: 7px solid rgba(255,255,255,.68); border-radius: 3px; box-shadow: 0 18px 35px rgba(20,20,18,.2), inset 0 0 0 1px rgba(20,20,18,.18); }
.finish-library i:nth-child(1) { background: linear-gradient(145deg,#7f553a,#b9875b); }
.finish-library i:nth-child(2) { background: #485c55; }
.finish-library i:nth-child(3) { background: #26364a; }
.finish-library i:nth-child(4) { background: #ded9ca; }
.finish-library i:nth-child(5) { background: #723b37; }
.finish-library i:nth-child(6) { background: #353735; }
.door-scene > span { position: absolute; z-index: 2; right: 1.5rem; bottom: 1.5rem; left: 1.5rem; color: var(--colour-white); font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.options-intro { max-width: 900px; margin-bottom: clamp(3rem, 6vw, 5rem); }
.options-intro .section-index { margin-bottom: 5rem; }
.options-intro > p:last-child { max-width: 630px; color: var(--colour-grey); }
.option-grid { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
.option-grid--three { grid-template-columns: repeat(3, 1fr); }
.option-card { padding: 1.25rem; border: 1px solid var(--colour-stone); border-radius: var(--radius-card); }
.option-card > span { display: block; margin: 1.5rem 0 .5rem; color: var(--colour-grey); font-size: .66rem; font-weight: 700; }
.option-card p { color: var(--colour-grey); }
.glass-sample { position: relative; overflow: hidden; aspect-ratio: 4/3; border-radius: calc(var(--radius-card) - 6px); background: linear-gradient(145deg, #cbd9d7, #6d807d); }
.glass-sample::after { position: absolute; inset: 12%; border: 2px solid rgba(255,255,255,.45); content: ""; }
.glass-sample--obscure { background: radial-gradient(circle at 30% 40%, rgba(255,255,255,.75), transparent 9%), radial-gradient(circle at 68% 58%, rgba(255,255,255,.5), transparent 13%), linear-gradient(145deg,#dce3e1,#8b9a96); filter: saturate(.7); }
.glass-sample--decorative { background: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 2px, transparent 2px 32px), linear-gradient(145deg,#b9cfcc,#647b77); }
.glass-sample--decorative::before { position: absolute; z-index: 1; inset: 22%; border: 4px double rgba(255,255,255,.72); content: ""; transform: rotate(45deg); }

.hardware-grid { display: grid; grid-template-columns: 1fr .85fr; gap: clamp(4rem, 9vw, 10rem); align-items: center; }
.hardware-visual { min-height: 680px; background: linear-gradient(135deg,#d9d4c8,#76766f); }
.hardware-study { position: absolute; top: 12%; right: 15%; bottom: 12%; left: 15%; background: #4c5953; box-shadow: 0 25px 55px rgba(20,20,18,.25); }
.hardware-study i { position: absolute; top: 32%; right: 15%; width: 20px; height: 160px; border-radius: 6px; background: linear-gradient(90deg,#807a6e,#d0c8b9,#777166); box-shadow: 0 7px 12px rgba(0,0,0,.25); }
.hardware-study b { position: absolute; top: 62%; left: 50%; width: 45%; height: 18px; transform: translateX(-50%); background: linear-gradient(#cfc7b9,#817b70); box-shadow: 0 5px 10px rgba(0,0,0,.25); }
.patio-detail-study { position: absolute; right: 10%; bottom: 15%; left: 10%; height: 42%; transform: perspective(700px) rotateX(52deg); background: #e0ddd3; box-shadow: 0 30px 45px rgba(20,20,18,.28); }
.patio-detail-study::before, .patio-detail-study::after { position: absolute; right: 4%; left: 4%; height: 12px; background: linear-gradient(#85857e,#d2d0c7,#6f706b); content: ""; }
.patio-detail-study::before { top: 30%; }
.patio-detail-study::after { top: 62%; }
.patio-detail-study i { position: absolute; right: 18%; bottom: 0; left: 18%; height: 88%; border: 9px solid #eeeae0; background: linear-gradient(145deg,#c9d6d3,#768984); }
.patio-detail-study b { position: absolute; z-index: 2; right: 13%; bottom: 5%; width: 12%; height: 12%; border-radius: 50%; background: #3f413e; box-shadow: -240px 0 0 #3f413e; }
.french-detail-study { position: absolute; top: 12%; right: 18%; bottom: 12%; left: 18%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border: 10px solid #ece8dd; background: #ece8dd; box-shadow: 0 25px 55px rgba(20,20,18,.25); }
.french-detail-study i { display: block; background: #52605a; }
.french-detail-study b { position: absolute; z-index: 2; top: 37%; width: 13px; height: 125px; border-radius: 5px; background: linear-gradient(90deg,#807a6e,#d0c8b9,#777166); box-shadow: 0 6px 12px rgba(0,0,0,.25); }
.french-detail-study b:nth-of-type(1) { right: calc(50% + 14px); }
.french-detail-study b:nth-of-type(2) { left: calc(50% + 14px); }
.bifold-detail-study { position: absolute; top: 12%; right: 10%; bottom: 12%; left: 10%; overflow: hidden; border: 11px solid #353b3a; background: linear-gradient(145deg,#c7d4d2,#667b77); box-shadow: 0 25px 55px rgba(20,20,18,.25); }
.bifold-detail-study::before { position: absolute; top: 0; bottom: 0; left: 50%; width: 10px; background: #353b3a; content: ""; }
.bifold-detail-study i { position: absolute; left: 50%; width: 64px; height: 16px; transform: translateX(-50%); border-radius: 8px; background: linear-gradient(#a8a99f,#4b4d49); box-shadow: 0 4px 8px rgba(0,0,0,.35); }
.bifold-detail-study i:first-child { top: 22%; }
.bifold-detail-study i:nth-child(2) { bottom: 22%; }
.bifold-detail-study b { position: absolute; z-index: 2; top: 42%; left: calc(50% - 34px); width: 10px; height: 72px; border-radius: 4px; background: #202322; }
.casement-detail-study { position: absolute; top: 12%; right: 16%; bottom: 12%; left: 16%; overflow: hidden; border: 11px solid #eeeae0; background: linear-gradient(145deg,#c8d6d3,#687d79); box-shadow: 0 25px 55px rgba(20,20,18,.25); }
.casement-detail-study i { position: absolute; top: 10%; right: 10%; bottom: 10%; left: 10%; border: 4px solid rgba(255,255,255,.58); transform: perspective(500px) rotateY(-7deg); transform-origin: left; }
.casement-detail-study b { position: absolute; z-index: 2; right: 10%; width: 13px; height: 75px; border-radius: 5px; background: linear-gradient(90deg,#72736d,#c4c1b7,#6d6e68); box-shadow: 0 5px 10px rgba(0,0,0,.28); }
.casement-detail-study b:nth-of-type(1) { top: 24%; }
.casement-detail-study b:nth-of-type(2) { bottom: 24%; }
.flush-detail-study { position: absolute; top: 12%; right: 14%; bottom: 12%; left: 14%; overflow: hidden; border: 8px solid #e9e6dc; background: linear-gradient(145deg,#c7d5d2,#667b77); box-shadow: 0 25px 55px rgba(20,20,18,.25); }
.flush-detail-study i { position: absolute; top: 8%; right: 8%; bottom: 8%; left: 8%; border: 4px solid rgba(237,234,225,.95); box-shadow: inset 0 0 0 2px rgba(52,52,52,.25); }
.flush-detail-study b { position: absolute; z-index: 2; display: block; background: #e9e6dc; }
.flush-detail-study b:nth-of-type(1) { top: 50%; right: 0; left: 0; height: 7px; }
.flush-detail-study b:nth-of-type(2) { top: 0; bottom: 0; left: 50%; width: 7px; }
.hardware-copy .section-index { margin-bottom: 5rem; }
.feature-list { margin: 2rem 0; padding: 0; list-style: none; }
.feature-list li { position: relative; padding: .85rem 0 .85rem 2rem; border-bottom: 1px solid var(--colour-stone); }
.feature-list li::before { position: absolute; top: 1.05rem; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--colour-yellow); content: "✓"; color: var(--colour-charcoal); font-size: .65rem; font-weight: 800; line-height: 18px; text-align: center; }

.security-energy { background: var(--colour-warm-white); }
.security-energy__grid { display: grid; grid-template-columns: 1fr 1fr; }
.security-panel { min-height: 670px; padding: clamp(3rem, 7vw, 7rem); }
.security-panel h2 { max-width: 650px; }
.security-panel > p:not(.eyebrow,.small-print) { max-width: 590px; font-size: 1.08rem; }
.security-panel__number { display: block; margin-bottom: clamp(5rem, 10vw, 9rem); font-size: .68rem; font-weight: 700; }
.security-panel--dark { background: var(--colour-black); color: rgba(255,255,255,.66); }
.security-panel--dark h2 { color: var(--colour-white); }
.security-panel--dark .security-panel__number { color: var(--colour-yellow); }
.security-panel ul { margin: 2.5rem 0 0; padding: 0; list-style: none; }
.security-panel li { padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.15); font-size: .85rem; }
.security-panel--yellow { background: var(--colour-yellow); color: var(--colour-charcoal); }
.security-panel--yellow .eyebrow { color: var(--colour-charcoal); }
.security-panel--yellow .small-print { max-width: 550px; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid rgba(52,52,52,.25); font-size: .76rem; }

.why-product__grid { display: grid; grid-template-columns: 1fr .8fr; gap: clamp(4rem, 9vw, 10rem); }
.why-product__heading .section-index { margin-bottom: 5rem; }
.why-product__copy { padding-top: 7rem; }
.why-product__copy > p:not(.large-copy) { margin-bottom: 2rem; color: var(--colour-grey); }

.product-case-study { background: var(--colour-white); }
.case-study-card { display: grid; overflow: hidden; border-radius: var(--radius-media); background: var(--colour-charcoal); grid-template-columns: 1.1fr .9fr; }
.case-study-card__media { min-height: 700px; border-radius: 0; }
.case-study-card__media--before-after { display: grid; min-height: 760px; grid-template-rows: .78fr 1.22fr; gap: 2px; background: var(--colour-charcoal); }
.case-study-card__media--before-after figure { position: relative; min-height: 0; margin: 0; overflow: hidden; }
.case-study-card__media--before-after img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-study-card__media--before-after figure::after { position: absolute; inset: 55% 0 0; background: linear-gradient(180deg,transparent,rgba(20,20,18,.55)); content: ""; }
.case-study-card__media--before-after figcaption { position: absolute; z-index: 1; bottom: 1rem; left: 1rem; padding: .55rem .75rem; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(20,20,18,.72); color: var(--colour-white); font-size: .65rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(8px); }
.case-study-card__content { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.5rem, 6vw, 6rem); color: rgba(255,255,255,.65); }
.case-study-card__content .section-index { margin-bottom: 4rem; }
.case-study-card__content h2 { color: var(--colour-white); }
.case-study-card__content dl { margin: 1.5rem 0 2.5rem; }
.case-study-card__content dl div { display: flex; justify-content: space-between; gap: 2rem; padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.16); font-size: .76rem; }
.case-study-card__content dt { color: rgba(255,255,255,.42); }
.case-study-card__content dd { margin: 0; color: var(--colour-white); }
.case-study-card__content .text-link { align-self: flex-start; }
.door-case-study-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 2rem); margin-top: clamp(2rem, 4vw, 4rem); }
.door-case-study-gallery figure { overflow: hidden; margin: 0; border: 1px solid var(--colour-stone); border-radius: var(--radius-card); background: var(--colour-warm); }
.door-case-study-gallery figure > div { overflow: hidden; aspect-ratio: 4 / 5; background: var(--colour-stone); }
.door-case-study-gallery img { width: 100%; height: 100%; object-fit: cover; }
.door-case-study-gallery figcaption { padding: clamp(1.25rem, 2vw, 2rem); }
.door-case-study-gallery figcaption span { display: block; margin-bottom: .65rem; color: var(--colour-grey); font-size: .65rem; font-weight: 750; letter-spacing: .08em; }
.door-case-study-gallery figcaption strong { display: block; margin-bottom: .6rem; color: var(--colour-charcoal); font-size: 1rem; }
.door-case-study-gallery figcaption p { margin: 0; color: var(--colour-grey); font-size: .76rem; }

.related-products .section-heading { align-items: end; }
.related-products .section-index { margin-bottom: 3rem; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.related-card { overflow: hidden; border: 1px solid var(--colour-stone); border-radius: var(--radius-card); background: var(--colour-white); text-decoration: none; transition: transform var(--ease), box-shadow var(--ease); }
.related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.related-card__visual { aspect-ratio: 4/3; }
.related-card > div:last-child { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1.5rem; }
.related-card > div:last-child > span { color: var(--colour-grey); font-size: .66rem; }
.related-card h3 { margin: 0; }
.related-card > div:last-child > b { font-size: 1.2rem; transition: transform var(--ease); }
.related-card:hover > div:last-child > b { transform: translate(3px,-3px); }

/* Home page */
.home-hero { overflow: hidden; padding: clamp(3rem,6vw,6rem) 0 2rem; background: var(--colour-black); color: rgba(255,255,255,.7); }
.home-hero__grid { display: grid; min-height: clamp(650px,78vh,850px); grid-template-columns: minmax(0,.92fr) minmax(430px,.8fr); align-items: center; gap: clamp(3rem,7vw,8rem); }
.home-hero__content { max-width: 820px; }
.home-hero__content .eyebrow { color: var(--colour-yellow); }
.home-hero__content h1 { color: var(--colour-white); font-size: clamp(4rem,8.6vw,8.5rem); }
.home-hero__content h1 em { color: rgba(255,255,255,.38); }
.home-hero__content > p:not(.eyebrow) { max-width: 650px; margin-bottom: 2.25rem; font-size: clamp(1.05rem,1.6vw,1.3rem); }
.home-hero__media { min-height: min(70vh,750px); background: linear-gradient(145deg,#bcb8ad,#575d5a); }
.media-photo--home-hero > img { object-position: 64% center; }
.home-study { position: absolute; top: 11%; right: 9%; bottom: 16%; left: 9%; display: grid; grid-template-columns: 1.5fr .8fr; grid-template-rows: 1fr .8fr; gap: 7px; transform: perspective(1000px) rotateY(-5deg); }
.home-study i { display: block; border: 9px solid #383c3a; background: linear-gradient(150deg,rgba(219,231,228,.65),rgba(75,94,90,.42)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); }
.home-study i:first-child { grid-row: 1 / 3; }
.home-study b { position: absolute; right: 0; bottom: 0; left: 0; height: 22%; background: linear-gradient(135deg,#d7d1c4,#8d8e86); clip-path: polygon(0 35%,68% 35%,75% 0,100% 0,100% 100%,0 100%); }
.home-hero__footer { display: flex; align-items: center; gap: 1.25rem; color: rgba(255,255,255,.46); font-size: .67rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.home-hero__footer p { margin: 0; }
.home-hero__footer span { height: 1px; flex: 1; background: rgba(255,255,255,.16); }
.home-hero__footer small { font: inherit; }

.home-proof { border-bottom: 1px solid var(--colour-stone); background: var(--colour-white); }
.home-proof__grid { display: grid; grid-template-columns: repeat(4,1fr); }
.home-proof__grid > div { min-height: 165px; padding: 2rem clamp(1rem,2.4vw,2.5rem); border-right: 1px solid var(--colour-stone); }
.home-proof__grid > div:first-child { padding-left: 0; }
.home-proof__grid > div:last-child { border-right: 0; }
.home-proof span { display: block; margin-bottom: 1.8rem; color: var(--colour-grey); font-size: .65rem; font-weight: 700; }
.home-proof strong { display: block; margin-bottom: .35rem; font-size: .92rem; }
.home-proof p { margin: 0; color: var(--colour-grey); font-size: .78rem; line-height: 1.45; }

.home-intro__grid { display: grid; grid-template-columns: .3fr 1fr; gap: 4rem; }
.home-intro__content { max-width: 1120px; }
.home-intro__content h2 { max-width: 1050px; }

.home-services { background: var(--colour-warm-white); }
.service-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(1.25rem,3vw,2.5rem); }
.service-card { overflow: hidden; border: 1px solid var(--colour-stone); border-radius: var(--radius-card); background: var(--colour-white); transition: transform var(--ease),box-shadow var(--ease); }
.service-card--wide { grid-column: span 2; }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.service-card > a { display: block; text-decoration: none; }
.service-card__media { aspect-ratio: 16/10; }
.service-card--wide .service-card__media { aspect-ratio: 2.35/1; }
.service-card__content { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: clamp(1rem,2.5vw,2.25rem); padding: clamp(1.5rem,3vw,2.5rem); }
.service-card__content > span { color: var(--colour-grey); font-size: .66rem; font-weight: 700; }
.service-card__content .eyebrow { margin-bottom: .65rem; }
.service-card__content h3 { font-size: clamp(1.65rem,3vw,2.75rem); }
.service-card__content p:last-child { max-width: 580px; margin: 0; color: var(--colour-grey); }
.service-card__content > b { font-size: 1.4rem; transition: transform var(--ease); }
.service-card:hover .service-card__content > b { transform: translate(3px,-3px); }
.service-visual { position: relative; overflow: hidden; background: linear-gradient(145deg,#d8d5ca,#868c88); }
.service-visual::after { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 55%,rgba(20,20,18,.28)); content: ""; }
.service-visual i,.service-visual b { position: absolute; display: block; }
.service-visual--windows i { top: 12%; bottom: 0; width: 24%; border: 9px solid #3a3d3b; background: linear-gradient(145deg,#c9d7d4,#718580); }
.service-visual--windows i:first-child { left: 10%; }
.service-visual--windows i:nth-child(2) { left: 38%; }
.service-visual--windows i:nth-child(3) { right: 10%; }
.service-visual--conservatory i { bottom: 0; width: 28%; height: 62%; border: 7px solid #eee9dd; background: linear-gradient(145deg,#cddbd8,#768b86); }
.service-visual--conservatory i:first-child { left: 10%; transform: skewY(-7deg); }
.service-visual--conservatory i:nth-child(2) { left: 36%; }
.service-visual--conservatory i:nth-child(3) { right: 10%; transform: skewY(7deg); }
.service-visual--garage i:first-child { right: 12%; bottom: 0; left: 12%; height: 70%; border: 9px solid #e9e5db; background: linear-gradient(145deg,#c9d7d4,#728782); box-shadow: inset 0 8rem 0 -7.6rem #e9e5db; }
.service-visual--garage i:nth-child(2) { right: 0; bottom: 0; left: 0; height: 15%; background: #9d9b91; }
.service-visual--extension i { bottom: 0; border: 8px solid #3b3d3b; background: linear-gradient(145deg,#c6d5d2,#72847f); }
.service-visual--extension i:first-child { top: 26%; left: 6%; width: 37%; }
.service-visual--extension i:nth-child(2) { top: 9%; right: 7%; width: 48%; }
.service-visual--extension i:nth-child(3) { right: 0; bottom: 0; left: 0; height: 13%; border: 0; background: #b0aa9d; }
.service-visual--alterations i:first-child { top: 12%; bottom: 0; left: 8%; width: 28%; border: 8px solid #3b3d3b; background: linear-gradient(145deg,#ccd9d6,#70837f); }
.service-visual--alterations i:nth-child(2) { top: 19%; right: 8%; bottom: 0; width: 55%; background: linear-gradient(160deg,#e0d9cc,#817d74); clip-path: polygon(0 20%,100% 0,100% 100%,0 100%); }
.service-visual--alterations b { top: 12%; bottom: 0; left: 42%; width: 12px; background: #3b3d3b; box-shadow: 13rem 0 0 #3b3d3b; }

.home-difference { padding-block: clamp(4rem,7vw,7rem); background: var(--colour-black); color: rgba(255,255,255,.62); }
.home-difference__grid { display: grid; grid-template-columns: 1fr .9fr; gap: clamp(4rem,8vw,9rem); align-items: center; }
.home-difference__media { min-height: 720px; background: linear-gradient(145deg,#b7b3a8,#5d625f); }
.structure-study { position: absolute; inset: 10% 11% 17%; border: 8px solid #434541; background: linear-gradient(145deg,#d2cabc,#76766e); }
.structure-study i { position: absolute; top: 18%; right: 20%; bottom: 0; left: 20%; border: 13px solid #4b4a45; background: linear-gradient(145deg,#c6d4d1,#687d78); }
.structure-study b { position: absolute; z-index: 2; display: block; background: #5a5953; }
.structure-study b:nth-of-type(1) { top: 12%; right: 8%; left: 8%; height: 18px; }
.structure-study b:nth-of-type(2) { top: 12%; bottom: 0; left: 48%; width: 16px; }
.home-difference__content .section-index { margin-bottom: 5rem; }
.home-difference__content h2 { color: var(--colour-white); }
.home-difference__content .large-copy { color: rgba(255,255,255,.74); }
.home-difference__content ul { margin: 2.5rem 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.15); list-style: none; }
.home-difference__content li { display: grid; grid-template-columns: 45px 1fr; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.home-difference__content li > span { color: var(--colour-yellow); font-size: .67rem; font-weight: 700; }
.home-difference__content li strong { color: var(--colour-white); }
.home-difference__content li p { margin: .25rem 0 0; font-size: .84rem; }

.home-process__heading { max-width: 950px; margin-bottom: clamp(4rem,7vw,7rem); }
.home-process__heading .section-index { margin-bottom: 5rem; }
.home-process__steps { display: grid; margin: 0; padding: 0; border-top: 1px solid var(--colour-stone); grid-template-columns: repeat(4,1fr); list-style: none; }
.home-process__steps li { min-height: 330px; padding: 2rem clamp(1rem,2.3vw,2.4rem); border-right: 1px solid var(--colour-stone); }
.home-process__steps li:first-child { padding-left: 0; }
.home-process__steps li:last-child { border-right: 0; }
.home-process__steps span { display: grid; width: 42px; height: 42px; margin-bottom: 5rem; place-items: center; border: 1px solid var(--colour-stone); border-radius: 50%; color: var(--colour-grey); font-size: .66rem; }
.home-process__steps p { margin: 0; color: var(--colour-grey); font-size: .88rem; }

.home-projects { background: var(--colour-warm-white); }
.home-projects__grid { display: grid; grid-template-columns: 1.2fr .8fr; grid-template-rows: 1fr 1fr; gap: clamp(1rem,2.5vw,2rem); }
.project-tile { min-height: 320px; border-radius: var(--radius-card); text-decoration: none; }
.project-tile--large { min-height: 680px; grid-row: 1 / 3; }
.project-tile:nth-child(2) { background: linear-gradient(145deg,#c5c2b8,#777f7b); }
.project-tile:nth-child(3) { background: linear-gradient(145deg,#d4d0c4,#89877f); }
.project-tile > div { position: absolute; z-index: 2; right: 1.5rem; bottom: 1.5rem; left: 1.5rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; color: var(--colour-white); text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.project-tile small { color: var(--colour-yellow); font-size: .63rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.project-tile strong { color: var(--colour-white); font-size: clamp(1rem,2vw,1.5rem); }
.project-tile b { color: var(--colour-yellow); font-size: 1.3rem; transition: transform var(--ease); }
.project-tile:hover b { transform: translate(3px,-3px); }

.home-reviews { background: var(--colour-black); color: rgba(255,255,255,.7); }
.home-reviews__grid { display: grid; grid-template-columns: minmax(0,.82fr) minmax(420px,1fr); align-items: center; gap: clamp(4rem,9vw,10rem); }
.home-reviews__heading h2 { color: var(--colour-white); }
.home-reviews__heading .large-copy { max-width: 660px; color: rgba(255,255,255,.68); }
.home-reviews__card { display: grid; min-height: 470px; padding: clamp(2rem,4vw,4rem); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-card); background: rgba(255,255,255,.045); color: rgba(255,255,255,.7); text-decoration: none; transition: border-color var(--ease), background var(--ease), transform var(--ease); }
.home-reviews__card:hover { border-color: rgba(251,230,1,.62); background: rgba(255,255,255,.07); transform: translateY(-4px); }
.home-reviews__stars { display: flex; align-self: start; gap: .35rem; color: var(--colour-yellow); font-size: clamp(1.2rem,2vw,1.65rem); letter-spacing: .03em; }
.home-reviews__card > div:nth-child(2) { align-self: center; }
.home-reviews__card h3 { max-width: 700px; margin-bottom: 1rem; color: var(--colour-white); font-size: clamp(2rem,4vw,3.9rem); line-height: 1.04; }
.home-reviews__card p:not(.eyebrow) { max-width: 620px; margin-bottom: 0; }
.home-reviews__card > strong { display: flex; align-self: end; justify-content: space-between; gap: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.16); color: var(--colour-white); font-size: .86rem; }
.home-reviews__card > strong b { color: var(--colour-yellow); font-size: 1.15rem; transition: transform var(--ease); }
.home-reviews__card:hover > strong b { transform: translate(3px,-3px); }

.home-areas__grid { display: grid; grid-template-columns: 1fr .8fr; gap: clamp(4rem,9vw,10rem); }
.home-areas__grid .section-index { margin-bottom: 5rem; }
.home-areas__content ul { display: flex; flex-wrap: wrap; gap: .6rem; margin: 2.5rem 0; padding: 0; list-style: none; }
.home-areas__content li { padding: .65rem 1rem; border: 1px solid var(--colour-stone); border-radius: 999px; color: var(--colour-grey); font-size: .8rem; }

/* Areas we cover */
.area-hero { overflow: hidden; padding: clamp(2.5rem,5vw,5rem) 0 clamp(4rem,8vw,7rem); background: var(--colour-black); color: rgba(255,255,255,.72); }
.area-hero .breadcrumbs a { color: rgba(255,255,255,.72); }
.area-hero .breadcrumbs li { color: rgba(255,255,255,.5); }
.area-hero__grid { display: grid; min-height: clamp(590px,68vh,760px); grid-template-columns: minmax(0,1fr) minmax(400px,.82fr); align-items: center; gap: clamp(3rem,7vw,8rem); }
.area-hero__content { position: relative; z-index: 2; }
.area-hero__content h1 { max-width: 850px; color: var(--colour-white); }
.area-hero__content h1 em { color: rgba(255,255,255,.42); }
.area-hero__lead { max-width: 690px; margin-bottom: 2.2rem; color: rgba(255,255,255,.67); font-size: clamp(1.08rem,1.6vw,1.35rem); line-height: 1.65; }
.area-hero__media { position: relative; min-height: clamp(500px,58vw,690px); margin: 0; overflow: hidden; border-radius: var(--radius-media); background: #555; }
.area-hero__media::after { position: absolute; inset: 35% 0 0; background: linear-gradient(180deg,transparent,rgba(20,20,18,.84)); content: ""; }
.area-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.area-hero__media figcaption { position: absolute; z-index: 2; right: clamp(1.5rem,3vw,2.5rem); bottom: clamp(1.5rem,3vw,2.5rem); left: clamp(1.5rem,3vw,2.5rem); display: grid; gap: .45rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.4); }
.area-hero__media figcaption span { color: var(--colour-yellow); font-size: .68rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.area-hero__media figcaption strong { color: var(--colour-white); font-size: clamp(1.1rem,2vw,1.55rem); }
.area-hero__media figcaption small { color: rgba(255,255,255,.68); }
.area-card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2.5vw,2rem); }
.area-card { min-height: 430px; padding: clamp(1.75rem,3vw,2.75rem); border: 1px solid var(--colour-stone); border-radius: var(--radius-card); background: var(--colour-white); }
.area-card > span { display: grid; width: 42px; height: 42px; margin-bottom: clamp(4rem,7vw,7rem); place-items: center; border: 1px solid var(--colour-stone); border-radius: 50%; color: var(--colour-grey); font-size: .68rem; }
.area-card h3 { font-size: clamp(2rem,3.5vw,3.5rem); }
.area-card > p:not(.eyebrow) { min-height: 5.5rem; color: var(--colour-grey); }
.area-radius { overflow: hidden; }
.area-radius__grid { display: grid; grid-template-columns: .85fr 1fr; gap: clamp(4rem,9vw,10rem); }
.area-radius__grid .section-index { margin-bottom: 5rem; }
.area-radius__content > p:not(.large-copy) { max-width: 690px; color: var(--colour-grey); }
.area-radius__content ul { display: flex; flex-wrap: wrap; gap: .65rem; margin: 2.2rem 0 2.5rem; padding: 0; list-style: none; }
.area-radius__content li { padding: .7rem 1rem; border: 1px solid var(--colour-stone); border-radius: 999px; color: var(--colour-grey); font-size: .8rem; }
.area-service-grid { display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid var(--colour-stone); }
.area-service { display: grid; min-height: 215px; grid-template-columns: auto 1fr auto; align-items: start; gap: clamp(1rem,2.5vw,2.25rem); padding: 2.25rem clamp(1rem,2.5vw,2.5rem); border-right: 1px solid var(--colour-stone); border-bottom: 1px solid var(--colour-stone); text-decoration: none; transition: background var(--ease); }
.area-service:nth-child(even) { border-right: 0; }
.area-service:nth-last-child(-n+2) { border-bottom: 0; }
.area-service:hover { background: var(--colour-warm-white); }
.area-service > span { color: var(--colour-grey); font-size: .68rem; }
.area-service h3 { margin-bottom: .55rem; font-size: clamp(1.45rem,2.2vw,2.2rem); }
.area-service p { max-width: 420px; margin: 0; color: var(--colour-grey); font-size: .9rem; }
.area-service > b { font-size: 1.25rem; transition: transform var(--ease); }
.area-service:hover > b { transform: translate(3px,-3px); }

/* Projects */
.projects-hero { overflow: hidden; padding: clamp(2.5rem,5vw,5rem) 0 clamp(4rem,8vw,7rem); }
.projects-hero__grid { display: grid; min-height: clamp(620px,70vh,800px); grid-template-columns: minmax(0,.82fr) minmax(470px,1fr); align-items: center; gap: clamp(3rem,7vw,8rem); }
.projects-hero__content { position: relative; z-index: 2; }
.projects-hero__content h1 { max-width: 880px; }
.projects-hero__content > p:not(.eyebrow) { max-width: 650px; margin-bottom: 2.2rem; color: var(--colour-grey); font-size: clamp(1.08rem,1.55vw,1.3rem); line-height: 1.65; }
.projects-mosaic { display: grid; min-height: clamp(520px,55vw,720px); grid-template-columns: 1.3fr .8fr; grid-template-rows: 1fr 1fr; gap: .8rem; }
.projects-mosaic figure { position: relative; min-height: 0; margin: 0; overflow: hidden; border-radius: var(--radius-small); background: #d6d6cf; }
.projects-mosaic__main { grid-row: 1 / 3; }
.projects-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.projects-mosaic__main img { object-position: center; }
.projects-mosaic figure:nth-child(2) img { object-position: center; }
.projects-mosaic figure:nth-child(3) img { object-position: center; }
.portfolio-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(1.25rem,3vw,2.5rem); }
.portfolio-card { overflow: hidden; border: 1px solid var(--colour-stone); border-radius: var(--radius-card); background: var(--colour-white); transition: transform var(--ease),box-shadow var(--ease); }
.portfolio-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.portfolio-card > a { display: block; text-decoration: none; }
.portfolio-card__media { position: relative; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; background: #d6d6cf; }
.portfolio-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ease); }
.portfolio-card:hover .portfolio-card__media img { transform: scale(1.018); }
.portfolio-card__media--portrait img { object-position: center 48%; }
.portfolio-card__media--square img { object-position: center; }
.portfolio-card__body { display: grid; min-height: 235px; grid-template-columns: 1fr auto; align-items: start; gap: 2rem; padding: clamp(1.5rem,3vw,2.5rem); }
.portfolio-card__body h3 { font-size: clamp(1.7rem,3vw,2.8rem); }
.portfolio-card__body p:last-child { max-width: 620px; margin: 0; color: var(--colour-grey); }
.portfolio-card__body > span { font-size: 1.35rem; transition: transform var(--ease); }
.portfolio-card:hover .portfolio-card__body > span { transform: translate(3px,-3px); }
.project-journey { background: var(--colour-warm-white); }
.project-journey__grid { display: grid; grid-template-columns: minmax(340px,.75fr) 1fr; align-items: center; gap: clamp(4rem,9vw,10rem); }
.project-journey__media { position: relative; min-height: clamp(580px,65vw,800px); margin: 0; overflow: hidden; border-radius: var(--radius-media); background: #d6d6cf; }
.project-journey__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.project-journey__media::after { position: absolute; inset: 60% 0 0; background: linear-gradient(180deg,transparent,rgba(20,20,18,.76)); content: ""; }
.project-journey__media figcaption { position: absolute; z-index: 2; right: 2rem; bottom: 2rem; left: 2rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.45); color: var(--colour-white); font-size: .8rem; }
.project-journey__content .section-index { margin-bottom: clamp(3rem,7vw,6rem); }
.project-journey__content > p:not(.eyebrow) { color: var(--colour-grey); }

/* About */
.about-hero { overflow: hidden; padding: clamp(2.5rem,5vw,5rem) 0 clamp(4rem,8vw,7rem); }
.about-hero__grid { display: grid; min-height: clamp(620px,70vh,800px); grid-template-columns: minmax(0,.82fr) minmax(470px,1fr); align-items: center; gap: clamp(3rem,7vw,8rem); }
.about-hero__content > p:not(.eyebrow) { max-width: 660px; margin-bottom: 2.2rem; color: var(--colour-grey); font-size: clamp(1.08rem,1.55vw,1.3rem); line-height: 1.65; }
.about-collage { display: grid; min-height: clamp(520px,55vw,720px); grid-template-columns: 1.25fr .8fr; grid-template-rows: 1fr 1fr; gap: .8rem; }
.about-collage figure { margin: 0; overflow: hidden; border-radius: var(--radius-small); background: #d6d6cf; }
.about-collage__main { grid-row: 1 / 3; }
.about-collage img { width: 100%; height: 100%; object-fit: cover; }
.about-collage figure:last-child img { object-position: center 47%; }
.about-service-list { display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid var(--colour-stone); }
.about-service-list .area-service:nth-last-child(-n+2) { border-bottom: 1px solid var(--colour-stone); }
.about-service-list .area-service:last-child { border-bottom: 0; }

/* Privacy and utility pages */
.legal-hero { padding: clamp(3rem,7vw,6rem) 0 clamp(4rem,8vw,7rem); background: var(--colour-warm-white); }
.legal-hero h1 { max-width: 950px; }
.legal-hero > .container > p:not(.eyebrow) { max-width: 720px; color: var(--colour-grey); font-size: clamp(1.05rem,1.6vw,1.3rem); }
.legal-hero small { color: var(--colour-grey); font-size: .75rem; }
.legal-layout { display: grid; grid-template-columns: minmax(190px,.32fr) minmax(0,1fr); align-items: start; gap: clamp(3rem,8vw,9rem); }
.legal-nav { position: sticky; top: 120px; display: grid; gap: .1rem; }
.legal-nav .eyebrow { margin-bottom: 1rem; }
.legal-nav a { padding: .6rem 0; border-bottom: 1px solid var(--colour-stone); color: var(--colour-grey); font-size: .78rem; text-decoration: none; }
.legal-nav a:hover { color: var(--colour-charcoal); }
.legal-content { max-width: 850px; }
.legal-content > section { padding: 0 0 clamp(3rem,6vw,5rem); margin-bottom: clamp(3rem,6vw,5rem); border-bottom: 1px solid var(--colour-stone); scroll-margin-top: 120px; }
.legal-content > section:last-child { margin-bottom: 0; }
.legal-content > section > span { display: block; margin-bottom: 2rem; color: var(--colour-grey); font-size: .68rem; }
.legal-content h2 { font-size: clamp(2rem,4vw,3.5rem); }
.legal-content p,.legal-content li,.legal-content dd { color: var(--colour-grey); }
.legal-content li + li { margin-top: .65rem; }
.legal-content dl { display: grid; gap: 1rem; }
.legal-content dl > div { padding: 1.25rem; border: 1px solid var(--colour-stone); border-radius: var(--radius-small); }
.legal-content dt { margin-bottom: .35rem; font-weight: 750; }
.legal-content dd { margin: 0; }
.legal-notice,.legal-callout { margin-bottom: clamp(3rem,6vw,5rem); padding: 1.5rem; border-left: 4px solid var(--colour-yellow); background: var(--colour-warm-white); }
.legal-notice p,.legal-callout p { margin: .5rem 0 0; }
.utility-page { min-height: calc(100vh - 82px); padding: clamp(4rem,10vw,9rem) 0; background: var(--colour-black); color: rgba(255,255,255,.68); }
.utility-page__grid { display: grid; grid-template-columns: 1fr .55fr; align-items: center; gap: clamp(4rem,9vw,10rem); }
.utility-page h1 { color: var(--colour-white); }
.utility-page h1 em { color: rgba(255,255,255,.38); }
.utility-page__grid > div > p:not(.eyebrow,.utility-page__code) { max-width: 650px; }
.utility-page__code { margin: 0 0 2rem; color: var(--colour-yellow); font-size: .72rem; font-weight: 750; letter-spacing: .18em; }
.utility-page__links { display: grid; border-top: 1px solid rgba(255,255,255,.18); }
.utility-page__links .eyebrow { padding-top: 1.5rem; }
.utility-page__links a { display: flex; justify-content: space-between; gap: 2rem; padding: 1.1rem 0; border-bottom: 1px solid rgba(255,255,255,.18); color: var(--colour-white); text-decoration: none; }
.confirmation-page { min-height: calc(100vh - 82px); padding: clamp(4rem,10vw,9rem) 0; background: var(--colour-warm-white); }
.confirmation-page__inner { max-width: 1120px; }
.confirmation-mark { display: grid; width: 58px; height: 58px; margin-bottom: 3rem; place-items: center; border-radius: 50%; background: var(--colour-yellow); font-size: 1.4rem; font-weight: 800; }
.confirmation-page__inner > p:not(.eyebrow) { max-width: 700px; color: var(--colour-grey); font-size: clamp(1.05rem,1.6vw,1.3rem); }
.confirmation-next { display: grid; grid-template-columns: repeat(3,1fr); margin: clamp(3rem,6vw,5rem) 0; border-block: 1px solid var(--colour-stone); }
.confirmation-next > div { min-height: 220px; padding: 2rem; border-right: 1px solid var(--colour-stone); }
.confirmation-next > div:first-child { padding-left: 0; }
.confirmation-next > div:last-child { border-right: 0; }
.confirmation-next span { display: block; margin-bottom: 3rem; color: var(--colour-grey); font-size: .68rem; }
.confirmation-next strong { display: block; margin-bottom: .5rem; }
.confirmation-next p { margin: 0; color: var(--colour-grey); font-size: .85rem; }
.confirmation-page small { display: block; margin-top: 2rem; color: var(--colour-grey); }

/* Manufacturer brochures */
.brochure-section { background: var(--colour-warm-white); }
.brochure-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(1rem,2.5vw,2rem); }
.brochure-grid--single { grid-template-columns: minmax(0,850px); }
.brochure-card { display: grid; min-height: 330px; grid-template-columns: auto 1fr auto; align-items: start; gap: clamp(1rem,2.5vw,2rem); padding: clamp(1.5rem,3vw,2.5rem); border: 1px solid var(--colour-stone); border-radius: var(--radius-card); background: var(--colour-white); text-decoration: none; transition: transform var(--ease),box-shadow var(--ease); }
.brochure-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.brochure-card > span { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--colour-stone); border-radius: 50%; color: var(--colour-grey); font-size: .62rem; font-weight: 750; }
.brochure-card > div { align-self: end; }
.brochure-card h3 { font-size: clamp(1.65rem,3vw,2.7rem); }
.brochure-card p:not(.eyebrow) { max-width: 570px; color: var(--colour-grey); }
.brochure-card small { color: var(--colour-grey); font-size: .72rem; font-weight: 650; }
.brochure-card > b { font-size: 1.35rem; transition: transform var(--ease); }
.brochure-card:hover > b { transform: translate(3px,-3px); }
.brochure-note { max-width: 850px; margin: 1.5rem 0 0; color: var(--colour-grey); font-size: .75rem; }

@media (max-width:1180px) {
  .home-process__steps { grid-template-columns: repeat(2,1fr); }
  .home-process__steps li:nth-child(2) { border-right: 0; }
  .home-process__steps li:nth-child(-n+2) { border-bottom: 1px solid var(--colour-stone); }
}

@media (max-width:1023px) {
  .home-hero__grid { grid-template-columns: 1fr; }
  .home-hero__media { min-height: 72vw; }
  .home-proof__grid { grid-template-columns: repeat(2,1fr); }
  .home-proof__grid > div:nth-child(2) { border-right: 0; }
  .home-proof__grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--colour-stone); }
  .home-intro__grid { grid-template-columns: .3fr 1fr; gap: 2rem; }
  .home-difference__grid { grid-template-columns: 1fr; }
  .home-difference__media { min-height: 70vw; }
  .home-reviews__grid { grid-template-columns: 1fr; }
}

@media (max-width:767px) {
  .home-hero { padding-top: 3rem; }
  .home-hero__grid { min-height: auto; gap: 3rem; }
  .home-hero__content h1 { font-size: clamp(4rem,19vw,6.5rem); }
  .home-hero__media { min-height: 105vw; border-radius: var(--radius-card); }
  .home-hero__footer p { display: none; }
  .home-proof__grid { grid-template-columns: 1fr; }
  .home-proof__grid > div { min-height: 0; padding: 1.5rem 0; border-right: 0; border-bottom: 1px solid var(--colour-stone) !important; }
  .home-proof__grid > div:last-child { border-bottom: 0 !important; }
  .home-intro__grid,.home-areas__grid { grid-template-columns: 1fr; }
  .home-intro__grid > .section-index { margin-bottom: 2.5rem; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card--wide { grid-column: auto; }
  .service-card__media,.service-card--wide .service-card__media { aspect-ratio: 4/3; }
  .service-card__content { grid-template-columns: auto 1fr; }
  .service-card__content > b { display: none; }
  .home-difference__media { min-height: 110vw; border-radius: var(--radius-card); }
  .home-difference__content .section-index,.home-process__heading .section-index,.home-areas__grid .section-index { margin-bottom: 3rem; }
  .home-process__steps { grid-template-columns: 1fr; }
  .home-process__steps li { min-height: 0; padding: 2rem 0; border-right: 0; border-bottom: 1px solid var(--colour-stone) !important; }
  .home-process__steps li:last-child { border-bottom: 0 !important; }
  .home-process__steps span { margin-bottom: 2.5rem; }
  .home-projects__grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .project-tile,.project-tile--large { min-height: 105vw; grid-row: auto; }
  .home-reviews__card { min-height: 520px; padding: 1.75rem; }
}

/* Composite door choices */
.composite-product-hero .product-hero__visual img { object-position: 50% 48%; }
.composite-choices .section-heading { margin-bottom: clamp(3rem,6vw,6rem); }
.composite-sheet-grid { display: grid; gap: clamp(2rem,5vw,5rem); }
.composite-sheet { display: grid; grid-template-columns: minmax(250px,.34fr) minmax(0,1fr); gap: clamp(2rem,5vw,5rem); padding-top: clamp(2.5rem,5vw,5rem); border-top: 1px solid var(--colour-stone); }
.composite-sheet__heading > span { display: inline-block; margin-bottom: clamp(2rem,4vw,4rem); color: var(--colour-grey); font-size: .68rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.composite-sheet__heading p { max-width: 430px; color: var(--colour-grey); }
.composite-sheet__image { display: block; min-width: 0; color: var(--colour-charcoal); text-decoration: none; }
.composite-sheet__scroll { display: block; overflow: hidden; border: 1px solid var(--colour-stone); border-radius: var(--radius-card); background: var(--colour-white); }
.composite-sheet__image img { width: 100%; height: auto; transition: transform var(--ease); }
.composite-sheet__image:hover img { transform: scale(1.012); }
.composite-sheet__image small { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .8rem; color: var(--colour-grey); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.composite-finish-section { overflow: hidden; background: var(--colour-black); color: rgba(255,255,255,.65); }
.composite-finish-grid { display: grid; grid-template-columns: minmax(280px,.46fr) minmax(0,1fr); gap: clamp(3rem,7vw,8rem); align-items: center; }
.composite-finish-copy h2 { color: var(--colour-white); }
.composite-finish-copy .section-index { margin-bottom: clamp(3rem,6vw,5rem); }
.composite-finish-copy > p:not(.eyebrow) { max-width: 620px; }
.composite-small-note { margin-top: 2rem; padding-left: 1rem; border-left: 3px solid var(--colour-yellow); font-size: .75rem; }
.composite-sheet__image--dark { color: var(--colour-white); }
.composite-sheet__image--dark .composite-sheet__scroll { border-color: rgba(255,255,255,.15); }
.composite-sheet__image--dark small { color: rgba(255,255,255,.65); }
.composite-glass-section .section-heading { margin-bottom: clamp(3rem,6vw,6rem); }
.composite-sheet__image--glass .composite-sheet__scroll { padding: clamp(.5rem,1vw,1rem); }
.composite-security { padding-block: var(--section-space); }
.pvcu-product-hero .product-hero__visual img { object-position: 50% 58%; }
.pvcu-glass-grid { display: grid; grid-template-columns: minmax(250px,.52fr) minmax(0,1fr); gap: clamp(3rem,8vw,9rem); }
.pvcu-glass-grid .section-index { margin-bottom: clamp(3rem,6vw,5rem); }
.pvcu-glass-copy { max-width: 800px; }
.pvcu-glass-copy > p:not(.large-copy) { color: var(--colour-grey); }
.pvcu-glass-callout { display: grid; gap: .75rem; margin-top: clamp(2.5rem,5vw,4rem); padding: clamp(1.5rem,3vw,2.5rem); border-radius: var(--radius-card); background: var(--colour-white); box-shadow: var(--shadow); }
.pvcu-glass-callout > span { color: var(--colour-grey); font-size: .68rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.pvcu-glass-callout > strong { max-width: 520px; font-size: clamp(1.25rem,2.3vw,2rem); line-height: 1.25; }
.pvcu-glass-callout .text-link { justify-self: start; margin-top: .5rem; }
.pvcu-security { padding-block: var(--section-space); }
.stable-product-hero .product-hero__visual img { object-position: 50% 48%; }
.stable-security { padding-block: var(--section-space); }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 650ms ease, transform 650ms cubic-bezier(.22,1,.36,1); }
.reveal.is-visible, .no-js .reveal { opacity: 1; transform: none; }

@media (max-width: 1180px) {
  .site-header__inner { gap: 1rem; }
  .primary-nav { gap: 1rem; }
  .primary-nav > a:not(.button), .nav-dropdown > summary { font-size: .72rem; }
  .primary-nav .button--compact { gap: .6rem; padding-left: .85rem; font-size: .76rem; }
  .primary-nav .button--compact > span { width: 28px; height: 28px; }
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(350px, .7fr); gap: 3rem; }
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .capability:nth-child(2) { border-right: 0; }
  .capability:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.16); }
  .capability-grid--six .capability { border-right: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }
  .capability-grid--six .capability:nth-child(even) { border-right: 0; }
  .capability-grid--six .capability:nth-child(n+5) { border-bottom: 0; }
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .benefit-cards { grid-template-columns: repeat(2, 1fr); }
  .benefit-card:nth-child(2) { border-right: 0; }
  .benefit-card:nth-child(-n+2) { border-bottom: 1px solid var(--colour-stone); }
  .area-hero__grid { grid-template-columns: minmax(0,1fr) minmax(330px,.68fr); gap: 3rem; }
  .area-card-grid { grid-template-columns: 1fr; }
  .area-card { min-height: 0; }
  .area-card > span { margin-bottom: 3rem; }
  .area-card > p:not(.eyebrow) { min-height: 0; }
  .projects-hero__grid { grid-template-columns: minmax(0,.8fr) minmax(380px,1fr); gap: 3rem; }
  .about-hero__grid { grid-template-columns: minmax(0,.8fr) minmax(380px,1fr); gap: 3rem; }
}

@media (max-width: 1023px) {
  .utility-bar { display: none; }
  .site-header__inner { min-height: 74px; }
  .hero { min-height: auto; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__content { padding-top: 1rem; }
  .hero__media { min-height: 62vw; }
  .renovation-grid { grid-template-columns: 1fr; }
  .renovation-visual { min-height: 70vw; }
  .hero__foot { margin-top: 2rem; }
  .proof-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .proof-strip__grid > div { border-bottom: 1px solid var(--colour-stone); }
  .proof-strip__grid > div:nth-child(2) { border-right: 0; }
  .proof-strip__grid > div:nth-child(n+3) { border-bottom: 0; }
  .proof-strip__grid > div:nth-child(3) { padding-left: 0; }
  .intro-grid, .areas-grid { grid-template-columns: .3fr 1fr; gap: 2rem; }
  .process-layout, .faq-layout { grid-template-columns: 1fr; }
  .process-copy { position: static; }
  .process-copy .section-index { margin-bottom: 3rem; }
  .featured-project { grid-template-columns: 1fr; }
  .featured-project__media { min-height: 65vw; }
  .product-hero__grid { grid-template-columns: 1fr; }
  .product-hero__visual { min-height: 70vw; }
  .product-proof__grid { grid-template-columns: repeat(2,1fr); }
  .product-proof__grid > div:nth-child(2) { border-right: 0; }
  .product-proof__grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--colour-stone); }
  .product-overview__grid { grid-template-columns: .3fr 1fr; gap: 2rem; }
  .door-style__visual { min-height: 44vw; }
  .colour-studio__grid, .hardware-grid { grid-template-columns: 1fr; }
  .door-scene, .hardware-visual { min-height: 72vw; }
  .security-panel { min-height: 570px; }
  .why-product__grid { grid-template-columns: 1fr; }
  .why-product__copy { padding-top: 0; }
  .case-study-card { grid-template-columns: 1fr; }
  .case-study-card__media { min-height: 65vw; }
  .case-study-card__media--before-after { min-height: 92vw; }
  .door-case-study-gallery { grid-template-columns: repeat(2, 1fr); }
  .project-story__intro { grid-template-columns: 1fr; }
  .project-story__cards { grid-template-columns: 1fr; }
  .project-story__cards article { min-height: 0; padding: 2.5rem 0; border-right: 0; border-bottom: 1px solid var(--colour-stone); }
  .project-story__cards article:last-child { border-bottom: 0; }
  .project-story__trades { grid-template-columns: 1fr; }
  .area-hero__grid, .area-radius__grid { grid-template-columns: 1fr; }
  .area-hero__media { min-height: 72vw; }
  .area-radius__grid { gap: 2.5rem; }
  .area-radius__grid .section-index { margin-bottom: 3rem; }
  .projects-hero__grid, .project-journey__grid { grid-template-columns: 1fr; }
  .projects-mosaic { min-height: 78vw; }
  .project-journey__media { min-height: 80vw; }
  .about-hero__grid { grid-template-columns: 1fr; }
  .about-collage { min-height: 78vw; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-nav { position: static; grid-template-columns: repeat(2,1fr); column-gap: 1.5rem; }
  .utility-page__grid { grid-template-columns: 1fr; }
}

@media (min-width: 768px) and (max-width: 900px) {
  .menu-toggle { display: inline-flex; align-items: center; gap: .8rem; padding: .75rem 0; }
  .menu-toggle__label { font-size: .75rem; font-weight: 700; }
  .menu-toggle__icon { position: relative; display: block; width: 24px; height: 18px; }
  .menu-toggle__icon i { position: absolute; right: 0; width: 24px; height: 2px; background: currentColor; transition: top var(--ease), transform var(--ease); }
  .menu-toggle__icon i:first-child { top: 4px; }
  .menu-toggle__icon i:last-child { top: 12px; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon i:first-child { top: 8px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon i:last-child { top: 8px; transform: rotate(-45deg); }
  .primary-nav { position: fixed; top: 90px; right: 0; bottom: auto; left: 0; display: flex; visibility: hidden; height: calc(100vh - 90px); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 0; padding: 1rem var(--gutter) 3rem; transform: translateY(-10px); opacity: 0; background: var(--colour-white); transition: opacity var(--ease), transform var(--ease), visibility var(--ease); }
  .primary-nav.is-open { visibility: visible; transform: none; opacity: 1; }
  .primary-nav > a:not(.button), .nav-dropdown > summary { padding: 1rem 0; border-bottom: 1px solid var(--colour-stone); font-size: 1.3rem; }
  .primary-nav > a:not(.button)::after, .nav-dropdown > summary::after { display: none; }
  .nav-dropdown > summary { justify-content: space-between; }
  .nav-dropdown__panel { position: static; width: auto; padding: .35rem 0 .8rem 1rem; border: 0; border-bottom: 1px solid var(--colour-stone); border-radius: 0; transform: none; box-shadow: none; }
  .nav-dropdown__panel::before { display: none; }
  .nav-dropdown__panel a { padding: .7rem 0; color: var(--colour-grey); font-size: 1rem; }
  .nav-dropdown__panel a:hover, .nav-dropdown__panel a:focus-visible, .nav-dropdown__panel a[aria-current="page"] { color: var(--colour-charcoal); background: transparent; }
  .primary-nav .button { align-self: flex-start; margin-top: 1.5rem; }
}

@media (max-width: 767px) {
  :root { --section-space: 5rem; }
  h1 { font-size: clamp(3.1rem, 14vw, 5.2rem); }
  .menu-toggle { display: inline-flex; align-items: center; gap: .8rem; padding: .75rem 0; }
  .menu-toggle__label { font-size: .75rem; font-weight: 700; }
  .menu-toggle__icon { position: relative; display: block; width: 24px; height: 18px; }
  .menu-toggle__icon i { position: absolute; right: 0; width: 24px; height: 2px; background: currentColor; transition: top var(--ease), transform var(--ease); }
  .menu-toggle__icon i:first-child { top: 4px; }
  .menu-toggle__icon i:last-child { top: 12px; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon i:first-child { top: 8px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon i:last-child { top: 8px; transform: rotate(-45deg); }
  .primary-nav { position: fixed; top: 74px; right: 0; bottom: auto; left: 0; display: flex; visibility: hidden; height: calc(100vh - 74px); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 0; padding: 1rem var(--gutter) 3rem; transform: translateY(-10px); opacity: 0; background: var(--colour-white); transition: opacity var(--ease), transform var(--ease), visibility var(--ease); }
  .primary-nav.is-open { visibility: visible; transform: none; opacity: 1; }
  .primary-nav > a:not(.button), .nav-dropdown > summary { padding: 1rem 0; border-bottom: 1px solid var(--colour-stone); font-size: clamp(1.2rem, 4vw, 1.8rem); }
  .primary-nav > a:not(.button)::after, .nav-dropdown > summary::after { display: none; }
  .nav-dropdown > summary { justify-content: space-between; }
  .nav-dropdown__panel { position: static; width: auto; padding: .35rem 0 .8rem 1rem; border: 0; border-bottom: 1px solid var(--colour-stone); border-radius: 0; transform: none; box-shadow: none; }
  .nav-dropdown__panel::before { display: none; }
  .nav-dropdown__panel a { padding: .7rem 0; color: var(--colour-grey); font-size: 1rem; }
  .nav-dropdown__panel a:hover, .nav-dropdown__panel a:focus-visible, .nav-dropdown__panel a[aria-current="page"] { color: var(--colour-charcoal); background: transparent; }
  .primary-nav .button { align-self: flex-start; margin-top: 1.5rem; }
  .brand span { display: none; }
  .brand img { width: 34px; height: 41px; }
  .breadcrumbs ol { margin-bottom: 1.5rem; }
  .hero { padding-top: 2.5rem; }
  .hero__inner { min-height: auto; gap: 2.5rem; }
  .hero__content::before { top: 7rem; left: -2rem; width: 10rem; height: .65rem; }
  .hero__media { min-height: 86vw; border-radius: var(--radius-card); }
  .button-row { align-items: stretch; flex-direction: column; }
  .button-row .button { width: 100%; }
  .proof-strip__grid { grid-template-columns: 1fr; }
  .proof-strip__grid > div { min-height: 0; padding: 1.35rem 0; border-right: 0; border-bottom: 1px solid var(--colour-stone) !important; }
  .proof-strip__grid > div:last-child { border-bottom: 0 !important; }
  .intro-grid, .areas-grid { grid-template-columns: 1fr; }
  .intro-grid .section-index { margin-bottom: 2.5rem; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 1.25rem; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card__media { aspect-ratio: 4 / 3; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability { min-height: 0; padding: 2rem 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .capability:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.16); }
  .capability:last-child { border-bottom: 0; }
  .capability-grid--six .capability { padding-inline: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .capability-grid--six .capability:nth-child(n+5) { border-bottom: 1px solid rgba(255,255,255,.16); }
  .capability-grid--six .capability:last-child { border-bottom: 0; }
  .capability > span { margin-bottom: 2.5rem; }
  .process-list li { min-height: 0; grid-template-columns: 44px 1fr; }
  .featured-project { border-radius: var(--radius-card); }
  .featured-project__media { min-height: 90vw; }
  .areas-grid .section-index { margin-bottom: 2.5rem; }
  .site-footer__top { align-items: flex-start; flex-direction: column; }
  .site-footer__top > p { text-align: left; }
  .brand--footer span { display: block; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__legal { grid-template-columns: 1fr; gap: .5rem; }
  .site-footer__bottom { flex-direction: column; gap: .35rem; }
  .product-hero__grid { min-height: auto; gap: 2.5rem; }
  .product-hero__visual { min-height: 110vw; border-radius: var(--radius-card); }
  .door-study { right: 20%; left: 20%; }
  .product-proof__grid { grid-template-columns: 1fr; }
  .product-proof__grid > div { min-height: 0; padding: 1.5rem 0; border-right: 0; border-bottom: 1px solid var(--colour-stone) !important; }
  .product-proof__grid > div:last-child { border-bottom: 0 !important; }
  .product-overview__grid, .two-copy-columns { grid-template-columns: 1fr; }
  .benefit-cards { grid-template-columns: 1fr; }
  .benefit-card { min-height: 0; padding: 2rem 0; border-right: 0; border-bottom: 1px solid var(--colour-stone) !important; }
  .benefit-card:last-child { border-bottom: 0 !important; }
  .benefit-card > span { margin-bottom: 2.5rem; }
  .style-gallery__intro .section-index, .options-intro .section-index, .hardware-copy .section-index, .why-product__heading .section-index { margin-bottom: 3rem; }
  .door-style-grid, .door-style-grid--two, .option-grid--three, .related-grid { grid-template-columns: 1fr; }
  .door-style__visual { min-height: 115vw; }
  .door-style-grid--two .door-style__visual--photo { min-height: 0; }
  .inward-opening-option { grid-template-columns: 1fr; }
  .inward-opening-option > strong { justify-self: start; }
  .conservatory-study { right: 4%; left: 4%; }
  .renovation-visual { min-height: 115vw; }
  .door-scene, .hardware-visual { min-height: 115vw; border-radius: var(--radius-card); }
  .door-scene .door-study { right: 20%; left: 20%; }
  .security-energy__grid { grid-template-columns: 1fr; }
  .security-panel { min-height: 0; }
  .case-study-card { border-radius: var(--radius-card); }
  .case-study-card__media { min-height: 95vw; }
  .case-study-card__media--before-after { min-height: 125vw; }
  .door-case-study-gallery { grid-template-columns: 1fr; }
  .project-story__cards article > span { margin-bottom: 2.5rem; }
  .project-story__trades { padding: 1.75rem; }
  .project-story__gallery { grid-template-columns: 1fr; grid-template-rows: auto; }
  .project-story__gallery figure,.project-story__gallery figure:nth-child(-n+3),.project-story__gallery-interior { min-height: 72vw; grid-column: auto; grid-row: auto; }
  .project-story__gallery-interior { min-height: 110vw; }
  .related-products .section-heading { align-items: flex-start; }
  .area-hero { padding-top: 2rem; }
  .area-hero__grid { min-height: 0; gap: 2.5rem; }
  .area-hero__media { min-height: 104vw; border-radius: var(--radius-card); }
  .area-card { padding: 1.5rem; }
  .area-service-grid { grid-template-columns: 1fr; }
  .area-service { min-height: 0; padding: 1.75rem 0; border-right: 0; }
  .area-service:nth-last-child(-n+2) { border-bottom: 1px solid var(--colour-stone); }
  .area-service:last-child { border-bottom: 0; }
  .projects-hero { padding-top: 2rem; }
  .projects-hero__grid { min-height: 0; gap: 2.5rem; }
  .projects-mosaic { min-height: 135vw; grid-template-columns: 1fr 1fr; grid-template-rows: 1.45fr .7fr; gap: .55rem; }
  .projects-mosaic__main { grid-row: auto; grid-column: 1 / 3; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-card__body { min-height: 0; }
  .project-journey__media { min-height: 120vw; border-radius: var(--radius-card); }
  .about-hero { padding-top: 2rem; }
  .about-hero__grid { min-height: 0; gap: 2.5rem; }
  .about-collage { min-height: 135vw; grid-template-columns: 1fr 1fr; grid-template-rows: 1.45fr .7fr; gap: .55rem; }
  .about-collage__main { grid-row: auto; grid-column: 1 / 3; }
  .about-service-list { grid-template-columns: 1fr; }
  .about-service-list .area-service { border-right: 0; }
  .legal-nav { grid-template-columns: 1fr; }
  .legal-content ul { padding-left: 1.2rem; }
  .confirmation-next { grid-template-columns: 1fr; }
  .confirmation-next > div { min-height: 0; padding: 1.5rem 0; border-right: 0; border-bottom: 1px solid var(--colour-stone); }
  .confirmation-next > div:last-child { border-bottom: 0; }
  .confirmation-next span { margin-bottom: 1.5rem; }
  .brochure-grid { grid-template-columns: 1fr; }
  .brochure-card { min-height: 0; }
}

@media (max-width: 1023px) {
  .composite-sheet { grid-template-columns: 1fr; }
  .composite-sheet__heading { max-width: 680px; }
  .composite-sheet__heading > span { margin-bottom: 2rem; }
  .composite-finish-grid { grid-template-columns: 1fr; }
  .pvcu-glass-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .composite-sheet { gap: 1.5rem; }
  .composite-sheet__scroll { overflow-x: auto; border-radius: var(--radius-small); overscroll-behavior-inline: contain; }
  .composite-sheet__image img { min-width: 760px; }
  .composite-sheet__image--dark img { min-width: 940px; }
  .composite-sheet__image--glass img { min-width: 820px; }
  .composite-sheet__image small { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; }
}