/* Shared page styles on top of ds.css (the design-system tokens and components). */
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
a{color:var(--color-accent-700)}
a:hover{color:var(--color-accent-800)}
[hidden]{display:none!important}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--color-text);color:var(--color-bg);font-weight:700;text-decoration:none}
.skip:focus{top:12px;color:var(--color-bg)}

/* little green "online" dot on the availability tag */
.live-dot{width:8px;height:8px;border-radius:999px;background:var(--color-accent-2-600);margin-right:7px;box-shadow:0 0 0 0 var(--color-accent-2-400);animation:live 2.4s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--color-accent-2-500) 70%,transparent)}70%,100%{box-shadow:0 0 0 9px transparent}}

/* gentle float for badges and stickers */
.bob{animation:bob 5s ease-in-out infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* arrows that nudge forward on hover */
.nudge svg{transition:transform .3s cubic-bezier(.2,.9,.3,1.4)}
.nudge:hover svg,.nudge:focus-visible svg{transform:translateX(4px)}

/* contact form */
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field>label{font-size:14px;font-weight:600;color:var(--color-text);margin:0}
.field .opt{font-weight:400;color:var(--color-neutral-700)}
.input-lg{min-height:52px;padding:13px 16px;font-size:16px;background:var(--color-bg);border:1.5px solid var(--color-divider);border-radius:var(--radius-md);transition:border-color .2s,box-shadow .25s,transform .25s cubic-bezier(.2,.9,.3,1.3)}
.input-lg:focus-visible{border-color:var(--color-accent);outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--color-accent) 22%,transparent);transform:translateY(-2px)}
.input-lg::placeholder{color:var(--color-neutral-600)}
textarea.input-lg{min-height:132px;border-radius:20px;resize:vertical}
select.input-lg{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23201e1d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
select.input-lg:invalid{color:var(--color-neutral-600)}
.confetti{position:absolute;width:10px;height:14px;border-radius:3px;pointer-events:none;z-index:6}

/* work filters */
.chip{font:inherit;font-size:15px;font-weight:600;min-height:44px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--color-divider);background:var(--color-neutral-100);color:var(--color-text);cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .3s cubic-bezier(.2,.9,.3,1.4)}
.chip:hover{border-color:var(--color-accent);transform:translateY(-2px)}
.chip:active{transform:scale(.95)}
.chip[aria-pressed="true"]{background:var(--color-text);border-color:var(--color-text);color:var(--color-bg)}

/* case images sit slightly tilted, then straighten up on hover */
.tilt{transition:transform .5s cubic-bezier(.2,.9,.3,1.3),box-shadow .3s}
.tilt:hover{transform:rotate(0) scale(1.03)!important;box-shadow:var(--shadow-lg)}

@media (prefers-reduced-motion: reduce){
  .bob,.live-dot{animation:none}
  *{scroll-behavior:auto!important}
}

/* hero tags sit inside the H1 (for search); keep them in body type, as before */
h1 .tag{font-family:var(--font-body);line-height:1.55;letter-spacing:.02em}
/* second and third rotating headline words come from data-text, so the H1 reads as one sentence */
[data-rot][data-text]::after{content:attr(data-text)}