/* Case studies laid out from the Figma frames (Portfolio-website / Pages / Case study / …).
   Sizes are the frame's at 1440px; media keep their slot ratios so the layout scales down. */
.fg p, .fg li { font-size: 16px; line-height: 22px; color: var(--ink-2); }
.fg b { font-weight: 700; }
.fg b.k, .fg .feat b { color: var(--ink); }

/* Sections, rows and columns */
.fg .s { display: flex; flex-direction: column; gap: var(--g, 0); padding: var(--pt, 0) 0 var(--pb, 0); }
.fg .row { display: grid; grid-template-columns: minmax(0, 893fr) minmax(0, 547fr); align-items: start; }
.fg .row > :first-child { padding: 0 20px 0 40px; }
.fg .row > :last-child { padding: 0 38px 0 20px; }   /* Figma's text boxes are 489 wide in a 548 column */
.fg .full { padding: 0 40px; }
.fg .row > .px60 { padding: 0 60px; }
.fg .row > .pl20 { padding: 0 0 0 20px; }
.fg .row > .pl40 { padding: 0 0 0 40px; }
/* Desktop: text on the left, media on the right; same column widths and gutters, mirrored */
@media (min-width: 901px) {
  .fg .row:not(.hero-row) { grid-template-columns: minmax(0, 547fr) minmax(0, 893fr); }
  .fg .row:not(.hero-row) > :first-child { grid-area: 1 / 2; padding: 0 40px 0 20px; }
  .fg .row:not(.hero-row) > :last-child { grid-area: 1 / 1; padding: 0 18px 0 40px; }   /* 489 text box, as before */
  .fg .row:not(.hero-row) > .px60 { padding: 0 60px; }
  .fg .row:not(.hero-row) > .pl20 { padding: 0 20px 0 0; }
  .fg .row:not(.hero-row) > .pl40 { padding: 0 40px 0 0; }
}
.fg .s, .fg .col { --g: 0px; }   /* a gap set on a section must not leak into the columns inside it */
.fg .col { display: flex; flex-direction: column; align-items: stretch; gap: var(--g, 0); }
.fg .sp { display: block; flex: none; }

/* Type */
.fg .lbl { font: 400 16px/22px var(--serif); color: var(--accent); }
.fg .h1 { font: 400 36px/43px var(--serif); letter-spacing: 1.08px; color: var(--ink); max-width: 1061px; }
.fg .h2 { font: 400 32px/45px var(--serif); letter-spacing: -.32px; color: var(--ink); }
.fg .h2.tight { line-height: 28px; letter-spacing: -.2px; }
.fg .h3 { font: 400 20px/28px var(--serif); letter-spacing: -.2px; color: var(--ink); }
.fg .big { font: 400 32px/normal var(--serif); color: var(--ink); }
.fg .serif p { font-family: var(--serif); color: var(--ink); }
.fg .normal p { line-height: normal; }
.fg .cap { font-size: 12px; line-height: 22px; text-align: center; }
.fg .lk { color: #2f80ed; text-decoration: underline; text-underline-offset: 2px; }
.fg .lk:hover { text-decoration-thickness: 2px; }

/* Summary under the statement */
.fg .sum { display: flex; flex-direction: column; gap: 24px; }
.fg .rule { height: 1px; margin: 0; border: 0; background: var(--rule); }
.fg .sum-row { display: flex; gap: 32px; align-items: flex-start; }
.fg .sum-row > * { flex: none; }
/* project type, role and outcome side by side from the left, each 260–380px wide; they wrap when space runs out */
.fg .sum3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 380px)); justify-content: start; gap: 24px 40px; align-items: start; }
.fg .disc { list-style: disc; padding-left: 24px; }
.fg .dots li::before { content: "•  "; white-space: pre; }

/* Feature list with rules */
.fg .feat { padding-top: 1px; border-top: 1px solid var(--rule); }
.fg .feat li { padding: 9px 0; border-bottom: 1px solid var(--rule); }
.fg .feat b { display: block; }

/* Media slots */
.fg .ph { position: relative; overflow: hidden; flex: none; width: var(--w, 100%); aspect-ratio: var(--ar);
  /* Own layer, clipped to the rounded box: stops GPU video overlays leaving hairline seams at layer edges */
  isolation: isolate; transform: translateZ(0); clip-path: inset(0); }
.fg .ph > img, .fg .ph > video, .fg .ph > iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; border: 0; object-fit: cover; }
/* Overscan media by 1px each side so edge pixels (and light bands baked into some clips) never show */
.fg .ph > img:not(.cr), .fg .ph > video:not(.cr) { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); }
.fg .ph > .cr { inset: auto; left: var(--x, 0); top: var(--y, 0); width: var(--cw, 100%); height: var(--ch, 100%); object-fit: fill; }
.fg .ph.bd::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--accent-2); border-radius: inherit; pointer-events: none; }
.fg .ph.em { background: var(--hover); }
/* phone screens: same 9px corner as the first remote UI, whose corners are baked into its video */
.fg .ph.rd { clip-path: inset(0 round 9px); }
/* even 2px frame drawn in CSS (the one baked into the image was uneven) */
.fg .ph.bx { clip-path: inset(0 round 16px); }
.fg .ph.bx::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--ink); border-radius: 16px; pointer-events: none; }
.fg .ph > iframe.yt { inset: -120px 0 auto; height: calc(100% + 240px); pointer-events: none; }
.fg .rot { container-type: size; }
.fg .ph.rot > img { inset: auto; left: 50%; top: 50%; width: calc(100cqh + 2px); height: calc(100cqw + 2px); translate: -50% -50%; rotate: 90deg; }
.fg .sc { overflow: hidden; }
.fg .sc iframe { display: block; width: 100%; height: 166px; border: 0; }

.fg .pics { display: flex; gap: 0; align-items: flex-start; justify-content: space-between; }
.fg .pics.gap { justify-content: flex-start; gap: var(--gap); }
.fg .pics.mid { justify-content: center; }
.fg .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap, 12px); }

/* HitchBox collage: placed exactly as in the frame */
.fg .collage { position: relative; aspect-ratio: 1360 / 429.726; }
.fg .collage > .ph { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); aspect-ratio: auto; }

/* Captions, numbered lists, quotes */
.fg .fcap { font-weight: 500; text-align: center; }
.fg .h2.t37 { line-height: 37px; letter-spacing: -.2px; }
.fg .ol { margin: 0; list-style: decimal; padding-left: 24px; }
.fg .q { line-height: 28px; color: var(--ink); }

/* J-Secure comparison table */
.fg .cmp { width: 100%; max-width: 728px; border: 1px solid var(--ink); border-radius: 16px; overflow: hidden; }
.fg .cmp table { width: 100%; border-collapse: collapse; border-style: hidden; table-layout: fixed; }
.fg .cmp td { height: 58.4px; padding: 0 8px; border: 1px solid var(--tag); font-size: 16px; line-height: 22px; color: var(--ink); text-align: center; vertical-align: middle; }
.fg .cmp tr:first-child td { height: 58px; font-size: 24px; font-weight: 700; text-align: center; }
.fg .cmp tr:nth-child(2) td { height: 78px; }
.fg .cmp td:first-child { padding: 0 16px; text-align: left; font-weight: 700; }
.fg .cmp .who { display: flex; justify-content: center; align-items: center; gap: 8px; font-weight: 700; }

/* Labels laid over an image */
.fg .over { position: relative; }
.fg .over > p { position: absolute; font-weight: 500; color: var(--ink); white-space: nowrap; }

/* FLXO "Featured on" strip, each logo cropped from one sheet */
.fg .logos { position: relative; aspect-ratio: 1360 / 51.365; }
.fg .logos > .ph { position: absolute; left: var(--l); top: var(--t, 0); width: var(--w); height: var(--h); aspect-ratio: auto; }

/* Centered list of key questions */
.fg .kq { display: flex; justify-content: center; padding: 8px; overflow: hidden; }
.fg .kq > div { white-space: nowrap; }
.fg .kq li { line-height: 28px; color: var(--ink); }

/* Click-to-play films */
.fg .ph.film > iframe { pointer-events: auto; }

@media (max-width: 900px) {
  .fg .s { padding: min(var(--pt, 0px), 64px) 0 min(var(--pb, 0px), 64px); gap: min(var(--g, 0px), 64px); }
  /* Each section reads: label and title, then its image, then the text */
  .fg { --mp: 24px; }
  .fg .row { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .fg .row > :first-child, .fg .row > :last-child { padding: 0 var(--mp); }
  .fg .row > * { order: 3; }
  .fg .row > :first-child { order: 2; }
  .fg .row .hdp { display: contents; }
  .fg .row .hd { order: 1; padding: 0 var(--mp); }
  .fg .row .hdp > :not(.hd):not(.hdp) { order: 3; padding: 0 var(--mp); }
  .fg .row .hd + .hd { margin-top: -8px; }
  .fg .row .hdp > .sp { display: none; }
  .fg .full { padding: 0 var(--mp); }
  .fg .sum3 { grid-template-columns: 1fr; gap: 24px; }
  .fg .sum-row { flex-direction: column; gap: 24px; }
  .fg .sum-row > * { width: auto !important; padding-left: 0 !important; }
  .fg .kq { justify-content: flex-start; padding: 0 24px; }
  .fg .kq > div { white-space: normal; }
  .fg .logos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; aspect-ratio: auto; }
  .fg .logos > .ph { position: relative; left: auto; top: auto; width: calc(var(--pw) * .7px); height: auto; aspect-ratio: var(--ar); }
}
@media (max-width: 560px) {
  /* same side margins as the homepage; smaller type and a little more air between paragraphs */
  .fg { --mp: 16px; }
  .fg .h1 { font-size: 22px; line-height: 29px; letter-spacing: .4px; }
  .fg .h2, .fg .big { font-size: 20px; line-height: 27px; letter-spacing: -.2px; }
  .fg .h2.tight, .fg .h2.t37 { line-height: 25px; }
  .fg .h3 { font-size: 16px; line-height: 23px; }
  .fg .lbl { font-size: 13px; line-height: 18px; }
  .fg p, .fg li { font-size: 14px; line-height: 21px; }
  .fg .q, .fg .kq li { font-size: 14px; line-height: 22px; }
  .fg .row { gap: 20px; }
  .fg .col > p + p, .fg .col > p + ul, .fg .col > ul + p, .fg .col > div + p { margin-top: 6px; }
  .fg .pics.r4 { flex-wrap: wrap; row-gap: 8px; }
  .fg .pics.r4 > .ph { --w: 49% !important; }
  .fg .collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; aspect-ratio: auto; }
  .fg .collage > .ph { position: relative; left: auto; top: auto; width: auto; height: auto; aspect-ratio: var(--ar); }
  .fg .collage > .ph:first-child { grid-column: span 2; }
  .fg .kq { padding: 0 16px; }
  .fg .over > p { font-size: 12px; line-height: 16px; }
  .fg .cmp td { padding: 0 4px; font-size: 13px; line-height: 17px; }
  .fg .cmp td:first-child { padding: 0 8px; }
  .fg .cmp tr:first-child td { font-size: 17px; }
  .fg .cmp .who { flex-direction: column; gap: 4px; }
}