/* ==========================================================================
   Kaldrin Developments: work (portfolio)
   The /work page.
   Screenshots stay in full colour: they show the real design.
   ========================================================================== */

/* ---------- Browser frame around each screenshot ---------- */
.shot {
  display: block;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.shot__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line-2);
  background: var(--surface-3);
}
.shot__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-3); }
.shot__url {
  margin-left: 10px;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
a.shot:hover, a.shot:focus-visible { border-color: var(--line-3); }
@media (prefers-reduced-motion: no-preference) {
  a.shot:hover img { transform: scale(1.015); }
  .shot img { transition: transform var(--dur-slow) var(--ease-out); }
}

/* ---------- Tags ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.tags li {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 11px;
  border: 1px solid var(--line-2);
}
.tags li.tags__lead { color: var(--text-strong); border-color: var(--line-3); }

/* ---------- /work page ---------- */
.work-head {
  padding: calc(var(--header-h) + clamp(48px, 7vw, 104px)) var(--gutter) clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--line);
}
.work-head .display { margin-bottom: clamp(20px, 2.5vw, 32px); }
.work-head .lede { color: var(--text-muted); max-width: 40rem; }

.project {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
  padding: var(--section-y) var(--gutter);
  border-bottom: 1px solid var(--line);
}
.project--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.project--flip .project__media { order: 2; }
.project__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.6rem + 2.4vw, 4rem);
  font-weight: 300;
  line-height: 1;
  color: var(--text-faint);
  margin-bottom: clamp(14px, 1.6vw, 22px);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.project__body .display { margin-bottom: 18px; }
.project__body p { color: var(--text-muted); line-height: 1.75; margin-bottom: 24px; }
.project__body .tags { margin-bottom: 30px; }

@media (max-width: 899px) {
  .project, .project--flip { grid-template-columns: minmax(0, 1fr); }
  .project--flip .project__media { order: 0; }
}

.work-cta {
  padding: var(--section-y) var(--gutter);
  text-align: center;
}
.work-cta .label { margin-inline: auto; }
.work-cta .display { margin: 0 auto clamp(24px, 3vw, 36px); }
.work-cta .lede { margin: 0 auto 32px; color: var(--text-muted); }
.work-cta .btn-row { justify-content: center; }

/* ---------- Before & after (js/modules/compare.js): drag the divider ---------- */
.ba { padding: var(--section-y) var(--gutter) 0; }
.ba__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 64px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 52px); }
.ba__head .display { max-width: 16ch; margin: 0; }
.ba__lede { max-width: 44ch; margin: 0; color: var(--text-muted); }
.ba__frame { --x: 50%; position: relative; max-width: min(100%, 1180px, calc((100vh - var(--nav-h) - 40px) * 1.6)); margin-inline: auto; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line-2); background: var(--surface-2); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.ba__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 44px; margin-left: -22px; display: grid; place-items: center; cursor: ew-resize; outline: none; }
.ba__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--accent); }
.ba__knob { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--canvas); border: 1px solid var(--accent); transition: transform .3s var(--ease-out), background-color .3s var(--ease-out); }
.ba__knob svg { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ba__frame:hover .ba__knob, .ba__frame.is-dragging .ba__knob { transform: scale(1.08); }
.ba__handle:focus-visible .ba__knob { outline: 2px solid var(--text-strong); outline-offset: 3px; }
.ba__tag { position: absolute; top: 14px; padding: 7px 11px; background: rgba(15, 16, 17, .86); color: var(--text-strong); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; pointer-events: none; transition: opacity .3s var(--ease-out); }
.ba__tag--before { left: 14px; }
.ba__tag--after { right: 14px; color: var(--accent); }
.ba__frame[data-side="after"] .ba__tag--before, .ba__frame[data-side="before"] .ba__tag--after { opacity: 0; }
.ba__note { margin: 18px auto 0; font-size: 12.5px; color: var(--text-muted); max-width: 70ch; }
.ba__note a { color: var(--text-strong); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
@media (max-width: 640px) {
  .ba__frame { aspect-ratio: 4 / 3.4; }
  .ba__frame img { object-position: 8% 0; }
  .ba__tag { top: 10px; font-size: 9px; }
  .ba__tag--before { left: 10px; } .ba__tag--after { right: 10px; }
}

/* ---------- Grace City before & after (js/modules/compare.js adds .is-in once in view):
   the old site drops back and dims, the new one rises in front ---------- */
.gba { padding: var(--section-y) var(--gutter); border-bottom: 1px solid var(--line); }
.gba__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 64px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 56px); }
.gba__head .display { margin: 0; }
.gba__lede { max-width: 46ch; margin: 0; color: var(--text-muted); }
.gba__stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.gba__side { margin: 0; position: relative; }
.gba__side--before { grid-column: 1 / 8; grid-row: 1; z-index: 1; }
.gba__side--after { grid-column: 6 / 13; grid-row: 1; z-index: 2; margin-top: clamp(80px, 9vw, 140px); }
.gba__pair { position: relative; padding-right: 13%; }
.gba__desk { display: block; }
.gba__desk img { display: block; width: 100%; height: auto; }
.gba__phone { position: absolute; right: 0; bottom: -8%; width: 24%; aspect-ratio: 600 / 1299; padding: 5px; border-radius: 22px; background: #0B0B0C; border: 1px solid var(--line-3); overflow: hidden; }
.gba__phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 17px; }
.gba__tag { position: absolute; top: -14px; left: 14px; z-index: 3; padding: 7px 11px; background: var(--surface-3); border: 1px solid var(--line-2); color: var(--text-strong); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.gba__tag--after { color: var(--accent); border-color: var(--accent-muted); }
.gba__side figcaption { margin-top: clamp(28px, 4vw, 48px); font-size: 12.5px; color: var(--text-muted); }
.gba__side--after .gba__pair { background: var(--canvas); }
/* reveal */
.gba__side { transition: transform .9s var(--ease-out), opacity .7s var(--ease-out), filter .9s var(--ease-out); }
.gba__stage.is-armed .gba__side--before { transform: translateY(18px); opacity: 0; }
.gba__stage.is-armed .gba__side--after { transform: translateY(60px); opacity: 0; transition-delay: .18s; }
.gba__stage.is-in .gba__side--before { transform: scale(.96) translateY(-6px); opacity: .6; filter: saturate(.55); }
.gba__stage.is-in .gba__side--after { transform: none; opacity: 1; }
.gba__stage.is-in .gba__side--before:hover { opacity: .95; filter: none; }
.gba__calls { list-style: none; margin: clamp(48px, 6vw, 80px) 0 32px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--line); }
.gba__calls li { padding: 20px 0 0; font-size: 14px; color: var(--text-muted); }
.gba__calls b { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14.5px; color: var(--text-strong); }
.gba__calls b::before { content: ""; display: block; width: 18px; height: 1px; margin-bottom: 14px; background: var(--accent); }
.gba__results[hidden] { display: none; }
@media (max-width: 899px) {
  .gba__stage { grid-template-columns: 1fr; gap: 56px; }
  .gba__side--before, .gba__side--after { grid-column: 1; grid-row: auto; margin-top: 0; }
  .gba__stage.is-in .gba__side--before { transform: scale(.97); }
  .gba__calls { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .gba__side { transition: none !important; }
  .gba__stage.is-armed .gba__side { transform: none; opacity: 1; }
  .gba__stage .gba__side--before { opacity: .75; filter: saturate(.55); transform: none !important; }
}

/* ---------- Pick your vibe (js/modules/vibe.js): one sample homepage, three looks ---------- */
.vibe { padding: var(--section-y) var(--gutter) 0; }
.vibe__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 64px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); }
.vibe__head .display { margin: 0; max-width: 16ch; }
.vibe__lede { max-width: 44ch; margin: 0; color: var(--text-muted); }
.vibe__picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.vibe__picker button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); background: none; color: var(--text); font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: border-color .3s var(--ease-out), color .3s var(--ease-out), background-color .3s var(--ease-out); }
.vibe__picker button:hover { border-color: var(--line-3); color: var(--text-strong); }
.vibe__picker button[aria-checked="true"] { border-color: var(--accent); color: var(--accent); background: rgba(212, 163, 115, .07); }
.vibe__sw { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(238, 234, 227, .3); }
.vibe__sw--clean { background: linear-gradient(135deg, #F7F7F4 50%, #2F5BEA 50%); }
.vibe__sw--warm { background: linear-gradient(135deg, #F3E7D6 50%, #B85C38 50%); }
.vibe__sw--bold { background: linear-gradient(135deg, #111 50%, #FFD23F 50%); }
.vibe__frame { cursor: default; }
.vibe__note { margin: 16px 0 0; font-size: 12.5px; color: var(--text-muted); }
.vibe__note a { color: var(--text-strong); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

.vs {
  --bg: #F7F7F4; --ink: #121314; --muted: #5B5E66; --acc: #2F5BEA; --acc-ink: #fff; --line: rgba(18, 19, 20, .1);
  --r: 6px; --img-r: 4px; --tf: "Montserrat", "Helvetica Neue", Arial, sans-serif; --tw: 600; --tt: none; --ts: -.02em; --tsz: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem);
  position: relative; overflow: hidden; background: var(--bg); color: var(--ink); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  transition: background-color .5s var(--ease-out), color .5s var(--ease-out);
}
.vs[data-vibe="warm"] {
  --bg: #F3E7D6; --ink: #3D2618; --muted: #7A5A44; --acc: #B85C38; --acc-ink: #FFF6EA; --line: rgba(61, 38, 24, .14);
  --r: 999px; --img-r: 160px 160px 14px 14px; --tf: "Cormorant Garamond", Georgia, serif; --tw: 500; --tt: none; --ts: 0; --tsz: clamp(2.2rem, 1.4rem + 3vw, 3.9rem);
  font-family: Georgia, "Times New Roman", serif;
}
.vs[data-vibe="bold"] {
  --bg: #0E0E0E; --ink: #FFFFFF; --muted: #E9E9E9; --acc: #FFD23F; --acc-ink: #0E0E0E; --line: rgba(255, 255, 255, .16);
  --r: 0; --img-r: 0; --tf: Impact, "Arial Black", "Helvetica Neue", sans-serif; --tw: 900; --tt: uppercase; --ts: .01em; --tsz: clamp(2.6rem, 1.4rem + 4.6vw, 5.6rem);
}
.vs__nav { display: flex; align-items: center; gap: 20px; padding: 16px clamp(18px, 3vw, 36px); border-bottom: 1px solid var(--line); transition: border-color .5s; position: relative; z-index: 2; }
.vs__logo { font-family: var(--tf); font-weight: var(--tw); font-size: 1.15rem; letter-spacing: var(--ts); text-transform: var(--tt); }
.vs__links { display: flex; gap: 20px; margin-left: auto; font-size: 13px; color: var(--muted); }
.vs__navbtn, .vs__btn { display: inline-flex; align-items: center; padding: 10px 18px; background: var(--acc); color: var(--acc-ink); border-radius: var(--r); font-size: 13px; font-weight: 600; transition: background-color .5s var(--ease-out), color .5s, border-radius .5s var(--ease-out); }
.vs__hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(28px, 4vw, 56px) clamp(18px, 3vw, 36px); min-height: clamp(340px, 34vw, 460px); position: relative; }
.vs__copy, .vs__media { transition: opacity .18s ease, transform .18s ease; }
.vs.is-swapping .vs__copy, .vs.is-swapping .vs__media, .vs.is-swapping .vs__strip, .vs.is-swapping .vs__logo { opacity: 0; transform: translateY(8px); }
.vs__eyebrow { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); font-family: "Montserrat", Arial, sans-serif; font-weight: 600; transition: color .5s; }
.vs__title { margin: 12px 0 0; font-family: var(--tf); font-weight: var(--tw); font-size: var(--tsz); line-height: .98; letter-spacing: var(--ts); text-transform: var(--tt); max-width: 12ch; }
.vs__text { margin: 16px 0 0; max-width: 38ch; font-size: 15px; line-height: 1.6; color: var(--muted); transition: color .5s; }
.vs__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.vs__btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.vs__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--img-r); overflow: hidden; transition: border-radius .5s var(--ease-out), opacity .18s ease, transform .18s ease; }
.vs__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s var(--ease-out); }
.vs__media img.is-on { opacity: 1; }
.vs__strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); transition: border-color .5s, opacity .18s ease, transform .18s ease; }
.vs__strip span { padding: 16px clamp(18px, 3vw, 36px); font-size: 13px; font-weight: 600; border-right: 1px solid var(--line); }
.vs__strip span:last-child { border-right: 0; }
/* Warm: photo first, centered serif copy */
.vs[data-vibe="warm"] .vs__copy { order: 2; }
.vs[data-vibe="warm"] .vs__media { aspect-ratio: 4 / 4.2; }
.vs[data-vibe="warm"] .vs__eyebrow { letter-spacing: .06em; text-transform: none; font-style: italic; font-family: Georgia, serif; font-weight: 400; font-size: 14px; }
/* Bold: full-bleed photo behind huge type */
.vs[data-vibe="bold"] .vs__hero { grid-template-columns: 1fr; }
.vs[data-vibe="bold"] .vs__media { position: absolute; inset: 0; aspect-ratio: auto; }
.vs[data-vibe="bold"] .vs__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 14, 14, .92) 0%, rgba(14, 14, 14, .6) 55%, rgba(14, 14, 14, .15) 100%); }
.vs[data-vibe="bold"] .vs__copy { position: relative; z-index: 1; }
.vs[data-vibe="bold"] .vs__strip { background: var(--acc); color: var(--acc-ink); border-color: transparent; text-transform: uppercase; letter-spacing: .08em; }
.vs[data-vibe="bold"] .vs__strip span { border-color: rgba(14, 14, 14, .2); }
@media (max-width: 720px) {
  .vs__hero { grid-template-columns: 1fr; }
  .vs[data-vibe="warm"] .vs__copy { order: 0; }
  .vs[data-vibe="warm"] .vs__media { aspect-ratio: 4 / 3; }
  .vs__links { display: none; }
  .vs__navbtn { margin-left: auto; }
  .vs__strip span { padding: 12px 12px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .vs, .vs * { transition: none !important; }
}
.gba__side--before .gba__pair { padding-right: 0; padding-left: 13%; }
.gba__side--before .gba__phone { right: auto; left: 0; }
.gba__tag { top: -40px; left: 0; }
@media (max-width: 899px) { .gba__stage { margin-top: 56px; } }