/* ============================================================
   CYMONZ — UNIVERSAL BASE STYLESHEET
   Loaded by every page. Contains ONLY rules that are identical
   (or trivially compatible) across all 24 pages: reset, CSS
   variables, nav, nav dropdown, and footer.

   Page-specific styles live in external stylesheets under
   styles/pages/. Article pages additionally load article.css.
   ============================================================ */

/* RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* VARIABLES — superset including teal (unused on some pages, harmless) */
:root{
  --navy:#1A2D45;--navy-deep:#1E3148;--navy-mid:#253D5A;
  --navy-light:#DCE4EE;--navy-pale:#F0F4F8;
  --orange:#E8521A;--orange-warm:#E8622A;--orange-pale:#FFF0EB;
  --teal:#0D7A5F;--teal-light:#BBE1E3;--teal-pale:#E8F5F4;
  --slate:#6B849E;--border:#C5D5E8;--border-light:#DCE4EE;
  --white:#FFFFFF;--offwhite:#F7F9FC;
  --font-display:'DM Serif Display',Georgia,serif;
  --font-body:'DM Sans',system-ui,sans-serif;
}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--white);color:var(--navy);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;}

/* NAV */
nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-light);padding:0 5vw;display:flex;align-items:center;justify-content:space-between;height:70px;}
.nav-logo{font-family:var(--font-display);font-size:1.65rem;color:var(--navy);text-decoration:none;letter-spacing:-0.03em;}
.nav-logo span{color:var(--orange);}
.nav-logo img{height:36px;width:auto;display:block;}
.nav-links{display:flex;gap:2.25rem;list-style:none;align-items:center;}
.nav-links a{text-decoration:none;color:var(--navy-mid);font-size:0.875rem;font-weight:500;transition:color 0.15s;white-space:nowrap;}
.nav-links a:hover,.nav-links a.active{color:var(--orange);}
.nav-cta{background:var(--orange);padding:0.5rem 1.3rem;border-radius:6px;}
.nav-links .nav-cta{color:white;}
.nav-cta:hover{background:var(--orange-warm);}
.nav-links .nav-cta:hover{color:white;}

/* NAV BURGER */
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;flex-shrink:0;}
.nav-burger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:transform 0.25s,opacity 0.25s;}
nav.nav-open .nav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg);}
nav.nav-open .nav-burger span:nth-child(2){opacity:0;}
nav.nav-open .nav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* NAV DROPDOWN */
.nav-dropdown{position:relative;}
.nav-dropdown>a{cursor:pointer;display:flex;align-items:center;gap:0.3rem;}
.nav-dropdown>a::after{content:'';width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid var(--navy-mid);transition:transform 0.15s;flex-shrink:0;}
.nav-dropdown:hover>a::after{transform:rotate(180deg);border-top-color:var(--orange);}
.dropdown-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);background:white;border:1px solid var(--border-light);border-radius:10px;padding:0.5rem;min-width:220px;box-shadow:0 8px 24px rgba(0,0,0,0.08);opacity:0;visibility:hidden;transition:opacity 0.15s,visibility 0.15s,transform 0.15s;transform:translateX(-50%) translateY(-4px);}
.nav-dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.dropdown-menu a{display:block;padding:0.6rem 0.9rem;font-size:0.84rem;color:var(--navy-mid);text-decoration:none;border-radius:6px;transition:background 0.1s,color 0.1s;font-weight:500;}
.dropdown-menu a:hover{background:var(--orange-pale);color:var(--orange);}
.dropdown-divider{height:1px;background:var(--border-light);margin:0.4rem 0.5rem;}
.dropdown-label{font-size:0.68rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--slate);padding:0.5rem 0.9rem 0.2rem;}

/* FOOTER */
footer{background:var(--orange);padding:3rem 5vw;}
.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:2.5rem;align-items:start;}
.footer-logo{font-family:var(--font-display);font-size:1.35rem;color:white;letter-spacing:-0.02em;display:block;margin-bottom:0.75rem;text-decoration:none;}
.footer-logo span{color:white;}
.footer-logo img{height:36px;width:auto;display:block;margin-bottom:0.75rem;filter:brightness(0) invert(1);}
.footer-tagline{font-size:0.95rem;color:rgba(255,255,255,0.8);line-height:1.6;}
.footer-col h3{font-size:0.7rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:white;margin-bottom:1rem;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.5rem;}
.footer-col a{color:rgba(255,255,255,0.9);text-decoration:none;font-size:0.85rem;transition:color 0.15s;}
.footer-col a:hover{color:white;}
.footer-bottom{max-width:1200px;margin:2rem auto 0;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,0.2);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.75rem;}
.footer-bottom p{font-size:0.775rem;color:rgba(255,255,255,0.7);}
.footer-bottom a{color:white;text-decoration:none;font-size:0.775rem;transition:opacity 0.15s;}
.footer-bottom a:hover{opacity:0.75;}
.footer-links{display:flex;gap:1.5rem;}

/* PHOSPHOR DUOTONE ICON SIZING & COLOUR */
.feature-icon i,.int-icon i { font-size:20px;color:var(--orange);--ph-duotone-alpha:0.25; }
.sol-feature-icon i,.sol-icon i,.tech-icon i { font-size:20px;color:rgba(255,255,255,0.9);--ph-duotone-alpha:0.25; }
.ic-icon i { font-size:22px;color:var(--orange);--ph-duotone-alpha:0.25; }
.benefit-icon i,.timing-icon i { font-size:24px;color:var(--orange);--ph-duotone-alpha:0.25; }
.lc-icon i { font-size:24px;color:white;--ph-duotone-alpha:0.25; }
.value-icon i { font-size:28px;color:var(--orange);--ph-duotone-alpha:0.25; }
.li-icon i { font-size:18px;color:var(--orange);--ph-duotone-alpha:0.25; }
.alt-icon i { font-size:22px;color:var(--navy);--ph-duotone-alpha:0.25; }

/* INDEX (and reuse): client proof strip — half padding for wide Agility Forex mark */
.client-proof-strip-cell--agility{background:var(--white);padding:0.625rem 0.75rem;display:flex;align-items:center;justify-content:center;min-height:90px;}

/* RESPONSIVE */
@media(max-width:900px){
  .nav-burger{display:flex;}
  nav .nav-links{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:70px;left:0;right:0;
    background:rgba(255,255,255,0.98);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border-light);
    box-shadow:0 6px 20px rgba(0,0,0,0.08);
    padding:0 5vw;
    max-height:0;overflow:hidden;opacity:0;
    transition:max-height 0.22s ease,opacity 0.18s ease;
    z-index:99;
  }
  nav.nav-open .nav-links{max-height:320px;opacity:1;}
  nav.nav-open .nav-links li{border-bottom:1px solid var(--border-light);}
  nav.nav-open .nav-links li:last-child{border-bottom:none;}
  nav.nav-open .nav-links a{display:block;padding:0.85rem 0;font-size:0.95rem;color:var(--navy-mid);}
  nav.nav-open .nav-links .nav-cta{background:none;color:var(--orange);padding:0.85rem 0;border-radius:0;}
  nav.nav-open .nav-links .dropdown-menu{display:none;}
  nav.nav-open .nav-dropdown>a::after{display:none;}
  .footer-inner{grid-template-columns:1fr 1fr;gap:2rem;}
}