/* =============================================================
   BAKERY — Custom Design System
   ============================================================= */

/* ---- Custom Font ---- */
@font-face {
  font-family: "The Unlimited Sans";
  src: url("../fonts/TheUnlimitedSans-Regular.eot");
  src:
    url("../fonts/TheUnlimitedSans-Regular.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/TheUnlimitedSans-Regular.woff2") format("woff2"),
    url("../fonts/TheUnlimitedSans-Regular.woff") format("woff"),
    url("../fonts/TheUnlimitedSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "The Unlimited Sans";
  src: url("../fonts/TheUnlimitedSans-Medium.eot");
  src:
    url("../fonts/TheUnlimitedSans-Medium.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/TheUnlimitedSans-Medium.woff2") format("woff2"),
    url("../fonts/TheUnlimitedSans-Medium.woff") format("woff"),
    url("../fonts/TheUnlimitedSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "The Unlimited Sans";
  src: url("../fonts/TheUnlimitedSans-Bold.eot");
  src:
    url("../fonts/TheUnlimitedSans-Bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/TheUnlimitedSans-Bold.woff2") format("woff2"),
    url("../fonts/TheUnlimitedSans-Bold.woff") format("woff"),
    url("../fonts/TheUnlimitedSans-Bold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "The Unlimited Sans";
  src: url("../fonts/TheUnlimitedSans-Heavy.eot");
  src:
    url("../fonts/TheUnlimitedSans-Heavy.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/TheUnlimitedSans-Heavy.woff2") format("woff2"),
    url("../fonts/TheUnlimitedSans-Heavy.woff") format("woff"),
    url("../fonts/TheUnlimitedSans-Heavy.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "The Unlimited Sans";
  src: url("../fonts/TheUnlimitedSans-Black.eot");
  src:
    url("../fonts/TheUnlimitedSans-Black.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/TheUnlimitedSans-Black.woff2") format("woff2"),
    url("../fonts/TheUnlimitedSans-Black.woff") format("woff"),
    url("../fonts/TheUnlimitedSans-Black.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---- Layout standard ----
   Every section shares the same left/right content edges:
   - --bakery-gutter:        minimum space between content and the viewport edge
   - --bakery-container:     maximum content width on large screens
   - --bakery-edge:          distance from the viewport edge to the content edge;
                             use as padding-inline on full-width sections
   - --bakery-content-width: width for boxed blocks centered with margin auto
   - --bakery-container-narrow: maximum width for narrow centered blocks (forms)
   Full-bleed media (hero, decorative cut-outs) may ignore the edges; text
   and boxes may not.
   Vertical rhythm: each section sits --bakery-section-gap below the previous
   one (margin-top; the footer uses it as padding-top). Related blocks inside
   a section are --bakery-block-gap apart. */
:root {
  --bakery-gutter: clamp(16px, 4vw, 64px);
  --bakery-container: 1600px;
  --bakery-container-narrow: 1080px;
  --bakery-edge: max(var(--bakery-gutter), calc((100% - var(--bakery-container)) / 2));
  --bakery-content-width: min(100% - 2 * var(--bakery-gutter), var(--bakery-container));
  --bakery-section-gap: clamp(48px, 6vw, 96px);
  --bakery-block-gap: calc(var(--bakery-section-gap) / 2);
}

h2,
h3,
h4,
h5,
h6 {
  font-family: "The Unlimited Sans", var(--tj-ff-heading);
}

.bakery-about-hero h1 {
  font-family: "The Unlimited Sans", var(--tj-ff-heading);
  font-weight: 800;
}

html {
  overflow-x: hidden;
}

body {
  position: relative;
  overflow-x: hidden;
  isolation: isolate;
}

html::before,
body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  will-change: transform;
  transform: translateZ(0);
}

/* Fixed page background as its own layer (avoids repainting on every scroll frame) */
html::before {
  z-index: -3;
  background-color: #0a060a;
  background-image:
    radial-gradient(circle at 52% 8%, rgba(244, 121, 191, 0.92) 0, rgba(238, 98, 177, 0.78) 20%, rgba(238, 98, 177, 0) 44%),
    radial-gradient(circle at 60% 34%, rgba(255, 158, 76, 0.88) 0, rgba(255, 186, 118, 0.72) 16%, rgba(255, 186, 118, 0.08) 34%, rgba(255, 186, 118, 0) 44%),
    radial-gradient(circle at 84% 56%, rgba(230, 56, 124, 0.78) 0, rgba(230, 56, 124, 0.42) 22%, rgba(230, 56, 124, 0) 43%),
    radial-gradient(circle at 18% 74%, rgba(133, 86, 230, 0.88) 0, rgba(111, 73, 204, 0.56) 24%, rgba(111, 73, 204, 0.08) 45%, rgba(111, 73, 204, 0) 56%),
    radial-gradient(circle at 39% 73%, rgba(4, 56, 92, 0.97) 0, rgba(3, 45, 76, 0.95) 24%, rgba(4, 18, 38, 0.9) 40%, rgba(4, 18, 38, 0.45) 53%, rgba(4, 18, 38, 0) 66%),
    radial-gradient(circle at 46% 86%, rgba(0, 0, 0, 0.86) 0, rgba(0, 0, 0, 0.52) 28%, rgba(0, 0, 0, 0) 58%),
    linear-gradient(180deg, #f07abd 0%, #f9b585 30%, #ff9452 44%, #cf3f82 62%, #532d9c 78%, #0a3a60 90%, #020203 100%);
}

body::before {
  z-index: -2;
  background:
    radial-gradient(circle at 16% 78%, rgba(130, 96, 235, 0.46) 0, rgba(130, 96, 235, 0.14) 22%, rgba(130, 96, 235, 0) 34%),
    radial-gradient(circle at 74% 30%, rgba(255, 178, 106, 0.26) 0, rgba(255, 178, 106, 0.06) 16%, rgba(255, 178, 106, 0) 28%),
    radial-gradient(circle at 86% 66%, rgba(228, 58, 126, 0.26) 0, rgba(228, 58, 126, 0) 24%),
    radial-gradient(circle at 43% 70%, rgba(6, 62, 102, 0.35) 0, rgba(6, 62, 102, 0) 30%),
    radial-gradient(circle at 44% 84%, rgba(0, 0, 0, 0.44) 0, rgba(0, 0, 0, 0) 34%);
  filter: blur(48px) saturate(150%);
  transform: translateZ(0) scale(1.12);
}

body::after {
  z-index: -1;
  opacity: 0.38;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.55' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n1)' opacity='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n2)' opacity='1'/%3E%3C/svg%3E");
  background-size: 110px 110px, 72px 72px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  filter: contrast(142%) brightness(86%);
}

#smooth-wrapper,
#smooth-content,
main {
  position: relative;
  z-index: 1;
}

/* ---- Custom Cursor: Film Strip ---- */
.cb-cursor::before {
  display: none !important;
}

.cb-cursor {
  width: 48px;
  height: 65px;
  background: url("../images/cursor-film.webp") no-repeat center / contain;
  mix-blend-mode: normal;
  opacity: 1;
  pointer-events: none;
  margin-top: 4px;
  margin-left: 4px;
}

.cb-cursor.-visible {
  opacity: 1;
}

.cb-cursor.-pointer {
  opacity: 0.85;
}

.cb-cursor.-hidden {
  opacity: 0;
}

.cb-cursor .cb-cursor-text {
  display: none !important;
}

/* ---- Pill Navigation ---- */
.bakery-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  padding: 28px 0;
  pointer-events: none;
}

.bakery-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(80, 60, 40, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 50px;
  padding: 8px 10px;
  pointer-events: all;
}

.bakery-nav a {
  color: #fff;
  text-decoration: none;
  font-family: var(--tj-ff-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 20px;
  border-radius: 50px;
  transition:
    background 0.2s,
    color 0.2s;
  white-space: nowrap;
}

.bakery-nav a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.bakery-nav .bakery-nav-cta {
  background: rgba(220, 215, 210, 0.92);
  color: #1a1410;
  font-weight: 600;
  padding: 9px 22px;
}

.bakery-nav .bakery-nav-cta:hover {
  background: #fff;
  color: #000;
}

/* ---- Hero Section ---- */
.bakery-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}

/* Background Image */
.bakery-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.bakery-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* Subtle gradient at the bottom for readability */
.bakery-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.35) 100%
  ); */
}

/* Collage figure — floating between hero and about */
.bakery-collage-floater {
  position: relative;
  height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-left: var(--bakery-edge);
  z-index: 10;
  pointer-events: none;
}

.bakery-collage-floater img {
  margin-top: -238px;
  width: auto;
  /* max-height: 400px; */
  display: block;
  user-select: none;
  pointer-events: none;
}

/* Brand name — centered */
.bakery-hero-brand {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--bakery-gutter);
  line-height: 1;
}

.bakery-hero-brand img {
  width: clamp(220px, 34vw, 650px);
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  body {
    background-attachment: scroll;
    background-size: cover;
  }

  .bakery-nav a {
    font-size: 11px;
    padding: 8px 14px;
  }

  .bakery-collage-floater img {
    margin-top: -240px;
    max-width: min(70vw, 480px);
  }

  .bakery-hero-brand img {
    width: clamp(180px, 48vw, 340px);
  }

  /* .bakery-hero-bg img {
    object-position: center top;
  } */

  .bakery-hero {
    height: 70vh;
    min-height: 400px;
  }
  .bakery-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right top;
  }

  .bakery-flipbook-gutter {
    display: none;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: calc(100% - 2.5em);
    z-index: 30;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease 0.15s;
    background: linear-gradient( 90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 36%, rgba(0, 0, 0, 0.22) 50%, rgba(0, 0, 0, 0.1) 64%, rgba(0, 0, 0, 0) 100% );
  }
}

@media (max-width: 480px) {
  body::after {
    opacity: 0.34;
    background-size:
      92px 92px,
      60px 60px;
  }

  .bakery-nav {
    gap: 2px;
    padding: 6px 8px;
  }

  .bakery-nav a {
    padding: 7px 10px;
    font-size: 10px;
  }
}

/* ---- Flipbook Section ---- */
.bakery-flipbook-section {
  position: relative;
  margin-top: var(--bakery-section-gap);
  padding: 0 var(--bakery-edge);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.bakery-flipbook-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 50px;
  background: linear-gradient(165deg, #fcf5ea 0%, #f5f4f2 60%, #edecea 100%);
  border-radius: 6px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.1),
    0 24px 60px rgba(0, 0, 0, 0.14),
    0 48px 80px -12px rgba(0, 0, 0, 0.12);
  overflow: visible;
  position: relative;
}

.bakery-projects-content-area .bakery-flipbook-wrap {
  background: transparent;
  box-shadow: none;
}

/* Page stack thickness — left side */
.bakery-flipbook-wrap::before {
  content: "";
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-100%);
  width: 50%;
  height: calc(100% - 104px);
  z-index: 0;
  /* box-shadow:
    inset -4px 0 8px -2px rgba(0, 0, 0, 0.08),
    inset 3px 0 6px -2px rgba(0, 0, 0, 0.04); */
  pointer-events: none;
  border-radius: 2px;
}

/* Page stack thickness — right side */
.bakery-flipbook-wrap::after {
  content: "";
  position: absolute;
  top: 52px;
  right: 50%;
  transform: translateX(100%);
  width: 50%;
  height: calc(100% - 104px);
  z-index: 0;
  /* box-shadow:
    inset 4px 0 8px -2px rgba(0, 0, 0, 0.08),
    inset -3px 0 6px -2px rgba(0, 0, 0, 0.04); */
  pointer-events: none;
  border-radius: 2px;
}

/* Smooth "slide into place" when the book re-centers itself between the
   closed cover (a lone page) and an open two-page spread, instead of an
   instant jump (see syncCenter() in main.js, which drives this via
   transform: translateX()). */
.bakery-flipbook--animate-center {
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Center-fold shadow: a soft gradient across the gutter, only visible
   while two real pages are facing each other (hidden while the cover
   sits alone / the book is "closed"). */
.bakery-flipbook-gutter {
  /* display: none; */
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: calc(100% - 6.2em);
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease 0.15s;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.1) 36%,
    rgba(0, 0, 0, 0.22) 50%,
    rgba(0, 0, 0, 0.1) 64%,
    rgba(0, 0, 0, 0) 100%
  );
}

.bakery-flipbook-wrap.has-gutter .bakery-flipbook-gutter {
  opacity: 1;
}

/* While a page is actively flipping, it can pass in front of or behind
   this fixed overlay depending on turn.js's own z-index juggling for that
   animation — so instead of fighting that, just step out of the way for
   the duration of the flip. */
.bakery-flipbook-wrap.is-flipping .bakery-flipbook-gutter {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.bakery-flipbook .page {
  background: white;
  overflow: hidden;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.04);
}

.bakery-flipbook-page-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Corner "flip page" affordance — reserved purely for turning the page,
   does not trigger the page link's navigation (see main.js) */
.bakery-flipbook-flip-hint {
  position: absolute;
  bottom: 0;
  width: 90px;
  height: 90px;
  max-width: 32%;
  max-height: 32%;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 12px;
  color: #fff;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.25s ease;
}

.bakery-flipbook-flip-hint:hover,
.bakery-flipbook-flip-hint:focus-visible {
  opacity: 1;
}

/* The hint defaults to white, sized for sitting over a dark video/image
   page. On the light cream pages (the covers and the text side of
   every spread) that same white text is unreadable, so darken it
   there instead. */
.bakery-flipbook-cover .bakery-flipbook-flip-hint,
.bakery-flipbook-page--text .bakery-flipbook-flip-hint {
  color: #12100d;
}

.bakery-flipbook-flip-hint svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.bakery-flipbook-flip-hint-text {
  font-family: "The Unlimited Sans", var(--tj-ff-heading);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
  white-space: nowrap;
}

.bakery-flipbook-flip-hint--next {
  right: 0;
  justify-content: flex-end;
}

.bakery-flipbook-flip-hint--prev {
  left: 0;
  justify-content: flex-start;
}

/* Only show the corner that matches the page's actual flip direction */
.bakery-flipbook .even .bakery-flipbook-flip-hint--next,
.bakery-flipbook .odd .bakery-flipbook-flip-hint--prev {
  display: none;
}

@media (max-width: 767px) {
  .bakery-flipbook-flip-hint {
    width: 60px;
    height: 60px;
    padding: 8px;
  }

  .bakery-flipbook-flip-hint-text {
    font-size: 8px;
  }
}

/* Left pages (even): image/video covers the full page */
.bakery-flipbook .even:not(.bakery-flipbook-page):not(.bakery-flipbook-cover) img,
.bakery-flipbook .even:not(.bakery-flipbook-page):not(.bakery-flipbook-cover) video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Right pages (odd): image/video 93% centered */
.bakery-flipbook .odd:not(.bakery-flipbook-page):not(.bakery-flipbook-cover) img,
.bakery-flipbook .odd:not(.bakery-flipbook-page):not(.bakery-flipbook-cover) video {
  width: 93%;
  height: 93%;
  object-fit: cover;
  display: block;
  margin: auto;
  margin-top: 5%;
}

/* Fix: prevent background bleed on hover/shadow areas */
.bakery-flipbook .turn-page-wrapper,
.bakery-flipbook .shadow {
  background: transparent !important;
}

/* ===================================================================
   Editorial magazine-style flipbook pages (cover + project spreads)
   =================================================================== */

.bakery-flipbook .bakery-flipbook-page {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fdfcf9;
  overflow: hidden;
}

.bakery-flipbook-masthead {
  position: absolute;
  top: 4%;
  left: 6%;
  font-family: "The Unlimited Sans", var(--tj-ff-heading);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b7b0a3;
  z-index: 2;
}

.bakery-flipbook-masthead--right {
  left: auto;
  right: 6%;
  color: rgba(255, 255, 255, 0.75);
}

/* --- Text page ---
   Padding lives on an absolutely-positioned inner wrapper, not on the
   .page element itself: turn.js measures that element's jQuery
   .width()/.height() (content-box) to size its corner-drag hit zone, and
   with global box-sizing:border-box any padding here would shrink that
   measurement below the element's real on-screen size — silently
   breaking the flip-corner hit test. */
.bakery-flipbook-page-inner {
  position: absolute;
  inset: 0;
  padding: 11% 9% 8%;
  display: flex;
  flex-direction: column;
}

.bakery-flipbook-page-index {
  position: absolute;
  top: 3%;
  right: 6%;
  font-family: "The Unlimited Sans", var(--tj-ff-heading);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #b7b0a3;
}

.bakery-flipbook-kicker {
  display: inline-block;
  align-self: flex-start;
  background: var(--tj-color-theme-primary, #de1a39);
  color: #fff;
  font-family: "The Unlimited Sans", var(--tj-ff-heading);
  font-size: clamp(9px, 1.1vw, 12px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  margin-top: 14%;
  margin-bottom: 14px;
}

.bakery-flipbook-headline {
  font-family: "The Unlimited Sans", var(--tj-ff-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(18px, 3.6vw, 34px);
  line-height: 1.02;
  color: #12100d;
  margin: 0 0 16px;
}

.bakery-flipbook-rule {
  width: 42px;
  height: 3px;
  background: #12100d;
  margin-bottom: 18px;
  flex-shrink: 0;
}

.bakery-flipbook-meta {
  list-style: none;
  margin: 0 0 auto;
  padding: 0;
  display: grid;
  gap: 10px;
}

.bakery-flipbook-meta li {
  font-family: var(--tj-ff-body);
  font-size: clamp(11px, 1.3vw, 13px);
  color: #4a463f;
  border-top: 1px solid #e7e1d5;
  padding-top: 8px;
}

.bakery-flipbook-meta li span {
  display: block;
  font-family: "The Unlimited Sans", var(--tj-ff-heading);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b7b0a3;
  margin-bottom: 3px;
}

.bakery-flipbook-view-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  flex-shrink: 0;
  font-family: "The Unlimited Sans", var(--tj-ff-heading);
  font-size: clamp(10px, 1.2vw, 13px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #12100d;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.bakery-flipbook-view-link i {
  font-style: normal;
  display: inline-block;
  transition: transform 0.2s ease;
}

.bakery-flipbook-view-link:hover i {
  transform: translateX(4px);
}

/* --- Media page --- */
.bakery-flipbook .bakery-flipbook-page--media {
  background: #0c0c0c;
}

.bakery-flipbook-page--media .bakery-flipbook-page-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.bakery-flipbook-page--media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Cover page --- */
.bakery-flipbook .bakery-flipbook-cover {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fdfcf9;
}

/* See .bakery-flipbook-page-inner above for why padding is isolated here
   instead of on the .page element turn.js measures. */
.bakery-flipbook-cover-inner {
  position: absolute;
  inset: 0;
  padding: 6% 6% 5%;
  display: flex;
  flex-direction: column;
}

.bakery-flipbook-cover-topbar {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--tj-ff-body);
  font-size: clamp(7px, 0.9vw, 10px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a948a;
  border-bottom: 1px solid #e7e1d5;
  padding-bottom: 10px;
  margin-bottom: 4%;
  flex-shrink: 0;
}

.bakery-flipbook-cover-masthead {
  text-align: center;
  margin: 2% 0;
  flex-shrink: 0;
}

.bakery-flipbook-cover-masthead img {
  height: clamp(20px, 5.4vw, 46px);
  width: auto;
  margin: 0 auto;
  display: block;
}

.bakery-flipbook-cover-tagline {
  text-align: center;
  font-family: "The Unlimited Sans", var(--tj-ff-heading);
  font-size: clamp(8px, 1vw, 11px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9a948a;
  margin-bottom: 4%;
  flex-shrink: 0;
}

.bakery-flipbook-cover-media {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 2px;
  overflow: hidden;
}

.bakery-flipbook-cover-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bakery-flipbook-cover-headline {
  position: absolute;
  left: 5%;
  bottom: 5%;
  right: 5%;
  color: #fff;
  font-family: "The Unlimited Sans", var(--tj-ff-heading);
  font-weight: 800;
  font-size: clamp(20px, 4.6vw, 42px);
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.bakery-flipbook-cover-headline span {
  display: block;
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 0.9;
}

.bakery-flipbook-cover-strip {
  display: flex;
  gap: 7px;
  margin-top: 4%;
  flex-shrink: 0;
}

.bakery-flipbook-cover-strip a {
  flex: 1;
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  overflow: hidden;
}

.bakery-flipbook-cover-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92);
}

.bakery-flipbook-cover-strip span {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  font-family: "The Unlimited Sans", var(--tj-ff-heading);
  font-size: clamp(6px, 0.85vw, 8px);
  line-height: 1.15;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
}

/* --- Issue covers (project-tab flipbooks) ---
   turn.js's double-page pagination always treats page 1 as a lone
   right-hand page (pairs run [2,3], [4,5]…, never [1,2]) — the same
   convention a real book's opening leaf follows. Each project-tab
   flipbook opens with a cover that takes that lone slot, so every
   project's text and media pages land together as a real spread.
   The cover reuses the home cover's layout; each tab is its own "issue"
   with an accent colour, a project-count sticker and a poster mosaic. */
.bakery-flipbook-cover--issue {
  --cover-accent: #ff5a00;
  --cover-thumb-ratio: 1 / 1;
}

.bakery-flipbook-cover--tv {
  --cover-thumb-ratio: 5 / 4;
}

.bakery-flipbook-cover--digital {
  --cover-accent: #7b46b5;
  --cover-thumb-ratio: 16 / 10;
}

.bakery-flipbook-cover--evento {
  --cover-accent: #e6387c;
  --cover-thumb-ratio: 3 / 4;
}

.bakery-flipbook-cover--outras-marcas {
  --cover-accent: #1f5fbf;
  --cover-thumb-ratio: 4 / 5;
}

/* Spine-colour band along the top edge */
.bakery-flipbook-cover--issue::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.4%;
  background: var(--cover-accent);
}

.bakery-flipbook-cover--issue .bakery-flipbook-cover-topbar span:last-child {
  color: var(--cover-accent);
  font-weight: 700;
}

/* Poster mosaics */
.bakery-flipbook-cover-media--duo,
.bakery-flipbook-cover-media--trio,
.bakery-flipbook-cover-media--stack {
  display: grid;
  gap: 4px;
}

.bakery-flipbook-cover-media--duo {
  grid-template-columns: 2fr 3fr;
}

.bakery-flipbook-cover-media--trio {
  grid-template-columns: repeat(3, 1fr);
}

.bakery-flipbook-cover-media--stack {
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 1fr 1fr;
}

.bakery-flipbook-cover-media--stack img:first-child {
  grid-row: 1 / 3;
}

.bakery-flipbook-cover--issue .bakery-flipbook-cover-media img {
  min-width: 0;
  min-height: 0;
}

/* Posters exported with black bars: zoom until the bars fall outside the frame */
.bakery-flipbook-cover--issue img.is-letterboxed {
  transform: scale(1.18);
}

/* Darkens the foot of the mosaic so the headline stays readable on any poster */
.bakery-flipbook-cover--issue .bakery-flipbook-cover-media::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.62));
  pointer-events: none;
}

.bakery-flipbook-cover--issue .bakery-flipbook-cover-headline {
  z-index: 1;
  font-size: clamp(24px, 5.6vw, 56px);
}

/* Kicker as a label in the issue colour */
.bakery-flipbook-cover--issue .bakery-flipbook-cover-headline span {
  display: table;
  margin-bottom: 0.5em;
  padding: 0.35em 0.6em 0.3em;
  background: var(--cover-accent);
  font-size: 0.3em;
  line-height: 1;
  opacity: 1;
  text-shadow: none;
}

/* Project-count sticker */
.bakery-flipbook-cover-badge {
  position: absolute;
  top: 4%;
  right: 4%;
  z-index: 1;
  width: clamp(46px, 7.2vw, 78px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--cover-accent);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "The Unlimited Sans", var(--tj-ff-heading);
  font-size: clamp(6px, 0.8vw, 9px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  rotate: 12deg;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.bakery-flipbook-cover-badge strong {
  font-size: 3.4em;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 0.95;
}

.bakery-flipbook-cover--issue .bakery-flipbook-cover-strip a {
  aspect-ratio: var(--cover-thumb-ratio);
}

@media (max-width: 767px) {
  .bakery-flipbook-page-inner {
    padding: 13% 8% 9%;
  }

  .bakery-flipbook-kicker {
    margin-top: 16%;
  }

  .bakery-flipbook-cover-strip {
    flex-wrap: wrap;
  }

  .bakery-flipbook-cover-strip a {
    flex-basis: calc(33.33% - 5px);
  }

  /* Issue covers keep one row: up to six thumbnails, sized by their ratio */
  .bakery-flipbook-cover--issue .bakery-flipbook-cover-strip {
    flex-wrap: nowrap;
    gap: 4px;
  }

  .bakery-flipbook-cover--issue .bakery-flipbook-cover-strip a {
    flex-basis: 0;
  }
}

/* VIEW ALL button */
.bakery-flipbook-cta {
  display: block;
  width: 70%;
  padding: 18px 0;
  background: #ff5a00;
  color: #000;
  font-family: "The Unlimited Sans", var(--tj-ff-heading);
  font-size: clamp(28px, 4vw, 88px);
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  letter-spacing: -0.02em;
  margin-top: 50px;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  transition:
    background 0.25s,
    color 0.25s;
  border-radius: 5px;
  line-height: 1.2;
}

.bakery-flipbook-cta:hover {
  background: #7b46b5;
  color: #000;
}

/* CTA + Woman wrapper */
.bakery-flipbook-cta-wrap {
  position: static;
  width: 63%;
  margin-top: 50px;
  z-index: 10;
  flex-shrink: 0;
}

/* Home: the card and the button below it both span the content width */
.bakery-flipbook-section > .bakery-flipbook-wrap,
.bakery-flipbook-section > .bakery-flipbook-cta-wrap {
  width: 100%;
}

.bakery-flipbook-section > .bakery-flipbook-cta-wrap {
  margin-top: var(--bakery-block-gap);
}

/* The section used to end 50px below the button; keep the figure where it was */
.bakery-flipbook-section .bakery-cta-woman {
  bottom: -30px;
}

@media (max-width: 767px) {
  .bakery-flipbook-section > .bakery-flipbook-wrap {
    padding: 12px;
  }
}

.bakery-flipbook-cta-section {
  display: flex;
  justify-content: center;
  padding: 0 var(--bakery-edge);
}

.bakery-flipbook-cta-section .bakery-flipbook-cta-wrap {
  margin-top: 0;
  width: 100%;
}

.studio-gallery-hidden {
  display: none;
}

/* PDF download button (same visual style as .bakery-flipbook-cta, larger) */
.bakery-pdf-download-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.bakery-pdf-download-btn.bakery-flipbook-cta {
  width: 80%;
  margin-top: 0;
  padding: 26px 0;
  font-size: clamp(32px, 4.6vw, 96px);
}

/* Lock lightbox images to the viewport height so no scroll is needed */
.vbox-container {
  overflow-y: hidden;
  padding: 20px 0;
}

.vbox-content {
  min-height: auto;
  height: 100%;
}

.vbox-child img {
  max-height: calc(100vh - 40px);
  max-width: 92vw;
  width: auto;
  object-fit: contain;
}

.bakery-flipbook-cta-wrap .bakery-flipbook-cta {
  width: 100%;
  margin-top: 0;
}

.bakery-cta-woman {
  position: absolute;
  right: 0;
  bottom: -10px;
  height: clamp(650px, 35vw, 880px);
  width: auto;
  pointer-events: none;
  user-select: none;
  z-index: 11;
  rotate: -35deg;
  right: -225px;
}

@media (max-width: 768px) {
  .bakery-cta-woman {
    height: clamp(120px, 22vw, 200px);
  }
}

@media (max-width: 480px) {
  .bakery-cta-woman {
    height: 100px;
  }
}

@media (max-width: 767px) {
  .bakery-flipbook-section {
    overflow: hidden;
  }

  .bakery-flipbook-wrap {
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 4px;
  }

  .bakery-flipbook-cta-wrap {
    width: 90%;
    margin-top: 32px;
  }

  .bakery-flipbook-cta {
    font-size: clamp(28px, 9vw, 48px);
    padding: 14px 0;
  }

  .bakery-cta-woman {
    height: clamp(140px, 28vw, 220px);
  }
}

/* ---- Video Player Section ---- */
.bakery-video-section {
  position: relative;
  width: var(--bakery-content-width);
  height: 100vh;
  min-height: 500px;
  margin: var(--bakery-section-gap) auto 0;
  border-radius: 24px;
  overflow: hidden;
}

.bakery-video-title {
  position: absolute;
  top: 28px;
  left: 32px;
  z-index: 3;
  color: #fff;
  font-family: "The Unlimited Sans", var(--tj-ff-heading);
  font-size: clamp(58px, 6vw, 110px);
  font-weight: 700;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0;
  pointer-events: none;
}

.bakery-video-player {
  position: relative;
  width: 100%;
  height: 100%;
}

.bakery-video-player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bakery-youtube-player {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bakery-youtube-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.bakery-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: opacity 0.4s;
}

.bakery-video-section.is-playing .bakery-video-poster {
  opacity: 0;
  pointer-events: none;
}

.bakery-video-player::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(0, 0, 0, 0.52) 0%,
    rgba(0, 0, 0, 0.18) 40%,
    rgba(0, 0, 0, 0.08) 100%
  );
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.4s;
}

.bakery-video-section.is-playing .bakery-video-player::after {
  opacity: 0;
}

.bakery-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: clamp(80px, 14vw, 180px);
  height: clamp(80px, 14vw, 180px);
  border: none;
  border-radius: 0;
  background: none;
  cursor: pointer;
  transition:
    transform 0.25s,
    opacity 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.bakery-video-play svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.35));
  border-radius: 5px;
}

.bakery-video-play:hover {
  transform: translate(-50%, -50%) scale(1.12);
}

.bakery-video-section.is-playing .bakery-video-play,
.bakery-video-section.is-playing .bakery-video-title {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

.bakery-video-mute {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s,
    background 0.2s,
    transform 0.2s;
}

.bakery-video-section.is-playing .bakery-video-mute {
  opacity: 1;
  pointer-events: auto;
}

.bakery-video-mute:hover {
  background: rgba(0, 0, 0, 0.65);
  transform: scale(1.08);
}

.bakery-video-mute svg {
  width: 22px;
  height: 22px;
}

.bakery-video-mute .icon-unmuted {
  display: none;
}

.bakery-video-mute[aria-pressed="false"] .icon-muted {
  display: none;
}

.bakery-video-mute[aria-pressed="false"] .icon-unmuted {
  display: block;
}

@media (max-width: 480px) {
  .bakery-video-mute {
    right: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
  }

  .bakery-video-mute svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 768px) {
  .bakery-video-section {
    height: 70vh;
    min-height: 400px;
  }

  .bakery-video-title {
    top: 20px;
    left: 20px;
  }
}

@media (max-width: 480px) {
  .bakery-video-section {
    height: 56vh;
    min-height: 300px;
    border-radius: 8px;
  }

  .bakery-video-title {
    top: 16px;
    left: 16px;
  }
}

/* ---- CTA Subscribe Section ---- */
.bakery-cta-section {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 420px;
  overflow: hidden;
  margin: var(--bakery-section-gap) 0 0;
}

.bakery-cta-content {
  flex: 1;
  padding: 60px var(--bakery-gutter) 60px var(--bakery-edge);
  z-index: 1;
}

.bakery-cta-heading {
  color: #fff;
  font-family: "The Unlimited Sans", var(--tj-ff-heading);
  font-size: clamp(52px, 8vw, 180px);
  font-weight: 700;
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  margin: 0;
}

.bakery-cta-image {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
}

.bakery-cta-image img {
  height: 100%;
  /* width: auto;
  max-width: 50vw; */
  width: 55vw;
  max-width: 100%;
  object-fit: cover;
  /* object-position: left center; */
  display: block;
}

@media (max-width: 768px) {
  .bakery-cta-section {
    /* flex-direction: column; */
    flex-direction: row;
    min-height: auto;
  }

  .bakery-cta-content {
    padding-top: 0;
    padding-bottom: 0;
    /* text-align: center; */
  }

  .bakery-cta-image {
    width: 100%;
    justify-content: center;
  }

  .bakery-cta-image img {
    max-width: 100%;
    height: auto;
    max-height: 360px;
    position: absolute;
    right: 0;
  }
}

@media (max-width: 480px) {
  .bakery-cta-image img {
    max-height: 260px;
  }
}

/* ---- Bakery Footer ---- */
.bakery-footer {
  position: relative;
  padding: var(--bakery-section-gap) var(--bakery-edge) 28px;
  color: #fff;
}

.bakery-footer-top {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  padding-bottom: 48px;
}

.bakery-footer-brand {
  flex: 1;
  max-width: 380px;
}

.bakery-footer-logo {
  font-family: var(--tj-ff-heading);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  width: 180px;
}

.bakery-footer-desc {
  font-family: var(--tj-ff-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 24px;
  /* font-style: italic; */
}

.bakery-footer-socials {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 16px;
}

.bakery-footer-socials a {
  color: #fff;
  font-size: 18px;
  transition: opacity 0.2s;
}

.bakery-footer-socials a:hover {
  opacity: 0.6;
}

.bakery-footer-links,
.bakery-footer-connect {
  text-align: right;
}

.bakery-footer-links h4,
.bakery-footer-connect h4 {
  font-family: var(--tj-ff-body);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
  margin: 0 0 16px;
}

.bakery-footer-links ul,
.bakery-footer-connect ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bakery-footer-links a,
.bakery-footer-connect a {
  color: #fff;
  font-family: var(--tj-ff-body);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s;
}

.bakery-footer-links a:hover,
.bakery-footer-connect a:hover {
  opacity: 0.6;
}

.bakery-footer-bottom {
  padding-top: 28px;
  text-align: right;
}

.bakery-footer-bottom span {
  font-family: var(--tj-ff-body);
  font-size: 14px;
  letter-spacing: 0.14em;
  /* color: rgba(255, 255, 255, 0.5); */
  color: #fff;
}

@media (max-width: 768px) {
  .bakery-footer {
    padding-bottom: 20px;
  }

  .bakery-footer-top {
    flex-direction: column;
    gap: 32px;
  }

  .bakery-footer-brand {
    max-width: 100%;
  }

  .bakery-footer-links,
  .bakery-footer-connect {
    text-align: left;
  }

  .bakery-footer-bottom {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .bakery-footer {
    padding-bottom: 16px;
  }
}

/* ---- About Hero Section ---- */
.bakery-about-hero {
  position: relative;
  width: 100%;
  min-height: 50vh;
  padding-top: 140px; /* space for the fixed header */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-bottom: 120px;
}

.bakery-about-hero h1 {
  /* font-family: var(--tj-ff-heading); */
  font-size: clamp(120px, 13vw, 380px);
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  z-index: 2;
}

/* ---- Who We Are Section ---- */
.bakery-who-section {
  position: relative;
  width: 100%;
  padding: 0;
  margin-top: 20px;
}

.bakery-who-container {
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}

.bakery-who-top {
  position: relative;
  display: flex;
  align-items: flex-start;
  z-index: 2;
  margin-bottom: -18%; /* Causes overlap with image */
  padding: 0 var(--bakery-edge);
}

.bakery-who-title {
  font-size: clamp(80px, 9vw, 200px);
  font-weight: 900;
  line-height: 0.85;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
  flex-shrink: 0;
  transform: translateY(-20px);
}

.bakery-who-desc {
  max-width: 450px;
  font-size: 18px;
  line-height: 1.5;
  color: #fff;
  padding-top: 15px;
  margin-left: 5%; /* Push text slightly right from title, so it sits slightly left of center if title takes ~30-40% */
}

.bakery-who-desc p {
  margin-bottom: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

.bakery-who-image {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
}

.bakery-who-image img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 991px) {
  .bakery-who-top {
    flex-direction: column;
    margin-bottom: -5%;
  }

  .bakery-who-title {
    transform: translateY(0);
    margin-bottom: 20px;
  }

  .bakery-who-desc {
    margin-left: 0;
  }
}

@media (max-width: 767px) {
  /* Title sits in the top-left as a float instead of a flex item, so
     the description — a normal-flow sibling — wraps around it (next to
     it while the title is "tall") and then continues at full width once
     it clears the title's bottom edge, instead of leaving that space
     empty under a short title column. */
  .bakery-who-top {
    display: block;
    flex-direction: initial;
  }

  .bakery-who-top::after {
    content: "";
    display: table;
    clear: both;
  }

  .bakery-who-title {
    float: left;
    width: 30%;
    font-size: clamp(40px, 15vw, 72px);
    margin: 0 16px 16px 0;
  }

  .bakery-who-desc {
    max-width: none;
    padding-top: 0px;
  }

  .bakery-about-hero {
    padding-bottom: 80px;
  }

}

/* ---- Partners Section ---- */
.bakery-partners-section {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--bakery-section-gap);
}

.bakery-partners-title {
  font-size: clamp(65px, 5vw, 150px);
  font-weight: 900;
  line-height: 0.85;
  color: #fff;
  margin: 0 0 -5px 0; /* Tighten base to overlap purple bar or sit flush */
  text-transform: uppercase;
  text-align: center;
  z-index: 2;
  position: relative;
  padding-bottom: 50px;
}

.bakery-partners-bar {
  width: 100%;
  /* background-color: #6a2e9b; */
  padding: 30px 0;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.bakery-partners-logos {
  width: 100%;
  max-width: 1400px;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}

.bakery-partners-logos img {
  object-fit: contain;
  /* Basic filtering to ensure flat white logos if they are not already, though placeholders should be */
  filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.15));
}

@media (max-width: 767px) {
  .bakery-partners-logos {
    justify-content: center;
    gap: 40px;
  }
}

.bakery-partners-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 14px 0;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.bakery-partners-carousel.is-dragging {
  cursor: grabbing;
}

.bakery-partners-carousel-track {
  display: flex;
  align-items: center;
  gap: 70px;
  width: max-content;
  padding: 0 5%;
  will-change: transform;
}

.bakery-partners-carousel-card {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}

.bakery-partners-carousel-card img {
  height: 100%;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
  /* Force logos to flat white regardless of source colors */
  filter: brightness(0) invert(1) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.15));
  opacity: 0.9;
}

@media (max-width: 991px) {
  .bakery-partners-carousel-track {
    gap: 50px;
  }

  .bakery-partners-carousel-card {
    height: 64px;
  }
}

@media (max-width: 767px) {
  .bakery-partners-carousel-track {
    gap: 36px;
  }

  .bakery-partners-carousel-card {
    height: 52px;
  }

  .bakery-partners-carousel-card img {
    max-width: 130px;
  }
}

.thin-letters {
  font-weight: 500 !important;
}

.title-thin-letters {
  font-weight: 600 !important;
}
/* ---- About Contact Section ---- */
.bakery-about-contact {
  position: relative;
  width: 100%;
  overflow: visible;
  z-index: 10; /* elevate above background so it can overlap footer if needed */
  margin-top: var(--bakery-section-gap);
}

.bakery-about-contact-inner {
  /* max-width: 1400px; */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Text on right */
  position: relative;
  padding: 0 var(--bakery-edge);
}

.bakery-about-contact-image {
  position: absolute;
  left: 0;
  bottom: -50px; /* Force image to overflow downwards into footer territory */
  /* width: 70%; */
  max-width: 600px;
  z-index: 1;
  pointer-events: none; /* So the image bounds don't steal clicks from the footer */
}

.bakery-about-contact .bakery-about-contact-image {
  bottom: 30px;
}

.bakery-about-contact-image img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(
    0 20px 40px rgba(0, 0, 0, 0.3)
  ); /* give the cutout a solid shadow */
}

.bakery-about-contact-content {
  position: relative;
  z-index: 2; /* Text overlaps image */
  width: 45%;
  padding-bottom: 200px; /* gives space for the image to drop into footer */
}

.bakery-contact-title {
  font-size: clamp(60px, 9vw, 140px);
  font-weight: 700;
  line-height: 0.85;
  color: #fff;
  margin: 0 0 45px; /* pull word slightly left to guarantee overlap over the retro phone */
  text-transform: uppercase;
}

.bakery-contact-desc {
  max-width: 400px;
}

.bakery-contact-desc p {
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 30px;
}

/* Adjust footer z-index to coordinate correctly with contact section image */
.bakery-footer {
  z-index: 5;
  position: relative;
}

@media (max-width: 1024px) {
  .bakery-about-contact-inner {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .bakery-about-contact-image {
    position: relative;
    left: 0;
    bottom: 0; /* smaller drop on mobile */
    width: 80%;
    margin-top: 40px;
    order: 2; /* Put image under text on mobile */
  }

  .bakery-about-contact-content {
    width: 90%;
    padding-bottom: 0;
    order: 1;
  }

  .bakery-contact-title {
    margin-left: 0;
    text-align: center;
  }

  .bakery-contact-desc {
    max-width: 100%;
    text-align: center;
  }
}

@media (min-width: 1900px) {
  .bakery-about-contact-image {
    position: absolute;
    left: 0;
    bottom: -50px; /* Force image to overflow downwards into footer territory */
    /* width: 70%; */
    max-width: 700px;
    z-index: 1;
    pointer-events: none; /* So the image bounds don't steal clicks from the footer */
  }
}

/* Projects Style */
.bakery-projects-hero {
  position: relative;
  width: 100%;
  min-height: 50vh;
  padding-top: 140px;
  display: block;
  overflow: visible; /* the cut-out hangs below the hero */
  padding-bottom: 100px;
}

.bakery-projects-hero-image {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
  right: 0;
  position: absolute;
}

.bakery-projects-hero h1 {
  font-family: "The Unlimited Sans", var(--tj-ff-heading);
  font-size: clamp(120px, 13vw, 380px);
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  z-index: 2;
}

@media (max-width: 991px) {
  .bakery-projects-hero {
    min-height: 40vh;
  }
}

@media (max-width: 575px) {
  .bakery-projects-hero {
    min-height: 35vh;
  }
}
/* ---- Projects Flipbook Section ---- */
.bakery-projects-content-area {
  position: relative;
  width: 100%;
  padding: 40px var(--bakery-edge) 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  justify-items: center;
  align-content: center;
  align-items: center;
}

.bakery-projects-tabs {
  position: absolute;
  top: 60px;
  left: 60px;
  display: flex;
  gap: 20px;
  z-index: 999;
  pointer-events: auto;
  right: auto;
  left: auto;
}

.bakery-projects-tab {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  background: none;
  border-bottom: 1px solid #fff;
  padding-bottom: 2px;
  transition: all 0.3s ease;
  position: relative;
}

.bakery-projects-tab.active {
  color: #fff;
  border-bottom: 1px solid #fff;
}

.bakery-projects-panel {
  display: none;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  padding-top: 100px;
  position: relative;
  justify-content: center;
  align-items: center;
}

.bakery-projects-panel.active {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

/* We can reuse .bakery-flipbook-wrap inside panel */
@media (max-width: 991px) {
  .bakery-projects-tabs {
    top: 20px;
    left: var(--bakery-edge);
    flex-wrap: wrap;
  }
  .bakery-projects-panel {
    padding-top: 80px;
  }
}

/* Ensure flipbooks nested in panels preserve 3D shadow boundaries */
/* .bakery-projects-panel .bakery-flipbook-wrap {
  transform: scale(0.95);
} */

.bakery-projects-tabs {
  padding-bottom: 20px;
}

.bakery-projects-panel .bakery-flipbook-wrap {
  width: 100%;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Studio style */
.bakery-studio-hero {
  position: relative;
  width: 100%;
  /* height: 100vh; */
  min-height: 90vh;
  overflow: hidden;
}

.bakery-studio-hero-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-55%, -50%);
  z-index: 2;
  line-height: 1;
}

.bakery-studio-hero-logo img {
  width: clamp(260px, 25vw, 450px);
  height: auto;
  display: block;
  margin-top: 100px;
}

.about-studio-text {
  font-family: Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: #fff;
  max-width: 1000px;
  margin: 0 auto;
  padding: 90px 20px;
}
/* ---- The Space Section ---- */
.bakery-the-space {
  position: relative;
  width: 100%;
  padding: var(--bakery-section-gap) var(--bakery-edge) var(--bakery-block-gap);
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  min-height: 100vh;
  gap: 20px;
  overflow: hidden;
  /* background:
    radial-gradient(circle at 10% 80%, #950020, transparent 40%),
    radial-gradient(circle at 90% 90%, #4b105a, transparent 40%),
    radial-gradient(circle at 10% 10%, #d8572a, transparent 40%),
    radial-gradient(circle at 70% 30%, #2f2a3a, transparent 40%), #841d2f; */
}

.bakery-the-space::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.2'/%3E%3C/svg%3E");
  opacity: 0.15;
  mix-blend-mode: color-burn;
  pointer-events: none;
  z-index: 0;
}

.space-left-col,
.space-mid-col,
.space-right-col {
  position: relative;
  min-width: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.space-left-col {
  width: 25%;
  justify-content: space-between;
}

.space-mid-col {
  width: 37%;
  justify-content: flex-start;
}

.space-right-col {
  width: 37%;
  justify-content: flex-start;
}

.space-img {
  width: 100%;
  overflow: hidden;
}

.space-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.space-img-1 {
  width: 100%;
  margin-left: 0;
  aspect-ratio: 1/1.1;
}

.space-img-2 {
  width: 100%;
  aspect-ratio: 3/4;
}

.space-img-3 {
  width: 100%;
  aspect-ratio: 3/4;
}

.space-title {
  bottom: 0;
}

.space-title h2 {
  font-family: "The Unlimited Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(100px, 14vw, 180px);
  color: #fff;
  line-height: 0.8;
  margin: 0;
  text-transform: uppercase;
}

/* ---- Studio Page Responsive ---- */

/* Tablet landscape / small desktop */
@media (max-width: 1199px) {
  .bakery-studio-hero {
    min-height: 70vh;
  }
  .about-studio-text {
    font-size: 16px;
    padding: 60px 20px;
  }
  .bakery-the-space {
    gap: 15px;
    min-height: 80vh;
  }
  .space-title h2 {
    font-size: clamp(80px, 10vw, 130px);
  }
  .equipment-text-overlay {
    max-width: 400px;
  }
  .equipment-text-overlay p {
    font-size: clamp(14px, 1.6vw, 20px);
  }
}

/* Tablet portrait */
@media (max-width: 991px) {
  .bakery-studio-hero {
    min-height: 50vh;
  }
  .about-studio-text {
    font-size: 15px;
    padding: 50px 20px;
    max-width: 700px;
  }
  .bakery-the-space {
    flex-direction: column;
    height: auto;
    min-height: auto;
    gap: 30px;
  }
  .space-left-col,
  .space-mid-col,
  .space-right-col {
    width: 100%;
    align-items: center;
  }
  .space-left-col {
    order: 2;
    flex-direction: row;
    align-items: flex-end;
    gap: 20px;
  }
  .space-img-1 {
    width: 40%;
    margin: 0;
    aspect-ratio: 1/1.2;
  }
  .space-title {
    flex: 1;
  }
  .space-title h2 {
    font-size: 70px;
    margin-top: 0;
    text-align: left;
  }
  .space-mid-col {
    order: 1;
  }
  .space-right-col {
    order: 3;
  }
  .space-img-2,
  .space-img-3 {
    aspect-ratio: 16/10;
  }
  .bakery-equipment-layout {
    flex-direction: column;
    gap: 40px;
  }
  .bakery-equipment-media {
    width: 100%;
    order: -1;
  }
  .equipment-text-overlay {
    position: relative;
    bottom: auto;
    right: auto;
    max-width: 100%;
    background: rgba(30, 25, 45, 0.9);
    padding: 30px;
    border-radius: 0 0 30px 30px;
  }
  .equipment-bg img {
    border-radius: 30px 30px 0 0 !important;
  }
  .equipment-bg {
    background: rgba(30, 25, 45, 0.9);
    border-radius: 30px;
  }
}

/* Mobile large */
@media (max-width: 767px) {
  .bakery-studio-hero {
    min-height: 40vh;
  }
  .about-studio-text {
    font-size: 14px;
    padding: 40px 16px;
  }
  .bakery-the-space {
    gap: 24px;
  }
  .space-left-col {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .space-img-1 {
    width: 65%;
    aspect-ratio: 1/1.1;
  }
  .space-title h2 {
    font-size: 56px;
    text-align: center;
  }
  .space-img-2,
  .space-img-3 {
    aspect-ratio: 3/4;
  }
  .bakery-equipment-layout {
    gap: 28px;
  }
  .bakery-equipment-title {
    text-align: center;
  }
  .bakery-equipment-list {
    margin-bottom: 28px;
  }
  .bakery-equipment-text .bakery-pdf-download-wrap {
    justify-content: center;
  }
  .equipment-bg {
    border-radius: 20px;
  }
  .equipment-bg img {
    border-radius: 20px 20px 0 0 !important;
  }
  .equipment-text-overlay {
    padding: 24px 20px;
    border-radius: 0 0 20px 20px;
  }
  .equipment-text-overlay p {
    font-size: 14px;
  }
}

/* Mobile small */
@media (max-width: 480px) {
  .bakery-studio-hero {
    min-height: 35vh;
  }
  .about-studio-text {
    font-size: 13px;
    padding: 30px 14px;
  }
  .bakery-the-space {
    gap: 20px;
  }
  .space-img-1 {
    width: 80%;
  }
  .space-title h2 {
    font-size: 46px;
  }
  .equipment-bg {
    border-radius: 16px;
  }
  .equipment-bg img {
    border-radius: 16px 16px 0 0 !important;
  }
  .equipment-text-overlay {
    padding: 20px 16px;
    border-radius: 0 0 16px 16px;
  }
  .equipment-text-overlay p {
    font-size: 13px;
    line-height: 1.5;
  }
}

/* Very small screens */
@media (max-width: 360px) {
  .bakery-studio-hero {
    min-height: 30vh;
  }
  .space-title h2 {
    font-size: 40px;
  }
  .about-studio-text {
    font-size: 12px;
    padding: 24px 12px;
  }
}
.bakery-studio-equipment {
  position: relative;
  width: 100%;
  /* background:
    radial-gradient(circle at 10% 80%, #950020, transparent 40%),
    radial-gradient(circle at 90% 90%, #4b105a, transparent 40%),
    radial-gradient(circle at 10% 10%, #d8572a, transparent 40%),
    radial-gradient(circle at 70% 30%, #2f2a3a, transparent 40%), #841d2f; */
  z-index: 1;
  padding: 0 var(--bakery-edge);
  margin-top: var(--bakery-section-gap);
}

.bakery-studio-equipment::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.2'/%3E%3C/svg%3E");
  opacity: 0.15;
  mix-blend-mode: color-burn;
  pointer-events: none;
  z-index: 0;
}

.equipment-bg {
  position: relative;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 30px;
  overflow: hidden;
  z-index: 2;
}

.equipment-bg img {
  width: 100%;
  border-radius: 30px;
  height: auto;
  display: block;
  object-fit: cover;
}

.equipment-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0) 100%
  ); */
  pointer-events: none;
  z-index: 2; /* Between img and text */
}

.equipment-text-overlay {
  position: absolute;
  bottom: 8%;
  right: 5%;

  max-width: 480px;
  z-index: 3;
}

.equipment-text-overlay p {
  font-size: clamp(16px, 1.8vw, 24px);
  color: #fff;
  line-height: 1.4;
  margin: 0;
  font-weight: 500;
}

/* Two-column "Our Equipment" layout: list on the left, studio photo
   on the right. */
.bakery-equipment-layout {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 0;
}

.bakery-equipment-text {
  flex: 1;
  min-width: 0;
}

.bakery-equipment-title {
  font-size: clamp(48px, 5.5vw, 100px);
  font-weight: 900;
  line-height: 0.9;
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 30px;
}

.bakery-equipment-list {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bakery-equipment-list li {
  color: #fff;
  font-family: var(--tj-ff-body);
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.4;
  padding-bottom: 14px;
  padding-left: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  background-image: url("../images/icons/icone-lista.webp");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 30px 30px;
}

.bakery-equipment-media {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  border-radius: 30px;
  overflow: hidden;
}

.bakery-equipment-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 30px;
}

.bakery-equipment-text .bakery-pdf-download-wrap {
  justify-content: flex-start;
  margin-top: 0;
}

.bakery-equipment-text .bakery-pdf-download-btn.bakery-flipbook-cta {
  width: auto;
  padding: 18px 36px;
  font-size: clamp(16px, 1.6vw, 22px);
}

.bakery-contact-hero-image {
  width: 100%;
  max-width: 700px;
  height: auto;
  left: 0;
  position: relative;
  margin-top: -250px;
  margin-bottom: -80px;
  z-index: 10;
}
/* ---- Contact Form Section ---- */
.bakery-contact-form-section {
  position: relative;
  width: 100%;
  padding: 0 var(--bakery-edge);
  display: flex;
  justify-content: center;
  z-index: 1;
  margin-top: -5%; /* Overlap hero slightly if needed */
}

.bakery-contact-form-wrapper {
  display: flex;
  width: 100%;
  max-width: var(--bakery-container-narrow);
  /* background: rgba(255, 255, 255, 0.05); */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
  border-radius: 40px;
  padding: 80px 60px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
  gap: 60px;
  align-items: center;
}

.form-left {
  flex: 0 0 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: flex-start;
}

.form-left h2 {
  font-family: "The Unlimited Sans", sans-serif;
  font-size: clamp(56px, 7vw, 110px);
  font-weight: 900;
  color: #fff;
  line-height: 0.8;
  margin: 0;
  text-transform: uppercase;
}

.form-left h2 .title-thin-letters {
  font-weight: 400; /* As defined in our global CSS */
}

.bakery-whatsapp-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  color: #fff;
  text-decoration: none;
  font-family: var(--tj-ff-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: opacity 0.2s ease;
}

.bakery-whatsapp-link:hover {
  opacity: 0.75;
}

.bakery-whatsapp-link i {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.form-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.bakery-modern-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.bakery-modern-form .form-group {
  width: 100%;
  position: relative;
}

.bakery-modern-form input,
.bakery-modern-form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  padding: 10px 0;
  transition: all 0.3s ease;
}

.bakery-modern-form input::placeholder,
.bakery-modern-form textarea::placeholder {
  color: #fff;
  opacity: 1;
  font-weight: 400;
  font-size: 18px;
}

.bakery-modern-form input:focus,
.bakery-modern-form textarea:focus {
  outline: none;
  border-bottom-color: #fff;
}

.bakery-modern-form textarea {
  display: block;
  height: auto;
  min-height: 110px;
  border-radius: 0;
  line-height: 1.5;
  resize: vertical;
}

.bakery-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #ff5a00;
  border: none;
  border-radius: 50px;
  color: #1a1410;
  font-family: "The Unlimited Sans", var(--tj-ff-heading);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 32px;
  cursor: pointer;
  margin-top: 10px;
  margin-left: auto;
  transition: background 0.25s ease, gap 0.25s ease;
  width: 35%;
}

.bakery-form-submit:hover {
  background: #7b46b5;
  gap: 18px;
}

.bakery-form-submit i {
  font-size: 18px;
  transition: transform 0.25s ease;
}

.bakery-form-submit:hover i {
  transform: translateX(4px);
}

/* Spam honeypot: off-screen but present in the layout, since some bots
   skip fields hidden via display:none. Real visitors never see or fill
   this in. */
.bakery-form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.bakery-form-status {
  font-family: var(--tj-ff-body);
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.bakery-form-status[data-status="success"] {
  color: #d7f7df;
  background: rgba(60, 200, 110, 0.18);
  border: 1px solid rgba(60, 200, 110, 0.4);
}

.bakery-form-status[data-status="error"] {
  color: #ffd9d9;
  background: rgba(220, 60, 60, 0.18);
  border: 1px solid rgba(220, 60, 60, 0.4);
}

/* ---- Contact Hero Section ---- */
.bakery-contact-hero {
  position: relative;
  width: 100%;
  min-height: 50vh;
  padding-top: 140px;
  display: block;
  align-items: center;
  justify-content: center;
  /* The hero image bleeds past this section's bottom edge by design
     (negative margin-bottom on .bakery-contact-hero-image) so it sits on
     top of the contact form section below — overflow:hidden here was
     clipping that bleed instead of letting it show. */
  overflow: visible;
  padding-bottom: 50px;
}

.bakery-contact-hero h1 {
  font-family: "The Unlimited Sans", var(--tj-ff-heading);
  font-size: clamp(120px, 13vw, 380px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  z-index: 2;
}

/* ---- Contact Page Responsive ---- */

/* Tablet landscape / small desktop */
@media (max-width: 1199px) {
  .bakery-contact-form-wrapper {
    max-width: 900px;
    padding: 60px 40px;
    gap: 40px;
  }
  .bakery-contact-hero-image {
    max-width: 550px;
    margin-top: -200px;
  }
}

/* Tablet portrait */
@media (max-width: 991px) {
  .bakery-contact-hero {
    min-height: auto;
    padding-top: 120px;
    padding-bottom: 30px;
  }
  .bakery-contact-hero h1 {
    font-size: clamp(70px, 12vw, 150px);
  }
  .bakery-contact-hero-image {
    max-width: 400px;
    margin-top: -150px;
    margin-bottom: -30px;
  }
  .bakery-contact-form-section {
    margin-top: 0;
  }
  .bakery-contact-form-wrapper {
    flex-direction: column;
    padding: 50px 35px;
    gap: 30px;
    border-radius: 30px;
  }
  .form-left {
    flex: none;
    width: 100%;
    align-items: center;
  }
  .form-left h2 {
    font-size: 56px;
    text-align: center;
    line-height: 0.85;
  }

  .bakery-whatsapp-link {
    justify-content: center;
  }
  .form-right {
    width: 100%;
  }
  .bakery-modern-form {
    gap: 24px;
  }
}

/* Mobile large */
@media (max-width: 767px) {
  .bakery-contact-hero {
    padding-top: 100px;
    padding-bottom: 20px;
  }
  .bakery-contact-hero h1 {
    font-size: clamp(55px, 14vw, 100px);
  }
  .bakery-contact-hero-image {
    max-width: 300px;
    margin-top: 0px;
    margin-bottom: -67px;
  }
  .bakery-contact-form-wrapper {
    padding: 40px 24px;
    gap: 24px;
    border-radius: 24px;
  }
  .form-left h2 {
    font-size: 46px;
  }
  .bakery-whatsapp-link {
    font-size: 15px;
    margin-top: 18px;
  }
  .bakery-modern-form {
    gap: 20px;
    padding-top: 10px;
  }
  .bakery-modern-form input,
  .bakery-modern-form textarea {
    font-size: 15px;
    padding: 8px 0;
  }
  .bakery-modern-form input::placeholder,
  .bakery-modern-form textarea::placeholder {
    font-size: 15px;
  }
  .bakery-equipment-text {
    width: 100%;
  }
  .bakery-equipment-text .bakery-pdf-download-btn.bakery-flipbook-cta {
    width: 100%;
    font-size: clamp(26px, 2.6vw, 22px);
  }
  .bakery-cta-heading {
      letter-spacing: -0.01em;
  }
}

/* Mobile small */
@media (max-width: 480px) {
  .bakery-contact-hero {
    padding-top: 90px;
    padding-bottom: 15px;
  }
  .bakery-contact-hero h1 {
    font-size: clamp(44px, 15vw, 70px);
  }
  .bakery-contact-hero-image {
    max-width: 220px;
    margin-top: 0px;
    margin-bottom: -67px;
    z-index: 2;
  }
  .bakery-contact-form-wrapper {
    padding: 32px 20px;
    gap: 20px;
    border-radius: 20px;
  }
  .form-left h2 {
    font-size: 38px;
  }
  .bakery-whatsapp-link {
    font-size: 14px;
    margin-top: 14px;
  }
  .bakery-modern-form input,
  .bakery-modern-form textarea {
    font-size: 14px;
  }
  .bakery-modern-form input::placeholder,
  .bakery-modern-form textarea::placeholder {
    font-size: 14px;
  }
}

/* Very small screens */
@media (max-width: 360px) {
  .bakery-contact-hero {
    padding-top: 80px;
  }
  .bakery-contact-hero h1 {
    font-size: 40px;
  }
  .bakery-contact-hero-image {
    max-width: 180px;
    margin-top: -50px;
  }
  .bakery-contact-form-wrapper {
    padding: 28px 16px;
  }
  .form-left h2 {
    font-size: 34px;
  }
}

/* ---- Contact Carousel Section ---- */
.bakery-contact-carousel-section {
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
  margin-top: var(--bakery-section-gap);
}

.bakery-contact-carousel-intro {
  width: min(100%, 1180px);
  margin: 0 auto 36px;
  padding: 0 5%;
}

.bakery-contact-carousel-kicker {
  margin: 0 0 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.bakery-contact-carousel-intro h2 {
  margin: 0;
  max-width: 760px;
  font-family: "The Unlimited Sans", var(--tj-ff-heading);
  font-size: clamp(34px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #fff;
}

.bakery-contact-carousel {
  position: relative;
  overflow: hidden;
  padding: 14px 0;
}

.bakery-contact-carousel::before,
.bakery-contact-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(12vw, 160px);
  z-index: 2;
  pointer-events: none;
}

/* .bakery-contact-carousel::before {
  left: 0;
  background: linear-gradient(90deg, #0d0d0d 0%, rgba(13, 13, 13, 0) 100%);
}

.bakery-contact-carousel::after {
  right: 0;
  background: linear-gradient(270deg, #0d0d0d 0%, rgba(13, 13, 13, 0) 100%);
} */

.bakery-contact-carousel-track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  padding: 0 5%;
  will-change: transform;
}

.bakery-contact-carousel-card {
  flex: 0 0 clamp(180px, 16vw, 260px);
  height: clamp(180px, 16vw, 260px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: clamp(18px, 2vw, 28px);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.04) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 34px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px); */
}

.bakery-contact-carousel-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* Carousel hover pause handled via GSAP in contact.html */

@media (max-width: 1199px) {
  .bakery-contact-carousel-card {
    border-radius: 30px;
  }
}

@media (max-width: 991px) {
  .bakery-contact-carousel-intro {
    margin-bottom: 28px;
    padding: 0 4%;
  }

  .bakery-contact-carousel-track {
    gap: 22px;
    padding: 0 4%;
  }
}

@media (max-width: 767px) {
  .bakery-contact-carousel-intro {
    padding: 0 3%;
    margin-bottom: 24px;
  }

  .bakery-contact-carousel-intro h2 {
    max-width: 560px;
  }

  .bakery-contact-carousel-track {
    gap: 18px;
    padding: 0 3%;
    animation-duration: 28s;
  }

  .bakery-contact-carousel-card {
    flex-basis: clamp(150px, 38vw, 220px);
    height: clamp(150px, 38vw, 220px);
    border-radius: 24px;
  }

  .bakery-form-submit {
    width: 100%;
  }

  .space-left-col, .space-mid-col {
    display: none;
  }

  .project-details main .tj_item_nav_wrapper {
    padding: 20px 10px;
  }
}

@media (max-width: 480px) {
  .bakery-contact-carousel-intro {
    padding: 0 4%;
    margin-bottom: 18px;
  }

  .bakery-contact-carousel-kicker {
    margin-bottom: 10px;
    font-size: 11px;
  }

  .bakery-contact-carousel-track {
    gap: 14px;
    padding: 0 4%;
    animation-duration: 24s;
  }

  .bakery-contact-carousel-card {
    flex-basis: 150px;
    height: 150px;
    padding: 18px;
    border-radius: 20px;
  }

  .bakery-form-submit {
    width: 100%;
  }
  .project-details main .tj_item_nav_wrapper {
    padding: 20px 10px;
  }
}

@media (max-width: 360px) {
  .bakery-contact-carousel-intro h2 {
    font-size: 28px;
  }

  .bakery-contact-carousel-card {
    flex-basis: 132px;
    height: 132px;
    padding: 14px;
    border-radius: 18px;
  }

  .bakery-form-submit {
    width: 100%;
  }
  .project-details main .tj_item_nav_wrapper {
    padding: 20px 10px;
  }
}

/* ---- Team Hotspot Annotations ---- */
.bw-photo-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: var(--bakery-content-width);
  margin: 0 auto;
}

.bw-hs {
  position: absolute;
  left: var(--bwx);
  top: var(--bwy);
  width: 0;
  height: 0;
  z-index: 6;
}

.bw-dot {
  position: absolute;
  width: 9vw;
  height: 9vw;
  border-radius: 50%;
  background: transparent;
  left: -0.5vw;
  top: -5.5vw;
  padding: 0;
  cursor: pointer;
}

.bw-dot:focus {
  outline: none;
}

@media (max-width: 768px) {
  .bw-dot {
    width: 18vw;
    height: 18vw;
    left: -9vw;
    top: -9vw;
  }
}

.bw-popup {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.bw-hs:hover .bw-popup,
.bw-hs:focus-within .bw-popup,
.bw-hs.is-active .bw-popup {
  opacity: 1;
  pointer-events: auto;
}

.bw-curve {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  transition: stroke-dashoffset 0s ease;
}

.bw-hs:hover .bw-curve,
.bw-hs:focus-within .bw-curve,
.bw-hs.is-active .bw-curve {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.48s ease;
}

.bw-head {
  opacity: 0;
}

.bw-hs:hover .bw-head,
.bw-hs:focus-within .bw-head,
.bw-hs.is-active .bw-head {
  opacity: 1;
  transition: opacity 0.18s 0.42s ease;
}

.bw-name {
  display: inline-block;
  background: rgba(14, 10, 6, 0.86);
  color: #fff;
  font-family: "The Unlimited Sans", var(--tj-ff-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 5px 12px;
  border-radius: 30px;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.bw-svg {
  display: block;
  overflow: visible;
}

/* -- tl: popup extends up-left, dot at bottom-right -- */
.bw-hs--tl .bw-popup {
  right: -5px;
  bottom: -5px;
  width: 140px;
  height: 90px;
}

.bw-hs--tl .bw-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.bw-hs--tl .bw-name {
  position: absolute;
  top: 7px; left: 7px;
}

/* -- tr: popup extends up-right, dot at bottom-left -- */
.bw-hs--tr .bw-popup {
  left: -5px;
  bottom: -5px;
  width: 140px;
  height: 90px;
}

.bw-hs--tr .bw-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.bw-hs--tr .bw-name {
  position: absolute;
  top: 7px; right: 7px;
}

/* -- l: popup extends left, flex [name][svg] -- */
.bw-hs--l .bw-popup {
  right: 0;
  top: -25px;
  height: 50px;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 0;
}

.bw-hs--l .bw-name { order: 1; flex-shrink: 0; }
.bw-hs--l .bw-svg  { order: 2; width: 120px; height: 50px; flex-shrink: 0; }

/* -- r: popup extends right, flex [svg][name] -- */
.bw-hs--r .bw-popup {
  left: 0;
  top: -25px;
  height: 50px;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 0;
}

.bw-hs--r .bw-svg  { order: 1; width: 120px; height: 50px; flex-shrink: 0; }
.bw-hs--r .bw-name { order: 2; flex-shrink: 0; }

/* -- b: popup extends below, dot at top -- */
.bw-hs--b .bw-popup {
  top: -5px;
  left: -40px;
  width: 80px;
  height: 90px;
}

.bw-hs--b .bw-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.bw-hs--b .bw-name {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
}

/* Touch devices have no hover: show a tappable indicator so people know
   where to tap, and let JS toggle .is-active on tap (see main.js). */
@media (hover: none) {
  .bw-dot {
    background: rgba(255, 208, 1, 0.9);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.25);
  }

  .bw-hs.is-active .bw-dot {
    background: #fff;
  }
}

/* ---- Project Details Page ---- */
.project-details main,
.project-details main h1,
.project-details main h2,
.project-details main h3,
.project-details main h4,
.project-details main h5,
.project-details main h6,
.project-details main p,
.project-details main a,
.project-details main li,
.project-details main span,
.project-details main .desc,
.project-details main .sec_title,
.project-details main .sec_subtitle,
.project-details main .project_label,
.project-details main .tj_blog_details_title,
.project-details main .tj_icon_list .text,
.project-details main .underline-text,
.project-details main .flip-text {
  color: #fff;
}

.project-details main .tj_icon_list .icon {
  color: #ff7b34;
  border-color: rgba(255, 255, 255, 0.2);
}

.project-details main .tj_item_nav_wrapper {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 0;
  border-radius: 20px;
  padding: 32px 40px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
  margin-top: 0;
}

.project-details main .icon_btn {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}


.bakery-contact-btn {
  display: block;
  width: 60%;
  padding: 18px 0;
  background: #ff5a00;
  color: #000;
  font-family: "The Unlimited Sans", var(--tj-ff-heading);
  font-size: clamp(22px, 3vw, 20px);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  margin-top: 50px;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  transition:
    background 0.25s,
    color 0.25s;
  border-radius: 50px;
  line-height: 1.2;
}

.bakery-contact-btn:hover {
  background: #7b46b5;
  color: #000;
}

/* On Studio the form follows the equipment list (on Contact it tucks under the hero) */
#studio-form {
  margin-top: var(--bakery-section-gap);
}

.form-left h2 {
  max-width: 80px;
}

@media (max-width: 768px) {
  .project-details main .tj_item_nav_wrapper {
    padding: 20px 10px;
  }

  .tj_item_nav .tj_icon_btn {
    font-size: 13px;
  }

  .tj_item_nav .tj_icon_btn .icon_btn {
    font-size: 15px;
  }

  .tj_item_nav_wrapper .sec_subtitle {
    font-size: 13px;
  }

  .bakery-contact-btn {
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
  }

  .bakery-contact-title {
    margin: 0 0 20px;
  }

  .bakery-contact-desc p {
    margin-bottom: 0px;
  }
  .bakery-about-contact-image {
   margin-top: 20px;
   margin-bottom: 50px;
  }

  .bakery-about-hero {
      min-height: 40vh;
  }

  h2, .tj-fz-h2 {
    font-size: var(--tj-fs-h2);
    line-height: 1.11;
    letter-spacing: -0.01em;
  }

  .bakery-partners-title {
    padding-bottom: 10px;
  }

}

.bakery-contact-form-wrapper {
  z-index: 1;
}

a:focus, a:hover {
  color: #cfa3fffd;
}

/* ---- Project detail page hero video (projects/*.html) ----
   The project's video now lives where the hero poster image used to
   (.service_details_img), replacing it one-for-one — so it gets the
   same fixed-height, cropped treatment the poster had
   (.service_details_img img in main.css), rather than the video's own
   natural aspect ratio. Works the same regardless of the source video
   being vertical or horizontal. */
.service_details_img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Layout standard: pieces that need a contextual selector ---- */

/* Studio: the figure is anchored to the end of <main>, which used to end
   100px below the form; keep it where it was */
.bakery-flipbook-cta-section .bakery-cta-woman {
  bottom: -110px;
}

/* Project pages: the template containers follow the same edges and rhythm */
.project-details main .container-space {
  padding: 0;
}

.project-details main .container-fluid {
  padding-left: var(--bakery-edge);
  padding-right: var(--bakery-edge);
}

.project-details main .service_details_intro {
  margin-top: var(--bakery-block-gap);
}

.project-details main .final-conclusion-section {
  margin-top: var(--bakery-section-gap);
  padding-top: 0;
  padding-bottom: 0;
}

/* ---- 404 Page ---- */
.bakery-error-section {
  position: relative;
  min-height: 100vh;
  padding: 140px var(--bakery-edge) 0; /* space for the fixed header */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bakery-error-section h1 {
  font-family: "The Unlimited Sans", var(--tj-ff-heading);
  font-size: clamp(150px, 26vw, 460px);
  font-weight: 900;
  color: #fff;
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin: 0;
}

.bakery-error-lead {
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 700;
  color: #fff;
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.bakery-error-desc {
  max-width: 420px;
  font-family: var(--tj-ff-body);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.bakery-error-section .bakery-contact-btn {
  display: inline-block;
  width: auto;
  padding: 18px 44px;
  margin-top: var(--bakery-block-gap);
}

.bakery-error-image {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(200px, 22vw, 321px);
  height: auto;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 767px) {
  .bakery-error-section {
    min-height: 0;
  }

  .bakery-error-image {
    position: static;
    align-self: flex-end;
    width: 150px;
    margin-top: var(--bakery-block-gap);
    margin-right: calc(-1 * var(--bakery-edge));
  }
}

/* ---- Legal Page (privacy policy) ---- */
.bakery-legal-hero {
  padding: 140px var(--bakery-edge) 0; /* space for the fixed header */
  text-align: center;
}

.bakery-legal-hero h1 {
  font-family: "The Unlimited Sans", var(--tj-ff-heading);
  font-size: clamp(64px, 13vw, 380px);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}

.bakery-legal-date {
  font-family: var(--tj-ff-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin: 18px 0 0;
}

.bakery-legal-section {
  display: flex;
  justify-content: center;
  margin-top: var(--bakery-section-gap);
  padding: 0 var(--bakery-edge);
}

.bakery-legal-card {
  width: 100%;
  max-width: var(--bakery-container-narrow);
  padding: clamp(28px, 6vw, 80px) clamp(20px, 5vw, 60px);
  border-radius: clamp(20px, 3vw, 40px);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
  font-family: var(--tj-ff-body);
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
}

.bakery-legal-card h2 {
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 700;
  color: #fff;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 18px;
}

.bakery-legal-card p {
  color: inherit;
  margin: 0 0 16px;
}

.bakery-legal-card b {
  color: #fff;
}

.bakery-legal-card ul,
.bakery-legal-card ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.bakery-legal-card ul {
  list-style: disc;
}

.bakery-legal-card ol {
  list-style: decimal;
}

.bakery-legal-card li {
  list-style: inherit;
  margin-bottom: 6px;
}

.bakery-legal-card li ul {
  margin: 8px 0 14px;
}

.bakery-legal-card hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  opacity: 1;
  margin: clamp(24px, 4vw, 44px) 0;
}

.bakery-legal-card > :last-child {
  margin-bottom: 0;
}

.bakery-legal-note {
  font-size: 14px;
  opacity: 0.75;
}

.bakery-legal-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bakery-legal-contact a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}