/* Generated by tools/sync-from-design.py — edit the design source or
   tools/templates/overlay.css, not this file. */

/* Generated by tools/fetch-fonts.py — do not edit by hand.
   Self-hosted: no third-party font requests, and one file per set of
   bytes rather than one per declared weight. */

/* latin */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/bodoni-moda-italic-latin-270728d2.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;
}

/* latin-ext */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/bodoni-moda-italic-latin-ext-746ad1d7.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/bodoni-moda-normal-latin-fe6c560d.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;
}

/* latin-ext */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/bodoni-moda-normal-latin-ext-e4b1945b.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(assets/fonts/jost-normal-latin-180347d9.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;
}

/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(assets/fonts/jost-normal-latin-ext-7a55c062.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* === From the design file's <helmet> ================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
p,h1,h2,h3,h4,h5,figure,blockquote{margin:0}
p{text-wrap:pretty}
input,textarea,button,select{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
:root{--gold:#c9a86a;--gold-soft:#e6d3a8;--gold-deep:#8a6d3a;--ink:#0a0a0c;--ink-2:#101014;--ink-3:#181820;--paper:#f7f5f1;--fg:#ece9e4;--muted:#a29c93}
html{background:#0a0a0c;overflow-x:hidden}
body,#dc-root{background:var(--ink);color:var(--fg);font-family:"Jost",system-ui,sans-serif;font-size:17px;font-weight:300;line-height:1.65}
a{text-decoration:none;color:var(--gold)}
a:hover{color:var(--gold-soft)}
:focus{outline:none}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
::selection{background:rgba(201,168,106,.3)}
::placeholder{color:#6f6a63}
[data-reveal]{transition:opacity .9s cubic-bezier(.22,.7,.2,1),transform .9s cubic-bezier(.22,.7,.2,1)}
@keyframes bn-kenburns{0%{transform:scale(1.05) translate3d(0,0,0)}100%{transform:scale(1.18) translate3d(-2%,-1.5%,0)}}
@keyframes bn-drift{0%{transform:translate3d(-8%,-4%,0)}100%{transform:translate3d(8%,4%,0)}}
@keyframes bn-marquee{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-50%,0,0)}}
@keyframes bn-marquee-rev{0%{transform:translate3d(-50%,0,0)}100%{transform:translate3d(0,0,0)}}
@keyframes bn-ring{0%{transform:scale(.4);opacity:.85}100%{transform:scale(3.4);opacity:0}}
@keyframes bn-sheen{0%{transform:translate3d(-120%,0,0)}100%{transform:translate3d(320%,0,0)}}
@keyframes bn-bob{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,7px,0)}}
@media (prefers-reduced-motion:reduce){*{animation:none !important}}

/* === Responsive imagery ============================================
   Inline background:url() cannot be sized per viewport or deferred, so
   each one moved here. Rules ending .bn-in only apply once the script
   marks the element as nearly on screen. */
.bn-bg-hero-global-supply{background:center 42% / cover no-repeat}
.bn-bg-hero-global-supply{background-image:url('assets/hero-global-supply-800.webp')}
@media (min-width: 501px){.bn-bg-hero-global-supply{background-image:url('assets/hero-global-supply-1400.webp')}}
@media (min-width: 1201px){.bn-bg-hero-global-supply{background-image:url('assets/hero-global-supply-1774.webp')}}
.bn-bg-cat-fragrance{background:center 34% / cover no-repeat}
.bn-bg-cat-fragrance.bn-in{background-image:url('assets/cat-fragrance-760.webp')}
.bn-bg-cat-skincare{background:center 42% / cover no-repeat}
.bn-bg-cat-skincare.bn-in{background-image:url('assets/cat-skincare-620.webp')}
.bn-bg-cat-haircare{background:center 34% / cover no-repeat}
.bn-bg-cat-haircare.bn-in{background-image:url('assets/cat-haircare-620.webp')}
.bn-bg-cat-cosmetics{background:center 50% / cover no-repeat}
.bn-bg-cat-cosmetics.bn-in{background-image:url('assets/cat-cosmetics-620.webp')}
.bn-bg-cat-kbeauty{background:center 45% / cover no-repeat}
.bn-bg-cat-kbeauty.bn-in{background-image:url('assets/cat-kbeauty-900.webp')}
.bn-bg-coverage-map{background:center top / cover no-repeat}
.bn-bg-coverage-map.bn-in{background-image:url('assets/coverage-map-600.webp')}
@media (min-width: 501px){.bn-bg-coverage-map.bn-in{background-image:url('assets/coverage-map-900.webp')}}
@media (min-width: 1101px){.bn-bg-coverage-map.bn-in{background-image:url('assets/coverage-map-1300.webp')}}

/* ==========================================================================
   Brands Network UK — overlay layer
   --------------------------------------------------------------------------
   The design source styles every element with inline `style` attributes, and
   an inline style beats any selector. So every override below needs
   !important. Nothing here alters the design at its drawn width (1320px
   canvas + 48px gutters): the hover/focus rules just restate what the design
   tool's style-hover attributes and JS handlers did, and every layout rule is
   inside a max-width media query.
   ========================================================================== */

/* --- Hover + focus (was style-hover="…" and the JS mouseenter/focus wiring) */
.hv-gold:hover { color: var(--gold) !important; }
.hv-bg:hover { background: var(--gold-soft) !important; }
.hv-bd:hover { border-color: rgba(201, 168, 106, .5) !important; }
.hv-bdg:hover { border-color: var(--gold) !important; }
.hv-out:hover { border-color: var(--gold) !important; color: var(--gold) !important; }
[data-bn-card]:hover [data-bn-zoom] { transform: scale(1.07); }
[data-bn-input]:focus { border-bottom-color: var(--gold) !important; }

/* --- Mobile menu button: hidden at the design's width, shown below 900px --- */
.bn-menu {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(236, 233, 228, .28);
  color: var(--fg);
  background: none;
}
.bn-menu span {
  display: block;
  width: 18px;
  height: 1px;
  margin: 4px auto;
  background: currentColor;
  transition: transform .3s ease, opacity .2s ease;
}
.bn-menu[aria-expanded="true"] { border-color: var(--gold); color: var(--gold); }
.bn-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.bn-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bn-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ==========================================================================
   Readability
   --------------------------------------------------------------------------
   The design uses #6f6a63 for the small supporting text — form placeholders,
   the contact labels, the form footnote and the footer's bottom line. Measured
   against the dark grounds that lands at 3.5–3.7:1, under the 4.5:1 minimum
   for text this size. #948d84 keeps the same recessive feel at 5.8–6.0:1.
   ========================================================================== */
::placeholder { color: #948d84 !important; }

#enquiry span[style*="#6f6a63"],
#enquiry p[style*="#6f6a63"],
footer div[style*="#6f6a63"],
footer div[style*="#6f6a63"] p { color: #948d84 !important; }

/* Field labels sit on the lighter --ink-2 panel; nudge them up to match. */
.bn-form label > span { color: #9b948a !important; }

/* The design's card scrim only darkens the bottom 12%, but the copy block
   reaches roughly a third up the card — so headings and brand lists land on
   bright product photography. Deepen it at every width. The photography still
   reads clearly across the top two-thirds. */
.bn-cat-grid [data-bn-zoom] + span {
  background: linear-gradient(to top,
    rgba(8, 8, 11, .97) 36%,
    rgba(8, 8, 11, .58) 72%,
    rgba(8, 8, 11, .2) 100%) !important;
}

/* The brand lists run across photography at 12.5px with wide tracking — the
   hardest thing on the page to read. Larger, tighter, and in the lighter
   accent tone, which stays correct under all three accent options. */
.bn-cat-grid a > span[style*="relative"] > span:last-child {
  font-size: 13.5px !important;
  letter-spacing: .05em !important;
  line-height: 1.5 !important;
  color: var(--gold-soft) !important;
}

/* ==========================================================================
   WhatsApp
   --------------------------------------------------------------------------
   The design writes these as plain text links, so the channel these buyers
   actually use looks like any other link. It gets the real logo — that glyph
   is the recognition cue — but not WhatsApp's brand green, which fights the
   champagne-and-ink palette. Prominence comes from placement, the glass
   treatment and the gold, not from a loud colour.
   ========================================================================== */
.bn-wa-icon { flex: none; }

/* Inline links: logo, then the number. Colour is inherited, so these stay
   gold in the top bar and the contact block exactly as the design had them. */
.bn-wa-inline {
  display: inline-flex;
  align-items: center;
  gap: .5em;
}

/* Hero: the design's ghost outline, kept as drawn, plus the logo. Its gold
   hover comes from the design's own style-hover rule (.hv-out). */
.bn-wa-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 11px;
  transition: border-color .3s ease, color .3s ease;
}
.bn-wa-cta .bn-wa-icon { font-size: 20px; }

/* Floating button — hidden until past the hero, so it never competes with the
   hero's own WhatsApp button. Smoked glass over whatever it sits on, with a
   gold hairline; a circle at rest so it covers as little as possible, and the
   label slides out on hover. */
.bn-wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 16px;
  border-radius: 999px;
  /* Deep enough to stay dark over the light portfolio section — at a lighter
     tint the blur turns it into a grey blob there and the gold stops reading.
     Still translucent enough to pick up what is behind it. */
  background: rgba(10, 10, 14, .86);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(201, 168, 106, .5);
  color: var(--gold);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.94);
  transition: opacity .35s ease, transform .35s ease, visibility .35s,
              background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* Without backdrop-filter the translucent fill would let text show through. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bn-wa-float { background: #12121a; }
}

.bn-wa-float.bn-in { opacity: 1; visibility: visible; transform: none; }
.bn-wa-float .bn-wa-icon { font-size: 25px; }
.bn-wa-float span {
  max-width: 0;
  /* A flex item's default min-width:auto is its content width, and that beats
     max-width — without this the label never collapses. */
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width .35s cubic-bezier(.2, .7, .2, 1), opacity .25s ease, margin-left .35s ease;
}
.bn-wa-float:hover,
.bn-wa-float:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: #0a0a0c;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .55);
}
.bn-wa-float:hover span,
.bn-wa-float:focus-visible span { max-width: 150px; opacity: 1; margin-left: 10px; }

@media (max-width: 760px) {
  .bn-wa-float { right: 16px; bottom: 16px; width: 56px; padding: 0; }
  /* No hover on touch — stays a circle. */
  .bn-wa-float span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bn-wa-float { transition: opacity .2s ease, visibility .2s; transform: none; }
  .bn-wa-float span { transition: none; }
  .bn-wa-cta:hover { transform: none; }
}

/* --- Enquiry form status line ------------------------------------------- */
.bn-status {
  grid-column: span 2;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--gold);
}
.bn-status[hidden] { display: none; }

/* ==========================================================================
   Imagery
   ========================================================================== */

/* Deferred backgrounds are fetched 400px before they scroll into view, so they
   are almost always ready by the time they are visible. No fade — an opacity
   trick here would hide the imagery outright if the script ever failed. */

/* The width/height attributes reserve the right space and stop the page
   jumping as images arrive — but the height attribute also sets a literal CSS
   height, which stretches them. This restores the aspect ratio. */
figure img { height: auto !important; }

/* The product lineup photograph is 1062px natively but the design lets it
   stretch to 1600px, so on a wide screen the browser was upscaling it by a
   third and it read as soft. Cap it at its own resolution — it sits centred on
   the paper ground instead of full-bleed, and stays sharp. */
figure img[src*="product-lineup"] { max-width: 1062px !important; }

/* ==========================================================================
   Touch targets — 44px is the minimum comfortable thumb target
   ========================================================================== */
@media (max-width: 900px) {
  /* Top bar: expand the hit area without changing the visible line height. */
  [data-bn-topbar] a { position: relative; }
  [data-bn-topbar] a::after { content: ""; position: absolute; inset: -14px -8px; }

  /* Contact block: real padding, there is room for it. Keep the WhatsApp link
     as inline-flex or its logo stops sitting on the baseline. */
  #enquiry p > a[href^="mailto"] { display: inline-block; padding: 8px 0 !important; }
  #enquiry p > a.bn-wa-inline { padding: 8px 0 !important; }

  .bn-menu { width: 44px; height: 44px; }

  footer a { display: inline-block; padding: 10px 0; }
  footer span[style*="grid"] { gap: 6px !important; }
}

/* ==========================================================================
   1180px and below — the 1320px canvas no longer fits the gutters
   ========================================================================== */
@media (max-width: 1180px) {
  .bn-wrap, .bn-hero-wrap, [data-bn-topbar], [data-bn-header] {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  h1 { font-size: clamp(46px, 6.6vw, 88px) !important; }
  h2 { font-size: clamp(34px, 4.4vw, 58px) !important; }
  [data-bn-header] nav { gap: 24px !important; font-size: 11.5px !important; }
  .bn-portfolio { gap: 48px !important; }
}

/* ==========================================================================
   980px and below — multi-column grids stop working
   ========================================================================== */
@media (max-width: 980px) {
  .bn-portfolio, .bn-enquiry { grid-template-columns: 1fr !important; gap: 48px !important; }
  .bn-cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .bn-cover-grid { grid-template-columns: 1fr 1fr !important; }
  .bn-process { grid-template-columns: 1fr 1fr !important; }
  .bn-process > div { padding: 28px !important; }
  .bn-process > div:nth-child(1),
  .bn-process > div:nth-child(3) { padding-left: 0 !important; }
  .bn-process > div:nth-child(2),
  .bn-process > div:nth-child(4) { padding-right: 0 !important; border-right: 0 !important; }
  .bn-process > div:nth-child(3),
  .bn-process > div:nth-child(4) { border-top: 1px solid rgba(236, 233, 228, .1) !important; }
  .bn-form { padding: 34px !important; }
}

/* ==========================================================================
   900px and below — desktop nav folds into the menu button
   ========================================================================== */
@media (max-width: 900px) {
  .bn-menu { display: block; }
  [data-bn-header] nav {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 6px 32px 22px !important;
    /* Opaque: the hero sits directly behind this panel. */
    background: #08080b;
    border-bottom: 1px solid rgba(201, 168, 106, .2);
  }
  [data-bn-header] nav a {
    padding: 15px 0;
    border-top: 1px solid rgba(236, 233, 228, .1);
    font-size: 13px !important;
  }
  body.bn-nav-open [data-bn-header] nav { display: flex !important; }
  /* The header is translucent until you scroll; the open panel needs a ground. */
  body.bn-nav-open [data-bn-header] { background: rgba(8, 8, 11, .94) !important; }
}

/* ==========================================================================
   760px and below — phone
   ========================================================================== */
@media (max-width: 760px) {
  .bn-wrap, .bn-hero-wrap, [data-bn-topbar], [data-bn-header] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  [data-bn-topbar] { flex-wrap: wrap !important; gap: 6px 18px !important; font-size: 10px !important; }
  /* Let the contact links wrap as whole units — never mid phone number. */
  [data-bn-topbar] > span:last-child {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px 18px !important;
  }
  [data-bn-topbar] a { white-space: nowrap; }
  [data-bn-header] { padding-top: 16px !important; padding-bottom: 16px !important; gap: 14px !important; }
  [data-bn-header] nav { padding-left: 20px !important; padding-right: 20px !important; }

  /* Hero: shorter, and the pull-up matches the shorter header. */
  #top { min-height: 560px !important; margin-top: -71px !important; padding-top: 71px !important; }
  .bn-hero-wrap { padding-top: 96px !important; padding-bottom: 44px !important; }
  h1 { font-size: clamp(34px, 9.2vw, 52px) !important; max-width: none !important; }
  h2 { font-size: clamp(28px, 7.6vw, 40px) !important; max-width: none !important; }
  #top p[data-reveal] + p { font-size: 16.5px !important; }

  /* Stat row reads as a 2×2 block rather than one squeezed line. */
  #top [data-reveal]:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 26px 20px !important;
  }
  #top [data-reveal]:last-child > span:last-child { display: none !important; }

  .bn-cat-grid { grid-template-columns: 1fr !important; }
  .bn-cat-grid > a { grid-column: auto !important; min-height: 280px !important; padding: 24px !important; }
  /* Narrower cards put proportionally more copy over the image — deepen the
     scrim further still. */
  .bn-cat-grid [data-bn-zoom] + span {
    background: linear-gradient(to top,
      rgba(8, 8, 11, .97) 46%,
      rgba(8, 8, 11, .64) 78%,
      rgba(8, 8, 11, .26) 100%) !important;
  }
  .bn-cover-grid { grid-template-columns: 1fr !important; }
  .bn-process { grid-template-columns: 1fr !important; }
  .bn-process > div {
    padding: 24px 0 !important;
    border-right: 0 !important;
    border-top: 1px solid rgba(236, 233, 228, .1) !important;
  }
  .bn-process > div:first-child { border-top: 0 !important; }
  .bn-form { grid-template-columns: 1fr !important; padding: 26px !important; gap: 22px !important; }
  .bn-form label[style*="span 2"], .bn-status, .bn-form button, .bn-form > p { grid-column: auto !important; }

  section { padding-top: 72px !important; padding-bottom: 72px !important; }
  #top { padding-bottom: 0 !important; }

  /* The coverage map's scrim is a left-to-right gradient tuned for a wide
     layout; on a narrow one it covers the map almost completely and the
     section reads as flat black. Run it top-to-bottom instead. */
  #coverage > div:nth-of-type(2) {
    background: linear-gradient(180deg,
      rgba(6, 6, 10, .92) 0%,
      rgba(6, 6, 10, .72) 42%,
      rgba(6, 6, 10, .95) 100%) !important;
  }
  /* The pulsing location markers are placed against the desktop map; on a
     phone they land on top of the cards. */
  #coverage > div[style*="border-radius:50%"] { display: none !important; }

  /* At the design's 26px only two brand names fit across a phone, so the
     marquee reads as random words rather than a run of houses. */
  #top + section > div { font-size: 17px !important; }
  #top + section > div > span { gap: 24px !important; padding-right: 24px !important; }

  /* The brand wall is ~40 logos across. Squeezed into 300px they become
     illegible smudges, so let it stay legible and swipe sideways instead. */
  #brands figure {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  #brands figure img { min-width: 620px; }

  footer > div > div:first-child { flex-direction: column !important; gap: 28px !important; }
  footer > div > div:last-child { flex-direction: column !important; gap: 10px !important; }
}

/* ==========================================================================
   520px and below — the header CTA no longer fits beside the logo
   ========================================================================== */
@media (max-width: 520px) {
  [data-bn-header] > a:last-of-type { display: none !important; }
  [data-bn-topbar] > span:first-child { display: none !important; }
  [data-bn-topbar] { justify-content: center !important; }
  #top [data-reveal] a { width: 100% !important; text-align: center !important; }
}

/* Long email/phone strings must never push the page sideways. */
@media (max-width: 400px) {
  [data-bn-topbar] { font-size: 9.5px !important; letter-spacing: .12em !important; }
}