/* Samples, Training, Services, About and Contact: each page is one file, a folder with a tab and a sheet of paper inside.
   Notes, photos, briefs and exhibit labels come from shared.css. */

.page-head { padding: 124px var(--gutter) 46px; max-width: 1400px; }
.page-head h1 { margin-top: 14px; font: 400 clamp(3.4rem, 8.4vw, 7.6rem)/.9 var(--display); text-transform: uppercase; letter-spacing: .005em; max-width: 14ch; }
.page-head h1 em { font-style: normal; color: var(--earth); }
.page-head .lede { margin-top: 20px; font: 400 1.3rem/1.55 var(--serif); color: var(--cornsilk-2); max-width: 36em; }
.page-head .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 24px; }
.page-head .actions a:not(.btn) { color: var(--cornsilk-2); font-size: .85rem; }

/* ---------- The file: folder, tab, sheet ---------- */
.file { position: relative; max-width: 1320px; margin: 38px var(--gutter) 0; }
.file + .file { margin-top: 90px; }
.file-tab { position: absolute; left: 0; bottom: 100%; height: 40px; padding: 0 24px; display: flex; align-items: center; border-radius: 14px 14px 0 0;
  background: var(--folder, var(--olive)); color: var(--tab-ink, var(--cornsilk)); font: 400 1.2rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.file-body { padding: 18px; background: var(--folder, var(--olive)); border-radius: 0 20px 20px 20px; box-shadow: 0 40px 80px rgba(0, 0, 0, .35); }
.sheet { padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 64px) clamp(36px, 6vw, 80px); }
.sheet .lede { font: 400 1.2rem/1.6 var(--serif); max-width: 40em; }
.sheet .prose { font: 400 1.15rem/1.65 var(--serif); max-width: 42em; }
.sheet .prose p + p { margin-top: .9em; }
.sheet .prose b, .sheet .lede b { font-weight: 600; }
.small-print { margin-top: 18px; font-size: .8rem; color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin-top: 16px; }
.chips li { padding: 6px 14px; border: 1px solid rgba(40, 54, 24, .3); border-radius: 999px; font-size: .82rem; background: var(--note-cream); }

/* Tables on paper */
.tbl { overflow-x: auto; margin-top: 22px; }
.tbl table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .86rem; background: #fff; }
.tbl caption { text-align: left; padding: 0 0 10px; font: 400 1.2rem/1.1 var(--display); text-transform: uppercase; color: var(--pine); }
.tbl th, .tbl td { padding: 10px 12px; border-bottom: 1px solid rgba(40, 54, 24, .15); text-align: left; vertical-align: top; font-variant-numeric: tabular-nums; }
.tbl thead th { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); background: var(--note-cream); }
.tbl .small { display: block; font-size: .72rem; color: var(--ink-soft); }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.pill.good { background: #DCE3B8; color: #2F4A12; }
.pill.warn { background: #F3D39C; color: #6A4410; }
.pill.bad { background: #F6D2BF; color: var(--stamp); }

/* ---------- Samples: static concepts ---------- */
.concepts { display: grid; gap: 70px; margin-top: 44px; }
.concept { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 54px; align-items: start; }
.concept .photo { --h: 380px; --pos: 50% 50%; }
.concept .kicker { font-size: .74rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-soft); }
.concept h3 { margin-top: 6px; font: 400 clamp(1.6rem, 2.4vw, 2.2rem)/1.05 var(--display); text-transform: uppercase; color: var(--pine); }
.concept .template { margin-top: 12px; padding: 10px 14px; border: 1px dashed rgba(40, 54, 24, .4); font-size: .82rem; }
.why-title { margin: 16px 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--olive); }
.why { list-style: none; padding: 0; display: grid; gap: 10px; }
.why li { position: relative; padding-left: 22px; font: 400 1.05rem/1.55 var(--serif); }
.why li::before { content: ""; position: absolute; left: 3px; top: calc(.775em - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--earth); }
.why b { font-weight: 600; }
.concept .note { margin-top: 20px; max-width: 34em; }

/* ---------- Samples: video briefs, each video beside its brief ---------- */
.vbriefs { display: grid; gap: 80px; margin-top: 44px; }
.vbrief { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 50px; align-items: start; }
/* The video column travels down with the script, so viewers never scroll back up to watch while they read.
   (The whole pinned column is sticky: a sticky child of a box its own height has nowhere to move.) */
.vbrief .pinned { position: sticky; top: 92px; }
.vbrief .photo { --h: auto; }
.vbrief .dock-close { display: none; }
.vbrief video { height: auto; max-height: calc(100vh - 190px); aspect-ratio: 9 / 16; object-fit: contain; background: #10160A; }
.vbrief .kicker { font-size: .74rem; font-weight: 600; color: var(--ink-soft); }
.vbrief h3 { margin-top: 6px; font: 400 clamp(1.6rem, 2.4vw, 2.2rem)/1.05 var(--display); text-transform: uppercase; color: var(--pine); }
.brief-dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 16px; margin-top: 16px; font-size: .9rem; }
.brief-dl dt { font-weight: 700; }
.brief-dl dd { margin: 0; font-family: var(--serif); font-size: 1.05rem; line-height: 1.5; }
.beats { list-style: none; padding: 0; margin-top: 22px; display: grid; gap: 12px; }
.beat { padding: 16px 18px; background: var(--note-cream); border-left: 4px solid rgba(40, 54, 24, .2); transition: border-color .4s, background .4s; }
.beat.on { border-color: var(--earth); background: #FFF6E0; }
.beat .t { font-size: .74rem; font-weight: 700; color: var(--ink-soft); }
.beat b { display: block; margin-top: 2px; font: 400 1.15rem/1.1 var(--display); text-transform: uppercase; color: var(--pine); }
.beat q { display: block; margin-top: 8px; font: 400 1.05rem/1.55 var(--serif); quotes: "\201C" "\201D"; }
.beat .vis { margin-top: 8px; font-size: .8rem; color: var(--ink-soft); }

/* ---------- Training cases ---------- */
.cases-list { display: grid; gap: 90px; }
.case-doc { scroll-margin-top: 90px; }
.case-doc .kicker { font-size: .74rem; font-weight: 700; letter-spacing: .05em; color: var(--stamp); text-transform: uppercase; }
.case-doc h2 { margin-top: 8px; font: 400 clamp(2rem, 3.4vw, 3rem)/1 var(--display); text-transform: uppercase; color: var(--pine); max-width: 20ch; }
.case-doc h3 { margin-top: 28px; font: 400 1.35rem/1.1 var(--display); text-transform: uppercase; color: var(--pine); }
.case-doc p { margin-top: 14px; font: 400 1.12rem/1.65 var(--serif); max-width: 44em; }
.case-doc ul { margin-top: 12px; padding-left: 0; list-style: none; display: grid; gap: 8px; max-width: 44em; }
.case-doc li { position: relative; padding-left: 22px; font: 400 1.05rem/1.55 var(--serif); }
.case-doc ol { margin-top: 12px; padding-left: 1.6em; display: grid; gap: 8px; max-width: 44em; }
.case-doc ol li { padding-left: 6px; }
/* The dot sits on the middle of the first line (line height 1.55, so the middle is at .775em) */
.case-doc ul li::before { content: ""; position: absolute; left: 3px; top: calc(.775em - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--olive); }
/* Tag pills are chips, not a bullet list */
.case-doc ul.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.case-doc .chips li { padding: 6px 14px; font: 400 .82rem/1.4 var(--mono); }
.case-doc .chips li::before { content: none; }
.case-doc .tags { margin-top: 18px; }

/* ---------- Services ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 40px; }
.steps .note b { display: block; margin: 6px 0 8px; font: 400 1.6rem/1 var(--display); text-transform: uppercase; color: var(--pine); }
.steps .note .n { font-size: .78rem; font-weight: 700; }
.steps .note ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.steps .note li { padding: 3px 10px; border: 1px solid rgba(40, 54, 24, .35); border-radius: 999px; font-size: .74rem; font-weight: 600; }
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 30px; margin-top: 40px; }
.services .note ul { list-style: none; padding: 0; margin-top: 12px; display: grid; gap: 6px; }
.services .note li { position: relative; padding-left: 18px; font-size: .86rem; line-height: 1.5; }
.services .note li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: var(--olive); }
.services .pill-line { display: inline-block; margin-top: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--stamp); }
.pipeline { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 36px; counter-reset: p; }
.pipeline li { padding: 16px; background: #fff; border: 1px solid rgba(40, 54, 24, .18); counter-increment: p; }
.pipeline li::before { content: "0" counter(p); display: block; font-size: .74rem; font-weight: 700; color: var(--ink-soft); }
.pipeline b { display: block; margin-top: 6px; font: 400 1.15rem/1.1 var(--display); text-transform: uppercase; color: var(--pine); }
.pipeline span { font-size: .78rem; color: var(--ink-soft); }
.decisions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.decisions li { list-style: none; padding: 10px 16px; font-size: .88rem; }
.decisions li b { font-weight: 700; margin-right: 6px; }
.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 40px; }
.rules .note blockquote { font: 400 1.35rem/1.25 var(--serif); font-style: italic; color: var(--pine); }
.frameworks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.frameworks div { padding: 20px; background: var(--note-cream); border: 1px solid rgba(40, 54, 24, .18); }
.frameworks b { display: block; font: 400 1.3rem/1.1 var(--display); text-transform: uppercase; color: var(--pine); }
.frameworks p { margin-top: 8px; font-size: .86rem; line-height: 1.55; }

/* ---------- About ---------- */
.dossier { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 64px; align-items: start; }
.dossier .photo { --h: 400px; --pos: 50% 20%; }
.meta { margin-top: 40px; font-size: .9rem; line-height: 1.5; }
.meta dt { font-weight: 700; }
.meta dd { margin: 0 0 14px; color: var(--ink-soft); }
.statement { font: 400 clamp(1.8rem, 3vw, 2.6rem)/1.05 var(--display); text-transform: uppercase; color: var(--pine); max-width: 20ch; }
.statement span { color: var(--olive); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 22px; margin-top: 40px; }
.stats .note b { display: block; font: 400 clamp(2rem, 3vw, 2.8rem)/1 var(--display); color: var(--pine); }
.stats .note span { display: block; margin-top: 8px; font-size: .82rem; line-height: 1.45; }
.timeline { list-style: none; padding: 0; margin-top: 24px; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-top: 1px solid rgba(40, 54, 24, .2); }
.timeline .when { font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.timeline b { font: 400 1.35rem/1.1 var(--display); text-transform: uppercase; color: var(--pine); }
.timeline p { margin-top: 6px; font: 400 1.05rem/1.55 var(--serif); }
.tools { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin-top: 18px; }
.tools li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 1px solid rgba(40, 54, 24, .25); border-radius: 999px; background: #fff; font-size: .8rem; }
.tools svg { width: 20px; height: 20px; }
/* About: industries and tools drift past in two rows, in opposite directions, without stopping. */
.marquee { overflow: hidden; margin-top: 18px; padding: 2px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.marquee + .marquee { margin-top: 10px; }
.bleed + .marquee { margin-top: 28px; }
.marquee .mq-track { flex-wrap: nowrap; width: max-content; margin-top: 0; animation: mq var(--dur, 40s) linear infinite; }
.marquee.reverse .mq-track { animation-direction: reverse; }
.mq-track li { white-space: nowrap; }
@keyframes mq { to { transform: translateX(calc(-50% - 4px)); } }   /* half the track plus half the 8px gap: one exact loop */
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee .mq-track { flex-wrap: wrap; width: auto; }
  .marquee li[aria-hidden="true"] { display: none; }
}

/* ---------- Contact ---------- */
.cal-wrap { margin-top: 26px; overflow: hidden; border: 1px solid rgba(40, 54, 24, .2); background: #fff; }
.calendly-inline-widget { min-width: 0; height: 700px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; margin-top: 10px; }
.faq details { border-top: 1px solid rgba(40, 54, 24, .22); }
.faq details:last-child { border-bottom: 1px solid rgba(40, 54, 24, .22); }
.faq summary { display: flex; align-items: baseline; gap: 12px; padding: 16px 0; cursor: pointer; list-style: none; font: 500 1.12rem/1.35 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .n { font: 700 .76rem var(--mono); color: var(--ink-soft); }
.faq summary svg { margin-left: auto; transition: transform .3s; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { padding: 0 0 18px 34px; font: 400 1.05rem/1.6 var(--serif); }
.reach { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.reach a, .reach button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid rgba(40, 54, 24, .3); border-radius: 999px; background: var(--note-cream);
  color: var(--ink); font: 500 .82rem var(--mono); text-decoration: none; cursor: pointer; }
.reach a:hover, .reach button:hover { border-color: var(--olive); }
.copied { font-size: .8rem; color: var(--olive); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 26px; background: var(--note-cream); border: 1px solid rgba(40, 54, 24, .2); box-shadow: 6px 8px 0 rgba(40, 54, 24, .1); }
.form .full { grid-column: 1 / -1; }
.form label { display: block; margin-bottom: 6px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.form input, .form textarea { width: 100%; padding: 12px 14px; border: 1px solid rgba(40, 54, 24, .3); border-radius: 4px; background: #fff; color: var(--ink); font: 400 1rem/1.4 var(--serif); }
.form textarea { min-height: 140px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--earth); border-color: transparent; }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.form-foot p { font-size: .8rem; color: var(--ink-soft); }
.form-status { grid-column: 1 / -1; padding: 12px 14px; background: var(--note-yellow); font-size: .88rem; }
.form-status[hidden] { display: none; }

/* ---------- Tablets and phones ---------- */
@media (max-width: 1100px) {
  .services, .rules, .frameworks { grid-template-columns: 1fr 1fr; }
  .pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .page-head { padding-top: 100px; }
  .file { margin-left: 10px; margin-right: 10px; }
  .file-body { padding: 10px; }
  .concept, .vbrief, .dossier { grid-template-columns: 1fr; gap: 30px; }
  .concept .pinned, .vbrief .pinned, .dossier .pinned { max-width: 380px; }
  /* One column on phones: the video sits above its script. Once it's playing and scrolled away, it docks small in the corner. */
  .vbrief .pinned { position: relative; top: 0; }
  .vbrief video { max-height: none; }
  .vbrief .photo.docked { position: fixed; right: 12px; bottom: 14px; z-index: 60; width: 132px; padding: 5px 5px 22px; transform: none; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
  .vbrief .photo.docked .cap { left: 7px; bottom: 4px; font-size: .62rem; }

  .vbrief .photo.docked .dock-close { display: grid; place-items: center; position: absolute; top: -12px; left: -12px; width: 32px; height: 32px; border: 0; border-radius: 50%;
    background: var(--pine); color: var(--cornsilk); font: 600 1rem/1 var(--mono); cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
  .steps, .services, .rules, .frameworks { grid-template-columns: 1fr; }
  .pipeline { grid-template-columns: 1fr 1fr; }
  .timeline li { grid-template-columns: 1fr; gap: 6px; }
  .brief-dl { grid-template-columns: 1fr; gap: 2px; }
  .brief-dl dd { margin-bottom: 10px; }
  .form { grid-template-columns: 1fr; padding: 18px; }
  .calendly-inline-widget { height: 1000px; }
}

/* ---------- Call to action box at the end of a page ---------- */
.verdict { margin-top: 110px; padding: 30px 32px; border: 2px dashed rgba(40, 54, 24, .35); border-radius: 4px; }
.verdict p { margin-top: 12px; font: 400 1.25rem/1.6 var(--serif); max-width: 40em; }
.verdict .btn { margin-top: 20px; }
.case-doc .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; margin-top: 18px; }
.case-doc .tile { padding: 16px; background: var(--note-cream); border: 1px solid rgba(40, 54, 24, .18); }
.case-doc .doc-title { margin-top: 8px; font: 400 clamp(2rem, 3.4vw, 3rem)/1 var(--display); text-transform: uppercase; color: var(--pine); max-width: 20ch; }
.case-doc a { color: var(--olive); font-weight: 600; }
.statement + .prose { margin-top: 24px; }
/* Grid items may shrink below their widest content, so wide tables scroll inside their box instead of widening the page */
.cases-list > .file, .concepts > *, .vbriefs > *, .contact-grid > * { min-width: 0; }