/*
Theme Name: Wild Love Weddings
Theme URI: https://www.wildloveweddings.fr
Description: Kadence child theme for Wild Love Weddings — editorial / luxury wedding planner. Replicates the design of the Next.js reference site (Newsreader + Libre Franklin, ink/cream palette). Includes a "Projet" custom post type for the portfolio and is Polylang-ready (FR/EN).
Author: Wild Love Weddings
Template: kadence
Version: 0.2.3
Requires PHP: 7.4
Text Domain: wildlove
*/

/* =========================================================================
   Design tokens — mirrored from the Next.js site (tailwind.config.ts)
   ========================================================================= */
:root {
  --wl-ink: #141414;          /* strongest text / accent */
  --wl-ink-medium: #4a4a4a;
  --wl-ink-subtle: #8a8a8a;
  --wl-cream: #f3f2ec;        /* light background */
  --wl-cream-soft: #faf9f5;
  --wl-offwhite: #ffffff;
  --wl-line: #e2e0d7;

  --wl-font-serif: "Newsreader", Georgia, serif;
  --wl-font-sans: "Libre Franklin", system-ui, -apple-system, sans-serif;

  --wl-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wl-content: 1400px;
}

/* =========================================================================
   Palette classes — Kadence does not emit theme.json color presets, so the
   has-{slug}-background-color / has-{slug}-color classes used by the block
   patterns resolve to transparent. Define them explicitly here so cream/ink
   sections render (and white-on-dark text stays legible).
   ========================================================================= */
.has-ink-background-color { background-color: var(--wl-ink) !important; }
.has-ink-medium-background-color { background-color: var(--wl-ink-medium) !important; }
.has-ink-subtle-background-color { background-color: var(--wl-ink-subtle) !important; }
.has-cream-background-color { background-color: var(--wl-cream) !important; }
.has-cream-soft-background-color { background-color: var(--wl-cream-soft) !important; }
.has-offwhite-background-color { background-color: var(--wl-offwhite) !important; }
.has-line-background-color { background-color: var(--wl-line) !important; }

.has-ink-color { color: var(--wl-ink) !important; }
.has-ink-medium-color { color: var(--wl-ink-medium) !important; }
.has-ink-subtle-color { color: var(--wl-ink-subtle) !important; }
.has-cream-color { color: var(--wl-cream) !important; }
.has-offwhite-color { color: var(--wl-offwhite) !important; }

/* =========================================================================
   Base — apply the brand fonts everywhere, overriding Kadence defaults
   ========================================================================= */
body,
.entry-content,
.wp-site-blocks {
  font-family: var(--wl-font-sans);
  color: var(--wl-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.wl-serif,
.entry-title,
.site-title {
  font-family: var(--wl-font-serif);
  font-weight: 200;
  letter-spacing: 0.02em;
  color: var(--wl-ink);
}

::selection { background: var(--wl-ink); color: var(--wl-offwhite); }

a { text-underline-offset: 4px; }

:focus-visible {
  outline: 2px solid var(--wl-ink);
  outline-offset: 3px;
}

/* =========================================================================
   Editorial typography helpers (add as "Additional CSS class" on blocks)
   ========================================================================= */
.wl-h1 {
  font-family: var(--wl-font-serif);
  font-weight: 200;
  line-height: 1.05;
  letter-spacing: 0.01em;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
}
.wl-h2 {
  font-family: var(--wl-font-serif);
  font-weight: 200;
  line-height: 1.15;
  letter-spacing: 0.02em;
  font-size: clamp(2.25rem, 4vw, 2.875rem); /* 36px mobile → 46px desktop */
}
.wl-h4 {
  font-family: var(--wl-font-serif);
  font-weight: 200;
  line-height: 1.15;
  letter-spacing: 0.03em;
  font-size: clamp(1.375rem, 2vw, 1.6875rem);
}
.wl-eyebrow {
  font-family: var(--wl-font-sans);
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.4;
  color: var(--wl-ink);
}
.wl-body {
  font-family: var(--wl-font-sans);
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--wl-ink-medium);
}

/* =========================================================================
   Buttons — flat black fill with uppercase label (matches the Next.js CTA)
   ========================================================================= */
.wl-btn,
.wp-block-button.is-style-wl .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--wl-ink);
  color: var(--wl-offwhite);
  font-family: var(--wl-font-sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  border: 1px solid var(--wl-ink);
  border-radius: 0;
  text-decoration: none;
  transition: background 0.4s var(--wl-ease), color 0.4s var(--wl-ease);
}
.wl-btn:hover,
.wp-block-button.is-style-wl .wp-block-button__link:hover {
  background: transparent;
  color: var(--wl-ink);
}
.wl-btn--outline {
  background: transparent;
  color: var(--wl-ink);
}
.wl-btn--outline:hover { background: var(--wl-ink); color: var(--wl-offwhite); }

/* Language switcher ([wl_language_switcher] shortcode) — compact "En / Fr".
   Custom markup (no <ul>), so no list resets are needed. */
.wl-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1;
}
.wl-lang__item {
  font-family: var(--wl-font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: capitalize;
  text-decoration: none;
  color: var(--wl-ink-subtle);
  transition: color 0.3s var(--wl-ease);
}
.wl-lang__item:hover { color: var(--wl-ink); }
.wl-lang__item.is-active { color: var(--wl-ink); }
.wl-lang__sep {
  color: var(--wl-ink-subtle);
  font-size: 14px;
}

/* Layout helper */
.wl-container {
  width: 100%;
  max-width: var(--wl-content);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}

/* =========================================================================
   Section rhythm — full-bleed sections stack flush (no default block gap /
   white strips between adjacent section backgrounds).
   ========================================================================= */
.entry-content > *,
.wp-block-post-content > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* =========================================================================
   Hero (home) — Figma: 800px desktop / 620px mobile, 540px content,
   16px eyebrow (H5), 46px serif headline (H2), 30% dark overlay.
   ========================================================================= */
.wl-hero { min-height: 620px; }
.wl-hero .wl-eyebrow { font-size: 16px; }
/* Services hero intro line — Figma H4: Newsreader 27px / 115% / 0.04em. */
.wl-hero .wl-h4 { letter-spacing: 0.04em; }
@media (min-width: 1000px) {
  .wl-hero { min-height: 800px; }
}

/* Page heroes = the whole first screen under the header (85px, 101px from 1024px) (2026-11-07, About first,
   then all pages at Amal's request): Home 402_a86143-81 (EN and FR), Services EN
   21_34e6d1-6c / FR 380_a6fb7b-bd, About EN 16_7b8ca5-81 / FR 19_9c77b2-14 (the Portfolio
   cover already does it, .wl-pf-cover below). Replaces Kadence's fixed 800 / 620 / 760px,
   never below 520px (landscape phones). svh = the visible height with the mobile browser
   bars shown, so nothing jumps while scrolling. */
:root { --wl-hero-offset: 85px; }
body.admin-bar { --wl-hero-offset: calc(85px + 46px); }
@media (min-width: 783px) { body.admin-bar { --wl-hero-offset: calc(85px + 32px); } }
@media (min-width: 1024px) {
  :root { --wl-hero-offset: 101px; }
  body.admin-bar { --wl-hero-offset: calc(101px + 32px); }
}
.wp-block-kadence-rowlayout.kb-row-layout-id402_a86143-81 > .kt-row-column-wrap,
.wp-block-kadence-rowlayout.kb-row-layout-id21_34e6d1-6c > .kt-row-column-wrap,
.wp-block-kadence-rowlayout.kb-row-layout-id380_a6fb7b-bd > .kt-row-column-wrap,
.wp-block-kadence-rowlayout.kb-row-layout-id16_7b8ca5-81 > .kt-row-column-wrap,
.wp-block-kadence-rowlayout.kb-row-layout-id19_9c77b2-14 > .kt-row-column-wrap {
  min-height: max(520px, calc(100vh - var(--wl-hero-offset)));
  min-height: max(520px, calc(100svh - var(--wl-hero-offset)));
}
/* About hero (EN 16 / FR 19), 2026-11-07: the sentence under "About" uses the Services
   hero title style (kt-adv-heading21_0893b0-f6: Newsreader 200, 46px / 36px up to 1024px,
   line-height 1.15, 0.02em) instead of its smaller H4 style (27 / 22px). The "About"
   eyebrow already matches "Our services". */
.wp-block-kadence-advancedheading.kt-adv-heading16_d4416d-d2.kt-adv-heading16_d4416d-d2[data-kb-block],
.wp-block-kadence-advancedheading.kt-adv-heading19_78b546-a2.kt-adv-heading19_78b546-a2[data-kb-block] {
  font-size: 46px;
  line-height: 1.15;
  letter-spacing: 0.02em;
}
@media (max-width: 1024px) {
  .wp-block-kadence-advancedheading.kt-adv-heading16_d4416d-d2.kt-adv-heading16_d4416d-d2[data-kb-block],
  .wp-block-kadence-advancedheading.kt-adv-heading19_78b546-a2.kt-adv-heading19_78b546-a2[data-kb-block] { font-size: 36px; }
}
/* About photo (Corsica): simply centred (Amal, 2026-11-07), overriding the Kadence
   position 47% 62% kept in the block. Zoom/shift tried the same day to keep the couple
   under the title, dropped. */
.wp-block-kadence-rowlayout.kb-row-layout-id16_7b8ca5-81,
.wp-block-kadence-rowlayout.kb-row-layout-id19_9c77b2-14 {
  background-size: cover !important;
  background-position: 50% 50% !important;
}

/* =========================================================================
   Header (custom, replaces Kadence's) — Figma: 100px desktop / 84px mobile,
   centered logo, split nav + En/Fr; burger → full-screen dark overlay < 1024px.
   ========================================================================= */
.wl-header {
  position: sticky;          /* stays fixed on scroll — mobile, tablet, desktop */
  top: 0;
  z-index: 100;
  background: var(--wl-offwhite);
  border-bottom: 1px solid transparent;
}
/* Keep the sticky header below the WordPress admin bar when logged in. */
.admin-bar .wl-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .wl-header { top: 46px; } }
.wl-header__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* logo column auto → dead-centered */
  align-items: center;
  /* Figma: ~100px between every entry and on each side of the logo at 1400px
     (Home 165 · About 308 · Portfolio 450–527 · logo 628–771 · Services 872 …).
     Same --wl-nav-gap everywhere; it eases down to 56px at 1024px so the longer FR
     labels (Accueil · À propos · Portfolio) still fit on one line. */
  --wl-nav-gap: clamp(48px, calc(11.7vw - 64px), 100px);
  column-gap: var(--wl-nav-gap);
  height: 84px;
  max-width: var(--wl-content);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
}
.wl-header__logo { grid-column: 2; color: var(--wl-ink); line-height: 0; }
.wl-header__logo svg { display: block; width: 143px; height: auto; }

/* Groups hug the logo (flex-end / flex-start) with even, responsive gaps
   between entries (En/Fr is the 3rd right-hand entry) — Figma spacing, and the
   logo stays perfectly centered whatever the group widths. */
.wl-nav { display: flex; align-items: center; gap: var(--wl-nav-gap); }
.wl-nav--left { grid-column: 1; justify-content: flex-end; }
.wl-nav--right { grid-column: 3; justify-content: flex-start; }
.wl-nav__link {
  font-family: var(--wl-font-sans);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wl-ink);
  text-decoration: none;
  padding: 8px 0;
  white-space: nowrap;
  transition: opacity 0.3s var(--wl-ease);
}
.wl-nav__link:hover { opacity: 0.55; }
.wl-header__lang { display: inline-flex; align-items: center; padding: 8px 0; white-space: nowrap; }
.wl-header__lang .wl-lang__item,
.wl-header__lang .wl-lang__sep { font-size: 12px; }

/* Burger — larger tap target; morphs into an X when the menu opens */
.wl-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent; /* no grey box on tap/press */
  cursor: pointer;
}
.wl-burger:hover,
.wl-burger:focus,
.wl-burger:active { background: transparent; outline: none; }
.wl-burger:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.wl-burger span {
  display: block;
  width: 26px;
  height: 1.5px;
  background: var(--wl-ink);
  transition: transform 0.4s var(--wl-ease), opacity 0.25s ease, background-color 0.3s ease;
}
html.wl-menu-open .wl-burger span { background: var(--wl-offwhite); }
html.wl-menu-open .wl-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
html.wl-menu-open .wl-burger span:nth-child(2) { opacity: 0; transform: scaleX(0.3); }
html.wl-menu-open .wl-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (min-width: 1024px) {
  .wl-header__inner { height: 100px; }
}

@media (max-width: 1023px) {
  .wl-nav { display: none; }
  .wl-burger {
    display: flex;
    position: fixed;      /* pinned to the viewport so it stays with the sticky header */
    top: 18px;
    right: 8px;
    z-index: 10001;       /* above the overlay so it stays clickable */
  }
  /* Offset for the WordPress admin bar (logged-in): the burger's containing
     block is the viewport, so add the bar height to keep it centered in the
     header (which is pushed down by the bar). 32px ≥783px, 46px ≤782px. */
  .admin-bar .wl-burger { top: 50px !important; }
}
@media (max-width: 782px) {
  .admin-bar .wl-burger { top: 64px !important; }
}

/* Full-screen overlay menu */
.wl-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--wl-ink);
  color: var(--wl-offwhite);
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.45s ease, transform 0.45s var(--wl-ease);
  overflow-y: auto;
}
.wl-mobile-menu.is-open { opacity: 1; transform: translateX(0); }
html.wl-menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .wl-mobile-menu { transition: opacity 0.25s ease; transform: none; }
}

.wl-mobile-menu__close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--wl-offwhite);
  cursor: pointer;
}
.wl-mobile-menu__inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* content anchored at the bottom, close to the thumb */
  align-items: flex-start;     /* left-aligned in the panel (mobile + tablet) */
  gap: 32px;
  padding: 40px;
}
.wl-mobile-menu__logo { color: var(--wl-offwhite); line-height: 0; margin-bottom: 8px; }
.wl-mobile-menu__logo svg { width: 76px; height: auto; }

.wl-m-nav { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; }
.wl-m-nav .wl-nav__link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 48px;            /* tap-zone */
  width: 100%;
  font-family: var(--wl-font-serif);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 200;
  text-transform: none;
  letter-spacing: 0.02em;
  text-align: left;
  color: var(--wl-cream);
  padding: 6px 0;
}
.wl-m-nav .wl-nav__link:hover { opacity: 0.6; }

.wl-mobile-menu__rule {
  align-self: stretch;
  width: 100%;
  max-width: 310px;
  margin-left: 0;
  margin-right: auto;
  height: 1px;
  border: 0;
  background: #252525;
  margin-block: 0;
}

.wl-m-lang { display: flex; justify-content: flex-start; align-items: center; gap: 16px; align-self: stretch; }
.wl-m-lang__item {
  font-family: var(--wl-font-sans);
  font-size: 14px;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
}
.wl-m-lang__item.is-active { color: var(--wl-offwhite); }
.wl-m-lang__sep { color: rgba(255, 255, 255, 0.7); }

.wl-m-social {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 40px;
  align-self: stretch;
  padding-top: 8px;
}
.wl-m-social a { color: #949494; line-height: 0; transition: color 0.3s var(--wl-ease); }
.wl-m-social a:hover { color: var(--wl-offwhite); }
.wl-m-social svg { width: 24px; height: 24px; }

/* Tablet (768–1023px): the overlay becomes a 390px dark panel pinned right; a
   40% black backdrop covers the rest to block clicks/scroll behind it. Menu is
   vertically centred with larger type; monogram grows to 100px. Mobile (<768px)
   keeps its full-screen design above, untouched. */
@media (min-width: 768px) and (max-width: 1023px) {
  .wl-mobile-menu {
    background: rgba(0, 0, 0, 0.4);   /* backdrop over the page */
    transform: none;                   /* container no longer slides; the panel does */
  }
  .wl-mobile-menu.is-open { transform: none; }

  .wl-mobile-menu__inner {
    width: 390px;
    max-width: 100%;
    margin-left: auto;                 /* pin to the right edge */
    background: var(--wl-ink);
    justify-content: flex-start;       /* logo top · nav fills/centres · rest bottom */
    transform: translateX(100%);
    transition: transform 0.45s var(--wl-ease);
  }
  .wl-mobile-menu.is-open .wl-mobile-menu__inner { transform: translateX(0); }
  @media (prefers-reduced-motion: reduce) {
    .wl-mobile-menu__inner { transition: none; transform: none; }
  }

  /* Clear the close (X) button: burger spans 18–66px, so start the monogram at
     106px to leave a 40px gap beneath it (Figma). */
  .wl-mobile-menu__logo { margin-top: 66px; margin-bottom: 0; }
  .wl-mobile-menu__logo svg { width: auto; height: 100px; }

  .wl-m-nav { flex: 1 1 auto; justify-content: center; }
  .wl-m-nav .wl-nav__link { font-size: 36px; min-height: 73px; padding: 16px 0; }
}

/* =========================================================================
   Footer (custom, replaces Kadence's) — dark, 3 areas on desktop, stacked on
   mobile with a 2-column menu. Figma spacing.
   ========================================================================= */
.wl-footer { background: var(--wl-ink); color: var(--wl-offwhite); }
.wl-footer a { color: inherit; text-decoration: none; }

.wl-footer__top {
  max-width: var(--wl-content);
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
  padding: 80px clamp(1.5rem, 5vw, 4rem);
}

/* Desktop menu columns */
.wl-footer__menus { flex: 1; display: flex; gap: 24px; }
.wl-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wl-footer__menus .wl-footer__list { min-width: 150px; }
.wl-footer__list a {
  font-family: var(--wl-font-sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wl-offwhite);
  transition: opacity 0.3s var(--wl-ease);
}
.wl-footer__list a:hover { opacity: 0.6; }

/* Center area */
.wl-footer__center { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.wl-footer__logo { line-height: 0; color: var(--wl-offwhite); }
.wl-footer__logo svg { width: 103px; height: auto; }
.wl-footer__desc {
  max-width: 384px;
  margin: 0;
  font-family: var(--wl-font-sans);
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
.wl-footer__social { display: flex; gap: 24px; }
.wl-footer__social a { display: inline-flex; transition: opacity 0.3s var(--wl-ease); }
.wl-footer__social a:hover { opacity: 0.65; }
.wl-footer__social svg { width: 24px; height: 24px; display: block; }
.wl-footer__mobile-menu { display: none; }

/* Contact area (right) */
.wl-footer__contact { flex: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; text-align: right; }
.wl-footer__contact span,
.wl-footer__contact a {
  font-family: var(--wl-font-sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.6;
}
.wl-footer__contact a { transition: opacity 0.3s var(--wl-ease); }
.wl-footer__contact a:hover { opacity: 0.6; }

/* Bottom bar */
.wl-footer__bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 40px 32px;
}
.wl-footer__copy,
.wl-footer__legal { font-family: var(--wl-font-sans); font-size: 11px; letter-spacing: 0.05em; }
.wl-footer__legal { transition: opacity 0.3s var(--wl-ease); }
.wl-footer__legal:hover { opacity: 0.6; }
.wl-footer__sep { opacity: 0.45; font-size: 12px; }

@media (max-width: 1023px) {
  .wl-footer__top { flex-direction: column; align-items: center; gap: 56px; padding: 40px 24px 64px; }
  .wl-footer__menus { display: none; }
  .wl-footer__center { order: 0; gap: 24px; width: 100%; }
  .wl-footer__mobile-menu { display: block; width: 100%; }
  /* Two balanced columns filled top-to-bottom (same order as the desktop
     columns): 3 rows for 5-6 entries, 2 rows for 3-4. */
  .wl-footer__mobile-menu .wl-footer__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 24px 40px;
    max-width: 340px;
    margin-inline: auto;
    text-align: center;
  }
  .wl-footer__mobile-menu .wl-footer__list:not(:has(> li:nth-child(5))) { grid-template-rows: repeat(2, auto); }
  .wl-footer__mobile-menu .wl-footer__list li { margin: 0; }
  .wl-footer__contact { order: 1; align-items: center; text-align: center; }
  .wl-footer__bottom { padding: 16px 24px 28px; } /* links wrap to a 2nd line (Figma mobile) */
  /* © on its own line, so no orphan "|" dangles at the end of it. */
  .wl-footer__copy { flex-basis: 100%; text-align: center; }
  .wl-footer__copy + .wl-footer__sep { display: none; }
}

/* =========================================================================
   Scroll reveal — fade + rise, staggered. Hidden state applies only under
   html.wl-anim (added before paint unless prefers-reduced-motion), so no-JS and
   reduced-motion visitors always see the content. Keep selectors in sync with
   assets/reveal.js.
   ========================================================================= */
html.wl-anim .entry-content .wl-eyebrow,
html.wl-anim .entry-content h1,
html.wl-anim .entry-content h2,
html.wl-anim .entry-content p,
/* 2026-11-07: level-3/4 titles (Services steps 01-03, practical notes, About/Contact cards) and
   list items one by one (Services, Privacy), never inside a carousel: off-screen slides would
   never be revealed. */
html.wl-anim .entry-content h3,
html.wl-anim .entry-content h4,
html.wl-anim .entry-content .kt-svg-icon-list-item-wrap,
html.wl-anim .entry-content .wp-block-list > li,
html.wl-anim .entry-content .wp-block-buttons,
html.wl-anim .entry-content .wp-block-kadence-advancedbtn,
html.wl-anim .entry-content .wp-block-kadence-posts,
html.wl-anim .entry-content .wp-block-kadence-testimonials,
html.wl-anim .entry-content .wl-checker:not(.wl-services-img),
html.wl-anim .wl-footer__menus,
html.wl-anim .wl-footer__center,
html.wl-anim .wl-footer__contact,
html.wl-anim .wl-project-gallery--editorial .wp-block-image,
html.wl-anim .js-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
/* ...except inside carousels (reveal.js skips them too). */
html.wl-anim .entry-content .splide h3,
html.wl-anim .entry-content .splide h4,
html.wl-anim .entry-content .splide .kt-svg-icon-list-item-wrap,
html.wl-anim .entry-content .splide .wp-block-list > li {
  opacity: 1;
  transform: none;
}
html.wl-anim .wl-revealed { /* not "is-visible": Splide (Kadence carousels) uses that class */
  opacity: 1 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html.wl-anim .entry-content *,
  html.wl-anim .js-reveal,
  html.wl-anim .wl-project-gallery--editorial .wp-block-image,
  html.wl-anim .wl-footer__menus,
  html.wl-anim .wl-footer__center,
  html.wl-anim .wl-footer__contact {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================================
   Pattern helpers (used by the /patterns block patterns)
   ========================================================================= */

/* Aspect-ratio boxes — pair with .wl-checker for image placeholders */
.wl-ratio-2-3 { aspect-ratio: 2 / 3; }
.wl-ratio-3-2 { aspect-ratio: 3 / 2; }
.wl-ratio-1-1 { aspect-ratio: 1 / 1; }
.wl-ratio-4-5 { aspect-ratio: 4 / 5; }
.wl-ratio-16-9 { aspect-ratio: 16 / 9; }

.wl-uppercase { text-transform: uppercase; letter-spacing: 0.06em; }

/* ---- Services feature: two edge images (296×484) ---- */
.wl-services { position: relative; padding-top: 0 !important; }
.wl-services-img {
  background-size: cover;
  background-position: center;
  aspect-ratio: 296 / 484;
}
.wl-services-content { padding: 80px 24px 96px; }

/* Mobile / tablet: full-bleed image band at the top; the left image overlaps
   the section above (negative margin), content flows underneath. The media
   breaks out to the full viewport width so images reach the screen edges. */
.wl-services-media {
  position: relative;
  margin-top: -8px !important;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  height: 0;
  padding-bottom: 116%;
}
.wl-services-img { position: absolute; width: 46%; z-index: 2; margin: 0; }
.wl-services-img-left  { left: 0;  top: -56px; }   /* pokes up into the section above */
.wl-services-img-right { right: 0; top: 27%; }

@media (min-width: 1000px) {
  /* Desktop: images pinned to the section edges, never intruding on the 680px
     centre column (Figma). */
  .wl-services-media { display: contents; }
  .wl-services-img {
    position: absolute;
    width: min(296px, calc((100% - 680px) / 2));
    z-index: 2;
  }
  .wl-services-img-left  { left: 0;  bottom: 60px; top: auto; }
  .wl-services-img-right { right: 0; top: 85px; }
  .wl-services-content { padding: 120px 64px 160px; }
}

/* Big serif service words (Planning / Design / …) */
.wl-service-word {
  font-family: var(--wl-font-serif);
  font-weight: 200;
  line-height: 1.05;
  letter-spacing: 0.015em;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  color: var(--wl-ink);
  margin: 0;
}

/* "As seen in" press names (text stand-ins for logos) */
.wl-press-name {
  font-family: var(--wl-font-serif);
  font-weight: 200;
  font-size: clamp(0.95rem, 1.5vw, 1.25rem);
  letter-spacing: 0.02em;
  color: var(--wl-ink-subtle);
  margin: 0;
  white-space: nowrap;
}

/* Portfolio (kadence/posts) — force portrait 2/3 project thumbnails at full
   column width. Kadence sizes the thumb with a padding-bottom ratio box, so we
   override that percentage (150% = 2/3 portrait) rather than aspect-ratio. */
.wp-block-kadence-posts .post-thumbnail {
  width: 100% !important;
  max-width: 100% !important;
  height: 0 !important;
  padding-bottom: 150% !important;
  aspect-ratio: auto !important;
  position: relative;
  overflow: hidden;
}
.wp-block-kadence-posts .post-thumbnail-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0 !important;
}
.wp-block-kadence-posts .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================================
   Portfolio carousel (home) — [wl_portfolio_carousel]
   Centre card at full scale/opacity, neighbours scaled down & faded. Sizing,
   positioning and the scale/opacity transitions are driven inline by
   assets/portfolio-carousel.js; this only styles the chrome. Mirrors the
   React PortfolioCarousel.
   ========================================================================= */
.wl-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 4vw, 56px);
  width: 100%;
  outline: none;
  /* The shortcode isn't reached by the block-gap, so space it explicitly
     (Figma section gap 64px desktop / 40px mobile). */
  margin: clamp(2.5rem, 5vw, 4rem) 0;
}
.wl-carousel__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--wl-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s var(--wl-ease);
}
/* Kill the theme's global button hover chrome (dark fill + shadow) — the
   horizontal arrow nudge is the only affordance we want. */
.wl-carousel__arrow,
.wl-carousel__arrow:hover,
.wl-carousel__arrow:focus,
.wl-carousel__arrow:active {
  background: none !important;
  box-shadow: none !important;
  color: var(--wl-ink) !important;
}
.wl-carousel__arrow--prev svg { transform: scaleX(-1); }
.wl-carousel__arrow--prev:hover { transform: translateX(-4px); }
.wl-carousel__arrow--next:hover { transform: translateX(4px); }
.wl-carousel__arrow:focus-visible { outline: 2px solid var(--wl-ink); outline-offset: 4px; }

.wl-carousel__viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  touch-action: pan-y;
}
.wl-carousel__track {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  height: 100%;
  will-change: transform;
}
.wl-carousel__slide {
  flex: 0 0 auto;
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transform-origin: center center;
  will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
}
.wl-carousel__frame {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--wl-cream);
}
.wl-carousel__frame .wl-carousel__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wl-carousel__frame .wl-checker { position: absolute; inset: 0; }

/* Mobile follows Figma: no arrows, swipe to browse, and the carousel bleeds to
   the screen edges (cancels the section's side padding) so the neighbouring
   images run off-screen instead of being clipped inside a padded column. */
@media (max-width: 767px) {
  .wl-carousel__arrow { display: none; }
  /* Doubled class (.wl-carousel.wl-carousel) raises specificity above WP's
     per-block `... > :where(...) { margin:auto !important }` centering rule,
     which otherwise ties on specificity and wins on source order. */
  .wl-carousel.wl-carousel {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* =========================================================================
   Testimonials — [wl_testimonials] ("Kind words")
   Full-width dark image panel; centred eyebrow + crossfading quote + author.
   Reusable (different image/quotes per instance). Mirrors the Figma design.
   ========================================================================= */
.wl-testimonials {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 640px;
  padding: 80px;
  /* background image + overlay set inline by the shortcode */
  background-repeat: no-repeat;
}
.wl-testimonials__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 800px;
  text-align: center;
  color: var(--wl-offwhite);
}
.wl-testimonials__eyebrow {
  margin: 0;
  font-family: var(--wl-font-serif);
  font-weight: 200;
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wl-offwhite);
}
/* Stack every quote in one grid cell so the panel sizes to the tallest and
   they can crossfade without absolute positioning. */
.wl-testimonials__items {
  display: grid;
  width: 100%;
}
.wl-testimonials__item {
  grid-area: 1 / 1;
  margin: 0;
  /* Kadence styles bare <blockquote> with a left border + padding — strip it so
     the quote stays centered (no horizontal offset). */
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.wl-testimonials__item.is-active {
  opacity: 1;
  pointer-events: auto;
}
.wl-testimonials__quote {
  margin: 0;
  font-family: var(--wl-font-serif);
  font-weight: 200;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: 0.04em;
  color: var(--wl-offwhite);
}
.wl-testimonials__author {
  font-family: var(--wl-font-sans);
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wl-offwhite);
}
.wl-testimonials__dots {
  display: flex;
  gap: 10px;
}
.wl-testimonials__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid var(--wl-offwhite);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0.6;
  transition: background 0.3s var(--wl-ease), opacity 0.3s var(--wl-ease);
  -webkit-tap-highlight-color: transparent;
}
.wl-testimonials__dot.is-active { background: var(--wl-offwhite); opacity: 1; }
.wl-testimonials__dot:focus-visible { outline: 2px solid var(--wl-offwhite); outline-offset: 3px; }

@media (max-width: 767px) {
  .wl-testimonials { min-height: 560px; padding: 80px 24px; }
  .wl-testimonials__content { gap: 40px; max-width: 100%; }
  .wl-testimonials__quote { font-size: 20px; }
}

/* =========================================================================
   Meet Amal / About the founder — [pattern home-meet-amal]
   Two 50/50 halves on cream: a right-aligned 2/3 portrait beside the
   eyebrow + heading + bio + CTA (40px gaps). Figma: left block padding
   120x40 with a 385x578 image; right block padding 64, content max 480.
   ========================================================================= */
/* Drop Kadence's full-width content-edge padding so the halves reach the edges
   (the media/body padding is the only inset — matches Figma). Doubled class beats
   Kadence's `.wp-block-group.alignfull`. */
.wl-about.wl-about {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.wl-about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1400px;
  margin-inline: auto;
}
.wl-about__media {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 120px 40px;
}
.wl-about__img {
  width: 385px;
  max-width: 100%;
  margin: 0;
}
.wl-about__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 385 / 578;
  object-fit: cover;
}
.wl-about__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px;
}
.wl-about__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 480px;
}
.wl-about__content > *,
.wl-about__text > * {
  margin: 0 !important;
}
.wl-about__content .wl-body {
  color: var(--wl-ink);
}
.wl-about__text {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

@media (max-width: 1023px) {
  .wl-about__inner { grid-template-columns: 1fr; }
  .wl-about__media { padding: 24px; justify-content: flex-start; }
  .wl-about__img { width: 100%; max-width: 360px; }
  .wl-about__body { padding: 24px 24px 64px; }
  .wl-about__content { max-width: 100%; }
}

/* Light outline button for dark sections (Kadence/core button style) */
.wp-block-button.is-style-wl-light .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  color: var(--wl-offwhite);
  font-family: var(--wl-font-sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  border: 1px solid var(--wl-offwhite);
  border-radius: 0;
  transition: background 0.4s var(--wl-ease), color 0.4s var(--wl-ease);
}
.wp-block-button.is-style-wl-light .wp-block-button__link:hover {
  background: var(--wl-offwhite);
  color: var(--wl-ink);
}

/* =========================================================================
   Checkerboard placeholder (replaces the "damier" mockup images)
   Add class .wl-checker (or .wl-checker--dark) to an empty block.
   ========================================================================= */
.wl-checker {
  background-color: #eceae2;
  background-image:
    linear-gradient(45deg, #dcd9cd 25%, transparent 25%),
    linear-gradient(-45deg, #dcd9cd 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #dcd9cd 75%),
    linear-gradient(-45deg, transparent 75%, #dcd9cd 75%);
  background-size: 44px 44px;
  background-position: 0 0, 0 22px, 22px -22px, -22px 0;
}
.wl-checker--dark {
  background-color: #9a9a9a;
  background-image:
    linear-gradient(45deg, #8a8a8a 25%, transparent 25%),
    linear-gradient(-45deg, #8a8a8a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #8a8a8a 75%),
    linear-gradient(-45deg, transparent 75%, #8a8a8a 75%);
  background-size: 56px 56px;
  background-position: 0 0, 0 28px, 28px -28px, -28px 0;
}

/* =========================================================================
   Portfolio "Projet" CPT templates (single-projet.php / archive-projet.php)
   ========================================================================= */
.wl-project-cover {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 68vh;
  overflow: hidden;
  background: var(--wl-ink);
}
.wl-project-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wl-project-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.35);
}
.wl-project-cover__inner {
  position: relative;
  z-index: 1;
  color: var(--wl-offwhite);
  padding: clamp(2rem, 6vw, 5rem);
  text-align: center; /* centre the eyebrow + title horizontally (kept at the bottom) */
}
.wl-project-cover__inner .wl-eyebrow,
.wl-project-cover__inner h1 { color: var(--wl-offwhite); }
@media (min-width: 1024px) {
  .wl-project-cover { min-height: 80vh; }
}

.wl-project-body { padding: clamp(3rem, 8vw, 7rem) 24px; }

/* Description — narrow, centred column */
.wl-project-intro { max-width: 720px; margin-inline: auto; text-align: center; }
.wl-project-intro > * { margin-block: 0; }
.wl-project-intro p { font-size: 16px; line-height: 1.85; color: var(--wl-ink-medium); }
.wl-project-intro p + p { margin-top: 1.25rem; }

/* Discreet inline vendor credits, under the description */
.wl-project-credits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 14px;
  margin-top: 2.25rem;
}
.wl-project-credits__item {
  font-family: var(--wl-font-sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wl-project-credits__role { color: var(--wl-ink-subtle); }
.wl-project-credits__name { color: var(--wl-ink); font-weight: 500; margin-left: 5px; }
.wl-project-credits__sep { color: var(--wl-ink-subtle); }

/* Gallery — centred, capped at 1020px, 2-column masonry (natural heights, no crop)
   so portrait images show in full and fit on screen without scrolling. Overrides
   the core gallery's flex + is-cropped layout. */
.wl-project-gallery { max-width: 1020px; margin: clamp(3rem, 6vw, 5rem) auto 0; }
.wl-project-gallery .wp-block-gallery {
  display: block !important;
  column-count: 2;
  column-gap: clamp(16px, 2vw, 28px);
}
.wl-project-gallery .wp-block-gallery .wp-block-image {
  display: block;
  /* !important beats the core gallery rules: the columns-2 calc(50%…) width
     (which in multicol resolves to half a column) and figure.wp-block-image{margin:0}
     (which would remove the vertical gap between photos). */
  width: 100% !important;
  max-width: 100%;
  margin: 0 0 clamp(16px, 2vw, 28px) !important;
  break-inside: avoid;
}
.wl-project-gallery .wp-block-gallery .wp-block-image img {
  width: 100% !important;
  height: auto !important;
  object-fit: initial !important;
}
/* Landscape images (flagged by gallery.js) span both columns, full width. */
.wl-project-gallery .wp-block-gallery .wp-block-image.is-wide { column-span: all; }
@media (max-width: 640px) {
  .wl-project-gallery .wp-block-gallery { column-count: 1; }
}

/* -------------------------------------------------------------------------
   Gallery — EDITORIAL variant (per-project: "Style de galerie" = Éditoriale).
   Asymmetric 12-column composition with full-bleed landscape moments and a
   fade-in-on-scroll reveal (wired in reveal.js). Overrides the 2-col masonry
   above. Toggle has no effect on "Classique" projects.
   ---------------------------------------------------------------------- */
.wl-project-gallery--editorial { max-width: 1240px; }
.wl-project-gallery--editorial .wp-block-gallery {
  display: grid !important;
  column-count: auto; /* cancel the classic multicol */
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 3vw, 48px);
  row-gap: clamp(40px, 7vw, 120px);
  align-items: start;
}
/* Reset the classic masonry item rules inside the grid. */
.wl-project-gallery--editorial .wp-block-gallery .wp-block-image {
  width: auto !important;
  max-width: none;
  margin: 0 !important;
  break-inside: auto;
}
.wl-project-gallery--editorial .wp-block-gallery .wp-block-image img {
  width: 100% !important;
  height: auto !important;
  display: block;
}
/* Portrait rhythm: paired rows with unequal widths + vertical offsets.
   Pattern of 4 so each row pairs cleanly (7+5, then 5+7), alternating side. */
.wl-project-gallery--editorial .wp-block-image:nth-of-type(4n+1) { grid-column: 1 / span 7; }
.wl-project-gallery--editorial .wp-block-image:nth-of-type(4n+2) { grid-column: 8 / span 5; margin-top: clamp(40px, 9vw, 150px) !important; }
.wl-project-gallery--editorial .wp-block-image:nth-of-type(4n+3) { grid-column: 1 / span 5; }
.wl-project-gallery--editorial .wp-block-image:nth-of-type(4n+4) { grid-column: 6 / span 7; margin-top: clamp(30px, 6vw, 110px) !important; }
/* Landscape images = full-bleed moments spanning the whole grid (wins over nth). */
.wl-project-gallery--editorial .wp-block-image.is-wide { grid-column: 1 / -1 !important; margin-top: 0 !important; }
/* Mobile: single natural column, no offsets. */
@media (max-width: 767px) {
  .wl-project-gallery--editorial .wp-block-gallery {
    grid-template-columns: 1fr;
    row-gap: clamp(24px, 8vw, 48px);
  }
  /* 3 classes so this ties the nth-of-type offset rules and wins on source order. */
  .wl-project-gallery--editorial .wp-block-gallery .wp-block-image {
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
  }
}

/* Portfolio archive grid — equal-size cards */
.wl-portfolio-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .wl-portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .wl-portfolio-grid { grid-template-columns: repeat(3, 1fr); } }
.wl-portfolio-card { display: block; text-decoration: none; color: inherit; }
.wl-portfolio-card__media {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--wl-cream);
}
.wl-portfolio-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--wl-ease);
}
.wl-portfolio-card:hover .wl-portfolio-card__media img { transform: scale(1.04); }
.wl-portfolio-card__title {
  margin-top: 1rem;
  font-family: var(--wl-font-serif);
  font-weight: 200;
  font-size: 1.4rem;
}
.wl-portfolio-card__location {
  font-family: var(--wl-font-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--wl-ink-subtle);
  margin-top: 0.35rem;
}

/* =========================================================================
   About page — sections (patterns about-*)
   New structures: split "Our Style & Approach" (image half + dark text panel),
   cream double-quote, founder (two overlapping portraits — reuses .wl-about
   grid), and the two link cards. The hero & closing CTA reuse .wl-hero / core
   cover; "Kind words" reuses the [wl_testimonials] shortcode.
   ========================================================================= */

/* Small editorial divider under a heading — inherits color (works on dark). */
.wl-rule {
  display: block;
  width: 48px;
  height: 1px;
  margin: 0;
  border: 0;
  background: currentColor;
  opacity: 0.4;
}

/* Uppercase text link with an arrow that nudges on hover. */
.wl-arrowlink {
  margin: 0;
  font-family: var(--wl-font-sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.wl-arrowlink a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--wl-ink);
  text-decoration: none;
}
/* Long 24px line-arrow (Figma icon-arrow-button) — masked so it follows the
   link's currentColor and works on any background. */
.wl-arrowlink a::after {
  content: "";
  flex: none;
  width: 24px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2012'%3E%3Cpath%20d='M0%206h22M17%201l5%205-5%205'%20fill='none'%20stroke='%23000'%20stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2012'%3E%3Cpath%20d='M0%206h22M17%201l5%205-5%205'%20fill='none'%20stroke='%23000'%20stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.3s var(--wl-ease);
}
.wl-arrowlink a:hover::after { transform: translateX(5px); }

/* Zero the vertical margins Kadence gives blocks inside .entry-content so the
   flex `gap` on these groups is exact (their specificity beats a single class). */
.wl-linkcards__inner > *,
.wl-linkcard > *,
.wl-linkcard__cta > *,
.wl-split__head > *,
.wl-about__head > *,
.wl-quotes__inner > *,
.wl-quote > *,
.wl-ig__grid > * { margin: 0 !important; }

/* --- Split: image half + dark text panel ("Our Style & Approach") ------- */
.wl-split.wl-split { padding-left: 0 !important; padding-right: 0 !important; }
.wl-split__inner { display: grid; grid-template-columns: 1fr 1fr; }
.wl-split__inner > * { margin: 0 !important; }   /* kill Kadence's leaked figure margin (white gap) */
.wl-split__media { margin: 0 !important; height: 100%; }
.wl-split__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Desktop: the text panel sets the section height (the portrait photo used to
   stretch it to ~1080px); the image just fills its half. */
@media (min-width: 1024px) {
  .wl-split__inner { min-height: 640px; }
  .wl-split__media { position: relative; }
  .wl-split__media img { position: absolute; inset: 0; }
}
.wl-split__panel {
  display: flex;
  align-items: center;
  padding: clamp(40px, 4.5vw, 64px) clamp(48px, 6vw, 96px);
  background: var(--wl-ink);
  color: var(--wl-offwhite);
}
@media (min-width: 1024px) {
  .wl-split__panel { padding-top: 120px; padding-bottom: 120px; }
}
.wl-split__content { display: flex; flex-direction: column; gap: 40px; max-width: 560px; }
.wl-split__content > * { margin: 0 !important; }
.wl-split__head { display: flex; flex-direction: column; gap: 28px; }
.wl-split__panel .wl-eyebrow { color: var(--wl-offwhite); opacity: 0.75; }
.wl-split__panel .wl-h2 { color: var(--wl-offwhite); }
.wl-split__text { display: flex; flex-direction: column; gap: 1.25em; }
.wl-split__text p {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.7;
}

@media (max-width: 1023px) {
  .wl-split__inner { grid-template-columns: 1fr; }
  /* Text panel first, image after — so the image doesn't butt against the hero. */
  .wl-split__panel { padding: 48px 24px 64px; order: 1; }
  .wl-split__media { height: auto; aspect-ratio: 3 / 2; order: 2; }
}

/* --- Cream double testimonial ------------------------------------------- */
.wl-quotes__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 120px);
  max-width: 1100px;
  margin-inline: auto;
}
.wl-quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin: 0;
  text-align: center;
}
.wl-quote__text {
  margin: 0;
  font-family: var(--wl-font-serif);
  font-weight: 200;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.3;
  color: var(--wl-ink);
}
.wl-quote__author {
  font-family: var(--wl-font-sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--wl-ink);
}
@media (max-width: 767px) { .wl-quotes__inner { grid-template-columns: 1fr; } }

/* --- Founder (About variant of .wl-about): two overlapping portraits ---- */
.wl-about--founder .wl-about__body { justify-content: flex-start; }
.wl-about__head { display: flex; flex-direction: column; gap: 24px; }
.wl-about__media--stack {
  align-items: flex-start;
  justify-content: center;
  padding: 64px 40px 110px;
}
.wl-founder-stack { position: relative; width: 340px; max-width: 100%; }
.wl-founder-stack__main { margin: 0; }
.wl-founder-stack__main img {
  display: block;
  width: 100%;
  aspect-ratio: 340 / 420;
  object-fit: cover;
}
.wl-founder-stack__inset { position: absolute; right: -70px; bottom: -70px; width: 62%; margin: 0; }
.wl-founder-stack__inset img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
@media (max-width: 1023px) {
  .wl-about__media--stack { justify-content: flex-start; padding: 24px 24px 90px; }
  .wl-founder-stack { width: 100%; max-width: 340px; }
}
@media (max-width: 520px) {
  .wl-founder-stack__inset { right: -20px; bottom: -40px; }
}

/* --- Link cards ("View the Portfolio" / "Discover the Services") -------- */
/* Horizontal padding (doubled class beats Kadence's full-width group padding):
   24px desktop / 40px mobile per Figma; vertical padding (80px) is set in the
   pattern. */
.wl-linkcards.wl-linkcards { padding-left: 24px !important; padding-right: 24px !important; }
.wl-linkcards__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 936px; /* 444 + 48 + 444 */
  margin-inline: auto;
}
.wl-linkcard { display: flex; flex-direction: column; gap: 32px; margin: 0; }
.wl-linkcard__media {
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--wl-ink);
}
.wl-linkcard__media a { display: block; }
.wl-linkcard__media img {
  display: block;
  width: 100%;
  aspect-ratio: 444 / 528;
  object-fit: cover;
  transition: transform 0.8s var(--wl-ease);
}
.wl-linkcard:hover .wl-linkcard__media img { transform: scale(1.04); }
.wl-linkcard__cta { display: flex; flex-direction: column; gap: 8px; }
.wl-linkcard__title {
  margin: 0;
  font-family: var(--wl-font-serif);
  font-weight: 200;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--wl-ink);
}
.wl-linkcard__title em { font-style: italic; }
@media (max-width: 767px) {
  .wl-linkcards.wl-linkcards { padding-left: 40px !important; padding-right: 40px !important; }
  .wl-linkcards__inner { grid-template-columns: 1fr; gap: 48px; max-width: 360px; }
  .wl-linkcard__media img { aspect-ratio: 310 / 440; }
}

/* =========================================================================
   Contact page — sections (patterns contact-*)
   Inquire form ([wl_contact_form]) · dark FAQ accordion ([wl_faq], native
   <details>) · Instagram strip. All custom / dependency-free.
   ========================================================================= */

/* --- Inquire: image + notes beside the form ----------------------------- */
.wl-contact.wl-contact { padding-left: 0 !important; padding-right: 0 !important; }
/* Desktop: a 2-column grid — the left column (head · image · notes) is ONE flex
   item (`.wl-contact__aside`) so its gaps are tight and the tall form never
   stretches them. On mobile the aside is dissolved (`display:contents`) so its
   children can reorder around the form (notes drop below it). */
.wl-contact__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 6vw, 96px);
  align-items: start;
  max-width: 1240px;
  margin-inline: auto;
  padding: 80px 24px;
}
.wl-contact__aside { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 124px; }
.wl-contact__main { display: flex; flex-direction: column; gap: 48px; }
.wl-contact__main > * { margin: 0 !important; }
.wl-contact__aside > * { margin: 0 !important; }
.wl-contact__head { display: flex; flex-direction: column; gap: 20px; }
.wl-contact__head > * { margin: 0 !important; }
.wl-contact__intro { display: flex; flex-direction: column; gap: 1.25em; }
.wl-contact__intro p { margin: 0 !important; color: var(--wl-ink-medium); font-size: 15px; line-height: 1.6; }
.wl-contact__media { margin: 0; }
.wl-contact__media img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.wl-contact__notes { display: flex; flex-direction: column; gap: 1.5em; }
.wl-contact__notes p { margin: 0 !important; color: var(--wl-ink-medium); font-size: 15px; line-height: 1.6; }

/* --- The form ----------------------------------------------------------- */
.wl-form { width: 100%; }
.wl-form__form { display: flex; flex-direction: column; gap: 28px; margin-top: 0; }
.wl-form__form > * { margin: 0 !important; }
.wl-field { display: flex; flex-direction: column; gap: 10px; }
.wl-field__label {
  font-family: var(--wl-font-sans);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--wl-ink);
  line-height: 1.4;
}
.wl-form__req { color: var(--wl-ink); }
.wl-field input,
.wl-field select,
.wl-field textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--wl-font-sans);
  font-size: 15px;
  color: var(--wl-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(20, 20, 20, 0.22);   /* hairline */
  border-radius: 0;
  padding: 10px 0 12px;
  transition: border-color 0.3s var(--wl-ease);
}
.wl-field textarea { resize: vertical; min-height: 120px; }
.wl-field input::placeholder,
.wl-field textarea::placeholder { color: #b8b6b0; }
.wl-field input:focus,
.wl-field select:focus,
.wl-field textarea:focus { outline: none; border-bottom-color: var(--wl-ink); }
.wl-field select {
  appearance: none;
  -webkit-appearance: none;
  color: #b8b6b0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201l5%205%205-5'%20fill='none'%20stroke='%23141414'%20stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 11px 7px;
  padding-right: 28px;
}
/* Honeypot — visually hidden, off-screen (bots fill it, humans don't). */
.wl-field--hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wl-form__fine { color: var(--wl-ink-subtle); font-size: 12px; line-height: 1.6; }
.wl-form__actions { display: flex; justify-content: flex-end; }
.wl-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 34px;
  background: var(--wl-ink);
  color: var(--wl-offwhite);
  font-family: var(--wl-font-sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: opacity 0.3s var(--wl-ease);
}
.wl-form__submit:hover { opacity: 0.85; }
.wl-form__note { padding: 16px 18px; font-size: 14px; line-height: 1.5; }
.wl-form__note--ok { background: var(--wl-cream); border-left: 3px solid var(--wl-ink); color: var(--wl-ink); }
.wl-form__note--err { background: #f7ece9; border-left: 3px solid #a3392b; color: #7a2a20; }

/* Thank-you panel shown in place of the form after a successful submission. */
.wl-thanks {
  background: var(--wl-cream);
  border: 1px solid var(--wl-line);
  padding: clamp(28px, 4vw, 48px);
}
.wl-thanks__eyebrow { margin: 0 0 clamp(16px, 2vw, 24px); }
.wl-thanks__msg {
  margin: 0;
  font-family: var(--wl-font-serif);
  font-weight: 200;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--wl-ink);
}

/* --- FAQ (dark) --------------------------------------------------------- */
.wl-faq { background: var(--wl-ink); color: var(--wl-offwhite); }
.wl-faq__inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(40px, 6vw, 120px);
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(64px, 8vw, 120px) 24px;
  align-items: start;
}
.wl-faq__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.wl-faq__intro > * { margin: 0 !important; }
.wl-faq__intro .wl-h2 { color: var(--wl-offwhite); }
.wl-faq__intro p { color: rgba(255, 255, 255, 0.75); font-size: 15px; line-height: 1.7; max-width: 42ch; }
.wl-faq__list { width: 100%; }
.wl-faq__item { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.wl-faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  font-family: var(--wl-font-sans);
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wl-offwhite);
}
.wl-faq__q::-webkit-details-marker { display: none; }
.wl-faq__q::after {
  content: "+";
  flex: none;
  font-family: var(--wl-font-sans);
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  color: var(--wl-offwhite);
}
.wl-faq__item[open] .wl-faq__q::after { content: "\2212"; }
/* overflow:hidden so JS can animate the height; the bottom spacing lives on the
   inner <p> so it is clipped (no gap) when the answer is collapsed to height 0. */
.wl-faq__answer { overflow: hidden; }
.wl-faq__answer p { margin: 0; padding-bottom: 28px; color: rgba(255, 255, 255, 0.7); font-size: 15px; line-height: 1.7; max-width: 62ch; }
/* FAQ answers must appear instantly on toggle — exempt them from scroll-reveal
   (a closed <details> is never observed, so its answer would otherwise fade in
   slowly the first time it is opened). */
html.wl-anim .wl-faq__answer p { opacity: 1 !important; transform: none !important; transition: none !important; }
html.wl-anim .wl-k-faq .kt-accordion-panel p { opacity: 1 !important; transform: none !important; transition: none !important; }

/* --- Instagram strip ---------------------------------------------------- */
/* Drop Kadence's full-width content-edge padding so the only horizontal inset is
   the inner's 24px (doubled class beats `.wp-block-group.alignfull`). */
.wl-ig.wl-ig { padding-left: 0 !important; padding-right: 0 !important; }
.wl-ig__inner { max-width: 1400px; margin-inline: auto; padding: 80px 24px; }
.wl-ig__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.wl-ig__item { margin: 0; overflow: hidden; }
.wl-ig__item a { display: block; }
.wl-ig__item img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.8s var(--wl-ease);
}
.wl-ig__item:hover img { transform: scale(1.05); }
.wl-ig__follow { margin: 32px 0 0; text-align: right; }
.wl-ig__follow a {
  font-family: var(--wl-font-sans);
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--wl-ink);
  text-decoration: none;
}

@media (max-width: 1023px) {
  /* Stack head · image · form · notes — dissolve the aside so its children can
     reorder around the form (notes drop below it). */
  .wl-contact__inner { display: flex; flex-direction: column; gap: 40px; }
  .wl-contact__aside { display: contents; position: static; }
  .wl-contact__main { order: 1; }
  .wl-contact__media { order: 2; }
  .wl-contact__notes { order: 3; margin-top: 16px; padding-top: 40px; border-top: 1px solid var(--wl-line); } /* clear separation from the form */
  .wl-faq__inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 767px) {
  .wl-contact__inner { padding: 56px 24px; }
  .wl-contact__media { display: none; } /* decorative — hide on mobile so the form is reached sooner */
  .wl-form__actions { justify-content: stretch; }
  .wl-form__submit { width: 100%; }
  .wl-ig__grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .wl-ig__inner { padding: 80px 24px 120px; }
}

/* =========================================================================
   Services page — sections
   .wl-feature (alternating image/text splits), .wl-process (timeline),
   .wl-venues (heading + non-clickable [wl_venues_carousel]). Hero & CTA reuse
   core cover; the carousel reuses the portfolio carousel JS/CSS.
   ========================================================================= */

/* --- Feature: image on one side, text on the other (order set in markup) - */
.wl-feature.wl-feature { padding-left: 0 !important; padding-right: 0 !important; }
.wl-feature__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(64px, 8vw, 120px) 24px;
  align-items: start;
}
.wl-feature__media { margin: 0; }
.wl-feature__media img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.wl-feature__content { display: flex; flex-direction: column; gap: 32px; max-width: 520px; }
.wl-feature__content > * { margin: 0 !important; }
.wl-feature__head { display: flex; flex-direction: column; gap: 24px; }
.wl-feature__head > * { margin: 0 !important; }
.wl-feature__text { display: flex; flex-direction: column; gap: 1.25em; }
.wl-feature__text p { margin: 0 !important; color: var(--wl-ink-medium); font-size: 15px; line-height: 1.7; }
/* Tighten the space between two adjacent feature sections on desktop (~150px
   less): drop the 2nd section's top padding and shorten the 1st's bottom.
   Only when both share the same background (white/offwhite, or cream) — a
   cream section next to a white one keeps its full padding on both sides. */
@media (min-width: 1024px) {
  .wl-feature:not(.has-cream-background-color):has(+ .wl-feature:not(.has-cream-background-color)) .wl-feature__inner,
  .wl-feature.has-cream-background-color:has(+ .wl-feature.has-cream-background-color) .wl-feature__inner { padding-bottom: 80px; }
  .wl-feature:not(.has-cream-background-color) + .wl-feature:not(.has-cream-background-color) .wl-feature__inner,
  .wl-feature.has-cream-background-color + .wl-feature.has-cream-background-color .wl-feature__inner { padding-top: 0; }
}

/* --- Process: vertical timeline with alternating steps ------------------ */
.wl-process { background: var(--wl-cream); }
.wl-process__inner { max-width: 1080px; margin-inline: auto; padding: clamp(64px, 8vw, 120px) 24px; }
.wl-process__head { display: flex; flex-direction: column; gap: 12px; text-align: center; margin-bottom: clamp(40px, 6vw, 72px); }
.wl-process__head > * { margin: 0 !important; }
.wl-process__timeline { position: relative; }
.wl-process__timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--wl-ink);
  opacity: 0.25;
  transform: translateX(-50%);
}
.wl-process__step { position: relative; width: 50%; box-sizing: border-box; }
.wl-process__step + .wl-process__step { margin-top: clamp(32px, 5vw, 56px); }
.wl-process__step > * { margin: 0 !important; }
.wl-process__step--left { margin-right: 50%; padding-right: 56px; text-align: right; }
.wl-process__step--right { margin-left: 50%; padding-left: 56px; text-align: left; }
/* tick connecting the step to the centre line, level with the STEP eyebrow */
.wl-process__step::after {
  content: "";
  position: absolute;
  top: 9px;
  width: 40px;
  height: 1px;
  background: var(--wl-ink);
  opacity: 0.4;
}
.wl-process__step--left::after { right: 0; }
.wl-process__step--right::after { left: 0; }
.wl-process__title { font-family: var(--wl-font-serif); font-weight: 200; font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.1; letter-spacing: 0.02em; color: var(--wl-ink); margin-top: 20px !important; }
.wl-process__body { display: flex; flex-direction: column; gap: 1.25em; margin-top: 24px !important; }
.wl-process__body p { margin: 0 !important; color: var(--wl-ink-medium); font-size: 14px; line-height: 1.7; }
.wl-process__cta { display: flex; justify-content: center; margin-top: clamp(48px, 6vw, 72px); }

/* --- Venues heading block (carousel reuses .wl-carousel) ---------------- */
.wl-venues__inner { max-width: 760px; margin-inline: auto; padding: clamp(64px, 8vw, 120px) 24px 0; text-align: center; display: flex; flex-direction: column; gap: 20px; }
.wl-venues__inner > * { margin: 0 !important; }
.wl-venues__intro { color: var(--wl-ink-medium); }
.wl-venues__carousel { padding-bottom: clamp(64px, 8vw, 120px); }
/* The venues carousel presents venues only — its slides are not links. */
.wl-carousel--static .wl-carousel__slide { cursor: default; }

@media (max-width: 1023px) {
  /* Stack in source order: Weddings = text then image; Social = image then text. */
  .wl-feature__inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 900px) {
  .wl-process__timeline::before { left: 8px; }
  .wl-process__step { width: 100%; margin: 0 !important; padding-left: 48px !important; padding-right: 0 !important; text-align: left !important; }
  .wl-process__step + .wl-process__step { margin-top: 48px !important; }
  /* Short tick from the line to just before the text (line 8px → text 48px). */
  .wl-process__step::after { left: 8px !important; right: auto !important; width: 24px !important; }
}

/* =========================================================================
   Legal pages (Legal Notice / Privacy Policy) — .wl-legal
   A single readable column of long-form text. !important on the rhythm beats
   Kadence's .entry-content element margins.
   ========================================================================= */
.wl-legal { background: var(--wl-offwhite); }
.wl-legal .wl-legal__inner {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(64px, 8vw, 120px) 24px;
}
.wl-legal .wl-legal__inner > * { margin-top: 1.25rem !important; margin-bottom: 0 !important; }
.wl-legal .wl-legal__inner > :first-child { margin-top: 0 !important; }
.wl-legal .wl-legal__inner > h2 { margin-top: 2.75rem !important; }
.wl-legal__updated {
  font-family: var(--wl-font-sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--wl-ink-subtle);
}
.wl-legal h2 {
  font-family: var(--wl-font-serif);
  font-weight: 200;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--wl-ink);
}
.wl-legal p,
.wl-legal li {
  font-family: var(--wl-font-sans);
  font-size: 15px;
  line-height: 1.8;
  color: var(--wl-ink-medium);
}
.wl-legal ul { padding-left: 1.25rem; margin-top: 0.75rem !important; }
.wl-legal li { margin-top: 0.5rem; }
.wl-legal a { color: var(--wl-ink); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================================
   Cookie consent banner (dependency-free) — inc/consent.php + assets/consent.js
   Bottom-anchored cream card; "Refuse" and "Accept" are equal-weight buttons
   (CNIL: refusing is as easy as accepting). Hidden for no-JS visitors (their
   analytics never activates anyway).
   ========================================================================= */
.wl-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10050;
  background: var(--wl-cream);
  border-top: 1px solid var(--wl-line);
  box-shadow: 0 -8px 30px rgba(20, 20, 20, 0.10);
  transform: translateY(100%);
  transition: transform 0.35s var(--wl-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.wl-consent.is-open { transform: translateY(0); }
.wl-consent__inner {
  max-width: 1400px;
  margin-inline: auto;
  padding: clamp(18px, 2.4vw, 28px) clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
}
.wl-consent__text { flex: 1 1 auto; }
.wl-consent__title {
  font-family: var(--wl-font-sans);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wl-ink);
  margin: 0 0 8px;
}
.wl-consent__body {
  font-family: var(--wl-font-sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--wl-ink-medium, #4a4a4a);
  margin: 0;
  max-width: 760px;
}
.wl-consent__link {
  color: var(--wl-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.wl-consent__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
}
.wl-consent__btn {
  font-family: var(--wl-font-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 28px;
  border: 1px solid var(--wl-ink);
  cursor: pointer;
  transition: background 0.25s var(--wl-ease), color 0.25s var(--wl-ease), opacity 0.25s var(--wl-ease);
  white-space: nowrap;
}
.wl-consent__btn--accept { background: var(--wl-ink); color: var(--wl-offwhite); }
.wl-consent__btn--accept:hover { opacity: 0.85; }
.wl-consent__btn--refuse { background: transparent; color: var(--wl-ink); }
.wl-consent__btn--refuse:hover { background: var(--wl-ink); color: var(--wl-offwhite); }

/* Footer "Cookies" opener — reset native <button> to match the legal links */
.wl-footer__cookies {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  cursor: pointer;
}

@media (max-width: 767px) {
  .wl-consent__inner { flex-direction: column; align-items: stretch; gap: 16px; }
  .wl-consent__actions { }
  .wl-consent__btn { flex: 1 1 0; padding: 14px 16px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .wl-consent { transition: none; }
}

/* =========================================================================
   Contact form — RGPD consent checkbox (inc/contact-form.php)
   ========================================================================= */
.wl-field--consent { margin-top: 0.5rem; }
.wl-consent-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.wl-consent-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  accent-color: var(--wl-ink);
  cursor: pointer;
}
.wl-consent-check__text {
  font-family: var(--wl-font-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--wl-ink-medium, #4a4a4a);
}
.wl-consent-check__text a {
  color: var(--wl-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wl-consent-check__text .wl-form__req { color: var(--wl-ink); }

/* =========================================================================
   V3 copy — new sections (key figures, vision, "If I were…", next steps,
   good to know, beyond the city, our role, featured stories, journal grid).
   Built from core groups + our classes; the rhythm is set with flex/grid gaps
   (children's Kadence margins are zeroed).
   ========================================================================= */
.wl-figures.wl-figures,
.wl-vision.wl-vision,
.wl-steps.wl-steps,
.wl-gtk.wl-gtk,
.wl-beyond.wl-beyond,
.wl-stories.wl-stories { padding-left: 0 !important; padding-right: 0 !important; }

.wl-figures__inner > *, .wl-figure > *,
.wl-vision__inner > *, .wl-manifesto > *,
.wl-steps__inner > *, .wl-steps__grid > *, .wl-step > *,
.wl-gtk__inner > *, .wl-gtk__grid > *, .wl-gtk__item > *,
.wl-beyond__inner > *, .wl-beyond__grid > *, .wl-beyond__card > *,
.wl-stories__inner > * { margin: 0 !important; }

/* Centred small line under a section (e.g. "Vision · Design · Produce"). */
.wl-arrowlink.has-text-align-center a { justify-content: center; }

/* --- Key figures (home) -------------------------------------------------- */
.wl-figures { background: var(--wl-offwhite); }
.wl-figures__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1080px;
  margin-inline: auto;
  padding: clamp(56px, 7vw, 96px) 24px;
  text-align: center;
}
.wl-figure { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.wl-figure__num {
  font-family: var(--wl-font-serif);
  font-weight: 200;
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
  color: var(--wl-ink);
}
.wl-figure__label { max-width: 22ch; color: var(--wl-ink-medium); }
@media (max-width: 767px) { .wl-figures__inner { grid-template-columns: 1fr; gap: 48px; } }

/* --- Our vision (about): centred text + serif manifesto ------------------- */
.wl-vision { background: var(--wl-offwhite); }
.wl-vision__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(72px, 9vw, 120px) 24px;
  text-align: center;
}
.wl-vision__inner .wl-body { color: var(--wl-ink-medium); font-size: 15px; }
.wl-manifesto { display: flex; flex-direction: column; gap: 6px; }
.wl-manifesto p {
  font-family: var(--wl-font-serif);
  font-weight: 200;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--wl-ink);
}
.wl-manifesto p:nth-child(3) { font-style: italic; }

/* --- What happens next (contact) ---------------------------------------- */
.wl-steps { background: var(--wl-cream); }
.wl-steps__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
  max-width: 1080px;
  margin-inline: auto;
  padding: clamp(64px, 8vw, 110px) 24px;
}
.wl-steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 64px); }
.wl-step { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 1px solid rgba(20, 20, 20, 0.25); }
.wl-step__num { font-family: var(--wl-font-serif); font-weight: 200; font-size: 44px; line-height: 1; color: var(--wl-ink); }
.wl-step__title { font-family: var(--wl-font-serif); font-weight: 200; font-size: 26px; line-height: 1.2; color: var(--wl-ink); }
.wl-step p:not(.wl-step__num) { font-size: 14px; line-height: 1.7; color: var(--wl-ink-medium); }
@media (max-width: 767px) { .wl-steps__grid { grid-template-columns: 1fr; } }

/* --- Good to know (Marrakech) ------------------------------------------- */
.wl-gtk { background: var(--wl-cream); }
.wl-gtk__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 5vw, 64px);
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(64px, 8vw, 110px) 24px;
  text-align: center;
}
.wl-gtk__head { display: flex; flex-direction: column; gap: 16px; }
.wl-gtk__head > * { margin: 0 !important; }
.wl-gtk__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 48px); width: 100%; text-align: left; }
.wl-gtk__item { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid rgba(20, 20, 20, 0.25); }
.wl-gtk__item h3 { font-family: var(--wl-font-sans); font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--wl-ink); }
.wl-gtk__item p { font-size: 14px; line-height: 1.7; color: var(--wl-ink-medium); }
@media (max-width: 1023px) { .wl-gtk__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wl-gtk__grid { grid-template-columns: 1fr; } }

/* --- Beyond the city (Marrakech): 3 destination cards ------------------- */
.wl-beyond { background: var(--wl-offwhite); }
.wl-beyond__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 4vw, 56px);
  max-width: 1200px;
  margin-inline: auto;
  padding: 0 24px clamp(64px, 8vw, 110px);
}
.wl-beyond__title { font-family: var(--wl-font-serif); font-weight: 200; font-style: italic; font-size: clamp(28px, 3vw, 40px); line-height: 1.15; text-align: center; }
.wl-beyond__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); width: 100%; }
.wl-beyond__card { display: flex; flex-direction: column; gap: 14px; }
.wl-beyond__card figure { margin: 0 0 8px !important; overflow: hidden; }
.wl-beyond__card img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.wl-beyond__card h4 { font-family: var(--wl-font-serif); font-weight: 200; font-size: 28px; line-height: 1.15; color: var(--wl-ink); }
.wl-beyond__card p:not(.wl-eyebrow) { font-size: 14px; line-height: 1.7; color: var(--wl-ink-medium); }
.wl-beyond__card .wl-eyebrow { color: var(--wl-ink-subtle); }
@media (max-width: 900px) { .wl-beyond__grid { grid-template-columns: 1fr; max-width: 420px; } }

/* --- Our role (Marrakech): reuses the dark .wl-faq layout + a list ------ */
.wl-role__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.wl-role__list li {
  margin: 0;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--wl-font-serif);
  font-weight: 200;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.25;
  color: var(--wl-offwhite);
}
.wl-faq .wl-arrowlink a { color: var(--wl-offwhite); }
.wl-faq__intro .wl-eyebrow { color: var(--wl-offwhite); opacity: 0.75; }

/* Signature line inside a feature text ("Moroccan hospitality. French elegance."). */
.wl-feature__text p.wl-signature {
  font-family: var(--wl-font-serif);
  font-weight: 200;
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.3;
  color: var(--wl-ink);
}
/* Bulleted list inside a feature text (guest experience, …). */
.wl-feature__text ul { margin: 0; padding-left: 1.1em; color: var(--wl-ink-medium); font-size: 15px; line-height: 1.9; }
.wl-feature__text ul li { margin: 0; }

/* --- Featured stories (portfolio) & journal grid — [wl_featured_stories] / [wl_journal] */
.wl-stories { background: var(--wl-offwhite); }
.wl-stories__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 4vw, 56px);
  max-width: 1200px;
  margin-inline: auto;
  padding: 0 24px clamp(64px, 8vw, 110px);
}
.wl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); width: 100%; }
.wl-card { display: flex; flex-direction: column; gap: 12px; color: var(--wl-ink); text-decoration: none; }
.wl-card__media { overflow: hidden; margin-bottom: 8px; background: var(--wl-cream); }
.wl-card__media img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; transition: transform 0.8s var(--wl-ease); }
.wl-card:hover .wl-card__media img { transform: scale(1.04); }
.wl-card__eyebrow { margin: 0; color: var(--wl-ink-subtle); }
.wl-card__title { margin: 0; font-family: var(--wl-font-serif); font-weight: 200; font-size: 28px; line-height: 1.15; }
.wl-card__text { margin: 0; font-size: 14px; line-height: 1.7; color: var(--wl-ink-medium); }
.wl-card .wl-arrowlink { margin-top: 4px; }
.wl-cards__empty { margin: 0; text-align: center; color: var(--wl-ink-subtle); }
.wl-journal .wl-card__media img { aspect-ratio: 4 / 3; }
@media (max-width: 900px) { .wl-cards { grid-template-columns: 1fr; max-width: 420px; } }
.wl-card a { color: inherit; text-decoration: none; }
.wl-card__media { display: block; }
.wl-card__title a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.wl-card > * { margin: 0 !important; }
.wl-card .wl-arrowlink { margin-top: 4px !important; }
.wl-cards.wl-stories__grid { margin-bottom: clamp(2.5rem, 5vw, 4rem) !important; }
.wl-journal-page .wl-stories__inner { padding-top: clamp(4rem, 10vw, 7rem); gap: 20px; }
.wl-journal-page .wl-cards { margin-top: clamp(2rem, 4vw, 3.5rem) !important; }

/* =========================================================================
   Gallery — HORIZONTAL variant (per-project: "Style de galerie" = Horizontale).
   One left-to-right scrolling strip that mixes text panels (intro, details,
   "next up") with the photos. Vertical mouse-wheel is mapped to horizontal in
   assets/hscroll.js; trackpad + touch swipe + keyboard work natively.
   ========================================================================= */
/* Immersive: hide the site chrome so the gallery fills the screen. */
body.wl-immersive:not(.wl-projet-sections) .wl-header,
body.wl-immersive:not(.wl-projet-sections) .wl-footer,
body.wl-immersive:not(.wl-projet-sections) .wl-burger,
body.wl-immersive:not(.wl-projet-sections) .wl-mobile-menu { display: none !important; }
/* "Sections Kadence" projects are immersive only where they scroll horizontally
   (desktop + landscape tablets); phones and portrait tablets get a normal vertical
   page with the site header and footer. */
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  body.wl-immersive.wl-projet-sections .wl-header,
  body.wl-immersive.wl-projet-sections .wl-footer,
  body.wl-immersive.wl-projet-sections .wl-burger,
  body.wl-immersive.wl-projet-sections .wl-mobile-menu { display: none !important; }
}
body.wl-immersive .wl-project--horizontal { margin: 0; }
/* Stop horizontal overscroll from triggering the browser's swipe-to-go-back/forward
   (Chrome / Edge / Firefox, two-finger trackpad swipe) anywhere on the page. The
   iOS / Android system edge-swipe can't be disabled by a web page. */
html:has(body.wl-immersive),
body.wl-immersive { overscroll-behavior-x: none; }

.wl-hscroll {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  height: 100vh;
  height: 100svh; /* avoids mobile browser-chrome jump where supported */
  background: var(--wl-offwhite); /* strip keeps the light page background */
  cursor: grab;
  scrollbar-width: thin;
  scrollbar-color: rgba(20, 20, 20, 0.25) transparent;
}
/* Only the cover (intro) + the vendor index (details) are dark slides; photos and
   the end panel stay on the light strip. Light type scoped to those two panels. */
.wl-hpanel--intro,
.wl-hpanel--details { background: var(--wl-ink); }
.wl-hpanel--intro .wl-eyebrow,
.wl-hpanel--details .wl-eyebrow { color: rgba(255, 255, 255, 0.6); }
.wl-hpanel--intro .wl-h1 { color: var(--wl-offwhite); }
.wl-hpanel--intro .wl-rule { color: rgba(255, 255, 255, 0.55); }
/* Keep clear of the WP admin bar when logged in. */
body.admin-bar .wl-hscroll { height: calc(100vh - 32px); height: calc(100svh - 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .wl-hscroll { height: calc(100vh - 46px); height: calc(100svh - 46px); }
}
.wl-hscroll.is-grabbing { cursor: grabbing; }
.wl-hscroll:focus-visible { outline: 2px solid var(--wl-ink); outline-offset: -3px; }
.wl-hscroll__track {
  --wl-hgap: clamp(24px, 4vw, 80px);
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  gap: var(--wl-hgap);
  /* No left padding: the dark cover is a full-bleed slide flush with the edge. */
  padding-inline: 0 clamp(24px, 8vw, 160px);
  box-sizing: content-box;
}

/* Text panels */
.wl-hpanel {
  flex: 0 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.wl-hpanel--intro {
  width: min(88vw, 520px);
  padding: clamp(36px, 5vw, 72px) clamp(28px, 3.5vw, 56px);
}
.wl-hpanel--intro .wl-eyebrow { margin: 0 0 1.25rem; }
.wl-hpanel--intro .wl-h1 { margin: 0 0 1.5rem; }
.wl-hpanel--intro .wl-rule { margin: 0 0 1.75rem; }
.wl-hpanel__intro p { font-size: 16px; line-height: 1.85; color: rgba(255, 255, 255, 0.72); margin: 0 0 1rem; }
.wl-hpanel__intro > :last-child { margin-bottom: 0; }

.wl-hpanel--details {
  width: min(92vw, 760px);
  padding: clamp(36px, 5vw, 72px) clamp(28px, 3.5vw, 56px);
}
.wl-hpanel--details .wl-eyebrow { margin: 0 0 2rem; }
/* Vendor index: a wide grid read left → right; as many ~220px columns as fit. */
.wl-hdetails {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  column-gap: clamp(32px, 4vw, 72px);
  row-gap: clamp(20px, 2.4vw, 32px);
}
.wl-hdetails__item { margin: 0; }
.wl-hdetails__role {
  display: block;
  font-family: var(--wl-font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.35rem;
}
.wl-hdetails__name {
  display: block;
  font-family: var(--wl-font-serif);
  font-weight: 200;
  font-size: 20px;
  line-height: 1.25;
  color: var(--wl-offwhite);
}

.wl-hpanel--end { width: min(82vw, 440px); align-items: flex-start; }
.wl-hpanel--end .wl-eyebrow { margin: 0 0 1rem; }
.wl-hpanel__next { display: inline-block; margin: 0 0 2.5rem; color: var(--wl-ink); text-decoration: none; }
.wl-hpanel__next:hover { opacity: 0.6; }
.wl-hpanel__back { margin: 0; }

/* Photos → horizontal filmstrip, sized by height so widths vary by orientation.
   Heights + vertical alignment vary per photo for an editorial rhythm (full-height
   landscape "moments" + smaller portraits offset up/down), like the reference. */
.wl-hscroll .wp-block-gallery {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  width: max-content;
  height: 100%;
  margin: 0 !important;
  column-count: auto;
  gap: var(--wl-hgap);
}
.wl-hscroll .wp-block-gallery .wp-block-image {
  flex: 0 0 auto !important;
  height: 70%;
  align-self: center !important; /* !important: beats core gallery alignment */
  width: auto !important;
  max-width: none;
  margin: 0 !important;
  break-inside: auto;
}
/* Rhythm for portraits (3-step): offset up, offset down, centred taller. */
.wl-hscroll .wp-block-gallery .wp-block-image:nth-of-type(3n+1) { height: 60%; align-self: flex-start !important; }
.wl-hscroll .wp-block-gallery .wp-block-image:nth-of-type(3n+2) { height: 82%; align-self: flex-end !important; }
.wl-hscroll .wp-block-gallery .wp-block-image:nth-of-type(3n+3) { height: 70%; align-self: center !important; }
/* Landscape photos (flagged by gallery.js) become full-height "moments". */
.wl-hscroll .wp-block-gallery .wp-block-image.is-wide { height: 100%; align-self: center !important; }
.wl-hscroll .wp-block-gallery .wp-block-image img {
  height: 100% !important;
  width: auto !important;
  max-width: none;
  object-fit: cover;
  display: block;
}

/* Desktop opening = a 50/50 split: the dark cover fills the left half of the
   screen and the first photo the right half, flush (no gap) and full height,
   cropped to fit (object-fit: cover). The rest of the strip keeps its rhythm. */
@media (min-width: 900px) {
  .wl-hpanel--intro {
    width: 50vw;
    margin-right: calc(var(--wl-hgap) * -1); /* cancel the gap → photo sits flush */
    padding: clamp(48px, 6vw, 96px) clamp(40px, 7vw, 140px);
  }
  .wl-hpanel--intro > * { max-width: 560px; }
  .wl-hscroll .wp-block-gallery .wp-block-image:first-of-type {
    width: 50vw !important;
    height: 100% !important;
    align-self: stretch !important;
  }
  .wl-hscroll .wp-block-gallery .wp-block-image:first-of-type img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  /* Wider vendor index so names breathe (2–3 columns depending on screen). */
  .wl-hpanel--details {
    width: clamp(640px, 62vw, 1080px);
    padding: clamp(48px, 6vw, 96px) clamp(40px, 5.5vw, 104px);
  }
}

/* Mobile: "stories" carousel — one full screen per swipe. Every slide (cover,
   each photo, details, end) is exactly one screen wide; scroll-snap makes a swipe
   land on the next slide and scroll-snap-stop stops a fast swipe from skipping. */
@media (max-width: 767px) {
  .wl-hscroll { scroll-snap-type: x mandatory; }
  .wl-hscroll__track { --wl-hgap: 0px; padding-inline: 0; }

  /* No vertical scrolling at all on mobile: lock the page (no rubber-band, no
     pull-to-refresh, browser bars don't collapse), only allow horizontal panning
     (+ pinch-zoom) on the strip, and fill the visible height (dvh). */
  html:has(body.wl-immersive),
  body.wl-immersive { overflow: hidden; overscroll-behavior: none; }
  .wl-hscroll { touch-action: pan-x pinch-zoom; height: 100dvh; }
  body.admin-bar .wl-hscroll { height: calc(100dvh - 46px); }

  /* Text slides — never scroll. Content is centred when it fits; if it ever
     overflows it starts at the top rather than being cut on both sides. */
  .wl-hpanel,
  .wl-hpanel--intro,
  .wl-hpanel--details,
  .wl-hpanel--end {
    width: 100vw;
    padding: 72px 28px 48px; /* top clears the fixed Back button */
    scroll-snap-align: start;
    scroll-snap-stop: always;
    justify-content: flex-start;
    overflow: hidden;
  }
  .wl-hpanel > :first-child { margin-top: auto; }
  .wl-hpanel > :last-child { margin-bottom: auto; }

  /* Long vendor lists must fit on one screen: 2 columns from 7 vendors, and
     smaller type from 15. */
  .wl-hdetails:has(> .wl-hdetails__item:nth-child(7)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 16px;
  }
  .wl-hdetails:has(> .wl-hdetails__item:nth-child(7)) .wl-hdetails__name { font-size: 17px; }
  .wl-hpanel--details:has(.wl-hdetails__item:nth-child(15)) { padding-top: 64px; padding-bottom: 24px; }
  .wl-hpanel--details:has(.wl-hdetails__item:nth-child(15)) .wl-eyebrow { margin-bottom: 1.25rem; }
  .wl-hdetails:has(> .wl-hdetails__item:nth-child(15)) { row-gap: 10px; }
  .wl-hdetails:has(> .wl-hdetails__item:nth-child(15)) .wl-hdetails__name { font-size: 14px; line-height: 1.2; }
  .wl-hdetails:has(> .wl-hdetails__item:nth-child(15)) .wl-hdetails__role { font-size: 9px; margin-bottom: 0.2rem; }
  /* Short phones (e.g. iPhone SE): use that compact layout from 7 vendors. */
  @media (max-height: 740px) {
    .wl-hpanel--details:has(.wl-hdetails__item:nth-child(7)) { padding-top: 64px; padding-bottom: 24px; }
    .wl-hpanel--details:has(.wl-hdetails__item:nth-child(7)) .wl-eyebrow { margin-bottom: 1.25rem; }
    .wl-hdetails:has(> .wl-hdetails__item:nth-child(7)) { row-gap: 10px; }
    .wl-hdetails:has(> .wl-hdetails__item:nth-child(7)) .wl-hdetails__name { font-size: 14px; line-height: 1.2; }
    .wl-hdetails:has(> .wl-hdetails__item:nth-child(7)) .wl-hdetails__role { font-size: 9px; margin-bottom: 0.2rem; }
  }

  /* Photo slides. :nth-of-type(n) matches every photo with enough specificity to
     override the desktop size/offset rhythm. Portraits fill the screen; landscapes
     are shown whole (contained) rather than cropped to a narrow sliver. */
  .wl-hscroll .wp-block-gallery .wp-block-image:nth-of-type(n) {
    width: 100vw !important;
    height: 100% !important;
    align-self: stretch !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .wl-hscroll .wp-block-gallery .wp-block-image:nth-of-type(n) img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  /* !important: core's `.is-cropped … :not(#individual-image) img {object-fit:cover}`
     carries ID-level specificity. */
  .wl-hscroll .wp-block-gallery .wp-block-image.is-wide:nth-of-type(n) img { object-fit: contain !important; }
  /* …except the first photo, which always fills the whole screen (zoomed in). */
  .wl-hscroll .wp-block-gallery .wp-block-image:first-of-type:nth-of-type(n) img { object-fit: cover !important; }
}

/* Immersive horizontal gallery — discreet back button + bottom progress bar. */
.wl-hback {
  position: fixed;
  top: clamp(16px, 3vw, 28px);
  left: clamp(16px, 3vw, 28px);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--wl-font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wl-offwhite);
  text-decoration: none;
  /* No border. A soft dark translucent pill keeps it legible over the light
     strip, the photos and the dark panels alike. */
  background: rgba(20, 20, 20, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 9px 16px 9px 13px;
  border: 0;
  border-radius: 999px;
  transition: background 0.25s var(--wl-ease);
}
.wl-hback:hover,
.wl-hback:focus-visible { background: rgba(20, 20, 20, 0.8); }
.wl-hback__arrow { display: block; transition: transform 0.25s var(--wl-ease); }
.wl-hback:hover .wl-hback__arrow { transform: translateX(-3px); }
body.admin-bar .wl-hback { top: calc(32px + clamp(16px, 3vw, 28px)); }
@media screen and (max-width: 782px) {
  body.admin-bar .wl-hback { top: calc(46px + clamp(16px, 3vw, 28px)); }
}
@media (prefers-reduced-motion: reduce) {
  .wl-hback__arrow { transition: none; }
}

/* Stories-style progress segments — mobile carousel only (built by hscroll.js).
   White with a soft shadow over dark slides / full-bleed photos; dark over the
   light slides (end panel, contained landscapes) via .is-on-light. */
.wl-hstories { display: none; }
@media (max-width: 767px) {
  .wl-hstories {
    position: fixed;
    top: 10px;
    left: 12px;
    right: 12px;
    z-index: 61;
    display: flex;
    gap: 3px;
    pointer-events: none;
    --wl-seg-track: rgba(255, 255, 255, 0.35);
    --wl-seg-fill: #ffffff;
    filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.35));
  }
  .wl-hstories.is-on-light {
    --wl-seg-track: rgba(20, 20, 20, 0.15);
    --wl-seg-fill: var(--wl-ink);
    filter: none;
  }
  .wl-hstories__seg {
    flex: 1 1 0;
    height: 2px;
    border-radius: 2px;
    background: var(--wl-seg-track);
    overflow: hidden;
    transition: background-color 0.25s var(--wl-ease);
  }
  .wl-hstories__fill {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--wl-seg-fill);
    transform: scaleX(0);
    transform-origin: left center;
    transition: background-color 0.25s var(--wl-ease);
  }
  /* The segments are the progress indicator on mobile → hide the scrollbar. */
  .wl-hscroll { scrollbar-width: none; }
  .wl-hscroll::-webkit-scrollbar { display: none; }
  /* Make room under the segments for the Back button. */
  .wl-hback { top: 24px; }
  body.admin-bar .wl-hstories { top: calc(46px + 10px); }
  body.admin-bar .wl-hback { top: calc(46px + 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .wl-hstories__seg,
  .wl-hstories__fill { transition: none; }
}

/* =========================================================================
   Services — "Our role" summary (dark): title + 3 numbered steps linking to
   the detailed sections below (#vision #design #production) + B&W photo.
   ========================================================================= */
.wl-summary { background: var(--wl-ink); color: var(--wl-offwhite); }
.wl-summary__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(40px, 7vw, 112px);
  align-items: center;
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(64px, 8vw, 120px) 24px;
}
.wl-summary__inner > *, .wl-summary__content > *, .wl-summary__steps > *,
.wl-summary__step > *, .wl-summary__body > * { margin: 0 !important; }
.wl-summary__content { display: flex; flex-direction: column; max-width: 600px; justify-self: end; width: 100%; }
.wl-summary .wl-eyebrow { color: var(--wl-offwhite); opacity: 0.75; }
.wl-summary .wl-h2 { color: var(--wl-offwhite); margin-top: 16px !important; }
.wl-summary__steps { margin-top: clamp(32px, 4vw, 56px) !important; }
.wl-summary__step {
  position: relative;
  display: grid;
  grid-template-columns: clamp(64px, 7vw, 112px) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(24px, 3vw, 36px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.wl-summary__step:first-child { padding-top: 0; }
.wl-summary__step:last-child { border-bottom: 0; padding-bottom: 0; }
.wl-summary__num {
  font-family: var(--wl-font-serif);
  font-weight: 200;
  font-size: clamp(52px, 6vw, 88px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--wl-offwhite);
}
.wl-summary__body { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.wl-summary__title {
  font-family: var(--wl-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wl-offwhite);
}
/* The whole step is clickable (stretched link). */
.wl-summary__title a { color: inherit; text-decoration: none; text-underline-offset: 5px; }
.wl-summary__title a::after { content: ""; position: absolute; inset: 0; }
.wl-summary__step:hover .wl-summary__title a,
.wl-summary__title a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; }
.wl-summary__title a:focus-visible { outline: none; }
.wl-summary__step:focus-within { outline: 1px solid rgba(255, 255, 255, 0.4); outline-offset: 8px; }
.wl-summary__step:has(a:focus:not(:focus-visible)) { outline: none; }
.wl-summary__body p { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.72); }
.wl-summary__media { justify-self: start; width: 100%; max-width: 560px; }
.wl-summary__media img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; filter: grayscale(1) contrast(1.05); }
@media (max-width: 899px) {
  .wl-summary__inner { grid-template-columns: 1fr; }
  .wl-summary__content { justify-self: stretch; max-width: none; }
  .wl-summary__media { max-width: 420px; }
}

/* In-page anchors (summary links, #venues…): smooth, and clear of the sticky header. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.entry-content [id] { scroll-margin-top: 100px; }
@media (max-width: 1023px) { .entry-content [id] { scroll-margin-top: 72px; } }

/* =========================================================================
   About — founder, "Vogue" layout: oversized title overlapping a large central
   portrait, a small inset photo on the left and a white text card on the right.
   Stacks (title · portrait · centred text, inset hidden) below 1024px.
   ========================================================================= */
.wl-vogue { background: var(--wl-offwhite); }
.wl-vogue.wl-vogue { padding-left: 0 !important; padding-right: 0 !important; }
.wl-vogue__inner {
  --wl-vogue-t: clamp(40px, 4.4vw, 64px);
  position: relative;
  display: grid;
  /* inset · big portrait · text card, each on its own side */
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.3fr) minmax(0, 1.9fr);
  grid-template-rows: auto auto 1fr;
  max-width: 1320px;
  margin-inline: auto;
  padding: clamp(56px, 7vw, 96px) 24px clamp(72px, 9vw, 120px);
}
.wl-vogue__inner > *, .wl-vogue__card > * { margin: 0 !important; }
.wl-vogue__title {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  align-self: start;
  /* one line on the right, above the card and aligned with its left edge: it
     only crosses the portrait's light top-right corner, so black stays legible */
  margin: clamp(56px, 6vw, 88px) 0 0 -48px !important;
  position: relative;
  z-index: 3;
  font-family: var(--wl-font-serif);
  font-weight: 200;
  font-size: var(--wl-vogue-t);
  line-height: 0.95;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--wl-ink);
}
.wl-vogue__portrait {
  grid-column: 2;
  grid-row: 1 / 4;
  z-index: 1;
}
.wl-vogue__portrait img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 35% center; }
.wl-vogue__inset {
  grid-column: 1;
  grid-row: 2 / 4;
  align-self: end;
  margin: 0 -40px 14% 0 !important;   /* tucks 40px over the portrait's left edge */
  z-index: 2;
}
.wl-vogue__inset img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; box-shadow: 0 24px 48px rgba(20, 20, 20, 0.14); }
.wl-vogue__card {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: start;
  margin: clamp(130px, 13vw, 190px) 0 0 -48px !important;   /* 48px over the portrait's right edge */
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(32px, 3.6vw, 56px);
  background: var(--wl-ink);
  color: var(--wl-offwhite);
  box-shadow: 0 24px 60px rgba(20, 20, 20, 0.12);
}
.wl-vogue__card .wl-eyebrow { color: var(--wl-offwhite); opacity: 0.7; }
.wl-vogue__lead {
  margin-bottom: 4px !important;
  font-family: var(--wl-font-serif);
  font-weight: 200;
  font-size: clamp(20px, 1.7vw, 25px);
  line-height: 1.25;
  color: var(--wl-offwhite);
}
.wl-vogue__card .wl-body { font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, 0.75); }
.wl-vogue__card .wl-arrowlink { margin-top: 8px !important; }
.wl-vogue__card .wl-arrowlink a { color: var(--wl-offwhite); }
@media (max-width: 1023px) {
  .wl-vogue__inner { grid-template-columns: 1fr; grid-template-rows: none; justify-items: center; }
  .wl-vogue__title { grid-column: 1; grid-row: 1; justify-self: center; width: min(100%, 520px); margin: 0 0 24px !important; text-align: left; font-size: clamp(48px, 13vw, 72px); }
  .wl-vogue__portrait { grid-column: 1; grid-row: 2; width: min(100%, 520px); margin-top: 0 !important; }
  .wl-vogue__inset { display: none; }
  .wl-vogue__card {
    grid-column: 1; grid-row: 3; width: min(100%, 520px);
    margin: 0 !important; padding: 40px 28px;
    text-align: center; align-items: center;
  }
}

/* Testimonials placed right after a cream feature (About: "Our couples") read as
   its continuation — same cream, no doubled top spacing. */
.wl-feature.has-cream-background-color + .wl-quotes { padding-top: 0 !important; }

/* =========================================================================
   Home — portfolio on black: oversized serif title overlapping the top of the
   carousel. Scoped to .wl-home-portfolio so other carousels are untouched.
   ========================================================================= */
.wl-home-portfolio { color: var(--wl-offwhite); }
.wl-home-portfolio .wl-home-portfolio__title {
  position: relative;
  z-index: 2;
  margin: 0 auto -0.4em !important;
  font-family: var(--wl-font-serif);
  font-weight: 200;
  font-size: clamp(46px, 8vw, 120px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--wl-offwhite);
  pointer-events: none;
}
.wl-home-portfolio .wl-carousel.wl-carousel { margin-top: 0 !important; }
.wl-home-portfolio .wl-carousel__arrow,
.wl-home-portfolio .wl-carousel__arrow:hover,
.wl-home-portfolio .wl-carousel__arrow:focus,
.wl-home-portfolio .wl-carousel__arrow:active { color: var(--wl-offwhite) !important; }
.wl-home-portfolio .wl-carousel__arrow:focus-visible { outline-color: var(--wl-offwhite); }
.wl-home-portfolio .wl-carousel__frame { background: #222; }

/* Feature variant: text vertically centred against the photo (About "Our couples"). */
.wl-feature--center .wl-feature__inner { align-items: center; }

/* Typography: no orphan word on the last line of a paragraph, balanced heading
   lines (progressive enhancement; ignored by browsers without text-wrap). */
.entry-content p, .wl-footer p { text-wrap: pretty; }
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 { text-wrap: balance; }

/* Home "Our approach": even rhythm eyebrow → statement → paragraphs. */
.wl-approach > .wl-eyebrow { margin-bottom: 24px !important; }
.wl-approach > .wl-h4 { margin-bottom: 32px !important; }
.wl-approach > .wl-body { margin-bottom: 0 !important; }
.wl-approach > .wl-body + .wl-body { margin-top: 16px !important; }

/* =========================================================================
   About — "Our vision" as a typographic manifesto: oversized serif lines set
   in a staircase on the left, a short intro in a narrow column on the right.
   ========================================================================= */
.wl-manifest { background: var(--wl-offwhite); }
.wl-manifest.wl-manifest { padding-left: 0 !important; padding-right: 0 !important; }
.wl-manifest__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(80px, 10vw, 160px) 24px;
}
.wl-manifest__inner > *, .wl-manifest__lines > *, .wl-manifest__aside > * { margin: 0 !important; }
.wl-manifest__inner > .wl-eyebrow { grid-column: 1 / -1; margin-bottom: clamp(32px, 4vw, 56px) !important; }
.wl-manifest__lines { grid-column: 1 / 10; display: flex; flex-direction: column; }
.wl-manifest__line {
  font-family: var(--wl-font-serif);
  font-weight: 200;
  font-size: clamp(40px, 5.4vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--wl-ink);
}
.wl-manifest__line em { font-style: italic; }
/* staircase */
.wl-manifest__line:nth-child(2) { padding-left: 10%; }
.wl-manifest__line:nth-child(3) { padding-left: 20%; }
.wl-manifest__line--close {
  padding-left: 30%;
  margin-top: clamp(24px, 3vw, 40px) !important;
  max-width: 30ch;
  box-sizing: content-box;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--wl-ink-medium);
}
.wl-manifest__aside {
  grid-column: 10 / 13;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.wl-manifest__aside .wl-body { font-size: 14px; line-height: 1.75; color: var(--wl-ink-medium); }
@media (max-width: 1023px) {
  .wl-manifest__lines, .wl-manifest__aside { grid-column: 1 / -1; }
  .wl-manifest__aside { margin-top: 48px !important; max-width: 520px; }
}
@media (max-width: 640px) {
  .wl-manifest__line:nth-child(2) { padding-left: 8%; }
  .wl-manifest__line:nth-child(3) { padding-left: 16%; }
  .wl-manifest__line--close { padding-left: 0; }
}

/* Selects: light grey while on the "Select an option" placeholder, ink once chosen. */
.wl-field select:valid { color: var(--wl-ink); }
.wl-field select option { color: var(--wl-ink); }

/* Date picker: grey "dd/mm/yyyy" until a date is chosen, discreet calendar icon. */
.wl-field input[type="date"] { color: #b8b6b0; min-height: 44px; }
.wl-field input[type="date"].has-value,
.wl-field input[type="date"]:focus { color: var(--wl-ink); }
.wl-field input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.45; cursor: pointer; }

/* =========================================================================
   Kadence-block versions of the sections ("Wild Love – Kadence" patterns).
   Layout, colours and type are set in the Kadence block settings; these few
   helpers cover what Kadence has no control for (custom image ratios, the
   divider spacing, light arrow-links, centring stacked columns).
   ========================================================================= */
.wl-k-ratio-45 .kb-is-ratio-image { padding-bottom: 125% !important; }           /* 4:5 portrait */
.wl-k-ratio-910 .kb-is-ratio-image { padding-bottom: 111.11% !important; }       /* 9:10, Services "More than a wedding" photo, matches the text height (7 Nov) */
.wl-k-ratio-card .kb-is-ratio-image { padding-bottom: 118.92% !important; }      /* 444 × 528 */
@media (max-width: 767px) { .wl-k-ratio-card .kb-is-ratio-image { padding-bottom: 141.94% !important; } } /* 310 × 440 */
.wp-block-kadence-spacer.wl-k-rule-28 { margin-top: 28px; }
.wp-block-kadence-spacer.wl-k-rule-24 { margin-top: 24px; }
.wl-k-light a { color: var(--wl-offwhite); }
@media (max-width: 1023px) {
  .wl-k-center { margin-left: auto !important; margin-right: auto !important; width: 100%; }
}
/* Kadence summary steps: the whole step is clickable (stretched link). */
.wl-k-step { position: relative; }
.wl-k-steptitle a { color: inherit; text-decoration: none; text-underline-offset: 5px; }
.wl-k-steptitle a::after { content: ""; position: absolute; inset: 0; }
.wl-k-step:hover .wl-k-steptitle a { text-decoration: underline; text-decoration-thickness: 1px; }
.wl-k-num { white-space: nowrap; }
.wl-k-list { max-width: 520px; }
.wl-k-fill { width: 100%; }   /* max-width columns span their full max width (not fit-content) */
.wl-k-ratio-tall .kb-is-ratio-image { padding-bottom: 163.51% !important; }       /* 296 × 484 (home services) */
.wl-k-passthru { pointer-events: none; }                                          /* title overlapping a carousel */
.wp-block-kadence-spacer.wl-k-rule-32 { margin-top: 32px; }
/* FAQ (kadence/accordion): hairline under each question/answer pair + a thin "+ / −". */
.wl-k-faq .wp-block-kadence-pane { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.wl-k-faq .kt-blocks-accordion-header { gap: 24px; }
.wl-k-faq .kt-blocks-accordion-icon-trigger { width: 14px; min-width: 14px; }
.wl-k-faq .kt-blocks-accordion-title-wrap { padding-right: 0; }
.wl-k-faq .kt-blocks-accordion-icon-trigger:before,
.wl-k-faq .kt-blocks-accordion-icon-trigger:after { height: 1px; width: 14px; left: 0; top: 12px; }
/* Image grid tile (Instagram strip): gentle zoom on hover, like the original. */
.wl-k-zoom { overflow: hidden; }
.wl-k-zoom img { transition: transform 0.8s var(--wl-ease); }
.wl-k-zoom:hover img { transform: scale(1.05); }
.wl-k-cards-wide .wl-cards { max-width: none; }   /* stacked story cards span the full width, as on the original Portfolio page */
/* Photo grid (kadence/advancedgallery): on 2-column phones an odd last photo spans the full width, like the core gallery. */
@media (max-width: 543px) { .wl-k-gallery .kadence-blocks-gallery-item:last-child:nth-child(odd) { width: 100%; } }
/* Legal pages (Kadence version): links styled like the original long-form column. */
.wl-k-legal .wp-block-kadence-advancedheading a,
.wl-k-legal .kt-svg-icon-list-text a { color: var(--wl-ink); text-decoration: underline; text-underline-offset: 3px; }
.wl-k-legal .kt-svg-icon-list-single { margin-top: 7px; }   /* bullet centred on the first 27px line, like a native disc */
/* Photo filling its whole column (cover), e.g. About "Who we are": the column sets the height
   (row height on desktop, column min-height per device), the kadence/image fills it. */
.wl-k-cover-col { position: relative; }
.wl-k-cover-col > .kt-inside-inner-col { flex: 1 1 auto; }   /* the inner wrapper (positioned by Kadence) must span the column */
.wl-k-cover-col .wl-k-cover { position: absolute; inset: 0; margin: 0 !important; }
.wl-k-cover-col .wl-k-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* =========================================================================
   Project page — "Sections Kadence" style (single-projet.php, style 'sections').
   The immersive horizontal strip, but every top-level Kadence row after the
   intro is one slide, full strip height. Slide width = a wl-slide--* class on
   the row (default half screen); photos fill their column with wl-k-cover-col +
   wl-k-cover. Mobile: every slide is one screen (stories), like the photos.
   ========================================================================= */
.wl-hscroll__track > .wp-block-kadence-rowlayout {
  flex: 0 0 auto;
  width: 50vw;
  height: 100%;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.wl-hscroll__track > .wp-block-kadence-rowlayout > .kt-row-column-wrap {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  grid-auto-rows: minmax(0, 1fr); /* columns fill the slide height (Kadence leaves rows auto) */
}
/* Columns always span the slide height (Kadence's vertical alignment would shrink
   them, and a column background would no longer fill the screen); the content is
   still aligned inside, since the inner wrapper keeps Kadence's justify-content. */
.wl-hscroll__track > .wp-block-kadence-rowlayout > .kt-row-column-wrap > .wp-block-kadence-column { align-self: stretch; }
.wl-hscroll__track > .wp-block-kadence-rowlayout > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col { flex: 1 1 auto; }
.wl-hscroll__track > .wl-slide--narrow { width: 32vw; }
.wl-hscroll__track > .wl-slide--half { width: 50vw; }
.wl-hscroll__track > .wl-slide--wide { width: 75vw; }
.wl-hscroll__track > .wl-slide--full { width: 100vw; }
.wl-hscroll__track > .wl-slide--flush { margin-left: calc(var(--wl-hgap) * -1) !important; } /* no gap before it */
@media (max-width: 767px) {
  .wl-hscroll__track > .wp-block-kadence-rowlayout {
    width: 100vw !important;
    margin-left: 0 !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
  }
  /* A slide with several columns (2 photos, photo + text…) splits into one screen
     per column, like one photo per swipe on the original gallery. Put backgrounds
     on the columns (the row box disappears). */
  .wl-hscroll__track > .wp-block-kadence-rowlayout:has(> .kt-row-column-wrap > .wp-block-kadence-column ~ .wp-block-kadence-column),
  .wl-hscroll__track > .wp-block-kadence-rowlayout:has(> .kt-row-column-wrap > .wp-block-kadence-column ~ .wp-block-kadence-column) > .kt-row-column-wrap { display: contents; }
  .wl-hscroll__track > .wp-block-kadence-rowlayout > .kt-row-column-wrap > .wp-block-kadence-column {
    flex: 0 0 100vw;
    width: 100vw;
    height: 100%;
    margin: 0 !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
  }
}

/* Phones (≤767px) and portrait tablets (≤1023px, portrait), "Sections Kadence"
   projects: a normal vertical page (site header + footer, no Back button) instead
   of the horizontal strip — the cover, then every section stacked edge to edge (a
   multi-photo section stacks its photos), then the vendors and "Next up". Photos
   keep their own proportions (no cropping, so landscapes are shown whole). Body
   class `wl-projet-sections` comes from inc/cpt-projet.php; hscroll.js skips the
   stories bar and tap navigation for these projects. */
@media (max-width: 767px), (max-width: 1023px) and (orientation: portrait) {
  html:has(body.wl-projet-sections),
  body.wl-projet-sections { overflow: visible; overscroll-behavior: auto; }
  body.wl-projet-sections .wl-hback { display: none; }
  body.wl-projet-sections .wl-hscroll {
    height: auto !important;
    overflow: visible;
    scroll-snap-type: none;
    touch-action: auto;
    cursor: auto;
  }
  body.wl-projet-sections .wl-hscroll__track {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: auto;
    gap: 0;
    padding: 0;
  }
  body.wl-projet-sections .wl-hstories { display: none !important; }
  body.wl-projet-sections .wl-hpanel {
    width: 100%;
    height: auto;
    margin: 0;
    overflow: visible;
    scroll-snap-align: none;
    padding: 56px 28px;
  }
  body.wl-projet-sections .wl-hpanel > :first-child { margin-top: 0; }
  body.wl-projet-sections .wl-hpanel > :last-child { margin-bottom: 0; }
  body.wl-projet-sections .wl-hscroll__track > .wp-block-kadence-rowlayout {
    display: block !important;
    width: 100% !important;
    height: auto;
    margin: 0 !important;
    overflow: visible;
    scroll-snap-align: none;
  }
  body.wl-projet-sections .wl-hscroll__track > .wp-block-kadence-rowlayout > .kt-row-column-wrap {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    padding: 0 !important; /* no desktop vh offsets here */
  }
  body.wl-projet-sections .wl-hscroll__track > .wp-block-kadence-rowlayout > .kt-row-column-wrap > .wp-block-kadence-column {
    flex: none;
    width: 100%;
    height: auto;
    overflow: visible;
    scroll-snap-align: none;
  }
  /* Text sections: comfortable padding whatever the Kadence device setting, and a
     minimum height so they hold their own between the photos (content centred). */
  body.wl-projet-sections .wl-hscroll__track .wp-block-kadence-column:not(.wl-k-cover-col) > .kt-inside-inner-col {
    padding: 64px 28px !important;
    min-height: min(110vw, 75svh);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  body.wl-projet-sections .wl-k-cover-col > .kt-inside-inner-col { flex: none; }
  body.wl-projet-sections .wl-k-cover-col .wl-k-cover { position: static; }
  body.wl-projet-sections .wl-k-cover-col .wl-k-cover img { width: 100%; height: auto; object-fit: initial; }
  /* Framed section: white margins around the photo(s) + a hairline, like an
     editorial print (photos stack with a gap). */
  body.wl-projet-sections .wl-hscroll__track > .wl-slide--framed { background: var(--wl-offwhite); }
  body.wl-projet-sections .wl-hscroll__track > .wl-slide--framed > .kt-row-column-wrap {
    gap: 36px;
    padding: 40px 8% !important;
  }
}

/* Framed slide (`wl-slide--framed` on the row), horizontal strip: the photos sit
   inside white margins with a 1px ink hairline instead of filling the slide. */
.wl-hscroll__track > .wl-slide--framed { background: var(--wl-offwhite); }
.wl-hscroll__track > .wl-slide--framed > .kt-row-column-wrap {
  padding: 9vh 3vw !important;
  column-gap: 2.5vw !important;
}
.wl-slide--framed .wl-k-cover { border: 1px solid var(--wl-ink); box-sizing: border-box; }

/* Horizontal strip ("Sections Kadence" projects, desktop + landscape tablets):
   slides follow one another edge to edge (no white bands, like the vertical
   page), and slides holding text keep a minimum width. */
.wl-project--sections .wl-hscroll__track { --wl-hgap: 0px; }
.wl-project--sections .wl-hscroll__track > .wp-block-kadence-rowlayout:not(.wl-slide--framed) > .kt-row-column-wrap { column-gap: 0 !important; } /* photos of one slide touch too */
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  .wl-project--sections .wl-hscroll__track > .wp-block-kadence-rowlayout:has(> .kt-row-column-wrap > .wp-block-kadence-column:not(.wl-k-cover-col)) { min-width: 520px; }
  .wl-project--sections .wl-hscroll__track > .wp-block-kadence-rowlayout:has(> .kt-row-column-wrap > .wp-block-kadence-column:not(.wl-k-cover-col)):has(> .kt-row-column-wrap > .wl-k-cover-col) { min-width: 1000px; }
}

/* "Sections Kadence" projects — consistent photo ratios + framed triptychs.
   Rows carry `wl-slide--portrait` when all their photos are portraits (set in the
   content). Desktop / landscape tablets: portraits are shown 2:3 (the originals'
   ratio) at the strip height, so their width follows the height instead of the
   slide class; framed slides size to their photos (2:3, or 1:1 with
   `wl-slide--square`), and a framed triptych always fits the screen width.
   Landscape slides keep their wl-slide--* width and fill it. */
.wl-project--sections .wl-hscroll__track { padding-inline-end: 0; }
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  .wl-project--sections .wl-hscroll { --wl-sh: 100svh; }
  body.admin-bar .wl-project--sections .wl-hscroll { --wl-sh: calc(100svh - 32px); }
  .wl-project--sections .wl-hscroll__track > .wl-slide--portrait,
  .wl-project--sections .wl-hscroll__track > .wl-slide--framed { width: auto !important; min-width: 0 !important; }
  .wl-project--sections .wl-hscroll__track > .wl-slide--portrait > .kt-row-column-wrap,
  .wl-project--sections .wl-hscroll__track > .wl-slide--framed > .kt-row-column-wrap { display: flex !important; justify-content: center; }
  /* Full-bleed portrait: 2:3 at the full strip height. */
  .wl-project--sections .wl-hscroll__track > .wl-slide--portrait:not(.wl-slide--framed) > .kt-row-column-wrap > .wl-k-cover-col { flex: 0 0 calc(var(--wl-sh) * 2 / 3); }
  /* Text next to a portrait keeps a comfortable column. */
  .wl-project--sections .wl-hscroll__track > .wl-slide--portrait > .kt-row-column-wrap > .wp-block-kadence-column:not(.wl-k-cover-col) { flex: 0 0 clamp(520px, 36vw, 640px); }
  /* Framed: white margins, photos centred, width from the photo ratio. */
  .wl-project--sections .wl-hscroll__track > .wl-slide--framed {
    --wl-fw: calc((var(--wl-sh) - 24vh) * 2 / 3);
  }
  .wl-project--sections .wl-hscroll__track > .wl-slide--framed.wl-slide--square { --wl-fw: calc((var(--wl-sh) - 24vh) * 0.82); }
  .wl-project--sections .wl-hscroll__track > .wl-slide--framed:has(.wl-k-cover-col ~ .wl-k-cover-col ~ .wl-k-cover-col) { --wl-fw: min(calc((var(--wl-sh) - 24vh) * 2 / 3), 28vw); }
  .wl-project--sections .wl-hscroll__track > .wl-slide--framed > .kt-row-column-wrap {
    padding: 12vh 5vw !important;
    column-gap: 3vw !important;
    align-items: center;
  }
  .wl-project--sections .wl-hscroll__track > .wl-slide--framed > .kt-row-column-wrap > .wl-k-cover-col { flex: 0 0 var(--wl-fw); align-self: center; }
  .wl-project--sections .wl-slide--portrait .wl-k-cover-col > .kt-inside-inner-col,
  .wl-project--sections .wl-slide--framed .wl-k-cover-col > .kt-inside-inner-col { flex: none; }
  .wl-project--sections .wl-slide--portrait .wl-k-cover-col .wl-k-cover,
  .wl-project--sections .wl-slide--framed .wl-k-cover-col .wl-k-cover {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
  }
  .wl-project--sections .wl-slide--square .wl-k-cover-col .wl-k-cover { aspect-ratio: 1 / 1; }
  /* End panel ("Next up"): a real column with breathing room. */
  .wl-project--sections .wl-hpanel--end {
    width: clamp(520px, 38vw, 720px);
    padding: 0 clamp(48px, 6vw, 120px);
  }
}
@media (max-width: 767px), (max-width: 1023px) and (orientation: portrait) {
  /* Square photos stay square on the vertical page. */
  body.wl-projet-sections .wl-slide--square .wl-k-cover img { aspect-ratio: 1 / 1; object-fit: cover; }
  /* End panel: a full closing screen below the header (84px), content centred. */
  body.wl-projet-sections .wl-hpanel--end {
    min-height: calc(100svh - 84px);
    justify-content: center;
    padding: 64px 28px;
  }
}
/* Opening of the strip (desktop / landscape tablets): the first section after the
   dark cover always fills the right half of the screen, portrait or landscape
   (50/50 split with the cover) — the 2:3 portrait sizing above doesn't apply to it. */
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  .wl-project--sections .wl-hscroll__track > div.wp-block-kadence-rowlayout:first-of-type:not(.wl-slide--framed) { width: 50vw !important; }
  .wl-project--sections .wl-hscroll__track > div.wp-block-kadence-rowlayout:first-of-type:not(.wl-slide--framed) > .kt-row-column-wrap > .wl-k-cover-col { flex: 1 1 auto; }
  .wl-project--sections .wl-hscroll__track > div.wp-block-kadence-rowlayout:first-of-type:not(.wl-slide--framed) .wl-k-cover-col > .kt-inside-inner-col { flex: 1 1 auto; }
  .wl-project--sections .wl-hscroll__track > div.wp-block-kadence-rowlayout:first-of-type:not(.wl-slide--framed) .wl-k-cover-col .wl-k-cover {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
  }
}

/* =========================================================================
   Portfolio page (Figma "Porfolio WLW", 2026-10-11) — page 25 / FR 27.
   Kadence rows: .wl-pf-cover (background slider) · .wl-pf-highlights (Advanced
   Gallery fluid carousel, .wl-k-highlights) · .wl-pf-projects ([wl_portfolio_grid])
   · .wl-pf-cta (parallax background, set in Kadence).
   ========================================================================= */
.wl-pf-highlights { overflow: hidden; } /* the carousel strip runs past both edges */
/* Cover slider: both photos are semi-transparent mid-fade, so dip to ink rather
   than to the light row background. */
.wl-pf-cover .kb-blocks-bg-slider { background: var(--wl-ink); }
/* Cover = the whole screen below the sticky header (85px < 1024px, 101px above, incl.
   its 1px border) and the admin bar when logged in. svh = stable on mobile (doesn't
   jump when the browser bars show/hide). Overrides Kadence's fixed min-height
   (840 / 760 / 742px, kept as the editor value); content still grows if taller. */
.wl-pf-cover { --wl-pf-offset: 85px; }
.admin-bar .wl-pf-cover { --wl-pf-offset: calc(85px + 46px); }
@media (min-width: 783px) { .admin-bar .wl-pf-cover { --wl-pf-offset: calc(85px + 32px); } }
@media (min-width: 1024px) {
  .wl-pf-cover { --wl-pf-offset: 101px; }
  .admin-bar .wl-pf-cover { --wl-pf-offset: calc(101px + 32px); }
}
.wl-pf-cover.wp-block-kadence-rowlayout > .kt-row-column-wrap { min-height: calc(100svh - var(--wl-pf-offset)); }
/* Text is bottom-aligned, so the top padding only has to keep it off the header; the
   bottom padding follows the screen height, capped at the Figma values (200 / 120 /
   80px at full size), so short screens (1440×700 laptop, landscape phone) still fit. */
.wl-pf-cover.wp-block-kadence-rowlayout > .kt-row-column-wrap { padding-top: 64px; padding-bottom: min(200px, 22svh); }
@media (max-width: 1024px) {
  .wl-pf-cover.wp-block-kadence-rowlayout > .kt-row-column-wrap { padding-top: 40px; padding-bottom: min(120px, 14svh); }
}
@media (max-width: 767px) {
  .wl-pf-cover.wp-block-kadence-rowlayout > .kt-row-column-wrap { padding-bottom: min(80px, 11svh); }
}
/* Kadence sliders before Splide initialises (≈0.2s, longer on slow networks): the
   theme's `.single-content ul` indent (2em + bottom margin) shrank the list, so the
   first background photo was framed 34px narrower, then re-cropped and "jumped" at
   init. Give the list its final geometry from the first paint. */
.single-content .kb-blocks-bg-slider .splide__list,
.single-content .kt-blocks-carousel .splide__list { margin: 0; padding: 0; list-style: none; }
.single-content .kb-blocks-bg-slider .splide__list { display: flex; height: 100%; }
.single-content .kb-blocks-bg-slider .splide__slide { flex: 0 0 100%; width: 100%; }

/* Highlights carousel: every photo 2:3 at the Kadence carousel height
   (568 / 480 / 362px), 8px apart, centred on one photo. */
.wp-block-kadence-advancedgallery.wl-k-highlights .kb-gal-image-radius img { width: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.wp-block-kadence-advancedgallery.wl-k-highlights .kt-blocks-carousel { padding-bottom: 60px; } /* 16px gap + 44px nav row */
/* Previous / Next: Kadence's Splide arrows restyled as the Figma text links,
   under the strip, 80px inside the 1272px content box (40px edges on mobile). */
.wp-block-kadence-advancedgallery.wl-k-highlights .splide__arrows .splide__arrow {
  position: absolute;
  top: auto;
  bottom: 0;
  transform: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: none !important;
  box-shadow: none;
  opacity: 1;
  color: var(--wl-ink);
  font: 400 12px/1 var(--wl-font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity 0.3s var(--wl-ease);
}
.wp-block-kadence-advancedgallery.wl-k-highlights .splide__arrows .splide__arrow:hover { opacity: 0.6; }
.wp-block-kadence-advancedgallery.wl-k-highlights .splide__arrow svg { display: none; }
.wp-block-kadence-advancedgallery.wl-k-highlights .splide__arrow--prev { left: calc(max(64px, (100% - 1272px) / 2) + 80px); right: auto; }
.wp-block-kadence-advancedgallery.wl-k-highlights .splide__arrow--next { right: calc(max(64px, (100% - 1272px) / 2) + 80px); left: auto; }
.wp-block-kadence-advancedgallery.wl-k-highlights .splide__arrow--prev::before,
.wp-block-kadence-advancedgallery.wl-k-highlights .splide__arrow--next::after {
  content: "";
  width: 27px;
  height: 7px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='7' viewBox='0 0 27 7'%3E%3Cpath d='M0 3.5h26M23 .5l3 3-3 3' fill='none' stroke='%23141414'/%3E%3C/svg%3E");
}
.wp-block-kadence-advancedgallery.wl-k-highlights .splide__arrow--prev::before { transform: scaleX(-1); }
.wp-block-kadence-advancedgallery.wl-k-highlights .splide__arrow--prev::after { content: "Previous"; }
.wp-block-kadence-advancedgallery.wl-k-highlights .splide__arrow--next::before { content: "Next"; }
html[lang^="fr"] .wp-block-kadence-advancedgallery.wl-k-highlights .splide__arrow--prev::after { content: "Précédent"; }
html[lang^="fr"] .wp-block-kadence-advancedgallery.wl-k-highlights .splide__arrow--next::before { content: "Suivant"; }
@media (max-width: 767px) {
  .wp-block-kadence-advancedgallery.wl-k-highlights .splide__arrow--prev { left: 40px; }
  .wp-block-kadence-advancedgallery.wl-k-highlights .splide__arrow--next { right: 40px; }
}

/* Projects grid: 3 × 309px columns, 64px / 80px gaps (1055px), 2 on tablet, 1 on mobile. */
.wl-pgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 64px;
  row-gap: 80px;
  max-width: 1055px;
  margin: 0 auto;
}
.wl-pcard__link { display: flex; flex-direction: column; color: var(--wl-ink); text-decoration: none; }
.wl-pcard__media { display: block; overflow: hidden; aspect-ratio: 3 / 4; margin-bottom: 32px; background: var(--wl-cream); }
.wl-pcard__media img,
.wl-pcard__media .wl-checker { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--wl-ease); }
.wl-pcard__link:hover .wl-pcard__media img { transform: scale(1.04); }
.wl-pcard__loc {
  margin-bottom: 12px;
  color: #5a5a5a;
  font: 400 12px/1 var(--wl-font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wl-pgrid .wl-pcard__title {
  margin: 0;
  font-family: var(--wl-font-serif);
  font-weight: 200;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: 0.04em;
}
@media (max-width: 1023px) {
  .wl-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 64px; }
}
@media (max-width: 767px) {
  .wl-pgrid { grid-template-columns: minmax(0, 1fr); row-gap: 64px; }
}

/* About, "Meet Amal" (Figma "WLW Website 2026" nodes 8195-5104/5105, 4 Nov 2026).
   Desktop: portrait 363px + text max 440px, 88px apart, centred (frame 1040px); the portrait takes the height
   of the text block. Title, eyebrow, lead, body, signature 30px apart. Tablet/mobile keep the stacked layout
   (light card set in the blocks). Blocks: tools/about_meet_amal_design_2026_11.php + about_meet_amal_signature_2026_11.php */
.wl-k-meet .wl-signature { display: block; width: 220px; max-width: 100%; height: auto; margin: 32px auto 0; }
.wl-k-meet .wl-k-card > .kt-inside-inner-col > p:has(> .wl-signature) { margin: 0; }
@media (min-width: 1025px) {
  .wl-k-meet > .kt-row-column-wrap {
    grid-template-columns: 363px minmax(0, 440px) !important;
    column-gap: 88px !important; justify-content: center; align-items: stretch;
    padding-top: 80px !important; padding-bottom: 80px !important;
  }
  .wl-k-meet > .kt-row-column-wrap > .wp-block-kadence-column { margin: 0 !important; max-width: none !important; width: auto !important; }
  /* portrait: fills the column, whose height is the text block's */
  .wl-k-meet > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(2) > .kt-inside-inner-col { height: 100%; }
  .wl-k-meet .wl-k-ratio-45 { height: 100%; margin: 0; }
  .wl-k-meet .wl-k-ratio-45 .kb-is-ratio-image { padding-bottom: 0 !important; height: 100%; }
  .wl-k-meet .wl-k-ratio-45 .kb-is-ratio-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .wl-k-meet > .kt-row-column-wrap > .wp-block-kadence-column:last-child > .kt-inside-inner-col { display: flex; flex-direction: column; justify-content: center; height: 100%; }
  .wl-k-meet .wl-k-card { background: none !important; box-shadow: none !important; padding: 0 !important; text-align: left; }
  .wl-k-meet .wl-k-card > .kt-inside-inner-col > * { margin-top: 30px !important; }
  .wl-k-meet .wl-k-card > .kt-inside-inner-col > :first-child { margin-top: 0 !important; }
  .wl-k-meet .wl-k-card > .kt-inside-inner-col > p:nth-child(3),
  .wl-k-meet .wl-k-card > .kt-inside-inner-col > p:nth-child(4) { font-size: 14px !important; line-height: 1.8 !important; letter-spacing: 0.05em !important; }
  .wl-k-meet .wl-k-card > .kt-inside-inner-col > p:nth-child(4) { margin-top: 25.2px !important; }  /* one empty line, as in Figma */
  .wl-k-meet .wl-k-card > .kt-inside-inner-col > p:nth-child(2) { letter-spacing: 0 !important; }  /* Figma 0.02em; browser Newsreader is wider, 0 gives the same 3 lines */
  .wl-k-meet .wl-signature { width: 262px; margin: 0; }
}