#ef-keratin-landing,
.ef-kera-close {
  --kera-ink: #28211d;
  --kera-espresso: #261a16;
  --kera-brown: #91552b;
  --kera-cream: #f8f4ee;
  --kera-line: #d7c8b6;
  --kera-gold: #d9b78d;
  color: var(--kera-ink);
  font-family: inherit;
}

#ef-keratin-landing *,
.ef-kera-close * { box-sizing: border-box; }

#ef-keratin-landing { background: var(--kera-cream); }
#ef-keratin-landing > section,
#ef-keratin-landing > aside,
#ef-keratin-landing > .ef-kera-opening {
  padding-inline: clamp(20px, 6vw, 110px);
}
#ef-keratin-landing h2,
.ef-kera-close h2 {
  max-width: 18ch;
  margin: 0;
  color: inherit;
  font-size: clamp(2.15rem, 4.7vw, 4.85rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}
#ef-keratin-landing h2 em {
  color: var(--kera-brown) !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  font-weight: 400;
}
#ef-keratin-landing h3 {
  margin: 0 0 .8rem;
  color: inherit;
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  font-weight: 500;
  line-height: 1.2;
}
#ef-keratin-landing p,
.ef-kera-close p { line-height: 1.7; }
#ef-keratin-landing a,
.ef-kera-close a { color: inherit; text-underline-offset: .25em; }
#ef-keratin-landing a:focus-visible,
#ef-keratin-landing summary:focus-visible,
.ef-kera-close a:focus-visible { outline: 3px solid var(--kera-brown); outline-offset: 4px; }
#ef-keratin-landing .ef-kera-kicker,
.ef-kera-close .ef-kera-kicker {
  margin: 0 0 1.3rem;
  color: var(--kera-brown);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .15em;
  line-height: 1.5;
  text-transform: uppercase;
}

#ef-keratin-landing .ef-kera-opening {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  grid-template-areas: "copy photo" "action photo";
  column-gap: clamp(32px, 6vw, 110px);
  align-items: center;
  padding-block: clamp(72px, 10vw, 150px);
}
#ef-keratin-landing .ef-kera-opening-copy { grid-area: copy; max-width: 640px; }
#ef-keratin-landing .ef-kera-opening-copy > p:last-child {
  max-width: 48ch;
  margin: 1.8rem 0 0;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
}
#ef-keratin-landing .ef-kera-opening-photo { grid-area: photo; margin: 0; min-width: 0; }
#ef-keratin-landing .ef-kera-opening-photo img {
  display: block;
  width: 100%;
  height: clamp(380px, 43vw, 680px);
  object-fit: cover;
  object-position: 44% center;
}
#ef-keratin-landing .ef-kera-opening-photo figcaption {
  margin-top: .7rem;
  color: #5e554e;
  font-size: .78rem;
  line-height: 1.5;
}
#ef-keratin-landing .ef-kera-opening-action { grid-area: action; align-self: start; margin: 2rem 0 0; }
#ef-keratin-landing .ef-kera-link {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  min-height: 44px;
  padding-bottom: .35rem;
  border-bottom: 1px solid currentColor;
  color: var(--kera-brown);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

#ef-keratin-landing .ef-kera-section-heading { max-width: 850px; }
#ef-keratin-landing .ef-kera-section-heading > p:last-child {
  max-width: 60ch;
  margin: 1.5rem 0 0;
}
#ef-keratin-landing .ef-kera-choices { padding-block: clamp(65px, 8vw, 112px); }
#ef-keratin-landing .ef-kera-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 48px);
  margin-top: clamp(42px, 5vw, 76px);
}
#ef-keratin-landing .ef-kera-choice-grid article {
  min-width: 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--kera-line);
}
#ef-keratin-landing .ef-kera-number {
  display: block;
  margin-bottom: clamp(40px, 5vw, 78px);
  color: var(--kera-brown);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .1em;
}
#ef-keratin-landing .ef-kera-choice-grid article p { max-width: 34ch; margin: 0; }

#ef-keratin-landing .ef-kera-process {
  padding-block: clamp(70px, 9vw, 132px);
  background: var(--kera-espresso);
  color: var(--kera-cream);
}
#ef-keratin-landing .ef-kera-process .ef-kera-kicker { color: var(--kera-gold); }
#ef-keratin-landing .ef-kera-process h2 { max-width: 15ch; }
#ef-keratin-landing .ef-kera-process ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 48px);
  margin: clamp(48px, 6vw, 88px) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
#ef-keratin-landing .ef-kera-process li {
  min-width: 0;
  padding-top: 1.4rem;
  border-top: 1px solid #68564b;
  counter-increment: step;
}
#ef-keratin-landing .ef-kera-process li::before {
  display: block;
  margin-bottom: 3.2rem;
  color: var(--kera-gold);
  content: "0" counter(step);
  font-size: .9rem;
  font-weight: 700;
}
#ef-keratin-landing .ef-kera-process li p { max-width: 30ch; color: #e8ddd2; }

#ef-keratin-landing .ef-kera-direction { padding-block: clamp(76px, 9vw, 135px); }
#ef-keratin-landing .ef-kera-direction-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(45px, 5vw, 75px);
  background: var(--kera-line);
  border: 1px solid var(--kera-line);
}
#ef-keratin-landing .ef-kera-direction-grid article {
  min-width: 0;
  min-height: 310px;
  padding: clamp(26px, 4vw, 62px);
  background: #eee5da;
}
#ef-keratin-landing .ef-kera-direction-grid article + article { background: #fbf8f3; }
#ef-keratin-landing .ef-kera-direction-label {
  margin: 0 0 4rem;
  color: var(--kera-brown);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
#ef-keratin-landing .ef-kera-direction-grid h3 { max-width: 22ch; }
#ef-keratin-landing .ef-kera-direction-grid p:not(.ef-kera-direction-label) { max-width: 45ch; }
#ef-keratin-landing .ef-kera-direction-grid a { color: var(--kera-brown); font-weight: 700; }

#ef-keratin-landing .ef-kera-faq {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 100px);
  padding-block: clamp(75px, 9vw, 140px);
  border-top: 1px solid var(--kera-line);
}
#ef-keratin-landing .ef-kera-faq h2 { max-width: 12ch; }
#ef-keratin-landing .ef-kera-faq-list { min-width: 0; }
#ef-keratin-landing .ef-kera-faq details { border-bottom: 1px solid var(--kera-line); }
#ef-keratin-landing .ef-kera-faq details:first-child { border-top: 1px solid var(--kera-line); }
#ef-keratin-landing .ef-kera-faq summary {
  min-height: 64px;
  padding: 1.25rem 2.1rem 1.25rem 0;
  cursor: pointer;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 600;
  line-height: 1.45;
}
#ef-keratin-landing .ef-kera-faq summary h3 {
  display: inline;
  margin: 0;
  color: inherit;
  font: inherit;
}
#ef-keratin-landing .ef-kera-faq details p { max-width: 65ch; margin: 0 0 1.5rem; }
#ef-keratin-landing .ef-kera-faq details > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 1rem;
}
#ef-keratin-landing .ef-kera-faq details a { color: var(--kera-brown); font-weight: 700; }

#ef-keratin-landing .ef-kera-signature {
  display: flex;
  align-items: center;
  gap: clamp(25px, 4vw, 65px);
  padding-block: clamp(42px, 6vw, 90px);
  border-top: 1px solid var(--kera-line);
}
#ef-keratin-landing .ef-kera-signature img {
  display: block;
  width: clamp(100px, 15vw, 180px);
  height: clamp(130px, 19vw, 230px);
  flex: none;
  object-fit: cover;
  object-position: center top;
}
#ef-keratin-landing .ef-kera-signature p:not(.ef-kera-kicker) {
  max-width: 52ch;
  margin: 0 0 1rem;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
}
#ef-keratin-landing .ef-kera-signature a { color: var(--kera-brown); font-weight: 700; }

.ef-kera-close {
  padding: clamp(75px, 10vw, 145px) clamp(20px, 6vw, 110px);
  background: var(--kera-espresso);
  color: var(--kera-cream);
}
.ef-kera-close .ef-kera-kicker { color: var(--kera-gold); }
.ef-kera-close h2 { max-width: 15ch; }
.ef-kera-close > p:not(.ef-kera-kicker) { max-width: 54ch; margin: 2rem 0; }
.ef-kera-close .ef-kera-close-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 48px;
  padding: .85rem 1.1rem;
  border: 1px solid var(--kera-gold);
  color: var(--kera-cream);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.ef-kera-close .ef-kera-close-action:focus-visible { outline-color: var(--kera-gold); }
.ef-kera-hero .ef-kera-diagnosis-action {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.ef-kera-hero .ef-kera-diagnosis-action > span,
.ef-kera-close-action > span,
#ef-keratin-landing .ef-kera-link > span { flex: none; }
.ef-kera-hero .ef-kera-first-visit-note {
  max-width: 52ch;
  margin: 1rem 0;
  color: #ded2c5;
  font-size: .88rem;
  line-height: 1.7;
}
.ef-kera-hero .ef-kera-returning,
.ef-kera-close .ef-kera-returning {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-underline-offset: .25em;
}
.ef-kera-hero .ef-kera-returning:focus-visible {
  outline: 3px solid #d9b78d;
  outline-offset: 4px;
}
#ef-keratin-landing .ef-kera-link { max-width: 100%; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  #ef-keratin-landing .ef-kera-process ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #ef-keratin-landing .ef-kera-faq { grid-template-columns: 1fr; }
  #ef-keratin-landing .ef-kera-faq h2 { max-width: 18ch; }
}

@media (max-width: 760px) {
  #ef-keratin-landing .ef-kera-opening {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "photo" "action";
    gap: 0;
  }
  #ef-keratin-landing .ef-kera-opening-photo { margin-top: 2rem; }
  #ef-keratin-landing .ef-kera-opening-photo img { height: auto; max-height: 560px; aspect-ratio: 4 / 5; }
  #ef-keratin-landing .ef-kera-opening-action { margin-top: 1.7rem; }
  #ef-keratin-landing .ef-kera-choice-grid,
  #ef-keratin-landing .ef-kera-direction-grid { grid-template-columns: 1fr; }
  #ef-keratin-landing .ef-kera-choice-grid article { padding-bottom: 1.25rem; }
  #ef-keratin-landing .ef-kera-number { margin-bottom: 1.5rem; }
  #ef-keratin-landing .ef-kera-direction-grid article { min-height: 0; }
  #ef-keratin-landing .ef-kera-direction-label { margin-bottom: 2.5rem; }
}

@media (max-width: 480px) {
  #ef-keratin-landing .ef-kera-process ol { grid-template-columns: 1fr; gap: 1.5rem; }
  #ef-keratin-landing .ef-kera-process li::before { margin-bottom: 1.5rem; }
  #ef-keratin-landing .ef-kera-signature { align-items: flex-start; }
  #ef-keratin-landing .ef-kera-signature img { width: 88px; height: 118px; }
}

@media (prefers-reduced-motion: reduce) {
  #ef-keratin-landing *, .ef-kera-close * { scroll-behavior: auto; transition-duration: 0.01ms; animation-duration: 0.01ms; }
}