/* La Lasagna — light design "sandpaper" layer. Scoped, additive only. */

/* --- Global horizontal alignment fix ---------------------------------------
   Every page section measured ~15px farther from the right edge than the left
   (skew -15 site-wide). Cause: the vertical scrollbar's gutter is subtracted on
   the right only, while full-bleed sections size to 100vw (which ignores the
   scrollbar). Result: the whole site reads as shifted slightly left.
   Reserve the scrollbar gutter symmetrically and clamp any 100vw full-bleed to
   the real content box so left/right gaps match. Additive; no markup touched. */
html {
  scrollbar-gutter: stable both-edges;
}
body {
  overflow-x: hidden; /* guard against the residual 100vw bleed overshoot */
}
.full-bleed-section,
.page-section.full-bleed-section {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- Footer map visibility ------------------------------------------------
   The footer (with its Google map) is shared across every page.
   • DESKTOP (>=768px): keep the ORIGINAL Squarespace footer exactly as authored —
     the map shows on every page, columns laid out normally. We touch nothing here.
   • MOBILE (<=767px): show the map on the HOME page only; on other pages hide it
     and tidy the fixed-row grid so there's no void (see the mobile block below).
   All the grid-row shuffling that follows is scoped to mobile so it never disturbs
   the desktop footer layout. */
@media (max-width: 767px) {
  .fe-block-yui_3_17_2_1_1742654682241_11007 { display: none !important; }
  #collection-6989e82883d7eb240f7d7043 .fe-block-yui_3_17_2_1_1742654682241_11007 {
    display: block !important;
  }
  /* footer logo: its fluid-image wrapper collapsed to ~1px (a thin white "line");
     give it a real height so the logo shows */
  .fe-block-yui_3_17_2_1_1759752886027_17517 {
    grid-row: 1 / 5 !important;
    align-self: center !important;
  }
  .fe-block-yui_3_17_2_1_1759752886027_17517 .fluid-image-component-root,
  .fe-block-yui_3_17_2_1_1759752886027_17517 .fluid-image-container,
  .fe-block-yui_3_17_2_1_1759752886027_17517 .sqs-image-content,
  .fe-block-yui_3_17_2_1_1759752886027_17517 .js-content-mode-element-wrapper,
  .fe-block-yui_3_17_2_1_1759752886027_17517 .js-content-mode-element {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    transform: none !important;
  }
  .fe-block-yui_3_17_2_1_1759752886027_17517 img {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 60% !important;
    max-width: 240px !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    transform: none !important;
  }
  /* Non-home mobile footer: the hidden map left ~250px of empty rows, so shift the
     content blocks up to sit under the logo. Home keeps the authored rows (map). */
  .fe-block-d639f4a15da30299b663 { grid-row: 5 / 9 !important; }    /* Location */
  .fe-block-d2d45668cd6794c15be3 { grid-row: 10 / 14 !important; }  /* Contact & Book */
  .fe-block-7080e82f7dc7d52c18f8 { grid-row: 15 / 22 !important; }  /* Opening hours */
  .fe-block-yui_3_17_2_1_1743163195830_45046 { grid-row: 22 / 24 !important; }  /* Service in languages */
  .fe-block-yui_3_17_2_1_1743163195830_45464 { grid-row: 24 / 25 !important; }  /* flag */
  .fe-block-44beaf53ea176f18f3cc { grid-row: 24 / 25 !important; }  /* flag */
  .fe-block-38d78d35fb058f4c4d9a { grid-row: 24 / 25 !important; }  /* flag */
  .fe-block-e881b38985fed0837b6d { grid-row: 24 / 25 !important; }  /* flag */
  .fe-block-c57aa9ae05e49fef4e83 { grid-row: 24 / 25 !important; }  /* flag */
  .fe-block-f8378be50c8018e7f63f { grid-row: 25 / 26 !important; }  /* & Sign language */
  .fe-block-yui_3_17_2_1_1742749145870_2220 { grid-row: 28 / 29 !important; }  /* © */
  /* cap the grid so the empty trailing rows below © collapse */
  section[data-section-id="67dc02dfc6808548e4c5e749"] .fluid-engine {
    grid-template-rows: repeat(28, 24px) !important;
  }
  /* Home page (mobile): map shows — keep the authored rows + full grid height. */
  #collection-6989e82883d7eb240f7d7043 section[data-section-id="67dc02dfc6808548e4c5e749"] .fluid-engine {
    grid-template-rows: repeat(38, 24px) !important;
  }
  #collection-6989e82883d7eb240f7d7043 .fe-block-d639f4a15da30299b663 { grid-row: 15 / 19 !important; }
  #collection-6989e82883d7eb240f7d7043 .fe-block-d2d45668cd6794c15be3 { grid-row: 20 / 24 !important; }
  #collection-6989e82883d7eb240f7d7043 .fe-block-7080e82f7dc7d52c18f8 { grid-row: 25 / 32 !important; }
  #collection-6989e82883d7eb240f7d7043 .fe-block-yui_3_17_2_1_1743163195830_45046 { grid-row: 32 / 34 !important; }
  #collection-6989e82883d7eb240f7d7043 .fe-block-yui_3_17_2_1_1743163195830_45464,
  #collection-6989e82883d7eb240f7d7043 .fe-block-44beaf53ea176f18f3cc,
  #collection-6989e82883d7eb240f7d7043 .fe-block-38d78d35fb058f4c4d9a,
  #collection-6989e82883d7eb240f7d7043 .fe-block-e881b38985fed0837b6d,
  #collection-6989e82883d7eb240f7d7043 .fe-block-c57aa9ae05e49fef4e83 { grid-row: 34 / 35 !important; }
  #collection-6989e82883d7eb240f7d7043 .fe-block-f8378be50c8018e7f63f { grid-row: 35 / 36 !important; }
  #collection-6989e82883d7eb240f7d7043 .fe-block-yui_3_17_2_1_1742749145870_2220 { grid-row: 38 / 39 !important; }
}

/* --- Footer map: clickable + "View on Google Maps" caption ----------------
   The map embed is now queried by address so the pin lands on the real
   storefront. Make the whole map a click target that opens the Google Business
   listing, and add a small caption link under it. Additive; the iframe still
   renders the map, the transparent <a> sits on top to capture clicks. */
.lala-map { padding-bottom: 34px !important; }
.lala-map-link {
  position: absolute;
  inset: 0 0 34px 0; /* cover the map area, leave room for the caption */
  z-index: 2;
  display: block;
  cursor: pointer;
}
.lala-map-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  font: 600 13px/1 inherit;
  letter-spacing: 0.02em;
  text-decoration: none;
  /* Was a solid white bar with a top border — on pages/states where the map tiles
     don't paint, that read as an ugly stray "white bar above Location". Make it a
     subtle cream text link on a translucent dark strip instead, so it never looks
     like a white bar. */
  color: #f9fce0;
  background: rgba(28, 26, 23, 0.55);
  border-top: 0;
  transition: background 0.15s ease;
}
.lala-map-caption:hover { background: rgba(28, 26, 23, 0.8); text-decoration: underline; }

/* --- Tame oversized hero / section top padding ----------------------------
   Squarespace renders these "custom height" sections with ~291px of top padding
   (a full-viewport-height hero trick) plus vertical-centering, so on every page
   the heading starts very low and the whole page reads as "pushed down / too
   much empty space" (drinks, desserts, who-we-are, contact all measured a
   270-360px top gap). Cap that padding to a calmer value so content sits at a
   natural height. Clamp keeps it responsive; never goes below a sensible floor.
   Additive; only trims excess whitespace, moves no element off its column. */
.page-section.section-height--custom > .content-wrapper,
.page-section.section-height--small > .content-wrapper,
.page-section.section-height--medium > .content-wrapper,
.page-section.section-height--custom,
.page-section.section-height--small,
.page-section.section-height--medium {
  padding-top: clamp(120px, 15vh, 200px) !important;
}
.page-section.section-height--custom,
.page-section.section-height--small,
.page-section.section-height--medium {
  padding-bottom: clamp(64px, 7vh, 104px) !important;
}

/* --- Who We Are: close the void below the video ---------------------------
   The video block spans the section's lower grid rows but the <video> renders
   shorter than the cell it was given, leaving a tall empty band before the
   footer. Keep the grid rows as authored (so the video keeps its aspect ratio
   and doesn't overflow), but make the video fill the height of its own cell and
   stop the section reserving extra space. Scoped to the Who-We-Are page only. */
#collection-67dc02dfc6808548e4c5e6e1 .page-section:first-of-type .sqs-block-video,
#collection-67dc02dfc6808548e4c5e6e1 .page-section:first-of-type .sqs-video-wrapper,
#collection-67dc02dfc6808548e4c5e6e1 .page-section:first-of-type .sqs-native-video {
  height: 100% !important;
}
#collection-67dc02dfc6808548e4c5e6e1 .page-section:first-of-type video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* --- Contact / Book a table: tidy "call to book" block --------------------
   The "You can also book by calling us" heading and the phone number sat low in
   the section floating in a large empty band, far from the booking form and
   reading as an afterthought. Pull the two blocks together into one centred,
   bordered card with even spacing, and style the (now tappable) phone number as
   a clear call-to-action. Scoped to the two fluid-engine blocks only; no other
   text moves. The phone <a> is a tel: link so it dials on mobile. */
.fe-block-916612e5e07cbc8f0eba h3 {       /* "...book by calling us" heading */
  margin: 0 !important;
  font-size: 1.25rem !important;
  letter-spacing: 0.01em;
  opacity: 0.92;
}
.lala-tel {                                /* tappable phone button — matches the
                                              "Learn more" / Instagram buttons */
  display: inline-block;
  text-decoration: none;
  background: transparent;
  color: #ffffff !important;
  border: 1px solid #ffffff;
  border-radius: 10px;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 10px 22px;
  transition: background 0.15s ease, color 0.15s ease;
}
/* The number text is wrapped in Squarespace's .sqsrte-text-color--white span,
   which resolves to hsl(var(--white-hsl)) (an off-white on this dark section) and
   beats the <a>'s colour. Force the inner text pure white too. */
.lala-tel,
.lala-tel span,
.lala-tel strong { color: #ffffff !important; }
.lala-tel:hover,
.lala-tel:hover span,
.lala-tel:hover strong { background: #ffffff; color: #1c1a17 !important; }
.lala-tel:hover { background: #ffffff; }
/* Desktop only: put the "You can also book by calling us" heading + phone number
   ABOVE the photo (authored order was photo -> text -> number). Reassign their grid
   rows so text+number sit just above the picture, and push the picture down below
   them. Columns are kept from the authored layout. */
@media (min-width: 768px) {
  .fe-block-916612e5e07cbc8f0eba {           /* heading — above the picture */
    grid-row: 30 / 32 !important;
    align-self: end !important;
    padding-top: 28px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .fe-block-523cda3f8fca79c5cf2b {           /* phone pill — right under the heading */
    grid-row: 32 / 34 !important;
    align-self: start !important;
    margin-top: 16px !important;   /* a little more space below the heading */
  }
  .fe-block-yui_3_17_2_1_1764702229989_13421 {  /* picture — now below text+number */
    grid-row: 35 / 45 !important;
  }
}

/* --- Salads & Desserts: one title, like the Lasagna page --------------------
   These pages had TWO headings: the hero tagline AND a standalone category title
   ("Side Salads" / "Desserts"). The Lasagna page has a single title, so the
   duplicate category heading is hidden here (all widths). The price now sits
   directly under the title with "(included in main course)" as the line beneath
   it (reordered in the HTML), matching title -> price -> text -> menu. */
.fe-block-9769df709e042ef3b3a7,   /* salads "Side Salads" heading */
.fe-block-7f9fa2b42185fa5e6833 {  /* desserts "Desserts" heading */
  display: none !important;
}

/* The original standalone hero down-arrow image on salads/desserts is replaced by
   the ↓ we inject into the menu block, so hide it on ALL widths (was only hidden on
   mobile, which left a duplicate arrow under the title on desktop). */
.fe-block-yui_3_17_2_1_1770647053480_1189,   /* salads hero arrow */
.fe-block-yui_3_17_2_1_1770647105161_1118 {  /* desserts hero arrow */
  display: none !important;
}

/* The ↓ arrow injected between the "(included in main course)" line and the first
   menu item — points down to the menu, matching the Lasagna page. */
.lala-menu-arrow {
  margin: 6px 0 14px !important;
  line-height: 1 !important;
}
.lala-menu-arrow span {
  display: inline-block;
  font-size: 1.7rem;
  font-weight: 400;
  opacity: 0.9;
}

/* --- Salads & Desserts: match the Pizzas menu (remove divider lines) -------
   The Pizzas menu lists items separated by spacing only. Salads and Desserts
   shipped with a horizontal-rule block under every item, giving a "lined"
   structure the Pizzas page doesn't have. Hide those rules on these two pages
   only (scoped by their unique collection body id) so the layout matches.
   Markup/content untouched — the <hr> blocks are simply not rendered. The
   collapsed space is reclaimed so items sit at the Pizzas page's rhythm. */
#collection-6989e88999610e607a1d4f1a .sqs-block-horizontalrule,
#collection-6989e88999610e607a1d4f1a hr,
#collection-6989e8944757e761bbd63fb9 .sqs-block-horizontalrule,
#collection-6989e8944757e761bbd63fb9 hr {
  display: none !important;
}
/* drop the now-empty rule block's own row height so items don't keep a gap */
#collection-6989e88999610e607a1d4f1a .sqs-block-horizontalrule,
#collection-6989e8944757e761bbd63fb9 .sqs-block-horizontalrule {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- "Our suppliers" logo wall (index) ------------------------------------
   The brand logos shipped at very different native sizes/aspect ratios and
   were scattered across the Squarespace fluid grid (ragged 4-then-2-2-2 with
   one logo dropped low). Render every logo as an identical white tile and lay
   all ten in a clean 2-column x 5-row grid. No logo is removed or recoloured.
   Scoped to the suppliers section id so food photos elsewhere are untouched. */

/* neutralise Squarespace's fluid-image wrappers so each logo fills its cell */
section[data-section-id="6989e82883d7eb240f7d7052"] .fluid-image-component-root,
section[data-section-id="6989e82883d7eb240f7d7052"] .image-block-outer-wrapper,
section[data-section-id="6989e82883d7eb240f7d7052"] .fluid-image-animation-wrapper,
section[data-section-id="6989e82883d7eb240f7d7052"] .fluid-image-container,
section[data-section-id="6989e82883d7eb240f7d7052"] .js-content-mode-element-wrapper,
section[data-section-id="6989e82883d7eb240f7d7052"] .sqs-block-image-link {
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  inset: auto !important;
  transform: none !important;
}
section[data-section-id="6989e82883d7eb240f7d7052"] img {
  position: static !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  display: block !important;
  width: 100% !important;
  height: 88px !important;
  margin: 0 !important;
  object-fit: contain !important;
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* DESKTOP: place all ten logos in a clean 2-col x 5-row grid (right side, clear
   of the left video). Each rule targets one logo block by its fluid-engine id.
   Gated to >=768px — on phones there is no side video, so these right-hand
   column pins would squish every logo into the right third of the screen. */
@media (min-width: 768px) {
  .fe-block-23236113e6d5f7db0203 { grid-column: 17 / 21 !important; grid-row: 16 / 18 !important; } /* RAO */
  .fe-block-8ea009048d74f04262f9 { grid-column: 21 / 25 !important; grid-row: 16 / 18 !important; } /* Aimo */
  .fe-block-8c39a5eb61d41108439f { grid-column: 17 / 21 !important; grid-row: 18 / 20 !important; } /* Kaffemania */
  .fe-block-c19900ecfc00e8f3f9f8 { grid-column: 21 / 25 !important; grid-row: 18 / 20 !important; } /* Ionia */
  .fe-block-7c7acc341b5c3b97ccc9 { grid-column: 17 / 21 !important; grid-row: 20 / 22 !important; } /* MultiCatering */
  .fe-block-e606077d3cbbb4056f41 { grid-column: 21 / 25 !important; grid-row: 20 / 22 !important; } /* Patu */
  .fe-block-94c6ea46b8a09245b966 { grid-column: 17 / 21 !important; grid-row: 22 / 24 !important; } /* Hartwall */
  .fe-block-daeec86a338b9291742e { grid-column: 21 / 25 !important; grid-row: 22 / 24 !important; } /* Wolt+ */
  .fe-block-92bdbc75b83ccb7ff288 { grid-column: 17 / 21 !important; grid-row: 24 / 26 !important; } /* Wotkins */
  .fe-block-482757efb0177483b89e { grid-column: 21 / 25 !important; grid-row: 24 / 26 !important; } /* BPF */
}

/* MOBILE: lay the ten logos full-width in a tidy 2-column grid (5 rows),
   instead of the desktop right-hand pins which crush them into the right third. */
@media (max-width: 767px) {
  .fe-block-23236113e6d5f7db0203,
  .fe-block-8ea009048d74f04262f9,
  .fe-block-8c39a5eb61d41108439f,
  .fe-block-c19900ecfc00e8f3f9f8,
  .fe-block-7c7acc341b5c3b97ccc9,
  .fe-block-e606077d3cbbb4056f41,
  .fe-block-94c6ea46b8a09245b966,
  .fe-block-daeec86a338b9291742e,
  .fe-block-92bdbc75b83ccb7ff288,
  .fe-block-482757efb0177483b89e {
    grid-column: span 12 !important;   /* each logo = half of the 24-col grid */
    grid-row: auto !important;
  }
  .fe-block-23236113e6d5f7db0203, .fe-block-8c39a5eb61d41108439f,
  .fe-block-7c7acc341b5c3b97ccc9, .fe-block-94c6ea46b8a09245b966,
  .fe-block-92bdbc75b83ccb7ff288 { grid-column: 1 / 13 !important; }   /* left col */
  .fe-block-8ea009048d74f04262f9, .fe-block-c19900ecfc00e8f3f9f8,
  .fe-block-e606077d3cbbb4056f41, .fe-block-daeec86a338b9291742e,
  .fe-block-482757efb0177483b89e { grid-column: 13 / 25 !important; }  /* right col */
}

/* ===========================================================================
   MOBILE / PHONE OPTIMISATION  (<= 767px)
   Squarespace's fluid grid keeps the desktop row scale on phones, which left
   (a) the contact "call to book" heading and phone pill overlapping, (b) very
   large gaps between a title and the content under it, and (c) oversized gaps
   between sections on the home page. Tighten all three for small screens only;
   desktop is unaffected. Additive — no content or markup changes.
   ========================================================================= */
/* --- "Who we are" welcome text: bigger, more readable, more breathing room ---
   Restyle the existing welcome paragraph (no copy change) so it reads like an
   inviting intro rather than a small caption: larger font, generous line-height,
   comfortable max-width. Index welcome block + the Who-We-Are page paragraph. */
.fe-block-9424efb3f6ffce2ed765 p,
.fe-block-9424efb3f6ffce2ed765 span,
.fe-block-912b0ba0ea214b4f6c57 p,
.fe-block-912b0ba0ea214b4f6c57 span {
  font-size: 1.35rem !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em !important;
}
@media (max-width: 767px) {
  .fe-block-9424efb3f6ffce2ed765 p,
  .fe-block-9424efb3f6ffce2ed765 span,
  .fe-block-912b0ba0ea214b4f6c57 p,
  .fe-block-912b0ba0ea214b4f6c57 span {
    font-size: 1.15rem !important;
    line-height: 1.65 !important;
  }
}

/* --- Salads: "(included in main course)" was black (unreadable on dark bg) ---
   Make that subtitle line the site's cream/whitish text. Scoped to the block;
   applies on all widths. */
.fe-block-yui_3_17_2_1_1770653706839_15175 .sqsrte-text-color--black,
.fe-block-yui_3_17_2_1_1770653706839_15175 span[class*="black"],
.fe-block-yui_3_17_2_1_1770653706839_18965 .sqsrte-text-color--black,
.fe-block-yui_3_17_2_1_1770653706839_18965 span[class*="black"] {
  color: #f9fce0 !important;
}

/* --- Salads & Desserts: match the Pizzas menu — item titles in CAPITALS ---------
   Pizza items are typed in capitals in the copy; salads/desserts are title-case.
   Uppercase them via CSS (no copy change) so all three menu pages read the same.
   Applies to the heading rows in the menu blocks (item names + the price/included
   subheadings); descriptions live in <p> and are left as normal case, like pizza.
   All widths. */
#collection-6989e88999610e607a1d4f1a .page-section:nth-of-type(2) h4,
#collection-6989e8944757e761bbd63fb9 .page-section:nth-of-type(2) h4 {
  text-transform: uppercase !important;
}
/* Desserts "each page one solid colour": item 1 was recoloured cream by the rule
   above (it was --black in the shared block) while items 2 & 3 render red. Item 1
   is now given the same red in the markup; keep the ↓ arrow cream/readable. */
.lala-dessert-item1 { color: #e41e25 !important; }

/* --- Salads & Desserts: even item spacing to match the Pizzas page --------------
   Pizza items sit ~72px apart; salads had ~112-152px (uneven, driven by a varying
   number of empty <p> spacer lines) and desserts ~12-18px (too tight). Collapse
   those empty spacers and set ONE consistent gap above every menu heading so all
   three pages share the Pizzas rhythm. The price line, "(included…)" and the ↓
   arrow are excluded so only real item titles get the 72px lead. All widths. */
#collection-6989e88999610e607a1d4f1a .page-section:nth-of-type(2) .sqs-html-content p:empty,
#collection-6989e8944757e761bbd63fb9 .page-section:nth-of-type(2) .sqs-html-content p:empty {
  margin: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  line-height: 0 !important;
}
#collection-6989e88999610e607a1d4f1a .page-section:nth-of-type(2) h4:not(.lala-included):not(.lala-menu-arrow),
#collection-6989e8944757e761bbd63fb9 .page-section:nth-of-type(2) h4:not(.lala-included):not(.lala-menu-arrow) {
  margin-top: 56px !important;
}
/* the very first heading (the price, right under the title/arrow) shouldn't get the
   big item lead — it belongs to the header group, not the item list */
#collection-6989e88999610e607a1d4f1a .page-section:nth-of-type(2) .sqs-html-content > h4:first-child,
#collection-6989e8944757e761bbd63fb9 .page-section:nth-of-type(2) .sqs-html-content > h4:first-child {
  margin-top: 0 !important;
}

/* The "(included in main course)" line under the price: keep it NORMAL case (the
   uppercase rule above would otherwise capitalise it) and white. Selectors carry
   the collection id so they beat the section-scoped uppercase rule. */
#collection-6989e88999610e607a1d4f1a .page-section:nth-of-type(2) h4.lala-included,
#collection-6989e8944757e761bbd63fb9 .page-section:nth-of-type(2) h4.lala-included,
.lala-included { text-transform: none !important; }
#collection-6989e88999610e607a1d4f1a .page-section:nth-of-type(2) h4.lala-included span,
#collection-6989e8944757e761bbd63fb9 .page-section:nth-of-type(2) h4.lala-included span,
.lala-included span { color: #f9fce0 !important; }

/* --- Drinks: widen the drink photos to the same 16px border as other pages ------
   They shipped narrow (~312px, ~39px inset). Push them out to 16px each side so
   they read as full-width pictures like the lasagna/lunch photos. The poster gets
   the same treatment. Scoped to the three drinks image blocks (NOT the footer
   logo). Mobile only. */
@media (max-width: 767px) {
  .fe-block-yui_3_17_2_1_1773324078716_2395,   /* spritz poster */
  .fe-block-82dcc74ef8bf9b55fbf9,              /* drinks_1 */
  .fe-block-yui_3_17_2_1_1773324078716_2972 {  /* drinks_2 */
    grid-column: 1 / -1 !important;
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    justify-self: center !important;
  }
  .fe-block-yui_3_17_2_1_1773324078716_2395 .fluid-image-container,
  .fe-block-yui_3_17_2_1_1773324078716_2395 .sqs-image-content,
  .fe-block-yui_3_17_2_1_1773324078716_2395 .js-content-mode-element-wrapper,
  .fe-block-yui_3_17_2_1_1773324078716_2395 .js-content-mode-element,
  .fe-block-82dcc74ef8bf9b55fbf9 .fluid-image-container,
  .fe-block-82dcc74ef8bf9b55fbf9 .sqs-image-content,
  .fe-block-82dcc74ef8bf9b55fbf9 .js-content-mode-element-wrapper,
  .fe-block-82dcc74ef8bf9b55fbf9 .js-content-mode-element,
  .fe-block-yui_3_17_2_1_1773324078716_2972 .fluid-image-container,
  .fe-block-yui_3_17_2_1_1773324078716_2972 .sqs-image-content,
  .fe-block-yui_3_17_2_1_1773324078716_2972 .js-content-mode-element-wrapper,
  .fe-block-yui_3_17_2_1_1773324078716_2972 .js-content-mode-element {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    transform: none !important;
  }
  .fe-block-yui_3_17_2_1_1773324078716_2395 img,
  .fe-block-82dcc74ef8bf9b55fbf9 img,
  .fe-block-yui_3_17_2_1_1773324078716_2972 img {
    position: static !important;
    inset: auto !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
    object-fit: contain !important;
  }
}

/* --- Reviews: frame the Google screenshots as clean, professional cards ------
   The six Google-review screenshots shipped as raw scattered JPEGs of different
   crops. Wrap each one in a uniform white card — rounded corners, soft shadow,
   even padding — so the block reads like a designed testimonials row instead of
   pasted screenshots. The "4.8/5" + "400+ Reviews" title is left untouched.
   Applies on all widths; the existing grid/stacking still positions them. */
.fe-block-d301c67302846555cc05 .fluid-image-container,
.fe-block-eb2a202df51fc6c8854d .fluid-image-container,
.fe-block-3c7fc595e47835a63ef0 .fluid-image-container,
.fe-block-0bc122c3a61df03a6dac .fluid-image-container,
.fe-block-bba38cb5ca528d8020b5 .fluid-image-container,
.fe-block-96788e2ec1575ba416f2 .fluid-image-container,
.fe-block-d301c67302846555cc05 .sqs-image-content,
.fe-block-eb2a202df51fc6c8854d .sqs-image-content,
.fe-block-3c7fc595e47835a63ef0 .sqs-image-content,
.fe-block-0bc122c3a61df03a6dac .sqs-image-content,
.fe-block-bba38cb5ca528d8020b5 .sqs-image-content,
.fe-block-96788e2ec1575ba416f2 .sqs-image-content {
  background: #fff !important;
  border-radius: 14px !important;
  padding: 10px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.fe-block-d301c67302846555cc05 img,
.fe-block-eb2a202df51fc6c8854d img,
.fe-block-3c7fc595e47835a63ef0 img,
.fe-block-0bc122c3a61df03a6dac img,
.fe-block-bba38cb5ca528d8020b5 img,
.fe-block-96788e2ec1575ba416f2 img {
  border-radius: 8px !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* --- Mobile menu: drop the "Home" item (the logo is the home button) --------
   Hide the homepage entry in the mobile overlay menu so it isn't redundant with
   the logo, which already links home. Scoped to the mobile menu nav item class
   so the desktop top-nav is unaffected. */
.header-menu-nav-item--homepage { display: none !important; }

/* Mobile menu language ("English") picker: it rendered as a block, left-aligned
   and out of line with the other menu items (which are centered inline-flex).
   Match it to the nav items so it sits in the same column/style. */
.header-menu-actions.language-picker-mobile {
  display: flex !important;
  justify-content: center !important;
  margin: 8px 0 0 0 !important;
}
.header-menu-actions.language-picker-mobile a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.header-menu-actions.language-picker-mobile .header-menu-nav-item-content {
  justify-content: center !important;
}

/* Move the native mobile-menu "Book now" CTA to the TOP of the menu (under the
   logo) instead of the bottom. It already has the site's button styling, so we
   only reorder it — no duplicate button, no restyle. */
.header-menu-nav { display: flex !important; flex-direction: column !important; }
.header-menu-cta { order: -1 !important; margin: 0 0 16px 0 !important; }

@media (max-width: 767px) {

  /* 0d) Consistent block edges. The main content images shipped with mismatched
        side margins on mobile — hero ~16px, Spritz poster & Book-a-table & review
        shots ~23px, the who-we-are video & supplier logos full-bleed (0). Line
        them all to the SAME inset as the hero (~16px) so every block's left/right
        edge matches down the page. We do this by sizing the inner image wrapper,
        not the grid block, so layout/order is unaffected. */
  /* Spritz poster: same width/edge as the Book-a-table card (NOT full-bleed).
     The image inside was only ~310px centered, so force the wrappers + img to
     fill the block, but keep the block itself at the normal card edge. */
  .fe-block-132feefd1e18d9420227 {
    margin-left: -7px !important;
    margin-right: -7px !important;
  }
  .fe-block-132feefd1e18d9420227 .fluid-image-container,
  .fe-block-132feefd1e18d9420227 .sqs-image-content,
  .fe-block-132feefd1e18d9420227 .image-block-wrapper,
  .fe-block-132feefd1e18d9420227 .sqs-block-content {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    inset: auto !important;
    transform: none !important;
  }
  .fe-block-132feefd1e18d9420227 img {
    position: static !important;
    left: 0 !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
    object-fit: contain !important;
  }
  /* Book-a-table card: the image inside sat at ~292px wide (left 49) leaving big
     empty side space. Make the image fill the block so the card isn't mostly
     whitespace. */
  .fe-block-0080259be0871705e95c {
    margin-left: -7px !important;
    margin-right: -7px !important;
  }
  .fe-block-0080259be0871705e95c .fluid-image-container,
  .fe-block-0080259be0871705e95c .sqs-image-content,
  .fe-block-0080259be0871705e95c .sqs-block-content {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    inset: auto !important;
    transform: none !important;
  }
  .fe-block-0080259be0871705e95c img {
    position: static !important;
    inset: auto !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
    object-fit: contain !important;
  }
  /* who-we-are video: was full-bleed (0) — inset it to match the 16px edge */
  .fe-block-0bd9d632bada647776da {
    width: calc(100% - 14px) !important;
    margin-left: 7px !important;
    margin-right: 7px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }

  /* Footer "Service in languages": add space ABOVE it (padding, not a grid-row
     shift — that made it collide with the flag row). */
  .fe-block-yui_3_17_2_1_1743163195830_45046 {
    padding-top: 26px !important;
  }

  /* 0e) Reviews on mobile: the six Google screenshots kept their desktop grid
        placement, rendering tiny (some 166px) and scattered at different x's.
        Replace the review fluid-engine with our own flex column: the "4.8/5"
        title on top, then each review screenshot full-width, larger, stacked as
        a clean card. Much more visible and intentional on phones. */
  section[data-section-id="6989e82883d7eb240f7d7058"] .fluid-engine {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 0 12px !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }
  /* tighten the review section's own top/bottom so it isn't marooned in space */
  section[data-section-id="6989e82883d7eb240f7d7058"] {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  section[data-section-id="6989e82883d7eb240f7d7058"] .fluid-engine > .fe-block {
    grid-area: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 360px !important;   /* bigger cards, uniform width */
    transform: none !important;
  }
  /* shrink the oversized 4.8/5 title (was ~160px) */
  .fe-block-5ee92170caf33deb7e85 h1,
  .fe-block-5ee92170caf33deb7e85 h2,
  .fe-block-5ee92170caf33deb7e85 [style*="font-size"] {
    font-size: 92px !important;
    line-height: 1 !important;
  }
  /* order: 3 TEXT reviews, then the 4.8/5 TITLE in the middle, then the 3
     PICTURE reviews. The title is centered between the two groups. */
  .fe-block-d301c67302846555cc05 { order: 1 !important; }  /* text review */
  .fe-block-eb2a202df51fc6c8854d { order: 2 !important; }  /* text review */
  .fe-block-3c7fc595e47835a63ef0 { order: 3 !important; }  /* text review */
  .fe-block-5ee92170caf33deb7e85 {                          /* 4.8/5 title (middle) */
    order: 4 !important;
    margin: 10px auto !important;
    text-align: center !important;
    align-self: center !important;
  }
  .fe-block-5ee92170caf33deb7e85 * { text-align: center !important; }
  .fe-block-0bc122c3a61df03a6dac { order: 5 !important; }  /* picture review */
  .fe-block-bba38cb5ca528d8020b5 { order: 6 !important; }  /* picture review */
  .fe-block-96788e2ec1575ba416f2 { order: 7 !important; }  /* picture review */
  /* the review screenshot blocks need a real height on mobile (their grid cells
     gave height; flex doesn't) so the image shows at a readable size */
  section[data-section-id="6989e82883d7eb240f7d7058"] .fe-block .fluid-image-container,
  section[data-section-id="6989e82883d7eb240f7d7058"] .fe-block .sqs-image-content {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
  }
  section[data-section-id="6989e82883d7eb240f7d7058"] .fe-block img {
    position: relative !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* 0f) Lunch 2nd video ("Lunch Time"): the source is a VERTICAL 1080x1920 clip.
        It was previously forced into a 460px landscape box with object-fit:cover,
        which cropped it to a thin strip and left a tall empty band below (the box
        was 460px but the cropped video only filled ~194px). Show the FULL vertical
        video instead: size the block to the real 9:16 aspect at the column width,
        with object-fit:contain so nothing is cropped. Break it out of the fixed
        grid rows so the section collapses to the video's true height and the next
        content follows directly underneath (no dead space). */
  .fe-block-7f1ab150dc00f6ba45d2 {
    grid-row: 1 / 2 !important;      /* single natural row — kills the reserved gap */
    margin-left: auto !important;
    margin-right: auto !important;
    width: calc(100% - 46px) !important;
    max-width: calc(100% - 46px) !important;
    aspect-ratio: 9 / 16 !important; /* full vertical video, no crop */
    height: auto !important;
    min-height: 0 !important;
    position: relative !important;
  }
  .fe-block-7f1ab150dc00f6ba45d2 .sqs-block-content,
  .fe-block-7f1ab150dc00f6ba45d2 .sqs-native-video,
  .fe-block-7f1ab150dc00f6ba45d2 .sqs-video-wrapper,
  .fe-block-7f1ab150dc00f6ba45d2 .native-video-player,
  .fe-block-7f1ab150dc00f6ba45d2 .video-player {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    padding-bottom: 0 !important;   /* kill Squarespace's aspect-ratio padding box */
    aspect-ratio: auto !important;
  }
  .fe-block-7f1ab150dc00f6ba45d2 video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;   /* fill the full vertical box edge to edge */
  }
  /* Collapse the 2nd-video section so it wraps the video tightly and the picture
     grid below starts right under it (was padded out to a fixed grid height). */
  section[data-section-id="68839ebcd129343a80046393"] .fluid-engine {
    grid-template-rows: auto !important;
  }
  section.page-section[data-section-id="68839ebcd129343a80046393"],
  section.page-section[data-section-id="68839ebcd129343a80046393"] > .content-wrapper {
    padding-top: 16px !important;
    padding-bottom: 8px !important;
  }
  /* The picture masonry gallery sits in its own section right after the 2nd video.
     Trim that section's top padding so the photos begin directly under the video
     instead of after a wide blank band. (Selectors carry .page-section so they beat
     the global section-height padding rule above.) */
  section.page-section[data-section-id="67e563e06724a4311142e55e"],
  section.page-section[data-section-id="67e563e06724a4311142e55e"] > .content-wrapper,
  section.page-section[data-section-id="67e563e06724a4311142e55e"] .gallery-section-wrapper {
    padding-top: 10px !important;
    margin-top: 0 !important;
  }

  /* Pizza page: turn the "Pizzas are finally here!" text into a small emblem —
     a bordered, rounded badge that fits the brand — while keeping the same cream
     text. Also give it breathing room from the title above. */
  .fe-block-yui_3_17_2_1_1772900810939_12715 {
    margin-top: 26px !important;
  }
  .fe-block-yui_3_17_2_1_1772900810939_12715 .sqs-block-content {
    border: 1px solid rgba(249, 252, 224, 0.55) !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    max-width: 340px !important;
    margin: 0 auto !important;
    background: rgba(249, 252, 224, 0.04) !important;
  }

  /* 0g) Menu/lasagna & pizza hero titles: the big scaled headline had a
        line-height (~75px) SMALLER than its font-size (~87px), so the words were
        cramped on top of each other and the price sat too close. Give the hero
        heading a comfortable line-height and a little space below on mobile. */
  section.page-section:first-of-type h1 {
    line-height: 1.12 !important;
    margin-bottom: 6px !important;
    font-size: 13.5vw !important;      /* shrink so the longest word fits the
                                          screen width and never breaks mid-word */
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
  /* Salads & Desserts hero titles: match the Pizzas page size (14.5vw) instead of
     the slightly smaller default, so the three menu pages read consistently. */
  #collection-6989e88999610e607a1d4f1a section.page-section:first-of-type h1,
  #collection-6989e88999610e607a1d4f1a section.page-section:first-of-type h1 *,
  #collection-6989e8944757e761bbd63fb9 section.page-section:first-of-type h1,
  #collection-6989e8944757e761bbd63fb9 section.page-section:first-of-type h1 * {
    font-size: 14.5vw !important;
  }
  section.page-section:first-of-type h1 * {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
  section.page-section:first-of-type h1 + * { margin-top: 8px !important; }
  /* Menu / lasagna hero: title, price, description and arrow were pinned to fixed
     grid rows with big vertical gaps (the title block reserved 15 rows but its
     text is short, so the price floated ~370px below it). Replace the hero grid
     with a tight flex column on mobile so the order reads title -> price -> text
     -> arrow with even, compact spacing. Ordered explicitly so it never depends on
     the authored grid rows. */
  #collection-6989f0bc5e0b8e771afd533a #sections section.page-section:first-of-type .fluid-engine {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    grid-template-rows: none !important;
    grid-template-columns: none !important;
  }
  #collection-6989f0bc5e0b8e771afd533a #sections section.page-section:first-of-type .fluid-engine > .fe-block {
    grid-area: auto !important;
    grid-row: auto !important;
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
  }
  .fe-block-9ac47dfab2d39e3f6cef { order: 1 !important; }  /* title  */
  .fe-block-1c957763021ebd8d766e { order: 2 !important; margin-top: 0 !important; } /* price */
  .fe-block-287ff0953c5f7eb08246 { order: 3 !important; }  /* "price includes…" */
  .fe-block-3ba62d6eec8cb8a2448e { order: 4 !important; }  /* down arrow */
  /* The hero flex collapsed the arrow's fluid-image wrapper to 0px so the ↓ was
     invisible on the Lasagna page. Give it an explicit size like the other pages. */
  .fe-block-3ba62d6eec8cb8a2448e { margin-top: 8px !important; height: auto !important; }
  .fe-block-3ba62d6eec8cb8a2448e .fluid-image-component-root,
  .fe-block-3ba62d6eec8cb8a2448e .fluid-image-container,
  .fe-block-3ba62d6eec8cb8a2448e .sqs-image-content,
  .fe-block-3ba62d6eec8cb8a2448e .js-content-mode-element-wrapper,
  .fe-block-3ba62d6eec8cb8a2448e .js-content-mode-element {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    transform: none !important;
  }
  .fe-block-3ba62d6eec8cb8a2448e img {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    transform: none !important;
  }

  /* Lasagna menu photos: they shipped narrow (~254px, ~68px inset each side). Widen
     them to the same edge as every other page's pictures (~16px inset) so they run
     out to the borders. Applies to all 12 lasagna cards. */
  #collection-6989f0bc5e0b8e771afd533a .page-section:nth-of-type(2) .fe-block:has(img) {
    grid-column: 1 / -1 !important;
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    justify-self: center !important;
  }
  #collection-6989f0bc5e0b8e771afd533a .page-section:nth-of-type(2) .fe-block:has(img) .fluid-image-container,
  #collection-6989f0bc5e0b8e771afd533a .page-section:nth-of-type(2) .fe-block:has(img) .sqs-image-content,
  #collection-6989f0bc5e0b8e771afd533a .page-section:nth-of-type(2) .fe-block:has(img) .js-content-mode-element-wrapper,
  #collection-6989f0bc5e0b8e771afd533a .page-section:nth-of-type(2) .fe-block:has(img) .js-content-mode-element {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    transform: none !important;
  }
  #collection-6989f0bc5e0b8e771afd533a .page-section:nth-of-type(2) .fe-block:has(img) img {
    position: static !important;
    inset: auto !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
    object-fit: contain !important;
  }

  /* --- Salads & Desserts: match the Lasagna page rhythm -----------------------
     Both pages shipped as: hero title -> big empty band + a down-arrow -> (in a
     SEPARATE section) "(included in main course)" + price + the whole menu. That
     read as two titles far apart with a large void between them. Bring it into the
     Lasagna layout — ONE title, the price/description, then the menu — all tight
     at the top. We (a) drop the dead arrow and collapse the hero's empty height,
     and (b) pull the menu section up flush under the title. Scoped per page id. */
  #collection-6989e88999610e607a1d4f1a #sections .page-section:first-of-type .fluid-engine,
  #collection-6989e8944757e761bbd63fb9 #sections .page-section:first-of-type .fluid-engine {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    grid-template-rows: none !important;
    grid-template-columns: none !important;
  }
  #collection-6989e88999610e607a1d4f1a #sections .page-section:first-of-type .fluid-engine > .fe-block,
  #collection-6989e8944757e761bbd63fb9 #sections .page-section:first-of-type .fluid-engine > .fe-block {
    grid-area: auto !important;
    grid-row: auto !important;
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
  }
  /* The old standalone hero down-arrow image is hidden; instead we inject a ↓ line
     into the menu block itself (after "(included in main course)", before item 1)
     so the arrow sits under the title/price/text and points at the menu — exactly
     like the Lasagna page. See .lala-menu-arrow below. */
  .fe-block-yui_3_17_2_1_1770647053480_1189,   /* salads hero arrow */
  .fe-block-yui_3_17_2_1_1770647105161_1118 {  /* desserts hero arrow */
    display: none !important;
  }
  /* pull the menu section flush up under the hero title */
  #collection-6989e88999610e607a1d4f1a .page-section:nth-of-type(2),
  #collection-6989e8944757e761bbd63fb9 .page-section:nth-of-type(2) {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  #collection-6989e88999610e607a1d4f1a .page-section:nth-of-type(2) > .content-wrapper,
  #collection-6989e8944757e761bbd63fb9 .page-section:nth-of-type(2) > .content-wrapper {
    padding-top: 0 !important;
  }
  /* the menu blocks sit in a fluid grid with tall reserved rows before the first
     line; flex-stack them tight so price + items follow immediately */
  #collection-6989e88999610e607a1d4f1a .page-section:nth-of-type(2) .fluid-engine,
  #collection-6989e8944757e761bbd63fb9 .page-section:nth-of-type(2) .fluid-engine {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    grid-template-rows: none !important;
    grid-template-columns: none !important;
    /* The flexed menu ran text edge-to-edge (0 inset); Pizza sits ~23px in. Pad the
       menu so titles + descriptions stay within the same borders as every page. */
    padding-left: 23px !important;
    padding-right: 23px !important;
    box-sizing: border-box !important;
  }
  #collection-6989e88999610e607a1d4f1a .page-section:nth-of-type(2) .fluid-engine > .fe-block,
  #collection-6989e8944757e761bbd63fb9 .page-section:nth-of-type(2) .fluid-engine > .fe-block {
    grid-area: auto !important;
    grid-row: auto !important;
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
  }
  /* Desserts items 2 & 3 are their OWN blocks (not inside the item-1 block), so the
     72px item lead can't come from in-block margins — give those blocks the same
     gap between each other to match the Pizzas rhythm. */
  .fe-block-1e0bc2f8cc4aaeae70d8 { margin-top: 60px !important; }  /* item 2 */
  .fe-block-39a402d4ddd3b307ca38 { margin-top: 60px !important; }  /* item 3 */

  /* 1) Section top/bottom padding: calmer on phones (was up to ~200/104px) */
  .page-section.section-height--custom,
  .page-section.section-height--small,
  .page-section.section-height--medium,
  .page-section.section-height--custom > .content-wrapper,
  .page-section.section-height--small > .content-wrapper,
  .page-section.section-height--medium > .content-wrapper {
    padding-top: clamp(40px, 8vw, 72px) !important;
    padding-bottom: clamp(32px, 6vw, 56px) !important;
  }

  /* 2) Contact "call to book": the heading and phone pill were pinned to fixed
        grid rows that overlap once the heading wraps on a narrow screen. Give
        each its own non-overlapping row, full width, centered, with clear gap. */
  .fe-block-916612e5e07cbc8f0eba,
  .fe-block-523cda3f8fca79c5cf2b {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    align-self: auto !important;
    text-align: center !important;
  }
  /* Contact page: move the photo (was above) to BELOW the phone CTA so the order
     reads Thank-you → "book by calling us" → phone → picture. Render it big but
     inset to the SAME 16px border as every other page's pictures — NOT edge to
     edge. Force the wrappers + img to fill the block so it isn't a small centred
     thumbnail. */
  .fe-block-yui_3_17_2_1_1764702229989_13421 {
    grid-row: 55 / 62 !important;   /* right after the phone pill (row 54) so the
                                       picture sits a matched gap below the number,
                                       not ~156px lower */
    grid-column: 1 / -1 !important;
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    margin-top: 40px !important;    /* equal gap below the number (== above it) */
  }
  .fe-block-yui_3_17_2_1_1764702229989_13421 .fluid-image-container,
  .fe-block-yui_3_17_2_1_1764702229989_13421 .sqs-image-content,
  .fe-block-yui_3_17_2_1_1764702229989_13421 .image-block-wrapper,
  .fe-block-yui_3_17_2_1_1764702229989_13421 .sqs-block-content {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    inset: auto !important;
    transform: none !important;
  }
  .fe-block-yui_3_17_2_1_1764702229989_13421 img {
    position: static !important;
    inset: auto !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
    object-fit: cover !important;
  }
  /* The "…book by calling us" heading block reserves ~140px of grid-row height but
     its single line of text is only ~21px tall, leaving ~100px of dead space below
     the text before the phone pill. Collapse the block to its content height and
     pull the pill up so the number sits right under the text. */
  .fe-block-916612e5e07cbc8f0eba {
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
    margin-bottom: 0 !important;
  }
  .fe-block-523cda3f8fca79c5cf2b {
    align-self: start !important;
    grid-row: 54 / 55 !important;   /* directly under the heading (row 53) instead
                                       of its authored row 57, which floated it low */
    margin-top: 14px !important;    /* number sits close under the text above it */
  }
  .lala-tel {
    font-size: 1.2rem;
    padding: 10px 22px;
  }

  /* 3) Trim the gap between a heading and the block directly under it. The
        fluid grid often leaves an empty row between a title and its body text;
        pull adjacent blocks together a little on phones. */
  .fluid-engine { row-gap: 6px !important; }

  /* 4) Home "Who we are" + "Our suppliers" section: STOP fighting Squarespace's
        fixed per-block grid placement. On mobile we throw it away entirely and
        replace the fluid-engine with our OWN flex column, then set an explicit
        `order` on each block so the sequence is exactly right regardless of what
        grid-row/grid-column Squarespace assigned. Full width, centered, stacked.
        The ten supplier logos are wrapped back into their own 2-column grid. */
  section[data-section-id="6989e82883d7eb240f7d7052"] .fluid-engine {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
    padding-left: 16px !important;   /* keep logos off the screen edge */
    padding-right: 16px !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }
  section[data-section-id="6989e82883d7eb240f7d7052"] .fluid-engine > .fe-block {
    grid-area: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    text-align: center !important;
  }
  section[data-section-id="6989e82883d7eb240f7d7052"] .fluid-engine > .fe-block * {
    text-align: center !important;
  }
  /* explicit running order */
  .fe-block-5a699d9c2e9ccc81f9af { order: 1 !important; }  /* "Who we are" heading */
  .fe-block-9424efb3f6ffce2ed765 { order: 2 !important; }  /* welcome paragraph  */
  .fe-block-1dfe7d7cffc243e71ef8 { order: 3 !important; }  /* Learn more button (between text & video) */
  .fe-block-0bd9d632bada647776da { order: 4 !important; }  /* who-we-are video   */
  .fe-block-36fa7de7561828705f2d { order: 5 !important; }  /* "Our suppliers"    */
  /* logos = orders 6..15, then re-grouped into a 2-col grid via a wrapper flex */
  .fe-block-94c6ea46b8a09245b966 { order: 6 !important; }
  .fe-block-daeec86a338b9291742e { order: 7 !important; }
  .fe-block-8c39a5eb61d41108439f { order: 8 !important; }
  .fe-block-c19900ecfc00e8f3f9f8 { order: 9 !important; }
  .fe-block-23236113e6d5f7db0203 { order: 10 !important; }
  .fe-block-8ea009048d74f04262f9 { order: 11 !important; }
  .fe-block-7c7acc341b5c3b97ccc9 { order: 12 !important; }
  .fe-block-e606077d3cbbb4056f41 { order: 13 !important; }
  .fe-block-92bdbc75b83ccb7ff288 { order: 14 !important; }
  .fe-block-482757efb0177483b89e { order: 15 !important; }
  .fe-block-88c40dcf0000c1d9a564 { order: 16 !important; }  /* Instagram heading */
  /* The ten supplier logos: flex-wrap the column container so the 50%-width
     logo tiles pair two-per-row, while the full-width text/video blocks still
     each take a whole row. justify-content centers the pair. */
  section[data-section-id="6989e82883d7eb240f7d7052"] .fluid-engine {
    flex-flow: row wrap !important;
    justify-content: center !important;
  }
  /* full-width items force a line break by taking 100% */
  .fe-block-5a699d9c2e9ccc81f9af,
  .fe-block-9424efb3f6ffce2ed765,
  .fe-block-0bd9d632bada647776da,
  .fe-block-1dfe7d7cffc243e71ef8,
  .fe-block-36fa7de7561828705f2d,
  .fe-block-88c40dcf0000c1d9a564 {
    flex: 0 0 100% !important;
  }
  /* logo tiles: half width each, so two share a row */
  .fe-block-94c6ea46b8a09245b966, .fe-block-daeec86a338b9291742e,
  .fe-block-8c39a5eb61d41108439f, .fe-block-c19900ecfc00e8f3f9f8,
  .fe-block-23236113e6d5f7db0203, .fe-block-8ea009048d74f04262f9,
  .fe-block-7c7acc341b5c3b97ccc9, .fe-block-e606077d3cbbb4056f41,
  .fe-block-92bdbc75b83ccb7ff288, .fe-block-482757efb0177483b89e {
    flex: 0 0 calc(50% - 9px) !important;
    width: calc(50% - 9px) !important;
  }
  /* The who-we-are video uses Squarespace's position:absolute;inset:0 inside a
     wrapper sized by the grid cell. Once we flex the block, that wrapper lost
     its height (collapsed to 0), so the video pixels rendered absolutely and
     overlapped the "Our suppliers" heading. Give the block + its inner wrappers
     an explicit height on mobile so the video occupies real space and the
     heading sits cleanly below it. */
  .fe-block-0bd9d632bada647776da {
    height: 240px !important;
    min-height: 240px !important;
    position: relative !important;
    flex: 0 0 calc(100% - 32px) !important;  /* inset to match the 16px hero edge */
    width: calc(100% - 32px) !important;
    margin: 0 16px 8px 16px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }
  .fe-block-0bd9d632bada647776da .sqs-block,
  .fe-block-0bd9d632bada647776da .sqs-block-content,
  .fe-block-0bd9d632bada647776da .sqs-native-video,
  .fe-block-0bd9d632bada647776da .sqs-video-wrapper,
  .fe-block-0bd9d632bada647776da .sqs-block-video {
    height: 100% !important;
    min-height: 240px !important;
  }
  .fe-block-0bd9d632bada647776da video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Learn More button: the suppliers flex made its BLOCK full width, which is
     fine, but the BUTTON inside should stay a normal pill, centered — not span
     the whole page. Constrain the inner button to its content width. */
  .fe-block-1dfe7d7cffc243e71ef8 { text-align: center !important; }
  .fe-block-1dfe7d7cffc243e71ef8 .sqs-block-content,
  .fe-block-1dfe7d7cffc243e71ef8 .sqs-block-button-container {
    width: 100% !important;
    text-align: center !important;
  }
  /* Learn More: force it to exactly match the Instagram button dimensions
     (~166 x 54). In the who-we-are flex the button was stretching full-width and
     collapsing to 24px tall, so we pin its box size, center it, and restore the
     line-height/padding that give the --large button its height. */
  .fe-block-1dfe7d7cffc243e71ef8 { text-align: center !important; }
  .fe-block-1dfe7d7cffc243e71ef8 .sqs-block-content,
  .fe-block-1dfe7d7cffc243e71ef8 .sqs-block-button-container {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
  .fe-block-1dfe7d7cffc243e71ef8 .sqs-block-button-element {
    display: inline-flex !important;   /* inline-flex = content width, like IG */
    align-items: center !important;
    justify-content: center !important;
    height: 54px !important;           /* same rendered height as Instagram */
    width: fit-content !important;
    max-width: none !important;
    padding: 0 24px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  /* Who-we-are page: even, language-proof rhythm around the video. The old fixed
     negative margins were tuned to the 1-line English title; the longer Finnish
     title ("Kuka me olemme") wraps to 2 lines and the video then overlapped it.
     Replace the fixed grid with a flex column so spacing is content-driven and
     identical in every language: title → video → text with equal gaps. */
  #collection-67dc02dfc6808548e4c5e6e1 section[data-section-id="67dc02dfc6808548e4c5e6fb"] .fluid-engine {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px !important;
    grid-template-rows: none !important;
    grid-template-columns: none !important;
  }
  #collection-67dc02dfc6808548e4c5e6e1 section[data-section-id="67dc02dfc6808548e4c5e6fb"] .fluid-engine > .fe-block {
    grid-area: auto !important;
    grid-row: auto !important;
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
  }
  #collection-67dc02dfc6808548e4c5e6e1 .fe-block-0c8538983ff8894e33b6 { order: 1 !important; }  /* title */
  #collection-67dc02dfc6808548e4c5e6e1 .fe-block-yui_3_17_2_1_1743093267110_3102 { order: 2 !important; }  /* video */
  #collection-67dc02dfc6808548e4c5e6e1 .fe-block-912b0ba0ea214b4f6c57 { order: 3 !important; }  /* text */
  /* The video uses absolute positioning inside its block, so in the flex column the
     block collapsed to 0 height and the text rode up over the video. Give the block
     the video's real aspect ratio so it holds its height. */
  #collection-67dc02dfc6808548e4c5e6e1 .fe-block-yui_3_17_2_1_1743093267110_3102 {
    aspect-ratio: 1908 / 1080 !important;
    position: relative !important;
    overflow: hidden !important;
  }
  #collection-67dc02dfc6808548e4c5e6e1 .fe-block-yui_3_17_2_1_1743093267110_3102 .sqs-block,
  #collection-67dc02dfc6808548e4c5e6e1 .fe-block-yui_3_17_2_1_1743093267110_3102 .sqs-block-content,
  #collection-67dc02dfc6808548e4c5e6e1 .fe-block-yui_3_17_2_1_1743093267110_3102 .sqs-block-video,
  #collection-67dc02dfc6808548e4c5e6e1 .fe-block-yui_3_17_2_1_1743093267110_3102 .native-video-player,
  #collection-67dc02dfc6808548e4c5e6e1 .fe-block-yui_3_17_2_1_1743093267110_3102 .video-player {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  #collection-67dc02dfc6808548e4c5e6e1 .fe-block-yui_3_17_2_1_1743093267110_3102 video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Header vs hero: the header (logo + hamburger) is absolute & transparent, so
     on mobile it overlaps the hero photo/headline. Give it a solid bar and pad
     the top of the hero's CONTENT (not a margin on the section, which broke the
     background last time) so the title + hamburger sit on clean dark space and
     the hero content begins below them. The hero background image stays put. */
  header.header, header { background: #1c1a17 !important; }
  section.page-section:first-of-type .content-wrapper,
  section.page-section:first-of-type .fluid-engine {
    padding-top: 92px !important;
  }
}