/* =====================================================================
   Noviron London — design system
   Charcoal + Safety Amber. Industrial, high-trust, modern London builder.
   Tokens are exposed as CSS custom properties so widgets can theme off them.
   ===================================================================== */

:root {
	/* Brand — dark */
	--nv-charcoal:      #14181B;   /* primary dark surface (header, footer, hero) */
	--nv-charcoal-2:    #1C2227;   /* elevated dark surface / hover */
	--nv-charcoal-3:    #262E34;   /* dark cards, borders on dark */
	--nv-steel:         #3A4550;   /* steel grey */

	/* Brand — accent (safety amber) */
	--nv-amber:         #F5A623;   /* primary CTA / accent */
	--nv-amber-deep:    #D98A00;   /* CTA hover */
	--nv-amber-soft:    #FFF3DE;   /* soft amber wash */
	--nv-amber-line:    #F0C878;

	/* Ink / text */
	--nv-ink:           #16191C;   /* headings / body on light */
	--nv-ink-2:         #333B42;   /* secondary text */
	--nv-muted:         #6B747E;   /* muted / meta */
	--nv-on-dark:       #EEF1F4;   /* body text on dark */
	--nv-on-dark-mut:   #9AA6B0;   /* muted text on dark */

	/* Surfaces — light */
	--nv-white:         #FFFFFF;
	--nv-surface:       #F5F7F8;   /* page background */
	--nv-surface-2:     #ECEFF2;   /* alt band */
	--nv-surface-3:     #E3E8EC;

	/* Lines */
	--nv-line:          #DEE3E8;
	--nv-line-soft:     #E9EDF0;
	--nv-line-dark:     rgba(255,255,255,.10);

	/* Status */
	--nv-success:       #2F855A;
	--nv-danger:        #C0392B;

	/* Type */
	--nv-font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
	--nv-font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

	/* Shape */
	--nv-radius:      16px;
	--nv-radius-sm:   10px;
	--nv-radius-lg:   26px;
	--nv-container:   1240px;
	--nv-gutter:      clamp(18px, 4vw, 40px);
	--nv-shadow-sm:   0 2px 10px rgba(20,24,27,.06);
	--nv-shadow:      0 18px 44px -18px rgba(20,24,27,.30);
	--nv-shadow-amber:0 14px 30px -12px rgba(217,138,0,.55);
	--nv-header-h:    76px;
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--nv-font-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--nv-ink-2);
	background: var(--nv-surface);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--nv-amber-deep); text-decoration: none; }
a:hover { color: var(--nv-ink); }
button { font-family: inherit; }
h1, h2, h3, h4, h5 {
	font-family: var(--nv-font-display);
	color: var(--nv-ink);
	line-height: 1.1;
	letter-spacing: -.02em;
	margin: 0 0 .5em;
	font-weight: 700;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.45rem, 2.4vw, 2.1rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
p  { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--nv-amber); outline-offset: 2px; }

/* --------------------------------------------------------------- layout */
.nv-container { width: 100%; max-width: var(--nv-container); margin-inline: auto; padding-inline: var(--nv-gutter); }
.nv-section { padding-block: clamp(56px, 8vw, 104px); }
.nv-section--tight { padding-block: clamp(40px, 5vw, 64px); }
.nv-band-dark { background: var(--nv-charcoal); color: var(--nv-on-dark); }
.nv-band-dark h1, .nv-band-dark h2, .nv-band-dark h3 { color: #fff; }
.nv-band-alt { background: var(--nv-surface-2); }

/* --------------------------------------------------------------- eyebrow */
.nv-eyebrow {
	display: inline-flex; align-items: center; gap: .55em;
	font-family: var(--nv-font-body);
	font-weight: 700; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
	color: var(--nv-amber-deep); margin: 0 0 .9rem;
}
.nv-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--nv-amber); display: inline-block; }
.nv-band-dark .nv-eyebrow { color: var(--nv-amber); }

/* --------------------------------------------------------------- buttons */
.nv-btn {
	--btn-bg: var(--nv-amber); --btn-fg: #1a1205; --btn-bd: var(--nv-amber);
	display: inline-flex; align-items: center; justify-content: center; gap: .55em;
	font-family: var(--nv-font-body); font-weight: 700; font-size: .98rem; line-height: 1;
	padding: 1em 1.55em; border-radius: 999px; cursor: pointer;
	background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-bd);
	transition: transform .16s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
	white-space: nowrap;
}
.nv-btn:hover { transform: translateY(-2px); color: var(--btn-fg); }
.nv-btn--primary { box-shadow: var(--nv-shadow-amber); }
.nv-btn--primary:hover { --btn-bg: var(--nv-amber-deep); --btn-bd: var(--nv-amber-deep); }
.nv-btn--dark  { --btn-bg: var(--nv-charcoal); --btn-fg: #fff; --btn-bd: var(--nv-charcoal); }
.nv-btn--dark:hover { --btn-bg: var(--nv-charcoal-2); --btn-bd: var(--nv-charcoal-2); }
.nv-btn--ghost { --btn-bg: transparent; --btn-fg: var(--nv-ink); --btn-bd: var(--nv-line); }
.nv-btn--ghost:hover { --btn-bd: var(--nv-ink); }
.nv-band-dark .nv-btn--ghost, .nv-btn--ghost-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.35); }
.nv-btn--ghost-light:hover { --btn-bd: #fff; background: rgba(255,255,255,.08); }
.nv-btn--lg { padding: 1.15em 1.9em; font-size: 1.05rem; }
.nv-btn--block { width: 100%; }

/* --------------------------------------------------------------- top bar */
.nv-topbar {
	background: var(--nv-charcoal-2); color: var(--nv-on-dark-mut);
	font-size: .85rem; border-bottom: 1px solid var(--nv-line-dark);
}
.nv-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 42px; }
.nv-topbar a { color: var(--nv-on-dark); }
.nv-topbar a:hover { color: var(--nv-amber); }
.nv-topbar__meta { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.nv-topbar__meta span, .nv-topbar__meta a { display: inline-flex; align-items: center; gap: .45em; }
.nv-topbar__social { display: flex; gap: .8rem; }
@media (max-width: 720px) { .nv-topbar { display: none; } }

/* --------------------------------------------------------------- header */
.nv-header { position: sticky; top: 0; z-index: 100; background: var(--nv-charcoal); color: #fff; transition: box-shadow .25s ease, background .25s ease; }
.nv-header--static { position: static; }
.nv-header.is-stuck { box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); }
.nv-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; min-height: var(--nv-header-h); }
.nv-logo { display: inline-flex; align-items: center; gap: .6rem; color: #fff; font-family: var(--nv-font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
.nv-logo:hover { color: #fff; }
.nv-logo img, .custom-logo { width: auto; }
.nv-header .custom-logo, .nv-header .nv-logo img { max-height: 36px; }
.nv-footer .custom-logo, .nv-footer .nv-logo img { max-height: 40px; }
.custom-logo-link { display: inline-flex; align-items: center; }
.nv-logo__mark {
	width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
	background: var(--nv-amber); color: #1a1205; font-weight: 800; font-size: 1.25rem;
	box-shadow: var(--nv-shadow-amber);
}
.nv-logo__word { line-height: 1; }
.custom-logo-link { display: inline-flex; }

.nv-nav { margin-left: auto; }
.nv-menu { list-style: none; margin: 0; padding: 0; }
.nv-nav .nv-menu { display: flex; align-items: center; gap: .35rem; }
.nv-nav .nv-menu > li > a {
	display: inline-block; padding: .6rem .85rem; color: var(--nv-on-dark); font-weight: 600; font-size: .97rem; border-radius: 8px;
}
.nv-nav .nv-menu > li > a:hover,
.nv-nav .nv-menu > .current-menu-item > a { color: #fff; background: rgba(255,255,255,.07); }
.nv-nav .nv-menu .sub-menu { display: none; }

.nv-header__actions { display: flex; align-items: center; gap: .8rem; }
.nv-header__phone { color: #fff; font-weight: 700; display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; }
.nv-header__phone:hover { color: var(--nv-amber); }
.nv-menu-toggle { display: none; }

@media (max-width: 1040px) {
	.nv-nav { position: fixed; inset: 0 0 0 auto; width: min(360px, 86vw); background: var(--nv-charcoal-2);
		transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.1,1); padding: calc(var(--nv-header-h) + 24px) 26px 26px; z-index: 120; box-shadow: -20px 0 50px rgba(0,0,0,.4); overflow-y: auto; }
	body.nv-nav-open .nv-nav { transform: translateX(0); }
	.nv-nav .nv-menu { flex-direction: column; align-items: stretch; gap: .1rem; }
	.nv-nav .nv-menu > li > a { display: block; padding: .95rem .6rem; font-size: 1.08rem; border-bottom: 1px solid var(--nv-line-dark); border-radius: 0; }
	.nv-menu-toggle { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; background: rgba(255,255,255,.08); border: 0; cursor: pointer; z-index: 130; }
	.nv-menu-toggle span, .nv-menu-toggle span::before, .nv-menu-toggle span::after { content: ""; display: block; width: 22px; height: 2px; background: #fff; position: relative; transition: transform .25s ease, opacity .2s ease; }
	.nv-menu-toggle span::before { position: absolute; top: -7px; }
	.nv-menu-toggle span::after { position: absolute; top: 7px; }
	body.nv-nav-open .nv-menu-toggle span { background: transparent; }
	body.nv-nav-open .nv-menu-toggle span::before { transform: translateY(7px) rotate(45deg); }
	body.nv-nav-open .nv-menu-toggle span::after { transform: translateY(-7px) rotate(-45deg); }
	.nv-header__phone span.lbl { display: none; }
	.nv-nav-backdrop { position: fixed; inset: 0; background: rgba(10,12,14,.5); opacity: 0; visibility: hidden; transition: opacity .3s ease; z-index: 110; }
	body.nv-nav-open .nv-nav-backdrop { opacity: 1; visibility: visible; }
}
@media (max-width: 640px) {
	.nv-header__phone { display: none; }
	.nv-header__actions .nv-btn { padding: .78rem 1rem; font-size: .88rem; }
	.nv-header__inner { gap: .6rem; }
}
@media (max-width: 360px) {
	.nv-header__actions .nv-btn--primary { display: none; }
}

/* Safety net: clip horizontal overflow at the viewport (html) only — NOT on
   body, because overflow on body makes it a scroll container and breaks the
   sticky header. Clipping on html still contains the off-canvas mobile nav. */
html { overflow-x: hidden; }
html, body { max-width: 100%; }

/* Our generated Elementor sections are full-bleed bands — the widget centres its
   own content via .nvw__inner (max 1240). Elementor's default boxed container
   (1140) would leave big side margins on wide screens, so run the container full
   width. !important beats Elementor's higher-specificity boxed rule. */
.elementor-section.elementor-section-boxed > .elementor-container,
.elementor-section > .elementor-container { max-width: 100% !important; width: 100%; }

/* --------------------------------------------------------------- main */
main { display: block; }
.nv-page { padding-block: clamp(40px, 6vw, 80px); }
.nv-page__head { max-width: 760px; margin-bottom: 2rem; }
.nv-prose { max-width: 760px; margin-inline: auto; }
.nv-prose h2 { margin-top: 1.6em; }
.nv-prose img { border-radius: var(--nv-radius); margin-block: 1.4em; }
.nv-prose ul, .nv-prose ol { padding-left: 1.2em; }
.nv-prose li { margin-bottom: .5em; }

/* elementor pages render full width (no theme container) */
.nv-elementor { }

/* --------------------------------------------------------------- cards */
.nv-card { background: var(--nv-white); border: 1px solid var(--nv-line); border-radius: var(--nv-radius); box-shadow: var(--nv-shadow-sm); overflow: hidden; }
.nv-grid { display: grid; gap: clamp(16px, 2.4vw, 26px); }
.nv-grid--3 { grid-template-columns: repeat(3, 1fr); }
.nv-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .nv-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .nv-grid--3, .nv-grid--2 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- footer */
.nv-footer { background: var(--nv-charcoal); color: var(--nv-on-dark-mut); }
.nv-footer a { color: var(--nv-on-dark); }
.nv-footer a:hover { color: var(--nv-amber); }
.nv-footer__cta { background: linear-gradient(120deg, var(--nv-charcoal-2), var(--nv-charcoal)); border-bottom: 1px solid var(--nv-line-dark); }
.nv-footer__cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; padding-block: clamp(36px, 5vw, 60px); }
.nv-footer__cta h2 { margin: 0; color: #fff; max-width: 22ch; }
.nv-footer__cta .nv-eyebrow { color: var(--nv-amber); }
.nv-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; padding-block: clamp(44px, 6vw, 72px); }
.nv-footer__brand .nv-logo { color: #fff; margin-bottom: 1rem; }
.nv-footer h4 { color: #fff; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1.1rem; }
.nv-footer ul { list-style: none; margin: 0; padding: 0; }
.nv-footer li { margin-bottom: .6rem; }
.nv-footer__nap li { display: flex; gap: .6em; align-items: flex-start; }
.nv-footer__social { display: flex; gap: .8rem; margin-top: 1.2rem; }
.nv-footer__social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--nv-line-dark); border-radius: 10px; }
.nv-footer__social a:hover { background: var(--nv-amber); color: #1a1205; border-color: var(--nv-amber); }
.nv-footer__legal { border-top: 1px solid var(--nv-line-dark); padding-block: 1.4rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; }
@media (max-width: 860px) { .nv-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .nv-footer__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- fab + mobile bar */
.nv-fab { position: fixed; right: 20px; bottom: 20px; z-index: 90; box-shadow: var(--nv-shadow-amber); }
.nv-mobilebar { display: none; }
@media (max-width: 720px) {
	.nv-fab { display: none; }
	.nv-mobilebar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: var(--nv-charcoal); border-top: 1px solid var(--nv-line-dark); }
	.nv-mobilebar a { display: flex; align-items: center; justify-content: center; gap: .5em; padding: .95rem .5rem; font-weight: 700; font-size: .95rem; color: #fff; }
	.nv-mobilebar a + a { border-left: 1px solid var(--nv-line-dark); }
	.nv-mobilebar a.is-wa svg { color: #25D366; }
	.nv-mobilebar a.is-quote { background: var(--nv-amber); color: #1a1205; }
	.nv-mobilebar a.is-quote svg { color: #1a1205; }
	body:has(.nv-mobilebar) { padding-bottom: 58px; }
}

/* --------------------------------------------------------------- forms (base, quote widget refines) */
.nv-field { margin-bottom: 1rem; }
.nv-field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; color: var(--nv-ink); }
.nv-input, .nv-textarea, .nv-select {
	width: 100%; padding: .85rem 1rem; font: inherit; color: var(--nv-ink);
	background: var(--nv-white); border: 1.5px solid var(--nv-line); border-radius: var(--nv-radius-sm);
	transition: border-color .18s ease, box-shadow .18s ease;
}
.nv-input:focus, .nv-textarea:focus, .nv-select:focus { border-color: var(--nv-amber); box-shadow: 0 0 0 4px var(--nv-amber-soft); outline: none; }
.nv-textarea { min-height: 130px; resize: vertical; }

/* --------------------------------------------------------------- utility */
.nv-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.nv-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .nv-reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }
.nv-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.nv-pill { display: inline-flex; align-items: center; gap: .4em; padding: .4em .8em; border-radius: 999px; background: var(--nv-amber-soft); color: var(--nv-amber-deep); font-weight: 700; font-size: .8rem; }
.nv-icon { display: inline-block; vertical-align: -.15em; flex: 0 0 auto; }
.nv-topbar__social a .nv-icon { vertical-align: middle; }

/* --------------------------------------------------------------- blog/archive/404 */
.nv-archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 900px) { .nv-archive-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .nv-archive-grid { grid-template-columns: 1fr; } }
.nv-post-card__body { padding: 1.2rem 1.3rem 1.5rem; }
.nv-post-card__body h3 { margin-bottom: .4rem; }
.nv-post-card__meta { color: var(--nv-muted); font-size: .85rem; margin-bottom: .5rem; }
.nv-404 { text-align: center; padding-block: clamp(60px, 12vw, 140px); }
.nv-404 .nv-code { font-family: var(--nv-font-display); font-weight: 800; font-size: clamp(5rem, 18vw, 11rem); color: var(--nv-amber); line-height: .9; }