/* ce-net.com/foreman landing (goal lead-10150123-238). Colours, face and the lockup from brand.css (goal
   lead-10150253-242); direction: the printed annual
   (taste-skill editorial-report, seed 1752711633): one axis at 42 %, text pages and full-bleed dark figure pages.
   Type ceiling 48 px web / 32 px phone (ce-fleet standards/type-has-a-ceiling.md). foreman/asdfghj-1. */
:root {
  --m: 32px; --axis: 42%;
  --s1: 48px; --s2: 28px; --s3: 20px; --s4: 17px; --s5: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (max-width: 700px) { :root { --m: 16px; --s1: 32px; --s2: 22px; --s3: 18px; --s4: 16px; } }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: var(--s4)/1.5 var(--font); -webkit-font-smoothing: antialiased; }
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2 { font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; margin: 0; }
h2 { font-size: var(--s1); }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--acc-ink); outline-offset: 2px; }

/* the board: an 8 px gap grid of filled tiles */
.bar { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; padding: 8px 8px 0; }
.tile { border-radius: 0; }
.bar .tile { height: 60px; display: flex; align-items: center; text-decoration: none; }
.ink { background: var(--ink); color: var(--bg); }
.bar .lockup { padding: 0 22px; font-size: 22px; background: var(--bg2); color: var(--ink); }
.links { background: var(--bg2); padding-left: calc(50% - 68px); gap: 28px; font-size: var(--s4); }
.links a { text-decoration: none; color: var(--ink); }
.links a:hover { color: var(--acc-ink); }
.act { padding: 0 24px; font-weight: 600; transition: background .2s var(--ease); }
.act:hover { background: var(--acc); color: var(--on-acc); }
.board { display: grid; grid-template-columns: 5fr 7fr; grid-template-rows: auto auto; gap: 8px; padding: 8px; }
.scene { grid-column: 2; grid-row: 1 / 3; }
.name { grid-column: 1; grid-row: 1; }
.pair { grid-column: 1; grid-row: 2; }
.name { background: var(--bg2); padding: 32px 24px 28px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
.name h1 { font-size: var(--s1); }
.name h1 .lockup { font-size: inherit; }
.say { font-size: var(--s2); line-height: 1.2; max-width: 12.5em; }
.pic { margin: 0; overflow: hidden; background: var(--dark); position: relative; }
.pic img { width: 100%; height: 100%; object-fit: cover; }
.scene { min-height: 520px; }
.scene iframe { width: 100%; height: 100%; border: 0; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dark { background: var(--dark); color: var(--on-dark); padding: 24px; font-size: var(--s3); line-height: 1.4; }
.accent { background: var(--acc); color: var(--on-acc); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.sign { font-size: var(--s2); font-weight: 600; letter-spacing: -0.02em; }
.go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; background: var(--on-acc); color: var(--acc);
      font: 600 var(--s4) var(--font); text-decoration: none; border-radius: 0; transition: transform .15s var(--ease), background .2s; }
.go:hover { transform: translateY(-2px); }
.go:active { transform: translateY(0) scale(.98); }
.go svg { width: 20px; height: 20px; }
.accent .go { width: 100%; white-space: nowrap; }
.small { font-size: var(--s5); line-height: 1.45; }
.shutter img { clip-path: inset(0 100% 0 0); transform: scale(1.12); transition: clip-path 1.1s var(--ease), transform 1.4s var(--ease); }
.shutter.open img { clip-path: inset(0 0 0 0); transform: none; }

/* text pages: the heading on the axis, body in two columns beside it */
.text { display: grid; grid-template-columns: var(--axis) 1fr; padding: 168px var(--m) 64px; column-gap: 32px; }
.text h2 { grid-column: 2; margin-bottom: 32px; }
.cols { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 80ch; }
.cols p { max-width: 38ch; font-size: var(--s4); }

/* figure pages: full-bleed dark, plates side by side */
.figs { background: var(--dark); display: grid; grid-template-columns: repeat(2, minmax(0, 680px)); justify-content: center; gap: 0 24px; padding: 24px var(--m) 48px; }
.figs.three { grid-template-columns: repeat(2, minmax(0, 680px)); }
.figs.three .fig:last-child { grid-column: 1 / -1; justify-self: center; width: min(680px, 100%); }
.fig { width: 100%; height: 760px; border: 0; background: var(--dark); }

/* the staircase */
.steps { padding: 200px var(--m) 120px; display: grid; grid-template-columns: repeat(12, 1fr); row-gap: 56px; }
.step { grid-column: span 6; }
.step:nth-child(1) { grid-column: 1 / span 6; } .step:nth-child(2) { grid-column: 3 / span 7; }
.step:nth-child(3) { grid-column: 5 / span 7; } .step:nth-child(4) { grid-column: 7 / span 6; }
.line { font-size: var(--s1); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.line.last { color: var(--acc-ink); }
.note { margin-top: 12px; max-width: 34ch; color: var(--soft); }

/* the table: no lines, alternating tone, one hot column */
.table { padding: 120px var(--m) 168px; }
.table h2 { margin-bottom: 48px; }
.grid .row { display: grid; grid-template-columns: 5fr 4fr 3fr; align-items: center; min-height: 68px; }
.grid .row:nth-child(even) { background: var(--bg2); }
.grid .row > span { padding: 12px 16px; }
.grid .row > span:first-child { font-size: var(--s3); font-weight: 500; }
.grid .head > span { font-weight: 600; font-size: var(--s4); }
.grid .hot { background: var(--acc); color: var(--on-acc); align-self: stretch; display: flex; align-items: center; }
.grid .row:nth-child(even) .hot { background: color-mix(in srgb, var(--acc) 90%, #000); }

/* the band: four unequal panels, edge to edge */
.band { padding: 0 0 168px; }
.band h2 { padding: 0 var(--m) 64px calc(var(--m) + 16.6%); }
.panels { display: flex; height: 68svh; min-height: 420px; }
.panels figure { margin: 0; overflow: hidden; position: relative; transition: flex-grow .5s var(--ease); }
.p1 { flex: 5 1 0; } .p2 { flex: 2 1 0; } .p3 { flex: 3 1 0; } .p4 { flex: 2 1 0; }
.panels figure:hover { flex-grow: 6; }
.panels img, .panels video { width: 100%; height: 100%; object-fit: cover; }
.panels figcaption { position: absolute; left: 0; top: 0; padding: 24px; font-size: var(--s2); font-weight: 600; color: #fff; background: rgba(0, 0, 0, .45); }
.p1 img { animation: drift 24s var(--ease) infinite alternate; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.08) translate(-1%, -1%); } }
.cap { padding: 16px var(--m) 0; color: var(--soft); }

/* the numbers as plain lines in columns */
.proof { display: grid; grid-template-columns: 3fr 1fr 8fr; padding: 0 var(--m) 168px; }
.proof h2 { grid-column: 1; font-size: var(--s2); }
.names { grid-column: 3; columns: 4; column-gap: 32px; }
.names p { font-size: var(--s3); line-height: 1.5; break-inside: avoid; }
.names .kind { color: var(--soft); break-before: column; }
.names .kind:first-child { break-before: auto; }

/* the close, inverted */
.close { background: var(--ink); color: var(--bg); min-height: 64svh; padding: 120px var(--m) 40px; display: flex; flex-direction: column; justify-content: space-between; }
.close h2 { max-width: 12em; }
.base { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.base p { font-size: var(--s3); max-width: 30em; }
.go.big { background: var(--acc); color: var(--on-acc); min-height: 56px; }

/* footer: columns, then the name across the width */
.foot { background: var(--ink); color: var(--bg); min-height: 72svh; display: grid; grid-template-rows: auto 1fr auto auto; padding: 40px var(--m) 20px; }
.fcols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.fcols p { font-size: var(--s4); opacity: .72; }
.fcols p:first-child { opacity: 1; }
.fcols a { text-decoration: none; }
.fcols a:hover { text-decoration: underline; }
.word { grid-row: 3; width: 100%; height: auto; }
.word text { font: 600 112px var(--font); letter-spacing: -0.04em; fill: var(--bg); }
.word .t { fill: var(--acc); } .word .l { fill: var(--bg); } .word .r { fill: var(--mute); }
.legal { font-size: var(--s5); opacity: .72; margin-top: 20px; }

/* entrances (content stays visible without script) */
.js .rise { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rise { transform: none; transition: opacity .3s; }
  .shutter img { clip-path: none; transform: none; transition: none; }
  .p1 img { animation: none; }
  .panels figure { transition: none; }
}

@media (max-width: 1100px) {
  .figs, .figs.three { grid-template-columns: minmax(0, 680px); }
  .text { grid-template-columns: 1fr; }
  .text h2, .cols { grid-column: 1; }
  .figs.three .fig:last-child { grid-column: auto; }
}
@media (max-width: 700px) {
  .bar { grid-template-columns: auto 1fr; }
  .bar .lockup { padding: 0 16px; font-size: 20px; }
  .bar .links { display: none; }
  .act { justify-content: center; }
  .board { grid-template-columns: 1fr; grid-template-rows: auto; gap: 6px; padding: 6px; }
  .name { min-height: 0; padding: 24px 20px; }
  .scene { aspect-ratio: 4 / 5; min-height: 0; min-width: 0; width: 100%; grid-column: 1; grid-row: auto; order: 3; }
  .name, .pair { grid-column: 1; grid-row: auto; }
  .pair { order: 2; }
  .pair { grid-template-columns: 1fr; gap: 6px; }
  .text { grid-template-columns: 1fr; padding: 96px var(--m) 40px; }
  .text h2, .cols { grid-column: 1; }
  .cols { grid-template-columns: 1fr; gap: 16px; }
  .figs { padding: 8px 0 24px; }
  .steps { padding: 120px var(--m) 80px; row-gap: 40px; display: block; }
  .step { margin: 0 0 40px; }
  .step:nth-child(2) { margin-left: 6vw; } .step:nth-child(3) { margin-left: 12vw; } .step:nth-child(4) { margin-left: 18vw; }
  .table { padding: 80px var(--m) 96px; }
  .grid .head { display: none; }
  .grid .row { grid-template-columns: 1fr; padding: 12px 0; }
  .grid .row > span { padding: 4px 16px; }
  .grid .hot { padding: 10px 16px !important; }
  .band h2 { padding: 0 var(--m) 32px; font-size: 28px; }
  .panels { flex-wrap: wrap; height: 84svh; }
  .p1 { flex: 0 0 64%; height: 50%; } .p2 { flex: 0 0 36%; height: 50%; } .p3 { flex: 0 0 36%; height: 50%; } .p4 { flex: 0 0 64%; height: 50%; }
  .panels figure:hover { flex-grow: 0; }
  .proof { grid-template-columns: 1fr; padding: 0 var(--m) 96px; }
  .proof h2, .names { grid-column: 1; }
  .proof h2 { margin-bottom: 24px; font-size: 26px; }
  .names { columns: 2; column-gap: 20px; }
  .names p { font-size: var(--s4); }
  .names .kind { break-before: auto; margin-top: 24px; }
  .close { min-height: 64svh; padding: 80px 20px 20px; }
  .base { flex-direction: column; align-items: stretch; }
  .fcols { grid-template-columns: 1fr 1fr; }
}
.how { margin: 4px 0 0; padding-left: 1.3em; font-size: var(--s3); line-height: 1.6; font-weight: 500; }