/* ════════════════════════════════════════════════════════════
   SHARED INNER-PAGE TEMPLATE STYLES
   Edit this file → every project case-study page updates.
   ════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Red Hat Display';
    src: url('../Fonts/RedHatDisplay_Complete/Fonts/WEB/fonts/RedHatDisplay-Variable.woff2') format('woff2'),
         url('../Fonts/RedHatDisplay_Complete/Fonts/WEB/fonts/RedHatDisplay-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}
@font-face {
    font-family: 'Red Hat Display';
    src: url('../Fonts/RedHatDisplay_Complete/Fonts/WEB/fonts/RedHatDisplay-VariableItalic.woff2') format('woff2'),
         url('../Fonts/RedHatDisplay_Complete/Fonts/WEB/fonts/RedHatDisplay-VariableItalic.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}
@font-face {
    font-family: 'Fraunces';
    src: url('../Fonts/Fraunces/Fraunces-VariableFont_SOFT,WONK,opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}
@font-face {
    font-family: 'Fraunces';
    src: url('../Fonts/Fraunces/Fraunces-Italic-VariableFont_SOFT,WONK,opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

:root {
    --ink: #0D0D0D;
    --muted: #686868;
    --grey: #949493;
    --white: #FFFFFF;
    --bg-soft: #FAFAF8;
    --purple: #5866E3;
    --navy: #0A185D;
    --pink: #D33974;
    --tag: #DEE0F9;
    --line: #ECECEC;
    --footer-bg: #0D0D0D;

    /* Type scale (matches the downsized home page) */
    --fs-title: 56px;
    --fs-subtitle: 24px;
    --fs-heading: 40px;
    --fs-sub: 22px;
    --fs-body: 18px;

    --container: 1120px;
    --container-wide: 1320px;
    --gutter: 48px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background: var(--white);
    color: var(--ink);
    font-family: 'Red Hat Display', sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

/* ── Nav ─────────────────────────────────────────────── */
.ip-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0 var(--gutter);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
}
.ip-nav .logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.ip-nav .logo svg { height: 18px; width: auto; }
.ip-nav .logo-tag {
    font-size: 12px; font-weight: 300; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.ip-nav ul { list-style: none; display: flex; gap: 32px; }
.ip-nav a.nav-link {
    text-decoration: none; color: var(--ink);
    font-size: 15px; font-weight: 500; text-transform: uppercase; letter-spacing: -0.01em;
    transition: color .2s;
}
.ip-nav a.nav-link:hover { color: var(--purple); }

/* ── Layout primitives ───────────────────────────────── */
.ip-section {
    max-width: var(--container);
    margin: 0 auto;
    padding: 72px var(--gutter);
}
.ip-section.wide { max-width: var(--container); } /* unified width so nothing jumps */
.ip-section.tight { padding-top: 40px; padding-bottom: 40px; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.25,1,.5,1), transform .7s cubic-bezier(.25,1,.5,1); }
.reveal.in { opacity: 1; transform: none; }

/* ── Hero media — full width (edge to edge) ──────────── */
.ip-hero {
    width: 100%;
    margin: 0;
    padding: 0;
}
.ip-hero .media-frame {
    border-radius: 0;
    overflow: hidden;
    background: var(--bg-soft);
}
.ip-hero video, .ip-hero img { width: 100%; height: auto; display: block; }

/* ── Title block ─────────────────────────────────────── */
.ip-title { font-family: 'Fraunces', serif; font-weight: 700; font-size: var(--fs-title); line-height: 1.05; color: var(--ink); letter-spacing: -0.01em; }
.ip-subtitle { font-family: 'Red Hat Display', sans-serif; font-size: var(--fs-subtitle); font-weight: 400; color: var(--muted); margin-top: 16px; max-width: 760px; }

/* ── At a glance (meta + overview) ───────────────────── */
.ip-glance {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 100px;
}
.ip-meta { display: flex; flex-direction: column; gap: 24px; }
.ip-meta .label { font-size: 14px; text-transform: capitalize; letter-spacing: 0; color: #999999; margin-bottom: 8px; }
.ip-meta .value { font-size: var(--fs-body); color: var(--ink); line-height: 1.4; }
.ip-overview p { font-size: var(--fs-body); line-height: 1.7; color: var(--ink); }
.ip-visit {
    display: inline-block; margin-top: 24px;
    font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--purple); text-decoration: none; transition: gap .2s;
}
.ip-visit:hover { color: var(--navy); }

/* ── Generic content section ─────────────────────────── */
.ip-heading { font-family: 'Fraunces', serif; font-weight: 700; font-size: var(--fs-heading); line-height: 1.15; color: var(--ink); margin-bottom: 28px; letter-spacing: -0.01em; }
.ip-body { max-width: 760px; }
.ip-body p { font-size: var(--fs-body); line-height: 1.75; color: var(--ink); margin-bottom: 20px; }
.ip-body p:last-child { margin-bottom: 0; }
.ip-body strong { font-weight: 700; color: var(--ink); }
.ip-subhead { font-size: var(--fs-sub); font-weight: 600; color: var(--ink); margin: 36px 0 14px; }
.ip-body ul { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.ip-body ul li { position: relative; padding-left: 28px; font-size: var(--fs-body); line-height: 1.7; color: var(--ink); }
.ip-body ul { padding-left: 4px; }
.ip-body ul li { padding-left: 34px; }
.ip-body ul li::before {
    content: ""; position: absolute; left: 0; top: 6px; width: 18px; height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M16.97 16.97L13.93 25.34a1 1 0 0 1-1.88 0l-3.03-8.37-8.37-3.03a1 1 0 0 1 0-1.88l8.37-3.04 3.04-8.37a1 1 0 0 1 1.88 0l3.04 8.37 8.37 3.04a1 1 0 0 1 0 1.88l-8.37 3.03z' fill='%235866E3'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Labelled extras (brand colors, illustrations) */
.ip-eyebrow { font-family: 'Red Hat Display', sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink); margin: 64px 0 32px; }
.ip-swatches { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.ip-swatch { width: 120px; height: 120px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(13, 13, 13, 0.05); }
.ip-extra-figure { margin-top: 0; }
.ip-extra-figure img { border-radius: 0; }

/* Panorama: full-bleed gentle auto-pan across a wide canvas.
   Pan distance is pure CSS: translateX(100vw - 100%) = viewport - imageWidth = -overflow,
   clamped with min(0px, …) so it never over-pans on ultra-wide screens. No JS needed. */
.ip-panorama { width: 100%; margin: 0; padding: 0; }
.ip-pan-viewport { width: 100%; overflow: hidden; background: #ffffff; }
.ip-pan-track { display: inline-block; line-height: 0; white-space: nowrap; will-change: transform; animation: ip-pan 9s ease-in-out infinite; }
.ip-pan-img { display: block; height: clamp(360px, 44vw, 820px); width: auto; max-width: none; }
@keyframes ip-pan {
    0%   { transform: translateX(0); }
    5%   { transform: translateX(0); animation-timing-function: cubic-bezier(.42, 0, .85, 1); }   /* pan right: ease in, builds speed */
    78%  { transform: translateX(min(0px, calc(100vw - 100%))); }
    85%  { transform: translateX(min(0px, calc(100vw - 100%))); animation-timing-function: cubic-bezier(.55, 0, .2, 1); } /* quick snap back */
    100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .ip-pan-track { animation: none; } }

/* Stop-and-play carousel inside a contained rounded box */
.ip-carousel { max-width: var(--container); margin: 0 auto; padding: 40px var(--gutter); }
.ip-carousel-box { position: relative; width: 100%; aspect-ratio: 1360 / 897; overflow: hidden; border-radius: 32px; }
.ip-carousel-track { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; width: max-content; will-change: transform; transition: transform .7s cubic-bezier(.4, 0, .2, 1); }
.ip-carousel-item {
    flex: 0 0 auto; height: 77%; aspect-ratio: 560 / 1218;
    border-radius: 26px; overflow: hidden; background: #000;
    transform: scale(1); opacity: .5;
    box-shadow: 0 22px 48px rgba(30, 30, 60, 0.22);
    transition: transform .7s cubic-bezier(.4, 0, .2, 1), opacity .7s cubic-bezier(.4, 0, .2, 1);
}
.ip-carousel-item.focus { transform: scale(1.13); opacity: 1; }
.ip-carousel-item video, .ip-carousel-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ip-carousel.no-anim .ip-carousel-track, .ip-carousel.no-anim .ip-carousel-item { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .ip-carousel-track, .ip-carousel-item { transition: none !important; } }

.ip-figure { margin-top: 40px; }
.ip-figure img { width: 100%; height: auto; border-radius: 12px; }
.ip-figure + .ip-figure { margin-top: 24px; }
.ip-figure .ip-video { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; border-radius: 24px; }

/* Gallery: complete grid for posts / reels */
.ip-gallery { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ip-gallery img { width: 100%; height: auto; border-radius: 14px; display: block; }
@media (max-width: 700px) { .ip-gallery { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

/* ── Before / After compare (NEW) ────────────────────── */
.ip-compare-section { padding-top: 40px; padding-bottom: 40px; }
.ip-compare-title { font-family: 'Red Hat Display', sans-serif; font-size: var(--fs-sub); font-weight: 600; color: var(--ink); margin-bottom: 20px; }
.ip-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ip-compare-item { margin: 0; }
.ip-compare-tag { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey); margin-bottom: 10px; }
.ip-compare-item.after .ip-compare-tag { color: var(--purple); }
.ip-compare-item img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.ip-compare-section .ip-body { max-width: none; margin-top: 24px; }
@media (max-width: 700px) { .ip-compare { grid-template-columns: 1fr; gap: 16px; } }

/* ── Results / Impact (NEW) ──────────────────────────── */
.ip-results { background: var(--bg-soft); }
.ip-results-inner { max-width: var(--container); margin: 0 auto; padding: 80px var(--gutter); }
.ip-metrics { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 24px; margin-top: 8px; }
.ip-metric {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 32px;
}
.ip-metric .num { font-family: 'Fraunces', serif; font-weight: 700; font-size: 44px; line-height: 1.05; color: var(--purple); letter-spacing: -0.01em; }
.ip-metric .desc { font-size: 16px; line-height: 1.5; color: var(--muted); margin-top: 12px; }
.ip-quote {
    margin-top: 40px;
    border-left: 3px solid var(--purple);
    padding: 8px 0 8px 28px;
}
.ip-quote p { font-family: 'Fraunces', serif; font-style: italic; font-size: 26px; line-height: 1.4; color: var(--ink); }
.ip-quote .author { font-family: 'Red Hat Display', sans-serif; font-style: normal; font-size: 15px; color: var(--muted); margin-top: 14px; }

/* ── Project nav (prev / next) ───────────────────────── */
.project-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    max-width: var(--container);
    margin: 0 auto;
    padding: 64px var(--gutter);
    border-top: 1px solid var(--line);
}
.project-nav-item { text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: 20px; }
/* prev: text then thumb (thumb toward centre) */
.project-nav-item .project-nav-text { order: 1; }
.project-nav-item .thumb { order: 2; }
/* next: thumb then text (thumb toward centre), pushed right */
.project-nav-item.next { justify-content: flex-end; }
.project-nav-item.next .thumb { order: 1; }
.project-nav-item.next .project-nav-text { order: 2; text-align: right; }
.project-nav-item .thumb {
    width: 112px; height: 76px; flex-shrink: 0; object-fit: cover;
    border-radius: 10px; background: var(--bg-soft); display: block;
    transition: transform .3s cubic-bezier(.25,1,.5,1), box-shadow .3s ease;
}
.project-nav-item:hover .thumb { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(13,13,13,.14); }
.project-nav-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey); margin-bottom: 6px; }
.project-nav-title { font-size: 22px; font-weight: 600; color: var(--ink); transition: color .25s; }
.project-nav-item:hover .project-nav-title { color: var(--purple); }

/* Footer is provided by the shared site-footer.js module (self-styled). */

/* ════════════════════════════════════════════════════════════
   DESIGN-SYSTEM REFINEMENTS  ·  proportions / weights / colours pulled
   from the monday.com Figma (kept at the site's existing type scale).
   ════════════════════════════════════════════════════════════ */
.ip-subtitle { color: var(--ink); opacity: 0.5; letter-spacing: -0.02em; max-width: 900px; }
.ip-meta { gap: 32px; }
.ip-meta .label { color: #989898; font-weight: 600; letter-spacing: 0.01em; }
.ip-meta .value { line-height: 1.5; letter-spacing: 0.01em; }
.ip-overview p { line-height: 1.6; letter-spacing: 0.01em; }
.ip-overview p + p { margin-top: 20px; }

/* Milestone tag pill */
.ip-tag {
    display: inline-block;
    background: rgba(88, 102, 227, 0.2);
    color: var(--purple);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.55;
    letter-spacing: 0.02em;
    padding: 3px 16px;
    border-radius: 80px;
    margin-bottom: 14px;
}
/* Milestone heading: Red Hat semibold with a faded italic 2nd clause */
.ip-heading--milestone {
    font-family: 'Red Hat Display', sans-serif;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.ip-heading-italic { font-style: italic; font-weight: 600; color: rgba(13, 13, 13, 0.5); }

/* Wide screen mockups & videos inside sections */
.ip-figure.wide { max-width: none; }
.ip-figure-media { width: 100%; height: auto; border-radius: 12px; display: block; }
.ip-caption {
    margin: 16px auto 0;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--grey);
    max-width: 820px;
    text-align: center;
}

/* Staged hero: coloured stage + white ellipse + inset board (monday.com) */
.ip-hero-stage { position: relative; width: 100%; aspect-ratio: 1920 / 1080; overflow: hidden; }
.ip-hero-ellipse {
    position: absolute;
    left: -9.58%; top: -37.64%; width: 134.84%; height: 119.86%;
    background: center / 100% 100% no-repeat;
    pointer-events: none;
}
.ip-hero-board {
    position: absolute;
    left: 50%; top: calc(50% + 5.46%);
    transform: translate(-50%, -50%);
    width: 80.21%;
    aspect-ratio: 1540 / 1196;
}
.ip-hero-board img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* Screen-mockup figure with soft drop shadow (used as a subtle mask/lift) */
.ip-figure--shadow .ip-figure-media,
.ip-figure--shadow img { box-shadow: 0 30px 70px rgba(20, 40, 80, 0.16); border-radius: 14px; }

/* Strip: full-bleed or contained band (backplate image) + video overlaid on its front card */
.ip-strip { max-width: var(--container); margin: 0 auto; padding: 40px var(--gutter); }
.ip-strip.full { max-width: none; padding-left: 0; padding-right: 0; }
.ip-strip-band { position: relative; width: 100%; overflow: hidden; }
.ip-strip-base { width: 100%; height: 100%; display: block; }
.ip-strip-overlay { position: absolute; transform: translate(-50%, -50%); overflow: hidden; }
.ip-strip-overlay video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ip-overlay-whitetop { position: absolute; top: 0; left: 0; right: 0; background: #fff; z-index: 2; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1100px) {
    .ip-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    :root { --gutter: 24px; --fs-title: 40px; --fs-heading: 30px; --fs-subtitle: 20px; --fs-sub: 19px; --fs-body: 16px; }
    .ip-section { padding: 48px var(--gutter); }
    .ip-glance { grid-template-columns: 1fr; gap: 36px; }
    .ip-metrics { grid-template-columns: 1fr; }
    .ip-results-inner { padding: 56px var(--gutter); }
    .ip-nav ul { gap: 18px; }
    .ip-nav .logo-tag { display: none; }
    .ip-nav a.nav-link { font-size: 13px; }
    .ip-quote p { font-size: 22px; }

    /* Project nav → single column, both [thumb][text] left-aligned */
    .project-nav { grid-template-columns: 1fr; gap: 24px; padding: 48px var(--gutter); }
    .project-nav-item, .project-nav-item.next { justify-content: flex-start; }
    .project-nav-item .thumb, .project-nav-item.next .thumb { order: 1; }
    .project-nav-item .project-nav-text, .project-nav-item.next .project-nav-text { order: 2; text-align: left; }
    .project-nav-title { font-size: 20px; }
}
@media (max-width: 540px) {
    .ip-meta { grid-template-columns: 1fr; }
}