/* ===== Botikang Pinoy, Inc. — brand tokens ===== */
:root{
  --magenta:#b02074;
  --magenta-dark:#8d1a5d;
  --yellow:#e6cc00;
  --ink:#2a2a2a;
  --muted:#7a7a7a;
  --faint:#9a9298;
  --tint:#faf6f8;
  --hairline:#eaeaea;
  --line:#d0cbce;
  --footer-text:#f5d6e6;
  --placeholder:#f0eef0;
  --white:#fff;
  --divider:#c65aa0;
  --chip-year:#7d6e00;
  --maxw:1200px;
  --radius:10px;
  --shadow:0 2px 10px rgba(0,0,0,.06);
  /* added with the alt header */
  --magenta-050:#fdf2f8;
  --surface-3:#f4eff6;
  --radius-pill:999px;
  --header-h:76px;
  --touch:44px;
  --enter:.34s;
  --exit:.22s;
  font-family:'Inter',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--white);font-size:14px;line-height:1.55;font-family:'Inter',Helvetica,Arial,sans-serif}
img{max-width:100%;display:block}
a{color:var(--magenta);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ===== Header =====
   Adopted from the alternate design: translucent and blurred rather than
   solid white, pill-shaped nav items with a tinted active state in place of
   the yellow underline, and a persistent call to action. Written against
   this site's own tokens so the rest of the stylesheet is untouched. */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--hairline);
  transition:box-shadow var(--mid),background var(--mid);
}
.site-header.scrolled{box-shadow:0 2px 14px rgba(0,0,0,.08);background:rgba(255,255,255,.94)}
.header-inner{display:flex;align-items:center;gap:24px;height:var(--header-h)}
.logo{flex:0 0 auto;display:flex;align-items:center;min-height:var(--touch)}
/* the file is now pure artwork with no built-in padding, so these heights
   are the real rendered size (the old file wasted 47% of its height) */
.logo img{height:28px;width:auto}

.main-nav{margin-left:auto}
.main-nav ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.main-nav a:not(.btn){
  display:block;padding:8px 16px;border-radius:var(--radius-pill);
  color:var(--ink);font-size:15px;font-weight:500;
  transition:background var(--fast),color var(--fast);
}
.main-nav a:hover{text-decoration:none}
/* no font-weight change: bold text is wider, so it would shift the row */
.main-nav a.active{background:var(--magenta-050);color:var(--magenta)}

/* The call to action changes per page ("Find a branch" 156px, "Email your
   CV" 136px, "Contact us" 114px). In a flex row that 42px swing dragged the
   whole nav with it on every route change. Reserving the widest width keeps
   the nav anchored, so only the pill moves. */
.header-cta{flex:0 0 auto;min-width:164px;display:flex;justify-content:flex-end}
/* the in-sheet CTA is mobile-only; the header one covers desktop */
.nav-cta{display:none}

/* bare bars, as the original design had them — no box */
.nav-toggle{display:none;margin-left:auto;background:none;border:0;padding:0;cursor:pointer}
/* gap, not margins: inside a grid container vertical margins do not
   collapse, which is what made the bars block 36px tall */
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:var(--fast)}

/* small button, used by the header CTA */
.btn.sm{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;font-size:14px;min-height:var(--touch);white-space:nowrap;
}
.btn.sm svg{width:16px;height:16px;flex:0 0 auto}


/* ===== Header: mobile nav sheet =====
   Breakpoint is 768px (was 640px) to match the alternate design, since the
   header now carries a call to action as well as four nav items. */
@media(max-width:768px){
  :root{--header-h:64px}
  .header-inner{height:64px;gap:12px}
  .logo img{height:24px}
  .header-cta{display:none}            /* the CTA moves into the sheet */

  .nav-toggle{display:grid;place-items:center;align-content:center;gap:5px;width:var(--touch);height:var(--touch)}
  .main-nav{
    position:absolute;left:0;right:0;top:var(--header-h);
    background:#fff;border-bottom:1px solid var(--hairline);
    box-shadow:0 12px 28px rgba(0,0,0,.12);
    padding:8px max(20px,env(safe-area-inset-left)) 20px;
    /* animated open/close rather than a display snap */
    display:block;visibility:hidden;opacity:0;
    transform:translateY(-8px);
    transition:opacity var(--exit) ease,transform var(--exit) var(--ease),visibility var(--exit);
    max-height:calc(100dvh - var(--header-h));overflow-y:auto;
  }
  .main-nav.open{visibility:visible;opacity:1;transform:none;transition-duration:var(--enter)}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .main-nav li + li{border-top:1px solid var(--hairline)}
  .main-nav a:not(.btn){
    display:flex;align-items:center;min-height:52px;
    padding:12px 8px;border-radius:8px;font-size:16px;
  }
  .main-nav a.active{background:none;color:var(--magenta)}
  .main-nav a.active::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--magenta);margin-left:auto}
  /* primary action, kept reachable on phones */
  .nav-cta{display:block;margin-top:16px}
  .nav-cta .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){ .main-nav{transition:none!important} }

/* ===== Hamburger -> close, and the sheet's staggered reveal =====
   Driven off aria-expanded, which site.js already maintains, so the icon
   state and the announced state can never disagree.

   The bars are 2px tall with a 5px gap, so their centres sit 7px apart.
   Translating the outer two by that 7px brings all three onto the same
   line before they rotate, which is what makes them meet as an X. */
.nav-toggle span{
  transition:transform var(--mid) var(--ease),opacity var(--fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.3)}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:768px){
  /* Each row drops in just after the sheet itself, 40ms apart, so the menu
     reads as a list arriving rather than one block appearing. */
  .main-nav li,
  .main-nav .nav-cta{
    opacity:0;transform:translateY(-6px);
    transition:opacity var(--exit) ease,transform var(--exit) var(--ease);
    transition-delay:0ms;              /* closing: leave together, quickly */
  }
  .main-nav.open li,
  .main-nav.open .nav-cta{
    opacity:1;transform:none;
    transition-duration:var(--enter);
  }
  .main-nav.open li:nth-child(1){transition-delay:60ms}
  .main-nav.open li:nth-child(2){transition-delay:100ms}
  .main-nav.open li:nth-child(3){transition-delay:140ms}
  .main-nav.open li:nth-child(4){transition-delay:180ms}
  .main-nav.open li:nth-child(5){transition-delay:220ms}
  .main-nav.open .nav-cta{transition-delay:260ms}
}
/* ===== Page title band ===== */
.page-title{background:var(--tint);border-bottom:1px solid var(--hairline)}
.page-title .container{padding-top:40px;padding-bottom:40px}
.page-title h1{margin:0 0 8px;color:var(--magenta);font-size:38px}
/* decorative yellow underline bars removed per final design */
.bar{display:none}
.breadcrumb{color:var(--faint);font-size:14px;margin:0}
.breadcrumb a{color:var(--faint)}

/* ===== Buttons ===== */
.btn{display:inline-block;padding:12px 24px;border-radius:24px;font-weight:700;font-size:15px;cursor:pointer;border:2px solid var(--magenta);background:var(--magenta);color:#fff;transition:.15s}
.btn:hover{text-decoration:none}
.btn.ghost{background:#fff;color:var(--magenta)}

/* ===== Sections ===== */
section{padding:56px 0}
.section-head{text-align:center;margin-bottom:36px}
.section-head h2{color:var(--magenta);font-size:28px;margin:0 0 8px}
.section-head .bar{width:64px;height:4px;background:var(--yellow);margin:10px auto 0}
.tint{background:var(--tint)}

/* ===== Hero carousel =====
   Adopted from the alternate design. The slides sit in a flex track so a
   drag can move them as one strip; the arrows are translucent and blurred;
   and the dots are a segmented progress bar whose active segment fills over
   the autoplay interval, so the carousel shows its timing, not just its
   position. */
.hero{background:var(--tint)}
/* full-bleed hero carousel — spans the whole viewport width */
.carousel{position:relative;max-width:none;margin:0;width:100%}
.slides{
  position:relative;width:100%;overflow:hidden;
  aspect-ratio:2880/760;background:var(--tint);
  touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;
}
.slides.dragging{cursor:grabbing}
.track{display:flex;height:100%;will-change:transform;transition:transform .5s var(--ease)}
.track.no-anim{transition:none}
.slide{flex:0 0 100%;min-width:100%;height:100%}
.slide img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;pointer-events:none}

.car-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;color:var(--magenta);
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:var(--shadow);opacity:.92;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast),background var(--fast);
}
.car-btn svg{width:20px;height:20px}
.car-btn.prev{left:clamp(8px,2vw,24px)}
.car-btn.next{right:clamp(8px,2vw,24px)}

/* Segmented progress dots.
   Every segment is the same width, so nothing animates `width` and the row
   never reflows. The button is a full 44px hit area with a 4px bar drawn
   inside it, which meets the touch-target minimum without making the
   indicator bulky. */
.dots{display:flex;justify-content:center;gap:8px;padding:12px 0 20px;margin:0}
.dot{
  position:relative;width:44px;height:var(--touch);border:0;padding:0;margin:0;cursor:pointer;
  background:none;display:grid;place-items:center;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
/* the visible bar */
.dot::before{
  content:"";display:block;width:32px;height:4px;border-radius:var(--radius-pill);
  background:var(--line);
  transition:background var(--fast),transform var(--fast) var(--ease);
}
.dot.on::before{background:#f9e0ee}
/* the sweeping fill, clipped to the bar */
.dot::after{
  content:"";position:absolute;width:32px;height:4px;border-radius:var(--radius-pill);
  background:var(--magenta);transform-origin:left;transform:scaleX(0);
  pointer-events:none;
}
.dot.on.run::after{animation:dotfill 5.5s linear forwards}
/* paused (autoplay stopped) — show position without implying progress */
.dot.on:not(.run)::after{transform:scaleX(1)}
@keyframes dotfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* placeholder poster */
.poster{max-width:520px;margin:0 auto;aspect-ratio:4/5;border:2px dashed var(--line);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--faint);background:var(--placeholder);font-size:14px}
.poster.wide{max-width:100%;aspect-ratio:auto;min-height:320px}
.poster-img{width:100%;height:auto;display:block;margin:0 auto;border-radius:var(--radius)}
/* full-bleed promo banner: full width on desktop, crops sides (center kept) on mobile */
.poster-section{padding:0}
.banner{width:100%;overflow:hidden;display:block;background:var(--tint)}
.banner img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.poster-banner{aspect-ratio:2880/1180}

/* home about-teaser + quick links */
.about-teaser h2{color:var(--magenta);font-size:30px;margin:0 0 14px}
.about-teaser p{max-width:900px;color:var(--ink);margin:0 0 16px}
.arrow-link{font-weight:700;color:var(--magenta)}
.qcard{display:block;text-decoration:none}
.qcard:hover{text-decoration:none}
.qcard p{color:var(--muted);margin:0}

/* careers Full-Time chip */
.chip.ft{background:#fffbe6;border-color:var(--yellow);color:var(--chip-year);font-weight:700}

/* value/feature grid */
.grid{display:grid;gap:20px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.card h3{margin:0 0 8px;color:var(--magenta);font-size:19px}
.value .k{display:inline-block;background:var(--magenta);color:#fff;font-weight:700;font-size:12px;letter-spacing:1px;padding:4px 12px;border-radius:16px;margin-bottom:10px}

/* about blocks */
.prose p{margin:0 0 16px}
.office{background:var(--tint);border-left:4px solid var(--magenta);border-radius:8px;padding:20px 24px}
.email-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.email-list li{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 18px}
.email-list .desc{color:var(--muted);font-size:14px}

/* ===== Store locator ===== */
.locator{display:grid;grid-template-columns:400px 1fr;gap:28px;align-items:start}
/* Region tabs: a segmented control whose selected state is a glass pill
   (.tabs-pill, injected by site.js) that glides between the buttons with
   the same spring and jelly as the header's pill. */
.region-tabs{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  padding:4px;margin-bottom:24px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-pill);
}
.region-tabs button{
  position:relative;z-index:1;
  border:0;background:transparent;border-radius:var(--radius-pill);
  padding:12px 8px;font-weight:700;font-size:14px;letter-spacing:.5px;cursor:pointer;color:var(--ink);
}
.region-tabs button.on{color:var(--magenta)}
.tabs-pill{
  position:absolute;left:0;top:0;width:0;height:0;
  border-radius:var(--radius-pill);
  opacity:0;pointer-events:none;z-index:0;
  will-change:transform;
  transition:transform var(--dur-pill) var(--ease-spring),
             width     var(--dur-pill) var(--ease-out-expo),
             opacity   var(--dur-quick) var(--ease-out);
}
.tabs-pill.on{opacity:1}
.tabs-pill.instant{transition:none}
.tabs-pill.jelly::before{animation:pill-jelly var(--dur-pill) var(--ease-out) both}

/* Changing region: the list dips out for a beat and its rows return as a
   cascade from the left; the detail panel slides in from the side the
   visitor moved towards (--dir is 1 or -1, set by site.js). */
.branch-list{transition:opacity 140ms var(--ease-out),transform 140ms var(--ease-out)}
.branch-list.swapping{opacity:0;transform:translate3d(0,6px,0)}
.branch-list.cascade button{animation:row-in .5s var(--ease-out-expo) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes row-in{from{opacity:0;transform:translate3d(-12px,0,0)}to{opacity:1;transform:none}}
/* The detail panel is a card, so what slides in and out reads as an
   object rather than loose text. */
.detail{
  /* a larger radius than the photos inside it: a 10px corner on a card
     this wide reads sharper than the same 10px on a 250px photo, so 18px
     is what makes the two look equally rounded */
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:22px 24px 24px;
  box-shadow:0 10px 30px rgba(42,42,42,.06);
}
@media(max-width:640px){ .detail{padding:16px} }

/* Choosing a branch: a vertical slide that follows the list. --vdir is 1
   when the chosen row is further down the list, -1 when it is further up
   (set by site.js). Going down, the old card slides up and away and the
   new one rises in from below; going up, the reverse. */
.detail.card-out{animation:card-out 220ms cubic-bezier(.4,0,1,1) both}
@keyframes card-out{
  to{opacity:0;transform:translate3d(0,calc(var(--vdir,1) * -40px),0) scale(.98)}
}
.detail.card-in{animation:card-in 520ms var(--ease-out-expo) both}
@keyframes card-in{
  from{opacity:0;transform:translate3d(0,calc(var(--vdir,1) * 64px),0) scale(.98)}
  to  {opacity:1;transform:none}
}
.detail.swap-x{animation:detail-swap-x 400ms var(--ease-out-expo) both}
@keyframes detail-swap-x{
  from{opacity:0;transform:translate3d(calc(var(--dir,1) * 20px),0,0)}
  to{opacity:1;transform:none}
}
.branch-list{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.branch-list button{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;border:0;border-bottom:1px solid var(--hairline);background:#fff;padding:16px 18px;cursor:pointer;font:inherit}
.branch-list button:last-child{border-bottom:0}
.branch-list button.on{background:#f7e6f0;box-shadow:inset 4px 0 0 var(--magenta)}
.branch-list .bn{font-weight:700;color:var(--ink)}
.branch-list button.on .bn{color:var(--magenta)}
.branch-list .bc{color:var(--muted);font-size:13px}
.branch-list .chev{color:var(--muted);font-size:20px}

/* ---------- Store locator: seamless selection ----------
   The row's selected state is an inset shadow rather than a border plus
   padding, so switching branches animates instead of snapping the box
   metrics around. The detail panel's contents are replaced wholesale, so it
   replays a short fade-up to cover the swap. Transform and opacity only. */
.detail.swap{animation:detail-swap 280ms var(--ease-out-expo) both}
@keyframes detail-swap{
  from{opacity:0;transform:translate3d(0,10px,0)}
  to{opacity:1;transform:none}
}
/* the chevron settles back rather than jumping when the row becomes active */
.branch-list button.on .chev{transform:translateX(3px);color:var(--magenta)}

@media(prefers-reduced-motion:reduce){
  .detail.swap,.detail.swap-x,.detail.card-out,.detail.card-in,.branch-list.cascade button{animation:none}
  .tabs-pill,.branch-list{transition:none}
  .tabs-pill.jelly::before{animation:none}
}
.detail h2{margin:0 0 2px;color:var(--magenta);font-size:26px}
.detail .sub{color:var(--faint);font-size:13px;margin:0 0 16px}
/* live, interactive Google Map */
.map{position:relative;background:var(--tint);border:1px solid var(--hairline);border-radius:var(--radius);height:340px;overflow:hidden}
.map iframe{width:100%;height:100%;border:0;display:block}
.map-link{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:700;color:var(--magenta)}
@media(max-width:640px){ .map{height:260px} }
.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px 40px;margin:20px 0}
.fields .full{grid-column:1/-1}
.fields .lab{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--faint);margin:0 0 4px}
.fields .val{margin:0;font-size:15.5px}

/* ---------- Map loading veil ----------
   The iframe element now persists across branch changes, so it only
   reloads when the destination actually differs. While that one load is in
   flight the frame paints blank, so a tinted veil covers it and fades out
   on the iframe's load event — a deliberate loading state instead of a
   white flash. */
.map-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  display:grid;place-items:center;
  background:var(--tint);
  font-size:13px;color:var(--faint);
  opacity:0;visibility:hidden;
  transition:opacity var(--mid) var(--ease-out),visibility var(--mid);
}
.map.loading .map-veil{opacity:1;visibility:visible}

/* the photo placeholder is now a sibling of the img rather than replacing it */
.photos figure .ph{display:none}
.photos figure.no-photo img{display:none}
.photos figure.no-photo .ph{display:flex}
.photos{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.photos figure{margin:0}
.photos figcaption{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--faint);margin-bottom:8px}
.photos .ph,.photos img{height:250px;width:100%;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line)}
.photos .ph{background:var(--placeholder);display:flex;align-items:center;justify-content:center;color:var(--faint);border-style:solid}

/* ===== Careers ===== */
.job{border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-bottom:20px}
.job h3{color:var(--magenta);margin:0 0 8px;font-size:20px}
.job .meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip{background:var(--tint);border:1px solid var(--line);border-radius:16px;padding:4px 12px;font-size:13px;color:var(--muted)}
.note{background:var(--tint);border-left:4px solid var(--yellow);border-radius:8px;padding:18px 22px}
ul.tight{margin:6px 0 0;padding-left:20px}
ul.tight li{margin:4px 0}

/* ===== Legal ===== */
.legal-tabs{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:24px;overflow:hidden;margin-bottom:24px}
.legal-tabs button{flex:1 1 0;min-width:160px;border:0;border-right:1px solid var(--line);background:#fff;padding:14px 10px;font-weight:700;font-size:14px;cursor:pointer;color:var(--ink)}
.legal-tabs button:last-child{border-right:0}
.legal-tabs button.on{background:var(--tint);color:var(--magenta)}
.legal-doc{border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.legal-doc h2{color:var(--magenta);margin:0 0 4px}
.legal-doc .eff{color:var(--faint);font-size:13px;margin:0 0 20px}
.ph-line{height:12px;border-radius:6px;background:var(--hairline);margin:10px 0}
.ph-sub{height:16px;width:220px;border-radius:4px;background:#d7d2d5;margin:26px 0 6px}
.legal-doc .stamp{color:var(--placeholder);text-align:center;font-size:40px;font-weight:700;letter-spacing:4px;margin:24px 0}

/* ---------- Legal document body ----------
   Real Terms of Use / Privacy Policy content. Sections are an <ol> so the
   browser supplies the numbering that Word was generating, which means
   inserting or removing a clause never leaves the numbers stale. */
.legal-tabs,.legal-doc{max-width:78ch;margin-left:auto;margin-right:auto}
.legal-sections{margin:0;padding:0 0 0 1.4em;display:grid;gap:34px}
.legal-sections > li{padding-left:6px;min-width:0}
.legal-sections > li::marker{color:var(--magenta);font-weight:700;font-size:19px}
.legal-doc h3{color:var(--magenta);font-size:19px;margin:0 0 10px}
.legal-doc h4{font-size:15px;color:var(--ink);margin:22px 0 8px}
.legal-doc p{margin:0 0 12px;line-height:1.65}
.legal-doc ul{margin:0 0 14px;padding-left:20px;display:grid;gap:8px}
.legal-doc ul li{line-height:1.6}
.legal-doc ul.plain{list-style:none;padding-left:0}
.legal-doc strong{color:var(--ink)}

.legal-dates{color:var(--muted);font-size:14px;margin:0 0 24px}
.legal-pending{
  background:#fffbe6;border:1px solid var(--yellow);border-radius:8px;
  padding:12px 16px;font-size:14px;color:var(--chip-year);margin:0 0 24px
}

.legal-contact{background:var(--tint);border-radius:8px;padding:18px 22px;margin:0 0 14px}
.legal-contact p{margin:0 0 6px}
/* long addresses must be allowed to break, or they widen the whole page */
.legal-contact,.legal-doc li,.legal-doc p{overflow-wrap:anywhere}
.legal-contact .org{font-weight:700;color:var(--ink)}
.legal-contact .dpo{margin-top:12px;padding-top:12px;border-top:1px solid var(--hairline)}

/* tables scroll rather than overflow the page on a phone */
.legal-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 16px;min-width:0;max-width:100%}
.legal-table{border-collapse:collapse;width:100%;min-width:340px;font-size:14px}
.legal-table th,.legal-table td{
  border:1px solid var(--line);padding:10px 14px;text-align:left;vertical-align:top
}
.legal-table thead th{background:var(--tint);color:var(--magenta);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.legal-table tbody th{background:#fcfbfc;font-weight:700;color:var(--ink);white-space:nowrap}

@media(max-width:640px){
  .legal-doc{padding:20px}
  .legal-sections{padding-left:1.2em;gap:28px}
  .legal-doc h3{font-size:17px}
  .legal-contact{padding:14px 16px}
}

/* ===== Footer ===== */
.site-footer{background:var(--magenta);color:var(--footer-text);padding:48px 0 28px;margin-top:24px}
.site-footer a{color:var(--footer-text)}
.footer-grid{display:flex;flex-wrap:wrap;gap:28px 72px;align-items:flex-start;justify-content:space-between}
.site-footer h4{color:#fff;margin:0 0 14px;font-size:16px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.qr{width:120px;height:120px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#8a8088;font-size:12px;margin:0 auto 8px}
.footer-center{text-align:center}
.socials{display:flex;gap:12px;margin:4px 0}
.socials a{width:42px;height:42px;border:1.5px solid #fff;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.socials a:hover{text-decoration:none}
.socials svg{width:22px;height:22px;display:block}
.copyright{border-top:1px solid var(--divider);margin-top:32px;padding-top:20px;text-align:center;font-size:13px}

/* ===== Responsive ===== */
@media(max-width:900px){
  .locator{grid-template-columns:1fr}
  .grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}
}
/* mobile/tablet: crop banner sides so the center-heavy info stays large */
@media(max-width:768px){
  .slides{aspect-ratio:16/9}
  .poster-banner{aspect-ratio:16/9}
}
@media(max-width:640px){
  .grid.cols-3,.grid.cols-4,.grid.cols-2,.fields,.photos{grid-template-columns:1fr}
  .footer-grid{flex-direction:column;gap:28px}
  .page-title h1{font-size:30px}
}

/* ============================================================
   MOTION & INTERACTION

   The hover/press highlight is for INTERACTIVE elements only:
   buttons, the clickable quick-link cards, tabs, branch rows,
   carousel controls and social icons. The plain content cards on
   About and Careers are <div>s, not links, so they stay still —
   highlighting them would suggest they can be clicked.

   The highlight is a lift plus a shadow in the brand magenta. An
   earlier version added a yellow ring; that was reverted.

   Every highlight is delivered three ways so it works everywhere:
     :hover   - mouse and trackpad  (inside @media(hover:hover))
     .tapped  - touch and pen       (class added by site.js)
     :focus-visible - keyboard
   ============================================================ */
:root{ --ease:cubic-bezier(.22,.61,.36,1); --fast:.18s; --mid:.32s; }

/* ---------- carousel: draggable / swipeable track ---------- */

/* ---------- base transitions ---------- */
.btn{transition:transform var(--fast) var(--ease),background var(--fast),border-color var(--fast),box-shadow var(--fast)}
.qcard{position:relative;transition:transform var(--mid) var(--ease),box-shadow var(--mid),border-color var(--mid)}
.qcard h3{transition:transform var(--mid) var(--ease)}
.arrow-link,.map-link{display:inline-block;transition:transform var(--fast) var(--ease),color var(--fast)}
.region-tabs button,.legal-tabs button{transition:background var(--fast),color var(--fast),box-shadow var(--fast)}
.branch-list button{transition:background var(--mid) var(--ease-out),box-shadow var(--mid) var(--ease-out)}
.branch-list .chev{transition:transform var(--mid) var(--ease)}
.branch-list button > span:first-child{transition:transform var(--mid) var(--ease)}
.socials a{transition:transform var(--fast) var(--ease),background var(--fast),box-shadow var(--fast),border-color var(--fast)}
.site-footer a{transition:color var(--fast),opacity var(--fast)}
.main-nav a:not(.btn){transition:background var(--fast),color var(--fast)}
.site-header{transition:box-shadow var(--mid),background var(--mid)}
.site-header.scrolled{box-shadow:0 2px 14px rgba(0,0,0,.08);background:rgba(255,255,255,.94)}

/* ---------- keyboard focus ---------- */
.btn:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.qcard:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.car-btn:focus-visible{outline:3px solid var(--magenta);outline-offset:3px}
.dot:focus-visible{outline:2px solid var(--magenta);outline-offset:3px}
.region-tabs button:focus-visible,.legal-tabs button:focus-visible{outline:3px solid var(--magenta);outline-offset:-3px}
.branch-list button:focus-visible{outline:3px solid var(--magenta);outline-offset:-3px}
.socials a:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ============================================================
   THE HIGHLIGHT — lift + magenta shadow
   Each rule is written for both :hover (mouse) and .tapped (touch)
   so a phone gets exactly what a desktop gets.
   ============================================================ */

/* solid + ghost buttons */
.btn.tapped{background:var(--magenta-dark);border-color:var(--magenta-dark);transform:translateY(-2px) scale(1.04);box-shadow:0 10px 24px rgba(176,32,116,.30)}
.btn.ghost.tapped{background:var(--tint);color:var(--magenta);box-shadow:0 10px 24px rgba(176,32,116,.18)}

/* clickable quick-link cards on the home page */
.qcard.tapped{transform:translateY(-4px) scale(1.035);z-index:2;box-shadow:0 16px 34px rgba(42,42,42,.14)}
.qcard.tapped h3{transform:translateX(4px)}

/* carousel controls */
.car-btn.tapped{transform:translateY(-50%) scale(1.15);opacity:1;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.dot.tapped::before{background:var(--magenta);transform:scaleY(1.8)}

/* region + legal tabs — inset ring, the pill group clips its overflow */
.region-tabs button:not(.on).tapped,.legal-tabs button:not(.on).tapped{background:var(--tint);color:var(--magenta)}

/* branch rows */
.branch-list button:not(.on).tapped{background:var(--tint)}
.branch-list button:not(.on).tapped > span:first-child{transform:translateX(6px)}
.branch-list button.tapped .chev{transform:translateX(4px)}

/* social icons */
.socials a.tapped{background:rgba(255,255,255,.15);transform:translateY(-3px) scale(1.10)}

/* text links with an arrow */
.arrow-link.tapped,.map-link.tapped{transform:translateX(4px);text-decoration:none}

/* ---------- mouse and trackpad ---------- */
@media(hover:hover){
  .btn:hover{background:var(--magenta-dark);border-color:var(--magenta-dark);transform:translateY(-2px) scale(1.04);box-shadow:0 10px 24px rgba(176,32,116,.30)}
  .btn.ghost:hover{background:var(--tint);color:var(--magenta);box-shadow:0 10px 24px rgba(176,32,116,.18)}
  .qcard:hover{text-decoration:none;transform:translateY(-4px) scale(1.035);z-index:2;box-shadow:0 16px 34px rgba(42,42,42,.14)}
  .qcard:hover h3{transform:translateX(4px)}
  .car-btn:hover{transform:translateY(-50%) scale(1.15);opacity:1;box-shadow:0 6px 18px rgba(0,0,0,.18)}
  .dot:hover::before{background:var(--magenta);transform:scaleY(1.8)}
  .region-tabs button:not(.on):hover,.legal-tabs button:not(.on):hover{background:var(--tint);color:var(--magenta)}
  .branch-list button:not(.on):hover{background:var(--tint)}
  .branch-list button:not(.on):hover > span:first-child{transform:translateX(6px)}
  .branch-list button:hover .chev{transform:translateX(4px)}
  .socials a:hover{background:rgba(255,255,255,.15);transform:translateY(-3px) scale(1.10)}
  .arrow-link:hover,.map-link:hover{transform:translateX(4px);text-decoration:none}
  .main-nav a:not(.btn):hover{background:var(--surface-3);color:var(--magenta)}
  .site-footer ul a:hover{opacity:.75}
  .photos figure:hover img{transform:scale(1.04)}

  /* mouse-only click press. Touch uses .tapped instead, so a tap grows
     rather than shrinking under the finger that is covering it. */
  .btn:active{transform:translateY(0) scale(.97)}
  .car-btn:active{transform:translateY(-50%) scale(.94)}
  .socials a:active{transform:scale(.94)}
}

/* ---------- branch photos ---------- */
.photos img{transition:transform .5s var(--ease)}

/* ---------- scroll reveal (only when JS is active) ---------- */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s var(--ease);transition-delay:var(--rd,0ms)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- respect reduced-motion preference ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1!important;transform:none!important}
  .track{transition:none!important}
  /* show position, not a sweep, when motion is reduced */
  .dot.on.run::after{animation:none;transform:scaleX(1)}
  .main-nav{transition:none!important}
  .main-nav li,.main-nav .nav-cta{transition-delay:0ms!important}
}

/* ==========================================================================
   MOTION LAYER
   Reusable easing/duration tokens, entrance utilities, and cross-document
   page transitions. Everything here animates transform and opacity only —
   no layout properties — so nothing in it can trigger reflow.
   ========================================================================== */

:root{
  /* Easing. -expo is the "arrives fast, settles gently" curve used for
     entrances; -out is for small state changes. */
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.33,1,.68,1);

  /* Entrance durations, deliberately tight. */
  --dur-enter:340ms;
  --dur-exit:220ms;   /* ~65% of enter, so dismissals feel immediate */
  --dur-quick:160ms;
  --dur-reveal:.72s;    /* content blocks arriving after a route change */

  --reveal-shift:16px;  /* how far entrance utilities travel */

  /* Sliding pill: a back-out curve that overshoots by ~6% then settles,
     which is what gives the glide its bounce. */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-pill:560ms;
}

/* --------------------------------------------------------------------------
   Entrance utilities
   Add a utility class to any element and the observer in site.js adds
   .is-visible when it scrolls into view. Opt an element in manually with
   data-reveal, or rely on the default selector list.

     <div class="card u-slide-up" data-reveal>…</div>
     <h2 class="u-fade-in" data-reveal>…</h2>

   Scoped to .js so that if the script never runs, nothing is left hidden.
   -------------------------------------------------------------------------- */
.js .u-fade-in,
.js .u-slide-up,
.js .u-scale-in{
  opacity:0;
  transition:opacity var(--dur-enter) var(--ease-out),
             transform var(--dur-enter) var(--ease-out-expo);
  transition-delay:var(--rd,0ms);
}
.js .u-slide-up{transform:translate3d(0,var(--reveal-shift),0)}
.js .u-scale-in{transform:scale(.96);transition-duration:var(--dur-reveal)}

/* Content-reveal motions, assigned per block type by the reveal module in
   site.js when a page mounts (see its EFFECTS table):
     u-rise     lifts in from below — cards, paragraphs, rows
     u-blur-in  sharpens from a blur while lifting — headings, title
   Both wait on --rd, which the module sets to stagger the cascade. */
.js .u-rise{
  opacity:0;transform:translate3d(0,28px,0);
  transition:opacity var(--dur-reveal) var(--ease-out),
             transform var(--dur-reveal) var(--ease-out-expo);
  transition-delay:var(--rd,0ms);
}
.js .u-blur-in{
  opacity:0;transform:translate3d(0,14px,0);filter:blur(10px);
  transition:opacity var(--dur-reveal) var(--ease-out),
             transform var(--dur-reveal) var(--ease-out-expo),
             filter var(--dur-reveal) var(--ease-out);
  transition-delay:var(--rd,0ms);
}

.js .u-fade-in.is-visible,
.js .u-slide-up.is-visible,
.js .u-scale-in.is-visible,
.js .u-rise.is-visible,
.js .u-blur-in.is-visible{opacity:1;transform:none;filter:none}

/* --------------------------------------------------------------------------
   .card-hover — the lift/shadow treatment as a reusable utility, for any
   element that should feel pickable. Pointer devices only: on touch there
   is no hover, and a sticky lift after a tap reads as a stuck state.
   -------------------------------------------------------------------------- */
.card-hover{transition:transform var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out)}
@media(hover:hover){
  .card-hover:hover{transform:translate3d(0,-2px,0);box-shadow:0 12px 28px rgba(42,42,42,.12)}
}
.card-hover:active{transform:scale(.99);transition-duration:var(--dur-exit)}

/* --------------------------------------------------------------------------
   Page transitions — native cross-document View Transitions.

   No library, no router, no extra bytes: the browser cross-fades the old
   and new document itself. Chromium-based browsers animate; everywhere
   else navigates exactly as before, so there is nothing to fall back to.

   The header is given its own transition name so it stays put instead of
   fading with the rest of the page — that is what removes the flash and
   makes navigation feel continuous rather than like a reload.
   -------------------------------------------------------------------------- */
@view-transition{navigation:auto}

::view-transition-old(root){
  animation:vt-leave var(--dur-exit) var(--ease-out) both;
}
::view-transition-new(root){
  animation:vt-enter var(--dur-enter) var(--ease-out-expo) both;
}
@keyframes vt-leave{ to{ opacity:0; transform:translate3d(0,-6px,0) } }
@keyframes vt-enter{ from{ opacity:0; transform:translate3d(0,10px,0) } }

.site-header{view-transition-name:site-header}
.site-footer{view-transition-name:site-footer}

/* --------------------------------------------------------------------------
   Reduced motion — no entrances, no page transitions, nothing travels.
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .js .u-fade-in,
  .js .u-slide-up,
  .js .u-scale-in,
  .js .u-rise,
  .js .u-blur-in{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .card-hover:hover,.card-hover:active{transform:none}
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none}
}

/* ==========================================================================
   SPA SHELL — sliding nav pill, content transitions, route loader

   Desktop only. Every rule that changes how the header behaves sits inside
   @media(min-width:769px), the exact complement of the mobile sheet's
   @media(max-width:768px) above, so nothing here can reach the phone menu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout stability
   A page swap can add or remove the vertical scrollbar. Without a reserved
   gutter the viewport width changes by the scrollbar's width and the whole
   centred header shifts sideways — one of the "header jumps". Reserving the
   gutter costs nothing on touch devices, where scrollbars are overlays.
   -------------------------------------------------------------------------- */
@media(min-width:769px){
  html{scrollbar-gutter:stable}
}
/* anchor targets stop under the sticky header, not behind it */
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}

/* --------------------------------------------------------------------------
   Sliding nav pill

   Markup (see the header of every page):

     <nav class="main-nav">
       <div class="nav-track">                 <- positioning context
         <span class="nav-pill"></span>        <- the one moving backdrop
         <ul><li><a>…</a></li>…</ul>            <- the links, above the pill
       </div>
       <div class="nav-cta">…</div>            <- mobile-only CTA clone
     </nav>

   The pill is out of flow, so animating its width lays out this one
   element and never reflows the nav. translate3d keeps the movement on the
   compositor. scaleX was the alternative but it distorts the corner radius.
   -------------------------------------------------------------------------- */
.nav-pill{display:none}                   /* phones: the sheet shows a dot instead */

@media(min-width:769px){
  .nav-track{position:relative}
  /* The pill is two layers. The outer element carries position and width
     and glides with a spring curve that overshoots the target by a few
     pixels before settling. The ::before layer is the visible surface: it
     squashes and stretches (the "jelly") on every move, which it can only
     do on a separate layer because the outer transform is the translation. */
  .nav-pill{
    display:block;
    position:absolute;left:0;top:0;
    width:0;height:0;
    border-radius:var(--radius-pill);
    opacity:0;pointer-events:none;z-index:0;
    will-change:transform;
    /* Only the position springs. Width used the same overshooting curve,
       so on a big size change (Home is the narrowest tab, Store Locator
       the widest) the pill visibly pulsed in size on top of the jelly. */
    transition:transform var(--dur-pill) var(--ease-spring),
               width     var(--dur-pill) var(--ease-out-expo),
               opacity   var(--dur-quick) var(--ease-out);
  }
  .nav-pill.on{opacity:1}
  .nav-pill.instant{transition:none}      /* first paint, resize, breakpoint */
  /* re-applied by the router on each animated move (remove, reflow, add) */
  .nav-pill.jelly::before{animation:pill-jelly var(--dur-pill) var(--ease-out) both}

  /* the links sit above the pill */
  .main-nav li{position:relative;z-index:1}
  /* Once the router owns the active state the links stop painting their
     own background — the pill is the highlight. Keyed to html.spa so the
     static per-link highlight still shows if the router never ran. */
  .spa .main-nav li > a.active{
    background:none;
    /* The tab just clicked is still under the cursor, so its grey hover
       tint used to vanish the instant it went active and leave it blank
       until the pill arrived. Let that tint fade out over the glide. */
    transition:background var(--dur-pill) var(--ease-out),
               color var(--fast),
               transform var(--fast) var(--ease-out);
  }

  /* The per-page call to action ("Find a branch" / "Contact us" / "Email
     your CV") is swapped by the router in two beats, in the same grammar
     as the pill and the branch card: the old button slips up and away,
     the new one rises into place on the pill's spring. */
  .header-cta.cta-out{animation:cta-out 170ms cubic-bezier(.4,0,1,1) both}
  .header-cta.cta-in{animation:cta-in var(--dur-pill) var(--ease-spring) both}
}

/* Liquid-glass surface shared by the header pill and the store locator's
   region pill: a translucent magenta tint the text stays legible through,
   with a hairline edge and a soft top highlight for the glass. The tint is
   the brand magenta at low alpha, which lands on the same pink as
   --magenta-050 over white.
   No backdrop-filter on purpose: Chromium re-rasterises a backdrop-filtered
   element every frame its size animates, which showed as a flicker. */
.nav-pill::before,
.tabs-pill::before{
  content:"";position:absolute;inset:0;
  border-radius:inherit;
  background:
    linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 55%),
    rgba(176,32,116,.10);
  box-shadow:
    inset 0 0 0 1px rgba(176,32,116,.14),
    inset 0 1px 0 rgba(255,255,255,.75),
    0 2px 10px rgba(176,32,116,.10);
  transform-origin:50% 50%;
}

/* Stretch along the direction of travel, squash on arrival, settle. */
@keyframes pill-jelly{
  0%  {transform:scale(1,1)}
  30% {transform:scale(1.09,.91)}
  55% {transform:scale(.97,1.03)}
  78% {transform:scale(1.01,.99)}
  100%{transform:scale(1,1)}
}
@keyframes cta-out{
  to{opacity:0;transform:translate3d(0,-8px,0) scale(.96)}
}
@keyframes cta-in{
  from{opacity:0;transform:translate3d(0,12px,0) scale(.96)}
  40% {opacity:1}
  to  {opacity:1;transform:none}
}

/* --------------------------------------------------------------------------
   Full-navigation fallback (Chromium / Safari 18+)

   fetch() is refused when the site is opened from disk over file://, so
   there every click is a real page load and the router steps aside. The
   cross-document view transition already declared above then takes over:
   naming the pill makes the browser animate it from its rect on the old
   page to its rect on the new one, so it still glides across the header
   rather than being repainted in place. The call to action gets its own
   name so only it crossfades, not the whole header.
   -------------------------------------------------------------------------- */
@media(min-width:769px){
  .nav-pill{view-transition-name:nav-pill}
  .header-cta{view-transition-name:header-cta}
}
::view-transition-group(nav-pill){
  animation-duration:var(--dur-pill);
  animation-timing-function:var(--ease-spring);
}
/* the pill is translucent, so showing both snapshots would double the tint
   mid-flight; the new one alone is enough since they look identical */
::view-transition-old(nav-pill){display:none}
::view-transition-new(nav-pill){animation:none;mix-blend-mode:normal}
::view-transition-group(header-cta){animation-duration:var(--dur-enter)}

/* --------------------------------------------------------------------------
   Content view
   Only <main> moves. Transform and opacity only, so the header and footer
   either side never take part. The classes are added by the router and the
   entering one is removed again on animationend.
   -------------------------------------------------------------------------- */
.route-view{display:block}
.route-view:focus{outline:none}          /* focused programmatically after a swap */

@media(min-width:769px){
  .route-view.is-leaving{animation:route-out var(--dur-exit) var(--ease-out) both}
  .route-view.is-entering{animation:route-in var(--dur-enter) var(--ease-out-expo) both}
}
@keyframes route-out{
  to{opacity:0;transform:translate3d(0,-6px,0)}
}
@keyframes route-in{
  from{opacity:0;transform:translate3d(0,12px,0)}
  to{opacity:1;transform:none}
}

/* --------------------------------------------------------------------------
   Loader
   A plain white veil over the content area only — the header stays visible
   and usable above it. It is on screen twice: from the first paint of a
   page until the page has loaded (.boot, dismissed by site.js), and while
   the router swaps #content. The visual is the Lottie animation rendered
   into .route-loader-anim; the CSS dots only appear if the player fails.
   -------------------------------------------------------------------------- */
.route-loader{
  position:fixed;left:0;right:0;bottom:0;top:var(--header-h);
  z-index:40;
  display:grid;place-items:center;
  background:var(--white);
  opacity:0;
  transition:opacity var(--dur-quick) var(--ease-out);
}
.route-loader.on{opacity:1}
.route-loader[hidden]{display:none}
/* without JavaScript nothing could ever dismiss it, so it never shows */
html:not(.js) .route-loader.boot{display:none}

.route-loader-box{display:grid;justify-items:center;gap:8px}
/* the artwork occupies roughly the middle third of its canvas, so the box
   is sized larger than the spinner it shows */
.route-loader-anim{width:200px;height:200px}
@media(max-width:768px){ .route-loader-anim{width:160px;height:160px} }
.route-loader-anim svg{display:block;width:100%;height:100%}

/* fallback: three dots that rise in turn, shown only if Lottie is unavailable */
.route-loader-dots{display:none;gap:5px}
html.lottie-failed .route-loader-dots{display:inline-flex}
html.lottie-failed .route-loader-anim{display:none}
.route-loader-dots i{
  width:6px;height:6px;border-radius:50%;background:var(--magenta);
  animation:route-dot 1s var(--ease-out) infinite;
}
.route-loader-dots i:nth-child(2){animation-delay:.15s}
.route-loader-dots i:nth-child(3){animation-delay:.30s}
@keyframes route-dot{
  0%,60%,100%{transform:translate3d(0,0,0);opacity:.35}
  30%        {transform:translate3d(0,-4px,0);opacity:1}
}

/* --------------------------------------------------------------------------
   Route progress bar
   The immediate answer to a click. It appears instantly and creeps toward
   70%, so a slow network reads as progress rather than as a dead click —
   and it never covers or blanks the content already on screen.
   -------------------------------------------------------------------------- */
.route-progress{
  position:fixed;top:0;left:0;height:2px;width:0;
  background:var(--magenta);z-index:60;
  opacity:0;pointer-events:none;
  transform-origin:left;
  transition:width var(--dur-quick) var(--ease-out),opacity var(--dur-enter) var(--ease-out);
}
html.route-busy .route-progress{
  opacity:1;width:70%;
  transition:width 2.2s var(--ease-out-expo),opacity var(--dur-quick) var(--ease-out);
}

/* --------------------------------------------------------------------------
   Press feedback on the nav links (unchanged from before)
   -------------------------------------------------------------------------- */
.main-nav a:not(.btn){transition:background var(--fast),color var(--fast),transform var(--fast) var(--ease-out)}
@media(hover:hover){
  .main-nav a:not(.btn):hover{transform:translate3d(0,-1px,0)}
}
.main-nav a:not(.btn):active{transform:scale(.97)}
.link-arrow:active,.map-link:active{transform:scale(.97)}

/* --------------------------------------------------------------------------
   Reduced motion — the pill and the content cut, nothing travels
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .nav-pill{transition:none}
  .nav-pill.jelly::before,.header-cta.cta-out,.header-cta.cta-in{animation:none}
  ::view-transition-group(nav-pill),::view-transition-group(header-cta){animation:none}
  .route-view.is-leaving,.route-view.is-entering{animation:none}
  .route-loader{transition:none}
  .route-loader-dots i{animation:none;opacity:1}
  .route-progress{display:none}
  .main-nav a:not(.btn):hover,.main-nav a:not(.btn):active{transform:none}
}