@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/assets/fonts/jost-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/assets/fonts/jost-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Times New Roman"), local("Times"), local("Liberation Serif"), local("DejaVu Serif");
  size-adjust: 88%;
  ascent-override: 105%;
  descent-override: 33%;
}
@font-face {
  font-family: "Jost Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("DejaVu Sans");
  size-adjust: 96%;
  ascent-override: 110%;
  descent-override: 38%;
}

:root {
  --green: #1a3a2a;
  --green-m: #1f4730;
  --green-d: #0d2019;
  --green-b: #080f0a;
  --cream: #f5f0e8;
  --cream-d: #ede7d9;
  --blue: #0066cc;
  --blue-h: #0052a3;
  --gold: #c9985a;
  --gold-l: #d4aa6e;
  --black: #1a1a1a;
  --muted: rgba(245, 240, 232, .78);
  --serif: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  --sans: "Jost", "Jost Fallback", Arial, sans-serif;
  --header-h: 68px;
  --focus: #f2c98a;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body { font-family: var(--sans); color: var(--black); background: var(--cream); overflow-x: hidden; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.07; }
p { line-height: 1.8; font-weight: 300; letter-spacing: .01em; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; }
address { font-style: normal; }
main:focus { outline: none; }

body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9000;
  opacity: .4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.home #adrover :focus-visible, .home #remarkable :focus-visible, #fleet .fleet-header :focus-visible, .page-light :focus-visible { outline-color: #0052a3; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 10000;
  background: #fff; color: var(--green); padding: 12px 20px;
  font: 500 14px/1 var(--sans); letter-spacing: .04em;
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.centre { text-align: center; margin-top: 16px; }

.eyebrow {
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
  font: 400 11px/1.4 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--gold);
}
.eyebrow::before { content: ""; display: block; width: 30px; height: 1px; background: currentColor; flex-shrink: 0; }
.eyebrow.dark { color: var(--green); }
.eyebrow-light { color: var(--gold-l); }

.section-h { font-size: clamp(34px, 4.2vw, 62px); font-weight: 300; color: var(--green); line-height: 1.07; }
.section-h.light { color: #fff; }
.section-h em { font-style: italic; color: var(--gold); }
#fleet .section-h em { color: #8a5f2a; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font: 500 11px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; border: none; padding: 14px 34px;
  transition: background-color .22s ease, border-color .22s ease, transform .22s ease;
}
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-h); transform: translateY(-2px); }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-m); transform: translateY(-2px); }
.btn-outline { background: rgba(8, 15, 10, .25); color: #fff; border: 1px solid rgba(255, 255, 255, .5); }
.btn-outline:hover { border-color: rgba(255, 255, 255, .85); }

#site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: var(--header-h); display: flex; align-items: center;
  justify-content: space-between; padding: 0 60px;
  background: rgba(8, 15, 10, .94);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo-mark {
  width: 32px; height: 32px; border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font: 400 13px/1 var(--serif); color: var(--gold); letter-spacing: .04em;
}
.logo-name { font: 300 16px/1 var(--serif); color: #fff; letter-spacing: .16em; text-transform: uppercase; }
.header-cta {
  font: 500 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  background: var(--blue); color: #fff; padding: 12px 24px; transition: background-color .2s;
}
.header-cta:hover { background: var(--blue-h); }

#hero { position: relative; background: var(--green-b); padding-top: var(--header-h); }
.hero-img { position: relative; aspect-ratio: 2000 / 530; overflow: hidden; background: var(--green-d); }
.hero-img img { width: 100%; height: 100%; object-fit: cover; }
.hero-grad {
  position: absolute; left: 0; right: 0; bottom: 0; height: 70%; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 15, 10, 1) 0%, rgba(8, 15, 10, .55) 45%, transparent 100%);
}
.hero-content { position: relative; z-index: 3; max-width: 1100px; padding: 0 80px 72px; margin-top: 0; }
.hero-eyebrow {
  font: 400 11px/1.4 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--gold);
  display: flex; align-items: center; gap: 16px; margin-bottom: 22px;
}
.hero-eyebrow::before { content: ""; width: 38px; height: 1px; background: var(--gold); flex-shrink: 0; }
.hero-h { font-size: clamp(36px, 5.6vw, 88px); font-weight: 300; color: #fff; line-height: .99; margin-bottom: 20px; }
.hero-h em { font-style: italic; color: var(--gold); }
.hero-sub { font-size: clamp(15px, 1.4vw, 18px); color: var(--muted); max-width: 520px; line-height: 1.85; margin-bottom: clamp(24px, 3vw, 40px); }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-scroll {
  position: absolute; bottom: 24px; right: 80px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(255, 255, 255, .55); font: 400 9px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
}
.scroll-line {
  display: block; width: 1px; height: 40px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .5), transparent);
  animation: scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse { 0%, 100% { transform: scaleY(1); opacity: .5; } 50% { transform: scaleY(.4); opacity: .2; } }

#brand-statement { background: var(--green); padding: 80px 80px 88px; border-top: 1px solid rgba(255, 255, 255, .07); }
.brand-statement-inner { max-width: 860px; margin: 0 auto; text-align: center; }
.brand-statement-text { font-family: var(--serif); font-size: clamp(28px, 3.8vw, 52px); font-weight: 300; color: #fff; line-height: 1.15; margin-bottom: 36px; letter-spacing: -.01em; }
.brand-statement-text em { font-style: italic; color: var(--gold); }
.brand-statement-body { font-size: clamp(15px, 1.5vw, 18px); color: rgba(245, 240, 232, .8); line-height: 1.9; }
.brand-statement-body strong { color: #fff; font-weight: 400; }
.brand-statement-body em { font-style: italic; color: var(--gold-l); font-family: var(--serif); font-size: 1.08em; }

#adrover { background: var(--cream); padding: 112px 80px; }
.adrover-intro { margin-bottom: 64px; }
.adrover-intro .eyebrow { font-family: var(--sans); font-weight: 400; }
.adrover-intro p { font-family: var(--serif); font-size: clamp(20px, 2.5vw, 30px); font-weight: 300; color: var(--green); line-height: 1.5; max-width: 860px; font-style: italic; margin-top: 24px; }
.prop-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-bottom: 64px; }
.prop-col { background: var(--green); padding: 48px 40px; }
.prop-col h3 { font-size: 26px; color: #fff; font-weight: 400; margin-bottom: 14px; line-height: 1.1; }
.prop-col p { font-size: 15px; color: rgba(255, 255, 255, .78); line-height: 1.75; }
.prop-col strong { color: #fff; font-weight: 400; }

#remarkable { background: var(--cream-d); padding: 112px 80px; }
.remarkable-intro { max-width: 860px; margin-bottom: 56px; }
.remarkable-lead { font-family: var(--serif); font-size: clamp(20px, 2.3vw, 28px); font-weight: 300; font-style: italic; color: var(--green); line-height: 1.5; margin-top: 24px; }
.steps { list-style: none; grid-template-columns: repeat(4, 1fr); margin-bottom: 48px; }
.step-num { font: 300 44px/1 var(--serif); color: var(--gold-l); margin-bottom: 18px; }
.case-teaser { display: flex; align-items: center; gap: 40px; background: var(--cream); border: 1px solid rgba(26, 58, 42, .25); padding: 36px 40px; }
.case-teaser-logo { flex: 0 0 auto; filter: grayscale(1) contrast(1.6) brightness(.55); }
.case-teaser-copy { flex: 1 1 auto; }
.case-teaser-copy .eyebrow { margin-bottom: 10px; }
.case-teaser h3 { font-size: 30px; color: var(--green); margin-bottom: 8px; }
.case-teaser-copy p:not(.eyebrow) { font-size: 16px; color: #2a2a2a; font-weight: 400; max-width: 640px; }
.case-teaser .btn { flex: 0 0 auto; }

#twin-break { position: relative; min-height: 540px; overflow: hidden; display: flex; align-items: flex-end; padding: 0 80px 80px; background: var(--green-b); }
#twin-break picture { position: absolute; inset: 0; }
#twin-break .twin-img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
#twin-break::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(6, 15, 10, .82) 0%, rgba(6, 15, 10, .6) 45%, rgba(6, 15, 10, 0) 78%), linear-gradient(to top, rgba(6, 15, 10, .85) 0%, rgba(6, 15, 10, .2) 60%, rgba(6, 15, 10, .05) 100%); }
@media (max-width: 900px) { #twin-break::after { background: linear-gradient(to top, rgba(6, 15, 10, .92) 0%, rgba(6, 15, 10, .7) 55%, rgba(6, 15, 10, .3) 100%); } }
.twin-content { position: relative; z-index: 2; max-width: 720px; }
.twin-content h2 { font-size: clamp(32px, 4vw, 58px); color: #fff; font-weight: 300; line-height: 1.1; margin-bottom: 18px; }
.twin-content h2 em { font-style: italic; color: var(--gold); }
.twin-content p:not(.eyebrow) { font-size: 17px; color: rgba(245, 240, 232, .88); line-height: 1.85; max-width: 580px; margin-bottom: 32px; }

#results { background: var(--green-d); padding: 80px; }
.results-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 52px; border-top: 1px solid rgba(255, 255, 255, .08); }
.result-item { padding: 44px 36px; border-right: 1px solid rgba(255, 255, 255, .07); }
.result-item:nth-child(4n) { border-right: none; }
.result-wide { grid-column: span 2; }
.result-num { font-family: var(--serif); font-size: clamp(40px, 5vw, 70px); font-weight: 300; color: #fff; line-height: 1; margin-bottom: 8px; }
.result-num em { font-style: normal; color: var(--gold); }
.result-num-text { font-size: clamp(22px, 2.5vw, 36px); line-height: 1.3; }
.result-lbl { font-size: 14px; color: rgba(255, 255, 255, .75); line-height: 1.55; }
.result-campaign { display: block; font-size: 12px; color: var(--gold-l); margin-top: 5px; }

#clients { background: var(--cream-d); padding: 80px; text-align: center; }
.clients-label { font: 500 11px/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: #5b5346; margin-bottom: 52px; }
.clients-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px 56px; max-width: 1120px; margin: 0 auto; }
.clients-grid li { display: flex; align-items: center; justify-content: center; min-height: 56px; }
/* Logos share one muted greyscale treatment so mixed brand colours sit calmly on the cream; full colour on hover. */
.client-logo img { display: block; max-width: 100%; height: auto; filter: grayscale(1) contrast(1.6) brightness(.6); opacity: .82; transition: filter .3s, opacity .3s; }
.client-logo-flat img { filter: brightness(0); opacity: .74; }
.client-logo:hover img { filter: none; opacity: 1; }
.client-name { font: 500 20px/1.4 var(--serif); color: #4a5d51; letter-spacing: .08em; text-transform: uppercase; transition: color .25s; }
.client-name:hover { color: var(--green); }

#testimonials { background: var(--green); padding: 112px 80px; }
.t-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 60px; }
.t-card { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); padding: 44px; transition: border-color .3s; }
.t-card:hover { border-color: rgba(201, 152, 90, .4); }
.t-card blockquote { margin-bottom: 24px; padding-left: 18px; border-left: 2px solid var(--gold); }
.t-card blockquote p { font: italic 300 19px/1.6 var(--serif); color: rgba(255, 255, 255, .9); }
.t-name { display: block; font: 500 14px/1.4 var(--sans); color: #fff; margin-bottom: 3px; }
.t-title { display: block; font: 400 12px/1.5 var(--sans); color: rgba(255, 255, 255, .72); letter-spacing: .05em; }

#sustainability { background: var(--green-m); padding: 100px 80px; }
.sustain-h { max-width: 700px; }
.sustain-h em { color: var(--gold-l); }
.sustain-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-top: 56px; }
.sustain-text p { font-size: 17px; color: rgba(245, 240, 232, .85); line-height: 1.85; margin-bottom: 18px; }
.sustain-badges { display: flex; flex-direction: column; gap: 12px; }
.sustain-badge { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); padding: 16px 22px; font: 400 12px/1.4 var(--sans); color: rgba(255, 255, 255, .88); letter-spacing: .08em; text-transform: uppercase; }

#fleet { background: var(--cream); padding: 112px 0 80px; }
.fleet-header { padding: 0 80px; margin-bottom: 60px; }
.fleet-header > p:not(.eyebrow) { font-size: 17px; color: #4d4d4d; line-height: 1.85; max-width: 600px; margin-top: 20px; }
.fleet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 0 80px; }
.vehicle-card { overflow: hidden; background: var(--green); display: flex; flex-direction: column; }
.vehicle-img { height: 240px; overflow: hidden; position: relative; background: var(--green-d); }
.vehicle-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.vehicle-card:hover .vehicle-img img { transform: scale(1.05); }
.vehicle-info { padding: 24px 22px 28px; background: var(--green); flex: 1; }
.vehicle-reg { font: 400 10px/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-l); margin-bottom: 7px; }
.vehicle-name { font: 400 30px/1.07 var(--serif); color: #fff; margin-bottom: 4px; }
.vehicle-namesake { font: italic 400 15px/1.5 var(--serif); color: var(--gold-l); margin-bottom: 10px; }
.vehicle-desc p { font-size: 14px; color: rgba(255, 255, 255, .78); line-height: 1.65; }
.vehicle-badge { display: inline-block; margin-top: 14px; font: 400 10px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; }
.badge-blue { background: rgba(0, 102, 204, .2); color: #9cc3ef; border: 1px solid rgba(85, 153, 224, .5); }
.badge-gold { background: rgba(201, 152, 90, .12); color: var(--gold-l); border: 1px solid rgba(201, 152, 90, .35); }
.fleet-cta { background: var(--green-m); align-items: center; justify-content: center; gap: 20px; padding: 48px 32px; text-align: center; min-height: 400px; }
.fleet-cta .eyebrow { justify-content: center; margin-bottom: 0; }
.fleet-cta h3 { font: 300 32px/1.15 var(--serif); color: #fff; }
.fleet-cta h3 em { color: var(--gold-l); }
.fleet-cta p:not(.eyebrow) { font-size: 15px; color: rgba(245, 240, 232, .85); line-height: 1.75; max-width: 240px; }

#contact { background: var(--green-b); padding: 112px 80px 80px; }
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.contact-lhs h2 { font-size: clamp(36px, 4vw, 58px); color: #fff; font-weight: 300; line-height: 1.07; margin-bottom: 22px; }
.contact-lhs h2 em { font-style: italic; color: var(--gold); }
.contact-lhs .sub { font-size: 16px; color: var(--muted); line-height: 1.85; margin-bottom: 40px; }
.contact-detail { border-top: 1px solid rgba(255, 255, 255, .1); padding: 20px 0; }
.contact-detail dt { font: 400 10px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.contact-detail dd { font: 300 20px/1.5 var(--serif); color: #fff; overflow-wrap: anywhere; }
.contact-detail dd a:hover { color: var(--gold-l); }
.contact-detail .contact-small { font: 300 16px/1.65 var(--sans); }
.contact-social a { display: block; font: 300 15px/2 var(--sans); color: rgba(255, 255, 255, .8); transition: color .2s; }
.contact-social a:hover { color: #fff; }
.brand-quote { background: rgba(255, 255, 255, .04); border: 1px solid rgba(201, 152, 90, .25); padding: 36px; margin-top: 36px; }
.brand-quote p { font: italic 300 22px/1.45 var(--serif); color: #fff; margin-bottom: 14px; }
.brand-quote figcaption { font: 400 11px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }

.contact-form { display: flex; flex-direction: column; gap: 18px; }
.form-title { font: 300 34px/1.1 var(--serif); color: #fff; margin-bottom: 6px; }
.form-title em { color: var(--gold); font-style: italic; }
.form-sub { font-size: 14px; color: rgba(255, 255, 255, .72); margin-bottom: 10px; line-height: 1.6; }
.form-fallback { font-size: 14px; color: #fff; background: rgba(201, 152, 90, .12); border: 1px solid rgba(201, 152, 90, .4); padding: 14px 16px; line-height: 1.6; }
.form-fallback a, .form-status a, .form-note a { text-decoration: underline; text-underline-offset: 3px; }
.fg { display: flex; flex-direction: column; gap: 7px; }
.fg label { font: 500 11px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.fg .req { color: var(--gold-l); }
.fg .optional { text-transform: none; letter-spacing: .02em; font-weight: 400; color: rgba(255, 255, 255, .7); }
.fg input, .fg textarea {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .3);
  font: 300 16px/1.4 var(--sans); color: #fff; padding: 13px 16px;
  transition: border-color .2s; border-radius: 0; width: 100%; -webkit-appearance: none; appearance: none;
}
.fg input::placeholder, .fg textarea::placeholder { color: rgba(255, 255, 255, .55); }
.fg input:focus, .fg textarea:focus { border-color: var(--gold); }
.fg input:focus-visible, .fg textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.fg [aria-invalid="true"] { border-color: #ff8f8f; }
.field-error { font-size: 13px; color: #ffb3b3; line-height: 1.4; font-weight: 400; }
.fg textarea { min-height: 120px; resize: vertical; }
.fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.turnstile-slot { min-height: 65px; }
.form-submit {
  background: var(--blue); color: #fff; border: none;
  font: 500 12px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  padding: 16px; cursor: pointer; transition: background-color .2s; width: 100%; margin-top: 6px;
}
.form-submit:hover { background: var(--blue-h); }
.form-submit[disabled] { opacity: .7; cursor: progress; }
.form-note { font-size: 12px; color: rgba(255, 255, 255, .7); line-height: 1.6; }
.form-status { font-size: 14px; line-height: 1.6; padding: 14px 16px; color: #fff; }
.form-status.is-error { background: rgba(255, 120, 120, .1); border: 1px solid rgba(255, 143, 143, .5); }
.form-success { background: rgba(45, 107, 66, .2); border: 1px solid rgba(90, 170, 120, .5); padding: 24px; text-align: center; }
.form-success p { font: italic 300 22px/1.5 var(--serif); color: #fff; }
.form-success:focus { outline: 3px solid var(--focus); outline-offset: 3px; }

.site-footer { background: var(--green-b); border-top: 1px solid rgba(255, 255, 255, .06); padding: 48px 80px 36px; }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; flex-wrap: wrap; }
.footer-brand { font: 300 17px/1.4 var(--serif); color: #fff; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; }
.footer-tagline { font-size: 13px; color: rgba(255, 255, 255, .7); line-height: 1.7; max-width: 260px; margin-bottom: 12px; }
.footer-ev-badge { display: inline-flex; align-items: center; background: rgba(45, 107, 66, .16); border: 1px solid rgba(45, 107, 66, .45); padding: 5px 13px; color: #7cc596; font: 400 10px/1.6 var(--sans); letter-spacing: .1em; }
.footer-address { font-size: 12px; color: rgba(255, 255, 255, .66); line-height: 1.7; margin-top: 14px; }
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-links h2 { font: 400 10px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.footer-links a { font-size: 13px; color: rgba(255, 255, 255, .72); transition: color .2s; font-weight: 300; padding: 4px 0; }
.footer-links a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .06); padding-top: 24px; margin-top: 48px; display: flex; justify-content: space-between; gap: 12px; }
.footer-bottom p { font: 400 11px/1.6 var(--sans); color: rgba(255, 255, 255, .62); }

.page-light { background: var(--cream); padding: calc(var(--header-h) + 72px) 24px 96px; min-height: 70vh; }
.prose { max-width: 760px; margin: 0 auto; color: #2a2a2a; }
.prose h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 300; color: var(--green); margin-bottom: 24px; }
.prose h2 { font-size: 30px; color: var(--green); margin: 40px 0 12px; }
.prose h3 { font-size: 22px; color: var(--green); margin: 28px 0 8px; }
.prose p, .prose li { font-size: 16px; line-height: 1.75; margin-bottom: 12px; font-weight: 400; }
.prose ul { list-style: disc; padding-left: 22px; margin-bottom: 16px; }
.prose a { color: #0052a3; text-decoration: underline; text-underline-offset: 3px; }
.prose strong { font-weight: 600; }
.draft-banner { background: #fff3cd; border: 2px solid #8a6d1a; color: #3d2f00; padding: 14px 18px; margin-bottom: 28px; font-weight: 500; }
.prose .btn { text-decoration: none; color: #fff; }

/* Cookie consent banner (assets/js/consent.js). Both choices share one style: equal prominence. */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8000;
  background: var(--green-d); color: var(--cream);
  border-top: 1px solid rgba(201, 152, 90, .55);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .35);
  padding: 22px 60px;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner:focus { outline: none; }
.cookie-banner:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.cookie-banner-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 32px; }
.cookie-banner-copy { flex: 1 1 auto; }
.cookie-banner-title { font: 400 22px/1.2 var(--serif); color: #fff; margin-bottom: 6px; }
.cookie-banner-text { font-size: 14px; line-height: 1.65; color: rgba(245, 240, 232, .9); font-weight: 400; }
.cookie-banner-text a { color: var(--gold-l); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cookie-banner-text a:hover { color: #fff; }
.cookie-banner-actions { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cookie-btn {
  font: 500 12px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  background: var(--cream); color: var(--green-b); border: 1px solid var(--cream);
  padding: 14px 22px; min-height: 48px; min-width: 168px; cursor: pointer; border-radius: 0;
  transition: background-color .2s, border-color .2s;
}
.cookie-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cookie-btn-main { display: block; }
.cookie-btn-sub { display: block; font: italic 400 15px/1.2 var(--serif); letter-spacing: .01em; text-transform: none; color: var(--green); }
.cookie-btn:hover { background: #fff; border-color: #fff; }
.cookie-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.footer-link-btn {
  align-self: flex-start; background: none; border: none; cursor: pointer; text-align: left;
  font: 300 13px/1.8 var(--sans); color: rgba(255, 255, 255, .72); padding: 4px 0; transition: color .2s;
}
.footer-link-btn:hover { color: #fff; }
.footer-link-btn[hidden] { display: none; }
@media (max-width: 860px) {
  .cookie-banner { padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px)); max-height: 80vh; overflow-y: auto; }
  .cookie-banner-inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .cookie-banner-title { font-size: 20px; }
  .cookie-btn { min-width: 0; padding: 14px 10px; }
}

@media (max-width: 1100px) {
  .fleet-grid { grid-template-columns: repeat(2, 1fr); }
  .results-grid { grid-template-columns: repeat(2, 1fr); }
  .result-item:nth-child(4n) { border-right: 1px solid rgba(255, 255, 255, .07); }
  .result-item:nth-child(2n) { border-right: none; }
  .prop-cols { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  #site-header { padding: 0 24px; }
  .hero-content { padding: 0 28px 56px; }
  .hero-scroll { right: 28px; }
  #brand-statement { padding: 60px 28px 68px; }
  #adrover, #remarkable, #results, #clients, #testimonials, #sustainability, #contact { padding-left: 28px; padding-right: 28px; }
  .case-teaser { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px; }
  .fleet-header, .fleet-grid { padding-left: 28px; padding-right: 28px; }
  #twin-break { padding: 0 28px 60px; min-height: 420px; }
  .contact-inner, .sustain-inner, .t-grid { grid-template-columns: 1fr; }
  .site-footer { padding: 40px 28px 28px; }
  .footer-inner { flex-direction: column; gap: 36px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}
@media (max-width: 700px) {
  .hero-content { margin-top: 0; padding: 28px 24px 44px; }
  .hero-grad { height: 40%; }
  .hero-scroll { display: none; }
}
@media (max-width: 600px) {
  #site-header { padding: 0 16px; }
  .header-cta { padding: 12px 16px; }
  .logo-name { font-size: 14px; letter-spacing: .1em; }
  #brand-statement { padding: 52px 20px 60px; }
  .brand-statement-text { font-size: 26px; }
  .brand-statement-body { font-size: 15px; }
  #adrover, #remarkable, #results, #clients, #testimonials, #sustainability, #contact { padding: 64px 20px; }
  .steps { grid-template-columns: 1fr; }
  .case-teaser { padding: 24px 20px; }
  .fleet-header, .fleet-grid { padding-left: 20px; padding-right: 20px; }
  .fleet-grid, .results-grid, .fg-row, .prop-cols { grid-template-columns: 1fr; }
  .result-wide { grid-column: auto; }
  .result-item, .result-item:nth-child(n) { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .07); padding: 32px 20px; }
  .result-num { font-size: 44px; }
  .hero-btns { flex-direction: column; align-items: flex-start; }
  #twin-break { min-height: 360px; padding: 0 20px 48px; }
  .twin-content h2 { font-size: 30px; }
  .twin-content p:not(.eyebrow) { font-size: 15px; }
  .t-card { padding: 28px 22px; }
  .site-footer { padding: 36px 20px 24px; }
  .clients-label { margin-bottom: 36px; }
  .clients-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .clients-grid li { min-height: 44px; }
  .client-logo img { zoom: .78; }
  .client-name { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .btn:hover, .btn-blue:hover, .btn-green:hover { transform: none; }
  .vehicle-card:hover .vehicle-img img { transform: none; }
}
@media (forced-colors: active) {
  .btn, .header-cta, .form-submit, .cookie-btn { border: 1px solid ButtonText; }
  .cookie-banner { border-top: 2px solid CanvasText; }
}
.case-teaser .btn { text-align: center; text-wrap: balance; }

/* Client quote moments (home.papa_salt_quote and home.pizzarova_quote). */
.quote-mark { display: block; font: italic 300 clamp(120px, 14vw, 200px)/.7 var(--serif); color: var(--gold); pointer-events: none; user-select: none; }
.quote-text p { font: italic 300 clamp(26px, 3.1vw, 44px)/1.3 var(--serif); color: #fff; letter-spacing: -.005em; text-wrap: pretty; }
.quote-text em { font-style: italic; color: var(--gold-l); }
.quote-cite { display: flex; flex-direction: column; gap: 6px; margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(201, 152, 90, .55); max-width: 420px; }
.quote-cite-name { font: 500 12px/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-l); }
.quote-cite-role { font: italic 400 18px/1.4 var(--serif); color: rgba(245, 240, 232, .86); }

/* Moment 1: full bleed cinematic band, Papa Salt badge. */
.quote-band { position: relative; overflow: hidden; background: var(--green-b); padding: 128px 80px 120px; min-height: 640px; display: flex; align-items: center; }
.quote-band-bg { position: absolute; inset: 0; }
.quote-band-bg picture { position: absolute; inset: 0; }
.quote-band-img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 60%; filter: saturate(.75); transition: transform 2.4s cubic-bezier(.2, .7, .2, 1); }
.quote-band:has(.reveal-armed) .quote-band-img { transform: scale(1.06); }
.quote-band.is-visible .quote-band-img { transform: scale(1); }
.quote-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(8, 15, 10, .97) 0%, rgba(8, 15, 10, .9) 45%, rgba(8, 15, 10, .62) 72%, rgba(8, 15, 10, .42) 100%),
    linear-gradient(to top, rgba(8, 15, 10, .7) 0%, rgba(8, 15, 10, 0) 40%);
}
.quote-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2; background: linear-gradient(to right, transparent, rgba(201, 152, 90, .6), transparent); }
.quote-band-inner { position: relative; z-index: 3; max-width: 820px; }
.quote-badge { display: flex; align-items: center; gap: 18px; margin-bottom: 44px; }
.quote-badge img { width: 190px; height: auto; filter: brightness(0) invert(.95) sepia(.18); opacity: .95; }
.quote-badge-rule { display: block; width: 44px; height: 1px; background: var(--gold); flex-shrink: 0; }
.quote-badge-rule + img + .quote-badge-rule, .quote-badge-text + .quote-badge-rule { width: 120px; background: linear-gradient(to right, var(--gold), transparent); }
.quote-badge-text { font: 500 13px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--gold-l); }
.quote-band .quote-mark { margin: 0 0 -.18em -.06em; }
.quote-band .quote-text p { font-size: clamp(28px, 3.5vw, 50px); }

/* Moment 2: inset card that straddles the fleet and contact sections, Pizzarova badge. */
.quote-inset { position: relative; padding: 24px 80px 0; background: linear-gradient(to bottom, var(--cream) 0%, var(--cream) 46%, var(--green-b) 46%, var(--green-b) 100%); }
.quote-card {
  position: relative; max-width: 1000px; margin: 0 6vw 0 auto;
  background: linear-gradient(150deg, var(--green-m) 0%, var(--green) 55%, var(--green-d) 100%);
  border: 1px solid rgba(201, 152, 90, .4);
  box-shadow: 0 40px 80px -30px rgba(8, 15, 10, .65), 18px 18px 0 -1px rgba(201, 152, 90, .14);
  padding: 72px 80px 64px 96px;
}
.quote-card::before { content: ""; position: absolute; left: 40px; top: 72px; bottom: 64px; width: 1px; background: linear-gradient(to bottom, var(--gold), rgba(201, 152, 90, 0)); }
.quote-card .quote-mark { position: absolute; left: -.08em; top: -.1em; transform: translate(-30%, -28%); font-size: clamp(150px, 16vw, 240px); text-shadow: 0 8px 30px rgba(8, 15, 10, .35); }
.quote-card-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.quote-card-head .eyebrow { margin-bottom: 0; color: var(--gold-l); }
.quote-stamp {
  font: 500 12px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--gold-l);
  padding: 12px 14px 12px 18px; border: 1px solid rgba(212, 170, 110, .7); outline: 1px solid rgba(212, 170, 110, .3); outline-offset: 4px;
}
.quote-card .quote-text p { font-size: clamp(24px, 2.6vw, 38px); }

/* Gentle reveal: armed only by main.js (so content shows without JS) and never with reduced motion. */
.reveal-armed { opacity: 0; transform: translateY(28px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.reveal-armed.is-visible { opacity: 1; transform: none; }
.reveal-armed .quote-mark { opacity: 0; transform: translateY(18px); transition: opacity 1.2s ease .25s, transform 1.2s cubic-bezier(.2, .7, .2, 1) .25s; }
.quote-card.reveal-armed .quote-mark { transform: translate(-30%, -10%); }
.reveal-armed.is-visible .quote-mark { opacity: 1; transform: none; }
.quote-card.reveal-armed.is-visible .quote-mark { transform: translate(-30%, -28%); }
.reveal-armed .quote-cite { opacity: 0; transition: opacity 1s ease .55s; }
.reveal-armed.is-visible .quote-cite { opacity: 1; }

@media (max-width: 860px) {
  .quote-band { padding: 96px 28px 88px; min-height: 0; }
  .quote-band::after { background: linear-gradient(to top, rgba(8, 15, 10, .96) 0%, rgba(8, 15, 10, .86) 60%, rgba(8, 15, 10, .7) 100%); }
  .quote-inset { padding: 16px 28px 0; }
  .quote-card { margin: 0 0 0 auto; padding: 64px 40px 48px 56px; }
  .quote-card::before { left: 24px; }
}
@media (max-width: 600px) {
  .quote-band { padding: 80px 20px 72px; }
  .quote-badge { margin-bottom: 32px; gap: 14px; }
  .quote-badge img { width: 150px; }
  .quote-badge-rule { width: 24px; }
  .quote-badge-rule + img + .quote-badge-rule, .quote-badge-text + .quote-badge-rule { width: 60px; }
  .quote-band .quote-text p { font-size: 27px; line-height: 1.32; }
  .quote-mark { font-size: 110px; }
  .quote-inset { padding: 8px 20px 0; background: linear-gradient(to bottom, var(--cream) 0%, var(--cream) 18%, var(--green-b) 18%, var(--green-b) 100%); }
  .quote-card { margin: 0 0 0 12px; padding: 56px 24px 40px 36px; box-shadow: 0 30px 60px -30px rgba(8, 15, 10, .65), 10px 10px 0 -1px rgba(201, 152, 90, .14); }
  .quote-card::before { left: 16px; top: 56px; bottom: 40px; }
  .quote-card .quote-mark { font-size: 130px; transform: translate(-22%, -30%); }
  .quote-card.reveal-armed.is-visible .quote-mark { transform: translate(-22%, -30%); }
  .quote-card .quote-text p { font-size: 23px; line-height: 1.38; }
  .quote-card-head { margin-bottom: 28px; gap: 16px; }
  .quote-card-head .quote-stamp { order: -1; }
  .quote-cite { margin-top: 28px; }
  .quote-cite-role { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .quote-band-img { transform: none; transition: none; }
}
@media (forced-colors: active) {
  .quote-stamp { border-color: CanvasText; }
}

/* Project spotlight (home.portsmouth_spotlight): an event ticket. Gold framed media on one side,
   a perforated tear line, and the stub with the client stamp and event label on the other. */
.spotlight { --stub-ink: #7a5426; background: var(--cream-d); padding: 112px 80px; }
.spot-ticket {
  position: relative; max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  background: var(--cream);
  border: 1px solid rgba(26, 58, 42, .16);
  box-shadow: 0 40px 70px -40px rgba(8, 15, 10, .45), 0 2px 0 rgba(201, 152, 90, .25);
}
.spot-media { position: relative; padding: 40px; background: var(--green); display: flex; flex-direction: column; justify-content: center; }
.spot-frame { position: relative; padding: 10px; border: 1px solid var(--gold); background: rgba(8, 15, 10, .35); }
.spot-frame::after { content: ""; position: absolute; inset: -7px; border: 1px solid rgba(201, 152, 90, .38); pointer-events: none; }
.spot-frame picture, .spot-frame video { display: block; width: 100%; }
.spot-img, .spot-video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 42% 60%; background: var(--green-b); }
.spot-caption { display: flex; align-items: center; gap: 12px; margin-top: 22px; font: italic 400 17px/1.45 var(--serif); color: rgba(245, 240, 232, .88); }
.spot-caption::before { content: ""; width: 28px; height: 1px; background: var(--gold); flex-shrink: 0; }
/* Portrait (9:16) event film: a tall, phone shaped frame centred in the green half, never taller than
   about 70% of the viewport, with its size reserved up front (aspect ratio plus width/height on the video). */
.spot-frame.is-portrait { width: min(100%, 400px, calc(min(70vh, 740px) * 9 / 16 + 20px)); margin: 0 auto; }
.spot-frame.is-portrait .spot-video { aspect-ratio: 9 / 16; object-fit: cover; object-position: 50% 50%; }
.spot-media-portrait { align-items: center; }
.spot-media-portrait .spot-caption { justify-content: center; text-align: center; max-width: 30em; }
/* Sound toggle on the film: gold ringed, top right, hidden until main.js wires it up. */
.spot-sound {
  position: absolute; top: 22px; right: 22px; z-index: 2;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--gold); border-radius: 50%;
  background: rgba(8, 15, 10, .62); color: var(--cream);
  box-shadow: 0 0 0 4px rgba(201, 152, 90, .22), 0 6px 18px rgba(8, 15, 10, .35);
  cursor: pointer; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.spot-sound[hidden] { display: none; }
.spot-sound:hover { background: var(--gold); color: var(--green); }
.spot-sound:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 4px; }
.spot-sound[aria-pressed="true"] { background: var(--gold); color: var(--green); box-shadow: 0 0 0 4px rgba(201, 152, 90, .35), 0 6px 18px rgba(8, 15, 10, .35); }
.spot-sound .spot-sound-on, .spot-sound[aria-pressed="true"] .spot-sound-off { display: none; }
.spot-sound[aria-pressed="true"] .spot-sound-on { display: block; }

.spot-copy { position: relative; padding: 56px 56px 52px; border-left: 2px dashed rgba(26, 58, 42, .28); }
/* Ticket notches where the tear line meets the edges. */
.spot-copy::before, .spot-copy::after { content: ""; position: absolute; left: -15px; width: 28px; height: 28px; border-radius: 50%; background: var(--cream-d); box-shadow: inset 0 0 0 1px rgba(26, 58, 42, .16); }
.spot-copy::before { top: -15px; }
.spot-copy::after { bottom: -15px; }
.spot-tags { display: flex; align-items: center; justify-content: space-between; gap: 16px 20px; flex-wrap: wrap; margin-bottom: 36px; }
.spot-stamp {
  display: inline-block; transform: rotate(-3deg);
  font: 600 12px/1.25 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--stub-ink);
  padding: 11px 14px 11px 17px; border: 2px solid var(--stub-ink); outline: 1px solid rgba(122, 84, 38, .4); outline-offset: 3px; border-radius: 3px;
}
.spot-event { font: 500 11px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--green); padding: 7px 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.spot-copy .eyebrow { margin-bottom: 16px; }
.spot-h { font-size: clamp(36px, 4vw, 58px); font-weight: 300; color: var(--green); line-height: 1.04; margin-bottom: 24px; }
.spot-h em { font-style: italic; color: var(--stub-ink); }
.spot-lead { font: italic 300 clamp(20px, 1.9vw, 25px)/1.45 var(--serif); color: var(--green); margin-bottom: 16px; text-wrap: pretty; }
.spot-text { font-size: 16px; line-height: 1.8; color: #2a2a2a; margin-bottom: 28px; }
.spot-text strong { font-weight: 500; color: var(--green); }
.spot-details { display: grid; gap: 0; margin-bottom: 36px; border-top: 1px solid rgba(26, 58, 42, .18); }
.spot-details div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(26, 58, 42, .18); }
.spot-details dt { font: 500 11px/1.9 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--stub-ink); }
.spot-details dd { font: 400 19px/1.4 var(--serif); color: var(--green); }
/* Quote slot (shown only once home.portsmouth_spotlight.quote and quote_attribution are filled in). */
.spot-quote { position: relative; margin: 0 0 36px; padding: 8px 0 0 28px; border-left: 1px solid var(--gold); }
.spot-quote .quote-mark { position: absolute; left: 8px; top: -6px; font-size: 96px; }
.spot-quote .quote-text p { font-size: clamp(22px, 2vw, 28px); color: var(--green); padding-top: 26px; }
.spot-quote .quote-text em { color: var(--stub-ink); }
.spot-quote .quote-cite { margin-top: 18px; padding-top: 14px; }
.spot-quote .quote-cite-name { color: var(--stub-ink); }
.home #portsmouth-spotlight .spot-copy :focus-visible { outline-color: #0052a3; }
.spot-ticket.reveal-armed .spot-stamp { opacity: 0; transform: rotate(-12deg) scale(1.25); transition: opacity .6s ease .45s, transform .6s cubic-bezier(.3, 1.6, .5, 1) .45s; }
.spot-ticket.reveal-armed.is-visible .spot-stamp { opacity: 1; transform: rotate(-3deg); }
.md-programme.reveal-armed .spot-stamp { opacity: 0; transform: rotate(-12deg) scale(1.25); transition: opacity .6s ease .45s, transform .6s cubic-bezier(.3, 1.6, .5, 1) .45s; }
.md-programme.reveal-armed.is-visible .spot-stamp { opacity: 1; transform: rotate(-3deg); }

@media (max-width: 1100px) {
  .spot-media { padding: 32px; }
  .spot-copy { padding: 48px 40px 44px; }
}
@media (max-width: 900px) {
  .spotlight { padding: 80px 28px; }
  .spot-ticket { grid-template-columns: 1fr; }
  .spot-img, .spot-video { aspect-ratio: 16 / 10; }
  .spot-copy { border-left: 0; border-top: 2px dashed rgba(26, 58, 42, .28); }
  .spot-copy::before, .spot-copy::after { top: -15px; bottom: auto; }
  .spot-copy::before { left: -15px; }
  .spot-copy::after { left: auto; right: -15px; }
}
@media (max-width: 600px) {
  .spotlight { padding: 64px 20px; }
  .spot-media { padding: 20px 20px 24px; }
  .spot-frame { padding: 7px; }
  .spot-frame::after { inset: -5px; }
  .spot-frame.is-portrait { width: min(100%, 360px, calc(70vh * 9 / 16 + 14px)); }
  .spot-sound { top: 17px; right: 17px; }
  .spot-caption { font-size: 16px; margin-top: 18px; }
  .spot-copy { padding: 40px 24px 36px; }
  .spot-tags { margin-bottom: 28px; }
  .spot-stamp { font-size: 11px; letter-spacing: .22em; padding: 10px 12px 10px 14px; }
  .spot-h { font-size: 38px; }
  .spot-lead { font-size: 21px; }
  .spot-text { font-size: 15px; }
  .spot-details div { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
  .spot-details dd { font-size: 18px; }
  .spot-ticket .btn { display: block; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .spot-ticket .spot-stamp { transition: none; }
  .spot-sound { transition: none; }
}
@media (forced-colors: active) {
  .spot-stamp, .spot-frame { border-color: CanvasText; }
  .spot-sound { border-color: ButtonText; forced-color-adjust: auto; }
  .spot-copy { border-color: CanvasText; }
}

/* Campaign spotlight (home.gillette_tour): a match day programme on a mown pitch. A cream programme card:
   the story and call to action beside a green panel with the silent film, then the grounds visited as a
   fixture board, and a strip of stills along the foot. Shares the ticket stamp and gold film frame with the
   Portsmouth spotlight so the two campaign stories read as a pair. */
.matchday {
  --stub-ink: #7a5426;
  padding: 112px 80px;
  background: var(--green) repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 90px, rgba(0, 0, 0, .05) 90px 180px);
  border-top: 1px solid rgba(201, 152, 90, .25);
}
.md-programme {
  position: relative; max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  grid-template-areas: "copy side" "cta side" "fix fix" "stills stills";
  grid-template-rows: 1fr auto auto auto;
  background: var(--cream);
  outline: 1px solid var(--gold); outline-offset: 8px;
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .6);
}
/* Scarf stripe along the top of the programme. */
.md-programme::before {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 10px;
  background: repeating-linear-gradient(90deg, var(--green) 0 26px, var(--gold) 26px 34px, var(--cream) 34px 44px, var(--gold) 44px 52px);
}
.md-copy { grid-area: copy; padding: 64px 56px 8px; }
.md-tags { margin-bottom: 34px; }
.md-copy .eyebrow { margin-bottom: 16px; }
.md-h { font-size: clamp(36px, 4vw, 58px); font-weight: 300; color: var(--green); line-height: 1.04; margin-bottom: 24px; text-wrap: balance; }
.md-h em { font-style: italic; color: var(--stub-ink); }
.md-lead { font: italic 300 clamp(20px, 1.9vw, 25px)/1.45 var(--serif); color: var(--green); margin-bottom: 16px; text-wrap: pretty; }
.md-text { font-size: 16px; line-height: 1.8; color: #2a2a2a; text-wrap: pretty; }
.md-text strong { font-weight: 500; color: var(--green); }
.md-cta { grid-area: cta; padding: 28px 56px 56px; }
.home #gillette-tour .md-cta :focus-visible { outline-color: #0052a3; }

.md-side { grid-area: side; display: flex; flex-direction: column; justify-content: center; padding: 56px 44px 44px; background: var(--green); }
.md-media { margin: 0; }
.md-frame .md-video { display: block; width: 100%; height: auto; aspect-ratio: 53 / 30; object-fit: cover; background: var(--green-b); }
.md-caption { margin-top: 20px; }

/* The grounds visited, set out like the fixtures page of a match day programme. */
.md-fixtures { grid-area: fix; padding: 40px 56px 36px; background: var(--green-d); color: var(--cream); border-top: 1px solid rgba(201, 152, 90, .45); }
.md-fixtures-h { display: flex; align-items: center; gap: 14px; font: 500 11px/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-l); margin-bottom: 10px; }
.md-fixtures-h::after { content: ""; flex: 1; height: 1px; background: rgba(201, 152, 90, .45); }
.md-fixture-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
.md-fixture {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); align-content: start; column-gap: 12px;
  padding: 16px 0 14px; border-bottom: 1px dotted rgba(201, 152, 90, .4);
}
.md-fixture-num { font: 500 12px/1.9 var(--sans); letter-spacing: .12em; color: var(--gold); }
.md-fixture-club { font: 400 24px/1.2 var(--serif); color: #fff; }
.md-fixture-ground { display: block; font: 400 11px/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(245, 240, 232, .72); margin-top: 3px; }
.md-fixture-note { grid-column: 2; margin-top: 4px; font: italic 400 16px/1.35 var(--serif); color: var(--gold-l); }
.md-fixtures-more { margin-top: 18px; font: italic 400 18px/1.4 var(--serif); color: rgba(245, 240, 232, .88); }

.md-stills { grid-area: stills; list-style: none; margin: 0; padding: 30px 32px 34px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; background: var(--cream-d); }
.md-still { padding: 6px; background: #fff; box-shadow: 0 10px 22px -14px rgba(8, 15, 10, .55); }
.md-still:nth-child(odd) { transform: rotate(-1.2deg); }
.md-still:nth-child(even) { transform: rotate(1deg); }
.md-still picture, .md-still img { display: block; width: 100%; height: auto; aspect-ratio: 53 / 30; object-fit: cover; }

@media (max-width: 1100px) {
  .md-copy { padding: 56px 40px 8px; }
  .md-cta { padding: 24px 40px 48px; }
  .md-side { padding: 40px 32px 36px; }
  .md-fixtures { padding: 36px 40px 32px; }
  .md-fixture-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .matchday { padding: 80px 28px; }
  .md-programme { grid-template-columns: 1fr; grid-template-areas: "copy" "side" "fix" "stills" "cta"; grid-template-rows: none; }
  .md-copy { padding-bottom: 44px; }
  .md-cta { padding: 8px 40px 44px; background: var(--cream-d); }
  .md-stills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .matchday { padding: 64px 16px; }
  .md-programme { outline-offset: 5px; }
  .md-copy { padding: 44px 22px 36px; }
  .md-h { font-size: 38px; }
  .md-lead { font-size: 21px; }
  .md-text { font-size: 15px; }
  .md-side { padding: 22px 16px 24px; }
  .md-caption { font-size: 16px; margin-top: 16px; }
  .md-fixtures { padding: 30px 22px 26px; }
  .md-fixture-list { grid-template-columns: 1fr; }
  .md-fixture { padding: 12px 0 11px; }
  .md-fixture-club { font-size: 21px; }
  .md-stills { padding: 20px 16px 20px; gap: 12px; }
  .md-still { padding: 4px; }
  .md-cta { padding: 6px 22px 30px; }
  .md-cta .btn { display: flex; justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .md-programme .spot-stamp { transition: none; }
}
@media (forced-colors: active) {
  .md-programme { outline-color: CanvasText; }
  .md-fixtures { border-color: CanvasText; }
}

/* Summer montage (home.summer_montage): a holiday scrapbook just before the fleet. Copy and the day out
   tags on the left, the silent square film in the shared gold frame on a green mount on the right, and a
   row of snapshots underneath that takes up to six photos. Sits on warm cream so it bridges the green
   sustainability band and the cream fleet section, and stays well away from the two campaign stories. */
.summer {
  --stub-ink: #7a5426;
  padding: 112px 80px 104px;
  background:
    radial-gradient(circle at 88% 8%, rgba(212, 170, 110, .30), rgba(212, 170, 110, 0) 42%),
    var(--cream-d);
  border-bottom: 1px solid rgba(26, 58, 42, .12);
}
.sm-reel {
  position: relative; max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); column-gap: 72px;
  grid-template-areas: "copy side" "stills stills";
  align-items: center;
}
.sm-copy { grid-area: copy; min-width: 0; }
.sm-tags { margin-bottom: 30px; }
.sm-copy .eyebrow { margin-bottom: 16px; }
.sm-h { font-size: clamp(38px, 4.4vw, 62px); font-weight: 300; color: var(--green); line-height: 1.04; margin-bottom: 24px; text-wrap: balance; }
.sm-h em { font-style: italic; color: var(--stub-ink); }
.sm-lead { font: italic 300 clamp(20px, 1.9vw, 25px)/1.45 var(--serif); color: var(--green); margin-bottom: 16px; text-wrap: pretty; }
.sm-text { font-size: 16px; line-height: 1.8; color: #2a2a2a; text-wrap: pretty; }
.sm-text strong { font-weight: 500; color: var(--green); }
/* Day out tags: little luggage labels, wrapping onto as many lines as they need. */
.sm-days { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.sm-day {
  position: relative; padding: 8px 14px 8px 26px;
  font: 500 11px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--green);
  background: var(--cream); border: 1px solid rgba(201, 152, 90, .7); border-radius: 3px;
}
.sm-day::before { content: ""; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; border: 1px solid var(--gold); background: var(--cream-d); }
.sm-cta { margin-top: 36px; }
.home #summer-montage .sm-copy :focus-visible { outline-color: #0052a3; }

.sm-side { grid-area: side; min-width: 0; padding: 36px 36px 30px; background: var(--green); box-shadow: 0 40px 70px -40px rgba(8, 15, 10, .55); transform: rotate(1deg); }
.sm-media { margin: 0; }
.sm-frame .sm-video { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: var(--green-b); }
.sm-caption { margin-top: 20px; }

/* Snapshots: one row on desktop whatever the count (up to six), two columns on phones. */
.sm-stills { grid-area: stills; list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; }
.sm-still { padding: 7px 7px 22px; background: #fff; box-shadow: 0 12px 24px -14px rgba(8, 15, 10, .55); }
.sm-still:nth-child(odd) { transform: rotate(-1.4deg); }
.sm-still:nth-child(even) { transform: rotate(1.1deg) translateY(10px); }
.sm-still picture, .sm-still img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.sm-reel.reveal-armed .spot-stamp { opacity: 0; transform: rotate(-12deg) scale(1.25); transition: opacity .6s ease .45s, transform .6s cubic-bezier(.3, 1.6, .5, 1) .45s; }
.sm-reel.reveal-armed.is-visible .spot-stamp { opacity: 1; transform: rotate(-3deg); }

@media (max-width: 1100px) {
  .summer { padding: 96px 48px 88px; }
  .sm-reel { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); column-gap: 48px; }
  .sm-side { padding: 28px 28px 24px; }
  .sm-stills { gap: 16px; }
}
@media (max-width: 900px) {
  .summer { padding: 80px 28px 72px; }
  .sm-reel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "side" "stills"; row-gap: 48px; }
  .sm-side { width: min(100%, 560px); justify-self: center; transform: none; }
  .sm-stills { margin-top: 8px; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .sm-still:nth-child(even) { transform: rotate(1.1deg); }
}
@media (max-width: 600px) {
  .summer { padding: 64px 20px 60px; }
  .sm-tags { margin-bottom: 26px; }
  .sm-h { font-size: 40px; }
  .sm-lead { font-size: 21px; }
  .sm-text { font-size: 15px; }
  .sm-days { gap: 8px; }
  .sm-day { font-size: 10px; letter-spacing: .14em; }
  .sm-cta .btn { display: flex; justify-content: center; text-align: center; }
  .sm-side { padding: 16px 16px 18px; }
  .sm-caption { font-size: 16px; margin-top: 16px; }
  .sm-stills { gap: 14px; }
  .sm-still { padding: 5px 5px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .sm-reel .spot-stamp { transition: none; }
}
@media (forced-colors: active) {
  .sm-day, .sm-side { border: 1px solid CanvasText; }
}

/* Festival film (home.boomtown_protectors): a night at the festival. Deep green with a string of bunting
   along the top, the story on the left and the upright film on the right in a slightly tilted green panel,
   with the same gold frame and gold sound button as the Portsmouth film. Stacks copy then film on phones. */
.festival {
  --stub-ink: var(--gold-l);
  position: relative; overflow: hidden;
  padding: 128px 80px 112px;
  background:
    radial-gradient(circle at 82% 30%, rgba(201, 152, 90, .16), rgba(201, 152, 90, 0) 46%),
    var(--green-d);
  border-bottom: 1px solid rgba(201, 152, 90, .3);
}
/* Bunting: three colours of downward pennants on a gold string, drawn with gradients (no image request). */
.festival::before {
  content: ""; position: absolute; top: 18px; left: 0; right: 0; height: 30px; pointer-events: none;
  background:
    linear-gradient(rgba(201, 152, 90, .7), rgba(201, 152, 90, .7)) 0 0 / 100% 1px no-repeat,
    conic-gradient(from -28deg at 18px 100%, var(--gold) 56deg, transparent 0) 0 1px / 108px 29px repeat-x,
    conic-gradient(from -28deg at 18px 100%, #b4553d 56deg, transparent 0) 36px 1px / 108px 29px repeat-x,
    conic-gradient(from -28deg at 18px 100%, var(--cream) 56deg, transparent 0) 72px 1px / 108px 29px repeat-x;
  opacity: .9;
}
.fe-poster {
  position: relative; max-width: 1160px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 88px; align-items: center;
}
.fe-copy { min-width: 0; max-width: 560px; }
.fe-tags { margin-bottom: 30px; }
.fe-stamp { outline-color: rgba(212, 170, 110, .45); }
.fe-copy .eyebrow { margin-bottom: 16px; }
.fe-h { font-size: clamp(38px, 4.4vw, 62px); font-weight: 300; color: #fff; line-height: 1.04; margin-bottom: 24px; text-wrap: balance; }
.fe-h em { font-style: italic; color: var(--gold); }
.fe-lead { font: italic 300 clamp(20px, 1.9vw, 25px)/1.45 var(--serif); color: var(--cream); margin-bottom: 16px; text-wrap: pretty; }
.fe-text { font-size: 16px; line-height: 1.8; color: var(--muted); text-wrap: pretty; }
.fe-text strong { font-weight: 500; color: var(--gold-l); }
.fe-cta { margin-top: 36px; }

.fe-media {
  margin: 0; padding: 30px 30px 26px; background: var(--green);
  border: 1px solid rgba(201, 152, 90, .22);
  box-shadow: 0 40px 70px -36px rgba(0, 0, 0, .7); transform: rotate(-1.2deg);
}
/* Upright 480x848 film: never wider than its own pixels, never taller than about 72% of the viewport. */
.fe-frame { width: min(400px, calc(min(72vh, 760px) * 480 / 848 + 20px)); margin: 0 auto; }
.fe-frame .fe-video { display: block; width: 100%; height: auto; aspect-ratio: 480 / 848; object-fit: cover; background: var(--green-b); }
.fe-caption { justify-content: center; text-align: center; margin-top: 20px; max-width: 22em; margin-left: auto; margin-right: auto; }
.fe-poster.reveal-armed .spot-stamp { opacity: 0; transform: rotate(-12deg) scale(1.25); transition: opacity .6s ease .45s, transform .6s cubic-bezier(.3, 1.6, .5, 1) .45s; }
.fe-poster.reveal-armed.is-visible .spot-stamp { opacity: 1; transform: rotate(-3deg); }

@media (max-width: 1100px) {
  .festival { padding: 112px 48px 96px; }
  .fe-poster { column-gap: 56px; }
  .fe-media { padding: 24px 24px 22px; }
  .fe-frame { width: min(340px, calc(min(70vh, 700px) * 480 / 848 + 20px)); }
}
@media (max-width: 900px) {
  .festival { padding: 104px 28px 80px; }
  .fe-poster { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .fe-copy { max-width: none; }
  .fe-media { justify-self: center; max-width: 100%; transform: none; }
}
@media (max-width: 600px) {
  .festival { padding: 88px 20px 64px; }
  .festival::before { top: 14px; }
  .fe-tags { margin-bottom: 26px; }
  .fe-h { font-size: 40px; }
  .fe-lead { font-size: 21px; }
  .fe-text { font-size: 15px; }
  .fe-cta .btn { display: flex; justify-content: center; text-align: center; }
  .fe-media { padding: 16px 16px 18px; }
  .fe-frame { width: min(100%, 320px, calc(70vh * 480 / 848 + 14px)); }
  .fe-caption { font-size: 16px; margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .fe-poster .spot-stamp { transition: none; }
}
@media (forced-colors: active) {
  .fe-media { border-color: CanvasText; }
  .festival::before { display: none; }
}