/* Reading correction 01, homepage only. Original logo images stay unchanged. */
.site-header .brand{display:grid;grid-template-columns:max-content max-content;gap:6px 15px}
.brand .brand-mark{grid-column:1;grid-row:1}
.brand .brand-lettering{grid-column:2;grid-row:1}
.brand-tagline{grid-column:2;grid-row:2;font-size:12px;line-height:1.25;letter-spacing:0;color:#b6c1ce;white-space:nowrap}
.hero-overline h1{font-size:clamp(24px,2vw,30px);font-weight:500;line-height:1.25;letter-spacing:-.025em;max-width:1100px;text-wrap:balance}
.hero-facts{grid-template-columns:1.05fr .85fr 1.35fr}
.hero-service-fact dd{max-width:240px}
/* Reading 04: orange invitation, isolated to the homepage hero CTA. */
.hero-cta{position:relative;border-bottom-color:transparent;transition:none}
.hero-cta::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:#E58A3C;pointer-events:none}
.hero-cta>span{color:#E58A3C;transform:none;transition:none}
.hero-cta:hover{border-bottom-color:transparent;color:inherit}
@media(min-width:861px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hero-cta::after{transition:width 220ms ease,background-color 220ms ease}
  .hero-cta>span{transition:transform 220ms ease}
  .hero-cta:hover::after{width:calc(100% + 8px);background:#F5A45F}
  .hero-cta:hover>span{transform:translate(4px,-4px)}
}
@media(max-width:620px){
  .site-header .brand{gap:5px 9px}
  .brand-tagline{font-size:10px}
  .hero-overline h1{font-size:22px;line-height:1.3;max-width:none}
  .hero-facts{grid-template-columns:1.15fr .8fr 1.45fr}
}
@media(max-width:359px){.site-header .brand{column-gap:7px}.brand-tagline{font-size:9.5px}}
/* Reading 05: keep the reviewed crops intact, not a second CSS crop. */
.home-detail-photo img{height:auto;aspect-ratio:1400/933;object-fit:contain;object-position:center}
/* Reading 07: the same invitation on the single project CTA, not other text links. */
#project .project-bottom>.text-link[href="#request"]{position:relative;border-bottom-color:transparent;transition:none}
#project .project-bottom>.text-link[href="#request"]::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:#E58A3C;pointer-events:none}
#project .project-bottom>.text-link[href="#request"]>span{color:#E58A3C;transform:none;transition:none}
#project .project-bottom>.text-link[href="#request"]:hover{border-bottom-color:transparent}
@media(min-width:861px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  #project .project-bottom>.text-link[href="#request"]::after{transition:width 220ms ease,background-color 220ms ease}
  #project .project-bottom>.text-link[href="#request"]>span{transition:transform 220ms ease}
  #project .project-bottom>.text-link[href="#request"]:hover::after{width:calc(100% + 8px);background:#F5A45F}
  #project .project-bottom>.text-link[href="#request"]:hover>span{transform:translate(4px,-4px)}
}
/* Reading 09: a real project drawing beside the FAQ, not a new product claim. */
#faq .home-faq-visual{max-width:380px;margin:24px 0 0}
#faq .home-faq-visual>a{display:block;position:relative;padding:12px;background:#E5E9ED}
#faq .home-faq-visual img{display:block;width:100%;height:224px;object-fit:contain;background:#fff}
#faq .home-faq-expand{position:absolute;right:20px;bottom:20px;display:grid;place-items:center;width:32px;height:32px;background:#fff;color:#1C1E20;border:1px solid #bfc8d1;font-size:21px}
#faq .home-faq-visual figcaption{margin-top:9px;font-size:11px;line-height:1.5;color:#56616b}
@media(max-width:860px){#faq .home-faq-visual img{height:180px}}
@media(max-width:620px){
  #faq .home-faq-visual{max-width:380px;margin-top:22px}
  #faq .home-faq-visual>a{padding:10px}
  #faq .home-faq-visual img{height:148px}
  #faq .home-faq-expand{right:16px;bottom:16px}
}
@media(min-width:621px) and (max-height:760px){#faq .faq-heading{position:static}}