@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Libre+Caslon+Display&display=swap");

:root {
  --ink: #121311;
  --ink-soft: #22231f;
  --ivory: #f2efe7;
  --paper: #f8f6f0;
  --brass: #c66a50;
  --line: rgba(18, 19, 17, .18);
  --serif: "Libre Caslon Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; }
a { color: inherit; }
button, input, textarea { font: inherit; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .8rem 1rem; background: var(--ivory); color: var(--ink); }
.skip-link:focus { top: 1rem; }

.site-header { position: absolute; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; justify-content: space-between; min-height: 112px; padding: 0 clamp(1.4rem, 4vw, 4.5rem); color: #fff; border-bottom: 1px solid rgba(255,255,255,.22); }
.brand { display: inline-flex; align-items: center; gap: .8rem; color: inherit; text-decoration: none; }
.brand-mark { display: block; width: 4.1rem; height: 4.1rem; flex: 0 0 auto; overflow: hidden; font-size: 0; background: currentColor; -webkit-mask: url("assets/sunset-logo-emblem.png") center/contain no-repeat; mask: url("assets/sunset-logo-emblem.png") center/contain no-repeat; transition: transform .35s ease; }
.brand:hover .brand-mark { transform: scale(1.06) rotate(2deg); }
.brand-name { font-family: var(--serif); font-size: 1.42rem; letter-spacing: .01em; }
.site-nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.3vw, 2.6rem); }
.site-nav a { color: inherit; text-decoration: none; }
.nav-single, .nav-parent { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.nav-single { position: relative; }
.nav-single::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.5rem; height: 1px; background: currentColor; transition: right .25s ease; }
.nav-single:hover::after, .nav-single:focus-visible::after { right: 0; }
.nav-group { position: static; }
.nav-parent { display: flex; align-items: center; gap: .45rem; padding: 2.45rem 0; border: 0; background: none; color: inherit; cursor: pointer; }
.nav-parent span { font-size: .9rem; transition: transform .25s ease; }
.nav-group:hover .nav-parent span, .nav-group:focus-within .nav-parent span { transform: rotate(180deg); }
.nav-cta { padding: .8rem 1.25rem; border: 1px solid rgba(255,255,255,.7); transition: .25s ease; }
.nav-cta:hover { background: var(--ivory); color: var(--ink); }
.mega-menu { position: absolute; top: 112px; left: 0; right: 0; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 4rem; padding: 2.8rem clamp(1.4rem, 7vw, 8rem) 3.2rem; background: var(--paper); color: var(--ink); box-shadow: 0 18px 40px rgba(0,0,0,.16); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .22s ease; }
.nav-group:hover .mega-menu, .nav-group:focus-within .mega-menu, .nav-group.is-open .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-intro > span, .mega-label { display: block; margin-bottom: 1rem; color: var(--brass); font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.mega-intro p { max-width: 350px; margin: 0; font-family: var(--serif); font-size: 1.55rem; line-height: 1.25; }
.mega-all { display: inline-block; margin-top: 1.3rem; padding-bottom: .25rem; border-bottom: 1px solid var(--ink); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.mega-column { display: flex; flex-direction: column; align-items: flex-start; }
.mega-column a { width: 100%; padding: .5rem 0 1rem; border-bottom: 1px solid var(--line); text-transform: none; letter-spacing: 0; }
.mega-column a + a { margin-top: .6rem; }
.mega-column b { display: block; font-family: var(--serif); font-size: 1.2rem; font-weight: 400; }
.mega-column small { display: block; margin-top: .2rem; color: #77776f; font-size: .73rem; }
.site-header--internal { position: relative; background: var(--paper); color: var(--ink); border-color: var(--line); }
.site-header--internal .nav-cta { border-color: var(--ink); }
.site-header--internal .nav-cta:hover { background: var(--ink); color: #fff; }
.site-header--internal .mega-menu { top: 112px; }
.menu-toggle { display: none; }

.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; background: #101512; }
.hero-image, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-image { object-fit: cover; object-position: 52% center; animation: hero-in 1.8s ease-out both; }
.hero-shade { background: linear-gradient(90deg, rgba(8,10,10,.8) 0%, rgba(8,10,10,.48) 40%, rgba(8,10,10,.12) 75%), linear-gradient(0deg, rgba(8,10,10,.5), transparent 48%); }
.hero-content { position: relative; z-index: 1; width: min(870px, 78vw); padding: 12rem 4.5rem 6.5rem; }
.eyebrow, .feature-overline { margin: 0 0 1.5rem; font-size: .72rem; font-weight: 500; letter-spacing: .19em; text-transform: uppercase; }
.hero h1, h2, .lead, .statement p { font-family: var(--serif); font-weight: 400; letter-spacing: -.035em; line-height: .98; }
.hero h1 { max-width: 830px; margin: 0; font-size: clamp(3.6rem, 7vw, 7.3rem); }
.hero h1 em, h2 em, .statement em { color: #e6b5a6; font-weight: 400; }
.hero-copy { max-width: 530px; margin: 2rem 0; font-size: clamp(1rem, 1.4vw, 1.15rem); font-weight: 300; line-height: 1.7; color: rgba(255,255,255,.8); }
.text-link { display: inline-flex; align-items: center; gap: 1.2rem; padding-bottom: .4rem; border-bottom: 1px solid currentColor; color: inherit; text-decoration: none; font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.text-link span { transition: transform .25s ease; }
.text-link:hover span { transform: translate(.25rem,.25rem); }
.text-link--light { color: #fff; }
.hero-note { position: absolute; z-index: 1; right: 4.5rem; bottom: 7rem; margin: 0; padding-left: 1.2rem; border-left: 1px solid rgba(255,255,255,.55); font-family: var(--serif); font-size: 1.05rem; line-height: 1.4; color: rgba(255,255,255,.8); }
.scroll-cue { position: absolute; z-index: 2; right: 4.5rem; bottom: 2rem; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; }
.scroll-cue span::before { content: ""; position: absolute; width: 5px; height: 5px; left: 11px; top: 9px; border: solid #fff; border-width: 0 1px 1px 0; transform: rotate(45deg); }

.section { padding: clamp(5rem, 10vw, 9rem) clamp(1.4rem, 7vw, 8rem); }
.section-kicker { display: flex; align-items: center; gap: .8rem; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.section-kicker span { display: none; }
.section-kicker--light span { border-color: rgba(255,255,255,.35); }
.intro { display: grid; grid-template-columns: 1fr 2fr .6fr; gap: 4rem; align-items: start; background: var(--ivory); }
.intro-copy { max-width: 760px; }
.lead { margin: 0 0 2rem; font-size: clamp(2.2rem, 4vw, 4.6rem); }
.intro-copy > p:last-child { max-width: 590px; margin-left: auto; color: #62625b; }
.intro-seal { width: 175px; height: 215px; justify-self: end; background: var(--brass); -webkit-mask: url("assets/sunset-logo-full.png") center/contain no-repeat; mask: url("assets/sunset-logo-full.png") center/contain no-repeat; transform: rotate(3deg); }
.seal-small { font-size: .55rem; letter-spacing: .2em; text-transform: uppercase; }
.seal-amp { font-family: var(--serif); font-size: 2.3rem; line-height: 1; }

.services { display: grid; grid-template-columns: .95fr 1.35fr; gap: clamp(4rem, 9vw, 10rem); background: var(--ink); color: #fff; }
.services-head { position: sticky; top: 3rem; align-self: start; }
h2 { margin: 2rem 0; font-size: clamp(3rem, 5.3vw, 6rem); }
.services-head p { max-width: 450px; color: rgba(255,255,255,.62); }
.service-list { align-self: center; border-top: 1px solid rgba(255,255,255,.2); }
.service-item { border-bottom: 1px solid rgba(255,255,255,.2); }
.service-trigger { width: 100%; display: grid; grid-template-columns: 1fr 30px; gap: 1rem; align-items: center; padding: 2rem 0; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; }
.service-number { display: none; }
.service-title { font-family: var(--serif); font-size: clamp(1.55rem, 2.5vw, 2.8rem); }
.service-title small { margin-left: .7rem; color: var(--brass); font-family: var(--sans); font-size: .58rem; font-style: normal; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.service-icon { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; font-size: 1rem; }
.service-panel { display: grid; grid-template-columns: 1fr 30px; gap: 1rem; }
.service-panel p { grid-column: 1; max-width: 570px; margin: -1rem 0 2.2rem; color: rgba(255,255,255,.62); }

.feature { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 760px; padding: 0; background: var(--ivory); }
.feature-image { min-height: 630px; background-image: linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.22)), url("assets/sunset-marquee-hero.png"); background-size: cover; background-position: 77% center; }
.feature-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(4rem, 7vw, 8rem); }
.feature-copy h2 { margin-top: .8rem; }
.feature-overline { margin-top: 4rem; color: var(--brass); }
.feature-copy > p:not(.feature-overline) { max-width: 530px; color: #63645e; }
.feature-copy .text-link { align-self: flex-start; margin-top: 2rem; }

.hire-preview { background: var(--paper); }
.hire-preview-head { display: grid; grid-template-columns: .7fr 1.7fr 1fr; gap: 3rem; align-items: start; }
.hire-preview-head h2 { margin: 0; }
.hire-preview-head > p { max-width: 420px; margin-top: .5rem; color: #686962; }
.hire-preview-grid { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: repeat(2, minmax(260px, 34vh)); gap: 1rem; margin-top: 4rem; }
.hire-tile { position: relative; overflow: hidden; color: #fff; text-decoration: none; }
.hire-tile--large { grid-row: 1 / 3; }
.hire-tile::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(8,9,8,.82)); }
.hire-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.hire-tile:hover img { transform: scale(1.035); }
.hire-tile > span { position: absolute; z-index: 1; inset: auto 2rem 1.8rem; }
.hire-tile b { display: block; font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2.4rem); font-weight: 400; }
.hire-tile small { color: rgba(255,255,255,.72); letter-spacing: .04em; }
.collection-link { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; padding: 1.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 1.45rem; text-decoration: none; }
.collection-link span { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-family: var(--sans); font-size: .8rem; transition: .25s ease; }
.collection-link:hover span { transform: translate(.2rem,-.2rem); background: var(--ink); color: #fff; }

.lookbook { padding-top: clamp(6rem, 10vw, 10rem); background: var(--ink); color: #fff; }
.lookbook-head { display: grid; grid-template-columns: .7fr 1.7fr 1fr; gap: 3rem; align-items: start; }
.lookbook-head h2 { margin: 0; }
.lookbook-head > p { max-width: 430px; margin-top: .5rem; color: rgba(255,255,255,.58); }
.lookbook-grid { display: grid; grid-template-columns: .88fr 1.12fr; grid-template-rows: 52vh 52vh; gap: 1rem; margin-top: 5rem; }
.lookbook-item { position: relative; margin: 0; overflow: hidden; background: #24221f; }
.lookbook-item--portrait { grid-row: 1 / 3; }
.lookbook-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.lookbook-item--portrait img { object-position: 58% center; }
.lookbook-item:hover img { transform: scale(1.025); }
.lookbook-item::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(5,6,5,.72)); }
.lookbook-item figcaption { position: absolute; z-index: 1; inset: auto 2rem 1.7rem; display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.lookbook-item figcaption span { font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 2rem); }
.lookbook-item figcaption small { color: rgba(255,255,255,.62); text-align: right; }

.approach { background: var(--paper); }
.approach-heading { display: grid; grid-template-columns: 1fr 2.5fr; gap: 3rem; align-items: start; }
.approach-heading h2 { margin-top: 0; }
.approach-grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 4rem; border-top: 1px solid var(--line); }
.approach-grid article { padding: 2rem clamp(1.5rem, 3vw, 3rem) 0 0; }
.approach-grid article + article { padding-left: clamp(1.5rem, 3vw, 3rem); border-left: 1px solid var(--line); }
.approach-grid article > span { display: none; }
.approach-grid h3 { margin: 1.5rem 0 1rem; font-family: var(--serif); font-size: 1.8rem; font-weight: 400; }
.approach-grid p { color: #686962; }

.statement { display: grid; place-items: center; min-height: 78vh; padding: 5rem; text-align: center; color: #fff; background: linear-gradient(rgba(10,11,10,.74), rgba(10,11,10,.74)), url("assets/sunset-marquee-hero.png") center/cover fixed; }
.statement p { margin: 0; font-size: clamp(3.6rem, 8vw, 9rem); }

.enquire { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(4rem, 9vw, 10rem); background: var(--ink-soft); color: #fff; }
.enquire-intro p { max-width: 440px; color: rgba(255,255,255,.6); }
.enquiry-form { padding-top: .5rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
.enquiry-form label, .enquiry-form legend { display: block; font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.enquiry-form label span { text-transform: none; letter-spacing: 0; }
.enquiry-form input:not([type="checkbox"]), .enquiry-form textarea { width: 100%; padding: .7rem 0 1rem; margin-bottom: 2rem; color: #fff; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.3); border-radius: 0; outline: none; }
.enquiry-form input:focus, .enquiry-form textarea:focus { border-color: var(--brass); }
.enquiry-form textarea { resize: vertical; }
.enquiry-form fieldset { margin: 1rem 0 2rem; padding: 0; border: 0; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1rem; }
.check-grid label { display: flex; align-items: center; gap: .8rem; cursor: pointer; }
.check-grid input { width: 1.1rem; height: 1.1rem; accent-color: var(--brass); }
.check-grid span { font-size: .9rem; color: #fff; }
.submit-button { margin-top: 1rem; padding: 1rem 1.4rem; border: 1px solid var(--brass); background: var(--brass); color: var(--ink); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: .25s ease; }
.submit-button:hover { background: transparent; color: var(--brass); }
.submit-button span { margin-left: 2rem; }
.form-status { min-height: 1.5rem; color: #d9c49b; }

.site-footer { display: grid; grid-template-columns: 1.1fr 1.35fr .8fr auto; gap: 2rem; align-items: start; padding: 4rem clamp(1.4rem, 7vw, 8rem); background: #0d0e0d; color: rgba(255,255,255,.64); font-size: .82rem; }
.brand--footer { color: #fff; }
.brand--footer .brand-mark { width: 4.8rem; height: 4.8rem; }
.footer-contact { display: flex; flex-direction: column; gap: .4rem; }
.footer-contact p { margin: 0; }
.footer-contact a { width: fit-content; color: #fff; font-family: var(--serif); font-size: 1.28rem; text-decoration: none; }
.footer-contact small { margin-top: .35rem; color: var(--brass); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.footer-links { display: flex; flex-direction: column; gap: .45rem; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: #fff; }
.copyright { align-self: end; font-size: .7rem; }

/* Hire catalogue */
.catalogue-hero { display: grid; grid-template-columns: 1.6fr .7fr; gap: 5rem; align-items: end; padding: clamp(6rem, 10vw, 10rem) clamp(1.4rem, 7vw, 8rem) 5rem; background: var(--ivory); }
.catalogue-hero h1 { margin: 0; font-family: var(--serif); font-size: clamp(3.8rem, 7vw, 7.8rem); font-weight: 400; letter-spacing: -.045em; line-height: .95; }
.catalogue-hero h1 em { color: var(--brass); font-weight: 400; }
.catalogue-hero > p { max-width: 430px; margin: 0; color: #64645e; }
.catalogue-toolbar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 1rem clamp(1.4rem, 7vw, 8rem); background: rgba(248,246,240,.96); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.catalogue-toolbar p { margin: 0; font-size: .67rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.filter-buttons { display: flex; gap: .5rem; overflow-x: auto; }
.filter-button { white-space: nowrap; padding: .65rem 1rem; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--ink); font-size: .7rem; letter-spacing: .07em; cursor: pointer; }
.filter-button:hover, .filter-button.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }
.catalogue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding: 1px; background: var(--line); }
.product-card { min-width: 0; background: var(--paper); }
.product-card--feature, .product-card--wide { grid-column: span 2; }
.product-card.is-hidden { display: none; }
.product-image { height: clamp(320px, 38vw, 540px); overflow: hidden; background: #e6e1d8; }
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.product-card:hover .product-image img { transform: scale(1.025); }
.product-image--chairs img { object-position: 5% center; transform: scale(1.5); }
.product-image--crossback img { object-position: 35% center; transform: scale(1.5); }
.product-image--chiavari img { object-position: 67% center; transform: scale(1.5); }
.product-image--folding img { object-position: 95% center; transform: scale(1.5); }
.product-card:hover .product-image--chairs img, .product-card:hover .product-image--crossback img, .product-card:hover .product-image--chiavari img, .product-card:hover .product-image--folding img { transform: scale(1.54); }
.product-image--sofa img { object-position: 48% 43%; transform: scale(1.45); }
.product-image--armchair img { object-position: 8% 45%; transform: scale(1.55); }
.product-image--deckchair img { object-position: 86% center; }
.product-image--beanbags img { object-position: 55% 94%; transform: scale(1.35); }
.product-image--heater img { object-position: 72% center; transform: scale(1.35); }
.product-card--power { display: grid; grid-template-columns: 1.35fr 1fr; }
.product-graphic { min-height: 390px; display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 5rem); overflow: hidden; background: radial-gradient(circle at 78% 32%, rgba(180,145,85,.24), transparent 23%), linear-gradient(135deg, #161815, #292b26); color: #fff; }
.product-graphic span { color: var(--brass); font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 5rem); font-style: italic; line-height: 1; }
.product-graphic strong { font-size: clamp(3.5rem, 8vw, 8rem); font-weight: 300; letter-spacing: -.07em; line-height: .9; }
.product-graphic small { margin-top: 1.5rem; color: rgba(255,255,255,.48); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; }
.product-card--power .product-info { display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(2rem, 4vw, 4rem); }
.product-info { padding: 1.5rem 1.6rem 1.8rem; }
.product-info p { margin: 0 0 .6rem; color: var(--brass); font-size: .63rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.product-info h2 { margin: 0 0 .3rem; font-size: clamp(1.5rem, 2vw, 2.1rem); letter-spacing: -.02em; }
.product-info > span { color: #77776f; font-size: .82rem; }
.shortlist-button { width: 100%; display: flex; justify-content: space-between; margin-top: 1.5rem; padding: .9rem 0 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.shortlist-button b { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: .9rem; }
.shortlist-button.is-added { color: var(--brass); }
.hire-service-note { display: grid; grid-template-columns: .65fr 1.3fr .8fr; gap: 4rem; align-items: start; padding: clamp(6rem, 10vw, 10rem) clamp(1.4rem, 7vw, 8rem); background: var(--ink); color: #fff; }
.hire-service-note > span { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.hire-service-note h2 { margin: 0; }
.hire-service-note p { margin-top: .5rem; color: rgba(255,255,255,.62); }
.hire-service-note .text-link { grid-column: 3; align-self: start; justify-self: start; }
.shortlist-bar { position: fixed; z-index: 20; left: 50%; bottom: 1.2rem; transform: translateX(-50%); width: min(560px, calc(100% - 2rem)); display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.1rem; background: var(--ink); color: #fff; box-shadow: 0 12px 36px rgba(0,0,0,.25); }
.shortlist-bar[hidden] { display: none; }
.shortlist-bar p { margin: 0; font-size: .8rem; }
.shortlist-bar a { color: #d9c49b; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }

/* TV & film */
.production-hero { min-height: 76vh; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 3rem; align-items: end; padding: 2rem clamp(1.4rem, 7vw, 8rem) clamp(4rem, 7vw, 7rem); overflow: hidden; background: radial-gradient(circle at 78% 28%, rgba(180,145,85,.18), transparent 20%), repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(255,255,255,.05) 25%), var(--ink); color: #fff; }
.production-hero--image { position: relative; isolation: isolate; background: linear-gradient(90deg, rgba(7,9,8,.83), rgba(7,9,8,.26)), linear-gradient(0deg, rgba(7,9,8,.48), transparent 55%), url("assets/festival-aerial.webp") center/cover; }
.production-hero--image::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(255,255,255,.06) 25%); pointer-events: none; }
.production-meta { grid-column: 1 / -1; align-self: start; display: flex; justify-content: space-between; color: rgba(255,255,255,.52); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; }
.production-hero h1 { margin: 0; font-family: var(--serif); font-size: clamp(4rem, 7.4vw, 8rem); font-weight: 400; letter-spacing: -.045em; line-height: .92; }
.production-hero h1 em { color: #d9c49b; font-weight: 400; }
.production-lead { max-width: 440px; margin: 0 0 .7rem auto; font-family: var(--serif); font-size: clamp(1.5rem, 2.2vw, 2.2rem); line-height: 1.35; color: rgba(255,255,255,.7); }
.production-intro { display: grid; grid-template-columns: .75fr 2fr; gap: 4rem; background: var(--ivory); }
.production-intro h2 { margin-top: 0; }
.production-intro > div:last-child > p { max-width: 690px; margin-left: auto; color: #66665f; }
.production-services { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); }
.production-services article { min-height: 400px; display: flex; flex-direction: column; padding: clamp(2rem, 4vw, 4rem); background: var(--paper); }
.production-services article > span { display: none; }
.production-services h2 { margin: auto 0 1rem; font-size: clamp(1.7rem, 2.5vw, 2.7rem); }
.production-services p { margin: 0; color: #696a63; }
.production-process { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; background: var(--ink-soft); color: #fff; }
.production-process h2 { margin-bottom: 0; }
.production-process ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.2); }
.production-process li { display: grid; grid-template-columns: 1fr; gap: .6rem 1rem; padding: 1.5rem 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.production-process li span { display: none; }
.production-process li b { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
.production-process li p { grid-column: 1; margin: 0; color: rgba(255,255,255,.55); }
.production-process > .text-link { grid-column: 2; justify-self: start; }

/* Locations */
.locations-hero { display: grid; grid-template-columns: 1.5fr .7fr; gap: 4rem; align-items: end; padding: clamp(6rem, 10vw, 10rem) clamp(1.4rem, 7vw, 8rem); background: var(--ivory); }
.locations-hero .eyebrow { grid-column: 1 / -1; margin-bottom: 0; color: var(--brass); }
.locations-hero h1, .location-page-hero h1 { margin: 0; font-family: var(--serif); font-size: clamp(4rem, 7vw, 7.8rem); font-weight: 400; letter-spacing: -.045em; line-height: .94; }
.locations-hero h1 em, .location-page-hero h1 em { color: var(--brass); font-weight: 400; }
.locations-hero > p:last-child { max-width: 430px; margin: 0; color: #66665f; }
.location-directory { padding: clamp(5rem, 8vw, 8rem) clamp(1.4rem, 7vw, 8rem); }
.directory-intro { display: grid; grid-template-columns: .6fr 1.4fr; gap: 3rem; align-items: end; margin-bottom: 3rem; }
.directory-intro > span { color: var(--brass); font-size: .68rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.directory-intro h2 { margin: 0; }
.location-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.location-grid a { min-height: 270px; display: flex; flex-direction: column; padding: 2rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; transition: .25s ease; }
.location-grid a:hover { background: var(--ink); color: #fff; }
.location-grid a > span, .location-services article > span { display: none; }
.location-grid h3 { margin: auto 0 .5rem; font-family: var(--serif); font-size: 2rem; font-weight: 400; }
.location-grid p { margin: 0; color: #74756e; }
.location-grid a:hover p { color: rgba(255,255,255,.58); }
.location-cta { display: grid; grid-template-columns: .6fr 1.4fr .6fr; gap: 3rem; align-items: center; padding: clamp(5rem, 9vw, 9rem) clamp(1.4rem, 7vw, 8rem); background: var(--ink); color: #fff; }
.location-cta > span { color: var(--brass); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.location-cta h2 { margin: 0; }
.location-cta .text-link { justify-self: end; }
.location-page-hero { display: grid; grid-template-columns: 1.5fr .7fr; gap: 4rem; align-items: end; padding: clamp(6rem, 10vw, 10rem) clamp(1.4rem, 7vw, 8rem); background: var(--ivory); }
.location-page-hero .eyebrow { grid-column: 1 / -1; margin-bottom: 0; color: var(--brass); }
.location-page-hero > p:last-child { max-width: 430px; margin: 0; color: #66665f; }
.location-details { display: grid; grid-template-columns: .65fr 1.3fr .85fr; gap: 4rem; padding: clamp(5rem, 9vw, 9rem) clamp(1.4rem, 7vw, 8rem); }
.location-details > span { color: var(--brass); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.location-details h2 { margin: 0; }
.location-details .location-copy p { margin-top: 0; color: #686962; }
.location-areas { margin: 2rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.location-areas li { padding: .65rem 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 1.1rem; }
.location-services { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); }
.location-services article { min-height: 300px; display: flex; flex-direction: column; padding: 2.5rem; background: var(--paper); }
.location-services span { color: var(--brass); font-size: .65rem; }
.location-services h3 { margin: auto 0 .7rem; font-family: var(--serif); font-size: 1.8rem; font-weight: 400; }
.location-services p { margin: 0; color: #6f7069; }

/* Marquee hire */
.marquee-hero { position: relative; min-height: 82vh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; background: var(--ink); }
.marquee-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.marquee-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,9,8,.8), rgba(7,9,8,.18)), linear-gradient(0deg, rgba(7,9,8,.55), transparent 55%); }
.marquee-hero__copy { position: relative; z-index: 1; width: min(930px, 82vw); padding: 12rem clamp(1.4rem, 7vw, 8rem) 6rem; }
.marquee-hero h1 { margin: 0; font-family: var(--serif); font-size: clamp(4rem, 7.4vw, 8.5rem); font-weight: 400; letter-spacing: -.05em; line-height: .92; }
.marquee-hero h1 em { color: #e6b5a6; font-weight: 400; }
.marquee-intro { display: grid; grid-template-columns: .7fr 1.5fr; gap: clamp(3rem, 8vw, 9rem); background: var(--ivory); }
.marquee-intro h2 { margin-top: 0; }
.marquee-intro__copy > p { max-width: 700px; color: #66665f; }
.marquee-types { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); }
.marquee-type { position: relative; min-height: 560px; overflow: hidden; color: #fff; }
.marquee-type img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.marquee-type:hover img { transform: scale(1.025); }
.marquee-type::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(7,8,7,.86)); }
.marquee-type__copy { position: absolute; z-index: 1; inset: auto clamp(1.5rem, 4vw, 4rem) clamp(1.5rem, 4vw, 3.5rem); }
.marquee-type h2 { margin: 0 0 .7rem; font-size: clamp(2.4rem, 4vw, 4.4rem); }
.marquee-type p { max-width: 520px; margin: 0; color: rgba(255,255,255,.7); }
.marquee-complete { background: var(--ink); color: #fff; }
.marquee-complete__head { display: grid; grid-template-columns: .7fr 1.5fr; gap: 4rem; }
.marquee-complete__head h2 { margin-top: 0; }
.marquee-complete__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 4rem; background: rgba(255,255,255,.17); }
.marquee-complete__grid article { min-height: 260px; padding: 2rem; background: var(--ink); }
.marquee-complete__grid h3 { margin: 3rem 0 1rem; font-family: var(--serif); font-size: 1.7rem; font-weight: 400; }
.marquee-complete__grid p { color: rgba(255,255,255,.55); }
.nav-single--primary { color: #f0c0b2 !important; }

/* Blue Chilli Group — discreet footer signature */
.group-corner { grid-column: -2 / -1; justify-self: end; align-self: end; display: flex; flex-direction: column; align-items: flex-end; padding-left: 1.5rem; color: #fff; text-align: right; text-decoration: none; }
.group-corner small { color: rgba(255,255,255,.48); font-size: .6rem; font-weight: 600; letter-spacing: .13em; line-height: 1.2; text-transform: uppercase; }
.group-corner strong { margin-top: .25rem; font-family: var(--serif); font-size: 1.2rem; font-weight: 400; letter-spacing: -.01em; line-height: 1; }
.group-corner span { margin-top: .18rem; color: var(--brass); font-size: .58rem; font-weight: 600; letter-spacing: .22em; line-height: 1; text-transform: uppercase; }
.group-corner:hover strong { color: var(--brass); }

@keyframes hero-in { from { transform: scale(1.055); opacity: .75; } to { transform: scale(1); opacity: 1; } }

@media (max-width: 920px) {
  .site-header { min-height: 78px; }
  .menu-toggle { display: grid; gap: 5px; padding: .5rem; border: 0; background: none; }
  .menu-toggle > span:not(.sr-only) { width: 25px; height: 1px; background: #fff; transition: .25s ease; }
  .site-nav { position: fixed; inset: 78px 0 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1.4rem 2rem; overflow-y: auto; background: var(--ink); color: #fff; border-top: 1px solid rgba(255,255,255,.18); }
  .site-nav.is-open { display: flex; }
  .site-nav a { width: 100%; }
  .nav-parent, .nav-single { width: 100%; padding: 1rem 0; color: #fff; border-bottom: 1px solid rgba(255,255,255,.14); text-align: left; }
  .nav-parent { justify-content: space-between; }
  .mega-menu { position: static; display: none; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; padding: 1.4rem 0 1.8rem; background: transparent; color: #fff; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .nav-group.is-open .mega-menu { display: grid; }
  .mega-intro { grid-column: 1 / -1; }
  .mega-intro p { display: none; }
  .mega-column b { font-family: var(--sans); font-size: .86rem; }
  .mega-column small { color: rgba(255,255,255,.48); }
  .mega-column a { border-color: rgba(255,255,255,.14); }
  .site-header--internal .menu-toggle > span:not(.sr-only) { background: var(--ink); }
  .nav-cta { margin-top: 1rem; padding: 1rem !important; text-align: center; }
  .hero-content { width: 100%; padding: 10rem 1.4rem 6rem; }
  .hero h1 { font-size: clamp(3.4rem, 13vw, 6rem); }
  .hero-note { display: none; }
  .scroll-cue { right: 1.4rem; }
  .intro { grid-template-columns: 1fr; }
  .intro-seal { display: none; }
  .services { grid-template-columns: 1fr; }
  .services-head { position: static; }
  .feature { grid-template-columns: 1fr; }
  .hire-preview-head { grid-template-columns: 1fr; }
  .lookbook-head { grid-template-columns: 1fr; }
  .lookbook-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 56vh 42vh; }
  .lookbook-item--portrait { grid-column: 1 / -1; grid-row: auto; }
  .hire-preview-grid { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(420px, 60vh) minmax(250px, 35vh); }
  .hire-tile--large { grid-column: 1 / -1; grid-row: auto; }
  .feature-image { min-height: 58vh; }
  .approach-heading { grid-template-columns: 1fr; }
  .enquire { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .catalogue-hero { grid-template-columns: 1fr; gap: 2rem; }
  .catalogue-grid { grid-template-columns: repeat(2, 1fr); }
  .product-card--feature, .product-card--wide { grid-column: span 2; }
  .product-card--power { grid-template-columns: 1fr 1fr; }
  .hire-service-note { grid-template-columns: 1fr 2fr; }
  .hire-service-note .text-link { grid-column: 2; }
  .production-hero { grid-template-columns: 1fr; }
  .production-lead { margin-left: 0; }
  .production-intro { grid-template-columns: 1fr; }
  .production-services { grid-template-columns: repeat(2,1fr); }
  .locations-hero, .location-page-hero { grid-template-columns: 1fr; }
  .location-grid { grid-template-columns: repeat(2,1fr); }
  .location-cta { grid-template-columns: 1fr 1.5fr; }
  .location-cta .text-link { grid-column: 2; justify-self: start; }
  .location-details { grid-template-columns: 1fr 2fr; }
  .location-copy { grid-column: 2; }
  .location-services { grid-template-columns: repeat(2,1fr); }
  .marquee-complete__grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 620px) {
  .brand-name { font-size: 1.1rem; }
  .brand-mark { width: 3.2rem; height: 3.2rem; }
  .hero { min-height: 820px; }
  .hero-image { object-position: 66% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(8,10,10,.7), rgba(8,10,10,.2)), linear-gradient(0deg, rgba(8,10,10,.75), transparent 70%); }
  .hero-content { padding-bottom: 5rem; }
  .hero-copy { font-size: 1rem; }
  .section { padding: 5rem 1.4rem; }
  .services { padding-top: 6rem; padding-bottom: 6rem; }
  .service-trigger { grid-template-columns: 1fr 28px; gap: .6rem; }
  .service-panel { grid-template-columns: 1fr 28px; gap: .6rem; }
  .feature-copy { padding: 5rem 1.4rem; }
  .hire-preview-grid { grid-template-columns: 1fr; grid-template-rows: repeat(3, 360px); }
  .lookbook-grid { grid-template-columns: 1fr; grid-template-rows: repeat(3, 430px); }
  .lookbook-item--portrait { grid-column: auto; }
  .lookbook-item figcaption { inset: auto 1.3rem 1.2rem; display: block; }
  .lookbook-item figcaption small { display: block; margin-top: .2rem; text-align: left; }
  .hire-tile--large { grid-column: auto; }
  .hire-tile > span { inset: auto 1.4rem 1.3rem; }
  .feature-image { min-height: 440px; }
  .approach-grid { grid-template-columns: 1fr; }
  .approach-grid article, .approach-grid article + article { padding: 2rem 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .approach-grid h3 { margin: 1.5rem 0 .5rem; }
  .statement { min-height: 62vh; padding: 2rem; background-attachment: scroll; }
  .form-grid, .check-grid { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr; }
  .catalogue-hero { padding: 5rem 1.4rem 3.5rem; }
  .catalogue-hero h1 { font-size: clamp(3.4rem, 14vw, 5.2rem); }
  .catalogue-toolbar { align-items: flex-start; flex-direction: column; padding: 1rem 1.4rem; }
  .filter-buttons { width: 100%; padding-bottom: .15rem; }
  .catalogue-grid { grid-template-columns: 1fr; }
  .product-card--feature, .product-card--wide { grid-column: auto; }
  .product-card--power { display: block; }
  .product-image { height: 390px; }
  .hire-service-note { grid-template-columns: 1fr; gap: 2rem; padding: 5rem 1.4rem; }
  .hire-service-note .text-link { grid-column: 1; }
  .shortlist-bar { align-items: flex-start; }
  .production-hero { min-height: 700px; padding: 2rem 1.4rem 4rem; }
  .production-services { grid-template-columns: 1fr; }
  .production-services article { min-height: 320px; }
  .production-process { grid-template-columns: 1fr; gap: 3rem; }
  .production-process > .text-link { grid-column: 1; }
  .locations-hero, .location-page-hero { padding: 5rem 1.4rem; }
  .directory-intro { grid-template-columns: 1fr; }
  .location-grid { grid-template-columns: 1fr; }
  .location-cta { grid-template-columns: 1fr; }
  .location-cta .text-link { grid-column: 1; }
  .location-details { grid-template-columns: 1fr; gap: 2rem; padding: 5rem 1.4rem; }
  .location-copy { grid-column: 1; }
  .location-services { grid-template-columns: 1fr; }
  .marquee-hero { min-height: 760px; }
  .marquee-hero__copy { width: 100%; padding: 10rem 1.4rem 4.5rem; }
  .marquee-intro, .marquee-complete__head { grid-template-columns: 1fr; }
  .marquee-types, .marquee-complete__grid { grid-template-columns: 1fr; }
  .marquee-type { min-height: 480px; }
  .group-corner { grid-column: 1; justify-self: end; margin-top: 1rem; padding-left: 0; }
}

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