/*
Theme Name: Ongon Studio
Theme URI: https://ongonstudio.com
Author: Ongon Studio
Author URI: https://ongonstudio.com
Description: Premium minimal black-and-white WordPress theme for Ongon Studio, a web design and development agency based in Dhaka, Bangladesh. Built for the agency's own marketing and portfolio site.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ongon-studio
Tags: light, custom-background, custom-logo, custom-menu, featured-images, full-width-template, threaded-comments, translation-ready, e-commerce
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
	--ongon-navy: #101c35;
	--ongon-white: #ffffff;
	--ongon-black: #111111;
	--ongon-ice: #f3f5f8;
	--ongon-steel: #64748b;
	--ongon-border: #e5e7eb;

	--ongon-bg: var(--ongon-white);
	--ongon-bg-alt: var(--ongon-ice);
	--ongon-bg-card: var(--ongon-white);
	--ongon-text: var(--ongon-black);
	--ongon-text-muted: #555555;
	--ongon-label: var(--ongon-steel);
	--ongon-accent: var(--ongon-black);
	--ongon-accent-hover: #2e2e2e;
	--ongon-accent-contrast: var(--ongon-white);
	--ongon-dark-bg: var(--ongon-navy);
	--ongon-dark-text: var(--ongon-white);
	--ongon-footer-bg: var(--ongon-navy);
	--ongon-footer-text: var(--ongon-white);

	--ongon-font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
	--ongon-font-display: "Instrument Serif", "Playfair Display", Georgia, serif;
	--ongon-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--ongon-container: 1180px;
	--ongon-radius: 4px;
	--ongon-transition: 220ms ease;
}

/*
 * Scroll-reveal is opt-in: content is always visible by default.
 * Only once JS confirms it can run the reveal (adds .ongon-js-reveal to
 * <html>) do elements start hidden and fade in — so a slow script, a
 * JS error, or a backgrounded tab can never leave content invisible.
 */
@media (prefers-reduced-motion: no-preference) {
	html.ongon-js-reveal .ongon-reveal {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.7s ease, transform 0.7s ease;
	}

	html.ongon-js-reveal .ongon-reveal.is-visible {
		opacity: 1;
		transform: none;
	}
}

/* On small screens, keep the same reveal but make it quick — a long
   fade reads as lag on a phone where content is already near the top
   of the viewport. */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
	html.ongon-js-reveal .ongon-reveal {
		transform: translateY(10px);
		transition: opacity 0.35s ease, transform 0.35s ease;
	}
}

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

html {
	scroll-behavior: smooth;
}

/* overflow-x only on html, never body — overflow on body breaks
   position: sticky for its descendants (the header/nav bars) in
   Chromium-based browsers. */
html {
	max-width: 100%;
	overflow-x: hidden;
}

body {
	background-color: var(--ongon-bg);
	color: var(--ongon-text-muted);
	font-family: var(--ongon-font-body);
	font-size: 17px;
	line-height: 1.7;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

/* Locks background scroll while the mobile nav drawer is open. */
body.ongon-nav-is-open {
	overflow: hidden;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--ongon-accent);
	text-decoration: none;
	transition: color var(--ongon-transition);
}

a:hover {
	color: var(--ongon-text-muted);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--ongon-font-heading);
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 0.6em;
	color: var(--ongon-text);
	letter-spacing: 0.2px;
}

h1 {
	font-size: clamp(2.4rem, 5vw, 4rem);
}

h2 {
	font-size: clamp(1.9rem, 3.6vw, 2.75rem);
}

h3 {
	font-size: 1.4rem;
}

p {
	margin: 0 0 1.2em;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

button,
input,
textarea,
select {
	font-family: inherit;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.ongon-container {
	max-width: var(--ongon-container);
	margin: 0 auto;
	padding: 0 24px;
}

.ongon-section {
	padding: 96px 0;
}

.ongon-section--tight {
	padding: 64px 0;
}

.ongon-section--alt {
	background: var(--ongon-bg-alt);
}

.ongon-eyebrow {
	display: inline-block;
	font-family: var(--ongon-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--ongon-label);
	margin-bottom: 18px;
}

.ongon-section--dark .ongon-eyebrow {
	color: var(--ongon-dark-text);
	opacity: 0.6;
}

.ongon-section-head {
	max-width: 720px;
	margin: 0 0 56px;
}

.ongon-section-head p {
	color: var(--ongon-text-muted);
	font-size: 1.05rem;
}

.ongon-grid {
	display: grid;
	gap: 32px;
}

.ongon-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ongon-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.ongon-grid--3,
	.ongon-grid--2 {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.ongon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 34px;
	border-radius: var(--ongon-radius);
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	border: 1px solid transparent;
	cursor: pointer;
	transition: all var(--ongon-transition);
}

.ongon-btn--primary {
	background: var(--ongon-accent);
	color: var(--ongon-accent-contrast);
}

.ongon-btn--primary:hover {
	background: var(--ongon-accent-hover);
	color: var(--ongon-accent-contrast);
}

.ongon-btn--ghost {
	background: transparent;
	color: var(--ongon-text);
	border-color: var(--ongon-border);
}

.ongon-btn--ghost:hover {
	border-color: var(--ongon-accent);
	color: var(--ongon-accent);
}

/* Ghost button variant for use on dark/navy or video backgrounds. */
.ongon-btn--on-dark {
	color: var(--ongon-white);
	border-color: rgba(255, 255, 255, 0.4);
}

.ongon-btn--on-dark:hover {
	border-color: var(--ongon-white);
	color: var(--ongon-white);
}

/* ==========================================================================
   Announcement bar
   ========================================================================== */
.ongon-announcement-bar {
	background: var(--ongon-accent);
}

.ongon-announcement-bar p {
	margin: 0;
	padding: 6px 0;
	text-align: center;
	color: var(--ongon-accent-contrast);
	font-size: 0.72rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: opacity 400ms ease;
}

.ongon-announcement-bar p.is-fading {
	opacity: 0;
}

@media (max-width: 480px) {
	.ongon-announcement-bar p {
		font-size: 0.66rem;
		letter-spacing: 0.5px;
		padding: 6px 12px;
	}
}

/* ==========================================================================
   Site header
   ========================================================================== */
/* Not sticky on purpose: the header scrolls away with the page like
   any normal element, instead of staying pinned at the top. */
/* No backdrop-filter: it has repeatedly caused rendering/compositing
   bugs for positioned descendants (the mobile drawer, the account
   dropdown) in this environment — a solid near-opaque background
   gives nearly the same look without that risk. */
.site-header {
	background: rgba(255, 255, 255, 0.98);
	border-bottom: 1px solid var(--ongon-border);
}

.site-header__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 28px 0 18px;
	text-align: center;
	position: relative;
}

.site-branding a {
	font-family: var(--ongon-font-heading);
	font-size: 1.9rem;
	color: var(--ongon-text);
	letter-spacing: 1px;
}

.site-branding a:hover {
	color: var(--ongon-text-muted);
}

.site-branding img {
	max-height: 44px;
	width: auto;
	height: auto;
	margin: 0 auto;
}

/* Not sticky — scrolls away with the page along with the header. */
.main-navigation {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 18px;
	max-width: 100%;
	background: rgba(255, 255, 255, 0.98);
	border-bottom: 1px solid var(--ongon-border);
	padding: 14px 24px;
}

.main-navigation ul {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 18px;
}

.main-navigation a {
	color: var(--ongon-text);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0;
	white-space: nowrap;
	position: relative;
}

.main-navigation ul a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -4px;
	height: 1px;
	background: var(--ongon-text);
	transition: right var(--ongon-transition);
}

.main-navigation ul a:hover::after {
	right: 0;
}

.main-navigation a:hover {
	color: var(--ongon-text);
}

.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: var(--ongon-text);
	padding: 8px;
	cursor: pointer;
}

/* Hamburger icon drawn with a center bar + two pseudo-element bars. */
.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--ongon-text);
	border-radius: 1px;
}

.menu-toggle__icon {
	position: relative;
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.menu-toggle__icon::before {
	top: -7px;
}

.menu-toggle__icon::after {
	top: 7px;
}

/* ==========================================================================
   Desktop-only account menu + "Track Your Project" button
   ========================================================================== */
.site-header__utility {
	position: absolute;
	top: 18px;
	right: 0;
	display: flex;
	align-items: center;
	gap: 16px;
}

.ongon-account-menu {
	position: relative;
}

.ongon-account-menu__trigger {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 56px;
	padding: 4px 0 6px;
	border-radius: var(--ongon-radius);
	color: var(--ongon-text);
}

.ongon-account-menu__label {
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.ongon-account-menu__trigger:hover {
	color: var(--ongon-accent);
	background: var(--ongon-bg-alt);
}

.ongon-account-menu__dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 8px;
	min-width: 190px;
	background: var(--ongon-white);
	border: 1px solid var(--ongon-text);
	border-radius: var(--ongon-radius);
	box-shadow: 0 20px 40px -10px rgba(16, 28, 53, 0.35);
	padding: 8px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
	z-index: 500;
}

.ongon-account-menu:hover .ongon-account-menu__dropdown,
.ongon-account-menu:focus-within .ongon-account-menu__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ongon-account-menu__dropdown a {
	display: block;
	padding: 10px 20px;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--ongon-text);
	white-space: nowrap;
}

.ongon-account-menu__dropdown a:hover {
	background: var(--ongon-bg-alt);
	color: var(--ongon-accent);
}

.ongon-btn--small {
	padding: 9px 18px;
	font-size: 0.72rem;
}

/* Hidden by default (desktop); only ever shown inside the mobile drawer. */
.main-navigation__utility,
.main-navigation__close {
	display: none;
}

@media (max-width: 860px) {
	.site-header__inner {
		position: relative;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 24px 0 18px;
	}

	.menu-toggle {
		display: flex;
		position: absolute;
		left: 4px;
		top: 50%;
		transform: translateY(-50%);
	}

	.site-branding {
		margin: 0 auto;
		max-width: calc(100% - 100px);
	}

	.site-branding a {
		font-size: 1.4rem;
	}

	/* Shrink the logo on mobile so it never crowds the hamburger icon
	   sitting at the left edge of the header. */
	.site-branding img {
		max-height: 26px;
	}

	/* The account menu + Track Your Project button are desktop-only —
	   their equivalents live inside the drawer instead (below). */
	.site-header__utility {
		display: none;
	}

	/* A dimmed backdrop behind the drawer; clicking it closes the menu. */
	.ongon-nav-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(10, 16, 30, 0.45);
		opacity: 0;
		visibility: hidden;
		transition: opacity 300ms ease, visibility 300ms;
		z-index: 150;
	}

	.ongon-nav-backdrop.is-open {
		opacity: 1;
		visibility: visible;
	}

	/* The nav becomes an off-canvas drawer that slides in from the left,
	   listing every section — opened by the hamburger icon. */
	.main-navigation {
		display: block;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: min(320px, 85vw);
		max-width: none;
		background: var(--ongon-bg);
		box-shadow: 0 0 40px rgba(16, 28, 53, 0.25);
		transform: translateX(-100%);
		transition: transform 320ms ease;
		z-index: 200;
		overflow-y: auto;
		padding-top: 20px;
	}

	.main-navigation.is-open {
		transform: translateX(0);
	}

	.main-navigation__close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		margin: 0 0 8px 16px;
		background: transparent;
		border: none;
		font-size: 1.8rem;
		line-height: 1;
		color: var(--ongon-text);
		cursor: pointer;
	}

	.main-navigation ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px 0 16px;
		width: 100%;
	}

	.main-navigation ul li {
		width: 100%;
	}

	.main-navigation ul a {
		display: block;
		padding: 14px 24px;
	}

	.main-navigation ul a::after {
		display: none;
	}

	/* Log In / Create Account (one row) + Track Your Project (its own
	   row below), listed at the top of the drawer, above the main
	   sections. */
	.main-navigation__utility {
		display: flex;
		flex-direction: column;
		gap: 4px;
		border-bottom: 1px solid var(--ongon-border);
		padding: 4px 24px 16px;
	}

	.main-navigation__utility-row {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.main-navigation__utility a {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 10px 0;
		font-size: 0.9rem;
		font-weight: 600;
		color: var(--ongon-text);
	}

	.main-navigation__utility a:hover {
		color: var(--ongon-accent);
	}

	.main-navigation__utility-divider {
		color: var(--ongon-border);
		font-size: 0.9rem;
	}

	.main-navigation__utility-icon {
		display: inline-flex;
		color: var(--ongon-steel);
	}

	/* Mobile drawer: "Investment & Services" becomes a tappable
	   accordion instead of a hover dropdown — hover doesn't exist on
	   touch, so tapping it expands "General Pricing" / "Real Estate
	   Packages" inline rather than navigating away immediately. */
	.main-navigation .menu-item-has-children > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 44px;
	}

	.ongon-nav-caret {
		flex: none;
		width: 10px;
		height: 10px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		transition: transform 200ms ease;
		margin-right: 8px;
	}

	.menu-item-has-children.is-open > a .ongon-nav-caret {
		transform: rotate(-135deg);
	}

	/* A plain display:none/flex toggle rather than the usual animated
	   max-height trick — that approach turned out unreliable here (its
	   "closed" height depended on content that could still be
	   reflowing from late-loading webfonts), occasionally leaving an
	   item visible before any tap. display:none has no such ambiguity:
	   collapsed is always and only "not in the layout at all". */
	.main-navigation .sub-menu {
		display: none;
	}

	.menu-item-has-children.is-open > .sub-menu {
		display: flex;
	}

	.main-navigation .sub-menu a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 8px 20px 8px 36px;
		font-size: 0.82rem;
		font-weight: 600;
	}
}

/* Desktop hover dropdown — only on devices that actually support hover
   (a touchscreen in "desktop mode" still gets the tap/accordion CSS
   above, since .main-navigation only becomes the horizontal bar past
   860px regardless). */
@media (hover: hover) and (min-width: 861px) {
	.main-navigation .menu-item-has-children {
		position: relative;
	}

	.ongon-nav-caret {
		display: inline-block;
		width: 6px;
		height: 6px;
		margin-left: 7px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		transition: transform 180ms ease;
		vertical-align: middle;
	}

	.menu-item-has-children.is-open > a .ongon-nav-caret {
		transform: rotate(225deg);
	}

	.main-navigation .sub-menu {
		display: block;
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translate(-50%, -6px);
		margin-top: 14px;
		min-width: 230px;
		background: var(--ongon-white);
		border: 1px solid var(--ongon-border);
		box-shadow: 0 24px 48px -12px rgba(16, 28, 53, 0.25);
		padding: 8px 0;
		opacity: 0;
		visibility: hidden;
		transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
		z-index: 500;
	}

	.menu-item-has-children.is-open > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
	}

	.main-navigation .sub-menu li {
		width: 100%;
	}

	.main-navigation .sub-menu a {
		display: block;
		padding: 9px 20px;
		font-size: 0.95rem;
		font-weight: 500;
		color: var(--ongon-text);
		white-space: nowrap;
	}

	.main-navigation .sub-menu a::after {
		display: none;
	}

	.main-navigation .sub-menu a:hover {
		background: var(--ongon-bg-alt);
		color: var(--ongon-accent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.main-navigation .sub-menu,
	.ongon-nav-caret {
		transition: none;
	}
}

/* ==========================================================================
   Video hero (home page)
   ========================================================================== */
/* Navy surround with generous inset, so the video frame below reads as
   an object sitting inside the section rather than filling it edge to
   edge. */
.ongon-video-hero {
	background: var(--ongon-navy);
	padding: 14px clamp(8px, 1.5vw, 24px) 0;
}

/* The arch ("diaphragm") shape: the top corners curve all the way to
   the center (50% horizontal radius). The curve lives entirely in the
   padding-top space above the video itself (.media-wrap), so it can
   never clip into actual video pixels — the full frame, including
   anything near the top of the footage, always stays visible. */
.ongon-video-hero__frame {
	--ongon-arch-depth: clamp(24px, 4vw, 70px);
	position: relative;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding-top: var(--ongon-arch-depth);
	overflow: hidden;
	background: var(--ongon-navy);
	border-radius: 50% 50% 0 0 / var(--ongon-arch-depth) var(--ongon-arch-depth) 0 0;
}

.ongon-video-hero--no-video {
	background: radial-gradient(ellipse at 50% 0%, #1a2c52, var(--ongon-navy));
}

.ongon-video-hero--no-video .ongon-video-hero__media-wrap {
	aspect-ratio: auto;
	min-height: 60vh;
}

/* No max-height here on purpose — capping it would override the exact
   16:9 ratio on short browser windows and crop the video again. The
   frame's own max-width (1400px) already keeps it from getting too
   large; aspect-ratio keeps it always fully uncropped. */
.ongon-video-hero__media-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.ongon-video-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}

/* Two separate <video> elements (desktop showreel vs. the dedicated
   portrait mobile showreel) — only one is ever displayed, switched by
   viewport width. Only the visible one actually loads its source (see
   main.js), so having both in the DOM doesn't cost an extra download. */
.ongon-video-hero__media--mobile {
	display: none;
}

@media (max-width: 760px) {
	.ongon-video-hero__media--desktop {
		display: none;
	}

	.ongon-video-hero__media--mobile {
		display: block;
	}
}

/* A soft vignette centered behind the text, which now sits in the
   middle of the frame — the edges of the footage stay clear. */
.ongon-video-hero__overlay {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 65% 60% at 50% 50%, rgba(10, 16, 30, 0.55) 0%, rgba(10, 16, 30, 0.25) 55%, rgba(10, 16, 30, 0.05) 100%);
	z-index: 1;
}

.ongon-video-hero__content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	max-width: 820px;
	margin: 0 auto;
	padding: 24px;
}

.ongon-video-hero__content .ongon-eyebrow {
	color: var(--ongon-white);
	opacity: 0.85;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.ongon-video-hero__content h1 {
	color: var(--ongon-white);
	font-family: var(--ongon-font-display);
	font-weight: 400;
	text-transform: none;
	font-size: clamp(2rem, 4.4vw, 3.4rem);
	line-height: 1.15;
	margin-bottom: 0.4em;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

.ongon-video-hero__content .ongon-hero__actions {
	justify-content: center;
}

@media (max-width: 760px) {
	.ongon-video-hero {
		padding: 6px 6px 0;
	}

	.ongon-video-hero__frame {
		--ongon-arch-depth: 16px;
	}

	/* Slightly shorter than the source video's native 9:16 — trims a
	   bit off the bottom (object-position: top keeps the top, where
	   brand/logo content usually sits, fully intact). */
	.ongon-video-hero__media-wrap {
		aspect-ratio: 9 / 14;
	}

	.ongon-video-hero__media--mobile {
		object-position: top;
	}

	.ongon-video-hero__content {
		padding: 20px;
	}

	/* The mobile showreel is a light, product-mockup-style video rather
	   than the dark desktop footage, and shows fully clear — no dark
	   vignette, no blur, no panel behind the text — so the dark vignette
	   is dropped here and the headline/buttons go straight to dark
	   navy, matching the light footage. */
	.ongon-video-hero__overlay {
		display: none;
	}

	/* Pinned to the very top of the frame, out of the centered flow —
	   the middle of the video is where its own on-screen footage text
	   tends to sit, so keeping "The Studio" up here avoids colliding
	   with it. */
	.ongon-video-hero__content .ongon-eyebrow {
		position: absolute;
		top: 28px;
		left: 20px;
		right: 20px;
		color: var(--ongon-navy);
		opacity: 0.85;
		text-shadow: 0 1px 10px rgba(255, 255, 255, 0.9);
		margin-bottom: 0;
	}

	/* Truly centered in the frame — independent of the eyebrow (pinned
	   top) and the buttons (pinned bottom), so repositioning either of
	   those never nudges the headline off-center. */
	.ongon-video-hero__content h1 {
		position: absolute;
		top: 50%;
		left: 20px;
		right: 20px;
		transform: translateY(-50%);
		color: var(--ongon-white);
		font-weight: 400;
		font-size: clamp(2.2rem, 9vw, 2.8rem);
		text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.7);
		margin-bottom: 0;
	}

	.ongon-video-hero__content .ongon-btn--on-dark {
		color: var(--ongon-navy);
		border-color: rgba(10, 16, 30, 0.4);
		font-weight: 800;
	}

	.ongon-video-hero__content .ongon-btn--on-dark:hover {
		border-color: var(--ongon-navy);
		color: var(--ongon-navy);
	}

	.ongon-video-hero__content .ongon-hero__actions {
		position: absolute;
		left: 20px;
		right: 20px;
		bottom: 32px;
		flex-direction: column;
		align-items: stretch;
		width: auto;
	}

	.ongon-video-hero__content .ongon-hero__actions .ongon-btn {
		width: 100%;
	}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.ongon-hero {
	padding: 96px 0;
	text-align: left;
	border-bottom: 1px solid var(--ongon-border);
	background: var(--ongon-bg);
}

/* A shorter intro (eyebrow + heading + one line of copy, no visual on
   the other side) doesn't need the full hero's breathing room — used
   on the Investment & Services page so the heading sits closer to
   the header instead of floating in a tall empty band. */
.ongon-hero--small {
	padding: 56px 0 72px;
}

.ongon-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 64px;
	align-items: center;
}

.ongon-hero__content {
	max-width: 560px;
}

.ongon-hero h1 {
	text-transform: uppercase;
	font-size: clamp(2.1rem, 3.6vw, 3.1rem);
	line-height: 1.15;
}

.ongon-hero p.lede {
	font-size: 1.1rem;
	color: var(--ongon-text-muted);
	max-width: 480px;
}

.ongon-hero__actions {
	display: flex;
	gap: 18px;
	margin-top: 36px;
	flex-wrap: wrap;
}

@media (max-width: 960px) {
	.ongon-hero__grid {
		grid-template-columns: 1fr;
	}

	.ongon-hero__content {
		max-width: none;
	}
}

/* Hero visual showcase (placeholder device mockup) */
.ongon-mockup {
	position: relative;
}

.ongon-mockup__laptop {
	background: #0c1424;
	border-radius: 10px;
	padding: 10px 10px 28px;
	box-shadow: 0 30px 60px -20px rgba(16, 28, 53, 0.35);
}

.ongon-mockup__bar {
	display: flex;
	gap: 6px;
	padding: 0 4px 8px;
}

.ongon-mockup__bar span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
}

.ongon-mockup__screen {
	background: var(--ongon-ice);
	border-radius: 4px;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.ongon-mockup__screen-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 20px;
	border-bottom: 1px solid var(--ongon-border);
	font-size: 0.65rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ongon-steel);
}

.ongon-mockup__screen-body {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	padding: 20px;
}

.ongon-mockup__screen-body div {
	background: linear-gradient(160deg, #e7ebf2, #d8dee8);
	border-radius: 3px;
}

.ongon-mockup__screen-body div:first-child {
	grid-column: 1 / -1;
	aspect-ratio: 16 / 7;
	background: linear-gradient(160deg, var(--ongon-navy), #24335c);
}

.ongon-mockup__phone {
	position: absolute;
	right: -18px;
	bottom: -32px;
	width: 92px;
	background: #0c1424;
	border-radius: 16px;
	padding: 8px;
	box-shadow: 0 20px 40px -15px rgba(16, 28, 53, 0.4);
}

.ongon-mockup__phone-screen {
	background: var(--ongon-white);
	border-radius: 9px;
	aspect-ratio: 9 / 18;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 8px;
}

.ongon-mockup__phone-screen div {
	background: var(--ongon-ice);
	border-radius: 2px;
	height: 14px;
}

.ongon-mockup__caption {
	margin-top: 44px;
	font-size: 0.78rem;
	color: var(--ongon-steel);
	letter-spacing: 0.3px;
}

/* ==========================================================================
   Cards (services, portfolio, generic)
   ========================================================================== */
.ongon-card {
	background: var(--ongon-bg-card);
	border: 1px solid var(--ongon-border);
	border-radius: var(--ongon-radius);
	padding: 40px 32px;
	transition: border-color var(--ongon-transition), transform var(--ongon-transition);
}

.ongon-card:hover {
	border-color: var(--ongon-accent);
	transform: translateY(-4px);
}

.ongon-contact-social {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ongon-contact-social__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ongon-text);
}

.ongon-contact-social:hover .ongon-contact-social__icon {
	color: var(--ongon-accent);
}

/* ==========================================================================
   Packages & Plans — five package cards: three fixed-price (Essential,
   Signature, E-commerce) in a 3-up row, then two wider, centered
   custom-quote cards (Premium Commerce, Bespoke Digital) below.
   ========================================================================== */
.ongon-packages-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.ongon-packages-grid + .ongon-packages-grid {
	margin-top: 32px;
}

/* The second row reads as two deliberately wider, higher-tier cards —
   not two leftover columns from a three-up grid. */
.ongon-packages-grid--secondary {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 900px) {
	.ongon-packages-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.ongon-packages-grid,
	.ongon-packages-grid--secondary {
		grid-template-columns: 1fr;
	}
}

.ongon-package-card {
	display: flex;
	flex-direction: column;
	background: var(--ongon-bg-card);
	border: 1px solid var(--ongon-border);
	border-radius: var(--ongon-radius);
	padding: 44px 36px;
	position: relative;
	transition: border-color 0.3s ease, background 0.3s ease;
}

/* Restrained hover: a border-colour shift only, desktop/mouse only so
   a tap on a touch device never leaves a card stuck mid-transition. */
@media (hover: hover) and (pointer: fine) {
	.ongon-package-card:hover {
		border-color: var(--ongon-navy);
	}
}

/* Signature is the highlighted package — a dark card with restrained
   contrast rather than scale or shadow, so it attracts attention
   through composition instead of effects. It stays dark in the
   stacked mobile layout too, since that's the whole point of the
   distinction (no hover to fall back on there). */
.ongon-package-card--featured {
	background: var(--ongon-navy);
	border-color: var(--ongon-navy);
	color: rgba(255, 255, 255, 0.78);
}

@media (hover: hover) and (pointer: fine) {
	.ongon-package-card--featured:hover {
		border-color: var(--ongon-white);
	}
}

.ongon-package-card--featured .ongon-package-card__number,
.ongon-package-card--featured .ongon-package-card__name,
.ongon-package-card--featured .ongon-package-card__price {
	color: var(--ongon-white);
}

.ongon-package-card--featured .ongon-package-card__tagline,
.ongon-package-card--featured .ongon-package-card__price-label,
.ongon-package-card--featured .ongon-package-card__meta,
.ongon-package-card--featured .ongon-package-card__features-note,
.ongon-package-card--featured .ongon-package-card__features li {
	color: rgba(255, 255, 255, 0.68);
}

.ongon-package-card--featured .ongon-package-card__divider,
.ongon-package-card--featured .ongon-package-card__features li {
	border-color: rgba(255, 255, 255, 0.18);
}

.ongon-package-card--featured .ongon-package-card__features li::before {
	color: var(--ongon-white);
}

.ongon-package-card--featured .ongon-btn--primary {
	background: var(--ongon-white);
	color: var(--ongon-navy);
}

.ongon-package-card--featured .ongon-btn--primary:hover {
	background: var(--ongon-ice);
}

.ongon-package-card__badge {
	position: absolute;
	top: -14px;
	right: 36px;
	background: var(--ongon-navy);
	color: var(--ongon-white);
	font-size: 0.72rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 20px;
}

.ongon-package-card--featured .ongon-package-card__badge {
	background: var(--ongon-white);
	color: var(--ongon-navy);
}

.ongon-package-card__number {
	font-family: var(--ongon-font-heading);
	font-size: 0.85rem;
	letter-spacing: 1px;
	color: var(--ongon-steel);
	margin-bottom: 18px;
}

.ongon-package-card__name {
	font-family: var(--ongon-font-heading);
	font-size: 1.45rem;
	color: var(--ongon-text);
	margin-bottom: 10px;
}

.ongon-package-card__tagline {
	font-size: 0.95rem;
	color: var(--ongon-text-muted);
	margin-bottom: 24px;
}

.ongon-package-card__price-row {
	margin-bottom: 20px;
}

.ongon-package-card__price {
	font-family: var(--ongon-font-heading);
	font-size: 2.2rem;
	color: var(--ongon-text);
	line-height: 1.2;
}

.ongon-package-card__price-label {
	font-size: 0.72rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ongon-label);
	margin-top: 4px;
}

.ongon-package-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	font-size: 0.88rem;
	color: var(--ongon-text-muted);
	margin: 0 0 8px;
}

.ongon-package-card__meta span {
	flex-shrink: 0;
	font-size: 0.72rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ongon-label);
}

.ongon-package-card--featured .ongon-package-card__meta span {
	color: rgba(255, 255, 255, 0.45);
}

.ongon-package-card__divider {
	border: none;
	border-top: 1px solid var(--ongon-border);
	margin: 24px 0;
}

.ongon-package-card__features-note {
	font-size: 0.82rem;
	font-style: italic;
	color: var(--ongon-text-muted);
	margin: 0 0 14px;
}

.ongon-package-card__features {
	flex: 1;
	margin-bottom: 32px;
}

.ongon-package-card__features li {
	padding: 10px 0;
	border-bottom: 1px solid var(--ongon-border);
	color: var(--ongon-text-muted);
	font-size: 0.93rem;
}

.ongon-package-card__features li:before {
	content: "✓ ";
	color: var(--ongon-navy);
	font-weight: 700;
}

.ongon-package-card .ongon-btn {
	width: 100%;
	min-height: 48px;
	transition: background 0.3s ease, color 0.3s ease;
}

.ongon-package-card__cta-arrow {
	display: inline-block;
	transition: transform 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
	.ongon-package-card__cta:hover .ongon-package-card__cta-arrow {
		transform: translate(2px, -2px);
	}
}

/* Staggered fade-up as the section scrolls into view — each card a
   beat behind the last. Delay only, so the shared duration/easing
   from .ongon-reveal above is untouched. */
@media (prefers-reduced-motion: no-preference) {
	.ongon-package-card.ongon-reveal:nth-child(1) {
		transition-delay: 0ms;
	}

	.ongon-package-card.ongon-reveal:nth-child(2) {
		transition-delay: 140ms;
	}

	.ongon-package-card.ongon-reveal:nth-child(3) {
		transition-delay: 280ms;
	}
}

@media (max-width: 480px) {
	.ongon-package-card {
		padding: 32px 24px;
	}

	.ongon-package-card__price {
		font-size: 1.8rem;
	}
}

/* Add-ons — deliberately lighter than the package cards above: a
   plain fade-in only (no stagger, no featured/badge treatment), since
   these are equal-weight optional extras rather than primary offers. */
.ongon-addons-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.ongon-addon-card {
	background: var(--ongon-bg-card);
	border: 1px solid var(--ongon-border);
	border-radius: var(--ongon-radius);
	padding: 24px;
	transition: border-color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
	.ongon-addon-card:hover {
		border-color: var(--ongon-navy);
	}
}

.ongon-addon-card__name {
	font-family: var(--ongon-font-heading);
	font-size: 1.05rem;
	color: var(--ongon-text);
	margin-bottom: 6px;
}

.ongon-addon-card__price {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ongon-label);
	margin-bottom: 12px;
}

.ongon-addon-card__description {
	font-size: 0.88rem;
	color: var(--ongon-text-muted);
	margin: 0 0 14px;
}

.ongon-addon-card__note {
	font-size: 0.76rem;
	color: var(--ongon-steel);
	margin: -8px 0 14px;
}

.ongon-addon-card__cta {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ongon-navy);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.ongon-addon-card__cta:hover {
	border-color: var(--ongon-navy);
}

.ongon-addons-note {
	margin: 28px 0 0;
	font-size: 0.82rem;
	font-style: italic;
	color: var(--ongon-text-muted);
	text-align: center;
}

@media (max-width: 900px) {
	.ongon-addons-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.ongon-addons-grid {
		grid-template-columns: 1fr;
	}
}

/* Scope and pricing clarification — an editorial, dividers-only
   layout rather than another row of cards. */
.ongon-scope-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--ongon-border);
}

.ongon-scope-item {
	padding: 32px 32px 0 0;
	border-left: 1px solid var(--ongon-border);
	padding-left: 32px;
}

.ongon-scope-item:first-child {
	border-left: none;
	padding-left: 0;
}

.ongon-scope-item h3 {
	font-family: var(--ongon-font-heading);
	font-size: 1.05rem;
	margin-bottom: 12px;
}

.ongon-scope-item p {
	color: var(--ongon-text-muted);
	font-size: 0.92rem;
	margin: 0;
}

@media (max-width: 760px) {
	.ongon-scope-grid {
		grid-template-columns: 1fr;
	}

	.ongon-scope-item {
		border-left: none;
		border-top: 1px solid var(--ongon-border);
		padding: 28px 0 0;
	}

	.ongon-scope-item:first-child {
		border-top: none;
		padding-top: 0;
	}
}

/* Portfolio */
.ongon-portfolio-card figure {
	overflow: hidden;
	border-radius: var(--ongon-radius);
	margin-bottom: 20px;
	aspect-ratio: 4 / 3;
	background: var(--ongon-ice);
	border: 1px solid var(--ongon-border);
}

.ongon-portfolio-card img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	box-sizing: border-box;
	padding: 10px;
	transition: transform 420ms ease;
}

.ongon-portfolio-card:hover img {
	transform: scale(1.05);
}

.ongon-portfolio-card__tag {
	color: var(--ongon-steel);
	font-size: 0.75rem;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.ongon-portfolio-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--ongon-navy);
	border-bottom: 1px solid var(--ongon-navy);
	padding-bottom: 4px;
}

.ongon-portfolio-card__cta span {
	display: inline-block;
	transition: transform 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.ongon-portfolio-card:hover .ongon-portfolio-card__cta span {
		transform: translate(2px, -2px);
	}
}

.ongon-portfolio-card figure.v-ivory {
	background: linear-gradient(160deg, #f6f1e9, #ece3d4);
}

.ongon-portfolio-card figure.v-sage {
	background: linear-gradient(160deg, #ffffff, #e9efe9);
}

.ongon-portfolio-card figure.v-editorial {
	background: linear-gradient(160deg, #1a1a1a, #333333);
}

.ongon-portfolio-card figure.v-architectural {
	background: linear-gradient(160deg, #eef0f2, #dde1e6);
}

/* ==========================================================================
   Our Philosophy — comparison section (template-our-philosophy.php)
   A premium editorial redesign: scoped palette/tokens so it never
   touches the rest of the site, CSS-only website-preview mockups
   (no fabricated client screenshots), and a closing CTA into Contact.
   ========================================================================== */
.ongon-philosophy-compare {
	--pc-bg: #f7f6f2;
	--pc-ink: #171717;
	--pc-muted: #777777;
	--pc-navy: #14213d;
	--pc-them-bg: #efefef;
	--pc-us-bg: #ffffff;
	--pc-border: #e6e4df;

	background: var(--pc-bg);
}

.ongon-pc-intro {
	max-width: 640px;
	margin: 0 auto 64px;
	text-align: center;
}

.ongon-pc-intro h2 {
	font-family: var(--ongon-font-heading);
	font-weight: 500;
	font-size: clamp(1.9rem, 3.4vw, 2.75rem);
	line-height: 1.2;
	color: var(--pc-ink);
	margin: 16px 0;
}

.ongon-pc-intro p {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--pc-muted);
	margin: 0;
}

.ongon-pc-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	align-items: start;
}

.ongon-pc-card {
	border: 1px solid var(--pc-border);
	padding: 36px;
	transition: border-color 260ms ease, background 260ms ease;
}

.ongon-pc-card--them {
	background: var(--pc-them-bg);
}

.ongon-pc-card--us {
	background: var(--pc-us-bg);
	border-color: var(--pc-navy);
	box-shadow: 0 1px 0 var(--pc-navy);
}

.ongon-pc-label {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--pc-muted);
	margin-bottom: 10px;
}

.ongon-pc-card--us .ongon-pc-label {
	color: var(--pc-navy);
}

.ongon-pc-card h3 {
	font-family: var(--ongon-font-heading);
	font-weight: 500;
	font-size: 1.5rem;
	color: var(--pc-ink);
	margin: 0 0 24px;
}

/* CSS-only preview mockups — illustrative, not a real client's site. */
.ongon-pc-preview {
	border: 1px solid var(--pc-border);
	background: var(--ongon-white);
	overflow: hidden;
	margin-bottom: 14px;
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ongon-pc-card:hover .ongon-pc-preview {
	transform: translateY(-3px);
}

/* Generic template preview: boxy stock-blue nav, centered hero,
   three identical cards — the "reskin" look. */
.ongon-pc-preview__topbar {
	display: flex;
	gap: 5px;
	padding: 8px 10px;
	background: #e3e3e3;
}

.ongon-pc-preview__topbar span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #c3c3c3;
}

.ongon-pc-preview--them .ongon-pc-preview__navbar {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	background: #f4f6fa;
	border-bottom: 1px solid var(--pc-border);
}

.ongon-pc-preview--them .ongon-pc-preview__logo {
	width: 46px;
	height: 8px;
	border-radius: 2px;
	background: #3b5fd1;
	margin-right: auto;
}

.ongon-pc-preview--them .ongon-pc-preview__navlink {
	width: 24px;
	height: 6px;
	border-radius: 2px;
	background: #c6cedb;
}

.ongon-pc-preview--them .ongon-pc-preview__hero {
	padding: 22px 16px;
	text-align: center;
	background: #eef1f6;
}

.ongon-pc-preview--them .ongon-pc-preview__line {
	height: 10px;
	width: 80%;
	margin: 0 auto 8px;
	border-radius: 2px;
	background: #3b5fd1;
}

.ongon-pc-preview--them .ongon-pc-preview__line--short {
	width: 55%;
	margin-bottom: 14px;
}

.ongon-pc-preview--them .ongon-pc-preview__btn {
	width: 70px;
	height: 18px;
	margin: 0 auto;
	border-radius: 12px;
	background: #3b5fd1;
}

.ongon-pc-preview--them .ongon-pc-preview__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	padding: 14px 16px 18px;
	background: #eef1f6;
}

.ongon-pc-preview--them .ongon-pc-preview__row span {
	height: 34px;
	border-radius: 2px;
	background: #d9dfea;
}

/* Premium preview: refined navy wordmark nav, asymmetric split hero
   with serif type on one side, a soft tonal "photograph" on the other. */
.ongon-pc-preview--us .ongon-pc-preview__navbar {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 14px 18px;
	background: var(--ongon-white);
	border-bottom: 1px solid var(--pc-border);
}

.ongon-pc-preview__wordmark {
	width: 54px;
	height: 9px;
	border-radius: 1px;
	background: var(--pc-navy);
	margin-right: auto;
}

.ongon-pc-preview--us .ongon-pc-preview__navlink {
	width: 22px;
	height: 5px;
	border-radius: 1px;
	background: #c9ccd3;
}

.ongon-pc-preview__split {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	min-height: 150px;
}

.ongon-pc-preview__copy {
	padding: 22px 18px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ongon-pc-preview__eyebrow {
	display: block;
	width: 38px;
	height: 5px;
	border-radius: 1px;
	background: var(--pc-navy);
	opacity: 0.55;
	margin-bottom: 12px;
}

.ongon-pc-preview--us .ongon-pc-preview__line--serif {
	height: 11px;
	width: 92%;
	margin-bottom: 8px;
	border-radius: 1px;
	background: var(--pc-ink);
}

.ongon-pc-preview--us .ongon-pc-preview__line--short {
	width: 60%;
	margin-bottom: 18px;
}

.ongon-pc-preview--us .ongon-pc-preview__btn {
	width: 86px;
	height: 18px;
	border: 1px solid var(--pc-navy);
	background: transparent;
}

.ongon-pc-preview__image {
	background: linear-gradient(155deg, #e8e4da, #d7cfc0);
}

.ongon-pc-caption {
	font-size: 0.75rem;
	color: var(--pc-muted);
	margin: 0 0 22px;
}

.ongon-pc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ongon-pc-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 0;
	border-bottom: 1px solid var(--pc-border);
	font-size: 0.92rem;
	line-height: 1.5;
}

.ongon-pc-list li:last-child {
	border-bottom: none;
}

.ongon-pc-list--them li {
	color: var(--pc-muted);
}

.ongon-pc-list li::before {
	flex: none;
	font-size: 0.8rem;
	line-height: 1.5;
	font-weight: 600;
}

.ongon-pc-list--them li::before {
	content: "✕";
	color: #b0443c;
}

.ongon-pc-list--us li {
	color: var(--pc-ink);
}

.ongon-pc-list--us li::before {
	content: "✓";
	color: var(--pc-navy);
}

.ongon-pc-cta {
	max-width: 560px;
	margin: 72px auto 0;
	text-align: center;
}

.ongon-pc-cta h3 {
	font-family: var(--ongon-font-heading);
	font-weight: 500;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	color: var(--pc-ink);
	margin: 0 0 12px;
}

.ongon-pc-cta p {
	color: var(--pc-muted);
	font-size: 1rem;
	line-height: 1.7;
	margin: 0 0 28px;
}

.ongon-pc-cta .ongon-btn {
	background: var(--pc-navy);
	border-color: var(--pc-navy);
	transition: background 220ms ease, transform 220ms ease;
}

.ongon-pc-cta .ongon-btn:hover {
	background: var(--pc-ink);
	transform: translateY(-2px);
}

@media (max-width: 900px) {
	.ongon-pc-card {
		padding: 28px;
	}
}

@media (max-width: 760px) {
	.ongon-pc-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.ongon-pc-intro {
		margin-bottom: 44px;
	}

	.ongon-pc-cta {
		margin-top: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ongon-pc-preview,
	.ongon-pc-cta .ongon-btn {
		transition: none;
	}
}

/* ==========================================================================
   Numbered services ("What We Do")
   ========================================================================== */
.ongon-services-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid var(--ongon-border);
}

@media (max-width: 760px) {
	.ongon-services-list {
		grid-template-columns: 1fr;
	}
}

.ongon-service {
	padding: 40px 36px;
	border-bottom: 1px solid var(--ongon-border);
	border-right: 1px solid var(--ongon-border);
}

.ongon-services-list .ongon-service:nth-child(2n) {
	border-right: none;
}

@media (max-width: 760px) {
	.ongon-service {
		border-right: none;
	}
}

.ongon-service__number {
	font-family: var(--ongon-font-heading);
	font-size: 1rem;
	color: var(--ongon-steel);
	margin-bottom: 14px;
}

.ongon-service h3 {
	font-size: 1.25rem;
	margin-bottom: 10px;
}

.ongon-service p {
	color: var(--ongon-text-muted);
	margin: 0;
}

/* ==========================================================================
   Dark sections (Why Ongon Studio, Final CTA)
   ========================================================================== */
.ongon-section--dark {
	background: var(--ongon-dark-bg);
	color: rgba(255, 255, 255, 0.75);
}

.ongon-section--dark h1,
.ongon-section--dark h2,
.ongon-section--dark h3 {
	color: var(--ongon-dark-text);
}

.ongon-section--dark .ongon-section-head p {
	color: rgba(255, 255, 255, 0.7);
}

.ongon-principle {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: 24px;
}

.ongon-principle__number {
	font-family: var(--ongon-font-heading);
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 14px;
}

.ongon-principle h3 {
	font-size: 1.2rem;
	margin-bottom: 10px;
}

.ongon-principle p {
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
}

.ongon-cta--dark {
	text-align: center;
}

.ongon-cta--dark .ongon-hero__actions,
.ongon-cta--dark p.lede {
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
}

.ongon-next-step {
	text-align: center;
}

.ongon-next-step p.lede {
	margin-left: auto;
	margin-right: auto;
}

.ongon-cta--dark .ongon-btn--ghost {
	color: var(--ongon-dark-text);
	border-color: rgba(255, 255, 255, 0.3);
}

.ongon-cta--dark .ongon-btn--ghost:hover {
	border-color: var(--ongon-dark-text);
	color: var(--ongon-dark-text);
}

.ongon-cta--dark .ongon-btn--primary {
	background: var(--ongon-white);
	color: var(--ongon-navy);
}

.ongon-cta--dark .ongon-btn--primary:hover {
	background: var(--ongon-ice);
	color: var(--ongon-navy);
}

/* ==========================================================================
   Process
   ========================================================================== */
.ongon-process {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
}

@media (max-width: 900px) {
	.ongon-process {
		grid-template-columns: 1fr;
	}
}

.ongon-process__step {
	padding: 0 28px 0 0;
	border-left: 1px solid var(--ongon-border);
	padding-left: 28px;
}

.ongon-process__step:first-child {
	border-left: none;
	padding-left: 0;
}

@media (max-width: 900px) {
	.ongon-process__step {
		border-left: none;
		padding-left: 0;
		border-top: 1px solid var(--ongon-border);
		padding-top: 24px;
		margin-top: 24px;
	}

	.ongon-process__step:first-child {
		border-top: none;
		padding-top: 0;
		margin-top: 0;
	}
}

.ongon-process__number {
	font-family: var(--ongon-font-heading);
	color: var(--ongon-steel);
	margin-bottom: 14px;
}

.ongon-process__step h3 {
	font-size: 1.15rem;
	margin-bottom: 8px;
}

.ongon-process__step p {
	color: var(--ongon-text-muted);
	margin: 0;
	font-size: 0.95rem;
}

/* ==========================================================================
   Industries
   ========================================================================== */
.ongon-industries {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	background: var(--ongon-border);
}

@media (max-width: 760px) {
	.ongon-industries {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ongon-industry {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	background: var(--ongon-bg);
	padding: 48px 20px;
	text-align: center;
	transition: background 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
	.ongon-industry:hover {
		background: var(--ongon-bg-alt);
	}

	.ongon-industry:hover .ongon-industry__icon {
		color: var(--ongon-navy);
		transform: translateY(-2px);
	}

	.ongon-industry:hover .ongon-industry__label {
		color: var(--ongon-navy);
	}
}

.ongon-industry__icon {
	display: inline-flex;
	color: var(--ongon-steel);
	transition: color 0.3s ease, transform 0.3s ease;
}

.ongon-industry__label {
	font-family: var(--ongon-font-heading);
	font-size: 1.02rem;
	color: var(--ongon-text);
	transition: color 0.3s ease;
}

/* ==========================================================================
   Forms
   ========================================================================== */
.ongon-form label {
	display: block;
	font-size: 0.85rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--ongon-text-muted);
	margin-bottom: 8px;
}

.ongon-form input[type="text"],
.ongon-form input[type="email"],
.ongon-form input[type="tel"],
.ongon-form input[type="file"],
.ongon-form textarea,
.ongon-form select {
	width: 100%;
	background: var(--ongon-bg-alt);
	border: 1px solid var(--ongon-border);
	border-radius: var(--ongon-radius);
	padding: 14px 16px;
	color: var(--ongon-text);
	margin-bottom: 22px;
}

.ongon-form input:focus,
.ongon-form textarea:focus,
.ongon-form select:focus {
	outline: none;
	border-color: var(--ongon-accent);
}

.ongon-form .ongon-field {
	margin-bottom: 4px;
}

.ongon-form-notice {
	padding: 16px 20px;
	border-radius: var(--ongon-radius);
	margin-bottom: 28px;
	font-size: 0.95rem;
}

.ongon-form-notice--success {
	background: var(--ongon-bg-alt);
	border: 1px solid var(--ongon-accent);
	color: var(--ongon-text);
}

.ongon-form-notice--error {
	background: rgba(200, 70, 70, 0.08);
	border: 1px solid #c84646;
	color: var(--ongon-text);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	padding: 64px 0 36px;
	background: var(--ongon-footer-bg);
	color: var(--ongon-footer-text);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
	gap: 40px;
	margin-bottom: 48px;
}

@media (max-width: 900px) {
	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
	}
}

.site-footer p {
	color: var(--ongon-footer-text);
	opacity: 0.75;
}

.site-footer h4 {
	font-size: 0.85rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ongon-footer-text);
	margin-bottom: 20px;
}

.site-footer ul li {
	margin-bottom: 10px;
}

/* The support email is long and has no spaces to wrap on naturally —
   without this it overflows the narrow Connect column and bleeds
   into Legal next to it, at both mobile and desktop widths. */
.site-footer a {
	color: var(--ongon-footer-text);
	overflow-wrap: anywhere;
}

.site-footer a:hover {
	color: var(--ongon-footer-text);
	opacity: 0.7;
}

.ongon-footer-social {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ongon-footer-social__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Full container width rather than squeezed into the narrow Connect
   column, so "Mail us : support@ongonstudio.com" always fits on one
   line instead of wrapping or bleeding into the Legal column next to
   it — at both desktop and mobile widths. */
.ongon-footer-mail {
	margin: 0 0 32px;
	opacity: 1;
}

.ongon-footer-mail .ongon-footer-social {
	white-space: nowrap;
}

.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	color: var(--ongon-footer-text);
	opacity: 0.75;
	font-size: 0.85rem;
}

/* ==========================================================================
   Floating "My Cart" button — fixed bottom-right, every page.
   ========================================================================== */
.ongon-cart-fab {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	background: var(--ongon-navy);
	color: var(--ongon-white);
	border-radius: 999px;
	box-shadow: 0 10px 30px rgba(16, 28, 53, 0.3);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	transition: background 0.25s ease, transform 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
	.ongon-cart-fab:hover {
		background: var(--ongon-accent-hover);
		transform: translateY(-2px);
	}
}

.ongon-cart-fab__icon {
	position: relative;
	display: inline-flex;
}

.ongon-cart-fab__count {
	position: absolute;
	top: -9px;
	right: -10px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ongon-white);
	color: var(--ongon-navy);
	border-radius: 999px;
	font-size: 0.65rem;
	font-weight: 700;
}

@media (max-width: 480px) {
	.ongon-cart-fab {
		right: 16px;
		bottom: 16px;
		padding: 12px 16px;
	}

	.ongon-cart-fab__label {
		display: none;
	}
}

/* ==========================================================================
   WooCommerce overrides
   ========================================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--ongon-bg-card);
	border: 1px solid var(--ongon-border);
	border-radius: var(--ongon-radius);
	padding: 24px;
}

.woocommerce span.onsale {
	background: var(--ongon-accent);
	color: var(--ongon-accent-contrast);
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--ongon-accent);
	color: var(--ongon-accent-contrast);
	border-radius: var(--ongon-radius);
	border: none;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--ongon-accent-hover);
	color: var(--ongon-accent-contrast);
}

.woocommerce-checkout #payment ul.payment_methods,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	background: var(--ongon-bg-card);
	color: var(--ongon-text);
	border-color: var(--ongon-border);
}

.ongon-manual-payment-instructions {
	background: var(--ongon-bg-alt);
	border: 1px solid var(--ongon-border);
	border-radius: var(--ongon-radius);
	padding: 24px;
	margin-bottom: 20px;
}

.ongon-manual-payment-instructions h4 {
	color: var(--ongon-text);
	margin-bottom: 12px;
}

.ongon-manual-payment-instructions ul {
	margin: 12px 0;
}

.ongon-manual-payment-instructions li {
	padding: 4px 0;
	color: var(--ongon-text-muted);
}

/* The "payment under process" notice on the order-received page for
   manual bKash/Nagad/Upay orders still awaiting verification. */
.ongon-payment-pending {
	background: var(--ongon-bg-alt);
	border: 1px solid var(--ongon-border);
	border-left: 3px solid var(--ongon-navy);
	border-radius: var(--ongon-radius);
	padding: 32px;
	margin-bottom: 32px;
}

.ongon-payment-pending h2 {
	font-family: var(--ongon-font-heading);
	margin-bottom: 14px;
}

.ongon-payment-pending p {
	color: var(--ongon-text-muted);
	margin-bottom: 20px;
}

.ongon-payment-pending__summary {
	list-style: none;
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--ongon-border);
}

.ongon-payment-pending__summary li {
	padding: 6px 0;
	color: var(--ongon-text);
	font-size: 0.95rem;
}

/* ==========================================================================
   My Account — Log In / Create Account
   ========================================================================== */

/* Eyebrow/heading/lede above the My Account landing view only (see
   ongon_my_account_header() in inc/woocommerce.php) — a lighter
   version of .ongon-hero's intro treatment, since this sits inside
   the page's existing .ongon-section padding rather than its own
   full-bleed hero band. */
.ongon-account-header {
	text-align: center;
	max-width: 560px;
	margin: 0 auto 48px;
}

.ongon-account-header .ongon-eyebrow {
	display: block;
}

.ongon-account-header h1 {
	font-size: clamp(2rem, 3.6vw, 2.8rem);
	margin: 0 0 14px;
}

.ongon-account-header p.lede {
	font-size: 1.05rem;
	color: var(--ongon-text-muted);
	max-width: 480px;
	margin: 0 auto;
}

@keyframes ongon-account-fade-up {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* #customer_login only exists on the logged-out login/register view —
   scoping to it (rather than .woocommerce-account .woocommerce
   generally) keeps this from affecting the logged-in account
   dashboard, which reuses the same outer wrapper. Login and Register
   both show here, side by side, for returning and new customers
   alike — the standalone Create Account page still exists separately
   for the header nav link. */
#customer_login {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 32px;
}

#customer_login.u-columns {
	display: flex;
}

#customer_login .u-column1,
#customer_login .u-column2 {
	width: 100%;
	max-width: 420px;
}

/* The card wraps the whole column (heading + form together), not just
   the <form> — WooCommerce renders the h2 as a sibling before it. */
/* Visible by default — the animation below is purely an enhancement
   that hides and re-reveals these, so a browser that fails to match
   either prefers-reduced-motion value (seen in some automated/headless
   browsers) can never leave this stuck invisible. */
#customer_login .u-column1,
#customer_login .u-column2 {
	float: none;
	background: var(--ongon-bg-card);
	border: 1px solid var(--ongon-border);
	border-radius: var(--ongon-radius);
	padding: 40px 36px;
	opacity: 1;
}

/* WooCommerce's own stylesheet floats these columns in reverse
   (.col-1 right, .col-2 left) — force the visual order back to match
   the DOM: Login first (left), Register second (right). */
#customer_login .u-column1 {
	order: 1;
}

#customer_login .u-column2 {
	order: 2;
}

@media (max-width: 900px) {
	#customer_login {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	#customer_login .u-column1,
	#customer_login .u-column2 {
		max-width: 100%;
	}
}

/* Desktop only — on mobile, scrolling down quickly during the 0.6s
   fade can make the still-transparent card read as a blank gap below
   the title, so skip the animation there and show it immediately. */
@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
	#customer_login .u-column1 {
		opacity: 0;
		animation: ongon-account-fade-up 0.6s ease forwards;
	}
}

#customer_login h2 {
	font-family: var(--ongon-font-heading);
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--ongon-text);
	margin: 0 0 24px;
}

/* WooCommerce's own stylesheet also boxes the <form> itself (border +
   padding) — strip that so only the one outer card shows, not two
   nested boxes. */
#customer_login .woocommerce-form-login,
#customer_login .woocommerce-form-register {
	border: none;
	padding: 0;
}

.woocommerce-account .woocommerce-form-row label,
.ongon-create-account .woocommerce-form-row label {
	display: block;
	font-size: 0.8rem;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--ongon-text-muted);
	margin-bottom: 8px;
}

.woocommerce-account .woocommerce-form-login input.input-text,
.woocommerce-account .woocommerce-form-register input.input-text,
.ongon-create-account .woocommerce-form-register input.input-text {
	width: 100%;
	background: var(--ongon-bg-alt);
	border: 1px solid var(--ongon-border);
	border-radius: var(--ongon-radius);
	padding: 13px 16px;
	color: var(--ongon-text);
	margin-bottom: 18px;
}

.woocommerce-account .woocommerce-form-login input.input-text:focus,
.woocommerce-account .woocommerce-form-register input.input-text:focus,
.ongon-create-account .woocommerce-form-register input.input-text:focus {
	outline: none;
	border-color: var(--ongon-accent);
}

.woocommerce-account .woocommerce-form-login .button,
.woocommerce-account .woocommerce-form-register .button,
.ongon-create-account .woocommerce-form-register .button {
	width: 100%;
	min-height: 44px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 14px;
}

.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ongon-text-muted);
	font-size: 0.9rem;
	margin-bottom: 18px;
}

.woocommerce-account .woocommerce-LostPassword {
	margin-top: 16px;
	font-size: 0.9rem;
}

/* "Don't have an account? Create one" / "Already have an account? Log
   in" — used on both the Login page and the Create Account page. */
.ongon-create-account-link {
	margin-top: 16px;
	font-size: 0.9rem;
	color: var(--ongon-text-muted);
}

/* The standalone Create Account page: a single centered card, same
   visual language as the Login card. */
.ongon-create-account {
	max-width: 420px;
	margin: 0 auto;
}

.ongon-create-account .woocommerce-form-register {
	background: var(--ongon-bg-card);
	border: 1px solid var(--ongon-border);
	border-radius: var(--ongon-radius);
	padding: 40px 36px;
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
	.ongon-create-account .woocommerce-form-register {
		opacity: 0;
		animation: ongon-account-fade-up 0.6s ease forwards;
	}
}

@media (max-width: 760px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: 1fr;
	}
}

/* The Create Account page's hero is short (eyebrow + title + one
   line of copy), so the usual 96px hero padding plus 96px section
   padding stacked up into a large empty gap above the form. */
.page-template-template-create-account-php .ongon-hero {
	padding-bottom: 48px;
}

.page-template-template-create-account-php .ongon-section {
	padding-top: 48px;
	padding-bottom: 48px;
}

/* Cart page has no hero above it, so the full 96px section padding
   left an oversized gap under the header. */
.woocommerce-cart .ongon-section {
	padding-top: 40px;
}

/* ==========================================================================
   My Account dashboard (logged-in) — WooCommerce's default markup here
   (nav list, notices, the edit-account form) otherwise renders with
   none of the site's styling, since every rule above only targets the
   logged-out login/register screens.
   ========================================================================== */

/* WooCommerce floats the nav at 30% and the content at 68% of
   whatever width it's given — on a wide screen that stretches the
   content column (and anything full-width inside it, like a notice
   box) edge to edge, leaving a short line of text a long way from a
   right-aligned button like "Resend". Capping the whole nav+content
   block and centering it keeps the two columns close enough together
   to read as one unit, at any viewport width. */
.woocommerce-account .woocommerce {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 12px 4px;
	border-bottom: 1px solid var(--ongon-border);
	color: var(--ongon-text-muted);
	font-size: 0.95rem;
	font-weight: 600;
	transition: color var(--ongon-transition);
}

.woocommerce-MyAccount-navigation li a:hover {
	color: var(--ongon-text);
}

.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--ongon-navy);
	border-bottom-color: var(--ongon-navy);
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--ongon-steel);
}

/* The button and the message text are two flex items (WooCommerce's
   markup is "<a class=button>Resend</a> the message text…", and the
   bare text run becomes its own anonymous flex item). flex-wrap would
   drop them onto separate lines whenever the text is long enough to
   need two lines — at that point align-items can't center them
   against each other, since each is then alone on its own line. Left
   un-wrapped, the text instead wraps *within* its own flex item next
   to the button, so align-items: center correctly centers the button
   against the full (possibly multi-line) text height. */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--ongon-bg-alt);
	border: 1px solid var(--ongon-border);
	border-left: 3px solid var(--ongon-navy);
	border-radius: var(--ongon-radius);
	padding: 18px 22px;
	margin: 0 0 32px;
	color: var(--ongon-text);
	font-size: 0.95rem;
}

.woocommerce-account .woocommerce-error {
	border-left-color: #b3271e;
}

/* WooCommerce's own stylesheet absolutely-positions an icon glyph
   here (top: 1em; left: 1.5em), assuming the notice reserves left
   padding for it — our flex layout above doesn't, so the icon
   overlapped the text instead. The colored left border already
   signals the notice type, so just drop the icon rather than
   reshuffle padding to fit it. */
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-message::after,
.woocommerce-account .woocommerce-info::after,
.woocommerce-account .woocommerce-error::after {
	content: none;
	display: none;
}

.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-info .button,
.woocommerce-account .woocommerce-error .button {
	width: auto;
	min-height: 44px;
	flex-shrink: 0;
	order: 2;
	padding: 10px 20px;
	font-size: 0.78rem;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-family: var(--ongon-font-heading);
	margin-bottom: 20px;
}

.woocommerce-MyAccount-content fieldset {
	border: none;
	border-top: 1px solid var(--ongon-border);
	padding: 24px 0 0;
	margin: 24px 0 0;
}

.woocommerce-MyAccount-content fieldset legend {
	font-size: 0.8rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ongon-label);
	font-weight: 600;
	padding: 0;
	margin-bottom: 18px;
}

.woocommerce-MyAccount-content .woocommerce-form-row label,
.woocommerce-EditAccountForm label {
	display: block;
	font-size: 0.8rem;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--ongon-text-muted);
	margin-bottom: 8px;
}

.woocommerce-MyAccount-content input.input-text,
.woocommerce-EditAccountForm input.input-text {
	width: 100%;
	background: var(--ongon-bg-alt);
	border: 1px solid var(--ongon-border);
	border-radius: var(--ongon-radius);
	padding: 13px 16px;
	color: var(--ongon-text);
	margin-bottom: 18px;
}

.woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-EditAccountForm input.input-text:focus {
	outline: none;
	border-color: var(--ongon-accent);
}

form.woocommerce-EditAccountForm button.button {
	width: auto;
	min-height: 44px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 14px 32px;
}

/* Orders table — a bordered card rather than WooCommerce's bare
   table, with its own header row shaded to read as the card's top. */
.woocommerce-MyAccount-content table.woocommerce-orders-table,
.woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
	background: var(--ongon-bg-card);
	border: 1px solid var(--ongon-border);
	border-radius: var(--ongon-radius);
	overflow: hidden;
}

.woocommerce-MyAccount-content table.woocommerce-orders-table th,
.woocommerce-MyAccount-content table.shop_table th {
	text-align: left;
	font-size: 0.75rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ongon-label);
	padding: 14px 16px;
	background: var(--ongon-bg-alt);
	border-bottom: 1px solid var(--ongon-border);
}

.woocommerce-MyAccount-content table.woocommerce-orders-table td,
.woocommerce-MyAccount-content table.shop_table td {
	padding: 16px;
	border-bottom: 1px solid var(--ongon-border);
	color: var(--ongon-text-muted);
}

.woocommerce-MyAccount-content table.woocommerce-orders-table tr:last-child td,
.woocommerce-MyAccount-content table.shop_table tr:last-child td {
	border-bottom: none;
}

.woocommerce-MyAccount-content table.woocommerce-orders-table .button,
.woocommerce-MyAccount-content table.shop_table .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	white-space: nowrap;
}

/* Order status badge — a colored dot plus label, so status is
   readable at a glance rather than plain text. Covers the standard
   WooCommerce statuses; "on-hold" is what customers see as "Awaiting
   confirmation" (see ongon_customer_facing_order_status_labels()). */
mark.order-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--ongon-bg-alt);
	border-radius: 20px;
	padding: 6px 14px 6px 10px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--ongon-text);
	white-space: nowrap;
}

.ongon-order-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ongon-steel);
	flex-shrink: 0;
}

/* Awaiting confirmation — amber */
mark.order-status.status-on-hold,
mark.order-status.status-pending {
	background: #fdf1da;
	color: #8a5a14;
}

mark.order-status.status-on-hold .ongon-order-status-dot,
mark.order-status.status-pending .ongon-order-status-dot {
	background: #e0a338;
}

/* In progress — blue */
mark.order-status.status-processing {
	background: #e2ecfc;
	color: #1d4c8f;
}

mark.order-status.status-processing .ongon-order-status-dot {
	background: #3b74d6;
}

/* Completed — green */
mark.order-status.status-completed {
	background: #e3f3e7;
	color: #246b3b;
}

mark.order-status.status-completed .ongon-order-status-dot {
	background: #4caf6e;
}

/* Cancelled / failed — muted red */
mark.order-status.status-cancelled,
mark.order-status.status-failed {
	background: #fbe8e7;
	color: #a3362c;
}

mark.order-status.status-cancelled .ongon-order-status-dot,
mark.order-status.status-failed .ongon-order-status-dot {
	background: #c75c51;
}

/* Refunded — neutral */
mark.order-status.status-refunded {
	background: var(--ongon-bg-alt);
	color: var(--ongon-text-muted);
}

mark.order-status.status-refunded .ongon-order-status-dot {
	background: var(--ongon-steel);
}

/* Mobile — the orders table collapses into a stack of labeled rows
   rather than squeezing columns or scrolling horizontally. Each <td>
   already carries a data-title attribute from WooCommerce's own
   markup, used here as the row's label. */
@media (max-width: 640px) {
	.woocommerce-MyAccount-content table.woocommerce-orders-table,
	.woocommerce-MyAccount-content table.shop_table {
		border: none;
		background: transparent;
	}

	.woocommerce-MyAccount-content table.woocommerce-orders-table thead,
	.woocommerce-MyAccount-content table.shop_table thead {
		display: none;
	}

	.woocommerce-MyAccount-content table.woocommerce-orders-table,
	.woocommerce-MyAccount-content table.shop_table,
	.woocommerce-MyAccount-content table.woocommerce-orders-table tbody,
	.woocommerce-MyAccount-content table.shop_table tbody,
	.woocommerce-MyAccount-content table.woocommerce-orders-table tr,
	.woocommerce-MyAccount-content table.shop_table tr {
		display: block;
		width: 100%;
	}

	.woocommerce-MyAccount-content table.woocommerce-orders-table tr,
	.woocommerce-MyAccount-content table.shop_table tr {
		background: var(--ongon-bg-card);
		border: 1px solid var(--ongon-border);
		border-radius: var(--ongon-radius);
		padding: 4px 16px;
		margin-bottom: 14px;
	}

	.woocommerce-MyAccount-content table.woocommerce-orders-table td,
	.woocommerce-MyAccount-content table.shop_table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 12px 0;
		border-bottom: 1px solid var(--ongon-border);
		text-align: right;
	}

	.woocommerce-MyAccount-content table.woocommerce-orders-table tr:last-child td,
	.woocommerce-MyAccount-content table.shop_table tr:last-child td {
		border-bottom: 1px solid var(--ongon-border);
	}

	.woocommerce-MyAccount-content table.woocommerce-orders-table td:last-child,
	.woocommerce-MyAccount-content table.shop_table td:last-child {
		border-bottom: none;
	}

	.woocommerce-MyAccount-content table.woocommerce-orders-table td::before,
	.woocommerce-MyAccount-content table.shop_table td::before {
		content: attr(data-title);
		font-size: 0.72rem;
		letter-spacing: 1px;
		text-transform: uppercase;
		color: var(--ongon-label);
		font-weight: 600;
		flex-shrink: 0;
		text-align: left;
	}

	.woocommerce-MyAccount-content table.woocommerce-orders-table .button,
	.woocommerce-MyAccount-content table.shop_table .button {
		width: auto;
	}
}

/* ==========================================================================
   Cart & Checkout — classic (shortcode) templates, since the custom
   bKash/Nagad/Upay gateway's fields (Transaction ID, screenshot
   upload) need the classic checkout; the block checkout has no
   extension point for a legacy gateway's payment_fields() markup.
   ========================================================================== */
.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 32px;
}

.woocommerce-cart table.shop_table th,
.woocommerce-checkout table.shop_table th {
	text-align: left;
	font-size: 0.75rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ongon-label);
	padding: 12px 8px;
	border-bottom: 1px solid var(--ongon-border);
}

.woocommerce-cart table.shop_table td,
.woocommerce-checkout table.shop_table td {
	padding: 16px 8px;
	border-bottom: 1px solid var(--ongon-border);
	color: var(--ongon-text-muted);
	vertical-align: middle;
}

.woocommerce-cart table.shop_table td.product-name,
.woocommerce-checkout table.shop_table td.product-name {
	color: var(--ongon-text);
	font-weight: 600;
}

.woocommerce-cart table.shop_table tr.cart-subtotal th,
.woocommerce-cart table.shop_table tr.order-total th,
.woocommerce-checkout table.shop_table tr.cart-subtotal th,
.woocommerce-checkout table.shop_table tr.order-total th {
	text-transform: none;
	letter-spacing: normal;
	font-size: 0.92rem;
	color: var(--ongon-text-muted);
}

.woocommerce-cart table.shop_table tr.order-total td,
.woocommerce-checkout table.shop_table tr.order-total th {
	font-family: var(--ongon-font-heading);
	font-size: 1.15rem;
	color: var(--ongon-text);
	border-bottom: none;
}

.woocommerce-cart .quantity .qty {
	width: 64px;
	padding: 10px;
	background: var(--ongon-bg-alt);
	border: 1px solid var(--ongon-border);
	border-radius: var(--ongon-radius);
	color: var(--ongon-text);
}

.woocommerce-cart .product-remove a.remove {
	color: var(--ongon-steel) !important;
	background: none !important;
	font-size: 1.3rem;
}

.woocommerce-cart .coupon {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 32px;
}

.woocommerce-cart .coupon .input-text {
	width: 300px !important;
	max-width: 100%;
	padding: 18px 20px;
	font-size: 1.05rem;
	background: var(--ongon-bg-card);
	border: 1px solid var(--ongon-border);
	border-radius: var(--ongon-radius);
	color: var(--ongon-text);
}

.woocommerce-cart .coupon .button {
	padding: 18px 28px;
	font-size: 1.05rem;
}

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
	background: var(--ongon-bg-alt);
	border: 1px solid var(--ongon-border);
	border-radius: var(--ongon-radius);
	padding: 32px;
}

.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-checkout #order_review_heading {
	font-family: var(--ongon-font-heading);
	font-size: 1.3rem;
	margin-bottom: 20px;
}

/* Form rows — name/email/address fields on checkout, same visual
   language as the login/account forms elsewhere on the site. */
.woocommerce-checkout .form-row label,
.woocommerce-checkout .form-row legend {
	display: block;
	font-size: 0.8rem;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--ongon-text-muted);
	margin-bottom: 8px;
}

.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout input[type="file"] {
	width: 100%;
	background: var(--ongon-bg-card);
	border: 1px solid var(--ongon-border);
	border-radius: var(--ongon-radius);
	padding: 13px 16px;
	color: var(--ongon-text);
}

.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
	outline: none;
	border-color: var(--ongon-accent);
}

.woocommerce-checkout h3,
.woocommerce-cart h2,
.woocommerce-checkout #order_review_heading {
	font-family: var(--ongon-font-heading);
}

/* Payment methods — the radio list and each gateway's own fields box
   (our bKash/Nagad/Upay instructions, Transaction ID, screenshot). */
.woocommerce-checkout #payment {
	background: transparent;
}

.woocommerce-checkout ul.payment_methods {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	background: var(--ongon-bg-card);
	border: 1px solid var(--ongon-border);
	border-radius: var(--ongon-radius);
	overflow: hidden;
}

.woocommerce-checkout ul.payment_methods li.wc_payment_method {
	padding: 16px 20px;
	border-bottom: 1px solid var(--ongon-border);
}

.woocommerce-checkout ul.payment_methods li.wc_payment_method:last-child {
	border-bottom: none;
}

.woocommerce-checkout ul.payment_methods label {
	font-weight: 600;
	color: var(--ongon-text);
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--ongon-bg-alt) !important;
	border-radius: var(--ongon-radius);
	padding: 20px;
	margin-top: 14px;
	color: var(--ongon-text-muted);
	font-size: 0.92rem;
}

/* WooCommerce draws a small triangle pointer above the active
   payment method's box via ::before — its border-bottom-color has to
   match the box background above, or the two tones seam visibly. */
.woocommerce-checkout #payment .payment_box::before {
	border-bottom-color: var(--ongon-bg-alt) !important;
}

.woocommerce-checkout .payment_box .ongon-manual-payment-instructions {
	background: var(--ongon-bg-card);
	border: 1px solid var(--ongon-border);
	border-radius: var(--ongon-radius);
	padding: 18px 20px;
	margin: 14px 0;
}

.woocommerce-checkout .payment_box .ongon-manual-payment-instructions h4 {
	font-family: var(--ongon-font-heading);
	margin-bottom: 10px;
}

.woocommerce-checkout .payment_box .ongon-manual-payment-instructions ul {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.woocommerce-checkout .payment_box .ongon-manual-payment-instructions li {
	padding: 6px 0;
	color: var(--ongon-text);
}

.woocommerce-checkout .payment_box .ongon-manual-payment-instructions li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ongon-copy-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	background: none;
	border: none;
	color: #0a2472;
	cursor: pointer;
	border-radius: 4px;
	transition: background 150ms ease, color 150ms ease;
}

.ongon-copy-icon:hover {
	background: #0a247214;
}

.ongon-copy-icon.is-copied {
	color: #0f9d58;
}

/* The "Place order" / "Proceed to checkout" / "Update cart" buttons
   need higher specificity than the generic .woocommerce button rule
   above, since WooCommerce's own checkout.css targets #payment
   .place-order .button with an ID, which otherwise wins. */
.woocommerce-checkout #payment .place-order .button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart button[name="update_cart"] {
	width: 100%;
	min-height: 48px;
	background: var(--ongon-accent) !important;
	color: var(--ongon-accent-contrast);
	border-radius: var(--ongon-radius);
	text-transform: uppercase;
	letter-spacing: 0.4px;
	font-weight: 600;
	border: none;
}

.woocommerce-checkout #payment .place-order .button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart button[name="update_cart"]:hover {
	background: var(--ongon-accent-hover) !important;
	color: var(--ongon-accent-contrast);
}

@media (max-width: 760px) {
	.woocommerce-cart .cart-collaterals .cart_totals,
	.woocommerce-checkout #order_review {
		padding: 24px;
	}

	.woocommerce-cart table.shop_table thead {
		display: none;
	}

	.woocommerce-cart table.shop_table td {
		display: block;
		border-bottom: none;
		padding: 6px 0;
	}

	.woocommerce-cart table.shop_table tr {
		display: block;
		padding: 16px 0;
		border-bottom: 1px solid var(--ongon-border);
	}
}

/* ==========================================================================
   Project tracking — My Account → Track Your Project
   ========================================================================== */
.ongon-project-card {
	background: var(--ongon-bg-card);
	border: 1px solid var(--ongon-border);
	border-radius: var(--ongon-radius);
	padding: 40px;
	margin-bottom: 32px;
}

.ongon-project-card__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.ongon-project-card__eyebrow {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ongon-label);
	margin-bottom: 8px;
}

.ongon-project-card__status {
	font-family: var(--ongon-font-heading);
	font-size: 1.3rem;
	margin: 0;
}

.ongon-project-card__progress {
	font-family: var(--ongon-font-heading);
	font-size: 1.9rem;
	color: var(--ongon-navy);
	flex-shrink: 0;
}

.ongon-project-card__meta {
	background: var(--ongon-bg-alt);
	border-radius: var(--ongon-radius);
	padding: 16px 20px;
	margin-bottom: 32px;
}

.ongon-project-card__meta p {
	margin: 0 0 6px;
	font-size: 0.92rem;
	color: var(--ongon-text-muted);
}

.ongon-project-card__meta p:last-child {
	margin-bottom: 0;
}

.ongon-project-timeline {
	position: relative;
}

.ongon-project-timeline__line {
	position: absolute;
	left: 19px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var(--ongon-border);
}

.ongon-project-timeline__line-fill {
	width: 100%;
	height: 0;
	background: var(--ongon-navy);
	transition: height 1.4s ease;
}

.ongon-reveal.is-visible .ongon-project-timeline__line-fill {
	height: var(--ongon-progress);
}

@media (prefers-reduced-motion: reduce) {
	.ongon-project-timeline__line-fill {
		height: var(--ongon-progress);
	}
}

.ongon-project-timeline__steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ongon-project-timeline__step {
	position: relative;
	display: flex;
	gap: 20px;
	padding-bottom: 32px;
}

.ongon-project-timeline__step:last-child {
	padding-bottom: 0;
}

.ongon-project-timeline__dot {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ongon-bg-card);
	border: 2px solid var(--ongon-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ongon-white);
	transition: border-color 0.4s ease, background 0.4s ease, transform 0.3s ease;
}

.ongon-project-timeline__step.is-completed .ongon-project-timeline__dot {
	background: var(--ongon-navy);
	border-color: var(--ongon-navy);
}

.ongon-project-timeline__step.is-current .ongon-project-timeline__dot {
	border-color: var(--ongon-navy);
	animation: ongon-project-pulse 2s infinite;
}

.ongon-project-timeline__step.is-current .ongon-project-timeline__dot::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ongon-navy);
}

@keyframes ongon-project-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(16, 28, 53, 0.35);
	}
	70% {
		box-shadow: 0 0 0 12px rgba(16, 28, 53, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(16, 28, 53, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ongon-project-timeline__step.is-current .ongon-project-timeline__dot {
		animation: none;
	}
}

.ongon-project-timeline__check-path {
	stroke-dasharray: 24;
	stroke-dashoffset: 24;
	transition: stroke-dashoffset 0.5s ease 0.3s;
}

.ongon-reveal.is-visible .ongon-project-timeline__check-path {
	stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ongon-project-timeline__check-path {
		stroke-dashoffset: 0;
	}
}

.ongon-project-timeline__content {
	padding-top: 8px;
}

.ongon-project-timeline__label {
	display: block;
	font-weight: 600;
	color: var(--ongon-text-muted);
}

.ongon-project-timeline__step.is-completed .ongon-project-timeline__label,
.ongon-project-timeline__step.is-current .ongon-project-timeline__label {
	color: var(--ongon-text);
}

.ongon-project-timeline__date {
	display: block;
	font-size: 0.85rem;
	color: var(--ongon-steel);
	margin-top: 2px;
}

.ongon-project-timeline__date--current {
	color: var(--ongon-navy);
	font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
	.ongon-project-timeline__step:hover .ongon-project-timeline__dot {
		transform: scale(1.08);
	}
}

/* Staggered reveal, one step after another. */
@media (prefers-reduced-motion: no-preference) {
	.ongon-project-timeline__step.ongon-reveal:nth-child(1) { transition-delay: 0ms; }
	.ongon-project-timeline__step.ongon-reveal:nth-child(2) { transition-delay: 80ms; }
	.ongon-project-timeline__step.ongon-reveal:nth-child(3) { transition-delay: 160ms; }
	.ongon-project-timeline__step.ongon-reveal:nth-child(4) { transition-delay: 240ms; }
	.ongon-project-timeline__step.ongon-reveal:nth-child(5) { transition-delay: 320ms; }
	.ongon-project-timeline__step.ongon-reveal:nth-child(6) { transition-delay: 400ms; }
	.ongon-project-timeline__step.ongon-reveal:nth-child(7) { transition-delay: 480ms; }
	.ongon-project-timeline__step.ongon-reveal:nth-child(8) { transition-delay: 560ms; }
}

@media (max-width: 600px) {
	.ongon-project-card {
		padding: 28px 20px;
	}

	.ongon-project-card__header {
		flex-direction: column;
	}

	.ongon-project-timeline__line {
		left: 15px;
	}

	.ongon-project-timeline__dot {
		width: 32px;
		height: 32px;
	}
}

/* ==========================================================================
   Legal pages (Terms & Conditions) — a narrower reading column than
   the site's normal full-width sections, since this is dense body
   copy rather than editorial/marketing layout.
   ========================================================================== */
.ongon-legal {
	max-width: 760px;
}

.ongon-legal h2 {
	font-family: var(--ongon-font-heading);
	font-size: 1.4rem;
	margin: 48px 0 16px;
}

.ongon-legal h2:first-child {
	margin-top: 0;
}

.ongon-legal p {
	color: var(--ongon-text-muted);
	margin: 0 0 16px;
}

.ongon-legal ul {
	margin: 0 0 16px;
	padding-left: 20px;
	color: var(--ongon-text-muted);
}

.ongon-legal li {
	margin-bottom: 8px;
	padding-left: 4px;
}

@media (max-width: 600px) {
	.ongon-legal h2 {
		font-size: 1.2rem;
		margin: 36px 0 14px;
	}
}

/* Cart table: thumbnail markup is emptied via woocommerce_cart_item_thumbnail,
   so collapse the column rather than leave a blank gap. */
.woocommerce-cart table.cart th.product-thumbnail,
.woocommerce-cart table.cart td.product-thumbnail {
	display: none;
}

/* ==========================================================================
   Single portfolio project — live demo preview (desktop/mobile toggle)
   ========================================================================== */
.ongon-demo-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 24px;
}

.ongon-demo-toggle {
	display: inline-flex;
	border: 1px solid var(--ongon-border);
	border-radius: var(--ongon-radius);
	overflow: hidden;
}

.ongon-demo-toggle__btn {
	border: 0;
	background: var(--ongon-bg-card);
	color: var(--ongon-text);
	padding: 12px 20px;
	font-size: 0.78rem;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.ongon-demo-toggle__btn + .ongon-demo-toggle__btn {
	border-left: 1px solid var(--ongon-border);
}

.ongon-demo-toggle__btn.is-active {
	background: var(--ongon-text);
	color: var(--ongon-bg-card);
}

.ongon-demo-frame-wrap {
	background: var(--ongon-bg-alt);
	border: 1px solid var(--ongon-border);
	border-radius: var(--ongon-radius);
	padding: 24px;
	display: flex;
	justify-content: center;
	overflow-x: auto;
}

.ongon-demo-frame {
	width: 100%;
	max-width: 100%;
	height: 720px;
	border: 1px solid var(--ongon-border);
	background: #fff;
	transition: width 0.3s ease;
}

.ongon-demo-static img {
	border-radius: var(--ongon-radius);
}

@media (max-width: 782px) {
	.ongon-demo-frame {
		height: 560px;
	}
}

/* ==========================================================================
   Selected Work — editorial case-study list (template-portfolio.php)
   ========================================================================== */
.ongon-work {
	--sw-ivory: #f7f5f0;
	--sw-charcoal: #171717;
	--sw-muted: #77736d;
	--sw-stone: #e8e5df;
	--sw-accent: #526477;

	background: var(--sw-ivory);
	padding: 100px 0 120px;
}

.ongon-work-list {
	display: flex;
	flex-direction: column;
}

.ongon-work-item {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 64px;
	align-items: center;
	padding: 56px 0;
	border-top: 1px solid var(--sw-stone);
}

.ongon-work-item:first-child {
	border-top: none;
	padding-top: 0;
}

.ongon-work-item:nth-child(even) {
	grid-template-columns: 0.85fr 1.15fr;
}

.ongon-work-item:nth-child(even) .ongon-work-item__media {
	order: 2;
}

.ongon-work-item:nth-child(even) .ongon-work-item__content {
	order: 1;
}

.ongon-work-item__media {
	display: block;
	min-width: 0;
}

.ongon-work-item__frame,
.ongon-work-item__frame.ongon-work-item__frame--empty {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 2.85;
	object-fit: contain;
	object-position: center;
	box-sizing: border-box;
	padding: 14px;
	background: var(--sw-stone);
	border: 1px solid var(--sw-stone);
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ongon-work-item__media:hover .ongon-work-item__frame {
	transform: scale(1.015);
}

.ongon-work-item__frame--empty.v-ivory {
	background: linear-gradient(160deg, #f6f1e9, #ece3d4);
}

.ongon-work-item__frame--empty.v-sage {
	background: linear-gradient(160deg, #ffffff, #e9efe9);
}

.ongon-work-item__frame--empty.v-editorial {
	background: linear-gradient(160deg, #1a1a1a, #333333);
}

.ongon-work-item__frame--empty.v-architectural {
	background: linear-gradient(160deg, #eef0f2, #dde1e6);
}

.ongon-work-item__content {
	min-width: 0;
}

.ongon-work-item__meta {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 20px;
}

.ongon-work-item__number {
	font-family: var(--ongon-font-heading);
	font-style: italic;
	font-size: 1.1rem;
	color: var(--sw-accent);
}

.ongon-work-item__category {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--sw-accent);
}

.ongon-work-item__content h3 {
	font-family: var(--ongon-font-heading);
	font-size: clamp(1.6rem, 2.6vw, 2.3rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--sw-charcoal);
	margin: 0 0 16px;
}

.ongon-work-item__content p {
	font-size: 0.98rem;
	line-height: 1.75;
	color: var(--sw-muted);
	max-width: 440px;
	margin: 0 0 22px;
}

.ongon-work-item__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
	font-size: 0.72rem;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--sw-muted);
}

.ongon-work-item__tags li {
	position: relative;
	padding-right: 16px;
	margin-right: 14px;
}

.ongon-work-item__tags li:after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--sw-muted);
}

.ongon-work-item__tags li:last-child {
	margin-right: 0;
	padding-right: 0;
}

.ongon-work-item__tags li:last-child:after {
	display: none;
}

.ongon-work-item__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--sw-charcoal);
	border-bottom: 1px solid var(--sw-charcoal);
	padding-bottom: 6px;
	transition: color 220ms ease, border-color 220ms ease, gap 220ms ease;
}

.ongon-work-item__cta span {
	transition: transform 220ms ease;
}

.ongon-work-item__cta:hover {
	color: var(--sw-accent);
	border-color: var(--sw-accent);
	gap: 14px;
}

.ongon-work-item__cta:hover span {
	transform: translate(2px, -2px);
}

@media (max-width: 900px) {
	.ongon-work {
		padding: 72px 0 84px;
	}

	.ongon-work-item,
	.ongon-work-item:nth-child(even) {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 40px 0;
	}

	.ongon-work-item:nth-child(even) .ongon-work-item__media,
	.ongon-work-item:nth-child(even) .ongon-work-item__content {
		order: initial;
	}

	.ongon-work-item__content p {
		max-width: none;
	}
}

/* ==========================================================================
   Splash / loading overlay (header.php). Only displayed when the head
   script adds .ongon-splash-on; fades out via .is-hidden once loaded.
   Transform/opacity only, so it never triggers layout reflow.
   ========================================================================== */
.ongon-splash {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: #ffffff;
	opacity: 1;
	transition: opacity 450ms ease;
}

html.ongon-splash-on .ongon-splash {
	display: block;
}

.ongon-splash.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.ongon-splash__quote {
	position: absolute;
	top: 14vh;
	left: 0;
	right: 0;
	margin: 0;
	padding: 0 24px;
	text-align: center;
	font-family: var(--ongon-font-heading);
	font-size: clamp(1.05rem, 2.4vw, 1.5rem);
	color: #5b5b5b;
	opacity: 0;
	animation: ongon-splash-fade 900ms ease 150ms forwards;
}

.ongon-splash__center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
}

.ongon-splash__logo img {
	width: clamp(220px, 56vw, 400px);
	height: auto;
}

.ongon-splash__orbit {
	position: relative;
	width: 48px;
	height: 48px;
	animation: ongon-splash-spin 2.1s ease-in-out infinite;
}

.ongon-splash__orbit span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 3px;
	background: var(--ongon-black);
}

.ongon-splash__orbit span:nth-child(1) { animation: ongon-splash-s1 2.1s ease-in-out infinite; }
.ongon-splash__orbit span:nth-child(2) { animation: ongon-splash-s2 2.1s ease-in-out infinite; }
.ongon-splash__orbit span:nth-child(3) { animation: ongon-splash-s3 2.1s ease-in-out infinite; }
.ongon-splash__orbit span:nth-child(4) { animation: ongon-splash-s4 2.1s ease-in-out infinite; }

@keyframes ongon-splash-fade {
	to { opacity: 1; }
}

@keyframes ongon-splash-spin {
	to { transform: rotate(360deg); }
}

/* dot cluster -> diamond -> square -> cluster */
@keyframes ongon-splash-s1 {
	0%, 100% { transform: translate(-4px, -4px) scale(0.7); }
	33% { transform: translate(0, -16px) scale(1); }
	66% { transform: translate(-12px, -12px) scale(1); }
}
@keyframes ongon-splash-s2 {
	0%, 100% { transform: translate(4px, -4px) scale(0.7); }
	33% { transform: translate(16px, 0) scale(1); }
	66% { transform: translate(12px, -12px) scale(1); }
}
@keyframes ongon-splash-s3 {
	0%, 100% { transform: translate(4px, 4px) scale(0.7); }
	33% { transform: translate(0, 16px) scale(1); }
	66% { transform: translate(12px, 12px) scale(1); }
}
@keyframes ongon-splash-s4 {
	0%, 100% { transform: translate(-4px, 4px) scale(0.7); }
	33% { transform: translate(-16px, 0) scale(1); }
	66% { transform: translate(-12px, 12px) scale(1); }
}

@media (max-width: 760px) {
	.ongon-splash__quote { top: 12vh; }
	.ongon-splash__center { gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
	.ongon-splash__orbit,
	.ongon-splash__orbit span { animation: none; }
	.ongon-splash__quote { animation: none; opacity: 1; }
}

.ongon-closing-statement {
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
}

.ongon-closing-statement p {
	font-family: var(--ongon-font-heading);
	font-size: clamp(1.4rem, 2.4vw, 1.8rem);
	line-height: 1.5;
	color: var(--ongon-text);
	margin: 0 0 32px;
}

/* ==========================================================================
   FAQ accordion (native details/summary, no JS)
   ========================================================================== */
.ongon-faq__list {
	max-width: 760px;
	margin: 0 auto;
}

.ongon-faq__item {
	border-bottom: 1px solid var(--ongon-border);
	padding: 22px 0;
}

.ongon-faq__item:first-child {
	border-top: 1px solid var(--ongon-border);
}

.ongon-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-family: var(--ongon-font-heading);
	font-size: 1.1rem;
	color: var(--ongon-text);
	cursor: pointer;
	list-style: none;
}

.ongon-faq__question::-webkit-details-marker {
	display: none;
}

.ongon-faq__question::after {
	content: "+";
	flex-shrink: 0;
	font-family: var(--ongon-font-body);
	font-size: 1.3rem;
	color: var(--ongon-text-muted);
	transition: transform var(--ongon-transition);
}

.ongon-faq__item[open] .ongon-faq__question::after {
	content: "−";
}

.ongon-faq__answer {
	color: var(--ongon-text-muted);
	font-size: 0.98rem;
	line-height: 1.7;
	margin: 14px 0 0;
	max-width: 640px;
}