/* =========================================================
   Rodrik Consulting — clean build
   Sticky header, translucent section titles, tidy contact form
   ========================================================= */

/* -------------------- Theme tokens -------------------- */
:root{
  --bg:#0b0f17;
  --panel:#111827;
  --ink:#E5E7EB;
  --muted:#9CA3AF;

  --brand:#67E8F9;
  --brand-2:#8B5CF6;

  --stroke:#202A3A;
  --shadow:0 10px 30px rgba(0,0,0,.35);

  --radius:14px;
  --radius-sm:10px;
  --container:1120px;

  --header-h:72px;

  /* sticky section title */
  --section-title-alpha:.15;
  --section-title-blur:3px;
}

/* -------------------- Base -------------------- */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
img{max-width:100%;height:auto;display:block}
a{color:#67E8F9;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}

/* -------------------- Header / Nav -------------------- */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:linear-gradient(180deg, rgba(11,15,23,.95), rgba(11,15,23,.7) 60%, rgba(11,15,23,0));
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--stroke);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h);
}
.brand{display:flex;gap:10px;align-items:center;font-weight:800;font-size:18px;color:var(--ink)}
.brand .logo{
  width:120px;height:auto;display:block;
  filter:brightness(0) invert(1) contrast(1.05) saturate(1.1);
}
.nav-links{display:flex;gap:18px;align-items:center}
.nav-links a{padding:8px 10px;border-radius:9px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 16px;border-radius:10px;font-weight:700;border:0;cursor:pointer;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#0b0f17}
.btn:hover{filter:brightness(1.05)}
.btn.btn-outline{background:transparent;border:1px solid var(--stroke);color:var(--ink)}
.btn.btn-outline:hover{background:#0e1421}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:44px;height:40px;padding:0;
  align-items:center;justify-content:center}
.nav-toggle .burger{display:block;width:28px;height:2px;background:#E5E7EB;border-radius:2px}
.nav-toggle .burger + .burger{margin-top:6px}
.mobile-menu{display:none}
.mobile-menu.open{display:block}

/* -------------------- Main & Hero -------------------- */
.main{padding:0 0 80px}

.hero{
  padding:64px 0 8px;display:grid;gap:18px; position:relative;
}
.hero > *{ position:relative; z-index:1 }
.hero::before{
  content:""; position:absolute; inset:-2px; z-index:0;
  background:
    linear-gradient(180deg, rgba(11,15,23,.65), rgba(11,15,23,.88)),
    url("/assets/photos/banner.png") center/cover no-repeat;
  filter:saturate(1.05) contrast(1.05); pointer-events:none;
}

.hero h1{font-size:42px;line-height:1.15;margin:0}
.hero .lede{color:var(--muted);max-width:800px}
.cta{display:flex;gap:12px;margin-top:10px}

/* TEMP: gradient only, no photo */

/* -------------------- Sections -------------------- */
.section{padding:56px 0;border-top:1px solid var(--stroke); scroll-margin-top:var(--header-h)}
.section h2{font-size:28px;margin:0 0 6px}
.section-lede{color:var(--muted);margin:0 0 18px}

/* translucent sticky section titles */
.section > h2{
  position:sticky; top:var(--header-h); z-index:2;
  background:rgba(11,15,23,var(--section-title-alpha));
  -webkit-backdrop-filter:saturate(120%) blur(var(--section-title-blur));
  backdrop-filter:saturate(120%) blur(var(--section-title-blur));
  border-bottom:1px solid rgba(255,255,255,.04);
  margin:0 0 12px; padding:8px 0;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .section > h2{ background:rgba(11,15,23,.14) }
}

/* -------------------- Cards / Grids -------------------- */
.grid{display:grid;gap:18px}
.cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{
  background:linear-gradient(180deg,rgba(17,24,39,.9),rgba(15,21,34,.9));
  border:1px solid var(--stroke);border-radius:var(--radius);
  padding:18px 18px 16px; box-shadow:var(--shadow);
  transition:transform .2s ease, border-color .2s ease; color:var(--ink)
}
.card:hover{transform:translateY(-3px);border-color:#2B364B}
.card h3{margin:0 0 6px;font-size:18px}
.card p{margin:0;color:#C9D2E0}
.card .notice{color:#9DD9FF;font-size:14px}

/* icon tile used in cards */
.card-head{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:10px;text-align:center}
.card-icon{
  width:72px;height:72px;display:grid;place-items:center;border-radius:18px;
  background:linear-gradient(180deg,rgba(25,30,40,.9),rgba(18,22,32,.9));
  border:1px solid var(--stroke);box-shadow:var(--shadow);
}

/* -------------------- “Solutions” subtle photo banners -------------------- */
#solutions .grid.cards > a.card{ position:relative; overflow:hidden }
#solutions .grid.cards > a.card > *{ position:relative; z-index:1 }
#solutions .grid.cards > a.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:120px;
  background: var(--photo) center/cover no-repeat; opacity:.18;
  filter:saturate(1.05) contrast(1.05) brightness(.95); pointer-events:none; z-index:0;
  transition: opacity .25s ease, transform .25s ease;
  border-top-left-radius: inherit; border-top-right-radius: inherit;
}
#solutions .grid.cards > a.card:hover::before{ opacity:.28; transform:scale(1.03) }
@media (max-width:640px){ #solutions .grid.cards > a.card::before{ height:96px } }

/* map each card to a “keep” photo */
#solutions .grid.cards > a.card:nth-of-type(1){ --photo:url("/assets/photos/el-salvador-officials.jpg") }
#solutions .grid.cards > a.card:nth-of-type(2){ --photo:url("/assets/photos/citi-team.jpg") }
#solutions .grid.cards > a.card:nth-of-type(3){ --photo:url("/assets/photos/meeting-workshop.jpg") }
#solutions .grid.cards > a.card:nth-of-type(4){ --photo:url("/assets/photos/nft-nyc-selfie.jpg") }
#solutions .grid.cards > a.card:nth-of-type(5){ --photo:url("/assets/photos/team-stage.jpg") }
#solutions .grid.cards > a.card:nth-of-type(6){ --photo:url("/assets/photos/palm-judges.jpg") }

/* -------------------- “From the Field” slideshow -------------------- */
/* make the slideshow span a full row inside #work grid */
#work .grid.cards > #field-slideshow{
  grid-column:1 / -1; margin:0; padding:0; display:block;
}
#field-slideshow .randshot{ margin:0 }
#field-slideshow .frame{
  width:min(75%, 980px);
  margin:0 auto 16px;
  border:1px solid var(--stroke);
  border-radius:12px; overflow:hidden; box-shadow:var(--shadow);
}
#field-slideshow img{
  width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
  opacity:0; transition:opacity .6s ease;
}
#field-slideshow img.on{ opacity:1 }
#field-slideshow .cap{
  position:absolute; left:10px; bottom:10px; font-size:12px;
  padding:6px 8px; color:var(--ink);
  background:rgba(11,15,23,.55); border:1px solid rgba(255,255,255,.08); border-radius:8px;
}
@media (max-width:900px){ #field-slideshow .frame{ width:100% } }

/* -------------------- Testimonials (simple) -------------------- */
.tcard{
  background:var(--panel); border:1px solid var(--stroke);
  border-radius:16px; box-shadow:var(--shadow); padding:20px;
}

/* -------------------- Forms (global base) -------------------- */
label span{display:block;font-weight:600;font-size:13px;margin:0 0 6px;color:#AEB7C7}
input[type="text"], input[type="email"], textarea{
  width:100%; background:#0b111c; border:1px solid var(--stroke); color:var(--ink);
  border-radius:10px; padding:12px;
}
input:focus, textarea:focus{
  outline:2px solid #1f2a44; border-color:#2B364B; box-shadow:0 0 0 3px rgba(103,232,249,.08);
}
textarea{ resize:vertical }

/* -------------------- CONTACT (stacked, centered, polished) -------------------- */
/* Photo banner above the form */
#signup-desk .frame{
  max-width:760px; margin:0 auto 16px;
  border:1px solid var(--stroke); border-radius:12px; overflow:hidden; box-shadow:var(--shadow);
}
#signup-desk img{ width:100%; aspect-ratio:21/9; object-fit:cover }

/* Form container */
#contact .section-lede, #contact form{ max-width:760px; margin:0 auto; padding:0 16px }
#contact .fields{
  display:grid; grid-template-columns:1fr; gap:16px; align-items:start;
}
#contact .fields > label{ display:flex; flex-direction:column; gap:8px; margin:0 }
#contact .fields > label.full{ grid-column:1 / -1 } /* (future-proof) */

#contact textarea{ min-height:260px }
#contact button.btn{ display:block; margin:12px auto 0 }
#contact .section-lede{ margin-top:10px; text-align:center }

/* -------------------- Footer -------------------- */
.site-footer{border-top:1px solid var(--stroke);padding:22px 0;color:#95A3B7}
.footer{display:flex;justify-content:center;align-items:center}

/* -------------------- Reveal (optional) -------------------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .45s ease, transform .45s ease;will-change:opacity,transform}
.reveal.revealed{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal .card{transition:none;transform:none;opacity:1}
}

/* -------------------- Responsive -------------------- */
@media (max-width:980px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero h1{font-size:36px}
  .brand .logo{width:100px}
}
@media (max-width:840px){
  .cards{grid-template-columns:1fr}
  .site-header{
    position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(11,15,23,.97);
    -webkit-backdrop-filter:saturate(140%) blur(8px);
    backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--stroke);
  }
  .nav{min-height:var(--header-h)}
  .brand .logo{width:140px;height:auto}
  .nav-links{display:none !important}
  .nav-toggle{display:inline-flex}
  .nav-toggle .burger{background:#fff}
  .mobile-menu{
    position:absolute; right:20px; top:calc(100% + 8px);
    width:min(78vw,320px); background:rgba(11,15,23,.98);
    border:1px solid var(--stroke); border-radius:12px; padding:8px;
    box-shadow:0 12px 30px rgba(0,0,0,.45); z-index:1001;
  }
  .mobile-menu a{display:block;color:var(--ink);padding:12px;border-radius:10px}
  .mobile-menu a:hover{background:rgba(255,255,255,.06)}
  .container{max-width:92%;padding-left:12px;padding-right:12px}
  .main{padding-top:calc(var(--header-h) + 8px)}
}
@media (max-width:640px){
  #contact form{ max-width:100% }
  #signup-desk .frame{ max-width:100% }
  #contact textarea{ min-height:200px }
}
/* Strategic Leadership card – move banner focal point up */
#solutions .grid.cards > a.card:nth-of-type(1)::before{
  background-position: center 5% !important; /* 0% = top, 50% = center */
}
/* Sticky section titles — make background more transparent */
:root{
  --section-title-alpha: .06;   /* was .15 — try .08 or .06 */
  --section-title-blur: 2px;    /* optional: a touch less blur */
}

.section > h2{
  border-bottom-color: rgba(255,255,255,.03); /* lighter divider */
}

/* Fallback when backdrop-filter isn't supported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .section > h2{ background: rgba(11,15,23,.06); } /* was .14 */
}
/* ===== Transparent sticky section titles (match header vibe) ===== */

/* kill the heavy divider between sections */
.section{
  border-top: 0 !important;
}

/* more like the site header: soft gradient + blur, no hard line */
:root{
  --section-title-blur: 8px; /* same blur as header */
}

.section > h2{
  position: sticky;
  top: var(--header-h);
  z-index: 2;
  /* subtle gradient that fades to transparent */
  background: linear-gradient(
    180deg,
    rgba(11,15,23,.40),
    rgba(11,15,23,.16) 60%,
    rgba(11,15,23,0)
  ) !important;
  -webkit-backdrop-filter: saturate(140%) blur(var(--section-title-blur));
  backdrop-filter: saturate(140%) blur(var(--section-title-blur));
  border-bottom: 0 !important;     /* remove the dark line under the title */
  margin: 0 0 12px;
  padding: 8px 0;
}

/* fallback when blur isn't supported — lighter, still translucent */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-fi