:root {
  --px-ink: #111111;
  --px-paper: #f7f7f4;
  --px-white: #ffffff;
  --px-muted: #6d6d68;
  --px-subheading: #979797;
  --px-line: #dfdfd8;
  --px-accent: #6d86cc;
  --px-accent-soft: #e8ecf8;
  --px-radius: 28px;
  --px-radius-lg: 40px;
  --px-shell: min(1240px, calc(100vw - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--px-paper); color: var(--px-ink); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body.nav-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; transition: opacity .2s ease, transform .2s ease, background-color .2s ease; }
a:hover { opacity: .72; }
button, input, textarea, select { font: inherit; }

.px-skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; background: var(--px-ink); color: var(--px-white); padding: 10px 14px; border-radius: 10px; }
.px-skip-link:focus { top: 16px; }
.px-shell { width: var(--px-shell); margin-inline: auto; }
.px-section { padding: clamp(72px, 10vw, 140px) 0; }
.px-section--tight { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 88px); }
.px-section--muted { background: #efefea; }
.px-eyebrow { display: inline-block; font-size: .78rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 800; margin-bottom: 18px; }
.px-lead { max-width: 760px; font-size: clamp(1.12rem, 2vw, 1.55rem); line-height: 1.45; color: var(--px-muted); }
.px-lead--light { color: #c8c8c2; }
.px-grid { display: grid; gap: 24px; }
.px-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.px-card { border: 1px solid var(--px-line); border-radius: var(--px-radius); padding: clamp(26px,4vw,44px); background: rgba(255,255,255,.56); }
.px-card h3 { font-size: 1.65rem; margin-top: 8px; }
.px-card--dark { background: var(--px-ink); color: var(--px-white); border-color: var(--px-ink); }
.px-price { font-size: clamp(2.2rem, 4vw, 4rem); letter-spacing: -.055em; font-weight: 750; margin: 26px 0 4px; }
.px-plan-label { display: inline-flex; padding: 7px 10px; border-radius: 999px; background: var(--px-accent-soft); color: #39508d; font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.px-card--dark .px-plan-label { background: var(--px-white); color: var(--px-ink); }
.px-check-list { list-style: none; padding: 0; margin: 28px 0; display: grid; gap: 10px; }
.px-check-list li::before { content: '✓'; display: inline-block; width: 1.4em; color: var(--px-accent); font-weight: 800; }
.px-card--dark .px-check-list li::before { color: #aebcf0; }

.site-header { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(16px); background: rgba(247,247,244,.84); border-bottom: 1px solid rgba(17,17,17,.06); }
.site-header__inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.18rem; font-weight: 850; letter-spacing: -.045em; text-decoration: none; }
.site-brand__logo {
    display: block;
    width: 150px;
    height: auto;
}

.site-nav ul { display: flex; gap: 24px; align-items: center; list-style: none; margin: 0; padding: 0; }
.site-nav a { font-size: .94rem; font-weight: 700; text-decoration: none; }
.site-nav-toggle { display: none; width: 46px; height: 46px; border: 1px solid var(--px-line); border-radius: 50%; background: transparent; padding: 0; position: relative; }
.site-nav-toggle span { position: absolute; left: 13px; width: 18px; height: 2px; background: var(--px-ink); transition: transform .2s ease, top .2s ease; }
.site-nav-toggle span:first-child { top: 18px; }
.site-nav-toggle span:last-child { top: 25px; }
.nav-open .site-nav-toggle span:first-child { top: 22px; transform: rotate(45deg); }
.nav-open .site-nav-toggle span:last-child { top: 22px; transform: rotate(-45deg); }

.px-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; border-radius: 999px; padding: 0 20px; font-weight: 750; border: 1px solid var(--px-ink); background: var(--px-ink); color: var(--px-white); text-decoration: none; cursor: pointer; }
.px-button:hover { transform: translateY(-1px); opacity: .88; }
.px-button--ghost { background: transparent; color: var(--px-ink); }
.px-button--light { background: var(--px-white); color: var(--px-ink); border-color: var(--px-white); }
.px-text-link { display: inline-flex; font-weight: 800; text-decoration: none; }

.px-hero { min-height: calc(100svh - 78px); display: grid; align-items: center; padding: clamp(72px, 9vw, 120px) 0; }
.px-hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(36px, 7vw, 96px); }
.px-hero h1 { margin: 0 0 28px; font-size: clamp(3.4rem, 7.8vw, 7.7rem); line-height: .91; letter-spacing: -.07em; max-width: 9ch; }
.px-hero h1 span { display: block; color: var(--px-accent); }
.px-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.px-visual { border-radius: 36px; background: var(--px-ink); color: var(--px-white); min-height: 540px; padding: 32px; position: relative; overflow: hidden; isolation: isolate; }
.px-visual::after { content: ''; position: absolute; width: 330px; height: 330px; right: -90px; bottom: -90px; border-radius: 50%; background: var(--px-accent); z-index: -1; }
.px-visual__grid { position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.8) 1px, transparent 1px); background-size: 48px 48px; }
.px-visual__label { position: relative; z-index: 2; max-width: 10ch; font-size: clamp(2.5rem,4.5vw,4.6rem); font-weight: 750; line-height: .92; letter-spacing: -.06em; }
.px-visual__stamp { position: absolute; left: 32px; bottom: 30px; z-index: 2; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.px-marquee { border-block: 1px solid var(--px-line); padding: 18px 0; overflow: hidden; white-space: nowrap; font-weight: 750; }

.px-section-heading { display: grid; grid-template-columns: 1fr .9fr; align-items: end; gap: 48px; margin-bottom: 48px; }
.px-section-heading h2, .px-page-hero h1 { margin: 0; font-size: clamp(3rem, 6vw, 6.5rem); line-height: .94; letter-spacing: -.065em; max-width: 10ch; }
.px-section-heading .px-lead { margin: 0; }
.px-section-action { margin-top: 32px; }

.px-project-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.px-project-card { grid-column: span 6; border-radius: var(--px-radius); overflow: hidden; background: var(--px-white); border: 1px solid var(--px-line); }
.px-project-grid--home .px-project-card:nth-child(1) { grid-column: span 7; }
.px-project-grid--home .px-project-card:nth-child(2) { grid-column: span 5; }
.px-project-grid--home .px-project-card:nth-child(3) { grid-column: span 12; display: grid; grid-template-columns: 1.35fr .65fr; }
.px-project-card__link { display: block; text-decoration: none; height: 100%; }
.px-project-card__media { min-height: 340px; background: #e9e9e4; overflow: hidden; }
.px-project-card__media img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; transition: transform .45s ease; }
.px-project-card:hover .px-project-card__media img { transform: scale(1.02); }
.px-project-card__placeholder { min-height: 340px; display: grid; place-items: center; background: linear-gradient(135deg, #e9e9e4, #dde3f4); }
.px-project-card__placeholder span { font-size: clamp(4rem, 10vw, 8rem); font-weight: 850; letter-spacing: -.08em; color: var(--px-accent); }
.px-project-card__body { padding: 24px; }
.px-project-card__body h3 { margin: 8px 0 10px; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1; letter-spacing: -.04em; }
.px-project-card__body p { color: var(--px-muted); }
.px-project-card__meta { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--px-muted); }
.px-project-grid--home .px-project-card:nth-child(3) .px-project-card__link { display: contents; }

.px-band { background: var(--px-ink); color: var(--px-white); border-radius: var(--px-radius-lg); padding: clamp(40px,7vw,84px); }
.px-band h2 { max-width: 10ch; font-size: clamp(3rem,7vw,6rem); margin: 0 0 24px; line-height: .94; letter-spacing: -.06em; }
.px-band__grid { margin-top: 52px; }
.px-band__grid > div { border-top: 1px solid rgba(255,255,255,.17); padding-top: 22px; }
.px-band__grid p { color: #c8c8c2; }
.px-index { font-size: .78rem; color: #aebcf0; letter-spacing: .1em; font-weight: 800; }
.px-band--cta { min-height: 420px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }

.px-pricing-grid .px-card { display: flex; flex-direction: column; align-items: flex-start; }
.px-pricing-grid .px-card .px-button { margin-top: auto; }
.px-process { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(48px, 9vw, 120px); }
.px-process__intro h2 { font-size: clamp(3rem, 6vw, 6rem); line-height: .94; letter-spacing: -.06em; margin: 0 0 24px; }
.px-process__steps { list-style: none; padding: 0; margin: 0; }
.px-process__steps li { display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding: 28px 0; border-top: 1px solid var(--px-line); }
.px-process__steps li:last-child { border-bottom: 1px solid var(--px-line); }
.px-process__steps > li > span { font-size: .8rem; font-weight: 800; color: var(--px-accent); }
.px-process__steps h3 { margin: 0 0 8px; font-size: 1.45rem; }
.px-process__steps p { margin: 0; color: var(--px-muted); }

.px-page-hero { padding: clamp(100px, 14vw, 180px) 0 clamp(64px, 8vw, 100px); }
.px-page-hero .px-lead { margin-top: 28px; }
.px-content { max-width: 900px; padding-bottom: clamp(64px, 10vw, 120px); font-size: 1.08rem; }
.px-content > * + * { margin-top: 1.4em; }
.px-content h2 { font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1; letter-spacing: -.045em; margin-top: 2em; }
.px-content h3 { font-size: 1.6rem; }
.px-content p, .px-content li { line-height: 1.7; }
.px-project-hero__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: end; }
.px-project-hero__media { border-radius: var(--px-radius); overflow: hidden; }
.px-pagination { margin-top: 40px; }

.px-contact-intro { display: grid; grid-template-columns: 1fr .9fr; gap: 48px; align-items: end; }
.px-contact-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(40px, 8vw, 100px); }
.px-contact-aside h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); margin-top: 0; letter-spacing: -.05em; }
.px-contact-aside p { color: var(--px-muted); line-height: 1.6; }
.px-contact-form { display: grid; gap: 22px; }
.px-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.px-contact-form label { display: grid; gap: 8px; font-weight: 700; }
.px-form-span { grid-column: 1 / -1; }
.px-contact-form input, .px-contact-form textarea, .px-contact-form select { width: 100%; border: 1px solid var(--px-line); background: var(--px-white); border-radius: 14px; padding: 14px 15px; outline: none; }
.px-contact-form input:focus, .px-contact-form textarea:focus, .px-contact-form select:focus { border-color: var(--px-accent); box-shadow: 0 0 0 3px rgba(109,134,204,.15); }
.px-check { display: flex !important; grid-template-columns: none !important; align-items: flex-start; gap: 10px !important; font-weight: 500 !important; font-size: .92rem; }
.px-check input { width: auto; margin-top: 4px; }
.px-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.px-notice { border-radius: 14px; padding: 14px 16px; margin-bottom: 20px; }
.px-notice--success { background: #e8f6ec; }
.px-notice--error { background: #f9e7e7; }

.px-pattern-hero, .px-pattern-benefits, .px-pattern-pricing, .px-faq { margin-block: clamp(56px, 8vw, 100px); }
.px-faq details { border-top: 1px solid var(--px-line); padding: 22px 0; }
.px-faq details:last-child { border-bottom: 1px solid var(--px-line); }
.px-faq summary { cursor: pointer; font-weight: 800; font-size: 1.15rem; }

.site-footer { padding: 78px 0 32px; border-top: 1px solid var(--px-line); }
.site-footer__top { display: flex; align-items: baseline; justify-content: space-between; gap: 30px; margin-bottom: 52px; }
.site-footer__brand { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 850; letter-spacing: -.065em; text-decoration: none; }
.site-footer__top p { color: var(--px-muted); }
.site-footer__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; }
.site-footer ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 9px; }
.site-footer a { text-decoration: none; }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 40px; margin-top: 40px; border-top: 1px solid var(--px-line); font-size: .88rem; color: var(--px-muted); }

@media (max-width: 980px) {
  .site-header { backdrop-filter: none; background: rgba(247,247,244,.98); }
  .site-header__inner { min-height: 72px; }
  .site-header__cta { display: none; }
  .site-nav-toggle { display: inline-block; flex: 0 0 46px; z-index: 3; }

  /* Mobile navigation: anchored to the header instead of position:fixed.
     This avoids iOS/Safari issues caused by fixed descendants of backdrop-filter elements. */
  .site-nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    height: calc(100dvh - 72px);
    padding: 18px 0 32px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--px-paper);
    border-top: 1px solid var(--px-line);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index: 2;
  }
  .nav-open .site-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .site-nav > ul {
    width: var(--px-shell);
    margin: 0 auto;
    padding: 0;
    display: block;
  }
  .site-nav > ul > li { border-bottom: 1px solid var(--px-line); }
  .site-nav > ul > li:first-child { border-top: 0; }
  .site-nav > ul > li > a {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 14px 0;
    font-size: clamp(1.35rem, 5.8vw, 1.75rem);
    line-height: 1.05;
    letter-spacing: -.035em;
  }
  .site-nav .sub-menu {
    display: grid;
    width: 100%;
    gap: 0;
    margin: -4px 0 12px;
    padding: 0 0 4px 18px;
  }
  .site-nav .sub-menu li { border: 0; }
  .site-nav .sub-menu a {
    display: block;
    padding: 9px 0;
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 650;
    color: var(--px-muted);
  }
  .px-hero__grid, .px-section-heading, .px-process, .px-contact-intro, .px-contact-layout, .px-project-hero__grid { grid-template-columns: 1fr; }
  .px-grid--3, .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .px-visual { min-height: 420px; }
  .px-project-grid--home .px-project-card:nth-child(n), .px-project-card { grid-column: 1 / -1; }
  .px-project-grid--home .px-project-card:nth-child(3) { display: block; }
  .px-project-grid--home .px-project-card:nth-child(3) .px-project-card__link { display: block; }
}

@media (max-width: 640px) {
  :root { --px-shell: min(100% - 28px, 1240px); --px-radius: 22px; --px-radius-lg: 28px; }
  .px-section { padding: 72px 0; }
  .site-brand { position: relative; z-index: 3; }
  .site-brand {
    position: relative;
    z-index: 3;
}

.site-brand__logo {
    width: 125px;
}
  .px-hero { min-height: auto; padding-top: 66px; }
  .px-hero h1 { font-size: clamp(3rem, 15vw, 4.7rem); }
  .px-visual { min-height: 320px; border-radius: 28px; }
  .px-grid--3, .site-footer__grid, .px-form-grid { grid-template-columns: 1fr; }
  .px-form-span { grid-column: auto; }
  .px-section-heading { gap: 20px; }
  .px-section-heading h2, .px-page-hero h1 { font-size: clamp(2.8rem, 14vw, 4.5rem); }
  .px-project-card__media, .px-project-card__media img, .px-project-card__placeholder { min-height: 260px; }
  .site-footer__top, .site-footer__bottom { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Commercial pages v0.3 */
.px-service-hero { padding: clamp(72px,10vw,132px) 0 clamp(56px,8vw,100px); overflow:hidden; }
.px-service-hero__grid { display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:clamp(40px,7vw,100px); }
.px-service-hero h1 { margin:0 0 28px; max-width:11ch; font-size:clamp(3.5rem,7.2vw,7rem); line-height:.93; letter-spacing:-.065em; }
.px-service-hero__visual { min-height:440px; border-radius:var(--px-radius-lg); background:var(--px-accent); padding:clamp(24px,4vw,48px); display:grid; place-items:center; position:relative; }
.px-service-hero__visual::before { content:''; position:absolute; inset:28px; border:1px solid rgba(255,255,255,.35); border-radius:24px; }
.px-service-hero__window { width:min(100%,480px); aspect-ratio:1.2; background:var(--px-paper); border-radius:18px; padding:16px; box-shadow:0 28px 80px rgba(17,17,17,.18); transform:rotate(-3deg); }
.px-service-hero__window>span { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--px-line); margin-right:5px; }
.px-service-hero__mock { margin-top:16px; background:var(--px-ink); height:calc(100% - 32px); border-radius:11px; padding:28px; color:white; display:flex; flex-direction:column; gap:14px; }
.px-service-hero__mock b { font-size:clamp(1.7rem,4vw,3.3rem); letter-spacing:-.06em; margin-bottom:auto; }
.px-service-hero__mock i { height:8px; background:rgba(255,255,255,.25); border-radius:10px; width:80%; }
.px-service-hero__mock i:nth-of-type(2){width:62%}.px-service-hero__mock i:nth-of-type(3){width:42%;background:var(--px-accent)}
.px-number-card>span { font-size:.8rem; font-weight:850; color:var(--px-accent); letter-spacing:.08em; }
.px-number-card h2 { font-size:clamp(1.45rem,2vw,2rem); letter-spacing:-.04em; }
.px-number-card p,.px-commercial-plans .px-card>p,.px-process--commercial p,.px-faq details p { color:var(--px-muted); line-height:1.65; }
.px-card--dark>p { color:#c8c8c2!important; }
.px-commercial-plans { align-items:stretch; margin-top:48px; }
.px-commercial-plans .px-card { display:flex; flex-direction:column; }
.px-commercial-plans .px-check-list { flex:1; }
.px-process--commercial { grid-template-columns:repeat(4,1fr); gap:0; margin-top:46px; border-top:1px solid var(--px-line); }
.px-process--commercial>div { padding:28px 28px 0 0; border-right:1px solid var(--px-line); min-height:220px; }
.px-process--commercial>div+div { padding-left:28px; }
.px-process--commercial>div:last-child { border-right:0; }
.px-process--commercial span { font-size:.8rem; font-weight:850; color:var(--px-accent); }
.px-process--commercial h3 { font-size:1.5rem; letter-spacing:-.04em; margin:40px 0 8px; }
.px-faq>h2 { font-size:clamp(2.5rem,5vw,5rem); letter-spacing:-.06em; max-width:12ch; margin:0 0 44px; }
@media(max-width:980px){.px-service-hero__grid{grid-template-columns:1fr}.px-service-hero__visual{min-height:360px}.px-process--commercial{grid-template-columns:1fr 1fr}.px-process--commercial>div:nth-child(2){border-right:0}.px-process--commercial>div:nth-child(3),.px-process--commercial>div:nth-child(4){border-top:1px solid var(--px-line)}}
@media(max-width:640px){.px-service-hero h1{font-size:clamp(3rem,14vw,4.6rem)}.px-service-hero__visual{min-height:280px}.px-process--commercial{grid-template-columns:1fr}.px-process--commercial>div,.px-process--commercial>div+div{padding:24px 0;border-right:0;border-top:1px solid var(--px-line);min-height:0}.px-process--commercial h3{margin:18px 0 6px}}

/* Portfolio system v0.4 */
.px-project-card__media { aspect-ratio: 4 / 3; min-height: 0; }
.px-project-card__media img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.px-project-card__placeholder { min-height: 0; height: 100%; }
.px-project-grid--archive .px-project-card { grid-column: span 6; }
.px-project-archive-hero__grid { display:grid; grid-template-columns:1fr .85fr; gap:clamp(32px,7vw,96px); align-items:end; }
.px-project-archive-hero__grid .px-lead { margin:0; }

.px-project-intro { padding:clamp(88px,12vw,150px) 0 clamp(72px,9vw,112px); }
.px-project-intro__grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:clamp(48px,8vw,120px); align-items:end; }
.px-project-intro__copy h1 { margin:0; max-width:11ch; font-size:clamp(4rem,8vw,8rem); line-height:.9; letter-spacing:-.07em; }
.px-project-intro__copy .px-lead { margin:30px 0 0; max-width:690px; }
.px-project-facts { margin:0; display:grid; grid-template-columns:1fr 1fr; gap:24px 28px; }
.px-project-facts div { border-top:1px solid var(--px-line); padding-top:13px; }
.px-project-facts dt { margin:0 0 7px; font-size:.72rem; text-transform:uppercase; letter-spacing:.11em; font-weight:850; color:var(--px-muted); }
.px-project-facts dd { margin:0; font-size:.98rem; line-height:1.45; font-weight:650; }
.px-project-facts a { text-underline-offset:4px; }
.px-project-facts__url { grid-column:1/-1; }
.px-project-hero-media { margin:clamp(52px,7vw,92px) 0 0; border-radius:var(--px-radius-lg); overflow:hidden; background:#e9e9e4; }
.px-project-hero-media img { width:100%; aspect-ratio:8/5; object-fit:cover; }

.px-project-content { padding-bottom:clamp(72px,10vw,140px); }
.px-project-content > * { width:min(760px,calc(100% - 40px)); margin-left:auto; margin-right:auto; }
.px-project-content > .alignwide { width:var(--px-shell); max-width:none; }
.px-project-content > .alignfull { width:100%; max-width:none; }
.px-project-content > * + * { margin-top:1.45em; }
.px-project-content > h2,
.px-project-content .px-project-copy h2 { margin-top:clamp(80px,10vw,140px); font-size:clamp(2.6rem,5.8vw,5.6rem); line-height:.95; letter-spacing:-.06em; }
.px-project-content h3 { font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.05; letter-spacing:-.04em; color:var(--px-subheading); }
.px-project-content p,
.px-project-content li { font-size:clamp(1.02rem,1.4vw,1.15rem); line-height:1.72; }
.px-project-content figure { margin-top:clamp(40px,6vw,76px); margin-bottom:clamp(40px,6vw,76px); }
.px-project-content figure img { border-radius:var(--px-radius); }
.px-project-content .wp-block-image.alignwide img,
.px-project-content .wp-block-image.alignfull img { width:100%; }

/* Gutenberg project patterns */
.px-project-copy { margin-top:clamp(70px,9vw,120px)!important; margin-bottom:clamp(46px,6vw,80px)!important; }
.px-project-copy > * { max-width:760px; }
.px-project-copy > :first-child { margin-top:0!important; }
.px-project-media-full { margin-top:clamp(48px,7vw,96px)!important; margin-bottom:clamp(48px,7vw,96px)!important; }
.px-project-media-full img { width:100%; border-radius:var(--px-radius-lg)!important; }
.px-project-media-pair { gap:24px; margin-top:clamp(48px,7vw,96px)!important; margin-bottom:clamp(48px,7vw,96px)!important; }
.px-project-media-pair figure { margin:0!important; }
.px-project-media-pair img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.px-project-device-grid { display:grid!important; grid-template-columns:minmax(0,1.45fr) minmax(220px,.55fr); align-items:end; gap:clamp(24px,5vw,70px); margin-top:clamp(48px,7vw,96px)!important; margin-bottom:clamp(48px,7vw,96px)!important; }
.px-project-device-grid figure { margin:0!important; }
.px-project-device-grid .px-project-device-mobile img { max-height:680px; width:auto; margin-left:auto; }
.px-project-quote { padding:clamp(34px,6vw,72px); background:var(--px-ink); color:var(--px-white); border-radius:var(--px-radius-lg); margin-top:clamp(64px,8vw,110px)!important; margin-bottom:clamp(64px,8vw,110px)!important; }
.px-project-quote p { margin:0; max-width:20ch; font-size:clamp(2rem,4.5vw,4.2rem); line-height:1; letter-spacing:-.055em; font-weight:750; }
.px-project-gallery { margin-top:clamp(48px,7vw,96px)!important; margin-bottom:clamp(48px,7vw,96px)!important; }
.px-project-gallery img { border-radius:var(--px-radius)!important; }

.px-project-related { background:#efefea; }
.px-project-nav { display:grid; grid-template-columns:1fr 1fr; gap:30px; padding-top:clamp(52px,7vw,90px); padding-bottom:clamp(20px,3vw,40px); border-top:1px solid var(--px-line); }
.px-project-nav div { display:grid; gap:8px; }
.px-project-nav span { color:var(--px-muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.11em; font-weight:850; }
.px-project-nav a { font-size:clamp(1.25rem,2.5vw,2rem); line-height:1.05; letter-spacing:-.035em; font-weight:750; text-decoration:none; }
.px-project-nav__next { text-align:right; }

@media(max-width:980px){
  .px-project-intro__grid,.px-project-archive-hero__grid{grid-template-columns:1fr}
  .px-project-intro__copy h1{font-size:clamp(3.8rem,13vw,6.5rem)}
  .px-project-facts{max-width:680px}
  .px-project-device-grid{grid-template-columns:1fr .42fr}
}
@media(max-width:640px){
  .px-project-grid--archive .px-project-card{grid-column:1/-1}
  .px-project-intro{padding-top:68px}
  .px-project-intro__copy h1{font-size:clamp(3.5rem,17vw,5rem)}
  .px-project-facts{grid-template-columns:1fr}
  .px-project-facts__url{grid-column:auto}
  .px-project-hero-media{border-radius:var(--px-radius)}
  .px-project-content > *{width:min(100% - 28px,760px)}
  .px-project-content > .alignwide{width:var(--px-shell)}
  .px-project-media-pair{grid-template-columns:1fr!important}
  .px-project-device-grid{grid-template-columns:1fr;align-items:start}
  .px-project-device-grid .px-project-device-mobile img{max-height:560px;margin:0 auto}
  .px-project-nav{grid-template-columns:1fr}
  .px-project-nav__next{text-align:left}
}