/* ============================================================================
   GTI PROJECTS — PREMIUM DARK REDESIGN
   Brand: black + gold (#f1b11e). Sharp geometry (no rounded elements).
   Typography: Sora (display) + Inter (text). Loaded via functions.php.
   This file is a LAYER on top of betheme + betheme-child/style.css.
   ========================================================================== */

:root {
	--gti-bg:        #000000;   /* pure black page */
	--gti-bg-elev:   #0a0a0b;   /* cards / raised surfaces */
	--gti-bg-elev2:  #111113;   /* deeper panels */
	--gti-gold:      #f1b11e;   /* primary brand gold */
	--gti-gold-deep: #c8941c;   /* hover / pressed */
	--gti-gold-soft: rgba(241,177,30,.14);
	--gti-gold-line: rgba(241,177,30,.45);
	--gti-ink:       #ffffff;
	--gti-ink-soft:  rgba(255,255,255,.66);
	--gti-ink-mute:  rgba(255,255,255,.40);
	--gti-line:      rgba(255,255,255,.10);
	--gti-line-2:    rgba(255,255,255,.18);
	--gti-ease:      cubic-bezier(.16,.84,.44,1);
	--gti-container: 1280px;
}

/* ---- Sharp geometry: kill ALL rounded corners (brand = straight lines) ---- */
*,
*::before,
*::after { border-radius: 0 !important; }

html { scroll-behavior: smooth; }

body {
	background-color: var(--gti-bg) !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	letter-spacing: .005em;
}

::selection { background: var(--gti-gold); color: #000; }

/* ---------------------------------------------------------------- TYPOGRAPHY */
h1, h2, h3, h4, h5, h6,
.dream-home h2, #projects h2 {
	font-family: 'Sora', 'Inter', sans-serif !important;
	letter-spacing: -.02em;
	color: var(--gti-ink);
}
h1 { font-weight: 700 !important; }
h2 { font-weight: 700 !important; }
h3, h4 { font-weight: 600 !important; }

/* gold accent on highlighted words (brand) */
h1 span, h2 span, h3 span { color: var(--gti-gold) !important; }

p { color: var(--gti-ink-soft); }

/* Premium overline label utility (uppercase, gold, hairline) */
.gti-overline {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--gti-gold);
	margin-bottom: 22px;
}
.gti-overline::before {
	content: "";
	width: 34px;
	height: 1px;
	background: var(--gti-gold);
	display: inline-block;
}

/* ------------------------------------------------------------- LINKS/BUTTONS */
/* Premium button — applies ONLY to real buttons, NOT the header Call-now link */
.button:not(.action_button),
button.button,
input[type="submit"],
.wpb_button {
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: color .35s var(--gti-ease), background-color .35s var(--gti-ease), transform .35s var(--gti-ease);
}

input[type="submit"] {
	background-color: var(--gti-gold) !important;
	color: #000 !important;
	padding: 18px 56px !important;
	font-size: 15px !important;
	letter-spacing: .08em;
}
input[type="submit"]:hover {
	background-color: #000 !important;
	color: var(--gti-gold) !important;
}

/* --------------------------------------------------------------- HAIRLINES  */
/* Fine separators that read as the brand's "straight line" motif */
.gti-rule { height: 1px; background: var(--gti-line); border: 0; }

/* --------------------------------------------------------------- SCROLLBAR  */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #2a2a2a; }
::-webkit-scrollbar-thumb:hover { background: var(--gti-gold-deep); }

/* --------------------------------------------------- SCROLL-REVEAL (motion) */
/* Progressive enhancement: only hides when JS has flagged support via .gti-js */
.gti-js [data-gti-reveal] {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity .9s var(--gti-ease), transform .9s var(--gti-ease);
	will-change: opacity, transform;
}
.gti-js [data-gti-reveal].is-in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.gti-js [data-gti-reveal] { opacity: 1 !important; transform: none !important; }
	html { scroll-behavior: auto; }
}

/* ============================================================ HEADER / MENU */
/* CONSERVATIVE: keep BeTheme's one-row header layout intact. Only colour,
   hover and a subtle hairline change — NO font-size / padding / border /
   width changes (those reflow the header into two rows). */
#Top_bar.is-sticky { background: #000 !important; }

/* Nav hover / active = gold (no size or spacing change → no reflow) */
#Top_bar .menu > li > a:hover,
#Top_bar .menu > li.current-menu-item > a,
#Top_bar .menu > li.current_page_item > a { color: var(--gti-gold) !important; }

/* Mobile menu toggle + side slide */
#Top_bar a.responsive-menu-toggle i { color: var(--gti-gold) !important; }
#Side_slide { background: #050505 !important; }

/* Modern Call-now — sharp gold frame, inverts to solid gold on hover */
#Top_bar a.action_button {
	display: inline-flex !important;
	align-items: center !important;
	gap: 14px;
	padding: 10px 22px !important;
	border: 1px solid var(--gti-gold-line) !important;
	background: transparent !important;
	line-height: 1.1 !important;
	transition: background-color .35s var(--gti-ease), border-color .35s var(--gti-ease) !important;
}
#Top_bar a.action_button:hover { background: var(--gti-gold) !important; border-color: var(--gti-gold) !important; }
#Top_bar a.action_button span:first-child {
	color: var(--gti-gold) !important;
	font-size: 11px !important;
	letter-spacing: .22em !important;
	font-weight: 600 !important;
	margin-bottom: 4px !important;
}
#Top_bar a.action_button span:last-child {
	color: #fff !important;
	font-size: 21px !important;
	font-weight: 700 !important;
	letter-spacing: .01em;
}
#Top_bar a.action_button:hover span:first-child,
#Top_bar a.action_button:hover span:last-child { color: #000 !important; }
#Top_bar a.action_button span i {
	background: var(--gti-gold) !important;
	color: #000 !important;
	transition: background-color .35s var(--gti-ease), color .35s var(--gti-ease) !important;
}
#Top_bar a.action_button:hover span i { background: #000 !important; color: var(--gti-gold) !important; }

/* ====================================================================== HERO */
/* NOTE: hero bg image is an Ultimate-Addons full-width row background that is
   positioned specially — do NOT add an ::before overlay or z-index on the row,
   it hides the image. Legibility handled via text-shadow on the copy instead. */
#home h1, #home p { text-shadow: 0 2px 30px rgba(0,0,0,.65); }

/* Widen the hero text column so the headline takes fewer lines */
#home .wpb_column.vc_column_container { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
#home .vc_column-inner { padding-top: 0 !important; }
/* Hero content row — raise content higher */
#home .vc-row-translate-wrapper { padding-top: 150px !important; }

#home h1 {
	font-size: clamp(40px, 5.2vw, 76px) !important;
	line-height: 1.04 !important;
	letter-spacing: -.03em;
	max-width: 880px !important;
	margin-bottom: 30px !important;
	font-weight: 700 !important;
}
/* premium overline above the headline */
#home h1::before {
	content: "Custom Homes · Commercial · Adelaide";
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--gti-gold);
	margin-bottom: 28px;
}
#home p {
	font-size: 17px !important;
	line-height: 1.85 !important;
	max-width: 880px !important;
	color: var(--gti-ink-soft) !important;
}
/* gold scroll cue (the round-was, now sharp square) */
#home a:not(.gti-btn) {
	width: 64px !important;
	height: 64px !important;
	line-height: 64px !important;
	background: var(--gti-gold) !important;
	color: #000 !important;
	border: 1px solid var(--gti-gold) !important;
	transition: background-color .35s var(--gti-ease), color .35s var(--gti-ease);
}
#home a:not(.gti-btn):hover { background: transparent !important; color: var(--gti-gold) !important; }

/* HERO CTA buttons */
.gti-hero-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; position: relative; z-index: 2; }
#home a.gti-btn {
	display: inline-flex !important;
	align-items: center; justify-content: center;
	width: auto !important; height: auto !important; line-height: 1 !important;
	padding: 18px 40px !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important; font-size: 14px !important;
	letter-spacing: .08em; text-transform: uppercase;
	border: 1px solid var(--gti-gold) !important;
	transition: background-color .35s var(--gti-ease), color .35s var(--gti-ease) !important;
}
#home a.gti-btn-primary { background: var(--gti-gold) !important; color: #000 !important; }
#home a.gti-btn-primary:hover { background: transparent !important; color: var(--gti-gold) !important; }
#home a.gti-btn-ghost { background: transparent !important; color: var(--gti-gold) !important; }
#home a.gti-btn-ghost:hover { background: var(--gti-gold) !important; color: #000 !important; }

/* smooth-scroll anchor offset for hero CTA targets */
#projects, #contact { scroll-margin-top: 90px; }

/* Hero YouTube background = clean background only: kill the play/pause button,
   YouTube info/title and any hover controls (video keeps playing, muted) */
.inlinePlayButton,
#home .inlinePlayButton,
.upb_video-bg .inlinePlayButton,
.mb_YTPlayer .inlinePlayButton { display: none !important; }
#home .playerBox,
.upb_video-bg iframe,
.upb_video-wrapper iframe,
.mb_YTPlayer iframe { pointer-events: none !important; }
/* hide YouTube's own title/gradient that can flash at the top on start */
.upb_video-bg .ytp-chrome-top,
.upb_video-bg .ytp-show-cards-title,
.upb_video-bg .ytp-gradient-top { display: none !important; }

/* =========================================== BUILD / "OVER 10 YEARS" SECTION */
.build { padding-top: 110px !important; padding-bottom: 110px !important; }
.build h2 {
	font-size: clamp(30px, 3.3vw, 46px) !important;
	line-height: 1.14 !important;
	margin-bottom: 38px !important;
	letter-spacing: -.02em;
}
.build h2 .colored, .build h2 span { color: var(--gti-gold) !important; }
/* premium overline above the heading */
.build-text { position: relative; }
.build-text::before {
	content: "Who we are";
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--gti-gold);
	margin-bottom: 22px;
}
.build-text p { color: var(--gti-ink-soft) !important; font-size: 16px !important; line-height: 1.9 !important; }
.build-text p:before { background-color: var(--gti-gold) !important; } /* accent line -> gold */
/* image: thin frame + subtle premium hover zoom */
.build-img { overflow: hidden; border: 1px solid var(--gti-line); }
.build-img img { display: block; transition: transform .8s var(--gti-ease); }
.build-img:hover img { transform: scale(1.05); }

/* ====================================================== PROJECTS GRID */
#projects h2 {
	font-size: clamp(28px, 3vw, 42px) !important;
	margin-bottom: 48px !important;
	letter-spacing: -.02em;
}
#projects h2:after { background-color: var(--gti-gold) !important; } /* accent line -> gold */

a.project-box { overflow: hidden; }
a.project-box img { transition: transform .9s var(--gti-ease); }
a.project-box:hover img { transform: scale(1.07); }
/* legibility + depth gradient */
a.project-box::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.68) 100%);
	transition: background .45s var(--gti-ease);
}
a.project-box:hover::before {
	background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.1) 45%, rgba(241,177,30,.14) 100%);
}
a.project-box h4, a.project-box h5 { z-index: 2; }
a.project-box h4 { font-family: 'Sora', sans-serif !important; font-weight: 600 !important; }
a.project-box h5 { color: var(--gti-gold) !important; }
/* gold line that reveals under the title on hover */
a.project-box h4::after {
	content: "";
	display: block;
	width: 0;
	height: 2px;
	margin-top: 12px;
	background: var(--gti-gold);
	transition: width .45s var(--gti-ease);
}
a.project-box:hover h4::after { width: 50px; }

/* ============================================ "BUILD YOUR DREAM HOME" CTA */
.dream-home { padding-top: 130px !important; padding-bottom: 120px !important; }
.dream-home h2 {
	font-size: clamp(38px, 5vw, 72px) !important;
	line-height: 1.05 !important;
	margin-bottom: 70px !important;
	letter-spacing: -.03em;
}
.dream-home h2 span { color: var(--gti-gold) !important; }
/* wrapper row → transparent flex container with gaps (3 separate boxes) */
.black-box {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-wrap: wrap;
	gap: 26px;
	align-items: stretch;
}
.black-box::before { display: none !important; }
.black-box > .wpb_column,
.black-box > .vc_column_container {
	width: auto !important;
	flex: 1 1 0 !important;
	min-width: 240px;
	padding: 0 !important;
	margin: 0 !important;
}
/* flex-fill chain so every box stretches to the SAME height */
.black-box > .wpb_column { display: flex !important; }
.black-box > .wpb_column > .vc_column-inner { display: flex; flex-direction: column; flex: 1; width: 100%; }
.black-box > .wpb_column > .vc_column-inner > .wpb_wrapper { display: flex; flex-direction: column; flex: 1; }

/* each value item → its own box with transparent black background */
.icon-box-build {
	background: rgba(0,0,0,.5) !important;
	border: 1px solid var(--gti-line) !important;
	padding: 44px 36px !important;
	flex: 1 1 auto;
	position: relative;
	transition: border-color .4s var(--gti-ease), transform .4s var(--gti-ease), background-color .4s var(--gti-ease);
}
/* modern thin-line SVG icons (injected by redesign.js) */
.gti-icon { width: 50px; height: 50px; display: block; margin-bottom: 8px; }
.gti-icon svg { width: 50px; height: 50px; stroke: var(--gti-gold); }
.icon-box-build .icon-img { min-height: 0 !important; margin-bottom: 36px !important; }
.icon-box-build::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	height: 3px; width: 0;
	background: var(--gti-gold);
	transition: width .45s var(--gti-ease);
}
.icon-box-build:hover { border-color: var(--gti-gold-line) !important; transform: translateY(-6px); background: rgba(0,0,0,.7) !important; }
.icon-box-build:hover::before { width: 60px; }
.icon-box-build h4 { color: var(--gti-gold) !important; font-family: 'Sora', sans-serif !important; }
.icon-box-build p { color: var(--gti-ink-soft) !important; }

/* ============================================================================
   WOW LAYER — motion, editorial numbering, bolder type, header scroll-state
   ========================================================================== */

/* --- scroll reveal (paired with redesign.js .gti-js + .is-in) --- */
.gti-js [data-gti-reveal] {
	opacity: 0;
	transform: translateY(42px);
	transition: opacity 1s var(--gti-ease), transform 1s var(--gti-ease);
	will-change: opacity, transform;
}
.gti-js [data-gti-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.gti-js [data-gti-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --- header scroll state --- */
#Top_bar.gti-scrolled,
#Top_bar.is-sticky {
	background: #000 !important;
	box-shadow: 0 1px 0 var(--gti-gold-line), 0 16px 44px rgba(0,0,0,.55);
}

/* --- animated gold underline on nav (absolute → no reflow) --- */
#Top_bar .menu > li > a { position: relative; }
#Top_bar .menu > li > a::after {
	content: "";
	position: absolute;
	left: 20px; right: 20px; bottom: 0;
	height: 2px;
	background: var(--gti-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .4s var(--gti-ease);
}
#Top_bar .menu > li > a:hover::after,
#Top_bar .menu > li.current-menu-item > a::after,
#Top_bar .menu > li.current_page_item > a::after { transform: scaleX(1); }

/* --- editorial section overlines with numbers --- */
.build-text::before,
#projects h2::before,
.dream-home h2::before,
#contact h2::before {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--gti-gold);
	margin-bottom: 24px;
}
.build-text::before    { content: "01 — Who We Are"; }
#projects h2::before   { content: "02 — Selected Work"; }
.dream-home h2::before { content: "03 — The GTI Standard"; }
#contact h2::before    { content: "06 — Start Your Project"; }

/* --- bolder, more dramatic section headings --- */
#projects h2 { font-size: clamp(36px, 4.4vw, 60px) !important; }
.build h2    { font-size: clamp(34px, 3.9vw, 54px) !important; }
#contact h2  { font-size: clamp(34px, 4vw, 54px) !important; }
.dream-home h2 { font-size: clamp(40px, 5.4vw, 80px) !important; }

/* more generous section rhythm */
#projects, .services, #contact { padding-top: 130px !important; }

/* ============================================ SERVICES carousel polish */
.services .vc_images_carousel .vc_carousel-control {
	background: rgba(0,0,0,.5) !important;
	border: 1px solid var(--gti-gold-line) !important;
	color: var(--gti-gold) !important;
	transition: background-color .3s var(--gti-ease), color .3s var(--gti-ease);
}
.services .vc_images_carousel .vc_carousel-control:hover { background: var(--gti-gold) !important; color: #000 !important; }
.services .vc_images_carousel .vc_carousel-slideline .vc_item img,
.services .wpb_single_image img { transition: transform .7s var(--gti-ease); }

/* ============================================ CONTACT form (premium dark) */
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="date"],
#contact input[type="number"],
#contact select,
#contact textarea,
#contact .wpcf7-form-control.wpcf7-text,
#contact .wpcf7-form-control.wpcf7-textarea {
	background: var(--gti-bg-elev) !important;
	border: 1px solid var(--gti-line) !important;
	color: #fff !important;
	padding: 16px 22px !important;
	transition: border-color .3s var(--gti-ease), background-color .3s var(--gti-ease);
}
#contact input:focus,
#contact textarea:focus,
#contact select:focus {
	border-color: var(--gti-gold) !important;
	background: var(--gti-bg-elev2) !important;
	outline: none !important;
}
#contact input::placeholder,
#contact textarea::placeholder { color: var(--gti-ink-mute) !important; }
#contact p { color: var(--gti-ink-soft) !important; }

/* ============================================ FOOTER (premium) */
#Footer { background: #050505 !important; border-top: 1px solid var(--gti-gold-line) !important; }
#Footer .footer_copy { border-top: 0 !important; padding-top: 36px !important; padding-bottom: 36px !important; }
#Footer, #Footer .copyright, #Footer p, #Footer a { color: var(--gti-ink-mute) !important; }
#Footer a:hover { color: var(--gti-gold) !important; }

/* ============================================ .build heading + accent line fix */
/* drop forced <br> in the heading so it flows naturally by column width */
.build-text h2 br { display: none !important; }
/* vertical accent line follows the paragraph (small text) height */
.build-text p { position: relative; }
.build-text p::before { top: 0 !important; height: 100% !important; background-color: var(--gti-gold) !important; }

/* ============================================ GLIGHTBOX — modern brand caption */
.goverlay { background: rgba(0,0,0,.94) !important; }
.glightbox-clean .gslide-description { background: rgba(8,8,8,.92) !important; }
.glightbox-clean .gslide-title {
	font-family: 'Sora', sans-serif !important;
	color: #fff !important;
	font-size: 22px !important;
	letter-spacing: -.01em;
	margin-bottom: 8px !important;
}
.glightbox-clean .gslide-desc {
	color: var(--gti-gold) !important;
	text-transform: uppercase;
	letter-spacing: .22em;
	font-size: 12px;
	font-weight: 600;
}
.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev { background: rgba(0,0,0,.55) !important; opacity: 1 !important; }
.glightbox-clean .gclose svg path,
.glightbox-clean .gnext svg path,
.glightbox-clean .gprev svg path { fill: var(--gti-gold) !important; }

/* ============================================ PAGE LOADER (logo mark draws itself) */
#gti-loader {
	position: fixed;
	inset: 0;
	z-index: 2147483600;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .6s ease, visibility .6s ease;
}
#gti-loader.gti-loaded { opacity: 0; visibility: hidden; }
.gti-loader-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.gti-loader-mark rect {
	stroke-dasharray: 352;
	stroke-dashoffset: 352;
	animation: gti-draw 1.7s cubic-bezier(.65,.05,.36,1) infinite;
}
@keyframes gti-draw {
	0%   { stroke-dashoffset: 352; }
	45%  { stroke-dashoffset: 0; }
	55%  { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: -352; }
}
.gti-loader-text {
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	letter-spacing: .42em;
	text-transform: uppercase;
	color: rgba(255,255,255,.42);
}

/* ============================================ GLIGHTBOX close button (top-right) */
.glightbox-clean .gclose {
	position: fixed !important;
	top: 20px !important;
	right: 20px !important;
	left: auto !important;
	width: 46px !important;
	height: 46px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: rgba(0,0,0,.55) !important;
	border: 1px solid var(--gti-gold-line) !important;
	opacity: 1 !important;
	transition: background-color .3s var(--gti-ease) !important;
}
.glightbox-clean .gclose:hover { background: var(--gti-gold) !important; }
.glightbox-clean .gclose svg { width: 20px !important; height: 20px !important; }
.glightbox-clean .gclose svg path { fill: var(--gti-gold) !important; }
.glightbox-clean .gclose:hover svg path { fill: #000 !important; }

/* ============================================ DREAM-HOME cards — WoW styling */
.black-box { counter-reset: gti-card; }
.icon-box-build {
	counter-increment: gti-card;
	display: flex !important;
	flex-direction: column;
	padding-top: 44px !important;
	overflow: hidden;
}
/* icon first (above title) */
.icon-box-build .icon-img { order: -1; margin-bottom: 30px !important; }
/* big faint editorial number, top-right */
.icon-box-build::after {
	content: "0" counter(gti-card);
	position: absolute;
	top: 22px;
	right: 30px;
	font-family: 'Sora', sans-serif;
	font-size: 42px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(241,177,30,.30);
	pointer-events: none;
}
/* title + aligned divider (min-height reserves 2 lines so dividers line up) */
.icon-box-build h4 {
	font-size: 19px !important;
	line-height: 1.3 !important;
	min-height: 2.6em;
	margin: 0 0 22px !important;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--gti-line);
}
.icon-box-build p { font-size: 15.5px !important; line-height: 1.85 !important; margin: 0 !important; }
.icon-box-build:hover .icon-img svg { transform: translateY(-3px); transition: transform .4s var(--gti-ease); }

/* dream-home icons — sized by height */
.icon-box-build .icon-img img { width: auto !important; height: 46px !important; }

/* ============================================================================
   SERVICES — complete ultra-modern redesign
   ========================================================================== */
.services { padding-top: 130px !important; padding-bottom: 120px !important; }

/* main "Services" title with editorial overline (scoped via JS class) */
.services h2.gti-svc-title {
	font-size: clamp(34px, 4.2vw, 58px) !important;
	margin-bottom: 56px !important;
	letter-spacing: -.02em;
}
.services h2.gti-svc-title::before {
	content: "04 — What We Build";
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
	color: var(--gti-gold);
	margin-bottom: 24px;
}

/* the 4 service cards */
.services .ult-new-ib {
	position: relative !important;
	overflow: hidden !important;
	border: 1px solid var(--gti-line) !important;
	height: 460px !important;
}
.services .ult-new-ib-img {
	width: 100% !important; height: 100% !important;
	object-fit: cover !important;
	opacity: 1 !important;
	transition: transform 1s var(--gti-ease) !important;
}
.services .ult-new-ib:hover .ult-new-ib-img { transform: scale(1.08); }
.services .ult-new-ib::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.12) 38%, rgba(0,0,0,.9) 100%);
	transition: background .45s var(--gti-ease);
}
.services .ult-new-ib:hover::after { background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(10,10,10,.45) 45%, rgba(0,0,0,.94) 100%); }
/* desc overlay anchored to bottom */
.services .ult-new-ib-desc {
	position: absolute !important;
	left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
	z-index: 2 !important;
	padding: 30px 26px !important;
	background: transparent !important;
	transform: none !important;
	opacity: 1 !important;
	height: auto !important;
}
.services .ult-new-ib-title {
	font-family: 'Sora', sans-serif !important;
	color: #fff !important;
	font-size: 21px !important;
	font-weight: 600 !important;
	margin: 0 !important;
	padding-bottom: 14px;
	position: relative;
}
.services .ult-new-ib-title::after {
	content: ""; display: block; width: 34px; height: 2px; margin-top: 14px;
	background: var(--gti-gold); transition: width .4s var(--gti-ease);
}
.services .ult-new-ib:hover .ult-new-ib-title::after { width: 66px; }
/* description: hidden, reveals on hover */
.services .ult-new-ib-content {
	max-height: 0; opacity: 0; overflow: hidden;
	transition: max-height .55s var(--gti-ease), opacity .45s var(--gti-ease), margin-top .55s var(--gti-ease);
}
.services .ult-new-ib:hover .ult-new-ib-content { max-height: 220px; opacity: 1; margin-top: 12px; }
.services .ult-new-ib-content,
.services .ult-new-ib-content p {
	color: var(--gti-ink-soft) !important;
	font-size: 14.5px !important; line-height: 1.7 !important; margin: 0 !important;
}

/* the "We set standards..." statement heading */
.services h2.gti-svc-statement {
	font-size: clamp(24px, 2.6vw, 38px) !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
	max-width: 760px;
	margin-top: 80px !important;
	letter-spacing: -.01em;
}
.services h2.gti-svc-statement::after {
	content: ""; display: block; width: 60px; height: 3px; background: var(--gti-gold); margin-top: 28px;
}

/* ===== SERVICES fixes: kill blue card bg + full image cover ===== */
.services .ult-new-ib { background: #0a0a0b !important; }
.services .ult-new-ib-img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* statement heading — premium with gold left bar */
.services h2.gti-svc-statement {
	font-size: clamp(26px, 3vw, 44px) !important;
	line-height: 1.25 !important;
	font-weight: 700 !important;
	max-width: 860px;
	margin-top: 90px !important;
	padding-left: 32px;
	position: relative;
}
.services h2.gti-svc-statement::before {
	content: "";
	position: absolute; left: 0; top: 8px; bottom: 8px;
	width: 3px; background: var(--gti-gold);
}
.services h2.gti-svc-statement::after { display: none !important; }

/* decorative transparent squares background (brand square motif) */
.services { position: relative !important; overflow: hidden !important; }
.services > .section_wrapper,
.services .container,
.services > .vc_row,
.services > div { position: relative; z-index: 2; }
.gti-svc-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.gti-svc-deco span {
	position: absolute;
	display: block;
	border: 1px solid;
	animation: gti-float 14s ease-in-out infinite;
}
.gti-svc-deco .w { border-color: rgba(255,255,255,.07); }
.gti-svc-deco .g { border-color: rgba(241,177,30,.16); }
@keyframes gti-float {
	0%,100% { transform: translateY(0) rotate(0deg); }
	50%     { transform: translateY(-22px) rotate(4deg); }
}

/* ===== SERVICES: equal flush card grid (no black gaps), uniform titles ===== */
.services .gti-svc-grid { display: flex !important; flex-wrap: nowrap; gap: 14px; }
.services .gti-svc-grid > .wpb_column {
	flex: 1 1 0 !important; width: auto !important; max-width: none !important;
	padding: 0 !important; margin: 0 !important;
}
.services .gti-svc-grid .vc_column-inner,
.services .gti-svc-grid .wpb_wrapper { padding: 0 !important; }
.services .ult-new-ib { width: 100% !important; }
.services .ult-new-ib-title { font-size: 20px !important; line-height: 1.25 !important; }
@media (max-width: 767px) {
	.services .gti-svc-grid { flex-wrap: wrap; }
	.services .gti-svc-grid > .wpb_column { flex: 1 1 100% !important; }
}

/* statement heading — modern with a line extending to the right */
.services h2.gti-svc-statement {
	display: flex !important;
	align-items: center;
	gap: 34px;
	max-width: none !important;
}
.services h2.gti-svc-statement::after {
	content: "" !important;
	display: block !important;
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg, var(--gti-gold-line), rgba(255,255,255,0));
}

/* bigger, clearer decorative squares */
.gti-svc-deco .w { border-color: rgba(255,255,255,.08) !important; }
.gti-svc-deco .g { border-color: rgba(241,177,30,.20) !important; }

/* uniform service card titles — single line, same size */
.services .ult-new-ib-title { white-space: nowrap !important; }
.services .ult-new-ib-title br { display: none !important; }

/* ===== SERVICES final fixes ===== */
/* fix: Ultimate style1 shifts the image via transform → kill the shift (full fill) */
.services .ult-ib-effect-style1 img,
.services .ult-new-ib-img { transform: translate3d(0px, 0, 0) !important; }
.services .ult-new-ib:hover .ult-new-ib-img { transform: translate3d(0px, 0, 0) scale(1.07) !important; }

/* smoother / slower text reveal on hover (no sudden jump) */
.services .ult-new-ib-content {
	transition: max-height .75s var(--gti-ease), opacity .7s var(--gti-ease), margin-top .75s var(--gti-ease) !important;
}
.services .ult-new-ib-desc,
.services .ult-new-ib-title {
	transition: transform .6s var(--gti-ease), color .4s var(--gti-ease) !important;
}

/* ===== SERVICES statement — final clean editorial styling ===== */
.services h2.gti-svc-statement {
	display: block !important;
	font-size: clamp(26px, 3vw, 44px) !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
	max-width: 900px;
	margin-top: 96px !important;
	padding: 6px 0 6px 36px !important;
	border-left: 3px solid var(--gti-gold) !important;
	position: relative;
}
.services h2.gti-svc-statement::before {
	content: "Our Promise" !important;
	position: static !important;
	display: block !important;
	width: auto !important; height: auto !important;
	background: none !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 12px !important; font-weight: 600 !important;
	letter-spacing: .3em !important; text-transform: uppercase !important;
	color: var(--gti-gold) !important;
	margin-bottom: 20px !important;
}
.services h2.gti-svc-statement::after { display: none !important; }

/* ensure ALL service card titles share the same style (underline below, no left bar) */
.services .ult-new-ib-title { border-left: 0 !important; padding-left: 0 !important; }
.services .ult-new-ib-title::after { content: "" !important; display: block !important; width: 34px; height: 2px; margin-top: 14px; background: var(--gti-gold); }

/* ===== Call-now button: no border, no icon — just text + number ===== */
#Top_bar a.action_button {
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	gap: 12px;
}
#Top_bar a.action_button:hover { background: transparent !important; border: 0 !important; }
#Top_bar a.action_button span i { display: none !important; }
#Top_bar a.action_button span:last-child { color: #fff !important; font-size: 19px !important; }
#Top_bar a.action_button:hover span:first-child { color: var(--gti-gold) !important; }
#Top_bar a.action_button:hover span:last-child { color: var(--gti-gold) !important; }

/* statement column → 70% of container (fewer text lines) */
.services .gti-stmt-col { width: 70% !important; max-width: 70% !important; flex-basis: 70% !important; }
.services h2.gti-svc-statement { max-width: none !important; }

/* Call-now: stack "CALL NOW" (smaller) above the phone number */
#Top_bar a.action_button { flex-direction: column !important; align-items: flex-start !important; gap: 3px !important; line-height: 1.1 !important; }
#Top_bar a.action_button span:first-child { font-size: 10px !important; letter-spacing: .24em !important; margin: 0 !important; }
#Top_bar a.action_button span:last-child { font-size: 18px !important; }

/* statement: wider (2 lines) + less gap above */
.services .gti-stmt-col { width: 90% !important; max-width: 90% !important; flex-basis: 90% !important; }
.services h2.gti-svc-statement { margin-top: 48px !important; }

/* anchor offset for the Services nav link (clears the sticky header) */
#services { scroll-margin-top: 110px; }

/* ============================================================================
   GALLERY — ultra-modern (full-bleed carousel kept builder-managed)
   ========================================================================== */
#gallery { padding-top: 130px !important; padding-bottom: 130px !important; position: relative; }
.gti-gallery-head { max-width: 1240px; margin: 0 auto 50px; padding: 0 30px; }
.gti-gallery-head h2 { font-size: clamp(36px, 4.4vw, 60px) !important; margin: 0 !important; letter-spacing: -.02em; }

/* slides: small gaps + hover zoom + gold tint */
#gallery .ult-carousel-wrapper .slick-slide { padding: 0 5px; box-sizing: border-box; }
#gallery .ult-carousel-wrapper .slick-slide > * { position: relative; overflow: hidden; display: block; }
#gallery .ult-carousel-wrapper img { transition: transform .9s var(--gti-ease) !important; display: block; width: 100%; }
#gallery .ult-carousel-wrapper .slick-slide:hover img { transform: scale(1.06); }
#gallery .ult-carousel-wrapper .slick-slide > *::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: rgba(241,177,30,0); transition: background .4s var(--gti-ease);
}
#gallery .ult-carousel-wrapper .slick-slide:hover > *::after { background: rgba(241,177,30,.12); }

/* sharp gold carousel arrows */
#gallery .slick-prev, #gallery .slick-next {
	background: rgba(0,0,0,.55) !important;
	border: 1px solid var(--gti-gold-line) !important;
	color: var(--gti-gold) !important;
	width: 56px !important; height: 56px !important;
	z-index: 5;
	transition: background-color .3s var(--gti-ease), color .3s var(--gti-ease) !important;
}
#gallery .slick-prev:hover, #gallery .slick-next:hover { background: var(--gti-gold) !important; color: #000 !important; }

/* ===== GALLERY arrows — inset + modern chevrons ===== */
#gallery .slick-prev { left: 28px !important; right: auto !important; }
#gallery .slick-next { right: 28px !important; left: auto !important; }
#gallery .slick-prev, #gallery .slick-next {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 0 !important;           /* hide default arrow glyph */
}
#gallery .slick-prev::before, #gallery .slick-next::before {
	content: "" !important;
	width: 11px; height: 11px;
	border-top: 2px solid var(--gti-gold);
	border-right: 2px solid var(--gti-gold);
	display: inline-block;
	opacity: 1 !important;
	transition: border-color .3s var(--gti-ease);
}
#gallery .slick-prev::before { transform: rotate(-135deg); margin-left: 4px; }   /* points left */
#gallery .slick-next::before { transform: rotate(45deg); margin-right: 4px; }    /* points right */
#gallery .slick-prev:hover::before, #gallery .slick-next:hover::before { border-color: #000; }

/* gallery arrows: bigger chevron, centered in the box */
#gallery .slick-prev, #gallery .slick-next { padding: 0 !important; line-height: 0 !important; }
#gallery .slick-prev::before, #gallery .slick-next::before {
	width: 16px !important; height: 16px !important;
	border-top: 3px solid var(--gti-gold) !important;
	border-right: 3px solid var(--gti-gold) !important;
	border-bottom: 0 !important; border-left: 0 !important;
	margin: 0 !important;
}
#gallery .slick-prev::before { transform: rotate(-135deg) translate(-2px,-2px); }
#gallery .slick-next::before { transform: rotate(45deg) translate(-2px,-2px); }

#gallery { margin-top: 0 !important; }

#projects, .services, #contact { padding-top: 0px !important; }

/* thicker decorative squares (not thread-thin) */
.gti-svc-deco span { border-width: 3px !important; }

/* gallery arrows: clean centering (remove translate offset) */
#gallery .slick-prev::before, #gallery .slick-next::before { position: static !important; margin: 0 !important; }
#gallery .slick-prev::before { transform: rotate(-135deg) !important; }
#gallery .slick-next::before { transform: rotate(45deg) !important; }

/* hide Ultimate's icon-font arrow glyph — keep only the centered chevron */
#gallery .slick-prev > i, #gallery .slick-next > i,
#gallery .slick-prev i[class*="ultsl"], #gallery .slick-next i[class*="ultsl"] { display: none !important; }

/* gallery arrows: chevron turns black on hover (gold bg) so it stays visible */
#gallery .slick-prev:hover::before, #gallery .slick-next:hover::before {
	border-top-color: #000 !important;
	border-right-color: #000 !important;
}

/* gallery arrows: replace border-chevron with perfectly-centered SVG chevron */
#gallery .slick-prev::before, #gallery .slick-next::before {
	content: "" !important;
	border: 0 !important;
	transform: none !important;
	width: 22px !important;
	height: 22px !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 22px 22px !important;
	margin: 0 !important;
}
#gallery .slick-prev::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1b11e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") !important; }
#gallery .slick-next::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1b11e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important; }
#gallery .slick-prev:hover::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") !important; }
#gallery .slick-next:hover::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important; }

/* ============================================================================
   CONTACT — compact 2-column form + contact info with icons
   ========================================================================== */
#contact form { display: grid !important; grid-template-columns: 1fr 1fr; gap: 18px 20px; align-items: start; }
#contact form .form-control { margin: 0 !important; width: auto !important; float: none !important; }
#contact form .form-control > p { margin: 0 !important; padding: 0 !important; }
#contact form .wpcf7-form-control-wrap { display: block; }
#contact form input, #contact form select, #contact form textarea { width: 100% !important; box-sizing: border-box; }
/* Message + Submit span full width */
#contact form .form-control:has(textarea) { grid-column: 1 / -1; }
#contact form .form-control:has(input[type="submit"]) { grid-column: 1 / -1; }
#contact form .wpcf7-response-output { grid-column: 1 / -1 !important; margin: 14px 0 0 !important; }
#contact form > p[role="status"] { display: none; }

/* left-side contact info with icons (built by redesign.js) */
.gti-contact-info { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.gti-contact-info .gti-ci { display: inline-flex; align-items: center; gap: 14px; color: var(--gti-ink); font-size: 16px; transition: color .3s var(--gti-ease); width: fit-content; }
.gti-contact-info .gti-ci svg { width: 20px; height: 20px; stroke: var(--gti-gold); flex: 0 0 auto; }
.gti-contact-info .gti-ci:hover { color: var(--gti-gold); }

/* gallery: no top padding */
#gallery { padding-top: 0 !important; }

/* contact: Message + Submit span full width (reliable class, not :has) */
#contact form .gti-fc-full { grid-column: 1 / -1 !important; }

/* modern boxed contact icons (framed, not bare) */
.gti-contact-info .gti-ci { gap: 16px; }
.gti-contact-info .gti-ci-ic {
	width: 46px; height: 46px;
	border: 1px solid var(--gti-gold-line);
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 auto;
	transition: background-color .3s var(--gti-ease), border-color .3s var(--gti-ease);
}
.gti-contact-info .gti-ci-ic svg { width: 20px; height: 20px; stroke: var(--gti-gold); transition: stroke .3s var(--gti-ease); }
.gti-contact-info .gti-ci:hover .gti-ci-ic { background: var(--gti-gold); border-color: var(--gti-gold); }
.gti-contact-info .gti-ci:hover .gti-ci-ic svg { stroke: #000; }
.gti-contact-info .gti-ci-tx { font-size: 16px; }

/* footer copy + column spacing (per request) */
#Footer .footer_copy .one {
	margin-bottom: 0;
	padding-top: 0;
	min-height: 33px;
}
.mcb-column-inner {
	position: relative;
	margin-top: var(--mfn-column-gap-top);
	margin-bottom: 0;
	margin-left: var(--mfn-column-gap-left);
	margin-right: var(--mfn-column-gap-right);
}

/* fix: #contact p was capping the form field <p> wrappers too */
#contact form p { max-width: 100% !important; }
#contact .wpb_text_column p { max-width: 440px; }

/* ===== CONTACT abstract overlay (glow + outlined squares) ===== */
#contact { position: relative !important; overflow: hidden !important; }
#contact .section_wrapper, #contact .wpb_column { position: relative; z-index: 2; }
.gti-contact-deco {
	position: absolute !important; inset: 0 !important; z-index: 0 !important;
	pointer-events: none;
	background:
		radial-gradient(820px 520px at 88% 6%, rgba(241,177,30,.08), transparent 60%),
		radial-gradient(680px 520px at -5% 100%, rgba(255,255,255,.025), transparent 55%);
}
.gti-contact-deco span { position: absolute; display: block; border: 3px solid; animation: gti-float 16s ease-in-out infinite; }
.gti-contact-deco .w { border-color: rgba(255,255,255,.06); }
.gti-contact-deco .g { border-color: rgba(241,177,30,.14); }

/* contact deco squares — more visible */
.gti-contact-deco .w { border-color: rgba(255,255,255,.12) !important; }
.gti-contact-deco .g { border-color: rgba(241,177,30,.30) !important; }
.gti-contact-deco span { border-width: 3px !important; }

/* remove the abstract squares/overlay from the contact section */
.gti-contact-deco { display: none !important; }

/* hero CTA: force side-by-side, left-aligned */
.gti-hero-cta { display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: flex-start !important; align-items: center; gap: 16px !important; margin-top: 34px !important; }
#home a.gti-btn { width: auto !important; flex: 0 0 auto !important; }

/* hero CTA buttons (vc_btn) — side by side, left, under the text */
#home .wpb_column .vc_btn3-container {
	display: inline-block !important;
	margin: 36px 16px 0 0 !important;
	vertical-align: top;
	width: auto !important;
}
/* hero content row padding-bottom */
#home .vc-row-translate-wrapper { padding-bottom: 150px !important; }

/* hero CTA buttons (vc_btn): style the link inside the gti-btn container */
#home .vc_btn3-container.gti-btn { display: inline-block !important; margin: 36px 14px 0 0 !important; vertical-align: top; padding: 0 !important; }
#home .gti-btn .vc_btn3 {
	display: inline-flex !important; align-items: center; justify-content: center;
	padding: 18px 40px !important; min-width: 0 !important; line-height: 1 !important;
	font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 14px !important;
	letter-spacing: .08em !important; text-transform: uppercase !important;
	border: 1px solid var(--gti-gold) !important; box-shadow: none !important;
	transition: background-color .35s var(--gti-ease), color .35s var(--gti-ease) !important;
}
#home .gti-btn-primary .vc_btn3 { background: var(--gti-gold) !important; color: #000 !important; }
#home .gti-btn-primary:hover .vc_btn3 { background: transparent !important; color: var(--gti-gold) !important; }
#home .gti-btn-ghost .vc_btn3 { background: transparent !important; color: var(--gti-gold) !important; }
#home .gti-btn-ghost:hover .vc_btn3 { background: var(--gti-gold) !important; color: #000 !important; }

/* hero: force text block so CTA buttons drop below it (left), not beside it */
#home .wpb_wrapper > .wpb_text_column { display: block !important; width: 100% !important; }
#home .vc_btn3-container.gti-btn { clear: none; }
#home .wpb_wrapper { text-align: left !important; }

/* HERO CTA — bulletproof: own full-width line, left, buttons side-by-side */
#home .gti-hero-cta {
	display: block !important;
	width: 100% !important;
	flex: 1 1 100% !important;
	min-width: 100% !important;
	order: 99 !important;
	clear: both !important;
	float: none !important;
	text-align: left !important;
	margin: 36px 0 0 0 !important;
	position: static !important;
}
#home .gti-hero-cta .gti-btn {
	display: inline-block !important;
	float: none !important;
	position: static !important;
	vertical-align: top;
	width: auto !important;
	margin: 0 16px 0 0 !important;
	padding: 18px 40px !important;
	font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 14px !important;
	letter-spacing: .08em !important; text-transform: uppercase !important;
	border: 1px solid var(--gti-gold) !important; line-height: 1 !important;
	transition: background-color .35s var(--gti-ease), color .35s var(--gti-ease) !important;
}
#home .gti-hero-cta .gti-btn-primary { background: var(--gti-gold) !important; color: #000 !important; }
#home .gti-hero-cta .gti-btn-primary:hover { background: transparent !important; color: var(--gti-gold) !important; }
#home .gti-hero-cta .gti-btn-ghost { background: transparent !important; color: var(--gti-gold) !important; }
#home .gti-hero-cta .gti-btn-ghost:hover { background: var(--gti-gold) !important; color: #000 !important; }