/* ============================================================
   STOLT GROUP — SHARED BRAND STYLESHEET  (stolt-brand.css)
   Drop this file into the Astra child theme folder. Every page
   template links it, so the whole site stays visually uniform —
   change a value here and it updates everywhere.

   Built on the Stolt Group Design System:
   navy #0A1B30 · signal red #D81F2D · Montserrat + Source Sans 3
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800;900&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root{
  /* Navy — brand dark canvas / ink */
  --navy-950:#060F1C; --navy-900:#0A1B30; --navy-800:#0F2440;
  --navy-700:#14304F; --navy-600:#1B3B5C;
  /* Slate — cool neutral (the mark colour) */
  --slate-50:#F2F5F9; --slate-100:#E4E9F0; --slate-200:#CBD4DF;
  --slate-300:#AAB7C6; --slate-400:#8593A4; --slate-500:#66788A;
  --slate-600:#4F6072; --slate-700:#3B4957;
  /* Red — signal accent */
  --red-500:#E0202F; --red-600:#D81F2D; --red-700:#B5121F; --red-800:#8E0C16;

  /* Semantic aliases (legacy names kept so existing markup maps cleanly) */
  --navy:var(--navy-900); --navy2:var(--navy-700);
  --red:var(--red-600); --red-dark:var(--red-700);
  --ink:var(--navy-900); --grey:var(--slate-600);
  --line:var(--slate-100); --bg:#ffffff; --soft:var(--slate-50);

  --font-display:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;

  --maxw:1180px;
  --radius:4px;
  --shadow-card:0 10px 30px rgba(10,27,48,.08);
  --shadow-card-hover:0 16px 44px rgba(10,27,48,.12);
}

/* ── RESET ── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);color:var(--ink);background:var(--bg);
  line-height:1.65;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{
  font-family:var(--font-display);line-height:1.1;color:var(--navy);
  font-weight:800;letter-spacing:-0.02em;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
::selection{background:#F7CDD1;color:var(--navy-900)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}

/* ── EYEBROW (tracked red overline) ── */
.eyebrow{
  font-family:var(--font-body);font-size:.75rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--red);
}

/* ============================================================
   NAV  +  LOGO LOCKUP
   Replaces the oversized 150px PNG with a crisp SVG mark +
   wordmark that always sits cleanly in the bar.
   ============================================================ */
header.nav{
  position:sticky;top:0;z-index:50;
  background:var(--navy-900);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}

.brand{display:flex;align-items:center;gap:13px;color:#fff;height:100%}
.brand .mark{height:38px;width:auto;flex:0 0 auto;display:block}
.brand .wordmark{display:flex;flex-direction:column;line-height:1}
.brand .wordmark .name{
  font-family:var(--font-display);font-weight:900;font-size:1.18rem;
  letter-spacing:.02em;color:#fff;
}
.brand .wordmark .name i{color:var(--red);font-style:normal}
.brand .wordmark .sub{
  font-family:var(--font-body);font-weight:600;font-size:.6rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--slate-300);
  margin-top:3px;
}

nav.links{display:flex;gap:34px;align-items:center}
nav.links a{
  color:var(--slate-200);font-size:.875rem;font-weight:600;
  letter-spacing:.01em;transition:color .15s;
}
nav.links a:hover,nav.links a.active{color:#fff}
nav.links a.cta{
  background:var(--red);color:#fff;padding:10px 18px;border-radius:var(--radius);
  letter-spacing:.02em;transition:background .15s,transform .15s;white-space:nowrap;
}
nav.links a.cta:hover{background:var(--red-700);transform:translateY(-1px)}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer;line-height:1}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 26px;border-radius:var(--radius);
  font-family:var(--font-body);font-weight:700;font-size:.94rem;
  letter-spacing:.01em;cursor:pointer;border:none;transition:.15s;white-space:nowrap;
}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-700);transform:translateY(-1px)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.42);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.btn-outline{
  display:inline-flex;align-items:center;gap:8px;
  border:2px solid var(--navy);color:var(--navy);
  padding:12px 28px;border-radius:var(--radius);font-weight:700;font-size:.94rem;transition:.15s;
}
.btn-outline:hover{background:var(--navy);color:#fff}

/* ============================================================
   SECTIONS
   ============================================================ */
section{padding:86px 0}
section.alt{
  background:var(--soft);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.sec-head{max-width:64ch;margin-bottom:46px}
.sec-head .eyebrow{display:block;margin-bottom:14px}
.sec-head h2{font-size:clamp(1.7rem,3.6vw,2.5rem);margin-bottom:14px;letter-spacing:-0.025em}
.sec-head p{color:var(--grey);font-size:1.1rem;line-height:1.6}

/* The red left-mark motif (use on a heading or block) */
.red-mark{
  border-left:4px solid var(--red);padding-left:20px;
}

/* ============================================================
   CARDS
   ============================================================ */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;transition:.18s;
}
section.alt .card{background:#fff}
.card:hover{border-color:var(--slate-200);box-shadow:var(--shadow-card);transform:translateY(-2px)}
.card h3{font-size:1.15rem;margin-bottom:9px}
.card p{color:var(--grey);font-size:.97rem;line-height:1.6}

/* ============================================================
   FOOTER
   ============================================================ */
footer.site{background:var(--navy-950);color:var(--slate-400);padding:34px 0;font-size:.86rem}
footer.site .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;align-items:center}
footer.site a{color:var(--slate-300);transition:color .15s}
footer.site a:hover{color:#fff}
footer.site .footer-links{display:flex;gap:24px}

/* ============================================================
   RESPONSIVE — shared nav collapse
   ============================================================ */
@media(max-width:880px){
  .g2,.g3{grid-template-columns:1fr}
  nav.links{display:none}
  .menu-btn{display:block}
  nav.links.open{
    display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;
    background:var(--navy-900);padding:20px 32px;gap:18px;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
}