[data-scene] { --p: 0; }
.hero-scene { height: 250svh; }
.hero-pin {
position: sticky;
top: 0;
height: 100svh;
overflow: hidden;
background: var(--ground);
z-index: 3;
--pxc: 28;
--pm: 3;
--ph: clamp(0, calc(var(--p) * var(--pm)), 1);
}
.hero-stage {
position: absolute;
inset: 0;
display: grid;
align-content: center;
padding: 8.5rem var(--edge) calc(var(--gutter) + 1rem);
will-change: transform;
}
.hero-top {
display: grid;
grid-template-columns: minmax(230px, 25%) 1fr;
gap: 3vw;
align-items: start;
}
.hero-side {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sp-2);
}
.hero-badge {
display: flex;
align-items: flex-start;
gap: 0.7rem;
font-size: var(--t-xs);
line-height: var(--lh-subhead);
margin-top: calc(var(--t-xxl3) * 0.169);
}
.hero-badge img { width: 22px; height: auto; margin-top: 2px; }
.hero-title { max-width: 20ch; }
.hero-cta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.15rem;
}
.hero-scroll-w { align-self: center; }
.hero-scroll {
display: inline-flex;
align-items: center;
gap: 0.6rem;
transition: opacity 0.4s var(--ease);
}
.hero-scroll:hover { opacity: 0.62; }
.stats__head {
display: grid;
grid-template-columns: 1fr minmax(240px, 22%);
gap: 4vw;
align-items: end;
}
.stats__note { display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; }
.stats__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 2vw;
margin-top: var(--sp-3);
}
.stat { display: flex; flex-direction: column; gap: 0.8rem; padding-top: 1.6rem; }
.stat__n { font-size: var(--t-xxl); line-height: 0.95; letter-spacing: -0.03em; }
.forms-scene { --p: 0; }
.forms-pin {
position: relative;
height: 100svh;
overflow: hidden;
}
.forms-item {
position: absolute;
will-change: transform;
transform:
translate3d(calc((1 - var(--p)) * var(--dx, 0px)), calc((1 - var(--p)) * var(--dy, 0px)), 0)
rotate(calc(var(--rot, 0deg) + (1 - var(--p)) * var(--dr, 0deg)));
}
.forms-cap {
position: absolute;
left: var(--edge);
bottom: calc(var(--gutter) + 1rem);
z-index: 8;
display: flex;
flex-direction: column;
gap: 0.9rem;
max-width: 30ch;
opacity: clamp(0, calc(var(--p) * 2.4 - 0.2), 1);
}
.slot {
display: grid;
place-items: center;
gap: 0.6rem;
width: 100%;
height: 100%;
background: rgba(var(--ink-rgb), 0.05);
border: 1px solid var(--hairline);
text-align: center;
}
.svc-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 3vw;
margin-bottom: var(--sp-2);
}
.svc-head h2 { max-width: 22ch; }
.svc {
position: relative;
margin-top: var(--sp-2);
}
.svc__in {
position: relative;
display: grid;
grid-template-columns: 1fr minmax(0, 46%);
column-gap: 3.4vw;
align-items: center;
padding-top: var(--sp-1);
}
.svc__body { display: flex; flex-direction: column; gap: 1.4rem; }
.svc__body p { max-width: 34ch; }
.svc__tags { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tag {
display: inline-flex;
align-items: center;
height: max(34px, 2.5vw);
padding: 0 max(14px, 1.05vw);
border: 1px solid var(--hairline);
border-radius: var(--radius-pill);
font-size: var(--t-xxs);
line-height: 1;
color: var(--body);
}
.svc__art {
position: relative;
aspect-ratio: 4 / 3;
background: rgba(var(--ink-rgb), 0.09);
overflow: hidden;
}
.svc__art svg { width: 100%; height: 100%; }
.svc__art > img { width: 100%; height: 100%; object-fit: cover; }
.svc__rule {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--ink);
transform: scaleX(0);
transform-origin: left;
transition: transform 1.2s var(--ease-out);
}
.is-in .svc__rule,
.is-in.svc__rule { transform: scaleX(1); }
.svc__rule--end { position: static; margin-top: var(--sp-2); }
.appr__intro {
display: grid;
grid-template-columns: 1fr minmax(240px, 30%);
gap: 4vw;
align-items: end;
margin-bottom: var(--sp-3);
}
.appr__claim { margin-top: 1.4rem; max-width: 26ch; }
.appr__note { max-width: 46ch; }
.appr-row {
display: grid;
grid-template-columns: minmax(160px, 20%) 1fr minmax(150px, 22%);
gap: 3.4vw;
align-items: baseline;
padding-top: 2rem;
border-top: 1px solid var(--hairline);
margin-top: 2rem;
}
.appr-row__stage { display: flex; align-items: flex-start; gap: 0; }
.appr-row, .appr-head { --appr-measure: min(100%, calc(var(--t-s) * 27.5)); }
.appr-row > p,
.appr-head > :nth-child(2) { width: var(--appr-measure); justify-self: center; }
.appr-row__out {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.4rem;
text-align: right;
}
.appr-head {
display: grid;
grid-template-columns: minmax(160px, 20%) 1fr minmax(150px, 22%);
gap: 3.4vw;
}
.appr-head > :last-child { text-align: right; }
.work__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 3vw;
margin-bottom: var(--sp-2);
}
.work__counts { display: flex; align-items: flex-end; gap: 3vw; }
.work__counts ul { display: flex; flex-direction: column; gap: 0.2rem; min-width: 150px; }
.work__counts li { display: flex; justify-content: space-between; gap: 1rem; }
.work-hero { display: flex; flex-direction: column; gap: 1rem; }
.work-hero__media {
position: relative;
aspect-ratio: 1352 / 685;
overflow: hidden;
}
.work-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.work-hero__name { display: block; }
.work-hero__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 2vw; }
.work-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-3) 3.4vw;
margin-top: var(--sp-3);
}
.work-card { display: flex; flex-direction: column; gap: 0.9rem; }
.work-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.work-card__media img { width: 100%; height: 100%; object-fit: cover; }
.work-card__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.work__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 3vw;
padding-top: 2.4rem;
border-top: 1px solid var(--hairline);
margin-top: var(--sp-3);
}
.clients h2 { max-width: 36ch; }
body.is-light .logo-row img { filter: invert(1); }
.logo-wall {
--logo-h: max(34px, 2.9vw);
display: flex;
flex-direction: column;
gap: 2.2rem;
padding-block: var(--sp-2);
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
margin-block: var(--sp-3);
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.logo-row {
display: flex;
width: max-content;
animation: logo-run var(--speed, 56s) linear infinite;
}
.logo-row--b { animation-direction: reverse; --speed: 72s; }
.logo-wall:hover .logo-row { animation-play-state: paused; }
.logo-row > div { display: grid; place-items: center; height: var(--logo-h); padding-inline: 2.6vw; }
.logo-row img {
height: auto;
max-height: var(--logo-h);
max-width: 100%;
width: auto;
object-fit: contain;
}
@keyframes logo-run {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.logo-row { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
.logo-row .dup { display: none; }
}
.quotes__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2vw;
flex-wrap: wrap;
}
.clutch {
display: inline-flex;
align-items: center;
gap: 0.7rem;
padding: 0.5rem 1rem;
border: 1px solid var(--hairline);
border-radius: var(--radius-pill);
transition: background 0.4s var(--ease);
}
.clutch:hover { background: rgba(var(--ink-rgb), 0.08); }
.clutch__stars { display: inline-flex; gap: 0.15rem; }
.clutch__stars svg { width: 12px; height: 12px; fill: var(--ink); }
.clutch__mark { flex: none; width: 13px; height: 15px; color: var(--ink); }
#studio {
position: relative;
z-index: 1;
margin-top: calc(var(--sec-gap) - 100svh);
min-height: calc(100svh - var(--sec-gap));
scroll-margin-top: var(--sec-gap);
}
.no-js #studio { margin-top: var(--sec-gap); min-height: 0; scroll-margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
#studio { margin-top: var(--sec-gap); min-height: 0; scroll-margin-top: 0; }
}
.deck-scene { --p: 0; }
.deck-pin {
position: relative;
height: 100svh;
overflow: hidden;
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
}
.deck__lead {
position: absolute;
left: var(--edge);
top: max(90px, 12svh);
z-index: 6;
display: flex;
flex-direction: column;
gap: 1.4rem;
max-width: 30ch;
}
.deck__act {
position: absolute;
left: var(--edge);
bottom: max(70px, 10svh);
z-index: 6;
display: flex;
align-items: center;
gap: 1.4rem;
}
.deck__ed {
position: absolute;
right: var(--edge);
top: max(90px, 12svh);
z-index: 6;
}
.deck__panel {
position: absolute;
z-index: 4;
will-change: transform;
transform: translate3d(calc((1 - var(--p)) * var(--dx, 46vw)), 0, 0)
rotate(var(--rot, 0deg));
}
.deck__panel img { width: 100%; height: 100%; object-fit: cover; }
.ins__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 3vw;
margin-bottom: var(--sp-2);
}
.ins__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2.4vw;
margin-top: var(--sp-2);
}
.post { display: flex; flex-direction: column; gap: 1rem; }
.post__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.post__media img { width: 100%; height: 100%; object-fit: cover; }
.post__cat {
display: inline-flex;
align-self: flex-start;
align-items: center;
height: max(30px, 2.2vw);
padding: 0 max(13px, 0.95vw);
border: 1px solid var(--hairline);
border-radius: var(--radius-pill);
font-size: var(--t-xxs);
line-height: 1;
}
.faq { --lead: 0; height: calc(var(--fq-n, 5) * 96svh); }
#voices { margin-top: calc(var(--sec-gap) * 0.3); }
.faq__stage {
position: absolute;
inset: 0;
opacity: var(--exit-o, 1);
transform: translateY(var(--exit-y, 0px));
}
.faq__head {
position: absolute;
z-index: 3;
left: var(--edge);
right: var(--edge);
top: max(104px, 15svh);
display: grid;
grid-template-columns: auto 1fr;
align-items: end;
column-gap: 2vw;
}
.faq__head .label { grid-column: 1 / -1; }
.faq__head h2 { margin-top: 1.2rem; max-width: 11ch; }
.faq__rate { justify-self: end; }
.fq__link {
position: absolute;
top: clamp(24px, 2vw, 32px);
right: clamp(24px, 2vw, 32px);
z-index: 4;
display: block;
width: 0.9em;
opacity: 0.62;
transition: opacity 0.3s var(--ease);
}
.fq__link:hover { opacity: 1; }
.fq__link svg { width: 100%; height: auto; display: block; }
.faq__ring { position: absolute; z-index: 1; left: 50%; top: 56%; width: 0; height: 0; }
.fq {
position: absolute;
left: 0;
top: 0;
width: clamp(230px, 19vw, 290px);
min-height: clamp(290px, 24vw, 360px);
padding: clamp(24px, 2vw, 32px);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1.2rem;
border: 1px solid var(--hairline);
background: rgba(var(--ink-rgb), 0.06);
opacity: 0;
will-change: transform, opacity, filter;
transition: background 0.5s var(--ease), border-color 0.5s var(--ease);
--c: 7px;
}
.fq__mark { display: block; height: max(25px, 1.85vw); color: var(--ink); }
.fq__mark svg { height: 100%; width: auto; }
.fq__logo {
height: max(25px, 1.85vw);
width: auto;
max-width: 58%;
object-fit: contain;
object-position: left center;
opacity: 0.9;
}
body.is-light .fq__logo { filter: invert(1); }
.fq h3 { font-size: clamp(15px, 1.15vw, 19px); line-height: 1.14; }
.fq p {
font-size: clamp(12.5px, 0.88vw, 14.5px);
opacity: 0;
transform: translateY(10px);
transition: opacity 0.5s var(--ease), transform 0.7s var(--ease-out);
}
.fq.is-on { border-color: rgba(var(--ink-rgb), 0.55); background: rgba(var(--ink-rgb), 0.1); }
.fq.is-on p { opacity: 1; transform: none; }
.fq > .c { transform: scale(0); transition: transform 0.5s var(--ease-out); }
.fq.is-on > .c { transform: none; }
.faq__lead {
position: absolute;
inset: 0;
z-index: 2;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
opacity: var(--lead);
}
.faq__lead line { stroke: var(--ink); stroke-width: 1; }
.faq__lead circle, .faq__lead rect { fill: var(--ink); }
@media (max-width: 720px) {
.faq { height: 430svh; }
.faq__head { top: max(88px, 12svh); grid-template-columns: 1fr; }
.faq__rate { justify-self: stretch; margin-top: 1rem; }
.faq__rate .clutch { display: flex; width: 100%; justify-content: center; }
.faq__ring { top: 60%; }
.fq { width: 66vw; height: auto; min-height: 62vw; }
.faq__lead { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.faq { height: auto; }
.faq .scene__pin { position: static; height: auto; overflow: visible; }
.faq__stage { position: static; opacity: 1; transform: none; filter: none; padding: var(--sp-3) var(--edge); }
.faq__head { position: static; margin-bottom: var(--sp-2); }
.faq__ring {
position: static;
width: auto;
height: auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1rem;
}
.fq { position: static; width: auto; opacity: 1; transform: none !important; filter: none !important; }
.fq p, .fq > .c { opacity: 1; transform: none; }
.faq__lead { display: none; }
}
.cta { position: relative; z-index: 2; padding-block: var(--sec-gap); overflow: hidden; }
.cta .container { position: relative; z-index: 1; }
.cta__goo {
position: absolute;
inset: 0;
z-index: 2;
display: none;
filter: url(#goo);
mix-blend-mode: difference;
pointer-events: none;
--blob: calc(var(--t-xxl) * var(--lh-display) * 2 + var(--t-xxl) * 0.18);
contain: layout paint;
}
.cta__goo i {
position: absolute;
top: 0;
left: 0;
--s: calc(var(--blob) * var(--f, 1));
width: var(--s);
height: var(--s);
margin: calc(var(--s) / -2);
border-radius: 50%;
background: #fff;
translate: var(--x, 50%) var(--y, 50%);
rotate: var(--r, 0deg);
scale: var(--sx, 0) var(--sy, 0);
}
@media (min-width: 1100px) and (hover: hover) {
.cta__goo { display: block; }
}
@media (prefers-reduced-motion: reduce) {
.cta__goo { display: none; }
}
.cta__link {
--cta-hover: var(--coal);
display: flex;
justify-content: center;
width: fit-content;
margin-inline: auto;
color: var(--ink);
}
body.is-dark .cta__link,
body.is-light .cta__link { --cta-hover: var(--flame); }
.cta__h {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--roll-tail);
text-align: left;
}
.cta__row { display: flex; align-items: center; gap: 0.14em; }
.cta__row--end { justify-content: flex-end; }
.cta__arrow {
position: relative;
top: 0.144em;
width: 0.95em;
height: auto;
transition: transform var(--d-roll) var(--ease-text);
}
.cta__link:hover .cta__arrow { transform: translateX(0.28em); }
.cta__lead, .cta__rot { --roll-tail: 0.08em; }
.cta__lead {
position: relative;
display: inline-block;
transition: color 0.45s var(--ease);
}
.cta__lead::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 1.01em;
height: 0.06em;
background: currentColor;
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.9s var(--ease-out);
}
.cta__link.is-ready:hover .cta__lead::after { transform: scaleX(1); }
.cta__link:hover .cta__lead,
.cta__link:hover .cta__arrow { color: var(--cta-hover); }
.cta__arrow { transition: transform var(--d-roll) var(--ease-text), color 0.45s var(--ease); }
.cta__rot {
display: grid;
justify-items: end;
overflow: hidden;
padding-bottom: var(--roll-tail);
margin-bottom: calc(var(--roll-tail) * -1);
transition: color 0.45s var(--ease);
}
.cta__word {
grid-area: 1 / 1;
font-style: normal;
white-space: nowrap;
transform: translateY(105%);
transition: transform var(--d-line) var(--ease-out);
}
.is-in .cta__word.is-on { transform: none; }
.cta__word.is-out { transform: translateY(-130%); transition-duration: 0.75s; }
.cta__rot .cta__word.no-tr { transition: none; }
.cta__link:hover .cta__rot { color: var(--cta-hover); }
@media (max-width: 640px) {
.cta__h { font-size: clamp(30px, 10.3vw, 52px); }
.cta__link { width: 100%; }
.cta__lead { max-width: 74%; }
.cta__arrow { display: none; }
.cta__lead .ln:last-child::after {
content: '';
display: inline-block;
width: 0.95em;
height: 0.95em;
margin-left: 0.14em;
vertical-align: middle;
background: currentColor;
--arr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12H19' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 5L19 12L12 19' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
-webkit-mask: var(--arr) center / contain no-repeat;
mask: var(--arr) center / contain no-repeat;
transform: translateY(105%);
transition: transform var(--d-char) var(--ease-out);
transition-delay: calc(var(--stagger-line) + 9 * var(--stagger-char));
}
.is-in .cta__lead .ln:last-child::after { transform: none; }
.cta__lead::after { display: none; }
}
.ft {
--ft-sm: var(--t-xs);
font-size: var(--ft-sm);
--ftw: clamp(340px, 30vw, 540px);
--ft-t: max(88px, 13svh);
--ft-b: max(64px, 10svh);
position: relative;
z-index: 2;
height: max(640px, 100svh);
overflow: hidden;
isolation: isolate;
}
.ft__bg { display: none; }
.ft__line { position: absolute; z-index: 1; pointer-events: none; }
.ft__line > i {
position: absolute;
inset: 0;
background: var(--hairline);
transition: transform 1.6s var(--ease-out);
}
.ft__line--t, .ft__line--b { left: 0; right: 0; height: 1px; }
.ft__line--t { top: var(--ft-t); }
.ft__line--b { bottom: var(--ft-b); }
.ft__line--t > i { transform: scaleX(0); transform-origin: left; }
.ft__line--b > i { transform: scaleX(0); transform-origin: right; }
.ft__line--l, .ft__line--r { top: 0; bottom: 0; width: 1px; }
.ft__line--l { left: calc(50% - var(--ftw) / 2); }
.ft__line--r { right: calc(50% - var(--ftw) / 2); }
.ft__line--l > i, .ft__line--r > i {
transform: scaleY(var(--ftp, 0));
transform-origin: bottom;
transition: none;
}
.ft__line--t.is-in > i, .ft__line--b.is-in > i { transform: none; }
@media (prefers-reduced-motion: reduce) { .ft__line > i { transform: none !important; } }
.ft__frame {
position: absolute;
z-index: 2;
left: calc(50% - var(--ftw) / 2);
width: var(--ftw);
top: var(--ft-t);
bottom: var(--ft-b);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: var(--sp-1);
padding: clamp(24px, 2.4vw, 40px);
text-align: center;
}
.ft__logo svg { display: block; width: calc(var(--ftw) * 0.5); height: auto; }
.ft__logo svg path {
fill: rgba(var(--ink-rgb), 0.14);
stroke: rgba(var(--ink-rgb), 0.5);
stroke-width: 1.2;
vector-effect: non-scaling-stroke;
}
body.is-dark .ft__logo svg path,
body.is-light .ft__logo svg path {
fill: rgba(var(--flame-rgb), 0.16);
stroke: rgba(var(--flame-rgb), 0.62);
}
.ft__nl { width: 100%; display: flex; flex-direction: column; gap: 0.8rem; }
.ft__nl form {
display: flex;
align-items: center;
gap: 0.7rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--hairline);
}
.ft__nl form.is-sent { border-bottom: 0; padding-bottom: 0; }
.ft__nl input { flex: 1; min-width: 0; background: none; border: 0; font-size: var(--ft-sm); }
.ft__nl input::placeholder { color: var(--dim); }
.ft__nl input:focus { outline: none; }
.ft__contact {
width: 100%;
display: flex;
justify-content: space-between;
gap: 1rem;
font-size: var(--ft-sm);
text-align: left;
}
.ft__contact a { transition: opacity 0.3s var(--ease); }
.ft__contact a:hover { opacity: 0.62; }
.ft__side {
position: absolute;
z-index: 2;
top: calc(var(--ft-t) + var(--sp-1));
display: flex;
gap: var(--sp-2);
}
.ft__side--l { left: var(--edge); }
.ft__side--r { right: var(--edge); }
.ft__col { display: flex; flex-direction: column; gap: 0.6rem; }
.ft .t-xxs,
.ft .t-xs,
.ft__col,
.ft__base,
.ft__contact,
.ft__nl > span,
.ft__mail { font-size: var(--ft-sm); }
.ft__col a { transition: opacity 0.3s var(--ease); }
.ft__col a:hover { opacity: 0.62; }
.ft__base {
position: absolute;
z-index: 2;
left: var(--edge);
bottom: calc(var(--ft-b) / 2);
translate: 0 50%;
display: flex;
align-items: center;
gap: 1.8rem;
}
.ft__base a { transition: opacity 0.3s var(--ease); }
.ft__base a:hover { opacity: 0.62; }
.ab-hero__pin {
position: relative;
height: 100svh;
overflow: hidden;
}
.ab-hero__img {
position: absolute;
z-index: 1;
transform: rotate(var(--rot, 0deg));
transition-delay: calc(var(--i, 0) * 90ms);
}
.ab-hero__img { overflow: hidden; }
.ab-hero__img > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ab-trail {
position: absolute;
inset: 0;
z-index: 2;
overflow: hidden;
pointer-events: none;
display: none;
}
.ab-trail__i {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
transform: translate(-50%, -50%) rotate(var(--r, 0deg));
visibility: hidden;
}
.ab-trail__i > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ab-trail__i.is-on { visibility: visible; }
@media (min-width: 1100px) and (hover: hover) {
.ab-trail { display: block; }
.ab-hero__img { display: none; }
}
.ab-hero__text {
position: absolute;
left: var(--edge);
right: var(--edge);
top: 50%;
transform: translateY(-50%);
z-index: 4;
pointer-events: none;
}
.ab-hero__text .label { display: block; margin-bottom: 1.6rem; }
.ab-hero__motto { max-width: none; letter-spacing: -0.035em; }
.ab-who {
display: grid;
grid-template-columns: minmax(150px, 30%) 1fr;
column-gap: 3vw;
align-items: start;
}
.ab-who .label { grid-column: 1; padding-top: 0.5em; }
.ab-who__lead { grid-column: 2; max-width: 22ch; }
.ab-who__shot {
grid-column: 2;
margin-top: var(--sp-3);
aspect-ratio: 21 / 9;
overflow: hidden;
}
.ab-who__shot > img { width: 100%; height: 100%; object-fit: cover; }
.ab-wide { aspect-ratio: 21 / 9; overflow: hidden; }
.ab-wide > img { width: 100%; height: 100%; object-fit: cover; }
.ab-team__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 3vw;
margin-bottom: var(--sp-2);
}
.ab-team__head > div:first-child { flex: 1; }
.ab-team__head h2 { max-width: 22ch; }
.ab-team__hint { flex: none; }
.ab-team { border-top: 2px solid var(--ink); }
.mem {
position: relative;
display: grid;
grid-template-columns: minmax(56px, 6%) 1fr minmax(180px, 24%);
gap: 3.4vw;
align-items: baseline;
padding-block: var(--sp-1);
border-bottom: 1px solid var(--hairline);
}
.mem__name { line-height: 1.02; transition: opacity 0.4s var(--ease); }
.mem__name .ln > i { position: relative; }
.mem__name .ln > i::after {
content: attr(data-t);
position: absolute;
left: 0;
top: calc(100% + var(--roll-tail));
}
.mem .mem__name .ln > i {
transition: transform var(--d-roll) var(--ease-text);
transition-delay: 0s;
}
.mem:hover .mem__name .ln > i { transform: translateY(calc(-100% - var(--roll-tail))); }
.mem__role { text-align: right; line-height: var(--lh-body); }
.mem__ph { display: none; }
.ab-team:hover .mem:not(:hover) .mem__name { opacity: 0.34; }
main > .phero:first-child { margin-top: max(132px, 10vw); }
.phero__h { margin-top: 1.6rem; max-width: 18ch; }
.phero__lead { margin-top: var(--sp-1); max-width: 46ch; }
.phero__tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--sp-2); }
:root { --strip-h: clamp(260px, 30vw, 480px); }
main > .phero--c:first-child {
margin-top: 0;
min-height: calc(100svh - var(--strip-h) / 2);
padding-block: max(112px, 8vw) var(--sp-2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.phero--c .phero__h { margin-top: 0; max-width: none; }
.phero--c .phero__lead { max-width: 40ch; margin-inline: auto; }
.phero--c .ln { text-align: center; }
main > .phero--c + .strip { margin-top: 0; }
.strip { overflow: hidden; }
.strip__track {
display: flex;
align-items: center;
gap: max(14px, 1.2vw);
height: var(--strip-h);
width: max-content;
padding-inline: var(--edge);
translate: calc(var(--sp, 0) * -24vw) 0;
}
.strip__i {
flex: none;
height: var(--h);
aspect-ratio: var(--ar);
overflow: hidden;
clip-path: inset(100% 0 0 0);
animation: strip-in 1.4s var(--ease-out) forwards;
}
.strip__i:nth-child(2) { animation-delay: 0.08s; }
.strip__i:nth-child(3) { animation-delay: 0.16s; }
.strip__i:nth-child(4) { animation-delay: 0.24s; }
.strip__i:nth-child(5) { animation-delay: 0.32s; }
.strip__i:nth-child(6) { animation-delay: 0.40s; }
.strip__i:nth-child(n+7) { animation-delay: 0.48s; }
@keyframes strip-in { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
.strip__i { animation: none; clip-path: none; }
.strip__track { translate: none; }
}
.strip__i img { width: 100%; height: 100%; object-fit: cover; }
#deliver .phero__tags { margin-top: 0; }
.sv-hero { height: 190svh; }
.sv-hero__pin {
--vw-w: 31vw;
--vw-h: calc(var(--vw-w) * 0.5825);
--gap-y: max(26px, 2.9vw);
--q: clamp(0, calc(var(--p) * 1.25), 1);
position: sticky;
top: 0;
height: 100svh;
overflow: hidden;
}
.sv-hero__media {
position: absolute;
inset: 0;
--ix: calc((100vw - var(--vw-w)) / 2 * (1 - var(--q)));
--iy: calc((100svh - var(--vw-h)) / 2 * (1 - var(--q)));
clip-path: inset(var(--iy) var(--ix));
background: rgba(var(--ink-rgb), 0.12);
}
.sv-hero__media video { width: 100%; height: 100%; object-fit: cover; }
.sv-hero__p {
position: absolute;
top: 50%;
display: block;
height: calc(var(--vw-h) * 0.4);
opacity: calc(1 - var(--q) * 1.6);
}
.sv-hero__pi { display: block; height: 100%; width: auto; }
.sv-hero__p--l {
right: calc(50% + var(--vw-w) / 2 + var(--vw-h) * 0.085);
transform: translate(calc(var(--q) * -40vw), -50%);
}
.sv-hero__p--r {
left: calc(50% + var(--vw-w) / 2 + var(--vw-h) * 0.085);
transform: translate(calc(var(--q) * 40vw), -50%);
}
.sv-hero__t {
position: absolute;
left: 0;
right: 0;
font-size: max(34px, 4.4vw);
text-align: center;
white-space: nowrap;
opacity: calc(1 - var(--q) * 1.8);
}
.sv-hero__t .ln { text-align: center; }
.sv-hero__t--top {
bottom: calc(50% + var(--vw-h) / 2 + var(--gap-y) - 0.2em);
transform: translateY(calc(var(--q) * -30svh));
}
.sv-hero__t--bot {
top: calc(50% + var(--vw-h) / 2 + var(--gap-y) - 0.27em);
transform: translateY(calc(var(--q) * 30svh));
}
@media (prefers-reduced-motion: reduce) {
.sv-hero { height: auto; }
.sv-hero__pin { --q: 0; }
}
.wk-hero {
display: grid;
place-items: center;
min-height: 78svh;
padding: max(112px, 8vw) var(--edge) 0;
text-align: center;
}
.wk-hero__h { letter-spacing: -0.035em; }
.wk-hero__h .ln { text-align: center; }
.wk-hero__h.is-free .ln { overflow: visible; }
.wk-hero__h .w { display: inline-block; }
.svc__name a { display: inline-flex; align-items: center; gap: 0.1em; }
.svc__name [data-split] { display: inline-block; }
.svc__arr {
position: relative;
top: 0.144em;
flex: none;
width: 0.95em;
height: 0.95em;
transition: transform var(--d-roll) var(--ease-text);
}
.svc__name a:hover .svc__arr { transform: translate(0.08em, -0.08em); }
.svc__go {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.4rem;
color: var(--ink);
}
.svc__go .roll span,
.svc__go .roll span::after {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
.svc__go svg { transition: transform 0.45s var(--ease-out); }
.svc__go:hover svg { transform: translate(4px, -4px); }
@media (min-width: 1001px) and (min-height: 700px) {
.svc-stack .svc {
position: sticky;
top: calc(var(--sp-1) + var(--k) * max(14px, 1vw));
padding-bottom: var(--sp-1);
clip-path: inset(0 -100vmax);
}
main { overflow-x: clip; }
.svc-stack .svc::before {
content: "";
position: absolute;
inset: 0 -100vmax;
z-index: -1;
background: var(--ground);
transition: background-color 0.7s var(--ease);
pointer-events: none;
}
.svc-stack .svc + .svc { margin-top: calc(var(--sp-2) - var(--sp-1)); }
.svc-stack .svc.is-buried .svc__art,
.svc-stack .svc.is-buried .svc__body { visibility: hidden; }
.svc-stack .svc__in {
transform-origin: 50% 0;
will-change: opacity, scale;
scale: calc(1 - var(--cover, 0) * 0.05);
opacity: calc(1 - var(--cover, 0) * 0.7);
}
}
.steps__g { display: block; margin-top: var(--sp-3); }
.step {
display: grid;
grid-template-columns: minmax(72px, 7%) minmax(0, 1fr) minmax(0, 46%);
gap: 3.4vw;
align-items: baseline;
padding-top: 2rem;
border-top: 1px solid var(--hairline);
margin-top: 2rem;
}
.step__d { max-width: none; }
.lst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.4vw; }
.lst__i {
display: grid;
grid-template-columns: minmax(52px, 13%) minmax(0, 1fr);
gap: 1.4vw;
align-items: baseline;
padding-top: 1.4rem;
border-top: 1px solid var(--hairline);
margin-top: 1.4rem;
}
.vals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.4vw; }
.val {
display: flex;
flex-direction: column;
gap: 0.9rem;
padding-block: var(--sp-1);
border-top: 1px solid var(--hairline);
}
.rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.4vw; }
.rel__i {
display: flex;
flex-direction: column;
gap: 0.9rem;
padding-top: 1.6rem;
border-top: 2px solid var(--ink);
}
.rel__d { max-width: 30ch; }
.rel__go {
margin-top: 0.4rem;
opacity: 0.6;
transition: transform 0.45s var(--ease-out), opacity 0.35s var(--ease);
}
.rel__i:hover .rel__go { transform: translate(4px, -4px); opacity: 1; }
.why {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--sp-2) 2vw;
margin-top: var(--sp-3);
}
.why__i { display: flex; flex-direction: column; gap: 1rem; padding-top: 1.6rem; }
.why__h { max-width: 18ch; }
.why__i p { max-width: 34ch; }
.proof {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: max(14px, 1.2vw);
margin-top: var(--sp-3);
}
.proof__i {
display: flex;
flex-direction: column;
gap: 0.8rem;
padding: max(26px, 2.2vw);
border: 1px solid var(--hairline);
background: rgba(var(--ink-rgb), 0.03);
}
.proof__n {
font-size: clamp(38px, 5.4vw, 92px);
line-height: 0.88;
letter-spacing: -0.04em;
}
.proof__l { margin-top: auto; padding-top: 1.2rem; max-width: 24ch; }
.proof__i p { max-width: 36ch; }
.qa { margin-top: var(--sp-2); border-top: 1px solid var(--hairline); }
.qa__i { border-bottom: 1px solid var(--hairline); }
.qa__q {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 3vw;
padding-block: max(20px, 1.5vw);
cursor: pointer;
list-style: none;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__t { max-width: 54ch; }
.qa__ic {
position: relative;
flex: none;
width: 15px;
height: 15px;
margin-top: 0.4em;
}
.qa__ic::before,
.qa__ic::after {
content: '';
position: absolute;
inset: 0;
margin: auto;
background: var(--ink);
}
.qa__ic::before { width: 100%; height: 1.5px; }
.qa__ic::after {
width: 1.5px;
height: 100%;
transition: transform 0.4s var(--ease-out);
}
.qa__i[open] .qa__ic::after { transform: scaleY(0); }
.qa__a { padding-bottom: max(20px, 1.5vw); }
.qa__a p { max-width: 70ch; }
.sv-wide { aspect-ratio: 21 / 9; overflow: hidden; }
.sv-wide > img { width: 100%; height: 100%; object-fit: cover; }
.cl-rate { display: flex; }
.filter { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.filter__b {
display: inline-flex;
align-items: center;
height: max(34px, 2.5vw);
padding: 0 max(14px, 1.05vw);
border: 1px solid var(--hairline);
border-radius: var(--radius-pill);
font-size: var(--t-xxs);
line-height: 1;
color: var(--body);
transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease),
color 0.35s var(--ease);
}
.filter__b:hover { background: rgba(var(--ink-rgb), 0.08); }
.filter__b.is-on { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.is-off { display: none !important; }
main > .wk-hero + .section { margin-top: var(--sp-2); }
.wk-grid { display: flex; flex-direction: column; gap: var(--sp-2); }
.wk-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--sp-2) max(14px, 1.2vw);
align-items: start;
}
.wk-row .work-card { grid-column: span var(--span, 1); min-width: 0; }
.wk-row .work-card__media { aspect-ratio: var(--ar); }
.wk-row .work-card__meta { flex-wrap: wrap; row-gap: 0.2rem; }
.wk-row .work-card__media img { transition: scale 1.1s var(--ease-out); }
.wk-row .work-card:hover .work-card__media > img { scale: 1.04; }
.arch { border-top: 2px solid var(--ink); }
.arch__i {
display: grid;
grid-template-columns: minmax(52px, 6%) minmax(0, 1fr) minmax(0, 22%) auto;
gap: 3.4vw;
align-items: baseline;
padding-block: max(18px, 1.3vw);
border-bottom: 1px solid var(--hairline);
transition: opacity 0.4s var(--ease);
}
.arch:hover .arch__i:not(:hover) { opacity: 0.38; }
.arch__go { width: max(15px, 1vw); opacity: 0.5; transition: opacity 0.35s var(--ease); }
.arch__go svg { width: 100%; height: auto; }
.arch__i:hover .arch__go { opacity: 1; }
main > .blog-top:first-child { margin-top: max(132px, 10vw); }
.blog-top h1 { max-width: 18ch; }
.ins__grid--all { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) 3.4vw; }
.post__media img { transition: scale 1.8s var(--ease-out); }
.post:hover .post__media > img { scale: 1.06; transition-duration: 1.1s; }
.post__t .ln {
width: fit-content;
background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
transition: background-size 0.7s var(--ease-out);
transition-delay: calc(var(--i, 0) * 90ms);
}
.post:hover .post__t .ln { background-size: 100% 1px; }
.post-page__h { margin-top: 1.6rem; max-width: 20ch; }
.post-page__meta { display: flex; gap: 1.6rem; margin-top: var(--sp-1); }
.post-page__shot {
position: relative;
aspect-ratio: 16 / 7;
margin-top: var(--sp-2);
overflow: hidden;
}
.post-page__shot img { width: 100%; height: 100%; object-fit: cover; }
.prose {
max-width: calc(var(--t-s) * 34);
margin: var(--sp-3) auto 0;
font-size: var(--t-s);
line-height: var(--lh-body);
color: var(--body);
}
.prose > * + * { margin-top: 1.1em; }
.prose .lead { font-size: var(--t-m); line-height: var(--lh-lead); color: var(--ink); }
.prose h2 {
margin-top: 2.2em;
font-size: var(--t-l);
line-height: var(--lh-subhead);
letter-spacing: -0.01em;
color: var(--ink);
}
.prose h2 + * { margin-top: 1em; }
.prose strong { color: var(--ink); }
.prose em { font-style: italic; }
.prose ul { display: flex; flex-direction: column; gap: 0.7em; margin-top: 1.2em; }
.prose li { position: relative; padding-left: 1.6em; }
.prose li::before {
content: '';
position: absolute;
left: 0.2em;
top: 0.72em;
width: 0.6em;
height: 1px;
background: var(--dim);
}
.prose blockquote {
margin-top: 2em;
padding-left: 1.4em;
border-left: 2px solid var(--ink);
font-size: var(--t-m);
line-height: var(--lh-lead);
color: var(--ink);
}
.prose h3 {
margin-top: 1.8em;
font-size: var(--t-m);
line-height: var(--lh-subhead);
color: var(--ink);
}
.prose h3 + * { margin-top: 0.8em; }
.prose a {
color: var(--ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
text-decoration-color: rgba(var(--ink-rgb), 0.35);
transition: text-decoration-color 0.25s var(--ease);
}
.prose a:hover,
.prose a:focus-visible { text-decoration-color: var(--ink); }
.prose code {
font-size: 0.92em;
padding: 0.1em 0.35em;
border-radius: 4px;
background: rgba(var(--ink-rgb), 0.08);
color: var(--ink);
}
.prose ol {
display: flex;
flex-direction: column;
gap: 0.7em;
margin-top: 1.2em;
counter-reset: pr;
}
.prose ol li::before {
counter-increment: pr;
content: counter(pr) '.';
top: 0;
left: 0;
width: 1.2em;
height: auto;
background: none;
text-align: right;
color: var(--dim);
font-variant-numeric: tabular-nums;
}
.prose__fig {
position: relative;
margin-top: 2.4em;
margin-bottom: 2.4em;
overflow: hidden;
}
.prose__fig img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) {
.prose__fig { margin-left: -8%; margin-right: -8%; }
}
.prose__tbl {
margin-top: 1.8em;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.prose__tbl table {
width: 100%;
border-collapse: collapse;
font-size: var(--t-xs);
}
.prose__tbl th,
.prose__tbl td {
padding: 0.7em 0.9em;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--hairline);
}
.prose__tbl th { color: var(--ink); white-space: nowrap; }
.post-page__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2vw;
max-width: calc(var(--t-s) * 34);
margin: var(--sp-3) auto 0;
padding-top: 1.6rem;
border-top: 1px solid var(--hairline);
}
.post-page__soc { display: flex; gap: 0.7rem; }
main > .cs-hero:first-child { margin-top: max(132px, 10vw); }
.cs-back { display: inline-block; transition: color 0.3s var(--ease); }
.cs-back:hover { color: var(--ink); }
.cs-hero__h { margin-top: 1.6rem; }
.cs-hero__sub { margin-top: 0.6rem; max-width: 36ch; }
.cs-facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sp-1) max(14px, 1.2vw);
margin-top: var(--sp-2);
}
.cs-fact {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding-top: 1.2rem;
border-top: 1px solid var(--hairline);
}
main > .cs-hero + .cs-film { margin-top: var(--sp-2); }
.cs-film {
padding: max(56px, 7vw) 0;
background: center / cover no-repeat;
}
.cs-film__v {
width: min(80%, calc(100% - 2 * var(--gutter, 24px)));
margin-inline: auto;
overflow: hidden;
}
.cs-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.cs-film--img { padding: 0; background: none; }
.cs-film__img {
position: relative;
width: 100%;
aspect-ratio: var(--ar, 1.6);
max-height: 78vh;
overflow: hidden;
}
.cs-film__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs { display: flex; flex-direction: column; gap: var(--sp-2); }
.cs-block {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 60%);
gap: 3.4vw;
padding-top: 1.4rem;
border-top: 1px solid var(--hairline);
}
.cs-block + .cs-block { margin-top: calc(var(--sp-1) - var(--sp-2)); }
.cs-block__t { color: var(--ink); }
.cs-row { display: flex; gap: var(--gutter); align-items: flex-start; }
.cs-row + .cs-row { margin-top: calc(var(--gutter) - var(--sp-2)); }
.cs-fig { position: relative; flex: var(--ar) 1 0%; min-width: 0; aspect-ratio: var(--ar); overflow: hidden; }
.cs-fig:only-child { flex: 1 1 100%; }
.cs-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-fig video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-quote {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 60%);
gap: 3.4vw;
padding-top: 1.4rem;
border-top: 1px solid var(--hairline);
}
.cs-quote__t {
grid-column: 2;
color: var(--ink);
text-wrap: pretty;
}
.cs-quote__f {
grid-column: 2;
display: flex;
align-items: center;
gap: 1rem;
margin-top: var(--sp-1);
}
.cs-quote__logo {
width: 48px;
height: 48px;
flex: none;
object-fit: contain;
}
.cs-quote__who { display: flex; flex-direction: column; gap: 0.15rem; }
.cs-quote__who .t-xs { color: var(--ink); }
@media (max-width: 860px) {
.cs-quote { grid-template-columns: 1fr; }
.cs-quote__t,
.cs-quote__f { grid-column: 1; }
}
.cs-res {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-1) 3.4vw;
margin-left: 40%;
}
.cs-res__i {
display: flex;
flex-direction: column;
gap: 0.8rem;
padding-top: 1.2rem;
border-top: 1px solid var(--hairline);
}
.cs-res__i p { max-width: 38ch; }
.cs-cred {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--sp-1) max(14px, 1.2vw);
margin-top: var(--sp-2);
}
.cs-cred__i {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding-top: 1.2rem;
border-top: 1px solid var(--hairline);
}
#more .wk-grid { margin-top: var(--sp-2); }
@media (max-width: 1000px) {
.cs-block { grid-template-columns: 1fr; gap: 1rem; }
.cs-res { margin-left: 0; }
.cs-cred { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.cs-row { flex-direction: column; }
.cs-fig { flex: none; width: 100%; }
.cs-res { grid-template-columns: 1fr; }
.cs-cred { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-facts { grid-template-columns: 1fr; }
.cs-film__v { width: calc(100% - 32px); }
}
@media (max-width: 1000px) {
.hero-pin { --pxc: 20; }
.phero__h { max-width: none; }
.why { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1) 2.4vw; }
.why__h, .why__i p { max-width: none; }
.proof { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.proof__l, .proof__i p { max-width: none; }
.qa__t { max-width: none; }
.svs { gap: var(--sp-2); }
.svs__r, .svs__r--b { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
.svs__r .svs__fig, .svs__r--b .svs__fig { grid-column: 1; grid-row: 1; }
.svs__r .svs__b, .svs__r--b .svs__b { grid-column: 1; grid-row: 2; }
.svs__h, .svs__b p { max-width: none; }
.sv-wide { aspect-ratio: 16 / 10; }
.step { grid-template-columns: 1fr; gap: 0.7rem; }
.step__d { max-width: none; }
.lst { grid-template-columns: 1fr; }
.vals { grid-template-columns: 1fr; }
.rel { grid-template-columns: 1fr; gap: 0; }
.rel__i { margin-top: 1.6rem; }
.rel__d { max-width: none; }
.wk-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wk-row { grid-auto-flow: row dense; }
.wk-row .work-card { grid-column: auto; }
.wk-row .work-card.is-wide { grid-column: 1 / -1; }
.ins__grid--all { grid-template-columns: 1fr; gap: 2.4rem; }
.arch__i { grid-template-columns: minmax(44px, 14%) minmax(0, 1fr) auto; gap: 1.4rem; }
.arch__c { display: none; }
.post-page__shot { aspect-ratio: 4 / 3; }
.sv-hero__pin { --vw-w: 72vw; }
.sv-hero__t { white-space: normal; padding-inline: var(--edge); }
.post-page__foot { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.hero-top { grid-template-columns: 1fr; gap: 1.6rem; }
.hero-title { max-width: none; order: -1; }
.hero-side { gap: var(--sp-1); }
.hero-pin { --pm: 3.5; }
.hero-badge { margin-top: 0; }
.stats__head { grid-template-columns: 1fr; }
.stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.svc__in { grid-template-columns: 1fr; gap: 2rem; }
.appr__intro { grid-template-columns: 1fr; gap: 1.8rem; }
.appr-head { display: none; }
.appr-row { grid-template-columns: 1fr; gap: 1rem; }
.appr-row > p { width: auto; justify-self: stretch; }
.appr-row__out { align-items: flex-start; text-align: left; }
.work-grid { grid-template-columns: 1fr; }
.work__counts { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
.ins__grid { grid-template-columns: 1fr; gap: 2.4rem; }
.ft {
--ft-pad: 20px;
height: auto;
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
align-items: start;
gap: var(--sp-2);
padding: calc(var(--sp-2) + 1px) calc(var(--edge) + var(--ft-pad)) calc(var(--sp-2) + 2.6em);
}
.ft__line--t { top: var(--sp-2); }
.ft__line--b { bottom: calc(var(--sp-2) + 1.6em); }
.ft__line--l { left: var(--edge); }
.ft__line--r { right: var(--edge); }
.ft__frame { position: relative; left: auto; top: auto; bottom: auto; width: auto; margin-inline: calc(var(--ft-pad) * -1); padding: 28px var(--ft-pad); gap: var(--sp-2); order: -1; grid-column: 1 / -1; }
.ft__side { position: static; }
.ft__side--r { flex-direction: column; gap: 1.6rem; }
.ft__base { position: absolute; left: calc(var(--edge) + var(--ft-pad)); bottom: calc(var(--sp-2) / 2 + 0.3em); translate: none; flex-wrap: wrap; gap: 1.2rem; }
.ab-who { grid-template-columns: 1fr; row-gap: 1.4rem; }
.ab-who .label, .ab-who__lead, .ab-who__shot { grid-column: 1; }
.ab-who__lead { max-width: none; }
.ab-who__shot { aspect-ratio: 4 / 3; }
.ab-wide { aspect-ratio: 4 / 3; }
.mem {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "num pic" "name pic" "role pic";
gap: 0.5rem 1.2rem;
}
.mem__n { grid-area: num; }
.mem__name { grid-area: name; }
.mem__role { grid-area: role; text-align: left; }
.mem__ph {
grid-area: pic;
display: block;
align-self: center;
width: clamp(76px, 23vw, 104px);
height: auto;
object-fit: cover;
}
.ab-team__hint { display: none; }
.ab-hero__img {
top: auto !important; bottom: auto !important;
left: auto !important; right: auto !important;
}
.ab-hero__img--1 { left: -6vw !important;  top: 9svh !important;    width: 44vw !important; }
.ab-hero__img--2 { right: -4vw !important; top: 10svh !important;   width: 38vw !important; }
.ab-hero__img--3 { left: 26vw !important;  top: 19svh !important;   width: 34vw !important; }
.ab-hero__img--4 { left: -5vw !important;  bottom: 6svh !important; width: 40vw !important; }
.ab-hero__img--5 { right: -3vw !important; bottom: 10svh !important; width: 36vw !important; }
.ab-hero__img--6 { left: 30vw !important;  bottom: 0svh !important; width: 32vw !important; }
.svc-head, .ins__head, .work__head, .ab-team__head {
flex-direction: column;
align-items: flex-start;
gap: 2rem;
}
.svc-head h2 { max-width: none; }
.deck__lead, .deck__act, .deck__ed { left: var(--edge); right: auto; max-width: 80vw; }
.deck__ed { display: none; }
.deck-pin div.deck__panel:nth-of-type(1) { display: none; }
.deck-pin div.deck__panel:nth-of-type(2) {
left: 6vw !important; top: 34svh !important; width: 88vw !important;
height: auto !important;
}
.deck-pin div.deck__panel:nth-of-type(2) img { object-position: 50% 50% !important; }
.forms-pin svg.forms-item:nth-of-type(2) { display: none; }
.forms-pin svg.forms-item:nth-of-type(1) {
left: 12vw !important; top: 3svh !important; width: 76vw !important;
}
.forms-pin svg.forms-item:nth-of-type(3) {
left: 27vw !important; top: 55svh !important; width: 46vw !important;
}
.forms-pin div.forms-item:nth-of-type(1) {
left: 23vw !important; top: 18svh !important; width: 54vw !important;
}
.forms-pin div.forms-item:nth-of-type(2) {
left: 8vw !important; right: auto !important; top: 36svh !important; width: 32vw !important;
}
.forms-pin div.forms-item:nth-of-type(3) {
left: 52vw !important; top: 36svh !important; bottom: auto !important; width: 32vw !important;
}
.forms-pin, .deck-pin { height: 88svh; }
.hero-scene { height: 240svh; }
}
@media (max-width: 640px) {
.hero-pin { --pxc: 14; }
.proof { grid-template-columns: minmax(0, 1fr); }
.why { grid-template-columns: minmax(0, 1fr); }
.logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.logo-wall { --logo-h: 28px; }
.nav { display: none; }
.wk-row { grid-template-columns: minmax(0, 1fr); }
.wk-row .work-card__media { aspect-ratio: 3 / 2; }
}
.nl {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 38%);
gap: var(--sp-2) max(48px, 5vw);
align-items: end;
padding: clamp(28px, 3.2vw, 52px);
}
.nl__txt { display: flex; flex-direction: column; gap: 1.1rem; }
.nl__h { max-width: 18ch; }
.nl__txt p { max-width: 42ch; }
.nl__form { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.nl__form input {
flex: 1;
min-width: 0;
padding-bottom: 0.7rem;
background: none;
border: 0;
border-bottom: 1px solid var(--hairline);
font-size: var(--t-xs);
color: var(--ink);
transition: border-color 0.4s var(--ease);
}
.nl__form input::placeholder { color: var(--dim); }
.nl__form input:focus { outline: none; border-bottom-color: var(--ink); }
.nl__form .btn { flex: none; }
.nl__ok { flex-basis: 100%; margin: 0; color: var(--ink); }
.nl__ok:empty { display: none; }
form.is-sent input,
form.is-sent button { display: none; }
.nlpop {
position: fixed;
right: var(--edge);
bottom: calc(max(18px, 2vh) + 48px);
z-index: 60;
width: min(360px, calc(100vw - var(--edge) * 2));
opacity: 0;
transform: translateY(14px);
transition: opacity 0.55s var(--ease), transform 0.55s var(--ease-out);
pointer-events: none;
}
.nlpop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.nlpop__in {
position: relative;
display: flex;
flex-direction: column;
gap: 0.7rem;
padding: clamp(20px, 2vw, 26px);
background: var(--ground);
border: 1px solid var(--hairline);
}
.nlpop__h { margin: 0; max-width: 20ch; }
.nlpop__in > p { margin: 0; }
.nlpop__x {
position: absolute;
top: 10px;
right: 10px;
display: grid;
place-items: center;
width: 30px;
height: 30px;
color: var(--dim);
transition: color 0.3s var(--ease);
}
.nlpop__x svg { width: 15px; height: 15px; }
.nlpop__x:hover { color: var(--ink); }
.nlpop form {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.7rem;
margin-top: 0.4rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--hairline);
}
.nlpop form.is-sent { border-bottom: 0; padding-bottom: 0; }
.nlpop input {
flex: 1;
min-width: 0;
background: none;
border: 0;
font-size: var(--t-xs);
color: var(--ink);
}
.nlpop input::placeholder { color: var(--dim); }
.nlpop input:focus { outline: none; }
.nlpop form button { flex: none; color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
.nlpop { transition: opacity 0.2s linear; transform: none; }
}
@media (max-width: 1000px) {
.nl { grid-template-columns: 1fr; align-items: start; gap: var(--sp-1); }
.nl__h { max-width: none; }
}
@media (max-width: 640px) {
.nlpop { left: var(--edge); right: var(--edge); width: auto; }
}
.ct { margin-bottom: var(--sp-3); }
.ct {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(200px, 24%);
gap: var(--sp-2) max(48px, 5vw);
align-items: start;
}
.ct-form { border: 0; }
.ct-step { min-width: 0; padding: 0; margin: 0; border: 0; }
.ct-step + .ct-step {
margin-top: var(--sp-2);
padding-top: var(--sp-2);
border-top: 1px solid var(--hairline);
}
.ct-step__h {
float: left;
display: flex;
align-items: baseline;
gap: max(14px, 1.2vw);
width: 100%;
padding: 0;
margin-bottom: max(22px, 1.6vw);
}
.ct-step__h + * { clear: both; }
.ct-step__n { flex: none; }
.ct-opts { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.ct-opt { position: relative; display: inline-flex; cursor: pointer; }
.ct-opt input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.ct-opt > span {
display: inline-flex;
align-items: baseline;
gap: 0.55em;
padding: max(11px, 0.8vw) max(18px, 1.3vw);
border: 1px solid var(--hairline);
border-radius: var(--radius-pill);
font-size: var(--t-xs);
line-height: 1.15;
color: var(--body);
transition: color 0.45s var(--ease), border-color 0.45s var(--ease),
background-color 0.45s var(--ease);
}
.ct-opt i { font-style: normal; color: var(--muted); transition: color 0.45s var(--ease); }
@media (hover: hover) {
.ct-opt:hover > span { border-color: var(--ink); color: var(--ink); }
}
.ct-opt input:checked + span {
background: var(--btn-bg);
border-color: var(--btn-bg);
color: var(--btn-fg);
}
.ct-opt input:checked + span i { color: var(--btn-fg); opacity: 0.7; }
.ct-opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.ct-bud { display: none; }
.ct-bud__hint { color: var(--dim); }
.ct-form:has(.ct-opt--svc input:checked) .ct-bud__hint { display: none; }
.ct-form:has(#svc-branding:checked) #bud-branding,
.ct-form:has(#svc-website:checked) #bud-website,
.ct-form:has(#svc-seo:checked) #bud-seo,
.ct-form:has(#svc-geo:checked) #bud-geo,
.ct-form:has(#svc-ai:checked) #bud-ai { display: flex; }
.ct-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-1) max(28px, 2.4vw);
}
.ct-f { margin: 0; min-width: 0; }
.ct-f--full { grid-column: 1 / -1; }
.ct-f input,
.ct-f textarea {
display: block;
width: 100%;
padding: 0.85em 0;
background: none;
border: 0;
border-bottom: 1px solid var(--hairline);
border-radius: 0;
font: inherit;
font-size: var(--t-s);
color: var(--ink);
transition: border-color 0.45s var(--ease);
}
.ct-f textarea { resize: vertical; min-height: 6em; line-height: var(--lh-body); }
.ct-f input::placeholder,
.ct-f textarea::placeholder { color: var(--dim); }
.ct-f input:focus,
.ct-f textarea:focus { outline: none; border-bottom-color: var(--ink); }
.ct-file { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.ct-file input { width: auto; padding: 0; border: 0; font-size: var(--t-xs); color: var(--muted); }
.ct-file input::file-selector-button {
margin-right: 1rem;
padding: 0.7em 1.3em;
background: none;
border: 1px solid var(--hairline);
border-radius: var(--radius-pill);
font: inherit;
font-size: var(--t-xxs);
color: var(--body);
cursor: pointer;
transition: color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.ct-file input::file-selector-button:hover { border-color: var(--ink); color: var(--ink); }
.ct-send {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem max(20px, 1.8vw);
margin-top: var(--sp-1);
}
.ct-send a:not(.btn) { text-decoration: underline; text-underline-offset: 0.2em; }
.ct-aside {
position: sticky;
top: calc(var(--sp-2) + max(44px, 3.2vw));
display: flex;
flex-direction: column;
gap: var(--sp-1);
}
.ct-card {
display: flex;
flex-direction: column;
padding: max(22px, 1.7vw);
background: rgba(var(--ink-rgb), 0.04);
border: 1px solid var(--hairline);
}
.ct-card .c { --c: 6px; }
.ct-card__g { display: flex; flex-direction: column; gap: 1.1rem; }
.ct-card__g + .ct-card__g {
margin-top: max(22px, 1.7vw);
padding-top: max(22px, 1.7vw);
border-top: 1px solid var(--hairline);
}
.ct-mail { word-break: break-word; line-height: var(--lh-subhead); }
.ct-where {
display: flex;
flex-direction: column;
gap: 0.25rem;
font-size: var(--t-xs);
color: var(--body);
}
.ct-soc { display: flex; gap: 0.7rem; }
@media (max-width: 1000px) {
.ct { grid-template-columns: 1fr; }
.ct-aside { position: static; }
}
@media (max-width: 640px) {
.ct-fields { grid-template-columns: 1fr; }
.ct-step__h { flex-direction: column; gap: 0.6rem; }
}
main > .ct-hero + .ct { margin-top: var(--sp-2); }