/* Matter, gesture and a single thread: only Apronta's ten brand colours. */
html { scrollbar-color: var(--brick) var(--cream-2); }
html.lenis { scroll-behavior: auto; }
main { position: relative; isolation: isolate; }
.signature-thread { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: clip; }
.signature-thread path { stroke: var(--brick); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.signature-thread circle { fill: var(--brick); }
.hero { --light-x: 78%; --light-y: 32%; --glass-x: 50%; --glass-y: 50%; }
.hero__light { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at var(--light-x) var(--light-y), color-mix(in srgb, var(--cream) 9%, transparent), transparent 56%), linear-gradient(125deg, var(--blue), var(--blue-2)); }
.hero__light::after { content: ''; position: absolute; width: 44vw; height: 64%; top: 8%; right: -8%; background: radial-gradient(ellipse, color-mix(in srgb, var(--brick) 36%, transparent), transparent 65%); opacity: .8; }
.hero__grain { z-index: 1; inset: -24px; opacity: .16; }
.hero.is-in-view .hero__grain { animation: matter-grain 9s steps(8) infinite; }
.hero.is-in-view .hero__light::after { animation: matter-breathe 7s ease-in-out infinite alternate; }
@keyframes matter-grain { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-14px, 9px); } 66% { transform: translate(10px, -14px); } }
@keyframes matter-breathe { to { opacity: .35; transform: scale(.94); } }
.hero__symbol { z-index: 1; width: clamp(430px, 54vw, 870px); right: -8vw; top: 45%; }
.hero__symbol .sym-stem { filter: drop-shadow(12px 25px 20px color-mix(in srgb, var(--brick-2) 35%, transparent)); }
.hero__symbol .sym-leg { fill-opacity: 1; filter: drop-shadow(8px 18px 14px color-mix(in srgb, var(--blue-2) 50%, transparent)); }
.hero__symbol .material-edge { fill: none; stroke: var(--cream); stroke-opacity: .24; stroke-width: 1.5; }
.hero__stem-refraction, .hero__leg-refraction { opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.hero__stem-refraction { fill: none; stroke: var(--brick); stroke-width: 3; stroke-opacity: .6; mix-blend-mode: screen; }
.hero__leg-refraction { fill: none; stroke: var(--cream); stroke-width: 2; stroke-opacity: .48; mix-blend-mode: screen; }
.hero-glass { height: 100%; background-image: radial-gradient(ellipse at var(--glass-x) var(--glass-y), color-mix(in srgb, var(--cream) 52%, transparent), transparent 25%), linear-gradient(118deg, color-mix(in srgb, var(--cream) 14%, transparent), transparent 45%, color-mix(in srgb, var(--cream) 20%, transparent)); background-position: var(--glass-x) var(--glass-y), calc(100% - var(--glass-x)) calc(100% - var(--glass-y)); background-size: 170% 170%, 150% 150%; backdrop-filter: blur(14px); }
.hero__inner, .hero__foot { z-index: 2; }
.hero__title { font-size: clamp(46px, 8.4vw, 124px); line-height: .98; letter-spacing: -.04em; max-width: 12em; }
.hero__inner { padding-top: calc(var(--nav-h) + 12vh); padding-bottom: 7vh; }
.hero__row { max-width: 65%; }
.hero__kicker { margin-bottom: 32px; }
.ticker__track, .scrollcue i::after { animation-play-state: paused; }
.hero.is-in-view .ticker__track, .hero.is-in-view .scrollcue i::after { animation-play-state: running; }
.nav.is-light { background: var(--cream); backdrop-filter: none; }
.btn:disabled { opacity: .55; cursor: wait; }
.btn, .deck__btn, .svc__go { translate: var(--magnet-x, 0px) var(--magnet-y, 0px); transition: translate 240ms var(--ease-out), background 250ms, color 250ms; }
.hero .btn { translate: none; }
.btn[data-submit] { translate: none; transition: transform 220ms var(--ease-out), background 250ms, color 250ms; }
.btn[data-submit]:hover { transform: translateY(-2px); }
.signature-thread path { stroke-width: 1.5; }
.signature-thread circle { display: none; }
.thread-station { stroke: var(--brick); stroke-width: 2; stroke-linecap: round; }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .signature-thread.is-energized path { stroke-width: 2.25; }
  .signature-thread.is-energized circle { display: block; transform-box: fill-box; transform-origin: center; animation: thread-pulse 1400ms var(--ease-out) both; }
  .signature-thread.is-energized .thread-station { stroke-width: 3; }
}
@keyframes thread-pulse { 0% { opacity: 0; transform: scale(.25); } 14% { opacity: 1; transform: scale(1.6); } 72% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(1); } }
.stats-scene { padding: 0; }
.stats { margin: 0; padding: 28px 0 0; border-top: 1px solid var(--line); grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.stats .stat + .stat { border-left: 1px solid var(--line); padding-left: 24px; }
.stats .stat__n { color: var(--blue); font-size: clamp(38px, 5vw, 70px); }
.stats .stat__l { color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.svc-preview { display: block; width: 210px; color: var(--cream); background: color-mix(in srgb, var(--blue) 78%, transparent); backdrop-filter: blur(14px); border: 1px solid color-mix(in srgb, var(--cream) 32%, transparent); border-radius: 10px; box-shadow: 8px 20px 30px -16px var(--blue-2); pointer-events: none; opacity: 0; transform: translateY(14px) rotate(-2deg); transition: opacity 250ms, transform 450ms var(--ease-out); }
.svc-preview .preview-fill { fill: var(--brick); stroke: var(--brick); }
.shop-tile { fill: var(--cream); fill-opacity: .045; stroke-opacity: .18; }
.shop-product { fill: var(--cream); fill-opacity: .08; stroke-width: 1.35; }
.shop-accent { fill: var(--brick); fill-opacity: 1; stroke: var(--brick); stroke-width: 1; }
.svc:hover .svc-preview, .svc:focus-within .svc-preview { opacity: 1; transform: translateY(0) rotate(2deg); }
.svc:hover, .svc:focus-within { z-index: 4; }
@media (min-width: 1100px) {
  .svc { grid-template-columns: 36px minmax(0, .9fr) 170px minmax(0, 1fr) auto; column-gap: 24px; align-items: center; }
  .svc__n, .svc__title, .svc__body, .svc__go, .svc-preview { grid-row: 1; }
  .svc__body { grid-column: 4; }
  .svc__go { grid-column: 5; }
  .svc-preview { grid-column: 3; position: relative; width: 100%; }
}
@media (max-width: 1099px) {
  .svc { padding-right: 0; }
  .svc-preview { position: absolute; right: 0; bottom: 20px; width: 135px; }
  .svc__body { padding-right: 152px; }
}
.work { --work-tone: var(--blue-2); position: relative; background: var(--work-tone); transition: background 900ms var(--ease-out); }
.work[data-tone="brick"] { --work-tone: color-mix(in srgb, var(--brick-2) 58%, var(--ink)); }
.work[data-tone="cream"] { --work-tone: color-mix(in srgb, var(--blue) 60%, var(--ink)); }
.work[data-tone="blue"] { --work-tone: var(--blue-2); }
.work[data-tone="ink"] { --work-tone: color-mix(in srgb, var(--blue-2) 65%, var(--ink)); }
.dcard { box-shadow: 0 14px 22px -18px color-mix(in srgb, var(--ink) 55%, transparent); }
.dcard--ink, .mcard--ink { background: var(--ink); }
.dcard__cover, .mcard__cover { background: var(--ink); }
.frame__bar { background: var(--blue-2); }
.frame__viewport { display: block; overflow: clip; }
.dcard__cover .frame__viewport { position: relative; aspect-ratio: 16 / 9; }
.dcard__cover--img .frame__viewport img { position: absolute; inset: 0 auto auto 0; aspect-ratio: auto; height: auto; min-height: 100%; transition: transform 4500ms cubic-bezier(.2,.4,.2,1); }
.dcard[data-index="0"]:hover .frame__viewport img, .dcard[data-index="0"]:focus-within .frame__viewport img { transform: translateY(var(--shot-shift, 0px)); }
.dcard__cover::after { content: ''; position: absolute; inset: 26px 0 0; pointer-events: none; background: linear-gradient(115deg, transparent 22%, color-mix(in srgb, var(--cream) 13%, transparent) 44%, transparent 62%); transform: translateX(var(--reflection-x, -60%)); transition: transform 650ms var(--ease-out); }
.deck { touch-action: pan-y; user-select: none; cursor: grab; }
.deck:active { cursor: grabbing; }
.deck img { -webkit-user-drag: none; }
.section-seam { display: block; position: absolute; top: -1px; left: 0; width: 100%; height: 72px; pointer-events: none; background: var(--cream); clip-path: ellipse(65% var(--seam-depth, 86%) at 50% 0%); }
.process { position: relative; }
.process .section-seam { background: var(--seam-color, var(--blue-2)); }
.contact .section-seam { background: var(--cream); }
.steps { position: relative; }
.process-route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.process-route path { fill: none; stroke: var(--brick); stroke-width: 1; }
.process-route circle { fill: var(--brick); }
.process-route .process-node { fill: var(--cream); stroke: var(--brick); stroke-width: 1.5; }
.step { padding-top: 44px; }
.step::before { display: none; }
.step__num { font-size: 24px; letter-spacing: -.02em; }
.step__title { font-size: clamp(26px, 2.5vw, 38px); margin-top: 24px; margin-bottom: 16px; }
.step__desc { max-width: 35em; line-height: 1.6; }
.step-icon { width: 28px; height: 28px; position: absolute; top: 42px; left: 48px; color: var(--blue); }
.step-icon path { stroke-dasharray: 180; stroke-dashoffset: 180; transition: stroke-dashoffset 700ms var(--ease-out); }
.step.is-in .step-icon path, html.reduced .step-icon path { stroke-dashoffset: 0; }
@media (max-width: 759px) {
  .step { padding: 0 0 16px 34px; }
  .step-icon { top: -2px; left: 80px; }
  .step__title { margin-top: 16px; }
}
.direct a::after { background: var(--cream); height: 2px; transform-origin: var(--underline-origin, 50%) center; }
.direct a:focus-visible::after { transform: scaleX(1); }
.field { position: relative; --underline-origin: 50%; }
.field::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--cream); transform: scaleX(0); transform-origin: var(--underline-origin) center; transition: transform 350ms var(--ease-out); pointer-events: none; }
.field.is-preselected::before { content: attr(data-selected-service); position: absolute; top: 0; right: 0; max-width: 58%; overflow: hidden; color: var(--brick); font-family: var(--font-display); font-size: clamp(11px, 1vw, 14px); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; text-align: right; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; pointer-events: none; animation: selection-note 420ms var(--ease-out) both; }
.field.is-preselected::after { height: 3px; background: var(--brick); transform-origin: left center; animation: service-selection 620ms var(--ease-out) both; }
@keyframes service-selection { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes selection-note { from { clip-path: inset(0 0 0 100%); opacity: 0; } to { clip-path: inset(0); opacity: 1; } }
.field:focus-within::after { transform: scaleX(1); }
.field.is-invalid::after { display: none; }
.field input, .field textarea { caret-color: var(--cream); }
.field ::placeholder { color: var(--muted-dark); }
.field__error, .form__status.is-error { color: var(--cream); }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-bottom-color: var(--cream); border-bottom-style: dashed; }
.received-mark { width: 76px; overflow: visible; }
.received-mark[hidden] { display: none; }
.received-mark .sym-stem { fill: var(--brick); }
.received-mark .sym-leg { fill: var(--cream); }
.contact { padding-bottom: clamp(40px, 5vw, 72px); }
.footer { padding: 40px 0 36px; overflow: clip; }
.footer__grid { align-items: start; }
.footer__tagline { font-size: clamp(22px, 2.8vw, 40px); line-height: 1.12; max-width: 14em; letter-spacing: -.025em; color: var(--cream); }
.footer__closing { margin-top: clamp(36px, 5vw, 72px); }
.footer__rule { display: block; height: 1px; background: var(--line-dark); transform-origin: left; margin-bottom: clamp(32px, 5vw, 64px); }
.footer__brand { display: block; }
.footer__signature { width: 100%; overflow: visible; }
.footer__signature .word, .footer__signature .sym-leg { fill: var(--cream); }
.footer__signature .sym-stem { fill: var(--brick); }
.footer__links a { text-underline-offset: 5px; }
@media (max-width: 759px) {
  .footer__grid { gap: 28px; }
  .footer__meta { gap: 12px; }
  .footer__closing { margin-top: 32px; }
}
html.js:not(.reduced) [data-reveal] { opacity: 1; transform: none; }
html.js:not(.reduced) .stat__n { opacity: 1; }
@media (min-width: 900px) {
  .hero__row { grid-template-columns: 1fr; }
  .hero__lead { max-width: 31em; }
  .hero__actions { margin-top: 4px; }
}
@media (max-width: 899px) {
  .hero__title { font-size: clamp(58px, 12vw, 106px); max-width: 100%; }
  .hero__symbol { top: 38%; right: -40%; width: 108vw; opacity: .65; }
  .hero__inner { padding-top: 170px; padding-bottom: 34px; }
  .hero__row { max-width: 100%; }
  .hero__lead { max-width: 32em; }
  .hero__light::after { width: 80vw; }
  .hero__stem-refraction, .hero__leg-refraction { display: none; }
  .stats { padding: 24px 0 0; gap: 14px; }
  .stats .stat + .stat { padding-left: 14px; }
  .stats .stat__n { font-size: clamp(32px, 9vw, 58px); }
  .section-seam { height: 42px; }
}
@media (max-width: 599px) {
  .svc__body { padding-right: 0; }
  .svc-preview { position: relative; width: 145px; right: auto; bottom: auto; opacity: 1; transform: none; background: var(--blue); margin-top: 10px; }
  .svc__go { opacity: 1; transform: none; }
  .svc:hover .svc-preview, .svc:focus-within .svc-preview { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero__grain, .hero .hero__light::after, .hero .ticker__track, .hero .scrollcue i::after { animation: none; }
  .svc-preview, .dcard__cover--img .frame__viewport img, .dcard__cover::after, .work, .step-icon path { transition: none; }
  .field.is-preselected::after { animation: none; transform: scaleX(1); }
  .field.is-preselected::before { animation: none; clip-path: none; opacity: 1; }
  .dcard[data-index="0"]:hover .frame__viewport img, .dcard[data-index="0"]:focus-within .frame__viewport img { transform: none; }
  .svc:hover .svc-preview, .svc:focus-within .svc-preview { transform: none; }
  .signature-thread circle { display: none; }
  .signature-thread.is-energized circle { display: none; }
}