.femi-page{--femi-ink:#28122f;--femi-purple:#35104b;--femi-pink:#f3d8ec;--femi-orange:#f07728;--femi-mint:#a4e5d0;color:var(--femi-ink);overflow:hidden}
.femi-hero{background:#fcf8fc;position:relative;min-height:740px;display:flex;align-items:center}
.femi-hero-inner{position:relative;width:100%;min-height:740px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4vw;padding-top:70px;padding-bottom:95px}
.femi-hero-copy{position:relative;z-index:2;max-width:650px}.femi-hero-copy .eyebrow{color:#8a3972}.femi-hero h1{font-size:clamp(3.8rem,7.3vw,7.7rem);line-height:.96;letter-spacing:-.075em;margin:0 0 26px;color:#321242}.femi-hero h1 em{color:#e24f94;font-style:normal}.femi-hero-copy>p{max-width:490px;font-size:clamp(1rem,1.4vw,1.2rem);color:#66566a;line-height:1.65}.femi-hero .btn-link{color:#35104b}.femi-hero-art{position:relative;isolation:isolate;min-height:550px;display:grid;place-items:center}.hero-product{position:relative;z-index:2;width:min(76%,460px);height:530px;object-fit:contain;filter:drop-shadow(0 28px 28px rgba(47,14,49,.18));mix-blend-mode:multiply}.femi-orbit{position:absolute;border-radius:50%;border:1px solid rgba(149,65,128,.24);z-index:-1}.femi-orbit-one{width:500px;height:500px}.femi-orbit-two{width:630px;height:630px;border-style:dashed;border-color:rgba(240,119,40,.25)}.femi-stamp{position:absolute;z-index:3;right:4%;bottom:6%;width:105px;height:105px;border-radius:50%;display:grid;place-content:center;text-align:center;background:#e454a0;color:#fff;font-size:12px;line-height:1.05;font-weight:800;letter-spacing:.12em;transform:rotate(9deg);box-shadow:0 10px 24px #e454a044}.femi-hero-brand{position:absolute;bottom:26px;left:clamp(22px,4vw,70px);right:clamp(22px,4vw,70px);border-top:1px solid #e7dce6;padding-top:14px;display:flex;justify-content:space-between;align-items:center}.femi-hero-brand span:first-child{font-size:20px;font-weight:800;letter-spacing:-.06em;color:#37104c}.femi-hero-brand span:last-child{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#766978;font-weight:700}
.femi-chapter{max-width:1510px;margin:0 auto;padding:105px clamp(22px,4vw,70px) 50px;display:grid;grid-template-columns:60px 1fr minmax(250px,430px);gap:25px;align-items:end}.femi-chapter>span{align-self:start;font:600 18px Manrope,sans-serif;color:#da4b91;border-top:2px solid currentColor;padding-top:12px}.femi-chapter .eyebrow{margin-bottom:18px;color:#8a3972}.femi-chapter h2{margin:0;font-size:clamp(2.6rem,5vw,5.1rem);color:#321242}.femi-chapter>p{margin:0;color:#766978;font-size:15px;line-height:1.7}.femi-chapter-pink>span,.femi-chapter-pink .eyebrow{color:#a94980}.femi-chapter-purple{color:#fff}.femi-chapter-purple>span,.femi-chapter-purple .eyebrow{color:#f4a0ce}.femi-chapter-purple h2{color:#fff}.femi-chapter-purple>p{color:#e3d5e9}
.femi-storefront{background:#f0e9ef;padding:45px clamp(22px,6vw,110px) 70px;display:grid;grid-template-columns:minmax(0,1fr) 260px;align-items:center;gap:42px}.storefront-window{background:#fff;max-width:1120px;margin:auto;border-radius:16px;overflow:hidden;box-shadow:0 26px 80px #28122f22;width:100%;border:1px solid #e2dce2}.browser-bar{height:42px;background:#f5f3f5;display:flex;align-items:center;justify-content:space-between;padding:0 15px;color:#887e88;font-size:11px;letter-spacing:.05em}.browser-dots{display:flex;gap:5px}.browser-dots i{width:8px;height:8px;border-radius:50%;background:#d3cbd2}.browser-dots i:first-child{background:#ea8a8b}.browser-dots i:nth-child(2){background:#eabd69}.browser-lock{color:#b1a9b1}.storefront-open{position:relative;border:0;background:#fff;padding:0;cursor:zoom-in;width:100%;display:block;overflow:hidden}.storefront-open img{width:100%;height:570px;object-fit:cover;object-position:top center;transition:transform .5s ease}.storefront-open:hover img{transform:scale(1.015)}.storefront-open>span{position:absolute;right:18px;bottom:18px;background:#341249;color:#fff;padding:11px 15px;border-radius:40px;font-size:12px;opacity:0;transform:translateY(5px);transition:.25s ease}.storefront-open:hover>span,.storefront-open:focus-visible>span{opacity:1;transform:translateY(0)}.storefront-caption{max-width:230px}.storefront-caption>span,.femi-product-card figcaption span{font-size:10px;letter-spacing:.14em;font-weight:800;color:#a34682}.storefront-caption p{margin:14px 0 0;font-size:15px;line-height:1.65;color:#68596a}
.femi-product-grid{padding:35px clamp(22px,7vw,125px) 115px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px;align-items:start;background:#fcf8fc}.femi-product-card{margin:0}.femi-product-card button,.femi-social-card button{position:relative;display:block;border:0;padding:0;background:#f2e7f1;overflow:hidden;cursor:zoom-in;width:100%}.femi-product-card button{height:clamp(340px,47vw,690px);border-radius:4px}.femi-product-card img{width:100%;height:100%;object-fit:contain;transition:transform .5s cubic-bezier(.2,.75,.25,1)}.femi-product-card button:hover img,.femi-social-card button:hover img{transform:scale(1.025)}.femi-product-card figcaption{padding:15px 2px 0;display:grid;gap:8px}.femi-product-card figcaption b{font:600 18px Manrope,sans-serif;letter-spacing:-.04em}.femi-product-tall{grid-row:span 2}.femi-product-tall button{height:clamp(700px,87vw,1240px)}.femi-product-offset{margin-top:100px}.femi-product-wide{grid-column:2/4;display:grid;grid-template-columns:.8fr 1fr;align-items:center;gap:30px}.femi-product-wide button{height:390px}.femi-expand{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:#fff;color:#311144;display:grid;place-items:center;font-size:18px;opacity:0;transform:translateY(5px);transition:.2s}.femi-product-card button:hover .femi-expand,.femi-product-card button:focus-visible .femi-expand,.femi-social-card button:hover .femi-expand,.femi-social-card button:focus-visible .femi-expand{opacity:1;transform:translateY(0)}
.femi-chapter-pink{background:#f8e9f4;max-width:none;padding-left:max(clamp(22px,4vw,70px),calc((100vw - 1370px)/2));padding-right:max(clamp(22px,4vw,70px),calc((100vw - 1370px)/2))}.femi-social-grid{background:#321242;padding:45px clamp(22px,7vw,125px) 115px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;align-items:center}.femi-social-card{margin:0}.femi-social-card button{background:#f3e4f1;height:clamp(370px,50vw,700px)}.femi-social-card img{height:100%;width:100%;object-fit:contain;transition:transform .5s cubic-bezier(.2,.75,.25,1)}.femi-social-card figcaption{padding-top:13px;font-size:10px;font-weight:700;letter-spacing:.15em;color:#e5bed9}.femi-social-feature{transform:translateY(35px)}.femi-closing{padding-top:110px;padding-bottom:130px}.femi-closing .eyebrow{color:#a94980}.femi-closing h2{font-size:clamp(3rem,6vw,6rem);color:#321242;margin-bottom:18px}.femi-closing p{color:#766978;max-width:500px}.femi-closing .btn-link{color:#35104b}
.femi-lightbox{border:0;padding:0;background:#fff;color:#181818;max-width:min(94vw,1200px);max-height:94vh;width:max-content;overflow:visible;box-shadow:0 20px 100px #0008}.femi-lightbox::backdrop{background:rgba(18,9,20,.82);backdrop-filter:blur(4px)}.femi-lightbox img{width:auto;max-width:min(88vw,1150px);height:auto;max-height:84vh;object-fit:contain;margin:auto}.femi-lightbox p{font-size:12px;color:#555;margin:0;padding:12px 18px;letter-spacing:.04em}.femi-lightbox-close{position:absolute;top:-16px;right:-16px;width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:#26112f;font-size:27px;line-height:1;cursor:pointer}
@media(max-width:850px){.femi-hero-inner{grid-template-columns:1fr;gap:0;padding-top:80px;min-height:unset;padding-bottom:115px}.femi-hero{min-height:0}.femi-hero-copy{max-width:700px}.femi-hero h1{font-size:clamp(3.8rem,13vw,7rem)}.femi-hero-art{min-height:430px;margin-top:0}.hero-product{height:430px;width:min(70%,400px)}.femi-orbit-one{width:340px;height:340px}.femi-orbit-two{width:430px;height:430px}.femi-stamp{right:12%;bottom:4%;width:84px;height:84px;font-size:10px}.femi-chapter{grid-template-columns:42px 1fr;gap:18px;padding-top:80px}.femi-chapter>p{grid-column:2;max-width:600px}.femi-storefront{grid-template-columns:1fr}.storefront-caption{max-width:600px;margin:auto}.storefront-open img{height:480px}.femi-product-grid{grid-template-columns:1fr 1fr;gap:24px}.femi-product-tall{grid-row:span 2}.femi-product-tall button{height:calc(clamp(340px,47vw,690px)*2 + 42px)}.femi-product-wide{grid-column:1/3}.femi-product-offset{margin-top:55px}.femi-social-grid{gap:16px}.femi-social-card button{height:clamp(280px,56vw,500px)}}
@media(max-width:560px){.femi-hero-inner{padding-top:55px}.femi-hero-copy>p{font-size:15px}.femi-hero-art{min-height:350px}.hero-product{height:350px}.femi-hero-brand{bottom:20px}.femi-hero-brand span:first-child{font-size:17px}.femi-hero-brand span:last-child{font-size:8px}.femi-chapter{padding-top:65px;padding-bottom:32px;grid-template-columns:32px 1fr;gap:13px}.femi-chapter h2{font-size:clamp(2.5rem,12vw,4rem)}.femi-chapter>span{font-size:14px}.femi-chapter>p{font-size:14px}.femi-storefront{padding:24px 16px 45px;gap:22px}.storefront-window{border-radius:10px}.browser-bar{height:34px}.storefront-open img{height:360px}.storefront-caption{padding:0 6px}.femi-product-grid{padding:24px 17px 70px;gap:19px}.femi-product-card button{height:clamp(255px,78vw,390px)}.femi-product-tall button{height:calc(clamp(255px,78vw,390px)*2 + 38px)}.femi-product-card figcaption b{font-size:15px}.femi-product-card figcaption span{font-size:8px}.femi-product-offset{margin-top:35px}.femi-product-wide{display:block}.femi-product-wide button{height:300px}.femi-social-grid{grid-template-columns:1fr 1fr;padding:25px 17px 75px;gap:22px 14px}.femi-social-card button{height:clamp(280px,88vw,470px)}.femi-social-feature{transform:none}.femi-social-card figcaption{font-size:8px}.femi-closing{padding-top:75px;padding-bottom:85px}.femi-closing h2{font-size:clamp(2.8rem,13vw,4.5rem)}}
@media(prefers-reduced-motion:reduce){.femi-page *,.femi-page *::before,.femi-page *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* Keep portrait artwork edge-to-edge inside every gallery thumbnail. */
.femi-product-card button,
.femi-social-card button {
  aspect-ratio: 9 / 16;
  height: auto;
  background: #f5edf4;
}
.femi-product-card img,
.femi-social-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.femi-product-tall { grid-row: auto; }
.femi-product-tall button { height: auto; }
.femi-product-wide { grid-column: 2 / 4; }
.femi-product-wide button { height: auto; }
.femi-social-feature { transform: translateY(35px); }
@media (max-width: 850px) {
  .femi-product-tall { grid-row: auto; }
  .femi-product-tall button { height: auto; }
  .femi-product-wide button { height: auto; }
  .femi-social-card button { height: auto; }
}
@media (max-width: 560px) {
  .femi-product-card button,
  .femi-product-tall button,
  .femi-product-wide button,
  .femi-social-card button { height: auto; }
}

/* Keep gallery rows aligned when comparing the artwork side by side. */
.femi-social-grid,
.femi-product-grid { align-items: start; }
.femi-social-feature,
.femi-product-offset { transform: none; margin-top: 0; }

/* Full-width contrast band for the social chapter. */
.femi-chapter-purple {
  max-width: none;
  margin: 0;
  padding-left: max(clamp(22px, 4vw, 70px), calc((100vw - 1370px) / 2));
  padding-right: max(clamp(22px, 4vw, 70px), calc((100vw - 1370px) / 2));
  background: #321242;
}
.femi-chapter-purple .eyebrow,
.femi-chapter-purple > span { color: #f4a0ce; }
.femi-chapter-purple > p { color: #e3d5e9; }

/* Scrollable laptop presentation for the complete ecommerce homepage. */
.femi-storefront { grid-template-columns: minmax(0, 1fr) 250px; align-items: center; }
.macbook-stage { width: 100%; max-width: 1120px; margin: 0 auto; }
.macbook-shell { width: 100%; }
.macbook-screen {
  padding: 10px 12px 14px;
  background: linear-gradient(145deg, #28282c, #111114 68%);
  border: 1px solid #45454a;
  border-radius: 22px 22px 10px 10px;
  box-shadow: 0 25px 70px #28122f2b, inset 0 1px 0 #ffffff34;
}
.macbook-camera { height: 12px; position: relative; }
.macbook-camera::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px;
  border-radius: 50%; background: #55545c; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px #1b1b1e;
}
.storefront-window { max-width: none; border: 1px solid #08080a; border-radius: 5px; box-shadow: none; }
.storefront-scroll {
  height: clamp(390px, 43vw, 650px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #9a8797 #f3eef3;
  background: #fff;
  cursor: ns-resize;
}
.storefront-scroll:focus-visible { outline: 3px solid #d84e96; outline-offset: -3px; }
.storefront-scroll img { display: block; width: 100%; height: auto; object-fit: initial; }
.macbook-base {
  height: 23px;
  margin: 0 -3.5%;
  position: relative;
  background: linear-gradient(180deg, #c9c9ce 0%, #e8e8eb 22%, #a9a9af 100%);
  border-radius: 2px 2px 48% 48% / 2px 2px 75% 75%;
  box-shadow: 0 13px 18px #28122f20;
}
.macbook-base::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 18%; height: 4px;
  transform: translateX(-50%); background: #a7a7ad; border-radius: 0 0 7px 7px;
}
.storefront-caption { max-width: 250px; }
.storefront-fullsize {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 20px; padding: 0 0 8px;
  border: 0; border-bottom: 1px solid currentColor; background: none; color: #35104b;
  font: 700 11px "DM Sans", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.storefront-fullsize:hover { color: #a13270; }
@media (max-width: 850px) {
  .femi-storefront { grid-template-columns: 1fr; }
  .storefront-caption { max-width: 680px; margin: 0 auto; }
  .storefront-scroll { height: clamp(360px, 63vw, 560px); }
}
@media (max-width: 560px) {
  .macbook-screen { padding: 7px 7px 10px; border-radius: 14px 14px 7px 7px; }
  .macbook-camera { height: 10px; }
  .storefront-scroll { height: min(62vh, 500px); min-height: 320px; }
  .macbook-base { height: 15px; }
  .storefront-caption { padding: 0 6px; }
}

/* Social media case study: related content grouped by creative role. */
.femi-chapter-social {
  max-width: none; margin: 0;
  padding-left: max(clamp(22px, 4vw, 70px), calc((100vw - 1370px) / 2));
  padding-right: max(clamp(22px, 4vw, 70px), calc((100vw - 1370px) / 2));
  background: #321242; color: #fff;
}
.femi-chapter-social .eyebrow,
.femi-chapter-social > span { color: #f4a0ce; }
.femi-chapter-social h2 { color: #fff; }
.femi-chapter-social > p { color: #e3d5e9; }
.femi-social-work { background: #fcf8fc; padding: 55px clamp(22px, 6vw, 110px) 95px; }
.femi-social-kicker { display: block; margin-bottom: 15px; color: #994879; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.social-collection-head { max-width: 1280px; margin: 0 auto 30px; display: grid; grid-template-columns: 1fr minmax(260px, 430px); gap: 45px; align-items: end; }
.social-collection-head h3 { margin: 0; color: #321242; font-size: clamp(1.8rem, 3.4vw, 3.1rem); letter-spacing: -.055em; }
.social-collection-head > p { margin: 0; color: #66566a; line-height: 1.65; font-size: 14px; }
.social-collection { max-width: 1370px; margin: 0 auto 95px; }
.social-collection-soft { max-width: none; margin: 0 calc(-1 * clamp(22px, 6vw, 110px)) 95px; padding: 65px clamp(22px, 6vw, 110px) 75px; background: #f5eaf3; }
.social-collection-head { margin-bottom: 27px; }
.femi-social-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; margin: 0; padding: 0; background: transparent; }
.femi-social-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
.femi-social-card { min-width: 0; margin: 0; }
.femi-social-card button { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; overflow: hidden; border: 0; padding: 0; background: #f1e8f0; cursor: zoom-in; }
.femi-social-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.femi-social-card button:hover img { transform: scale(1.025); }
.femi-social-card figcaption { padding: 12px 2px 0; color: #6c536b; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
@media (max-width: 850px) {
  .femi-social-work { padding-bottom: 70px; }
  .social-collection-head { grid-template-columns: 1fr; gap: 15px; }
  .social-collection { margin-bottom: 70px; }
  .social-collection-soft { margin-left: -24px; margin-right: -24px; padding: 50px 24px 55px; }
  .femi-social-grid { gap: 17px; }
}
@media (max-width: 560px) {
  .femi-social-work { padding: 38px 17px 60px; }
  .social-collection-head h3 { font-size: 1.9rem; }
  .social-collection { margin-bottom: 60px; }
  .social-collection-soft { margin-left: -17px; margin-right: -17px; padding: 42px 17px 47px; }
  .femi-social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .femi-social-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .femi-social-card figcaption { font-size: 8px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .femi-social-card img { transition: none; }
}