@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--paper:#f3f2ed;--ink:#161719;--accent:#f1ec57;--line:#c8c8c1;--radius:4px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid #387dd8;outline-offset:5px}.skip{position:absolute;z-index:10;left:10px;top:-100px;background:#fff;padding:12px}.skip:focus{top:10px}.site-header{height:92px;padding:0 4.5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:4}.logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:2.2rem;letter-spacing:-.11em;line-height:1}.logo span{font:500 10px Arial;letter-spacing:0;vertical-align:top;margin-left:5px}nav{display:flex;align-items:center;gap:clamp(17px,2.7vw,52px)}nav a,.eyebrow,.hero-index,.service-no,.work-label,.text-link,.footer-bottom,.footer-top>a:last-child{font-size:12px;font-weight:700;letter-spacing:.085em}nav a:hover,.text-link:hover{text-decoration:underline;text-underline-offset:5px}.nav-contact{background:var(--ink);color:#fff;padding:14px 19px;border-radius:50px}.nav-contact span{margin-left:18px}.menu-button{display:none}.section-pad{padding:clamp(70px,9vw,150px) 4.5vw}.hero{background:var(--accent);padding:35px 4.5vw 40px;min-height:min(790px,86vh);display:flex;flex-direction:column;justify-content:space-between}.hero-kicker,.hero-bottom{display:flex;justify-content:space-between;align-items:center}.hero h1{font-family:'Space Grotesk',Arial,sans-serif;font-size:clamp(4.3rem,12.3vw,13.8rem);font-weight:700;line-height:.85;letter-spacing:-.105em;margin:6vw 0 5vw}.hero h1 em{font-style:normal;letter-spacing:-.11em}.hero-glyph{font-size:6rem;line-height:1}.circle-link{border:1px solid var(--ink);border-radius:100%;width:64px;height:64px;display:grid;place-items:center;font-size:30px}.intro{display:grid;grid-template-columns:1fr 2.3fr;gap:40px;border-bottom:1px solid var(--line)}.intro h2{font:600 clamp(1.9rem,3.8vw,4.5rem)/1.14 'Space Grotesk',sans-serif;letter-spacing:-.055em;max-width:1100px;margin:0 0 45px}.intro .lead{font-size:clamp(1.1rem,1.65vw,1.55rem);line-height:1.48;max-width:650px;margin:0 0 30px}.text-link{display:inline-flex;align-items:center;gap:45px;padding:13px 0;border-bottom:2px solid currentColor}.section-head{display:flex;justify-content:space-between;align-items:start;gap:40px;margin-bottom:70px}.section-head h2{font:700 clamp(3rem,7.5vw,8rem)/.95 'Space Grotesk',sans-serif;letter-spacing:-.075em;margin:0;text-align:right}.services{background:#1d1e20;color:var(--paper)}.service{display:grid;grid-template-columns:55px minmax(240px,1.1fr) minmax(220px,1fr) 60px;gap:3vw;border-top:1px solid #5c5d5b;padding:43px 0;align-items:start;transition:padding .25s ease}.service:last-child{border-bottom:1px solid #5c5d5b}.service:hover{padding-left:12px}.service h3{font:600 clamp(2rem,3.7vw,4rem)/1 'Space Grotesk';letter-spacing:-.06em;margin:0}.service p{font-size:15px;line-height:1.65;margin:0;max-width:520px;color:#deded8}.service-arrow{font-size:32px;text-align:right}.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 20px;margin-bottom:55px}.work-card.wide{grid-column:1/-1}.image-frame{overflow:hidden;background:#ddd;aspect-ratio:1.3}.wide .image-frame{aspect-ratio:2.1}.image-frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}.work-card:hover img{transform:scale(1.035)}.work-label{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ink);padding:22px 0}.work-label h3{font:600 clamp(1.25rem,2.2vw,2.1rem) 'Space Grotesk';letter-spacing:-.04em;margin:0}.work-label span{font-size:27px}.testimonials{background:#e9e7df}.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.quotes blockquote{border-top:1px solid var(--ink);margin:0;padding-top:27px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}.quotes p{font-size:clamp(1rem,1.35vw,1.3rem);line-height:1.55;margin:0}.quotes cite{font-size:12px;font-weight:700;font-style:normal}.cta{background:var(--accent)}.cta-link{font:700 clamp(3.5rem,10vw,12rem)/1 'Space Grotesk';letter-spacing:-.09em;display:flex;justify-content:space-between;align-items:center;border-bottom:5px solid var(--ink);padding:30px 0}.cta-link span{font-size:clamp(3rem,6vw,7rem)}footer{background:var(--ink);color:#fff;padding:50px 4.5vw 25px}.footer-top,.footer-bottom{display:flex;justify-content:space-between;align-items:center}.footer-top{padding-bottom:100px}.footer-bottom{border-top:1px solid #555;padding-top:25px;color:#c5c5c1}@media(max-width:900px){.site-header{height:75px}.menu-button{display:flex;align-items:center;gap:12px;background:transparent;border:0;font-size:12px;font-weight:700;letter-spacing:.07em;cursor:pointer}nav{position:absolute;left:0;right:0;top:75px;background:var(--paper);display:none;flex-direction:column;align-items:stretch;gap:0;padding:16px 4.5vw 28px;box-shadow:0 16px 20px #0002}nav.open{display:flex}nav a{padding:18px 0;border-bottom:1px solid var(--line)}nav .nav-contact{text-align:center;margin-top:20px;padding:17px;border:0}.hero{min-height:600px}.hero h1{font-size:clamp(4.1rem,12vw,9rem)}.intro{grid-template-columns:1fr;gap:28px}.section-head{margin-bottom:45px}.service{grid-template-columns:40px 1fr 45px;gap:12px 20px}.service p{grid-column:2/3}.service-arrow{grid-column:3;grid-row:1}.quotes{grid-template-columns:1fr;gap:50px}}@media(max-width:600px){.section-pad{padding:65px 5vw}.site-header{padding:0 5vw}.logo{font-size:1.9rem}.hero{padding:22px 5vw 30px;min-height:550px}.hero h1{font-size:clamp(3.7rem,13vw,6.6rem);letter-spacing:-.1em;margin:50px 0}.hero-glyph{font-size:4rem}.circle-link{width:53px;height:53px}.section-head{flex-direction:column;gap:22px}.section-head h2{text-align:left;font-size:clamp(3.4rem,12vw,5rem)}.service{padding:32px 0}.service h3{font-size:2rem}.service p{font-size:14px}.work-grid{grid-template-columns:1fr;gap:32px}.work-card.wide{grid-column:auto}.wide .image-frame{aspect-ratio:1.3}.cta-link{font-size:clamp(3rem,12vw,5rem);border-bottom-width:3px}.footer-top{padding-bottom:70px}.footer-bottom{flex-direction:column;gap:16px;align-items:start}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
/* Loopi UX Lab design direction — screenshot-matched v0.2 */
:root{--paper:#fff;--ink:#111;--accent:#fff;--line:#bcbcbc}
body{background:#fff}
.site-header{height:138px;border:0;padding:18px 4%;background:#fff}
.logo{display:block;width:184px;line-height:0}
.logo img{display:block;width:100%;height:auto;aspect-ratio:184/105;object-fit:contain;background:#000}
nav{gap:52px}
nav a{font-size:13px;font-weight:800;letter-spacing:.01em}
nav .nav-contact{background:none;color:#111;padding:0;border-radius:0}
nav .nav-contact span{margin-left:2px}
.hero{min-height:670px;background:#fff;padding:120px 5.1% 45px;position:relative;overflow:hidden;display:block}
.hero-film{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-inner{position:relative;z-index:1}
.hero-kicker{display:flex;justify-content:space-between;max-width:100%;margin-bottom:50px;padding-right:17%}
.hero-kicker .eyebrow{font-size:12px;letter-spacing:.13em;color:#525252}
.hero h1{margin:0;font-family:Arial,'Helvetica Neue',sans-serif;font-weight:900;letter-spacing:-.105em;font-size:clamp(58px,11.6vw,214px);line-height:.84}
.hero h1 span{display:block;white-space:nowrap}
.hero h1 .muted{color:#b8b8b8}
.hero-summary{font-size:clamp(19px,1.4vw,27px);line-height:1.45;letter-spacing:-.035em;max-width:790px;margin:32px 0 0}
.services{background:#f1f1ef;color:#111;padding:35px 3% 35px}
.services-header{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;margin-bottom:52px}
.services-header h2{font-family:Arial,'Helvetica Neue',sans-serif;font-weight:900;font-size:clamp(50px,7.5vw,145px);line-height:.88;letter-spacing:-.09em;margin:0}
.services-header .asterisk{font-weight:400;font-size:.42em;letter-spacing:0;vertical-align:top;margin-left:10px}
.services-header>p{font-size:17px;line-height:1.65;color:#777;max-width:270px;margin:0}
.service-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #555;border-bottom:1px solid #555}
.service{display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:34px 34px 47px;gap:0;border:0!important;transition:none}
.service:first-child{padding-left:0}
.service:last-child{padding-right:0}
.service+.service{border-left:1px solid #aaa!important}
.service:hover{padding-left:34px}
.service:first-child:hover{padding-left:0}
.service-no{border-bottom:1px solid #ccc;display:block;padding-bottom:30px;font-size:12px;font-weight:900;letter-spacing:.09em;color:#585858}
.service h3{font-family:Arial,'Helvetica Neue',sans-serif;font-size:clamp(45px,4.6vw,80px);line-height:.95;font-weight:900;letter-spacing:-.075em;margin:37px 0 25px}
.service h3 .period{color:#aaa}
.service p{color:#3c3c3c;font-size:15px;line-height:1.8;max-width:none;margin:0 0 78px;flex:1}
.learn-more{display:flex;align-items:center;justify-content:space-between;gap:35px;background:#111;color:#fff;width:216px;max-width:100%;padding:20px;font-size:12px;font-weight:900;letter-spacing:.025em;transition:background .2s ease,color .2s ease}
.learn-more:hover{background:#b8b8b8;color:#111}
.learn-more span{font-size:18px;font-weight:400}
@media(max-width:900px){
 .site-header{height:104px}
 nav{top:104px}
 .hero{padding-top:95px;min-height:570px}
 .hero-kicker{padding-right:0}
 .hero h1{font-size:11.6vw}
 .services-header h2{font-size:clamp(50px,7vw,85px)}
 .services-header>p{font-size:14px;max-width:200px}
 .service{padding:25px 18px 32px}
 .service:hover{padding-left:18px}
 .service:first-child:hover{padding-left:0}
 .service h3{font-size:clamp(35px,4.2vw,56px)}
 .service p{font-size:13px;margin-bottom:42px}
}
@media(max-width:650px){
 .site-header{height:90px;padding:12px 5%}
 .logo{width:128px}
 nav{top:90px}
 .hero{padding:110px 5% 55px;min-height:530px}
 .hero-kicker{gap:18px;margin-bottom:38px}
 .hero-kicker .eyebrow{font-size:9px}
 .hero h1{font-size:11.3vw;line-height:.96;letter-spacing:-.09em}
 .hero-summary{font-size:20px;margin-top:32px;line-height:1.45}
 .services{padding:48px 5%}
 .services-header{flex-direction:column;gap:18px;margin-bottom:32px}
 .services-header h2{font-size:clamp(52px,11vw,84px)}
 .services-header>p{max-width:none;font-size:15px}
 .service-list{grid-template-columns:1fr}
 .service,.service:first-child,.service:last-child{padding:28px 0 38px}
 .service+.service{border-left:0!important;border-top:1px solid #aaa!important}
 .service:hover,.service:first-child:hover{padding-left:0}
 .service-no{padding-bottom:20px}
 .service h3{font-size:clamp(55px,12vw,78px);margin:25px 0}
 .service p{font-size:15px;margin-bottom:40px}
 .learn-more{width:220px}
}


/* Micro UX / compact contact CTAs, no invisible full-width hit areas. */
a.micro-cta{
 --cta-ink:#151515;
 --cta-paper:#fff;
 display:inline-flex!important;
 width:max-content!important;
 max-width:100%;
 min-width:0;
 flex:0 0 auto;
 align-self:flex-start;
 justify-content:space-between;
 align-items:center;
 gap:18px;
 position:relative;
 overflow:hidden;
 isolation:isolate;
 box-sizing:border-box;
 padding:10px 12px!important;
 border:1px solid currentColor;
 border-radius:0;
 background:transparent;
 color:inherit;
 line-height:1.2;
 text-decoration:none!important;
 white-space:normal;
 cursor:pointer;
 transition:color .35s ease,border-color .35s ease,background .35s ease;
}
a.micro-cta::before{
 content:"";
 position:absolute;z-index:-1;inset:0;
 background:var(--cta-ink);
 transform:scaleX(0);
 transform-origin:left center;
 transition:transform .5s cubic-bezier(.16,1,.3,1);
 pointer-events:none;
}
a.micro-cta::after{content:none!important}
a.micro-cta .micro-cta-arrow{
 display:inline-grid;place-items:center;
 flex:0 0 26px;width:26px;height:26px;
 border:1px solid currentColor;border-radius:50%;
 font:400 18px/1 Arial,sans-serif;
 text-decoration:none;
 transform:translate(0,0);
 transition:transform .52s cubic-bezier(.2,1.5,.25,1),background .35s,border-color .35s;
}
a.micro-cta:is(:hover,:focus-visible){color:var(--cta-paper)}
a.micro-cta:is(:hover,:focus-visible)::before{transform:scaleX(1)}
a.micro-cta:is(:hover,:focus-visible) .micro-cta-arrow{
 transform:translate(3px,-2px) rotate(45deg);
 background:var(--cta-paper);border-color:var(--cta-paper);color:var(--cta-ink);
}
a.micro-cta:focus-visible{outline:3px solid #387dd8;outline-offset:3px}
.site-header a.micro-cta{font-size:12px;padding:8px 11px!important}
.original-footer .footer-details a.micro-cta{
 --cta-ink:#fff;--cta-paper:#151515;
 display:inline-flex!important;max-width:100%;margin:6px 0;
}
.original-footer .footer-details a.micro-cta:hover{color:#151515}
.detail-cta{display:flex;flex-direction:column;align-items:flex-start;gap:13px}
.detail-cta .detail-cta-question{font-size:12px;font-weight:900;letter-spacing:.03em}
.detail-cta .detail-contact-link{font-size:18px;font-weight:900;letter-spacing:-.025em}
.detail-cta .detail-contact-link .micro-cta-arrow{font-size:18px}
.contact-card a.micro-cta{--cta-ink:#fff;--cta-paper:#151515;background:#151515;border-color:#151515;color:#fff}
.contact-card a.micro-cta::before{background:#fff}
.contact-card a.micro-cta:is(:hover,:focus-visible){color:#151515}
.contact-card a.micro-cta .micro-cta-arrow{color:#fff}
.contact-card a.micro-cta:is(:hover,:focus-visible) .micro-cta-arrow{background:#151515;color:#fff;border-color:#151515}
@media(hover:none),(prefers-reduced-motion:reduce){
 a.micro-cta,a.micro-cta::before,a.micro-cta .micro-cta-arrow{transition:none!important}
 a.micro-cta .micro-cta-arrow{transform:none!important}
}

/* Drawn arrow and full reset: no glyph underline inside the circle. */
a.micro-cta, .original-footer .footer-details a.micro-cta{ text-decoration:none!important; text-decoration-line:none!important; }
a.micro-cta .micro-cta-arrow,
a.micro-cta .micro-cta-arrow *{ text-decoration:none!important; text-decoration-line:none!important; }
a.micro-cta .micro-cta-arrow svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}