/* Two fonts only, both SIL Open Font License 1.1 — free for commercial and personal use.
   IBM Plex Sans: condensed masthead and menu.
   Inter: clean, normal-width text and headings. No serif family. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(../fonts/IBMPlexSans-Variable.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Inter-Regular.ttf) format('truetype');
}

/* A shared grid carries the wordmark, index, photograph and editorial sections. */
:root {
  --paper: #F6F6F5;
  --ink: #111110;
  --muted: #605E59;
  --sans: 'Inter', Arial, sans-serif;
  --display: 'IBM Plex Sans', Arial, sans-serif;
  --condensed: 75%;
  /* Condensed masthead with a neutral sans-serif reading face. */
  --cols: 6;
  --m: 20px;
  --g: 12px;
  --bar-h: 64px;
  --t-xs: .8125rem;
  --t-s: .9375rem;
  --t-m: 1.0625rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-m)/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
body.is-locked { overflow: hidden; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
::selection { background: var(--ink); color: var(--paper); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; left: var(--m); top: -100px; z-index: 100; padding: 12px; background: var(--ink); color: var(--paper); }
.skip:focus { top: 8px; }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--g); padding-inline: var(--m); }
.display-text { font-family: var(--sans); font-weight: 400; letter-spacing: -.035em; line-height: 1.12; }
.name, .menu__nav { font-family: var(--display); }

/* Quiet controls with a full 44px touch target. */
.bar { position: relative; z-index: 40; }
body.is-locked .bar { background: var(--paper); }
body.is-locked .bar__inner { position: fixed; top: 0; left: 0; right: 0; background: var(--paper); }
.bar__inner { max-width: 1600px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; column-gap: 12px; padding: 16px var(--m) 0; }
.bar .name { grid-column: 1; grid-row: 1; }
.bar .lang { grid-column: 1; grid-row: 2; justify-self: start; }
.bar .menu-btn { grid-column: 2; grid-row: 1; }
.lang { display: flex; margin-left: -8px; gap: 6px; font-size: 11px; }
.lang button { min-width: 32px; min-height: 32px; color: var(--muted); }
.lang button:hover, .lang button[aria-pressed="true"] { color: var(--ink); }
.lang button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.menu-btn { width: 44px; height: 44px; display: grid; place-items: center; justify-self: end; margin-right: -10px; }
.menu-btn__icon { grid-area: 1 / 1; width: 32px; height: 32px; }
.menu-btn__icon--close { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__icon--open { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__icon--close { display: block; }

.menu { position: fixed; inset: 0; z-index: 30; background: var(--paper); padding: calc(var(--bar-h) + 48px) var(--m) max(32px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; overflow-y: auto; gap: 40px; }
.menu[hidden] { display: none; }
.menu__nav { display: flex; flex-direction: column; width: 100%; }
.menu__nav a { width: fit-content; font-weight: 400; font-stretch: var(--condensed); text-transform: uppercase; letter-spacing: -.045em; font-size: clamp(3rem, 12vw, 8rem); line-height: 1.06; padding-block: 4px; }
.menu__nav a:hover { color: var(--muted); }
.menu__cta { display: flex; align-items: center; gap: 32px; min-height: 44px; font-size: var(--t-m); }
.menu__cta::after { content: '→'; font-size: 24px; }

/* Approved vertical-axis composition; quiet typography and a small original portrait. */
.name { min-width: 0; font-weight: 500; font-stretch: 75%; text-transform: uppercase; letter-spacing: -.035em; line-height: 1; white-space: nowrap; font-size: clamp(26px, 8vw, 35px); }
.name__inner { display: inline-block; transform: scaleX(.9); transform-origin: left top; }
.name__line { display: inline; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(460px, 1fr) auto; min-height: calc(100svh - var(--bar-h) - 12px); max-width: 1600px; margin-inline: auto; padding-top: 48px; padding-bottom: 16px; row-gap: 16px; }
.hero__stage { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); min-width: 0; }
.hero__disciplines { grid-column: 2; grid-row: 1; align-self: start; min-height: clamp(200px, 28svh, 250px); border-left: 1px solid #b9b8b3; padding-left: 12px; }
.hero__label { position: absolute; left: 0; top: clamp(200px, 28svh, 250px); transform: translateY(-100%) rotate(180deg); writing-mode: vertical-rl; color: var(--muted); text-transform: uppercase; font-family: var(--sans); font-size: 16px; font-weight: 400; line-height: 1; letter-spacing: .055em; white-space: nowrap; }
.index { font-family: var(--sans); font-size: 16px; font-weight: 400; line-height: 1.65; letter-spacing: -.025em; }
.index li + li { margin-top: 5px; }
.hero__portrait { grid-column: 2; grid-row: 1; justify-self: end; align-self: end; width: clamp(148px, 48vw, 184px); margin: 0; aspect-ratio: 7 / 8; position: relative; overflow: hidden; }
/* Unchanged original photo. Wider framing and extra headroom are achieved only by CSS. */
.hero__portrait img { position: absolute; width: 100%; max-width: none; height: auto; left: 0; top: -7%; }
.hero__contact { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 50px; padding-top: 14px; border-top: 1px solid var(--ink); text-transform: uppercase; font-family: var(--sans); font-size: 17px; font-weight: 400; line-height: 1.4; letter-spacing: -.025em; }
.hero__contact img { width: 24px; height: 24px; }
.hero__contact:hover { color: var(--muted); }
.hero__contact:focus-visible { outline-offset: 6px; }

/* Asymmetric approach grid, using the site's existing monochrome palette. */
.approach { max-width: 1600px; margin-inline: auto; padding-block: 88px; row-gap: 56px; }
.approach__title { grid-column: 1 / -1; font-family: var(--sans); font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.approach__steps { grid-column: 1 / -1; display: grid; gap: 52px; }
.approach__step { min-width: 0; }
.approach__number { display: block; margin-bottom: 16px; color: var(--muted); font-size: 15px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.approach__heading { max-width: 26ch; margin-bottom: 22px; font-size: clamp(22px, 6vw, 26px); font-weight: 400; line-height: 1.18; letter-spacing: -.025em; text-transform: uppercase; text-wrap: balance; }
.approach__text { max-width: 42ch; font-size: 16px; line-height: 1.65; letter-spacing: -.01em; }
@media (min-width: 768px) {
  .approach { padding-block: 104px; row-gap: 64px; }
  .approach__title { font-size: 14px; }
  .approach__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 40px; }
  .approach__step:first-child { grid-column: 1; }
  .approach__step:nth-child(2) { grid-column: 1; grid-row: 2; }
  .approach__step:nth-child(3) { grid-column: 2; grid-row: 2; }
  .approach__heading { font-size: 24px; }
  .approach__step:not(:first-child) .approach__heading { min-height: 2.36em; }
}
@media (min-width: 1024px) {
  .approach { padding-block: 120px; align-items: start; }
  .approach__title { grid-column: 1 / 6; padding-top: 1px; }
  .approach__steps { grid-column: 6 / -1; column-gap: 40px; row-gap: 72px; }
  .approach__heading { font-size: clamp(22px, 1.7vw, 27px); }
}

/* Editorial hierarchy: compact labels, expressive titles, readable supporting text. */
.section { max-width: 1600px; margin-inline: auto; padding-block: 64px; row-gap: 32px; }
.section__label { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 16px; font-size: var(--t-xs); font-weight: 400; line-height: 1.5; }
.section__number { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.services { grid-column: 1 / -1; display: grid; gap: 40px; }
.service { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px var(--g); }
.service__num { grid-column: 1 / -1; font-size: var(--t-xs); color: var(--muted); }
.service__title { grid-column: 1 / -1; font-size: clamp(1.75rem, 7.5vw, 2.25rem); text-wrap: pretty; }
.service__text { grid-column: 1 / -1; max-width: 34em; font-size: var(--t-s); line-height: 1.6; color: var(--muted); }
.section--pending { padding-block: 28px; row-gap: 12px; }
.section__note { grid-column: 1 / -1; max-width: 36em; font-size: var(--t-s); color: var(--muted); }
.about__content { grid-column: 1 / -1; }
.statement { max-width: 18ch; font-size: clamp(2.5rem, 10.5vw, 4rem); text-wrap: pretty; }
.about__text { max-width: 36em; margin-top: 28px; font-size: var(--t-s); line-height: 1.65; color: var(--muted); }
.contact { padding-top: 88px; }
.contact > .grid { row-gap: 32px; }
.contact__lead { grid-column: 1 / -1; max-width: 18ch; font-size: clamp(2.65rem, 11.25vw, 4.5rem); text-wrap: pretty; }
.contact__status { margin: 32px var(--m) 0; font-size: var(--t-xs); color: var(--muted); }
.contact__links { margin-top: 12px; row-gap: 4px; font-size: var(--t-s); }
.contact__links li { grid-column: span 3; }
.contact__links a { display: flex; align-items: center; min-height: 44px; width: fit-content; }
.contact__links a[aria-disabled="true"] { color: var(--muted); cursor: default; }
.contact__links a[href]:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer { align-items: center; row-gap: 16px; padding-block: 72px max(24px, env(safe-area-inset-bottom)); font-size: var(--t-xs); color: var(--muted); }
.footer p { grid-column: 1 / -1; }
.footer__top { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; min-height: 44px; width: fit-content; }
.footer__top:hover { color: var(--ink); }

@media (min-width: 768px) {
  :root { --m: 24px; --g: 16px; }
  .bar__inner { padding-top: 20px; }
  .bar .lang { grid-column: 2; grid-row: 2; justify-self: end; margin-left: 0; margin-right: -8px; }
  .name { font-size: 41px; }
  .hero { row-gap: 16px; padding-top: 64px; grid-template-rows: minmax(460px, 1fr) auto; }
  .hero__stage { grid-template-columns: 40px minmax(0, 1fr); }
  .hero__disciplines { padding-left: 20px; min-height: clamp(240px, 32svh, 300px); }
  .hero__label { left: 0; top: clamp(240px, 32svh, 300px); font-size: 20px; }
  .index { font-size: 20px; }
  .hero__portrait { width: clamp(200px, 25vw, 320px); }
  .hero__contact { font-size: 20px; }
  .section { padding-block: 88px; }
  .section--pending { padding-block: 32px; }
  .services, .about__content, .section__note { grid-column: 2 / -1; }
  .statement { font-size: 4rem; }
  .contact__lead { grid-column: 2 / -1; }
  .footer p { grid-column: 1 / 5; }
  .footer__top { grid-column: 5 / -1; justify-self: end; }
}
@media (min-width: 1024px) {
  :root { --cols: 12; --m: clamp(32px, 4vw, 72px); --g: 24px; }
  .name { font-size: clamp(44px, 3.8vw, 52px); }
  .bar__inner { padding-top: 24px; }
  .hero { padding-top: 72px; padding-bottom: 24px; }
  .hero__stage { grid-template-columns: 48px minmax(0, 1fr); }
  .hero__label { left: 0; }
  .index { font-size: 22px; line-height: 1.65; }
  .section { padding-block: 104px; row-gap: 0; }
  .section__label { grid-column: 1 / 3; padding-top: 10px; }
  .services { grid-column: 4 / -1; gap: 48px; }
  .service { grid-template-columns: repeat(9, minmax(0, 1fr)); align-items: start; }
  .service__num { grid-column: 1; grid-row: 1; padding-top: 12px; }
  .service__title { grid-column: 2 / 7; grid-row: 1; font-size: clamp(2.5rem, 3.6vw, 3.5rem); }
  .service__text { grid-column: 2 / 7; font-size: 16px; }
  .section--pending { padding-block: 32px; }
  .section__note { grid-column: 5 / 11; padding-top: 10px; }
  .about__content { grid-column: 5 / -1; }
  .statement { font-size: clamp(2.5rem, 3.6vw, 3.5rem); }
  .about__text { margin-top: 32px; max-width: 38em; font-size: var(--t-m); }
  .contact { padding-top: 104px; }
  .contact__lead { grid-column: 5 / -1; font-size: clamp(3rem, 4.6vw, 4.5rem); }
  .contact__status { margin-left: calc(var(--m) + (100% - 2 * var(--m) + var(--g)) / 3); margin-top: 40px; }
  .contact__links li { grid-column: span 2; }
  .contact__links li:first-child { grid-column: 5 / span 2; }
  .footer { padding-top: 88px; }
  .footer p { grid-column: 1 / 7; }
  .footer__top { grid-column: 10 / -1; }
  .menu { padding-left: calc(var(--m) + (100% - 2 * var(--m) + var(--g)) / 4); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}


/* Framed editorial sections; the hero stays open. */
main > section:not(.hero) {
 width:calc(100% - 2 * var(--frame-margin));
 max-width:1552px;
 margin:24px auto;
 border:1px solid #d0d2d3;
 background:#fff;
}
:root { --frame-margin:12px; }
main > .contact { padding-bottom:32px; }
.work { grid-column:1 / -1; min-width:0; margin-top:32px; border:1px solid #d0d2d3; background:#fff; }
.work__header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px; padding:16px 20px; border-bottom:1px solid #d0d2d3; }
.work__label { color:var(--ink); font-size:13px; font-weight:400; line-height:1.5; letter-spacing:.02em; text-transform:uppercase; }
.work__motion { min-height:44px; font-size:12px; text-decoration:underline; text-underline-offset:4px; color:var(--muted); }
.work__motion[hidden] { display:none; }
.work__list { display:grid; gap:40px; padding:32px 20px; background-color:#fff; background-image:linear-gradient(#e1e5e8 1px,transparent 1px),linear-gradient(90deg,#e1e5e8 1px,transparent 1px); background-size:24px 24px; }
.work__case { min-width:0; }
.work__link { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; height:100%; align-content:start; }
.work__number { font-size:12px; color:var(--muted); }
.work__info { min-width:0; }
.work__name { display:block; font-size:20px; line-height:1.25; letter-spacing:-.025em; }
.work__type { display:block; margin-top:8px; font-size:14px; line-height:1.5; }
.work__showcase { display:block; width:100%; max-width:250px; margin:12px auto 0; }
.work__mobile-window { display:block; position:relative; width:100%; aspect-ratio:390 / 844; overflow:hidden; background:#fff; }
.work__live { position:absolute; left:0; top:0; width:390px; height:844px; border:0; transform-origin:top left; pointer-events:none; }
.work__visit { display:flex; align-items:center; gap:8px; width:fit-content; min-height:44px; font-size:14px; text-decoration:underline; text-underline-offset:5px; }
.work__visit img { width:18px; height:18px; }
.work__link:hover .work__visit { color:var(--muted); }
.work__link:focus-visible { outline-offset:8px; }
@media(min-width:768px) {
 :root { --frame-margin:24px; }
 main > section:not(.hero) { margin-block:32px; }
 .work__list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 40px; padding:40px 28px; }
 .work__info { min-height:84px; }
 .work__showcase { max-width:230px; margin:0; }
 .services { grid-column:1 / -1; }
}
@media(min-width:1100px) {
 .work__list { grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(40px,5vw,80px); padding:48px 40px; }
 .service { grid-template-columns:repeat(12,minmax(0,1fr)); }
 .section#services { row-gap:32px; }
 .service__num { grid-column:1; }
 .service__title,.service__text { grid-column:2 / 9; }
}
@media(prefers-reduced-motion:reduce) { .work__motion { display:none; } }

@media(min-width:1100px) { .work__list { background-image:linear-gradient(#e5e8eb 1.5px,transparent 1.5px),linear-gradient(90deg,#e5e8eb 1.5px,transparent 1.5px); } }

/* One white surface, one section frame; no nested portfolio panel. */
:root { --paper:#fff; }
.work { border:0; background:none; }
.work__header { border:0; padding:0; margin-bottom:24px; }
.work__list { background:none; padding:0; }
.reviews__list { grid-column:1 / -1; min-width:0; }
.review { margin:0; padding:32px 0; }
.review + .review { border-top:1px solid #d0d2d3; }
.review__byline { display:flex; flex-direction:column; gap:6px; margin-bottom:24px; }
.review__name { font-size:17px; }
.review__project,.review__note { font-size:12px; line-height:1.5; color:var(--muted); }
.review blockquote { margin:0; max-width:54ch; font-size:clamp(17px,1.55vw,22px); line-height:1.6; letter-spacing:-.015em; }
.review blockquote p + p { margin-top:20px; }
.review__note { display:block; margin-top:24px; }
@media(min-width:1024px) {
 .reviews__list { grid-column:4 / -1; }
 .review:first-child { padding-top:0; }
 .review { padding-block:40px; }
}

/* Related content shares an axis; each service gets a single frame. */
main > #services { border:0; padding:32px 0 0; row-gap:24px; }
.services__heading { grid-column:1 / -1; font-size:clamp(32px,4vw,52px); padding-inline:20px; }
#services .services { gap:24px; }
#services .service { position:relative; isolation:isolate; overflow:hidden; border:1px solid #d0d2d3; padding:28px 20px; grid-template-columns:minmax(0,1fr); gap:16px; }
#services .service__title { grid-column:1; grid-row:auto; font-size:clamp(26px,3vw,42px); max-width:26ch; }
#services .service__text { grid-column:1; max-width:52ch; }
#services .work { position:relative; isolation:isolate; margin-top:12px; padding-top:12px; }
.work__header { margin-bottom:24px; }
.work__name,.work__type,.work__visit,.work__number { background:#fff; width:fit-content; max-width:100%; }
@media(min-width:768px) {
 #services .services { gap:32px; }
 #services .service { padding:40px 32px; gap:18px; }
 .services__heading { padding-inline:32px; }
 #services .work { margin-top:16px; }
}
@media(min-width:1100px) {
 #services .service { padding:40px 56px; }
 .services__heading { padding-inline:56px; }
 .work__info { min-height:72px; }
}

/* Compact section rhythm and contact details on the same content axis. */
main > section:not(.hero) { margin-block:20px; }
.approach { padding-block:40px; row-gap:28px; }
.approach__steps { gap:32px; }
.section:not(#services) { padding-block:40px; row-gap:24px; }
main > #services { padding-top:12px; }
#services .work { margin-top:4px; padding-top:4px; }
.review { padding-block:24px; }
.review:first-child { padding-top:0; }
.review:last-child { padding-bottom:0; }
.review__byline { margin-bottom:16px; }
main > .contact { padding-block:40px; }
.contact > .grid { row-gap:20px; }
.contact__lead { font-size:clamp(30px,5vw,52px); }
.contact__links { margin-top:20px; }
.contact__links li,.contact__links li:first-child { grid-column:1 / -1; }
.contact__links a { display:flex; flex-wrap:wrap; gap:6px 16px; padding-block:8px; border-bottom:1px solid var(--ink); }
.contact__links a span:first-child { font-weight:500; }
.footer { padding-top:24px; }
@media(min-width:768px) {
 main > section:not(.hero) { margin-block:24px; }
 .approach,.section:not(#services),main > .contact { padding-block:56px; }
 .approach__steps { gap:40px; }
 .contact__lead { grid-column:1 / -1; }
}
@media(min-width:1024px) {
 .section:not(#services) { row-gap:0; }
 .contact__lead,.contact__links li:first-child { grid-column:4 / -1; }
 .contact .section__label { grid-column:1 / 3; }
}

/* About: an editorial statement with a readable measure. */
.about__content .statement { font-size:clamp(28px,3vw,44px); line-height:1.2; max-width:26ch; }
.about__text { margin-top:20px; }
.about__text + .about__text { margin-top:16px; }