:root { --paper:#f5f3ee; --ink:#292929; --muted:#77736e; --line:#d8d4cc; --gutter:clamp(24px,5vw,80px); --latin:"Helvetica Neue",Arial,sans-serif; color:var(--ink); background:var(--paper); font-family:var(--latin),"Hiragino Sans","Yu Gothic",Meiryo,sans-serif; scroll-behavior:smooth; }
* { box-sizing:border-box; }
body { margin:0; font-size:16px; line-height:1.95; }
h1,h2,h3,p,dl,dd { margin:0; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }
a:focus-visible,button:focus-visible { outline:2px solid currentColor; outline-offset:6px; }
[hidden] { display:none!important; }
[id] { scroll-margin-top:90px; }
.wrap { width:calc(100% - 2 * var(--gutter)); max-width:1280px; margin-inline:auto; }
.section { padding-block:clamp(80px,11vw,160px); }
.eyebrow,.number { font-size:12px; font-weight:500; letter-spacing:.08em; line-height:1.5; }
h2 { font-size:clamp(32px,4.4vw,64px); line-height:1.5; font-weight:600; letter-spacing:-.05em; }
h3 { font-size:clamp(22px,2.3vw,32px); line-height:1.5; letter-spacing:-.04em; }
.prose p+p { margin-top:1em; }
.note { font-size:14px; color:#68645e; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:10%; }
.skip { position:fixed; top:-100px; background:#fff; padding:10px; z-index:20; }
.skip:focus { top:10px; }
.header { position:sticky; top:0; z-index:5; background:var(--paper); }
.header-inner { height:84px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.logo { font-family:var(--latin); font-size:26px; letter-spacing:.25em; font-weight:400; }
.header nav,.footer nav { display:flex; gap:32px; font-size:12px; letter-spacing:.06em; }
.header nav a { padding:10px 0; }
.nav-contact { border-bottom:1px solid var(--ink); }
.menu { background:none; border:1px solid var(--line); padding:6px 12px; font-size:12px; }
.hero { padding-top:48px; padding-bottom:0; }
.hero-copy { position:relative; }
.hero-label { font-size:15px; letter-spacing:.25em; margin-bottom:35px; }
.hero h1 { font-size:clamp(48px,8.2vw,118px); letter-spacing:-.075em; line-height:1.25; font-weight:600; }
.hero h1 span { display:block; white-space:nowrap; }
.hero h1 span:nth-child(2) { margin-left:15%; }
.hero-description { width:max-content; max-width:100%; margin:40px 0 36px auto; line-height:2; }
.location { font-size:13px; margin-bottom:25px; }
.hero-services { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--ink); }
.hero-services a { display:grid; grid-template-columns:1fr auto; gap:6px; padding:22px 24px 26px; border-right:1px solid var(--line); transition:background-color .3s,color .3s; }
.hero-services a:first-child { padding-left:0; }
.hero-services a:last-child { border:0; }
.hero-services .number { grid-column:1/-1; margin-bottom:15px; }
.hero-services .eyebrow { font-size:clamp(12px,1.5vw,20px); letter-spacing:-.02em; font-weight:500; }
.hero-services strong { display:block; font-size:14px; font-weight:400; margin-top:5px; }
.arrow { display:grid; place-items:center; width:40px; height:40px; align-self:center; border:1px solid var(--line); border-radius:50%; transition:color .3s,background-color .3s,transform .3s; }
.hero-services a:hover { background:#eae7e0; }
.hero-services a:hover .arrow { background:var(--ink); color:var(--paper); }
.intro { padding-top:160px; padding-bottom:160px; align-items:start; }
.intro h2 { font-size:clamp(30px,4vw,56px); }
.intro .prose { padding-top:90px; }
#services { padding-top:0; padding-bottom:0; }
.service-heading { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--ink); padding-bottom:25px; }
.service-heading h2 { font-size:28px; }
.services { overflow:hidden; }
.service { position:relative; display:grid; grid-template-columns:1fr 1fr; column-gap:10%; row-gap:30px; padding:85px max(var(--gutter),calc((100vw - 1280px)/2)) 100px; }
.service-display { grid-column:1/-1; font-size:clamp(110px,23vw,330px); font-weight:400; letter-spacing:-.085em; line-height:.82; margin-bottom:20px; }
.service>.number { position:absolute; right:var(--gutter); top:60px; }
.service h3 { margin:8px 0 22px; }
.service ul { padding:0; margin:0; list-style:none; align-self:end; }
.service li { border-bottom:1px solid var(--line); padding:8px 0; font-size:15px; }
.service .note { margin-top:20px; }
#web { padding-top:65px; }
#web>div:not(.service-display) { max-width:470px; }
#web ul { margin-top:50px; }
#ec { background:#fff; grid-template-columns:1.1fr 1fr; }
#ec .service-display { grid-column:2; grid-row:1/3; text-align:right; font-size:clamp(130px,30vw,430px); align-self:center; }
#ec>div:not(.service-display) { grid-column:1; grid-row:1; }
#ec ul { grid-column:1; }
#automation { background:var(--ink); color:var(--paper); padding-top:95px; }
#automation .service-display { font-size:clamp(45px,11.2vw,160px); margin-bottom:55px; letter-spacing:-.07em; }
#automation li { border-color:#55524d; }
#automation .note { color:#c1bbb1; }
.examples { background:var(--ink); color:var(--paper); border-top:1px solid #55524d; }
.examples .section { padding-top:80px; }
.examples h2 { margin-top:30px; }
.examples h2 span { display:block; }
.examples h2 span:nth-child(2) { margin-left:12%; }
.examples h2 span:nth-child(3) { margin-left:25%; }
.example-caption { margin-top:65px; font-size:14px; }
.comparison { display:grid; grid-template-columns:1fr 1fr; gap:7%; margin-top:25px; }
.comparison h3 { font:400 clamp(28px,4vw,48px)/1.3 var(--latin); border-bottom:1px solid #6d6962; padding-bottom:20px; }
.comparison h3 span { display:block; font-size:14px; margin-top:12px; }
.workflow { padding:0; margin:25px 0; list-style:none; }
.workflow li { position:relative; padding:18px 16px; border:1px solid #77736e; text-align:center; margin-bottom:28px; }
.workflow li+li::before { content:"↓"; position:absolute; top:-32px; left:50%; }
.after { background:var(--paper); color:var(--ink); padding:28px; }
.after .workflow li:last-child { background:var(--ink); color:var(--paper); padding-block:40px; font-size:22px; }
.after>p { font-size:15px; }
.use-cases { display:grid; grid-template-columns:1fr 1fr; gap:20px 7%; margin-top:50px; }
.use-cases p { font-size:14px; border-top:1px solid #55524d; padding-top:15px; }
.use-cases strong { display:block; font-size:18px; font-weight:500; }
.examples .note { color:#c1bbb1; margin-top:30px; }
.partners { border-bottom:1px solid var(--line); }
.partners h2 { margin-top:25px; font-size:clamp(30px,4.3vw,60px); }
.partners .prose { padding-top:50px; }
.technologies { display:flex; flex-wrap:wrap; gap:12px 24px; margin-block:30px!important; }
.technologies span { font-size:20px; line-height:1.5; }
.text-link { display:inline-block; padding:12px 0; border-bottom:1px solid; transition:opacity .3s; }
.text-link:hover { opacity:.55; }
#about>h2 { font-size:26px; margin-top:16px; }
.about-content { margin-top:55px; align-items:start; }
.profile { grid-column:1; grid-row:1; }
.about-content>.prose { grid-column:2; grid-row:1; padding-top:10px; }
.profile-name { font-size:clamp(70px,10vw,145px); letter-spacing:-.06em; line-height:.95; font-weight:400; }
.profile-name span { display:block; font-size:14px; letter-spacing:.12em; margin:30px 0 45px; }
.profile>p:last-child { font-size:15px; }
.facts { display:flex; gap:40px; margin:45px 0 15px; padding-top:25px; border-top:1px solid var(--line); }
.facts dt { font-size:13px; }
.facts dd { font-size:65px; line-height:1.3; letter-spacing:-.05em; }
.facts dd span { font-size:16px; margin-left:6px; letter-spacing:0; }
.flow { border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1.5fr; gap:20px 8%; }
.flow>h2 { grid-column:1; font-size:32px; }
.flow-list { grid-column:2; grid-row:1/4; list-style:none; margin:0; padding:0; }
.flow-list li { display:grid; grid-template-columns:35px 1fr; gap:10px; border-top:1px solid var(--line); padding:25px 0; }
.flow-list h3 { font-size:23px; }
.flow-list p { grid-column:2; }
.flow>.note { font-size:13px; }
.contact { background:#fff; }
.contact .split { display:block; }
.contact h2 { font-size:clamp(38px,7.5vw,106px); margin-top:25px; }
.contact .prose { max-width:650px; margin:35px 0 0 auto; }
.contact-link { display:flex; align-items:center; justify-content:space-between; margin-top:35px; padding:24px 30px; background:var(--ink); color:var(--paper); font-size:22px; transition:background-color .3s,color .3s; }
.contact-link span { font-size:36px; line-height:1; transition:transform .3s; }
.contact-link:hover { background:#e3dfd5; color:var(--ink); }
.contact-link:hover span { transform:translate(4px,-4px); }
.footer { padding-top:45px; }
.footer-main { display:flex; justify-content:space-between; gap:30px; }
.footer-main .logo { display:none; }
.footer p { font-size:13px; }
.footer-wordmark { font-size:clamp(64px,18.3vw,258px); letter-spacing:.04em; line-height:1.1; margin:60px 0 30px; }
.copyright { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding:20px 0; }
.cursor-follower { position:fixed; top:0; left:0; z-index:10; pointer-events:none; opacity:0; transition:opacity .3s; }
.cursor-follower::before { content:""; display:block; width:28px; height:28px; border:1px solid #99958d; border-radius:50%; transform:translate(-50%,-50%); transition:width .3s,height .3s,background .3s; }
.cursor-follower.visible { opacity:.65; }
.cursor-follower.over-link::before { width:52px; height:52px; background:rgb(119 115 110 / 10%); }
@media screen {
 .heading-reveal.reveal-visible { animation:heading-wipe 2s cubic-bezier(.22,.61,.36,1) both; }
 @keyframes heading-wipe {
   from { clip-path:inset(-4px 100% -4px -4px); }
   to { clip-path:inset(-4px -4px -4px -4px); }
 }
 .hero-services .arrow { transform:translate(var(--hover-x,0px),var(--hover-y,0px)); }
}
@media(max-width:800px) {
 .header-inner { height:70px; }
 .hero h1 { font-size:clamp(39px,8.9vw,72px); }
 .hero h1 span:nth-child(2) { margin-left:6%; }
 .hero-services a { padding:18px 12px; }
 .hero-services .arrow { width:29px; height:29px; }
 .intro { padding-block:100px; }
 .intro .prose { padding-top:55px; }
 .service { gap:30px 7%; }
 .service li { font-size:14px; }
 .footer nav { gap:15px; }
}
@media(max-width:600px) {
 .logo { font-size:21px; }
 .header-inner { position:relative; }
 .header nav { gap:12px; }
 .header nav.mobile-nav { position:absolute; top:100%; right:0; min-width:200px; padding:20px; background:var(--paper); border:1px solid var(--line); display:grid; }
 .hero { padding-top:30px; }
 .hero-label { margin-bottom:32px; font-size:12px; }
 .hero h1 { font-size:clamp(32px,8.7vw,52px); }
 .hero-description { font-size:14px; margin-top:30px; }
 .location { font-size:12px; margin-top:30px; }
 .hero-services { grid-template-columns:1fr; }
 .hero-services a,.hero-services a:first-child { grid-template-columns:22px 1fr auto; border-right:0; border-bottom:1px solid var(--line); padding:15px 0; align-items:center; }
 .hero-services .number { grid-column:auto; margin:0; font-size:10px; }
 .hero-services .eyebrow { font-size:17px; }
 .hero-services strong { font-size:12px; margin-top:2px; }
 .hero-services .arrow { width:35px; height:35px; }
 .split { grid-template-columns:1fr; gap:30px; }
 .intro .prose { padding:0 0 0 8%; }
 .service { grid-template-columns:1fr; padding-block:65px; gap:25px; }
 .service-display { font-size:38vw; margin-bottom:10px; }
 .service>.number { top:35px; }
 #web ul { margin:0; }
 #ec { grid-template-columns:1fr; }
 #ec .service-display { grid-column:1; grid-row:1; font-size:50vw; text-align:right; }
 #ec>div:not(.service-display) { grid-row:2; }
 #ec ul { grid-row:3; }
 #automation { padding-top:70px; }
 #automation .service-display { font-size:10.2vw; margin-bottom:10px; }
 .service ul { margin-left:8%; }
 .examples h2 { font-size:clamp(27px,7vw,40px); }
 .examples h2 span:nth-child(2) { margin-left:4%; }
 .examples h2 span:nth-child(3) { margin-left:8%; }
 .comparison { gap:35px; grid-template-columns:1fr; }
 .example-caption { margin-top:40px; }
 .use-cases { grid-template-columns:1fr; gap:18px; }
 .partners .prose { padding-top:0; }
 .technologies span { font-size:18px; }
 .about-content>.prose,.profile { grid-column:1; grid-row:auto; }
 .profile { grid-row:1; }
 .profile-name { font-size:90px; }
 .facts { gap:35px; }
 .facts dd { font-size:55px; }
 .flow { display:block; }
 .flow>h2 { margin:15px 0 35px; }
 .contact h2 { font-size:8vw; white-space:nowrap; }
 .contact-link { font-size:20px; padding:18px 22px; }
 .footer-main { flex-direction:column; }
 .footer-wordmark { font-size:17vw; margin-top:45px; }
}
@media(hover:none),(pointer:coarse) { .cursor-follower { display:none; } }

/* Refined hierarchy and readable spacing. */
body { line-height:1.85; }
.section { padding-block:clamp(76px,9vw,128px); }
.hero { padding-top:clamp(36px,5vw,72px); }
.hero-copy { display:grid; grid-template-columns:1.35fr 1fr; gap:24px 7%; }
.hero-label { grid-column:1/-1; margin:0 0 12px; font-size:15px; }
.hero h1 { grid-column:1/-1; font-size:clamp(48px,8.6vw,124px); line-height:1.22; }
.hero h1 span:nth-child(2) { margin-left:22%; }
.hero-description { grid-column:2; width:auto; max-width:none; margin:8px 0 32px; font-size:16px; line-height:1.85; }
.hero-description span { display:block; }
.hero-description span+span { margin-top:8px; }
.location { grid-column:1; grid-row:2; align-self:end; margin-bottom:32px; font-size:14px; }
.hero-services a { min-height:162px; padding:24px; }
.hero-services a:first-child { padding-left:20px; }
.hero-services .number { font-size:14px; margin-bottom:12px; }
.hero-services .eyebrow { font-size:clamp(17px,1.7vw,24px); }
.hero-services strong { font-size:16px; margin-top:8px; }
.hero-services .arrow { width:44px; height:44px; font-size:22px; }
.intro { padding-block:clamp(88px,10vw,144px); }
.intro .prose { padding-top:45px; }
.service li { font-size:16px; padding-block:10px; }
.service .note { line-height:1.8; }
#automation { padding-block:85px; }
#automation .service-display { margin-bottom:30px; }
.examples { background:var(--paper); color:var(--ink); border-top:0; }
.examples .section { padding-top:95px; }
.examples h2 { font-size:clamp(32px,4vw,56px); }
.examples .note { color:#68645e; }
.example-caption { font-size:16px; margin-top:45px; }
.comparison { gap:4%; align-items:stretch; }
.before,.after { padding:30px; border:1px solid var(--line); }
.before { background:transparent; }
.after { background:#fff; }
.comparison h3 { font-size:clamp(30px,3.6vw,48px); border-color:var(--line); }
.comparison h3 span { font-size:15px; line-height:1.8; margin-top:14px; }
.workflow li { font-size:16px; border-color:var(--line); padding:16px; background:#fff; }
.workflow li+li::before { color:var(--muted); }
.after .workflow li:last-child { padding:28px 20px; }
.after .workflow strong { display:block; font-size:24px; font-weight:500; margin-bottom:15px; }
.after .workflow li span { display:block; font-size:16px; line-height:1.8; }
.after>p { font-size:16px; margin-top:28px; }
.use-cases p { font-size:15px; border-color:var(--line); line-height:1.8; }
.use-cases strong { margin-bottom:6px; }
.facts dt,.profile-name span { font-size:15px; }
.facts { margin-top:35px; }
.flow>.note { font-size:14px; }
.footer p { font-size:14px; }
@media(min-width:801px) and (max-width:1100px) {
 .hero-services a { padding-inline:16px; }
 .hero-services .eyebrow { font-size:17px; }
 .hero-services .arrow { width:34px; height:34px; }
}
@media(max-width:800px) {
 .hero-copy { column-gap:5%; grid-template-columns:1fr 1.15fr; }
 .hero h1 { font-size:8.4vw; }
 .hero h1 span:nth-child(2) { margin-left:15%; }
 .hero-description { font-size:16px; }
 .hero-services a { padding:18px 10px; }
 .hero-services a:first-child { padding-left:10px; }
 .hero-services .eyebrow { font-size:15px; }
 .hero-services strong { font-size:15px; }
 .hero-services .arrow { width:30px; height:30px; font-size:18px; }
 .comparison { gap:24px; }
 .before,.after { padding:22px; }
}
@media(max-width:600px) {
 body { font-size:16px; line-height:1.85; }
 .section { padding-block:76px; }
 .hero { padding-top:32px; }
 .hero-copy { display:block; }
 .hero-label { font-size:14px; margin-bottom:30px; }
 .hero h1 { font-size:clamp(32px,8.7vw,52px); line-height:1.35; }
 .hero h1 span:nth-child(2) { margin-left:5%; }
 .hero-description { margin:28px 0 24px; padding-left:5%; font-size:16px; }
 .hero-description span+span { margin-top:10px; }
 .desktop-break { display:none; }
 .location { font-size:14px; margin:0 0 26px; }
 .hero-services a,.hero-services a:first-child { min-height:104px; padding:20px 0; gap:12px; }
 .hero-services .number { font-size:12px; margin:0; }
 .hero-services .eyebrow { font-size:19px; }
 .hero-services strong { font-size:15px; margin-top:6px; }
 .hero-services .arrow { width:36px; height:36px; }
 .intro { padding-block:85px; gap:30px; }
 .intro .prose { padding:0; }
 .service { padding-block:64px; gap:28px; }
 .service li { font-size:15px; line-height:1.85; padding-block:12px; }
 .service ul { margin-left:0; }
 #automation { padding-block:64px; }
 #automation .service-display { margin-bottom:15px; }
 .examples .section { padding-top:72px; }
 .examples h2 { font-size:clamp(26px,6.8vw,38px); line-height:1.55; }
 .examples h2 span:nth-child(2) { margin-left:0; }
 .examples h2 span:nth-child(3) { margin-left:5%; }
 .example-caption { font-size:15px; margin-top:35px; }
 .comparison { gap:28px; margin-top:22px; }
 .before,.after { padding:24px 20px; }
 .comparison h3 { font-size:34px; }
 .comparison h3 span { font-size:15px; }
 .workflow { margin-bottom:0; }
 .workflow li { font-size:16px; padding:18px 12px; }
 .workflow li:last-child { margin-bottom:0; }
 .after .workflow strong { font-size:22px; }
 .use-cases { margin-top:36px; gap:24px; }
 .note { font-size:14px; }
 .facts dd { font-size:64px; }
}

.hero-description .phrase { display:inline-block; margin:0; white-space:nowrap; }

/* Hover transitions live on the resting state, including the return motion. */
.header nav a, .footer nav a, .logo, .menu {
  transition: color .3s ease, background-color .3s ease, opacity .3s ease;
}
.header nav a:hover, .footer nav a:hover, .logo:hover { opacity:.6; }
.menu:hover { background-color:var(--ink); color:var(--paper); }
@media screen {
  .body-reveal {
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  }
  .body-reveal.reveal-visible {
    opacity:1;
    transform:translateY(0);
  }
}
@media print {
  .heading-reveal { clip-path:none; }
  .body-reveal { opacity:1; transform:none; }
}

.profile-name { font-size:clamp(26px,3vw,40px); line-height:1.4; letter-spacing:.08em; }
.profile-name span { margin:12px 0 28px; }
.example-intro { margin-top:28px; max-width:620px; }
.example-intro p+p { margin-top:8px; }
@media(max-width:600px) {
  .profile-name { font-size:28px; }
}

.business-profile { margin-top:48px; border-top:1px solid var(--line); }
.business-profile>div {
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:36px;
  padding:36px 0;
  border-bottom:1px solid var(--line);
  font-size:16px;
  line-height:1.85;
}
.business-profile dt { font-weight:600; }
.business-profile dd { margin:0; }
.business-profile ul { margin:0; padding-left:1.2em; }
.business-profile li+li { margin-top:10px; }
.about-note { margin-top:24px; }
@media(max-width:600px) {
  .business-profile { margin-top:32px; }
  .business-profile>div { grid-template-columns:82px minmax(0,1fr); gap:18px; padding:26px 0; font-size:15px; }
}

.about-intro { max-width:800px; margin-top:32px; font-size:16px; line-height:1.85; }
.about-intro p+p { margin-top:1em; }