/* ============================================================
   Avimo — design system
   Concept: "precise consultancy for serious institutions"
   Signature: monospace index system + hairline structure
   System fonts only (no external requests).
   ============================================================ */

:root{
  /* palette — derived from the Avimo logo (navy + royal blue) */
  --ink:#182742;          /* primary text on light */
  --navy:#1b2a4a;         /* dark section base (logo navy) */
  --navy-deep:#111d34;    /* dark gradient bottom */
  --paper:#fbfcfd;        /* clean near-white */
  --sand:#eef2f7;         /* cool light neutral, alt sections */
  --accent:#2b62d8;       /* royal blue accent (white text passes AA) */
  --accent-bright:#4a86ee;/* lighter blue for gradients/atmosphere */
  --accent-strong:#2257c8;/* accessible blue for links/text on light */
  --accent-on-dark:#7aa8f5;/* accent text on dark backgrounds */
  --accent-ink:#ffffff;   /* text on accent fills */
  --muted:#586a80;        /* secondary text on light */
  --line:#e4e8ee;         /* hairline on light */
  --line-strong:#d3d9e2;
  --on-dark:#d5deea;      /* body text on dark */
  --on-dark-dim:#8ea3ba;  /* muted text on dark */
  --line-dark:rgba(255,255,255,.14);

  /* type */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  /* geometry */
  --maxw:1200px;
  --gutter:28px;
  --r:12px;
  --r-btn:8px;
  --shadow:0 24px 60px -28px rgba(8,22,37,.35);
  --shadow-sm:0 2px 10px rgba(8,22,37,.06);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.62;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}

/* ---- type ---- */
h1,h2,h3{color:var(--ink);line-height:1.06;margin:0 0 .5em;font-weight:800;letter-spacing:-.03em}
h1{font-size:clamp(2.6rem,6.2vw,5rem)}
h2{font-size:clamp(1.9rem,3.8vw,3rem);letter-spacing:-.025em}
h3{font-size:1.18rem;letter-spacing:-.01em;line-height:1.25}
p{margin:0 0 1.1rem}
a{color:var(--accent-strong);text-decoration:none}
a:hover{text-decoration:underline}
strong{color:var(--ink)}

.lead{font-size:clamp(1.12rem,1.7vw,1.4rem);line-height:1.5;color:var(--muted);max-width:34ch;font-weight:400}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-strong);
  margin:0 0 1.1rem;
  display:flex;align-items:center;gap:.7ch;
}
.eyebrow::before{content:"/\/";letter-spacing:-.1em;opacity:.65}

/* ---- layout ---- */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-ink);
  padding:12px 18px;z-index:200;font-weight:700;border-radius:0 0 var(--r-btn) 0}
.skip-link:focus{left:0;top:0}

.section{padding:clamp(64px,9vw,120px) 0;position:relative}
.section-soft{background:var(--sand)}
/* hairline rule between consecutive light sections */
.section + .section:not(.section-soft),
.section-soft + .section{border-top:1px solid var(--line)}

/* ---- buttons ---- */
.btn{
  --btn-bg:var(--accent);--btn-fg:var(--accent-ink);--btn-bd:var(--accent);
  display:inline-flex;align-items:center;gap:.6ch;
  padding:15px 26px;border-radius:var(--r-btn);
  font-weight:650;font-size:1rem;letter-spacing:-.01em;cursor:pointer;
  background:var(--btn-bg);color:var(--btn-fg);border:1.5px solid var(--btn-bd);
  transition:transform .16s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
}
.btn::after{content:"→";font-family:var(--font-mono);transition:transform .18s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(43,98,216,.55)}
.btn:hover::after{transform:translateX(3px)}
.btn-primary{--btn-bg:var(--accent);--btn-fg:var(--accent-ink);--btn-bd:var(--accent)}
.btn-outline{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line-strong)}
.btn-outline:hover{border-color:var(--accent);box-shadow:none}
.btn-sm{padding:10px 18px;font-size:.94rem}
.btn-sm::after{content:none}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{font-weight:800;font-size:1.42rem;color:var(--ink);letter-spacing:-.04em;display:inline-flex;align-items:center;gap:.6ch}
.logo:hover{text-decoration:none}
.logo-mark{height:32px;width:auto;display:block}
.site-nav{display:flex;align-items:center;gap:34px}
.site-nav a{color:var(--ink);font-weight:600;font-size:.98rem;position:relative}
.site-nav a:not(.btn){padding:6px 0}
.site-nav a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--accent);transition:right .22s ease}
.site-nav a:not(.btn):hover{text-decoration:none}
.site-nav a:not(.btn):hover::after{right:0}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:26px;height:2px;background:var(--ink);display:block;transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- hero ---- */
.hero{
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),transparent 40%),
    radial-gradient(120% 120% at 85% -10%,rgba(74,134,238,.28),transparent 48%),
    linear-gradient(165deg,var(--navy),var(--navy-deep));
  color:#fff;padding:clamp(84px,13vw,168px) 0 clamp(64px,9vw,120px);
  position:relative;overflow:hidden;
}
/* faint measurement grid — the "precision" atmosphere */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(var(--line-dark) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);
  background-size:100% 88px, 120px 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
}
.hero .container{position:relative}
.hero .eyebrow{color:var(--accent-on-dark)}
.hero h1{color:#fff;max-width:16ch}
.hero .lead{color:var(--on-dark);max-width:46ch;margin-top:1.4rem}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:2.4rem}
.hero .btn-outline{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.32)}
.hero .btn-outline:hover{border-color:var(--accent);background:rgba(255,255,255,.04)}

/* ---- clients strip ---- */
.clients{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-top:1.4rem;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.clients span{font-family:var(--font-mono);font-size:.95rem;font-weight:500;letter-spacing:-.01em;
  color:var(--ink);padding:22px 26px;border-left:1px solid var(--line)}
.clients span:first-child{padding-left:0;border-left:0}
/* clients on dark (hero) */
.hero .clients{border-color:var(--line-dark)}
.hero .clients span{color:#fff}
.hero .clients span{border-color:var(--line-dark)}

/* ---- client logo wall ---- */
.logo-wall{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:1.6rem}
.logo-chip{display:flex;align-items:center;justify-content:center;
  padding:20px 28px;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  min-height:78px;flex:1 1 180px;transition:border-color .2s ease,box-shadow .2s ease}
.logo-chip:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.client-logo{height:auto;width:auto;max-height:42px;max-width:78%;transition:transform .2s ease}
.logo-chip:hover .client-logo{transform:scale(1.03)}
/* SKI's source art carries a lot of internal padding — size it up to match */
.client-logo--ski{max-height:64px}
/* Logo + name share a fixed-height head zone so the body text lines up across
   cards (no "jumping"), regardless of logo size or whether a name is shown. */
.case-head{display:flex;flex-direction:column;justify-content:flex-end;
  min-height:104px;margin-bottom:8px}
/* The card is a flex column, so images must opt out of cross-axis stretch or
   they distort — hence align-self + object-fit:contain. */
.card .client-logo{max-height:48px;height:auto;width:auto;max-width:100%;
  align-self:flex-start;object-fit:contain;object-position:left bottom;margin:0 0 12px}
.card .client-logo--skat{max-height:54px}
.case-head h3{margin:0}
/* wordmark logos already carry the client name, so hide the redundant heading */
.card--wordmark h3{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/* ---- framework-agreement credential (SKI 02.14) ---- */
.credential{display:flex;align-items:center;gap:30px;margin-top:44px;padding:28px 32px;
  border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r);
  background:var(--sand)}
.credential-logo{height:52px;width:auto;flex:none;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:14px 18px;box-sizing:content-box}
.credential .eyebrow{margin-bottom:.5rem}
.credential-text{margin:0;color:var(--muted);max-width:66ch}
@media(max-width:620px){.credential{flex-direction:column;align-items:flex-start;gap:18px}}

/* ---- grid + cards (with monospace index) ---- */
.grid{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  margin-top:clamp(36px,5vw,56px);counter-reset:idx;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.card{
  background:var(--paper);position:relative;
  padding:32px 30px 30px;counter-increment:idx;
  display:flex;flex-direction:column;
  transition:background .22s ease,transform .22s ease;
}
.section-soft .grid{background:var(--line-strong);border-color:var(--line-strong)}
.section-soft .card{background:var(--sand)}
.card::before{
  content:counter(idx,decimal-leading-zero);
  font-family:var(--font-mono);font-size:.8rem;color:var(--accent-strong);
  letter-spacing:.05em;margin-bottom:16px;display:block;
}
a.card:hover{text-decoration:none;background:#fff}
.section-soft a.card:hover{background:#fbfaf7}
.card h3{margin:0 0 .5rem}
.card p{color:var(--muted);font-size:1rem;margin-bottom:1.2rem}
.card .arrow{margin-top:auto;font-family:var(--font-mono);font-size:.85rem;font-weight:600;
  color:var(--accent-strong);display:inline-flex;align-items:center;gap:.5ch}
a.card:hover .arrow{gap:1ch}
/* content lists on interior pages */
main ul{padding-left:0;list-style:none;margin:0 0 1.6rem}
main ul li{position:relative;padding:12px 0 12px 30px;border-top:1px solid var(--line)}
main ul li::before{content:"→";position:absolute;left:0;top:12px;font-family:var(--font-mono);
  color:var(--accent-strong)}
main ul li:last-child{border-bottom:1px solid var(--line)}

/* ---- form ---- */
.form-field{margin-bottom:20px}
.form-field label{display:block;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.form-field input,.form-field textarea{
  width:100%;padding:14px 16px;border:1px solid var(--line-strong);border-radius:var(--r-btn);
  font:inherit;background:#fff;color:var(--ink);transition:border-color .18s,box-shadow .18s}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(43,98,216,.18)}
.form-status{margin-top:16px;font-weight:600;min-height:1.4em}
.form-status.error{color:#c0392b}
.form-status.ok{color:var(--accent-strong)}

/* ---- footer ---- */
.site-footer{background:var(--navy-deep);color:var(--on-dark);padding:clamp(56px,8vw,88px) 0 28px}
.footer-inner{display:grid;gap:40px;grid-template-columns:1.6fr 1fr 1fr;align-items:start}
.logo-footer{color:#fff;font-size:1.5rem;font-weight:800;letter-spacing:-.04em}
.footer-tagline{color:var(--on-dark-dim);margin-top:12px;max-width:28ch}
.footer-nav,.footer-contact{display:flex;flex-direction:column;gap:12px}
.footer-nav a,.footer-contact a{color:var(--on-dark);font-size:.98rem}
.footer-nav a:hover,.footer-contact a:hover{color:#fff}
.footer-contact a{font-family:var(--font-mono);font-size:.92rem}
.footer-legal{border-top:1px solid var(--line-dark);margin-top:44px;padding-top:22px;
  font-family:var(--font-mono);font-size:.82rem;color:var(--on-dark-dim);letter-spacing:.04em}

/* ---- scroll reveal ---- */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---- responsive ---- */
@media(max-width:820px){
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  body{font-size:16px}
  .nav-toggle{display:flex}
  .site-nav{position:absolute;top:78px;left:0;right:0;background:var(--paper);flex-direction:column;
    align-items:stretch;gap:0;padding:8px 24px 22px;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);display:none}
  .site-nav.open{display:flex}
  .site-nav a:not(.btn){padding:14px 0;border-bottom:1px solid var(--line)}
  .site-nav .btn{margin-top:14px;justify-content:center}
  .clients{flex-direction:column;align-items:stretch}
  .clients span{border-left:0;border-top:1px solid var(--line);padding:16px 0}
  .clients span:first-child{border-top:0}
  .hero .clients span{border-color:var(--line-dark)}
  .footer-inner{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
}