@font-face { font-family: Google; src: url('regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

@font-face { font-family: Google; src: url('bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }



:root{--paper:#f5f3ef;--ink:#111;--red:#c62828;--line:#d5d1cb;--muted:#615e59}
*{box-sizing:border-box}
html{scroll-behavior:auto;scroll-padding-top:35px;scrollbar-gutter:stable}
/* Keep the page in place while a project image is enlarged. */
html:has(dialog[open]){overflow:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Google,Arial,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--red);outline-offset:6px}
.wrap{max-width:1440px;margin:auto;padding:0 64px}
header{height:116px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.logo{width:152px;height:auto;display:block}
nav{display:flex;gap:33px;align-items:center;font-size:14px}
.contact-small{border:1px solid var(--ink);padding:13px 21px;border-radius:2px}
.contact-small:hover{background:var(--ink);color:white}
.arrow{display:inline-block;margin-left:20px}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.12em;display:flex;align-items:center;gap:12px}
.eyebrow:before{content:'';width:7px;height:7px;background:var(--red);border-radius:50%;flex-shrink:0}
.hero{position:relative;padding:61px 0 40px;min-height:670px;overflow:hidden}
.hero h1{font-size:clamp(62px,7.7vw,112px);letter-spacing:-.065em;line-height:.96;font-weight:700;margin:34px 0 37px;max-width:900px;position:relative;z-index:1}
.hero h1 em{font-style:normal;color:var(--red)}
.hero-bottom{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1;gap:24px}
.hero-bottom p{max-width:420px;font-size:18px;line-height:1.6;margin:0}
.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;background:var(--red);color:white;padding:21px 27px;font-size:15px;border:0;border-radius:2px;transition:background .2s}
.cta:hover{background:#a31f1f}
.hero-art{position:absolute;right:-82px;top:130px;width:390px;height:390px;opacity:.13;transform:rotate(-10deg);pointer-events:none}
.hero-art svg{width:100%;height:100%}
.hero-foot{border-top:1px solid var(--line);margin-top:49px;padding:22px 0 0;display:flex;justify-content:space-between;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.section-top{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin:0 0 38px}
.section-top h2{font-size:clamp(38px,4.3vw,60px);letter-spacing:-.05em;line-height:1.05;margin:18px 0 0;font-weight:700}
.section-top p{max-width:320px;font-size:15px;line-height:1.6;color:var(--muted);margin:0}
.work{padding:66px 0 94px;border-top:1px solid var(--line)}
.shot{border:0;padding:0;background:#e6e2dc;display:block;width:100%;position:relative;overflow:hidden}
.shot img{display:block;width:100%;height:auto;transition:transform .5s}
.shot:hover img{transform:scale(1.025)}
.expand{position:absolute;right:15px;bottom:15px;display:flex;gap:17px;align-items:center;background:var(--paper);color:#111;padding:10px 14px;font-size:12px}
.project-number{font-size:12px;color:var(--red);letter-spacing:.08em}
.featured h3{font-size:37px;line-height:1.1;letter-spacing:-.04em;margin:17px 0 23px}
.featured p{font-size:16px;line-height:1.65;color:var(--muted)}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:25px}
.tags span{border:1px solid var(--line);border-radius:20px;padding:7px 12px;font-size:11px}
.project-detail{font-size:13px;margin-top:27px;padding-top:17px;border-top:1px solid var(--line);color:var(--muted)}
.project h3{font-size:27px;letter-spacing:-.035em;margin:13px 0 10px}
.project p{font-size:15px;line-height:1.6;color:var(--muted);max-width:440px;margin:0}
.services{background:#111;color:var(--paper);padding:90px 0 98px}
.services .section-top{margin-bottom:55px}
.services .section-top p{color:#aaa}
.services details{border-top:1px solid #444}
.services details:last-child{border-bottom:1px solid #444}
.services summary{list-style:none;display:grid;grid-template-columns:70px 1.1fr 1fr 26px;gap:25px;align-items:center;padding:30px 0;cursor:pointer}
.services summary::-webkit-details-marker{display:none}
.service-index{color:#d66;font-size:13px}
.service-name{font-size:29px;letter-spacing:-.035em}
.service-desc{font-size:14px;color:#aaa;line-height:1.5;max-width:320px}
.plus{font-size:30px;font-weight:400;transition:transform .2s}
.services details[open] .plus{transform:rotate(45deg)}
.service-content{padding:0 75px 29px 95px;color:#ccc;font-size:15px;line-height:1.7;max-width:850px}
.process{padding:95px 0;border-bottom:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:35px;margin-top:55px}
.step{border-top:1px solid var(--line);padding-top:20px}
.step span{font-size:12px;color:var(--red)}
.step h3{font-size:24px;letter-spacing:-.03em;margin:25px 0 14px}
.step p{font-size:14px;line-height:1.65;color:var(--muted);margin:0}
.about{display:grid;grid-template-columns:1fr 1fr;gap:90px;padding:90px 0;align-items:center}
.about-mark{background:#eae6df;aspect-ratio:1.3;position:relative;display:flex;align-items:center;justify-content:center}
.about-mark img{width:55%;height:auto}
.about-mark small{position:absolute;left:25px;bottom:22px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.about h2{font-size:48px;line-height:1.06;letter-spacing:-.05em;margin:20px 0 25px}
.about p{line-height:1.7;color:var(--muted);font-size:16px}
.contact{background:var(--red);color:#fff;padding:75px 0 69px}
.contact .eyebrow:before{background:white}
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;align-items:end;gap:70px}
.contact h2{font-size:clamp(50px,6.3vw,85px);line-height:.99;letter-spacing:-.055em;margin:30px 0 0}
.contact p{font-size:17px;line-height:1.6;max-width:350px;margin:0 0 30px}
.contact .cta{background:var(--paper);color:var(--ink);width:100%}
.contact .cta:hover{background:#e3dfd8}
footer{padding:27px 0;display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:12px;color:var(--muted)}
.skip{position:absolute;left:15px;top:-100px;background:white;padding:16px;z-index:10}
.skip:focus{top:15px}
dialog{border:0;padding:0;max-width:min(1100px,92vw);max-height:90vh;background:var(--paper);color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.78)}
.dialog-bar{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;gap:25px}
.dialog-bar button{background:none;border:1px solid var(--line);padding:9px 15px}
.dialog-image{display:block;max-width:100%;max-height:75vh;object-fit:contain;margin:auto}

@media(min-width:1500px){.hero-art{right:-20px}
}
@media(max-width:1000px){.wrap{padding:0 32px}
.hero{min-height:auto}
.hero h1{font-size:85px;max-width:690px}
.hero-art{width:320px;right:-130px;top:160px}
.featured h3{margin:12px 0;font-size:32px}
.featured p{max-width:700px}
.featured .tags{margin-top:15px}
.featured .project-detail{margin-top:16px}
.services summary{grid-template-columns:40px 1.3fr 1fr 25px;gap:15px}
.service-name{font-size:24px}
.service-content{padding-left:55px}
.about{gap:40px}
.contact-grid{gap:40px}
}

@media(max-width:650px){.wrap{padding:0 22px}
header{height:91px}
.logo{width:122px}
nav{gap:16px;font-size:12px}
nav a:nth-child(2){display:none}
.contact-small{padding:10px 12px}
.contact-small .arrow{display:none}
.hero{padding:43px 0 30px}
.hero h1{font-size:clamp(53px,12.7vw,79px);margin:32px 0;letter-spacing:-.06em}
.hero-art{width:220px;right:-110px;top:80px;opacity:.08}
.hero-bottom{flex-direction:column;align-items:flex-start;gap:26px}
.hero-bottom p{font-size:16px;max-width:330px}
.hero-bottom .cta{width:100%}
.hero-foot{margin-top:32px;gap:20px;font-size:9px;line-height:1.6}
.section-top{flex-direction:column;align-items:flex-start;gap:20px}
.section-top h2{font-size:43px}
.section-top p{font-size:14px}
.work{padding:45px 0 60px}
.featured h3{font-size:31px}
.featured p{font-size:15px}
.services{padding:60px 0}
.services summary{grid-template-columns:28px 1fr 24px;gap:12px;padding:24px 0}
.service-name{font-size:25px}
.service-desc{grid-column:2;grid-row:2;font-size:13px}
.plus{grid-column:3;grid-row:1}
.service-content{padding:0 0 25px 40px;font-size:14px}
.process{padding:60px 0}
.steps{grid-template-columns:1fr 1fr;gap:32px 24px;margin-top:34px}
.step h3{font-size:21px;margin-top:18px}
.about{grid-template-columns:1fr;gap:34px;padding:60px 0}
.about-mark{aspect-ratio:1.6}
.about h2{font-size:42px}
.contact{padding:55px 0}
.contact-grid{grid-template-columns:1fr;gap:30px}
.contact h2{font-size:57px}
.contact p{font-size:16px}
footer{font-size:11px;align-items:flex-start}
.footer-note{max-width:170px;text-align:right}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
}

.contact-links{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:22px;font-size:14px;line-height:1.5}
.contact-links a{overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:4px}
.contact-links a:hover{opacity:.8}
@media(max-width:650px){.hero .eyebrow{font-size:10px;letter-spacing:.07em}
}


:root { --accent: #c62828; --panel: #eae6df; --image-bg: #e6e2dc; color-scheme: light; }

:root[data-theme="dark"] {
  --paper: #161616; --ink: #f5f3ef; --line: #3b3b3b;
  --muted: #bcb8b2; --accent: #f17878; --panel: #242424;
  --image-bg: #242424; color-scheme: dark;
}

.hero h1 em, .project-number, .step span { color: var(--accent); }

.eyebrow:before { background: var(--accent); }

.contact .eyebrow:before { background: #fff; }

.contact-small:hover { color: var(--paper); }

.shot { background: var(--image-bg); }

.expand { color: var(--ink); }

.about-mark {
  background: var(--panel);
  flex-direction: column;
  gap: 24px;
  padding: 32px 24px;
}

.about-mark small {
  position: static;
  align-self: stretch;
  line-height: 1.5;
}

.skip { background: var(--paper); color: var(--ink); }

.services { color: #f5f3ef; }

.contact { background: #c62828; }

.contact .cta { background: #f5f3ef; color: #111; }

.contact .cta:hover { background: #e3dfd8; }

a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 5px;
}

.contact a:focus-visible { outline-color: #fff; }

.header-tools { display: flex; align-items: center; gap: 10px; }

header { gap: 30px; }

header nav { margin-left: auto; }

.theme-switch, .language-select {
  background: var(--paper); color: var(--ink); border: 1px solid var(--line);
  border-radius: 2px; height: 42px;
}

.theme-switch { display: grid; place-items: center; width: 42px; padding: 0; }

.theme-switch:hover, .language-select:hover { border-color: var(--ink); }

.theme-switch svg { display: block; width: 19px; height: 19px; }

.language-select { font: inherit; font-size: 13px; padding: 0 10px; cursor: pointer; max-width: 125px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.brand-dark { display: none; }

:root[data-theme="dark"] .brand-light { display: none; }

:root[data-theme="dark"] .brand-dark { display: block; }

.hero-art .brand-light, .hero-art .brand-dark { width: 100%; height: 100%; }

:root[data-theme="dark"] .hero-art { opacity: .19; }

@media(max-width:1000px) {
  header { gap: 20px; }
 header nav { gap: 18px; }

  .header-tools { gap: 8px; }

}

@media(max-width:750px) {
  header { flex-wrap: wrap; height: auto; min-height: 120px; padding: 20px 0; gap: 19px; }

  header > a { order: 0; }

  .header-tools { order: 1; margin-left: auto; }

  header nav { order: 2; width: 100%; margin-left: 0; justify-content: space-between; gap: 14px; }

  header nav a:nth-child(2) { display: block; }

  .logo { width: 122px; }

  .theme-switch, .language-select { height: 38px; }

  .theme-switch { width: 38px; }

  .language-select { max-width: 118px; font-size: 12px; }

  header .contact-small { padding: 9px 12px; }

}

@media(max-width:360px) {
  .logo { width: 105px; }
 .header-tools { gap: 6px; }

  .language-select { max-width: 103px; padding: 0 6px; }

}

@media(max-width:650px) {
  .about-mark { aspect-ratio: auto; }

}


.work { --project-gap: 32px; }

.featured {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--project-gap);
  align-items: start;
}

.featured > .shot { grid-column: span 2; }

.featured > .project-copy { grid-column: span 1; min-width: 0; }

.work .shot {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.work .shot img { width: 100%; height: 100%; object-fit: contain; }

.work .app-shot { padding: 22px; }

.work .app-shot img.app-screen {
  position: absolute;
  top: 22px;
  left: 50%;
  width: auto;
  max-width: calc(100% - 44px);
  height: calc(100% - 44px);
  transform: translateX(-50%);
  border: 5px solid #191919;
  border-radius: 16px;
  background: #080808;
  box-shadow: 0 10px 20px #0003;
}

.work .app-shot:hover img.app-screen { transform: translateX(-50%) scale(1.025); }

.featured > .shot { aspect-ratio: 16 / 9; }

.portfolio-carousel { margin-top: 56px; min-width: 0; }

.carousel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }

.carousel-heading { font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; margin: 0; color: var(--muted); }

.carousel-controls { display: flex; align-items: center; gap: 10px; }

.carousel-controls[hidden] { display: none; }

.carousel-count { font-size: 12px; color: var(--muted); min-width: 65px; text-align: right; margin-right: 8px; }

.carousel-button { width: 42px; height: 42px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 22px; border-radius: 2px; }

.carousel-button:hover:not(:disabled) { border-color: var(--ink); }

.carousel-button:disabled { opacity: .3; cursor: default; }

.other-work {
  display: flex;
  gap: var(--project-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  padding-bottom: 18px;
  overscroll-behavior-x: contain;
}

.other-work > .project { flex: 0 0 calc((100% - var(--project-gap)) / 2); scroll-snap-align: start; scroll-snap-stop: always; }

.project { min-width: 0; }

.project .project-number { display: block; margin-top: 24px; }

.project .project-copy { min-width: 0; }

.work .project p { max-width: none; }

.work .expand { color: var(--ink); }

@media(max-width:1000px) {
  .featured { grid-template-columns: minmax(0, 1fr); gap: 25px; }

  .featured > .shot, .featured > .project-copy { grid-column: auto; }

  .portfolio-carousel { margin-top: 48px; }

}

@media(max-width:750px) {
  .other-work > .project { flex-basis: 100%; }

  .carousel-toolbar { gap: 12px; }

  .carousel-controls { gap: 8px; }

  .carousel-button { width: 38px; height: 38px; }

}

@media(max-width:650px) {
  .project .project-number { margin-top: 24px; }

  .work .shot { padding: 12px; }

  .work .expand { right: 12px; bottom: 12px; }

}

@media(prefers-reduced-motion:reduce) {
  .other-work { scroll-behavior: auto; }

}


/* The brand pieces settle once; the headline and contact action remain available. */
.hero-art .motion-black {
  animation: passage-upper 1.7s cubic-bezier(.22, .75, .25, 1) both;
}

.hero-art .motion-red {
  animation: passage-lower 1.7s .12s cubic-bezier(.22, .75, .25, 1) both;
}

@keyframes passage-upper {
  0% { transform: translate(-54px, -36px); opacity: .25; }

  75% { transform: translate(2px, 1px); opacity: 1; }

  100% { transform: translate(0, 0); opacity: 1; }

}

@keyframes passage-lower {
  0% { transform: translate(54px, 36px); opacity: .25; }

  75% { transform: translate(-2px, -1px); opacity: 1; }

  100% { transform: translate(0, 0); opacity: 1; }

}

.contact-choices { display: grid; gap: 12px; }

.contact .contact-choices .cta { gap: 16px; text-align: left; line-height: 1.4; }

.contact .contact-choice-support { background: transparent; color: #fff; border: 1px solid #f5f3ef; }

.contact .contact-choice-support:hover { background: rgba(255, 255, 255, .12); }

/* Only the observer opts elements into motion; no script means no hidden content. */
[data-reveal-state="pending"] {
  opacity: 0;
  transform: translateY(14px);
}

[data-reveal-state] {
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .75, .25, 1);
}

[data-reveal-state="visible"], [data-reveal-state="pending"]:focus-within {
  opacity: 1; transform: none;
}

@media(prefers-reduced-motion:reduce) {
  .hero-art .motion-black, .hero-art .motion-red { animation: none; transform: none; opacity: 1; }

  [data-reveal-state] { opacity: 1; transform: none; transition: none; }

}