/*
 * arti3an main stylesheet. One file, sections split by comments:
 *   1. LAYOUT: breakpoints, container, grid
 *   2. TYPOGRAPHY: tokens + tag defaults
 *   3. HEADER: sticky, fade-in, logo swap
 *   4. HEADER: menu colours, mobile menu
 *   5. PORTFOLIO: tabs, cards, gallery popup (112), lightbox
 *   6. CONTACT FORM: Gravity Forms #1
 *   7. FOOTER
 *   8. CHOOSE CARDS: hover reveal (component 71)
 */

/* ============================================================
   1. LAYOUT: breakpoints, container, grid
   ============================================================ */
/* BREAKPOINTS */
:root{
    --container-width: 1920px;
    --gutter: 80px;
    --container-pad: 24px; /* side padding of .bt__container below 1024px */
    /* Derived colours: built from the Elementor global variables, so they follow the palette */
    --primary-hover: color-mix(in srgb, var(--Primary) 85%, black);
    --overlay: color-mix(in srgb, var(--black) 85%, transparent);
    --motion: 0.3s; /* default transition; the header keeps its own slower timings */
}
.bt__container{
    width: 100%;
    max-width: var(--container-width);
    position: relative;
    margin-inline: auto;
}
.col__gutter{
    column-gap: var(--gutter) !important;
}
.both__gutter,
.both__gutter__loop .elementor-loop-container{
    gap: var(--gutter) !important;
}
.grid__3,
.grid__3__loop .elementor-loop-container{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid__col{
    grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid__col__4{
    grid-column: span 4 / span 4;
}
.grid__col__8{
    grid-column: span 8 / span 8;
}
@media (max-width: 2559px) {
    :root{
        --container-width: 1760px;
        --gutter: 64px;
    }
}
@media (max-width: 1919px) {
    :root{
        --container-width: 1312px;
        --gutter: 32px;
    }
}
@media (max-width: 1439px) {
    :root{
        --container-width: 1168px;
    }
}
@media (max-width: 1279px) {
    :root{
        --container-width: 960px;
        --gutter: 24px;
    }
    .grid__3,
    .grid__3__loop .elementor-loop-container{
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }
    .grid__3 > *,
    .grid__3__loop .elementor-loop-container > *{
        grid-column: span 6 / span 6;
    }
    .grid__3 > *:last-child,
    .grid__3__loop .elementor-loop-container > *:last-child{
        grid-column-start: 4;
    }
    .grid__col__4{
        grid-column: span 5 / span 5;
    }
    .grid__col__8{
        grid-column: span 7 / span 7;
    }
}
@media (max-width: 1023px) {
    .bt__container{
        padding-inline: var(--container-pad);
    }
    .grid__col{
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .grid__col__4,
    .grid__col__8{
        grid-column: span 1 / span 1;
    }
}
@media (max-width: 767px) {
    :root{
        --gutter: 16px;
    }
    .grid__3,
    .grid__3__loop .elementor-loop-container{
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    .grid__3 > *,
    .grid__3__loop .elementor-loop-container > *{
        grid-column: span 1 / span 1;
    }
    .grid__3 > *:last-child,
    .grid__3__loop .elementor-loop-container > *:last-child{
        grid-column-start: auto;
    }
}

/* ============================================================
   2. TYPOGRAPHY: tokens + tag defaults
   ============================================================ */
/* TYPE SCALE
   Tokens + default look per tag: h1/h2/h3/body style themselves, no class needed.
   Leave Site Settings > Typography font sizes empty so these tag rules apply.
   type__* classes are only for exceptions: an element that must look different
   from its tag (e.g. an h2 that looks like H3), or roles without a tag
   (type__label, type__button, type__navbar). */
:root{
    --type-h1: 48px;
    --type-h2: 40px;
    --type-h3: 32px;
    --type-h4: 24px;
    --type-body: 20px;
    --type-label: 16px;
    --type-eyebrow: 12px;
    --type-button: 20px;
    --type-navbar: 20px;
    --type-heading-lh: 1.2;
    --type-h3-lh: 1.3;
    --type-h4-lh: 1.4;
    --type-body-lh: 1.6;
    --type-label-lh: 1.2;
    --type-button-lh: 1;
    --type-navbar-lh: 1;
}
@media (max-width: 767px) {
    :root{
        --type-h1: 40px;
        --type-h2: 32px;
        --type-h3: 24px;
        --type-h4: 20px;
        --type-body: 16px;
    }
}
body{
    font-size: var(--type-body);
    line-height: var(--type-body-lh);
}
/* Elementor popups set their own line-height: 1.5 */
.elementor-popup-modal .dialog-message{
    line-height: inherit;
}
h1, h2, h3, h4, h5, h6{
    font-weight: 500;
    line-height: var(--type-heading-lh);
    color: var(--charcoal);
}
h1{ font-size: var(--type-h1); }
h2{ font-size: var(--type-h2); }
h3{ font-size: var(--type-h3); line-height: var(--type-h3-lh); }
h4{ font-size: var(--type-h4); line-height: var(--type-h4-lh); }
h5, h6{ font-size: var(--type-body); }

/* ============================================================
   3. HEADER: sticky, fade-in, logo swap
   ============================================================ */
/* ===== Sticky header height: anchor jumps stop below the bar =====
   main.js overwrites --navbar-height with the measured header height; these are the fallback. */
:root{
    --navbar-height: 93px;
}
@media (max-width: 767px) {
    :root{
        --navbar-height: 80px;
    }
}
section{
    scroll-margin-block-start: var(--navbar-height);
}

/* ===== Header base: hidden until JS adds .is-ready ===== */
.bt__header {
  /* hidden state: pushed up and transparent */
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;

  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.4s ease,
    box-shadow 0.4s ease;
}

/* ===== Fade in downward after the page is ready ===== */
.bt__header.is-ready {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ===== After scrolling past the next section ===== */
.bt__header.is-scrolled {
  background-color: var(--white);
  box-shadow: 4px 4px 10px var(--shadow);
}

/* ===== Logo swap (crossfade) ===== */
/* Replace these classes with the real classes of your logos */
.bt__header .logo__white,
.bt__header .logo__dark {
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* default: white logo visible, colored logo hidden */
.bt__header .logo__white { opacity: 1; visibility: visible; }
.bt__header .logo__dark { opacity: 0; visibility: hidden; }

/* scrolled: swap */
.bt__header.is-scrolled .logo__white { opacity: 0; visibility: hidden; }
.bt__header.is-scrolled .logo__dark { opacity: 1; visibility: visible; }

/* Stack both logos in the same spot so the crossfade doesn't shift the layout */
.bt__header .logo__white,
.bt__header .logo__dark {
  grid-area: 1 / 1;
}
.logo { /* the container that holds both logos */
  display: grid;
}

/* ============================================================
   4. HEADER: menu colours, mobile menu
   ============================================================ */
/* Header (template 378) — arti3an style. The mobile menu is Elementor's Mega Menu (V3) widget. */

/* Desktop menu: white over the hero, black once the sticky bar turns white (.is-scrolled) */
body .bt__header .navbar__item,
body .bt__header .navbar__item a {
	color: var(--soft-white);
	transition: color 0.4s;
}

body .bt__header.is-scrolled .navbar__item,
body .bt__header.is-scrolled .navbar__item a {
	color: var(--black);
}

body .bt__header .navbar__item a:hover,
body .bt__header .navbar__item a:focus-visible {
	color: var(--Primary);
}

@media (max-width: 767px) {
	/* Let the dropdown position itself against the header bar instead of the small toggle */
	.bt__header .header--mobile .header__menu-row,
	.bt__header .header--mobile .elementor-widget-n-menu,
	.bt__header .header--mobile .e-n-menu {
		position: static;
	}

	/* Mega Menu reads the item colour for the non-current, non-hovered state from this variable */
	.bt__header .header--mobile .e-n-menu {
		--n-menu-title-color-normal: var(--charcoal);
	}

	/* Hamburger: 44x44 tap target, white over the hero */
	.bt__header .header--mobile .e-n-menu-toggle {
		width: 44px;
		height: 44px;
		margin-inline-start: -12px;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: 0;
	}

	.bt__header .header--mobile .e-n-menu-toggle svg {
		width: 20px;
		height: 20px;
		fill: var(--soft-white);
		transition: fill 0.4s;
	}

	.bt__header .header--mobile .e-n-menu-toggle:focus-visible {
		outline: 2px solid var(--Primary);
		outline-offset: 2px;
	}

	/* Open menu: the bar turns white like the scrolled state */
	.bt__header:has(.e-n-menu-toggle[aria-expanded="true"]) {
		background-color: var(--white);
		box-shadow: 4px 4px 10px var(--shadow);
	}

	.bt__header:has(.e-n-menu-toggle[aria-expanded="true"]) .logo__white {
		opacity: 0;
		visibility: hidden;
	}

	.bt__header:has(.e-n-menu-toggle[aria-expanded="true"]) .logo__dark {
		opacity: 1;
		visibility: visible;
	}

	/* Gold hamburger on a white bar (scrolled or open) */
	.bt__header.is-scrolled .header--mobile .e-n-menu-toggle svg,
	.bt__header .header--mobile .e-n-menu-toggle[aria-expanded="true"] svg {
		fill: var(--Primary);
	}

	/* Dropdown panel: full width, directly under the bar. Elementor's JS sets an inline
	   --stretch-left/--stretch-width for full-width menus, so the position needs !important. */
	body .bt__header .header--mobile .e-n-menu[data-layout="dropdown"] .e-n-menu-wrapper {
		position: absolute;
		top: 100%;
		left: 0 !important;
		inset-inline-start: 0 !important;
		width: 100% !important;
		margin: 0;
		padding: 8px 0 0;
		background-color: var(--white);
		box-shadow: 0 12px 24px var(--shadow);
	}

	body .bt__header .header--mobile .e-n-menu .e-n-menu-title {
		padding: 22px 48px;
		background-color: transparent;
		border: 0;
	}

	/* Navbar type; the current section uses the same charcoal, gold on hover/focus */
	body .bt__header .header--mobile .e-n-menu .e-n-menu-title a,
	body .bt__header .header--mobile .e-n-menu .e-n-menu-title .e-n-menu-title-text {
		font-family: Poppins, sans-serif;
		font-size: var(--type-navbar);
		font-weight: 400;
		line-height: var(--type-navbar-lh);
		text-transform: uppercase;
		color: var(--charcoal);
		transition: color var(--motion);
	}

	body .bt__header .header--mobile .e-n-menu .e-n-menu-title:hover .e-n-menu-title-text,
	body .bt__header .header--mobile .e-n-menu .e-n-menu-title a:focus-visible .e-n-menu-title-text {
		color: var(--Primary);
	}

	/* Gold divider + logo at the bottom of the open panel */
	body .bt__header .header--mobile .e-n-menu .e-n-menu-wrapper::after {
		content: "";
		display: block;
		height: 138px;
		margin: 8px 24px 0;
		border-top: 1px solid var(--Primary);
		background: var(--a3-header-dark-logo) center 24px / 180px auto no-repeat;
	}
}

/* ============================================================
   5. PORTFOLIO: tabs, cards, gallery popup (112), lightbox
   ============================================================ */
.popup__filler .swiper-slide-inner{
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.popup__filler .swiper-pagination-bullets{
    bottom: 0;
    display: flex;
    justify-content: center;
}
.popup__filler .swiper{
padding-bottom: 52px;
}


/* Portfolio section (tabs element, global class .portfolio__tabs) — arti3an style. Type sizes come from the kit's --type-* tokens. */

/* Heading and filter buttons share one row; intro text and cards go full width below.
   Gutter is horizontal only; vertical spacing follows Figma (heading → intro 24, intro → cards 40). */
body .elementor .portfolio__tabs {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--gutter);
	row-gap: 24px;
}

body .elementor .portfolio__tabs > .section__heading {
	flex: 1 1 auto;
	width: auto;
}

body .elementor .portfolio__tabs > .e-tabs-menu-base {
	flex: 0 0 auto;
	width: auto;
	gap: 24px;
	justify-content: flex-end;
}

body .elementor .portfolio__tabs > .e-paragraph-base,
body .elementor .portfolio__tabs > .e-tabs-content-area-base {
	flex: 0 0 100%;
}

body .elementor .portfolio__tabs > .e-tabs-content-area-base {
	margin-top: 16px;
}

body .elementor .portfolio__tabs .e-tab-content-base {
	padding: 0;
}

/* Filter buttons: Button type */
body .elementor .portfolio__tabs .e-tab-base {
	width: auto;
	min-width: 193px;
	height: 40px;
	padding: 0 24px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--Primary);
	background-color: transparent;
	border: 2px solid var(--Primary);
	border-radius: 8px;
	transition: background-color var(--motion) ease, color var(--motion) ease;
}

body .elementor .portfolio__tabs .e-tab-base:hover {
	background-color: color-mix(in srgb, var(--Primary) 12%, transparent);
}

body .elementor .portfolio__tabs .e-tab-base.e--selected {
	color: var(--soft-white);
	background-color: var(--Primary);
	border-color: var(--Primary);
}

body .elementor .portfolio__tabs .e-tab-base:focus-visible {
	outline: 2px solid var(--Primary);
	outline-offset: 3px;
}

body .elementor .portfolio__tabs .e-tab-base .e-paragraph-base {
	font-family: Poppins, sans-serif;
	font-size: var(--type-button);
	font-weight: 400;
	line-height: var(--type-button-lh);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: inherit;
}

/* Card title and location live in loop item 97, whose local styles still hardcode
   24px/20px and can't be saved through MCP. These rules put them on the type
   tokens (title = H4 per Figma); drop them once those local sizes are cleared. */
body .elementor .portfolio__tabs .swiper-slide h3.e-heading-base {
	margin-top: 16px;
	font-size: var(--type-h4);
	line-height: var(--type-h4-lh);
	text-align: left;
	text-transform: none;
}

/* Location line under the card title. The card is a <button> (opens the gallery popup),
   which the kit sets to uppercase */
body .elementor .portfolio__tabs .swiper-slide h3.e-heading-base + p.e-paragraph-base {
	margin: 4px 0 0;
	font-size: var(--type-body);
	line-height: var(--type-body-lh);
	text-align: left;
	text-transform: none;
	color: var(--secondary-gray);
}

/* Carousel dots: in normal flow under the cards (Elementor positions them absolutely by default) */
body .elementor .portfolio__tabs .elementor-widget-loop-carousel > .swiper-pagination {
	position: static;
	left: auto;
	transform: none;
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-top: 40px;
}

body .elementor .portfolio__tabs .elementor-widget-loop-carousel > .swiper-pagination .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	margin: 0;
	opacity: 1;
	background-color: var(--primary-gray);
	transition: background-color var(--motion) ease;
}

body .elementor .portfolio__tabs .elementor-widget-loop-carousel > .swiper-pagination .swiper-pagination-bullet-active {
	background-color: var(--Primary);
}

/* ---------------------------------------------------------------
   Project gallery popup (112). The theme's JS moves the clicked card's
   .popup__filler (section heading + image carousel) into #popup__wrapper,
   which is a .bt__container: side spacing comes from that class only.
   --------------------------------------------------------------- */
#elementor-popup-modal-112 .dialog-widget-content {
	background-color: var(--soft-white);
}

#elementor-popup-modal-112 #popup__wrapper {
	padding-top: 40px;
	padding-bottom: 32px;
}

/* Close: right edge on the .bt__container content edge. The popup content spans
   100vw while the close button's box stops at the scrollbar, hence the vw maths;
   below 1024px the container is full width with --container-pad on each side. */
#elementor-popup-modal-112 .dialog-close-button {
	top: 36px;
	right: calc(100% - 50vw - min(var(--container-width), 100vw - 2 * var(--container-pad)) / 2);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: var(--soft-white);
	background-color: var(--Primary);
	border-radius: 50%;
	transition: background-color var(--motion) ease;
}

#elementor-popup-modal-112 .dialog-close-button:hover,
#elementor-popup-modal-112 .dialog-close-button:focus-visible {
	background-color: var(--primary-hover);
}

#elementor-popup-modal-112 .dialog-close-button svg {
	width: 12px;
	height: 12px;
	fill: var(--soft-white);
}

/* Popup title keeps the h2 tag look; just leave room for the close button */
#popup__wrapper .popup__filler h2.e-heading-base {
	padding-right: 56px;
	text-transform: none;
}

/* Location line (a Paragraph directly inside .popup__filler) */
#popup__wrapper .popup__filler > p.e-paragraph-base {
	margin: 4px 0 0;
	text-align: left;
	text-transform: none;
}

#popup__wrapper .popup__filler .elementor-widget-image-carousel {
	margin-top: 36px;
}

#popup__wrapper .elementor-widget-image-carousel .swiper-slide-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	cursor: zoom-in;
}

#popup__wrapper .elementor-pagination-position-outside .swiper {
	padding-bottom: 0;
}

#popup__wrapper .elementor-widget-image-carousel .swiper-pagination {
	position: static;
	left: auto;
	transform: none;
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 28px;
}

#popup__wrapper .elementor-widget-image-carousel .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	margin: 0;
	opacity: 1;
	background-color: var(--primary-gray);
	transition: background-color var(--motion) ease;
}

#popup__wrapper .elementor-widget-image-carousel .swiper-pagination-bullet-active {
	background-color: var(--Primary);
}

/* ---------------------------------------------------------------
   Image lightbox (Elementor slideshow lightbox, opened from the gallery popup)
   --------------------------------------------------------------- */
body .elementor-lightbox {
	background-color: var(--overlay);
	--a3-lightbox-edge: 20px;
	--a3-lightbox-arrow: 44px;
	--a3-lightbox-close-top: 20px;
	--a3-lightbox-close-size: 40px;
	--a3-lightbox-tool-size: 30px; /* Elementor's toolbar icon box */
}

/* Close: gold circle, top right. Elementor adds a 13px top margin; drop it so
   the circle and the toolbar share one centre line. */
body .elementor-lightbox .dialog-lightbox-close-button {
	top: var(--a3-lightbox-close-top);
	right: 20px;
	width: var(--a3-lightbox-close-size);
	height: var(--a3-lightbox-close-size);
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--soft-white);
	background-color: var(--Primary);
	border-radius: 50%;
	opacity: 1;
	transition: background-color var(--motion) ease;
}

body .elementor-lightbox .dialog-lightbox-close-button:hover,
body .elementor-lightbox .dialog-lightbox-close-button:focus-visible {
	background-color: var(--primary-hover);
}

body .elementor-lightbox .dialog-lightbox-close-button:focus-visible {
	outline: 2px solid var(--soft-white);
	outline-offset: 3px;
}

body .elementor-lightbox .dialog-lightbox-close-button svg {
	width: 14px;
	height: 14px;
	fill: var(--soft-white);
}

/* Toolbar (counter, fullscreen, zoom, share): white icons, centred on the close button's line */
body .elementor-lightbox .elementor-slideshow__header {
	padding-top: calc(var(--a3-lightbox-close-top) + (var(--a3-lightbox-close-size) - var(--a3-lightbox-tool-size)) / 2);
	padding-right: calc(var(--a3-lightbox-close-size) + 40px);
	padding-bottom: 20px;
	padding-left: 20px;
	color: var(--soft-white);
}

body .elementor-lightbox .elementor-slideshow__header > svg {
	width: 20px;
	height: 20px;
	fill: var(--soft-white);
	opacity: 0.85;
	transition: fill var(--motion) ease, opacity var(--motion) ease;
}

body .elementor-lightbox .elementor-slideshow__header > svg:hover,
body .elementor-lightbox .elementor-slideshow__header > svg:focus-visible {
	fill: var(--Primary);
	opacity: 1;
}

body .elementor-lightbox .elementor-slideshow__header > svg:focus-visible {
	outline: 2px solid var(--Primary);
	outline-offset: 3px;
}

body .elementor-lightbox .elementor-slideshow__counter {
	font-family: Poppins, sans-serif;
	font-size: var(--type-label);
	line-height: var(--type-label-lh);
	color: var(--soft-white);
}

/* Prev/next: gold rounded squares near the edges. Elementor already centres them
   vertically with translateY(-50%) and pins them to the edge with
   ".elementor-lightbox .swiper .elementor-swiper-button-prev/next", hence ".swiper" here. */
body .elementor-lightbox .swiper .elementor-swiper-button {
	top: 50%;
	width: var(--a3-lightbox-arrow);
	height: var(--a3-lightbox-arrow);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: var(--soft-white);
	background-color: var(--Primary);
	border-radius: 4px;
	transition: background-color var(--motion) ease;
}

body .elementor-lightbox .swiper .elementor-swiper-button-prev {
	left: var(--a3-lightbox-edge);
	right: auto;
}

body .elementor-lightbox .swiper .elementor-swiper-button-next {
	right: var(--a3-lightbox-edge);
	left: auto;
}

body .elementor-lightbox .swiper .elementor-swiper-button:hover,
body .elementor-lightbox .swiper .elementor-swiper-button:focus-visible {
	background-color: var(--primary-hover);
}

body .elementor-lightbox .swiper .elementor-swiper-button:focus-visible {
	outline: 2px solid var(--soft-white);
	outline-offset: 3px;
}

body .elementor-lightbox .swiper .elementor-swiper-button svg {
	width: 18px;
	height: 18px;
	fill: var(--soft-white);
}

body .elementor-lightbox .elementor-lightbox-image {
	border-radius: 4px;
}

@media (max-width: 767px) {
	/* Mobile order: heading, intro text, filter buttons, cards */
	body .elementor .portfolio__tabs > .section__heading {
		order: 0;
	}

	body .elementor .portfolio__tabs > .e-paragraph-base {
		order: 1;
	}

	body .elementor .portfolio__tabs > .e-tabs-menu-base {
		order: 2;
	}

	body .elementor .portfolio__tabs > .e-tabs-content-area-base {
		order: 3;
	}

	body .elementor .portfolio__tabs > .section__heading,
	body .elementor .portfolio__tabs > .e-tabs-menu-base {
		flex: 0 0 100%;
	}

	/* Figma mobile: two 170x40 buttons, 26px apart, centred.
	   Vertical: heading → intro 24, intro → buttons 32, buttons → cards 32 */
	body .elementor .portfolio__tabs > .e-tabs-menu-base {
		gap: 26px;
		justify-content: center;
		margin-top: 8px;
	}

	body .elementor .portfolio__tabs > .e-tabs-content-area-base {
		margin-top: 8px;
	}

	body .elementor .portfolio__tabs .e-tab-base {
		flex: 0 1 170px;
		min-width: 0;
		padding: 0 12px;
	}

	body .elementor .portfolio__tabs .elementor-widget-loop-carousel > .swiper-pagination {
		gap: 16px;
		margin-top: 28px;
	}

	/* Popup on mobile: close button on its own row, centred heading block below it */
	#elementor-popup-modal-112 #popup__wrapper {
		padding-top: 76px;
		padding-bottom: 24px;
	}

	#elementor-popup-modal-112 .dialog-close-button {
		top: 20px;
		width: 36px;
		height: 36px;
	}

	#popup__wrapper .popup__filler h2.e-heading-base {
		padding-right: 0;
	}

	#popup__wrapper .popup__filler > p.e-paragraph-base {
		text-align: center;
	}

	#popup__wrapper .popup__filler .elementor-widget-image-carousel {
		margin-top: 24px;
	}

	#popup__wrapper .elementor-widget-image-carousel .swiper-pagination {
		gap: 14px;
		margin-top: 20px;
	}

	body .elementor-lightbox {
		--a3-lightbox-edge: 8px;
		--a3-lightbox-arrow: 36px;
		--a3-lightbox-close-top: 12px;
		--a3-lightbox-close-size: 36px;
	}

	body .elementor-lightbox .dialog-lightbox-close-button {
		right: 12px;
	}

	body .elementor-lightbox .elementor-slideshow__header {
		padding-right: calc(var(--a3-lightbox-close-size) + 24px);
		padding-bottom: 12px;
		padding-left: 12px;
	}
}

/* ============================================================
   6. CONTACT FORM: Gravity Forms #1
   ============================================================ */
/* Contact form (Gravity Forms #1) — arti3an style. Type sizes come from the kit's --type-* tokens. */
#gform_wrapper_1.gform_wrapper {
	--a3-text: var(--charcoal);
	--a3-muted: color-mix(in srgb, var(--black) 50%, transparent); /* placeholder */
	--a3-border: var(--border);
	--a3-gold: var(--Primary);
	--a3-gold-hover: var(--primary-hover);
	--a3-gold-ring: color-mix(in srgb, var(--a3-gold) 22%, transparent);
	--a3-required: var(--error);
	--a3-field-h: 56px;
	--a3-textarea-h: 108px;
	--a3-field-type: 16px;
	--a3-label-type: 12px;
}

/* Gutter between columns (rules), Figma 32 between rows */
#gform_wrapper_1 .gform_fields {
	column-gap: var(--gutter);
	row-gap: 32px;
}

/* Keep every field inside its column */
#gform_wrapper_1 .gfield,
#gform_wrapper_1 .ginput_container,
#gform_wrapper_1 .gfield input,
#gform_wrapper_1 .gfield textarea,
#gform_wrapper_1 .gform-phone,
#gform_wrapper_1 .gform-phone__input-wrapper {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

#gform_wrapper_1 .gfield input[type="text"],
#gform_wrapper_1 .gfield input[type="email"],
#gform_wrapper_1 .gfield textarea,
#gform_wrapper_1 .gform-phone__input-wrapper {
	width: 100%;
}

#gform_wrapper_1 .gform-phone__input-wrapper {
	grid-template-columns: auto minmax(0, 1fr);
}

/* Labels: Figma 10/15 Poppins Medium, bumped to 12 */
#gform_wrapper_1 .gfield_label,
#gform_wrapper_1 .gfield_label .gform-field-label__text {
	font-size: var(--a3-label-type);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--a3-text);
	margin-bottom: 8px;
}

#gform_wrapper_1 .gfield_required,
#gform_wrapper_1 .gfield_required_asterisk {
	color: var(--a3-required);
	margin-left: 0;
	padding-left: 0;
	font-size: inherit;
	font-weight: inherit;
}

/* Asterisk sits tight against the label, a size up so it reads like the Figma red * */
#gform_wrapper_1 .gfield_required_asterisk {
	font-size: 16px;
	line-height: 0;
}

/* Text inputs + textarea: Figma 46h/14px, set to 56h/16px */
#gform_wrapper_1 .gfield input[type="text"],
#gform_wrapper_1 .gfield input[type="email"],
#gform_wrapper_1 .gfield textarea {
	height: var(--a3-field-h);
	padding: 0 17px;
	font-size: var(--a3-field-type);
	color: var(--a3-text);
	background-color: var(--white);
	border: 1px solid var(--a3-border);
	border-radius: 2px;
	box-shadow: none;
	transition: border-color var(--motion) ease, box-shadow var(--motion) ease;
}

#gform_wrapper_1 .gfield textarea {
	height: var(--a3-textarea-h);
	min-height: var(--a3-textarea-h);
	min-block-size: var(--a3-textarea-h);
	padding: 13px 17px;
	line-height: var(--type-body-lh);
	resize: vertical;
}

#gform_wrapper_1 .gfield input::placeholder,
#gform_wrapper_1 .gfield textarea::placeholder {
	color: var(--a3-muted);
	opacity: 1;
}

#gform_wrapper_1 .gfield input[type="text"]:focus,
#gform_wrapper_1 .gfield input[type="email"]:focus,
#gform_wrapper_1 .gfield textarea:focus {
	outline: none;
	border-color: var(--a3-gold);
	box-shadow: 0 0 0 3px var(--a3-gold-ring);
}

/* Phone: flag + dial code and number inside one field */
#gform_wrapper_1 .gform-phone__input-wrapper {
	height: var(--a3-field-h);
	background-color: var(--white);
	border: 1px solid var(--a3-border);
	border-radius: 2px;
	overflow: hidden;
	transition: border-color var(--motion) ease, box-shadow var(--motion) ease;
}

#gform_wrapper_1 .gform-phone__input-wrapper:focus-within {
	border-color: var(--a3-gold);
	box-shadow: 0 0 0 3px var(--a3-gold-ring);
}

#gform_wrapper_1 .gform-phone__country-selector {
	height: 100%;
	padding: 0 12px 0 17px;
	gap: 8px;
	font-size: var(--a3-field-type);
	color: var(--a3-text);
	background-color: transparent;
	border: 0;
	border-right: 1px solid var(--a3-border);
	border-radius: 0;
	box-shadow: none;
}

#gform_wrapper_1 .gform-phone__country-selector:hover,
#gform_wrapper_1 .gform-phone__country-selector:focus {
	background-color: var(--soft-white);
	outline: none;
}

#gform_wrapper_1 .gform-phone__dial-code {
	color: var(--a3-text);
}

#gform_wrapper_1 .gform-phone__input-wrapper input.gform-phone__input {
	height: 100%;
	padding: 0 17px;
	font-size: var(--a3-field-type);
	color: var(--a3-text);
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

#gform_wrapper_1 .gform-phone__input-wrapper input.gform-phone__input:focus {
	outline: none;
	box-shadow: none;
}

#gform_wrapper_1 .gform-phone__dropdown {
	border: 1px solid var(--a3-border);
	border-radius: 2px;
	box-shadow: 0 12px 32px var(--shadow);
}

/* Character counter: Label type */
#gform_wrapper_1 .charleft {
	margin-top: 8px;
	font-size: var(--type-label);
	line-height: var(--type-label-lh);
	color: var(--a3-muted);
}

/* Submit: Button type */
#gform_wrapper_1 .gform_footer {
	margin-top: 32px;
	padding: 0;
}

#gform_wrapper_1 .gform_footer .gform_button {
	width: 100%;
	height: 56px;
	padding: 0 32px;
	font-size: var(--type-button);
	font-weight: 400;
	line-height: var(--type-button-lh);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--soft-white);
	background-color: var(--a3-gold);
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	cursor: pointer;
	transition: background-color var(--motion) ease, transform var(--motion) ease;
}

#gform_wrapper_1 .gform_footer .gform_button:hover,
#gform_wrapper_1 .gform_footer .gform_button:focus {
	background-color: var(--a3-gold-hover);
	outline: none;
}

#gform_wrapper_1 .gform_footer .gform_button:active {
	transform: translateY(1px);
}

/* Tablet (rules: 768–1023): name + email side by side, phone on its own row so the number has room */
@media (min-width: 641px) and (max-width: 1023px) {
	#gform_wrapper_1 .gform_fields .gfield--width-third {
		grid-column: span 6;
	}

	#gform_wrapper_1 .gform_fields .gfield--type-phone {
		grid-column: 1 / -1;
	}
}

/* The white form card is the V3 HTML widget that holds the form; its V3 padding is the same
   at every size. Targeted by content, not element id, so it survives being rebuilt. */
@media (max-width: 1023px) {
	body .elementor .elementor-widget-html:has(#gform_wrapper_1) {
		padding: 40px 32px 32px;
	}
}

@media (max-width: 767px) {
	/* Figma mobile form card */
	body .elementor .elementor-widget-html:has(#gform_wrapper_1) {
		padding: 41px 17px;
		border: 1px solid var(--border);
		border-radius: 4px;
		box-shadow: 0 4px 20px var(--shadow);
	}

	#gform_wrapper_1 .gform_fields {
		row-gap: 24px;
	}
}

/* Gravity Forms stacks fields to one column here; its 12-track grid would otherwise multiply the gap */
@media (max-width: 640px) {
	#gform_wrapper_1 .gform_fields {
		column-gap: 0;
	}
}

/* ============================================================
   7. FOOTER
   ============================================================ */
/* Footer (template 407): Figma 13/1.6, rounded to 14 */
.elementor-location-footer .e-paragraph-base,
.elementor-location-footer .e-paragraph-base a {
	font-size: 14px;
	line-height: 1.6;
}

/* ============================================================
   8. CHOOSE CARDS: hover reveal (component 71)
   ============================================================ */
/* Hover hides the image and reveals the description. The description animates to
   exactly the image height with the same timing, so image + description stays constant:
   the card and its row never grow or shrink. Mobile shows everything, no hover.
   .elementor prefix: the component's own transitions would win otherwise. */
.choose__card {
	container-type: inline-size;
	/* Image height / card width. Must match the image's aspect-ratio (416/342) in component 71 */
	--choose-img-ratio: calc(342 / 416);
}

.elementor .choose__card > div:has(img) {
	transition: grid-template-rows var(--motion) ease;
}

.elementor .choose__card span {
	transition: opacity var(--motion) ease;
}

@media (min-width: 768px) {
	.elementor .choose__card p {
		height: 0;
		transition: height var(--motion) ease, max-height var(--motion) ease;
	}

	.choose__card:hover > div:has(img),
	.choose__card:focus-within > div:has(img) {
		grid-template-rows: 0fr;
	}

	.elementor .choose__card:hover p,
	.elementor .choose__card:focus-within p {
		height: calc(100cqw * var(--choose-img-ratio));
		max-height: calc(100cqw * var(--choose-img-ratio));
	}

	.choose__card:hover span,
	.choose__card:focus-within span {
		opacity: 1;
	}
}