@property --ring-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* AdServer case study */
.adserver-page { --adserver-blue: #2482fd; --adserver-blue-soft: #69adff; }
.adserver-page .case-facts span { color: var(--adserver-blue); }
.adserver-page .case-study h2 { font-family: "Inter", "Open Sans", sans-serif; }
.adserver-hero { padding-top: 86px; padding-bottom: 118px; }
.adserver-hero h1 { width: min(870px, calc(100% - 130px)); margin-bottom: 28px; font-family: "Inter", "Open Sans", sans-serif; font-size: 36px; line-height: 1.35; }
.adserver-title-accent { background: linear-gradient(90deg, #8dc6ff 0%, #2482fd 30%, #72b5ff 56%, #2482fd 78%, #a5d3ff 100%); background-size: 230% 100%; background-clip: text; -webkit-background-clip: text; color: transparent !important; animation: adserver-title-shimmer 4.8s linear infinite, adserver-title-glow 2.5s ease-in-out infinite alternate; }
.adserver-hero-visual { width: min(100%, 1135px); aspect-ratio: 1135 / 413; margin: 0 auto; position: relative; isolation: isolate; display: grid; place-items: center; }
.adserver-hero-visual::before { content: ""; position: absolute; z-index: -2; left: 50%; top: 52%; width: 70%; height: 52%; border-radius: 50%; background: radial-gradient(ellipse, rgba(36,130,253,.29), rgba(36,130,253,.08) 48%, transparent 72%); filter: blur(28px); transform: translate(-50%,-50%); animation: adserver-hero-pulse 3.2s ease-in-out infinite alternate; }
.adserver-hero-visual img { width: 100%; position: relative; z-index: 2; filter: drop-shadow(0 28px 34px rgba(0,0,0,.42)); animation: adserver-device-float 5.5s ease-in-out infinite; }
.adserver-orbit { position: absolute; z-index: -1; border: 1px solid rgba(91,169,255,.2); border-radius: 50%; animation: adserver-orbit 12s linear infinite; }
.adserver-orbit::after { content: ""; width: 7px; height: 7px; position: absolute; left: 17%; top: 7%; border-radius: 50%; background: #7fbcff; box-shadow: 0 0 17px #2482fd; }
.orbit-one { width: 77%; height: 88%; }
.orbit-two { width: 58%; height: 69%; animation-direction: reverse; animation-duration: 9s; }
.adserver-hero .project-scroll-cue { bottom: 38px; border-color: rgba(36,130,253,.5); box-shadow: 0 0 18px rgba(36,130,253,.12); }
@keyframes adserver-title-shimmer { to { background-position: 230% center; } }
@keyframes adserver-title-glow { from { filter: drop-shadow(0 0 2px rgba(36,130,253,.22)); } to { filter: drop-shadow(0 0 11px rgba(36,130,253,.62)); } }
@keyframes adserver-hero-pulse { from { opacity: .55; transform: translate(-50%,-50%) scale(.94); } to { opacity: 1; transform: translate(-50%,-50%) scale(1.06); } }
@keyframes adserver-device-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes adserver-orbit { to { transform: rotate(360deg); } }

.adserver-page .case-copy ul { margin: 14px 0 0; padding-left: 20px; }
.adserver-page .case-copy li + li { margin-top: 6px; }
.adserver-eyebrow { margin: 0 0 12px !important; color: var(--adserver-blue-soft) !important; font-size: 12px !important; line-height: 1.4 !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.adserver-problem { padding: 112px 0; position: relative; overflow: hidden; background: radial-gradient(circle at 78% 10%, rgba(36,130,253,.18), transparent 34%), linear-gradient(145deg, #151a24, #0b0c0f 72%); }
.adserver-problem::after { content: ""; width: 500px; height: 500px; position: absolute; right: -260px; bottom: -360px; border: 1px solid rgba(36,130,253,.22); border-radius: 50%; box-shadow: 0 0 0 50px rgba(36,130,253,.025), 0 0 0 100px rgba(36,130,253,.018); }
.adserver-problem-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 90px; align-items: start; }
.adserver-problem h2 { margin-bottom: 0; font-size: 32px; }
.adserver-problem-copy > p { margin: 0 0 30px; color: #d9d9dc; }
.adserver-problem-copy article { display: grid; grid-template-columns: 55px 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid rgba(255,255,255,.12); }
.adserver-problem-copy article:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.adserver-problem-copy article > span { color: var(--adserver-blue); font: 600 12px/1.4 "Inter", sans-serif; }
.adserver-problem-copy h3 { margin: 0 0 7px; color: #fff; font-size: 19px; }
.adserver-problem-copy article p { margin: 0; color: #aeb0b6; }
.adserver-wide-visual { margin-top: 108px; margin-bottom: 15px; }
.adserver-wide-visual img { width: 100%; filter: drop-shadow(0 24px 50px rgba(0,0,0,.45)); }

.adserver-discovery { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(300px,.72fr); gap: 92px; align-items: center; }
.adserver-discovery-copy h3 { margin: 36px 0 10px; color: #fff; font-size: 18px; }
.adserver-discovery-copy p { margin: 0 0 20px; }
.adserver-insight-image { margin: 0; position: relative; border-radius: 26px; overflow: hidden; background: #101217; box-shadow: 0 28px 70px rgba(0,0,0,.35); }
.adserver-insight-image::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(80,157,255,.26); border-radius: inherit; pointer-events: none; }
.adserver-insight-image img { width: 100%; }
.adserver-key-insight { padding-top: 20px; }
.adserver-key-insight > div { width: min(760px,100%); margin: 0 auto 54px; text-align: center; }
.adserver-key-insight h2 { margin-bottom: 20px; font-size: 32px; }
.adserver-key-insight strong { color: #fff; }
.adserver-key-insight > img { width: min(951px,100%); margin: 0 auto; border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.42); }

.adserver-solution-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.adserver-solution-grid article, .adserver-reflection-grid article, .adserver-next-grid article { position: relative; overflow: hidden; border: 1px solid #30343c; border-radius: 24px; background: linear-gradient(150deg, #15171c, #0e0f12); transition: transform .32s ease, border-color .32s ease, box-shadow .32s ease; }
.adserver-solution-grid article { min-height: 280px; padding: 34px; }
.adserver-solution-grid article::before, .adserver-reflection-grid article::before, .adserver-next-grid article::before { content: ""; position: absolute; top: -100px; right: -100px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(36,130,253,.2), transparent 70%); opacity: .65; transition: opacity .3s ease, transform .45s ease; }
.adserver-solution-grid article:hover, .adserver-reflection-grid article:hover, .adserver-next-grid article:hover { transform: translateY(-6px); border-color: rgba(36,130,253,.7); box-shadow: 0 0 0 1px rgba(36,130,253,.2), 0 0 30px rgba(36,130,253,.17), 0 22px 46px rgba(0,0,0,.38); }
.adserver-solution-grid article:hover::before, .adserver-reflection-grid article:hover::before, .adserver-next-grid article:hover::before { opacity: 1; transform: scale(1.18); }
.adserver-solution-grid span, .adserver-reflection-grid span { color: var(--adserver-blue); font-size: 12px; }
.adserver-solution-grid h3 { margin: 64px 0 16px; font-size: 22px; }
.adserver-solution-grid h3 small { display: block; margin-top: 7px; color: #7e8087; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.adserver-solution-grid p { margin: 0; }

.adserver-showcase { padding-block: 118px; overflow: hidden; }
.adserver-showcase + .adserver-showcase { padding-top: 15px; }
.adserver-showcase-heading { display: grid; grid-template-columns: .75fr 1.25fr; column-gap: 80px; margin-bottom: 34px; }
.adserver-showcase-heading .adserver-eyebrow { grid-column: 1 / -1; }
.adserver-showcase-heading h2 { font-size: 28px; }
.adserver-showcase-heading > p:last-child { margin: 0; }
.adserver-page .adserver-public-rail { gap: 22px; padding: 63px 20px; border-radius: 24px; background: #1b1b1b; }
.adserver-web-mockup { width: min(82vw, 780px); aspect-ratio: 780 / 474; flex: 0 0 min(82vw, 780px); margin: 0; position: relative; overflow: visible; scroll-snap-align: start; filter: drop-shadow(0 18px 26px rgba(0,0,0,.28)); }
.adserver-web-screen { position: absolute; z-index: 1; inset: 1.69% 1.03%; overflow: hidden; border-radius: 10px; background: #e9ebea; }
.adserver-web-screen img { width: 100%; height: var(--screen-height); max-width: none; position: absolute; left: 0; top: 0; object-fit: fill; pointer-events: none; }
.adserver-web-case, .adserver-web-frame { position: absolute; display: block; max-width: none; pointer-events: none; }
.adserver-web-case { z-index: 2; left: -.26%; top: -.42%; width: 100.52%; height: 100.84%; }
.adserver-web-frame { z-index: 3; inset: 0; width: 100%; height: 100%; }

.adserver-reflection-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.adserver-reflection-grid article { min-height: 260px; padding: 30px; }
.adserver-reflection-grid p { margin: 58px 0 0; }
.adserver-reflection-grid-two { grid-template-columns: repeat(2,1fr); }
.adserver-reflection-grid-two article { min-height: 230px; }
.adserver-lede { width: min(800px,100%); margin: -8px 0 44px; color: #dedee0 !important; font-size: 20px !important; }
.adserver-lede strong { color: var(--adserver-blue-soft); }
.adserver-page .adserver-mockup-pair { width: min(calc(100% - 30px),960px); display: grid; grid-template-columns: minmax(0,1fr); gap: 64px; padding-bottom: 120px; }
.adserver-mockup-pair img { width: 100%; height: auto; aspect-ratio: 960 / 650; display: block; border-radius: 18px; object-fit: contain; }

.adserver-challenges { padding: 112px 0; background: linear-gradient(130deg, #11151c, #08090c 74%); }
.adserver-challenges-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 74px; align-items: center; }
.adserver-challenges h3 { margin: 30px 0 8px; font-size: 18px; }
.adserver-challenges p { margin: 0 0 18px; color: #b7b9bf; }
.adserver-challenges ul { margin: 0 0 18px; padding-left: 20px; color: #b7b9bf; }
.adserver-challenges-art { width: min(374px,100%) !important; justify-self: end; filter: drop-shadow(0 25px 42px rgba(0,0,0,.48)); }
.adserver-enable { display: grid; grid-template-columns: .7fr 1.3fr; gap: 90px; align-items: start; }
.adserver-enable > p { margin: 0; font-size: 19px; }
.adserver-next-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.adserver-next-grid article { padding: 36px; }
.adserver-next-grid h3 { margin: 0 0 24px; font-size: 20px; }
.adserver-next-grid ul { margin: 0; padding-left: 20px; }
.adserver-next-grid li + li { margin-top: 12px; }
.adserver-lessons { display: grid; grid-template-columns: .65fr 1.35fr; gap: 96px; border-top: 1px solid #28282d; }
.adserver-lessons p { margin: 0 0 20px; }
.adserver-lessons strong { color: #fff; }
.adserver-page .case-button { background: var(--adserver-blue); box-shadow: 0 12px 34px rgba(36,130,253,.22); }
.adserver-page .case-button:hover, .adserver-page .case-button:focus-visible { background: #4392fa; box-shadow: 0 17px 40px rgba(36,130,253,.36); }

@media (max-width: 900px) {
  .adserver-problem-grid, .adserver-discovery, .adserver-showcase-heading, .adserver-challenges-grid, .adserver-enable, .adserver-lessons { grid-template-columns: 1fr; gap: 44px; }
  .adserver-discovery { align-items: start; }
  .adserver-insight-image { width: min(440px,100%); margin-inline: auto; }
  .adserver-reflection-grid { grid-template-columns: 1fr; }
  .adserver-reflection-grid-two, .adserver-solution-grid, .adserver-next-grid { grid-template-columns: 1fr 1fr; }
  .adserver-challenges-art { justify-self: center; margin: 0 auto; }
}

@media (max-width: 680px) {
  .adserver-hero { padding-top: 46px; padding-bottom: 92px; }
  .adserver-hero h1 { width: 100%; margin: 0 0 34px; text-align: left; font-size: 30px; line-height: 1.34; }
  .adserver-hero-visual { width: calc(100% + 30px); margin-left: -15px; }
  .adserver-hero .project-scroll-cue { bottom: 28px; }
  .adserver-orbit { display: none; }
  .adserver-problem, .adserver-challenges { padding-block: 78px; }
  .adserver-problem-grid, .adserver-discovery, .adserver-showcase-heading, .adserver-challenges-grid, .adserver-enable, .adserver-lessons { gap: 34px; }
  .adserver-problem-copy article { grid-template-columns: 38px 1fr; gap: 12px; }
  .adserver-wide-visual { width: calc(100% - 28px); margin-top: 72px; }
  .adserver-key-insight h2 { font-size: 27px; }
  .adserver-solution-grid, .adserver-next-grid, .adserver-reflection-grid-two { grid-template-columns: 1fr; }
  .adserver-solution-grid article { min-height: 235px; }
  .adserver-showcase { padding-block: 82px; }
  .adserver-showcase-heading h2 { font-size: 24px; }
  .adserver-page .adserver-public-rail { padding: 28px 20px; border-radius: 18px; }
  .adserver-web-mockup { width: 86vw; flex-basis: 86vw; }
  .adserver-reflection-grid article { min-height: 0; }
  .adserver-mockup-pair { gap: 34px; padding-bottom: 78px; }
  .adserver-mockup-pair img { border-radius: 10px; }
  .adserver-next-grid article { padding: 28px 24px; }
  .adserver-lessons { padding-top: 82px; }
}

/* Branded 404 page */
.error-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 76% 18%, rgba(71,215,255,.12), transparent 32%),
    radial-gradient(circle at 16% 84%, rgba(255,138,61,.09), transparent 30%),
    var(--bg);
}
.error-page .site-header { position: relative; }
.error-page .site-header::before { display: none; }
.error-brand { margin-left: 0; }
.error-main { min-height: calc(100vh - 140px); padding: clamp(42px,8vh,96px) 0 100px; position: relative; display: flex; flex-direction: column; justify-content: center; }
.error-code { position: absolute; top: 50%; right: 0; translate: 0 -50%; color: rgba(255,255,255,.035); font-size: clamp(190px,32vw,460px); font-weight: 700; line-height: .8; letter-spacing: -.08em; pointer-events: none; user-select: none; }
.error-kicker { margin: 0 0 22px; color: #47d7ff; font-size: 12px; font-weight: 700; letter-spacing: .19em; }
.error-main h1 { max-width: 760px; margin: 0 0 24px; position: relative; font-size: clamp(48px,7vw,88px); line-height: 1.04; letter-spacing: -.045em; }
.error-main h1 span { background: linear-gradient(90deg,#ff8a3d,#47d7ff); background-clip: text; -webkit-background-clip: text; color: transparent; }
.error-main > p:not(.error-kicker) { max-width: 620px; margin: 0; position: relative; color: var(--muted); font-size: 18px; line-height: 1.75; }
.error-actions { margin-top: 42px; position: relative; display: flex; align-items: center; gap: 28px; }
.error-secondary { padding: 12px 2px; border-bottom: 1px solid rgba(255,255,255,.4); font-weight: 600; }
.error-secondary:hover, .error-secondary:focus-visible { border-color: #47d7ff; color: #47d7ff; }
@media (max-width: 680px) {
  .error-page .site-header { height: 104px; }
  .error-main { min-height: calc(100vh - 104px); padding: 42px 0 80px; }
  .error-code { top: 22%; right: -8px; font-size: 52vw; }
  .error-main h1 { font-size: clamp(44px,14vw,68px); }
  .error-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
}

:root {
  --bg: #050507;
  --panel: #1a1a1c;
  --panel-hover: #202024;
  --ink: #fff;
  --muted: #b9b9bd;
  --dim: #777;
  --blue: #2a64ec;
  --red: #e00000;
  --radius: 24px;
  --shell: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.shell { width: min(calc(100% - 48px), var(--shell)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; background: #fff; color: #000; transition: top .2s; }
.skip-link:focus { top: 16px; }

.site-header { height: 140px; display: flex; align-items: center; gap: 58px; position: sticky; top: 0; z-index: 40; isolation: isolate; }
.site-header::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: rgba(5,5,7,.86); border-bottom: 1px solid rgba(255,255,255,.07); box-shadow: 0 14px 36px rgba(0,0,0,.18); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
.menu-button { width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: transform .25s ease, filter .25s ease; }
.menu-button:hover { transform: rotate(8deg) scale(1.04); filter: brightness(1.25); }
.menu-button img { width: 100%; height: 100%; }
.brand { width: 142px; }
.brand img { width: 100%; }
.desktop-nav { margin-left: auto; display: flex; align-items: center; gap: 44px; font-size: 16px; font-weight: 600; }
.desktop-nav a, .desktop-projects-trigger { position: relative; padding: 10px 0; }
.desktop-projects-trigger { border: 0; background: transparent; color: inherit; font-weight: inherit; cursor: pointer; }
.desktop-nav a::after, .desktop-projects-trigger::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 4px; height: 1px; background: #fff; transition: right .25s ease; }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after, .desktop-projects-trigger:hover::after, .desktop-projects-trigger:focus-visible::after { right: 0; }
.desktop-nav a[aria-current="page"]::after { right: 0; }
.underlined { text-decoration: none; }

.menu-panel { position: fixed; inset: 0; z-index: 50; width: 100%; height: 100dvh; overflow-y: auto; background: var(--bg); transform: translateY(-105%); visibility: hidden; transition: transform .7s cubic-bezier(.22,.8,.2,1), visibility 0s linear .7s; }
.menu-panel.open { transform: translateY(0); visibility: visible; transition-delay: 0s; }
.menu-layout { width: min(calc(100% - 48px), 1120px); min-height: 100%; margin-inline: auto; padding: 41px 0 58px; display: grid; grid-template-columns: 72px 1fr; grid-template-rows: 58px auto 1fr auto; column-gap: 46px; position: relative; }
.menu-brand-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 60px; }
.menu-circle { width: 58px; height: 58px; flex: 0 0 58px; border: 0; border-radius: 50%; display: grid; place-items: center; background: #202024; color: #fff; cursor: pointer; font-weight: 300; transition: background .2s ease, transform .2s ease; }
.menu-circle:hover { background: #2a2a30; transform: scale(1.05); }
.menu-close { font-size: 36px; line-height: 1; }
.menu-back { grid-column: 1; grid-row: 2; margin-top: 23px; font-size: 26px; }
.menu-logo { width: 142px; }
.menu-logo img { width: 100%; }
.menu-primary { grid-column: 2; grid-row: 2; margin-top: 51px; align-self: start; display: grid; justify-items: start; }
.menu-primary p { margin: 0 0 22px; font-size: 17px; }
.menu-primary a, .menu-projects-trigger { color: #777; font-size: clamp(50px, 5vw, 70px); line-height: 1.35; font-weight: 700; letter-spacing: -.035em; transition: color .22s ease, transform .22s ease; }
.menu-projects-trigger { padding: 0; border: 0; background: transparent; cursor: pointer; }
.menu-primary a:hover, .menu-primary a:focus-visible, .menu-projects-trigger:hover, .menu-projects-trigger:focus-visible { color: #fff; transform: translateX(8px); }
.menu-primary .menu-talk { text-decoration: underline; text-underline-offset: 8px; }
.menu-projects { grid-column: 2; grid-row: 3; align-self: end; margin: 70px 0 24px; }
.menu-projects h2 { margin: 0 0 24px; color: #d8d8d8; font-size: 24px; line-height: 1.35; font-weight: 400; }
.menu-project-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 42px; row-gap: 20px; }
.menu-project-grid a { display: flex; align-items: center; justify-content: flex-start; gap: 14px; color: #9c9ca0; font-size: 14px; line-height: 1.35; transition: color .2s ease, transform .2s ease; }
.menu-project-grid a:hover, .menu-project-grid a:focus-visible { color: #fff; transform: translateX(5px); }
.menu-project-grid span { color: #fff; font-size: 20px; line-height: 1; }
.menu-resume { grid-column: 2; grid-row: 4; justify-self: end; margin-top: 18px; padding: 10px 0; font-size: 16px; font-weight: 600; }
.menu-resume:hover { text-decoration: underline; text-underline-offset: 4px; }
.menu-brand-row, .menu-back, .menu-primary, .menu-projects, .menu-resume { opacity: 0; transform: translateY(-18px); transition: opacity .42s ease, transform .55s cubic-bezier(.22,.8,.2,1); }
.menu-panel.open .menu-brand-row, .menu-panel.open .menu-back, .menu-panel.open .menu-primary, .menu-panel.open .menu-projects, .menu-panel.open .menu-resume { opacity: 1; transform: translateY(0); }
.menu-panel.open .menu-brand-row { transition-delay: .16s; }
.menu-panel.open .menu-back, .menu-panel.open .menu-primary { transition-delay: .23s; }
.menu-panel.open .menu-projects { transition-delay: .31s; }
.menu-panel.open .menu-resume { transition-delay: .38s; }

.projects-dropdown-layer { position: fixed; inset: 0; z-index: 80; display: grid; place-items: start center; padding: 24px; overflow-y: auto; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .28s ease, visibility 0s linear .28s; }
.projects-dropdown-layer.open { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
.projects-dropdown-scrim { position: fixed; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(0,0,0,.78); backdrop-filter: blur(12px); cursor: default; }
.projects-dropdown { width: min(1158px, 100%); min-height: 466px; margin-block: auto; padding: 25px 31px 18px; overflow: hidden; position: relative; border: 1px solid #2e2e33; border-radius: 16px; background: #09090b; box-shadow: 0 30px 90px rgba(0,0,0,.62); transform: translateY(-24px) scale(.985); transition: transform .45s cubic-bezier(.22,.8,.2,1); }
.projects-dropdown-layer.open .projects-dropdown { transform: translateY(0) scale(1); }
.projects-dropdown-accent { position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: linear-gradient(90deg, #2a64ec 0%, #6c4096 43%, #e00000 100%); }
.projects-dropdown-header { min-height: 72px; display: grid; grid-template-columns: 1fr auto 40px; align-items: center; gap: 25px; }
.projects-dropdown-header div { align-self: start; }
.projects-dropdown-header p { margin: 0; color: #a7a7b2; font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.projects-dropdown-header h2 { margin: 6px 0 0; color: #fff; font-size: 28px; line-height: 41px; letter-spacing: -.02em; }
.projects-dropdown-header > span { color: #a7a7b2; font-size: 13px; }
.projects-dropdown-close { width: 40px; height: 40px; padding: 0 0 3px; border: 0; border-radius: 50%; display: grid; place-items: center; background: #202027; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.projects-dropdown-close:hover, .projects-dropdown-close:focus-visible { background: #32323b; transform: rotate(8deg); }
.projects-dropdown-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.projects-dropdown-card { min-width: 0; height: 274px; overflow: hidden; display: grid; grid-template-rows: 124px 1fr; position: relative; border: 1px solid #2c2c35; border-radius: 10px; background: #15151b; color: #fff; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
a.projects-dropdown-card:hover, a.projects-dropdown-card:focus-visible { border-color: #626271; transform: translateY(-5px); box-shadow: 0 15px 34px rgba(0,0,0,.38); }
.projects-dropdown-card > img { width: 100%; height: 124px; object-fit: cover; }
.projects-dropdown-card > div { min-height: 148px; padding: 10px 13px 13px; position: relative; }
.projects-dropdown-card small { display: block; color: #a7a7b2; font-size: 9px; line-height: 13px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.projects-dropdown-card h3 { margin: 2px 0 1px; color: #fff; font-size: 17px; line-height: 25px; letter-spacing: -.01em; }
.projects-dropdown-card p { margin: 0; color: #bcbcc7; font-size: 12px; line-height: 17px; }
.projects-dropdown-card strong { position: absolute; left: 13px; right: 13px; bottom: 12px; color: #e4e4ed; font-size: 11px; line-height: 16px; }
.projects-dropdown-card.coming-soon { cursor: default; }
.projects-dropdown-card.coming-soon strong { color: #b8b8c3; }
.projects-dropdown-footer { min-height: 24px; margin-top: 20px; display: flex; align-items: start; justify-content: space-between; color: #a7a7b2; font-size: 12px; line-height: 17px; }
.projects-dropdown-footer p { margin: 0; }
.projects-dropdown-footer span { font-size: 11px; line-height: 16px; }

@media (max-width: 900px) {
  .projects-dropdown-layer { padding: 16px; }
  .projects-dropdown { padding: 22px 22px 18px; }
  .projects-dropdown-grid { grid-template-columns: repeat(5, 206px); overflow-x: auto; padding: 4px 2px 18px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .projects-dropdown-grid::-webkit-scrollbar { display: none; }
  .projects-dropdown-card { scroll-snap-align: start; }
}

@media (max-width: 560px) {
  .projects-dropdown-layer { padding: 10px; }
  .projects-dropdown { min-height: calc(100dvh - 20px); padding: 20px 16px 16px; border-radius: 14px; }
  .projects-dropdown-header { grid-template-columns: 1fr auto; gap: 14px; }
  .projects-dropdown-header h2 { font-size: 24px; line-height: 34px; }
  .projects-dropdown-header > span { display: none; }
  .projects-dropdown-close { grid-column: 2; grid-row: 1; }
  .projects-dropdown-grid { margin-top: 18px; grid-template-columns: repeat(5, min(76vw, 250px)); }
  .projects-dropdown-footer { margin-top: 12px; }
  .projects-dropdown-footer span { display: none; }
}

.hero { min-height: 685px; display: grid; grid-template-columns: 1fr .92fr; align-content: center; column-gap: 70px; position: relative; padding-block: 80px 145px; }
.hero-copy { align-self: center; max-width: 520px; }
.eyebrow { margin: 0 0 6px; font-size: 18px; line-height: 2; }
.hero h1 { margin: 0; max-width: 520px; font-size: clamp(38px, 4.1vw, 58px); line-height: 1.22; letter-spacing: -.035em; }
.hero h1 span { background: linear-gradient(90deg, #2a64ec 0%, #8a46c6 26%, #e00050 48%, #8a46c6 72%, #2a64ec 100%); background-size: 280% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: shipping-gradient 5.5s linear infinite, shipping-glow 2.8s ease-in-out infinite alternate; }
.hero-intro { max-width: 435px; margin: 22px 0 0; color: #ededf0; font-size: 18px; line-height: 1.55; }
.stats { display: flex; gap: 32px; margin-top: 44px; }
.stat { min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; background: rgba(255,255,255,.07); }
.stat strong { color: #d9d9d9; font-size: 64px; line-height: 1; font-weight: 400; }
.counter { min-width: 108px; font-variant-numeric: tabular-nums; }
.stat span { color: #d8d8d8; font-size: 14px; line-height: 1.25; }
.portrait-wrap { width: min(100%, 430px); aspect-ratio: 1; justify-self: end; align-self: center; position: relative; }
.portrait-ring { --ring-angle: 0deg; position: absolute; inset: 0; z-index: 0; isolation: isolate; padding: 23px; border: 2px solid transparent; border-radius: 50%; background: linear-gradient(var(--bg), var(--bg)) padding-box, conic-gradient(from var(--ring-angle), #2a64ec 0%, #8a46c6 28%, #e00050 52%, #ff334d 68%, #6c4096 84%, #2a64ec 100%) border-box; animation: portrait-ring-travel 6s linear infinite, portrait-ring-glow 2.8s ease-in-out infinite alternate; }
.portrait-ring::before { content: ""; position: absolute; inset: -12px; z-index: -1; border-radius: inherit; background: conic-gradient(from 0deg, rgba(42,100,236,.7), rgba(138,70,198,.24) 24%, rgba(224,0,80,.72) 52%, rgba(255,51,77,.24) 74%, rgba(42,100,236,.7)); filter: blur(18px); opacity: .32; transform: scale(.97) rotate(0deg); animation: portrait-halo-spin 8s linear infinite, portrait-halo-breathe 2.8s ease-in-out infinite alternate; pointer-events: none; }
.portrait { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 48% 26%; }
.curved-arrow { position: absolute; left: -72px; top: 26%; width: 70px; transform-origin: 85% 78%; animation: curved-arrow-float 2.35s ease-in-out infinite; will-change: transform, filter; }
.tools-marquee { grid-column: 1 / -1; position: absolute; left: 50%; bottom: 24px; width: min(100%, 930px); padding: 40px 0 12px; overflow: hidden; transform: translateX(-50%); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
.tools-marquee[data-reveal] { transform: translate(-50%, 34px); }
.tools-marquee[data-reveal].visible { transform: translateX(-50%); }
.tools-rail { display: flex; width: max-content; animation: tools-scroll 34s linear infinite; will-change: transform; }
.tools-marquee:hover .tools-rail, .tools-marquee:focus-within .tools-rail { animation-play-state: paused; }
.tools-track { flex: none; display: flex; align-items: center; gap: 24px; margin: 0; padding: 0 24px 0 0; list-style: none; }
.tool { position: relative; width: 70px; height: 48px; flex: 0 0 70px; display: grid; place-items: center; border-left: 1px solid rgba(255,255,255,.08); outline: none; cursor: default; }
.tool img { width: 32px; height: 32px; object-fit: contain; transition: transform .25s ease, filter .25s ease; }
.tool > span:last-child { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 3; width: max-content; max-width: 160px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; background: #202024; color: #fff; font-size: 11px; line-height: 1.2; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, 7px); transition: opacity .2s ease, transform .2s ease; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.tool:hover img, .tool:focus img, .tool:hover .tool-fallback, .tool:focus .tool-fallback { transform: translateY(-5px) scale(1.12); filter: drop-shadow(0 8px 12px rgba(42,100,236,.3)); }
.tool:hover > span:last-child, .tool:focus > span:last-child { opacity: 1; transform: translate(-50%, 0); }
.tool:focus-visible { border-radius: 8px; box-shadow: 0 0 0 2px var(--blue); }
.tool-fallback { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: -.03em; transition: transform .25s ease, filter .25s ease; }
.tool-fallback.adobe { background: linear-gradient(135deg, #ff0048, #8500ff); }
.tool-fallback.chatgpt { border: 1px solid #74aa9c; background: #102a26; color: #a9e4d8; }
.tool-fallback.midjourney { border: 1px solid #606873; background: linear-gradient(145deg, #15202b, #050507); color: #dce8f5; }
@keyframes tools-scroll { to { transform: translateX(-50%); } }
@keyframes shipping-gradient { to { background-position: 140% 0; } }
@keyframes shipping-glow {
  from { filter: drop-shadow(0 0 3px rgba(42,100,236,.2)); }
  to { filter: drop-shadow(0 0 11px rgba(224,0,80,.52)); }
}
@keyframes portrait-ring-travel { to { --ring-angle: 360deg; } }
@keyframes portrait-ring-glow {
  from { box-shadow: 0 0 16px rgba(42,100,236,.24), 0 0 42px rgba(42,100,236,.08), inset 0 0 9px rgba(42,100,236,.12); }
  to { box-shadow: 0 0 36px rgba(224,0,80,.46), 0 0 72px rgba(138,70,198,.18), inset 0 0 17px rgba(138,70,198,.2); }
}
@keyframes portrait-halo-spin { to { transform: scale(.97) rotate(360deg); } }
@keyframes portrait-halo-breathe { from { opacity: .22; } to { opacity: .58; } }
@keyframes curved-arrow-float {
  0%, 100% { transform: translate3d(0,0,0) rotate(-1deg); filter: drop-shadow(0 0 0 rgba(138,70,198,0)); }
  50% { transform: translate3d(7px,6px,0) rotate(3deg); filter: drop-shadow(0 0 8px rgba(138,70,198,.55)); }
}

.projects-section { padding: 85px 0 120px; }
.section-heading { text-align: center; margin-bottom: 76px; }
.section-heading p { margin: 0 0 26px; color: #777; font-size: 36px; }
.section-heading h2 { width: min(690px, 100%); margin: 0 auto; color: #d5d5d7; font-size: 18px; line-height: 1.55; font-weight: 400; }
.project-list { display: grid; gap: 60px; }
.project-card { min-height: 410px; padding: 48px 56px; border-radius: var(--radius); overflow: hidden; display: grid; grid-template-columns: 1.2fr 1fr; gap: 70px; align-items: center; background: var(--panel); position: relative; isolation: isolate; transition: transform .35s ease, background .35s ease, box-shadow .35s ease; }
.project-card::before { content: ""; position: absolute; inset: auto -10% -80% 15%; height: 150%; z-index: -1; opacity: .17; background: repeating-radial-gradient(ellipse at center, transparent 0 13px, rgba(255,255,255,.16) 14px 15px, transparent 16px 26px); transform: rotate(-12deg); pointer-events: none; }
.project-card:hover { transform: translateY(-7px); background: var(--panel-hover); box-shadow: 0 24px 70px rgba(0,0,0,.32); }
.project-card.copy-first { grid-template-columns: 1fr 1.2fr; }
.project-copy { position: relative; z-index: 2; }
.project-copy h3 { margin: 0 0 20px; font-size: 25px; line-height: 1.25; }
.project-year, .project-hero-year { display: inline-flex; align-items: center; gap: 7px; margin-left: .55em; padding: 6px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.065); color: #c7c7cb !important; font-family: inherit; font-size: 12px !important; line-height: 1; font-weight: 600; letter-spacing: .08em; vertical-align: .22em; box-shadow: inset 0 1px rgba(255,255,255,.05); }
.project-year::before, .project-hero-year::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .8; }
.project-copy p { margin: 20px 0 28px; color: #e1e1e3; font-size: 15px; line-height: 1.55; }
.tags { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.tags li { padding: 5px 10px; border-radius: 2px; background: rgba(255,255,255,.07); color: #dcdce0; font-size: 12px; }
.case-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 20px; border-radius: 3px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 12px 34px rgba(42,100,236,.2); transition: transform .22s ease, background .22s ease, box-shadow .22s ease; }
.case-button span { font-size: 17px; transition: transform .22s ease; }
.case-button:not(.unavailable):hover, .case-button:not(.unavailable):focus-visible { transform: translateY(-3px); background: #3970f3; box-shadow: 0 17px 40px rgba(42,100,236,.32); }
.case-button:not(.unavailable):hover span, .case-button:not(.unavailable):focus-visible span { transform: translate(2px,-2px); }
.case-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.case-button.unavailable { min-height: 44px; padding-block: 10px; background: #3d3d42; color: #a8a8ad; box-shadow: none; cursor: default; opacity: .72; }
.project-media { min-width: 0; height: 305px; border-radius: 6px; overflow: hidden; display: grid; place-items: center; filter: drop-shadow(0 12px 22px rgba(0,0,0,.3)); }
.project-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.featured-media { position: relative; background: transparent; filter: none; }
.featured-media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center; }
.project-card:hover .project-media img { transform: scale(1.035); }
.screen-media { background: #08090c; padding: 16px; }
.screen-media img { object-fit: cover; object-position: top; border-radius: 4px; }
.screen-media.contain img { object-fit: contain; }
.phone-media { background: transparent; }
.phone-media img { width: 82%; object-fit: cover; object-position: top; transform: rotate(18deg) scale(.88); border-radius: 28px; }
.project-card:hover .phone-media img { transform: rotate(15deg) scale(.92); }
.transparent-media { overflow: visible; filter: none; }
.transparent-media img { object-fit: contain; }

.site-footer { border-top: 1px solid rgba(255,255,255,.04); padding: 80px 0 36px; background: #09090a; }
.footer-cta { margin: 0 0 72px; padding: 64px 7%; border: 1px solid #27272b; border-radius: 20px; overflow: hidden; position: relative; text-align: center; background: linear-gradient(145deg, #101012, #09090a 72%); isolation: isolate; }
.footer-cta::before { content: ""; position: absolute; left: 50%; top: -190px; z-index: -1; width: 520px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(42,100,236,.22), rgba(108,64,150,.12) 42%, transparent 72%); transform: translateX(-50%); filter: blur(8px); }
.footer-cta-label { margin: 0 0 17px; color: #9b9b9f; font-size: 13px; letter-spacing: .12em; }
.footer-cta h2 { margin: 0 auto 18px; max-width: 760px; text-align: center; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.15; letter-spacing: -.035em; font-weight: 700; }
.footer-cta h2 span { background: linear-gradient(90deg, #2a64ec, #6c4096 42%, #e00000); background-clip: text; -webkit-background-clip: text; color: transparent; }
.footer-cta > p:not(.footer-cta-label) { max-width: 590px; margin: 0 auto 30px; color: #b9b9bd; font-size: 16px; line-height: 1.65; }
.footer-cta-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 23px; border-radius: 3px; background: var(--blue); color: #fff; font-size: 15px; font-weight: 600; box-shadow: 0 12px 34px rgba(42,100,236,.2); transition: transform .22s ease, background .22s ease, box-shadow .22s ease; }
.footer-cta-button:hover, .footer-cta-button:focus-visible { transform: translateY(-3px); background: #3970f3; box-shadow: 0 17px 40px rgba(42,100,236,.32); }
.footer-cta-button span { font-size: 18px; transition: transform .22s ease; }
.footer-cta-button:hover span { transform: translate(2px,-2px); }

/* Let's Talk page */
.contact-page { min-height: 100vh; display: flex; flex-direction: column; }
.contact-main { flex: 1; padding-top: 38px; }
.contact-workspace { min-height: 650px; display: grid; grid-template-columns: 440px minmax(0, 560px); gap: 120px; align-items: start; }
.contact-intro { min-width: 0; }
.contact-kicker { margin: 0 0 20px; color: #9b9b9f; font-size: 14px; }
.contact-intro h1 { margin: 0; display: flex; gap: 16px; font-size: 64px; line-height: 1.19; letter-spacing: -.03em; }
.contact-intro h1 span { background: linear-gradient(90deg, #2a64ec, #6c4096 40%, #e00000); background-clip: text; -webkit-background-clip: text; color: transparent; }
.contact-lead { max-width: 410px; margin: 20px 0 0; color: #d8d8d8; font-size: 20px; line-height: 1.6; }
.contact-details { margin-top: 32px; display: grid; gap: 18px; color: #d8d8d8; }
.contact-details a, .contact-details span { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.contact-details img { width: 18px; height: 20px; object-fit: contain; }
.inquiry-panel { min-width: 0; }
.inquiry-heading h2 { margin: 0; font-size: 24px; line-height: 1.4; }
.inquiry-heading p { margin: 5px 0 0; color: #9b9b9f; font-size: 14px; line-height: 1.6; }
.contact-form { margin-top: 28px; display: grid; gap: 20px; }
.contact-form label { display: grid; gap: 9px; color: #d8d8d8; font-size: 13px; font-weight: 600; }
.contact-form label > span { color: #7698f4; }
.form-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; border: 1px solid #303036; border-radius: 5px; padding: 13px 14px; background: #111116; color: #fff; font: inherit; font-weight: 400; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.contact-form input, .contact-form select { min-height: 48px; }
.contact-form textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.contact-form input:hover, .contact-form select:hover, .contact-form textarea:hover { border-color: #484850; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 0; border-color: #3970f3; background: #13131a; box-shadow: 0 0 0 3px rgba(42,100,236,.18); }
.contact-form select { appearance: auto; }
.contact-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.contact-form-actions { display: flex; align-items: center; gap: 18px; }
.contact-form .footer-cta-button { border: 0; cursor: pointer; font-family: inherit; }
.contact-form .footer-cta-button:disabled { opacity: .62; cursor: wait; transform: none; }
.contact-form-status { margin: 0; color: #b9b9bd; font-size: 13px; line-height: 1.5; }
.contact-form-status.success { color: #77d7a7; }
.contact-form-status.error { color: #ff8585; }
.contact-footer { padding: 26px 0 0; border-top: 1px solid #27272b; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; color: #9b9b9f; font-size: 12px; }
.contact-footer p { margin: 0; }
.contact-footer strong { color: #d8d8d8; font-weight: 400; }
.contact-footer nav { display: flex; gap: 28px; color: #d8d8d8; font-size: 14px; font-style: italic; }
.contact-footer a { transition: color .2s ease; }
.contact-footer a:hover { color: #fff; }
.footer-contact-inline { display: flex; align-items: center; justify-content: center; gap: 22px; color: #d8d8d8; }
.footer-contact-inline a, .footer-contact-inline span { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.footer-contact-inline img { width: 16px; height: 16px; object-fit: contain; }

/* About page */
.about-page { background: #050507; }
.about-narrow { width: min(calc(100% - 48px), 934px); margin-inline: auto; }
.about-hero { min-height: 705px; padding: 44px 78px 80px; display: grid; grid-template-columns: 446px 1fr; align-items: center; gap: 68px; position: relative; }
.about-back { position: absolute; top: 0; left: 0; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: #202024; font-size: 24px; transform: rotate(90deg); transition: transform .25s ease, background .25s ease; }
.about-back:hover { background: #2b2b30; transform: rotate(90deg) translateY(-4px); }
.about-photo-wrap { height: 553px; position: relative; }
.about-photo-outline { position: absolute; left: 0; bottom: 5px; width: 409px; height: 519px; border: 2px solid #2a64ec; border-radius: 24px; }
.about-photo { position: absolute; top: 0; right: 0; width: 415px; height: 517px; border-radius: 24px; object-fit: cover; object-position: center; }
.designer-cursor { position: absolute; right: -86px; bottom: 0; display: flex; align-items: flex-start; gap: 2px; color: #2a64ec; }
.designer-cursor > span { font-size: 42px; line-height: 1; transform: rotate(-58deg); filter: drop-shadow(0 5px 10px rgba(42,100,236,.35)); }
.designer-cursor strong { margin-top: 32px; padding: 8px 16px; border-radius: 6px; background: #2a64ec; color: #070b0e; font-size: 14px; letter-spacing: .02em; }
.about-hero-copy { align-self: center; padding-left: 10px; }
.about-hero-copy h1 { margin: 0 0 30px; font-size: 48px; line-height: 1.5; font-weight: 400; }
.about-hero-copy h1 span { color: #2a64ec; }
.about-hero-copy p { max-width: 417px; margin: 0 0 18px; color: #d8d8d8; font-size: 18px; line-height: 1.55; }
.scroll-cue { position: absolute; left: 50%; bottom: 2px; width: 32px; height: 32px; display: grid; place-items: center; color: #777; font-size: 24px; animation: scroll-cue 1.7s ease-in-out infinite; }
@keyframes scroll-cue { 50% { transform: translateY(8px); color: #acc4fd; } }

.about-story { padding: 70px 0 58px; }
.about-story h2, .principles > h2 { margin: 0 0 24px; color: #979797; font-size: 36px; line-height: 1.5; font-weight: 400; }
.story-copy { color: #d8d8d8; font-size: 16px; line-height: 1.5; }
.story-copy p { margin: 0 0 18px; }
.story-copy strong { color: #fff; font-weight: 600; }
.story-copy em { color: #acc4fd; font-size: 24px; font-style: normal; }
.about-divider { height: 1px; background: #777; opacity: .6; }
.principles { padding: 66px 0 85px; }
.principles > h2 { text-align: center; color: #d8d8d8; }
.principle { min-height: 180px; display: grid; grid-template-columns: 190px 1fr; align-items: start; gap: 65px; margin-top: 30px; }
.principle + .principle { margin-top: 70px; }
.principle img { width: 190px; height: 150px; object-fit: contain; }
.principle h3 { margin: 0 0 14px; color: #d8d8d8; font-size: 24px; font-weight: 400; }
.principle p { margin: 0; color: #d8d8d8; font-size: 16px; line-height: 1.6; }
.principle p strong { display: block; margin-top: 9px; color: #fff; font-size: 22px; font-weight: 400; }

.systems-section { padding: 35px 0 105px; }
.systems-intro { width: min(688px, 100%); margin: 0 auto 45px; text-align: center; }
.systems-intro h2 { margin: 0 0 28px; color: #d8d8d8; font-size: 32px; line-height: 1.25; font-weight: 400; }
.systems-intro p { width: min(576px, 100%); margin: 0 auto 12px; color: #ebedf0; font-size: 16px; line-height: 1.5; }
.component-board { width: min(866px, 100%); margin: auto; padding: 26px 32px 22px; }
.board-head, .board-row { display: grid; grid-template-columns: 112px repeat(3, minmax(0, 1fr)); align-items: center; gap: 24px; min-height: 48px; color: #999; font-size: 14px; }
.board-head { min-height: 38px; }
.board-row > span { text-align: right; }
.control-cluster { min-width: 0; display: flex; align-items: center; gap: clamp(10px, 1.5vw, 24px); }
.ds-control { height: 28px; padding: 4px 12px; border: 0; border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #fff; cursor: pointer; font-size: 14px; line-height: 20px; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease; }
.body-control { min-width: 75px; }
.caption-control { min-width: 60px; height: 24px; padding: 4px 8px; font-size: 12px; line-height: 16px; }
.icon-control { width: 24px; height: 24px; padding: 4px; }
.icon-control img { width: 16px; height: 16px; max-width: none; }
.control-cluster.solid .ds-control { background: #3f88e4; font-weight: 600; }
.control-cluster.dim .ds-control { background: rgba(153,153,153,.2); color: #e0e0e0; backdrop-filter: blur(12px); }
.control-cluster.ghost .ds-control { border: 1px solid #707070; background: transparent; color: #e0e0e0; }
.board-row.is-hover .control-cluster.solid .ds-control { box-shadow: 0 0 0 4px rgba(63,136,228,.5); }
.board-row.is-hover .control-cluster.dim .ds-control { box-shadow: 0 0 0 4px rgba(153,153,153,.4); color: #fff; }
.board-row.is-hover .control-cluster.ghost .ds-control { border-color: #3b3b3b; box-shadow: 0 0 0 4px #3b3b3b; color: #fff; }
.board-row.is-disabled .control-cluster.solid .ds-control,
.board-row.is-disabled .control-cluster.dim .ds-control { background: rgba(153,153,153,.2); color: #707070; box-shadow: none; }
.board-row.is-disabled .control-cluster.ghost .ds-control { border-color: #3b3b3b; color: #3b3b3b; box-shadow: none; }
.component-board [data-system-state] { transition: opacity .42s ease, transform .55s cubic-bezier(.2,.8,.2,1), filter .42s ease, box-shadow .42s ease; }
.component-board [data-system-state]:not([data-system-state="solid"]) { opacity: .16; transform: translateY(4px) scale(.96); filter: saturate(.55); }
.component-board[data-active-state="dim"] [data-system-state]:not([data-system-state="dim"]),
.component-board[data-active-state="ghost"] [data-system-state]:not([data-system-state="ghost"]) { opacity: .16; transform: translateY(4px) scale(.96); filter: saturate(.55); }
.component-board[data-active-state="dim"] [data-system-state="solid"],
.component-board[data-active-state="ghost"] [data-system-state="solid"] { opacity: .16; transform: translateY(4px) scale(.96); filter: saturate(.55); }
.component-board[data-active-state="solid"] [data-system-state="solid"],
.component-board[data-active-state="dim"] [data-system-state="dim"],
.component-board[data-active-state="ghost"] [data-system-state="ghost"] { opacity: 1; transform: translateY(0) scale(1); filter: none; animation: system-state-enter .65s cubic-bezier(.2,.8,.2,1); }
.component-board[data-active-state="solid"] .control-cluster[data-system-state="solid"],
.component-board[data-active-state="dim"] .control-cluster[data-system-state="dim"],
.component-board[data-active-state="ghost"] .control-cluster[data-system-state="ghost"] { filter: drop-shadow(0 0 13px rgba(255,255,255,.07)); }
.component-board.switching [data-system-state] { opacity: .03 !important; transform: translateY(7px) scale(.94) !important; filter: blur(2px) saturate(.4) !important; }
@keyframes system-state-enter { from { opacity: .08; transform: translateY(8px) scale(.94); filter: blur(2px); } }
.segmented-label { width: min(560px, calc(100% - 130px)); margin: 18px 0 10px 166px; color: #999; font-size: 14px; }
.segmented-control { width: max-content; margin-left: 166px; padding: 2px; display: flex; gap: 4px; border-radius: 24px; background: #262626; }
.segmented-control button { padding: 6px 12px; border: 0; border-radius: 20px; background: transparent; color: #999; cursor: pointer; }
.segmented-control button.selected { background: #3f88e4; color: #fff; }

.testimonials { padding: 20px 0 120px; text-align: center; }
.testimonial-heading h2 { margin: 0; color: #acc4fd; font-size: 36px; line-height: 1.5; font-weight: 300; }
.testimonial-heading p { margin: 12px 0 44px; font-size: 20px; }
.testimonial-stage { width: min(1002px, 100%); min-height: 390px; margin: auto; position: relative; display: grid; place-items: center; }
.testimonial-card { width: min(687px, calc(100% - 130px)); min-height: 361px; padding: 40px 33px 32px; border-radius: 12px; background: #fff; color: #0a0a0a; position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 28px 75px rgba(0,0,0,.3); transition: opacity .18s ease, transform .18s ease; }
.testimonial-card.changing { opacity: 0; transform: translateY(8px); }
.testimonial-card h3 { margin: 0 0 20px; color: #303030; font: 400 24px/1.25 Lato, sans-serif; }
.testimonial-card [data-testimonial-quote] { font-size: 15px; line-height: 1.45; }
.testimonial-card [data-testimonial-quote] p { margin: 0; }
.testimonial-card [data-testimonial-quote] p + p { margin-top: 20px; }
.testimonial-ornament, .testimonial-spark { position: absolute; z-index: 3; pointer-events: none; }
.ornament-left { left: 0; top: 28px; width: 38px; }
.spark-left { left: 47px; top: 62px; width: 38px; }
.ornament-right { right: 50px; bottom: -45px; width: 44px; }
.spark-right { right: 0; bottom: -5px; width: 44px; }
.testimonial-people { min-height: 106px; margin: 40px auto 18px; display: flex; justify-content: center; align-items: center; gap: 34px; }
.testimonial-people button { width: 61px; height: 61px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: width .3s ease, height .3s ease, transform .3s ease, filter .3s ease; }
.testimonial-people button:hover { transform: translateY(-5px); }
.testimonial-people button.active { width: 106px; height: 106px; filter: drop-shadow(0 0 18px rgba(42,100,236,.38)); }
.testimonial-people img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.testimonial-credit { min-height: 58px; display: grid; gap: 5px; justify-items: center; }
.testimonial-credit strong { color: #d8d8d8; font: 400 20px/1.2 Lato, sans-serif; }
.testimonial-credit span { max-width: 300px; color: #d8d8d8; font: italic 14px/1.3 Lato, sans-serif; }

.expertise { padding: 55px 60px 125px; display: grid; grid-template-columns: 1.45fr 1fr .65fr; gap: 90px; }
.expertise h2 { margin: 0 0 30px; color: #d8d8d8; font-size: 24px; font-weight: 400; }
.expertise ul { margin: 0; padding: 0; display: grid; gap: 17px; list-style: none; color: #d8d8d8; font-size: 15px; }
.expertise li::before { content: "✓"; margin-right: 12px; color: #fff; }

[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.8,.2,1); }
[data-reveal="left"] { transform: translateX(-42px); }
[data-reveal="right"] { transform: translateX(42px); }
[data-reveal="down"] { transform: translateY(-24px); }
[data-reveal].visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .shell { width: min(calc(100% - 36px), 720px); }
  .site-header { height: 112px; gap: 28px; }
  .desktop-nav { gap: 22px; font-size: 14px; }
  .hero { grid-template-columns: 1fr .82fr; gap: 30px; padding-top: 54px; }
  .project-card, .project-card.copy-first { gap: 36px; padding: 38px; grid-template-columns: 1fr 1fr; }
  .contact-footer { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .menu-layout { column-gap: 30px; }
  .menu-project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px 28px; }
  .about-hero { padding-inline: 30px; grid-template-columns: minmax(330px, .9fr) 1fr; gap: 42px; }
  .about-photo-wrap { height: 500px; }
  .about-photo-outline { width: calc(100% - 26px); height: 470px; }
  .about-photo { width: calc(100% - 26px); height: 468px; }
  .designer-cursor { right: -20px; }
  .about-hero-copy h1 { font-size: 42px; }
  .principle { gap: 40px; }
  .expertise { padding-inline: 20px; gap: 36px; }
}

@media (max-width: 680px) {
  .shell { width: min(calc(100% - 30px), 520px); }
  .site-header { height: 90px; }
  .menu-button { width: 44px; height: 44px; }
  .brand { width: 106px; }
  .desktop-nav { display: none; }
  .menu-layout { width: calc(100% - 30px); padding: 22px 0 34px; grid-template-columns: 48px 1fr; grid-template-rows: 48px auto auto auto; column-gap: 22px; }
  .menu-brand-row { gap: 22px; }
  .menu-circle { width: 48px; height: 48px; flex-basis: 48px; }
  .menu-close { font-size: 30px; }
  .menu-back { margin-top: 18px; font-size: 22px; }
  .menu-logo { width: 116px; }
  .menu-primary { margin-top: 38px; }
  .menu-primary p { margin-bottom: 14px; font-size: 14px; }
  .menu-primary a { font-size: clamp(43px, 14vw, 62px); line-height: 1.3; }
  .menu-projects { grid-column: 1 / -1; grid-row: 3; margin-top: 64px; }
  .menu-projects h2 { font-size: 20px; }
  .menu-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 20px; }
  .menu-project-grid a { font-size: 12px; gap: 8px; }
  .menu-resume { grid-column: 1 / -1; grid-row: 4; justify-self: start; margin-top: 38px; }
  .hero { min-height: 0; display: flex; flex-direction: column; gap: 46px; padding: 76px 0 130px; }
  .hero h1 { font-size: clamp(35px, 10.8vw, 48px); }
  .hero-intro { font-size: 16px; }
  .stats { display: grid; gap: 12px; margin-top: 32px; }
  .stat { width: 100%; }
  .portrait-wrap { width: min(86vw, 380px); align-self: center; }
  .curved-arrow { display: none; }
  .tools-marquee { bottom: 24px; width: calc(100vw - 10px); }
  .tools-rail { animation-duration: 27s; }
  .projects-section { padding-top: 68px; }
  .section-heading { margin-bottom: 45px; }
  .section-heading p { font-size: 30px; }
  .section-heading h2 { font-size: 14px; }
  .project-list { gap: 24px; }
  .project-card, .project-card.copy-first { min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 26px; padding: 20px; border-radius: 16px; }
  .project-card.image-first .project-media { order: 0; }
  .project-card.image-first .project-copy { order: 1; }
  .project-card.copy-first .project-copy { order: 0; }
  .project-card.copy-first .project-media { order: 1; }
  .project-copy h3 { font-size: 22px; }
  .project-copy p { font-size: 14px; }
  .project-media { height: 245px; }
  .screen-media { padding: 10px; }
  .site-footer { padding-top: 52px; }
  .footer-cta { margin-bottom: 52px; padding: 48px 22px; border-radius: 16px; }
  .footer-cta h2 { margin-bottom: 16px; }
  .contact-main { padding-top: 28px; }
  .contact-workspace { min-height: 0; grid-template-columns: 1fr; gap: 64px; }
  .contact-intro h1 { font-size: clamp(46px, 13vw, 64px); }
  .contact-lead { font-size: 18px; }
  .inquiry-panel { padding-bottom: 24px; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form-actions { align-items: flex-start; flex-direction: column; }
  .contact-footer { justify-items: start; text-align: left; gap: 24px; }
  .footer-contact-inline { flex-direction: column; align-items: flex-start; gap: 12px; }
  .contact-footer nav { max-width: 100%; flex-wrap: wrap; gap: 16px 24px; }
  .about-narrow { width: min(calc(100% - 30px), 520px); }
  .about-hero { min-height: 0; padding: 55px 0 90px; display: flex; flex-direction: column; gap: 55px; }
  .about-back { top: 0; left: 0; width: 48px; height: 48px; }
  .about-photo-wrap { width: min(92%, 415px); height: 500px; }
  .about-photo-outline { left: 0; width: calc(100% - 18px); height: 470px; }
  .about-photo { right: 0; width: calc(100% - 18px); height: 470px; }
  .designer-cursor { right: -3px; bottom: 1px; }
  .designer-cursor > span { font-size: 34px; }
  .designer-cursor strong { padding: 7px 12px; font-size: 12px; }
  .about-hero-copy { padding: 0; }
  .about-hero-copy h1 { margin-bottom: 18px; font-size: 40px; }
  .about-hero-copy p { font-size: 16px; }
  .scroll-cue { bottom: 22px; }
  .about-story { padding-top: 48px; }
  .about-story h2, .principles > h2 { font-size: 29px; }
  .story-copy { font-size: 15px; }
  .story-copy em { font-size: 20px; }
  .principles { padding-bottom: 62px; }
  .principle { grid-template-columns: 1fr; gap: 20px; margin-top: 38px; }
  .principle + .principle { margin-top: 58px; }
  .principle img { width: 145px; height: 120px; }
  .principle h3 { font-size: 22px; }
  .principle p { font-size: 15px; }
  .principle p strong { font-size: 19px; }
  .systems-section { padding-bottom: 80px; }
  .systems-intro h2 { font-size: 27px; }
  .systems-intro p { font-size: 15px; }
  .component-board { padding: 20px 14px; overflow: hidden; }
  .board-head, .board-row { width: 100%; grid-template-columns: 105px minmax(0, 1fr); gap: 14px; }
  .component-board [data-system-state] { display: none; }
  .component-board[data-active-state="solid"] [data-system-state="solid"],
  .component-board[data-active-state="dim"] [data-system-state="dim"],
  .component-board[data-active-state="ghost"] [data-system-state="ghost"] { display: flex; align-items: center; }
  .board-head [data-system-state] { justify-content: flex-start; }
  .control-cluster { gap: 12px; }
  .ds-control { padding-inline: 10px; }
  .body-control { min-width: 72px; }
  .caption-control { min-width: 56px; padding-inline: 7px; }
  .segmented-label { width: 100%; margin: 22px 0 10px; text-align: center; }
  .segmented-control { margin-inline: auto; }
  .testimonial-heading h2 { font-size: 30px; }
  .testimonial-heading p { font-size: 17px; }
  .testimonial-stage { min-height: 0; }
  .testimonial-card { width: calc(100% - 24px); min-height: 480px; padding: 34px 22px; }
  .testimonial-card h3 { font-size: 22px; }
  .testimonial-card [data-testimonial-quote] { font-size: 14px; }
  .testimonial-ornament, .testimonial-spark { display: none; }
  .testimonial-people { gap: 10px; }
  .testimonial-people button { width: 47px; height: 47px; }
  .testimonial-people button.active { width: 78px; height: 78px; }
  .expertise { padding: 35px 0 90px; grid-template-columns: 1fr; gap: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .tools-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; scrollbar-width: none; }
  .tools-marquee::-webkit-scrollbar { display: none; }
  .tools-rail { animation: none; }
  .tools-track[aria-hidden="true"] { display: none; }
  .menu-panel, .menu-brand-row, .menu-back, .menu-primary, .menu-projects, .menu-resume { transition: none !important; }
  .hero h1 span, .portrait-ring, .portrait-ring::before, .curved-arrow { animation: none; }
}

/* GrowWise GrowDigital case study */
.case-page { background: #050505; }
.case-page .site-header { position: sticky; }
.case-hero { position: relative; padding: 56px 0 120px; text-align: center; }
/* Reusable previous/next navigation for every project hero. */
.project-hero-nav { position: absolute; left: 0; right: 0; top: 70px; z-index: 5; display: flex; justify-content: space-between; pointer-events: none; }
.case-back, .case-forward { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid #29292d; border-radius: 50%; background: rgba(5,5,5,.72); color: #fff; font-size: 25px; backdrop-filter: blur(8px); pointer-events: auto; transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease; }
.case-back:hover, .case-back:focus-visible { transform: translateX(-4px); border-color: #4a4a50; background: #18181b; box-shadow: 0 0 22px rgba(255,255,255,.1); }
.case-forward:hover, .case-forward:focus-visible { transform: translateX(4px); border-color: #4a4a50; background: #18181b; box-shadow: 0 0 22px rgba(255,255,255,.1); }
.case-hero h1 { width: min(920px, calc(100% - 130px)); margin: 0 auto 52px; color: #d8d8d8; font-size: 36px; line-height: 1.4; letter-spacing: -.02em; }
.case-hero h1 span { color: #8cff92; }
.case-hero-image { width: 100%; aspect-ratio: 1121 / 546; border-radius: 16px; object-fit: cover; object-position: center; }
.project-hero-motion { --hero-motion-rgb: 140,255,146; position: relative; isolation: isolate; display: grid; place-items: center; }
.project-hero-motion::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 52%; width: 70%; height: 52%; border-radius: 50%; background: radial-gradient(ellipse, rgba(var(--hero-motion-rgb),.29), rgba(var(--hero-motion-rgb),.08) 48%, transparent 72%); filter: blur(28px); transform: translate(-50%,-50%); animation: project-hero-pulse 3.2s ease-in-out infinite alternate; pointer-events: none; }
.project-hero-orbit { position: absolute; z-index: 0; border: 1px solid rgba(var(--hero-motion-rgb),.22); border-radius: 50%; animation: project-hero-orbit 12s linear infinite; pointer-events: none; }
.project-hero-orbit::after { content: ""; width: 7px; height: 7px; position: absolute; left: 17%; top: 7%; border-radius: 50%; background: rgba(var(--hero-motion-rgb),1); box-shadow: 0 0 17px rgba(var(--hero-motion-rgb),.95); }
.project-hero-orbit-one { width: 77%; height: 88%; }
.project-hero-orbit-two { width: 58%; height: 69%; animation-direction: reverse; animation-duration: 9s; }
.growwise-hero-visual { width: 100%; aspect-ratio: 1121 / 546; margin: 0 auto; }
.growwise-hero-visual::before { width: 96%; height: 88%; filter: blur(38px); }
.growwise-hero-visual .project-hero-orbit-one { width: 88%; height: 118%; }
.growwise-hero-visual .project-hero-orbit-two { width: 68%; height: 96%; }
.growwise-hero-visual .case-hero-image { position: relative; z-index: 2; filter: drop-shadow(0 28px 34px rgba(0,0,0,.42)); animation: project-hero-float 5.5s ease-in-out infinite; }
@keyframes project-hero-pulse { from { opacity: .55; transform: translate(-50%,-50%) scale(.94); } to { opacity: 1; transform: translate(-50%,-50%) scale(1.06); } }
@keyframes project-hero-orbit { to { transform: rotate(360deg); } }
@keyframes project-hero-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.project-scroll-cue { position: absolute; left: 50%; bottom: 54px; z-index: 4; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: rgba(5,5,5,.72); color: #fff; font-size: 22px; backdrop-filter: blur(8px); transform: translateX(-50%); transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.project-scroll-cue span { animation: project-arrow-bounce 1.7s ease-in-out infinite; }
.project-scroll-cue:hover, .project-scroll-cue:focus-visible { border-color: rgba(255,255,255,.62); background: rgba(24,24,27,.94); box-shadow: 0 0 24px rgba(255,255,255,.12); }
@keyframes project-arrow-bounce { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(5px); } }
.back-to-top { position: fixed; right: max(24px, calc((100vw - var(--shell)) / 2 - 76px)); bottom: 28px; z-index: 20; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #343439; border-radius: 50%; background: rgba(13,13,15,.86); color: #fff; font-size: 22px; backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .25s ease, visibility .25s ease, transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover, .back-to-top:focus-visible { border-color: #77777d; box-shadow: 0 0 24px rgba(255,255,255,.13); transform: translateY(-3px); }
.case-study h2 { margin: 0 0 30px; color: #f3f3f4; font-size: 24px; line-height: 1.3; letter-spacing: -.02em; }
.case-study h3 { letter-spacing: -.015em; }
.case-study p, .case-study li { color: #c4c4c8; font-size: 16px; line-height: 1.72; }
.case-section { padding-block: 120px; }
.case-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 96px; align-items: start; }
.case-copy p { margin: 0 0 22px; }
.case-copy strong { color: #fff; }
.case-page #project-background { scroll-margin-top: 164px; }
.case-facts { display: grid; border-top: 1px solid #303035; }
.case-facts > div { display: grid; grid-template-columns: 44px 1fr; gap: 2px 12px; padding: 24px 0; border-bottom: 1px solid #303035; }
.case-facts span { grid-row: 1 / 3; color: #74747a; font-size: 12px; }
.case-facts strong { color: #fff; font-size: 15px; }
.case-facts p { margin: 6px 0 0; font-size: 13px; line-height: 1.55; }
.case-band { padding: 112px 0; background: #171719; }
.case-band .shell { max-width: 930px; }
.case-band p { margin: 0 0 20px; }
.case-band ul { margin: 0; padding-left: 20px; }
.case-band li + li { margin-top: 8px; }
.case-band blockquote, .flow-stack blockquote { margin: 52px 0 0; padding: 26px 30px; border-left: 3px solid #83b423; background: #222225; color: #ededee; font-size: 18px; line-height: 1.6; }
.case-visual-story { display: grid; grid-template-columns: 1.17fr .83fr; gap: 22px; padding-block: 130px; align-items: stretch; }
.case-visual-story .visual-title { grid-column: 1 / -1; min-height: 400px; display: flex; align-items: center; justify-content: center; padding: 46px; background: linear-gradient(110deg, rgba(0,0,0,.76), rgba(0,0,0,.08)), url("assets/growwise/sustainable-4.webp") center/cover; text-align: center; }
.case-visual-story .visual-title h2 { max-width: none; margin: 0; font-size: 36px; white-space: nowrap; }
.case-visual-story > img { width: 100%; height: 510px; object-fit: cover; }
.case-visual-story > img:first-of-type { display: none; }
.case-visual-story > p { margin: 0; padding: 42px; display: flex; align-items: end; background: #1a1a1c; font-size: 24px; line-height: 1.55; }
.case-prose.two-columns { columns: 2; column-gap: 64px; }
.case-prose.two-columns > * { break-inside: avoid; }
.case-prose p { margin: 0 0 24px; }
.case-prose ul { margin: 14px 0 0; padding-left: 20px; }
.case-banner { margin-top: 0; margin-bottom: 100px; }
.case-banner img { width: 100%; height: 182px; min-height: 0; object-fit: cover; }
.case-banner figcaption, .image-caption { margin: 0; padding: 12px 70px 0; background: transparent; color: #d8d8d8; font-size: 14px; line-height: 1.25; text-align: center; }
.finding-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; background: transparent; border: 0; }
.finding-grid article { min-height: 250px; padding: 34px 32px; border: 1px solid #303035; border-radius: 24px; background: #121214; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.finding-grid article:hover { transform: translateY(-6px); border-color: rgba(131, 180, 35, .75); box-shadow: 0 0 0 1px rgba(131, 180, 35, .32), 0 0 28px rgba(131, 180, 35, .24), 0 18px 44px rgba(0, 0, 0, .42); }
.finding-grid span { color: #83b423; font-size: 13px; }
.finding-grid h3 { margin: 50px 0 16px; font-size: 20px; }
.finding-grid p { margin: 0; font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
  .finding-grid article { transition: border-color .2s ease, box-shadow .2s ease; }
  .finding-grid article:hover { transform: none; }
}
.experience-layout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr); column-gap: clamp(56px, 8vw, 120px); row-gap: 72px; align-items: start; }
.experience-intro { max-width: 470px; }
.experience-intro p { margin: 0 0 20px; }
.experience-intro p:last-child { margin-bottom: 0; }
.persona-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; }
.persona-grid article { min-height: 124px; padding: 22px 26px; display: flex; flex-direction: row; align-items: center; gap: 22px; border: 0; border-radius: 28px; background: #f2f2f2; color: #1a191d; }
.persona-grid article:nth-child(2) { background: #f8d763; }
.persona-grid article:nth-child(3) { background: #dce7ff; }
.persona-grid strong { color: #1a191d; font-size: 18px; }
.persona-grid p { margin: 8px 0 0; color: #353438; font-size: 14px; line-height: 1.6; }
.persona-avatar { width: 54px; height: 60px; flex: 0 0 54px; display: block; overflow: hidden; border-radius: 12px; background: #fff; position: relative; }
.persona-avatar img { position: absolute; top: -8px; width: 220px; max-width: none; height: auto; }
.avatar-operator img { left: 0; }
.avatar-technician img { left: -55px; }
.avatar-owner img { left: -110px; }
.experience-image { grid-column: 1 / -1; width: 100%; height: 398px; margin: 0; overflow: hidden; }
.experience-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 48%; }
.flow-stack { padding: 72px 0 120px; overflow: hidden; background: #000; }
.flow-stack > img, .flow-stack > blockquote { width: min(calc(100% - 48px), var(--shell)); margin: 0 auto 44px; }
.flow-stack > img { max-height: 760px; object-fit: contain; background: #fff; }
.flow-stack > blockquote { max-width: 880px; margin-top: 56px; margin-bottom: 72px; text-align: center; border: 0; border-top: 1px solid #3b3b40; border-bottom: 1px solid #3b3b40; background: transparent; font-style: italic; }
.paired-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; }
.paired-copy > div { min-width: 0; }
.paired-copy p { margin: 0 0 18px; }
.sketch-section { padding: 100px 0 130px; background: #101012; }
.sketch-section > h2 { width: min(calc(100% - 48px), var(--shell)); margin: 0 auto 60px; }
.sketch-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: start; }
.sketch-grid img { width: 100%; height: auto; object-fit: contain; background: #fff; }
.impact-section { padding: 130px 0; background: transparent; color: #d8d8d8; }
.impact-section .shell { width: min(calc(100% - 48px), var(--shell)); }
.impact-section h2 { color: #d8d8d8; }
.impact-section p, .impact-section li { color: #8d8f8e; }
.impact-wireframes, .impact-evaluation, .impact-login { width: 100%; }
.impact-wireframes { margin-bottom: 90px; }
.impact-copy { width: min(760px, 100%); margin: 0 auto 90px; }
.impact-copy ul { margin: 24px 0 0; padding-left: 20px; }
.impact-copy li + li { margin-top: 8px; }
.impact-copy strong { color: #d8d8d8; }
.impact-evaluation { margin-top: 28px; }
.impact-section .image-caption { background: transparent; color: #77777d; }
.impact-login { margin-top: 90px; }
.screen-showcase { padding-block: 128px; }
.screen-showcase + .screen-showcase { padding-top: 30px; }
.screen-showcase h2 { margin-bottom: 12px; }
.screen-rail { width: 100%; display: flex; gap: 28px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; scrollbar-width: none; cursor: grab; padding: 0 20px 24px; }
.screen-rail::-webkit-scrollbar { display: none; }
.screen-rail.auto-looping { scroll-snap-type: none; }
.screen-rail.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.screen-rail:focus-visible { outline: 2px solid var(--blue); outline-offset: 8px; }
.screen-rail img { pointer-events: none; }
[data-drag-scroll] > * { opacity: 0; translate: 48px 0; filter: saturate(.72) brightness(.82); transition: opacity .7s ease, translate .8s cubic-bezier(.2,.8,.2,1), filter .8s ease; }
[data-drag-scroll].rail-visible > * { opacity: 1; translate: 0 0; filter: none; }
[data-drag-scroll].rail-visible:not(.rail-settled) > :nth-child(2) { transition-delay: .08s; }
[data-drag-scroll].rail-visible:not(.rail-settled) > :nth-child(3) { transition-delay: .16s; }
[data-drag-scroll].rail-visible:not(.rail-settled) > :nth-child(4) { transition-delay: .24s; }
[data-drag-scroll].rail-visible:not(.rail-settled) > :nth-child(5) { transition-delay: .32s; }
[data-drag-scroll].rail-visible:not(.rail-settled) > :nth-child(6) { transition-delay: .4s; }
[data-drag-scroll].rail-settled > * { transition-delay: 0s; }
[data-drag-scroll].rail-visible > *:hover { translate: 0 -6px; }
.device-mockup { flex: 0 0 auto; position: relative; margin: 0; scroll-snap-align: start; }
.device-screen { position: absolute; overflow: hidden; background: #e9ebea; }
.device-screen img { width: 100%; height: 100%; display: block; object-fit: cover; }
.device-case, .device-bezel { position: absolute; z-index: 2; display: block; max-width: none; }
.device-bezel { inset: 0; width: 100%; height: 100%; }
.tablet-mockup { width: min(82vw, 880px); aspect-ratio: 880 / 534.769; }
.tablet-mockup .device-screen { inset: 1.68% .91% 1.36%; border-radius: 18px; }
.tablet-mockup .device-case { left: -.26%; top: -.42%; width: 100.52%; height: 100.84%; }
.desktop-rail { min-height: 545px; align-items: flex-start; padding-top: 4px; }
.mobile-rail { min-height: 625px; align-items: flex-start; gap: 20px; }
.phone-mockup { width: 272px; aspect-ratio: 272 / 576; }
.phone-mockup:nth-child(odd) { margin-top: 41px; }
.phone-mockup .device-screen { inset: 1.22% 2.21% 1.12%; border-radius: 17px; }
.phone-mockup .device-case { left: -.74%; top: -.35%; width: 101.48%; height: 100.7%; }
.confidentiality-note { width: min(720px, 100%); margin: 36px 0 0; color: #828288 !important; font-size: 13px !important; }
.closing-copy { padding-top: 50px; display: flex; flex-direction: column; gap: 72px; }
.closing-copy > div { width: min(960px, 100%); margin: 0 auto; }
.closing-copy h2 { margin-bottom: 30px; }
.closing-copy p { margin: 0 0 18px; }
.closing-copy p:last-child { margin-bottom: 0; }
.closing-emphasis { color: #d8d8d8; font-size: 24px; line-height: 1.25; }
.closing-image { width: 100%; height: 410px; display: block; object-fit: cover; object-position: center; }
.project-pagination { padding: 40px 0 130px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #28282c; }
.project-nav-disabled { color: #5f5f64; font-size: 14px; }

/* CarnotAutomart case study */
.carnot-page { --carnot-orange: #f25b24; }
.carnot-hero { min-height: 0; padding-top: 86px; padding-bottom: 88px; box-sizing: border-box; text-align: center; }
.carnot-hero .project-scroll-cue { bottom: 16px; }
.carnot-hero h1 { width: min(760px, 100%); margin: 0 auto 32px; font-size: 36px; }
.carnot-hero h1 .carnot-title-accent { background: linear-gradient(90deg, #ff9b74 0%, var(--carnot-orange) 42%, #ff7542 70%, #ffb196 100%); background-size: 220% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: carnot-title-shimmer 5s linear infinite, carnot-title-glow 2.4s ease-in-out infinite alternate; }
.carnot-hero-art { --hero-motion-rgb: 242,91,36; width: min(1120px, 100%); aspect-ratio: 985.752 / 431.203; margin: 0 auto; position: relative; isolation: isolate; overflow: visible; perspective: 1100px; }
.carnot-hero-layer { position: absolute; display: block; max-width: none; height: auto; pointer-events: none; }
.carnot-city { left: 0; top: 0; z-index: 1; width: 100%; filter: saturate(.34) brightness(.68) contrast(.96) sepia(.12); animation: carnot-city-drift 12s ease-in-out infinite alternate; }
.carnot-car { left: 5.99%; top: 40.35%; z-index: 3; width: 73.58%; animation: carnot-car-idle 1.9s ease-in-out infinite; }
.carnot-seller { left: 43.86%; top: 18.29%; z-index: 10; width: 13.85%; animation: carnot-character-breathe 4.4s ease-in-out infinite; transform-origin: center bottom; }
.carnot-buyer { left: 57.92%; top: 19.61%; z-index: 11; width: 17.92%; animation: carnot-character-breathe 4.8s .35s ease-in-out infinite; transform-origin: center bottom; }
.carnot-phone { left: 79.11%; top: .9%; z-index: 6; width: 15.03%; backface-visibility: hidden; transform-origin: center center; animation: carnot-phone-rotate 6s cubic-bezier(.45,.05,.55,.95) infinite; filter: drop-shadow(0 14px 18px rgba(0,0,0,.28)); }
.car-headlight-beam { position: absolute; z-index: 7; right: 92.4%; bottom: 17%; width: 47%; height: 16%; background: linear-gradient(90deg, rgba(255,248,209,0) 0%, rgba(255,248,209,.07) 44%, rgba(255,241,180,.34) 100%); clip-path: polygon(0 0, 100% 43%, 100% 57%, 0 100%); filter: blur(5px); mix-blend-mode: screen; transform-origin: right center; pointer-events: none; animation: car-headlight-sweep 4.8s ease-in-out infinite; }
.car-exhaust-flame { position: absolute; z-index: 4; left: 77%; bottom: 8%; width: 9%; height: 4.2%; background: linear-gradient(90deg, #eaf8ff 0 12%, #63c9ff 25%, #7b5cff 43%, #ff6b28 68%, rgba(255,68,20,0) 100%); clip-path: polygon(0 30%, 62% 0, 100% 48%, 64% 100%, 0 68%); filter: blur(.5px) drop-shadow(0 0 7px rgba(255,87,34,.9)); mix-blend-mode: screen; transform-origin: left center; rotate: 7deg; opacity: 0; pointer-events: none; animation: car-exhaust-fire 3.6s linear infinite; }
.car-exhaust-flame::before, .car-exhaust-flame::after { content: ""; position: absolute; left: 52%; top: 45%; width: 5px; height: 5px; border-radius: 50%; background: #ff8a3d; box-shadow: 0 0 8px #ff5b21; opacity: 0; }
.car-exhaust-flame::before { animation: car-exhaust-spark-one 3.6s linear infinite; }
.car-exhaust-flame::after { animation: car-exhaust-spark-two 3.6s linear infinite; }
@keyframes carnot-title-shimmer { to { background-position: 220% center; } }
@keyframes carnot-title-glow { from { filter: drop-shadow(0 0 2px rgba(242,91,36,.2)); } to { filter: drop-shadow(0 0 10px rgba(242,91,36,.58)); } }
@keyframes carnot-city-drift { from { transform: translateX(-3px) scale(1); opacity: .58; } to { transform: translateX(3px) scale(1.008); opacity: .76; } }
@keyframes carnot-car-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes carnot-character-breathe { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-1px) scaleY(1.004); } }
@keyframes carnot-phone-rotate { 0%, 100% { transform: rotateY(-13deg) rotateZ(-1.5deg) translateY(0); } 50% { transform: rotateY(14deg) rotateZ(1.5deg) translateY(-8px); } }
@keyframes car-headlight-sweep { 0%, 8% { opacity: 0; transform: scaleX(.08); } 14% { opacity: 1; transform: scaleX(1.08); } 20%, 82% { opacity: .78; transform: scaleX(1); } 86% { opacity: .48; } 88% { opacity: .9; } 90%, 100% { opacity: .72; transform: scaleX(1); } }
@keyframes car-exhaust-fire { 0%, 14%, 25%, 51%, 64%, 83%, 94%, 100% { opacity: 0; transform: scaleX(.12) scaleY(.7); } 16%, 22%, 53%, 61%, 85%, 91% { opacity: 1; transform: scaleX(1) scaleY(1); } 19%, 57%, 88% { opacity: .82; transform: scaleX(.7) scaleY(1.18); } }
@keyframes car-exhaust-spark-one { 0%, 14%, 25%, 100% { opacity: 0; transform: translate(0,0); } 16% { opacity: 1; } 24% { opacity: 0; transform: translate(34px,-13px) scale(.2); } }
@keyframes car-exhaust-spark-two { 0%, 51%, 64%, 100% { opacity: 0; transform: translate(0,0); } 53% { opacity: 1; } 63% { opacity: 0; transform: translate(39px,12px) scale(.1); } }
.carnot-page .case-facts span, .carnot-page .finding-grid span { color: var(--carnot-orange); }
.carnot-page .case-study > .case-section:first-child { padding-top: 65px; }
.carnot-page .finding-grid article:hover { border-color: rgba(242, 91, 36, .8); box-shadow: 0 0 0 1px rgba(242, 91, 36, .34), 0 0 28px rgba(242, 91, 36, .28), 0 18px 44px rgba(0, 0, 0, .42); }
.carnot-problem { height: 930px; overflow: hidden; position: relative; background: #171719; }
.carnot-problem::before { content: ""; position: absolute; inset: 534px 0 0; background: radial-gradient(circle at 24% 18%, rgba(255,188,103,.72), transparent 38%), radial-gradient(circle at 78% 76%, rgba(196,42,12,.46), transparent 44%), linear-gradient(120deg, #ff7a2c 0%, #f25b24 48%, #dc451b 100%); }
.carnot-problem-stage { width: min(calc(100% - 48px), 960px); height: 100%; margin-inline: auto; position: relative; z-index: 1; }
.carnot-problem-copy { width: 610px; padding-top: 40px; }
.carnot-problem-copy h2 { margin-bottom: 28px; text-transform: uppercase; font-weight: 400; }
.carnot-problem-details { width: 520px; padding-left: 14px; border-left: 4px solid rgba(255,255,255,.2); }
.carnot-problem-details p { margin: 0 0 18px; color: #99999d; font-size: 16px; line-height: 1.55; }
.carnot-problem-details p:last-child { margin-bottom: 0; }
.carnot-problem-details strong { color: #f3f3f4; }
.problem-main-phone { width: 334px; position: absolute; z-index: 2; top: 222px; right: 0; border-radius: 48px; filter: drop-shadow(0 25px 30px rgba(0,0,0,.45)); }
.problem-phone-row { width: 598px; position: absolute; left: 0; top: 555px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.problem-device-frame { display: block; filter: drop-shadow(0 12px 16px rgba(85,20,4,.24)); }
.problem-device-frame img { width: 100%; }
.carnot-research { display: grid; grid-template-columns: .78fr 1.22fr; gap: 72px; align-items: start; }
.carnot-research ul, .carnot-challenges ul { padding-left: 20px; }
.carnot-research li + li, .carnot-challenges li + li { margin-top: 14px; }
.carnot-research img, .carnot-process img, .carnot-wireframes img, .carnot-story img, .carnot-product-screens img, .carnot-closing img { width: 100%; }
.carnot-focus-grid article { min-height: 235px; }
.carnot-process { position: relative; }
.process-intro { width: min(700px, 100%); margin-bottom: 52px; }
.process-eyebrow { display: block; margin-bottom: 14px; color: var(--carnot-orange); font-size: 12px; line-height: 1.4; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.process-intro h2 { margin-bottom: 16px; font-size: 32px; }
.process-intro p { margin: 0; color: #9d9da2; font-size: 17px; line-height: 1.7; }
.process-flow { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; padding: 30px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 30px; background: radial-gradient(circle at 50% -20%, rgba(242,91,36,.2), transparent 42%), linear-gradient(145deg, rgba(28,28,31,.96), rgba(11,11,13,.98)); box-shadow: 0 28px 80px rgba(0,0,0,.32); }
.process-flow::before { content: ""; position: absolute; z-index: 0; top: 66px; left: 7%; right: 7%; height: 2px; background: rgba(255,255,255,.1); }
.process-progress { position: absolute; z-index: 1; top: 66px; left: 7%; right: 7%; height: 2px; background: linear-gradient(90deg, #ffb089, var(--carnot-orange) 48%, #ff7b45); box-shadow: 0 0 18px rgba(242,91,36,.7); transform: scaleX(0); transform-origin: left center; }
.process-flow.visible .process-progress { animation: process-line-draw 1.35s .22s cubic-bezier(.2,.8,.2,1) forwards; }
.process-step { min-width: 0; min-height: 350px; padding: 18px 16px 20px; position: relative; z-index: 2; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; background: rgba(8,8,10,.7); opacity: 0; transform: translateY(28px); transition: transform .32s cubic-bezier(.2,.8,.2,1), border-color .32s ease, background .32s ease, box-shadow .32s ease; }
.process-flow.visible .process-step { animation: process-step-enter .7s cubic-bezier(.2,.8,.2,1) forwards; }
.process-flow.visible .process-step:nth-of-type(1) { animation-delay: .12s; }
.process-flow.visible .process-step:nth-of-type(2) { animation-delay: .25s; }
.process-flow.visible .process-step:nth-of-type(3) { animation-delay: .38s; }
.process-flow.visible .process-step:nth-of-type(4) { animation-delay: .51s; }
.process-flow.visible .process-step:nth-of-type(5) { animation-delay: .64s; }
.process-step:hover, .process-step:focus-visible { transform: translateY(-9px); outline: none; border-color: rgba(242,91,36,.66); background: rgba(31,20,17,.9); box-shadow: 0 18px 44px rgba(0,0,0,.42), 0 0 28px rgba(242,91,36,.16); }
.process-flow.visible .process-step:hover, .process-flow.visible .process-step:focus-visible { animation: none; opacity: 1; transform: translateY(-9px); }
.process-marker { width: 66px; height: 66px; margin: 0 auto 26px; position: relative; display: grid; place-items: center; border: 1px solid rgba(242,91,36,.48); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,146,94,.24), rgba(20,14,13,.98) 62%); box-shadow: 0 0 0 7px rgba(15,15,17,.96), 0 0 24px rgba(242,91,36,.12); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.process-marker span { position: absolute; top: -8px; right: -8px; min-width: 27px; height: 27px; padding-inline: 6px; display: grid; place-items: center; border-radius: 999px; background: var(--carnot-orange); color: #fff; font-size: 10px; font-weight: 700; box-shadow: 0 6px 16px rgba(242,91,36,.35); }
.process-marker svg { width: 26px; height: 26px; fill: none; stroke: #ff9261; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s ease, stroke .35s ease; }
.process-step:hover .process-marker, .process-step:focus-visible .process-marker { transform: rotate(-5deg) scale(1.06); box-shadow: 0 0 0 7px rgba(15,15,17,.96), 0 0 30px rgba(242,91,36,.34); }
.process-step:hover .process-marker svg, .process-step:focus-visible .process-marker svg { transform: scale(1.1); stroke: #fff; }
.process-step h3 { margin: 0 0 18px; color: #f4f4f5; text-align: center; font-size: 18px; line-height: 1.3; font-weight: 600; }
.process-step ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 0; padding: 0; list-style: none; }
.process-step li { padding: 6px 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(255,255,255,.035); color: #aaaab0; font-size: 11px; line-height: 1.25; text-align: center; transition: border-color .25s ease, color .25s ease, background .25s ease; }
.process-step:hover li, .process-step:focus-visible li { border-color: rgba(242,91,36,.2); background: rgba(242,91,36,.06); color: #d3d3d6; }
@keyframes process-line-draw { to { transform: scaleX(1); } }
@keyframes process-step-enter { to { opacity: 1; transform: translateY(0); } }
.carnot-wireframes > p { width: min(868px, 100%); margin: 0 auto; }
.wireframe-stack { width: min(961px, 100%); margin: 92px auto 0; display: grid; gap: 0; }
.wireframe-sketch { aspect-ratio: 961 / 618.034; margin: 0; overflow: hidden; background: #171719; }
.wireframe-sketch img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: filter .5s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.wireframe-sketch:hover img { filter: contrast(1.035); transform: scale(1.008); }
.carnot-story { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; }
.carnot-story p { margin: 0 0 20px; }
.carnot-showcase { overflow: hidden; }
.carnot-rail { min-height: 0; align-items: flex-start; }
.carnot-slide { width: 100%; height: auto; flex: 0 0 100%; scroll-snap-align: start; border-radius: 18px; background: #0d0d0f; }
.carnot-desktop-rail { gap: 24px; }
.carnot-desktop-mockup { width: min(861px, 78vw); aspect-ratio: 860.786 / 547.378; flex: 0 0 min(861px, 78vw); position: relative; margin: 0; overflow: visible; scroll-snap-align: start; background: #060606; border-radius: 3.1% / 5%; }
.carnot-mockup-screen { position: absolute; z-index: 1; inset: 1.69% 1.03%; overflow: hidden; border-radius: 2.1% / 3.5%; background: #e9ebea; }
.carnot-mockup-screen img { position: absolute; display: block; max-width: none; pointer-events: none; }
.mockup-cover { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mockup-scroll-layer { width: 100%; height: var(--layer-height); top: var(--layer-top); left: var(--layer-left, 0%); }
.mockup-case, .mockup-bezel { position: absolute; z-index: 2; display: block; pointer-events: none; }
.mockup-case { inset: -.42% -.26%; width: 100.52%; height: 100.84%; }
.mockup-bezel { inset: 0; width: 100%; height: 100%; }
.visually-hidden { width: 1px; height: 1px; padding: 0; position: absolute; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mobile-composite { object-fit: contain; }
.tall-mobile-composite { max-height: 680px; object-fit: contain; }
.carnot-mobile-sequences { display: grid; gap: 0; padding-top: 46px; }
.carnot-mobile-grid { width: min(972px, 100%); margin-inline: auto; display: grid; justify-content: center; }
.carnot-mobile-grid-primary { width: min(968px, 100%); display: flex; flex-wrap: wrap; justify-content: center; column-gap: 24px; row-gap: 54px; align-items: flex-start; }
.carnot-mobile-grid-primary .mobile-mockup-large { width: 272px; }
.carnot-mobile-grid-primary .mobile-mockup-compact { width: 224px; }
.mobile-mockup { width: 276px; height: auto; display: block; object-fit: contain; filter: drop-shadow(0 18px 34px rgba(0,0,0,.28)); transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .45s ease; }
.mobile-mockup:hover { transform: translateY(-10px); filter: drop-shadow(0 24px 42px rgba(242,91,36,.16)); }
.carnot-dashboard-showcase { width: 100%; margin-top: 56px; overflow: hidden; }
.carnot-dashboard-note { margin: 12px 0 0; text-align: center; }
.carnot-mobile-note-secondary { margin: 36px 0 44px; }
.carnot-mobile-grid-secondary { grid-template-columns: repeat(3, 276px); grid-template-rows: repeat(2, 620px); gap: 0 16px; align-items: start; }
.carnot-mobile-grid-secondary .mobile-mockup:nth-child(1) { grid-column: 2; grid-row: 1; }
.carnot-mobile-grid-secondary .mobile-mockup:nth-child(2) { grid-column: 1; grid-row: 1; margin-top: 41px; }
.carnot-mobile-grid-secondary .mobile-mockup:nth-child(3) { grid-column: 3; grid-row: 1; margin-top: 41px; }
.carnot-mobile-grid-secondary .mobile-mockup:nth-child(4) { grid-column: 2; grid-row: 2; }
.carnot-mobile-grid-secondary .mobile-mockup:nth-child(5) { grid-column: 1; grid-row: 2; margin-top: 41px; }
.carnot-mobile-grid-secondary .mobile-mockup:nth-child(6) { grid-column: 3; grid-row: 2; margin-top: 41px; }
.carnot-challenges { align-items: start; }
.carnot-challenges p { margin: 0 0 18px; }
.carnot-product-screens { display: grid; gap: 0; }
.carnot-product-screens h2 { margin-bottom: 46px; }
.carnot-product-screen { width: min(986px, 100%); margin: 0 auto; display: grid; gap: 18px; }
.carnot-product-screen + .carnot-product-screen { margin-top: 58px; }
.carnot-product-screen img { width: 100%; height: auto; display: block; }
.carnot-product-screen figcaption { color: #b5b8b6; font-size: 14px; line-height: 18px; text-align: center; }
.carnot-impact-grid { grid-template-columns: repeat(3, 1fr); }
.carnot-impact-grid article { min-height: 350px; }
.carnot-impact-grid h3 { margin-top: 34px; }
.carnot-closing { display: grid; }
.carnot-closing > div { width: min(960px, 100%); margin: 0 auto; }

@media (max-width: 900px) {
  .case-page #project-background { scroll-margin-top: 136px; }
  .carnot-hero { min-height: 0; }
  .carnot-research, .carnot-story { grid-template-columns: 1fr; }
  .carnot-research, .carnot-story { gap: 45px; }
  .carnot-impact-grid { grid-template-columns: 1fr 1fr; }
  .process-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 24px; }
  .process-flow::before, .process-progress { display: none; }
  .process-step { min-height: 0; }
}

@media (max-width: 900px) {
  .case-hero { padding-top: 38px; }
  .case-hero h1 { margin-bottom: 52px; }
  .case-hero .project-hero-nav { top: 44px; }
  .case-grid { grid-template-columns: 1fr; gap: 52px; }
  .case-facts { grid-template-columns: 1fr 1fr; }
  .case-facts > div:nth-child(odd) { padding-right: 24px; }
  .case-facts > div:nth-child(even) { padding-left: 24px; }
  .case-visual-story > img { height: 420px; }
  .case-visual-story > p { padding: 28px; font-size: 21px; }
  .finding-grid { grid-template-columns: 1fr 1fr; }
  .experience-layout { grid-template-columns: minmax(0, .8fr) minmax(360px, 1.2fr); column-gap: 42px; row-gap: 52px; }
  .paired-copy { gap: 55px; }
  .tablet-mockup { width: min(86vw, 760px); }
}

@media (max-width: 680px) {
  .case-hero { padding: 48px 0 78px; }
  .project-hero-nav { position: static; width: 100%; margin-bottom: 44px; }
  .project-hero-nav .case-back, .project-hero-nav .case-forward { width: 46px; height: 46px; }
  .case-hero h1 { width: 100%; margin: 0 0 38px; font-size: 36px; line-height: 1.32; text-align: left; }
  .case-hero h1 span { margin-top: 8px; }
  .case-hero-image { width: calc(100% + 30px); max-width: none; margin-left: -15px; }
  .project-hero-orbit { display: none; }
  .project-scroll-cue { bottom: 22px; width: 40px; height: 40px; }
  .back-to-top { right: 15px; bottom: 18px; width: 44px; height: 44px; }
  .case-section { padding-block: 78px; }
  .case-study h2 { margin-bottom: 22px; font-size: 24px; }
  .case-study p, .case-study li { font-size: 15px; }
  .case-grid { gap: 40px; }
  .case-facts { grid-template-columns: 1fr; }
  .case-facts > div:nth-child(odd), .case-facts > div:nth-child(even) { padding-inline: 0; }
  .case-band { padding: 78px 0; }
  .case-band blockquote, .flow-stack blockquote { margin-top: 38px; padding: 22px; font-size: 16px; }
  .case-visual-story { width: 100%; display: block; padding: 80px 0; }
  .case-visual-story .visual-title { min-height: 330px; padding: 26px 20px; }
  .case-visual-story .visual-title h2 { font-size: clamp(20px, 6vw, 28px); white-space: nowrap; }
  .case-visual-story > img { width: calc(100% - 30px); height: 370px; margin: 18px auto 0; }
  .case-visual-story > p { width: calc(100% - 30px); margin: 0 auto; padding: 28px 22px; font-size: 18px; }
  .case-prose.two-columns { columns: 1; }
  .case-banner { width: 100%; margin-bottom: 30px; }
  .case-banner img { height: 120px; min-height: 0; }
  .case-banner figcaption { padding: 12px 15px 0; }
  .finding-grid, .persona-grid, .paired-copy, .sketch-grid { grid-template-columns: 1fr; }
  .experience-layout { grid-template-columns: 1fr; gap: 38px; }
  .experience-intro { max-width: 100%; }
  .persona-grid article { min-height: 112px; padding: 20px; gap: 18px; border-radius: 24px; }
  .experience-image { height: 280px; }
  .finding-grid article { min-height: 235px; }
  .finding-grid h3 { margin-top: 34px; }
  .flow-stack { padding: 48px 0 78px; }
  .flow-stack > img, .flow-stack > blockquote { width: calc(100% - 30px); margin-bottom: 25px; }
  .flow-stack > img { min-height: 220px; object-fit: contain; }
  .flow-stack > blockquote { margin-top: 40px; margin-bottom: 48px; }
  .paired-copy { gap: 60px; }
  .sketch-section { padding-block: 75px; }
  .sketch-section > h2 { width: calc(100% - 30px); margin-bottom: 36px; }
  .sketch-grid { gap: 18px; }
  .impact-section { padding: 80px 0; }
  .impact-section .shell { width: calc(100% - 30px); }
  .impact-wireframes { margin-bottom: 60px; }
  .impact-copy { margin-bottom: 60px; }
  .impact-login { margin-top: 55px; }
  .screen-showcase { padding-block: 80px; }
  .screen-showcase + .screen-showcase { padding-top: 10px; }
  .screen-rail { width: 100%; gap: 15px; }
  .desktop-rail { min-height: 310px; }
  .tablet-mockup { width: 88vw; }
  .mobile-rail { min-height: 480px; }
  .phone-mockup { width: 205px; }
  .phone-mockup:nth-child(odd) { margin-top: 26px; }
  .closing-copy { gap: 48px; }
  .closing-emphasis { font-size: 20px; }
  .closing-image { height: 280px; }
  .project-pagination { padding-bottom: 90px; gap: 24px; }
  .project-pagination .case-button { padding-inline: 16px; }
  .carnot-hero { min-height: 0; padding-top: 48px; padding-bottom: 92px; }
  .carnot-hero .project-scroll-cue { bottom: 22px; }
  .case-page #project-background { scroll-margin-top: 114px; }
  .carnot-hero h1 { font-size: 36px; }
  .carnot-hero-art { width: calc(100% + 30px); margin-left: -15px; }
  .carnot-hero-image { width: 100%; }
  .carnot-problem { height: auto; padding-top: 72px; background: #171719; }
  .carnot-problem::before { inset: 610px 0 0; background: radial-gradient(circle at 18% 12%, rgba(255,188,103,.72), transparent 34%), radial-gradient(circle at 80% 82%, rgba(196,42,12,.5), transparent 42%), linear-gradient(145deg, #ff7a2c 0%, #f25b24 48%, #dc451b 100%); }
  .carnot-problem-stage { width: calc(100% - 30px); height: auto; display: flex; flex-direction: column; }
  .carnot-problem-copy { width: 100%; padding-top: 0; }
  .carnot-problem-copy h2 { margin-bottom: 24px; }
  .carnot-problem-details { width: 100%; padding-left: 14px; }
  .carnot-problem-details p { font-size: 15px; }
  .problem-main-phone { width: min(230px, 68vw); position: relative; top: auto; right: auto; margin: 48px auto 0; }
  .problem-phone-row { width: 100%; position: relative; left: auto; top: auto; margin: 46px 0 0; padding: 0 12px 54px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .process-intro { margin-bottom: 34px; }
  .process-intro h2 { font-size: 27px; }
  .process-intro p { font-size: 15px; }
  .process-flow { grid-template-columns: 1fr; padding: 16px; border-radius: 22px; }
  .process-step { padding: 20px; }
  .process-marker { margin-bottom: 22px; }
  .carnot-focus-grid, .carnot-impact-grid { grid-template-columns: 1fr; }
  .carnot-impact-grid article { min-height: 280px; }
  .carnot-slide { border-radius: 10px; }
  .carnot-desktop-rail { gap: 15px; }
  .carnot-desktop-mockup { width: 88vw; flex-basis: 88vw; }
  .tall-mobile-composite { max-height: 520px; }
  .carnot-mobile-sequences { padding-top: 32px; }
  .carnot-mobile-grid { width: calc(100% - 30px); overflow: visible; padding: 12px 0 30px; }
  .carnot-mobile-grid-primary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 14px; align-items: start; }
  .carnot-mobile-grid-primary .mobile-mockup-large,
  .carnot-mobile-grid-primary .mobile-mockup-compact { width: 100%; max-width: 276px; margin-top: 0; }
  .carnot-mobile-grid-secondary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: none; gap: 28px 14px; align-items: start; }
  .carnot-mobile-grid-secondary .mobile-mockup,
  .carnot-mobile-grid-secondary .mobile-mockup:nth-child(n) { width: 100%; max-width: 276px; grid-column: auto; grid-row: auto; margin-top: 0; }
  .carnot-mobile-note-secondary { margin: 58px 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .project-scroll-cue span, .carnot-hero h1 .carnot-title-accent, .carnot-city, .carnot-car, .carnot-seller, .carnot-buyer, .carnot-phone, .car-headlight-beam, .car-exhaust-flame, .car-exhaust-flame::before, .car-exhaust-flame::after { animation: none; }
  .process-flow.visible .process-progress, .process-flow.visible .process-step { animation: none; }
  .process-progress { transform: scaleX(1); }
  .process-step { opacity: 1; transform: none; }
  .car-headlight-beam { opacity: .65; }
  .car-exhaust-flame { display: none; }
}

/* Keep AdServer-specific proportions above the shared case-study defaults. */
.adserver-page .adserver-hero { padding-top: 86px; padding-bottom: 118px; }
.adserver-page .adserver-hero h1 { width: min(870px, calc(100% - 130px)); margin-bottom: 28px; font-size: 36px; line-height: 1.35; }
.adserver-page .adserver-problem h2 { font-size: 32px; }
.adserver-page .adserver-key-insight h2 { font-size: 32px; }
.adserver-page .adserver-showcase-heading h2 { font-size: 28px; }

@media (max-width: 680px) {
  .adserver-page .adserver-hero { padding-top: 46px; padding-bottom: 92px; }
  .adserver-page .adserver-hero h1 { width: 100%; margin: 0 0 34px; text-align: left; font-size: 30px; line-height: 1.34; }
  .adserver-page .adserver-hero .project-scroll-cue { bottom: 28px; }
  .adserver-page .adserver-problem h2 { font-size: 28px; }
  .adserver-page .adserver-key-insight h2 { font-size: 27px; }
  .adserver-page .adserver-showcase-heading h2 { font-size: 24px; }
  .adserver-page .case-facts { width: 100%; min-width: 0; }
  .adserver-page .case-facts strong, .adserver-page .case-facts p { min-width: 0; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  .adserver-title-accent, .adserver-hero-visual::before, .adserver-hero-visual img, .adserver-orbit { animation: none; }
}

/* PerfectJob case study */
.perfectjobs-page { --perfect-blue: #0189c5; --perfect-blue-soft: #64c8ef; }
.perfectjobs-page .case-facts span, .perfectjobs-page .case-button { color: #fff; background-color: var(--perfect-blue); }
.perfectjobs-hero { padding-top: 86px; padding-bottom: 112px; overflow: hidden; }
.perfectjobs-hero h1 { width: min(850px,calc(100% - 130px)); margin-bottom: 36px; font-family: "Inter","Open Sans",sans-serif; font-size: 36px; line-height: 1.3; }
.perfectjobs-hero h1 > span { color: var(--perfect-blue); }
.perfectjobs-hero-visual { --hero-motion-rgb: 1,137,197; width: min(1135px,100%); aspect-ratio: 1135 / 413; margin: 0 auto; }
.perfectjobs-hero-image { width: 100%; height: auto; position: relative; z-index: 2; display: block; margin: 0 auto; filter: drop-shadow(0 26px 46px rgba(0,0,0,.42)); animation: project-hero-float 5.5s ease-in-out infinite; }
.perfectjobs-hero .project-scroll-cue { bottom: 32px; border-color: rgba(1,137,197,.48); box-shadow: 0 0 20px rgba(1,137,197,.13); }
.perfectjobs-eyebrow { margin: 0 0 12px !important; color: var(--perfect-blue-soft) !important; font-size: 12px !important; line-height: 1.4 !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.perfectjobs-objective { padding: 112px 0; background: linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.035)); }
.perfectjobs-objective h2 { width: min(960px,100%); margin: 0 0 48px; font-size: 27px; font-style: italic; }
.perfectjobs-objective-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.perfectjobs-objective-copy article { padding: 34px; border: 1px solid rgba(100,200,239,.18); border-radius: 22px; background: rgba(6,17,23,.45); }
.perfectjobs-objective-copy span { color: var(--perfect-blue-soft); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.perfectjobs-objective-copy h3 { margin: 42px 0 14px; font-size: 21px; }
.perfectjobs-objective-copy p { margin: 0; }
.perfectjobs-recruiter { display: grid; grid-template-columns: 1fr .9fr; gap: 70px; align-items: center; }
.perfectjobs-recruiter img { width: 100%; height: auto; border-radius: 22px; }
.perfectjobs-value-section { padding-block: 118px; }
.perfectjobs-value-section + .perfectjobs-value-section { padding-top: 22px; }
.perfectjobs-value-section > div { width: min(960px,100%); margin-bottom: 46px; }
.perfectjobs-value-section h2 { margin-bottom: 22px; font-size: 24px; text-transform: uppercase; }
.perfectjobs-value-section h2 span { color: #8d8f8e; font-weight: 400; }
.value-map { --map-gradient: linear-gradient(110deg,#2a64ec 0%,#6c4096 36.5%,#e00000 100%); width: min(960px,100%); margin-inline: auto; position: relative; isolation: isolate; font-family: "Inter","Open Sans",sans-serif; }
.value-map-customer { aspect-ratio: 960 / 716; }
.value-map-business { aspect-ratio: 960 / 729; }
.value-map-outline { position: absolute; z-index: 0; display: block; opacity: 0; transform: scale(.86) rotate(-5deg); }
.value-map-customer .value-map-outline { left: 13.13%; top: 0; width: 74.69%; height: auto; }
.value-map-business .value-map-outline { left: 11.56%; top: 0; width: 75.94%; height: 100%; border: clamp(3px,.39vw,5.602px) solid transparent; background: linear-gradient(#050505,#050505) padding-box,var(--map-gradient) border-box; }
.value-map-hub { position: absolute; z-index: 5; display: block; border-radius: 50%; opacity: 0; transform: scale(.65) rotate(-12deg); }
.value-map-customer .value-map-hub { left: 44.17%; top: 41.62%; width: 12.4%; aspect-ratio: 1; }
.value-map-business .value-map-hub { left: 43.23%; top: 41.7%; width: 12.7%; aspect-ratio: 1; }
.value-map-hub-shape { display: block; width: 100%; height: auto; }
.value-map-hub-icon { position: absolute; left: 26%; top: 26%; display: block; width: 48%; height: auto; }
.value-map-connector { --connector-angle: 0deg; position: absolute; z-index: 1; display: block; height: auto; opacity: 0; transform: rotate(var(--connector-angle)) scaleX(0); transform-origin: left center; }
.value-map-customer .value-map-axis { --connector-angle: 180deg; left: 44.17%; top: 47.94%; width: 44.2%; }
.value-map-business .value-map-axis { left: 55.83%; top: 48.65%; width: 44.17%; }
.value-map-customer .value-map-diagonal-top { --connector-angle: 135deg; left: 76.15%; top: 16.06%; width: 30.13%; }
.value-map-customer .value-map-diagonal-bottom { --connector-angle: -135deg; left: 75.94%; top: 84.22%; width: 30.13%; }
.value-map-business .value-map-diagonal-top { --connector-angle: 45deg; left: 12.5%; top: 2.33%; width: 45.58%; }
.value-map-business .value-map-diagonal-bottom { --connector-angle: -45deg; left: 13.02%; top: 98.35%; width: 45.58%; }
.value-map-label { position: absolute; z-index: 6; color: #d8d8d8; line-height: normal; opacity: 0; }
.value-map-customer .value-map-label { font-size: clamp(14px,2.1vw,24px); font-weight: 500; text-transform: uppercase; }
.value-map-customer .value-map-label-jobs { font-size: clamp(12px,1.8vw,20px); font-weight: 600; }
.value-map-business .value-map-label { font-size: clamp(12px,1.8vw,20px); font-weight: 600; letter-spacing: .02em; }
.value-map-customer .value-map-label-pain { left: 31.45%; top: 42.88%; }
.value-map-customer .value-map-label-gains { left: 30.52%; top: 52.93%; }
.value-map-customer .value-map-label-jobs { left: 57.3%; top: 48.04%; }
.value-map-business .value-map-label-products { left: 23.65%; top: 45.95%; }
.value-map-business .value-map-label-creators { left: 60.21%; top: 41.56%; }
.value-map-business .value-map-label-relievers { left: 60.52%; top: 55.14%; }
.value-map-card { min-height: 7.55%; padding: 10px 20px; position: absolute; z-index: 3; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); display: grid; place-items: center; border: 0; border-radius: 0; color: #000; font-size: clamp(9px,1.46vw,14px); line-height: normal; font-weight: 400; text-align: center; box-shadow: none; opacity: 0; transform: translateY(18px) scale(.92); transition: filter .28s ease,box-shadow .28s ease,translate .28s ease; }
.value-map-card.tone-pain,.value-map-card.tone-product { background: rgba(239,170,123,.86); }
.value-map-card.tone-gain { background: rgba(146,199,148,.86); }
.value-map-business .value-map-card.tone-gain { background: rgba(146,199,148,.9); }
.value-map-card.tone-job { background: rgba(109,199,255,.86); }
.value-map.visible .value-map-outline { animation: value-outline-in .9s cubic-bezier(.2,.8,.2,1) .15s both; }
.value-map.visible .value-map-hub { animation: value-hub-in .65s cubic-bezier(.2,.9,.2,1.2) .35s both,value-hub-pulse 3.4s ease-in-out 1.2s infinite; }
.value-map.visible .value-map-connector { animation: value-line-in .75s cubic-bezier(.2,.8,.2,1) .55s both; }
.value-map.visible .value-map-label { animation: value-label-in .5s ease .62s both; }
.value-map.visible .value-map-card { animation: value-card-in .58s cubic-bezier(.18,.85,.22,1.15) var(--delay,.8s) both; }
.value-map:has(.value-map-card:hover) .value-map-card:not(:hover) { filter: saturate(.55) brightness(.72); }
.value-map-card:hover { z-index: 10; translate: 0 -6px; filter: saturate(1.15) brightness(1.05); box-shadow: 0 0 0 2px rgba(255,255,255,.32),0 16px 34px rgba(0,0,0,.4),0 0 24px rgba(76,157,255,.2); }
@keyframes value-outline-in { from { opacity: 0; transform: scale(.86) rotate(-5deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes value-hub-in { from { opacity: 0; transform: scale(.65) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes value-hub-pulse { 0%,100% { filter: drop-shadow(0 0 10px rgba(92,78,194,.25)); } 50% { filter: drop-shadow(0 0 20px rgba(172,46,112,.5)); } }
@keyframes value-line-in { from { opacity: 0; transform: rotate(var(--connector-angle)) scaleX(0); } to { opacity: 1; transform: rotate(var(--connector-angle)) scaleX(1); } }
@keyframes value-label-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes value-card-in { from { opacity: 0; transform: translateY(18px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 760px) {
  .value-map { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; padding: 22px 15px; border: 1px solid #282a29; border-radius: 20px; background: radial-gradient(circle at 50% 6%,rgba(56,92,184,.13),transparent 33%),#0d0e0e; }
  .value-map-outline,.value-map-connector { display: none; }
  .value-map-hub { width: 76px !important; height: 76px; position: relative; left: auto !important; top: auto !important; grid-column: 1 / -1; justify-self: center; margin-bottom: 8px; order: 0; }
  .value-map-label { position: relative; left: auto !important; top: auto !important; grid-column: 1 / -1; margin: 17px 0 2px; font-size: 13px; text-align: center; }
  .value-map-card { min-height: 58px; position: relative; left: auto; top: auto; width: auto; padding: 10px 12px; font-size: 11px; }
  .value-map-label-pain,.value-map-label-products { order: 10; }
  .value-map-card[data-group="pain"],.value-map-card[data-group="product"] { order: 11; }
  .value-map-label-gains,.value-map-label-creators { order: 20; }
  .value-map-card[data-group="gain"],.value-map-card[data-group="creator"] { order: 21; }
  .value-map-label-jobs,.value-map-label-relievers { order: 30; }
  .value-map-card[data-group="job"],.value-map-card[data-group="reliever"] { order: 31; }
}

@media (max-width: 430px) {
  .value-map { grid-template-columns: 1fr; }
}
.perfectjobs-alignment { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.perfectjobs-alignment > img { width: min(418px,100%); height: auto; justify-self: end; border-radius: 18px; }
.perfectjobs-strategy { padding-block: 118px; }
.perfectjobs-strategy-intro { width: min(820px,100%); margin-bottom: 54px; }
.perfectjobs-strategy-intro h2 { margin-bottom: 18px; }
.perfectjobs-strategy-steps { list-style: none; display: grid; gap: 16px; margin: 0; padding: 0; }
.perfectjobs-strategy-steps li { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 28px 30px; border: 1px solid rgba(100,200,239,.14); border-radius: 16px; background: linear-gradient(115deg,rgba(100,200,239,.075),rgba(255,255,255,.025)); transition: border-color .35s ease, transform .35s ease, background .35s ease; }
.perfectjobs-strategy-steps li:hover { transform: translateX(8px); border-color: rgba(100,200,239,.42); background: linear-gradient(115deg,rgba(100,200,239,.13),rgba(255,255,255,.035)); }
.perfectjobs-strategy-steps li > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--perfect-blue-soft); background: rgba(1,137,197,.13); font-size: 13px; font-weight: 700; }
.perfectjobs-strategy-steps h3 { margin: 4px 0 10px; font-size: 18px; }
.perfectjobs-strategy-steps p { margin: 0; }
.perfectjobs-showcase { padding: 118px 0; overflow: hidden; background: radial-gradient(circle at 78% 14%,rgba(1,137,197,.14),transparent 35%),#101112; }
.perfectjobs-showcase h2 { margin-bottom: 18px; }
.perfectjobs-lede { width: min(820px,100%); margin-bottom: 58px; }
.perfectjobs-mockup-rail { width: min(100%,1440px); min-height: 500px; margin: 0 auto; padding: 4px 24px 24px; gap: 22px; }
.perfectjobs-web-mockup { flex: 0 0 auto; position: relative; width: min(78vw,780px); aspect-ratio: 780 / 475; margin: 0; scroll-snap-align: start; }
.perfectjobs-web-screen { position: absolute; z-index: 0; left: .77%; top: 1.47%; width: 98.56%; height: 96.84%; overflow: hidden; border-radius: 12px; background: #e9ebea; }
.perfectjobs-web-screen img { position: absolute; left: 0; top: var(--screen-top); width: 100%; height: var(--screen-height); max-width: none; object-fit: fill; pointer-events: none; }
.perfectjobs-web-case, .perfectjobs-web-frame { position: absolute; z-index: 2; max-width: none; pointer-events: none; }
.perfectjobs-web-case { left: -.26%; top: -.42%; width: 100.52%; height: 100.84%; }
.perfectjobs-web-frame { inset: 0; width: 100%; height: 100%; }
.perfectjobs-mobile-heading { margin-top: 110px; margin-bottom: 50px; }
.perfectjobs-mobile-heading h2 { margin-bottom: 0; }
.perfectjobs-mobile-grid { width: min(calc(100% - 48px),908px); display: grid; grid-template-columns: repeat(3,272px); justify-content: center; gap: 42px 20px; margin: 0 auto; padding-top: 41px; }
.perfectjobs-mobile-grid:focus-visible { outline: 2px solid var(--perfect-blue); outline-offset: 8px; }
.perfectjobs-mobile-mockup { position: relative; width: 272px; aspect-ratio: 272 / 576; margin: 0; }
.perfectjobs-mobile-mockup:nth-child(2), .perfectjobs-mobile-mockup:nth-child(5) { transform: translateY(-41px); }
.perfectjobs-mobile-screen { position: absolute; z-index: 0; inset: 1.22% 2.21% 1.12%; overflow: hidden; border-radius: 17px; background: #e9ebea; }
.perfectjobs-mobile-screen img { position: absolute; left: 0; top: var(--screen-top); width: 100%; height: var(--screen-height); max-width: none; object-fit: fill; pointer-events: none; }
.perfectjobs-mobile-case, .perfectjobs-mobile-frame { position: absolute; z-index: 2; max-width: none; pointer-events: none; }
.perfectjobs-mobile-case { left: -.74%; top: -.35%; width: 101.48%; height: 100.7%; }
.perfectjobs-mobile-frame { inset: 0; width: 100%; height: 100%; }
.perfectjobs-screen-pair { width: min(calc(100% - 48px),960px); display: grid; gap: 64px; padding-block: 120px; }
.perfectjobs-screen-pair img { width: 100%; height: auto; display: block; border-radius: 18px; }
.perfectjobs-outcomes h2 { margin-bottom: 48px; }
.perfectjobs-decision-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.perfectjobs-decision-grid article { min-height: 352px; position: relative; display: flex; flex-direction: column; padding: 30px 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.04); border-radius: 4px; background: #1b1b1b; transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s ease, box-shadow .4s ease; }
.perfectjobs-decision-grid article::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 12%,rgba(1,137,197,.18),transparent 42%); opacity: 0; transition: opacity .4s ease; }
.perfectjobs-decision-grid article:hover { transform: translateY(-10px); border-color: rgba(100,200,239,.3); box-shadow: 0 24px 48px rgba(0,0,0,.32),0 0 34px rgba(1,137,197,.08); }
.perfectjobs-decision-grid article:hover::before { opacity: 1; }
.perfectjobs-decision-grid article:nth-child(2)[data-reveal] { transition-delay: .12s; }
.perfectjobs-decision-grid article:nth-child(3)[data-reveal] { transition-delay: .24s; }
.perfectjobs-decision-grid span, .perfectjobs-decision-grid h3, .perfectjobs-decision-grid p, .perfectjobs-decision-grid i { position: relative; z-index: 1; }
.perfectjobs-decision-grid span { color: var(--perfect-blue-soft); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.perfectjobs-decision-grid h3 { margin: 30px 0 20px; color: #d8d8d8; font-size: 18px; line-height: 1.55; }
.perfectjobs-decision-grid p { margin: 0; }
.perfectjobs-decision-grid i { width: 34px; height: 34px; display: grid; place-items: center; margin: auto 0 0 auto; border-radius: 50%; color: var(--perfect-blue-soft); background: rgba(1,137,197,.12); font-style: normal; transition: transform .4s ease, background .4s ease; }
.perfectjobs-decision-grid article:hover i { transform: rotate(45deg); background: rgba(1,137,197,.24); }
.perfectjobs-journey { padding: 40px 0 118px; }
.perfectjobs-journey-intro { margin-bottom: 46px; }
.perfectjobs-journey-steps { list-style: none; display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin: 0 0 70px; padding: 0; }
.perfectjobs-journey-steps li { min-height: 250px; position: relative; display: flex; flex-direction: column; align-items: center; padding: 28px 18px; border: 1px solid rgba(100,200,239,.15); border-radius: 18px; background: linear-gradient(145deg,#171b1e,#0e0f10); text-align: center; }
.perfectjobs-journey-steps li:not(:last-child)::after { content: "→"; position: absolute; right: -20px; top: 50%; z-index: 3; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--perfect-blue-soft); background: #0b0c0d; font-size: 13px; transform: translateY(-50%); }
.perfectjobs-journey-steps b { align-self: flex-start; color: var(--perfect-blue-soft); font-size: 12px; letter-spacing: .12em; }
.perfectjobs-journey-steps li > span { width: 74px; height: 74px; display: grid; place-items: center; margin: 18px 0; border-radius: 50%; color: #d8d8d8; background: rgba(1,137,197,.14); font-size: 27px; }
.perfectjobs-journey-steps h3 { margin: 0 0 8px; font-size: 16px; }
.perfectjobs-journey-steps p { margin: 0; font-size: 13px; line-height: 1.55; }
.perfectjobs-mobile-flow { width: min(860px,100%); height: auto; display: block; margin-inline: auto; }
.perfectjobs-flow-comparison { padding-block: 118px; border-top: 1px solid #28282c; }
.perfectjobs-flow-comparison > h2 { margin-bottom: 48px; }
.perfectjobs-flow-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.perfectjobs-flow-copy article { min-height: 230px; padding: 30px; border-left: 4px solid #3d3d3d; background: #131413; }
.perfectjobs-flow-copy article:last-child { border-color: var(--perfect-blue); }
.perfectjobs-flow-copy h3 { margin: 0 0 22px; font-size: 22px; }
.perfectjobs-flow-copy h3 span, .perfectjobs-scope h2 span { color: #8d8f8e; font-weight: 400; }
.perfectjobs-flow-copy p { margin: 0 0 16px; }
.perfectjobs-flow-visual { display: grid; grid-template-columns: minmax(0,579px) 44px minmax(160px,205px); gap: 18px; align-items: center; justify-content: center; margin-top: 52px; }
.perfectjobs-flow-visual img { width: 100%; height: 178px; display: block; object-fit: cover; }
.perfectjobs-flow-visual > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--perfect-blue-soft); background: rgba(1,137,197,.14); }
.perfectjobs-scope { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: start; padding-block: 118px; }
.perfectjobs-scope h2 { font-size: 36px; line-height: 1.35; }
.perfectjobs-scope ol { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; counter-reset: scope; }
.perfectjobs-scope li { counter-increment: scope; position: relative; padding: 24px 24px 24px 72px; border: 1px solid rgba(100,200,239,.13); border-radius: 14px; background: rgba(255,255,255,.025); color: #d8d8d8; }
.perfectjobs-scope li::before { content: counter(scope,decimal-leading-zero); position: absolute; left: 22px; top: 22px; color: var(--perfect-blue-soft); font-size: 12px; font-weight: 700; }
.perfectjobs-results { display: grid; gap: 48px; }
.perfectjobs-results > div:first-child { width: min(760px,100%); }
.perfectjobs-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; padding: 8px; border-radius: 10px; background: #090a0a; box-shadow: 0 24px 70px rgba(0,0,0,.3); }
.perfectjobs-metrics article { min-height: 180px; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 24px; overflow: hidden; background: #151616; transition: background .35s ease, transform .35s ease; }
.perfectjobs-metrics article::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: linear-gradient(90deg,var(--perfect-blue),var(--perfect-blue-soft)); transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.perfectjobs-metrics.visible article::after { width: 100%; }
.perfectjobs-metrics article:hover { z-index: 1; transform: translateY(-5px); background: #1a2023; }
.perfectjobs-metrics small { margin-bottom: 8px; color: #777b7d; font-size: 12px; }
.perfectjobs-metrics strong { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; color: #b5b8b6; font-size: clamp(34px,4vw,44px); line-height: 1.2; }
.perfectjobs-metrics strong i { color: var(--perfect-blue-soft); font-size: 20px; font-style: normal; }
.perfectjobs-metrics article > span { color: #8d8f8e; font-size: 14px; line-height: 1.45; }
.perfectjobs-challenges { padding: 110px 0; background: #090a0a; }
.perfectjobs-challenges .shell { width: min(calc(100% - 48px),960px); }
.perfectjobs-challenge-list { display: grid; gap: 28px; margin-top: 32px; }
.perfectjobs-challenge-list article { padding: 4px 0 4px 36px; border-left: 4px solid #3d3d3d; }
.perfectjobs-challenge-list h3 { margin: 0 0 10px; font-size: 24px; }
.perfectjobs-challenge-list p { width: min(820px,100%); margin: 0 0 8px; font-size: 18px; font-style: italic; line-height: 1.65; }
.perfectjobs-hrm { padding-block: 118px; overflow: hidden; }
.perfectjobs-hrm > .shell { width: min(calc(100% - 48px),960px); }
.perfectjobs-hrm > .shell h2 span { color: #8d8f8e; font-weight: 400; }
.perfectjobs-hrm > .shell p:last-child { width: min(800px,100%); }
.perfectjobs-hrm-rail { width: min(100%,1440px); min-height: 500px; margin: 58px auto 0; padding: 4px 24px 24px; gap: 22px; }
.perfectjobs-hrm-overlay { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: fill !important; }
.perfectjobs-lessons { display: grid; grid-template-columns: .65fr 1.35fr; gap: 92px; border-top: 1px solid #28282d; }
.perfectjobs-lessons p { margin: 0 0 20px; }
.perfectjobs-lessons strong { color: #fff; }

@media (max-width: 900px) {
  .perfectjobs-recruiter, .perfectjobs-alignment, .perfectjobs-lessons { grid-template-columns: 1fr; gap: 44px; }
  .perfectjobs-objective-copy { grid-template-columns: 1fr; }
  .perfectjobs-recruiter img { width: min(620px,100%); margin-inline: auto; }
  .perfectjobs-alignment > img { justify-self: center; }
  .perfectjobs-decision-grid { grid-template-columns: 1fr; }
  .perfectjobs-decision-grid article { min-height: 290px; }
  .perfectjobs-journey-steps { grid-template-columns: repeat(2,1fr); }
  .perfectjobs-journey-steps li:nth-child(2)::after { display: none; }
  .perfectjobs-flow-copy, .perfectjobs-scope { grid-template-columns: 1fr; }
  .perfectjobs-metrics { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 680px) {
  .project-year, .project-hero-year { margin-left: .35em; padding: 5px 8px; font-size: 11px !important; }
  .perfectjobs-hero { padding-top: 46px; padding-bottom: 92px; }
  .perfectjobs-hero h1 { width: 100%; margin: 0 0 34px; text-align: left; font-size: 30px; }
  .perfectjobs-hero-visual { width: calc(100% + 30px); margin-left: -15px; }
  .perfectjobs-objective, .perfectjobs-value-section, .perfectjobs-strategy, .perfectjobs-showcase, .perfectjobs-challenges { padding-block: 78px; }
  .perfectjobs-objective-copy article { padding: 26px 24px; }
  .perfectjobs-objective-copy h3 { margin-top: 30px; }
  .perfectjobs-value-section + .perfectjobs-value-section { padding-top: 0; }
  .perfectjobs-value-section h2 { font-size: 20px; }
  .perfectjobs-strategy-steps li { grid-template-columns: 42px 1fr; gap: 14px; padding: 22px 18px; }
  .perfectjobs-strategy-steps li:hover { transform: none; }
  .perfectjobs-mockup-rail { min-height: 310px; padding-inline: 15px; }
  .perfectjobs-web-mockup { width: 88vw; }
  .perfectjobs-mobile-heading { margin-top: 76px; }
  .perfectjobs-mobile-grid { width: 100%; display: flex; justify-content: flex-start; gap: 18px; overflow-x: auto; padding: 41px 15px 20px; scrollbar-width: none; cursor: grab; }
  .perfectjobs-mobile-grid::-webkit-scrollbar { display: none; }
  .perfectjobs-mobile-mockup { flex: 0 0 230px; }
  .perfectjobs-mobile-mockup:nth-child(2), .perfectjobs-mobile-mockup:nth-child(5) { transform: none; }
  .perfectjobs-screen-pair { width: calc(100% - 30px); gap: 34px; padding-block: 78px; }
  .perfectjobs-screen-pair img, .perfectjobs-hrm img { border-radius: 10px; }
  .perfectjobs-journey { padding-top: 20px; padding-bottom: 78px; }
  .perfectjobs-journey-steps { grid-template-columns: 1fr; }
  .perfectjobs-journey-steps li { min-height: 220px; }
  .perfectjobs-journey-steps li::after { display: none; }
  .perfectjobs-flow-comparison, .perfectjobs-scope, .perfectjobs-hrm { padding-block: 78px; }
  .perfectjobs-flow-copy { grid-template-columns: 1fr; }
  .perfectjobs-flow-visual { grid-template-columns: 1fr; }
  .perfectjobs-flow-visual img { height: auto; }
  .perfectjobs-flow-visual > span { margin-inline: auto; transform: rotate(90deg); }
  .perfectjobs-scope h2 { font-size: 28px; }
  .perfectjobs-challenge-list article { padding-left: 22px; }
  .perfectjobs-challenge-list p { font-size: 16px; }
  .perfectjobs-hrm-rail { min-height: 310px; margin-top: 42px; padding-inline: 15px; }
  .perfectjobs-metrics { grid-template-columns: 1fr; }
  .perfectjobs-metrics article { min-height: 150px; }
  .perfectjobs-challenges .shell { width: calc(100% - 30px); }
  .perfectjobs-challenges p:last-child { font-size: 16px; }
}

/* Shared project-slider motion and the remaining PerfectJob section choreography. */
[data-drag-scroll].auto-looping { scroll-snap-type: none; }
[data-drag-scroll].dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }

.carnot-mobile-grid[data-drag-scroll],
.perfectjobs-mobile-grid[data-drag-scroll] {
  width: 100%;
  max-width: none;
  min-height: 620px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 22px;
  margin-inline: auto;
  padding: 41px 24px 30px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: none;
  cursor: grab;
}
.carnot-mobile-grid[data-drag-scroll]::-webkit-scrollbar,
.perfectjobs-mobile-grid[data-drag-scroll]::-webkit-scrollbar { display: none; }
.carnot-mobile-grid[data-drag-scroll].auto-looping,
.perfectjobs-mobile-grid[data-drag-scroll].auto-looping { scroll-snap-type: none; }
.carnot-mobile-grid[data-drag-scroll] .mobile-mockup { grid-column: auto; grid-row: auto; margin-top: 0; scroll-snap-align: start; }
.carnot-mobile-grid-primary[data-drag-scroll] .mobile-mockup-large { width: 276px; flex: 0 0 276px; }
.carnot-mobile-grid-primary[data-drag-scroll] .mobile-mockup-compact { width: 228px; flex: 0 0 228px; }
.carnot-mobile-grid-secondary[data-drag-scroll] .mobile-mockup { width: 276px; flex: 0 0 276px; }
.perfectjobs-mobile-grid[data-drag-scroll] .perfectjobs-mobile-mockup { flex: 0 0 272px; scroll-snap-align: start; transform: none; }

.perfectjobs-journey-steps li:nth-child(2)[data-reveal],
.perfectjobs-challenge-list article:nth-child(2)[data-reveal],
.perfectjobs-scope li:nth-child(2)[data-reveal] { transition-delay: .12s; }
.perfectjobs-journey-steps li:nth-child(3)[data-reveal],
.perfectjobs-scope li:nth-child(3)[data-reveal] { transition-delay: .24s; }
.perfectjobs-journey-steps li:nth-child(4)[data-reveal],
.perfectjobs-scope li:nth-child(4)[data-reveal] { transition-delay: .36s; }
.perfectjobs-journey-steps li.visible > span { animation: perfectjob-step-pulse 3s ease-in-out infinite; }
.perfectjobs-journey-steps li:nth-child(2).visible > span { animation-delay: .35s; }
.perfectjobs-journey-steps li:nth-child(3).visible > span { animation-delay: .7s; }
.perfectjobs-journey-steps li:nth-child(4).visible > span { animation-delay: 1.05s; }
.perfectjobs-journey-steps li.visible::after { animation: perfectjob-arrow-travel 1.8s ease-in-out infinite; }
.perfectjobs-flow-visual.visible > span { animation: perfectjob-flow-arrow 1.8s ease-in-out infinite; }
.perfectjobs-mobile-flow.visible { animation: perfectjob-flow-glow 4.5s ease-in-out infinite alternate; }
.perfectjobs-challenge-list article { transition: border-color .7s ease, box-shadow .7s ease, opacity .75s ease, transform .75s cubic-bezier(.2,.8,.2,1); }
.perfectjobs-challenge-list article.visible { border-color: var(--perfect-blue); box-shadow: -18px 0 34px -28px rgba(100,200,239,.8); }
.perfectjobs-scope li.visible { border-color: rgba(100,200,239,.32); box-shadow: 0 14px 36px rgba(0,0,0,.16); }
.perfectjobs-metrics.visible article:nth-child(2)::after { transition-delay: .12s; }
.perfectjobs-metrics.visible article:nth-child(3)::after { transition-delay: .24s; }
.perfectjobs-metrics.visible article:nth-child(4)::after { transition-delay: .36s; }

@keyframes perfectjob-step-pulse {
  0%, 100% { scale: 1; box-shadow: 0 0 0 0 rgba(100,200,239,0); }
  50% { scale: 1.06; box-shadow: 0 0 0 10px rgba(100,200,239,.055); }
}
@keyframes perfectjob-arrow-travel { 0%, 100% { translate: 0 0; } 50% { translate: 5px 0; } }
@keyframes perfectjob-flow-arrow { 0%, 100% { scale: 1; box-shadow: 0 0 0 rgba(1,137,197,0); } 50% { scale: 1.1; box-shadow: 0 0 24px rgba(1,137,197,.24); } }
@keyframes perfectjob-flow-glow { from { filter: drop-shadow(0 10px 18px rgba(1,137,197,.02)); } to { filter: drop-shadow(0 16px 30px rgba(1,137,197,.16)); } }

@media (max-width: 680px) {
  .carnot-mobile-grid[data-drag-scroll],
  .perfectjobs-mobile-grid[data-drag-scroll] { min-height: 510px; gap: 18px; padding: 28px 15px 24px; }
  .carnot-mobile-grid-primary[data-drag-scroll] .mobile-mockup-large,
  .carnot-mobile-grid-primary[data-drag-scroll] .mobile-mockup-compact,
  .carnot-mobile-grid-secondary[data-drag-scroll] .mobile-mockup { width: min(70vw,276px); flex-basis: min(70vw,276px); }
  .perfectjobs-mobile-grid[data-drag-scroll] .perfectjobs-mobile-mockup { flex-basis: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-drag-scroll] > * { opacity: 1; translate: 0; filter: none; transition: none; }
  [data-drag-scroll].rail-visible > *:hover { translate: 0; }
  .perfectjobs-journey-steps li.visible > span,
  .perfectjobs-journey-steps li.visible::after,
  .perfectjobs-flow-visual.visible > span,
  .perfectjobs-mobile-flow.visible { animation: none; }
}

/* Full-bleed project showcases: aligned copy with edge-to-edge mockup rails. */
.screen-showcase.shell {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  overflow: hidden;
}
.screen-showcase.shell > h2,
.screen-showcase.shell > .adserver-showcase-heading,
.screen-showcase.shell > .confidentiality-note {
  width: min(calc(100% - 48px),var(--shell));
  margin-left: auto;
  margin-right: auto;
}
.screen-showcase.shell > .screen-rail,
.screen-showcase.shell .carnot-dashboard-showcase > .screen-rail {
  width: min(100%,1440px);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
.screen-showcase.shell .carnot-mobile-grid {
  width: min(972px,calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}
.screen-showcase.shell .carnot-mobile-grid-primary { width: min(968px,calc(100% - 48px)); }
.screen-showcase.shell > .screen-rail { margin-top: 34px; }
.screen-showcase.shell > .confidentiality-note { margin-top: 36px; }
.screen-showcase.shell > .carnot-mobile-sequences { width: 100%; }
.screen-showcase.shell .carnot-dashboard-showcase { width: 100%; }
.perfectjobs-mobile-grid[data-drag-scroll] {
  width: min(calc(100% - 48px),1440px);
  padding-left: 24px;
  padding-right: 24px;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}
.screen-showcase.shell .carnot-mobile-grid[data-drag-scroll] {
  width: min(calc(100% - 48px),1440px);
  padding-left: 24px;
  padding-right: 24px;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}

@media (max-width: 680px) {
  .screen-showcase.shell > h2,
  .screen-showcase.shell > .adserver-showcase-heading,
  .screen-showcase.shell > .confidentiality-note { width: calc(100% - 30px); }
  .screen-showcase.shell > .screen-rail { margin-top: 26px; }
  .screen-showcase.shell .carnot-mobile-grid,
  .screen-showcase.shell .carnot-mobile-grid-primary { width: calc(100% - 30px); }
  .perfectjobs-mobile-grid[data-drag-scroll] {
    width: calc(100% - 30px);
    padding-left: 15px;
    padding-right: 15px;
  }
  .screen-showcase.shell .carnot-mobile-grid[data-drag-scroll] {
    width: calc(100% - 30px);
    padding-left: 15px;
    padding-right: 15px;
  }
}