/* Inside the everyday: one day, five moments. Prototype styles, fifth pass.
   World: material samples on a light table. A quiet neutral page; colour arrives
   as a soft glow of each moment's hue and in the photographs, never as a flood.
   The header is a white floating bar so the logo always sits on white.
   Layers:
   1. Base rules: a complete page at every size; moments flow as picture-and-text pairs.
   2. html.live (wide, tall screens, set by the script): each moment is held on screen
      and its three steps change in place, driven by a segmented control.          */

@font-face { font-family: "Bricolage Grotesque"; src: url("vendor/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../assets/homepage-v2/manrope-variable.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }

:root {
  --paper: #f3f3f6; --card: #ffffff; --ink: #14131c; --soft: #55536a; --line: #dedde6;
  --purple: #5b35d5; --orange: #ff6a1a; --night: #15102e;
  --accent: #2d2277;   /* filled buttons and the selected tab: the indigo of the logo, in place of black */
  --hue: #6f8cff;                 /* the hue of the moment in view; the script blends it */
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem; --s6: 6rem; --s7: 8rem;
  --gutter: max(clamp(1.25rem, 4vw, 4.5rem), calc((100vw - 104rem) / 2));
  --bar-h: 3.75rem; --bar-top: 1rem; --clear: calc(var(--bar-h) + var(--bar-top) + var(--s3));
  --r-lg: 2rem; --r-md: 1.25rem;
  --display: "Manrope", system-ui, sans-serif;   /* headings share the text face (owner, 13 Nov 2026); Bricolage Grotesque is no longer used */
  --text: "Manrope", system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --lift: 0 1.75rem 3.5rem -1.75rem rgba(20, 19, 28, .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--purple) var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--text); font-size: 1.0625rem; font-weight: 500; line-height: 1.55; overflow-x: hidden; }
/* the glow of the current hue, behind everything */
body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(70px); }
/* the hue of the section in view, upper right */
body::before { width: 62vw; height: 62vw; right: -14vw; top: -12vw; background: radial-gradient(closest-side, color-mix(in srgb, var(--hue) 72%, transparent), transparent); animation: floatA 26s ease-in-out infinite alternate; }
/* a second, warmer light drifting low on the left */
body::after { width: 48vw; height: 48vw; left: -12vw; bottom: -16vw; background: radial-gradient(closest-side, color-mix(in srgb, var(--hue) 40%, #ff8a4a 26%), transparent); opacity: .7; animation: floatB 32s ease-in-out infinite alternate; }
@keyframes floatA { to { transform: translate(-9vw, 12vh) scale(1.12); } }
@keyframes floatB { to { transform: translate(12vw, -14vh) scale(1.18); } }
::selection { background: var(--purple); color: #fff; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.035em; text-wrap: balance; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: .5rem; }

.skip { position: fixed; left: var(--s2); top: -5rem; z-index: 60; background: var(--accent); color: #fff; padding: .7rem 1.1rem; border-radius: 999px; }
.skip:focus { top: var(--s2); }

/* ---------- shared pieces ---------- */
.arrow { flex: none; transition: transform .35s var(--ease); }
/* a pill button with its arrow in a circle */
.bar__cta, .go { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; font-weight: 700; font-size: .95rem; white-space: nowrap; background: var(--accent); color: #fff; padding: .45rem .5rem .45rem 1.2rem; border-radius: 999px; transition: background .25s; }
.bar__cta .arrow, .go .arrow { width: 2.1rem; height: 2.1rem; padding: .5rem; border-radius: 50%; background: #fff; color: var(--ink); }
.bar__cta:hover, .go:hover { background: var(--purple); }
/* the header button is the page's main action: brand orange, dark text for contrast */
.bar > .bar__cta { background: var(--orange); color: #1d0b02; box-shadow: 0 .6rem 1.4rem -.7rem rgba(255, 106, 26, .9); }
.bar > .bar__cta .arrow { background: #1d0b02; color: #fff; }
.bar > .bar__cta:hover { background: #ff8438; }
.ext { flex: none; }

.bar__cta:hover .arrow, .go:hover .arrow { transform: translateX(.2rem) rotate(-45deg); }
/* a small white label that sits on a picture */
.tag { display: inline-flex; align-items: center; gap: .5rem; background: #fff; color: var(--ink); font-weight: 700; font-size: .88rem; line-height: 1.2; padding: .5rem .85rem; border-radius: 999px; box-shadow: 0 .4rem 1rem -.4rem rgba(20, 19, 28, .35); }
.tag b { font-weight: 800; color: var(--purple); }
.tag--biz::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--hue); flex: none; }

/* ---------- floating header: always white, so the logo is always clear ---------- */
.bar { position: fixed; z-index: 40; top: var(--bar-top); left: var(--gutter); right: var(--gutter); height: var(--bar-h); display: flex; align-items: center; gap: var(--s4); padding: 0 .55rem 0 1.1rem; background: #fff; border-radius: 999px; box-shadow: 0 .75rem 2rem -1rem rgba(20, 19, 28, .3), 0 0 0 1px rgba(20, 19, 28, .05); }
.bar__brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.08rem; letter-spacing: -.015em; white-space: nowrap; color: var(--ink); }
.bar__brand img { width: 2.1rem; height: 2.1rem; object-fit: contain; }
.bar__nav { margin-left: auto; display: flex; gap: var(--s1); }
.bar__nav a { text-decoration: none; font-weight: 700; font-size: .93rem; white-space: nowrap; padding: .55rem .95rem; border-radius: 999px; transition: background .2s; }
.bar__nav a:hover { background: var(--paper); }

/* ---------- icons: one drawn set, one weight ---------- */
.ico { width: 1.3em; height: 1.3em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.badge { display: grid; place-items: center; width: 1.08em; height: 1.08em; flex: none; border-radius: .3em; background: color-mix(in srgb, var(--hue) 34%, #fff); color: var(--ink); }
.badge .ico { width: .58em; height: .58em; stroke-width: 2.1; }

/* ---------- hero: one film that tells the whole story ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero { padding: var(--clear) var(--gutter) var(--gutter); }
.film { position: relative; isolation: isolate; display: grid; grid-template-rows: 1fr auto; align-items: end; height: calc(100svh - var(--clear) - var(--gutter)); min-height: 32rem; border-radius: var(--r-lg); overflow: hidden; background: var(--night) url("media/hero-poster.webp") center / cover; color: #fff; box-shadow: var(--lift); }
.film__v { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* shade at the foot of the picture only, so the words stay readable over moving footage */
.film::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(21, 16, 46, .28) 0%, rgba(21, 16, 46, 0) 26%, rgba(21, 16, 46, .2) 48%, rgba(21, 16, 46, .82) 100%); }
.film__body { padding: var(--s5) clamp(1.5rem, 4vw, 4rem) var(--s4); max-width: 64rem; }
.hero__title { font-size: clamp(3rem, 7.6vw, 7.6rem); font-weight: 800; line-height: .92; letter-spacing: -.04em; color: #fff; }
.hero__lede { margin-top: var(--s3); max-width: 38rem; font-size: clamp(1.05rem, 1.35vw, 1.3rem); font-weight: 600; line-height: 1.5; color: #f1ecff; }
.hero__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s4); }
.hero__acts .bar__cta { background: var(--orange); color: #1d0b02; font-size: 1.02rem; padding: .55rem .6rem .55rem 1.4rem; }
.hero__acts .bar__cta .arrow { background: #1d0b02; color: #fff; width: 2.4rem; height: 2.4rem; padding: .6rem; }
.hero__acts .bar__cta:hover { background: #ff8438; }
.ghost { display: inline-flex; align-items: center; font-weight: 700; text-decoration: none; color: #fff; padding: .95rem 1.4rem; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); transition: background .25s, color .25s; }
.ghost:hover { background: #fff; color: var(--ink); }
.film__toggle { position: absolute; right: 1.25rem; top: 1.25rem; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(21, 16, 46, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); transition: background .25s; }
.film__toggle:hover { background: rgba(21, 16, 46, .75); }
.film__toggle[hidden] { display: none; }
/* the five businesses, along the foot of the film */
.film__nav { display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(21, 16, 46, .42); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
.film__nav li + li { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .16); }
.film__nav a { display: flex; align-items: center; gap: .7rem; height: 100%; padding: 1.15rem clamp(.8rem, 1.6vw, 1.5rem); text-decoration: none; font-weight: 700; font-size: clamp(.86rem, 1vw, 1rem); line-height: 1.25; transition: background .25s; }
.film__nav a:hover { background: rgba(255, 255, 255, .16); }
.film__nav .ico { width: 1.5rem; height: 1.5rem; color: #ffb27a; }

/* ---------- a moment: base layout. Three picture-and-text pairs that flow ---------- */
.moment { padding: var(--s6) var(--gutter); background: color-mix(in srgb, var(--hue) 13%, var(--paper)); }
.moment__stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.reel, .moment__text, .steps { display: contents; }
.tag--biz { grid-column: 1 / -1; order: 0; justify-self: start; }
.moment__title { grid-column: 1 / -1; order: 0; display: flex; align-items: flex-start; gap: .32em; font-size: clamp(2.3rem, 4.6vw, 4.4rem); line-height: 1; margin-bottom: var(--s1); }
/* what the business is, and who it supplies */
.moment__sum { grid-column: 1 / -1; order: 0; max-width: 34rem; font-size: clamp(1.1rem, 1.45vw, 1.4rem); font-weight: 600; line-height: 1.4; }
.serves { grid-column: 1 / -1; order: 0; display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: var(--s3); }
.serves li { font-size: .9rem; font-weight: 700; line-height: 1.2; padding: .5rem .85rem; border-radius: 999px; background: color-mix(in srgb, var(--hue) 22%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue) 45%, transparent); }
/* the everyday moment that leads into the business */
.moment__scene { grid-column: 1 / -1; order: 1; font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 2.1vw, 2rem); letter-spacing: -.025em; line-height: 1.1; color: var(--purple); margin-bottom: var(--s2); }
.reel__f { order: 2; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 80% 50%; border-radius: var(--r-md); box-shadow: var(--lift); }
.reel__head, .track { display: none; }
.step { order: 3; font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.5; }
.step::before { display: block; font-weight: 800; font-size: .88rem; margin-bottom: var(--s1); color: var(--purple); white-space: pre; }
.step:nth-child(1)::before { content: "1  In everyday life"; }
.step:nth-child(2)::before { content: "2  How it was made"; }
/* trading: we source it, we do not make it */
html:not(.live) #m-truck .step:nth-child(2)::before { content: "2  Where it came from"; }
.step:nth-child(3)::before { content: "3  What we do"; }
/* "Our part": its sentence sits in the third column; products then run the full width below */
.step--origin { display: contents; }
/* its own numbered label would float loose once the box is dissolved; the first paragraph carries it */
.step.step--origin::before { content: none; }
.step--origin > p { order: 3; font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.5; }
.step--origin > p::before { content: "3  What we do"; display: block; font-weight: 800; font-size: .88rem; margin-bottom: var(--s1); color: var(--purple); white-space: pre; }
.step--origin > .pack, .step--origin > .brandmark { order: 4; grid-column: 1; justify-self: start; align-self: center; float: none; margin: 0; }
.step--origin > .brandmark:has(+ .pack) { grid-column: 1 / -1; }
.step--origin > .chips { order: 4; grid-column: 1 / -1; align-self: center; }
.step--origin > .pack + .chips, .step--origin > .brandmark + .chips { grid-column: 2 / -1; }
.step--origin > .go { order: 5; grid-column: 1 / -1; justify-self: start; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chips li { display: inline-flex; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 700; line-height: 1.2; padding: .6rem .9rem; border-radius: .8rem; background: #fff; box-shadow: 0 .6rem 1.2rem -.7rem rgba(20, 19, 28, .4); }
.chips li::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--hue); flex: none; }
.brandmark { height: 2.9rem; width: auto; background: #fff; padding: .6rem 1rem; border-radius: .9rem; box-shadow: 0 .4rem 1rem -.5rem rgba(20, 19, 28, .3); }
.pack { height: 9rem; width: auto; object-fit: contain; float: right; margin: 0 0 var(--s1) var(--s2); filter: drop-shadow(0 .8rem 1rem rgba(20, 19, 28, .25)); }

/* ---------- a moment: held on screen (wide, tall screens only) ---------- */
html.live .moment { padding: 0; background: none; }
html.live .moment__stage { height: 100svh; grid-template-columns: minmax(22rem, 5fr) 7fr; gap: clamp(1.5rem, 3.5vw, 4rem); padding: var(--clear) var(--gutter) var(--gutter); }
html.live .moment__text { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; min-width: 0; }
html.live .moment__text > * { order: 0; }
html.live .moment__title { margin: 0; font-size: clamp(2.2rem, 3.5vw, 3.7rem); }
html.live .moment__sum { font-size: clamp(1.02rem, 1.25vw, 1.22rem); }
html.live .moment__sum { margin-top: var(--s3); }
html.live .serves { margin: var(--s3) 0 0; }
/* the story sits in its own panel, so the column reads as heading, summary, story, steps */
html.live .moment__scene { margin: auto 0 0; padding: var(--s3) var(--s3) 0; background: #fff; border-radius: var(--r-md) var(--r-md) 0 0; font-size: clamp(1.5rem, 2.2vw, 2.1rem); }
html.live .steps { padding: var(--s1) var(--s3) var(--s3); background: #fff; border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: 0 1.2rem 2.4rem -1.6rem rgba(20, 19, 28, .35); }
html.live .steps { display: grid; min-height: clamp(8rem, 20vh, 12rem); align-content: start; }
html.live .step { grid-area: 1 / 1; opacity: 0; visibility: hidden; font-size: clamp(1.1rem, 1.35vw, 1.3rem); }
html.live .step::before { content: none; }
html.live .step--origin { display: block; }
html.live .step--origin > p { font-size: inherit; }
html.live .step--origin > p::before { content: none; }
html.live .step--origin > * + * { margin-top: var(--s2); }
html.live .step:first-child { opacity: 1; visibility: visible; }
html.live .reel { grid-column: 2; grid-row: 1; position: relative; display: block; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--lift); }
html.live .reel__f { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; object-position: 82% 50%; will-change: clip-path, transform; }
html.live .reel__f + .reel__f { clip-path: inset(0 0 0 100%); }
html.live .tag--biz { position: absolute; z-index: 3; left: 1.25rem; top: 1.25rem; font-size: .95rem; padding: .6rem 1rem; }
html.live .reel__head { display: block; position: absolute; z-index: 2; top: 0; bottom: 0; left: 100%; width: 5px; margin-left: -2px; background: var(--orange); opacity: 0; }
/* at "Our part" the product takes centre stage on the picture, with its range in tidy rows beneath */
html.live .board { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
html.live .board::before { content: ""; position: absolute; left: 50%; top: 40%; width: 70%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); opacity: var(--glow, 0); }
html.live .board .brandmark { position: absolute; right: 1.5rem; top: 1.5rem; height: 3.6rem; padding: .75rem 1.2rem; border-radius: 1rem; }
html.live .board .chips li { font-size: clamp(.9rem, 1.05vw, 1.05rem); padding: .7rem 1.05rem; border-radius: .9rem; box-shadow: 0 .9rem 1.6rem -.9rem rgba(20, 19, 28, .6); transition: translate .35s var(--ease); }
html.live .board .chips li:hover { translate: 0 -.3rem; }
/* segmented control: shows the step in view, and each segment jumps to its step */
html.live .track { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; margin-top: var(--s3); padding: .3rem; background: #fff; border-radius: 999px; box-shadow: 0 .6rem 1.5rem -.9rem rgba(20, 19, 28, .35), 0 0 0 1px rgba(20, 19, 28, .05); }
html.live .track button { display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; padding: .65rem .4rem; border-radius: 999px; font-weight: 700; font-size: .86rem; white-space: nowrap; color: var(--soft); transition: background .3s, color .3s; }
html.live .track button:hover { color: var(--ink); background: var(--paper); }
html.live .track li.on button { background: var(--accent); color: #fff; }

/* ---------- it all leads back to one place ---------- */
.night { background: var(--night); color: #f6f3ff; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: var(--gutter) var(--gutter) var(--s6); }
.night__photo { height: min(70svh, 46rem); border-radius: calc(var(--r-lg) - .5rem); overflow: hidden; }
.night__photo img { width: 100%; height: 100%; object-fit: cover; }
.night__text { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s3) var(--s5); align-items: end; margin-top: var(--s5); }
.night__text h2 { font-size: clamp(2.4rem, 5.6vw, 5.4rem); line-height: .98; grid-row: span 2; }
.night__text p { font-size: clamp(1.05rem, 1.3vw, 1.25rem); color: #cfc8ee; }
.night__where { display: flex; align-items: center; gap: .45rem; font-weight: 800; color: #fff !important; }
.night__where .ico { color: #ffb27a; }
.night__sign { font-family: var(--display); font-weight: 700; }
.tally { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: var(--s5); border-top: 1px solid rgba(246, 243, 255, .2); }
.tally div { display: flex; flex-direction: column-reverse; gap: var(--s1); padding: var(--s3) var(--s3) 0 0; }
.tally div + div { padding-left: var(--s3); border-left: 1px solid rgba(246, 243, 255, .2); }
.tally dd { font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 5.4vw, 5rem); line-height: 1; letter-spacing: -.03em; }
.tally dt { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .95rem; color: #cfc8ee; }
.tally dt .ico { color: #ffb27a; }

/* ---------- listed on BSE ---------- */
.listing { margin-top: var(--s5); display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s4) var(--s5); align-items: center; padding: var(--s4); border-radius: var(--r-md); background: rgba(246, 243, 255, .06); box-shadow: inset 0 0 0 1px rgba(246, 243, 255, .14); }
.listing h3 { display: flex; align-items: center; gap: .5rem; font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 2.6vw, 2.5rem); letter-spacing: -.03em; line-height: 1.05; }
.listing__facts p { margin-top: var(--s1); color: #cfc8ee; }
.listing dl { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s3); }
.listing dt { font-size: .82rem; font-weight: 600; color: #cfc8ee; }
.listing dd { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.listing__quote { display: grid; gap: var(--s3); }
.quote:empty { display: none; }
.quote { min-height: 6.5rem; border-radius: var(--r-md); overflow: hidden; background: rgba(246, 243, 255, .05); }
.listing__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.listing .go { background: #fff; color: var(--ink); }
.listing .go .arrow { background: var(--orange); color: #fff; }
.listing .go:hover { background: #fff; }
.link { font-weight: 700; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: .35em; }

/* ---------- the companies we supply, and our certifications ---------- */
.trust { background: var(--night); padding: 0 var(--gutter) var(--gutter); }
.trust > * { background: #fff; color: var(--ink); }
.trust__head { border-radius: var(--r-lg) var(--r-lg) 0 0; padding: var(--s5) var(--s4) var(--s4); display: grid; gap: var(--s2); }
.trust__head h2 { font-size: clamp(2.2rem, 4.4vw, 4.2rem); line-height: 1; }
.trust__head p { font-size: clamp(1.05rem, 1.25vw, 1.2rem); color: var(--soft); max-width: 38rem; }
.marquee { padding: var(--s2) 0 var(--s4); }
.logos { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); padding: 0 var(--s4); align-items: center; }
.logos li { flex: none; }
.logos img { height: 4.25rem; width: auto; max-width: 11rem; object-fit: contain; }
.marquee.is-moving { overflow: hidden; }
.marquee.is-moving .logos { flex-wrap: nowrap; width: max-content; padding: 0; gap: var(--s5); animation: slide 70s linear infinite; }
.marquee.is-moving:hover .logos { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.trust__marks { border-radius: 0 0 var(--r-lg) var(--r-lg); padding: var(--s4); border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); align-items: center; }
.trust__marks h3 { display: flex; align-items: center; gap: .5rem; font-family: var(--display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; }
.marks { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; justify-content: flex-end; }
.marks img { height: 4rem; width: auto; }
.trust__marks p { grid-column: 1 / -1; font-weight: 700; color: var(--soft); }

/* ---------- ask + foot ---------- */
.ask { --pad: clamp(1.75rem, 6vw, 6rem); position: relative; isolation: isolate; background: var(--night); padding: var(--pad) calc(var(--gutter) + var(--pad)) calc(var(--gutter) + var(--pad)); display: grid; justify-items: start; }
/* the panel itself, with two slow drifting glows */
.ask::after { content: ""; position: absolute; z-index: -2; inset: 0 var(--gutter) var(--gutter); border-radius: var(--r-lg);
  background: radial-gradient(50% 70% at 85% 20%, #ff6a1a 0%, transparent 62%), radial-gradient(45% 60% at 12% 95%, #9a6bff 0%, transparent 65%), var(--purple);
  background-size: 140% 140%; animation: drift 16s ease-in-out infinite alternate; }
@keyframes drift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
/* pellets drifting on the right of the panel */
.ask__scene { position: absolute; z-index: -1; top: 0; bottom: var(--gutter); left: var(--gutter); right: var(--gutter); border-radius: var(--r-lg); overflow: hidden; }
.ask__scene canvas { display: block; width: 100%; height: 100%; }
.ask h2 { font-size: clamp(2.6rem, 6.4vw, 6rem); line-height: .96; color: #fff; max-width: 14ch; }
.ask p { color: #efe9ff; max-width: 34rem; margin-top: var(--s3); font-size: clamp(1.05rem, 1.25vw, 1.2rem); }
.ask .bar__cta { margin-left: 0; background: #fff; color: var(--ink); font-size: 1.05rem; padding: .55rem .6rem .55rem 1.5rem; margin-top: var(--s4); }
.ask .bar__cta .arrow { background: var(--orange); color: #fff; width: 2.6rem; height: 2.6rem; padding: .65rem; }
.ask .bar__cta:hover { background: #fff; }
.foot { background: var(--night); color: #cfc8ee; padding: var(--s4) var(--gutter) var(--s5); font-size: .9rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s4); }
.foot__text { display: grid; gap: var(--s1); }
/* social links: round panes of dark glass that light up in brand orange */
.social { display: flex; flex-wrap: wrap; gap: .6rem; }
.social a { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; color: #fff; background: rgba(246, 243, 255, .1); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(246, 243, 255, .16), 0 .8rem 1.4rem -.9rem rgba(0, 0, 0, .7); transition: background .25s, transform .35s var(--ease), color .25s; }
.social a:hover { background: var(--orange); color: #1d0b02; transform: translateY(-.2rem); }
.social .ico { width: 1.3rem; height: 1.3rem; }


/* ---------- frosted glass layer ----------
   Panels are translucent and blur what lies behind them: the film, the photographs
   and the drifting colour. One recipe (--frost), used everywhere, with a bright
   top edge and a soft shadow so each pane reads as a sheet of glass. Text keeps
   its dark ink on light glass and white on dark glass. */
:root {
  --frost: blur(22px) saturate(1.7);
  --glass: rgba(255, 255, 255, .5);
  --glass-strong: rgba(255, 255, 255, .7);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .45);
  --glass-shadow: 0 1.4rem 2.8rem -1.6rem rgba(20, 19, 28, .4);
}
.bar { background: var(--glass-strong); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); box-shadow: var(--glass-edge), 0 1rem 2.4rem -1.2rem rgba(20, 19, 28, .35); }
.bar__nav a:hover { background: rgba(255, 255, 255, .7); }
.tag { background: var(--glass-strong); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); box-shadow: var(--glass-edge), 0 .5rem 1.2rem -.6rem rgba(20, 19, 28, .4); }
.serves li { background: color-mix(in srgb, var(--hue) 16%, rgba(255, 255, 255, .5)); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); box-shadow: var(--glass-edge); }
.chips li { background: var(--glass-strong); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); box-shadow: var(--glass-edge), 0 .8rem 1.4rem -.9rem rgba(20, 19, 28, .5); }
html.live .board .chips li { background: rgba(255, 255, 255, .62); box-shadow: var(--glass-edge), 0 1rem 1.8rem -1rem rgba(20, 19, 28, .6); }
.brandmark { background: var(--glass-strong); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); box-shadow: var(--glass-edge), 0 .8rem 1.6rem -.8rem rgba(20, 19, 28, .45); }
/* the story panel and the step control are two panes of the same glass */
html.live .moment__scene { background: var(--glass); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 1px 0 0 rgba(255, 255, 255, .45), inset -1px 0 0 rgba(255, 255, 255, .45); }
html.live .steps { background: var(--glass); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .45), inset 1px 0 0 rgba(255, 255, 255, .45), inset -1px 0 0 rgba(255, 255, 255, .45), var(--glass-shadow); }
html.live .track { background: var(--glass); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); box-shadow: var(--glass-edge), var(--glass-shadow); }
html.live .track button:hover { background: rgba(255, 255, 255, .6); }
html.live .reel { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), var(--lift); }
/* dark glass, on the film and in the closing sections */
.film__toggle, .ghost { -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); }
.ghost { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.film__nav { background: rgba(21, 16, 46, .34); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); }
.listing { background: rgba(246, 243, 255, .08); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(246, 243, 255, .14), 0 2rem 3rem -2rem rgba(0, 0, 0, .6); }
.night { background: radial-gradient(60% 50% at 85% 0%, rgba(122, 77, 255, .5), transparent 70%), radial-gradient(45% 40% at 5% 70%, rgba(255, 106, 26, .22), transparent 70%), var(--night); }
/* the flowing layout (tablets and phones): each step's text becomes a pane of glass */
html:not(.live) .moment { background: color-mix(in srgb, var(--hue) 20%, var(--paper)); }
/* where the browser cannot blur, the panes turn nearly solid so text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(255, 255, 255, .9); --glass-strong: rgba(255, 255, 255, .94); }
  .film__nav { background: rgba(21, 16, 46, .8); }
}


/* ---------- media shapes: one calm rule ----------
   Every photograph, film and panel is the same shape: a rectangle with one
   generous, even corner radius, set on a wide margin with plenty of air around
   it. No leaves, arches or uneven corners. Consistency is what reads as considered. */
:root { --r-media: 2rem; --r-panel: 1.75rem; }

/* hero: the film is one large rounded tile under the header */
.hero { padding: var(--clear) var(--gutter) var(--gutter); }
.film { height: calc(100svh - var(--clear) - var(--gutter)); min-height: 32rem; border-radius: var(--r-media); box-shadow: var(--lift); }
.film__nav { padding: 0 var(--s2) var(--s2); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; gap: .5rem; }
.film__nav li + li { box-shadow: none; }
.film__nav a { justify-content: center; border-radius: var(--r-panel); padding-block: 1rem; background: rgba(21, 16, 46, .38); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
.film__nav a:hover { background: rgba(255, 255, 255, .2); }

/* section pictures: the same tile everywhere */
html.live .reel, html.live .moment:nth-child(even) .reel, html.live .moment:nth-child(3n) .reel { border-radius: var(--r-media); }
html:not(.live) .reel__f, html:not(.live) .reel__f:nth-of-type(2), html:not(.live) .reel__f:nth-of-type(3) { border-radius: var(--r-media); }
html.live .board .chips li, .chips li { border-radius: 999px; }
html.live .board .brandmark { left: auto; right: 1.75rem; top: 1.75rem; translate: none; border-radius: 1rem; }
.badge { border-radius: 28%; }
.brandmark { border-radius: 1rem; }

/* the story: words on the page, no box and no rule, with even spacing down the column */
html.live .moment__text { padding-top: var(--s2); }
html.live .moment__sum { margin-top: var(--s3); }
html.live .serves { margin: var(--s3) 0 0; }
html.live .moment__scene { margin: auto 0 0; padding: var(--s5) 0 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: 0; }
html.live .steps { margin-top: var(--s1); padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: 0; }
html.live .step--origin > * + * { margin-top: var(--s3); }
html.live .track { margin-top: var(--s4); }

/* closing sections: the same even corners */
.night { border-radius: var(--r-media) var(--r-media) 0 0; padding-top: var(--gutter); }
.night__photo { border-radius: var(--r-media); }
.tally { border-top: 0; gap: var(--s2); }
.tally div + div { border-left: 0; }
.tally div, .tally div:nth-child(odd), .tally div:nth-child(even) { padding: var(--s3); border-radius: var(--r-panel); background: rgba(246, 243, 255, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.listing { border-radius: var(--r-media); padding: var(--s4); }
.quote { border-radius: var(--r-panel); }
.trust__head { border-radius: var(--r-media) var(--r-media) 0 0; padding: var(--s5) var(--s4) var(--s4); }
.trust__marks { border-radius: 0 0 var(--r-media) var(--r-media); padding: var(--s4); }
.ask::after, .ask__scene { border-radius: var(--r-media); }

@media (max-width: 1000px) {
  .film { height: auto; min-height: calc(100svh - var(--clear) - var(--gutter)); }
  .film__nav a { justify-content: flex-start; }
  .tally div, .tally div:nth-child(odd), .tally div:nth-child(even) { padding: var(--s2); border-top: 0; }
  .listing { padding: var(--s3); }
  .trust__head { padding: var(--s4) var(--s3) var(--s3); }
  .trust__marks { padding: var(--s3); }
  .ask__scene { border-radius: var(--r-media) var(--r-media) 0 0; }
}
@media (max-width: 700px) {
  :root { --r-media: 1.5rem; --r-panel: 1.25rem; }
}

/* ---------- fit layer: every held section sits whole on any screen ----------
   The section's content area is never taller than 46rem and is centred in the
   window, so tall screens get even margins and short screens are not cut off.
   Type scales with the section's own height and width (container units), so it fits whatever the window. The step control
   sits directly above the story it switches, so no gap opens between them. */
html.live .moment__stage { container-type: size; grid-template-rows: minmax(0, 46rem); align-content: center; padding-bottom: var(--s4); }
html.live .moment__text { justify-content: center; padding-top: 0; }
html.live .moment__title { font-size: clamp(1.9rem, min(3.4cqw, 6cqh), 3.7rem); }
html.live .moment__sum { margin-top: clamp(.75rem, 2.2cqh, 1.5rem); font-size: clamp(.98rem, min(1.25cqw, 2.3cqh), 1.22rem); }
html.live .serves { margin-top: clamp(.75rem, 2.2cqh, 1.5rem); }
html.live .serves li { font-size: clamp(.8rem, 1.7cqh, .9rem); }
html.live .moment__text > .track { order: 1; margin-top: clamp(1.25rem, 4cqh, 2.5rem); }
html.live .moment__text > .moment__scene { order: 2; margin: clamp(1rem, 3cqh, 1.75rem) 0 0; padding: 0; font-size: clamp(1.3rem, min(2.1cqw, 3.6cqh), 2rem); }
html.live .moment__text > .steps { order: 3; margin-top: var(--s1); min-height: clamp(5.5rem, 16cqh, 10.5rem); }
html.live .step { font-size: clamp(1rem, min(1.3cqw, 2.4cqh), 1.25rem); }
html.live .step--origin > * + * { margin-top: clamp(.75rem, 2.4cqh, 1.5rem); }
html.live .track button { padding-block: clamp(.5rem, 1.4cqh, .7rem); }
html.live .board .chips li { font-size: clamp(.82rem, min(1.05cqw, 1.9cqh), 1.05rem); padding: clamp(.5rem, 1.3cqh, .7rem) clamp(.8rem, 1cqw, 1.05rem); }

/* board layout: the product and its range share the picture without touching.
   The picture is a column: the product takes the space above, the labels take what
   they need below, so however many rows of labels there are the product stays clear. */
html.live .board { display: flex; flex-direction: column; align-items: center; gap: clamp(.75rem, 2.5cqh, 1.5rem); padding: clamp(1.25rem, 5cqh, 3rem) 2rem clamp(1.25rem, 3.5cqh, 2rem); }
html.live .board::before { top: 38%; }
html.live .board .pack { position: static; flex: 1 1 0; min-height: 0; width: 100%; max-width: 62%; max-height: 62%; margin-block: auto; object-fit: contain; float: none; filter: drop-shadow(0 2rem 2rem rgba(20, 19, 28, .5)); }
html.live .board .chips { position: static; flex: none; width: 100%; justify-content: center; gap: .5rem; pointer-events: auto; }

/* hero: the film tile and its words scale with the window's height too */
.film { min-height: 25rem; }
.hero__title { font-size: clamp(2.4rem, min(7.6vw, 11.5vh), 7.6rem); }
.hero__lede { margin-top: clamp(.75rem, 2.4vh, 1.5rem); font-size: clamp(.98rem, min(1.35vw, 2.4vh), 1.3rem); }
.hero__acts { margin-top: clamp(1rem, 3.4vh, 2.5rem); }
.film__body { padding-top: clamp(1.5rem, 6vh, 4rem); padding-bottom: clamp(1rem, 3.5vh, 2.5rem); }
.film__nav a { padding-block: clamp(.6rem, 1.8vh, 1rem); }

/* certification marks: one even row. Each mark sits centred in an equal cell at the
   same height, with the heading above and the award line below. */
.trust__marks { display: grid; grid-template-columns: 1fr; gap: var(--s3); align-items: start; }
.trust__marks h3 { align-self: start; }
.marks { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--s3); align-items: center; justify-content: stretch; }
.marks li { display: grid; place-items: center; }
.marks img { width: 100%; height: 4.75rem; object-fit: contain; }
.trust__marks p { grid-column: auto; }
@media (max-width: 1000px) { .marks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) var(--s2); } .marks img { height: 4rem; } }

/* the group pictures sit a little further left in their frame than the single-subject ones */
html.live .reel__f:first-of-type { object-position: 66% 50%; }
html:not(.live) .reel__f:first-of-type { object-position: 66% 50%; }

/* ---------- enquiry form: a sheet that slides in from the right ----------
   Opened by every "Discuss your requirement" button, so the form is one press away
   anywhere on the page without taking space in it. A native dialog, so focus stays
   inside it and Escape closes it. */
.sheet { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(36rem, 100vw); max-width: none; height: 100dvh; max-height: none; padding: 0; border: 0; overflow: auto; overscroll-behavior: contain; background: #fff; color: var(--ink); border-radius: var(--r-media) 0 0 var(--r-media); box-shadow: -2rem 0 4rem -2rem rgba(20, 19, 28, .45); }
.sheet::backdrop { background: rgba(21, 16, 46, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet[open] { animation: sheetIn .45s var(--ease); }
.sheet[open]::backdrop { animation: fadeIn .3s ease-out; }
@keyframes sheetIn { from { transform: translateX(3rem); opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } }
.sheet__form, .sheet__done { padding: clamp(1.5rem, 4vw, 2.5rem); }
.sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); }
.sheet h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.02; }
.sheet__close { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--paper); transition: background .2s, color .2s; }
.sheet__close:hover { background: var(--accent); color: #fff; }
.sheet__lede { margin-top: var(--s2); color: var(--soft); }
.sheet__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s3); }
.f { grid-column: 1 / -1; display: grid; gap: .4rem; min-width: 0; border: 0; padding: 0; margin: 0; }
.f--half { grid-column: auto; }
.f label, .f legend { font-weight: 700; font-size: .92rem; padding: 0; }
.f label span { font-weight: 500; color: var(--soft); }
.f input:not([type="radio"]), .f select, .f textarea { width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1.5px solid transparent; border-radius: .9rem; padding: .8rem .95rem; transition: border-color .2s, background .2s; }
.f textarea { resize: vertical; min-height: 6.5rem; }
.f input:hover, .f select:hover, .f textarea:hover { border-color: var(--line); }
.f input:focus-visible, .f select:focus-visible, .f textarea:focus-visible { outline: 0; border-color: var(--purple); background: #fff; box-shadow: 0 0 0 4px rgba(91, 53, 213, .16); }
.f [aria-invalid="true"] { border-color: #c4281c; background: #fff6f5; }
.f .err { font-size: .86rem; font-weight: 600; color: #b3261e; }
/* request type: a row of choices that reads as one control */
.pick { display: flex; flex-wrap: wrap; gap: .5rem; }
.pick legend { margin-bottom: .5rem; }
.pick label { position: relative; font-weight: 700; font-size: .9rem; cursor: pointer; }
.pick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pick span { display: block; padding: .6rem 1rem; border-radius: 999px; background: var(--paper); border: 1.5px solid transparent; transition: background .2s, color .2s; }
.pick input:checked + span { background: var(--accent); color: #fff; }
.pick input:focus-visible + span { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(91, 53, 213, .16); }
.f--trap { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }
.sheet__status { min-height: 1.5rem; margin-top: var(--s2); font-weight: 600; color: #b3261e; }
.sheet__foot { display: grid; gap: var(--s2); margin-top: var(--s1); }
.sheet__foot .go { justify-self: start; font-size: 1.02rem; padding: .55rem .6rem .55rem 1.4rem; background: var(--orange); color: #1d0b02; }
.sheet__foot .go .arrow { background: #1d0b02; color: #fff; width: 2.4rem; height: 2.4rem; padding: .6rem; }
.sheet__foot .go:hover { background: #ff8438; }
.sheet__foot .go[disabled] { opacity: .6; cursor: progress; }
.sheet__foot p { font-size: .9rem; color: var(--soft); }
.sheet__foot a { color: var(--ink); font-weight: 700; text-underline-offset: .25em; }
.sheet__done { display: grid; gap: var(--s2); justify-items: start; align-content: center; min-height: 100%; }
.sheet__done[hidden] { display: none; }
.sheet__done > .ico { width: 3.5rem; height: 3.5rem; color: var(--purple); stroke-width: 1.5; }
.sheet__done p { color: var(--soft); max-width: 26rem; }
@media (max-width: 700px) {
  .sheet { border-radius: 0; }
  .sheet__fields { grid-template-columns: 1fr; }
  .f--half { grid-column: 1 / -1; }
}

/* ---------- phones and tablets: the same held section, as one full picture ----------
   The heading, summary and customers flow first. Then one screen is held: the
   section's name, a picture that fills the screen with the story as a caption
   on it, and the step control at the bottom within reach of the thumb. */
html.live-m .moment__stage { display: block; height: auto; container-type: normal; padding: var(--s4) var(--gutter) 0; }
html.live-m .moment__text { display: block; margin-bottom: calc(var(--s3) - var(--clear)); }
html.live-m .moment__title { font-size: clamp(1.75rem, 6.4vw, 2.9rem); }
html.live-m .moment__sum { margin-top: var(--s2); font-size: clamp(1rem, 2.4vw, 1.2rem); max-width: 40rem; }
html.live-m .serves { margin: var(--s2) 0 0; }
html.live-m .serves li { font-size: .82rem; padding: .42rem .75rem; }
html.live-m .hold { height: 100vh; height: 100lvh; }
html.live-m .hold { --bleed: 0px; --track-h: 2.9rem; }
html.live-m .hold { --drop: 0px; }
/* when the bars do show or hide, the cards and product glide to their new place instead of snapping */
html.live-m .cap, html.live-m .hold__in > .track { transition: bottom .3s var(--ease); }
html.live-m .board { transition: padding-bottom .3s var(--ease); }
/* --bleed is how much of the picture's foot is under the browser's bars right now: nothing when
   they are hidden. The cards sit that far up from the picture's bottom edge, and the product
   takes the room that is left, so the cards are always at the bottom of what is visible. The
   picture itself never changes size. */
@supports (height: 100dvh) { html.live-m .hold { --bleed: calc(100lvh - 100dvh); } }
html.live-m .hold__in { position: relative; container-type: size; display: flex; flex-direction: column; gap: clamp(.55rem, 1.6cqh, 1rem); height: 100vh; height: 100lvh; padding: calc(var(--clear) + .1rem) 0 .75rem; }
html.live-m .hold__in > * { order: 0; margin: 0; }
html.live-m .hold__name { flex: none; display: flex; align-items: center; gap: .55rem; font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 5cqw, 1.6rem); letter-spacing: -.02em; line-height: 1.1; }
html.live-m .hold__name .badge { flex: none; width: 1.6em; height: 1.6em; }
html.live-m .hold__name .badge .ico { width: 1em; height: 1em; }
html.live-m .hold__in > .reel { flex: 1 1 0; min-height: 0; }
html.live-m .reel__f, html.live-m .reel__f:nth-of-type(1) { margin-top: 0; object-position: 72% 50%; }
/* caption: frosted glass on the picture */
html.live-m .cap { position: absolute; z-index: 4; left: .6rem; right: .6rem; bottom: calc(var(--bleed) + var(--track-h) + 1.1rem); padding: clamp(.8rem, 2.2cqh, 1.25rem) clamp(.9rem, 4cqw, 1.5rem); border-radius: calc(var(--r-media) - .5rem); background: var(--glass-strong); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); box-shadow: var(--glass-edge), 0 1rem 2rem -1.2rem rgba(20, 19, 28, .55); transform: translateY(var(--drop)); }
html.live-m .cap .moment__scene { margin: 0; padding: 0; font-size: clamp(1.12rem, min(4.8cqw, 3cqh), 1.8rem); }
html.live-m .cap .steps { display: block; margin-top: .35rem; min-height: 0; }
html.live-m .step { display: none; opacity: 1; visibility: visible; min-width: 0; font-size: clamp(.95rem, min(4cqw, 2.3cqh), 1.25rem); line-height: 1.42; }
html.live-m .step.is-on { display: block; animation: cap-in .4s var(--ease) both; }
@keyframes cap-in { from { opacity: 0; transform: translateY(.6rem); } }
html.live-m .step--origin > * + * { margin-top: clamp(.5rem, 1.5cqh, 1rem); }
html.live-m .step--origin .chips { gap: .4rem; }
html.live-m .step--origin .chips li { font-size: .82rem; padding: .42rem .75rem; border-radius: 999px; box-shadow: 0 0 0 1px rgba(20, 19, 28, .08); }
html.live-m .step--origin .go { display: inline-flex; max-width: 100%; font-size: clamp(.84rem, 3.6cqw, 1rem); white-space: normal; }
/* the product stands in the picture above the caption */
html.live-m .board { padding: clamp(.75rem, 2.5cqh, 2rem) 1rem calc(var(--cap-h, 12rem) + var(--bleed) + var(--track-h) + 1.6rem); }
html.live-m .board::before { top: 30%; }
html.live-m .board .pack { max-width: 72%; max-height: 100%; }
/* the bag already carries the brand; a second logo beside it only collides with it */
html.live-m .board .brandmark { display: none; }
/* step control */
html.live-m .hold__in > .track { position: absolute; z-index: 5; left: .6rem; right: .6rem; bottom: calc(var(--bleed) + .75rem + .6rem); height: var(--track-h); box-sizing: border-box; align-items: stretch; gap: .15rem; padding: .25rem; grid-template-columns: auto auto auto; background: var(--glass-strong); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); box-shadow: var(--glass-edge), 0 1rem 2rem -1.2rem rgba(20, 19, 28, .45); transform: translateY(var(--drop)); }
html.live-m .track li { display: flex; }
html.live-m .track button { font-size: clamp(.76rem, 3.3cqw, .95rem); padding: 0 .5rem; }
/* The three labels must always fit inside the pill: a column may shrink below its text, and a
   label too long for its share ("Where it came from") breaks onto two lines instead of pushing
   the last one out past the edge. */
html.live-m .hold__in > .track { grid-template-columns: repeat(3, minmax(0, auto)); justify-content: space-between; }
html.live-m .track li { min-width: 0; }
/* on the narrowest phones a little less side padding keeps all three labels on one line */
@media (max-width: 380px) { html.live-m .track button { padding-inline: .28rem; } }
html.live-m .track button { min-width: 0; white-space: normal; line-height: 1.08; text-align: center; text-wrap: balance; }
@media (max-width: 700px) {
  /* one swipeable row, so the range never crowds the product */
  html.live-m .step--origin .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(clamp(.9rem, 4cqw, 1.5rem) * -1); padding: .15rem clamp(.9rem, 4cqw, 1.5rem) .35rem; scrollbar-width: none; overscroll-behavior-x: contain; }
  html.live-m .step--origin .chips::-webkit-scrollbar { display: none; }
  html.live-m .step--origin .chips li { flex: none; white-space: nowrap; }
}

/* ---------- short, wide windows (laptops with display scaling) ---------- */
@media (min-width: 1001px) and (max-height: 760px) {
  :root { --clear: calc(var(--bar-h) + var(--bar-top) + var(--s2)); }
  html.live .moment__stage { padding-bottom: var(--s3); }
}

/* ---------- medium screens ---------- */
@media (max-width: 1000px) {
  .ask { padding-top: 17rem; }
  .ask__scene { left: var(--gutter); right: var(--gutter); width: auto; bottom: auto; height: 17rem; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .listing { grid-template-columns: 1fr; padding: var(--s3); }
  .bar__nav { display: none; }
  .bar > .bar__cta { margin-left: auto; }   /* the header button only: the hero button stays in line with the one below it */
  .moment { padding: var(--s5) var(--gutter); }
  .night__text { grid-template-columns: 1fr; margin-top: var(--s4); }
  .night__text h2 { grid-row: auto; }
  .night__photo { height: 50svh; }
  .tally { grid-template-columns: 1fr 1fr; }
  .tally div { padding: var(--s3) var(--s2) var(--s3) 0; }
  .tally div:nth-child(3) { padding-left: 0; border-left: 0; }
  .tally div:nth-child(n+3) { border-top: 1px solid rgba(246, 243, 255, .2); }
  .trust__head { padding: var(--s4) var(--s3) var(--s3); }
  .logos { padding: 0 var(--s3); gap: var(--s2) var(--s3); }
  .logos img { height: 3.25rem; max-width: 8rem; }
  .trust__marks { grid-template-columns: 1fr; padding: var(--s3); }
  .marks { justify-content: flex-start; }
  .marks img { height: 3.4rem; }
}

/* ---------- small screens: one pair per row ---------- */
@media (max-width: 700px) {
  .film { height: auto; min-height: calc(100svh - var(--clear) - var(--gutter)); }
  .film__body { padding: var(--s6) var(--s3) var(--s3); }
  .hero__acts .ghost { padding: .8rem 1.1rem; }
  .film__nav { grid-template-columns: 1fr 1fr; }
  .film__nav li + li { box-shadow: none; }
  .film__nav li { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
  .film__nav li:last-child { grid-column: 1 / -1; }
  .film__nav a { padding: .8rem var(--s2); font-size: .84rem; gap: .5rem; }
  html .track .ico { display: none; }
  :root { --bar-h: 3.5rem; --bar-top: .75rem; --r-lg: 1.5rem; }
  .bar { gap: var(--s2); padding-left: .8rem; }
  .bar__brand { font-size: .82rem; line-height: 1.15; white-space: normal; max-width: 9.5rem; gap: .55rem; }
  .bar__cta { font-size: .85rem; padding-left: 1rem; gap: .5rem; }
  .bar .bar__cta .arrow { width: 1.9rem; height: 1.9rem; }
  .long { display: none; }
  .moment__stage { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .reel__f { aspect-ratio: 3 / 2; margin-top: var(--s3); }
  .reel__f:nth-of-type(1) { order: 2; margin-top: 0; } .step:nth-child(1) { order: 3; }
  .reel__f:nth-of-type(2) { order: 4; } .step:nth-child(2) { order: 5; }
  .reel__f:nth-of-type(3) { order: 6; } .step--origin > p { order: 7; }
  .step--origin > .pack, .step--origin > .brandmark { order: 8; }
  .step--origin > .chips, .step--origin > .pack + .chips, .step--origin > .brandmark + .chips { order: 9; grid-column: 1; }
  .step--origin > .go { order: 10; }
  .pack { height: 6.5rem; }
}
@media (min-width: 701px) { .short { display: none; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- phones: even padding in the closing sections ---------- */
@media (max-width: 700px) {
  /* numbers: four equal cards, each number at the same height with its label under it */
  .tally { gap: .75rem; margin-top: var(--s4); }
  .tally div, .tally div:nth-child(odd), .tally div:nth-child(even), .tally div:nth-child(3), .tally div:nth-child(n+3) { justify-content: flex-end; gap: .6rem; padding: 1.1rem 1rem 1.15rem; border: 0; }
  .tally dd { font-size: 2.5rem; }
  .tally dt { align-items: flex-start; font-size: .9rem; line-height: 1.3; }
  .tally dt .ico { flex: none; margin-top: .1em; }
  .listing { padding: 1.25rem; }
  /* closing panel: the words and the button share one inset and stay inside the panel */
  .ask { --pad: 1.25rem; padding-bottom: calc(var(--gutter) + 1.75rem); }
  .ask h2 { font-size: clamp(2.2rem, 10.5vw, 3rem); }
  .ask p { margin-top: var(--s2); }
  .ask .bar__cta { max-width: 100%; margin-top: var(--s3); font-size: .98rem; padding-left: 1.2rem; }
}

/* ---------- phones and tablets: the header links open from a menu button ---------- */
.bar__menu { display: none; }
@media (max-width: 1000px) {
  .bar { gap: .5rem; }
  .bar__menu { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; color: var(--ink); background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px rgba(20, 19, 28, .08); }
  .bar__menu-b, .bar.is-open .bar__menu-a { display: none; }
  .bar.is-open .bar__menu-b { display: inline; }
  .bar__nav { display: flex; flex-direction: column; gap: .15rem; position: absolute; top: calc(100% + .5rem); left: 0; right: 0; margin: 0; padding: .5rem; border-radius: var(--r-panel); background: #fff; box-shadow: 0 1.5rem 3rem -1.2rem rgba(20, 19, 28, .45), 0 0 0 1px rgba(20, 19, 28, .05); opacity: 0; visibility: hidden; transform: translateY(-.4rem); transition: opacity .2s, transform .2s var(--ease), visibility .2s; }
  .bar.is-open .bar__nav { opacity: 1; visibility: visible; transform: none; }
  .bar__nav a { font-size: 1.05rem; padding: .9rem 1rem; border-radius: calc(var(--r-panel) - .5rem); }
  .bar__nav a:hover { background: var(--paper); }
}
@media (max-width: 700px) {
  /* room for the menu button: the enquiry button is a plain pill */
  .bar { padding-right: .45rem; }
  .bar > .bar__cta { padding: .62rem .95rem; }
  .bar > .bar__cta .arrow { display: none; }
  .bar__menu { width: 2.5rem; height: 2.5rem; }
}

/* ---------- share price card: no dead space under the quote ----------
   The embedded quote reserves more height than it draws, which left an empty band
   under the price. The card is trimmed to the quote so its padding is even. */
.quote { min-height: 0; height: 5rem; }
.quote .tradingview-widget-container, .quote iframe { display: block; }
.listing__quote { gap: var(--s2); }

/* ---------- phones: the footer is one centred column ---------- */
@media (max-width: 700px) {
  .foot { flex-direction: column; align-items: center; text-align: center; gap: var(--s3); }
  .foot > nav { width: 100%; }
  .social { justify-content: center; }
}

/* ---------- the tagline: set as a signature, not as body text ----------
   Large slanted display type in a warm orange gradient, led by a slanted bar that
   echoes the stroke of the K in the logo. */
.night__text p.night__sign { display: flex; align-items: stretch; gap: .38em; margin-top: var(--s2); font-family: var(--display); font-weight: 800; font-style: italic; font-synthesis: style; font-size: clamp(1.85rem, 3.6vw, 3.2rem); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; color: #ff8a3d; }
.night__sign::before { content: ""; flex: none; width: .26em; min-height: 1.05em; border-radius: .06em; background: linear-gradient(180deg, #ffb27a, var(--orange)); transform: skewX(-14deg); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .night__text p.night__sign { background: linear-gradient(100deg, #ffc48f 0%, #ff7a2a 55%, #ffb066 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-right: .12em; }
  /* the bar keeps its own fill: it is not text */
}
@media (max-width: 700px) {
  .night__text p.night__sign { font-size: clamp(1.9rem, 8.6vw, 2.5rem); margin-top: var(--s1); }
}

/* ---------- footer: a proper close to the page ----------
   Brand and tagline, where to find us, where to go next, and where to follow,
   then a base line with the copyright and a wink about where it is all made. */
.foot { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: start; justify-content: stretch; gap: var(--s4) var(--s5); padding: var(--s5) var(--gutter) var(--s3); text-align: left; font-size: .98rem; color: #cfc8ee; }
.foot a { color: inherit; text-decoration: none; transition: color .2s; }
.foot a:hover { color: #fff; }
.foot__brand { display: grid; justify-items: start; gap: .5rem; }
.foot__logo { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 1.1rem; background: #fff; box-shadow: 0 1rem 2rem -1rem rgba(0, 0, 0, .6); }
.foot__logo img { width: 2.75rem; height: 2.75rem; object-fit: contain; }
.foot__name { margin-top: .5rem; font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.15; color: #fff; }
.foot__sign { font-family: var(--display); font-weight: 800; font-style: italic; font-synthesis: style; font-size: 1.05rem; letter-spacing: -.02em; color: #ff8a3d; }
.foot__col { display: grid; gap: .7rem; align-content: start; min-width: 0; }
.foot__col h2 { font-family: var(--body, inherit); font-size: .82rem; font-weight: 700; letter-spacing: 0; color: #9d95c4; margin-bottom: .15rem; }
.foot__col p { display: flex; align-items: flex-start; gap: .6rem; line-height: 1.5; overflow-wrap: anywhere; }
.foot__col p .ico { margin-top: .15em; color: #ffb27a; }
.foot__links { display: grid; gap: .55rem; }
.foot__links a { font-weight: 600; }
.foot .social { flex-wrap: nowrap; }
.foot__base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem var(--s3); margin-top: var(--s2); padding-top: var(--s3); font-size: .86rem; color: #9d95c4; }
.foot__made { font-weight: 600; color: #cfc8ee; text-wrap: balance; }
.foot__heart { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.22em; margin-inline: .1em; fill: var(--orange); transform-origin: 50% 60%; animation: foot-beat 1.6s ease-in-out infinite; }
@keyframes foot-beat { 0%, 30%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 45% { transform: scale(1.14); } }

@media (max-width: 1000px) {
  .foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4) var(--s3); }
  .foot__brand { grid-column: 1 / -1; }
  .foot > nav[aria-label="Social media"] { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  /* one centred column */
  .foot { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: var(--s4); padding-top: var(--s4); }
  .foot__brand { justify-items: center; }
  .foot__col { justify-items: center; }
  .foot__col p { justify-content: center; text-align: left; }
  .foot__links { grid-auto-flow: row; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.1rem; }
  .foot > nav { width: auto; }
  .foot__base { flex-direction: column; justify-content: center; text-align: center; gap: .6rem; margin-top: 0; }
  .foot__made { order: -1; font-size: .95rem; }
}

/* ---------- phones: certifications as a tidy grid of tiles ----------
   No rule above it, a heading in the page's own heading style, every mark in an
   equal soft tile so mixed logo shapes line up, and the award as a closing note. */
@media (max-width: 700px) {
  .trust__marks { border-top: 0; padding: var(--s4) var(--s3) var(--s3); gap: var(--s3); }
  .trust__marks h3 { display: block; font-size: clamp(1.7rem, 7.6vw, 2.2rem); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
  .trust__marks h3 .ico { display: none; }
  .marks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
  .marks li { position: relative; aspect-ratio: 1; border-radius: 1.1rem; background: var(--paper); }
  .marks img { position: absolute; inset: .85rem; width: calc(100% - 1.7rem); height: calc(100% - 1.7rem); object-fit: contain; }
  .trust__marks p { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; border-radius: 1.1rem; background: #fff1e6; color: var(--ink); font-size: .95rem; line-height: 1.3; }
  .trust__marks p::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--orange); }
}

/* footer address and email: each part stays whole; the column is as wide as they need */
.foot .nb { white-space: nowrap; }
.foot__col p { overflow-wrap: normal; }
.foot__col p > span { display: grid; }
/* narrower desktops: tighter gaps so the brand column keeps a readable width */
@media (min-width: 1001px) { .foot { column-gap: clamp(1.5rem, 3vw, 4rem); } }
.foot__name { text-wrap: balance; }

/* Phones: the whole hero (heading, sentence, both buttons and the five business tiles) fits in
   the first screen. Sizes follow the screen's height (svh), and the picture is exactly one
   screen tall; on a very short screen it grows instead of cutting anything off. */
@media (max-width: 700px) {
  .film { height: auto; min-height: calc(100svh - var(--clear) - var(--gutter)); }
  .film__body { padding: 1.25rem var(--s3) clamp(.6rem, 2svh, 1rem); }
  .hero__title { max-width: calc(100% - 3.5rem); font-size: clamp(2rem, min(10vw, 6.5svh), 3rem); }
  .hero__lede { margin-top: clamp(.5rem, 1.6svh, 1rem); font-size: clamp(.84rem, 2.2svh, 1rem); line-height: 1.4; }
  .hero__acts { gap: .5rem; margin-top: clamp(.7rem, 2svh, 1.25rem); }
  .hero__acts .bar__cta { font-size: .95rem; padding: .4rem .45rem .4rem 1.1rem; }
  .hero__acts .bar__cta .arrow { width: 2.1rem; height: 2.1rem; padding: .5rem; }
  .hero__acts .ghost { padding: .62rem 1.1rem; font-size: .95rem; }
  .film__nav { padding: 0 .6rem .6rem; gap: .4rem; }
  .film__nav a { padding: clamp(.45rem, 1.3svh, .8rem) .7rem; font-size: .8rem; }
  .film__nav .ico { width: 1.25rem; height: 1.25rem; }
}

/* ----- stronger section headings (owner, 13 Nov 2026): heavier, and a short orange rule above ----- */
h1, h2 { font-weight: 800; }
.trust__head::before { content: ""; display: block; width: 3.25rem; height: .3rem; border-radius: 999px; background: var(--orange); }
.foot__col h2 { font-weight: 700; }

/* ----- one size scale for the homepage (owner, 13 Nov 2026) -----
   1  page title (hero)                      largest, unchanged
   2  section headings                       one size for all three ("It all leads back...", "The companies we supply.", "Tell us what you're making.")
   3  business names, the BSE heading, the motto
   4  small headings (certifications)
   Figures (15+, ...) match the section headings instead of outgrowing them. Before this the three
   section headings were three different sizes, two of them close to the page title, and on phones
   the figures were larger than the page title. */
.night__text h2, .trust__head h2, .ask h2 { font-size: clamp(2rem, 4.4vw, 4.2rem); line-height: 1; }
.tally dd { font-size: clamp(2rem, 4.4vw, 4.2rem); }
.night__text p.night__sign { font-size: clamp(1.6rem, 2.8vw, 2.6rem); }
.trust__marks h3 { font-size: clamp(1.25rem, 1.9vw, 1.7rem); }
.night__text p, .trust__head p, .ask p { font-size: clamp(1.05rem, 1.3vw, 1.25rem); }
@media (min-width: 701px) {
  .go, .hero__acts .bar__cta, .hero__acts .ghost, .ask .bar__cta { font-size: 1rem; }
}
@media (max-width: 700px) {
  .night__text h2, .trust__head h2, .ask h2 { font-size: clamp(1.8rem, 8.4vw, 2.2rem); }
  .tally dd { font-size: 2rem; }
  .night__text p.night__sign { font-size: clamp(1.4rem, 6.4vw, 1.75rem); }
  .listing h3 { font-size: 1.5rem; }
  .trust__marks h3 { font-size: 1.25rem; }
}