/* =========================================================================
   Designs By Nhyi — Design System (main.css)
   Editorial, crisp, confident, premium. Mobile-first base; media queries in
   responsive.css. The palette is intentionally limited to sky, two blues and
   white; transparent derivatives provide hierarchy without introducing
   unrelated decorative colours.
   ========================================================================= */

/* ----- Tokens ----------------------------------------------------------- */
:root {
	--dbn-sky:      #CFF7FF;
	--dbn-blue:     #0B49A0;
	--dbn-blue-deep:#04489F;
	--dbn-white:    #FFFFFF;

	/* Interaction variants — the two brand blues are near-identical, so hover
	   states need a genuinely darker step to read at all. */
	--dbn-blue-hover:  #083A80;
	--dbn-blue-active: #062E66;
	--dbn-sky-hover:   #BCF2FF;
	--dbn-sky-active:  #A9EDFF;
	--dbn-blue-soft:   rgba(11, 73, 160, 0.08);

	/* Semantic text + hairline tokens. Values are unchanged from the previous
	   palette — the names now describe the actual colour (deep blue / sky /
	   white) instead of the retired brown-and-cream naming (espresso, cocoa,
	   champagne, blush…) that no longer matched what renders. */
	--dbn-ink:      var(--dbn-blue-deep);   /* headings + primary text          */
	--dbn-muted:    rgba(4, 72, 159, 0.88); /* secondary text — AA on sky/white  */
	--dbn-line:     rgba(4, 72, 159, 0.18); /* hairline borders                  */
	--dbn-line-2:   rgba(4, 72, 159, 0.10); /* faint hairlines                   */

	--dbn-bg:       var(--dbn-white);
	--dbn-text:     var(--dbn-ink);

	/* Form status — deliberately outside the brand blues so success/error read
	   as distinct state, not decoration. */
	--dbn-success-bg:   #eef3ec;
	--dbn-success-line: #c5d6bf;
	--dbn-success-text: #3f5a37;
	--dbn-error-bg:     #f7ecec;
	--dbn-error-line:   #e0c2c2;
	--dbn-error-text:   #8e3838;
	--dbn-error-field:  #cf9a9a;

	--dbn-serif: "Fraunces", "Iowan Old Style", "Apple Garamond", "Times New Roman", Georgia, serif;
	--dbn-accent-serif: "Cormorant Garamond", "Iowan Old Style", "Apple Garamond", "Times New Roman", Georgia, serif;
	--dbn-sans:  "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Type scale — modular steps (~1.13 minor-second between UI sizes) on the
	   17px body. Fluid display sizes carry the same voice at every viewport. */
	--dbn-fs-2xs:  0.72rem;   /* eyebrows, tags, caps labels        */
	--dbn-fs-xs:   0.8rem;    /* meta, hints, fine print            */
	--dbn-fs-sm:   0.9rem;    /* buttons, nav, secondary UI         */
	--dbn-fs-md:   0.95rem;   /* compact body (card descriptions)   */
	--dbn-fs-base: 1.0625rem; /* body                               */
	--dbn-fs-lg:   1.15rem;   /* leads, quotes, small card titles   */
	--dbn-fs-xl:   1.3rem;    /* card titles                        */
	--dbn-fs-2xl:  1.45rem;   /* brand title, prices                */
	--dbn-fs-3xl:  1.6rem;    /* footer name, large accents         */
	--dbn-fs-h3:   clamp(1.3rem, 2vw, 1.55rem);
	--dbn-fs-h2:   clamp(1.9rem, 4vw, 3rem);
	--dbn-fs-h1:   clamp(2.3rem, 5.4vw, 4rem);
	--dbn-fs-display: clamp(2.8rem, 8vw, 5.5rem);

	--dbn-lh-tight: 1.12;  /* display serifs   */
	--dbn-lh-snug:  1.45;  /* quotes, leads    */
	--dbn-lh-body:  1.65;  /* running text     */

	/* Spacing — 4px base grid. Components snap to these steps. */
	--dbn-space-1: 0.25rem;
	--dbn-space-2: 0.5rem;
	--dbn-space-3: 0.75rem;
	--dbn-space-4: 1rem;
	--dbn-space-5: 1.25rem;
	--dbn-space-6: 1.5rem;
	--dbn-space-7: 2rem;
	--dbn-space-8: 2.5rem;
	--dbn-space-9: 3rem;
	--dbn-pad-card: var(--dbn-space-6);      /* standard card body   */
	--dbn-pad-card-sm: var(--dbn-space-5);   /* compact card body    */

	--dbn-maxw: 1200px;
	--dbn-narrow: 760px;
	--dbn-gutter: clamp(1.25rem, 5vw, 3rem);
	--dbn-radius: 14px;
	--dbn-radius-sm: 8px;
	--dbn-radius-lg: 22px;
	--dbn-shadow: 0 18px 50px -28px rgba(4, 72, 159, 0.38);
	--dbn-shadow-sm: 0 8px 24px -16px rgba(4, 72, 159, 0.42);
	--dbn-shadow-lift: 0 28px 70px -44px rgba(4, 72, 159, 0.78);   /* card hover      */
	--dbn-shadow-float: 0 30px 80px -48px rgba(4, 72, 159, 0.8);   /* sticky chapters */

	/* Motion primitives — every transition in the theme draws from these. */
	--dbn-ease: cubic-bezier(0.22, 1, 0.36, 1);          /* out-quint: UI      */
	--dbn-ease-drift: cubic-bezier(0.16, 1, 0.3, 1);     /* long editorial     */
	--dbn-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* symmetric moves    */
	--dbn-dur-xs: 0.15s;   /* presses            */
	--dbn-dur-sm: 0.25s;   /* hovers, color      */
	--dbn-dur-md: 0.4s;    /* menus, toggles     */
	--dbn-dur-lg: 0.6s;    /* card lifts, media  */
	--dbn-dur-xl: 0.85s;   /* entrances          */
	--dbn-dur-2xl: 1.2s;   /* masked reveals     */

	--dbn-section-y: clamp(3rem, 6vw, 5.5rem); /* tightened vertical rhythm (audit) */

	/* Single source of truth for the sticky header's height. Anything that
	   offsets against the bar (hero fit, sticky stages, tuck) reads this var;
	   the value changes only here and in the 1180px collapse block below. */
	--dbn-header-h: 76px;
}

/* ----- Reset / base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* The root carries the page background as well as body (v1.24.15a). Visually this
   changes nothing — it is the same token, and body still paints over it — but it
   matters to cross-document View Transitions: when only body has a background it
   propagates to the canvas, which is NOT captured in the root snapshot, leaving
   ::view-transition-old/new(root) transparent where the page background should be
   so the two snapshots composite through each other. An opaque root makes each
   snapshot opaque. Do not remove this to "de-duplicate" the background. */
html { background: var(--dbn-bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--dbn-header-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:target { scroll-margin-top: calc(var(--dbn-header-h) + 1rem); }

body {
	margin: 0;
	background: var(--dbn-bg);
	color: var(--dbn-text);
	font-family: var(--dbn-sans);
	font-size: var(--dbn-fs-base);
	line-height: var(--dbn-lh-body);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--dbn-blue); text-decoration: none; transition: color var(--dbn-dur-sm) var(--dbn-ease), opacity var(--dbn-dur-sm) var(--dbn-ease); }
a:hover { color: var(--dbn-blue-hover); }
a:active { color: var(--dbn-blue-active); transition-duration: var(--dbn-dur-xs); }

h1, h2, h3, h4 { font-family: var(--dbn-serif); font-weight: 500; line-height: var(--dbn-lh-tight); color: var(--dbn-blue-deep); margin: 0 0 0.5em; letter-spacing: -0.01em; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }

:focus-visible { outline: 2px solid var(--dbn-blue); outline-offset: 3px; border-radius: 3px; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important;
}

.dbn-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--dbn-blue-deep); color: #fff; padding: 0.75rem 1.25rem; border-radius: 0 0 8px 0;
}
.dbn-skip-link:focus { left: 0; color: #fff; }

/* ----- Layout ----------------------------------------------------------- */
.dbn-container { width: 100%; max-width: var(--dbn-maxw); margin-inline: auto; padding-inline: var(--dbn-gutter); }
.dbn-container--narrow { max-width: var(--dbn-narrow); }
.dbn-section { padding-block: var(--dbn-section-y); }
.dbn-section--tint { background: var(--dbn-sky); }
.dbn-section--dark { background: var(--dbn-blue-deep); color: var(--dbn-sky); }
.dbn-section--dark h1, .dbn-section--dark h2, .dbn-section--dark h3 { color: #fff; }
.dbn-section--dark .dbn-eyebrow { color: var(--dbn-sky); }
.dbn-section--dark .dbn-heading__intro,
.dbn-section--dark p { color: var(--dbn-sky); }
.dbn-section--dark .dbn-form__field label { color: var(--dbn-sky); }
.dbn-section--dark .dbn-form__hint { color: var(--dbn-sky); }
.dbn-section--dark .dbn-form input,
.dbn-section--dark .dbn-form select,
.dbn-section--dark .dbn-form textarea { color: var(--dbn-ink); }
.dbn-center-action { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }
.dbn-note-center { text-align: center; color: var(--dbn-muted); font-size: var(--dbn-fs-sm); margin-top: 1.5rem; }

/* ----- Typography helpers ---------------------------------------------- */
.dbn-eyebrow {
	display: inline-block; font-family: var(--dbn-sans); font-weight: 500;
	font-size: var(--dbn-fs-2xs); letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--dbn-blue); margin-bottom: var(--dbn-space-3);
}
.dbn-heading { margin-bottom: clamp(2rem, 4vw, 3rem); }
.dbn-heading--center { text-align: center; margin-inline: auto; max-width: 720px; }
.dbn-heading__title { font-size: var(--dbn-fs-h2); }
.dbn-heading__intro { color: var(--dbn-muted); font-size: var(--dbn-fs-lg); max-width: 60ch; }
.dbn-heading--center .dbn-heading__intro { margin-inline: auto; }

.dbn-prose { max-width: 68ch; }
.dbn-prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 1.6em; }
.dbn-prose h3 { font-size: var(--dbn-fs-xl); margin-top: 1.4em; }
.dbn-prose a { text-decoration: underline; text-underline-offset: 3px; }

/* ----- Long-form legal pages (Terms of Service) ------------------------- */
/* An editorial two-column reading composition: a secondary orientation column of
   the page's own section headings, and a measure-capped policy column. Structure
   is derived from the content in PHP, so nothing here duplicates policy wording. */
.dbn-legal__opening { max-width: 46rem; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.dbn-legal__title { margin: 0; font-size: clamp(2.5rem, 5.4vw, 4rem); line-height: 1.02; letter-spacing: -0.035em; }
.dbn-legal__intro { margin-top: clamp(1.25rem, 2.4vw, 1.85rem); }
.dbn-legal__intro > p:last-child { margin-bottom: 0; }
.dbn-legal-note,
.dbn-legal__intro > p {
	margin: 0 0 1.1em;
	padding: var(--dbn-space-4) var(--dbn-space-5);
	border-left: 3px solid var(--dbn-blue);
	border-radius: calc(var(--dbn-radius) - 8px);
	background: rgba(207, 247, 255, 0.42);
	color: var(--dbn-ink);
	font-size: var(--dbn-fs-md);
}
.dbn-legal__body--split {
	display: grid;
	/* 39rem keeps the policy measure near 75 characters — controlled for long-form
	   reading rather than stretching to the full container on wide screens. */
	grid-template-columns: 15rem minmax(0, 39rem);
	justify-content: center;
	gap: clamp(2rem, 4vw, 4.5rem);
}
/* align-self:start is what lets the column stick; being a grid item also stops it
   naturally at the end of the policy list rather than running into the footer. */
.dbn-legal__aside { position: sticky; top: calc(var(--dbn-header-h) + 1.5rem); align-self: start; }
/* Reuse the chapter-nav component, restyled from a centred pill rail to a column. */
.dbn-legal__nav { position: static; top: auto; z-index: auto; width: 100%; max-width: none; margin: 0; }
.dbn-legal__nav .dbn-chapter-nav__track {
	flex-direction: column;
	align-items: stretch;
	gap: 0.1rem;
	padding: 0.5rem;
	border-radius: var(--dbn-radius);
	overflow: visible;
}
.dbn-legal__nav .dbn-chapter-nav__link { justify-content: flex-start; min-height: 44px; text-align: left; border-radius: calc(var(--dbn-radius) - 8px); }
.dbn-legal__panel {
	padding-block: clamp(1.75rem, 3vw, 2.5rem);
	border-top: 1px solid var(--dbn-line);
	scroll-margin-top: calc(var(--dbn-header-h) + 1.25rem);
}
.dbn-legal__panel:first-child { padding-top: 0; border-top: 0; }
.dbn-legal__panel:last-child { padding-bottom: 0; }
.dbn-legal__heading { margin: 0 0 1rem; font-size: clamp(1.4rem, 2.5vw, 1.85rem); line-height: 1.16; letter-spacing: -0.015em; }
.dbn-legal__content > :last-child { margin-bottom: 0; }
.dbn-legal__content ul { margin: 0; padding-left: 1.35em; }
.dbn-legal__content li { overflow-wrap: break-word; }
.dbn-legal__content li + li { margin-top: 0.6em; }

@media (max-width: 1180px) {
	/* Single-column reading experience; the nav becomes a compact wrapping group.
	   The 40rem cap holds the measure near 75 characters here too — on phones the
	   gutters are narrower than the cap, so those widths still fill the column. */
	.dbn-legal__opening,
	.dbn-legal__body--split { max-width: 40rem; margin-inline: auto; }
	.dbn-legal__body--split { grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 2.25rem); }
	.dbn-legal__aside { position: static; top: auto; }
	.dbn-legal__nav .dbn-chapter-nav__track { flex-direction: row; flex-wrap: wrap; border-radius: var(--dbn-radius); }
}

.dbn-pill {
	display: inline-block; padding: var(--dbn-space-2) var(--dbn-space-4); border: 1px solid var(--dbn-line);
	border-radius: 100px; font-size: var(--dbn-fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dbn-blue);
}

.dbn-replace-note, .dbn-replace-tag {
	display: inline-block; font-size: var(--dbn-fs-2xs); letter-spacing: 0.08em; text-transform: uppercase;
	background: var(--dbn-sky); color: var(--dbn-blue); padding: 0.3rem 0.7rem; border-radius: 100px;
}
.dbn-replace-tag { position: absolute; top: 0.75rem; right: 0.75rem; }

/* ----- Buttons ---------------------------------------------------------- */
.dbn-btn {
	--btn-bg: var(--dbn-blue-deep); --btn-fg: var(--dbn-sky); --btn-bd: var(--dbn-blue-deep);
	display: inline-flex; align-items: center; justify-content: center; gap: var(--dbn-space-2);
	font-family: var(--dbn-sans); font-weight: 500; font-size: var(--dbn-fs-sm); letter-spacing: 0.04em;
	padding: 0.85rem 1.6rem; border-radius: 100px; border: 1.5px solid var(--btn-bd);
	background: var(--btn-bg); color: var(--btn-fg); cursor: pointer;
	transition: transform var(--dbn-dur-sm) var(--dbn-ease), background var(--dbn-dur-sm) var(--dbn-ease), color var(--dbn-dur-sm) var(--dbn-ease), box-shadow var(--dbn-dur-sm) var(--dbn-ease);
	text-align: center; line-height: 1.2;
}
.dbn-btn:hover { transform: translateY(-2px); box-shadow: var(--dbn-shadow-sm); color: var(--btn-fg); }
.dbn-btn--primary { --btn-bg: var(--dbn-blue-deep); --btn-fg: #fff; --btn-bd: var(--dbn-blue-deep); }
.dbn-btn--primary:hover { --btn-bg: var(--dbn-blue-hover); --btn-bd: var(--dbn-blue-hover); }
.dbn-btn--primary:active { --btn-bg: var(--dbn-blue-active); --btn-bd: var(--dbn-blue-active); }
.dbn-btn--secondary { --btn-bg: transparent; --btn-fg: var(--dbn-blue-deep); --btn-bd: var(--dbn-blue); }
.dbn-btn--secondary:hover { --btn-bg: var(--dbn-blue-deep); --btn-fg: #fff; --btn-bd: var(--dbn-blue-deep); }
.dbn-btn--secondary:active { --btn-bg: var(--dbn-blue-active); --btn-bd: var(--dbn-blue-active); --btn-fg: #fff; }
.dbn-btn--ghost { --btn-bg: transparent; --btn-fg: var(--dbn-blue); --btn-bd: transparent; padding-inline: 0.5rem; }
.dbn-btn--ghost::after { content: "→"; transition: transform var(--dbn-dur-sm) var(--dbn-ease); }
.dbn-btn--ghost:hover { --btn-fg: var(--dbn-blue-hover); box-shadow: none; }
.dbn-btn--ghost:hover::after { transform: translateX(4px); }
.dbn-btn--light { --btn-bg: var(--dbn-sky); --btn-fg: var(--dbn-blue-deep); --btn-bd: var(--dbn-sky); }
.dbn-btn--light:hover { --btn-bg: #fff; --btn-bd: #fff; }
.dbn-btn--light:active { --btn-bg: var(--dbn-sky-active); --btn-bd: var(--dbn-sky-active); }

/* ----- Header -----------------------------------------------------------
   Structural rules only; the visual treatment (background, border, shadow)
   lives in the single authoritative block in the refinement section below. */
.dbn-header {
	position: sticky; top: 0; z-index: 100;
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--dbn-dur-sm) var(--dbn-ease), background var(--dbn-dur-sm) var(--dbn-ease);
}
.dbn-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--dbn-header-h); }
.dbn-header__brand .custom-logo-link { position: relative; display: inline-flex; align-items: center; }
.dbn-header__brand img { max-height: 32px; width: auto; }
.dbn-header__logo { transition: filter 0.38s ease; }
.dbn-header__title { font-family: var(--dbn-serif); font-size: var(--dbn-fs-2xl); color: var(--dbn-blue-deep); letter-spacing: -0.01em; }
.dbn-header__nav { margin-left: auto; }

.dbn-menu { display: flex; align-items: center; gap: clamp(0.8rem, 1.6vw, 1.6rem); list-style: none; margin: 0; padding: 0; }
.dbn-menu a { font-size: var(--dbn-fs-sm); font-weight: 400; color: var(--dbn-blue-deep); position: relative; padding-block: 0.65rem; }
.dbn-menu a::after { content: ""; position: absolute; left: 0; bottom: 0.25rem; height: 1px; width: 0; background: var(--dbn-blue); transition: width var(--dbn-dur-sm) var(--dbn-ease); }
.dbn-menu a:hover::after, .dbn-menu .current-menu-item > a::after { width: 100%; }
.dbn-menu a:active { opacity: 0.6; }
.dbn-menu .current-menu-item > a { color: var(--dbn-blue); }

/* dropdown */
.dbn-menu .menu-item-has-children { position: relative; }
.dbn-menu .sub-menu {
	position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
	min-width: 230px; background: #fff; border: 1px solid var(--dbn-line); border-radius: var(--dbn-radius);
	box-shadow: var(--dbn-shadow); padding: 0.6rem; list-style: none; margin: 0;
	display: flex; flex-direction: column; gap: 0.1rem; opacity: 0; visibility: hidden;
	transition: opacity var(--dbn-dur-sm) var(--dbn-ease), transform var(--dbn-dur-sm) var(--dbn-ease), visibility var(--dbn-dur-sm) var(--dbn-ease); z-index: 10;
}
.dbn-menu .menu-item-has-children:hover > .sub-menu,
.dbn-menu .menu-item-has-children:focus-within > .sub-menu,
.dbn-menu .menu-item-has-children.is-open > .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dbn-menu .menu-item-has-children.is-escape-closed > .sub-menu { opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(8px); }
/* Keep dropdowns near the right edge of the nav inside the viewport. */
.dbn-menu .menu-item-has-children:nth-last-child(-n+2) > .sub-menu { left: auto; right: 0; transform: translateY(8px); }
.dbn-menu .menu-item-has-children:nth-last-child(-n+2):hover > .sub-menu,
.dbn-menu .menu-item-has-children:nth-last-child(-n+2):focus-within > .sub-menu,
.dbn-menu .menu-item-has-children.is-open:nth-last-child(-n+2) > .sub-menu { transform: translateY(0); }
.dbn-menu .menu-item-has-children.is-escape-closed:nth-last-child(-n+2) > .sub-menu { transform: translateY(8px); }
.dbn-menu .sub-menu a { display: block; padding: 0.55rem 0.8rem; border-radius: var(--dbn-radius-sm); transition: background-color var(--dbn-dur-sm) var(--dbn-ease), color var(--dbn-dur-sm) var(--dbn-ease); }
.dbn-menu .sub-menu a::after { display: none; }
.dbn-menu .sub-menu a:hover { background: var(--dbn-sky); }
.dbn-menu .sub-menu a:active { background: var(--dbn-sky-active); }

/* Disclosure button rendered by the "Brand World" fallback item — must read
   exactly like its sibling links. */
.dbn-menu__toggle {
	background: none; border: 0; padding: 0.65rem 0; margin: 0; cursor: pointer;
	font: inherit; font-size: var(--dbn-fs-sm); color: var(--dbn-blue-deep);
	display: inline-flex; align-items: center; gap: 0.3rem;
	transition: color var(--dbn-dur-sm) var(--dbn-ease);
}
.dbn-menu__toggle::after { content: "▾"; font-size: 0.7em; transition: transform var(--dbn-dur-sm) var(--dbn-ease); }
.dbn-menu .is-open > .dbn-menu__toggle::after { transform: rotate(180deg); }
.dbn-menu__toggle:hover { color: var(--dbn-blue); }

.dbn-header__actions { display: flex; align-items: center; gap: 0.75rem; }
.dbn-header__cta { padding-block: 0.6rem; padding-inline: 1.2rem; font-size: var(--dbn-fs-xs); }

/* burger */
.dbn-burger { display: none; background: none; border: 0; padding: 0.5rem; cursor: pointer; }
.dbn-burger__box { display: block; width: 26px; height: 14px; position: relative; }
.dbn-burger__line, .dbn-burger__box::before, .dbn-burger__box::after {
	content: ""; position: absolute; left: 0; height: 1.5px; width: 100%; background: var(--dbn-blue-deep); transition: transform var(--dbn-dur-sm) var(--dbn-ease), opacity var(--dbn-dur-sm) var(--dbn-ease), top var(--dbn-dur-sm) var(--dbn-ease), bottom var(--dbn-dur-sm) var(--dbn-ease);
}
.dbn-burger__box::before { top: 0; }
.dbn-burger__line { top: 50%; transform: translateY(-50%); }
.dbn-burger__box::after { bottom: 0; }

/* ----- Mobile menu ------------------------------------------------------ */
.dbn-mobile {
	position: fixed; inset: 0; z-index: 200; background: var(--dbn-white);
	display: flex; flex-direction: column; padding: 1.25rem var(--dbn-gutter) 2rem;
	transform: translateY(-100%); visibility: hidden; pointer-events: none; overflow-y: auto;
	overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
	transition: transform var(--dbn-dur-md) var(--dbn-ease), visibility var(--dbn-dur-md) var(--dbn-ease);
}
.dbn-mobile.is-open { transform: translateY(0); visibility: visible; pointer-events: auto; }
body.dbn-menu-open {
	position: fixed; inset-inline: 0; top: var(--dbn-menu-scroll-offset, 0px);
	width: 100%; overflow: hidden;
}
.dbn-mobile__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.dbn-mobile__brand { font-family: var(--dbn-serif); font-size: var(--dbn-fs-xl); }
.dbn-mobile__close { background: none; border: 0; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--dbn-blue-deep); }
.dbn-mobile__menu { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.dbn-mobile__menu a { font-family: var(--dbn-serif); font-size: var(--dbn-fs-3xl); color: var(--dbn-blue-deep); display: block; padding: 0.5rem 0; border-bottom: 1px solid var(--dbn-line-2); }
.dbn-mobile__menu .sub-menu { display: none; list-style: none; padding-left: 1rem; }
.dbn-mobile__menu .menu-item-has-children.is-open > .sub-menu { display: block; }
.dbn-mobile__menu .sub-menu a { font-size: var(--dbn-fs-lg); }
/* Disclosure caret injected by main.js when a mobile parent item links to a
   real page: the link keeps navigating; the caret reveals the children. */
.dbn-mobile__menu .menu-item-has-children { display: flex; flex-wrap: wrap; align-items: stretch; }
.dbn-mobile__menu .menu-item-has-children > a { flex: 1 1 auto; min-width: 0; }
.dbn-mobile__menu .menu-item-has-children > .sub-menu { flex: 1 1 100%; }
.dbn-subnav-toggle {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	min-width: 48px; margin: 0; padding: 0.5rem 0.25rem;
	background: none; border: 0; border-bottom: 1px solid var(--dbn-line-2);
	color: var(--dbn-blue-deep); cursor: pointer;
}
.dbn-subnav-toggle::after { content: "▾"; font-size: 0.9rem; transition: transform var(--dbn-dur-sm) var(--dbn-ease); }
.dbn-mobile__menu .menu-item-has-children.is-open > .dbn-subnav-toggle::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .dbn-subnav-toggle::after { transition: none; } }
.dbn-mobile__menu .dbn-menu__toggle {
	width: 100%; justify-content: space-between; border-bottom: 1px solid var(--dbn-line-2);
	font-family: var(--dbn-serif); font-size: var(--dbn-fs-3xl); padding: 0.5rem 0;
}
.dbn-mobile__cta { margin-bottom: 1.5rem; }
.dbn-mobile__cta .dbn-btn { width: 100%; }
.dbn-mobile__contact { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.dbn-mobile__contact a { font-size: var(--dbn-fs-md); letter-spacing: 0.05em; text-transform: uppercase; }

/* floating whatsapp */
.dbn-float-wa {
	position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90;
	width: 52px; height: 52px; border-radius: 50%; background: #25d366; color: #fff;
	display: flex; align-items: center; justify-content: center; box-shadow: var(--dbn-shadow);
	transition: transform var(--dbn-dur-sm) var(--dbn-ease);
}
.dbn-float-wa:hover { transform: scale(1.08); color: #fff; }
.dbn-float-wa:active { transform: scale(0.98); transition-duration: var(--dbn-dur-xs); }

/* ----- Media + placeholders -------------------------------------------- */
.dbn-media { overflow: hidden; border-radius: var(--dbn-radius); background: var(--dbn-sky); }
.dbn-media__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dbn-ratio-16-9  { aspect-ratio: 16 / 9; }
.dbn-ratio-21-9  { aspect-ratio: 21 / 9; }
.dbn-ratio-4-5   { aspect-ratio: 4 / 5; }
.dbn-ratio-1-1   { aspect-ratio: 1 / 1; }
.dbn-ratio-9-16  { aspect-ratio: 9 / 16; }
.dbn-ratio-16-10 { aspect-ratio: 16 / 10; }

.dbn-ph {
	position: relative; margin: 0; border-radius: var(--dbn-radius); overflow: hidden;
	display: flex; align-items: center; justify-content: center; text-align: center;
	background:
		radial-gradient(120% 120% at 0% 0%, rgba(207, 247, 255, 0.96), transparent 55%),
		radial-gradient(120% 120% at 100% 100%, rgba(11, 73, 160, 0.14), transparent 55%),
		linear-gradient(135deg, var(--dbn-sky), var(--dbn-sky));
	border: 1px solid var(--dbn-line);
	color: var(--dbn-blue);
	isolation: isolate;
}
/* grain overlay */
.dbn-ph::after {
	content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.5; mix-blend-mode: multiply; pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}
.dbn-ph__mark {
	position: absolute; z-index: 1; font-family: var(--dbn-serif); font-weight: 500;
	font-size: clamp(4rem, 16vh, 9rem); color: rgba(4, 72, 159, 0.08); line-height: 1; user-select: none;
}
.dbn-ph__caption { position: relative; z-index: 2; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; }
.dbn-ph__label { font-family: var(--dbn-sans); font-weight: 500; font-size: var(--dbn-fs-sm); letter-spacing: 0.02em; color: var(--dbn-blue-deep); }
.dbn-ph__hint { font-size: var(--dbn-fs-xs); color: var(--dbn-muted); }
.dbn-ph__tag {
	margin-top: 0.4rem; align-self: center; font-size: var(--dbn-fs-2xs); letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--dbn-blue); border: 1px dashed var(--dbn-line); padding: 0.25rem 0.6rem; border-radius: 100px;
}
.dbn-ph__frame { position: absolute; z-index: 1; pointer-events: none; }

/* frame variants */
.dbn-ph--website-mockup { padding-top: 30px; background: linear-gradient(135deg, #fff, var(--dbn-sky)); }
.dbn-ph--website-mockup .dbn-ph__frame { top: 0; left: 0; right: 0; height: 30px; background: var(--dbn-sky); border-bottom: 1px solid var(--dbn-line); }
.dbn-ph--website-mockup .dbn-ph__frame::before {
	content: ""; position: absolute; left: 12px; top: 11px; width: 8px; height: 8px; border-radius: 50%;
	background: var(--dbn-blue); box-shadow: 14px 0 0 var(--dbn-sky), 28px 0 0 var(--dbn-sky);
}
.dbn-ph--digital-invite { border-radius: 26px; border-width: 6px; background: linear-gradient(160deg, #fff, var(--dbn-sky)); }
.dbn-ph--digital-invite .dbn-ph__frame { top: 8px; left: 50%; transform: translateX(-50%); width: 42px; height: 5px; border-radius: 100px; background: var(--dbn-line); }
.dbn-ph--invitation-suite::before, .dbn-ph--invitation-suite::after {
	content: ""; position: absolute; z-index: 0; inset: 14px; border: 1px solid var(--dbn-line); border-radius: 6px;
	background: rgba(255,255,255,0.4);
}
.dbn-ph--invitation-suite::before { transform: rotate(-3deg); }
.dbn-ph--invitation-suite::after  { transform: rotate(3deg); }
.dbn-ph--wedding-monogram { background: radial-gradient(circle at center, #fff, var(--dbn-sky)); }
.dbn-ph--wedding-monogram .dbn-ph__mark { font-size: clamp(5rem, 22vh, 12rem); color: rgba(11, 73, 160, 0.18); }
.dbn-ph--event-poster { border-width: 0; box-shadow: inset 0 0 0 10px rgba(255,255,255,0.5), inset 0 0 0 11px var(--dbn-line); }
.dbn-ph--brand-board { background: linear-gradient(135deg, var(--dbn-sky), var(--dbn-sky)); }
.dbn-ph--logo-suite { background: radial-gradient(circle at 30% 30%, #fff, var(--dbn-sky)); }
.dbn-ph--social-carousel { background: linear-gradient(135deg, var(--dbn-sky), var(--dbn-sky)); }

/* Hero video/image well — a cinematic dark placeholder that reads as a media
   background (play glyph + caption), used full-bleed behind hero/feature copy. */
.dbn-ph--hero-media {
	border: 0;
	color: #fff;
	background:
		radial-gradient(120% 120% at 18% 12%, rgba(11, 73, 160, 0.55), transparent 60%),
		radial-gradient(150% 150% at 100% 100%, rgba(4, 72, 159, 0.7), transparent 55%),
		linear-gradient(135deg, var(--dbn-blue-deep), #06264f);
}
.dbn-ph--hero-media::after { opacity: 0.3; }
.dbn-ph--hero-media .dbn-ph__mark { display: none; }
.dbn-ph--hero-media .dbn-ph__frame {
	z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: clamp(56px, 8vw, 88px); aspect-ratio: 1; border-radius: 50%;
	background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.55);
	box-shadow: 0 20px 60px -30px rgba(0, 0, 0, 0.7);
}
.dbn-ph--hero-media .dbn-ph__frame::before {
	content: ""; position: absolute; top: 50%; left: 56%; transform: translate(-50%, -50%);
	border-style: solid; border-width: 0.42em 0 0.42em 0.72em;
	border-color: transparent transparent transparent #fff; font-size: clamp(15px, 2vw, 22px);
}
.dbn-ph--hero-media .dbn-ph__caption {
	position: absolute; z-index: 3; left: 50%; bottom: clamp(1rem, 3vw, 2.25rem);
	transform: translateX(-50%); align-items: center; max-width: min(90%, 40ch);
}
.dbn-ph--hero-media .dbn-ph__label { color: #fff; }
.dbn-ph--hero-media .dbn-ph__hint { color: rgba(255, 255, 255, 0.75); }
.dbn-ph--hero-media .dbn-ph__tag { color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.4); }

/* -------------------------------------------------------------------------
   Filled frame — an inserted image adopts the EXACT placeholder frame.
   The .dbn-ph figure keeps its outline, radius, mask, shadow, spacing and
   chrome; the image only fills the media well (clipped by the figure). No
   separate media box, border, radius, shadow or background is introduced.
   Reusable across every .dbn-ph--* variant and every media placeholder.
   ------------------------------------------------------------------------- */
.dbn-ph__media {
	position: absolute; inset: 0; z-index: 1; margin: 0;
	overflow: hidden; border-radius: inherit; background: none;
}
.dbn-ph__media > img,
.dbn-ph__media > picture,
.dbn-ph__media > picture > img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	margin: 0; padding: 0; border: 0; border-radius: 0;
	outline: 0; box-shadow: none; background: none;
}
/* Frame chrome (browser bar, phone notch, mats…) stays above the image;
   the placeholder caption + watermark drop out once real media is present. */
.dbn-ph--filled .dbn-ph__frame { z-index: 3; }
.dbn-ph--filled > .dbn-ph__mark,
.dbn-ph--filled > .dbn-ph__caption { display: none; }
/* The grain texture is a placeholder cue — remove it so photos stay true. */
.dbn-ph--filled::after { content: none; }

/* Per-variant: keep each frame's decoration reading around/behind the image. */
.dbn-ph--website-mockup .dbn-ph__media { top: 30px; }            /* below the browser bar */
.dbn-ph--event-poster .dbn-ph__media   { inset: 11px; }          /* inside the mat outline  */
.dbn-ph--invitation-suite .dbn-ph__media { inset: 14px; }        /* stacked cards peek out   */
.dbn-ph--invitation-suite.dbn-ph--filled::before,
.dbn-ph--invitation-suite.dbn-ph--filled::after { content: ""; } /* restore the card backs   */
/* The hero-media well's play glyph is an empty-state affordance only. */
.dbn-ph--hero-media.dbn-ph--filled .dbn-ph__frame { display: none; }

/* Video background: fill and cover exactly like an image. */
.dbn-media--video { background: var(--dbn-blue-deep); }
.dbn-media--video video.dbn-media__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ----- Grids ------------------------------------------------------------ */
.dbn-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.dbn-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dbn-grid--4 { grid-template-columns: repeat(4, 1fr); }
.dbn-grid--services { grid-template-columns: repeat(3, 1fr); }
.dbn-grid--packages { grid-template-columns: repeat(3, 1fr); }

/* ----- Hero ------------------------------------------------------------- */
.dbn-hero { padding-block: clamp(2.5rem, 6vw, 5rem); position: relative; }
.dbn-hero__inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.dbn-hero__inner--center { grid-template-columns: 1fr; text-align: center; }
.dbn-hero__text--center { max-width: 760px; margin-inline: auto; }
.dbn-hero__title { font-size: var(--dbn-fs-h1); margin-bottom: 0.6em; }
.dbn-hero__title--xl { font-size: var(--dbn-fs-display); }
.dbn-hero__sub { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--dbn-muted); max-width: 56ch; }
.dbn-hero__text--center .dbn-hero__sub { margin-inline: auto; }
.dbn-hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }
.dbn-hero__text--center .dbn-hero__actions { justify-content: center; }
.dbn-hero__services { margin-top: 2rem; font-size: var(--dbn-fs-xs); letter-spacing: 0.06em; color: var(--dbn-blue); text-transform: uppercase; }
.dbn-hero__banner { margin-top: 2.5rem; }

/* hero collage — staggered editorial 2-up that keeps each item's aspect ratio */
.dbn-collage { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.7rem, 1.6vw, 1.1rem); align-items: start; }
.dbn-collage__item { position: relative; margin: 0; }
.dbn-collage__item--1, .dbn-collage__item--3, .dbn-collage__item--5 { margin-top: clamp(1.5rem, 4vw, 3rem); }
.dbn-collage--trio .dbn-collage__item--0 { grid-row: span 2; }
.dbn-collage--trio .dbn-collage__item--1 { margin-top: clamp(1.5rem, 4vw, 2.5rem); }

.dbn-hero__media--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dbn-hero__media--pair > *:last-child { margin-top: 2rem; }

.dbn-hero--immersive { color: #fff; overflow: hidden; min-height: clamp(36rem, 70vh, 50rem); display: flex; align-items: center; background: linear-gradient(135deg, var(--dbn-blue-deep), var(--dbn-blue)); }
.dbn-hero--immersive .dbn-hero__bg { position: absolute; inset: 0; z-index: 0; }
.dbn-hero--immersive .dbn-hero__bg > .dbn-media__img { width: 100%; height: 100%; object-fit: cover; }
.dbn-hero--immersive > .dbn-container { position: relative; z-index: 1; width: 100%; }
.dbn-hero--immersive .dbn-hero__title,
.dbn-hero--immersive .dbn-hero__sub { color: #fff; }
.dbn-hero--immersive .dbn-eyebrow { color: var(--dbn-sky); }
.dbn-hero--experience { background: linear-gradient(135deg, var(--dbn-blue-deep), var(--dbn-blue)); }
.dbn-hero--experience .dbn-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,72,159,0.5), rgba(4,72,159,0.86)); }

/* ----- Intro / split sections ------------------------------------------ */
.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 {
	display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.dbn-intro__body--center { max-width: 60ch; margin-inline: auto; text-align: center; color: var(--dbn-muted); font-size: var(--dbn-fs-lg); }
/* The founder story runs longer than the sibling split sections, so top-align this one
   pair: the portrait then starts level with the copy and travels with it via sticky
   instead of being centred against a much taller text column. */
.dbn-story__inner { align-items: start; }
.dbn-story__media { position: sticky; top: 100px; }
.dbn-stands__inner, .dbn-spotlight__inner { grid-template-columns: 1fr 1.1fr; }
.dbn-weddings-preview__inner { grid-template-columns: 1fr 1.05fr; }

/* ----- Service cards ---------------------------------------------------- */
.dbn-service-card { background: #fff; border: 1px solid var(--dbn-line); border-radius: var(--dbn-radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dbn-dur-md) var(--dbn-ease), box-shadow var(--dbn-dur-md) var(--dbn-ease); }
.dbn-service-card:hover { transform: translateY(-4px); box-shadow: var(--dbn-shadow); }
.dbn-service-card__media { background: var(--dbn-sky); }
.dbn-service-card__body { padding: var(--dbn-space-6) var(--dbn-space-6) var(--dbn-space-7); display: flex; flex-direction: column; gap: var(--dbn-space-2); flex: 1; }
.dbn-service-card__title { font-size: var(--dbn-fs-xl); margin: 0; }
.dbn-service-card__desc { color: var(--dbn-muted); margin: 0; }
.dbn-service-card__bestfor { font-size: var(--dbn-fs-sm); color: var(--dbn-blue); margin: 0.2rem 0; }
.dbn-service-card__bestfor span { font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--dbn-fs-2xs); display: block; color: var(--dbn-muted); }
.dbn-service-card__actions { margin-top: auto; padding-top: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* big service layout (Services page) */
.dbn-services-stack { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem); }
.dbn-service-card--lg { flex-direction: row; }
.dbn-service-card--lg .dbn-service-card__media { flex: 0 0 42%; }
.dbn-service-card--lg .dbn-service-card__body { padding: clamp(1.8rem, 3vw, 2.6rem); }
.dbn-service-card--lg:nth-child(even) { flex-direction: row-reverse; }

/* ----- Checklist -------------------------------------------------------- */
.dbn-checklist { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.5rem; }
.dbn-checklist li { position: relative; padding-left: 1.6rem; font-size: var(--dbn-fs-md); }
.dbn-checklist li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--dbn-blue); }
.dbn-checklist--2col { grid-template-columns: 1fr 1fr; }

/* ----- Package cards ---------------------------------------------------- */
.dbn-package-card { background: #fff; border: 1px solid var(--dbn-line); border-radius: var(--dbn-radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.dbn-package-card__media { background: var(--dbn-sky); }
.dbn-package-card__body { padding: var(--dbn-pad-card); display: flex; flex-direction: column; gap: var(--dbn-space-2); flex: 1; }
.dbn-package-card__title { font-size: var(--dbn-fs-xl); margin: 0; }
.dbn-package-card__bestfor { font-size: var(--dbn-fs-sm); color: var(--dbn-blue); margin: 0; }
.dbn-package-card__bestfor span { display: block; font-size: var(--dbn-fs-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dbn-muted); }
.dbn-package-card__price { font-family: var(--dbn-serif); font-size: var(--dbn-fs-2xl); color: var(--dbn-blue-deep); margin: 0.4rem 0 0; }
.dbn-package-card__actions { margin-top: auto; padding-top: 0.8rem; }

/* ----- Portfolio -------------------------------------------------------- */
.dbn-portfolio-card { position: relative; }
.dbn-portfolio-card__link { display: block; color: inherit; }
.dbn-portfolio-card__media { position: relative; overflow: hidden; border-radius: var(--dbn-radius); }
.dbn-portfolio-card__media .dbn-media__img, .dbn-portfolio-card__media .dbn-ph { transition: transform var(--dbn-dur-lg) var(--dbn-ease); }
.dbn-portfolio-card__link:hover .dbn-media__img { transform: scale(1.05); }
.dbn-portfolio-card__overlay {
	position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 1rem;
	background: linear-gradient(0deg, rgba(4,72,159,0.62), transparent 60%);
	opacity: 0; transition: opacity var(--dbn-dur-sm) var(--dbn-ease);
}
.dbn-portfolio-card__link:hover .dbn-portfolio-card__overlay,
.dbn-portfolio-card__link:focus-visible .dbn-portfolio-card__overlay { opacity: 1; }
.dbn-portfolio-card__view { color: #fff; font-size: var(--dbn-fs-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.dbn-portfolio-card__meta { padding-top: 0.9rem; }
.dbn-portfolio-card__cat { font-size: var(--dbn-fs-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dbn-blue); }
.dbn-portfolio-card__title { font-size: var(--dbn-fs-lg); margin: 0.2rem 0 0; }

/* featured (home) mixed layout */
.dbn-portfolio-featured { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.dbn-portfolio-featured > .dbn-portfolio-card--lg { grid-column: span 6; }
.dbn-portfolio-featured > .dbn-portfolio-card--md { grid-column: span 2; }

/* portfolio grid (masonry-ish via columns) */
.dbn-portfolio-grid { columns: 3; column-gap: clamp(1rem, 2vw, 1.6rem); }
.dbn-portfolio-grid .dbn-portfolio-card { break-inside: avoid; margin-bottom: clamp(1rem, 2vw, 1.6rem); display: inline-block; width: 100%; }
.dbn-portfolio-card.is-hidden { display: none; }

.dbn-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.dbn-filter { background: transparent; border: 1px solid var(--dbn-line); border-radius: 100px; padding: 0.5rem 1.1rem; font-family: var(--dbn-sans); font-size: var(--dbn-fs-xs); cursor: pointer; color: var(--dbn-blue-deep); transition: background-color var(--dbn-dur-sm) var(--dbn-ease), border-color var(--dbn-dur-sm) var(--dbn-ease), color var(--dbn-dur-sm) var(--dbn-ease), transform var(--dbn-dur-xs) var(--dbn-ease); }
.dbn-filter:hover { border-color: var(--dbn-blue); }
.dbn-filter:active { transform: scale(0.96); }
.dbn-filter.is-active { background: var(--dbn-blue-deep); color: #fff; border-color: var(--dbn-blue-deep); }
.dbn-filters__empty { text-align: center; color: var(--dbn-muted); }

/* gallery masonry (columns) */
.dbn-gallery-masonry { columns: 3; column-gap: 1rem; }
.dbn-gallery-masonry__item { break-inside: avoid; margin-bottom: 1rem; }
.dbn-lightbox-trigger { display: block; width: 100%; cursor: zoom-in; }
.dbn-lightbox-trigger:focus-visible { outline: 3px solid var(--dbn-blue); outline-offset: 3px; }

/* Accessible full-image viewer; links remain usable when dialog support is absent. */
.dbn-lightbox {
	--dbn-lightbox-progress: 0;
	position: fixed; inset: 0; width: min(94vw, 1480px); height: min(94vh, 980px);
	max-width: none; max-height: none; margin: auto; padding: clamp(0.75rem, 2vw, 1.5rem);
	border: 1px solid rgba(207,247,255,0.16); border-radius: var(--dbn-radius);
	background: radial-gradient(circle at 50% 20%, rgba(11,73,160,0.24), transparent 44%), rgba(3,13,31,0.975); color: #fff;
	overflow: hidden;
}
.dbn-lightbox[open] { display: grid; place-items: center; }
.dbn-lightbox::before {
	content: ""; position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 3px;
	background: var(--dbn-sky); transform: scaleX(var(--dbn-lightbox-progress)); transform-origin: left;
	transition: transform var(--dbn-dur-xl) var(--dbn-ease-drift);
}
.dbn-lightbox::backdrop { background: rgba(2,8,18,0.88); backdrop-filter: blur(14px) saturate(0.7); }
.dbn-lightbox__figure { display: grid; place-items: center; gap: 0.75rem; width: 100%; height: 100%; margin: 0; touch-action: pan-y pinch-zoom; }
.dbn-lightbox__image {
	display: block; max-width: 100%; max-height: calc(94vh - 6.5rem); width: auto; height: auto; object-fit: contain;
	filter: drop-shadow(0 28px 60px rgba(0,0,0,0.32));
	transition: opacity var(--dbn-dur-md) ease, transform var(--dbn-dur-xl) var(--dbn-ease-drift);
}
.dbn-lightbox.is-switching .dbn-lightbox__image { opacity: 0.16; transform: scale(0.985); }
.dbn-lightbox__caption { max-width: 72ch; margin: 0; color: var(--dbn-sky); text-align: center; font-size: var(--dbn-fs-sm); }
.dbn-lightbox__counter {
	position: absolute; z-index: 2; top: 1rem; left: 1.15rem; margin: 0;
	font-family: var(--dbn-serif); font-size: var(--dbn-fs-md); letter-spacing: 0.08em; color: var(--dbn-sky);
}
.dbn-lightbox__close,
.dbn-lightbox__nav {
	position: absolute; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px;
	padding: 0; border: 1px solid rgba(255,255,255,0.32); border-radius: 50%;
	background: rgba(4,15,34,0.72); color: #fff; cursor: pointer; line-height: 1;
	transition: background-color var(--dbn-dur-sm) var(--dbn-ease), transform var(--dbn-dur-sm) var(--dbn-ease);
}
.dbn-lightbox__close:hover,
.dbn-lightbox__nav:hover { background: var(--dbn-blue); transform: scale(1.05); }
.dbn-lightbox__close { top: 0.75rem; right: 0.75rem; font-size: 2rem; }
.dbn-lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 2.4rem; }
.dbn-lightbox__nav:hover { transform: translateY(-50%) scale(1.05); }
.dbn-lightbox__nav--prev { left: 0.75rem; }
.dbn-lightbox__nav--next { right: 0.75rem; }
body.dbn-lightbox-open { overflow: hidden; }

@media (max-width: 600px) {
	.dbn-lightbox {
		width: 100vw; height: 100vh; height: 100dvh; border-radius: 0;
		padding: calc(3.5rem + env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) calc(4.5rem + env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
	}
	.dbn-lightbox__image { max-height: calc(100dvh - 9rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
	.dbn-lightbox__counter { top: calc(1.05rem + env(safe-area-inset-top)); left: calc(1rem + env(safe-area-inset-left)); }
	.dbn-lightbox__close { top: calc(0.75rem + env(safe-area-inset-top)); right: calc(0.75rem + env(safe-area-inset-right)); }
	.dbn-lightbox__nav { top: auto; bottom: calc(0.75rem + env(safe-area-inset-bottom)); transform: none; }
	.dbn-lightbox__nav--prev { left: calc(0.75rem + env(safe-area-inset-left)); }
	.dbn-lightbox__nav--next { right: calc(0.75rem + env(safe-area-inset-right)); }
	.dbn-lightbox__nav:hover { transform: scale(1.05); }
}

/* project detail */
.dbn-breadcrumb { font-size: var(--dbn-fs-xs); color: var(--dbn-muted); display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.dbn-project__title { font-size: var(--dbn-fs-h2); }
.dbn-project__lead { font-size: var(--dbn-fs-lg); color: var(--dbn-muted); max-width: 60ch; }
.dbn-project__feature { margin-block: clamp(1.5rem, 4vw, 3rem); }
.dbn-project__body { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.dbn-project__meta-block { padding: 1.2rem 0; border-top: 1px solid var(--dbn-line); }
.dbn-project__meta-block h3 { font-family: var(--dbn-sans); font-size: var(--dbn-fs-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dbn-muted); margin: 0 0 0.4rem; }
.dbn-related-projects { border-top: 1px solid var(--dbn-line); }
.dbn-related-projects__heading { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.dbn-related-projects__footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Long editorial pages reuse their existing section labels as orientation.
   The rail changes no URL structure: every destination is an in-page fragment. */
.dbn-chapter-nav {
	position: sticky;
	top: calc(var(--dbn-header-h) + 0.7rem);
	z-index: 18;
	width: fit-content;
	max-width: calc(100% - (2 * var(--dbn-gutter)));
	margin: 0.75rem auto;
	transition: top var(--dbn-dur-lg) var(--dbn-ease-drift);
}
.dbn-header-hidden .dbn-chapter-nav { top: 0.7rem; }
.dbn-chapter-nav__track {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	max-width: 100%;
	padding: 0.38rem;
	border: 1px solid rgba(11,73,160,0.12);
	border-radius: 999px;
	background: rgba(255,255,255,0.88);
	box-shadow: 0 20px 56px -42px rgba(4,72,159,0.9);
	backdrop-filter: blur(18px) saturate(1.2);
	-webkit-backdrop-filter: blur(18px) saturate(1.2);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	scrollbar-width: none;
}
.dbn-chapter-nav__track::-webkit-scrollbar { display: none; }
.dbn-chapter-nav__link {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0.55rem 0.9rem;
	border-radius: 999px;
	font-size: var(--dbn-fs-2xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dbn-muted);
	transition: color var(--dbn-dur-md) var(--dbn-ease), background-color var(--dbn-dur-md) var(--dbn-ease), transform var(--dbn-dur-sm) var(--dbn-ease);
}
.dbn-chapter-nav__link:hover,
.dbn-chapter-nav__link:focus-visible { color: var(--dbn-blue-deep); }
.dbn-chapter-nav__link.is-active { color: #fff; background: var(--dbn-blue-deep); }
.dbn-chapter-nav__link:active { transform: scale(0.97); }
.dbn-experience-nav { margin-top: -1.45rem; }
.dbn-project-nav { margin-top: clamp(1rem, 2vw, 1.75rem); }
#dbn-project-details, #dbn-project-gallery, #dbn-project-reel, #dbn-related-projects,
[id^="dbn-experience-"] { scroll-margin-top: calc(var(--dbn-header-h) + 5rem); }

.dbn-project__intro { max-width: 66rem; }
.dbn-project--concise .dbn-project__hero { padding-top: clamp(2.2rem, 4vw, 3.6rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.dbn-project--concise .dbn-project__intro { display: grid; grid-template-columns: minmax(0, 0.68fr) minmax(18rem, 0.32fr); column-gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.dbn-project--concise .dbn-project__intro .dbn-eyebrow { grid-column: 1 / -1; }
.dbn-project--concise .dbn-project__title { font-size: clamp(2.8rem, 7vw, 6.6rem); margin: 0; }
.dbn-project--concise .dbn-project__lead { align-self: end; margin: 0.7rem 0 0; }
.dbn-project--concise .dbn-project__feature--concise { position: relative; z-index: 2; margin-top: clamp(-3.4rem, -4vw, -2rem); overflow: clip; border-radius: clamp(16px, 2vw, 30px); }
.dbn-project--concise .dbn-project__feature--concise::before {
	content: "";
	position: absolute;
	right: clamp(1rem, 3vw, 2.5rem);
	top: clamp(0.8rem, 1.5vw, 1.4rem);
	width: clamp(3.5rem, 8vw, 7rem);
	height: 1px;
	background: linear-gradient(90deg, rgba(255,255,255,0.2), var(--dbn-sky));
	z-index: 2;
}
.dbn-project--concise .dbn-project__feature--concise .dbn-media,
.dbn-project--concise .dbn-project__feature--concise .dbn-ph { min-height: clamp(20rem, 57vw, 46rem); }

/* A compact rail of real, already-published work turns genuine dead ends into
   useful visual routes without asking the owner for more content. */
.dbn-discovery { border-top: 1px solid rgba(11,73,160,0.12); background: linear-gradient(180deg, rgba(207,247,255,0.48), #fff); }
.dbn-discovery__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.9rem, 2vw, 1.5rem); }
.dbn-discovery .dbn-portfolio-card__media { aspect-ratio: 4 / 5; }
.dbn-discovery .dbn-portfolio-card__media .dbn-media,
.dbn-discovery .dbn-portfolio-card__media .dbn-ph { height: 100%; }
.dbn-discovery .dbn-portfolio-card__title { font-size: var(--dbn-fs-md); }

/* ----- Testimonials ----------------------------------------------------- */
/* Front-end testimonials are image-only (see dbn_render_testimonial_card):
   only the card frame + screenshot render, so no quote/caption styles here. */
.dbn-testimonial-card { position: relative; width: 100%; margin: 0; background: #fff; border: 1px solid var(--dbn-line); border-radius: var(--dbn-radius-lg); padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.dbn-testimonial-card__shot { background: var(--dbn-sky); }
.dbn-testimonial-card.is-placeholder { border-style: dashed; }

/* ----- Foundri ---------------------------------------------------------- */
.dbn-foundri-card { background: #fff; border: 1px solid var(--dbn-line); border-radius: var(--dbn-radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.dbn-foundri-card__media { position: relative; }
.dbn-foundri-card__status { position: absolute; top: 0.8rem; left: 0.8rem; font-size: var(--dbn-fs-2xs); letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 100px; background: var(--dbn-sky); color: var(--dbn-blue-deep); }
.dbn-foundri-card__status.is-available { background: var(--dbn-blue); color: #fff; }
.dbn-foundri-card__body { padding: var(--dbn-pad-card); display: flex; flex-direction: column; gap: var(--dbn-space-2); flex: 1; }
.dbn-foundri-card__cat { font-size: var(--dbn-fs-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dbn-blue); }
.dbn-foundri-card__title { font-size: var(--dbn-fs-lg); margin: 0; }
.dbn-foundri-card__desc { color: var(--dbn-muted); margin: 0; font-size: var(--dbn-fs-md); }
.dbn-foundri-card .dbn-btn { margin-top: auto; align-self: flex-start; }
.dbn-foundri-cat { background: #fff; border: 1px solid var(--dbn-line); border-radius: var(--dbn-radius-lg); overflow: hidden; }
.dbn-foundri-cat__body { padding: var(--dbn-pad-card-sm) var(--dbn-pad-card); }
.dbn-foundri-cat__title { font-size: var(--dbn-fs-lg); margin: 0 0 0.4rem; }

/* The homepage launch lock is a complete alternate Foundri presentation.
   Product cards and CTAs are not rendered beneath it, so there is no hidden
   keyboard path or broken draft-page link waiting behind the visual layer. */
.dbn-foundri-preview--locked {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: center;
	min-height: clamp(23rem, 43svh, 25.5rem);
	padding-block: clamp(3.25rem,5vw,4.5rem);
	overflow: hidden;
	color: var(--dbn-white);
	background:
		linear-gradient(115deg, rgba(4,72,159,0.12), transparent 42%),
		linear-gradient(145deg, #07111d 0%, #111a25 48%, #060d16 100%);
}
.dbn-foundri-preview--locked::before,
.dbn-foundri-preview--locked::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.dbn-foundri-preview--locked::before {
	inset: -8%;
	opacity: 0.055;
	mix-blend-mode: soft-light;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 180px 180px;
}
.dbn-foundri-preview--locked::after {
	background:
		radial-gradient(88% 120% at 50% 50%, transparent 42%, rgba(0,4,10,0.5) 100%),
		linear-gradient(180deg, rgba(0,0,0,0.16), transparent 24%, transparent 72%, rgba(0,0,0,0.32));
	box-shadow: inset 0 1px rgba(207,247,255,0.06), inset 0 -1px rgba(207,247,255,0.04);
}
.dbn-foundri-lock__atmosphere { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.dbn-foundri-lock__glow {
	position: absolute;
	width: min(38vw,31rem);
	aspect-ratio: 1;
	border-radius: 50%;
	filter: blur(clamp(3.5rem,7vw,7rem));
	opacity: 0.56;
}
.dbn-foundri-lock__glow--one { left: 8%; top: -46%; background: rgba(148,184,202,0.3); transform: rotate(-10deg); }
.dbn-foundri-lock__glow--two { right: 7%; bottom: -54%; background: rgba(25,108,183,0.32); transform: rotate(12deg); }
.dbn-foundri-lock__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.65rem,3vw,2.35rem);
}
.dbn-foundri-lock__copy { width: min(100%,56rem); text-align: center; }
.dbn-foundri-lock__meta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: clamp(1.15rem,2vw,1.65rem); text-align: center; }
.dbn-foundri-lock__meta .dbn-sectionno { margin: 0; }
.dbn-foundri-lock__status {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.42rem 0.72rem;
	border: 1px solid rgba(207,247,255,0.22);
	border-radius: 999px;
	background: rgba(255,255,255,0.045);
	color: rgba(255,255,255,0.76);
	font-size: var(--dbn-fs-2xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}
.dbn-foundri-lock__status i { width: 0.42rem; aspect-ratio: 1; border-radius: 50%; background: var(--dbn-sky); box-shadow: 0 0 0 0.32rem rgba(207,247,255,0.08), 0 0 1rem rgba(207,247,255,0.48); }
.dbn-foundri-lock__title { max-width: 14ch; margin: 0 auto; color: var(--dbn-white); font-size: clamp(3.3rem,5.8vw,5.8rem); line-height: 0.92; letter-spacing: -0.052em; text-wrap: balance; }
.dbn-foundri-lock__signal { position: relative; width: min(15rem,58vw); height: 1px; margin: clamp(1.35rem,2.4vw,1.9rem) auto 0; overflow: hidden; background: linear-gradient(90deg,transparent,rgba(207,247,255,0.28) 14%,rgba(207,247,255,0.28) 86%,transparent); }
.dbn-foundri-lock__signal span { position: absolute; inset: 0 auto 0 0; width: 38%; background: linear-gradient(90deg,transparent,var(--dbn-sky),transparent); box-shadow: 0 0 1rem rgba(207,247,255,0.7); transform: translateX(-120%); }

@keyframes dbn-foundri-signal { to { transform: translateX(390%); } }
@keyframes dbn-foundri-glow-one { 50% { transform: translate3d(5%,8%,0) scale(1.08); opacity: 0.72; } }
@keyframes dbn-foundri-glow-two { 50% { transform: translate3d(-6%,-5%,0) scale(0.94); opacity: 0.42; } }
@keyframes dbn-foundri-status-pulse {
	50% { box-shadow: 0 0 0 0.6rem rgba(207,247,255,0.02); }
}
.dbn-js body.dbn-motion-full .dbn-foundri-lock__signal span { animation: dbn-foundri-signal 4.8s var(--dbn-ease-in-out) infinite; }
.dbn-js body.dbn-motion-full .dbn-foundri-lock__glow--one { animation: dbn-foundri-glow-one 13s ease-in-out infinite; }
.dbn-js body.dbn-motion-full .dbn-foundri-lock__glow--two { animation: dbn-foundri-glow-two 16s ease-in-out infinite; }
.dbn-js body.dbn-motion-full .dbn-foundri-lock__status i { animation: dbn-foundri-status-pulse 2.8s ease-in-out infinite; }

html.dbn-save-data .dbn-foundri-lock__glow,
html.dbn-save-data .dbn-foundri-lock__signal span,
html.dbn-save-data .dbn-foundri-lock__status i { animation: none; }

@media (prefers-reduced-motion: reduce) {
	.dbn-foundri-lock__glow,
	.dbn-foundri-lock__signal span,
	.dbn-foundri-lock__status i { animation: none !important; }
}

@media (min-width: 821px) and (max-width: 1180px) {
	.dbn-section.dbn-foundri-preview--locked { min-height: clamp(22rem,42svh,25rem); }
	.dbn-foundri-lock__title { font-size: clamp(4rem,7.8vw,5.6rem); }
}

@media (max-width: 820px) {
	.dbn-section.dbn-foundri-preview--locked {
		min-height: clamp(25rem,50svh,28rem);
		padding-block: clamp(3.5rem,8svh,4.5rem);
	}
	.dbn-foundri-lock__inner { gap: clamp(1.5rem,5vw,2rem); }
	.dbn-foundri-lock__meta { margin-bottom: clamp(1.25rem,5vw,1.75rem); }
	.dbn-foundri-lock__title { max-width: 11ch; font-size: clamp(3.05rem,14.8vw,4.5rem); line-height: 0.94; }
	.dbn-foundri-lock__signal { margin-top: 1.55rem; }
	.dbn-foundri-lock__glow { width: 88vw; filter: blur(4.5rem); }
	.dbn-foundri-lock__glow--one { left: -26%; top: -14%; }
	.dbn-foundri-lock__glow--two { right: -34%; bottom: -14%; }
}

/* ----- Vendors / collaborations ---------------------------------------- */
.dbn-vendor-card { position: relative; height: 100%; background: #fff; border: 1px solid var(--dbn-line); border-radius: var(--dbn-radius-lg); overflow: hidden; text-align: center; }
.dbn-vendor-card.has-link { cursor: pointer; }
.dbn-vendor-card__link { position: relative; display: flex; flex-direction: column; height: 100%; color: inherit; }
.dbn-vendor-card__link:hover,
.dbn-vendor-card__link:active { color: inherit; }
.dbn-vendor-card__link:focus-visible { outline: 3px solid var(--dbn-blue); outline-offset: -3px; }
.dbn-vendor-card.has-link:focus-within { border-color: rgba(11,73,160,0.42); box-shadow: var(--dbn-shadow-lift); }
.dbn-vendor-card__arrow {
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid rgba(4,72,159,0.16);
	border-radius: 50%;
	background: rgba(255,255,255,0.92);
	box-shadow: 0 0.45rem 1.2rem rgba(4,72,159,0.14);
	color: var(--dbn-blue-deep);
	font-size: 1rem;
	line-height: 1;
	transition: transform var(--dbn-dur-sm) var(--dbn-ease), background-color var(--dbn-dur-sm) var(--dbn-ease), color var(--dbn-dur-sm) var(--dbn-ease);
}
.dbn-vendor-card__media { overflow: hidden; background: var(--dbn-sky); }
.dbn-vendor-card__media .dbn-media__img { transition: transform var(--dbn-dur-lg) var(--dbn-ease); }
.dbn-vendor-card__body { flex: 1; padding: var(--dbn-pad-card-sm); }
.dbn-vendor-card__name { font-size: var(--dbn-fs-lg); margin: 0; }
.dbn-vendor-card__cat { font-size: var(--dbn-fs-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dbn-blue); }
.dbn-vendor-card__desc { color: var(--dbn-muted); font-size: var(--dbn-fs-sm); margin: 0.5rem 0; }

.dbn-collab-card { background: #fff; border: 1px solid var(--dbn-line); border-radius: var(--dbn-radius-lg); overflow: hidden; height: 100%; }
.dbn-collab-card__link { display: block; color: inherit; height: 100%; }
.dbn-collab-card__body { padding: var(--dbn-pad-card-sm) var(--dbn-pad-card); }
.dbn-collab-card__type { font-size: var(--dbn-fs-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dbn-blue); }
.dbn-collab-card__title { font-size: var(--dbn-fs-xl); margin: 0.3rem 0 0.6rem; }
.dbn-collab-card__meta { list-style: none; padding: 0; margin: 0 0 0.6rem; font-size: var(--dbn-fs-xs); color: var(--dbn-muted); display: grid; gap: 0.2rem; }
.dbn-collab-card__meta strong { color: var(--dbn-blue-deep); font-weight: 500; }
.dbn-collab-card__note { font-size: var(--dbn-fs-sm); color: var(--dbn-muted); margin: 0; }
.dbn-collab-card.is-placeholder { border-style: dashed; }

.dbn-collab-type { text-align: center; }
.dbn-collab-type__media { margin-bottom: 1rem; }
.dbn-collab-type__title { font-size: var(--dbn-fs-lg); margin: 0 0 0.3rem; }
.dbn-collab-type__body { font-size: var(--dbn-fs-sm); color: var(--dbn-muted); }

/* ----- Process ---------------------------------------------------------- */
.dbn-process { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); counter-reset: step; }
.dbn-process--5 { grid-template-columns: repeat(5, 1fr); }
.dbn-process__step { position: relative; padding-top: 1rem; border-top: 2px solid var(--dbn-line); }
.dbn-process__num { font-family: var(--dbn-serif); font-size: var(--dbn-fs-3xl); color: var(--dbn-blue); display: block; margin-bottom: 0.4rem; }
.dbn-process__title { font-size: var(--dbn-fs-lg); margin: 0 0 0.4rem; }
.dbn-process__body { font-size: var(--dbn-fs-sm); color: var(--dbn-muted); margin: 0; }

/* The Process on a full-bleed media background (v1.15.3, Weddings by DBN).
   dbn_media_bg() fills the layer (video → image → branded placeholder); the
   deep-blue gradient scrim keeps the steps readable over any media. */
.dbn-process-section--media { position: relative; overflow: hidden; background: var(--dbn-blue-deep); color: #fff; }
.dbn-process-section--media .dbn-process-bg { position: absolute; inset: 0; z-index: 0; }
.dbn-process-section--media .dbn-process-bg .dbn-media,
.dbn-process-section--media .dbn-process-bg .dbn-ph { width: 100%; height: 100%; border-radius: 0; border: 0; }
.dbn-process-section--media .dbn-process-bg .dbn-media__img { width: 100%; height: 100%; object-fit: cover; }
.dbn-process-section--media .dbn-process-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,72,159,0.62), rgba(4,72,159,0.86)); }
.dbn-process-section--media .dbn-container { position: relative; z-index: 1; }
.dbn-process-section--media .dbn-heading__title,
.dbn-process-section--media .dbn-process__title { color: #fff; }
.dbn-process-section--media .dbn-eyebrow,
.dbn-process-section--media .dbn-process__num { color: var(--dbn-sky); }
.dbn-process-section--media .dbn-heading__intro,
.dbn-process-section--media .dbn-process__body { color: rgba(255,255,255,0.88); }
.dbn-process-section--media .dbn-process__step { border-top-color: rgba(255,255,255,0.3); }
.dbn-process-section--media :focus-visible { outline-color: var(--dbn-sky); }

/* ----- Pillars ---------------------------------------------------------- */
.dbn-pillar { background: #fff; border: 1px solid var(--dbn-line); border-radius: var(--dbn-radius-lg); padding: var(--dbn-pad-card); }
.dbn-pillar__num { font-family: var(--dbn-serif); font-size: var(--dbn-fs-lg); color: var(--dbn-blue); }
.dbn-pillar__title { font-size: var(--dbn-fs-xl); margin: 0.4rem 0; }
.dbn-pillar__body { color: var(--dbn-muted); font-size: var(--dbn-fs-md); margin: 0; }

/* ----- Brand world grid ------------------------------------------------- */
.dbn-brandworld__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.9rem, 2vw, 1.4rem); }
.dbn-brandworld__item--0 { grid-row: span 2; }
.dbn-brandworld__item--4 { grid-column: span 2; }

/* ----- Experience details ---------------------------------------------- */
.dbn-detail-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; max-width: 900px; margin: 2.5rem auto 0; }
.dbn-detail { text-align: center; padding: 1.3rem 0.8rem; background: var(--dbn-sky); border-radius: var(--dbn-radius); border: 1px solid var(--dbn-line); }
.dbn-detail__label { display: block; font-size: var(--dbn-fs-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dbn-muted); margin-bottom: 0.4rem; }
.dbn-detail__value { font-family: var(--dbn-serif); font-size: var(--dbn-fs-base); color: var(--dbn-blue-deep); }
.dbn-countdown { display: flex; justify-content: center; gap: 1.5rem; margin: 1.5rem 0; }
.dbn-countdown__unit { text-align: center; min-width: 64px; }
.dbn-countdown__unit span { font-family: var(--dbn-serif); font-size: 2.4rem; display: block; color: var(--dbn-blue); }
.dbn-countdown__unit small { font-size: var(--dbn-fs-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dbn-muted); }
.dbn-why__body { text-align: center; font-size: var(--dbn-fs-lg); max-width: 60ch; margin-inline: auto; }

/* reels */
.dbn-reels-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.dbn-reel-card { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: var(--dbn-radius); overflow: hidden; }
.dbn-reel-card > .dbn-media__img,
.dbn-reel-card > .dbn-ph { width: 100%; height: 100%; object-fit: cover; }
.dbn-reel-card[href] .dbn-media__img { transition: transform var(--dbn-dur-lg) var(--dbn-ease); }
.dbn-reel-card[href]:hover .dbn-media__img,
.dbn-reel-card[href]:focus-visible .dbn-media__img { transform: scale(1.035); }
.dbn-reel-card[href]:focus-visible { outline: 3px solid var(--dbn-blue); outline-offset: 3px; }
.dbn-reel-card--project { width: min(100%, 430px); margin-inline: auto; }
.dbn-reel-card__play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.85); }
.dbn-reel-card__play::before { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: 16px solid var(--dbn-blue-deep); border-top: 10px solid transparent; border-bottom: 10px solid transparent; transform: translateX(2px); }

/* Official Instagram Reel embeds (v1.15.0). Instagram renders and controls the
   player — visitors press play and watch right on the page. The theme only
   lays the embeds out: nothing (overlay, scrim, anchor, pseudo-element) may
   ever sit above the player, and overflow stays visible so no part of
   Instagram's interface is clipped. The row breaks out of the 1200px container
   so four side-by-side embeds keep Instagram's ~326px minimum width. */
.dbn-reels-row.dbn-reels-row--embeds {
	--dbn-reels-w: min(1560px, 100vw - 2 * var(--dbn-gutter));
	width: var(--dbn-reels-w);
	margin-left: calc(50% - var(--dbn-reels-w) / 2);
	grid-template-columns: min(100%, 540px);
	justify-content: center;
	align-items: start;
	gap: clamp(1rem, 1.6vw, 1.5rem);
	overflow: visible;
}
/* position:relative — embed.js absolutely-positions the iframe while it
   measures; the cell must be its containing block or it sizes to the page. */
.dbn-reel-embed { position: relative; min-width: 0; overflow: visible; }
.dbn-reel-embed .instagram-media {
	width: 100% !important;
	min-width: 0 !important;
	max-width: 540px !important;
	margin: 0 auto !important;
}

@media (min-width: 721px) {
	.dbn-reels-row.dbn-reels-row--embeds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1480px) {
	.dbn-reels-row.dbn-reels-row--embeds { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ----- Accordion -------------------------------------------------------- */
.dbn-accordion { border-top: 1px solid var(--dbn-line); }
.dbn-accordion__item { border-bottom: 1px solid var(--dbn-line); }
.dbn-accordion__heading { margin: 0; }
.dbn-accordion__trigger {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left;
	background: none; border: 0; padding: 1.2rem 0; cursor: pointer; font-family: var(--dbn-serif); font-size: var(--dbn-fs-lg); color: var(--dbn-blue-deep);
	transition: color var(--dbn-dur-sm) var(--dbn-ease);
}
.dbn-accordion__trigger:hover { color: var(--dbn-blue-hover); }
.dbn-accordion__trigger:hover .dbn-accordion__icon::before,
.dbn-accordion__trigger:hover .dbn-accordion__icon::after { background: var(--dbn-blue-hover); }
.dbn-accordion__icon { position: relative; flex: 0 0 18px; width: 18px; height: 18px; }
.dbn-accordion__icon::before, .dbn-accordion__icon::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--dbn-blue); transition: background-color var(--dbn-dur-sm) var(--dbn-ease); }
.dbn-accordion__icon::before { width: 100%; height: 1.5px; }
.dbn-accordion__icon::after { width: 1.5px; height: 100%; transition: transform var(--dbn-dur-sm) var(--dbn-ease), background-color var(--dbn-dur-sm) var(--dbn-ease); }
.dbn-accordion__trigger[aria-expanded="true"] .dbn-accordion__icon::after { transform: scaleY(0); }
.dbn-accordion__panel { overflow: hidden; }
.dbn-accordion__panel[hidden] { display: none; }
.dbn-accordion__content { animation: dbn-fade-in var(--dbn-dur-md) var(--dbn-ease); }
@keyframes dbn-fade-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dbn-accordion__content { animation: none; } }
.dbn-accordion__content { padding: 0 0 1.3rem; color: var(--dbn-muted); }
.dbn-accordion__content p { margin: 0; }

/* ----- Forms ------------------------------------------------------------ */
.dbn-form-wrap { max-width: 720px; }
.dbn-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.dbn-form__field { display: flex; flex-direction: column; gap: 0.35rem; margin: 0 0 var(--dbn-space-4); }
.dbn-form__field label { font-size: var(--dbn-fs-xs); letter-spacing: 0.04em; color: var(--dbn-blue-deep); font-weight: 500; transition: color var(--dbn-dur-sm) var(--dbn-ease); }
.dbn-form__field:focus-within label { color: var(--dbn-blue); }
.dbn-form input[type="text"], .dbn-form input[type="email"], .dbn-form input[type="tel"], .dbn-form input[type="url"],
.dbn-form select, .dbn-form textarea, .dbn-form input[type="file"] {
	width: 100%; min-width: 0; max-width: 100%; font-family: var(--dbn-sans); font-size: 1rem; color: var(--dbn-ink);
	padding: 0.75rem 0.9rem; border: 1px solid var(--dbn-line); border-radius: var(--dbn-radius-sm);
	background: #fff; transition: border-color var(--dbn-dur-sm) var(--dbn-ease), box-shadow var(--dbn-dur-sm) var(--dbn-ease);
}
.dbn-form input[type="file"] { padding: 0.35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbn-form input[type="file"]::file-selector-button {
	min-height: 44px; margin-right: 0.75rem; padding: 0.6rem 0.85rem;
	border: 0; border-radius: calc(var(--dbn-radius-sm) - 2px);
	background: var(--dbn-blue-soft); color: var(--dbn-blue-deep);
	font: 500 var(--dbn-fs-sm)/1 var(--dbn-sans); cursor: pointer;
}
.dbn-form input:focus, .dbn-form select:focus, .dbn-form textarea:focus { border-color: var(--dbn-blue); box-shadow: 0 0 0 3px rgba(11,73,160,0.18); outline: none; }
.dbn-form textarea { resize: vertical; min-height: 120px; }
.dbn-form__hint { font-size: var(--dbn-fs-xs); color: var(--dbn-muted); }
.dbn-form__error { font-size: var(--dbn-fs-xs); color: var(--dbn-error-text); }
.dbn-form__field--check label { display: flex; align-items: flex-start; gap: 0.7rem; line-height: 1.5; cursor: pointer; }
.dbn-form__field--check input[type="checkbox"] { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; accent-color: var(--dbn-blue); }
.dbn-form__field--check a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -0.65rem; text-decoration: underline; text-underline-offset: 2px; }
.dbn-form__field input:invalid:not(:placeholder-shown) { border-color: var(--dbn-error-field); }
.dbn-form__wedding { border: 1px solid var(--dbn-line); border-radius: var(--dbn-radius); padding: 1.2rem 1.4rem; margin: 0.5rem 0 1.5rem; background: var(--dbn-sky); }
.dbn-form__wedding legend { font-family: var(--dbn-serif); font-size: var(--dbn-fs-lg); padding: 0 0.5rem; color: var(--dbn-blue-deep); }
.dbn-form__submit { margin-top: 0.5rem; }
.dbn-form-progress {
	--dbn-form-completion: 0;
	position: sticky; top: calc(var(--dbn-header-h) + 0.75rem); z-index: 4;
	display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem;
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); padding: 0.8rem 1rem;
	border: 1px solid rgba(11,73,160,0.14); border-radius: var(--dbn-radius-sm);
	background: rgba(255,255,255,0.9); box-shadow: 0 18px 46px -38px rgba(4,72,159,0.8);
	backdrop-filter: blur(16px) saturate(1.15);
	transition: top var(--dbn-dur-lg) var(--dbn-ease-drift);
}
.dbn-form-progress__label { font-size: var(--dbn-fs-xs); letter-spacing: 0.11em; text-transform: uppercase; color: var(--dbn-blue-deep); }
.dbn-form-progress__value { font-family: var(--dbn-serif); color: var(--dbn-blue); }
.dbn-form-progress__track { grid-column: 1 / -1; height: 2px; overflow: hidden; background: var(--dbn-line); }
.dbn-form-progress__track > span { display: block; width: 100%; height: 100%; background: var(--dbn-blue); transform: scaleX(var(--dbn-form-completion)); transform-origin: left; transition: transform var(--dbn-dur-lg) var(--dbn-ease-drift); }
.dbn-template-contact .dbn-form__field.is-complete > label::after { content: " \2713"; color: var(--dbn-blue); font-weight: 600; }
.dbn-form[aria-busy="true"] .dbn-btn[type="submit"],
.dbn-btn:disabled {
	opacity: 0.65;
	cursor: wait;
	transform: none;
	box-shadow: none;
}
.dbn-form--inline .dbn-form__grid { grid-template-columns: repeat(3, 1fr); }
.dbn-hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }

.dbn-form-notice { padding: 1rem 1.2rem; border-radius: var(--dbn-radius-sm); margin-bottom: 1.2rem; }
.dbn-form-notice--success { background: var(--dbn-success-bg); border: 1px solid var(--dbn-success-line); color: var(--dbn-success-text); }
.dbn-form-notice--error { background: var(--dbn-error-bg); border: 1px solid var(--dbn-error-line); color: var(--dbn-error-text); }
.dbn-form-notice strong { display: block; font-family: var(--dbn-serif); font-size: var(--dbn-fs-lg); }
.dbn-form-notice p { margin: 0.3rem 0 0; }

/* ----- Quick contact cards --------------------------------------------- */
.dbn-quick-cards { display: grid; gap: 1rem; }
.dbn-quick-card { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 1rem; padding: var(--dbn-space-5) var(--dbn-space-6); border: 1px solid var(--dbn-line); border-radius: var(--dbn-radius); background: #fff; color: inherit; transition: transform var(--dbn-dur-sm) var(--dbn-ease), box-shadow var(--dbn-dur-sm) var(--dbn-ease), border-color var(--dbn-dur-sm) var(--dbn-ease); }
.dbn-quick-card:hover { transform: translateY(-2px); box-shadow: var(--dbn-shadow-sm); }
.dbn-quick-card:active { transform: translateY(0); transition-duration: var(--dbn-dur-xs); }
.dbn-quick-card__icon { grid-row: 1 / 3; align-self: center; display: inline-flex; color: var(--dbn-blue-deep); }
.dbn-quick-card__icon .dbn-icon { width: 26px; height: 26px; }
.dbn-quick-card__label { font-weight: 500; }
.dbn-quick-card__text { font-size: var(--dbn-fs-xs); color: var(--dbn-muted); }
.dbn-quick-card__arrow { grid-row: 1 / 3; grid-column: 3; align-self: center; display: inline-flex; color: var(--dbn-muted); transition: color var(--dbn-dur-sm) var(--dbn-ease); }
.dbn-quick-card__arrow .dbn-icon { width: 18px; height: 18px; transition: transform var(--dbn-dur-sm) var(--dbn-ease); }
.dbn-quick-card:hover .dbn-quick-card__arrow,
.dbn-quick-card:focus-visible .dbn-quick-card__arrow { color: var(--dbn-blue); }
.dbn-quick-card:hover .dbn-icon--arrow,
.dbn-quick-card:focus-visible .dbn-icon--arrow { transform: translateX(3px); }
.dbn-quick-card:hover .dbn-icon--arrow-ne,
.dbn-quick-card:focus-visible .dbn-icon--arrow-ne { transform: translate(2px, -2px); }
/* WhatsApp is a primary direct-contact action: a quiet sky wash + firmer
   hairline lift it slightly above the neighbouring cards, never a green button. */
/* Policies gateway on the Contact page: the same quick-card link, centred in the
   narrow column so one short card still reads as an intentional composition. */
.dbn-quick-card--terms { max-width: 30rem; margin-inline: auto; }
.dbn-quick-card--whatsapp { background: linear-gradient(135deg, rgba(207,247,255,0.5), rgba(207,247,255,0.18)), #fff; border-color: rgba(4, 72, 159, 0.3); }
.dbn-quick-card--whatsapp:hover .dbn-quick-card__icon,
.dbn-quick-card--whatsapp:focus-visible .dbn-quick-card__icon { color: #1DA851; }

/* ----- CTA band --------------------------------------------------------- */
.dbn-cta-band { background: var(--dbn-blue-deep); color: var(--dbn-sky); padding-block: clamp(3rem, 7vw, 5.5rem); position: relative; overflow: hidden; }
.dbn-cta-band--feature { background: linear-gradient(135deg, var(--dbn-blue-deep), var(--dbn-blue)); }
.dbn-cta-band--portfolio {
	background: var(--dbn-sky);
	color: var(--dbn-blue-deep);
	border-block: 1px solid rgba(11,73,160,0.18);
}
.dbn-cta-band--portfolio .dbn-cta-band__title,
.dbn-cta-band--portfolio .dbn-cta-band__body { color: var(--dbn-blue-deep); }
.dbn-cta-band--portfolio .dbn-btn--light {
	--btn-bg: var(--dbn-blue-deep);
	--btn-fg: var(--dbn-white);
	--btn-bd: var(--dbn-blue-deep);
}
.dbn-cta-band--portfolio .dbn-btn--light:hover {
	--btn-bg: var(--dbn-blue-hover);
	--btn-bd: var(--dbn-blue-hover);
}
.dbn-cta-band--portfolio .dbn-btn--light:active {
	--btn-bg: var(--dbn-blue-active);
	--btn-bd: var(--dbn-blue-active);
}
.dbn-cta-band.dbn-cta-band--portfolio ::selection {
	background: rgba(11,73,160,0.2);
	color: var(--dbn-blue-deep);
}
.dbn-cta-band.dbn-cta-band--portfolio :focus-visible { outline-color: var(--dbn-blue-deep); }
.dbn-cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.dbn-cta-band__inner--center { flex-direction: column; text-align: center; }
.dbn-cta-band__title { color: #fff; font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0; max-width: 22ch; }
.dbn-cta-band__body { color: var(--dbn-sky); margin: 0.6rem 0 0; max-width: 50ch; }
.dbn-cta-band--image .dbn-cta-band__bg { position: absolute; inset: 0; z-index: 0; opacity: 0.35; }
.dbn-cta-band--image .dbn-cta-band__bg .dbn-media__img { width: 100%; height: 100%; object-fit: cover; }
.dbn-cta-band--image .dbn-container { position: relative; z-index: 1; }

/* ----- Posts grid / pagination ----------------------------------------- */
.dbn-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.dbn-post-card__title { font-size: var(--dbn-fs-xl); margin: 0.8rem 0 0.4rem; }
.dbn-post-card__excerpt { color: var(--dbn-muted); font-size: var(--dbn-fs-md); }
.dbn-search-form {
	display: flex;
	gap: 0.75rem;
	max-width: 42rem;
	margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.dbn-search-form__input {
	min-width: 0;
	flex: 1 1 auto;
	min-height: 48px;
	padding: 0.75rem 1rem;
	border: 1px solid var(--dbn-line);
	border-radius: 100px;
	background: var(--dbn-white);
	color: var(--dbn-ink);
	font: inherit;
}
.dbn-search-form__input:focus { border-color: var(--dbn-blue); }
.dbn-search-empty { max-width: 42rem; margin: 0 auto; text-align: center; color: var(--dbn-muted); }
.dbn-pagination { margin-top: var(--dbn-space-9); display: flex; justify-content: center; }
.dbn-pagination .page-numbers { padding: 0.5rem 0.9rem; border: 1px solid var(--dbn-line); border-radius: var(--dbn-radius-sm); margin: 0 0.2rem; transition: background-color var(--dbn-dur-sm) var(--dbn-ease), border-color var(--dbn-dur-sm) var(--dbn-ease), color var(--dbn-dur-sm) var(--dbn-ease); }
.dbn-pagination a.page-numbers:hover { background: var(--dbn-sky); border-color: var(--dbn-blue); }
.dbn-pagination .current { background: var(--dbn-blue-deep); color: #fff; border-color: var(--dbn-blue-deep); }

/* ----- 404 -------------------------------------------------------------- */
.dbn-404 { min-height: clamp(34rem, 72svh, 54rem); display: grid; place-items: center; overflow: clip; }
.dbn-404__inner { position: relative; z-index: 1; text-align: center; }
.dbn-404__title { font-size: var(--dbn-fs-h2); }
.dbn-404__actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }

/* ----- Footer ----------------------------------------------------------- */
.dbn-footer { background: var(--dbn-blue-deep); color: var(--dbn-sky); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.dbn-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.12); }
.dbn-footer__name { font-family: var(--dbn-serif); font-size: var(--dbn-fs-3xl); color: #fff; display: block; margin-bottom: 1rem; }
/* Footer logos are inverted to white so they stay visible on the deep-blue
   footer (the v1.10.3 treatment) — applies to uploaded and fallback marks. */
.dbn-footer__logo { max-height: 35px; width: auto; margin-bottom: 1rem; filter: brightness(0) invert(1); }
.dbn-footer__statement { color: var(--dbn-sky); max-width: 42ch; font-size: var(--dbn-fs-md); }
.dbn-footer__tagline { font-family: var(--dbn-serif); font-size: var(--dbn-fs-lg); color: #fff; }
.dbn-footer__heading { font-family: var(--dbn-sans); font-size: var(--dbn-fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dbn-sky); margin: 0 0 1rem; }
.dbn-footer__menu, .dbn-footer__policy-menu { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
/* `.dbn-footer__policies > a` is the no-menu fallback link, which renders bare rather
   than inside a policy-menu list; without it the link inherited the dark body link
   colour and was near-invisible on the deep-blue footer. */
.dbn-footer__menu a, .dbn-footer__policy-menu a, .dbn-footer__policies > a { color: var(--dbn-sky); font-size: var(--dbn-fs-md); display: inline-block; padding-block: 0.15rem; }
.dbn-footer__menu a:hover, .dbn-footer__policy-menu a:hover, .dbn-footer__policies > a:hover { color: #fff; }
.dbn-footer__menu a:active, .dbn-footer__policy-menu a:active, .dbn-footer__policies > a:active { color: var(--dbn-sky); }
.dbn-footer__hours { margin-top: 1.35rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,0.14); }
.dbn-footer__hours-heading { margin: 0 0 0.45rem; font-family: var(--dbn-sans); font-size: var(--dbn-fs-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dbn-sky); }
.dbn-footer__hours-value { margin: 0; max-width: 24ch; color: #fff; font-size: var(--dbn-fs-sm); line-height: 1.55; }
/* Legacy hard stop: v1.13.1 removed this widget region from the footer
   template. Keep stale/cached markup invisible and structurally space-free. */
.dbn-footer__extra { display: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; height: 0 !important; overflow: hidden !important; }
.dbn-reels__cta { display: flex; justify-content: center; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.dbn-reels__cta a,
.dbn-portfolio-reels__cta { min-height: 44px; }
.dbn-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem; }
.dbn-footer__copyright { margin: 0; font-size: var(--dbn-fs-xs); color: var(--dbn-sky); }
.dbn-footer__policies { display: flex; gap: 1.2rem; }
.dbn-footer__policy-menu { display: flex; gap: 1.2rem; }

/* ----- Reveal animation -------------------------------------------------
   Hidden state is gated behind .dbn-js so that, with JavaScript disabled,
   all content remains fully visible (progressive enhancement). */
.dbn-js [data-dbn-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--dbn-dur-xl) var(--dbn-ease), transform var(--dbn-dur-xl) var(--dbn-ease); }
[data-dbn-reveal].is-visible { opacity: 1; transform: none; }
.dbn-js .dbn-motion-off [data-dbn-reveal],
.dbn-js.dbn-save-data [data-dbn-reveal] {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}
@media (prefers-reduced-motion: reduce) { .dbn-js [data-dbn-reveal] { opacity: 1; transform: none; transition: none; } }

/* ----- Widgets / misc --------------------------------------------------- */
.widget-title { font-family: var(--dbn-serif); }
.dbn-page__title, .dbn-single__title { font-size: var(--dbn-fs-h2); }
.dbn-page__header, .dbn-single__header { margin-bottom: 1.5rem; }
.dbn-single__media { margin-bottom: 2rem; }

/* ----- Client refinement pass (v1.3.1) --------------------------------- */
.dbn-header {
	background: rgba(255, 255, 255, 0.96);
	border-bottom-color: rgba(4, 72, 159, 0.12);
	box-shadow: 0 10px 30px -26px rgba(4, 72, 159, 0.42);
}
.dbn-header.is-stuck { border-bottom-color: rgba(4, 72, 159, 0.2); }
.dbn-header > .dbn-container { max-width: min(100%, 1480px); }
.dbn-header__inner { gap: clamp(0.8rem, 1.3vw, 1.35rem); }
.dbn-header__brand { flex: 0 0 auto; }
.dbn-header__nav { min-width: 0; }
.dbn-menu { gap: clamp(0.55rem, 1vw, 1.25rem); flex-wrap: nowrap; }
.dbn-menu li,
.dbn-menu a,
.dbn-header__cta { white-space: nowrap; }
.dbn-menu a { font-size: clamp(0.76rem, 0.82vw, 0.9rem); }
.dbn-header__cta { flex: 0 0 auto; min-width: max-content; padding-inline: clamp(0.95rem, 1.3vw, 1.2rem); }

.dbn-hero__sub,
.dbn-heading__intro,
.dbn-xhero__rotate-line,
.dbn-footer__tagline,
.dbn-package-card__price,
.dbn-detail__value,
.dbn-footer__marquee-word {
	font-family: var(--dbn-accent-serif);
}

.dbn-ph__mark {
	width: clamp(5rem, 32%, 12rem);
	aspect-ratio: 1;
	background: url("../images/dbn-symbol.png") center / contain no-repeat;
	color: transparent;
	font-size: 0;
	opacity: 0.13;
}
.dbn-ph--wedding-monogram .dbn-ph__mark { width: clamp(6rem, 42%, 14rem); opacity: 0.18; }

.dbn-hero__media--single { max-width: 520px; justify-self: end; width: 100%; }
.dbn-hero__media--services > .dbn-media,
.dbn-hero__media--services > .dbn-ph {
	aspect-ratio: 4 / 5;
	width: min(100%, 520px);
	margin-inline: auto;
}
.dbn-hero__media--services > .dbn-media .dbn-media__img { width: 100%; height: 100%; object-fit: cover; }

.dbn-contact-editorial { margin: 0; overflow: hidden; }
.dbn-contact-editorial .dbn-media,
.dbn-contact-editorial .dbn-ph {
	border-radius: 0;
	border-inline: 0;
	min-height: clamp(28rem, 78vh, 48rem);
}
.dbn-contact-editorial .dbn-media__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}
.dbn-contact__inner--stack {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3rem);
	max-width: 880px;
}
.dbn-contact__form,
.dbn-contact__chat { width: 100%; }
.dbn-contact__form .dbn-heading,
.dbn-contact__chat .dbn-heading { text-align: center; margin-inline: auto; }
.dbn-contact__form .dbn-form-wrap { margin-inline: auto; }
.dbn-contact__chat { padding-top: clamp(1rem, 2vw, 1.5rem); border-top: 1px solid var(--dbn-line); }
/* auto-fit so an unset channel closes its space instead of leaving a hole */
.dbn-contact__chat .dbn-quick-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }

/* Social-discovery microrow inside the quick-contact area — quieter than the
   cards above it, never a section of its own. */
.dbn-social-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem 0.85rem; margin-top: clamp(1.1rem, 2.5vw, 1.6rem); }
.dbn-social-row__label { font-size: var(--dbn-fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dbn-muted); margin-right: 0.35rem; }
.dbn-social-link { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; min-width: 44px; padding: 0.3rem 0.7rem; border-radius: calc(var(--dbn-radius) - 6px); color: var(--dbn-ink); font-size: var(--dbn-fs-sm); font-weight: 500; transition: background-color var(--dbn-dur-sm) var(--dbn-ease), color var(--dbn-dur-sm) var(--dbn-ease); }
.dbn-social-link .dbn-icon { width: 17px; height: 17px; color: var(--dbn-blue-deep); }
.dbn-social-link:hover,
.dbn-social-link:focus-visible { background: rgba(207, 247, 255, 0.55); color: var(--dbn-blue); }
.dbn-social-link__label { line-height: 1; white-space: nowrap; }

/* Phones (the theme's ≤820px mobile layer, where these panels are already stacked): the
   label takes its own centred line and the platforms sit beneath it as one evenly
   distributed row. Equal flex basis does the distributing, so the group stays centred and
   can never wrap into a vertical list at standard mobile widths; the max-width keeps the
   three links comfortably sized instead of stretching across a wide stacked column. */
@media (max-width: 820px) {
	.dbn-social-row { max-width: 26rem; margin-inline: auto; gap: 0.55rem 0.4rem; }
	.dbn-social-row__label { flex: 0 0 100%; margin-right: 0; text-align: center; }
	.dbn-social-link { flex: 1 1 0; justify-content: center; padding: 0.3rem 0.45rem; }
	.dbn-social-link .dbn-icon { flex: none; }
}
@media (max-width: 380px) {
	.dbn-social-link { gap: 0.32rem; padding: 0.3rem 0.28rem; font-size: var(--dbn-fs-xs); }
	.dbn-social-link .dbn-icon { width: 15px; height: 15px; }
}
#dbn_name,
#dbn_email { border-color: rgba(11, 73, 160, 0.62); }

.dbn-footer { overflow: hidden; }
.dbn-footer__top {
	align-items: start;
	border-bottom: 0;
	padding-bottom: clamp(2rem, 4vw, 3rem);
}
.dbn-footer__logo { max-width: min(182px, 80%); max-height: 45px; object-fit: contain; }
.dbn-footer__marquee {
	position: relative;
	margin-inline: calc(-1 * var(--dbn-gutter));
	overflow: hidden;
	border-top: 1px solid rgba(255,255,255,0.14);
	padding-block: clamp(0.9rem, 2vw, 1.3rem);
}
.dbn-footer__marquee-track {
	display: flex;
	width: max-content;
}
.dbn-js .dbn-footer__marquee-track {
	animation: dbn-marquee 46s linear infinite;
}
@keyframes dbn-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.dbn-footer__marquee.is-paused .dbn-footer__marquee-track { animation-play-state: paused; }
.dbn-footer__marquee-toggle {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: none;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	appearance: none;
	background: transparent;
	color: inherit;
	cursor: pointer;
	touch-action: manipulation;
}
.dbn-js .dbn-footer__marquee-toggle { display: block; }
.dbn-footer__marquee-toggle:focus-visible {
	outline: 3px solid var(--dbn-sky);
	outline-offset: -4px;
}
.dbn-motion-subtle .dbn-footer__marquee-track,
.dbn-motion-off .dbn-footer__marquee-track,
.dbn-js.dbn-save-data .dbn-footer__marquee-track {
	animation: none;
	transform: none;
}
.dbn-motion-subtle .dbn-footer__marquee-toggle,
.dbn-motion-off .dbn-footer__marquee-toggle,
.dbn-js.dbn-save-data .dbn-footer__marquee-toggle { display: none; }
@media (prefers-reduced-motion: reduce) {
	.dbn-footer__marquee-track { animation: none; transform: none; }
	.dbn-footer__marquee-toggle { display: none; }
}
.dbn-footer__marquee-word {
	white-space: nowrap;
	font-size: clamp(1.55rem, 3.2vw, 2.85rem);
	font-style: italic;
	color: rgba(255,255,255,0.72);
}
.dbn-footer__marquee-sep { color: var(--dbn-sky); opacity: 0.8; }
.dbn-footer__bottom { position: relative; padding-top: 1.5rem; }
.dbn-footer__bottom::before {
	content: "";
	position: absolute;
	top: 0;
	/* Bleed to the container gutters instead of 100vw — visually identical
	   inside the footer, structurally incapable of horizontal overflow. */
	left: calc(-1 * var(--dbn-gutter));
	right: calc(-1 * var(--dbn-gutter));
	height: 1px;
	background: rgba(255,255,255,0.16);
}

.dbn-template-about .dbn-hero--page { padding-bottom: clamp(1.75rem, 4vw, 3.5rem); }
.dbn-template-about .dbn-story { padding-top: clamp(2rem, 4vw, 3.5rem); }
/* ----- Portfolio: the studio in motion ---------------------------------
   A distinct editorial shell around official Instagram embeds. Decorative
   type stays behind the content plane; the Instagram players themselves are
   never covered, clipped or intercepted. */
.dbn-portfolio-reels {
	--dbn-section-p: 0;
	position: relative;
	isolation: isolate;
	padding-block: clamp(5rem, 9vw, 8.5rem);
	background:
		radial-gradient(circle at 88% 12%, rgba(207,247,255,0.18), transparent 30%),
		linear-gradient(135deg, #032f72 0%, var(--dbn-blue-deep) 42%, var(--dbn-blue) 100%);
	color: var(--dbn-white);
}
.dbn-portfolio-reels::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 170px 170px;
	opacity: 0.035;
	pointer-events: none;
}
.dbn-portfolio-reels__kinetic {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.dbn-portfolio-reels__kinetic span {
	position: absolute;
	font-family: var(--dbn-serif);
	font-size: clamp(6rem, 15vw, 14rem);
	font-weight: 500;
	line-height: 0.78;
	letter-spacing: -0.055em;
	white-space: nowrap;
	color: rgba(207,247,255,0.055);
	will-change: transform;
}
.dbn-portfolio-reels__kinetic span:first-child {
	top: 10%;
	left: -4vw;
	transform: translateX(calc(var(--dbn-section-p) * 10vw));
}
.dbn-portfolio-reels__kinetic span:last-child {
	right: -8vw;
	bottom: 4%;
	transform: translateX(calc(var(--dbn-section-p) * -13vw));
}
.dbn-portfolio-reels__inner { position: relative; z-index: 1; }
.dbn-portfolio-reels__header {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
	gap: clamp(2rem, 6vw, 6.5rem);
	align-items: end;
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
	border-top: 1px solid rgba(207,247,255,0.42);
	border-bottom: 1px solid rgba(207,247,255,0.18);
}
.dbn-portfolio-reels__eyebrow { color: var(--dbn-sky); }
.dbn-portfolio-reels__title {
	max-width: 8ch;
	margin: 0.65rem 0 0;
	font-size: clamp(3.8rem, 7.2vw, 7.8rem);
	line-height: 0.86;
	letter-spacing: -0.055em;
	color: var(--dbn-white);
}
.dbn-portfolio-reels__intro {
	padding-left: clamp(1.25rem, 3vw, 2.25rem);
	border-left: 1px solid rgba(207,247,255,0.28);
}
.dbn-portfolio-reels__intro p {
	max-width: 46ch;
	margin: 0 0 1.5rem;
	font-size: clamp(1rem, 1.4vw, 1.18rem);
	color: rgba(255,255,255,0.78);
}
.dbn-portfolio-reels__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	min-height: 48px;
	padding: 0.75rem 1rem 0.75rem 0.85rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--dbn-sky);
	color: var(--dbn-blue-deep);
	font-size: var(--dbn-fs-sm);
	font-weight: 600;
	letter-spacing: 0.025em;
	transition: background-color var(--dbn-dur-sm) var(--dbn-ease), color var(--dbn-dur-sm) var(--dbn-ease), transform var(--dbn-dur-sm) var(--dbn-ease);
}
.dbn-portfolio-reels__cta .dbn-icon { width: 19px; height: 19px; }
.dbn-portfolio-reels__cta-arrow { margin-left: 0.2rem; font-size: 1.1em; }
.dbn-portfolio-reels__cta:hover,
.dbn-portfolio-reels__cta:focus-visible { background: var(--dbn-white); color: var(--dbn-blue); transform: translateY(-2px); }
.dbn-portfolio-reels__cta:focus-visible { outline: 3px solid var(--dbn-sky); outline-offset: 4px; }
.dbn-portfolio-reels__index {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1rem;
	margin-top: clamp(2.5rem, 5vw, 4.5rem);
	color: rgba(255,255,255,0.58);
	font-size: var(--dbn-fs-2xs);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.dbn-portfolio-reels__index span:nth-child(2) { display: flex; align-items: center; gap: 1rem; }
.dbn-portfolio-reels__index span:nth-child(2)::before,
.dbn-portfolio-reels__index span:nth-child(2)::after { content: ""; height: 1px; flex: 1; background: rgba(207,247,255,0.18); }
.dbn-portfolio-reels__grid { margin-top: clamp(1.5rem, 3vw, 2.5rem); position: relative; z-index: 2; }
.dbn-portfolio-reels__grid.dbn-reels-row--embeds { --dbn-reels-w: min(1420px, 100vw - 2 * var(--dbn-gutter)); }
.dbn-portfolio-reels__grid.dbn-reels-row--embeds[data-count="1"] { --dbn-reels-w: min(540px, 100%); }
.dbn-portfolio-reels__grid.dbn-reels-row--embeds[data-count="2"] { --dbn-reels-w: min(1104px, 100vw - 2 * var(--dbn-gutter)); }
.dbn-portfolio-reel {
	min-width: 0;
	padding-top: 0.8rem;
	border-top: 1px solid rgba(207,247,255,0.24);
}
.dbn-portfolio-reel__meta {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.75rem;
	color: rgba(255,255,255,0.62);
	font-size: var(--dbn-fs-2xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.dbn-portfolio-reel .dbn-reel-embed { z-index: 1; }
.dbn-portfolio-reel--placeholder .dbn-ph { width: 100%; border-color: rgba(207,247,255,0.3); box-shadow: 0 24px 70px rgba(0,20,55,0.2); }
.dbn-js .dbn-portfolio-reel[data-dbn-reveal] {
	transform: translate3d(0, 52px, 0) rotate(0.35deg);
	transition-duration: var(--dbn-dur-xl);
}
.dbn-js .dbn-portfolio-reel:nth-child(even)[data-dbn-reveal] { transform: translate3d(0, 68px, 0) rotate(-0.35deg); }
.dbn-js .dbn-portfolio-reel:nth-child(2)[data-dbn-reveal] { transition-delay: 80ms; }
.dbn-js .dbn-portfolio-reel:nth-child(3)[data-dbn-reveal] { transition-delay: 160ms; }
.dbn-js .dbn-portfolio-reel:nth-child(4)[data-dbn-reveal] { transition-delay: 240ms; }
.dbn-js .dbn-portfolio-reel[data-dbn-reveal].is-visible { transform: none; }

@media (min-width: 1120px) and (max-width: 1479px) {
	.dbn-portfolio-reels__grid.dbn-reels-row--embeds[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
	.dbn-portfolio-reels__header { grid-template-columns: 1fr; gap: 1.75rem; }
	.dbn-portfolio-reels__title { max-width: 9ch; font-size: clamp(3.25rem, 13vw, 5.5rem); }
	.dbn-portfolio-reels__intro { padding: 1.5rem 0 0; border-top: 1px solid rgba(207,247,255,0.18); border-left: 0; }
	.dbn-portfolio-reels__index span:nth-child(2) { font-size: 0; }
	.dbn-portfolio-reels__index span:nth-child(2)::before,
	.dbn-portfolio-reels__index span:nth-child(2)::after { display: block; }
}

@media (max-width: 600px) {
	.dbn-portfolio-reels { padding-block: 4rem; }
	.dbn-portfolio-reels__kinetic span { font-size: 6rem; }
	.dbn-portfolio-reels__kinetic span:first-child { top: 7%; left: -35%; }
	.dbn-portfolio-reels__kinetic span:last-child { right: -65%; bottom: 2%; }
	.dbn-portfolio-reels__cta { width: 100%; justify-content: center; }
	.dbn-js .dbn-portfolio-reel[data-dbn-reveal],
	.dbn-js .dbn-portfolio-reel:nth-child(even)[data-dbn-reveal] { transform: translate3d(0, 28px, 0); }
	.dbn-js .dbn-portfolio-reel[data-dbn-reveal].is-visible { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.dbn-portfolio-reels__kinetic span,
	.dbn-portfolio-reels__cta { transform: none; transition: none; }
	.dbn-js .dbn-portfolio-reel[data-dbn-reveal] { opacity: 1; transform: none; transition: none; }
}
.dbn-motion-off .dbn-portfolio-reels__kinetic span,
.dbn-motion-off .dbn-portfolio-reels__cta,
.dbn-js .dbn-motion-off .dbn-portfolio-reels__header[data-dbn-reveal],
.dbn-js .dbn-motion-off .dbn-portfolio-reel[data-dbn-reveal] { opacity: 1; transform: none; transition: none; }

.dbn-hero--weddings-bg {
	background: var(--dbn-blue-deep);
}
.dbn-hero--weddings-bg .dbn-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4,72,159,0.34), rgba(4,72,159,0.74));
}
.dbn-hero--weddings-bg .dbn-btn--secondary {
	--btn-bg: rgba(255,255,255,0.1);
	--btn-bd: rgba(255,255,255,0.72);
	--btn-fg: #fff;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.dbn-template-weddings-by-dbn .dbn-process-section .dbn-heading,
.dbn-template-weddings-by-dbn .dbn-calm-copy {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}
.dbn-template-weddings-by-dbn .dbn-process__step { text-align: center; }
.dbn-template-weddings-by-dbn .dbn-cta-band__title,
.dbn-template-weddings-by-dbn .dbn-cta-band__body {
	max-width: 760px;
	margin-inline: auto;
}

@media (min-width: 1181px) {
	.dbn-template-about .dbn-philosophy .dbn-heading,
	.dbn-template-services .dbn-packages-section .dbn-heading {
		max-width: 980px;
	}
	.dbn-template-about .dbn-philosophy .dbn-heading__title,
	.dbn-template-services .dbn-packages-section .dbn-heading__title,
	.dbn-template-weddings-by-dbn .dbn-hero__title {
		white-space: nowrap;
	}
}

/* Single source of truth for the nav collapse — keep in sync with the
   matchMedia query in assets/js/main.js (1181px). */
@media (max-width: 1180px) {
	:root { --dbn-header-h: 68px; }
	.dbn-header > .dbn-container {
		padding-left: max(var(--dbn-gutter), env(safe-area-inset-left));
		padding-right: max(var(--dbn-gutter), env(safe-area-inset-right));
	}
	.dbn-js .dbn-header__nav { display: none; }
	.dbn-js .dbn-burger { display: inline-flex; align-items: center; }
	.dbn-header__cta { display: none; }
	.dbn-header__inner { min-height: var(--dbn-header-h); }

	/* Keep navigation available when JavaScript is disabled. */
	html:not(.dbn-js) .dbn-header__inner { flex-wrap: wrap; padding-block: 0.7rem; }
	html:not(.dbn-js) .dbn-header__nav { display: block; order: 3; flex: 1 0 100%; margin: 0; }
	html:not(.dbn-js) .dbn-menu { flex-wrap: wrap; gap: 0.35rem 1rem; padding-top: 0.65rem; border-top: 1px solid var(--dbn-line); }
	.dbn-burger { width: 44px; height: 44px; justify-content: center; border-radius: 50%; }
	.dbn-burger:hover { background: var(--dbn-sky); }
	.dbn-burger.is-active .dbn-burger__box::before { top: 50%; transform: translateY(-50%) rotate(45deg); }
	.dbn-burger.is-active .dbn-burger__line { opacity: 0; }
	.dbn-burger.is-active .dbn-burger__box::after { bottom: 50%; transform: translateY(50%) rotate(-45deg); }
	.dbn-mobile {
		background: linear-gradient(145deg, var(--dbn-white) 0 66%, var(--dbn-sky) 100%);
		transform: translateX(100%);
		padding-top: max(1.1rem, env(safe-area-inset-top));
		padding-left: max(var(--dbn-gutter), env(safe-area-inset-left));
		padding-right: max(var(--dbn-gutter), env(safe-area-inset-right));
		padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
	}
	.dbn-mobile.is-open { transform: translateX(0); }
	.dbn-mobile__head { min-height: 48px; }
	.dbn-mobile__close { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
	.dbn-mobile__close:hover { background: var(--dbn-sky); }
	.dbn-mobile__menu { gap: 0; }
	.dbn-mobile__menu a { padding-block: 0.7rem; }
	.dbn-mobile__menu .current-menu-item > a { color: var(--dbn-blue); }
	.dbn-mobile__contact { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--dbn-line); }
}

/* ----- Fit-and-finish layer (v1.4) -------------------------------------- */

/* Text selection carries the brand. */
::selection { background: var(--dbn-sky); color: var(--dbn-blue-deep); }
.dbn-section--dark ::selection,
.dbn-footer ::selection,
.dbn-cta-band ::selection,
.dbn-bigcta ::selection { background: rgba(207, 247, 255, 0.28); color: #fff; }

/* Buttons acknowledge the press — motion.css owns hover; this owns :active. */
/* color: guard against the global a:active tint leaking into anchor buttons. */
.dbn-btn:active { transform: translateY(0) scale(0.98); transition-duration: var(--dbn-dur-xs); color: var(--btn-fg); }

/* Focus rings must stay visible on deep-blue surfaces. */
.dbn-section--dark :focus-visible,
.dbn-footer :focus-visible,
.dbn-cta-band :focus-visible,
.dbn-bigcta :focus-visible,
.dbn-feature--dark :focus-visible,
.dbn-hero--experience :focus-visible,
.dbn-hero--weddings-bg :focus-visible {
	outline-color: var(--dbn-sky);
}

/* Micro-interaction presses are motion too — settle for colour-only feedback. */
@media (prefers-reduced-motion: reduce) {
	.dbn-btn:active,
	.dbn-filter:active,
	.dbn-quick-card:active,
	.dbn-quick-card:hover,
	.dbn-quick-card:hover .dbn-icon--arrow,
	.dbn-quick-card:focus-visible .dbn-icon--arrow,
	.dbn-quick-card:hover .dbn-icon--arrow-ne,
	.dbn-quick-card:focus-visible .dbn-icon--arrow-ne,
	.dbn-float-wa:hover,
	.dbn-float-wa:active { transform: none; }
}

/* Wedding fieldset visibility contract (see assets/js/forms.js):
   hidden only when JS is available to reveal it; `is-wedding` comes from the
   the enhancement script for #service= wedding deep links. */
.dbn-js .dbn-form__wedding {
	display: block; max-height: 0; margin-block: 0; padding-block: 0; overflow: hidden;
	opacity: 0; visibility: hidden; pointer-events: none; border-color: transparent;
	transition: max-height var(--dbn-dur-xl) var(--dbn-ease-drift), opacity var(--dbn-dur-md) ease,
		padding var(--dbn-dur-xl) var(--dbn-ease-drift), margin var(--dbn-dur-xl) var(--dbn-ease-drift), border-color var(--dbn-dur-md) ease;
}
.dbn-js .dbn-form__wedding.is-wedding {
	max-height: 72rem; margin: 0.5rem 0 1.5rem; padding: 1.2rem 1.4rem;
	opacity: 1; visibility: visible; pointer-events: auto; border-color: var(--dbn-line);
}

/* Long lower-page regions skip offscreen paint until the browser approaches
   them. Cached intrinsic size prevents layout jumps on repeat visits. */
@supports (content-visibility: auto) {
	.dbn-faq-section,
	.dbn-policies,
	.dbn-portfolio-reels,
	.dbn-related-projects,
	.dbn-footer {
		content-visibility: auto;
		contain-intrinsic-block-size: auto 720px;
	}
}

@media (max-width: 600px) {
	.dbn-search-form { flex-direction: column; }
	.dbn-search-form .dbn-btn { width: 100%; }
	.dbn-hero__text,
	.dbn-heading,
	.dbn-contact__form,
	.dbn-contact__chat {
		min-width: 0;
		max-width: 100%;
	}
	.dbn-hero__title,
	.dbn-heading__title,
	.dbn-cta-band__title {
		max-width: 100%;
		overflow-wrap: break-word;
		word-break: normal;
	}
	.dbn-contact-editorial .dbn-media,
	.dbn-contact-editorial .dbn-ph {
		min-height: 62vh;
	}
	.dbn-contact__chat .dbn-quick-cards { grid-template-columns: 1fr; }
	.dbn-footer__marquee { margin-inline: calc(-1 * var(--dbn-gutter)); }
}