@charset "UTF-8";
:root {
  --paper:#f6f5f0;
  --ink:#22241f;
  --muted:#696b62;
  --line:#d9dbd1;
  --accent:#e74420;
  --cream:#ecece2;
  --radius:20px;
  color-scheme:light
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:30px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  cursor:pointer
}
a,button {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px
}
button:disabled {
  cursor:default
}
img {
  display:block;
  max-width:100%;
  height:auto;
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-weight:500
}
em {
  font-style:normal
}
button[hidden],[hidden] {
  display:none!important
}
.wrap {
  max-width:1344px;
  margin-inline:auto;
  padding-inline:48px
}
.section {
  padding-block:110px
}
.eyebrow {
  display:block;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:11px;
  font-weight:700;
  margin-bottom:28px
}
.prototype-note {
  padding:9px 48px;
  background:var(--ink);
  color:#eeeee5;
  font-size:10px;
  letter-spacing:.08em;
  display:flex;
  justify-content:space-between
}
.prototype-note a {
  text-decoration:underline;
  text-underline-offset:3px
}
.skip-link {
  position:absolute;
  top:-100px;
  left:15px;
  background:var(--ink);
  color:white;
  padding:12px;
  z-index:20
}
.skip-link:focus {
  top:12px
}
.header {
  height:115px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.brand {
  display:flex;
  align-items:center;
  gap:15px
}
.brand__mark {
  font-size:39px;
  letter-spacing:-5px;
  line-height:1;
  font-weight:700;
  position:relative
}
.brand__mark>span {
  color:var(--accent);
  position:absolute;
  font-size:22px;
  right:-10px;
  top:-10px;
  letter-spacing:0
}
.brand__name {
  font-size:14px;
  line-height:1.08;
  font-weight:700;
  margin-left:6px
}
.header__nav {
  display:flex;
  gap:30px;
  font-size:13px
}
.header__nav a:hover,.text-link:hover,.header__contact:hover {
  color:var(--accent)
}
.header__contact {
  font-size:13px;
  border-bottom:1px solid var(--ink);
  padding-block:10px;
  display:flex;
  gap:34px
}
.menu-toggle {
  display:none
}
.hero {
  padding-top:43px;
  padding-bottom:65px
}
.hero__eyebrow {
  font-size:12px;
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:34px;
  color:var(--muted)
}
.status-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent)
}
.hero h1 {
  font-size:clamp(62px,7.9vw,112px);
  line-height:1.02;
  letter-spacing:-.065em;
  max-width:1150px
}
.hero__accent {
  color:var(--accent)
}
.hero__last {
  display:flex;
  align-items:center;
  gap:80px
}
.hero__asterisk {
  font-size:115px;
  line-height:.8;
  color:var(--accent);
  display:inline-block;
  animation:turn 35s linear infinite
}
@keyframes turn {
  to {
    transform:rotate(360deg)
  }
}
.hero__bottom {
  display:grid;
  grid-template-columns:1.2fr 1fr .8fr;
  gap:40px;
  align-items:end;
  margin-top:42px
}
.hero__bottom p {
  max-width:385px;
  line-height:1.6;
  font-size:15px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:38px;
  padding:20px 25px;
  border:0;
  border-radius:5px;
  font-size:13px;
  min-height:56px;
  transition:transform .2s,background .2s
}
.button:hover {
  transform:translateY(-3px)
}
.button--dark {
  background:var(--ink);
  color:var(--paper);
  justify-self:start
}
.button--light {
  background:var(--paper);
  color:var(--ink)
}
.button span {
  font-size:22px
}
.hero__index {
  font-size:10px;
  line-height:1.6;
  text-align:right;
  color:var(--muted)
}
.signal {
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr 1fr .7fr;
  gap:24px;
  align-items:center;
  padding-block:30px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.signal__source {
  font-size:13px;
  line-height:1.5
}
.signal__source span {
  display:block;
  font-size:10px;
  margin-top:8px;
  color:var(--accent)
}
.signal>div {
  display:flex;
  flex-direction:column;
  gap:7px
}
.signal strong {
  font-weight:500;
  font-size:38px;
  letter-spacing:-.05em
}
.signal strong span {
  font-size:16px;
  color:var(--muted);
  letter-spacing:0
}
.signal>div>span,.signal small {
  font-size:11px;
  color:var(--muted);
  line-height:1.5
}
.signal small {
  text-align:right
}
.section__heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:45px
}
.section__heading h2,h2 {
  font-size:clamp(34px,4vw,54px);
  line-height:1.09;
  letter-spacing:-.045em
}
.section__heading>p {
  font-size:13px;
  color:var(--muted);
  line-height:1.5
}
.project-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:45px 26px
}
.project--wide {
  grid-column:1/-1
}
.project__visual {
  display:block;
  height:385px;
  border-radius:var(--radius);
  position:relative;
  overflow:hidden
}
.project__visual--velo {
  height:480px;
  background:#e74b26;
  color:#fff9ea;
  padding:34px 42px
}
.project__switch {
  position:absolute;
  z-index:2;
  right:30px;
  top:26px;
  background:#ce391a;
  border-radius:30px;
  padding:4px;
  display:flex;
  gap:3px
}
.project__switch button {
  font-size:11px;
  border:0;
  background:transparent;
  color:white;
  border-radius:22px;
  padding:10px 15px
}
.project__switch button.is-active {
  background:var(--paper);
  color:var(--ink)
}
.project__visual-label {
  position:relative;
  z-index:1;
  display:block;
  font-size:10px;
  letter-spacing:.12em;
  font-weight:700
}
.project__story>p {
  font-size:clamp(48px,5vw,72px);
  letter-spacing:-.055em;
  line-height:1.05;
  margin-top:47px;
  position:relative;
  z-index:1
}
.project__story em {
  opacity:.6
}
.project__ring {
  width:550px;
  height:550px;
  border:1px solid #ffb49a;
  border-radius:50%;
  position:absolute;
  right:-30px;
  top:100px;
  box-shadow:0 0 0 65px #e74b26,0 0 0 66px #f17c59,0 0 0 130px #e74b26,0 0 0 131px #ef7150
}
.project__ring:after {
  content:'';
  position:absolute;
  left:100px;
  top:-15px;
  width:300px;
  height:300px;
  background:#ffd3aa;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18 18 6M6 6h12v12' fill='none' stroke='black' stroke-width='1.65'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18 18 6M6 6h12v12' fill='none' stroke='black' stroke-width='1.65'/%3E%3C/svg%3E") center/contain no-repeat;
  transform:rotate(-12deg)
}
.project__visual-footer {
  position:absolute;
  bottom:28px;
  left:34px;
  right:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  z-index:1
}
.project__visual-footer>span {
  font-size:25px
}
.project__caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding-top:20px
}
.project__caption h3 {
  font-size:23px;
  letter-spacing:-.04em
}
.project__caption p {
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
  margin-top:6px
}
.project__tags {
  margin-left:auto;
  font-size:11px;
  color:var(--muted)
}
.round-arrow {
  border:1px solid var(--line);
  border-radius:50%;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  font-size:22px;
  flex-shrink:0;
  transition:background .2s
}
.project__caption:hover .round-arrow {
  background:var(--ink);
  color:white
}
.project__visual--delivery {
  background:#dee4d6;
  padding:28px;
  color:#304932
}
.project__visual--delivery img {
  width:100%;
  height:290px;
  object-fit:cover;
  object-position:center 48%;
  margin-top:8px;
  border-radius:8px;
  mix-blend-mode:multiply
}
.project__visual--snow {
  background:#e6e1d9;
  padding:28px
}
.project__visual--snow img {
  width:100%;
  height:290px;
  object-fit:cover;
  object-position:90% 50%;
  mix-blend-mode:multiply;
  margin-top:8px
}
.project__system {
  position:relative;
  z-index:1
}
.system-map {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
  max-width:650px;
  margin:45px auto 25px
}
.system-map>div {
  display:flex;
  gap:18px;
  width:100%;
  justify-content:center
}
.system-map b {
  font-weight:400;
  font-size:18px;
  border:1px solid #ffb49a;
  padding:18px 28px;
  border-radius:8px
}
.project__system>p {
  font-size:12px;
  text-align:center
}
.more-projects {
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:.65fr 1fr 1fr 1fr;
  gap:25px;
  padding-top:35px;
  margin-top:42px
}
.more-projects>span {
  font-size:11px;
  color:var(--muted);
  padding-top:4px
}
.more-projects>a {
  font-size:18px
}
.more-projects>a>span {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:10px
}
.services {
  background:var(--ink);
  color:var(--paper)
}
.services .eyebrow {
  color:#a6ac9a
}
.service-list article {
  display:grid;
  grid-template-columns:55px 1fr 1fr;
  gap:24px;
  padding:32px 0;
  border-top:1px solid #4b4d44;
  align-items:start
}
.service-list article>span {
  font-size:11px;
  color:#abb09e;
  padding-top:8px
}
.service-list h3 {
  font-size:28px;
  letter-spacing:-.035em
}
.service-list p {
  font-size:14px;
  line-height:1.7;
  color:#b8bbae;
  max-width:390px
}
.text-link {
  font-size:13px;
  display:inline-flex;
  gap:25px;
  align-items:center;
  border-bottom:1px solid currentColor;
  padding-bottom:8px
}
.services .text-link {
  margin-top:25px;
  color:#ff9b7c
}
.approach__layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px
}
.approach h2 {
  font-size:49px
}
.approach h2 em {
  color:var(--accent)
}
.steps article {
  border-top:1px solid var(--line);
  padding:22px 0 30px
}
.steps article>span {
  font-size:10px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.09em
}
.steps h3 {
  font-size:21px;
  margin-top:14px;
  letter-spacing:-.03em
}
.steps p {
  font-size:13px;
  line-height:1.65;
  color:var(--muted);
  margin-top:12px;
  max-width:400px
}
.about {
  background:#eaece2
}
.about__layout {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:100px;
  align-items:center
}
.about__monogram {
  height:430px;
  position:relative;
  border-radius:var(--radius);
  background:#d6dacb;
  padding:30px;
  overflow:hidden
}
.about__monogram>span {
  font-size:190px;
  letter-spacing:-.12em;
  position:absolute;
  top:18px;
  left:27px;
  color:#545f49
}
.about__monogram small {
  position:absolute;
  bottom:32px;
  left:32px;
  font-size:14px;
  line-height:1.5
}
.about__monogram b {
  font-size:170px;
  position:absolute;
  right:-17px;
  bottom:-28px;
  color:var(--accent);
  font-weight:400
}
.about__text h2 {
  font-size:43px;
  margin-bottom:26px
}
.about__text>p {
  font-size:14px;
  line-height:1.7;
  max-width:440px;
  margin-top:16px;
  color:#555b4c
}
.about__skills {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-block:23px
}
.about__skills span {
  font-size:10px;
  padding:8px 10px;
  border:1px solid #c8cdbd;
  border-radius:5px
}
.review-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:22px
}
.review {
  margin:0;
  padding:27px;
  background:#eceee5;
  border-radius:12px;
  display:flex;
  flex-direction:column
}
.review__stars {
  color:var(--accent);
  font-size:15px;
  letter-spacing:2px
}
.review blockquote {
  margin:24px 0 35px;
  font-size:17px;
  line-height:1.5;
  letter-spacing:-.02em
}
.review figcaption {
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:7px
}
.review figcaption b {
  font-size:12px;
  font-weight:500
}
.review figcaption span {
  font-size:10px;
  color:var(--muted);
  line-height:1.5
}
.reviews__note {
  font-size:10px;
  line-height:1.6;
  color:var(--muted);
  margin-top:20px
}
.faq {
  padding-top:10px
}
.faq details {
  border-top:1px solid var(--line);
  padding:24px 0
}
.faq summary {
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  font-size:18px
}
.faq summary::-webkit-details-marker {
  display:none
}
.faq summary>span {
  font-size:24px
}
.faq details[open] summary>span {
  transform:rotate(45deg)
}
.faq details p {
  max-width:700px;
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
  padding-top:20px
}
.contact {
  background:var(--accent);
  color:#fff7e9
}
.contact__top {
  display:flex;
  align-items:start;
  justify-content:space-between
}
.contact__top>span:last-child {
  font-size:80px;
  line-height:.7
}
.contact h2 {
  font-size:clamp(48px,6.6vw,90px);
  letter-spacing:-.06em;
  line-height:1.05
}
.contact h2 em {
  color:#ffc4aa
}
.contact__bottom {
  margin-top:45px;
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:start
}
.contact__bottom p {
  font-size:14px;
  line-height:1.6
}
.contact__bottom>div {
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:20px
}
.contact__email {
  font-size:14px
}
.contact__alternative {
  display:block;
  font-size:11px;
  margin-top:35px;
  text-decoration:underline;
  text-underline-offset:4px
}
.footer {
  padding-block:35px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  font-size:10px;
  color:var(--muted)
}
.brand--small {
  font-size:12px;
  color:var(--ink)
}
.brand--small>span {
  color:var(--accent);
  font-size:22px
}
.footer__motion {
  background:none;
  border:0;
  color:var(--muted);
  padding:8px 0;
  font-size:10px;
  text-decoration:underline;
  text-underline-offset:4px
}
.footer__motion[aria-pressed=true] {
  color:var(--accent)
}
.reduced-motion * {
  animation:none!important;
  transition:none!important
}
.reduced-motion {
  scroll-behavior:auto
}
/* Case pages reuse the same spacing and navigation as the homepage. */
.case-hero {
  padding-block:55px 70px
}
.case-hero__back {
  display:inline-block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:48px
}
.case-hero__category {
  color:var(--accent)
}
.case-hero h1 {
  font-size:clamp(50px,6.5vw,88px);
  line-height:1.04;
  letter-spacing:-.06em;
  max-width:950px
}
.case-hero__description {
  font-size:17px;
  line-height:1.6;
  max-width:650px;
  margin-top:28px;
  color:var(--muted)
}
.case-meta {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  padding-top:30px;
  margin-top:42px;
  border-top:1px solid var(--line)
}
.case-meta dt {
  font-size:10px;
  color:var(--muted);
  margin-bottom:10px
}
.case-meta dd {
  font-size:13px;
  line-height:1.5;
  margin:0
}
.case-cover {
  margin-top:40px;
  border-radius:var(--radius);
  background:#dbe1d2;
  overflow:hidden
}
.case-cover img {
  width:100%;
  max-height:620px;
  object-fit:cover;
  object-position:top;
}
.case-cover__type {
  padding:70px 45px;
  background:var(--accent);
  color:var(--paper);
  font-size:clamp(38px,6vw,76px);
  letter-spacing:-.05em;
  line-height:1.1
}
.case-content {
  display:grid;
  grid-template-columns:190px 1fr;
  gap:90px;
  padding-block:60px 90px
}
.case-nav {
  align-self:start;
  position:sticky;
  top:35px;
  display:flex;
  flex-direction:column;
  gap:18px
}
.case-nav a {
  font-size:12px;
  color:var(--muted)
}
.case-body section {
  padding-bottom:65px;
  scroll-margin-top:35px
}
.case-body h2 {
  font-size:37px;
  margin-bottom:24px
}
.case-body p {
  font-size:16px;
  line-height:1.8;
  max-width:760px;
  color:#54594e
}
.case-body p+p {
  margin-top:18px
}
.case-body ul {
  padding-left:20px;
  font-size:15px;
  line-height:1.8;
  color:#54594e
}
.case-callout {
  padding:30px;
  background:var(--cream);
  border-radius:12px;
  margin-top:25px
}
.case-callout p {
  font-size:20px;
  color:var(--ink);
  letter-spacing:-.025em;
  line-height:1.5
}
.case-flow {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-block:25px
}
.case-flow>div {
  border:1px solid var(--line);
  border-radius:8px;
  padding:23px
}
.case-flow b {
  display:block;
  font-size:12px;
  color:var(--accent);
  font-weight:400;
  margin-bottom:18px
}
.case-flow span {
  font-size:16px;
  line-height:1.5
}
.case-image {
  margin-top:30px;
  border-radius:12px;
  width:100%;
  max-height:600px;
  object-fit:contain;
  background:#e3e9dd
}
.case-image__caption {
  font-size:10px!important;
  color:var(--muted);
  margin-top:10px!important
}
.case-source {
  font-size:11px!important;
  line-height:1.7!important;
  padding:20px 0;
  border-top:1px solid var(--line)
}
.case-next {
  border-top:1px solid var(--line);
  padding-block:35px 65px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px
}
.case-next span {
  font-size:11px;
  color:var(--muted)
}
.case-next a {
  font-size:28px;
  letter-spacing:-.03em
}
.case-contact {
  padding-block:70px
}
.case-contact h2 {
  font-size:50px
}
.case-contact .button {
  margin-top:25px
}
@media(min-width:1600px) {
  .wrap {
    max-width:1440px
  }
  .hero h1 {
    font-size:125px
  }
}
@media(max-width:1050px) {
  .wrap {
    padding-inline:32px
  }
  .header__nav {
    gap:20px
  }
  .hero__bottom {
    grid-template-columns:1fr 1fr
  }
  .hero__index {
    display:none
  }
  .signal {
    grid-template-columns:1.2fr 1fr 1fr 1fr
  }
  .signal small {
    display:none
  }
  .project__visual {
    height:330px
  }
  .project__visual--velo {
    height:450px
  }
  .project__visual--delivery img,.project__visual--snow img {
    height:235px
  }
  .about__layout {
    gap:50px
  }
  .about__text h2 {
    font-size:36px
  }
  .approach__layout {
    gap:40px
  }
  .approach h2 {
    font-size:40px
  }
  .review {
    padding:22px
  }
  .case-content {
    gap:45px;
    grid-template-columns:145px 1fr
  }
}
@media(max-width:760px) {
  .wrap {
    padding-inline:22px
  }
  .prototype-note {
    padding:9px 22px;
    font-size:9px
  }
  .prototype-note a {
    display:none
  }
  .header {
    height:88px;
    flex-wrap:wrap;
    gap:0;
    position:relative
  }
  .brand__mark {
    font-size:33px
  }
  .brand__name {
    font-size:12px
  }
  .header__contact {
    display:none
  }
  .menu-toggle {
    display:flex;
    gap:12px;
    align-items:center;
    border:1px solid var(--line);
    border-radius:30px;
    background:transparent;
    font-size:12px;
    padding:9px 14px;
    min-height:44px
  }
  .menu-toggle span {
    font-size:18px
  }
  .header__nav {
    display:none
  }
  .header__nav.is-open {
    display:flex;
    position:absolute;
    top:77px;
    left:22px;
    right:22px;
    z-index:10;
    background:var(--ink);
    color:var(--paper);
    padding:22px;
    flex-direction:column;
    border-radius:12px;
    box-shadow:0 15px 30px #22241f20;
    gap:0
  }
  .header__nav.is-open a {
    padding:13px 0;
    min-height:44px
  }
  .hero {
    padding-top:27px;
    padding-bottom:42px
  }
  .hero__eyebrow {
    font-size:10px;
    margin-bottom:25px
  }
  .hero h1 {
    font-size:clamp(43px,9.4vw,71px);
    letter-spacing:-.058em;
    line-height:1.06
  }
  .hero__last {
    gap:30px
  }
  .hero__asterisk {
    font-size:62px
  }
  .hero__bottom {
    display:flex;
    flex-direction:column;
    align-items:start;
    gap:24px;
    margin-top:27px
  }
  .hero__bottom p {
    font-size:14px;
    max-width:390px
  }
  .button {
    font-size:12px;
    padding:16px 20px;
    min-height:52px
  }
  .signal {
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    padding-block:24px
  }
  .signal__source {
    grid-column:1/-1;
    font-size:11px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    line-height:1.4
  }
  .signal__source br {
    display:none
  }
  .signal__source span {
    margin:0
  }
  .signal strong {
    font-size:31px
  }
  .signal>div>span {
    font-size:9px;
    max-width:90px
  }
  .section {
    padding-block:65px
  }
  .section__heading {
    margin-bottom:30px;
    display:block
  }
  .section__heading>p {
    margin-top:20px;
    font-size:12px
  }
  .section__heading h2,h2 {
    font-size:34px;
    letter-spacing:-.05em
  }
  .eyebrow {
    font-size:9px;
    letter-spacing:.1em;
    margin-bottom:22px
  }
  .project-grid {
    grid-template-columns:1fr;
    gap:32px
  }
  .project--wide {
    grid-column:auto
  }
  .project__visual {
    height:305px;
    border-radius:14px
  }
  .project__visual--velo {
    height:360px;
    padding:26px
  }
  .project__switch {
    right:16px;
    top:16px
  }
  .project__switch button {
    font-size:9px;
    padding:9px 11px;
    min-height:36px
  }
  .project__story>.project__visual-label {
    padding-top:45px
  }
  .project__visual-label {
    font-size:9px
  }
  .project__story>p {
    font-size:44px;
    margin-top:25px;
    max-width:290px
  }
  .project__visual-footer {
    left:26px;
    right:26px;
    bottom:23px;
    font-size:11px
  }
  .project__ring {
    width:300px;
    height:300px;
    right:-190px;
    top:140px;
    opacity:.7
  }
  .project__ring:after {
    font-size:190px;
    left:8px;
    top:0
  }
  .project__caption {
    padding-top:16px;
    gap:12px
  }
  .project__caption h3 {
    font-size:21px
  }
  .project__caption p {
    font-size:11px
  }
  .project__tags {
    display:none
  }
  .round-arrow {
    width:42px;
    height:42px
  }
  .project__visual--delivery,.project__visual--snow {
    padding:24px
  }
  .project__visual--delivery img,.project__visual--snow img {
    height:230px;
    margin-top:0
  }
  .system-map {
    gap:10px;
    margin-top:60px
  }
  .system-map>div {
    gap:8px
  }
  .system-map b {
    font-size:11px;
    padding:13px 9px
  }
  .project__system>p {
    font-size:10px;
    line-height:1.5
  }
  .project__system>.project__visual-label {
    padding-top:47px
  }
  .more-projects {
    grid-template-columns:1fr;
    gap:0;
    margin-top:30px;
    padding-top:22px
  }
  .more-projects>span {
    margin-bottom:12px
  }
  .more-projects>a {
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:16px;
    padding-block:17px;
    border-bottom:1px solid var(--line);
    gap:12px
  }
  .more-projects>a>span {
    margin:0;
    font-size:9px;
    text-align:right
  }
  .service-list article {
    grid-template-columns:25px 1fr;
    padding:25px 0;
    gap:12px
  }
  .service-list h3 {
    font-size:24px
  }
  .service-list p {
    grid-column:2;
    font-size:13px;
    max-width:100%
  }
  .service-list article>span {
    padding-top:5px;
    font-size:9px
  }
  .text-link {
    font-size:12px;
    line-height:1.5
  }
  .approach__layout {
    grid-template-columns:1fr;
    gap:32px
  }
  .approach h2 {
    font-size:37px
  }
  .steps h3 {
    font-size:21px
  }
  .steps p {
    max-width:100%
  }
  .about__layout {
    grid-template-columns:1fr;
    gap:35px
  }
  .about__monogram {
    height:270px
  }
  .about__monogram>span {
    font-size:150px;
    top:5px
  }
  .about__monogram b {
    font-size:135px;
    right:5px
  }
  .about__monogram small {
    font-size:12px;
    bottom:26px;
    left:26px
  }
  .about__text h2 {
    font-size:35px
  }
  .about__text>p {
    font-size:14px
  }
  .review-grid {
    grid-template-columns:1fr;
    gap:14px
  }
  .review {
    padding:25px
  }
  .review blockquote {
    font-size:18px;
    margin:20px 0 26px
  }
  .reviews .section__heading>.text-link {
    margin-top:22px
  }
  .reviews__note {
    font-size:9px
  }
  .faq {
    padding-top:0
  }
  .faq summary {
    font-size:16px;
    line-height:1.5
  }
  .faq details {
    padding:20px 0
  }
  .contact__top>span:last-child {
    font-size:50px
  }
  .contact h2 {
    font-size:45px
  }
  .contact__bottom {
    flex-direction:column;
    margin-top:28px;
    gap:25px
  }
  .contact__bottom p {
    font-size:13px
  }
  .contact__bottom>div {
    width:100%
  }
  .contact .button {
    width:100%
  }
  .contact__alternative {
    font-size:10px;
    line-height:1.5
  }
  .footer {
    flex-wrap:wrap;
    gap:20px;
    padding-block:28px
  }
  .footer>.brand {
    flex-basis:100%;
    justify-content:space-between
  }
  .footer>span {
    display:none
  }
  .case-hero {
    padding-block:30px 30px
  }
  .case-hero__back {
    margin-bottom:30px
  }
  .case-hero h1 {
    font-size:45px
  }
  .case-hero__description {
    font-size:15px;
    margin-top:24px
  }
  .case-meta {
    grid-template-columns:1fr 1fr;
    gap:25px;
    margin-top:28px;
    padding-top:25px
  }
  .case-meta dd {
    font-size:12px
  }
  .case-cover {
    margin-top:30px
  }
  .case-cover img {
    min-height:250px;
    object-fit:cover
  }
  .case-cover__type {
    padding:50px 25px;
    font-size:40px
  }
  .case-content {
    grid-template-columns:1fr;
    gap:35px;
    padding-block:25px 35px
  }
  .case-nav {
    position:static;
    flex-direction:row;
    flex-wrap:wrap;
    gap:10px 20px;
    border-bottom:1px solid var(--line);
    padding-bottom:25px
  }
  .case-nav a {
    font-size:11px;
    min-height:34px;
    display:flex;
    align-items:center
  }
  .case-body section {
    padding-bottom:40px
  }
  .case-body h2 {
    font-size:30px
  }
  .case-body p {
    font-size:14px;
    line-height:1.75
  }
  .case-body ul {
    font-size:14px
  }
  .case-callout {
    padding:23px
  }
  .case-callout p {
    font-size:18px
  }
  .case-flow {
    grid-template-columns:1fr
  }
  .case-flow>div {
    padding:20px
  }
  .case-flow b {
    margin-bottom:10px
  }
  .case-next a {
    font-size:22px
  }
  .case-contact h2 {
    font-size:36px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}
@media(max-width:760px) {
  .signal small {
    display:block;
    grid-column:1/-1;
    text-align:left;
    font-size:9px
  }
  .signal small br {
    display:none
  }
  .review__stars {
    font-size:11px;
    letter-spacing:0
  }
}

/* Motion and components added in design revision 0.2. */
:root {
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}
html {
  scroll-padding-top: 132px;
  scrollbar-gutter: stable;
}
body.dialog-open {
  overflow: hidden;
}
.header-shell {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 115px;
  pointer-events: none;
}
.header-shell .header {
  position: relative;
  pointer-events: auto;
  transition: background .5s var(--ease-out), box-shadow .5s var(--ease-out), border-radius .5s var(--ease-out), transform .5s var(--ease-out), height .5s var(--ease-out);
}
.header-shell--scrolled .header {
  height: 82px;
  border-radius: 0 0 24px 24px;
  background: rgba(246, 245, 240, .96);
  box-shadow: 0 12px 45px #22241f16;
  backdrop-filter: blur(16px);
  transform: scale(.985);
}
.header__progress {
  position: absolute;
  bottom: 0;
  left: 24px;
  right: 24px;
  height: 2px;
  transform-origin: left;
  transform: scaleX(var(--scroll-progress, 0));
  background: var(--accent);
  border-radius: 2px;
  opacity: 0;
}
.header-shell--scrolled .header__progress {
  opacity: 1;
}
.header__nav a {
  position: relative;
  padding-block: 12px;
}
.header__nav a::after {
  content: '';
  height: 1px;
  background: currentColor;
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.header__nav a:hover::after {
  transform: scaleX(1);
}
.hero {
  position: relative;
  isolation: isolate;
}
.hero h1,
.hero__bottom,
.hero__eyebrow {
  position: relative;
  z-index: 2;
}
.hero__ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: clip;
  pointer-events: none;
}
.float-object {
  position: absolute;
  display: block;
  animation: float 9s ease-in-out infinite alternate;
}
.float-object--ring {
  width: 370px;
  height: 370px;
  border: 1px solid #e7442022;
  border-radius: 50%;
  top: 65px;
  right: -60px;
  box-shadow: 0 0 0 40px #e7442005, 0 0 0 80px #e7442004;
}
.float-object--orb {
  width: 110px;
  height: 110px;
  background: radial-gradient(circle at 35% 25%, #ffd7bd, #e74420);
  border-radius: 50%;
  top: 300px;
  right: 370px;
  opacity: .17;
  animation-duration: 12s;
}
.float-object--star {
  color: #d4d9c8;
  top: 55px;
  right: 410px;
  font-size: 45px;
  animation: orbit-star 16s ease-in-out infinite alternate;
}
.hero__showcase {
  position: absolute;
  right: 56px;
  top: 220px;
  width: 300px;
  height: 260px;
  z-index: 1;
  pointer-events: none;
}
.floating-window {
  position: absolute;
  width: 280px;
  border-radius: 12px;
  overflow: hidden;
  background: white;
  padding-top: 17px;
  box-shadow: 0 18px 50px #22241f22;
  border: 1px solid #fff8;
  animation: float-window 9s ease-in-out infinite;
}
.floating-window::before {
  content: '● ● ●';
  position: absolute;
  left: 9px;
  top: 4px;
  font-size: 6px;
  color: #b8beb0;
  letter-spacing: 2px;
}
.floating-window img {
  width: 100%;
  height: 152px;
  object-fit: cover;
  object-position: top;
}
.floating-window--front {
  right: 5px;
  top: 0;
  --window-rotation: 6deg;
}
.floating-window--back {
  width: 225px;
  top: 127px;
  left: -18px;
  --window-rotation: -9deg;
  animation-delay: -4s;
  animation-duration: 11s;
}
.floating-window--back img {
  height: 125px;
}
.hero__showcase-label {
  position: absolute;
  bottom: -40px;
  right: 0;
  font-size: 9px;
  letter-spacing: .06em;
  color: var(--muted);
}
.hero__index {
  visibility: hidden;
}
.status-dot {
  animation: pulse-dot 3s ease-out infinite;
}
.button {
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), background .4s;
}
.button:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px #22241f15;
}
.button span,
.round-arrow {
  transition: transform .4s var(--ease-out), background .4s, color .4s;
}
.button:hover span {
  transform: translate(3px, -3px);
}
.project__caption:hover .round-arrow {
  transform: rotate(45deg);
}
.project__visual--velo {
  height: 560px;
}
.project__story > p {
  max-width: 470px;
  font-size: 63px;
}
.project__screen {
  width: 52%;
  position: absolute;
  right: 40px;
  top: 108px;
  border-radius: 12px;
  padding: 17px 0 0;
  background: #f4f4ed;
  box-shadow: 0 25px 60px #57190040;
  transform: perspective(1000px) rotateY(-8deg) rotateZ(3deg);
  transition: transform .8s var(--ease-out);
  z-index: 2;
}
.project__screen::before {
  content: '● ● ●';
  position: absolute;
  top: 3px;
  left: 10px;
  font-size: 7px;
  letter-spacing: 3px;
  color: #a6aca0;
}
.project__screen img {
  width: 100%;
  aspect-ratio: 1.7;
  object-fit: cover;
  object-position: top;
  border-radius: 0 0 12px 12px;
}
.project__visual--velo:hover .project__screen {
  transform: perspective(1000px) rotateY(0) rotateZ(0) translateY(-7px);
}
.project__ring {
  opacity: .25;
  animation: float 12s ease-in-out infinite alternate;
}
.project__visual--aez,
.project__visual--kitchens {
  padding: 28px;
  background: #e9e4d5;
}
.project__visual--aez img,
.project__visual--kitchens img {
  margin-top: 25px;
  width: 100%;
  height: 245px;
  object-fit: cover;
  object-position: top;
  border-radius: 7px;
  box-shadow: 0 15px 30px #22241f15;
  transition: transform .7s var(--ease-out);
}
.project__visual--aez:hover img,
.project__visual--kitchens:hover img {
  transform: translateY(-6px) rotate(-1deg);
}
.project__visual--kitchens {
  background: #e6ded5;
}
.project__visual--delivery img,
.project__visual--snow img {
  transition: transform .8s var(--ease-out);
}
.project__visual--delivery:hover img,
.project__visual--snow:hover img {
  transform: scale(1.025);
}
.signal small {
  font-size: 10px;
}
.signal__summary {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}
.motion-ready .reveal {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.motion-ready .reveal.is-visible,
.reduced-motion .reveal {
  opacity: 1;
  transform: none;
}
.review-slider {
  min-width: 0;
}
.review-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 16px;
}
.review-track::-webkit-scrollbar {
  display: none;
}
.review-track .review {
  flex: 0 0 calc((100% - 24px) / 2);
  scroll-snap-align: start;
  min-width: 0;
  padding: 34px;
  background: #eceee5;
}
.review__head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 28px;
}
.review__avatar {
  width: 42px;
  height: 42px;
  background: #dce1d2;
  color: #536146;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  flex-shrink: 0;
}
.review__head b {
  display: block;
  font-size: 13px;
  font-weight: 500;
}
.review__head small {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  color: var(--muted);
}
.review h3 {
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: -.035em;
  margin-bottom: 17px;
}
.review__description {
  font-size: 14px;
  line-height: 1.75;
  color: #535b49;
  margin-bottom: 24px;
}
.review-track blockquote {
  margin: 0 0 25px;
  padding-left: 15px;
  border-left: 2px solid var(--accent);
  font-size: 18px;
  line-height: 1.5;
}
.review__source {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: 11px;
  min-height: 44px;
  border-top: 1px solid #d2d8c7;
  padding-top: 15px;
}
.review__source small {
  color: var(--muted);
  font-size: 10px;
}
.review-slider__footer,
.review-slider__controls {
  display: flex;
  align-items: center;
  gap: 14px;
}
.review-slider__footer {
  justify-content: space-between;
  margin-top: 24px;
  flex-wrap: wrap;
}
.review-slider__controls button {
  width: 48px;
  height: 48px;
  min-width: 44px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 50%;
  color: var(--ink);
  font-size: 23px;
  transition: background .3s, color .3s;
}
.review-slider__controls button:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
}
.review-slider__controls button:disabled {
  opacity: .3;
}
.review-slider__counter {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-width: 72px;
}
.review-slider__dots {
  display: flex;
}
.review-slider__dots button {
  min-width: 32px;
  min-height: 44px;
  border: 0;
  background: transparent;
  position: relative;
}
.review-slider__dots button::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd0c0;
  left: calc(50% - 3px);
  top: calc(50% - 3px);
  transition: transform .3s, background .3s;
}
.review-slider__dots button[aria-pressed=true]::after {
  background: var(--accent);
  transform: scale(1.5);
}
.contact {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.contact::before,
.contact::after {
  content: '';
  z-index: -1;
  position: absolute;
  width: 520px;
  height: 520px;
  right: -180px;
  top: -80px;
  border-radius: 50%;
  border: 1px solid #ffc4aa45;
  animation: float 12s ease-in-out infinite alternate;
}
.contact::after {
  width: 370px;
  height: 370px;
  top: 0;
  right: -100px;
  animation-delay: -6s;
}
.contact__channels {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-top: 30px;
}
.contact__phone {
  font-size: 25px;
  letter-spacing: -.035em;
  padding-block: 9px;
}
.contact__max {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  border: 1px solid #ffc4aa88;
  background: transparent;
  border-radius: 8px;
  padding: 13px 18px;
  min-height: 48px;
  font-size: 13px;
  transition: background .3s;
}
.contact__max:hover {
  background: #ffffff18;
}
.max-mark {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -.06em;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 10px;
}
.mobile-menu,
.contact-dialog,
.image-dialog {
  color: var(--ink);
  background: var(--paper);
  border: 0;
}
dialog::backdrop {
  background: #22241f99;
  backdrop-filter: blur(5px);
}
.mobile-menu {
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 24px;
}
.mobile-menu__inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.mobile-menu__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
}
.dialog-close {
  width: 48px;
  height: 48px;
  font-size: 27px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  border-radius: 50%;
}
.mobile-menu nav {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}
.mobile-menu nav a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-block: 17px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(26px, 7vw, 38px);
  line-height: 1.25;
  letter-spacing: -.04em;
}
.mobile-menu nav small {
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0;
}
.mobile-menu__bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding-top: 25px;
}
.mobile-menu__bottom > a:not(.button) {
  font-size: 19px;
  min-height: 36px;
}
.mobile-menu__bottom > p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
.contact-dialog {
  max-width: min(520px, calc(100% - 32px));
  padding: 34px;
  border-radius: 20px;
}
.contact-dialog__heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin-bottom: 25px;
}
.contact-dialog h2 {
  font-size: 32px;
}
.contact-dialog p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}
.contact-dialog label {
  display: block;
  font-size: 11px;
  margin-block: 24px 9px;
}
.contact-dialog input {
  border: 1px solid var(--line);
  background: white;
  width: 100%;
  padding: 15px;
  font-size: 19px;
  border-radius: 7px;
  color: var(--ink);
}
.contact-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.contact-dialog__actions .button {
  gap: 10px;
  padding: 15px 18px;
}
.contact-dialog [role=status] {
  font-size: 12px;
  min-height: 48px;
  margin-top: 18px;
}
.screen-gallery {
  padding-bottom: 60px;
}
.screen-gallery__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.screen-gallery a {
  display: block;
  padding: 15px;
  border-radius: 12px;
  background: #e9ece2;
}
.screen-gallery img {
  width: 100%;
  aspect-ratio: 1.5;
  object-fit: cover;
  object-position: top;
  border-radius: 7px;
  transition: transform .6s var(--ease-out);
}
.screen-gallery a:hover img {
  transform: translateY(-3px);
}
.screen-gallery__caption {
  display: block;
  font-size: 11px;
  margin-top: 13px;
  line-height: 1.6;
}
.image-dialog {
  width: min(1280px, calc(100% - 24px));
  max-width: calc(100% - 24px);
  max-height: 94dvh;
  border-radius: 16px;
  padding: 18px;
}
.image-dialog__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.image-dialog h2 {
  font-size: 20px;
}
.image-dialog figure {
  margin: 0;
}
.image-dialog img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.image-dialog figcaption {
  margin-top: 15px;
  font-size: 12px;
  color: var(--muted);
}
.case-nav {
  top: 130px;
}
.mobile-menu nav a > span {
  margin-left: auto;
  font-size: 24px;
  color: var(--muted);
}
.more-projects {
  grid-template-columns: .65fr 3fr;
}
.is-offscreen .float-object,
.is-offscreen .floating-window,
.is-offscreen .hero__asterisk,
.is-offscreen .status-dot,
.is-offscreen .project__ring,
.contact.is-offscreen::before,
.contact.is-offscreen::after,
.page-inactive *,
.page-inactive *::before,
.page-inactive *::after {
  animation-play-state: paused !important;
}
@keyframes float {
  from { transform: translate3d(0, 0, 0) rotate(-3deg); }
  to { transform: translate3d(8px, -22px, 0) rotate(6deg); }
}
@keyframes float-window {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--window-rotation)); }
  50% { transform: translate3d(0, -14px, 0) rotate(calc(var(--window-rotation) + 2deg)); }
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 #e7442045; }
  75%, 100% { box-shadow: 0 0 0 10px #e7442000; }
}
@keyframes orbit-star {
  from { transform: translateY(0) rotate(0); }
  to { transform: translateY(-20px) rotate(100deg); }
}
@media (max-width: 1100px) {
  .hero__showcase { right: 40px; width: 245px; top: 190px; }
  .floating-window { width: 225px; }
  .floating-window--back { width: 180px; top: 110px; }
  .floating-window img { height: 125px; }
  .floating-window--back img { height: 100px; }
  .project__story > p { font-size: 50px; max-width: 380px; }
  .project__screen { right: 22px; top: 145px; width: 49%; }
  .review-track .review { padding: 28px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 110px; }
  .header-shell { min-height: 88px; }
  .header-shell--scrolled .header { height: 74px; border-radius: 0 0 20px 20px; }
  .hero__showcase { position: relative; inset: auto; width: calc(100% - 20px); height: 225px; margin: 35px 10px 28px; }
  .floating-window { width: 73%; right: 0; top: 0; }
  .floating-window img { height: 130px; }
  .floating-window--back { width: 59%; top: 94px; left: 0; }
  .floating-window--back img { height: 104px; }
  .hero__showcase-label { bottom: -17px; font-size: 9px; }
  .float-object--ring { top: 200px; right: -220px; }
  .float-object--orb { top: 380px; left: -65px; }
  .float-object--star { right: 20px; top: 30px; opacity: .55; }
  .project__visual--velo { height: 510px; }
  .project__story > p { font-size: 38px; line-height: 1.05; max-width: 265px; margin-top: 23px; }
  .project__screen { width: calc(100% - 60px); right: 30px; top: 285px; transform: rotate(3deg); }
  .project__screen img { aspect-ratio: 1.9; }
  .project__visual-footer { bottom: 17px; }
  .project__system .system-map { margin-top: 100px; gap: 20px; }
  .project__system > p { margin-top: 30px; }
  .project__visual--aez, .project__visual--kitchens { padding: 24px; }
  .project__visual--aez img, .project__visual--kitchens img { height: 200px; margin-top: 16px; }
  .signal small { font-size: 9px; }
  .signal__summary { grid-column: 1 / -1; }
  .review-track { gap: 16px; }
  .review-track .review { flex-basis: 100%; padding: 26px; }
  .review h3 { font-size: 24px; }
  .review__description { font-size: 13px; }
  .review-slider__dots button { min-width: 32px; }
  .review-slider__controls { gap: 9px; }
  .review-slider__controls button { width: 44px; height: 44px; }
  .review-slider__footer { gap: 10px; }
  .contact__channels { align-items: start; flex-direction: column; gap: 13px; }
  .contact-dialog { padding: 24px; }
  .contact-dialog h2 { font-size: 28px; }
  .contact-dialog__actions { flex-direction: column; }
  .contact-dialog__actions .button { width: 100%; }
  .screen-gallery__grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready .reveal { opacity: 1; transform: none; }
  .hero__showcase .floating-window { transform: rotate(var(--window-rotation)); }
}
.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
.reduced-motion .floating-window {
  transform: rotate(var(--window-rotation));
}

/* Revision 0.4: project materials, complete testimonials and ongoing support. */
.review-track .review {
  min-height: 410px;
}
.review__head > div { min-width: 0; }
.review__head b { overflow-wrap: anywhere; }
.review-track .review__full {
  border: 0;
  padding: 0;
  margin: 0 0 32px;
  font-size: 19px;
  line-height: 1.65;
  letter-spacing: -.015em;
}
.review__full p + p { margin-top: 14px; }
.review__full strong {
  font-weight: 600;
  background: linear-gradient(transparent 68%, #d4dcc5 68%);
}
.review-slider__footer { align-items: flex-start; }
.review-slider__dots { flex-wrap: wrap; justify-content: flex-end; max-width: 60%; }
.review__source time { font-size: 14px; color: var(--muted); white-space: nowrap; }
.case-materials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin: 30px 0 38px;
}
.case-materials__domain,
.case-materials__download { font-size: 16px; overflow-wrap: anywhere; }
.case-materials__pdf { background: #e5e8dc; color: var(--ink); }
.case-materials__download { text-decoration: underline; text-underline-offset: 5px; }
.support { border-top: 1px solid var(--line); }
.support .section__heading > p { max-width: 320px; }
.support__layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; }
.support__intro h3 { font-size: 30px; line-height: 1.2; letter-spacing: -.035em; }
.support__intro p { margin: 24px 0; max-width: 370px; font-size: 18px; line-height: 1.7; color: var(--muted); }
.support__list { list-style: none; }
.support__list li { padding: 22px 0; border-top: 1px solid var(--line); }
.support__list strong { display: block; font-size: 22px; font-weight: 500; margin-bottom: 10px; }
.support__list span { display: block; font-size: 17px; line-height: 1.7; color: var(--muted); }
.support__terms { margin-top: 24px; padding: 24px; border-radius: 14px; background: #e5e8dc; font-size: 17px; line-height: 1.7; }
.support__terms strong { font-weight: 500; }
.faq summary > span { transition: transform 380ms cubic-bezier(.22,.8,.25,1), color 200ms; }
.faq details[data-expanded="false"] summary > span { transform: rotate(0); }
.faq details[data-expanded="true"] summary > span { transform: rotate(45deg); color: var(--accent); }
.faq summary:hover { color: var(--accent); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; border-radius: 4px; }
.faq details[open] > p { animation: faq-answer-in 380ms ease both; }
@keyframes faq-answer-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 950px) {
  .support__layout { grid-template-columns: 1fr; gap: 36px; }
  .support__intro p { max-width: 650px; }
}
@media (max-width: 600px) {
  .case-materials { align-items: stretch; gap: 16px; }
  .case-materials .button { width: 100%; justify-content: space-between; }
  .case-materials__domain { display: none; }
  .case-materials__download { width: 100%; }
  .review-track .review { min-height: 360px; }
  .review-track .review__full { font-size: 18px; }
  .review-slider__footer { flex-direction: column; }
  .review-slider__dots { max-width: 100%; justify-content: flex-start; }
  .support__intro h3 { font-size: 27px; }
  .support__terms { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq details[open] > p { animation: none; }
  .faq summary > span { transition: none; }
}
.reduced-motion .faq details[open] > p { animation: none; }
.reduced-motion .faq summary > span { transition: none; }
body {
  font-size: 18px;
}
.header__nav,
.header__contact,
.button,
.text-link,
.menu-toggle {
  font-size: 16px;
}
.brand__name {
  font-size: 16px;
}
.eyebrow,
.hero__eyebrow,
.signal__summary,
.signal small,
.signal > div > span,
.about__skills span,
.review__head small,
.review__source,
.review__source small,
.reviews__note,
.steps article > span,
.case-meta dt,
.case-source,
.screen-gallery__caption,
.case-image__caption,
.case-next > span,
.mobile-menu__bottom > p,
.contact-dialog label,
.contact-dialog [role=status],
.image-dialog figcaption,
.about__monogram small,
.footer,
.footer__motion {
  font-size: 14px;
  line-height: 1.55;
}
.hero__bottom p,
.section__heading > p,
.about__text > p,
.faq details p,
.case-body p {
  font-size: 18px;
  line-height: 1.7;
}
.service-list p,
.steps p,
.review__description,
.case-meta dd,
.case-nav a,
.case-body ul,
.case-hero__back,
.contact-dialog p {
  font-size: 16px;
  line-height: 1.7;
}
.review__head b,
.review-slider__counter {
  font-size: 16px;
}
.signal {
  grid-template-columns: .9fr 1fr 1fr 1fr 1.1fr;
}
.signal > div > span {
  max-width: 190px;
}
.signal small a {
  display: inline-block;
  margin-top: 6px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* A code-native sculpture connects the hero to the site's own palette. */
.hero__sculpture {
  position: absolute;
  right: 44px;
  top: 205px;
  width: 340px;
  height: 340px;
  pointer-events: none;
  perspective: 900px;
}
.sculpture__halo {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #e7442012, #e7442000 68%);
  border: 1px solid #e7442022;
  animation: ring-breathe 7s ease-in-out infinite;
}
.sculpture__core {
  position: absolute;
  width: 162px;
  height: 162px;
  top: 88px;
  left: 89px;
  border-radius: 50%;
  background: radial-gradient(circle at 28% 22%, #636a58 0, #30362b 36%, #171c15 75%);
  box-shadow: 16px 28px 44px #22241f20, inset -12px -14px 26px #10140e70;
  display: grid;
  place-items: center;
  animation: core-float 8s ease-in-out infinite;
  z-index: 2;
}
.sculpture__core span {
  color: #f5f3e6;
  font-size: 67px;
  letter-spacing: -.12em;
  margin-left: -7px;
  font-weight: 700;
}
.sculpture__orbit {
  position: absolute;
  inset: 30px 1px;
  border-radius: 50%;
  border: 20px solid var(--accent);
  border-right-color: #ffb69a;
  border-bottom-color: #bd351a;
  transform: rotate(-30deg) scaleY(.46);
}
.sculpture__orbit--back {
  z-index: 1;
  opacity: .7;
}
.sculpture__orbit--front {
  z-index: 3;
  clip-path: inset(50% 0 0 0);
  box-shadow: 0 12px 8px #b7381714;
}
.sculpture__satellite {
  position: absolute;
  border-radius: 50%;
  z-index: 4;
}
.sculpture__satellite--orange {
  width: 36px;
  height: 36px;
  left: 19px;
  top: 200px;
  background: radial-gradient(circle at 30% 20%, #ffc4a0, #e74420 75%);
  animation: satellite-float 6s ease-in-out infinite;
}
.sculpture__satellite--sage {
  width: 20px;
  height: 20px;
  right: 30px;
  top: 65px;
  background: #9aa789;
  animation: satellite-float 8s -3s ease-in-out infinite;
}
.sculpture__spark {
  position: absolute;
  right: 18px;
  bottom: 13px;
  color: var(--accent);
  font-size: 54px;
  animation: orbit-star 16s ease-in-out infinite alternate;
}
.float-object--ring {
  animation: ring-breathe 8s ease-in-out infinite;
}

/* Every project uses the same preview, switch, frame and caption geometry. */
.project-grid {
  gap: 52px 28px;
}
.portfolio-card {
  min-width: 0;
}
.portfolio-preview {
  padding: 24px;
  height: 460px;
  border-radius: 20px;
  background: #e9ebe1;
  border: 1px solid #dde1d3;
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow: hidden;
}
.portfolio-preview__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.portfolio-preview__platform {
  font-size: 14px;
  color: #515b46;
}
.portfolio-preview__switch {
  position: static;
  background: #d9dfcd;
  padding: 4px;
  gap: 3px;
  border-radius: 28px;
}
.portfolio-preview__switch button {
  padding: 10px 16px;
  min-height: 44px;
  font-size: 14px;
  color: #4c5542;
}
.portfolio-preview__switch button.is-active {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 3px 10px #22241f12;
}
.portfolio-preview .project__story,
.portfolio-preview .project__system {
  min-height: 0;
  flex: 1;
}
.browser-frame {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #ccd2c1;
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 15px 28px #22241f13;
  transition: transform .65s var(--ease-out), box-shadow .65s var(--ease-out);
}
.browser-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 36px #22241f1c;
}
.browser-frame__bar {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 13px;
  background: #f1f2ea;
  border-bottom: 1px solid #dce0d1;
}
.browser-frame__bar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #aab29f;
}
.browser-frame__bar > span {
  margin-left: auto;
  font-size: 14px;
  color: #626c57;
}
.browser-frame > img {
  min-height: 0;
  flex: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.portfolio-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 22px 4px 0;
}
.portfolio-caption__number {
  font-size: 14px;
  color: var(--muted);
  display: block;
  margin-bottom: 10px;
}
.portfolio-caption h3 {
  font-size: 29px;
  letter-spacing: -.035em;
  margin-bottom: 9px;
}
.portfolio-caption__result {
  font-size: 19px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
}
.portfolio-caption__type {
  font-size: 16px;
  color: #62685b;
  line-height: 1.6;
  margin-top: 6px;
}
.portfolio-caption .round-arrow {
  width: 50px;
  height: 50px;
  margin-top: 28px;
}
.portfolio-caption:hover .round-arrow {
  background: var(--ink);
  color: var(--paper);
  transform: rotate(45deg);
}
.solution-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 5px 4px;
}
.solution-panel h3 {
  font-size: 25px;
  letter-spacing: -.035em;
  margin-bottom: 12px;
}
.solution-panel > p {
  font-size: 16px;
  line-height: 1.6;
  color: #515b46;
  margin-bottom: 18px;
}
.solution-panel ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.solution-panel__step {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  animation: step-enter .55s var(--ease-out) both;
}
.solution-panel__step:nth-child(2) {
  animation-delay: .08s;
}
.solution-panel__step:nth-child(3) {
  animation-delay: .16s;
}
.solution-panel__step > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f8f7f1;
  border: 1px solid #c9d0bd;
  color: var(--accent);
  font-size: 14px;
  flex-shrink: 0;
}
.solution-panel__step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 17px;
  width: 1px;
  height: 9px;
  bottom: -9px;
  background: var(--accent);
  opacity: .45;
}
.solution-panel__step strong {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
}
.solution-panel > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ccd3c0;
  padding-top: 13px;
  margin-top: auto;
  font-size: 15px;
  min-height: 40px;
}

/* A single contact group keeps the channels aligned and equally usable. */
.contact-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: start;
}
.contact-copy h2 {
  font-size: clamp(46px, 5.3vw, 76px);
}
.contact-copy > p {
  font-size: 18px;
  line-height: 1.7;
  max-width: 410px;
  margin-top: 32px;
}
.contact-panel {
  padding-top: 4px;
}
.contact-panel__label {
  font-size: 16px;
  margin-bottom: 20px;
}
.contact-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-action {
  display: flex;
  flex-direction: column;
  align-items: start;
  background: var(--paper);
  color: var(--ink);
  border-radius: 14px;
  padding: 23px;
  min-height: 172px;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.contact-action:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 35px #9c281c28;
}
.contact-action__icon {
  width: 36px;
  height: 36px;
  border: 1px solid #d1d7c6;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  font-size: 23px;
  color: var(--accent);
}
.contact-action__icon--max {
  font-size: 18px;
  font-weight: 700;
}
.contact-action strong {
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -.035em;
}
.contact-action > span:last-child {
  font-size: 14px;
  line-height: 1.5;
  color: #62685b;
  margin-top: 6px;
}
.contact-details {
  margin-top: 26px;
}
.contact-details a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 17px 32px 17px 0;
  border-top: 1px solid #ffc4aa70;
}
.contact-details span {
  font-size: 14px;
  color: #ffdfcd;
}
.contact-details strong {
  font-size: 22px;
  font-weight: 400;
  overflow-wrap: anywhere;
}
.contact-details i {
  position: absolute;
  right: 0;
  top: 29px;
  font-style: normal;
  font-size: 24px;
}
.contact-panel__kwork {
  display: inline-block;
  font-size: 15px;
  line-height: 1.6;
  margin-top: 13px;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.contact::before {
  animation: ring-breathe 8s ease-in-out infinite;
}
.contact::after {
  animation: ring-breathe 8s -3s ease-in-out infinite;
}
.round-arrow,
.contact-action__icon {
  position: relative;
}
.round-arrow::after,
.contact-action__icon::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid currentColor;
  border-radius: 50%;
  pointer-events: none;
  animation: halo-pulse 5s ease-out infinite;
}

/* Entrance variants avoid blur and animate only opacity and transforms. */
.motion-ready .reveal {
  transition-delay: var(--entrance-delay, 0ms);
}
.motion-ready .reveal--slide {
  transform: translateX(24px);
}
.motion-ready .reveal--scale {
  transform: translateY(14px) scale(.97);
}
.motion-ready .reveal--tilt {
  transform: translateY(18px) rotate(-.7deg);
}
.motion-ready .reveal.is-visible {
  transform: none;
}
.is-offscreen .sculpture__halo,
.is-offscreen .sculpture__core,
.is-offscreen .sculpture__satellite,
.is-offscreen .sculpture__spark,
.is-offscreen .round-arrow::after,
.is-offscreen .contact-action__icon::after {
  animation-play-state: paused;
}
.brand--small {
  font-size: 16px;
}
@keyframes ring-breathe {
  0%, 100% { transform: scale(.93); opacity: .3; }
  50% { transform: scale(1.06); opacity: .7; }
}
@keyframes core-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes satellite-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(7px, -11px); }
}
@keyframes halo-pulse {
  0% { transform: scale(1); opacity: .3; }
  70%, 100% { transform: scale(1.45); opacity: 0; }
}
@keyframes step-enter {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 1100px) {
  .hero__sculpture { right: 24px; width: 280px; height: 280px; top: 220px; transform: scale(.85); transform-origin: center right; }
  .sculpture__core { top: 60px; left: 62px; }
  .contact-layout { gap: 42px; }
  .portfolio-preview { padding: 20px; height: 480px; }
  .portfolio-preview__switch button { padding-inline: 12px; }
  .signal { gap: 20px; }
}
@media (max-width: 950px) {
  .header-shell { min-height: 88px; }
  .header { height: 88px; }
  .header-shell--scrolled .header { height: 74px; }
  .header__nav, .header__contact { display: none; }
  .menu-toggle { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 9px 15px; background: transparent; border: 1px solid var(--line); border-radius: 28px; }
  .hero__sculpture { position: relative; inset: auto; margin: 10px 0 10px auto; transform: none; }
  .signal { grid-template-columns: repeat(3, 1fr); }
  .signal__summary, .signal small { grid-column: 1 / -1; text-align: left; }
  .signal small { display: block; }
  .signal small br { display: none; }
  .contact-layout { grid-template-columns: 1fr; gap: 38px; }
  .portfolio-preview { height: auto; }
  .portfolio-preview .project__story, .portfolio-preview .project__system { flex: none; }
  .browser-frame { height: auto; width: 100%; }
  .browser-frame > img { flex: none; height: auto; aspect-ratio: 16 / 10; }
  .solution-panel { min-height: 390px; }
}
@media (max-width: 760px) {
  .header__nav, .header__contact, .button, .text-link, .menu-toggle { font-size: 16px; }
  .brand__name { font-size: 15px; }
  .hero__eyebrow { font-size: 14px; line-height: 1.5; }
  .hero__sculpture { width: 280px; max-width: 100%; height: 280px; margin: 24px auto 10px; }
  .hero__bottom p, .about__text > p, .faq details p, .case-body p { font-size: 17px; }
  .eyebrow { font-size: 14px; letter-spacing: .07em; }
  .section__heading > p { font-size: 17px; }
  .signal > div > span { font-size: 14px; max-width: none; overflow-wrap: anywhere; }
  .signal { gap: 18px 14px; }
  .signal small { font-size: 14px; line-height: 1.7; }
  .signal strong { font-size: 33px; }
  .project-grid { gap: 36px; }
  .portfolio-preview { padding: 18px; height: auto; gap: 18px; }
  .portfolio-preview__switch button { font-size: 14px; padding-inline: 13px; }
  .portfolio-caption { padding-top: 22px; gap: 18px; }
  .portfolio-caption h3 { font-size: 27px; }
  .portfolio-caption__result { font-size: 19px; }
  .portfolio-caption__type { font-size: 16px; }
  .portfolio-caption .round-arrow { width: 46px; height: 46px; flex-shrink: 0; }
  .solution-panel h3 { font-size: 23px; }
  .solution-panel > p { font-size: 16px; margin-bottom: 15px; }
  .solution-panel__step strong { font-size: 16px; }
  .solution-panel ol { gap: 8px; }
  .solution-panel > a { font-size: 15px; margin-top: 14px; }
  .review__description { font-size: 16px; }
  .review__head small, .review__source, .review__source small, .reviews__note { font-size: 14px; }
  .review__source { align-items: start; flex-direction: column; gap: 8px; }
  .contact-layout { grid-template-columns: 1fr; gap: 38px; }
  .contact-copy h2 { font-size: 46px; }
  .contact-copy > p { font-size: 17px; margin-top: 25px; }
  .contact-actions { gap: 12px; }
  .contact-action { min-height: 160px; padding: 18px; }
  .contact-action strong { font-size: 21px; }
  .contact-action > span:last-child { font-size: 14px; }
  .contact-details strong { font-size: 21px; }
  .contact-panel__kwork { font-size: 15px; }
  .footer { font-size: 14px; }
  .footer__motion { font-size: 14px; }
  .case-meta dd, .case-nav a { font-size: 16px; }
  .screen-gallery__caption, .case-image__caption { font-size: 14px !important; }
}
@media (max-width: 360px) {
  .portfolio-preview { height: auto; }
  .portfolio-caption { align-items: end; }
  .portfolio-caption__number { font-size: 14px; }
  .contact-action { padding: 15px; }
  .contact-copy h2 { font-size: 40px; }
  .hero__sculpture { transform: scale(.88); transform-origin: center; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready .reveal { opacity: 1; transform: none; }
}
.reduced-motion .reveal {
  opacity: 1;
  transform: none;
}

/* iOS Safari: deterministic icons and explicit native-control geometry. */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -.12em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.icon--star { stroke-width: 1.15; }
button {
  -webkit-appearance: none;
  appearance: none;
  color: inherit;
  font: inherit;
}
.menu-toggle {
  color: var(--ink);
  line-height: 1;
}
.menu-toggle > span { display: inline-flex; align-items: center; justify-content: center; }
.dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  line-height: 1;
  color: var(--ink);
}
.dialog-close .icon { width: 22px; height: 22px; }
.review-slider__controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}
.review-slider__controls button .icon {
  display: block;
  width: 22px;
  height: 22px;
}
.review-slider__counter { white-space: nowrap; line-height: 1; }
.brand__mark > span,
.hero__asterisk,
.float-object--star,
.sculpture__spark { line-height: 1; }
.brand__mark > span > .icon,
.hero__asterisk > .icon,
.float-object--star > .icon,
.sculpture__spark > .icon,
.about__monogram b > .icon { display: block; }
.mobile-menu {
  inset: 0;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu nav a { align-items: center; }
.header-shell--scrolled .header {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
dialog::backdrop {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.footer { gap: 20px; flex-wrap: wrap; }
.info-page { max-width: 900px; padding-block: 80px; }
.info-page h1 { font-size: clamp(36px, 7vw, 68px); margin-bottom: 40px; }
.info-page h2 { font-size: 28px; margin: 32px 0 16px; }
.info-page p { font-size: 18px; line-height: 1.7; margin-block: 18px; }