/* ============================================================
   SECURE EXPRESS, DESIGN TOKENS + SHARED PRIMITIVES
   Every selector is prefixed `se-` and every custom property
   `--se-`. Nothing here targets a bare element selector at the
   document level, so it cannot leak into Hello Elementor or Elementor itself.
   ============================================================ */

:root {
  --se-red: #E1251B;        /* brand red, Pantone 485 C */
  --se-red-deep: #B3121E;   /* red text on light (AA) + filled button base */
  --se-red-press: #8E0D17;
  --se-red-glow: rgba(225, 37, 27, .30);
  --se-green: #CCCCCC;      /* brand light grey, Pantone 420 C: live / pickup / safest */

  --se-ink: #0C0C0E;        /* base dark */
  --se-char: #141418;       /* dark surface */
  --se-char-2: #1D1D24;     /* raised dark card */
  --se-char-line: rgba(255, 255, 255, .10);

  --se-canvas: #F8F7F5;     /* warm off-white */
  --se-surface: #EFEDE9;    /* alt section / cards */
  --se-hairline: #E2DFD9;
  --se-text: #1D1D1B;       /* brand black: ink text on light */
  --se-muted: #5E5E68;      /* AA on canvas */

  --se-maxw: 1200px;
  --se-radius: 18px;
  --se-ease: cubic-bezier(.22, 1, .36, 1);

  --se-font-display: "Josefin Sans", system-ui, sans-serif;   /* brand web font */
  --se-font-accent: "Josefin Sans", system-ui, sans-serif;    /* brand web font, italic */
  --se-font-body: "Montserrat", system-ui, sans-serif;        /* brand secondary font */
}

/* ---------- Layout ---------- */
.se-sec {
  position: relative;
  font-family: var(--se-font-body);
  line-height: 1.6;
  color: var(--se-text);
}

.se-wrap {
  max-width: var(--se-maxw-override, var(--se-maxw));
  margin: 0 auto;
  padding: 0 var(--se-gutter, 24px);
}

/* Every section: designed padding as fallback, slider value on top.
   Sections set their own --se-pad-*-default; the Spacing panel sets
   --se-pad-top / --se-pad-bottom to override. */
.se-sec {
  padding-top: var(--se-pad-top, var(--se-pad-top-default, 0px));
  padding-bottom: var(--se-pad-bottom, var(--se-pad-bottom-default, 0px));
}
@media (max-width: 767px) {
  .se-wrap { padding: 0 var(--se-gutter, 18px); }
}

/* Scoped reset. Hello's reset and Elementor both set margins on headings
   paragraphs; neutralise them inside our sections only. */
.se-sec h1, .se-sec h2, .se-sec h3, .se-sec h4,
.se-sec p, .se-sec ul, .se-sec li, .se-sec figure {
  margin: 0;
  padding: 0;
}
.se-sec ul { list-style: none; }
.se-sec img { max-width: 100%; display: block; }
.se-sec a { color: inherit; text-decoration: none; }
.se-sec button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}
.se-sec *, .se-sec *::before, .se-sec *::after { box-sizing: border-box; }

.se-sec :focus-visible {
  outline: 3px solid var(--se-red);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Typography ---------- */
.se-display {
  font-family: var(--se-font-display);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.02em;
}

.se-acc {
  font-family: var(--se-font-accent);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.01em;
}

.se-eyebrow {
  font-family: var(--se-font-body);
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--se-red-deep);
  /* Always the same box model, whatever the section does around it.
     Sections may position the eyebrow (centre it, add margin below)
     but they must not change how the marker and text sit together. */
  display: inline-flex !important;
  align-items: center !important;
  gap: .6em !important;
  vertical-align: middle;
}
.se-eyebrow--dark { color: var(--se-red); }

/* ---------- Section header rhythm ----------
   One set of distances used by every section, so headers feel
   identical wherever they appear:
     eyebrow  -> heading      .9rem
     heading  -> lead         1rem
     header   -> content      --se-head-gap (Spacing panel), 44px default
   Specificity is deliberately higher than the scoped reset above. */
.se-sec .se-eyebrow { margin: 0 0 .9rem !important; }
.se-sec .se-h1,
.se-sec .se-h2,
.se-sec .se-statement__big { margin: 0 0 1rem !important; }
.se-sec .se-lead { margin: 0 !important; }
.se-sec .se-h1 + .se-lead,
.se-sec .se-h2 + .se-lead { margin-top: 0 !important; }

/* Header block to whatever follows it. Sections used to set this
   individually (30, 36, 40, 44, 48px); now it is one value. */
.se-sec-head,
.se-hero__inner > .se-lead,
.se-app__copy > .se-lead,
.se-statement .se-lead {
  margin-bottom: var(--se-head-gap, 44px) !important;
}
.se-sec-head + * { margin-top: 0 !important; }
.se-app__copy > .se-lead + * { margin-top: 0 !important; }
.se-hero__inner > .se-lead + * { margin-top: 0 !important; }

@media (max-width: 767px) {
  .se-sec { --se-head-gap-default: 32px; }
}
.se-sec { --se-head-gap: var(--se-head-gap-override, var(--se-head-gap-default, 44px)); }

/* Eyebrow marker. Sized in em so it scales with the label and can
   never be taller than the text. Style is chosen site-wide in
   Customize > Secure Express > Eyebrow marker. */
.se-eyebrow::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 2em;
  height: 2px;
  background: currentColor;
}

body.se-marker-bullseye .se-eyebrow::before {
  width: .9em;
  height: .9em;
  border-radius: 50%;
  background:
    radial-gradient(circle, currentColor 0 22%, transparent 26% 46%, currentColor 50% 100%);
}

body.se-marker-dot .se-eyebrow::before {
  width: .6em;
  height: .6em;
  border-radius: 50%;
  background: currentColor;
}

body.se-marker-star .se-eyebrow::before {
  content: "\2605";
  width: auto;
  height: auto;
  background: none;
  font-size: .95em;
  line-height: 1;
}

body.se-marker-diamond .se-eyebrow::before {
  width: .6em;
  height: .6em;
  background: currentColor;
  transform: rotate(45deg);
}

body.se-marker-none .se-eyebrow::before { display: none; }

.se-h1 { font-size: clamp(2.7rem, 7vw, 5.4rem); }
.se-h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.se-h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.1; }

.se-lead {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  color: var(--se-muted);
  max-width: 60ch;
}
.se-lead--dark { color: rgba(255, 255, 255, .72); }

/* ---------- Buttons ---------- */
.se-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--se-font-body);
  font-weight: 700;
  font-size: .96rem;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  transition: all .25s var(--se-ease);
  white-space: nowrap;
}
.se-btn svg { width: 18px; height: 18px; }

.se-btn--red { background: var(--se-red-deep); color: #fff; }
.se-btn--red:hover {
  background: var(--se-red);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px var(--se-red-glow);
}

.se-btn--dark { background: var(--se-ink); color: #fff; }
.se-btn--dark:hover { background: var(--se-red); transform: translateY(-2px); }

.se-btn--ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .34);
}
.se-btn--ghost:hover { background: #fff; color: var(--se-ink); border-color: #fff; }

.se-btn--light {
  background: #fff;
  color: var(--se-ink);
  border: 1.5px solid var(--se-hairline);
}
.se-btn--light:hover {
  background: var(--se-ink);
  color: #fff;
  border-color: var(--se-ink);
  transform: translateY(-2px);
}

.se-btn--lg { padding: 1.1rem 2rem; font-size: 1.02rem; }

/* ---------- Store badges ---------- */
.se-stores { display: flex; gap: .7rem; flex-wrap: wrap; }

.se-store {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem 1.1rem;
  border-radius: 14px;
  background: #fff;
  color: var(--se-ink);
  border: 1.5px solid var(--se-hairline);
  transition: all .25s var(--se-ease);
}
.se-store:hover {
  transform: translateY(-2px);
  border-color: var(--se-red);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .10);
}
.se-store__ico { width: 24px; height: 24px; flex: none; object-fit: contain; }
.se-store__ico--apple { width: 20px; margin-bottom: 2px; }
.se-store small {
  display: block;
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--se-muted);
  line-height: 1;
}
.se-store b {
  font-family: var(--se-font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
}

.se-store--dark {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  border-color: rgba(255, 255, 255, .18);
}
.se-store--dark small { color: rgba(255, 255, 255, .6); }
.se-store--dark:hover { background: rgba(255, 255, 255, .12); border-color: var(--se-red); }

/* ---------- Reveal animation ---------- */
.se-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--se-ease), transform .8s var(--se-ease);
}
.se-reveal.is-in { opacity: 1; transform: none; }
.se-reveal[data-se-delay="1"] { transition-delay: .08s; }
.se-reveal[data-se-delay="2"] { transition-delay: .16s; }
.se-reveal[data-se-delay="3"] { transition-delay: .24s; }
.se-reveal[data-se-delay="4"] { transition-delay: .32s; }

.se-clip {
  display: block;
  overflow: hidden;
  padding-bottom: .14em;
}
.se-clip > span {
  display: block;
  transform: translateY(110%);
  transition: transform .85s var(--se-ease);
}
.se-clip.is-in > span { transform: none; }

/* In the Elementor editor nothing scrolls into view, so reveals would
   leave the canvas blank. Force the resting state there. */
.elementor-editor-active .se-reveal,
.elementor-editor-preview .se-reveal { opacity: 1; transform: none; }
.elementor-editor-active .se-clip > span,
.elementor-editor-preview .se-clip > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .se-sec *,
  .se-sec *::before,
  .se-sec *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .se-reveal { opacity: 1; transform: none; }
  .se-clip > span { transform: none; }
}

/* ============================================================
   FULL-BLEED INSIDE ELEMENTOR
   Elementor gives every Container a boxed 1140px content width,
   10px padding and a 20px gap by default. Our sections are
   full-width bands, so any Container holding one is forced open
   and any padding or gap it would add is zeroed. Editors never
   have to touch Container settings for these widgets to sit
   edge to edge.
   ============================================================ */

/* The widget wrapper itself: full width, no bottom margin. */
.elementor-widget[class*="elementor-widget-se_"] {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.elementor-widget[class*="elementor-widget-se_"] > .elementor-widget-container {
  margin: 0;
  padding: 0;
}

/* Flex / grid Containers (Elementor 3.6+). Their spacing is driven
   by custom properties, so overriding those is the reliable route. */
.e-con:has(> .elementor-widget[class*="elementor-widget-se_"]),
.e-con:has(> .e-con-inner > .elementor-widget[class*="elementor-widget-se_"]) {
  --content-width: 100% !important;
  --width: 100% !important;
  --padding-block-start: 0 !important;
  --padding-block-end: 0 !important;
  --padding-inline-start: 0 !important;
  --padding-inline-end: 0 !important;
  --margin-block-start: 0 !important;
  --margin-block-end: 0 !important;
  --gap: 0 !important;
  --row-gap: 0 !important;
  --column-gap: 0 !important;
  max-width: none !important;
  padding: 0 !important;
}
.e-con:has(> .e-con-inner > .elementor-widget[class*="elementor-widget-se_"]) > .e-con-inner {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* Legacy Sections / Columns, in case any were used. */
.elementor-section:has(.elementor-widget[class*="elementor-widget-se_"]) > .elementor-container {
  max-width: none !important;
}
.elementor-section:has(.elementor-widget[class*="elementor-widget-se_"]) .elementor-element-populated {
  padding: 0 !important;
}
.elementor-section:has(.elementor-widget[class*="elementor-widget-se_"]) {
  padding: 0 !important;
}

/* Hello Elementor's page wrappers. With the page layout on "Default"
   Hello boxes the content; with an SE section on the page we want
   the bands edge to edge regardless of which layout was picked. */
body:has(.elementor-widget[class*="elementor-widget-se_"]) .site-main,
body:has(.elementor-widget[class*="elementor-widget-se_"]) .page-content,
body:has(.elementor-widget[class*="elementor-widget-se_"]) .page-header,
body:has(.elementor-widget[class*="elementor-widget-se_"]) .entry-content {
  max-width: none;
  margin: 0;
  padding: 0;
}
body:has(.elementor-widget[class*="elementor-widget-se_"]) .page-header {
  display: none;
}

/* Belt and braces: zero Elementor's Container padding variables at the
   root as well, covering both the current and the older property names. */
.e-con {
  --container-default-padding-block-start: 0;
  --container-default-padding-block-end: 0;
  --container-default-padding-inline-start: 0;
  --container-default-padding-inline-end: 0;
  --container-default-padding-top: 0;
  --container-default-padding-right: 0;
  --container-default-padding-bottom: 0;
  --container-default-padding-left: 0;
}

/* Never allow a stray horizontal scrollbar from a wide band. */
html, body { margin: 0; overflow-x: clip; }

/* ============================================================
   INTERACTIVE STATE LOCKDOWN
   Hello Elementor's reset sets a{color:#c36}, a:hover{color:#336}
   and button:hover{background:#c36} globally. Those outrank a bare
   class, which is where the pink icons and blue hovers came from.
   Every SE component sets its own colour for every state, in
   brand colours only: white, near-black, or brand red.
   ============================================================ */

/* Buttons, the class decides the colour, the state never changes it
   except where the design says so. */
.se-btn--red,
.se-btn--red:link, .se-btn--red:visited, .se-btn--red:hover, .se-btn--red:active, .se-btn--red:focus {
  color: #fff !important;
}
.se-btn--red:hover, .se-btn--red:focus-visible { background: var(--se-red) !important; }

.se-btn--dark,
.se-btn--dark:link, .se-btn--dark:visited, .se-btn--dark:hover, .se-btn--dark:active, .se-btn--dark:focus {
  color: #fff !important;
}
.se-btn--dark:hover, .se-btn--dark:focus-visible { background: var(--se-red) !important; }

.se-btn--ghost,
.se-btn--ghost:link, .se-btn--ghost:visited, .se-btn--ghost:active, .se-btn--ghost:focus { color: #fff !important; }
.se-btn--ghost:hover, .se-btn--ghost:focus-visible {
  color: var(--se-ink) !important;
  background: #fff !important;
  border-color: #fff !important;
}

.se-btn--light,
.se-btn--light:link, .se-btn--light:visited, .se-btn--light:active, .se-btn--light:focus { color: var(--se-ink) !important; }
.se-btn--light:hover, .se-btn--light:focus-visible {
  color: #fff !important;
  background: var(--se-ink) !important;
  border-color: var(--se-ink) !important;
}

/* <button> elements carrying .se-btn: undo Hello's button reset too. */
button.se-btn, button.se-btn:hover, button.se-btn:focus, button.se-btn:active {
  border-radius: 999px;
  border-style: solid;
}
button.se-btn--red, button.se-btn--dark { border: none !important; }

/* Store badges */
.se-store, .se-store:link, .se-store:visited, .se-store:hover, .se-store:active, .se-store:focus {
  color: var(--se-ink) !important;
}
.se-store--dark, .se-store--dark:link, .se-store--dark:visited, .se-store--dark:hover, .se-store--dark:active, .se-store--dark:focus {
  color: #fff !important;
}

/* Brand lock-up: always white, never reacts. */
.se-brand, .se-brand:link, .se-brand:visited, .se-brand:hover, .se-brand:active, .se-brand:focus {
  color: #fff !important;
  text-decoration: none !important;
}
.se-brand__word span { color: var(--se-red) !important; }

/* Primary nav links: muted white → white, red underline. */
.se-nav__links a, .se-nav__links a:link, .se-nav__links a:visited { color: rgba(255, 255, 255, .82) !important; }
.se-nav__links a:hover, .se-nav__links a:focus, .se-nav__links a:active { color: #fff !important; }

/* Mobile panel links */
.se-mobile a:not(.se-btn), .se-mobile a:not(.se-btn):visited { color: #fff !important; }
.se-mobile a:not(.se-btn):hover, .se-mobile a:not(.se-btn):focus { color: var(--se-red) !important; }

/* Footer link columns: muted white → red. */
.se-footer__col a, .se-footer__col a:link, .se-footer__col a:visited { color: rgba(255, 255, 255, .78) !important; }
.se-footer__col a:hover, .se-footer__col a:focus, .se-footer__col a:active { color: var(--se-red) !important; }
.se-footer__bottom a, .se-footer__bottom a:visited { color: rgba(255, 255, 255, .6) !important; }
.se-footer__bottom a:hover, .se-footer__bottom a:focus { color: var(--se-red) !important; }

/* Social chips: red icon on the dark chip; hover flips to a red chip
   with a white icon. */
.se-footer__soc a, .se-footer__soc a:link, .se-footer__soc a:visited {
  color: var(--se-red) !important;
  background: var(--se-char-2);
}
.se-footer__soc a:hover, .se-footer__soc a:focus, .se-footer__soc a:active {
  color: #fff !important;
  background: var(--se-red) !important;
}

/* WhatsApp float: dark green text at rest, white text and icon on hover. */
.se-wa, .se-wa:link, .se-wa:visited { color: #062 !important; }
.se-wa:hover, .se-wa:active, .se-wa:focus { color: #fff !important; }

/* Content links inside sections (city pills, captions, etc.) inherit. */
.se-sec a:not([class]), .se-sec a:not([class]):hover { color: inherit !important; }

/* Hello's focus ring is black-on-white; use the brand ring instead. */
.se-sec a:focus-visible, .se-sec button:focus-visible,
.se-nav a:focus-visible, .se-nav button:focus-visible,
.se-footer a:focus-visible, .se-mobile a:focus-visible {
  outline: 3px solid var(--se-red) !important;
  outline-offset: 3px;
  box-shadow: none !important;
}

/* Buttons that are not .se-btn (tabs, FAQ rows, close controls): Hello's
   active/focus fill must never show. Their own classes set any fill. */
.se-sec button:not(.se-btn):active,
.se-sec button:not(.se-btn):focus { background-color: transparent; }
.se-booker__tabs button.is-active:active,
.se-booker__tabs button.is-active:focus { background-color: #fff !important; }

/* Store badges sit side by side on phones, sharing the row equally. */
@media (max-width: 767px) {
  .se-stores { flex-wrap: nowrap; gap: .5rem; }
  .se-stores .se-store {
    flex: 1 1 0;
    min-width: 0;
    max-width: 210px;
    justify-content: center;
    gap: .5rem;
    padding: .55rem .7rem;
    border-radius: 12px;
  }
  .se-stores .se-store small { font-size: .52rem; letter-spacing: .05em; white-space: nowrap; }
  .se-stores .se-store b { font-size: .9rem; white-space: nowrap; }
  .se-stores .se-store__ico { width: 21px; height: 21px; }
  .se-stores .se-store__ico--apple { width: 18px; }
}
@media (max-width: 360px) {
  .se-stores .se-store { padding: .5rem .5rem; gap: .4rem; }
  .se-stores .se-store b { font-size: .8rem; }
  .se-stores .se-store small { font-size: .48rem; }
  .se-stores .se-store__ico { width: 18px; height: 18px; }
}

/* Skip to content link (keyboard users): brand colours and font, not
   Hello Elementor's pink and system font. */
.skip-link.screen-reader-text:focus {
  background: var(--se-red) !important;
  color: #fff !important;
  font-family: var(--se-font-body) !important;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: none;
}

/* ---------- Brand typography tuning ----------
   Josefin Sans is lighter and smaller on the line than the previous
   display face, so headings step up slightly and lose the tight
   negative tracking. Its heaviest weight is 700. */
.se-display { font-weight: 700; letter-spacing: 0; line-height: 1.04; }
.se-acc { font-weight: 700; letter-spacing: 0; }
.se-h1 { font-size: clamp(2.9rem, 7.6vw, 5.8rem); }
.se-h2 { font-size: clamp(2.15rem, 5vw, 3.65rem); }
.se-h3 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); }