/* Cascais Routes Phase 3b — Global Chrome (header + footer) restyle.
 * Depends on tokens.css (cr-tokens) for design-system custom properties.
 * Element-color (--element-action) rebinds per .tpl-* body class (Phase 3a).
 */

/* ===================== Header (Theme Builder #144) — fixed overlay, transparent → solid on scroll =====================
   Elementor native sticky stripped from container 87cf9a3 (in _elementor_data), so
   the bar is a true fixed overlay (no flow spacer). Heroes are 100vh and pass under
   it; non-hero page content gets an 80px top offset (see below). body.cr-header-solid
   is toggled by assets/js/header-scroll.js past 60px of scroll. Yellow = #ffde01. */
.elementor-location-header .elementor-element-87cf9a3 {
  position: fixed !important; top: 0; left: 0; right: 0; z-index: 1000;
  background: transparent !important;
  border-bottom: 0 !important;
  transition: background .35s ease, box-shadow .35s ease;
}
/* top scrim — keeps nav + logo legible over any hero before scroll */
.elementor-location-header .elementor-element-87cf9a3::before {
  content: ""; position: absolute; inset: 0; bottom: -28px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,10,.66) 0%, rgba(10,10,10,.40) 45%, rgba(10,10,10,.12) 80%, rgba(10,10,10,0) 100%);
  transition: opacity .35s ease;
}
/* solid state — site dark-texture image + overlay (was flat ink) */
body.cr-header-solid .elementor-location-header .elementor-element-87cf9a3 {
  background: linear-gradient(rgba(10,10,10,.76), rgba(10,10,10,.86)),
              url('/wp-content/uploads/2024/01/Background-Site-Cascais-Routes.png') !important;
  background-size: cover !important; background-position: center !important;
  box-shadow: 0 6px 24px -12px rgba(0,0,0,.55);
}
body.cr-header-solid .elementor-location-header .elementor-element-87cf9a3::before { opacity: 0; }

/* logo -> white + own shadow (transparent); plain white when solid. Bigger per request. */
.elementor-location-header img {
  max-height: 52px; width: auto;
  filter: brightness(0) invert(1) drop-shadow(0 2px 5px rgba(0,0,0,.6));
}
body.cr-header-solid .elementor-location-header img { filter: brightness(0) invert(1); }

/* nav items — white, smaller font + even spacing, yellow keyline.
   font-size/letter-spacing forced: Elementor widget typography ships 17px and would win. */
.elementor-location-header .elementor-nav-menu .elementor-item {
  font-family: var(--font-heading); font-weight: 600; font-size: 14px !important;
  text-transform: uppercase; letter-spacing: .07em !important; color: #fff;
  margin: 0 !important; padding: .45em clamp(.7rem, 1.35vw, 1.15rem) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.5);
  border-radius: 6px;
  transition: background-color .15s ease, color .15s ease;
}
body.cr-header-solid .elementor-location-header .elementor-nav-menu .elementor-item { text-shadow: none; }
.elementor-location-header .elementor-nav-menu .elementor-item:hover,
.elementor-location-header .elementor-nav-menu .elementor-item:focus-visible { background: #ffde01 !important; color: #0a0a0a !important; box-shadow: none; }
.elementor-location-header .elementor-nav-menu .elementor-item.elementor-item-active { background: #ffde01 !important; color: #0a0a0a !important; box-shadow: none; }
/* smaller dropdown caret (was a chunky fa-angle-down) */
.elementor-location-header .elementor-nav-menu .sub-arrow svg {
  width: .62em; height: .62em; opacity: 1; transition: opacity .2s;
  fill: currentColor;
}
.elementor-location-header .elementor-nav-menu .elementor-item:hover .sub-arrow svg,
.elementor-location-header .elementor-nav-menu .elementor-item.elementor-item-active .sub-arrow svg { opacity: 1; }

/* "Routes Club" promoted to the CTA -> hide its nav item */
.elementor-location-header .menu-item-8584 { display: none !important; }

/* dropdown submenu panels — same dark texture as the scrolled bar, legible both states */
.elementor-location-header .elementor-nav-menu .sub-menu {
  background: linear-gradient(rgba(10,10,10,.82), rgba(10,10,10,.9)),
              url('/wp-content/uploads/2024/01/Background-Site-Cascais-Routes.png') !important;
  background-size: cover !important; background-position: center !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.6); border-radius: 0 0 10px 10px;
}
.elementor-location-header .elementor-nav-menu .sub-menu .elementor-sub-item {
  color: #fff !important; font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.04em; text-shadow: none;
}
.elementor-location-header .elementor-nav-menu .sub-menu .elementor-sub-item { transition: background-color .15s ease, color .15s ease; border-radius: 7px; }
.elementor-location-header .elementor-nav-menu .sub-menu .elementor-sub-item:hover,
.elementor-location-header .elementor-nav-menu .sub-menu .elementor-sub-item:focus-visible { color: #0a0a0a !important; background: #ffde01 !important; }
/* active sub-item: Kit paints a white bg here -> would be white-on-white. Filled yellow beats it. */
.elementor-location-header .elementor-nav-menu .sub-menu .elementor-sub-item.elementor-item-active {
  color: #0a0a0a !important; background: #ffde01 !important;
}
.elementor-location-header .elementor-nav-menu .sub-menu .elementor-sub-item.elementor-item-active:hover,
.elementor-location-header .elementor-nav-menu .sub-menu .elementor-sub-item.elementor-item-active:focus-visible { color: #0a0a0a !important; background: #ffde01 !important; }

/* right cluster — the language switcher pill sits beside the Routes Club CTA.
   The header html widget (f50ed0a) holds [gtranslate] then .cr-routes-cta; flex them into a row.
   Elementor allocates widths via --width CSS variable (5%/90%/5% for logo/nav/cluster).
   At ~1300-1400px the 5% cluster (~62px) is too narrow for the language pill + CTA (~200px).
   Override --width on cluster (16%) and nav (79%) so total stays 100% and cluster has room. */
@media (min-width: 1025px) {
  .elementor-location-header .elementor-element-6883a97 { --width: 16% !important; }
  .elementor-location-header .elementor-element-3c0e2ae8 { --width: 79% !important; }
}
.elementor-location-header .elementor-element-f50ed0a > .elementor-widget-container {
  display: flex; align-items: center; gap: .7rem;
}

/* ---- GTranslate switcher -> compact pill + texture dropdown.
   The plugin styles `.gt_container--xxxx .gt_*` (3 classes = 0,3,x, several !important) from an inline <style>
   injected late in the document, so equal-specificity rules lose to it on source order. We prepend the STABLE
   `.gtranslate_wrapper` class to every selector below (-> 0,4,x) to win on specificity, and keep !important on
   layout/paint props the plugin also marks !important. The random `.gt_container--xxxx` suffix can't be matched. ---- */
.elementor-location-header .gtranslate_wrapper { line-height: 1; }
.elementor-location-header .gtranslate_wrapper .gt_switcher {
  position: relative !important; display: inline-block !important; width: auto !important;
  font-family: var(--font-heading) !important;
  /* plugin sets overflow:hidden on the 82px-wide switcher, which clips the dropdown where it
     overflows left -> language rows become unhittable. Let it overflow so the menu is clickable. */
  overflow: visible !important;
}
/* drop the plugin's grey gradient/border on the container chrome — only our pill should read */
.elementor-location-header .gtranslate_wrapper .gt_switcher,
.elementor-location-header .gtranslate_wrapper .gt_switcher .gt_selected {
  background: none !important; border: 0 !important; box-shadow: none !important;
  width: auto !important; height: auto !important;
}
/* the closed pill (flag + current language + caret) */
.elementor-location-header .gtranslate_wrapper .gt_switcher .gt_selected a {
  /* max-content (not auto): the switcher's fixed ~82px clipped the pill, so the caret
     overflowed past the right border. max-content sizes the pill to its full content incl caret. */
  display: inline-flex !important; align-items: center; gap: .4em;
  width: max-content !important; min-width: max-content !important; height: auto !important;
  padding: .55em .8em !important; border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 9px !important; background: rgba(255,255,255,.08) !important;
  font-family: var(--font-heading); font-weight: 600; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .05em; color: #fff !important;
  line-height: 1; transition: background .2s, border-color .2s, color .2s;
}
/* Replace GTranslate's baked-in absolute SVG arrow (content:'' + dark SVG bg, invisible on the dark pill). */
.elementor-location-header .gtranslate_wrapper .gt_switcher .gt_selected a::after {
  content: "\25BE" !important; position: static !important; display: inline !important;
  width: auto !important; height: auto !important; background: none !important; right: auto !important;
  font-size: .9em; line-height: 1; opacity: .7; margin-left: .12em; color: inherit;
  transition: transform .2s, opacity .2s;
}
.elementor-location-header .gtranslate_wrapper .gt_switcher.gt-open .gt_selected a::after { transform: rotate(180deg); opacity: 1; }
.elementor-location-header .gtranslate_wrapper .gt_switcher .gt_selected a:hover {
  background: rgba(255,255,255,.14) !important; border-color: rgba(255,222,1,.6) !important; color: #ffde01 !important;
}
.elementor-location-header .gtranslate_wrapper .gt_switcher .gt_selected a img { width: 16px !important; height: 16px !important; border-radius: 2px; margin: 0 !important; }
/* the white-logo filter (line ~37: `.elementor-location-header img{filter:brightness(0) invert(1)}`)
   also hits the flag PNGs -> they render as solid white boxes. Exempt the switcher flags. */
.elementor-location-header .gtranslate_wrapper .gt_switcher img { filter: none !important; opacity: 1 !important; }
/* the dropdown list — texture bg, white -> yellow */
.elementor-location-header .gtranslate_wrapper .gt_switcher .gt_option {
  position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important; left: auto !important;
  width: auto !important; min-width: 185px !important; height: auto !important;
  background: linear-gradient(rgba(10,10,10,.82), rgba(10,10,10,.9)),
              url('/wp-content/uploads/2024/01/Background-Site-Cascais-Routes.png') !important;
  background-size: cover !important; background-position: center !important;
  border: 1px solid rgba(255,255,255,.12) !important; border-radius: 11px !important;
  box-shadow: 0 22px 50px -22px rgba(0,0,0,.75); padding: .35rem !important; z-index: 1001;
}
/* Open on a JS-toggled class (click/tap) rather than :hover — the plugin's Dropdown look is hover-only,
   which drops the menu across the pill->list gap on desktop and never opens on touch. JS in header-scroll.js
   toggles .gt-open; :focus-within keeps it keyboard-openable. */
.elementor-location-header .gtranslate_wrapper .gt_switcher.gt-open .gt_option,
.elementor-location-header .gtranslate_wrapper .gt_switcher:focus-within .gt_option { display: block !important; }
.elementor-location-header .gtranslate_wrapper .gt_switcher .gt_option a {
  display: flex !important; align-items: center; gap: .55em; width: auto !important; height: auto !important; float: none !important;
  margin: 0 !important; padding: .5em .7em !important; border-radius: 7px;
  font-family: var(--font-body); font-weight: 500; font-size: 13px;
  color: #fff !important; text-transform: none; letter-spacing: 0; transition: color .18s, background .18s;
}
.elementor-location-header .gtranslate_wrapper .gt_switcher .gt_option a img { width: 16px !important; height: 16px !important; border-radius: 2px; margin: 0 !important; }
.elementor-location-header .gtranslate_wrapper .gt_switcher .gt_option a:hover { color: #ffde01 !important; background: rgba(255,255,255,.06) !important; }
.elementor-location-header .gtranslate_wrapper .gt_switcher .gt_option a.gt_current { color: #ffde01 !important; }

/* Routes Club CTA (literal in header html widget) */
.cr-routes-cta {
  display: inline-block; background: #ffde01; color: var(--ink);
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: .7em 1.3em; border-radius: 8px; text-decoration: none;
  white-space: nowrap; line-height: 1.1; align-self: center;
  transition: background .25s, color .25s;
}
.cr-routes-cta:hover { background: #fff; color: var(--ink); }

/* Content offset under the fixed header — only for pages whose first section is
   NOT a full-bleed hero (hero pages pass intentionally under the transparent bar).
   Hubs 27/37/32/57 (not the 62 photo-hero) + legal docs start at y≈0, so clear them. */
body.cr-legal .elementor[data-elementor-type="wp-page"],
body.cr-hub:not(.page-id-62) .elementor[data-elementor-type="wp-page"] {
  padding-top: 80px;
}

/* Intermediate squeeze zone: nav eats too much room at ~1300-1400px, pushing Routes Club off-screen.
   Tighten nav padding and CTA so the right cluster always fits. */
@media (max-width: 1400px) {
  .elementor-location-header .elementor-nav-menu .elementor-item {
    padding: .45em clamp(.45rem, .7vw, .75rem) !important;
  }
  .cr-routes-cta { padding: .6em 1em; font-size: 13px; }
}

@media (max-width: 1024px) {
  .elementor-location-header img { max-height: 40px; }
  /* keep the mobile bar a single clean row: logo | hamburger | switcher + CTA. */
  .elementor-location-header .elementor-element-87cf9a3 { flex-wrap: nowrap !important; align-items: center; gap: .5rem; }
  .cr-routes-cta { padding: .5em .9em; font-size: 12px; }
  /* switcher stays in the bar (the footer one was removed) but collapses to flag + caret to save room.
     Selectors carry .gtranslate_wrapper to outrank the desktop pill rules above (which are 0,4,x !important). */
  /* px padding, not em — em resolves to 0 against the font-size:0 used to hide the label */
  .elementor-location-header .gtranslate_wrapper .gt_switcher .gt_selected a { font-size: 0 !important; gap: 0; padding: 8px 10px !important; }
  .elementor-location-header .gtranslate_wrapper .gt_switcher .gt_selected a::after { font-size: 11px !important; margin-left: .25em; }
  .elementor-location-header .gtranslate_wrapper .gt_switcher .gt_option a { font-size: 13px !important; }
  /* the dropdown opens leftward from right:0; the mobile pill sits center-left, so a 185px menu
     overflows the screen's left edge -> anchor it to open rightward instead so it stays on-screen. */
  .elementor-location-header .gtranslate_wrapper .gt_switcher .gt_option { left: 0 !important; right: auto !important; }

  /* ---- refined mobile nav menu ----
     Replace Elementor's half-height floating panel (which let the hero bleed in
     mid-list) with a full-height solid-ink sheet; de-box the toggle; left-align
     items with real tap targets + hairline dividers. */
  .elementor-location-header .elementor-menu-toggle {
    border: 0 !important; background: transparent !important; padding: 4px !important;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
  }
  .elementor-location-header .elementor-menu-toggle svg,
  .elementor-location-header .elementor-menu-toggle i { width: 30px; height: 30px; font-size: 30px; }
  /* menu open -> solidify the whole top bar so it reads as one dark sheet */
  .elementor-location-header .elementor-element-87cf9a3:has(.elementor-menu-toggle.elementor-active) { background: var(--ink) !important; box-shadow: none; }
  .elementor-location-header .elementor-element-87cf9a3:has(.elementor-menu-toggle.elementor-active)::before { opacity: 0; }
  /* full-height sheet */
  .elementor-location-header .elementor-nav-menu--dropdown {
    position: fixed !important; top: 80px; left: 0; right: 0; bottom: 0;
    height: auto !important; max-height: calc(100vh - 80px); overflow-y: auto;
    background: var(--ink) !important; box-shadow: none !important;
    padding: .25rem 0 2rem; border-top: 1px solid rgba(255,255,255,.08);
  }
  /* items: left-aligned, big targets, dividers */
  .elementor-location-header .elementor-nav-menu--dropdown .elementor-item {
    justify-content: flex-start !important; text-align: left !important;
    padding: 16px 26px !important; font-size: 16px; text-shadow: none;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .elementor-location-header .elementor-nav-menu--dropdown .elementor-item:hover,
  .elementor-location-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active { color: #0a0a0a !important; box-shadow: none; }
  /* sub-menu: force inline accordion flow (SmartMenus renders it absolute, which
     the fixed sheet pushed to the screen bottom) + a slightly inset dark band */
  .elementor-location-header .elementor-nav-menu--dropdown .sub-menu {
    position: static !important; left: auto !important; top: auto !important; right: auto !important;
    width: auto !important; min-width: 0 !important; transform: none !important;
    background: rgba(255,255,255,.03) !important; box-shadow: none !important; border-radius: 0 !important;
  }
  /* sub-items: left-aligned, indented + dimmer, on the same ink */
  .elementor-location-header .elementor-nav-menu--dropdown .elementor-sub-item {
    justify-content: flex-start !important; text-align: left !important;
    padding: 13px 26px 13px 44px !important; font-size: 14px; color: #cfcbc4 !important;
    border-bottom: 1px solid rgba(255,255,255,.05);
  }
  /* the dropdown caret aligns to the right of the row */
  .elementor-location-header .elementor-nav-menu--dropdown .elementor-item .sub-arrow { margin-left: auto; }
}

/* Elementor bakes the switcher+CTA cluster (f50ed0a) as absolute-positioned (post-144.css:
   left:25%, top:-50px at <=767px), independent of the toggle's own flex-end position. On
   narrow phones (~360-390px) that left:25% offset runs the cluster into the hamburger —
   sometimes fully overlapping it, per report. Anchor from the right instead so the gap to
   the toggle is a fixed, guaranteed distance regardless of viewport width; -57px (vs the
   native -50px) corrects a ~7px vertical mismatch against the logo/toggle row. */
@media (max-width: 767px) {
  .elementor-location-header .elementor-element-f50ed0a {
    left: auto !important; right: 60px !important; top: -57px !important;
    /* On most templates this absolute box shrinks to its content because only one
       offset (right) is set. On some page templates its containing block (6883a97)
       resolves --width:100% differently and the browser stretches it full-width
       instead of shrink-wrapping -> the CTA/switcher row drifts left into page
       content. Force shrink-to-fit explicitly so width can't depend on that. */
    width: max-content !important;
  }
}

/* ===================== Footer (Theme Builder #189) — compact: newsletter band + dark textured footer =====================
   Rebuilt as nested containers: root > [news html] + #cr-ft-dark > [main html] + #cr-ft-strip > [meta html].
   No language switcher in the footer (it lives in the header). Container _css_classes don't render here, so dark/strip
   layout hooks on _element_id; markup classes (.crf-*) live in the html widgets. Scoped under .elementor-location-footer. */
.elementor-location-footer .e-con { --gap: 0px; gap: 0; }

/* newsletter band */
.elementor-location-footer .crf-news { background: #ffde01; color: var(--ink); }
.elementor-location-footer .crf-news__in {
  max-width: 1200px; margin: 0 auto; padding: 1.15rem clamp(1.25rem,5vw,3rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; flex-wrap: wrap;
}
.elementor-location-footer .crf-news__copy { margin: 0; max-width: 34rem; }
.elementor-location-footer .crf-news__lead {
  display: block; font-family: var(--font-heading); font-weight: 700; letter-spacing: 0;
  line-height: 1.02; font-size: clamp(1.3rem,2.4vw,1.75rem); color: var(--ink);
}
.elementor-location-footer .crf-news__sub {
  display: block; margin-top: .32rem; font-family: var(--font-body); font-weight: 500;
  font-size: clamp(.92rem,1.4vw,1.02rem); line-height: 1.3; color: rgba(10,10,10,.8);
}
.elementor-location-footer .crf-news__form { display: flex; align-items: stretch; gap: .55rem; flex: 0 1 auto; }
.elementor-location-footer .crf-news__form input {
  font-family: var(--font-body); font-size: .95rem; color: var(--ink);
  background: #fff; border: 1.5px solid rgba(10,10,10,.18); border-radius: 8px;
  padding: .7em 1em; width: min(300px,60vw); transition: border-color .2s;
}
.elementor-location-footer .crf-news__form input::placeholder { color: #7c766b; }
.elementor-location-footer .crf-news__form input:focus { outline: none; border-color: var(--ink); }
.elementor-location-footer .crf-news__form button {
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  font-size: .9rem; color: #ffde01; background: var(--ink); border: 0; border-radius: 8px;
  padding: .7em 1.4em; cursor: pointer; white-space: nowrap; transition: transform .2s, background .2s;
}
.elementor-location-footer .crf-news__form button:hover { background: #1c1c1c; transform: translateY(-1px); }

/* dark region — site dark-texture image + overlay */
.elementor-location-footer #cr-ft-dark {
  background: linear-gradient(rgba(10,10,10,.70), rgba(10,10,10,.82)),
              url('/wp-content/uploads/2024/01/Background-Site-Cascais-Routes.png');
  background-size: cover; background-position: center; color: #d6d3cd;
}
.elementor-location-footer .crf-main__in {
  max-width: 1200px; margin: 0 auto;
  padding: clamp(2.5rem,5vw,3.5rem) clamp(1.25rem,5vw,3rem) clamp(2rem,4vw,2.75rem);
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: clamp(1.5rem,4vw,3.25rem);
}
/* brand */
.elementor-location-footer .crf-brand { max-width: 32ch; }
.elementor-location-footer .crf-logo { height: 54px; width: auto; display: block; filter: brightness(0) invert(1); opacity: .95; }
.elementor-location-footer .crf-about { margin: 1.1rem 0 0; font-size: .86rem; line-height: 1.65; color: #d6d3cd; max-width: 34ch; }
.elementor-location-footer .crf-contact { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: .7rem; }
.elementor-location-footer .crf-contact li { display: flex; align-items: flex-start; gap: .65rem; font-size: .86rem; line-height: 1.35; color: #d6d3cd; }
.elementor-location-footer .crf-contact svg { width: 17px; height: 17px; flex: none; margin-top: .06em; fill: none; stroke: #ffde01; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.elementor-location-footer .crf-contact a { color: #d6d3cd; text-decoration: none; transition: color .2s; }
.elementor-location-footer .crf-contact a:hover { color: #ffde01; }
.elementor-location-footer .crf-social { display: flex; gap: .55rem; margin-top: 1.3rem; }
.elementor-location-footer .crf-social a {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
  transition: background .2s, border-color .2s, transform .2s;
}
.elementor-location-footer .crf-social svg { width: 17px; height: 17px; fill: #e7e3da; transition: fill .2s; }
.elementor-location-footer .crf-social a:hover { background: #ffde01; border-color: #ffde01; transform: translateY(-2px); }
.elementor-location-footer .crf-social a:hover svg { fill: var(--ink); }
/* link columns */
.elementor-location-footer .crf-col h3 {
  margin: 0 0 1.1rem; font-family: var(--font-heading); font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; font-size: .78rem; color: #fff;
}
.elementor-location-footer .crf-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .62rem; }
.elementor-location-footer .crf-col ul a { font-size: .9rem; color: #d6d3cd; text-decoration: none; transition: color .2s; }
.elementor-location-footer .crf-col ul a:hover { color: #ffde01; }
/* work-in-cascais button (under CONNECT) */
.elementor-location-footer .crf-hire {
  display: inline-flex; align-items: center; gap: .45em; margin-top: 1.5rem; text-decoration: none;
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  font-size: .8rem; color: var(--ink); background: #ffde01; border: 1.5px solid #ffde01; border-radius: 9px;
  padding: .7em 1.1em; transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.elementor-location-footer .crf-hire .arr { transition: transform .2s; }
.elementor-location-footer .crf-hire:hover { background: var(--ink); color: #fff; border-color: #ffde01; transform: translateY(-2px); }
.elementor-location-footer .crf-hire:hover .arr { transform: translateX(3px); }

/* bottom strip */
.elementor-location-footer #cr-ft-strip { border-top: 1px solid rgba(255,255,255,.10); }
.elementor-location-footer .crf-bottom__in {
  max-width: 1200px; margin: 0 auto; padding: 1.1rem clamp(1.25rem,5vw,3rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.elementor-location-footer .crf-copy { font-size: .82rem; color: #9a958c; }
.elementor-location-footer .crf-copy b { color: #d6d3cd; font-weight: 600; }
.elementor-location-footer .crf-legal { display: flex; gap: 1.5rem; }
.elementor-location-footer .crf-legal a { font-size: .82rem; color: #9a958c; text-decoration: none; transition: color .2s; }
.elementor-location-footer .crf-legal a:hover { color: #ffde01; }

@media (max-width: 900px) {
  .elementor-location-footer .crf-main__in { grid-template-columns: 1fr 1fr; row-gap: 2.25rem; }
  .elementor-location-footer .crf-brand { grid-column: 1 / -1; max-width: 46ch; }
}
@media (max-width: 560px) {
  .elementor-location-footer .crf-news__in { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .elementor-location-footer .crf-news__form { width: 100%; }
  .elementor-location-footer .crf-news__form input { flex: 1; width: auto; }
  .elementor-location-footer .crf-main__in { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
  .elementor-location-footer .crf-bottom__in { flex-direction: column; align-items: flex-start; gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .elementor-location-footer .crf-social a,
  .elementor-location-footer .crf-hire, .elementor-location-footer .crf-hire .arr,
  .elementor-location-footer .crf-news__form button { transition: none; }
}

/* ===================== Back-to-top (global, desktop only) =====================
   Selectors are doubled (.cr-totop.cr-totop) to score 0,2,0 — this beats the
   Elementor Kit's generic button rule (.elementor-kit-9185 button, 0,1,1) that
   otherwise paints a transparent-yellow background over ours. */
.cr-totop.cr-totop {
  position: fixed;
  right: 15px;                   /* aligned with the WhatsApp float (.ht-ctc) */
  bottom: 80px;                  /* stacked directly above it (50px float + 15px gap) */
  z-index: 900;
  display: none;                 /* desktop-only: unhidden in the min-width query */
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
  /* hidden until scrolled past the fold */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .28s ease, transform .28s ease, background-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 18px rgba(10, 10, 10, .28);
}
.cr-totop svg { width: 22px; height: 22px; display: block; }
.cr-totop.cr-totop:hover {
  background: var(--element-action);
  box-shadow: 0 8px 22px rgba(10, 10, 10, .34);
}
.cr-totop.cr-totop:focus-visible { outline: 3px solid var(--element-action); outline-offset: 3px; }
.cr-totop.cr-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

@media (min-width: 1024px) {
  .cr-totop.cr-totop { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .cr-totop.cr-totop { transition: opacity .15s ease, visibility .15s ease, background-color .2s ease; transform: none; }
  .cr-totop.cr-totop.is-visible { transform: none; }
}