/* ------------------------------------------------------------------
   Kemmy — hand-written styles for the static site.
   Everything below is ours. Framer's own CSS lives inline in each page.
   ------------------------------------------------------------------ */

/* --- 0. The two faces ----------------------------------------------
   The template arrived using four family names (Boldonse, Clash Display,
   Playfair Display, Inter, DM Sans) that all resolve to the same two
   files. Declaring the two real names here means new work can name them
   directly: Boldonse for titles, Poppins for everything else. --------- */

@font-face { font-family: Boldonse; src: url(../fonts/epilogue-normal-100_900.woff2) format("woff2");
             font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: Boldonse; src: url(../fonts/epilogue-italic-100_900.woff2) format("woff2");
             font-style: italic; font-weight: 100 900; font-display: swap; }

@font-face { font-family: Poppins; src: url(../fonts/poppins-normal-400.woff2) format("woff2");
             font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: Poppins; src: url(../fonts/poppins-normal-500.woff2) format("woff2");
             font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: Poppins; src: url(../fonts/poppins-normal-600.woff2) format("woff2");
             font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: Poppins; src: url(../fonts/poppins-normal-700.woff2) format("woff2");
             font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: Poppins; src: url(../fonts/poppins-italic-400.woff2) format("woff2");
             font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: Poppins; src: url(../fonts/poppins-italic-600.woff2) format("woff2");
             font-style: italic; font-weight: 600; font-display: swap; }

/* --- 1. Mobile menu ------------------------------------------------ */

.kemmy-menu {
  position: fixed;
  top: 99px;                     /* JS re-measures the header on open */
  left: 0;
  width: 100vw;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  background: #fff;
  border-bottom: 1px solid #000;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
}

.kemmy-menu a {
  display: block;
  padding: 14px 8px;
  color: #000;
  font-family: "Clash Display", sans-serif;   /* remapped to Epilogue */
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, .10);
}

.kemmy-menu[hidden] { display: none; }

.kemmy-menu a:last-child { border-bottom: 0; }

.kemmy-menu .kemmy-menu-cta {
  margin-top: 12px;
  padding: 16px;
  text-align: center;
  color: #fff;
  background: #000;
  border: 0;
  border-radius: 4px;
}

@media (min-width: 1300px) {
  .kemmy-menu { display: none !important; }
}

/* Hamburger turns into an X while the menu is open. */
.kemmy-burger-open .framer-3sh5wp { transform: translateY(-4px) rotate(-45deg) !important; }
.kemmy-burger-open .framer-1iy8w7n { transform: translateY(4px) rotate(45deg) !important; }
.framer-3sh5wp, .framer-1iy8w7n { transition: transform .18s ease; }

body.kemmy-menu-open { overflow: hidden; }

/* --- 2. Ticker / marquee rows -------------------------------------- */

@keyframes kemmy-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

ul[data-kemmy-marquee] {
  width: max-content !important;
  max-width: none !important;
  animation: kemmy-marquee var(--kemmy-marquee-duration, 40s) linear infinite;
}

ul[data-kemmy-marquee][data-kemmy-marquee="reverse"] {
  animation-direction: reverse;
}

@media (prefers-reduced-motion: reduce) {
  ul[data-kemmy-marquee] { animation: none; }
}

/* --- 3. Layout corrections after removing Framer's runtime --------- */

/* The About Us section on the home page reserved a fixed height for the
   band that now lives as the service cards below it. Let it size to
   whatever it actually contains. */
section.framer-1no9j2j .framer-1cry7tm { height: auto !important; }

/* --- 4. Services (home page) --------------------------------------
   The source markup remains compact; the approved shared card treatment
   is applied below after the operating steps are added by JavaScript. --- */

.kemmy-services {
  /* 100vw, not 100%: elsewhere on the page Framer's desktop widths make the
     body wider than a phone viewport, and this section must not inherit that */
  max-width: min(1440px, 100vw);
  margin: 0 auto;
  padding: 110px 100px 130px;
  box-sizing: border-box;
}

.kemmy-services-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.kemmy-services-eyebrow {
  margin: 0 0 10px;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #b07d05;
}

.kemmy-services-title {
  margin: 0;
  font-family: Boldonse, sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.15em;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #000;
}

.kemmy-services-all {
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #000;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid #f9b616;
  white-space: nowrap;
}
.kemmy-services-all:hover { border-bottom-color: #000; }

.kemmy-services-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.kemmy-service {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  aspect-ratio: 1560 / 1520;
  min-height: min-content;      /* the scallop grows rather than clipping copy */
  padding: 11% 12%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.kemmy-service[data-paper="1"] { background-image: url(../images/service-paper-black.png); }
.kemmy-service[data-paper="2"] { background-image: url(../images/service-paper-gold.png); }

.kemmy-service-name {
  margin: 0 0 16px;
  font-family: Boldonse, sans-serif;
  font-weight: 700;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.2em;
  text-transform: uppercase;
}

.kemmy-service-copy {
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  line-height: 1.65;
}

.kemmy-service[data-paper="1"] .kemmy-service-name { color: #f9b616; }
.kemmy-service[data-paper="1"] .kemmy-service-copy { color: rgba(255, 248, 231, .82); }
.kemmy-service[data-paper="2"] .kemmy-service-name { color: #111; }
.kemmy-service[data-paper="2"] .kemmy-service-copy { color: rgba(17, 17, 17, .9); }

@media (max-width: 1100px) {
  .kemmy-services { padding: 90px 56px 100px; }
  .kemmy-services-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .kemmy-service { padding: 10%; }
}

@media (max-width: 820px) {
  .kemmy-services-grid { grid-template-columns: 1fr; gap: 22px; }
  .kemmy-service { aspect-ratio: auto; padding: 44px 46px; }
}

@media (max-width: 767.98px) {
  .kemmy-services { padding: 64px 20px 80px; }
  .kemmy-service { padding: 38px 34px; }
}

/* ------------------------------------------------------------------ *
   Hero decorations

   Framer puts the base rotation of each sticker on its wrapper as an
   inline style, so these animations run on the <img> inside and use
   only rotate + uniform scale. Both compose cleanly with any base
   angle, which means a sticker never drifts off the spot Framer
   placed it on. Tune speed with animation-duration; the negative
   delays just desynchronise the three stickers.
 * ------------------------------------------------------------------ */

@keyframes kemmy-float {
  0%, 100% { transform: rotate(-2.5deg) scale(1);     }
  50%      { transform: rotate( 2.5deg) scale(1.045); }
}
@keyframes kemmy-spin {
  to { transform: rotate(360deg); }
}
@keyframes kemmy-breathe {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.09); }
}
@keyframes kemmy-twinkle {
  0%, 100% { transform: scale(1)    rotate(0deg);  opacity: 1;    }
  50%      { transform: scale(1.28) rotate(28deg); opacity: 0.75; }
}

.kemmy-float      { animation: kemmy-float 6s ease-in-out infinite; will-change: transform; }
.kemmy-float-b    { animation-duration: 7.4s; animation-delay: -2.1s; }
.kemmy-float-c    { animation-duration: 5.2s; animation-delay: -3.6s; }

.kemmy-spin-ring  { animation: kemmy-spin 22s linear infinite; will-change: transform; }
.kemmy-breathe    { animation: kemmy-breathe 4.5s ease-in-out infinite; }

.kemmy-twinkle    { animation: kemmy-twinkle 5s ease-in-out infinite; }
.kemmy-twinkle-b  { animation-duration: 6.5s; animation-delay: -2.5s; }

@media (prefers-reduced-motion: reduce) {
  .kemmy-float,
  .kemmy-spin-ring,
  .kemmy-breathe,
  .kemmy-twinkle { animation: none; }
}

/* ------------------------------------------------------------------ *
   Project card stickers

   The two stickers on each project card are positioned inside the
   photo frame (.framer-ku916x), which is why they sat on top of the
   device mockups. These rules move them into the empty part of the
   coloured panel to the left of the frame.

   Offsets are written as right: calc(100% + N) so they are measured
   from the frame's left edge outwards, and stay correct as the frame
   changes width between breakpoints. The flower is hidden by Framer
   below 1300px, so only the blob needs the narrower rule.
 * ------------------------------------------------------------------ */

@media (min-width: 768px) {
  .framer-ku916x .framer-1umc0yt {          /* blob, top right of the frame */
    left: auto;
    right: calc(100% + 30px);
    top: 55%;
    bottom: auto;
  }
}

/* --- Approved card system ----------------------------------------- */

.kemmy-card-scrim {
  position: fixed;
  z-index: 900;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: rgba(5, 5, 5, .76);
  backdrop-filter: blur(3px);
  transition: opacity .24s ease;
}
.kemmy-card-scrim.is-visible { opacity: 1; }
[data-kemmy-focus-card] {
  position: relative;
  z-index: 0;
  outline: none;
  transition: transform .38s cubic-bezier(.2, .75, .2, 1), box-shadow .38s ease;
}
[data-kemmy-focus-card]:focus-visible { outline: 3px solid #f9b616; outline-offset: 5px; }
[data-kemmy-focus-card].is-focused {
  z-index: 901;
  transform: translateY(-8px) scale(1.035);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .24);
}

/* Projects replace the old Framer panels on home and Selected Work. */
.kemmy-projects-shell {
  padding: clamp(72px, 9vw, 124px) clamp(20px, 7vw, 100px);
  color: #111;
  background: #fff;
}
.kemmy-page-work .kemmy-projects-shell { padding-top: clamp(116px, 12vw, 170px); }
.kemmy-projects-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 28px;
  max-width: 1240px;
  margin: 0 auto 52px;
}
.kemmy-projects-head p { margin: 0 0 10px; color: #a66f00; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.kemmy-projects-head h2 {
  max-width: 800px;
  margin: 0;
  font: 700 clamp(36px, 5vw, 68px)/1.02 Boldonse, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}
.kemmy-projects-head > a { color: #111; font-size: 13px; font-weight: 700; text-underline-offset: 5px; }
.kemmy-projects-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
  max-width: 1240px;
  margin: 0 auto;
}
.kemmy-project-card { overflow: visible; border: 1px solid #111; border-radius: 2px; background: #fff; }
.kemmy-project-device-stage {
  position: relative;
  height: 370px;
  padding: 54px 30px 28px;
  overflow: visible;
  box-sizing: border-box;
  background: #fff;
}
.kemmy-project-device-stage img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.kemmy-project-macbook,
.kemmy-project-pc,
.kemmy-project-ipad,
.kemmy-project-pencil,
.kemmy-project-iphone,
.kemmy-project-android,
.kemmy-project-duo-phone { will-change: transform, filter; transition: transform .58s cubic-bezier(.16, 1, .3, 1), filter .48s ease, opacity .38s ease, box-shadow .48s ease; }

/* BeliShop: MacBook and iPhone. */
.kemmy-project-macbook { position: relative; width: 88%; margin: 5px auto 0; filter: drop-shadow(0 22px 19px rgba(0, 0, 0, .23)); }
.kemmy-project-macbook-screen { overflow: hidden; aspect-ratio: 16 / 10; border: 8px solid #161616; border-bottom-width: 12px; border-radius: 9px 9px 3px 3px; background: #161616; }
.kemmy-project-macbook-base { position: relative; display: block; width: 112%; height: 10px; margin-left: -6%; border-radius: 2px 2px 10px 10px; background: linear-gradient(90deg, #777, #e1e1e1 18%, #aaa 52%, #ececec 82%, #747474); }
.kemmy-project-macbook-base::after { position: absolute; top: 0; left: 43%; width: 14%; height: 3px; border-radius: 0 0 4px 4px; background: #777; content: ""; }
.kemmy-project-iphone { position: absolute; right: 24px; bottom: 20px; width: 23%; padding: 5px; border: 2px solid #313131; border-radius: 22px; background: #111; box-shadow: 0 18px 28px rgba(0, 0, 0, .3); box-sizing: border-box; }
.kemmy-project-iphone::before,
.kemmy-project-duo-phone::before { position: absolute; z-index: 1; top: 8px; left: 50%; width: 34%; height: 8px; border-radius: 8px; background: #111; content: ""; transform: translateX(-50%); }
.kemmy-project-iphone img,
.kemmy-project-duo-phone img { aspect-ratio: 9 / 18.5; border-radius: 16px; }

/* We-Mep: one clean iPad composition. */
.kemmy-project-device-stage--tablet { padding-top: 34px; }
.kemmy-project-ipad { position: relative; width: 78%; margin: 0 auto; padding: 11px; border: 2px solid #696969; border-radius: 19px; background: #171717; box-shadow: 0 28px 34px rgba(0, 0, 0, .23); box-sizing: border-box; transform: rotate(-1.5deg); }
.kemmy-project-ipad-screen { overflow: hidden; aspect-ratio: 4 / 3; border-radius: 9px; background: #ddd; }
.kemmy-project-ipad-camera { position: absolute; top: 4px; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: #555; transform: translateX(-50%); }
.kemmy-project-pencil { position: absolute; right: 12%; bottom: 38px; width: 5px; height: 190px; border-radius: 5px; background: linear-gradient(#f7f7f7, #cfcfcf); box-shadow: 0 10px 16px rgba(0, 0, 0, .18); transform: rotate(8deg); }

/* Drafts: a phone duo that separates and comes into focus. */
.kemmy-project-device-stage--phone-duo { perspective: 900px; }
.kemmy-project-duo-phone { position: absolute; top: 30px; left: 50%; width: 25%; padding: 6px; border: 2px solid #272727; border-radius: 28px; background: #111; box-shadow: 0 24px 34px rgba(0, 0, 0, .27); box-sizing: border-box; }
.kemmy-project-duo-phone--back { z-index: 1; filter: blur(1.7px); opacity: .9; transform: translateX(-68%) rotate(-3deg) scale(.94); }
.kemmy-project-duo-phone--front { z-index: 2; transform: translateX(-32%) rotate(3deg); }

/* ToAbroad: conventional laptop and Android phone. */
.kemmy-project-pc { position: relative; width: 88%; margin: 7px auto 0; filter: drop-shadow(0 23px 20px rgba(0, 0, 0, .23)); }
.kemmy-project-pc-screen { overflow: hidden; aspect-ratio: 16 / 9; border: 11px solid #222; border-bottom-width: 15px; border-radius: 5px 5px 1px 1px; background: #222; }
.kemmy-project-pc-base { position: relative; display: block; width: 104%; height: 13px; margin-left: -2%; border-radius: 0 0 4px 4px; background: linear-gradient(#b7b7b7, #727272); transform: perspective(80px) rotateX(18deg); transform-origin: top; }
.kemmy-project-pc-base::after { position: absolute; top: 3px; left: 50%; width: 4px; height: 2px; border-radius: 2px; background: #56a8ff; content: ""; }
.kemmy-project-android { position: absolute; left: 24px; bottom: 18px; width: 23%; padding: 5px; border: 2px solid #424242; border-radius: 15px; background: #202020; box-shadow: 0 18px 28px rgba(0, 0, 0, .3); box-sizing: border-box; }
.kemmy-project-android::before { position: absolute; z-index: 1; top: 9px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: #171717; content: ""; transform: translateX(-50%); }
.kemmy-project-android img { aspect-ratio: 9 / 19.5; border-radius: 10px; }

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .kemmy-project-card:is(:hover, :focus-visible, :has(:focus-visible), .is-focused) .kemmy-project-macbook { transform: translate(-13px, -17px) rotate(-1.4deg); }
  .kemmy-project-card:is(:hover, :focus-visible, :has(:focus-visible), .is-focused) .kemmy-project-iphone { transform: translate(14px, -25px) rotate(4deg); }
  .kemmy-project-card:is(:hover, :focus-visible, :has(:focus-visible), .is-focused) .kemmy-project-ipad { transform: translate(-12px, -20px) rotate(-3deg); box-shadow: 14px 34px 38px rgba(0, 0, 0, .2); }
  .kemmy-project-card:is(:hover, :focus-visible, :has(:focus-visible), .is-focused) .kemmy-project-pencil { transform: translate(16px, -11px) rotate(13deg); }
  .kemmy-project-card:is(:hover, :focus-visible, :has(:focus-visible), .is-focused) .kemmy-project-duo-phone--back { filter: blur(0); opacity: 1; transform: translate(-88%, -17px) rotate(-7deg) scale(.98); }
  .kemmy-project-card:is(:hover, :focus-visible, :has(:focus-visible), .is-focused) .kemmy-project-duo-phone--front { transform: translate(-12%, -25px) rotate(7deg); }
  .kemmy-project-card:is(:hover, :focus-visible, :has(:focus-visible), .is-focused) .kemmy-project-pc { transform: translate(13px, -18px) rotate(1deg); }
  .kemmy-project-card:is(:hover, :focus-visible, :has(:focus-visible), .is-focused) .kemmy-project-android { transform: translate(-15px, -25px) rotate(-4deg); }
}
.kemmy-project-body { padding: 28px; border-top: 1px solid #d8d8d8; }
.kemmy-project-meta { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 30px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.kemmy-project-body h3 { margin: 0 0 14px; font: 700 30px/1.05 Boldonse, sans-serif; }
.kemmy-project-body > p { margin: 0; color: #555; font-size: 15px; line-height: 1.6; }
.kemmy-project-reveal { overflow: hidden; opacity: 1; }
.kemmy-project-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0; padding: 18px 0; border-top: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8; }
.kemmy-project-facts div { min-width: 0; }
.kemmy-project-facts dt { margin-bottom: 4px; color: #777; font-size: 9px; text-transform: uppercase; }
.kemmy-project-facts dd { margin: 0; font-size: 11px; font-weight: 700; }
.kemmy-project-action,
.kemmy-service-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 17px;
  color: #fff;
  background: #111;
  border: 1px solid #111;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s ease, background-color .2s ease;
}
.kemmy-project-action:hover,
.kemmy-service-action:hover { color: #111; background: transparent; }

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .kemmy-project-reveal {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    transform: translateY(12px);
    transition: max-height .4s cubic-bezier(.2, .75, .2, 1), margin .4s ease, opacity .28s ease, transform .36s ease;
  }
  .kemmy-project-card:is(:hover, :focus-visible, :has(:focus-visible), .is-focused) .kemmy-project-reveal {
    max-height: 170px;
    margin-top: 4px;
    opacity: 1;
    transform: none;
  }
}

/* Service cards: rounded cards with a hard offset shadow, in three
   colourways (cream, ink, gold). An icon badge and the number sit along the
   top; the steps are always visible. Hover lifts and tilts the card itself;
   nothing else on the page changes. */
.kemmy-services-grid { align-items: stretch; }
.kemmy-service,
.kemmy-service-list > li {
  --svc-ink: #141414;
  --svc-muted: rgba(20, 20, 20, .66);
  --svc-line: rgba(20, 20, 20, .16);
  --svc-badge: #f9b616;
  --svc-shadow: #141414;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 420px;
  padding: 24px 26px 22px;
  border: 2px solid #141414;
  border-radius: 22px;
  box-sizing: border-box;
  color: var(--svc-ink);
  background: #fffdf6 !important;
  background-image: none !important;
  box-shadow: 6px 7px 0 var(--svc-shadow);
  font-family: Poppins, sans-serif;
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s ease;
}
.kemmy-services-grid > .kemmy-service:nth-child(3n+2),
.kemmy-service-list > li:nth-child(3n+2) {
  --svc-ink: #fff8e7; --svc-muted: rgba(255, 248, 231, .7); --svc-line: rgba(255, 248, 231, .18); --svc-shadow: #f9b616; --svc-badge-shadow: #f9b616;
  background: #141414 !important;
}
.kemmy-services-grid > .kemmy-service:nth-child(3n),
.kemmy-service-list > li:nth-child(3n) {
  --svc-muted: rgba(20, 20, 20, .74); --svc-line: rgba(20, 20, 20, .2); --svc-badge: #fffdf6;
  background: #f9b616 !important;
}
.kemmy-service:hover,
.kemmy-service-list > li:hover { transform: translate(-3px, -5px) rotate(-1.2deg); box-shadow: 10px 12px 0 var(--svc-shadow); }
.kemmy-service { aspect-ratio: auto; }
.kemmy-service-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 30px; }
.kemmy-service-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 2px solid #141414;
  border-radius: 16px;
  background: var(--svc-badge);
  box-shadow: 3px 4px 0 var(--svc-badge-shadow, #141414);
  transform: rotate(-6deg);
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.kemmy-service-icon svg { width: 26px; height: 26px; fill: none; stroke: #141414; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.kemmy-service:hover .kemmy-service-icon,
.kemmy-service-list > li:hover .kemmy-service-icon { transform: rotate(7deg) scale(1.07); }
.kemmy-service-num { color: var(--svc-muted); font: 600 15px/1 Poppins, sans-serif; }
.kemmy-service-name,
.kemmy-service-list h3 { margin: 0 0 12px; color: var(--svc-ink) !important; font: 700 clamp(19px, 1.7vw, 23px)/1.2 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-service-copy,
.kemmy-service-list p { margin: 0; color: var(--svc-muted) !important; font-size: 14px; line-height: 1.6; }
.kemmy-service-card-kicker {
  align-self: flex-start;
  margin: 0 0 14px;
  padding: 5px 10px;
  border: 1.5px solid var(--svc-line);
  border-radius: 999px;
  color: var(--svc-muted) !important;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.kemmy-service-steps { display: grid; gap: 0; margin: auto 0 0; padding: 26px 0 0; list-style: none; }
.kemmy-service-steps li {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  min-height: 0;
  padding: 11px 0 !important;
  border: 0 !important;
  border-top: 1.5px dashed var(--svc-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--svc-ink);
  font-size: 12px;
  transform: none !important;
}
.kemmy-service-steps strong { font-weight: 700; }
.kemmy-service-steps span { color: var(--svc-muted); }
.kemmy-page-services .kemmy-service-list { gap: 30px; }
.kemmy-page-services .kemmy-service-index { display: none; }
.kemmy-page-services .kemmy-service-list > li { min-height: 460px; }
/* the old page-wide dim behind a hovered card is off everywhere */
.kemmy-card-scrim { display: none !important; }

/* Team cards replace the name-only roster. */
.kemmy-about-team-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; border: 0; }
.kemmy-about-team-list .kemmy-team-card { display: block; overflow: hidden; padding: 0; border: 1px solid #111; border-radius: 2px; background: #fff; }
.kemmy-about-team-list .kemmy-team-card:nth-child(odd),
.kemmy-about-team-list .kemmy-team-card:nth-child(even) { padding: 0; border: 1px solid #111; }
.kemmy-team-photo { position: relative; height: 330px; overflow: hidden; background: #d8d2c6; }
.kemmy-team-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .45s cubic-bezier(.2, .75, .2, 1); }
.kemmy-team-summary { position: absolute; right: 0; bottom: 0; left: 0; margin: 0; padding: 62px 22px 20px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .86)); font-size: 12px; line-height: 1.55; opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .4s ease; }
.kemmy-team-card:is(:hover, :focus-within, .is-focused) .kemmy-team-photo img { transform: scale(1.055); }
.kemmy-team-card:is(:hover, :focus-within, .is-focused) .kemmy-team-summary { opacity: 1; transform: none; }
.kemmy-team-body { padding: 24px; }
.kemmy-about-team-list .kemmy-team-body strong { display: block; font: 700 23px/1.15 Boldonse, sans-serif; }
.kemmy-team-role { display: block; margin-top: 7px; color: #666; font-size: 12px; text-align: left; }
.kemmy-team-details { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid #d8d8d8; }
.kemmy-team-details dt { margin-bottom: 4px; color: #777; font-size: 9px; text-transform: uppercase; }
.kemmy-team-details dd { margin: 0; font-size: 10px; font-weight: 700; }
.kemmy-team-image-note { margin: 18px 0 0; color: rgba(0, 0, 0, .62); font-size: 10px; text-transform: uppercase; }

/* Honest testimonial placeholders replace the exported sample praise. */
.kemmy-testimonials-shell { padding: clamp(72px, 9vw, 120px) clamp(20px, 7vw, 100px); color: #fff8e7; background: #111; }
.kemmy-testimonials-inner { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: clamp(36px, 8vw, 110px); max-width: 1240px; margin: 0 auto; }
.kemmy-testimonials-intro p { margin: 0 0 10px; color: #f9b616; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.kemmy-testimonials-intro h2 { margin: 0; font: 700 clamp(34px, 4vw, 56px)/1.04 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-testimonial-card { display: flex; flex-direction: column; min-height: 390px; padding: 32px; border: 1px solid rgba(255, 248, 231, .72); border-radius: 2px; background: #111; }
.kemmy-testimonial-status { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 248, 231, .24); color: rgba(255, 248, 231, .62); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.kemmy-testimonial-card blockquote { margin: 60px 0 42px; font: 700 clamp(22px, 2.2vw, 30px)/1.36 Boldonse, sans-serif; }
.kemmy-testimonial-person { margin-top: auto; }
.kemmy-testimonial-person strong,
.kemmy-testimonial-person span { display: block; }
.kemmy-testimonial-person strong { font-size: 13px; }
.kemmy-testimonial-person span { margin-top: 5px; color: rgba(255, 248, 231, .6); font-size: 11px; }

@media (max-width: 1000px) {
  .kemmy-projects-grid,
  .kemmy-about-team-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kemmy-page-services .kemmy-service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .kemmy-projects-head { align-items: start; flex-direction: column; }
  .kemmy-projects-grid,
  .kemmy-page-services .kemmy-service-list,
  .kemmy-about-team-list,
  .kemmy-testimonials-inner { grid-template-columns: 1fr; }
  .kemmy-project-device-stage {
    height: clamp(280px, 58vw, 340px);
    padding: 38px 16px 22px;
    overflow: visible;
  }
  .kemmy-project-macbook,
  .kemmy-project-pc { width: min(91%, 430px); }
  .kemmy-project-iphone { right: 13px; bottom: 18px; width: min(25%, 120px); }
  .kemmy-project-ipad { width: min(83%, 370px); }
  .kemmy-project-pencil { right: max(7%, calc(50% - 215px)); height: 155px; }
  .kemmy-project-duo-phone { top: 25px; width: min(31%, 130px); }
  .kemmy-project-duo-phone--back {
    filter: blur(0);
    opacity: 1;
    transform: translateX(-95%) rotate(-6deg) scale(.98);
  }
  .kemmy-project-duo-phone--front { transform: translateX(-5%) rotate(6deg); }
  .kemmy-project-android { left: 13px; bottom: 18px; width: min(25%, 120px); }
  .kemmy-project-facts { gap: 10px; }
  .kemmy-service,
  .kemmy-service-list li,
  .kemmy-page-services .kemmy-service-list li { min-height: 0; padding: 28px; }
  .kemmy-service-steps li,
  .kemmy-page-services .kemmy-service-steps li { padding: 13px 0; }
  .kemmy-team-photo { height: 350px; }
  .kemmy-team-summary { opacity: 1; transform: none; }
  .kemmy-testimonial-card { min-height: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-kemmy-focus-card],
  .kemmy-project-macbook,
  .kemmy-project-pc,
  .kemmy-project-ipad,
  .kemmy-project-pencil,
  .kemmy-project-iphone,
  .kemmy-project-android,
  .kemmy-project-duo-phone,
  .kemmy-team-photo img,
  .kemmy-team-summary { transition: none; }
}

@media (min-width: 1300px) {
  .framer-ku916x .framer-1umc0yt {
    right: calc(100% + 200px);
    top: 265px;
  }
  .framer-ku916x .framer-2tfo79 {           /* flower, bottom left of the frame */
    left: auto;
    right: calc(100% + 30px);
    top: 295px;
    bottom: auto;
  }
}

/* ------------------------------------------------------------------ *
   Footer

   Replaces the three Framer variants with one responsive block. The old
   one set every link in the display face, uppercase and letter-spaced,
   which is unreadable for an address. Here the only display type is the
   four column headings; links and the address are Poppins at a normal
   size, sentence case.

   The wordmark is dark artwork on a transparent background, so it is
   filtered to solid white rather than swapped for a second file.
 * ------------------------------------------------------------------ */

.kemmy-footer {
  /* the page wrapper is a flex column and Framer orders its children with
     `order`; the call-to-action block sits at 1002, so the footer needs a
     higher number to stay last */
  order: 2000;
  background: #0d0d0d;
  background-image: radial-gradient(rgba(249, 182, 22, .14) 1px, transparent 1px);
  background-size: 22px 22px;
  color: #fff8e7;
  font-family: Poppins, sans-serif;
  padding: 88px 100px 0;
  box-sizing: border-box;
  max-width: min(1440px, 100vw);
  margin: 0 auto;
}

.kemmy-footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1.3fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
}

.kemmy-footer-brand { max-width: 360px; }

.kemmy-footer-logo {
  display: block;
  width: 150px;
  height: auto;
  margin-bottom: 22px;
  filter: brightness(0) invert(1);
}

.kemmy-footer-brand p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 248, 231, .66);
}

.kemmy-footer-col h2 {
  margin: 6px 0 20px;
  font-family: Boldonse, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #f9b616;
}

.kemmy-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kemmy-footer-col a {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 248, 231, .82);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.kemmy-footer-col a:hover {
  color: #fff8e7;
  border-bottom-color: #f9b616;
}

.kemmy-footer-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 26px 0 30px;
  border-top: 1px solid rgba(255, 248, 231, .14);
}

.kemmy-footer-base p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 248, 231, .55);
}

.kemmy-footer-base ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 26px;
}

.kemmy-footer-base a {
  font-size: 14px;
  color: rgba(255, 248, 231, .55);
  text-decoration: none;
}
.kemmy-footer-base a:hover { color: #f9b616; }

@media (max-width: 1100px) {
  .kemmy-footer { padding: 72px 56px 0; }
  .kemmy-footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .kemmy-footer-brand { grid-column: 1 / -1; max-width: 520px; }
}

@media (max-width: 767.98px) {
  .kemmy-footer { padding: 56px 20px 0; }
  .kemmy-footer-top { grid-template-columns: 1fr; gap: 34px; padding-bottom: 44px; }
  .kemmy-footer-base { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ------------------------------------------------------------------ *
   Project card tabs

   The tab above each project panel was recoloured to gold, so its label
   and its little icon, both white in the template, are flipped to ink.
 * ------------------------------------------------------------------ */

.framer-4zvnao p { color: #141414; }
.framer-4zvnao .framer-37li92 img { filter: brightness(0); }   /* the small icon only, not the tab shape */

/* ------------------------------------------------------------------ *
   September 2026 finish pass
 * ------------------------------------------------------------------ */

/* Keep title weight consistent across the exported pages and custom sections. */
h1, h2, h3, h4, h5, h6 { font-weight: 750 !important; }

/* The phone layout redraws the three hero banners with pseudo-elements,
   so it needs its own motion instead of the desktop image classes. */
@keyframes kemmy-mobile-banner-bob {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  32% { transform: translate(-50%, -50%) translateY(-10px) scale(1.08); }
  68% { transform: translate(-50%, -50%) translateY(5px) scale(.98); }
}
@keyframes kemmy-mobile-banner-development {
  0%, 100% { transform: translate(-50%, -50%) rotate(90deg) scale(1); }
  32% { transform: translate(-50%, -50%) translateY(-10px) rotate(87deg) scale(1.08); }
  68% { transform: translate(-50%, -50%) translateY(5px) rotate(92deg) scale(.98); }
}
@keyframes kemmy-mobile-banner-convenience {
  0%, 100% { transform: translate(-50%, -50%) rotate(76.38deg) scale(1); }
  32% { transform: translate(-50%, -50%) translateY(-10px) rotate(73.38deg) scale(1.08); }
  68% { transform: translate(-50%, -50%) translateY(5px) rotate(78.38deg) scale(.98); }
}
@keyframes kemmy-mobile-banner-design {
  0%, 100% { transform: translate(-50%, -50%) rotate(-5.6deg) scale(1); }
  32% { transform: translate(-50%, -50%) translateY(-10px) rotate(-8.6deg) scale(1.08); }
  68% { transform: translate(-50%, -50%) translateY(5px) rotate(-3.6deg) scale(.98); }
}
@keyframes kemmy-mobile-banner-label {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  32% { transform: translate(-50%, -50%) translateY(-10px) scale(1.08); }
  68% { transform: translate(-50%, -50%) translateY(5px) scale(.98); }
}
.kemmy-mobile-banner { display: none; }

@media (max-width: 767.98px) {
  .kemmy-mobile-banners-ready .framer-kbz1y0::before,
  .kemmy-mobile-banners-ready .framer-kbz1y0::after,
  .kemmy-mobile-banners-ready .framer-108m6ia::before,
  .kemmy-mobile-banners-ready .framer-108m6ia::after,
  .kemmy-mobile-banners-ready .framer-9itcge::before,
  .kemmy-mobile-banners-ready .framer-9itcge::after {
    content: none !important;
    animation: none !important;
  }
  .kemmy-mobile-banner {
    position: absolute;
    z-index: 3;
    display: block;
    pointer-events: none;
    animation: kemmy-mobile-banner-bob 3.4s cubic-bezier(.45, 0, .2, 1) infinite;
    transform-origin: center;
  }
  .kemmy-mobile-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .kemmy-mobile-banner > span {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    font-family: Boldonse, Inter, sans-serif;
    font-size: 8px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translate(-50%, -50%);
  }
  .kemmy-mobile-banner--development {
    top: -18px;
    left: 71%;
    width: 46px;
    height: 118px;
  }
  .kemmy-mobile-banner--development img { transform: rotate(90deg); }
  .kemmy-mobile-banner--convenience {
    top: -30%;
    left: 17%;
    width: 56px;
    height: 118px;
    animation-delay: -1.1s;
  }
  .kemmy-mobile-banner--convenience img { transform: rotate(76.38deg); }
  .kemmy-mobile-banner--design {
    top: 92%;
    left: 74%;
    width: 112px;
    height: 50px;
    animation-delay: -2.2s;
  }
  .kemmy-mobile-banner--design img { transform: rotate(-5.6deg); }
  .kemmy-page-home .framer-kbz1y0::before,
  .kemmy-page-home .framer-108m6ia::before,
  .kemmy-page-home .framer-9itcge::before {
    animation-duration: 3.4s;
    animation-timing-function: cubic-bezier(.45, 0, .2, 1);
    animation-iteration-count: infinite;
    transform-origin: center;
  }
  .kemmy-page-home .framer-kbz1y0::before { animation-name: kemmy-mobile-banner-development; }
  .kemmy-page-home .framer-108m6ia::before { animation-name: kemmy-mobile-banner-convenience; }
  .kemmy-page-home .framer-9itcge::before { animation-name: kemmy-mobile-banner-design; }
  .kemmy-page-home .framer-kbz1y0::after,
  .kemmy-page-home .framer-108m6ia::after,
  .kemmy-page-home .framer-9itcge::after {
    animation: kemmy-mobile-banner-label 3.4s cubic-bezier(.45, 0, .2, 1) infinite;
    transform-origin: center;
  }
  .kemmy-page-home .framer-108m6ia::before,
  .kemmy-page-home .framer-108m6ia::after { animation-delay: -1.1s; }
  .kemmy-page-home .framer-9itcge::before,
  .kemmy-page-home .framer-9itcge::after { animation-delay: -2.2s; }
  .kemmy-page-home .framer-kbz1y0::before,
  .kemmy-page-home .framer-kbz1y0::after { top: -18px !important; }
}

/* Make the original image-based stickers visibly alive on larger screens too. */
.kemmy-float { animation-duration: 3.8s; }
.kemmy-float-b { animation-duration: 4.4s; }
.kemmy-float-c { animation-duration: 3.2s; }

/* Selected Work starts directly with the projects, without the stock hero. */
.kemmy-page-work .framer-1vqbvs4 { display: none !important; }

/* Live project mockups. The desktop viewport reaches both card edges;
   its traffic lights now belong to the card chrome, not the screenshot. */
.kemmy-device-stage {
  --device-ground: #121212;
  --device-glow: #393939;
  position: relative;
  width: 100%;
  aspect-ratio: 1330 / 1020;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(100% 90% at 82% 8%, var(--device-glow), transparent 65%),
    radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px),
    var(--device-ground);
  background-size: auto, 18px 18px, auto;
}
.kemmy-device-stage[data-project="belishop"] { --device-ground: #071112; --device-glow: #514102; }
.kemmy-device-stage[data-project="we-mep"] { --device-ground: #0b1713; --device-glow: #204d3c; }
.kemmy-device-stage[data-project="drafts"] { --device-ground: #18120d; --device-glow: #66402a; }
.kemmy-device-stage[data-project="toabroad"] { --device-ground: #08131c; --device-glow: #1e5270; }

.kemmy-device-browser {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 78%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 28px 62px rgba(0, 0, 0, .36);
}
.kemmy-device-bar {
  height: clamp(28px, 5.2vw, 46px);
  display: flex;
  align-items: center;
  gap: clamp(5px, .75vw, 9px);
  padding: 0 clamp(10px, 1.5vw, 18px);
  background: #202228;
  box-sizing: border-box;
}
.kemmy-device-dot {
  width: clamp(7px, 1vw, 11px);
  height: clamp(7px, 1vw, 11px);
  flex: 0 0 auto;
  border-radius: 50%;
}
.kemmy-device-dot:nth-child(1) { background: #ff5f57; }
.kemmy-device-dot:nth-child(2) { background: #febc2e; }
.kemmy-device-dot:nth-child(3) { background: #28c840; }
.kemmy-device-domain {
  min-width: 0;
  margin-left: clamp(4px, 1vw, 12px);
  color: #c7cad1;
  font: 500 clamp(8px, 1.1vw, 13px)/1 Poppins, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kemmy-device-browser > img {
  display: block;
  width: 100%;
  height: calc(100% - clamp(28px, 5.2vw, 46px));
  object-fit: cover;
  object-position: top center;
}
.kemmy-device-phone {
  position: absolute;
  right: 3.5%;
  bottom: 2.5%;
  width: 31%;
  height: 70%;
  padding: 1.1%;
  overflow: hidden;
  border-radius: clamp(16px, 3vw, 34px);
  background: #15171c;
  box-sizing: border-box;
  box-shadow: 0 28px 60px rgba(0, 0, 0, .5);
}
.kemmy-device-phone::after {
  content: "";
  position: absolute;
  top: 3.2%;
  left: 50%;
  width: 34%;
  height: 3.8%;
  border-radius: 99px;
  background: #15171c;
  transform: translateX(-50%);
}
.kemmy-device-phone img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: clamp(12px, 2.4vw, 27px);
  object-fit: cover;
  object-position: top center;
}

/* Services page. The old Framer body remains in the file as a reversible
   fallback, but this purpose-built page owns the visible experience. */
.kemmy-page-services [data-framer-root] { display: none !important; }
.kemmy-services-page {
  width: 100%;
  overflow: hidden;
  color: #111;
  background: transparent;                 /* site halftone background shows through */
  font-family: Poppins, sans-serif;
}
.kemmy-services-page * { box-sizing: border-box; }
.kemmy-services-hero {
  min-height: min(780px, calc(100vh - 92px));
  display: grid;
  align-content: end;
  position: relative;
  padding: clamp(110px, 14vw, 190px) clamp(20px, 7vw, 100px) clamp(72px, 9vw, 120px);
  color: #fff8e7;
  background:
    radial-gradient(rgba(249, 182, 22, .26) 1px, transparent 1px),
    #090909;
  background-size: 24px 24px;
}
.kemmy-services-hero::after {
  content: "BUILD  /  HOST  /  MAINTAIN";
  position: absolute;
  top: 36px;
  right: clamp(20px, 7vw, 100px);
  color: #f9b616;
  font-size: 13px;
  font-weight: 600;
}
.kemmy-services-kicker,
.kemmy-service-band-label,
.kemmy-comms-kicker {
  margin: 0 0 18px;
  color: #b07d05;
  font-size: 14px;
  font-weight: 700;
}
.kemmy-services-hero h1 {
  max-width: 1100px;
  margin: 0;
  font-family: Boldonse, sans-serif;
  font-size: clamp(48px, 9vw, 128px);
  font-weight: 750;
  line-height: .93;
  letter-spacing: 0;
  text-transform: uppercase;
}
.kemmy-services-hero-copy {
  max-width: 650px;
  margin: 32px 0 0 auto;
  color: rgba(255, 248, 231, .76);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.65;
}
.kemmy-service-band {
  padding: clamp(72px, 9vw, 128px) clamp(20px, 7vw, 100px);
  border-top: 1px solid rgba(0, 0, 0, .16);
}
.kemmy-service-band:nth-child(3) { background: #fff; }
.kemmy-service-band:nth-child(4) {
  color: #fff8e7;
  background: #0d0d0d;
}
.kemmy-service-band-head {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr);
  gap: clamp(32px, 8vw, 120px);
  align-items: start;
  margin-bottom: clamp(54px, 7vw, 92px);
}
.kemmy-service-band h2 {
  margin: 0;
  font-family: Boldonse, sans-serif;
  font-size: clamp(34px, 5vw, 72px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0;
  text-transform: uppercase;
}
.kemmy-service-band-head > p:last-child {
  max-width: 620px;
  margin: 8px 0 0;
  color: #565656;
  font-size: 17px;
  line-height: 1.7;
}
.kemmy-service-band:nth-child(4) .kemmy-service-band-head > p:last-child {
  color: rgba(255, 248, 231, .68);
}
.kemmy-service-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kemmy-service-list li {
  min-height: 250px;
  padding: 28px 0 14px;
  border-top: 2px solid currentColor;
}
.kemmy-service-index {
  display: block;
  margin-bottom: 44px;
  color: #b07d05;
  font-size: 13px;
  font-weight: 700;
}
.kemmy-service-list h3 {
  margin: 0 0 16px;
  font-family: Boldonse, sans-serif;
  font-size: clamp(20px, 2vw, 29px);
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase;
}
.kemmy-service-list p {
  max-width: 36ch;
  margin: 0;
  color: #5b5b5b;
  font-size: 15px;
  line-height: 1.7;
}
.kemmy-service-band:nth-child(4) .kemmy-service-list p { color: rgba(255, 248, 231, .68); }
.kemmy-services-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
  padding: clamp(72px, 9vw, 120px) clamp(20px, 7vw, 100px);
  background: #f9b616;
}
.kemmy-services-cta h2 {
  max-width: 850px;
  margin: 0;
  font-family: Boldonse, sans-serif;
  font-size: clamp(38px, 6vw, 86px);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}
.kemmy-services-cta a {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  padding: 0 24px;
  color: #fff;
  background: #000;
  border: 1px solid #000;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}
.kemmy-services-cta a:hover { color: #000; background: transparent; }

/* About: communications first, then the company story. */
.kemmy-page-about { background: #f4efe5; }
.kemmy-page-about [data-framer-root] { display: none !important; }
.kemmy-about-page {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  color: #111;
  background: #f4efe5;
  font-family: Poppins, sans-serif;
}
.kemmy-about-page *,
.kemmy-about-page *::before,
.kemmy-about-page *::after { box-sizing: border-box; }
.kemmy-about-page h1,
.kemmy-about-page h2,
.kemmy-about-page h3,
.kemmy-about-page p,
.kemmy-about-page blockquote { margin-top: 0; }
.kemmy-about-kicker {
  margin-bottom: 24px;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}
.kemmy-about-message {
  display: grid;
  grid-template-columns: minmax(300px, 5fr) minmax(460px, 7fr);
  gap: 88px;
  align-items: center;
  min-height: 920px;
  padding: 152px 7vw 104px;
  color: #fff8e7;
  background: #0b0b0b;
}
.kemmy-about-portrait {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid rgba(249, 182, 22, .72);
  background:
    linear-gradient(rgba(249, 182, 22, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249, 182, 22, .08) 1px, transparent 1px),
    #151515;
  background-size: 28px 28px;
}
.kemmy-about-portrait::before,
.kemmy-about-portrait::after {
  position: absolute;
  content: "";
  background: #f9b616;
}
.kemmy-about-portrait::before { top: 50%; left: 0; width: 100%; height: 1px; }
.kemmy-about-portrait::after { top: 0; left: 50%; width: 1px; height: 100%; }
.kemmy-about-portrait-initials {
  position: relative;
  z-index: 1;
  color: #f9b616;
  font-family: Boldonse, sans-serif;
  font-size: 82px;
  font-weight: 750;
  line-height: 1;
}
.kemmy-about-portrait-note {
  position: absolute;
  z-index: 1;
  right: 18px;
  bottom: 16px;
  padding: 8px 10px;
  color: #0b0b0b;
  background: #f9b616;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}
.kemmy-about-message-copy { max-width: 760px; }
.kemmy-about-message-copy .kemmy-about-kicker { color: #f9b616; }
.kemmy-about-message-copy h1 {
  max-width: 700px;
  margin-bottom: 42px;
  font-family: Boldonse, sans-serif;
  font-size: 66px;
  line-height: 1.04;
  text-transform: uppercase;
}
.kemmy-about-message-copy blockquote {
  margin-bottom: 40px;
  color: rgba(255, 248, 231, .86);
  font-size: 27px;
  font-weight: 500;
  line-height: 1.48;
}
.kemmy-about-message-copy blockquote::before { content: "\201C"; color: #f9b616; }
.kemmy-about-message-copy blockquote::after { content: "\201D"; color: #f9b616; }
.kemmy-about-signature {
  display: flex;
  gap: 24px;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 248, 231, .22);
}
.kemmy-about-signature strong,
.kemmy-about-signature span { display: block; }
.kemmy-about-signature strong { font-size: 17px; }
.kemmy-about-signature div > span { margin-top: 4px; color: rgba(255, 248, 231, .58); font-size: 13px; }
.kemmy-about-draft {
  margin-left: auto;
  color: #f9b616;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}
.kemmy-about-signal {
  position: relative;
  height: 72px;
  background: #f9b616;
}
.kemmy-about-signal::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #0b0b0b;
  content: "";
}
@keyframes kemmy-signal-travel {
  from { transform: translateX(-60px); }
  to { transform: translateX(calc(100vw + 60px)); }
}
.kemmy-about-signal span {
  position: absolute;
  z-index: 1;
  top: 24px;
  left: 0;
  width: 24px;
  height: 24px;
  border: 5px solid #f9b616;
  border-radius: 50%;
  background: #0b0b0b;
  animation: kemmy-signal-travel 7s linear infinite;
}
.kemmy-about-intro,
.kemmy-about-principles,
.kemmy-about-timeline,
.kemmy-about-team,
.kemmy-about-cta { padding: 112px 7vw; }
.kemmy-about-intro {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 72px;
  background: #f4efe5;
}
.kemmy-about-intro h2,
.kemmy-about-section-head h2,
.kemmy-about-cta h2 {
  margin-bottom: 32px;
  font-family: Boldonse, sans-serif;
  font-size: 52px;
  line-height: 1.08;
  text-transform: uppercase;
}
.kemmy-about-intro > div { max-width: 920px; }
.kemmy-about-intro > div > p {
  max-width: 790px;
  margin-bottom: 0;
  font-size: 21px;
  line-height: 1.7;
}
.kemmy-about-principles { background: #fff; }
.kemmy-about-section-head {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 72px;
  align-items: start;
  margin-bottom: 72px;
}
.kemmy-about-section-head h2 { max-width: 920px; margin-bottom: 0; }
.kemmy-about-principle-list,
.kemmy-about-years,
.kemmy-about-team-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.kemmy-about-principle-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #151515;
  border-bottom: 1px solid #151515;
}
.kemmy-about-principle-list li {
  min-height: 360px;
  padding: 32px 36px 40px 0;
}
.kemmy-about-principle-list li + li { padding-left: 36px; border-left: 1px solid #151515; }
.kemmy-about-principle-list li > span { color: #a66f00; font-size: 13px; font-weight: 750; }
.kemmy-about-principle-list h3 { margin: 88px 0 20px; font-size: 28px; line-height: 1.16; }
.kemmy-about-principle-list p { margin-bottom: 0; color: #4c4c4c; font-size: 16px; line-height: 1.68; }
.kemmy-about-timeline { color: #fff8e7; background: #111; }
.kemmy-about-timeline .kemmy-about-kicker { color: #f9b616; }
.kemmy-about-years { border-top: 1px solid rgba(255, 248, 231, .28); }
.kemmy-about-years li {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 72px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(255, 248, 231, .28);
}
.kemmy-about-years time { color: #f9b616; font-family: Boldonse, sans-serif; font-size: 36px; font-weight: 750; }
.kemmy-about-years h3 { margin-bottom: 8px; font-size: 23px; }
.kemmy-about-years p { max-width: 680px; margin-bottom: 0; color: rgba(255, 248, 231, .68); line-height: 1.65; }
.kemmy-about-team { background: #f9b616; }
.kemmy-about-team-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid #111; }
.kemmy-about-team-list li {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .55);
}
.kemmy-about-team-list li:nth-child(odd) { padding-right: 36px; }
.kemmy-about-team-list li:nth-child(even) { padding-left: 36px; border-left: 1px solid rgba(0, 0, 0, .55); }
.kemmy-about-team-list strong { font-size: 20px; }
.kemmy-about-team-list span { font-size: 13px; text-align: right; }
.kemmy-about-cta {
  display: grid;
  grid-template-columns: 3fr 7fr 2fr;
  gap: 48px;
  align-items: center;
  background: #f4efe5;
}
.kemmy-about-cta h2 { margin-bottom: 0; }
.kemmy-about-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 22px;
  color: #fff;
  background: #111;
  border: 1px solid #111;
  border-radius: 4px;
  font-weight: 700;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}
.kemmy-about-cta a:hover { color: #111; background: transparent; }

/* Orchestrated page and scroll reveals. Classes are only applied by JS,
   so content stays visible when scripting is unavailable. */
.kemmy-motion-ready .kemmy-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s cubic-bezier(.2, .75, .2, 1), transform .75s cubic-bezier(.2, .75, .2, 1);
}
.kemmy-motion-ready .kemmy-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.kemmy-motion-ready .kemmy-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .58s ease, transform .58s ease;
}
.kemmy-motion-ready .kemmy-stagger.is-visible > * { opacity: 1; transform: none; }
.kemmy-motion-ready .kemmy-stagger.is-visible > *:nth-child(2) { transition-delay: .08s; }
.kemmy-motion-ready .kemmy-stagger.is-visible > *:nth-child(3) { transition-delay: .16s; }
.kemmy-motion-ready .kemmy-stagger.is-visible > *:nth-child(4) { transition-delay: .24s; }

@media (max-width: 820px) {
  .kemmy-service-band-head,
  .kemmy-services-cta { grid-template-columns: 1fr; }
  .kemmy-service-list { grid-template-columns: 1fr; gap: 28px; }
  .kemmy-service-list li { min-height: 0; }
  .kemmy-service-index { margin-bottom: 28px; }
  .kemmy-services-cta { align-items: start; }
  .kemmy-services-cta a { justify-self: start; }
  .kemmy-about-message { grid-template-columns: 5fr 7fr; gap: 42px; padding-right: 32px; padding-left: 32px; }
  .kemmy-about-message-copy h1 { font-size: 48px; }
  .kemmy-about-message-copy blockquote { font-size: 22px; }
  .kemmy-about-intro,
  .kemmy-about-section-head,
  .kemmy-about-years li { grid-template-columns: 1fr; gap: 28px; }
  .kemmy-about-principle-list { grid-template-columns: 1fr; }
  .kemmy-about-principle-list li { min-height: 0; padding: 30px 0 36px; }
  .kemmy-about-principle-list li + li { padding-left: 0; border-top: 1px solid #151515; border-left: 0; }
  .kemmy-about-principle-list h3 { margin-top: 42px; }
  .kemmy-about-cta { grid-template-columns: 1fr; align-items: start; }
  .kemmy-about-cta a { justify-self: start; }
}

@media (max-width: 767.98px) {
  .kemmy-services-hero { min-height: 620px; }
  .kemmy-services-hero::after { top: 24px; }
  .kemmy-services-hero-copy { margin-left: 0; }
  .kemmy-device-phone { width: 34%; height: 72%; }
  .kemmy-about-message {
    grid-template-columns: 1fr;
    gap: 44px;
    min-height: 0;
    padding: 116px 20px 72px;
  }
  .kemmy-about-portrait { max-width: none; aspect-ratio: 5 / 4; }
  .kemmy-about-portrait-initials { font-size: 58px; }
  .kemmy-about-message-copy h1 { margin-bottom: 28px; font-size: 39px; }
  .kemmy-about-message-copy blockquote { margin-bottom: 30px; font-size: 20px; line-height: 1.52; }
  .kemmy-about-signature { align-items: flex-start; }
  .kemmy-about-signal { height: 54px; }
  .kemmy-about-signal span { top: 15px; }
  .kemmy-about-intro,
  .kemmy-about-principles,
  .kemmy-about-timeline,
  .kemmy-about-team,
  .kemmy-about-cta { padding: 72px 20px; }
  .kemmy-about-intro h2,
  .kemmy-about-section-head h2,
  .kemmy-about-cta h2 { font-size: 37px; }
  .kemmy-about-intro > div > p { font-size: 17px; }
  .kemmy-about-section-head { margin-bottom: 48px; }
  .kemmy-about-years time { font-size: 30px; }
  .kemmy-about-team-list { grid-template-columns: 1fr; }
  .kemmy-about-team-list li:nth-child(odd),
  .kemmy-about-team-list li:nth-child(even) { padding: 20px 0; border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .kemmy-mobile-banner,
  .kemmy-page-home .framer-kbz1y0::before,
  .kemmy-page-home .framer-kbz1y0::after,
  .kemmy-page-home .framer-108m6ia::before,
  .kemmy-page-home .framer-108m6ia::after,
  .kemmy-page-home .framer-9itcge::before,
  .kemmy-page-home .framer-9itcge::after { animation: none; }
  .kemmy-about-signal span { animation: none; }
  .kemmy-motion-ready .kemmy-reveal,
  .kemmy-motion-ready .kemmy-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------------------
   Our Work: stacked project cards
   All four cards stick at the same spot and pile up like folder dividers;
   their tabs sit side by side across the top. The top card of the pile is
   marked is-active by setupProjectStack in kemmy.js. Each project has its
   own colourway, all black, gold or their shades.
   ------------------------------------------------------------------ */
.kemmy-projects-shell,
.kemmy-projects-shell :is(p, h3, dt, dd, a, span) { font-family: Poppins, sans-serif; }
.kemmy-projects-head p {
  font-size: 16px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.kemmy-projects-head h2 { font-family: Boldonse, sans-serif; }

.kemmy-projects-stack {
  --card-h: clamp(480px, calc(100vh - 320px), 560px);
  --tab-h: 46px;
  --stack-top: max(150px, calc(50vh - var(--card-h) / 2 + var(--tab-h) / 2 + 20px));
  display: block;
  max-width: 1240px;
  margin: 0 auto;
  padding-top: var(--tab-h);               /* room for the tabs */
}
.kemmy-projects-stack::after {             /* the full pile holds before leaving (content, not
                                              padding: sticky cards are bounded by the content box) */
  display: block;
  height: 22vh;
  content: "";
}
/* Every card sticks at the same spot, vertically centred with room around it,
   and fully covers the one before. Only the tabs, spread across the top,
   show how many are in the pile. The margin is the scroll distance each card
   has to itself before the next one slides over. */
.kemmy-projects-stack .kemmy-project-card {
  --card-bg: #141414; --card-ink: #fff8e7; --card-muted: rgba(255, 248, 231, .68);
  --card-line: rgba(255, 248, 231, .16); --card-accent: #f9b616; --card-accent-ink: #141414;
  position: sticky;
  top: var(--stack-top);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-height: var(--card-h);
  margin: 0;
  border: 0;
  border-radius: 0 0 22px 22px;
  color: var(--card-ink);
  background: var(--card-bg);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .1);
  outline: none;
}
/* Scroll distance each card has to itself before the next slides over. It is
   a top margin because a bottom margin would count against the sticky limit
   and push the earlier cards up. */
.kemmy-projects-stack .kemmy-project-card + .kemmy-project-card { margin-top: 32vh; }
.kemmy-projects-stack .kemmy-project-card:focus-visible { box-shadow: 0 0 0 3px var(--card-accent), 0 24px 48px rgba(0, 0, 0, .1); }
.kemmy-projects-stack [data-tone="gold"]   { --card-bg: #f9b616; --card-ink: #141414; --card-muted: rgba(20, 20, 20, .72); --card-line: rgba(20, 20, 20, .2);  --card-accent: #141414; --card-accent-ink: #f9b616; }
.kemmy-projects-stack [data-tone="bronze"] { --card-bg: #3a2c08; --card-ink: #fff8e7; --card-muted: rgba(255, 248, 231, .7); --card-line: rgba(255, 248, 231, .18); --card-accent: #ffd894; --card-accent-ink: #3a2c08; }
.kemmy-projects-stack [data-tone="cream"]  { --card-bg: #fff4d6; --card-ink: #141414; --card-muted: rgba(20, 20, 20, .68); --card-line: rgba(20, 20, 20, .14); --card-accent: #141414; --card-accent-ink: #fff4d6; }

/* The tab: each one sits further right, so all four stay readable in the pile. */
.kemmy-project-tab { display: none; }
.kemmy-projects-stack .kemmy-project-tab {
  position: absolute;
  bottom: calc(100% - 1px);
  left: calc(var(--stack-index) * 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 25%;
  height: var(--tab-h);
  color: var(--card-ink);
  background: var(--card-bg);
  clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.kemmy-projects-stack .kemmy-project-tab b { font-weight: 600; }
.kemmy-projects-stack .kemmy-project-tab span { color: var(--card-muted); }

.kemmy-projects-stack .kemmy-project-device-stage {
  order: 2;
  height: auto;
  padding: 56px 40px 36px;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kemmy-projects-stack .kemmy-project-body {
  order: 1;
  display: flex;
  flex-direction: column;
  padding: 36px 0 36px 44px;
  border: 0;
}
.kemmy-projects-stack .kemmy-project-meta {
  margin-bottom: auto;
  color: var(--card-muted);
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.kemmy-projects-stack .kemmy-project-body h3 {
  margin: 24px 0 14px;
  color: var(--card-ink);
  font: 700 clamp(30px, 3.2vw, 44px)/1.05 Boldonse, sans-serif;
  text-transform: uppercase;
}
.kemmy-projects-stack .kemmy-project-body > p { color: var(--card-muted); font-size: 16px; line-height: 1.65; }
.kemmy-projects-stack .kemmy-project-reveal,
.kemmy-projects-stack .kemmy-project-card:is(:hover, :focus-visible, :has(:focus-visible), .is-focused) .kemmy-project-reveal {
  max-height: none;
  margin-top: 0;
  opacity: 1;
  transform: none;
}
.kemmy-projects-stack .kemmy-project-facts { margin: 22px 0; padding: 16px 0; border-color: var(--card-line); }
.kemmy-projects-stack .kemmy-project-facts dt {
  margin-bottom: 4px;
  color: var(--card-muted);
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.kemmy-projects-stack .kemmy-project-facts dd { color: var(--card-ink); font-size: 14px; font-weight: 600; line-height: 1.35; }
.kemmy-projects-stack .kemmy-project-action {
  align-self: flex-start;
  min-height: 46px;
  padding: 0 24px;
  border: 1px solid var(--card-accent);
  border-radius: 999px;
  color: var(--card-accent-ink);
  background: var(--card-accent);
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.kemmy-projects-stack .kemmy-project-action:hover { color: var(--card-accent); background: transparent; }

.kemmy-projects-foot { max-width: 1240px; margin: 56px auto 0; text-align: center; }
.kemmy-projects-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 26px;
  border: 1px solid #141414;
  border-radius: 999px;
  color: #141414;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}
.kemmy-projects-foot a:hover { color: #f9b616; background: #141414; }

/* Devices, sized for the wider stage */
.kemmy-projects-stack .kemmy-project-iphone--app { right: 6%; bottom: 8%; width: 21%; }
.kemmy-projects-stack .kemmy-project-ipad { width: 80%; margin: 0 8% 0 0; }

/* Drafts: iPhone Duo, the foldable. It opens like a book. Closed, the cover
   lies over the right half and shows the Drafts app on its outer screen. On
   hover (or, on touch screens, when the card is on top of the pile) the cover
   swings out to the left on the hinge, and the wide inner display comes in
   blurred, then sharpens. --duo-w is the open width. */
.kemmy-projects-stack .kemmy-project-device-stage--phone-duo { display: block; perspective: 1400px; }
.kemmy-duo {
  --duo-w: min(88%, 560px);
  --duo-frame: 7px;
  --duo-r: 26px;
  --duo-ease: cubic-bezier(.3, .7, .2, 1);
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--duo-w);
  aspect-ratio: 1.42;
  transform: translate(-75%, -50%);        /* closed: centre the right half */
  transform-style: preserve-3d;
  transition: transform .9s var(--duo-ease);
}
.kemmy-duo-glow {
  position: absolute;
  inset: 4% 4% 4% 50%;
  opacity: .45;
  filter: blur(34px);
  transform: translateZ(-1px);
  transition: inset .9s var(--duo-ease), opacity .9s ease;
}
.kemmy-duo-glow img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 40px; }
.kemmy-duo-base,
.kemmy-duo-cover { position: absolute; top: 0; bottom: 0; width: 50%; }
.kemmy-duo-base {                          /* right half; hidden until the cover lifts */
  left: 50%;
  overflow: hidden;
  border-radius: 0 var(--duo-r) var(--duo-r) 0;
  background: #1c1c1e;
  box-shadow: 0 26px 40px rgba(0, 0, 0, .35);
  opacity: 0;
  transition: opacity .05s linear .85s;
}
.kemmy-duo-base::before {                  /* hinge crease */
  position: absolute; top: 0; left: 0; bottom: 0; width: 14px; z-index: 2;
  background: linear-gradient(270deg, transparent, rgba(0, 0, 0, .07) 80%, transparent);
  content: "";
}
.kemmy-duo-cover {                         /* left half, hinged on its right edge */
  left: 0;
  transform-origin: 100% 50%;
  transform-style: preserve-3d;
  transform: rotateY(180deg) translateZ(-3px);   /* folded over the right half, just above it */
  transition: transform .9s var(--duo-ease);
}
.kemmy-duo-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #1c1c1e;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.kemmy-duo-face--inner { border-radius: var(--duo-r) 0 0 var(--duo-r); box-shadow: 0 26px 40px rgba(0, 0, 0, .35); }
.kemmy-duo-face--outer {
  padding: var(--duo-frame);
  border-radius: var(--duo-r);
  transform: rotateY(180deg);
  box-shadow: 0 26px 40px rgba(0, 0, 0, .35);
}
.kemmy-duo-screen { position: absolute; overflow: hidden; }
.kemmy-duo-face--inner .kemmy-duo-screen { inset: var(--duo-frame) 0 var(--duo-frame) var(--duo-frame); border-radius: calc(var(--duo-r) - 6px) 0 0 calc(var(--duo-r) - 6px); }
.kemmy-duo-base .kemmy-duo-screen { inset: var(--duo-frame) var(--duo-frame) var(--duo-frame) 0; border-radius: 0 calc(var(--duo-r) - 6px) calc(var(--duo-r) - 6px) 0; }
/* the inner display: one web page spread over both halves (each half shows
   its side of a double-width window), blurred until the Duo is open */
.kemmy-duo-web {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  filter: blur(10px);
  transform: scale(1.04);
  transition: filter .55s ease, transform .55s ease;
}
.kemmy-duo .kemmy-duo-web { position: absolute; }  /* beats the generic .kemmy-pan { relative } */
.kemmy-duo-face--inner .kemmy-duo-web,
.kemmy-duo-base .kemmy-duo-web { left: 0; }

/* The outer screen: the Drafts app in princess mode. Sizes are in container
   units so it scales with the phone. */
.kemmy-app {
  --app-paper: hsl(344, 72%, 92%);
  --app-ink: hsl(25, 25%, 12%);
  --app-soft: hsl(25, 15%, 32%);
  --app-terra: hsl(335, 80%, 52%);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--duo-r) - 6px);
  color: var(--app-ink);
  background: var(--app-paper);
  container-type: inline-size;
  font-family: -apple-system, BlinkMacSystemFont, Poppins, sans-serif;
}
.kemmy-app-status {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 10cqw;
  padding: 0 7cqw;
  font-size: 4.4cqw;
  font-weight: 600;
  letter-spacing: -.01em;
}
.kemmy-app-cam {                           /* the cover's camera, top right as on the Duo */
  position: absolute;
  top: 50%;
  left: 83%;
  width: 3.4cqw;
  height: 3.4cqw;
  border-radius: 50%;
  background: #0d0d0d;
  transform: translate(-50%, -50%);
}
.kemmy-app-ring {                          /* iPhone Duo: one circular status indicator */
  width: 5cqw;
  height: 5cqw;
  border-radius: 50%;
  background: conic-gradient(var(--app-ink) 0 74%, rgba(0, 0, 0, .16) 0);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 55%);
  mask: radial-gradient(circle, transparent 52%, #000 55%);
}
.kemmy-app-head {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: 11cqw;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.kemmy-app-head b { font: 700 6.2cqw/1 Georgia, "Times New Roman", serif; letter-spacing: -.01em; }
.kemmy-app-menu {
  position: absolute;
  left: 6cqw;
  width: 5.6cqw;
  height: 3.4cqw;
  border-top: .7cqw solid var(--app-ink);
  border-bottom: .7cqw solid var(--app-terra);
}
.kemmy-app-feed { flex: 1; }
.kemmy-app-fab {
  position: absolute;
  right: 5cqw;
  bottom: 24cqw;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 13cqw;
  height: 13cqw;
  border-radius: 50%;
  background: var(--app-terra);
  box-shadow: 0 2cqw 5cqw rgba(120, 0, 50, .3);
}
.kemmy-app-fab svg { width: 6cqw; height: 6cqw; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kemmy-app-tabs {                          /* the glass tab bar */
  position: absolute;
  right: 5cqw;
  bottom: 4cqw;
  left: 5cqw;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 16cqw;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  background: rgba(255, 238, 244, .55);
  -webkit-backdrop-filter: blur(10px) saturate(1.6);
  backdrop-filter: blur(10px) saturate(1.6);
  box-shadow: 0 2.5cqw 6cqw rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.kemmy-app-tab { display: flex; flex-direction: column; align-items: center; }
.kemmy-app-tab svg { width: 7.4cqw; height: 7.4cqw; fill: none; stroke: var(--app-soft); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.kemmy-app-tab.is-on svg { stroke: var(--app-terra); stroke-width: 2.4; }
.kemmy-app-tab.is-on::after { width: 1.2cqw; height: 1.2cqw; margin-top: .9cqw; border-radius: 50%; background: var(--app-terra); content: ""; }

/* Open on hover or keyboard focus only (not after a mouse click), so moving
   away always folds it back with the same animation in reverse. */
.kemmy-projects-stack .kemmy-project-card:is(:hover, :focus-visible, :has(:focus-visible)) .kemmy-duo { transform: translate(-50%, -50%); }
.kemmy-projects-stack .kemmy-project-card:is(:hover, :focus-visible, :has(:focus-visible)) .kemmy-duo-base { opacity: 1; transition-delay: 0s; }
.kemmy-projects-stack .kemmy-project-card:is(:hover, :focus-visible, :has(:focus-visible)) .kemmy-duo-cover { transform: rotateY(0) translateZ(0); }
.kemmy-projects-stack .kemmy-project-card:is(:hover, :focus-visible, :has(:focus-visible)) .kemmy-duo-glow { inset: 4%; opacity: .55; }
.kemmy-projects-stack .kemmy-project-card:is(:hover, :focus-visible, :has(:focus-visible)) .kemmy-duo-web { filter: blur(0); transform: none; transition-delay: .45s; }
@media (hover: none), (pointer: coarse) {
  .kemmy-projects-stack .kemmy-project-card.is-active .kemmy-duo { transform: translate(-50%, -50%); }
  .kemmy-projects-stack .kemmy-project-card.is-active .kemmy-duo-base { opacity: 1; transition-delay: 0s; }
  .kemmy-projects-stack .kemmy-project-card.is-active .kemmy-duo-cover { transform: rotateY(0) translateZ(0); }
  .kemmy-projects-stack .kemmy-project-card.is-active .kemmy-duo-glow { inset: 4%; opacity: .55; }
  .kemmy-projects-stack .kemmy-project-card.is-active .kemmy-duo-web { filter: blur(0); transform: none; transition-delay: .45s; }
}
@media (prefers-reduced-motion: reduce) {
  .kemmy-duo, .kemmy-duo-base, .kemmy-duo-cover, .kemmy-duo-glow, .kemmy-duo-web { transition: none; }
}

@media (max-width: 1100px) {
  .kemmy-projects-stack .kemmy-project-body { padding: 32px 0 32px 32px; }
  .kemmy-projects-stack .kemmy-project-device-stage { padding: 48px 24px 28px; }
  .kemmy-projects-stack .kemmy-project-tab { font-size: 14px; gap: 7px; }
}

/* Phones: a wallet-style stack instead of the desktop pile. Each card sticks
   20px lower than the one before, so their top edges stay visible, and a card
   shrinks and darkens as the next ones slide over it (--stack-depth, set in
   kemmy.js). The number moves into a pill inside the card. */
@media (max-width: 767.98px) {
  .kemmy-projects-stack { --tab-h: 0px; --card-h: min(calc(100svh - 190px), 560px); padding-top: 0; }
  .kemmy-projects-stack::after { height: 12vh; }
  .kemmy-projects-stack .kemmy-project-card + .kemmy-project-card { margin-top: 18vh; }
  .kemmy-projects-stack .kemmy-project-card {
    top: calc(92px + var(--stack-index) * 20px);
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    height: var(--card-h);
    min-height: 0;
    border-radius: 20px;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .12);
    /* laid down: as the next card slides over, this one tips back about
       its bottom edge, which stays flat, and its top falls away from you,
       so the pile reads as cards lying on a table. The lift keeps each top
       edge peeking out above the card in front. */
    transform: translateY(calc(min(var(--stack-depth, 0), 1.2) * -.35 * var(--card-h))) perspective(760px) rotateX(calc(min(var(--stack-depth, 0), 1.2) * 30deg));
    transform-origin: 50% 100%;
    backface-visibility: hidden;
  }
  .kemmy-projects-stack .kemmy-project-card::after {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    background: #000;
    opacity: calc(var(--stack-depth, 0) * .22);
    pointer-events: none;
    content: "";
  }
  .kemmy-projects-stack .kemmy-project-tab {
    top: 14px;
    bottom: auto;
    left: 14px;
    z-index: 2;
    width: auto;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--card-line);
    border-radius: 999px;
    background: transparent;
    clip-path: none;
    font-size: 13px;
  }
  .kemmy-projects-stack .kemmy-project-tab span { display: none; }
  .kemmy-projects-stack .kemmy-project-tab::after { content: "/ 04"; color: var(--card-muted); font-weight: 400; }
  .kemmy-projects-stack .kemmy-project-device-stage { order: 1; height: auto; min-height: 0; padding: 44px 14px 8px; }
  .kemmy-projects-stack .kemmy-project-body { order: 2; padding: 4px 22px 24px; }
  .kemmy-projects-stack .kemmy-project-meta { display: none; }
  .kemmy-projects-stack .kemmy-project-body h3 { margin: 0 0 8px; font-size: 26px; }
  .kemmy-projects-stack .kemmy-project-body > p { font-size: 14px; line-height: 1.55; }
  .kemmy-projects-stack .kemmy-project-facts { display: none; }
  .kemmy-projects-stack .kemmy-project-action { margin-top: 16px; min-height: 42px; font-size: 14px; }
  .kemmy-duo { --duo-w: min(92%, 420px); --duo-frame: 5px; --duo-r: 18px; }
  .kemmy-projects-stack .kemmy-project-iphone--app { width: 24%; }

}

@media (max-height: 560px) {
  .kemmy-projects-stack .kemmy-project-card { position: relative; top: 0; height: auto; min-height: 420px; }
  .kemmy-projects-stack .kemmy-project-card + .kemmy-project-card { margin-top: 64px; }
}

/* ------------------------------------------------------------------
   More work: a sideways deck of site snapshots, below the project pile.
   It only moves on horizontal scrolling (kemmy.js setupDeck); vertical
   scrolling passes straight through to the page.
   ------------------------------------------------------------------ */
.kemmy-more { max-width: 1240px; margin: clamp(56px, 9vw, 120px) auto 0; }
.kemmy-projects-shell { overflow-x: clip; } /* clip, not hidden: keeps the sticky pile working */
.kemmy-more-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.kemmy-more-head h2 {
  margin: 14px 0 0;
  color: #111;
  font: 700 clamp(30px, 4vw, 54px)/1.1 Boldonse, sans-serif;
  text-transform: uppercase;
}
.kemmy-deck-nav { display: flex; gap: 10px; flex: none; }
.kemmy-deck-nav button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid #141414;
  border-radius: 0;
  color: #141414;
  background: #fff;
  box-shadow: 4px 4px 0 #141414;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.kemmy-deck-nav button:hover { background: #f9b616; }
.kemmy-deck-nav button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #141414; }
.kemmy-deck-nav button:focus-visible { outline: 3px solid #f9b616; outline-offset: 3px; }
.kemmy-deck-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.kemmy-deck-prev svg { transform: rotate(180deg); }

.kemmy-deck {
  --snap-w: min(64vw, 720px);
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);           /* full-bleed to the window edges */
  padding: 48px 0 64px;
  overflow-x: auto;
  overflow-y: hidden;                      /* never scrolls vertically, so the page does */
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  outline: none;
}
.kemmy-deck::-webkit-scrollbar { display: none; }
.kemmy-deck.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.kemmy-deck:focus-visible { box-shadow: inset 0 0 0 3px #f9b616; }
.kemmy-deck-track {
  position: relative;                      /* card offsets are measured from here */
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0 calc(50vw - var(--snap-w) / 2);
  list-style: none;
}
.kemmy-snap {
  --deck-shade: 0;
  position: relative;
  flex: none;
  width: var(--snap-w);
  scroll-snap-align: center;
  transform-origin: 50% 60%;
  transition: transform .12s linear;
  will-change: transform;
}
.kemmy-deck.is-dragging .kemmy-snap { transition: none; }
.kemmy-snap::after {                       /* cards further from the middle sit in shadow */
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: #141414;
  opacity: var(--deck-shade);
  pointer-events: none;
  content: "";
}
.kemmy-snap a {
  display: block;
  overflow: hidden;
  border: 2px solid #141414;
  border-radius: 16px;
  background: #141414;
  box-shadow: 10px 12px 0 rgba(20, 20, 20, .9), 0 30px 60px rgba(0, 0, 0, .18);
  text-decoration: none;
  user-select: none;
}
.kemmy-snap.is-center a { box-shadow: 10px 12px 0 #f9b616, 0 30px 60px rgba(0, 0, 0, .22); }
.kemmy-snap a:focus-visible { outline: 3px solid #f9b616; outline-offset: 4px; }
.kemmy-snap-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
}
.kemmy-snap-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 248, 231, .25); }
.kemmy-snap-bar i:first-child { background: #f9b616; }
.kemmy-snap-bar span {
  flex: 1;
  margin-left: 10px;
  overflow: hidden;
  color: rgba(255, 248, 231, .8);
  font: 500 13px/1 Poppins, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kemmy-snap-view { display: block; height: clamp(300px, 32vw, 460px); background: #fff; }

@media (max-width: 767.98px) {
  .kemmy-more-head { align-items: flex-start; flex-direction: column; }
  .kemmy-deck { --snap-w: 82vw; padding: 30px 0 48px; }
  .kemmy-snap-view { height: 118vw; max-height: 520px; }
  .kemmy-snap a { box-shadow: 7px 8px 0 rgba(20, 20, 20, .9), 0 20px 40px rgba(0, 0, 0, .16); }
  .kemmy-snap.is-center a { box-shadow: 7px 8px 0 #f9b616, 0 20px 40px rgba(0, 0, 0, .2); }
}

/* ------------------------------------------------------------------
   Scrolling screens. Any .kemmy-pan window holds a tall screenshot that
   scrolls slowly down the page and back up: project screens while their
   card is on top of the pile (or hovered), deck snapshots while in the
   middle of the deck (or hovered). When it stops it pauses where it is.
   ------------------------------------------------------------------ */
.kemmy-pan { position: relative; overflow: hidden; }
.kemmy-project-device-stage .kemmy-pan > img,
.kemmy-snap .kemmy-pan > img,
.kemmy-app .kemmy-pan > img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  min-height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: cover;
  object-position: top;
  animation: kemmy-pan 20s cubic-bezier(.22, .7, .2, 1) infinite paused;
}
/* like someone reading the page: a flick of the wheel, a pause, another
   flick, down to the footer, then back to the top */
@keyframes kemmy-pan {
  0%, 6%    { top: 0;    transform: translateY(0); }
  11%, 17%  { top: 17%;  transform: translateY(-17%); }
  22%, 28%  { top: 34%;  transform: translateY(-34%); }
  33%, 39%  { top: 51%;  transform: translateY(-51%); }
  44%, 50%  { top: 68%;  transform: translateY(-68%); }
  55%, 61%  { top: 85%;  transform: translateY(-85%); }
  66%, 80%  { top: 100%; transform: translateY(-100%); }
  90%, 100% { top: 0;    transform: translateY(0); }
}
/* main projects on hover (on touch screens: the card on top of the pile);
   deck cards in the middle or hovered; the web view's thumbnails */
.kemmy-project-card:hover .kemmy-pan > img,
.kemmy-snap:is(:hover, .is-center) .kemmy-pan > img,
.kemmy-view-rail a:is(:hover, .is-on) .kemmy-pan > img,
.kemmy-view-still .kemmy-pan > img { animation-play-state: running; }
@media (hover: none), (pointer: coarse) {
  .kemmy-project-card.is-active .kemmy-pan > img { animation-play-state: running; }
}
/* phone screens are shorter pages; let them move a little quicker */
.kemmy-phone-screen > img, .kemmy-app-feed > img { animation-duration: 16s; }
@media (prefers-reduced-motion: reduce) {
  .kemmy-pan > img { animation: none !important; }
  .kemmy-snap { transition: none; }
}

/* Phone screens inside the device frames */
.kemmy-project-iphone .kemmy-phone-screen { aspect-ratio: 9 / 18.5; border-radius: 16px; background: #000; }
.kemmy-project-android .kemmy-phone-screen { aspect-ratio: 9 / 19.5; border-radius: 10px; background: #000; }

/* ------------------------------------------------------------------
   Site background: white halftone waves on light grey
   (assets/kemmy/bg-halftone.png, generated by tools/make-pattern.py).
   It sits on a fixed layer behind everything; the Framer page wrappers
   and the project section are made transparent so it shows through.
   ------------------------------------------------------------------ */
:root body { background: #efece5; }
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #efece5 url(bg-halftone.png) 50% 50% / cover no-repeat;
  pointer-events: none;
  content: "";
}
.framer-8MNDT.framer-18z69uo,
.framer-iuyWB.framer-8rrp3u,
.framer-Br3Bj.framer-nzae13,
.kemmy-projects-shell { background: transparent; }
/* the template's cream dot texture behind the page heroes (home, about,
   services, blogs, contact) would cover the pattern; the file is kept */
img[src*="PKSaKo1OIRFFLxkIAULU14BPI"] { visibility: hidden; }
/* same for the cream strip behind the Projects page header; that header
   gets the plain white bar the other pages have */
img[src*="j2aFbYpNegrzxAqusoUfKPj6Nk"] { visibility: hidden; }
header.framer-1p7okhb { background: #fff; }

/* ------------------------------------------------------------------
   Header: slides away while scrolling down, back on scroll up (kemmy.js).
   `translate` is used because the header already carries an inline
   transform for centring.
   ------------------------------------------------------------------ */
header[data-framer-name="Header"] { transition: translate .35s cubic-bezier(.2, .8, .2, 1); }
header[data-framer-name="Header"].kemmy-nav-hidden { translate: 0 -120%; }
@media (prefers-reduced-motion: reduce) {
  header[data-framer-name="Header"] { transition: none; }
}

/* ------------------------------------------------------------------
   Labels: small rectangular banners with a hard offset shadow, tilted a
   touch. Used for section labels (Our Work, More work, Services) and the
   hero labels. Each takes a colourway from the black and gold set.
   ------------------------------------------------------------------ */
.kemmy-projects-shell .kemmy-label,
#kemmy-services .kemmy-services-eyebrow,
.kemmy-price-head .kemmy-label,
.kemmy-dom-hero .kemmy-label,
.kemmy-view-side .kemmy-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 16px 8px 12px;
  border: 2px solid #141414;
  border-radius: 999px;
  color: #141414;
  background: #f9b616;
  box-shadow: 3px 4px 0 #141414;
  font: 700 13px/1 Poppins, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s ease;
}
/* a small four-point spark ahead of the words */
.kemmy-projects-shell .kemmy-label::before,
#kemmy-services .kemmy-services-eyebrow::before,
.kemmy-price-head .kemmy-label::before,
.kemmy-dom-hero .kemmy-label::before,
.kemmy-view-side .kemmy-label::before {
  width: 11px;
  height: 11px;
  background: currentColor;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  content: "";
}
.kemmy-projects-shell .kemmy-label:hover,
#kemmy-services .kemmy-services-eyebrow:hover,
.kemmy-price-head .kemmy-label:hover,
.kemmy-dom-hero .kemmy-label:hover,
.kemmy-view-side .kemmy-label:hover { transform: rotate(-5deg) translateY(-2px); box-shadow: 5px 7px 0 #141414; }
.kemmy-more .kemmy-label,
.kemmy-view-side .kemmy-label { color: #f9b616; background: #141414; box-shadow: 3px 4px 0 #f9b616; }
.kemmy-more .kemmy-label:hover,
.kemmy-view-side .kemmy-label:hover { transform: rotate(4deg) translateY(-2px); box-shadow: 5px 7px 0 #f9b616; }
#kemmy-services .kemmy-services-eyebrow { margin-bottom: 18px; background: #fff4d6; }
.kemmy-projects-head .kemmy-label + h2 { margin-top: 20px; }

/* Hero: Websites / Apps / Maintenance. Pill buttons with an icon badge
   standing out of the top-left corner; hover tilts the pill, kicks the
   icon and shows a one-line description. */
.kemmy-hero-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 34px;
  margin: 0 0 30px;
  padding: 16px 0 0 18px;
  list-style: none;
  width: max-content;
  max-width: calc(100vw - 40px);
}
.kemmy-hero-labels li { position: relative; animation: kemmy-bob 5s ease-in-out infinite; }
.kemmy-hero-labels li:nth-child(2) { animation-delay: -1.6s; }
.kemmy-hero-labels li:nth-child(3) { animation-delay: -3.2s; }
.kemmy-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 11px 18px 10px 32px;
  border: 2px solid #141414;
  border-radius: 999px;
  color: #141414;
  background: #f9b616;
  box-shadow: 3px 4px 0 #141414;
  font: 700 13px/1 Poppins, sans-serif;
  letter-spacing: .05em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s ease;
}
.kemmy-chip-icon {
  position: absolute;
  top: -17px;
  left: -18px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 2px solid #141414;
  border-radius: 12px;
  background: #fffdf6;
  box-shadow: 2px 3px 0 #141414;
  transform: rotate(-12deg);
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.kemmy-chip-icon svg { width: 22px; height: 22px; fill: none; stroke: #141414; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kemmy-hero-labels li:nth-child(2) .kemmy-chip { color: #f9b616; background: #141414; box-shadow: 3px 4px 0 #f9b616; }
.kemmy-hero-labels li:nth-child(2) .kemmy-chip-icon { background: #f9b616; transform: rotate(10deg); }
.kemmy-hero-labels li:nth-child(3) .kemmy-chip { background: #fff4d6; }
.kemmy-hero-labels li:nth-child(3) .kemmy-chip-icon { background: #f9b616; transform: rotate(-4deg); }
.kemmy-chip:is(:hover, :focus-visible) { outline: none; transform: rotate(-5deg) translateY(-3px); box-shadow: 5px 7px 0 #141414; }
.kemmy-hero-labels li:nth-child(2) .kemmy-chip:is(:hover, :focus-visible) { transform: rotate(4deg) translateY(-3px); box-shadow: 5px 7px 0 #f9b616; }
.kemmy-chip:is(:hover, :focus-visible) .kemmy-chip-icon { transform: rotate(14deg) translate(-3px, -6px) scale(1.1); }
.kemmy-chip-tip {
  position: absolute;
  top: calc(100% + 14px);
  left: -6px;
  z-index: 6;
  width: 230px;
  padding: 10px 13px;
  border: 2px solid #141414;
  border-radius: 14px;
  color: #141414;
  background: #fffdf6;
  box-shadow: 4px 5px 0 #141414;
  font: 500 13px/1.45 Poppins, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) rotate(4deg);
  transition: opacity .2s ease, transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.kemmy-chip:is(:hover, :focus-visible) .kemmy-chip-tip { opacity: 1; transform: rotate(5deg); }
@keyframes kemmy-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -4px; }
}

/* The starburst word banners are gone (kemmy.js marks them). */
.kemmy-banner-off,
.kemmy-mobile-banner { display: none !important; }

/* ------------------------------------------------------------------
   Domain search in the hero. Results open under the field inside the
   hero, so the page never jumps anywhere.
   ------------------------------------------------------------------ */
.kemmy-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.kemmy-domain {
  position: relative;
  z-index: 3;                              /* above the hero illustration */
  width: min(520px, calc(100vw - 40px)); /* wider than the narrow text column on desktop */
  margin: 4px 0 28px;
  font-family: Poppins, sans-serif;
}
.kemmy-domain-field {
  display: flex;
  border: 2px solid #141414;
  background: #fff;
  box-shadow: 6px 6px 0 #141414;
}
.kemmy-domain-field:focus-within { box-shadow: 6px 6px 0 #f9b616; }
.kemmy-domain input {
  flex: 1;
  min-width: 0;
  height: 58px;
  padding: 0 18px;
  border: 0;
  outline: none;
  color: #141414;
  background: transparent;
  font: 500 16px Poppins, sans-serif;     /* 16px keeps iOS from zooming in */
}
.kemmy-domain input::placeholder { color: #8a8478; }
.kemmy-domain button {
  flex: none;
  padding: 0 24px;
  border: 0;
  border-left: 2px solid #141414;
  color: #f9b616;
  background: #141414;
  font: 600 15px Poppins, sans-serif;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.kemmy-domain button:hover,
.kemmy-domain button:focus-visible { color: #141414; background: #f9b616; outline: none; }
.kemmy-domain.is-busy button { opacity: .6; pointer-events: none; }
.kemmy-domain-results {
  margin-top: 16px;
  padding: 14px 16px;
  border: 2px solid #141414;
  background: #fff;
  box-shadow: 6px 6px 0 #f9b616;
}
.kemmy-domain-note { margin: 0; color: #4a4a4a; font-size: 14px; line-height: 1.5; }
.kemmy-domain-list { margin: 10px 0 0; padding: 0; list-style: none; }
.kemmy-domain-small { margin: 8px 0 0; color: #8a8478; font-size: 12px; }
.kemmy-domain-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid #ece7da;
}
.kemmy-domain-list span { color: #141414; font-size: 16px; font-weight: 600; word-break: break-all; }
.kemmy-domain-list a {
  flex: none;
  padding: 6px 14px;
  border: 2px solid #141414;
  color: #141414;
  background: #f9b616;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 3px 3px 0 #141414;
}
.kemmy-domain-list a:hover { background: #fff4d6; }
@media (max-width: 767.98px) {
  /* the phone hero is centred */
  .kemmy-hero-labels { justify-content: center; margin-inline: auto; }
  .kemmy-domain { margin-inline: auto; text-align: left; }
  .kemmy-domain { margin-top: 22px; }
  .kemmy-domain input { height: 54px; padding: 0 14px; }
  .kemmy-domain button { padding: 0 16px; }
}

/* The live background canvas (kemmy.js) sits where body::before was. */
.kemmy-pattern {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
body.kemmy-pattern-live::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .kemmy-hero-labels li { animation: none; }
}

/* ------------------------------------------------------------------
   iPhone Duo, open: the hinge line down the middle of the inner display,
   and the under-display camera at the top right of the right half.
   ------------------------------------------------------------------ */
.kemmy-duo-hinge {                         /* the crease: Apple keeps it hard to see, so a soft */
  position: absolute;                       /* fold of light, not a line; never shown when closed */
  top: var(--duo-frame);
  bottom: var(--duo-frame);
  left: 50%;
  z-index: 4;
  width: 16px;
  margin-left: -8px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .05) 38%, rgba(255, 255, 255, .22) 50%, rgba(0, 0, 0, .05) 62%, transparent);
  opacity: 0;
  transform: translateZ(2px);
  transition: opacity .25s ease;
  pointer-events: none;
}
.kemmy-duo-ucam {                          /* under-display camera: faint, top of the inner display
                                              near the middle, where the Duo has it */
  position: absolute;
  top: calc(var(--duo-frame) + 8px);
  left: 22%;
  z-index: 3;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 20, 24, .5), rgba(20, 20, 24, .18) 60%, transparent 72%);
}
.kemmy-projects-stack .kemmy-project-card:is(:hover, :focus-visible, :has(:focus-visible)) .kemmy-duo-hinge { opacity: 1; transition-delay: .75s; }
@media (hover: none), (pointer: coarse) {
  .kemmy-projects-stack .kemmy-project-card.is-active .kemmy-duo-hinge { opacity: 1; transition-delay: .75s; }
}
@media (max-width: 767.98px) {
  .kemmy-duo-ucam { top: calc(var(--duo-frame) + 6px); width: 6px; height: 6px; }
}

/* ------------------------------------------------------------------
   More work deck: a hint beside the title, an "Open" pill on the front
   card, and a slider under the deck in place of the arrow buttons.
   ------------------------------------------------------------------ */
.kemmy-more-hint { max-width: 290px; margin: 0; color: #5b5750; font: 400 14px/1.5 Poppins, sans-serif; }
.kemmy-more-shell { padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 64px) clamp(56px, 7vw, 96px); }
.kemmy-more-shell .kemmy-more { margin-top: 0; }
.kemmy-deck.is-sliding { scroll-snap-type: none; }
.kemmy-snap a { position: relative; }
.kemmy-snap:not(.is-center) a { cursor: pointer; }
.kemmy-snap-open {
  position: absolute;
  bottom: 18px;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 2px solid #141414;
  border-radius: 999px;
  color: #141414;
  background: #f9b616;
  box-shadow: 3px 4px 0 #141414;
  font: 700 13px/1 Poppins, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity .25s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1);
  pointer-events: none;
}
.kemmy-snap-open svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kemmy-snap.is-center .kemmy-snap-open { opacity: 1; transform: translate(-50%, 0); }
.kemmy-snap.is-center a:hover .kemmy-snap-open { transform: translate(-50%, -3px) rotate(-3deg); }
.kemmy-deck-rail {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 720px;
  margin: 6px auto 0;
  padding: 0 4px;
  color: #141414;
  font: 600 14px/1.2 Poppins, sans-serif;
}
.kemmy-deck-name { flex: 0 0 150px; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.kemmy-deck-count { flex: 0 0 64px; color: #6b665c; font-weight: 500; }
.kemmy-deck-slider {
  flex: 1;
  min-width: 0;
  height: 30px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.kemmy-deck-slider:focus { outline: none; }
.kemmy-deck-slider::-webkit-slider-runnable-track {
  height: 8px;
  border: 2px solid #141414;
  border-radius: 999px;
  background: #fffdf6;
  box-shadow: 2px 3px 0 #141414;
}
.kemmy-deck-slider::-webkit-slider-thumb {
  width: 46px;
  height: 26px;
  margin-top: -11px;
  border: 2px solid #141414;
  border-radius: 999px;
  background: #f9b616;
  box-shadow: 2px 3px 0 #141414;
  -webkit-appearance: none;
  appearance: none;
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.kemmy-deck-slider:hover::-webkit-slider-thumb,
.kemmy-deck-slider:active::-webkit-slider-thumb { transform: rotate(-8deg) scale(1.06); }
.kemmy-deck-slider:focus-visible::-webkit-slider-thumb { background: #141414; box-shadow: 2px 3px 0 #f9b616; }
.kemmy-deck-slider::-moz-range-track { height: 8px; border: 2px solid #141414; border-radius: 999px; background: #fffdf6; box-shadow: 2px 3px 0 #141414; }
.kemmy-deck-slider::-moz-range-thumb { width: 42px; height: 22px; border: 2px solid #141414; border-radius: 999px; background: #f9b616; box-shadow: 2px 3px 0 #141414; }
@media (max-width: 767.98px) {
  .kemmy-more-hint { font-size: 13px; }
  .kemmy-deck-rail { flex-wrap: wrap; gap: 6px 12px; padding: 0 20px; }
  .kemmy-deck-slider { flex: 1 0 100%; order: 3; }
  .kemmy-deck-name { flex: 1; text-align: left; }
  .kemmy-deck-count { flex: none; text-align: right; }
  .kemmy-snap-open { bottom: 14px; padding: 10px 15px; font-size: 12px; }
}

/* Titles: a few words dimmed (kemmy.js picks them) */
.kemmy-dim { opacity: .34; }

/* ------------------------------------------------------------------
   Pricing page
   ------------------------------------------------------------------ */
.kemmy-pricing-hero::after { content: "PRICES IN RWF"; }
.kemmy-price-band { padding: clamp(64px, 8vw, 110px) clamp(20px, 7vw, 100px); }
.kemmy-price-band--dark { color: #fff8e7; background: #111; }
.kemmy-price-head { max-width: 1240px; margin: 0 auto 38px; }
.kemmy-price-head h2 { margin: 20px 0 0; font: 700 clamp(30px, 4vw, 52px)/1.1 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-price-band--dark .kemmy-price-head .kemmy-label { box-shadow: 3px 4px 0 #fff8e7; }
.kemmy-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; max-width: 1240px; margin: 0 auto; }
.kemmy-price-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin-left: 0; }
@media (min-width: 1440px) { .kemmy-price-grid--two { margin-left: calc((100% - 1240px) / 2); } }
.kemmy-price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 26px 26px;
  border: 2px solid #141414;
  border-radius: 22px;
  color: #141414;
  background: #fffdf6;
  box-shadow: 6px 7px 0 #141414;
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s ease;
}
.kemmy-price-card:hover { transform: translate(-3px, -5px) rotate(-1deg); box-shadow: 10px 12px 0 #141414; }
.kemmy-price-card.is-featured { background: #f9b616; }
.kemmy-price-band--dark .kemmy-price-card { box-shadow: 6px 7px 0 #f9b616; }
.kemmy-price-band--dark .kemmy-price-card:hover { box-shadow: 10px 12px 0 #f9b616; }
.kemmy-price-flag {
  position: absolute;
  top: -16px;
  right: 22px;
  margin: 0;
  padding: 7px 12px;
  border: 2px solid #141414;
  border-radius: 999px;
  color: #f9b616;
  background: #141414;
  font: 700 12px/1 Poppins, sans-serif;
  text-transform: uppercase;
  transform: rotate(4deg);
}
.kemmy-price-card h3 { margin: 0 0 16px; font: 700 22px/1.2 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-price-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; font: 600 16px Poppins, sans-serif; }
.kemmy-price-amount b { font: 700 clamp(34px, 3.4vw, 46px)/1 Poppins, sans-serif; }
.kemmy-price-amount small { flex-basis: 100%; margin-top: 4px; color: rgba(20, 20, 20, .6); font-size: 13px; font-weight: 500; }
.kemmy-price-sum { margin: 16px 0 18px; color: rgba(20, 20, 20, .72); font-size: 14px; line-height: 1.55; }
.kemmy-price-card ul { display: grid; gap: 10px; margin: 0 0 26px; padding: 18px 0 0; border-top: 1.5px dashed rgba(20, 20, 20, .2); list-style: none; }
.kemmy-price-card li { display: flex; gap: 10px; font-size: 14px; line-height: 1.45; }
.kemmy-price-card li svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kemmy-price-cta {
  align-self: flex-start;
  margin-top: auto;
  padding: 13px 20px;
  border: 2px solid #141414;
  border-radius: 999px;
  color: #f9b616;
  background: #141414;
  box-shadow: 3px 4px 0 rgba(20, 20, 20, .35);
  font: 700 14px/1 Poppins, sans-serif;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.kemmy-price-cta:hover { transform: rotate(-4deg) translateY(-2px); }
.kemmy-price-note { max-width: 1240px; margin: 26px auto 0; color: #6b665c; font-size: 13px; }
.kemmy-price-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; max-width: 1240px; margin: 0 auto; }
.kemmy-price-list div { padding: 20px 22px; border: 2px solid #141414; border-radius: 18px; background: #fffdf6; box-shadow: 4px 5px 0 #141414; }
.kemmy-price-list dt { margin-bottom: 8px; color: #6b665c; font-size: 13px; font-weight: 600; text-transform: uppercase; }
.kemmy-price-list dd { margin: 0; font: 600 17px/1.35 Poppins, sans-serif; }
@media (max-width: 1000px) {
  .kemmy-price-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; gap: 34px; }
  .kemmy-price-grid--two { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Domains page: results, hosting, add-ons and the running order
   ------------------------------------------------------------------ */
.kemmy-dom-hero { padding: clamp(120px, 14vw, 170px) clamp(20px, 7vw, 100px) 40px; max-width: 1240px; margin: 0 auto; }
.kemmy-dom-hero h1 { margin: 22px 0 26px; font: 700 clamp(34px, 5vw, 68px)/1.05 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-dom-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px;
  align-items: start;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 7vw, 100px) clamp(64px, 8vw, 110px);
}
.kemmy-dom-results { margin-bottom: 42px; }
.kemmy-dom-results h2,
.kemmy-dom-step { margin: 0 0 18px; font: 700 clamp(22px, 2.4vw, 30px)/1.15 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-dom-results em { color: #b07d05; font-style: normal; }
.kemmy-dom-step { margin-top: 10px; }
.kemmy-dom-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.kemmy-dom-list label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px 16px 56px;
  border: 2px solid #141414;
  border-radius: 16px;
  background: #fffdf6;
  box-shadow: 3px 4px 0 #141414;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background-color .2s ease;
}
.kemmy-dom-list label:hover { transform: translateY(-2px) rotate(-.6deg); }
.kemmy-dom-list input { position: absolute; opacity: 0; }
.kemmy-dom-list i {
  position: absolute;
  left: 18px;
  width: 24px;
  height: 24px;
  border: 2px solid #141414;
  border-radius: 8px;
  background: #fff;
}
.kemmy-dom-list input:checked ~ i { background: #141414 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f9b616' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / 16px no-repeat; }
.kemmy-dom-list label:has(input:checked) { background: #f9b616; }
.kemmy-dom-list input:focus-visible ~ i { outline: 3px solid #f9b616; outline-offset: 3px; }
.kemmy-dom-name { flex: 1; font: 600 18px Poppins, sans-serif; word-break: break-all; }
.kemmy-dom-price { font: 600 15px Poppins, sans-serif; white-space: nowrap; }
.kemmy-dom-price small { color: rgba(20, 20, 20, .6); font-weight: 500; }
.kemmy-dom-taken { margin: 16px 0 0; color: #6b665c; font-size: 13px; line-height: 1.6; }
.kemmy-dom-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 42px; }
.kemmy-dom-plan { position: relative; display: flex; cursor: pointer; }
.kemmy-dom-plan input { position: absolute; opacity: 0; }
.kemmy-dom-plan-card {
  flex: 1;
  padding: 20px;
  border: 2px solid #141414;
  border-radius: 18px;
  background: #fffdf6;
  box-shadow: 3px 4px 0 #141414;
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background-color .2s ease;
}
.kemmy-dom-plan:hover .kemmy-dom-plan-card { transform: translateY(-3px) rotate(-1deg); }
.kemmy-dom-plan input:checked + .kemmy-dom-plan-card { background: #141414; color: #fff8e7; box-shadow: 4px 5px 0 #f9b616; }
.kemmy-dom-plan input:focus-visible + .kemmy-dom-plan-card { outline: 3px solid #f9b616; outline-offset: 3px; }
.kemmy-dom-plan-card b { display: block; font: 700 15px Poppins, sans-serif; text-transform: uppercase; }
.kemmy-dom-plan-card strong { display: block; margin: 8px 0 12px; font: 700 22px Poppins, sans-serif; }
.kemmy-dom-plan-card strong small { font-size: 12px; font-weight: 500; opacity: .7; }
.kemmy-dom-plan-card ul { display: grid; gap: 6px; margin: 0; padding: 12px 0 0; border-top: 1.5px dashed currentColor; list-style: none; font-size: 13px; line-height: 1.4; opacity: .85; }
.kemmy-dom-extras { display: grid; gap: 12px; }
.kemmy-dom-extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 2px solid #141414;
  border-radius: 16px;
  background: #fffdf6;
}
.kemmy-dom-extra b { display: block; font: 600 16px Poppins, sans-serif; }
.kemmy-dom-extra span { color: #6b665c; font-size: 13px; line-height: 1.45; }
.kemmy-dom-stepper { display: flex; align-items: center; flex: none; border: 2px solid #141414; border-radius: 999px; overflow: hidden; }
.kemmy-dom-stepper button { width: 38px; height: 36px; border: 0; color: #141414; background: #f9b616; font: 700 18px Poppins, sans-serif; cursor: pointer; }
.kemmy-dom-stepper output { min-width: 34px; text-align: center; font: 600 15px Poppins, sans-serif; }
.kemmy-dom-toggle { position: relative; flex: none; cursor: pointer; }
.kemmy-dom-toggle input { position: absolute; opacity: 0; }
.kemmy-dom-toggle span { display: inline-block; padding: 9px 16px; border: 2px solid #141414; border-radius: 999px; color: #141414; background: #fff; font: 700 13px Poppins, sans-serif; text-transform: uppercase; }
.kemmy-dom-toggle input:checked + span { color: #f9b616; background: #141414; }
.kemmy-dom-toggle input:checked + span::before { content: "Added "; }
.kemmy-dom-toggle input:checked + span { font-size: 0; }
.kemmy-dom-toggle input:checked + span::before { font-size: 13px; }
.kemmy-dom-toggle input:focus-visible + span { outline: 3px solid #f9b616; outline-offset: 3px; }
.kemmy-dom-summary {
  position: sticky;
  top: 110px;
  padding: 24px;
  border: 2px solid #141414;
  border-radius: 22px;
  color: #fff8e7;
  background: #141414;
  box-shadow: 6px 7px 0 #f9b616;
  font-family: Poppins, sans-serif;
}
.kemmy-dom-summary h3 { margin: 0 0 14px; color: #f9b616; font: 700 16px Poppins, sans-serif; text-transform: uppercase; }
.kemmy-dom-summary ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.kemmy-dom-summary li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.4; }
.kemmy-dom-summary li b { white-space: nowrap; }
.kemmy-dom-summary > p { margin: 0; color: rgba(255, 248, 231, .7); font-size: 14px; }
.kemmy-dom-total { display: flex; justify-content: space-between; margin: 18px 0; padding-top: 16px; border-top: 1.5px dashed rgba(255, 248, 231, .3); font-size: 18px; }
.kemmy-dom-send {
  display: block;
  padding: 15px;
  border: 2px solid #f9b616;
  border-radius: 999px;
  color: #141414;
  background: #f9b616;
  font: 700 15px Poppins, sans-serif;
  text-align: center;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.kemmy-dom-send:hover { transform: rotate(-3deg) translateY(-2px); }
.kemmy-dom-send.is-off { opacity: .45; pointer-events: none; }
.kemmy-dom-small { margin: 14px 0 0 !important; font-size: 12px !important; line-height: 1.5; }
@media (max-width: 1000px) {
  .kemmy-dom-body { grid-template-columns: 1fr; }
  .kemmy-dom-plans { grid-template-columns: 1fr; }
  .kemmy-dom-summary { position: sticky; top: auto; bottom: 12px; }
}

/* ------------------------------------------------------------------
   Web view (work.html): one of our sites live in a frame, the others
   in a rail beside it (below it on phones).
   ------------------------------------------------------------------ */
.kemmy-page-view .kemmy-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100svh;
  min-height: 560px;
  padding: 104px clamp(12px, 3vw, 36px) 20px;
  box-sizing: border-box;
  font-family: Poppins, sans-serif;
}
.kemmy-view-top { display: flex; align-items: center; gap: 14px; }
.kemmy-view-back,
.kemmy-view-tools button,
.kemmy-view-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 10px 15px;
  border: 2px solid #141414;
  border-radius: 999px;
  color: #141414;
  background: #fffdf6;
  box-shadow: 2px 3px 0 #141414;
  font: 700 13px/1 Poppins, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.kemmy-view-back:hover,
.kemmy-view-tools button:hover,
.kemmy-view-open:hover { transform: rotate(-4deg) translateY(-2px); }
.kemmy-view-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kemmy-view-tools { display: flex; gap: 8px; }
.kemmy-view-tools button[aria-pressed="true"] { color: #f9b616; background: #141414; }
.kemmy-view-open { color: #141414; background: #f9b616; }
.kemmy-view-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 16px;
  border: 2px solid #141414;
  border-radius: 999px;
  background: #141414;
}
.kemmy-view-bar i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 248, 231, .25); }
.kemmy-view-bar i:first-child { background: #f9b616; }
.kemmy-view-url { flex: 1; min-width: 0; margin-left: 10px; overflow: hidden; color: #fff8e7; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.kemmy-view-body { display: flex; flex: 1; gap: 20px; min-height: 0; }
.kemmy-view-frame {
  display: flex;
  justify-content: center;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border: 2px solid #141414;
  border-radius: 20px;
  background: #1c1c1e;
  box-shadow: 6px 7px 0 #141414;
}
.kemmy-view-stage { position: relative; width: 100%; height: 100%; background: #fff; transition: width .45s cubic-bezier(.3, .7, .2, 1); }
[data-view="phone"] .kemmy-view-stage { width: min(100%, 400px); }
.kemmy-view-stage iframe { display: block; width: 100%; height: 100%; border: 0; }
.kemmy-view-stage.is-loading::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #6b665c;
  background: #fffdf6;
  font: 600 14px Poppins, sans-serif;
  content: "Loading the site…";
}
.kemmy-view-still { display: flex; flex-direction: column; height: 100%; }
.kemmy-view-still-pic { flex: 1; min-height: 0; }
.kemmy-view .kemmy-pan > img { position: absolute; top: 0; left: 0; width: 100%; height: auto; min-height: 100%; animation: kemmy-pan 20s cubic-bezier(.22, .7, .2, 1) infinite paused; }
.kemmy-view-still p { margin: 0; padding: 14px 18px; border-top: 2px solid #141414; color: #141414; background: #fffdf6; font-size: 14px; line-height: 1.5; }
.kemmy-view-still a { color: #141414; font-weight: 700; }
.kemmy-view-side { display: flex; flex-direction: column; flex: 0 0 250px; min-height: 0; }
.kemmy-view-side .kemmy-label { align-self: flex-start; margin: 0 0 14px 2px; }
.kemmy-view-rail { display: grid; gap: 14px; margin: 0; padding: 4px 12px 12px 4px; overflow-y: auto; list-style: none; }
.kemmy-view-rail a {
  display: block;
  overflow: hidden;
  border: 2px solid #141414;
  border-radius: 14px;
  color: #141414;
  background: #fffdf6;
  box-shadow: 3px 4px 0 #141414;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s ease;
}
.kemmy-view-rail a:hover { transform: rotate(-1.5deg) translateY(-2px); }
.kemmy-view-rail a.is-on { background: #f9b616; box-shadow: 3px 4px 0 #141414, 0 0 0 3px #f9b616; }
.kemmy-view-thumb { display: block; height: 118px; border-bottom: 2px solid #141414; background: #fff; }
.kemmy-view-label { display: block; padding: 9px 12px 10px; }
.kemmy-view-label b { display: block; font-size: 14px; }
.kemmy-view-label small { display: block; overflow: hidden; color: rgba(20, 20, 20, .62); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .kemmy-page-view .kemmy-view { height: auto; min-height: 100svh; padding-top: 92px; }
  .kemmy-view-top { flex-wrap: wrap; }
  .kemmy-view-bar { order: 3; flex-basis: 100%; }
  .kemmy-view-tools { margin-left: auto; }
  .kemmy-view-tools button { display: none; }
  .kemmy-view-body { flex-direction: column; }
  .kemmy-view-frame { flex: none; height: 72svh; }
  .kemmy-view-side { flex: none; }
  .kemmy-view-rail { display: flex; gap: 12px; padding: 4px 4px 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; }
  .kemmy-view-rail li { flex: 0 0 170px; scroll-snap-align: start; }
  .kemmy-view-thumb { height: 100px; }
}

@media (max-width: 767.98px) {
  .kemmy-dom-list label { flex-wrap: wrap; gap: 4px 12px; padding: 14px 16px 14px 54px; }
  .kemmy-dom-name { flex: 1 0 100%; font-size: 17px; word-break: normal; overflow-wrap: anywhere; }
  .kemmy-dom-price { font-size: 14px; }
  .kemmy-dom-list i { top: 16px; }
}

/* ==================================================================
   Round 6 (2026-09-18)
   ================================================================== */

/* --- Services page: a short hero, so the cards start right away --- */
.kemmy-page-services:not(.kemmy-page-pricing) .kemmy-services-hero {
  min-height: 0;
  padding: clamp(118px, 11vw, 150px) clamp(20px, 7vw, 100px) clamp(40px, 4.5vw, 64px);
}
.kemmy-page-services:not(.kemmy-page-pricing) .kemmy-services-hero h1 { font-size: clamp(40px, 6.4vw, 92px); }
.kemmy-service-band--first { padding-top: clamp(48px, 5vw, 72px); }

/* --- Also available: add-on cards with an icon badge and a sticker --- */
.kemmy-addons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 34px 24px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 26px 0 0;
  list-style: none;
}
.kemmy-addon {
  --ad-bg: #fffdf6; --ad-ink: #141414; --ad-muted: rgba(20, 20, 20, .66); --ad-shadow: #141414; --ad-badge: #f9b616;
  position: relative;
  padding: 44px 22px 22px;
  border: 2px solid #141414;
  border-radius: 22px;
  color: var(--ad-ink);
  background: var(--ad-bg);
  box-shadow: 6px 7px 0 var(--ad-shadow);
  font-family: Poppins, sans-serif;
  transform: rotate(var(--ad-tilt, -1deg));
  transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s ease;
}
.kemmy-addon:nth-child(5n+2) { --ad-bg: #141414; --ad-ink: #fff8e7; --ad-muted: rgba(255, 248, 231, .7); --ad-shadow: #f9b616; --ad-tilt: 1.2deg; }
.kemmy-addon:nth-child(5n+3) { --ad-bg: #f9b616; --ad-muted: rgba(20, 20, 20, .74); --ad-badge: #fffdf6; --ad-tilt: -.6deg; }
.kemmy-addon:nth-child(5n+4) { --ad-bg: #ffe6a8; --ad-tilt: 1.6deg; }
.kemmy-addon:nth-child(5n+5) { --ad-bg: #2b2106; --ad-ink: #fff8e7; --ad-muted: rgba(255, 248, 231, .7); --ad-shadow: #141414; --ad-tilt: -1.4deg; }
.kemmy-addon:hover { transform: rotate(calc(var(--ad-tilt, -1deg) * -2)) translateY(-6px); box-shadow: 10px 12px 0 var(--ad-shadow); }
.kemmy-addon-icon {
  position: absolute;
  top: -22px;
  left: 18px;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 2px solid #141414;
  border-radius: 15px;
  background: var(--ad-badge);
  box-shadow: 3px 4px 0 #141414;
  transform: rotate(-9deg);
  transition: transform .4s cubic-bezier(.3, 1.8, .5, 1);
}
.kemmy-addon-icon svg { width: 26px; height: 26px; fill: none; stroke: #141414; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kemmy-addon:hover .kemmy-addon-icon { transform: rotate(12deg) translateY(-6px) scale(1.1); }
.kemmy-addon-sticker {                     /* a paper sticker slapped on the corner */
  position: absolute;
  top: -12px;
  right: 14px;
  padding: 6px 10px 5px;
  border: 1.5px dashed #141414;
  border-radius: 7px;
  color: #141414;
  background: #fff4d6;
  box-shadow: 2px 2px 0 rgba(20, 20, 20, .5);
  font: 700 11px/1 Poppins, sans-serif;
  letter-spacing: .02em;
  transform: rotate(7deg);
}
.kemmy-addon:nth-child(odd) .kemmy-addon-sticker { background: #fffdf6; transform: rotate(-6deg); }
.kemmy-addon h3 { margin: 0 0 10px; color: var(--ad-ink); font: 700 19px/1.2 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-addon p { margin: 0; color: var(--ad-muted); font-size: 14px; line-height: 1.5; }
.kemmy-addon p b { display: block; color: var(--ad-ink); font-size: 22px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .kemmy-addon, .kemmy-addon-icon { transition: none; } }

/* --- "Start a conversation": a button with a shine and three sparks --- */
.kemmy-services-cta a.kemmy-spark-btn,
.kemmy-spark-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 0 30px;
  overflow: visible;
  border: 2px solid #141414;
  border-radius: 999px;
  color: #f9b616;
  background: #141414;
  box-shadow: 5px 6px 0 #fffdf6, 5px 6px 0 2px #141414;
  font: 700 17px/1 Poppins, sans-serif;
  text-decoration: none;
  isolation: isolate;
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s ease;
}
.kemmy-spark-btn span { position: relative; z-index: 1; }
.kemmy-spark-btn::before {                 /* a shine that sweeps across now and then */
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(249, 182, 22, .45) 48%, rgba(255, 244, 214, .7) 52%, transparent 65%) -150% 0 / 250% 100% no-repeat;
  animation: kemmy-shine 3.6s ease-in-out infinite;
  content: "";
}
.kemmy-spark-btn::after {                  /* arrow */
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6l-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6l-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s ease;
  content: "";
}
.kemmy-spark-btn i {
  position: absolute;
  z-index: 2;
  width: 16px;
  height: 16px;
  background: #fffdf6;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 1px #141414);
  animation: kemmy-sparkle 2.4s ease-in-out infinite;
  pointer-events: none;
}
.kemmy-spark-btn i:nth-of-type(1) { top: -12px; left: 14px; }
.kemmy-spark-btn i:nth-of-type(2) { right: -10px; bottom: -10px; width: 20px; height: 20px; background: #f9b616; animation-delay: -.8s; }
.kemmy-spark-btn i:nth-of-type(3) { top: -7px; right: 26px; width: 11px; height: 11px; animation-delay: -1.6s; }
.kemmy-spark-btn:hover { transform: rotate(-4deg) translateY(-3px) scale(1.03); box-shadow: 8px 10px 0 #fffdf6, 8px 10px 0 2px #141414; }
.kemmy-spark-btn:hover::after { transform: translateX(4px); }
.kemmy-spark-btn:hover i { animation-duration: 1.1s; }
.kemmy-services-cta a.kemmy-spark-btn:hover { color: #f9b616; background: #141414; }
@keyframes kemmy-shine { 0%, 55% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
@keyframes kemmy-sparkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0); }
  50%      { opacity: .35; transform: scale(.55) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) { .kemmy-spark-btn::before, .kemmy-spark-btn i { animation: none; } }

/* --- Home hero ------------------------------------------------------ */
.kemmy-off { display: none !important; }
/* less room above the hero content */
@media (min-width: 768px) {
  .kemmy-page-home [data-framer-name="Hero Section"] { padding-top: 150px !important; padding-bottom: 90px !important; }
}
@media (min-width: 1024px) {
  .kemmy-page-home .framer-lhjdc7 { display: none !important; }   /* the drawing of a person */
}
/* service buttons: Maintenance has its icon at the bottom */
.kemmy-hero-labels li:nth-child(3) .kemmy-chip-icon { top: auto; bottom: -17px; }
.kemmy-chip-tip { display: none; }
body.kemmy-tip-open .kemmy-chip:is(:hover, :focus-visible) { transform: rotate(-5deg) translateY(-3px); }

/* the pop-up card (kemmy.js puts it at the end of <body>) */
.kemmy-tip-layer { position: fixed; inset: 0; z-index: 1002; pointer-events: none; }
.kemmy-tip-scrim { position: absolute; inset: 0; background: rgba(20, 18, 12, .2); opacity: 0; transition: opacity .25s ease; }
.kemmy-tip-card {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  max-height: calc(100svh - 120px);
  overflow: auto;
  padding: 30px 24px 22px;
  border: 2px solid #141414;
  border-radius: 22px;
  color: #141414;
  background: #fffdf6;
  box-shadow: 6px 7px 0 #141414;
  font-family: Poppins, sans-serif;
  opacity: 0;
  pointer-events: auto;
  transform: translateY(24px) rotate(1.5deg);
  transition: opacity .22s ease, transform .4s cubic-bezier(.3, 1.4, .5, 1);
}
.kemmy-tip-card.is-anchored { right: auto; bottom: auto; width: min(390px, calc(100vw - 32px)); overflow: visible; max-height: none; transform: translateY(-8px) rotate(-2deg); transform-origin: 20% 0; }
.kemmy-tip-layer:not(.is-hover) .kemmy-tip-scrim { pointer-events: auto; }
.kemmy-tip-layer.is-on .kemmy-tip-scrim { opacity: 1; }
.kemmy-tip-layer.is-on .kemmy-tip-card { opacity: 1; transform: none; }
.kemmy-tip-layer.is-on .kemmy-tip-card.is-anchored { transform: rotate(-1deg); }
.kemmy-tip-card[data-tone="1"] { color: #fff8e7; background: #141414; box-shadow: 6px 7px 0 #f9b616; }
.kemmy-tip-card[data-tone="2"] { background: #fff4d6; }
.kemmy-tip-icon {
  position: absolute;
  top: -20px;
  left: 20px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid #141414;
  border-radius: 13px;
  background: #f9b616;
  box-shadow: 2px 3px 0 #141414;
  transform: rotate(-10deg);
}
.kemmy-tip-icon svg { width: 24px; height: 24px; fill: none; stroke: #141414; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kemmy-tip-card h3 { margin: 4px 0 10px; font: 700 21px/1.1 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-tip-card p { margin: 0 0 18px; font-size: 14px; line-height: 1.62; opacity: .86; }
.kemmy-tip-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 2px solid #141414;
  border-radius: 999px;
  color: #f9b616;
  background: #141414;
  box-shadow: 3px 4px 0 rgba(20, 20, 20, .3);
  font: 700 14px/1 Poppins, sans-serif;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.kemmy-tip-card[data-tone="1"] .kemmy-tip-go { color: #141414; background: #f9b616; border-color: #f9b616; }
.kemmy-tip-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kemmy-tip-go:hover { transform: rotate(-4deg) translateY(-2px); }
.kemmy-tip-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  color: inherit;
  background: transparent;
  font: 400 26px/1 Poppins, sans-serif;
  cursor: pointer;
}
.kemmy-tip-card.is-anchored .kemmy-tip-close { display: none; }

/* domain search: a line above the field */
.kemmy-domain-prompt { margin: 0 0 12px; color: #3d3a34; font: 500 15px/1.45 Poppins, sans-serif; }
.kemmy-domain-prompt b { color: #141414; font-weight: 700; }

/* phones: a smaller intro line, so the search shows on the first screen */
@media (max-width: 767.98px) {
  .kemmy-page-home [data-framer-name="Hero Section"] p.framer-text {
    font-size: 16px !important;
    line-height: 1.5 !important;
    --framer-font-size: 16px !important;
    --framer-line-height: 1.5em !important;
  }
  .kemmy-page-home [data-framer-name="Hero Section"] { padding-top: 112px !important; padding-bottom: 40px !important; }
  .kemmy-domain-prompt { font-size: 14px; text-align: center; }
  .kemmy-page-home [data-framer-name="Hero Section"] .kemmy-domain { margin: 0 auto 6px; }
  .kemmy-page-home [data-framer-name="Hero Section"] + .kemmy-projects-shell { padding-top: 44px; }
  .kemmy-hero-labels { padding-top: 12px; margin-bottom: 18px; }
}

/* --- More work: smaller cards (same shape), coloured by the site in front --- */
.kemmy-deck { --snap-w: min(46vw, 540px); }
.kemmy-snap-view { height: clamp(230px, 23vw, 345px); }
.kemmy-snap { --brand: #f9b616; --brand-ink: #141414; }
.kemmy-snap.is-center a { box-shadow: 10px 12px 0 var(--brand), 0 30px 60px rgba(0, 0, 0, .22); }
.kemmy-snap.is-center .kemmy-snap-bar i:first-child { background: var(--brand-ink); }
.kemmy-snap-open { color: var(--brand-ink); background: var(--brand); transition: opacity .25s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1), background-color .4s ease; }
.kemmy-more { --deck-brand: #f9b616; --deck-brand-ink: #141414; }
.kemmy-deck-slider::-webkit-slider-thumb { background: var(--deck-brand); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background-color .4s ease; }
.kemmy-deck-slider::-moz-range-thumb { background: var(--deck-brand); }
.kemmy-deck-slider::-webkit-slider-runnable-track { background: linear-gradient(90deg, color-mix(in srgb, var(--deck-brand) 22%, #fffdf6), #fffdf6); }
.kemmy-deck-name { color: var(--deck-brand); transition: color .4s ease; }
.kemmy-more .kemmy-projects-foot a { border-width: 2px; box-shadow: 3px 4px 0 var(--deck-brand); transition: color .2s ease, background-color .2s ease, box-shadow .4s ease, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.kemmy-more .kemmy-projects-foot a:hover { color: var(--deck-brand-ink); background: var(--deck-brand); transform: rotate(-3deg) translateY(-2px); }
@media (max-width: 767.98px) {
  .kemmy-deck { --snap-w: 70vw; }
  .kemmy-snap-view { height: 101vw; max-height: 440px; }
  .kemmy-snap.is-center a { box-shadow: 7px 8px 0 var(--brand), 0 20px 40px rgba(0, 0, 0, .2); }
}

/* less air between the projects and the services on the home page */
.kemmy-page-home .kemmy-projects-shell:not(.kemmy-more-shell) { padding-bottom: clamp(40px, 5vw, 64px); }
.kemmy-page-home .kemmy-services { padding-top: clamp(40px, 5vw, 64px); }

/* main project cards in their clients' colours (kemmy.js sets --brand-*) */
.kemmy-projects-stack .kemmy-project-card[data-brand] {
  --card-bg: var(--brand-bg);
  --card-ink: var(--brand-fg);
  --card-muted: color-mix(in srgb, var(--brand-fg) 72%, transparent);
  --card-line: color-mix(in srgb, var(--brand-fg) 20%, transparent);
  --card-accent: var(--brand-accent);
  --card-accent-ink: var(--brand-bg);
}
.kemmy-deck { scroll-snap-type: none; }   /* kemmy.js snaps the deck itself */

/* --- Apps: three phones under the project pile ---------------------- */
.kemmy-apps { max-width: 1240px; margin: clamp(56px, 8vw, 110px) auto 0; }
.kemmy-apps-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 40px; }
.kemmy-apps-head h2 { margin: 14px 0 0; color: #111; font: 700 clamp(30px, 4vw, 54px)/1.1 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-apps-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.kemmy-app-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid #141414;
  border-radius: 24px;
  color: var(--brand-fg);
  background: var(--brand-bg);
  box-shadow: 6px 7px 0 #141414;
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s ease;
}
.kemmy-app-card:hover { transform: translate(-3px, -5px) rotate(-1deg); box-shadow: 10px 12px 0 #141414; }
.kemmy-app-card::before {                  /* a soft light behind the phone */
  position: absolute;
  top: -20%;
  left: 50%;
  width: 90%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand-accent) 40%, transparent), transparent);
  transform: translateX(-50%);
  content: "";
}
.kemmy-app-phone {
  position: relative;
  align-self: center;
  width: 54%;
  aspect-ratio: 9 / 19;
  margin: 34px 0 -60px;
  padding: 7px;
  border: 2px solid #3a3a3c;
  border-radius: 34px;
  background: #111;
  box-shadow: 0 24px 40px rgba(0, 0, 0, .35);
  box-sizing: border-box;
  transform: rotate(-4deg);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.kemmy-app-card:nth-child(2) .kemmy-app-phone { transform: rotate(3deg); }
.kemmy-app-card:hover .kemmy-app-phone { transform: rotate(0) translateY(-18px); }
.kemmy-app-phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 27px; background: #fff; container-type: inline-size; }
.kemmy-app-phone .kemmy-pan > img {
  position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; min-height: 100%;
  animation: kemmy-pan 16s cubic-bezier(.22, .7, .2, 1) infinite paused;
}
.kemmy-app-card:hover .kemmy-pan > img { animation-play-state: running; }
@media (hover: none), (pointer: coarse) { .kemmy-app-card .kemmy-pan > img { animation-play-state: running; } }
.kemmy-app-phone-island { position: absolute; top: 15px; left: 50%; z-index: 2; width: 30%; height: 16px; border-radius: 10px; background: #000; transform: translateX(-50%); }
.kemmy-app-copy {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 26px 24px 24px;
  border-top: 2px solid #141414;
  background: var(--brand-bg);
}
.kemmy-app-kind { margin: 0 0 8px; color: var(--brand-accent); font: 700 12px/1 Poppins, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.kemmy-app-copy h3 { margin: 0 0 10px; color: var(--brand-fg); font: 700 22px/1.15 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-app-copy > p:not([class]) { margin: 0; color: color-mix(in srgb, var(--brand-fg) 76%, transparent); font-size: 14px; line-height: 1.6; }
.kemmy-app-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.kemmy-app-chips span { padding: 7px 12px; border: 1.5px solid color-mix(in srgb, var(--brand-fg) 35%, transparent); border-radius: 999px; font: 600 12px/1 Poppins, sans-serif; }
.kemmy-app-chips span:first-child { border-color: var(--brand-accent); color: var(--brand-bg); background: var(--brand-accent); }

/* TPC Data Collector, drawn in HTML */
.kemmy-tpc {
  --tp: #9966ff; --tp-deep: #2a0a8f; --tp-y: #ffcc00;
  display: flex;
  flex-direction: column;
  gap: 4cqw;
  height: 100%;
  padding: 0 5cqw;
  color: var(--tp-deep);
  background: #f7f4ff;
  font-family: -apple-system, BlinkMacSystemFont, Poppins, sans-serif;
}
.kemmy-tpc-status { display: flex; justify-content: space-between; align-items: center; height: 11cqw; padding: 0 3cqw; font-size: 4.2cqw; font-weight: 600; }
.kemmy-tpc-status i { width: 7cqw; height: 3.2cqw; border: .5cqw solid currentColor; border-radius: 1cqw; }
.kemmy-tpc-head { position: relative; margin: 0 -5cqw; padding: 3cqw 5cqw 5cqw; color: #fff; background: linear-gradient(160deg, var(--tp), var(--tp-deep)); }
.kemmy-tpc-head small { display: block; font-size: 3.6cqw; opacity: .8; }
.kemmy-tpc-head b { display: block; font-size: 7cqw; }
.kemmy-tpc-bell { position: absolute; top: 4cqw; right: 5cqw; display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.kemmy-tpc svg { width: 5cqw; height: 5cqw; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kemmy-tpc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; margin-top: -2cqw; }
.kemmy-tpc-stat { padding: 3cqw 3.5cqw; border-radius: 3cqw; background: #fff; box-shadow: 0 1cqw 3cqw rgba(42, 10, 143, .12); }
.kemmy-tpc-stat b { display: block; font-size: 7cqw; line-height: 1.1; }
.kemmy-tpc-stat span { font-size: 3.3cqw; opacity: .7; }
.kemmy-tpc-stat.is-y { background: var(--tp-y); }
.kemmy-tpc-stat.is-p { color: #fff; background: var(--tp); }
.kemmy-tpc-card { padding: 3.5cqw; border-radius: 3cqw; background: #fff; box-shadow: 0 1cqw 3cqw rgba(42, 10, 143, .1); }
.kemmy-tpc-card h4 { margin: 0 0 2.5cqw; font-size: 4cqw; }
.kemmy-tpc-bar { display: grid; grid-template-columns: 22cqw 1fr; align-items: center; gap: 2cqw; margin-top: 1.8cqw; font-size: 3.2cqw; }
.kemmy-tpc-bar i { height: 2.2cqw; border-radius: 2cqw; background: linear-gradient(90deg, #cbb8ff var(--w), #eee8ff 0); }
.kemmy-tpc-bar i.p { background: linear-gradient(90deg, var(--tp) var(--w), #eee8ff 0); }
.kemmy-tpc-bar i.y { background: linear-gradient(90deg, var(--tp-y) var(--w), #eee8ff 0); }
.kemmy-tpc-go { display: flex; align-items: center; gap: 2cqw; margin-top: 2cqw; padding: 2.8cqw 3cqw; border-radius: 2.4cqw; background: #eee8ff; font-size: 3.6cqw; font-weight: 600; }
.kemmy-tpc-go.is-main { color: var(--tp-deep); background: var(--tp-y); }
.kemmy-tpc-tabs { display: flex; justify-content: space-around; margin: auto -5cqw 0; padding: 3cqw 0 6cqw; border-top: 1px solid #e6defc; background: #fff; }
.kemmy-tpc-tabs span { color: #9a8cc9; }
.kemmy-tpc-tabs span.is-on { color: var(--tp); }
.kemmy-tpc-tabs svg { width: 6.4cqw; height: 6.4cqw; }

@media (max-width: 1000px) {
  .kemmy-apps-list { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .kemmy-apps-head { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .kemmy-app-card, .kemmy-app-phone { transition: none; } }

/* --- Borders that draw themselves (kemmy.js setupDrawnBorders) --------- */
.kemmy-draw-wait:not(.kemmy-drawn),
.kemmy-snap.kemmy-draw-wait:not(.kemmy-drawn) > a { border-color: transparent !important; box-shadow: none !important; }
:is(.kemmy-project-macbook-screen, .kemmy-project-iphone, .kemmy-project-ipad, .kemmy-project-android, .kemmy-project-pc-screen, .kemmy-app-phone).kemmy-draw-wait:not(.kemmy-drawn) {
  background-color: transparent !important;
  filter: none !important;
}
:is(.kemmy-project-macbook-screen, .kemmy-project-iphone, .kemmy-project-ipad, .kemmy-project-android, .kemmy-project-pc-screen, .kemmy-app-phone).kemmy-draw-wait:not(.kemmy-drawn) > :not(.kemmy-draw-line) { opacity: 0; }
:is(.kemmy-project-iphone, .kemmy-project-android).kemmy-draw-wait:not(.kemmy-drawn)::before { opacity: 0; }
.kemmy-drawn:not(.kemmy-snap), .kemmy-snap.kemmy-drawn > a { animation: kemmy-shadow-in .5s ease both; }
:is(.kemmy-project-macbook-screen, .kemmy-project-iphone, .kemmy-project-ipad, .kemmy-project-android, .kemmy-project-pc-screen, .kemmy-app-phone).kemmy-drawn { animation: kemmy-drawn-in .55s ease both; }
:is(.kemmy-project-macbook-screen, .kemmy-project-iphone, .kemmy-project-ipad, .kemmy-project-android, .kemmy-project-pc-screen, .kemmy-app-phone).kemmy-drawn > :not(.kemmy-draw-line) { animation: kemmy-fade-in .6s ease both; }
@keyframes kemmy-shadow-in { from { box-shadow: none; } }
@keyframes kemmy-drawn-in { from { background-color: transparent; box-shadow: none; } }
@keyframes kemmy-fade-in { from { opacity: 0; } }
.kemmy-draw-line {
  position: absolute;
  z-index: 6;
  overflow: visible;
  fill: none;
  pointer-events: none;
  transition: opacity .5s ease;
}
.kemmy-draw-line rect {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-dashoffset 1s cubic-bezier(.55, .1, .3, 1);
}
.kemmy-draw-line.is-drawing rect { stroke-dashoffset: 0; }
.kemmy-draw-line.is-done { opacity: 0; }

/* the app cards no longer clip (the drawn line sits on their border) */
.kemmy-app-card { overflow: visible; }
.kemmy-app-card::before { top: 0; height: 70%; width: 100%; aspect-ratio: auto; border-radius: 22px 22px 0 0; background: radial-gradient(60% 60% at 50% 32%, color-mix(in srgb, var(--brand-accent) 38%, transparent), transparent); }
.kemmy-app-copy { border-radius: 0 0 22px 22px; }

/* Services page cards: an older rule for the plain list (.kemmy-service-list li)
   was winning over the card padding and giving every step row 250px */
.kemmy-services-page .kemmy-service-list > li { min-height: 0; padding: 24px 26px 22px; border-top: 2px solid #141414; }
.kemmy-services-page .kemmy-service-list .kemmy-service-steps li { min-height: 0; }
.kemmy-services-page .kemmy-service-list p { max-width: none; }
@media (max-width: 767.98px) { .kemmy-services-page .kemmy-service-list > li { padding: 24px 22px 20px; } }

/* --- Blogs: the journal index and a post ----------------------------- */
.kemmy-blog-hero::after,
.kemmy-post-page .kemmy-services-hero::after { content: "THE KEMMY JOURNAL"; }
.kemmy-page-blogs .kemmy-services-hero { min-height: 0; padding-top: clamp(118px, 11vw, 150px); padding-bottom: clamp(44px, 5vw, 70px); }
.kemmy-page-blogs .kemmy-services-hero h1 { font-size: clamp(40px, 6.4vw, 92px); }
.kemmy-blog-band { padding: clamp(48px, 6vw, 88px) clamp(20px, 7vw, 100px) clamp(64px, 8vw, 110px); }
.kemmy-blog-inner { max-width: 1240px; margin: 0 auto; }
.kemmy-post-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  overflow: visible;
  border: 2px solid #141414;
  border-radius: 26px;
  background: #141414;
  box-shadow: 8px 9px 0 #f9b616;
}
.kemmy-post-feature-art { position: relative; display: block; min-height: 420px; border-radius: 24px 0 0 24px; overflow: hidden; background: #fff; }
.kemmy-post-feature-art .kemmy-pan { position: absolute; inset: 0; }
.kemmy-post-feature-art .kemmy-pan > img,
.kemmy-post-cover .kemmy-pan > img { position: absolute; top: 0; left: 0; width: 100%; height: auto; min-height: 100%; animation: kemmy-pan 24s cubic-bezier(.22, .7, .2, 1) infinite paused; }
.kemmy-post-feature:hover .kemmy-pan > img, .kemmy-post-cover .kemmy-pan > img { animation-play-state: running; }
.kemmy-post-sticker {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 10px 16px;
  border: 2px solid #141414;
  border-radius: 999px;
  color: #141414;
  background: #f9b616;
  box-shadow: 3px 4px 0 #141414;
  font: 700 14px/1 Poppins, sans-serif;
  text-transform: uppercase;
  transform: rotate(-8deg);
}
.kemmy-post-feature-body { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(28px, 3.4vw, 48px); color: #fff8e7; font-family: Poppins, sans-serif; }
.kemmy-post-feature-body .kemmy-label { color: #141414; background: #f9b616; box-shadow: 3px 4px 0 #fff8e7; }
.kemmy-post-feature-body h2 { margin: 22px 0 16px; font: 700 clamp(26px, 2.8vw, 40px)/1.1 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-post-feature-body h2 a { color: inherit; text-decoration: none; }
.kemmy-post-feature-body > p:not([class]) { margin: 0 0 20px; color: rgba(255, 248, 231, .74); font-size: 16px; line-height: 1.65; }
.kemmy-post-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 22px; color: inherit; font: 500 13px/1.3 Poppins, sans-serif; opacity: .72; }
.kemmy-post-meta span + span::before { margin-right: 16px; content: "·"; }
.kemmy-post-read {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding: 13px 20px;
  border: 2px solid #f9b616; border-radius: 999px; color: #141414; background: #f9b616;
  font: 700 14px/1 Poppins, sans-serif; text-decoration: none; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.kemmy-post-read svg, .kemmy-post-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kemmy-post-read:hover { transform: rotate(-4deg) translateY(-2px); }
.kemmy-blog-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin: clamp(56px, 7vw, 90px) 0 30px; }
.kemmy-blog-bar h2 { margin: 0; font: 700 clamp(28px, 3.6vw, 48px)/1.1 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-blog-filter { display: flex; flex-wrap: wrap; gap: 10px; }
.kemmy-blog-filter button {
  padding: 10px 16px; border: 2px solid #141414; border-radius: 999px; color: #141414; background: #fffdf6;
  box-shadow: 2px 3px 0 #141414; font: 600 13px/1 Poppins, sans-serif; cursor: pointer; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.kemmy-blog-filter button:hover { transform: rotate(-4deg) translateY(-2px); }
.kemmy-blog-filter button[aria-pressed="true"] { color: #f9b616; background: #141414; }
.kemmy-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 26px; margin: 0; padding: 0; list-style: none; }
.kemmy-post-grid .kemmy-post-card {
  display: flex; flex-direction: column; border: 2px solid #141414; border-radius: 22px; background: #fffdf6;
  box-shadow: 6px 7px 0 #141414; font-family: Poppins, sans-serif; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s ease;
}
.kemmy-post-grid .kemmy-post-card[hidden] { display: none; }
.kemmy-post-grid .kemmy-post-card:hover { transform: translate(-3px, -5px) rotate(-1deg); box-shadow: 10px 12px 0 #141414; }
.kemmy-post-art {
  --art: #f9b616; --art-dot: rgba(20, 20, 20, .22);
  position: relative; height: 170px; border-bottom: 2px solid #141414; border-radius: 20px 20px 0 0;
  background: radial-gradient(var(--art-dot) 1.4px, transparent 1.6px) 0 0 / 14px 14px, var(--art);
}
.kemmy-post-art[data-art="1"] { --art: #141414; --art-dot: rgba(249, 182, 22, .35); }
.kemmy-post-art[data-art="2"] { --art: #ffe6a8; }
.kemmy-post-art[data-art="3"] { --art: #2b2106; --art-dot: rgba(255, 248, 231, .2); }
.kemmy-post-art[data-art="4"] { --art: #6e1236; --art-dot: rgba(255, 238, 244, .25); }
.kemmy-post-art[data-art="5"] { --art: #0f3b57; --art-dot: rgba(247, 183, 51, .35); }
.kemmy-post-badge {
  position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 78px; height: 78px;
  border: 2px solid #141414; border-radius: 22px; background: #fffdf6; box-shadow: 4px 5px 0 #141414;
  transform: translate(-50%, -50%) rotate(-8deg); transition: transform .4s cubic-bezier(.3, 1.8, .5, 1);
}
.kemmy-post-badge svg { width: 38px; height: 38px; fill: none; stroke: #141414; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kemmy-post-card:hover .kemmy-post-badge { transform: translate(-50%, -58%) rotate(8deg) scale(1.08); }
.kemmy-post-soon {
  position: absolute; right: 14px; bottom: -14px; padding: 6px 11px; border: 1.5px dashed #141414; border-radius: 7px;
  color: #141414; background: #fff4d6; font: 700 11px/1 Poppins, sans-serif; text-transform: uppercase; transform: rotate(5deg);
}
.kemmy-post-body { padding: 24px 22px 24px; }
.kemmy-post-body .kemmy-post-meta { margin-bottom: 12px; color: #6b665c; opacity: 1; }
.kemmy-post-body h3 { margin: 0 0 10px; color: #141414; font: 700 19px/1.25 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-post-body > p:not([class]) { margin: 0; color: #5b5750; font-size: 14px; line-height: 1.6; }
.kemmy-blog-sub {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end;
  padding: clamp(56px, 7vw, 96px) clamp(20px, 7vw, 100px); color: #141414; background: #f9b616;
}
.kemmy-blog-sub h2 { margin: 18px 0 0; font: 700 clamp(26px, 3.4vw, 46px)/1.1 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-blog-sub .kemmy-label { color: #f9b616; background: #141414; box-shadow: 3px 4px 0 #fffdf6; }
.kemmy-blog-form { display: flex; border: 2px solid #141414; border-radius: 999px; background: #fffdf6; box-shadow: 5px 6px 0 #141414; overflow: hidden; }
.kemmy-blog-form input[type="email"] { flex: 1; min-width: 0; height: 58px; padding: 0 22px; border: 0; outline: none; background: transparent; font: 500 16px Poppins, sans-serif; }
.kemmy-blog-form button { flex: none; padding: 0 24px; border: 0; color: #f9b616; background: #141414; font: 700 15px Poppins, sans-serif; cursor: pointer; }
.kemmy-blog-page .kemmy-label,
.kemmy-post-page .kemmy-label {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 16px 8px 12px; border: 2px solid #141414;
  border-radius: 999px; color: #141414; background: #f9b616; box-shadow: 3px 4px 0 #141414;
  font: 700 13px/1 Poppins, sans-serif; letter-spacing: .05em; text-transform: uppercase; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.kemmy-blog-page .kemmy-label::before,
.kemmy-post-page .kemmy-label::before { width: 11px; height: 11px; background: currentColor; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); content: ""; }
.kemmy-blog-page .kemmy-label:hover, .kemmy-post-page .kemmy-label:hover { transform: rotate(-5deg) translateY(-2px); }
.kemmy-blog-page .kemmy-post-feature-body .kemmy-label { box-shadow: 3px 4px 0 #fff8e7; }
.kemmy-blog-page .kemmy-blog-sub .kemmy-label { color: #f9b616; background: #141414; box-shadow: 3px 4px 0 #fffdf6; }

/* a post */
.kemmy-post-page { font-family: Poppins, sans-serif; }
.kemmy-post-hero { max-width: 860px; margin: 0 auto; padding: clamp(124px, 12vw, 160px) 20px 34px; }
.kemmy-post-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 26px; color: #141414; font-weight: 600; font-size: 14px; text-decoration: none; }
.kemmy-post-hero .kemmy-label { display: flex; width: max-content; }
.kemmy-post-hero h1 { margin: 22px 0 18px; font: 700 clamp(34px, 5vw, 62px)/1.05 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-post-lede { margin: 0 0 26px; color: #4a463f; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.6; }
.kemmy-post-byline { display: flex; align-items: center; gap: 12px; }
.kemmy-post-byline b, .kemmy-post-byline small { display: block; }
.kemmy-post-byline small { color: #6b665c; font-size: 13px; }
.kemmy-post-avatar { display: grid; place-items: center; width: 46px; height: 46px; border: 2px solid #141414; border-radius: 50%; color: #f9b616; background: #141414; font: 700 18px Boldonse, sans-serif; }
.kemmy-post-cover { max-width: 1100px; margin: 10px auto 0; padding: 0 20px; }
.kemmy-post-cover .kemmy-pan { position: relative; display: block; height: clamp(260px, 42vw, 520px); overflow: hidden; border: 2px solid #141414; border-radius: 24px; background: #fff; box-shadow: 8px 9px 0 #141414; }
.kemmy-post-cover figcaption { margin-top: 18px; color: #6b665c; font-size: 13px; text-align: center; }
.kemmy-post-body { max-width: 720px; margin: 0 auto; padding: 40px 20px 20px; color: #2b2925; font-size: 17px; line-height: 1.8; }
.kemmy-post-page .kemmy-post-body > p { margin: 0 0 22px; }
.kemmy-post-page .kemmy-post-body h2 { margin: 46px 0 16px; color: #141414; font: 700 clamp(24px, 2.6vw, 32px)/1.15 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-post-table { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 26px 0 30px; }
.kemmy-post-table div { padding: 18px; border: 2px solid #141414; border-radius: 18px; background: #fffdf6; box-shadow: 4px 5px 0 #141414; font-size: 14px; line-height: 1.5; }
.kemmy-post-table .is-hot { background: #f9b616; transform: rotate(-1.2deg); }
.kemmy-post-table b, .kemmy-post-table strong { display: block; }
.kemmy-post-table b { font-size: 13px; text-transform: uppercase; }
.kemmy-post-table strong { margin: 6px 0 8px; font-size: 20px; }
.kemmy-post-checks { display: grid; gap: 12px; margin: 0 0 26px; padding: 0; list-style: none; }
.kemmy-post-checks li { display: flex; gap: 12px; align-items: flex-start; }
.kemmy-post-checks svg { flex: none; width: 24px; height: 24px; padding: 3px; border: 2px solid #141414; border-radius: 8px; background: #f9b616; fill: none; stroke: #141414; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; }
.kemmy-post-quote { position: relative; margin: 44px 0; padding: 30px 30px 30px 34px; border: 2px solid #141414; border-radius: 22px; color: #fff8e7; background: #141414; box-shadow: 6px 7px 0 #f9b616; font: 700 clamp(20px, 2.2vw, 26px)/1.4 Boldonse, sans-serif; transform: rotate(-1deg); }
.kemmy-post-quote::before { position: absolute; top: -26px; left: 22px; color: #f9b616; font: 700 80px/1 Boldonse, sans-serif; content: "\201C"; }
.kemmy-post-note { display: flex; gap: 16px; margin: 34px 0; padding: 22px; border: 2px dashed #141414; border-radius: 20px; background: #fff4d6; }
.kemmy-post-note-icon svg { width: 30px; height: 30px; fill: none; stroke: #141414; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kemmy-post-note b { display: block; margin-bottom: 4px; }
.kemmy-post-note p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; }
.kemmy-post-note a { color: #141414; font-weight: 700; }
.kemmy-post-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; max-width: 720px; margin: 20px auto clamp(64px, 8vw, 110px); padding: 28px 20px 0; border-top: 2px solid #141414; }
.kemmy-post-foot p { margin: 0; font: 700 20px/1.3 Boldonse, sans-serif; text-transform: uppercase; }

@media (max-width: 1000px) {
  .kemmy-post-feature { grid-template-columns: 1fr; }
  .kemmy-post-feature-art { min-height: 300px; border-radius: 24px 24px 0 0; }
  .kemmy-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kemmy-blog-sub { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .kemmy-post-grid, .kemmy-post-table { grid-template-columns: 1fr; }
  .kemmy-post-table .is-hot { transform: none; }
  .kemmy-blog-form { flex-direction: column; border-radius: 22px; }
  .kemmy-blog-form button { min-height: 52px; }
}

/* --- Projects page: groups of piles ---------------------------------- */
.kemmy-work-shell .kemmy-projects-head h1 { max-width: 800px; margin: 20px 0 0; font: 700 clamp(36px, 5vw, 68px)/1.02 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-cat-nav { display: flex; flex-wrap: wrap; gap: 10px; max-width: 1240px; margin: -20px auto 20px; }
.kemmy-cat-nav a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 10px 16px; border: 2px solid #141414; border-radius: 999px;
  color: #141414; background: #fffdf6; box-shadow: 2px 3px 0 #141414; font: 600 14px/1 Poppins, sans-serif; text-decoration: none;
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.kemmy-cat-nav a:hover { transform: rotate(-4deg) translateY(-2px); }
.kemmy-cat-nav b { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 999px; color: #f9b616; background: #141414; font-size: 12px; }
.kemmy-cat { max-width: 1240px; margin: 0 auto; padding-top: clamp(48px, 6vw, 90px); scroll-margin-top: 90px; }
.kemmy-cat-head {
  display: flex; align-items: center; gap: 20px; margin-bottom: 30px; padding: 22px 26px;
  border: 2px solid #141414; border-radius: 22px; background: #fffdf6; box-shadow: 5px 6px 0 #141414; font-family: Poppins, sans-serif;
}
.kemmy-cat:nth-of-type(even) .kemmy-cat-head { color: #fff8e7; background: #141414; box-shadow: 5px 6px 0 #f9b616; }
.kemmy-cat-num { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border: 2px solid #141414; border-radius: 16px; color: #141414; background: #f9b616; font: 700 20px Boldonse, sans-serif; transform: rotate(-6deg); }
.kemmy-cat-head div { flex: 1; min-width: 0; }
.kemmy-cat-head h2 { margin: 0 0 4px; font: 700 clamp(22px, 2.6vw, 34px)/1.1 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-cat-head p { margin: 0; font-size: 14px; line-height: 1.5; opacity: .72; }
.kemmy-cat-count { flex: none; padding: 7px 12px; border: 1.5px dashed currentColor; border-radius: 8px; font: 700 12px/1 Poppins, sans-serif; text-transform: uppercase; transform: rotate(4deg); }
.kemmy-cat .kemmy-projects-stack + .kemmy-projects-stack { margin-top: 40px; }
@media (max-width: 767.98px) {
  .kemmy-cat-head { flex-wrap: wrap; gap: 14px; padding: 18px; }
  .kemmy-cat-count { order: -1; margin-left: auto; }
  .kemmy-cat-nav { margin-top: -24px; }
}
.kemmy-project-tab em { display: none; }
@media (max-width: 767.98px) {
  .kemmy-projects-stack .kemmy-project-tab::after { content: none; }
  .kemmy-projects-stack .kemmy-project-tab em { display: inline; margin-left: 4px; color: var(--card-muted); font-style: normal; font-weight: 400; }
}
.kemmy-project-action.is-soon { cursor: default; opacity: .8; }

/* a single phone (TPC Data Collector) */
.kemmy-project-solo { display: flex; justify-content: center; align-items: center; height: 100%; }
.kemmy-project-solo .kemmy-app-phone { width: min(44%, 230px); margin: 0; transform: rotate(-5deg); }
.kemmy-project-card:hover .kemmy-project-solo .kemmy-app-phone { transform: rotate(2deg) translateY(-12px); }

/* --- Testimonials: ready for the words ------------------------------- */
.kemmy-testimonials-shell { position: relative; }
.kemmy-testimonials-inner { grid-template-columns: 1fr; gap: 44px; }
.kemmy-testimonials-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 40px; align-items: end; }
.kemmy-testimonials-intro .kemmy-label { grid-column: 1 / -1; justify-self: start; color: #141414; background: #f9b616; box-shadow: 3px 4px 0 #fff8e7; }
.kemmy-testimonials-intro > p:last-child { margin: 0; color: rgba(255, 248, 231, .7); font-size: 16px; line-height: 1.6; text-transform: none; font-weight: 400; }
.kemmy-quote-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 0; padding: 0; list-style: none; }
.kemmy-quote.kemmy-testimonial-card {
  --q-bg: #fffdf6; --q-ink: #141414; --q-shadow: #f9b616;
  position: relative; display: flex; flex-direction: column; min-height: 0; padding: 40px 26px 24px;
  border: 2px solid #141414; border-radius: 24px; color: var(--q-ink); background: var(--q-bg); box-shadow: 7px 8px 0 var(--q-shadow);
  font-family: Poppins, sans-serif; transform: rotate(-1.2deg); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1);
}
.kemmy-quote[data-tone="ink"] { --q-bg: #1f1f1f; --q-ink: #fff8e7; --q-shadow: #fff8e7; border-color: #fff8e7; transform: rotate(1deg) translateY(18px); }
.kemmy-quote[data-tone="gold"] { --q-bg: #f9b616; --q-shadow: #fff8e7; transform: rotate(-.6deg); }
.kemmy-quote:hover { transform: rotate(0) translateY(-6px); }
.kemmy-quote-mark {
  position: absolute; top: -26px; left: 22px; display: grid; place-items: center; width: 54px; height: 54px;
  border: 2px solid #141414; border-radius: 16px; color: #141414; background: #f9b616; box-shadow: 3px 4px 0 #141414;
  font: 700 46px/1 Boldonse, sans-serif; transform: rotate(-8deg);
}
.kemmy-quote[data-tone="gold"] .kemmy-quote-mark { background: #fffdf6; }
.kemmy-quote-flag { position: absolute; top: -12px; right: 18px; padding: 6px 10px; border: 1.5px dashed #141414; border-radius: 7px; color: #141414; background: #fff4d6; font: 700 11px/1 Poppins, sans-serif; text-transform: uppercase; transform: rotate(5deg); }
.kemmy-quote-stars { display: flex; gap: 3px; margin: 0 0 16px; }
.kemmy-quote-stars svg { width: 18px; height: 18px; fill: #f9b616; stroke: #141414; stroke-width: 1.4; stroke-linejoin: round; }
.kemmy-quote[data-tone="gold"] .kemmy-quote-stars svg { fill: #141414; }
.kemmy-quote blockquote { flex: 1; margin: 0 0 24px; font: 600 17px/1.55 Poppins, sans-serif; }
.kemmy-quote-person { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1.5px dashed color-mix(in srgb, var(--q-ink) 30%, transparent); }
.kemmy-quote-avatar { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border: 2px solid currentColor; border-radius: 50%; font: 700 15px Boldonse, sans-serif; }
.kemmy-quote-person div { flex: 1; min-width: 0; }
.kemmy-quote-person b, .kemmy-quote-person small { display: block; }
.kemmy-quote-person small { font-size: 12px; opacity: .7; }
.kemmy-quote-project { flex: none; padding: 6px 10px; border: 1.5px solid currentColor; border-radius: 999px; font: 600 11px/1 Poppins, sans-serif; }
@media (max-width: 1000px) {
  .kemmy-quote-list { grid-template-columns: 1fr; max-width: 520px; gap: 44px; }
  .kemmy-quote[data-tone="ink"] { transform: rotate(1deg); }
  .kemmy-testimonials-intro { grid-template-columns: 1fr; }
}
.kemmy-work-shell .kemmy-projects-head .kemmy-more-hint { color: #5b5750; font-weight: 400; font-size: 15px; }

/* --- About: three messages in one section, piled like the projects --- */
.kemmy-msgs { padding: clamp(120px, 11vw, 150px) 7vw clamp(64px, 8vw, 110px); color: #fff8e7; background: #0b0b0b; }
.kemmy-msgs-head { max-width: 1240px; margin: 0 auto 40px; }
.kemmy-msgs-head .kemmy-about-kicker { color: #f9b616; }
.kemmy-msgs-head h1 { margin: 0; font: 750 clamp(38px, 5vw, 66px)/1.04 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-msgs-stack { max-width: 1240px; margin: 0 auto; }
.kemmy-msgs-stack::after { display: block; height: 12vh; content: ""; }
.kemmy-msg-card {
  position: sticky;
  top: 110px;
  display: grid;
  grid-template-columns: minmax(240px, 4fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
  padding: clamp(24px, 3vw, 40px);
  border: 2px solid #f9b616;
  border-radius: 26px;
  background: #151515;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
  transform: scale(calc(1 - min(var(--stack-depth, 0), 2) * .05));
  transform-origin: 50% 0;
  filter: brightness(calc(1 - min(var(--stack-depth, 0), 2) * .25));
}
.kemmy-msg-card + .kemmy-msg-card { margin-top: 30vh; }
.kemmy-msg-card:nth-child(2) { background: #1d1a12; }
.kemmy-msg-card:nth-child(3) { color: #141414; background: #f9b616; border-color: #141414; }
.kemmy-msg-card .kemmy-about-portrait { max-width: none; border-radius: 18px; }
.kemmy-msg-card:nth-child(3) .kemmy-about-portrait { border-color: #141414; background: #141414; }
.kemmy-msg-card .kemmy-about-kicker { color: #f9b616; }
.kemmy-msg-card:nth-child(3) .kemmy-about-kicker,
.kemmy-msg-card:nth-child(3) .kemmy-about-draft { color: #141414; }
.kemmy-msg-card h2 { margin: 0 0 22px; font: 750 clamp(26px, 3vw, 40px)/1.08 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-msg-card blockquote { margin: 0 0 26px; color: inherit; font-size: clamp(15px, 1.15vw, 17px); font-weight: 400; line-height: 1.7; opacity: .88; }
.kemmy-msg-card blockquote::before,
.kemmy-msg-card blockquote::after { content: none; }
.kemmy-msg-card blockquote p { margin: 0 0 14px; }
.kemmy-msg-card blockquote p:first-child::first-letter { float: left; margin: 6px 10px 0 0; color: #f9b616; font: 750 54px/.8 Boldonse, sans-serif; }
.kemmy-msg-card:nth-child(3) blockquote p:first-child::first-letter { color: #141414; }
.kemmy-msg-card:nth-child(3) .kemmy-about-signature { border-top-color: rgba(20, 20, 20, .3); }
.kemmy-msg-card:nth-child(3) .kemmy-about-signature div > span { color: rgba(20, 20, 20, .66); }
@media (max-width: 820px) {
  .kemmy-msg-card { grid-template-columns: 1fr; gap: 22px; }
  .kemmy-msg-card .kemmy-about-portrait { aspect-ratio: 16 / 10; }
  .kemmy-msg-card + .kemmy-msg-card { margin-top: 18vh; }
}
@media (max-width: 767.98px) { .kemmy-msgs { padding: 110px 20px 64px; } }

/* ==================================================================
   Round 7 (2026-09-18)
   ================================================================== */

/* --- More work deck: cards stacked in one place, moved by kemmy.js ---- */
.kemmy-deck {
  overflow: hidden;
  touch-action: pan-y;                      /* vertical swipes still scroll the page */
  cursor: grab;
  user-select: none;
}
.kemmy-deck-track {
  display: grid;
  width: auto;
  padding: 0;
  justify-items: center;
}
.kemmy-snap {
  grid-area: 1 / 1;
  transition: none;                         /* every frame is placed by kemmy.js */
  will-change: transform;
}
/* only the card in front scrolls through its site */
.kemmy-snap:hover:not(.is-center) .kemmy-pan > img { animation-play-state: paused; }
.kemmy-deck.is-dragging, .kemmy-deck.is-dragging a { cursor: grabbing; }

/* --- Hero: one of our sites on a laptop, phone or tablet (kemmy.js) ---- */
@media (min-width: 768px) {
  .kemmy-page-home [data-framer-name="Hero Section"] { padding-top: 92px !important; padding-bottom: 32px !important; }
}
.kemmy-hero-device { position: relative; display: none; color: inherit; text-decoration: none; }
@media (min-width: 1100px) {
  .kemmy-page-home [data-framer-name="Hero Section"] [data-framer-name="Container"] { position: relative; }
  .kemmy-hero-device:not(.kemmy-hero-device--mobile) {
    position: absolute;
    top: 50%;
    right: -2vw;
    z-index: 1;
    display: block;
    transform: translateY(-50%) rotate(-2deg);
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
  }
  .kemmy-hero-device--laptop:not(.kemmy-hero-device--mobile) { width: min(48vw, 700px); }
  .kemmy-hero-device--tablet:not(.kemmy-hero-device--mobile) { width: min(42vw, 600px); }
  .kemmy-hero-device--phone:not(.kemmy-hero-device--mobile) { width: auto; right: 6vw; }
  .kemmy-hero-device:not(.kemmy-hero-device--mobile):hover { transform: translateY(calc(-50% - 6px)) rotate(0deg); }
}
/* laptop */
.kemmy-hero-laptop-lid {
  position: relative;
  display: block;
  margin: 0 7%;
  padding: 10px 10px 12px;
  border: 2px solid #141414;
  border-radius: 18px 18px 6px 6px;
  background: #141414;
  box-shadow: 10px 12px 0 #f9b616, 0 30px 60px rgba(0, 0, 0, .2);
}
.kemmy-hero-laptop-bar { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 8px 8px 0 0; background: #262626; }
.kemmy-hero-laptop-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 248, 231, .28); }
.kemmy-hero-laptop-bar i:first-child { background: #f9b616; }
.kemmy-hero-laptop-bar b { margin-left: 10px; color: rgba(255, 248, 231, .82); font: 500 12px/1 Poppins, sans-serif; }
.kemmy-hero-laptop-screen { display: block; aspect-ratio: 16 / 10; border-radius: 0 0 4px 4px; background: #fff; }
.kemmy-hero-laptop-base {
  position: relative;
  display: block;
  height: 18px;
  border: 2px solid #141414;
  border-radius: 3px 3px 16px 16px;
  background: linear-gradient(#e9e4d8, #cfc8b8);
  box-shadow: 6px 8px 0 rgba(20, 20, 20, .9);
}
.kemmy-hero-laptop-base::before { position: absolute; top: -2px; left: 50%; width: 16%; height: 7px; border: 2px solid #141414; border-top: 0; border-radius: 0 0 8px 8px; background: #d9d3c4; transform: translateX(-50%); content: ""; }
/* phone */
.kemmy-hero-phone {
  position: relative;
  display: block;
  width: clamp(250px, 21vw, 300px);
  aspect-ratio: 9 / 19.5;
  padding: 9px;
  border: 2px solid #3a3a3c;
  border-radius: 46px;
  background: #111;
  box-shadow: 0 0 0 2px #141414, 12px 14px 0 2px #f9b616, 0 30px 60px rgba(0, 0, 0, .22);
}
.kemmy-hero-phone-screen { display: block; height: 100%; border-radius: 37px; background: #fff; }
.kemmy-hero-phone-island { position: absolute; top: 20px; left: 50%; z-index: 2; width: 30%; height: 22px; border-radius: 14px; background: #000; transform: translateX(-50%); }
/* tablet, on its side */
.kemmy-hero-tablet {
  position: relative;
  display: block;
  padding: 16px;
  border: 2px solid #141414;
  border-radius: 30px;
  background: #1b1b1d;
  box-shadow: 12px 14px 0 #f9b616, 0 30px 60px rgba(0, 0, 0, .2);
}
.kemmy-hero-tablet-screen { display: block; aspect-ratio: 4 / 3; border-radius: 12px; background: #fff; }
.kemmy-hero-tablet-cam { position: absolute; top: 50%; left: 7px; width: 5px; height: 5px; border-radius: 50%; background: #3a3a3c; transform: translateY(-50%); }
/* the screens scroll through the site */
.kemmy-hero-device .kemmy-pan > img {
  position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; min-height: 100%;
  animation: kemmy-pan 26s cubic-bezier(.22, .7, .2, 1) infinite;
}
.kemmy-hero-tag {
  position: absolute;
  top: -16px;
  right: 10%;
  z-index: 3;
  padding: 8px 14px 7px;
  border: 2px solid #141414;
  border-radius: 999px;
  color: #141414;
  background: #fff4d6;
  box-shadow: 3px 4px 0 #141414;
  font: 700 12px/1 Poppins, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(5deg);
  animation: kemmy-bob 5s ease-in-out infinite;
}
.kemmy-hero-device--phone:not(.kemmy-hero-device--mobile) .kemmy-hero-tag { right: -18px; }
@media (prefers-reduced-motion: reduce) { .kemmy-hero-device .kemmy-pan > img, .kemmy-hero-tag { animation: none; } }

/* the text column keeps clear of the laptop */
@media (min-width: 1100px) {
  .kemmy-page-home [data-framer-name="Hero Section"] .framer-185tpj9 { width: min(560px, 42vw) !important; }
  .kemmy-page-home .framer-1ipj55a { zoom: .74; }        /* the headline, so the whole hero fits one screen */
  .kemmy-page-home [data-framer-name="Hero Section"] .kemmy-hero-labels { margin-bottom: 18px; }
}

/* --- Hero on phones: more life ----------------------------------------- */
@media (max-width: 767.98px) {
  .kemmy-page-home [data-framer-name="Hero Section"] { padding-top: 84px !important; }
  .kemmy-hero-device.kemmy-hero-device--mobile {
    display: block;
    width: 100%;
    margin: 30px auto 34px;
    transform: rotate(-2deg);
    animation: kemmy-laptop-in .9s cubic-bezier(.16, 1, .3, 1) .3s both;
  }
  .kemmy-hero-device--mobile .kemmy-hero-laptop-lid { margin: 0 5%; padding: 7px 7px 9px; border-radius: 14px 14px 5px 5px; box-shadow: 7px 8px 0 #f9b616, 0 20px 40px rgba(0, 0, 0, .18); }
  .kemmy-hero-device--mobile .kemmy-hero-laptop-bar { height: 20px; }
  .kemmy-hero-device--mobile .kemmy-hero-laptop-bar b { font-size: 10px; }
  .kemmy-hero-device--mobile .kemmy-hero-laptop-base { height: 14px; }
  .kemmy-hero-device--mobile .kemmy-hero-phone { width: 52vw; max-width: 240px; margin: 0 auto; border-radius: 38px; }
  .kemmy-hero-device--mobile .kemmy-hero-phone-screen { border-radius: 30px; }
  .kemmy-hero-device--mobile .kemmy-hero-phone-island { top: 16px; height: 18px; }
  .kemmy-hero-device--mobile .kemmy-hero-tablet { width: 94%; margin: 0 auto; padding: 11px; border-radius: 22px; box-shadow: 8px 9px 0 #f9b616, 0 20px 40px rgba(0, 0, 0, .18); }
  .kemmy-hero-device--mobile .kemmy-hero-tag { top: -12px; right: 6%; padding: 6px 10px 5px; font-size: 10px; }
  /* the service buttons drop in one after another */
  .kemmy-hero-labels li { animation: kemmy-chip-in .7s cubic-bezier(.3, 1.5, .5, 1) both, kemmy-bob 5s ease-in-out .8s infinite; }
  .kemmy-hero-labels li:nth-child(2) { animation-delay: .12s, 1.1s; }
  .kemmy-hero-labels li:nth-child(3) { animation-delay: .24s, 1.4s; }
  /* a slow gold glow behind the headline */
  .kemmy-page-home [data-framer-name="Hero Section"] { isolation: isolate; }
  .kemmy-page-home [data-framer-name="Hero Section"]::before {
    position: absolute;
    top: 90px;
    left: 50%;
    z-index: -1;
    width: 130vw;
    height: 60vh;
    background: radial-gradient(closest-side, rgba(249, 182, 22, .28), transparent 70%);
    transform: translateX(-50%);
    animation: kemmy-glow 9s ease-in-out infinite alternate;
    pointer-events: none;
    content: "";
  }
}
@keyframes kemmy-laptop-in { from { opacity: 0; transform: translateY(40px) rotate(4deg) scale(.92); } }
@keyframes kemmy-chip-in { from { opacity: 0; transform: translateY(-26px) rotate(-8deg); } }
@keyframes kemmy-glow { from { transform: translateX(-58%) scale(.9); opacity: .7; } to { transform: translateX(-42%) scale(1.1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .kemmy-hero-device--mobile, .kemmy-page-home [data-framer-name="Hero Section"]::before { animation: none; }
  .kemmy-hero-labels li { animation: none; }
}

/* --- Hero pop-up: a short paragraph and a list; the icon flies in ------ */
.kemmy-tip-card p { margin-bottom: 14px; }
.kemmy-tip-points { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; font-size: 14px; line-height: 1.4; }
.kemmy-tip-points li { position: relative; padding-left: 26px; }
.kemmy-tip-points li::before {
  position: absolute;
  top: 1px;
  left: 0;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: #f9b616;
  content: "";
}
.kemmy-tip-card[data-tone="1"] .kemmy-tip-points li::before { border-color: #f9b616; }
.kemmy-tip-icon { opacity: 0; }
.kemmy-tip-card.has-icon .kemmy-tip-icon { opacity: 1; }
.kemmy-chip.is-away .kemmy-chip-icon { opacity: 0; transition: none; }
.kemmy-tip-flyer { position: fixed; z-index: 1003; margin: 0; pointer-events: none; transform-origin: 50% 50%; }
.kemmy-tip-layer.is-measure .kemmy-tip-card { transition: none !important; }
@media (max-width: 767.98px) {
  .kemmy-tip-card { padding: 30px 22px 20px; }
  .kemmy-tip-card p, .kemmy-tip-points { font-size: 14px; }
}

/* --- Domain search prompt: the same size and look as the hero paragraph --- */
.kemmy-domain-prompt { margin: 0 0 14px; color: inherit; font: inherit; font-size: var(--kemmy-hero-p, 18px); line-height: 1.55; opacity: .9; }
.kemmy-domain-prompt b { font-weight: 600; }

/* --- Less room between the hero and Our Work -------------------------- */
.kemmy-page-home [data-framer-name="Hero Section"] + .kemmy-projects-shell,
.kemmy-page-home .kemmy-projects-shell:not(.kemmy-more-shell) { padding-top: clamp(28px, 4vw, 56px); }

/* --- Project cards: House of Kemmy shades; titles in capitals ---------- */
.kemmy-project-body h3,
.kemmy-project-tab span { text-transform: uppercase; }

/* --- Apps in Kemmy shades --------------------------------------------- */
.kemmy-app-card { --brand-bg: #141414; --brand-fg: #fff8e7; --brand-accent: #f9b616; }
.kemmy-app-card[data-tone="gold"] { --brand-bg: #f9b616; --brand-fg: #141414; --brand-accent: #141414; }
.kemmy-app-card[data-tone="cream"] { --brand-bg: #fff4d6; --brand-fg: #141414; --brand-accent: #b07d05; }
.kemmy-app-card[data-tone="gold"] .kemmy-app-chips span:first-child { color: #f9b616; }
.kemmy-app-card[data-tone="cream"] .kemmy-app-chips span:first-child { color: #fff4d6; background: #141414; border-color: #141414; }
/* Drafts drawn as the app, inside the phone */
.kemmy-app-phone .kemmy-app { height: 100%; }
.kemmy-app-phone .kemmy-app-feed > img { position: absolute; top: 0; left: 0; width: 100%; height: auto; }

/* --- Section heads: the note or button on the right lines up with the heading --- */
.kemmy-projects-head:has(> :nth-child(2)),
.kemmy-apps-head,
.kemmy-more-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 32px;
}
:is(.kemmy-projects-head:has(> :nth-child(2)), .kemmy-apps-head, .kemmy-more-head) > div:first-child { display: contents; }
:is(.kemmy-projects-head, .kemmy-apps-head, .kemmy-more-head) > div:first-child > .kemmy-label { grid-column: 1; justify-self: start; }
:is(.kemmy-projects-head, .kemmy-apps-head, .kemmy-more-head) > div:first-child > :is(h1, h2) { grid-column: 1; grid-row: 2; }
:is(.kemmy-projects-head:has(> :nth-child(2)), .kemmy-apps-head, .kemmy-more-head) > :nth-child(2) { grid-column: 2; grid-row: 2; align-self: center; }
@media (max-width: 767.98px) {
  :is(.kemmy-projects-head:has(> :nth-child(2)), .kemmy-apps-head, .kemmy-more-head) { grid-template-columns: 1fr; }
  :is(.kemmy-projects-head:has(> :nth-child(2)), .kemmy-apps-head, .kemmy-more-head) > :nth-child(2) { grid-column: 1; grid-row: 3; margin-top: 12px; }
}

/* --- Borders: drawn faster, in gold where the outline is black --------- */
.kemmy-draw-line rect { transition-duration: .5s; }

/* --- Labels: every kicker is the same caps pill ------------------------ */
.kemmy-services-kicker,
.kemmy-about-kicker,
.kemmy-comms-kicker,
.kemmy-service-band-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  padding: 9px 16px 8px 12px;
  border: 2px solid #141414;
  border-radius: 999px;
  color: #141414 !important;
  background: #f9b616;
  box-shadow: 3px 4px 0 #141414;
  font: 700 13px/1 Poppins, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s ease;
}
.kemmy-services-kicker::before,
.kemmy-about-kicker::before,
.kemmy-comms-kicker::before,
.kemmy-service-band-label::before {
  width: 11px;
  height: 11px;
  background: currentColor;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  content: "";
}
.kemmy-services-hero .kemmy-services-kicker,
.kemmy-msg-card .kemmy-about-kicker,
.kemmy-msgs-head .kemmy-about-kicker { box-shadow: 3px 4px 0 #fff8e7; }
.kemmy-msg-card:nth-child(3) .kemmy-about-kicker,
.kemmy-msg--gold .kemmy-about-kicker { color: #f9b616 !important; background: #141414; box-shadow: 3px 4px 0 #fff8e7; }
:is(.kemmy-services-kicker, .kemmy-about-kicker, .kemmy-comms-kicker, .kemmy-service-band-label):hover { transform: rotate(-5deg) translateY(-2px); }

/* --- Pricing: the short hero, like Services and Blogs ------------------ */
.kemmy-page-pricing .kemmy-services-hero {
  min-height: 0;
  padding: clamp(118px, 11vw, 150px) clamp(20px, 7vw, 100px) clamp(40px, 4.5vw, 64px);
}
.kemmy-page-pricing .kemmy-services-hero h1 { font-size: clamp(40px, 6.4vw, 92px); }

/* --- "Let's Build Together": a short band, no photo -------------------- */
:is(.framer-1itz4va-container, .framer-41fm58-container) section { height: auto !important; min-height: 0 !important; }
:is(.framer-1itz4va-container, .framer-41fm58-container) section .framer-bctxkt,
:is(.framer-1itz4va-container, .framer-41fm58-container) section .framer-1qxb33i { display: none !important; }
:is(.framer-1itz4va-container, .framer-41fm58-container) section .framer-wuw5w1 { width: 100% !important; right: 0 !important; }
:is(.framer-1itz4va-container, .framer-41fm58-container) section { padding-top: 0 !important; padding-bottom: 0 !important; }
:is(.framer-1itz4va-container, .framer-41fm58-container) section [data-framer-name="Container"] { padding-top: clamp(48px, 5vw, 72px) !important; padding-bottom: clamp(48px, 5vw, 72px) !important; }
@media (min-width: 900px) {
  /* title on the left, the words and the button on the right */
  :is(.framer-1itz4va-container, .framer-41fm58-container) section [data-framer-name="Title Wrapper"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 60px;
    width: 100% !important;
    max-width: none !important;
  }
  :is(.framer-1itz4va-container, .framer-41fm58-container) section [data-framer-name="Title"] { display: contents !important; }
  :is(.framer-1itz4va-container, .framer-41fm58-container) section [data-framer-name="Content"] { width: 100% !important; max-width: 1240px; }
  :is(.framer-1itz4va-container, .framer-41fm58-container) section [data-framer-name="Title"] > * { width: auto !important; max-width: none !important; }
  :is(.framer-1itz4va-container, .framer-41fm58-container) section [data-framer-name="Title"] > :first-child { grid-column: 1; grid-row: 1 / span 2; }
  :is(.framer-1itz4va-container, .framer-41fm58-container) section [data-framer-name="Title"] > :nth-child(2) { grid-column: 2; grid-row: 1; }
  :is(.framer-1itz4va-container, .framer-41fm58-container) section [data-framer-name="Title Wrapper"] > [class*="-container"] { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 22px; }
}
/* every section label is the same caps pill */
.kemmy-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  margin: 0;
  padding: 9px 16px 8px 12px;
  border: 2px solid #141414;
  border-radius: 999px;
  color: #141414;
  background: #f9b616;
  box-shadow: 3px 4px 0 #141414;
  font: 700 13px/1 Poppins, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.kemmy-label::before { width: 11px; height: 11px; background: currentColor; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); content: ""; }

/* --- Domains: names on the left, hosting on the right, the order pinned
       to the bottom of the screen ----------------------------------------- */
.kemmy-dom-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(28px, 4vw, 56px); }
.kemmy-dom-side .kemmy-dom-step:first-child { margin-top: 0; }
.kemmy-dom-plans { grid-template-columns: 1fr; gap: 12px; }
.kemmy-dom-plan-card { padding: 16px 18px; }
.kemmy-dom-plan-card ul { display: none; }
.kemmy-dom-plan input:checked + .kemmy-dom-plan-card ul { display: grid; }
.kemmy-dom-plan-card strong { margin: 6px 0 0; }
.kemmy-dom-plan input:checked + .kemmy-dom-plan-card strong { margin-bottom: 12px; }
.kemmy-dom-empty { margin: 0; padding: 22px; border: 2px dashed rgba(20, 20, 20, .35); border-radius: 18px; color: #5b5750; font-size: 15px; line-height: 1.6; }
.kemmy-dom-summary {
  position: sticky;
  top: auto;
  bottom: 12px;
  z-index: 20;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 24px;
  padding: 14px 16px 14px 22px;
}
.kemmy-dom-bar-picks { display: flex; align-items: center; gap: 14px; min-width: 0; }
.kemmy-dom-summary h3 { flex: none; margin: 0; font-size: 13px; }
.kemmy-dom-summary ul { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.kemmy-dom-summary ul::-webkit-scrollbar { display: none; }
.kemmy-dom-summary li { flex: none; gap: 8px; padding: 7px 12px; border: 1.5px solid rgba(255, 248, 231, .25); border-radius: 999px; font-size: 13px; white-space: nowrap; }
.kemmy-dom-summary li b { color: #f9b616; }
.kemmy-dom-total { flex-direction: column; gap: 2px; margin: 0; padding: 0 0 0 24px; border-top: 0; border-left: 1.5px dashed rgba(255, 248, 231, .3); font-size: 20px; white-space: nowrap; }
.kemmy-dom-total span { color: rgba(255, 248, 231, .6); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.kemmy-dom-send { padding: 14px 24px; white-space: nowrap; }
.kemmy-dom-summary .kemmy-dom-small { grid-column: 1 / -1; margin: 0 !important; color: rgba(255, 248, 231, .55); font-size: 11px !important; }
@media (max-width: 1000px) {
  .kemmy-dom-body { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .kemmy-dom-summary { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px; border-radius: 18px; }
  .kemmy-dom-bar-picks { grid-column: 1 / -1; }
  .kemmy-dom-summary h3 { display: none; }
  .kemmy-dom-total { padding-left: 0; border-left: 0; font-size: 17px; }
  .kemmy-dom-summary .kemmy-dom-small { display: none; }
}

/* --- Web view, phone: a real iPhone, the site laid out at 390px inside --- */
[data-view="phone"] .kemmy-view-frame { align-items: center; padding: 10px 0; border-color: transparent; background: transparent; box-shadow: none; }
[data-view="phone"] .kemmy-view-stage {
  width: auto;
  height: min(100%, 860px);
  aspect-ratio: 390 / 844;
  overflow: hidden;
  border: 11px solid #111;
  border-radius: 52px;
  box-shadow: 0 0 0 2px #3a3a3c, 0 0 0 4px #141414, 10px 12px 0 4px #f9b616, 0 30px 60px rgba(0, 0, 0, .25);
}
[data-view="phone"] .kemmy-view-stage::before {    /* the Dynamic Island */
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 3;
  width: 30%;
  height: 26px;
  border-radius: 20px;
  background: #000;
  transform: translateX(-50%);
  content: "";
}
[data-view="phone"] .kemmy-view-stage iframe { transform-origin: 0 0; }
[data-view="phone"] .kemmy-view-still-pic { border-radius: 0; }

/* --- Clients: logos on their own colours, outlines drawn in ------------ */
.kemmy-clients { padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 64px); }
.kemmy-clients-inner { max-width: 1240px; margin: 0 auto; }
.kemmy-clients-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 32px; margin-bottom: 36px; }
.kemmy-clients-head > div { display: contents; }
.kemmy-clients-head .kemmy-label { grid-column: 1; justify-self: start; }
.kemmy-clients-head h2 { grid-column: 1; grid-row: 2; margin: 20px 0 0; color: #111; font: 700 clamp(30px, 4vw, 54px)/1.1 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-clients-head > p { grid-column: 2; grid-row: 2; margin-top: 20px; }
.kemmy-clients-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 20px; margin: 0; padding: 0; list-style: none; }
.kemmy-client {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 112px;
  padding: 0 24px;
  border: 2px solid #141414;
  border-radius: 14px;
  background: var(--bg, #fff);
  box-shadow: 4px 5px 0 #141414;
  transform: rotate(calc((var(--i) - 7) * .25deg));
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s ease;
}
.kemmy-client:nth-child(3n) { box-shadow: 4px 5px 0 #f9b616; }
.kemmy-client:hover { transform: translateY(-4px) rotate(-2deg); box-shadow: 7px 9px 0 #141414; }
.kemmy-client img { display: block; width: auto; max-width: 220px; object-fit: contain; }
@media (max-width: 767.98px) {
  .kemmy-clients-head { grid-template-columns: 1fr; }
  .kemmy-clients-head > p { grid-column: 1; grid-row: 3; margin-top: 12px; }
  .kemmy-clients-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .kemmy-client { height: 84px; padding: 0 12px; }
  .kemmy-client img { max-width: 100%; max-height: 52px; }
}

/* --- One message per page (Home, Contact, Services) -------------------- */
.kemmy-msg-solo { padding: clamp(48px, 7vw, 96px) clamp(20px, 7vw, 100px); }
.kemmy-msg-solo .kemmy-msg-card {
  position: relative;
  top: auto;
  max-width: 1240px;
  margin: 0 auto;
  color: #fff8e7;
  background: #151515;
  transform: none;
  filter: none;
  box-shadow: 8px 10px 0 #f9b616;
}
.kemmy-msg-solo .kemmy-msg-card.kemmy-msg--gold { color: #141414; background: #f9b616; border-color: #141414; box-shadow: 8px 10px 0 #141414; }
.kemmy-msg--gold .kemmy-about-portrait { border-color: #141414; }
.kemmy-msg--gold blockquote p:first-child::first-letter { color: #141414; }
.kemmy-msg--gold .kemmy-about-signature { border-top-color: rgba(20, 20, 20, .3); }
.kemmy-msg--gold .kemmy-about-signature div > span, .kemmy-msg--gold .kemmy-about-draft { color: rgba(20, 20, 20, .7); }
.kemmy-msg-photo { position: relative; overflow: hidden; aspect-ratio: 4 / 5; padding: 0; }
.kemmy-msg-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.kemmy-msg-photo .kemmy-about-portrait-note { position: absolute; bottom: 12px; left: 12px; z-index: 1; padding: 6px 10px; border-radius: 999px; color: #141414; background: #fff4d6; font-size: 11px; font-weight: 600; }
.kemmy-services-page .kemmy-msg-solo { border-top: 1px solid rgba(0, 0, 0, .16); }

/* --- Contact: what we do, where the photos were ------------------------ */
.kemmy-contact-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: 100%; margin: 24px 0 0; padding: 0; list-style: none; font-family: Poppins, sans-serif; }
.kemmy-contact-service a {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  align-items: center;
  height: 100%;
  padding: 22px 50px 22px 20px;
  border: 2px solid #141414;
  border-radius: 18px;
  color: #141414;
  background: #fffdf6;
  box-shadow: 4px 5px 0 #141414;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s ease;
}
.kemmy-contact-service[data-tone="1"] a { color: #fff8e7; background: #141414; box-shadow: 4px 5px 0 #f9b616; }
.kemmy-contact-service[data-tone="2"] a { background: #f9b616; }
.kemmy-contact-service a:hover { transform: translateY(-3px) rotate(-1deg); }
.kemmy-contact-service-icon { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid currentColor; border-radius: 14px; background: #f9b616; }
.kemmy-contact-service[data-tone="2"] .kemmy-contact-service-icon { background: #fffdf6; }
.kemmy-contact-service-icon svg { width: 24px; height: 24px; fill: none; stroke: #141414; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kemmy-contact-service b { font: 700 17px/1.2 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-contact-service span:not(.kemmy-contact-service-icon) { font-size: 14px; line-height: 1.45; opacity: .8; }
.kemmy-contact-service a > svg { position: absolute; top: 50%; right: 18px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: translateY(-50%); }
@media (max-width: 900px) { .kemmy-contact-services { grid-template-columns: 1fr; } }
/* the page wrapper clips overflow, which stops sticky; the bar is fixed instead */
.kemmy-dom-summary {
  position: fixed;
  right: 16px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  width: auto;
  max-width: 1240px;
  margin: 0 auto;
}
.kemmy-dom-body { padding-bottom: 150px; }
@media (max-width: 640px) { .kemmy-dom-summary { right: 10px; left: 10px; } .kemmy-dom-body { padding-bottom: 170px; } }
.kemmy-msg-photo::before, .kemmy-msg-photo::after { display: none; }   /* the crosshair was for the empty placeholder */

/* ==================================================================
   Round 8 (2026-09-19)
   ================================================================== */

/* --- Navbar: shorter, no white bar -------------------------------------- */
header, header.framer-1p7okhb { background: transparent !important; }
header nav.framer-ffCD7, header .framer-7uy3cn { background: transparent !important; }
header[data-framer-name="Header"] { transition: translate .35s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease; }
header.kemmy-nav-solid {
  /* the ground spreads to both window edges, not just the header's width */
  box-shadow: 0 0 0 100vmax rgba(239, 236, 229, .88);
  clip-path: inset(0 -100vmax -1px);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
@media (min-width: 768px) {
  header nav.framer-ffCD7 { padding: 12px 0 10px !important; }
}
@media (max-width: 767.98px) {
  header .framer-7uy3cn { padding: 10px 20px !important; }
  header a[data-framer-name="Logo and Name"] { zoom: .8; }
}

/* --- Big cards: a soft sand in place of solid gold -------------------- */
.kemmy-projects-stack [data-tone="sand"] { --card-bg: #efe3c3; --card-ink: #141414; --card-muted: rgba(20, 20, 20, .7); --card-line: rgba(20, 20, 20, .16); --card-accent: #141414; --card-accent-ink: #f9b616; }
.kemmy-app-card[data-tone="sand"] { --brand-bg: #efe3c3; --brand-fg: #141414; --brand-accent: #8a5d00; }
.kemmy-app-card[data-tone="sand"] .kemmy-app-chips span:first-child { color: #efe3c3; background: #141414; border-color: #141414; }

/* --- Hero pop-up: the button's own icon sits in the card's corner ------ */
.kemmy-tip-card,
.kemmy-tip-card.is-anchored,
.kemmy-tip-layer.is-on .kemmy-tip-card,
.kemmy-tip-layer.is-on .kemmy-tip-card.is-anchored { transform: rotate(-1deg); transition: opacity .22s ease; }
.kemmy-tip-card:not(.is-anchored) { transform: none !important; }
.kemmy-tip-card { overflow: visible; }
.kemmy-tip-card:not(.is-anchored) { max-height: none; }
.kemmy-tip-card > .kemmy-chip-icon {
  top: -22px;
  left: 20px;
  width: 46px;
  height: 46px;
  background: #f9b616;
  transform: rotate(-10deg);
  transition: none;
}
.kemmy-tip-card[data-tone="1"] > .kemmy-chip-icon { border-color: #141414; box-shadow: 2px 3px 0 #f9b616; }
.kemmy-tip-card > .kemmy-chip-icon svg { width: 24px; height: 24px; }
.kemmy-tip-card h3 { margin-top: 10px; }
.kemmy-tip-card .kemmy-tip-close { display: grid; place-items: center; }
.kemmy-tip-card.is-anchored .kemmy-tip-close { display: none; }
.kemmy-draw-host { isolation: isolate; }

/* --- Contact: "Need a custom quote?" as a Kemmy card ------------------- */
.kemmy-quote-host { display: block !important; height: auto !important; align-self: stretch; }
.kemmy-quote-card {
  position: relative;
  padding: 36px 30px 30px;
  border: 2px solid #141414;
  border-radius: 24px;
  color: #fff8e7;
  background: #141414;
  box-shadow: 8px 10px 0 #f9b616;
  font-family: Poppins, sans-serif;
  text-align: left;
}
.kemmy-quote-card .kemmy-label { box-shadow: 3px 4px 0 #fff8e7; }
.kemmy-quote-card h3 { margin: 20px 0 12px; font: 700 clamp(26px, 2.6vw, 36px)/1.08 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-quote-card > p:not(.kemmy-label) { margin: 0 0 20px; color: rgba(255, 248, 231, .78); font-size: 15px; line-height: 1.6; }
.kemmy-quote-card ul { display: grid; gap: 10px; margin: 0 0 26px; padding: 18px 0 0; border-top: 1.5px dashed rgba(255, 248, 231, .25); list-style: none; font-size: 14px; }
.kemmy-quote-card li { display: flex; align-items: center; gap: 10px; }
.kemmy-quote-card li svg { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #f9b616; fill: none; stroke: #141414; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.kemmy-quote-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kemmy-quote-ways a {
  display: block;
  padding: 14px 16px;
  border: 2px solid #f9b616;
  border-radius: 16px;
  color: #fff8e7;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), background-color .2s ease, color .2s ease;
}
.kemmy-quote-ways a b { display: block; margin-bottom: 4px; color: #f9b616; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.kemmy-quote-ways a:hover { color: #141414; background: #f9b616; transform: rotate(-2deg) translateY(-2px); }
.kemmy-quote-ways a:hover b { color: #141414; }
.kemmy-quote-sticker {
  position: absolute;
  top: -16px;
  right: 22px;
  padding: 8px 14px 7px;
  border: 2px dashed #141414;
  border-radius: 10px;
  color: #141414;
  background: #fff4d6;
  font: 700 12px/1 Poppins, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  transform: rotate(6deg);
}
@media (max-width: 767.98px) {
  .kemmy-quote-card { padding: 32px 22px 24px; }
  .kemmy-quote-ways { grid-template-columns: 1fr; }
}

/* ==================================================================
   Round 9 (2026-09-19)
   ================================================================== */

/* --- Dark heroes (Services, Pricing, Blogs): no stray line, a light logo --- */
.kemmy-services-hero::after { display: none !important; }
header.kemmy-nav-dark.kemmy-nav-solid { box-shadow: 0 0 0 100vmax rgba(9, 9, 9, .86); }
header.kemmy-nav-dark .framer-7uy3cn { --border-color: rgba(255, 248, 231, .14) !important; }

/* --- Tighter spacing between sections on desktop ------------------------ */
:is(.framer-1itz4va-container, .framer-41fm58-container) { height: auto !important; }
@media (min-width: 810px) {
  .kemmy-service-band { padding-top: 72px !important; padding-bottom: 72px !important; }
  .kemmy-service-band--first { padding-top: 56px !important; }
  .kemmy-services-cta { padding-top: 72px !important; padding-bottom: 72px !important; }
  .kemmy-msg-solo { padding-top: 56px !important; padding-bottom: 56px !important; }
  .kemmy-projects-shell { padding-bottom: 56px !important; }
  .kemmy-testimonials-shell { padding-top: 72px !important; padding-bottom: 72px !important; }
  .kemmy-clients { padding-top: 56px !important; padding-bottom: 56px !important; }
  .kemmy-services { padding-bottom: 72px !important; }
  .kemmy-apps { margin-top: 64px; }
  .kemmy-blog-band { padding-bottom: 72px !important; }
  section[data-framer-name="Service Section"] { padding-bottom: 72px !important; }
  section[data-framer-name="Work Section"] { padding-top: 88px !important; padding-bottom: 72px !important; }
  footer.kemmy-footer { padding-top: 56px !important; }
}

/* --- Hero laptop: the next site slides in every few seconds ------------- */
.kemmy-hero-laptop-screen { position: relative; overflow: hidden; }
.kemmy-hero-slide { position: absolute; inset: 0; z-index: 0; opacity: 0; transform: translateX(100%); }
.kemmy-hero-slide.is-on { z-index: 2; opacity: 1; transform: none; transition: transform .75s cubic-bezier(.7, 0, .2, 1); }
.kemmy-hero-slide.is-out { z-index: 1; opacity: 1; transform: translateX(-24%) scale(.94); filter: brightness(.55); transition: transform .75s cubic-bezier(.7, 0, .2, 1), filter .75s ease; }
.kemmy-hero-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.kemmy-hero-slide.is-on img { animation: kemmy-hero-drift 3.4s ease-in-out .6s both; }
@keyframes kemmy-hero-drift { to { object-position: 50% 14%; } }
.kemmy-hero-tag { transition: opacity .3s ease; }

/* desktop: higher and bigger */
@media (min-width: 1100px) {
  .kemmy-hero-device--laptop:not(.kemmy-hero-device--mobile) {
    top: 14px;
    right: -3vw;
    width: min(50vw, 780px);
    transform: rotate(-2deg);
  }
  .kemmy-hero-device--laptop:not(.kemmy-hero-device--mobile):hover { transform: translateY(-6px) rotate(0deg); }
  .kemmy-page-home [data-framer-name="Hero Section"] .framer-185tpj9 { width: min(520px, 38vw) !important; }
}

/* phones: the laptop first, the three buttons on and around it */
@media (max-width: 767.98px) {
  .kemmy-page-home [data-framer-name="Hero Section"] { padding-top: 70px !important; }
  .kemmy-hero-stage { position: relative; align-self: stretch; width: 100%; max-width: 440px; margin: 34px auto 46px; }
  .kemmy-hero-stage .kemmy-hero-device--mobile { margin: 0 auto; }
  .kemmy-hero-stage .kemmy-hero-labels {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    width: auto;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
  }
  .kemmy-hero-stage .kemmy-hero-labels li { position: absolute; pointer-events: auto; }
  .kemmy-hero-stage .kemmy-hero-labels li:nth-child(1) { top: -24px; left: 7%; }      /* above the lid */
  .kemmy-hero-stage .kemmy-hero-labels li:nth-child(2) { top: 50%; left: 16%; }       /* on the screen */
  .kemmy-hero-stage .kemmy-hero-labels li:nth-child(3) { bottom: -38px; right: 4%; }  /* over the headline */
  .kemmy-hero-stage .kemmy-hero-device--mobile .kemmy-hero-tag { top: -12px; right: 5%; }
}

@media (prefers-reduced-motion: reduce) {
  .kemmy-hero-slide { transition: none !important; }
  .kemmy-hero-slide.is-on img { animation: none; }
}

/* --- Apps: the same status bar and Dynamic Island on all three phones --- */
.kemmy-app-bar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 12cqw;
  padding: 1.5cqw 8cqw 0 10cqw;
  color: var(--bar-ink);
  background: var(--bar);
  font: 600 4.4cqw/1 -apple-system, BlinkMacSystemFont, Poppins, sans-serif;
  pointer-events: none;
}
.kemmy-app-bar svg { width: 13cqw; height: auto; fill: currentColor; }
.kemmy-app-card .kemmy-app-status > * { visibility: hidden; }
.kemmy-app-card .kemmy-app-status { height: 12cqw; }
.kemmy-app-card .kemmy-app-phone-island { top: 11px; height: 15px; width: 30%; }

/* --- Navbar stays above everything: the slider's card order (z-index up
       to 100) stays inside the slider --- */
.kemmy-deck { isolation: isolate; }
header[data-framer-name="Header"] { z-index: 998 !important; }   /* under the phone menu (999) */

/* --- Hero on phones: Apps sits where the site name was (top right of the lid) --- */
@media (max-width: 767.98px) {
  .kemmy-hero-stage .kemmy-hero-labels li:nth-child(2) { top: -22px; right: 5%; left: auto; }
}

/* --- More Work slider: no link previews or image drags while swiping --- */
.kemmy-deck, .kemmy-deck * { -webkit-user-select: none; -webkit-touch-callout: none; }
.kemmy-deck img, .kemmy-deck a { -webkit-user-drag: none; }

/* ==================================================================
   Round 10 (2026-09-19)
   ================================================================== */

/* --- Navbar: bold links, no line under each --------------------------- */
header .framer-1tsdnmq { display: none !important; }
header [data-framer-name="Links"] p.framer-text,
.kemmy-menu a { font-weight: 700 !important; }

/* --- Client logos: flat, no offset shadow ----------------------------- */
.kemmy-client, .kemmy-client:nth-child(3n), .kemmy-client:hover { box-shadow: none; }

/* --- Contact: no empty "Book a free call" band ------------------------ */
.kemmy-page-contact section[data-framer-name="Work Section"] { display: none !important; }

/* --- Hero: the prompt keeps the old paragraph's type ------------------ */
.kemmy-page-home .kemmy-domain-prompt { font: 400 20px/34px "DM Sans", sans-serif !important; letter-spacing: normal !important; color: #4a4a4a !important; }
@media (max-width: 1099.98px) { .kemmy-page-home .kemmy-domain-prompt { font-size: 16px !important; line-height: 24px !important; } }

/* desktop: the laptop, then the domain search under it, on the right */
.kemmy-hero-side { display: none; }
@media (min-width: 1100px) {
  .kemmy-page-home [data-framer-name="Hero Section"] [data-framer-name="Container"] { min-height: 660px; }
  .kemmy-hero-side {
    position: absolute;
    top: 6px;
    right: -3vw;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(50vw, 760px);
  }
  .kemmy-hero-side .kemmy-hero-device--laptop:not(.kemmy-hero-device--mobile) {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    transform: rotate(-2deg);
  }
  .kemmy-hero-side .kemmy-hero-device--laptop:not(.kemmy-hero-device--mobile):hover { transform: translateY(-6px) rotate(0deg); }
  .kemmy-hero-side .kemmy-domain { width: min(560px, 86%); margin: 34px 0 0; }
  .kemmy-hero-side .kemmy-domain-prompt { margin-bottom: 14px; text-align: center; font-size: 18px !important; line-height: 28px !important; }
  .kemmy-hero-side .kemmy-domain-results { text-align: left; }
}

/* the headline's mark: a browser window on a gold tile, a cursor clicking it */
.kemmy-mark-host > :not(.kemmy-hero-mark) { visibility: hidden; }
.kemmy-mark-host { position: relative; }
.kemmy-hero-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 116px;
  height: 104px;
  border: 2px solid #141414;
  border-radius: 26px;
  background: #f9b616;
  box-shadow: 6px 7px 0 #141414;
  transform: translate(-50%, -50%) rotate(-6deg);
  animation: kemmy-mark-tilt 5s ease-in-out infinite;
}
.kemmy-mark-win {
  position: absolute;
  inset: 18px 16px 20px;
  overflow: hidden;
  border: 2px solid #141414;
  border-radius: 10px;
  background: #fffdf6;
}
.kemmy-mark-bar { display: flex; gap: 3px; align-items: center; height: 13px; padding: 0 6px; background: #141414; }
.kemmy-mark-bar b { width: 4px; height: 4px; border-radius: 50%; background: #fff8e7; opacity: .5; }
.kemmy-mark-bar b:first-child { background: #f9b616; opacity: 1; }
.kemmy-mark-line { display: block; height: 5px; margin: 7px 8px 0; border-radius: 3px; background: #141414; transform-origin: left; animation: kemmy-mark-type 5s ease-in-out infinite; }
.kemmy-mark-line + .kemmy-mark-line { width: 62%; margin-top: 5px; opacity: .35; animation-delay: .25s; }
.kemmy-mark-btn { position: absolute; left: 8px; bottom: 7px; width: 26px; height: 9px; border-radius: 999px; background: #f9b616; border: 1.5px solid #141414; animation: kemmy-mark-press 5s ease-in-out infinite; }
.kemmy-mark-cursor {
  position: absolute;
  right: -10px;
  bottom: -12px;
  width: 36px;
  height: 36px;
  fill: #fffdf6;
  stroke: #141414;
  stroke-width: 1.8;
  stroke-linejoin: round;
  filter: drop-shadow(2px 3px 0 #141414);
  animation: kemmy-mark-cursor 5s ease-in-out infinite;
}
@keyframes kemmy-mark-tilt { 0%, 100% { transform: translate(-50%, -50%) rotate(-6deg); } 50% { transform: translate(-50%, -54%) rotate(-2deg); } }
@keyframes kemmy-mark-type { 0%, 12% { transform: scaleX(0); } 38%, 100% { transform: scaleX(1); } }
@keyframes kemmy-mark-cursor { 0%, 40% { transform: translate(14px, 16px); } 62%, 70% { transform: translate(-44px, -6px); } 74% { transform: translate(-44px, -6px) scale(.82); } 80%, 88% { transform: translate(-44px, -6px); } 100% { transform: translate(14px, 16px); } }
@keyframes kemmy-mark-press { 0%, 72% { background: #f9b616; } 74%, 90% { background: #141414; } 100% { background: #f9b616; } }
@media (prefers-reduced-motion: reduce) { .kemmy-hero-mark, .kemmy-mark-line, .kemmy-mark-btn, .kemmy-mark-cursor { animation: none; } }

/* --- Web view: the snapshot shows at once, the live site fades in over it --- */
.kemmy-view-cover { position: absolute; inset: 0; z-index: 1; transition: opacity .5s ease; }
.kemmy-view-stage:not(.is-loading) .kemmy-view-cover { opacity: 0; pointer-events: none; }
.kemmy-view-stage.is-loading::after {
  inset: auto auto 16px 50%;
  z-index: 2;
  padding: 10px 16px;
  border: 2px solid #141414;
  border-radius: 999px;
  box-shadow: 3px 4px 0 #141414;
  transform: translateX(-50%);
  content: "Loading the live site…";
}

/* --- Domains: a short cart; the list opens on a tap or on scrolling up;
       at the end of the order section it stays there --------------------- */
.kemmy-dom-body { position: relative; }
.kemmy-dom-summary {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head send" "picks picks";
  align-items: center;
  gap: 0 16px;
  padding: 10px 12px 10px 20px;
}
.kemmy-dom-summary.is-docked { position: absolute !important; right: clamp(20px, 7vw, 100px); bottom: 40px; left: clamp(20px, 7vw, 100px); max-width: none; }
.kemmy-dom-bar-head { grid-area: head; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 0; padding: 4px 0; border: 0; color: inherit; background: none; font: inherit; text-align: left; cursor: pointer; }
.kemmy-dom-count { display: inline-flex; align-items: center; gap: 8px; color: #f9b616; font: 700 13px/1 Poppins, sans-serif; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.kemmy-dom-count i { width: 8px; height: 8px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; transform: translateY(2px) rotate(45deg); transition: transform .3s ease; }
.kemmy-dom-summary.is-open .kemmy-dom-count i { transform: translateY(-2px) rotate(225deg); }
.kemmy-dom-summary .kemmy-dom-total { flex-direction: row; align-items: baseline; gap: 10px; padding: 0; border: 0; font-size: 20px; }
.kemmy-dom-send { grid-area: send; }
.kemmy-dom-summary .kemmy-dom-bar-picks { grid-area: picks; display: block; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s ease, opacity .25s ease, margin .35s ease; }
.kemmy-dom-summary.is-open .kemmy-dom-bar-picks { max-height: 260px; margin: 12px 0 4px; overflow: auto; opacity: 1; }
.kemmy-dom-summary .kemmy-dom-bar-picks ul { flex-wrap: wrap; overflow: visible; }
.kemmy-dom-summary .kemmy-dom-bar-picks > p:not(.kemmy-dom-small) { margin: 0; color: rgba(255, 248, 231, .7); font-size: 14px; }
.kemmy-dom-summary .kemmy-dom-small { display: block !important; margin-top: 10px !important; }
@media (max-width: 640px) {
  .kemmy-dom-summary { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 10px 10px 16px; }
  .kemmy-dom-bar-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .kemmy-dom-summary .kemmy-dom-total { font-size: 17px; }
  .kemmy-dom-summary .kemmy-dom-total span { display: none; }
  .kemmy-dom-send { padding: 12px 16px; }
  .kemmy-dom-summary.is-docked { right: 10px; left: 10px; }
}

/* --- Hero, desktop: the sentence on the left points at the field under the laptop --- */
.kemmy-prompt-arrow { display: none; }
@media (min-width: 1100px) {
  .kemmy-page-home [data-framer-name="Hero Section"] .kemmy-domain-prompt { max-width: 520px; margin: 28px 0 0; }
  .kemmy-prompt-arrow {
    display: inline-block;
    width: 74px;
    height: 56px;
    margin-left: 8px;
    vertical-align: 2px;
    fill: none;
    stroke: #f9b616;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(2px 2px 0 #141414);
    animation: kemmy-prompt-nudge 2.4s ease-in-out infinite;
  }
  .kemmy-hero-side .kemmy-domain { margin-top: 40px; }
}
@keyframes kemmy-prompt-nudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6px, -6px); } }
@media (prefers-reduced-motion: reduce) { .kemmy-prompt-arrow { animation: none; } }

/* the arrow is drawn by kemmy.js from the sentence to the field; desktop only */
.kemmy-prompt-arrow { display: none !important; }
.kemmy-prompt-anchor { display: inline-block; width: 1px; height: 1em; vertical-align: middle; }
.kemmy-hero-arrow { display: none; }
@media (min-width: 1100px) {
  .kemmy-hero-arrow {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: block;
    overflow: visible;
    pointer-events: none;
    fill: none;
    stroke: #f9b616;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 2 9;
    filter: drop-shadow(1.5px 1.5px 0 #141414);
  }
  .kemmy-hero-arrow path:last-child { stroke-dasharray: none; stroke-width: 5; }
}

/* --- Hero, desktop: tighter, so "Check if yours is available" shows in an
       ordinary browser window, not only full screen --------------------- */
@media (min-width: 768px) { .kemmy-hero-stage { display: none; } }   /* its gap added empty space */
@media (min-width: 1100px) {
  .kemmy-page-home [data-framer-name="Hero Section"] { padding-top: 86px !important; }
  .kemmy-page-home [data-framer-name="Hero Section"] .framer-1o4uyrs { gap: 22px !important; }
  .kemmy-page-home [data-framer-name="Hero Section"] .kemmy-hero-labels { margin-bottom: 4px; }
  .kemmy-page-home .framer-1ipj55a { gap: 8px !important; }
  .kemmy-page-home .kemmy-mark-host { width: 112px !important; height: 112px !important; }
  .kemmy-page-home .kemmy-hero-mark { scale: .82; }
  .kemmy-page-home [data-framer-name="Hero Section"] .framer-185tpj9 { gap: 14px !important; }
  .kemmy-page-home [data-framer-name="Hero Section"] .kemmy-domain-prompt { margin-top: 4px; }
  .kemmy-page-home [data-framer-name="Hero Section"] [data-framer-name="Container"] { min-height: 600px; }
}
@media (min-width: 1100px) {
  /* the tablet layout's starburst stickers (Development, Convenience,
     Design) sit on the headline once the laptop is beside it */
  .kemmy-page-home [data-framer-name="Hero Section"] :is([data-framer-name="01"], [data-framer-name="02"], [data-framer-name="03"]) { display: none !important; }
  .kemmy-page-home [data-framer-name="Hero Section"] { padding-top: 80px !important; }
}
/* a short window: a smaller headline so the search sentence still shows */
@media (min-width: 1100px) and (max-height: 760px) {
  .kemmy-page-home .framer-1ipj55a { zoom: .62; }
  .kemmy-page-home [data-framer-name="Hero Section"] .framer-1o4uyrs { gap: 16px !important; }
}
@media (min-width: 1100px) {
  .kemmy-page-home [data-framer-name="Hero Section"] .kemmy-mobile-banner { display: none !important; }
}
@media (min-width: 1100px) and (max-height: 760px) { .kemmy-page-home .kemmy-hero-mark { scale: .72; } }
@media (min-width: 1100px) {
  .kemmy-page-home :is(.framer-kbz1y0, .framer-108m6ia, .framer-9itcge)::before,
  .kemmy-page-home :is(.framer-kbz1y0, .framer-108m6ia, .framer-9itcge)::after { display: none !important; }
}

/* --- Hero, desktop: smaller laptop, buttons a little higher, equal room
       above and below the headline, the mark in line with "Your next",
       the search field tilted like the laptop --------------------------- */
@media (min-width: 1100px) {
  .kemmy-page-home [data-framer-name="Hero Section"] { padding-top: 70px !important; }
  .kemmy-hero-side { top: 20px; right: -1vw; width: min(42vw, 620px); }
  .kemmy-page-home [data-framer-name="Hero Section"] .framer-1o4uyrs { gap: 34px !important; }
  .kemmy-page-home [data-framer-name="Hero Section"] .kemmy-hero-labels { margin-bottom: 0; }
  .kemmy-page-home .framer-2clfo1 { align-items: center !important; }
  .kemmy-page-home .kemmy-mark-host { width: 96px !important; height: 86px !important; margin-right: 18px !important; align-self: center !important; }
  .kemmy-page-home .kemmy-hero-mark,
  .kemmy-page-home [data-framer-name="Hero Section"] .kemmy-hero-mark { scale: .74; }
  .kemmy-hero-side .kemmy-domain { width: min(520px, 90%); }
  .kemmy-hero-side .kemmy-domain-field { transform: rotate(-2deg); transform-origin: 50% 50%; }
}
@media (min-width: 1100px) and (max-height: 760px) {
  .kemmy-page-home [data-framer-name="Hero Section"] .framer-1o4uyrs { gap: 26px !important; }
}
@media (min-width: 1100px) {
  .kemmy-page-home .framer-1ipj55a { gap: 22px !important; }
}
@media (min-width: 1100px) and (max-height: 760px) {
  .kemmy-page-home .framer-1ipj55a { gap: 16px !important; }
}
@media (min-width: 1100px) { .kemmy-page-home .kemmy-hero-mark { top: 38%; } }
@media (min-width: 1100px) { .kemmy-page-home [data-framer-name="Hero Section"] .kemmy-hero-mark { scale: .8; } }
/* the space between the hero and Our Work, halved (122px to about 64px) */
@media (min-width: 1100px) {
  .kemmy-page-home [data-framer-name="Hero Section"] { padding-bottom: 8px !important; }
  .kemmy-page-home .kemmy-projects-shell:not(.kemmy-more-shell) { padding-top: 24px !important; }
}
/* the gap between the headline column and the laptop, halved */
@media (min-width: 1100px) { .kemmy-hero-side { right: calc(-1vw + 100px); } }
@media (min-width: 1100px) and (max-width: 1379.98px) { .kemmy-hero-side { right: calc(-1vw + 120px); } }
/* the hero as one centred group: text column, a gap, then the laptop,
   with equal space left and right */
@media (min-width: 1100px) {
  .kemmy-page-home [data-framer-name="Hero Section"] [data-framer-name="Container"] {
    flex: none !important;
    width: calc(min(520px, 38vw) + 60px + min(40vw, 560px)) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }
  .kemmy-hero-side,
  .kemmy-hero-side { right: 0 !important; width: min(40vw, 560px); }
}
@media (min-width: 1100px) and (max-height: 760px) {
  .kemmy-page-home [data-framer-name="Hero Section"] [data-framer-name="Container"] { width: calc(min(460px, 34vw) + 60px + min(40vw, 560px)) !important; }
  .kemmy-page-home [data-framer-name="Hero Section"] .framer-185tpj9 { width: min(460px, 34vw) !important; }
  .kemmy-page-home [data-framer-name="Hero Section"] .kemmy-domain-prompt { max-width: 460px; }
}

/* "Certified" starburst on "Let's Build Together" */
.kemmy-certified p { font-weight: 800 !important; text-transform: uppercase; letter-spacing: .04em; }

/* --- Round 11 · Domains cart: closed it is a small pill with the total only;
       scrolling up (or a tap) opens it into the full bar, and both ways are
       animated. Docking at the end of the section keeps the same place, so
       the switch doesn't jump. -------------------------------------------- */
.kemmy-dom-summary {
  max-width: 1240px;
  gap: 0 16px;
  transition: max-width .55s cubic-bezier(.2, .8, .2, 1), padding .45s cubic-bezier(.2, .8, .2, 1), gap .45s ease, border-radius .45s ease;
}
.kemmy-dom-summary.is-docked { max-width: 1240px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.kemmy-dom-summary:not(.is-open) { max-width: 240px; gap: 0; padding: 8px 18px 8px 22px; border-radius: 999px; }
.kemmy-dom-bar-head { gap: 0; }
.kemmy-dom-count, .kemmy-dom-total > span {
  max-width: 220px;
  overflow: hidden;
  transition: max-width .5s cubic-bezier(.2, .8, .2, 1), opacity .3s ease, margin .5s cubic-bezier(.2, .8, .2, 1);
}
.kemmy-dom-count { margin-right: 18px; }
.kemmy-dom-summary .kemmy-dom-total { margin-right: auto; }
.kemmy-dom-chev { flex: none; width: 8px; height: 8px; margin: 0 4px 0 14px; border-top: 2px solid #f9b616; border-left: 2px solid #f9b616; transform: translateY(2px) rotate(45deg); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.kemmy-dom-summary.is-open .kemmy-dom-chev { transform: translateY(-2px) rotate(225deg); }
.kemmy-dom-summary:not(.is-open) .kemmy-dom-count,
.kemmy-dom-summary:not(.is-open) .kemmy-dom-total > span { max-width: 0; margin: 0; opacity: 0; }
.kemmy-dom-send {
  max-width: 260px;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), max-width .5s cubic-bezier(.2, .8, .2, 1), opacity .3s ease, padding .5s cubic-bezier(.2, .8, .2, 1), border-width .5s ease;
}
.kemmy-dom-summary:not(.is-open) .kemmy-dom-send { max-width: 0; padding-inline: 0; border-width: 0; opacity: 0; pointer-events: none; }
.kemmy-dom-summary .kemmy-dom-bar-picks,
.kemmy-dom-summary.is-open .kemmy-dom-bar-picks {
  display: grid;
  grid-template-rows: 0fr;
  max-height: none;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  transition: grid-template-rows .5s cubic-bezier(.2, .8, .2, 1), opacity .25s ease, margin .5s cubic-bezier(.2, .8, .2, 1);
}
.kemmy-dom-summary.is-open .kemmy-dom-bar-picks { grid-template-rows: 1fr; margin: 12px 0 4px; opacity: 1; transition-delay: 0s, .12s, 0s; }
.kemmy-dom-picks-in { min-height: 0; max-height: 260px; overflow: hidden; }
.kemmy-dom-summary.is-open .kemmy-dom-picks-in { overflow-y: auto; }
@media (max-width: 640px) {
  .kemmy-dom-summary:not(.is-open) { max-width: 200px; padding: 8px 16px 8px 20px; }
  .kemmy-dom-bar-head { flex-direction: row; align-items: center; }
  .kemmy-dom-count { margin-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .kemmy-dom-summary, .kemmy-dom-summary *, .kemmy-dom-summary .kemmy-dom-bar-picks { transition: none !important; }
}

/* --- Round 11 · message portraits: keep faces in frame on the wide crop --- */
.kemmy-msg-photo img { object-position: 50% 12%; }
/* the two hidden template backdrops no longer load at all (their paths are
   kept in data-kemmy-src) */
img[data-kemmy-src*="PKSaKo1OIRFFLxkIAULU14BPI"], img[data-kemmy-src*="j2aFbYpNegrzxAqusoUfKPj6Nk"] { visibility: hidden; }
/* with motion allowed the live canvas draws the pattern, so the static
   picture only loads for reduced motion */
@media (prefers-reduced-motion: no-preference) { body::before { background-image: none; } }
@media (max-width: 640px) {
  .kemmy-dom-summary.is-open .kemmy-dom-bar-head { flex-wrap: wrap; row-gap: 4px; }
  .kemmy-dom-summary.is-open .kemmy-dom-count { flex-basis: 100%; margin-right: 0; }
}

/* ==================================================================
   Round 12 (2026-09-22)
   ================================================================== */

/* --- Navbar: no line under it; its ground a touch lighter than the page -- */
header .framer-7uy3cn::after { display: none !important; }
header:not(.kemmy-nav-solid) { box-shadow: none !important; }
header.kemmy-nav-solid { box-shadow: 0 0 0 100vmax rgba(255, 254, 247, .9); clip-path: inset(0 -100vmax 0); }
header.kemmy-nav-dark.kemmy-nav-solid { box-shadow: 0 0 0 100vmax rgba(32, 31, 29, .88); }

/* --- Projects page: Other work, the rest of the portfolio -------------- */
.kemmy-other { padding-bottom: clamp(40px, 5vw, 70px); }
.kemmy-other-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.kemmy-other-list li { display: flex; }
.kemmy-other-card {
  display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 20px 20px 16px;
  border: 2px solid #141414; border-radius: 18px; color: #141414; background: #fffdf6; box-shadow: 3px 4px 0 #141414;
  font-family: Poppins, sans-serif; text-decoration: none;
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s ease;
}
a.kemmy-other-card:hover { transform: translate(-2px, -3px) rotate(-1deg); box-shadow: 5px 7px 0 #f9b616; }
.kemmy-other-kind { align-self: flex-start; padding: 5px 9px; border-radius: 999px; color: #f9b616; background: #141414; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.kemmy-other-card h3 { margin: 4px 0 0; font: 700 17px/1.2 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-other-card p { flex: 1; margin: 0; font-size: 14px; line-height: 1.5; opacity: .78; }
.kemmy-other-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 6px; padding-top: 12px; border-top: 1.5px dashed rgba(20, 20, 20, .25); font-size: 12px; font-weight: 600; }
.kemmy-other-foot span:first-child { overflow-wrap: anywhere; }
.kemmy-other-foot span:last-child { opacity: .7; }
@media (max-width: 767.98px) { .kemmy-other-list { grid-template-columns: 1fr; gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .kemmy-other-card { transition: none; } }

/* --- Staff artwork: never cropped into a strip, and in full colour ------ */
.kemmy-msg-photo img { filter: none; object-position: 50% 30%; }
.kemmy-msg-card .kemmy-about-portrait.kemmy-msg-photo, .kemmy-about-portrait.kemmy-msg-photo { aspect-ratio: 4 / 5; height: auto; }
@media (max-width: 767.98px) {
  .kemmy-about-portrait.kemmy-msg-photo { width: 100%; max-width: 440px; margin-inline: auto; aspect-ratio: 4 / 5 !important; }
  .kemmy-team-photo { height: auto; aspect-ratio: 4 / 5; }
}

/* --- Staff photos: black and white, in colour on hover or tap ----------- */
.kemmy-msg-photo img, .kemmy-team-photo img { filter: grayscale(1) contrast(1.04); transition: filter .5s ease, transform .45s cubic-bezier(.2, .75, .2, 1); }
.kemmy-msg-photo.is-color img, .kemmy-team-photo.is-color img,
.kemmy-team-card:focus-within .kemmy-team-photo img, .kemmy-team-card.is-focused .kemmy-team-photo img { filter: none; }
@media (hover: hover) {
  .kemmy-msg-photo:hover img, .kemmy-team-card:hover .kemmy-team-photo img { filter: none; }
}
.kemmy-msg-photo, .kemmy-team-photo { cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) { .kemmy-msg-photo img, .kemmy-team-photo img { transition: none; } }

/* === Round 17 ============================================================ */

/* --- Borders draw sooner and quicker ----------------------------------- */
.kemmy-draw-line rect { transition-duration: .32s; }
.kemmy-draw-line { transition-duration: .3s; }
.kemmy-drawn:not(.kemmy-snap), .kemmy-snap.kemmy-drawn > a { animation-duration: .3s; }
:is(.kemmy-project-macbook-screen, .kemmy-project-iphone, .kemmy-project-ipad, .kemmy-project-android, .kemmy-project-pc-screen, .kemmy-app-phone).kemmy-drawn,
:is(.kemmy-project-macbook-screen, .kemmy-project-iphone, .kemmy-project-ipad, .kemmy-project-android, .kemmy-project-pc-screen, .kemmy-app-phone).kemmy-drawn > :not(.kemmy-draw-line) { animation-duration: .35s; }

/* --- Labels: a short ink bar in place of the four-point sparkle --------- */
.kemmy-label::before,
.kemmy-projects-shell .kemmy-label::before,
#kemmy-services .kemmy-services-eyebrow::before,
.kemmy-price-head .kemmy-label::before,
.kemmy-dom-hero .kemmy-label::before,
.kemmy-view-side .kemmy-label::before,
#kemmy-services .kemmy-services-eyebrow::before,
.kemmy-about-kicker::before,
.kemmy-comms-kicker::before,
.kemmy-dom-hero .kemmy-label::before,
.kemmy-price-head .kemmy-label::before,
.kemmy-service-band-label::before,
.kemmy-services-kicker::before,
.kemmy-view-side .kemmy-label::before,
/* a small four-point spark ahead of the words */
.kemmy-projects-shell .kemmy-label::before,
.kemmy-blog-page .kemmy-label::before,
.kemmy-post-page .kemmy-label::before {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  clip-path: none;
  transform: rotate(-12deg);
}

/* --- "Start A Conversation": three pop lines at the corner, no sparkles - */
.kemmy-spark-btn i,
.kemmy-spark-btn i:nth-of-type(1),
.kemmy-spark-btn i:nth-of-type(2),
.kemmy-spark-btn i:nth-of-type(3) {
  top: -15px;
  right: auto;
  bottom: auto;
  left: -6px;
  width: 4px;
  height: 14px;
  border-radius: 3px;
  background: #f9b616;
  clip-path: none;
  filter: none;
  transform-origin: 50% 100%;
  animation: kemmy-pop-line 2.4s ease-in-out infinite;
}
.kemmy-spark-btn i:nth-of-type(1) { --r: -38deg; left: -12px; top: -6px; }
.kemmy-spark-btn i:nth-of-type(2) { --r: -8deg; left: 4px; top: -18px; height: 16px; animation-delay: -.3s; }
.kemmy-spark-btn i:nth-of-type(3) { --r: 22deg; left: 20px; top: -16px; height: 12px; animation-delay: -.6s; }
@keyframes kemmy-pop-line {
  0%, 100% { transform: rotate(var(--r, 0deg)) scaleY(1); opacity: 1; }
  50%      { transform: rotate(var(--r, 0deg)) scaleY(.55) translateY(2px); opacity: .7; }
}

/* --- Stickers and dividers: solid edges instead of dashes --------------- */
.kemmy-addon-sticker, .kemmy-post-soon, .kemmy-quote-flag, .kemmy-quote-sticker, .kemmy-cat-count {
  border-style: solid;
  box-shadow: 2px 3px 0 #141414;
}
.kemmy-cat-count { box-shadow: 2px 3px 0 currentColor; }
.kemmy-post-note { border-style: solid; box-shadow: 4px 5px 0 #141414; }
.kemmy-dom-empty { border-style: solid; }
.kemmy-price-card ul, .kemmy-dom-plan-card ul, .kemmy-quote-person, .kemmy-quote-card ul, .kemmy-other-foot { border-top-style: solid !important; }

/* --- Home: View All Projects right under the pile ----------------------- */
.kemmy-projects-foot--main { margin-top: clamp(28px, 4vw, 48px); }
.kemmy-projects-foot--main a { min-height: 54px; padding: 0 30px; border-width: 2px; color: #141414; background: #f9b616; box-shadow: 4px 5px 0 #141414; font-size: 16px; transition: color .2s ease, background-color .2s ease, transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s ease; }
.kemmy-projects-foot--main a:hover { color: #f9b616; background: #141414; transform: rotate(-3deg) translateY(-2px); box-shadow: 6px 8px 0 #f9b616; }
.kemmy-page-home .kemmy-home-more { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(24px, 3vw, 40px); }
.kemmy-page-home .kemmy-apps-shell { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(40px, 5vw, 64px); background: transparent; }
.kemmy-apps-shell .kemmy-apps { margin-top: 0; }

/* --- Apps: a desktop app in a Mac window -------------------------------- */
.kemmy-app-desk {
  position: relative;
  z-index: 1;
  align-self: center;
  width: 92%;
  margin: 34px 0 -40px;
  overflow: hidden;
  border: 2px solid #141414;
  border-radius: 12px;
  background: #fffdf6;
  box-shadow: 0 22px 34px rgba(0, 0, 0, .25), 4px 5px 0 #141414;
  transform: rotate(-2deg);
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1);
}
.kemmy-app-desk-bar { display: flex; gap: 6px; height: 22px; align-items: center; padding: 0 10px; border-bottom: 2px solid #141414; background: #efece5; }
.kemmy-app-desk-bar i { width: 9px; height: 9px; border: 1.5px solid #141414; border-radius: 50%; background: #f9b616; }
.kemmy-app-desk-bar i + i { background: #fffdf6; }
.kemmy-app-desk-screen { display: block; overflow: hidden; aspect-ratio: 16 / 10; }
.kemmy-app-desk-screen img { display: block; width: 100%; height: auto; }
.kemmy-app-card.is-desk { justify-content: flex-start; }
.kemmy-app-card:hover .kemmy-app-desk { transform: rotate(0) translateY(-6px) scale(1.02); }
.kemmy-project-macbook--solo { width: 92%; margin-top: 18px; }

/* --- Partners: two rows of tiles, each turning into the next logo ------- */
.kemmy-clients-rows { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.kemmy-clients-rows .kemmy-client {
  height: 112px;
  padding: 0;
  overflow: hidden;
  transform: none;
  background: #fffdf6;
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.kemmy-clients-rows .kemmy-client:hover { transform: translateY(-3px) rotate(-1.5deg); }
.kemmy-client-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background: var(--bg, #fff);
  transition: transform .62s cubic-bezier(.7, 0, .2, 1), opacity .62s ease;
}
.kemmy-client-face img { display: block; width: auto; height: var(--h, 50px); max-width: 84%; max-height: 72%; object-fit: contain; }
.kemmy-client-face.is-in { transform: translateY(104%); }
.kemmy-client-face.is-out { transform: translateY(-104%); opacity: .4; }
@media (max-width: 1023.98px) {
  .kemmy-clients-rows { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kemmy-clients-rows .kemmy-client:nth-child(n+9) { display: none; }
}
@media (max-width: 767.98px) {
  .kemmy-clients-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .kemmy-clients-rows .kemmy-client { height: 76px; border-radius: 12px; }
  .kemmy-clients-rows .kemmy-client:nth-child(n+7) { display: none; }
  .kemmy-client-face { padding: 0 8px; }
  .kemmy-client-face img { height: calc(var(--h, 50px) * .62); max-width: 88%; }
}
@media (prefers-reduced-motion: reduce) { .kemmy-client-face { transition: none; } }

/* --- Footer "Book A Free Call": a gold pill with an ink edge ------------ */
.kemmy-call-box { width: auto !important; height: auto !important; }
a.kemmy-call-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  width: auto !important;
  height: auto !important;
  min-height: 58px;
  padding: 7px 24px 7px 7px !important;
  border: 2px solid #141414 !important;
  border-radius: 999px !important;
  color: #141414 !important;
  background: #f9b616 !important;
  box-shadow: 5px 6px 0 #fffdf6;
  font: 700 17px/1 Poppins, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s ease, background-color .2s ease;
}
.kemmy-call-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #141414; transition: transform .4s cubic-bezier(.3, 1.8, .5, 1); }
.kemmy-call-icon svg { width: 21px; height: 21px; fill: none; stroke: #f9b616; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
a.kemmy-call-btn > svg { width: 20px; height: 20px; fill: none; stroke: #141414; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
a.kemmy-call-btn:hover { transform: rotate(-3deg) translateY(-3px); box-shadow: 7px 9px 0 #fffdf6; }
a.kemmy-call-btn:hover .kemmy-call-icon { transform: rotate(-14deg) scale(1.06); }
a.kemmy-call-btn:hover > svg { transform: translateX(4px); }
a.kemmy-call-btn:focus-visible { outline: 3px solid #fffdf6; outline-offset: 4px; }

/* --- Domains: .com called out, taken names listed and struck ----------- */
.kemmy-dom-flag {
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 2px solid #141414;
  border-radius: 16px;
  color: #141414;
  background: #fff4d6;
  box-shadow: 3px 4px 0 #141414;
  font-size: 15px;
  line-height: 1.55;
}
.kemmy-dom-flag-name { display: inline-flex; align-items: center; margin: 0 8px 4px 0; padding: 5px 11px; border-radius: 999px; color: #fffdf6; background: #c9302c; font-weight: 700; }
.kemmy-dom-flag-name s { text-decoration-thickness: 2px; }
.kemmy-dom-flag.is-free { background: #e8f5e1; }
.kemmy-dom-flag.is-free b { padding: 2px 8px; border-radius: 999px; color: #fffdf6; background: #1f7a3d; }
.kemmy-dom-list .kemmy-dom-gone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px 13px 56px;
  border: 2px solid rgba(20, 20, 20, .2);
  border-radius: 16px;
  color: #8a857c;
  background: #f1ede4;
}
.kemmy-dom-gone .kemmy-dom-name { font-size: 16px; }
.kemmy-dom-gone s { text-decoration-color: #c9302c; text-decoration-thickness: 2px; }
.kemmy-dom-gone-tag { flex: none; padding: 5px 10px; border-radius: 999px; color: #fffdf6; background: #c9302c; font: 700 11px/1 Poppins, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 767.98px) { .kemmy-dom-list .kemmy-dom-gone { padding: 12px 16px 12px 54px; } }

/* --- Leaving the cart: our pop-up --------------------------------------- */
.kemmy-leave-lock { overflow: hidden; }
.kemmy-leave {
  position: fixed;
  z-index: 10050;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20, 20, 20, .55);
  opacity: 0;
  transition: opacity .25s ease;
}
.kemmy-leave.is-open { opacity: 1; }
.kemmy-leave-card {
  position: relative;
  width: min(460px, 100%);
  padding: 34px 28px 26px;
  border: 2px solid #141414;
  border-radius: 24px;
  color: #141414;
  background: #fffdf6;
  box-shadow: 8px 10px 0 #f9b616, 8px 10px 0 2px #141414;
  font-family: Poppins, sans-serif;
  transform: translateY(18px) rotate(-1.5deg) scale(.96);
  transition: transform .4s cubic-bezier(.3, 1.5, .5, 1);
}
.kemmy-leave.is-open .kemmy-leave-card { transform: none; }
.kemmy-leave-tag { position: absolute; top: -15px; left: 24px; padding: 7px 13px; border: 2px solid #141414; border-radius: 999px; color: #f9b616; background: #141414; font: 700 12px/1 Poppins, sans-serif; letter-spacing: .05em; text-transform: uppercase; transform: rotate(-4deg); }
.kemmy-leave-card h2 { margin: 6px 0 12px; font: 700 clamp(24px, 5vw, 30px)/1.15 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-leave-card p { margin: 0 0 14px; color: #4a463f; font-size: 15px; line-height: 1.6; }
.kemmy-leave-card ul { display: grid; gap: 6px; margin: 0 0 22px; padding: 14px 16px; border: 2px solid #141414; border-radius: 14px; background: #fff4d6; list-style: none; font-size: 14px; font-weight: 600; }
.kemmy-leave-card li::before { display: inline-block; width: 10px; height: 3px; margin: 0 10px 3px 0; border-radius: 2px; background: #141414; content: ""; }
.kemmy-leave-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.kemmy-leave-stay {
  min-height: 50px;
  padding: 0 24px;
  border: 2px solid #141414;
  border-radius: 999px;
  color: #141414;
  background: #f9b616;
  box-shadow: 3px 4px 0 #141414;
  font: 700 15px/1 Poppins, sans-serif;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.kemmy-leave-stay:hover { transform: rotate(-3deg) translateY(-2px); }
.kemmy-leave-stay:focus-visible, .kemmy-leave-go:focus-visible { outline: 3px solid #141414; outline-offset: 3px; }
.kemmy-leave-go { padding: 8px 4px; color: #141414; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .kemmy-leave, .kemmy-leave-card { transition: none; } }

/* --- A saved cart, noted on the other pages ----------------------------- */
.kemmy-cart-note {
  position: fixed;
  z-index: 9000;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  max-width: calc(100vw - 32px);
  border: 2px solid #141414;
  border-radius: 999px;
  background: #fffdf6;
  box-shadow: 3px 4px 0 #141414;
  font: 500 14px/1.2 Poppins, sans-serif;
  transform: translateY(140%);
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1);
}
.kemmy-cart-note.is-open { transform: none; }
.kemmy-cart-note a { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 7px; color: #141414; text-decoration: none; }
.kemmy-cart-note a b { display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: 50%; color: #f9b616; background: #141414; font-weight: 700; }
.kemmy-cart-note em { padding: 7px 12px; border-radius: 999px; background: #f9b616; font-style: normal; font-weight: 700; white-space: nowrap; }
.kemmy-cart-note button { width: 34px; height: 34px; margin-right: 4px; border: 0; border-radius: 50%; color: #141414; background: transparent; font-size: 20px; cursor: pointer; }
@media (max-width: 480px) { .kemmy-cart-note span { display: none; } }
.kemmy-dom-total { border-top-style: solid; border-left-style: solid; }
.kemmy-service-steps li { border-top-style: solid !important; }

/* the call button lies in a row */
a.kemmy-call-btn { flex-direction: row !important; justify-content: flex-start !important; }
a.kemmy-call-btn > * { flex: none; position: static !important; }
/* the partner rows use the full width */
.kemmy-clients-inner { width: 100%; }
/* Envoy: its window sits in a stage as tall as the phones' */
.kemmy-app-desk-stage { position: relative; flex: 1 0 380px; overflow: hidden; border-radius: 22px 22px 0 0; }
.kemmy-app-desk-stage .kemmy-app-desk { position: absolute; top: 58px; left: 9%; width: 124%; margin: 0; }
@media (max-width: 767.98px) { .kemmy-app-desk-stage { flex-basis: 300px; } .kemmy-app-desk-stage .kemmy-app-desk { top: 40px; width: 130%; } }
.kemmy-clients { width: 100%; box-sizing: border-box; align-self: stretch; }
.kemmy-leave-card li { display: flex; align-items: baseline; gap: 10px; } .kemmy-leave-card li b { margin-left: auto; white-space: nowrap; }
.kemmy-dom-flag-name { display: inline-block; }
.kemmy-dom-list .kemmy-dom-gone { padding-top: 10px; padding-bottom: 10px; box-shadow: none; }
.kemmy-dom-list .kemmy-dom-gone .kemmy-dom-name { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 16px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.kemmy-dom-list .kemmy-dom-gone .kemmy-dom-name b { font-size: inherit; }
@media (max-width: 767.98px) { .kemmy-dom-list .kemmy-dom-gone { padding: 9px 14px 9px 54px; } }

/* --- Blog cards written by the dashboard: a cover picture, linked ------- */
a.kemmy-post-art { display: block; overflow: hidden; text-decoration: none; }
.kemmy-post-art.has-cover { background: #141414; }
.kemmy-post-art.has-cover .kemmy-pan { position: absolute; inset: 0; overflow: hidden; border-radius: 18px 18px 0 0; }
.kemmy-post-art.has-cover .kemmy-pan img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s ease; }
.kemmy-post-card:hover .kemmy-post-art.has-cover img { transform: scale(1.04); }
.kemmy-post-card h3 a { color: inherit; text-decoration: none; }
.kemmy-post-card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- Post body blocks from the dashboard composer ---------------------- */
.kemmy-post-page .kemmy-post-body h3 { margin: 34px 0 12px; font-size: clamp(19px, 2vw, 23px); }
.kemmy-post-page .kemmy-post-body h4 { margin: 30px 0 10px; color: #141414; font: 700 14px/1.3 Poppins, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.kemmy-post-page .kemmy-post-body :is(ul, ol):not(.kemmy-post-checks) { margin: 0 0 24px; padding-left: 1.3em; }
.kemmy-post-page .kemmy-post-body :is(ul, ol):not(.kemmy-post-checks) li { margin-bottom: 8px; padding-left: 4px; }
.kemmy-post-page .kemmy-post-body ol li::marker { color: #b07d05; font-weight: 700; }
.kemmy-post-page .kemmy-post-body hr { height: 0; margin: 44px 0; border: 0; border-top: 2px solid #141414; }
.kemmy-post-figure { margin: 34px 0; }
.kemmy-post-figure img { display: block; width: 100%; height: auto; border: 2px solid #141414; border-radius: 18px; box-shadow: 4px 5px 0 #141414; }
.kemmy-post-figure figcaption { margin-top: 14px; color: #6b665c; font-size: 13px; text-align: center; }
.kemmy-post-page .kemmy-post-body > p > a:not(.kemmy-post-button), .kemmy-post-page .kemmy-post-body li a { color: #8a5a00; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a.kemmy-post-button { display: inline-flex; align-items: center; min-height: 50px; padding: 0 26px; border: 2px solid #141414; border-radius: 999px; color: #141414; background: #f9b616; box-shadow: 4px 5px 0 #141414; font: 700 16px/1 Poppins, sans-serif; text-decoration: none; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s ease; }
a.kemmy-post-button:hover { transform: rotate(-3deg) translateY(-2px); box-shadow: 6px 8px 0 #141414; }
.kemmy-post-note > div > b:first-child { display: block; margin-bottom: 4px; }

/* --- Journal sign-up: the answer shows under the field ----------------- */
.kemmy-blog-form { position: relative; overflow: visible; }
.kemmy-blog-form button { border-radius: 0 999px 999px 0; }
.kemmy-blog-form.is-busy button { opacity: .7; cursor: progress; }
.kemmy-blog-form-note { position: absolute; top: calc(100% + 16px); left: 0; right: 0; margin: 0; padding: 12px 16px; border: 2px solid #141414; border-radius: 14px; color: #141414; background: #e8f5e1; box-shadow: 3px 4px 0 #141414; font: 600 14px/1.45 Poppins, sans-serif; }
.kemmy-blog-form.is-error .kemmy-blog-form-note { color: #fff; background: #c9302c; }
.kemmy-blog-sub:has(.kemmy-blog-form-note:not([hidden])) { padding-bottom: clamp(96px, 10vw, 120px); }
@media (max-width: 680px) { .kemmy-blog-form button { border-radius: 0 0 20px 20px; } }

/* --- 404 ---------------------------------------------------------------- */
.kemmy-404-hero { position: relative; overflow: hidden; }
.kemmy-404-hero::after { content: none !important; }
.kemmy-404-hero h1 { position: relative; z-index: 1; }
.kemmy-404-lede { position: relative; z-index: 1; max-width: 560px; margin: 22px 0 0; color: rgba(255, 248, 231, .78); font: 400 clamp(16px, 1.5vw, 19px)/1.6 Poppins, sans-serif; }
.kemmy-404-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.kemmy-404-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 26px; border: 2px solid #fffdf6; border-radius: 999px; color: #fffdf6; font: 700 16px/1 Poppins, sans-serif; text-decoration: none; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s ease; }
.kemmy-404-btn.is-main { border-color: #141414; color: #141414; background: #f9b616; box-shadow: 4px 5px 0 #fffdf6; }
.kemmy-404-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kemmy-404-btn:hover { transform: rotate(-3deg) translateY(-2px); }
.kemmy-404-num { position: absolute; right: clamp(-10px, 2vw, 40px); bottom: -.18em; z-index: 0; color: transparent; font: 800 clamp(150px, 26vw, 380px)/1 Boldonse, sans-serif; letter-spacing: -.04em; -webkit-text-stroke: 2px rgba(249, 182, 22, .55); transform: rotate(-6deg); pointer-events: none; }
.kemmy-404-links { max-width: 1240px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 64px); }
.kemmy-404-links ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.kemmy-404-links a { position: relative; display: grid; gap: 6px; min-height: 124px; padding: 22px 56px 22px 22px; border: 2px solid #141414; border-radius: 20px; color: #141414; background: #fffdf6; box-shadow: 4px 5px 0 #141414; text-decoration: none; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), background-color .2s ease; }
.kemmy-404-links li:nth-child(3n+2) a { background: #fff4d6; }
.kemmy-404-links b { font: 700 20px/1.15 Boldonse, sans-serif; text-transform: uppercase; }
.kemmy-404-links span { color: #5b5750; font: 400 14px/1.5 Poppins, sans-serif; }
.kemmy-404-links svg { position: absolute; top: 22px; right: 20px; width: 22px; height: 22px; fill: none; stroke: #141414; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
.kemmy-404-links a:hover { background: #f9b616; transform: rotate(-1.5deg) translateY(-3px); }
.kemmy-404-links a:hover svg { transform: translateX(4px); }
@media (max-width: 900px) { .kemmy-404-links ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kemmy-404-links ul { grid-template-columns: 1fr; } .kemmy-404-links a { min-height: 0; } }
.kemmy-404-num { color: rgba(249, 182, 22, .13); -webkit-text-stroke: 0; }
@media (max-width: 560px) { .kemmy-404-num { right: -12px; bottom: auto; top: 70px; font-size: 150px; } }