/* Requested service expansion and lighter section surfaces. */
.stats{height:auto;min-height:180px;margin-top:48px;padding:38px 24px;background:var(--surface);border-radius:24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;align-items:start}
.stats .stat-divider{display:none}
.stats .stat{min-width:0;padding:0 24px!important;border:0}
.stats .stat:not(:first-child){border-left:1px solid #dedee2}
.stats .stat span{white-space:normal}
.service-grid{align-items:stretch}
.service-card{min-height:324px}
.service-card-wide{grid-column:1/-1;min-height:230px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);column-gap:48px;row-gap:12px}
.service-card-wide .card-top{grid-column:1/-1;margin-bottom:0}
.service-card-wide h3{grid-column:1;grid-row:2;margin-bottom:0}
.service-card-wide>p{grid-column:2;grid-row:2/4;align-self:start;max-width:65ch;font-size:18px;line-height:28px}
.service-card-wide .learn{grid-column:1;grid-row:3;margin-top:0;padding-top:0}
.testimonials{background:var(--surface);color:var(--ink)}
.testimonials h2 em{color:var(--muted)}
.review{box-shadow:0 8px 24px #00000005}
.project-controls{display:flex;align-items:center;flex:none}
/* Small feedback around the existing controls. */
main{overflow-x:clip}
.stats .stat .sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.stats .stat strong{font-family:'Stats Percent',var(--serif);font-variant-numeric:tabular-nums}
.projects .project{flex:0 0 calc((100% - 32px)/2);min-width:0}
.projects .project-photo{height:380px}
.projects .project-caption{min-height:88px;align-items:flex-start}
.projects .project-caption>div{min-width:0}
.projects .project h3{font-size:clamp(24px,2vw,32px);line-height:1.25;white-space:normal}
.projects .project-open{align-self:center}
#project-dialog{width:min(1100px,calc(100vw - 32px))}
#dialog-image{width:100%;height:72vh;max-height:800px;object-fit:contain}
@media(max-width:900px){.projects .project{flex-basis:min(510px,calc(100% - 32px))}}
@media(max-width:600px){.projects .project{flex-basis:calc(100vw - 62px)}.projects .project-photo{height:300px}.projects .project h3{font-size:23px}.projects .project-caption{min-height:88px}#dialog-image{height:65vh}}
.learn img{transition:transform .22s cubic-bezier(.16,1,.3,1)}
.learn:hover img,.learn:focus-visible img{transform:translateX(5px)}
.service-icon{transition:transform .28s cubic-bezier(.16,1,.3,1),background .2s}
.project-open{transition:background .2s,border-color .2s,transform .2s}
.project-open img{transition:transform .25s cubic-bezier(.16,1,.3,1)}
.project-open:hover img{transform:translate(3px,-3px)}
.button:active{transform:translateY(0) scale(.98)}
nav>a:not(.button){position:relative}
nav>a:not(.button):after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.16,1,.3,1)}
nav>a:not(.button):hover:after,nav>a:not(.button):focus-visible:after{transform:scaleX(1)}
@media(max-width:1100px){.stats{padding:32px 8px}.stats .stat{padding:0 20px!important}.service-card-wide>p{font-size:16px;line-height:25px}}
@media(max-width:900px){.stats{margin-top:36px;min-height:154px;padding:28px 8px}.stats .stat{padding:0 16px!important}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.service-card{min-height:310px}.service-card-wide{min-height:250px}.service-card-wide>p{grid-row:2/4}.service-card-wide .learn{padding-top:0}.project-controls{gap:10px}}
@media(max-width:600px){
  .stats{margin-top:28px;padding:28px 8px;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px;border-radius:20px;min-height:0}
  .stats .stat{padding:0 16px!important;border:0!important}
  .stats .stat:nth-of-type(even){border-left:1px solid #dedee2!important}
  .stats .stat strong{font-size:42px;line-height:1.1}
  .stats .stat span{font-size:16px;line-height:23px}
  .service-grid{grid-template-columns:1fr}
  .service-card{min-height:285px}
  .service-card-wide{display:flex;min-height:285px;gap:0}
  .service-card-wide .card-top{margin-bottom:20px}
  .service-card-wide h3{margin-bottom:12px}
  .service-card-wide>p{font-size:16px;line-height:25px}
  .service-card-wide .learn{padding-top:20px;margin-top:auto}
  .project-controls{gap:10px}
  .hero-panel h1 .script{font-size:clamp(29px,9vw,40px);line-height:1.4;letter-spacing:-1.3px}
  nav>a:not(.button):after{bottom:5px;right:auto;width:28px}
  .project-open:hover img{transform:scale(.7) translate(3px,-3px)}
}
@media(prefers-reduced-motion:reduce){
  .service-card:hover,.service-card:focus-within,.button:hover,.button:active,.slider-controls button:hover,.project-photo:hover img,.project-open:hover img,.learn:hover img,.learn:focus-visible img,.about-images:hover .about-back,.about-images:hover .about-front{transform:none}
}