@font-face{font-family:Outfit;src:url(assets/outfit-variable.ttf) format('truetype');font-weight:100 900;font-display:swap}
:root{--lavender:#867fad;--lilac:#c1bcdd;--paper:#fff4ea;--ink:#2b2b2b;--body:Outfit,Arial,sans-serif;--display:Outfit,Arial,sans-serif;--gutter:clamp(1.375rem,4.8vw,6rem);color:var(--ink);background:var(--paper);font-family:var(--body);font-synthesis:none;scrollbar-color:var(--lavender) var(--paper)}
*{box-sizing:border-box}html{scroll-behavior:auto;scroll-padding-top:5rem}body{margin:0}::selection{color:var(--paper);background:var(--lavender)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none;text-underline-offset:.3em}button:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:6px}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;left:1.25rem;top:1.25rem;transform:translateY(-180%);z-index:100;color:var(--ink);background:var(--paper);padding:1rem}.skip-link:focus{transform:none}.logo-mask{display:block;background:currentColor;mask:url(assets/eli-mark.png) center/contain no-repeat;-webkit-mask:url(assets/eli-mark.png) center/contain no-repeat}
/* The scene is pinned; the image edges withdraw from the center. Normal flow is the fallback. */
.entrance-frame{position:relative}.hero{position:relative;height:100svh;min-height:42rem;isolation:isolate;overflow:hidden;color:var(--paper);background:var(--lavender)}.split-ready .hero{position:absolute;inset:0 auto auto 0;width:100%;height:100svh;min-height:0;z-index:2;background:transparent}.split-engaged .hero{pointer-events:none}.hero-stage{position:absolute;inset:0}.panel{position:absolute;top:0;bottom:0;width:50%;overflow:hidden}.panel-work{left:0;background:var(--lavender)}.panel-shop{right:0;background:var(--lilac)}.split-ready .panel,.split-ready .panel-media{will-change:transform}.panel-media{position:absolute;inset:-3%}.hero-poster,.hero-video{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.58)}.hero-video{opacity:0;transition:opacity .45s}.hero-video.is-ready{opacity:1}.panel-work .hero-poster,.panel-work .hero-video{object-position:47% center}.panel-shop .hero-poster,.panel-shop .hero-video{object-position:59% center}.panel-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,43,43,.65),transparent 36%,rgba(43,43,43,.08) 52%,rgba(43,43,43,.72));pointer-events:none}.portal-link{position:absolute;inset:0;z-index:1}.portal-link:focus-visible{outline-color:var(--paper);outline-offset:-12px}.hero-bottom{position:absolute;bottom:0;left:0;right:0;height:5.5rem;display:flex;align-items:center;justify-content:space-between;padding:0 2.2rem;z-index:6;font-size:.875rem}.scroll-cue{position:absolute;left:50%;top:.9rem;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;width:44px;height:44px}.scroll-line{height:24px;width:1px;background:var(--paper);opacity:.7}.motion-toggle{border:0;background:none;padding:.75rem 0;color:var(--paper);font-size:.875rem;min-width:6rem;text-align:right}.motion-toggle:disabled{cursor:default;opacity:.75}.hero-bottom a:focus-visible,.motion-toggle:focus-visible{outline-color:var(--paper)}.cursor-caption{position:absolute;left:0;top:0;z-index:8;pointer-events:none;transform:translate(-200px,-200px);opacity:0}.cursor-caption span{font-size:.875rem;color:var(--paper);padding:.65rem .95rem;background:var(--ink);border-radius:2rem;white-space:nowrap}.fragment{position:absolute;z-index:4;border:0;padding:0;background:none;color:var(--paper);width:clamp(8rem,14vw,15rem);height:clamp(11rem,18vw,19rem);overflow:visible;transform-origin:center}.fragment-work{left:12%;top:20%;transform:rotate(-9deg)}.fragment-shop{right:9%;top:27%;transform:rotate(8deg)}.fragment-image,.ascii-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.fragment-image{opacity:0;box-shadow:0 15px 45px rgba(43,43,43,.22)}.ascii-canvas{opacity:.88}.fragment-caption{position:absolute;left:0;bottom:-1.8rem;text-align:left;font-size:.8125rem;line-height:1.3;white-space:nowrap;opacity:0;pointer-events:none}.fragment:focus-visible{outline-color:var(--paper)}.fragment.is-revealed .fragment-image{opacity:1}.fragment.is-revealed .ascii-canvas{opacity:0}.fragment.is-revealed .fragment-caption{opacity:1}.fragment.is-revealed{transform:rotate(0)}
/* A continuous canvas, with images and type set at different scales. */
.about-section{padding:6rem var(--gutter) 3rem;background:var(--paper)}.split-ready .about-section{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:max(3rem,7svh);padding-bottom:max(2rem,5svh)}.about-content{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(2rem,7vw,8rem);align-items:center}.about-content h2{font-weight:800;font-size:clamp(2.7rem,5.6vw,6rem);line-height:1.02;letter-spacing:-.035em;text-transform:uppercase;margin:0;color:var(--ink)}.about-content h2 span{color:var(--lavender)}.about-copy{max-width:28rem;font-size:1.125rem;line-height:1.6}.about-copy p{margin:0 0 1.2rem}.about-person{display:flex;align-items:center;gap:1rem;margin-bottom:1.65rem;font-size:.875rem;line-height:1.5}.about-person img{width:4.75rem;height:4.75rem;border-radius:50%;object-fit:cover}.text-link{display:inline-block;font-size:.875rem;border-bottom:1px solid currentColor;line-height:1.8}.text-link:hover{color:var(--ink);text-decoration:underline}.practice-line{display:flex;justify-content:space-between;gap:1.25rem 2rem;flex-wrap:wrap;font-size:.875rem;margin-top:clamp(2.5rem,6svh,5rem);padding-top:1.5rem;border-top:1px solid var(--lilac)}.below-nav{background:var(--paper);display:flex;justify-content:space-between;align-items:center;padding:1.1rem var(--gutter);position:sticky;top:0;z-index:10;gap:1rem}.nav-mark{color:var(--lavender);width:3.6rem;height:2rem}.below-nav>.nav-legacy{display:flex;gap:2rem;font-size:.875rem}.below-nav a:hover{text-decoration:underline}.work-section{padding:7rem var(--gutter) 8rem;background:var(--paper)}.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;margin-bottom:3rem}.section-heading h2{font-weight:700;font-size:clamp(2.25rem,4.2vw,4.5rem);letter-spacing:-.035em;text-transform:uppercase;margin:0;line-height:1.05}.work-pair{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:7vw;align-items:start}.work-feature{display:flex;flex-direction:column;position:relative;min-width:0}.work-feature>img{width:100%;height:auto;aspect-ratio:1.35;object-fit:cover;filter:saturate(.65)}.work-feature>div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-top:1rem}.work-feature h3{font-weight:500;font-size:1.125rem;margin:0}.work-feature>div>span{font-size:.875rem}.identity-feature{padding-top:6rem}.identity-display{display:block;position:relative;padding:0 0 2rem;font-weight:700;font-size:clamp(2.4rem,4.9vw,5.5rem);line-height:1.04;letter-spacing:-.035em;text-transform:uppercase;color:var(--lavender)}.red-period{color:var(--ink)}.shop-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:2vw;padding:1rem var(--gutter) 9rem;align-items:center;background:var(--paper)}.shop-image{grid-column:2;grid-row:1;position:relative;min-height:34rem;aspect-ratio:.9;overflow:hidden;background:var(--lilac)}.shop-image img,.study-video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;object-position:62% center;filter:saturate(.45)}.study-video{opacity:0;transition:opacity .4s}.study-video.is-ready{opacity:1}.shop-image>span{position:absolute;left:1.8rem;bottom:1.5rem;color:var(--paper);font-size:.8125rem;text-shadow:0 2px 7px var(--ink)}.shop-copy{grid-column:1;grid-row:1;position:relative;z-index:1;padding:2rem 0;margin-right:-4vw}.shop-copy h2{font-weight:800;font-size:clamp(3rem,6.7vw,6rem);text-transform:uppercase;letter-spacing:-.035em;line-height:1;margin:0 0 2.5rem;color:var(--lavender)}.shop-copy>p{max-width:22rem;font-size:1.125rem;line-height:1.6}.shop-copy .shop-note{margin:1.8rem 0 1.1rem;font-size:.875rem}footer{background:var(--ink);color:var(--paper);padding:5rem var(--gutter) 2rem}.footer-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}.footer-intro h2{font-weight:700;font-size:clamp(3.25rem,7vw,6rem);text-transform:uppercase;line-height:1;letter-spacing:-.035em;margin:0}.footer-intro>a{font-size:clamp(1.25rem,2.8vw,2.5rem);border-bottom:1px solid currentColor;padding-bottom:.4rem}.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:2rem;margin-top:5rem;font-size:.875rem}.footer-bottom>div{display:flex;gap:1.5rem}footer a:hover{color:var(--lilac)}footer a:focus-visible{outline-color:var(--paper)}
.preloader{position:fixed;inset:0;z-index:90;background:transparent;display:flex;align-items:center;justify-content:center;color:var(--ink)}.preloader[hidden]{display:none}.loader-curtain{position:absolute;top:0;bottom:0;width:50%;background:var(--lilac);will-change:transform}.curtain-left{left:0}.curtain-right{right:0}.loader-content{position:relative;display:flex;align-items:center;flex-direction:column;z-index:1}.loader-name{font-size:.875rem;margin:.75rem 0 1.75rem}.loader-track{width:8.75rem;height:1px;background:var(--lavender)}.loader-fill{display:block;background:var(--ink);height:100%;transform:scaleX(0);transform-origin:left}.loader-count{font-size:.8125rem;font-variant-numeric:tabular-nums;margin-top:.75rem}.is-loading{overflow:hidden}
@media(max-width:1000px){.fragment{width:9rem;height:12rem}.fragment-work{top:22%}.fragment-shop{top:24%}.about-content{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2rem}.about-copy{font-size:1.0625rem}.identity-feature{padding-top:4rem}.work-feature>div{display:block}.work-feature>div>span{display:block;margin-top:.3rem}.shop-image{min-height:28rem}}
@media(max-width:700px){.hero{min-height:38rem}.hero-bottom{padding:0 1.1rem 1rem;height:5rem;font-size:.8125rem;align-items:flex-end}.hover-hint{font-size:.75rem;max-width:4.5rem;line-height:1.4}.motion-toggle{font-size:.8125rem;min-width:5.5rem;padding:0}.scroll-cue{font-size:.8125rem;top:.1rem}.fragment{width:clamp(5rem,23vw,8rem);height:clamp(7rem,32vw,11rem)}.fragment-work{left:10%;top:18%}.fragment-shop{right:10%;top:23%}.fragment-caption,.cursor-caption{display:none}.below-nav{padding:1rem var(--gutter)}.below-nav>.nav-legacy{gap:1.1rem;font-size:.8125rem;flex-wrap:wrap;justify-content:flex-end}.nav-mark{width:2.6rem;height:1.5rem}.about-section{padding:4rem var(--gutter) 2.5rem}.split-ready .about-section{padding-top:max(2rem,5svh);padding-bottom:2rem}.about-content{grid-template-columns:1fr;gap:1.8rem}.about-content h2{font-size:clamp(2.1rem,7.8vw,3.35rem)}.about-copy{max-width:32rem;font-size:1rem;line-height:1.5}.about-copy p{margin-bottom:1rem}.about-person{margin-bottom:1rem;gap:.8rem}.about-person img{width:3.2rem;height:3.2rem}.practice-line{display:grid;grid-template-columns:1fr 1fr;font-size:.8125rem;gap:.8rem;margin-top:1.8rem;padding-top:1.2rem}.work-section{padding:4rem var(--gutter) 5rem}.section-heading{display:block;margin-bottom:2.5rem}.section-heading h2{font-size:2.5rem;margin-bottom:1.3rem}.work-pair{grid-template-columns:1fr;gap:2rem}.work-feature>img{aspect-ratio:1.2}.identity-feature{padding-top:1rem;padding-left:12vw}.identity-display{font-size:clamp(2.5rem,9vw,3.8rem);padding-bottom:1.4rem}.work-feature>div{display:flex;flex-wrap:wrap;gap:.5rem 1rem}.work-feature h3{font-size:1rem}.work-feature>div>span{font-size:.8125rem}.shop-section{grid-template-columns:1fr;gap:1rem;padding-bottom:5rem}.shop-copy{grid-column:1;grid-row:1;margin-right:0;padding-top:0}.shop-copy h2{font-size:clamp(2.7rem,10vw,4.5rem);margin-bottom:1.6rem}.shop-copy>p{font-size:1.0625rem}.shop-image{grid-column:1;grid-row:2;min-height:24rem;margin-left:8vw}.shop-image>span{left:1.2rem;font-size:.75rem;max-width:12rem}footer{padding:3rem var(--gutter) 1.6rem}.footer-intro{display:block}.footer-intro h2{font-size:clamp(2.8rem,11vw,4.5rem)}.footer-intro>a{display:inline-block;font-size:1.5rem;margin-top:2rem}.footer-bottom{margin-top:3rem;flex-wrap:wrap;gap:1.5rem;font-size:.8125rem}.footer-bottom>div{gap:1.25rem;order:3;width:100%}.footer-bottom>span:last-child{margin-left:auto}}
@media(max-height:550px) and (min-width:701px){.fragment{width:6rem;height:8rem;top:18%}.hero-bottom{height:4rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}.cursor-caption,.hero-video,.study-video,.preloader{display:none}.fragment:hover .fragment-image,.fragment:focus-visible .fragment-image,.fragment[aria-pressed=true] .fragment-image{opacity:1}.fragment:hover .ascii-canvas,.fragment:focus-visible .ascii-canvas,.fragment[aria-pressed=true] .ascii-canvas{opacity:0}}
/* Keep long display words within their column when text is enlarged. */
.about-content h2,.identity-display,.shop-copy h2,.footer-intro h2{overflow-wrap:anywhere}
.about-person>span{min-width:0}.about-person img{flex-shrink:0}.footer-intro>a{overflow-wrap:anywhere}


/* Quiet choices flank the supplied PFP, aligned with its exact center. */
.panel-work{color:var(--ink)}
.panel-work .hero-poster{object-position:24% center;filter:none}
.panel-work .panel-shade{background:none}
.panel-work .portal-title a{text-shadow:none}
.panel-work .portal-link:focus-visible,.panel-work .portal-title a:focus-visible,.fragment-work:focus-visible{outline-color:var(--ink)}
.fragment-work,.hover-hint{color:var(--ink)}
.scroll-line{background:var(--ink)}
.panel-shop .hero-poster{object-position:54% 43%;filter:none}
.panel-shop .panel-shade{background:linear-gradient(180deg,rgba(43,43,43,.16),transparent 36%,rgba(43,43,43,.08) 52%,rgba(43,43,43,.38))}
.work-feature>img[src="assets/arcbound-clouds.jpg"],.shop-image img[src="assets/shirt-9351.jpg"]{filter:none}
.shop-image img[src="assets/shirt-9351.jpg"]{object-position:54% 36%}
.hero{--profile-size:clamp(6rem,12vw,11rem);--choice-gap:clamp(1.25rem,3vw,3rem)}
.brand-bridge{position:absolute;left:50%;top:50%;width:var(--profile-size);height:var(--profile-size);transform:translate(-50%,-50%);z-index:5;pointer-events:auto}
.hero-profile{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 16px rgba(43,43,43,.22))}
.brand-name{position:absolute;top:calc(100% + .8rem);left:50%;transform:translateX(-50%);font-size:.8125rem;font-weight:400;white-space:nowrap;color:var(--ink);text-shadow:0 1px 8px rgba(255,244,234,.7)}
.portal-caption{position:absolute;top:50%;bottom:auto;left:auto;right:calc(var(--profile-size)/2 + var(--choice-gap));transform:translateY(-50%);width:max-content;z-index:3;pointer-events:none}
.panel-shop .portal-caption{left:calc(var(--profile-size)/2 + var(--choice-gap));right:auto}
.portal-title{font-weight:500;font-size:clamp(1rem,1.9vw,1.8rem);line-height:1.2;letter-spacing:.04em;margin:0;white-space:nowrap}
.portal-title a{display:block;padding:.6rem 0;pointer-events:auto;text-shadow:0 2px 10px rgba(43,43,43,.7)}
.portal-title a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.45em}
.portal-title a:focus-visible{outline-color:var(--paper)}
.loader-profile{width:4.5rem;height:4.5rem;object-fit:contain}
/* The liquid canvas belongs only to the icon; native panels own the split. */
.profile-link{position:relative;display:block;width:100%;height:100%;border-radius:50%;touch-action:pan-y}
.profile-link:focus-visible{outline-color:var(--paper);outline-offset:8px}
.profile-visual{position:absolute;inset:-22%;display:block;pointer-events:none;opacity:0;transition:opacity .25s}
.profile-visual>div{width:100%!important;height:100%!important;pointer-events:none!important}
.profile-visual canvas{display:block;pointer-events:none!important}
.profile-link.liquid-ready .profile-visual{opacity:1}
.profile-link.liquid-ready .hero-profile{opacity:0}
.hero-profile{transition:opacity .25s}
@media(prefers-reduced-motion:reduce){.profile-visual{display:none}}

/* The original About portraits lead the introduction in an open composition. */
.about-section{position:relative;isolation:isolate;overflow:hidden;padding-top:5rem;padding-bottom:2.5rem}
.about-sky{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.2;pointer-events:none;z-index:-1;mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 42%,transparent 85%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 42%,transparent 85%)}
.about-content{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2.5rem,7vw,7rem)}
.about-visual{position:relative;width:min(38vw,49svh,33rem);max-width:100%;margin:0 auto}
.portrait-deck{position:relative;display:block;width:100%;aspect-ratio:4/5;border:0;padding:0;background:transparent;color:var(--ink);perspective:900px;touch-action:pan-y;isolation:isolate}
.portrait-deck:disabled{cursor:default}
.portrait-deck:focus-visible{outline-color:var(--lavender);outline-offset:16px}
.portrait-card{position:absolute;inset:0;display:block;overflow:hidden;transform-origin:50% 70%;box-shadow:0 15px 50px rgba(43,43,43,.14);backface-visibility:hidden}
.portrait-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.portrait-card[data-slot="0"]{z-index:3;transform:rotate(-2deg)}
.portrait-card[data-slot="1"]{z-index:2;transform:translate(-17%,5%) rotate(-11deg) scale(.92)}
.portrait-card[data-slot="2"]{z-index:1;transform:translate(18%,-3%) rotate(10deg) scale(.9)}
.portrait-turn{position:absolute;right:1rem;bottom:1rem;z-index:4;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;color:var(--ink);background:var(--paper);pointer-events:none;transition:background .2s}
.portrait-turn svg{display:block;width:1.3rem;height:1.3rem}
.portrait-deck:hover .portrait-turn,.portrait-deck:focus-visible .portrait-turn{background:var(--lilac)}
.portrait-deck:disabled .portrait-turn{display:none}
.about-visual figcaption{display:flex;justify-content:space-between;gap:1rem;margin-top:1.65rem;font-size:.8125rem;line-height:1.4}
.portrait-index{font-variant-numeric:tabular-nums;white-space:nowrap}
.about-eyebrow{display:block;font-size:.8125rem;font-weight:400;margin-bottom:1.2rem}
.about-content h2{font-size:clamp(4rem,8.2vw,8.5rem);line-height:.88;letter-spacing:-.055em;margin:0 0 1.4rem;overflow-wrap:normal}
.about-copy{max-width:27rem;font-size:1.0625rem;line-height:1.55}
.about-copy .about-role{font-size:clamp(1.35rem,2.5vw,2.2rem);line-height:1.15;font-weight:400;margin:0 0 1.5rem}
.about-signoff{display:flex;align-items:center;gap:2rem;margin-top:1.1rem}
.about-signature{display:block;width:4.5rem;height:auto;flex-shrink:0}
.about-signoff .text-link{font-size:.875rem;white-space:nowrap}
.practice-line{position:relative;border:0;padding-top:0;margin-top:clamp(2.5rem,6svh,4rem)}
@media(max-width:1000px) and (min-width:701px){.about-content{gap:3rem}.about-visual{width:min(34vw,42svh)}.about-content h2{font-size:clamp(3.5rem,8vw,6rem)}.about-copy{font-size:1rem}.about-copy .about-role{font-size:1.6rem}}
@media(max-width:700px){.about-section,.split-ready .about-section{padding-top:2.8rem;padding-bottom:2rem}.about-content{grid-template-columns:1fr;gap:2.1rem}.about-visual{width:min(57vw,29svh,16rem)}.about-visual figcaption{margin-top:1.15rem;font-size:.75rem}.about-copy{max-width:31rem;font-size:1rem;line-height:1.45}.about-eyebrow{margin-bottom:.8rem}.about-content h2{font-size:clamp(2.8rem,13.5vw,4.7rem);line-height:.9;margin-bottom:1rem}.about-copy .about-role{font-size:1.35rem;margin-bottom:1rem}.about-signoff{margin-top:.5rem;gap:1.5rem}.about-signature{width:3rem}.practice-line{margin-top:1.6rem;font-size:.75rem;gap:.7rem}.portrait-turn{width:2rem;height:2rem;right:.65rem;bottom:.65rem}}
@media(max-height:600px) and (min-width:701px){.split-ready .about-section{padding-top:2rem;padding-bottom:1.5rem}.about-visual{width:min(30vw,47svh)}.about-content h2{font-size:clamp(3rem,6vw,5rem)}.about-eyebrow{margin-bottom:.7rem}.about-copy .about-role{font-size:1.4rem;margin-bottom:.8rem}.about-copy{font-size:.9375rem}.about-signature{width:2.75rem}.about-signoff{margin-top:.3rem}.practice-line{margin-top:1.5rem}}

/* One continuous story: the practice, Arcbound, its services, then Eli's own pieces. */
.below-nav>.nav-legacy{gap:clamp(1rem,2.4vw,2rem)}
.work-section{padding-top:clamp(3.5rem,7vw,7rem);padding-bottom:clamp(4rem,7vw,7rem)}
.practice-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:5vw;align-items:center;margin-bottom:clamp(4rem,7vw,7rem)}
.practice-intro h2{font-size:clamp(2.5rem,5.2vw,6rem);font-weight:700;line-height:1;letter-spacing:-.045em;text-transform:uppercase;margin:0}
.practice-plus{display:block;font-weight:300;font-size:.7em;line-height:1.45;color:var(--lavender)}
.practice-copy{max-width:29rem;font-size:1.125rem;line-height:1.6}
.practice-copy p{margin:0 0 1.5rem}
.practice-copy .text-link{margin-top:.5rem}
.practice-gallery{margin:clamp(4rem,8vw,8rem) calc(-1 * var(--gutter)) 0}
.gallery-viewport{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:auto;overscroll-behavior-x:contain}
.gallery-viewport::-webkit-scrollbar{display:none}
.gallery-viewport:focus-visible{outline:2px solid var(--ink);outline-offset:-6px}
.gallery-slide{display:block;flex:0 0 100%;min-width:0;aspect-ratio:16/9;scroll-snap-align:start;scroll-snap-stop:always}
.gallery-slide img{display:block;width:100%;height:100%;object-fit:cover}
.gallery-slide:focus-visible{outline-color:var(--paper);outline-offset:-12px}
.gallery-meta{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.65rem var(--gutter) 0;font-size:.875rem}
.gallery-controls{display:flex;align-items:center;gap:1rem}
.gallery-controls[hidden]{display:none}
.gallery-controls button{display:grid;place-items:center;min-width:44px;min-height:44px;padding:.5rem;border:0;background:none;color:var(--ink)}
.gallery-controls button:hover{color:var(--lavender)}
.gallery-controls button:disabled{opacity:.28;cursor:default}
.gallery-controls svg{width:24px;height:24px}
.gallery-count{font-variant-numeric:tabular-nums;white-space:nowrap}
.creative-mantra{margin:clamp(4rem,9vw,9rem) 0 0 auto;max-width:62rem;text-align:right;font-size:clamp(2.5rem,5.8vw,6.2rem);line-height:1.06;letter-spacing:-.045em;font-weight:400}
.arcbound-section{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.4fr);gap:5vw;align-items:center;padding:0 var(--gutter) clamp(4rem,7vw,7rem);background:var(--paper)}
.arcbound-context{font-size:.875rem;line-height:1.5;margin:0 0 1.7rem}
.arcbound-intro h2{font-size:clamp(2.5rem,4.5vw,5.2rem);font-weight:700;line-height:1.03;letter-spacing:-.045em;margin:0 0 2rem}
.arcbound-copy{max-width:27rem;font-size:1.125rem;line-height:1.6}
.arcbound-copy p{margin:0 0 1.2rem}
.arcbound-copy .text-link{margin-top:.75rem}
.arcbound-editorial{margin:2rem 0 0;overflow:hidden;aspect-ratio:.95}
.arcbound-editorial img{display:block;width:100%;height:100%;object-fit:cover;object-position:54% center}
.brand-journey{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:clamp(3rem,9vw,10rem);padding:2rem var(--gutter) clamp(4rem,7vw,7rem);background:var(--paper)}
.journey-visual{position:sticky;top:clamp(6rem,15svh,9rem);align-self:start}
.journey-image{display:block;width:100%;height:auto;aspect-ratio:.85;object-fit:cover}
.journey-image-solution{width:78%;aspect-ratio:1.2;margin:3rem 0 0 22%}
.journey-motion .journey-visual{height:60svh;min-height:25rem;max-height:44rem}
.journey-motion .journey-image{position:absolute;inset:0;width:100%;height:100%;margin:0;aspect-ratio:auto;object-position:center}
.journey-motion .journey-image-solution{opacity:0;object-position:48% center}
.journey-step{min-height:72svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:2.5rem 0}
.journey-inline{display:none}
.journey-context{font-size:.875rem;line-height:1.5;margin:0 0 1.4rem}
.journey-step h2{font-size:clamp(2.5rem,3.8vw,4.5rem);font-weight:600;line-height:1.07;letter-spacing:-.04em;margin:0 0 2rem}
.journey-step>p:not(.journey-context){max-width:28rem;font-size:1.125rem;line-height:1.6;margin:0 0 1.2rem}
.journey-step .text-link{margin-top:.5rem}
.services-section{padding:2rem var(--gutter) clamp(5rem,9vw,9rem);background:var(--paper)}
.services-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6vw;align-items:center;margin-bottom:2.5rem}
.services-intro h2{font-size:clamp(3rem,6.3vw,6.5rem);font-weight:700;letter-spacing:-.05em;line-height:1;margin:0}
.services-intro p{max-width:30rem;font-size:1.125rem;line-height:1.6;margin:0}
.service-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6vw;align-items:baseline;padding:2.25rem 0;border-bottom:1px solid var(--lilac)}
.service-row h3{font-size:clamp(1.5rem,2.8vw,2.8rem);font-weight:500;letter-spacing:-.025em;line-height:1.16;margin:0}
.service-row p{max-width:30rem;font-size:1.125rem;line-height:1.6;margin:0}
.experience-section{margin-top:clamp(4rem,7vw,7rem)}
.experience-section h3{font-size:1.125rem;font-weight:400;margin:0 0 2.5rem}
.experience-logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(1.5rem,4vw,4rem);align-items:center}
.experience-logos img{display:block;width:100%;max-width:13rem;max-height:4.5rem;object-fit:contain}
.shop-section{padding-top:2rem}
.shop-copy .shop-bridge{font-size:1rem;line-height:1.5;max-width:20rem;margin:0 0 1.8rem}
.footer-contact{display:flex;flex-direction:column;align-items:flex-end;gap:1.5rem;min-width:0}
.footer-email{font-size:clamp(1.25rem,2.8vw,2.5rem);border-bottom:1px solid currentColor;padding-bottom:.4rem;overflow-wrap:anywhere}
.footer-contact .text-link{border-bottom-color:var(--paper)}
.footer-contact .text-link:hover{color:var(--lilac)}
.footer-bottom>div{flex-wrap:wrap}
@media(max-width:1000px){.practice-intro{grid-template-columns:1fr;gap:2.5rem}.practice-copy{max-width:33rem}.practice-intro h2{font-size:clamp(2.5rem,6.3vw,5rem)}.arcbound-copy{font-size:1.0625rem}.footer-bottom{flex-wrap:wrap}.footer-bottom>div{order:3;width:100%}.footer-bottom>span:last-child{margin-left:auto}}
@media(max-width:900px){.arcbound-section{grid-template-columns:1fr;gap:2rem}.arcbound-intro h2{font-size:clamp(2.6rem,6.5vw,4.7rem)}.arcbound-copy{max-width:32rem}.arcbound-editorial{width:88%;margin:0 0 0 12%;aspect-ratio:1.35}.brand-journey{display:block;padding-top:1rem}.journey-visual{display:none}.journey-inline{display:block;width:100%;height:auto;max-height:36rem;object-fit:cover;margin-bottom:2rem}.journey-problem .journey-inline{width:76%;aspect-ratio:.85}.journey-solution .journey-inline{width:86%;margin-left:14%;aspect-ratio:1.2}.journey-step{min-height:0;padding:2rem 0 3.5rem}.journey-step h2{font-size:clamp(2.5rem,6vw,4rem)}.journey-step>p:not(.journey-context){max-width:32rem}.services-intro,.service-row{gap:3rem}.experience-logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 3rem}.experience-logos img{max-width:11rem;max-height:3.5rem}}
@media(max-width:700px){.below-nav>.nav-legacy{gap:.6rem 1rem;font-size:.875rem}.work-section{padding-top:3rem;padding-bottom:4rem}.practice-intro{margin-bottom:3.5rem;gap:2rem}.practice-intro h2{font-size:clamp(2.25rem,10.5vw,3.5rem)}.practice-copy{font-size:1.0625rem;line-height:1.55}.practice-gallery{margin-top:3.5rem}.gallery-meta{font-size:.8125rem;gap:.5rem}.gallery-controls{gap:.4rem}.gallery-controls button{min-width:44px;min-height:44px}.creative-mantra{font-size:clamp(2.2rem,8.9vw,3.5rem);margin-top:4rem;text-align:left}.arcbound-section{padding-bottom:3rem}.arcbound-context{margin-bottom:1.2rem}.arcbound-intro h2{font-size:clamp(2.5rem,10.5vw,3.7rem);margin-bottom:1.7rem}.arcbound-copy{font-size:1.0625rem}.arcbound-editorial{width:100%;margin:0;aspect-ratio:1.25}.brand-journey{padding-bottom:1.5rem}.journey-step{padding-bottom:2.5rem}.journey-step h2{font-size:clamp(2.25rem,9vw,3.4rem);margin-bottom:1.5rem}.journey-step>p:not(.journey-context){font-size:1.0625rem;line-height:1.55}.journey-problem .journey-inline{width:85%}.journey-solution .journey-inline{width:100%;margin-left:0}.services-section{padding-top:1rem;padding-bottom:4rem}.services-intro{grid-template-columns:1fr;gap:1.5rem}.services-intro h2{font-size:3rem}.services-intro p{font-size:1.0625rem}.service-row{grid-template-columns:1fr;gap:.8rem;padding:1.6rem 0}.service-row h3{font-size:1.6rem}.service-row p{font-size:1rem;line-height:1.5}.experience-section{margin-top:3.5rem}.experience-section h3{margin-bottom:2rem}.experience-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 2.5rem}.experience-logos img{max-height:3.2rem}.shop-section{padding-top:0}.shop-copy .shop-bridge{margin-bottom:1.5rem}.footer-contact{align-items:flex-start;margin-top:2rem}.footer-email{font-size:1.5rem}.footer-bottom>div{gap:1rem 1.25rem;font-size:.875rem}}

/* Real, selectable characters project the portrait relief into the page. */
.portrait-stage{position:relative;aspect-ratio:819/1024;width:100%}
.portrait-stage .portrait-deck{position:absolute;inset:0;height:100%;aspect-ratio:auto}
.ascii-portrait{position:absolute;inset:0;z-index:4;touch-action:pan-y}
.ascii-portrait[hidden]{display:none}
.ascii-text{position:absolute;inset:0;margin:0;border:0;padding:0;white-space:pre;overflow:hidden;font-family:monospace;font-weight:700;font-variant-ligatures:none;letter-spacing:0;color:var(--ink);background:none;cursor:text;user-select:text;-webkit-user-select:text;transition:opacity .45s;outline:none}
.ascii-text:focus-visible{outline:1px solid var(--lavender);outline-offset:12px;border-radius:50%}
.portrait-stage[data-view=ascii] .portrait-deck{opacity:0;pointer-events:none;transition:opacity .45s}
.portrait-stage[data-view=ascii][data-preview=true] .portrait-deck{opacity:1}
.portrait-stage[data-preview=true] .ascii-text{opacity:0}
.portrait-stage.is-selecting .ascii-text{opacity:1}
.portrait-stage.is-selecting .portrait-deck{opacity:0}
.portrait-copy,.portrait-mode{border:0;border-bottom:1px solid currentColor;padding:0 0 .15rem;background:none;color:var(--ink);font:inherit;white-space:nowrap;min-height:28px}
.portrait-copy:hover,.portrait-mode:hover{color:var(--lavender)}
.portrait-copy[hidden],.portrait-mode[hidden],.portrait-index[hidden]{display:none}
.about-visual figcaption{align-items:center;flex-wrap:wrap;gap:.5rem 1rem;min-height:28px;margin-top:.4rem}.portrait-caption-text{margin-right:auto}
@media(max-width:700px){.about-visual{width:min(72vw,30svh,22rem)}.about-visual figcaption{margin-top:.35rem;min-height:44px;font-size:.8125rem}.portrait-copy,.portrait-mode{min-height:44px}.ascii-text:focus-visible{outline-offset:6px}}
@media(max-height:600px) and (min-width:701px){.about-visual{width:min(30vw,43svh)}}
/* The original photographs remain visible as fading echoes around the text. */
.portrait-echo{position:absolute;z-index:5;display:block;width:31%;aspect-ratio:4/5;border:0;padding:0;background:none;opacity:var(--echo-opacity,.24);transition:opacity .35s;touch-action:pan-y}
.portrait-echo[hidden]{display:none}
.portrait-echo img{display:block;width:100%;height:100%;object-fit:contain;box-shadow:0 8px 24px rgba(43,43,43,.1)}
.portrait-echo-festival{left:-10%;top:24%;transform:rotate(-10deg)}
.portrait-echo-waterfall{right:-10%;top:56%;transform:rotate(9deg)}
.portrait-echo:hover,.portrait-echo:focus-visible{opacity:1}
.portrait-stage[data-preview=true] .portrait-echo{opacity:.12}
.portrait-stage[data-preview=true] .portrait-echo:hover,.portrait-stage[data-preview=true] .portrait-echo:focus-visible{opacity:1}
.portrait-card img{object-fit:contain}
.ascii-text::selection{color:var(--ink);background:var(--lilac)}
@media(prefers-reduced-motion:reduce){.ascii-text,.portrait-stage[data-view=ascii] .portrait-deck,.portrait-echo{transition:none}}
.panel-work .hero-poster,.panel-work .hero-video{object-position:40% center;filter:none}
.hero-video[data-hover-only].is-ready{opacity:0}
.hero-video[data-hover-only].is-playing{opacity:1}
/* Work side now sits on darker video imagery, so it takes the same light ink as Shop. */
.panel-work,.fragment-work,.hover-hint{color:var(--paper)}
.panel-work .portal-title a{text-shadow:0 2px 10px rgba(43,43,43,.7)}
.hover-hint{text-shadow:0 1px 8px rgba(43,43,43,.6)}
.panel-work .portal-link:focus-visible,.panel-work .portal-title a:focus-visible,.fragment-work:focus-visible{outline-color:var(--paper)}
.brand-name{color:var(--paper);text-shadow:0 1px 8px rgba(43,43,43,.75)}
/* Hero depth. --px/--py (-1..1) come from the pointer on fine pointers only.
   GSAP owns the transforms of the cards, titles and media, so the CSS depth offset
   rides on their children through `translate`; media offsets are set by GSAP. */
@property --float{syntax:'<length>';inherits:false;initial-value:0px}
.hero{--px:0;--py:0}
.portal-title a{translate:calc(var(--px)*7px) calc(var(--py)*5px)}
.fragment>*{translate:calc(var(--px)*18px) calc(var(--py)*14px + var(--float));animation:hero-float 9s ease-in-out infinite}
.fragment-shop>*{animation-duration:11s;animation-delay:-4s}
@keyframes hero-float{0%,100%{--float:0px}50%{--float:-9px}}
.motion-paused .fragment>*{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.fragment>*{animation:none;translate:none}.portal-title a{translate:none}}
.split-ready .profile-link,.split-ready .portal-title,.split-ready .fragment{will-change:transform,opacity}
/* Brands. Static: each group is a heading and a wrapped wall of marks (no JS or reduced motion).
   Live: a sticky full-screen stage. Every mark sits in one uniform grid; scrolling moves a spotlight through the groups. */
.brands-section{position:relative;isolation:isolate;overflow-x:hidden;overflow-x:clip;background:var(--paper);padding:clamp(4rem,8vw,8rem) var(--gutter)}
.brands-haze{position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(42% 36% at 18% 62%,rgba(193,188,221,.5),transparent 70%),radial-gradient(38% 42% at 84% 40%,rgba(134,127,173,.2),transparent 72%);filter:blur(8px)}
.brands-glow{position:absolute;left:50%;top:50%;width:min(80rem,130vw);height:min(44rem,80vh);transform:translate(-50%,-50%);z-index:-1;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(255,244,234,.8),rgba(255,244,234,0) 92%)}
.brands-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem 4rem;flex-wrap:wrap}
.brands-head h2{margin:0;font-weight:700;font-size:clamp(2.5rem,5.2vw,5.6rem);line-height:1;letter-spacing:-.045em;text-transform:uppercase;color:var(--ink);max-width:12ch}
.brands-note{margin:0;max-width:28rem;font-size:1.0625rem;line-height:1.55;min-height:3.1em}
.brands-note:empty{display:none}
.brand-group{margin-top:clamp(3rem,6vw,5rem)}
.brand-group h3{margin:0 0 .5rem;font-weight:500;font-size:clamp(1.4rem,2.2vw,2rem);letter-spacing:-.02em}
.brand-group p{margin:0 0 2rem;max-width:32rem;font-size:1rem;line-height:1.55}
.brand-list{display:flex;flex-wrap:wrap;align-items:center;gap:2.2rem 3rem;margin:0;padding:0;list-style:none;font-size:clamp(1.05rem,1.6vw,1.45rem)}
.brand{flex:none;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.brand-mark{display:block;width:var(--w);height:var(--h);background:currentColor;opacity:.82;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;transition:opacity .35s,color .35s}
/* Live stage */
.brands-live.brands-section{padding:0;height:var(--brands-h,600svh)}
.brands-live .brands-haze,.brands-live .brands-glow{position:fixed}
.brands-live .brands-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(1rem,2.6vh,2rem);padding:clamp(5.25rem,10.5vh,7rem) var(--gutter) clamp(1.25rem,3.5vh,2.75rem);perspective:1400px}
.brands-live .brands-haze,.brands-live .brands-glow{position:absolute}
.brands-live .brands-head{align-items:end}
.brands-live .brands-head h2{font-size:clamp(2.2rem,4.4vw,4.6rem)}
.brands-side{display:grid;gap:.9rem;justify-items:end;text-align:right}
.brands-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.4rem 1.6rem;margin:0;padding:0;list-style:none}
.brands-nav[hidden]{display:none}.brands-nav button{appearance:none;border:0;background:none;padding:.2rem 0;font-size:1rem;color:var(--ink);opacity:.38;border-bottom:1px solid transparent;transition:opacity .35s,border-color .35s}
.brands-nav button:hover{opacity:.75}.brands-nav button[aria-current=true]{opacity:1;border-bottom-color:currentColor}
.brands-live .brands-note{min-height:0;max-width:24rem;font-size:.9375rem;text-align:right}
.brands-live .brand-wall{position:relative;display:grid;grid-template-columns:repeat(var(--cols,10),minmax(0,1fr));grid-auto-rows:var(--rowh,4rem);align-content:center;transform-style:preserve-3d;min-height:0}
.brands-live .brand-group,.brands-live .brand-list{display:contents}
.brands-live .brand-group h3,.brands-live .brand-group p{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.brands-live .brand{width:auto;height:auto;min-width:0}
.brands-live .brand-mark{width:var(--lw);height:var(--lh);opacity:.86}
.brands-live .brand.is-off{display:none}
@media(hover:hover) and (pointer:fine){.brands-live .brand:hover .brand-mark{opacity:1;color:var(--lavender)}}
@media(max-width:900px){.brands-side{justify-items:start;text-align:left}.brands-nav{justify-content:flex-start}.brands-live .brands-note{text-align:left}.brands-live .brands-head{display:grid;gap:1rem}}
@media(max-width:700px){.brands-section{padding:3.5rem var(--gutter) 4.5rem}.brands-head h2{font-size:clamp(2.2rem,10vw,3.4rem)}.brand-list{gap:1.6rem 2rem;font-size:1rem}.brands-live .brands-head h2{font-size:clamp(2rem,9vw,3rem)}.brands-nav{gap:.3rem 1.1rem}.brands-nav button{font-size:.9375rem}}
@media(prefers-reduced-motion:reduce){.brand-mark,.brands-nav button{transition:none}}
/* Elevated cues from the first eliwright.co: periwinkle fields, tilted impact type, layered pluses,
   the Connect circle filled with the Instagram sky, and a difference-blend cursor dot. */
.impact{position:relative;isolation:isolate;overflow:hidden;overflow:clip;display:flex;flex-direction:column;min-height:112svh;padding:clamp(3rem,6vw,5.5rem) var(--gutter) 0;background:var(--lilac);color:var(--paper)}
.impact-copy{position:relative;z-index:2;max-width:33rem;font-size:clamp(1.125rem,1.45vw,1.375rem);line-height:1.5;text-align:left}
.impact-copy p{margin:0 0 1.15rem}
.impact-copy .text-link{color:var(--paper);font-size:.9375rem}.impact-copy .text-link:hover{color:var(--ink)}
.impact-type{position:relative;z-index:1;margin:auto 0 0;padding:0 0 clamp(4.5rem,9vw,8rem);width:max-content;font-weight:900;font-size:clamp(3.4rem,12.43vw,15rem);line-height:.9;letter-spacing:-.08em;word-spacing:.22em;text-transform:uppercase;color:var(--paper);transform:perspective(1200px) rotate(-5.27deg);transform-origin:0 50%}
.impact-line{display:block;white-space:nowrap}.impact-line>span{display:inline-block}
.impact-line-2{margin-top:-.5em}
.impact-plus{display:block;position:relative;z-index:2;width:max-content;margin:.1em 0 0 36%;font-size:1em;font-weight:500;line-height:.9;color:var(--lavender);will-change:transform}
.impact-trail{position:absolute;right:var(--gutter);top:clamp(3rem,6vw,5.5rem);font-weight:800;font-size:clamp(2.5rem,5vw,5rem);letter-spacing:-.05em;line-height:1;color:var(--lavender);opacity:.7}
.work-section{padding-top:clamp(4rem,7vw,7rem)}
.mantra-wrap{position:relative;isolation:isolate;overflow-x:clip;margin-top:clamp(4rem,9vw,9rem)}
.mantra-wrap .creative-mantra{margin:0;max-width:62rem;text-align:left}
.mantra-plus{position:absolute;z-index:-1;right:0;top:50%;transform:translateY(-50%);font-weight:800;font-size:clamp(7rem,19vw,19rem);line-height:.7;letter-spacing:-.06em;color:var(--lilac);pointer-events:none}
footer{position:relative;overflow:hidden;overflow:clip;background:var(--lilac);color:var(--paper);padding:clamp(4rem,7vw,6.5rem) var(--gutter) 2rem}
footer a:hover{color:var(--ink)}footer a:focus-visible{outline-color:var(--ink)}
.footer-stage{position:relative}
.footer-title{margin:0;font-weight:800;font-size:clamp(4rem,13.4vw,15rem);line-height:.88;letter-spacing:-.05em;text-transform:uppercase;color:var(--lavender);text-align:left}
.footer-line{display:block;overflow:hidden;padding-bottom:.04em;white-space:nowrap}.footer-line>span{display:inline-block}
.footer-line:nth-child(2){padding-left:.9em}
.footer-period{color:var(--paper)}
.connect-cta{position:absolute;right:clamp(0rem,3vw,4rem);top:34%;z-index:2;display:grid;place-items:center;width:clamp(8.5rem,17vw,17.5rem);aspect-ratio:1;border-radius:50%;overflow:hidden;isolation:isolate;box-shadow:0 1.5rem 3rem rgba(64,58,110,.25);color:var(--paper);transition:box-shadow .4s}
.connect-media{position:absolute;inset:-12%;z-index:-1;background:url(assets/connect-sky.jpg) center/cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.connect-label{font-weight:800;font-size:clamp(1.05rem,2.3vw,2.4rem);letter-spacing:-.02em;text-transform:uppercase;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.connect-cta:hover{box-shadow:0 2rem 4rem rgba(64,58,110,.35)}.connect-cta:hover .connect-media{transform:scale(1.12) rotate(8deg)}
footer .connect-cta:hover{color:var(--paper)}
.connect-cta:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.footer-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;max-width:62rem;margin:clamp(3.5rem,7vw,6rem) auto 0;font-size:1.0625rem}
footer .footer-bottom{margin-top:clamp(3rem,5vw,4.5rem);padding-top:1.5rem;border-top:1px solid rgba(255,244,234,.45)}
footer .footer-email{font-size:inherit;border:0;padding:0}
.cursor-dot{position:fixed;left:0;top:0;z-index:2147483000;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;opacity:0;transform:translate3d(-100px,-100px,0);transition:width .28s,height .28s,margin .28s,opacity .2s}
.cursor-dot.is-on{opacity:1}.cursor-dot.is-link{width:60px;height:60px;margin:-30px 0 0 -30px}
html.has-cursor-dot,html.has-cursor-dot a,html.has-cursor-dot button{cursor:none}
@media(max-width:900px){.impact{min-height:0}.impact-type{margin-top:5rem}.connect-cta{top:auto;bottom:-1.5rem}}
@media(max-width:700px){.impact{padding-top:4.75rem}.impact-copy{font-size:1.0625rem}.impact-type{font-size:clamp(3.2rem,16vw,6rem);padding-bottom:4.5rem}.impact-trail{display:none}.mantra-plus{font-size:9rem;right:-1rem}.footer-title{font-size:clamp(2.6rem,14.6vw,6rem)}.connect-cta{position:relative;right:auto;bottom:auto;margin:-1.25rem 0 0 auto;width:8.5rem}.footer-links{justify-content:flex-start;gap:.75rem 1.75rem;margin-top:3rem}}
@media(prefers-reduced-motion:reduce){.connect-media,.connect-label,.cursor-dot{transition:none}}

/* Simple navbar from eliwright.co: "Eli" on the left, the plus button on the right. It sits over the page and flips
   between cream (over sky and periwinkle) and ink (over paper). */
.below-nav{position:sticky;top:0;z-index:40;height:0;padding:0;background:none;display:block}
.nav-bar{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:1rem var(--gutter);color:var(--ink);pointer-events:none;transition:color .35s}
.nav-bar>*{pointer-events:auto}
.below-nav.is-light .nav-bar,.below-nav.is-open .nav-bar{color:var(--paper)}
.nav-name{font-weight:700;font-size:1.0625rem;letter-spacing:.06em;line-height:2}
.below-nav .nav-name:hover{text-decoration:none;color:var(--lavender)}
.nav-plus{appearance:none;position:relative;display:grid;place-items:center;width:38px;height:38px;margin-right:-8px;padding:0;border:0;background:none;color:var(--paper)}
.nav-plus::before,.nav-plus::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;transition:width .5s cubic-bezier(.34,1.56,.64,1),height .5s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.nav-plus::before{width:32px;height:32px;margin:-16px 0 0 -16px;border:1px solid currentColor;opacity:0;color:var(--ink)}
.below-nav.is-light .nav-plus::before,.below-nav.is-open .nav-plus::before{color:var(--paper)}
.nav-plus::after{width:22px;height:22px;transform:translate(-50%,-50%);background:var(--lavender)}
.nav-plus-mark{position:relative;z-index:1;font-size:41px;font-weight:300;line-height:1;transform:translateY(-2px);transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.nav-plus:hover::before,.nav-plus:focus-visible::before{width:38px;height:38px;margin:-19px 0 0 -19px;opacity:.55}
.nav-plus:hover::after,.nav-plus:focus-visible::after{width:20px;height:20px}
.nav-plus:hover .nav-plus-mark{transform:translateY(-2px) rotate(90deg)}
.nav-plus[aria-expanded=true] .nav-plus-mark{transform:translateY(-2px) rotate(45deg)}
.site-menu{position:fixed;inset:0;z-index:-1;display:flex;flex-direction:column;justify-content:center;padding:6rem var(--gutter) 2.5rem;background:var(--lavender);color:var(--paper);overflow:hidden}
.site-menu[hidden]{display:none}
.site-menu-sky{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:.9}
.site-menu ul{margin:0;padding:0;list-style:none}
.site-menu li{overflow:hidden}
.site-menu ul a{display:inline-block;font-weight:900;font-size:clamp(2.8rem,8vw,7.5rem);line-height:.98;letter-spacing:-.06em;text-transform:uppercase}
.site-menu ul a:hover{color:var(--lilac)}
.site-menu-foot{display:flex;flex-wrap:wrap;gap:.75rem 2rem;margin:auto 0 0;padding-top:2rem;font-size:1rem}
.site-menu-foot a:hover{text-decoration:underline}
html.menu-open{overflow:hidden}
/* Sky accent as a full-bleed background behind About. */
.about-section{position:relative;isolation:isolate;background:var(--lavender);color:var(--paper)}
.about-section .about-sky{opacity:1;-webkit-mask-image:none;mask-image:none}
.about-section::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(134,127,173,.25),rgba(134,127,173,.05) 45%,rgba(64,56,110,.22) 78%,#c1bcdd 100%)}
.about-section .about-content h2,.about-section .about-content h2 span,.about-section .about-copy,.about-section .about-role,.about-section .about-eyebrow,.about-section figcaption,.about-section .text-link{color:var(--paper)}
.about-section .text-link:hover{color:var(--lilac)}
.about-section .practice-line{border-top-color:rgba(255,244,234,.45);color:var(--paper)}
.about-section .about-signature{filter:brightness(0) invert(1)}
.shop-section{overflow-x:clip}
/* ---- v12: one periwinkle field, as on eliwright.co ----
   Inside these sections the light tokens are remapped: what was paper ground is now periwinkle,
   ink text becomes a deep periwinkle so long copy stays readable, large display type is cream. */
:root{--deep:#38335f;background:var(--lilac);scrollbar-color:var(--lavender) var(--lilac)}
body{background:var(--lilac)}
.work-section,.brands-section,.arcbound-section,.brand-journey,.services-section,.shop-section{--paper:#c1bcdd;--ink:#38335f;--lilac:rgba(255,244,234,.42);background:#c1bcdd;color:var(--deep)}
.work-section .text-link:hover,.arcbound-section .text-link:hover,.brand-journey .text-link:hover,.shop-section .text-link:hover{color:#fff4ea}
.creative-mantra,#arcbound-title,.journey-step h2,#services-title,.brands-head h2,.section-heading h2{color:#fff4ea}
.service-row h3{color:#fff4ea}
.identity-display .red-period,.brands-head .red-period{color:#fff4ea}
.shop-image>span{color:#fff4ea;text-shadow:0 2px 10px rgba(40,36,70,.55)}
.impact-copy{color:var(--deep)}
.impact-copy .text-link:hover{color:#fff4ea}
/* Logos sit in deep periwinkle, light up cream. */
.brands-section .brand{color:#38335f}
.brands-live .brand:hover .brand-mark{color:#fff4ea;opacity:1}
.brands-glow{background:radial-gradient(closest-side,rgba(255,244,234,.38),rgba(255,244,234,0) 92%)}
.brands-haze{background:radial-gradient(42% 36% at 18% 62%,rgba(134,127,173,.28),transparent 70%),radial-gradient(38% 42% at 84% 40%,rgba(255,244,234,.22),transparent 72%)}
.brands-nav button{color:#38335f}
/* Service rules draw across as each row arrives. */
.service-row{position:relative;border-bottom:0}
.service-row::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,244,234,.55);transform:scaleX(var(--rule,1));transform-origin:0 50%}
/* Masked headline lines. */
.rv-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.rv-line>span{display:inline-block;transform-origin:0 100%}
.shop-copy h2 .rv-line,.identity-display .rv-line{padding-right:.05em}
/* Smooth scroll. */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
html.lenis{scroll-behavior:auto}

/* ---- Footer, matched to eliwright.co ----
   Links: the label rolls up and a bolder copy rolls in under it.
   Connect: a cream dot appears near the top of the circle and swells until it fills it; the word turns lavender. */
.roll{position:relative;display:inline-block;overflow:hidden;vertical-align:top;line-height:1.25;height:1.25em}
.roll>span{display:block;transition:transform .62s cubic-bezier(.76,0,.24,1)}
.roll>span::after{content:attr(data-label);display:block;font-weight:700;letter-spacing:-.01em}
a:hover>.roll>span,a:focus-visible>.roll>span{transform:translateY(-1.25em)}
.footer-links{font-size:.875rem;letter-spacing:.02em;text-transform:uppercase;font-weight:500}
.footer-links a:hover,footer .footer-bottom a:hover{color:var(--paper)}
.connect-cta{background:var(--lavender)}
.connect-cta::before{content:"";position:absolute;left:50%;top:19%;z-index:0;width:240%;aspect-ratio:1;border-radius:50%;background:var(--paper);transform:translate(-50%,-50%) scale(.012);opacity:0;transition:transform .85s cubic-bezier(.65,0,.35,1),opacity .25s;pointer-events:none}
.connect-cta:hover::before,.connect-cta:focus-visible::before{transform:translate(-50%,-50%) scale(1);opacity:1}
.connect-label{position:relative;z-index:1;font-weight:900;transition:transform .5s cubic-bezier(.2,.7,.2,1),color .4s .22s}
footer .connect-cta:hover,footer .connect-cta:focus-visible{color:var(--lavender)}
.connect-cta:hover .connect-media{transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){.roll>span,.connect-cta::before,.connect-label{transition:none}}
.impact-copy .text-link{color:var(--deep)}
.about-section::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16%;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(193,188,221,0),#c1bcdd)}.about-section>.about-content,.about-section>.practice-line{position:relative;z-index:1}

/* ======================= v13: homepage copy and sitemap =======================
   One periwinkle field. Display type cream, reading text deep periwinkle, accents lavender.
   No small labels above headlines, no step numbers, nothing scrolls sideways. */
.audience-section,.story-section,.method-section,.ways-section,.writing-section,.contact-section,.site-footer{--paper:#c1bcdd;--ink:#38335f;--lilac:rgba(255,244,234,.42);position:relative;background:#c1bcdd;color:var(--deep)}
:root{--cream:#fff4ea}

/* Buttons: a cream dot swells from the plus, like the Connect circle. */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:.65rem;min-height:3.25rem;padding:.85rem 1.6rem;border-radius:999px;font-size:1rem;font-weight:500;letter-spacing:-.005em;line-height:1.1;text-decoration:none;transition:color .45s cubic-bezier(.65,0,.35,1),border-color .45s}
.btn::before{content:"";position:absolute;left:1.6rem;top:50%;z-index:-1;width:300%;aspect-ratio:1;border-radius:50%;background:var(--cream);transform:translate(-50%,-50%) scale(0);transition:transform .7s cubic-bezier(.65,0,.35,1)}
.btn:hover::before,.btn:focus-visible::before{transform:translate(-50%,-50%) scale(1)}
.btn-solid{background:var(--lavender);color:var(--cream)}
.btn-solid:hover,.btn-solid:focus-visible{color:var(--lavender)}
.btn-line{border:1px solid currentColor;color:var(--cream)}
.btn-line:hover,.btn-line:focus-visible{color:var(--lavender);border-color:var(--cream)}
.btn-plus{display:inline-block;font-size:1.5rem;font-weight:300;line-height:.6;transform:translateY(-.04em);transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.btn:hover .btn-plus,.btn:focus-visible .btn-plus{transform:translateY(-.04em) rotate(90deg)}
.btn:focus-visible{outline:2px solid var(--cream);outline-offset:4px}

/* Navbar: name left; Work with me and the plus on the right. */
.nav-end{display:flex;align-items:center;gap:1.1rem;pointer-events:auto}
.nav-cta{display:inline-flex;align-items:center;min-height:2.25rem;padding:.35rem 1.05rem;border:1px solid currentColor;border-radius:999px;font-size:.875rem;font-weight:500;transition:background-color .35s,color .35s,border-color .35s}
.nav-cta:hover,.nav-cta:focus-visible{background:var(--cream);border-color:var(--cream);color:var(--lavender);text-decoration:none}
.below-nav .nav-cta:hover{text-decoration:none}
.site-menu-cta{font-weight:700}

/* Hero copy over the sky, one column. */
.intro-section .intro-content{display:block;max-width:min(64rem,100%)}
.intro-title{margin:0 0 1.6rem;font-weight:800;text-transform:uppercase;letter-spacing:-.055em;line-height:.86;color:var(--cream)}
.intro-name{display:block;font-size:clamp(4.2rem,10.4vw,10.5rem)}
.intro-name+.intro-name{color:var(--cream)}
.intro-role{display:block;margin-top:1.1rem;font-size:clamp(1.6rem,2.7vw,2.6rem);font-weight:400;letter-spacing:-.02em;line-height:1.1;text-transform:none}
.intro-sub{max-width:36rem;margin:0 0 1.1rem;font-size:clamp(1.0625rem,1.35vw,1.3rem);line-height:1.55;color:var(--cream)}
.intro-position{max-width:40rem;margin:0;font-size:1rem;line-height:1.65;color:rgba(255,244,234,.86)}
.intro-position a{color:var(--cream);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;transition:text-decoration-color .3s,color .3s}
.intro-position a:hover{text-decoration-color:transparent}
.intro-impact{position:relative;margin:clamp(2.2rem,5svh,3.6rem) 0 clamp(1.8rem,4svh,2.6rem);font-size:clamp(2rem,4.1vw,4.2rem);font-weight:400;line-height:1.02;letter-spacing:-.045em;color:var(--cream)}
.intro-impact>span{display:block}
.intro-impact>span:nth-child(2){padding-left:.9em}
.intro-impact::before{content:"+";position:absolute;left:-.08em;top:-.62em;font-size:1.35em;font-weight:300;line-height:1;color:var(--lavender);opacity:.9}
.intro-actions{display:flex;flex-wrap:wrap;gap:.85rem}
.intro-actions .btn-line{border-color:rgba(255,244,234,.8)}
.split-ready .intro-section{justify-content:flex-start;padding-top:clamp(5rem,12svh,8rem);padding-bottom:clamp(4rem,10svh,7rem)}

/* Record strip inside the tilted band. */
.record-strip{position:relative;z-index:2;overflow:hidden;overflow:clip;margin:0 calc(var(--gutter)*-1) clamp(3rem,7vw,6rem);padding:1.15rem 0;border-block:1px solid rgba(255,244,234,.45)}
.record-track{display:flex;width:max-content;will-change:transform}
.record-run{display:flex;align-items:center;flex:none}
.record-item{padding:0 1.6rem;white-space:nowrap;font-size:clamp(1rem,1.45vw,1.35rem);font-weight:500;letter-spacing:-.01em;color:var(--deep)}
.record-plus{font-size:1.6em;font-weight:300;line-height:1;color:var(--cream)}
.impact{min-height:auto;padding-top:clamp(5rem,8vw,7rem)}
.impact .impact-type{margin-top:clamp(1rem,4vw,4rem)}

/* Who this is for. */
.audience-section{padding:clamp(6rem,11vw,11rem) var(--gutter) clamp(5rem,9vw,9rem)}
.audience-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(2rem,6vw,7rem);align-items:end;margin-bottom:clamp(3.5rem,7vw,6.5rem)}
.audience-head h2,.story-copy h2,.method-head h2,.ways-section h2,.work-section h2,.writing-head h2{margin:0;font-weight:700;letter-spacing:-.045em;line-height:1.02;color:var(--cream)}
.audience-head h2{font-size:clamp(2.7rem,5.6vw,6rem);max-width:13ch}
.audience-head p{max-width:34rem;margin:0;font-size:1.125rem;line-height:1.6}
.audience-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3.5vw,3.5rem)}
.audience-card{position:relative;padding-top:1.6rem}
.audience-card::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,244,234,.6);transform:scaleX(var(--rule,1));transform-origin:0 50%}
.audience-card p{margin:0;font-size:1.0625rem;line-height:1.6}
.audience-card strong{display:block;margin-bottom:.6rem;font-size:clamp(1.3rem,1.8vw,1.7rem);font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--cream)}
.card-plus,.way-plus,.step-plus{display:inline-block;font-size:2.4rem;font-weight:300;line-height:1;color:var(--lavender)}
.card-plus{margin-bottom:1rem}

/* About. */
.story-section{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,7vw,8rem);align-items:center;padding:clamp(4rem,8vw,8rem) var(--gutter)}
.story-section .about-visual{width:min(34vw,62svh,30rem);margin:0}
.story-section .about-visual figcaption{color:var(--deep)}
.story-copy h2{font-size:clamp(2.3rem,4.2vw,4.6rem);max-width:16ch;margin-bottom:2rem}
.story-copy>p{max-width:34rem;margin:0 0 1.05rem;font-size:1.0625rem;line-height:1.62}
.story-copy>p.story-belief{max-width:30rem;margin:1.8rem 0 2rem;font-size:clamp(1.35rem,2vw,1.85rem);line-height:1.3;letter-spacing:-.02em;color:var(--cream)}
.story-signoff{display:flex;align-items:center;gap:1.4rem}
.story-signoff .about-signature{width:4rem;filter:brightness(0) invert(1)}
.story-section .text-link,.writing-section .text-link,.work-section .text-link{color:var(--deep)}
.story-section .text-link:hover,.writing-section .text-link:hover,.work-section .text-link:hover{color:var(--cream)}

/* How I work. */
.method-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2.5rem,8vw,9rem);padding:clamp(5rem,9vw,9rem) var(--gutter)}
.method-head{position:sticky;top:clamp(6rem,18svh,10rem);align-self:start}
.method-head h2{font-size:clamp(2.8rem,6vw,6.4rem);margin-bottom:1.8rem}
.method-head p{max-width:30rem;margin:0;font-size:1.125rem;line-height:1.6}
.method-steps{position:relative;list-style:none;margin:0;padding:0 0 0 clamp(2.5rem,4vw,3.75rem)}
.method-steps::before,.method-steps::after{content:"";position:absolute;left:0;top:.6rem;bottom:.6rem;width:1px;background:rgba(255,244,234,.35)}
.method-steps::after{background:var(--cream);transform:scaleY(var(--fill,1));transform-origin:50% 0}
.method-step{position:relative;padding:clamp(2.5rem,9svh,6rem) 0}
.method-step:first-child{padding-top:.5rem}
.method-step p{margin:0;max-width:24ch;font-size:clamp(1.7rem,3vw,3.1rem);font-weight:400;line-height:1.14;letter-spacing:-.035em;color:var(--cream);opacity:var(--lit,1)}
.step-plus{position:absolute;left:calc(clamp(2.5rem,4vw,3.75rem)*-1);top:clamp(2.5rem,9svh,6rem);width:2rem;margin-left:-1rem;margin-top:-.2rem;text-align:center;background:#c1bcdd}
.method-step:first-child .step-plus{top:.5rem}

/* Ways to work together. */
.ways-section{padding:clamp(5rem,9vw,9rem) var(--gutter)}
.ways-section h2{font-size:clamp(2.7rem,5.6vw,6rem);max-width:14ch;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.ways-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:auto auto;gap:clamp(1rem,2vw,1.6rem)}
.way{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1.4rem;padding:clamp(1.6rem,2.6vw,2.4rem);border:1px solid rgba(255,244,234,.5);border-radius:28px}
.way p{margin:0;max-width:34rem;font-size:1.0625rem;line-height:1.6}
.way strong{display:block;margin-bottom:.55rem;font-size:clamp(1.3rem,1.8vw,1.75rem);font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--cream)}
.way .btn{margin-top:auto}
.way-lead{grid-row:span 2;justify-content:flex-start;padding:clamp(2rem,3.6vw,3.4rem);border:0;background:var(--lavender);color:var(--cream)}
.way-lead p{font-size:clamp(1.15rem,1.5vw,1.375rem);color:rgba(255,244,234,.92)}
.way-lead strong{font-size:clamp(1.9rem,3vw,3rem);letter-spacing:-.035em}
.way-lead .way-plus{color:var(--cream);font-size:3.4rem}
.way-lead .btn-solid{background:var(--cream);color:var(--lavender)}
.way-lead .btn-solid::before{background:#38335f}
.way-lead .btn-solid:hover,.way-lead .btn-solid:focus-visible{color:var(--cream)}

/* Selected work. */
.work-section{padding:clamp(5rem,9vw,9rem) var(--gutter)}
.work-section h2{font-size:clamp(2.7rem,5.6vw,6rem);margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.work-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.5rem,5vw,5rem) clamp(1.25rem,3vw,3rem)}
.tile:nth-child(even){margin-top:clamp(3rem,9vw,9rem)}
.tile-media{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:22px;display:grid;place-items:center}
.tile-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile-mark .tile-media{background:var(--lavender)}
.tile-logo{display:block;width:52%;aspect-ratio:3/1;background:var(--cream);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.tile-type .tile-media{background:#38335f}
.tile-word{font-size:clamp(2.2rem,5vw,4.8rem);font-weight:800;letter-spacing:-.05em;color:var(--cream)}
.tile-word span{color:var(--lavender)}
.tile-esquire .tile-media{background:var(--cream);padding:clamp(1.6rem,4vw,3.4rem);place-items:end start}
.tile-quote{margin:0;font-size:clamp(1.3rem,2.3vw,2.3rem);line-height:1.18;letter-spacing:-.03em;color:var(--lavender)}
.tile-text{margin:1.1rem 0 .4rem;font-size:1rem;line-height:1.5}
.tile-text strong{font-weight:600;color:var(--cream)}
.proof{max-width:58rem;margin:clamp(5rem,10vw,9rem) 0 clamp(2rem,4vw,3rem)}
.proof blockquote{margin:0}
.proof p{margin:0;font-size:clamp(1.7rem,3.4vw,3.4rem);line-height:1.12;letter-spacing:-.035em;color:var(--cream)}
.proof figcaption{margin-top:1.4rem;font-size:.9375rem}

/* E_I Lab. */
.lab-section{padding-top:clamp(4rem,8vw,7rem)}
.lab-section .shop-copy h2{margin:0 0 2rem;font-size:clamp(2.4rem,4.4vw,4.8rem);font-weight:700;text-transform:none;letter-spacing:-.045em;line-height:1.02;color:var(--cream);max-width:13ch}
.lab-section .shop-copy>p{color:var(--deep)}
.lab-section .shop-image{border-radius:22px}

/* Writing and newsletter. */
.writing-section{padding:clamp(5rem,9vw,9rem) var(--gutter)}
.writing-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,6vw,7rem);align-items:end}
.writing-head h2{font-size:clamp(2.7rem,5.4vw,5.8rem);max-width:13ch}
.writing-copy p{max-width:34rem;margin:0 0 1rem;font-size:1.0625rem;line-height:1.6}
.writing-cats{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:clamp(3rem,6vw,5rem) 0 clamp(2.5rem,4vw,3.5rem);padding:0}
.writing-cats li{padding:.5rem 1.05rem;border:1px solid rgba(255,244,234,.55);border-radius:999px;font-size:.9375rem;color:var(--cream)}
.writing-latest{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,2.5rem)}
.piece{position:relative;display:flex;flex-direction:column;gap:.7rem;padding:1.4rem 2.4rem 1.6rem 0;border-top:1px solid rgba(255,244,234,.6);text-decoration:none}
.piece-where{font-size:.875rem}
.piece-title{font-size:clamp(1.25rem,1.9vw,1.75rem);font-weight:500;letter-spacing:-.025em;line-height:1.2;color:var(--cream)}
.piece-arrow{position:absolute;right:0;top:1.3rem;font-size:1.3rem;color:var(--cream);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.piece:hover .piece-arrow{transform:translate(4px,-4px)}
.piece:hover .piece-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.signup{max-width:46rem;margin-top:clamp(4rem,8vw,6.5rem)}
.signup-row{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.signup input{flex:1 1 16rem;min-width:0;min-height:3.25rem;padding:.6rem .2rem;border:0;border-bottom:1px solid rgba(255,244,234,.75);border-radius:0;background:transparent;font:inherit;font-size:1.25rem;color:var(--cream)}
.signup input::placeholder{color:rgba(56,51,95,.75)}
.signup input:focus{outline:0;border-bottom-color:var(--cream)}
.signup input:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
.signup-note{margin:.9rem 0 0;font-size:.875rem}
.signup-status{margin:.5rem 0 0;min-height:1.4em;font-size:.875rem;color:var(--deep)}

/* Contact: the big lavender lines and the Connect circle. */
.contact-section{overflow:hidden;overflow:clip;padding:clamp(5rem,9vw,9rem) var(--gutter) clamp(4rem,7vw,6rem)}
.contact-title{font-size:clamp(3rem,9vw,11rem)}
.contact-section .connect-cta{top:-1rem;right:clamp(0rem,2vw,3rem)}
.connect-label{text-align:center;line-height:.95}
.contact-section .connect-label{font-size:clamp(1rem,1.9vw,2rem)}
.contact-section .connect-cta:hover,.contact-section .connect-cta:focus-visible{color:var(--lavender)}
.contact-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem clamp(2rem,6vw,6rem);max-width:68rem;margin:clamp(2.5rem,5vw,4.5rem) 0 0 auto}
.contact-copy p{margin:0;font-size:1.125rem;line-height:1.6}
.contact-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.4rem}

/* Footer. */
.site-footer{overflow:hidden;overflow:clip;padding:clamp(4rem,7vw,6rem) var(--gutter) 1.8rem;border-top:1px solid rgba(255,244,234,.45);color:var(--deep)}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:2.5rem}
.footer-wordmark{margin:0;font-size:clamp(2.4rem,6.2vw,6.6rem);font-weight:800;letter-spacing:-.05em;line-height:.95;color:var(--cream)}
.footer-wordmark span{color:var(--lavender);font-weight:400}
.footer-tagline{margin:.9rem 0 0;font-size:1.0625rem}
.signup-footer{margin-top:0;flex:0 1 30rem}
.signup-footer input{font-size:1.0625rem}
.site-footer .footer-links{justify-content:flex-start;gap:.8rem 2.2rem;max-width:none;margin:clamp(3rem,6vw,4.5rem) 0 0;color:var(--cream)}
.site-footer .footer-bottom{color:var(--deep);border-top-color:rgba(255,244,234,.45)}
.site-footer .footer-bottom>div{display:flex;gap:1.6rem}
.site-footer a:hover{color:var(--cream)}
.rv-word{display:inline-block}

@media(max-width:900px){
  .audience-head,.writing-head,.contact-copy{grid-template-columns:1fr}
  .audience-cards,.writing-latest{grid-template-columns:1fr}
  .story-section{grid-template-columns:1fr}
  .story-section .about-visual{width:min(78vw,26rem)}
  .method-section{grid-template-columns:1fr}
  .method-head{position:relative;top:auto}
  .ways-grid{grid-template-columns:1fr}
  .way-lead{grid-row:auto}
  .work-tiles{grid-template-columns:1fr}
  .tile:nth-child(even){margin-top:0}
  .contact-copy{margin-left:0}
  .contact-section .connect-cta{position:relative;top:auto;right:auto;margin:1.5rem 0 0 auto}
  .nav-cta{font-size:.8125rem;padding:.3rem .85rem;min-height:2rem}
}
@media(max-width:700px){
  .intro-name{font-size:clamp(3.6rem,19vw,5.4rem)}
  .intro-impact{font-size:clamp(1.8rem,8.4vw,2.6rem)}
  .intro-impact>span:nth-child(2){padding-left:.5em}
  .contact-title{font-size:clamp(2.4rem,11.2vw,5rem)}
  .contact-section .connect-cta{width:8.5rem}
  .record-item{padding:0 1.1rem}
  .btn{min-height:3rem;padding:.75rem 1.3rem}
}
@media(prefers-reduced-motion:reduce){.btn::before,.btn-plus,.piece-arrow{transition:none}}
/* v13 polish */
.below-nav .nav-bar::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 1.6rem);z-index:-1;pointer-events:none;background:linear-gradient(180deg,#c1bcdd 38%,rgba(193,188,221,0));opacity:1;transition:opacity .35s}
.below-nav.is-open .nav-bar::before{opacity:0}
.audience-head h2,.story-copy h2,.method-head h2,.ways-section h2,.work-section h2,.writing-head h2,.lab-section .shop-copy h2,.proof p,.method-step p{text-wrap:balance}
.story-section{align-items:start}
.story-section .about-visual{position:sticky;top:clamp(6rem,16svh,9rem)}
.contact-title{font-size:clamp(3rem,7.6vw,9.5rem)}
.contact-section .connect-cta{width:clamp(8rem,13vw,14rem);top:-2.2rem}
@media(max-width:900px){.story-section .about-visual{position:relative;top:auto}}
.story-section,.audience-section,.method-section,.ways-section,.work-section,.writing-section{overflow-x:clip}
@media(max-width:900px){.contact-section .connect-cta{top:auto;width:8.5rem}}@media(max-width:700px){.contact-title{font-size:clamp(2.2rem,10.4vw,4.4rem)}}
@media(max-width:700px){.contact-title{font-size:clamp(2rem,9.6vw,4rem)}.contact-title .footer-line:nth-child(2){padding-left:.35em}}
.contact-section .footer-period{color:var(--cream)}.contact-section .connect-cta{color:var(--cream)}.contact-section .connect-cta::before{background:var(--cream)}.contact-section .connect-cta:focus-visible{outline-color:var(--cream)}
.impact .impact-trail{top:auto;bottom:clamp(2rem,5vw,4.5rem)}
/* v14: the three-photo fold returns to the hero; the impact line gets its own moment further down. */
.intro-section .intro-content{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2.5rem,6vw,7rem);align-items:center;max-width:none}
.intro-section .about-visual{width:min(32vw,58svh,30rem);margin:0 auto}
.intro-section .about-visual figcaption{color:var(--cream)}
.intro-copy{min-width:0}
.intro-name{font-size:clamp(3.6rem,7.6vw,8.4rem)}
.intro-sub{margin-top:.2rem}
.intro-actions{margin-top:clamp(1.8rem,4svh,2.6rem)}
.split-ready .intro-section{justify-content:center;padding-top:clamp(4.5rem,10svh,7rem);padding-bottom:clamp(3rem,7svh,5rem)}
/* About is now type only: the headline holds while the story reads beside it. */
.story-section{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start}
.story-section .story-copy h2{position:sticky;top:clamp(6rem,16svh,9rem)}
.story-copy{display:contents}
.story-section>.story-copy>h2{grid-column:1;grid-row:1 / span 8;align-self:start;max-width:13ch;font-size:clamp(2.5rem,4.8vw,5.4rem)}
.story-section>.story-copy>p,.story-section>.story-copy>.story-signoff{grid-column:2}
.story-section{row-gap:0}
/* Impact line. */
.mantra-section{position:relative;overflow:hidden;overflow:clip;background:#c1bcdd;padding:clamp(5rem,10vw,10rem) var(--gutter) clamp(4rem,8vw,8rem)}
.mantra-section .mantra-wrap{margin:0}
.mantra-section .creative-mantra{margin:0;max-width:none;text-align:left;font-size:clamp(3rem,8.4vw,9.4rem);line-height:.98;letter-spacing:-.05em;color:var(--cream)}
.mantra-section .mantra-indent{display:inline-block;padding-left:.9em}
.mantra-section .mantra-plus{position:absolute;right:var(--gutter);top:clamp(2rem,6vw,5rem);font-size:clamp(5rem,14vw,15rem);font-weight:800;letter-spacing:-.08em;line-height:1;color:var(--lavender);opacity:.55;z-index:0}
.mantra-section .creative-mantra{position:relative;z-index:1}
@media(max-width:900px){
  .intro-section .intro-content{grid-template-columns:1fr;gap:2.2rem}
  .intro-section .about-visual{width:min(64vw,30svh,20rem);margin:0}
  .story-copy{display:block}
  .story-section .story-copy h2{position:relative;top:auto}
  .story-section{grid-template-columns:1fr}
}
@media(max-width:700px){.mantra-section .creative-mantra{font-size:clamp(2.4rem,11.6vw,4.4rem)}.mantra-section .mantra-indent{padding-left:.5em}}
@media(min-width:901px){.intro-section .intro-content{padding-left:clamp(2rem,5vw,6rem)}}
.mantra-section .mantra-plus{top:clamp(.5rem,2.4vw,2.5rem)}@media(max-width:700px){.mantra-section .mantra-plus{top:auto;bottom:1.2rem;font-size:5.5rem}.mantra-section{padding-bottom:7rem}}
/* Button plus: drawn as two bars so it sits on the text's centre line and turns about its own middle.
   The type glyph had an off-centre box, so it wobbled while turning. Buttons also don't take a text selection. */
.btn{-webkit-user-select:none;user-select:none}
.btn-plus{position:relative;display:inline-block;flex:none;width:.8rem;height:.8rem;font-size:0;line-height:0;transform:none;transform-origin:50% 50%}
.btn-plus::before,.btn-plus::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;margin-top:-.75px;border-radius:1px;background:currentColor}
.btn-plus::after{transform:rotate(90deg)}
.btn:hover .btn-plus,.btn:focus-visible .btn-plus{transform:rotate(90deg)}
/* The fill grows out from under the plus, so the plus switches colour at once instead of fading cream-on-cream. */
.btn-plus{transition:transform .6s cubic-bezier(.34,1.56,.64,1),color 0s}
.btn-solid:hover .btn-plus,.btn-solid:focus-visible .btn-plus{color:var(--lavender)}
.way-lead .btn-solid:hover .btn-plus,.way-lead .btn-solid:focus-visible .btn-plus{color:var(--cream)}
.btn::before{left:calc(1.6rem + .4rem)}
/* v16: quieter hero. The hint and the motion switch are gone; the ASCII cards moved down the page. */
.hover-hint,.motion-toggle{display:none!important}

/* Explore band: the ASCII cards from the old hero, either side of See the work. Hover or tap reveals each photo. */
.explore-section{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(2rem,9vw,10rem);padding:clamp(3rem,7vw,7rem) var(--gutter) clamp(5rem,10vw,9rem);background:#c1bcdd;overflow-x:clip;--px:0;--py:0}
.explore-card{position:relative;left:auto;right:auto;top:auto;flex:none;width:clamp(8.5rem,16vw,15rem);height:clamp(11.5rem,21vw,20rem);color:#38335f}
.explore-card-a{transform:rotate(-8deg)}
.explore-card-b{transform:rotate(7deg);margin-top:clamp(2rem,6vw,6rem)}
.explore-card .fragment-caption{color:#38335f;display:block}
.explore-card:focus-visible{outline:2px solid var(--cream);outline-offset:6px}
.explore-center{position:relative;display:grid;place-items:center}
.explore-plus{position:absolute;z-index:0;font-size:clamp(9rem,20vw,20rem);font-weight:200;line-height:1;color:var(--lavender);opacity:.35;pointer-events:none;transform:translateY(-4%)}
.explore-center .btn{position:relative;z-index:1}
@media(max-width:700px){
  .explore-section{gap:1rem;padding-inline:1rem}
  .explore-card{width:26vw;height:36vw}
  .explore-center .btn{padding:.7rem 1.1rem;font-size:.9375rem}
  .explore-card .fragment-caption{display:none}
}

/* Esquire pop-up, bottom right of the hero. */
.feature-pop{position:fixed;right:clamp(.9rem,2vw,1.75rem);bottom:clamp(.9rem,2vw,1.75rem);z-index:60;display:flex;align-items:stretch;max-width:min(22.5rem,calc(100vw - 1.8rem));perspective:900px}
.feature-pop[hidden]{display:none}
.feature-link{display:flex;align-items:center;gap:1rem;padding:.7rem 2.9rem .7rem .7rem;border-radius:20px;background:rgba(255,244,234,.94);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1.4rem 3rem rgba(40,36,70,.28),0 .2rem .6rem rgba(40,36,70,.12);color:#38335f;text-decoration:none}
.feature-cover{position:relative;flex:none;width:4.6rem;aspect-ratio:480/633;border-radius:6px;overflow:hidden;box-shadow:0 .5rem 1.2rem rgba(40,36,70,.35);transform:rotate(-4deg);transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.feature-cover img{display:block;width:100%;height:100%;object-fit:cover}
.feature-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 60%);transform:translateX(-120%);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.feature-text{font-size:.98rem;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.feature-arrow{display:inline-block;margin-left:.35rem;color:var(--lavender);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.feature-link:hover .feature-cover,.feature-link:focus-visible .feature-cover{transform:rotate(0) scale(1.06) translateY(-2px)}
.feature-link:hover .feature-cover::after,.feature-link:focus-visible .feature-cover::after{transform:translateX(120%)}
.feature-link:hover .feature-arrow,.feature-link:focus-visible .feature-arrow{transform:translate(3px,-3px)}
.feature-link:focus-visible{outline:2px solid #38335f;outline-offset:3px}
.feature-close{position:absolute;top:.55rem;right:.55rem;display:grid;place-items:center;width:2rem;height:2rem;padding:0;border:0;border-radius:50%;background:transparent;color:#38335f;cursor:pointer;transition:background-color .3s}
.feature-close span{display:block;font-size:1.6rem;font-weight:300;line-height:1;transform:rotate(45deg);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.feature-close:hover{background:rgba(56,51,95,.08)}
.feature-close:hover span{transform:rotate(135deg)}
.feature-close:focus-visible{outline:2px solid #38335f;outline-offset:2px}
@media(max-width:700px){.feature-link{gap:.8rem;padding:.55rem 2.6rem .55rem .55rem;border-radius:16px}.feature-cover{width:3.5rem}.feature-text{font-size:.875rem}}
@media(prefers-reduced-motion:reduce){.feature-cover,.feature-cover::after,.feature-arrow,.feature-close span{transition:none}}
.explore-card{width:clamp(9.5rem,19vw,18rem);height:clamp(12.5rem,25vw,24rem)}
.explore-plus{width:clamp(11rem,24vw,24rem);aspect-ratio:1;font-size:0;opacity:.55;transform:none}
.explore-plus::before,.explore-plus::after{content:"";position:absolute;left:0;top:50%;width:100%;height:2px;margin-top:-1px;background:var(--lavender)}
.explore-plus::after{transform:rotate(90deg)}

/* ===================== v18 ===================== */
/* Menu, as on eliwright.co: a lavender sheet, thin centred words in lilac that turn cream and draw a rule on hover,
   the four outbound links in a row underneath, and the plus row at the foot. */
.site-menu{align-items:center;justify-content:center;padding:6rem var(--gutter) 2rem;background:#867fad;color:#c1bcdd;text-align:center}
.site-menu-links{display:flex;flex-direction:column;align-items:center;margin:auto 0 0!important}
.site-menu li{overflow:visible}
.site-menu ul a{position:relative;display:inline-block;padding:0 .04em;font-weight:100;font-size:clamp(2.6rem,min(7.3vw,10.4svh),6.4rem);line-height:1.02;letter-spacing:0;color:#c1bcdd;transition:color .35s}
.site-menu ul a:hover,.site-menu ul a:focus-visible{color:#fff4ea}
.menu-word{display:inline-block}
.menu-rule{position:absolute;left:0;right:0;bottom:.06em;height:2px;background:#fff4ea;transform:scaleX(0);transform-origin:0 50%;transition:transform .55s cubic-bezier(.65,0,.35,1)}
.site-menu ul a:hover .menu-rule,.site-menu ul a:focus-visible .menu-rule{transform:scaleX(1)}
.site-menu ul a:focus-visible{outline:0}
.site-menu-foot{justify-content:space-between;width:min(46rem,100%);margin:clamp(2rem,6svh,4rem) auto 0;padding:0;gap:1rem 2rem;font-size:.8125rem;text-transform:uppercase;letter-spacing:.02em}
.site-menu-foot a{color:#c1bcdd}
.site-menu-foot a:hover{color:#fff4ea;text-decoration:none}
.site-menu-plus{display:block;margin:auto 0 0;padding-top:1.5rem;font-size:2.5rem;font-weight:400;letter-spacing:-.06em;line-height:1;color:#c1bcdd}
.site-menu-sky{display:none}
@media(max-width:700px){.site-menu-foot{justify-content:center}}

/* Second tilted band mirrors the first. */
.impact-type-b{margin-top:clamp(4rem,12vw,11rem)!important;transform:perspective(1200px) rotate(5.27deg)}
.impact-type-b .impact-plus{margin-left:52%}

/* Arc Launch spotlight, right after "Real work still looks generic online." */
.spotlight{position:relative;isolation:isolate;overflow:hidden;margin:0 0 clamp(4rem,8vw,7rem);padding:clamp(2.2rem,5vw,4.6rem);border-radius:32px;background:#867fad;color:var(--cream);min-height:clamp(26rem,46vw,38rem);display:flex;align-items:flex-end}
.spotlight-media{position:absolute;inset:0;z-index:-2}
.spotlight-media img{width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(.9)}
.spotlight::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(134,127,173,.15),rgba(134,127,173,.55) 45%,rgba(56,51,95,.72))}
.spotlight-word{position:absolute;left:clamp(1rem,3vw,3rem);top:clamp(.5rem,2vw,2rem);z-index:-1;font-size:clamp(4.2rem,15.5vw,17rem);font-weight:800;letter-spacing:-.06em;line-height:.85;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px rgba(255,244,234,.55);white-space:nowrap;pointer-events:none}
.spotlight-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.6rem,5vw,5rem);align-items:end;width:100%}
.spotlight-title{margin:0;font-size:clamp(2.4rem,4.8vw,5.2rem);font-weight:700;letter-spacing:-.045em;line-height:1;color:var(--cream);max-width:11ch;text-wrap:balance}
.spotlight-copy p{margin:0 0 1rem;max-width:32rem;font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.55;color:rgba(255,244,234,.92)}
.spotlight-copy .btn{margin-top:.8rem}
.btn-cream{background:var(--cream);color:#38335f}
.btn-cream::before{background:#38335f}
.btn-cream:hover,.btn-cream:focus-visible{color:var(--cream)}
.btn-cream:hover .btn-plus,.btn-cream:focus-visible .btn-plus{color:var(--cream)}

/* Ways: three cards of equal weight now that Arc Launch leads above. */
.ways-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto}
.way-founders{background:rgba(255,244,234,.16)}

/* Culture. */
.culture-section,.community-section{--paper:#c1bcdd;--ink:#38335f;position:relative;background:#c1bcdd;color:var(--deep);padding:clamp(5rem,9vw,9rem) var(--gutter);overflow-x:clip}
.culture-head,.community-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,6vw,7rem);align-items:end;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.culture-head h2,.community-head h2,.contact-heading{margin:0;font-size:clamp(2.7rem,5.4vw,5.8rem);font-weight:700;letter-spacing:-.045em;line-height:1.02;color:var(--cream);max-width:13ch;text-wrap:balance}
.culture-head p,.community-copy p{max-width:34rem;margin:0 0 1rem;font-size:1.0625rem;line-height:1.6}
.culture-cards,.community-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)}
.culture-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1.4rem;min-height:clamp(20rem,30vw,27rem);padding:clamp(1.6rem,3vw,2.6rem);border-radius:28px;overflow:hidden}
.culture-resources{background:#38335f;color:rgba(255,244,234,.9)}
.culture-resources strong{color:var(--cream)}
.culture-guides{background:var(--cream);color:#38335f}
.culture-guides strong{color:#38335f}
.culture-card p{margin:auto 0 0;max-width:30rem;font-size:1.0625rem;line-height:1.6}
.culture-card strong{display:block;margin-bottom:.5rem;font-size:clamp(1.3rem,1.8vw,1.75rem);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.culture-glyphs{font-size:clamp(3.2rem,6.4vw,6.6rem);font-weight:300;letter-spacing:.06em;line-height:1;color:#c1bcdd;white-space:nowrap}
.culture-cities{display:flex;flex-wrap:wrap;gap:0 .45em;list-style:none;margin:0;padding:0;font-size:clamp(2rem,3.7vw,3.8rem);font-weight:800;letter-spacing:-.045em;line-height:1;text-transform:uppercase;color:#867fad}
.culture-cities li:not(:last-child)::after{content:"+";margin-left:.35em;font-weight:300;color:#c1bcdd}
.culture-guides .btn-line{color:#38335f;border-color:#38335f}
.culture-guides .btn-line::before{background:#38335f}
.culture-guides .btn-line:hover,.culture-guides .btn-line:focus-visible{color:var(--cream);border-color:#38335f}
.culture-more{display:inline-block;margin-top:clamp(1.6rem,3vw,2.4rem);color:var(--deep)}
.culture-more:hover{color:var(--cream)}

/* Community. */
.community-card{position:relative;padding:1.6rem 0 0}
.community-card::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,244,234,.6);transform:scaleX(var(--rule,1));transform-origin:0 50%}
.community-card p{margin:0;max-width:30rem;font-size:1.0625rem;line-height:1.6}
.community-card strong{display:block;margin-bottom:.55rem;font-size:clamp(1.3rem,1.8vw,1.7rem);font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--cream)}
.community-cta{margin-top:clamp(2.4rem,5vw,3.6rem)}

/* Contact now reads like the other sections; the big lavender lines live in the footer again. */
.contact-section{padding-bottom:clamp(5rem,9vw,8rem)}
.contact-copy{margin:clamp(2rem,4vw,3rem) 0 0}
.contact-heading{max-width:15ch}

/* Footer: Work with me at Arcbound, the Connect circle, then the hub links. */
.site-footer{padding-top:clamp(5rem,8vw,7rem)}
.site-footer .footer-stage{position:relative}
.site-footer .footer-title{font-size:clamp(4rem,13.4vw,15rem)}
.site-footer .connect-cta{position:absolute;right:clamp(0rem,3vw,4rem);top:34%;color:var(--cream)}
.site-footer .connect-cta::before{background:var(--cream)}
.site-footer .connect-cta:hover,.site-footer .connect-cta:focus-visible{color:var(--lavender)}
.site-footer .footer-period{color:var(--cream)}
.footer-socials{justify-content:space-between!important;max-width:62rem!important;margin:clamp(3.5rem,7vw,6rem) auto clamp(4rem,7vw,6rem)!important;font-size:.875rem;letter-spacing:.02em;text-transform:uppercase;font-weight:500;color:var(--cream)}
.site-footer .footer-top{padding-top:clamp(3rem,5vw,4rem);border-top:1px solid rgba(255,244,234,.45)}
.footer-quick{font-size:.875rem;letter-spacing:.02em;text-transform:uppercase;font-weight:500}
.footer-top-link{color:var(--deep)}
@media(max-width:900px){
  .spotlight-body,.culture-head,.community-head,.culture-cards,.community-cards{grid-template-columns:1fr}
  .ways-grid{grid-template-columns:1fr}
  .site-footer .connect-cta{position:relative;right:auto;top:auto;margin:1.5rem 0 0 auto;width:8.5rem}
  .footer-socials{justify-content:flex-start!important;gap:.75rem 1.75rem!important}
}
@media(max-width:700px){
  .site-footer .footer-title{font-size:clamp(2.6rem,14.6vw,6rem)}
  .spotlight{border-radius:24px;padding:1.6rem}
  .culture-card{border-radius:22px}
}
.impact .impact-trail{display:none}
button.btn-solid,button.btn-cream{border:0}
@media(max-width:700px){.impact-type{font-size:clamp(2.6rem,12.4vw,6rem)}}
/* Plus, measured from eliwright.co with the block level: same size and weight as the lines, lavender,
   40% across the text block, its top 0.64em below the first line's top so it straddles the gap;
   the second line starts 1.084em below the first. */
.impact-type .impact-plus{position:absolute;z-index:2;left:calc((100vw - var(--gutter) * 2) * .402);top:.64em;margin:0;font-size:1em;font-weight:900;line-height:.9;color:var(--lavender)}
.impact-type .impact-line-2{margin-top:.184em}
/* Hero: the old floating caption is gone; the cursor turns into the label instead. */
.cursor-caption{display:none!important}
.cursor-dot::after{content:attr(data-label);position:absolute;left:50%;top:50%;padding:.8rem 1.25rem;border-radius:999px;background:#fff4ea;color:#38335f;font:600 .9375rem/1 var(--body);letter-spacing:-.005em;white-space:nowrap;box-shadow:0 .8rem 2rem rgba(40,36,70,.25);opacity:0;transform:translate(-50%,-50%) scale(.4);transition:opacity .25s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.cursor-dot.is-label{mix-blend-mode:normal;background:transparent}
.cursor-dot.is-label::after{opacity:1;transform:translate(-50%,-50%) scale(1)}
.has-cursor-dot .hero .portal-link{cursor:none}
@media(prefers-reduced-motion:reduce){.cursor-dot::after{transition:none}}
/* Nav plus: the Outfit "+" sits off centre in its own box, so it is drawn from a trimmed, centred PNG
   used as a mask. Same size feel as eliwright.co and it turns about its true centre. */
.nav-plus-mark{display:block;width:13px;height:13px;font-size:0;line-height:0;color:transparent;background:#fff4ea;-webkit-mask:url(assets/plus.png) center/contain no-repeat;mask:url(assets/plus.png) center/contain no-repeat;transform:none;transform-origin:50% 50%}
.nav-plus:hover .nav-plus-mark{transform:rotate(90deg)}
.nav-plus[aria-expanded=true] .nav-plus-mark{transform:rotate(45deg)}
/* Hero cursor: one word, two colours: cream over Work, lavender over Shop. */
.cursor-dot[data-side=work]::after{background:#fff4ea;color:#38335f}
.cursor-dot[data-side=shop]::after{background:#867fad;color:#fff4ea}

/* ===== v28: Arcbound ecosystem (replaces "Who this is for") =====
   Static by default: intro, then the two steps with their work beneath.
   With motion on a wide screen the stage holds still while the work is dealt onto it card by card:
   Arc Launch first, then the copy hands over to ArcBase and the rest of the deck lands. */
.eco-section{--paper:#c1bcdd;--ink:#38335f;position:relative;background:#c1bcdd;color:var(--deep);padding:clamp(6rem,11vw,11rem) 0 clamp(3rem,6vw,6rem);overflow-x:clip}
.eco-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2rem,6vw,7rem);align-items:end;padding:0 var(--gutter);margin-bottom:clamp(3rem,7vw,6rem)}
.eco-intro h2{margin:0;font-size:clamp(2.8rem,5.8vw,6.4rem);font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--cream);max-width:13ch;text-wrap:balance}
.eco-intro-copy p{max-width:34rem;margin:0 0 1rem;font-size:1.125rem;line-height:1.6}
.eco-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:1.8rem}
.eco-actions .text-link{color:var(--deep)}
.eco-actions .text-link:hover{color:var(--cream)}
.eco-track{position:relative;padding:0 var(--gutter)}
.eco-stage{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,6rem);align-items:center;padding:clamp(2rem,4vw,3.5rem);border-radius:32px;background:#867fad;color:rgba(255,244,234,.92);overflow:hidden}
.eco-word{position:absolute;left:clamp(1rem,3vw,3rem);bottom:-.12em;z-index:-1;font-size:clamp(5rem,17vw,19rem);font-weight:800;letter-spacing:-.06em;line-height:.85;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px rgba(255,244,234,.35);white-space:nowrap;pointer-events:none}
.eco-copy{position:relative;display:grid;gap:clamp(2rem,4vw,3rem);padding-left:clamp(1.6rem,2.5vw,2.4rem)}
.eco-rail{position:absolute;left:0;top:.6rem;bottom:.6rem;width:1px;background:rgba(255,244,234,.3)}
.eco-rail-fill{position:absolute;inset:0;background:#fff4ea;transform:scaleY(var(--eco,1));transform-origin:50% 0}
.eco-rail-dot{position:absolute;left:-4px;width:9px;height:9px;border-radius:50%;background:#fff4ea}
.eco-rail-dot-1{top:0}.eco-rail-dot-2{top:calc(50% + 1rem)}
.eco-step h3{display:flex;flex-direction:column;gap:.35rem;margin:0 0 1rem;line-height:1}
.eco-name{font-size:clamp(2.2rem,4vw,4.2rem);font-weight:700;letter-spacing:-.045em;color:#fff4ea}
.eco-verb{font-size:clamp(1.15rem,1.6vw,1.5rem);font-weight:400;letter-spacing:-.015em;color:#c1bcdd}
.eco-step p{max-width:30rem;margin:0 0 1.2rem;font-size:1.0625rem;line-height:1.6}
.eco-tags{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.eco-tags li{padding:.42rem .9rem;border:1px solid rgba(255,244,234,.5);border-radius:999px;font-size:.875rem;color:#fff4ea}
.eco-deck{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.eco-card{margin:0;overflow:hidden;border-radius:14px;aspect-ratio:1800/1013;box-shadow:0 1.2rem 2.6rem rgba(40,36,70,.28);background:#38335f}
.eco-card img{display:block;width:100%;height:100%;object-fit:cover}
.eco-card-7{grid-column:1/-1;width:62%;justify-self:center}

/* Motion layout */
.eco-motion .eco-track{height:460svh;padding:0 var(--gutter)}
.eco-motion .eco-stage{position:sticky;top:clamp(4.5rem,9svh,6rem);height:calc(100svh - clamp(6rem,13svh,8rem));min-height:30rem}
.eco-motion .eco-copy{align-self:center;height:100%;grid-template-rows:1fr;align-items:center}
.eco-motion .eco-step{grid-area:1/1}
.eco-motion .eco-rail-dot-2{top:auto;bottom:0}
.eco-motion .eco-deck{position:relative;display:block;height:100%}
.eco-motion .eco-card{position:absolute;width:56%;will-change:transform}
.eco-motion .eco-card-1{left:0;top:4%}
.eco-motion .eco-card-2{left:42%;top:0}
.eco-motion .eco-card-3{left:4%;top:33%}
.eco-motion .eco-card-4{left:44%;top:30%}
.eco-motion .eco-card-5{left:0;top:62%}
.eco-motion .eco-card-6{left:42%;top:60%}
.eco-motion .eco-card-7{left:22%;top:40%;width:56%}
@media(max-width:900px){
  .eco-intro,.eco-stage{grid-template-columns:1fr}
  .eco-stage{border-radius:24px;padding:1.6rem}
  .eco-card-7{width:100%}
}

/* v29: no fade behind the navbar */
.below-nav .nav-bar::before{display:none}

/* ===== v30: the Arcbound wordmark in the stage, and the sites we've launched =====
   The wordmark is the real Arcbound logo (vectorised from arcbound.com's mark), used as a mask so it takes the cream.
   Sites are hero screenshots, never live embeds: they load fast and stay right when a client changes their site.
   Default: rows wrap into a grid. With motion: three rows drift against each other as you scroll, on a slight tilt. */
.eco-word{display:none}
.eco-logo{position:absolute;left:clamp(1.2rem,3vw,3rem);right:clamp(1.2rem,3vw,3rem);bottom:clamp(1rem,2.4vw,2.2rem);z-index:-1;aspect-ratio:4800/432;background:#fff4ea;opacity:.16;-webkit-mask:url(assets/arcbound-wordmark.svg) left bottom/contain no-repeat;mask:url(assets/arcbound-wordmark.svg) left bottom/contain no-repeat;pointer-events:none}

.eco-sites{position:relative;margin-top:clamp(5rem,10vw,9rem)}
.eco-sites-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2rem,6vw,7rem);align-items:end;padding:0 var(--gutter);margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.eco-sites-head h3{margin:0;font-size:clamp(2.2rem,4.4vw,4.8rem);font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--cream);max-width:14ch;text-wrap:balance}
.eco-sites-head p{max-width:34rem;margin:0;font-size:1.0625rem;line-height:1.6}
.eco-rows{display:grid;gap:clamp(1rem,2vw,1.6rem);padding:0 var(--gutter)}
.eco-row{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1rem,2vw,1.6rem);list-style:none;margin:0;padding:0}
.site{flex:0 0 clamp(15rem,27vw,26rem)}
.site a{display:block;color:var(--deep);text-decoration:none}
.site-frame{display:block;overflow:hidden;border-radius:14px;background:#fff;box-shadow:0 1rem 2.4rem rgba(40,36,70,.22);transform:translateZ(0);transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s cubic-bezier(.2,.8,.2,1)}
.site-bar{display:flex;align-items:center;gap:.32rem;height:1.9rem;padding:0 .8rem;background:#f4f2fa;border-bottom:1px solid rgba(56,51,95,.1)}
.site-bar i{width:.46rem;height:.46rem;border-radius:50%;background:#c1bcdd}
.site-bar span{flex:1;margin-left:.4rem;font-size:.72rem;letter-spacing:.01em;color:rgba(56,51,95,.6);text-align:center;padding-right:1.6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-frame img{display:block;width:100%;height:auto;aspect-ratio:960/576;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.site-name{display:block;margin-top:.8rem;font-size:1rem;font-weight:500;letter-spacing:-.01em;transition:color .3s}
.site a:hover .site-frame,.site a:focus-visible .site-frame{transform:translateY(-6px);box-shadow:0 1.8rem 3.4rem rgba(40,36,70,.3)}
.site a:hover img,.site a:focus-visible img{transform:scale(1.04)}
.site a:hover .site-name,.site a:focus-visible .site-name{color:var(--cream)}
.site a:focus-visible{outline:none}
.site a:focus-visible .site-frame{outline:2px solid #fff4ea;outline-offset:4px}

/* Motion: rows become long strips that slide, clipped by the section so nothing scrolls sideways. */
.eco-sites-motion .eco-rows{padding:0;transform:rotate(-3deg) scale(1.04);transform-origin:50% 50%}
.eco-sites-motion .eco-row{flex-wrap:nowrap;justify-content:flex-start;width:max-content;will-change:transform}
.eco-sites-motion .site{flex-basis:clamp(16rem,26vw,25rem)}
@media(max-width:900px){
  .eco-sites-head{grid-template-columns:1fr;gap:1.2rem}
  .site{flex-basis:min(100%,24rem)}
  .eco-sites-motion .site{flex-basis:68vw}
}

/* ===== v31: the stage follows the real process =====
   Arc Launch deals its seven stops in order (discovery to launch), each card a screenshot from the work,
   and the matching tag lights as its card lands. At the handover the Arc Launch cards clear and ArcBase's
   monthly work comes in. Static and phone: each step's screenshots sit right under its copy. */
.eco-deck{display:grid;gap:1.2rem}
.eco-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;align-items:start}
.eco-card{position:relative;aspect-ratio:16/10;background:#38335f}
.eco-a1{aspect-ratio:4/5}.eco-a2{aspect-ratio:16/9}.eco-a3,.eco-a4{aspect-ratio:1/1}
.eco-card img{object-position:50% 0}
.eco-card figcaption{position:absolute;left:.6rem;bottom:.6rem;max-width:calc(100% - 1.2rem);padding:.38rem .75rem;border-radius:999px;background:rgba(43,39,74,.84);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff4ea;font-size:.8rem;font-weight:500;line-height:1.2;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eco-card figcaption span{color:rgba(255,244,234,.62);font-weight:400}
.eco-card figcaption span::before{content:"· "}
.eco-tags li{transition:none}

.eco-motion .eco-deck{position:relative;display:block;height:100%}
.eco-motion .eco-group{position:absolute;inset:0;display:block}
.eco-motion .eco-card{position:absolute;width:52%;will-change:transform}
.eco-motion .eco-d1{left:0;top:3%}
.eco-motion .eco-d2{left:46%;top:0}
.eco-motion .eco-d3{left:3%;top:35%}
.eco-motion .eco-d4{left:47%;top:32%}
.eco-motion .eco-d5{left:0;top:67%}
.eco-motion .eco-d6{left:46%;top:64%}
.eco-motion .eco-d7{left:23%;top:36%;width:56%}
.eco-motion .eco-a1{left:2%;top:2%;width:34%}
.eco-motion .eco-a2{left:38%;top:5%;width:60%}
.eco-motion .eco-a3{left:46%;top:44%;width:38%}
.eco-motion .eco-a4{left:5%;top:50%;width:36%}
.eco-motion .eco-card figcaption{font-size:.84rem}

@media(max-width:900px){
  .eco-stage{display:flex;flex-direction:column;gap:1.4rem}
  .eco-copy,.eco-deck{display:contents}
  .eco-rail{display:none}
  .eco-step-define{order:1}.eco-group-define{order:2}.eco-step-activate{order:3;margin-top:1.6rem}.eco-group-activate{order:4}
  .eco-group{gap:.6rem}
  .eco-card figcaption{left:.4rem;bottom:.4rem;max-width:calc(100% - .8rem);padding:.3rem .55rem;font-size:.68rem}
  .eco-card figcaption span{display:none}
}
.eco-group-define .eco-d7{grid-column:1/-1}

/* v32: longer brands heading reads in two lines on wide screens */
.brands-head h2{max-width:22ch;text-wrap:balance}

/* ===== v33: Some of what I've made, as a project grid =====
   Wide and tall tiles alternate row by row (wide + tall, then tall + wide), so no two rows look alike.
   Each photo opens from a soft inset and drifts slower than the page; hovering lifts the image and lights the title. */
.work-section h2{max-width:14ch}
.pj-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.4rem,2.6vw,2.4rem) clamp(1rem,2vw,1.6rem);margin-top:clamp(2.5rem,5vw,4.5rem)}
.pj{grid-column:span 8;display:flex;min-width:0}
.pj-tall{grid-column:span 4}
.pj-link{display:flex;flex-direction:column;width:100%;color:var(--deep);text-decoration:none}
.pj-media{position:relative;display:block;overflow:hidden;border-radius:18px;background:#867fad;aspect-ratio:16/10;box-shadow:0 1rem 2.4rem rgba(40,36,70,.16);transition:translate .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s cubic-bezier(.2,.8,.2,1)}
.pj-tall .pj-media{flex:1;aspect-ratio:auto;min-height:18rem}
.pj-media img{position:absolute;inset:-4% 0;width:100%;height:108%;object-fit:cover}
.pj-text{display:block;max-width:34rem;margin-top:1rem;font-size:1rem;line-height:1.5}
.pj-text strong{font-weight:600;color:var(--cream);transition:color .3s}
a.pj-link:hover .pj-media,a.pj-link:focus-visible .pj-media{translate:0 -6px;box-shadow:0 1.8rem 3.4rem rgba(40,36,70,.28)}
a.pj-link:hover .pj-text strong,a.pj-link:focus-visible .pj-text strong{color:#38335f}
a.pj-link:focus-visible{outline:none}
a.pj-link:focus-visible .pj-media{outline:2px solid #fff4ea;outline-offset:4px}
@media(max-width:900px){
  .pj,.pj-tall{grid-column:1/-1}
  .pj-tall .pj-media{flex:none;aspect-ratio:4/5;min-height:0}
}

/* v34: logos Arcbound has created, under the Arc Launch stage. Each mark is a mask in cream, sized by area so
   wide wordmarks and tall monograms read at the same weight. Rows wrap; nothing scrolls sideways. */
.eco-logos{margin-top:clamp(4.5rem,9vw,8rem);padding:0 var(--gutter)}
.eco-logos-head h3{margin:0 0 clamp(2rem,4vw,3.2rem);font-size:clamp(2.2rem,4.4vw,4.8rem);font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--cream);max-width:16ch;text-wrap:balance}
.eco-mark-list{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.6rem,3.4vw,3.2rem) clamp(2rem,4.4vw,4.4rem);list-style:none;margin:0;padding:0;font-size:clamp(1.5rem,2.5vw,2.3rem)}
.eco-mark-item{display:block;width:var(--w);height:var(--h);max-width:100%}
.eco-mark{display:block;width:100%;height:100%;background:#fff4ea;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;transition:background-color .3s}
.eco-mark-item:hover .eco-mark{background:#38335f}
@media(max-width:900px){.eco-mark-list{font-size:1.3rem;gap:1.6rem 2rem}}

/* ===== v35: sharp edges =====
   Every box, card, panel, button, tag and photo has square corners. Only true circles stay round, because they
   are marks rather than containers: the cursor dot, the profile photo, the Connect circle, the button's swelling
   dot, the timeline and rail dots, and the browser-bar dots. */
*,*::before,*::after{border-radius:0!important}
.profile-link,.hero-profile,.loader-profile,.profile-visual,.about-person img,.brands-glow,.btn::before,
.connect-cta,.connect-cta::before,.connect-media,.cursor-dot,.eco-rail-dot,.site-bar i,
.nav-plus::before,.nav-plus::after,.ab-badge img,.ascii-text:focus-visible{border-radius:50%!important}