:root {
  --c-card-line: #2C3E48;        --c-shadow: rgb(0 0 0 / 0.25); --frame-rule: var(--c-page);   --frame-marker: var(--c-card-line);
}

body { background: var(--c-primary); }
.frame-mat { inset: 0 var(--edge); border: solid var(--c-page); border-width: 0 1px; }
.page { padding: 0; }
@media (max-width: 699px) { .page { padding-top: 16px; } }

.band { position: relative; }

.nav-layer { --pill-bg: var(--nav-fill, var(--c-primary)); --pill-ink: var(--c-slate); }
.nav-layer .pill { background: var(--pill-bg); border-color: var(--pill-ink); color: var(--pill-ink); }
.nav-layer .pill.is-hover { background: var(--pill-ink); color: var(--pill-on, var(--pill-bg)); }
.nav-layer[data-nav="hero"] { --pill-bg: transparent; --pill-ink: var(--c-ink-light); --pill-on: var(--c-slate); }
.nav-layer[data-nav="hero"] .pill--brand { --pill-ink: var(--c-slate); --pill-on: var(--c-ink-light); }
@media (min-width: 1200px) {
  .nav-layer[data-nav="hero"] .nav .pill:last-child { --pill-ink: var(--c-slate); --pill-on: var(--c-ink-light); }
}
.nav-layer:is([data-nav="card"], [data-nav="photo"]) { --pill-bg: var(--c-card-line); --pill-ink: var(--c-ink-light); }
.nav-layer[data-nav="card"] .pill--brand { --pill-bg: var(--c-primary); --pill-ink: var(--c-slate); }

.card {
  --sx: 4px; --sy: 4px;
  position: relative; overflow: hidden;
  border: 4px solid var(--c-card-line);
  box-shadow: var(--sx) var(--sy) 2px var(--c-shadow);
  transition: translate .35s ease, box-shadow .35s ease;
}
.card-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  transition: scale 1.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.card--hero, .card--project { border-color: var(--c-ink); }
.card--hero .card-photo { opacity: 0.83; }
.card--project .card-photo { opacity: 0.82; }
.card--project .card-photo { transform: scaleX(-1); } .card--process { background: var(--c-page); }

.line { margin: 0; font-family: var(--mono); font-weight: 500; letter-spacing: 0.055em; line-height: 1.22; color: var(--c-ink); opacity: 0.97; }
.line strong { font-weight: 600; font-size: 1.1616em; letter-spacing: 0.055em; color: var(--c-ink-light); }
.line .hi { font-weight: 600; font-size: 1.04em; letter-spacing: 0.055em; color: var(--c-ink-light); }
.line strong, .line .hi {
  padding: 0 0.3em; margin: 0 -0.3em; border-radius: 7px;
  background: var(--c-ink);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.line--r { text-align: right; }
.line--c { text-align: center; }
.aside { margin: 0; font-weight: 400; letter-spacing: 0.165em; line-height: 1.35; color: color-mix(in srgb, var(--c-ink) 78%, transparent); white-space: nowrap; }

.services {
  margin: 0; padding: 0; list-style: none;
  background: #525E65; border-radius: 7px;
  font-weight: 700; letter-spacing: 0.165em; line-height: 1.35;
  color: color-mix(in srgb, var(--c-primary) 78%, transparent);
}
.services li { position: relative; padding-left: 1.556em; white-space: nowrap; }
.services li::before { content: "•"; position: absolute; left: 0.57em; }

.tags { margin: 0; padding: 0; list-style: none; }
.tags li {
  box-sizing: border-box; background: #525E65; border-radius: 7px;
  font-family: var(--mono); font-weight: 700; letter-spacing: 0.055em; line-height: 1.22; white-space: nowrap;
  color: color-mix(in srgb, var(--c-primary) 80%, transparent);
}

.hero-tagline { margin: 0; font-family: var(--mono); font-weight: 700; line-height: 1.55; color: var(--c-ink-light); }

.project-title { margin: 0; font-weight: 600; letter-spacing: 0.055em; line-height: 1.35; text-align: right; color: var(--c-ink); opacity: 0.97; }
.project-title strong { font-weight: 800; color: var(--c-ink-light); }
.project-title .dot { font-weight: 800; color: var(--c-blue-deep); }
.project-text { margin: 0; font-weight: 500; letter-spacing: 0.055em; line-height: 1.35; color: var(--c-ink-light); opacity: 0.97; }

.process-title { margin: 0; font-weight: 500; line-height: 1.35; color: var(--c-ink); opacity: 0.97; white-space: nowrap; }
.process-title .kicker { letter-spacing: 0.055em; }
.process-title .colon { font-family: var(--mono); }
.process-title .gap { font-family: var(--mono); font-weight: 700; letter-spacing: -0.485em; }
.process-title .big { font-family: var(--mono); font-weight: 700; font-size: 1.5909em; letter-spacing: 0.055em; }
.process-sub { margin: 0; font-weight: 500; letter-spacing: 0.065em; line-height: 1.35; color: var(--c-slate); opacity: 0.97; }
.process-foot { margin: 0; font-weight: 600; letter-spacing: 0.065em; line-height: 1.35; color: var(--c-slate); opacity: 0.97; }
.process-note {
  margin: 0; padding: 11px 12px 12px 15px;
  background: var(--c-primary); font-family: var(--mono); font-weight: 700; letter-spacing: 0.065em; line-height: 1.35; text-align: justify; color: var(--c-ink);
}

.diagram { position: relative; container-type: inline-size; aspect-ratio: 641 / 405; }
.diagram .process-anim { position: absolute; top: 0; left: 10.84%; width: 75.51%; }
.diagram-label {
  position: absolute; margin: 0;
  font-weight: 400; font-size: max(10px, 2.652cqw); letter-spacing: 0.065em; line-height: 1.25;
  color: var(--c-slate); opacity: 0.97; white-space: nowrap;
}
.diagram-label--offline { top: 59.26%; left: 0; line-height: 1.35; }
.diagram-label--iterate { top: 79.26%; left: 26.99%; opacity: 1; }
.diagram-label--iterate > span { display: block; }
.diagram-label--done { top: 55.56%; left: 87.68%; }
.diagram-label--offline, .diagram-label--done, .diagram-label--iterate > span {
  --show: min(clamp(0, (var(--pa-t) - var(--from)) / 350, 1), clamp(0, (15300 - var(--pa-t)) / 600, 1));
  opacity: calc(var(--show) * 0.97);
  translate: 0 calc((1 - var(--show)) * 5px);
}
.process-anim .pa-toggle--icon { opacity: 0; }
.process-anim:hover .pa-toggle--icon { opacity: 0.55; }
.process-anim .pa-toggle--icon:hover,
.process-anim .pa-toggle--icon:focus-visible { opacity: 1; }
@media (hover: none) { .process-anim .pa-toggle--icon { opacity: 0.55; } }

.cta { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; text-decoration: none; }
.cta-box {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 48px; padding: 0 14px 0 18px;
  border: 1px solid #fff;
  transition: background-color .2s ease;
}
.cta-label { font-family: var(--mono); font-weight: 700; font-size: 22px; letter-spacing: 0.065em; line-height: 1.35; color: var(--c-ink-light); opacity: 0.97; white-space: nowrap; }
.cta-arrow, .cta-chevron { width: auto; height: 28px; transition: translate .25s ease; }
.cta-hint { font-weight: 600; font-size: 14px; letter-spacing: 0.065em; line-height: 1.35; color: var(--c-ink-light); opacity: 0.97; white-space: nowrap; }
.cta:hover .cta-box { background: rgb(255 255 255 / 0.14); }
.cta:hover :is(.cta-arrow, .cta-chevron) { translate: 4px 0; }
.cta--projects .cta-chevron { align-self: flex-end; margin-right: 10px; }
.cta--process .cta-box { --fill: var(--c-primary); background: var(--fill); border-color: var(--fill); }
.cta--process .cta-label { color: var(--c-ink); }
.cta--process .cta-hint { color: var(--c-slate); }
.cta--process:hover .cta-box { --fill: color-mix(in srgb, var(--c-primary), var(--c-slate) 10%); background: var(--fill); }
.cta--contact .cta-label { word-spacing: -0.3em; } .cta--contact .cta-box { background: var(--c-ink); border-color: var(--c-ink); border-radius: 7px; }
.cta--contact:hover .cta-box { background: var(--c-slate); border-color: var(--c-slate); }

.contact-photo { position: relative; overflow: hidden; border: 3px solid var(--c-ink); border-right-width: 0; border-radius: 30px 0 0 0; }
.contact-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 32%;
  transition: scale 1.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.site-footer { background: var(--c-primary); }


@media (hover: hover) {
  .card--project:hover, .card--process:hover {
    translate: -3px -3px;
    box-shadow: calc(var(--sx) + 3px) calc(var(--sy) + 3px) 2px var(--c-shadow);
  }
}
@media (prefers-reduced-motion: reduce) {
  .card, .card-photo, .contact-photo img, .cta-box, .cta-arrow, .cta-chevron { transition: none; }
}


@media (max-width: 1199px) {
  .band--hero { padding-right: 14px; }
  .card--hero { height: clamp(420px, 90vw, 640px); margin-left: -4px; border-radius: 0 0 40px 0; }
  .card--hero > p { position: absolute; }
  .hero-tagline { top: 14px; right: 16px; left: 22px; font-size: 13px; text-align: right; }

  .band--story, .band--closing { display: flex; flex-direction: column; gap: 26px; padding: 44px 18px 56px; }
  .line { font-size: clamp(16px, 2.5vw, 24px); }
  .line--mid, .line--c { align-self: center; text-align: center; }
  .line--r { align-self: flex-end; max-width: 92%; }
  .aside { align-self: flex-end; margin: 4px 30px -20px 0; font-size: 14px; }
  .aside--c { align-self: center; margin: 4px 0 -20px; }
  .arrow { flex: none; height: auto; }
  .arrow--1 { align-self: flex-start; width: 52px; margin-left: 40px; }
  .arrow--2 { align-self: center; width: 40px; }
  .arrow--3 { align-self: flex-end; width: 56px; margin-right: 34px; }
  .arrow--4 { align-self: flex-start; width: 28px; margin: 4px 0 -8px 40px; }
  .arrow--5 { align-self: center; width: 64px; }
  .arrow--6 { align-self: flex-end; width: 34px; margin-right: 34px; }
  .arrow--7 { align-self: flex-start; width: 44px; margin-left: 40px; }
  .arrow--8 { align-self: center; width: 64px; }

  .tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .tags li { padding: 10px 12px 9px; font-size: clamp(13px, 2vw, 17px); }

  .services { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 14px 16px 14px 10px; font-size: clamp(13px, 2vw, 16px); }

  .card--project { height: clamp(440px, 88vw, 560px); margin-right: -18px; border-width: 5px; border-right-width: 0; border-radius: 30px 0 0 22px; }
  .card--project .card-photo { height: 130%; object-position: 50% 0; } .card--project > :not(.card-photo) { position: absolute; }
  .project-title { top: 18px; right: 18px; left: 18px; font-size: clamp(18px, 4.2vw, 29px); }
  .cta--projects { top: 42%; left: 50%; transform: translateX(-50%); }
  .project-text { right: 18px; bottom: 18px; left: 18px; font-size: clamp(15px, 3.4vw, 25px); }

  .band--process { padding: 24px 18px 40px 0; }
  .card--process { display: flex; flex-direction: column; gap: 22px; margin-left: -3px; padding: 28px 20px 30px 23px; border-width: 3px; border-radius: 0 25px 25px 0; }
  .process-title { font-size: clamp(16px, 3.2vw, 22px); white-space: normal; }
  .process-title .big { display: inline-block; }
  .process-sub { font-size: clamp(16px, 2.6vw, 22px); }
  .process-foot { font-size: clamp(15px, 2.4vw, 20px); }
  .process-note { align-self: flex-start; max-width: 290px; font-size: 15px; text-align: left; } .cta--process { align-self: flex-end; }

  .cta--contact { align-self: flex-end; }
  .contact-photo { height: clamp(180px, 40vw, 386px); }
}
@media (min-width: 700px) and (max-width: 1199px) {
  .hero-tagline { top: calc(var(--bar) + 16px); }
}


@media (min-width: 1200px) {
  .page { --u: calc(100cqw / 1728); }
  .band { height: calc(var(--h) * var(--u)); }
  .at { position: absolute; top: calc(var(--y) * var(--u)); left: calc(var(--x) * var(--u)); margin: 0; }
  .at.r { left: auto; right: calc(var(--r) * var(--u)); }
  .at.w { width: calc(var(--w) * var(--u)); }

  .line { font-size: calc(25 * var(--u)); }
  .line--r { margin-right: -0.055em; }
  .aside { font-size: calc(18 * var(--u)); }

  .services { width: calc(987.8 * var(--u)); height: calc(108.06 * var(--u)); border-radius: calc(8.22 * var(--u)); font-size: calc(21.14 * var(--u)); }
  .line strong, .line .hi, .cta--contact .cta-box { border-radius: calc(7 * var(--u)); }
  .tags li { height: calc(var(--h) * var(--u)); padding: calc(16 * var(--u)) 0 0 calc(14 * var(--u)); border-radius: calc(7 * var(--u)); font-size: calc(20 * var(--u)); }
  .services .at { position: absolute; }

  .card--hero {
    --sx: calc(5 * var(--u)); --sy: calc(5 * var(--u));
    position: absolute; top: calc(-89 * var(--u)); left: calc(-220 * var(--u));
    width: calc(1702 * var(--u)); height: calc(820 * var(--u));
    border-width: calc(6 * var(--u)); border-radius: 0 0 calc(63 * var(--u)) 0;
  }
  .card--hero .card-photo { inset: auto; top: calc(-135.2 * var(--u)); left: calc(-175.9 * var(--u)); width: calc(2113 * var(--u)); height: calc(1534.7 * var(--u)); object-fit: fill; }
  .hero-tagline { font-size: calc(25.07 * var(--u)); white-space: nowrap; }

  .card--project {
    --sx: calc(9 * var(--u)); --sy: calc(10 * var(--u));
    width: calc(1564.7 * var(--u)); height: calc(583.3 * var(--u));
    border-width: calc(7 * var(--u));
    border-radius: calc(36 * var(--u)) calc(22.4 * var(--u)) calc(22.4 * var(--u)) calc(22.4 * var(--u));
  }
  .card--project .card-photo { inset: auto; top: calc(-40.9 * var(--u)); left: calc(-7 * var(--u)); width: calc(1564.7 * var(--u)); height: calc(1173.4 * var(--u)); object-fit: fill; }
  .project-title { margin-right: -0.055em; font-size: calc(29.21 * var(--u)); }
  .project-text { font-size: calc(25.03 * var(--u)); }

  .card--process {
    --sx: calc(6 * var(--u)); --sy: calc(9 * var(--u));
    position: absolute; top: 0; left: calc(-34 * var(--u));
    width: calc(1585 * var(--u)); height: calc(713 * var(--u));
    border-width: calc(3 * var(--u)); border-radius: calc(25 * var(--u));
  }
  .process-title { font-size: calc(22 * var(--u)); }
  .process-sub { font-size: calc(22 * var(--u)); }
  .process-foot { font-size: calc(20 * var(--u)); }
  .process-note { width: calc(290 * var(--u)); height: calc(100 * var(--u)); padding: calc(11 * var(--u)) calc(12 * var(--u)) 0 calc(15 * var(--u)); font-size: calc(18 * var(--u)); }
  .diagram { width: calc(641 * var(--u)); }

  .contact-photo { position: absolute; top: 0; left: 0; width: calc(1738 * var(--u)); height: calc(386 * var(--u)); border: calc(3 * var(--u)) solid var(--c-ink); border-radius: calc(42 * var(--u)) 0 0 0; }
  .contact-photo img { object-fit: cover; object-position: 50% 50%; }

  .cta-box { height: calc(55 * var(--u)); }
  .cta-label { font-size: calc(29 * var(--u)); }
  .cta-arrow, .cta-chevron { height: calc(33 * var(--u)); }
  .cta-hint { font-size: calc(17 * var(--u)); }
  .cta--projects { gap: 0; }
  .cta--projects .cta-chevron { align-self: auto; height: calc(27.5 * var(--u)); margin: 0 0 0 calc(151.8 * var(--u)); }
  .cta--projects .cta-hint { margin-top: calc(20.9 * var(--u)); font-size: calc(14.19 * var(--u)); }
  .cta--projects .cta-box { justify-content: flex-start; width: calc(176.9 * var(--u)); height: calc(45.9 * var(--u)); padding: 0 0 0 calc(15 * var(--u)); }
  .cta--projects .cta-label { font-size: calc(24.2 * var(--u)); }
  .cta--process { gap: calc(4 * var(--u)); }
  .cta--process .cta-box { width: calc(218 * var(--u)); padding: 0 calc(18 * var(--u)) 0 calc(30 * var(--u)); }
  .cta--process .cta-hint { margin-left: calc(4 * var(--u)); }
  .cta--contact .cta-box { width: calc(309 * var(--u)); gap: 0; padding: 0 calc(16.3 * var(--u)) 0 calc(26 * var(--u)); }

  .site-footer { padding: calc(82 * var(--u)) 0 calc(46 * var(--u)) calc(85 * var(--u)); }
}