:root {
  --ink: #0b0a09; --ink-soft: #11100e; --ink-raised: #181612;
  --ivory: #f2eee6; --ivory-soft: #c9c1b5; --muted: #898278;
  --brass: #c5a56a; --line: rgba(242,238,230,.16); --page: 1.25rem;
  --serif: Didot, "Bodoni 72", "Bodoni MT", "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif; color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; overflow-x: hidden; background: var(--ink); color: var(--ivory); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
main [id] { scroll-margin-top: 4.5rem; }
body::before { position: fixed; inset: 0; z-index: 20; pointer-events: none; content: ""; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }
button, a { color: inherit; } button { font: inherit; } a { text-decoration: none; } img { display: block; width: 100%; }
h1, h2, h3, p, blockquote, figure { margin: 0; } button { border: 0; } ::selection { background: var(--brass); color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 100; padding: .65rem .85rem; transform: translateY(-180%); background: var(--ivory); color: var(--ink); }
.skip-link:focus { transform: none; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; justify-content: space-between; height: 4.5rem; padding: 0 var(--page); border-bottom: 1px solid transparent; transition: background 300ms, border-color 300ms, height 300ms; }
.site-header.is-scrolled { height: 4rem; border-color: var(--line); background: rgba(11,10,9,.9); backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: .65rem; }
.brand-mark { width: 3.75rem; height: auto; flex: 0 0 auto; filter: invert(1); mix-blend-mode: screen; }
.brand-name { font-size: .63rem; font-weight: 500; letter-spacing: .15em; line-height: 1.2; text-transform: uppercase; }
.brand-name small { display: block; color: var(--ivory-soft); font-size: .48rem; letter-spacing: .22em; }
.desktop-nav { display: none; } .header-actions { display: flex; align-items: center; gap: 1rem; }
.language-button, .menu-button { padding: 0; background: transparent; color: var(--ivory); cursor: pointer; }
.language-button { font-size: .65rem; letter-spacing: .16em; } .menu-button { display: grid; gap: 5px; width: 1.55rem; }
.menu-button > span:not(.sr-only) { height: 1px; background: currentColor; }

.hero { position: relative; min-height: 92svh; overflow: hidden; background: #181510; }
.hero-image, .hero-shade { position: absolute; inset: 0; height: 100%; }
.hero-image { object-fit: cover; object-position: 54% center; animation: hero-in 1.7s cubic-bezier(.2,.7,.2,1) both; }
.hero-shade { background: linear-gradient(180deg,rgba(7,6,5,.44),rgba(7,6,5,.08) 34%,rgba(7,6,5,.78)),linear-gradient(90deg,rgba(7,6,5,.3),transparent 60%); }
.hero-copy { position: absolute; inset: auto var(--page) 5.8rem; z-index: 2; max-width: 47rem; }
.eyebrow, .section-kicker { color: var(--brass); font-size: .61rem; font-weight: 500; letter-spacing: .2em; line-height: 1.4; text-transform: uppercase; }
.hero h1 { max-width: 16ch; margin-top: 1rem; font: 400 clamp(3rem,13.5vw,5.4rem)/.91 var(--serif); letter-spacing: -.045em; }
.hero h1 em, .contact h2 em { color: var(--brass); font-weight: 400; }
.hero-actions { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.8rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: 0 1rem; border: 1px solid rgba(242,238,230,.5); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; transition: background 200ms,color 200ms,border-color 200ms; }
.button:hover { border-color: var(--ivory); background: var(--ivory); color: var(--ink); }
.text-link, .dark-link, .editorial-link { display: inline-flex; align-items: center; gap: .4rem; padding: 0; border-bottom: 1px solid currentColor; background: transparent; font-size: .67rem; letter-spacing: .08em; cursor: pointer; }
.hero-caption { position: absolute; right: var(--page); bottom: 1.4rem; z-index: 2; color: rgba(242,238,230,.74); font-size: .56rem; letter-spacing: .15em; text-transform: uppercase; }

.studio-line { display: flex; gap: 1.4rem; padding: 1.05rem var(--page); overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.studio-line::-webkit-scrollbar { display: none; }
.studio-line span { display: inline-flex; flex: 0 0 auto; align-items: center; color: var(--ivory-soft); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; }
.studio-line span:not(:last-child)::after { margin-left: 1.4rem; color: var(--brass); content: "◆"; font-size: .35rem; }

.work-intro, .comparison-section, .founder, .recognition, .services, .contact { padding: 5.5rem var(--page); }
.work-statement { margin-top: 1.2rem; }
.work-intro h2, .comparison-copy h2, .founder-heading h2, .craft h2, .recognition h2, .services h2, .contact h2 { font: 400 clamp(2.55rem,11vw,5.8rem)/.95 var(--serif); letter-spacing: -.045em; }
.work-statement > p { max-width: 33rem; margin-top: 1.5rem; color: var(--ivory-soft); font-size: .9rem; }
.project-edits { padding: 0 var(--page) 5.5rem; }
.project { position: relative; display: block; width: 100%; margin: 0 0 4rem; padding: 0; background: transparent; text-align: left; cursor: pointer; }
.project img { aspect-ratio: 3/2; object-fit: cover; background: var(--ink-raised); transition: filter 450ms,transform 800ms cubic-bezier(.2,.7,.2,1); }
.project::after { position: absolute; inset: 0 0 auto; height: calc(100% - 5.2rem); pointer-events: none; content: ""; background: linear-gradient(180deg,rgba(7,6,5,.2),transparent 25%,transparent 75%,rgba(7,6,5,.14)); }
.project-index { position: absolute; top: .8rem; left: .8rem; z-index: 2; display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid rgba(242,238,230,.55); border-radius: 50%; font-size: .55rem; letter-spacing: .08em; }
.project-meta { display: grid; gap: .65rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.project-meta p, .project-meta > span { color: var(--muted); font-size: .56rem; letter-spacing: .13em; text-transform: uppercase; }
.project-meta h3 { margin-top: .2rem; font: 400 1.75rem/1 var(--serif); }
.project-meta > span { justify-self: start; color: var(--ivory-soft); }
.project:hover img { filter: brightness(.9); transform: scale(1.012); }

.comparison-section { border-top: 1px solid var(--line); background: var(--ink-soft); }
.comparison-copy h2 { max-width: 10ch; margin-top: 1rem; }
.comparison-copy > p:last-child { max-width: 30rem; margin: 1.4rem 0 2.5rem; color: var(--ivory-soft); font-size: .88rem; }
.comparison { position: relative; aspect-ratio: 4/5; overflow: hidden; background: #201d18; }
.comparison-base, .comparison-after, .comparison-after img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparison-after { width: var(--position); overflow: hidden; } .comparison-after img { width: var(--compare-width); max-width: none; }
.comparison-divider { position: absolute; top: 0; bottom: 0; left: var(--position); width: 1px; background: var(--ivory); transform: translateX(-50%); }
.comparison-divider span { position: absolute; top: 50%; left: 50%; display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border: 1px solid var(--ivory); border-radius: 50%; background: rgba(11,10,9,.65); font-size: .8rem; transform: translate(-50%,-50%); backdrop-filter: blur(8px); }
.comparison-label { position: absolute; bottom: .75rem; z-index: 2; padding: .4rem .55rem; background: rgba(11,10,9,.74); font-size: .52rem; letter-spacing: .12em; text-transform: uppercase; }
.comparison-label-before { left: .75rem; } .comparison-label-after { right: .75rem; }
.comparison-range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }

.founder { display: grid; gap: 2.2rem; }
.founder-heading h2 { margin-top: .9rem; font-size: clamp(3.5rem,16vw,8rem); }
.founder-heading h2 em { color: var(--brass); font-weight: 400; }
.founder-portrait { position: relative; width: 86%; margin-left: auto; }
.founder-portrait img { aspect-ratio: 3/4; object-fit: cover; object-position: center top; filter: saturate(.82) contrast(1.03); }
.founder-portrait figcaption { margin-top: .55rem; color: var(--muted); font-size: .55rem; letter-spacing: .14em; text-align: right; text-transform: uppercase; }
.founder-copy p { max-width: 34rem; margin-top: 1.25rem; color: var(--ivory-soft); font-size: 1rem; }
.founder-copy .founder-intro { max-width: 22ch; margin-top: 0; color: var(--ivory); font: 400 1.65rem/1.2 var(--serif); letter-spacing: -.025em; }

.craft { position: relative; margin: 0 var(--page) 5.5rem; background: var(--ivory); color: var(--ink); }
.craft-image { position: relative; } .craft-image img { aspect-ratio: 4/5; object-fit: cover; }
.craft-image span { position: absolute; bottom: .7rem; left: .7rem; padding: .4rem .55rem; background: rgba(11,10,9,.78); color: var(--ivory); font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; }
.craft-copy { padding: 2rem 1.25rem 2.4rem; } .craft-copy .section-kicker { color: #856b3f; }
.craft h2 { margin-top: .9rem; font-size: clamp(2.4rem,10vw,4.8rem); }
.craft-copy > p:not(.section-kicker) { margin: 1.3rem 0 1.5rem; color: #504b43; font-size: .88rem; }
.editorial-link { color: var(--ink); }

.recognition { border-top: 1px solid var(--line); }
.recognition-heading h2 { max-width: 11ch; margin-top: 1rem; }
.award-list { margin: 3rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.award-list li { display: grid; grid-template-columns: 3.2rem 1fr; gap: .75rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.award-list time { color: var(--brass); font-size: .62rem; letter-spacing: .12em; }
.award-list h3 { font: 400 1.35rem/1.05 var(--serif); }
.award-list p { margin-top: .35rem; color: var(--ivory-soft); font-size: .7rem; line-height: 1.45; }
.press-line { margin-top: 2rem; color: var(--muted); font: 1rem/1.8 var(--serif); }
.press-line span { display: block; margin-bottom: .35rem; color: var(--brass); font: .55rem var(--sans); letter-spacing: .15em; text-transform: uppercase; }

.testimonial { display: grid; grid-template-columns: 4rem 1fr; gap: .5rem; margin: 0 var(--page) 5.5rem; padding: 2.5rem 0; border-top: 1px solid var(--brass); border-bottom: 1px solid var(--brass); }
.testimonial-mark { color: var(--brass); font: 6.5rem/.65 var(--serif); }
.testimonial blockquote { max-width: 22ch; margin-top: 1rem; font: 400 clamp(1.8rem,8vw,4.5rem)/1.07 var(--serif); letter-spacing: -.035em; }
.testimonial div > p:last-child { margin-top: 1.2rem; color: var(--muted); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; }

.services { border-top: 1px solid var(--line); background: var(--ink-soft); }
.services-heading h2 { margin-top: 1rem; }
.services-heading > p:last-child { max-width: 31rem; margin-top: 1.4rem; color: var(--ivory-soft); font-size: .88rem; }
.service-list { margin-top: 3.2rem; border-top: 1px solid var(--line); }
.service-list article { position: relative; padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.service-list span { display: block; color: var(--brass); font-size: .55rem; letter-spacing: .12em; }
.service-list h3 { margin-top: .45rem; font: 400 1.65rem var(--serif); }
.service-list p { max-width: 29rem; margin-top: .5rem; color: var(--muted); font-size: .75rem; }

.contact { min-height: 85svh; display: flex; flex-direction: column; justify-content: center; border-top: 1px solid var(--line); }
.contact h2 { margin-top: 1.1rem; font-size: clamp(3.2rem,13vw,8rem); }
.contact-actions { display: flex; align-items: center; gap: 1rem; margin-top: 2.2rem; }
.contact-details { display: grid; gap: 1.3rem; margin-top: 4rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.contact-details p { color: var(--ivory-soft); font-size: .72rem; }
.contact-details p > span:first-child { display: inline-block; margin-bottom: .4rem; color: var(--brass); font-size: .53rem; letter-spacing: .15em; text-transform: uppercase; }
.contact-details a:hover { color: var(--brass); }

footer { display: grid; gap: 1.5rem; padding: 2rem var(--page); border-top: 1px solid var(--line); color: var(--muted); font-size: .58rem; letter-spacing: .08em; }
.footer-brand { width: 8rem; opacity: .85; } .footer-brand img { height: auto; filter: invert(1); mix-blend-mode: screen; }
.mobile-menu { position: fixed; inset: 0; z-index: 25; padding: 8rem var(--page) 2rem; background: rgba(11,10,9,.98); }
.mobile-menu[hidden] { display: none; } .mobile-menu nav { display: grid; gap: .6rem; }
.mobile-menu a { font: 3rem/1.2 var(--serif); }

.project-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--ink); color: var(--ivory); }
.project-dialog::backdrop { background: rgba(0,0,0,.9); }
.project-dialog[open] { display: grid; grid-template-rows: minmax(0,58dvh) minmax(0,1fr); overflow: hidden; }
.dialog-close { position: fixed; top: .85rem; right: .85rem; z-index: 4; display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border: 1px solid rgba(242,238,230,.5); border-radius: 50%; background: rgba(11,10,9,.72); color: var(--ivory); font-size: 1.5rem; cursor: pointer; backdrop-filter: blur(8px); }
.dialog-image { display: grid; grid-template: minmax(0,1fr)/minmax(0,1fr); min-width: 0; min-height: 0; overflow: hidden; padding: 3.7rem .75rem .75rem; background: #070706; place-items: center; }
.dialog-image img { min-width: 0; min-height: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.dialog-copy { min-width: 0; min-height: 0; padding: 1.3rem var(--page) 2rem; overflow-y: auto; }
.dialog-copy h2 { margin-top: .35rem; font: 400 2.2rem/1 var(--serif); }
.dialog-description { max-width: 38rem; margin-top: .75rem; color: var(--ivory-soft); font-size: .76rem; }
.dialog-count { margin-top: 1rem; color: var(--brass); font-size: .58rem; letter-spacing: .14em; }
.dialog-thumbnails { display: flex; gap: .4rem; margin: .7rem calc(var(--page)*-1) 0; padding: 0 var(--page) .3rem; overflow-x: auto; scrollbar-width: thin; }
.dialog-thumb { flex: 0 0 4rem; height: 3rem; padding: 0; border: 1px solid transparent; background: transparent; opacity: .45; cursor: pointer; }
.dialog-thumb.is-active { border-color: var(--brass); opacity: 1; } .dialog-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dialog-controls { display: flex; gap: .55rem; margin-top: .9rem; }
.dialog-controls button { width: 2.5rem; height: 2.5rem; border: 1px solid var(--line); background: transparent; color: var(--ivory); cursor: pointer; }

.reveal { opacity: 0; transform: translateY(1.4rem); transition: opacity .85s,transform .85s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
@keyframes hero-in { from { opacity: 0; transform: scale(1.045); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }

@media (min-width:760px) {
  :root { --page: 3rem; }
  .site-header { height: 5.2rem; } .desktop-nav { display: flex; gap: 2rem; }
  .desktop-nav a { color: rgba(242,238,230,.78); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; }
  .desktop-nav a:hover { color: var(--ivory); } .menu-button { display: none; }
  .hero-copy { bottom: 7rem; } .hero-caption { bottom: 2rem; }
  .studio-line { justify-content: space-between; }
  .work-statement { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(17rem,.7fr); gap: 4rem; align-items: end; }
  .work-statement > p { margin: 0 0 .55rem; }
  .project-edits { display: grid; grid-template-columns: repeat(12,1fr); column-gap: 1.5rem; row-gap: 8rem; }
  .project { grid-column: span 6; margin: 0; } .feature-project { grid-column: 1/-1; }
  .feature-project img { aspect-ratio: 16/8.6; } .project:not(.feature-project) img { aspect-ratio: 3/2; }
  .project:nth-child(3) { margin-top: 9rem; } .concept-project { grid-column: 2/12; }
  .concept-project img { aspect-ratio: 16/9; }
  .project-meta { grid-template-columns: 1fr auto; align-items: end; } .project-meta > span { justify-self: end; }
  .comparison-section { display: grid; grid-template-columns: .72fr 1.28fr; gap: 5rem; align-items: center; }
  .comparison { aspect-ratio: 16/10; } .comparison-copy > p:last-child { margin-bottom: 0; }
  .founder { grid-template-columns: .7fr 1fr .8fr; align-items: end; gap: 3rem; }
  .founder-heading { align-self: start; } .founder-portrait { width: 100%; } .founder-copy { padding-bottom: 2rem; }
  .craft { display: grid; grid-template-columns: 1.3fr .7fr; align-items: stretch; }
  .craft-image img { height: 100%; aspect-ratio: auto; } .craft-copy { display: flex; flex-direction: column; justify-content: center; padding: 4rem; }
  .recognition { display: grid; grid-template-columns: .8fr 1.2fr; column-gap: 7rem; }
  .recognition-heading { grid-row: span 2; } .award-list { margin-top: 0; } .press-line { grid-column: 2; }
  .testimonial { grid-template-columns: 7rem 1fr; padding: 4rem 0; } .testimonial-mark { font-size: 10rem; }
  .services { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7rem; } .service-list { margin-top: 0; }
  .service-list article { display: grid; grid-template-columns: 2.5rem minmax(13rem,.7fr) 1fr; gap: 1rem; align-items: baseline; padding: 1.7rem 0; }
  .service-list h3, .service-list p { margin: 0; }
  .contact-details { grid-template-columns: repeat(3,1fr); }
  footer { grid-template-columns: 1fr auto 1fr; align-items: end; } footer > a:last-child { justify-self: end; }
  .project-dialog[open] { grid-template: minmax(0,1fr)/minmax(0,1.65fr) minmax(21rem,.62fr); }
  .dialog-image { padding: 2.5rem; } .dialog-copy { display: flex; flex-direction: column; justify-content: center; padding: 4rem 3rem 2rem; }
  .dialog-copy h2 { font-size: 3rem; }
  .dialog-copy > * { flex-shrink: 0; }
  .dialog-description { flex-shrink: 1; min-height: 0; overflow-y: auto; }
  .dialog-thumbnails { display: flex; margin: 1.5rem 0 0; padding: 0 0 .4rem; overflow-x: auto; }
  .dialog-thumb { width: 4rem; height: 3rem; }
}
@media (min-width:1200px) {
  :root { --page: clamp(4rem,6vw,7rem); } .site-header { padding-right: 3rem; padding-left: 3rem; }
  .work-intro,.comparison-section,.founder,.recognition,.services,.contact { padding-top: 8rem; padding-bottom: 8rem; }
  .project-edits { padding-bottom: 9rem; } .craft,.testimonial { margin-bottom: 8rem; }
}
[dir="rtl"] body { font-family: Tahoma,Arial,sans-serif; }
[dir="rtl"] .project,[dir="rtl"] .project-meta { text-align: right; }
[dir="rtl"] .project-index { right: .8rem; left: auto; }
[dir="rtl"] .studio-line span:not(:last-child)::after { margin-right: 1.4rem; margin-left: 0; }
[dir="rtl"] .founder-portrait { margin-right: auto; margin-left: 0; }
[dir="rtl"] .founder-portrait figcaption { text-align: left; }
[dir="rtl"] .comparison-label-before { right: .75rem; left: auto; }
[dir="rtl"] .comparison-label-after { right: auto; left: .75rem; }
[dir="rtl"] .dialog-close { right: auto; left: .85rem; }

.handmade { padding: 5.5rem var(--page); border-top: 1px solid var(--line); background: var(--ink-soft); }
.handmade-heading h2 { margin-top: 1rem; max-width: 14ch; font: 400 clamp(2.55rem,11vw,5.8rem)/.95 var(--serif); letter-spacing: -.045em; }
.handmade-intro { max-width: 32rem; margin-top: 1.5rem; color: var(--ivory-soft); font-size: .9rem; }
.handmade-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem .8rem; margin: 2.5rem 0; }
.handmade-piece { min-width: 0; padding: 0; background: transparent; text-align: start; cursor: pointer; }
.handmade-piece img { aspect-ratio: 4/5; object-fit: cover; transition: filter 250ms; }
.handmade-piece:hover img { filter: brightness(.85); }
.handmade-piece span { display: block; margin-top: .7rem; color: var(--ivory-soft); font-size: .65rem; letter-spacing: .06em; }
.handmade .editorial-link { color: var(--brass); }
@media (min-width:760px) {
  .handmade-heading { display: grid; grid-template-columns: 1.3fr 1fr; column-gap: 4rem; align-items: end; }
  .handmade-heading .section-kicker { grid-column: 1/-1; }
  .handmade-intro { margin-bottom: .5rem; }
  .handmade-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem 1.5rem; }
}
@media (min-width:1200px) { .handmade { padding-top: 8rem; padding-bottom: 8rem; } }