/* Hallmark · shape: agency one-pager (diagram hero, services, rules, audience, steps, a night photograph, booking) · genre: modern-minimal · theme: custom · job: book · idea: "the logo's corner brackets and nodes frame the work, the way ModusFrame frames a way of working" · vibe: "calm navy, lime signal, quiet motion"
 * paper: oklch(19.8% 0.034 265) · accent: oklch(92.8% 0.216 125) · display: Inter · body: Inter · hero: the tagline, lede and action on the left, an animated hub diagram in the logo's brackets on the right: work arrives, the mark handles it, the business tools update · nav: mark and wordmark with one quiet action · footer: one line, wordmark left and page links right · imagery: a hub diagram drawn with the logo's mark, three Unsplash photographs (free licence) of small business teams, one drawn approval list · signature: the work held in lime corner brackets
 * axes: dark/grotesk-heavy/chromatic-lime · posture: restrained on navy, light bands in mist · brand: ModusFrame (kit in brand/brand-kit, read from file) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, navy with one bright accent is a common look; kept because it is the owner's brand kit and tied it to her logo's brackets and her own screenshots */
/* font note: Inter stays as display and body because ModusFrame's brand kit (brand/brand-kit/brand-guidelines.html) sets it for every use; gate 1 is left open on the record */
@import url("./tokens.css");
@import url("./base.css");

body { font-weight: 400; }
section, header, footer { background: var(--color-paper); color: var(--color-ink); }
h1, h2, h3 { font-weight: 800; letter-spacing: var(--tracking-display); line-height: 1.04; }
h2 { font-size: var(--text-section); max-width: 22ch; }
h3 { font-size: var(--text-title); letter-spacing: -0.02em; line-height: 1.15; }
.lead { font-size: var(--text-lead); color: var(--color-ink-2); max-width: 46ch; }
.note { font-size: var(--text-sm); color: var(--color-muted); max-width: 60ch; }
.band { padding-block: var(--section-gap); }
.band--long { padding-block: var(--section-gap-l); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); }

/* skip link */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-4xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-accent); color: var(--color-accent-ink); }
.skip:focus-visible { top: var(--space-md); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent); border-radius: var(--radius-card); background: var(--color-accent); color: var(--color-accent-ink); font: 700 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--quiet { background: transparent; color: var(--color-ink); border-color: var(--color-muted); }
.btn--quiet:hover { background: var(--color-paper-2); border-color: var(--color-ink); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* nav */
.nav { padding-block: var(--space-md); }
.nav__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--text-xl); font-weight: 400; letter-spacing: -0.025em; line-height: 1; text-decoration: none; color: var(--color-ink); }
.wordmark b { font-weight: 700; }
.wordmark svg { width: 36px; height: 36px; flex-shrink: 0; }
.mark-frame { stroke: var(--color-ink); }
.mark-flow { stroke: var(--color-accent); }
.mark-node { fill: var(--color-accent); }
.mark-core { fill: var(--color-paper); }
.band-mist .mark-flow, .band-white .mark-flow { stroke: var(--color-ink); }
.band-mist .mark-node, .band-white .mark-node { fill: var(--color-ink); }

/* the frame: the logo's two corner brackets around a real screen */
.frame { position: relative; margin: 0 0 var(--space-xl); padding: var(--space-md); }
.frame::before, .frame::after { content: ""; position: absolute; width: var(--bracket-arm); height: var(--bracket-arm); border: var(--bracket) solid var(--color-accent); pointer-events: none; }
.frame::before { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: var(--space-sm); }
.frame::after { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: var(--space-sm); }
.band-mist .frame::before, .band-mist .frame::after, .band-white .frame::before, .band-white .frame::after { border-color: var(--color-ink); }
.frame__shot { overflow: hidden; border-radius: var(--radius-card); background: var(--white); }
.frame__shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.frame figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.frame figcaption { position: absolute; left: var(--space-md); right: var(--space-md); top: 100%; margin-top: var(--space-xs); }

/* hero */
.hero { padding-block: var(--space-xl) var(--space-2xl); }
.hero h1 { font-size: var(--text-display); line-height: 0.98; margin-bottom: var(--space-md); }
.hero__say { grid-column: 1 / span 7; align-self: center; display: grid; gap: var(--space-lg); justify-items: start; }
.hero__show { grid-column: 8 / -1; margin-bottom: 0; padding: var(--space-xl); }

/* the hub: work arrives at the top, the mark handles it, the tools below update */
.hero__acts { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hub { display: block; width: 100%; height: auto; overflow: visible; }
.hub__lines path { fill: none; stroke: var(--color-rule); stroke-width: 2; }
.hub__sigs path { fill: none; stroke: var(--color-accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 8 200; stroke-dashoffset: 12; }
.hub__chip rect { fill: var(--color-paper-2); stroke: var(--color-rule); stroke-width: 1.5; transition: stroke var(--dur-short) var(--ease-out); }
.hub__chip.is-on rect { stroke: var(--color-accent); }
.hub text { fill: var(--color-ink); font-family: var(--font-body); font-weight: 700; text-anchor: middle; }
.hub__ring { fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-dasharray: 3 9; transform-box: fill-box; transform-origin: center; }
.hub__core { fill: var(--color-paper-2); stroke: var(--color-rule); stroke-width: 1.5; transition: stroke var(--dur-short) var(--ease-out); }
.hub__core.is-on { stroke: var(--color-accent); }
.hub__pill { fill: var(--color-paper); stroke: var(--color-accent); stroke-width: 1.5; }
.hub__dot { fill: var(--color-accent); }
.hub__job { transition: opacity var(--dur-short) var(--ease-out); }
.hub__job.is-out { opacity: 0; }
.js .hub { animation: rise 0.7s var(--ease-out) both; }
.js .hub__ring { animation: hub-spin 40s linear infinite; }
.js .hub__dot { animation: hub-blink 1.6s var(--ease-in-out) infinite alternate; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hub-spin { to { transform: rotate(360deg); } }
@keyframes hub-blink { from { opacity: 0.35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js .hub, .js .hub__ring, .js .hub__dot { animation: none; } }

/* tools strip */
.strip { padding-block: var(--space-xl); }
.strip__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg) var(--space-2xl); }
.strip__say { font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.02em; max-width: none; }
.tools { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); margin: 0; padding: 0; list-style: none; }
.tools li { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-md); font-weight: 700; }
.tools img { width: 24px; height: 24px; flex-shrink: 0; }

.tools .tools__more { color: var(--color-muted); font-weight: 400; }
.quotes .fill { display: inline-block; margin-top: var(--space-2xs); font-size: var(--text-xs); }


/* work: pick a project on the left, see how it runs on the right */
.case__before { color: var(--color-muted); font-size: var(--text-lead); max-width: 44ch; }
.chain { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-md); margin: var(--space-sm) 0; padding: 0; list-style: none; }
.chain::before { content: ""; position: absolute; top: 6px; left: 7px; right: calc((100% - 4 * var(--space-md)) / 5 - 10px); height: 2px; background: var(--color-rule); }
.chain li { position: relative; padding-top: var(--space-xl); font-size: var(--text-sm); font-weight: 700; line-height: 1.3; }
.chain li::before { content: ""; position: absolute; top: 0; left: 0; width: 14px; height: 14px; border: 2px solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-paper); }
.chain li:nth-child(1) { --n: 0; } .chain li:nth-child(2) { --n: 1; } .chain li:nth-child(3) { --n: 2; } .chain li:nth-child(4) { --n: 3; } .chain li:nth-child(5) { --n: 4; }
@keyframes node-on { 0% { background: var(--color-paper); } 6%, 62% { background: var(--color-accent); } 72%, 100% { background: var(--color-paper); } }
.case__you { position: relative; padding: var(--space-md) 0 0 var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); }
.case__you::before { content: ""; position: absolute; left: 0; top: calc(var(--space-md) + 5px); width: 14px; height: 14px; border: 3px solid var(--color-accent); border-radius: var(--radius-pill); }
.case__tools { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.case__tools li { padding: var(--space-2xs) var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); font-size: var(--text-sm); color: var(--color-ink-2); }
.case__shot { margin: 0; display: grid; gap: var(--space-xs); }
.case__shot img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); background: var(--white); }
.case__shot figcaption { font-size: var(--text-sm); color: var(--color-muted); }
.case__result { color: var(--color-accent); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.quotes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--gap-columns); margin-top: var(--space-xl); }
.quotes figure { display: grid; gap: var(--space-md); align-content: start; margin: 0; padding-top: var(--space-lg); border-top: var(--bracket) solid var(--color-ink); }
.quotes blockquote { margin: 0; font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.quotes figcaption { color: var(--color-muted); font-size: var(--text-sm); }
@media (prefers-reduced-motion: reduce) { .js .case.is-active, .js .case.is-active .chain li::before { animation: none; } }

/* guardrails */
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--space-lg) var(--space-md) var(--space-lg) 0; text-align: left; vertical-align: top; border-bottom: var(--rule-hair) solid var(--color-rule); }
thead th { padding-top: 0; font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); }
tbody th { font-size: var(--text-title); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
tbody td { color: var(--color-ink-2); }


/* steps */
.steps__head { grid-column: 1 / -1; }
.steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-lg); border-top: var(--bracket) solid var(--color-ink); }
.steps li::before { content: counter(step); font: 800 var(--text-figure)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.steps h3 { font-size: var(--text-2xl); }
.steps p { color: var(--color-muted); font-size: var(--text-lead); }

/* after hours: one photograph, one statement */
.night { position: relative; display: grid; align-items: end; min-height: 40rem; padding-block: var(--space-3xl); background: var(--navy); color: var(--white); overflow: hidden; }
.night > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(1.7) saturate(1.1); }
.night::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--navy) 0%, color-mix(in oklab, var(--navy) 55%, transparent) 35%, transparent 75%); }
.night .container { position: relative; z-index: var(--z-base); display: grid; gap: var(--space-lg); justify-items: start; }
.night__say { max-width: 18ch; font-size: var(--text-section); font-weight: 800; letter-spacing: var(--tracking-display); line-height: 1.04; }

/* book */
.book__head { grid-column: 1 / span 5; display: grid; gap: var(--space-lg); align-content: start; justify-items: start; }
.book__cal { grid-column: 7 / -1; margin-bottom: 0; }
.book__cal .frame__shot { min-height: 420px; display: grid; place-items: center; padding: var(--space-xl); background: var(--color-paper-2); }
.book__cal iframe { width: 100%; height: 720px; border: 0; background: var(--white); }
.book__cal .frame__shot:has(iframe) { padding: 0; display: block; }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); }

/* plain text page (privacy) */
.prose { display: grid; gap: var(--space-md); max-width: 44rem; }
.prose h1 { font-size: var(--text-display-s); }
.prose h2 { margin-top: var(--space-lg); font-size: var(--text-xl); }
.prose a { color: var(--color-ink); }

/* footer */
.footer { padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.footer nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); font-size: var(--text-sm); }
.footer a:not(.wordmark) { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); text-decoration: none; white-space: nowrap; }
.footer a:not(.wordmark):hover { color: var(--color-accent); }
.footer small { font-size: var(--text-sm); color: var(--color-muted); }

/* reveals: content rises once, brackets draw in from their corners */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .frame[data-reveal]::before, .js .frame[data-reveal]::after { transform: scale(0); transition: transform 0.6s var(--ease-out) 0.25s; }
.js .frame[data-reveal]::before { transform-origin: top left; }
.js .frame[data-reveal]::after { transform-origin: bottom right; }
.js .frame[data-reveal].is-in::before, .js .frame[data-reveal].is-in::after { transform: none; }
.steps li { transition: border-color var(--dur-short) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .js [data-reveal], .js .frame[data-reveal]::before, .js .frame[data-reveal]::after { opacity: 1; transform: none; transition: none; } }

@media (max-width: 60rem) {
  .hero__say, .hero__show, .book__head, .book__cal { grid-column: 1 / -1; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .frame { margin-bottom: var(--space-2xl); }
}
@media (max-width: 40rem) {
  :root { --bracket-arm: 28px; }
  .frame { padding: var(--space-sm); }
  .hero__show { padding: var(--space-lg); }
  .hero__acts .btn { flex: 1 1 auto; }
  .chain { grid-template-columns: minmax(0, 1fr); }
  .chain::before { top: 10px; bottom: 10px; left: 6px; right: auto; width: 2px; height: auto; }
  .chain li { padding: 0 0 0 var(--space-xl); min-height: 20px; }
  .wordmark { font-size: var(--text-lg); }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  tbody tr { display: grid; padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  tbody th, tbody td { padding: var(--space-2xs) 0; border: 0; }
  .book__cal iframe { height: 640px; }
  .night { min-height: 26rem; }
}