/* Production additions on top of the unchanged prototype stylesheets. */

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:20;background:#fff;color:#101715;padding:10px 14px;border-radius:3px;font-size:13px}
.skip-link:focus{top:12px}
html,body{overflow-x:clip}
.button{text-transform:uppercase}
.nav .site-name{font-size:18px;font-weight:700;letter-spacing:-.3px}

/* Hero without an approved photo: a calm dark backdrop in the brand palette instead of an unlicensed image. */
.hero--no-photo:before{background:radial-gradient(ellipse 60% 70% at 85% 30%,#1d6b2c55 0%,#1d6b2c00 70%),radial-gradient(ellipse 50% 60% at 70% 90%,#29d23822 0%,#29d23800 70%),linear-gradient(135deg,#14211b 0%,#0b1511 55%,#060c0a 100%)}
.hero--no-photo:after{background:linear-gradient(90deg,#060e0cd0 0%,#060e0c80 45%,#060e0c00 80%)}
.holding .hero--no-photo:after{background:linear-gradient(0deg,#08110e 0%,#08110e00 45%)}

.company-image--fallback{height:190px;background:radial-gradient(ellipse 70% 90% at 80% 20%,#1d6b2c66 0%,#1d6b2c00 70%),linear-gradient(135deg,#17251e,#09120e)}

.contact-details{list-style:none;margin:0;padding:22px;border:1px solid #44594b;font-size:14px;color:#dbe4dd;display:grid;gap:12px;min-width:240px;max-width:340px}
.contact-details a{text-decoration:underline;text-underline-offset:3px}
.contact-details dt{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#8fa296}
.contact-details dd{margin:2px 0 0}

/* Project cards and album dialog (on top of the prototype gallery stylesheet) */
.project{display:flex;flex-direction:column}
.project-cover{cursor:pointer;aspect-ratio:4/3}
.project-cover img{height:100%;object-fit:cover}
.project-cover:focus-visible,.project-open:focus-visible,.album button:focus-visible{outline:3px solid #1ca737;outline-offset:3px}
.project-summary{display:flex;flex-direction:column;align-items:flex-start;flex:1}
.project h3{overflow-wrap:anywhere;hyphens:auto}
.project-open{cursor:pointer;margin-top:auto;min-height:44px}
.no-js .project-open{display:none}
.no-js .project-cover{cursor:default}
.album-top .album-close{cursor:pointer;min-height:44px;min-width:44px}
.album-stage{display:grid;place-items:center;min-height:min(42dvh,380px)}
.album-photo{width:100%;height:min(54dvh,560px);object-fit:contain}
.album-stage[data-state="loading"] .album-photo,.album-stage[data-state="error"] .album-photo{visibility:hidden}
.album-status{position:absolute;inset:auto 0;margin:0;text-align:center;color:#dce5dd;font-size:13px}
.album-status[hidden]{display:none}
.album-arrow{cursor:pointer;z-index:1}
.album-arrow[hidden],.album-counter[hidden],.album-dots[hidden],.album-caption-text[hidden]{display:none}
.album-caption{min-height:44px}
.album-dots{flex-wrap:wrap;justify-content:flex-end}
.album-prose p{font-size:15px;line-height:1.85;color:#4b5c50;margin:0 0 15px}
.album-prose ul,.album-prose ol{color:#4b5c50;line-height:1.8;padding-left:1.3em}
.album-prose a{color:#16772c;text-decoration:underline;text-underline-offset:3px}
.album-description h2{overflow-wrap:anywhere}
@media(max-width:650px){.album-photo{height:min(42dvh,380px)}.album-prose p{font-size:14px;line-height:1.8}}
@media(prefers-reduced-motion:reduce){.album::backdrop{backdrop-filter:none}.project-cover img{transition:none}}
.inspiration .rich-text p{color:#5b675f;line-height:1.7;max-width:440px}
footer .footer-text{margin:8px 0 0;white-space:pre-line}

@media(max-width:900px){.company-image--fallback{height:140px}}
@media(max-width:650px){
  .company-image--fallback{height:175px}
  .no-js .menu{display:none}
  .no-js .links{display:flex;position:static;padding:0 0 20px}
  .no-js .nav{height:auto;flex-wrap:wrap}
  .links{max-height:calc(100dvh - 94px);overflow-y:auto}
  .links a{padding:8px 0}
  .links a:first-child{padding-bottom:8px}
  .contact-details{max-width:none;width:100%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* 404 page: same layout as the site, one calm message with the way home. */
.not-found{padding:110px 7% 130px;max-width:760px}
.not-found h1{font-size:clamp(32px,5vw,52px);line-height:1.1;margin:10px 0 18px}
.not-found p{color:#5b675f;line-height:1.7;margin:0 0 30px}
.not-found .eyebrow{color:#209934}
/* The holding header floats over its hero; on the 404 page there is no hero, so it gets a solid backdrop. */
.holding .not-found{padding-top:220px}
.holding:has(.not-found) .nav{background:#07100e}