/* Section 2 · What we do — the morning after the hero's night. Everything is scoped to .wwd so it can't clash with the hero. */
.wwd {
  --bg:#EEF1F5; --surface:#FFFFFF; --ink:#0E151E; --ink-2:#2B3442; --muted:#5B6472; --line:#DCE1E8;
  --gold:#F2B36B; --gold-soft:#FBEBD5; --amber:#9A5410; --on-gold:#17110A; --night:#0A0D12;
  --ease:cubic-bezier(.2,.7,.2,1);
  background:var(--bg); color:var(--ink); font:400 17px/1.6 var(--sans);
}
.wwd :focus-visible { outline-color:var(--amber); }
.wwd .sec { padding:120px clamp(16px,5vw,80px); max-width:1440px; margin:0 auto; }
.wwd .eyebrow { font:500 12px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin:0 0 20px; }
.wwd .h2 { font:300 clamp(34px,4vw,60px)/1.02 var(--sans); font-stretch:88%; letter-spacing:-.03em; margin:0; max-width:18ch; }
.wwd .h2 b { font-weight:600; font-stretch:100%; }
.wwd .intro { font-size:clamp(17px,1.3vw,19px); color:var(--ink-2); max-width:52ch; margin:20px 0 0; }
.wwd .head { display:flex; flex-direction:column; align-items:center; text-align:center; gap:0; margin-bottom:56px; }
.wwd .head .h2 { margin-inline:auto; text-wrap:balance; } .wwd .head .intro { margin-inline:auto; }

.wwd .chips { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.wwd .chips li { font:500 13px/1 var(--sans); padding:9px 12px; border-radius:999px; background:var(--bg); border:1px solid var(--line); color:var(--ink-2); }
.wwd .more { display:inline-flex; align-items:center; gap:10px; font:500 15px/1 var(--sans); text-decoration:none; color:var(--ink);
  padding-bottom:6px; border-bottom:1px solid currentColor; transition:gap .3s var(--ease); }
.wwd .more:hover { gap:14px; }
.wwd .btn { background:var(--gold); color:var(--on-gold); }
.wwd .btn:hover { box-shadow:0 14px 34px -12px rgba(242,179,107,.9); }

.wwd .proof { display:flex; gap:12px; align-items:flex-start; font:400 15px/1.5 var(--sans); color:var(--ink-2); }
.wwd .proof p { margin:0; }
.wwd .proof .tag { flex:none; font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--amber);
  background:var(--gold-soft); padding:6px 8px; border-radius:6px; margin-top:2px; }
.wwd .proof b { color:var(--ink); }

.wwd .grid { display:grid; grid-template-columns:1.55fr 1fr; grid-template-rows:auto auto; gap:20px; }
.wwd .card { background:var(--surface); border:1px solid var(--line); border-radius:24px; overflow:hidden; display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.wwd .card:hover { transform:translateY(-4px); box-shadow:0 30px 60px -30px rgba(14,21,30,.25); }
.wwd .card .media { position:relative; overflow:hidden; }
.wwd .card .media img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.wwd .card:hover .media img { transform:scale(1.04); }
.wwd .card .body { padding:28px 30px 30px; display:flex; flex-direction:column; gap:16px; flex:1; }
.wwd .num { font:500 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.wwd .card h3 { font:500 clamp(24px,2vw,30px)/1.1 var(--sans); letter-spacing:-.02em; margin:0; }
.wwd .card p { margin:0; color:var(--ink-2); }
.wwd .card .more { margin-top:auto; align-self:flex-start; }

.wwd .big { grid-row:1 / span 2; }
.wwd .big .media { flex:1; min-height:340px; }
.wwd .big .media img { position:absolute; inset:0; }
.wwd .big .media::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(10,13,18,.55)); }
.wwd .big .body { flex:none; }
.wwd .big .stamp { position:absolute; left:20px; bottom:18px; z-index:1; display:flex; flex-wrap:wrap; gap:8px; }
.wwd .big .stamp span { font:500 12px/1 var(--mono); color:#fff; background:rgba(10,13,18,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18); padding:8px 10px; border-radius:999px; }
.wwd .big h3 { font-size:clamp(28px,2.6vw,38px); }
.wwd .big .proof { padding-top:18px; border-top:1px solid var(--line); }
.wwd .small .media { aspect-ratio:16/8; }
.wwd .badge { position:absolute; top:16px; right:16px; font:600 13px/1 var(--sans); background:var(--gold); color:var(--on-gold); padding:9px 12px; border-radius:999px; }

.wwd .foot { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:28px; padding:22px 26px; border-radius:18px; background:var(--night); color:#EEF1F5; }
.wwd .foot p { margin:0; font-size:17px; }
.wwd .foot p span { color:#A6AFBC; }

/* scroll reveal */
.wwd .reveal { opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.wwd .reveal.on { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { html:not(.force-motion) .wwd .reveal { opacity:1; transform:none; transition:none; } }

@media (max-width:980px) {
  .wwd .sec { padding:80px 16px; }
  .wwd { font-size:16px; }
  .wwd .head { margin-bottom:36px; }
  .wwd .grid { grid-template-columns:1fr; }
  .wwd .big { grid-row:auto; }
  .wwd .big .media { flex:none; min-height:0; aspect-ratio:16/10; }
  .wwd .card .body { padding:22px 20px 24px; }
  .wwd .foot { flex-direction:column; align-items:flex-start; }
  .wwd .big .stamp span:nth-child(3) { display:none; }
}

/* the fixed menu bar switches to a light style while it sits over this section */
.hdr { transition:color .4s; }
.hdr::before { transition:opacity .4s; }
.hdr::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .4s;
  background:rgba(238,241,245,.82); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(14,21,30,.08); }
.hdr.on-light { color:#0E151E; }
.hdr.on-light::before { opacity:0; }
.hdr.on-light::after { opacity:1; }
.hdr.on-light .menu { color:#0E151E; border-color:rgba(14,21,30,.2); }
.hdr.on-light .btn-sm { background:#F2B36B; color:#17110A; }