/* ============================================================ TOKENS — extracted verbatim from index.html's :root block ============================================================ */ :root{ /* DAWN — kept in sync with assets/style.css's :root (this file duplicates rather than shares it, see the comment above), same brighter mockup palette in place of the old darker originals. */ --rust:#E8502E;--rust-d:#B8351A; --saff:#F0923A;--saff-d:#B85F16; --gold:#F0B429;--gold-d:#A9760A; --teal:#125A51;--plum:#5C2D6E;--cream:#FFFDF8; --cream2:#F2EAD3;--ink:#151109;--ink2:#111008; --green:#50A05F;--dust:rgba(245,237,216,.58); /* Phase 4 tokens — same scale as assets/style.css, see that file's comment for the reasoning. Kept in sync deliberately (both pages duplicate the color tokens the same way already). */ --display-xl:clamp(3.4rem,3rem + 4vw,7.5rem); --display-lg:clamp(2.6rem,2.2rem + 3vw,5.2rem); --display-md:clamp(2rem,1.7rem + 2vw,3.4rem); --display-sm:clamp(1.5rem,1.35rem + 1vw,2.1rem); --eyebrow-tracking:.28em; --space-1:.5rem;--space-2:1rem;--space-3:1.75rem;--space-4:3rem; --space-5:5rem;--space-6:8rem;--space-7:12rem; --ease-cinema:cubic-bezier(.16,1,.3,1); --ease-snap:cubic-bezier(.4,0,.2,1); --ease-out-soft:cubic-bezier(.18,.85,.28,1); } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} } *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--cream);color:var(--ink);font-family:'Manrope',sans-serif;overflow-x:hidden;font-size:16px} /* DAWN — same shared whole-page wash as the main site (assets/style.css) */ .bg-wash{position:fixed;inset:0;z-index:-2;background:var(--cream);overflow:hidden;pointer-events:none} .bg-wash i{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.4;font-style:normal} .bg-wash .w1{width:60vw;height:60vw;left:-18%;top:-10%;background:radial-gradient(circle,var(--rust),transparent 70%)} .bg-wash .w2{width:55vw;height:55vw;right:-16%;top:20%;background:radial-gradient(circle,var(--gold),transparent 70%)} .bg-wash .w3{width:50vw;height:50vw;left:10%;bottom:-20%;background:radial-gradient(circle,var(--saff),transparent 70%)} em{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400} /* GRAIN — same technique as the homepage */ #grain{position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.028; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px} /* SCROLL REVEAL — same .rv/.on + stagger system as the homepage */ .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease} .rv.on{opacity:1;transform:none} .rv.d1.on{transition-delay:.06s} .rv.d2.on{transition-delay:.14s} .rv.d3.on{transition-delay:.22s} ::selection{background:var(--saff);color:var(--ink)} /* ============================================================ NAV + FOOTER — identical markup/classes to every other page, so this is pixel-for-pixel the same nav/footer as Home, About, Services etc. ============================================================ */ /* DAWN — every portfolio page now opens on a light section (the old transparent-over-dark-hero start made cream nav text unreadable once the page itself went light), so the nav is solid from the first frame instead of waiting for .stuck at 60px scroll. */ /* DAWN — same translucent glass nav as the main site now (assets/ style.css), replacing the old solid-dark bar. */ nav.pf-nav{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;justify-content:space-between; align-items:center;padding:14px 32px;transition:all .5s; background:rgba(255,253,248,.6);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6); border-bottom:1px solid rgba(255,255,255,.5);box-shadow:0 1px 0 rgba(255,255,255,.7)} nav.pf-nav.stuck{padding:11px 32px;background:rgba(255,253,248,.8);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);border-bottom:1px solid rgba(255,255,255,.65)} .nlogo{display:flex;align-items:center;gap:10px;text-decoration:none} .nlogo-img{height:32px;width:auto} .nlogo-text{font-family:'Manrope',sans-serif;font-weight:800;font-size:18px;letter-spacing:-.01em; text-transform:none;color:var(--ink);line-height:1.2} .nlogo-sub{font-family:'Manrope',sans-serif;font-size:10.5px;letter-spacing:.06em; text-transform:uppercase;color:rgba(13,11,8,.5);display:block;margin-top:1px} .nav-right{display:flex;align-items:center;gap:2.5rem} .nav-links{display:flex;align-items:center;gap:26px} .nav-links a{position:relative;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:rgba(13,11,8,.65); text-decoration:none;transition:color .3s} .nav-links a:hover,.nav-links a.active{color:var(--rust)} .nav-links a:not(.nav-links-cta)::after{ content:none; } .nav-links a:not(.nav-links-cta):hover::after{transform:scaleX(1)} .nav-links a.active::after{transform:scaleX(1);background:var(--rust)} .nav-links-cta{display:none} .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:26px;height:26px; background:none;border:none;cursor:pointer;padding:0} .nav-toggle span{display:block;width:100%;height:2px;background:var(--ink);transition:transform .3s,opacity .3s} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .ncta{font-size:13.5px;font-weight:700;letter-spacing:0;text-transform:none;color:#fff;text-decoration:none; padding:10px 20px;border:none;border-radius:999px;transition:all .35s; background:linear-gradient(135deg,var(--rust),var(--saff));box-shadow:0 8px 20px -8px rgba(232,80,46,.55)} .ncta:hover{transform:translateY(-1px);box-shadow:0 14px 28px -10px rgba(232,80,46,.6)} /* Simple in-page "go back" on Brand Pages — returns to wherever the visitor actually came from (a filtered grid, the landing page). */ .pf-back{display:inline-flex;align-items:center;gap:.5rem;margin:1.6rem 0 0 4rem; font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(13,11,8,.5); background:none;border:none;cursor:pointer;font-family:'Manrope',sans-serif;transition:color .25s} .pf-back:hover{color:var(--rust)} .pf-back .arr{transition:transform .25s} .pf-back:hover .arr{transform:translateX(-3px)} /* .viewall/.viewall-dark — used by the case-study template's "Back to Portfolio" link (case-hd) but never actually defined in this stylesheet (assets/style.css has it, but case pages don't load that file), so it was rendering as a bare unstyled browser link. Same light-page treatment as the main site's own .viewall. */ .viewall{display:inline-flex;align-items:center;gap:.8rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:1.1rem 2.4rem;border:1px solid rgba(13,11,8,.18);transition:all .35s;border-radius:999px} .viewall:hover{background:var(--rust);border-color:var(--rust);color:var(--cream)} .viewall-sm{padding:.7rem 1.6rem;font-size:.66rem} .viewall-dark{color:var(--ink);border-color:rgba(13,11,8,.18)} .viewall-dark:hover{background:var(--rust);border-color:var(--rust);color:var(--cream)} footer{background:transparent;padding:2.5rem 5rem;display:flex;justify-content:space-between; align-items:center;border-top:1px solid rgba(13,11,8,.08);position:relative;z-index:1} .ft-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none} .ft-logo{height:32px;width:auto} .ft-wordmark{font-family:'Manrope',sans-serif;font-weight:800;font-size:1rem;color:var(--ink)} .ft-copy{font-size:.8rem;color:rgba(13,11,8,.5)} .ft-links{display:flex;gap:2rem} .ft-links a{font-size:.8rem;color:rgba(13,11,8,.55); text-decoration:none;transition:color .3s} .ft-links a:hover{color:var(--rust)} #app{min-height:70vh} @media(max-width:860px){ .ncta{display:none} .nav-toggle{display:flex} .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch; gap:0;background:rgba(255,253,248,.92);backdrop-filter:blur(20px) saturate(1.6);border-top:1px solid rgba(255,255,255,.6); padding:.5rem 1.5rem 1.5rem} .nav-links.open{display:flex} .nav-links a{width:100%;padding:1.1rem 0;border-bottom:1px solid rgba(13,11,8,.08);font-size:.8rem;letter-spacing:.08em} .nav-links-cta{display:block;color:var(--rust)} .pf-back{margin-left:1.4rem} } /* ============================================================ PORTFOLIO LANDING — hero Identical markup/classes to the site's own Portfolio hero (.workhd / .slbl / .workh / .worksub) — not a bespoke treatment, the same one. ============================================================ */ .workhd{padding:9rem 5rem 3rem;position:relative;z-index:1} .workh{font-family:'Manrope',sans-serif;font-size:clamp(2.2rem,3.6vw,3.4rem);font-weight:800; letter-spacing:-.01em;color:var(--ink);line-height:1.15} .workh em{font-style:italic;font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--rust)} .worksub{font-size:.85rem;color:rgba(13,11,8,.55);margin-top:1.2rem} .worksub em{color:var(--rust);font-style:normal} /* Section headers reused across landing/brand pages */ .pf-section-hd{padding:0 5rem;display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem; flex-wrap:wrap;margin:5rem 0 2rem} .pf-section-label{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(13,11,8,.45);display:flex;align-items:center;gap:.9rem} .pf-section-label::before{content:'';width:1.4rem;height:1px;background:currentColor;display:block;opacity:.55} .pf-section-title{font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:-.01em;font-size:clamp(1.7rem,2.8vw,2.4rem);margin-top:.4rem;line-height:1.2;color:var(--ink)} /* ============================================================ FEATURED GRID — large, image/video-first cards ============================================================ */ /* Featured work — sharp corners (no border-radius: a template gives every card a rounded rect; an art-directed one doesn't need to), a slower image-scale on hover for weight/physicality rather than a snappy UI hover, and meta type set big enough that a project's name is the thing your eye lands on, not the smallest line in the card. */ .pf-featured-grid{padding:0 5rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem} .pf-feat-card{position:relative;display:block;width:100%;border:none;padding:0;text-align:left;font:inherit; text-decoration:none;color:inherit;overflow:hidden;aspect-ratio:4/3;background:#1a1611;cursor:pointer; border-radius:18px;box-shadow:0 18px 44px -26px rgba(21,17,9,.35)} .pf-feat-card:nth-child(3n+1){grid-column:span 2;aspect-ratio:16/9} .pf-feat-visual{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg, var(--tint,#333) 0%, #0D0B08 130%);overflow:hidden} .pf-thumb-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focal,50% 22%); transition:transform .7s var(--ease-cinema)} .pf-feat-card:hover .pf-thumb-media{transform:scale(1.045)} .pf-feat-play{width:56px;height:56px;border-radius:50%;border:1px solid rgba(245,237,216,.35); display:flex;align-items:center;justify-content:center;color:rgba(245,237,216,.7);font-size:.85rem; transition:border-color .35s,color .35s,transform .45s var(--ease-cinema);backdrop-filter:blur(6px)} .pf-feat-card:hover .pf-feat-play{border-color:var(--saff);color:var(--saff);transform:scale(1.1)} .pf-feat-scrim{position:absolute;inset:0;background:linear-gradient(0deg, rgba(13,11,8,.95) 0%, rgba(13,11,8,.2) 58%, transparent 78%); transition:background .4s} .pf-feat-meta{position:absolute;left:0;right:0;bottom:0;padding:2rem 2.1rem;transition:transform .5s var(--ease-cinema)} .pf-feat-card:hover .pf-feat-meta{transform:translateY(-4px)} .pf-feat-type{font-size:.62rem;letter-spacing:var(--eyebrow-tracking);text-transform:uppercase;color:var(--saff);margin-bottom:.6rem} .pf-feat-brand{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:1.1;transition:color .35s} .pf-feat-project{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.05rem;color:var(--dust);margin-top:.3rem} .pf-feat-card:hover .pf-feat-brand{color:var(--saff)} /* ============================================================ FILTER BAR — generated from real categories only ============================================================ */ .pf-filterbar{padding:0 5rem;display:flex;gap:.6rem;flex-wrap:wrap} .pf-chip{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(13,11,8,.6); background:rgba(255,255,255,.5);border:1px solid rgba(13,11,8,.14);padding:.6rem 1.15rem;border-radius:100px; cursor:pointer;transition:.25s;font-family:'Manrope',sans-serif} .pf-chip:hover{border-color:rgba(232,80,46,.5);color:var(--ink)} .pf-chip.active{background:var(--rust);border-color:var(--rust);color:#fff;font-weight:600} /* ============================================================ LIBRARY GRID — fast, visual, uniform-ish cards ============================================================ */ .pf-library-grid{padding:0 5rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.5rem} .pf-lib-card{position:relative;border:none;text-align:left;padding:0;background:#1a1611; overflow:hidden;aspect-ratio:3/4;cursor:pointer;color:inherit;font-family:inherit; border-radius:16px;box-shadow:0 14px 34px -22px rgba(21,17,9,.32)} .pf-lib-visual{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:linear-gradient(150deg, var(--tint,#333) 0%, #0D0B08 140%);overflow:hidden} .pf-lib-visual .pf-thumb-media{transition:transform .7s var(--ease-cinema)} .pf-lib-card:hover .pf-lib-visual .pf-thumb-media{transform:scale(1.05)} .pf-lib-play{width:38px;height:38px;border-radius:50%;border:1px solid rgba(245,237,216,.3); display:flex;align-items:center;justify-content:center;color:rgba(245,237,216,.65);font-size:.68rem; transition:border-color .3s,color .3s,transform .4s var(--ease-cinema)} .pf-lib-card:hover .pf-lib-play{border-color:var(--saff);color:var(--saff);transform:scale(1.08)} .pf-lib-scrim{position:absolute;inset:0;background:linear-gradient(0deg, rgba(13,11,8,.95) 0%, transparent 62%)} .pf-lib-meta{position:absolute;left:0;right:0;bottom:0;padding:1.3rem 1.4rem} .pf-lib-type{font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--saff);margin-bottom:.4rem} .pf-lib-brand{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:1.4rem;transition:color .3s} .pf-lib-card:hover .pf-lib-brand{color:var(--saff)} .pf-lib-project{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.86rem;color:var(--dust);margin-top:.2rem} .pf-lib-empty{padding:4rem 3rem;text-align:center;color:rgba(245,237,216,.35);font-family:'Cormorant Garamond',serif; font-style:italic;font-size:1.1rem} /* ============================================================ CASE STUDY PAGE — a real opening, not a boxed modal reused verbatim. Full-bleed media with the brand/project set directly into the frame (same "title integrated into the composition" idea as the homepage hero's now-viewing caption), scrim'd for legibility, then the existing #peditorial/#pthinking/#partefact/#poutcome sections carry the narrative below in the normal measure. .case-hero-media strips .pv-single's own aspect-ratio/max-width so whatever media component rendered inside it (self-hosted video, or a KKGMedia facade for a future YouTube/Instagram-sourced project) fills the hero exactly the same way regardless of source. */ .case-hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); height:min(88vh,920px);min-height:460px;overflow:hidden;background:#050403} .case-hero-media{position:absolute;inset:0} .case-hero-media .pv-single,.case-hero-media .pv-row,.case-hero-media .kkg-media-facade{ width:100%;height:100%;max-width:none;aspect-ratio:auto; } .case-hero-media .pv-single video,.case-hero-media .pv-single img, .case-hero-media .kkg-media-poster{object-fit:cover;object-position:var(--focal,50% 30%)} .case-hero-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,4,3,.92) 0%,rgba(5,4,3,.25) 45%,rgba(5,4,3,.1) 70%,transparent 100%);pointer-events:none} .case-hero-overlay{position:absolute;left:0;right:0;bottom:0;padding:0 clamp(1.5rem,5vw,4rem) clamp(2rem,5vw,3.5rem);max-width:1100px} /* Hero title fades in on load, not on scroll — it's above the fold from the first frame, so a scroll-triggered reveal (the .rv/.on system the rest of the page below uses, via portfolio.js's IntersectionObserver) would never fire without that script, which these standalone case pages don't load. Plain CSS animation instead — no JS dependency. */ @keyframes caseIn{to{opacity:1;transform:none}} .case-in{opacity:0;transform:translateY(12px);animation:caseIn .8s var(--ease-out-soft) .15s forwards} .case-in-d1{animation-delay:.28s} .case-in-d2{animation-delay:.4s} .case-eyebrow{font-size:.68rem;letter-spacing:var(--eyebrow-tracking);text-transform:uppercase;color:rgba(245,237,216,.6);margin-bottom:.9rem} .case-hero-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:var(--display-xl);line-height:.98;color:var(--cream)} .case-hero-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.1rem,2vw,1.5rem);color:rgba(245,237,216,.72);margin-top:.7rem} /* Vertical-source projects (a phone-shot reel, say) shouldn't get force- cropped into a wide letterbox — shorter frame, media kept at its own aspect and centered rather than covering the full width. */ .case-hero-vertical{height:min(78vh,780px)} .case-hero-vertical .case-hero-media{display:flex;align-items:center;justify-content:center;background:#050403} .case-hero-vertical .case-hero-media .pv-single{width:auto;height:100%;aspect-ratio:9/16} .case-hero-vertical .case-hero-media .pv-single video,.case-hero-vertical .case-hero-media .pv-single img{object-fit:contain} .case-hero-vertical .case-hero-overlay{max-width:none;text-align:center;left:50%;right:auto;transform:translateX(-50%);width:100%} .case-body{max-width:920px;margin:0 auto;padding:0 1.5rem} .case-hd{padding:2.5rem 0} #peditorial{border-top:none;padding-top:var(--space-4)} @media(max-width:700px){ .case-hero{height:72vh;min-height:420px} .case-hero-vertical{height:70vh} } /* DAWN — case pages no longer force every video into one full-bleed cinematic band with title text overlaid on it (.case-hero above, kept only for reference/older markup): a vertical video forced into that wide band either got cropped hard or sat tiny in a sea of letterboxing, and a multi-video project had nowhere sane to put the others. Replaced with the same pattern the in-page popups already use successfully — the video(s) at their own natural size up top, brand/project name as plain text below rather than laid over them. */ /* Was 2.5rem — well short of the fixed nav's own ~77px height, so the video's top edge sat partly behind it (and, once a visitor opened the browser's native fullscreen from the video controls, the nav stayed painted on top of that too, right over the fullscreen button). Clears the nav with room to spare. */ .case-mediawrap{max-width:920px;margin:7rem auto 0;padding:0 1.5rem} .case-heading{max-width:920px;margin:0 auto;padding:2rem 1.5rem 0} .case-heading .case-eyebrow{margin-bottom:.8rem} .case-heading-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(2.2rem,4.5vw,3.4rem);color:var(--ink);line-height:1.15} .case-heading-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.05rem,1.8vw,1.3rem);color:rgba(13,11,8,.6);margin-top:.5rem} /* ============================================================ BRAND PAGE ============================================================ */ .bp-header{padding:9rem 5rem 3rem;max-width:900px} .bp-eyebrow{font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:var(--rust);margin-bottom:1rem;display:flex;align-items:center;gap:.9rem} .bp-eyebrow::before{content:'';width:1.4rem;height:1px;background:currentColor;display:block;opacity:.55} .bp-name{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(2.2rem,5vw,3.6rem);color:var(--ink)} .bp-summary{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.2rem;color:rgba(13,11,8,.6);margin-top:1rem} .bp-group{margin-bottom:1rem} .bp-group-label{padding:0 5rem;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase; color:rgba(13,11,8,.45);margin:3rem 0 1.2rem} /* ============================================================ RELATED WORK ============================================================ */ .pf-related{max-width:1100px;margin:0 auto;padding:4.5rem 3rem;border-top:1px solid rgba(13,11,8,.1)} .pf-related-label{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(13,11,8,.45);margin-bottom:1.6rem} .pf-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem} /* ============================================================ OUTCOMES — identical "What Changes" section used elsewhere on the site, placed after the work on the Portfolio landing page. ============================================================ */ /* DAWN — was a solid plum fill; plum now lives in the glow wash and the hover-fill accents instead of painting the whole section. */ /* Was padding-top:10rem + margin-top:6rem — 256px of empty gradient before anything in this section actually appeared, a gap that read as intentional "dramatic pause" on the old dark theme but as a layout gap on Dawn's light one, right after the video grid ends. */ #changes{background:transparent;padding:5rem 5rem;position:relative;overflow:hidden;margin-top:1rem} .ch-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(92,45,110,.16),transparent 60%)} .chwrap{position:relative;z-index:2} .chh{font-family:'Manrope',sans-serif;font-size:clamp(2.1rem,3.6vw,3.2rem);font-weight:800;letter-spacing:-.01em;color:var(--ink); margin-bottom:5.9rem;line-height:1.12} .chh em{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;color:var(--plum)} .ch-cols{display:grid;grid-template-columns:repeat(3,1fr)} .ch-col{padding:3.5rem;border-right:1px solid rgba(13,11,8,.1);position:relative;overflow:hidden} .ch-col:last-child{border-right:none} .ch-col::before{content:'';position:absolute;bottom:0;left:0;right:0;height:0;transition:height .55s cubic-bezier(.16,1,.3,1)} .ch-col:nth-child(1)::before{background:rgba(232,80,46,.12)} .ch-col:nth-child(2)::before{background:rgba(232,131,42,.12)} .ch-col:nth-child(3)::before{background:rgba(80,160,95,.12)} .ch-col:hover::before{height:100%} .ch-icon{display:block;font-size:1.8rem;margin-bottom:1.4rem;position:relative;z-index:1} .ch-head{font-family:'Manrope',sans-serif;font-size:clamp(2rem,3.4vw,2.7rem);font-weight:800;letter-spacing:-.01em;color:var(--ink); line-height:1.2;margin-bottom:1.7rem;position:relative;z-index:1;transition:transform .3s} .ch-col:hover .ch-head{transform:translateY(-3px)} .ch-pts{list-style:none;display:flex;flex-direction:column;gap:.75rem;position:relative;z-index:1} .ch-pts li{font-size:.86rem;color:rgba(13,11,8,.68);line-height:1.65;display:flex;gap:.7rem} .ch-pts li::before{content:'—';opacity:.4;flex-shrink:0} /* ============================================================ WORK MODAL — Level 3, in-place, no route ============================================================ */ /* Identical markup/classes to the Home page's own "Behind the Frame" popup (#portal/#pbox) — same video treatment (no scrim, vertical-aware), same editorial/thinking/artefact/outcome layout. #wm-overlay/#wm-box are just this app's own ids for the same design. */ #wm-overlay{position:fixed;inset:0;z-index:8500;background:rgba(21,17,9,0);display:flex;align-items:center; justify-content:center;padding:2rem;pointer-events:none;transition:background .5s} #wm-overlay.open{background:rgba(21,17,9,.6);pointer-events:auto} /* Same bg-wash-in-a-box treatment as index.html's #pbox — see the comment there. Kept identical so the two popups read as one design. */ /* Fixed-pixel radii, not percentages — see index.html's #pbox for the full reasoning (kept in sync). */ #wm-box{position:relative;width:min(920px,94vw); background: radial-gradient(circle 380px at 0% 0%, rgba(232,80,46,.3), transparent 70%), radial-gradient(circle 360px at 100% 0%, rgba(240,180,41,.32), transparent 70%), radial-gradient(circle 340px at 0% 100%, rgba(240,146,58,.26), transparent 70%), radial-gradient(circle 340px at 100% 100%, rgba(18,90,81,.2), transparent 70%), rgba(255,253,248,.97); backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);border:1px solid rgba(255,255,255,.75);box-shadow:0 30px 80px rgba(21,17,9,.35); transform:scale(.9) translateY(16px);opacity:0;transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .55s; max-height:92vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(232,80,46,.3) transparent} #wm-overlay.open #wm-box{transform:none;opacity:1} /* Same fix as index.html's #pclose — a proper circular icon button sticky-pinned to #wm-box's own top-right corner (visible even once the box's own content scrolls) instead of faint text floating above the box, easy to miss and liable to land off-screen on mobile. */ #wm-close{ position:sticky;top:1rem;display:flex;margin:1rem 1rem 0 auto; width:40px;height:40px;align-items:center;justify-content:center; background:rgba(255,255,255,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid rgba(13,11,8,.1);border-radius:50%; color:var(--ink);font-size:1.05rem;line-height:1;cursor:pointer;z-index:20; transition:background .25s,transform .25s; } #wm-close:hover{background:#fff;transform:scale(1.08)} #wm-box #pvideo-area{max-width:none;margin:0} #wm-box #peditorial,#wm-box #pthinking,#wm-box #partefact,#wm-box #poutcome,#wm-box .pf-related,#wm-box .wm-nav{ max-width:none;padding-left:3rem;padding-right:3rem} #wm-box #peditorial{padding-top:2rem} #wm-box .wm-nav{padding-bottom:2.5rem} #pvideo-area{max-width:920px;margin:0 auto 3rem} .pv-single{width:100%;aspect-ratio:16/9;background:#070503;overflow:hidden} .pv-single.vertical{aspect-ratio:9/16;max-width:340px;margin:0 auto} .pv-single video,.pv-single img{width:100%;height:100%;display:block;object-fit:cover;object-position:var(--focal,50% 22%);background:#070503} .pv-single.vertical video,.pv-single.vertical img{object-fit:contain;object-position:center} .pv-row{display:flex;gap:2px;background:#070503} .pv-cell{flex:1 1 0;min-width:0;position:relative;overflow:hidden} /* Hero + prev/next — for a horizontal multi-video set (small side-by-side cells read as thumbnails, not something worth watching) and for 4+ vertical videos (the same case a wm-strip handles, but with an explicit, discoverable control instead of relying on the strip alone). Every candidate frame is pre-rendered as a .pv-slide and simply shown/ hidden — no re-render on click, so nothing needs to rebuild a video or third-party embed just to bring it back into view. */ .pv-hero{position:relative} /* 4+ vertical assets: a sliding 3-wide window over the full list (see portfolio.js's videoAreaHTML) — same .pv-row as the 2–3 case, just wrapped so the same .pv-nav buttons can overlay it. */ .pv-rowwrap{position:relative} .pv-rowwrap .pv-nav:disabled{opacity:.35;cursor:default} .pv-hero.vertical{max-width:340px;margin:0 auto} .pv-slide{display:none} .pv-slide.active{display:block} .pv-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%; background:rgba(255,255,255,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); border:1px solid rgba(13,11,8,.1);display:flex;align-items:center;justify-content:center; cursor:pointer;z-index:6;color:var(--ink);font-size:1.15rem;line-height:1;padding:0; transition:background .2s,transform .2s;box-shadow:0 6px 18px rgba(13,11,8,.18)} .pv-nav:hover{background:#fff;transform:translateY(-50%) scale(1.07)} .pv-nav.prev{left:.8rem} .pv-nav.next{right:.8rem} .pv-hero-count{position:absolute;right:.9rem;bottom:.9rem;z-index:6;font-family:'Manrope',sans-serif; font-size:.68rem;letter-spacing:.06em;color:#fff;background:rgba(13,11,8,.55);padding:.25rem .6rem;border-radius:20px} .pv-cell::before{content:'';display:block;padding-top:177.78%} .pv-cell video,.pv-cell img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:#070503} /* A YouTube/Instagram facade isn't a plain video/img tag, so the rule above never caught it — it kept sizing itself off its own aspect-ratio instead of filling the cell like everything else here, leaving the ::before spacer's box empty (and dark) above the actual facade. */ .pv-cell .kkg-media-facade{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;max-width:none;margin:0} .pv-cell .pv-label{position:absolute;left:0;right:0;bottom:0;padding:.6rem .6rem .5rem;font-family:'Manrope',sans-serif; font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(245,237,216,.75); background:linear-gradient(to top,rgba(0,0,0,.75),transparent);pointer-events:none} /* Secondary asset strip — shown only when a project has more assets than a pv-row can reasonably hold (kept from the portfolio's own modal; not part of the Home page reference since no case there ever had this many). */ /* DAWN — was a negative top margin meant to tuck this strip up under a .pv-single that always sat in normal document flow right above it. Now that a multi-video hero can be a .pv-hero (whose nav buttons and varying width sit differently), a negative margin pulled the strip up into the video itself instead of sitting cleanly below it — exactly the "video overlapping the files below" bug. Plain top margin instead. */ .wm-strip{display:flex;gap:.5rem;overflow-x:auto;max-width:920px;margin:1.2rem auto 3rem;padding:0 5rem} .wm-strip-item{flex:0 0 72px;height:50px;border-radius:4px;overflow:hidden;padding:0;cursor:pointer; background:#0D0B08;border:1px solid rgba(13,11,8,.15);transition:border-color .25s} .wm-strip-item.active{border-color:var(--saff)} .wm-strip-item:hover{border-color:rgba(232,131,42,.55)} .wm-strip-item video,.wm-strip-item img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none} /* #pimages / .pimg-label — see assets/style.css for the fuller comment. Images belonging to a project sit here, below the video(s), as small clickable thumbnails that open full-size in #imgLightbox, instead of being mixed into the main video area's own side-by-side/sliding layout. */ #pimages:empty{display:none} .pimg-label{max-width:920px;margin:1.2rem auto 0;padding:0 5rem;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(13,11,8,.5)} #imgLightbox{position:fixed;inset:0;z-index:8000;display:flex;align-items:center;justify-content:center; background:rgba(10,8,6,.92);opacity:0;pointer-events:none;transition:opacity .3s} #imgLightbox.open{opacity:1;pointer-events:auto} #imgLightbox img{max-width:90vw;max-height:90vh;border-radius:12px;box-shadow:0 40px 80px -20px rgba(0,0,0,.6);display:block} #imgLightboxClose{position:absolute;top:24px;right:24px;width:44px;height:44px;border-radius:50%; background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:18px; cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s} #imgLightboxClose:hover{background:rgba(255,255,255,.22)} /* DAWN — these same classes render two places: directly on a real case-study page and inside the #wm-box popup modal on the portfolio landing page. Both now share the one light/page reading below — the modal used to restore a dark cream-on-black theme here, but the whole site (popups included) reads light now. */ #peditorial{max-width:920px;margin:0 auto;padding:2rem 0;border-bottom:1px solid rgba(13,11,8,.08);position:relative;z-index:1} .pe-heading{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap} .pe-client{font-family:'Cormorant Garamond',serif;font-size:3rem;font-weight:300;color:var(--ink);line-height:1.25;padding-bottom:.08em} .pe-project{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-style:italic;color:rgba(13,11,8,.55);margin-top:.3rem;margin-bottom:1.5rem} .pe-story{font-family:'Cormorant Garamond',serif;font-size:1.22rem;font-weight:300;color:rgba(13,11,8,.7);line-height:1.8;max-width:580px} #pthinking{max-width:920px;margin:0 auto;padding:2.5rem 0;display:flex;gap:2rem;border-bottom:1px solid rgba(13,11,8,.08)} #pthinking>div{flex:1 1 0;min-width:0} .pt-label{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.65rem;display:flex;align-items:center;gap:.45rem} .pt-label.ka{color:rgba(232,80,46,.85)} .pt-label.kh{color:rgba(201,148,14,.85)} .pt-label.ga{color:rgba(60,140,75,.9)} .pt-dev{font-size:.95rem;font-family:serif} .pt-body{font-size:.92rem;line-height:1.7;color:rgba(13,11,8,.68)} #partefact{max-width:920px;margin:0 auto;padding:2.5rem 0;border-bottom:1px solid rgba(13,11,8,.08)} .pa-label{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(13,11,8,.5);margin-bottom:1.2rem} .pa-content{background:rgba(255,255,255,.5);border:1px solid rgba(13,11,8,.1);padding:1.8rem 2rem; font-family:'Cormorant Garamond',serif;font-size:1.12rem;font-style:italic;color:rgba(13,11,8,.68); line-height:1.8;position:relative;border-radius:12px} #poutcome{max-width:920px;margin:0 auto;padding:2rem 0 3rem} .po-label{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(45,120,60,.95);margin-bottom:.65rem;display:flex;align-items:center;gap:.5rem} .po-result{font-family:'Cormorant Garamond',serif;font-size:1.55rem;font-weight:300;color:var(--ink);line-height:1.4} .wm-nav{display:flex;justify-content:space-between;max-width:920px;margin:0 auto;padding-top:1.4rem;border-top:1px solid rgba(13,11,8,.08)} .wm-nav button{background:none;border:none;color:rgba(13,11,8,.55);font-size:.6rem;letter-spacing:.14em; text-transform:uppercase;cursor:pointer;font-family:'Manrope',sans-serif;transition:.25s} .wm-nav button:hover{color:var(--rust)} .wm-nav button:disabled{opacity:.25;cursor:default} .wm-nav button:disabled:hover{color:rgba(13,11,8,.55)} /* ============================================================ MOBILE ============================================================ */ @media(max-width:860px){ nav.pf-nav,nav.pf-nav.stuck{padding:1.2rem 1.5rem} .workhd,.pf-section-hd,.pf-featured-grid,.pf-filterbar,.pf-library-grid, .bp-header,.bp-group-label,#changes{ padding-left:1.5rem;padding-right:1.5rem} .pf-featured-grid{grid-template-columns:1fr} .pf-feat-card:nth-child(3n+1){grid-column:span 1;aspect-ratio:4/3} .ch-cols{grid-template-columns:1fr} .ch-col{border-right:none;border-bottom:1px solid rgba(13,11,8,.1);padding:2.5rem 0} .ch-col:last-child{border-bottom:none} #wm-overlay{padding:0} #wm-box{max-height:100vh;height:100%;border-radius:0} #pthinking{flex-direction:column;gap:1.6rem} #wm-box #peditorial,#wm-box #pthinking,#wm-box #partefact,#wm-box #poutcome,#wm-box .pf-related,#wm-box .wm-nav{ padding-left:1.5rem;padding-right:1.5rem} .pe-client{font-size:2.2rem} footer{flex-direction:column;gap:1.5rem;text-align:center;padding:2.5rem 1.5rem} } /* ═══════════════════════════════ KKGMedia — reusable video/YouTube/Instagram/image facade component (assets/media-embed.js). Poster-first; the real player (self-hosted