/* Industrial DevOps Now — shared styles
   Brand: teal #256e8e (dark #174c63, light #3288ad), ink #1b1b1b, font Work Sans */
:root{
  --teal:#256e8e; --teal-dark:#174c63; --teal-light:#3288ad;
  --ink:#1b1b1b; --ink-soft:#595959; --line:#e2e2e2; --panel:#f7f7f7;
  --bg:#ffffff; --gold:#f0a500; --maxw:1100px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Work Sans',Helvetica,Arial,sans-serif;color:var(--ink);
  line-height:1.65;background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{line-height:1.2;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:700;color:var(--teal)}

/* ---------- Header / nav (full-width teal band, centered white links) ---------- */
header.nav{position:sticky;top:0;background:var(--teal);z-index:20}
.nav .wrap{display:flex;align-items:center;justify-content:center;height:64px;position:relative;max-width:1300px}
.brand{display:none}              /* original has no wordmark — centered links only */
.nav nav{display:flex;flex-wrap:nowrap;justify-content:center;gap:0}
.nav nav a{padding:0 11px;color:#fff;font-size:.8rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.02em;white-space:nowrap}
.nav nav a:hover{color:#fff;text-decoration:none;opacity:.85}
.nav nav a.active{font-weight:800;text-decoration:none}
.nav .menu-btn{display:none;background:none;border:0;font-size:1.6rem;color:#fff;cursor:pointer;
  position:absolute;right:24px}
@media(max-width:1080px){
  .nav .wrap{justify-content:flex-start}
  .nav nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--teal);
    flex-direction:column;align-items:center;padding:12px 24px;z-index:30}
  .nav nav.open{display:flex}
  .nav nav a{margin:9px 0;padding:0}
  .nav .menu-btn{display:block}
}

/* ---------- Hero (centered banner, GoDaddy-style) ---------- */
.hero{background:linear-gradient(150deg,var(--teal-dark) 0%,var(--teal) 70%,var(--teal-light) 130%);
  color:#fff;padding:104px 0 96px;text-align:center}
.hero .eyebrow{color:#cfe9f4;letter-spacing:.22em;font-size:.85rem}
.hero h1{font-size:clamp(2.2rem,5.6vw,3.8rem);margin:16px auto 18px;max-width:18ch}
.hero p.lead{font-size:1.28rem;color:#eaf4fa;max-width:60ch;margin-left:auto;margin-right:auto}
/* Inner-page header: light, no big colored block */
.hero.small{background:#fff;color:var(--ink);padding:52px 0 38px;border-bottom:1px solid var(--line)}
.hero.small .eyebrow{color:var(--teal)}
.hero.small h1{color:var(--ink);margin-bottom:10px}
.hero.small p.lead{color:var(--ink-soft)}
.hero.small .chip{background:var(--panel);border:1px solid var(--line);color:var(--ink-soft)}
.meta-row{display:flex;flex-wrap:wrap;gap:12px;margin:30px auto 32px;justify-content:center}
.chip{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.25);
  padding:8px 16px;border-radius:999px;font-size:.9rem;font-weight:600}

/* ---------- Split hero (book cover + tagline, like the original) ---------- */
.split{background:var(--panel);border-bottom:1px solid var(--line);padding:64px 0}
.split .wrap{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:54px;align-items:center}
.split .cover img{border-radius:8px;box-shadow:0 12px 36px rgba(0,0,0,.22);width:100%}
.split .copy .eyebrow{font-size:.95rem;letter-spacing:.18em}
.split .copy h1{font-size:clamp(2.1rem,5vw,3.3rem);margin:8px 0 14px}
.split .copy .tagsub{text-transform:uppercase;letter-spacing:.14em;font-weight:700;
  color:var(--teal);font-size:1rem;margin-bottom:18px}
.split .copy p{font-size:1.2rem;color:var(--ink-soft);max-width:46ch;margin-bottom:26px}
@media(max-width:820px){
  .split .wrap{grid-template-columns:1fr;gap:30px;text-align:center;justify-items:center}
  .split .cover{max-width:280px}
  .split .copy p{margin-left:auto;margin-right:auto}
}

/* ---------- Full-width banner band (stacked, centered text) ---------- */
.band{padding:84px 0;text-align:center;border-bottom:1px solid var(--line)}
.band .eyebrow{letter-spacing:.2em}
.band h2{font-size:clamp(1.7rem,3.8vw,2.5rem);margin:10px auto 14px;max-width:22ch}
.band p{font-size:1.18rem;max-width:60ch;margin:0 auto;color:var(--ink-soft)}
.band.teal{background:var(--teal);color:#fff;border-bottom:0}
.band.teal .eyebrow{color:#cfe9f4}.band.teal p{color:#eaf4fa}
.band.teal a{color:#fff}
.band.dark{background:var(--teal-dark);color:#fff;border-bottom:0}
.band.dark .eyebrow{color:#cfe9f4}.band.dark p{color:#eaf4fa}
.band.light{background:var(--panel)}
.band .divider{width:60px;height:3px;background:var(--gold);margin:18px auto 0;border-radius:3px}

/* ---------- Buttons ---------- */
.btn{display:inline-block;background:var(--gold);color:#1b1b1b;font-weight:700;
  padding:14px 28px;border-radius:8px;font-size:1rem;border:0;cursor:pointer}
.btn:hover{background:#ffb920;text-decoration:none}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff;margin-left:10px}
.btn.outline{background:#fff;border:1px solid var(--teal);color:var(--teal);margin-left:10px}
.btn.outline:hover{background:var(--panel)}
.btn.teal{background:var(--teal);color:#fff}
.btn.teal:hover{background:var(--teal-dark)}

/* ---------- Sections ---------- */
section{padding:64px 0;border-bottom:1px solid var(--line)}
section h2{font-size:clamp(1.6rem,3.4vw,2.2rem);margin-bottom:8px}
section .sub{color:var(--ink-soft);font-size:1.08rem;max-width:66ch;margin-bottom:34px}
.center{text-align:center}
.center .sub{margin-left:auto;margin-right:auto}

/* ---------- Grids & cards ---------- */
.grid{display:grid;gap:22px}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:780px){.cols-3,.cols-2{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px}
.card h3{font-size:1.15rem;margin-bottom:8px}
.card p{color:var(--ink-soft);font-size:.98rem}
.card .num{font-size:.8rem;font-weight:700;color:var(--teal);letter-spacing:.1em}

/* ---------- Bio ---------- */
.bio{display:grid;grid-template-columns:1fr;gap:14px}
.bio .role{color:var(--teal);font-weight:700;font-size:.95rem}

/* ---------- Lifecycle pills ---------- */
.lifecycle{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.lifecycle span{background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:8px 14px;font-size:.9rem;font-weight:600;color:var(--ink)}
.lifecycle span::after{content:"→";margin-left:10px;color:var(--teal);font-weight:700}
.lifecycle span:last-child::after{content:""}

/* ---------- Agenda ---------- */
.agenda{list-style:none}
.agenda li{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:18px 0;border-top:1px solid var(--line)}
.agenda li:first-child{border-top:none}
.agenda .time{font-weight:700;color:var(--teal)}
.agenda .what strong{display:block}
.agenda .what span{color:var(--ink-soft);font-size:.96rem}
@media(max-width:560px){.agenda li{grid-template-columns:84px 1fr;gap:12px}}

/* ---------- Events list ---------- */
.event{display:grid;grid-template-columns:120px 1fr;gap:22px;padding:22px 0;border-top:1px solid var(--line)}
.event:first-child{border-top:none}
.event .date{font-weight:700;color:var(--teal)}
.event .date small{display:block;color:var(--ink-soft);font-weight:500}
.event h3{font-size:1.12rem;margin-bottom:4px}
.event .place{color:var(--ink-soft);font-size:.95rem}
.event .badge{display:inline-block;background:var(--teal);color:#fff;font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:999px;margin-bottom:8px}
@media(max-width:560px){.event{grid-template-columns:1fr;gap:6px}}

/* ---------- Publications list ---------- */
.publist{list-style:none}
.publist li{padding:18px 0;border-top:1px solid var(--line)}
.publist li:first-child{border-top:none}
.publist .ptitle{font-weight:700;font-size:1.05rem;line-height:1.35}
.publist .pmeta{color:var(--ink-soft);font-size:.92rem;margin-top:3px}

/* ---------- Forms ---------- */
form.contact{max-width:560px}
form.contact label{display:block;font-weight:600;margin:16px 0 6px}
form.contact input,form.contact textarea{width:100%;padding:12px 14px;border:1px solid var(--line);
  border-radius:8px;font:inherit;color:var(--ink);background:#fff}
form.contact textarea{min-height:150px;resize:vertical}
form.contact .btn{margin-top:22px}

/* ---------- Resource / download ---------- */
.resource{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 24px;margin-bottom:14px}
.resource .meta strong{display:block}
.resource .meta span{color:var(--ink-soft);font-size:.9rem}

/* ---------- CTA band ---------- */
.cta{background:var(--panel);text-align:center}
.cta h2{margin-bottom:10px}
.cta p{color:var(--ink-soft);max-width:58ch;margin:0 auto 26px}

/* ---------- Footer ---------- */
footer{padding:42px 0;color:var(--ink-soft);font-size:.92rem;background:#fff}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:center}
footer a{color:var(--ink-soft)}
footer .foot-brand{font-weight:800;color:var(--ink)}
footer .foot-brand b{color:var(--teal)}