body{margin:0;background:#faf6ef}
a{color:inherit;text-decoration:none}a:hover{color:inherit}
.ct{--ink:#2b1812;--cream:#faf6ef;--yellow:#e7cd78;--line:#d8cfc5;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif;position:relative;overflow-x:hidden}
.ct *{box-sizing:border-box}
.ct .eyebrow{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:1px;text-transform:uppercase}
.ct header{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:25px 5%;border-bottom:1px solid var(--line);background:var(--cream);position:sticky;top:0;z-index:10}
.ct .logo{width:155px;display:block}
.ct nav{display:flex;flex-wrap:wrap;gap:12px 30px;align-items:center;font-size:13px}
.ct nav a{padding:10px 0}
.ct nav a:hover{text-decoration:underline;text-underline-offset:5px}
.ct nav .nav-cta{border:1px solid var(--ink);border-radius:30px;padding:12px 20px;display:inline-flex;gap:8px;align-items:center}
.ct .ui-icon{display:inline-block;width:1.1em;height:1.1em;flex-shrink:0}
.ct .hero{padding:62px 5% 45px;min-height:720px;position:relative;overflow:hidden}
.ct .hero-top{display:flex;justify-content:space-between;gap:20px}
.ct .hero h1{font-weight:400;font-size:clamp(46px,7.6vw,115px);line-height:.99;letter-spacing:-.065em;max-width:1000px;margin:57px 0 42px}
.ct .hero h1 em{font-family:Georgia,serif;font-weight:400}
.ct .line{display:block;overflow:hidden;padding-bottom:.08em}
.ct .line>span{display:inline-block}
.ct .hero-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px 40px;align-items:end}
.ct .intro{font-size:17px;line-height:1.55;max-width:395px;margin:0}
.ct .round-link{display:flex;align-items:center;gap:22px;font-size:14px}
.ct .circle{border:1px solid currentColor;border-radius:50%;width:55px;height:55px;display:grid;place-items:center;transition:background .25s,transform .25s,color .25s;flex-shrink:0}
.ct .circle .ui-icon{width:24px;height:24px}
.ct .round-link:hover .circle{background:var(--yellow);transform:rotate(45deg);color:var(--ink)}
.ct .tag{background:var(--yellow);padding:16px 22px;position:absolute;right:6%;top:47%;font-size:18px;transform:rotate(-9deg);box-shadow:3px 5px 0 rgba(43,24,18,.063)}
.ct .ticker{background:var(--yellow);overflow:hidden;padding:22px 0;font-size:13px;letter-spacing:1.5px;white-space:nowrap}
.ct .marquee-track{display:flex;width:max-content;animation:ct-marquee 28s linear infinite}
.ct .ticker:hover .marquee-track{animation-play-state:paused}
.ct .marquee-group{display:flex;align-items:center;gap:40px;padding-right:40px}
.ct .marquee-group .star{display:inline-flex;align-items:center}.ct .star-icon{display:block;width:14px;height:14px}
@keyframes ct-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ct .section{padding:90px 5%}
.ct .section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:start;gap:25px;margin-bottom:45px}
.ct h2{font-size:clamp(34px,4.4vw,65px);font-weight:400;letter-spacing:-.05em;line-height:1.05;margin:0}
.ct h3{font-weight:400}
.ct .projects-heading{border-top:1px solid var(--line);padding-top:30px;margin-bottom:35px}
.ct .projects-heading h2{font-size:clamp(28px,3vw,38px);letter-spacing:-.045em}
.ct .projects-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 24px}
.ct .project-card{display:block;min-width:0}
.ct .project-cover{aspect-ratio:1.15/1;overflow:hidden;border-radius:12px;position:relative;transition:border-radius .6s cubic-bezier(.2,.65,.3,1)}
.ct .project-img{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;font-size:clamp(28px,3vw,44px);letter-spacing:-.05em;transition:transform .9s cubic-bezier(.2,.65,.3,1),filter .6s}
.ct .project-img small{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;opacity:.7}
.ct .project-view{position:absolute;right:16px;bottom:16px;width:52px;height:52px;border-radius:50%;background:var(--cream);color:var(--ink);display:grid;place-items:center;transform:scale(0) rotate(-90deg);transition:transform .5s cubic-bezier(.2,.65,.3,1)}
.ct .project-view .ui-icon{width:22px;height:22px}
.ct .project-card:hover .project-img,.ct .project-card:focus-visible .project-img{transform:scale(1.08) rotate(-1deg);filter:saturate(1.15)}
.ct .project-card:hover .project-cover{border-radius:28px}
.ct .project-card:hover .project-view,.ct .project-card:focus-visible .project-view{transform:scale(1) rotate(0)}
.ct .project-caption{display:flex;justify-content:space-between;gap:15px;margin-top:16px;font-size:17px}
.ct .project-caption span:first-child{transition:transform .5s cubic-bezier(.2,.65,.3,1)}
.ct .project-card:hover .project-caption span:first-child{transform:translateX(8px)}
.ct .project-caption span:last-child{color:#766c63}
.ct .services-intro{max-width:420px;line-height:1.6;margin:0}
.ct .service{border-top:1px solid var(--line)}
.ct .service:last-child{border-bottom:1px solid var(--line)}
.ct summary{list-style:none;display:grid;grid-template-columns:65px 1fr 35px;align-items:center;cursor:pointer;padding:27px 0}
.ct summary::-webkit-details-marker{display:none}
.ct summary h3{font-size:clamp(22px,3vw,40px);letter-spacing:-.04em;margin:0;transition:transform .4s}
.ct summary:hover h3{transform:translateX(8px)}
.ct .plus{display:grid;place-items:center;transition:transform .3s}
.ct .plus .ui-icon{width:24px;height:24px}
.ct details[open] .plus{transform:rotate(45deg)}
.ct .service p{margin:0 50px 30px 65px;max-width:630px;line-height:1.7}
.ct .about{background:var(--ink);color:var(--cream);display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center}
.ct .about-art{width:100%;max-width:536px;aspect-ratio:4/5;border-radius:24px;justify-self:center;background:#6b4f44;display:flex;align-items:center;justify-content:center;font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#e9dccb;transition:transform .45s}
.ct .about-art:hover{transform:translateY(-6px) rotate(-.7deg) scale(1.015)}
.ct .about h2{margin:30px 0}
.ct .about p{line-height:1.75;max-width:450px}
.ct .signature{font-family:Georgia,serif;font-style:italic;font-size:27px;margin-top:32px}
.ct .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:50px}
.ct .step{border-top:1px solid var(--ink);padding-top:22px}
.ct .step h3{font-size:25px}
.ct .step p{line-height:1.7;max-width:325px}
.ct .contact{background:var(--yellow);padding:75px 5%}
.ct .contact h2{font-size:clamp(40px,7.4vw,105px);max-width:900px;margin:30px 0}
.ct .contact-form{margin:45px 0;max-width:900px;display:grid;grid-template-columns:1fr 1fr;gap:25px 30px}
.ct .field{display:flex;flex-direction:column;gap:10px;font-size:14px;min-width:0}
.ct .full{grid-column:1/-1}
.ct .field input,.ct .field select,.ct .field textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:rgba(250,246,239,.52);border:1px solid rgba(43,24,18,.44);border-radius:0;padding:15px;min-height:50px}
.ct .field textarea{resize:vertical;min-height:145px}
.ct .field input:focus,.ct .field select:focus,.ct .field textarea:focus{outline:2px solid var(--ink);outline-offset:3px}
.ct .form-note{font-size:12px;line-height:1.7;margin:0;max-width:640px}
.ct .form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.ct .form-actions span{font-size:12px}
.ct .submit-button{background:var(--ink);color:var(--cream);padding:17px 28px;border:1px solid var(--ink);border-radius:30px;cursor:pointer;font:inherit;display:inline-flex;gap:8px;align-items:center;min-height:50px;transition:background .2s}
.ct .submit-button:hover{background:#4b3025}
.ct .contact-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:25px}
.ct .email{font-size:clamp(16px,2vw,28px);border-bottom:1px solid var(--ink);padding-bottom:6px;overflow-wrap:anywhere}
.ct .contact .circle{width:75px;height:75px}
.ct footer{background:var(--ink);color:var(--cream);padding:40px 5% 25px}
.ct .footer-top{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:center;padding-bottom:45px}
.ct .footer-logo{width:min(400px,45%);display:block}
.ct .social{display:flex;flex-wrap:wrap;gap:25px;font-size:14px}
.ct .social a{display:inline-flex;gap:7px;align-items:center;min-height:44px}
.ct .footer-bottom{border-top:1px solid #786258;padding-top:22px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:11px;letter-spacing:.6px}

@keyframes ct-enter{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:translateY(0)}}
@keyframes ct-line{0%{transform:translateY(110%)}100%{transform:translateY(0)}}
@keyframes ct-tag{0%{opacity:0;transform:rotate(-30deg) scale(.4)}70%{opacity:1;transform:rotate(-5deg) scale(1.06)}100%{opacity:1;transform:rotate(-9deg) scale(1)}}
@keyframes ct-ticker{0%{opacity:0;letter-spacing:6px}100%{opacity:1;letter-spacing:1.5px}}
@keyframes ct-reveal{0%{opacity:0;transform:translateY(40px)}100%{opacity:1;transform:translateY(0)}}
.ct header{animation:ct-enter .6s ease 0s both}
.ct .hero-top{animation:ct-enter .65s ease .1s both}
.ct .line>span{animation:ct-line .95s cubic-bezier(.2,.65,.3,1) both}
.ct .line:nth-child(1)>span{animation-delay:.15s}
.ct .line:nth-child(2)>span{animation-delay:.27s}
.ct .line:nth-child(3)>span{animation-delay:.39s}
.ct .tag{animation:ct-tag .8s cubic-bezier(.2,.65,.3,1) .75s both}
.ct .hero-bottom{animation:ct-enter .8s ease .6s both}
.ct .ticker{animation:ct-enter .8s ease .8s both}
@supports (animation-timeline: view()){
.ct .reveal{animation:ct-reveal linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
}
@media (prefers-reduced-motion: reduce){
.ct *,.ct *::after{animation:none !important;transition:none !important}
}

@media (min-width:1600px){.ct .hero,.ct .section,.ct .contact{padding-left:max(5%,calc(50vw - 720px));padding-right:max(5%,calc(50vw - 720px))}}
@media (max-width:1000px){.ct .hero .tag{position:static;display:inline-block;transform:rotate(-4deg);margin:0 0 32px;animation-name:ct-enter}.ct .hero{min-height:auto}}
@media (max-width:900px){.ct .projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:800px){
.ct header{padding:16px 6%}.ct .logo{width:132px}
.ct .hero{padding:32px 6% 40px}.ct .hero h1{font-size:clamp(38px,8.8vw,68px);margin:38px 0 28px;line-height:1.05;letter-spacing:-.055em}
.ct .section{padding:48px 6%}.ct .section-head{display:block}.ct .section-head p{margin-top:24px}
.ct .about{grid-template-columns:1fr;gap:32px}.ct .steps{grid-template-columns:1fr;gap:20px}
.ct .contact{padding:45px 6%}.ct .contact-form{grid-template-columns:1fr;gap:22px}
.ct summary{grid-template-columns:40px 1fr 25px}.ct .service p{margin-left:40px;margin-right:15px}
.ct footer{padding:35px 6% 22px}.ct .footer-logo{width:55%;max-width:240px}
.ct .ticker{font-size:11px;padding:18px 0}
}
@media (max-width:600px){.ct .projects-grid{grid-template-columns:1fr;gap:30px}}
.ct .skip{position:fixed;top:-60px;left:16px;background:var(--yellow);color:var(--ink);padding:10px 14px;z-index:99}.ct .skip:focus{top:8px}
.ct .thanks{max-width:640px}
@media (max-width:800px){.ct header{position:relative;padding:14px 6%}.ct nav{gap:4px 20px;width:100%}.ct nav .nav-cta{padding:8px 16px}}