@layer theme {
:root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --spacing: .25rem; --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); }
}
@layer base {
*, ::after, ::before { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; }
::backdrop { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; }
::file-selector-button { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; }
html, :host { text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings,normal); font-variation-settings: var(--default-font-variation-settings,normal); -webkit-tap-highlight-color: transparent; }
hr { height: 0px; color: inherit; border-top-width: 1px; }
abbr:where([title]) { text-decoration: underline dotted; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
code, kbd, samp, pre { font-family: var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings,normal); font-variation-settings: var(--default-mono-font-variation-settings,normal); font-size: 1em; }
small { font-size: 80%; }
sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
table { text-indent: 0px; border-color: inherit; border-collapse: collapse; }
progress { vertical-align: baseline; }
summary { display: list-item; }
ol, ul, menu { list-style: none; }
img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; display: block; }
img, video { max-width: 100%; height: auto; }
button, input, select, optgroup, textarea { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; }
::file-selector-button { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; }
:where(select:is([multiple], [size])) optgroup { font-weight: bolder; }
:where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; }
::file-selector-button { margin-inline-end: 4px; }
::placeholder { opacity: 1; }
@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
::placeholder { color: currentcolor; }
@supports (color:color-mix(in lab, red, red)) {
::placeholder { color: color-mix(currentcolor, transparent); }
}
}
textarea { resize: vertical; }
::-webkit-search-decoration { appearance: none; }
::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; }
::-webkit-datetime-edit { display: inline-flex; }
::-webkit-datetime-edit-fields-wrapper { padding: 0px; }
::-webkit-datetime-edit { padding-block: 0px; }
::-webkit-datetime-edit-year-field { padding-block: 0px; }
::-webkit-datetime-edit-month-field { padding-block: 0px; }
::-webkit-datetime-edit-day-field { padding-block: 0px; }
::-webkit-datetime-edit-hour-field { padding-block: 0px; }
::-webkit-datetime-edit-minute-field { padding-block: 0px; }
::-webkit-datetime-edit-second-field { padding-block: 0px; }
::-webkit-datetime-edit-millisecond-field { padding-block: 0px; }
::-webkit-datetime-edit-meridiem-field { padding-block: 0px; }
::-webkit-calendar-picker-indicator { line-height: 1; }
button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; }
::file-selector-button { appearance: button; }
::-webkit-inner-spin-button { height: auto; }
::-webkit-outer-spin-button { height: auto; }
[hidden]:where(:not([hidden="until-found"])) { display: none !important; }
}
@layer components;
@layer utilities {
.relative { position: relative; }
.start { inset-inline-start: var(--spacing); }
.table { display: table; }
}
:root { --ink: #18201c; --green: #123f31; --lime: #c8e52d; --sand: #f2efe7; --line: #d7d7ce; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { color: var(--ink); background: rgb(251, 250, 246); margin: 0px; font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1180px, 100% - 48px); margin: auto; }
.topbar { border-bottom: 1px solid var(--line); z-index: 20; background: rgb(251, 250, 246); justify-content: space-between; align-items: center; height: 84px; padding: 0px max(24px, -590px + 50vw); display: flex; position: sticky; top: 0px; }
.brand { align-items: center; display: inline-flex; }
.brand img { width: 190px; height: auto; display: block; }
.topbar nav { gap: 32px; font-size: 14px; font-weight: 600; display: flex; }
.topbar nav a:hover { color: rgb(55, 107, 89); }
.navCta, .primary { background: var(--lime); padding: 14px 20px; font-size: 14px; font-weight: 800; }
.navCta { white-space: nowrap; }
.navCta b { margin-left: 18px; }
.hero { background: var(--green); color: rgb(255, 255, 255); grid-template-columns: 1.02fr 0.98fr; min-height: 690px; display: grid; }
.heroCopy { padding: 90px max(36px, -590px + 50vw) 55px; }
.eyebrow { letter-spacing: 2.3px; color: rgb(102, 129, 116); margin: 0px 0px 26px; font-size: 11px; font-weight: 900; }
.hero .eyebrow, .cta .eyebrow, .services .eyebrow { color: var(--lime); }
h1, h2 { letter-spacing: -2.8px; margin: 0px; font-family: Georgia, serif; font-weight: 400; line-height: 0.98; }
h1 { font-size: clamp(54px, 6.3vw, 94px); }
h1 em, h2 em { color: var(--lime); font-weight: 400; }
h2 { font-size: clamp(43px, 5vw, 68px); }
.lead { color: rgb(219, 227, 223); max-width: 590px; margin: 34px 0px; font-size: 19px; line-height: 1.65; }
.actions { align-items: center; gap: 25px; display: flex; }
.primary { color: rgb(21, 34, 24); gap: 30px; display: inline-flex; }
.primary span { font-size: 18px; }
.ghost { border-bottom: 1px solid rgb(120, 144, 135); padding: 13px 0px; font-size: 14px; font-weight: 700; }
.heroStats { border-top: 1px solid rgb(66, 104, 91); gap: 42px; margin-top: 70px; padding-top: 24px; display: flex; }
.heroStats div { flex-direction: column; display: flex; }
.heroStats strong { font-family: Georgia, serif; font-size: 27px; }
.heroStats span { color: rgb(148, 170, 162); margin-top: 5px; font-size: 11px; }
.heroVisual { background: linear-gradient(rgba(18, 63, 49, 0.04), rgba(18, 63, 49, 0.68)), url(//racgrup.com/images/construction-hero-professional.jpg) 50% center / cover no-repeat; min-height: 690px; position: relative; }
.visualBadge { text-align: center; background: rgba(18, 63, 49, 0.88); border-radius: 50%; place-content: center; width: 130px; height: 130px; display: grid; position: absolute; top: 30px; right: 30px; }
.visualBadge span { font-size: 25px; font-weight: 900; }
.visualBadge small { letter-spacing: 1.2px; margin-top: 4px; font-size: 7px; }
.projectCard { background: var(--lime); color: var(--ink); flex-direction: column; width: 310px; padding: 28px 34px; display: flex; position: absolute; bottom: 0px; left: 0px; }
.projectCard span { letter-spacing: 1.7px; font-size: 9px; font-weight: 900; }
.projectCard strong { margin: 14px 0px; font-family: Georgia, serif; font-size: 27px; }
.projectCard a { font-size: 12px; font-weight: 800; }
.trustLine { text-transform: uppercase; letter-spacing: 1.5px; border-bottom: 1px solid var(--line); justify-content: center; align-items: center; gap: 42px; min-height: 75px; font-size: 11px; font-weight: 900; display: flex; overflow: hidden; }
.trustLine i { color: rgb(139, 171, 34); font-size: 7px; }
.about { grid-template-columns: 1fr 1fr; gap: 100px; padding-block: 120px; display: grid; }
.aboutCopy { padding-top: 45px; }
.aboutCopy p, .sectionHead > p, .whyText { color: rgb(88, 97, 93); font-size: 18px; line-height: 1.7; }
.aboutCopy a { border-bottom: 1px solid rgb(119, 119, 119); gap: 50px; margin-top: 15px; padding: 16px 0px; font-size: 13px; font-weight: 800; display: inline-flex; }
.services { color: rgb(255, 255, 255); background: rgb(16, 47, 38); padding: 110px 0px; }
.sectionHead { justify-content: space-between; align-items: end; margin-bottom: 70px; display: flex; }
.sectionHead > p { color: rgb(170, 187, 181); max-width: 360px; }
.serviceGrid { border-top: 1px solid rgb(73, 102, 93); grid-template-columns: repeat(4, 1fr); display: grid; }
.serviceGrid article { border-right: 1px solid rgb(73, 102, 93); min-height: 310px; padding: 30px 25px 10px; }
.serviceGrid article:first-child { padding-left: 0px; }
.serviceGrid .no { color: var(--lime); font-size: 11px; }
.serviceGrid h3 { margin: 58px 0px 18px; font-family: Georgia, serif; font-size: 27px; }
.serviceGrid article p { color: rgb(171, 186, 181); font-size: 14px; line-height: 1.6; }
.serviceGrid article a { color: var(--lime); margin-top: 16px; font-size: 12px; font-weight: 800; display: inline-block; }
.products { grid-template-columns: 1fr 1fr; padding-block: 110px; display: grid; }
.productPanel { background: var(--lime); padding: 55px; }
.productPanel .eyebrow { color: rgb(56, 82, 33); }
.productPanel h2 em { color: var(--green); }
.productPanel > p:not(.eyebrow) { margin: 28px 0px 36px; line-height: 1.7; }
.primary.light { background: var(--green); color: rgb(255, 255, 255); }
.productList { background: var(--sand); padding: 35px 55px; display: grid; }
.productList span { border-bottom: 1px solid rgb(201, 200, 192); align-items: center; font-family: Georgia, serif; font-size: 21px; display: flex; }
.productList span::before { content: "+"; color: rgb(120, 146, 26); margin-right: 15px; font-family: Arial; }
.why { grid-template-columns: 1fr 1fr; gap: 100px; padding: 30px 0px 120px; display: grid; }
.why h2 em { color: rgb(120, 146, 26); }
.why ol { margin: 25px 0px 0px; padding: 0px; list-style: none; }
.why li { border-bottom: 1px solid var(--line); padding: 23px 5px; font-size: 18px; font-weight: 700; }
.why li span { color: rgb(124, 132, 127); margin-right: 35px; font-size: 10px; }
.cta { background: var(--green); color: rgb(255, 255, 255); padding: 100px 0px; }
.cta h2 { max-width: 850px; }
.ctaLinks { gap: 24px; flex-wrap: wrap; margin-top: 55px; display: flex; }
.ctaLinks a { border-bottom: 1px solid rgb(102, 128, 120); justify-content: space-between; flex: 1 1 280px; min-width: 280px; padding: 16px 0px; font-weight: 800; display: flex; }
.ctaLinks span { color: var(--lime); }
footer { color: rgb(202, 211, 207); background: rgb(11, 33, 26); padding-top: 70px; }
.footerGrid { grid-template-columns: 2fr 1fr 1fr; gap: 80px; display: grid; }
.brand.inverse img { filter: invert(); width: 180px; }
.footerGrid p { max-width: 330px; font-size: 14px; line-height: 1.7; }
.footerGrid > div { flex-direction: column; gap: 13px; font-size: 13px; display: flex; }
.footerGrid b { color: rgb(255, 255, 255); margin-bottom: 10px; }
.footerGrid address { font-style: normal; line-height: 1.6; }
.copyright { border-top: 1px solid rgb(41, 64, 57); justify-content: space-between; margin-top: 60px; padding: 24px 0px; font-size: 11px; display: flex; }
@media (max-width: 900px) {
.topbar nav { display: none; }
.hero { grid-template-columns: 1fr; }
.heroCopy { padding: 75px 24px 50px; }
.heroVisual { min-height: 420px; }
.trustLine { white-space: nowrap; justify-content: flex-start; gap: 24px; padding: 0px 24px; }
.about, .products, .why { grid-template-columns: 1fr; gap: 45px; }
.sectionHead { flex-direction: column; align-items: start; gap: 25px; }
.serviceGrid, .footerGrid { grid-template-columns: 1fr 1fr; }
.wrap { width: min(100% - 32px, 1180px); }
}
@media (max-width: 560px) {
.topbar { height: 72px; }
.brand img { width: 145px; }
.navCta { padding: 11px 13px; }
.navCta b { display: none; }
.hero { min-height: auto; }
.heroCopy { padding-top: 60px; }
.heroStats { justify-content: space-between; gap: 18px; }
.heroStats strong { font-size: 20px; }
.heroVisual { min-height: 360px; }
.projectCard { width: 260px; }
.about, .products, .services, .cta { padding-block: 75px; }
.serviceGrid { grid-template-columns: 1fr; }
.serviceGrid article { border-bottom: 1px solid rgb(73, 102, 93); border-right: 0px; min-height: auto; padding: 28px 0px; }
.serviceGrid h3 { margin-top: 28px; }
.productPanel, .productList { padding: 38px 28px; }
.productList span { min-height: 62px; }
.why { padding-bottom: 75px; }
.ctaLinks { flex-direction: column; gap: 15px; }
.ctaLinks a { min-width: 0px; }
.footerGrid { grid-template-columns: 1fr; }
.copyright { gap: 15px; }
.actions { flex-direction: column; align-items: flex-start; gap: 12px; }
}
.productList a { border-bottom: 1px solid rgb(201, 200, 192); align-items: center; font-family: Georgia, serif; font-size: 21px; transition: color 0.2s, padding-left 0.2s; display: flex; }
.productList a::before { content: "+"; color: rgb(120, 146, 26); margin-right: 15px; font-family: Arial; }
:is(.productList a:hover, .productList a:focus-visible) { color: var(--green); padding-left: 6px; }
@media (max-width: 560px) {
.productList a { min-height: 62px; }
}
.visualBadge { border: 1px solid rgba(200, 229, 45, 0.45); flex-direction: column; justify-content: center; align-items: center; width: 144px; height: 144px; display: flex; box-shadow: rgba(0, 0, 0, 0.18) 0px 12px 36px; }
.visualBadge img { filter: invert(); width: 106px; height: auto; margin-bottom: 7px; display: block; }
.visualBadge small { letter-spacing: 1.25px; color: rgb(255, 255, 255); font-size: 6.5px; }
.affiliates { background: var(--sand); padding: 110px 0px; }
.affiliateHead .eyebrow { color: rgb(101, 114, 88); }
.affiliateHead h2 em { color: rgb(120, 146, 26); }
.affiliateGrid { border-top: 1px solid rgb(196, 197, 186); grid-template-columns: repeat(4, 1fr); display: grid; }
.affiliateGrid article { border-bottom: 1px solid rgb(196, 197, 186); border-right: 1px solid rgb(196, 197, 186); min-height: 245px; padding: 26px 24px; }
.affiliateGrid article:nth-child(4n+1) { border-left: 1px solid rgb(196, 197, 186); }
.affiliateGrid article > div { justify-content: space-between; align-items: center; display: flex; }
.affiliateGrid article > div span { color: rgb(120, 146, 26); font-size: 11px; font-weight: 900; }
.affiliateGrid small { letter-spacing: 1px; text-transform: uppercase; color: rgb(104, 112, 108); font-size: 9px; }
.affiliateGrid h3 { margin: 45px 0px 15px; font-family: Georgia, serif; font-size: 26px; }
.affiliateGrid p { color: rgb(91, 99, 95); font-size: 13px; line-height: 1.6; }
.affiliateLink { border-bottom: 1px solid rgb(127, 132, 126); gap: 55px; margin-top: 38px; padding: 17px 0px; font-size: 13px; font-weight: 800; display: inline-flex; }
.subHero { background: var(--green); color: rgb(255, 255, 255); padding: 105px 0px; }
.subHero h1 { max-width: 980px; }
.subHero > div > p:last-of-type { color: rgb(219, 227, 223); max-width: 700px; margin: 35px 0px 0px; font-size: 19px; line-height: 1.7; }
.affiliateDetail { padding-block: 110px; }
.detailIntro { grid-template-columns: 0.8fr 1.1fr 1fr; align-items: start; gap: 55px; margin-bottom: 75px; display: grid; }
.detailIntro h2 em { color: rgb(120, 146, 26); }
.detailIntro > p:last-child { color: rgb(89, 99, 94); margin: 15px 0px; font-size: 17px; line-height: 1.7; }
.affiliateDetailGrid { border-top: 1px solid var(--line); grid-template-columns: repeat(2, 1fr); display: grid; }
.affiliateDetailGrid article { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 42px 40px; }
.affiliateDetailGrid article:nth-child(2n+1) { border-left: 1px solid var(--line); }
.affiliateDetailGrid span { color: rgb(120, 146, 26); font-size: 12px; font-weight: 900; }
.affiliateDetailGrid small { float: right; text-transform: uppercase; letter-spacing: 1px; color: rgb(116, 125, 120); }
.affiliateDetailGrid h2 { letter-spacing: -1.5px; margin: 45px 0px 18px; font-size: 37px; }
.affiliateDetailGrid p { color: rgb(93, 101, 97); line-height: 1.7; }
.affiliateDetailGrid a { color: rgb(54, 91, 77); margin-top: 20px; font-size: 12px; font-weight: 900; display: inline-block; }
@media (max-width: 900px) {
.affiliateGrid { grid-template-columns: repeat(2, 1fr); }
.affiliateGrid article:nth-child(4n+1) { border-left: 0px; }
.affiliateGrid article:nth-child(2n+1) { border-left: 1px solid rgb(196, 197, 186); }
.detailIntro, .affiliateDetailGrid { grid-template-columns: 1fr; }
.affiliateDetailGrid article { border-left: 1px solid var(--line); }
}
@media (max-width: 560px) {
.affiliates, .affiliateDetail { padding-block: 75px; }
.affiliateGrid { grid-template-columns: 1fr; }
.affiliateGrid article { min-height: 210px; border-left: 1px solid rgb(196, 197, 186) !important; }
.affiliateDetailGrid article { padding: 35px 24px; }
.subHero { padding: 75px 0px; }
.subHero h1 { font-size: 50px; }
}
.affiliateGrid .cardLink { color: rgb(54, 91, 77); margin-top: 14px; font-size: 11px; font-weight: 900; display: inline-block; }
.companyHero { padding-top: 55px; }
.companyHero h1 { max-width: 1050px; font-size: clamp(52px, 6.5vw, 92px); }
.companyHero h1 em { letter-spacing: -2px; margin-top: 12px; font-size: 0.62em; line-height: 1.1; display: inline-block; }
.crumb { color: rgb(157, 176, 169); letter-spacing: 0.7px; text-transform: uppercase; align-items: center; gap: 10px; margin-bottom: 55px; font-size: 10px; display: flex; }
.crumb b { color: rgb(255, 255, 255); }
.companyServices { padding-block: 110px; }
.companyServiceGrid { border-top: 1px solid var(--line); border-left: 1px solid var(--line); grid-template-columns: repeat(3, 1fr); display: grid; }
.companyServiceGrid article { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 245px; padding: 32px; }
.companyServiceGrid article span { color: rgb(120, 146, 26); font-size: 10px; font-weight: 900; }
.companyServiceGrid h3 { margin: 45px 0px 16px; font-family: Georgia, serif; font-size: 25px; }
.companyServiceGrid p { color: rgb(94, 102, 98); font-size: 14px; line-height: 1.65; }
.companyBenefits { background: var(--sand); padding: 105px 0px; }
.companyBenefits > .wrap { grid-template-columns: 1fr 1fr; gap: 100px; display: grid; }
.companyBenefits h2 em { color: rgb(120, 146, 26); }
.companyBenefits ul { margin: 0px; padding: 0px; list-style: none; }
.companyBenefits li { border-bottom: 1px solid rgb(201, 201, 191); align-items: center; padding: 24px 5px; font-size: 18px; font-weight: 800; display: flex; }
.companyBenefits li span { color: rgb(120, 146, 26); margin-right: 32px; font-size: 10px; }
@media (max-width: 900px) {
.companyServiceGrid { grid-template-columns: repeat(2, 1fr); }
.companyBenefits > .wrap { grid-template-columns: 1fr; gap: 45px; }
}
@media (max-width: 560px) {
.companyHero { padding-top: 40px; }
.companyHero h1 { font-size: 48px; }
.companyHero h1 em { font-size: 0.7em; }
.companyServices { padding-block: 75px; }
.companyServiceGrid { grid-template-columns: 1fr; }
.companyServiceGrid article { min-height: 210px; padding: 28px 24px; }
.companyBenefits { padding-block: 75px; }
.crumb { flex-wrap: wrap; margin-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
.projectsHome { background: rgb(251, 250, 246); padding: 110px 0px; }
.projectsHome .eyebrow { color: rgb(101, 114, 88); }
.projectsHome h2 em, .portfolioNote h2 em { color: rgb(120, 146, 26); }
.projectHomeGrid { border-top: 1px solid var(--line); border-left: 1px solid var(--line); grid-template-columns: repeat(4, 1fr); display: grid; }
.projectHomeGrid article { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 260px; padding: 30px 25px; }
.projectHomeGrid span, .projectAreaGrid > article > span, .processGrid > article > span { color: rgb(120, 146, 26); font-size: 11px; font-weight: 900; }
.projectHomeGrid h3 { margin: 55px 0px 18px; font-family: Georgia, serif; font-size: 27px; }
.projectHomeGrid p { color: rgb(93, 101, 97); font-size: 14px; line-height: 1.65; }
.projectsLink { border-bottom: 1px solid rgb(127, 132, 126); gap: 55px; margin-top: 38px; padding: 17px 0px; font-size: 13px; font-weight: 800; display: inline-flex; }
.projectHero { background: linear-gradient(110deg, rgb(18, 63, 49) 0%, rgb(18, 63, 49) 72%, rgb(28, 85, 66) 72%, rgb(28, 85, 66) 100%); }
.projectIndex { padding-block: 110px; }
.projectAreaGrid { border-top: 1px solid var(--line); border-left: 1px solid var(--line); grid-template-columns: repeat(2, 1fr); display: grid; }
.projectAreaGrid article { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 42px 40px; }
.projectAreaGrid h2 { letter-spacing: -1.5px; margin: 42px 0px 18px; font-size: 38px; }
.projectAreaGrid p { color: rgb(93, 101, 97); line-height: 1.7; }
.projectAreaGrid ul { margin: 25px 0px; padding: 0px; list-style: none; }
.projectAreaGrid li { border-top: 1px solid var(--line); padding: 12px 0px; font-size: 13px; }
.projectAreaGrid li::before { content: "+"; color: rgb(120, 146, 26); margin-right: 12px; font-weight: 900; }
.projectAreaGrid a { color: rgb(54, 91, 77); margin-top: 6px; font-size: 12px; font-weight: 900; display: inline-block; }
.projectAreaGrid .projectWhatsapp { background: var(--green); color: rgb(255, 255, 255); margin-top: 10px; padding: 13px 17px; transition: background 0.2s, color 0.2s; }
.projectAreaGrid .projectWhatsapp b { color: var(--lime); margin-left: 16px; }
:is(.projectAreaGrid .projectWhatsapp:hover, .projectAreaGrid .projectWhatsapp:focus-visible) { background: var(--lime); color: var(--ink); }
:is(.projectAreaGrid .projectWhatsapp:hover b, .projectAreaGrid .projectWhatsapp:focus-visible b) { color: var(--ink); }
.projectProcess { background: var(--sand); padding: 110px 0px; }
.projectProcess .sectionHead h2 em { color: rgb(120, 146, 26); }
.processGrid { border-top: 1px solid rgb(196, 197, 186); grid-template-columns: repeat(4, 1fr); display: grid; }
.processGrid article { border-bottom: 1px solid rgb(196, 197, 186); border-right: 1px solid rgb(196, 197, 186); min-height: 235px; padding: 30px 25px; }
.processGrid article:first-child { border-left: 1px solid rgb(196, 197, 186); }
.processGrid h3 { margin: 48px 0px 16px; font-family: Georgia, serif; font-size: 27px; }
.processGrid p { color: rgb(93, 101, 97); font-size: 14px; line-height: 1.65; }
.portfolioNote { grid-template-columns: 0.7fr 1.3fr; gap: 90px; padding-block: 110px; display: grid; }
.portfolioNote > div > p { color: rgb(89, 99, 94); max-width: 680px; margin: 28px 0px 35px; font-size: 17px; line-height: 1.75; }
@media (max-width: 900px) {
.projectHomeGrid, .processGrid { grid-template-columns: repeat(2, 1fr); }
.projectAreaGrid { grid-template-columns: 1fr; }
.portfolioNote { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 560px) {
.projectsHome, .projectIndex, .projectProcess, .portfolioNote { padding-block: 75px; }
.projectHomeGrid, .processGrid { grid-template-columns: 1fr; }
.projectHomeGrid article, .processGrid article { min-height: 210px; }
.projectAreaGrid article { padding: 35px 24px; }
.projectAreaGrid h2 { font-size: 33px; }
.projectHero { background: var(--green); }
}
.projectShowcase { margin-top: 48px; position: relative; }
.projectShowcase img { object-fit: cover; object-position: center 58%; width: 100%; height: 500px; display: block; }
.projectShowcase figcaption { background: var(--lime); letter-spacing: 0.5px; padding: 13px 18px; font-size: 11px; font-weight: 900; position: absolute; bottom: 24px; left: 28px; }
.blogHome { background: var(--sand); padding: 110px 0px; }
.blogHome .eyebrow, .blogIndex .eyebrow { color: rgb(101, 114, 88); }
.blogHome h2 em, .blogIndex h2 em, .relatedPosts h2 em { color: rgb(120, 146, 26); }
.blogHomeGrid, .blogGrid { grid-template-columns: repeat(3, 1fr); gap: 24px; display: grid; }
.blogHomeGrid article, .blogCard { background: rgb(251, 250, 246); border: 1px solid rgb(209, 210, 200); }
.blogImage { display: block; overflow: hidden; }
.blogImage img { object-fit: cover; width: 100%; height: 245px; transition: transform 0.35s; display: block; }
.blogImage:hover img { transform: scale(1.025); }
.blogHomeGrid article > div, .blogCardBody { padding: 26px; }
.blogHomeGrid article > div > span, .blogMeta span, .relatedGrid article > div > span { letter-spacing: 1.2px; text-transform: uppercase; color: rgb(120, 146, 26); font-size: 9px; font-weight: 900; }
.blogHomeGrid h3, .blogCard h2 { letter-spacing: -0.8px; margin: 20px 0px 14px; font-family: Georgia, serif; font-size: 25px; line-height: 1.12; }
.blogHomeGrid p, .blogCard p { color: rgb(93, 101, 97); font-size: 13px; line-height: 1.65; }
.blogRead { border-top: 1px solid var(--line); color: rgb(54, 91, 77); justify-content: space-between; align-items: center; margin-top: 22px; padding-top: 16px; font-size: 11px; font-weight: 900; display: flex; }
.blogRead b, .blogRead span { color: rgb(120, 146, 26); }
.blogHero { background: linear-gradient(90deg, rgba(18, 63, 49, 0.97) 0%, rgba(18, 63, 49, 0.84) 58%, rgba(18, 63, 49, 0.42) 100%), url(//racgrup.com/images/construction-hero.jpg) 50% 55% / cover no-repeat; }
.blogIndex { padding-block: 110px; }
.blogMeta { justify-content: space-between; align-items: center; gap: 12px; display: flex; }
.blogMeta time { color: rgb(109, 117, 111); font-size: 10px; }
.articlePage { padding: 80px 0px 110px; }
.articleHeader { max-width: 980px; }
.articleHeader .crumb { color: rgb(104, 114, 109); margin-bottom: 45px; }
.articleHeader .crumb b { color: var(--ink); }
.articleHeader h1 { max-width: 950px; font-size: clamp(48px, 6vw, 82px); }
.articleMeta { color: rgb(105, 113, 109); text-transform: uppercase; letter-spacing: 0.5px; align-items: center; gap: 14px; margin-top: 30px; font-size: 11px; display: flex; }
.articleImage { margin-top: 55px; }
.articleImage img { object-fit: cover; width: 100%; height: 600px; display: block; }
.articleImage figcaption { color: rgb(118, 125, 121); text-align: right; margin-top: 8px; font-size: 9px; }
.articleLayout { grid-template-columns: 260px minmax(0px, 760px); justify-content: center; gap: 85px; margin-top: 75px; display: grid; }
.articleLayout aside { border-top: 1px solid var(--line); flex-direction: column; align-self: start; display: flex; position: sticky; top: 110px; }
.articleLayout aside > span { letter-spacing: 1.4px; color: rgb(120, 146, 26); padding: 16px 0px; font-size: 9px; font-weight: 900; }
.articleLayout aside a { border-top: 1px solid var(--line); color: rgb(98, 106, 102); padding: 11px 0px; font-size: 11px; line-height: 1.5; }
.articleContent { color: rgb(69, 77, 73); font-size: 17px; line-height: 1.8; }
.articleLead { color: var(--ink); margin: 0px 0px 55px; font-family: Georgia, serif; font-size: 27px; line-height: 1.5; }
.articleContent section { margin-bottom: 52px; scroll-margin-top: 115px; }
.articleContent h2 { letter-spacing: -1.2px; margin-bottom: 22px; font-size: 37px; line-height: 1.12; }
.articleContent ul { margin: 24px 0px; padding-left: 0px; list-style: none; }
.articleContent li { border-top: 1px solid var(--line); padding: 12px 0px; }
.articleContent li::before { content: "+"; color: rgb(120, 146, 26); margin-right: 13px; font-weight: 900; }
.articleHelp { background: var(--lime); color: var(--ink); margin-top: 70px; padding: 40px; }
.articleHelp .eyebrow { color: rgb(65, 85, 29); }
.articleHelp h2 { margin-bottom: 30px; font-size: 36px; }
.articleHelp .primary { background: var(--green); color: rgb(255, 255, 255); }
.relatedPosts { background: var(--sand); padding: 100px 0px; }
.relatedPosts .sectionHead { align-items: end; }
.relatedGrid { grid-template-columns: repeat(2, 1fr); gap: 24px; display: grid; }
.relatedGrid article { background: rgb(251, 250, 246); grid-template-columns: 180px 1fr; display: grid; }
.relatedGrid img { object-fit: cover; width: 180px; height: 155px; }
.relatedGrid article > div { padding: 24px; }
.relatedGrid h3 { margin: 14px 0px; font-family: Georgia, serif; font-size: 21px; line-height: 1.2; }
.relatedPosts .projectsLink { margin-top: 0px; }
.topbar nav a[href="/blog"] { color: rgb(54, 91, 77); }
@media (max-width: 1120px) and (min-width: 901px) {
.topbar nav { gap: 16px; font-size: 12px; }
.brand img { width: 160px; }
.navCta { padding: 13px 15px; font-size: 12px; }
.navCta b { margin-left: 10px; }
}
@media (max-width: 900px) {
.blogHomeGrid, .blogGrid { grid-template-columns: repeat(2, 1fr); }
.articleLayout { grid-template-columns: 1fr; gap: 45px; }
.articleLayout aside { position: static; }
.articleImage img { height: 470px; }
.projectShowcase img { height: 400px; }
}
@media (max-width: 560px) {
.blogHome, .blogIndex, .articlePage, .relatedPosts { padding-block: 75px; }
.blogHomeGrid, .blogGrid, .relatedGrid { grid-template-columns: 1fr; }
.blogImage img { height: 230px; }
.articleHeader h1 { font-size: 46px; }
.articleImage { margin-top: 40px; }
.articleImage img { height: 300px; }
.articleLayout { margin-top: 45px; }
.articleLead { font-size: 22px; }
.articleContent h2 { font-size: 31px; }
.articleHelp { padding: 30px 24px; }
.relatedGrid article { grid-template-columns: 125px 1fr; }
.relatedGrid img { width: 125px; height: 145px; }
.projectShowcase { width: 100%; margin-top: 0px; }
.projectShowcase img { height: 320px; }
.projectShowcase figcaption { bottom: 16px; left: 16px; right: 16px; }
.navCta { font-size: 11px; }
}
.marketHero { background: var(--green); color: rgb(255, 255, 255); grid-template-columns: 1fr 1fr; min-height: 650px; display: grid; }
.marketHeroCopy { padding: 75px max(36px, -590px + 50vw) 70px; }
.marketHeroCopy .eyebrow { color: var(--lime); }
.marketHeroCopy h1 { font-size: clamp(54px, 6.2vw, 90px); }
.marketHeroCopy > p:not(.eyebrow) { color: rgb(219, 227, 223); max-width: 570px; margin: 32px 0px; font-size: 18px; line-height: 1.7; }
.marketHeroImage { background: linear-gradient(rgba(18, 63, 49, 0.04), rgba(18, 63, 49, 0.4)), url(//racgrup.com/images/construction-materials.jpg) 50% center / cover no-repeat; }
.wooConnection { letter-spacing: 0.6px; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.25); align-items: center; gap: 9px; width: max-content; margin: -3px 0px 28px; padding: 9px 12px; font-size: 10px; font-weight: 900; display: flex; }
.wooConnection i { background: rgb(216, 147, 70); border-radius: 50%; width: 7px; height: 7px; }
.wooConnection.isLive i { background: var(--lime); box-shadow: rgba(200, 229, 45, 0.13) 0px 0px 0px 4px; }
.wooToolbar { border-bottom: 1px solid var(--line); background: rgb(251, 250, 246); }
.wooToolbar > .wrap { justify-content: space-between; align-items: center; min-height: 66px; display: flex; }
.wooToolbar span { letter-spacing: 1.2px; text-transform: uppercase; color: rgb(102, 113, 108); font-size: 11px; font-weight: 900; }
.wooToolbar div div { gap: 12px; display: flex; }
.wooToolbar a { border: 1px solid var(--line); padding: 11px 15px; font-size: 11px; font-weight: 900; }
.customerGateway { padding-block: 110px; }
.gatewayGrid { border-top: 1px solid var(--line); border-left: 1px solid var(--line); grid-template-columns: repeat(2, 1fr); display: grid; }
.gatewayGrid article { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgb(251, 250, 246); padding: 45px; }
.gatewayGrid article.businessGateway { background: var(--green); color: rgb(255, 255, 255); }
.gatewayGrid article > span { color: rgb(120, 146, 26); font-family: Georgia, serif; font-size: 48px; }
.gatewayGrid .businessGateway > span { color: var(--lime); }
.gatewayGrid small { float: right; letter-spacing: 1.3px; color: rgb(115, 123, 119); font-size: 9px; }
.gatewayGrid .businessGateway small { color: rgb(170, 187, 181); }
.gatewayGrid h2 { letter-spacing: -1.5px; margin: 42px 0px 18px; font-size: 42px; }
.gatewayGrid p { color: rgb(91, 99, 95); font-size: 15px; line-height: 1.7; }
.gatewayGrid .businessGateway p { color: rgb(197, 208, 204); }
.gatewayGrid ul { margin: 28px 0px; padding: 0px; list-style: none; }
.gatewayGrid li { border-top: 1px solid var(--line); padding: 13px 0px; font-size: 13px; }
.gatewayGrid .businessGateway li { border-color: rgb(69, 103, 92); }
.gatewayGrid li::before { content: "+"; color: rgb(120, 146, 26); margin-right: 12px; font-weight: 900; }
.gatewayGrid .businessGateway li::before { color: var(--lime); }
.gatewayButton { background: var(--lime); width: 100%; color: var(--ink); justify-content: space-between; align-items: center; padding: 15px 18px; font-size: 11px; font-weight: 900; display: flex; }
.businessGateway .gatewayButton { background: var(--lime); color: var(--ink); }
.gatewaySecondary { color: rgb(220, 230, 226); border-bottom: 1px solid rgb(101, 129, 116); margin-top: 19px; padding-bottom: 7px; font-size: 11px; font-weight: 800; display: inline-block; }
.liveCatalog { color: rgb(255, 255, 255); background: rgb(16, 47, 38); padding: 110px 0px; }
.liveCatalog .eyebrow { color: var(--lime); }
.liveCatalog .sectionHead > p { color: rgb(170, 187, 181); }
.wooProductGrid { grid-template-columns: repeat(3, 1fr); gap: 22px; display: grid; }
.wooProductCard { color: var(--ink); background: rgb(251, 250, 246); }
.wooProductImage { background: rgb(238, 234, 225); place-items: center; height: 320px; display: grid; overflow: hidden; }
.wooProductImage img { object-fit: cover; width: 100%; height: 100%; }
.wooProductPlaceholder { color: rgb(120, 146, 26); font-family: Georgia, serif; font-size: 54px; }
.wooProductCard > div { padding: 24px; }
.wooProductMeta { color: rgb(120, 146, 26); text-transform: uppercase; letter-spacing: 1px; justify-content: space-between; font-size: 9px; font-weight: 900; display: flex; }
.wooProductMeta b { background: var(--lime); color: var(--ink); padding: 4px 6px; }
.wooProductCard h3 { margin: 20px 0px 13px; font-family: Georgia, serif; font-size: 25px; line-height: 1.15; }
.wooProductCard p { color: rgb(96, 105, 99); min-height: 38px; font-size: 12px; line-height: 1.6; }
.wooProductCard strong { margin: 22px 0px; font-size: 17px; display: block; }
.wooProductLink { border-top: 1px solid var(--line); color: rgb(54, 91, 77); justify-content: space-between; padding-top: 15px; font-size: 11px; font-weight: 900; display: flex; }
.wooEmpty { border: 1px solid rgb(73, 102, 93); grid-template-columns: 0.55fr 1.45fr 1.2fr 0.8fr; align-items: center; gap: 30px; padding: 40px; display: grid; }
.wooEmpty > span { color: var(--lime); letter-spacing: 1.4px; font-size: 9px; font-weight: 900; }
.wooEmpty h3 { margin: 0px; font-family: Georgia, serif; font-size: 27px; font-weight: 400; line-height: 1.2; }
.wooEmpty p { color: rgb(170, 187, 181); font-size: 13px; line-height: 1.6; }
.wooEmpty a { background: var(--lime); color: var(--ink); justify-content: space-between; padding: 15px 16px; font-size: 11px; font-weight: 900; display: flex; }
.marketCategories { background: var(--sand); padding: 110px 0px; }
.marketCategories .eyebrow { color: rgb(101, 114, 88); }
.marketCategories h2 em, .commerceStatus h2 em { color: rgb(120, 146, 26); }
.marketCategoryGrid { border-top: 1px solid rgb(196, 197, 186); border-left: 1px solid rgb(196, 197, 186); grid-template-columns: repeat(4, 1fr); display: grid; }
.marketCategoryGrid article { border-bottom: 1px solid rgb(196, 197, 186); border-right: 1px solid rgb(196, 197, 186); min-height: 225px; padding: 28px 24px; }
.marketCategoryGrid span { color: rgb(120, 146, 26); font-size: 10px; font-weight: 900; }
.marketCategoryGrid h3 { margin: 45px 0px 16px; font-family: Georgia, serif; font-size: 24px; line-height: 1.1; }
.marketCategoryGrid p { color: rgb(93, 101, 97); font-size: 13px; line-height: 1.6; }
.commerceStatus { grid-template-columns: 0.8fr 1.2fr; gap: 100px; padding-block: 110px; display: grid; }
.commerceChecklist { margin: 0px 0px 35px; padding: 0px; list-style: none; }
.commerceChecklist li { border-top: 1px solid var(--line); padding: 16px 4px; font-size: 14px; font-weight: 800; }
.commerceChecklist li::before { content: "○"; color: rgb(137, 144, 141); margin-right: 13px; }
.commerceChecklist li.done::before { content: "✓"; color: rgb(120, 146, 26); }
.topbar nav a[href="/yapi-market"] { color: rgb(54, 91, 77); }
@media (max-width: 900px) {
.marketHero { grid-template-columns: 1fr; }
.marketHeroImage { min-height: 430px; }
.gatewayGrid { grid-template-columns: 1fr; }
.wooProductGrid { grid-template-columns: repeat(2, 1fr); }
.wooEmpty { grid-template-columns: 1fr 1fr; }
.marketCategoryGrid { grid-template-columns: repeat(2, 1fr); }
.commerceStatus { grid-template-columns: 1fr; gap: 35px; }
}
@media (max-width: 560px) {
.marketHero { min-height: auto; }
.marketHeroCopy { padding: 70px 24px; }
.marketHeroImage { min-height: 330px; }
.wooToolbar > .wrap { flex-direction: column; align-items: flex-start; gap: 10px; padding-block: 14px; }
.customerGateway, .liveCatalog, .marketCategories, .commerceStatus { padding-block: 75px; }
.gatewayGrid article { padding: 35px 24px; }
.wooProductGrid, .wooEmpty { grid-template-columns: 1fr; }
.wooProductImage { height: 280px; }
.wooEmpty { padding: 28px 24px; }
.marketCategoryGrid { grid-template-columns: 1fr; }
.marketCategoryGrid article { min-height: 190px; }
}
.relatedServices { padding-block: 0px 110px; }
.relatedServices > .eyebrow { margin-bottom: 22px; }
.relatedServiceGrid { border-top: 1px solid var(--line); border-left: 1px solid var(--line); grid-template-columns: repeat(3, 1fr); display: grid; }
.relatedServiceGrid a { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); flex-direction: column; min-height: 220px; padding: 30px; display: flex; }
.relatedServiceGrid span { color: rgb(120, 146, 26); font-size: 10px; font-weight: 900; }
.relatedServiceGrid strong { margin: 38px 0px 14px; font-family: Georgia, serif; font-size: 28px; }
.relatedServiceGrid p { color: rgb(93, 101, 97); font-size: 13px; line-height: 1.65; }
.relatedServiceGrid b { color: rgb(54, 91, 77); margin-top: auto; font-size: 11px; }
@media (max-width: 760px) {
.relatedServices { padding-bottom: 75px; }
.relatedServiceGrid { grid-template-columns: 1fr; }
.relatedServiceGrid a { min-height: 190px; }
}
.dealerHero { background: linear-gradient(90deg, rgba(18, 63, 49, 0.98), rgba(18, 63, 49, 0.82)), url(//racgrup.com/images/construction-materials.jpg) 50% center / cover no-repeat; }
.dealerIntro { grid-template-columns: 0.8fr 1.2fr; gap: 100px; padding-block: 110px; display: grid; }
.dealerIntro h2 em, .dealerProcess h2 em { color: rgb(120, 146, 26); }
.dealerIntro > div:last-child > p { color: rgb(88, 97, 93); margin: 0px 0px 25px; font-size: 18px; line-height: 1.75; }
.dealerIntro ul { margin: 0px; padding: 0px; list-style: none; }
.dealerIntro li { border-top: 1px solid var(--line); padding: 17px 4px; font-size: 14px; font-weight: 800; }
.dealerIntro li::before { content: "+"; color: rgb(120, 146, 26); margin-right: 13px; font-weight: 900; }
.dealerDocuments { background: var(--sand); padding: 110px 0px; }
.dealerDocuments .eyebrow { color: rgb(101, 114, 88); }
.dealerDocuments h2 em { color: rgb(120, 146, 26); }
.dealerDocumentGrid { border-top: 1px solid rgb(196, 197, 186); border-left: 1px solid rgb(196, 197, 186); grid-template-columns: repeat(4, 1fr); display: grid; }
.dealerDocumentGrid article { border-bottom: 1px solid rgb(196, 197, 186); border-right: 1px solid rgb(196, 197, 186); min-height: 220px; padding: 28px 24px; }
.dealerDocumentGrid span { color: rgb(120, 146, 26); font-size: 10px; font-weight: 900; }
.dealerDocumentGrid h3 { margin: 42px 0px 15px; font-family: Georgia, serif; font-size: 23px; line-height: 1.15; }
.dealerDocumentGrid p { color: rgb(93, 101, 97); font-size: 13px; line-height: 1.6; }
.documentSecurity { background: var(--green); color: rgb(255, 255, 255); grid-template-columns: 0.3fr 1.7fr; gap: 35px; margin-top: 32px; padding: 28px 32px; display: grid; }
.documentSecurity b { color: var(--lime); letter-spacing: 1px; text-transform: uppercase; font-size: 11px; }
.documentSecurity p { color: rgb(200, 212, 207); margin: 0px; font-size: 13px; line-height: 1.65; }
.dealerProcess { padding-block: 110px; }
.dealerCta > div > p:not(.eyebrow) { color: rgb(190, 208, 201); max-width: 760px; margin: 30px 0px 0px; line-height: 1.7; }
.topbar nav a[href="/bayilik-basvurusu"] { color: rgb(54, 91, 77); }
@media (max-width: 900px) {
.dealerIntro { grid-template-columns: 1fr; gap: 35px; }
.dealerDocumentGrid { grid-template-columns: repeat(2, 1fr); }
.documentSecurity { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.dealerIntro, .dealerDocuments, .dealerProcess { padding-block: 75px; }
.dealerDocumentGrid { grid-template-columns: 1fr; }
.dealerDocumentGrid article { min-height: 190px; }
.documentSecurity { padding: 25px 22px; }
}
.dealerFormSection { background: rgb(251, 250, 246); padding: 110px 0px; scroll-margin-top: 84px; }
.dealerApplicationForm { border: 1px solid var(--line); background: rgb(255, 255, 255); padding: 45px; }
.dealerFormGrid { grid-template-columns: repeat(2, 1fr); gap: 24px; display: grid; }
.dealerApplicationForm label { color: rgb(78, 89, 84); flex-direction: column; gap: 9px; font-size: 12px; font-weight: 900; display: flex; }
.dealerApplicationForm label > b, .dealerUploads label b { color: rgb(120, 146, 26); }
.dealerApplicationForm input:not([type="checkbox"]):not([type="file"]), .dealerApplicationForm textarea { width: 100%; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; color: var(--ink); background: rgb(251, 250, 246); border: 1px solid rgb(207, 210, 202); outline: none; padding: 14px 15px; font-size: 14px; }
.dealerApplicationForm input:focus, .dealerApplicationForm textarea:focus { border-color: rgb(120, 146, 26); box-shadow: rgba(120, 146, 26, 0.1) 0px 0px 0px 3px; }
.dealerFullField { margin-top: 24px; }
.dealerUploads { border: 0px; margin: 35px 0px 0px; padding: 0px; }
.dealerUploads legend { margin-bottom: 10px; font-family: Georgia, serif; font-size: 29px; }
.dealerUploads > p { color: rgb(102, 112, 107); margin: 0px 0px 18px; font-size: 13px; }
.dealerUploads > label { border-top: 1px solid var(--line); grid-template-columns: 1.2fr 0.8fr; align-items: center; padding: 18px 4px; display: grid; }
.dealerUploads label span { flex-direction: column; gap: 6px; display: flex; }
.dealerUploads small { color: rgb(106, 115, 111); font-weight: 400; line-height: 1.5; }
.dealerUploads input[type="file"] { font-size: 12px; }
.dealerConsent { grid-template-columns: 20px 1fr; align-items: start; gap: 12px !important; margin: 28px 0px !important; font-weight: 500 !important; line-height: 1.6 !important; display: grid !important; }
.dealerConsent input { accent-color: rgb(120, 146, 26); width: 17px; height: 17px; margin-top: 3px; }
.dealerSubmit { background: var(--lime); width: 100%; color: var(--ink); cursor: pointer; border: 0px; justify-content: space-between; padding: 18px 21px; font-weight: 900; display: flex; }
.dealerSubmit:disabled { opacity: 0.65; cursor: wait; }
.dealerFormMessage { min-height: 22px; margin: 18px 0px 0px; font-size: 13px; font-weight: 800; }
.dealerFormMessage.success { color: rgb(55, 107, 89); }
.dealerFormMessage.error { color: rgb(164, 63, 53); }
@media (max-width: 700px) {
.dealerFormSection { padding: 75px 0px; }
.dealerApplicationForm { padding: 30px 22px; }
.dealerFormGrid { grid-template-columns: 1fr; }
.dealerUploads > label { grid-template-columns: 1fr; gap: 15px; }
}
.topbar nav a[href="/yapi-market"] { background: var(--green); white-space: nowrap; align-items: center; gap: 7px; margin-block: -10px; padding: 10px 13px; font-size: 12px; display: inline-flex; color: rgb(255, 255, 255) !important; }
.topbar nav a[href="/yapi-market"]::before { content: "MAĞAZA"; color: var(--lime); letter-spacing: 1.1px; font-size: 7px; font-weight: 900; }
.topbar nav a[href="/yapi-market"]::after { content: "↗"; color: var(--lime); font-size: 13px; }
:is(.topbar nav a[href="/yapi-market"]:hover, .topbar nav a[href="/yapi-market"]:focus-visible) { background: rgb(27, 88, 69); color: rgb(255, 255, 255) !important; }
.marketCategoryGrid > a { border-bottom: 1px solid rgb(196, 197, 186); border-right: 1px solid rgb(196, 197, 186); min-height: 225px; padding: 28px 24px; transition: background 0.2s, color 0.2s; }
:is(.marketCategoryGrid > a:hover, .marketCategoryGrid > a:focus-visible) { background: var(--green); color: rgb(255, 255, 255); }
:is(.marketCategoryGrid > a:hover span, .marketCategoryGrid > a:focus-visible span, .marketCategoryGrid > a:hover b, .marketCategoryGrid > a:focus-visible b) { color: var(--lime); }
:is(.marketCategoryGrid > a:hover p, .marketCategoryGrid > a:focus-visible p) { color: rgb(200, 212, 207); }
.marketCategoryGrid > a b { color: rgb(54, 91, 77); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 18px; font-size: 10px; display: block; }
@media (max-width: 560px) {
.marketCategoryGrid > a { min-height: 190px; }
}
.googleReviews { background: var(--sand); padding: 110px 0px; }
.googleReviews .eyebrow { color: rgb(101, 114, 88); }
.googleReviews h2 em { color: rgb(120, 146, 26); }
.reviewsHead { grid-template-columns: 1fr 310px; align-items: end; gap: 80px; margin-bottom: 58px; display: grid; }
.googleRating { background: var(--green); color: rgb(255, 255, 255); grid-template-columns: 1fr auto; align-items: center; gap: 7px 18px; padding: 28px 30px; display: grid; }
:is(.googleRating:hover, .googleRating:focus-visible) { background: rgb(25, 81, 63); }
.googleWordmark { font-size: 12px; font-weight: 800; }
.googleWordmark b { color: var(--lime); margin-right: 5px; font-size: 19px; }
.googleRating strong { grid-area: 1 / 2 / 3; font-family: Georgia, serif; font-size: 43px; }
.reviewStars { color: var(--lime); letter-spacing: 2px; font-size: 14px; }
.googleRating small { color: rgb(185, 203, 196); text-transform: uppercase; letter-spacing: 1px; grid-column: 1 / 3; margin-top: 5px; font-size: 10px; }
.reviewGrid { border-top: 1px solid rgb(196, 197, 186); border-left: 1px solid rgb(196, 197, 186); grid-template-columns: repeat(3, 1fr); display: grid; }
.reviewGrid article { background: rgb(251, 250, 246); border-bottom: 1px solid rgb(196, 197, 186); border-right: 1px solid rgb(196, 197, 186); flex-direction: column; min-height: 265px; padding: 30px; display: flex; }
.reviewCardTop { justify-content: space-between; align-items: center; gap: 15px; display: flex; }
.reviewCardTop small { text-transform: uppercase; letter-spacing: 1px; color: rgb(118, 126, 121); font-size: 9px; }
.reviewGrid blockquote { flex: 1 1 0%; margin: 44px 0px 35px; font-family: Georgia, serif; font-size: 25px; line-height: 1.3; }
.reviewGrid footer { color: var(--ink); background: 0px 0px; align-items: center; gap: 12px; padding: 0px; display: flex; }
.reviewGrid footer > span { background: var(--green); width: 36px; height: 36px; color: var(--lime); border-radius: 50%; place-items: center; font-weight: 900; display: grid; }
.reviewGrid footer div { flex-direction: column; gap: 3px; display: flex; }
.reviewGrid footer strong { font-size: 12px; }
.reviewGrid footer small { color: rgb(116, 125, 120); text-transform: uppercase; letter-spacing: 0.6px; font-size: 9px; }
.reviewsLink { border-bottom: 1px solid rgb(127, 132, 126); gap: 60px; margin-top: 35px; padding: 17px 0px; font-size: 13px; font-weight: 800; display: inline-flex; }
.reviewsLink span { color: rgb(120, 146, 26); }
.googleReviews { scroll-margin-top: 84px; }
@media (max-width: 900px) {
.reviewsHead { grid-template-columns: 1fr; gap: 35px; }
.googleRating { max-width: 360px; }
.reviewGrid { grid-template-columns: 1fr 1fr; }
.reviewGrid article:last-child { grid-column: 1 / 3; }
}
@media (max-width: 560px) {
.googleReviews { padding: 75px 0px; }
.reviewGrid { grid-template-columns: 1fr; }
.reviewGrid article:last-child { grid-column: auto; }
.reviewGrid article { min-height: 230px; padding: 25px 22px; }
.reviewGrid blockquote { margin-top: 35px; font-size: 23px; }
.googleRating { width: 100%; }
}
.seoHero { background: linear-gradient(90deg, rgba(18, 63, 49, 0.99), rgba(18, 63, 49, 0.9)), url(//racgrup.com/images/construction-hero-professional.jpg) 50% center / cover no-repeat; }
.seoHero h1 { max-width: 1050px; font-size: clamp(51px, 6.5vw, 88px); }
.seoHero h1 em { margin-top: 12px; font-size: 0.7em; line-height: 1.1; display: inline-block; }
.seoHero > div > p:last-child { max-width: 810px; }
.seoRegionIndex, .regionServices { padding-block: 110px; }
.seoRegionCards { border-left: 1px solid var(--line); border-top: 1px solid var(--line); grid-template-columns: repeat(3, 1fr); display: grid; }
.seoRegionCards > a { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); flex-direction: column; min-height: 310px; padding: 35px 30px; transition: background 0.2s, color 0.2s; display: flex; }
:is(.seoRegionCards > a:hover, .seoRegionCards > a:focus-visible) { background: var(--green); color: rgb(255, 255, 255); }
.seoRegionCards span, .regionServiceGrid span, .fieldNoteGrid span { color: rgb(120, 146, 26); font-size: 10px; font-weight: 900; }
.seoRegionCards h2 { margin: 52px 0px 18px; font-size: 46px; }
.seoRegionCards p { color: rgb(93, 101, 97); line-height: 1.65; }
.seoRegionCards > a:hover p { color: rgb(199, 212, 207); }
.seoRegionCards small { text-transform: uppercase; letter-spacing: 1px; color: rgb(122, 130, 126); margin-top: auto; font-size: 9px; }
.seoRegionCards b { color: rgb(54, 91, 77); margin-top: 20px; font-size: 11px; }
.seoRegionCards > a:hover b { color: var(--lime); }
.regionServiceGrid { border-left: 1px solid var(--line); border-top: 1px solid var(--line); grid-template-columns: repeat(3, 1fr); display: grid; }
.regionServiceGrid > a { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); flex-direction: column; min-height: 300px; padding: 32px 28px; display: flex; }
.regionServiceGrid h3, .fieldNoteGrid h3 { margin: 48px 0px 17px; font-family: Georgia, serif; font-size: 27px; line-height: 1.15; }
.regionServiceGrid p, .fieldNoteGrid p { color: rgb(93, 101, 97); font-size: 13px; line-height: 1.7; }
.regionServiceGrid b { color: rgb(54, 91, 77); margin-top: auto; font-size: 11px; }
.regionField { background: var(--green); color: rgb(255, 255, 255); padding: 110px 0px; }
.regionField .eyebrow { color: var(--lime); }
.fieldNoteGrid { border-top: 1px solid rgb(73, 102, 93); grid-template-columns: repeat(3, 1fr); display: grid; }
.fieldNoteGrid article { border-right: 1px solid rgb(73, 102, 93); min-height: 260px; padding: 32px 30px; }
.fieldNoteGrid article:first-child { padding-left: 0px; }
.fieldNoteGrid h3 { color: rgb(255, 255, 255); }
.fieldNoteGrid p { color: rgb(171, 186, 181); }
.districtCoverage { grid-template-columns: 0.8fr 1.2fr; gap: 100px; padding-block: 110px; display: grid; }
.districtCoverage h2 em { color: rgb(120, 146, 26); }
.districtCoverage > div:first-child > p:last-child { color: rgb(89, 99, 94); font-size: 16px; line-height: 1.7; }
.districtTags { flex-wrap: wrap; align-content: flex-start; gap: 10px; display: flex; }
.districtTags span { border: 1px solid var(--line); background: var(--sand); padding: 13px 16px; font-size: 12px; font-weight: 800; }
.regionFaq { background: var(--sand); padding: 110px 0px; }
.regionFaq > .wrap { grid-template-columns: 0.8fr 1.2fr; gap: 100px; display: grid; }
.regionFaq h2 em { color: rgb(120, 146, 26); }
.regionFaq details { border-top: 1px solid rgb(201, 201, 191); padding: 0px; }
.regionFaq summary { cursor: pointer; justify-content: space-between; gap: 20px; padding: 22px 4px; font-size: 15px; font-weight: 800; list-style: none; display: flex; }
.regionFaq summary::-webkit-details-marker { display: none; }
.regionFaq summary span { color: rgb(120, 146, 26); font-size: 19px; }
.regionFaq details[open] summary span { transform: rotate(45deg); }
.regionFaq details p { color: rgb(91, 100, 96); margin: 0px; padding: 0px 35px 22px 4px; font-size: 14px; line-height: 1.7; }
.serviceSeoHero h1 em { max-width: 970px; }
.serviceFeatureImage { margin-top: 80px; }
.serviceFeatureImage img { object-fit: cover; width: 100%; height: 560px; display: block; }
.serviceFeatureImage figcaption { color: rgb(116, 125, 120); text-align: right; margin-top: 8px; font-size: 9px; }
.serviceArticle { grid-template-columns: 260px minmax(0px, 760px); justify-content: center; gap: 85px; padding-block: 110px; display: grid; }
.serviceArticle aside { border-top: 1px solid var(--line); flex-direction: column; align-self: start; display: flex; position: sticky; top: 110px; }
.serviceArticle aside > span { letter-spacing: 1.4px; color: rgb(120, 146, 26); padding: 16px 0px; font-size: 9px; font-weight: 900; }
.serviceArticle aside a { border-top: 1px solid var(--line); color: rgb(98, 106, 102); padding: 11px 0px; font-size: 11px; line-height: 1.5; }
.serviceArticleContent { color: rgb(69, 77, 73); font-size: 17px; line-height: 1.8; }
.serviceArticleContent section { margin-bottom: 58px; scroll-margin-top: 115px; }
.serviceArticleContent h2 { letter-spacing: -1.2px; margin-bottom: 24px; font-size: 39px; line-height: 1.12; }
.serviceArticleContent ul { margin: 25px 0px; padding: 0px; list-style: none; }
.serviceArticleContent li { border-top: 1px solid var(--line); padding: 13px 0px; }
.serviceArticleContent li::before { content: "+"; color: rgb(120, 146, 26); margin-right: 13px; font-weight: 900; }
.serviceRegionsBlock { background: var(--green); color: rgb(255, 255, 255); padding: 110px 0px; }
.serviceRegionsBlock .eyebrow { color: var(--lime); }
.serviceRegionLinks { border-top: 1px solid rgb(73, 102, 93); grid-template-columns: repeat(3, 1fr); display: grid; }
.serviceRegionLinks a { border-right: 1px solid rgb(73, 102, 93); flex-direction: column; min-height: 250px; padding: 32px 28px 28px; display: flex; }
.serviceRegionLinks a:first-child { padding-left: 0px; }
.serviceRegionLinks h3 { margin: 25px 0px; font-family: Georgia, serif; font-size: 35px; }
.serviceRegionLinks p { color: rgb(171, 186, 181); font-size: 12px; line-height: 1.7; }
.serviceRegionLinks b { color: var(--lime); margin-top: auto; font-size: 10px; }
.serviceFaq { background: rgb(251, 250, 246); }
@media (max-width: 900px) {
.seoRegionCards, .regionServiceGrid, .fieldNoteGrid, .serviceRegionLinks { grid-template-columns: 1fr 1fr; }
.seoRegionCards > a:last-child, .regionServiceGrid > a:last-child, .fieldNoteGrid article:last-child, .serviceRegionLinks a:last-child { grid-column: 1 / 3; }
.districtCoverage, .regionFaq > .wrap, .serviceArticle { grid-template-columns: 1fr; gap: 45px; }
.serviceArticle aside { position: static; }
.fieldNoteGrid article:first-child, .serviceRegionLinks a:first-child { padding-left: 28px; }
.serviceFeatureImage img { height: 440px; }
}
@media (max-width: 560px) {
.seoRegionIndex, .regionServices, .regionField, .districtCoverage, .regionFaq, .serviceArticle, .serviceRegionsBlock { padding-block: 75px; }
.seoRegionCards, .regionServiceGrid, .fieldNoteGrid, .serviceRegionLinks { grid-template-columns: 1fr; }
.seoRegionCards > a:last-child, .regionServiceGrid > a:last-child, .fieldNoteGrid article:last-child, .serviceRegionLinks a:last-child { grid-column: auto; }
.seoRegionCards > a, .regionServiceGrid > a { min-height: 240px; }
.fieldNoteGrid article, .serviceRegionLinks a { border-bottom: 1px solid rgb(73, 102, 93); border-right: 0px; min-height: 220px; }
.serviceFeatureImage { margin-top: 50px; }
.serviceFeatureImage img { height: 310px; }
.serviceArticleContent { font-size: 16px; }
.serviceArticleContent h2 { font-size: 33px; }
}
.articleRelatedLinks { border-top: 1px solid var(--line); flex-direction: column; margin: 65px 0px 0px; display: flex; }
.articleRelatedLinks > span { letter-spacing: 1.4px; color: rgb(120, 146, 26); padding: 16px 0px; font-size: 9px; font-weight: 900; }
.articleRelatedLinks a { border-top: 1px solid var(--line); color: rgb(54, 91, 77); justify-content: space-between; gap: 20px; padding: 14px 4px; font-size: 13px; font-weight: 800; display: flex; }
.articleRelatedLinks a:hover, .articleRelatedLinks b { color: rgb(120, 146, 26); }
.articleRelatedLinks a:focus-visible { color: rgb(120, 146, 26); }
.serviceGuideLink { background: var(--lime); color: var(--ink); grid-template-columns: 1fr auto; align-items: center; gap: 8px 25px; margin-top: 35px; padding: 24px 27px; display: grid; }
.serviceGuideLink span { letter-spacing: 1.2px; color: rgb(82, 100, 31); font-size: 9px; font-weight: 900; }
.serviceGuideLink strong { grid-column: 1; font-family: Georgia, serif; font-size: 25px; }
.serviceGuideLink b { grid-area: 1 / 2 / 3; font-size: 22px; }
:is(.serviceGuideLink:hover, .serviceGuideLink:focus-visible) { background: rgb(211, 237, 69); }
.mobileMenu { display: none; }
.footerGrid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 50px; }
:is(.footerGrid a:hover, .footerGrid a:focus-visible) { color: var(--lime); }
.corporateHero { background: linear-gradient(90deg, rgba(18, 63, 49, 0.98), rgba(18, 63, 49, 0.78)), url(//racgrup.com/images/construction-workers.jpg) 50% 48% / cover no-repeat; }
.corporateIntro { grid-template-columns: 0.85fr 1.15fr; gap: 100px; padding-block: 110px; display: grid; }
.corporateIntro h2 em, .corporateModel h2 em, .regionalProof h2 em { color: rgb(120, 146, 26); }
.corporateIntro > div:last-child p { color: rgb(83, 93, 88); margin: 0px 0px 20px; font-size: 17px; line-height: 1.8; }
.corporateIntro > div:last-child a { color: rgb(54, 91, 77); border-bottom: 1px solid rgb(119, 119, 119); gap: 60px; margin-top: 10px; padding: 16px 0px; font-size: 13px; font-weight: 900; display: inline-flex; }
.corporatePrinciples { background: var(--green); color: rgb(255, 255, 255); padding: 110px 0px; }
.corporatePrinciples .eyebrow { color: var(--lime); }
.corporatePrincipleGrid { border-top: 1px solid rgb(73, 102, 93); grid-template-columns: repeat(4, 1fr); display: grid; }
.corporatePrincipleGrid article { border-right: 1px solid rgb(73, 102, 93); min-height: 285px; padding: 30px 26px; }
.corporatePrincipleGrid article:first-child { padding-left: 0px; }
.corporatePrincipleGrid span { color: var(--lime); font-size: 10px; font-weight: 900; }
.corporatePrincipleGrid h3 { margin: 55px 0px 18px; font-family: Georgia, serif; font-size: 28px; }
.corporatePrincipleGrid p { color: rgb(171, 186, 181); font-size: 13px; line-height: 1.7; }
.corporateModel { grid-template-columns: 0.85fr 1.15fr; gap: 100px; padding-block: 110px; display: grid; }
.corporateModel > div > p:last-child { color: rgb(89, 99, 94); max-width: 510px; margin-top: 30px; font-size: 16px; line-height: 1.75; }
.corporateModel ol { margin: 0px; padding: 0px; list-style: none; }
.corporateModel li { border-top: 1px solid var(--line); grid-template-columns: 70px 1fr; align-items: center; padding: 22px 4px; display: grid; }
.corporateModel li:last-child { border-bottom: 1px solid var(--line); }
.corporateModel li span { color: rgb(120, 146, 26); font-size: 10px; font-weight: 900; }
.corporateModel li strong { font-family: Georgia, serif; font-size: 23px; font-weight: 400; }
.regionalProof { background: var(--sand); padding: 110px 0px; }
.regionalProof > .wrap { grid-template-columns: 0.8fr 1.2fr; gap: 100px; display: grid; }
.regionalProofLinks { border-top: 1px solid rgb(196, 197, 186); border-left: 1px solid rgb(196, 197, 186); grid-template-columns: repeat(3, 1fr); display: grid; }
.regionalProofLinks a { border-bottom: 1px solid rgb(196, 197, 186); border-right: 1px solid rgb(196, 197, 186); flex-direction: column; min-height: 245px; padding: 28px 24px; display: flex; }
.regionalProofLinks span { color: rgb(120, 146, 26); font-size: 10px; font-weight: 900; }
.regionalProofLinks strong { margin: 55px 0px 20px; font-family: Georgia, serif; font-size: 31px; font-weight: 400; }
.regionalProofLinks b { color: rgb(54, 91, 77); margin-top: auto; font-size: 10px; }
.contactHero { background: linear-gradient(90deg, rgba(18, 63, 49, 0.98), rgba(18, 63, 49, 0.76)), url(//racgrup.com/images/construction-hero-professional.jpg) 50% center / cover no-repeat; }
.contactOptions { padding-block: 110px; }
.contactOptionGrid { border-top: 1px solid var(--line); border-left: 1px solid var(--line); grid-template-columns: repeat(3, 1fr); display: grid; }
.contactOptionGrid article { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); flex-direction: column; min-height: 285px; padding: 30px 28px; display: flex; }
.contactOptionGrid span { color: rgb(120, 146, 26); font-size: 10px; font-weight: 900; }
.contactOptionGrid h3 { margin: 50px 0px 18px; font-family: Georgia, serif; font-size: 29px; }
.contactOptionGrid p { color: rgb(91, 100, 96); font-size: 13px; line-height: 1.7; }
.contactOptionGrid a { color: rgb(54, 91, 77); margin-top: auto; font-size: 11px; font-weight: 900; }
.contactDirect { background: var(--green); color: rgb(255, 255, 255); padding: 110px 0px; }
.contactDirect > .wrap { grid-template-columns: 0.7fr 1.3fr; gap: 100px; display: grid; }
.contactDirect .eyebrow { color: var(--lime); }
.contactDirectGrid { border-top: 1px solid rgb(73, 102, 93); display: grid; }
.contactDirectGrid a { border-bottom: 1px solid rgb(73, 102, 93); grid-template-columns: 100px 1fr auto; align-items: center; gap: 25px; padding: 25px 4px; display: grid; }
.contactDirectGrid span { letter-spacing: 1px; color: var(--lime); font-size: 9px; font-weight: 900; }
.contactDirectGrid strong { font-size: 15px; line-height: 1.5; }
.contactDirectGrid b { color: var(--lime); font-size: 10px; }
.contactChecklist { grid-template-columns: 0.8fr 1.2fr; gap: 100px; padding-block: 110px; display: grid; }
.contactChecklist h2 em { color: rgb(120, 146, 26); }
.contactChecklist ul { margin: 0px; padding: 0px; list-style: none; }
.contactChecklist li { border-top: 1px solid var(--line); padding: 20px 4px; font-size: 15px; font-weight: 800; }
.contactChecklist li:last-child { border-bottom: 1px solid var(--line); }
.contactChecklist li::before { content: "+"; color: rgb(120, 146, 26); margin-right: 14px; font-weight: 900; }
@media (max-width: 900px) {
.topbar > .desktopNav { display: none; }
.mobileMenu { margin-left: 12px; display: block; position: relative; }
.mobileMenu summary { cursor: pointer; text-transform: uppercase; align-items: center; gap: 8px; font-size: 11px; font-weight: 900; list-style: none; display: flex; }
.mobileMenu summary::-webkit-details-marker { display: none; }
.mobileMenu summary b { color: rgb(120, 146, 26); font-size: 18px; transition: transform 0.2s; }
.mobileMenu[open] summary b { transform: rotate(45deg); }
.mobileMenu nav { border: 1px solid var(--line); background: rgb(251, 250, 246); width: min(330px, -32px + 100vw); padding: 10px; position: absolute; top: 42px; right: 0px; box-shadow: rgba(13, 39, 31, 0.18) 0px 18px 45px; gap: 0px !important; display: grid !important; }
.mobileMenu nav a { border-bottom: 1px solid var(--line); justify-content: space-between; align-items: center; color: var(--ink) !important; background: 0px 0px !important; margin: 0px !important; padding: 13px 12px !important; font-size: 12px !important; display: flex !important; }
.mobileMenu nav a::before, .mobileMenu nav a::after { content: none !important; }
.mobileMenu nav a span { color: rgb(120, 146, 26); }
.mobileMenu nav .mobileMenuCta { border-bottom: 0px; background: var(--lime) !important; margin-top: 8px !important; }
.footerGrid { grid-template-columns: 1fr 1fr; }
.corporateIntro, .corporateModel, .regionalProof > .wrap, .contactDirect > .wrap, .contactChecklist { grid-template-columns: 1fr; gap: 45px; }
.corporatePrincipleGrid, .regionalProofLinks, .contactOptionGrid { grid-template-columns: 1fr 1fr; }
.regionalProofLinks a:last-child, .contactOptionGrid article:last-child { grid-column: 1 / 3; }
}
@media (max-width: 720px) {
.topbar > .navCta { display: none; }
}
@media (max-width: 560px) {
.footerGrid { grid-template-columns: 1fr; }
.corporateIntro, .corporatePrinciples, .corporateModel, .regionalProof, .contactOptions, .contactDirect, .contactChecklist { padding-block: 75px; }
.corporatePrincipleGrid, .regionalProofLinks, .contactOptionGrid { grid-template-columns: 1fr; }
.corporatePrincipleGrid article { border-bottom: 1px solid rgb(73, 102, 93); min-height: 220px; padding: 26px 22px; }
.corporatePrincipleGrid article:first-child { padding-left: 22px; }
.corporatePrincipleGrid h3 { margin-top: 38px; }
.regionalProofLinks a:last-child, .contactOptionGrid article:last-child { grid-column: auto; }
.contactDirectGrid a { grid-template-columns: 1fr auto; gap: 8px 20px; }
.contactDirectGrid span { grid-column: 1 / 3; }
.contactDirectGrid strong { font-size: 13px; }
.contactOptionGrid article { min-height: 235px; }
.mobileMenu { margin-left: auto; }
}
.visualStories { grid-template-columns: 1.15fr 0.85fr 1fr; gap: 16px; margin-bottom: 120px; display: grid; }
.visualStories article { background: var(--green); min-height: 390px; position: relative; overflow: hidden; }
.visualStories article:nth-child(2) { margin-top: 42px; }
.visualStories img { object-fit: cover; filter: saturate(0.82); width: 100%; height: 100%; transition: transform 0.45s; position: absolute; inset: 0px; }
.visualStories article::after { content: ""; background: linear-gradient(rgba(8, 30, 23, 0.02) 35%, rgba(8, 30, 23, 0.88) 100%); position: absolute; inset: 0px; }
.visualStories article:hover img { transform: scale(1.025); }
.visualStories article > div { z-index: 1; color: rgb(255, 255, 255); flex-direction: column; gap: 9px; display: flex; position: absolute; bottom: 25px; left: 26px; right: 26px; }
.visualStories span { letter-spacing: 1.6px; color: var(--lime); font-size: 9px; font-weight: 900; }
.visualStories strong { font-family: Georgia, serif; font-size: 25px; font-weight: 400; line-height: 1.15; }
.projectHomeGrid article { flex-direction: column; padding: 0px; display: flex; overflow: hidden; }
.projectHomeGrid article > img { object-fit: cover; filter: saturate(0.8); width: 100%; height: 180px; transition: transform 0.35s; display: block; }
.projectHomeGrid article:hover > img { transform: scale(1.02); }
.projectHomeGrid article > div { flex: 1 1 0%; padding: 25px; }
.projectHomeGrid h3 { margin: 28px 0px 15px; }
.projectHomeGrid p { margin-bottom: 0px; }
@media (max-width: 900px) {
.visualStories { grid-template-columns: 1fr 1fr; margin-bottom: 90px; }
.visualStories article:last-child { grid-column: 1 / 3; min-height: 330px; }
.visualStories article:nth-child(2) { margin-top: 0px; }
.projectHomeGrid article > img { height: 210px; }
}
@media (max-width: 560px) {
.visualStories { grid-template-columns: 1fr; gap: 12px; margin-bottom: 75px; }
.visualStories article, .visualStories article:last-child { grid-column: auto; min-height: 310px; }
.projectHomeGrid article { min-height: 0px; }
.projectHomeGrid article > img { height: 220px; }
.projectHomeGrid article > div { padding: 24px 22px; }
}
.marketNavLink { color: rgb(49, 93, 76); font-weight: 900; }
.serviceRegionLinks, .regionalProofLinks { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
.servicesHubGrid, .serviceRegionLinks, .regionalProofLinks { grid-template-columns: 1fr 1fr; }
.serviceRegionLinks a:last-child, .regionalProofLinks a:last-child { grid-column: auto; }
.mobileMenu nav .marketNavLink { border-left: 4px solid var(--lime); background: var(--sand) !important; color: var(--green) !important; padding-left: 10px !important; }
}
@media (max-width: 560px) {
.servicesHub { padding-block: 75px; }
.servicesHubGrid, .serviceRegionLinks, .regionalProofLinks { grid-template-columns: 1fr; }
.servicesHubGrid > a { min-height: 240px; padding: 26px 22px; }
.serviceRegionLinks a:last-child, .regionalProofLinks a:last-child { grid-column: auto; }
}
.servicesHubHero { background-position: 50% 42%; }
.servicesHub { padding-block: 110px; }
.servicesHub h2 em { color: rgb(120, 146, 26); }
.servicesHubGrid { border-top: 1px solid var(--line); border-left: 1px solid var(--line); grid-template-columns: repeat(4, 1fr); display: grid; }
.servicesHubGrid > a { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); flex-direction: column; min-height: 310px; padding: 32px 28px; transition: background 0.2s, color 0.2s; display: flex; }
:is(.servicesHubGrid > a:hover, .servicesHubGrid > a:focus-visible) { background: var(--green); color: rgb(255, 255, 255); }
.servicesHubGrid span { color: rgb(120, 146, 26); font-size: 10px; font-weight: 900; }
.servicesHubGrid h2 { letter-spacing: -1px; margin: 52px 0px 18px; font-size: 33px; }
.servicesHubGrid p { color: rgb(93, 101, 97); font-size: 13px; line-height: 1.7; }
:is(.servicesHubGrid > a:hover p, .servicesHubGrid > a:focus-visible p) { color: rgb(196, 210, 204); }
.servicesHubGrid b { color: rgb(54, 91, 77); margin-top: auto; font-size: 11px; }
:is(.servicesHubGrid > a:hover b, .servicesHubGrid > a:focus-visible b) { color: var(--lime); }
.serviceRegionLinks { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
.servicesHubGrid, .serviceRegionLinks { grid-template-columns: 1fr 1fr; }
.serviceRegionLinks a:last-child { grid-column: auto; }
}
@media (max-width: 560px) {
.servicesHub { padding-block: 75px; }
.servicesHubGrid, .serviceRegionLinks { grid-template-columns: 1fr; }
.servicesHubGrid > a { min-height: 240px; padding: 26px 22px; }
.serviceRegionLinks a:last-child { grid-column: auto; }
}
@media (max-width: 760px) {
a.brand, details.mobileMenu > summary, .blogRead, .crumb a, a[href^="tel:"], a[href*="wa.me"], a[href*="share.google"], .footerGrid a, .copyright a { min-height: 44px; display: inline-flex; align-items: center; }
details.mobileMenu > summary { min-width: 44px; justify-content: center; padding: 8px 4px; cursor: pointer; }
.blogRead, .footerGrid a { width: 100%; padding-block: 10px; }
}
@media (max-width: 900px) {
.mobileMenu nav a.marketNavLink, .mobileMenu nav a.marketNavLink:visited, .mobileMenu nav a.marketNavLink:hover, .mobileMenu nav a.marketNavLink:focus-visible { color: rgb(23, 33, 29) !important; background: rgb(243, 240, 232) !important; border-left: 6px solid rgb(215, 243, 61) !important; }
.mobileMenu nav a.marketNavLink span { color: rgb(111, 141, 22) !important; }
} .desktopNav .rac-machine-nav-link{white-space:nowrap!important;}
@media (min-width:901px) and (max-width:1180px){.topbar{padding-left:16px!important;padding-right:16px!important}.topbar .brand img{width:170px!important;max-width:170px!important}.topbar>.desktopNav{gap:10px!important}.topbar>.desktopNav>a{font-size:12px!important;white-space:nowrap!important}.topbar>.desktopNav .marketNavLink{padding:8px 10px!important}.topbar>.navCta{padding:12px 14px!important;font-size:13px!important;white-space:nowrap!important}} @media (min-width:1181px){.topbar>.brand{margin-right:18px!important}.topbar>.desktopNav{gap:29px!important}}