/* * Paulina Galindo Portfolio — main stylesheet * * Ported verbatim from the design canvas. All selectors are scoped to * .d3 (applied to in header.php) so the theme can coexist with * other CSS without bleeding. Colors and fonts pull from CSS custom * properties whose values are written from the Customizer via the * inline style block in functions.php (pg_portfolio_dynamic_css()). */ /* No global overflow tricks — each section that can overflow is clipped individually below */ .d3{--ink:#111;--ink-h:#000;--sub:#555;--mute:#86868b;--paper:#fff;--soft:#fbfbfd;--card:#f5f5f7;--rule:#e8e8ed;--green:#10b981;--teal:#0d9488;--teal-h:#0f766e;--teal-soft:#ccfbf1; background:var(--paper);color:var(--ink); font-family:'Geist',-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif; width:100%;min-height:100%;letter-spacing:-0.015em;-webkit-font-smoothing:antialiased} /* ── Nuclear link reset — beats WordPress core + plugin stylesheets ── */ .d3 a, .d3 a:link, .d3 a:visited, .d3 a:hover, .d3 a:focus, .d3 a:active{text-decoration:none!important;color:inherit} /* Card anchors + every child element inside them — never underlined */ .d3 a.card,.d3 a.card *, .d3 a.wCard,.d3 a.wCard *{text-decoration:none!important} .d3 .mono{font-family:'IBM Plex Mono',ui-monospace,monospace;letter-spacing:0} .d3 .num{font-variant-numeric:tabular-nums} /* NAV — Apple-style top bar */ .d3 .nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center; padding:14px 24px;background:rgba(255,255,255,.78);backdrop-filter:saturate(180%) blur(20px); position:sticky;top:0;z-index:30;border-bottom:1px solid var(--rule);font-size:13px} .d3 .nav .logo{display:flex;align-items:center;gap:10px;font-weight:500;color:var(--ink)} .d3 .nav .logo .mk{width:24px;height:24px;background:var(--ink);color:var(--paper);display:grid;place-items:center;border-radius:50%;font-size:11px;font-weight:600} .d3 .nav ul{display:flex;gap:0;list-style:none;margin:0;padding:0;justify-self:center} .d3 .nav a{padding:8px 14px;color:var(--ink);text-decoration:none;font-weight:400;transition:opacity .15s} .d3 .nav a:hover{opacity:.55} .d3 .nav a.on{font-weight:500} .d3 .nav .live{justify-self:end;display:inline-flex;align-items:center;gap:8px;color:var(--sub);font-size:12px} .d3 .nav .live .ping{position:relative;width:6px;height:6px;border-radius:50%;background:var(--green);flex:0 0 auto} .d3 .nav .live .ping::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green);animation:d3pulse 1.8s ease-out infinite} .d3 .nav .live .sky{display:inline-block;font-size:13px;line-height:1;animation:d3skyfloat 5s ease-in-out infinite} @keyframes d3pulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.6);opacity:0}} @keyframes d3skyfloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-1px) rotate(6deg)}} /* HERO — centered, generous whitespace. overflow-x:clip on the hero section contains any wide children (trio notes, large h1 text) without affecting sticky nav or creating a scroll container. */ .d3 .hero{padding:96px 24px 72px;text-align:center;max-width:1100px;margin:0 auto;overflow-x:clip} /* photoWrap contains the trio; clip overflow so trio's absolutely-positioned notes and arrows never bleed beyond the hero into the scrollable area */ .d3 .hero .photoWrap{position:relative;display:flex;justify-content:center;align-items:center;margin-top:32px;min-height:820px;z-index:1;overflow:hidden} .d3 .hero .eyebrow{font-size:13px;color:var(--sub);letter-spacing:.06em;margin-bottom:18px;display:inline-flex;align-items:center;gap:10px} .d3 .hero .eyebrow::before,.d3 .hero .eyebrow::after{content:"";display:inline-block;width:24px;height:1px;background:var(--rule)} .d3 .hero h1{font-size:clamp(36px,7.5vw,104px);line-height:.98;font-weight:600;letter-spacing:-0.045em;margin:0;text-wrap:balance} .d3 .hero h1 .stack{display:block} .d3 .hero h1 .ai{display:inline-block} .d3 .hero h1 .ai .l{display:inline-block;transform-origin:50% 90%;animation:d3wave 3.4s cubic-bezier(.36,.07,.19,.97) infinite} .d3 .hero h1 .ai .l.dash{animation:none;opacity:.45;padding:0 .02em;font-weight:400} .d3 .hero h1 .ai .l:nth-child(1){animation-delay:0s} .d3 .hero h1 .ai .l:nth-child(2){animation-delay:.08s} .d3 .hero h1 .ai .l:nth-child(3){animation-delay:.16s} .d3 .hero h1 .ai .l:nth-child(4){animation-delay:.24s} .d3 .hero h1 .ai .l:nth-child(5){animation-delay:.32s} .d3 .hero h1 .ai .l:nth-child(6){animation-delay:.40s} .d3 .hero h1 .ai .l:nth-child(7){animation-delay:.48s} .d3 .hero h1 .ai .l:nth-child(8){animation-delay:.56s} .d3 .hero h1 .ai .l:nth-child(9){animation-delay:.64s} @keyframes d3wave{ 0%,55%,100%{transform:translateY(0) rotate(0) scale(1)} 20%{transform:translateY(-14%) rotate(-3deg) scale(1.03)} 35%{transform:translateY(0) rotate(2deg) scale(.99)} } .d3 .hero h1 .quiet{color:var(--mute);font-weight:300} .d3 .hero .sub{font-size:22px;line-height:1.4;color:var(--sub);margin:22px auto 0;max-width:680px;font-weight:400} .d3 .hero .sub b{color:var(--ink);font-weight:500} .d3 .hero .ctas{display:flex;gap:14px;justify-content:center;margin-top:32px} .d3 .hero .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px; font-size:14px;font-weight:500;text-decoration:none;transition:transform .2s,background .2s,color .2s,border-color .2s} .d3 .hero .btn.primary{background:var(--ink);color:var(--paper);border:1px solid var(--ink)} .d3 .hero .btn.primary:hover{transform:scale(1.02);background:var(--ink-h);border-color:var(--ink-h)} .d3 .hero .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule)} .d3 .hero .btn.ghost:hover{border-color:var(--ink)} /* HERO photo — trio reveal on hover */ .d3 .hero .photoWrap{position:relative;display:flex;justify-content:center;align-items:center;margin-top:32px;min-height:820px;z-index:1} .d3 .hero .photoWrap::before{content:'';position:fixed;inset:0; background:rgba(255,255,255,.92);backdrop-filter:saturate(120%) blur(3px);-webkit-backdrop-filter:saturate(120%) blur(3px); opacity:0;pointer-events:none;transition:opacity .55s ease;z-index:-1} .d3 .hero .photoWrap:hover::before{opacity:1} .d3 .trio{position:relative;width:min(1080px,100%);height:820px} .d3 .trio .ph{position:absolute;top:50%;left:50%;border-radius:50%;overflow:hidden; background:var(--soft) center 30%/cover no-repeat;background-image:url('assets/paulina-profile.png'); transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .55s ease,box-shadow .5s ease; box-shadow:0 4px 22px rgba(0,0,0,.05);will-change:transform} .d3 .trio .ph-center{width:320px;height:320px;transform:translate(-50%,-50%);z-index:2} .d3 .photoWrap:hover .ph-center{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 18px 50px rgba(0,0,0,.12)} .d3 .trio .ph-left,.d3 .trio .ph-right{width:260px;height:260px;opacity:0} .d3 .trio .ph-left{transform:translate(-50%,-50%) rotate(-7deg) scale(.55);z-index:1} .d3 .trio .ph-right{transform:translate(-50%,-50%) rotate(7deg) scale(.55);z-index:1} .d3 .photoWrap:hover .ph-left{opacity:1;transform:translate(calc(-50% - 320px),-50%) rotate(-7deg) scale(1);box-shadow:0 14px 36px rgba(0,0,0,.1)} .d3 .photoWrap:hover .ph-right{opacity:1;transform:translate(calc(-50% + 320px),-50%) rotate(7deg) scale(1);box-shadow:0 14px 36px rgba(0,0,0,.1)} /* Bouncing CTA pill — invites hover, fades out once content is revealed */ .d3 .trio .pill{position:absolute;top:calc(50% + 130px);left:calc(50% + 60px); background:var(--ink);color:#fff;padding:10px 16px 10px 14px;border-radius:999px; font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase; display:inline-flex;align-items:center;gap:8px;white-space:nowrap;z-index:4;cursor:pointer; box-shadow:0 8px 22px rgba(0,0,0,.16);text-decoration:none; animation:d3pillBounce 2.6s cubic-bezier(.5,.05,.5,.95) infinite; transition:opacity .35s ease,transform .25s ease} .d3 .trio .pill .ar{display:inline-block;font-family:'Geist',sans-serif;font-size:14px;line-height:1;transform:translateY(-1px);transition:transform .25s ease} .d3 .trio .pill:hover .ar{transform:translateY(-1px) translateX(-4px)} .d3 .photoWrap:hover .pill{opacity:0;pointer-events:none} @keyframes d3pillBounce{ 0%,100%{transform:translateY(0) rotate(-3deg)} 18%{transform:translateY(-9px) rotate(-3deg)} 36%{transform:translateY(0) rotate(-3deg)} 54%{transform:translateY(-4px) rotate(-3deg)} 72%{transform:translateY(0) rotate(-3deg)} } .d3 .trio .note{position:absolute;font-family:'Caveat',cursive;font-weight:600;font-size:28px;line-height:1.12; color:#1a1a1a;letter-spacing:0;opacity:0;pointer-events:none; transition:opacity .55s ease .35s,transform .65s cubic-bezier(.2,.7,.2,1) .35s} .d3 .photoWrap:hover .note{opacity:1} .d3 .trio .note .txt{display:block;text-wrap:balance} .d3 .trio .note-left{top:calc(50% + 200px);left:calc(50% - 480px);width:320px;text-align:center;transform:translateY(8px) rotate(-3deg);transform-origin:50% 0} .d3 .photoWrap:hover .note-left{transform:translateY(0) rotate(-3deg)} .d3 .trio .note-right{top:calc(50% + 200px);left:calc(50% + 160px);width:320px;text-align:center;transform:translateY(8px) rotate(3deg);transform-origin:50% 0} .d3 .photoWrap:hover .note-right{transform:translateY(0) rotate(3deg)} .d3 .trio .note-center{top:calc(50% - 340px);left:50%;width:420px;text-align:center;transform:translate(-50%,-8px) rotate(-6deg);transform-origin:50% 100%} .d3 .photoWrap:hover .note-center{transform:translate(-50%,0) rotate(-6deg)} .d3 .trio .arrow{position:absolute;color:#1a1a1a;pointer-events:none;z-index:5} .d3 .trio .arrow path{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1) .5s} .d3 .photoWrap:hover .arrow path{stroke-dashoffset:0} .d3 .trio .arrow-left{left:calc(50% - 350px);top:calc(50% + 132px);width:60px;height:75px} .d3 .trio .arrow-right{left:calc(50% + 290px);top:calc(50% + 132px);width:60px;height:75px;transform:scaleX(-1)} .d3 .trio .arrow-center{left:50%;top:calc(50% - 245px);transform:translateX(-50%);width:60px;height:75px} /* SECTION header */ .d3 .secHead{max-width:1100px;margin:0 auto;padding:96px 24px 28px;text-align:center} .d3 .secHead .label{font-size:13px;color:var(--mute);letter-spacing:.04em;margin-bottom:10px;text-transform:uppercase;font-weight:500} .d3 .secHead h2{font-size:56px;font-weight:600;letter-spacing:-0.035em;line-height:1.05;margin:0;text-wrap:balance} .d3 .secHead h2 .quiet{color:var(--mute);font-weight:300} .d3 .secHead .sub{font-size:18px;color:var(--sub);margin:14px auto 0;max-width:560px;line-height:1.45} /* SELECTED WORK — refined hover rows (still used on Work index) */ .d3 .selWork{max-width:1100px;margin:0 auto;padding:8px 24px 32px} /* LINEUP CAROUSEL — Apple iPhone-lineup style (gray section, portrait cards) */ .d3 .lineup{background:#f5f5f7;margin:48px 0 0;padding:80px 0 56px;overflow-x:clip} .d3 .lineup .lineupHead{max-width:1100px;margin:0 auto;padding:0 24px 36px;display:flex;justify-content:space-between;align-items:start;gap:24px} .d3 .lineup .lineupHead h2{font-size:52px;line-height:1.05;letter-spacing:-0.035em;font-weight:600;margin:0;max-width:780px;text-wrap:balance} .d3 .lineup .lineupHead h2 .quiet{color:var(--mute);font-weight:300} .d3 .lineup .lineupHead .more{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-size:14px;font-weight:500;text-decoration:none; letter-spacing:-0.01em;white-space:nowrap;margin-top:10px;padding:11px 22px;border-radius:999px; background:#fff;border:1px solid var(--rule);transition:border-color .15s,background .15s,transform .15s} .d3 .lineup .lineupHead .more:hover{border-color:var(--ink);background:#fff;text-decoration:none} .d3 .lineup .lineupHead .more::after{content:none} .d3 .lineup .scroller{overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory; scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 0 28px} .d3 .lineup .scroller::-webkit-scrollbar{display:none} .d3 .lineup .track{display:flex;gap:18px;padding:0 24px 0 calc((100% - 1100px)/2 + 24px);width:max-content} @media (max-width:1148px){.d3 .lineup .track{padding-left:24px}} .d3 .lineup .card{flex:0 0 304px;height:480px;scroll-snap-align:start;background:#fff;border-radius:20px; padding:28px 26px 24px;display:flex;flex-direction:column;position:relative;overflow:hidden;cursor:pointer; text-decoration:none;color:inherit; transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s} .d3 .lineup .card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.06)} .d3 .lineup .card .eyebrow{font-size:14px;font-weight:500;color:var(--ink);letter-spacing:-0.01em;margin-bottom:14px} .d3 .lineup .card h3{font-size:24px;line-height:1.15;letter-spacing:-0.025em;font-weight:600;margin:0 0 14px;text-wrap:balance;color:var(--ink)} .d3 .lineup .card .desc{font-size:14px;line-height:1.5;color:var(--sub);margin:0 0 16px;text-wrap:pretty} .d3 .lineup .card .metric{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:14px} .d3 .lineup .card .imgWrap{margin-top:auto;margin-left:-26px;margin-right:-26px;margin-bottom:-24px;height:220px;max-height:220px; display:flex;align-items:flex-end;justify-content:center;position:relative;border-radius:0 0 20px 20px;overflow:hidden; background:linear-gradient(135deg,#dde3ee 0%,#b9c5d6 100%)} /* Product image sits at the bottom, large, bleeding slightly off the bottom edge (Apple-hero style) */ .d3 .lineup .card .imgWrap .cardImg{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%); width:90%;height:auto;max-height:none;object-fit:contain;object-position:bottom center} .d3 .lineup .card:nth-child(1) .imgWrap{background:linear-gradient(135deg,#1c1c1e 0%,#3a3a3c 60%,#5b5b5f 100%)} .d3 .lineup .card:nth-child(2) .imgWrap{background:linear-gradient(135deg,#fff5e6 0%,#ffd089 60%,#ffa64d 100%)} .d3 .lineup .card:nth-child(3) .imgWrap{background:linear-gradient(135deg,#ffe1d4 0%,#ff8a5e 60%,#ef5223 100%)} .d3 .lineup .card:nth-child(4) .imgWrap{background:linear-gradient(135deg,#e3eef5 0%,#a3b9c9 60%,#647483 100%)} .d3 .lineup .card .imgWrap .ph{position:absolute;left:18px;bottom:16px;display:flex;flex-direction:row;align-items:center;gap:6px; background:rgba(255,255,255,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); padding:6px 10px 6px 8px;border-radius:999px;color:#444} .d3 .lineup .card .imgWrap .ph svg{width:14px;height:14px;opacity:.85} .d3 .lineup .card .imgWrap .ph .lbl{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.9} .d3 .lineup .card .plus{position:absolute;right:18px;bottom:18px;height:36px;width:36px;border-radius:999px; background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center; line-height:1;cursor:pointer;z-index:3;padding:0; transition:width .4s cubic-bezier(.2,.7,.2,1),background .2s,box-shadow .25s; border:0;overflow:hidden;white-space:nowrap;font-family:inherit; box-shadow:0 4px 14px rgba(0,0,0,.22)} .d3 .lineup .card .plus .icn{font-size:22px;font-weight:300;transition:opacity .15s} .d3 .lineup .card .plus .lbl{position:absolute;font-size:13px;font-weight:500;letter-spacing:-0.01em;opacity:0;transition:opacity .25s} .d3 .lineup .card:hover .plus{width:120px;background:var(--ink-h)} .d3 .lineup .card:hover .plus .icn{opacity:0} .d3 .lineup .card:hover .plus .lbl{opacity:1} .d3 .lineup .navArrows{max-width:1100px;margin:0 auto;padding:8px 24px 0;display:flex;justify-content:flex-end;gap:8px} .d3 .lineup .navArrows button{width:38px;height:38px;border-radius:50%;background:#e8e8ed;border:0;color:var(--ink); display:grid;place-items:center;cursor:pointer;font-size:18px;font-weight:300;transition:background .15s,opacity .15s;font-family:inherit} .d3 .lineup .navArrows button:hover{background:#d8d8dc} .d3 .lineup .navArrows button:disabled{opacity:.4;cursor:default} .d3 .selWork .row{display:grid;grid-template-columns:40px 1fr 200px 70px 44px;gap:24px;align-items:center; padding:30px 4px;border-bottom:1px solid var(--rule);transition:padding .4s ease,background .25s;cursor:pointer;position:relative} .d3 .selWork .row:first-child{border-top:1px solid var(--rule)} .d3 .selWork .row:hover{padding:34px 12px} .d3 .selWork .row .num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--mute);letter-spacing:.04em} .d3 .selWork .row .title{font-size:36px;line-height:1.05;letter-spacing:-0.025em;font-weight:500;transition:transform .4s ease,color .25s} .d3 .selWork .row:hover .title{transform:translateX(6px)} .d3 .selWork .row .meta{font-size:13px;color:var(--mute);letter-spacing:.02em} .d3 .selWork .row .y{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--mute)} .d3 .selWork .row .arrow{justify-self:end;font-size:14px;width:36px;height:36px;border-radius:50%; background:var(--card);color:var(--ink);display:grid;place-items:center; transition:transform .35s ease,background .25s} .d3 .selWork .row:hover .arrow{transform:rotate(45deg);background:var(--ink);color:var(--paper)} .d3 .selWork .row .preview{position:absolute;right:120px;top:50%; transform:translateY(-50%) scale(.9);width:240px;height:150px;border-radius:12px; opacity:0;pointer-events:none;transition:opacity .3s,transform .4s cubic-bezier(.2,.7,.2,1); box-shadow:0 20px 50px rgba(0,0,0,.18);overflow:hidden;background:var(--card)} .d3 .selWork .row:hover .preview{opacity:1;transform:translateY(-50%) scale(1)} .d3 .selWork .row .preview::before{content:"";position:absolute;inset:0; background:repeating-linear-gradient(45deg,#ececef 0 10px,#f3f3f5 10px 20px)} .d3 .selWork .row .preview .pTag{position:absolute;left:10px;bottom:10px;font-family:'IBM Plex Mono',monospace; font-size:10px;color:var(--sub);background:rgba(255,255,255,.95);padding:3px 8px;border-radius:4px} .d3 .seeAllWrap{text-align:center;padding:32px 0 0} .d3 .seeAllWrap a{display:inline-flex;align-items:center;gap:6px;color:var(--teal);font-size:14px;text-decoration:none;font-weight:500} .d3 .seeAllWrap a:hover{color:var(--teal-h)} .d3 .seeAllWrap a::after{content:"›";font-size:18px;transform:translateY(-1px);transition:transform .2s} .d3 .seeAllWrap a:hover::after{transform:translate(3px,-1px)} /* ABOUT — three centered values + small body */ .d3 .about{max-width:1100px;margin:0 auto;padding:24px 24px 96px} .d3 .about .values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px} .d3 .about .v{padding:36px 28px;background:var(--soft);border-radius:18px;text-align:center} .d3 .about .v .word{font-size:36px;letter-spacing:-0.03em;font-weight:600;line-height:1.05;color:var(--ink);font-style:normal} .d3 .about .v .ln{font-size:14px;color:var(--sub);margin-top:10px;line-height:1.4} .d3 .about .body{max-width:680px;margin:48px auto 0;font-size:17px;line-height:1.65;color:var(--sub);text-align:center} .d3 .about .body b{color:var(--ink);font-weight:500} .d3 .principlesSection{background:#f5f5f7;margin:48px 0 0;padding:80px 0;overflow-x:clip} .d3 .principlesSection .inner{max-width:1100px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:64px;text-align:left;align-items:start} .d3 .principlesSection .p{display:flex;flex-direction:column;gap:14px;position:relative} .d3 .principlesSection .p:nth-child(1){transform:rotate(-1.5deg);transform-origin:0 50%} .d3 .principlesSection .p:nth-child(2){transform:rotate(1.5deg);transform-origin:100% 50%} .d3 .principlesSection .p .n{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase} .d3 .principlesSection .p .t{font-family:'Caveat',cursive;font-size:36px;line-height:1.2;color:var(--ink);font-weight:500;text-wrap:balance} .d3 .principlesSection .p .t b{font-weight:700} /* CTA — quiet, centered */ .d3 .cta{max-width:1100px;margin:0 auto 64px;padding:88px 24px;text-align:center;background:var(--soft);border-radius:24px} .d3 .cta h3{font-size:64px;line-height:1;letter-spacing:-0.04em;font-weight:600;margin:0} .d3 .cta h3 .quiet{color:var(--mute);font-weight:300} .d3 .cta .row{display:flex;gap:14px;justify-content:center;margin-top:32px} .d3 .cta .row .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font-size:15px;font-weight:500;text-decoration:none;transition:transform .2s,background .2s,color .2s} .d3 .cta .row .btn.primary{background:var(--ink);color:var(--paper)} .d3 .cta .row .btn.primary:hover{transform:scale(1.02);background:var(--ink-h)} .d3 .cta .row .btn.ghost{color:var(--teal)} .d3 .cta .row .btn.ghost:hover{color:var(--teal-h)} .d3 .cta .meta{display:flex;justify-content:center;gap:24px;margin-top:28px;font-size:13px;color:var(--mute)} .d3 .cta .meta b{color:var(--ink);font-weight:500} /* EXPERIENCE — horizontal timeline */ .d3 .experience{max-width:1100px;margin:0 auto;padding:24px 24px 96px} .d3 .timeline{position:relative;margin-top:64px;padding:0 8px} .d3 .timeline .rail{position:absolute;left:8%;right:8%;top:34px;height:1px;background:linear-gradient(to right,transparent 0%,var(--rule) 8%,var(--rule) 92%,transparent 100%)} .d3 .timeline .rail .fill{position:absolute;left:0;top:0;height:1px;width:78%;background:var(--ink)} .d3 .timeline .stops{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative} .d3 .timeline .stop{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative} .d3 .timeline .stop .when{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--mute);text-transform:uppercase;margin-bottom:16px;height:14px} .d3 .timeline .stop.now .when{color:var(--ink);font-weight:500} .d3 .timeline .stop .dot{width:12px;height:12px;border-radius:50%;background:var(--ink);position:relative;z-index:1;margin-bottom:34px;transition:transform .25s} .d3 .timeline .stop:hover .dot{transform:scale(1.3)} .d3 .timeline .stop.now .dot{background:var(--green);box-shadow:0 0 0 4px rgba(16,185,129,.18)} .d3 .timeline .stop.now .dot::after{content:'';position:absolute;inset:-6px;border-radius:50%;background:var(--green);opacity:.35;animation:d3pulse 2s ease-out infinite;z-index:-1} .d3 .timeline .stop .card{padding:24px 22px;background:var(--soft);border-radius:16px;width:100%;text-align:left; display:flex;flex-direction:column;gap:8px;transition:transform .3s,background .3s,border-color .3s; border:1px solid transparent;cursor:pointer;min-height:170px;box-sizing:border-box} .d3 .timeline .stop:hover .card{transform:translateY(-3px);background:#fff;border-color:var(--rule)} .d3 .timeline .stop.now .card{background:var(--ink);color:#fff;border-color:var(--ink)} .d3 .timeline .stop.now:hover .card{background:#1c1c1c;border-color:#1c1c1c} .d3 .timeline .stop .nowTag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.9);display:none;align-items:center;gap:6px} .d3 .timeline .stop .nowTag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(16,185,129,.25)} .d3 .timeline .stop.now .nowTag{display:inline-flex} .d3 .timeline .stop .logo{font-size:30px;font-weight:600;letter-spacing:-0.025em;line-height:1} .d3 .timeline .stop .role{font-size:13.5px;font-weight:500;letter-spacing:-0.01em;line-height:1.45;color:var(--ink)} .d3 .timeline .stop.now .role{color:rgba(255,255,255,.88)} .d3 .timeline .stop .span{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--mute);margin-top:auto;padding-top:8px} .d3 .timeline .stop.now .span{color:rgba(255,255,255,.7)} /* SPEAKING / MENTORING */ .d3 .speaking{background:#f5f5f7;padding:88px 0 96px;margin:0 0 64px;overflow-x:clip} .d3 .speaking .inner{max-width:1100px;margin:0 auto;padding:0 24px} .d3 .speaking .head{display:flex;justify-content:space-between;align-items:start;gap:24px;margin-bottom:40px} .d3 .speaking .head h2{font-size:52px;line-height:1.05;letter-spacing:-0.035em;font-weight:600;margin:0;max-width:780px;text-wrap:balance} .d3 .speaking .head h2 .quiet{color:var(--mute);font-weight:300} .d3 .speaking .head .more{color:var(--teal);font-size:17px;text-decoration:none;letter-spacing:-0.01em;white-space:nowrap;margin-top:14px} .d3 .speaking .head .more:hover{color:var(--teal-h)} .d3 .speaking .head .more::after{content:" ›";margin-left:2px} .d3 .speaking .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .d3 .speaking .s{padding:36px 28px;background:#fff;border-radius:18px;text-align:left;display:flex;flex-direction:column;gap:6px;transition:transform .3s} .d3 .speaking .s:hover{transform:translateY(-3px)} .d3 .speaking .s .num{font-size:64px;font-weight:600;letter-spacing:-0.04em;line-height:1;color:var(--ink)} .d3 .speaking .s .num em{font-style:normal;color:var(--teal)} .d3 .speaking .s .label{font-size:14px;color:var(--sub);margin-top:8px;line-height:1.4} .d3 .speaking .s .ln{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--mute);letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px} /* FOOTER — refined multi-column */ .d3 .foot{background:#fbfbfd;border-top:1px solid var(--rule);margin-top:0;overflow-x:clip} .d3 .foot .top{max-width:1100px;margin:0 auto;padding:56px 24px 32px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;align-items:start} .d3 .foot .brand{display:flex;flex-direction:column;gap:14px} .d3 .foot .brand .mark{font-size:20px;font-weight:600;letter-spacing:-0.02em;display:flex;align-items:center;gap:10px} .d3 .foot .brand .mark .dot{width:26px;height:26px;background:var(--ink);color:var(--paper);display:grid;place-items:center;border-radius:50%;font-size:12px;font-weight:600} .d3 .foot .brand p{font-size:14px;color:var(--sub);line-height:1.55;margin:0;max-width:360px} .d3 .foot .brand .signup{display:flex;gap:8px;margin-top:10px;max-width:360px} .d3 .foot .brand .signup input{flex:1;border:1px solid var(--rule);border-radius:999px;padding:11px 16px;font:inherit;font-size:14px;background:#fff;outline:none;transition:border-color .15s} .d3 .foot .brand .signup input:focus{border-color:var(--teal)} .d3 .foot .brand .signup button{padding:11px 18px;border-radius:999px;background:var(--ink);color:#fff;border:0;font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s} .d3 .foot .brand .signup button:hover{background:var(--ink-h)} .d3 .foot .col h5{font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em;margin:0 0 14px;font-weight:500} .d3 .foot .col a{display:block;font-size:14px;color:var(--ink);text-decoration:none;padding:5px 0;transition:color .15s;letter-spacing:-0.01em} .d3 .foot .col a:hover{color:var(--teal)} .d3 .foot .col a .ext{font-size:11px;color:var(--mute);margin-left:4px} .d3 .foot .bot{max-width:1100px;margin:0 auto;padding:24px 24px 36px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--mute);border-top:1px solid var(--rule);gap:24px} .d3 .foot .bot .legal a{color:var(--mute);text-decoration:none;margin-left:18px} .d3 .foot .bot .legal a:hover{color:var(--ink)} .d3 .foot .bot .top-link{color:var(--teal);text-decoration:none;display:inline-flex;align-items:center;gap:4px;font-weight:500} .d3 .foot .bot .top-link:hover{color:var(--teal-h)} /* WORK INDEX */ .d3 .wHero{max-width:1100px;margin:0 auto;padding:72px 24px 32px;text-align:center} .d3 .wHero .eyebrow{font-size:13px;color:var(--mute);letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;font-weight:500} .d3 .wHero h2{font-size:88px;line-height:1;font-weight:600;letter-spacing:-0.04em;margin:0} .d3 .wHero h2 .quiet{color:var(--mute);font-weight:300} .d3 .wHero .sub{font-size:18px;color:var(--sub);max-width:540px;margin:18px auto 0;line-height:1.4} .d3 .wHero .controls{margin:40px auto 0;display:inline-flex;align-items:center;gap:0;background:var(--card); border-radius:999px;padding:5px;font-size:13px} .d3 .wHero .controls .chip{padding:9px 18px;border:0;border-radius:999px;background:transparent; color:var(--ink);font-weight:500;cursor:pointer;transition:background .2s,color .2s} .d3 .wHero .controls .chip.on{background:var(--paper);box-shadow:0 1px 2px rgba(0,0,0,.08)} .d3 .wHero .controls .chip:hover:not(.on){color:var(--teal)} .d3 .wList{max-width:1100px;margin:0 auto;padding:48px 24px 64px} /* WORK GRID — Apple essentials-style 2x2 */ .d3 .wGridHead{max-width:1100px;margin:0 auto;padding:24px 24px 28px;display:flex;justify-content:space-between;align-items:end;gap:24px} .d3 .wGridHead h3{font-size:48px;font-weight:600;letter-spacing:-0.035em;line-height:1;margin:0} .d3 .wGridHead h3 .quiet{color:var(--mute);font-weight:300} .d3 .wGridHead .all{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-size:14px;font-weight:500;text-decoration:none; padding:11px 22px;border-radius:999px;background:#fff;border:1px solid var(--rule);transition:border-color .15s} .d3 .wGridHead .all:hover{border-color:var(--ink)} .d3 .wGrid{max-width:1100px;margin:0 auto;padding:0 24px 80px;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:18px} .d3 .wCard{background:#f5f5f7;border-radius:24px;padding:48px 40px 0;text-align:center; display:flex;flex-direction:column;align-items:center;cursor:pointer;overflow:hidden;min-height:600px; transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease;text-decoration:none;color:inherit} .d3 .wCard:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(0,0,0,.06)} .d3 .wCard .tag{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px} .d3 .wCard.featured .tag{color:#d97706;font-family:'Geist',sans-serif;text-transform:none;letter-spacing:0;font-size:14px;font-weight:500} .d3 .wCard h3{font-size:40px;line-height:1.05;letter-spacing:-0.03em;font-weight:600;margin:0 0 18px;color:var(--ink);text-wrap:balance;max-width:480px} .d3 .wCard .desc{font-size:16px;line-height:1.5;color:var(--ink);margin:0 0 24px;max-width:420px;text-wrap:pretty} .d3 .wCard .learn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff; font-size:14px;font-weight:500;letter-spacing:-0.01em;text-decoration:none; padding:12px 22px;border-radius:999px;margin-bottom:32px;border:1px solid var(--ink); transition:background .2s,border-color .2s,transform .2s} .d3 .wCard:hover .learn{background:var(--ink-h);border-color:var(--ink-h);transform:scale(1.02)} .d3 .wCard .learn::after{content:"→";font-family:'Geist',sans-serif;font-size:14px;line-height:1;transition:transform .2s ease} .d3 .wCard:hover .learn::after{transform:translateX(3px)} .d3 .wCard .imgWrap{margin:auto -40px 0;width:calc(100% + 80px);height:320px;max-height:320px;flex:0 0 320px; display:flex;align-items:flex-end;justify-content:center;position:relative;overflow:hidden; background:linear-gradient(135deg,#dde3ee 0%,#b9c5d6 100%)} .d3 .wCard .imgWrap .cardImg{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%); width:82%;height:auto;max-height:none;object-fit:contain;object-position:bottom center} .d3 .wCard:nth-child(1) .imgWrap{background:linear-gradient(135deg,#1c1c1e 0%,#3a3a3c 60%,#5b5b5f 100%)} .d3 .wCard:nth-child(2) .imgWrap{background:linear-gradient(135deg,#fff5e6 0%,#ffd089 60%,#ffa64d 100%)} .d3 .wCard:nth-child(3) .imgWrap{background:linear-gradient(135deg,#ffe1d4 0%,#ff8a5e 60%,#ef5223 100%)} .d3 .wCard:nth-child(4) .imgWrap{background:linear-gradient(135deg,#e3eef5 0%,#a3b9c9 60%,#647483 100%)} .d3 .wCard .imgWrap .ph{position:absolute;left:18px;bottom:16px;flex-direction:row;gap:6px; background:rgba(255,255,255,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); padding:6px 10px 6px 8px;border-radius:999px;color:#444;border:0} .d3 .wCard .imgWrap .ph svg{width:14px;height:14px;opacity:.85} .d3 .wCard .imgWrap .ph .lbl{font-size:10px;letter-spacing:.08em;opacity:.9} /* ───────── Case study extras ───────── */ .d3 .case{background:var(--paper)} /* Case nav crumb */ .d3 .case .crumb{max-width:1100px;margin:0 auto;padding:40px 24px 0;display:flex;align-items:center;gap:8px; font-size:13px;color:var(--mute);letter-spacing:-0.005em} .d3 .case .crumb a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px; padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--rule);transition:border-color .15s,background .15s} .d3 .case .crumb a:hover{border-color:var(--ink)} .d3 .case .crumb .sep{opacity:.6} /* Case hero — eyebrow, big tight title, summary, full-bleed cover */ .d3 .case .cHero{max-width:1100px;margin:0 auto;padding:48px 24px 32px;text-align:left} .d3 .case .cHero .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;color:var(--mute); text-transform:uppercase;margin-bottom:22px;display:inline-flex;align-items:center;gap:10px} .d3 .case .cHero .eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--mute)} .d3 .case .cHero h1{font-size:88px;line-height:1;letter-spacing:-0.04em;font-weight:600;margin:0 0 28px;text-wrap:balance;max-width:980px} .d3 .case .cHero h1 .quiet{color:var(--mute);font-weight:300} .d3 .case .cHero .lede{font-size:22px;line-height:1.4;color:var(--sub);max-width:760px;margin:0;font-weight:400} .d3 .case .cHero .lede b{color:var(--ink);font-weight:500} .d3 .case .cHero .introText{font-size:17px;line-height:1.7;color:var(--sub);max-width:720px;margin:20px 0 0;font-weight:400} .d3 .case .cHero .introText b{color:var(--ink);font-weight:500} .d3 .case .outcomes .outcomesIntro{font-size:17px;line-height:1.6;color:var(--mute);margin:12px 0 0;max-width:560px} .d3 .case .outcomes .outcomesIntro b{color:var(--paper);font-weight:500} .d3 .case .outcomes .outcomesClosing{font-size:17px;line-height:1.6;color:var(--mute);margin:48px 0 0;max-width:680px;padding-top:32px;border-top:1px solid rgba(255,255,255,.12)} .d3 .case .outcomes .outcomesClosing b{color:var(--paper);font-weight:500} .d3 .case .coverWrap{max-width:1240px;margin:32px auto 0;padding:0 24px} .d3 .case .cover{aspect-ratio:16/9;width:100%;border-radius:24px;overflow:hidden; background:linear-gradient(135deg,#f3f4f7 0%,#e8eaef 100%); display:flex;align-items:center;justify-content:center;position:relative} .d3 .case .cover:not(.has-img)::after{content:"";position:absolute;inset:18px;border:1px dashed #c8ccd4;border-radius:14px;pointer-events:none} .d3 .case .cover .ph{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;color:#9aa0ad} .d3 .case .cover .ph svg{width:48px;height:48px;stroke:currentColor;opacity:.7} .d3 .case .cover .ph .lbl{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.75} /* At a glance meta strip */ .d3 .case .glance{max-width:1100px;margin:0 auto;padding:80px 24px 32px;display:grid; grid-template-columns:repeat(4,1fr);gap:32px;border-bottom:1px solid var(--rule)} .d3 .case .glance .col{display:flex;flex-direction:column;gap:8px;padding-bottom:32px} .d3 .case .glance .col .k{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--mute);text-transform:uppercase} .d3 .case .glance .col .v{font-size:18px;line-height:1.35;color:var(--ink);font-weight:500;letter-spacing:-0.01em} .d3 .case .glance .col .v .quiet{color:var(--mute);font-weight:400} /* Section heads inside case */ .d3 .case .sec{max-width:1100px;margin:0 auto;padding:80px 24px 24px} .d3 .case .sec .num{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--mute);text-transform:uppercase;margin-bottom:18px} .d3 .case .sec h2{font-size:56px;line-height:1.05;letter-spacing:-0.035em;font-weight:600;margin:0 0 24px;text-wrap:balance;max-width:880px} .d3 .case .sec h2 .quiet{color:var(--mute);font-weight:300} .d3 .case .sec .body{font-size:19px;line-height:1.6;color:var(--sub);max-width:720px;margin:0;text-wrap:pretty} .d3 .case .sec .body + .body{margin-top:18px} .d3 .case .sec .body b{color:var(--ink);font-weight:500} /* Pull quote — handwritten Caveat, tilted */ .d3 .case .pull{max-width:1100px;margin:0 auto;padding:32px 24px 16px;display:grid;grid-template-columns:1fr 2fr;gap:48px;align-items:start} .d3 .case .pull .label{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase;padding-top:14px} .d3 .case .pull .q{font-family:'Caveat',cursive;font-size:48px;line-height:1.15;color:var(--ink);font-weight:500; transform:rotate(-1.5deg);transform-origin:0 50%;text-wrap:balance} .d3 .case .pull .q b{font-weight:700} /* Image figure */ .d3 .case .figure{max-width:1240px;margin:32px auto 0;padding:0 24px} .d3 .case .figure .frame{width:100%;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,#f3f4f7 0%,#e8eaef 100%);position:relative;display:flex;align-items:center;justify-content:center} .d3 .case .figure .frame.has-img{background:none} .d3 .case .figure .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:20px} /* dashed border only appears on empty placeholder frames, never over real images */ .d3 .case .figure .frame:not(.has-img)::after{content:"";position:absolute;inset:14px;border:1px dashed #c8ccd4;border-radius:12px;pointer-events:none} .d3 .case .figure .frame .ph{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;color:#9aa0ad;padding:60px 0} .d3 .case .figure .frame .ph svg{width:40px;height:40px;stroke:currentColor;opacity:.7} .d3 .case .figure .frame .ph .lbl{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.75} .d3 .case .figure .cap{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--mute);letter-spacing:.02em;margin-top:14px;text-align:center} .d3 .case .figure.tall .frame{aspect-ratio:16/10} .d3 .case .figure.wide .frame{aspect-ratio:16/7} .d3 .case .figRow{max-width:1240px;margin:32px auto 0;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:18px} .d3 .case .figRow .figure{margin:0;padding:0} .d3 .case .figRow .frame{aspect-ratio:4/3} /* Solution highlights — gray full-bleed */ .d3 .case .highlights{background:#f5f5f7;margin:80px 0 0;padding:88px 0 96px} .d3 .case .highlights .inner{max-width:1100px;margin:0 auto;padding:0 24px} .d3 .case .highlights .head{margin-bottom:48px} .d3 .case .highlights .head .num{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;display:block} .d3 .case .highlights .head h2{font-size:52px;line-height:1.05;letter-spacing:-0.035em;font-weight:600;margin:0;text-wrap:balance;max-width:780px} .d3 .case .highlights .head h2 .quiet{color:var(--mute);font-weight:300} .d3 .case .highlights .head .shIntro{font-size:18px;line-height:1.6;color:var(--sub);margin:20px 0 0;max-width:620px} .d3 .case .highlights .head .shIntro b{color:var(--ink);font-weight:500} .d3 .case .highlights .grid{display:grid;grid-template-columns:1fr;gap:22px} .d3 .case .highlights .h{display:grid;grid-template-columns:minmax(0,520px) 1fr;gap:48px;align-items:center; background:#fff;border-radius:20px;padding:32px;border:1px solid var(--rule)} .d3 .case .highlights .h:nth-child(even){grid-template-columns:1fr minmax(0,520px)} .d3 .case .highlights .h:nth-child(even) .text{order:1} .d3 .case .highlights .h:nth-child(even) .frameBox{order:2} .d3 .case .highlights .h .frameBox{aspect-ratio:4/3;border-radius:14px;overflow:hidden; background:linear-gradient(135deg,#f0f2f5 0%,#dee2e8 100%);position:relative; display:flex;align-items:center;justify-content:center} .d3 .case .highlights .h .frameBox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .d3 .case .highlights .h .frameBox:not(.has-img)::after{content:"";position:absolute;inset:12px;border:1px dashed #c0c5cd;border-radius:10px;pointer-events:none} .d3 .case .highlights .h .frameBox .ph{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;color:#8c93a1} .d3 .case .highlights .h .frameBox .ph svg{width:36px;height:36px;stroke:currentColor;opacity:.7} .d3 .case .highlights .h .frameBox .ph .lbl{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.75} .d3 .case .highlights .h .text .n{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;display:block} .d3 .case .highlights .h .text h3{font-size:32px;line-height:1.1;letter-spacing:-0.025em;font-weight:600;margin:0 0 14px;text-wrap:balance;color:var(--ink)} .d3 .case .highlights .h .text p{font-size:16px;line-height:1.55;color:var(--sub);margin:0;text-wrap:pretty} /* Outcomes stats — black full-bleed */ .d3 .case .outcomes{background:var(--ink);color:#fff;padding:96px 0;margin:0;overflow-x:clip} .d3 .case .outcomes .inner{max-width:1200px;margin:0 auto;padding:0 24px} .d3 .case .outcomes .head{margin-bottom:56px;display:flex;justify-content:space-between;align-items:end;gap:48px;flex-wrap:wrap} .d3 .case .outcomes .head .num{font-family:'IBM Plex Mono',monospace;font-size:11px;color:rgba(255,255,255,.55);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;display:block} .d3 .case .outcomes .head h2{font-size:56px;line-height:1.05;letter-spacing:-0.035em;font-weight:600;margin:0;text-wrap:balance;max-width:760px} .d3 .case .outcomes .head h2 .quiet{color:rgba(255,255,255,.55);font-weight:300} .d3 .case .outcomes .head .sub{font-size:16px;color:rgba(255,255,255,.7);max-width:340px;line-height:1.45;margin:0} .d3 .case .outcomes .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px} .d3 .case .outcomes .stat{padding:32px 28px;background:rgba(255,255,255,.06);border-radius:18px;display:flex;flex-direction:column;gap:10px;border:1px solid rgba(255,255,255,.08);min-width:0} .d3 .case .outcomes .stat .k{font-family:'IBM Plex Mono',monospace;font-size:11px;color:rgba(255,255,255,.6);letter-spacing:.08em;text-transform:uppercase} .d3 .case .outcomes .stat .v{font-size:clamp(40px,5vw,64px);font-weight:600;letter-spacing:-0.04em;line-height:1;color:#fff;font-variant-numeric:tabular-nums} .d3 .case .outcomes .stat .v .unit{font-size:36px;font-weight:500;color:rgba(255,255,255,.65);letter-spacing:-0.02em} .d3 .case .outcomes .stat .desc{font-size:13px;color:rgba(255,255,255,.7);line-height:1.45;margin-top:6px} /* Reflection */ .d3 .case .reflect{max-width:1100px;margin:0 auto;padding:96px 24px 64px} .d3 .case .reflect .num{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px;display:block} .d3 .case .reflect h2{font-size:48px;line-height:1.05;letter-spacing:-0.035em;font-weight:600;margin:0 0 28px;text-wrap:balance;max-width:780px} .d3 .case .reflect h2 .quiet{color:var(--mute);font-weight:300} .d3 .case .reflect .body{font-size:19px;line-height:1.6;color:var(--sub);max-width:720px;margin:0} .d3 .case .reflect .body + .body{margin-top:18px} .d3 .case .reflect .body b{color:var(--ink);font-weight:500} /* Next project — large clickable card */ .d3 .case .next{max-width:1240px;margin:0 auto 80px;padding:0 24px} .d3 .case .next a{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0; background:#f5f5f7;border-radius:24px;overflow:hidden;text-decoration:none;color:inherit; transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease;min-height:380px} .d3 .case .next a:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(0,0,0,.06)} .d3 .case .next .copy{padding:56px 48px;display:flex;flex-direction:column;justify-content:center;gap:14px} .d3 .case .next .copy .k{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase} .d3 .case .next .copy h3{font-size:44px;line-height:1.05;letter-spacing:-0.03em;font-weight:600;margin:0;text-wrap:balance;color:var(--ink)} .d3 .case .next .copy .meta{font-size:14px;color:var(--mute);letter-spacing:-0.005em;margin-top:8px} .d3 .case .next .copy .cta{display:inline-flex;align-items:center;gap:8px;color:var(--teal);font-size:16px;font-weight:500;margin-top:16px;letter-spacing:-0.01em} .d3 .case .next .copy .cta .arr{transition:transform .25s ease} .d3 .case .next a:hover .copy .cta .arr{transform:translateX(4px)} .d3 .case .next .frameBox{background:linear-gradient(135deg,#e0e4eb 0%,#bcc4d0 100%);position:relative; display:flex;align-items:center;justify-content:center;min-height:300px} .d3 .case .next .frameBox:not(.has-img)::after{content:"";position:absolute;inset:18px;border:1px dashed rgba(255,255,255,.6);border-radius:14px;pointer-events:none} .d3 .case .next .frameBox .ph{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(255,255,255,.85)} .d3 .case .next .frameBox .ph svg{width:40px;height:40px;stroke:currentColor;opacity:.85} .d3 .case .next .frameBox .ph .lbl{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.85} /* AI fun projects — Work-page subsection (slightly tighter rhythm than the main grid) */ .d3 .wGridHead.aiHead{padding-top:64px;border-top:1px solid var(--rule);margin-top:8px;align-items:end;flex-wrap:wrap;row-gap:14px} .d3 .wGridHead.aiHead h3{font-size:40px} .d3 .wGridHead.aiHead .aiSub{font-size:14px;color:var(--sub);max-width:380px;line-height:1.5;letter-spacing:-0.005em} .d3 .wGrid.aiGrid{padding-bottom:96px} .d3 .wGrid.aiGrid .wCard{min-height:520px} /* Footer Connect arrows — match the back-to-top arrow's intent: visible, on-brand */ .d3 .foot .col a .ext{font-size:12px;color:var(--mute);margin-left:6px;display:inline-block;transition:transform .2s ease,color .15s; font-variant-emoji:text;-webkit-text-stroke:0;speak:none} .d3 .foot .col a:hover .ext{color:var(--teal);transform:translate(2px,-2px)} /* Back-to-top arrow — also force glyph */ .d3 .foot .bot .top-link{font-variant-emoji:text} /* ═══════════════════════════════════════════════════ ABOUT PAGE (page-about.php) ═══════════════════════════════════════════════════ */ .d3 .aboutHero{max-width:1200px;margin:0 auto;padding:64px 24px 32px;display:grid;grid-template-columns:minmax(0,460px) 1fr;gap:64px;align-items:start} .d3 .aboutHero .photoCol{position:sticky;top:24px;min-width:0} .d3 .aboutHero .photo{aspect-ratio:4/5;border-radius:8px;background-color:#efeee8;background-size:cover;background-position:center;overflow:hidden;position:relative} .d3 .aboutHero .photo.placeholder{background-image:repeating-linear-gradient(135deg,#f3f1ea 0 18px,#eae8df 18px 36px);display:flex;align-items:center;justify-content:center} .d3 .aboutHero .photo.placeholder::after{content:"";position:absolute;inset:18px;border:1px dashed #c7c4b8;border-radius:6px;pointer-events:none} .d3 .aboutHero .photo.placeholder .ph{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;color:#8d8a7d;text-align:center} .d3 .aboutHero .photo.placeholder .ph svg{width:36px;height:36px;stroke:currentColor;opacity:.7} .d3 .aboutHero .photo.placeholder .ph .lbl{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.75} .d3 .aboutHero .textCol{padding-top:8px;min-width:0} .d3 .aboutHero h1{font-size:clamp(56px,10vw,140px);line-height:0.95;letter-spacing:-0.045em;font-weight:500;margin:0 0 32px;text-wrap:balance} .d3 .aboutHero h1 .quiet{color:var(--mute);font-weight:300} .d3 .aboutHero .bio{font-size:17px;line-height:1.6;color:var(--sub);max-width:620px} .d3 .aboutHero .bio p{margin:0 0 18px} .d3 .aboutHero .bio p:last-child{margin-bottom:0} .d3 .aboutHero .bio b, .d3 .aboutHero .bio strong{color:var(--ink);font-weight:600} /* MY NUMBERS — section heading + 2×2 stat grid */ .d3 .myNumbers{max-width:1100px;margin:80px auto 0;padding:96px 24px 32px;border-top:1px solid var(--rule)} .d3 .myNumbers .head{margin-bottom:48px} .d3 .myNumbers .head h2{font-size:48px;font-weight:600;letter-spacing:-0.035em;line-height:1;margin:0;text-wrap:balance} .d3 .myNumbers .head h2 .quiet{color:var(--mute);font-weight:300} .d3 .myNumbers .grid{display:grid;grid-template-columns:1fr 1fr;gap:64px 80px} .d3 .myNumbers .stat{display:flex;flex-direction:column;gap:14px;min-width:0} .d3 .myNumbers .stat .num{font-family:'Geist',sans-serif;font-size:clamp(72px,12vw,128px);line-height:0.95;font-weight:600;letter-spacing:-0.04em;color:var(--ink);font-variant-numeric:tabular-nums} .d3 .myNumbers .stat .num em{font-style:normal} .d3 .myNumbers .stat .num .suffix{color:var(--mute);font-weight:500;margin-left:2px} .d3 .myNumbers .stat .lbl{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink);letter-spacing:.08em;text-transform:uppercase;font-weight:500} /* Tighten timeline above first big section break on the about page */ .d3 .aboutHero + .myNumbers{margin-top:32px} @media (max-width:860px){ .d3 .aboutHero{grid-template-columns:1fr;gap:32px;padding-top:32px} .d3 .aboutHero .photoCol{position:static;max-width:420px} .d3 .aboutHero h1{font-size:clamp(56px,14vw,80px);margin-bottom:24px} .d3 .myNumbers .head h2{font-size:36px} .d3 .myNumbers .grid{gap:40px 32px} .d3 .myNumbers .stat .num{font-size:clamp(64px,18vw,88px)} } /* ═══ RESPONSIVE — prevent ALL horizontal overflow ═══════════ All multi-column fixed layouts collapse to single column below 768px so nothing ever bleeds past the viewport. ════════════════════════════════════════════════════════════ */ @media(max-width:768px){ /* Hero */ .d3 .hero h1{font-size:clamp(48px,12vw,88px)} .d3 .hero .photoWrap{min-height:500px} .d3 .trio{height:500px} /* Homepage grids */ .d3 .timeline .stops{grid-template-columns:1fr 1fr} .d3 .speaking .stats{grid-template-columns:1fr 1fr} .d3 .about .values{grid-template-columns:1fr} .d3 .principlesSection .inner{grid-template-columns:1fr;gap:40px} .d3 .foot .top{grid-template-columns:1fr 1fr;gap:32px} .d3 .selWork .row{grid-template-columns:1fr 44px;gap:12px} .d3 .selWork .row .title{grid-column:1} .d3 .selWork .row .cat,.d3 .selWork .row .meta{display:none} /* Work grid */ .d3 .wGrid{grid-template-columns:1fr} .d3 .case .next a{grid-template-columns:1fr} .d3 .case .highlights .h, .d3 .case .highlights .h:nth-child(even){grid-template-columns:1fr} .d3 .case .highlights .h:nth-child(even) .text{order:0} .d3 .case .highlights .h:nth-child(even) .frameBox{order:1} .d3 .case .figRow{grid-template-columns:1fr} .d3 .case .outcomes .grid{grid-template-columns:1fr 1fr} .d3 .case .glance{grid-template-columns:1fr 1fr} .d3 .case .pull{grid-template-columns:1fr} .d3 .case .pull .label{display:none} .d3 .case .cHero h1{font-size:clamp(40px,9vw,88px)} } @media(max-width:480px){ .d3 .timeline .stops{grid-template-columns:1fr} .d3 .speaking .stats{grid-template-columns:1fr 1fr} .d3 .foot .top{grid-template-columns:1fr} .d3 .case .outcomes .grid{grid-template-columns:1fr} .d3 .case .glance{grid-template-columns:1fr} } /* ── Password protection form ──────────────────────────────── */ .d3 .post-password-form{margin:0} .d3 .post-password-form p{margin:0 0 12px;font-size:15px;color:var(--sub)} .d3 .post-password-form label{display:block;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:8px} .d3 .post-password-form input[type="password"]{width:100%;max-width:360px;height:44px;border:1px solid var(--rule);border-radius:10px;padding:0 14px;font-size:15px;outline:none;transition:border-color .15s;background:var(--paper);color:var(--ink)} .d3 .post-password-form input[type="password"]:focus{border-color:var(--ink)} .d3 .post-password-form input[type="submit"]{margin-top:12px;height:44px;padding:0 24px;background:var(--ink);color:var(--paper);border:none;border-radius:999px;font-size:15px;font-weight:500;cursor:pointer;transition:opacity .15s} .d3 .post-password-form input[type="submit"]:hover{opacity:.82}