:root { --ink:#24243c; --ink-soft:#3a3a52; --paper:#fff8f4; --pink:#e43078; --pink-deep:#c21f60; --blush:#fce0ea; --sand:#f4eef1; --muted:#6d6b7e; --line:rgba(36,24,48,.16); --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; --serif:"Fraunces","Georgia","Times New Roman",serif; --mono:"DM Mono",ui-monospace,"SFMono-Regular","Courier New",monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:#ded8db; color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:3px solid var(--pink); outline-offset:4px; }
p,h1,h2,h3 { margin-top:0; }
h1,h2,h3 { font-family:var(--serif); }
.skip-link { position:fixed; z-index:100; top:-80px; left:18px; padding:13px 18px; background:var(--paper); font-weight:700; }
.skip-link:focus { top:18px; }
.site-shell { width:min(100%,1880px); min-height:100vh; margin-inline:auto; overflow:hidden; background:var(--paper); box-shadow:0 0 60px rgba(36,24,48,.2); }
.section-pad { padding:clamp(82px,8vw,140px) clamp(28px,6vw,108px); }
.site-header { min-height:80px; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:13px clamp(24px,4vw,72px); border-bottom:2px solid var(--ink); background:var(--paper); }
.brand { display:flex; align-items:center; gap:12px; font-size:15px; font-weight:700; letter-spacing:-.02em; text-transform:uppercase; }
.brand em { color:var(--pink); font-family:var(--serif); font-size:18px; font-weight:600; font-style:italic; text-transform:none; }
.brand-logo { height:clamp(30px,3.4vw,38px); width:auto; display:block; }
.brand-mark { width:40px; height:40px; flex:0 0 auto; object-fit:contain; }
.site-header nav { display:flex; gap:clamp(17px,2.7vw,38px); font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.02em; text-transform:uppercase; }
.site-header nav a { padding:8px 0; border-bottom:1px solid transparent; }
.site-header nav a:hover { border-color:currentColor; }
.header-cta { padding:13px 17px; background:var(--ink); color:#fff; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.03em; text-transform:uppercase; transition:background .15s ease; }
.header-cta:hover { background:var(--pink); }
.hero { min-height:760px; display:grid; grid-template-columns:1.08fr .92fr; background:var(--paper); }
.hero-copy { align-self:center; padding:clamp(80px,9vw,145px) clamp(28px,6vw,108px); }
.eyebrow { margin-bottom:24px; color:var(--muted); font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.06em; line-height:1.5; text-transform:uppercase; }
.eyebrow span { width:8px; height:8px; display:inline-block; margin-right:8px; border-radius:50%; background:var(--pink); }
h1,h2 { margin-bottom:32px; font-size:clamp(50px,6vw,94px); font-weight:600; letter-spacing:-.018em; line-height:1.0; }
h1 em,h2 em { color:var(--pink); font-family:var(--serif); font-weight:600; font-style:italic; }
.hero-intro { max-width:660px; color:var(--muted); font-size:clamp(18px,1.5vw,22px); line-height:1.62; }
.hero-actions,.contact-actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px 30px; margin-top:40px; }
.button { min-width:212px; min-height:56px; display:inline-flex; align-items:center; justify-content:space-between; gap:24px; padding:15px 20px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.03em; text-transform:uppercase; transition:background .15s ease; }
.button-primary { background:var(--pink); color:#fff; }
.button-primary:hover { background:var(--pink-deep); }
.button-light { background:var(--paper); color:var(--pink); }
.button-light:hover { background:#fff; }
.text-link { padding:8px 0; border-bottom:1px solid currentColor; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.02em; text-transform:uppercase; }
.hero-board { position:relative; min-height:650px; overflow:hidden; border-left:2px solid var(--ink); background:var(--blush); }
.hero-board::before { content:""; position:absolute; inset:0; opacity:.55; background-image:linear-gradient(rgba(36,36,60,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(36,36,60,.13) 1px,transparent 1px); background-size:42px 42px; }
.board-title { position:absolute; z-index:1; top:26px; left:26px; right:26px; display:flex; justify-content:space-between; padding-bottom:13px; border-bottom:2px solid var(--ink); font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.03em; text-transform:uppercase; }
.board-title b { color:var(--pink); letter-spacing:5px; }
.paper { position:absolute; z-index:1; width:min(55%,360px); min-height:180px; display:flex; flex-direction:column; padding:25px; border:2px solid var(--ink); box-shadow:7px 7px 0 var(--ink); }
.paper small { font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.04em; }
.paper strong { margin:auto 0 8px; font-family:var(--serif); font-size:clamp(26px,2.9vw,40px); font-weight:600; letter-spacing:-.01em; }
.paper span { font-family:var(--serif); font-style:italic; font-size:15px; color:var(--muted); }
.paper-one { top:100px; left:9%; background:var(--paper); transform:rotate(-4deg); }
.paper-two { top:265px; right:8%; background:var(--blush); transform:rotate(3deg); }
.paper-three { left:16%; bottom:55px; background:#fff; transform:rotate(-1deg); }
.board-stamp { position:absolute; z-index:2; right:6%; bottom:44px; width:120px; height:120px; display:grid; place-items:center; border:3px solid var(--pink); border-radius:50%; color:var(--pink); font-family:var(--mono); font-size:10px; font-weight:500; line-height:1.5; text-align:center; text-transform:uppercase; transform:rotate(9deg); }
.ticker { min-height:58px; display:flex; align-items:center; justify-content:center; gap:clamp(15px,2.7vw,40px); overflow:hidden; padding:15px 24px; background:var(--ink); color:#fff; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.ticker i { width:6px; height:6px; flex:0 0 auto; border-radius:50%; background:var(--pink); }
.services { background:var(--sand); }
.section-heading { display:grid; grid-template-columns:.45fr 1.25fr .65fr; align-items:end; gap:5vw; margin-bottom:62px; }
.section-heading h2 { margin:0; font-size:clamp(40px,5vw,72px); }
.section-heading>p:last-child { margin:0; color:var(--muted); line-height:1.62; }
.service-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.service-card { min-height:448px; display:flex; flex-direction:column; padding:clamp(28px,3.5vw,50px); border:2px solid var(--ink); }
.service-card>span { font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.04em; }
.service-card h3 { margin:62px 0 20px; font-size:clamp(31px,3.4vw,50px); font-weight:600; letter-spacing:-.012em; line-height:1.06; }
.service-card p { max-width:640px; line-height:1.62; }
.service-card ul { margin:auto 0 0; padding:28px 0 0; border-top:2px solid currentColor; list-style:none; }
.service-card li { display:inline-block; margin:5px 6px 0 0; padding:7px 9px; border:1px solid currentColor; font-family:var(--mono); font-size:10px; letter-spacing:.02em; text-transform:uppercase; }
.card-berry { background:var(--ink); color:#fff; }
.card-coral { background:var(--pink); color:#fff; }
.card-mint { background:var(--blush); color:var(--ink); }
.card-butter { background:var(--paper); color:var(--ink); }
.about { display:grid; grid-template-columns:1fr 1fr; gap:9vw; background:var(--paper); }
.about h2 { margin:0; font-size:clamp(44px,5.8vw,86px); }
.about-copy { align-self:end; }
.about-lead { font-family:var(--serif); font-size:clamp(20px,1.9vw,28px); font-weight:400; line-height:1.5; }
.about-copy>p:not(.about-lead) { color:var(--muted); line-height:1.72; }
.quick-facts { display:flex; flex-wrap:wrap; gap:9px; margin-top:34px; }
.quick-facts span { padding:9px 12px; border:1px solid var(--ink); background:var(--blush); font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.02em; text-transform:uppercase; }
.contact { background:var(--ink); color:#fff; }
.contact .eyebrow { color:#f2add0; }
.contact h2 { max-width:1120px; }
.contact h2 em { color:#f8bcd6; }
.contact>p:not(.eyebrow) { max-width:690px; color:#d7d5e3; font-size:19px; line-height:1.62; }
.site-footer { min-height:132px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:32px clamp(32px,4vw,68px); padding:27px clamp(24px,4vw,72px); background:var(--ink); color:#a7a5b9; }
.site-footer .brand { color:#fff; }
.site-footer .brand em { color:#f8bcd6; }
.footer-nav { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px clamp(18px,2.4vw,34px); font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.03em; text-transform:uppercase; }
.footer-nav>a { padding:8px 0; border-bottom:1px solid transparent; color:#c7c5d2; }
.footer-nav>a:hover { border-color:currentColor; color:#fff; }
.footer-meta { display:grid; justify-items:end; gap:5px; color:#8c899d; font-family:var(--mono); font-size:9px; line-height:1.5; letter-spacing:.03em; text-align:right; text-transform:uppercase; }
.site-credit { display:block; color:#77758a; font-size:8px; letter-spacing:.01em; text-transform:none; }
.site-credit i { margin:0 4px; font-style:normal; }
.reveal { opacity:1; transform:none; }
.js .reveal { opacity:0; transform:translateY(18px); transition:opacity .68s cubic-bezier(.22,1,.36,1),transform .68s cubic-bezier(.22,1,.36,1); transition-delay:var(--reveal-delay,0ms); }
.js .reveal.visible { opacity:1; transform:none; }
.reveal-delay-1 { --reveal-delay:85ms; }
.reveal-delay-2 { --reveal-delay:170ms; }
.reveal-delay-3 { --reveal-delay:255ms; }
.reveal-group>.reveal:nth-child(2) { --reveal-delay:85ms; }
.reveal-group>.reveal:nth-child(3) { --reveal-delay:170ms; }
.reveal-group>.reveal:nth-child(4) { --reveal-delay:255ms; }
@media (max-width:900px) { .site-header { flex-wrap:wrap; } .site-header nav { order:3; width:100%; justify-content:center; padding-top:10px; border-top:1px solid var(--line); } .hero { grid-template-columns:1fr; } .hero-board { min-height:640px; border-top:2px solid var(--ink); border-left:0; } .section-heading { grid-template-columns:1fr; gap:20px; } .about { grid-template-columns:1fr; } .site-footer { grid-template-columns:auto 1fr; } .footer-nav { justify-content:flex-end; } .footer-meta { grid-column:1 / -1; justify-self:end; } }
@media (max-width:650px) { body { font-size:16px; } .section-pad { padding:74px 22px; } .site-header { padding:13px 18px; } .header-cta { display:none; } .hero-copy { padding:80px 22px; } h1 { font-size:clamp(46px,13vw,64px); } .hero-board { min-height:590px; } .paper { width:66%; min-height:160px; } .paper-one { left:6%; } .paper-two { right:5%; } .paper-three { left:8%; } .board-stamp { right:4%; width:104px; height:104px; } .ticker { justify-content:flex-start; overflow-x:auto; } .section-heading h2 { font-size:44px; } .service-grid { grid-template-columns:1fr; } .service-card { min-height:404px; } .site-footer { grid-template-columns:1fr; align-items:start; } .footer-nav { width:100%; justify-content:flex-start; } .footer-meta { grid-column:auto; justify-self:end; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .js .reveal { opacity:1; transform:none; transition:none; } }