/* ==========================================================================
   components.css
   Buttons, pills, fields, navigation, logo, footer chrome.
   Sourced verbatim from design-source/design-system.html and the per-page
   <style> blocks; merged here so every page inherits the same component layer.
   ========================================================================== */

/* ─── BUTTONS ───────────────────────────────────────────────────────────── */
.btn{
	--bg:var(--gold); --fg:var(--navy-deep); --br:transparent;
	position:relative;overflow:hidden;
	display:inline-flex;align-items:center;gap:10px;
	padding:14px 26px;border-radius:999px;
	font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:.01em;
	background:var(--bg);color:var(--fg);border:1px solid var(--br);
	transition:color .35s ease;
	isolation:isolate;
	cursor:pointer;
}
.btn::before{
	content:"";position:absolute;inset:0;background:var(--sweep,var(--navy-deep));
	transform:translateY(101%);transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:-1;
}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--sweep-fg,var(--ivory))}
.btn .arr{transition:transform .35s ease;display:inline-block}
.btn:hover .arr{transform:translateX(4px)}

/* primary on dark or light = gold pill, navy text → sweep navy-deep, ivory text */
.btn--primary{--bg:var(--gold);--fg:var(--navy-deep);--sweep:var(--navy-deep);--sweep-fg:var(--ivory)}

/* secondary on dark: ivory outline → fills ivory, navy text */
.btn--secondary-dark,
.btn--sec-dark{--bg:transparent;--fg:var(--ivory);--br:var(--ivory);--sweep:var(--ivory);--sweep-fg:var(--navy-deep)}

/* secondary on light: navy outline → fills navy, ivory text */
.btn--secondary-light,
.btn--sec-light{--bg:transparent;--fg:var(--navy-deep);--br:var(--navy-deep);--sweep:var(--navy-deep);--sweep-fg:var(--ivory)}

/* ghost: text + arrow, underline reveal */
.btn--ghost{padding:12px 0;background:transparent;border:0;border-radius:0;color:inherit;position:relative;overflow:visible}
.btn--ghost::before{display:none}
.btn--ghost::after{
	content:"";position:absolute;left:0;right:30px;bottom:6px;
	height:1px;background:currentColor;opacity:.4;
	transform-origin:left;transition:transform .4s ease,opacity .3s;
}
.btn--ghost:hover::after{transform:scaleX(1.06);opacity:1}
.btn--ghost.ghost-gold{color:var(--gold)}
.btn--ghost:hover{color:inherit}

/* pressed state (button --active in design system) */
.btn--active{transform:translateY(1px)}
.btn--active.btn--primary::before{transform:translateY(0)}
.btn--active.btn--primary{color:var(--ivory)}

/* ─── NAV (header + design-system nav demos) ─────────────────────────────── */
.nav{
	display:flex;align-items:center;justify-content:space-between;
	padding:18px 28px;width:100%;
}
.nav--dark{background:var(--navy-deep);color:var(--ivory)}
.nav--light{background:var(--ivory);color:var(--charcoal);border-bottom:1px solid var(--stone)}
.nav .links{display:flex;gap:36px;font-family:var(--f-display);font-weight:500;font-size:14px;letter-spacing:.02em}
.nav .links a{position:relative;padding:6px 0}
.nav .links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s}
.nav .links a:hover::after{transform:scaleX(1)}
.nav .links a.is-active,
.nav .links a[aria-current="page"]{color:var(--gold)}

/* ─── LIVE HEADER (fixed, used on home/about/contact/service pages) ──────── */
.header{
	position:fixed;top:0;left:0;right:0;z-index:60;
	display:flex;align-items:center;justify-content:space-between;
	padding:22px var(--pad);
	transition:background-color .4s ease, border-color .4s ease, color .4s ease;
	color:var(--ivory);
}
.header.is-scrolled{
	background:rgba(15,36,56,.88);
	backdrop-filter:saturate(140%) blur(12px);
	border-bottom:1px solid rgba(245,242,236,.12);
}
.header.is-light{color:var(--charcoal)}
.header.is-light.is-scrolled{background:rgba(245,242,236,.92);border-bottom-color:var(--stone)}

.header .logo{display:inline-flex;align-items:center;gap:14px}
.header .logo svg.mark{width:56px;height:auto;flex:none;color:currentColor}
.header .logo img.mark,
.header .logo img.mark--img{
	height:44px !important;
	width:auto !important;
	max-width:200px !important;
	max-height:44px !important;
	flex:none !important;
	display:block !important;
	object-fit:contain !important;
}
.header.is-light .logo img.mark,
.header.is-light .logo img.mark--img{filter:none !important}
.header:not(.is-light) .logo img.mark,
.header:not(.is-light) .logo img.mark--img{filter:brightness(0) invert(1) !important}
@media(max-width:900px){
	.header .logo img.mark,
	.header .logo img.mark--img{height:36px !important;max-height:36px !important;max-width:160px !important}
}
.header .logo .word{font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase}

.header nav.links{display:flex;gap:24px;font-family:var(--f-display);font-weight:500;font-size:13.5px;letter-spacing:.005em}
@media(max-width:1280px){.header nav.links{gap:18px;font-size:13px}}
@media(max-width:1100px){.header nav.links{gap:14px;font-size:12.5px}}
.header nav.links a{position:relative;padding:6px 0;opacity:.85}
.header nav.links a:hover{opacity:1}
.header nav.links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s}
.header nav.links a:hover::after,
.header nav.links a[aria-current="page"]::after,
.header nav.links a.current-menu-item::after{transform:scaleX(1)}
.header nav.links a[aria-current="page"],
.header nav.links a.current-menu-item{color:var(--gold);opacity:1}

@media(max-width:900px){.header nav.links{display:none}}

/* ─── HAMBURGER BUTTON ───────────────────────────────────────────────────── */
.header-burger{
	display:none;
	width:40px;height:40px;
	background:transparent;border:1px solid currentColor;border-radius:999px;
	color:inherit;cursor:pointer;
	align-items:center;justify-content:center;
	position:relative;flex:none;
	transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.header-burger__line{
	position:absolute;left:50%;top:50%;width:18px;height:1.5px;background:currentColor;
	transition:transform .35s cubic-bezier(.7,0,.2,1),opacity .25s ease;
	transform-origin:center;
}
.header-burger__line:nth-child(1){transform:translate(-50%,-6px)}
.header-burger__line:nth-child(2){transform:translate(-50%,0)}
.header-burger__line:nth-child(3){transform:translate(-50%,6px)}
.header-burger[aria-expanded="true"] .header-burger__line:nth-child(1){transform:translate(-50%,0) rotate(45deg)}
.header-burger[aria-expanded="true"] .header-burger__line:nth-child(2){opacity:0}
.header-burger[aria-expanded="true"] .header-burger__line:nth-child(3){transform:translate(-50%,0) rotate(-45deg)}
.header-burger:hover{background:rgba(245,242,236,.1)}
.header.is-light .header-burger:hover{background:rgba(15,36,56,.06)}
.header-burger:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:900px){
	.header-burger{display:inline-flex}
	.header .header-cta{display:none}
}

/* ─── MOBILE NAV OVERLAY ─────────────────────────────────────────────────── */
.mobile-nav{
	position:fixed;inset:0;z-index:55;
	background:var(--navy-deep);color:var(--ivory);
	display:flex;align-items:flex-start;justify-content:center;
	padding:96px var(--pad) 48px;
	overflow-y:auto;
	opacity:0;visibility:hidden;pointer-events:none;
	transform:translateY(-12px);
	transition:opacity .35s ease,transform .4s cubic-bezier(.2,.7,.2,1),visibility 0s linear .35s;
}
.mobile-nav.is-open{
	opacity:1;visibility:visible;pointer-events:auto;
	transform:translateY(0);
	transition:opacity .35s ease,transform .4s cubic-bezier(.2,.7,.2,1),visibility 0s linear 0s;
}
.mobile-nav::before{
	content:"";position:absolute;inset:0;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
	opacity:.06;mix-blend-mode:overlay;pointer-events:none;
}
.mobile-nav__inner{
	position:relative;z-index:1;
	width:100%;max-width:520px;
	display:flex;flex-direction:column;gap:32px;
}
.mobile-nav__links{display:flex;flex-direction:column;gap:0}
.mobile-nav__links a{
	display:block;padding:18px 0;
	font-family:var(--f-display);font-weight:600;font-size:24px;letter-spacing:-.015em;
	color:var(--ivory);text-decoration:none;
	border-bottom:1px solid rgba(245,242,236,.14);
	transition:color .25s ease,padding-left .3s ease;
}
.mobile-nav__links a:hover,
.mobile-nav__links a:focus-visible{color:var(--gold);padding-left:8px}
.mobile-nav__contact{
	display:flex;flex-direction:column;gap:8px;
	font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;
	border-top:1px solid rgba(245,242,236,.14);padding-top:24px;
	opacity:.85;
}
.mobile-nav__contact a{color:var(--ivory);text-decoration:none}
.mobile-nav__contact a:hover{color:var(--gold)}
.mobile-nav__cta{align-self:flex-start;margin-top:8px}

/* Body scroll-lock when the mobile menu is open */
body.has-mobile-nav-open{overflow:hidden;touch-action:none}

/* ─── LOGO LOCKUP (design-system inline) ─────────────────────────────────── */
.logo{display:inline-flex;align-items:center;gap:14px;font-family:var(--f-display);font-weight:700;letter-spacing:-.02em}
.logo svg{width:40px;height:40px;flex:none}
.logo .word{font-size:18px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}

/* ─── PILLS / TAGS ───────────────────────────────────────────────────────── */
.pill{
	display:inline-flex;align-items:center;gap:8px;
	padding:7px 14px;border-radius:999px;border:1px solid currentColor;
	font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;
	white-space:nowrap;background:transparent;
}
.pill--light{border-color:var(--charcoal);color:var(--charcoal);background:transparent}
.pill--dark {border-color:var(--ivory); color:var(--ivory); background:transparent}
.pill--filled-light{background:var(--charcoal);color:var(--ivory);border-color:var(--charcoal)}
.pill--filled-dark{background:var(--ivory);color:var(--navy-deep);border-color:var(--ivory)}
.pill--gold{border-color:var(--gold);color:var(--gold)}

/* ─── FORM INPUTS ────────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:8px;width:100%}
.field label{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;opacity:.65}
.field .ctl,
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="search"],
.field input[type="url"],
.field select,
.field textarea{
	border:0;border-bottom:1px solid var(--stone);
	background:transparent;padding:10px 0 12px;width:100%;
	font-family:var(--f-display);font-size:18px;color:inherit;
	outline:none;transition:border-color .3s;
}
.field textarea{min-height:120px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 8px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:28px}
.field .ctl::placeholder,
.field input::placeholder,
.field textarea::placeholder{color:currentColor;opacity:.35}
.field .ctl:focus,
.field input:focus,
.field select:focus,
.field textarea:focus{border-bottom-color:var(--gold)}
.field--filled .ctl{color:var(--charcoal)}
.field--focus .ctl{border-bottom-color:var(--gold)}
.field--error .ctl,
.field--error input,
.field--error textarea,
.field--error select{border-bottom-color:var(--error)}
.field--error .err,
.field .err{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--error)}
.sec--navy .field .ctl,.sec--navyd .field .ctl,.sec--char .field .ctl,
.dark .field .ctl,.dark .field input,.dark .field select,.dark .field textarea{
	border-bottom-color:rgba(245,242,236,.25);color:var(--ivory);
}
.sec--navy .field--focus .ctl,
.dark .field input:focus,.dark .field select:focus,.dark .field textarea:focus{border-bottom-color:var(--gold)}

/* ─── FOOTER (live, NAJAHA wordmark + 4 columns + copy strip) ────────────── */
.footer{background:var(--navy-deep);color:var(--ivory);overflow:hidden;border-top:1px solid rgba(245,242,236,.1);position:relative}
.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(200,163,92,.4) 50%,transparent 100%);pointer-events:none}
.footer-word{
	font-family:var(--f-display);font-weight:700;letter-spacing:-.045em;line-height:.82;
	font-size:clamp(120px,22vw,360px);text-align:center;padding:80px 0 40px;color:var(--ivory);
	white-space:nowrap;
	background:linear-gradient(180deg,var(--ivory) 0%,rgba(245,242,236,.78) 100%);
	-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:64px;padding:72px var(--pad) 64px;border-top:1px solid rgba(245,242,236,.14)}
.footer-cols h5{
	font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.18em;
	opacity:.55;margin-bottom:24px;
	display:inline-flex;align-items:center;gap:12px;
}
.footer-cols h5::before{content:"";width:18px;height:1px;background:var(--gold);opacity:.7;flex:none}
.footer-cols ul{list-style:none;display:grid;gap:14px;font-size:15px;opacity:.92;font-family:var(--f-display);font-weight:400;letter-spacing:-.005em}
.footer-cols ul li a{display:inline-block;position:relative;padding:2px 0;transition:color .3s ease,transform .3s ease}
.footer-cols ul li a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.footer-cols ul li a:hover{color:var(--gold)}
.footer-cols ul li a:hover::after{transform:scaleX(1)}

/* Contact column — distinct typography for address vs links */
.footer-contact__list{font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;line-height:1.6;gap:8px !important}
.footer-contact__addr{font-style:normal;opacity:.8}
.footer-contact__sep{height:1px;background:rgba(245,242,236,.18);margin:8px 0;list-style:none}
.footer-contact__email a,.footer-contact__phone a{font-family:var(--f-display);font-size:15px;font-weight:500;letter-spacing:-.005em;display:inline-block}
.footer-contact__email a:hover,.footer-contact__phone a:hover{color:var(--gold)}
.footer-contact__hours{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin-top:4px}
.footer-copy{
	display:flex;justify-content:space-between;align-items:center;
	padding:26px var(--pad);
	font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em;
	opacity:.6;border-top:1px solid rgba(245,242,236,.14);flex-wrap:wrap;gap:18px;
}
.footer-copy button{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em;background:none;border:0;color:inherit;cursor:pointer;padding:6px 0;position:relative;transition:color .3s ease}
.footer-copy button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .35s ease}
.footer-copy button:hover{color:var(--gold)}
.footer-copy button:hover::after{transform:scaleX(1);transform-origin:left}
@media(max-width:900px){
	.footer-cols{grid-template-columns:repeat(2,1fr);gap:48px;padding:48px var(--pad)}
	.footer-word{padding:60px 0 24px}
	.footer-copy{justify-content:flex-start}
}
@media(max-width:520px){
	.footer-cols{grid-template-columns:1fr;gap:36px}
}

/* ─── FOOTER (design-system version using .word + .cols) ─────────────────── */
.footer .word{font-family:var(--f-display);font-weight:700;letter-spacing:-.04em;line-height:.85;font-size:clamp(120px,21vw,340px);text-align:center;padding:60px 0 30px;color:var(--ivory);white-space:nowrap}
.footer .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding:60px 56px;border-top:1px solid rgba(245,242,236,.18)}
.footer .cols h5{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;opacity:.55;margin-bottom:16px}
.footer .cols ul{list-style:none;display:grid;gap:10px;font-size:15px;opacity:.9}
.footer .copy{display:flex;justify-content:space-between;padding:24px 56px;font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;opacity:.55;border-top:1px solid rgba(245,242,236,.18)}

/* ─── FLOATING LEAD-GEN CTA (WhatsApp · Call · Brief) ────────────────────── */
.floating-cta{
	position:fixed;right:20px;bottom:20px;z-index:80;
	display:flex;flex-direction:column;gap:10px;align-items:flex-end;
	pointer-events:none;
}
.floating-cta__btn{
	pointer-events:auto;
	display:inline-flex;align-items:center;gap:0;
	width:48px;height:48px;
	background:var(--navy-deep);color:var(--ivory);
	border-radius:999px;
	font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.02em;
	text-decoration:none;overflow:hidden;
	box-shadow:0 6px 20px -6px rgba(15,36,56,.45),0 2px 6px rgba(15,36,56,.25);
	transition:width .35s cubic-bezier(.2,.7,.2,1),background-color .25s ease,color .25s ease,transform .25s ease;
	white-space:nowrap;
}
.floating-cta__btn svg{flex:none;margin:0 13px;width:22px;height:22px}
.floating-cta__btn .floating-cta__lbl{opacity:0;transform:translateX(-6px);transition:opacity .25s ease,transform .35s ease;padding-right:18px}
.floating-cta__btn:hover{width:170px;transform:translateY(-2px);box-shadow:0 10px 28px -10px rgba(15,36,56,.55)}
.floating-cta__btn:hover .floating-cta__lbl{opacity:1;transform:translateX(0)}
.floating-cta__btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.floating-cta__btn--wa{background:#25D366;color:#fff}
.floating-cta__btn--wa:hover{background:#1ebe5d;color:#fff}
.floating-cta__btn--call{background:var(--navy);color:var(--ivory)}
.floating-cta__btn--call:hover{background:var(--navy-deep);color:var(--ivory)}
.floating-cta__btn--brief{background:var(--gold);color:var(--navy-deep)}
.floating-cta__btn--brief:hover{background:#b89149;color:var(--navy-deep)}

@media(max-width:600px){
	.floating-cta{right:14px;bottom:14px;gap:8px}
	.floating-cta__btn{width:44px;height:44px}
	.floating-cta__btn svg{margin:0 11px}
	.floating-cta__btn:hover{width:148px}
}
@media(prefers-reduced-motion:reduce){
	.floating-cta__btn,.floating-cta__btn:hover{transition:none;width:auto}
	.floating-cta__btn .floating-cta__lbl{opacity:1;transform:none;padding:0 16px 0 4px}
}

/* Hide reCAPTCHA badge label (badge stays per Google TOS, just less visually intrusive) */
.grecaptcha-badge{visibility:hidden !important}

/* ─── PLACEHOLDER IMAGE SURFACE ──────────────────────────────────────────── */
.ph{
	width:100%;height:100%;
	background:
		repeating-linear-gradient(135deg,rgba(27,58,92,.08) 0 1px,transparent 1px 14px),
		linear-gradient(180deg,#cdc5b1,#b9b09a);
	position:relative;
}
.ph--dark{
	background:
		repeating-linear-gradient(135deg,rgba(245,242,236,.06) 0 1px,transparent 1px 14px),
		linear-gradient(180deg,#1d3a58,#0d2236);
}
.ph .ph-cap{
	position:absolute;left:12px;bottom:12px;
	font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;
	color:var(--charcoal);background:var(--ivory);padding:6px 8px;border:1px solid var(--stone);
}
.ph--dark .ph-cap{color:var(--ivory);background:rgba(15,36,56,.7);border-color:rgba(245,242,236,.25)}