.quote-form.is-submitted > :not(.form-confirmation) { display:none; }.form-error { display:flex; align-items:center; gap:.75rem; margin-top:1.5rem; padding:1.1rem 1.4rem; border:1px solid #e39378; background:rgba(227,147,120,.12); color:#f7cac0; font-size:.88rem; line-height:1.45; }.form-error[hidden] { display:none; }.field.has-error input,.field.has-error select,.field.has-error textarea,.file-area.has-error .file-dropzone { border-color:#dcaaa4; box-shadow:0 0 0 1px #dcaaa4; }.quote-turnstile { max-width:100%; }.quote-turnstile[hidden],.turnstile-load-error[hidden] { display:none; }.turnstile-load-error { margin:0; color:var(--muted); font-size:.82rem; line-height:1.55; }.button:disabled,.button.is-loading { opacity:.6; cursor:not-allowed; transform:none !important; }
.brand { display:block; width:128px; aspect-ratio:4/1; background:url("/media/shed-built-logo.png") center/contain no-repeat; }.brand span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }.hero-content { padding-bottom:5.75rem; }.page-header { position:absolute; background:transparent; }.page-hero { padding:9.5rem 0 4.5rem; background:linear-gradient(135deg,#1e1f1b,#11120f 65%); border-bottom:1px solid var(--line); }.page-hero h1 { max-width:960px; margin:0; font-size:clamp(3rem,8vw,7.5rem); line-height:.9; letter-spacing:-.075em; }.page-hero h1 em { font-family:var(--serif); font-weight:500; letter-spacing:-.08em; }
.quote-page { padding-top:8.5rem; min-height:calc(100svh - 100px); }.quote-page .quote-form-heading h1 { max-width:800px; margin:0; font-size:clamp(2.35rem,5vw,5.5rem); line-height:.98; letter-spacing:-.065em; }.quote-page .quote-form-heading h1 em { font-family:var(--serif); font-weight:500; letter-spacing:-.08em; }.quote-page .form-group__heading h2 { margin:0; font-size:1.1rem; letter-spacing:-.045em; }.quote-page .quote-form { padding:1.5rem; border:1px solid rgba(233,229,220,.22); background:#393830; box-shadow:0 18px 42px rgba(0,0,0,.16); }.quote-page .form-group:first-child { padding-top:.5rem; }
.location-map { padding:4rem 0; border-top:1px solid var(--line); background:var(--ink-2); }.location-map__grid { display:grid; gap:2rem; }.location-map__content h2 { margin:0 0 1.5rem; font-size:clamp(2.2rem,4vw,4.4rem); line-height:.98; letter-spacing:-.065em; }.location-map__content h2 em { font-family:var(--serif); font-weight:500; }.location-map address { margin:0 0 2rem; color:var(--muted); font-style:normal; line-height:1.7; }.location-map__embed { width:100%; min-height:280px; border:0; filter:grayscale(1) contrast(1.15) brightness(.78); }
.project-grid--showcase { display:grid; grid-template-columns:1fr; gap:2.75rem; }.project-card--link { display:flex; flex-direction:column; color:inherit; text-decoration:none; }.project-card__image-wrap { position:relative; aspect-ratio:4/3; overflow:hidden; background:#181916; border:1px solid var(--line); }.project-card__img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s cubic-bezier(.2,1,.3,1),filter .45s; }.project-card__placeholder { display:grid; height:100%; place-items:center; color:var(--muted); font:500 .65rem var(--mono); text-transform:uppercase; letter-spacing:.1em; }.project-card__badge { position:absolute; right:1rem; bottom:1rem; padding:.45rem .7rem; background:rgba(18,19,17,.84); border:1px solid var(--line); color:var(--sand); font:500 .6rem var(--mono); text-transform:uppercase; letter-spacing:.08em; }.project-detail { display:flex; flex-direction:column; gap:.45rem; padding-top:1rem; }.project-detail p { margin:0; color:var(--sand); font:500 .6rem var(--mono); text-transform:uppercase; letter-spacing:.09em; }.project-detail h2 { margin:0; font-size:clamp(1.35rem,3vw,2rem); letter-spacing:-.055em; }.project-card__summary { max-width:36rem; margin:.8rem 0 0; color:var(--muted); font-size:.88rem; line-height:1.65; }.project-empty { max-width:620px; padding:3rem 0; border-top:1px solid var(--line); }.project-empty h2 { margin:0; font-size:clamp(2.2rem,5vw,4.5rem); line-height:.96; letter-spacing:-.07em; }.project-empty h2 em { font-family:var(--serif); font-weight:500; }.project-empty > p:last-child { color:var(--muted); line-height:1.7; }
.case-study { background:#171815; }.back-link { display:inline-flex; color:var(--sand); font:500 .65rem var(--mono); text-transform:uppercase; letter-spacing:.1em; }.project-hero-intro { max-width:760px; margin:1.75rem 0 3rem; color:#d5d1c9; font-size:clamp(1rem,2vw,1.2rem); line-height:1.75; }.case-media figcaption { padding:.8rem 0 0; color:var(--muted); font-size:.8rem; line-height:1.5; }.case-media-grid { display:grid; gap:2.5rem; }.case-media { margin:0; }.case-media img,.case-media video { display:block; width:100%; max-height:80svh; object-fit:contain; background:#10110f; }.case-media--video { padding:0; border-top:1px solid var(--line); }
@media (hover:hover) { .project-card--link:hover .project-card__img { transform:scale(1.04); filter:brightness(1.08); }.project-card--link:hover .project-card__image-wrap { border-color:var(--sand); }.project-card--link:hover .project-detail h2 { color:var(--sand); } }
@media (min-width:700px) { .brand { width:164px; }.hero-content { padding-bottom:6.25rem; }.page-hero { padding:13rem 0 7rem; }.quote-page { padding-top:12rem; }.quote-page .shell { display:grid; grid-template-columns:minmax(240px,.75fr) minmax(0,1.25fr); gap:clamp(3rem,7vw,8rem); }.quote-page .quote-form-heading { display:block; padding:0; border:0; }.quote-page .quote-form { padding:2.25rem; }.quote-page .form-group { display:block; margin-bottom:2.25rem; }.quote-page .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:2rem; }.location-map { padding:6rem 0; }.location-map__grid { grid-template-columns:.8fr 1.2fr; gap:5rem; align-items:center; }.project-grid--showcase { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5rem 2.5rem; }.project-card--link:nth-child(even) { margin-top:5rem; }.project-card__image-wrap { aspect-ratio:16/10; }.case-media-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:3.5rem 2.5rem; }.case-media--video { grid-column:1/-1; }.case-media--video video { max-height:75svh; } }
.home-projects-link { display:none; }.home-projects { grid-column:1/-1; min-width:0; margin-top:1rem; }.home-projects__viewport { overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; scrollbar-width:none; }.home-projects__viewport::-webkit-scrollbar { display:none; }.home-projects__track { display:flex; gap:1rem; padding:0 1.25rem 1.25rem 0; }.home-project-card { flex:0 0 min(82vw,360px); scroll-snap-align:start; overflow:hidden; border:1px solid var(--line); background:#1c1d19; color:var(--paper); text-decoration:none; }.home-project-card__media { aspect-ratio:4/3; background:#11120f; overflow:hidden; }.home-project-card__media img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }.home-project-card__placeholder { display:grid; height:100%; place-items:center; color:var(--muted); font:500 .6rem var(--mono); letter-spacing:.1em; text-transform:uppercase; }.home-project-card__content { padding:1.1rem 1.15rem 1.25rem; }.home-project-card h3 { margin:0; font-size:1.15rem; letter-spacing:-.045em; }.home-project-card p { min-height:2.8em; margin:.6rem 0 1.15rem; color:var(--muted); font-size:.8rem; line-height:1.6; }.home-project-card span { color:var(--sand); font:500 .61rem var(--mono); letter-spacing:.09em; text-transform:uppercase; }.home-project-card b { margin-left:.4rem; font-size:.8rem; }.home-projects__controls { display:flex; justify-content:flex-end; gap:.5rem; }.home-projects__controls button { display:grid; width:44px; height:44px; place-items:center; border:1px solid var(--line); background:transparent; color:var(--paper); cursor:pointer; font-size:1.15rem; }.home-projects__controls button:hover { border-color:var(--sand); color:var(--sand); }.home-projects__empty { width:100%; padding:2rem 0; color:var(--muted); border-top:1px solid var(--line); font-size:.9rem; }.home-projects__controls[hidden] { display:none; } @media (min-width:700px) { .home-projects { margin-top:2rem; }.home-projects__track { gap:1.5rem; padding-bottom:1.5rem; }.home-project-card { flex-basis:calc((100% - 3rem)/3.25); }.home-project-card__media { aspect-ratio:16/10; } } @media (hover:hover) { .home-project-card:hover { border-color:var(--sand); }.home-project-card:hover img { transform:scale(1.04); } }
.home-projects { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; width:100%; min-width:0; gap:1rem; margin-top:2rem; }.home-projects__viewport { flex:0 0 100%; width:100%; min-width:0; max-width:100%; }.home-projects__track { width:max-content; min-width:100%; padding-left:0; }.home-projects__controls { justify-content:start; }.home-projects > .text-link { align-self:center; }.home-projects__controls button { width:42px; height:42px; } @media (min-width:700px) { .home-projects { margin-top:2.5rem; }.home-projects__track { width:100%; padding-left:0; }.home-project-card { flex-basis:calc((100% - 1.5rem)/2); } } @media (min-width:1000px) { .home-project-card { flex-basis:calc((100% - 3rem)/3); } }
#projects .section-heading { grid-template-columns:1fr; gap:1rem; } #projects .section-heading .eyebrow { justify-content:flex-start; } #projects .section-heading h2 { max-width:620px; }
#services .service-grid { display:none; }.services-accordion { margin-top:2.5rem; border-top:1px solid var(--line); }.services-accordion__item { border-bottom:1px solid var(--line); }.services-accordion__item h3 { margin:0; }.services-accordion button { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; width:100%; min-height:76px; gap:1rem; padding:1.15rem 0; border:0; background:transparent; color:var(--paper); text-align:left; cursor:pointer; }.services-accordion button span { color:var(--sand); font:500 .62rem var(--mono); letter-spacing:.1em; }.services-accordion button strong { font-size:clamp(1.05rem,3.8vw,1.55rem); letter-spacing:-.045em; line-height:1.08; }.services-accordion button i { display:grid; width:30px; height:30px; place-items:center; border:1px solid var(--line); color:var(--sand); font-style:normal; font-size:1.35rem; transition:background .25s,color .25s,transform .25s; }.services-accordion button[aria-expanded="true"] i { background:var(--sand); color:var(--ink); transform:rotate(180deg); }.services-accordion__panel { display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s ease; }.services-accordion__panel > p { min-height:0; overflow:hidden; max-width:720px; margin:0; color:var(--muted); font-size:.92rem; line-height:1.75; }.services-accordion button[aria-expanded="true"] + .services-accordion__panel { grid-template-rows:1fr; }.services-accordion button[aria-expanded="true"] + .services-accordion__panel > p { padding:0 3rem 1.6rem calc(.62rem + 1rem); }.services-accordion__link { display:inline-block; margin-top:1.5rem; }.services--full .services-accordion { margin-top:3.5rem; }.services-accordion--full button { min-height:92px; }.services-accordion--full button[aria-expanded="true"] + .services-accordion__panel > p { padding-bottom:2.25rem; } @media (hover:hover) { .services-accordion button:hover strong { color:var(--sand); }.services-accordion button:hover i { border-color:var(--sand); } } @media (min-width:700px) { .services-accordion { margin-top:3.5rem; }.services-accordion button { min-height:98px; gap:1.5rem; }.services-accordion button[aria-expanded="true"] + .services-accordion__panel > p { padding-left:calc(.62rem + 1.5rem); padding-bottom:2rem; } }
#services .section-heading { grid-template-columns:1fr; gap:1rem; }.services .section-heading .eyebrow { justify-content:flex-start; }.services .material-strip { justify-content:flex-start; }.statement .eyebrow { justify-content:flex-start; }.statement p:last-child { margin-left:0; }.quote-form-section .quote-form-heading { grid-template-columns:1fr; gap:1rem; }.quote-form-section .quote-form-heading div > p { margin-left:0; }
.services-accordion__panel { display:block; max-height:none; overflow:visible; }.services-accordion__panel[hidden] { display:none; }.services-accordion__panel > p { opacity:1; transform:none; padding:0 3rem 1.6rem calc(.62rem + 1rem); transition:none; }.services-accordion--full .services-accordion__panel > p { padding-bottom:2.25rem; } @media (min-width:700px) { .services-accordion__panel > p { padding-left:calc(.62rem + 1.5rem); padding-bottom:2rem; } }
.services-showcase,.faq-showcase { display:grid; gap:1.5rem; margin-top:1.4rem; }.services-showcase .services-accordion { margin-top:0; border-top:0; }.services-showcase__image,.faq-showcase__image { min-height:300px; margin:0; overflow:hidden; border:1px solid var(--line); background:var(--ink); }.services-showcase__image img,.faq-showcase__image img { display:block; width:100%; height:100%; object-fit:cover; }.faq .section-heading { grid-template-columns:1fr; gap:1rem; }.faq .section-heading .eyebrow { justify-content:flex-start; }.faq-accordion { border-top:0; }.faq-accordion__item { border-bottom:1px solid var(--line); }.faq-accordion__item h3 { margin:0; }.faq-accordion button { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; width:100%; min-height:76px; gap:1rem; padding:1.15rem 0; border:0; background:transparent; color:var(--paper); text-align:left; cursor:pointer; }.faq-accordion button span { color:var(--sand); font:500 .62rem var(--mono); letter-spacing:.1em; }.faq-accordion button strong { font-size:clamp(1rem,3.5vw,1.35rem); letter-spacing:-.045em; line-height:1.1; }.faq-accordion button i { display:grid; width:30px; height:30px; place-items:center; border:1px solid var(--line); color:var(--sand); font-style:normal; font-size:1.35rem; transition:background .25s,color .25s,transform .25s; }.faq-accordion button[aria-expanded="true"] i { background:var(--sand); color:var(--ink); transform:rotate(180deg); }.faq-accordion__panel { display:block; max-height:none; overflow:visible; }.faq-accordion__panel[hidden] { display:none; }.faq-accordion__panel > p { margin:0; padding:0 3rem 1.6rem calc(.62rem + 1rem); color:var(--muted); font-size:.92rem; line-height:1.75; }.faq-accordion button:hover strong,.faq-accordion button:hover i { color:var(--sand); }.faq-accordion button:hover i { border-color:var(--sand); } @media (min-width:900px) { .services-showcase,.faq-showcase { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:stretch; gap:clamp(2rem,5vw,5rem); margin-top:2rem; }.services-showcase__image,.faq-showcase__image { min-height:100%; }.faq-accordion button { min-height:98px; gap:1.5rem; }.faq-accordion__panel > p { padding-left:calc(.62rem + 1.5rem); padding-bottom:2rem; } }