/* ===== DESIGN TOKENS (System Design §5.1 — trích demo-3-industrial-light) ===== */
    :root {
      --bg: #eef2f7;
      --bg-2: #ffffff;
      --panel: #ffffff;
      --line: #dbe2ec;
      --accent: #f5a015;
      /* cam/amber — chữ A trong logo */
      --accent-2: #ffb833;
      --steel: #1a5cd0;
      /* xanh royal theo logo */
      --text: #16202e;
      --muted: #5f6f80;
      --radius: 8px;
      --font-base: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    }

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

    html {
      scroll-behavior: smooth;
      font-size: 16px
    }

    body {
      font-family: var(--font-base);
      background: var(--bg);
      color: var(--text);
      line-height: 1.65;
      overflow-x: hidden;
      font-size: 1rem
    }

    h1,
    h2,
    h3,
    h4 {
      font-family: var(--font-base);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .01em;
      line-height: 1.15
    }

    a {
      text-decoration: none;
      color: inherit
    }

    img {
      max-width: 100%;
      display: block
    }

    .wrap {
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 28px
    }

    .section {
      padding: 64px 0 80px;
      position: relative
    }

    .muted {
      color: var(--muted)
    }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 15px 30px;
      font-weight: 600;
      font-size: 15px;
      letter-spacing: .06em;
      text-transform: uppercase;
      border: 0;
      cursor: pointer;
      transition: .22s;
      clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%)
    }

    .btn-acc {
      background: var(--accent);
      color: #160a00
    }

    .btn-acc:hover {
      background: var(--accent-2)
    }

    .btn-out {
      background: transparent;
      border: 2px solid var(--line);
      color: var(--text);
      clip-path: none
    }

    .btn-out:hover {
      border-color: var(--accent);
      color: var(--accent)
    }

    /* Kicker + headings */
    .kicker {
      font-weight: 600;
      letter-spacing: .22em;
      font-size: 13px;
      text-transform: uppercase;
      color: var(--accent);
      display: inline-flex;
      align-items: center;
      gap: 10px
    }

    .kicker::before {
      content: "";
      width: 34px;
      height: 2px;
      background: var(--accent)
    }

    .sh {
      font-size: clamp(28px, 3.6vw, 46px);
      font-weight: 700
    }

    .chev {
      display: inline-block;
      width: 8px;
      height: 8px;
      border: solid currentColor;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
      vertical-align: middle;
      position: relative;
      top: -2px;
      transition: transform .25s
    }

    .num {
      font-size: 15px;
      color: var(--accent);
      font-weight: 700;
      letter-spacing: .1em
    }

    /* ===== Header ===== */
    header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255, 255, 255, .92);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line)
    }

    header .wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 80px
    }

    .logo {
      display: flex;
      align-items: center
    }

    .logoimg {
      height: 44px;
      width: auto;
      display: block
    }

    nav.menu {
      display: flex;
      gap: 30px;
      font-weight: 500;
      font-size: 15px;
      text-transform: uppercase;
      letter-spacing: .04em
    }

    nav.menu>a,
    nav.menu .has-sub>a {
      color: #3a4a59;
      position: relative;
      padding: 28px 0;
      display: inline-block
    }

    nav.menu a:hover {
      color: var(--accent)
    }

    nav.menu .has-sub {
      position: relative
    }

    nav.menu .sub {
      position: absolute;
      top: 100%;
      left: -14px;
      min-width: 210px;
      background: var(--bg-2);
      border: 1px solid var(--line);
      box-shadow: 0 18px 40px rgba(16, 42, 80, .12);
      padding: 8px 0;
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: .2s
    }

    nav.menu .has-sub:hover .sub {
      opacity: 1;
      visibility: visible;
      transform: translateY(0)
    }

    nav.menu .sub a {
      display: block;
      padding: 11px 18px;
      font-size: 14px;
      color: var(--text);
      letter-spacing: .02em
    }

    nav.menu .sub a:hover {
      background: #f5f8fc;
      color: var(--accent)
    }

    .hcta {
      display: flex;
      gap: 14px;
      align-items: center
    }

    .hotline {
      font-size: 14px;
      color: var(--muted);
      text-align: right;
      line-height: 1.2
    }

    .hotline b {
      display: block;
      font-size: 18px;
      color: var(--steel);
      letter-spacing: .02em
    }

    .burger {
      display: none;
      place-items: center;
      width: 46px;
      height: 46px;
      border: 1px solid var(--line);
      background: transparent;
      color: var(--text);
      cursor: pointer;
      font-size: 20px
    }

    /* Mobile drawer */
    .mobile-nav {
      position: fixed;
      inset: 0 0 0 auto;
      width: 280px;
      max-width: 84vw;
      background: var(--bg-2);
      z-index: 120;
      transform: translateX(100%);
      transition: .28s;
      box-shadow: -12px 0 40px rgba(16, 42, 80, .16);
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .mobile-nav.open {
      transform: translateX(0)
    }

    .mobile-nav .x {
      align-self: flex-end;
      font-size: 26px;
      border: 0;
      background: none;
      cursor: pointer;
      color: var(--text)
    }

    .mobile-nav a {
      padding: 13px 6px;
      border-bottom: 1px solid var(--line);
      text-transform: uppercase;
      font-weight: 500;
      font-size: 15px;
      letter-spacing: .03em
    }

    .mobile-nav a.sub-item {
      padding-left: 22px;
      font-size: 13.5px;
      text-transform: none;
      color: var(--muted)
    }

    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(8, 18, 38, .5);
      z-index: 110;
      opacity: 0;
      visibility: hidden;
      transition: .28s
    }

    .overlay.open {
      opacity: 1;
      visibility: visible
    }

    /* ===== Hero slider — ảnh lớn, ít chữ, phủ chéo góc ===== */
    .hero {
      position: relative;
      min-height: 580px;
      overflow: hidden;
      border-bottom: 1px solid var(--line)
    }

    .slide {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity .9s ease
    }

    .slide.active {
      opacity: 1;
      visibility: visible
    }

    .slide img.bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 1;
      transform: scale(1.06);
      transition: transform 7s ease
    }

    .slide.active img.bg {
      transform: scale(1)
    }

    /* lớp phủ tối từ trái, cắt chéo qua 1 góc */
    .slide::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, rgba(8, 16, 32, .88) 0%, rgba(8, 16, 32, .62) 32%, rgba(8, 16, 32, .18) 52%, rgba(8, 16, 32, 0) 68%)
    }

    .slide .wrap {
      position: relative;
      z-index: 2;
      max-width: none;
      width: 100%;
      margin: 0;
      padding: 56px 28px 56px 84px
    }

    .slide .htext {
      max-width: 500px
    }

    .slide .htext .kicker {
      color: var(--accent-2)
    }

    .slide h1 {
      font-size: clamp(24px, 3vw, 44px);
      font-weight: 800;
      margin: 14px 0 14px;
      color: #fff;
      line-height: 1.14;
      text-transform: none
    }

    .slide h1 em {
      font-style: normal;
      color: var(--accent)
    }

    .slide p {
      font-size: 15px;
      color: #d7e2ee;
      max-width: 430px;
      margin-bottom: 26px
    }

    .slide .actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap
    }

    .slide .btn-out {
      border-color: rgba(255, 255, 255, .65);
      color: #fff
    }

    .slide .btn-out:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: rgba(255, 255, 255, .06)
    }

    .hero .dots {
      position: absolute;
      bottom: 26px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
      display: flex;
      gap: 12px
    }

    .hero .dots button {
      width: 38px;
      height: 6px;
      border: 1px solid rgba(0, 0, 0, .28);
      background: rgba(255, 255, 255, .92);
      cursor: pointer;
      transition: .25s;
      box-shadow: 0 1px 4px rgba(0, 0, 0, .35)
    }

    .hero .dots button.on {
      background: var(--accent);
      border-color: var(--accent);
      width: 54px
    }

    .hero .arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 20;
      width: 50px;
      height: 50px;
      display: grid;
      place-items: center;
      background: rgba(8, 16, 32, .45);
      border: 1px solid rgba(255, 255, 255, .6);
      cursor: pointer;
      font-size: 24px;
      line-height: 1;
      color: #fff;
      transition: .2s;
      backdrop-filter: blur(2px)
    }

    .hero .arrow:hover {
      background: var(--accent);
      border-color: var(--accent);
      color: #160a00
    }

    .hero .prev {
      left: 18px
    }

    .hero .next {
      right: 18px
    }

    /* Ticker */
    .ticker {
      background: var(--accent);
      color: #160a00;
      overflow: hidden;
      white-space: nowrap
    }

    .ticker .t {
      display: inline-flex;
      gap: 60px;
      padding: 15px 0;
      animation: tick 22s linear infinite;
      font-weight: 700;
      letter-spacing: .06em;
      font-size: 16px;
      text-transform: uppercase
    }

    @keyframes tick {
      to {
        transform: translateX(-50%)
      }
    }

    .ticker .t span {
      display: inline-flex;
      gap: 60px
    }

    /* ===== Featured products (slideshow) ===== */
    .sec-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 20px;
      flex-wrap: wrap;
      margin-bottom: 44px
    }

    .fp-viewport {
      overflow: hidden
    }

    .fp-track {
      display: flex;
      transition: transform .5s ease
    }

    .fp-track .prod {
      flex: 0 0 calc((100% - 40px)/3);
      margin-right: 20px
    }

    .prod {
      background: var(--panel);
      border: 1px solid var(--line);
      overflow: hidden;
      transition: .25s;
      box-shadow: 0 8px 24px rgba(16, 42, 80, .05)
    }

    .prod:hover {
      border-color: var(--accent);
      box-shadow: 0 18px 44px rgba(16, 42, 80, .12)
    }

    .prod .pic {
      height: 280px;
      position: relative;
      overflow: hidden
    }

    .prod .pic img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: .4s
    }

    .prod:hover .pic img {
      transform: scale(1.07)
    }

    .prod .pic .badge {
      position: absolute;
      top: 0;
      left: 0;
      background: var(--accent);
      color: #160a00;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: .06em;
      padding: 7px 16px;
      text-transform: uppercase;
      clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%)
    }

    .prod .pic .badge.new {
      background: var(--steel);
      color: #fff
    }

    .prod .body {
      padding: 22px
    }

    .prod .brand {
      font-size: 13px;
      color: var(--steel);
      letter-spacing: .1em;
      text-transform: uppercase;
      font-weight: 500
    }

    .prod h3 {
      font-size: 22px;
      font-weight: 700;
      margin: 6px 0 14px;
      text-transform: none
    }

    .prod .specs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--line);
      margin-bottom: 16px
    }

    .prod .specs div {
      padding: 12px 0;
      text-align: center;
      border-right: 1px solid var(--line)
    }

    .prod .specs div:last-child {
      border-right: 0
    }

    .prod .specs b {
      font-size: 18px;
      display: block;
      color: var(--text)
    }

    .prod .specs span {
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .05em
    }

    .prod .foot {
      display: flex;
      justify-content: space-between;
      align-items: center
    }

    .prod .foot a {
      font-size: 14px;
      letter-spacing: .05em;
      text-transform: uppercase;
      font-weight: 500
    }

    .prod .foot .q {
      color: var(--accent)
    }

    .fp-nav {
      display: flex;
      gap: 10px
    }

    .fp-nav button {
      width: 46px;
      height: 46px;
      border: 1px solid var(--line);
      background: var(--bg-2);
      cursor: pointer;
      font-size: 20px;
      color: var(--text);
      transition: .2s
    }

    .fp-nav button:hover {
      background: var(--accent);
      color: #160a00;
      border-color: var(--accent)
    }

    /* ===== New products (slideshow) ===== */
    .np {
      background: var(--bg-2)
    }

    .prodgrid4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px
    }

    .np-top-right {
      display: flex;
      align-items: center;
      gap: 14px
    }

    .btn-sm {
      padding: 11px 20px;
      font-size: 13px
    }

    /* ===== News ===== */
    .bloggrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--line)
    }

    .post {
      border-bottom: 1px solid var(--line);
      border-right: 1px solid var(--line);
      transition: .25s;
      background: var(--bg-2)
    }

    .post:first-child {
      border-left: 1px solid var(--line)
    }

    .post:hover {
      background: #f7f9fc
    }

    .post .pic {
      height: 200px;
      overflow: hidden
    }

    .post .pic img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: .4s
    }

    .post:hover .pic img {
      transform: scale(1.05)
    }

    .post .body {
      padding: 24px
    }

    .post .meta {
      display: flex;
      gap: 12px;
      font-size: 12px;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 12px;
      font-weight: 500
    }

    .post .meta .d {
      color: var(--muted)
    }

    .post h3 {
      font-size: 20px;
      font-weight: 700;
      line-height: 1.25;
      margin-bottom: 14px;
      text-transform: none
    }

    .post .rm {
      font-size: 14px;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: var(--steel);
      font-weight: 500
    }

    .post:hover .rm {
      color: var(--accent)
    }

    /* ===== Partners ===== */
    .partners {
      background: var(--bg-2)
    }

    .partners .marquee {
      overflow: hidden;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent)
    }

    .partners .track {
      display: flex;
      width: max-content;
      animation: scrollx 32s linear infinite
    }

    .partners .marquee:hover .track {
      animation-play-state: paused
    }

    .partners .p {
      flex: 0 0 220px;
      height: 120px;
      display: grid;
      place-items: center;
      color: #90a0b2;
      transition: color .25s, background .25s;
      padding: 18px;
      border-right: 1px solid var(--line)
    }

    .partners .p svg {
      height: 38px;
      width: auto;
      max-width: 88%
    }

    .partners .p img {
      max-height: 60px;
      width: auto;
      max-width: 82%;
      object-fit: contain;
      filter: grayscale(1);
      opacity: .6;
      transition: .25s
    }

    .partners .p:hover img {
      filter: none;
      opacity: 1
    }

    .partners .p:hover {
      background: #f5f8fc
    }

    @keyframes scrollx {
      from {
        transform: translateX(0)
      }

      to {
        transform: translateX(-50%)
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .partners .track {
        animation: none
      }
    }

    /* ===== Contact band ===== */
    .contact {
      position: relative;
      overflow: hidden;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line)
    }

    .contact img.bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .22
    }

    .contact::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--bg-2), rgba(255, 255, 255, .5))
    }

    .contact .wrap {
      position: relative;
      z-index: 2;
      padding: 90px 28px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center
    }

    .contact h2 {
      font-size: clamp(28px, 3.8vw, 48px)
    }

    .contact h2 em {
      font-style: normal;
      color: var(--accent)
    }

    .contact p.lead {
      color: var(--muted);
      margin-top: 12px;
      max-width: 460px
    }

    .cform {
      background: var(--bg-2);
      border: 1px solid var(--line);
      padding: 30px;
      box-shadow: 0 18px 50px rgba(16, 42, 80, .1)
    }

    .cform .row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px
    }

    .cform label {
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      display: block;
      margin: 14px 0 6px;
      text-transform: uppercase;
      letter-spacing: .04em
    }

    .cform input,
    .cform textarea {
      width: 100%;
      padding: 13px 14px;
      border: 1px solid var(--line);
      background: #fff;
      font-family: var(--font-base);
      font-size: 15px;
      color: var(--text);
      transition: .2s
    }

    .cform input:focus,
    .cform textarea:focus {
      outline: 0;
      border-color: var(--accent)
    }

    .cform textarea {
      resize: vertical;
      min-height: 96px
    }

    .cform .btn {
      width: 100%;
      justify-content: center;
      margin-top: 18px
    }

    /* ===== Footer (nền sáng) ===== */
    footer {
      background: var(--bg-2);
      border-top: 3px solid var(--accent);
      padding: 72px 0 0;
      color: var(--text)
    }

    .fgrid {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
      gap: 40px;
      padding-bottom: 48px
    }

    footer h4 {
      color: var(--text);
      letter-spacing: .06em;
      margin-bottom: 20px;
      font-size: 16px
    }

    footer .logo {
      margin-bottom: 16px
    }

    footer ul {
      list-style: none;
      display: grid;
      gap: 11px
    }

    footer ul a {
      color: var(--muted);
      font-size: 14.5px
    }

    footer ul a:hover {
      color: var(--accent)
    }

    footer li {
      color: var(--muted);
      font-size: 14.5px
    }

    footer p {
      color: var(--muted);
      font-size: 14.5px;
      margin-bottom: 14px
    }

    .social {
      display: flex;
      gap: 10px;
      margin-top: 10px
    }

    .social a {
      width: 40px;
      height: 40px;
      border: 1px solid var(--line);
      display: grid;
      place-items: center;
      color: var(--muted);
      transition: .2s;
      font-weight: 700
    }

    .social a:hover {
      border-color: var(--accent);
      color: var(--accent)
    }

    .fbar {
      border-top: 1px solid var(--line);
      padding: 22px 0;
      text-align: center;
      font-size: 13.5px;
      color: var(--muted)
    }

    /* ===== Floating contact ===== */
    .float {
      position: fixed;
      right: 20px;
      bottom: 22px;
      z-index: 60;
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .float a {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 100%, 0 100%);
      box-shadow: 0 8px 20px rgba(16, 42, 80, .25)
    }

    .float .phone {
      background: #1f9d4d
    }

    .float .zalo {
      background: #0068ff
    }

    .scroll-top {
      position: fixed;
      left: 20px;
      bottom: 22px;
      z-index: 60;
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      background: var(--steel);
      color: #fff;
      cursor: pointer;
      border: 0;
      font-size: 20px;
      opacity: 0;
      visibility: hidden;
      transition: .25s
    }

    .scroll-top.show {
      opacity: 1;
      visibility: visible
    }

    /* ===== Responsive (System Design §5.4) ===== */
    @media(max-width:1280px) {
      .section {
        padding: 80px 0
      }
    }

    @media(max-width:960px) {

      nav.menu,
      .hcta .btn,
      .hotline {
        display: none
      }

      .burger {
        display: grid
      }

      .fp-track .prod {
        flex: 0 0 calc((100% - 20px)/2)
      }

      .prodgrid4 {
        grid-template-columns: repeat(2, 1fr)
      }

      .bloggrid {
        grid-template-columns: 1fr 1fr
      }

      .post {
        border-left: 1px solid var(--line)
      }

      .partners .p {
        flex-basis: 180px
      }

      .contact .wrap {
        grid-template-columns: 1fr;
        padding: 64px 28px
      }

      .fgrid {
        grid-template-columns: 1fr 1fr
      }

      .section {
        padding: 64px 0
      }
    }

    @media(max-width:576px) {
      .wrap {
        padding: 0 18px
      }

      .hero .arrow {
        display: none
      }

      .slide .wrap {
        padding: 48px 18px
      }

      .fp-track .prod {
        flex: 0 0 100%;
        margin-right: 0
      }

      .fp-viewport {
        margin: 0 -4px
      }

      .prodgrid4,
      .bloggrid,
      .fgrid {
        grid-template-columns: 1fr
      }

      .post {
        border-left: 1px solid var(--line)
      }

      .cform .row {
        grid-template-columns: 1fr
      }

      .btn {
        width: 100%;
        justify-content: center
      }

      .slide .actions {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px
      }

      .slide .btn {
        width: auto;
        padding: 11px 18px;
        font-size: 13px
      }

      .np-top-right .btn {
        width: auto;
        padding: 8px 14px;
        font-size: 12px
      }

      .np-top-right .fp-nav button {
        width: 38px;
        height: 38px;
        font-size: 18px
      }
    }

    @media(min-width:1600px) {
      html {
        font-size: 17px
      }

      .wrap {
        max-width: 1440px
      }
    }

    /* ===== Phase 3: Services Listing + Detail ===== */

    /* --- Pagehero --- */
    .pagehero {
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid var(--line)
    }

    .pagehero img.bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .5
    }

    .pagehero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--bg) 10%, rgba(238, 242, 247, .4));
      z-index: 1
    }

    .pagehero .wrap {
      position: relative;
      z-index: 2;
      padding: 64px 28px 56px
    }

    .pagehero h1 {
      font-size: clamp(34px, 5vw, 62px);
      font-weight: 900;
      text-transform: uppercase;
      max-width: 720px;
      margin-top: 10px
    }

    /* --- Breadcrumb --- */
    .crumb {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      font-size: 13px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .06em;
      font-weight: 500;
      margin-bottom: 16px
    }

    .crumb a:hover {
      color: var(--accent)
    }

    .crumb span {
      color: var(--accent)
    }

    /* --- Filter bar --- */
    .filterbar {
      display: flex;
      /* justify-content: space-between; */
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 36px
    }

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

    .pill {
      padding: 10px 20px;
      border: 1px solid var(--line);
      background: var(--bg-2);
      font-size: 13.5px;
      font-weight: 500;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--muted);
      cursor: pointer;
      transition: .2s
    }

    .pill:hover {
      border-color: var(--accent);
      color: var(--accent)
    }

    .pill.on {
      background: var(--accent);
      border-color: var(--accent);
      color: #160a00
    }

    .filterbar .count {
      font-size: 14px;
      color: var(--muted);
      white-space: nowrap
    }

    /* --- Service grid --- */
    .svcgrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px
    }

    .svc {
      background: var(--panel);
      border: 1px solid var(--line);
      overflow: hidden;
      transition: .25s;
      box-shadow: 0 8px 24px rgba(16, 42, 80, .05);
      display: flex;
      flex-direction: column;
      text-decoration: none;
      color: inherit
    }

    .svc:hover {
      border-color: var(--accent);
      box-shadow: 0 18px 44px rgba(16, 42, 80, .12)
    }

    .svc .pic {
      height: 210px;
      position: relative;
      overflow: hidden
    }

    .svc .pic img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: .4s
    }

    .svc:hover .pic img {
      transform: scale(1.07)
    }

    .svc .pic::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 55%, rgba(8, 18, 38, .5))
    }

    .svc .pic .cat {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      background: var(--steel);
      color: #fff;
      font-weight: 700;
      font-size: 11.5px;
      letter-spacing: .05em;
      padding: 7px 14px;
      text-transform: uppercase;
      clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%)
    }

    .svc .body {
      padding: 24px;
      display: flex;
      flex-direction: column;
      flex: 1
    }

    .svc .ic {
      width: 50px;
      height: 50px;
      display: grid;
      place-items: center;
      background: var(--accent);
      color: #160a00;
      font-size: 22px;
      clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 100%, 0 100%);
      margin: -46px 0 14px;
      position: relative;
      z-index: 3;
      border: 3px solid var(--bg-2)
    }

    .svc h3 {
      font-size: 21px;
      font-weight: 700;
      margin-bottom: 10px;
      text-transform: none
    }

    .svc p {
      color: var(--muted);
      font-size: 14.5px;
      margin-bottom: 18px;
      flex: 1
    }

    .svc .more {
      font-size: 14px;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: var(--steel);
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 8px
    }

    .svc:hover .more {
      color: var(--accent)
    }

    .svc.hide {
      display: none
    }

    .empty {
      display: none;
      text-align: center;
      padding: 72px 20px;
      color: var(--muted);
      background: var(--bg-2);
      border: 1px solid var(--line)
    }

    .empty.show {
      display: block
    }

    .empty .e-ic {
      font-size: 48px;
      margin-bottom: 14px
    }

    /* --- CTA band --- */
    .ctaband {
      position: relative;
      overflow: hidden;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line)
    }

    .ctaband img.bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .22
    }

    .ctaband::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--bg-2), rgba(255, 255, 255, .55));
      z-index: 1
    }

    .ctaband .wrap {
      position: relative;
      z-index: 2;
      padding: 72px 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 32px;
      flex-wrap: wrap
    }

    .ctaband h2 {
      font-size: clamp(26px, 3.6vw, 42px);
      max-width: 640px
    }

    .ctaband h2 em {
      font-style: normal;
      color: var(--accent)
    }

    .ctaband p {
      color: var(--muted);
      margin-top: 10px
    }

    /* --- Service hero (detail page) --- */
    .svhero {
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid var(--line)
    }

    .svhero img.bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .4
    }

    .svhero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--bg) 12%, rgba(238, 242, 247, .55));
      z-index: 1
    }

    .svhero .wrap {
      position: relative;
      z-index: 2;
      padding: 60px 28px 56px
    }

    .svhero .cat {
      display: inline-block;
      background: var(--steel);
      color: #fff;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: .05em;
      padding: 7px 14px;
      text-transform: uppercase;
      margin-bottom: 14px
    }

    .svhero h1 {
      font-size: clamp(30px, 4.6vw, 56px);
      font-weight: 900;
      text-transform: none;
      max-width: 860px
    }

    /* --- Article layout --- */
    .svlayout {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 48px;
      align-items: start
    }

    .svbody p {
      margin-bottom: 16px;
      color: #34465a;
      font-size: 16.5px
    }

    .svbody h2 {
      font-size: 24px;
      text-transform: none;
      margin: 32px 0 16px
    }

    .svbody figure {
      margin: 24px 0
    }

    .svbody figure img {
      width: 100%;
      max-height: 440px;
      object-fit: cover;
      border: 1px solid var(--line)
    }

    .svbody ul {
      margin: 0 0 16px 0;
      list-style: none;
      display: grid;
      gap: 10px
    }

    .svbody ul li {
      position: relative;
      padding-left: 30px;
      color: #34465a
    }

    .svbody ul li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 8px;
      width: 16px;
      height: 16px;
      background: var(--accent);
      clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 100%, 0 100%)
    }

    .svbody ul li b {
      color: var(--text)
    }

    .desc-imgs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin: 24px 0
    }

    .desc-imgs img {
      width: 100%;
      height: 230px;
      object-fit: cover;
      border: 1px solid var(--line)
    }

    /* --- Steps (CSS counter auto-numbers — .no divs must be EMPTY in HTML) --- */
    .steps {
      display: grid;
      gap: 0;
      margin: 20px 0 8px;
      counter-reset: s
    }

    .step {
      display: flex;
      gap: 18px;
      padding: 18px 0;
      border-top: 1px solid var(--line)
    }

    .step:last-child {
      border-bottom: 1px solid var(--line)
    }

    .step .no {
      counter-increment: s;
      flex-shrink: 0;
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      background: var(--accent);
      color: #160a00;
      font-weight: 700;
      clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 100%, 0 100%)
    }

    .step .no::before {
      content: counter(s, decimal-leading-zero)
    }

    .step .c b {
      display: block;
      font-size: 16.5px;
      text-transform: none;
      margin-bottom: 3px
    }

    .step .c span {
      color: var(--muted);
      font-size: 14.5px
    }

    /* --- Sidebar --- */
    .svside {
      position: sticky;
      top: 100px;
      display: grid;
      gap: 20px
    }

    .cardbox {
      background: var(--bg-2);
      border: 1px solid var(--line);
      padding: 24px
    }

    .cardbox.hl {
      border-top: 3px solid var(--accent)
    }

    .cardbox h3 {
      font-size: 18px;
      text-transform: none;
      margin-bottom: 12px
    }

    .cardbox p {
      font-size: 14.5px;
      color: var(--muted);
      margin-bottom: 18px
    }

    .cardbox .btn {
      width: 100%;
      justify-content: center
    }

    .cardbox .ph {
      font-size: 22px;
      font-weight: 700;
      color: var(--steel);
      margin-top: 14px;
      display: block
    }

    .otherlist {
      list-style: none;
      display: grid;
      gap: 2px
    }

    .otherlist a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 0;
      border-bottom: 1px solid var(--line);
      font-size: 14.5px;
      color: var(--text);
      transition: .2s;
      text-decoration: none
    }

    .otherlist li:last-child a {
      border-bottom: 0
    }

    .otherlist a:hover {
      color: var(--accent)
    }

    .otherlist a.on {
      color: var(--accent);
      font-weight: 500
    }

    /* --- Related section --- */
    .related {
      background: var(--bg-2);
      border-top: 1px solid var(--line)
    }

    .related .top {
      margin-bottom: 36px
    }

    /* --- Responsive additions for Phase 3 --- */
    @media(max-width:960px) {
      .svlayout {
        grid-template-columns: 1fr;
        gap: 36px
      }

      .svside {
        position: static
      }

      .svcgrid {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:576px) {
      .desc-imgs {
        grid-template-columns: 1fr
      }

      .svcgrid {
        grid-template-columns: 1fr
      }
    }

    /* === Phase 4: Page hero (listing page) === */
    .pagehero {
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid var(--line)
    }

    .pagehero img.bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .4
    }

    .pagehero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--bg) 10%, rgba(238, 242, 247, .6))
    }

    .pagehero .wrap {
      position: relative;
      z-index: 2;
      padding: 64px 28px 56px
    }

    .pagehero h1 {
      font-size: clamp(34px, 5vw, 62px);
      font-weight: 900;
      margin-top: 10px
    }

    .pagehero p {
      color: #3a4a59;
      font-size: 17px;
      margin-top: 10px;
      max-width: 560px
    }

    /* === Phase 4: Breadcrumb (used in both .pagehero and .crumbbar) === */
    .crumb {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      font-size: 13px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .05em;
      font-weight: 500
    }

    .crumb a:hover {
      color: var(--accent)
    }

    .crumb span {
      color: var(--accent)
    }

    /* === Phase 4: Listing page classes === */
    /* Section padding modifier */
    .listing-sect {
      padding: 64px 0 80px
    }

    /* Toolbar */
    .toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 28px
    }

    .search {
      display: flex;
      border: 1px solid var(--line);
      background: var(--bg-2);
      min-width: 300px;
      flex: 1;
      max-width: 440px
    }

    .search input {
      flex: 1;
      border: 0;
      padding: 13px 16px;
      font-family: var(--font-base);
      font-size: 15px;
      background: transparent;
      color: var(--text)
    }

    .search input:focus {
      outline: 0
    }

    .search button {
      border: 0;
      background: var(--accent);
      color: #160a00;
      padding: 0 18px;
      cursor: pointer;
      font-size: 17px
    }

    .toolbar .count {
      font-size: 14px;
      color: var(--muted)
    }

    .toolbar select {
      border: 1px solid var(--line);
      background: var(--bg-2);
      padding: 12px 14px;
      font-family: var(--font-base);
      font-size: 14px;
      color: var(--text);
      cursor: pointer
    }

    /* Layout 2-col */
    .layout {
      display: grid;
      grid-template-columns: 260px 1fr;
      gap: 32px;
      align-items: start
    }

    .side {
      background: var(--bg-2);
      border: 1px solid var(--line);
      padding: 24px;
      position: sticky;
      top: 100px
    }

    .fgroup {
      padding-bottom: 18px;
      margin-bottom: 18px;
      border-bottom: 1px solid var(--line)
    }

    .fgroup:last-child {
      border-bottom: 0;
      padding-bottom: 0;
      margin-bottom: 0
    }

    .fgroup h4 {
      font-size: 14px;
      letter-spacing: .06em;
      margin-bottom: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center
    }

    .reset {
      font-size: 11px;
      color: var(--steel);
      cursor: pointer;
      text-transform: none;
      letter-spacing: 0;
      font-weight: 500
    }

    .reset:hover {
      color: var(--accent)
    }

    /* Category tree */
    .catlist {
      list-style: none;
      display: grid;
      gap: 1px
    }

    .crow {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
      min-width: 0
    }

    .radio {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 4px;
      font-size: 14.5px;
      cursor: pointer;
      flex: 1;
      user-select: none
    }

    .check {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 4px;
      font-size: 14.5px;
      cursor: pointer;
      flex: 1;
      user-select: none
    }

    .radio input,
    .check input {
      position: absolute;
      opacity: 0;
      pointer-events: none
    }

    .radio .dot {
      width: 18px;
      height: 18px;
      border: 2px solid #c4cedb;
      border-radius: 50%;
      flex-shrink: 0;
      display: grid;
      place-items: center;
      transition: .18s
    }

    .radio:hover .dot {
      border-color: var(--accent)
    }

    .radio input:checked~.dot {
      border-color: var(--accent)
    }

    .radio input:checked~.dot::after {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--accent)
    }

    .radio input:checked~.txt {
      color: var(--accent)
    }

    .radio .txt,
    .check .txt {
      flex: 1
    }

    .radio .n,
    .check .n {
      font-size: 12px;
      color: var(--muted);
      flex-shrink: 0;
      margin-left: auto
    }

    .check .box {
      width: 18px;
      height: 18px;
      border: 2px solid #c4cedb;
      border-radius: 4px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 0;
      transition: .18s
    }

    .check:hover .box {
      border-color: var(--accent)
    }

    .check input:checked~.box {
      background: var(--accent);
      border-color: var(--accent)
    }

    .check input:checked~.box::after {
      content: "";
      display: block;
      width: 5px;
      height: 9px;
      border-right: 2px solid #160a00;
      border-bottom: 2px solid #160a00;
      transform: rotate(45deg) translateY(-1px)
    }

    .check input:checked~.txt {
      color: var(--accent)
    }

    /* Collapse caret */
    .caret {
      border: 0;
      background: none;
      cursor: pointer;
      color: var(--muted);
      font-size: 13px;
      width: 28px;
      height: 28px;
      display: inline-grid;
      place-items: center;
      transition: transform .28s, color .2s
    }

    .caret:hover {
      color: var(--accent)
    }

    .caret:active {
      transform: scale(.9)
    }

    .cat-parent.open .caret {
      transform: rotate(180deg)
    }

    .cat-children {
      list-style: none;
      display: none;
      padding-left: 22px
    }

    .cat-parent.open .cat-children {
      display: block
    }

    /* Toggle expand/collapse */
    .ftoggle {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 10px;
      font-size: 13px;
      color: var(--steel);
      cursor: pointer;
      user-select: none;
      text-transform: none;
      letter-spacing: 0
    }

    .ftoggle:hover {
      color: var(--accent)
    }

    .ftoggle .ch::after {
      content: "\25B4"
    }

    .ftoggle.is-down .ch::after {
      content: "\25BE"
    }

    .fgroup.collapsed .catwrap {
      display: none
    }

    /* Year range */
    .yearbox {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px
    }

    .yearbox input {
      flex: 1;
      width: 100%;
      text-align: center;
      border: 1px solid var(--line);
      padding: 9px 6px;
      font-size: 14px;
      font-weight: 500;
      border-radius: 6px;
      background: #fff;
      font-family: var(--font-base)
    }

    .yearbox input::-webkit-outer-spin-button,
    .yearbox input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0
    }

    .yearbox input:focus {
      border-color: var(--accent);
      outline: 0
    }

    .yearbox .sep {
      color: var(--muted);
      flex-shrink: 0
    }

    .range {
      position: relative;
      height: 34px
    }

    .range .track {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--line);
      border-radius: 3px;
      transform: translateY(-50%)
    }

    .range .track-fill {
      position: absolute;
      top: 50%;
      height: 4px;
      background: var(--accent);
      border-radius: 3px;
      transform: translateY(-50%)
    }

    .range input[type=range] {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      pointer-events: none;
      margin: 0;
      padding: 0;
      cursor: pointer
    }

    .range input[type=range]::-webkit-slider-thumb {
      pointer-events: auto;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      border: 3px solid var(--accent);
      cursor: pointer;
      box-shadow: 0 1px 4px rgba(16, 42, 80, .25);
      -webkit-appearance: none
    }

    .range input[type=range]::-moz-range-thumb {
      pointer-events: auto;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      border: 3px solid var(--accent);
      cursor: pointer;
      box-shadow: 0 1px 4px rgba(16, 42, 80, .25)
    }

    /* Product grid — scoped to .prodgrid to avoid overriding homepage .prod .pic { height:280px } */
    .prodgrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px
    }

    .prodgrid .prod {
      display: flex;
      flex-direction: column
    }

    .prodgrid .prod .pic {
      height: 220px
    }

    .prodgrid .prod .body {
      display: flex;
      flex-direction: column;
      flex: 1
    }

    .prodgrid .prod .foot {
      margin-top: auto
    }

    .prodgrid .prod h3 {
      font-size: 21px;
      text-transform: none
    }

    .prod.hide {
      display: none
    }

    /* Condition badges */
    .cond.new {
      position: absolute;
      top: 10px;
      right: 10px;
      font-weight: 700;
      font-size: 11px;
      letter-spacing: .04em;
      padding: 5px 11px;
      text-transform: uppercase;
      border-radius: 20px;
      background: #1f9d4d;
      color: #fff
    }

    .cond.used {
      position: absolute;
      top: 10px;
      right: 10px;
      font-weight: 700;
      font-size: 11px;
      letter-spacing: .04em;
      padding: 5px 11px;
      text-transform: uppercase;
      border-radius: 20px;
      background: #fff;
      color: var(--text);
      border: 1px solid var(--line)
    }

    /* Empty state */
    .empty {
      display: none;
      text-align: center;
      padding: 70px 20px;
      color: var(--muted);
      background: var(--bg-2);
      border: 1px solid var(--line)
    }

    .empty.show {
      display: block
    }

    .empty .e-ic {
      font-size: 48px;
      margin-bottom: 14px
    }

    /* Pagination */
    .pagination {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 48px
    }

    .pagination a {
      min-width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      background: var(--bg-2);
      font-weight: 500;
      color: var(--text);
      transition: .2s;
      padding: 0 8px;
      text-decoration: none
    }

    .pagination a:hover {
      border-color: var(--accent);
      color: var(--accent)
    }

    .pagination a.on {
      background: var(--accent);
      border-color: var(--accent);
      color: #160a00
    }

    .pagination a.disabled {
      opacity: .4;
      pointer-events: none
    }

    /* === Phase 4: Detail page classes === */
    /* Section padding modifier */
    .detail-sect {
      padding: 56px 0 80px
    }

    /* Breadcrumb bar (detail page — plain white bar, NOT pagehero) */
    .crumbbar {
      background: var(--bg-2);
      border-bottom: 1px solid var(--line)
    }

    .crumbbar .wrap {
      padding: 16px 28px
    }

    /* Product detail 2-col grid */
    .pd {
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: 48px;
      align-items: start
    }

    /* Gallery */
    .gallery .main {
      border: 1px solid var(--line);
      background: var(--bg-2);
      overflow: hidden;
      position: relative;
      aspect-ratio: 4/3
    }

    .gallery .main img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: zoom-in
    }

    .gallery .main .badge {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      background: var(--accent);
      color: #160a00;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: .06em;
      padding: 7px 16px;
      text-transform: uppercase;
      clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%)
    }

    .gallery .main .cond {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 2;
      font-weight: 700;
      font-size: 11.5px;
      letter-spacing: .04em;
      padding: 6px 13px;
      text-transform: uppercase;
      border-radius: 20px
    }

    .thumbs {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      margin-top: 12px
    }

    .thumbs button {
      border: 1px solid var(--line);
      background: var(--bg-2);
      padding: 0;
      overflow: hidden;
      cursor: pointer;
      aspect-ratio: 1;
      transition: .2s
    }

    .thumbs button img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .thumbs button.on {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(245, 160, 21, .25)
    }

    /* Product info column */
    .pinfo .brand {
      font-size: 14px;
      color: var(--steel);
      letter-spacing: .1em;
      text-transform: uppercase;
      font-weight: 500
    }

    .pinfo h1 {
      font-size: clamp(26px, 3.4vw, 40px);
      font-weight: 900;
      text-transform: none;
      margin: 6px 0 12px
    }

    .pinfo .tags {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 18px
    }

    .pinfo .tag {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      padding: 6px 12px;
      border-radius: 20px;
      border: 1px solid var(--line);
      color: var(--muted)
    }

    .pinfo .tag.acc {
      background: var(--accent);
      border-color: var(--accent);
      color: #160a00
    }

    .pinfo .lead {
      font-size: 16px;
      color: var(--muted);
      margin-bottom: 22px
    }

    /* Key specs */
    .keyspecs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border: 1px solid var(--line);
      margin-bottom: 22px
    }

    .keyspecs div {
      padding: 18px 12px;
      text-align: center;
      border-right: 1px solid var(--line)
    }

    .keyspecs div:last-child {
      border-right: 0
    }

    .keyspecs b {
      font-size: 24px;
      display: block;
      color: var(--text)
    }

    .keyspecs span {
      font-size: 11.5px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .05em
    }

    /* Rental options */
    .rentopts {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 22px
    }

    .ropt {
      border: 1px solid var(--line);
      background: var(--bg-2);
      padding: 16px 18px
    }

    .ropt b {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      text-transform: none;
      margin-bottom: 4px
    }

    .ropt b .d {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0
    }

    .ropt span {
      font-size: 13px;
      color: var(--muted)
    }

    /* CTA row */
    .cta-row {
      display: flex;
      gap: 14px;
      flex-wrap: wrap
    }

    /* Tab system */
    .tabwrap {
      margin-top: 64px
    }

    .tabnav {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      border-bottom: 2px solid var(--line)
    }

    .tabnav button {
      border: 0;
      background: none;
      padding: 14px 22px;
      font-family: var(--font-base);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--muted);
      cursor: pointer;
      position: relative;
      transition: .2s
    }

    .tabnav button:hover {
      color: var(--accent)
    }

    .tabnav button.on {
      color: var(--text)
    }

    .tabnav button.on::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -2px;
      height: 2px;
      background: var(--accent)
    }

    .tabpane {
      display: none;
      padding: 30px 0
    }

    .tabpane.on {
      display: block
    }

    .tabpane p {
      margin-bottom: 14px;
      color: #34465a
    }

    .tabpane ul {
      margin: 0 0 14px 20px;
      color: #34465a
    }

    .tabpane ul li {
      margin-bottom: 6px
    }

    .tabpane figure {
      margin: 22px 0
    }

    .tabpane figure img {
      width: 100%;
      max-height: 440px;
      object-fit: cover;
      border: 1px solid var(--line)
    }

    .tabpane .desc-imgs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin: 22px 0
    }

    .tabpane .desc-imgs img {
      width: 100%;
      height: 240px;
      object-fit: cover;
      border: 1px solid var(--line)
    }

    /* Spec table */
    .spectable {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid var(--line)
    }

    .spectable tr:nth-child(odd) {
      background: var(--bg-2)
    }

    .spectable th {
      text-align: left;
      width: 38%;
      padding: 13px 16px;
      font-weight: 500;
      color: var(--muted);
      border: 1px solid var(--line);
      text-transform: none;
      font-size: 14.5px
    }

    .spectable td {
      padding: 13px 16px;
      border: 1px solid var(--line);
      font-size: 14.5px;
      font-weight: 500
    }

    /* Document list */
    .doclist {
      display: grid;
      gap: 12px;
      max-width: 560px
    }

    .doc {
      display: flex;
      align-items: center;
      gap: 14px;
      border: 1px solid var(--line);
      background: var(--bg-2);
      padding: 14px 18px;
      transition: .2s;
      text-decoration: none;
      color: inherit
    }

    .doc:hover {
      border-color: var(--accent)
    }

    .doc .di {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      background: #fdeede;
      color: #d6361f;
      font-weight: 700;
      font-size: 13px;
      flex-shrink: 0;
      border-radius: 6px
    }

    .doc .dn {
      flex: 1
    }

    .doc .dn b {
      display: block;
      font-size: 14.5px
    }

    .doc .dn span {
      font-size: 12.5px;
      color: var(--muted)
    }

    .doc .dl {
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--steel)
    }

    .doc:hover .dl {
      color: var(--accent)
    }

    /* Lightbox */
    .lb {
      position: fixed;
      inset: 0;
      background: rgba(8, 14, 24, .9);
      z-index: 200;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 30px
    }

    .lb.open {
      display: flex
    }

    .lb img {
      max-width: 92vw;
      max-height: 88vh;
      object-fit: contain
    }

    .lb .x {
      position: absolute;
      top: 20px;
      right: 26px;
      color: #fff;
      font-size: 34px;
      cursor: pointer;
      line-height: 1
    }

    /* Related section */
    .related {
      background: var(--bg-2);
      border-top: 1px solid var(--line)
    }

    .related .top {
      margin-bottom: 32px
    }

    .related .prodgrid {
      grid-template-columns: repeat(4, 1fr)
    }

    .related .prod .pic {
      height: 180px
    }

    .related .prod h3 {
      font-size: 17px
    }

    .related .prod .body {
      padding: 18px
    }

    .related .prod .brand {
      font-size: 12px
    }

    .related .prod .foot {
      font-size: 13px
    }

    @media(max-width:960px) {
      .toolbar {
        flex-direction: column;
        align-items: stretch
      }

      .search {
        min-width: 0;
        max-width: none;
        width: 100%
      }

      .toolbar select {
        width: 100%
      }

      .layout {
        grid-template-columns: 1fr
      }

      .side {
        position: static
      }

      .prodgrid {
        grid-template-columns: 1fr 1fr
      }

      .related .prodgrid {
        grid-template-columns: 1fr 1fr
      }

      .pd {
        grid-template-columns: 1fr;
        gap: 32px
      }
    }

    @media(max-width:576px) {
      .prodgrid {
        grid-template-columns: 1fr
      }

      .related .prodgrid {
        grid-template-columns: 1fr
      }

      .thumbs {
        grid-template-columns: repeat(4, 1fr)
      }

      .keyspecs {
        grid-template-columns: 1fr 1fr 1fr
      }

      .rentopts {
        grid-template-columns: 1fr
      }

      .spectable th {
        width: 46%
      }

      .cta-row {
        flex-direction: column
      }

      .tabpane .desc-imgs {
        grid-template-columns: 1fr
      }
    }