@charset "UTF-8";
/* ==========================================================================
   Berryque — design system + components
   --------------------------------------------------------------------------
   Palette is taken from the boutique's own logo: deep plum and aubergine with
   a warm gold accent on cream. Nothing here is a framework; the whole sheet is
   smaller than Elementor's reset alone.

   Order: tokens -> reset -> primitives -> components -> utilities.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --bq-plum:        #4a1230;
  --bq-plum-deep:   #350b21;
  --bq-wine:        #7b2149;
  --bq-rose:        #b4587a;
  --bq-blush:       #f6e7ec;
  --bq-gold:        #c2a15c;
  --bq-gold-bright: #d9bd7e;
  --bq-cream:       #fdfaf6;
  --bq-sand:        #f3ebe1;
  --bq-ink:         #241019;
  --bq-muted:       #6d5b64;
  --bq-line:        rgba(74, 18, 48, .14);

  /* Semantic */
  --bq-bg:          var(--bq-cream);
  --bq-surface:     #fff;
  --bq-text:        var(--bq-ink);
  --bq-text-soft:   var(--bq-muted);
  --bq-accent:      var(--bq-wine);

  /* Type — fluid, clamped so it never runs away on ultrawide.
     Scale is a ~1.25 minor third at the small end, ~1.33 at the large end. */
  --bq-font-body:    'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bq-font-display: 'Cormorant Garamond', ui-serif, Georgia, 'Times New Roman', serif;

  --bq-step--1: clamp(.82rem, .79rem + .12vw, .89rem);
  --bq-step-0:  clamp(1rem, .96rem + .2vw, 1.12rem);
  --bq-step-1:  clamp(1.2rem, 1.12rem + .38vw, 1.5rem);
  --bq-step-2:  clamp(1.45rem, 1.3rem + .72vw, 2rem);
  --bq-step-3:  clamp(1.75rem, 1.48rem + 1.32vw, 2.75rem);
  --bq-step-4:  clamp(2.1rem, 1.6rem + 2.4vw, 3.9rem);
  --bq-step-5:  clamp(2.5rem, 1.6rem + 4.2vw, 5.4rem);

  /* Space — one 8px-ish ramp, fluid at the top end */
  --bq-sp-3xs: .25rem;
  --bq-sp-2xs: .5rem;
  --bq-sp-xs:  .75rem;
  --bq-sp-s:   1rem;
  --bq-sp-m:   1.5rem;
  --bq-sp-l:   2.25rem;
  --bq-sp-xl:  clamp(3rem, 2rem + 3vw, 5rem);
  --bq-sp-2xl: clamp(4.5rem, 3rem + 5vw, 8rem);

  /* Shape + depth */
  --bq-radius:    18px;
  --bq-radius-lg: 28px;
  --bq-radius-pill: 999px;
  --bq-shadow-s:  0 1px 2px rgba(53, 11, 33, .05), 0 2px 8px rgba(53, 11, 33, .04);
  --bq-shadow-m:  0 4px 12px rgba(53, 11, 33, .07), 0 12px 32px rgba(53, 11, 33, .07);
  --bq-shadow-l:  0 8px 24px rgba(53, 11, 33, .09), 0 28px 60px rgba(53, 11, 33, .11);

  /* Motion — one duration/easing vocabulary so nothing feels ad hoc */
  --bq-ease:      cubic-bezier(.22, .61, .36, 1);
  --bq-ease-out:  cubic-bezier(.16, 1, .3, 1);
  --bq-dur-fast:  .18s;
  --bq-dur:       .35s;
  --bq-dur-slow:  .7s;

  /* Layout */
  --bq-wrap:      76rem;
  --bq-wrap-tight: 58rem;
  --bq-gutter:    clamp(1.15rem, .6rem + 2.4vw, 3rem);
  --bq-header-h:  76px;
}

/* The brand is a light, warm, printed-paper look; a dark repaint would fight
   the photography rather than help it. We therefore commit to one palette and
   declare it explicitly, so a dark-mode browser cannot substitute its own. */
:root { color-scheme: light; }

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets must clear the sticky header. */
  scroll-padding-top: calc(var(--bq-header-h) + 1rem);
}

body {
  background: var(--bq-bg);
  color: var(--bq-text);
  font-family: var(--bq-font-body);
  font-size: var(--bq-step-0);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
p, li { text-wrap: pretty; }

h1, h2, h3, h4 {
  font-family: var(--bq-font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.012em;
  color: var(--bq-plum);
  text-wrap: balance;
}
h1 { font-size: var(--bq-step-5); }
h2 { font-size: var(--bq-step-4); }
h3 { font-size: var(--bq-step-2); }
h4 { font-size: var(--bq-step-1); }

a { color: var(--bq-accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--bq-plum); }

ul[class], ol[class] { list-style: none; padding: 0; }

/* A single, consistent focus ring. :focus-visible only, so pointer users never
   see it but keyboard users always do. */
:focus-visible {
  outline: 2px solid var(--bq-wine);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--bq-blush); color: var(--bq-plum-deep); }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.bq-wrap {
  width: min(100% - (var(--bq-gutter) * 2), var(--bq-wrap));
  margin-inline: auto;
}
.bq-wrap--tight { max-width: var(--bq-wrap-tight); }

.bq-section { padding-block: var(--bq-sp-2xl); }
.bq-section--tight { padding-block: var(--bq-sp-xl); }
.bq-section--cream { background: var(--bq-cream); }
.bq-section--sand  { background: var(--bq-sand); }
.bq-section--plum  { background: var(--bq-plum); color: #f4e9ee; }
.bq-section--plum h2, .bq-section--plum h3 { color: #fff; }

.bq-stack > * + * { margin-top: var(--bq-sp-s); }
.bq-grid { display: grid; gap: var(--bq-sp-m); }

/* Auto-fit card grids. The min track is a variable so one class covers the
   3-up collection grid and the 4-up gallery without extra breakpoints. */
.bq-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--bq-min, 17rem), 100%), 1fr));
}

.bq-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--bq-plum);
  color: #fff;
  padding: .8rem 1.2rem;
  border-radius: 0 0 var(--bq-radius) 0;
}
.bq-skip-link:focus { left: 0; color: #fff; }

.bq-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. Typographic components
   -------------------------------------------------------------------------- */
.bq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-size: var(--bq-step--1);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bq-wine);
}
.bq-eyebrow::before {
  content: "";
  width: 2.2em; height: 1px;
  background: linear-gradient(90deg, transparent, var(--bq-gold));
}
.bq-section--plum .bq-eyebrow { color: var(--bq-gold-bright); }

.bq-lede {
  font-size: var(--bq-step-1);
  font-weight: 300;
  line-height: 1.55;
  color: var(--bq-text-soft);
  max-width: 46ch;
}
.bq-section--plum .bq-lede { color: rgba(255, 255, 255, .78); }

.bq-em { font-family: var(--bq-font-display); font-style: italic; color: var(--bq-wine); }

/* Section heading block */
.bq-head { max-width: 44rem; margin-bottom: var(--bq-sp-xl); }
.bq-head--center { margin-inline: auto; text-align: center; }
.bq-head--center .bq-lede { margin-inline: auto; }
.bq-head > * + * { margin-top: var(--bq-sp-s); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.bq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .95em 1.9em;
  border-radius: var(--bq-radius-pill);
  font-size: var(--bq-step--1);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--bq-dur-fast) var(--bq-ease),
              box-shadow var(--bq-dur) var(--bq-ease),
              background-color var(--bq-dur) var(--bq-ease),
              color var(--bq-dur) var(--bq-ease);
  /* Comfortable thumb target on mobile. */
  min-height: 46px;
}
.bq-btn:hover { transform: translateY(-2px); }
.bq-btn:active { transform: translateY(0); }

.bq-btn--primary {
  background: var(--bq-plum);
  color: #fff;
  box-shadow: var(--bq-shadow-m);
}
.bq-btn--primary:hover { background: var(--bq-wine); color: #fff; box-shadow: var(--bq-shadow-l); }

.bq-btn--ghost {
  background: transparent;
  color: var(--bq-plum);
  box-shadow: inset 0 0 0 1px var(--bq-line);
}
.bq-btn--ghost:hover { background: var(--bq-surface); box-shadow: inset 0 0 0 1px var(--bq-wine), var(--bq-shadow-s); }

.bq-btn--gold { background: var(--bq-gold); color: var(--bq-plum-deep); }
.bq-btn--gold:hover { background: var(--bq-gold-bright); color: var(--bq-plum-deep); }

/* WhatsApp is the boutique's actual order channel, so it gets its own colour
   rather than being buried as a generic secondary link. */
.bq-btn--whatsapp { background: #25d366; color: #04301a; }
.bq-btn--whatsapp:hover { background: #1fb855; color: #04301a; }

.bq-btn--block { width: 100%; }

/* Text link with a sliding arrow */
.bq-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 500;
  font-size: var(--bq-step--1);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bq-wine);
}
.bq-link-arrow svg { transition: transform var(--bq-dur) var(--bq-ease); }
.bq-link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. Header + navigation
   -------------------------------------------------------------------------- */
.bq-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 250, 246, .82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--bq-dur) var(--bq-ease),
              background-color var(--bq-dur) var(--bq-ease),
              box-shadow var(--bq-dur) var(--bq-ease);
}
/* .is-stuck is toggled from JS once the page scrolls past the hero. */
.bq-header.is-stuck {
  border-bottom-color: var(--bq-line);
  box-shadow: 0 1px 20px rgba(53, 11, 33, .06);
}

.bq-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bq-sp-m);
  min-height: var(--bq-header-h);
}

.bq-brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.bq-brand__mark { width: 44px; height: 44px; flex: none; }
.bq-brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.bq-brand__name {
  font-family: var(--bq-font-display);
  font-size: 1.42rem;
  font-weight: 600;
  color: var(--bq-plum);
  letter-spacing: .01em;
}
.bq-brand__tag {
  font-size: .7rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--bq-gold);
  font-weight: 500;
}

.bq-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.1rem); }
.bq-nav__list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.1rem); list-style: none; margin: 0; padding: 0; }
.bq-nav__link {
  position: relative;
  font-size: var(--bq-step--1);
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--bq-text);
  text-decoration: none;
  padding-block: .4rem;
  white-space: nowrap;
}
.bq-nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--bq-wine);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--bq-dur) var(--bq-ease);
}
.bq-nav__link:hover::after,
.bq-nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.bq-nav__link[aria-current="page"] { color: var(--bq-wine); }

.bq-nav__cta { display: none; }
@media (min-width: 62rem) { .bq-nav__cta { display: inline-flex; } }

/* Burger */
.bq-burger {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--bq-radius-pill);
  flex: none;
}
.bq-burger__box { display: block; width: 22px; height: 14px; position: relative; }
.bq-burger__bar {
  position: absolute;
  left: 0;
  width: 100%; height: 1.5px;
  background: var(--bq-plum);
  border-radius: 2px;
  transition: transform var(--bq-dur) var(--bq-ease), opacity var(--bq-dur-fast) var(--bq-ease);
}
.bq-burger__bar:nth-child(1) { top: 0; }
.bq-burger__bar:nth-child(2) { top: 6.25px; }
.bq-burger__bar:nth-child(3) { top: 12.5px; }
[aria-expanded="true"] .bq-burger__bar:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
[aria-expanded="true"] .bq-burger__bar:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .bq-burger__bar:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }

@media (min-width: 62rem) { .bq-burger { display: none; } }

/* Mobile drawer */
@media (max-width: 61.999rem) {
  .bq-nav {
    position: fixed;
    inset: var(--bq-header-h) 0 0 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: var(--bq-sp-l) var(--bq-gutter) var(--bq-sp-xl);
    background: var(--bq-cream);
    /* Hidden from AT and pointer until opened; visibility keeps it out of the
       tab order without display:none killing the transition. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--bq-dur) var(--bq-ease),
                transform var(--bq-dur) var(--bq-ease),
                visibility 0s linear var(--bq-dur);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .bq-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .bq-nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .bq-nav__item { border-bottom: 1px solid var(--bq-line); }
  .bq-nav__link {
    display: block;
    padding: 1.05rem 0;
    font-size: var(--bq-step-1);
    font-family: var(--bq-font-display);
    letter-spacing: 0;
  }
  .bq-nav__link::after { display: none; }
  .bq-nav__actions { margin-top: var(--bq-sp-l); display: grid; gap: var(--bq-sp-xs); }
  /* Staggered entrance for the drawer items. */
  .bq-nav.is-open .bq-nav__item,
  .bq-nav.is-open .bq-nav__actions {
    animation: bq-drawer-in var(--bq-dur) var(--bq-ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 45ms + 60ms);
  }
}
@keyframes bq-drawer-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* Lock the page behind the open drawer. */
body.bq-nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.bq-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 2rem + 9vw, 8rem) var(--bq-sp-2xl);
  overflow: hidden;
}
.bq-hero__inner {
  display: grid;
  gap: var(--bq-sp-xl);
  align-items: center;
}
@media (min-width: 60rem) {
  .bq-hero__inner { grid-template-columns: 1.05fr .95fr; gap: var(--bq-sp-xl); }
}
.bq-hero__content > * + * { margin-top: var(--bq-sp-m); }
.bq-hero h1 { margin-top: var(--bq-sp-s); }
.bq-hero__actions { display: flex; flex-wrap: wrap; gap: var(--bq-sp-xs); margin-top: var(--bq-sp-l); }

/* Soft brand-coloured light behind the hero. Pure CSS: no image weight, and it
   scales to any viewport without art direction. */
.bq-hero::before,
.bq-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  pointer-events: none;
}
.bq-hero::before {
  width: 42vw; height: 42vw;
  max-width: 620px; max-height: 620px;
  top: -12%; right: -8%;
  background: radial-gradient(circle, var(--bq-blush), transparent 68%);
}
.bq-hero::after {
  width: 34vw; height: 34vw;
  max-width: 460px; max-height: 460px;
  bottom: -14%; left: -10%;
  background: radial-gradient(circle, rgba(194, 161, 92, .34), transparent 68%);
}

/* Hero media collage */
.bq-hero__media { position: relative; }
.bq-hero__figure {
  position: relative;
  border-radius: var(--bq-radius-lg);
  overflow: hidden;
  box-shadow: var(--bq-shadow-l);
  aspect-ratio: 4 / 5;
  background: var(--bq-sand);
}
.bq-hero__figure img { width: 100%; height: 100%; object-fit: cover; }

.bq-hero__badge {
  position: absolute;
  right: clamp(-.5rem, -2vw, -1.5rem);
  bottom: clamp(1rem, 4vw, 2.5rem);
  display: grid;
  gap: .1rem;
  padding: 1rem 1.35rem;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-radius: var(--bq-radius);
  box-shadow: var(--bq-shadow-m);
  text-align: center;
}
.bq-hero__badge strong {
  font-family: var(--bq-font-display);
  font-size: var(--bq-step-2);
  color: var(--bq-plum);
  line-height: 1;
}
.bq-hero__badge span {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bq-muted);
}

/* Trust strip under the hero */
.bq-marks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bq-sp-s) var(--bq-sp-l);
  padding-top: var(--bq-sp-l);
  margin-top: var(--bq-sp-l);
  border-top: 1px solid var(--bq-line);
  list-style: none;
}
.bq-marks li {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--bq-step--1);
  color: var(--bq-text-soft);
}
.bq-marks svg { color: var(--bq-gold); flex: none; }

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.bq-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bq-surface);
  border-radius: var(--bq-radius-lg);
  overflow: hidden;
  box-shadow: var(--bq-shadow-s);
  transition: transform var(--bq-dur) var(--bq-ease-out),
              box-shadow var(--bq-dur) var(--bq-ease-out);
}
.bq-card:hover { transform: translateY(-6px); box-shadow: var(--bq-shadow-l); }

.bq-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bq-sand);
}
.bq-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--bq-dur-slow) var(--bq-ease-out);
}
.bq-card:hover .bq-card__media img { transform: scale(1.05); }

.bq-card__body { display: flex; flex-direction: column; gap: var(--bq-sp-2xs); padding: var(--bq-sp-m); flex: 1; }
.bq-card__title { font-size: var(--bq-step-1); }
.bq-card__text { color: var(--bq-text-soft); font-size: var(--bq-step--1); flex: 1; }
.bq-card__foot { margin-top: var(--bq-sp-s); display: flex; align-items: center; justify-content: space-between; gap: var(--bq-sp-xs); }

.bq-tag {
  align-self: flex-start;
  padding: .32em .9em;
  border-radius: var(--bq-radius-pill);
  background: var(--bq-blush);
  color: var(--bq-wine);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Whole-card link: the anchor covers the card, so the entire tile is clickable
   while the accessible name stays on the real link text. */
.bq-card__link::after { content: ""; position: absolute; inset: 0; }

/* Feature tile (icon + text, no photography) */
.bq-feature {
  display: flex;
  flex-direction: column;
  gap: var(--bq-sp-xs);
  padding: var(--bq-sp-m);
  background: var(--bq-surface);
  border-radius: var(--bq-radius);
  box-shadow: var(--bq-shadow-s);
  transition: transform var(--bq-dur) var(--bq-ease-out), box-shadow var(--bq-dur) var(--bq-ease-out);
}
.bq-feature:hover { transform: translateY(-4px); box-shadow: var(--bq-shadow-m); }
.bq-feature__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 16px;
  background: linear-gradient(140deg, var(--bq-blush), rgba(194, 161, 92, .25));
  color: var(--bq-wine);
}
.bq-feature h3 { font-size: var(--bq-step-1); }
.bq-feature p { color: var(--bq-text-soft); font-size: var(--bq-step--1); }

/* Numbered process steps */
.bq-step { position: relative; padding-top: var(--bq-sp-m); }
.bq-step__num {
  font-family: var(--bq-font-display);
  font-size: var(--bq-step-3);
  color: var(--bq-gold);
  line-height: 1;
  display: block;
  margin-bottom: var(--bq-sp-2xs);
}
.bq-step h3 { font-size: var(--bq-step-1); margin-bottom: .35rem; }
.bq-step p { color: var(--bq-text-soft); font-size: var(--bq-step--1); }
.bq-step::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--bq-gold), transparent);
}

/* --------------------------------------------------------------------------
   9. Split / editorial section
   -------------------------------------------------------------------------- */
.bq-split { display: grid; gap: var(--bq-sp-xl); align-items: center; }
@media (min-width: 58rem) {
  .bq-split { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); }
  .bq-split--reverse .bq-split__media { order: -1; }
}
.bq-split__content > * + * { margin-top: var(--bq-sp-s); }
.bq-split__media {
  position: relative;
  border-radius: var(--bq-radius-lg);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--bq-sand);
  box-shadow: var(--bq-shadow-m);
}
.bq-split__media img { width: 100%; height: 100%; object-fit: cover; }

.bq-checklist { display: grid; gap: var(--bq-sp-xs); list-style: none; padding: 0; margin-top: var(--bq-sp-m); }
.bq-checklist li { display: flex; align-items: flex-start; gap: .7rem; font-size: var(--bq-step--1); }
.bq-checklist svg { flex: none; color: var(--bq-gold); margin-top: .2em; }

/* --------------------------------------------------------------------------
   10. Gallery
   -------------------------------------------------------------------------- */
.bq-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-bottom: var(--bq-sp-xl);
}
.bq-filter {
  padding: .6em 1.35em;
  border-radius: var(--bq-radius-pill);
  font-size: var(--bq-step--1);
  letter-spacing: .06em;
  color: var(--bq-text-soft);
  box-shadow: inset 0 0 0 1px var(--bq-line);
  transition: background-color var(--bq-dur) var(--bq-ease), color var(--bq-dur) var(--bq-ease), box-shadow var(--bq-dur) var(--bq-ease);
  min-height: 42px;
}
.bq-filter:hover { color: var(--bq-plum); box-shadow: inset 0 0 0 1px var(--bq-wine); }
.bq-filter[aria-pressed="true"] { background: var(--bq-plum); color: #fff; box-shadow: none; }

.bq-gallery { display: grid; gap: var(--bq-sp-s); grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
.bq-gallery__item {
  position: relative;
  border-radius: var(--bq-radius);
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--bq-sand);
  cursor: zoom-in;
  box-shadow: var(--bq-shadow-s);
  padding: 0;
  width: 100%;
  transition: opacity var(--bq-dur) var(--bq-ease), transform var(--bq-dur) var(--bq-ease);
}
/* Portrait items span two rows for a magazine rhythm. */
.bq-gallery__item--tall { aspect-ratio: 1 / 1.45; }
.bq-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--bq-dur-slow) var(--bq-ease-out); }
.bq-gallery__item:hover img { transform: scale(1.06); }
.bq-gallery__item[hidden] { display: none; }

.bq-gallery__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem .9rem .8rem;
  background: linear-gradient(transparent, rgba(53, 11, 33, .78));
  color: #fff;
  font-size: var(--bq-step--1);
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--bq-dur) var(--bq-ease), transform var(--bq-dur) var(--bq-ease);
}
.bq-gallery__item:hover .bq-gallery__cap,
.bq-gallery__item:focus-visible .bq-gallery__cap { opacity: 1; transform: none; }

/* Lightbox */
.bq-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--bq-gutter);
  background: rgba(36, 16, 25, .93);
  backdrop-filter: blur(6px);
  border: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  overflow: hidden;
}
.bq-lightbox::backdrop { background: rgba(36, 16, 25, .93); }
.bq-lightbox img {
  max-width: min(100%, 1100px);
  max-height: 82vh;
  width: auto;
  border-radius: var(--bq-radius);
  box-shadow: var(--bq-shadow-l);
  animation: bq-zoom-in var(--bq-dur) var(--bq-ease-out);
}
.bq-lightbox__cap { color: rgba(255, 255, 255, .8); text-align: center; margin-top: var(--bq-sp-s); font-size: var(--bq-step--1); }
.bq-lightbox__close,
.bq-lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  transition: background-color var(--bq-dur) var(--bq-ease);
}
.bq-lightbox__close:hover, .bq-lightbox__nav:hover { background: rgba(255, 255, 255, .26); }
.bq-lightbox__close { top: var(--bq-sp-s); right: var(--bq-sp-s); }
.bq-lightbox__nav--prev { left: var(--bq-sp-s); top: 50%; transform: translateY(-50%); }
.bq-lightbox__nav--next { right: var(--bq-sp-s); top: 50%; transform: translateY(-50%); }
@keyframes bq-zoom-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */
.bq-form { display: grid; gap: var(--bq-sp-m); }
.bq-form__row { display: grid; gap: var(--bq-sp-m); }
@media (min-width: 40rem) { .bq-form__row--2 { grid-template-columns: 1fr 1fr; } }

.bq-field { display: grid; gap: .45rem; }
.bq-field > label { font-size: var(--bq-step--1); font-weight: 500; color: var(--bq-plum); }
.bq-field__req { color: var(--bq-wine); }

.bq-input, .bq-select, .bq-textarea {
  width: 100%;
  padding: .85em 1.05em;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line);
  border-radius: 14px;
  font-size: var(--bq-step-0);
  font-weight: 300;
  color: var(--bq-text);
  transition: border-color var(--bq-dur-fast) var(--bq-ease), box-shadow var(--bq-dur-fast) var(--bq-ease);
  /* iOS zooms the page when a focused input is under 16px. */
  min-height: 48px;
}
.bq-textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }
.bq-input:focus, .bq-select:focus, .bq-textarea:focus {
  outline: none;
  border-color: var(--bq-wine);
  box-shadow: 0 0 0 3px rgba(123, 33, 73, .12);
}
.bq-input::placeholder, .bq-textarea::placeholder { color: #a9959f; }

/* Native select needs an explicit arrow once appearance is reset. Padding-right
   keeps long option text off the chevron.
   NB: the arrow is a data: URI, not an external request. */
.bq-select {
  appearance: none;
  padding-right: 2.8em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%237b2149' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1em center;
  /* Without this the widest <option> can force the control — and on some
     Android builds the whole viewport — wider than the grid column. */
  max-width: 100%;
}

.bq-field--invalid .bq-input,
.bq-field--invalid .bq-select,
.bq-field--invalid .bq-textarea { border-color: #c0392b; }
.bq-field__error { font-size: var(--bq-step--1); color: #c0392b; }

/* Honeypot — visually gone but not display:none, which some bots detect. */
.bq-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.bq-notice {
  padding: var(--bq-sp-m);
  border-radius: var(--bq-radius);
  font-size: var(--bq-step--1);
  border: 1px solid transparent;
}
.bq-notice--ok   { background: #edf8f1; border-color: #b7e0c6; color: #1d6b3c; }
.bq-notice--err  { background: #fdefed; border-color: #f3c4bd; color: #a3291a; }

/* Contact split */
.bq-contact { display: grid; gap: var(--bq-sp-xl); align-items: start; }
@media (min-width: 58rem) { .bq-contact { grid-template-columns: 1fr 1.1fr; gap: clamp(2.5rem, 5vw, 4.5rem); } }

.bq-contact__panel {
  background: var(--bq-surface);
  border-radius: var(--bq-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--bq-shadow-m);
}

.bq-detail { display: flex; gap: var(--bq-sp-s); align-items: flex-start; padding-block: var(--bq-sp-s); }
.bq-detail + .bq-detail { border-top: 1px solid var(--bq-line); }
.bq-detail__icon {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  border-radius: 12px;
  background: var(--bq-blush);
  color: var(--bq-wine);
}
.bq-detail__label { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bq-muted); }
.bq-detail__value { font-size: var(--bq-step-0); color: var(--bq-text); text-decoration: none; }
a.bq-detail__value:hover { color: var(--bq-wine); }

/* --------------------------------------------------------------------------
   12. CTA band + footer
   -------------------------------------------------------------------------- */
.bq-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bq-plum-deep), var(--bq-plum) 45%, var(--bq-wine));
  color: #fff;
  border-radius: var(--bq-radius-lg);
  padding: clamp(2.25rem, 5vw, 4.5rem);
  text-align: center;
}
.bq-cta::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(194, 161, 92, .35), transparent 70%);
  z-index: -1;
}
.bq-cta h2 { color: #fff; }
.bq-cta p { color: rgba(255, 255, 255, .8); max-width: 44ch; margin-inline: auto; margin-top: var(--bq-sp-s); }
.bq-cta__actions { display: flex; flex-wrap: wrap; gap: var(--bq-sp-xs); justify-content: center; margin-top: var(--bq-sp-l); }

.bq-footer { background: var(--bq-plum-deep); color: rgba(255, 255, 255, .72); padding-block: var(--bq-sp-xl) var(--bq-sp-m); }
.bq-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.bq-footer a:hover { color: var(--bq-gold-bright); }
.bq-footer h3 { color: #fff; font-size: var(--bq-step-1); margin-bottom: var(--bq-sp-s); }
.bq-footer__grid { display: grid; gap: var(--bq-sp-xl); }
@media (min-width: 48rem) { .bq-footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr; } }
.bq-footer__list { display: grid; gap: .6rem; list-style: none; padding: 0; font-size: var(--bq-step--1); }
.bq-footer .bq-brand__name { color: #fff; }
.bq-footer__about { font-size: var(--bq-step--1); margin-top: var(--bq-sp-s); max-width: 34ch; }

.bq-social { display: flex; gap: .6rem; margin-top: var(--bq-sp-m); }
.bq-social a {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  transition: background-color var(--bq-dur) var(--bq-ease), transform var(--bq-dur) var(--bq-ease);
}
.bq-social a:hover { background: var(--bq-gold); color: var(--bq-plum-deep); transform: translateY(-3px); }

.bq-footer__bar {
  margin-top: var(--bq-sp-xl);
  padding-top: var(--bq-sp-m);
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: var(--bq-sp-xs);
  justify-content: space-between;
  font-size: var(--bq-step--1);
}

/* Floating WhatsApp action — the boutique's real order channel, one tap away
   on every page. Offset above the iOS home indicator. */
.bq-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #04301a;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .42);
  transition: transform var(--bq-dur) var(--bq-ease-out), box-shadow var(--bq-dur) var(--bq-ease);
}
.bq-fab:hover { transform: scale(1.07); color: #04301a; box-shadow: 0 10px 28px rgba(37, 211, 102, .5); }

/* --------------------------------------------------------------------------
   13. Page header (interior pages)
   -------------------------------------------------------------------------- */
.bq-pagehead {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3rem, 2rem + 6vw, 6rem) var(--bq-sp-xl);
  text-align: center;
  background: linear-gradient(180deg, var(--bq-sand), var(--bq-cream));
  overflow: hidden;
}
.bq-pagehead > * { position: relative; }
.bq-pagehead::before {
  content: "";
  position: absolute;
  inset: -50% -20% auto auto;
  width: 50%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(180, 88, 122, .18), transparent 70%);
  filter: blur(40px);
  z-index: -1;
}
.bq-pagehead h1 { margin-top: var(--bq-sp-s); }
.bq-pagehead .bq-lede { margin: var(--bq-sp-m) auto 0; }

.bq-breadcrumb { font-size: var(--bq-step--1); color: var(--bq-muted); }
.bq-breadcrumb a { color: var(--bq-muted); text-decoration: none; }
.bq-breadcrumb a:hover { color: var(--bq-wine); }

/* --------------------------------------------------------------------------
   14. Motion — reveal on scroll
   -------------------------------------------------------------------------- */
/* Reveal-on-scroll.

   IMPORTANT: the hidden state is scoped to .bq-reveal-ready, a class JS adds to
   <html> only once the IntersectionObserver is actually wired up. Content is
   therefore VISIBLE by default and is hidden only when something is guaranteed
   to reveal it again. Hiding by default is the obvious way to write this and is
   a trap: any JS error, blocked script or slow parse leaves a blank page, and
   crawlers that do not execute JS see nothing at all. */
.bq-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--bq-dur-slow) var(--bq-ease-out),
              transform var(--bq-dur-slow) var(--bq-ease-out);
  transition-delay: var(--bq-delay, 0ms);
  will-change: opacity, transform;
}
.bq-reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Honour the OS setting: kill transforms/animation, keep everything readable.
   This is a hard requirement, not a nicety — motion sensitivity is an
   accessibility issue. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .bq-reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
  .bq-card:hover, .bq-feature:hover, .bq-btn:hover, .bq-fab:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   15. Utilities
   -------------------------------------------------------------------------- */
.bq-center { text-align: center; }
.bq-mt-l { margin-top: var(--bq-sp-l); }
.bq-mt-xl { margin-top: var(--bq-sp-xl); }
.bq-prose > * + * { margin-top: var(--bq-sp-s); }
.bq-prose h2 { margin-top: var(--bq-sp-l); }
.bq-prose h3 { margin-top: var(--bq-sp-m); }
.bq-prose ul { padding-left: 1.2em; }

@media print {
  .bq-header, .bq-fab, .bq-cta, .bq-footer__bar, .bq-filters { display: none !important; }
  body { background: #fff; }
}

/* --------------------------------------------------------------------------
   16. Image placeholder
   --------------------------------------------------------------------------
   Shown wherever the client has not uploaded a photograph yet. It fills the
   same aspect-ratio box a real image would, so swapping one in causes no
   layout shift, and it reads as a deliberate brand tile rather than a gap.
   -------------------------------------------------------------------------- */
.bq-placeholder {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(180, 88, 122, .14), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(194, 161, 92, .18), transparent 55%),
    linear-gradient(150deg, var(--bq-sand), var(--bq-blush));
  color: var(--bq-plum);
}
.bq-placeholder svg { width: 46%; max-width: 150px; height: auto; opacity: .6; }
.bq-placeholder text { fill: currentColor; }

/* Images inside fixed-ratio boxes always fill them. */
.bq-card__media img,
.bq-split__media img,
.bq-hero__figure img,
.bq-gallery__item img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   17. Touch target sizing
   --------------------------------------------------------------------------
   Audited at 320-1920px: several links rendered under 44x44 (contact details
   23px tall, breadcrumb 19px). Rather than inflate the desktop layout, the hit
   area is grown only where the pointer is coarse, which is exactly the case
   WCAG 2.5.8 and the platform HIGs are about.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .bq-detail__value,
  .bq-breadcrumb a,
  .bq-footer__list a,
  .bq-link-arrow {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .bq-nav__link { padding-block: .75rem; }
  .bq-social a { width: 46px; height: 46px; }
}

/* Desktop nav links: 33px tall was above the 24px WCAG minimum but tight.
   Extra block padding brings the hit area up without moving anything. */
@media (min-width: 62rem) {
  .bq-nav__link { padding-block: .7rem; }
}

/* A gallery tile with no photograph yet is not interactive, so it must not
   offer a zoom cursor it cannot honour. Its caption stays visible instead of
   waiting for a hover that means nothing. */
.bq-gallery__item--static { cursor: default; }
.bq-gallery__item--static .bq-gallery__cap { opacity: 1; transform: none; }