/* ==========================================================================
   CENTS MOULD — Design System
   Dongguan Cents Precision Manufacturing Co., Ltd.
   Precision Injection Moulds & Plastic Injection Molding | Est. 2003
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --navy-900:#061220;
  --navy-800:#0A1B2E;
  --navy-700:#0E2540;
  --navy-600:#143054;
  --navy-500:#1B3D68;

  --orange-500:#F58220;
  --orange-400:#FF9A2E;
  --orange-600:#D96C0C;

  --blue-500:#1B6CB0;
  --blue-400:#2E8BD4;
  --blue-100:#E4F0FA;

  --steel-100:#F4F7FA;
  --steel-200:#E6EDF4;
  --steel-300:#CFDBE7;
  --steel-500:#7C8FA5;
  --ink-900:#0F1B27;
  --ink-700:#33465A;
  --ink-500:#5A6E82;

  --white:#FFFFFF;

  --radius-sm:6px;
  --radius:12px;
  --radius-lg:20px;

  --shadow-sm:0 2px 8px rgba(6,18,32,.08);
  --shadow:0 10px 30px rgba(6,18,32,.12);
  --shadow-lg:0 24px 60px rgba(6,18,32,.22);

  --container:1220px;
  --header-h:78px;

  --font-head:'Archivo','Barlow Condensed','Oswald',-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.72;
  color:var(--ink-700);
  background:var(--white);
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto;}
a{color:var(--blue-500);text-decoration:none;transition:color .2s ease;}
a:hover{color:var(--orange-500);}
ul,ol{margin:0 0 1em;padding-left:1.15em;}
li{margin:.35em 0;}
h1,h2,h3,h4,h5{font-family:var(--font-head);color:var(--ink-900);line-height:1.14;margin:0 0 .5em;font-weight:800;letter-spacing:-.01em;}
p{margin:0 0 1.1em;}
strong{color:var(--ink-900);font-weight:700;}
hr{border:0;border-top:1px solid var(--steel-300);margin:2.5rem 0;}
:focus-visible{outline:3px solid var(--orange-500);outline-offset:3px;}

/* ---------- 3. Layout ---------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px;}
.container--narrow{max-width:900px;}
.section{padding:92px 0;position:relative;}
.section--tight{padding:64px 0;}
.section--dark{background:var(--navy-800);color:#C6D6E6;}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff;}
.section--steel{background:var(--steel-100);}
.section--navy-grad{background:linear-gradient(150deg,var(--navy-900) 0%,var(--navy-700) 55%,var(--navy-600) 100%);color:#C6D6E6;}
.section--navy-grad h2,.section--navy-grad h3{color:#fff;}
.grid{display:grid;gap:28px;}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}
.center{text-align:center;}

/* ---------- 4. Typography — 3D / dimensional effects ---------- */
/* Multi-layer extruded type: the "stereo" effect requested for selling points */
.t3d{
  /* Base fill must be light: this class is used on dark heroes and its shadow
     stack is white-to-grey. Without an explicit colour the h1 inherited the dark
     body ink and the letters rendered as hollow outlines instead of solid type. */
  color:#EDF3F9;
  text-shadow:
    0 1px 0 rgba(255,255,255,.55),
    0 2px 0 rgba(203,215,228,.95),
    0 3px 0 rgba(186,200,215,.95),
    0 4px 0 rgba(168,184,202,.95),
    0 5px 0 rgba(150,168,189,.95),
    0 6px 1px rgba(6,18,32,.28),
    0 0 6px rgba(6,18,32,.14),
    0 2px 3px rgba(6,18,32,.28),
    0 9px 16px rgba(6,18,32,.30);
}
.t3d--orange{
  color:#FFB55E;
  text-shadow:
    0 1px 0 rgba(255,255,255,.35),
    0 2px 0 #F0801A,
    0 3px 0 #D96C0C,
    0 4px 0 #B85A08,
    0 5px 0 #964905,
    0 6px 1px rgba(0,0,0,.35),
    0 2px 3px rgba(0,0,0,.35),
    0 9px 18px rgba(0,0,0,.45);
}
.t3d--blue{
  color:#BFE0FF;
  text-shadow:
    0 1px 0 rgba(255,255,255,.30),
    0 2px 0 #2E8BD4,
    0 3px 0 #1B6CB0,
    0 4px 0 #14548C,
    0 5px 0 #0E3F6B,
    0 6px 1px rgba(0,0,0,.35),
    0 2px 3px rgba(0,0,0,.35),
    0 9px 18px rgba(0,0,0,.45);
}
.t3d--dark{
  color:#0F1B27;
  text-shadow:
    0 1px 0 #fff,
    0 2px 0 #E3EAF2,
    0 3px 0 #CDD9E6,
    0 4px 0 #B6C6D8,
    0 5px 0 #9FB3C9,
    0 6px 1px rgba(6,18,32,.18),
    0 9px 14px rgba(6,18,32,.20);
}
/* Glossy gradient fill with a subtle bevel */
.t-gloss{
  background:linear-gradient(180deg,#FFFFFF 0%,#D8E6F5 42%,#8FB4D8 58%,#FFFFFF 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 2px rgba(6,18,32,.45)) drop-shadow(0 10px 16px rgba(6,18,32,.35));
}
.t-gloss--orange{
  background:linear-gradient(180deg,#FFF3E0 0%,#FFC177 40%,#F58220 62%,#FFD9A8 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 2px rgba(6,18,32,.5)) drop-shadow(0 10px 16px rgba(6,18,32,.4));
}
/* Outline-only type for layered headlines */
.t-outline{
  color:transparent;
  -webkit-text-stroke:2px rgba(245,130,32,.85);
  text-shadow:none;
}
.t-outline--light{-webkit-text-stroke:2px rgba(255,255,255,.45);}

/* Display scale — deliberately varied sizes so selling points read at a glance */
.t-display{font-size:clamp(3rem,8.5vw,6.2rem);line-height:.98;letter-spacing:-.035em;text-transform:uppercase;}
.t-xl{font-size:clamp(2.3rem,5.2vw,3.9rem);line-height:1.03;letter-spacing:-.025em;text-transform:uppercase;}
.t-lg{font-size:clamp(1.85rem,3.6vw,2.7rem);line-height:1.1;letter-spacing:-.02em;}
.t-md{font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.2;}
.t-num{font-size:clamp(3.4rem,9vw,6.6rem);line-height:.9;letter-spacing:-.045em;}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-head);font-weight:800;font-size:.82rem;
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--orange-500);margin-bottom:14px;
}
.eyebrow::before{content:"";width:34px;height:3px;background:var(--orange-500);border-radius:2px;}
.section--dark .eyebrow,.section--navy-grad .eyebrow{color:var(--orange-400);}
.lead{font-size:1.14rem;line-height:1.78;color:var(--ink-500);}
.section--dark .lead,.section--navy-grad .lead{color:#A9BED3;}
.section__head{max-width:820px;margin-bottom:52px;}
.section__head--center{margin-left:auto;margin-right:auto;text-align:center;}
.section__head--center .eyebrow{justify-content:center;}

/* Highlighted inline keyword chips inside body copy (SEO/GEO signals) */
.kw{color:var(--ink-900);font-weight:700;border-bottom:2px solid rgba(245,130,32,.4);}
.section--dark .kw,.section--navy-grad .kw{color:#fff;border-bottom-color:rgba(245,130,32,.55);}
.section--dark a,.section--navy-grad a{color:var(--orange-400);}
.section--dark a:hover,.section--navy-grad a:hover{color:#FFD9A8;}
/* Inline <strong> must not inherit the dark body colour on dark backgrounds */
.hero strong,
.section--dark strong,
.section--navy-grad strong,
.cta strong,
.card--dark strong,
.footer strong,
.hero em,
.section--dark em,
.section--navy-grad em,
.cta em{color:#FFFFFF;}
.hero a strong,
.section--dark a strong,
.section--navy-grad a strong{color:inherit;}

.tag{
  display:inline-block;padding:5px 13px;border-radius:999px;
  font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  background:var(--blue-100);color:var(--blue-500);
}
.tag--orange{background:#FDECD9;color:var(--orange-600);}
.tag--dark{background:rgba(255,255,255,.1);color:#CFE1F2;}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:var(--radius-sm);border:0;cursor:pointer;
  font-family:var(--font-head);font-weight:800;font-size:.95rem;
  letter-spacing:.05em;text-transform:uppercase;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.btn--primary{background:linear-gradient(180deg,var(--orange-400),var(--orange-600));color:#fff;box-shadow:0 6px 18px rgba(217,108,12,.38);}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(217,108,12,.5);color:#fff;}
.btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);}
.btn--ghost:hover{background:#fff;color:var(--navy-800);transform:translateY(-2px);}
.btn--dark{background:var(--navy-700);color:#fff;}
.btn--dark:hover{background:var(--navy-500);color:#fff;transform:translateY(-2px);}
.btn--outline{background:transparent;color:var(--navy-700);box-shadow:inset 0 0 0 2px var(--steel-300);}
.btn--outline:hover{box-shadow:inset 0 0 0 2px var(--orange-500);color:var(--orange-600);}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;}

/* ---------- 6. Header ---------- */
.topbar{
  background:#ECE9E1;color:#4A5A6B;font-size:.8rem;
  letter-spacing:.04em;padding:8px 0;border-bottom:1px solid #DFDBD2;
}
.topbar__inner{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;}
.topbar a{color:#0155AF;}
.topbar a:hover{color:#013E7D;}

.header{
  position:sticky;top:0;z-index:900;
  background:rgba(246,245,240,.97);
  backdrop-filter:blur(10px);
  border-bottom:1px solid #E3E0D8;
  transition:box-shadow .25s ease;
}
.header.is-scrolled{box-shadow:0 8px 30px rgba(6,18,32,.14);}
.header__inner{display:flex;align-items:center;justify-content:flex-start;gap:18px;height:var(--header-h);}
/* Push the nav and the CTA to the right edge as a single cluster, leaving one large gap
   after the logo - the arrangement the client asked for and their reference shows. */
.header .nav{margin-left:auto;}

.logo{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.logo__mark{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(from 210deg,var(--orange-500) 0deg,var(--orange-400) 200deg,var(--orange-600) 340deg,var(--orange-500) 360deg);
  display:grid;place-items:center;position:relative;
  box-shadow:0 4px 14px rgba(245,130,32,.4);
}
.logo__mark::after{content:"";width:26px;height:26px;border-radius:50%;background:var(--navy-800);}
.logo__img{height:52px;width:auto;display:block;flex-shrink:0;}
.logo__text{line-height:1.05;}
.logo__name{font-family:var(--font-head);font-weight:900;font-size:1.5rem;letter-spacing:-.02em;color:#fff;display:block;}
.logo__name em{font-style:normal;color:var(--orange-500);}
.logo__sub{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#5A6B7D;font-weight:600;}

.nav{display:flex;align-items:center;gap:4px;}
.nav a{
  color:#0155AF;font-family:var(--font-head);font-weight:700;font-size:.85rem;
  letter-spacing:.045em;text-transform:uppercase;padding:9px 11px;border-radius:var(--radius-sm);
  white-space:nowrap;
}
.nav a:hover{color:#013E7D;background:rgba(1,85,175,.07);}
.nav a.is-active{color:#013E7D;background:rgba(1,85,175,.12);}
.header__cta{flex-shrink:0;}
.header__cta .btn{padding:11px 22px;font-size:.82rem;}
.header__cta .btn--primary{background:#0155AF;box-shadow:0 6px 18px rgba(1,85,175,.26);}
.header__cta .btn--primary:hover{background:#013E7D;box-shadow:0 12px 26px rgba(1,85,175,.34);color:#fff;}

.burger{display:none;background:none;border:0;cursor:pointer;padding:10px;width:46px;height:46px;}
.burger span{display:block;height:2px;background:#0155AF;margin:5px 0;border-radius:2px;transition:.3s;}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.is-open span:nth-child(2){opacity:0;}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- 7. Hero ---------- */
.hero{position:relative;background:var(--navy-900);overflow:hidden;}
.hero__media{position:absolute;inset:0;}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center;}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(6,18,32,.96) 0%,rgba(6,18,32,.9) 42%,rgba(10,27,46,.62) 68%,rgba(10,27,46,.32) 100%);
}
.hero__inner{position:relative;z-index:2;padding:118px 0 108px;max-width:790px;}
.hero h1{margin-bottom:22px;}
.hero__sub{font-size:1.2rem;line-height:1.75;color:#B9CDE0;max-width:610px;}
.hero__meta{display:flex;flex-wrap:wrap;gap:26px;margin-top:38px;padding-top:30px;border-top:1px solid rgba(255,255,255,.14);}
.hero__meta div{min-width:118px;}
.hero__meta b{display:block;font-family:var(--font-head);font-size:1.7rem;color:var(--orange-400);line-height:1.1;}
.hero__meta span{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#8FA9C2;}

.hero--page .hero__inner{padding:82px 0 72px;max-width:900px;}
.breadcrumb{font-size:.82rem;color:#8FA9C2;margin-bottom:16px;letter-spacing:.04em;}
.breadcrumb a{color:#A9BED3;}
.breadcrumb span{color:var(--orange-400);}

/* ---------- 8. Trust / stat bar ---------- */
.statbar{background:var(--navy-700);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);}
.statbar__grid{display:grid;grid-template-columns:repeat(5,1fr);}
.statbar__item{padding:30px 20px;text-align:center;border-right:1px solid rgba(255,255,255,.09);}
.statbar__item:last-child{border-right:0;}
.statbar__item b{display:block;font-family:var(--font-head);font-weight:900;font-size:2.1rem;line-height:1.05;}
.statbar__item span{display:block;margin-top:6px;font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;color:#93AEC7;}

/* ---------- 9. Selling-point blocks (image + 3D headline) ---------- */
.sp{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radius-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow);margin-bottom:38px;}
.sp:last-child{margin-bottom:0;}
.sp--flip .sp__media{order:2;}
.sp__media{position:relative;min-height:390px;overflow:hidden;background:var(--navy-800);}
.sp__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1);}
.sp:hover .sp__media img{transform:scale(1.05);}
.sp__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,18,32,.16),rgba(6,18,32,.5));}
.sp__badge{
  position:absolute;z-index:2;top:22px;left:22px;
  width:66px;height:66px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-head);font-weight:900;font-size:1.5rem;color:#fff;
  background:linear-gradient(160deg,var(--orange-400),var(--orange-600));
  box-shadow:0 8px 22px rgba(0,0,0,.42),inset 0 -3px 0 rgba(0,0,0,.2),inset 0 3px 0 rgba(255,255,255,.3);
}
.sp__caption{
  position:absolute;z-index:2;left:22px;right:22px;bottom:20px;
  font-family:var(--font-head);font-weight:800;font-size:.83rem;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.75);
}
.sp__body{padding:46px 44px;display:flex;flex-direction:column;justify-content:center;}
.sp__body h3{margin-bottom:16px;}
.sp__body p{color:var(--ink-500);margin-bottom:0;}
.sp__body .kw{color:var(--ink-900);}
.sp__list{list-style:none;padding:0;margin:20px 0 0;}
.sp__list li{position:relative;padding-left:28px;color:var(--ink-700);font-size:.97rem;}
.sp__list li::before{
  content:"";position:absolute;left:0;top:.62em;width:14px;height:6px;
  border-left:2.5px solid var(--orange-500);border-bottom:2.5px solid var(--orange-500);
  transform:rotate(-45deg);
}
.sp__kpi{
  display:inline-flex;align-items:baseline;gap:8px;margin-bottom:12px;
  font-family:var(--font-head);font-weight:900;font-size:2.5rem;line-height:1;
}
.sp__kpi small{font-size:.86rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--steel-500);}

/* ---------- 10. Cards ---------- */
.card{
  background:#fff;border-radius:var(--radius);padding:34px 30px;
  box-shadow:var(--shadow-sm);border:1px solid var(--steel-200);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  position:relative;overflow:hidden;
}
.card::before{content:"";position:absolute;left:0;top:0;height:4px;width:0;background:var(--orange-500);transition:width .35s ease;}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--steel-300);}
.card:hover::before{width:100%;}
.card h3{margin-bottom:12px;font-size:1.22rem;}
.card p:last-child{margin-bottom:0;}
.card__icon{
  width:56px;height:56px;border-radius:var(--radius-sm);display:grid;place-items:center;
  margin-bottom:20px;background:linear-gradient(160deg,var(--navy-700),var(--navy-500));
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),inset 0 3px 0 rgba(255,255,255,.14);
}
.card__icon svg{width:28px;height:28px;stroke:var(--orange-400);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.card__num{
  position:absolute;right:20px;top:14px;
  font-family:var(--font-head);font-weight:900;font-size:3.4rem;line-height:1;
  color:var(--steel-200);
}
.card--dark{background:var(--navy-700);border-color:rgba(255,255,255,.1);color:#B9CDE0;}
.card--dark h3{color:#fff;}
.card--dark .card__num{color:rgba(255,255,255,.09);}
.card--dark .card__icon{background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05));}

/* ---------- 11. Image + text split ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;}
.split--reverse .split__media{order:2;}
.split__media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);position:relative;}
.split__media img{width:100%;}
.split__media--frame{border:6px solid #fff;}

/* ---------- 12. Process timeline ---------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:flow;}
.flow__step{position:relative;padding:0 22px 0 0;}
.flow__step::after{
  content:"";position:absolute;left:52px;right:-6px;top:25px;height:2px;
  background:repeating-linear-gradient(90deg,var(--steel-300) 0 8px,transparent 8px 16px);
}
.flow__step:last-child::after{display:none;}
.flow__n{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-head);font-weight:900;font-size:1.15rem;color:#fff;
  background:linear-gradient(160deg,var(--orange-400),var(--orange-600));
  box-shadow:0 6px 16px rgba(217,108,12,.35),inset 0 -3px 0 rgba(0,0,0,.2);
  position:relative;z-index:2;margin-bottom:18px;
}
.flow__step h4{font-size:1.05rem;margin-bottom:8px;}
.flow__step p{font-size:.92rem;color:var(--ink-500);margin:0;}
.section--dark .flow__step p,.section--navy-grad .flow__step p{color:#94AEC8;}
.section--dark .flow__n,.section--navy-grad .flow__n{box-shadow:0 6px 16px rgba(0,0,0,.4),inset 0 -3px 0 rgba(0,0,0,.2);}

/* ---------- 13. Tables ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--steel-200);background:#fff;}
table.data{width:100%;border-collapse:collapse;font-size:.9rem;min-width:720px;}
table.data thead th{
  background:var(--navy-700);color:#fff;font-family:var(--font-head);font-weight:800;
  font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  padding:14px 16px;text-align:left;white-space:nowrap;
}
table.data td{padding:13px 16px;border-bottom:1px solid var(--steel-200);color:var(--ink-700);vertical-align:top;}
table.data tbody tr:nth-child(even){background:var(--steel-100);}
table.data tbody tr:hover{background:#FDF3E8;}
table.data td b{color:var(--ink-900);}
table.data td.hl{color:var(--orange-600);font-weight:700;}

/* ---------- 14. Accordion (FAQ) ---------- */
.faq{border-top:1px solid var(--steel-300);}
.faq__item{border-bottom:1px solid var(--steel-300);}
.faq__q{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  padding:24px 52px 24px 0;position:relative;
  font-family:var(--font-head);font-weight:800;font-size:1.1rem;color:var(--ink-900);
  line-height:1.4;transition:color .2s ease;
}
.faq__q:hover{color:var(--orange-600);}
.faq__q::after{
  content:"";position:absolute;right:8px;top:50%;width:14px;height:14px;
  border-right:2.5px solid var(--orange-500);border-bottom:2.5px solid var(--orange-500);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s ease;
}
.faq__item.is-open .faq__q::after{transform:translateY(-25%) rotate(225deg);}
.faq__a{max-height:0;overflow:hidden;transition:max-height .38s ease;}
.faq__a-inner{padding:0 60px 26px 0;color:var(--ink-500);}
.faq__a-inner p:last-child{margin-bottom:0;}
.section--dark .faq,.section--dark .faq__item{border-color:rgba(255,255,255,.14);}
.section--dark .faq__q{color:#fff;}

/* ---------- 15. Forms ---------- */
.form{display:grid;gap:18px;}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field label{font-family:var(--font-head);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-700);}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:1rem;color:var(--ink-900);
  padding:13px 15px;border:1px solid var(--steel-300);border-radius:var(--radius-sm);
  background:#fff;transition:border-color .2s ease,box-shadow .2s ease;width:100%;
}
.field textarea{resize:vertical;min-height:130px;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--orange-500);box-shadow:0 0 0 3px rgba(245,130,32,.16);
}
.form__note{font-size:.84rem;color:var(--steel-500);}

/* ---------- 16. CTA band ---------- */
.cta{
  position:relative;background:var(--navy-800);color:#fff;overflow:hidden;
  border-radius:var(--radius-lg);
}
.cta__inner{padding:64px 56px;position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.cta::before{
  content:"";position:absolute;right:-90px;top:-90px;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,130,32,.34),transparent 68%);
}
.cta::after{
  content:"";position:absolute;left:-60px;bottom:-120px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(27,108,176,.35),transparent 70%);
}
.cta h2{margin-bottom:10px;}
.cta p{color:#A9BED3;margin:0;max-width:560px;}

/* ---------- 17. Footer ---------- */
.footer{background:var(--navy-900);color:#8FA9C2;font-size:.92rem;padding:66px 0 0;}
.footer h4{color:#fff;font-size:1rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:18px;}
.footer a{color:#A9BED3;}
.footer a:hover{color:var(--orange-400);}
.footer ul{list-style:none;padding:0;margin:0;}
.footer li{margin:.5em 0;}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:42px;padding-bottom:48px;}
.footer__brand p{color:#8FA9C2;line-height:1.7;}
.footer__kw{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);}
.footer__kw span{
  display:inline-block;font-size:.72rem;color:#7E9AB5;margin:3px 8px 3px 0;
  padding:3px 9px;border:1px solid rgba(255,255,255,.12);border-radius:4px;
}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.1);padding:22px 0;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.83rem;color:#6C89A4;
}

/* ---------- 18. Animations ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);}
.reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* ---------- 19. Utilities ---------- */
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}
.mt-2{margin-top:1.4rem;}
.mt-3{margin-top:2.2rem;}
.mt-4{margin-top:3rem;}
.mb-3{margin-bottom:2.2rem;}
.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;}
.ratio-4x3{aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow);}
.ratio-4x3 img{width:100%;height:100%;object-fit:cover;}
.ratio-16x9{aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow);}
.ratio-16x9 img{width:100%;height:100%;object-fit:cover;}

/* ---------- 20. Responsive ---------- */
@media (max-width:1320px){
  .logo__sub{display:none;}
  .nav a{font-size:.78rem;letter-spacing:.02em;padding:9px 8px;}
}
@media (max-width:1080px){
  .nav{display:none;position:absolute;top:var(--header-h);left:0;right:0;
    background:#F6F5F0;flex-direction:column;align-items:stretch;
    padding:14px;gap:2px;border-bottom:1px solid #E3E0D8;
    box-shadow:0 18px 40px rgba(6,18,32,.16);}
  .nav.is-open{display:flex;}
  .nav a{padding:14px 16px;font-size:.95rem;}
  .burger{display:block;margin-left:auto;} /* with the nav and CTA out of flow on mobile, this is what keeps the burger right */
  .header__cta{display:none;}
  .statbar__grid{grid-template-columns:repeat(2,1fr);}
  .statbar__item:nth-child(2n){border-right:0;}
  .statbar__item{border-bottom:1px solid rgba(255,255,255,.09);}
  .grid--4{grid-template-columns:repeat(2,1fr);}
  .flow{grid-template-columns:repeat(2,1fr);gap:34px 0;}
  .flow__step::after{display:none;}
  .footer__grid{grid-template-columns:1fr 1fr;gap:34px;}
}
@media (max-width:820px){
  body{font-size:16px;}
  .section{padding:64px 0;}
  .sp{grid-template-columns:1fr;}
  .logo__img{height:44px;}
  .sp--flip .sp__media{order:0;}
  .sp__media{min-height:270px;}
  .sp__body{padding:34px 26px;}
  .split{grid-template-columns:1fr;gap:32px;}
  .split--reverse .split__media{order:0;}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr;}
  .form__row{grid-template-columns:1fr;}
  .cta__inner{padding:44px 26px;}
  .hero__inner{padding:78px 0 68px;}
  .hero__meta{gap:18px;}
  .hero__meta div{min-width:96px;}
  .footer__grid{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .container{padding:0 18px;}
  .statbar__grid{grid-template-columns:1fr;}
  .statbar__item{border-right:0;}
  .flow{grid-template-columns:1fr;}
}


/* ==========================================================================
   HOMEPAGE SCALE PASS
   Measured against the reference site the client supplied (rivonsports.com):
     hero height        1181px  ->  one screen      (reference: exactly 100vh)
     H1                 99.2px  ->  124px           (reference: 128px)
     section breathing  92px    ->  140px           (reference: 140px)
     KPIs above the fold 10     ->  5               (reference: 4)
   Scoped to .home so the inner pages keep the previous spacing until this is
   signed off - the client asked for the homepage first.
   To roll out site-wide later, delete the ".home " prefix on these selectors.
   ========================================================================== */
.home .section{padding:140px 0;}
.home .section--tight{padding:100px 0;}

.home .t-display{font-size:clamp(3.2rem,8.8vw,7.6rem);line-height:.93;letter-spacing:-.038em;}

/* Close the hero inside one screen. 118px is the contact strip (39) plus the header (79). */
.home .hero{display:flex;align-items:center;min-height:calc(100vh - 79px);}
.home .hero>.container{width:100%;}
.home .hero__inner{padding:34px 0 38px;max-width:860px;}
.home .hero h1{margin-bottom:16px;}

/* The orange line was a background-clip gradient and read as white. A flat saturated
   orange reads far stronger - which is exactly what the reference does. */
.home .hero h1 .t-gloss--orange{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:#FF8A33;color:#FF8A33;
  filter:drop-shadow(0 3px 2px rgba(6,18,32,.45)) drop-shadow(0 12px 18px rgba(6,18,32,.4));
}

.home .hero__sub{font-size:1.04rem;line-height:1.6;max-width:820px;}

/* Laptops are commonly 768-820px tall. Without this the hero content would still be cut
   there, so the whole stack steps down a notch on short viewports. */
@media (max-height:820px){
  .home .hero__inner{padding:26px 0 28px;}
  .home .t-display{font-size:clamp(2.5rem,6.2vw,5rem);}
  .home .hero__sub{font-size:.98rem;line-height:1.54;max-width:860px;}
  .home .statbar__item{padding:28px 20px;}
  .home .statbar__item b{font-size:2.3rem;}
}

/* One KPI band rather than two competing ones. */
.home .statbar__item{padding:40px 20px;}
.home .statbar__item b{font-size:2.9rem;line-height:1.02;letter-spacing:-.02em;}
.home .statbar__item span{font-size:.8rem;margin-top:9px;}


/* ---------- Factory card (WHO WE ARE) ----------
   Was a single 1792x2400 graphic whose lower half was a paragraph of baked-in text; the 4:3
   box cropped 78.6% of the height and sliced that paragraph in half. The photo is now its own
   file at its natural ratio and the description is markup, so it can no longer be clipped,
   can be edited as text, and is readable by search engines and AI crawlers. */
.factorycard{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--navy-900);}
.factorycard img{width:100%;height:auto;display:block;}
.factorycard__panel{padding:26px 28px 30px;}
.factorycard__flag{
  font-family:var(--font-head);font-weight:800;font-size:.76rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--orange-400);margin:0 0 10px;
}
.factorycard__panel h3{
  font-family:var(--font-head);font-weight:800;font-size:1.06rem;line-height:1.3;
  color:#FFFFFF;margin:0 0 12px;
}
.factorycard__panel p{font-size:.9rem;line-height:1.68;color:#BFD0E2;margin:0 0 10px;}
.factorycard__panel p:last-child{margin-bottom:0;}


/* ---------- Equipment cards ----------
   Two homepage sections showed a data table as a picture (a square one, so the 4:3 box also
   trimmed 25% of its height). The same figures already live as a real <table> on
   equipment.html, so these render them as markup instead: nothing is lost to cropping and
   crawlers can read every value. A photo sits above the table - the stacked arrangement. */
.equipcard{
  margin:0;border-radius:var(--radius);overflow:hidden;background:#FFFFFF;
  border:1px solid var(--steel-200);box-shadow:var(--shadow);max-width:100%;min-width:0;
}
.equipcard img{width:100%;height:auto;display:block;}
.equipcard__panel{padding:22px 22px 24px;}
.equipcard__title{
  font-family:var(--font-head);font-weight:800;font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--navy-800);margin:0 0 14px;text-align:center;
}
.equipcard__table{width:100%;border-collapse:collapse;font-size:.84rem;}
.equipcard__table th{
  background:var(--navy-800);color:#FFFFFF;font-family:var(--font-head);font-weight:700;
  font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:9px 10px;text-align:left;
}
.equipcard__table td{padding:8px 10px;border-bottom:1px solid var(--steel-200);color:#3A4A5A;}
.equipcard__table tr:last-child td{border-bottom:0;}
.equipcard__table .hl{color:var(--orange-500);font-weight:700;white-space:nowrap;}
.equipcard__facts{
  margin:16px 0 0;font-size:.84rem;line-height:1.6;color:#4A5A6B;text-align:center;
}
.equipcard__facts strong{color:var(--orange-500);}

.equipcard--dark{
  background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.13);box-shadow:none;
}
.equipcard--dark .equipcard__title{color:#FFFFFF;}
.equipcard--dark .equipcard__table th{background:rgba(255,255,255,.11);color:#FFFFFF;}
.equipcard--dark .equipcard__table td{
  color:#C3D6E8;border-bottom-color:rgba(255,255,255,.10);
}
.equipcard--dark .equipcard__facts{color:#A9C0D6;}
.equipcard--dark .equipcard__table .hl{color:var(--orange-400);}

/* `.sp__list li` is dark ink with no dark-section override, so the checklist inside the
   dark PROOF section sat at about 1.8:1. */
.section--dark .sp__list li,.section--navy-grad .sp__list li{color:#C3D6E8;}

/* Narrow screens: the 4-column table's min-content width otherwise exceeds the grid
   track and pushes the page into horizontal scroll. */
@media (max-width:760px){
  .equipcard__table{font-size:.76rem;}
  .equipcard__table th,.equipcard__table td{padding:7px 6px;}
  .equipcard__table .hl{white-space:normal;}
}
.home .grid--2>.reveal{min-width:0;}
.equipcard--dark .equipcard__facts strong{color:var(--orange-400);}