/*
Theme Name: Hello Elementor Child
Theme URI: https://vastvisuals.net
Description: Child theme for Miguel Gomez portfolio. Holds the portfolio home page template.
Author: Miguel Gomez
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* ============================================================
   Portfolio home page
   Scoped to .pf so nothing here can leak into other pages.
   ============================================================ */

.pf {
  --bg:        #0a0a0b;
  --bg-2:      #121214;
  --bg-3:      #17171a;
  --line:      #26262b;
  --line-soft: #1c1c20;
  --fg:        #ededea;
  --fg-2:      #9a9a9e;
  --fg-3:      #6a6a70;
  --accent:    #e0a458;
  --go:        #57d982;

  --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --pad: clamp(20px, 4vw, 64px);
}

html.pf-html, body.pf-body { margin: 0; padding: 0; background: #0a0a0b; }

.pf * { box-sizing: border-box; }

.pf {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.pf img { max-width: 100%; }

.pf .page { max-width: 1440px; margin: 0 auto; padding: 0 var(--pad) 100px; }

/* ---------- top bar ---------- */
.pf .topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 26px;
  padding: 34px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* ---------- header nav (WordPress menu: "Portfolio Header") ---------- */
.pf .nav { flex: 1 1 0; }
.pf .nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf .nav-list li { margin: 0; padding: 0; }
.pf .nav-list a,
.pf .nav-link {
  color: var(--fg-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s;
}
.pf .nav-list a:hover,
.pf .nav-link:hover { color: var(--fg); }
.pf .nav-list a:focus-visible,
.pf .nav-link:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

.pf .avail { flex: 1 1 0; display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; }
.pf .avail:hover { color: var(--go); }
.pf .avail:focus-visible { outline: 2px solid var(--go); outline-offset: 4px; }
.pf .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--go);
  animation: pf-pulse 2s ease-out infinite;
  flex: none;
}
@keyframes pf-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(87,217,130,.5); }
  70%  { box-shadow: 0 0 0 11px rgba(87,217,130,0); }
  100% { box-shadow: 0 0 0 0 rgba(87,217,130,0); }
}

.pf .role { flex: 0 0 auto; text-align: center; line-height: 1.45; }
.pf .role .arrow { color: var(--fg-3); margin-right: 8px; }

/* ---------- hamburger (mobile only) ---------- */
.pf .burger {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -8px -8px -8px 0;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .18s;
}
.pf .burger:hover { border-color: var(--fg-3); }
.pf .burger:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

/* One bar is real; the other two are its pseudo-elements, so the whole
   thing collapses into an X by rotating three lines about one centre. */
.pf .burger-box { position: relative; display: block; width: 18px; height: 12px; }
.pf .burger-bar,
.pf .burger-bar::before,
.pf .burger-bar::after {
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: var(--fg-2);
  border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease, background .18s ease;
}
.pf .burger-bar { top: 50%; margin-top: -0.75px; }
.pf .burger-bar::before { content: ""; top: -5.5px; }
.pf .burger-bar::after  { content: ""; top:  5.5px; }
.pf .burger:hover .burger-bar,
.pf .burger:hover .burger-bar::before,
.pf .burger:hover .burger-bar::after { background: var(--fg); }

.pf .burger.is-open .burger-bar { transform: rotate(45deg); background: var(--fg); }
.pf .burger.is-open .burger-bar::before { transform: translateY(5.5px) rotate(-90deg); background: var(--fg); }
.pf .burger.is-open .burger-bar::after  { opacity: 0; }

@media (max-width: 700px) {
  .pf .role { order: 3; flex: 1 1 100%; text-align: left; }
  .pf .burger { display: flex; }

  /* Collapsed by default; the button reveals it. */
  .pf .nav {
    order: 4;
    flex: 1 1 100%;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .24s ease, opacity .18s ease;
  }
  .pf .nav.is-open { grid-template-rows: 1fr; opacity: 1; }
  .pf .nav-list {
    overflow: hidden;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    min-height: 0;
  }
  .pf .nav-list li { border-top: 1px solid var(--line-soft); }
  .pf .nav-list a { display: block; padding: 14px 0; }
}

/* No JS: the nav must never be stuck closed. */
.pf .no-js .nav,
.no-js .pf .nav { grid-template-rows: 1fr; opacity: 1; }

/* ---------- hero ---------- */
.pf .hero { padding: clamp(48px, 9vw, 110px) 0 0; }

.pf .tags { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(28px, 5vw, 54px); }
.pf .tag {
  font-family: var(--mono);
  font-size: clamp(11px, 1.3vw, 14px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 22px;
}
/* Rotations live on the .tag, but each .tag now sits inside a motion wrapper,
   so target by the WRAPPER's position. Without this every .tag would be
   :nth-child(1) of its own wrapper and they would all share one rotation. */
.pf .mg-home-hero-motion > .mg-float:nth-child(1) .tag { transform: rotate(-3.5deg); }
.pf .mg-home-hero-motion > .mg-float:nth-child(3) .tag { transform: rotate(2deg); }
.pf .tag.star {
  width: 46px; height: 46px; padding: 0;
  display: grid; place-items: center;
  background: var(--fg); color: var(--bg);
  border-color: var(--fg);
  font-size: 20px;
}

/* Sized to sit on ONE line at desktop widths; wraps only on mobile.
   The vw value is tuned to the page's content width (100vw minus the
   2 x 4vw page padding), and the px ceiling covers >1600px viewports
   where the page stops growing at its 1440px max-width. */
.pf .bigname {
  font-family: var(--sans);
  font-weight: 600;
  font-size: min(11.6vw, 168px);
  line-height: .86;
  letter-spacing: -0.03em;
  margin: 0;
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
}
/* Phones: let the name stack onto two lines instead of shrinking to fit.
   Must come after the base rule above - same specificity, so order decides. */
@media (max-width: 700px) {
  .pf .bigname {
    white-space: normal;
    font-size: clamp(3rem, 13.2vw, 12rem);
  }
}

.pf .hero-shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.6vw, 22px);
  margin-top: clamp(28px, 4vw, 48px);
  align-items: start;
}
@media (max-width: 640px) { .pf .hero-shots { grid-template-columns: 1fr; } }

/* ---------- section shell ---------- */
.pf section { padding-top: clamp(72px, 11vw, 150px); }

.pf .sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 26px;
}
.pf .sec-head h2 {
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--fg);
}
.pf .sec-head .count {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
}
/* A real link in the count slot needs its own alignment: the pill has
   padding a plain text baseline doesn't, so it sits centred against the
   heading instead of glued to its baseline like .count is. */
.pf .sec-head .pill { align-self: center; }
.pf .pill-sm { font-size: 13px; padding: 8px 20px; }

/* ---------- work index rows ---------- */
.pf .grp {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-2); font-weight: 400;
  margin: 0 0 4px;
}
.pf .grp + .prow { border-top: 1px solid var(--line); }
.pf .grp.spaced { margin-top: 52px; }

.pf .prow {
  display: block;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--line-soft);
  padding: 26px 0 30px;
}
.pf .prow:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.pf .prow-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px 28px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.pf .prow-name {
  display: flex; align-items: center; gap: 14px;
  font-size: clamp(1.15rem, 2.3vw, 1.7rem);
  font-weight: 500; letter-spacing: -0.01em;
  color: var(--fg);
}
.pf .prow:hover .prow-name { color: var(--accent); }
.pf .prow-meta {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-2);
  display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap;
}
.pf .prow-meta em { font-style: normal; color: var(--fg-2); }

.pf .prow-shots {
  display: flex; align-items: center; gap: 14px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.pf .prow-shots::-webkit-scrollbar { display: none; }

.pf .thumb {
  height: clamp(104px, 12vw, 158px);
  flex: none;
  background: var(--bg-2);
  border-radius: 5px;
  overflow: hidden;
  opacity: .82;
  transition: opacity .2s, transform .2s;
  display: block;
}
.pf .thumb img {
  height: 100%;
  width: auto;
  display: block;
  border-radius: 5px;
}
.pf .prow:hover .thumb { opacity: 1; transform: translateY(-3px); }

.pf .prow-go {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-2); white-space: nowrap;
  padding-left: 6px;
  transition: color .2s, transform .2s;
}
.pf .prow:hover .prow-go { color: var(--accent); transform: translateX(4px); }

.pf .mark {
  width: 30px; height: 30px; border-radius: 7px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; color: var(--fg-2);
  flex: none;
}

.pf .frame {
  background: var(--bg-2);
  border-radius: 6px;
  overflow: hidden;
  display: block;
}
.pf .frame img { width: 100%; height: auto; display: block; border-radius: 6px; }

.pf .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(224,164,88,.35);
  border-radius: 999px;
  padding: 3px 9px;
  width: max-content;
}

.pf .noshots {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-2);
}

/* ---------- experience ---------- */
.pf .xp { border-top: 1px solid var(--line); }
.pf .xp-row {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-soft);
}
.pf .xp-row .co { font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 500; letter-spacing: -0.01em; }
.pf .xp-row .title { color: var(--fg-2); font-size: 15px; text-align: right; }
.pf .xp-row .yrs {
  font-family: var(--mono); font-size: 14px; color: var(--fg);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 700px) {
  .pf .xp-row { grid-template-columns: 30px 1fr; gap: 6px 14px; }
  .pf .xp-row .title { grid-column: 2; text-align: left; }
  .pf .xp-row .yrs { grid-column: 2; }
}

/* ---------- about ---------- */
.pf .about {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 1.4fr 1.4fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
}
@media (max-width: 780px) { .pf .about { grid-template-columns: 1fr; } }

.pf .about h2 { font-weight: 400; font-size: clamp(1.9rem, 4vw, 3.2rem); margin: 0; letter-spacing: -0.02em; color: var(--fg); }
.pf .stat .num {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  color: var(--fg);
}
.pf .stat p { margin: 0; color: var(--fg-2); font-size: 1.05rem; line-height: 1.45; max-width: 26ch; }

.pf .thesis {
  margin: clamp(32px, 5vw, 60px) 0 0;
  font-size: clamp(1.15rem, 2.1vw, 1.65rem);
  line-height: 1.42;
  max-width: 30ch;
  color: var(--fg);
  text-wrap: balance;
}
.pf .thesis span { color: var(--fg-3); }

/* ---------- footer ---------- */
.pf .foot {
  margin-top: clamp(70px, 12vw, 140px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.pf .pills { display: flex; gap: 10px; flex-wrap: wrap; }
.pf .pill {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 24px;
  transition: border-color .18s, color .18s;
}
.pf .pill:hover { border-color: var(--fg-2); }
.pf .pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pf .foot .right { text-align: right; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .pf * { animation: none !important; transition: none !important; }
}

/* ============================================================
   Case-study pages (Franklin Loan Center and friends)
   ============================================================ */

.pf .case {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(28px, 5vw, 88px);
  padding-top: clamp(40px, 6vw, 76px);
}
.pf .col-left {
  flex: 0 1 380px;
  position: sticky;
  top: 34px;
  align-self: flex-start;
}
.pf .col-right {
  display: flex;
  flex: 1 1 520px;
  flex-direction: column;
  gap: clamp(30px, 4vw, 58px);
  min-width: 0;
}

.pf .back {
  display: inline-flex;
  gap: 10px;
  margin-bottom: 20px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-2);
  text-decoration: none;
}
.pf .back:hover { color: var(--fg); }

.pf .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 22px;
  border-radius: 12px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-2);
}

.pf .case-title {
  margin: 0 0 20px;
  font-weight: 500;
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-wrap: balance;
}
.pf .facts {
  display: flex;
  flex-direction: column;
  margin-bottom: 22px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-2);
}
.pf .case-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.pf .case-pill {
  font-size: 13px;
  color: var(--fg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  white-space: nowrap;
}
.pf .rule { height: 1px; background: var(--line); margin-bottom: 26px; }
.pf .narrative { display: flex; flex-direction: column; gap: 16px; }
.pf .narrative p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.66;
  color: var(--fg-2);
  max-width: 42ch;
}
.pf .narrative-lead { color: var(--fg); }

/* ---------- filters ---------- */
.pf .filters { display: flex; flex-wrap: wrap; gap: 10px; }
.pf .chip {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg-2);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.pf .chip:hover { color: var(--fg-2); border-color: var(--fg-3); }
.pf .chip-on { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.pf .chip:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.pf [data-cat][hidden] { display: none; }

/* ---------- shots ---------- */
.pf .shot { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.pf .row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(14px, 1.8vw, 24px); }
.pf .row > .shot { flex: 1 1 260px; }
.pf .shot-img { width: 100%; height: auto; display: block; border-radius: 6px; }

.pf .cap { display: flex; flex-direction: column; gap: 5px; }
.pf .cap-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.pf .cap-title { font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--fg); }
.pf .cap-body { font-size: 14px; line-height: 1.45; color: var(--fg-2); max-width: 56ch; }

/* ---------- shared footer ---------- */
.pf .foot-lead { flex: 1 1 0; }
.pf .foot-end { display: flex; flex: 1 1 0; align-items: center; justify-content: flex-end; gap: 10px; }

/* These three case studies can wrap before the generic 980px breakpoint.
   Stack them sooner so the narrative column is never sticky after wrapping. */
@media (max-width: 1100px) {
  body.page-id-202 .pf .col-left,
  body.page-id-489 .pf .col-left,
  body.page-id-297 .pf .col-left {
    position: static;
    flex: 1 1 100%;
  }

  body.page-id-202 .pf .narrative p,
  body.page-id-489 .pf .narrative p,
  body.page-id-297 .pf .narrative p {
    max-width: 62ch;
  }
}

@media (max-width: 980px) {
  .pf .col-left { position: static; flex: 1 1 100%; }
  .pf .narrative p { max-width: 62ch; }
}
@media (max-width: 700px) {
  .pf .row > .shot { flex: 1 1 100%; }
  .pf .foot-end { justify-content: flex-start; }

  /* 38px tall on a touchscreen is under the ~44px target guideline. */
  .pf .chip { min-height: 44px; padding: 8px 18px; display: inline-flex; align-items: center; }
}


/* ============================================================
   Hero physics stage + scroll cue
   All scoped under .pf and the hero. Nothing here reaches the
   header, the nav, the hamburger, or the page.
   ============================================================ */


/* ---------- physics mode ----------
   Applied by script only. Without JS, or under reduced motion, the
   objects stay in the plain flex row exactly as designed. */
.pf .mg-stage.is-physics {
  position: relative;
  display: block;
  overflow: clip;
  overflow-clip-margin: 0;
  /* The stage grows upward into the hero's padding to make room for the
     fall. Its empty box must never intercept clicks meant for the header,
     so only the objects themselves are interactive. */
  pointer-events: none;
}
.pf .mg-stage.is-physics > .mg-float { pointer-events: auto; }
.pf .mg-stage.is-physics > .mg-float {
  position: absolute;
  left: 0;
  top: 0;
  /* Only the draggable objects opt out of native gestures. */
  touch-action: none;
  cursor: grab;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
}
.pf .mg-stage.is-physics > .mg-float.is-dragging { cursor: grabbing; }
/* The body angle carries the rotation while physics runs, so the
   designed CSS rotation must not be applied on top of it. */
.pf .mg-stage.is-physics > .mg-float > .tag { transform: none; }
.pf .mg-stage.is-physics .tag { -webkit-user-select: none; user-select: none; }

/* ---------- scroll cue ---------- */
.pf .mg-scroll-cue {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(54px, 6.5vw, 82px);
  height: clamp(54px, 6.5vw, 82px);
  border-radius: 50%;
  background: var(--fg);
  color: var(--bg);
  border: 1px solid var(--fg);
  text-decoration: none;
  animation: mg-cue-bob 2.8s ease-in-out infinite;
  transition: background .18s, transform .18s;
}
.pf .mg-scroll-cue svg { width: 42%; height: 42%; display: block; }
.pf .mg-scroll-cue:hover { background: #fff; }
.pf .mg-scroll-cue:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
@keyframes mg-cue-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .pf .mg-scroll-cue { animation: none; }
  .pf .dot { animation: none; }
}

/* The cue is one of the physics objects now. In the plain (static /
   reduced-motion) row it stays pushed to the open right side. */
.pf .mg-float-cue { margin-left: auto; }
.pf .mg-stage.is-physics > .mg-float-cue { margin-left: 0; }

/* Physics supplies the motion, so the idle bob would fight it. */
.pf .mg-stage.is-physics .mg-scroll-cue { animation: none; }

/* Role line, now sitting under the name rather than in the top bar. */
.pf .mg-role-line {
  margin: clamp(10px, 1.4vw, 18px) 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.pf .mg-role-line .arrow { color: var(--fg-3); margin-right: 8px; }

/* One-line positioning statement, sentence case so it reads as a sentence
   rather than shouting like the mono role line above it. */
.pf .mg-tagline {
  margin: clamp(14px, 2vw, 20px) 0 0;
  font-family: var(--sans);
  font-size: clamp(0.98rem, 1.5vw, 1.15rem);
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 46ch;
}
@media (max-width: 700px) {
  .pf .mg-tagline { max-width: 34ch; }
}

/* ---------- concept work ----------
   One quiet row, one piece each. Sized well below the client rows on
   purpose: this is unpaid, self-directed and interview work. */
.pf .grp-note {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 52ch;
}

.pf .cwork {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 26px);
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.pf .cwork-item {
  display: flex;
  flex: 1 1 180px;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  opacity: .78;
  transition: opacity .18s;
}
.pf .cwork-item:hover { opacity: 1; }
.pf .cwork-item:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

/* Coming-soon work stays visually quiet and does not imply an action. */
.pf .cwork-item-pending,
.pf .cwork-item-pending:hover { opacity: .78; cursor: default; }
.pf .cwork-item-pending:hover .cwork-name { color: var(--fg); }

/* Width hugs the artwork so a tall piece reads as a thumbnail rather than
   a small image stranded in a wide empty panel. */
.pf .cwork-shot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
  min-width: 92px;
  height: clamp(84px, 9vw, 116px);
  padding: 0 10px;
  border-radius: 5px;
  background: var(--bg-2);
  overflow: hidden;
}
.pf .cwork-img { height: 100%; width: auto; display: block; border-radius: 5px; }
.pf .cwork-empty {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
  text-align: center;
  line-height: 1.5;
}

.pf .cwork-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  transition: color .18s;
}
.pf .cwork-item:hover .cwork-name { color: var(--accent); }
.pf .cwork-name .mark {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 9px;
}
.pf .cwork-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* ============================================================
   Case-study carousel decks + lightbox
   Scoped to .flc-gallery and .mg-lb.
   ============================================================ */

/* A lone item in a row shouldn't stretch to full width and upscale - but only
   above the phone breakpoint. This selector outranks the mobile
   `.row > .shot { flex: 1 1 100% }` rule, so without the query a single-item
   row would render at half width on a phone. */
@media (min-width: 701px) {
  .pf .row > .shot:only-child { flex: 0 1 calc(50% - 12px); }
}

.pf .deck-media {
  position: relative;
  /* The rail only ever overlays this box, so unfolding never resizes
     the deck or shifts anything below it. */
  isolation: isolate;
}

/* Offset cards peeking out behind the cover. */
.pf .deck-stack,
.pf .deck-stack::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  z-index: -1;
}
.pf .deck-stack { transform: translate(6px, 6px); }
.pf .deck-stack::before { transform: translate(6px, 6px); }

.pf .deck-cover {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}
.pf .deck-cover-img { width: 100%; height: auto; display: block; border-radius: 6px; }
.pf .deck-cover:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* "View slides" affordance. */
.pf .deck-cue {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(10, 10, 11, .74);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
}
.pf .deck-cue svg { width: 13px; height: 13px; }
.pf .deck:hover .deck-cue,
.pf .deck:focus-within .deck-cue { opacity: 1; transform: translateY(0); }

/* Thumbnail rail: absolutely placed, so it cannot affect page height. */
.pf .deck-rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 6px;
  padding: 26px 8px 8px;
  overflow-x: auto;
  scrollbar-width: none;
  background: linear-gradient(to top, rgba(10,10,11,.92) 40%, rgba(10,10,11,0));
  border-radius: 0 0 6px 6px;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.pf .deck-rail::-webkit-scrollbar { display: none; }
.pf .deck:hover .deck-rail,
.pf .deck:focus-within .deck-rail {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.pf .deck-thumb {
  flex: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--bg-2);
  overflow: hidden;
  cursor: pointer;
  opacity: .68;
  transition: opacity .15s, border-color .15s;
}
.pf .deck-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf .deck-thumb:hover,
.pf .deck-thumb.is-current { opacity: 1; border-color: var(--fg-2); }
.pf .deck-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Mobile: no hover, so give it an explicit button instead of the rail. */
.pf .deck-all {
  display: none;
  align-self: flex-start;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
}
.pf .deck-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (hover: none), (max-width: 700px) {
  .pf .deck-rail { display: none; }
  .pf .deck-cue { opacity: 1; transform: none; }
  .pf .deck-all { display: inline-flex; }
}

/* ---------- lightbox ---------- */
.mg-lb {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mg-lb[hidden] { display: none; }
.mg-lb-backdrop { position: absolute; inset: 0; background: rgba(6, 6, 7, .93); }
.mg-lb-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1100px, 94vw);
  height: min(92vh, 100%);
  padding: 0 8px 8px;
}
.mg-lb-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 2px;
  font-family: "DM Mono", ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9a9a9e;
}
.mg-lb-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ededea; }
.mg-lb-count { flex: none; font-variant-numeric: tabular-nums; }
.mg-lb-close {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: none;
  border: 1px solid #26262b;
  border-radius: 50%;
  color: #ededea;
  cursor: pointer;
}
.mg-lb-close svg { width: 16px; height: 16px; }
.mg-lb-close:hover { border-color: #9a9a9e; }
.mg-lb-close:focus-visible, .mg-lb-nav:focus-visible { outline: 2px solid #e0a458; outline-offset: 3px; }

.mg-lb-stage {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mg-lb-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;   /* never crop the artwork */
  border-radius: 4px;
  display: block;
}

.mg-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: rgba(18,18,20,.86);
  border: 1px solid #26262b;
  border-radius: 50%;
  color: #ededea;
  cursor: pointer;
}
.mg-lb-nav svg { width: 20px; height: 20px; }
.mg-lb-nav:hover { border-color: #9a9a9e; }
.mg-lb-nav[hidden] { display: none; }
.mg-lb-prev { left: -6px; }
.mg-lb-next { right: -6px; }

@media (max-width: 700px) {
  .mg-lb-panel { width: 100vw; padding: 0 6px 6px; }
  .mg-lb-prev { left: 2px; }
  .mg-lb-next { right: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .pf .deck-rail, .pf .deck-cue { transition: none; }
}

/* ============================================================
   The two hero project cards under the name.
   Scoped to these cards only - the grid, gap and breakpoint of
   .hero-shots above are untouched.
   ============================================================ */

.pf .hero-shots { margin-top: clamp(24px, 3.5vw, 40px); }

.pf .hero-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.pf .hero-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Same 16:9 box the previous two cards occupied, so the grid keeps its
   proportions. contain, because the bank's only assets are portrait and
   a crop would cut the artwork apart. */
.pf .hero-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: var(--bg-2);
  border-radius: 6px;
  overflow: hidden;
}
.pf .hero-card-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform .3s ease;
}
.pf .hero-card:hover .hero-card-img { transform: scale(1.02); }

.pf .hero-card-text { display: flex; flex-direction: column; gap: 5px; }
.pf .hero-card-name {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
  transition: color .18s;
}
.pf .hero-card:hover .hero-card-name { color: var(--accent); }
.pf .hero-card-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-2);
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .pf .hero-card-img { transition: none; }
  .pf .hero-card:hover .hero-card-img { transform: none; }
}

/* ============================================================
   Embedded portfolio section (First Northern Bank campaign)
   Appended to an existing Elementor page, so it must behave as a
   normal block rather than a full-height page shell.
   ============================================================ */

.pf.pf-embed {
  min-height: 0;
  padding-block: clamp(48px, 7vw, 96px);
}
.pf.pf-embed .page { padding-bottom: 0; }
.pf.pf-embed .sec-head { padding-bottom: 14px; }

/* Click-to-view wrapper for a single piece. */
.pf .lb-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 6px;
  overflow: hidden;
}
.pf .lb-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pf .lb-open .shot-img { transition: transform .3s ease; }
.pf .lb-open:hover .shot-img { transform: scale(1.015); }

@media (prefers-reduced-motion: reduce) {
  .pf .lb-open .shot-img { transition: none; }
  .pf .lb-open:hover .shot-img { transform: none; }
}

/* ============================================================
   Project-page chrome: header breadcrumb + back/next row.
   Both are project-page-only markup, so these rules cannot
   reach the home page, the nav, or the hamburger.
   ============================================================ */

/* Sits in the slot .avail occupies on the home page, and inherits the
   top bar's mono / uppercase / letter-spacing, so nothing else shifts. */
.pf .crumbs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 9px;
  line-height: 1.5;
}
.pf .crumb { color: var(--fg-2); text-decoration: none; transition: color .18s; }
.pf a.crumb:hover { color: var(--fg); }
.pf a.crumb:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.pf .crumb-now { color: var(--fg); }
.pf .crumb-sep { color: var(--fg-3); }

/* ---------- back / next ---------- */
.pf .projnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: clamp(60px, 9vw, 110px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.pf .projnav-link { color: var(--fg-2); text-decoration: none; transition: color .18s; }
.pf .projnav-link:hover { color: var(--fg); }
.pf .projnav-link:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
/* Holds the right edge even when there is no next project to pair with. */
.pf .projnav-next { margin-left: auto; }

/* The projnav already draws the rule above the footer. */
.pf .projnav + .foot { margin-top: clamp(46px, 7vw, 80px); }

@media (max-width: 700px) {
  /* A long project name is wide enough to fill the first row on its own,
     which wraps the hamburger onto a second one and doubles the header
     height. Basis 0 makes the crumb take the space that is left after the
     burger and wrap its own lines instead. */
  .pf .crumbs { flex: 1 1 0; }
}

/* ============================================================
   First Northern Bank page only.
   .pf-fnb is set on that page's wrapper, so none of this can
   reach the home page or another project.
   ============================================================ */

/* Section boundaries: the cream block and the black campaign block get the
   same rhythm, so the change of ground reads as deliberate. */
.pf-fnb .fnb-section + .fnb-section {
  margin-top: clamp(20px, 3vw, 40px);
  padding-top: clamp(40px, 6vw, 76px);
  border-top: 1px solid var(--line);
}
.pf-fnb .fnb-campaign .sec-head { padding-bottom: 14px; }
.pf-fnb .fnb-campaign .row { margin-top: 8px; }

/* The eyebrow grey is ~3.6:1 on the page ground, which is under AA for text
   this small. --fg-2 is the same family at ~7.5:1. */
.pf-fnb .cap-eyebrow,
.pf-fnb .grp-note,
.pf-fnb .sec-head .count { color: var(--fg-2); }