/*
   Website implementation code © 2026 SYMT Limited. All rights reserved.
   Client content, Optimi Global branding and supplied design assets remain
   the property of OptimiGlobal Limited and/or their respective owners.
   Website version: v2.12 — 21.09.2026
*/

/* ===================================================================
   OPTIMI GLOBAL — THEME
   Design tokens: color, type, spacing, radius, shadow, motion.
   Palette sampled directly from approved design screenshots.
   =================================================================== */


:root{
  /* ---- Brand palette (sampled from approved screenshots) ---- */
  --c-white:       #ffffff;

  --c-dark:        #173431;   /* near-black teal-green — cards, pills, footer */
  --c-dark-2:      #0f2622;   /* deeper shade for hover states */

  --c-teal:        #5fab9d;   /* headline accent, ribbon, focus ring */
  --c-teal-mid:    #74bdb0;   /* sampled ribbon/headline teal */
  --c-teal-deep:   #3f8578;   /* decorative/large-text teal */
  --c-teal-text:   #367267;   /* WCAG-AA text teal on white */
  --c-focus:       #2f6b61;   /* high-contrast keyboard focus */

  --c-mint-tint:   #e4f2f0;   /* section band background */
  --c-mint-tint-2: #dcece9;

  --c-red:         #b5362e;   /* logo accent, small indicator dots */
  --c-red-dark:    #8f2a23;

  --c-grey-25:     #fafbfb;
  --c-grey-50:     #f4f7f7;
  --c-grey-100:    #e8edec;
  --c-grey-200:    #d7dedd;
  --c-grey-400:    #9aa6a5;
  --c-grey-600:    #5c6a69;
  --c-grey-800:    #2a3433;

  --c-black:       #111716;

  /* ---- Semantic ---- */
  --bg-page:         var(--c-white);
  --bg-section-tint: var(--c-mint-tint);
  --bg-panel-dark:   var(--c-dark);
  --text-body:       var(--c-black);
  --text-muted:      var(--c-grey-600);
  --text-on-dark:    var(--c-white);
  --text-on-dark-muted: #c9d8d5;
  --border-hairline: var(--c-grey-200);
  --accent:          var(--c-teal-mid);
  --accent-red:      var(--c-red);

  /* ---- Type ---- */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  --fs-h1: clamp(2.1rem, 1.6rem + 2vw, 3.15rem);
  --fs-h2: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.15;
  --lh-heading: 1.28;
  --lh-body: 1.6;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.75rem;
  --sp-8: 3.5rem;
  --sp-9: 5rem;
  --sp-10: 7rem;

  /* ---- Shape / elevation ---- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 22px;      /* squircle radius used on cards, pills, form panel */
  --radius-xl: 30px;      /* footer floating-card top corners */
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(15,38,34,0.06), 0 8px 24px rgba(15,38,34,0.06);
  --shadow-raised: 0 14px 34px rgba(15,38,34,0.16);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur-med: 320ms;
  --dur-slow: 560ms;
}

/* ---------------------------------------------------------------
   Resets
   --------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body{
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width: 100%; display: block; }
svg{ display: block; }

a{ color: inherit; text-decoration: none; }

button{
  font-family: inherit;
  cursor: pointer;
}

ul, ol{ margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-heading);
  margin: 0;
  color: var(--c-black);
  letter-spacing: -0.01em;
}

h1{ font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.02em; }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); }

p{ margin: 0; }

.lead{
  font-size: var(--fs-lead);
  color: var(--text-muted);
}

input, textarea, select{
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--text-body);
}

/* Visible keyboard focus, everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection{
  background: var(--c-mint-tint-2);
  color: var(--c-black);
}