.instructors-page { min-height: 100svh; background: #f2efe9; }
.instructors-header { background: rgba(248,245,239,.98); }
.instructors-page main { overflow: hidden; }
.instructors-hero { position: relative; display: grid; grid-template-columns: minmax(0,1fr); grid-template-areas: "crumb" "label" "title" "intro" "picker"; align-items: start; padding: clamp(22px,2.5vw,38px) clamp(22px,8vw,130px) clamp(30px,4vw,52px); color: white; background: var(--ink); isolation: isolate; }
.instructors-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .13; background: url("../../assets/mural/bg_wall.png") center/cover; mix-blend-mode: screen; }
.instructors-hero::after { content: ""; position: absolute; right: -120px; bottom: -170px; width: 480px; aspect-ratio: 1; border: 75px solid rgba(215,223,0,.12); border-radius: 50%; pointer-events: none; }
.instructors-breadcrumb { grid-area: crumb; display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: clamp(16px,2vw,25px); color: #b9cbd3; font-size: 12px; }
.instructors-breadcrumb a { font-weight: 800; text-underline-offset: 3px; }
.instructors-hero > p,.instructor-intro > p:first-child,.instructor-rune > div:last-child > p:first-child,.instructors-final > p { margin: 0 0 13px; color: var(--lime); font-size: 11px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.instructors-hero > p { grid-area: label; }
.instructors-hero h1 { grid-area: title; max-width: 760px; margin: 0; font-size: clamp(52px,5vw,78px); line-height: .82; letter-spacing: -.07em; }
.instructors-hero h1 em { color: var(--lime); font-style: normal; }
.instructors-hero__intro { grid-area: intro; display: grid; gap: 7px; max-width: 650px; margin-top: 18px; }
.instructors-hero__intro p { margin: 0; color: #cad7dc; font-size: 14px; line-height: 1.55; }

.instructors-picker { position: relative; z-index: 1; grid-area: picker; width: 100%; margin-top: clamp(24px,3vw,38px); padding: clamp(17px,2vw,25px); border-top: 6px solid var(--lime); color: white; background: rgba(16,56,74,.88); box-shadow: 18px 18px 0 rgba(215,223,0,.08); }
.instructors-picker > header { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 5px 20px; margin-bottom: 20px; }
.instructors-picker > header p { grid-column: 1 / -1; margin: 0; color: var(--lime); font-size: 10px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.instructors-picker > header h2 { margin: 0; font-size: clamp(28px,3vw,42px); line-height: .9; letter-spacing: -.045em; }
.instructors-picker > header span { color: #bdccd2; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.instructors-picker__list { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,220px)); gap: 11px; }
.instructor-choice { position: relative; display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(82px,1fr) auto auto; min-height: 168px; padding: 0 0 12px; overflow: hidden; color: white; border: 1px solid rgba(255,255,255,.2); border-radius: 0; text-align: left; background: rgba(255,255,255,.055); cursor: pointer; isolation: isolate; transition: transform .18s ease,border-color .18s ease,background .18s ease; }
.instructor-choice { text-decoration: none; }
.instructor-choice:is(:hover,:focus-visible) { transform: translateY(-2px); border-color: var(--lime); background: rgba(255,255,255,.11); }
.instructor-choice__image { grid-column: 1; grid-row: 1; position: relative; width: 100%; height: 100%; min-height: 82px; overflow: hidden; background: #173f51; }
.instructor-choice__image::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.instructor-choice__image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.instructor-choice__image--paw { height: 54px; border-radius: 50%; }
.instructor-choice__image--paw img { border-radius: 50%; }
.instructor-choice__number { display: none; }
.instructor-choice__name { grid-column: 1; grid-row: 2; align-self: end; padding: 13px 13px 0; font-size: 19px; font-weight: 900; line-height: .88; letter-spacing: -.045em; }
.instructor-choice__role { grid-column: 1; grid-row: 3; align-self: start; margin-top: 6px; padding: 0 13px; font-size: 8px; font-weight: 900; line-height: 1.4; letter-spacing: .07em; text-transform: uppercase; }
.instructor-choice--wiktoria .instructor-choice__image img { object-position: 72% 35%; }
.instructor-choice--ida .instructor-choice__image img { object-position: center 30%; }
.instructor-choice--dorota .instructor-choice__image img { object-position: center 35%; }
.instructor-photo--ida .instructor-photo__image { object-position: 48% 42%; }
.instructor-choice__action { display: none; }

.instructor-profile { display: grid; grid-template-columns: minmax(330px,.78fr) minmax(550px,1.22fr); gap: clamp(60px,8vw,130px); padding: clamp(70px,9vw,140px) clamp(22px,8vw,130px); background: #f5f1ea; }
.instructor-profile[hidden] { display: none; }
.instructor-profile--wiktoria { background: #eee9e1; }
.instructor-profile__visuals { position: relative; align-self: start; }
.instructor-photo { position: relative; aspect-ratio: 4 / 5; display: grid; align-content: end; padding: clamp(28px,4vw,55px); overflow: hidden; color: white; background: linear-gradient(145deg,#173f51,var(--ink)); isolation: isolate; }
.instructor-photo::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .16; background: url("../../assets/mural/bg_wall.png") center/cover; }
.instructor-photo > span { position: absolute; z-index: -1; right: -5%; top: -4%; color: transparent; -webkit-text-stroke: 2px rgba(215,223,0,.34); font-size: clamp(230px,35vw,520px); font-weight: 900; line-height: .8; }
.instructor-photo div { display: grid; gap: 7px; border-left: 7px solid var(--lime); padding-left: 20px; }
.instructor-photo strong { font-size: clamp(25px,3vw,42px); line-height: .95; }
.instructor-photo small { color: #c8d6dc; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.instructor-photo--image { padding: 0; background: #173f51; }
.instructor-photo--image::before { z-index: 1; opacity: 1; background: linear-gradient(180deg,transparent 48%,rgba(6,43,64,.92)); }
.instructor-photo__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.instructor-photo--image figcaption { position: relative; z-index: 2; display: grid; align-self: end; gap: 7px; margin: 0; padding: clamp(28px,4vw,55px); border-left: 7px solid var(--lime); }
.instructor-photo--image figcaption strong { font-size: clamp(25px,3vw,42px); line-height: .95; }
.instructor-photo--image figcaption small { color: #c8d6dc; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.instructor-photo--wiktoria .instructor-photo__image { object-position: 54% center; }
.instructor-photo--wiktoria::before { background: linear-gradient(180deg,rgba(6,43,64,.05) 30%,rgba(6,43,64,.96) 92%); }
.instructor-paw { position: relative; width: min(82%,410px); margin: -60px -35px 0 auto; padding: 0; }
.instructor-paw img { display: block; width: 100%; aspect-ratio: 1; border: 8px solid #c99b2e; border-radius: 50%; object-fit: cover; box-shadow: 0 24px 50px rgba(6,43,64,.22); }
.instructor-paw figcaption { display: grid; gap: 4px; margin: 15px 0 0 30px; }
.instructor-paw span { color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.instructor-paw strong { font-size: 16px; }
.instructor-profile__content { min-width: 0; }
.instructor-intro :is(h1,h2) { margin: 0; font-size: clamp(58px,7vw,108px); line-height: .82; letter-spacing: -.07em; }
.instructor-intro blockquote { max-width: 750px; margin: 43px 0 32px; padding: 25px 0 25px 28px; border-left: 7px solid var(--lime); color: var(--ink); font-size: clamp(24px,2.4vw,36px); font-weight: 900; line-height: 1.35; }
.instructor-intro > p:not(:first-child),.instructor-rune p,.instructor-story p { max-width: 760px; margin: 0 0 20px; color: #45616f; font-size: 16px; line-height: 1.75; }
.instructor-rune { display: grid; grid-template-columns: 160px 1fr; gap: 34px; margin-top: 65px; padding: clamp(30px,4vw,55px); color: white; background: var(--ink); }
.instructor-rune__symbol { display: grid; place-items: center; min-height: 190px; color: #d6ad3e; border: 1px solid rgba(215,223,0,.35); background: rgba(255,255,255,.04); font-family: Georgia,serif; font-size: 105px; }
.instructor-rune :is(h2,h3) { margin: 0 0 8px; color: white; font-size: clamp(40px,4vw,62px); line-height: .9; }
.instructor-rune strong { display: block; margin-bottom: 20px; color: var(--lime); font-size: 14px; line-height: 1.5; }
.instructor-rune p { color: #c6d4da; }
.instructor-profile__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 38px; }
.instructor-profile__nav a { padding: 11px 14px; border: 1px solid rgba(6,43,64,.25); border-radius: 999px; font-size: 11px; font-weight: 900; text-decoration: none; }
.instructor-profile__nav a:is(:hover,:focus-visible) { color: white; border-color: var(--orange); background: var(--orange); }
.instructor-story { margin-top: 70px; }
.instructor-story section { display: grid; grid-template-columns: 55px 1fr; gap: 18px; padding: 55px 0; border-top: 1px solid rgba(6,43,64,.2); scroll-margin-top: 25px; }
.instructor-story section > span { padding-top: 8px; color: var(--orange); font-size: 11px; font-weight: 900; }
.instructor-story :is(h2,h3) { margin: 0 0 24px; font-size: clamp(34px,4vw,54px); line-height: .95; letter-spacing: -.04em; }
.instructor-profile--direct { padding-top: clamp(36px,6vw,90px); }
.instructors-breadcrumb--dark { color: #45616f; }
.instructor-photo-journey { display: grid; gap: 24px; margin: 54px 0 0; }
.instructor-photo-journey figure { position: relative; min-height: 440px; margin: 0; overflow: hidden; background: var(--ink); }
.instructor-photo-journey img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.instructor-photo-journey figure:first-child img { object-position: 54% 62%; }
.instructor-photo-journey figure:nth-child(2) img { object-position: center 38%; }
.instructor-photo-journey--halina figure:first-child img { object-position: center 44%; }
.instructor-photo-journey--halina figure:nth-child(2) img { object-position: center 58%; }
.instructor-photo-journey figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 52px 18px 16px; color: white; background: linear-gradient(transparent,rgba(6,43,64,.95)); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.instructor-story p strong { color: var(--ink); }
.instructor-story .instructor-story__emphasis { margin-top: 30px; padding: 22px 25px; color: var(--ink); background: var(--lime); font-size: 20px; font-weight: 900; line-height: 1.4; }

.instructors-final { display: grid; justify-items: center; padding: clamp(80px,10vw,150px) 22px; text-align: center; background: var(--lime); }
.instructors-final > p { color: #86310f; }
.instructors-final h2 { max-width: 1000px; margin: 0; font-size: clamp(43px,6.5vw,95px); line-height: .91; letter-spacing: -.055em; }
.instructors-final > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 38px; }
.instructors-final a { min-height: 54px; display: inline-flex; align-items: center; justify-content: space-between; gap: 25px; padding: 14px 21px; border: 1px solid var(--ink); font-weight: 900; text-decoration: none; }
.instructors-final a:first-child { color: white; background: var(--ink); }
.instructors-final a:is(:hover,:focus-visible) { color: var(--ink); background: white; }

@media (max-width: 980px) {
  .instructors-picker__list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .instructor-profile { grid-template-columns: 1fr; }
  .instructor-profile__visuals { display: grid; grid-template-columns: minmax(280px,1fr) minmax(240px,.7fr); align-items: end; gap: 25px; }
  .instructor-profile__visuals--wiktoria { display: block; }
  .instructor-profile--direct .instructor-profile__visuals { display: block; }
  .instructor-photo-journey { grid-template-columns: 1fr 1fr; }
  .instructor-photo-journey figure { min-height: 290px; }
  .instructor-paw { width: 100%; margin: 0; }
}
@media (max-width: 680px) {
  .instructors-hero { padding: 24px 20px 45px; }
  .instructors-breadcrumb { margin-bottom: 28px; }
  .instructors-hero h1 { font-size: clamp(48px,14vw,68px); }
  .instructors-hero__intro { margin-top: 24px; }
  .instructors-picker { margin-top: 24px; padding: 18px; box-shadow: 9px 9px 0 rgba(215,223,0,.08); }
  .instructors-picker > header { grid-template-columns: 1fr; }
  .instructors-picker > header span { display: none; }
  .instructors-picker__list { grid-template-columns: 1fr 1fr; }
  .instructor-choice { grid-template-rows: minmax(120px,1fr) auto auto; min-height: 218px; }
  .instructor-choice__image { min-height: 120px; }
  .instructor-choice__name { padding: 13px 12px 0; font-size: 19px; }
  .instructor-choice__role { padding: 0 12px; font-size: 8px; }
  .instructor-profile { padding: 60px 20px 80px; }
  .instructor-profile--direct { display: block; }
  .instructor-profile--direct :is(.instructor-profile__visuals,.instructor-profile__content) {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .instructor-profile--direct .instructor-photo,
  .instructor-profile--direct .instructor-intro,
  .instructor-profile--direct .instructor-rune,
  .instructor-profile--direct .instructor-profile__nav,
  .instructor-profile--direct .instructor-story,
  .instructor-profile--direct .instructor-photo-journey {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .instructor-profile--direct .instructor-photo,
  .instructor-profile--direct .instructor-intro,
  .instructor-profile--direct .instructor-rune,
  .instructor-profile--direct .instructor-photo-journey {
    width: 100%;
    box-sizing: border-box;
  }
  .instructor-profile__visuals { display: block; }
  .instructor-paw { width: 72%; margin: -38px -8px 60px auto; }
  .instructor-photo-journey { grid-template-columns: 1fr; gap: 12px; margin-top: 30px; }
  .instructor-photo-journey figure { min-height: 350px; }
  .instructor-intro h2 { font-size: clamp(56px,18vw,78px); }
  .instructor-rune { grid-template-columns: 1fr; padding: 25px 20px; }
  .instructor-rune__symbol { min-height: 140px; }
  .instructor-story section { grid-template-columns: 34px 1fr; gap: 8px; }
  .instructors-final > div { align-items: stretch; flex-direction: column; width: min(100%,330px); }
}