* {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    @font-face {
      font-family: "Toyota Regular";
      src: url(/fonts/ToyotaType-Regular.woff2) format("woff2");
      font-style: normal;
      font-weight: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Toyota Light";
      src: url(/fonts/ToyotaType-Light.woff2) format("woff2");
      font-style: normal;
      font-weight: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Toyota Semibold";
      src: url(/fonts/ToyotaType-Semibold.woff2) format("woff2");
      font-style: normal;
      font-weight: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Toyota Bold";
      src: url(/fonts/ToyotaType-Bold.woff2) format("woff2");
      font-style: normal;
      font-weight: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Toyota Book";
      src: url(/fonts/ToyotaType-Book.woff2) format("woff2");
      font-style: normal;
      font-weight: normal;
      font-display: swap;
    }

    body {
      font-family: "Toyota Regular";
      color: #1a1a1a;
      line-height: 1.5;
      background: #fff;
      -webkit-font-smoothing: antialiased
    }

    .hero {
      width: 100%;
      height: 400px;
      background: #f4f4f4 url('/images/Large-Landscape.jpg') center -25px/cover no-repeat;
      padding-top: 24px;
    }

    .container {
      margin: 0 auto;
      padding: 0 24px;
      max-width: 1140px;
    }

    .header-content {
      text-align: center;
      position: relative;
    }

    .header-content.footer {
      margin-top: 0px;
    }

    .header-content h1 {
      font-size: 28px;
      font-weight: 500;
      color: #282830;
      margin-bottom: 8px
    }

    .divider {
      width: 60px;
      height: 3px;
      background: #f02;
      margin: 0 auto 70px
    }

    .header-content.footer p {
      font-size: 13px;
      color: #282830;
      line-height: 1.75;
      margin-bottom: 14px;
      position: relative;
    }

    .header-content p {
      font-size: 13px;
      color: #282830;
      line-height: 1.75;
      margin-bottom: 14px;
      text-align: left;
      position: absolute;
      top: 70px;
    }

    .toyo-logo {
      width: 250px;
      margin-bottom: auto;
      margin-top: 70px;
      margin-left: 150px;
    }

    .dl-box {
      margin-top: 36px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px
    }

    .dl-box .lbl {
      font-size: 11px;
      color: #999;
      text-transform: uppercase;
      letter-spacing: .5px
    }

    .dl-box .doc-name {
      font-size: 14px;
      font-weight: 500;
      color: #333
    }

    .btn-dark {
      border: none;
      cursor: pointer;
      width: 130px;
      background-color: rgba(40, 40, 48, 1);
      color: rgba(255, 255, 255, 1);
      border-radius: 50px;
      padding: 10px 20px;
      font-size: 1rem;
      line-height: 1.5;
    }

    .btn-dark:hover {
      background: #111
    }

    .accordion-wrapper {
      margin-top: 52px;
      margin-bottom: 48px
    }

    .accordion-item {
      border-bottom: 1px solid #e5e7eb
    }

    .accordion-header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 27px 0;
      background: none;
      border: none;
      font-size: 18px;
      font-weight: 700;
      color: #282830;
      cursor: pointer;
      text-align: left;
      font-family: 'Inter', sans-serif;
      transition: color .2s;
    }

    .header-left {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 15px;
    }

    .header-left img {
      width: 110px;
    }

    .acc-icon {
      width: 15px;
      height: 15px;
      fill: none;
      stroke: #888;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform .3s;
      flex-shrink: 0
    }

    .accordion-item.active .acc-icon {
      transform: rotate(180deg)
    }

    .accordion-content {
      display: none;
      padding-bottom: 28px
    }

    .accordion-item.active .accordion-content {
      display: block;
      animation: fadeIn .25s ease
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-4px)
      }

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

    .doc-category {
      margin-top: 22px
    }

    .doc-category h3 {
      font-size: 15px;
      font-weight: 600;
      color: #282830;
      margin-bottom: 10px
    }

    .button-group {
      display: flex;
      flex-wrap: wrap;
      gap: 10px
    }

    .btn-outline {
      background: transparent;
      border: 1px solid #282830;
      color: #282830;
      padding: 14px 16px;
      font-size: 16px;
      font-family: 'Inter', sans-serif;
      cursor: pointer;
      transition: all .2s;
      white-space: nowrap;
      text-decoration: none;
      margin-right: 0.8rem;
      margin-bottom: 0.8rem;
      border-radius: 50px;
    }

    .btn-outline:hover {
      background: rgba(40, 40, 48, 0.8);
      border-color: rgba(40, 40, 48, 0.8);
      color: #fff;
    }

    .footnotes {
      margin-top: 32px;
      margin-bottom: 52px
    }

    .footnotes p {
      font-size: 12.5px;
      color: #666;
      line-height: 1.65;
      margin-bottom: 10px
    }

    .query-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 500px;
      margin-left: auto;
      margin-right: auto;
      transform: translateY(-3px);
      padding: 20px;
      margin-top: -46px;
      border-radius: 20px !important;
      background: rgba(255, 255, 255, 0.1) !important;
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      box-shadow: inset 2px 2px 1px -2px #ffffff, inset -2px -2px 1px -2px rgba(255, 255, 255, 0.8), inset 0px 1px 3px -2px rgba(255, 255, 255, 0.8), 0 4px 20px rgba(0, 0, 0, 0);
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      border: none !important;

    }

    .form-group {
      display: flex;
      flex-direction: row;
      width: 100%;
      max-width: 440px;
      gap: 18px;
    }

    .query-section label {
      color: #212529;
      margin-bottom: 7px;
      font-size: 15px;
      font-weight: 700;
      line-height: 20px;
      text-align: left;
      width: 440px;
    }

    .form-group input {
      border: none;
      width: 300px;
      padding: 8px 0px;
      display: flex;
      align-items: center;
      gap: 8px;
      align-self: stretch;
      border: none;
      border-bottom: 1px solid;
      border-radius: 0px;
      background: transparent;
      font-size: 16px;
    }

    .form-group input:focus {
      border-bottom-color: #111
    }

    .form-group input:focus-visible {
      border-bottom-color: #111;
    }

    .form-group input::placeholder {
      color: #6C7073;
    }

    .configurator-hero {
      overflow: hidden;
      background-color: #282830;
      height: 20px;
    }

    .configurator-hero__container {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .configurator-hero__content {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 22px;
      width: 100%;
    }

    .configurator-hero__logo {
      width: 4rem;
      height: 2.6rem;
      background-size: contain;
      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCA0MCAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5Ljk5OTQgMEM4Ljk1Mzc3IDAgMCA1LjgyMDY5IDAgMTMuMDAwNkMwIDIwLjE4MDYgOC45NTM3NyAyNiAxOS45OTk0IDI2QzMxLjA0NSAyNiA0MCAyMC4xNzkzIDQwIDEzLjAwMDZDNDAgNS44MjE5NiAzMS4wNDUgMCAxOS45OTk0IDBaTTE5Ljk5OTQgMjAuNDE5NEMxOC4zNTYyIDIwLjQxOTQgMTcuMDE2NSAxNy4xNjg2IDE2LjkzMDUgMTMuMDc2OUMxNy45MjAyIDEzLjE2NzEgMTguOTUyOCAxMy4yMTQxIDE5Ljk5OTQgMTMuMjE0MUMyMS4wNDU5IDEzLjIxNDEgMjIuMDc4NiAxMy4xNjcxIDIzLjA2OTUgMTMuMDc2OUMyMi45ODIzIDE3LjE2ODYgMjEuNjQxMiAyMC40MTk0IDE5Ljk5OTQgMjAuNDE5NFpNMTcuMTM1MyA5LjgzMTE0QzE3LjU4MjcgNi45Mzg1OCAxOC42OTYyIDQuODg5NTMgMTkuOTk5NCA0Ljg4OTUzQzIxLjMwMjUgNC44ODk1MyAyMi40MTczIDYuOTM4NTggMjIuODY0NyA5LjgzMTE0QzIxLjk0ODQgOS45MTM3MiAyMC45ODkgOS45NTgxOCAxOS45OTk0IDkuOTU4MThDMTkuMDA5NyA5Ljk1ODE4IDE4LjA1MTYgOS45MDg2MyAxNy4xMzUzIDkuODMxMTRaTTE5Ljk5OTQgMS44ODI2NEMxNy44NTA3IDEuODgyNjQgMTYuMDI1NSA1LjEwOTMgMTUuMzUwNiA5LjYxMTM4QzExLjI4MzIgOC45NzYyMSA4LjQ0MzE0IDcuNTIyOTQgOC40NDMxNCA1LjgzNTkzQzguNDQzMTQgMy41NTY5NSAxMy42MTc3IDEuNzE0OTYgMTkuOTk5NCAxLjcxNDk2QzI2LjM4MSAxLjcxNDk2IDMxLjU1NTYgMy41NTY5NSAzMS41NTU2IDUuODM1OTNDMzEuNTU1NiA3LjUyMjk0IDI4LjcxNjggOC45NzI0IDI0LjY0OTQgOS42MTEzOEMyMy45NzQ1IDUuMTA5MyAyMi4xNDY4IDEuODgyNjQgMTkuOTk5NCAxLjg4MjY0Wk0yLjg2Nzg5IDEyLjUxMjhDMi44Njc4OSAxMC4zMDg4IDMuNzEwOTQgOC4yNDQ0OSA1LjE4MDkgNi40Njg1NkM1LjE2NDA0IDYuNTk0ODkgNS4xNTU2IDYuNzIyMiA1LjE1NTYyIDYuODQ5NjZDNS4xNTU2MiA5LjYyNjYyIDkuMjk4ODMgMTEuOTg5NCAxNS4wNzc2IDEyLjg1OTZDMTUuMDc3NiAxMy4wNjE2IDE1LjA3NzYgMTMuMjY0OSAxNS4wNzc2IDEzLjQ2OTRDMTUuMDc3NiAxOC42NDIyIDE2LjUyMSAyMy4wMjIzIDE4LjUxMyAyNC41MDg2QzkuNzQzNzQgMjMuOTcyNSAyLjg2Nzg5IDE4LjgwMSAyLjg2Nzg5IDEyLjUxMjhaTTIxLjQ4NyAyNC41MDM1QzIzLjQ4MDMgMjMuMDE3MiAyNC45MjM3IDE4LjYzNzEgMjQuOTIzNyAxMy40NjQzQzI0LjkyMzcgMTMuMjU5OCAyNC45MjM3IDEzLjA1NjUgMjQuOTIzNyAxMi44NTQ1QzMwLjcwMjQgMTEuOTg0NCAzNC44NDU2IDkuNjIxNTQgMzQuODQ1NiA2Ljg0NDU4QzM0Ljg0NTkgNi43MTcwNyAzNC44MzcgNi41ODk3MSAzNC44MTkxIDYuNDYzNDhDMzYuMjkwMyA4LjI0MTk1IDM3LjEzMzQgMTAuMzAzNyAzNy4xMzM0IDEyLjUwNzdDMzcuMTMyMSAxOC44MDEgMzAuMjU1IDIzLjk3MjUgMjEuNDg3IDI0LjUwMzVaIiBmaWxsPSIjMjgyODMwIi8+Cjwvc3ZnPgo=);
      background-repeat: no-repeat;
    }

    .configurator-hero__copy {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      color: #FFFFFF;
    }

    .configurator-hero__title {
      margin: 0;
      color: #212529;
      font-size: 30px;
      font-weight: 600;
      line-height: 0.96;
    }

    .filter-section {
      margin-top: 60px;
      margin-bottom: 30px;
    }

    .filter-section h2 {
      text-align: center;
      font-size: 32px;
      font-weight: 500;
      color: #282830;
      margin-bottom: 40px;
    }

    .filter-controls {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
    }

    .filter-info {
      font-size: 20px;
      color: #282830;
    }

    .filter-buttons {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .filter-btn {
      background: #fff;
      border: 1px solid #ccc;
      color: #444;
      padding: 10px 24px;
      border-radius: 50px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      font-family: 'Inter', sans-serif;
    }

    .filter-btn:hover {
      border-color: #282830;
    }

    .filter-btn.active {
      background: #282830;
      border-color: #282830;
      color: #fff;
    }



    @media(max-width:600px) {
      .hero {
        height: 220px
      }

      .container {
        padding: 36px 16px
      }

      .header-content h1 {
        font-size: 22px
      }
    }

    /* ===== Premium redesign override ===== */
    :root {
      --toyota-red: #eb0a1e;
      --ink: #24242d;
      --muted: #737782;
      --line: #e8ebf0;
      --shadow-soft: 0 18px 55px rgba(24, 28, 38, .10);
      --shadow-card: 0 10px 35px rgba(24, 28, 38, .07);
    }

    body {
      background: white;
      color: var(--ink);
      font-family: "Toyota Regular", Arial, sans-serif;
    }

    .hero {
      height: 410px;
      position: relative;
      background: #eef3f8 url('/images/Large-Landscape.jpg') center -28px/cover no-repeat;
      overflow: hidden;
    }

    .hero::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 110px;
      background: linear-gradient(180deg, rgba(248, 250, 252, 0), rgba(248, 250, 252, .78) 62%, #f8fafc);
      pointer-events: none;
    }

    .hero .container {
      position: relative;
      z-index: 2;
    }

    .configurator-hero__container {
      justify-content: flex-start;
      padding-top: 10px;
    }

    .configurator-hero__logo {
      width: 58px;
      height: 38px;
      opacity: .95;
    }

    .configurator-hero__title {
      font-family: "Toyota Semibold", Arial, sans-serif;
      font-size: 27px;
      line-height: 1;
      letter-spacing: -.02em;
      color: var(--ink);
    }

    .toyo-logo {
      width: 265px;
      margin-top: 70px;
      margin-left: 130px;
      filter: drop-shadow(0 14px 25px rgba(20, 20, 28, .10));
    }

    .configurator-hero {
      height: 0;
      background: transparent;
    }

    .query-section {
      width: min(720px, calc(100vw - 48px));
      min-height: 104px;
      margin-top: -68px;
      padding: 22px 28px 22px 88px;
      position: relative;
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: auto auto;
      column-gap: 28px;
      align-items: center;
      border-radius: 22px !important;
      border: 1px solid rgba(255, 255, 255, .72) !important;
      backdrop-filter: blur(22px) saturate(140%);
      -webkit-backdrop-filter: blur(22px) saturate(140%);
      box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, .85);
      cursor: default;
    }

    .query-section::before {
      content: "⌕";
      position: absolute;
      left: 30px;
      top: 50%;
      transform: translateY(-50%);
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      color: var(--toyota-red);
      font-size: 30px;
      line-height: 1;
      background: rgba(255, 255, 255, .72);
      box-shadow: 0 8px 22px rgba(24, 28, 38, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
    }

    .query-section label {
      grid-column: 1/2;
      width: auto;
      margin: 0 0 4px;
      font-family: "Toyota Semibold", Arial, sans-serif;
      font-size: 15px;
      color: var(--ink);
    }

    .form-group {
      grid-column: 1/3;
      display: grid;
      grid-template-columns: 1fr 170px;
      align-items: end;
      gap: 26px;
      width: 100%;
      max-width: none;
    }

    .form-group input {
      width: 100%;
      padding: 9px 0 12px;
      font-size: 17px;
      color: var(--ink);
      border-bottom: 1px solid rgba(36, 36, 45, .36);
      outline: none;
    }

    .form-group input:focus,
    .form-group input:focus-visible {
      border-bottom-color: var(--toyota-red);
    }

    .btn-dark {
      width: 170px;
      padding: 15px 22px;
      border-radius: 999px;
      font-family: "Toyota Semibold", Arial, sans-serif;
      background: linear-gradient(135deg, #ff2635, var(--toyota-red));
      box-shadow: 0 12px 24px rgba(235, 10, 30, .26);
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .btn-dark::after {
      content: "→";
      margin-left: 14px;
      font-size: 18px;
    }

    .btn-dark:hover {
      background: linear-gradient(135deg, #ff3b48, #d90719);
      transform: translateY(-1px);
      box-shadow: 0 15px 30px rgba(235, 10, 30, .32);
    }

    .filter-section {
      margin-top: 42px;
      margin-bottom: 22px;
    }

    .filter-controls {
      gap: 22px;
    }

    .filter-info {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 11px 18px;
      border-radius: 999px;
      font-family: "Toyota Semibold", Arial, sans-serif;
      font-size: 16px;
      background: rgba(255, 255, 255, .82);
      color: var(--ink);
      box-shadow: 0 8px 24px rgba(24, 28, 38, .06);
      border: 1px solid rgba(232, 235, 240, .9);
    }

    .filter-info #model-count {
      color: var(--toyota-red);
    }

    .filter-btn {
      min-height: 44px;
      padding: 10px 26px;
      border-color: rgba(215, 219, 226, .95);
      background: rgba(255, 255, 255, .78);
      box-shadow: 0 7px 20px rgba(24, 28, 38, .045);
      font-family: "Toyota Regular", Arial, sans-serif;
      font-size: 15px;
    }

    .filter-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(36, 36, 45, .32);
      box-shadow: 0 10px 26px rgba(24, 28, 38, .07);
    }

    .filter-btn.active {
      background: linear-gradient(135deg, #2c2c36, #181820);
      border-color: #24242d;
      box-shadow: 0 12px 25px rgba(24, 24, 32, .18);
    }

    .accordion-wrapper {
      margin-top: 26px;
      margin-bottom: 70px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .accordion-item {
      overflow: hidden;
      border: 1px solid rgba(232, 235, 240, .88);
      border-radius: 18px;
      background: rgba(255, 255, 255, .86);
      box-shadow: var(--shadow-card);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }

    .accordion-item:hover {
      transform: translateY(-1px);
      border-color: rgba(235, 10, 30, .16);
      box-shadow: 0 14px 40px rgba(24, 28, 38, .095);
    }

    .accordion-item.active {
      border-color: rgba(235, 10, 30, .22);
    }

    .accordion-header {
      padding: 20px 24px;
      font-family: "Toyota Semibold", Arial, sans-serif;
      font-size: 20px;
    }

    .header-left {
      gap: 24px;
    }

    .header-left img {
      width: 138px;
      max-height: 58px;
      object-fit: contain;
      filter: drop-shadow(0 10px 14px rgba(24, 28, 38, .10));
    }

    .acc-icon {
      width: 42px;
      height: 42px;
      padding: 12px;
      border-radius: 50%;
      background: #fff;
      stroke: var(--toyota-red);
      box-shadow: 0 8px 22px rgba(24, 28, 38, .08);
    }

    .accordion-content {
      padding: 0 28px 28px 28px;
    }

    .doc-category {
      margin-top: 0;
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }

    .doc-category+.doc-category {
      margin-top: 22px;
    }

    .doc-category h3 {
      font-family: "Toyota Semibold", Arial, sans-serif;
      font-size: 15px;
      color: var(--ink);
      margin-bottom: 14px;
    }

    .button-group {
      gap: 10px;
    }

    .btn-outline {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      margin: 0;
      padding: 10px 18px;
      border-color: rgba(36, 36, 45, .16);
      background: #fff;
      font-family: "Toyota Regular", Arial, sans-serif;
      font-size: 14px;
      color: var(--ink);
      box-shadow: 0 5px 16px rgba(24, 28, 38, .045);
    }

    .btn-outline:hover {
      background: var(--ink);
      border-color: var(--ink);
      color: #fff;
      transform: translateY(-1px);
    }

    @media(max-width:768px) {
      .hero {
        height: 320px;
        background-position: center top;
      }

      .hero .container {
        padding-top: 0;
      }

      .container {
        padding-left: 18px;
        padding-right: 18px;
      }

      .configurator-hero__title {
        font-size: 22px;
      }

      .toyo-logo {
        width: 150px;
        margin-left: 32px;
        margin-top: 58px;
      }

      .query-section {
        width: calc(100vw - 32px);
        margin-top: -54px;
        padding: 20px 18px 20px;
        display: block;
      }

      .query-section::before {
        display: none;
      }

      .query-section label {
        display: block;
        margin-bottom: 6px;
      }

      .form-group {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .btn-dark {
        width: 100%;
      }

      .filter-controls {
        align-items: flex-start;
      }

      .filter-btn {
        white-space: nowrap;
      }

      .accordion-header {
        padding: 16px;
        font-size: 17px;
      }

      .header-left {
        gap: 14px;
      }

      .header-left img {
        width: 96px;
      }

      .acc-icon {
        width: 36px;
        height: 36px;
        padding: 10px;
      }

      .accordion-content {
        padding: 0 16px 22px;
      }
    }