/* Hero geometry follows the supplied Figma text exports. */
.hero{background:radial-gradient(ellipse 390px 290px at 26% 37%,#53217940,transparent 75%),radial-gradient(ellipse 450px 330px at 76% 78%,#6527a64a,transparent 75%),#10051e}
.hero-stage{width:min(1100px,calc(100% - 96px));height:570px;isolation:isolate}
/* Keep the left title behind the portrait at their slight hairline overlap. */
.hero-left{left:8.5%;top:45px;width:330px;transform:skewY(14deg);transform-origin:left top;z-index:1}
.hello{font-family:var(--display);font-size:28px;line-height:1.2;color:#aea1be;margin-bottom:13px;white-space:nowrap}
.hero-role{font-size:132px;line-height:1.08;letter-spacing:0}
.hero-designer.select-word{font-size:58px;line-height:1.1;letter-spacing:0;display:inline-block;margin:6px 0 0;text-transform:none}
.hero-portrait{position:absolute;left:46%;bottom:0;transform:translateX(-50%);width:520px;height:520px;max-width:none;object-fit:contain;z-index:2;margin:0}
.hero-right{left:56%;right:auto;top:126px;width:44%;transform:skewY(-13deg);transform-origin:left top;z-index:3}
.hero-note{font-size:28px;line-height:1.2;color:#aea1be;margin-bottom:7px}
.hero-statement{font-size:46px;line-height:1.14;letter-spacing:0;color:#faf6ff}
.hero-focus{display:block;white-space:nowrap}
.hero-convert-line{display:flex;align-items:flex-start;gap:9px;margin-top:2px;white-space:nowrap}
.hero-that{font-size:44px;line-height:1.2;padding-top:11px}
.hero-convert{font-size:102px;line-height:1;letter-spacing:-.015em}
.hero-description{font-family:var(--display);font-size:23px;line-height:1.2;color:#b7a7cd;margin:18px 0 0 80px;padding:0;max-width:none}
.hero-actions{display:none}
.motion-toggle{font-size:12px;min-height:44px;right:0;bottom:16px}
.selection-area{position:absolute;inset:-7px -12px;pointer-events:none}
.selection-frame{position:absolute;inset:auto;left:0;top:0;border:0;outline:1.5px solid var(--cyan);width:0;height:0;opacity:0;animation:drag-selection 8s linear infinite}
.selection-frame i{width:9px;height:9px;opacity:0;animation:selection-handles 8s linear infinite}
.selection-frame i:nth-child(1){top:-4.5px;left:-4.5px}
.selection-frame i:nth-child(2){top:-4.5px;right:-4.5px}
.selection-frame i:nth-child(3){bottom:-4.5px;left:-4.5px}
.selection-frame i:nth-child(4){bottom:-4.5px;right:-4.5px}
.fake-cursor{position:absolute;inset:auto;left:-35%;top:150%;width:29px;height:35px;max-width:none;opacity:0;transform:skewY(-14deg);animation:drag-cursor 8s linear infinite}
.hero-cursor-layer{position:absolute;z-index:5;pointer-events:none;transform-origin:0 0}
/* Independent translation preserves the original skew and layout geometry. */
.hero-left,.hero-cursor-layer{--hero-float-distance:-8px;animation:hero-float 9s ease-in-out infinite}
.hero-right{--hero-float-distance:-6px;animation:hero-float 11s ease-in-out infinite reverse}
.motion-paused .selection-frame,.motion-paused .selection-frame i,.motion-paused .fake-cursor,.motion-paused .hero-left,.motion-paused .hero-right,.motion-paused .hero-cursor-layer{animation-play-state:paused}
@keyframes hero-float{0%,100%{translate:0 0}50%{translate:0 var(--hero-float-distance)}}
/* The four handles coincide at arrival, then follow the growing frame's corners. */
@keyframes drag-selection{0%,17%{width:0;height:0;opacity:0}18%,20%{width:0;height:0;opacity:1}40%,74%{width:100%;height:100%;opacity:1}81%,100%{width:100%;height:100%;opacity:0}}
@keyframes selection-handles{0%,17%{opacity:0}18%,74%{opacity:1}81%,100%{opacity:0}}
@keyframes drag-cursor{0%,5%{left:-35%;top:150%;opacity:0}10%{left:-20%;top:100%;opacity:1}18%,20%{left:0;top:0;opacity:1}40%,74%{left:100%;top:100%;opacity:1}82%{left:115%;top:145%;opacity:0}100%{left:115%;top:145%;opacity:0}}

/* Original approach illustrations, in the two-column layout. */
.approach-section .section-heading{display:block;text-align:center;margin-bottom:42px}
.approach-section .section-heading>p{max-width:560px;margin:18px auto 0}
.approach-section .section-heading>p br{display:none}
.approach-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;max-width:880px;margin-inline:auto}
.approach-grid article{padding:26px 30px 30px}
.approach-art{height:165px;width:205px;object-fit:contain;margin:0 auto 24px}
.approach-grid h3{display:flex;align-items:baseline;gap:16px;font-size:29px;margin-bottom:17px}
.step-number{position:static;font-size:32px;color:#c44edf;line-height:1;flex:none}
.approach-grid p{font-size:16px;line-height:1.85}

/* Native details retain keyboard behavior, with a gentle size transition. */
.expertise-list details.is-animating{overflow:hidden;will-change:height}
.expertise-list details[data-expanded=false] .chevron{transform:rotate(0)}
.expertise-list details[data-expanded=true] .chevron{transform:rotate(180deg)}
.expertise-list .chevron{transition:transform 240ms ease}

/* Desktop reading sizes: body 16px, UI 14px, small labels 12px. */
@media(min-width:801px){
  body{font-size:16px}
  .section-heading>p,.project-info>p:not(.project-type),.expertise-intro>p:not(.eyebrow),.details-body,.details-body p,.about-copy>p:not(.eyebrow),.contact-panel p:not(.eyebrow){font-size:16px}
  .button,.nav-contact,.text-link,.hero-actions .button,.hero-actions .text-link,#main-nav,.filters button,.coming-soon,.small-note,.work-note,.photo-caption,.interests li,.footer-role,.site-footer>div>p,.footer-links{font-size:14px}
  .eyebrow,.section-heading .eyebrow,.project-type,.tags li,.placeholder-tag,.footer-bottom,.brand-role{font-size:12px}
  .filters button{min-height:48px;padding-inline:18px}
  .tags li{padding:5px 10px}
  .project-info{padding-top:24px}
  .project-info h3{font-size:30px}
  .footer-brand{font-size:17px}
  .brand-role{font-size:14px}
  #main-nav{gap:22px}
  .nav-shell{gap:20px}
  .nav-contact{padding-inline:20px;gap:14px}
  .specialties>.wrap{font-size:14px;gap:26px}
  .expertise-list summary{min-height:84px}
  .expertise-list summary h3{font-size:28px}
  .interests{gap:22px}
}
@media(min-width:801px) and (max-width:1100px){
  .hero-stage{width:calc(100% - 64px);height:520px}
  .hero-left{left:3%;top:52px;width:300px}
  .hello{font-size:26px}
  .hero-role{font-size:118px}
  .hero-designer.select-word{font-size:53px}
  .hero-portrait{left:46%;height:460px;width:460px}
  .hero-right{left:56%;top:143px;width:44%}
  .hero-note{font-size:25px}
  .hero-statement{font-size:38px}
  .hero-that{font-size:36px;padding-top:9px}
  .hero-convert{font-size:84px}
  .hero-description{font-size:20px;margin-left:67px;margin-top:18px}
  .specialties>.wrap{font-size:13px;gap:20px}
}
@media(min-width:801px) and (max-width:920px){
  .hero-stage{height:485px}
  .hero-left{top:56px;left:2%}
  .hello{font-size:23px}
  .hero-role{font-size:101px}
  .hero-designer.select-word{font-size:48px}
  .hero-portrait{width:405px;height:405px;left:45%}
  .hero-right{top:147px}
  .hero-note{font-size:22px}
  .hero-statement{font-size:32px}
  .hero-that{font-size:31px}
  .hero-convert{font-size:72px}
  .hero-description{font-size:18px;margin-left:57px}
  .specialties>.wrap{font-size:12px;gap:16px}
}
@media(min-width:801px) and (max-width:980px){
  .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:7px;align-items:center;min-width:48px;min-height:48px;border:1px solid var(--border);border-radius:50%;background:transparent;color:var(--text)}
  .menu-toggle span{display:block;width:18px;height:1.5px;background:currentColor;transition:transform .2s}
  .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4.25px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4.25px) rotate(-45deg)}
  #main-nav{display:none;position:absolute;top:95px;left:0;right:0;background:#160a27;border-block:1px solid #ac7bda33;padding:20px;flex-direction:column;align-items:stretch;gap:5px;box-shadow:0 22px 40px #0005;font-size:14px}
  #main-nav.is-open{display:flex}
  #main-nav>a:not(.button){padding:13px 16px}
  .nav-contact{margin-top:10px;margin-left:0;min-height:48px}
}
@media(max-width:800px){
  .hero-left,.hero-cursor-layer{--hero-float-distance:-5px}
  .hero-right{--hero-float-distance:-4px}
  .hero{background:radial-gradient(ellipse 290px 380px at 50% 40%,#622b9845,transparent 75%),radial-gradient(ellipse 360px 220px at 90% 77%,#4c147b24,transparent 75%),#10051e}
  .hero-stage{width:calc(100% - 40px);height:auto;display:flex;flex-direction:column;align-items:center;padding-top:35px}
  .hero-left{position:relative;left:auto;top:auto;width:auto;text-align:left;transform:skewY(5deg);margin-bottom:12px;z-index:3}
  .hello{font-size:21px;margin-bottom:9px;white-space:normal}
  .hero-role{font-size:93px;line-height:1.08}
  .hero-designer.select-word{font-size:45px;line-height:1.15;margin-top:2px;margin-left:4px}
  .hero-portrait{position:relative;left:auto;bottom:auto;transform:none;width:350px;height:350px;max-width:100%;margin:13px 0 0;order:2}
  .hero-right{position:relative;left:auto;top:auto;right:auto;width:100%;text-align:center;transform:none;order:3;margin-top:28px}
  .hero-note{font-size:22px;margin-bottom:8px}
  .hero-statement{font-size:30px;line-height:1.15}
  .hero-focus{white-space:normal}
  .hero-convert-line{justify-content:center;gap:8px;margin-top:7px}
  .hero-that{font-size:29px;padding-top:6px}
  .hero-convert{font-size:62px}
  .hero-description{font-size:20px;line-height:1.25;max-width:330px;margin:19px auto 0;padding:0}
  .hero-description br{display:block}
  .hero-actions{position:relative;left:auto;bottom:auto;display:flex;order:4;max-width:none;flex-direction:row;gap:14px;justify-content:center;margin:28px 0 20px}
  .hero-actions .button,.hero-actions .text-link{font-size:13px}
  .motion-toggle{position:relative;left:auto;right:auto;bottom:auto;order:5;margin-bottom:14px;font-size:12px;min-height:40px}
  .selection-area{inset:-5px -9px}
  .selection-frame i{width:7px;height:7px}
  .selection-frame i:nth-child(1){top:-3.5px;left:-3.5px}
  .selection-frame i:nth-child(2){top:-3.5px;right:-3.5px}
  .selection-frame i:nth-child(3){bottom:-3.5px;left:-3.5px}
  .selection-frame i:nth-child(4){bottom:-3.5px;right:-3.5px}
  .fake-cursor{width:24px;height:29px;transform:skewY(-5deg)}
  .approach-grid{gap:20px}
  .approach-grid article{padding:23px}
  .approach-art{width:180px;height:145px;margin-bottom:20px}
  .approach-grid h3{font-size:26px;gap:12px}
  .step-number{font-size:29px}
  .approach-grid p{font-size:15px;line-height:1.85}
}
@media(max-width:520px){
  .hero-portrait{width:325px;height:325px}
  .hero-role{font-size:88px}
  .hero-designer.select-word{font-size:43px}
  .hello{font-size:20px}
  .hero-statement{font-size:28px}
  .hero-convert{font-size:56px}
  .hero-that{font-size:27px}
  .hero-description{font-size:19px;max-width:300px}
  .hero-actions{flex-direction:column;gap:5px}
  .approach-grid{grid-template-columns:1fr;max-width:420px}
  .approach-grid article{padding:25px}
  .approach-art{width:195px;height:155px}
  .approach-grid h3{font-size:29px;gap:15px}
  .approach-grid p{font-size:16px}
  .step-number{font-size:32px}
}
@media(prefers-reduced-motion:reduce){
  .hero-left,.hero-right,.hero-cursor-layer{animation:none!important;translate:none}
  .selection-frame{animation:none!important;opacity:1;width:100%;height:100%}
  .selection-frame i{animation:none!important;opacity:1}
  .fake-cursor{display:none}
  .expertise-list .chevron{transition:none}
}

/* Center button labels and icons together, including Epilogue's optical offset. */
.button{min-height:48px;line-height:1.25;gap:12px;padding:12px 24px;text-align:center;justify-content:center;align-items:center}
.button-label{display:block;transform:translateY(1px)}
.button .icon{flex:none;align-self:center}
.nav-contact{min-height:48px;gap:12px}
.contact-copy{flex:1;min-width:0}
.contact-actions{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;flex:0 0 285px;text-align:center}
.contact-actions .button{width:240px;max-width:100%;font-size:14px}
.contact-email{font-size:14px;line-height:1.6;text-decoration:underline;text-decoration-color:#a678ca80;text-underline-offset:4px;overflow-wrap:anywhere}
.contact-email:hover{color:#fff}
.fiverr-contact{background:transparent;color:var(--text);border-color:#a67ac866}
.fiverr-contact:hover{background:#8a45bb22;border-color:#c9a1e5}
.footer-links{flex-wrap:wrap}

/* Manual carousel: native swipe, explicit controls and stable reading time. */
.testimonials-heading{text-align:center;margin-bottom:28px}
.testimonials-heading>p:not(.eyebrow){font-size:16px;margin-top:18px}
.reviews-carousel{position:relative;padding-inline:60px}
.reviews-track{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:55px 0 5px;overscroll-behavior-x:contain}
.reviews-track::-webkit-scrollbar{display:none}
.testimonial-card{position:relative;flex:0 0 calc((100% - 56px)/3);min-width:0;display:flex;flex-direction:column;align-items:center;scroll-snap-align:start;scroll-margin-inline:0;border:1px solid #87669880;border-radius:12px;background:#1b092f;text-align:center;padding:60px 24px 26px}
.testimonial-avatar{position:absolute;top:-45px;left:50%;transform:translateX(-50%);width:90px;height:90px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(140deg,#432267,#2a123f);border:2px solid #a47ac080;overflow:hidden}
.testimonial-avatar img{width:100%;height:100%;object-fit:cover}
.testimonial-avatar>span{font-family:var(--display);font-size:36px;color:#ddc8ef}
.testimonial-card h3{font-size:26px;overflow-wrap:anywhere;line-height:1.2}
.testimonial-meta{font-size:12px;color:var(--subtle);line-height:1.6;margin-top:8px;min-height:38px}
.testimonial-stars{font-size:16px;letter-spacing:2px;color:#efcd63;margin:16px 0 18px;line-height:1}
.testimonial-card blockquote{margin:0 0 24px;flex:1}
.testimonial-card blockquote p{font-size:16px;line-height:1.8;color:#eee4f6}
.testimonial-source{font-size:14px;color:#bfa4d5;line-height:1.5;text-decoration:underline;text-decoration-color:#a678ca66;text-underline-offset:4px;padding-block:8px}
.testimonial-source:hover{color:#fff}
.review-arrow{position:absolute;top:calc(50% + 25px);transform:translateY(-50%);width:48px;height:48px;display:grid;place-items:center;border-radius:50%;border:1px solid #a780c3;background:#1b092f;color:#dfc7f0;cursor:pointer;font-size:37px;line-height:1;padding:0}
.review-arrow span{transform:translateY(-2px)}
.review-prev{left:0}.review-next{right:0}
.review-arrow:hover:not(:disabled){background:#442063;border-color:#dbc0f1}
.review-arrow:disabled{opacity:.35;cursor:default}
.review-arrow[hidden],.review-pagination[hidden]{display:none}
.review-pagination{display:flex;align-items:center;justify-content:center;margin-top:25px;gap:0}
.review-pagination button{width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer}
.review-pagination button::before{content:"";width:10px;height:10px;background:#8454b7;border-radius:50%;transition:background .2s,transform .2s}
.review-pagination button[aria-current=true]::before{background:#fff;transform:scale(1.2)}
.reviews-note{font-size:14px;text-align:center;line-height:1.7;color:var(--subtle);margin:13px auto 0}
.reviews-note a{color:#d0b4e4;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
@media(max-width:1100px){.reviews-carousel{padding-inline:56px}.reviews-track{gap:22px}.testimonial-card{flex-basis:calc((100% - 22px)/2)}}
@media(max-width:800px){.contact-actions{flex:auto;width:100%;margin-top:4px}.contact-panel{align-items:stretch}.reviews-carousel{padding-inline:0}.testimonial-card{padding-inline:22px}.review-arrow{position:static;transform:none}.reviews-carousel{display:grid;grid-template-columns:1fr 1fr;gap:18px}.reviews-track{grid-column:1/-1;grid-row:1}.review-prev{grid-column:1;justify-self:end}.review-next{grid-column:2;justify-self:start}.review-pagination{margin-top:8px}.footer-links{padding-left:0}}
@media(max-width:620px){.testimonial-card{flex-basis:100%}.reviews-track{gap:20px}.testimonial-card h3{font-size:28px}.testimonial-meta{min-height:0;font-size:14px}.testimonial-card blockquote p{font-size:16px}.reviews-note{font-size:12px}.reviews-track{padding-top:54px}}