/* ============================================================
   site.css — shared design system for dapogeorge.com pages
   Mono headings · IBM Plex Sans body · indigo accent · light
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  --accent:#4b56d6;
  --accent-soft:rgba(75,86,214,.10);
  --bg:#f5f7fb;
  --surface:#ffffff;
  --ink:#0c1b33;
  --ink-2:#374863;
  --ink-3:#67768f;
  --hair:rgba(12,27,51,.12);
  --hair-soft:rgba(12,27,51,.07);
  --band:#0a1730;
  --band-2:#0d2148;
  --sans:'IBM Plex Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono', monospace;
  --wrap:1240px;
  --measure:680px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
a{color:inherit;}

#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:100;transition:width .08s linear;}

/* ---------- floating pill nav (uniform across every page) ---------- */
.nav{position:fixed;top:14px;right:14px;z-index:200;max-width:calc(100vw - 28px);}
.nav .in{position:relative;display:flex;align-items:center;gap:3px;padding:6px 8px;background:rgba(10,23,48,.92);backdrop-filter:saturate(1.3) blur(12px);-webkit-backdrop-filter:saturate(1.3) blur(12px);border-radius:999px;box-shadow:0 12px 32px rgba(10,23,48,.30);}
.brand{font-family:var(--mono);font-size:12.5px;font-weight:600;text-decoration:none;color:#fff;display:inline-flex;align-items:center;line-height:1;letter-spacing:.2px;padding:8px 6px 8px 12px;white-space:nowrap;}
.brand span{display:none;}
.brand::after{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.34);margin-left:11px;}
.navtoggle{display:none;}
.navlinks{display:flex;gap:1px;align-items:center;}
.navlinks > a,.droptrigger{font-family:var(--mono);font-size:12px;letter-spacing:.2px;color:#cfe0ea;text-decoration:none;transition:.15s;cursor:pointer;white-space:nowrap;padding:8px 11px;border-radius:999px;}
.navlinks > a:hover,.droptrigger:hover{color:#fff;background:rgba(255,255,255,.10);}
.navlinks > a.active,.navitem.active .droptrigger{color:#fff;background:rgba(255,255,255,.14);}
.navitem{position:relative;display:inline-flex;}
.droptrigger .caret{font-size:9px;display:inline-block;margin-left:3px;}
.dropmenu{position:absolute;top:calc(100% + 10px);right:0;background:#0f2530;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:7px;min-width:238px;box-shadow:0 24px 50px rgba(10,23,48,.5);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;display:flex;flex-direction:column;gap:1px;z-index:210;}
.navitem:hover .dropmenu,.navitem.open .dropmenu{opacity:1;visibility:visible;transform:translateY(0);}
.dropmenu a{font-family:var(--sans);font-size:13px;color:#cfe0ea;text-decoration:none;padding:10px 12px;border-radius:9px;transition:.12s;display:flex;flex-direction:column;gap:2px;}
.dropmenu a span{font-family:var(--mono);font-size:10px;color:#8aa2b3;letter-spacing:.4px;}
.dropmenu a:hover{background:rgba(255,255,255,.08);color:#fff;}
.dropmenu a:hover span{color:#cfe0ea;}
.dropmenu a.active{background:rgba(127,214,194,.16);color:#9be7d4;}
.dropmenu a.active span{color:#9be7d4;}

@media(max-width:760px){
  .nav .in{padding:5px 6px;gap:2px;}
  .brand{padding:8px 4px 8px 10px;font-size:12px;}
  .brand::after{display:none;}
  .navtoggle{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.5px;background:rgba(255,255,255,.12);border:none;border-radius:999px;padding:9px 14px;color:#fff;cursor:pointer;text-transform:uppercase;}
  .navlinks{display:none;position:absolute;top:calc(100% + 10px);right:0;background:#0f2530;border:1px solid rgba(255,255,255,.12);border-radius:16px;flex-direction:column;align-items:stretch;gap:1px;padding:8px;min-width:214px;box-shadow:0 24px 50px rgba(10,23,48,.5);}
  .navlinks.open{display:flex;}
  .navlinks > a,.droptrigger{padding:11px 12px;width:100%;font-size:13px;border-radius:9px;}
  .navitem{width:100%;flex-direction:column;}
  .dropmenu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;padding:2px 0 4px 12px;min-width:0;display:none;background:transparent;}
  .navitem.open .dropmenu{display:flex;}
}

/* floating logo (top-left, every page) */
.site-logo{position:fixed;top:15px;left:88px;z-index:200;display:block;width:70px;height:70px;border-radius:50%;box-shadow:0 6px 18px rgba(10,23,48,.26);transition:transform .15s ease, box-shadow .15s ease;}
.site-logo img{width:100%;height:100%;display:block;border-radius:50%;}
.site-logo:hover{transform:translateY(-1px) scale(1.05);box-shadow:0 10px 26px rgba(10,23,48,.34);}
@media(max-width:900px){.site-logo{left:40px;width:60px;height:60px;}}
@media(max-width:640px){.site-logo{left:16px;top:12px;width:48px;height:48px;}}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;}
@media(max-width:720px){.wrap{padding:0 20px;}}

.eyebrow{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--accent);}
.kicker{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-3);}

/* ---------- hero ---------- */
.hero{padding:88px 0 40px;scroll-margin-top:84px;}
.herogrid{display:grid;gap:56px;align-items:start;grid-template-columns:1.4fr 1fr;}
.hero h1{font-family:var(--mono);font-weight:600;font-size:clamp(27px,3.1vw,40px);line-height:1.24;letter-spacing:-.015em;text-transform:lowercase;margin:20px 0 0;max-width:19ch;}
.hero .dek{font-size:18.5px;line-height:1.6;color:var(--ink-2);max-width:46ch;margin-top:24px;}
.meta{display:grid;grid-template-columns:repeat(2,auto);gap:24px 40px;align-content:start;padding-top:6px;}
.meta .k{font-family:var(--mono);font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink-3);}
.meta .v{font-size:15px;font-weight:500;margin-top:6px;color:var(--ink);}
@media(max-width:820px){.herogrid{grid-template-columns:1fr;gap:30px;}}

/* ---------- section scaffold ---------- */
section.sec{padding:74px 0;border-top:1px solid var(--hair-soft);scroll-margin-top:72px;}
.secgrid{display:grid;gap:54px;grid-template-columns:300px 1fr;}
.sec-label{align-self:start;}
.sec-label .sec-num{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--accent);letter-spacing:1.5px;}
.sec-label .kicker{display:block;margin:12px 0 16px;}
.sec-label h2{font-family:var(--mono);font-weight:600;font-size:clamp(21px,2.1vw,26px);line-height:1.32;letter-spacing:-.01em;text-transform:lowercase;margin:0;}
@media(max-width:880px){.secgrid{grid-template-columns:1fr;gap:26px;}}

.lead{font-size:18.5px;line-height:1.56;color:var(--ink);font-weight:500;max-width:var(--measure);margin:0;}
.body{max-width:var(--measure);}
.body p{font-size:16.5px;line-height:1.7;color:var(--ink-2);margin:18px 0 0;}
.body p:first-child{margin-top:0;}
.body strong{color:var(--ink);font-weight:600;}
.stack{display:flex;flex-direction:column;gap:30px;}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{font-family:var(--mono);font-size:13px;color:var(--ink-2);background:var(--surface);border:1px solid var(--hair);border-radius:999px;padding:8px 15px;}
.chip b{color:var(--accent);font-weight:600;}

/* ---------- principles / cards ---------- */
.principles{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:12px;overflow:hidden;}
.principle{background:var(--surface);padding:24px;}
.principle .ix{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--accent);}
.principle h4{font-family:var(--sans);font-weight:600;font-size:16.5px;margin:12px 0 8px;}
.principle p{font-size:14.5px;line-height:1.58;color:var(--ink-3);margin:0;}
@media(max-width:560px){.principles{grid-template-columns:1fr;}}

/* ---------- dark band ---------- */
section.band{background:linear-gradient(160deg,var(--band) 0%,var(--band-2) 100%);border-top:none;}
.band .kicker{color:#7fb0ff;}
.band .sec-num{color:#7fb0ff;}
.band h2{color:#fff;}
.band .body p{color:#bcccea;}
.band .lead{color:#fff;}

/* ---------- footer ---------- */
footer{padding:52px 0 76px;border-top:1px solid var(--hair);}
footer .in{max-width:var(--wrap);margin:0 auto;padding:0 32px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;}
footer .big{font-family:var(--mono);font-weight:600;font-size:17px;text-transform:lowercase;letter-spacing:-.01em;}
footer .credit{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);letter-spacing:.3px;}

/* ---------- media: browser frame ---------- */
.browser{border:1px solid var(--hair);border-radius:13px;overflow:hidden;background:var(--surface);box-shadow:0 26px 54px -28px rgba(8,20,45,.4),0 2px 9px rgba(8,20,45,.05);}
.browser .chrome{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid var(--hair);background:color-mix(in srgb,var(--surface) 92%,var(--ink) 8%);}
.browser .chrome .d{width:10px;height:10px;border-radius:50%;background:var(--hair);}
.browser .chrome .u{margin-left:11px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);}
.browser img{width:100%;}
.figcap{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:13px;letter-spacing:.2px;line-height:1.55;}
.figcap b{color:var(--ink-2);font-weight:600;}
.media-lg{margin-top:8px;}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;}
@media(max-width:640px){.duo{grid-template-columns:1fr;}}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.card{background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:22px;}
.card .n{font-family:var(--mono);font-size:11px;color:var(--accent);font-weight:600;letter-spacing:.5px;}
.card h4{font-family:var(--sans);font-weight:600;font-size:16px;margin:11px 0 8px;}
.card p{font-size:14px;line-height:1.55;color:var(--ink-3);margin:0;}
@media(max-width:720px){.cards{grid-template-columns:1fr;}}

/* ---------- quote ---------- */
.quote{border-left:3px solid var(--accent);padding:5px 0 5px 24px;max-width:var(--measure);}
.quote p{font-size:20px;line-height:1.42;font-weight:500;color:var(--ink);margin:0;}
.quote em{color:var(--accent);font-style:normal;}

/* ---------- phase points ---------- */
.phase-points{display:flex;flex-direction:column;gap:10px;}
.phase-points .pt{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ink-2);line-height:1.5;}
.phase-points .pt::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-top:8px;}

/* ---------- stats (for dark band) ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px;border-top:1px solid rgba(255,255,255,.15);padding-top:30px;max-width:var(--measure);}
.stat .big{font-family:var(--mono);font-weight:600;font-size:clamp(20px,2.3vw,26px);line-height:1.12;color:#fff;letter-spacing:-.01em;}
.stat .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:#7fb0ff;margin-top:11px;}
.stat .sub{font-size:13px;color:#90a4c8;margin-top:7px;line-height:1.45;}
@media(max-width:640px){.stats{grid-template-columns:1fr;}}

/* ---------- project separator ---------- */
.proj-start{border-top:1px solid var(--hair);padding-top:80px;}

/* ============================================================
   HOME PAGE
   ============================================================ */
.home-hero{padding:88px 0 56px;}
.home-hero-grid{display:grid;grid-template-columns:1.55fr .85fr;gap:60px;align-items:center;}
@media(max-width:860px){.home-hero-grid{grid-template-columns:1fr;gap:38px;}}
.home-hero .eyebrow{margin-bottom:18px;}
.home-hero h1{font-family:var(--mono);font-weight:600;font-size:clamp(32px,4.4vw,54px);line-height:1.1;letter-spacing:-.025em;text-transform:lowercase;margin:0;}
.home-hero h1 em{font-style:normal;color:var(--accent);}
.home-hero .disciplines{font-family:var(--mono);font-size:13px;letter-spacing:.3px;color:var(--ink-3);margin-top:28px;}
.home-hero .disciplines b{color:var(--ink-2);font-weight:500;}
.home-hero .intro{font-size:18.5px;line-height:1.62;color:var(--ink-2);max-width:52ch;margin-top:24px;}
.home-hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}
.btn{font-family:var(--mono);font-size:12.5px;letter-spacing:.4px;text-decoration:none;padding:13px 22px;border-radius:10px;transition:.15s;display:inline-flex;align-items:center;gap:8px;}
.btn.primary{background:var(--accent);color:#fff;}
.btn.primary:hover{filter:brightness(1.08);}
.btn.ghost{border:1px solid var(--hair);color:var(--ink-2);}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);}
.portrait{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--hair);box-shadow:0 30px 60px -28px rgba(12,27,51,.45);aspect-ratio:4/4.2;background:var(--surface);}
.portrait img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.02);}
.portrait .tag{position:absolute;left:14px;bottom:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.6px;color:#fff;background:rgba(12,27,51,.62);backdrop-filter:blur(6px);padding:6px 11px;border-radius:999px;}

/* work grid */
.work-sec{padding:30px 0 20px;}
.work-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap;}
.work-head h2{font-family:var(--mono);font-weight:600;font-size:clamp(20px,2.2vw,26px);text-transform:lowercase;letter-spacing:-.01em;margin:0;}
.work-head .count{font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.5px;}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
@media(max-width:760px){.work-grid{grid-template-columns:1fr;}}
.work-card{display:flex;flex-direction:column;text-decoration:none;background:var(--surface);border:1px solid var(--hair);border-radius:16px;overflow:hidden;transition:.18s;}
.work-card:hover{transform:translateY(-3px);box-shadow:0 26px 50px -28px rgba(12,27,51,.4);border-color:rgba(75,86,214,.4);}
.work-card .thumb{aspect-ratio:16/9;overflow:hidden;background:#eef1f5;border-bottom:1px solid var(--hair);}
.work-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:.4s;}
.work-card:hover .thumb img{transform:scale(1.04);}
.work-card .body{padding:22px 24px 26px;}
.work-card .tagrow{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.work-card .num{font-family:var(--mono);font-size:11px;color:var(--accent);font-weight:600;}
.work-card .pill{font-family:var(--mono);font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--hair);border-radius:999px;padding:3px 9px;white-space:nowrap;}
.work-card h3{font-family:var(--mono);font-weight:600;font-size:19px;text-transform:lowercase;letter-spacing:-.01em;margin:0 0 10px;color:var(--ink);}
.work-card p{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:0;}
.work-card .arrow{margin-top:16px;font-family:var(--mono);font-size:12px;color:var(--accent);display:inline-flex;align-items:center;gap:6px;}

/* home about strip */
.home-about{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
@media(max-width:760px){.home-about{grid-template-columns:1fr;gap:28px;}}

/* featured Moyo card */
.work-card.feature{grid-column:1 / -1;flex-direction:row;align-items:stretch;}
.work-card.feature .thumb{aspect-ratio:auto;width:44%;min-height:230px;border-bottom:none;border-right:1px solid var(--hair);}
.moyo-thumb{width:100%;height:100%;min-height:230px;background:linear-gradient(150deg,#1d3b48,#0f2530);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:24px;text-align:center;}
.moyo-thumb .wm{font-family:var(--mono);font-weight:600;font-size:clamp(22px,2.6vw,32px);color:#fff;letter-spacing:-.01em;}
.moyo-thumb .wm em{color:#7fd6c2;font-style:normal;}
.moyo-thumb .sub{font-family:var(--mono);font-size:11px;color:#9db4bd;letter-spacing:.4px;}
.moyo-thumb .pages{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap;justify-content:center;}
.moyo-thumb .pages span{font-family:var(--mono);font-size:9px;color:#cfe3e0;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:3px 9px;white-space:nowrap;}
.work-card.feature .body{flex:1;display:flex;flex-direction:column;justify-content:center;}
.pill.new{background:var(--accent);color:#fff;border-color:var(--accent);}
@media(max-width:680px){.work-card.feature{flex-direction:column;}.work-card.feature .thumb{width:100%;border-right:none;border-bottom:1px solid var(--hair);}}

/* ============================================================
   RESPONSIVE HARDENING (applies site-wide)
   ============================================================ */
*{min-width:0;}
html{-webkit-text-size-adjust:100%;}
body{overflow-x:hidden;}
img,svg,video,iframe,canvas{max-width:100%;}
h1,h2,h3,h4,.lead,.dek,.intro{overflow-wrap:break-word;}

/* tablet */
@media(max-width:1024px){
  :root{--wrap:940px;}
}

/* small tablet / large phone */
@media(max-width:640px){
  section.sec{padding:52px 0;}
  .hero{padding:84px 0 30px;}
  .home-hero{padding:84px 0 40px;}
  .home-hero .intro{font-size:17px;}
  .meta{grid-template-columns:1fr 1fr;gap:18px 26px;}
}

/* phone */
@media(max-width:480px){
  .wrap{padding-left:18px;padding-right:18px;}
  section.sec{padding:42px 0;}
  .work-card .body{padding:20px 20px 22px;}
  .cta-row{flex-direction:column;align-items:stretch;}
  .cta-row .btn{justify-content:center;}
  .meta{grid-template-columns:1fr 1fr;}
  .stats{gap:20px;}
}

/* very small phone */
@media(max-width:380px){
  .meta{grid-template-columns:1fr;}
}