.institutional-page {
  --institutional-green: #233b18;
  --institutional-gold: #bfa344;
  --institutional-olive: #596047;
  --institutional-brown: #70594f;
}

.institutional-page .hero-copy,
.institutional-page .split > *,
.institutional-page .grid-3 > *,
.institutional-page .contact-cards > * {
  min-width: 0;
}

.institutional-page .btn {
  gap: 10px;
  max-width: 100%;
  text-align: center;
  justify-content: center;
}

.institutional-page .btn img { flex: 0 0 auto; }
.institutional-page .gold-text { color: var(--institutional-gold); }
.institutional-page .institutional-hero-logo { width: 200px; height: auto; margin-bottom: 24px; }
.institutional-page .hero-profession { text-transform: uppercase; letter-spacing: 1.7px; font-size: 15px; }
.institutional-page .hero .service-highlight { display: flex; align-items: center; gap: 16px; margin: 18px 0 28px; }
.institutional-page .service-spark { display: grid; place-items: center; flex: 0 0 50px; width: 50px; height: 50px; border-radius: 3px; background: linear-gradient(120deg, #c4a344, #ebd26c); }
.institutional-page .service-spark::before { content: ""; width: 25px; height: 25px; background: white; clip-path: polygon(43% 9%, 56% 37%, 83% 50%, 56% 63%, 43% 94%, 31% 63%, 3% 50%, 31% 37%, 43% 9%, 82% 0%, 86% 9%, 96% 13%, 86% 17%, 82% 27%, 78% 17%, 68% 13%, 78% 9%, 82% 0%); }

.institutional-page .service-explanation { align-items: start; }
.institutional-page .service-explanation h2 { color: var(--institutional-green); font-size: clamp(32px, 3.1vw, 44px); line-height: 1.2; margin: 0 0 30px; }
.institutional-page .service-explanation p { font-size: 20px; line-height: 1.55; margin: 0 0 18px; }
.institutional-page .cleaning-explanation p { color: #73766f; }
.institutional-page .cleaning-treatment-photo { display: block; width: 100%; max-width: 395px; height: auto; justify-self: center; }
.institutional-page .hair-treatment-photo { display: block; width: 100%; max-width: 480px; height: auto; border-radius: 28px; justify-self: center; }
.institutional-page .cleaning-explanation { padding-bottom: 140px; }
.institutional-page .hair-explanation { padding-top: 40px; padding-bottom: 20px; }

.institutional-page .bio { gap: 100px; }
.institutional-page .bio-portrait { position: relative; }
.institutional-page .bio-portrait img { display: block; width: 100%; height: auto; border-radius: 22px; }
.institutional-page .bio-portrait::before,
.institutional-page .bio-portrait::after { content: ""; position: absolute; z-index: 1; width: 78px; height: 78px; background: #ccb148; clip-path: polygon(50% 0%, 59% 31%, 69% 41%, 100% 50%, 69% 59%, 59% 69%, 50% 100%, 41% 69%, 31% 59%, 0% 50%, 31% 41%, 41% 31%); }
.institutional-page .bio-portrait::before { left: -34px; top: 26px; }
.institutional-page .bio-portrait::after { width: 48px; height: 48px; right: -9px; bottom: 35px; }
.institutional-page .bio h2 { color: var(--institutional-olive); font-size: clamp(32px, 3.35vw, 46px); line-height: 1.12; margin: 0 0 22px; }
.institutional-page .bio p { margin: 0; }
.institutional-page .bio p + p { margin-top: 30px; }

.institutional-page .cleaning-steps { padding-bottom: 70px; }
.institutional-page .cleaning-steps h2 { font-size: 27px; line-height: 1.2; margin: 0 0 12px; color: var(--institutional-green); }
.institutional-page .step-image { display: block; }
.institutional-page button.step-image { width: 100%; border: 0; background: none; padding: 0; }
.institutional-page button.step-link { width: 100%; border: 0; text-align: left; }
.institutional-page .step-image img { width: 100%; height: auto; display: block; border-radius: 6px; }
.institutional-page .step-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 15px; margin-top: 15px; border-radius: 5px; color: #fff; background: #273b10; text-decoration: none; font-size: 17px; }
.institutional-page .step-link span { font-size: 30px; line-height: 1; font-weight: 400; }
.institutional-page .step-link:hover { background: #3e5426; }
.institutional-page .institutional-contacts { background: linear-gradient(#fff, #f4f4f2); padding-top: 70px; padding-bottom: 110px; }
.institutional-page .contact-cards article { display: flex; flex-direction: column; align-items: flex-start; padding: 38px; border: 1px solid #e9e9e6; border-radius: 6px; background: #fff; }
.institutional-page .contact-cards h2 { font-size: 26px; line-height: 1.2; margin: 16px 0 10px; color: var(--institutional-olive); }
.institutional-page .contact-cards p { line-height: 1.5; margin: 0 0 32px; }
.institutional-page .contact-cards .btn { margin-top: auto; padding: 12px 24px; font-size: 15px; line-height: 1.5; }

.institutional-page .consultation-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; margin-top: 44px; }
.institutional-page .consultation-actions .btn { min-height: 62px; padding-inline: 42px; }
.institutional-page .institutional-outline { color: #fff; border: 1px solid var(--institutional-gold); background: transparent; }
.institutional-page .institutional-outline:hover { background: #ffffff14; }
.institutional-page .diagnostic-section { padding-top: 120px; padding-bottom: 120px; color: #70736d; }
.institutional-page .diagnostic-section h2 { font-size: clamp(38px, 4.55vw, 62px); font-weight: 400; line-height: 1.04; letter-spacing: -1.8px; color: var(--institutional-green); margin: 24px 0 40px; }
.institutional-page .diagnostic-section strong { color: var(--institutional-green); }
.institutional-page .diagnostic-section .eyebrow { color: var(--institutional-gold); font-weight: 700; display: flex; align-items: center; gap: 14px; line-height: 1.6; }
.institutional-page .diagnostic-section .eyebrow::before { content: ""; width: 42px; height: 1px; background: currentColor; flex: 0 0 auto; }
.institutional-page .diagnostic-section .center .eyebrow { justify-content: center; }
.institutional-page .diagnostic-section .center .eyebrow::after { content: ""; width: 36px; height: 1px; background: currentColor; }
.institutional-page .tissue-section { align-items: start; grid-template-columns: .9fr 1.1fr; }
.institutional-page .diagnostic-photo { position: relative; padding: 18px 0 0 18px; }
.institutional-page .diagnostic-photo::before { content: ""; position: absolute; left: 0; top: 0; width: 76%; height: 86%; border: 1px solid #ddd1a6; border-radius: 3px; }
.institutional-page .diagnostic-photo img { position: relative; display: block; width: 100%; height: auto; }
.institutional-page .tissue-photo { max-width: 395px; }
.institutional-page .tissue-copy > p { font-size: 18px; margin: 0 0 26px; }
.institutional-page .tissue-copy blockquote { font: 32px/1.2 Georgia, serif; color: var(--institutional-brown); background: #f6f5f0; border-left: 2px solid var(--institutional-gold); padding: 30px 38px; margin: 40px 0 30px; }
.institutional-page .numbered-statement { display: flex; align-items: flex-start; gap: 20px; margin-top: 40px; }
.institutional-page .numbered-statement p { font: 34px/1.12 Georgia, serif; color: var(--institutional-green); margin: 0; }
.institutional-page .diagnostic-number { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border: 1px solid #ded3ad; border-radius: 50%; font: bold 14px/1 Georgia, serif; color: var(--institutional-gold); }
.institutional-page .reading-copy { padding-left: 34px; border-left: 1px solid #ded3ad; }
.institutional-page .reading-copy h3 { font-size: 32px; font-weight: 400; line-height: 1.25; color: var(--institutional-brown); margin: 0 0 26px; }
.institutional-page .reading-copy p { margin: 0; }
.institutional-page .methodology-heading { display: flex; align-items: center; gap: 30px; font-size: 36px; font-weight: 400; color: var(--institutional-green); margin: 48px 0 34px; }
.institutional-page .methodology-heading::after { content: ""; height: 1px; flex: 1; background: linear-gradient(to right, #ddd1a6, transparent); }
.institutional-page .methodology-cards { list-style: none; padding: 0; margin: 0; }
.institutional-page .methodology-cards li { position: relative; padding: 38px 34px 70px; border: 1px solid #e9e5d7; border-radius: 2px; box-shadow: 0 16px 32px #4b3c1510; min-height: 350px; }
.institutional-page .methodology-cards li::before { content: attr(data-step); position: absolute; top: 28px; right: 25px; font: 80px/1 Georgia, serif; color: #f8f7ee; }
.institutional-page .methodology-cards li::after { content: ""; position: absolute; left: 34px; bottom: 26px; width: 48px; height: 2px; background: var(--institutional-gold); }
.institutional-page .methodology-cards h4 { position: relative; font: 30px/1.2 Georgia, serif; color: var(--institutional-green); margin: 32px 0 14px; }
.institutional-page .methodology-cards p { margin: 0; }
.institutional-page .evaluation-section { grid-template-columns: .95fr 1.05fr; }
.institutional-page .evaluation-portrait { margin: 0; }
.institutional-page .evaluation-portrait figcaption { margin: 20px 0 0 18px; font-size: 11px; }
.institutional-page .evaluation-list { list-style: none; padding: 0; margin: 0; }
.institutional-page .evaluation-list li { display: flex; align-items: flex-start; gap: 30px; padding: 26px 0; border-bottom: 1px solid #ece8db; }
.institutional-page .evaluation-list h3 { font-size: 27px; font-weight: 400; line-height: 1.25; color: var(--institutional-green); margin: 0 0 8px; }
.institutional-page .evaluation-list p { margin: 0; line-height: 1.65; }
.institutional-page .audience-section { align-items: start; }
.institutional-page .serif-intro { font: 32px/1.25 Georgia, serif; color: var(--institutional-brown); }
.institutional-page .gold-rule { display: block; width: 65px; height: 2px; background: var(--institutional-gold); margin-top: 38px; }
.institutional-page .audience-list { list-style: none; padding: 0; margin: 0; }
.institutional-page .audience-list li { position: relative; padding: 28px 0 28px 68px; border-bottom: 1px solid #e8e2d3; }
.institutional-page .audience-list li:first-child { padding-top: 0; }
.institutional-page .audience-list li:last-child { border-bottom: 0; }
.institutional-page .audience-list li::before { content: "\2713"; position: absolute; left: 0; top: 26px; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #ded3ad; border-radius: 50%; color: var(--institutional-gold); font-size: 20px; }
.institutional-page .audience-list li:first-child::before { top: 0; }
.institutional-page .modalities-intro { max-width: 770px; margin: -8px auto 66px; font-size: 18px; }
.institutional-page .modality-cards { gap: 26px; align-items: stretch; }
.institutional-page .modality-cards article { position: relative; border: 1px solid #e5ddc5; border-radius: 3px; padding: 42px; box-shadow: 0 12px 30px #4b3c1508; }
.institutional-page .modality-cards article::before { content: ""; position: absolute; left: 42px; top: 0; height: 2px; width: 58px; background: var(--institutional-gold); }
.institutional-page .modality-icon { display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid #ded3ad; border-radius: 50%; color: var(--institutional-gold); margin-bottom: 30px; }
.institutional-page .modality-icon svg { width: 30px; height: 30px; }
.institutional-page .modality-cards .eyebrow { font-size: 11px; letter-spacing: 1.5px; margin-bottom: 10px; }
.institutional-page .modality-cards .eyebrow::before { display: none; }
.institutional-page .modality-cards h3 { font-size: 39px; font-weight: 400; line-height: 1.15; margin: 0 0 24px; color: var(--institutional-green); }
.institutional-page .modality-cards article > p:last-child { margin: 0 0 24px; }
.institutional-page .modality-conclusion { max-width: 900px; margin: 70px auto 0; font: 40px/1.2 Georgia, serif; color: var(--institutional-brown); }
.institutional-page .modality-conclusion::before { content: ""; display: block; width: 60px; height: 1px; margin: 0 auto 32px; background: var(--institutional-gold); }
.institutional-page .modality-conclusion span { color: var(--institutional-green); }
.institutional-page .consultation-cta { display: grid; grid-template-columns: 1.06fr .94fr; overflow: hidden; border-radius: 30px; margin-top: 30px; background: #eee6dd; }
.institutional-page .consultation-cta-copy { padding: 65px 75px; background: #303e1e; color: #c9cfbf; }
.institutional-page .consultation-cta h2 { color: #fff; font-size: clamp(34px, 4vw, 54px); font-weight: 400; line-height: 1.15; margin: 0 0 28px; }
.institutional-page .consultation-cta p { margin: 0 0 30px; }
.institutional-page .consultation-cta-photo { display: flex; align-items: center; padding: 50px 38px; }
.institutional-page .consultation-cta-photo img { display: block; width: 100%; height: auto; }
.institutional-page .investment-section { padding-top: 95px; padding-bottom: 110px; }
.institutional-page .investment-section .eyebrow { color: #a88e42; font-size: 11px; font-weight: 700; }
.institutional-page .investment-section h2 { max-width: 900px; margin: 22px auto 30px; font-size: clamp(36px, 4.2vw, 56px); font-weight: 400; line-height: 1.14; color: #303e1e; }
.institutional-page .diagnostic-price { font: clamp(60px, 8vw, 104px)/1.15 Georgia, serif; color: #303e1e; margin: 28px 0 12px; }
.institutional-page .investment-caption { font-size: 14px; color: #72756e; margin: 0 0 42px; }
.institutional-page .investment-section h3 { color: #303e1e; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.18; font-weight: 400; margin: 0 0 24px; }
.institutional-page .investment-description { max-width: 650px; color: #72756e; margin: 0 auto 38px; }
.institutional-page .investment-signoff { font: 25px/1.4 Georgia, serif; color: var(--institutional-brown); margin: 36px 0 0; }

@media (max-width: 1050px) {
  .institutional-page .bio { gap: 50px; }
  .institutional-page .contact-cards article { padding: 25px; }
  .institutional-page .contact-cards .btn { padding-inline: 16px; }
  .institutional-page .diagnostic-section { padding-block: 90px; }
  .institutional-page .diagnostic-section.split,
  .institutional-page .methodology-section > .split { gap: 42px; }
  .institutional-page .methodology-cards li { padding-inline: 24px; }
  .institutional-page .consultation-cta-copy { padding: 45px; }
}

@media (max-width: 760px) {
  .institutional-page .bio,
  .institutional-page .diagnostic-section.split,
  .institutional-page .methodology-section > .split,
  .institutional-page .modality-cards,
  .institutional-page .service-explanation,
  .institutional-page .consultation-cta { grid-template-columns: 1fr; gap: 38px; }
  .institutional-page .methodology-cards,
  .institutional-page .cleaning-steps .grid-3,
  .institutional-page .contact-cards { grid-template-columns: 1fr; gap: 28px; }
  .institutional-page .desktop-break { display: none; }
  .institutional-page .hero-profession { font-size: 12px; }
  .institutional-page .hero .service-highlight { gap: 12px; }
  .institutional-page .institutional-hero-logo { width: 170px; }
  .institutional-page .bio-portrait::before { width: 56px; height: 56px; left: -20px; }
  .institutional-page .bio { padding-block: 55px; }
  .institutional-page .service-explanation { padding-block: 55px; }
  .institutional-page .service-explanation p { font-size: 18px; }
  .institutional-page .cleaning-steps { padding-top: 20px; padding-bottom: 40px; }
  .institutional-page .institutional-contacts { padding-block: 45px 65px; }
  .institutional-page .contact-cards article { padding: 30px; }
  .institutional-page .diagnostic-section { padding-block: 60px; }
  .institutional-page .diagnostic-section h2 { letter-spacing: -1px; margin-bottom: 28px; }
  .institutional-page .diagnostic-section .eyebrow { font-size: 10px; letter-spacing: 2px; }
  .institutional-page .diagnostic-section .eyebrow::before { width: 26px; }
  .institutional-page .tissue-copy blockquote { padding: 25px; font-size: 28px; }
  .institutional-page .numbered-statement p { font-size: 29px; }
  .institutional-page .reading-copy { padding-left: 24px; }
  .institutional-page .methodology-heading { font-size: 29px; gap: 16px; }
  .institutional-page .methodology-cards li { min-height: 300px; }
  .institutional-page .evaluation-list li { gap: 18px; }
  .institutional-page .evaluation-list h3 { font-size: 25px; }
  .institutional-page .audience-list li { padding-left: 58px; }
  .institutional-page .modalities-intro { margin-bottom: 36px; }
  .institutional-page .modality-cards article { padding: 30px; }
  .institutional-page .modality-cards h3 { font-size: 33px; }
  .institutional-page .modality-conclusion { font-size: 30px; margin-top: 44px; }
  .institutional-page .consultation-cta { gap: 0; border-radius: 22px; }
  .institutional-page .consultation-cta-copy,
  .institutional-page .consultation-cta-photo { padding: 30px; }
  .institutional-page .investment-section { padding-block: 65px; }
  .institutional-page .consultation-actions .btn { padding-inline: 24px; }
  .institutional-page .investment-section > .btn { padding-inline: 20px; }
}