/*
 Theme Name:   Get Morocco Tours
 Theme URI:    https://www.getmoroccotours.com/
 Description:  Bricks child theme for Get Morocco Tours. Holds the design token
               framework, self-hosted fonts and base styles. Ported from the
               design export's src/styles.css - token names are kept identical
               so the two builds stay traceable to each other.
 Author:       Get Morocco Tours
 Template:     bricks
 Version:      1.0.0
 Text Domain:  gmt
*/

/* ==========================================================================
   1. Fonts - self-hosted variable woff2 (400-800 in a single file per family)
   Latin and latin-ext are declared separately; unicode-range means the browser
   only downloads the subset a page actually needs.
   ========================================================================== */

@font-face {
  font-family: "Sora";
  src: url("fonts/sora-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Sora";
  src: url("fonts/sora-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. Token framework
   Every colour, size, space, radius and shadow on this site is declared once
   here. Nothing in Bricks should carry a hard-coded value - pick a variable.
   Colour pairings are WCAG 2.1 AA verified; ratios noted per token.
   ========================================================================== */

:root {
  /* ---- 2.1 Colour ---- */
  --background: oklch(0.98 0.005 85);        /* warm off-white canvas */
  --foreground: oklch(0.38 0.03 250);        /* body text - 9.4:1 on canvas */
  --ink: oklch(0.29 0.055 250);              /* headings - 14.1:1 on white */
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.29 0.055 250);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.29 0.055 250);

  --primary: oklch(0.54 0.19 42);            /* brand orange - 5.5:1 w/ white */
  --primary-foreground: oklch(1 0 0);
  --primary-soft: oklch(0.955 0.032 55);

  --secondary: oklch(0.955 0.008 250);
  --secondary-foreground: oklch(0.29 0.055 250);
  --muted: oklch(0.955 0.008 250);
  --muted-foreground: oklch(0.52 0.025 250); /* 5.2:1 on canvas */
  --accent: oklch(0.955 0.032 55);
  --accent-foreground: oklch(0.47 0.16 42);  /* 6.3:1 on soft orange */
  --sand: oklch(0.945 0.018 75);             /* warm section band */

  --destructive: oklch(0.577 0.18 27);       /* 4.7:1 with white text */
  --destructive-foreground: oklch(0.99 0.004 80);

  --border: oklch(0.9 0.008 250);            /* decorative separators */
  --input: oklch(0.64 0.015 250);            /* control edges - 3.4:1 */
  --ring: oklch(0.54 0.19 42);               /* focus ring - 5.2:1 */

  /* ---- 2.2 Typeface ---- */
  --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    sans-serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    sans-serif;

  /* ---- 2.3 Type scale ----
     Fixed tokens are the design's desktop values. The fluid tokens below carry
     the same ceiling but scale down to the export's own mobile sizes, so
     responsiveness lives in the scale instead of per-element breakpoints. */
  --fs-eyebrow: 0.6875rem;  /* 11px */
  --fs-caption: 0.75rem;    /* 12px */
  --fs-body-sm: 0.875rem;   /* 14px */
  --fs-body: 1rem;          /* 16px */
  --fs-lead: 1.125rem;      /* 18px */
  --fs-h6: 1rem;            /* 16px */
  --fs-h5: 1.125rem;        /* 18px */
  --fs-h4: 1.25rem;         /* 20px */
  --fs-h3: 1.5rem;          /* 24px */
  --fs-h2: 1.75rem;         /* 28px */
  --fs-h1: 2rem;            /* 32px */
  --fs-display: 3rem;       /* 48px - homepage hero only */

  --fs-h3-fluid: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);      /* 20 -> 24 */
  --fs-h2-fluid: clamp(1.5rem, 1.36rem + 0.7vw, 1.75rem);      /* 24 -> 28 */
  --fs-h1-fluid: clamp(1.625rem, 1.42rem + 1vw, 2rem);         /* 26 -> 32 */
  --fs-display-fluid: clamp(1.875rem, 1.28rem + 2.98vw, 3rem); /* 30 -> 48 */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --tracking-heading: -0.02em;
  --tracking-body: 0em;
  --tracking-eyebrow: 0.14em;
  --tracking-eyebrow-wide: 0.18em;

  /* ---- 2.4 Spacing (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ---- 2.5 Layout ---- */
  --section-padding-y: var(--space-12);
  --section-padding-y-lg: var(--space-16);
  --grid-gap-x: 2.25rem;
  --grid-gap-y: 1.25rem;
  --container-max: 78rem;
  --container-padding-x: var(--space-5);
  --header-height: 5rem;

  /* ---- 2.6 Radius ---- */
  --radius: 0.75rem;
  --radius-1: calc(var(--radius) - 4px);
  --radius-2: calc(var(--radius) - 2px);
  --radius-3: var(--radius);
  --radius-4: calc(var(--radius) + 4px);
  --radius-5: calc(var(--radius) + 8px);
  --radius-6: calc(var(--radius) + 12px);
  --radius-7: calc(var(--radius) + 16px);
  --radius-pill: 9999px;

  /* ---- 2.7 Elevation & motion ---- */
  --elevation-1: 0 1px 2px oklch(0.2 0 0 / 0.04);
  --elevation-2: 0 1px 2px oklch(0.2 0 0 / 0.04),
    0 18px 40px -28px oklch(0.2 0 0 / 0.3);
  --elevation-3: 0 24px 60px -24px oklch(0.2 0 0 / 0.35);

  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 500ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   3. Base
   ========================================================================== */

/* Bricks' frontend-layer.min.css sets `html { font-size: 62.5% }` so that
   1rem = 10px in the builder's own convention. This token system is authored
   against a 16px root, so without this override every rem value on the site
   renders at 62.5% of its intended size (a 78rem container becomes 780px
   instead of 1248px). Bricks' rule lives inside a CSS layer, and unlayered
   rules beat layered ones outright, so this wins without !important.
   100% rather than 16px, so a visitor's own browser font-size still applies. */
html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1-fluid); }
h2 { font-size: var(--fs-h2-fluid); }
h3 { font-size: var(--fs-h3-fluid); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

a { color: var(--primary); }

/* Bricks sets its own image defaults; this guards against overflow anywhere. */
img, svg, video { max-width: 100%; height: auto; }

/* ==========================================================================
   4. Accessibility
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999999;
  padding: var(--space-3) var(--space-5);
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: var(--fw-bold);
  border-radius: 0 0 var(--radius-2) 0;
}

.skip-link:focus {
  left: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   5. Layout utilities - apply these class names in Bricks
   ========================================================================== */

.container-page {
  margin-inline: auto;
  width: 100%;
  max-width: var(--container-max);
  padding-inline: var(--container-padding-x);
}

.section-y {
  padding-block: var(--section-padding-y);
}

.section-y-lg {
  padding-block: var(--section-padding-y-lg);
}

.card-grid {
  display: grid;
  column-gap: var(--grid-gap-x);
  row-gap: var(--grid-gap-y);
}

.eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--primary);
}

.eyebrow-wide {
  letter-spacing: var(--tracking-eyebrow-wide);
}

/* Surface bands used to alternate section backgrounds. */
.band-card { background-color: var(--card); }
.band-sand { background-color: var(--sand); }
.band-soft { background-color: var(--primary-soft); }
.band-ink  { background-color: var(--ink); color: var(--card); }
.band-ink h1, .band-ink h2, .band-ink h3,
.band-ink h4, .band-ink h5, .band-ink h6 { color: var(--card); }

/* Body copy sits comfortably around 65 characters. */
.measure { max-width: 65ch; }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--muted-foreground);
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-pill);
  background-color: var(--primary);
  color: var(--primary-foreground);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-decoration: none;
  transition: opacity var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  opacity: 0.9;
  box-shadow: var(--elevation-2);
  color: var(--primary-foreground);
}

/* ==========================================================================
   7. Site header
   ========================================================================== */

.site-header {
  background-color: var(--card);
  border-bottom: 1px solid var(--border);
}

/* NOTE: Bricks styles `.brxe-block` as `display: flex; flex-direction: column`.
   A property we never declare keeps Bricks' value, so every horizontal flex row
   below must state `flex-direction: row` explicitly - omitting it silently
   stacks the element. */
.site-header__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: var(--header-height);
  padding-block: var(--space-3);
}

.site-header__logo img {
  display: block;
  width: auto;
  height: 2.5rem;
}

/* --- primary navigation --- */

.site-nav .brx-nav-nested-items {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav .brx-nav-nested-items > li > a,
.site-nav .brx-nav-nested-items > li > .brx-dropdown-content-wrapper > a,
.site-nav .brx-nav-nested-items > li > .brx-submenu-toggle > * {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--foreground);
  text-decoration: none;
}

.site-nav .brx-nav-nested-items > li > a,
.site-nav .brx-nav-nested-items > li > .brx-submenu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.site-nav .brx-nav-nested-items > li > a:hover,
.site-nav .brx-nav-nested-items > li > .brx-submenu-toggle:hover,
.site-nav .brx-nav-nested-items > li.active > a,
.site-nav .brx-nav-nested-items > li[aria-current="page"] > a {
  background-color: var(--secondary);
  color: var(--primary);
}

/* --- dropdown panels --- */

/* No min-width here: Bricks' positioning script writes `min-width: 0` inline on
   this panel, and an inline style beats any stylesheet rule. Letting the links
   sit on one line (below) sizes the panel to its longest label instead, which
   is what the min-width was for. */
.site-nav .brx-dropdown-content {
  padding: var(--space-2);
  margin: 0;
  list-style: none;
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-4);
  box-shadow: var(--elevation-2);
}

.site-nav .brx-dropdown-content a {
  display: block;
  white-space: nowrap;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-2);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--foreground);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.site-nav .brx-dropdown-content a:hover,
.site-nav .brx-dropdown-content a:focus-visible {
  background-color: var(--primary-soft);
  color: var(--accent-foreground);
}

/* --- mobile menu --- */

.site-nav .brx-nav-nested-items.brx-open,
.site-nav [class*="brx-open"] .brx-nav-nested-items {
  background-color: var(--card);
}

@media (max-width: 1023px) {
  .site-header__cta {
    display: none;
  }

  .site-nav .brx-nav-nested-items {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    padding: var(--space-4);
  }

  .site-nav .brx-dropdown-content {
    border: 0;
    box-shadow: none;
    padding-left: var(--space-3);
    background-color: transparent;
  }

  /* The panel is inline in the mobile menu, so long labels must wrap rather
     than push the menu sideways. */
  .site-nav .brx-dropdown-content a {
    white-space: normal;
  }
}

/* ==========================================================================
   8. Site footer
   ========================================================================== */

.site-footer {
  background-color: var(--card);
  border-top: 1px solid var(--border);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10) var(--space-8);
  padding-block: var(--space-12);
}

@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-footer__heading {
  font-size: var(--fs-h6);
  font-weight: var(--fw-bold);
  color: var(--ink);
  letter-spacing: 0;
}

.site-footer__heading--spaced {
  margin-top: var(--space-8);
}

.site-footer__intro {
  margin-top: var(--space-4);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--muted-foreground);
  max-width: 42ch;
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.site-footer__meta,
.site-footer__link {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-snug);
  color: var(--muted-foreground);
  text-decoration: none;
}

.site-footer__link {
  transition: color var(--duration-fast) var(--ease-standard);
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--primary);
}

.site-footer__pills,
.site-footer__socials {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.site-footer__pill,
.site-footer__social {
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--muted-foreground);
  text-decoration: none;
}

.site-footer__social {
  transition: color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.site-footer__social:hover,
.site-footer__social:focus-visible {
  color: var(--primary);
  border-color: var(--primary);
}

.site-footer__note {
  margin-top: var(--space-8);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--muted-foreground);
}

.site-footer__bar {
  border-top: 1px solid var(--border);
}

.site-footer__bar-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-6);
  text-align: center;
}

.site-footer__fine {
  font-size: var(--fs-caption);
  color: var(--muted-foreground);
}

@media (min-width: 640px) {
  .site-footer__bar-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ==========================================================================
   9. Icons - inline SVG masks
   Each icon ships as a data URI mask rather than an icon font or an extra
   request, and paints with `currentColor`, so it inherits hover and focus
   colours for free. Lucide outlines match the design; brand marks are lifted
   verbatim from the export's BrandIcons component.
   ========================================================================== */

[class*="icon-"]::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.icon-map-pin::before {
  -webkit-mask-image: url("data:image/svg+xml,%3C!-- @license lucide-static v0.469.0 - ISC --%3E %3Csvg class='lucide lucide-map-pin' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0' /%3E %3Ccircle cx='12' cy='10' r='3' /%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3C!-- @license lucide-static v0.469.0 - ISC --%3E %3Csvg class='lucide lucide-map-pin' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0' /%3E %3Ccircle cx='12' cy='10' r='3' /%3E %3C/svg%3E");
}

.icon-phone::before {
  -webkit-mask-image: url("data:image/svg+xml,%3C!-- @license lucide-static v0.469.0 - ISC --%3E %3Csvg class='lucide lucide-phone' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z' /%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3C!-- @license lucide-static v0.469.0 - ISC --%3E %3Csvg class='lucide lucide-phone' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z' /%3E %3C/svg%3E");
}

.icon-mail::before {
  -webkit-mask-image: url("data:image/svg+xml,%3C!-- @license lucide-static v0.469.0 - ISC --%3E %3Csvg class='lucide lucide-mail' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Crect width='20' height='16' x='2' y='4' rx='2' /%3E %3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7' /%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3C!-- @license lucide-static v0.469.0 - ISC --%3E %3Csvg class='lucide lucide-mail' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Crect width='20' height='16' x='2' y='4' rx='2' /%3E %3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7' /%3E %3C/svg%3E");
}

.icon-heart::before {
  -webkit-mask-image: url("data:image/svg+xml,%3C!-- @license lucide-static v0.469.0 - ISC --%3E %3Csvg class='lucide lucide-heart' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z' /%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3C!-- @license lucide-static v0.469.0 - ISC --%3E %3Csvg class='lucide lucide-heart' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z' /%3E %3C/svg%3E");
}

.icon-message-circle::before {
  -webkit-mask-image: url("data:image/svg+xml,%3C!-- @license lucide-static v0.469.0 - ISC --%3E %3Csvg class='lucide lucide-message-circle' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z' /%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3C!-- @license lucide-static v0.469.0 - ISC --%3E %3Csvg class='lucide lucide-message-circle' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z' /%3E %3C/svg%3E");
}

.icon-facebook::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%23000'%3E%3Cpath d='M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%23000'%3E%3Cpath d='M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z'/%3E%3C/svg%3E");
}

.icon-instagram::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23000'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23000'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
}

.icon-pinterest::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='%23000'%3E%3Cpath d='M204 6.5C101.4 6.5 0 74.9 0 185.6 0 256 39.6 296 63.6 296c9.9 0 15.6-27.6 15.6-35.4 0-9.3-23.7-29.1-23.7-67.8 0-80.4 61.2-137.4 140.4-137.4 68.1 0 118.5 38.7 118.5 109.8 0 53.1-21.3 152.7-90.3 152.7-24.9 0-46.2-18-46.2-43.8 0-37.8 26.4-74.4 26.4-113.4 0-66.2-93.9-54.2-93.9 25.8 0 16.8 2.1 35.4 9.6 50.7-13.8 59.4-42 147.9-42 209.1 0 18.9 2.7 37.5 4.5 56.4 3.4 3.8 1.7 3.4 6.9 1.5 50.4-69 48.6-82.5 71.4-172.8 12.3 23.4 44.1 36 69.3 36 106.2 0 153.9-103.5 153.9-196.8C384 71.3 298.2 6.5 204 6.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='%23000'%3E%3Cpath d='M204 6.5C101.4 6.5 0 74.9 0 185.6 0 256 39.6 296 63.6 296c9.9 0 15.6-27.6 15.6-35.4 0-9.3-23.7-29.1-23.7-67.8 0-80.4 61.2-137.4 140.4-137.4 68.1 0 118.5 38.7 118.5 109.8 0 53.1-21.3 152.7-90.3 152.7-24.9 0-46.2-18-46.2-43.8 0-37.8 26.4-74.4 26.4-113.4 0-66.2-93.9-54.2-93.9 25.8 0 16.8 2.1 35.4 9.6 50.7-13.8 59.4-42 147.9-42 209.1 0 18.9 2.7 37.5 4.5 56.4 3.4 3.8 1.7 3.4 6.9 1.5 50.4-69 48.6-82.5 71.4-172.8 12.3 23.4 44.1 36 69.3 36 106.2 0 153.9-103.5 153.9-196.8C384 71.3 298.2 6.5 204 6.5z'/%3E%3C/svg%3E");
}

.icon-tiktok::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23000'%3E%3Cpath d='M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23000'%3E%3Cpath d='M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z'/%3E%3C/svg%3E");
}

.icon-youtube::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill='%23000'%3E%3Cpath d='M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill='%23000'%3E%3Cpath d='M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z'/%3E%3C/svg%3E");
}

/* --- icon layout --------------------------------------------------------- */

/* A label with a leading icon: icon and text sit on one row, icon aligned to
   the first line rather than centred against a wrapped block. */
.has-icon {
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2);
}

.has-icon::before {
  margin-top: 0.2em;
}

/* Contact icons pick up the brand colour while the text stays muted. */
.site-footer__list .has-icon::before {
  background-color: var(--primary);
}

/* Social links become icon-only circles. The label text stays in the DOM so it
   remains the accessible name; it is only collapsed visually. */
.site-footer__social {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  font-size: 0;
  border-radius: var(--radius-pill);
}

.site-footer__social::before {
  width: 1rem;
  height: 1rem;
}

.site-header__cta::before {
  width: 1rem;
  height: 1rem;
}

.site-footer__fine.has-icon {
  align-items: center;
}

.site-footer__fine.has-icon::before {
  margin-top: 0;
  background-color: var(--primary);
}

/* --- navigation motion --------------------------------------------------- */

/* Bricks hides a closed dropdown with `opacity: 0; visibility: hidden` rather
   than `display: none`, so these transitions actually run. Bricks animates the
   opacity itself; the lift and the caret rotation are ours. */
.site-nav .brxe-dropdown > .brx-dropdown-content {
  transform: translateY(-0.375rem);
  transition: opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard),
    visibility var(--duration-base) var(--ease-standard);
}

.site-nav .brxe-dropdown.open > .brx-dropdown-content {
  transform: translateY(0);
}

.site-nav .brx-submenu-toggle svg {
  transition: transform var(--duration-base) var(--ease-standard);
}

.site-nav .brxe-dropdown.open .brx-submenu-toggle svg {
  transform: rotate(180deg);
}

/* Dropdown items nudge on hover, matching the design's group-hover behaviour. */
.site-nav .brx-dropdown-content a {
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    padding-left var(--duration-fast) var(--ease-standard);
}

.site-nav .brx-dropdown-content a:hover,
.site-nav .brx-dropdown-content a:focus-visible {
  padding-left: var(--space-4);
}