/* =========================================================================
   Designs By Nhyi — Responsive layers
   Breakpoints: 1180 (nav→burger), 1100, 980, 820, 600, 420 and 359.
   ========================================================================= */

/* The navigation has collapsed into a touch-first interface throughout this
   range, so secondary controls and footer destinations use the same target
   floor instead of waiting for the narrowest phone breakpoint. */
@media (max-width: 1180px) {
	.dbn-filter { min-height: 44px; }
	.dbn-footer a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
}

@media (max-width: 1100px) {
	.dbn-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.dbn-grid--services { grid-template-columns: repeat(2, 1fr); }
	.dbn-grid--packages { grid-template-columns: repeat(2, 1fr); }
	.dbn-process { grid-template-columns: repeat(2, 1fr); }
	.dbn-process--5 { grid-template-columns: repeat(3, 1fr); }
	.dbn-reels-row { grid-template-columns: repeat(2, 1fr); }
	.dbn-vendor-grid.dbn-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* Layout collapse for split sections. The nav→burger collapse itself lives in
   ONE place: the 1180px block in main.css (kept in sync with main.js). The
   980px rules that duplicated it were removed to avoid two sources of truth. */
@media (max-width: 980px) {
	:root { --dbn-gutter: clamp(1.1rem, 4vw, 2rem); }

	.dbn-mobile__head { margin-bottom: clamp(1.5rem, 5vh, 3rem); }

	.dbn-hero__inner,
	.dbn-intro__inner, .dbn-story__inner, .dbn-stands__inner, .dbn-venue__inner,
	.dbn-audience__inner, .dbn-spotlight__inner, .dbn-weddings-preview__inner, .dbn-experience-preview__inner,
	.dbn-unsure__inner, .dbn-waitlist__inner, .dbn-contact__inner {
		grid-template-columns: 1fr;
	}
	/* On phones/tablets, introduce the founder's story before repeating her
	   portrait; other split sections keep their authored media/text sequence. */
	.dbn-story__text { order: 1; }
	.dbn-story__media { position: static; order: 2; }
	.dbn-weddings-preview__media { order: 2; }

	.dbn-project__body { grid-template-columns: 1fr; }
	.dbn-project--concise .dbn-project__intro { grid-template-columns: 1fr; }
	.dbn-project--concise .dbn-project__lead { max-width: 48rem; }
	.dbn-detail-grid { grid-template-columns: repeat(3, 1fr); }
	.dbn-brandworld__grid { grid-template-columns: repeat(2, 1fr); }
	.dbn-brandworld__item--0 { grid-row: auto; }
	.dbn-brandworld__item--4 { grid-column: span 2; }
	.dbn-footer__top { grid-template-columns: 1fr 1fr; }
	.dbn-footer__brand { grid-column: 1 / -1; }
}

/* Tablet is an authored middle composition, not the one-pixel handoff between
   phone stacking and desktop density. It keeps the touch navigation while
   restoring editorial splits, stronger media proportions and deliberate
   copy-to-image rhythm throughout the 821–1180px range. */
@media (min-width: 821px) and (max-width: 1180px) {
	:root {
		--dbn-section-y: clamp(3.5rem, 6.5vw, 4.75rem);
		--dbn-tablet-radius: clamp(20px, 2.5vw, 28px);
	}

	/* The existing owner-managed menu becomes a useful two-panel tablet
	   composition instead of leaving its lower half visually unoccupied. */
	.dbn-mobile {
		display: grid;
		grid-template-columns: minmax(0, 1.18fr) minmax(15rem, 0.82fr);
		grid-template-rows: auto auto minmax(0, 1fr);
		column-gap: clamp(2.5rem, 7vw, 6rem);
		align-content: start;
	}
	.dbn-mobile__head { grid-column: 1 / -1; margin-bottom: clamp(1.5rem, 4vh, 2.75rem); }
	.dbn-mobile__nav { grid-column: 1; grid-row: 2 / 4; min-width: 0; }
	.dbn-mobile__menu { margin-bottom: 0; }
	.dbn-mobile__menu a,
	.dbn-mobile__menu .dbn-menu__toggle { font-size: clamp(1.8rem, 3.4vw, 2.65rem); line-height: 1.08; }
	.dbn-mobile__cta { grid-column: 2; grid-row: 2; align-self: start; }
	.dbn-mobile__contact { grid-column: 2; grid-row: 3; align-self: end; margin-top: 0; }

	.dbn-hero:not(.dbn-hero--immersive) .dbn-hero__inner:not(.dbn-hero__inner--center) {
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
		gap: clamp(1.75rem, 3.8vw, 3rem);
	}
	.dbn-hero__title,
	.dbn-hero__title--xl { font-size: clamp(2.75rem, 5.4vw, 4.25rem); line-height: 1; }
	.dbn-hero__sub { max-width: 42rem; }
	.dbn-hero__media { margin-top: 0; }
	.dbn-hero__media--pair > *:last-child { margin-top: 1rem; }
	.dbn-collage__item--1,
	.dbn-collage__item--3,
	.dbn-collage__item--5 { margin-top: clamp(0.9rem, 2.3vw, 1.5rem); }

	.dbn-btn { min-height: 48px; }
	.dbn-filter { min-height: 46px; }
	.dbn-cta-band__inner { gap: clamp(2rem, 5vw, 4rem); }

	/* The approved copy-first project opening continues on tablets, with a
	   compact handoff that does not borrow the desktop negative overlap. */
	.single-dbn_portfolio .dbn-project__hero { padding-bottom: clamp(1.25rem, 2.5svh, 1.75rem); }
	.single-dbn_portfolio .dbn-project__feature { margin-top: clamp(1.25rem, 2.8vw, 2rem); }
	.single-dbn_portfolio .dbn-project--concise .dbn-project__feature--concise { margin-top: clamp(1rem, 2.2vw, 1.5rem); }
}

/* Portrait tablets need art with enough scale to read; three narrow columns
   are a desktop density decision, not an intentional touch composition. */
@media (min-width: 821px) and (max-width: 900px) {
	.dbn-portfolio-grid,
	.dbn-gallery-masonry { columns: 2; }
	.dbn-wedding-services.dbn-grid--3,
	.dbn-collab-grid.dbn-grid--3,
	.dbn-template-foundri .dbn-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 821px) and (max-width: 1180px) and (max-height: 720px) and (orientation: landscape) {
	:root { --dbn-section-y: clamp(3rem, 7vh, 3.5rem); }
	.dbn-hero__title,
	.dbn-hero__title--xl { font-size: clamp(2.65rem, 5.2vw, 3.8rem); }
}

@media (max-width: 820px) {
	:root { --dbn-section-y: clamp(3rem, 9vw, 4.5rem); }

	.dbn-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.dbn-portfolio-grid { columns: 2; }
	.dbn-gallery-masonry { columns: 2; }

	.dbn-service-card--lg, .dbn-service-card--lg:nth-child(even) { flex-direction: column; }
	.dbn-service-card--lg .dbn-service-card__media { flex-basis: auto; }

	/* Featured portfolio: simpler stacking */
	.dbn-portfolio-featured { grid-template-columns: repeat(2, 1fr); }
	.dbn-portfolio-featured > .dbn-portfolio-card--lg { grid-column: span 2; }
	.dbn-portfolio-featured > .dbn-portfolio-card--md { grid-column: span 1; }

	.dbn-hero__media--pair > *:last-child { margin-top: 0; }
	.dbn-collage__item { margin-top: 0 !important; }
	/* The stacked grid already supplies the media handoff; a second top margin
	   made page openings feel looser than the sections that followed them. */
	.dbn-hero__media { margin-top: 0; }
	.dbn-cta-band__inner { flex-direction: column; align-items: flex-start; gap: 1.5rem; text-align: left; }
	.dbn-cta-band--feature .dbn-cta-band__inner { align-items: center; text-align: center; }
	/* Component headings embedded in rich-text wrappers must not inherit the
	   long-form article spacing intended for later prose h2 elements. */
	.dbn-prose .dbn-heading__title { margin-top: 0; }

	/* Keep project copy and its first image in one deliberate mobile opening.
	   Full motion adds the cinematic timing in motion.css; these measurements
	   also protect Subtle, Off and reduced-motion visitors from a loose gap. */
	.single-dbn_portfolio .dbn-project__hero { padding-bottom: clamp(1rem, 2.4svh, 1.25rem); }
	.single-dbn_portfolio .dbn-project__feature { margin-top: clamp(1rem, 4vw, 1.5rem); }
	.single-dbn_portfolio .dbn-project--concise .dbn-project__feature--concise { margin-top: 1rem; }
}

@media (max-width: 600px) {
	:root {
		--dbn-gutter: clamp(0.95rem, 4.5vw, 1.25rem);
		--dbn-section-y: clamp(3rem, 13vw, 4rem);
		--dbn-radius: 12px;
		--dbn-radius-lg: 18px;
	}
	body { font-size: 1rem; line-height: 1.6; }
	.dbn-header__inner { min-height: var(--dbn-header-h); }
	.dbn-header__brand img { max-height: 27px; }
	.dbn-header__title { font-size: 1.22rem; }
	.dbn-mobile {
		padding-left: max(var(--dbn-gutter), env(safe-area-inset-left));
		padding-right: max(var(--dbn-gutter), env(safe-area-inset-right));
	}
	.dbn-mobile__brand { font-size: 1.2rem; }
	.dbn-mobile__menu a { font-size: clamp(1.45rem, 7vw, 1.85rem); line-height: 1.12; padding-block: 0.72rem; }
	.dbn-mobile__menu .sub-menu { padding-left: 0.75rem; }
	.dbn-mobile__menu .sub-menu a { font-family: var(--dbn-sans); font-size: 1rem; padding-block: 0.6rem; }
	.dbn-mobile__contact { gap: 0.7rem 1.2rem; }
	.dbn-mobile__contact a { min-height: 44px; display: inline-flex; align-items: center; font-size: var(--dbn-fs-md); }

	.dbn-section { padding-block: var(--dbn-section-y); }
	.dbn-heading { margin-bottom: 1.8rem; }
	.dbn-heading__title { font-size: clamp(1.75rem, 8vw, 2.1rem); }
	.dbn-heading__intro { font-size: 1rem; }
	.dbn-eyebrow { margin-bottom: 0.75rem; font-size: 0.68rem; }

	.dbn-hero { padding-block: 2.4rem 3.25rem; }
	.dbn-hero__text,
	.dbn-heading,
	.dbn-contact__form,
	.dbn-contact__chat {
		width: min(100%, calc(100vw - (2 * var(--dbn-gutter))));
		min-width: 0;
		max-width: 100%;
	}
	.dbn-container > *,
	.dbn-hero__inner > *,
	.dbn-contact__inner > * {
		min-width: 0;
	}
	.dbn-hero__inner { gap: 2rem; }
	.dbn-hero__title, .dbn-hero__title--xl {
		max-width: 100%;
		font-size: clamp(2rem, 10vw, 2.55rem);
		line-height: 1.02;
		overflow-wrap: break-word;
		word-break: normal;
	}
	.dbn-heading__title,
	.dbn-cta-band__title {
		max-width: 100%;
		overflow-wrap: break-word;
		word-break: normal;
	}
	.dbn-hero__sub,
	.dbn-heading__intro {
		max-width: 100%;
		overflow-wrap: anywhere;
	}
	.dbn-hero__sub { font-size: 1rem; line-height: 1.6; }
	.dbn-hero__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.25rem, 1fr)); gap: 0.65rem; margin-top: 1.4rem; }
	.dbn-hero__actions .dbn-btn { width: 100%; }
	.dbn-hero__actions .dbn-btn:only-child { width: auto; justify-self: start; }
	.dbn-hero--immersive { min-height: max(36rem, 72svh); }

	/* Image groups become tactile editorial rails instead of tiny mosaics. */
	.dbn-collage,
	.dbn-hero__media--pair {
		display: grid;
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(78vw, 310px);
		gap: 0.8rem;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--dbn-gutter);
		overscroll-behavior-inline: contain;
		-webkit-overflow-scrolling: touch;
		margin-inline: calc(-1 * var(--dbn-gutter));
		padding: 0 var(--dbn-gutter) 0.5rem;
		scrollbar-width: none;
	}
	.dbn-collage::-webkit-scrollbar,
	.dbn-hero__media--pair::-webkit-scrollbar { display: none; }
	.dbn-collage__item,
	.dbn-hero__media--pair > * { scroll-snap-align: start; }

	/* Category controls stay one calm, thumb-friendly row. */
	.dbn-filters {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		-webkit-overflow-scrolling: touch;
		margin-inline: calc(-1 * var(--dbn-gutter));
		padding: 0 var(--dbn-gutter) 0.65rem;
		scrollbar-width: none;
		scroll-snap-type: x proximity;
		scroll-padding-inline: var(--dbn-gutter);
	}
	.dbn-filters::-webkit-scrollbar { display: none; }
	.dbn-filter { flex: 0 0 auto; scroll-snap-align: start; }
	.dbn-chapter-nav { width: calc(100% - (2 * var(--dbn-gutter))); max-width: none; }
	.dbn-chapter-nav__track { scroll-snap-type: x proximity; }
	.dbn-chapter-nav__link { min-height: 44px; scroll-snap-align: center; }
	.dbn-experience-nav { margin-top: -1rem; }

	.dbn-btn { min-height: 46px; padding: 0.8rem 1.25rem; }
	.dbn-service-card__body,
	.dbn-package-card__body,
	.dbn-foundri-card__body,
	.dbn-collab-card__body { padding: 1.25rem; }
	.dbn-service-card:hover { transform: none; }

	/* A vertical journey reads more clearly than disconnected process cards. */
	.dbn-process, .dbn-process--5 { gap: 0; }
	.dbn-process__step { border-top: 0; border-left: 2px solid var(--dbn-line); padding: 0 0 1.8rem 1.35rem; }
	.dbn-process__step:last-child { padding-bottom: 0; }
	.dbn-process__num { font-size: var(--dbn-fs-xl); margin-bottom: 0.25rem; }
	.dbn-process__title { font-size: var(--dbn-fs-lg); }

	.dbn-grid--3, .dbn-grid--4, .dbn-grid--services, .dbn-grid--packages,
	.dbn-vendor-grid.dbn-grid--4, .dbn-collab-grid.dbn-grid--3 { grid-template-columns: 1fr; }
	.dbn-process, .dbn-process--5 { grid-template-columns: 1fr; }
	.dbn-reels-row { grid-template-columns: repeat(2, 1fr); }

	.dbn-portfolio-grid { columns: 1; }
	.dbn-project--concise .dbn-project__feature--concise .dbn-media,
	.dbn-project--concise .dbn-project__feature--concise .dbn-ph { min-height: clamp(17rem, 70vw, 30rem); }
	.dbn-project--concise .dbn-project__title { font-size: clamp(2.5rem, 13vw, 4.4rem); }
	.dbn-discovery__grid {
		display: grid;
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(72vw, 260px);
		gap: 0.85rem;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--dbn-gutter);
		overscroll-behavior-inline: contain;
		-webkit-overflow-scrolling: touch;
		margin-inline: calc(-1 * var(--dbn-gutter));
		padding: 0 var(--dbn-gutter) 0.75rem;
		scrollbar-width: none;
	}
	.dbn-discovery__grid::-webkit-scrollbar { display: none; }
	.dbn-discovery__grid > * { scroll-snap-align: start; }
	.dbn-gallery-masonry { columns: 2; column-gap: 0.6rem; }
	.dbn-gallery-masonry__item { margin-bottom: 0.6rem; }
	.dbn-portfolio-featured { grid-template-columns: 1fr; }
	.dbn-portfolio-featured > .dbn-portfolio-card--lg,
	.dbn-portfolio-featured > .dbn-portfolio-card--md { grid-column: span 1; }

	.dbn-checklist--2col { grid-template-columns: 1fr; }
	.dbn-detail-grid { grid-template-columns: repeat(2, 1fr); }
	.dbn-detail { padding: 1rem 0.65rem; }
	.dbn-form__grid, .dbn-form--inline .dbn-form__grid { grid-template-columns: 1fr; }
	.dbn-form__wedding { padding: 1rem; }
	.dbn-form__submit .dbn-btn { width: 100%; }
	.dbn-accordion__trigger { min-height: 58px; padding-block: 1rem; font-size: var(--dbn-fs-base); }
	.dbn-countdown { gap: 0.9rem; }
	.dbn-countdown__unit span { font-size: 1.8rem; }
	.dbn-countdown__unit { min-width: 52px; }

	.dbn-footer { padding-top: 3.25rem; }
	.dbn-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.75rem 1rem; }
	.dbn-footer__brand { grid-column: 1 / -1; }
	.dbn-footer__tagline { margin-bottom: 0; }
	.dbn-footer__menu, .dbn-footer__policy-menu { gap: 0.1rem; }
	.dbn-footer__menu a, .dbn-footer__policy-menu a { padding-block: 0.35rem; }
	.dbn-footer__bottom { flex-direction: column; align-items: flex-start; }
	.dbn-footer__policy-menu { flex-wrap: wrap; gap: 0 1rem; }

	.dbn-cta-band__inner { align-items: flex-start; }
	.dbn-cta-band__action, .dbn-cta-band__action .dbn-btn { width: auto; }
	.dbn-cta-band--feature .dbn-cta-band__action { align-self: center; }
	.dbn-cta-band__title { max-width: none; }

	.dbn-float-wa {
		right: calc(0.85rem + env(safe-area-inset-right));
		bottom: calc(0.85rem + env(safe-area-inset-bottom));
		width: 48px;
		height: 48px;
	}
}

@media (max-width: 420px) {
	.dbn-detail-grid { grid-template-columns: 1fr; }
	.dbn-reels-row { grid-template-columns: 1fr 1fr; }
	.dbn-404__actions { flex-direction: column; }
	.dbn-404__actions .dbn-btn { width: 100%; }
	.dbn-countdown { justify-content: space-between; gap: 0.35rem; }
	.dbn-countdown__unit { min-width: 0; }
	.dbn-gallery-masonry { column-gap: 0.5rem; }
	.dbn-gallery-masonry__item { margin-bottom: 0.5rem; }
}

/* At the genuinely narrow end of the phone range, gallery art needs more
   viewing area than a two-up mosaic can provide. */
@media (max-width: 359px) {
	.dbn-gallery-masonry { columns: 1; column-gap: 0; }
	.dbn-gallery-masonry__item { margin-bottom: 0.75rem; }
}

/* A full-height portrait menu becomes a compact editorial split in short
   landscape viewports. The overlay itself remains scrollable if a submenu
   expands beyond the available height. */
@media (max-width: 1180px) and (max-height: 520px) and (orientation: landscape) {
	.dbn-mobile {
		display: grid;
		grid-template-columns: minmax(0, 1.2fr) minmax(12rem, 0.8fr);
		grid-template-rows: auto auto 1fr;
		column-gap: clamp(1.5rem, 5vw, 3rem);
		align-content: start;
	}
	.dbn-mobile__head { grid-column: 1 / -1; margin-bottom: 0.4rem; }
	.dbn-mobile__menu { grid-column: 1; grid-row: 2 / 4; margin-bottom: 0; }
	.dbn-mobile__menu a,
	.dbn-mobile__menu .dbn-menu__toggle { min-height: 44px; font-size: clamp(1.05rem, 3.5vw, 1.35rem); padding-block: 0.42rem; }
	.dbn-mobile__menu .sub-menu a { font-size: 0.9rem; padding-block: 0.38rem; }
	.dbn-mobile__cta { grid-column: 2; grid-row: 2; margin-bottom: 0.75rem; }
	.dbn-mobile__contact { grid-column: 2; grid-row: 3; align-content: end; margin-top: 0; padding-top: 0.75rem; }
}