/* =========================================================
   The Event Advisory — site styles
   Brand: charcoal #1b2430 · blue #0046b6 · Poppins
   ========================================================= */

/* ---------- Fonts (self-hosted Poppins, brand typeface) ---------- */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-latin-700-normal.woff2') format('woff2')}

/* ---------- Brand tokens ---------- */
:root{
  /* Primary palette (brand guidelines) */
  --charcoal:#1b2430;
  --blue:#0046b6;
  /* Tints derived from the guideline swatches */
  --charcoal-2:#232e3d;
  --charcoal-3:#313c4d;
  --grey-600:#464b55;
  --grey-500:#6b7079;
  --grey-300:#a5a7ab;
  --grey-100:#eceef1;
  --grey-50:#f5f6f8;
  --blue-700:#00378f;
  --blue-300:#a3b3e0;
  --blue-100:#e5ebf7;
  --white:#ffffff;

  --font:'Poppins',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --container:1200px;
  --gutter:24px;
  --radius:2px;
  --shadow:0 10px 30px rgba(27,36,48,.08);
  --header-h:120px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--charcoal);font-family:var(--font);font-size:1rem;font-weight:400;line-height:1.75;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none;transition:color .2s ease,background-color .2s ease,border-color .2s ease,opacity .2s ease}
a:hover{color:var(--blue-700)}
h1,h2,h3,h4{font-family:var(--font);line-height:1.2;margin:0 0 .6em;color:inherit}
h1{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.01em}
h2{font-size:clamp(1.6rem,3vw,2.35rem);font-weight:700;letter-spacing:-.005em}
h3{font-size:1.25rem;font-weight:600}
p{margin:0 0 1.2em}
ul{margin:0;padding:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--blue);color:#fff;padding:12px 20px}
.skip-link:focus{left:16px;top:16px;color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section{padding:96px 0}
.section--grey{background:var(--grey-50)}
.section--dark{background:var(--charcoal);color:var(--white)}
.section--dark h2,.section--dark h3{color:var(--white)}
.section--dark p{color:#d5d9e0}

/* Spaced uppercase label — mirrors the brand guideline sub-headings */
.eyebrow{display:inline-block;font-size:.8rem;font-weight:500;letter-spacing:.25em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.section--dark .eyebrow,.hero .eyebrow,.page-hero .eyebrow{color:var(--blue-300)}
.lead{font-size:1.125rem;color:var(--grey-600)}
.section--dark .lead{color:#d5d9e0}
.rule{width:64px;height:4px;background:var(--blue);border:0;margin:0 0 28px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font);font-size:.85rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1;padding:17px 30px;border:2px solid var(--blue);border-radius:var(--radius);background:var(--blue);color:var(--white);cursor:pointer}
.btn:hover{background:var(--blue-700);border-color:var(--blue-700);color:var(--white)}
.btn--outline{background:transparent;color:var(--blue)}
.btn--outline:hover{background:var(--blue);color:var(--white)}
.btn--light{background:var(--white);border-color:var(--white);color:var(--charcoal)}
.btn--light:hover{background:transparent;color:var(--white);border-color:var(--white)}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.7);color:var(--white)}
.btn--ghost:hover{background:var(--white);border-color:var(--white);color:var(--charcoal)}
.btn-group{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- Header ----------
   Logo sits top-right (brand placement rule), min width 280px,
   with a 20px clear-space safe zone around it.                      */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--white);border-bottom:1px solid var(--grey-100);transition:box-shadow .25s ease}
.site-header.is-scrolled{box-shadow:0 2px 18px rgba(27,36,48,.10)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--header-h)}
.brand{display:block;padding:20px;margin-right:-20px;flex:0 0 auto}
.brand img{width:280px;height:auto}
.main-nav ul{display:flex;list-style:none;gap:6px}
.main-nav a{display:block;padding:12px 16px;font-size:.82rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal);position:relative}
.main-nav a::after{content:'';position:absolute;left:16px;right:16px;bottom:6px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.main-nav a:hover{color:var(--blue)}
.main-nav a:hover::after,.main-nav a[aria-current="page"]::after{transform:scaleX(1)}
.main-nav a[aria-current="page"]{color:var(--blue)}
.nav-toggle{display:none;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;color:var(--charcoal);flex:0 0 auto}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:24px;height:2px;background:currentColor;position:relative;margin:0 auto;transition:transform .2s ease,background-color .2s ease}
.nav-toggle span::before,.nav-toggle span::after{content:'';position:absolute;left:0}
.nav-toggle span::before{top:-8px}
.nav-toggle span::after{top:8px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-8px) rotate(-45deg)}

/* ---------- Heroes ---------- */
.hero,.page-hero{position:relative;overflow:hidden;background:var(--charcoal);color:var(--white);isolation:isolate}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after,.page-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(27,36,48,.96) 0%,rgba(27,36,48,.86) 45%,rgba(27,36,48,.55) 100%)}
.hero{padding:140px 0 150px}
.hero h1{max-width:760px;color:var(--white)}
.hero .lead{max-width:640px;color:#d5d9e0;margin-bottom:36px}
.hero-stats{display:flex;flex-wrap:wrap;gap:40px;margin-top:64px;padding-top:32px;border-top:1px solid rgba(255,255,255,.14);max-width:760px}
.hero-stats strong{display:block;font-size:2rem;font-weight:700;line-height:1.1;color:var(--white)}
.hero-stats span{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-300)}
.page-hero{padding:110px 0 100px}
.page-hero h1{color:var(--white);margin-bottom:.4em}
.page-hero .lead{max-width:680px;color:#d5d9e0;margin:0}

/* ---------- Split (image + text) ---------- */
.split{display:grid;grid-template-columns:1fr 1.15fr;gap:72px;align-items:center}
.split--reverse{grid-template-columns:1.15fr 1fr}
.split--reverse .split-media{order:2}
.split-media img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}
.split-media{position:relative}
.split-media::before{content:'';position:absolute;width:42%;aspect-ratio:1;background:var(--blue);z-index:-1;left:-18px;bottom:-18px}
.split--reverse .split-media::before{left:auto;right:-18px}
.section--dark .split-media::before{background:var(--blue)}
.split-media{isolation:isolate}

/* ---------- Cards ---------- */
.grid{display:grid;gap:28px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--white);border:1px solid var(--grey-100);border-top:4px solid var(--blue);border-radius:var(--radius);padding:40px 36px;box-shadow:var(--shadow);height:100%}
.card h3{font-size:1.35rem;margin-bottom:18px}
.card-icon{width:64px;height:64px;margin-bottom:22px}
.section--dark .card,.card--dark{background:var(--charcoal-2);border-color:var(--charcoal-3);border-top-color:var(--blue);box-shadow:none;color:var(--white)}
.section--dark .card h3{color:var(--white)}

/* Triangle bullets — echo the "A" peak in the EA mark */
.tick-list{list-style:none}
.tick-list li{position:relative;padding-left:28px;margin-bottom:12px;line-height:1.6}
.tick-list li::before{content:'';position:absolute;left:0;top:.45em;width:11px;height:10px;background:var(--blue);clip-path:polygon(50% 0,100% 100%,0 100%)}
.section--dark .tick-list li::before,.card--dark .tick-list li::before{background:var(--blue-300)}
.section--dark .tick-list li{color:#d5d9e0}

/* Client chips */
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.chip{display:flex;align-items:center;gap:16px;padding:18px 20px;background:var(--charcoal-2);border:1px solid var(--charcoal-3);border-left:3px solid var(--blue);border-radius:var(--radius);font-weight:500;color:var(--white)}
.chip img{width:40px;height:40px;flex:0 0 auto}

/* ---------- Section headings ---------- */
.section-head{max-width:760px;margin-bottom:56px}
.section-head--center{text-align:center;margin-left:auto;margin-right:auto}
.section-head--center .rule{margin-left:auto;margin-right:auto}

/* ---------- Parallax band (services "on the ground") ---------- */
.band{position:relative;isolation:isolate;overflow:hidden}
.band .hero-bg{z-index:-2}
.band::after{content:'';position:absolute;inset:0;z-index:-1;background:rgba(27,36,48,.9)}

/* ---------- CTA strip ---------- */
.cta{background:var(--blue);color:var(--white);padding:72px 0}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta h2{color:var(--white);margin:0 0 6px;font-size:clamp(1.4rem,2.6vw,2rem)}
.cta p{margin:0;color:var(--blue-100)}

/* ---------- Jobs ---------- */
.role{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.role h3{margin:0}
.role p{margin:0;color:var(--grey-500);font-size:.95rem}
.role .btn{margin-top:auto}
.note{margin-top:56px;background:var(--white);border-left:4px solid var(--blue);padding:28px 32px;color:var(--grey-600);box-shadow:var(--shadow)}
.note p{margin:0}

/* ---------- About ---------- */
.values .card{padding:0;overflow:hidden;border-top:0}
.values .card img{width:100%;aspect-ratio:1/1;object-fit:cover}
.values .card-body{padding:30px 32px 34px;border-top:4px solid var(--blue)}
.values .card-body p{margin:0;color:var(--grey-600)}
.leader{display:grid;grid-template-columns:300px 1fr;gap:64px;align-items:center}
.leader-photo{width:280px;height:280px;border-radius:50%;object-fit:cover;border:6px solid var(--charcoal-3);box-shadow:0 0 0 4px var(--blue)}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;list-style:none}
.tags li{font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--charcoal-3);background:var(--charcoal-2);color:var(--blue-300)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:48px;align-items:stretch}
.contact-grid>*{min-width:0}
.contact-list{display:grid;gap:18px;list-style:none}
.contact-item{display:flex;gap:20px;align-items:flex-start;padding:26px 28px;background:var(--white);border:1px solid var(--grey-100);border-left:4px solid var(--blue);box-shadow:var(--shadow)}
.contact-item img{width:44px;height:44px;flex:0 0 auto;margin-top:2px}
.contact-item h3{font-size:.8rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-500);margin:0 0 6px}
.contact-item>div{min-width:0}
.contact-item p{margin:0;font-weight:500;overflow-wrap:break-word}
.contact-item .links{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:6px}
.contact-item a{font-weight:600}
.map-wrap{position:relative;min-height:420px;border:1px solid var(--grey-100);box-shadow:var(--shadow);background:var(--grey-100)}
.map-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Footer ----------
   White logo placed bottom-right (brand placement rule).           */
.site-footer{background:var(--charcoal);color:#c9ced6;padding:80px 0 0;font-size:.95rem}
.footer-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr auto;gap:48px;align-items:start}
.site-footer h2{font-size:.8rem;font-weight:500;letter-spacing:.25em;text-transform:uppercase;color:var(--blue-300);margin:0 0 20px}
.site-footer a{color:#e6e9ee}
.site-footer a:hover{color:var(--white)}
.footer-nav{list-style:none}
.footer-nav li{margin-bottom:8px}
.footer-contact{list-style:none}
.footer-contact li{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;line-height:1.55}
.footer-contact img{width:20px;height:20px;margin-top:3px;flex:0 0 auto;opacity:.9}
.footer-logo{padding:20px;margin:-20px -20px 0 0}
.footer-logo img{width:280px}
.footer-bottom{margin-top:64px;padding:26px 0 30px;border-top:1px solid var(--charcoal-3);font-size:.8rem;line-height:1.7;color:var(--grey-300)}
.footer-bottom p{margin:0 0 6px}

/* ---------- 404 ---------- */
.error-page{min-height:60vh;display:flex;align-items:center}

/* ---------- Responsive ---------- */
@media (hover:hover) and (min-width:1024px){
  .parallax{background-attachment:fixed}
}
@media (max-width:1080px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-logo{grid-column:1/-1;justify-self:end}
}
@media (max-width:960px){
  :root{--header-h:96px}
  .nav-toggle{display:block}
  .header-inner{gap:8px}
  .brand{padding:8px 0;margin-right:0}
  .main-nav{position:absolute;top:100%;left:0;right:0;background:var(--charcoal);max-height:0;overflow:hidden;transition:max-height .3s ease}
  .main-nav.is-open{max-height:420px;box-shadow:0 14px 30px rgba(27,36,48,.25)}
  .main-nav ul{flex-direction:column;gap:0;padding:10px var(--gutter) 22px}
  .main-nav a{color:var(--white);padding:16px 4px;border-bottom:1px solid var(--charcoal-3)}
  .main-nav a::after{display:none}
  .main-nav a[aria-current="page"],.main-nav a:hover{color:var(--blue-300)}
  .split,.split--reverse{grid-template-columns:1fr;gap:48px}
  .split--reverse .split-media{order:0}
  .split-media{max-width:520px}
  .grid--3,.chips{grid-template-columns:repeat(2,1fr)}
  .leader{grid-template-columns:1fr;gap:40px;justify-items:start}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  :root{--gutter:18px}
  .section{padding:68px 0}
  .hero{padding:88px 0 96px}
  .page-hero{padding:76px 0 70px}
  .hero-stats{gap:28px;margin-top:44px}
  .grid--2,.grid--3,.grid--4,.chips{grid-template-columns:1fr}
  .card{padding:32px 26px}
  .split-media::before{left:-10px;bottom:-10px}
  .split--reverse .split-media::before{right:-10px}
  .footer-grid{grid-template-columns:1fr}
  .footer-logo{margin:0;padding:8px 0 0}
  .footer-contact a{overflow-wrap:anywhere}
  .leader-photo{width:220px;height:220px}
  .contact-item{padding:22px 18px;gap:14px}
  .contact-item img{width:34px;height:34px}
  .contact-item p{font-size:.95rem}
  .cta{padding:56px 0}
  .btn{padding:16px 24px}
}
@media (max-width:359px){
  .brand img,.footer-logo img{width:calc(100vw - 96px)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}

/* ---------- Small buttons (contact) ---------- */
.btn--sm{padding:12px 20px;font-size:.78rem}
.contact-item .links{gap:10px}
.contact-item .links .btn{color:var(--white)}
.contact-item .links .btn--outline{color:var(--blue)}
.contact-item .links .btn--outline:hover{color:var(--white)}
.contact-item p{font-weight:400;color:var(--grey-600)}

/* ---------- CV form (Jobs) ---------- */
.apply-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start}
.apply-grid>*{min-width:0}
.note--inline{margin-top:28px}
.cv-form{background:var(--white);border:1px solid var(--grey-100);border-top:4px solid var(--blue);box-shadow:var(--shadow);padding:36px;display:grid;gap:20px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:grid;gap:8px;min-width:0}
.field label{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--charcoal)}
.field label span{color:var(--blue)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1rem;color:var(--charcoal);background:var(--grey-50);border:1px solid #d5d9e0;border-radius:var(--radius);padding:12px 14px;min-height:48px}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-100);background:var(--white)}
.field input[type=file]{padding:10px;background:var(--white)}
.field small{font-size:.82rem;color:var(--grey-500)}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#b42318}
.field .error{font-size:.82rem;color:#b42318}
.cv-form .btn{justify-self:start}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{padding:16px 18px;border-left:4px solid var(--blue);background:var(--blue-100);color:var(--charcoal);font-weight:500}
.form-status.is-error{border-left-color:#b42318;background:#fdecea}
@media (max-width:960px){.apply-grid{grid-template-columns:1fr;gap:40px}}
@media (max-width:680px){.field-row{grid-template-columns:1fr}.cv-form{padding:26px 20px}}

/* ---------- Brand accent typeface ----------
   Jost (free, OFL) stands in for "Now", the logo typeface in the brand
   guidelines. Used for spaced uppercase labels, menu and buttons, echoing
   the "EVENT ADVISORY" line of the logo. Headings and body stay in Poppins. */
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jost-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/jost-latin-600-normal.woff2') format('woff2')}
:root{--font-accent:'Jost','Poppins',system-ui,sans-serif}
.eyebrow,.main-nav a,.btn,.hero-stats span,.tags li,.site-footer h2,
.contact-item h3,.field label,.values .card-body .eyebrow{font-family:var(--font-accent);font-weight:500}
.eyebrow{font-size:.85rem;letter-spacing:.3em}
.main-nav a{font-size:.9rem;letter-spacing:.18em}
.btn{font-size:.9rem;font-weight:600;letter-spacing:.16em}
.btn--sm{font-size:.82rem}
.hero-stats span{font-size:.85rem;letter-spacing:.18em}
.tags li{font-size:.85rem;letter-spacing:.14em}
.site-footer h2{font-size:.85rem;letter-spacing:.3em}
.contact-item h3{font-size:.85rem;letter-spacing:.24em}
.field label{font-size:.85rem;letter-spacing:.12em}

/* Four headline numbers on one row (2 x 2 on phones) */
.hero-stats{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:28px 56px;max-width:none}
@media (max-width:680px){.hero-stats{grid-template-columns:repeat(2,auto);gap:24px 40px}}