/* ============================================================
   TRADCO GLOBAL GROUP — Design System
   Palette: deep navy + brass gold, on a cool paper white.
   Display: Cormorant Garamond (the brand's own logotype face)
   Body:    Inter
   ============================================================ */

:root{
  /* --- Color tokens --- */
  --navy-950:#081428;
  --navy-900:#0B1E3D;
  --navy-800:#122a4d;
  --navy-700:#1c3a63;
  --ink:#182135;
  --slate:#4b5568;
  --paper:#F7F8F6;
  --paper-dim:#EEF0EC;
  --line:#E1E3DC;
  --line-dark:rgba(255,255,255,.14);
  --gold-300:#E4C888;
  --gold-500:#B8923F;
  --gold-600:#9c7a34;
  --white:#ffffff;

  /* --- Type --- */
  --font-display:'Cormorant Garamond', 'Georgia', serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Rhythm --- */
  --container: 1240px;
  --radius: 2px;
  --shadow-soft: 0 20px 60px -25px rgba(8,20,40,.35);
  --shadow-card: 0 10px 30px -15px rgba(8,20,40,.25);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08;
  margin:0 0 .5em;
  color:var(--navy-900);
  letter-spacing:.005em;
}
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

::selection{ background:var(--gold-300); color:var(--navy-950); }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* --- Layout helpers --- */
.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:28px;
}
.eyebrow{
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-600);
}
.eyebrow.on-dark{ color:var(--gold-300); }

.section{ padding:96px 0; }
.section--tight{ padding:64px 0; }
.section--dark{ background:var(--navy-900); color:rgba(255,255,255,.86); }
.section--dark h2, .section--dark h3{ color:#fff; }
.section--paper-dim{ background:var(--paper-dim); }

.rule{
  width:64px; height:2px; background:var(--gold-500);
  margin:18px 0 26px; border:0;
}
.rule.center{ margin-inline:auto; }
.rule.on-dark{ background:var(--gold-300); }

/* signature wave divider — echoes the brand mark's concentric ripples */
.wave-rule{
  width:100%; max-width:220px; height:22px; margin:22px 0 30px;
  color:var(--gold-500);
}
.wave-rule.center{ margin-inline:auto; }
.wave-rule svg{ display:block; width:100%; height:100%; overflow:visible; }
.wave-rule path{
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:340; stroke-dashoffset:340;
  transition:stroke-dashoffset 1.1s var(--ease);
}
.wave-rule.in-view path{ stroke-dashoffset:0; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px;
  font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid transparent;
  border-radius:var(--radius);
  transition:all .25s var(--ease);
  cursor:pointer;
  white-space:nowrap;
}
.btn--gold{ background:var(--gold-500); color:var(--navy-950); }
.btn--gold:hover{ background:var(--gold-300); }
.btn--outline{ border-color:rgba(255,255,255,.5); color:#fff; }
.btn--outline:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn--outline-dark{ border-color:var(--navy-900); color:var(--navy-900); }
.btn--outline-dark:hover{ background:var(--navy-900); color:#fff; }
.btn--text{ padding:0; letter-spacing:.06em; color:var(--gold-600); }
.btn--text::after{ content:'→'; margin-left:8px; transition:transform .25s var(--ease); display:inline-block; }
.btn--text:hover::after{ transform:translateX(4px); }

/* Reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view{ opacity:1; transform:none; }
.reveal-stagger > *{ transition-delay:calc(var(--i,0) * 90ms); }