/* mf-story.20261026.css · Claude Code · 2026-10-26 · Codex section art merged into the v2.18 site.
   Additive only: every rule targets new elements (story-*, *-photo) or adds room for them. */
:root{--story-line:rgba(96,140,255,.34);--story-glow:0 18px 44px rgba(0,0,0,.42),0 0 26px rgba(30,110,255,.12)}

/* shared photo frame */
.story-fig{position:relative;margin:0;overflow:hidden;border:1px solid var(--story-line);border-radius:5px 18px 5px 18px;background:#060d24;box-shadow:var(--story-glow);isolation:isolate}
.story-fig img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.story-fig:hover img{transform:scale(1.035)}
.story-fig figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;gap:3px;padding:34px 16px 13px;background:linear-gradient(180deg,transparent,rgba(3,7,22,.88) 62%);text-align:left}
.story-fig figcaption b{font:800 .95rem/1.2 var(--font);color:#fff}
.story-fig figcaption small{font-size:.78rem;line-height:1.35;color:#c4d0ee}

/* chapter labels: the thread that ties the photos into one story */
.story-ch{display:flex;width:max-content;max-width:100%;align-items:center;gap:9px;margin:0 0 12px;font:600 .66rem/1 var(--tech);letter-spacing:.22em;color:#8fd8ff;text-transform:uppercase}
.story-ch em{display:inline-grid;place-items:center;min-width:30px;height:20px;padding:0 6px;font-style:normal;border:1px solid rgba(13,226,255,.55);border-radius:3px 8px 3px 8px;color:#fff;background:linear-gradient(135deg,rgba(18,78,255,.55),rgba(138,50,255,.45));box-shadow:0 0 14px rgba(22,140,255,.35)}
.section-heading .story-ch,.contact-inner>.story-ch{margin-left:auto;margin-right:auto}
.story-cine .story-ch,.story-reel-head .story-ch{display:inline-flex}

/* 01 · the idea */
.story-open{padding:0 clamp(16px,4vw,48px) clamp(26px,4vw,48px)}
.story-cine{position:relative;max-width:1250px;margin:0 auto;aspect-ratio:21/8;overflow:hidden;border:1px solid var(--story-line);border-radius:7px 26px 7px 26px;box-shadow:var(--story-glow)}
.story-cine img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.story-cine figcaption{position:absolute;inset:auto auto 0 0;max-width:min(560px,92%);display:flex;flex-direction:column;gap:6px;padding:clamp(18px,3vw,36px);background:linear-gradient(90deg,rgba(3,7,22,.86),rgba(3,7,22,.55) 70%,transparent);border-top-right-radius:22px}
.story-cine figcaption .story-ch{margin-bottom:4px}
.story-cine figcaption b{font:800 clamp(1.4rem,3vw,2.3rem)/1.05 var(--display);letter-spacing:.01em;text-transform:uppercase;color:#fff}
.story-cine figcaption small{font-size:.92rem;line-height:1.45;color:#c9d4f0}

/* why strip photos */
.why-strip li{overflow:hidden}
.why-photo{display:block;margin:-14px -14px 8px;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--story-line)}
.why-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s ease}
.why-strip li:hover .why-photo img{transform:scale(1.06)}

/* 02 · choose a door */
.door-photo{position:relative;margin:22px 0 0;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--story-line);border-radius:5px 18px 5px 18px;box-shadow:var(--story-glow);background:#060d24}
.door-slide{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .6s ease,transform 1.2s ease}
.door-slide.is-on{opacity:1;transform:none}
.door-slide img{display:block;width:100%;height:100%;object-fit:cover}
.door-photo figcaption{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:30px 16px 12px;font:700 .95rem/1.2 var(--font);color:#fff;background:linear-gradient(180deg,transparent,rgba(3,7,22,.88) 65%)}

/* 03 · capability cards */
.capability .cap-photo{display:block;margin:-19px -17px 14px;aspect-ratio:3/2;overflow:hidden;border-bottom:1px solid var(--story-line)}
.capability .cap-photo img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(1.05);transition:transform 1s ease}
.capability:hover .cap-photo img{transform:scale(1.07)}

/* BUILD IT statement over the night river town */
.statement-section{isolation:isolate}
.statement-photo{position:absolute;inset:0;z-index:-1;pointer-events:none}
.statement-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 62%;opacity:.62;filter:saturate(1.1)}
.statement-photo::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(3,6,21,.25),rgba(3,6,21,.82) 78%),linear-gradient(180deg,#030615 0%,transparent 22%,transparent 70%,#030615 100%)}

/* 04 · the missed call, told in photos */
.story-reel{position:relative;z-index:1;grid-column:1/-1;display:grid;grid-template-columns:1fr .86fr 1fr;grid-template-areas:"head head head" "a b c";gap:14px;align-items:stretch;margin-top:8px}
.story-reel-head{grid-area:head;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.story-reel-head .story-ch{margin:0}
.story-reel-head p{margin:0;font-size:.86rem;color:var(--muted)}
.story-reel .reel-a{grid-area:a;align-self:center;aspect-ratio:3/2}
.story-reel .reel-b{grid-area:b;aspect-ratio:4/5;border-color:rgba(13,226,255,.5);box-shadow:var(--story-glow),0 0 34px rgba(13,226,255,.18)}
.story-reel .reel-c{grid-area:c;align-self:center;aspect-ratio:3/2}
.pk-timeline li{overflow:hidden;padding-top:0}
.pk-timeline .tl-photo{display:block;margin:0 -12px 22px;aspect-ratio:1/1;overflow:hidden;border-bottom:1px solid var(--story-line)}
.pk-timeline .tl-photo img{display:block;width:100%;height:100%;object-fit:cover}

/* 05 · how it works */
.process-node .node-photo{display:block;margin:-28px -26px 18px;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--story-line);border-radius:5px 18px 0 0}
.process-node .node-photo img{display:block;width:100%;height:100%;object-fit:cover}
.process-node .node-count{z-index:2}
.workflow-node{overflow:hidden}
.workflow-node .wf-photo{display:block;margin:-13px -13px 4px;aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--story-line)}
.workflow-node .wf-photo img{display:block;width:100%;height:100%;object-fit:cover}

/* 06 · the people */
.aud-photo{margin:4px 0 20px;aspect-ratio:16/9}
.pk-aud-frame{grid-template-areas:"copy dash" "cards cards" "photos photos" "ind ind"}
.story-industries{grid-area:photos;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);gap:10px;min-width:0;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#2a56ff transparent}
.story-industries figure{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;scroll-snap-align:start;border:1px solid var(--story-line);border-radius:4px 14px 4px 14px;background:#060d24}
.story-industries img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s ease}
.story-industries figure:hover img{transform:scale(1.06)}
.story-industries figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 10px 9px;font:700 .78rem/1.2 var(--font);color:#fff;background:linear-gradient(180deg,transparent,rgba(3,7,22,.9) 60%)}
@media (min-width:1300px){.story-industries{grid-auto-flow:row;grid-template-columns:repeat(6,minmax(0,1fr));overflow:visible}}

/* 07 · the plan */
.plans-photo{max-width:1060px;margin:0 auto 16px;aspect-ratio:16/9}
.plans-photo figcaption{padding-top:60px}

/* 08 · the team + the work */
.about-photo{margin-top:22px;aspect-ratio:16/9}
.pk-work .work-photo{grid-column:1/-1;display:block;margin:-14px -18px 2px -14px;aspect-ratio:21/7;overflow:hidden;border-bottom:1px solid var(--story-line);border-radius:5px 17px 0 0}
.pk-work .work-photo img{display:block;width:100%;height:100%;object-fit:cover}
.pk-work{overflow:hidden}

/* 09 · your move */
.contact-photo{position:absolute;inset:0;z-index:-1;pointer-events:none}
.contact-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:30% 50%;opacity:.6}
.contact-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#030716 0%,rgba(3,7,22,.3) 26%,rgba(3,7,22,.5) 55%,rgba(3,7,22,.72) 80%,#030716 100%),radial-gradient(ellipse 46% 60% at 50% 55%,rgba(3,7,22,.55),transparent)}

/* services · pricing · contact pages */
.page-hero .hero-photo{max-width:1160px;margin:30px auto 0;aspect-ratio:21/8}
.contact-hero-photo{margin:22px auto 4px;aspect-ratio:21/7}
.division-head .div-photo{display:block;margin-top:16px;aspect-ratio:3/2;overflow:hidden;border:1px solid var(--story-line);border-radius:4px 14px 4px 14px;box-shadow:0 12px 28px rgba(0,0,0,.32)}
.division-head .div-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s ease}
.division:hover .div-photo img{transform:scale(1.04)}
.division .division-list{align-content:start;align-self:start}
.band-photo{margin-top:18px;aspect-ratio:16/9}
.build-photo{margin-top:18px;aspect-ratio:3/2}
.installment-box .installment-copy{grid-row:span 2}
.installment-box .term-photo{aspect-ratio:21/9}
.aside-photo{aspect-ratio:4/3}
.main-photo{margin-top:16px;aspect-ratio:16/9}
@media (max-width:900px){.installment-box .installment-copy{grid-row:auto}}

/* small screens */
@media (max-width:1100px){
  .pk-aud-frame{grid-template-areas:"copy" "dash" "cards" "photos" "ind"}
}
@media (max-width:900px){
  .story-cine{aspect-ratio:4/3}
  .story-cine img{object-position:58% 55%}
  .story-cine figcaption{max-width:100%;inset:auto 0 0 0;border-radius:0;background:linear-gradient(180deg,transparent,rgba(3,7,22,.9) 40%)}
  .story-reel{grid-template-columns:1fr 1fr;grid-template-areas:"head head" "b b" "a c"}
  .story-reel .reel-b{max-width:440px;width:100%;justify-self:center}
  .page-hero .hero-photo,.contact-hero-photo{aspect-ratio:16/9}
}
@media (max-width:760px){
  .why-photo{margin:-11px -11px 7px}
  .capability .cap-photo{margin:-15px -10px 11px}
  .process-node .node-photo{display:none}
  .workflow-node .wf-photo{margin:-10px -10px 4px}
  .story-reel{grid-template-columns:1fr;grid-template-areas:"head" "b" "a" "c"}
  .story-reel .reel-a,.story-reel .reel-c{aspect-ratio:16/10}
  .story-industries{grid-auto-columns:44%}
  .pk-work .work-photo{margin:-14px -14px 2px}
  .story-fig figcaption{padding:28px 12px 10px}
}
@media (prefers-reduced-motion:reduce){
  .story-fig img,.why-photo img,.cap-photo img,.story-industries img,.div-photo img,.door-slide{transition:none!important;transform:none!important}
}

/* honesty note above the footer meta */
.story-note{max-width:900px;margin:10px auto 0;font-size:.72rem;line-height:1.5;color:#8796bd;text-align:center}