.tools-hero {
  position:relative;
  min-height:100svh;
  padding:calc(var(--head) + 62px) var(--pad) 55px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5vw;
  align-items:center;
  background:#f0efe9
}
.tools-hero .breadcrumbs {
  margin-bottom:36px
}
.tools-hero h1 {
  font-size:clamp(3.9rem,6.3vw,7rem);
  margin-top:25px;
  line-height:1.02
}
.tools-hero .tool-name {
  margin-top:26px;
  font-size:1.5rem;
  font-weight:400;
  letter-spacing:-.03em
}
.tools-hero .description {
  margin-top:18px;
  color:#555952;
  max-width:39ch
}
.tools-hero figure {
  margin:0;
  position:relative;
  align-self:stretch;
  display:flex;
  align-items:center;
  min-width:0
}
.tools-hero figure img {
  width:100%;
  height:auto;
  max-height:670px;
  object-fit:contain
}
.tools-hero figcaption {
  position:absolute;
  bottom:4px;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding-top:17px;
  border-top:1px solid #18191740
}
.tools-hero.valeri {
  background:#f4f4f0
}
.tools-hero.valeri figure img {
  mix-blend-mode:multiply
}
.tools-hero.cepillo figure img {
  border-radius:2px
}
.tools-intro {
  max-width:1500px;
  margin:auto
}
.tool-features {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:28px;
  margin-top:70px
}
.tool-features article {
  border-top:1px solid #18191735;
  padding-top:23px
}
.tool-features .num {
  font-size:.8rem;
  color:#8b733e
}
.tool-features h3 {
  font-size:1.45rem;
  letter-spacing:-.04em;
  line-height:1.2;
  margin:26px 0 18px
}
.tool-features p {
  font-size:.95rem;
  color:#555952
}
.tool-story {
  display:grid;
  grid-template-columns:1fr 1fr;
  background:#21231f;
  color:#f5f5ef
}
.tool-story figure {
  margin:0;
  min-height:650px;
  position:relative
}
.tool-story img {
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  object-fit:cover;
  object-position:72% center
}
.tool-story.valeri-story img {
  object-position:53% center
}
.tool-story-copy {
  padding:85px var(--pad);
  align-self:center
}
.tool-story .kicker {
  color:#c5b48b
}
.tool-story h2 {
  font-size:clamp(2.9rem,4.3vw,5rem);
  line-height:1.07;
  margin:25px 0
}
.tool-story .description {
  color:#d0d3c7
}
.tool-story .text-link {
  margin-top:30px
}
.tool-specs {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:7vw
}
.tool-specs h2 {
  font-size:clamp(2.8rem,4.4vw,5rem);
  margin-top:25px
}
.tool-specs .spec-intro {
  margin-top:25px;
  color:#555952
}
.spec-list {
  margin:0
}
.spec-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  border-top:1px solid #18191733;
  padding:20px 0
}
.spec-row:last-child {
  border-bottom:1px solid #18191733
}
.spec-row dt {
  color:#555952
}
.spec-row dd {
  margin:0;
  font-weight:500
}
.tools-showcase {
  padding:100px var(--pad);
  background:#edeee7
}
.tools-showcase-heading {
  display:flex;
  justify-content:space-between;
  gap:50px;
  align-items:end;
  margin-bottom:50px
}
.tools-showcase h2 {
  font-size:clamp(2.8rem,4.5vw,5rem);
  margin-top:24px;
  line-height:1.08
}
.tools-showcase-heading>p {
  color:#555952;
  max-width:33ch
}
.tool-cards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px
}
.tool-card {
  min-width:0;
  display:block
}
.tool-card-image {
  height:clamp(300px,32vw,520px);
  background:#f9f9f5;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center
}
.tool-card img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s
}
.tool-card.valeri-card img {
  object-fit:contain;
  mix-blend-mode:multiply;
  padding:30px
}
.tool-card:hover img {
  transform:scale(1.025)
}
.tool-card-text {
  display:flex;
  justify-content:space-between;
  gap:25px;
  border-bottom:1px solid #18191740;
  padding:23px 0
}
.tool-card h3 {
  font-size:1.7rem;
  letter-spacing:-.035em;
  line-height:1.2
}
.tool-card p {
  margin-top:10px;
  font-size:.95rem;
  color:#555952
}
.tool-card .card-arrow {
  font-size:1.6rem
}
.tools-related {
  padding:45px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  border-top:1px solid #18191730;
  background:#edeee7
}
.tools-related h2 {
  font-size:clamp(2rem,3vw,3.5rem);
  margin-top:16px
}
.tools-page .footer-nav {
  gap:40px
}
.tools-page .source-note {
  color:#d0d3c7
}
@media(max-width:1100px) {
  .tool-features {
    grid-template-columns:repeat(3,1fr)
  }
  .tools-hero {
    gap:30px
  }
  .tools-hero h1 {
    font-size:4rem
  }
  .tools-hero figure {
    min-height:450px
  }
  .tool-story-copy {
    padding:60px 35px
  }
}
@media(max-width:820px) {
  .tools-hero {
    grid-template-columns:1fr;
    padding-top:calc(var(--head) + 30px);
    gap:30px;
    min-height:100svh
  }
  .tools-hero h1 {
    font-size:clamp(3.4rem,8vw,5rem)
  }
  .tools-hero .breadcrumbs {
    margin-bottom:26px
  }
  .tools-hero figure {
    min-height:0;
    padding-bottom:48px;
    max-width:620px;
    width:100%;
    justify-self:center
  }
  .tools-hero figure img {
    max-height:470px;
    width:100%;
    object-fit:contain
  }
  .tools-hero .description {
    max-width:52ch
  }
  .tool-story {
    grid-template-columns:1fr
  }
  .tool-story figure {
    min-height:470px
  }
  .tool-story-copy {
    padding:60px var(--pad)
  }
  .tool-specs {
    grid-template-columns:1fr;
    gap:45px
  }
  .tools-showcase-heading {
    display:block
  }
  .tools-showcase-heading>p {
    margin-top:25px;
    max-width:48ch
  }
  .tool-features {
    grid-template-columns:repeat(2,1fr)
  }
  .tools-related {
    align-items:flex-start;
    flex-direction:column
  }
  .tools-page .footer-nav {
    flex-wrap:wrap
  }
}
@media(max-width:560px) {
  .tools-hero h1 {
    font-size:3.35rem
  }
  .tools-hero .tool-name {
    font-size:1.3rem
  }
  .tools-hero .actions {
    gap:18px
  }
  .tools-hero figure img {
    max-height:360px
  }
  .tools-hero figcaption {
    font-size:.65rem;
    gap:20px
  }
  .tool-features {
    grid-template-columns:1fr;
    margin-top:40px;
    gap:25px
  }
  .tool-features article {
    padding-left:40px;
    position:relative
  }
  .tool-features .num {
    position:absolute;
    left:0;
    top:25px
  }
  .tool-features h3 {
    margin:0 0 14px;
    font-size:1.6rem
  }
  .tool-features p {
    font-size:1rem
  }
  .tool-story figure {
    min-height:350px
  }
  .tool-story-copy {
    padding:50px 24px
  }
  .tool-story h2 {
    font-size:2.8rem
  }
  .tool-specs h2 {
    font-size:2.8rem
  }
  .spec-row {
    gap:20px;
    font-size:.9375rem
  }
  .tools-showcase {
    padding:60px 24px
  }
  .tools-showcase h2 {
    font-size:2.8rem
  }
  .tool-cards {
    grid-template-columns:1fr;
    gap:40px
  }
  .tool-card-image {
    height:340px
  }
  .tools-showcase-heading {
    margin-bottom:35px
  }
  .tool-card h3 {
    font-size:1.6rem
  }
  .tools-page .footer-nav {
    gap:30px
  }
  .tools-page .header-contact {
    display:none
  }
}
@media(prefers-reduced-motion:reduce) {
  .tool-card img {
    transition:none
  }
}
/* Full-bleed photographic banners, aligned with the treatment campaign. */
.tools-banner {
  background:#c5c6c2;
  min-height:max(800px,100svh)
}
.tools-banner:before {
  background:linear-gradient(90deg,#d6d7d2ed 0%,#d6d7d2b5 31%,#d6d7d224 57%,transparent 70%)
}
.tools-banner .copy {
  width:45%;
  max-width:590px
}
.tools-banner .photo {
  object-position:73% center
}
.tools-banner h1 {
  font-size:clamp(4.5rem,8vw,8.5rem)
}
.tools-banner .description {
  max-width:31ch
}
.tools-banner .tagline {
  max-width:22ch
}
.tools-banner .hero-base {
  background:#e4e5dfed
}
.tool-card.photo-card img {
  object-fit:cover;
  object-position:81% center;
  mix-blend-mode:normal;
  padding:0
}
.tool-story.valeri-story img {
  object-position:78% center
}
@media(max-width:1100px) and (min-width:821px) {
  .tools-banner .copy {
    width:46%
  }
  .tools-banner h1 {
    font-size:5.5rem
  }
  .tools-banner .tagline {
    font-size:1.7rem
  }
}
@media(max-width:820px) {
  .tools-banner {
    padding-top:400px;
    padding-bottom:95px;
    align-items:flex-end;
    min-height:max(1000px,100svh);
    background:#d8d9d3
  }
  .tools-banner .copy {
    width:100%;
    max-width:560px
  }
  .tools-banner .photo {
    height:64%;
    object-position:85% 35%
  }
  .tools-banner:before {
    background:linear-gradient(0deg,#d8d9d3 0%,#d8d9d3 39%,#d8d9d3e6 52%,#d8d9d31a 68%,transparent 79%)
  }
  .tools-banner h1 {
    font-size:4.3rem
  }
  .tools-banner .description {
    max-width:38ch
  }
  .tools-banner .breadcrumbs {
    margin-bottom:20px
  }
  .tools-banner .copy>.kicker {
    margin-bottom:18px
  }
  .tools-banner .hero-base {
    bottom:0
  }
}
@media(max-width:560px) {
  .tools-banner {
    min-height:max(960px,100svh);
    padding:365px 24px 95px
  }
  .tools-banner .photo {
    height:56%;
    object-position:83% 30%
  }
  .tools-banner:before {
    background:linear-gradient(0deg,#d8d9d3 0%,#d8d9d3 43%,#d8d9d3e8 55%,#d8d9d329 70%,transparent 82%)
  }
  .tools-banner h1 {
    font-size:3.6rem;
    line-height:1
  }
  .tools-banner .tagline {
    font-size:1.5rem;
    margin-top:17px;
    max-width:24ch
  }
  .tools-banner .description {
    font-size:1rem;
    max-width:32ch;
    margin-top:16px
  }
  .tools-banner .actions {
    margin-top:23px;
    gap:15px
  }
  .tools-banner .breadcrumbs {
    font-size:.75rem;
    margin-bottom:16px
  }
  .tools-banner .copy>.kicker {
    font-size:.75rem;
    margin-bottom:15px
  }
}