/* The salience.co.uk site chrome (site-chrome.js), from Dawnbreaker's components/site/*.css and SiteFooter.tsx,
   copied unchanged (guide: ~/Downloads/salience-site-header-footer.md, 2 Nov 2026). Sections, in order: the
   variables (the guide's section 2.4), site-header.css, dropdown.css, contact-popup.css, the footer's hovers. */

:root {
  --sal-chrome-top: 60px;
  --sal-header-h: 106px;
  --sal-chrome-shadow: 0 2px 8px rgba(22, 40, 64, 0.125);
  --sal-hover-pill: #f5f5f5;
  --sal-banner-pink: #ff9ad6;
}
@media (min-width: 601px) { :root { --sal-header-h: 108px; } }
@media (min-width: 1024px) { :root { --sal-chrome-top: 69px; } }

/* ==== site-header.css ==== */
/* The header logo, with the live rules (docs/reference/salience-co-uk-2026-10-30/header-rules.css,
   `header.global-header a.home ...`), scoped to the site header. The text paths take the link's colour:
   navy, or white over a dark ground. On hover the mint copy of the // mark slides out from under the pink
   one and the full stop turns pink. */

[data-site-chrome] a[data-part="logo"] svg {
  display: block;
  width: 100%;
  height: auto;
}
[data-site-chrome] a[data-part="logo"] .dot {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-site-chrome] a[data-part="logo"] .text path {
  fill: currentColor;
}
[data-site-chrome] a[data-part="logo"] .accent-green {
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  [data-site-chrome] a[data-part="logo"]:hover .accent-green {
    opacity: 1;
    transform: translate(4px, 8px);
  }
  [data-site-chrome] a[data-part="logo"]:hover .dot path {
    fill: #e84393;
  }
}

/* With reduced motion the menu pill and Get in Touch jump to their place when the page scrolls, and the
   light pill jumps from item to item. The app's own reduced-motion rule (globals.css) only shortens every
   transition to 0.001ms, and this rule is more specific, so it wins. */
@media (prefers-reduced-motion: reduce) {
  [data-site-chrome] [data-part="menu"],
  [data-site-chrome] [data-part="contact-wrap"],
  [data-site-chrome] [data-part="hover"] {
    transition: none !important;
  }
}

/* ==== dropdown.css ==== */
/* The site menu's dropdown panel opening and closing (spec section 3.4). On salience.co.uk the panel
   grows from its centre on a spring from nothing, past full size, and settles, fading in as it grows; it
   fades out at full size to close. Measured there: about 107% at 206ms, full size at about 320ms. */

@keyframes sal-dropdown-open {
  0% {
    transform: scale(0);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }
  65% {
    transform: scale(1.07);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* The live close: opacity to 0 over framer-motion's default 0.3s tween, then hidden. */
@keyframes sal-dropdown-close {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Never opened yet: hidden at once, with no close to play. */
.sal-dropdown[data-state="idle"] {
  visibility: hidden;
  opacity: 0;
  transform: scale(0);
}
.sal-dropdown[data-state="open"] {
  animation: sal-dropdown-open 320ms both;
}
.sal-dropdown[data-state="closed"] {
  animation: sal-dropdown-close 300ms cubic-bezier(0.25, 0.1, 0.35, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .sal-dropdown[data-state="open"] {
    animation: none;
  }
  .sal-dropdown[data-state="closed"] {
    animation: none;
    visibility: hidden;
  }
}

/* ==== contact-popup.css ==== */
/* The salience.co.uk contact pop-up, copied from the live site on 2026-10-30 (spec section 5).
   Sources, in docs/reference/salience-co-uk-2026-10-30/: contact-popup-rules.css (the pop-up's own
   rules) and ticker.css, as they are. The live page also gives the pop-up some values from its
   global CSS (body, h2, .h6, .small, .inner, .btn, button, swiper, the variables). Those rules and
   their breakpoints are in global-rules-popup.css in the same folder; the sizes at 1440px match
   contact-popup-styles-1440.json. Every rule is scoped under
   section.modal-contact, so nothing reaches the rest of the app. The live CSS names the font
   "tthoves"; this app's name for it is "TT Hoves Pro". */

/* ---- Frame ---- */

section.modal-contact {
  /* The live :root values the pop-up uses. */
  --black: #162840;
  --white: #fff;
  --pink: #e84393;
  --green: #00e9a6;
  --gap-small: 25px;
  --gap-medium: 50px;
  --gap-large: 100px;
  --font-tiny: 14px;
  --font-small: 16px;
  --font-body: 18px;
  --font-large: 20px;
  --font-lead: 35px;
  --font-h2: 90px;
  --font-h3: 60px;
  --font-h4: 45px;
  --font-h6: 24px;
  --term-h: 54px;

  /* Not a live value. It sits above the cookie banner (90), the fixed site chrome (100), the dashboard's
     drawers and toast (109 and 110), its Overview layers (up to 200), the platform loader (300) and the
     /loader-tune controls (400). Only the custom cursor (CustomCursor.tsx, 9999) sits above it, so the
     cursor still shows over the pop-up. */
  z-index: 1000;
  background: var(--black);
  width: 100vw;
  height: 100vh;
  color: var(--white);
  flex-direction: column;
  padding: 0 0 60px;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
  /* Not in the live CSS: keeps a wheel at either end of the pop-up from scrolling the page. */
  overscroll-behavior: contain;
  font-family: "TT Hoves Pro", sans-serif;
  font-size: var(--font-body);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.02em;
  text-align: left;
  /* Slides up from the bottom of the screen; closing removes it at once. */
  animation: sal-modal-contact-in 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sal-modal-contact-in {
  from { transform: translateY(100%); }
  to { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  section.modal-contact { animation: none; }
}
@media (max-width: 1000px) {
  section.modal-contact { padding-bottom: 40px; }
}
@media (max-width: 800px) {
  section.modal-contact { --gap-small: 15px; }
}
@media (max-width: 600px) {
  section.modal-contact { padding-bottom: 30px; font-size: var(--font-small); }
}

section.modal-contact .inner { max-width: 1376px; margin: 0 auto; padding: 0 30px; }
@media (max-width: 600px) {
  section.modal-contact .inner { padding: 0 20px; }
}
section.modal-contact a { color: var(--pink); }

/* ---- Header: logo and close button ---- */

section.modal-contact header.modal-header { margin-bottom: var(--gap-small); background: var(--black); z-index: 10; justify-content: space-between; align-items: center; gap: 30px; padding: 30px; display: flex; position: sticky; top: 0; left: 0; }
@media (max-width: 600px) {
  section.modal-contact header.modal-header { padding: 30px 20px; }
}
section.modal-contact header.modal-header .logo { width: 200px; }
@media (max-width: 600px) {
  section.modal-contact header.modal-header .logo { width: 152px; }
}
section.modal-contact header.modal-header .logo svg { display: block; width: 100%; height: auto; }
section.modal-contact header.modal-header .logo svg g.text path { fill: var(--white); }
section.modal-contact header.modal-header button.close { border: 2px solid var(--white); border-radius: 100%; justify-content: center; align-items: center; width: 50px; height: 50px; padding: 0; background: transparent; cursor: pointer; font-size: var(--font-body); transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1); display: flex; }
section.modal-contact header.modal-header button.close svg { fill: var(--white); }
@media (hover: hover) {
  section.modal-contact header.modal-header button.close:hover { background: var(--pink); }
}

/* ---- Two columns ---- */

section.modal-contact .wrapper { gap: 0 var(--gap-large); grid-template-columns: 1fr 400px; display: grid; }
@media (max-width: 1000px) {
  section.modal-contact .wrapper { grid-template-columns: 1fr; }
}

/* ---- Ticker: "Human-First" and a pink word, one row at a time (ticker.css + swiper) ---- */

section.modal-contact .ticker { font-size: var(--font-lead); gap: 0.2em; display: inline-flex; }
@media (max-width: 500px) {
  section.modal-contact .ticker { font-size: var(--font-large); }
  section.modal-contact { --term-h: 35px; }
}
section.modal-contact .ticker .swiper.terms { color: var(--pink); height: var(--term-h); margin: 0 auto; padding: 0; display: block; position: relative; overflow: hidden; }
section.modal-contact .ticker .swiper-wrapper { width: 100%; height: 100%; box-sizing: content-box; flex-direction: column; display: flex; position: relative; transition-property: transform; transition-timing-function: ease; }
section.modal-contact .ticker .swiper-slide { flex-shrink: 0; width: 100%; height: var(--term-h); display: block; position: relative; }

/* ---- Left column: heading, copy, button, phone and email ---- */

section.modal-contact .content h2 { margin: 0 0 0.2em; font-size: var(--font-h2); font-weight: 500; line-height: 1.083; }
@media (max-width: 1200px) {
  section.modal-contact .content h2 { font-size: var(--font-h3); }
}
@media (max-width: 900px) {
  section.modal-contact .content h2 { font-size: var(--font-h4); }
}
section.modal-contact .content p { margin: 1em 0; }
section.modal-contact .content .small { font-size: var(--font-small); line-height: 1.18; }
section.modal-contact .h6 { font-size: var(--font-h6); line-height: 1.41; }
@media (max-width: 900px) {
  section.modal-contact .h6 { font-size: var(--font-large); }
}

section.modal-contact main.modal-main em { color: var(--pink); font-style: normal; }
section.modal-contact main.modal-main .btns,
section.modal-contact main.modal-main .links { flex-wrap: wrap; gap: 1em; margin: 2em 0; display: flex; }

section.modal-contact .btn { font-size: var(--font-small); cursor: pointer; touch-action: manipulation; white-space: nowrap; text-overflow: ellipsis; border: 0; border-radius: 2em; margin: 0.5em 0; padding: 0.8em 1.5em; font-weight: 500; text-decoration: none; transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1); display: inline-flex; overflow: hidden; }
section.modal-contact .btn-solid { background: var(--black); color: var(--white); }
section.modal-contact .btn-solid.btn-pink { background: var(--pink); border-color: var(--pink); color: var(--white); }
@media (hover: hover) {
  section.modal-contact .btn-solid.btn-pink:hover { background: var(--green); }
}
section.modal-contact .btn-extralarge { font-size: var(--font-large); border-radius: 50px; padding: 1em 2.4em; }
section.modal-contact main.modal-main .btns .btn { margin: 0; }
@media (max-width: 600px) {
  section.modal-contact main.modal-main .btns .btn { justify-content: center; width: 100%; }
}
section.modal-contact main.modal-main .btns .btn-solid { border: 1px solid var(--white); }

section.modal-contact main.modal-main .links { align-items: center; display: flex; }
section.modal-contact main.modal-main .links a { color: var(--white); text-decoration: none; transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover) {
  section.modal-contact main.modal-main .links a:hover { color: var(--green); }
}
section.modal-contact main.modal-main .links a.phone { align-items: center; gap: 0.5em; display: inline-flex; }
section.modal-contact main.modal-main .links a.phone::before { content: ""; background: var(--green); border-radius: 100%; width: 10px; height: 10px; display: block; }

/* ---- Right column: booking card and "We're Hiring" ---- */

section.modal-contact aside.modal-aside { margin-top: var(--gap-medium); }
@media (max-width: 1000px) {
  section.modal-contact aside.modal-aside { margin-top: 0; }
}
section.modal-contact aside.modal-aside .aside-wrapper { flex-direction: column; display: flex; }
section.modal-contact aside.modal-aside .hiring { text-align: center; margin-top: 1em; }
section.modal-contact aside.modal-aside .hiring a { text-decoration: underline; transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover) {
  section.modal-contact aside.modal-aside .hiring a:hover { color: var(--green); }
}

/* ---- Footer ---- */

section.modal-contact footer.modal-footer { margin-top: auto; margin-bottom: var(--gap-large); padding-top: var(--gap-medium); font-size: var(--font-tiny); }
section.modal-contact footer.modal-footer .footer-wrapper { flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1em; display: flex; }
@media (max-width: 600px) {
  section.modal-contact footer.modal-footer .footer-wrapper { text-align: center; justify-content: center; }
}
section.modal-contact footer.modal-footer .copyright { opacity: 0.5; }
section.modal-contact footer.modal-footer .footer-links { flex-wrap: nowrap; gap: 1em; display: flex; }
section.modal-contact footer.modal-footer a { color: var(--white); white-space: nowrap; opacity: 0.5; text-decoration: underline; transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover) {
  section.modal-contact footer.modal-footer a:hover { opacity: 1; }
}

/* ==== SiteFooter.tsx's own <style> block ==== */
.careers-pill:hover { background-color: #00E9A6 !important; }
.btn-biglink { box-shadow: inset 0 -2px 0 #fff; transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.btn-biglink:hover { box-shadow: inset 0 -8px 0 #00E9A6 !important; }
.book-call:hover { color: #E84393 !important; }
.linkedin-row:hover { color: #E84393 !important; }
.back-to-top:hover { color: #00E9A6 !important; }

/* TT Hoves Pro turns "No." into the numero sign (№) through contextual alternates (Jimmy, 3 Nov 2026: "No. You answer..." in the FAQ). Off everywhere. */
html { font-variant-ligatures: no-contextual; }