/* ===========================================================
   Design tokens — measurement-sheet inspired, tailoring trade
   =========================================================== */
:root{
  --paper: #F8F7F5;
  --paper-2: #EFEEEA;
  --ink: #1C2430;
  --ink-soft: #545A66;
  --indigo: #0B2A4D;      /* MoveBrands navy */
  --indigo-2: #133863;
  --ochre: #D90D58;       /* MoveBrands magenta — primary accent/CTA */
  --ochre-2: #B00A47;
  --rust: #F2900F;        /* MoveBrands orange — secondary accent */
  --thread: #0091C7;      /* MoveBrands blue — tertiary accent/tags */
  --yellow: #FEC20F;      /* MoveBrands yellow — sparing highlight */
  --line: #D8DBE0;
  --line-strong: #B9BEC8;
  --radius: 3px;
  --max: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Zilla Slab", Georgia, serif;
  color:var(--indigo);
  line-height:1.15;
  margin:0 0 .5em;
  font-weight:600;
}
h1{font-size:clamp(2.1rem,4vw,3.2rem); letter-spacing:-0.01em;}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1em; max-width:66ch; color:var(--ink-soft);}
a{color:var(--indigo); text-decoration:none;}
a:hover{color:var(--ochre-2);}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--ochre); outline-offset:2px;
}
img{max-width:100%; display:block;}
ul{padding-left:1.1em;}
.container{max-width:var(--max); margin:0 auto; padding:0 24px;}

/* ---- stitch rule: a dashed line motif standing in for a seam ---- */
.stitch{
  border:none; border-top:1.5px dashed var(--line-strong);
  margin:0; width:100%;
}
.stitch-v{border-left:1.5px dashed var(--line-strong); height:100%;}

/* ---- header ---- */
.site-header{
  background:var(--paper);
  border-bottom:1.5px dashed var(--line-strong);
  position:sticky; top:0; z-index:50;
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; max-width:var(--max); margin:0 auto; gap:24px;
}
.brand{display:flex; align-items:center; gap:10px; font-family:"Zilla Slab",serif; font-weight:700; font-size:1.15rem; color:var(--indigo);}
.brand img{height:38px; width:auto; display:block;}
.brand .brand-name{display:flex; flex-direction:column; line-height:1.05;}
.brand .brand-name small{font-family:"Public Sans",sans-serif; font-weight:600; font-size:.62rem; letter-spacing:.03em; color:var(--ink-soft); text-transform:none;}
nav.primary{display:flex; gap:28px; align-items:center;}
nav.primary a{font-size:.95rem; color:var(--ink); white-space:nowrap;}
nav.primary a:hover{color:var(--ochre-2);}
.header-cta{
  background:var(--indigo); color:#fff !important; padding:10px 18px;
  border-radius:var(--radius); font-size:.9rem; font-weight:600;
}
.header-cta:hover{background:var(--indigo-2); color:#fff !important;}
.nav-toggle{display:none;}

/* ---- breadcrumb ---- */
.crumb{font-size:.82rem; color:var(--ink-soft); padding:14px 0 0;}
.crumb a{color:var(--ink-soft);}
.crumb a:hover{color:var(--ochre-2);}

/* ---- hero ---- */
.hero{padding:56px 0 40px; border-bottom:1.5px dashed var(--line-strong);}
.hero .eyebrow-tag{
  display:inline-block; font-size:.78rem; color:var(--thread);
  border:1px solid var(--thread); border-radius:20px; padding:3px 12px; margin-bottom:16px;
}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:start;}
.hero-specs{border-left:1.5px dashed var(--line-strong); padding-left:28px;}
.spec-row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dashed var(--line);}
.spec-row:last-child{border-bottom:none;}
.spec-row dt{color:var(--ink-soft); font-size:.88rem;}
.spec-row dd{margin:0; font-weight:600; color:var(--indigo); font-size:.92rem; text-align:right;}
.btn{
  display:inline-block; padding:13px 24px; border-radius:var(--radius);
  font-weight:600; font-size:.95rem; border:1.5px solid var(--indigo);
}
.btn-primary{background:var(--indigo); color:#fff;}
.btn-primary:hover{background:var(--indigo-2); color:#fff;}
.btn-ghost{background:transparent; color:var(--indigo); border-color:var(--indigo);}
.btn-ghost:hover{background:var(--indigo); color:#fff;}
.btn-ochre{background:var(--ochre); border-color:var(--ochre); color:#fff;}
.btn-ochre:hover{background:var(--ochre-2); border-color:var(--ochre-2); color:#fff;}
.btn-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:22px;}

/* ---- sections ---- */
section{padding:52px 0;}
section.tight{padding:34px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:28px; flex-wrap:wrap;}
.section-head p{margin:0;}
.divider{border-top:1.5px dashed var(--line-strong); margin:0;}

/* ---- category grid (measurement-ledger style, not rounded cards) ---- */
.ledger{border-top:1.5px dashed var(--line-strong);}
.ledger-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px;
  padding:20px 4px; border-bottom:1.5px dashed var(--line-strong);
}
.ledger-row .num{font-family:"Zilla Slab",serif; color:var(--ochre-2); font-size:1.1rem; min-width:32px;}
.ledger-row h3{margin:0 0 4px;}
.ledger-row p{margin:0; font-size:.92rem;}
.ledger-row .go{font-size:.85rem; font-weight:600; white-space:nowrap;}

/* ---- three-up grid ---- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:0;}
.grid-3 > *{padding:24px; border-right:1.5px dashed var(--line-strong); border-top:1.5px dashed var(--line-strong);}
.grid-3 > *:nth-child(3n){border-right:none;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:40px;}

/* ---- product/spec table ---- */
.spec-table{width:100%; border-collapse:collapse; margin:18px 0 28px;}
.spec-table th, .spec-table td{
  text-align:left; padding:10px 14px; border-bottom:1px dashed var(--line);
  font-size:.92rem;
}
.spec-table th{color:var(--ink-soft); font-weight:600; font-size:.82rem; text-transform:none;}

/* ---- tag / method list ---- */
.taglist{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 22px;}
.taglist span{
  border:1px solid var(--line-strong); border-radius:20px; padding:5px 14px; font-size:.85rem; color:var(--indigo);
}

/* ---- callout box ---- */
.callout{
  background:var(--paper-2); border-left:3px solid var(--ochre); padding:20px 24px; margin:24px 0;
}
.callout p{margin:0; color:var(--ink);}

/* ---- location strip ---- */
.loc-strip{display:flex; flex-wrap:wrap; gap:10px 22px; padding:18px 0;}
.loc-strip a{font-size:.9rem; color:var(--indigo); border-bottom:1px dashed var(--line-strong); padding-bottom:2px;}

/* ---- footer ---- */
footer{background:var(--indigo); color:#E9E4D6; padding:52px 0 24px; margin-top:60px;}
footer h4{color:#fff; font-family:"Zilla Slab",serif; font-size:1rem; margin-bottom:14px;}
footer a{color:#C9CBD6; font-size:.9rem;}
footer a:hover{color:var(--ochre);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:32px; border-bottom:1px dashed rgba(255,255,255,.2);}
.footer-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.footer-bottom{display:flex; justify-content:space-between; padding-top:20px; font-size:.8rem; color:#9DA1B4; flex-wrap:wrap; gap:10px;}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---- quick facts strip (stacked dt/dd, no overflow) ---- */
.quick-facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  border-top:1.5px dashed var(--line-strong); padding:24px 0 4px; margin-top:8px;
}
.quick-facts div{display:flex; flex-direction:column; gap:4px;}
.quick-facts dt{color:var(--ink-soft); font-size:.82rem;}
.quick-facts dd{margin:0; font-weight:600; color:var(--indigo); font-size:.95rem;}
@media (max-width:880px){ .quick-facts{grid-template-columns:1fr 1fr;} }

/* ---- brand services strip (mirrors the MoveBrands logo lockup) ---- */
.services-strip{
  display:flex; flex-wrap:wrap; gap:0; padding:14px 0; font-size:.82rem; color:var(--ink-soft);
}
.services-strip span{padding:0 16px; border-right:1px solid var(--line-strong);}
.services-strip span:first-child{padding-left:0;}
.services-strip span:last-child{border-right:none;}
.tagline-script{
  font-family:"Zilla Slab",serif; font-style:italic; color:var(--indigo); font-size:1.15rem; margin:6px 0 0;
}

/* ---- hero slideshow (full-bleed banner images) ---- */
.slideshow{position:relative; overflow:hidden; background:var(--paper); border-bottom:1.5px dashed var(--line-strong);}
.slide{display:none;}
.slide.is-active{display:block; animation:slideIn .55s ease both;}
@keyframes slideIn{from{opacity:0;} to{opacity:1;}}
.slide-banner-link{display:block; line-height:0; position:relative;}
.slide-banner-img{width:100%; height:auto; display:block;}
.slide-dots{display:flex; gap:8px; justify-content:center; padding:16px 0;}
.slide-dots button{
  width:9px; height:9px; border-radius:50%; border:1.5px solid var(--indigo); background:transparent; padding:0; cursor:pointer;
}
.slide-dots button.is-active{background:var(--ochre); border-color:var(--ochre);}
.slide-arrows{position:absolute; top:50%; left:0; right:0; display:flex; justify-content:space-between; pointer-events:none; transform:translateY(-50%); padding:0 16px;}
.slide-arrows button{
  pointer-events:auto; background:rgba(247,244,236,.92); border:1.5px solid var(--line-strong); border-radius:50%;
  width:38px; height:38px; cursor:pointer; color:var(--indigo); font-size:1.1rem;
}
.slide-arrows button:hover{border-color:var(--indigo);}
@media (max-width:880px){ .slide-arrows{display:none;} }

/* ---- legacy icon-slide layout (kept in case icon slides are reused elsewhere) ---- */

/* ---- whatsapp float ---- */
.wa-float{
  position:fixed; bottom:22px; right:22px; background:#25D366; color:#fff;
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.25); z-index:60; font-size:1.6rem;
}

/* ---- responsive ---- */
@media (max-width:880px){
  nav.primary{display:none;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-specs{border-left:none; border-top:1.5px dashed var(--line-strong); padding-left:0; padding-top:22px;}
  .grid-3{grid-template-columns:1fr;}
  .grid-3 > *{border-right:none;}
  .grid-2{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }