:root { --site-header-height:80px; --section-space:clamp(144px,12.5vw,224px); --section-space-large:clamp(176px,15vw,264px); }
html { scroll-padding-top:96px; }
.header { position:sticky; top:0; z-index:51; display:flex; align-items:center; gap:32px; min-height:var(--site-header-height); padding:0 var(--gutter); color:var(--ink); background:#fafaf7 url('./assets/marble-white-gold.webp') center/cover; border-bottom:1px solid #b7b4a833; }
.brand { display:inline-flex; align-items:center; gap:15px; white-space:nowrap; font-size:21px; font-weight:600; letter-spacing:-.025em; line-height:1.2; }
.brand-name { font-family:var(--brand-type); font-weight:400; letter-spacing:-.015em; }
.brand-mark { width:32px; height:auto; }.brand-amp { font-weight:400; }
.header-nav { display:flex; gap:30px; margin-left:auto; font-size:14px; font-weight:400; }
.header-nav a { position:relative; padding:15px 0; }
.header-nav a::after { content:''; position:absolute; left:0; right:0; bottom:10px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.header-nav a:hover::after { transform:scaleX(1); }
.header-actions { display:flex; align-items:center; gap:32px; margin-left:20px; }
.contact-link { position:relative; display:inline-flex; align-items:center; gap:16px; min-height:44px; padding:10px 0; color:var(--ink); font-size:14px; font-weight:500; white-space:nowrap; }
.contact-link::after { content:''; position:absolute; inset:auto 0 5px; height:1px; background:currentColor; opacity:.45; transition:opacity .2s; }
.contact-link:hover::after { opacity:1; }
.menu-toggle { display:flex; align-items:center; justify-content:flex-end; min-width:44px; height:44px; padding:0; background:none; font-size:14px; font-weight:400; }
.menu-toggle { position:relative; z-index:51; }
.menu-toggle[data-touch-focus]:focus { outline:none; box-shadow:none; }
.menu-toggle[data-touch-focus]:active { filter:none; }
body::after { content:''; position:fixed; inset:0; z-index:50; background:var(--ink); opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
@media(hover:hover) and (pointer:fine) { body:has(.menu-toggle:hover):not(:has(dialog[open]))::after { opacity:.04; } }
.menu-symbol { display:grid; gap:7px; width:22px; }.menu-symbol i { height:1px; width:22px; background:currentColor; transition:transform .42s cubic-bezier(.4,0,.2,1); }
.menu-toggle[aria-expanded="false"]:hover i:first-child { transform:translateY(1px); }.menu-toggle[aria-expanded="false"]:hover i:last-child { transform:translateY(-1px); }
.menu-toggle[aria-expanded="true"] i:first-child { transform:translateY(4px) rotate(45deg); }.menu-toggle[aria-expanded="true"] i:last-child { transform:translateY(-4px) rotate(-45deg); }

.opening { position:relative; }
.opening-intro { --opening-title-size:clamp(42px,4.6vw,74px); display:flex; align-items:flex-end; justify-content:space-between; gap:48px; padding:72px var(--gutter) 64px; }
.opening-intro h1 { font-family:var(--type); font-size:var(--opening-title-size); line-height:1.1; letter-spacing:-.025em; font-weight:500; margin:0; }
.opening-intro>p { width:242px; margin:0 min(2.6vw,50px) 0 0; font-size:13px; line-height:1.6; color:var(--muted); }
.project-work { --project-hover-inset:clamp(6px,.8vw,12px); margin:0; min-width:0; }
.project-image { position:relative; display:block; width:100%; padding:0; overflow:hidden; background:var(--paper); text-align:left; }
.project-image>img { width:100%; height:100%; object-fit:cover; clip-path:inset(0); transition:clip-path .55s var(--ease); }
.project-image:focus-visible,.work-caption:focus-visible { outline-offset:6px; }
.opening-work { width:76%; }.opening-work .project-image { aspect-ratio:25/12; }.opening-work .project-image>img { height:auto; object-fit:contain; }
.project-work figcaption { display:grid; grid-template-columns:minmax(0,1fr); gap:5px; padding-top:18px; font-size:15px; line-height:1.45; }
.work-caption { display:grid; grid-template-columns:minmax(0,1fr); gap:inherit; width:100%; min-height:44px; padding:0; background:none; text-align:left; }
.opening-work figcaption { padding-left:var(--gutter); padding-right:4px; }
.work-note { grid-column:1; font-size:13px; color:var(--muted); }
.work-name { font:400 18px/1.5 var(--caption-type); letter-spacing:-.015em; text-wrap:balance; }
.work-name,.work-note { min-width:0; transition:transform .55s var(--ease); }

.portfolio-story { margin-inline:auto; }
.thought { margin:var(--section-space) 13% var(--section-space) 19%; max-width:900px; }
.thought-text { font:400 clamp(38px,3.65vw,60px)/1.2 var(--type); letter-spacing:-.025em; text-wrap:balance; margin:0; }
.thought-explanation { max-width:440px; margin:var(--heading-copy-gap) 0 0; color:var(--muted); font-size:16px; line-height:1.6; }
.offset-pair { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 2.4%; align-items:start; margin:0 var(--gutter); }
.work-detail { grid-column:2/6; grid-row:1/3; margin-top:144px; }.work-detail .project-image { aspect-ratio:3/4; }
.work-apartment { grid-column:7/13; grid-row:1; }.work-apartment .project-image { aspect-ratio:1.51; }
.testimonial { margin:0; }.testimonial-quality { grid-column:8/13; grid-row:2; margin-top:88px; }
.testimonial blockquote { font:400 clamp(20px,1.55vw,24px)/1.5 var(--type); letter-spacing:-.015em; margin:0; text-wrap:pretty; }
.sample-label { color:var(--muted); font-size:12px; line-height:1.5; margin:18px 0 0; }

.model-section { display:grid; grid-template-columns:minmax(0,33fr) minmax(0,67fr); gap:0; max-width:1720px; margin:var(--section-space-large) var(--gutter) 0; }
.hero-copy { align-self:center; padding-right:28px; min-width:0; container-type:inline-size; }
.hero-copy h2 { font-size:clamp(22px,9.6cqw,40px); font-weight:500; line-height:1.15; letter-spacing:-.03em; margin:0 0 var(--heading-copy-gap); }
.hero-copy .intro { font-size:16px; line-height:1.6; color:var(--muted); max-width:330px; margin:0 0 36px; }
.model-project-caption { font-size:13px; line-height:1.65; margin:0; }.model-project-caption span { font-size:12px; color:var(--muted); }
.model-area { position:relative; width:100%; max-width:740px; min-width:0; min-height:400px; }
.model-canvas { position:absolute; inset:0 0 32px; cursor:grab; touch-action:none; }.model-canvas:active { cursor:grabbing; }.model-canvas canvas { display:block; width:100%; height:100%; }
.model-fallback { position:absolute; inset:35px 30px 82px; }.model-fallback img { width:100%; height:100%; object-fit:contain; }.model-fallback p { position:absolute; bottom:0; left:0; margin:0; padding:10px 14px; background:var(--paper); font-size:12px; line-height:1.6; }
.model-instruction { position:absolute; bottom:6px; left:0; margin:0; color:var(--muted); font-size:12px; line-height:1.5; pointer-events:none; }
.room-label { position:absolute; pointer-events:none; opacity:0; max-width:180px; font-size:12px; padding:10px 14px; background:var(--paper); transform:translate(14px,-100%); box-shadow:0 5px 20px #24252312; transition:opacity .2s; }.room-label.visible { opacity:1; }
.construction-status { position:absolute; z-index:2; top:0; left:0; right:0; max-width:380px; margin-inline:auto; pointer-events:none; background:var(--paper); }
.construction-status-copy { display:flex; align-items:center; gap:9px; min-height:30px; font-size:13px; line-height:1.5; }
.construction-indicator { width:6px; height:6px; flex:none; border-radius:50%; background:#94805a; }
.construction-step { margin-left:auto; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.construction-progress { height:1px; background:var(--line); margin-top:5px; overflow:hidden; }
.construction-progress span { display:block; height:100%; background:var(--ink); transform:scaleX(0); transform-origin:left; }
.hero-bottom { grid-column:2; width:100%; max-width:740px; min-width:0; padding-top:24px; }
.project-preview { display:inline-flex; gap:16px; align-items:center; background:none; min-height:48px; padding:0; font-size:13px; white-space:nowrap; }.preview-copy strong { font-weight:500; }
.hero-copy .project-preview { margin-top:15px; border-bottom:1px solid var(--line); }
.timeline-heading { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:14px; font-size:12px; line-height:1.5; color:var(--muted); }
.timeline-heading>span:first-child { grid-column:1/3; color:var(--ink); font-weight:500; }
.timeline-heading>span:last-child { grid-column:3; }
.stages { --timeline-progress:0%; position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.stages::before,.stages::after { content:''; position:absolute; top:7px; left:6px; height:1px; pointer-events:none; }
.stages::before { width:calc(200% / 3); background:var(--line); }
.stages::after { width:var(--timeline-progress); background:var(--ink); transition:width .5s var(--ease); }
.stages button { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; min-height:76px; padding:26px 4px 10px 0; text-align:left; color:var(--muted); background:none; }
.stages button::before { content:''; z-index:1; position:absolute; top:1px; left:0; width:13px; height:13px; border:3px solid var(--paper); border-radius:50%; background:var(--line); box-shadow:0 0 0 1px var(--line); transition:background .25s,box-shadow .25s; }
.stages button.active::before,.stages button.is-complete::before { background:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.stages button.active { color:var(--ink); }.stages button:hover:enabled { color:var(--ink); }.stages button.active .stage-month { font-weight:600; }
.stages button:disabled { cursor:not-allowed; }.stages button:disabled:not(.active):not(.is-pending) { opacity:.38; }
.stages button.is-pending { color:var(--ink); }.stages button.is-pending::before { background:var(--paper); box-shadow:0 0 0 1px var(--ink); }
.timeline-guidance { margin:0 0 14px; color:var(--muted); font-size:12px; line-height:1.5; }
.stage-month { font-size:17px; line-height:1.4; font-variant-numeric:tabular-nums; }.stage-name { font-size:13px; line-height:1.5; }
.stage-photo { width:100%; display:grid; grid-template-columns:160px minmax(0,1fr); align-items:center; gap:22px; padding:16px 0 0; margin-top:8px; border-top:1px solid var(--line); background:none; text-align:left; }
.stage-photo-frame { display:block; overflow:hidden; aspect-ratio:3/2; background:var(--surface); }.stage-photo-frame img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.stage-photo-copy { display:flex; flex-direction:column; align-items:flex-start; gap:9px; }.stage-photo-copy strong { font-size:19px; line-height:1.4; font-weight:500; letter-spacing:-.02em; }.stage-photo-copy>span:not(.stage-photo-link) { max-width:360px; font-size:14px; line-height:1.6; color:var(--muted); text-wrap:pretty; }
.stage-photo-link { display:inline-flex; align-items:center; gap:14px; font-size:13px; line-height:1.5; margin-top:2px; border-bottom:1px solid var(--line); padding-bottom:3px; }.stage-photo-link .icon { width:17px; height:17px; }
.stage-photo:hover .stage-photo-frame img { transform:scale(1.025); }.stage-photo:hover .stage-photo-link { border-color:currentColor; }
.timeline-note { font-size:12px; line-height:1.5; color:var(--muted); margin:16px 0 0; }

.thought-quality { margin-left:37%; margin-right:var(--gutter); max-width:850px; }
.work-richmond { grid-column:1/7; grid-row:1/3; }.work-richmond .project-image { aspect-ratio:1672/941; }
.estimate-copy { grid-column:8/13; grid-row:1; padding-top:48px; }.estimate-copy h2 { font-size:clamp(30px,3.05vw,48px); font-weight:500; line-height:1.15; margin:0 0 var(--heading-copy-gap); }.estimate-copy>p { font-size:16px; line-height:1.6; max-width:390px; margin:0 0 28px; }
.text-link { display:inline-flex; gap:22px; align-items:center; border-bottom:1px solid var(--line); min-height:44px; padding-bottom:6px; font-size:14px; line-height:1.5; }
.text-link .icon,.contact-link .icon,.project-preview .icon { transition:transform .35s var(--ease); }.text-link:hover .icon,.contact-link:hover .icon,.project-preview:hover .icon { transform:translate(3px,-3px); }
.work-bath { grid-column:9/13; grid-row:2/4; margin-top:128px; }.work-bath .project-image { aspect-ratio:3/4; }
.testimonial-estimate { width:37%; max-width:475px; margin:120px 0 var(--section-space) 15%; }
.closing-work { width:76%; margin-left:24%; }.closing-work .project-image { aspect-ratio:25/12; }.closing-work figcaption { padding-right:var(--gutter); }
.studio-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6.7vw,96px); align-items:start; margin:var(--section-space-large) max(12.5%,calc((100% - 1200px)/2)) var(--section-space); }.studio-section h2 { font:500 clamp(32px,3.05vw,50px)/1.2 var(--type); letter-spacing:-.025em; margin:0; }.studio-copy { max-width:480px; }.studio-copy p { font-size:16px; line-height:1.6; margin:0 0 24px; }.studio-copy p:last-child { color:var(--muted); font-size:16px; margin-bottom:0; }
.contact-section { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin:0 var(--gutter); padding:80px 0 88px; border-top:1px solid var(--line); }.contact-section h2 { font:500 clamp(38px,4.8vw,78px)/1.15 var(--type); letter-spacing:-.035em; margin:0; }.contact-section h2 a { display:flex; align-items:center; gap:4vw; }.contact-section h2 .icon { width:.65em; height:.65em; transition:transform .4s var(--ease); }.contact-section h2 a:hover .icon { transform:translate(5px,-5px); }
.contact-lead { margin:var(--heading-copy-gap) 0 0; color:var(--muted); font-size:14px; }.contact-details { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding-bottom:2px; font-size:15px; }.contact-details a { padding:8px 0; }.contact-details a:hover { text-decoration:underline; text-underline-offset:5px; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:32px; border-top:1px solid var(--line); padding:22px var(--gutter); font-size:12px; color:var(--muted); }.footer-brand { display:inline-flex; align-items:center; gap:12px; font-size:14px; color:var(--ink); min-height:44px; }.footer-brand img { width:auto; height:24px; }.site-footer>span { margin-left:auto; }.back-top { display:inline-flex; align-items:center; gap:12px; min-height:44px; margin-left:auto; }
@media(hover:hover) and (pointer:fine) {
 .project-work:has(.project-image:hover,.work-caption:hover) .project-image>img { clip-path:inset(var(--project-hover-inset)); }
 .project-work:has(.project-image:hover,.work-caption:hover) :is(.work-name,.work-note) { transform:translateX(var(--project-hover-inset)); }
}
/* Let the photographic composition reach the edges of ultrawide displays. */
@media(min-width:1900px) {
 .opening { margin-inline:auto; }
 .opening-work { width:min(76%,145.833svh,2083px); }
 .header,.site-footer,.menu-panel { padding-inline:var(--gutter); }
 .contact-section { margin-inline:var(--gutter); }
 .contact-section h2 a { gap:76px; }
 .model-section { margin-inline:auto; }
 .studio-section { max-width:1200px; margin-inline:auto; }
}
@media(max-width:1100px) {
 .header { gap:24px; }.brand { font-size:20px; gap:12px; }.header-nav { gap:22px; }.header-actions { margin-left:0; }.header-actions .contact-link { display:none; }
 .opening-intro>p { width:215px; margin-right:0; }.work-detail { grid-column:1/6; margin-top:120px; }.testimonial-quality { grid-column:7/13; margin-top:72px; }
 .model-section { grid-template-columns:minmax(0,36fr) minmax(0,64fr); }.hero-copy { padding-right:24px; }.model-area { min-height:365px; }.stage-photo { grid-template-columns:130px minmax(0,1fr); gap:20px; }.stage-photo-copy strong { font-size:17px; }
 .estimate-copy { grid-column:7/13; padding-top:25px; }.work-bath { grid-column:8/13; margin-top:96px; }.thought-quality { margin-left:31%; }.studio-section { margin-inline:8%; gap:8%; }.contact-section { gap:24px; }.contact-details { font-size:14px; }
}
/* A wider introduction keeps the smaller type and comfortable line spacing. */
@media(min-width:1001px) {
 .opening-intro>p { width:21em; font-size:clamp(12px,.95vw,14px); line-height:calc(var(--opening-title-size) * 1.1 / 3); }
}
@media(max-width:760px) {
 :root { --heading-copy-gap:1rem; --section-space:112px; --section-space-large:136px; }
 html { scroll-padding-top:88px; }
 :root { --site-header-height:72px; }
 .header { position:sticky; top:0; min-height:var(--site-header-height); gap:14px; }.brand { font-size:18px; gap:11px; }.brand-mark { width:27px; }.header-nav { display:none; }.header-actions { margin-left:auto; }.menu-toggle { min-width:44px; width:44px; }
 .opening-intro { display:block; padding:48px var(--gutter) 44px; }.opening-intro h1 { font-size:clamp(29px,8.8vw,58px); line-height:1.12; }.opening-intro>p { font-size:13px; line-height:1.6; width:min(360px,100%); margin:var(--heading-copy-gap) 0 0; }
 .opening-work { width:100%; }.opening-work .project-image { aspect-ratio:25/12; }.project-work figcaption { padding-top:14px; font-size:14px; gap:4px 12px; }.opening-work figcaption { padding-inline:var(--gutter); }.work-note { font-size:12px; }.work-name { font-size:16px; }
 .thought { margin:var(--section-space) 28px; }.thought-text { font-size:clamp(24px,calc(6.8vw + 1px),42px); line-height:1.24; letter-spacing:-.025em; }.thought-explanation { font-size:15px; line-height:1.6; }.desktop-break { display:none; }
 .offset-pair { display:flex; flex-direction:column; gap:80px; margin-inline:0; }.offset-pair .project-work { width:100%; }.offset-pair .project-work figcaption { padding-inline:var(--gutter); }.work-apartment { order:1; }.work-detail { margin:0; order:2; }.testimonial-quality { width:calc(100% - 2 * var(--gutter)); margin:0 var(--gutter); order:3; }.testimonial blockquote { font-size:20px; line-height:1.5; }.sample-label { font-size:12px; margin-top:15px; }
 .model-section { display:flex; flex-direction:column; }.hero-copy { padding:0; align-self:stretch; }.hero-copy .intro { font-size:15px; max-width:350px; margin-bottom:24px; }.model-project-caption { font-size:12px; }.model-project-caption span { font-size:12px; }
 .model-area { height:270px; min-height:270px; margin-top:24px; }.model-canvas { inset:0 -8px 32px; }.model-fallback { inset:12px 0 70px; }.model-instruction { font-size:12px; bottom:5px; }.room-label { display:none; }
 .construction-status-copy { font-size:12px; }.construction-status { top:0; max-width:320px; }
 .hero-bottom { width:100%; }.timeline-heading { margin-bottom:14px; }.stage-month { font-size:16px; }.stages button { min-height:75px; }.stage-photo { grid-template-columns:minmax(0,1fr); width:calc(100% + 2 * var(--gutter)); margin-inline:calc(-1 * var(--gutter)); gap:20px; padding-top:24px; margin-top:8px; align-items:start; }.stage-photo-copy { gap:8px; padding-inline:var(--gutter); }.stage-photo-copy strong { font-size:16px; }.stage-photo-copy>span:not(.stage-photo-link) { font-size:13px; line-height:1.5; }.stage-photo-link { font-size:12px; }.timeline-note { margin-top:18px; }.project-preview { min-height:44px; gap:18px; }
 .thought-quality .thought-text br { display:block; }.work-richmond { order:1; }.estimate-copy { order:2; width:auto; margin-inline:var(--gutter); padding:0; }.estimate-copy h2 { font-size:32px; }.estimate-copy>p { font-size:15px; margin-bottom:22px; }.text-link { font-size:13px; }.work-bath { margin:0; order:3; }
 .testimonial-estimate { width:auto; max-width:none; margin:88px 42px var(--section-space) 28px; }.closing-work { width:100%; margin:0; }.closing-work .project-image { aspect-ratio:5/4; }.closing-work figcaption { padding-inline:var(--gutter); }
 .studio-section { display:block; margin:var(--section-space-large) 28px var(--section-space); }.studio-section h2 { font-size:clamp(26px,6.9vw,39px); margin-bottom:var(--heading-copy-gap); }.studio-copy p { font-size:15px; line-height:1.6; }.studio-copy p:last-child { font-size:15px; }
 .contact-section { display:block; padding:56px 0; }.contact-section h2 { font-size:clamp(28px,7.8vw,52px); }.contact-section h2 a { justify-content:space-between; gap:12px; }.contact-lead { font-size:13px; }.contact-details { padding-top:24px; gap:0; }.contact-details a { min-height:40px; }
 .site-footer { padding-block:19px 23px; flex-wrap:wrap; gap:12px 20px; }.footer-brand { font-size:13px; gap:10px; }.footer-brand img { height:21px; }.site-footer>span { order:3; width:100%; margin:0; font-size:12px; }.back-top { font-size:12px; gap:7px; }
}
@media(max-width:360px) { .brand { font-size:17px; gap:9px; }.brand-mark { width:24px; }.opening-intro h1 { font-size:29px; }.thought { margin-inline:22px; }.thought-text { font-size:24px; }.thought-quality { margin-inline:16px; }.testimonial blockquote { font-size:19px; }.studio-section { margin-inline:22px; }.contact-section h2 { font-size:27px; } }
@media(prefers-reduced-motion:reduce) { .project-image:hover>img,.project-work:has(.project-image:hover,.work-caption:hover) :is(.work-name,.work-note),.stage-photo:hover .stage-photo-frame img { transform:none; }.project-work:has(.project-image:hover,.work-caption:hover) .project-image>img { clip-path:inset(0); }.work-name,.work-note,.stages::after,.stages button::before,body::after { transition:none; } }

/* Keep grammatical units together without changing the copy. */
.title-line { display:block; white-space:nowrap; }
.phrase { white-space:nowrap; }
.studio-copy p:first-child { font-weight:500; }

.thought-explanation, .hero-copy .intro, .estimate-copy > p, .studio-copy p, .opening-intro > p { text-wrap:pretty; }

/* Only customer quotations are centred, and only on mobile. */
@media (max-width: 760px) {
  .testimonial { text-align: center; }
  .testimonial-quality, .testimonial-estimate {
    width: calc(100% - 2 * var(--gutter));
    margin-inline: auto;
  }
  .testimonial .quote-period { display: none; }
}

/* Preserve the full horizontal composition of the Mayakovsky cover. */
.closing-work.work-mayakovsky .project-image { aspect-ratio:1672/941; }

/* Richmond apartment: keep the complete landscape photograph at every width. */
.richmond-apartment-work { width:76%; margin:var(--section-space) 0 0; }
.richmond-apartment-work .project-image { aspect-ratio:1672/941; }
.richmond-apartment-work figcaption { padding-inline:var(--gutter); }
@media(max-width:760px) { .richmond-apartment-work { width:100%; } }


/* Additional objects keep a photograph and its quotation together. */
.project-feature { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 2.4%; align-items:center; margin:var(--section-space) var(--gutter); scroll-margin-top:24px; }
.project-feature .project-work { grid-column:1/8; grid-row:1; }
.project-feature .project-image { aspect-ratio:1672/941; }
.project-feature .testimonial { grid-column:9/13; grid-row:1; max-width:390px; padding-bottom:60px; }
.project-feature-reverse .project-work { grid-column:6/13; }
.project-feature-reverse .testimonial { grid-column:1/5; justify-self:end; }
@media(max-width:1000px) and (min-width:761px) {
 .project-feature .testimonial { grid-column:8/13; padding-left:20px; }
 .project-feature-reverse .testimonial { grid-column:1/6; padding-left:0; padding-right:20px; }
}
@media(max-width:760px) {
 .project-feature { display:flex; flex-direction:column; gap:40px; margin-inline:0; }
 .project-feature .project-work { width:100%; }
 .project-feature figcaption { padding-inline:var(--gutter); }
 .project-feature .testimonial { width:calc(100% - 2 * var(--gutter)); max-width:440px; padding:0; margin-inline:auto; }
}