/* ============================================================
   HYPERWIND — Components
   ============================================================ */

/* ---- intro statement ---- */
.statement { font-size: clamp(28px, 5vw, 68px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.06; max-width: 20ch; text-wrap: balance; }
.statement .dim { color: var(--paper-mute); }
.statement .accent { color: var(--accent); }

/* ---- selected work ---- */
.work-list { display: flex; flex-direction: column; }
.work-row { display: grid; grid-template-columns: 64px 1.5fr 1fr auto; gap: 28px; align-items: center; padding: 30px 0; border-top: 1px solid var(--line-soft); position: relative; transition: padding .4s var(--ease-out); }
.work-row:last-child { border-bottom: 1px solid var(--line-soft); }
.work-row .idx { font-family: var(--mono); font-size: 12px; color: var(--paper-mute); }
.work-row .name { font-size: clamp(26px, 3.6vw, 54px); font-weight: 600; letter-spacing: -0.03em; transition: transform .4s var(--ease-out), color .3s; }
.work-row .disc { font-size: 14px; color: var(--paper-dim); display: flex; flex-wrap: wrap; gap: 8px; }
.work-row .disc span { padding: 4px 11px; border: 1px solid var(--line-soft); border-radius: 100px; }
.work-row .yr { font-family: var(--mono); font-size: 13px; color: var(--paper-mute); justify-self: end; }
.work-row:hover { padding-inline: 18px; }
.work-row:hover .name { color: var(--accent); transform: translateX(6px); }
/* floating preview that follows cursor */
.work-row .peek { position: fixed; width: 340px; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; pointer-events: none; opacity: 0; transform: translate(-50%,-50%) scale(0.85); transition: opacity .3s, transform .3s var(--ease-out); z-index: 60; border: 1px solid var(--line); }
.work-row:hover .peek { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* card grid (work page) */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 48px); }
.work-card { position: relative; display: flex; flex-direction: column; }
.work-card .thumb { display: block; position: relative; aspect-ratio: 16/11; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-soft); background: var(--panel); }

/* dark-theme legibility for user image drop zones (image-slot) */
image-slot::part(frame) { background: var(--panel); }
image-slot::part(empty) { color: var(--paper-mute); }
image-slot::part(ring) { border-color: var(--line); }
.work-card .thumb img, .work-card .thumb image-slot { width: 100%; height: 100%; object-fit: cover; }
.work-card .thumb .ov { position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(6,7,9,0.65)); opacity: 0; transition: opacity .4s; }
.work-card:hover .thumb .ov { opacity: 1; }
.work-card .meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 18px; }
.work-card .meta h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.02em; margin: 0; transition: color .3s; }
.work-card:hover .meta h3 { color: var(--accent); }
.work-card .meta .yr { font-family: var(--mono); font-size: 12px; color: var(--paper-mute); }
.work-card .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.work-card .tags span { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--paper-dim); }
.work-card.big { grid-column: 1 / -1; }
.work-card.big .thumb { aspect-ratio: 21/9; }

/* striped image placeholder */
.ph { width: 100%; height: 100%; position: relative; background:
  repeating-linear-gradient(135deg, color-mix(in oklab, var(--accent) 8%, var(--panel)) 0 2px, var(--panel) 2px 12px);
  display: grid; place-items: center; }
.ph::after { content: attr(data-ph); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-mute); background: var(--bg-deep); padding: 5px 10px; border-radius: 4px; border: 1px solid var(--line-soft); }

/* ---- services / capabilities index ---- */
.svc { display: grid; grid-template-columns: 40px 1fr auto; gap: 20px; align-items: start; padding: 26px 0; border-top: 1px solid var(--line-soft); transition: background .4s; }
.svc:last-child { border-bottom: 1px solid var(--line-soft); }
.svc .n { font-family: var(--mono); font-size: 13px; color: var(--accent); padding-top: 8px; }
.svc h3 { font-size: clamp(28px, 4vw, 52px); font-weight: 600; letter-spacing: -0.03em; margin: 0; }
.svc .tags { display: flex; flex-wrap: wrap; gap: 8px 8px; max-width: 460px; justify-content: flex-end; }
.svc .tags span { padding: 6px 13px; border: 1px solid var(--line-soft); border-radius: 100px; font-size: 13px; color: var(--paper-dim); transition: border-color .3s, color .3s; }
.svc:hover .tags span { border-color: var(--line); color: var(--paper); }

/* ---- stats ---- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; border-top: 1px solid var(--line-soft); }
.stat { padding-top: 26px; border-top: 1px solid transparent; }
.stat .num { font-size: clamp(48px, 7vw, 110px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.stat .num .u { color: var(--accent); }
.stat .lbl { font-size: 15px; color: var(--paper-dim); margin-top: 10px; max-width: 22ch; }

/* ---- process ---- */
.proc { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 4vw, 64px) clamp(40px, 7vw, 120px); }
.proc-step { border-top: 1px solid var(--line); padding-top: 24px; }
.proc-step .ph-num { font-family: var(--mono); font-size: 13px; color: var(--accent); margin-bottom: 18px; }
.proc-step h3 { font-size: clamp(26px, 3vw, 40px); font-weight: 600; letter-spacing: -0.03em; margin: 0 0 12px; }
.proc-step p { font-size: 17px; line-height: 1.55; color: var(--paper-dim); margin: 0; max-width: 36ch; }

/* ---- logos ---- */
.logos-row .it { padding: 0 clamp(28px, 5vw, 70px); font-size: clamp(22px, 3vw, 40px); font-weight: 600; letter-spacing: -0.03em; color: var(--paper-mute); transition: color .3s; }
.logos-row .it:hover { color: var(--paper); }

/* ---- testimonials ---- */
.quote { font-size: clamp(28px, 4.4vw, 62px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.12; text-wrap: balance; max-width: 22ch; }
.quote .accent { color: var(--accent); }
.quote-by { display: flex; align-items: center; gap: 16px; margin-top: 40px; }
.quote-by .av { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); flex: none; }
.quote-by .who { font-size: 16px; font-weight: 500; }
.quote-by .role { font-size: 14px; color: var(--paper-mute); }

/* ---- awards ---- */
.awards { display: flex; flex-direction: column; }
.award { display: grid; grid-template-columns: 1fr auto auto; gap: 24px; align-items: center; padding: 22px 0; border-top: 1px solid var(--line-soft); }
.award:last-child { border-bottom: 1px solid var(--line-soft); }
.award .org { font-size: clamp(20px, 2.6vw, 32px); font-weight: 600; letter-spacing: -0.02em; }
.award .for { font-size: 15px; color: var(--paper-dim); }
.award .yr { font-family: var(--mono); font-size: 13px; color: var(--accent); }

/* ---- team ---- */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 32px); align-items: start; }
.member .ph, .member .av { height: auto; aspect-ratio: 3/4; border-radius: 8px; overflow: hidden; }
.member h4 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin: 16px 0 4px; }
.member .role { font-size: 14px; color: var(--paper-mute); font-family: var(--mono); }

/* ---- contact / brief form ---- */
.brief { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px, 6vw, 90px); }
.brief-aside p { font-size: 18px; line-height: 1.55; color: var(--paper-dim); }
.brief-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 40px; }
.brief-steps .s { display: flex; gap: 14px; align-items: center; font-size: 15px; color: var(--paper-mute); transition: color .3s; }
.brief-steps .s .n { font-family: var(--mono); font-size: 12px; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line-soft); border-radius: 50%; transition: all .3s; }
.brief-steps .s.active { color: var(--paper); }
.brief-steps .s.active .n { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.brief-steps .s.done .n { border-color: var(--accent); color: var(--accent); }

.field-group { display: grid; gap: 14px; }
.q-label { font-size: clamp(22px, 2.6vw, 34px); font-weight: 500; letter-spacing: -0.02em; }
.q-hint { font-size: 14px; color: var(--paper-mute); font-family: var(--mono); }
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip { padding: 13px 20px; border: 1px solid var(--line); border-radius: 100px; font-size: 16px; color: var(--paper-dim); cursor: pointer; background: transparent; font-family: var(--display); transition: all .25s; }
.chip:hover { border-color: var(--paper); color: var(--paper); }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.txt, .area { width: 100%; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 10px; padding: 18px 20px; color: var(--paper); font-family: var(--display); font-size: 18px; transition: border-color .3s; }
.txt:focus, .area:focus { outline: none; border-color: var(--accent); }
.area { min-height: 140px; resize: vertical; line-height: 1.5; }
.txt::placeholder, .area::placeholder { color: var(--paper-mute); }
.brief-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 40px; gap: 16px; }
.budget-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.progress-bar { height: 2px; background: var(--line-soft); border-radius: 2px; overflow: hidden; margin-bottom: 50px; }
.progress-bar i { display: block; height: 100%; background: var(--accent); width: 20%; transition: width .5s var(--ease-out); }
.step { display: none; }
.step.active { display: block; animation: stepIn .55s var(--ease-out); }
@keyframes stepIn { from { transform: translateY(22px); } to { transform: none; } }
.success { text-align: center; padding: 40px 0; }
.success .big { font-size: clamp(40px, 7vw, 96px); font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; }

@media (max-width: 920px) {
  .work-grid, .proc, .stats, .team { grid-template-columns: repeat(2, 1fr); }
  .brief { grid-template-columns: 1fr; }
  .brief-aside { display: none; }
  .work-row { grid-template-columns: 40px 1fr auto; }
  .work-row .disc { display: none; }
  .svc { grid-template-columns: 30px 1fr; }
  .svc .tags { display: none; }
}
@media (max-width: 620px) {
  .work-grid, .stats, .team, .budget-grid { grid-template-columns: 1fr; }
  .work-row .yr { display: none; }
}