/* Autobani's brighter blue/yellow identity and motion system. */
:root {
  --navy:#075697;
  --blue:#1556a6;
  --yellow:#facc0b;
  --ink:#123c63;
  --muted:#61788c;
  --line:#d5e4f0;
  --paper:#eef6fc;
  --ease:cubic-bezier(.16,1,.3,1)
}

.topbar {
  background:#1556a6
}

.topbar i {
  border-color:#ffffff66
}

.topbar a span {
  color:#facc0b
}

.header-inner {
  height:88px
}

header {
  border-bottom:3px solid #facc0b;
  box-shadow:0 6px 20px #0963a408
}

.language button[aria-pressed=true] {
  color:#005ba9
}

.header-inner nav a:after {
  height:3px;
  background:#ffcc00;
  border-radius:3px
}

.button {
  background:#1556a6;
  border-radius:5px;
  position:relative;
  isolation:isolate;
  overflow:hidden
}

.button:hover {
  background:#0059a0;
  box-shadow:0 8px 25px #005ca72a;
  transform:translateY(-3px)
}

.button:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 20%,#ffffff40 48%,transparent 75%);
  transform:translateX(-150%);
  pointer-events:none;
  transition:transform .65s var(--ease)
}

.button:hover:after {
  transform:translateX(150%)
}

.button.yellow {
  background:#facc0b;
  color:#103d65
}

.button.yellow:hover {
  background:#ffe744
}

.button.outline {
  color:#07599e;
  border-color:#a9cae5
}

.button.outline:hover {
  background:#e0f1ff
}

.hero {
  background:#1556a6;
  color:white
}

.hero:before {
  content:"";
  position:absolute;
  width:700px;
  height:700px;
  border:1px solid #ffffff0f;
  border-radius:50%;
  left:-500px;
  top:0;
  pointer-events:none
}

.hero-grid {
  min-height:650px;
  gap:35px
}

.hero-copy {
  padding-top:73px;
  padding-bottom:39px
}

.hero h1 {
  font-size:clamp(44px,4.5vw,68px);
  max-width:650px;
  font-weight:800;
  line-height:1.22;
  letter-spacing:-2px
}

.hero-copy>p {
  color:#d8ebfc;
  font-size:14px;
  max-width:480px
}

.hero .eyebrow {
  color:#e0f0ff;
  font-size:10px;
  letter-spacing:.5px
}

.status-dot {
  background:#facc0b;
  box-shadow:0 0 0 5px #facc0b20
}

.hero h1:after {
  background:#facc0b;
  width:88px
}

.hero .text-link {
  color:#fff;
  border-bottom-color:#ffffff80
}

.hero .text-link:hover {
  color:#facc0b
}

.hero-bottom {
  color:#c5e1fa
}

.hero-bottom>span:first-child {
  color:white
}

.journey-scene {
  height:560px;
  min-height:0;
  align-self:center;
  position:relative;
  perspective:1000px
}

.journey-grid {
  position:absolute;
  inset:-15px;
  background-image:radial-gradient(#ffffff40 .7px,transparent .7px);
  background-size:25px 25px;
  mask-image:radial-gradient(ellipse,#000,transparent 73%)
}

.journey-halo {
  position:absolute;
  width:390px;
  height:390px;
  border-radius:50%;
  background:#0f7bd4;
  box-shadow:0 0 110px #3da5fa44;
  top:65px;
  left:50%;
  transform:translateX(-50%)
}

.journey-orbit {
  position:absolute;
  inset:30px 8px;
  border:1px solid #ffffff24;
  border-radius:50%;
  transform:rotate(-27deg);
  animation:scene-breathe 8s ease-in-out infinite
}

.journey-map {
  position:absolute;
  width:115%;
  height:115%;
  left:-5%;
  top:-5%;
  overflow:visible;
  transform:rotate(-5deg);
  animation:map-arrive 1.5s var(--ease) both;
  filter:drop-shadow(0 20px 25px #003b7650)
}

.route-shadow,.route-bed,.route-edge,.route-guide,.route-signal {
  stroke-linecap:round;
  stroke-linejoin:round
}

.route-shadow {
  stroke:#005098;
  stroke-width:68;
  transform:translateY(12px)
}

.route-bed {
  stroke:#0e72be;
  stroke-width:65
}

.route-edge {
  stroke:#80bfee;
  stroke-width:2
}

.route-guide {
  stroke:#ffffff55;
  stroke-width:3;
  stroke-dasharray:8 15;
  animation:lane-flow 10s linear infinite
}

.route-signal {
  stroke:#facc0b;
  stroke-width:7;
  stroke-dasharray:140 1400;
  animation:route-flow 7s cubic-bezier(.45,0,.3,1) infinite;
  filter:drop-shadow(0 0 5px #ffdf0060)
}

.route-node {
  fill:#facc0b;
  stroke:#fff;
  stroke-width:4;
  transform-box:fill-box;
  transform-origin:center;
  animation:node-pulse 3.5s ease-in-out infinite
}

.route-node.last {
  animation-delay:1.75s
}

.journey-caption {
  position:absolute;
  left:5%;
  top:36%;
  right:5%;
  color:#fff;
  transform:translateZ(40px);
  pointer-events:none;
  text-align:center;
  text-shadow:0 2px 20px #0461a8
}

.journey-kicker {
  display:block;
  letter-spacing:1.8px;
  font-size:9px;
  font-weight:650;
  color:#d8efff;
  margin-bottom:13px
}

.journey-caption strong {
  font-size:clamp(22px,2.6vw,37px);
  font-weight:750;
  letter-spacing:-1px;
  line-height:1.35;
  display:block
}

.journey-caption-line {
  display:block;
  width:38px;
  height:3px;
  background:#facc0b;
  margin:20px auto
}

.journey-note {
  position:absolute;
  right:2%;
  bottom:65px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:9px;
  letter-spacing:.3px;
  background:#ffffff;
  color:#075aa3;
  border-radius:50px;
  padding:14px 20px;
  box-shadow:0 15px 35px #00396b30;
  animation:note-float 5s ease-in-out infinite
}

.journey-note-dot {
  height:7px;
  width:7px;
  border-radius:50%;
  background:#ffc900;
  box-shadow:0 0 0 4px #facc0b30
}

.journey-coordinates {
  position:absolute;
  top:15px;
  left:8%;
  color:#bddffa;
  font-size:9px;
  letter-spacing:1.5px
}

.journey-coordinates span {
  margin-left:25px;
  font-size:20px;
  color:#facc0b
}

.facts {
  background:#facc0b;
  border:0
}

.facts-grid {
  padding-block:29px
}

.facts-grid>div {
  border-right-color:#aa8f1740
}

.facts strong {
  color:#075ca2;
  font-variant-numeric:tabular-nums
}

.facts span {
  color:#3d573f
}

.section-heading h2 {
  color:#075b9f
}

.eyebrow {
  color:#4282b4
}

.section-heading .eyebrow {
  letter-spacing:2px
}

.section-heading h2 {
  max-width:750px
}

.product-grid {
  border:0;
  gap:14px
}

.product-card {
  border:1px solid #d5e4f0;
  border-radius:8px;
  padding:24px;
  min-height:200px;
  isolation:isolate;
  overflow:hidden;
  transition:background .35s,transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s
}

.product-card:before {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:4px;
  background:#facc0b;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s var(--ease)
}

.product-card:hover:before {
  transform:scaleX(1)
}

.product-card:hover {
  background:#f3faff;
  transform:translateY(-5px);
  border-color:#94bee0;
  box-shadow:0 15px 40px #1556a610
}

.product-icon {
  display:flex;
  width:45px;
  height:45px;
  align-items:center;
  justify-content:center;
  background:#edf6ff;
  border-radius:10px;
  color:#0869b7;
  margin-top:16px;
  transition:background .35s,transform .5s var(--ease)
}

.product-icon svg {
  width:28px;
  height:28px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round
}

.product-card:hover .product-icon {
  background:#facc0b;
  transform:rotate(-7deg)
}

.product-card h3 {
  font-size:14px;
  margin-top:18px;
  color:#164c77
}

.product-card .arrow {
  color:#0865af;
  font-size:23px
}

.product-card .product-index {
  font-size:9px;
  color:#7496b1
}

.product-card .product-count {
  font-size:10px
}

.directory {
  background:#edf6fd;
  border-block-color:#d2e7f7
}

.directory-controls {
  background:#fff;
  padding:12px;
  border-radius:10px;
  box-shadow:0 8px 30px #075b9f08
}

.search-field input {
  border-color:#cfe0ed;
  background:#f7fbff
}

.search-field input:focus {
  border-color:#1556a6;
  box-shadow:0 0 0 3px #1556a61a
}

.select-field {
  border-color:#cfe0ed
}

.az button {
  transition:color .25s,background .25s,transform .25s
}

.az button:hover {
  background:#d7ebfb;
  transform:translateY(-2px)
}

.az button[aria-pressed=true] {
  background:#1556a6;
  box-shadow:0 3px 0 #facc0b
}

.brand-card {
  border:1px solid #d0e3f2;
  border-radius:8px;
  transform-origin:center;
  transition:transform .5s var(--ease),box-shadow .4s,border-color .3s;
  animation:brand-arrive .55s var(--ease) both;
  position:relative
}

.brand-card:after {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:100%;
  background:#facc0b;
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .45s var(--ease)
}

.brand-card:hover {
  transform:translateY(-6px);
  border-color:#7eb5df;
  box-shadow:0 17px 40px #0462af17
}

.brand-card:hover:after {
  transform:scaleY(1)
}

.brand-mark {
  height:133px;
  padding:25px;
  position:relative
}

.brand-mark img {
  max-width:155px;
  max-height:67px;
  object-fit:contain;
  transition:transform .5s var(--ease);
  width:auto;
  height:auto
}

.brand-card:hover .brand-mark img {
  transform:scale(1.07)
}

.brand-card-body {
  border-top:1px solid #edf3f8;
  padding:17px 20px
}

.brand-card p {
  font-size:10px
}

.brand-card h3 {
  color:#174d77
}

.finder {
  background:#1556a6;
  position:relative;
  overflow:hidden
}

.finder:after {
  content:"";
  position:absolute;
  width:430px;
  height:430px;
  border:80px solid #ffffff06;
  border-radius:50%;
  right:-230px;
  top:25px;
  pointer-events:none
}

.finder .section-heading h2 {
  color:white
}

.finder .section-heading p,.step p {
  color:#d2e9fc
}

.finder .eyebrow {
  color:#c0e2ff
}

.steps {
  border:0;
  gap:18px;
  position:relative
}

.step {
  background:#ffffff0c;
  border:1px solid #ffffff30!important;
  border-radius:8px;
  padding:32px;
  transition:background .3s,transform .4s var(--ease)
}

.step:hover {
  background:#ffffff15;
  transform:translateY(-5px)
}

.step-num {
  color:#facc0b;
  font-weight:650;
  font-size:40px
}

.step h3 {
  font-size:17px
}

.finder-cta h3 {
  color:white
}

.button.light-outline {
  color:white;
  border-color:#a2ceee
}

.button.light-outline:hover {
  background:#1b7ccc
}

.promo-card {
  border-radius:8px;
  border-color:#d3e5f2;
  transition:transform .45s var(--ease),box-shadow .45s
}

.promo-card:hover {
  transform:translateY(-6px);
  box-shadow:0 20px 45px #1556a610
}

.promo-body h3 {
  color:#0e5b98
}

.promo-body .eyebrow {
  color:#5b87aa
}

html[lang=en] .english-artwork {
  background:#1556a6
}

html[lang=en] .english-artwork strong {
  color:#facc0b
}

.carousel-controls {
  background:#0562ae
}

.about {
  background:#fff5b3;
  border-color:#f4e381
}

.about h2 {
  color:#075b9f
}

.about-grid>div>p {
  color:#3f627d
}

.about .eyebrow {
  color:#497187
}

.membership {
  border-color:#decf79
}

.about-values span:before {
  color:#075b9f
}

.branch {
  border-radius:7px;
  background:#f7fbff;
  border-color:#d4e5f2;
  transition:transform .45s var(--ease),border-color .3s,background .3s
}

.branch:hover {
  transform:translateX(5px);
  background:#eef8ff;
  border-color:#87bbdf
}

.branch-num {
  color:#1a77bc
}

.branch-arrow {
  color:#1556a6;
  transition:transform .4s var(--ease)
}

.branch:hover .branch-arrow {
  transform:translate(3px,-3px)
}

.contact-section {
  background:#facc0b;
  color:#075b9f
}

.contact-section h2 {
  color:#075b9f
}

.contact-section .eyebrow {
  color:#32687d
}

.contact-links a {
  border-color:#075b9f40
}

.contact-links a>span:last-child {
  color:#075b9f
}

.contact-links a:hover>span:last-child {
  transform:translate(3px,-3px)
}

.contact-links a>span:last-child {
  transition:transform .3s
}

.footer-bottom {
  color:#607e96
}

footer {
  background:#f7fbff
}

.messenger {
  background:#facc0b;
  border-color:#edca00;
  color:#075398
}

.reveal {
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)
}

.motion-ready .reveal:not(.visible) {
  transform:translateY(32px);
  filter:blur(2px)
}

.motion-ready .reveal.visible {
  filter:blur(0)
}

.scroll-progress {
  position:fixed;
  left:0;
  top:0;
  height:3px;
  background:#facc0b;
  z-index:100;
  transform:scaleX(0);
  transform-origin:left;
  pointer-events:none;
  width:100%
}

@keyframes lane-flow {
  to {
    stroke-dashoffset:-230
  }

}

@keyframes route-flow {
  0% {
    stroke-dashoffset:250;
    opacity:0
  }

  8% {
    opacity:1
  }

  92% {
    opacity:1
  }

  100% {
    stroke-dashoffset:-1300;
    opacity:0
  }

}

@keyframes node-pulse {
  0%,100% {
    transform:scale(1)
  }

  50% {
    transform:scale(1.18)
  }

}

@keyframes note-float {
  0%,100% {
    transform:translateY(0)
  }

  50% {
    transform:translateY(-9px)
  }

}

@keyframes scene-breathe {
  0%,100% {
    transform:rotate(-27deg) scale(1)
  }

  50% {
    transform:rotate(-24deg) scale(1.035)
  }

}

@keyframes map-arrive {
  from {
    opacity:0;
    transform:translateY(35px) rotate(-10deg)
  }

  to {
    opacity:1;
    transform:translateY(0) rotate(-5deg)
  }

}

@keyframes brand-arrive {
  from {
    opacity:0;
    transform:translateY(18px) scale(.98)
  }

  to {
    opacity:1;
    transform:translateY(0) scale(1)
  }

}

@media(max-width:1180px) {
  .hero-grid {
    gap:20px;
    min-height:610px
  }

  .journey-scene {
    height:480px
  }

  .journey-halo {
    width:330px;
    height:330px;
    top:65px
  }

  .product-card {
    padding:20px
  }

  .brand-mark {
    height:125px
  }

  .hero h1 {
    font-size:53px
  }

  .journey-note {
    font-size:8px;
    padding:12px 15px
  }

}

@media(max-width:900px) {
  .hero h1 {
    font-size:45px
  }

  .journey-scene {
    height:430px
  }

  .journey-halo {
    width:270px;
    height:270px;
    top:75px
  }

  .journey-caption strong {
    font-size:26px
  }

  .journey-kicker {
    font-size:7px;
    letter-spacing:.5px
  }

  .journey-note {
    bottom:35px;
    right:0;
    font-size:7px
  }

  .journey-coordinates {
    top:10px;
    left:3%;
    font-size:7px
  }

  .hero-copy>p {
    font-size:13px
  }

  .product-icon {
    width:40px;
    height:40px
  }

  .product-card h3 {
    font-size:13px
  }

  .steps {
    gap:12px
  }

  .step {
    padding:23px
  }

  .directory-controls {
    padding:10px
  }

  .select-field {
    min-height:53px
  }

  .brand-mark img {
    max-width:135px;
    max-height:60px
  }

}

@media(max-width:680px) {
  .header-inner {
    height:72px
  }

  .hero-grid {
    min-height:0;
    gap:0
  }

  .hero-copy {
    padding-top:48px;
    padding-bottom:5px
  }

  .hero h1 {
    font-size:44px;
    max-width:480px;
    letter-spacing:-1.5px
  }

  .hero .eyebrow {
    font-size:8px
  }

  .hero-copy>p {
    font-size:13px
  }

  .hero-art.journey-scene {
    height:330px;
    min-height:0;
    width:100%;
    max-width:400px;
    margin:12px auto 20px
  }

  .journey-map {
    width:104%;
    height:104%;
    top:-1%;
    left:-2%
  }

  .journey-halo {
    width:240px;
    height:240px;
    top:40px
  }

  .journey-caption {
    top:38%
  }

  .journey-caption strong {
    font-size:23px
  }

  .journey-kicker {
    font-size:7px
  }

  .journey-caption-line {
    margin-top:13px;
    width:28px
  }

  .journey-note {
    bottom:17px;
    font-size:7px;
    right:0;
    padding:10px 14px
  }

  .journey-coordinates {
    top:0;
    left:0;
    font-size:7px
  }

  .journey-orbit {
    inset:18px 20px
  }

  .facts-grid {
    padding-block:5px
  }

  .facts-grid>div:nth-child(-n+2) {
    border-bottom-color:#aa8f1740
  }

  .facts-grid>div {
    border-right-color:#aa8f1740
  }

  .facts strong {
    font-size:28px
  }

  .facts span {
    font-size:10px
  }

  .product-grid {
    gap:10px
  }

  .product-card {
    min-height:207px;
    padding:18px 14px
  }

  .product-card h3 {
    font-size:12px
  }

  .product-icon {
    margin-top:15px
  }

  .product-card .product-count {
    font-size:9px
  }

  .brand-grid {
    gap:10px
  }

  .brand-mark {
    height:111px;
    padding:20px 15px
  }

  .brand-mark img {
    max-width:114px;
    max-height:54px
  }

  .brand-card-body {
    padding:14px 12px
  }

  .directory-controls {
    padding:9px;
    gap:9px
  }

  .search-field input {
    background:#fff
  }

  .step h3 {
    font-size:15px
  }

  .step-num {
    font-size:30px
  }

  .steps {
    gap:12px
  }

  .step {
    padding:24px
  }

  .section-heading h2 {
    font-size:29px
  }

  .contact-section h2 {
    font-size:29px
  }

  .about {
    background:#fff5b8
  }

  .brand-card:hover {
    transform:none
  }

  .product-card:hover {
    transform:none
  }

}

@media(prefers-reduced-motion:reduce) {
  .journey-map {
    animation:none;
    transform:rotate(-5deg)
  }

  .route-signal {
    stroke-dasharray:none;
    opacity:1;
    stroke-width:4
  }

  .journey-orbit,.route-guide,.route-node,.journey-note {
    animation:none
  }

  .motion-ready .reveal:not(.visible) {
    filter:none;
    transform:none;
    opacity:1
  }

  .brand-card,.product-card,.step {
    animation:none!important;
    transition:none!important
  }

}

.hero-word {
  display:inline-block;
  animation:word-arrive .85s var(--ease) both
}

.journey-scene {
  transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
  transition:transform .4s var(--ease);
  transform-style:preserve-3d
}

.hero-actions {
  animation:word-arrive 1s .25s var(--ease) both
}

.hero .eyebrow {
  animation:word-arrive .8s var(--ease) both
}

@keyframes word-arrive {
  from {
    opacity:0;
    transform:translateY(25px);
    filter:blur(3px)
  }

  to {
    opacity:1;
    transform:translateY(0);
    filter:blur(0)
  }

}

@media(prefers-reduced-motion:reduce) {
  .hero-word,.hero-actions,.hero .eyebrow {
    animation:none;
    filter:none;
    transform:none
  }

  .journey-scene {
    transform:none;
    transition:none
  }

}

.journey-caption {
  left:13%;
  right:13%;
  top:37%;
  padding:22px 10px;
  background:#0d77c8;
  border:1px solid #ffffff15;
  border-radius:8px;
  box-shadow:0 12px 35px #00498825
}

.journey-caption strong {
  font-size:clamp(21px,2.3vw,32px)
}

.journey-kicker {
  font-size:8px;
  letter-spacing:1px
}

.journey-caption-line {
  margin-top:16px;
  margin-bottom:0
}

@media(max-width:900px) {
  .journey-caption {
    left:6%;
    right:6%;
    padding:18px 8px
  }

  .journey-caption strong {
    font-size:24px
  }

}

@media(max-width:680px) {
  .journey-caption {
    top:35%;
    left:10%;
    right:10%;
    padding:17px 9px
  }

  .journey-caption strong {
    font-size:23px
  }

  .journey-kicker {
    font-size:7px;
    letter-spacing:.5px
  }

}

.detail-logo {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:110px;
  border-radius:6px;
  background:#f5faff;
  margin-top:20px;
  padding:20px
}

.detail-logo img {
  width:auto;
  height:auto;
  max-width:210px;
  max-height:80px;
  object-fit:contain
}

.facts-grid strong {
  min-width:2ch
}

.facts-grid>div:last-child strong {
  min-width:0
}

/* Keep content readable throughout entry motion, even in suspended/background tabs. */
@keyframes word-arrive {
  from {
    transform:translateY(22px)
  }

  to {
    transform:translateY(0)
  }

}

@keyframes map-arrive {
  from {
    transform:translateY(25px) rotate(-9deg)
  }

  to {
    transform:translateY(0) rotate(-5deg)
  }

}

.scene-paused .route-guide,.scene-paused .route-signal,.scene-paused .route-node,.scene-paused .journey-note,.scene-paused .journey-orbit {
  animation-play-state:paused
}


.branch-role {font-size:11px;line-height:1.65;color:var(--blue);margin-top:9px;font-weight:650;}
.branch-note {font-size:10px;line-height:1.65;color:var(--muted);margin-top:5px;}
.branch>div {min-width:0;}

/* Welcome notice: displayed on every page load, without dismissal storage. */
#welcome-dialog {width:min(564px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:48px 40px 36px;border:0;border-radius:20px;text-align:center;background:#fff;color:var(--ink);overflow-y:auto;}
#welcome-dialog::backdrop {background:rgb(0 0 0 / .62);backdrop-filter:blur(2px);}
#welcome-title {font-size:clamp(21px,3vw,28px);line-height:1.5;padding:0 8px;margin:0 0 16px;}
#welcome-text {font-size:16px;line-height:1.85;margin:0 0 26px;}
#welcome-confirm {background:var(--yellow,#ffcf00);color:#123e65;border:0;min-width:136px;justify-content:center;}
.welcome-close {position:absolute;top:12px;right:12px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:30px;cursor:pointer;}
.welcome-close:hover {background:#edf4fb;}
#welcome-dialog button:focus-visible {outline:3px solid var(--blue);outline-offset:4px;}
@media(max-width:480px){#welcome-dialog {padding:52px 24px 28px;}#welcome-text {font-size:14px;line-height:1.85;}}
@media(prefers-reduced-motion:reduce){#welcome-dialog[open] {animation:none;}}

/* Messenger icon button; its translated label remains available to readers. */
a.messenger {width:60px;height:60px;padding:12px;display:grid;place-items:center;border:0;border-radius:50%;background:#087af5;color:#fff;box-shadow:0 8px 28px #087af54d;}
.messenger-logo {display:block;flex:none;}
a.messenger>span {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
a.messenger:focus-visible {outline:3px solid var(--yellow);outline-offset:4px;}
@media(max-width:680px){a.messenger {width:56px;height:56px;padding:10px;}}