/* MonsiTrade styles. Tokens, type and motion follow the MonsiTools design
   language v2 (Monsibd/MonsiTools docs/design-system.md). Edit tokens here,
   not literals in components. House rule: no em dashes anywhere. */

/* Fonts, self-hosted (licences in assets/fonts) */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-display:swap;font-weight:100 700;src:url(assets/fonts/ibm-plex-sans-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-display:swap;font-weight:100 700;src:url(assets/fonts/ibm-plex-sans-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";font-style:normal;font-display:swap;font-weight:200 900;src:url(assets/fonts/source-serif-4-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:normal;font-display:swap;font-weight:200 900;src:url(assets/fonts/source-serif-4-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:500;src:url(assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:600;src:url(assets/fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2")}

:root{
  --font-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --text-2xs:12px;--text-xs:13px;--text-sm:14px;--text-base:16px;--text-md:18px;--text-lg:21px;--text-xl:26px;--text-2xl:36px;
  --text-display:clamp(40px,5.2vw,60px);
  --leading-tight:1.15;--leading-snug:1.3;--leading-normal:1.55;--leading-relaxed:1.7;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
  --radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-full:999px;
  --motion-fast:140ms;--motion-base:220ms;--motion-ease:cubic-bezier(.2,.7,.2,1);
  --measure:70ch;--wrap:1152px;--nav-h:64px;
  --color-focus:#38bdf8;
}
:root,[data-theme="dark"]{
  --bg-page:#1c1b19;--bg-surface:#252320;--bg-surface-2:#2f2c28;
  --border-color:#3b3833;--border-strong:#5c5750;
  --text-primary:#f3f0ea;--text-secondary:#cdc7bc;--text-muted:#a49d91;
  /* RAMP Trade colours: teal #3387a2 fill, navy #1e2330 hover. --accent is a
     lighter teal for text and icons so it stays readable on the dark page. */
  --accent:#5fb1c9;--accent-hover:#7cc2d6;--accent-fill:#3387a2;--accent-fill-text:#0f1a1e;--accent-press:#1e2330;--accent-press-text:#e3e4de;
  --shadow-float:0 10px 30px rgba(0,0,0,.35);
  color-scheme:dark;
}
[data-theme="light"]{
  --bg-page:#faf8f4;--bg-surface:#f2efe8;--bg-surface-2:#e8e4db;
  --border-color:#c9c2b5;--border-strong:#8a8276;
  --text-primary:#1d1b18;--text-secondary:#4a453e;--text-muted:#625c53;
  --accent:#2a7590;--accent-hover:#1e2330;--accent-fill:#3387a2;--accent-fill-text:#0f1a1e;--accent-press:#1e2330;--accent-press-text:#e3e4de;
  --shadow-float:0 10px 30px rgba(60,45,20,.12);
  color-scheme:light;
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + var(--space-4))}
body{margin:0;background:var(--bg-page);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color var(--motion-base) ease,color var(--motion-base) ease}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:var(--radius-sm)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.skip-link{position:absolute;left:var(--space-4);top:-100px;z-index:100;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);background:var(--accent-fill);color:var(--accent-fill-text);font-weight:560;text-decoration:none}
.skip-link:focus{top:var(--space-3)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--space-6)}

/* Type */
h1,h2,h3{font-family:var(--font-serif);font-weight:600;color:var(--text-primary)}
h2{font-size:var(--text-2xl);line-height:var(--leading-tight)}
h3{font-size:var(--text-lg);line-height:var(--leading-snug)}
.kicker{font-size:var(--text-sm);font-weight:560;color:var(--accent)}
.lede{font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-secondary);max-width:60ch}
.sec-lede{color:var(--text-secondary);max-width:var(--measure)}

/* Logo and wordmark (MonsiTools pattern: body in text colour, star in accent) */
.brand{display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:none;font-family:var(--font-sans);font-weight:650;letter-spacing:-.02em;font-size:var(--text-lg);white-space:nowrap}
/* Original RAMP Trade logo. Its navy parts vanish on the dark page, so in
   dark mode it sits on a light tile; in light mode it shows as is. */
.brand-logo{height:34px;width:auto;flex:none;transition:transform var(--motion-fast) ease}
[data-theme="dark"] .brand-logo{height:40px;padding:3px 6px;border-radius:var(--radius-md);background:#f3f0ea}
.brand:hover .brand-logo{transform:translateY(-1px)}
.brand-accent{color:var(--accent)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border-radius:var(--radius-md);font-weight:560;text-decoration:none;white-space:nowrap;border:1px solid transparent;transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease,transform var(--motion-fast) ease}
.btn:active{transform:translateY(1px)}
.btn-md{height:40px;padding:0 var(--space-4);font-size:var(--text-sm)}
.btn-lg{height:48px;padding:0 var(--space-5);font-size:var(--text-base)}
.btn-primary{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-fill-text)}
.btn-primary:hover{background:var(--accent-press);border-color:var(--accent-fill);color:var(--accent-press-text)}
.btn-quiet{background:transparent;border-color:var(--border-strong);color:var(--text-primary)}
.btn-quiet:hover{border-color:var(--accent);color:var(--accent)}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-md);background:var(--bg-surface);border:1px solid var(--border-color);color:var(--text-secondary);transition:border-color var(--motion-fast) ease,color var(--motion-fast) ease,background-color var(--motion-fast) ease}
.icon-btn:hover{border-color:var(--border-strong);color:var(--text-primary)}
.icon-btn:active{transform:translateY(1px)}
.icon-btn .ico{width:20px;height:20px}

/* Nav */
.nav-wrap{position:fixed;inset:0 0 auto;z-index:50;background:var(--bg-page);border-bottom:1px solid var(--border-color);transition:background-color var(--motion-base) ease}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);max-width:1280px;height:var(--nav-h);margin:0 auto;padding:0 var(--space-6)}
.nav-links{display:flex;gap:var(--space-1)}
.nav-links a{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:560;color:var(--text-secondary);text-decoration:none;transition:color var(--motion-fast) ease,background-color var(--motion-fast) ease}
.nav-links a:hover{color:var(--accent);background:var(--bg-surface)}
.nav-actions{display:flex;align-items:center;gap:var(--space-2)}
.theme-toggle .ico-moon,[data-theme="light"] .theme-toggle .ico-sun{display:none}
[data-theme="light"] .theme-toggle .ico-moon{display:block}
.nav-toggle,.nav-toggle .ico-close{display:none}
.mobile-menu{display:none}

/* Hero */
main{padding-top:var(--nav-h)}
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:var(--space-7);align-items:center;padding-top:var(--space-9);padding-bottom:var(--space-8)}
.hero-title{margin-top:var(--space-3);font-size:var(--text-display);line-height:var(--leading-tight);letter-spacing:-.01em}
.hero-title .w{display:inline-block;white-space:nowrap}
.hero-title .w:last-child,.hero-title .w:nth-last-child(2){color:var(--accent)}
.hero-title .ch{display:inline-block;opacity:.001;transform:translateY(10px);filter:blur(4px);animation:charIn .3s cubic-bezier(.3,.8,.6,1) forwards}
@keyframes charIn{to{opacity:1;transform:none;filter:blur(0)}}
.hero .lede{margin-top:var(--space-5)}
.hero .actions{margin-top:var(--space-6)}
.js .hero-fade{opacity:.001;animation:fadeIn .8s cubic-bezier(.12,.23,.5,1) .8s forwards}
@keyframes fadeIn{to{opacity:1}}
.panel{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-5)}
.panel-title{font-size:var(--text-lg);line-height:var(--leading-snug)}
.checks{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-4)}
.checks li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--bg-page);color:var(--text-primary);font-weight:500}
.checks .ico{color:var(--accent);width:20px;height:20px;stroke-width:2.2}

/* Sections */
.section{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.sec-head{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-6);max-width:60rem}
.narrow .sec-head,.narrow .faq-list{max-width:760px}

/* Cards (MonsiTools: surface, quiet outline, lift 2px on hover) */
.card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-5);transition:border-color var(--motion-fast) ease,background-color var(--motion-fast) ease,transform var(--motion-base) var(--motion-ease),box-shadow var(--motion-base) var(--motion-ease)}
.card:hover{border-color:var(--border-strong);background:var(--bg-surface-2);transform:translateY(-2px);box-shadow:var(--shadow-float)}
a.card{display:block;text-decoration:none;color:inherit}
a.card:active{transform:scale(.995)}
.card-ico{width:28px;height:28px;color:var(--accent)}
.card h3{margin-top:var(--space-4)}
.card h3+p{margin-top:var(--space-3);color:var(--text-secondary)}

/* Products */
.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-7);align-items:center}
.product+.product{margin-top:var(--space-7)}
.product-flip .product-media{order:2}
.product-media{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-color);aspect-ratio:4/3}
.product-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--motion-ease)}
.product:hover .product-media img{transform:scale(1.03)}
.product-text h3{font-size:var(--text-xl);line-height:var(--leading-snug)}
.product-text p{margin-top:var(--space-3);color:var(--text-secondary);line-height:var(--leading-relaxed);max-width:var(--measure)}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.stat{display:flex;flex-direction:column}
.stat-ico{width:24px;height:24px;color:var(--text-muted)}
.stat strong{margin-top:var(--space-5);font-family:var(--font-mono);font-weight:600;font-size:40px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat span{margin-top:var(--space-3);color:var(--text-secondary);font-size:var(--text-sm);font-weight:500}

/* Services */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);counter-reset:none}
.step-num{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-full);border:1px solid var(--border-strong);font-family:var(--font-mono);font-weight:600;color:var(--accent)}
.step>p{margin-top:var(--space-3);color:var(--text-secondary)}
.dots{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3)}
.dots li{position:relative;padding-left:var(--space-5);color:var(--text-secondary)}
.dots li::before{content:"";position:absolute;left:4px;top:.6em;width:7px;height:7px;border-radius:50%;border:1.6px solid var(--accent)}

/* Team spotlight */
.lead{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:var(--space-7);align-items:center;padding:var(--space-4)}
.lead:hover{transform:none}
.lead-photo{border-radius:var(--radius-md);overflow:hidden;aspect-ratio:1}
.lead-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--motion-ease)}
.lead:hover .lead-photo img{transform:scale(1.03)}
.lead-body{padding-right:var(--space-6)}
.lead-body h3{margin-top:var(--space-2);font-size:var(--text-2xl);line-height:var(--leading-tight)}
.lead-bio{margin-top:var(--space-3);color:var(--text-secondary);max-width:52ch}
.lead-points{display:flex;flex-direction:column;gap:var(--space-2);margin:var(--space-5) 0 var(--space-6)}
.lead-points li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--bg-page);font-weight:500}
.lead-points .ico{width:20px;height:20px;color:var(--accent)}

/* FAQ: soft rows, chevron turns, height animates */
.faq-list{display:flex;flex-direction:column;gap:var(--space-2)}
.faq-item{border-radius:var(--radius-md);background:var(--bg-surface);transition:background-color var(--motion-fast) ease}
.faq-item:hover{background:var(--bg-surface-2)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);width:100%;padding:var(--space-4) var(--space-5);text-align:left;font-weight:560;user-select:none}
.faq-q .chev{width:20px;height:20px;color:var(--text-muted);transition:transform var(--motion-base) var(--motion-ease)}
.faq-q[aria-expanded="true"] .chev{transform:rotate(180deg);color:var(--accent)}
.faq-a{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 240ms var(--motion-ease),opacity 240ms var(--motion-ease)}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 var(--space-5) var(--space-4);color:var(--text-secondary);line-height:var(--leading-relaxed)}
.faq-item.open .faq-a{grid-template-rows:1fr;opacity:1}

/* Contact */
.contact{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--space-7);align-items:center;padding:var(--space-7)}
.contact h2{margin-top:var(--space-3)}
.contact .sec-lede{margin-top:var(--space-3)}
.contact .actions{margin-top:var(--space-5)}
.contact-list{display:flex;flex-direction:column;gap:var(--space-2)}
.contact-list li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--bg-page);color:var(--text-secondary);overflow-wrap:anywhere}
.contact-list .ico{width:20px;height:20px;color:var(--accent)}
.contact-list a{text-decoration:none;color:var(--text-primary)}
.contact-list a:hover{color:var(--accent)}

/* Footer */
.footer{margin-top:var(--space-8);border-top:1px solid var(--border-color);padding:var(--space-7) 0 var(--space-6)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-6)}
.footer-tagline{margin-top:var(--space-3);color:var(--text-secondary);max-width:38ch}
.footer-col{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--text-sm)}
.footer-heading{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:600;color:var(--text-primary);margin-bottom:var(--space-1)}
.footer-col a,.footer-col span{color:var(--text-secondary);text-decoration:none;overflow-wrap:anywhere}
.footer-col a:hover,.footer-bottom a:hover{color:var(--accent)}
.footer-bottom{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-7);padding-top:var(--space-5);font-size:var(--text-xs);color:var(--text-muted)}
.footer-bottom-links{display:flex;gap:var(--space-5)}
.footer-bottom a{color:var(--text-muted);text-decoration:none}

/* 404 */
.nf{padding-top:var(--space-9);padding-bottom:var(--space-8);max-width:760px}
.nf h1{margin-top:var(--space-3);font-size:var(--text-2xl);line-height:var(--leading-tight)}
.nf .lede{margin-top:var(--space-4)}
.nf .actions{margin-top:var(--space-5)}
.related-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);margin-top:var(--space-7)}
.related-row{display:block;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--bg-surface);text-decoration:none;font-weight:500;transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease}
.related-row:hover{background:var(--bg-surface-2);color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;animation-delay:0s!important}
  .hero-title .ch,.js .hero-fade{opacity:1;transform:none;filter:none}
}

/* Tablet */
@media (max-width:1023px){
  .nav-links{display:none}
  .nav-toggle{display:inline-grid}
  .nav-toggle[aria-expanded="true"] .ico-menu{display:none}
  .nav-toggle[aria-expanded="true"] .ico-close{display:block}
  .mobile-menu{display:flex;flex-direction:column;gap:var(--space-1);max-height:0;overflow:hidden;padding:0 var(--space-6);border-top:1px solid transparent;transition:max-height var(--motion-base) var(--motion-ease),padding var(--motion-base) var(--motion-ease)}
  .mobile-menu.open{max-height:420px;padding:var(--space-3) var(--space-6) var(--space-5);border-top-color:var(--border-color)}
  .mobile-menu a:not(.btn){padding:var(--space-3) var(--space-2);border-radius:var(--radius-md);color:var(--text-secondary);text-decoration:none;font-weight:560}
  .mobile-menu a:not(.btn):hover{color:var(--accent);background:var(--bg-surface)}
  .mobile-menu .btn{margin-top:var(--space-2)}
  .hero{grid-template-columns:1fr;padding-top:var(--space-8)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lead{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:var(--space-6)}
  .lead-body{padding-right:var(--space-2)}
  .contact{grid-template-columns:1fr;padding:var(--space-6)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand-col{grid-column:1/-1}
}

/* Phone */
@media (max-width:640px){
  :root{--text-2xl:30px;--text-xl:23px}
  .wrap,.nav{padding:0 var(--space-4)}
  .nav-cta{display:none}
  .mobile-menu,.mobile-menu.open{padding-left:var(--space-4);padding-right:var(--space-4)}
  .hero{padding-top:var(--space-7);gap:var(--space-6)}
  .hero-title{font-size:40px}
  .actions .btn{flex:1 1 100%}
  .section{padding-top:var(--space-7);padding-bottom:var(--space-7)}
  .product,.lead{grid-template-columns:1fr;gap:var(--space-5)}
  .product-flip .product-media{order:0}
  .stats{grid-template-columns:1fr 1fr;gap:var(--space-3)}
  .stat{padding:var(--space-4)}
  .stat strong{font-size:30px}
  .grid-3,.steps{grid-template-columns:1fr}
  .lead-body{padding:0 var(--space-2) var(--space-3)}
  .contact{padding:var(--space-5)}
  .footer-grid{grid-template-columns:1fr}
  .related-list{grid-template-columns:1fr}
}