:root{
  --cream:#F3EEE3; --ink:#121212; --red:#FF4B1F; --butter:#FFD23F; --mute:#5b574f; --line:rgba(18,18,18,.16);
  --display:"Syne",system-ui,sans-serif; --body:"Chivo",system-ui,sans-serif;
  --r-s:10px; --r-m:22px; --r-l:40px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--cream);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,svg{display:block;max-width:100%}
.wrap{width:min(1240px,100% - 48px);margin-inline:auto}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.dark :focus-visible,.red :focus-visible{outline-color:var(--butter)}

/* type */
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:.95;text-wrap:balance}
h1{font-size:clamp(3rem,6.3vw,6.4rem)}
h2{font-size:clamp(2.4rem,6vw,5rem)}
h3{font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-.025em;line-height:1.05}
.eyebrow{font-family:var(--body);font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:.7rem;height:.7rem;border-radius:50%;background:var(--red);animation:pulse 2s infinite}
@keyframes pulse{50%{transform:scale(1.5);opacity:.5}}
p.lead{font-size:clamp(1.15rem,1.8vw,1.45rem);max-width:34ch;line-height:1.4}

/* header */
header.site{position:sticky;top:0;z-index:50;background:rgba(243,238,227,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-family:var(--display);font-weight:800;font-size:1.7rem;letter-spacing:-.05em;text-decoration:none;display:flex;align-items:baseline}
.logo i{font-style:normal;color:var(--red);display:inline-block;transition:transform .4s cubic-bezier(.3,1.8,.5,1)}
.logo:hover i{transform:translateY(-.25em) scale(1.3)}
nav.main{display:flex;align-items:center;gap:2rem}
nav.main a{text-decoration:none;font-weight:600;font-size:.95rem;position:relative}
nav.main a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s}
nav.main a:not(.btn):hover::after,nav.main a[aria-current]::after{transform:scaleX(1)}
.menu-btn{display:none;background:none;border:2px solid var(--ink);border-radius:999px;padding:.45rem 1rem;font:600 .9rem var(--body);cursor:pointer;min-height:44px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.7rem;background:var(--ink);color:var(--cream);text-decoration:none;font-weight:600;font-size:1rem;padding:1rem 1.6rem;border-radius:999px;border:2px solid var(--ink);min-height:48px;transition:background .25s,color .25s,transform .2s;will-change:transform}
.btn:hover{background:var(--red);border-color:var(--red);color:var(--ink)}
.btn svg{width:1.1em;height:1.1em;transition:transform .3s}
.btn:hover svg{transform:translateX(4px) rotate(-45deg)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn.sm{padding:.6rem 1.2rem;font-size:.92rem;min-height:44px}
.dark .btn,.red .btn{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.dark .btn:hover{background:var(--butter);border-color:var(--butter)}
.red .btn{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.red .btn:hover{background:var(--butter);color:var(--ink);border-color:var(--butter)}

/* hero */
.hero{position:relative;padding:clamp(1.6rem,4vw,3.2rem) 0 clamp(3rem,6vw,5rem);overflow:hidden}
.hero .eyebrow{margin-bottom:1.4rem}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .line span{display:inline-block;transform:translateY(105%);animation:rise .9s cubic-bezier(.2,.9,.2,1) forwards}
.hero h1 .line:nth-child(2) span{animation-delay:.12s}
@keyframes rise{to{transform:none}}
.hero h1 em{font-style:normal;color:var(--red);position:relative;display:inline-block}
.hero h1 em svg{position:absolute;left:0;bottom:-.08em;width:100%;height:.22em;overflow:visible}
.hero h1 em svg path{stroke:var(--ink);stroke-width:8;fill:none;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1s .9s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2rem;margin-top:2.4rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem}
.fade-in{opacity:0;transform:translateY(16px);animation:fin .8s .55s forwards}
@keyframes fin{to{opacity:1;transform:none}}
.stamp{position:absolute;right:clamp(0px,3vw,40px);bottom:0;width:clamp(120px,14vw,190px);aspect-ratio:1;border-radius:50%;background:var(--butter);display:grid;place-items:center;animation:bob 6s ease-in-out infinite}
.stamp svg.ring{position:absolute;inset:0;animation:spin 18s linear infinite}
.stamp svg.ring text{font:700 11.4px var(--body);letter-spacing:.22em;text-transform:uppercase;fill:var(--ink)}
.stamp .core{width:34%;fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{50%{transform:translateY(-14px) rotate(4deg)}}
.chips{position:absolute;inset:0;pointer-events:none}
.chip{position:absolute;font:600 .9rem var(--body);background:var(--cream);border:2px solid var(--ink);border-radius:999px;padding:.4rem .95rem;transition:transform .2s ease-out;will-change:transform}
.chip:nth-child(1){right:19%;top:auto;bottom:6%;background:var(--red);color:var(--ink);transform:rotate(-6deg)}
.chip:nth-child(2){right:2%;top:auto;bottom:40%;transform:rotate(5deg)}
.chip:nth-child(3){right:16%;top:auto;bottom:32%;background:var(--ink);color:var(--cream);transform:rotate(3deg)}
.chip:nth-child(4){right:13%;top:auto;bottom:47%;background:var(--butter);transform:rotate(-4deg)}

/* marquee */
.marquee{background:var(--red);color:var(--ink);border-block:2px solid var(--ink);overflow:hidden;white-space:nowrap;transform:rotate(-1.2deg);margin:0 -2vw}
.marquee .track{display:inline-flex;animation:slide 32s linear infinite;padding:1rem 0}
.marquee:hover .track{animation-play-state:paused}
.marquee span{font:800 clamp(1.4rem,3vw,2.4rem) var(--display);letter-spacing:-.03em;text-transform:uppercase;padding-right:1.4rem;display:inline-flex;align-items:center;gap:1.4rem}
.marquee span::after{content:"";width:.7em;height:.7em;background:var(--ink);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
@keyframes slide{to{transform:translateX(-50%)}}

/* sections */
section{padding:clamp(4rem,9vw,8rem) 0}
.dark{background:var(--ink);color:var(--cream)}
.red{background:var(--red);color:var(--ink)}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:end;margin-bottom:3rem}
.sec-head p{max-width:38ch;justify-self:end}

/* rows */
.rows{border-top:2px solid var(--ink)}
.row{text-decoration:none;display:grid;grid-template-columns:4rem 1.5fr 1.3fr 3rem;gap:1.5rem;align-items:center;padding:2rem 1rem;border-bottom:2px solid var(--ink);position:relative;overflow:hidden;transition:color .3s;isolation:isolate}
.row::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .45s cubic-bezier(.3,.9,.3,1);z-index:-1}
.row:hover{color:var(--cream)}
.row:hover::before{transform:none}
.row .n{font:800 1.1rem var(--display);color:var(--red)}
.row p{font-size:1.02rem;max-width:46ch}
.row .arr{width:2.6rem;height:2.6rem;border-radius:50%;border:2px solid currentColor;display:grid;place-items:center;transition:transform .4s,background .3s,color .3s}
.row:hover .arr{transform:rotate(-45deg);background:var(--butter);color:var(--ink);border-color:var(--butter)}
.row .arr svg{width:1.1rem;height:1.1rem}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.step{border:2px solid var(--cream);border-radius:var(--r-m);padding:1.6rem;min-height:290px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .35s cubic-bezier(.3,1.6,.5,1),background .3s,color .3s}
.step:nth-child(even){border-radius:var(--r-l) var(--r-s) var(--r-l) var(--r-s)}
.step:hover{transform:translateY(-10px) rotate(-1.2deg);background:var(--butter);color:var(--ink);border-color:var(--butter)}
.step .big{font:800 4.2rem/1 var(--display);letter-spacing:-.05em;color:var(--red)}
.step:hover .big{color:var(--ink)}
.step h3{margin-bottom:.6rem;font-size:1.5rem}
.step p{font-size:.98rem;opacity:.88}

/* statement */
.statement{font:800 clamp(2rem,5.4vw,4.6rem)/1.02 var(--display);letter-spacing:-.04em;max-width:19ch}
.statement .hl{background:linear-gradient(var(--butter),var(--butter)) 0 92%/0 .42em no-repeat;transition:background-size 1.1s .3s;color:var(--ink);padding:0 .1em;margin:0 -.1em}
.statement.in .hl{background-size:100% .42em}
.note{margin-top:2rem;max-width:52ch;font-size:1.05rem;border-left:4px solid var(--red);padding-left:1rem}

/* about */
.about{display:grid;grid-template-columns:.9fr 1.3fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.monogram{aspect-ratio:1;background:var(--butter);border:2px solid var(--ink);border-radius:62% 38% 55% 45% / 46% 58% 42% 54%;display:grid;place-items:center;font:800 clamp(6rem,18vw,14rem)/1 var(--display);letter-spacing:-.08em;animation:morph 10s ease-in-out infinite;position:relative}
.monogram small{position:absolute;bottom:14%;font:600 .8rem var(--body);letter-spacing:.16em;text-transform:uppercase}
@keyframes morph{50%{border-radius:40% 60% 38% 62% / 58% 42% 58% 42%;transform:rotate(3deg)}}
.about p{margin-top:1.3rem;max-width:52ch}

/* cta */
.cta h2{max-width:14ch}
.cta .hero-cta{margin-top:2.2rem}

/* subpages */
.page-hero{padding:clamp(3rem,7vw,6rem) 0 clamp(2rem,4vw,3rem)}
.page-hero h1{font-size:clamp(2.8rem,7vw,6.6rem)}
.page-hero p.lead{margin-top:1.6rem}
.svc{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(2rem,5vw,4rem);padding:3rem 0;border-top:2px solid var(--ink)}
.svc .n{font:800 1.1rem var(--display);color:var(--red);display:block;margin-bottom:1rem}
.svc ul{list-style:none;margin-top:1.2rem;display:grid;gap:.6rem}
.svc li{padding-left:1.6rem;position:relative}
.svc li::before{content:"";position:absolute;left:0;top:.55em;width:.6rem;height:.6rem;background:var(--red);border-radius:50%}
.billing{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.bcard{border:2px solid var(--cream);border-radius:var(--r-m);padding:1.6rem}
.bcard h3{font-size:1.4rem;margin-bottom:.6rem;color:var(--butter)}
.bcard p{font-size:1rem}
details{border-top:2px solid var(--ink);padding:1.3rem 0}
details:last-of-type{border-bottom:2px solid var(--ink)}
summary{cursor:pointer;font:700 1.25rem var(--display);letter-spacing:-.02em;list-style:none;display:flex;justify-content:space-between;gap:1rem;min-height:44px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:2rem;line-height:1;color:var(--red);transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:.8rem;max-width:60ch}
.contact-card{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1rem}
.cbox{border:2px solid var(--ink);border-radius:var(--r-m);padding:2rem;display:flex;flex-direction:column;gap:.6rem;background:var(--cream)}
.cbox.y{background:var(--butter)}
.cbox .eyebrow::before{display:none}
.cbox a.mail{font:800 clamp(1.3rem,2.6vw,2.1rem) var(--display);letter-spacing:-.03em;word-break:break-word;text-decoration-thickness:3px;text-underline-offset:6px}
.cbox a.mail:hover{color:var(--red)}
.legal{max-width:74ch}
.legal h2{font-size:1.7rem;margin:2.6rem 0 .8rem;letter-spacing:-.025em;line-height:1.1}
.legal p,.legal li{margin-bottom:.8rem}
.legal ul{padding-left:1.3rem}
.legal .meta{color:var(--mute);font-size:.95rem}

/* footer */
footer.site{background:var(--ink);color:var(--cream);padding:4rem 0 2rem}
.f-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;padding-bottom:3rem;border-bottom:1px solid rgba(243,238,227,.22)}
footer .logo{font-size:3rem}
footer h4{font:600 .8rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--butter);margin-bottom:1rem}
footer ul{list-style:none;display:grid;gap:.5rem}
footer a{text-decoration:none}
footer a:hover{color:var(--butter)}
footer address{font-style:normal;line-height:1.7}
.f-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-top:1.6rem;font-size:.9rem;opacity:.75}

/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s,transform .8s cubic-bezier(.2,.9,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}

/* cursor */
.cursor{position:fixed;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--red);mix-blend-mode:multiply;pointer-events:none;z-index:999;transform:translate(-50%,-50%);transition:width .25s,height .25s,opacity .3s;opacity:0}
.cursor.big{width:64px;height:64px}
@media (hover:none){.cursor{display:none}}

@media (max-width:900px){
  body{font-size:17px}
  h1{font-size:clamp(2.2rem,10.6vw,5.2rem)}
  .menu-btn{display:block}
  nav.main{position:absolute;left:0;right:0;top:72px;background:var(--cream);flex-direction:column;align-items:flex-start;padding:1.2rem 24px 1.8rem;gap:1.1rem;border-bottom:1px solid var(--line);display:none}
  nav.main.open{display:flex}
  nav.main a{font-size:1.3rem}
  .stamp{position:relative;right:auto;top:auto;margin:2rem 0 0 auto;width:120px}
  .chips{display:none}
  .sec-head,.about,.svc,.f-top,.contact-card,.billing{grid-template-columns:1fr}
  .sec-head p{justify-self:start}
  .row{grid-template-columns:2.6rem 1fr 2.6rem;padding:1.5rem .4rem}
  .row p{grid-column:2/3;grid-row:2}
  .row .arr{grid-row:1;grid-column:3}
  .steps{grid-template-columns:1fr 1fr}
  .step{min-height:240px}
  .monogram{max-width:300px}
}
@media (max-width:560px){
  .wrap{width:min(1240px,100% - 32px)}
  .steps{grid-template-columns:1fr}
  .btn{width:100%;justify-content:space-between}
  header .btn{width:auto}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv,.fade-in{opacity:1;transform:none}
  .hero h1 .line span{transform:none}
  .marquee .track{animation:none}
}