/* Design fixes layered on top of the Framer export. Loaded last on every page.
   Class names (framer-xxxx) come from the export. They are hashes of Framer
   layer ids, so they survive re-publishing as long as the layer still exists;
   rules avoid page-root classes, which do change. */

/* ------------------------------------------------------------------------
 * Framer adds a "Made in Framer" badge to sites published on its free plan.
 * --------------------------------------------------------------------- */
#__framer-badge-container {
  display: none !important;
}

/* ------------------------------------------------------------------------
 * Nav: dark tone over light backgrounds (set by fixes.js)
 * Mirrors the nav's own "black" variant: dark logo, links and menu icon.
 * --------------------------------------------------------------------- */
nav.framer-0cDpM .framer-1lnm3u8 p.framer-text,
nav.framer-0cDpM dotlottie-player,
nav.framer-0cDpM .framer-trsnxc > div {
  transition: color 0.35s ease, filter 0.35s ease, background-color 0.35s ease;
}
html[data-nav-tone="dark"] nav.framer-0cDpM .framer-1lnm3u8 p.framer-text {
  color: rgba(17, 17, 17, 0.78) !important;
}
html[data-nav-tone="dark"] nav.framer-0cDpM dotlottie-player {
  filter: brightness(0) opacity(0.85);
}
html[data-nav-tone="dark"] nav.framer-0cDpM .framer-trsnxc > div {
  background-color: rgb(17, 17, 17) !important;
}

/* Phone bar (white-Phone variant): the full-width glass refracts whatever
   text scrolls underneath right next to the logo ("AMISHAotyping for...").
   A light frost keeps the glass look but makes the bar readable. */
nav.framer-0cDpM.framer-v-ad2bmr .framer-9fwqef {
  -webkit-backdrop-filter: blur(10px) !important; /* Framer sets blur(0) inline */
  backdrop-filter: blur(10px) !important;
}
/* Desktop pill: same problem over text-heavy sections (Skills, Experience). */
nav.framer-0cDpM.framer-v-1yysmn5 .framer-9fwqef {
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
}

/* ------------------------------------------------------------------------
 * Nav: phone / tablet menu when open ("white-Phone/Tablet Open" variant)
 * The open sheet was 30% grey glass with white links, unreadable over most
 * of the page and busy over images. Make it a frosted sheet with dark text.
 * --------------------------------------------------------------------- */
nav.framer-0cDpM.framer-v-18pn4tc .framer-9fwqef {
  background-color: rgba(247, 247, 247, 0.9) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
nav.framer-0cDpM.framer-v-18pn4tc .framer-1l4k5xu-container {
  opacity: 0; /* liquid-glass refraction: mirrored ghosts behind the links */
}
nav.framer-0cDpM.framer-v-18pn4tc .framer-1lnm3u8 p.framer-text {
  color: rgba(17, 17, 17, 0.8) !important;
}
nav.framer-0cDpM.framer-v-18pn4tc dotlottie-player {
  filter: brightness(0) opacity(0.85);
}
nav.framer-0cDpM.framer-v-18pn4tc .framer-1lytpot,
nav.framer-0cDpM.framer-v-18pn4tc .framer-uiwmsz {
  background-color: rgb(17, 17, 17) !important;
}
/* the "Get in touch" pill needs an edge on the light sheet */
nav.framer-0cDpM.framer-v-18pn4tc .framer-1y5ph6a {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* ------------------------------------------------------------------------
 * Home: "IF YOU [showreel] LIKE / WHAT YOU SEE"
 * The showreel shrinks into a gap between YOU and LIKE that is made of
 * spaces in a 140px line designed at exactly 1440px wide.
 * --------------------------------------------------------------------- */
/* 1200-1439: scale the line and the video mask with the screen so the
   first line doesn't wrap into "WHAT YOU SEE" / "dive into my work" */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .framer-1rz5o3v p.framer-text {
    --framer-font-size: 9.72vw !important;
    font-size: 9.72vw !important;
  }
  .framer-xm4vhz {
    width: 33.2vw !important;
  }
  .framer-1xp0m6u {
    width: 83.06vw !important;
  }
  /* "dive into my work" is drawn on a canvas at a fixed size and wraps
     below ~1100px of width */
  .framer-1fiphwo-container {
    width: 96% !important;
  }
}
/* tablet: one centred paragraph, so the break moved with the width and gave
   "IF YOU _ LIKE _ WHAT / YOU SEE". Narrow it so it always breaks before WHAT. */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .framer-1rz5o3v {
    width: min(94%, 660px) !important;
  }
}

/* ------------------------------------------------------------------------
 * Home hero: the 3D shape is a 16MB Lottie, so show its first frame as a
 * poster until the animation is playing (fixes.js adds .hero-ready).
 * --------------------------------------------------------------------- */
.framer-8ny7nx-container::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* same fit as the Lottie svg (preserveAspectRatio="xMidYMid slice");
     the poster has the layer's 154.8% scale baked in */
  background: url("/_custom/hero-poster.webp") center / cover no-repeat;
  transition: opacity 0.6s ease;
}
html.hero-ready .framer-8ny7nx-container::before {
  opacity: 0;
}
html.hero-ready .framer-8ny7nx-container svg {
  animation: hero-fade-in 0.6s ease;
}
@keyframes hero-fade-in {
  from {
    opacity: 0;
  }
}

/* ------------------------------------------------------------------------
 * Home hero: the 3D shape's box.
 * On desktop it was pinned 560px from the left and 606px from the right, so
 * its width was "whatever is left": 274px at 1440 (as designed), a 114px
 * sliver at 1280, 34px at 1200, and 754px at 1920 where the shape blew up
 * and got cropped. On tablet it was 88% wide and covered the headings.
 * Keep the 1440 design (274 x 357, centred at 48.4%), scaling gently.
 * --------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .framer-xkxbq0 {
    width: clamp(240px, 19.03vw, 420px) !important;
    height: calc(clamp(240px, 19.03vw, 420px) * 1.303) !important;
    left: calc(48.4% - clamp(120px, 9.515vw, 210px)) !important;
    right: auto !important;
    aspect-ratio: auto !important;
  }
}
/* the Lottie inside has its own fixed height (357px desktop, 747px tablet);
   let it follow the box */
@media (min-width: 810px) {
  .framer-xkxbq0 .framer-8ny7nx-container {
    height: 100% !important;
  }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  .framer-xkxbq0 {
    width: 32vw !important;
    height: calc(32vw * 1.303) !important;
    left: calc(50% - 16vw) !important;
    top: 200px !important;
    right: auto !important;
    aspect-ratio: auto !important;
  }
}

/* ------------------------------------------------------------------------
 * Home hero (phone layout, up to 809px). The sky was a fixed 390px column,
 * so large phones, iPad mini and narrow windows got a strip of sky with
 * grey on both sides and white "PRODUCT DESIGNER" text over the grey.
 * --------------------------------------------------------------------- */
@media (max-width: 809.98px) {
  .framer-hln6te {
    width: 100% !important;
  }
  /* "PRODUCT DESIGNER" (56px) sits in a column 68% of the screen wide and
     broke as "DESIGNE / R" on phones narrower than ~420px. */
  .framer-z61j8w p.framer-text {
    --framer-font-size: min(56px, 13vw) !important;
    font-size: min(56px, 13vw) !important;
  }  /* The 3D shape fills a full-width, 399px-tall box in "cover" mode, so on
     wider phone layouts (big phones, iPad mini) it grew over both headings.
     Keep the box at most phone-sized and centred. */
  .framer-xkxbq0 {
    width: min(100%, 420px) !important;
    left: calc(50% - min(50%, 210px) - 10px) !important;
  }
}

/* ------------------------------------------------------------------------
 * Home: project grid
 * On tablet/desktop the cards ran edge to edge (rounded corners touching
 * the screen). Give the grid the same 20px gutter as the REAL / CONCEPT /
 * LAB row above it and the hero text.
 * --------------------------------------------------------------------- */
@media (min-width: 810px) {
  .framer-UtTYY .framer-1yjdgsv {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
}

/* ------------------------------------------------------------------------
 * Home: "Transforming ideas into meaningful experiences"
 * On desktop the title splits left/right and the Skills / Services /
 * Experience cards scroll up between the halves. On tablet and phone the
 * title stays centred and sticky, so the cards only cover its middle and
 * letters stick out either side. Let it scroll away above the card stack.
 * --------------------------------------------------------------------- */
.framer-13vn9nv, /* tablet title */
.framer-4wl3fv /* phone title */ {
  position: relative !important;
  top: auto !important;
}

/* ------------------------------------------------------------------------
 * Home: "I swear I didn't bribe them!" (testimonials marquee)
 * White at 90% on a near-white sky; a soft sky-blue glow gives the letters
 * an edge without changing their colour.
 * --------------------------------------------------------------------- */
.framer-1wwtzjy p.framer-text {
  text-shadow: 0 2px 6px rgba(60, 110, 170, 0.18), 0 8px 40px rgba(60, 110, 170, 0.28);
}

/* ------------------------------------------------------------------------
 * VibeNear (phone): "Sometimes you don't know exactly what you're looking
 * for. You just want to see what's around you, ..."
 * The paragraph keeps its 48px desktop size inside a 134px clipping window,
 * so phones only showed two and a half lines, cut through the letters.
 * Let the window fit the text at a phone size and give the map the rest of
 * the pinned screen.
 * --------------------------------------------------------------------- */
@media (max-width: 809.98px) {
  .framer-xgqn8o {
    padding-top: 76px !important; /* clear the nav bar */
    gap: 20px !important;
    justify-content: flex-start !important;
  }
  .framer-2ban1f-container,
  .framer-2ban1f-container .framer-4PuzO {
    height: auto !important;
  }
  .framer-2ban1f-container .framer-1h1j82x {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
  }
  .framer-2ban1f-container .framer-1h1j82x .framer-text {
    --framer-font-size: 28px !important;
    font-size: 28px !important;
  }
  .framer-xgqn8o .framer-1jojjwk {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .framer-xgqn8o .framer-1jojjwk .framer-44ai5d-container {
    height: 100% !important;
  }
}