/*
  Tailang Lab project-detail system
  Assumptions: this is a public project page inside Tailang Lab, not an
  independent film-poster site. The visitor needs to understand the work,
  inspect its production evidence, then choose a next action. The film cover
  remains an emotional asset; Tailang Lab supplies the reading shell, project
  hierarchy and evidence-oriented rhythm.
*/
:root {
  --tl-ink: oklch(0.18 0.018 248);
  --tl-muted: oklch(0.44 0.025 248);
  --tl-soft: oklch(0.96 0.012 88);
  --tl-paper: oklch(0.985 0.006 88);
  --tl-panel: oklch(0.93 0.017 88);
  --tl-line: oklch(0.84 0.018 88);
  --tl-accent: oklch(0.58 0.16 35);
  --tl-accent-dark: oklch(0.38 0.15 35);
  --tl-green: oklch(0.56 0.13 155);
  --tl-blue: oklch(0.47 0.12 245);
  --tl-dark: oklch(0.19 0.026 248);
  --tl-dark-2: oklch(0.24 0.03 248);
  --tl-cream: oklch(0.95 0.026 88);
  --tl-shadow: 0 24px 80px rgba(38, 31, 24, .12);
  --tl-radius: 8px;
  --tl-rail: 244px;
  --tl-max: 1360px;
  --tl-serif: "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  --tl-display: "Avenir Next", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  --tl-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.tl-page { min-width: 320px; margin: 0; color: var(--tl-ink); background: var(--tl-paper); font-family: var(--tl-display); -webkit-font-smoothing: antialiased; }
body.tl-page::before { position: fixed; z-index: -1; inset: 0; opacity: .65; background-image: linear-gradient(90deg, color-mix(in oklch, var(--tl-panel) 92%, white) 1px, transparent 1px), linear-gradient(color-mix(in oklch, var(--tl-panel) 92%, white) 1px, transparent 1px); background-size: 42px 42px; content: ""; pointer-events: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--tl-accent); outline-offset: 4px; }

.tl-shell { display: grid; grid-template-columns: var(--tl-rail) minmax(0, 1fr); min-height: 100vh; }
.tl-sidebar { position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; display: flex; width: var(--tl-rail); flex-direction: column; border-right: 1px solid color-mix(in oklch, var(--tl-line) 78%, transparent); padding: 20px 12px 24px; background: color-mix(in oklch, var(--tl-paper) 92%, white); }
.tl-brand { display: inline-grid; grid-template-columns: 28px auto; align-items: center; gap: 9px; padding: 0 2px 27px; font-weight: 900; letter-spacing: -.025em; }
.tl-brand-mark { position: relative; display: block; width: 28px; height: 28px; border: 2px solid var(--tl-ink); background: linear-gradient(90deg, transparent 45%, var(--tl-ink) 45% 55%, transparent 55%), linear-gradient(transparent 45%, var(--tl-ink) 45% 55%, transparent 55%); box-shadow: 4px 4px 0 var(--tl-accent); }
.tl-side-label { padding: 0 9px 12px; color: var(--tl-muted); font: 9px/1.4 var(--tl-mono); letter-spacing: .09em; text-transform: uppercase; }
.tl-side-nav { display: grid; gap: 4px; }
.tl-side-nav a { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px; border: 1px solid transparent; border-radius: 999px; color: var(--tl-muted); font-size: 13px; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.tl-side-nav a span { color: color-mix(in oklch, var(--tl-muted) 72%, white); font: 9px var(--tl-mono); }
.tl-side-nav a:hover, .tl-side-nav a[aria-current="page"] { border-color: var(--tl-ink); color: var(--tl-paper); background: var(--tl-ink); }
.tl-side-nav a:hover span, .tl-side-nav a[aria-current="page"] span { color: var(--tl-cream); }
.tl-side-nav .tl-side-link--external { margin-top: 7px; color: var(--tl-accent-dark); border-color: color-mix(in oklch, var(--tl-accent) 46%, var(--tl-line)); }
.tl-side-nav .tl-side-link--external:hover { color: var(--tl-paper); border-color: var(--tl-accent-dark); background: var(--tl-accent-dark); }
.tl-side-note { margin-top: auto; padding: 20px 9px 0; border-top: 1px solid var(--tl-line); color: var(--tl-muted); font-family: var(--tl-serif); font-size: 13px; line-height: 1.72; }
.tl-side-note b { display: block; margin-bottom: 7px; color: var(--tl-ink); font: 800 10px var(--tl-mono); letter-spacing: .1em; }

.tl-main { grid-column: 2; min-width: 0; }
.tl-wrap { width: min(calc(100% - 48px), var(--tl-max)); margin: 0 auto; }
.tl-topline { display: flex; align-items: center; justify-content: space-between; min-height: 58px; border-bottom: 1px solid var(--tl-line); color: var(--tl-muted); font: 10px var(--tl-mono); letter-spacing: .08em; text-transform: uppercase; }
.tl-breadcrumb { display: flex; gap: 9px; }
.tl-status { display: inline-flex; align-items: center; gap: 7px; color: color-mix(in oklch, var(--tl-green) 74%, black); }
.tl-status::before { width: 7px; height: 7px; border-radius: 50%; background: var(--tl-green); box-shadow: 0 0 14px color-mix(in oklch, var(--tl-green) 70%, transparent); content: ""; }

.tl-hero { position: relative; display: grid; grid-template-columns: minmax(410px, .82fr) minmax(500px, 1.18fr); gap: clamp(34px, 4.5vw, 68px); min-height: 565px; align-items: center; padding: clamp(35px, 4.8vw, 72px) 0 44px; overflow: hidden; }
.tl-hero-copy { position: relative; z-index: 2; display: flex; max-width: 680px; flex-direction: column; justify-content: center; }
.tl-kicker { display: inline-flex; align-items: center; gap: 13px; color: var(--tl-accent-dark); font: 10px var(--tl-mono); letter-spacing: .11em; text-transform: uppercase; }
.tl-kicker::before { width: 24px; height: 1px; background: var(--tl-accent); content: ""; }
.tl-hero h1 { max-width: 650px; margin: 22px 0 20px; font-family: var(--tl-display); font-size: clamp(67px, 7.35vw, 116px); font-weight: 900; letter-spacing: -.085em; line-height: .91; text-wrap: balance; }
.tl-hero h1 em { color: var(--tl-accent); font-family: var(--tl-display); font-size: .56em; font-style: normal; font-weight: 700; letter-spacing: -.1em; }
.tl-hero-summary { max-width: 620px; margin: 0; font-family: var(--tl-serif); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.72; }
.tl-hero-summary strong { color: var(--tl-accent-dark); font-weight: 700; }
.tl-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.tl-button { display: inline-flex; align-items: center; justify-content: center; min-height: 47px; border: 1px solid var(--tl-ink); border-radius: 999px; padding: 0 18px; font-size: 13px; font-weight: 800; transition: transform .2s ease, color .2s ease, background .2s ease; }
.tl-button:hover { transform: translateY(-2px); }
.tl-button--solid { color: var(--tl-paper); background: var(--tl-ink); }
.tl-button--solid:hover { border-color: var(--tl-accent-dark); background: var(--tl-accent-dark); }
.tl-button--line:hover { color: var(--tl-paper); background: var(--tl-ink); }
.tl-button--accent { color: var(--tl-paper); border-color: var(--tl-accent-dark); background: var(--tl-accent-dark); }
.tl-button--accent:hover { border-color: var(--tl-ink); background: var(--tl-ink); }
.tl-hero-visual { position: relative; aspect-ratio: 1.42; align-self: center; overflow: hidden; border: 1px solid var(--tl-line); border-radius: var(--tl-radius); background: var(--tl-soft); box-shadow: var(--tl-shadow); }
.tl-hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tl-hero-visual::after { position: absolute; inset: auto 14px 14px auto; padding: 9px 11px; color: var(--tl-cream); background: var(--tl-dark); font: 9px var(--tl-mono); letter-spacing: .08em; content: "FILM / FINAL COVER"; }
.tl-hero-meta { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 680px; border-top: 1px solid var(--tl-line); }
.tl-hero-meta div { min-height: 62px; padding: 11px 16px 8px 0; border-right: 1px solid var(--tl-line); }
.tl-hero-meta div + div { padding-left: 15px; }
.tl-hero-meta div:last-child { border-right: 0; }
.tl-hero-meta b, .tl-hero-meta span { display: block; }
.tl-hero-meta b { font: 900 21px/1.1 var(--tl-display); letter-spacing: -.05em; }
.tl-hero-meta span { margin-top: 4px; color: var(--tl-muted); font: 10px var(--tl-mono); letter-spacing: .07em; text-transform: uppercase; }

/* Homepage variant: the supplied cover already carries the title, so copy sits in the image instead of repeating it beside the image. */
.tl-hero--cover { display: block; min-height: clamp(500px, 48vw, 640px); margin-top: 26px; padding: 0; overflow: hidden; border: 1px solid var(--tl-line); border-radius: var(--tl-radius); background: var(--tl-dark); box-shadow: var(--tl-shadow); }
.tl-hero--cover::after { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(7, 13, 18, .58) 0%, rgba(7, 13, 18, .24) 42%, rgba(7, 13, 18, .08) 69%, rgba(7, 13, 18, .2) 100%), linear-gradient(0deg, rgba(7, 13, 18, .9) 0%, rgba(7, 13, 18, .38) 34%, transparent 66%); content: ""; pointer-events: none; }
.tl-hero--cover .tl-hero-visual { position: absolute; z-index: 0; inset: 0; width: auto; min-height: 0; margin: 0; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
.tl-hero--cover .tl-hero-visual::after { display: none; }
.tl-hero--cover .tl-hero-copy { position: absolute; z-index: 2; bottom: 103px; left: clamp(26px, 4vw, 58px); max-width: min(610px, 54%); color: var(--tl-cream); }
.tl-hero--cover .tl-kicker { color: var(--tl-cream); }
.tl-hero--cover .tl-kicker::before { background: var(--tl-accent); }
.tl-hero--cover .tl-hero-summary { color: var(--tl-cream); font-size: clamp(19px, 1.65vw, 24px); line-height: 1.72; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
.tl-hero--cover .tl-hero-summary strong { color: #ffd7bc; }
.tl-hero--cover .tl-actions { margin-top: 24px; }
.tl-hero--cover .tl-button--solid { color: var(--tl-ink); border-color: var(--tl-cream); background: var(--tl-cream); }
.tl-hero--cover .tl-button--solid:hover { color: var(--tl-cream); border-color: var(--tl-accent); background: var(--tl-accent-dark); }
.tl-hero--cover .tl-button--line { color: var(--tl-cream); border-color: rgba(255, 249, 238, .72); background: rgba(10, 16, 20, .2); backdrop-filter: blur(7px); }
.tl-hero--cover .tl-button--line:hover { color: var(--tl-ink); border-color: var(--tl-cream); background: var(--tl-cream); }
.tl-hero--cover .tl-hero-meta { right: 0; bottom: 0; left: auto; width: min(430px, 43%); max-width: none; border: 0; color: var(--tl-cream); background: rgba(8, 14, 18, .62); backdrop-filter: blur(9px); }
.tl-hero--cover .tl-hero-meta div { min-height: 71px; padding: 14px 17px 12px; border-right: 1px solid rgba(255, 250, 239, .22); }
.tl-hero--cover .tl-hero-meta div + div { padding-left: 17px; }
.tl-hero--cover .tl-hero-meta b { color: var(--tl-cream); }
.tl-hero--cover .tl-hero-meta span { color: rgba(255, 250, 239, .72); }

.tl-section { padding: clamp(54px, 6.2vw, 88px) 0; border-top: 1px solid var(--tl-line); }
.tl-section--panel { background: color-mix(in oklch, var(--tl-soft) 84%, white); }
.tl-section--dark { color: var(--tl-cream); border-color: var(--tl-dark); background: var(--tl-dark); }
.tl-section-head { display: grid; grid-template-columns: minmax(360px, .95fr) minmax(360px, 1.05fr); gap: clamp(38px, 5.5vw, 78px); align-items: start; }
.tl-section-head h2 { max-width: 730px; margin: 18px 0 0; font-family: var(--tl-serif); font-size: clamp(44px, 4.5vw, 65px); font-weight: 800; letter-spacing: -.07em; line-height: 1.06; text-wrap: pretty; }
.tl-section-head h2 em { color: var(--tl-accent); font-style: normal; }
.tl-section-head p { max-width: 730px; margin: 24px 0 0; color: var(--tl-muted); font-family: var(--tl-serif); font-size: 19px; line-height: 1.75; }
.tl-section--dark .tl-section-head p { color: color-mix(in oklch, var(--tl-cream) 78%, var(--tl-muted)); }

.tl-project-grid { display: grid; grid-template-columns: .84fr 1.16fr; gap: 1px; margin-top: 42px; border: 1px solid var(--tl-line); background: var(--tl-line); }
.tl-project-note { padding: 34px; background: var(--tl-paper); }
.tl-project-note h3 { margin: 0; font-size: 21px; letter-spacing: -.04em; }
.tl-project-note p { margin: 15px 0 0; color: var(--tl-muted); font-family: var(--tl-serif); font-size: 16px; line-height: 1.75; }
.tl-project-note b { display: block; margin-bottom: 19px; color: var(--tl-accent-dark); font: 10px var(--tl-mono); letter-spacing: .1em; }
.tl-proof-list { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--tl-paper); }
.tl-proof-list article { min-height: 214px; padding: 30px; border-right: 1px solid var(--tl-line); }
.tl-proof-list article:last-child { border-right: 0; }
.tl-proof-list span { color: var(--tl-accent-dark); font: 10px var(--tl-mono); letter-spacing: .11em; }
.tl-proof-list h3 { margin: 30px 0 10px; font-family: var(--tl-serif); font-size: 28px; font-weight: 800; letter-spacing: -.06em; }
.tl-proof-list p { margin: 0; color: var(--tl-muted); font-size: 15px; line-height: 1.72; }

.tl-evidence-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-top: 42px; }
.tl-evidence { position: relative; overflow: hidden; min-height: 330px; border: 1px solid var(--tl-line); border-radius: var(--tl-radius); background: var(--tl-soft); }
.tl-evidence:nth-child(1) { grid-column: span 7; }
.tl-evidence:nth-child(2) { grid-column: span 5; }
.tl-evidence:nth-child(3), .tl-evidence:nth-child(4) { grid-column: span 6; }
.tl-evidence img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.tl-evidence:hover img { transform: scale(1.025); }
.tl-evidence figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 34px 22px 18px; color: white; background: linear-gradient(transparent, rgba(8, 13, 19, .9)); }
.tl-evidence figcaption b, .tl-evidence figcaption span { display: block; }
.tl-evidence figcaption b { font-size: 20px; letter-spacing: -.04em; }
.tl-evidence figcaption span { margin-top: 5px; color: #dedbd2; font: 11px var(--tl-mono); letter-spacing: .07em; }

.tl-deliverable-list { display: grid; margin-top: 42px; border-top: 1px solid color-mix(in oklch, var(--tl-cream) 32%, var(--tl-dark)); }
.tl-deliverable { display: grid; grid-template-columns: 74px minmax(250px, .9fr) minmax(0, 1.2fr) auto; gap: 28px; align-items: center; padding: 26px 0; border-bottom: 1px solid color-mix(in oklch, var(--tl-cream) 25%, var(--tl-dark)); }
.tl-deliverable__index { color: var(--tl-accent); font: 22px var(--tl-mono); }
.tl-deliverable h3 { margin: 0; font-family: var(--tl-serif); font-size: 28px; font-weight: 800; letter-spacing: -.06em; }
.tl-deliverable p { margin: 0; color: color-mix(in oklch, var(--tl-cream) 76%, var(--tl-muted)); font-family: var(--tl-serif); font-size: 16px; line-height: 1.68; }
.tl-deliverable a { color: var(--tl-cream); border-bottom: 1px solid var(--tl-accent); padding-bottom: 4px; font: 12px var(--tl-mono); letter-spacing: .07em; white-space: nowrap; }
.tl-deliverable a:hover { color: var(--tl-accent); }

.tl-case-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 24px 0; border-bottom: 1px solid var(--tl-line); }
.tl-case-tabs a { border: 1px solid var(--tl-line); border-radius: 999px; padding: 9px 14px; color: var(--tl-muted); font-size: 12px; }
.tl-case-tabs a:hover, .tl-case-tabs a[aria-current="page"] { color: var(--tl-paper); border-color: var(--tl-ink); background: var(--tl-ink); }

.tl-reading { max-width: 980px; margin: 48px auto 0; }
.tl-reading h3 { margin: 38px 0 13px; color: var(--tl-accent-dark); font: 11px var(--tl-mono); letter-spacing: .11em; }
.tl-reading p, .tl-reading blockquote { margin: 0 0 18px; font-family: var(--tl-serif); font-size: 19px; line-height: 1.82; }
.tl-reading blockquote { max-width: 680px; margin: 27px auto; border-left: 2px solid var(--tl-accent); padding-left: 23px; color: var(--tl-accent-dark); font-size: 23px; line-height: 1.6; }
.tl-beats { display: grid; margin-top: 55px; border-top: 1px solid var(--tl-line); }
.tl-beat { display: grid; grid-template-columns: 74px minmax(190px, .8fr) minmax(0, 1.2fr); gap: 28px; padding: 29px 0; border-bottom: 1px solid var(--tl-line); }
.tl-beat__no { color: var(--tl-accent); font: 28px var(--tl-mono); }
.tl-beat h3 { margin: 0; font-family: var(--tl-serif); font-size: 29px; font-weight: 800; letter-spacing: -.06em; }
.tl-beat p { margin: 0; color: var(--tl-muted); font-family: var(--tl-serif); font-size: 16px; line-height: 1.72; }

.tl-method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 42px; border: 1px solid var(--tl-line); background: var(--tl-line); }
.tl-method-step { min-height: 242px; padding: 32px; background: var(--tl-paper); }
.tl-method-step b { color: var(--tl-accent-dark); font: 11px var(--tl-mono); letter-spacing: .1em; }
.tl-method-step h3 { margin: 31px 0 10px; font-family: var(--tl-serif); font-size: 32px; font-weight: 800; letter-spacing: -.065em; }
.tl-method-step p { margin: 0; color: var(--tl-muted); font-size: 16px; line-height: 1.72; }
.tl-method-step small { display: block; margin-top: 16px; color: var(--tl-green); font: 11px var(--tl-mono); letter-spacing: .07em; }

.tl-footer { padding: 30px 0; color: var(--tl-cream); background: var(--tl-dark-2); }
.tl-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; font: 10px var(--tl-mono); letter-spacing: .08em; }
.tl-footer a:hover { color: var(--tl-accent); }

@media (max-width: 1040px) {
  .tl-hero { grid-template-columns: minmax(320px, .8fr) minmax(340px, 1fr); }
  .tl-project-grid { grid-template-columns: 1fr; }
  .tl-proof-list { grid-template-columns: repeat(3, 1fr); }
  .tl-deliverable { grid-template-columns: 66px minmax(190px, .8fr) minmax(0, 1.1fr); }
  .tl-deliverable a { grid-column: 2 / -1; justify-self: start; }
}

@media (max-width: 820px) {
  body.tl-page::before { background-size: 36px 36px; }
  .tl-shell { display: block; }
  .tl-sidebar { position: sticky; top: 0; right: 0; display: flex; width: auto; height: auto; min-height: 62px; flex-direction: row; align-items: center; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--tl-line); padding: 12px 16px; }
  .tl-brand { flex: 0 0 auto; padding: 0 22px 0 0; }
  .tl-brand-mark { width: 25px; height: 25px; }
  .tl-side-label, .tl-side-note { display: none; }
  .tl-side-nav { display: flex; flex: 1 0 auto; gap: 6px; }
  .tl-side-nav a { flex: 0 0 auto; padding: 8px 11px; font-size: 12px; }
  .tl-side-nav a span { display: none; }
  .tl-side-nav .tl-side-link--external { margin-top: 0; }
  .tl-main { display: block; }
  .tl-wrap { width: min(calc(100% - 36px), var(--tl-max)); }
  .tl-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 58px; }
  .tl-hero-copy { max-width: 720px; }
  .tl-hero h1 { font-size: clamp(59px, 12vw, 92px); }
  .tl-hero-visual { min-height: min(72vw, 470px); }
  .tl-hero-meta { position: static; max-width: none; grid-column: 1 / -1; }
  .tl-section-head { grid-template-columns: 1fr; gap: 0; }
  .tl-section-head p { margin-top: 25px; }
  .tl-evidence:nth-child(n) { grid-column: span 6; }
  .tl-deliverable { grid-template-columns: 58px minmax(180px, .9fr) minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .tl-sidebar { padding-left: 14px; }
  .tl-brand { padding-right: 15px; }
  .tl-brand > span:last-child { display: none; }
  .tl-wrap { width: min(calc(100% - 28px), var(--tl-max)); }
  .tl-topline { min-height: 47px; font-size: 8px; }
  .tl-hero { gap: 30px; padding: 45px 0 40px; }
  .tl-hero h1 { margin: 20px 0 19px; font-size: clamp(54px, 16vw, 72px); }
  .tl-hero-summary { font-size: 16px; }
  .tl-actions { gap: 8px; margin-top: 25px; }
  .tl-button { min-height: 42px; padding: 0 13px; font-size: 12px; }
  .tl-hero-visual { min-height: 320px; }
  .tl-hero-meta { grid-template-columns: repeat(3, 1fr); }
  .tl-hero-meta div { min-height: 60px; padding: 11px 8px 9px 0; }
  .tl-hero-meta div + div { padding-left: 9px; }
  .tl-hero-meta b { font-size: 15px; }
  .tl-hero-meta span { font-size: 8px; }
  .tl-section { padding: 68px 0; }
  .tl-section-head h2 { font-size: 40px; }
  .tl-section-head p { font-size: 16px; }
  .tl-project-grid, .tl-method-grid { margin-top: 40px; }
  .tl-method-grid { grid-template-columns: 1fr; }
  .tl-proof-list { grid-template-columns: 1fr; }
  .tl-proof-list article { min-height: 185px; border-right: 0; border-bottom: 1px solid var(--tl-line); }
  .tl-proof-list article:last-child { border-bottom: 0; }
  .tl-evidence-grid { grid-template-columns: 1fr; gap: 13px; margin-top: 40px; }
  .tl-evidence:nth-child(n) { grid-column: auto; min-height: 260px; }
  .tl-deliverable { grid-template-columns: 43px 1fr; gap: 13px; }
  .tl-deliverable p, .tl-deliverable a { grid-column: 2; }
  .tl-deliverable h3 { font-size: 24px; }
  .tl-beat { grid-template-columns: 48px 1fr; gap: 15px; }
  .tl-beat p { grid-column: 2; }
  .tl-reading { margin-top: 45px; }
  .tl-reading p { font-size: 17px; }
  .tl-method-step { min-height: 0; }
  .tl-footer__inner { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 820px) {
  .tl-hero--cover { min-height: 625px; margin-top: 18px; }
  .tl-hero--cover .tl-hero-visual { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; align-self: auto; }
  .tl-hero--cover .tl-hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 40% center; }
  .tl-hero--cover .tl-hero-copy { right: 28px; bottom: 113px; left: 28px; max-width: 620px; }
  .tl-hero--cover .tl-hero-meta { position: absolute; right: 0; bottom: 0; left: 0; width: auto; }
}

@media (max-width: 560px) {
  .tl-hero--cover { min-height: 600px; border-radius: 0; }
  .tl-hero--cover .tl-hero-visual img { object-position: 40% center; }
  .tl-hero--cover .tl-hero-copy { right: 20px; bottom: 116px; left: 20px; }
  .tl-hero--cover .tl-hero-summary { font-size: 17px; line-height: 1.68; }
  .tl-hero--cover .tl-actions { gap: 7px; margin-top: 18px; }
  .tl-hero--cover .tl-button { min-height: 39px; padding: 0 11px; font-size: 11px; }
  .tl-hero--cover .tl-hero-meta div { min-height: 60px; padding: 10px 9px; }
  .tl-hero--cover .tl-hero-meta div + div { padding-left: 9px; }
  .tl-hero--cover .tl-hero-meta b { font-size: 16px; }
  .tl-hero--cover .tl-hero-meta span { font-size: 8px; }
}