/* ================================================================
   layout.css — Structural containers, grids, hero, sections
   ================================================================ */

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

/* ── Section containers ──────────────────────────────────────── */
.section        { padding: 96px 0; position: relative; }
.section.tight  { padding: 72px 0; }
.section.alt         { background: var(--white); }
.section.alt-cream   { background: var(--cream); }
.section.alt-navy    { background: var(--navy);  color: #dfe6ee; }

/* Section header / intro block */
.sec-head {
    max-width:    640px;
    margin-bottom:0;
}
.sec-head.center {
    text-align:   center;
    margin-inline: auto;
}
.sec-head .lead { margin-top: 12px; }
.sec-head .ko {  /* italic pull-quote variant */
    font-family: Georgia, serif;
    font-style:  italic;
    color:       var(--gray-mid);
    font-size:   1rem;
    margin-top:  8px;
}

/* ── Grid system ─────────────────────────────────────────────── */
.grid     { display: grid; gap: 22px; }
.g-2      { grid-template-columns: repeat(2, 1fr); }
.g-3      { grid-template-columns: repeat(3, 1fr); }

/* ── CTA row (button cluster) ────────────────────────────────── */
.cta-row {
    display:   flex;
    gap:       14px;
    flex-wrap: wrap;
    margin-top:28px;
}

/* ── Horizon divider line ────────────────────────────────────── */
.horizon {
    height:     2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    position:   relative;
}

/* ── Hero ────────────────────────────────────────────────────── */
.hero {
    background: var(--navy-deep);
    color:      #fff;
    position:   relative;
    overflow:   hidden;
    padding:    118px 0 120px;
}
.hero h1 { color: #fff; }
.hero h1 .g { color: var(--gold); }
.hero .sub  { color: #c0cad8; }

/* Decorative flame watermark SVG in hero */
.hero .flamewm {
    position:   absolute;
    inset-inline-end: -40px;
    top:        50%;
    transform:  translateY(-50%);
    width:      340px;
    height:     auto;
    opacity:    .12;
    pointer-events: none;
}

/* Topic pills below hero headline */
.pillars {
    display:   flex;
    flex-wrap: wrap;
    gap:       10px;
    margin-top:30px;
}
.pillars span {
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    font-size:     .88rem;
    color:         #c7d0db;
    background:    rgba(255, 255, 255, .06);
    border:        1px solid rgba(255, 255, 255, .13);
    border-radius: 30px;
    padding:       7px 16px;
}
.pillars span::before {
    content:       "";
    width:         6px;
    height:        6px;
    background:    var(--gold);
    border-radius: 50%;
    flex-shrink:   0;
}

/* ── CTA band ────────────────────────────────────────────────── */
.cta-band {
    background: var(--navy-deep);
    color:      #fff;
    text-align: center;
    position:   relative;
    overflow:   hidden;
}
.cta-band::before {
    content:  "";
    position: absolute;
    inset:    0;
    background: radial-gradient(600px 300px at 50% 0%, rgba(202,177,144,.14), transparent 60%);
}
.cta-band .wrap  { position: relative; z-index: 2; }
.cta-band h2     { font-size: clamp(1.8rem, 3.4vw, 2.5rem); max-width: 24ch; margin-inline: auto; color: #fff; }
.cta-band p      { color: #c7d0db; margin: 16px auto 30px; max-width: 52ch; }
.cta-band .cta-row { justify-content: center; }

/* ── Layout grids used by specific page sections ─────────────── */

/* Why / Objectives grid (2-col on desktop) */
.why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

/* Values grid (4-col) */
.val-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

/* Vision / Mission (2-col) */
.vm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

/* Method steps (4-col) */
.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

/* Network / Expertise (3-col) */
.net-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* Sectors (5-col auto) */
.sectors {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

/* Featured article (2-col with image) */
.featured {
    display:        grid;
    grid-template-columns: 1.1fr .9fr;
    border-radius:  20px;
    overflow:       hidden;
    border:         1px solid var(--line);
    background:     var(--white);
}

/* Contact layout */
.contact-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap:     40px;
    align-items: start;
}

/* ── Header / Nav layout ─────────────────────────────────────── */
#hdr {
    position:   sticky;
    top:        0;
    z-index:    100;
    background: var(--navy-deep);
    transition: box-shadow .3s, background .3s;
}
#hdr.scrolled {
    box-shadow: 0 4px 30px rgba(6, 22, 45, .50);
}

.nav {
    height:      var(--head-h);
    display:     flex;
    align-items: center;
    gap:         22px;
}

/* Brand logo */
.brand {
    display:     flex;
    align-items: center;
    gap:         12px;
    text-decoration: none;
    flex-shrink: 0;
}
.brand svg  { width: 38px; height: auto; }
.brand .nm  {
    color:       #fff;
    font-weight: 800;
    font-size:   1.1rem;
    line-height: 1.2;
}
.brand .nm small {
    display:        block;
    font-family:    Georgia, serif;
    font-style:     italic;
    font-weight:    400;
    font-size:      .55rem;
    letter-spacing: .22em;
    color:          var(--gold);
    text-transform: uppercase;
    margin-top:     2px;
}

/* Primary nav links */
.menu {
    display:     flex;
    align-items: center;
    gap:         4px;
    margin-inline-start: auto;
}
.menu a {
    position:    relative;
    color:       #c7d0db;
    font-size:   .96rem;
    font-weight: 400;
    padding:     6px 15px;
    border-radius: 6px;
    transition:  color .18s, background .18s;
    white-space: nowrap;
}
.menu a:hover,
.menu a.current-menu-item,
.menu a.current_page_item {
    color: #fff;
}
.menu a.current-menu-item::after,
.menu a.current_page_item::after {
    content:      "";
    position:     absolute;
    inset-inline: 15px;
    bottom:       2px;
    height:       2px;
    background:   var(--gold);
    border-radius:2px;
}
/* Mobile CTA link inside open menu */
.menu .m-cta {
    display: none; /* shown only in mobile menu via nav.js open state */
}

/* Nav actions (lang switcher + CTA button + burger) */
.nav-actions {
    display:     flex;
    align-items: center;
    gap:         14px;
    flex-shrink: 0;
}

/* Language switcher chip */
.lang {
    font-size:   .84rem;
    color:       #9fb0c4;
    cursor:      pointer;
    border:      1px solid transparent;
    padding:     5px 10px;
    border-radius: 20px;
    transition:  .2s;
    white-space: nowrap;
}
.lang:hover        { color: #fff; border-color: var(--gold); }
.lang b            { color: var(--gold); font-style: normal; }
.lang a            { color: var(--gold); }
.lang a:hover      { color: #fff; }

/* Mobile burger button — hidden on desktop */
.burger {
    display:        none;
    flex-direction: column;
    justify-content:center;
    gap:            5px;
    background:     none;
    border:         none;
    cursor:         pointer;
    padding:        6px;
    margin-inline-start: 4px;
}
.burger span {
    display:       block;
    width:         22px;
    height:        2px;
    background:    #fff;
    border-radius: 2px;
    transition:    .25s;
}

/* ── Footer layout ───────────────────────────────────────────── */
footer {
    background: var(--navy-deep);
    color:      #9fb0c4;
    padding:    70px 0 36px;
}

.foot-grid {
    display:        grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap:            34px;
    padding-bottom: 44px;
    border-bottom:  1px solid rgba(255, 255, 255, .10);
}

.foot-brand svg   { width: 42px; height: auto; margin-bottom: 16px; }
.foot-brand .nm   { color: #fff; font-weight: 800; font-size: 1.15rem; line-height: 1.3; }
.foot-brand .nm small {
    display:        block;
    font-family:    Georgia, serif;
    font-style:     italic;
    font-weight:    400;
    font-size:      .62rem;
    letter-spacing: .2em;
    color:          var(--gold);
    text-transform: uppercase;
    margin-top:     3px;
}
.foot-brand p     { font-size: .9rem; margin-top: 16px; max-width: 34ch; line-height: 1.8; }

/* Social icons in footer */
.foot-social {
    display:   flex;
    gap:       12px;
    margin-top:20px;
}
.foot-social a {
    display:       flex;
    align-items:   center;
    justify-content:center;
    width:         36px;
    height:        36px;
    border-radius: 8px;
    background:    rgba(255, 255, 255, .06);
    border:        1px solid rgba(255, 255, 255, .12);
    color:         #9fb0c4;
    transition:    .2s;
}
.foot-social a:hover { background: rgba(202,177,144,.2); color: var(--gold); border-color: rgba(202,177,144,.4); }
.foot-social svg {
    width:        16px;
    height:       16px;
    stroke:       currentColor;
    fill:         none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.foot-col h5   { color: #fff; margin-bottom: 16px; }
.foot-col a    { display: block; color: #9fb0c4; font-size: .92rem; padding: 5px 0; transition: .2s; }
.foot-col a:hover { color: var(--gold); }

/* WordPress nav menu wrappers inside footer columns */
.foot-col ul   { list-style: none; }
.foot-col ul li a { padding: 5px 0; }

.foot-bottom {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding-top:     26px;
    gap:             16px;
    flex-wrap:       wrap;
}
.foot-bottom p    { font-size: .84rem; }
.foot-bottom .lang { cursor: default; }