/* Homepage hero: drafting table (Oct 2026).
   One surface, three states: the grid lies on the ground and the button push-pulls up, the grid stands up into a plan,
   and it stays up as a drafting table while the project sheets are dealt onto it, joined by leader lines.
   Layout comes from hero.js, which sets one of three modes on .dt-hero: dt-desk (992px+), dt-tab (768-991px),
   dt-phone (767px and below). Desktop and tablet draw on a fixed board (1440 / 820 wide in the artboards'
   own units) scaled to the viewport, so the composition holds at every width. Only transform and opacity animate. */

.dt-hero { position: relative; overflow: hidden; background: #fff; font-family: Satoshi, sans-serif; font-weight: 500; color: #5a5c72; }
.dt-board { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.dt-hero.dt-phone .dt-board { position: relative; width: 100%; transform: none; }

/* Grid: built by the push-pull script inside .px-stage. Two line layers: one faded toward the horizon for the
   ground view, one plain for the drafting table; they cross-fade as the grid stands up. */
.dt-hero .px-stage { position: absolute; left: 0; top: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.dt-hero .px-floor { position: absolute; transform-style: preserve-3d; }
.dt-hero .px-lines, .dt-hero .px-lines2 { position: absolute; inset: 0; }
.dt-hero .px-lines { -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 8%, rgba(0,0,0,.6) 34%, transparent 64%); mask-image: linear-gradient(to top, transparent 0%, #000 8%, rgba(0,0,0,.6) 34%, transparent 64%); }

.dt-halo { position: absolute; pointer-events: none; z-index: 1; background: radial-gradient(closest-side, #fff 62%, rgba(255,255,255,.85) 78%, rgba(255,255,255,0) 100%); }

/* Headline, byline, button */
.dt-hub { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.dt-hub h1 { margin: 0; font-family: Satoshi, sans-serif; font-weight: 700; color: #14142b; }
.dt-hub h1 .px-grad { color: #454aa0; white-space: nowrap; }
.dt-hub p { margin: 0; color: #5a5c72; }
.dt-hero.dt-desk .dt-hub { gap: 24px; }
.dt-hero.dt-desk .dt-hub h1 { font-size: 72px; line-height: 1.04; letter-spacing: -1.9px; }
.dt-hero.dt-desk .dt-hub p { font-size: 16px; line-height: 1.55; }
.dt-hero.dt-tab .dt-hub { gap: 20px; }
.dt-hero.dt-tab .dt-hub h1 { font-size: 48px; line-height: 1.05; letter-spacing: -1.2px; }
.dt-hero.dt-tab .dt-hub p { font-size: 15px; line-height: 1.5; }
.dt-hero.dt-phone .dt-hub { position: relative; gap: 16px; padding: 40px 20px 0; }
.dt-hero.dt-phone .dt-hub h1 { font-size: 38px; line-height: 1.08; letter-spacing: -1px; }
.dt-hero.dt-phone .dt-hub h1 .px-grad { white-space: normal; }
.dt-hero.dt-phone .dt-hub h1 br { display: none; }
.dt-hero.dt-phone .dt-hub p { font-size: 14px; line-height: 1.5; }

.dt-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 48px; padding: 0 26px; margin-top: 4px; border-radius: 80px; background-color: #14142b; color: #fff; font-family: Satoshi, sans-serif; font-weight: 600; font-size: 17px; line-height: 1; text-decoration: none; white-space: nowrap; }
.dt-cta:hover, .dt-cta:focus-visible { color: #fff; background-image: linear-gradient(90deg, #14142b 0%, #2b2e6b 35%, #454aa0 70%, #5c62c4 100%); }
.dt-cta:focus-visible { outline: 2px solid #454aa0; outline-offset: 3px; }
.dt-hero.dt-phone .dt-cta { height: 48px; font-size: 15px; padding: 0 22px; }
.px-pending .dt-hero .dt-cta { opacity: 0 !important; }
/* Tidy up: set like the leader labels (small caps on a white tag), only shown once a sheet has been moved */
.dt-tidy { position: absolute; left: 50%; top: 100%; z-index: 1; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 8px; border: 0; border-radius: 3px; background: #fff; color: #14142b; font-family: Satoshi, sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: 1.6px; line-height: 1; text-transform: uppercase; cursor: pointer; white-space: nowrap; -webkit-appearance: none; appearance: none;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -4px); transition: opacity .2s ease, transform .25s ease, visibility 0s linear .25s, color .15s ease; }
.dt-tidy.dt-tidy-on { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity .25s ease, transform .3s ease, visibility 0s, color .15s ease; }
.dt-tidy svg { flex: none; transition: transform .35s ease; }
@media (hover: hover) { .dt-tidy:hover { color: #454aa0; } .dt-tidy:hover svg { transform: rotate(-120deg); } }
.dt-tidy:focus-visible { outline: 2px solid #454aa0; outline-offset: 2px; }
.dt-hero.dt-phone .dt-tidy { display: none; }
@media (prefers-reduced-motion: reduce) { .dt-tidy, .dt-tidy.dt-tidy-on, .dt-tidy svg { transition: none; } }
.px-pending .dt-hero .dt-sheet, .px-pending .dt-hero .dt-leaders { opacity: 0; }

/* Leader lines */
.dt-leaders { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 3; }
.dt-leaders .dt-line { fill: none; stroke: #14142b; stroke-width: 1.1; stroke-linecap: round; }
.dt-leaders .dt-label { font-family: Satoshi, sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: 1.6px; fill: #14142b; stroke: #fff; stroke-width: 5px; paint-order: stroke; stroke-linejoin: round; text-anchor: middle; }
.dt-hero.dt-tab .dt-leaders .dt-label { font-size: 10px; letter-spacing: 1.5px; }
.dt-leaders .dt-pluck { pointer-events: all; touch-action: none; cursor: grab; fill: rgba(69,74,160,0); stroke: none; transition: fill .15s; }
.dt-leaders .dt-pluck:hover { fill: rgba(69,74,160,.14); }
.dt-leaders .dt-pluck.dt-held { cursor: grabbing; }
.dt-hero.dt-phone .dt-leaders { display: none; }

/* Sheets */
.dt-sheets { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.dt-sheet { position: absolute; left: 0; top: 0; width: 200px; height: 200px; display: block; text-decoration: none; color: #14142b; pointer-events: auto; -webkit-tap-highlight-color: transparent; -webkit-user-drag: none; user-select: none; touch-action: none; cursor: grab; }
.dt-sheet.dt-lifted { cursor: grabbing; z-index: 2; }
.dt-sheet:focus { outline: none; }
.dt-sheet:focus-visible .dt-paper { outline: 2px solid #454aa0; outline-offset: 4px; }
.dt-paper { position: absolute; left: 0; top: 0; width: 200px; height: 200px; box-sizing: border-box; padding: 14px 14px 12px; display: flex; flex-direction: column; justify-content: space-between; transform-origin: 50% 50%; transform: rotate(var(--r, 0deg)) scale(var(--s, .84)); filter: drop-shadow(0 1px 1px rgba(20,20,43,.08)) drop-shadow(0 5px 9px rgba(20,20,43,.07)); transition: translate .2s ease, scale .2s ease; }
.dt-sheet.dt-lifted .dt-paper { transform: rotate(0deg) scale(calc(var(--s, .84) * 1.048)); filter: drop-shadow(0 16px 18px rgba(20,20,43,.16)); transition: none; }
.dt-paper::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(252,251,246,.86); box-shadow: inset 0 0 0 1px rgba(20,20,43,.10); clip-path: polygon(0 0,100% 0,100% calc(100% - var(--cut,0px)),calc(100% - var(--cut,0px)) 100%,0 100%); transition: clip-path .25s cubic-bezier(.3,1.4,.5,1); }
.dt-paper::after { content: ""; position: absolute; right: 0; bottom: 0; width: 38px; height: 38px; pointer-events: none; background-image: linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.15) 30%,rgba(20,20,43,.14) 50%,transparent 50%), linear-gradient(135deg,rgba(252,251,246,.86) 50%,transparent 50%); filter: drop-shadow(-1px -1px 2px rgba(20,20,43,.18)); transform-origin: 100% 100%; transform: scale(var(--curl, 0)); transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
.dt-tape { position: absolute; left: 50%; top: -9px; width: 66px; height: 20px; opacity: .82; pointer-events: none; transform: translateX(-50%) rotate(var(--tr, 0deg)); clip-path: polygon(0 8%,4% 0,8% 10%,12% 0,88% 0,92% 10%,96% 0,100% 8%,100% 92%,96% 100%,92% 90%,88% 100%,12% 100%,8% 90%,4% 100%,0 92%); box-shadow: 0 1px 1px rgba(20,20,43,.08); }
.dt-tape.dt-beige { background: #E9DFC6; }
.dt-tape.dt-indigo { background: #C9CCF0; }
.dt-ink { display: block; flex: none; }
.dt-paper > div:last-child { position: relative; z-index: 1; } /* text stays above the corner curl */
.dt-title { font-family: Satoshi, sans-serif; font-weight: 700; font-size: 12.5px; line-height: 1.25; letter-spacing: .14em; text-transform: uppercase; color: #14142b; }
.dt-subs { position: relative; height: 16px; margin-top: 4px; font-size: 12px; color: #14142b; }
.dt-sub, .dt-read { position: absolute; left: 0; top: 0; white-space: nowrap; transition: opacity .2s ease, transform .2s ease; }
.dt-sub { opacity: .72; }
.dt-read { font-weight: 700; opacity: 0; transform: translateY(5px); }

/* Desktop hover (mouse only): lift, curl the corner, swap the sub-line. */
@media (hover: hover) and (pointer: fine) {
  .dt-hero.dt-desk .dt-sheet:hover .dt-paper, .dt-hero.dt-desk .dt-sheet:focus-visible .dt-paper { translate: 0 -3px; --cut: 38px; --curl: 1; }
  .dt-hero.dt-desk .dt-sheet:hover .dt-sub, .dt-hero.dt-desk .dt-sheet:focus-visible .dt-sub { opacity: 0; transform: translateY(-5px); }
  .dt-hero.dt-desk .dt-sheet:hover .dt-read, .dt-hero.dt-desk .dt-sheet:focus-visible .dt-read { opacity: 1; transform: none; }
}
.dt-hero.dt-desk .dt-sheet.dt-lifted .dt-paper { translate: 0 0; --cut: 0px; --curl: 0; }
/* No hover on tablet and phone: corners keep a small permanent curl. */
.dt-hero.dt-tab .dt-paper, .dt-hero.dt-phone .dt-paper { --cut: 26px; --curl: .684; }

/* Phone: one swipeable row, next sheet peeking, page dots under it. No drag. */
.dt-hero.dt-phone .dt-sheets { position: relative; inset: auto; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 24px; padding: 30px 24px 26px; scrollbar-width: none; pointer-events: auto; }
.dt-hero.dt-phone .dt-sheets::-webkit-scrollbar { display: none; }
.dt-hero.dt-phone .dt-sheets::after { content: ""; flex: none; width: 6px; }
.dt-hero.dt-phone .dt-sheet { position: relative; left: auto !important; top: auto !important; flex: none; width: 240px; height: 240px; scroll-snap-align: start; touch-action: pan-x pan-y; cursor: pointer; }
.dt-hero.dt-phone .dt-paper { transform-origin: 0 0; transform: rotate(var(--r, 0deg)) scale(1.2); }
.dt-hero.dt-phone .dt-sheet[data-id="sb"] { order: 1; }
.dt-hero.dt-phone .dt-sheet[data-id="mix"] { order: 2; }
.dt-hero.dt-phone .dt-sheet[data-id="rx"] { order: 3; }
.dt-hero.dt-phone .dt-sheet[data-id="cap"] { order: 4; }
.dt-hero.dt-phone .dt-sheet[data-id="cgm"] { order: 5; }
.dt-hero.dt-phone .dt-sheet[data-id="arch"] { order: 6; }
.dt-dots { display: none; }
.dt-hero.dt-phone .dt-dots { position: relative; z-index: 4; display: flex; justify-content: center; align-items: center; gap: 7px; padding-bottom: 36px; }
.dt-dots span { width: 6px; height: 6px; border-radius: 3px; background: #c3c5d6; transition: background-color .2s ease, transform .2s ease; }
.dt-dots span.dt-on { background: #14142b; transform: scaleX(3); margin: 0 6px; }

/* Intro: the pile appears below the button, then the sheets are dealt out (transform and opacity only). */
.dt-hero.dt-dealing .dt-paper { animation: dtPile .3s ease backwards, dtDeal .75s cubic-bezier(.2,.75,.25,1) var(--d, 0s) backwards; }
@keyframes dtPile { from { opacity: 0; } to { opacity: 1; } }
@keyframes dtDeal {
  0% { translate: var(--sx, 0px) var(--sy, 0px); rotate: var(--sr, 0deg); scale: .9; }
  45% { scale: 1.03; }
  100% { translate: 0 0; rotate: 0deg; scale: 1; }
}
.dt-hero.dt-dealing .dt-sheet.dt-flick .dt-paper { --cut: 0px; --curl: 0; }
.dt-hero.dt-dealing .dt-sheet.dt-flick .dt-paper::after { animation: dtCurl .7s cubic-bezier(.3,1.3,.5,1) calc(var(--d, 0s) + .7s) backwards; }
@keyframes dtCurl { 0% { transform: scale(0); } 40% { transform: scale(.79); } 100% { transform: scale(0); } }
.dt-hero.dt-dealing.dt-phone .dt-paper, .dt-hero.dt-dealing.dt-tab .dt-paper { animation: dtPile .3s ease backwards, dtSpawn .72s cubic-bezier(.2,.8,.2,1) var(--d, 0s) backwards; }
@keyframes dtSpawn { 0% { opacity: 0; scale: .82; translate: 0 12px; } 55% { opacity: 1; scale: 1.025; translate: 0 -2px; } 100% { opacity: 1; scale: 1; translate: 0 0; } }
.dt-hero.dt-drawing .dt-line.dt-solid { stroke-dasharray: 1 1; animation: dtDraw .5s cubic-bezier(.5,0,.3,1) var(--d, 0s) backwards; }
.dt-hero.dt-drawing .dt-line.dt-dashed, .dt-hero.dt-drawing .dt-dot, .dt-hero.dt-drawing .dt-label { animation: dtFade .4s ease var(--d, 0s) backwards; }
.dt-hero.dt-hidden-leaders .dt-leaders { opacity: 0; }
.dt-hero.dt-hidden-sheets .dt-sheet { opacity: 0; }
@keyframes dtDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes dtFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dt-hero *, .dt-hero *::before, .dt-hero *::after { animation: none !important; transition: none !important; }
}