/* FORME: shared teaser plus a case layout structured around the strategic story. */
.forme-shot.shot{aspect-ratio:auto;overflow:visible;background:transparent;box-shadow:none}
.forme-shot.shot::after{display:none}
.forme-shot .forme-image{position:static;width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;transform:none!important;border-radius:inherit;background:#14372c}
.forme-shot.shot>b{color:#f4f1ec;background:rgba(10,11,13,.48);padding:2px 7px;border-radius:4px}
.forme-label{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.forme-proof .forme-label{margin-bottom:22px}
.forme-work-copy{display:block;margin:7px 0 0;color:var(--grey);font-size:14px;line-height:1.45}
.forme-card>.forme-label{margin-top:10px}
.forme-case{--fc-gap:clamp(32px,6vw,88px)}
.forme-case h1,.forme-case h2,.forme-case h3,.forme-case p,.forme-case figure{margin:0}
.forme-intro{padding-top:clamp(50px,8vw,100px);padding-bottom:48px}
.forme-intro>.eyebrow{margin-bottom:32px}
.forme-intro-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--fc-gap);align-items:center}
.forme-case .forme-title{font-size:clamp(45px,6.8vw,92px);font-weight:200;line-height:.98;letter-spacing:-.058em;max-width:12ch}
.forme-intro-copy .lede{font-size:clamp(18px,1.7vw,22px);line-height:1.55;color:var(--grey)}
.forme-case .forme-disclosure{font-size:12px;line-height:1.5;color:var(--mute);margin-top:22px;max-width:42ch}
.forme-prototype-link{display:inline-flex;gap:12px;color:var(--accent);font-size:15px;margin-top:26px;border-bottom:1px solid var(--accent)66;padding-bottom:4px}
.forme-meta{display:grid;grid-template-columns:1fr 1fr 1.7fr 1fr;gap:28px;margin:60px 0 0;border-top:1px solid var(--line);padding-top:24px}
.forme-meta dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.forme-meta dd{margin:8px 0 0;font-size:15px;line-height:1.5}
.forme-case .forme-hero{margin-left:auto;margin-right:auto}
.forme-hero-art{position:relative;border-radius:12px;overflow:hidden;background:#c5cfc5}
.forme-hero-art>img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.forme-hero-lockup{position:absolute;left:28px;top:26px;display:flex;align-items:center;gap:12px;font:400 25px 'Helvetica Neue',Arial,sans-serif;letter-spacing:.19em;color:#183d31}
.forme-hero-lockup img{width:44px;height:44px}
.forme-case figcaption{font-size:12px;line-height:1.5;color:var(--mute);margin-top:14px}
.fc-section{padding-top:clamp(76px,9vw,135px);padding-bottom:0}
.forme-case h2{font-size:clamp(34px,4vw,56px);line-height:1.06;font-weight:200;letter-spacing:-.047em;max-width:18ch}
.forme-case .eyebrow{font-size:11px;letter-spacing:.18em;margin-bottom:25px}
.fc-section-heading{max-width:750px}
.fc-brief-grid,.fc-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--fc-gap);align-items:start}
.fc-brief-grid{margin-top:48px}
.forme-case .fc-lead{font-size:clamp(23px,2.6vw,34px);line-height:1.3;letter-spacing:-.025em;max-width:25ch}
.fc-copy{font-size:clamp(16px,1.5vw,19px);line-height:1.65;color:var(--grey)}
.forme-case .fc-copy p+p{margin-top:20px}
.fc-copy h2{color:var(--white);margin-bottom:26px}
.fc-questions,.fc-outcomes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;margin-top:52px}
.fc-questions article,.fc-outcomes article{padding-top:25px;border-top:1px solid var(--line)}
.fc-questions span,.fc-outcomes article>span{font-size:12px;letter-spacing:.1em;color:var(--accent)}
.forme-case .fc-questions h3,.forme-case .fc-outcomes h3{font-size:24px;line-height:1.16;letter-spacing:-.025em;font-weight:300;margin-top:22px}
.forme-case .fc-questions p,.forme-case .fc-outcomes p{font-size:15px;color:var(--grey);line-height:1.6;margin-top:14px;max-width:31ch}
.fc-brand-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px}
.fc-brand-mark{display:flex;flex-direction:column}
.fc-brand-mark>div{flex:1;background:#103e31;border-radius:10px;min-height:600px;color:#eff2e7;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:35px;text-align:center}
.fc-brand-mark img{width:50%;height:auto;filter:brightness(0) invert(93%) sepia(12%) saturate(174%) hue-rotate(36deg)}
.fc-brand-mark strong{font:300 clamp(33px,4.5vw,66px) 'Helvetica Neue',Arial,sans-serif;letter-spacing:.18em;padding-left:.18em;margin-top:35px}
.forme-case .fc-brand-mark p{font:300 13px 'Helvetica Neue',Arial,sans-serif;letter-spacing:.02em;margin-top:23px}
.fc-photo>img{width:100%;height:auto;border-radius:10px}
.fc-brand-grid .fc-photo img{aspect-ratio:9/16;object-fit:cover}
.fc-system{display:grid;grid-template-columns:1fr 1fr;gap:var(--fc-gap);align-items:center;margin-top:46px;padding-top:36px;border-top:1px solid var(--line)}
.forme-case .fc-system h3,.forme-case .fc-validation h3{font-size:clamp(25px,2.7vw,37px);line-height:1.15;letter-spacing:-.035em;font-weight:300}
.fc-swatches{display:grid;grid-template-columns:1.3fr 1fr 1fr;border-radius:8px;overflow:hidden}
.fc-swatches>span{height:150px;background:var(--swatch);color:var(--swatch-ink,#eff2e7);padding:19px 14px;font-size:13px;display:flex;flex-direction:column;justify-content:space-between}
.fc-swatches small{font-size:10px;letter-spacing:.04em}
.fc-journey{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:45px 0 36px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.fc-journey li{padding:26px 20px;background:#f4f1ec04;min-width:0}
.fc-journey li+li{border-left:1px solid var(--line)}
.fc-journey small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.fc-journey strong{display:block;font-size:19px;letter-spacing:-.03em;font-weight:300;line-height:1.2;margin-top:30px}
.fc-journey span{display:block;font-size:12px;color:var(--grey);margin-top:9px}
.fc-screen{background:#dfe5db;border-radius:12px;overflow:hidden;padding:28px 28px 0}
.fc-screen>img{width:100%;height:auto;border-radius:7px}
.forme-case .fc-screen figcaption{margin:0;padding:22px 4px 25px;color:#355446;font-size:13px;line-height:1.6}
.fc-screen figcaption>span{font-weight:500;color:#123e32}
.fc-screen figcaption a{display:block;text-decoration:underline;margin-top:6px;text-underline-offset:3px}
.fc-mobile-section{display:grid;grid-template-columns:1fr 1fr;gap:var(--fc-gap);align-items:center;margin-top:70px}
.forme-case .fc-small-note{font-size:12px;line-height:1.65;color:var(--mute);margin-top:24px}
.fc-application-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
.fc-results{border-top:1px solid var(--line);margin-top:100px;background:#f4f1ec02}
.fc-results .fc-section{padding-bottom:90px}
.fc-outcomes{margin-top:50px}
.fc-validation{display:grid;grid-template-columns:1fr 1fr;gap:var(--fc-gap);margin-top:70px;padding-top:44px;border-top:1px solid var(--line)}
.fc-final{display:flex;justify-content:space-between;align-items:center;gap:35px;margin-top:75px}
.fc-button{display:inline-flex;align-items:center;justify-content:center;gap:65px;background:var(--accent);color:var(--ink);border-radius:50px;padding:20px 27px;font-weight:400;font-size:16px;flex-shrink:0}
.fc-button:hover{background:#ff965a}
@media(min-width:1500px){.forme-case{--wrap:1440px}}
@media(max-width:900px){.forme-intro-grid{grid-template-columns:1fr;gap:30px}.forme-case .forme-title{max-width:14ch}.forme-intro-copy{max-width:640px}.forme-meta{grid-template-columns:1fr 1fr;margin-top:40px}.fc-brief-grid,.fc-split{gap:35px}.fc-brand-mark>div{min-height:430px}.fc-mobile-section{gap:35px}.fc-journey{grid-template-columns:repeat(2,minmax(0,1fr))}.fc-journey li:nth-child(3){border-left:0;border-top:1px solid var(--line)}.fc-journey li:nth-child(4){border-top:1px solid var(--line)}.fc-brand-mark p{max-width:22ch}}
@media(max-width:600px){.forme-intro{padding-top:42px;padding-bottom:32px}.forme-intro-grid{gap:25px}.forme-case .forme-title{font-size:52px;max-width:11ch}.forme-intro-copy .lede{font-size:18px}.forme-meta{gap:22px 17px}.forme-meta dd{font-size:13px}.forme-meta dt{font-size:10px}.forme-case .forme-hero{padding:0 12px}.forme-hero-art>img{aspect-ratio:4/3;object-position:52% 50%}.forme-hero-lockup{top:12px;left:14px;gap:7px;font-size:15px}.forme-hero-lockup img{width:29px;height:29px}.forme-case .forme-hero figcaption{padding:0 8px;font-size:11px}.fc-brief-grid,.fc-split,.fc-system,.fc-mobile-section,.fc-validation{grid-template-columns:1fr;gap:27px}.fc-brief-grid{margin-top:30px}.fc-questions,.fc-outcomes{grid-template-columns:1fr;gap:26px;margin-top:34px}.fc-questions article{display:grid;grid-template-columns:26px 1fr;gap:0 12px}.fc-questions article>span{padding-top:3px}.forme-case .fc-questions h3{margin-top:0}.forme-case .fc-questions p{grid-column:2;max-width:none;margin-top:8px}.fc-brand-grid{gap:12px;margin-top:30px}.fc-brand-mark>div{min-height:0;padding:17px}.fc-brand-mark strong{font-size:23px;letter-spacing:.13em;margin-top:22px}.forme-case .fc-brand-mark p{font-size:9px;line-height:1.5;margin-top:14px}.forme-case figcaption{font-size:10px;line-height:1.5;margin-top:10px}.fc-brand-mark img{width:80%}.fc-system{margin-top:30px;padding-top:25px}.fc-swatches>span{height:125px}.fc-journey{margin-top:28px}.fc-journey li{padding:22px 15px}.fc-journey strong{font-size:18px;margin-top:22px}.fc-journey span{font-size:11px}.fc-screen{padding:10px 10px 0}.forme-case .fc-screen figcaption{padding:16px 4px;font-size:12px}.fc-mobile-section{margin-top:48px}.fc-mobile{max-width:390px;justify-self:center}.fc-application-grid{gap:12px;margin-top:30px}.fc-results{margin-top:65px}.fc-results .fc-section{padding-bottom:65px}.fc-validation{margin-top:45px;padding-top:30px}.fc-final{display:block;margin-top:45px}.fc-button{margin-top:27px;width:100%;justify-content:space-between}.fc-final h2{font-size:37px}}
@media(prefers-reduced-motion:reduce){.forme-case .up{opacity:1!important;transform:none!important}}

/* Keep the working product screens readable on phones. */
@media(max-width:600px){.forme-case .fc-application-grid{grid-template-columns:1fr}}

/* ================================================= phone: read and tap ==
   Each case page shrinks its own type below 600px, and several dropped under
   what a phone can comfortably read -- captions at 10px, journey labels at
   11, meta labels at 10. Type that lives INSIDE a mock stays small on
   purpose: the browser chrome, the brand-plate lockup and the device labels
   are artwork, not reading, and blowing them up would break the illusion.
   Everything reset below is reading.

   The links had the opposite problem. A link inside a figcaption was 19px
   tall -- under half the 44px a thumb needs, and the single most missable
   control on the whole case page, because it is the one that opens the
   prototype. They keep the inline look and take the height as padding. */
@media (max-width:600px){
  .forme-case figcaption,
  .forme-case .forme-hero figcaption,
  .forme-case .fc-screen figcaption{font-size:12.5px;line-height:1.55}
  .forme-case .forme-meta dt{font-size:11.5px}
  .forme-case .fc-journey span{font-size:12.5px;line-height:1.5}

  .forme-case figcaption a,
  .forme-case .fc-screen figcaption a{display:inline-block;
    min-height:44px;line-height:20px;padding-block:12px}
  .forme-prototype-link{min-height:44px;align-items:center;padding-bottom:9px}
}

/* The journey step labels and the swatch hex values are read, not decoration
   -- 10px is under what a phone should ask of anyone. (The type inside the
   reproduced artefacts stays where it is: the identity sheet, the browser
   chrome and the miniature social tiles are pictures of designs, and scaling
   their type up would only break the picture.) */
@media (max-width:600px){
  .forme-case .fc-journey li > small,
  .forme-case .fc-swatches > span > small{font-size:11.5px}
}