/* ==========================================================================
   Tool Shed child theme — header, mobile menu, footer
   Scope: ONLY the theme-owned header (.ts-header), mobile menu (.ts-mobile) and
   footer (.ts-footer). Page content is styled in Elementor; motion/interaction
   CSS for Elementor pages lives in Customizer → Additional CSS.
   Design source: "Tool Shed Website Preview v4" (Claude Design), desktop 1440.
   ========================================================================== */

/* ---- Tokens (mirrors the Elementor global colors) ---- */
:root {
  --ts-black: #000000;
  --ts-ink: #1f1f1f;
  --ts-yellow: #f9c518;
  --ts-white: #ffffff;
  --ts-gray-200: #e6e5e4;
  --ts-gray-300: #cdcccc;
  --ts-gray-400: #a8a7a6;
  --ts-gray-600: #6b6a69;
  --ts-rule-w: rgba(255, 255, 255, 0.16);
  --ts-px: clamp(16px, 4vw, 56px);                 /* page side padding */
  --ts-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ts-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);   /* expo-out: fast start, long soft landing (header fold) */
  --ts-ease-circ-in-out: cubic-bezier(0.85, 0, 0.15, 1);   /* circ in-out: slow start, decisive middle, soft landing (hero slides) */
  --ts-ease-circ-out: cubic-bezier(0, 0.55, 0.45, 1);       /* circ out: long gentle settle (hero photo zoom) */
}

/* Hello Elementor prints a header/footer wrapper; keep ours full-bleed. */
.ts-header, .ts-footer { font-family: 'Poppins', Arial, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; }  /* unitless: the Elementor kit's em line-height would inherit as 24px */
.ts-header a, .ts-footer a { text-decoration: none; }

/* Shared "label" style: 12px / 600 / 0.18em tracking / uppercase */
.ts-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ts-gray-400);
}

/* ---- Utility bar ------------------------------------------------------- */
.ts-utility {
  background: var(--ts-black); color: var(--ts-white);
  padding: 8px var(--ts-px);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 12px;
}
.ts-utility__left { display: flex; gap: 14px; align-items: center; min-width: 0; }
.ts-utility__phone {
  display: flex; align-items: center; min-height: 28px;
  color: var(--ts-white); font-weight: 600; letter-spacing: 0.08em; white-space: nowrap;
  transition: color 0.25s var(--ts-ease);
}
.ts-utility__phone:hover { color: var(--ts-yellow); }
.ts-utility__rule { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.3); flex: 0 0 auto; }
.ts-utility__social { display: flex; gap: 4px; align-items: center; padding-left: 6px; }
.ts-utility__social .ts-utility__rule { margin-right: 10px; }
.ts-utility__social a {
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--ts-white);
  transition: color 0.25s var(--ts-ease);
}
.ts-utility__social a:hover { color: var(--ts-yellow); }
.ts-utility__badge {
  display: flex; gap: 10px; align-items: center;
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ts-gray-400);
}
.ts-utility__flag { width: 15px; height: 15px; object-fit: contain; display: block; }
.ts-utility__badge-text { white-space: nowrap; padding: 4px 0; line-height: 1; }   /* no box around the badge */

/* Height of the full header (utility bar + nav) at the top of the page, at every width; the home hero is sized to the screen below it */
:root { --ts-header-h: 124px; --ts-utility-h: 44px; }   /* defaults; interactions.js re-measures both at load */

/* ---- Fixed header: it sits outside the page flow, with its full height reserved at the top of the body, so
   folding it never moves the page. At the top of the page the nav is a slim 40px bar; the logo (68px) hangs from it on
   a black panel (80px) that the bar's bottom edge halves. Once scrolled (.is-stuck, set by
   interactions.js) the header slides up by the utility bar's height while, in the same movement, the bar grows to 56px
   and the logo shrinks to 50px and its panel to 56px, so bar and panel meet and the logo sits inside the bar.
   Motion: one expo-out curve, one duration and no delays for everything that moves (the slide, the utility bar's
   fade, the logo and the bar's glass): 0.6s to unfold, 0.52s to fold. ---- */
.ts-header { position: fixed; top: 0; left: 0; right: 0; z-index: 900; transition: transform 0.6s var(--ts-ease-expo); will-change: transform; }
body { padding-top: var(--ts-header-h); }
/* The reserved strip is painted in the header's own colours (black behind the utility bar, ink behind the nav),
   so nothing white shows through while the header slides and the utility bar fades. The page canvas is black too,
   so overscrolling past the top or the footer never flashes white; the body itself stays white below the strip. */
html { background-color: var(--ts-black); }
body {
  background-color: var(--ts-white, #fff);
  background-image: linear-gradient(to bottom, var(--ts-black) var(--ts-utility-h), var(--ts-ink) var(--ts-utility-h));
  background-size: 100% var(--ts-header-h); background-repeat: no-repeat;
}
.ts-header .ts-utility { transition: opacity 0.6s var(--ts-ease-expo); }
.ts-header .ts-nav { transition: background-color 0.6s var(--ts-ease-expo), box-shadow 0.6s var(--ts-ease-expo), min-height 0.6s var(--ts-ease-expo); }
.ts-header .ts-nav__logo, .ts-header .ts-nav__logo::before { transition: height 0.6s var(--ts-ease-expo); }
.ts-header .ts-nav__logo img { transition: height 0.6s var(--ts-ease-expo), margin-top 0.6s var(--ts-ease-expo); }
.ts-header.is-stuck { transform: translateY(calc(-1 * var(--ts-utility-h))); transition-duration: 0.52s; }
.ts-header.is-stuck .ts-utility { opacity: 0; transition-duration: 0.52s; }
/* Scrolled: bar 40 → 56px, panel 80 → 56px, logo 68 → 50px (3px above and below), all on one curve so they meet together */
.ts-header.is-stuck .ts-nav__logo, .ts-header.is-stuck .ts-nav__logo::before { height: 56px; transition-duration: 0.52s; }
.ts-header.is-stuck .ts-nav__logo img { height: 50px; margin-top: 3px; transition-duration: 0.52s; }
/* Folded bar: frosted ink glass over the page and a hairline; no drop shadow */
.ts-header.is-stuck .ts-nav {
  min-height: 56px; background-color: rgba(31, 31, 31, 0.82);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
  transition-duration: 0.52s;
}
/* Logged-in editors: keep the header under the WordPress admin bar */
.admin-bar .ts-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .ts-header { top: 46px; } }
@media screen and (max-width: 600px) { .admin-bar .ts-header { top: 0; } }   /* the admin bar scrolls away on phones */
@media (prefers-reduced-motion: reduce) { .ts-header, .ts-header .ts-utility, .ts-header .ts-nav, .ts-header .ts-nav__logo, .ts-header .ts-nav__logo::before, .ts-header .ts-nav__logo img, .ts-nav__menu a::after { transition: none !important; } }
/* Keyboard focus: a yellow ring on every header and menu control (Hello removes the browser's outline) */
.ts-header a:focus-visible, .ts-header button:focus-visible, .ts-mobile a:focus-visible, .ts-mobile button:focus-visible { outline: 2px solid var(--ts-yellow); outline-offset: -2px; }
.ts-header .ts-btn--yellow:focus-visible, .ts-mobile__cta:focus-visible { outline-color: var(--ts-ink); outline-offset: -5px; }   /* on the yellow buttons */

/* ---- Main nav ---------------------------------------------------------- */
.ts-nav {
  background: var(--ts-ink); padding: 0 var(--ts-px); min-height: 40px;
  display: flex; align-items: stretch; gap: 20px;
}
/* Logo badge: 68px tall (~130px wide, so the badge text reads). Its link keeps the bar's 40px height and the image
   overflows it, placed for equal space above and below (see the image rule); 50px inside the 56px bar once stuck (above). */
.ts-nav__logo { position: relative; display: flex; align-items: flex-start; align-self: flex-start; flex-shrink: 0; width: 130px; height: 40px; overflow: visible; }   /* fixed width: the full logo's, so the panel keeps its width when the logo shrinks (the logo stays on the page margin) */
/* The badge sits on a black panel that starts at the left edge of the page (back over the bar's side padding) and
   ends in one canted edge, slanting back 26px from top to bottom. It reaches past the utility bar's phone and social
   links (--ts-logo-panel-ext, set by interactions.js; 36px past the logo before the script runs). Same black as the utility
   bar above, so the strip flows down into it. 80px tall at the top of the page: twice the bar, so the bar's bottom edge
   halves it; 56px, the grown bar's height, once stuck. */
.ts-nav__logo::before {
  content: ""; position: absolute; top: 0; left: calc(-1 * var(--ts-px)); right: calc(-1 * var(--ts-logo-panel-ext, 36px)); height: 80px;
  background: var(--ts-black); clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%);
  pointer-events: none;
}
.ts-nav__logo img { position: relative; height: 68px; width: auto; display: block; margin-top: -1px; }   /* relative: drawn over the panel. -1px: the same ~14px of black above the logo (from the social icons' bottom, 29.5px into the 44px utility bar) as below it (to the 80px panel's bottom) */
.ts-nav__links { display: flex; flex: 1 1 0; align-self: stretch; align-items: center; justify-content: flex-end; min-width: 0; }
.ts-nav__menu { list-style: none; margin: 0; padding: 0; display: flex; align-self: stretch; align-items: stretch; }
.ts-nav__menu li { display: flex; }
.ts-nav__menu a {
  position: relative; display: flex; align-items: center; padding: 0 clamp(6px, 0.6vw, 16px); min-height: 40px;   /* the bar's full height, so the underline sits on its bottom edge; tighter than the design so 13px links fit beside the 130px logo */
  font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  color: var(--ts-gray-300); transition: color 0.25s var(--ts-ease);
}
.ts-nav__menu a:hover { color: var(--ts-white); }
/* Underline on the bar's bottom edge, under the text only: drawn in from the left on hover (the header's expo curve),
   always shown for the current page (white text + yellow rule) */
.ts-nav__menu a::after {
  content: ""; position: absolute; left: clamp(6px, 0.6vw, 16px); right: clamp(6px, 0.6vw, 16px); bottom: 0; height: 2px;
  background: var(--ts-yellow); transform: scaleX(0); transform-origin: left center; transition: transform 0.5s var(--ts-ease-expo);
}
.ts-nav__menu a:hover::after,
.ts-nav__menu .current-menu-item > a::after,
.ts-nav__menu .current_page_item > a::after { transform: scaleX(1); }
.ts-nav__menu .current-menu-item > a,
.ts-nav__menu .current_page_item > a { color: var(--ts-white); }
/* "Home" is mobile-only in the design */
.ts-nav__menu .menu-item-home { display: none; }
.ts-nav__cta { display: flex; align-items: stretch; align-self: stretch; margin-left: auto; }   /* the button fills the bar's height, as in the design */
.ts-btn--yellow {
  display: flex; align-items: center; min-height: 40px; box-sizing: border-box;
  background: var(--ts-yellow); color: var(--ts-ink); padding: 0 26px; gap: 12px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  transition: background 0.25s var(--ts-ease);
}
.ts-btn--yellow svg { flex: 0 0 auto; transition: transform 0.3s var(--ts-ease); }
.ts-btn--yellow:hover svg { transform: translateX(4px); }
.ts-btn--yellow:hover { background: var(--ts-white); color: var(--ts-ink); }
.ts-nav__burger {
  position: relative; display: none; align-items: center; justify-content: center; width: 56px; height: auto; align-self: stretch;   /* full height, like the button beside it */
  margin: 0 -17px 0 -4px;   /* the icon's lines end on the page's padding line */ background: transparent; border: 0; border-radius: 0; padding: 0;   /* the icon's right edge lines up with the page padding */
  color: var(--ts-white); cursor: pointer; flex: 0 0 auto; transition: color 0.25s var(--ts-ease);
}
.ts-nav__burger:hover, .ts-nav__burger:focus { border: 0; background: transparent; color: var(--ts-yellow); }  /* also overrides Hello's pink button focus/hover */
/* Burger and close icons: 28px with 2px lines (were 22px / 1.5px, too small on phones). The 40px bar is shorter than a
   comfortable tap target, so the button's tap area reaches 8px above and below it (invisible). */
.ts-nav__burger svg, .ts-mobile__close svg { width: 28px; height: 28px; stroke-width: 2; }
.ts-nav__burger::after { content: ""; position: absolute; inset: -8px 0; }

/* ---- Mobile menu (fixed, full screen) ----------------------------------- */
.ts-mobile {
  position: fixed; inset: 0; z-index: 1000; background: var(--ts-black); color: var(--ts-white);
  display: flex; flex-direction: column; overflow: hidden;   /* the panel never scrolls: the link list does, if it must (below), so the button stays in view */
}
.ts-mobile[hidden] { display: none; }
/* Opening and closing (header-footer.js toggles .is-open): understated. The panel fades in over 0.35s; its rows (phones,
   each link, the yellow button) rise 14px and fade in on the header's expo curve, 45ms apart (--d, set by the script).
   Closing is quicker and all at once (0.24s), so it never holds the visitor up. */
.ts-mobile { opacity: 0; transition: opacity 0.24s ease-out; }
.ts-mobile.is-open { opacity: 1; transition: opacity 0.35s var(--ts-ease-expo); }
.ts-mobile__phones, .ts-mobile__menu > li, .ts-mobile__cta { opacity: 0; transform: translateY(14px); transition: opacity 0.2s ease-out, transform 0.2s ease-out; }
.ts-mobile.is-open :is(.ts-mobile__phones, .ts-mobile__menu > li, .ts-mobile__cta) {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--ts-ease-expo), transform 0.8s var(--ts-ease-expo);
  transition-delay: calc(var(--d, 0) * 1ms);
}
@media (prefers-reduced-motion: reduce) { .ts-mobile, .ts-mobile.is-open, .ts-mobile :is(.ts-mobile__phones, .ts-mobile__menu > li, .ts-mobile__cta) { transition: none !important; } }
/* The menu's logo and close button sit exactly where the header's logo and burger are (measured by header-footer.js on
   opening: --logo-*, --btn-*), so they stay put while the panel fades in and out; the top row is as tall as needed. */
.ts-mobile.is-placed .ts-mobile__top { position: relative; height: var(--top-h); min-height: 0; padding: 0; }
.ts-mobile.is-placed .ts-mobile__logo { position: absolute; left: var(--logo-x); top: var(--logo-y); }
.ts-mobile.is-placed .ts-mobile__logo img { height: var(--logo-h); }
.ts-mobile.is-placed .ts-mobile__close { position: absolute; left: var(--btn-x); top: var(--btn-y); width: var(--btn-w); height: var(--btn-h); margin: 0; }
.ts-mobile__top {
  display: flex; justify-content: space-between; align-items: stretch; gap: 16px; min-height: 64px;
  padding: 0 var(--ts-px); border-bottom: 1px solid rgba(255, 255, 255, 0.2); flex: 0 0 auto;
}
.ts-mobile__logo { display: flex; align-items: center; }
.ts-mobile__logo img { height: 52px; width: auto; display: block; }
.ts-mobile__close {   /* same square as the burger it replaces */
  position: relative; display: flex; align-items: center; justify-content: center; width: 56px; margin-right: -17px;
  background: transparent; border: 0; border-radius: 0; padding: 0; color: var(--ts-white); cursor: pointer; transition: color 0.25s var(--ts-ease);
}
.ts-mobile__close:hover, .ts-mobile__close:focus { border: 0; background: transparent; color: var(--ts-yellow); }
.ts-mobile__phones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid rgba(255, 255, 255, 0.2); flex: 0 0 auto; }
.ts-mobile__phones a {
  display: flex; align-items: center; min-height: 56px; padding: 0 var(--ts-px);
  font-size: 16px; font-weight: 600; letter-spacing: 0.02em; color: var(--ts-white); white-space: nowrap;
}
.ts-mobile__phones a:first-child { border-right: 1px solid rgba(255, 255, 255, 0.2); }
.ts-mobile__phones--single { grid-template-columns: minmax(0, 1fr); }
.ts-mobile__phones--single a:first-child { border-right: 0; }
.ts-mobile__phones a:hover { color: var(--ts-yellow); }
.ts-mobile__nav { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--ts-px) 16px; }   /* takes the room left between the phones and the button; scrolls only on very short screens */
.ts-mobile__menu { list-style: none; margin: 0; padding: 0; }
.ts-mobile__menu a {
  display: block; padding: clamp(7px, 1.4dvh, 12px) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  /* sized to the screen's height as well as its width, so the eight links (one wraps) fit between the top rows and the
     button without scrolling on most phones: ~9 lines share what is left of the height after ~500px of rows and spacing */
  font-size: clamp(20px, min(8.5vw, calc((100dvh - 500px) / 9.45)), 36px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; color: var(--ts-white);
}
.ts-mobile__menu a:hover { color: var(--ts-yellow); }
.ts-mobile__menu .current-menu-item > a, .ts-mobile__menu .current_page_item > a { color: var(--ts-yellow); }
.ts-mobile__cta {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: var(--ts-yellow); color: var(--ts-ink); padding: 26px var(--ts-px);
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; flex: 0 0 auto;
}
body.ts-menu-open { overflow: hidden; }

/* Header breakpoints: burger below 1366 (the design said 980, but 13px links, the 130px logo and "Marketing & Promotions" need the room), 560 = compact */
/* 1366–1439px, the narrowest widths with the full menu: tighter links, for more room between the logo panel and the menu */
@media (min-width: 1366px) and (max-width: 1439px) {
  .ts-nav__menu a { padding: 0 6px; }
  .ts-nav__menu a::after { left: 6px; right: 6px; }
}
@media (max-width: 1365px) {
  .ts-nav__links { display: none; }
  .ts-nav__burger { display: flex; }
}
@media (max-width: 560px) {
  .ts-utility__social { display: none; }
  .ts-nav__cta { display: none; }
  .ts-nav__burger { margin-left: auto; }
}

/* ---- Footer ------------------------------------------------------------ */
.ts-footer {
  background: var(--ts-ink); width: 100%; color: var(--ts-gray-300);
  padding: clamp(32px, 4vw, 56px) var(--ts-px) 0;   /* was clamp(56px, 8vw, 128px): the pre-footer above already carries its own 50px blueprint margin */
}
.ts-footer__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(48px, 6vw, 72px) clamp(32px, 4vw, 72px);
}
.ts-footer__col { display: flex; flex-direction: column; gap: 40px; padding-bottom: clamp(40px, 4vw, 64px); }
.ts-footer__col--brand { grid-column: span 3; }
.ts-footer__col--contact { grid-column: span 4; }
.ts-footer__col--map { grid-column: span 5; gap: 18px; align-items: flex-start; padding-bottom: 0; }
.ts-footer__block { display: flex; flex-direction: column; gap: 18px; }
/* Locations: the label heads its group (18px, like every other footer label), the locations sit 28px apart,
   and the group stands 48px clear of the phone block above */
.ts-footer__block--locations { gap: 28px; }
.ts-footer__block--locations > .ts-label { margin-bottom: -10px; }
.ts-footer__col--contact > .ts-footer__block--locations { margin-top: 8px; }
.ts-footer__logo { display: flex; align-self: flex-start; }
.ts-footer__logo img { height: 88px; width: auto; display: block; }
.ts-footer__tagline { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ts-gray-300); max-width: 26ch; }
.ts-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ts-footer__menu li { font-size: 13px; line-height: 1.5; }
.ts-footer__menu a { color: var(--ts-white); font-size: 13px; font-weight: 600; transition: color 0.25s var(--ts-ease); }
.ts-footer__menu a:hover { color: var(--ts-yellow); }
.ts-footer__social { display: flex; gap: 8px; }
.ts-footer__social a {
  width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.22); color: var(--ts-gray-300);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s var(--ts-ease), border-color 0.25s var(--ts-ease), color 0.25s var(--ts-ease);
}
.ts-footer__social a:hover { background: var(--ts-yellow); border-color: var(--ts-yellow); color: var(--ts-ink); }
.ts-footer__phone {
  font-size: 18px; font-weight: 600; color: var(--ts-white);
  text-decoration: underline; text-decoration-color: var(--ts-gray-600); text-underline-offset: 4px;
  transition: color 0.25s var(--ts-ease), text-decoration-color 0.25s var(--ts-ease);
}
.ts-footer__phone:hover { color: var(--ts-yellow); text-decoration-color: var(--ts-yellow); }
.ts-footer__location { display: flex; flex-direction: column; gap: 6px; }
.ts-footer__location-title { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ts-white); }
.ts-footer__location p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ts-gray-300); }
/* Links inside the location lines (phone, "contact Sales"): white with a soft underline, yellow on hover — overrides Hello's pink link default */
.ts-footer__location p a { color: var(--ts-white); text-decoration: underline; text-decoration-color: var(--ts-gray-600); text-underline-offset: 4px; transition: color 0.25s var(--ts-ease), text-decoration-color 0.25s var(--ts-ease); }
.ts-footer__location p a:hover { color: var(--ts-yellow); text-decoration-color: var(--ts-yellow); }
.ts-footer__map-title { margin: 0; font-weight: 700; letter-spacing: -0.02em; font-size: 18px; line-height: 1.15; color: var(--ts-white); max-width: 24ch; }
.ts-footer__map { position: relative; width: 100%; max-width: 760px; margin-top: auto; align-self: flex-end; }   /* fills the column; right edge on the footer's inner padding; 760px cap keeps it about as tall as the other columns on very wide screens */
.ts-footer__map img { display: block; width: 100%; height: auto; filter: grayscale(1) brightness(0.55); }
/* Second copy of the map, full colour, revealed through a radial mask that grows out of Halifax (90.6% 74.5% of the map) once Halifax
   scrolls into view (JS animates --ts-map-r; the centre is repeated as HFX_Y in header-footer.js). */
.ts-footer__map .ts-footer__map-fill {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: none;
  -webkit-mask-image: radial-gradient(circle at 90.6% 74.5%, #000 0%, #000 var(--ts-map-r, 0%), transparent calc(var(--ts-map-r, 0%) + 10%));
  mask-image: radial-gradient(circle at 90.6% 74.5%, #000 0%, #000 var(--ts-map-r, 0%), transparent calc(var(--ts-map-r, 0%) + 10%));
}
.ts-footer__bar {
  margin: 0 calc(-1 * var(--ts-px)); background: var(--ts-black); padding: 20px var(--ts-px);
  font-size: 12px; color: var(--ts-gray-300); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.ts-footer__bar a { color: var(--ts-gray-300); }
.ts-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }   /* Privacy Policy and Terms & Conditions side by side */
.ts-footer__bar a:hover { color: var(--ts-yellow); }

/* Footer reveal: columns rise in as they enter the viewport (JS adds .is-in). */
[data-ts-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ts-ease), transform 0.9s var(--ts-ease); }
[data-ts-reveal].is-in { opacity: 1; transform: none; }
.ts-footer__col:nth-child(2) { transition-delay: 120ms; }
.ts-footer__col:nth-child(3) { transition-delay: 240ms; }

@media (max-width: 1000px) {
  .ts-footer__col--brand, .ts-footer__col--contact { grid-column: span 6; }
  .ts-footer__col--map { grid-column: span 12; }
}
@media (max-width: 560px) {
  .ts-footer__grid { grid-template-columns: minmax(0, 1fr); }   /* 11 gaps of 32px were wider than a phone, pushing every column 9px past the padding */
  .ts-footer__col { grid-column: 1 / -1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  [data-ts-reveal] { opacity: 1; transform: none; transition: none; }
  .ts-footer__map .ts-footer__map-fill { --ts-map-r: 165%; }
}