/* The Gallery AI settings for the shared interaction kit (fx-kit.css, vendored from thomas-tamine-site).
   Brand values come from the tokens in refinement.css; no literal colours here.
   html:root outranks the kit's own :root defaults whichever file loads last. */
html:root{
  --fx-accent:var(--brand-burgundy);
  --fx-on-accent:var(--brand-white);
  --fx-marker:var(--brand-citron);
}

/* Direction-aware hover (A4): the menu's main links and the services starting points. */
.immersive-menu-primary[data-fx="dir-list"]>a{margin-inline:-.2em;padding-inline:.2em}
.immersive-menu-primary[data-fx="dir-list"]>a.is-active,.immersive-menu-primary[data-fx="dir-list"]>a.is-active .menu-link-note{color:var(--fx-on-accent)}
.service-route-options[data-fx="dir-list"]>a.is-active,.service-route-options[data-fx="dir-list"]>a.is-active :is(strong,span){color:var(--fx-on-accent)}
.service-route-options[data-fx="dir-list"]>a.is-active .route-marker{background:var(--fx-on-accent)}

/* Visually hidden text for assistive tech. */
.fx-sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Cycling tools wall (A6): text wordmarks in the display face, no logos. */
.tools-wall-block{margin-top:clamp(56px,7vw,96px)}
.tools-wall-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 18px}
.tools-wall{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid color-mix(in srgb,currentColor 25%,transparent);border-left:1px solid color-mix(in srgb,currentColor 25%,transparent)}
.tools-wall>li{min-height:104px;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 12px;border-right:1px solid color-mix(in srgb,currentColor 25%,transparent);border-bottom:1px solid color-mix(in srgb,currentColor 25%,transparent);font:500 clamp(17px,1.6vw,23px)/1.15 Aventa,Arial,sans-serif;letter-spacing:-.03em}
.tools-wall .fx-wall-item{padding:0 12px}
/* With script running, only the first six show, so the wall doesn't shrink once the kit takes over. */
html[data-theme] .tools-wall:not(.fx-on)>li:nth-child(n+7){display:none}
@media(max-width:700px){.tools-wall{grid-template-columns:repeat(3,minmax(0,1fr))}.tools-wall>li{min-height:84px;font-size:16px}}

/* Footer revealed underneath (A7). The page keeps its scroll colour: main takes the
   body's current ground. The reveal only runs where the footer fits the screen;
   phones, tablets and short windows get the normal footer. */
main.fx-reveal-body{background:inherit}
.footer-closing{display:flex;align-items:baseline;justify-content:space-between;gap:24px;color:inherit;text-decoration:none;font:500 clamp(48px,6vw,96px)/1 Aventa,Arial,sans-serif;letter-spacing:-.055em;padding:0 0 clamp(24px,2.4vw,36px);margin:0 0 clamp(32px,3.4vw,48px);border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.footer-closing span{font-size:.62em;transition:transform .35s var(--fx-ease)}
.footer-closing:hover span,.footer-closing:focus-visible span{transform:translate(.08em,-.08em)}
@media (max-width:1100px),(max-height:849px){.fx-reveal-foot{position:static}}
@media (prefers-reduced-motion:reduce){.footer-closing span{transition:none}}

/* Start where it helps as autoplaying tabs (A9). With no script the tab row is
   hidden and all three options show in order; html[data-theme] is set by the
   head script, so it only exists when script runs. */
.offer-tabs{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,1.7fr);gap:clamp(32px,6vw,110px);align-items:start;margin-bottom:48px}
.offer-tablist{display:grid;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
html:not([data-theme]) .offer-tablist{display:none}
html:not([data-theme]) .offer-tabs{grid-template-columns:1fr}
.gallery-editorial .offer-tabs [role="tab"]{appearance:none;background:none;border:0;border-radius:0;box-shadow:none;color:inherit;text-align:left;font:500 15px/1.4 Inter,Arial,sans-serif;padding:24px 0 22px;min-height:48px;opacity:.78;transition:opacity .2s}
.gallery-editorial .offer-tabs [role="tab"]:hover,.gallery-editorial .offer-tabs [role="tab"][aria-selected="true"]{opacity:1}
.offer-tabs .fx-tab-bar{height:1px}
.offer-tabs [aria-selected="true"] .fx-tab-bar{height:2px}
.offer-panels{min-height:230px}
.offer-panel{display:grid;align-content:start;gap:18px}
.offer-panel-step{font-size:12px}
html[data-theme] .offer-panel-step{display:none}
.offer-panel h3{font:500 clamp(36px,4.2vw,62px)/1.06 Aventa,Arial,sans-serif;letter-spacing:-.045em;margin:0}
.offer-panel h3 a{color:inherit;text-decoration:none}
.offer-panel h3 b{font-weight:400;font-size:.6em;display:inline-block;transition:transform .35s var(--fx-ease)}
.offer-panel h3 a:hover b,.offer-panel h3 a:focus-visible b{transform:translate(.08em,-.08em)}
.offer-panel p{font-size:17px;line-height:1.6;max-width:34ch;margin:0}
html:not([data-theme]) .offer-panels{display:grid;gap:40px}
@media(max-width:700px){
  .offer-tabs{grid-template-columns:1fr;gap:28px;margin-bottom:24px}
  .offer-tablist{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-top:0}
  .gallery-editorial .offer-tabs [role="tab"]{font-size:12.5px;padding:10px 0 14px;align-self:stretch}
  .offer-panels{min-height:150px}
  .offer-panel h3{font-size:34px}
  .offer-panel p{font-size:16px}
}

/* Copy the contact email (A10). Hidden when script is off, as it couldn't work. */
html:not([data-theme]) .email-copy{display:none}
.editorial .email-copy{appearance:none;background:none;border:0;border-bottom:1px solid currentColor;border-radius:0;box-shadow:none;color:inherit;font:500 13px/1.4 Inter,Arial,sans-serif;padding:2px 0;margin-top:14px;min-height:0;cursor:pointer}