/* ============================================================ PRODIOS LABS · shared design system Editorial-engineering. Deep ink, bone-white, disciplined violet. ============================================================ */ :root{ --ink:#0E0D13; --ink-2:#15131D; --ink-3:#1C1926; --parchment:#E8E6F0; --parchment-dim:#A6A2B6; --parchment-faint:#6C687C; --amber:#7C3AED; --amber-soft:#9B6BF4; --line:rgba(232,230,240,0.10); --line-2:rgba(232,230,240,0.16); /* themeable ambient + utility values (dark defaults) */ --glow-strong:rgba(124,58,237,0.60); --glow-mid:rgba(124,58,237,0.22); --glow-mid-2:rgba(124,58,237,0.07); --glow-soft:rgba(124,58,237,0.16); --glow-softer:rgba(124,58,237,0.12); --glow-wash:rgba(124,58,237,0.18); --glow-card:rgba(124,58,237,0.10); --ghost-hover:rgba(237,228,210,0.04); --stripe:rgba(237,228,210,0.05); --nav-scrolled:rgba(14,13,19,0.78); --nav-open:rgba(14,13,19,0.96); --serif:'Fraunces',Georgia,serif; --grotesk:'Archivo',-apple-system,system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; --pad:clamp(20px,5vw,88px); --maxw:1320px; } /* ============ LIGHT THEME ============ Activated by data-theme="light" on . Only redefines color tokens; structural CSS is shared. Variable names ("ink", "parchment") stay the same so every existing rule auto-themes. */ [data-theme="light"]{ --ink:#F5F1E8; /* warm parchment background */ --ink-2:#EFE9DA; --ink-3:#E8E2D1; --parchment:#16141C; /* deep ink as body text */ --parchment-dim:#4D4956; --parchment-faint:#7C7889; --amber:#7C3AED; /* same violet, AA on the cream */ --amber-soft:#6D28D9; --line:rgba(22,20,28,0.10); --line-2:rgba(22,20,28,0.16); --glow-strong:rgba(124,58,237,0.32); --glow-mid:rgba(124,58,237,0.14); --glow-mid-2:rgba(124,58,237,0.04); --glow-soft:rgba(124,58,237,0.09); --glow-softer:rgba(124,58,237,0.07); --glow-wash:rgba(124,58,237,0.10); --glow-card:rgba(124,58,237,0.06); --ghost-hover:rgba(22,20,28,0.05); --stripe:rgba(22,20,28,0.06); --nav-scrolled:rgba(245,241,232,0.86); --nav-open:rgba(245,241,232,0.97); } [data-theme="light"] body::after{opacity:.025;mix-blend-mode:multiply} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--ink); color:var(--parchment); font-family:var(--grotesk); font-weight:300; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative; } /* grain overlay */ body::after{ content:""; position:fixed;inset:0;z-index:9999;pointer-events:none; opacity:0.045;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } ::selection{background:var(--amber);color:#fff} a{color:inherit;text-decoration:none} body.grain-off::after{opacity:0} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} .mono{font-family:var(--mono);font-weight:400;font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--parchment-faint)} .amber{color:var(--amber)} .serif{font-family:var(--serif)} /* ============ NAV ============ */ nav{ position:fixed;top:0;left:0;right:0;z-index:1000; transition:background .45s ease,backdrop-filter .45s ease,border-color .45s ease,padding .45s ease; border-bottom:1px solid transparent; } nav .navrow{ max-width:var(--maxw);margin:0 auto;padding:26px var(--pad); display:flex;align-items:center;justify-content:space-between; transition:padding .45s ease; } nav.scrolled{ background:var(--nav-scrolled); backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid var(--line); } nav.scrolled .navrow{padding-top:15px;padding-bottom:15px} .brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:1.18rem;font-weight:500;letter-spacing:-0.01em} .brand .dot{width:9px;height:9px;background:var(--amber);border-radius:50%;box-shadow:0 0 14px 1px var(--glow-strong);flex:none} .brand .brandmark{width:30px;height:30px;border-radius:8px;flex:none;display:block} .foot .brand .brandmark{width:34px;height:34px} .navlinks{display:flex;align-items:center;gap:38px} .navlinks a{font-family:var(--mono);font-size:0.74rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--parchment-dim);transition:color .25s;position:relative;white-space:nowrap} .navlinks a:hover{color:var(--parchment)} .navlinks a[aria-current]{color:var(--parchment)} .navlinks a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--amber)} .nav-cta{ font-family:var(--mono);font-size:0.74rem;letter-spacing:0.1em;text-transform:uppercase; color:var(--parchment);border:1px solid var(--line-2);padding:11px 20px;border-radius:2px;white-space:nowrap; transition:border-color .25s,background .25s,color .25s; } .nav-cta:hover{background:var(--amber);border-color:var(--amber);color:#fff} /* Right-side action cluster. Keeps the toggle, CTA, and hamburger paired tightly instead of spread by the navrow's space-between. */ .nav-actions{display:flex;align-items:center;gap:10px} .menu-btn{display:none;background:none;border:1px solid var(--line-2);color:var(--parchment);width:42px;height:42px;border-radius:2px;cursor:pointer;font-family:var(--mono);font-size:1.1rem} /* Theme toggle (sun/moon). Lazysmirk-style rounded square, sits before .nav-cta. Height matches .nav-cta so they sit on the same baseline. */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--line-2);background:transparent;color:var(--parchment);border-radius:10px;cursor:pointer;padding:0;transition:border-color .25s,color .25s,background .25s;flex:none} .theme-toggle:hover{border-color:var(--parchment-dim);color:var(--amber)} .theme-toggle:focus-visible{outline:2px solid var(--amber);outline-offset:2px} .theme-toggle .i{display:none} [data-theme="dark"] .theme-toggle .i-sun{display:block} /* in dark, show sun → click to go light */ [data-theme="light"] .theme-toggle .i-moon{display:block} /* in light, show moon → click to go dark */ .mobile-menu{display:none;flex-direction:column;gap:4px;padding:0 var(--pad) 20px} .mobile-menu a{font-family:var(--mono);font-size:0.85rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--parchment-dim);padding:14px 0;border-top:1px solid var(--line)} @media(max-width:860px){ .navlinks{display:none} .menu-btn{display:block} nav.open{background:var(--nav-open);backdrop-filter:blur(14px)} nav.open .mobile-menu{display:flex} } @media(max-width:600px){ /* On narrow phones the brand + nav-cta + hamburger fight for the same row, causing the hamburger to clip at the right edge. The mobile menu already contains "Start a Project" so it's safe to hide the standalone CTA. */ .nav-cta{display:none} nav .navrow{padding-left:18px;padding-right:18px} .brand{font-size:1.05rem} .brand .brandmark{width:26px;height:26px} } /* ============ BUTTONS ============ */ .cta-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:46px} .btn{ font-family:var(--mono);font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase; padding:17px 30px;border-radius:2px;cursor:pointer;border:1px solid transparent; display:inline-flex;align-items:center;gap:12px;transition:all .28s ease; } .btn .arr{transition:transform .28s ease} .btn-primary{background:var(--amber);color:#fff;font-weight:500} .btn-primary:hover{background:var(--amber-soft);transform:translateY(-2px)} .btn-primary:hover .arr{transform:translateX(4px)} .btn-ghost{border-color:var(--line-2);color:var(--parchment)} .btn-ghost:hover{border-color:var(--parchment-dim);background:var(--ghost-hover)} /* ============ REVEAL ANIM (transform-only, snap-safe) ============ */ .rv{transform:translateY(26px);transition:transform 1s cubic-bezier(.16,1,.3,1)} .rv.in{transform:none} .stg>*{transform:none} @media(prefers-reduced-motion:no-preference){ .stg.go>*{animation:rise 1s cubic-bezier(.16,1,.3,1) both} .stg.go>*:nth-child(1){animation-delay:.06s} .stg.go>*:nth-child(2){animation-delay:.20s} .stg.go>*:nth-child(3){animation-delay:.36s} .stg.go>*:nth-child(4){animation-delay:.52s} .stg.go>*:nth-child(5){animation-delay:.66s} } @keyframes rise{from{transform:translateY(32px)}to{transform:none}} @media(prefers-reduced-motion:reduce){ .rv{transform:none!important;transition:none!important} } /* ============ EYEBROW ============ */ .eyebrow{display:flex;align-items:center;gap:16px;margin-bottom:34px} .eyebrow .rule{height:1px;width:46px;background:var(--amber);flex:none} /* ============ DISPLAY TYPE ============ */ h1.display{ font-family:var(--serif);font-weight:300; font-size:clamp(3rem,8.4vw,7.6rem); line-height:0.98;letter-spacing:-0.03em;text-wrap:balance; } h1.display em,h1.display .amber{font-style:italic;font-weight:400} /* ============ HERO DECOR (shared) ============ */ .hero-grid{ position:absolute;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:clamp(46px,6vw,82px) clamp(46px,6vw,82px); mask-image:radial-gradient(120% 90% at 30% 8%,#000 12%,transparent 72%); -webkit-mask-image:radial-gradient(120% 90% at 30% 8%,#000 12%,transparent 72%); opacity:.7; } .hero-glow{ position:absolute;z-index:0;pointer-events:none; width:min(1100px,120vw);height:min(1100px,120vw); top:-40%;left:35%;transform:translateX(-50%); background:radial-gradient(circle,var(--glow-mid) 0%,var(--glow-mid-2) 32%,transparent 62%); filter:blur(8px); } /* ============ HOME HERO ============ */ .hero{position:relative;padding-top:clamp(150px,20vh,230px);padding-bottom:clamp(70px,10vh,130px);overflow:hidden} .hero .wrap{position:relative;z-index:2} .subline{margin-top:38px;max-width:46ch;font-size:clamp(1.05rem,1.7vw,1.32rem);line-height:1.55;color:var(--parchment-dim);font-weight:300} .subline b{color:var(--parchment);font-weight:500} /* ============ INTERIOR PAGE HERO ============ */ .phero{position:relative;padding-top:clamp(140px,17vh,200px);padding-bottom:clamp(48px,7vh,84px);overflow:hidden;border-bottom:1px solid var(--line)} .phero .wrap{position:relative;z-index:2} .phead{font-family:var(--serif);font-weight:300;font-size:clamp(2.5rem,6.4vw,5.4rem);line-height:1.0;letter-spacing:-0.03em;text-wrap:balance} .phead em{font-style:italic;font-weight:400} .phead .amber{font-style:italic;font-weight:400;color:var(--amber)} .psub{margin-top:30px;max-width:54ch;font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--parchment-dim);line-height:1.55} .psub b{color:var(--parchment);font-weight:500} /* ============ STATS STRIP (home) ============ */ .stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(40px,7vh,90px)} .stats .grid{display:grid;grid-template-columns:repeat(5,1fr)} .stat{padding:clamp(34px,4.5vw,54px) clamp(18px,2.4vw,34px);border-left:1px solid var(--line)} .stat:first-child{border-left:none} .stat .num{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,4vw,3.5rem);line-height:1;letter-spacing:-0.02em} .stat .num .amber{font-style:italic} .stat .lbl{margin-top:16px;font-family:var(--mono);font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--parchment-faint);line-height:1.5} @media(max-width:880px){.stats .grid{grid-template-columns:1fr 1fr 1fr}.stat:nth-child(3n+1){border-left:none}.stat:nth-child(n+4){border-top:1px solid var(--line)}} @media(max-width:560px){.stats .grid{grid-template-columns:1fr 1fr}.stat{border-left:1px solid var(--line)}.stat:nth-child(odd){border-left:none}.stat:nth-child(n+3){border-top:1px solid var(--line)}} /* ============ AWARD LINE ============ */ .awardline{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:22px var(--pad);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--parchment-dim)} .awardline .badge{display:inline-flex;align-items:center;gap:10px;color:var(--amber)} .awardline .badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px 1px var(--glow-strong)} /* ============ SECTION SHELL ============ */ section.block{padding-block:clamp(80px,12vh,150px)} .sec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:clamp(46px,6vh,76px)} .sec-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.04;letter-spacing:-0.025em;max-width:16ch;text-wrap:balance} .sec-head h2 em{font-style:italic} .sec-head .side{max-width:34ch;color:var(--parchment-dim);font-size:0.98rem;padding-top:8px} /* ============ WHAT WE BUILD ============ */ .build-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)} .bcard{background:var(--ink);padding:clamp(34px,4vw,56px);position:relative;transition:background .4s ease} .bcard:hover{background:var(--ink-2)} .bcard .idx{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.16em;color:var(--amber)} .bcard h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,2.6vw,2.3rem);letter-spacing:-0.02em;margin:22px 0 18px;line-height:1.08} .bcard p{color:var(--parchment-dim);max-width:42ch;font-size:1rem} .caps{list-style:none;margin-top:30px;display:flex;flex-direction:column;gap:0} .caps li{display:flex;align-items:center;gap:14px;padding:15px 0;border-top:1px solid var(--line);font-size:0.96rem;color:var(--parchment)} .caps li::before{content:"";width:5px;height:5px;background:var(--amber);border-radius:50%;flex:none} @media(max-width:760px){.build-grid{grid-template-columns:1fr}} /* ============ WORK LIST (home + index) ============ */ .work-layout{display:grid;grid-template-columns:1.15fr 0.85fr;gap:clamp(30px,5vw,72px);align-items:start} .work-list{display:flex;flex-direction:column} .wrow{ display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px; padding:clamp(22px,2.6vw,30px) 6px;border-top:1px solid var(--line); cursor:pointer;position:relative;transition:padding-left .4s cubic-bezier(.16,1,.3,1); } .work-list .wrow:last-child{border-bottom:1px solid var(--line)} .wrow::before{content:"";position:absolute;left:0;top:-1px;height:calc(100% + 1px);width:0;background:var(--amber);transition:width .4s cubic-bezier(.16,1,.3,1)} .wrow:hover,.wrow.active{padding-left:24px} .wrow:hover::before,.wrow.active::before{width:3px} .wrow .wnum{font-family:var(--mono);font-size:0.74rem;color:var(--parchment-faint);transition:color .3s} .wrow.active .wnum,.wrow:hover .wnum{color:var(--amber)} .wrow .wname{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2.3vw,2rem);letter-spacing:-0.02em;line-height:1.05;transition:color .3s} .wrow .wclient{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--parchment-faint);margin-top:9px} .wrow .warr{color:var(--parchment-faint);transition:transform .4s cubic-bezier(.16,1,.3,1),color .3s;opacity:0} .wrow:hover .warr,.wrow.active .warr{opacity:1;color:var(--amber);transform:translateX(0)} .wrow .warr{transform:translateX(-8px)} .work-detail{position:sticky;top:120px;border:1px solid var(--line);background:var(--ink-2);padding:clamp(26px,3vw,38px)} .wd-media{aspect-ratio:4/3;border:1px solid var(--line);position:relative;overflow:hidden;background: repeating-linear-gradient(135deg,var(--stripe) 0 2px,transparent 2px 11px),var(--ink-3)} .wd-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 80% at 25% 35%,var(--glow-card),transparent 65%)} .wd-hero{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(22px,3.4vw,38px);z-index:1} .wd-hero .h-num{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,5vw,4rem);line-height:1;letter-spacing:-0.025em;color:var(--parchment)} .wd-hero .h-num .amber{font-style:italic;color:var(--amber)} .wd-hero .h-rule{width:38px;height:1px;background:var(--amber);margin:18px 0 14px} .wd-hero .h-lbl{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--parchment-dim);max-width:22ch;line-height:1.55} .wd-mlabel{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:0.64rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--parchment-faint);white-space:nowrap;z-index:1} .wd-yr{position:absolute;top:14px;right:16px;font-family:var(--mono);font-size:0.68rem;letter-spacing:0.1em;color:var(--amber);z-index:1} .wd-body h4{font-family:var(--serif);font-weight:400;font-size:1.7rem;letter-spacing:-0.02em;margin:24px 0 6px;line-height:1.1} .wd-client{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--amber);margin-bottom:18px} .wd-desc{color:var(--parchment-dim);font-size:0.98rem;min-height:4.2em} .wd-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;padding-top:24px;border-top:1px solid var(--line)} .wd-tags span{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--parchment-dim);border:1px solid var(--line-2);padding:7px 12px;border-radius:2px} .wd-fade{animation:fade .5s ease} @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* Per-row description: hidden on desktop (the hover panel shows it), revealed on mobile where the detail panel is hidden so rows aren't bare. */ .wrow .wdesc{display:none;font-family:var(--grotesk);font-size:0.92rem;color:var(--parchment-dim);margin-top:10px;max-width:46ch;font-weight:300;line-height:1.5} @media(max-width:860px){.work-layout{grid-template-columns:1fr}.work-detail{display:none}.wrow .wdesc{display:block}} /* ============ DIFFERENTIATOR BAND ============ */ .band{position:relative;border-block:1px solid var(--line);overflow:hidden;padding-block:clamp(90px,16vh,180px)} .band-glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(80% 130% at 80% 50%,var(--glow-soft),transparent 60%)} .band .wrap{position:relative;z-index:2} .band p.big{font-family:var(--serif);font-weight:300;font-size:clamp(2.1rem,5.6vw,5rem);line-height:1.05;letter-spacing:-0.03em;max-width:18ch;text-wrap:balance} .band p.big em{font-style:italic;color:var(--amber)} .band .sub{margin-top:38px;max-width:52ch;color:var(--parchment-dim);font-size:clamp(1rem,1.5vw,1.18rem)} /* ============ TECH DNA ============ */ .dna-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .dcol{background:var(--ink);padding:clamp(28px,2.6vw,38px) clamp(22px,2vw,30px)} .dcol .dh{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--amber);padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:8px} .dcol ul{list-style:none} .dcol li{padding:13px 0;font-size:0.95rem;color:var(--parchment-dim);border-bottom:1px solid var(--line);transition:color .25s,padding-left .25s} .dcol li:last-child{border-bottom:none} .dcol li:hover{color:var(--parchment);padding-left:6px} @media(max-width:860px){.dna-grid{grid-template-columns:1fr 1fr}} @media(max-width:480px){.dna-grid{grid-template-columns:1fr}} /* Capability / categorized-stack columns for case studies. Flows for any count (5/6/8). Cells reuse .dcol. */ .cap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} @media(max-width:540px){.cap-grid{grid-template-columns:1fr}} .cap-lead{font-size:clamp(1.08rem,1.5vw,1.32rem);color:var(--parchment);line-height:1.6;max-width:60ch;margin-bottom:clamp(28px,4vh,40px)} .sec-lab{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--amber);margin-bottom:clamp(20px,3vh,28px)} /* Pillar cards: title + one-line summary. The simplified 'What we built'. */ .pillar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} @media(max-width:560px){.pillar-grid{grid-template-columns:1fr}} .pillar{background:var(--ink);padding:clamp(26px,2.6vw,36px) clamp(22px,2vw,30px);transition:background .4s ease} .pillar:hover{background:var(--ink-2)} .pillar .pn{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.16em;color:var(--amber)} .pillar h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,1.8vw,1.55rem);letter-spacing:-0.015em;line-height:1.14;margin:14px 0 10px} .pillar p{color:var(--parchment-dim);font-size:0.95rem;line-height:1.6;max-width:42ch} /* Built-with: compact tech + ecosystem strip near page bottom */ .builtwith{border:1px solid var(--line);background:var(--ink-2);padding:clamp(24px,2.6vw,32px)} .builtwith .bw-row + .bw-row{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)} .builtwith .bw-h{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--parchment-faint);margin-bottom:14px} .builtwith .stack-list{margin:0} /* ============ CULTURE ============ */ .cult-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,3vw,44px)} .cult{border-top:2px solid var(--amber);padding-top:24px} .cult .cn{font-family:var(--mono);font-size:0.7rem;color:var(--parchment-faint);letter-spacing:0.14em} .cult h4{font-family:var(--serif);font-weight:400;font-size:1.45rem;letter-spacing:-0.015em;margin:14px 0 12px;line-height:1.1} .cult p{color:var(--parchment-dim);font-size:0.94rem} @media(max-width:860px){.cult-grid{grid-template-columns:1fr 1fr}} @media(max-width:480px){.cult-grid{grid-template-columns:1fr}} /* ============ FLEXIBLE STAT BAND (case studies) ============ */ .statband{display:flex;flex-wrap:wrap;border:1px solid var(--line);background:var(--line);gap:1px} .statband .s{flex:1 1 200px;background:var(--ink);padding:clamp(26px,3vw,42px) clamp(22px,2.4vw,34px)} .statband .sv{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,3.2vw,2.9rem);line-height:1.02;letter-spacing:-0.02em} .statband .sv .amber{font-style:italic} .statband .sl{margin-top:14px;font-family:var(--mono);font-size:0.66rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--parchment-faint);line-height:1.55} /* ============ PROSE SECTIONS (case studies) ============ */ .prose-sec{display:grid;grid-template-columns:0.72fr 1.28fr;gap:clamp(28px,5vw,80px);padding-block:clamp(52px,8vh,92px);border-top:1px solid var(--line)} .prose-sec .lab{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--amber);padding-top:10px} .prose-sec .body>p{font-size:clamp(1.08rem,1.5vw,1.32rem);color:var(--parchment);line-height:1.6;max-width:58ch} .prose-sec .body>p+p{margin-top:1.1em} .prose-sec .body .muted{color:var(--parchment-dim)} .feat{list-style:none;margin-top:32px;display:flex;flex-direction:column} .feat li{padding:18px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline} .feat li:first-child{border-top:none;padding-top:0} .feat li .fn{font-family:var(--mono);font-size:0.7rem;color:var(--amber);letter-spacing:0.1em;transform:translateY(2px)} .feat li .ft{font-family:var(--serif);font-size:1.2rem;color:var(--parchment);letter-spacing:-0.01em} .feat li .fd{display:block;font-family:var(--grotesk);font-size:0.95rem;color:var(--parchment-dim);margin-top:6px;font-weight:300} @media(max-width:760px){.prose-sec{grid-template-columns:1fr;gap:18px}.prose-sec .lab{padding-top:0}} /* how-we-built: paragraph + horizontal stack chips below */ .stack-card{border:1px solid var(--line);background:var(--ink-2);padding:clamp(24px,2.4vw,30px);margin-top:clamp(30px,4vh,44px)} .stack-card .sh{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--parchment-faint);padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:18px} .stack-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px} .stack-list li{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.02em;color:var(--parchment-dim);padding:8px 12px;border:1px solid var(--line-2);border-radius:2px;white-space:nowrap;transition:color .25s,border-color .25s,background .25s} .stack-list li:hover{color:var(--parchment);border-color:var(--parchment-faint);background:var(--ink-3)} /* ============ PULL QUOTE ============ */ .pullquote{padding-block:clamp(64px,11vh,128px);border-top:1px solid var(--line);text-align:center;position:relative;overflow:hidden} .pullquote .qglow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(50% 80% at 50% 0%,var(--glow-softer),transparent 60%)} .pullquote .inner{position:relative;z-index:2;max-width:36ch;margin:0 auto} .pullquote .qmark{font-family:var(--serif);font-style:italic;font-size:4.5rem;line-height:0;color:var(--amber);opacity:.55;display:block;height:0.4em} .pullquote blockquote{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.22;letter-spacing:-0.02em;text-wrap:balance} .pullquote cite{display:block;margin-top:34px;font-family:var(--mono);font-style:normal;font-size:0.72rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--parchment-faint);line-height:1.7} .pullquote cite b{color:var(--parchment);font-weight:500} /* ============ NEXT PROJECT CARD ============ */ .nextcard{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:clamp(34px,5vw,64px) var(--pad);border-top:1px solid var(--line);transition:background .4s ease} .nextcard:hover{background:var(--ink-2)} .nextcard .nl{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--parchment-faint)} .nextcard .nn{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,4.4vw,3.4rem);letter-spacing:-0.025em;line-height:1.05;margin-top:14px} .nextcard .nn em{font-style:italic;color:var(--amber)} .nextcard .narr{font-family:var(--serif);font-size:clamp(2rem,5vw,3.4rem);color:var(--amber);transition:transform .4s ease;flex:none} .nextcard:hover .narr{transform:translateX(10px)} /* ============ MINI CARDS (more engagements) ============ */ .mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .mini{background:var(--ink);padding:clamp(26px,2.6vw,38px);transition:background .4s ease;display:flex;flex-direction:column;min-height:210px} .mini:hover{background:var(--ink-2)} .mini .tag{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--amber)} .mini .tag.com{color:var(--parchment-faint)} .mini h4{font-family:var(--serif);font-weight:400;font-size:1.5rem;letter-spacing:-0.015em;margin:18px 0 12px;line-height:1.1} .mini p{color:var(--parchment-dim);font-size:0.92rem} @media(max-width:860px){.mini-grid{grid-template-columns:1fr 1fr}} @media(max-width:540px){.mini-grid{grid-template-columns:1fr}} /* ============ CONTACT CTA SECTION ============ */ .contact{text-align:center;position:relative;overflow:hidden} .contact .glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 90% at 50% 110%,var(--glow-wash),transparent 65%)} .contact .wrap{position:relative;z-index:2} .contact h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,7vw,6rem);line-height:1;letter-spacing:-0.03em;text-wrap:balance} .contact h2 em{font-style:italic;color:var(--amber)} .contact .lead{margin:32px auto 44px;max-width:48ch;color:var(--parchment-dim);font-size:clamp(1rem,1.5vw,1.18rem)} .contact .cta-row{justify-content:center} /* ============ FOOTER ============ */ footer{border-top:1px solid var(--line);padding-block:clamp(50px,7vh,76px)} .foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start} .foot .brand{margin-bottom:20px} .foot .loc{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--parchment)} .foot .loc span{color:var(--amber);font-style:normal} .foot p.tiny{color:var(--parchment-faint);font-size:0.9rem;max-width:34ch;margin-top:14px} .fcol h5{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--parchment-faint);margin-bottom:18px} .fcol a{display:block;color:var(--parchment-dim);font-size:0.95rem;padding:7px 0;transition:color .25s} .fcol a:hover{color:var(--amber)} .foot-base{margin-top:clamp(40px,6vh,64px);padding-top:28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-family:var(--mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--parchment-faint)} @media(max-width:760px){.foot{grid-template-columns:1fr 1fr}.foot .brandcol{grid-column:1/-1}}