:root { --bg:#a1aea1; --bg-soft:#c7d0c5; --text:#142019; --muted:#46564a; --line:rgba(20,32,25,.22); --accent:#294b36; --space:clamp(1.5rem,4vw,5.5rem); --ease:cubic-bezier(.22,1,.36,1); }
* { box-sizing:border-box; } html { scroll-snap-type:y mandatory; scroll-behavior:smooth; background:var(--bg); } body { margin:0; overflow-x:hidden; color:var(--text); background:var(--bg); font-family:Arial, Helvetica, sans-serif; } button { font:inherit; color:inherit; } .slide { min-height:100vh; min-height:100svh; scroll-snap-align:start; scroll-snap-stop:always; position:relative; display:flex; align-items:center; overflow:hidden; isolation:isolate; background:radial-gradient(circle at 70% 20%,#1b261c 0,transparent 38%),var(--bg); } .slide::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.25; background:linear-gradient(120deg,transparent 0 48%,rgba(190,215,165,.05) 50%,transparent 52%); } .slide-content { width:100%; padding:clamp(5.25rem,10vh,8rem) var(--space); position:relative; z-index:2; } .wide-content { max-width:1600px; margin:auto; } .eyebrow { font-size:.63rem; letter-spacing:.22em; color:var(--accent); margin:0 0 1.25rem; } .display-title { font-size:clamp(3.7rem,8.5vw,9.5rem); line-height:.8; letter-spacing:-.07em; font-weight:600; margin:0; } .section-subtitle { color:var(--accent); font-size:clamp(.75rem,1.2vw,1rem); letter-spacing:.23em; margin:1.5rem 0 0; } .next-button { position:absolute; z-index:4; bottom:2.25rem; right:var(--space); border:0; background:transparent; cursor:pointer; text-transform:uppercase; letter-spacing:.14em; font-size:.62rem; display:flex; align-items:center; gap:.8rem; padding:.65rem 0; transition:color .35s var(--ease),transform .35s var(--ease); } .next-button::after { content:""; width:2.7rem; height:1px; background:currentColor; transition:width .35s var(--ease); } .next-button:hover { color:var(--accent); transform:translateX(.2rem); } .next-button:hover::after { width:3.4rem; } .next-button > :first-child { display:none; }
.presentation-progress { position:fixed; z-index:20; top:2.2rem; right:var(--space); display:flex; align-items:center; gap:.8rem; mix-blend-mode:screen; font-size:.65rem; letter-spacing:.1em; } .progress-count b { font-weight:500; } .progress-count i { font-style:normal; color:var(--muted); padding:0 .2rem; } .progress-track { width:4.2rem; height:1px; background:rgba(255,255,255,.25); overflow:hidden; } #progress-bar { display:block; height:100%; width:10%; background:var(--text); transition:width .65s var(--ease); } .grain { position:fixed; z-index:10; inset:0; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.cover { justify-content:center; text-align:center; } .cover-media,.cover-shade { position:absolute; inset:0; } .cover-media img { width:100%; height:100%; object-fit:cover; animation:kenburns 16s ease-out infinite alternate; } .cover-shade { background:linear-gradient(180deg,rgba(4,8,5,.25),rgba(5,9,6,.88)); z-index:1; } .cover-content { padding:var(--space); } .cover-content h1,.wordmark { font-size:clamp(5.5rem,18vw,18rem); font-weight:500; letter-spacing:-.1em; line-height:.8; margin:0; text-shadow:0 5px 35px #000; } .cover-content .eyebrow { margin-bottom:2rem; } .media-fallback.asset-missing { background:radial-gradient(circle at 60% 45%,#334131 0,transparent 18%),linear-gradient(135deg,#111b13,#070a08); } .asset-label,.art-piece span { display:none; } .asset-missing .asset-label { display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#b9c4b3; letter-spacing:.2em; font-size:.62rem; white-space:nowrap; opacity:.65; }
.team { background:linear-gradient(145deg,#0b100d,#152017 70%,#0a0d0b); } .team-list { margin-top:clamp(4rem,10vh,9rem); border-top:1px solid var(--line); display:flex; align-items:end; justify-content:space-between; padding-top:1.25rem; max-width:1100px; } .team-member { display:flex; gap:2rem; align-items:flex-start; } .member-index { color:var(--accent); font-size:.7rem; letter-spacing:.18em; margin-top:.4rem; } .team-member h3 { font-size:clamp(2.5rem,6.5vw,7rem); line-height:.83; letter-spacing:-.075em; margin:0; font-weight:500; } .team-note { color:var(--muted); font-size:.75rem; letter-spacing:.08em; line-height:1.6; }
.story { background:linear-gradient(120deg,#0b0f0c 30%,#182119); } .story-layout { display:grid; grid-template-columns:1fr 1.1fr .6fr; gap:clamp(2rem,5vw,7rem); align-items:end; } .story-copy { max-width:38rem; font-family:Georgia,serif; font-size:clamp(1.05rem,1.7vw,1.65rem); line-height:1.55; position:relative; z-index:1; } .story-copy p { margin:0 0 1.5rem; } .story-copy strong { color:var(--accent); text-transform:uppercase; font-family:Arial,sans-serif; font-size:.73em; letter-spacing:.11em; } .aria-placeholder { height:clamp(250px,45vh,540px); border:1px solid var(--line); position:relative; background:linear-gradient(150deg,rgba(165,192,144,.1),transparent); } .aria-placeholder::before { content:""; width:45%; aspect-ratio:1; border-radius:50%; border:1px solid rgba(210,220,193,.3); position:absolute; left:50%; top:40%; transform:translate(-50%,-50%); box-shadow:0 0 80px rgba(170,200,150,.14); } .aria-placeholder span { position:absolute; bottom:1rem; left:1rem; font-size:.55rem; letter-spacing:.16em; color:var(--muted); } .story-orb { position:absolute; width:50vw; height:50vw; border-radius:50%; background:radial-gradient(circle,rgba(167,203,132,.16),transparent 67%); right:-10vw; bottom:-22vw; filter:blur(10px); }
.mechanics { align-items:flex-start; } .mechanics-grid { margin-top:clamp(2.4rem,6vh,5rem); display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; } .mechanic { height:clamp(280px,47vh,570px); overflow:hidden; position:relative; border:1px solid var(--line); background:#111; transition:transform .6s var(--ease),border-color .6s var(--ease); } .mechanic:hover { transform:scale(1.018); border-color:rgba(215,236,192,.55); z-index:1; } .mechanic video { width:100%; height:100%; object-fit:cover; opacity:.8; } .video-placeholder { display:none; position:absolute; inset:0; place-items:center; color:var(--muted); font-size:.65rem; letter-spacing:.18em; background:linear-gradient(140deg,#1a241b,#0a0d0b); } .video-unavailable .video-placeholder { display:grid; } .mechanic-title { position:absolute; bottom:0; left:0; right:0; padding:3.5rem 1.2rem 1.25rem; background:linear-gradient(transparent,rgba(0,0,0,.82)); } .mechanic-title span { font-size:.6rem; letter-spacing:.16em; color:var(--accent); } .mechanic-title h3 { margin:.4rem 0 0; font-size:clamp(1.25rem,2vw,2rem); font-weight:500; letter-spacing:-.04em; }
.pillar-content { max-width:1350px; margin:auto; } .pillar-list { margin-top:clamp(2rem,5vh,4rem); border-top:1px solid var(--line); } .pillar { display:grid; grid-template-columns:14% 1fr; gap:1rem; border-bottom:1px solid var(--line); padding:clamp(1rem,2.5vh,2rem) 0; align-items:baseline; } .pillar > span { color:var(--accent); font-size:clamp(1.8rem,3vw,3.4rem); letter-spacing:-.07em; } .pillar h3 { margin:0; font-weight:500; font-size:clamp(1.3rem,2.3vw,2.5rem); letter-spacing:-.04em; } .pillar p { max-width:650px; color:var(--muted); font-size:clamp(.78rem,1vw,.98rem); line-height:1.45; margin:.45rem 0 0; } .special { background:radial-gradient(circle at 15% 70%,#263522 0,transparent 31%),var(--bg); }
.content-stats { background:linear-gradient(150deg,#111a12,#090c0a); } .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); margin-top:clamp(2.5rem,8vh,6rem); border-top:1px solid var(--line); border-left:1px solid var(--line); } .stats-grid article { min-height:clamp(150px,23vh,250px); padding:1.15rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; } .stats-grid article:first-child { grid-column:span 2; grid-row:span 2; background:rgba(210,225,191,.035); } .stats-grid strong { color:var(--accent); font-weight:400; font-size:clamp(3.2rem,7vw,8rem); letter-spacing:-.1em; line-height:.75; } .stats-grid .lead-stat span { margin-top:.8rem; letter-spacing:.2em; font-size:.72rem; } .stats-grid p { color:var(--muted); max-width:19rem; font-size:clamp(.7rem,.9vw,.9rem); line-height:1.35; margin:1rem 0 0; }
.art { align-items:flex-start; } .moodboard { height:clamp(330px,52vh,620px); margin:clamp(2rem,5vh,4rem) 5vw 0 20vw; display:grid; grid-template-columns:1.45fr .8fr; grid-template-rows:1.1fr .9fr; gap:1rem; } .art-piece { margin:0; position:relative; overflow:hidden; border:1px solid var(--line); background:linear-gradient(135deg,#1c281c,#090d0a); } .art-piece img { height:100%; width:100%; object-fit:cover; } .art-piece.asset-missing span { display:block; position:absolute; bottom:1rem; left:1rem; font-size:.6rem; letter-spacing:.18em; color:var(--muted); } .art-large { grid-row:span 2; } .art-tall { transform:translateY(-1.5rem); } .art-small { transform:translateX(12%); }
.looking { background:radial-gradient(circle at 80% 20%,#23331e,transparent 30%),#0b0e0b; } .open-roles { margin-top:clamp(2.5rem,6vh,6rem); display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .open-roles span { min-height:clamp(130px,22vh,230px); background:var(--bg); padding:1.3rem; display:flex; align-items:end; font-size:clamp(1.25rem,2.4vw,2.7rem); line-height:.9; letter-spacing:-.05em; }
.goodbye { text-align:center; justify-content:center; background:radial-gradient(ellipse at center,#1b2818,transparent 50%),var(--bg); } .goodbye-content { max-width:800px; padding-bottom:4rem; } .goodbye h2 { margin:0; font-weight:500; font-size:clamp(4.7rem,12vw,11rem); letter-spacing:-.09em; line-height:.8; } .thanks-copy { margin:2rem auto; max-width:23rem; color:var(--muted); font-family:Georgia,serif; line-height:1.5; } .contact { border-top:1px solid var(--line); text-align:left; margin:2rem auto; max-width:400px; } .contact p { display:flex; justify-content:space-between; gap:2rem; font-size:.65rem; letter-spacing:.09em; border-bottom:1px solid var(--line); padding:.75rem 0; margin:0; } .contact span { color:var(--accent); font-size:.55rem; } .wordmark { font-size:clamp(3rem,7vw,6rem); margin:2rem 0; } .return-button { border:1px solid var(--line); background:transparent; cursor:pointer; padding:.85rem 1.15rem; font-size:.6rem; letter-spacing:.15em; transition:background .3s,color .3s; } .return-button:hover { background:var(--text); color:var(--bg); }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease),transform .9s var(--ease); } .slide.is-active .reveal { opacity:1; transform:none; } .slide.is-active .reveal:nth-child(2) { transition-delay:.12s; } .slide.is-active .reveal:nth-child(3) { transition-delay:.22s; } @keyframes kenburns { from { transform:scale(1); } to { transform:scale(1.08); } }
@media (max-width:800px) { .display-title { font-size:clamp(3.2rem,15vw,5.5rem); } .story-layout { grid-template-columns:1fr; } .story-copy { font-size:1.05rem; } .aria-placeholder { height:190px; } .mechanics-grid { grid-template-columns:1fr; gap:.75rem; } .mechanic { height:42vh; min-height:230px; } .pillar { grid-template-columns:20% 1fr; } .stats-grid { grid-template-columns:repeat(2,1fr); } .stats-grid article:first-child { grid-column:span 2; grid-row:span 1; } .moodboard { margin-left:0; margin-right:0; height:45vh; gap:.55rem; } .art-tall { transform:none; } .art-small { transform:none; } .open-roles { grid-template-columns:1fr; } .open-roles span { min-height:115px; } .team-list { align-items:flex-start; flex-direction:column; gap:2rem; } .presentation-progress { top:1.25rem; } }
@media (max-height:760px) and (min-width:801px) { .slide-content { padding-top:4.5rem; padding-bottom:4rem; } .pillar-list { margin-top:1.5rem; } .pillar { padding:1rem 0; } .mechanic { height:42vh; } .stats-grid { margin-top:2.5rem; } .stats-grid article { min-height:115px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* Pale forest palette: keeps #a1aea1 as the dominant presentation background. */
.slide { background:radial-gradient(circle at 70% 20%,rgba(47,75,55,.19) 0,transparent 38%),var(--bg); }
.team { background:linear-gradient(145deg,#a1aea1,#bac5b8 70%,#94a293); }
.story { background:linear-gradient(120deg,#a1aea1 30%,#b8c5b6); }
.special { background:radial-gradient(circle at 15% 70%,rgba(58,88,57,.2) 0,transparent 31%),var(--bg); }
.content-stats { background:linear-gradient(150deg,#b6c1b3,#98a797); }
.looking { background:radial-gradient(circle at 80% 20%,rgba(56,86,53,.25),transparent 30%),var(--bg); }
.goodbye { background:radial-gradient(ellipse at center,#bdc9b9,transparent 50%),var(--bg); }
.cover { color:#f0f0e9; } .cover .eyebrow { color:#d7e1d1; }
.mechanic { color:#f0f0e9; }
.cover-media img { object-fit:contain; background:var(--bg); } .cover-shade { display:none; }
.wordmark { display:block; width:min(340px,72vw); height:auto; margin:2rem auto; mix-blend-mode:multiply; }

/* Iteration 02 — presentation-specific composition */
.pitch-badge { position:absolute; z-index:5; left:var(--space); bottom:2.25rem; min-width:clamp(10rem,18vw,17rem); border:1px solid rgba(232,239,222,.34); background:#101510; color:#f4f6ed; padding:clamp(1.15rem,2vw,1.85rem) clamp(1.45rem,3vw,2.6rem); font-size:clamp(1.15rem,2.35vw,2.35rem); font-weight:600; line-height:1; letter-spacing:.19em; box-shadow:0 1rem 3rem rgba(3,7,4,.32); }
.leaf-fall { display:none; /* Kept ready for a future reactivation. */ position:absolute; z-index:1; inset:0; overflow:hidden; pointer-events:none; }
.leaf-fall i { position:absolute; top:-14%; width:clamp(12px,1.6vw,24px); aspect-ratio:.62; border-radius:100% 0 100% 0; background:linear-gradient(135deg,#d6dfbe 0 47%,#7e9669 48% 55%,#526a48 56%); opacity:.5; transform:rotate(25deg); filter:drop-shadow(0 5px 7px rgba(0,0,0,.16)); animation:leaf-drift 13s linear infinite; }
.leaf-fall i:nth-child(1) { left:5%; animation-delay:-3s; animation-duration:12s; }
.leaf-fall i:nth-child(2) { left:16%; animation-delay:-8s; animation-duration:16s; transform:rotate(120deg) scale(.7); }
.leaf-fall i:nth-child(3) { left:29%; animation-delay:-1s; animation-duration:14s; transform:rotate(62deg) scale(.8); }
.leaf-fall i:nth-child(4) { left:43%; animation-delay:-10s; animation-duration:18s; transform:rotate(155deg) scale(1.1); }
.leaf-fall i:nth-child(5) { left:58%; animation-delay:-5s; animation-duration:11s; transform:rotate(80deg) scale(.65); }
.leaf-fall i:nth-child(6) { left:69%; animation-delay:-12s; animation-duration:17s; transform:rotate(15deg) scale(.9); }
.leaf-fall i:nth-child(7) { left:78%; animation-delay:-6s; animation-duration:13s; transform:rotate(130deg) scale(.75); }
.leaf-fall i:nth-child(8) { left:88%; animation-delay:-9s; animation-duration:15s; transform:rotate(45deg) scale(1.05); }
.leaf-fall i:nth-child(9) { left:96%; animation-delay:-2s; animation-duration:19s; transform:rotate(105deg) scale(.65); }
.leaf-fall-story i { opacity:.34; background:linear-gradient(135deg,#d0dcae 0 47%,#758e5e 48% 55%,#41583d 56%); }
@keyframes leaf-drift { 0% { margin-top:0; translate:0 0; rotate:0deg; } 30% { translate:5vw 30vh; rotate:100deg; } 65% { translate:-4vw 65vh; rotate:235deg; } 100% { margin-top:112vh; translate:3vw 0; rotate:380deg; } }
.leaf-border { position:absolute; z-index:3; inset:0; overflow:hidden; pointer-events:none; box-shadow:inset 0 0 7vw 1vw rgba(24,43,26,.2); }
.leaf-border i { position:absolute; width:clamp(30px,4.6vw,72px); aspect-ratio:.62; border-radius:100% 0 100% 0; background:linear-gradient(135deg,#e0e8c8 0 46%,#90a876 47% 54%,#526a48 55%); filter:drop-shadow(0 5px 8px rgba(0,0,0,.24)); opacity:.88; transition:opacity .25s; }
/* Each leaf is rotated so its pointed tip looks inward, framing the slide as dense foliage. */
.leaf-border i:nth-child(1) { top:2%; left:-1%; transform:rotate(45deg); } .leaf-border i:nth-child(2) { top:13%; left:-1%; transform:rotate(50deg) scale(.9); } .leaf-border i:nth-child(3) { top:26%; left:1%; transform:rotate(38deg) scale(1.12); } .leaf-border i:nth-child(4) { top:40%; left:-1%; transform:rotate(55deg) scale(.95); }
.leaf-border i:nth-child(5) { bottom:28%; left:0; transform:rotate(35deg) scale(1.06); } .leaf-border i:nth-child(6) { bottom:13%; left:-1%; transform:rotate(50deg) scale(.85); } .leaf-border i:nth-child(7) { bottom:2%; left:2%; transform:rotate(38deg); } .leaf-border i:nth-child(8) { bottom:-1%; left:14%; transform:rotate(-42deg) scale(.82); }
.leaf-border i:nth-child(9) { bottom:1%; left:29%; transform:rotate(-42deg) scale(1.08); } .leaf-border i:nth-child(10) { bottom:-2%; left:45%; transform:rotate(-48deg) scale(.9); } .leaf-border i:nth-child(11) { bottom:0; left:61%; transform:rotate(-52deg) scale(1.14); } .leaf-border i:nth-child(12) { bottom:2%; right:17%; transform:rotate(-55deg) scale(.84); }
.leaf-border i:nth-child(13) { bottom:10%; right:-1%; transform:rotate(-135deg); } .leaf-border i:nth-child(14) { bottom:25%; right:0; transform:rotate(-142deg) scale(.86); } .leaf-border i:nth-child(15) { top:42%; right:-1%; transform:rotate(-130deg) scale(1.08); } .leaf-border i:nth-child(16) { top:28%; right:1%; transform:rotate(-145deg) scale(.93); }
.leaf-border i:nth-child(17) { top:14%; right:-1%; transform:rotate(-135deg) scale(1.14); } .leaf-border i:nth-child(18) { top:2%; right:2%; transform:rotate(-142deg) scale(.82); } .leaf-border i:nth-child(19) { top:-1%; right:15%; transform:rotate(135deg); } .leaf-border i:nth-child(20) { top:0; right:31%; transform:rotate(138deg) scale(.9); }
.leaf-border i:nth-child(21) { top:-2%; right:46%; transform:rotate(132deg) scale(1.1); } .leaf-border i:nth-child(22) { top:1%; left:37%; transform:rotate(140deg) scale(.83); } .leaf-border i:nth-child(23) { top:-1%; left:21%; transform:rotate(137deg) scale(1.06); } .leaf-border i:nth-child(24) { top:3%; left:9%; transform:rotate(142deg) scale(.78); }
.leaf-border-story i { opacity:.64; background:linear-gradient(135deg,#d1deb2 0 46%,#7b9563 47% 54%,#40563b 55%); }
.slide.is-leaving .leaf-border i { animation:leaf-scatter .72s cubic-bezier(.16,.8,.2,1) forwards; }
.slide.is-leaving .leaf-border i:nth-child(1),.slide.is-leaving .leaf-border i:nth-child(2),.slide.is-leaving .leaf-border i:nth-child(3),.slide.is-leaving .leaf-border i:nth-child(4),.slide.is-leaving .leaf-border i:nth-child(5),.slide.is-leaving .leaf-border i:nth-child(6),.slide.is-leaving .leaf-border i:nth-child(7) { --leaf-x:-18vw; } .slide.is-leaving .leaf-border i:nth-child(8),.slide.is-leaving .leaf-border i:nth-child(9),.slide.is-leaving .leaf-border i:nth-child(10),.slide.is-leaving .leaf-border i:nth-child(11),.slide.is-leaving .leaf-border i:nth-child(12) { --leaf-y:18vh; } .slide.is-leaving .leaf-border i:nth-child(13),.slide.is-leaving .leaf-border i:nth-child(14),.slide.is-leaving .leaf-border i:nth-child(15),.slide.is-leaving .leaf-border i:nth-child(16),.slide.is-leaving .leaf-border i:nth-child(17),.slide.is-leaving .leaf-border i:nth-child(18) { --leaf-x:18vw; } .slide.is-leaving .leaf-border i:nth-child(19),.slide.is-leaving .leaf-border i:nth-child(20),.slide.is-leaving .leaf-border i:nth-child(21),.slide.is-leaving .leaf-border i:nth-child(22),.slide.is-leaving .leaf-border i:nth-child(23),.slide.is-leaving .leaf-border i:nth-child(24) { --leaf-y:-18vh; }
.slide.is-leaving .leaf-border i:nth-child(2n) { animation-delay:.05s; } .slide.is-leaving .leaf-border i:nth-child(3n) { animation-delay:.1s; }
@keyframes leaf-scatter { to { translate:var(--scatter-x,var(--leaf-x,0)) var(--scatter-y,var(--leaf-y,-16vh)); rotate:240deg; scale:.35; opacity:0; } }
.leaf-border { display:none; }
.team-bubbles { min-height:46vh; display:flex; align-items:center; justify-content:center; gap:clamp(1.25rem,4vw,4rem); } .person-bubble { width:clamp(220px,25vw,340px); aspect-ratio:1; border:1px solid var(--line); border-radius:50%; padding:clamp(1.3rem,3vw,2.4rem); display:flex; flex-direction:column; justify-content:center; text-align:center; background:radial-gradient(circle at 35% 30%,rgba(233,242,227,.42),transparent 60%),rgba(255,255,255,.1); } .person-bubble span { color:var(--accent); font-size:.62rem; letter-spacing:.18em; } .person-bubble h3 { margin:.8rem 0; font-size:clamp(1.8rem,3.8vw,4rem); line-height:.8; letter-spacing:-.075em; font-weight:500; } .person-bubble p { margin:0; font-size:.63rem; letter-spacing:.16em; color:var(--muted); }
.mechanics .slide-content { padding-top:4.5rem; padding-bottom:4rem; } .mechanics-grid { margin-top:1.35rem; } .mechanic { height:clamp(360px,68vh,760px); }
.content-stats, .art, .looking, .join, .goodbye { --bg:#0a0d0b; --bg-soft:#121813; --text:#f0f0e9; --muted:#9ca49a; --line:rgba(232,239,222,.17); --accent:#b8c6a1; color:var(--text); }
.content-stats { background:linear-gradient(150deg,#111a12,#090c0a); } .art { background:radial-gradient(circle at 76% 22%,#182419,transparent 34%),var(--bg); } .looking { background:radial-gradient(circle at 85% 14%,#23331e,transparent 30%),var(--bg); } .join { background:radial-gradient(circle at 20% 70%,#1b2a19,transparent 34%),var(--bg); } .goodbye { background:radial-gradient(ellipse at center,#1b2818,transparent 50%),var(--bg); }
.moodboard { margin-top:clamp(1.5rem,3vh,2.5rem); margin-left:13vw; height:clamp(290px,43vh,510px); grid-template-columns:1.35fr .7fr .65fr .85fr; grid-template-rows:1fr 1fr; } .art-large { grid-row:span 2; } .art-tall { grid-row:span 2; transform:none; } .art-small { grid-column:3; transform:none; } .art-fourth { grid-column:4; } .art-fifth { grid-column:3 / span 2; grid-row:2; } .art-references { margin:1.25rem 0 0 13vw; color:var(--muted); font-family:Georgia,serif; font-size:clamp(.78rem,1vw,.95rem); }
.wip-gallery { margin-top:clamp(2rem,5vh,4.5rem); display:grid; grid-template-columns:1.3fr .8fr .8fr 1.1fr; gap:1rem; height:clamp(270px,43vh,500px); } .wip-gallery figure { position:relative; overflow:hidden; margin:0; border:1px solid var(--line); background:linear-gradient(145deg,#1a241b,#090d0a); } .wip-gallery figure:nth-child(2) { transform:translateY(1.8rem); } .wip-gallery figure:nth-child(3) { transform:translateY(-1rem); } .wip-gallery img { width:100%; height:100%; object-fit:cover; } .wip-gallery .asset-missing span { display:block; position:absolute; bottom:1rem; left:1rem; color:var(--muted); font-size:.6rem; letter-spacing:.18em; }

.wip-gallery { grid-template-columns:repeat(5,1fr); max-width:1200px; }
.join-layout { display:grid; grid-template-columns:1fr auto; align-items:center; gap:clamp(2rem,7vw,8rem); } .job-bubbles { min-height:42vh; justify-content:flex-start; gap:1.25rem; } .job-bubbles .person-bubble { width:clamp(160px,16vw,235px); background:radial-gradient(circle at 35% 30%,rgba(167,190,144,.15),transparent 60%); } .job-bubbles .person-bubble h3 { font-size:clamp(1.15rem,2vw,2.1rem); } .qr-placeholder { width:clamp(170px,17vw,250px); padding:.8rem .8rem .65rem; border:1px solid var(--accent); display:grid; place-items:center; gap:.65rem; color:inherit; text-decoration:none; background:#eef2e8; transition:transform .35s var(--ease),box-shadow .35s var(--ease); } .qr-placeholder:hover { transform:scale(1.035) rotate(1deg); box-shadow:0 1.25rem 3rem rgba(0,0,0,.32); } .qr-placeholder img { display:block; width:100%; height:auto; } .qr-placeholder small { color:#294b36; font-size:.58rem; font-weight:700; letter-spacing:.2em; }
.final-layout { display:grid; grid-template-columns:minmax(260px,.8fr) 1.1fr; max-width:1250px; margin:auto; align-items:center; gap:clamp(2rem,7vw,8rem); text-align:left; } .final-image { height:clamp(390px,68vh,760px); background:#a1aea1; } .final-image img { width:100%; height:100%; object-fit:contain; } .final-copy .thanks-copy { margin:2rem 0; } .final-copy .contact { margin:2rem 0; } .final-copy .wordmark { width:min(260px,65vw); margin:2rem 0; filter:invert(1); mix-blend-mode:screen; }

.final-image { position:relative; background:transparent; } .final-image .final-sketch-main { width:100%; height:100%; object-fit:contain; } .final-image .final-sketch-crazy { position:absolute; right:-8%; bottom:5%; width:32%; height:auto; object-fit:contain; }

.team .profile-icon { display:block; width:clamp(4.5rem,8vw,7rem); aspect-ratio:1; margin:.75rem auto .3rem; border-radius:50%; object-fit:cover; border:1px solid rgba(20,32,25,.3); }
.team .person-bubble h3 { margin:.45rem 0; }
.team .person-bubble p strong { display:block; color:var(--text); font-size:1.12em; }
.team .person-bubble p small { display:block; margin-top:.45rem; font-size:.88em; letter-spacing:.1em; }

.team .person-bubble { width:clamp(11.5rem,20vw,17.5rem); }
.team .person-bubble h3 { font-size:clamp(1.25rem,2.4vw,2.3rem); }
.team .profile-icon { width:clamp(3.5rem,5.5vw,5rem); margin:.45rem auto .15rem; }
.team .person-bubble p { font-size:clamp(.72rem,1.05vw,.95rem); }
.team .person-bubble p strong { font-size:1.38em; }
.team .person-bubble p small { font-size:1em; letter-spacing:.12em; }
@media (max-width:800px) { .pitch-badge { bottom:1.35rem; } .team-bubbles { min-height:40vh; } .mechanics-grid { margin-top:1rem; } .mechanic { height:38vh; } .moodboard { margin-left:0; height:38vh; grid-template-columns:1.25fr .75fr .7fr .7fr; gap:.45rem; } .art-references { margin-left:0; } .wip-gallery { height:36vh; gap:.45rem; } .join-layout,.final-layout { grid-template-columns:1fr; } .job-bubbles { flex-wrap:wrap; justify-content:center; min-height:auto; } .qr-placeholder { margin:auto; } .final-image { height:35vh; } }

/* Sketch placement and team-role refinements */
.aria-placeholder { margin:0; overflow:hidden; }
.aria-placeholder::before { display:none; }
.aria-placeholder img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.pillars .pillar-content { padding-right:clamp(20rem,34vw,31rem); }
.pillar-sketch { position:absolute; z-index:1; top:50%; right:var(--space); width:clamp(16rem,27vw,27rem); height:clamp(21rem,58vh,42rem); margin:0; transform:translateY(-42%) rotate(3deg); overflow:hidden; border:1px solid var(--line); box-shadow:1rem 1rem 0 rgba(20,32,25,.08); }
.pillar-sketch img { display:block; width:100%; height:100%; object-fit:cover; }
.person-bubble { position:relative; }
.team .person-bubble p { position:absolute; top:calc(100% + 1.1rem); left:0; right:0; margin:0; font-size:.63rem; letter-spacing:.2em; color:var(--muted); }
.job-bubbles .person-bubble:last-child h3 { font-size:clamp(.92rem,1.45vw,1.45rem); line-height:.95; letter-spacing:-.07em; }
@media (max-width:800px) { .pillars .pillar-content { padding-right:var(--space); } .pillar-sketch { position:relative; top:auto; right:auto; width:100%; height:28vh; margin:1.5rem 0 0; transform:none; } }

/* More compact editorial scale */
.display-title { font-size:clamp(1.5rem,3.3vw,3.675rem); }
.pitch-badge { min-width:0; width:clamp(8.5rem,13vw,12.5rem); aspect-ratio:1; display:grid; place-items:center; padding:1.25rem; border:0; background:transparent; color:#f4f6ed; font-size:clamp(.9rem,1.55vw,1.45rem); box-shadow:none; isolation:isolate; }
.pitch-badge::before { content:""; position:absolute; inset:0; z-index:-1; background:#101510; border:1px solid rgba(232,239,222,.42); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); box-shadow:0 1rem 3rem rgba(3,7,4,.32); }
@media (max-width:800px) { .display-title { font-size:clamp(1.35rem,5.75vw,2.175rem); } .pitch-badge { width:8.25rem; font-size:.9rem; } }

/* Keep the sketches fully visible within their slides. */
.aria-placeholder { background:rgba(20,32,25,.08); }
.aria-placeholder img { object-fit:contain; }
.pillar-sketch { top:50%; width:clamp(14rem,24vw,23rem); height:min(38vh,22rem); transform:translateY(-50%) rotate(3deg); background:rgba(20,32,25,.08); }
.pillar-sketch img { object-fit:contain; }
@media (max-width:800px) { .pillar-sketch { width:100%; height:24vh; max-height:15rem; transform:none; } }

/* Sketches are artwork, not framed cards. */
.aria-placeholder { border:0; background:transparent; }
.pillar-sketch { height:auto; max-height:38vh; overflow:visible; border:0; background:transparent; box-shadow:none; }
.pillar-sketch img { width:auto; height:auto; max-width:100%; max-height:38vh; object-fit:initial; }
@media (max-width:800px) { .pillar-sketch { height:auto; max-height:none; } .pillar-sketch img { width:100%; max-height:none; } }

/* Larger desktop sketches while preserving each source image's portrait ratio. */
@media (min-width:801px) {
  .pillars .slide-content { position:static; }
  .pillars .pillar-content { padding-right:clamp(23rem,42vw,40rem); }
  .pillars header, .pillars .pillar-list { position:relative; z-index:2; }
  .pillar-sketch { top:20%; width:clamp(22rem,37vw,37rem); }
  .pillar-sketch img { max-height:min(66.5vh,44rem); }
  .special .pillar-sketch { right:calc(var(--space) - 7vw); }
}

/* Full-bleed mechanics reel */
.mechanics { background:#070a08; }
.mechanics .slide-content { width:100%; max-width:none; min-height:100svh; margin:0; padding:clamp(5.25rem,10vh,8rem) var(--space); }
.mechanics .mechanics-grid { position:absolute; z-index:0; inset:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:0; background:#070a08; }
.mechanics .mechanic { height:auto; min-height:0; border:0; }
.mechanics .mechanic video { opacity:.72; }
.mechanics .mechanic, .mechanics .mechanic video { pointer-events:none; user-select:none; }
.mechanics .mechanic:hover { transform:none; border-color:transparent; }
.mechanics .eyebrow, .mechanics .display-title { position:relative; z-index:2; color:#f4f6ed; text-shadow:0 .2rem 1.2rem rgba(0,0,0,.65); }
.mechanics .eyebrow { color:#e2ecd5; }
.mechanics .mechanic-title { z-index:1; }
.mechanics .corner-brand { display:none; }
@media (max-width:800px) { .mechanics .mechanics-grid { grid-template-columns:repeat(3,1fr); } }

/* Unframed, overlapping art spread */
.art .slide-content { min-height:100svh; }
.art .eyebrow, .art .display-title, .art .art-references { position:relative; z-index:3; }
.art .moodboard { position:absolute; z-index:1; inset:0; display:block; height:auto; margin:0; pointer-events:none; }
.art .art-piece { position:absolute; margin:0; overflow:visible; border:0; background:transparent; }
.art .art-piece img { display:block; width:100%; height:auto; object-fit:initial; }
.art .art-large { top:33%; left:10%; width:clamp(13rem,29vw,30rem); transform:rotate(-5deg); }
.art .art-tall { top:15%; right:12%; width:clamp(10rem,20vw,22rem); transform:rotate(6deg); }
.art .art-small { top:37%; left:44%; width:clamp(8rem,16vw,17rem); transform:rotate(-8deg); }
.art .art-fourth { right:25%; bottom:8%; width:clamp(10rem,20vw,21rem); transform:rotate(4deg); }
.art .art-fifth { bottom:5%; left:26%; width:clamp(11rem,23vw,24rem); transform:rotate(-3deg); }
.art .art-sixth { top:24%; left:31%; width:clamp(7rem,13vw,14rem); transform:rotate(9deg); }
.art .art-seventh { top:53%; right:10%; width:clamp(8rem,15vw,16rem); transform:rotate(-6deg); }
.art .art-eighth { top:20%; left:59%; width:clamp(8rem,15vw,17rem); transform:rotate(3deg); }
.art .art-ninth { bottom:13%; left:46%; width:clamp(8rem,14vw,15rem); transform:rotate(-10deg); }
.art .slide-content > .eyebrow, .art .slide-content > .display-title { position:relative; z-index:3; left:auto; right:auto; top:auto; text-align:left; }
.art .art-references { position:absolute; z-index:9; top:2rem; left:0; right:0; margin:0; text-align:center; }
@media (max-width:800px) {
  .art .moodboard { position:relative; inset:auto; display:grid; grid-template-columns:1fr 1fr; gap:.65rem; height:auto; margin:1.75rem 0 0; }
  .art .art-piece, .art .art-large, .art .art-tall, .art .art-small, .art .art-fourth, .art .art-fifth, .art .art-sixth, .art .art-seventh, .art .art-eighth, .art .art-ninth { position:relative; inset:auto; width:auto; transform:none; }
  .art .art-piece img { width:100%; }
  .art .art-references { top:1.1rem; }
}

/* Persistent brand mark, matched to the active slide palette. */
.corner-brand { position:absolute; z-index:5; left:var(--space); bottom:2rem; width:clamp(4.5rem,8vw,8rem); pointer-events:none; }
.corner-logo { display:block; width:100%; height:auto; }
.corner-logo-dark { display:none; opacity:.2; }
.content-stats .corner-logo-light, .art .corner-logo-light, .looking .corner-logo-light, .join .corner-logo-light, .goodbye .corner-logo-light { display:none; }
.content-stats .corner-logo-dark, .art .corner-logo-dark, .looking .corner-logo-dark, .join .corner-logo-dark, .goodbye .corner-logo-dark { display:block; }
.cover .pitch-badge { bottom:calc(2rem + clamp(4.5rem,8vw,8rem)); }
@media (max-width:800px) { .corner-brand { bottom:1.2rem; } .cover .pitch-badge { bottom:calc(1.2rem + 5rem); } }

/* Scattered WIP collage */
.looking .slide-content { min-height:100svh; }
.looking .eyebrow, .looking .display-title { position:relative; z-index:3; }
.looking .wip-gallery { position:absolute; z-index:1; inset:0; display:block; width:100%; max-width:none; height:auto; margin:0; pointer-events:none; }
.looking .wip-gallery figure { position:absolute; width:clamp(15rem,25vw,29rem); height:auto; overflow:visible; border:0; background:transparent; box-shadow:0 1.5rem 3.5rem rgba(0,0,0,.3); }
.looking .wip-gallery img { display:block; width:100%; height:auto; object-fit:initial; }
.looking .wip-gallery figure:nth-child(1) { top:15%; left:28%; transform:rotate(-7deg); }
.looking .wip-gallery figure:nth-child(2) { top:12%; right:17%; width:clamp(14rem,23vw,27rem); transform:rotate(6deg); }
.looking .wip-gallery figure:nth-child(3) { bottom:8%; left:17%; width:clamp(16rem,27vw,31rem); transform:rotate(5deg); }
.looking .wip-gallery figure:nth-child(4) { right:31%; bottom:5%; width:clamp(15rem,25vw,29rem); transform:rotate(-5deg); }
.looking .wip-gallery figure:nth-child(5) { right:13%; bottom:14%; width:clamp(14rem,22vw,26rem); transform:rotate(8deg); }
.goodbye .contact p:nth-child(2) { font-size:clamp(.9rem,1.25vw,1.2rem); letter-spacing:.045em; }
@media (max-width:800px) {
  .looking .wip-gallery figure { width:48vw; }
  .looking .wip-gallery figure:nth-child(1) { top:22%; left:12%; }
  .looking .wip-gallery figure:nth-child(2) { top:20%; right:10%; width:44vw; }
  .looking .wip-gallery figure:nth-child(3) { bottom:25%; left:9%; width:51vw; }
  .looking .wip-gallery figure:nth-child(4) { right:10%; bottom:27%; width:47vw; }
  .looking .wip-gallery figure:nth-child(5) { right:24%; bottom:7%; width:52vw; }
}