html{scroll-behavior:smooth;caret-color:#48B2C8;scrollbar-color:#2A3442 #0B1017}
html,body{height:auto;min-height:100%}
body{margin:0;background:#0B1017;font-family:'Manrope',system-ui,sans-serif;color:#E6ECF1;font-kerning:normal;-webkit-font-smoothing:antialiased}
a{color:#7FCBDB;text-decoration:none}
a:hover{color:#F4F6F8}
::selection{background:rgba(72,178,200,0.38);color:#F4F6F8}
:focus-visible{outline:2px solid #48B2C8;outline-offset:3px;border-radius:2px}
summary::-webkit-details-marker{display:none}
@keyframes lm-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
[data-grain]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.38'/%3E%3C/svg%3E");background-blend-mode:overlay}
[data-ch]{transition:opacity 500ms}
@media (max-width:1000px){[data-nav-links]{display:none!important}[data-nav-menu]{display:block!important}}
@media (max-width:940px){
[data-hmask]{background:linear-gradient(180deg,rgba(11,16,23,0.1) 0%,rgba(11,16,23,0.55) 45%,rgba(11,16,23,0.85) 75%)!important}
[data-lead]{font-size:clamp(40px,10vw,54px)!important}
[data-readout]{grid-template-columns:1fr 1fr!important;gap:0 18px!important}[data-readout] > div{grid-column:auto!important}[data-readout] > div:last-child{text-align:left!important}[data-readout] [data-ch] > span + span{display:none}
[data-make-row]{grid-template-columns:1fr!important}[data-make-row] > *{grid-column:1!important}[data-make-row] lumen-figure{width:56px!important;height:56px!important;margin:0!important}
[data-work]{grid-template-columns:1fr 1fr!important}
[data-split],[data-two],[data-ledger]{grid-template-columns:1fr!important}
[data-tier]{grid-template-columns:1fr!important}
}
@media (max-width:560px){[data-work]{grid-template-columns:1fr!important}}
.lm-hover-1:hover { color:#F4F6F8 !important; }
.lm-hover-2:hover { background:#48B2C8 !important; color:#0B1017 !important; }
.lm-hover-3:hover { background:rgba(230,236,241,0.08) !important; }
.lm-hover-4:hover { background:#F4F6F8 !important; }
.lm-hover-5:hover { text-decoration-color:#48B2C8 !important; color:#F4F6F8 !important; }

/* Static-site additions. The canonical token file stays unchanged. */
section[id] { scroll-margin-top: 88px; }
main { display: block; }
lumen-hero, lumen-figure, lumen-leak { display: block; }
.work-frame { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0B1017; }
#studio lumen-figure[label] { width: 160px !important; }
#contact a[href^="mailto:"] { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  nav > div { gap: 12px !important; }
  nav > div > div:last-child { gap: 8px !important; }
  [data-tier] h3 { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [style*="animation:"] { animation: none !important; }
  [data-ch] { transition: none; }
}

/* ---------- v3 (run web-1008e) ---------- */
section[id], [id].lm-anchor { scroll-margin-top: 88px; }
.lm-wordmark { display: block; height: auto; }
.lm-display { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; letter-spacing: -0.02em; color: #F4F6F8; margin: 0; text-wrap: balance; }
.lm-body { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(230,236,241,0.78); text-wrap: pretty; }
.lm-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.lm-link { color: #F4F6F8; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(244,246,248,0.35); text-underline-offset: 6px; transition: text-decoration-color 200ms; }
.lm-link:hover { text-decoration-color: #48B2C8; }
.lm-btn { display: inline-flex; align-items: center; background: #48B2C8; color: #0B1017; padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 15.5px; transition: background 200ms; }
.lm-btn:hover { background: #F4F6F8; color: #0B1017; }
.lm-wrap { max-width: 1120px; margin: 0 auto; padding-left: clamp(20px,3vw,40px); padding-right: clamp(20px,3vw,40px); }

/* Promise ledger: each star sits on the first line of its heading, whatever
   the number of lines; the two columns share row heights and rules. */
.lm-ledger { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: clamp(32px,5vw,80px); }
.lm-ledger > div { display: grid; grid-template-columns: 26px minmax(0,1fr); grid-template-rows: auto 1fr; align-content: start; column-gap: 14px; padding: clamp(22px,2.6vw,30px) 0; border-top: 1px solid rgba(11,16,23,0.16); }
.lm-ledger > div:nth-last-child(-n+2) { border-bottom: 1px solid rgba(11,16,23,0.16); }
.lm-ledger .lm-bullet { grid-column: 1; grid-row: 1; display: flex; align-items: center; height: 1.12em; font-size: clamp(24px,2.5vw,32px); }
.lm-ledger .lm-bullet svg { width: 10px; height: 13px; fill: #1F6F80; }
.lm-ledger h3 { grid-column: 2; grid-row: 1; align-self: start; font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: clamp(24px,2.5vw,32px); line-height: 1.12; margin: 0; color: #0B1017; text-wrap: balance; }
.lm-ledger p { grid-column: 2; grid-row: 2; margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: #3D4852; max-width: 42ch; text-wrap: pretty; }

/* Steps: a horizontal timeline on wide screens, a vertical rail on narrow ones.
   Lit (cyan) rules and stars mark the client's own steps. */
.lm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0 clamp(16px,2.2vw,28px); counter-reset: none; }
.lm-steps li { position: relative; display: grid; gap: 8px; align-content: start; padding: 26px 0 0; border-top: 1px solid rgba(230,236,241,0.18); }
.lm-steps li.is-you { border-top-color: #48B2C8; }
.lm-steps .lm-node { position: absolute; top: -9px; left: 0; width: 12px; height: 16px; padding: 0 6px 0 0; background: #0B1017; }
.lm-steps .lm-node svg { display: block; width: 12px; height: 16px; fill: rgba(230,236,241,0.5); }
.lm-steps li.is-you .lm-node svg { fill: #48B2C8; }
.lm-steps .lm-meta { display: flex; align-items: baseline; gap: 10px; }
.lm-steps .lm-meta .lm-mono { color: rgba(230,236,241,0.62); }
.lm-steps .lm-who { font-size: 13px; font-weight: 600; color: rgba(230,236,241,0.68); }
.lm-steps li.is-you .lm-meta .lm-mono, .lm-steps li.is-you .lm-who { color: #7FCBDB; }
.lm-steps h3 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: clamp(22px,2vw,26px); line-height: 1.1; margin: 0; color: #F4F6F8; }
.lm-steps p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(230,236,241,0.76); text-wrap: pretty; max-width: 30ch; }

/* Engagements: the motion brand comes first, then three ways to work, as tabs. */
.lm-first { display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: 12px clamp(24px,4vw,56px); padding: clamp(22px,2.6vw,30px) 0; border-top: 1px solid rgba(230,236,241,0.14); border-bottom: 1px solid rgba(230,236,241,0.14); }
.lm-first h3, .lm-panel h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 26px; line-height: 1.1; margin: 0; color: #F4F6F8; }
.lm-tag { font-family: 'Manrope', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; color: #E88A4C; }
.lm-sendget { margin: 0; display: grid; gap: 10px; font-size: 14.5px; line-height: 1.5; align-content: start; }
.lm-sendget > div { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 12px; }
.lm-sendget dt { font-size: 13px; font-weight: 600; color: rgba(230,236,241,0.68); }
.lm-sendget dd { margin: 0; color: rgba(230,236,241,0.84); }
.lm-tablist { display: flex; gap: clamp(18px,4vw,48px); border-bottom: 1px solid rgba(230,236,241,0.14); }
.lm-tablist button { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 16px 4px 14px; font: 600 15px/1.2 'Manrope', system-ui, sans-serif; color: rgba(230,236,241,0.68); text-align: left; cursor: pointer; transition: color 200ms, border-color 200ms; }
.lm-tablist button:hover { color: #F4F6F8; }
.lm-tablist button[aria-selected="true"] { color: #F4F6F8; border-bottom-color: #48B2C8; }
.lm-panel { display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: 12px clamp(24px,4vw,56px); padding: clamp(22px,2.6vw,30px) 0; border-bottom: 1px solid rgba(230,236,241,0.14); }
.lm-panel[hidden] { display: none; }
.lm-tabs.is-ready .lm-panel h3 { display: none; }
.lm-panel > div { display: grid; gap: 8px; align-content: start; }
.lm-panel > div > p, .lm-first > div > p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(230,236,241,0.78); text-wrap: pretty; }
.lm-nojs-label { display: none; }
.lm-tabs:not(.is-ready) .lm-tablist { display: none; }
.lm-tabs:not(.is-ready) .lm-panel { border-top: 1px solid rgba(230,236,241,0.14); border-bottom: 0; }

/* Sub-pages */
.lm-pagehead { padding-top: clamp(128px,16vw,190px); padding-bottom: clamp(40px,5vw,64px); }
.lm-pagehead h1 { font-size: clamp(40px,5.6vw,76px); line-height: 0.98; letter-spacing: -0.028em; max-width: 16ch; }
.lm-pagehead p { margin: 22px 0 0; font-size: clamp(16px,1.3vw,19px); line-height: 1.55; color: rgba(230,236,241,0.82); max-width: 52ch; text-wrap: pretty; }
.lm-clips { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(32px,4vw,48px) clamp(18px,2vw,28px); }
.lm-clip { margin: 0; display: grid; gap: 12px; align-content: start; }
.lm-clip .lm-frame { position: relative; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; background-color: #101825; border: 1px solid rgba(230,236,241,0.1); }
.lm-clip h3 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 24px; line-height: 1.1; margin: 4px 0 0; color: #F4F6F8; }
.lm-clip p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(230,236,241,0.76); text-wrap: pretty; max-width: 52ch; }
.lm-clip .lm-cap { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: rgba(230,236,241,0.68); }
.lm-clip .lm-cap .lm-mono { font-size: 11px; color: rgba(230,236,241,0.62); white-space: nowrap; }
.lm-rows { display: grid; }
.lm-rows > div { display: grid; grid-template-columns: minmax(0,200px) minmax(0,1fr); gap: 10px clamp(20px,3vw,48px); padding: clamp(20px,2.4vw,28px) 0; border-top: 1px solid rgba(230,236,241,0.12); }
.lm-rows > div:last-child { border-bottom: 1px solid rgba(230,236,241,0.12); }
.lm-rows h3, .lm-rows .lm-rows-h { font-size: 13px; font-weight: 600; color: rgba(230,236,241,0.68); margin: 4px 0 0; font-family: 'Manrope', system-ui, sans-serif; }
.lm-rows p, .lm-rows li { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(230,236,241,0.82); text-wrap: pretty; max-width: 60ch; }
.lm-rows ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.lm-rows li { display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 12px; }
.lm-rows li svg { width: 9px; height: 12px; fill: #48B2C8; margin-top: 7px; }
.lm-rows > div > div { display: grid; gap: 12px; }
.lm-foot { position: relative; border-top: 1px solid rgba(230,236,241,0.12); }
.lm-foot > div { max-width: 1280px; margin: 0 auto; padding: 22px clamp(20px,3vw,40px); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-size: 13px; color: rgba(230,236,241,0.68); }
.lm-foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.lm-foot a { color: rgba(230,236,241,0.8); }
.lm-foot a:hover { color: #F4F6F8; }

@media (max-width: 940px) {
  .lm-ledger { grid-template-columns: 1fr; }
  .lm-ledger > div:nth-last-child(2) { border-bottom: 0; }
  .lm-steps { grid-template-columns: 1fr; gap: 0; }
  .lm-steps li { border-top: 0; border-left: 1px solid rgba(230,236,241,0.18); padding: 0 0 26px 26px; }
  .lm-steps li:last-child { padding-bottom: 0; border-left-color: transparent; }
  .lm-steps li.is-you { border-left-color: #48B2C8; }
  .lm-steps .lm-node { top: 0; left: -7px; padding: 0 0 6px; }
  .lm-steps p { max-width: 46ch; }
  .lm-first, .lm-panel { grid-template-columns: 1fr; }
  .lm-clips { grid-template-columns: 1fr; }
  .lm-rows > div { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lm-tablist button { font-size: 14px; padding: 14px 2px 12px; }
}

/* v3 review fixes */
.lm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lm-headband::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(rgba(11,16,23,0), #0B1017); pointer-events: none; }
.lm-headband > .lm-wrap { z-index: 1; }
.lm-link { display: inline-block; padding: 6px 0; }
.lm-foot a { display: inline-block; padding: 7px 0; }
.lm-steps .lm-meta .lm-mono, .lm-clip .lm-cap .lm-mono { color: rgba(230,236,241,0.68); }
nav a[aria-current="page"] { color: #F4F6F8 !important; }
@media (max-width: 940px) {
  [data-two] > p { justify-self: start !important; }
}
@media (max-width: 560px) {
  [data-fig-large] { max-width: 220px !important; justify-self: start !important; }
  #studio [data-split] > div:last-child > div { grid-template-columns: 1fr !important; gap: 4px !important; }
}