/* ============================================================
   EaseHaven — Component styles (pages)
   ============================================================ */

/* ---- Hero -------------------------------------------------- */
.hero { position: relative; padding-top: calc(var(--nav-h) + clamp(24px, 5vw, 56px)); padding-bottom: clamp(40px, 7vw, 90px); }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.hero-media { position: relative; }
.hero-tag { display: flex; align-items: center; gap: 1rem; margin-top: 2.4rem; flex-wrap: wrap; }
.hero-stats { display: flex; gap: clamp(1.5rem, 4vw, 3.2rem); margin-top: 3rem; flex-wrap: wrap; }
.stat .num { font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--eh-navy); line-height: 1; font-weight: 500; }
.stat .num em { font-style: normal; color: var(--eh-orange); }
.stat .lbl { font-size: 0.82rem; color: var(--eh-muted); letter-spacing: 0.04em; margin-top: 0.4rem; max-width: 16ch; }
.bg-navy .stat .num { color: var(--eh-paper); }
.bg-navy .stat .lbl { color: rgba(251,248,243,0.6); }

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; align-items: start; }
}

/* ---- Page header (interior pages) -------------------------- */
.page-head { padding-top: calc(var(--nav-h) + clamp(40px, 7vw, 90px)); padding-bottom: clamp(36px, 5vw, 64px); }
.page-head .display { max-width: 18ch; }

/* ---- Section heading block --------------------------------- */
.sec-head { max-width: 60ch; }
.sec-head .h2 { margin-top: 0.8rem; }
.sec-head.is-centered { margin-inline: auto; text-align: center; }
.sec-head.is-centered .eyebrow { justify-content: center; }
.sec-flex { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }

/* ---- Service / value cards --------------------------------- */
.card {
  background: var(--eh-white);
  border: 1px solid var(--eh-sand);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -28px rgba(27,42,74,0.32); border-color: var(--eh-navy); }
.card .idx { font-family: var(--serif); font-size: 1.1rem; color: var(--eh-orange); }
.card .h3 { margin-block: 0.9rem 0.7rem; }
.card p { color: var(--eh-muted); font-size: 0.98rem; }
.card .tlink { margin-top: 1.3rem; }

.card-list { list-style: none; margin-top: 1.2rem; display: flex; flex-direction: column; gap: 0.55rem; }
.card-list li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.95rem; color: var(--eh-ink); }
.card-list li::before { content: ""; width: 7px; height: 7px; margin-top: 0.55em; border-radius: 50%; background: var(--eh-orange); flex: none; }

/* numbered feature card (navy) */
.fcard { border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-lg); padding: clamp(1.6rem,2.6vw,2.2rem); background: rgba(255,255,255,0.03); }
.fcard .h3 { color: var(--eh-paper); margin-block: 0.8rem 0.6rem; }
.fcard p { color: rgba(251,248,243,0.62); font-size: 0.96rem; }

/* ---- Project cards ----------------------------------------- */
.proj { display: block; }
.proj .frame { transition: transform .6s var(--ease); }
.proj-media { overflow: hidden; border-radius: var(--r-lg); }
.proj:hover .proj-media .ph { transform: scale(1.04); }
.proj-media .ph { transition: transform .9s var(--ease); }
.proj-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.1rem; }
.proj-meta .h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); transition: color .3s; }
.proj:hover .proj-meta .h3 { color: var(--eh-orange); }
.proj-meta .yr { font-size: 0.82rem; color: var(--eh-muted); letter-spacing: 0.08em; white-space: nowrap; }
.proj .tags { margin-top: 0.5rem; font-size: 0.82rem; color: var(--eh-muted); letter-spacing: 0.04em; }
.proj.is-hidden { display: none; }

/* ---- Filter bar -------------------------------------------- */
.filter-bar { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.filter-bar [data-filter] {
  font-family: var(--sans); font-weight: 500; font-size: 0.9rem;
  padding: 0.55em 1.1em; border-radius: 999px;
  border: 1px solid var(--eh-sand); color: var(--eh-navy);
  background: transparent; transition: all .3s var(--ease);
}
.filter-bar [data-filter]:hover { border-color: var(--eh-navy); }
.filter-bar [data-filter].is-active { background: var(--eh-navy); color: var(--eh-paper); border-color: var(--eh-navy); }

/* ---- Before / after slider --------------------------------- */
.ba { position: relative; overflow: hidden; border-radius: var(--r-lg); user-select: none; cursor: ew-resize; touch-action: pan-y; }
.ba .ba-before, .ba .ba-after { position: absolute; inset: 0; }
.ba .ba-after { clip-path: inset(0 50% 0 0); }
.ba .ba-after .ph, .ba .ba-before .ph { position: absolute; inset: 0; height: 100%; width: 100%; }
.ba-label { position: absolute; bottom: 16px; z-index: 4; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; background: rgba(17,26,46,0.78); color: #fff; padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(4px); }
.ba-label.is-before { left: 16px; }
.ba-label.is-after { right: 16px; }
.ba-handle { position: absolute; top: 0; left: 50%; height: 100%; width: 2px; background: var(--eh-paper); z-index: 5; transform: translateX(-1px); }
.ba-handle::after {
  content: "\2194"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 46px; height: 46px; border-radius: 50%; background: var(--eh-paper); color: var(--eh-navy);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.45);
}
.ba.is-dragging { cursor: ew-resize; }

/* ---- Process steps ----------------------------------------- */
.steps { counter-reset: step; }
.step { display: grid; grid-template-columns: minmax(0,0.4fr) minmax(0,1.1fr) minmax(0,1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; padding-block: clamp(2.4rem, 5vw, 4rem); border-top: 1px solid var(--eh-sand); }
.step:last-child { border-bottom: 1px solid var(--eh-sand); }
.step-num { font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 5rem); color: var(--eh-sand); line-height: 0.8; font-weight: 500; }
.step-num em { font-style: normal; color: var(--eh-orange); }
.step-body .h3 { margin-bottom: 0.7rem; }
.step-body p { color: var(--eh-muted); }
@media (max-width: 880px) { .step { grid-template-columns: 1fr; gap: 1rem; } }

/* ---- Testimonials ------------------------------------------ */
.quote { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 3.4vw, 2.8rem); line-height: 1.18; letter-spacing: -0.01em; color: var(--eh-navy); text-wrap: balance; }
.bg-navy .quote { color: var(--eh-paper); }
.quote .mk { color: var(--eh-orange); }
.quote-by { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.quote-by .ph { width: 54px; height: 54px; min-height: 0; border-radius: 50%; flex: none; }
.quote-by .nm { font-weight: 600; color: var(--eh-navy); }
.bg-navy .quote-by .nm { color: var(--eh-paper); }
.quote-by .rl { font-size: 0.86rem; color: var(--eh-muted); }

/* ---- Marquee logos / press --------------------------------- */
.marquee { overflow: hidden; }
.marquee-track { display: flex; gap: clamp(2.5rem,6vw,5rem); align-items: center; white-space: nowrap; animation: marquee 34s linear infinite; }
.marquee-track span { font-family: var(--serif); font-size: clamp(1.3rem,2.4vw,2rem); color: var(--eh-navy); opacity: 0.45; font-style: italic; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---- CTA band ---------------------------------------------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band .arch-bg { position: absolute; right: -4%; bottom: -30%; width: 42vw; max-width: 560px; opacity: 0.16; pointer-events: none; }
.cta-inner { position: relative; z-index: 2; }

/* ---- Form -------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.6rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field.col-2 { grid-column: 1 / -1; }
.field label { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: var(--eh-navy); }
.field label .req { color: var(--eh-orange); }
.field input, .field textarea, .field select {
  font-family: var(--sans); font-size: 1rem; color: var(--eh-ink);
  background: var(--eh-white); border: 1px solid var(--eh-sand); border-radius: var(--r-md);
  padding: 0.85em 1em; transition: border-color .25s, box-shadow .25s; width: 100%;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--eh-navy); box-shadow: 0 0 0 3px rgba(27,42,74,0.08); }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--eh-orange); box-shadow: 0 0 0 3px rgba(199,91,39,0.1); }
.field .hint { font-size: 0.78rem; color: var(--eh-muted); }
.field .err-msg { font-size: 0.78rem; color: var(--eh-orange-deep); display: none; }
.field.has-error .err-msg { display: block; }

.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip { font-size: 0.9rem; font-weight: 500; padding: 0.5em 1em; border-radius: 999px; border: 1px solid var(--eh-sand); color: var(--eh-navy); transition: all .25s var(--ease); }
.chip:hover { border-color: var(--eh-navy); }
.chip.is-selected { background: var(--eh-navy); color: var(--eh-paper); border-color: var(--eh-navy); }

.form-success { text-align: center; padding: clamp(2rem,5vw,4rem); border: 1px solid var(--eh-sand); border-radius: var(--r-lg); background: var(--eh-white); }
.form-success .mark { width: 64px; height: 64px; margin: 0 auto 1.4rem; }

/* upload dropzone */
.dropzone { position: relative; border: 1.5px dashed var(--eh-sand); border-radius: var(--r-md); background: var(--eh-white); padding: 1.4rem; transition: border-color .25s, background .25s; }
.dropzone:hover, .dropzone.is-drag { border-color: var(--eh-navy); background: var(--eh-paper); }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone .dz-prompt { text-align: center; color: var(--eh-muted); font-size: 0.95rem; pointer-events: none; }
.dropzone .dz-prompt strong { color: var(--eh-navy); font-weight: 600; }
.dz-list { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1rem; }
.dz-list li { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; font-size: 0.88rem; color: var(--eh-ink); padding: 0.5rem 0.7rem; background: var(--eh-paper); border-radius: var(--r-sm); border: 1px solid var(--eh-sand); }
.dz-list .dz-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dz-list .dz-size { color: var(--eh-muted); font-size: 0.78rem; white-space: nowrap; }
.dz-list .dz-rm { color: var(--eh-orange); font-weight: 600; cursor: pointer; position: relative; z-index: 1; padding: 0 0.4rem; }

/* submit-time form error */
.form-error { font-size: 0.86rem; color: var(--eh-orange-deep); margin-top: 0.6rem; display: block; }
.form.is-submitting button[type="submit"] { opacity: 0.6; pointer-events: none; }

@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }

/* ---- Inline arch decoration -------------------------------- */
.arch-deco { width: 100%; height: 100%; display: block; }

/* ---- Image-grid collage (about / home) --------------------- */
.collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: clamp(12px,2vw,20px); }
.collage > *:nth-child(1) { grid-row: span 2; }

/* ---- Feature list (split) ---------------------------------- */
.feat-list { list-style: none; display: flex; flex-direction: column; }
.feat-list li { display: flex; gap: 1.2rem; padding-block: 1.3rem; border-bottom: 1px solid var(--eh-sand); }
.feat-list li:last-child { border-bottom: none; }
.feat-list .fi-num { font-family: var(--serif); font-size: 1.2rem; color: var(--eh-orange); flex: none; width: 2ch; }
.feat-list .fi-t { font-weight: 600; color: var(--eh-navy); margin-bottom: 0.2rem; }
.feat-list .fi-d { font-size: 0.95rem; color: var(--eh-muted); }
.bg-navy .feat-list li { border-color: rgba(255,255,255,0.12); }
.bg-navy .feat-list .fi-t { color: var(--eh-paper); }
.bg-navy .feat-list .fi-d { color: rgba(251,248,243,0.6); }