/* ==========================================================================
   00. Theme variables and global base styles
   ========================================================================== */

:root {
  --bg:#f3f0e9;
  --surface:#ffffff;
  --surface-2:#f8f6f1;
  --ink:#14181e;
  --ink-2:#242b33;
  --muted:#6f7883;
  --line:#dfe3e7;
  --gold:#c9933f;
  --gold-2:#e5b75e;
  --dark:#10151c;
  --dark-2:#18202a;
  --white:#fff;
  --shadow:0 24px 70px rgba(22,28,35,.12);
  --shadow-soft:0 12px 34px rgba(22,28,35,.08);
  --radius:24px;

  /* Shared motion timings */
  --motion-page:.66s;
  --motion-page-fade:.75s;
  --motion-standard:.3s;
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,Arial,sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}

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

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

button,input,textarea,select {
  font:inherit
}

/* Header */

.nav {
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:26px;
  min-height:78px;
  padding:12px clamp(18px,4vw,62px);
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(20,24,30,.08);
  transition:box-shadow .28s ease,background .28s ease
}

.nav.scrolled {
  box-shadow:0 10px 30px rgba(20,24,30,.08);
  background:rgba(255,255,255,.96)
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  letter-spacing:.12em;
  white-space:nowrap;
  font-weight:700
}

.brand img {
  width:54px;
  height:54px;
  object-fit:contain;
  background:#fff;
  border:1px solid #ececec;
  border-radius:12px;
  padding:5px;
  transition:transform .3s ease,box-shadow .3s ease
}

.brand:hover img {
  transform:translateY(-2px) scale(1.03);
  box-shadow:var(--shadow-soft)
}

.brand b {
  color:var(--gold)
}

.nav nav {
  display:flex;
  align-items:center;
  gap:20px;
  margin-inline:auto;
  flex-wrap:wrap
}

.nav nav a {
  position:relative;
  color:#3b444f;
  font-weight:600;
  font-size:14px;
  padding:10px 0;
  transition:color .25s ease
}

.nav nav a::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:3px;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .25s ease
}

.nav nav a:hover,.nav nav a.active {
  color:var(--ink)
}

.nav nav a:hover::after,.nav nav a.active::after {
  transform:scaleX(1)
}

.lang {
  border:1px solid #d8dde2;
  border-radius:999px;
  padding:9px 14px;
  font-weight:800;
  transition:.25s ease;
  background:#fff
}

.lang:hover {
  border-color:var(--gold);
  color:var(--gold);
  transform:translateY(-1px)
}

/* Hero */

.hero {
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(380px,.88fr);
  gap:54px;
  align-items:center;
  min-height:690px;
  padding:74px clamp(18px,6vw,92px) 62px;
  background:linear-gradient(135deg,#f9f7f2 0%,#f4efe5 58%,#eee7da 100%)
}

.hero-bg {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(
      circle at 12% 15%,
      rgba(201,147,63,.20),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 18%,
      rgba(20,24,30,.08),
      transparent 23%
    ),
    linear-gradient(
      110deg,
      transparent 0 68%,
      rgba(201,147,63,.07) 68% 100%
    )
}

.hero::before {
  content:"";
  position:absolute;
  width:460px;
  height:460px;
  border:1px solid rgba(201,147,63,.16);
  border-radius:50%;
  right:-160px;
  top:50px
}

.hero::after {
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  border:1px solid rgba(20,24,30,.07);
  border-radius:50%;
  right:-80px;
  top:130px
}

.hero>* {
  position:relative;
  z-index:1
}

.eyebrow {
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#a36e22;
  margin-bottom:14px;
  font-weight:800
}

.hero h1 {
  font-size:clamp(48px,6.5vw,88px);
  line-height:.97;
  letter-spacing:-.05em;
  margin:0 0 20px;
  max-width:10.5ch;
  color:var(--ink)
}

.hero p,.lead,.section-copy {
  font-size:18px;
  color:#525c67;
  max-width:62ch
}

.actions,.brand-actions,.product-actions,.contact-mini {
  display:flex;
  gap:12px;
  flex-wrap:wrap
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 18px;
  border:1px solid #ccd2d8;
  border-radius:14px;
  font-weight:800;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease,color .25s ease;
  cursor:pointer;
  position:relative;
  overflow:hidden
}

.btn:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(20,24,30,.12)
}

.btn.primary {
  background:var(--gold);
  border-color:var(--gold);
  color:#141414
}

.btn.primary:hover {
  background:var(--gold-2);
  border-color:var(--gold-2)
}

.btn.ghost {
  background:#fff;
  color:var(--ink)
}

.btn.ghost:hover {
  border-color:var(--gold);
  color:#8a5b18
}

.btn.whatsapp {
  background:#111820;
  color:#fff;
  border-color:#111820
}

.btn.whatsapp:hover {
  background:#1d2834;
  border-color:#1d2834
}

.hero-contact {
  list-style:none;
  padding:0;
  margin:30px 0 0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  max-width:840px
}

.hero-contact li {
  min-width:0;
  padding:16px 17px;
  border:1px solid #dfe3e7;
  background:rgba(255,255,255,.76);
  border-radius:18px;
  box-shadow:0 8px 22px rgba(20,24,30,.05);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease
}

.hero-contact li:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow-soft);
  border-color:#d5b77f
}

.hero-contact strong {
  display:block;
  font-size:clamp(14px,1.15vw,18px);
  margin-bottom:3px;
  overflow-wrap:anywhere;
  word-break:break-word;
  direction:ltr;
  text-align:start;
  color:var(--ink)
}

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

.hero-media {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0
}

.brand-stage {
  width:min(100%,520px);
  background:linear-gradient(145deg,#fff,#f8f6f1);
  border:1px solid #dce1e6;
  border-radius:30px;
  padding:24px;
  box-shadow:var(--shadow);
  transform-style:preserve-3d;
  transition:transform .18s ease,box-shadow .3s ease;
  position:relative;
  overflow:hidden
}

.brand-stage::before {
  content:"";
  position:absolute;
  inset:auto -80px -80px auto;
  width:220px;
  height:220px;
  border-radius:50%;
  background:rgba(201,147,63,.12)
}

.brand-stage:hover {
  box-shadow:0 32px 80px rgba(20,24,30,.16)
}

.brand-stage-head {
  display:flex;
  align-items:center;
  gap:12px;
  color:#4a535d;
  font-size:11px;
  letter-spacing:.18em;
  font-weight:800
}

.brand-stage-head i {
  height:1px;
  flex:1;
  background:#d9dde2
}

.brand-logos {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:16px;
  margin:24px 0 20px
}

.brand-tile {
  min-width:0;
  border-radius:22px;
  display:grid;
  place-items:center;
  min-height:190px;
  transition:transform .3s ease
}

.brand-tile:hover {
  transform:translateY(-5px) scale(1.015)
}

.hu-tile {
  background:#fff;
  border:1px solid #e2e5e9;
  padding:20px
}

.hu-tile img {
  width:100%;
  max-height:145px;
  object-fit:contain
}

.sino-tile {
  background:#050505;
  padding:22px
}

.sino-tile img {
  width:100%;
  max-height:150px;
  object-fit:contain
}

.partner-x {
  font-size:30px;
  color:#a8afb7;
  font-weight:300
}

.brand-stage-foot {
  font-size:13px;
  color:#6a737e;
  letter-spacing:.12em;
  text-transform:uppercase
}

/* General sections */

.stats,.cards,.location-grid,.product-grid,.project-grid {
  display:grid;
  gap:18px
}

.stats {
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  padding:0 clamp(18px,6vw,92px) 26px;
  background:var(--bg)
}

.stats div {
  padding:27px 8px 24px;
  border-top:1px solid #d5d9de;
  transition:transform .25s ease
}

.stats div:hover {
  transform:translateY(-4px)
}

.stats strong {
  display:block;
  font-size:clamp(34px,4vw,52px);
  letter-spacing:-.05em;
  color:var(--ink)
}

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

.section {
  padding:88px clamp(18px,6vw,92px);
  background:var(--bg)
}

.section.dark {
  background:linear-gradient(180deg,#151b22,#0f141a);
  color:#fff
}

.section.split,.section.contact,.brand-focus,.product-detail {
  display:grid;
  gap:48px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center
}

.section h2 {
  font-size:clamp(31px,4vw,54px);
  line-height:1.06;
  letter-spacing:-.04em;
  margin:0 0 14px
}

.section.dark .lead,.section.dark .section-copy,.section.dark p {
  color:#bdc5ce
}

.section-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:28px
}

.section-head>div {
  min-width:0
}

/* Services */

.cards {
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  align-items:stretch
}

.card {
  background:#fff;
  border:1px solid #dfe3e7;
  border-radius:22px;
  padding:26px;
  min-height:220px;
  box-shadow:0 8px 24px rgba(20,24,30,.04);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease
}

.dark .card {
  background:#1b222b;
  border-color:#2a333e;
  box-shadow:none
}

.card:hover {
  transform:translateY(-8px);
  box-shadow:0 22px 45px rgba(20,24,30,.10);
  border-color:#d6bd8f
}

.dark .card:hover {
  box-shadow:0 18px 44px rgba(0,0,0,.28);
  border-color:#7c6339
}

.card .num {
  font-size:13px;
  color:var(--gold);
  letter-spacing:.18em;
  margin-bottom:12px
}

.card h3,.product-card h2,.product-card h3 {
  font-size:23px;
  line-height:1.18;
  margin:0 0 11px
}

.card p,.product-card p,.location-grid p {
  color:var(--muted);
  margin:0
}

.dark .card p {
  color:#b6bec8
}

/* SINOTRUK focus */

.brand-focus {
  background:#fff;
  color:var(--ink)
}

.brand-panel {
  background:#050505;
  border-radius:28px;
  padding:34px;
  display:grid;
  place-items:center;
  min-height:320px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease
}

.brand-panel::after {
  content:"SINOTRUK";
  position:absolute;
  bottom:-12px;
  right:18px;
  color:rgba(255,255,255,.035);
  font-size:70px;
  font-weight:900;
  letter-spacing:.06em
}

.brand-panel:hover {
  transform:translateY(-6px);
  box-shadow:0 30px 70px rgba(20,24,30,.18)
}

.brand-panel img {
  max-width:320px;
  position:relative;
  z-index:1
}

/* Products */

.products-home {
  background:#f7f5f0
}

.product-grid {
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  align-items:stretch
}

.product-card {
  background:#fff;
  border:1px solid #dde2e7;
  border-radius:22px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 8px 28px rgba(20,24,30,.05);
  transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease
}

.product-card:hover {
  transform:translateY(-8px);
  box-shadow:0 24px 55px rgba(20,24,30,.13);
  border-color:#cfb27c
}

.product-card>a {
  overflow:hidden;
  background:#f2f2f2
}

.product-card img {
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  background:#fff;
  transition:transform .45s ease
}

.product-card:hover>a img {
  transform:scale(1.045)
}

.product-placeholder {
  display:grid;
  place-items:center;
  background:linear-gradient(160deg,#0a0d11,#171f29);
  aspect-ratio:16/10;
  padding:26px
}

.product-placeholder img {
  max-width:68%;
  max-height:70%;
  object-fit:contain;
  background:#000;
  border-radius:18px;
  padding:10px
}

.product-card-body {
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:22px;
  flex:1
}

.product-card-body h2 a,.product-card-body h3 a {
  display:block
}

.product-meta {
  color:#9b681f;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:800
}

.product-actions {
  margin-top:auto
}

.empty-card {
  background:#fff;
  border:1px dashed #cfd5dc;
  border-radius:22px;
  text-align:center;
  padding:34px
}

/* Catalog */

.catalog-hero {
  padding:84px clamp(18px,6vw,92px) 58px;
  background:linear-gradient(135deg,#fff,#f4efe5);
  border-bottom:1px solid #dfe3e7
}

.catalog-hero h1 {
  font-size:clamp(42px,6vw,80px);
  line-height:1;
  margin:0 0 16px;
  letter-spacing:-.05em
}

.catalog-hero p {
  color:#59636e;
  max-width:720px
}

.catalog {
  padding-top:50px
}

.catalog-filters {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:28px
}

.catalog-filters select {
  min-width:220px;
  background:#fff;
  color:var(--ink);
  border:1px solid #d7dde3;
  padding:13px;
  border-radius:14px
}

/* Product detail */

.product-detail {
  min-height:540px;
  background:#f8f6f1
}

.product-media {
  background:#fff;
  border-radius:26px;
  overflow:hidden;
  min-height:360px;
  display:grid;
  place-items:center;
  box-shadow:var(--shadow-soft)
}

.product-media img {
  width:100%;
  height:100%;
  max-height:620px;
  object-fit:contain
}

.product-placeholder.big {
  width:100%;
  min-height:420px
}

.product-info h1 {
  font-size:clamp(38px,5vw,72px);
  line-height:1;
  letter-spacing:-.04em;
  margin:0 0 14px
}

.product-copy {
  background:#fff;
  color:var(--ink)
}

.specs-section {
  background:#121820
}

.spec-list {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  border-top:1px solid #303844;
  border-left:1px solid #303844
}

.spec-list div {
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding:18px;
  border-right:1px solid #303844;
  border-bottom:1px solid #303844
}

.spec-list span {
  color:#aab3bd
}

.spec-list strong {
  text-align:end
}

/* Locations */

.locations {
  background:#f3f0e9
}

.location-grid {
  grid-template-columns:repeat(auto-fit,minmax(235px,1fr))
}

.location-grid article {
  background:#fff;
  border:1px solid #dfe3e7;
  border-radius:20px;
  padding:24px;
  min-height:100%;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease
}

.location-grid article:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-soft);
  border-color:#d3b77f
}

.location-grid h3 {
  font-size:22px;
  margin:18px 0 8px
}

.location-grid a {
  color:#97651f;
  font-weight:800
}

.flag {
  display:inline-block;
  font-size:11px;
  letter-spacing:.16em;
  padding:6px 10px;
  border-radius:999px;
  background:#f0eadf;
  border:1px solid #e1d7c5;
  color:#80591e
}

/* Contact */

.contact {
  background:#fff
}

.contact form {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}

.contact input,.contact textarea {
  width:100%;
  background:#fbfbfa;
  color:var(--ink);
  border:1px solid #d9dee4;
  padding:14px;
  border-radius:14px;
  transition:border-color .2s ease,box-shadow .2s ease
}

.contact input:focus,.contact textarea:focus {
  outline:none;
  border-color:#c89a54;
  box-shadow:0 0 0 4px rgba(201,147,63,.12)
}

.contact textarea {
  grid-column:1/-1;
  min-height:150px
}

.contact button,.contact #formStatus {
  grid-column:1/-1
}

.contact-mini a {
  padding:12px 14px;
  border:1px solid #dce1e7;
  border-radius:14px;
  background:#fafafa;
  font-weight:700;
  transition:.25s ease
}

.contact-mini a:hover {
  transform:translateY(-3px);
  border-color:#cda65f;
  background:#fff
}

/* Footer */

footer {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  padding:24px clamp(18px,6vw,92px);
  border-top:1px solid #d7dde3;
  color:#67717c;
  font-size:14px;
  background:#f7f5f0
}

/* Reveal / motion */

.reveal {
  opacity:0;
  transform:translateY(28px);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)
}

.reveal.in-view {
  opacity:1;
  transform:none
}

.reveal-delay-1 {
  transition-delay:.08s
}

.reveal-delay-2 {
  transition-delay:.16s
}

.reveal-delay-3 {
  transition-delay:.24s
}

[dir=rtl] .brand,[dir=rtl] .contact form label {
  text-align:right
}

[dir=rtl] .hero-contact strong {
  direction:ltr;
  text-align:right
}

[dir=rtl] .brand-stage-head {
  direction:ltr
}

@media(max-width:1180px) {
  .hero {
    grid-template-columns:minmax(0,1fr) minmax(330px,.8fr);
    gap:34px;
    padding-inline:42px
  }
  .hero-contact {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .hero-contact li:last-child {
    grid-column:1/-1
  }
  .brand-logos {
    gap:10px
  }
  .brand-tile {
    min-height:165px
  }
}

@media(max-width:980px) {
  .nav nav {
    display:none
  }
  .hero,.section.split,.section.contact,.brand-focus,.product-detail {
    grid-template-columns:1fr
  }
  .hero {
    min-height:auto;
    padding:56px 24px 54px
  }
  .hero h1 {
    max-width:12ch
  }
  .hero-media {
    justify-content:stretch
  }
  .brand-stage {
    width:100%
  }
  .section-head {
    flex-direction:column;
    align-items:flex-start
  }
  .contact form {
    grid-template-columns:1fr
  }
  .contact input,.contact textarea,.contact button,.contact #formStatus {
    grid-column:1/-1
  }
}

@media(max-width:680px) {
  .nav {
    padding:10px 14px
  }
  .brand img {
    width:44px;
    height:44px
  }
  .brand span {
    font-size:12px
  }
  .lang {
    padding:8px 11px
  }
  .hero {
    padding-inline:16px
  }
  .section,.catalog-hero {
    padding:70px 16px
  }
  .stats {
    padding-inline:16px
  }
  .hero h1 {
    font-size:42px
  }
  .hero p,.lead,.section-copy {
    font-size:16px
  }
  .hero-contact {
    grid-template-columns:1fr
  }
  .hero-contact li:last-child {
    grid-column:auto
  }
  .brand-logos {
    grid-template-columns:1fr
  }
  .partner-x {
    display:none
  }
  .brand-tile {
    min-height:150px
  }
  .btn {
    width:100%
  }
  .product-actions,.actions,.brand-actions,.contact-mini {
    flex-direction:column
  }
  .product-actions .btn,.actions .btn,.brand-actions .btn,.contact-mini a {
    width:100%
  }
  footer {
    flex-direction:column;
    align-items:flex-start
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important
  }
  .reveal {
    opacity:1;
    transform:none
  }
}

/* =========================================================
   v1.2.4 — Cinematic Motion Edition
   Dependency-free motion layer (fast + Syria-friendly)
   ========================================================= */

.scroll-progress {
  position:fixed;
  z-index:9999;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:linear-gradient(90deg,var(--gold),#f2ca7b);
  transform:scaleX(0);
  transform-origin:left center;
  pointer-events:none;
  box-shadow:0 0 14px rgba(201,147,63,.35)
}

[dir=rtl] .scroll-progress {
  transform-origin:right center
}

/* Page entry / transition */

.js-ready main,.js-ready footer {
  opacity:0
}

.page-loaded main,.page-loaded footer {
  opacity:1;
  transition:opacity var(--motion-page-fade) ease
}

.page-curtain {
  position:fixed;
  z-index:9998;
  inset:0;
  background:linear-gradient(135deg,#111820,#080a0d);
  transform:translateY(100%);
  pointer-events:none;
  transition:transform var(--motion-page) cubic-bezier(.65,0,.2,1)
}

.page-curtain::after {
  content:"HU × SINOTRUK";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-weight:900;
  letter-spacing:.22em;
  color:rgba(255,255,255,.82);
  font-size:clamp(16px,2vw,28px);
  white-space:nowrap
}

.page-leaving {
  overflow:hidden
}

.page-leaving .page-curtain {
  transform:translateY(0)
}

/* Hero cinematic entrance */

.hero {
  isolation:isolate
}

.hero-bg {
  will-change:transform;
  transition:transform .08s linear
}

.hero::before,.hero::after {
  will-change:transform;
  animation:heroOrbit 16s linear infinite
}

.hero::after {
  animation-duration:11s;
  animation-direction:reverse
}

@keyframes heroOrbit {
  from {
    transform:rotate(0deg) translate3d(var(--pointer-x,0),var(--pointer-y,0),0)
  }
  to {
    transform:rotate(360deg) translate3d(var(--pointer-x,0),var(--pointer-y,0),0)
  }
}

.hero-inner .eyebrow,.hero-inner>p,.hero-inner>.actions,.hero-contact,.hero-media {
  opacity:0;
  transform:translateY(24px)
}

.page-loaded .hero-inner .eyebrow {
  animation:introUp .65s .05s cubic-bezier(.2,.7,.2,1) forwards
}

.page-loaded .hero-inner>p {
  animation:introUp .72s .42s cubic-bezier(.2,.7,.2,1) forwards
}

.page-loaded .hero-inner>.actions {
  animation:introUp .72s .56s cubic-bezier(.2,.7,.2,1) forwards
}

.page-loaded .hero-contact {
  animation:introUp .75s .70s cubic-bezier(.2,.7,.2,1) forwards
}

.page-loaded .hero-media {
  animation:introScale .9s .32s cubic-bezier(.18,.8,.2,1) forwards
}

@keyframes introUp {
  to {
    opacity:1;
    transform:none
  }
}

@keyframes introScale {
  0% {
    opacity:0;
    transform:translate3d(36px,20px,0) scale(.94)
  }
  100% {
    opacity:1;
    transform:none
  }
}

.hero-word-wrap {
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  padding-bottom:.05em
}

.hero-word {
  display:inline-block;
  transform:translateY(115%);
  opacity:.12;
  will-change:transform;
  transition:none
}

.page-loaded .hero-word {
  animation:wordRise .78s cubic-bezier(.16,.82,.2,1) forwards;
  animation-delay:calc(110ms + var(--word-i)*75ms)
}

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

.catalog-hero .hero-word,.product-info .hero-word {
  animation-delay:calc(40ms + var(--word-i)*55ms)
}

/* Moving brand band */

.motion-marquee {
  overflow:hidden;
  background:#0d1218;
  color:#fff;
  border-block:1px solid rgba(255,255,255,.08);
  padding:13px 0;
  white-space:nowrap
}

.motion-marquee-track {
  display:inline-flex;
  align-items:center;
  gap:28px;
  min-width:max-content;
  animation:marqueeMove 24s linear infinite;
  font-size:12px;
  font-weight:900;
  letter-spacing:.2em
}

.motion-marquee-track span {
  opacity:.9
}

.motion-marquee-track i {
  color:var(--gold);
  font-style:normal;
  font-size:16px
}

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

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

[dir=rtl] .motion-marquee-track {
  animation-name:marqueeMoveRTL
}

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

/* Reveal system upgraded */

.reveal {
  opacity:0;
  transform:translate3d(0,38px,0) scale(.985);
  filter:blur(4px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),filter .8s ease;
  transition-delay:var(--reveal-delay,0ms);
  will-change:transform,opacity
}

.reveal.in-view {
  opacity:1;
  transform:none;
  filter:none
}

.section.reveal {
  transform:translate3d(0,50px,0)
}

.section.reveal.in-view {
  transform:none
}

/* 3D hover surface + cursor light */

.motion-tilt {
  position:relative;
  transform-style:preserve-3d;
  will-change:transform;
  transform:
    translateY(var(--scroll-y,0px))
    perspective(1100px)
    rotateX(var(--tilt-rx,0deg))
    rotateY(var(--tilt-ry,0deg));
  transition:transform .18s ease,box-shadow .32s ease,border-color .3s ease
}

.motion-tilt::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(
      260px circle at
      var(--shine-x,50%)
      var(--shine-y,50%),
      rgba(255,255,255,.22),
      transparent 58%
    );
  opacity:0;
  transition:opacity .25s ease
}

.dark .motion-tilt::before,.brand-panel.motion-tilt::before {
  background:radial-gradient(280px circle at var(--shine-x,50%) var(--shine-y,50%),rgba(229,183,94,.14),transparent 58%)
}

.motion-tilt:hover::before {
  opacity:1
}

.motion-tilt>* {
  position:relative;
  z-index:1
}

.card.motion-tilt:hover,.product-card.motion-tilt:hover,.location-grid article.motion-tilt:hover {
  box-shadow:0 28px 64px rgba(20,24,30,.14)
}

.dark .card.motion-tilt:hover {
  box-shadow:0 24px 58px rgba(0,0,0,.34)
}

.product-card.motion-tilt:hover>a img {
  transform:scale(1.065)
}

/* Magnetic buttons */

.magnetic {
  --mag-x:0px;
  --mag-y:0px;
  transform:translate3d(var(--mag-x),var(--mag-y),0);
  transition:transform .18s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease,color .25s ease
}

.magnetic:hover {
  transform:translate3d(var(--mag-x),calc(var(--mag-y) - 2px),0)
}

.btn::after {
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-125%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  transition:transform .65s ease;
  pointer-events:none
}

.btn:hover::after {
  transform:translateX(125%) skewX(-18deg)
}

/* Animated details */

.eyebrow {
  position:relative;
  display:inline-block
}

.eyebrow::after {
  content:"";
  display:inline-block;
  width:30px;
  height:1px;
  background:currentColor;
  vertical-align:middle;
  margin-inline-start:10px;
  transform-origin:left;
  animation:eyebrowPulse 2.8s ease-in-out infinite
}

@keyframes eyebrowPulse {
  0%,100% {
    transform:scaleX(.55);
    opacity:.45
  }
  50% {
    transform:scaleX(1);
    opacity:1
  }
}

.nav.scrolled {
  min-height:68px
}

.nav,.brand img {
  transition:min-height .3s ease,padding .3s ease,box-shadow .3s ease,background .3s ease,transform .3s ease
}

.nav.scrolled .brand img {
  transform:scale(.92)
}

.stats strong {
  font-variant-numeric:tabular-nums
}

.stats div {
  position:relative;
  overflow:hidden
}

.stats div::after {
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);
  transition:right .5s ease
}

.stats div:hover::after {
  right:0
}

.brand-panel img {
  transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .7s ease
}

.brand-panel:hover img {
  transform:scale(1.045);
  filter:drop-shadow(0 16px 24px rgba(255,255,255,.08))
}

.sino-tile img,.hu-tile img {
  transition:transform .55s cubic-bezier(.2,.7,.2,1)
}

.brand-tile:hover img {
  transform:scale(1.045)
}

.location-grid article .flag {
  transition:transform .3s ease,background .3s ease
}

.location-grid article:hover .flag {
  transform:translateY(-2px) rotate(-2deg);
  background:#ead7b5
}

[dir=rtl] .location-grid article:hover .flag {
  transform:translateY(-2px) rotate(2deg)
}

/* Decorative section depth */

.section {
  position:relative;
  overflow:hidden
}

.products-home::before,.locations::before {
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  border-radius:50%;
  filter:blur(1px);
  pointer-events:none;
  opacity:.18
}

.products-home::before {
  background:radial-gradient(circle,rgba(201,147,63,.25),transparent 68%);
  right:-170px;
  top:30px
}

.locations::before {
  background:radial-gradient(circle,rgba(20,24,30,.10),transparent 68%);
  left:-170px;
  bottom:-80px
}

@media(max-width:980px) {
  .motion-marquee-track {
    animation-duration:20s
  }
  .motion-tilt {
    transform:none!important
  }
  .hero::before,.hero::after {
    animation-duration:22s
  }
}

@media(max-width:680px) {
  .motion-marquee {
    padding:10px 0
  }
  .motion-marquee-track {
    gap:20px;
    font-size:10px;
    letter-spacing:.16em
  }
  .hero-word-wrap {
    overflow:visible
  }
  .page-curtain::after {
    font-size:13px;
    letter-spacing:.13em
  }
}

@media(prefers-reduced-motion:reduce) {
  .scroll-progress {
    display:none
  }
  .page-curtain {
    display:none
  }
  .hero::before,.hero::after,.motion-marquee-track,.eyebrow::after {
    animation:none!important
  }
  .hero-inner .eyebrow,.hero-inner>p,.hero-inner>.actions,.hero-contact,.hero-media,.hero-word {
    opacity:1!important;
    transform:none!important
  }
  .reveal {
    opacity:1!important;
    transform:none!important;
    filter:none!important
  }
  .motion-tilt,.magnetic {
    transform:none!important
  }
  .js-ready main,.js-ready footer {
    opacity:1!important
  }
}

/* ===========================================================================
   v1.2.6 | Editable website backgrounds (managed via admin/media.php)
   =========================================================================== */
.hero-bg {
  background-image:
    linear-gradient(
      90deg,
      rgba(250, 247, 241, .92) 0%,
      rgba(250, 247, 241, .67) 50%,
      rgba(250, 247, 241, .22) 100%
    ),
    var(--hero-photo, none);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

[dir=rtl] .hero-bg {
  background-image:
    linear-gradient(
      270deg,
      rgba(250, 247, 241, .92) 0%,
      rgba(250, 247, 241, .67) 50%,
      rgba(250, 247, 241, .22) 100%
    ),
    var(--hero-photo, none);
}

.brand-panel {
  background-image:
    linear-gradient(rgba(8, 12, 18, .58), rgba(8, 12, 18, .58)),
    var(--brand-photo, none);
  background-position:center;
  background-size:cover;
}

.catalog-hero {
  background-image:
    linear-gradient(rgba(248, 246, 241, .89), rgba(248, 246, 241, .81)),
    var(--catalog-photo, none);
  background-position:center;
  background-size:cover;
}

.contact {
  background-image:
    linear-gradient(rgba(250, 248, 243, .94), rgba(250, 248, 243, .92)),
    var(--contact-photo, none);
  background-position:center;
  background-size:cover;
}

/* ===========================================================================
   v1.2.6 | Product color previews, thumbnail gallery and lightbox
   =========================================================================== */
.product-media-column {
  min-width:0;
  display:grid;
  gap:14px;
}

.product-media.gallery-main {
  border:0;
  cursor:zoom-in;
  padding:10px;
  width:100%;
  min-height:360px;
  appearance:none;
}

.gallery-main img {
  height:min(54vw, 460px);
  width:100%;
  object-fit:contain;
  transition:transform .4s ease;
}

.gallery-main:hover img {
  transform:scale(1.035);
}

.gallery-thumbnails {
  display:flex;
  align-items:center;
  gap:10px;
  max-width:100%;
  overflow-x:auto;
  padding:5px 3px 10px;
}

.gallery-thumbnail {
  flex:0 0 90px;
  width:90px;
  height:74px;
  background:#fff;
  border:2px solid #dfe2e6;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  padding:3px;
  transition:border-color .25s, transform .25s;
}

.gallery-thumbnail:hover {
  transform:translateY(-3px);
}

.gallery-thumbnail.selected {
  border-color:#c69345;
}

.gallery-thumbnail img {
  width:100%;
  height:100%;
  object-fit:contain;
}

.product-colours,
.colour-options {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
}

.product-colours {
  margin:8px 0 4px;
}

.colour-dot {
  width:20px;
  height:20px;
  flex:0 0 20px;
  border:1px solid rgba(0,0,0,.22);
  box-shadow:0 0 0 2px #fff;
  border-radius:50%;
  display:inline-block;
}

.product-colour-picker {
  margin:24px 0;
}

.product-colour-picker h2 {
  font-size:18px;
  margin:0 0 12px;
}

.colour-option {
  display:flex;
  align-items:center;
  gap:8px;
  background:#fff;
  border:1px solid #d6dbe0;
  border-radius:999px;
  cursor:pointer;
  padding:8px 12px;
  color:#222;
  transition:transform .25s ease, border-color .25s ease;
}

.colour-option:hover,
.colour-option.selected {
  border-color:#c69345;
  transform:translateY(-2px);
}

.selected-colour {
  min-height:1.6em;
  color:#76511d;
  font-weight:600;
}

.lightbox-open {
  overflow:hidden;
}

.truck-lightbox[hidden] {
  display:none;
}

.truck-lightbox {
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(5,8,13,.95);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:66px 75px;
}

.lightbox-image {
  width:100%;
  height:100%;
  object-fit:contain;
}

.truck-lightbox button {
  position:absolute;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  color:#fff;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  cursor:pointer;
  font-size:30px;
  transition:background .25s;
}

.truck-lightbox button:hover {
  background:rgba(255,255,255,.28);
}

.lightbox-close { top:16px; right:18px; }
.lightbox-prev { left:16px; top:50%; }
.lightbox-next { right:16px; top:50%; }

@media (max-width:700px) {
  .gallery-main img { height:300px; }
  .truck-lightbox { padding:70px 14px; }
  .lightbox-prev { left:8px; }
  .lightbox-next { right:8px; }
}

@media (prefers-reduced-motion:reduce) {
  .gallery-main img,
  .gallery-thumbnail,
  .colour-option { transition:none; }
}

/* ==========================================================================
   v1.2.7 | Hero photo, published projects, accessible mobile navigation
   ========================================================================== */

/* Override `.hero > * { position: relative; z-index: 1; }` from the theme. */
.hero > .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  grid-area: auto;
  pointer-events: none;
  background-image:
    linear-gradient(
      90deg,
      rgba(250, 247, 241, .74) 0%,
      rgba(250, 247, 241, .38) 50%,
      rgba(250, 247, 241, .08) 100%
    ),
    var(--hero-photo, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Keep the decorative gradient when no image has been uploaded. */
.hero > .hero-bg:not(.has-photo) {
  background-image:
    radial-gradient(circle at 12% 15%, rgba(201, 147, 63, .20), transparent 30%),
    radial-gradient(circle at 90% 18%, rgba(20, 24, 30, .08), transparent 23%);
}

[dir="rtl"] .hero > .hero-bg.has-photo {
  background-image:
    linear-gradient(
      270deg,
      rgba(250, 247, 241, .74) 0%,
      rgba(250, 247, 241, .38) 50%,
      rgba(250, 247, 241, .08) 100%
    ),
    var(--hero-photo, none);
}

.hero > .hero-inner,
.hero > .hero-media {
  position: relative;
  z-index: 2;
}

.hero > .hero-bg.has-photo {
  box-shadow: inset 0 -70px 90px rgba(255, 255, 255, .24);
}

/* Anchor destinations remain visible below the sticky navigation. */
section[id] {
  scroll-margin-top: 96px;
}

/* Featured projects use the existing admin `projects` collection. */
.projects-section {
  background: #f9f7f2;
}

.projects-section .section-copy {
  max-width: 58ch;
}

.projects-section .project-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
}

.project-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e2e2de;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(20, 24, 30, .05);
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.project-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 42px rgba(20, 24, 30, .12);
  border-color: #c9b58f;
}

.project-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, #111820, #334255);
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}

.project-card:hover .project-image img {
  transform: scale(1.045);
}

.project-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #d7ad68;
  font-size: clamp(52px, 6vw, 90px);
  font-weight: 800;
  letter-spacing: -.08em;
}

.project-content {
  padding: 22px 24px 26px;
}

.project-content time {
  display: block;
  margin-bottom: 8px;
  color: #8b651e;
  font-size: 13px;
  font-weight: 700;
}

.project-content h3 {
  margin: 0 0 10px;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.project-content p {
  margin: 0;
  color: #4e5965;
  overflow-wrap: anywhere;
}

/* The main menu must remain reachable on phones and tablets. */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.nav-toggle span {
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .25s ease, opacity .25s ease;
}

.nav-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-7px) rotate(-45deg);
}

.media-warning {
  color: #ae462b;
}

@media (max-width: 1180px) and (min-width: 981px) {
  .projects-section .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .nav-toggle {
    display: flex;
    margin-inline-start: auto;
  }

  .nav nav {
    position: absolute;
    inset-inline: 16px;
    top: calc(100% + 6px);
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(20, 24, 30, .13);
    max-height: min(68vh, 560px);
    overflow-y: auto;
  }

  .nav nav.is-open {
    display: flex;
  }

  .nav nav a {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
  }

  .nav nav a:hover,
  .nav nav a:focus-visible {
    background: #f6f1e6;
  }

  .projects-section .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 660px) {
  .projects-section .project-grid {
    grid-template-columns: 1fr;
  }

  .nav {
    gap: 10px;
  }

  .nav .brand {
    min-width: 0;
  }

  .nav .brand span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-card,
  .project-image img,
  .nav-toggle span {
    transition: none !important;
  }
}

/* v1.4.3 bot honeypot: visually hidden but present for simple form bots */
.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}