:root{
  --ruby:#F62217;
  --ruby-dark:#d81b12;
  --mocha:#493D26;
  --mocha-2:#5f5137;
  --cream:#f8f5ef;
  --cream-2:#f2ece3;
  --white:#ffffff;
  --text:#2f271a;
  --muted:#6f6451;
  --line:#e2d7c6;
  --shadow:0 20px 50px rgba(73,61,38,.08);
  --radius:18px;
  --radius-sm:12px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:var(--cream);line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(var(--max),calc(100% - 40px));margin:0 auto}
header.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:74px}
.brand{display:flex;flex-direction:column;gap:2px}
.brand-title{font-size:1.9rem;font-weight:800;line-height:1}
.brand-title .arts{color:var(--ruby)}
.brand-title .tag,.brand-title .llp{color:var(--mocha)}
.brand-sub{font-size:.72rem;letter-spacing:.04em;text-transform:none;color:var(--mocha-2);margin-top:1px}
.brand-sub::before{content:'..... ';letter-spacing:.12em;font-size:.9em}
.footer .brand-sub{color:#e8c9a0 !important}
.footer .brand-sub span{color:#ffb8b2 !important}
.brand-sub span{color:var(--ruby)}
.nav-links{display:flex;gap:8px;list-style:none;padding:0;margin:0;flex-wrap:wrap;align-items:center}
.nav-links a{padding:10px 14px;border-radius:999px;color:var(--mocha);font-weight:600;font-size:.95rem}
.nav-links a:hover,.nav-links a.active{color:var(--ruby);background:#fff1ef}
.nav-links a.cta{background:transparent;color:var(--mocha)}
.nav-links a.cta:hover{background:#fff1ef;color:var(--ruby)}
.hero{padding:88px 0 72px;background:linear-gradient(135deg,#fff 0%,#faf6f1 55%,#efe4d5 100%);border-bottom:3px solid var(--ruby)}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.kicker{display:inline-block;padding:8px 16px;border-radius:999px;background:#fff0ee;color:var(--ruby);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(246,34,23,.15)}
h1{font-size:clamp(2.5rem,5vw,4.4rem);line-height:1.08;color:var(--mocha);margin:18px 0}
h1 em{color:var(--ruby);font-style:normal}
.lead{font-size:1.08rem;color:var(--muted)}
.button-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;border-radius:999px;font-weight:700;font-size:1rem;border:2px solid transparent}
.btn-primary{background:var(--ruby);color:#fff}.btn-primary:hover{background:var(--ruby-dark)}
.btn-secondary{background:transparent;color:var(--mocha);border-color:var(--mocha)}
.btn-secondary:hover{background:var(--mocha);color:#fff}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px}
.panel h3,.card h3,.feature h3,.section h2,.cta-box h2,.quote-card h3{color:var(--mocha);margin-top:0}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.stat{background:var(--cream);border-radius:var(--radius-sm);padding:16px}
.stat strong{display:block;font-size:1.8rem;color:var(--ruby)}
.section{padding:76px 0}
.section-head{margin-bottom:34px}
.eyebrow{color:var(--ruby);font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.section h2{font-size:clamp(1.8rem,3vw,2.8rem);margin:.35rem 0 .75rem}
.section p.section-copy{color:var(--muted);font-size:1.02rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card,.quote-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 12px 30px rgba(73,61,38,.04)}
.quote-card form{margin-top:2px}
.card p,.feature p,.list li,.quote-card p,.muted{color:var(--muted)}
.icon{width:52px;height:52px;border-radius:14px;background:#fff1ef;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:12px}
.band{background:linear-gradient(135deg,#3d311c 0%,#493D26 100%);color:#fff}
.band h2{color:#fff}
.band .section-copy{color:#e8dcc7 !important}
.band .feature{background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.45);border-radius:var(--radius);padding:24px;box-shadow:0 12px 30px rgba(0,0,0,.10)}
.band .feature h3{color:var(--mocha)}
.band .feature p{color:var(--muted)}
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.checklist li::before{content:'• ';color:#ffb0aa;font-weight:700}
.products-grid .card{min-height:100%}
.quote-strip{background:var(--cream-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.quote-strip .stats-line{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.quote-strip .stats-line div{text-align:center;padding:28px 16px;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:6px}
.quote-strip .stats-line div:last-child{border-right:0}
.quote-strip strong{display:block;color:var(--ruby);font-size:1.9rem;line-height:1.1;white-space:nowrap}
.quote-strip span{display:block;color:var(--muted);font-size:.9rem;line-height:1.45;text-align:center}.cta-box{background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px;box-shadow:var(--shadow)}
.footer{background:var(--mocha);color:#e6d7be;padding:54px 0 22px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:24px}
.footer h4{color:#fff3e0;margin-top:0;margin-bottom:8px}
.footer p,.footer li{color:#cfbea4;margin-top:0}
.footer a{color:#cfbea4}
.footer a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:28px;padding-top:18px;color:#bba98b;font-size:.92rem}
.footer-grid div>p br{display:none}
.footer-grid div>p a{display:block;padding:3px 0;line-height:1.8}
.page-hero{padding:72px 0 48px;background:linear-gradient(135deg,#fff 0%,#faf6f1 100%);border-bottom:2px solid var(--ruby)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;align-items:start}
.field{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.field.full{grid-column:1 / -1}
.field span{display:block;font-size:.8rem;font-weight:700;letter-spacing:.01em;color:var(--mocha);margin-bottom:1px}
.field span span{display:inline;font-size:inherit;font-weight:inherit;letter-spacing:inherit;color:inherit;margin-bottom:0}
.required-note{font-size:.78rem;color:#7a6848;margin-top:-4px;margin-bottom:10px}
.field input,.field select,.field textarea{display:block;width:100%;padding:10px 13px;border:1px solid #d8ccb9;border-radius:9px;background:#fff;font:inherit;color:var(--text);box-shadow:inset 0 1px 2px rgba(73,61,38,.03);transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease}
.field input::placeholder,.field textarea::placeholder{color:#978972}
.field input,.field select{min-height:42px}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%, var(--mocha) 50%),linear-gradient(135deg, var(--mocha) 50%, transparent 50%);background-position:calc(100% - 18px) calc(50% - 3px),calc(100% - 12px) calc(50% - 3px);background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:34px}
.field textarea{min-height:128px;resize:vertical;line-height:1.5}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#c9b89f}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:rgba(246,34,23,.42);box-shadow:0 0 0 3px rgba(246,34,23,.10);background:#fffdfc}
.table-list{display:grid;gap:12px}
.table-list .row{display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:12px;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff}
.small{font-size:.92rem}
@media (max-width: 980px){
  .hero-grid,.grid-4,.grid-3,.grid-2,.footer-grid,.form-grid,.quote-strip .stats-line,.table-list .row{grid-template-columns:1fr}
  .navbar{align-items:flex-start;padding:14px 0}
  .nav-links{justify-content:flex-start}
}


/* RFQ page enhancements */
.hero-grid{align-items:start}
.hero .panel{margin-top:6px}
.quote-intro{display:grid;grid-template-columns:.92fr 1.08fr;gap:22px;align-items:start}
.info-stack{display:grid;gap:18px}
.product-section{margin-top:28px}
.product-band{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.product-band p{margin:0;color:var(--muted)}
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.product-card-visual{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 30px rgba(73,61,38,.04);overflow:hidden}
.product-media{aspect-ratio:16/10;background:linear-gradient(135deg,#fff 0%,#faf5ee 50%,#efe1cf 100%);display:flex;align-items:center;justify-content:center;padding:24px;position:relative}
.product-media::before{content:'Product image ready';position:absolute;top:16px;right:16px;background:#fff7f6;color:var(--ruby);border:1px solid rgba(246,34,23,.16);padding:6px 10px;border-radius:999px;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.tape-roll{width:152px;height:152px;border-radius:50%;background:radial-gradient(circle at 52% 50%, #f7f0e5 0 24%, #d2b89f 24% 32%, #4e4a45 32% 48%, var(--swatch,#1e1e1e) 48% 100%);box-shadow:0 18px 28px rgba(73,61,38,.18)}
.product-body{padding:24px}
.product-body h3{margin:0 0 8px;color:var(--mocha)}
.product-meta{color:var(--muted);margin:0 0 18px}
.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.option-grid .field.full{grid-column:1/-1}
.swatch-set{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.swatch{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);background:#fff;border-radius:999px;font-size:.9rem;color:var(--text)}
.swatch-dot{width:14px;height:14px;border-radius:50%;border:1px solid rgba(73,61,38,.18);display:inline-block}

.real-swatch-set{gap:12px}
.real-swatch{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:10px;border-radius:16px;min-width:104px;max-width:118px}
.swatch-image{width:100%;aspect-ratio:2.55/1;border-radius:10px;overflow:hidden;border:1px solid rgba(73,61,38,.10);background:#f6f2eb;display:block}
.swatch-image img{width:100%;height:100%;object-fit:cover;display:block}
.swatch-name{font-size:.82rem;font-weight:700;line-height:1.2}
.real-swatch.active .swatch-image{border-color:rgba(246,34,23,.45);box-shadow:0 0 0 2px rgba(246,34,23,.10)}

.note-chip{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;background:#fff3ef;color:var(--ruby);font-weight:700;font-size:.82rem;margin-top:14px}
.section-label{font-size:.82rem;font-weight:800;color:var(--ruby);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.form-note{color:var(--muted);font-size:.92rem;margin-top:10px}
.rfq-footer-note{margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:0 12px 30px rgba(73,61,38,.04)}
.placeholder-image-note{font-size:.88rem;color:var(--muted);margin-top:12px}
@media (max-width:980px){
  .quote-intro,.product-grid,.option-grid{grid-template-columns:1fr}
}


.swatch{cursor:pointer;transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease}
.swatch:hover{border-color:var(--ruby);transform:translateY(-1px)}
.swatch.active{border-color:var(--ruby);box-shadow:0 0 0 2px rgba(246,34,23,.10);background:#fff8f2}
.swatch:focus-visible{outline:2px solid var(--ruby);outline-offset:2px}


.cable-sample,.printed-sample{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 12px;border-radius:10px;border:1px solid rgba(73,61,38,.12);font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.cable-sample{background:#f5dd2d;color:#111}
.printed-samples{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.printed-sample.orange{background:#ff5b32;color:#111}
.printed-sample.yellow{background:#d7ef16;color:#111}
.real-swatch-set{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.real-swatch{min-width:0;max-width:none;width:100%;box-sizing:border-box}
.product-note-less .option-grid{grid-template-columns:1fr 1fr}
@media (max-width:980px){.real-swatch-set{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.real-swatch-set{grid-template-columns:1fr;}}

.video-feature{padding:56px 0;background:#fff}
.video-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:28px;align-items:center}
.video-feature h2{font-size:clamp(1.9rem,3vw,2.8rem);color:var(--mocha);margin:.35rem 0 .75rem}
.video-feature .section-copy{color:var(--muted);font-size:1.02rem;max-width:620px}
.video-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:var(--shadow)}
.video-wrapper{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#1a1410}
.video-wrapper video{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:980px){.video-grid{grid-template-columns:1fr}}

/* Product detail cards — products.html */
.product-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.product-detail-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 30px rgba(73,61,38,.05)}
.product-detail-card--light{background:rgba(255,255,255,.94)}
.product-colour-strip{height:10px;width:100%}
.product-detail-body{padding:24px}
.product-detail-body h3{color:var(--mocha);margin:0 0 8px}
.product-detail-body>p{color:var(--muted);margin:0 0 18px;line-height:1.6}
.spec-row{display:grid;gap:14px}
.spec-block{display:flex;flex-direction:column;gap:6px}
.spec-label{font-size:.78rem;font-weight:800;color:var(--ruby);letter-spacing:.07em;text-transform:uppercase}
.spec-note{font-size:.9rem;color:var(--muted);line-height:1.5}
.spec-tags{display:flex;flex-wrap:wrap;gap:8px}
.spec-tag{display:inline-block;padding:5px 12px;background:var(--cream);border:1px solid var(--line);border-radius:999px;font-size:.85rem;color:var(--mocha);font-weight:600}
.colour-dot-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.cdot{display:inline-block;width:22px;height:22px;border-radius:50%;cursor:default}
.product-cta{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
@media(max-width:980px){.product-detail-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════
   MOBILE & TABLET RESPONSIVE — Hamburger Nav + Layout
   ═══════════════════════════════════════════════════ */

/* ── Hamburger button (hidden on desktop) ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 9px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--mocha);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease, width 0.2s ease;
}
/* Animate to × when open */
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; width: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Tablet & mobile nav (≤ 780px) ── */
@media (max-width: 780px) {

  .nav-toggle { display: flex; }

  .navbar {
    flex-wrap: wrap;
    padding: 10px 0;
    min-height: 62px;
    align-items: center;
    gap: 0;
  }

  .brand { flex: 1; min-width: 0; }
  .brand-title { font-size: 1.65rem; }
  .brand-sub { font-size: .68rem; }

  /* Nav drawer — hidden by default, shown when .nav-open */
  .site-nav {
    display: none;
    width: 100%;
    border-top: 1px solid var(--line);
    padding: 8px 0 10px;
    margin-top: 10px;
  }
  .site-header.nav-open .site-nav { display: block; }

  /* Stack nav links vertically with large touch targets */
  .nav-links {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
  }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    width: 100%;
    padding: 13px 16px;
    border-radius: 10px;
    font-size: 1rem;
  }

  /* Section spacing */
  .section  { padding: 48px 0; }
  .page-hero { padding: 48px 0 32px; }
  .hero     { padding: 52px 0 44px; }
  .video-feature { padding: 40px 0; }

  /* Headings */
  h1 { font-size: clamp(2rem, 8vw, 3rem); margin: 14px 0; }

  /* CTA box */
  .cta-box { padding: 24px 20px; }

  /* Stats strip — 2 columns on tablet, 1 on phone */
  .quote-strip .stats-line {
    grid-template-columns: 1fr 1fr;
  }
  .quote-strip .stats-line div:nth-child(2) { border-right: 0; }

  /* Buttons */
  .btn { padding: 13px 20px; font-size: .95rem; }
  .button-row { gap: 10px; }

  /* Footer */
  .footer { padding: 40px 0 18px; }
}

/* ── Small phones (≤ 420px) ── */
@media (max-width: 420px) {
  .brand-title { font-size: 1.45rem; }
  .brand-sub { font-size: .63rem; }

  /* Full-width stacked buttons on very small screens */
  .button-row { flex-direction: column; }
  .btn { width: 100%; justify-content: center; }

  /* Stats strip — single column */
  .quote-strip .stats-line { grid-template-columns: 1fr; }
  .quote-strip .stats-line div { border-right: 0; }

  /* Tighten section spacing */
  .section { padding: 36px 0; }
  .page-hero { padding: 36px 0 24px; }
  .hero { padding: 40px 0 32px; }
}

/* ── Very small phones (≤ 390px) — iPhone SE, iPhone mini, compact Androids ── */
@media (max-width: 390px) {
  /* Shrink brand text a touch more */
  .brand-title { font-size: 1.25rem; }
  .brand-sub   { font-size: .58rem; }

  /* Reduce hero/section vertical rhythm */
  .hero        { padding: 32px 0 24px; }
  .page-hero   { padding: 28px 0 18px; }
  .section     { padding: 28px 0; }

  /* Ensure horizontal padding doesn't eat content */
  .container   { padding-left: 14px; padding-right: 14px; }

  /* Keep buttons full-width and readable */
  .btn         { font-size: .88rem; padding: 10px 16px; }

  /* Footer tighter */
  .footer      { padding: 28px 0 14px; }
}

/* ── Ensure desktop nav is always visible ── */
@media (min-width: 781px) {
  .nav-toggle { display: none !important; }
  .site-nav   { display: block !important; }
}