/* Hero Section */
  .hero {
      position: relative;
      height: 100vh;
      min-height: 420px;
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      margin-top: 97px;
      background-repeat: no-repeat;
  }

  .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(26, 26, 26, 0.7), rgba(184, 92, 56, 0.3));
  }

  .hero-content {
      position: relative;
      z-index: 2;
      width: 100%;
      padding: 6%;
      color: var(--white);
  }

  .hero-subtitle {
      display: inline-block;
      font-size: 14px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 3px;
      margin-bottom: 20px;
      opacity: 0.9;
  }

  .hero-title {
      color: var(--white1);
      font-family: var(--font-secondary);
      font-weight: 400;
      margin-bottom: 30px;
      line-height: 1.1;
  }

  .hero-description {
      color: var(--white);
      font-size: 18px;
      line-height: 1.6;
      max-width: 500px;
      margin-bottom: 40px;
      opacity: 0.9;
  }

  .hero-btn { padding: 15px 40px; font-size: 14px; }

  .hero-content-main { display: flex; justify-content: center; align-items: center; }
  .hero-text { display: flex; flex-direction: column; align-items: center; }

  .hero-info { position: absolute; bottom: 40px; right: 40px; }
  .hero-label {
      background-color: rgba(255, 255, 255, 0.9);
      color: var(--text-dark);
      padding: 10px 20px;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 600;
  }

  /* ---------- Tabs (text-only with animated underline) ---------- */
  :root { --accent: #9E441B; }

  .page-shifting-tabs{
      position: relative;
      z-index: 2;
      width: 100%;
      display: flex;
      color: var(--white);
      border-bottom: 1px solid rgba(255,255,255,0.25);
  }

  .page-shifting-tabs .tab-button {
      position: relative;
      flex: 1 1 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 14px 18px;
      color: #fff;                          /* white text */
      font-family: var(--font-secondary);
      font-size: 24px;
      font-weight: 700;
      background: transparent !important;   /* no rectangles */
      border: none !important;
      text-decoration: none;
      transition: opacity .2s ease, filter .2s ease;
  }

  /* Underline (hidden by default) */
  .page-shifting-tabs .tab-button::after {
      content: "";
      position: absolute;
      left: 12%;
      right: 12%;
      bottom: 6px;
      height: 3px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform .28s ease;
  }

  /* Hover/focus: show underline left→right */
  .page-shifting-tabs .tab-button:hover::after,
  .page-shifting-tabs .tab-button:focus-visible::after {
      transform: scaleX(1);
      outline: none;
  }

  /* Active tab keeps underline visible */
  .page-shifting-tabs .tab-button.active-tab-btn::after {
      transform: scaleX(1);
  }

  /* Inactive tab looks dimmer */
  .page-shifting-tabs .tab-button.is-inactive {
      opacity: 0.6;
      filter: saturate(0.7);
  }

  /* ---------- Context submenus under the tabs ---------- */
  .tab-submenu {
      position: relative;
      z-index: 2;
      width: 100%;
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      align-items: center;                 /* align items cleanly */
      padding: 12px 14px 18px;
      background: rgba(0,0,0,0.22);        /* subtle readable backdrop */
      border: 1px solid rgba(255,255,255,0.25);
      border-left: none;
      border-right: none;
  }

  .tab-submenu a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      padding: 8px 12px;
      line-height: 1;
      border-radius: 8px;
      text-decoration: none;
      color: var(--white);
      border: 1px solid transparent;
      transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  /* --- Remove the hairline under the tabs --- */
  /* (If the line came from the tab bar) */
  .page-shifting-tabs { border-bottom: 0 !important; }

  /* (If the line came from the submenu frame, nuke it too) */
  .tab-submenu { border: 0 !important; }  /* was 1px solid ... */

  /* Keep your animated underline on the active/hovered tab */
  .page-shifting-tabs .tab-button::after { height: 3px; } /* unchanged */

  /* --- Make the hero shorter (less scrolling) --- */
  .hero {
    /* pick one height target; tweak the middle % if needed */
    height: clamp(800px, 58vh, 720px) !important;  /* smaller than 100vh */
    /* background-attachment: fixed;  // keep if you like the parallax */
  }

  /* Optional: a bit taller on phones, still smaller than full screen */
  @media (max-width: 768px) {
    .hero { height: clamp(380px, 72vh, 640px) !important; }
  }
  /* HOVER = #9E441B background, white text */
  .tab-submenu a:hover,
  .tab-submenu a:focus-visible {
      background: var(--accent);
      color: #fff;
      border-color: transparent;
      outline: none;
  }

  /* Align placement based on which tab is active */
  .tab-submenu--left  { justify-content: flex-start; text-align: left; }
  .tab-submenu--right { justify-content: flex-end;   text-align: right; }

  /* Utilities */
  [hidden] { display: none !important; }

  /* ---------- Responsive ---------- */
  @media (max-width: 768px) {
      .hero-content { padding: 17% 0; }
      .hero { margin-top: 60px; }
      .page-shifting-tabs .tab-button { font-size: 14px; }
      .tab-submenu--left,
      .tab-submenu--right { justify-content: center; text-align: center; }
  }

  /* Reduced motion: no underline animation */
  @media (prefers-reduced-motion: reduce) {
      .page-shifting-tabs .tab-button::after,
      .page-shifting-tabs .tab-button:hover::after,
      .page-shifting-tabs .tab-button:focus-visible::after,
      .page-shifting-tabs .tab-button.active-tab-btn::after {
          transition: none;
          transform: scaleX(1);
      }
  }


  /* Hide submenus while Tenants view is active */
  body.view-tenant #submenu-left,
  body.view-tenant #submenu-right { display: none !important; }
  /* Hide all site menus everywhere (desktop + mobile) */
  .nav-menu,
  .mobile-menu-toggle,
  .mobile-menu,
  .mobile-menu-overlay { display: none !important; }

  /* Make header rows align nicely with only the Contact button */
  .navbar,
  .mobile-navbar { display: flex; align-items: center; justify-content: space-between; }

  /* Ensure the Contact button sits on the right cleanly */
  .nav-menu-main { display: flex; align-items: center; }
  /* ===== Tabs bar: clear background strip so it reads as a menu ===== */
  :root {
    --tabbar-bg-1: rgba(10,10,10,.55);     /* darker at top */
    --tabbar-bg-2: rgba(10,10,10,.32);     /* softer at bottom */
  }

  .page-shifting-tabs{
    /* create a full-width translucent bar behind the two tabs */
    background: linear-gradient(180deg, var(--tabbar-bg-1), var(--tabbar-bg-2));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 0;                              /* no hairline */
    padding: 10px 14px;                     /* breathing room */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08), /* subtle top edge */
      inset 0 -1px 0 rgba(0,0,0,0.35);      /* subtle bottom edge */
  }

  /* Tab buttons: stronger contrast + comfortable target size */
  .page-shifting-tabs .tab-button{
    min-height: 44px;
    letter-spacing: .2px;
    color: rgba(255,255,255,0.9);
    opacity: .66;                           /* default/inactive look */
    filter: saturate(.85);
  }

  /* underline animation (kept), placed a tad lower and thicker */
  .page-shifting-tabs .tab-button::after{
    bottom: 4px;                            /* sits on the bar edge */
    height: 4px;                            /* a bit bolder */
  }

  /* Hover: wake up the tab */
  .page-shifting-tabs .tab-button:hover{
    opacity: .9;
    filter: saturate(1);
  }

  /* Active tab: bright text + persistent underline + subtle glow */
  .page-shifting-tabs .tab-button.active-tab-btn{
    opacity: 1;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
  }
  .page-shifting-tabs .tab-button.active-tab-btn::after{
    transform: scaleX(1);
    box-shadow: 0 2px 10px rgba(158,68,27,.45); /* accent glow */
  }

  /* Any tab that is NOT active looks more disabled */
  .page-shifting-tabs .tab-button:not(.active-tab-btn){
    opacity: .45;
    filter: grayscale(.15) contrast(.9) saturate(.8);
  }

  /* On small screens, keep the bar readable but compact */
  @media (max-width: 768px){
    .page-shifting-tabs{ padding: 8px 10px; }
    .page-shifting-tabs .tab-button{ min-height: 40px; }
    .page-shifting-tabs .tab-button::after{ height: 3px; bottom: 3px; }
  }
  /* --- Responsive: stack submenu under the selected tab --- */
  .page-shifting-tabs { position: relative; }

  /* phones / tablets */
  @media (max-width: 768px) {
    /* Put the submenu in a dropdown panel under the active tab */
    .tab-submenu {
      position: absolute;
      top: 100%;                 /* directly below the tabs bar */
      left: 0;                   /* default: align to left tab */
      width: 50%;                /* same width as the tab (2 tabs = 50%) */
      flex-direction: column;    /* vertical list */
      align-items: stretch;
      gap: 6px;
      padding: 10px 12px;
      text-align: left;

      /* readable, card-like backdrop */
      background: linear-gradient(180deg, rgba(10,10,10,.62), rgba(10,10,10,.42));
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 10px;
      box-shadow: 0 12px 28px rgba(0,0,0,.35);
      z-index: 5;
    }

    /* If you ever show the right tab submenu on another page, align it to the right tab */
    .tab-submenu--right { left: 50%; }  /* second column */

    .tab-submenu a {
      width: 100%;
      min-height: 42px;
      padding: 10px 12px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-radius: 8px;
      line-height: 1.2;
      font-size: 16px;
    }

    /* Give a little space so the dropdown doesn't overlap the hero text */
    .hero-content-main { margin-top: 56px; }
  }
  /* ===== Mobile dropdown under active tab (theme-styled) ===== */
  @media (max-width: 768px) {
    /* Make sure the tabs create a layer for the dropdown to sit above */
    .page-shifting-tabs { position: relative; z-index: 6; }

    /* Draw the dropdown as a floating card on TOP of the hero */
    .tab-submenu {
      position: fixed !important;                 /* pin to viewport */
      top: var(--submenu-top, 0px) !important;    /* set via JS */
      left: var(--submenu-left, 0px) !important;  /* set via JS */
      width: var(--submenu-width, 50vw) !important;
      max-height: min(62vh, 460px);
      overflow: auto;

      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 12px;

      /* Theme look */
      background: linear-gradient(180deg,
                  rgba(20, 15, 13, .94),
                  rgba(20, 15, 13, .86));
      border-radius: 12px;
      box-shadow: 0 18px 48px rgba(0,0,0,.38),
                  0 0 0 1px rgba(255,255,255,.08) inset;
      border: none !important;
      z-index: 999;                                /* above hero/content */
    }

    /* little accent caret that points to the tab */
    .tab-submenu::before {
      content: "";
      position: absolute;
      top: -6px;
      left: var(--caret-left, 20px);               /* set via JS */
      width: 12px; height: 12px;
      transform: rotate(45deg);
      background: linear-gradient(180deg,
                  rgba(20, 15, 13, .94),
                  rgba(20, 15, 13, .86));
      box-shadow: -1px -1px 0 rgba(255,255,255,.08) inset;
    }

    .tab-submenu a {
      width: 100%;
      min-height: 44px;
      padding: 12px 12px;
      border-radius: 8px;
      color: #fff;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      border: 0;
      background: rgba(255,255,255,.04);
      transition: background .2s ease, transform .12s ease;
    }

    .tab-submenu a:hover,
    .tab-submenu a:focus-visible {
      background: var(--accent);
      color: #fff;
      outline: none;
      transform: translateY(-1px);
    }

    /* Give breathing room so the dropdown doesn't collide with hero text */
    .hero-content-main { margin-top: 56px; }
  }

  /* Make the tab bar read clearly as a menu (keeps your earlier styles) */
  .page-shifting-tabs{
    background: linear-gradient(180deg, rgba(10,10,10,.55), rgba(10,10,10,.32));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 10px 14px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      inset 0 -1px 0 rgba(0,0,0,0.35);
  }

  /* Active vs inactive emphasis (keeps your underline) */
  .page-shifting-tabs .tab-button { opacity:.6; filter:saturate(.85); }
  .page-shifting-tabs .tab-button:hover { opacity:.9; filter:saturate(1); }
  .page-shifting-tabs .tab-button.active-tab-btn{
    opacity:1; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.25);
  }
  .page-shifting-tabs .tab-button.active-tab-btn::after{
    box-shadow:0 2px 10px rgba(158,68,27,.45);
  }
  /* Mobile dropdown: transparent, aligned under Complexe Swift */
  @media (max-width: 768px) {
    .page-shifting-tabs { position: relative; z-index: 6; }

    .tab-submenu {
      position: absolute !important;      /* under the tab bar */
      top: calc(100% + 6px) !important;   /* just below the tabs */
      left: 0 !important;                 /* JS adjusts left/width to tab */
      width: 50% !important;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: transparent !important; /* no box background */
      border: none !important;
      box-shadow: none !important;
      z-index: 7;                          /* on top of hero */
    }

    /* items: transparent; underline-only on hover/focus */
    .tab-submenu a {
      position: relative;
      display: block;
      width: 100%;
      padding: 10px 4px;
      min-height: 40px;
      line-height: 1.2;
      color: #fff;
      text-decoration: none;
      background: transparent !important;
      border: 0;
    }
    .tab-submenu a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 4px;
      height: 2px;
      width: 0;
      background: var(--accent);          /* #9E441B */
      transition: width .25s ease;
    }
    .tab-submenu a:hover::after,
    .tab-submenu a:focus-visible::after { width: 100%; }
  }

  /* make sure hidden truly hides on all breakpoints */
  #submenu-left[hidden] { display: none !important; }


  /* Anchor for absolute submenu */
  .page-shifting-tabs { position: relative; }

  /* Mobile: transparent dropdown aligned to "Complexe Swift" */
  @media (max-width: 768px) {
    .page-shifting-tabs { z-index: 6; }

    .page-shifting-tabs .tab-submenu {
      position: absolute !important;           /* anchor to the bar */
      top: calc(100% + 6px) !important;        /* just below tabs bar */
      left: 0 !important;                      /* JS sets exact left */
      width: 50% !important;                   /* JS will override */
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: transparent !important;      /* no box */
      border: 0 !important;
      box-shadow: none !important;
      z-index: 7;                               /* above hero content */
    }

    .page-shifting-tabs .tab-submenu a {
      position: relative;
      display: block;
      width: 100%;
      padding: 10px 4px;
      min-height: 40px;
      line-height: 1.2;
      color: #fff;
      text-decoration: none;
      background: transparent !important;
      border: 0;
    }
    .page-shifting-tabs .tab-submenu a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 4px;
      height: 2px;
      width: 0;
      background: var(--accent);               /* #9E441B */
      transition: width .25s ease;
    }
    .page-shifting-tabs .tab-submenu a:hover::after,
    .page-shifting-tabs .tab-submenu a:focus-visible::after { width: 100%; }
  }

  /* Make sure hidden truly hides */
  #submenu-left[hidden] { display: none !important; }

  /* Anchor for absolute submenu on all breakpoints */
  .page-shifting-tabs { position: relative; z-index: 6; }

  /* Submenu sits BELOW the tab bar, not in the flex flow */
  .page-shifting-tabs .tab-submenu{
    position: absolute !important;
    top: calc(100% + 6px) !important;    /* just under the tabs bar */
    left: 0 !important;                  /* JS updates this to the tab's left */
    margin: 0;
    padding: 0;
    display: flex;
    gap: 14px;
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 7;                          /* above hero */
    white-space: nowrap;                 /* single line on desktop */
  }

  /* Links: transparent, underline on hover */
  .page-shifting-tabs .tab-submenu a{
    position: relative;
    display: inline-block;
    padding: 8px 4px;
    color: #fff;
    text-decoration: none;
  }
  .page-shifting-tabs .tab-submenu a::after{
    content: "";
    position: absolute;
    left: 0; bottom: 2px;
    height: 2px; width: 0;
    background: var(--accent);           /* #9E441B */
    transition: width .25s ease;
  }
  .page-shifting-tabs .tab-submenu a:hover::after,
  .page-shifting-tabs .tab-submenu a:focus-visible::after{ width: 100%; }

  /* Mobile: make it a vertical dropdown and match tab width */
  @media (max-width: 768px){
    .page-shifting-tabs .tab-submenu{
      flex-direction: column;
      gap: 6px;
      white-space: normal;               /* allow wrapping per item */
    }
    .page-shifting-tabs .tab-submenu a{
      width: 100%;
      min-height: 40px;
      padding: 10px 4px;
    }
  }

  /* Ensure hidden really hides */
  #submenu-left[hidden]{ display: none !important; }
  /* ===== Submenu background (desktop + mobile) ===== */
  /* The submenu already sits under the tab bar via absolute positioning. */
  .page-shifting-tabs { position: relative; z-index: 6; }

  /* Make the submenu look like a subtle glass panel, not a harsh black box */
  .page-shifting-tabs .tab-submenu{
    /* keep your layout rules; just add spacing + a background layer */
    padding: 8px 10px;              /* breathing room around the links */
    border-radius: 12px;
    isolation: isolate;             /* so ::before can sit behind links */
  }

  /* Draw the background with a pseudo-element so links stay transparent */
  .page-shifting-tabs .tab-submenu::before{
    content: "";
    position: absolute;
    inset: -6px -8px;               /* small halo around the menu */
    border-radius: 12px;
    pointer-events: none;
    z-index: -1;

    /* Theme-friendly frosted glass */
    background: linear-gradient(
      180deg,
      rgba(28, 22, 20, 0.78),
      rgba(28, 22, 20, 0.60)
    );
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    /* Subtle depth + soft edge, not a hard rectangle */
    box-shadow:
      0 12px 32px rgba(0,0,0,.35),
      inset 0 1px 0 rgba(255,255,255,.06),
      0 0 0 1px rgba(255,255,255,.08);
  }

  /* Keep link look minimal: underline accent on hover */
  .page-shifting-tabs .tab-submenu a{
    position: relative;
    display: inline-block;
    padding: 8px 4px;
    color: #fff;
    text-decoration: none;
    background: transparent;
  }
  .page-shifting-tabs .tab-submenu a::after{
    content:"";
    position:absolute;
    left:0; bottom:2px;
    height:2px; width:0;
    background: var(--accent); /* #9E441B */
    transition: width .25s ease;
  }
  .page-shifting-tabs .tab-submenu a:hover::after,
  .page-shifting-tabs .tab-submenu a:focus-visible::after{ width:100%; }

  /* Mobile: vertical list keeps the same background panel */
  @media (max-width: 768px){
    .page-shifting-tabs .tab-submenu{
      flex-direction: column;
      gap: 6px;
    }
    .page-shifting-tabs .tab-submenu a{
      width: 100%;
      min-height: 40px;
      padding: 10px 4px;
    }
  }

  /* Ensure hidden really hides */
  #submenu-left[hidden]{ display: none !important; }
  /* ===== Softer submenu background + underline-only hover ===== */

  /* tune the translucency here */
  :root{
    --submenu-bg-top:  rgba(28,22,20,0.42);  /* was ~0.78 */
    --submenu-bg-bot:  rgba(28,22,20,0.30);  /* was ~0.60 */
    --submenu-blur:    4px;                  /* was 6px */
    --submenu-ring:    rgba(255,255,255,.06);
    --submenu-shadow:  0 10px 24px rgba(0,0,0,.25);
  }

  /* the bar is the positioning context */
  .page-shifting-tabs { position: relative; z-index: 6; }

  /* base submenu layout (already absolute from previous step) */
  .page-shifting-tabs .tab-submenu{
    padding: 6px 8px;               /* a bit tighter = more subtle */
    border-radius: 10px;
    isolation: isolate;
  }

  /* soft “glass” background behind links */
  .page-shifting-tabs .tab-submenu::before{
    content: "";
    position: absolute;
    inset: -4px -6px;               /* small halo */
    border-radius: 10px;
    z-index: -1;
    pointer-events: none;

    background: linear-gradient(180deg, var(--submenu-bg-top), var(--submenu-bg-bot));
    backdrop-filter: blur(var(--submenu-blur));
    -webkit-backdrop-filter: blur(var(--submenu-blur));
    box-shadow: var(--submenu-shadow), inset 0 1px 0 var(--submenu-ring);
  }

  /* links keep a minimal look; underline animates on hover */
  .page-shifting-tabs .tab-submenu a{
    position: relative;
    display: inline-block;
    padding: 8px 4px;
    color: #fff;
    text-decoration: none;
    background: transparent;
    border: 0;
  }

  /* kill any older “orange background on hover” rules */
  .page-shifting-tabs .tab-submenu a:hover,
  .page-shifting-tabs .tab-submenu a:focus-visible{
    background: transparent !important;
    border-color: transparent !important;
    color: #fff; /* keep text white */
  }

  /* underline-only effect */
  .page-shifting-tabs .tab-submenu a::after{
    content:"";
    position:absolute;
    left:0; bottom:2px;
    height:2px; width:0;
    background: var(--accent); /* #9E441B */
    transition: width .22s ease;
  }
  .page-shifting-tabs .tab-submenu a:hover::after,
  .page-shifting-tabs .tab-submenu a:focus-visible::after{ width:100%; }

  /* Mobile keeps the same subtle panel and vertical list */
  @media (max-width: 768px){
    .page-shifting-tabs .tab-submenu{
      flex-direction: column;
      gap: 6px;
      padding: 8px 10px;
    }
    .page-shifting-tabs .tab-submenu a{
      width: 100%;
      min-height: 40px;
      padding: 10px 4px;
    }
  }

  /* ensure hidden really hides */
  #submenu-left[hidden]{ display: none !important; }
  /* ===== Submenu background: more visible on mobile + safe fallback ===== */

  /* base (desktop) — soft */
  .page-shifting-tabs .tab-submenu{
    padding: 6px 8px;               /* space for the bg layer */
    border-radius: 10px;
    position: absolute !important;  /* already set, reiterated to win specificity */
    isolation: isolate;             /* keep the bg behind links */
  }
  .page-shifting-tabs .tab-submenu::before{
    content: "";
    position: absolute;
    inset: 0;                       /* draw inside the panel (no negative halo) */
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(
      180deg,
      rgba(28,22,20,0.36),          /* subtle desktop */
      rgba(28,22,20,0.26)
    );
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow:
      0 10px 24px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.06);
  }

  /* mobile — a touch stronger so it’s actually visible on bright photos */
  @media (max-width: 768px){
    .page-shifting-tabs .tab-submenu{
      padding: 8px 10px;
      border-radius: 12px;
    }
    .page-shifting-tabs .tab-submenu::before{
      background: linear-gradient(
        180deg,
        rgba(28,22,20,0.52),        /* slightly denser on mobile */
        rgba(28,22,20,0.42)
      );
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }
  }

  /* Fallback when backdrop-filter isn’t supported (many mobiles) */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .page-shifting-tabs .tab-submenu::before{
      background: rgba(28,22,20,0.55); /* still subtle, but guaranteed visible */
      box-shadow: 0 10px 24px rgba(0,0,0,.22);
    }
  }

  /* Keep hover = underline only (no fill) */
  .page-shifting-tabs .tab-submenu a{
    background: transparent !important;
    border: 0 !important;
  }
  .page-shifting-tabs .tab-submenu a::after{
    content:"";
    position:absolute;
    left:0; bottom:2px;
    height:2px; width:0;
    background: var(--accent);
    transition: width .22s ease;
  }
  .page-shifting-tabs .tab-submenu a:hover::after,
  .page-shifting-tabs .tab-submenu a:focus-visible::after{ width:100%; }
  /* === FORCE VISIBLE BACKGROUND FOR MOBILE SUBMENU === */
  @media (max-width: 768px){
    .page-shifting-tabs { position: relative; z-index: 6; }

    .page-shifting-tabs .tab-submenu{
      /* stays under the tabs bar; your JS can still set left/width */
      position: absolute !important;
      top: calc(100% + 6px) !important;
      left: var(--submenu-left, 0) !important;
      width: var(--submenu-width, 50%) !important;

      padding: 10px 12px;
      border-radius: 12px;
      isolation: isolate;     /* create a stacking context for the bg */
      z-index: 9;             /* sit above the hero */
    }

    /* the actual frosted background layer */
    .page-shifting-tabs .tab-submenu::before{
      content: "";
      position: absolute;
      inset: 0;                      /* draw inside the panel */
      border-radius: inherit;
      pointer-events: none;
      z-index: -1;

      background: linear-gradient(
        180deg,
        rgba(28,22,20,.58),
        rgba(28,22,20,.44)
      ) !important;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      box-shadow:
        0 14px 30px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.06);
    }
  }

  /* Fallback for browsers without backdrop-filter */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    @media (max-width: 768px){
      .page-shifting-tabs .tab-submenu::before{
        background: rgba(28,22,20,.65) !important;
      }
    }
  }
  /* === Mobile submenu: make the background visible and above the hero === */
  @media (max-width: 768px){
    .page-shifting-tabs { position: relative; z-index: 6; }

    .page-shifting-tabs .tab-submenu{
      position: absolute !important;
      top: calc(100% + 6px) !important;
      left: var(--submenu-left, 0) !important;       /* your JS can set this */
      width: var(--submenu-width, 50%) !important;    /* your JS can set this */
      z-index: 1001 !important;                       /* sit above overlay/hero */
      padding: 10px 12px;
      border-radius: 12px;
      isolation: isolate;                              /* create stacking context */
      /* Fallback solid so it's visible even without backdrop-filter */
      background: rgba(28,22,20,.62) !important;
    }

    /* Frosted layer (will show when backdrop-filter is supported) */
    .page-shifting-tabs .tab-submenu::before{
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      z-index: -1;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(28,22,20,.60), rgba(28,22,20,.46)) !important;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      box-shadow:
        0 14px 30px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.06);
    }

    /* If the browser DOES support blur, let the frosted ::before be the bg */
    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
      .page-shifting-tabs .tab-submenu{
        background: transparent !important;
      }
    }
  }

  /* === Desktop: make the submenu span the full width under the tabs bar === */
  @media (min-width: 769px){
    .page-shifting-tabs { overflow: visible; }

    .page-shifting-tabs .tab-submenu{
      position: absolute !important;
      top: calc(100% + 6px) !important;
      left: 0 !important;
      right: 0 !important;        /* full width */
      width: auto !important;
      padding: 8px 12px;
      gap: 18px;
      white-space: nowrap;
      border-radius: 10px;
      isolation: isolate;
      z-index: 10;
    }
    .page-shifting-tabs .tab-submenu::before{
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      z-index: -1;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(28,22,20,.48), rgba(28,22,20,.36));
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      box-shadow:
        0 12px 28px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.06);
    }
  }
  /* === Submenu panel: stick to the bar (desktop) + visible background (mobile) === */

  /* Anchor layer above the hero */
  .page-shifting-tabs{ position:relative; z-index:10; }

  /* Common submenu panel */
  .page-shifting-tabs > .tab-submenu{
    position:absolute !important;
    top:100% !important;                 /* no gap under the bar */
    left:0 !important;
    right:0 !important;                  /* full-width on desktop */
    padding:8px 12px !important;
    border-radius:10px !important;
    isolation:isolate !important;        /* bg sits behind links */
    z-index:1002 !important;
  }

  /* Background layer (forced) */
  .page-shifting-tabs > .tab-submenu::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    border-radius:inherit !important;
    background:linear-gradient(180deg,rgba(28,22,20,.58),rgba(28,22,20,.44)) !important;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    box-shadow:0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
    pointer-events:none !important;
    z-index:-1 !important;
  }

  /* Make sure link rows don’t paint their own background */
  .page-shifting-tabs > .tab-submenu a{
    position:relative; z-index:1; background:transparent !important;
  }

  /* Mobile: align to the left tab and use tab width (JS sets the vars) */
  @media (max-width:768px){
    .page-shifting-tabs > .tab-submenu{
      left:var(--submenu-left,0) !important;
      right:auto !important;
      width:var(--submenu-width,50%) !important;
      display:flex !important;
      flex-direction:column !important;
      gap:6px !important;
    }
  }

  /* Fallback when blur isn’t supported (many mobiles) */
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .page-shifting-tabs > .tab-submenu::before{
      background:rgba(28,22,20,.65) !important;
    }
  }
  /* === Make submenu background visible on ALL breakpoints === */
  /* Put the tabs above the hero and create a stacking context for the panel */
  .page-shifting-tabs{ position: relative; z-index: 20; }

  /* Submenu panel sits directly under the bar (no gap) and above the hero */
  .page-shifting-tabs > .tab-submenu{
    position: absolute !important;
    top: 100% !important;          /* flush to the bar */
    left: 0 !important;
    right: 0 !important;           /* full width on desktop */
    padding: 8px 12px !important;
    border-radius: 12px !important;
    z-index: 21 !important;        /* above hero/overlay */
    isolation: isolate;            /* keep its background inside */
  }

  /* The actual background layer – keep it INSIDE the panel (not -1) */
  .page-shifting-tabs > .tab-submenu::before{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    z-index: 0 !important;         /* <- crucial: not negative */
    pointer-events: none !important;

    /* frosted panel + soft shadow */
    background: linear-gradient(180deg, rgba(28,22,20,.58), rgba(28,22,20,.44)) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
  }

  /* Keep links above the background and transparent */
  .page-shifting-tabs > .tab-submenu > a{
    position: relative; z-index: 1;
    background: transparent !important; border: 0;
  }

  /* Mobile: align under the left tab and match its width (JS provides these vars) */
  @media (max-width: 768px){
    .page-shifting-tabs > .tab-submenu{
      left: var(--submenu-left, 0) !important;
      right: auto !important;
      width: var(--submenu-width, 50%) !important;
      display: flex !important; flex-direction: column !important; gap: 6px !important;
    }
  }

  /* Fallback when blur isn’t supported (many mobiles) */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .page-shifting-tabs > .tab-submenu::before{
      background: rgba(28,22,20,.65) !important;
    }
  }

  /* === FINAL OVERRIDES: visible submenu background (desktop + mobile) === */

  /* keep hero content under the tabs/submenu */
  .hero { overflow: visible; }
  .hero-overlay { z-index: 0; }

  /* the tabs bar anchors the submenu and sits above the hero */
  .page-shifting-tabs{ position: relative !important; z-index: 20 !important; margin: 0 !important; }

  /* the submenu panel itself (direct child of the bar) */
  .page-shifting-tabs > .tab-submenu{
    position: absolute !important;
    top: 100% !important;      /* flush against the bar */
    left: 0 !important;
    right: 0 !important;       /* full width on desktop */
    padding: 8px 12px !important;
    border-radius: 12px !important;
    isolation: isolate !important;   /* create stacking context */
    z-index: 21 !important;

    /* fallback color so it shows even if blur isn’t supported */
    background: rgba(28,22,20,.58) !important;
  }

  /* “frosted glass” layer (only visible in browsers that support blur) */
  .page-shifting-tabs > .tab-submenu::before{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 0 !important;

    background: linear-gradient(180deg, rgba(28,22,20,.58), rgba(28,22,20,.44)) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
  }

  /* keep links above the background and transparent themselves */
  .page-shifting-tabs > .tab-submenu > a{
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* mobile: align under the left tab and match that tab’s width
    (your JS can set --submenu-left / --submenu-width; these are defaults) */
  @media (max-width: 768px){
    .page-shifting-tabs > .tab-submenu{
      left: var(--submenu-left, 0) !important;
      right: auto !important;
      width: var(--submenu-width, 50%) !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 6px !important;
    }
  }

  /* if the browser supports blur, we can make the element’s own bg transparent
    and let ::before do all the visual work */
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .page-shifting-tabs > .tab-submenu{
      background: transparent !important;
    }
  }
  /* === FORCE VISIBLE BACKGROUND FOR THE SUBMENU (mobile + desktop) === */
  /* Put the tabs above hero so the submenu can sit on top */
  .page-shifting-tabs{ position:relative !important; z-index:20 !important; }

  /* The submenu panel itself */
  .tab-submenu{
    position:absolute !important;        /* keep it under the tabs bar */
    top:100% !important;                  /* flush under the bar */
    left:0 !important;
    right:0 !important;                   /* full width on desktop */
    padding:8px 12px !important;
    border-radius:12px !important;
    isolation:isolate !important;         /* bg sits behind links */
    z-index:21 !important;
    /* Fallback color so it shows even without blur support */
    background:rgba(28,22,20,.58) !important;
  }

  /* Frosted layer – will show where blur is supported */
  .tab-submenu::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    border-radius:inherit !important;
    pointer-events:none !important;
    z-index:0 !important;
    background:linear-gradient(180deg, rgba(28,22,20,.58), rgba(28,22,20,.44)) !important;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    box-shadow:0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
  }

  /* Keep link rows above the background and transparent themselves */
  .tab-submenu > a{
    position:relative !important;
    z-index:1 !important;
    background:transparent !important;
    border:0 !important;
  }

  /* Mobile: align to the left half (if you have 2 tabs); change as needed */
  @media (max-width:768px){
    .tab-submenu{
      right:auto !important;
      width:50% !important;              /* same width as the left tab */
      display:flex !important;
      flex-direction:column !important;
      gap:6px !important;
    }
  }
  /* === FINAL: show a visible background for the mobile submenu === */
  @media (max-width: 768px) {
    /* make sure the bar is above the hero */
    .page-shifting-tabs { position: relative; z-index: 30; }

    /* the submenu panel, only when it isn't hidden */
    .page-shifting-tabs > #submenu-left:not([hidden]) {
      position: absolute;           /* sits right under the bar */
      top: 100%;
      left: 0;
      width: 50%;                   /* same width as the left tab */
      padding: 10px 12px;
      border-radius: 12px;
      z-index: 31;

      /* FORCE a visible background (wins over earlier transparent rules) */
      background: rgba(28,22,20,.62) !important;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      box-shadow: 0 14px 30px rgba(0,0,0,.30),
                  inset 0 1px 0 rgba(255,255,255,.06);
    }

    /* keep link rows transparent (underline-only hover) */
    .page-shifting-tabs > #submenu-left:not([hidden]) a {
      background: transparent !important;
      border: 0 !important;
    }
  }
  /* Square edges for the mobile submenu background */
  @media (max-width: 768px) {
    .page-shifting-tabs > #submenu-left:not([hidden]) {
      border-radius: 0 !important;
    }
    .page-shifting-tabs > #submenu-left:not([hidden])::before {
      border-radius: 0 !important;
    }
  }
  /* (Optional) Square edges on desktop as well */
  .page-shifting-tabs > .tab-submenu { border-radius: 0 !important; }
  .page-shifting-tabs > .tab-submenu::before { border-radius: 0 !important; }
  /* Use the exact same background as the tabs bar, with square edges */
  .page-shifting-tabs{
    --tabs-bg: linear-gradient(180deg, var(--tabbar-bg-1), var(--tabbar-bg-2));
    background: var(--tabs-bg); /* already set earlier, reasserted here */
  }

  /* Submenu inherits the same bar background (desktop + mobile) */
  .page-shifting-tabs > #submenu-left,
  .page-shifting-tabs > .tab-submenu{
    background: var(--tabs-bg) !important;
    border-radius: 0 !important;                 /* square edges */
    -webkit-backdrop-filter: none !important;    /* remove frosted effect */
    backdrop-filter: none !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      inset 0 -1px 0 rgba(0,0,0,0.35) !important; /* same subtle edges as bar */
  }

  /* Kill any previous pseudo-element background layers */
  .page-shifting-tabs > #submenu-left::before,
  .page-shifting-tabs > .tab-submenu::before{
    content: none !important;
  }
  /* Contact button centering */
  .main-header .btn.btn-primary,
  .mobile-header .btn.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;          /* tweak if you want a taller pill */
    padding: 0 18px;       /* horizontal padding only */
    line-height: 1;        /* stop vertical drift from line-height */
  }
  @media (max-width: 768px){
    .mobile-navbar { gap: 12px; }
  }
  /* ✅ Always-working fallback */
  /* Fallback that always works */
  .hero{
    background-image: url('../assest/img/Union.png') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Modern: serve 1x/2x (both point to same file for now) */
  @supports (background-image: image-set(url("x") 1x)) {
    .hero{
      background-image: image-set(
        url('../assest/img/Union.png') 1x,
        url('../assest/img/Union.png') 2x
      ) !important;
    }
  }

  /* WebKit syntax (older Safari) */
  @supports (background-image: -webkit-image-set(url("x") 1x)) {
    .hero{
      background-image: -webkit-image-set(
        url('../assest/img/Union.png') 1x,
        url('../assest/img/Union.png') 2x
      ) !important;
    }
  }

  /* Kill parallax on small screens (prevents iOS blank/blur issues) */
  @media (max-width: 1024px){
    .hero{ background-attachment: scroll !important; }
  }
  /* Extra nudge for iOS Safari */
  @supports (-webkit-touch-callout: none) {
    .hero{ background-attachment: scroll !important; }
  }
  /* ------------------------------------------------------------
    SWIFT • Window-style tabs (wireframe + moodboard)
    Palette pulled from moodboard: brick/copper + concrete + charcoal
  -------------------------------------------------------------*/
  :root{
    --swift-brick: #9E441B;  /* brick/copper */
    --swift-bronze:#B87A3A;  /* warm bronze highlight */
    --swift-concrete:#D7D2C9;/* light concrete */
    --swift-stone:  #B8B1A6; /* mid concrete */
    --swift-char:   #1C1C1C; /* charcoal */
    --swift-cloud:  #F2EFEA; /* off-white */
  }

  /* Reset the bar so the “windows” read as two boxes */
  .page-shifting-tabs{
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    gap: 12px;                   /* mullion gap between windows */
    max-width: 1120px;           /* looks tidy centered */
    margin: 0 auto;              /* center on the hero */
  }

  /* Each tab becomes a square-edged window tile */
  .page-shifting-tabs .tab-button{
    position: relative;
    flex: 1 1 50%;
    display: grid;
    place-items: center;
    min-height: 58px;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 800;
    font-family: var(--font-secondary);
    text-decoration: none;
    border-radius: 4px;          /* square-ish like wireframe */
    border: 1px solid rgba(0,0,0,.35) !important;
    color: var(--swift-char);
    background:
      linear-gradient(#FFFFFF, #F7F5F1) !important;  /* window face */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.75),           /* inner bevel */
      0 8px 24px rgba(0,0,0,.16);                    /* depth */
    transition: transform .15s ease, filter .2s ease;
  }

  /* Top lintel/lip (thin strip) */
  .page-shifting-tabs .tab-button::before{
    content:"";
    position:absolute; left:0; right:0; top:0;
    height:6px;
    background:
      linear-gradient(180deg, #FFFFFF, rgba(255,255,255,.35));
    border-bottom: 1px solid rgba(0,0,0,.10);
  }

  /* Copper “sill” underline (active) */
  .page-shifting-tabs .tab-button::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-6px;
    height:4px;
    transform: scaleX(0);
    transform-origin: center;
    background: linear-gradient(90deg, var(--swift-brick), var(--swift-bronze));
    box-shadow: 0 2px 10px rgba(158,68,27,.35);
    transition: transform .22s ease;
  }

  /* Hover bump */
  .page-shifting-tabs .tab-button:hover{ transform: translateY(-1px); }

  /* Active = bright face + copper sill shown */
  .page-shifting-tabs .tab-button.active-tab-btn{
    filter: none; color: var(--swift-char);
  }
  .page-shifting-tabs .tab-button.active-tab-btn::after{ transform: scaleX(1); }

  /* Inactive window = concrete face (like wireframe’s grey tab) */
  .page-shifting-tabs .tab-button:not(.active-tab-btn){
    background: linear-gradient(#E9E6E0, #D9D4CB) !important;
    color: #515151;
  }

  /* The “mullion” gap between the two windows (subtle vertical line) */
  .page-shifting-tabs::after{
    content:"";
    position: absolute; left: 50%; top: 0; bottom: -6px;
    width: 1px;
    background: linear-gradient(var(--swift-stone), rgba(0,0,0,.15));
    transform: translateX(-.5px);
    pointer-events: none;
  }

  /* ---------- Submenu: slim dashed rail under the windows ---------- */

  /* Position just under the tabs, full width of the two windows */
  .tab-submenu{
    position: relative !important;
    top: 10px !important;
    left: 0 !important; right: 0 !important;
    margin: 0 auto;
    width: min(1120px, 100%);
    padding: 10px 6px 14px !important;
    border: 0 !important;
    background: transparent !important;
    display: flex !important; gap: 18px; flex-wrap: wrap;
    justify-content: flex-start;
  }

  /* Draw the dashed rail (wireframe vibe) */
  .tab-submenu::before{
    content:"";
    position:absolute; left:0; right:0; top:0;
    height: 2px;
    background:
      repeating-linear-gradient(
        90deg,
        var(--swift-stone) 0 14px,
        transparent 14px 24px
      ),
      linear-gradient(90deg, transparent 0 0); /* stacking context */
    opacity: .9;
  }

  /* Links = clean labels with underline-on-hover in copper */
  .tab-submenu a{
    position: relative;
    color: #fff;                 /* on hero photo */
    font-weight: 500;
    text-decoration: none;
    padding: 6px 2px;
    background: transparent !important;
    border: 0 !important;
  }
  .tab-submenu a::after{
    content:"";
    position:absolute; left:0; right:0; bottom: -4px; height: 2px;
    background: var(--swift-brick);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
  }
  .tab-submenu a:hover::after,
  .tab-submenu a:focus-visible::after{ transform: scaleX(1); }

  /* ---------- Responsive ---------- */
  @media (max-width: 900px){
    .page-shifting-tabs{ gap: 8px; }
    .page-shifting-tabs .tab-button{ min-height: 52px; font-size: 18px; }
  }
  @media (max-width: 768px){
    .page-shifting-tabs{ max-width: none; padding: 0 12px !important; }
    .page-shifting-tabs .tab-button{
      min-height: 48px; font-size: 15px; border-radius: 3px;
    }
    /* Submenu stacks, rail kept */
    .tab-submenu{
      width: 100%; padding: 10px 12px 12px !important; gap: 10px;
    }
    .tab-submenu a{ font-size: 14px; }
  }
  /* === Full-width window tabs === */
  :root { --tab-gutter: clamp(12px, 3vw, 28px); }

  .page-shifting-tabs{
    max-width: none !important;
    width: 100vw !important;                 /* edge-to-edge */
    margin: 0 !important;
    padding-left: var(--tab-gutter) !important;
    padding-right: var(--tab-gutter) !important;
    left: 50% !important;                    /* neutralize parent centering */
    transform: translateX(-50%) !important;  /* keep 100vw centered */
  }

  /* keep the mullion in the true middle of the viewport */
  .page-shifting-tabs::after{
    left: calc(50vw) !important;
    transform: translateX(-50%) !important;
    top: 0; bottom: -6px;
  }

  /* Submenu = a panel directly under the left tab only */
  .page-shifting-tabs > .tab-submenu{
    position: absolute !important;
    top: 100% !important;
    left: var(--submenu-left, 0) !important;      /* set by JS */
    width: var(--submenu-width, 50%) !important;  /* set by JS */
    right: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* optional: make the dashed rail match the submenu width (looks tidy) */
  .page-shifting-tabs > .tab-submenu::before{
    left: 0 !important;
    right: 0 !important;
  }
  /* === Remove the line and stick the submenu to the bar === */

  /* 1) Kill the dashed rail / any top rule drawn by the submenu */
  .page-shifting-tabs > .tab-submenu::before { 
    content: none !important; 
  }

  /* 2) Remove the bar’s bottom hairline/shadow that can look like a line */
  .page-shifting-tabs{
    box-shadow: none !important;      /* no inset bottom line */
    border-bottom: 0 !important;      /* just in case */
    padding-bottom: 0 !important;
  }

  /* 3) Snap the submenu to the bar (no vertical gap) */
  .page-shifting-tabs > .tab-submenu{
    top: 100% !important;             /* flush against the bar */
    margin-top: 0 !important;
    padding-top: 0 !important;        /* content starts right under the bar */
    border-top-left-radius: 0 !important;   /* square join looks cleaner */
    border-top-right-radius: 0 !important;
  }

  /* If the active copper sill looks like a “line” to you, you can pull it up 
    so it tucks under the tab instead of floating below */
  .page-shifting-tabs .tab-button::after{
    bottom: 0 !important;             /* was -6px */
  }
  /* === Carousel base === */
  .hero{ position: relative; height: clamp(620px, 74vh, 860px); overflow: hidden; }
  .hero-carousel{ position: relative; height: 100%; isolation: isolate; }
  .hero-slide{
    position: absolute; inset: 0; opacity: 0; pointer-events: none;
    background-image: var(--bg);
    background-size: cover; background-position: center; background-repeat: no-repeat;
    transition: opacity .6s ease;
  }
  .hero-slide.is-active{ opacity: 1; pointer-events: auto; }

  /* Keep tabs + submenu ABOVE the slides */
  .page-shifting-tabs{ position: absolute !important; top: 0; left: 50%; transform: translateX(-50%); z-index: 30; width: 100vw !important; padding-left: var(--tab-gutter, 24px) !important; padding-right: var(--tab-gutter, 24px) !important; }

  /* Overlay (already in your CSS) must sit under tabs but above image */
  .hero-overlay{ position:absolute; inset:0; z-index: 1; }
  .hero-content-main{ position: relative; z-index: 2; }

  /* Controls like the wireframe */
  .hero-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    z-index:2; width:48px; height:48px; display:grid; place-items:center;
    background: rgba(28,22,20,.46); color:#fff; border:0; cursor:pointer;
    border-radius: 999px;
  }
  .hero-nav.prev{ left: 18px; }
  .hero-nav.next{ right: 18px; }
  .hero-nav:hover{ background: rgba(28,22,20,.70); }

  /* Dots centered under hero */
  .hero-dots{ position:absolute; z-index:2; left:50%; bottom: 18px; transform:translateX(-50%); display:flex; gap:8px; }
  .hero-dots button{
    width:10px; height:10px; border-radius:50%; border:0; cursor:pointer;
    background: rgba(255,255,255,.45);
  }
  .hero-dots button[aria-selected="true"]{ background: var(--swift-brick); box-shadow: 0 0 0 2px rgba(0,0,0,.25); }

  /* Make inactive tab OBVIOUSLY inactive */
  .page-shifting-tabs .tab-button:not(.active-tab-btn){
    background: linear-gradient(#E2DED6,#CDC7BD) !important;
    color:#6b6b6b !important;
    filter: grayscale(.25) contrast(.95) saturate(.85);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.55),
      inset 0 -6px 10px rgba(0,0,0,.08);
  }
  .page-shifting-tabs .tab-button:not(.active-tab-btn):hover{
    filter: grayscale(.05) contrast(1) saturate(.95);
  }

  /* Ensure the submenu sticks immediately under the tabs (no seam) */
  .page-shifting-tabs > .tab-submenu{
    position:absolute !important; top:100% !important; left: var(--submenu-left, 0) !important;
    width: var(--submenu-width, 50%) !important; right:auto !important;
    background: var(--tabs-bg) !important; border-radius: 0 !important; z-index:31;
  }

  /* Mobile tweaks */
  @media (max-width: 768px){
    .hero{ height: clamp(520px, 66vh, 720px); }
    .hero-nav{ width:40px; height:40px; }
  }
  /* ===== 1) Make the inactive tab obviously inactive ===== */
  .page-shifting-tabs .tab-button:not(.active-tab-btn){
    /* flatter, cooler concrete and dimmer text */
    background: linear-gradient(#ECE8E1, #D9D3C9) !important;
    color: rgba(0,0,0,.46) !important;
    filter: grayscale(.6) contrast(.9) saturate(.75) brightness(.98);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.55),
      0 0 0 transparent !important;          /* remove depth glow */
    border-color: rgba(0,0,0,.22) !important;
    opacity: .72;                             /* extra “inactive” cue */
  }

  /* never show the copper sill on the inactive tab */
  .page-shifting-tabs .tab-button:not(.active-tab-btn)::after{
    transform: scaleX(0) !important;
  }

  /* keep hover subtle (still looks inactive) */
  .page-shifting-tabs .tab-button:not(.active-tab-btn):hover{
    opacity: .82;
    filter: grayscale(.45) contrast(.95) saturate(.85);
  }

  /* ===== 2) Remove the black bar under/in the tab ===== */
  /* It's the submenu panel/background sitting right under the bar */
  .page-shifting-tabs > .tab-submenu{
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding-top: 6px !important;              /* small breathing room */
  }

  /* kill any pseudo background/rail that might draw a line */
  .page-shifting-tabs > .tab-submenu::before{
    content: none !important;
  }

  /* if the bar itself paints a bottom seam, remove it */
  .page-shifting-tabs{
    box-shadow: none !important;
    border-bottom: 0 !important;
  }

  /* make sure submenu items themselves don't paint dark chips */
  .page-shifting-tabs > .tab-submenu > a{
    background: transparent !important;
    border: 0 !important;
  }
  /* optional: tuck the active sill inside the tab */
  .page-shifting-tabs .tab-button.active-tab-btn::after{
    bottom: 0 !important;
  }
  .page-shifting-tabs .tab-button::before{
    display:none!important;
  }
  /* much flatter, cooler concrete + dimmer text */
  .page-shifting-tabs .tab-button:not(.active-tab-btn){
    background: linear-gradient(#ECE8E1,#D6CFC6) !important;
    color: rgba(0,0,0,.40) !important;
    opacity: .60;                                   /* clear “inactive” cue */
    filter: grayscale(.75) contrast(.9) saturate(.75);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.50) !important;
    border-color: rgba(0,0,0,.18) !important;
  }

  /* never show copper sill on inactive */
  .page-shifting-tabs .tab-button:not(.active-tab-btn)::after{
    content: none !important;
  }

  /* hover only nudges a little so it still feels inactive */
  .page-shifting-tabs .tab-button:not(.active-tab-btn):hover{
    opacity: .72;
    filter: grayscale(.6) contrast(.95) saturate(.85);
  }
  /* --- remove the little lintel line entirely --- */
  .page-shifting-tabs .tab-button::before{ content: none !important; }

  /* --- SUPER-INACTIVE look (dark/smoked) --- */
  .page-shifting-tabs .tab-button:not(.active-tab-btn){
    /* dark “smoked glass” with subtle inner shading */
    background: linear-gradient(#3A362F, #26221E) !important;
    color: rgba(255,255,255,.78) !important;          /* readable on dark */
    border-color: rgba(0,0,0,.55) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      inset 0 -10px 18px rgba(0,0,0,.35),
      0 2px 8px rgba(0,0,0,.18) !important;
    filter: grayscale(.25) saturate(.75) brightness(.85) contrast(1.05);
    opacity: 1;                                        /* keep clickable */
    cursor: pointer;
  }

  /* no copper sill on inactive */
  .page-shifting-tabs .tab-button:not(.active-tab-btn)::after{
    display: none !important;
  }

  /* still interactive, but only a slight lift on hover */
  .page-shifting-tabs .tab-button:not(.active-tab-btn):hover{
    background: linear-gradient(#4A443C, #2F2A26) !important;
    color: #fff !important;
    filter: none;
  }

  /* keep the active tab bright and distinct */
  .page-shifting-tabs .tab-button.active-tab-btn{
    background: linear-gradient(#FFFFFF, #F7F5F1) !important;
    color: var(--swift-char) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.75),
      0 8px 24px rgba(0,0,0,.16) !important;
  }
  /* === Lower the hero heading/paragraph/button === */
  :root{
    /* tweak these two to taste */
    --hero-offset-desktop: clamp(180px, 25vh, 320px);
    --hero-offset-mobile:  clamp(120px, 34vh, 260px);
  }

  /* place the content block down from the top of the slide */
  .hero .hero-content-main{
    position: absolute;       /* span the whole hero */
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;  /* start at the top edge */
    padding-top: var(--hero-offset-desktop); /* push it DOWN */
    z-index: 2;               /* above image/overlay, below tabs */
  }

  /* mobile/tablet offset */
  @media (max-width: 768px){
    .hero .hero-content-main{
      padding-top: var(--hero-offset-mobile);
    }
  }
  /* Raise the hero text on mobile a bit */
  @media (max-width: 768px){
    .hero .hero-content-main{
      /* was around clamp(120px, 34vh, 260px) */
      padding-top: clamp(70px, 26vh, 170px) !important;
    }

    /* (optional) tighten spacing so the block feels higher */
    .hero-title{ margin-bottom: 18px; }
    .hero-description{ margin-bottom: 24px; }
  }
  /* === Slimmer tabs (height only) === */
  :root{
    --tab-h-desktop: 48px;   /* was ~58px */
    --tab-h-mobile:  40px;   /* was ~48px */
    --tab-fs-desktop: 20px;  /* was 24px */
    --tab-fs-mobile:  14px;
    --tab-pad-y: 8px;        /* vertical padding inside the pane */
  }

  .page-shifting-tabs .tab-button{
    min-height: var(--tab-h-desktop) !important;
    padding-top: var(--tab-pad-y) !important;
    padding-bottom: var(--tab-pad-y) !important;
    font-size: var(--tab-fs-desktop) !important;
  }

  /* keep the submenu glued under the shorter bar */
  .page-shifting-tabs > .tab-submenu{
    top: 100% !important;  /* stays flush, no gap */
  }

  /* keep the center mullion aligned with the shorter height */
  .page-shifting-tabs::after{
    bottom: -4px;          /* small tuck so it doesn't look too long */
  }

  @media (max-width: 768px){
    .page-shifting-tabs .tab-button{
      min-height: var(--tab-h-mobile) !important;
      font-size: var(--tab-fs-mobile) !important;
    }
  }
  /* === Round the black submenu so it fits the tab === */
  /* Use the same radius you used for the tab (outer corners) */
  :root{
    --window-radius: 14px;     /* desktop */
    --window-radius-sm: 10px;  /* mobile */
  }

  /* Submenu under "Complexe Swift" — same width as the tab via your JS */
  #submenu-left{
    background: linear-gradient(180deg, rgba(28,22,20,.90), rgba(28,22,20,.72)) !important;
    /* Top-left matches the tab’s bottom-left; top-right stays square (mullion) */
    border-top-left-radius: var(--window-radius) !important;
    border-top-right-radius: 0 !important;

    /* Nice rounded bottom so the panel feels finished */
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;

    /* Make sure previous “square” rules don’t win */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.28) !important;
    overflow: hidden; /* so the background follows the curve */
  }

  /* If any pseudo background existed before, kill it to avoid square edges */
  #submenu-left::before{ content: none !important; }

  /* Keep it perfectly attached to the tab (no seam) */
  .page-shifting-tabs > #submenu-left{
    top: 100% !important;      /* flush to the bar */
    margin-top: 0 !important;
    padding-top: 8px !important;
  }

  /* Mobile: slightly tighter curve to match your mobile tab radius */
  @media (max-width: 768px){
    #submenu-left{
      border-top-left-radius: var(--window-radius-sm) !important;
      border-bottom-left-radius: 10px !important;
      border-bottom-right-radius: 10px !important;
    }
  }
  /* === Mobile: center submenu items under "Complexe Swift" === */
  @media (max-width: 768px){
    .page-shifting-tabs > #submenu-left{
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;   /* center the rows inside the panel */
      text-align: center !important;
      gap: 8px !important;              /* even spacing */
      padding: 10px 12px !important;
    }

    .page-shifting-tabs > #submenu-left a{
      width: 100% !important;
      display: flex !important;
      justify-content: center !important;  /* center the text */
      align-items: center !important;
      text-align: center !important;
      padding: 12px 8px !important;
    }

    /* Center the hover underline as well */
    .page-shifting-tabs > #submenu-left a::after{
      left: 50% !important;
      transform: translateX(-50%) scaleX(0) !important;
      width: 60% !important;               /* how wide the underline grows */
    }
    .page-shifting-tabs > #submenu-left a:hover::after,
    .page-shifting-tabs > #submenu-left a:focus-visible::after{
      transform: translateX(-50%) scaleX(1) !important;
    }
  }
  /* === See-through (glass) tabs + submenu === */
  :root{
    /* tweak these to get more/less transparency */
    --tab-glass-blur: 4px;
    --tab-active-a1: .88;   /* top of active gradient */
    --tab-active-a2: .70;   /* bottom of active gradient */
    --tab-inact-a1: .72;    /* top of inactive gradient (darker) */
    --tab-inact-a2: .56;    /* bottom of inactive gradient */
  }

  /* remove any solid bar behind the panes */
  .page-shifting-tabs{ background: transparent !important; }

  /* both panes get a slight blur so text stays readable over photos */
  .page-shifting-tabs .tab-button{
    backdrop-filter: blur(var(--tab-glass-blur));
    -webkit-backdrop-filter: blur(var(--tab-glass-blur));
  }

  /* ACTIVE: frosted white glass */
  .page-shifting-tabs .tab-button.active-tab-btn{
    background: linear-gradient(
      180deg,
      rgba(255,255,255,var(--tab-active-a1)),
      rgba(247,245,241,var(--tab-active-a2))
    ) !important;
    color: var(--swift-char) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.6),
      0 8px 18px rgba(0,0,0,.12) !important;
  }

  /* INACTIVE: smoked glass (see-through but clearly “off”) */
  .page-shifting-tabs .tab-button:not(.active-tab-btn){
    background: linear-gradient(
      180deg,
      rgba(36,32,28,var(--tab-inact-a1)),
      rgba(24,21,19,var(--tab-inact-a2))
    ) !important;
    color: rgba(255,255,255,.9) !important;
    border-color: rgba(0,0,0,.45) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      inset 0 -10px 16px rgba(0,0,0,.28),
      0 2px 8px rgba(0,0,0,.16) !important;
  }

  /* keep the submenu panel matching (also see-through) */
  #submenu-left{
    background: linear-gradient(
      180deg,
      rgba(20,17,15,.74),
      rgba(20,17,15,.52)
    ) !important;
    backdrop-filter: blur(var(--tab-glass-blur));
    -webkit-backdrop-filter: blur(var(--tab-glass-blur));
    box-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
  }

  /* if the little top lip was still showing, keep it off */
  .page-shifting-tabs .tab-button::before{ content:none !important; }
  /* === Make the inactive tab clearly INACTIVE (moodboard concrete) === */
  /* kill the old top lip just in case */
  .page-shifting-tabs .tab-button::before{ content:none !important; }

  :root{
    /* moodboard tones */
    --swift-concrete:#D7D2C9; /* light concrete */
    --swift-stone:   #B8B1A6; /* mid concrete */
  }

  /* INACTIVE = translucent concrete slab */
  .page-shifting-tabs .tab-button:not(.active-tab-btn){
    /* see-through warm greys (no black) */
    background: linear-gradient(
                180deg,
                rgba(215,210,201,.82),
                rgba(184,177,166,.64)
              ) !important;
    color: rgba(28,28,28,.68) !important;     /* muted text */
    border-color: rgba(28,28,28,.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.45),
      0 2px 8px rgba(0,0,0,.10) !important;
    filter: saturate(.6) contrast(.95) brightness(.95);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 1;   /* keep it clickable but visibly “off” */
  }

  /* No copper sill when inactive */
  .page-shifting-tabs .tab-button:not(.active-tab-btn)::after{
    display: none !important;
  }

  /* A tiny hover nudge only (still looks disabled) */
  .page-shifting-tabs .tab-button:not(.active-tab-btn):hover{
    filter: saturate(.8) contrast(1) brightness(.98);
    color: rgba(28,28,28,.80) !important;
  }

  /* ACTIVE stays bright + copper accent */
  .page-shifting-tabs .tab-button.active-tab-btn{
    background: linear-gradient(#FFFFFF, #F7F5F1) !important;
    color: var(--swift-char) !important;
  }
  .page-shifting-tabs .tab-button.active-tab-btn::after{
    bottom: 0; height: 3px;  /* tidy sill */
  }
  /* Hero carousel progress bar */
  :root{
    --heroProgressDur: 7000ms; /* match your slide autoplay interval */
  }

  .hero .hero-progress{
    position: absolute;
    left: 50%;
    bottom: 28px;                 /* nudge as you like */
    transform: translateX(-50%);
    width: min(560px, 72vw);
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.25);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    overflow: hidden;
    z-index: 3;                   /* above image/overlay, below tabs */
    box-shadow: 0 1px 4px rgba(0,0,0,.22) inset;
  }

  .hero .hero-progress__bar{
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #9E441B, #B87A3A); /* copper → bronze */
    transition: width var(--heroProgressDur) linear;
  }

  /* optional: smaller on phones */
  @media (max-width: 768px){
    .hero .hero-progress{ bottom: 18px; width: 70vw; }
  }
  /* Hero carousel progress bar (only) */
  :root{
    --heroProgressDur: 7000ms; /* match your autoplay interval */
  }

  .hero .hero-progress{
    position: absolute;
    left: 50%;
    bottom: 28px;                       /* adjust to taste */
    transform: translateX(-50%);
    width: min(560px, 72vw);
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.25);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    overflow: hidden;
    z-index: 3;                          /* above hero image/overlay */
    box-shadow: 0 1px 4px rgba(0,0,0,.22) inset;
  }

  .hero .hero-progress__bar{
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #9E441B, #B87A3A); /* copper → bronze */
    transition: width var(--heroProgressDur) linear;
  }

  @media (max-width: 768px){
    .hero .hero-progress{ bottom: 18px; width: 70vw; }
  }
  /* === Mobile tune: taller slider + smaller text === */
  @media (max-width: 480px){
    /* Make the hero/slide noticeably taller on small phones */
    .hero,
    .hero-carousel,
    .hero-slide{
      /* pick the one you render — this covers all safely */
      min-height: 560px;                 /* floor so it's never tiny */
      height: min(88vh, 720px);          /* use most of the viewport */
    }

    /* Pull content a bit higher if needed */
    .hero-content { padding: 12% 0 0; }

    /* Headline / body sizes (clamp keeps it crisp across sizes) */
    .hero-title{
      font-size: clamp(24px, 7.2vw, 36px);
      line-height: 1.15;
      letter-spacing: 0.2px;
      margin-bottom: 16px;
    }
    .hero-description{
      font-size: clamp(13px, 3.6vw, 16px);
      line-height: 1.45;
      max-width: 86vw;
      margin-bottom: 20px;
    }

    /* Button a hair smaller */
    .hero-btn{
      padding: 12px 24px;
      font-size: 14px;
      border-radius: 10px;
    }

    /* Progress bar stays visible but closer to the bottom */
    .hero .hero-progress{
      bottom: 14px;
      width: 78vw;
    }
  }

  /* Slightly larger phones (481–768px): a balanced bump */
  @media (min-width: 481px) and (max-width: 768px){
    .hero,
    .hero-carousel,
    .hero-slide{
      min-height: 620px;
      height: min(84vh, 760px);
    }
    .hero-title{ font-size: clamp(28px, 5.4vw, 44px); }
    .hero-description{ font-size: clamp(14px, 2.8vw, 18px); }
  }
  /* === HERO PROGRESS (mobile-safe, high z-index, safe-area) === */
  :root { --heroProgressDur: 7000ms; } /* keep your timing here */

  .hero { position: relative; }         /* anchor for absolute children */
  .hero-carousel { position: relative; }

  .hero .hero-progress{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom) + 12px); /* iOS safe area */
    width: min(560px, 86vw);
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.28);
    box-shadow: 0 1px 4px rgba(0,0,0,.25) inset, 0 0 0 1px rgba(0,0,0,.06);
    pointer-events: none;  /* never block taps */
    z-index: 60;           /* above overlay/hero content on mobile */
  }

  .hero .hero-progress__bar{
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #9E441B, #B87A3A);
    transition: width var(--heroProgressDur) linear;
  }

  /* tiny phones */
  @media (max-width: 480px){
    .hero .hero-progress{
      bottom: calc(env(safe-area-inset-bottom) + 8px);
      width: 88vw;
      height: 4px;
    }
  }
  /* Hide carousel arrows on phones/tablets */
  @media (max-width: 768px){
    .hero-nav { display: none !important; }
  }
  /* Make sure the progress bar sits above slides/overlay, below tabs,
    is tappable-through, and clears the iOS bottom safe area */
  .hero .hero-progress{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(14px, calc(14px + env(safe-area-inset-bottom))); /* iOS */
    width: min(86vw, 560px);
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.30);
    box-shadow: 0 1px 4px rgba(0,0,0,.22) inset;
    z-index: 25;                 /* above slides/overlay */
    pointer-events: none;        /* don't block taps */
  }

  .hero .hero-progress__bar{
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg,#9E441B,#B87A3A);
    transition: width var(--heroProgressDur,7000ms) linear;
  }

  /* Slightly smaller on phones if you like */
  @media (max-width: 768px){
    .hero .hero-progress{
      bottom: max(12px, calc(12px + env(safe-area-inset-bottom)));
      width: 78vw;
    }
  }
  /* === Darker inactive tab (override) === */
  .page-shifting-tabs .tab-button:not(.active-tab-btn){
    /* smoked glass: darker + slightly desaturated */
    background: linear-gradient(
                180deg,
                rgba(24,21,19,.86),
                rgba(16,14,12,.70)
              ) !important;
    color: rgba(255,255,255,.82) !important;
    border-color: rgba(0,0,0,.55) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      inset 0 -12px 18px rgba(0,0,0,.32),
      0 2px 8px rgba(0,0,0,.16) !important;
    filter: grayscale(.35) saturate(.85) brightness(.92) contrast(1.05);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1 !important;                 /* keep clickable */
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
    
  }

  /* never show the copper sill on the inactive tab */
  .page-shifting-tabs .tab-button:not(.active-tab-btn)::after{
    display: none !important;
  }

  /* hover: tiny lift but stays obviously inactive */
  .page-shifting-tabs .tab-button:not(.active-tab-btn):hover{
    background: linear-gradient(
                180deg,
                rgba(32,28,24,.90),
                rgba(18,16,14,.76)
              ) !important;
    color: #fff !important;
    filter: none;
    
  }
  /* === Rustic, smoother hero transitions === */
  /* Slightly slower autoplay for calm pacing */
  :root{
    --heroProgressDur: 5200ms; /* keep JS in sync automatically */
  }

  /* Cross-fade the slide layer itself (no jarring motion) */
  .hero-slide{
    opacity: 0;
    transition: opacity .9s cubic-bezier(.22,.7,.16,1);
    background: none !important;          /* image moves to ::before */
    will-change: opacity;
  }
  .hero-slide.is-active{ opacity: 1; }

  /* Image layer: gentle Ken Burns + warm color grade */
  .hero-slide::before{
    content:"";
    position:absolute; inset:-3%;
    background-image: var(--bg);
    background-size: cover; background-position: center;
    transform: scale(1.02);
    filter:
      sepia(.08)                   /* warm tone */
      saturate(.96)                /* slightly desaturated */
      contrast(1.03)               /* a touch of depth */
      brightness(.99);
    will-change: transform;
    z-index: 0;
  }
  .hero-slide.is-active::before{
    animation: heroKenRustic var(--heroProgressDur) ease-in-out forwards;
  }

  /* Warm vignette on top to feel timeless/architectural */
  .hero-slide::after{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    background:
      radial-gradient(100% 140% at 50% 60%,
        rgba(255,255,255,0) 40%,
        rgba(74,48,32,.10) 65%,
        rgba(52,34,24,.22) 100%);
    mix-blend-mode: multiply;      /* warms without dark crush */
    opacity: .9;                   /* subtle but present */
  }

  /* Content easing: soft rise, not bouncy */
  .hero-slide .hero-content{
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity .7s ease-out .08s,
      transform .7s ease-out .08s;
  }
  .hero-slide.is-active .hero-content{
    opacity: 1;
    transform: translateY(0);
  }

  /* Gentle Ken Burns (smaller range = calmer) */
  @keyframes heroKenRustic{
    from { transform: scale(1.02) translateY(.3%); }
    to   { transform: scale(1.06) translateY(-.6%); }
  }

  /* Progress bar: keep visible above content, under tabs */
  .hero .hero-progress{
    z-index: 25;
    pointer-events: none;
    bottom: 16px;
    width: min(600px, 80vw);
  }
  @media (min-width: 769px){
    .hero .hero-progress{ bottom: 22px; width: min(560px, 72vw); }
  }

  /* Hide arrows on small screens (cleaner, calmer) */
  @media (max-width: 768px){
    .hero-nav{ display:none !important; }
  }

  /* Respect reduced-motion preferences */
  @media (prefers-reduced-motion: reduce){
    .hero-slide,
    .hero-slide .hero-content{ transition: none !important; }
    .hero-slide::before{ animation: none !important; transform: none !important; }
  }
  /* === CRISP, HIGH-QUALITY HERO IMAGES === */
  /* Minimal motion for sharpness + retina sources */

  :root{
    --heroProgressDur: 5200ms; /* keep your JS auto-synced */
  }

  /* Move image layer to ::before without enlarging the canvas */
  .hero-slide{
    opacity: 0;
    transition: opacity .9s cubic-bezier(.22,.7,.16,1);
    background: none !important; /* image lives on ::before */
  }
  .hero-slide.is-active{ opacity: 1; }

  .hero-slide::before{
    content:"";
    position:absolute; inset:0;            /* no negative inset */
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    will-change: transform, background-position;
    transform: translateZ(0);              /* Safari: avoid softening */
    filter: none !important;               /* kill any sepia/etc. that can blur */
    z-index: 0;
  }

  /* Retina sources (fallbacks included) */
  @supports (background-image: image-set(url("x") 1x)) {
    .hero-slide::before{
      background-image: image-set(
        var(--bg) 1x,
        var(--bg2x, var(--bg)) 2x
      );
    }
  }
  @supports (background-image: -webkit-image-set(url("x") 1x)) {
    .hero-slide::before{
      background-image: -webkit-image-set(
        var(--bg) 1x,
        var(--bg2x, var(--bg)) 2x
      );
    }
  }
  /* Final fallback */
  @supports not ((background-image: image-set(url("x") 1x))) and
            not ((background-image: -webkit-image-set(url("x") 1x))) {
    .hero-slide::before{ background-image: var(--bg); }
  }

  /* Gentle pan + micro-scale that stays razor sharp */
  .hero-slide.is-active::before{
    animation: heroRusticPan var(--heroProgressDur) ease-in-out forwards;
  }
  @keyframes heroRusticPan{
    from { background-position: 50% 48%; transform: none; }
    to   { background-position: 50% 52%; transform: none; }
  }

  /* Keep vignette but a touch lighter so it doesn’t look hazy */
  .hero-slide::after{
    content:"";
    position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(110% 150% at 50% 60%,
        rgba(255,255,255,0) 42%,
        rgba(74,48,32,.08) 66%,
        rgba(52,34,24,.18) 100%);
    mix-blend-mode: multiply;
    opacity: .88;
  }

  /* Progress bar stays above the slide image on mobile, too */
  .hero .hero-progress{ z-index: 25; }
/* === HERO PROGRESS: give it breathing room on big screens === */
:root{
  /* tweak the middle % to move it higher/lower with screen height */
  --heroProgressBottom: clamp(24px, 5vh, 96px);
  --heroProgressWidth:  clamp(420px, 52vw, 720px);
}

.hero .hero-progress{
  bottom: calc(var(--heroProgressBottom) + env(safe-area-inset-bottom, 0px)) !important;
  top: auto !important;                 /* make sure we're bottom-anchored */
  width: var(--heroProgressWidth) !important;
  z-index: 28 !important;               /* below tabs (~30+), above content */
  pointer-events: none;                 /* keeps clicks going through */
}

/* Phones: keep it closer to the bottom and narrower */
@media (max-width: 768px){
  .hero .hero-progress{
    bottom: max(12px, calc(12px + env(safe-area-inset-bottom, 0px))) !important;
    width: 78vw !important;
  }
}
/* Raise hero content on big/tall screens */
@media (min-width: 1200px) and (min-height: 900px){
  :root{
    /* smaller top offset = content sits higher */
    --hero-offset-desktop: clamp(140px, 18vh, 260px);
  }
}
@media (min-height: 1000px){
  .hero-slide:first-child .hero-text{
    transform: translateY(-1.5vh);  /* subtle lift */
  }
}
/* smoother, layered crossfade */
.hero-carousel { contain: paint; }
.hero-slide{
  opacity: 0;
  transition: opacity .9s cubic-bezier(.22,.7,.16,1);
  will-change: opacity;
  transform: translateZ(0); /* force compositor layer */
  z-index: 0;
}
.hero-slide.is-active{ opacity: 1; z-index: 1; }
.hero-slide.is-out   { opacity: 0; z-index: 2; pointer-events: none; }

/* GPU-friendly Ken Burns (transform-only; smoother than background-position) */
.hero-slide::before{
  content:"";
  position:absolute; inset:-2%;
  background-image: var(--bg);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transform: scale(1.02);
  will-change: transform;
}
.hero-slide.is-active::before{
  animation: heroKen var(--heroProgressDur,5200ms) ease-in-out forwards;
}
@keyframes heroKen{
  from { transform: scale(1.02) translateY(.2%); }
  to   { transform: scale(1.06) translateY(-.6%); }
}

/* (optional) reduce work on very slow devices */
@media (prefers-reduced-motion: reduce){
  .hero-slide, .hero-slide::before{ transition: none !important; animation: none !important; }
}
/* =========================================================
   SECOND SECTION • uniform typography + balanced padding
   ========================================================= */
.secondsectionindex{
  /* paper background + type + rhythm */
  --paper: #EDE9E3;                            /* same tone as your ref */
  --sans: "Uncut Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Inter, Roboto, Arial, sans-serif;

  --h2-size: clamp(22px, 2.2vw, 32px);
  --p-size:  clamp(13px, 1.05vw, 15px);
  --lh: 1.6;

  --pad: clamp(20px, 3.2vw, 36px);
  --radius: 12px;
  --card-shadow: 0 6px 22px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.35) inset;
  --gap: clamp(18px, 2.6vw, 32px);
}

/* 2-col layout, consistent gap */
.secondsectionindex .feature-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: stretch;
}

/* IMAGE SIDE */
.secondsectionindex .feature-media{ display:grid; place-items:center; }
.secondsectionindex .feature-img{
  width: 100%;
  aspect-ratio: 1 / 1;          /* square like your comps */
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 6px 22px rgba(0,0,0,.06);
}

/* TEXT SIDE — this makes all three look identical */
.secondsectionindex .feature-card{
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 16px);
  min-height: 100%;
  /* kill stray “max-width” rules from older CSS */
  max-width: none;
}

/* Typo: Uncut Sans everywhere inside cards */
.secondsectionindex .feature-card h2,
.secondsectionindex .feature-card p,
.secondsectionindex .feature-card .btn{
  font-family: var(--sans) !important;
}

/* Heading: same size/weight on all 3 */
.secondsectionindex .feature-card h2{
  font-weight: 700;
  font-size: var(--h2-size);
  line-height: 1.25;
  letter-spacing: .2px;
  margin: 0;
}

/* Keep your nice Playfair accent on the <span class="highlight">…</span> */
.secondsectionindex .feature-card h2 .highlight{
  font-family: "Playfair Display", Georgia, serif !important;
  font-style: italic;
  font-weight: 700;
}

/* Paragraphs: same size/line-height + use full card width */
.secondsectionindex .feature-card p{
  font-size: var(--p-size) !important;
  line-height: var(--lh) !important;
  margin: 6px 0 0;
  max-width: 100% !important;  /* fill the rectangle evenly */
}

/* Button weight to match */
.secondsectionindex .feature-card .btn{
  font-weight: 600;
  margin-top: clamp(10px, 1.2vw, 16px);
}

/* Responsive: stack + keep generous padding */
@media (max-width: 900px){
  .secondsectionindex .feature-row{ grid-template-columns: 1fr; }
  .secondsectionindex .feature-img{ aspect-ratio: 16 / 10; }
  .secondsectionindex .feature-card{ padding: clamp(18px, 4vw, 28px); }
}
/* SECOND SECTION — force Uncut Sans + identical padding */
:root{
  --font-sans: "Uncut Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Inter, Roboto, Arial, sans-serif;
}

.secondsectionindex,
.secondsectionindex *{
  font-family: var(--font-sans) !important;
}

.secondsectionindex .feature-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.6vw, 32px);
  align-items: stretch;
}

/* text panel */
.secondsectionindex .feature-card{
  background: #EDE9E3;                 /* same paper tone */
  padding: clamp(22px, 3.2vw, 36px);   /* even left/right breathing room */
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.35) inset;
  display: flex; flex-direction: column; gap: 14px;
  max-width: none;                      /* kill stray max-widths */
}

/* image panel */
.secondsectionindex .feature-img{
  width: 100%;
  aspect-ratio: 1 / 1;                  /* square like your comps */
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(0,0,0,.06);
}

/* tidy type rhythm */
.secondsectionindex .feature-card h2{
  margin: 0;
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.25;
  letter-spacing: .2px;
}
.secondsectionindex .feature-card p{
  margin: 6px 0 0;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.6;
  max-width: 100% !important;
}
.secondsectionindex .feature-card .btn{ font-weight: 600; }

/* stack on mobile */
@media (max-width: 900px){
  .secondsectionindex .feature-row{ grid-template-columns: 1fr; }
  .secondsectionindex .feature-img{ aspect-ratio: 16 / 10; }
  .secondsectionindex .feature-card{ padding: clamp(18px, 4vw, 28px); }
}
/* Make SLIDE 1 & 3 text full-width inside the bubble */
.unforgettable-events .events-left.feature-card,
.unforgettable-events .events-left.feature-card * {
  max-width: none !important;     /* nuke old caps */
}

.unforgettable-events .events-left.feature-card h2,
.unforgettable-events .events-left.feature-card p {
  width: 100% !important;         /* span the whole inner width */
  color: #34333399 !important;    /* same color as slide 2 */
}

/* keep the same inner side padding as slide 2 */
.unforgettable-events .events-left.feature-card {
  padding-left: var(--bubble-pad, clamp(24px, 3.2vw, 36px)) !important;
  padding-right: var(--bubble-pad, clamp(24px, 3.2vw, 36px)) !important;
}

/* button stays pinned to the bottom, but not narrow */
.unforgettable-events .events-left.feature-card .btn {
  align-self: flex-start;          /* or stretch if you want full-width button */
  margin-top: auto;
}

/* just in case older layout caps the whole left column */
.unforgettable-events .events-left {
  max-width: none !important;
  flex: 1 1 auto !important;
}
/* SECOND SECTION — force Uncut Sans + identical padding */
:root{
  --font-sans: "Uncut Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Inter, Roboto, Arial, sans-serif;
}

.secondsectionindex,
.secondsectionindex *{
  font-family: var(--font-sans) !important;
}

.secondsectionindex .feature-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.6vw, 32px);
  align-items: stretch;
}

/* text panel */
.secondsectionindex .feature-card{
  background: #EDE9E3;                 /* same paper tone */
  padding: clamp(22px, 3.2vw, 36px);   /* even left/right breathing room */
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.35) inset;
  display: flex; flex-direction: column; gap: 14px;
  max-width: none;                      /* kill stray max-widths */
}

/* image panel */
.secondsectionindex .feature-img{
  width: 100%;
  aspect-ratio: 1 / 1;                  /* square like your comps */
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(0,0,0,.06);
}

/* tidy type rhythm */
.secondsectionindex .feature-card h2{
  margin: 0;
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.25;
  letter-spacing: .2px;
}
.secondsectionindex .feature-card p{
  margin: 6px 0 0;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.6;
  max-width: 100% !important;
}
.secondsectionindex .feature-card .btn{ font-weight: 600; }

/* stack on mobile */
@media (max-width: 900px){
  .secondsectionindex .feature-row{ grid-template-columns: 1fr; }
  .secondsectionindex .feature-img{ aspect-ratio: 16 / 10; }
  .secondsectionindex .feature-card{ padding: clamp(18px, 4vw, 28px); }
}

/* === TAB SHELL (iframe) styles — keep the same menu; swap page content === */
#page-shell{ display:none; width:100%; margin:0; padding:0; background:transparent; }
#page-frame{ display:block; width:100%; height: min(1800px, calc(100vh - 160px)); border:0; }

/* When using the shell, hide the index-only sections so the loaded page is clear */
body.using-shell .hero,
body.using-shell .unforgettable-events,
body.using-shell .business-space,
body.using-shell .heritage-modern,
body.using-shell .footer1{
  display: none !important;
}

/* Hide the left submenu while a page is active (mirror tenants view) */
body.using-shell #submenu-left{ display: none !important; }

/* Keep the top tabs above the iframe on all breakpoints */
#site-tabs{ position: relative; z-index: 50; }
#page-shell{ position: relative; z-index: 10; }
/* --- inline content shell --- */
#page-shell { display: none; }
#page-frame {
  display: block;
  width: 100%;
  min-height: 100dvh;
  border: 0;
  background: #fff;
  /* make sure it sits above the hero overlay */
  position: relative;
  z-index: 5;
}

/* When we’re showing a subpage in the frame */
body.frame-active #page-shell { display: block; }

/* Keep the tab bar visible but hide the rest of the home sections */
body.frame-active .hero-carousel,
body.frame-active .unforgettable-events,
body.frame-active .business-space,
body.frame-active .heritage-modern,
body.frame-active .footer1 {
  display: none !important;
}

/* Keep the tabs area; collapse the hero container nicely */
body.frame-active .hero {
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
}

/* Active state for the right tab */
.page-shifting-tabs .tab-button.active-tab-btn::after { transform: scaleX(1); }
/* highlight the active item in the submenu */
.tab-submenu a.active-tab-link{
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}

/* optional: make the body know we’re in “sub-page” mode */
body.spa-active .main-header.desktop-header { position: sticky; } /* no visual change, just a hook */
/* keep tabs visible and on top */
.page-shifting-tabs{ position: sticky; top: 0; z-index: 1000; }
.tab-submenu{ position: absolute; left: var(--submenu-left,0); width: var(--submenu-width, auto); }
/* optional: ensure submenu sits above hero imagery */
.tab-submenu, .page-shifting-tabs { isolation:isolate; }
  /* ensure tabs always style whether the hero is .hero or .hero-section */
  .hero .page-shifting-tabs,
  .hero-section .page-shifting-tabs { position:relative; z-index:5; }

  /* make sure the dark overlay doesn’t cover the tabs */
  .hero .hero-overlay,
  .hero-section .hero-overlay { z-index:1; }

/* One gap to rule them all */
:root { --grid-gap: clamp(16px, 3vw, 32px); }

/* Inside each two-column row */
.unforgettable-events .events-wrapper{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--grid-gap);
  row-gap: var(--grid-gap);       /* ← vertical = horizontal */
  align-items: stretch;
}

/* Remove stray margins that inflate vertical spacing */
.unforgettable-events .events-wrapper > * { margin: 0; }

/* Make spacing between WHOLE rows match the same gap */
.unforgettable-events.padding-block { padding-block: 0; }   /* cancel big section padding */
.unforgettable-events + .unforgettable-events { margin-top: var(--grid-gap); }

/* Mobile: stack, keep same gap */
@media (max-width: 900px){
  .unforgettable-events .events-wrapper{ grid-template-columns: 1fr; }
}
/* ---- Layout rhythm & consistent spacing ---- */
:root{
  /* one token for horizontal gutters */
  --page-gutter: clamp(16px, 4vw, 40px);
  /* one token for vertical spacing between/inside sections */
  --section-gap: clamp(32px, 6vw, 80px);
}

/* standard page wrapper */
.page-width{
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* two-column blocks */
.unforgettable-events .events-wrapper{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--section-gap);
}

/* breathing room above/below each section */
.unforgettable-events{
  margin-block: var(--section-gap);
  padding-block: calc(var(--section-gap) * 0.75);
}

/* first/last of these sections get a touch more air */
.unforgettable-events:first-of-type{
  margin-block-start: calc(var(--section-gap) * 1.1);
}
.unforgettable-events:last-of-type{
  margin-block-end: calc(var(--section-gap) * 1.1);
}

/* mobile: stack columns with the same rhythm */
@media (max-width: 900px){
  .unforgettable-events .events-wrapper{
    grid-template-columns: 1fr;
  }
}
/* One gutter for BOTH directions */
:root{
  --gutter: clamp(16px, 4vw, 40px);
}

/* standard page wrapper stays on the inner div only */
.page-width{ padding-inline: var(--gutter); }

/* two-column layout spacing */
.unforgettable-events .events-wrapper{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--gutter);             /* horizontal gap */
}

/* vertical spacing BETWEEN sections = the same gutter */
.unforgettable-events{
  margin-block: var(--gutter);    /* top & bottom space */
  padding-block: 0;               /* kill extra vertical padding */
}

/* first/last section – same breathing room, no extra multipliers */
.unforgettable-events:first-of-type{ margin-top: var(--gutter); }
.unforgettable-events:last-of-type { margin-bottom: var(--gutter); }

/* stack on mobile, keep same rhythm */
@media (max-width: 900px){
  .unforgettable-events .events-wrapper{
    grid-template-columns: 1fr;
  }
}
/* === Universal 2-up layout (text + image) === */
:root{
  --gutter: clamp(16px, 4vw, 40px);      /* horizontal gap */
  --section-gap: clamp(32px, 6vw, 80px); /* vertical gap between sections */
  --card-bg: #F1EEE9;                    /* your soft beige */
  --card-radius: 14px;
}

/* Use one rhythm for spacing on all two-up sections */
.unforgettable-events,
.tivoli-tennis {
  margin-block: var(--section-gap);
  padding-block: 0 !important;           /* cancel legacy paddings */
}

/* Same width wrapper everywhere */
.unforgettable-events > .page-width,
.tivoli-tennis > .page-width {
  padding-inline: var(--gutter);
}

/* One grid that works for all pages/sections */
.unforgettable-events .events-wrapper,
.tivoli-tennis .tivoli-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);                     /* horizontal = vertical rhythm */
  align-items: stretch;                   /* make both columns equal height */
}

/* TEXT column: same “card” look */
.unforgettable-events .events-left,
.unforgettable-events .tivoli-right,
.tivoli-tennis .tivoli-right {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  padding: clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* IMAGE column: fill the row height and crop nicely */
.unforgettable-events .events-right,
.tivoli-tennis .tivoli-left {
  height: 100%;
  border-radius: var(--card-radius);
  overflow: hidden;
}
.unforgettable-events .events-right img,
.tivoli-tennis .tivoli-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Add .reverse on a section to flip columns without changing HTML */
.unforgettable-events.reverse .events-wrapper,
.tivoli-tennis.reverse .tivoli-wrapper { direction: rtl; }
.unforgettable-events.reverse .events-wrapper > *,
.tivoli-tennis.reverse .tivoli-wrapper > * { direction: ltr; }

/* Mobile stack, same rhythm */
@media (max-width: 900px){
  .unforgettable-events .events-wrapper,
  .tivoli-tennis     .tivoli-wrapper {
    grid-template-columns: 1fr;
  }
}
/* Footer contact: readability & icons */
.footer-contact .footer-contact__line {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 14px 0;
  max-width: 60ch;
}

.footer-contact .contact-link {
  color: var(--white, #fff);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--white, #fff);
  line-height: 1.6;
}

.contact-list i {
  width: 1.25rem;              /* keeps icons aligned in a neat column */
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--accent, #F4A261); /* use your accent if defined */
}

.contact-list a {
  color: var(--white, #fff);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.45);
}

.contact-list a:hover {
  border-bottom-color: currentColor;
}

.contact-list address {
  font-style: normal;          /* consistent with the rest of the footer */
  margin: 0;
  opacity: 0.95;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .footer-contact .footer-contact__line { max-width: none; }
}
.footer-bottom .bottom-content{
  display:flex;
  align-items:center;
  gap:16px;
}

.footer-links{
  margin-left:auto;               /* pushes legal links to the right */
  display:flex;
  align-items:center;
  gap:10px;
}

.footer-links a{
  color: rgba(255,255,255,.9);
  text-decoration:none;
  border-bottom:1px dashed rgba(255,255,255,.35);
}

.footer-links a:hover{ border-bottom-color: currentColor; }

.footer-links .sep{
  opacity:.5;
}

@media (max-width:768px){
  .footer-bottom .bottom-content{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .footer-links{ margin-left:0; }
}
/* --- Bottom footer: copyright on left, legal links on right --- */
.main-footer .footer-bottom .bottom-content{
  display: flex;
  align-items: center;
  justify-content: space-between; /* keeps ends apart */
  gap: 16px;
}

.main-footer .footer-bottom .bottom-content > *{
  margin: 0; /* kill default p/nav margins that push to a new line */
}

.main-footer .footer-bottom .footer-links{
  margin-left: auto;              /* push links to far right */
  display: flex;                  /* keep links inline */
  align-items: center;
  gap: 12px;
}

.main-footer .footer-bottom .footer-links a{
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,.35);
  color: rgba(255,255,255,.9);
}

.main-footer .footer-bottom .footer-links a:hover{
  border-bottom-color: currentColor;
}

/* Stack nicely on small screens */
@media (max-width: 768px){
  .main-footer .footer-bottom .bottom-content{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .main-footer .footer-bottom .footer-links{
    margin-left: 0;
  }
}

/* --- Restore "card" look used before (soft tiles + shadow + checks) --- */
.canimex-section{
  /* keep your spacing but make it feel like the About page */
  padding-block: clamp(36px, 5vw, 64px);
}

.canimex-grid{
  /* equal space horizontally & vertically (same everywhere) */
  gap: clamp(24px, 4vw, 40px);
  align-items: stretch;
}

.canimex-card{
  background: #efece8;                     /* soft beige tile */
  border-radius: 16px;
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  border: 1px solid rgba(42,39,38,.06);
  color: #2a2726;                          /* same font color as About */
  display: flex;
  flex-direction: column;
  justify-content: center;                 /* content vertically centered */
  min-height: clamp(320px, 42vw, 440px);   /* matches image tiles */
}

.canimex-card h2{
  margin: 0 0 .6em 0;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  line-height: 1.25;
  color: #2a2726;
}

.canimex-card p{
  line-height: 1.65;
}

/* Image tile matches card: rounded + shadow */
.canimex-image{
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  border: 1px solid rgba(42,39,38,.06);
  min-height: clamp(320px, 42vw, 440px);
  display: grid;
}

.canimex-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 4 / 3;
}

/* Check-style list (instead of default bullets) */
.spec-list{
  margin: .5rem 0 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
}
.spec-list li{
  position: relative;
  padding-left: 1.7rem;
}
.spec-list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: .15rem;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
  color: #8a4b2d; /* warm accent like your buttons */
}

/* Mobile keeps the same tile look and spacing */
@media (max-width: 900px){
  .canimex-grid{ grid-template-columns: 1fr; }
  .canimex-card{ order: 1; min-height: auto; }
  .canimex-image{ order: 2; min-height: auto; }
  .canimex-image img{ aspect-ratio: 16/10; }
  .canimex-section + .canimex-section{ margin-top: clamp(24px, 4vw, 40px); }
}
/* === SWIFT • Site-wide tiny gaps (uniform H + V) ===========================
   Put this AFTER your current CSS.
   Tune just --site-gap and everything follows.
============================================================================ */
:root{
  /* “really small” distance — adjust to taste */
  --site-gap: clamp(8px, 1.5vw, 14px);
  --site-radius: 14px; /* keeps corners consistent where needed */
}

/* 1) Sections: top/bottom spacing = the same small gap */
.about-section,
.canimex-section,
.tenants-section,
.unforgettable-events,
.tivoli-tennis{
  margin-block: var(--site-gap) !important;
  padding-block: 0 !important;           /* cancel oversized paddings */
}

/* 2) Two-up grids: same gap horizontally AND vertically + equal heights */
.about-grid,
.canimex-grid,
.tenants-section .tenant-grid,
.unforgettable-events .events-wrapper,
.tivoli-tennis .tivoli-wrapper{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--site-gap) !important;
  align-items: stretch;                   /* cards/images match height */
}

/* 3) Common tiles/panels: fill row height cleanly */
.about-card,
.about-image,
.about-image img,
.canimex-card,
.canimex-image,
.canimex-image img,
.tenant-card,
.tenant-image,
.tenant-image img,
.unforgettable-events .events-left,
.unforgettable-events .events-right,
.unforgettable-events .events-right img,
.tivoli-tennis .tivoli-left,
.tivoli-tennis .tivoli-left img,
.tivoli-tennis .tivoli-right{
  height: 100%;
  border-radius: var(--site-radius);
  overflow: hidden;
}

/* Images always cover their tile without distortion */
.about-image img,
.canimex-image img,
.tenant-image img,
.unforgettable-events .events-right img,
.tivoli-tennis .tivoli-left img{
  width: 100%;
  object-fit: cover;
  display: block;
}

/* 4) Kill stray margins inside rows so the gap stays exact */
.about-grid > * ,
.canimex-grid > * ,
.tenants-section .tenant-grid > * ,
.unforgettable-events .events-wrapper > * ,
.tivoli-tennis .tivoli-wrapper > * {
  margin: 0 !important;
}

/* 5) Mobile: stack to one column but keep the SAME small rhythm */
@media (max-width: 900px){
  .about-grid,
  .canimex-grid,
  .tenants-section .tenant-grid,
  .unforgettable-events .events-wrapper,
  .tivoli-tennis .tivoli-wrapper{
    grid-template-columns: 1fr;
    gap: var(--site-gap) !important;
  }

  /* sensible image height on phones; keeps rows visually even */
  .about-image,
  .canimex-image,
  .tenant-image,
  .unforgettable-events .events-right,
  .tivoli-tennis .tivoli-left{
    height: auto;
    aspect-ratio: 16 / 9;
  }
}
/* === INNER PAGES ONLY (hero hero-banner) =============================== */
/* shrink hard + align title like index (bottom-aligned) */
:root{
  /* ~40% smaller than what you have now */
  --hero-inner-h-desktop: 36vh;   /* tweak to 34–40vh if you want */
  --hero-inner-h-mobile:  32vh;

  /* same bottom offset as index title (adjust if your index differs) */
  --hero-index-bottom-offset-desktop: 12vh;
  --hero-index-bottom-offset-mobile:  10vh;
}

/* force the hero to be short — override any previous min-height/height */
.hero.hero-banner{
  position: relative;
  min-height: var(--hero-inner-h-desktop) !important;
  height: var(--hero-inner-h-desktop) !important;
  display: grid;
  align-content: end; /* put content at the bottom like index */
  overflow: hidden;
}

/* keep the tabs overlay untouched */
.hero.hero-banner .page-shifting-tabs{ position: relative; z-index: 3; }

/* neutralize any center transforms that keep text stuck in the middle */
.hero.hero-banner .hero-content,
.hero.hero-banner .hero-content-main,
.hero.hero-banner .hero-text,
.hero.hero-banner .hero-title{
  position: relative !important;
  top: auto !important;
  transform: none !important;
  margin: 0;
}

/* put the text at the same *height from the bottom* as index */
.hero.hero-banner > .hero-content,
.hero.hero-banner .hero-content-main{
  padding-top: 0 !important;
  padding-bottom: var(--hero-index-bottom-offset-desktop) !important;
}

/* MOBILE */
@media (max-width: 900px){
  .hero.hero-banner{
    min-height: var(--hero-inner-h-mobile) !important;
    height: var(--hero-inner-h-mobile) !important;
  }
  .hero.hero-banner > .hero-content,
  .hero.hero-banner .hero-content-main{
    padding-bottom: var(--hero-index-bottom-offset-mobile) !important;
    text-align: center;
  }
}
/* === Inner pages hero: +30% taller than last setting =================== */
:root{
  /* was 36vh / 32vh → now ~47vh / ~42vh */
  --hero-inner-h-desktop: 47vh;
  --hero-inner-h-mobile:  42vh;

  /* keep the same bottom offset as index; tweak if needed */
  --hero-index-bottom-offset-desktop: 12vh;
  --hero-index-bottom-offset-mobile:  10vh;
}

.hero.hero-banner{
  min-height: var(--hero-inner-h-desktop) !important;
  height: var(--hero-inner-h-desktop) !important;
}

.hero.hero-banner > .hero-content,
.hero.hero-banner .hero-content-main{
  padding-bottom: var(--hero-index-bottom-offset-desktop) !important;
}

@media (max-width: 900px){
  .hero.hero-banner{
    min-height: var(--hero-inner-h-mobile) !important;
    height: var(--hero-inner-h-mobile) !important;
  }
  .hero.hero-banner > .hero-content,
  .hero.hero-banner .hero-content-main{
    padding-bottom: var(--hero-index-bottom-offset-mobile) !important;
  }
}
/* === Normalize inner-page hero layout (repertoire included) ============= */
/* Applies to all non-index heroes: .hero.hero-banner */
.hero.hero-banner{
  /* keep your current height variables */
  min-height: var(--hero-inner-h-desktop) !important;
  height: var(--hero-inner-h-desktop) !important;

  /* 2-row grid: row 1 = free space (tabs sit here), row 2 = content at bottom */
  display: grid !important;
  grid-template-rows: 1fr auto !important;
  align-content: stretch !important;
  overflow: hidden;
}

/* Tabs stay in the top row */
.hero.hero-banner .page-shifting-tabs{
  grid-row: 1 !important;
  align-self: start !important;
  z-index: 3;
  position: relative;
}

/* Reset any absolute/center transforms that keep text “stuck” mid-hero */
.hero.hero-banner .hero-content,
.hero.hero-banner .hero-content-main,
.hero.hero-banner .hero-text,
.hero.hero-banner .hero-title{
  position: relative !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
}

/* Whatever the page uses (hero-content-main, hero-content, hero-text),
   put it on the bottom row and offset it from the bottom just like index */
.hero.hero-banner .hero-content-main,
.hero.hero-banner > .hero-content,
.hero.hero-banner .hero-text{
  grid-row: 2 !important;
  align-self: end !important;
  padding-top: 0 !important;
  padding-bottom: var(--hero-index-bottom-offset-desktop) !important; /* same as index */
}

/* Mobile */
@media (max-width: 900px){
  .hero.hero-banner{
    min-height: var(--hero-inner-h-mobile) !important;
    height: var(--hero-inner-h-mobile) !important;
  }
  .hero.hero-banner .hero-content-main,
  .hero.hero-banner > .hero-content,
  .hero.hero-banner .hero-text{
    padding-bottom: var(--hero-index-bottom-offset-mobile) !important;
    text-align: center;
  }
}
/* ================== HERO: inner pages (including Répertoire) ================== */
/* Works with either .hero-content OR .hero-content-main structures */
:root{
  --hero-inner-h-desktop: 47vh;   /* your current inner-page target */
  --hero-inner-h-mobile:  42vh;

  /* same vertical position for the title as index (tweak if needed) */
  --hero-index-bottom-offset-desktop: 12vh;
  --hero-index-bottom-offset-mobile:  10vh;
}

/* 1) Normalize layout so text sits on the bottom row, tabs stay above */
.hero.hero-banner{
  position: relative;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important; /* tabs | spacer | content */
  align-content: stretch !important;
  min-height: var(--hero-inner-h-desktop) !important;
  height: var(--hero-inner-h-desktop) !important;
  overflow: hidden;
}

/* Tabs row (your left/right tabs bar) */
.hero.hero-banner .page-shifting-tabs{
  grid-row: 1 !important;
  align-self: start !important;
  z-index: 3;
  position: relative;
}

/* Content sits on the bottom row with a safe offset like index */
.hero.hero-banner > .hero-content,
.hero.hero-banner .hero-content-main{
  grid-row: 3 !important;
  align-self: end !important;
  padding-top: 0 !important;
  padding-bottom: var(--hero-index-bottom-offset-desktop) !important;
  padding-inline: clamp(16px, 4vw, 40px) !important; /* keeps text off the edges */
}

/* 2) Kill any leftover center transforms that keep text “stuck” in the middle */
.hero.hero-banner .hero-content,
.hero.hero-banner .hero-content-main,
.hero.hero-banner .hero-text,
.hero.hero-banner .hero-title{
  position: relative !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
}

/* 3) Fluid typography + line-height so it can’t overlap on narrow screens */
.hero.hero-banner .hero-title{
  font-size: clamp(28px, 6vw, 72px) !important;
  line-height: 1.1 !important;
  max-width: 24ch;                 /* prevents ultra-long lines */
  margin-inline: auto;             /* centers when needed */
  text-align: center;              /* consistent with your other pages */
}
.hero.hero-banner .hero-description{
  font-size: clamp(14px, 3.6vw, 18px);
  line-height: 1.35;
  max-width: 60ch;
  margin: .6rem auto 0;
  text-align: center;
}

/* 4) Mobile: shorter hero + larger bottom offset to avoid overlap with tabs */
@media (max-width: 900px){
  .hero.hero-banner{
    min-height: var(--hero-inner-h-mobile) !important;
    height: var(--hero-inner-h-mobile) !important;
  }
  .hero.hero-banner > .hero-content,
  .hero.hero-banner .hero-content-main{
    padding-bottom: var(--hero-index-bottom-offset-mobile) !important;
  }
}
/* ===== Unified INNER-PAGE hero (NOT index) =================================
   Applies to any section with class="hero hero-banner"
   - Same height across all four pages
   - Text centered and aligned near bottom (like index)
   - Works with either .hero-content OR .hero-content-main > .hero-content
============================================================================= */

:root{
  /* ~40% bigger than the last setting, adjust to taste */
  --hero-inner-h-desktop: 66vh;   /* try 62–70vh if you want finer control */
  --hero-inner-h-mobile:  58vh;

  /* where the title sits from the bottom (match your index position) */
  --hero-bottom-offset-desktop: 12vh;
  --hero-bottom-offset-mobile:  10vh;
}

/* Structure: 3 rows = tabs | spacer | content */
.hero.hero-banner{
  position: relative;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  align-content: stretch !important;

  /* hard-force the hero size so all pages match */
  min-height: var(--hero-inner-h-desktop) !important;
  height: var(--hero-inner-h-desktop) !important;
  overflow: hidden;
}

/* Tabs row stays on top, unaffected by content positioning */
.hero.hero-banner .page-shifting-tabs{
  grid-row: 1 !important;
  align-self: start !important;
  z-index: 3;
  position: relative;
}

/* Neutralize any old center transforms that might keep text stuck */
.hero.hero-banner .hero-content,
.hero.hero-banner .hero-content-main,
.hero.hero-banner .hero-text,
.hero.hero-banner .hero-title{
  position: relative !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
}

/* Put the content on the bottom row with a consistent offset */
.hero.hero-banner > .hero-content,
.hero.hero-banner .hero-content-main{
  grid-row: 3 !important;
  align-self: end !important;
  padding-top: 0 !important;
  padding-bottom: var(--hero-bottom-offset-desktop) !important;
  padding-inline: clamp(16px, 4vw, 40px) !important; /* keeps text off edges */
  text-align: center;                                  /* center on all pages */
}

/* Fluid type so it looks the same on desktop & mobile without overlap */
.hero.hero-banner .hero-title{
  font-size: clamp(28px, 6vw, 72px) !important;
  line-height: 1.1 !important;
  max-width: 24ch;
  margin-inline: auto;
}
.hero.hero-banner .hero-description{
  font-size: clamp(14px, 3.6vw, 18px);
  line-height: 1.35;
  max-width: 60ch;
  margin: .6rem auto 0;
}

/* MOBILE */
@media (max-width: 900px){
  .hero.hero-banner{
    min-height: var(--hero-inner-h-mobile) !important;
    height: var(--hero-inner-h-mobile) !important;
  }
  .hero.hero-banner > .hero-content,
  .hero.hero-banner .hero-content-main{
    padding-bottom: var(--hero-bottom-offset-mobile) !important;
  }
}
/* ================ UNIFIED INNER-PAGE HERO (text + mobile submenu) ================ */
/* Applies to: a-propos, salledereception-canimex, repertoire-locataires, devenir-locataire */
:root{
  /* keep the height you liked */
  --hero-inner-h-desktop: 66vh;
  --hero-inner-h-mobile:  58vh;

  /* identical bottom distance for the title (same on every inner page) */
  --hero-bottom-offset-desktop: 12vh;
  --hero-bottom-offset-mobile:  10vh;

  /* unified typography */
  --hero-title-size: clamp(34px, 6.2vw, 78px);
  --hero-title-lh: 0;
  --hero-desc-size: clamp(15px, 3.2vw, 19px);

  /* mobile sticky submenu offset (height of your white header) */
  --header-height: 64px;  /* adjust if your top bar is taller/shorter */
}

/* layout: tabs | spacer | content (bottom-aligned) */
.hero.hero-banner{
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  min-height: var(--hero-inner-h-desktop) !important;
  height: var(--hero-inner-h-desktop) !important;
  overflow: hidden;
  position: relative;
}

/* Submenu bar stays on top, always readable, and sticky on mobile */
.hero.hero-banner .page-shifting-tabs{
  grid-row: 1 !important;
  align-self: start !important;
  position: relative;
  z-index: 5;
  /* subtle backdrop so links remain readable over bright photos */
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.15));
  backdrop-filter: saturate(120%) blur(2px);
}

/* On small screens, keep the submenu visible when scrolling hero */
@media (max-width: 900px){
  .hero.hero-banner .page-shifting-tabs{
    position: sticky;
    top: var(--header-height);
  }
}

/* neutralize old centering rules so all pages behave the same */
.hero.hero-banner .hero-content,
.hero.hero-banner .hero-content-main,
.hero.hero-banner .hero-text,
.hero.hero-banner .hero-title{
  position: relative !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
}

/* content: bottom row with identical padding + centered text everywhere */
.hero.hero-banner > .hero-content,
.hero.hero-banner .hero-content-main{
  grid-row: 3 !important;
  align-self: end !important;
  padding-top: 0 !important;
  padding-bottom: var(--hero-bottom-offset-desktop) !important;
  padding-inline: clamp(16px, 4vw, 40px) !important;
  text-align: center !important;
}

/* unified title + description styles (same on every inner page) */
.hero.hero-banner .hero-title{
  font-size: var(--hero-title-size) !important;
  line-height: var(--hero-title-lh) !important;
  font-weight: 700;
  max-width: 22ch;
  margin-inline: auto;
}
.hero.hero-banner .hero-description{
  font-size: var(--hero-desc-size);
  line-height: 1.35;
  max-width: 60ch;
  margin: .8rem auto 0;
}

/* Mobile height + bottom offset */
@media (max-width: 900px){
  .hero.hero-banner{
    min-height: var(--hero-inner-h-mobile) !important;
    height: var(--hero-inner-h-mobile) !important;
  }
  .hero.hero-banner > .hero-content,
  .hero.hero-banner .hero-content-main{
    padding-bottom: var(--hero-bottom-offset-mobile) !important;
  }
}
/* === Force identical, centered hero content on ALL inner pages ========== */
/* Targets sections that use class="hero hero-banner" */
.hero.hero-banner{
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;  /* tabs | spacer | content */
}

/* Put the content on the bottom row and center it horizontally */
.hero.hero-banner > .hero-content,
.hero.hero-banner .hero-content-main{
  grid-row: 3 !important;
  align-self: end !important;

  /* center the block */
  display: flex !important;
  flex-direction: column;
  align-items: center;          /* <-- hard center horizontally */
  justify-content: flex-end;

  width: 100%;
  padding-top: 0 !important;
  padding-bottom: var(--hero-bottom-offset-desktop, 12vh) !important;
  padding-inline: clamp(16px, 4vw, 40px) !important;
  text-align: center !important;
}

/* Make sure inner wrappers can’t re-align left */
.hero.hero-banner .hero-text{
  width: 100%;
  text-align: inherit !important;   /* inherit 'center' from parent */
}

/* Titles/descriptions/buttons centered with safe widths */
.hero.hero-banner .hero-title{
  margin: 0 auto !important;
  max-width: 22ch;
  line-height: var(--hero-title-lh, 1.06);
}
.hero.hero-banner .hero-description{
  margin: .8rem auto 0 !important;
  max-width: 60ch;
}
.hero.hero-banner .hero-btn{
  margin: 1rem auto 0 !important;
}

@media (max-width: 900px){
  .hero.hero-banner > .hero-content,
  .hero.hero-banner .hero-content-main{
    padding-bottom: var(--hero-bottom-offset-mobile, 10vh) !important;
  }
}
/* ===== Mobile: make inner-page tabs stick under the header ===== */
:root{
  /* fallback; JS below will auto-measure your real header height */
  --header-height: 64px;
  --tabs-mobile-height: 44px;
}

/* inner pages only */
.hero.hero-banner{
  /* let the sticky bar render above the hero on mobile */
  overflow: visible;
}

/* the tabs bar */
@media (max-width: 900px){
  .hero.hero-banner .page-shifting-tabs{
    position: sticky;
    top: var(--header-height);           /* sit right under the white header */
    z-index: 1002;
    width: 100%;
    background: rgba(0,0,0,.55);
    backdrop-filter: saturate(120%) blur(2px);
    -webkit-backdrop-filter: saturate(120%) blur(2px);
  }

  /* keep submenu readable and docked under the sticky tabs if it opens */
  .hero.hero-banner .tab-submenu{
    position: fixed;
    top: calc(var(--header-height) + var(--tabs-mobile-height));
    left: 0; right: 0;
    z-index: 1001;
    background: rgba(0,0,0,.85);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  /* prevent the hero title from hiding under the sticky bar */
  .hero.hero-banner > .hero-content,
  .hero.hero-banner .hero-content-main{
    padding-top: calc(var(--tabs-mobile-height) + 6px) !important;
    text-align: center !important;
  }
}
/* ===== Mobile: make inner-page tabs stick exactly under the white header ===== */
:root{
  --header-height: 64px;       /* JS below will auto-measure this */
  --tabs-height: 44px;         /* auto-measured too */
}

/* inner pages */
.hero.hero-banner{ overflow: visible; position: relative; }

/* the tabs bar itself */
@media (max-width: 900px){
  .hero.hero-banner .page-shifting-tabs{
    position: sticky;
    top: var(--header-height);
    z-index: 1002;

    /* full-width bar so it doesn’t look “floated” */
    left: 0; right: 0; width: 100%;
    margin: 0; padding: .5rem .75rem;

    /* readable over photos */
    background: rgba(0,0,0,.55);
    backdrop-filter: saturate(120%) blur(2px);
    -webkit-backdrop-filter: saturate(120%) blur(2px);
  }

  /* if your submenu drops open on mobile, dock it under the sticky tabs */
  .hero.hero-banner .tab-submenu{
    position: sticky;
    top: calc(var(--header-height) + var(--tabs-height));
    z-index: 1001;
    background: rgba(0,0,0,.85);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  /* keep hero text clear of the sticky bar */
  .hero.hero-banner > .hero-content,
  .hero.hero-banner .hero-content-main{
    padding-top: calc(var(--tabs-height) + 8px) !important;
    text-align: center !important;
  }
}
/* Mobile-only: push Répertoire title closer to the bottom */
@media (max-width: 900px){
  .hero--repertoire{
    /* if your hero uses the CSS vars */
    --hero-bottom-offset-mobile: 5vh;
    --hero-index-bottom-offset-mobile: 5vh; /* covers earlier patches */

    /* hard fallback in case vars are overridden somewhere */
    /* (keeps only this page affected) */
  }
  .hero--repertoire > .hero-content,
  .hero--repertoire .hero-content-main{
    padding-bottom: 5vh !important;
  }
}
/* ==== DESKTOP: force hero text perfectly centered on ALL inner pages ==== */
@media (min-width: 901px){

  /* 1) Make the hero itself a flex column: tabs on top, text at bottom */
  .hero.hero-banner{
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;  /* bottom-align text */
    align-items: center !important;        /* <-- center horizontally */
  }

  /* 2) Keep the tabs at the top of the hero (don’t let them center with text) */
  .hero.hero-banner .page-shifting-tabs{
    align-self: stretch !important;        /* full-width bar */
    order: 1 !important;
  }

  /* 3) The content block (whatever structure the page uses) */
  .hero.hero-banner .hero-content-main,
  .hero.hero-banner > .hero-content{
    order: 3 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;        /* <-- center block */
    justify-content: flex-end !important;
    text-align: center !important;
    padding-inline: 0 !important;          /* remove left bias from padding */
  }

  /* 4) Some pages wrap text in .hero-text / .padding-inline — normalize */
  .hero.hero-banner .hero-text{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: inherit !important;
    margin: 0 auto !important;
  }
  .hero.hero-banner .padding-inline{ padding-inline: 0 !important; }

  /* 5) Ensure individual elements can’t pull left */
  .hero.hero-banner .hero-title,
  .hero.hero-banner .hero-description,
  .hero.hero-banner .hero-btn{
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
    max-width: 22ch;                       /* nice readable measure */
  }
  .hero.hero-banner .hero-description{
    max-width: 60ch;
  }
}
/* === Inner-page hero — hard center the content on DESKTOP ============== */
@media (min-width: 901px){
  .hero.hero-banner{ position: relative !important; }

  /* Whatever container you have (.hero-content or .hero-content-main),
     pin it to bottom center of the hero. */
  .hero.hero-banner > .hero-content,
  .hero.hero-banner .hero-content-main{
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;  /* <-- true horizontal center */
    bottom: var(--hero-bottom-offset-desktop, 12vh) !important;

    /* keep it within the viewport and centered text */
    width: min(92vw, 1200px) !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    display: block !important;
    z-index: 2;
  }

  /* inner wrappers can’t re-align left */
  .hero.hero-banner .hero-text,
  .hero.hero-banner .padding-inline{
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: inherit !important;
    max-width: none !important;
  }

  /* tidy up the elements themselves */
  .hero.hero-banner .hero-title,
  .hero.hero-banner .hero-description,
  .hero.hero-banner .hero-btn{
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}

/* Mobile keeps your current behavior; just ensure centered text */
@media (max-width: 900px){
  .hero.hero-banner > .hero-content,
  .hero.hero-banner .hero-content-main{
    text-align: center !important;
  }
}

/* 2-col grid, columns stretch to the same height */
.about-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--block-gap);
  align-items: stretch;          /* <- makes both columns equal height */
}
.about-card,
.about-image{
  height: 100%;                  /* fill the row’s height */
  border-radius: var(--radius);
  overflow: hidden;
}
.about-card{
  background: #ede9e4;           /* same card background as the others */
  padding: clamp(18px, 2.3vw, 28px);
}
.about-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;             /* photo fills its column neatly */
  display: block;
}

/* keep the same look on the timeline card */
.timeline{ margin: 0; padding: 0; list-style: none; }
.timeline li + li{ border-top: 1px solid #ddd6ce; padding-top: .9rem; margin-top: .9rem; }
.tl-date{ font-weight: 600; margin-right: .75rem; color: #2a2723; }

/* -------- Mobile: text first, image second; all images same height -------- */
@media (max-width: 900px){
  .about-grid{
    grid-template-columns: 1fr;
  }
  .about-card{ order: 1; height: auto; }
  .about-image{
    order: 2;
    height: auto;
    aspect-ratio: 16 / 9;        /* every mobile image same height */
  }
  .about-image img{
    height: 100%;
  }
}
/* 2-col grid, columns stretch to the same height */
.about-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--block-gap);
  align-items: stretch;          /* <- makes both columns equal height */
}
.about-card,
.about-image{
  height: 100%;                  /* fill the row’s height */
  border-radius: var(--radius);
  overflow: hidden;
}
.about-card{
  background: #ede9e4;           /* same card background as the others */
  padding: clamp(18px, 2.3vw, 28px);
}
.about-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;             /* photo fills its column neatly */
  display: block;
}

/* keep the same look on the timeline card */
.timeline{ margin: 0; padding: 0; list-style: none; }
.timeline li + li{ border-top: 1px solid #ddd6ce; padding-top: .9rem; margin-top: .9rem; }
.tl-date{ font-weight: 600; margin-right: .75rem; color: #2a2723; }

/* -------- Mobile: text first, image second; all images same height -------- */
@media (max-width: 900px){
  .about-grid{
    grid-template-columns: 1fr;
  }
  .about-card{ order: 1; height: auto; }
  .about-image{
    order: 2;
    height: auto;
    aspect-ratio: 16 / 9;        /* every mobile image same height */
  }
  .about-image img{
    height: 100%;
  }
}
/* same heading look as other pages */
.section-heading{
  margin: 0 0 clamp(16px, 2.2vw, 28px);
  font-family: "Playfair Display", serif;
}

/* make logo rows behave like photos but contained */
.about-image--logo{
  background: #fff;              /* white tile behind logos */
}
.about-image--logo img{
  object-fit: contain !important;
  padding: clamp(18px, 3vw, 40px);
  width: 100%;
  height: 100%;
  max-height: clamp(220px, 30vw, 360px); /* prevents “monster” logos */
}

/* ensure equal-height rows like other pages */
.about-grid{
  align-items: stretch;
}
.about-card{ height: 100%; }

/* mobile stack stays consistent */
@media (max-width: 900px){
  .about-image--logo img{
    max-height: none;            /* let aspect-ratio drive the height on phones */
    aspect-ratio: 16/9;
  }
}
  /* make sure every row has space below it, like on a-propos */

  /* keep the two columns neatly aligned */
  .about-section .about-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--block-gap);
    align-items: center; /* centers card + image vertically */
  }

  /* prevent logos/photos from exploding in size */
  .about-section .about-image{
    border-radius: var(--radius);
    overflow: hidden;               /* no overflow outside the rounded box */
    padding: clamp(16px, 2vw, 24px);/* gives logos some breathing room */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .about-section .about-image img{
    max-width: 100%;
    height: auto;                   /* classic responsive image */
    max-height: 260px;              /* ✨ keeps logos from making the row too tall */
    object-fit: contain;
    display: block;
  }

  /* optional: ensure cards have the same rounded look */
  .about-section .about-card{
    border-radius: var(--radius);
  }

  /* mobile: stack nicely */
  @media (max-width: 900px){
    .about-section .about-grid{
      grid-template-columns: 1fr;
    }
  }
/* Same spacing system as a-propos */
:root{
  --block-gap: clamp(28px, 4vw, 56px);
  --radius: 12px;
}

/* one, consistent gap BETWEEN rows */
.about-section .about-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--block-gap);
  align-items: center;
  margin-top: var(--block-gap);       /* ← row spacing */
}
.about-section .about-grid:first-of-type{
  margin-top: 0;                      /* no extra space above the first row */
}

/* kill default margins that were inflating the vertical space */
.about-section .about-grid > *{
  margin: 0;                          /* resets <figure> and <article> default margins */
}

/* internal spacing inside the card only (title → text → button) */
.about-section .about-card > * + *{
  margin-top: 0.9rem;
}

/* make logos behave (no overflow, no stretching) */
.about-section .about-image{
  border-radius: var(--radius);
  overflow: hidden;
  padding: clamp(16px, 2vw, 24px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-section .about-image img{
  max-width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: contain;
  display: block;
}

/* same rounded look for cards */
.about-section .about-card{ border-radius: var(--radius); }

/* stack on mobile */
@media (max-width: 900px){
  .about-section .about-grid{ grid-template-columns: 1fr; }
}
/* unified rhythm + same card look as a-propos */
:root{
  --block-gap: clamp(28px, 4vw, 56px);
  --radius: 12px;
}

/* rows */
.about-section{ margin-block: var(--block-gap); }
.hero-banner + .about-section{ margin-top: var(--block-gap) !important; }

.about-section .about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap: var(--block-gap);
  align-items:center;
  margin-top: var(--block-gap);     /* consistent vertical gap between rows */
}
.about-section .about-grid:first-of-type{ margin-top:0; }

/* kill default outer margins that were inflating the row height */
.about-section .about-grid > *{ margin:0; }

/* card look */
.about-section .about-card{
  border-radius: var(--radius);
}

/* title styling (same on every page) */
.about-section .about-card h2,
.about-section .about-card h3{      /* support both, just in case */
  font-weight:600;
  line-height:1.15;
  margin:0 0 .6em;
  font-size:clamp(26px, 2.2vw, 34px);
}

/* internal spacing (title → text → button) */
.about-section .about-card > * + *{ margin-top: .9rem; }

/* if you keep wrapping the button in a <p>, neutralize its margin */
.about-section .about-card p:has(> .btn){ margin:0; }

/* images/logos box */
.about-section .about-image{
  border-radius: var(--radius);
  overflow:hidden;
  padding: clamp(16px, 2vw, 24px);
  display:flex; align-items:center; justify-content:center;
}
.about-section .about-image img{
  display:block;
  max-width:100%; height:auto;
  max-height:260px;                 /* prevents tall logos from stretching rows */
  object-fit:contain;
}

/* swap columns when you want the image first */
.about-grid.about-grid--image-left{ grid-auto-flow:dense; }
.about-grid.about-grid--image-left .about-image{ order: -1; }

/* mobile */
@media (max-width: 900px){
  .about-section .about-grid{ grid-template-columns:1fr; }
}
/* tighter vertical rhythm between rows on the tenants page */
.tenants-page .about-section .about-grid + .about-grid{
  margin-top: calc(var(--block-gap) * 0.8); /* try 0.75–0.85 to taste */
}

/* small safety: remove any stray margins that can stack */
.tenants-page .about-section .about-grid > *{ margin:0; }

/* keep logos from making rows feel taller than needed */
.tenants-page .about-section .about-image img{
  max-height: 240px; /* was higher on that big Covana logo */
  object-fit: contain;
}
/* === Same grid/spacing as Canimex === */
:root{
  --block-gap: clamp(28px, 4vw, 56px);
  --radius: 14px;
  --card-bg: #ede9e4;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
}

.canimex-section{
  margin-block: var(--block-gap);
  padding: 0 !important;
}
.hero-banner + .canimex-section{
  margin-top: var(--block-gap) !important;
}

.canimex-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--block-gap);
  align-items: stretch;
}

.canimex-card,
.canimex-image{
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.canimex-card{
  background: var(--card-bg);
  padding: clamp(18px, 2.3vw, 28px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #2a2726;
}

.canimex-image{ display:grid; background:#fff; }
.canimex-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* LOGO variant so brand marks aren’t cropped */
.canimex-image--logo{
  background:#fff;
}
.canimex-image--logo img{
  object-fit: contain;
  padding: clamp(16px, 2.5vw, 28px);
}

/* Mobile */
@media (max-width: 900px){
  .canimex-grid{ grid-template-columns: 1fr; gap: var(--block-gap); }
  .canimex-card{ order: 1; height: auto; }
  .canimex-image{ order: 2; height: auto; aspect-ratio: 16/9; }
  .canimex-image img{ height: 100%; }
}
/* Grid: left column + right area */
.main-footer .footer-content{
  display:grid;
  grid-template-columns: clamp(280px, 32vw, 420px) 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: stretch; /* equal row heights */
}

/* Left column stacks: logo → map grows → socials */
.footer-left{ display:flex; flex-direction:column; min-width:0; }
.footer-logo{ height:52px; width:auto; display:block; margin:0 0 14px 0; }

/* Map fills the remaining height of the left column */
.footer-map{ flex:1; display:flex; overflow:hidden; }
.map-container{
  width:100%;
  height:100%;
  min-height:260px;         /* don’t collapse if right side is short */
  border-radius:10px;       /* optional; remove if you want square corners */
  overflow:hidden;
}
.footer-map-iframe{ width:100%; height:100%; border:0; display:block; }

/* Right side: two columns */
.footer-right{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.5vw, 36px);
  align-items:start;
}

/* Socials sit at the bottom of the left column */
.social-links{ margin-top:auto; display:flex; gap:12px; }

/* Mobile: stack everything, give map a fixed height */
@media (max-width: 980px){
  .main-footer .footer-content{ grid-template-columns: 1fr; }
  .footer-right{ grid-template-columns: 1fr; }
  .footer-map{ flex:initial; }
  .map-container{ height:300px; } /* readable on phones */
}
/* Footer logo — small, crisp, and consistent */
.footer-logo{
  display:block;
  height:46px;            /* <- tweak this to taste (e.g., 40–56px) */
  width:auto;
  max-width:220px;        /* prevents long logos from stretching */
  margin:0 0 14px 0;
  image-rendering:auto;   /* ensure normal smoothing */
}

/* Optional: on smaller screens you can reduce a bit more */
@media (max-width: 980px){
  .footer-logo{ height:40px; }
}
/* Footer logo sizing (kept) */
.footer-logo{
  display:block;
  height:46px;
  width:auto;
  max-width:220px;
  margin:0 0 14px 0;
}

/* Map: same visual height as the heading underline row */
.footer-map .map-container{
  width:100%;
  max-width:420px;     /* keep it neat on wide screens */
  height:220px;        /* <-- adjust this to line up perfectly with the underline */
  overflow:hidden;
  border-radius:8px;   /* optional: match your cards */
}

.footer-map-iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* Small screens: slightly shorter map */
@media (max-width: 980px){
  .footer-map .map-container{ height:200px; }
}
.footer-contact .contact-role{
  font-weight:400;
  opacity:.9;
  white-space:nowrap;    /* keeps the role on the same line as the name when possible */
  letter-spacing:.01em;
}
/* keep the logo's native aspect ratio — never stretch */
.footer-left { display:flex; flex-direction:column; align-items:flex-start; }

.footer-logo{
  width: auto !important;          /* defeat any global width:100% */
  height: auto;                    /* unlock ratio */
  max-height: 60px;                /* tweak: 56–72px if you prefer bigger */
  max-width: clamp(160px, 18vw, 260px);
  object-fit: contain;             /* safety if a size slips through */
  aspect-ratio: auto;              /* explicitly avoid forced ratio */
  display: block;
  image-rendering: auto;           /* avoid pixelation on HiDPI */
  margin: 0 0 14px 0;
}

/* optional: slightly larger on wide screens */
@media (min-width: 1200px){
  .footer-logo{ max-height: 68px; }
}
/* A-PROPOS page — raise the hero title on DESKTOP only */
@media (min-width: 1025px){
  .hero.hero-banner .hero-content{
    bottom: clamp(200px, 34vh, 360px) !important; /* push it up */
    transform: translate(-50%, 0);               /* no extra drop */
    text-align: center;                           /* no inline style needed */
  }
}
/* Mobile-only: give the hero extra height and inner spacing */
@media (max-width: 768px){
  .hero.hero-banner{
    /* use small viewport units so mobile browser chrome doesn't shrink it */
    min-height: 86svh; /* tweak to taste: 80–92svh */
  }
  .hero.hero-banner .hero-content{
    /* keep your current layout—just add breathing room inside */
    padding-top: clamp(16px, 5vh, 40px);
    padding-bottom: clamp(80px, 14vh, 140px); /* space for CTA / slider dots */
  }
}
/* Mobile hero/slider fix — more height + inner spacing only */
@media (max-width: 768px){

  /* 1) Make the hero/slider truly full-screen on phones */
  @supports (min-height: 100dvh) {
    .hero.hero-banner{ min-height: 100dvh; }
  }
  @supports not (min-height: 100dvh) {
    .hero.hero-banner{ min-height: 100vh; }
  }

  /* 2) Add top/bottom padding so content doesn’t collide with tabs or dots */
  .hero.hero-banner .hero-content{
    /* top room for the vertical tabs; bottom room for CTA + dots */
    padding-top: clamp(56px, 14vh, 120px);
    padding-bottom: clamp(96px, 18vh, 140px);
  }

  /* 3) If you have slider dots (Splide/Swiper), keep them at the very bottom */
  .splide__pagination,
  .swiper-pagination{
    bottom: 12px !important;
  }

  /* 4) Give the CTA a little separation from the text */
  .hero .hero-btn{
    margin-top: clamp(10px, 2.5vh, 18px);
  }
}
/* ————— Mobile hero: keep CTA and progress bar separate ————— */
@media (max-width: 768px){

  /* Make sure the hero is full-screen and has enough space at bottom */
  @supports (min-height: 100dvh) {
    .hero.hero-banner{ min-height: 100dvh; }
  }
  @supports not (min-height: 100dvh) {
    .hero.hero-banner{ min-height: 100vh; }
  }

  .hero.hero-banner .hero-content{
    padding-top: clamp(56px, 14vh, 120px);
    /* extra space to avoid collisions with CTA + progress bar */
    padding-bottom: 160px;
  }

  /* Lift the CTA above the progress bar and keep it clickable */
  .hero .hero-btn{
    position: relative;
    z-index: 3;
    margin-top: 14px;
    margin-bottom: 48px; /* space above the bar */
  }

  /* Pin the progress bar to the very bottom and keep it behind the CTA */
  /* Splide */
  .splide__progress{
    position: absolute !important;
    left: 6%;
    right: 6%;
    bottom: 12px !important;
    height: 4px !important;
    z-index: 2;
    pointer-events: none; /* never block taps */
  }
  .splide__progress__bar{ height: 100% !important; }

  /* Swiper (if you switch modes) */
  .swiper-pagination-progressbar{
    position: absolute !important;
    left: 6%;
    right: 6%;
    bottom: 12px !important;
    height: 4px !important;
    z-index: 2;
    pointer-events: none;
  }

  /* If you use bullets instead of a progress bar, keep them low too */
  .splide__pagination,
  .swiper-pagination-bullets{
    bottom: 12px !important;
    z-index: 2;
    pointer-events: none;
  }
}
/* DESKTOP: move inner-page hero title higher (center-ish) */
@media (min-width: 992px){
  .hero.hero-banner > .hero-content{
    position: absolute !important;
    left: 50% !important;
    top: 38% !important;                 /* tweak: 30–45 puts it higher/lower */
    transform: translate(-50%, -50%) !important;
    bottom: auto !important;
    width: min(92vw, 1200px) !important;
    text-align: center !important;
    padding: 0 !important;               /* kill bottom padding pushing it down */
    z-index: 2 !important;
  }
}
/* palette (if not set) */
:root{ --brand-strong:#911714; }

/* 1) Tab underline = Rouge foncé */
.page-shifting-tabs .tab-button::after,
.page-shifting-tabs .tab-button.active-tab-btn::after{
  background: var(--brand-strong) !important;
  box-shadow: 0 0 0 0 transparent !important; /* remove any glow */
}

/* 2) Hero progress bar = Rouge foncé */
.hero .hero-progress__bar,
.hero-progress__bar{
  background: var(--brand-strong) !important;
  background-image: none !important;
}
/* ---------- Mobile hamburger ---------- */
.hamburger-btn{
  display:none;             /* desktop: hidden */
  background:transparent;
  border:0;
  width:42px; height:42px;
  padding:8px;
  margin-right:8px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
.hamburger-btn .bar{
  display:block;
  width:100%;
  height:2px;
  background:#1c1c1c;       /* dark on white header */
  border-radius:2px;
  transition:transform .18s ease, opacity .18s ease;
}
.hamburger-btn .bar + .bar{ margin-top:6px; }

/* place the button top-left under the white bar on phones */
@media (max-width:768px){
  .page-shifting-tabs{
    position:relative;
    padding-left:8px;               /* room for the button */
  }
  .hamburger-btn{ display:inline-flex; position:absolute; left:8px; top:8px; z-index:50; }
  /* Nudge the tab labels so they don't overlap the button */
  #tab-left, #tab-right{ padding-left:54px; }
}

/* Turn into an X when open */
.hamburger-btn.is-active .bar:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}
.hamburger-btn.is-active .bar:nth-child(2){
  opacity:0;
}
.hamburger-btn.is-active .bar:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
}

/* ---------- Mobile drawer for #submenu-left ---------- */
@media (max-width:768px){
  /* make sure the regular inline submenu doesn't show */
  .page-shifting-tabs .tab-submenu{ display:none !important; }

  /* reuse the same #submenu-left as a slide-in drawer */
  #submenu-left{
    display:flex !important;
    flex-direction:column;
    gap:6px;

    position:fixed !important;
    top:calc(var(--header-h, 60px) + 48px); /* 60px white header + ~tabs height */
    left:0;
    width:min(82vw, 340px);
    height:calc(100dvh - (var(--header-h, 60px) + 48px));
    padding:14px 12px;
    overflow:auto;
    z-index:1002;

    background:rgba(28,22,20,.90);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 16px 40px rgba(0,0,0,.4);

    transform:translateX(-105%);
    transition: transform .22s ease;
  }
  /* visible state */
  #submenu-left.is-open{ transform:translateX(0); }

  /* links: full-width rows, clear underline hover */
  #submenu-left a{
    display:block;
    width:100%;
    padding:12px 8px;
    color:#fff;
    text-decoration:none;
    border-radius:8px;
    background:rgba(255,255,255,.05);
    transition:background .18s ease, transform .12s ease;
  }
  #submenu-left a:hover,
  #submenu-left a:focus-visible{
    background:#9E441B; color:#fff; transform: translateY(-1px);
    outline:none;
  }

  /* dark page overlay */
  .mobile-menu-overlay{
    position:fixed; inset:0; z-index:1001;
    background:rgba(0,0,0,.45);
    backdrop-filter: blur(1px);
  }
  body.menu-open{ overflow:hidden; } /* prevent background scroll */
}
/* set your real header height here */
:root{
  --header-h: 64px; /* tweak to your actual white header height */
}

@media (max-width: 768px){
  /* move the tab bar (and the hamburger inside it) below the white header */
  .page-shifting-tabs{
    margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  }

  /* keep the hamburger positioned within the tab bar */
  .hamburger-btn{
    position: absolute;
    left: 8px;
    top: 8px;      /* stays 8px from top of the tab bar */
    z-index: 50;   /* above the tab bar, but under any sticky header if needed */
  }
}
@media (max-width:768px){
  .hamburger-btn{
    width:42px; height:42px; padding:8px; border:0; background:transparent;
    /* make sure any previous positioning doesn't fight this */
    position: fixed !important;
  }
  .hamburger-btn .bar{
    height:2px; background:#1c1c1c; border-radius:2px; display:block;
  }
  .hamburger-btn .bar + .bar{ margin-top:6px; }
}
@media (max-width:768px){
  .page-shifting-tabs{ position: relative; }

  /* 3 horizontal bars */
  .hamburger-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px; height:42px;
    padding:8px; border:0; background:transparent;
    cursor:pointer;

    /* sit right UNDER the tabs bar, aligned to the left tab */
    position:absolute;               /* relative to .page-shifting-tabs */
    top: calc(100% + 6px);           /* just below the bar */
    left: calc(var(--submenu-left, 0px) + 8px); /* align to left tab + small inset */
    z-index:1003;
  }
  .hamburger-btn .bar{
    display:block; width:24px; height:2px;
    background:#fff;                 /* white on the dark area */
    border-radius:2px;
    transition:transform .18s ease, opacity .18s ease;
  }
  .hamburger-btn .bar + .bar{ margin-top:6px; }

  /* turn into X when open (optional) */
  .hamburger-btn.is-active .bar:nth-child(1){ transform: translateY(8px) rotate(45deg); }
  .hamburger-btn.is-active .bar:nth-child(2){ opacity:0; }
  .hamburger-btn.is-active .bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
}
/* Hamburger directly under the left tab */
.page-shifting-tabs { position: relative !important; }

.page-shifting-tabs .hamburger-btn{
  position: absolute !important;
  top: calc(100% + 6px) !important;                           /* just under the bar */
  left: calc(var(--submenu-left, 0px) + 8px) !important;      /* align to left tab */
  z-index: 1003 !important;

  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 8px;
  background: transparent; border: 0; cursor: pointer;
}

/* 3 horizontal bars */
.page-shifting-tabs .hamburger-btn .bar{
  display: block; width: 24px; height: 2px;
  background: #fff; border-radius: 2px;
}
.page-shifting-tabs .hamburger-btn .bar + .bar{ margin-top: 6px; }

/* (optional) hide on desktop */
@media (min-width: 769px){
  .page-shifting-tabs .hamburger-btn{ display: none !important; }
}
/* FLOAT the tabs on top of the hero (no layout height) */
.hero > .page-shifting-tabs{
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;          /* edge-to-edge */
  margin: 0 !important;
  z-index: 60 !important;            /* above overlay/content/progress */
  pointer-events: none;              /* don’t block hero swipes/clicks */
}
/* keep the actual buttons/links clickable */
.hero > .page-shifting-tabs > *{
  pointer-events: auto;
}

/* (safety) hero overlay stays under the tabs */
.hero .hero-overlay{ z-index: 0 !important; }
/* Submenu only as tall as its links, not a big overlay */
#submenu-left{
  position: absolute !important;
  top: 100% !important;                  /* right under the tabs */
  left: var(--submenu-left, 0) !important;
  width: var(--submenu-width, 50%) !important;
  right: auto !important;                /* don't stretch to the right */
  display: inline-flex !important;       /* shrink-wrap to content height */
  flex-direction: column !important;
  gap: 6px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  overflow: hidden;                      /* background stops at last item */
  z-index: 1001 !important;

  /* stronger, clearer background */
  background: linear-gradient(180deg, rgba(20,17,15,.92), rgba(20,17,15,.78)) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08) inset !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* kill any older pseudo backgrounds that might make it look taller */
#submenu-left::before{ content:none !important; }

/* clearer menu rows */
#submenu-left a{
  color:#fff !important;
  padding: 12px 6px !important;
  line-height: 1.2 !important;
  text-decoration:none !important;
  background: transparent !important;
  border: 0 !important;
}
#submenu-left a:hover,
#submenu-left a:focus-visible{
  background: rgba(255,255,255,.06) !important;
}
/* button shell */
.hamburger-btn{
  width: 44px; height: 44px;
  display: inline-block;
  border: 0; padding: 0;
  border-radius: 10px;
  background: rgba(20,17,15,.65);        /* visible behind bars */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  cursor: pointer;
}

/* three bars */
.hamburger-btn .bar{
  position: absolute;
  left: 10px; right: 10px;
  height: 3px; border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 1px rgba(0,0,0,.35);
  transition: transform .18s ease, opacity .18s ease, top .18s ease;
}
.hamburger-btn .bar:nth-child(1){ top: 13px; }
.hamburger-btn .bar:nth-child(2){ top: 20px; }
.hamburger-btn .bar:nth-child(3){ top: 27px; }

/* turn into a clear X when open */
.hamburger-btn.is-active .bar:nth-child(1){ top: 20px; transform: rotate(45deg); }
.hamburger-btn.is-active .bar:nth-child(2){ opacity: 0; }
.hamburger-btn.is-active .bar:nth-child(3){ top: 20px; transform: rotate(-45deg); }
/* compact, content-height submenu under “Complexe Swift” */
#site-tabs > #submenu-left{
  position: absolute !important;
  top: 100% !important;                     /* flush under the tabs bar */
  left: var(--submenu-left, 0) !important;
  width: var(--submenu-width, 50%) !important;
  right: auto !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;

  height: auto !important;                  /* <-- key */
  max-height: none !important;              /* <-- key */
  overflow: hidden !important;              /* background stops after last item */

  padding: 10px 12px !important;
  border-radius: 12px !important;
  z-index: 1002 !important;

  background: linear-gradient(180deg, rgba(20,17,15,.92), rgba(20,17,15,.78)) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.35),
              0 0 0 1px rgba(255,255,255,.08) inset !important;
}

/* kill any older “full-height panel” layers */
#site-tabs > #submenu-left::before{ content:none !important; }
.page-shifting-tabs .tab-submenu{ position: absolute !important; } /* ensure not fixed */

/* clearer rows */
#submenu-left a{
  color:#fff !important;
  padding:12px 6px !important;
  line-height:1.2 !important;
  background:transparent !important;
  border:0 !important;
}

/* make the click-off overlay invisible (still clickable to close) */
.mobile-menu-overlay{
  position: fixed; inset: 0; z-index: 1000;
  background: transparent !important;      /* no dark screen */
}
.hamburger-btn{
  width: 48px; height: 48px;
  border: 0; padding: 0;
  border-radius: 12px;
  background: rgba(20,17,15,.70);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  overflow: visible !important;            /* prevent clipping */
  z-index: 1003;                            /* above hero */
  position: fixed;                          /* keep where your script placed it */
}

.hamburger-btn .bar{
  position: absolute;
  left: 12px; right: 12px;                  /* leave room so the X doesn’t hit the edges */
  height: 3px; border-radius: 2px;
  background: #fff;
  transition: transform .18s ease, opacity .18s ease, top .18s ease;
}
.hamburger-btn .bar:nth-child(1){ top: 15px; }
.hamburger-btn .bar:nth-child(2){ top: 22px; }
.hamburger-btn .bar:nth-child(3){ top: 29px; }

/* crisp X (no cut edges) */
.hamburger-btn.is-active .bar:nth-child(1){ top: 22px; transform: rotate(45deg); }
.hamburger-btn.is-active .bar:nth-child(2){ opacity: 0; }
.hamburger-btn.is-active .bar:nth-child(3){ top: 22px; transform: rotate(-45deg); }
/* === Perfectly spaced hamburger + clean X (no clipping) === */
#site-tabs .hamburger-btn{
  --size: 48px;         /* button box */
  --pad:  12px;         /* side padding so the X never touches edges */
  --gap:   8px;         /* distance between bars */
  --thick: 3px;         /* bar thickness */

  position: fixed;                 /* your JS places it */
  width: var(--size);
  height: var(--size);
  border: 0;
  padding: 0;
  border-radius: 12px;
  background: rgba(20,17,15,.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  color:#fff;
  overflow: visible !important;     /* prevents cut edges */
  z-index: 1010;                    /* above everything in hero */
}

/* bars use the SAME center, then offset by --gap: perfecto spacing */
#site-tabs .hamburger-btn .bar{
  position: absolute;
  left:  var(--pad);
  right: var(--pad);
  top: 50%;
  height: var(--thick);
  border-radius: 2px;
  background: currentColor;
  transform-origin: 50% 50%;
  transform: translateY(-50%);
  transition: transform .18s ease, opacity .18s ease, left .18s ease, right .18s ease;
  will-change: transform;
}

/* equal spacing around the middle line */
#site-tabs .hamburger-btn .bar:nth-child(1){ transform: translateY(calc(-50% - var(--gap))); }
#site-tabs .hamburger-btn .bar:nth-child(2){ transform: translateY(-50%); }
#site-tabs .hamburger-btn .bar:nth-child(3){ transform: translateY(calc(-50% + var(--gap))); }

/* morph to a crisp X, slightly shorter so corners never clip */
#site-tabs .hamburger-btn.is-active .bar{
  left:  calc(var(--pad) + 1px);
  right: calc(var(--pad) + 1px);
}

#site-tabs .hamburger-btn.is-active .bar:nth-child(1){
  transform: translateY(-50%) rotate(45deg);
}
#site-tabs .hamburger-btn.is-active .bar:nth-child(2){
  opacity: 0; transform: translateY(-50%) scaleX(.85);
}
#site-tabs .hamburger-btn.is-active .bar:nth-child(3){
  transform: translateY(-50%) rotate(-45deg);
}

/* prefers-reduced-motion: keep it snappy but subtle */
@media (prefers-reduced-motion: reduce){
  #site-tabs .hamburger-btn .bar{ transition: none; }
}
/* Button shell (keeps your fixed placement from JS) */
#site-tabs .hamburger-btn{
  --size: 48px;
  position: fixed;
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  border-radius: 12px;
  background: rgba(20,17,15,.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  color: #fff;
  overflow: visible;           /* never clip the X */
  z-index: 1010;
  line-height: 1;
}

/* The two icons */
#site-tabs .hamburger-btn .icon{
  width: 26px;
  height: 26px;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  fill: none;
  transition: opacity .18s ease, transform .24s ease;
}

/* Default = show bars, hide X */
#site-tabs .hamburger-btn .icon-bars{  opacity: 1; transform: none; }
#site-tabs .hamburger-btn .icon-close{ opacity: 0; transform: scale(.9) rotate(-90deg); }

/* Active = swap */
#site-tabs .hamburger-btn.is-active .icon-bars{  opacity: 0; transform: scale(.9) rotate(90deg); }
#site-tabs .hamburger-btn.is-active .icon-close{ opacity: 1; transform: none; }

/* Nice keyboard focus */
#site-tabs .hamburger-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.75), 0 0 0 6px rgba(158,68,27,.45);
}
/* ===== DESKTOP ONLY: force the submenu to a single horizontal row ===== */
@media (min-width: 901px){

  /* Submenu panel: full-width bar directly under the tabs */
  #site-tabs > nav#submenu-left.tab-submenu{
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: clamp(16px, 2.6vw, 32px) !important;

    white-space: nowrap !important;   /* keep one line */
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;

    /* same dark glass as the bar */
    background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.28)) !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 10px var(--tab-gutter, 24px) !important;
  }

  /* Links: stop the mobile “block/100% width” rule */
  #site-tabs > nav#submenu-left.tab-submenu > a{
    display: inline-block !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 8px 0 !important;
    background: transparent !important;
    border: 0 !important;
  }  
}
/* DESKTOP: submenu same width/position as the left tab */
@media (min-width: 901px){
  #site-tabs{ position:relative; }

  #site-tabs > nav#submenu-left.tab-submenu{
    position: absolute !important;
    top: 100% !important;

    /* ← use the values set by your JS */
    left: var(--submenu-left, 0px) !important;
    width: var(--submenu-width, 50%) !important;
    right: auto !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    white-space: nowrap !important;
    gap: clamp(16px, 2.6vw, 32px) !important;

    /* keep the compact “glass” strip under the tab only */
    padding: 10px 12px !important;
    background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.28)) !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* kill any full-width pseudo background that might still be applied */
  #site-tabs > nav#submenu-left.tab-submenu::before{ content:none !important; }

  /* links not block-level on desktop */
  #site-tabs > nav#submenu-left.tab-submenu > a{
    display: inline-block !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 8px 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
}
/* DESKTOP: square top corners for the left submenu overlay */
@media (min-width: 901px){
  #site-tabs > nav#submenu-left.tab-submenu{
    /* keep bottom radius if you want, change 12px to your value */
    border-radius: 0 0 12px 12px !important;
    overflow: hidden; /* clips any inner gradient to the squared top edge */
  }

  /* If you still use pseudo-elements for glow/gradients, square them too */
  #site-tabs > nav#submenu-left.tab-submenu::before,
  #site-tabs > nav#submenu-left.tab-submenu::after{
    border-radius: 0 0 12px 12px !important;
  }
}
/* Submenu should never exceed the left tab width and should wrap */
.page-shifting-tabs { position: relative; }

.page-shifting-tabs > nav#submenu-left.tab-submenu{
  position: absolute;
  top: 100%;
  left: var(--submenu-left, 0);
  width: var(--submenu-width, auto);          /* same width as the left tab */
  max-width: calc(100vw - 24px);              /* safety so it never goes off-screen */
  box-sizing: border-box;

  display: flex;
  flex-wrap: wrap;                            /* 🌟 allow multiple rows */
  gap: 10px 18px;                             /* row/column spacing between links */

  padding: 14px 16px;
  overflow: hidden;                           /* clip any accidental spill */
  border-radius: 0 0 12px 12px;               /* square top corners as before */
}

/* Links should wrap instead of stretching the container */
.page-shifting-tabs > nav#submenu-left.tab-submenu > a{
  flex: 0 1 auto;         /* allow shrink/wrap */
  min-width: 0;           /* enable wrapping */
  white-space: normal;    /* <— wrap on spaces */
  overflow-wrap: anywhere;/* <— wrap long/unbreakable strings too */
}
/* Hamburger button: perfectly centered bars + clean X */
.hamburger-btn{
  --size: 40px;         /* chip size */
  --bar-w: 20px;        /* line length */
  --bar-h: 2px;         /* line thickness */
  --gap: 5px;           /* spacing between lines */

  width: var(--size);
  height: var(--size);
  padding: 0;                         /* remove any left padding that offsets it */
  display: flex;
  flex-direction: column;
  align-items: center;                /* horizontal centering */
  justify-content: center;            /* vertical centering */
  gap: var(--gap);
  background: rgba(0,0,0,.55);
  border-radius: 10px;
  overflow: visible;                  /* prevents clipping in “X” state */
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
}

.hamburger-btn .bar{
  width: var(--bar-w);
  height: var(--bar-h);
  background: #fff;
  border-radius: 2px;
  transition: transform .22s ease, opacity .15s ease;
  transform-origin: 50% 50%;
  margin: 0;                          /* keep centered */
}

/* Clean, centered X */
.hamburger-btn.is-active{ gap: 0; }
.hamburger-btn.is-active .bar:nth-child(1){
  transform: translateY(calc(var(--bar-h) + var(--gap))) rotate(45deg);
}
.hamburger-btn.is-active .bar:nth-child(2){
  opacity: 0;
}
.hamburger-btn.is-active .bar:nth-child(3){
  transform: translateY(calc(-1 * (var(--bar-h) + var(--gap)))) rotate(-45deg);
}
/* If there’s nothing to show, don’t show the strip */
.carousel-thumbs[hidden],
.carousel-thumbs:empty{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#laserforceCarousel .carousel-thumbs[hidden],
#laserforceCarousel .carousel-nav[hidden]{
  display: none !important;
}
/* Default = vertical stack (all pages) */
.page-shifting-tabs > .tab-submenu{
  display: grid;                 /* stack links vertically */
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px 14px;
}
.page-shifting-tabs > .tab-submenu a{
  display: block;
  white-space: normal;           /* wrap long labels */
}

/* Homepage ONLY: keep the horizontal look */
#home-sections .page-shifting-tabs > .tab-submenu{
  display: flex;
  gap: 18px;
  padding: 10px 14px;
}
#home-sections .page-shifting-tabs > .tab-submenu a{
  white-space: nowrap;           /* don’t wrap on the home tab row */
}

/* If something still forces flex on non-home pages, hard-override there */
.hero-banner .page-shifting-tabs > .tab-submenu{
  display: grid !important;      /* tenant/detail pages use .hero-banner */
  grid-template-columns: 1fr;
}
/* default: vertical stack */
.page-shifting-tabs > .tab-submenu{
  display: grid;                 /* vertical */
  grid-auto-rows: min-content;
  gap: 12px;
}

/* inner pages (hero-banner) – make sure nothing flips it back to flex */
.hero-banner .page-shifting-tabs > .tab-submenu{
  display: grid !important;      /* beats old flex rule */
}

/* shared overlay look (same as index) */
:root{ --submenu-bg: rgba(0,0,0,.78); }
.page-shifting-tabs > .tab-submenu{
  position: absolute;
  top: 100%;
  left: var(--submenu-left, 0px);
  width: min(100%, var(--submenu-width, 320px));
  background: var(--submenu-bg);
  color: #fff;
  padding: 14px 16px;
  border-radius: 0 0 12px 12px;  /* square top edges, rounded bottom */
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* submenu links */
.page-shifting-tabs > .tab-submenu a{
  display: block;
  white-space: normal;           /* wrap long labels */
  text-decoration: none;
  color: #fff;
  font-weight: 700;
}
.page-shifting-tabs > .tab-submenu a:hover{ opacity:.9; }

/* homepage only: keep your horizontal chip-style if desired */
#home-sections .page-shifting-tabs > .tab-submenu{
  display: flex;
  gap: 18px;
  padding: 10px 14px;
  border-radius: 0 0 12px 12px;
  width: auto;                   /* homepage uses inline chips */
  background: var(--submenu-bg); /* same darkness */
}
/* Default: vertical stack, dark panel, sized to the left tab */
.page-shifting-tabs > .tab-submenu{
  position: absolute !important;
  top: 100%;
  left: var(--submenu-left, 0px);
  width: var(--submenu-width, auto) !important;  /* stop 100% rules */
  max-width: min(100vw, 360px);
  right: auto !important;                        /* in case something sets right:0 */
  display: grid !important;
  grid-auto-rows: min-content;
  gap: 12px;
  box-sizing: border-box;
  padding: 14px 16px;
  background: rgba(0,0,0,.78);                   /* same darkness as index */
  color: #fff;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Submenu links wrap if long */
.page-shifting-tabs > .tab-submenu a{
  display: block;
  white-space: normal;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

/* Keep homepage’s chip-style submenu horizontal only on the index */
#home-sections .page-shifting-tabs > .tab-submenu{
  display: flex !important;
  gap: 18px;
  width: auto !important;
}
/* === Page tabs: consistent on ALL pages === */
.page-shifting-tabs{ position:relative; z-index:1003; }

/* Vertical dropdown panel under the left tab */
.page-shifting-tabs .tab-submenu{
  position:absolute;
  top:100%;
  left:var(--submenu-left, 0);
  width:min(var(--submenu-width, 360px), 92vw);

  /* force vertical stack (overrides any old flex row rules) */
  display:grid !important;
  grid-auto-rows:auto;
  gap:12px;

  padding:14px 16px;
  background:rgba(17,17,17,.88);      /* same darkness as index */
  backdrop-filter:blur(6px);
  box-shadow:0 18px 36px rgba(0,0,0,.35);
  border-radius:0 0 12px 12px;         /* square top, rounded bottom */
}

/* Links wrap on iPad Pro instead of overflowing */
.page-shifting-tabs .tab-submenu a{
  display:block;
  white-space:normal;
  color:#fff;
}
.partner-logos-container{ overflow:hidden; }
.partner-logos-scroll{
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.partner-logos-track{
  display:flex;
  align-items:center;
  gap: clamp(24px, 3vw, 48px);
  will-change: transform;
}
.partner-logos-track a{ flex:0 0 auto; display:flex; align-items:center; }
.partner-logos-track img{ display:block; height:72px; width:auto; }
/* === Brand accent taken from Contact button === */
:root{
  /* Fallback if JS can’t read the button color */
  --brand-accent: #8f4b2c;  /* <- use your exact Contact color if you know it */
  --brand-on-accent: #fff;
}

/* Tabs: active state underline + text */
.page-shifting-tabs .tab-button{
  border-bottom: 3px solid transparent;
}
.page-shifting-tabs .tab-button.active-tab-btn{
  border-bottom-color: var(--brand-accent);
  color: var(--brand-on-accent);
}

/* Submenu: active item uses accent color */
.page-shifting-tabs .tab-submenu a.active-tab-link{
  color: var(--brand-accent);
}

/* Focus outlines that match the brand */
.page-shifting-tabs .tab-button:focus-visible,
.page-shifting-tabs .tab-submenu a:focus-visible{
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

/* Hero carousel progress bar uses the same accent */
.hero-progress__bar{
  background: var(--brand-accent) !important;
}
/* === BRAND ACCENT (same as Contact button) =========================== */
:root{
  /* put the exact Contact color here (sample shown) */
  --brand-accent: #B86A3B;
  --brand-on-accent: #fff;
}

/* Tabs – make the active underline use the brand color */
.page-shifting-tabs .tab-button.active-tab-btn::after{
  background: var(--brand-accent) !important;
}

/* Submenu – the current page link matches the brand */
.tab-submenu a.active-tab-link{
  color: var(--brand-accent) !important;
  text-decoration-color: var(--brand-accent) !important;
}

/* Carousel progress bar + active dot use the brand */
.hero .hero-progress__bar{
  background: var(--brand-accent) !important;
}
.hero-dots button[aria-selected="true"]{
  background: var(--brand-accent) !important;
}
/* DESKTOP: center the hero text and place it lower */
@media (min-width: 992px){
  .hero.hero-banner{ position: relative !important; }

  /* whichever container you use (.hero-content or .hero-content-main) */
  .hero.hero-banner > .hero-content,
  .hero.hero-banner .hero-content-main{
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important; /* true horizontal center */
    bottom: 0vh !important;                /* ↓ move lower (tweak 10–18vh) */
    width: min(92vw, 1200px) !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 2;
  }

  /* make sure inner wrappers can’t re-align left */
  .hero.hero-banner .hero-text,
  .hero.hero-banner .hero-title,
  .hero.hero-banner .hero-description{
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}
#site-tabs > nav#submenu-left.tab-submenu{ 
  background: linear-gradient(180deg, rgba(28,22,20,.90), rgba(28,22,20,.72)) !important;
}
/* Only for "Devenir locataire" */
.hero--devenir .hero-content-main{
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;                 /* center the text vertically */
  min-height: clamp(420px, 62vh, 720px); /* give it room to center */
  padding-top: clamp(48px, 8vh, 96px);   /* leave space for the dark tabs bar */
  padding-bottom: clamp(24px, 6vh, 64px);
}

.hero--devenir .hero-text{ margin: 0 !important; } /* kill any inherited push-down */

/* Slightly tighter heading spacing on this page */
.hero--devenir .hero-title{ margin-bottom: .5rem; }
.hero--devenir .hero-description{ margin-top: .25rem; }

/* Tablet/phone: still centered but a touch shorter */
@media (max-width: 900px){
  .hero--devenir .hero-content-main{
    min-height: 56vh;
    padding-top: clamp(36px, 7vh, 64px);
  }
}
/* Reuse contact button colour for the hamburger */
:root{ --cta: #C86A49; } /* ← set to your Contact button bg */

/* Mobile/iPad only (adjust breakpoint if you prefer) */
@media (max-width: 900px){
  .hamburger-btn{
    --size: 42px;
    position: relative;
    width: var(--size);
    height: var(--size);
    border: 0;
    border-radius: 12px;                 /* soft rounded square */
    background: var(--cta);
    color: #fff;
    display: grid;                       /* perfect centering */
    place-items: center;
    padding: 0;                          /* ensure true center */
    line-height: 0;                      /* no baseline shift */
    box-shadow:
      0 8px 18px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.12);
    transition: filter .15s ease, transform .15s ease;
  }
  .hamburger-btn:hover{ filter: brightness(1.07); }
  .hamburger-btn:active{ transform: translateY(1px); }

  /* Icons stacked in the exact center */
  .hamburger-btn svg{
    position: absolute;                  /* stack them */
    width: 22px; height: 22px;
    display: block;
    fill: none; stroke: #fff; stroke-width: 2.25;
    stroke-linecap: round; stroke-linejoin: round;
    pointer-events: none;
    transform-origin: 50% 50%;
    transition: opacity .18s ease, transform .18s ease;
  }

  /* Start state: show bars, hide X */
  .hamburger-btn .icon-close{ opacity: 0; transform: scale(.85) rotate(-90deg); }
  .hamburger-btn .icon-bars { opacity: 1;  transform: scale(1)   rotate(0);     }

  /* Active (menu open): swap smoothly */
  .hamburger-btn.is-active .icon-bars { opacity: 0; transform: scale(.85) rotate(90deg); }
  .hamburger-btn.is-active .icon-close{ opacity: 1;  transform: scale(1)   rotate(0);    }

  /* Keyboard focus ring */
  .hamburger-btn:focus-visible{
    outline: 3px solid #fff;
    outline-offset: 2px;
    box-shadow:
      0 0 0 3px rgba(0,0,0,.35),
      0 8px 18px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.12);
  }
}
/* Keep hero content above the progress bar */
.hero .hero-content-main,
.hero .hero-text,
.hero .hero-btn{
  position: relative;
  z-index: 3;                 /* CTA above the progress bar */
}

/* Extra space at the bottom of the hero so the CTA doesn't touch the bar */
.hero .hero-content-main{ padding-bottom: 48px; }
@media (max-width: 900px){
  .hero .hero-content-main{ padding-bottom: 64px; }  /* more room on mobile */
  .hero .hero-btn{ margin-bottom: 10px; }            /* small local gap */
}

/* Normalize the slider progress bar position & layer (below CTA) */
.hero .swiper-pagination-progressbar,
.hero .splide__progress,
.hero .carousel-progress,
.hero .slider-progress{
  position: absolute;
  left: 16px;
  right: 16px;
  width: auto;
  bottom: 10px;               /* lower it a bit */
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  z-index: 2;                 /* under the CTA */
}

/* Mobile: reserve space for the sticky CTA and lift the content */
:root { --sticky-cta-h: 64px; } /* adjust if your CTA is taller */

@media (max-width: 640px) {
  /* Whatever your main content wrapper is */
  main, .site-main, .content, .page-content {
    padding-bottom: calc(var(--sticky-cta-h) + 24px);
  }

  /* Sticky CTA button */
  .sticky-cta, .cta-fixed, .contact-cta {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 1001;
  }

  /* Reading/progress bar */
  #reading-progress, .reading-progress, .progress-bar, .progress {
    position: fixed;
    left: 0;
    right: 0;
    height: 4px;            /* your current height */
    bottom: calc(env(safe-area-inset-bottom) + var(--sticky-cta-h));
    z-index: 1000;          /* under the CTA */
  }
}
@media (max-width: 480px) {
    .hero-content {
        padding: 1% 0 0;
    }
}
/* Make the carousel a positioning context */
.hero-carousel { position: relative; }

/* Nav buttons: centered on the slide, icon centered inside */
.hero-carousel .hero-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);    /* vertical centering of the button */
  z-index: 5;                      /* above .hero-overlay and content */
  width: 70px;
  height: 50px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.45);     /* the dark circular overlay */
  color: #fff;
  display: grid;                   /* centers the arrow character */
  place-items: center;             /* …both axes */
  line-height: 1;                  /* no baseline shift for the glyph */
  font-size: 22px;                 /* size of ❮ ❯ */
  cursor: pointer;
}
.hero-carousel .hero-nav.prev { left: clamp(8px, 2vw, 24px); }
.hero-carousel .hero-nav.next { right: clamp(8px, 2vw, 24px); }

/* Keep the image overlay from blocking clicks */
.hero-carousel .hero-overlay{ pointer-events: none; }

/* Optional: focus ring for accessibility */
.hero-carousel .hero-nav:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* underline the current page link (works with our animated ::after too) */
.page-shifting-tabs .tab-submenu a.active-tab-link,
.page-shifting-tabs .tab-submenu a[aria-current="page"]{
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* if the menu uses the animated underline, force it “on” for active */
.page-shifting-tabs .tab-submenu a.active-tab-link::after,
.page-shifting-tabs .tab-submenu a[aria-current="page"]::after{
  width: 100%;
  transform: scaleX(1);
}
/* === MOBILE OVERRIDE: image before text in all 2-up cards === */
@media (max-width: 900px){
  /* Switch grids to a vertical flex stack */
  .canimex-grid,
  .about-grid{
    display: flex !important;
    flex-direction: column !important;
    gap: var(--block-gap, 24px) !important;
  }

  /* Image first, text second */
  .canimex-grid > .canimex-image,
  .about-grid   > .about-image{
    order: 1 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
  .canimex-grid > .canimex-card,
  .about-grid   > .about-card{
    order: 2 !important;
    height: auto !important;
  }

  /* Keep logos contained if you use logo variants */
  .canimex-image--logo img,
  .about-image--logo img{
    object-fit: contain !important;
  }
}
/* Shadowbox */
  .shadowbox {
    position: fixed;
    inset: 0;
    display: none;                 /* toggled via [aria-hidden] */
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.86);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 3000;                 /* above menus/tabs */
  }
  .shadowbox[aria-hidden="false"] { display: flex; }

  .shadowbox__stage {
    position: relative;
    max-width: 92vw;
    max-height: 92vh;
    display: grid;
    place-items: center;
    isolation: isolate;
  }

  .shadowbox__img {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08) inset;
    object-fit: contain;
    background: #000;
  }

  .shadowbox__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(42px, 4vw, 56px);
    height: clamp(42px, 4vw, 56px);
    display: grid; place-items: center;
    border: 0; border-radius: 12px;
    background: rgba(255,255,255,.14);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
  }
  .shadowbox__btn:hover { background: rgba(255,255,255,.22); }
  .shadowbox__btn svg { width: 58%; height: 58%; }

  .shadowbox__prev { left: -64px; }
  .shadowbox__next { right: -64px; }

  /* Close button */
  .shadowbox__close {
    position: absolute;
    top: -56px; right: -8px;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 0; border-radius: 10px;
    background: rgba(255,255,255,.16);
    color: #fff; cursor: pointer;
  }
  .shadowbox__close:hover { background: rgba(255,255,255,.26); }

  /* Touch-friendly on small screens */
  @media (max-width: 900px){
    .shadowbox__prev { left: 8px; }
    .shadowbox__next { right: 8px; }
    .shadowbox__close { top: 8px; right: 8px; }
  }
/* --- Lightbox overlay --- */
.lightbox{
  position: fixed; inset: 0; z-index: 9999;
  display: none;                       /* hidden by default */
  place-items: center;                 /* center the image */
  background: rgba(0,0,0,.92);         /* black veil */
  padding: clamp(12px, 3vw, 40px);
}
.lightbox.is-open{ display: grid; }

.lightbox__img{
  max-width: min(92vw, 1400px);
  max-height: 92vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

/* Close & nav buttons */
.lightbox__close,
.lightbox__nav{
  position: absolute;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: #fff; cursor: pointer;
}
.lightbox__close{ top: 14px; right: 14px; }
.lightbox__nav{ top: 50%; transform: translateY(-50%); }
.lightbox__nav.prev{ left: 16px; }
.lightbox__nav.next{ right: 16px; }
.lightbox__close:hover, .lightbox__nav:hover{ background: rgba(255,255,255,.16); }

.lightbox__close svg, .lightbox__nav svg{
  width: 60%; height: 60%; display: block;
  fill: none; stroke: currentColor; stroke-width: 2;
}
/* === Shadowbox / lightbox ============================== */
.shadowbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.78);
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: clamp(10px, 3vw, 28px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility 0s linear .18s;
}
.shadowbox[aria-hidden="false"]{
  opacity: 1;
  visibility: visible;
  transition: opacity .18s ease;
}

.shadowbox__stage{
  position: relative;
  max-width: min(1100px, 94vw);
  max-height: 90vh;
  background: #111;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.shadowbox__img{
  display:block;
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
}

/* Controls (force visible icons) */
.shadowbox__btn,
.shadowbox__close{
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(38px, 4.2vw, 48px);
  height: clamp(38px, 4.2vw, 48px);
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  color: #fff; /* <-- makes SVG strokes visible */
  box-shadow: 0 8px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.1);
  cursor: pointer;
}
.shadowbox__btn svg,
.shadowbox__close svg{ width:56%; height:56%; display:block; }

.shadowbox__prev{ left:-60px;  top:50%; transform:translateY(-50%); }
.shadowbox__next{ right:-60px; top:50%; transform:translateY(-50%); }
.shadowbox__close{ right:-60px; top:-60px; }

@media (max-width: 900px){
  .shadowbox__prev{ left:10px; }
  .shadowbox__next{ right:10px; }
  .shadowbox__close{ right:10px; top:10px; }
}

/* Nice cursor on the main image */
#laserforceCarousel .carousel-image{ cursor: zoom-in; }
/* Make the close (X) icon smaller without shrinking the tap target */
.page-shifting-tabs .hamburger-btn{
  /* keep a11y-friendly size */
  width: 44px;
  height: 44px;
  padding: 10px; /* centers the icon nicely */
}

/* default icon size (hamburger) */
.page-shifting-tabs .hamburger-btn .icon{
  width: 20px;
  height: 20px;
}

/* smaller X only */
.page-shifting-tabs .hamburger-btn .icon-close{
  width: 14px;   /* was ~20–24px */
  height: 14px;
}
.page-shifting-tabs .hamburger-btn .icon-close path{
  stroke-width: 2; /* make the strokes a touch finer */
}

/* Keep a11y tap size */
.page-shifting-tabs .hamburger-btn{
  width: 44px;
  height: 44px;
  padding: 10px;                 /* centers the glyph */
}

/* Base size for the hamburger (bars) */
.page-shifting-tabs .hamburger-btn > svg.icon-bars{
  width: 20px !important;
  height: 20px !important;
  display: block;
}

/* Make ONLY the X smaller (wins on specificity + !important) */
.page-shifting-tabs .hamburger-btn > svg.icon-close{
  width: 14px !important;
  height: 14px !important;
  display: block;
}
.page-shifting-tabs .hamburger-btn > svg.icon-close path{
  stroke-width: 2;               /* slightly finer lines */
}
section.hero.hero-banner{
  height: clamp(260px, 60vh, 850px) !important;
  min-height: clamp(260px, 60vh, 850px) !important;
}

/* some themes fake height with a ::before spacer; nuke it */
section.hero.hero-banner::before{
  content: none !important;
}
/* FIX: put the hero back in the flow and give it a real height */
.hero.hero-banner{
  position: relative !important;   /* was absolute */
  inset: auto !important;          /* undo inset:0 */
  min-height: clamp(240px, 38vh, 420px);  /* adjust to taste */
  background: url("assest/img/salle-1.jpg") center/cover no-repeat !important;
  padding-block: clamp(16px, 5vh, 56px);  /* keeps title off the edges */
}

/* Overlay stays absolutely positioned INSIDE the hero */
.hero.hero-banner .hero-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.25);
  pointer-events: none;
  z-index: 1;
}

/* Keep the text/tabs above the veil */
.hero-content-main,
.page-shifting-tabs{ position: relative; z-index: 2; }
/* Inner pages — make tabs kiss the top header */
.hero.hero-banner{ 
  padding-top: 0 !important;            /* remove the gap */
}

.hero.hero-banner .page-shifting-tabs{
  position: absolute;                    /* pin inside the hero */
  top: 0; left: 0; right: 0;
  margin-top: 0 !important;
}

/* keep your title/content spaced from the tabs */
.hero.hero-banner .hero-content-main{
  padding-top: clamp(16px, 3vh, 32px) !important;
}
/* Make inner-page hero shallower = image appears smaller */
.hero.hero-banner{
  /* instead of 100vh */
  height: clamp(320px, 46vh, 520px) !important;
  min-height: 320px !important;
  background-position: 50% 40% !important; /* tweak focus if needed */
}

/* a touch shorter on tablets */
@media (max-width: 1024px){
  .hero.hero-banner{
    height: clamp(280px, 42vh, 480px) !important;
  }
}

/* keep tabs above the hero */
.page-shifting-tabs{ position: relative; z-index: 3; }
/* Zoom-out factor: 1 = normal, <1 = smaller */
.hero.hero-banner{
  --hero-zoom: 0.9; /* try 0.85–0.95 */
  background-size: calc(100% * var(--hero-zoom)) auto !important;
  background-color: #0e0e0e; /* behind any uncovered edges */
}
/* put this at the END of your CSS */
.hero.hero-banner{
  position: relative;
  overflow: hidden;
  background: none !important;              /* stop double painting */
  --hero-zoom: .88;                          /* 0.75–1.00 (1 = normal) */
}

.hero.hero-banner::before{
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: url("assest/locataireheader/hero_accestravail.jpg")
              center / cover no-repeat;
  transform: scale(var(--hero-zoom));        
  transform-origin: 50% 50%;
  will-change: transform;
}

/* keep your dark veil and UI above the image */
.hero.hero-banner .hero-overlay{ position:absolute; inset:0; z-index:1; }
.page-shifting-tabs{ position: relative; z-index: 2; }
.hero.hero-banner{
  height: clamp(320px, 46vh, 520px) !important;
  min-height: 320px !important;
  background-position: 50% 40% !important;
}
@media (max-width: 900px){
  /* override any existing hero-title layout */
  .hero.hero-banner .hero-title--two-lines{
    display: flex !important;
    flex-direction: column !important;   /* <-- forces 2 lines */
    align-items: center !important;
    justify-content: center !important;
    white-space: normal !important;      /* in case you had nowrap */
    line-height: 1.05;
    text-align: center;
  }

  .hero.hero-banner .hero-title--two-lines > span{
    display: block !important;
  }
}