/* Tec Studio: a restrained architectural masthead. */
:root{--tec-ink:#202020;--tec-accent:#f69f19}
body{color:var(--tec-ink)}
.site-header{height:132px;padding:34px 5%;gap:40px;border:0}
.site-header .brand{width:clamp(250px,23vw,340px);flex-shrink:0}
.site-header nav{gap:clamp(24px,2.6vw,44px);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:.9375rem;font-weight:400;color:#343434}
.site-header nav a{padding:12px 0}
.hero{padding:0 5%}
.hero .hero-intro{padding:34px 0 42px;background:#fff;border-top:1px solid #dedede}
.hero .hero-intro h1{margin:0;max-width:none;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;font-size:clamp(1.65rem,2.45vw,2.8rem);letter-spacing:-.035em;line-height:1.25;color:#707070;text-wrap:balance}
.hero h1 span{color:inherit;font-weight:400}
.hero .hero-image>img{width:100%;height:clamp(370px,39vw,680px);min-height:0;max-height:none;object-fit:cover;object-position:50% 58%}
.hero .hero-image figcaption{min-height:64px;padding:20px 0;background:#fff;color:#484848;border-bottom:1px solid #dedede;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:.75rem;font-weight:400;letter-spacing:.10em;gap:24px}
.hero .hero-image figcaption>span{display:flex;align-items:center;gap:12px}
.hero .hero-image figcaption>span::before{content:"";width:6px;height:6px;background:var(--tec-accent);flex-shrink:0}
.hero .hero-image figcaption a{font-size:.875rem;letter-spacing:0;white-space:nowrap}
.hero .hero-image figcaption a:hover{color:#151515;text-decoration:underline;text-underline-offset:5px}
/* Neutral palette throughout the existing sections. */
.projects{background:#fff}
.studio,dialog,.project-open{background:#222}
.project-color{background:#eee;color:#222}
.project-category-heading h3,.view{color:#222}
.color-rule{background:#222}
.project-picture::after{background:linear-gradient(transparent,rgba(0,0,0,.88))}
.studio h2 em,.studio-content p{color:#e4e4e4}
.disciplines{border-color:#666}
.project-category-heading,.residential-group>.project-category-heading,.service-grid article,.more-projects,.contact,.email{border-color:#d0d0d0}
.project-category-heading p,.service-grid p,.detail-copy p,.contact-content p{color:#555}
@media(min-width:1100px) and (min-height:720px){.hero .hero-image>img{height:clamp(390px,calc(100svh - 350px),680px)}}
@media(max-width:850px){
.site-header{height:auto;min-height:0;padding:26px 5% 22px;gap:22px;flex-wrap:wrap}
.site-header .brand{width:270px}
.site-header nav{width:100%;order:2;justify-content:space-between;gap:16px}
.hero .hero-intro{padding:30px 0 34px}
.hero .hero-intro h1{max-width:660px;font-size:clamp(1.65rem,3.7vw,2.1rem)}
.hero .hero-image>img{height:420px;object-position:51% center}
}
@media(max-width:520px){
.site-header{padding-top:24px;gap:18px}
.site-header .brand{width:235px;max-width:82%}
.site-header nav{gap:10px;font-size:.875rem;flex-wrap:wrap}
.site-header nav a{padding:6px 0}
.hero .hero-intro{padding:25px 0 28px}
.hero .hero-intro h1{font-size:1.65rem;line-height:1.25;letter-spacing:-.03em}
.hero .hero-image>img{height:350px}
.hero .hero-image figcaption{padding:16px 0;flex-direction:column;align-items:flex-start;gap:12px;line-height:1.4;letter-spacing:.06em}
}

/* Project composition: square modules, wide views and a vertical accent. */
.projects>.section-top{margin-bottom:24px}
.projects>.section-top>.eyebrow{font-size:.75rem;max-width:none;margin-top:0}
.projects>h2{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;font-size:clamp(2rem,3.4vw,3.75rem);line-height:1.12;letter-spacing:-.035em;margin-bottom:44px}
.portfolio-mosaic{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:calc((90vw - 36px)/4);gap:12px}
.portfolio-mosaic .project{grid-column:span 1;grid-row:span 1;padding:0;margin:0}
.portfolio-mosaic .project.feature{grid-column:span 2;grid-row:span 2}
.portfolio-mosaic .project.wide{grid-column:span 2}
.portfolio-mosaic .project.portrait{grid-row:span 2}
.portfolio-note{background:#f0f0ee;color:#222;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(24px,2.2vw,44px);min-width:0}
.portfolio-note>p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;font-size:clamp(1.45rem,2.25vw,2.8rem);line-height:1.18;letter-spacing:-.025em}
.portfolio-note.dark{background:#242424;color:#fff}
.portfolio-mosaic>.portfolio-note:last-child{background:#dededb}
.note-rule{width:32px;height:2px;background:#f69f19}
.projects .project-picture::after{inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.8))}
.projects .project h3{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;font-size:clamp(1rem,1.15vw,1.3rem);text-wrap:pretty}
.projects .feature h3{font-size:clamp(1.35rem,1.8vw,2rem)}
.projects .project p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:.875rem}
.projects .view{width:32px;height:32px}
.projects .residential-grid{grid-template-columns:2fr 1fr 1fr;grid-auto-rows:clamp(280px,28vw,480px);gap:12px}
.projects .residential-grid .project{grid-column:auto;grid-row:auto}
@media(max-width:1000px){
.portfolio-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:calc((90vw - 12px)/2)}
.portfolio-mosaic .project.feature{grid-column:span 2;grid-row:span 1}
.portfolio-mosaic .project.wide{grid-column:span 2}
.portfolio-mosaic .project.portrait{grid-row:span 1}
.portfolio-note>p{font-size:clamp(1.5rem,3.6vw,2.4rem)}
.projects .residential-grid{grid-template-columns:1fr 1fr;grid-auto-rows:300px}
.projects .residential-grid .project:first-child{grid-column:span 2}
}
@media(max-width:600px){
.portfolio-mosaic{grid-template-columns:1fr;grid-auto-rows:auto;gap:16px}
.portfolio-mosaic .project,.portfolio-mosaic .project.feature,.portfolio-mosaic .project.wide,.portfolio-mosaic .project.portrait{grid-column:1;grid-row:auto;aspect-ratio:1/1}
.portfolio-mosaic .project.wide{aspect-ratio:4/3}
.portfolio-note{grid-column:1;min-height:230px;padding:28px;gap:30px}
.portfolio-note>p{font-size:2rem}
.projects .residential-grid{grid-template-columns:1fr;grid-auto-rows:300px}
.projects .residential-grid .project,.projects .residential-grid .project:first-child{grid-column:1}
.projects>h2{margin-bottom:30px}
}

/* Shared heading voice, matching the Estudio reference. */
.hero .hero-intro h1,.service-grid h2,.projects>h2,.detail h2,.studio h2,.contact h2{font-family:Futura,"Avenir Next",Arial,sans-serif;font-weight:400;letter-spacing:-.025em;line-height:1.2}
.hero .hero-intro h1,.service-grid h2,.projects>h2,.detail h2,.contact h2{color:#555}
.hero .hero-intro h1 span,.detail h2 em,.contact h2 em{color:#707070;font-weight:400;font-style:normal}
.studio h2{color:#fff}
.studio h2 em{color:#d0d0d0}

/* A compact dark services band gives the introduction visual weight. */
.hero .hero-intro{padding-top:26px;padding-bottom:30px}
.services.section{background:#242424;color:#fff;margin-top:32px;padding-top:40px;padding-bottom:44px;display:grid;grid-template-columns:minmax(150px,.65fr) 2.35fr;gap:5%}
.services .section-top{margin:0;display:block}
.services .section-top>.eyebrow{font-size:.75rem;line-height:1.7;max-width:none;margin:0;color:#d0d0d0}
.services .service-grid{gap:8%}
.services .service-grid article{border-top:1px solid #555;padding:20px 0 0}
.services .service-index{position:static;display:block;margin-bottom:12px;color:#aaa}
.services .service-grid h2{color:#f5f5f5;font-size:clamp(1.65rem,2.15vw,2.3rem);margin-bottom:14px}
.services .service-grid i{color:#f69f19}
.services .service-grid p{color:#d0d0d0;max-width:480px;font-size:1rem;line-height:1.6}
.projects.section{padding-top:52px}
@media(max-width:1000px){.services.section{grid-template-columns:1fr;gap:24px}.services .service-grid{gap:6%}}
@media(max-width:600px){.services.section{margin-top:24px;padding-top:30px;padding-bottom:32px}.services .service-grid{grid-template-columns:1fr;gap:28px}.projects.section{padding-top:38px}.hero .hero-intro{padding-top:22px;padding-bottom:24px}}

/* Compact portfolio and a softer cover motto. */
.hero .hero-intro h1{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300}
.hero .hero-intro h1 span{font-weight:300}
.projects>h2{font-size:clamp(1.7rem,2.89vw,3.1875rem);margin-bottom:32px}
.portfolio-mosaic{grid-auto-rows:calc((90vw - 36px)*.1875)}
.portfolio-mosaic .project.feature{grid-row:span 1}
.portfolio-note{padding:clamp(20px,1.65vw,32px)}
.portfolio-note>p{font-size:clamp(1.35rem,1.8vw,2.2rem)}
.projects .residential-grid{grid-auto-rows:clamp(240px,21vw,360px)}
.projects .archive{grid-auto-rows:230px}
@media(max-width:1000px){.portfolio-mosaic{grid-auto-rows:calc((90vw - 12px)*.375)}.portfolio-note>p{font-size:clamp(1.35rem,2.7vw,1.8rem)}.projects .residential-grid{grid-auto-rows:240px}}
@media(max-width:600px){.portfolio-mosaic{grid-auto-rows:auto}.portfolio-mosaic .project,.portfolio-mosaic .project.feature,.portfolio-mosaic .project.portrait{aspect-ratio:4/3}.portfolio-mosaic .project.wide{aspect-ratio:3/2}.portfolio-note{min-height:190px;padding:24px;gap:24px}.portfolio-note>p{font-size:1.7rem}.projects .residential-grid{grid-auto-rows:240px}.projects>h2{margin-bottom:26px}}

/* Preserve the full cover photograph at every viewport. */
.hero .hero-image>img{height:auto;min-height:0;max-height:none;aspect-ratio:auto;object-fit:contain}

/* Full photograph with an editorial margin for its caption. */
.hero .hero-image{display:grid;grid-template-columns:minmax(0,3fr) minmax(180px,1fr);gap:clamp(28px,4vw,72px);align-items:end;max-width:1600px;margin:0 auto}
.hero .hero-image>img{width:100%;height:auto;min-height:0;max-height:none;object-fit:contain}
.hero .hero-image figcaption{align-self:end;min-height:0;padding:22px 0 0;border-top:1px solid #d0d0d0;border-bottom:0;display:flex;flex-direction:column;align-items:flex-start;gap:28px;margin-bottom:4px;line-height:1.6}
.hero .hero-image figcaption>span{align-items:baseline;max-width:220px;font-size:.8125rem;letter-spacing:.06em}
.hero .hero-image figcaption a{font-size:.9375rem;white-space:normal;padding-bottom:6px}
.services.section{margin-top:44px}
@media(max-width:850px){.hero .hero-image{grid-template-columns:minmax(0,1fr);gap:0;max-width:680px}.hero .hero-image figcaption{border-top:0;border-bottom:1px solid #dedede;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 0;gap:20px;margin:0}.hero .hero-image figcaption>span{max-width:none}.services.section{margin-top:28px}}
@media(max-width:520px){.hero .hero-image figcaption{flex-direction:column;align-items:flex-start;gap:10px}.hero .hero-image figcaption a{padding:0}}

/* Anchor the full photograph with a solid lateral project panel. */
.hero .hero-image{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:0;max-width:1600px;margin:0;align-items:end}
.hero .hero-image>img{height:auto;width:100%;object-fit:contain}
.hero .hero-image figcaption{background:#2b2b2b;color:#fff;border:0;border-top:3px solid #f69f19;min-height:280px;height:72%;margin:0;padding:clamp(26px,3vw,52px);justify-content:space-between;align-items:stretch;gap:30px}
.cover-label{display:block;font-size:.75rem;letter-spacing:.12em;color:#c7c7c7}
.cover-project h2{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;font-size:clamp(1.8rem,3vw,3.5rem);line-height:1.05;letter-spacing:-.03em;margin:28px 0 18px;color:#fff}
.cover-location{font-size:.75rem;letter-spacing:.16em;color:#c7c7c7}
.hero .hero-image figcaption a{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #626262;padding:18px 0 0;font-size:.9375rem;color:#eee}
.hero .hero-image figcaption a:hover{color:#fff;text-decoration:underline}
.hero .hero-image figcaption a>span{color:#f69f19;font-size:1.4rem}
@media(max-width:1000px){.hero .hero-image figcaption{height:85%;min-height:240px;padding:24px}.cover-project h2{font-size:2rem;margin:20px 0 14px}}
@media(max-width:850px){.hero .hero-image{grid-template-columns:1fr;max-width:none}.hero .hero-image figcaption{height:auto;min-height:0;display:flex;flex-direction:row;align-items:end;padding:24px;gap:24px}.cover-project h2{font-size:1.85rem;margin:16px 0 12px}.hero .hero-image figcaption a{min-width:160px}}
@media(max-width:520px){.hero .hero-image figcaption{flex-direction:column;align-items:stretch;gap:24px}.cover-project h2 br{display:none}.cover-project h2{font-size:1.75rem}.hero .hero-image figcaption a{padding-top:16px}}

/* Full image and a restrained translucent caption ribbon. */
.hero .hero-image{display:block;position:relative;width:100%;max-width:1100px;margin:0}
.hero .hero-image>img{display:block;width:100%;height:auto;min-height:0;max-height:none;object-fit:contain}
.hero .hero-image figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;height:auto;min-height:0;margin:0;padding:13px 22px;border:0;background:rgba(255,255,255,.78);color:#292929;gap:0}
.hero .hero-image figcaption>span{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:.75rem;font-weight:400;line-height:1.4;letter-spacing:.1em;max-width:none}
.hero .hero-image figcaption>span::before{display:none}
@media(max-width:600px){.hero .hero-image figcaption{padding:10px 14px}.hero .hero-image figcaption>span{font-size:.75rem;letter-spacing:.06em}}

/* A full photograph paired with a quiet, lateral brand statement. */
.hero{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);column-gap:clamp(36px,5vw,100px);align-items:center;padding-top:30px}
.hero .hero-image{grid-column:1;grid-row:1;max-width:none}
.hero .hero-intro{grid-column:2;grid-row:1;padding:0;border:0;background:transparent}
.hero .hero-intro::before{content:"";display:block;width:38px;height:2px;background:#f69f19;margin-bottom:30px}
.hero .hero-intro h1{max-width:13ch;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:clamp(1.8rem,2.8vw,3.5rem);font-weight:300;line-height:1.17;letter-spacing:-.035em;color:#555;text-wrap:balance}
.hero .hero-intro h1 span{display:block;margin-top:.4em;color:#777;font-weight:300}
@media(max-width:750px){
.hero{grid-template-columns:1fr;gap:26px;padding-top:22px}
.hero .hero-intro{grid-column:1;grid-row:1;padding:0}
.hero .hero-image{grid-column:1;grid-row:2}
.hero .hero-intro::before{width:28px;margin-bottom:16px}
.hero .hero-intro h1{max-width:25ch;font-size:clamp(1.65rem,5.3vw,2.3rem);line-height:1.2}
.hero .hero-intro h1 span{display:inline;margin:0}
}

/* Restore the header rule and place the brand accent after the motto. */
.site-header{position:relative}
.site-header::after{content:"";position:absolute;left:5%;right:5%;bottom:0;height:1px;background:#e3e3e3}
.hero .hero-intro::before{display:none}
.hero .hero-intro::after{content:"";display:block;width:38px;height:2px;background:#f69f19;margin-top:30px}
@media(max-width:750px){.hero .hero-intro::after{width:28px;margin-top:18px}}

/* Give the promise of execution a slightly stronger voice. */
.hero .hero-intro h1{color:#858585;font-weight:300}
.hero .hero-intro h1 span{color:#555;font-weight:400}

/* Keep both tones in a single continuous motto. */
.hero .hero-intro h1 span{display:inline;margin:0}

/* Keep the closing information tile balanced in the tablet grid. */
@media(min-width:601px) and (max-width:1000px){.portfolio-mosaic>.portfolio-note:last-child{grid-column:span 2}}

/* Consistent portfolio categories. */
.projects .project-category-title{font-family:Futura,"Avenir Next",Arial,sans-serif;font-size:clamp(1.7rem,2.89vw,3.1875rem);font-weight:400;line-height:1.2;letter-spacing:-.025em;color:#555}
.projects>.project-category-title{margin:0 0 32px}
.projects .residential-group{margin-top:20px}
.projects .residential-group>.project-category-heading{padding:24px 0 32px;border-top:1px solid #d0d0d0;gap:20px}
.projects .residential-group .project-category-title{margin:0}
.projects .project-category-heading>p{margin:0;flex-shrink:0}





@media(max-width:1000px){.projects .residential-group>.project-category-heading{align-items:flex-start;flex-direction:column;gap:10px}}
@media(max-width:600px){.projects>.project-category-title{margin-bottom:26px}.projects .residential-group{margin-top:12px}.projects .residential-group>.project-category-heading{padding:22px 0 26px}}

/* Reserved project cards awaiting the user's photographs. */
.projects .project-pending{position:relative;background:#e9e9e7;border:1px solid #d6d6d3;min-height:0}
.projects .project-pending .project-heading{bottom:42px;color:#555}
.projects .project-pending .project-number{color:#666}

/* Center the Palms entrance, which sits right of center in the source photograph. */
.portfolio-mosaic .project-open[data-project="20"] .project-picture img{object-position:70% center}

/* Six residential projects in two equal rows. */
@media(min-width:1001px){.projects .residential-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.projects .residential-grid .project{grid-column:span 2}.projects .residential-grid .project:nth-child(n+4){grid-column:span 2}}

@media(min-width:601px) and (max-width:1000px){.projects .residential-grid .project:first-child{grid-column:auto}}

/* Slightly larger archive heading. */
.more-projects summary{font-size:1.05rem}

/* One extra line of space between the header logo and hero. */
.hero{padding-top:54px}
@media(max-width:750px){.hero{padding-top:46px}}

/* Original sketches arranged as a full-width studio collage. */
.detail .sketch-collage{grid-column:1/-1;display:grid;grid-template-columns:1.35fr .8fr .9fr;gap:clamp(16px,2.5vw,40px);align-items:center;padding:32px 0 8px}
.detail .sketch-collage figure{margin:0;min-width:0;width:100%}
.sketch-collage img{width:100%;height:clamp(300px,32vw,470px);object-fit:contain}
.sketch-collage .collage-room{transform:rotate(-2deg)}
.sketch-collage .collage-plan{transform:rotate(2deg)}
.sketch-collage .collage-living{transform:rotate(-1deg)}
.detail .sketch-collage figcaption{font-size:.75rem;letter-spacing:.04em;color:#666;margin-top:18px}
@media(max-width:750px){.detail .sketch-collage{grid-template-columns:1fr 1fr;gap:28px 20px;padding:16px 0}.sketch-collage .collage-room{grid-column:1/-1;max-width:620px;justify-self:center}.sketch-collage img{height:300px}.sketch-collage .collage-room img{height:auto}.detail .sketch-collage figcaption{font-size:.7rem}}
@media(max-width:420px){.sketch-collage img{height:230px}.detail .sketch-collage{gap:24px 14px}.detail .sketch-collage figcaption{letter-spacing:0}}

/* A photographic overview of the studio's execution and finished work. */
.work-story{margin-top:76px;padding-top:40px;border-top:1px solid #ddd}
.work-story-heading{display:flex;justify-content:space-between;align-items:end;gap:36px;margin-bottom:28px}
.work-story-heading h3{font-size:clamp(1.6rem,2.6vw,2.8rem);line-height:1.2;letter-spacing:-.025em;color:#555}
.work-story-heading p{font-family:"Helvetica Neue",Arial,sans-serif;max-width:370px;font-size:.95rem;line-height:1.6;color:#777}
.work-mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(135px,13vw,205px);gap:8px;grid-template-areas:"plan plan laser blueprint concrete concrete" "plan plan sanding spraying concrete concrete" "tools drywall sanding spraying dining dining" "drill cleaning sparks room dining dining"}
.detail .work-tile{position:relative;min-width:0;overflow:hidden;margin:0;background:#e9e9e7}
.work-tile img{display:block;width:100%;height:100%;object-fit:cover}
.detail .work-tile figcaption{position:absolute;inset:auto 0 0;margin:0;padding:32px 12px 11px;background:linear-gradient(transparent,rgba(0,0,0,.72));font-family:"Helvetica Neue",Arial,sans-serif;font-size:.7rem;line-height:1.25;color:white;letter-spacing:.02em}
.work-plan{grid-area:plan}
.work-blueprint{grid-area:blueprint}
.work-drywall{grid-area:drywall}
.work-laser{grid-area:laser}
.work-concrete{grid-area:concrete}
.work-sanding{grid-area:sanding}
.work-tools{grid-area:tools}
.work-dining{grid-area:dining}
.work-room{grid-area:room}
.work-spraying{grid-area:spraying}
.work-cleaning{grid-area:cleaning}
.work-drill{grid-area:drill}
.work-sparks{grid-area:sparks}
.work-laser img{object-position:63% 64%}.work-plan img{object-position:50% 50%}.work-room img{object-position:30% 50%}.work-sparks img{object-position:50% 65%}
@media(max-width:900px){.work-mosaic{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:170px;grid-template-areas:"plan plan laser blueprint" "plan plan concrete concrete" "sanding spraying concrete concrete" "sanding spraying dining dining" "tools drywall dining dining" "drill cleaning sparks room"}.work-story-heading{align-items:start;flex-direction:column;gap:16px}.work-story-heading p{max-width:520px}}
@media(max-width:560px){.work-story{margin-top:48px;padding-top:30px}.work-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:180px;gap:6px;grid-template-areas:"plan plan" "plan plan" "laser blueprint" "concrete concrete" "sanding spraying" "sanding spraying" "drywall tools" "drill cleaning" "sparks room" "dining dining" "dining dining"}.detail .work-tile{margin:0;width:auto}.detail .work-tile figcaption{font-size:.7rem}.work-story-heading{margin-bottom:24px}.work-plan img{object-position:50% 48%}}

/* Updated selection: fourteen photographs focused on execution. */
.work-roller{grid-area:roller}.work-wiring{grid-area:wiring}.work-electric{grid-area:electric}.work-taping{grid-area:taping}
.work-mosaic{grid-template-areas:"plan plan laser blueprint concrete concrete" "plan plan sanding spraying concrete concrete" "tools drywall sanding spraying taping taping" "drill cleaning roller electric wiring wiring"}
.work-taping img{object-position:40% 45%}.work-electric img{object-position:52% 45%}.work-wiring img{object-position:50% 42%}
@media(max-width:900px){.work-mosaic{grid-template-areas:"plan plan laser blueprint" "plan plan concrete concrete" "sanding spraying concrete concrete" "sanding spraying taping taping" "tools drywall roller electric" "drill cleaning wiring wiring"}}
@media(max-width:560px){.work-mosaic{grid-template-areas:"plan plan" "plan plan" "laser blueprint" "concrete concrete" "sanding spraying" "sanding spraying" "drywall tools" "drill cleaning" "roller electric" "taping taping" "wiring wiring"}}

/* Frame the plan and measuring tape more clearly. */
.work-plan img{object-position:50% 90%}
.work-blueprint img{object-position:35% 88%}

/* Reveal the drill dust hood and move the electrical-work photo into position 11. */
.work-drill img{object-position:50% 0%}
.work-mosaic{grid-template-areas:"plan plan laser blueprint concrete concrete" "plan plan sanding spraying concrete concrete" "tools drywall sanding spraying taping taping" "drill electric roller roller wiring wiring"}
@media(max-width:900px){.work-mosaic{grid-template-areas:"plan plan laser blueprint" "plan plan concrete concrete" "sanding spraying concrete concrete" "sanding spraying taping taping" "tools drywall roller roller" "drill electric wiring wiring"}}
@media(max-width:560px){.work-mosaic{grid-template-areas:"plan plan" "plan plan" "laser blueprint" "concrete concrete" "sanding spraying" "sanding spraying" "drywall tools" "drill electric" "roller roller" "taping taping" "wiring wiring"}}

/* Preserve the original photo positions while replacing number 13. */
.work-electric-new{grid-area:electricnew}.work-electric-new img{object-position:50% 35%}
.work-mosaic{grid-template-areas:"plan plan laser blueprint concrete concrete" "plan plan sanding spraying concrete concrete" "tools drywall sanding spraying taping taping" "drill electric roller electricnew wiring wiring"}
@media(max-width:900px){.work-mosaic{grid-template-areas:"plan plan laser blueprint" "plan plan concrete concrete" "sanding spraying concrete concrete" "sanding spraying taping taping" "tools drywall roller electricnew" "drill electric wiring wiring"}}
@media(max-width:560px){.work-mosaic{grid-template-areas:"plan plan" "plan plan" "laser blueprint" "concrete concrete" "sanding spraying" "sanding spraying" "drywall tools" "drill electric" "roller electricnew" "taping taping" "wiring wiring"}}

/* Reveal the profile being cut in photograph 14. */
.work-wiring img{object-position:50% 100%}

/* Execution section: two-tone heading and smaller supporting line. */
.detail .work-story{margin-top:0;padding-top:0;border-top:0}
.detail .work-story-heading{display:block;margin-bottom:36px}
.detail .work-story-heading h2{font-family:Futura,"Avenir Next",Arial,sans-serif;font-weight:400;font-size:clamp(2rem,3.2vw,3.3rem);line-height:1.2;letter-spacing:-.025em;color:#555;margin:0}
.detail .work-story-heading h2 em{font-style:normal;font-weight:400;color:#707070}
.detail .work-story-heading p{font-family:Futura,"Avenir Next",Arial,sans-serif;max-width:none;font-size:clamp(.95rem,1.3vw,1.2rem);line-height:1.5;margin:20px 0 0;color:#777}

/* Restore the right-hand description beside a single-tone title. */
.detail .work-story-heading{display:flex;justify-content:space-between;align-items:end;gap:36px;margin-bottom:28px}
.detail .work-story-heading h2{font-size:clamp(1.6rem,2.6vw,2.8rem);color:#555;white-space:nowrap}
.detail .work-story-heading p{font-family:"Helvetica Neue",Arial,sans-serif;max-width:370px;font-size:.95rem;line-height:1.6;margin:0;color:#777}
@media(max-width:1100px){.detail .work-story-heading{align-items:start;flex-direction:column;gap:16px}.detail .work-story-heading p{max-width:520px}}
@media(max-width:560px){.detail .work-story-heading{margin-bottom:24px}.detail .work-story-heading h2{font-size:clamp(1rem,4.7vw,1.6rem);letter-spacing:-.03em}}

/* Match section 02 spacing between heading text and photographs. */
.detail .work-story-heading{margin-bottom:32px}
@media(max-width:600px){.detail .work-story-heading{margin-bottom:26px}}

/* Shared section typography and spacing, based on section 02. */
:root{--section-title-size:clamp(1.7rem,2.89vw,3.1875rem);--section-label-gap:24px;--section-content-gap:32px;--section-copy-size:1rem}
.projects .project-category-title,.detail .work-story-heading h2,.studio h2,.contact h2{font-family:Futura,"Avenir Next",Arial,sans-serif;font-size:var(--section-title-size);font-weight:400;line-height:1.2;letter-spacing:-.025em}
.services .service-grid p,.detail .work-story-heading p,.studio-content p,.studio-content .large-copy,.contact-content p{font-family:Futura,"Avenir Next",Arial,sans-serif;font-size:var(--section-copy-size);line-height:1.6}
.projects>.section-top,.detail>.section-top{margin-bottom:var(--section-label-gap)}
.studio-content,.contact-content{margin-top:var(--section-label-gap)}
.projects>.project-category-title,.detail .work-story-heading{margin-bottom:var(--section-content-gap)}
.studio-content p{margin-bottom:24px}
.projects.section,.detail.section,.studio.section,.contact.section{padding-top:52px;padding-bottom:52px}
.detail .work-story-heading h2{white-space:normal}
@media(max-width:600px){:root{--section-content-gap:26px}.projects.section,.detail.section,.studio.section,.contact.section{padding-top:38px;padding-bottom:38px}.detail .work-story-heading{margin-bottom:var(--section-content-gap)}}

/* Refine execution text scale and repeat the studio's orange accent. */

.detail .work-story-heading p{font-size:.95rem}
.studio .disciplines{display:block;width:38px;height:2px;padding:0;margin-top:30px;background:#f69f19;border:0}
@media(max-width:750px){.studio .disciplines{width:28px;margin-top:18px}}

/* One shared size for section headings and numbered section labels. */
.services .service-grid h2,.projects .project-category-title,.detail .work-story-heading h2,.studio h2,.contact h2{font-size:var(--section-title-size);font-weight:400;line-height:1.2;letter-spacing:-.025em}
.section>.section-top>.eyebrow,.section>.eyebrow{font-size:.75rem;line-height:1.7;letter-spacing:.13em;max-width:none;margin:0}

/* Contact details from the studio's business card. */
.contact-details{display:grid;grid-template-columns:1fr 1fr;gap:26px 32px;margin-top:30px}
.contact-item{min-width:0}
.contact-details .contact-label{display:block;font-size:.7rem;letter-spacing:.12em;line-height:1.7;color:#777;margin-bottom:7px}
.contact-item>a,.contact-details .contact-item p{font-size:1rem;line-height:1.6;color:#555}
.contact-item>a{display:inline-block;overflow-wrap:anywhere}
.contact-item>a:hover{text-decoration:underline;text-underline-offset:4px}
.contact-address{grid-column:1/-1}
@media(max-width:480px){.contact-details{grid-template-columns:1fr;gap:22px}.contact-address{grid-column:auto}}

/* Contact closing: warm accent and logo aligned to the right. */
.contact .email{border-bottom:0;padding-bottom:0}
.contact-accent{display:block;width:38px;height:2px;background:#f69f19;margin-top:24px}
.contact{border-bottom:1px solid #c9cfca}
footer{justify-content:flex-start}
@media(max-width:750px){.contact-accent{width:28px;margin-top:18px}}
@media(max-width:800px){footer{align-items:flex-start}}

/* Restore the return link while retaining the left-aligned footer logo. */
footer .back-top{margin-left:auto;font-size:.75rem;white-space:nowrap}
@media(max-width:800px){footer{flex-direction:row;align-items:center;justify-content:space-between}}

/* Show the previous state only on photographs identified as before. */
#gallery-photo-caption{font-size:.85rem;letter-spacing:.06em;color:#f6a51a;font-weight:400}
#gallery-photo-caption[hidden]{display:none}

/* Keep the before label six pixels below the photograph itself. */
.gallery-stage #gallery-photo-caption{position:absolute;left:0;right:0;text-align:center;margin:0;line-height:1.2;pointer-events:none}