/* TIG (The Impactful Group) case study. Shared pieces: case-study.css, case-contact.css.
   Mood: ice-teal glass and a calm investment prospectus, with numbered sections (§),
   hairline rules and Playfair italic accents. The pipeline board lives in case-tig-2.css. */

:root {
  --accent: #0e7c80;
  --tg-teal: #0e5a64;
  --tg-deep: #0a3940;
  --tg-aqua: #2bb5a8;
  --tg-ice: #eef6f6;
  --tg-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', menlo, consolas, monospace;
  --cs-ink: #0b2a30;
  --cs-muted: #48606a;
  --cs-faint: #6f858d;
  --cs-line: rgb(11 42 48 / 13%);
  --cs-bg: #f4f9f9;
  --cs-dark: #0a3940;
  --cs-dot-radius: 0;
  --cs-dot-dark: #7fdcd2;
  --cf-dots: rgb(11 42 48 / 9%);
  --cf-glow: rgb(43 181 168 / 16%);
  --cf-btn: #0a3940;
  --cf-btn-icon: #7fdcd2;
  --cf-btn-icon-fg: #0a3940;
  --cf-sent: #0a3940;
  --cf-sent-fg: #7fdcd2;
}

a:hover { color: var(--accent); }
.tg-serif { font-family: var(--serif); font-style: italic; font-weight: 600; letter-spacing: -.01em; color: var(--accent); }
.tg-h3 { font-weight: 600; font-size: clamp(24px, 2.1vw, 34px); line-height: 1.1; letter-spacing: -.025em; }

/* section label: "§ 1  THE BRIEF ———" */
.tg-sec { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cs-faint); }
.tg-sec span { font-family: var(--serif); font-style: italic; font-size: 19px; letter-spacing: 0; text-transform: none; color: var(--accent); }
.tg-sec::after { content: ""; flex: 0 1 72px; height: 1px; background: currentcolor; opacity: .5; }
.tg-sec--dark { color: rgb(255 255 255 / 62%); }
.tg-sec--dark span { color: #7fdcd2; }

/* ---------- hero: the panoramic studio shot, copy over the empty teal left ---------- */
.tg-hero { position: relative; display: flex; align-items: center; min-height: clamp(540px, 40vw, 760px); padding: 72px var(--gutter); overflow: hidden; background: #0f4c56; color: var(--white); }
.tg-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(9 50 58 / 84%) 0%, rgb(9 50 58 / 58%) 30%, rgb(9 50 58 / 0%) 52%); }
.tg-hero__art { position: absolute; inset: 0; margin: 0; }
.tg-hero__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.tg-hero__copy { z-index: 2; display: grid; justify-items: start; gap: 22px; }
.tg-hero__mark { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 16px 8px 12px; border: 1px solid rgb(255 255 255 / 28%); border-radius: 999px; background: rgb(255 255 255 / 8%); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.tg-hero__tri { width: 16px; height: 14px; background: #7fdcd2; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tg-hero__title { max-width: 640px; margin: 0; font-weight: 600; font-size: clamp(36px, 3.7vw, 62px); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.tg-hero__title .tg-serif { color: #8fe6dc; }
.tg-hero__lead { max-width: 520px; margin: 0; font-size: 17px; line-height: 1.65; color: rgb(255 255 255 / 84%); }

/* ---------- cover sheet: project details as a ruled document header ---------- */
.tg-cover { padding: 0 var(--gutter); background: var(--white); border-bottom: 1px solid var(--cs-line); }
.tg-cover__dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 auto; }
.tg-cover__dl > div { padding: 24px 24px 26px; border-left: 1px solid var(--cs-line); }
.tg-cover__dl > div:first-child { padding-left: 0; border-left: 0; }
.tg-cover dt { margin-bottom: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cs-faint); }
.tg-cover dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--cs-ink); }

/* ---------- brief: drop cap + term sheet ---------- */
.tg-brief__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head body" "terms body"; gap: 48px 96px; }
.tg-brief__head { grid-area: head; display: grid; gap: 22px; }
.tg-brief__body { grid-area: body; padding-top: 6px; border-top: 1px solid var(--cs-ink); }
.tg-brief__body p { margin: 22px 0 0; font-size: 17px; line-height: 1.75; color: var(--cs-muted); }
.tg-brief__body .tg-drop { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.6; color: var(--cs-ink); }
.tg-drop::first-letter { float: left; padding: 8px 14px 0 0; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 92px; line-height: .78; color: var(--accent); }
.tg-terms { grid-area: terms; align-self: end; margin: 0; padding: 0; list-style: none; }
.tg-terms li { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cs-line); }
.tg-terms li::after { content: ""; order: 1; flex: 1; border-bottom: 1px dotted rgb(11 42 48 / 35%); transform: translateY(-5px); }
.tg-terms__k { order: 0; font-size: 14px; letter-spacing: .04em; color: var(--cs-muted); }
.tg-terms__v { order: 2; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 38px; line-height: 1; color: var(--tg-teal); }

/* ---------- framed images ("mats") ---------- */
.tg-mat { margin: 0; padding: 14px; background: var(--white); border: 1px solid var(--cs-line); box-shadow: 0 40px 70px -50px rgb(11 61 68 / 45%); }
.tg-mat img { display: block; width: 100%; height: auto; }
.tg-mat figcaption { padding-top: 12px; font-family: var(--serif); font-style: italic; font-size: 15px; text-align: center; color: var(--cs-faint); }

/* ---------- who it's for ---------- */
.tg-doors { background: var(--white); }
.tg-doors__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px 96px; align-items: center; }
.tg-doors .tg-mat { max-width: 560px; }
.tg-doors__copy { display: grid; gap: 22px; }
.tg-doors__list { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: door; }
.tg-doors__list li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 0; padding: 20px 0; border-top: 1px solid var(--cs-line); counter-increment: door; }
.tg-doors__list li:last-child { border-bottom: 1px solid var(--cs-line); }
.tg-doors__list li::before { content: counter(door, lower-roman) "."; grid-row: span 2; font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1; color: var(--accent); }
.tg-doors__list h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.tg-doors__list p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--cs-muted); }

/* ---------- plates: staggered two-column spread ---------- */
.tg-plates { background: linear-gradient(180deg, var(--cs-bg), var(--tg-ice)); }
.tg-plates__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 72px; max-width: 752px; margin: 72px auto 0; }
.tg-plate { display: grid; gap: 22px; align-content: start; margin: 0; }
.tg-plate:nth-child(even) { margin-top: 140px; }
.tg-plate:nth-child(4) { margin-top: 60px; }
.tg-plate figcaption { display: grid; gap: 8px; max-width: 520px; }
.tg-plate__n { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--accent); }
.tg-plate h3 { margin: 0; font-size: clamp(21px, 1.6vw, 26px); font-weight: 600; letter-spacing: -.02em; }
.tg-plate p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--cs-muted); }

/* ---------- colophon ---------- */
.tg-colophon { background: var(--white); }
.tg-colophon__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 96px; align-items: center; }
.tg-inks { margin: 0; border-top: 1px solid var(--cs-ink); }
.tg-inks > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--cs-line); }
.tg-inks dt { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 500; }
.tg-inks dt span { width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(11 42 48 / 16%); }
.tg-inks dd { margin: 0; font-family: var(--tg-mono); font-size: 14px; color: var(--cs-muted); }
.tg-inks > div:first-child dd { font-family: inherit; font-size: 16px; font-weight: 600; color: var(--cs-ink); }

/* ---------- outcomes: a roman-numeral ledger on deep teal ---------- */
.tg-out { background: radial-gradient(90% 120% at 100% 0%, #13606a 0%, var(--tg-deep) 55%); color: var(--white); }
.tg-out__head { display: grid; gap: 22px; max-width: 760px; }
.tg-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 80px; margin: 64px 0 0; padding: 0; list-style: none; }
.tg-ledger li { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: start; padding: 34px 0; border-top: 1px solid rgb(255 255 255 / 16%); }
.tg-ledger__n { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 52px; line-height: .9; color: #7fdcd2; }
.tg-ledger h3 { margin: 0 0 8px; font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.tg-ledger p { margin: 0; font-size: 15.5px; line-height: 1.65; color: rgb(255 255 255 / 70%); }
.tg-out .tg-serif { color: #8fe6dc; }

@media (max-width: 1100px) {
  .tg-cover__dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tg-cover__dl > div:nth-child(4) { padding-left: 0; border-left: 0; }
  .tg-cover__dl > div:nth-child(n + 4) { border-top: 1px solid var(--cs-line); }
}
@media (max-width: 1000px) {
  .tg-hero { flex-direction: column; align-items: stretch; min-height: 0; padding: 64px var(--gutter) 0; background: linear-gradient(180deg, #0f4c56 0%, #2d6f78 55%, #a9c9cd 100%); }
  .tg-hero::before { display: none; }
  .tg-hero__art { position: static; order: 2; margin: 40px calc(var(--gutter) * -1) 0; }
  .tg-hero__art img { height: auto; }
  .tg-brief__grid, .tg-doors__grid, .tg-colophon__grid { grid-template-columns: 1fr; grid-template-areas: "head" "body" "terms"; }
  .tg-doors .tg-mat { max-width: 520px; }
  .tg-ledger { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .tg-cover__dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tg-cover__dl > div { padding: 16px 0 18px 16px; }
  .tg-cover__dl > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .tg-cover__dl > div:nth-child(4) { padding-left: 16px; border-left: 1px solid var(--cs-line); }
  .tg-cover__dl > div:nth-child(n + 3) { border-top: 1px solid var(--cs-line); }
  .tg-cover__dl > div:last-child { grid-column: 1 / -1; }
  .tg-drop::first-letter { font-size: 70px; }
  .tg-mat { padding: 8px; }
  .tg-plates__grid { grid-template-columns: 1fr; gap: 56px; margin-top: 48px; }
  .tg-plate:nth-child(n) { margin-top: 0; }
  .tg-ledger li { grid-template-columns: 64px minmax(0, 1fr); padding: 26px 0; }
  .tg-ledger__n { font-size: 40px; }
}

/* the client logo (from the site logo set) on a white pill, readable on light and dark heroes */
.tg-brand { display: inline-flex; align-items: center; justify-self: start; margin: 0; padding: 10px 16px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 6%), 0 10px 24px -14px rgb(0 0 0 / 35%); }
.tg-brand img { display: block; width: auto; height: 30px; }