/*
 * Component-responsive layer for the homepage.
 *
 * The Figma-generated styles remain the source of truth at the approved mobile
 * and desktop endpoints.  This file owns only the intermediate component
 * ranges, where a viewport breakpoint cannot describe the space available to
 * a card or navigation bar.
 *
 * Ownership map
 * - container setup and the 768–1199px intermediate layer (top section)
 * - intrinsic card/text wrapping rules (before component containers)
 * - hero, results, details, editorial, and lower-section container rules
 * - endpoint safeguards for touch WebViews and embedded shells (later blocks)
 *
 * Keep the endpoint snapshots in home-design.css. Do not introduce cascade
 * layers or merge these files until 402px/1200px visual contracts are fixed.
 */

/* Named containers make the available inline size the responsive input. */

.iel-home,
.iel-home .upper-hero,
.iel-home .upper-results,
.iel-home .upper-intro,
.iel-home .upper-details,
.iel-home .lower-cases,
.iel-home .lower-process,
.iel-home .lower-philosophy,
.iel-home .lower-reviews,
.iel-home .lower-news,
.iel-home .lower-faq,
.iel-home .lower-insights,
.iel-home .lower-location {
  container-type: inline-size;
  min-inline-size: 0;
}

.iel-home {
  container-name: route-shell home-shell;
}

.iel-home .upper-hero,
.iel-home .upper-results,
.iel-home .upper-intro,
.iel-home .upper-details,
.iel-home .lower-cases,
.iel-home .lower-process,
.iel-home .lower-philosophy,
.iel-home .lower-reviews,
.iel-home .lower-news,
.iel-home .lower-insights,
.iel-home .lower-faq,
.iel-home .lower-location {
  container-name: none;
}

/* Give the intermediate layer names only between the two approved endpoints.
 * This prevents the mobile 640–767px content width from accidentally matching
 * a tablet query while keeping the layout decision container-based. */

@container home-shell (min-width: 768px) and (max-width: 1199px) {
  .iel-home .upper-hero {
    container-name: hero;
  }
}

@container home-shell (min-width: 768px) and (max-width: 1199px) {
  .iel-home .upper-results {
    container-name: results;
  }
  .iel-home .upper-intro {
    container-name: intro;
  }
}

@container home-shell (min-width: 768px) and (max-width: 1199px) {
  .iel-home .upper-details {
    container-name: details;
  }
}

@container home-shell (min-width: 768px) and (max-width: 1199px) {
  .iel-home .lower-cases {
    container-name: cases;
  }
  .iel-home .lower-process {
    container-name: process;
  }
}

@container home-shell (min-width: 768px) and (max-width: 1199px) {
  .iel-home .lower-philosophy {
    container-name: philosophy;
  }
}

@container home-shell (min-width: 768px) and (max-width: 1199px) {
  .iel-home .lower-reviews {
    container-name: reviews;
  }
  .iel-home .lower-news,
  .iel-home .lower-insights {
    container-name: editorial;
  }
  .iel-home .lower-faq {
    container-name: faq;
  }
  .iel-home .lower-location {
    container-name: location;
  }
}

@container home-shell (min-width: 768px) and (max-width: 1199px) {
  /* The section itself is sized by its content; the background remains absolute. */
}

@container home-shell (min-width: 768px) and (max-width: 1199px) {
  .iel-home .upper-hero {
    height: auto;
    min-height: clamp(680px, 92cqi, 820px);
    display: block;
    padding: 0;
    --hero-copy-inline-start: clamp(137.13px, calc(179.58px - 3.537cqi), 152.41px);
    --hero-copy-block-start: clamp(245.7px, calc(12.13px + 30.42cqi), 377.109px);
  }
  .iel-home .upper-hero-copy {
    width: min(550.953px, calc(100% - var(--hero-copy-inline-start) - 24px));
    max-width: 550.953px;
    margin: 0 0 0 var(--hero-copy-inline-start);
    padding: var(--hero-copy-block-start) 0 0;
  }
  .iel-home .upper-hero-copy p {
    max-inline-size: 100%;
    overflow-wrap: anywhere;
  }
}

/* CMS text may be arbitrarily long; component styles own the final wrapping. */

/* Card styles live in case-study-card.css. */

/* Fluid hero copy: intermediate content is allowed to determine height. */

@container hero (min-width: 640px) and (max-width: 1199px) {
  .iel-home .upper-hero {
    height: auto;
    min-height: clamp(680px, 92cqi, 820px);
    /* Keep the tablet copy in normal flow so its anchor does not drift
		 * toward the center as the available width grows. */
    display: block;
    padding: 0;
    --hero-copy-inline-start: clamp(137.13px, calc(179.58px - 3.537cqi), 152.41px);
    --hero-copy-block-start: clamp(245.7px, calc(12.13px + 30.42cqi), 377.109px);
  }
  .iel-home .upper-hero-copy {
    width: min(550.953px, calc(100% - var(--hero-copy-inline-start) - 24px));
    max-width: 550.953px;
    margin: 0 0 0 var(--hero-copy-inline-start);
    padding: var(--hero-copy-block-start) 0 0;
  }
  .iel-home .upper-hero-copy p {
    max-inline-size: 100%;
    overflow-wrap: anywhere;
  }
}

/* Results: one or two cards until the content container can fit three. */

@container results (min-width: 640px) and (max-width: 1199px) {
  .iel-home .upper-result-grid {
    grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
    gap: clamp(20px, 2.5cqi, 32px);
  }
  .iel-home .upper-result {
    min-inline-size: 0;
  }
  .iel-home .upper-result-image {
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .iel-home .upper-result-image picture,
  .iel-home .upper-result-image picture > img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .iel-home .upper-result-image img,
  .iel-home .upper-result-1 .upper-result-image img,
  .iel-home .upper-result-2 .upper-result-image img {
    position: static;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }
  .iel-home .upper-result-1 .upper-result-image img {
    object-position: 56% 50%;
  }
  .iel-home .upper-result-2 .upper-result-image img {
    object-position: 50% 56%;
  }
}

/* Evidence and recovery stack before a second column can hold both content blocks. */

@container details (min-width: 640px) and (max-width: 1199px) {
  .iel-home .upper-recovery-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 4cqi, 41px);
  }
  .iel-home .upper-recovery-grid > * {
    min-width: 0;
  }
  .iel-home .upper-recovery {
    width: 100%;
    min-width: 0;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 30px;
  }
  .iel-home .upper-recovery > img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Lower cards use the same intrinsic minimum; intentional review/location rails remain rails. */

@container cases (min-width: 640px) and (max-width: 1199px) {
  .iel-home .lower-case-study-grid {
    grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
    gap: clamp(24px, 3cqi, 38px);
  }
}

@container editorial (min-width: 640px) and (max-width: 1199px) {
  .iel-home .lower-card-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2.4cqi, 24px);
    width: 100%;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
}

@container editorial (min-width: 640px) and (max-width: 1199px) {
  .iel-home .lower-editorial {
    width: auto;
    max-width: none;
    min-width: 0;
    flex: none;
  }
  .iel-home .lower-editorial-image {
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  .iel-home .lower-editorial h3,
  .iel-home .lower-editorial p {
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

@container editorial (min-width: 640px) and (max-width: 1199px) {
  .iel-home .lower-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .iel-home .lower-heading > h2 {
    min-width: 0;
  }
}

/* Keep the question copy in one centered flex group. */

.iel-home .upper-cost-question {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
}

@container results (min-width: 640px) and (max-width: 1199px) {
  .iel-home .upper-cost-question {
    height: clamp(55px, calc(11.3cqi - 31.8px), 104px);
    font-size: clamp(15px, 1.86cqi, 23px);
    padding-inline: 20px;
  }
}

@media (min-width: 1200px) {
  .iel-home .upper-hero > .upper-background {
    top: 0;
    right: 0;
    bottom: calc(-1 * var(--figma-pc-nav-band-height, 82.09px));
    left: 0;
    width: 100%;
  }
  .iel-home .upper-hero .upper-background img {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
  }
  .iel-home .upper-premium .upper-background img {
    top: 0;
    bottom: 0;
    height: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .iel-home .upper-premium > .upper-background {
    top: clamp(92px, 12vw, 130px);
  }
}

/* Figma 1116:2312 result-card crops and vector mark. */

.iel-home .upper-result-image > picture:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.iel-home .upper-result-image > picture:first-child > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.iel-home .upper-result-2 .upper-result-mark {
  position: absolute;
  z-index: 1;
  left: 36.153%;
  top: 54.936%;
  width: 23.086%;
  height: 29.722%;
}

.iel-home .upper-result-mark > img {
  position: static; /* Do not apply the legacy card-photo crop offset to the SVG. */
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 767px), (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  .iel-home .upper-results {
    min-height: 0;
    padding-bottom: 70.5px;
  }
  .iel-home .upper-result-grid {
    gap: 40px;
  }
  .iel-home .upper-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 5px;
    min-height: 0;
    padding-bottom: 0;
  }
  .iel-home .upper-result-image {
    grid-row: 1;
    aspect-ratio: 362 / 300;
    margin-bottom: 8px;
  }
  .iel-home .upper-result-0 .upper-result-image:not(.upper-result-image--custom) > picture:first-child > img {
    top: -4.09%;
    left: -9.9%;
    width: 118.13%;
    height: 106.83%;
  }
  .iel-home .upper-result-1 .upper-result-image:not(.upper-result-image--custom) > picture:first-child > img {
    top: -2.44%;
    left: -16.82%;
    width: 130.4%;
    height: 104.73%;
  }
  .iel-home .upper-result > .upper-red {
    grid-row: 2;
    margin: 0 10px;
  }
  .iel-home .upper-result-stat {
    display: contents;
  }
  .iel-home .upper-result h3 {
    grid-row: 3;
    margin-inline: 10px;
    font-weight: 500;
  }
  .iel-home .upper-result-description {
    grid-row: 4;
    margin: 0 10px;
  }
  .iel-home .upper-result-stat small {
    position: static;
    grid-row: 5;
    margin-inline: 10px;
    color: #adadad;
    font-weight: 600;
  }
  .iel-home .upper-result-stat small::before {
    content: '*';
  }
  .iel-home .upper-result-2 .upper-result-image:not(.upper-result-image--custom) > picture:first-child > img {
    top: -49.33%;
    left: -14.04%;
    width: 128.08%;
    height: 154.62%;
  }
  .iel-home .upper-result-2 .upper-result-mark {
    left: 32.87%;
    top: 36%;
    width: 25.396%;
    height: 32.082%;
  }
  .iel-home .upper-cost-question {
    margin-top: 30px;
  }
}

/* Figma home hero: 1-pc (1116:1953), 1-laptop (1116:2001), 1-tablet (1116:2048). */

@media (min-width: 768px) {
  .iel-home .upper-hero {
    height: auto;
    min-height: 0;
    margin-bottom: 0;
    aspect-ratio: 1920 / 912;
    overflow: hidden;
  }
  .iel-home .upper-hero > .upper-background {
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .iel-home .upper-hero .upper-background img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
  }
  .iel-home .upper-hero-wordmark {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }
  .iel-home .upper-hero-wordmark picture {
    position: absolute;
    display: block;
    margin: 0;
  }
  .iel-home .upper-hero-wordmark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .iel-home .upper-hero-wordmark-tagline {
    left: 60.352%;
    top: 80.896%;
    width: 6.3755%;
    height: 3.1833%;
  }
  .iel-home .upper-hero-wordmark-logo {
    left: 71.811%;
    top: 80.895%;
    width: 2.9821%;
    height: 3.0851%;
  }
  .iel-home .upper-hero-copy {
    position: absolute;
    top: 36.9518%;
    left: 12.099%;
    width: min(550.953px, 76%);
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    text-shadow: none;
  }
  .iel-home .upper-hero-copy h1 {
    font-size: clamp(25px, 1.875vw, 36px);
  }
  .iel-home .upper-hero-description p {
    font-size: clamp(14px, 0.9375vw, 18px);
  }
  .iel-home .upper-hero-description .upper-hero-brand {
    margin-top: 19px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .iel-home .upper-hero {
    height: clamp(500px, calc(39.0625vw + 200px), 670px);
    min-height: clamp(500px, calc(39.0625vw + 200px), 670px);
    aspect-ratio: auto;
  }
}

@media (min-width: 1024px) and (max-width: 1400px) {
  .iel-home .upper-hero-wordmark-tagline {
    left: 60.709%;
    top: 80.729%;
    width: 6.9664%;
    height: 3.4783%;
  }
  .iel-home .upper-hero-wordmark-logo {
    left: 72.053%;
    top: 80.916%;
    width: 2.9421%;
    height: 3.0435%;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .iel-home .upper-hero-wordmark-tagline {
    transform: translateX(calc(45.08px - 1.904vw));
  }
  .iel-home .upper-hero-wordmark-logo {
    transform: translateX(calc(92.82px - 3.924vw));
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .iel-home .upper-hero-wordmark-tagline {
    left: 60.29%;
    top: 80.664%;
    width: 7.3785%;
    height: 3.6842%;
    transform: translateX(calc(45.3px - 2.083vw));
  }
  .iel-home .upper-hero-wordmark-logo {
    left: 72.357%;
    top: 80.865%;
    width: 3.116%;
    height: 3.2237%;
    transform: translateX(calc(94px - 3.96vw));
  }
}

@media (max-width: 767px), (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  .iel-home .upper-hero-wordmark {
    display: none;
  }
}

@container details (min-width: 640px) and (max-width: 1199px) {
  .iel-home .upper-recovery {
    aspect-ratio: 1650.321 / 599;
  }
}

/*
 * Mobile fluid geometry.
 *
 * The 402px frame remains the anchor.  Widths below it get a safe floor and
 * wider mobile viewports grow the rails/cards without scaling the document or
 * its fixed UI.  Keep these rules after the authored Figma layer so the
 * component values are the single mobile override owner.
 */

@media (max-width: 767px), (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  .iel-home {
    --mobile-gutter: clamp(20px, 6.218905vw, 48px);
    --mobile-rail-origin: clamp(20px, 4.975124vw, 38px);
    --mobile-wide-frame: calc(100vw - (2 * var(--mobile-rail-origin)));
    --mobile-content-frame: calc(100vw - (2 * var(--mobile-gutter)));
    --mobile-rail-frame: calc(100vw - var(--mobile-rail-origin));
    --mobile-rail-extension: var(--mobile-gutter);
    --mobile-profile-track-extension: clamp(16px, 4.975124vw, 38px);
    --mobile-hero-height: clamp(680px, 182.587065vw, 734px);
    --mobile-upper-hero-height: clamp(680px, 182.587065vw, 734px);
    --mobile-video-width: clamp(280px, 80.845771vw, 325px);
    --mobile-video-track-height: clamp(190px, 52.487562vw, 210px);
    --mobile-profile-width: clamp(280px, 71.890547vw, 340px);
    --mobile-profile-photo-width: clamp(200px, calc(30vw + 103.4px), 260px);
    --mobile-profile-padding-inline: clamp(26px, 8.208955vw, 33px);
    --mobile-profile-padding-block: clamp(28px, 8.58209vw, 34.5px);
    --mobile-profile-min-height: clamp(460px, 122.885572vw, 494px);
    --mobile-psych-profile-width: clamp(260px, 70.646766vw, 340px);
    --mobile-editorial-width: clamp(280px, 81.59204vw, 360px);
    --mobile-insight-width: clamp(280px, 80.845771vw, 360px);
    --mobile-review-width: clamp(280px, calc(100vw - 40px), 336px);
    --mobile-review-height: clamp(160px, calc(100vw - 185px), 190px);
    --mobile-recovery-height: clamp(440px, 132.909701vw, 534.297px);
    --mobile-gallery-height: clamp(210px, 67.255224vw, 270.166px);
    --mobile-map-height: clamp(360px, 110.268905vw, 443.281px);
    --mobile-reviews-height: clamp(520px, 141.044776vw, 567px);
    --mobile-news-height: clamp(720px, 203.233831vw, 817px);
    --mobile-insights-height: clamp(700px, 196.517413vw, 790px);
    --mobile-faq-height: clamp(810px, 208.208955vw, 837px);
    --mobile-news-card-height: clamp(300px, 88.80597vw, 357px);
    --mobile-insights-card-height: clamp(280px, 81.094527vw, 326px);
    --mobile-rail-gap: clamp(16px, 4.975124vw, 20px);
  }

  .iel-home .upper-wrap {
    width: var(--mobile-wide-frame);
    max-width: none;
  }

  .iel-home .upper-hero,
  .iel-home .upper-premium,
  .iel-home .upper-contact,
  .iel-home .lower-philosophy {
    height: var(--mobile-hero-height);
    min-height: var(--mobile-hero-height);
    aspect-ratio: auto;
  }
}

@media (max-width: 767px), (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  .iel-home .upper-hero {
    height: var(--mobile-upper-hero-height);
    min-height: var(--mobile-upper-hero-height);
  }

  .iel-home .upper-hero-copy {
    width: min(550.953px, var(--mobile-content-frame));
    max-width: 100%;
    margin-inline: auto;
    padding-top: clamp(150px, 43.781095vw, 176px);
  }

  .iel-home .upper-hero-description {
    width: 100%;
    max-width: 342px;
  }
  .iel-home .upper-premium-copy {
    padding-top: clamp(58px, 16.666667vw, 67px);
    padding-inline: clamp(12px, 2.985075vw, 24px);
  }
  .iel-home .upper-premium .upper-cost {
    width: clamp(180px, 49.152239vw, 197.592px);
    height: clamp(44px, 12.747264vw, 51.244px);
  }
  .iel-home .upper-results {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    min-height: clamp(1500px, 428.606965vw, 1723px);
    padding-inline: var(--mobile-gutter);
    padding-top: clamp(110px, 32.386567vw, 130.194px);
  }

  .iel-home .upper-result {
    min-height: clamp(340px, 96.517413vw, 388px);
  }

  .iel-home .upper-result-2 {
    min-height: clamp(320px, 90.298507vw, 363px);
  }

  .iel-home .upper-cost-question {
    width: min(360px, 100%);
    height: clamp(55px, 14.676617vw, 59px);
  }

  .iel-home .upper-intro {
    padding-left: var(--mobile-rail-origin);
  }

  .iel-home .upper-intro-grid {
    width: var(--mobile-rail-frame);
    height: var(--mobile-video-track-height);
    min-height: 0;
    gap: var(--mobile-rail-gap);
  }
  /* Align every horizontal homepage slider control with the trailing edge of
   * its mobile rail instead of the narrower content frame. */
  .iel-home .upper-intro > .upper-slider-controls {
    width: var(--mobile-rail-frame);
  }
  .iel-home .upper-profiles > .upper-slider-controls {
    width: calc(100% + var(--mobile-rail-origin));
  }
  .iel-home .upper-intro-grid .upper-video {
    flex: 0 0 var(--mobile-video-width);
    width: var(--mobile-video-width);
    height: auto;
    aspect-ratio: 325 / 210;
  }
  .iel-home .upper-details > .upper-women,
  .iel-home .upper-details > .upper-prosecutors,
  .iel-home .upper-details > .upper-evidence,
  .iel-home .upper-details > .upper-psychologists {
    width: var(--mobile-wide-frame);
    max-width: 100%;
  }
  .iel-home .upper-details .upper-profile-track {
    width: calc(100% + var(--mobile-profile-track-extension)) !important;
  }

  /* Lawyer profile cards keep the mobile Figma minimum frame and grow with copy. */
  .iel-home .upper-profiles--women .upper-profile,
  .iel-home .upper-profiles--prosecutors .upper-profile {
    flex-basis: var(--mobile-profile-width);
    width: var(--mobile-profile-width);
    height: auto;
    min-height: 494px;
    padding: var(--mobile-profile-padding-block) var(--mobile-profile-padding-inline) calc(14px + 30.66px + 12px);
  }

  .iel-home .upper-profiles--women .upper-profile-photo,
  .iel-home .upper-profiles--prosecutors .upper-profile-photo {
    width: var(--mobile-profile-photo-width);
    height: auto;
    aspect-ratio: 224 / 277;
  }

  .iel-home .upper-profiles--psychologists .upper-profile {
    flex-basis: var(--mobile-psych-profile-width);
    width: var(--mobile-psych-profile-width);
    min-height: 0;
  }

  .iel-home .upper-profiles--psychologists .upper-profile-photo {
    width: var(--mobile-psych-profile-width);
    height: auto;
    aspect-ratio: 1;
  }
  .iel-home .upper-evidence-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 362 / 316.741;
  }

  .iel-home .upper-recovery {
    height: var(--mobile-recovery-height);
    aspect-ratio: auto;
  }

  .iel-home .upper-recovery-image--main {
    height: var(--mobile-recovery-height);
    aspect-ratio: auto;
  }
  .iel-home .lower-cases > .lower-wrap {
    width: min(100%, calc(100vw - 39px));
    max-width: none;
  }

  .iel-home .lower-process {
    min-height: 0;
  }

  .iel-home .lower-process > .lower-narrow {
    width: var(--mobile-content-frame);
    max-width: 100%;
  }
  .iel-home .lower-reviews {
    height: var(--mobile-reviews-height);
    min-height: var(--mobile-reviews-height);
  }

  .iel-home .lower-reviews > .lower-wrap,
  .iel-home .lower-news > .lower-wrap,
  .iel-home .lower-insights > .lower-wrap {
    width: var(--mobile-rail-frame);
    max-width: none;
    margin-left: var(--mobile-rail-origin);
  }

  .iel-home .lower-review-controls {
    width: var(--mobile-rail-frame);
    margin-left: var(--mobile-rail-origin);
  }

  .iel-home .lower-news .lower-controls,
  .iel-home .lower-insights .lower-controls {
    width: 100%;
  }

  .iel-home .lower-review-track {
    width: var(--mobile-rail-frame);
    height: var(--mobile-review-height);
    margin-left: var(--mobile-rail-origin);
    gap: var(--mobile-rail-gap);
  }

  .iel-home .lower-review {
    flex-basis: var(--mobile-review-width);
    width: var(--mobile-review-width);
    height: var(--mobile-review-height);
    min-height: var(--mobile-review-height);
  }

  .iel-home .lower-news {
    height: var(--mobile-news-height);
    min-height: var(--mobile-news-height);
  }

  .iel-home .lower-insights {
    height: var(--mobile-insights-height);
    min-height: var(--mobile-insights-height);
  }

  .iel-home .lower-news .lower-card-track,
  .iel-home .lower-insights .lower-card-track {
    width: 100%;
    height: var(--mobile-news-card-height);
    gap: var(--mobile-rail-gap);
  }

  .iel-home .lower-insights .lower-card-track {
    height: var(--mobile-insights-card-height);
  }

  .iel-home .lower-news .lower-editorial,
  .iel-home .lower-insights .lower-editorial {
    flex-basis: var(--mobile-editorial-width);
    width: var(--mobile-editorial-width);
    height: var(--mobile-news-card-height);
  }

  .iel-home .lower-insights .lower-editorial {
    flex-basis: var(--mobile-insight-width);
    width: var(--mobile-insight-width);
    height: var(--mobile-insights-card-height);
  }
  /* Let mobile news cards grow enough to keep their publication date visible. */
  .iel-home .lower-news .lower-card-track {
    height: auto;
    min-height: var(--mobile-news-card-height);
    overflow-y: visible;
  }

  .iel-home .lower-news .lower-editorial {
    height: auto;
    min-height: var(--mobile-news-card-height);
  }

  .iel-home .lower-faq {
    height: auto;
    min-height: 0;
    padding-block: 68.8936px;
  }

  .iel-home .lower-faq > .lower-narrow {
    width: min(100%, clamp(270px, 87.303234vw, 350.959px));
    max-width: 100%;
  }

  .iel-home .lower-location > .lower-wrap {
    width: var(--mobile-wide-frame);
    max-width: 100%;
    margin-inline: var(--mobile-rail-origin);
  }

  .iel-home .lower-location-gallery,
  .iel-home .lower-location-track,
  .iel-home .lower-location-track > img {
    height: var(--mobile-gallery-height);
  }

  .iel-home .lower-map,
  .iel-home .location-map,
  .iel-home .location-map-frame {
    height: var(--mobile-map-height);
  }

  .iel-home .lower-address,
  .iel-home .lower-location > .lower-address {
    width: min(100%, clamp(270px, 87.396766vw, 351.335px));
    max-width: 100%;
  }
}

/* Keep the tablet composition intact while sharing its fluid spacing tokens. */

@media (min-width: 768px) and (max-width: 1199px) {
  .iel-home {
    --responsive-result-gap: clamp(20px, 2.5cqi, 32px);
    --responsive-card-gap: clamp(16px, 2.4cqi, 24px);
    --responsive-case-row-gap: clamp(24px, 3cqi, 38px);
    --responsive-case-column-gap: clamp(24px, 3cqi, 40px);
    --responsive-profile-gap: clamp(20px, 3vw, 41px);
    --responsive-intro-gap: clamp(14px, 2.4vw, 24px);
    --responsive-scene-gap: clamp(24px, 3vw, 36px);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .iel-home .upper-result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--responsive-result-gap);
  }
}

@media (min-width: 403px) and (max-width: 767px) {
  .iel-home .upper-cost-question {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .iel-home .lower-cases > .lower-wrap {
    width: min(var(--iel-responsive-content-max), calc(100% - 2 * var(--iel-responsive-gutter-tablet)));
    max-width: none;
  }

  .iel-home .lower-cases .lower-case-study-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .iel-home .upper-recovery-grid {
    gap: var(--responsive-scene-gap);
  }
}

/*
 * Desktop fluid geometry.
 *
 * Values interpolate from the first desktop frame (1200px) to the approved
 * Figma frame (1920px).  Every upper bound is the existing 1920px value, so
 * wider canvases keep their authored caps and the tablet rules above remain
 * untouched.
 */

@media (min-width: 1200px) {
  .iel-home {
    --desktop-heading-size: clamp(28px, calc(1.111111vw + 14.666667px), 36px);
    --desktop-body-size: clamp(16px, calc(0.277778vw + 12.666667px), 18px);
    --desktop-result-size: clamp(25px, calc(0.694444vw + 16.666667px), 30px);
    --desktop-card-title-size: clamp(17px, calc(0.416667vw + 12px), 20px);
    --desktop-profile-title-size: clamp(16px, calc(0.277778vw + 12.666667px), 18px);
    --desktop-team-title-size: clamp(19px, calc(0.833333vw + 9px), 25px);
    --desktop-team-body-size: clamp(14px, calc(0.555556vw + 7.333333px), 18px);
    --desktop-review-heading-size: clamp(32px, calc(1.111111vw + 18.666667px), 40px);

    --desktop-results-top: clamp(160px, calc(7.638889vw + 68.333333px), 215px);
    --desktop-results-bottom: clamp(110px, calc(5.308889vw + 46.293333px), 148.224px);
    --desktop-result-gap: 32px;
    --desktop-card-gap: clamp(16px, calc(0.555556vw + 9.333333px), 20px);
    --desktop-question-height: clamp(80px, calc(3.28125vw + 40.25px), 103.626px);

    --desktop-intro-padding-top: clamp(32px, calc(1.111111vw + 18.666667px), 40px);
    --desktop-intro-padding-bottom: clamp(96px, calc(3.527778vw + 53.666667px), 121.4px);
    --desktop-intro-row: clamp(220px, calc(5.861111vw + 149.666667px), 262.2px);
    --desktop-intro-gap: clamp(14px, calc(0.555556vw + 7.333333px), 18px);
    --desktop-intro-margin: clamp(32px, calc(1.527778vw + 13.666667px), 43px);

    --desktop-detail-padding-top: clamp(88px, calc(3.611111vw + 44.666667px), 114px);
    --desktop-detail-padding-bottom: clamp(240px, calc(14.005278vw + 71.933333px), 340.838px);
    --desktop-marker-height: clamp(52px, calc(1.5vw + 34px), 62.795px);
    --desktop-marker-gap: clamp(120px, calc(6.116667vw + 46.6px), 164.038px);
    --desktop-profile-gap: clamp(32px, calc(1.388889vw + 15.333333px), 42px);
    --desktop-detail-gap: clamp(32px, calc(1.527778vw + 13.666667px), 43px);
    --desktop-section-margin: clamp(120px, calc(4.166667vw + 70px), 150px);
    --desktop-evidence-width: clamp(360px, calc(9.861111vw + 241.666667px), 431px);
    --desktop-evidence-gap: clamp(32px, calc(1.25vw + 17px), 41px);
    --desktop-evidence-copy-width: clamp(480px, calc(8.333333vw + 380px), 540px);
    --desktop-recovery-column: clamp(395px, calc(461.666667px - 3.472222vw), 420px);

    --desktop-cases-padding-top: clamp(150px, calc(9.502778vw + 36.386667px), 218.42px);
    --desktop-cases-padding-bottom: clamp(80px, calc(4.166667vw + 30px), 110px);
    --desktop-case-control-gap: clamp(36px, calc(1.944444vw + 12.666667px), 50px);
    --desktop-case-gap: 30px;
    --desktop-filter-gap: clamp(16px, calc(0.555556vw + 9.333333px), 20px);
    --desktop-case-min-height: clamp(300px, calc(5.173611vw + 238px), 337.25px);
    --desktop-case-padding: clamp(24px, calc(0.833333vw + 14px), 30px);

    --desktop-process-padding: clamp(180px, calc(11.5625vw + 41.25px), 263.246px);
    --desktop-process-heading-gap: clamp(56px, calc(3.333333vw + 16px), 80px);
    --desktop-process-step-gap: clamp(36px, calc(1.944444vw + 12.666667px), 50px);

    --desktop-review-height: clamp(158.333px, calc(4.398148vw + 105.555556px), 190px);
    --desktop-review-width: clamp(280px, calc(7.777778vw + 186.666667px), 336px);
    --desktop-review-content-width: clamp(220px, calc(7.361111vw + 131.666667px), 273px);
    --desktop-reviews-height: clamp(600px, calc(15.416667vw + 415px), 711px);
    --desktop-reviews-padding-top: clamp(150px, calc(5.902778vw + 79.166667px), 192.5px);

    --desktop-editorial-width: clamp(328px, calc(11.437778vw + 190.746667px), 410.352px);
    --desktop-editorial-gap: clamp(20px, calc(1.388889vw + 3.333333px), 30px);
    --desktop-news-height: clamp(850px, calc(17.083333vw + 645px), 973px);
    --desktop-news-padding: clamp(80px, calc(2.628056vw + 48.463333px), 98.922px);
    --desktop-insights-height: clamp(850px, calc(17.083333vw + 645px), 973px);
    --desktop-insights-padding: clamp(110px, calc(4.361389vw + 57.663333px), 141.402px);

    --desktop-faq-height: clamp(900px, calc(15.694444vw + 711.666667px), 1013px);
    --desktop-faq-padding-top: clamp(120px, calc(5vw + 60px), 156px);
    --desktop-faq-width: clamp(850px, calc(23.541667vw + 567.5px), 1019.489px);
    --desktop-faq-row-height: clamp(56px, calc(1.420833vw + 38.95px), 66.238px);
    --desktop-faq-row-gap: clamp(16px, calc(0.555556vw + 9.333333px), 20px);

    --desktop-location-height: clamp(820px, calc(20.833333vw + 570px), 970px);
    --desktop-address-margin: clamp(60px, calc(3.472222vw + 18.333333px), 85px);
  }

  /* Upper sections */
}

@media (min-width: 1200px) {
  .iel-home .upper-results {
    padding-top: var(--desktop-results-top);
    padding-bottom: var(--desktop-results-bottom);
  }

  .iel-home .upper-result-grid {
    gap: var(--desktop-result-gap);
  }

  .iel-home .upper-result-image {
    height: auto;
    aspect-ratio: 401 / 326.153;
  }

  .iel-home .upper-cost-question {
    height: var(--desktop-question-height);
  }

  .iel-home .upper-intro {
    padding-top: var(--desktop-intro-padding-top);
  }

  .iel-home .upper-intro-grid {
    grid-template-rows: repeat(3, var(--desktop-intro-row));
    gap: var(--desktop-intro-gap);
    margin-top: var(--desktop-intro-margin);
  }
  .iel-home .upper-details {
    padding-top: var(--desktop-detail-padding-top);
    padding-bottom: var(--desktop-detail-padding-bottom);
  }
  .iel-home .upper-detail-marker {
    height: var(--desktop-marker-height);
    margin-bottom: var(--desktop-marker-gap);
  }
  .iel-home .upper-profile-track {
    gap: var(--desktop-profile-gap);
  }

  .iel-home .upper-women .upper-profiles,
  .iel-home .upper-prosecutors .upper-profiles {
    margin-top: var(--desktop-detail-gap);
  }
  .iel-home .upper-prosecutors,
  .iel-home .upper-psychologists {
    padding-top: var(--desktop-section-margin);
  }
  .iel-home .upper-evidence {
    grid-template-columns: var(--desktop-evidence-width) minmax(0, 1fr);
    column-gap: var(--desktop-evidence-gap);
    margin-top: var(--desktop-section-margin);
  }

  .iel-home .upper-evidence-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 431 / 517;
  }

  .iel-home .upper-evidence-copy {
    max-width: var(--desktop-evidence-copy-width);
  }

  .iel-home .upper-recovery-grid {
    grid-template-columns: minmax(0, 1fr) var(--desktop-recovery-column);
    gap: var(--desktop-evidence-gap);
    margin-top: var(--desktop-detail-gap);
  }
  /* Lower sections */
  .iel-home .lower-cases {
    padding-top: var(--desktop-cases-padding-top);
    padding-bottom: var(--desktop-cases-padding-bottom);
  }

  .iel-home .lower-cases .lower-search {
    margin-top: var(--desktop-case-control-gap);
  }

  .iel-home .lower-cases .lower-case-study-grid {
    gap: var(--desktop-case-gap);
  }

  .iel-home .lower-process {
    padding-block: var(--desktop-process-padding);
  }

  .iel-home .lower-process h2 {
    margin-bottom: var(--desktop-process-heading-gap);
  }

  .iel-home .lower-process .lower-steps details {
    padding-bottom: var(--desktop-process-step-gap);
  }

  .iel-home .lower-process .lower-steps details + details {
    padding-top: var(--desktop-process-step-gap);
  }
  .iel-home .lower-reviews {
    min-height: var(--desktop-reviews-height);
    padding-top: var(--desktop-reviews-padding-top);
  }

  .iel-home .lower-review-track {
    gap: var(--desktop-card-gap);
  }

  .iel-home .lower-review {
    flex-basis: var(--desktop-review-width);
    width: var(--desktop-review-width);
    height: var(--desktop-review-height);
    min-height: var(--desktop-review-height);
  }

  .iel-home .lower-review-content {
    width: var(--desktop-review-content-width);
  }

  .iel-home .lower-news {
    min-height: var(--desktop-news-height);
    padding-block: var(--desktop-news-padding);
  }

  .iel-home .lower-insights {
    min-height: var(--desktop-insights-height);
    padding-block: var(--desktop-insights-padding);
  }

  .iel-home .lower-news .lower-heading,
  .iel-home .lower-insights .lower-heading {
    gap: var(--desktop-editorial-gap);
  }

  .iel-home .lower-news .lower-card-track,
  .iel-home .lower-insights .lower-card-track {
    gap: var(--desktop-card-gap);
  }

  .iel-home .lower-news .lower-editorial,
  .iel-home .lower-insights .lower-editorial {
    flex-basis: var(--desktop-editorial-width);
    width: var(--desktop-editorial-width);
  }

  .iel-home .lower-news .editorial-image-frame,
  .iel-home .lower-insights .lower-insight-cover {
    height: auto;
    aspect-ratio: 410.352 / 251.078;
  }

  .iel-home .lower-news .lower-editorial-image,
  .iel-home .lower-insights .lower-editorial-image {
    height: 100%;
  }

  .iel-home .lower-faq {
    min-height: var(--desktop-faq-height);
    padding-top: var(--desktop-faq-padding-top);
  }

  .iel-home .lower-faq > .lower-narrow {
    width: min(var(--desktop-faq-width), calc(100% - 64px));
  }

  .iel-home .lower-faq .lower-faq-item,
  .iel-home .lower-faq .iel-faq-summary {
    min-height: var(--desktop-faq-row-height);
  }

  .iel-home .lower-faq .lower-faq-item + .lower-faq-item {
    margin-top: var(--desktop-faq-row-gap);
  }

  .iel-home .lower-location-gallery,
  .iel-home .lower-location-track,
  .iel-home .lower-location-track > img,
  .iel-home .lower-map,
  .iel-home .location-map,
  .iel-home .location-map-frame {
    height: var(--desktop-location-height);
  }

  .iel-home .lower-address,
  .iel-home .lower-location > .lower-address {
    margin-block: var(--desktop-address-margin);
  }
  /* Desktop type scales interpolate without enlarging mobile-sized content. */
  .iel-home .upper-results h2,
  .iel-home .upper-intro > h2,
  .iel-home .upper-teams-canvas > h2,
  .iel-home .upper-women h2,
  .iel-home .upper-prosecutors h2,
  .iel-home .upper-evidence-copy h2,
  .iel-home .upper-psychologists h2,
  .iel-home .lower-section h2,
  .iel-home .lower-news .lower-heading > h2,
  .iel-home .lower-insights .lower-heading > h2,
  .iel-home .lower-location h2,
  .iel-home .lower-philosophy h2 {
    font-size: var(--desktop-heading-size);
  }

  .iel-home .upper-results h2 > .iel-design-copy,
  .iel-home .upper-intro > h2 > .iel-design-copy,
  .iel-home .upper-teams-canvas > h2 > .iel-design-copy,
  .iel-home .upper-women h2 > .iel-design-copy,
  .iel-home .upper-prosecutors h2 > .iel-design-copy,
  .iel-home .upper-evidence-copy h2 > .iel-design-copy,
  .iel-home .upper-psychologists h2 > .iel-design-copy,
  .iel-home .lower-news .lower-heading > h2 > .iel-design-copy,
  .iel-home .lower-insights .lower-heading > h2 > .iel-design-copy,
  .iel-home .lower-cases h2 > .iel-design-copy,
  .iel-home .lower-news h2 > .iel-design-copy,
  .iel-home .lower-insights h2 > .iel-design-copy,
  .iel-home .lower-faq h2 > .iel-design-copy,
  .iel-home .lower-location h2 > .iel-design-copy,
  .iel-home .lower-philosophy h2 > .iel-design-copy {
    font-size: inherit;
  }

  .iel-home .upper-premium-summary,
  .iel-home .upper-result-description,
  .iel-home .upper-description,
  .iel-home .upper-team > div > p:last-child,
  .iel-home .lower-intro,
  .iel-home .lower-editorial > p,
  .iel-home .lower-address,
  .iel-home .lower-philosophy-copy p {
    font-size: var(--desktop-body-size);
  }

  .iel-home .upper-premium-summary > .iel-design-copy,
  .iel-home .upper-result-description > .iel-design-copy,
  .iel-home .upper-description > .iel-design-copy,
  .iel-home .upper-team > div > p:last-child > .iel-design-copy,
  .iel-home .lower-philosophy-copy p > .iel-design-copy {
    font-size: inherit;
  }
  .iel-home .upper-result h3 {
    font-size: var(--desktop-result-size);
  }
  .iel-home .upper-team h3 {
    font-size: var(--desktop-team-title-size);
  }

  .iel-home .upper-team > div > p:last-child {
    font-size: var(--desktop-team-body-size);
  }
  .iel-home .upper-profiles .upper-profile h3,
  .iel-home .upper-evidence-bio h3 {
    font-size: var(--desktop-profile-title-size);
  }

  .iel-home .lower-news .lower-editorial h3,
  .iel-home .lower-insights .lower-editorial h3 {
    font-size: var(--desktop-card-title-size);
  }
  .iel-home .lower-reviews .lower-wrap > h2 {
    font-size: var(--desktop-review-heading-size);
  }

  .iel-home .lower-reviews .lower-intro,
  .iel-home .lower-news .lower-editorial > p,
  .iel-home .lower-insights .lower-editorial > p {
    font-size: var(--desktop-body-size);
  }
}

/* Keep the psychologist photos proportional and let the recovery rail reach
 * the viewport edge without widening the document. */

@media (min-width: 768px) {
  .iel-home .upper-profiles--psychologists .upper-profile-photo {
    width: min(100%, 395px);
    max-width: 395px;
    height: auto;
    aspect-ratio: 395 / 382;
    margin-inline: auto;
  }

  .iel-home .upper-profiles--psychologists .upper-profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (min-width: 1200px) {
  .iel-home .upper-recovery-grid {
    --recovery-grid-width: min(1267px, calc(100vw - 80px));
    overflow: visible;
  }

  .iel-home .upper-recovery {
    width: auto;
    min-width: 0;
    height: auto;
    aspect-ratio: 718 / 599;
    margin-right: calc((var(--recovery-grid-width) - 100vw) / 2);
  }

  .iel-home .upper-recovery-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (min-width: 1200px) and (max-width: 1919px) {
  .iel-home {
    --desktop-philosophy-gutter: clamp(32px, calc(28.055556vw - 304.666667px), 234px);
  }
  .iel-home .lower-philosophy-copy {
    box-sizing: border-box;
    width: calc(100% - (2 * var(--desktop-philosophy-gutter)));
    margin-right: 0;
    margin-left: var(--desktop-philosophy-gutter);
  }
  .iel-home .lower-review {
    height: auto;
    min-height: 190px;
    padding: 16px;
  }

  body.home .site-footer {
    padding-inline: clamp(24px, calc(19.696875vw - 212.3625px), 165.8175px);
  }
}

/* Premium stage uses one normalized book frame from the tablet handoff through
 * the 1919px desktop range; mobile and the approved 1920px endpoint retain
 * their dedicated art direction. */

@media (min-width: 768px) and (max-width: 1199px) {
  .iel-home .upper-premium {
    min-height: clamp(760px, 84vw, 970px);
    padding: 0 clamp(24px, 4vw, 64px);
    aspect-ratio: auto;
  }

  .iel-home .upper-premium-scene {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 1122;
  }

  .iel-home .upper-premium-scene > .upper-background {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .iel-home .upper-premium-scene > .upper-background img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
  }

  .iel-home .upper-premium-copy {
    width: min(100%, 620px);
    gap: 20px;
    padding-top: clamp(72px, 12vw, 144px);
  }

  .iel-home .upper-premium-credentials {
    gap: 10px;
  }

  .iel-home .upper-premium-credential {
    min-height: 40px;
    padding-inline: 20px;
    font-size: 14px;
  }

  .iel-home .upper-premium-summary {
    margin-top: 18px;
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .iel-home .upper-premium h2,
  .iel-home .upper-premium h2 > .iel-copy-premium-title {
    font-size: 20px;
  }

  .iel-home .upper-premium-copy > p {
    margin: 6px auto 8px;
    font-size: 12px;
    line-height: 1.45;
  }
  .iel-home .upper-premium .upper-cost {
    width: 220px;
    height: 40px;
    font-size: 14px;
  }
  .iel-home .upper-premium-label--chapter {
    left: 44.78%;
    top: 61.13%;
    width: 10.44%;
  }

  .iel-home .upper-premium-label--iel {
    left: 49.27%;
    top: 87.293%;
    width: 1.909%;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .iel-home .upper-premium h2,
  .iel-home .upper-premium h2 > .iel-copy-premium-title {
    font-size: clamp(22px, 2.8vw, 28px);
  }

  .iel-home .upper-premium-copy > p {
    margin: 12px auto 14px;
    font-size: 14px;
    line-height: 1.6;
  }
  .iel-home .upper-premium .upper-cost {
    width: 236px;
    height: 44px;
    font-size: 15px;
  }
  .iel-home .upper-premium-label--chapter {
    left: 44.9805%;
    top: 61.13%;
    width: 10.039%;
  }

  .iel-home .upper-premium-label--iel {
    left: 49.3007%;
    top: 87.293%;
    width: 1.836%;
  }
}

@media (min-width: 1200px) and (max-width: 1919px) {
  .iel-home .upper-premium {
    box-sizing: border-box;
    height: clamp(970px, calc(21.111111vw + 716.666667px), 1122px);
    min-height: 0;
    padding: 0;
    aspect-ratio: auto;
  }

  .iel-home .upper-premium-scene {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 1122;
  }

  .iel-home .upper-premium-scene > .upper-background {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .iel-home .upper-premium-scene > .upper-background img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
  }

  .iel-home .upper-premium-copy {
    box-sizing: border-box;
    width: clamp(480px, calc(853.333333px - 19.444444vw), 620px);
    gap: clamp(20px, calc(1.388889vw + 3.333333px), 30px);
    padding: clamp(94px, calc(227.333333px - 6.944444vw), 144px) 0 0;
  }

  .iel-home .upper-premium h2,
  .iel-home .upper-premium h2 > .iel-copy-premium-title {
    font-size: clamp(28px, calc(1.111111vw + 14.666667px), 36px);
  }

  .iel-home .upper-premium-credentials {
    gap: clamp(10px, calc(0.694444vw + 1.666667px), 15px);
  }

  .iel-home .upper-premium-credential {
    min-height: clamp(40px, calc(1.944444vw + 16.666667px), 54px);
    padding-inline: clamp(20px, calc(1.388889vw + 3.333333px), 30px);
    font-size: clamp(14px, calc(0.555556vw + 7.333333px), 18px);
  }
  .iel-home .upper-premium .upper-cost {
    width: clamp(236px, calc(3.319861vw + 196.161667px), 259.903px);
    height: clamp(44px, calc(1.524861vw + 25.701667px), 54.979px);
    font-size: clamp(15px, calc(0.416667vw + 10px), 18px);
    font-weight: 600;
    line-height: 1;
  }
  .iel-home .upper-premium-copy > p.upper-premium-summary {
    max-width: none;
    margin: clamp(0px, calc(48px - 2.5vw), 18px) 0 0;
    color: #fff;
    font-size: clamp(14px, calc(0.555556vw + 7.333333px), 18px);
    line-height: 1.8;
    white-space: nowrap;
  }
  /* Keep both vector marks in the same normalized book-frame space. */
  .iel-home .upper-premium-label--chapter {
    left: clamp(539.766px, calc(46.265033vw - 15.4144px), 872.87424px);
    top: 61.13%;
    width: clamp(120.468px, calc(8.490733vw + 18.5792px), 181.60128px);
  }

  .iel-home .upper-premium-label--iel {
    left: clamp(591.6084px, calc(49.9191vw - 7.4208px), 951.02592px);
    top: 87.293%;
    width: clamp(22.032px, calc(1.5528vw + 3.3984px), 33.21216px);
  }
}

@media (min-width: 1920px) {
  .iel-home .upper-premium {
    height: 1122px;
    width: 100%;
    aspect-ratio: auto;
  }

  .iel-home .upper-premium-scene {
    left: 50%;
    right: auto;
    width: 100%;
    max-width: 1920px;
    height: 100%;
    margin-left: max(-960px, -50%);
    aspect-ratio: auto;
  }

  .iel-home .upper-premium-copy {
    width: 480px;
    padding: 94px 0 0;
  }

  .iel-home .upper-premium-copy > p.upper-premium-summary {
    max-width: none;
    margin: 0;
    color: #fff;
    font-size: 18px;
    line-height: 1.8;
    white-space: nowrap;
  }
  .iel-home .upper-premium .upper-cost {
    width: 259.903px;
    height: 54.979px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
  }
  .iel-home .upper-premium-scene > .upper-background img {
    inset: -3.35% auto auto -2.02%;
    width: 104.96%;
    height: 104.85%;
    object-fit: fill;
  }

  .iel-home .upper-premium-label--chapter {
    left: 45.4622%;
    top: 61.13%;
    width: 9.4584%;
  }

  .iel-home .upper-premium-label--iel {
    left: 49.5326%;
    top: 87.293%;
    width: 1.7298%;
  }
}

/*
 * Embedded/mobile canvases can report a desktop viewport even when the
 * homepage itself is only a few hundred pixels wide.  Keep this fallback
 * beside the viewport rules so the available inline size, not the user agent,
 * owns the mobile composition.
 */

@media (min-width: 768px) {
  @container home-shell (max-width: 767px) {
    .iel-home {
      overflow-x: clip;
      --upper-intro-base-bottom: 140px;
      --upper-teams-transition-gap: 88px;
    }
  }
}

@media (min-width: 768px) {
  @container home-shell (max-width: 767px) {
    .iel-home .upper-wrap,
    .iel-home .upper-details > .upper-women,
    .iel-home .upper-details > .upper-prosecutors,
    .iel-home .upper-details > .upper-evidence,
    .iel-home .upper-details > .upper-psychologists,
    .iel-home .lower-wrap,
    .iel-home .lower-narrow {
      width: calc(100% - 40px);
      max-width: none;
      margin-inline: auto;
    }
  }
  @container home-shell (max-width: 767px) {
    .iel-home .upper-hero,
    .iel-home .upper-premium,
    .iel-home .upper-contact,
    .iel-home .lower-philosophy {
      height: auto;
      min-height: 680px;
      aspect-ratio: auto;
    }
  }
  @container home-shell (max-width: 767px) {
    .iel-home .upper-hero-copy {
      width: calc(100% - 40px);
      max-width: none;
      margin-inline: auto;
      padding-top: 180px;
    }
  }
  @container home-shell (max-width: 767px) {
    .iel-home .upper-hero h1,
    .iel-home .upper-premium h2,
    .iel-home .upper-results h2,
    .iel-home .upper-intro > h2,
    .iel-home .upper-teams-canvas > h2,
    .iel-home .upper-details h2,
    .iel-home .upper-contact h2 {
      max-width: 100%;
      overflow-wrap: anywhere;
    }
  }
  @container home-shell (max-width: 767px) {
    .iel-home .upper-premium-copy {
      width: 100%;
      max-width: none;
      padding: 64px 20px 0;
    }

    .iel-home .upper-premium-copy > p.upper-premium-summary {
      max-width: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
    }
  }
  @container home-shell (max-width: 767px) {
    .iel-home .upper-results {
      box-sizing: border-box;
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 120px 20px 140px;
    }

    .iel-home .upper-result-grid {
      display: block;
      width: 100%;
      margin-top: 30px;
    }

    .iel-home .upper-result {
      width: 100%;
      min-width: 0;
      margin-bottom: 48px;
    }

    .iel-home .upper-result:last-child {
      margin-bottom: 0;
    }

    .iel-home .upper-result-image,
    .iel-home .upper-cost-question {
      width: 100%;
      max-width: 100%;
    }
  }
  @container home-shell (max-width: 767px) {
    .iel-home .upper-result-description,
    .iel-home .upper-description,
    .iel-home .upper-team > div > p:last-child,
    .iel-home .upper-evidence-bio ul {
      max-width: 100%;
      overflow-wrap: anywhere;
    }
  }
  @container home-shell (max-width: 767px) {
    .iel-home .upper-intro {
      display: block;
      width: 100%;
      max-width: none;
      padding: 0 20px;
    }

    .iel-home .upper-intro-grid {
      display: flex;
      width: 100%;
      max-width: 100%;
      height: auto;
      min-height: 210px;
      overflow-x: auto;
      grid-template-columns: none;
      grid-template-rows: none;
    }
  }
  @container home-shell (max-width: 767px) {
    .iel-home .upper-video {
      flex: 0 0 min(325px, 100%);
      width: min(325px, 100%);
      height: 210px;
    }
  }
  @container home-shell (max-width: 767px) {
    .iel-home .upper-details {
      width: 100%;
      overflow-x: clip;
    }

    .iel-home .upper-evidence,
    .iel-home .upper-recovery-grid {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .iel-home .upper-evidence-content {
      display: contents;
    }

    .iel-home .upper-evidence-copy,
    .iel-home .upper-evidence-bio,
    .iel-home .upper-evidence-photo,
    .iel-home .upper-recovery {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

    .iel-home .upper-evidence-photo {
      height: auto;
      aspect-ratio: 362 / 317;
      margin: 24px 0 0;
    }

    .iel-home .upper-recovery {
      height: 500px;
      margin: 48px 0 0;
      border-radius: 30px;
    }
  }
  @container home-shell (max-width: 767px) {
    .iel-home .upper-contact {
      box-sizing: border-box;
      padding: 180px 20px 80px;
    }

    .iel-home .upper-contact-options,
    .iel-home .upper-contact-options a {
      width: 100%;
      max-width: 100%;
    }
  }
  @container home-shell (max-width: 767px) {
    .iel-home .lower-cases .lower-case-study-grid,
    .iel-home .lower-card-track {
      grid-template-columns: 1fr;
    }
  }
  @container home-shell (max-width: 767px) {
    .iel-home .lower-editorial,
    .iel-home .lower-insight-cover,
    .iel-home .lower-faq > .lower-narrow {
      min-width: 0;
      max-width: 100%;
    }

    .iel-home :where(h1, h2, h3, p, li, a, button) {
      min-width: 0;
      max-width: 100%;
      overflow-wrap: anywhere;
    }
  }
}

/* Figma 887:247 / 937:354 evidence section geometry. */

@media (min-width: 1025px) {
  .iel-home .upper-evidence {
    width: min(1132.9px, calc(100% - 80px));
    max-width: none;
    margin-left: max(40px, calc((100vw - 1267px) / 2));
    margin-right: auto;
    grid-template-columns: minmax(0, 497fr) minmax(0, 596fr);
    grid-template-areas: 'content photo';
    column-gap: 40px;
  }

  .iel-home .upper-evidence-content {
    grid-area: content;
    align-self: start;
    justify-content: flex-start;
    padding-top: 0;
    margin-top: 16.685px;
  }

  .iel-home .upper-evidence-photo {
    grid-area: photo;
    height: auto;
    aspect-ratio: 595.9 / 517.37;
  }

  .iel-home .upper-evidence-copy,
  .iel-home .upper-evidence-copy .upper-description {
    max-width: 497px;
  }

  .iel-home .upper-evidence-copy h2 {
    max-width: 370px;
  }
}

@media (min-width: 1025px) and (max-width: 1199px) {
  .iel-home .upper-evidence {
    width: calc(100% - 80px);
    margin-left: 40px;
    column-gap: clamp(24px, 2.78vw, 40px);
  }
}

@media (max-width: 1024px) {
  .iel-home .upper-evidence {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .iel-home .upper-evidence-content {
    display: contents;
  }

  .iel-home .upper-evidence-copy {
    order: 0;
    max-width: none;
    padding-top: 0;
  }

  .iel-home .upper-evidence-photo {
    order: 1;
    width: min(100%, clamp(431px, 70vw, 560px));
    height: auto;
    aspect-ratio: 431 / 517;
    margin: 25px auto 0;
  }

  .iel-home .upper-evidence-bio {
    order: 2;
    align-self: stretch;
    width: min(100%, clamp(431px, 70vw, 560px));
    margin-top: 25px;
    margin-inline: auto;
  }
}

@media (max-width: 767px), (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  .iel-home .upper-evidence-photo {
    width: 100%;
    aspect-ratio: 362 / 316.741;
    margin: 25px 0 0;
  }

  .iel-home .upper-evidence-bio {
    width: 100%;
    margin-inline: 0;
  }
}

/* Review cards keep one internal flow after the endpoint-specific geometry. */

.iel-home .lower-reviews {
  overflow: hidden;
}

.iel-home .lower-review-track {
  align-items: stretch;
}

.iel-home .lower-review {
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.iel-home .lower-review-source-row,
.iel-home .lower-review-content {
  width: min(273px, 100%);
  max-width: 100%;
  min-width: 0;
}

.iel-home .lower-review-source-row {
  display: flex;
  min-height: 22px;
  align-items: center;
  justify-content: flex-end;
}

.iel-home .lower-review-source {
  display: flex;
  width: auto;
  min-width: 0;
  min-height: 22px;
  height: 22px;
  align-self: auto;
  align-items: center;
  margin: 0;
  padding: 0 12px;
  border-radius: 30px;
  font-size: 10px;
  line-height: 1;
}

.iel-home .lower-review-source--google,
.iel-home .lower-review-source--naver {
  width: auto;
  margin: 0;
}

.iel-home .lower-review-content {
  display: grid;
  grid-template-rows: auto 75px auto;
  row-gap: 15px;
  align-items: start;
}

.iel-home .lower-review h3 {
  min-width: 0;
  margin: 0;
}

.iel-home .lower-review-text {
  min-width: 0;
  min-height: 0;
  height: 75px;
  max-height: 75px;
  margin: 0 !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow-wrap: anywhere;
}

.iel-home .lower-review-meta {
  min-width: 0;
  min-height: 1.2em;
  max-height: none;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .iel-home .lower-review {
    height: auto;
    min-height: 190px;
    padding: 16px;
  }

  .iel-home .lower-review-content {
    grid-template-rows: auto 72px auto;
  }

  .iel-home .lower-review-text {
    height: 72px;
    max-height: 72px;
  }
}

@media (max-width: 767px), (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  .iel-home .lower-review-source-row,
  .iel-home .lower-review-content {
    width: min(273px, calc(100% - 32px));
  }
}

@media (min-width: 1200px) and (max-width: 1919px) {
  .iel-home .lower-review {
    height: auto;
    min-height: 190px;
    padding: 16px;
  }

  .iel-home .lower-review-source-row,
  .iel-home .lower-review-content {
    width: var(--desktop-review-content-width);
  }
}

@media (min-width: 1920px) {
  .iel-home .lower-review {
    height: var(--desktop-review-height);
    min-height: var(--desktop-review-height);
    padding: 10px;
  }

  .iel-home .lower-review-source-row,
  .iel-home .lower-review-content {
    width: var(--desktop-review-content-width);
  }
}

/* Final container-based guard for embedded/mobile shells. */

@media (min-width: 768px) {
  @container home-shell (max-width: 767px) {
    .iel-home,
    .iel-home .upper-details,
    .iel-home .lower-reviews,
    .iel-home .lower-news,
    .iel-home .lower-insights,
    .iel-home .lower-location {
      overflow-x: clip;
    }

    .iel-home .upper-profile-track,
    .iel-home .lower-review-track,
    .iel-home .lower-card-track {
      max-width: 100%;
      overflow-x: auto;
    }

    .iel-home .upper-results,
    .iel-home .upper-intro,
    .iel-home .upper-details,
    .iel-home .upper-contact {
      width: 100%;
      max-width: none;
    }

    .iel-home .upper-result-grid,
    .iel-home .upper-evidence,
    .iel-home .upper-recovery-grid,
    .iel-home .lower-case-study-grid {
      min-width: 0;
      max-width: 100%;
    }

    .iel-home .upper-result-description,
    .iel-home .upper-description,
    .iel-home .upper-premium-summary,
    .iel-home .upper-evidence-copy h2,
    .iel-home .upper-evidence-bio,
    .iel-home .upper-team > div {
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .iel-home .iel-design-copy,
    .iel-home h1,
    .iel-home h2,
    .iel-home h3 {
      word-break: keep-all;
      overflow-wrap: normal;
    }
  }
}

@media (min-width: 768px) {
  @container home-shell (max-width: 767px) {
    .iel-home .upper-premium h2 {
      width: min(356px, 100%);
      margin-inline: auto;
      font-size: 21px;
      line-height: 1.4;
    }

    .iel-home .upper-premium h2 > .iel-copy-premium-title {
      width: 100%;
      max-width: 356px;
      font-size: 20px !important;
      letter-spacing: -0.3px;
    }
  }
  @container home-shell (max-width: 767px) {
    .iel-home .upper-video-title,
    .iel-home .upper-video-label {
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .iel-home .upper-video-title {
      font-size: 17px;
      line-height: 1.3;
      letter-spacing: -0.3px;
      margin-top: 8px;
    }

    .iel-home .upper-video-label {
      font-size: 12px;
      line-height: 1.3;
      padding: 9px 10px;
    }

    .iel-home .lower-cases,
    .iel-home .lower-process,
    .iel-home .lower-reviews,
    .iel-home .lower-news,
    .iel-home .lower-insights,
    .iel-home .lower-faq,
    .iel-home .lower-location {
      height: auto;
      min-height: 0;
    }
  }
}

/* Some mobile WebViews expose a 980px-ish layout viewport. Treat that
 * touch-only range as mobile without changing real desktop/tablet pointers. */

@media (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  .iel-home {
    overflow-x: clip;
  }
}

@media (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  .iel-home .upper-details > .upper-women,
  .iel-home .upper-details > .upper-prosecutors,
  .iel-home .upper-details > .upper-evidence,
  .iel-home .upper-details > .upper-psychologists {
    width: min(356px, calc(100% - 40px));
    max-width: 100%;
    margin-inline: auto;
  }
  .iel-home .upper-details .upper-description,
  .iel-home .upper-details .upper-description > .iel-design-copy,
  .iel-home .upper-result-description,
  .iel-home .upper-result-description > .iel-design-copy {
    font-size: 14px;
    line-height: 1.8;
  }

  .iel-home .upper-result-grid,
  .iel-home .lower-cases .lower-case-study-grid {
    display: flex;
    flex-direction: column;
  }

  .iel-home .upper-result,
  .iel-home .upper-result-image,
  .iel-home .upper-cost-question,
  .iel-home .upper-contact-options,
  .iel-home .upper-contact-options a,
  .iel-home .upper-evidence-copy,
  .iel-home .upper-evidence-photo,
  .iel-home .upper-evidence-bio {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .iel-home .upper-result-description,
  .iel-home .upper-description,
  .iel-home .upper-premium-summary,
  .iel-home .upper-video-title,
  .iel-home .upper-video-label,
  .iel-home .upper-team > div,
  .iel-home .upper-evidence-bio {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .iel-home .iel-design-copy,
  .iel-home h1,
  .iel-home h2,
  .iel-home h3 {
    word-break: keep-all;
    overflow-wrap: normal;
  }
  .iel-home .upper-premium h2 {
    width: min(356px, 100%);
    margin-inline: auto;
    font-size: 21px;
    line-height: 1.4;
  }

  .iel-home .upper-premium h2 > .iel-copy-premium-title {
    width: 100%;
    max-width: 356px;
    font-size: 20px !important;
    letter-spacing: -0.3px;
  }
  .iel-home .upper-video-title {
    font-size: clamp(17px, 2.4vw, 22px);
    line-height: 1.3;
  }
  .iel-home .upper-premium-copy > p.upper-premium-summary {
    max-width: 100%;
  }
  .iel-home .upper-evidence,
  .iel-home .upper-recovery-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .iel-home .upper-evidence-content {
    display: contents;
  }

  .iel-home .upper-evidence-photo {
    height: auto;
    aspect-ratio: 362 / 317;
    margin: 24px 0 0;
  }

  .iel-home .upper-recovery {
    width: 100%;
    min-width: 0;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 48px 0 0;
  }
  .iel-home .lower-review-track,
  .iel-home .lower-card-track,
  .iel-home .upper-profile-track,
  .iel-home .upper-intro-grid {
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 767px), (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  .iel-home .upper-premium h2 > .iel-copy-premium-title {
    width: 100%;
    max-width: 356px;
    font-size: 20px !important;
    letter-spacing: -0.3px;
    word-break: keep-all;
    overflow-wrap: normal;
  }
}

/* Keep Korean copy intact across every narrow homepage section. */

@media (max-width: 1199px) {
  .iel-home :where(h1, h2, h3, p, li, a, button, .iel-design-copy) {
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .iel-home .iel-design-copy > br.iel-break-both {
    display: revert;
  }

  .iel-home .iel-design-copy > br.iel-break-desktop {
    display: none;
  }

  .iel-home .iel-design-copy > br.iel-break-mobile {
    display: revert;
  }
}

@media (max-width: 1199px) {
  .iel-home .upper-premium h2 > .iel-copy-premium-title > br.iel-break-both {
    display: revert;
  }
  .iel-home #upper-hero-title > .iel-copy-hero-title,
  .iel-home .lower-cases h2 > .iel-copy-case-study-title {
    width: 100%;
    max-width: none;
    word-break: keep-all;
    overflow-wrap: normal;
  }
  .iel-home #upper-hero-title > .iel-copy-hero-title {
    font-size: clamp(20px, 6.2vw, 25px);
  }
  .iel-home #upper-hero-title > .iel-copy-hero-title > br.iel-break-both,
  .iel-home .lower-cases h2 > .iel-copy-case-study-title > br.iel-break-both {
    display: revert;
  }
  .iel-home .lower-cases h2 > .iel-copy-case-study-title {
    font-size: 25px !important;
    line-height: 1.45;
  }
  .iel-home .upper-mobile-copy br {
    display: revert;
  }
}

/* Keep the authored tablet copy frame; the mobile heading frame below must not
 * shrink a normal 768–1199px layout to 356px. */

@media (min-width: 768px) and (max-width: 1199px) {
  .iel-home #upper-hero-title,
  .iel-home .lower-cases h2 {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
}

/* Real mobile uses the fluid content frame. The hero copy and title share one
 * frame so no hidden inner gutter can appear between the parent and its h1. */

@media (max-width: 767px) {
  .iel-home #upper-hero-title,
  .iel-home .lower-cases h2 {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
}

/* A touch WebView may expose a 980px layout viewport. Keep the mobile
 * composition centered at its approved 356px frame while preserving the
 * hero reveal's vertical transform. */

@media (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  .iel-home .upper-hero-copy {
    position: absolute;
    inset-inline: 0;
    width: min(356px, var(--mobile-content-frame));
    max-width: 100%;
    margin: 0 auto;
  }

  .iel-home #upper-hero-title {
    width: 100%;
    max-width: none;
    margin: 0;
  }
}

@media (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  .iel-home .lower-cases h2 {
    width: min(356px, var(--mobile-content-frame));
    max-width: 100%;
    margin-inline: auto;
  }
}

/* Embedded shells can report a desktop viewport while the actual homepage
 * container remains mobile-sized. Use the container width, not 100vw. */

@media (min-width: 768px) {
  @container home-shell (max-width: 767px) {
    .iel-home .upper-hero-copy {
      position: absolute;
      inset-inline: 0;
      width: calc(100% - 50px);
      max-width: 100%;
      margin: 0 auto;
    }

    .iel-home .upper-hero-description {
      width: 100%;
      max-width: 342px;
    }
  }
}

@media (min-width: 768px) {
  @container home-shell (max-width: 767px) {
    .iel-home #upper-hero-title,
    .iel-home .lower-cases h2 {
      width: 100%;
      max-width: none;
      margin-inline: 0;
    }
  }
}

/* Keep the authored sentence break and let home-copy-fit.js scale each block as a
 * whole when a fixed line is wider than its available frame. */

.iel-home .upper-premium-summary > br.upper-premium-summary-break-both {
  display: none;
}

@media (max-width: 767px), (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  .iel-home :where(.iel-design-copy, [data-mobile-copy-fit]) {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  /* These summaries are prose; wrapping keeps them readable at 320px. */
  .iel-home .lower-intro {
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }

  /* Keep the authored sentence break, but let each sentence wrap naturally
   * instead of shrinking these descriptions to one unbroken line. */
  .iel-home .iel-copy-women-description,
  .iel-home .iel-copy-prosecutors-description {
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }
  .iel-home .upper-premium-summary > span {
    display: inline !important;
  }

  .iel-home .upper-premium-summary > br.upper-premium-summary-break-both {
    display: revert !important;
  }
  .iel-home :where(.iel-design-copy, [data-mobile-copy-fit]) :where(.iel-copy-mobile, .upper-mobile-copy) {
    font-size: inherit !important;
    line-height: inherit;
  }
  .iel-home .upper-premium-note .iel-copy-mobile br {
    display: none;
  }
}

/* Home video titles keep one stored copy: its newlines are mobile-only breaks. */

@media (max-width: 767px), (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  .iel-home .upper-video-title {
    white-space: pre-line;
  }
}

@media (min-width: 768px) {
  @container home-shell (max-width: 767px) {
    .iel-home .upper-video-title {
      white-space: pre-line;
    }
  }
}

/* Figma 967:2365 mobile typography contract. Keep the historical 584/445
 * declarations above for their original surfaces; this final layer wins only
 * on the approved mobile and touch-WebView ranges. */

@media (max-width: 767px), (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  /* mo1 Hero */
}

@media (max-width: 767px), (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  .iel-home #upper-hero-title > .iel-copy-hero-title {
    color: #2f1b07;
    font-family: Pretendard, sans-serif;
    font-size: clamp(20px, 6.218905vw, 25px);
    font-style: normal;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0;
  }

  .iel-home .upper-hero-description .iel-copy-hero-lead,
  .iel-home .upper-hero-description .iel-copy-hero-detail {
    color: #2f1b07;
    font-family: Pretendard, sans-serif;
    font-size: clamp(14px, 3.731343vw, 15px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .iel-home .upper-hero-description .iel-copy-hero-brand {
    color: #2f1b07;
    font-family: Pretendard, sans-serif;
    font-size: clamp(14px, 3.731343vw, 15px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0;
  }
  /* mo2 Premium */
  .iel-home .upper-premium h2,
  .iel-home .upper-premium h2 > .iel-copy-premium-title {
    font-family: Pretendard, sans-serif;
    font-size: 25px !important;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -1.25px;
  }
  .iel-home .upper-premium .upper-cost {
    font-family: Pretendard, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
  }
  .iel-home .upper-premium-note .iel-copy-premium-note {
    font-family: Pretendard, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0;
  }
  /* mo3 Results */
  .iel-home .upper-result-description,
  .iel-home .upper-result-description > .iel-design-copy {
    font-family: Pretendard, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
  }
  /* mo6 Team details */
  .iel-home .upper-evidence-bio h3 {
    font-family: Pretendard, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0;
  }
  .iel-home .upper-profile--lee-hanran h3 {
    letter-spacing: -0.16px;
  }
  /* mo7 Contact */
}

/* Contact settlement typography is owned by contact-responsive.css. */

@media (max-width: 767px), (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  /* mo8 Case studies */
}

@media (max-width: 767px), (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  .iel-home .lower-cases .lower-search input {
    font-family: Pretendard, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0;
  }
  /* mo9 Consultation process */
  .iel-home .lower-process h2 {
    font-family: Pretendard, sans-serif;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0;
  }
  /* mo11 Reviews */
  .iel-home .lower-reviews .lower-wrap > h2 {
    font-family: Pretendard, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.3px;
  }
  /* mo12 News */
  .iel-home .lower-news .lower-editorial h3 {
    font-family: Pretendard, sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.2px;
  }
  /* mo13 FAQ */
  .iel-home .lower-faq h2 {
    font-family: Pretendard, sans-serif;
    font-size: 23px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0;
  }

  .iel-home .lower-faq .iel-faq-summary {
    font-family: Pretendard, sans-serif;
    /* site-responsive.css intentionally applies an important em-based floor
     * to every summary; the Figma FAQ contract is the narrower exception. */
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0;
  }

  .iel-home .lower-faq .lower-faq-item--mobile-multiline .iel-faq-summary {
    line-height: 1.4;
  }
  /* mo14 Insights */
  .iel-home .lower-insights .lower-insight-title {
    font-family: Pretendard, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.18px;
  }

  .iel-home .lower-insights .lower-insight-tag {
    font-family: Pretendard, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0;
  }

  .iel-home .lower-insights .lower-editorial h3 {
    font-family: Pretendard, sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.2px;
  }
  /* mo15 Location */
  .iel-home .lower-location h2 {
    font-family: Pretendard, sans-serif;
    font-size: 23px;
    font-weight: 300;
    line-height: 1.35;
    letter-spacing: 0;
  }

  .iel-home .lower-address dt {
    font-family: Pretendard, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.14px;
  }

  .iel-home .lower-address dd,
  .iel-home .lower-address dd .iel-copy-location-address {
    font-family: Pretendard, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0;
  }

  .iel-home .lower-address .lower-subway {
    font-family: Pretendard, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0;
  }
  /* mo16 Footer */
  body.home .site-footer .footer-sitemap > h2,
  body.home .site-footer .footer-social > h2 {
    font-family: Inter, Pretendard, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

/* Keep the mobile hero copy anchored to the 25.8px position from the 402px
 * reference frame. The existing right gutter remains the safe edge. */

@media (max-width: 767px) {
  .iel-home {
    --mobile-hero-copy-left: clamp(20px, 6.41791vw, 48px);
  }
}

@media (max-width: 767px) {
  .iel-home .upper-hero-copy {
    box-sizing: border-box;
    width: min(550.953px, calc(100% - var(--mobile-hero-copy-left) - var(--mobile-gutter)));
    max-width: none;
    margin-inline-start: var(--mobile-hero-copy-left);
    margin-inline-end: 0;
    padding-inline: 0;
  }
}

/* Mobile typography baseline: keep the 402px reference values authoritative
 * after the shared route-wide prose rules, while copy-fit may still reduce a
 * target when an unusually narrow frame cannot contain its authored line. */

@media (max-width: 767px), (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  .iel-home .upper-premium-summary,
  .iel-home .lower-intro,
  .iel-home .lower-news .lower-editorial > p,
  .iel-home .lower-insights .lower-editorial > p {
    font-size: 14px !important;
  }
}

@media (max-width: 767px), (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  .iel-home .upper-result > .upper-red {
    font-size: 14px !important;
  }
  .iel-home .upper-team .upper-red {
    font-size: 15px !important;
  }
}