/* =========================================================
AJASCO GROUP — CIVIL CONSTRUCTION
FINAL PAGE-SPECIFIC CSS
-----------------------

This stylesheet is intentionally scoped to .cc-page so it
does not interfere with the global AJASCO layout.
========================================================= */

.cc-page {
--cc-dark: #171717;
--cc-dark-2: #222222;
--cc-text: #242424;
--cc-muted: #6c6c6c;
--cc-light: #f5f3ef;
--cc-white: #ffffff;
--cc-line: rgba(23, 23, 23, 0.13);
--cc-line-light: rgba(255, 255, 255, 0.24);
--cc-accent: #c25b3a;
--cc-shell: 1240px;

width: 100%;
overflow: hidden;
color: var(--cc-text);
background: var(--cc-white);

font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;

}

.cc-page *,
.cc-page *::before,
.cc-page *::after {
box-sizing: border-box;
}

.cc-page img {
display: block;
width: 100%;
max-width: 100%;
}

.cc-page h1,
.cc-page h2,
.cc-page h3,
.cc-page p,
.cc-page figure {
margin: 0;
}

.cc-page h1,
.cc-page h2,
.cc-page h3 {
font-family: "Bebas Neue", Arial, sans-serif;
font-weight: 400;
text-transform: uppercase;
}

.cc-page h1,
.cc-page h2,
.cc-page h3 {
letter-spacing: .35px;
}

.cc-page p {
color: var(--cc-muted);
}

.cc-shell {
width: min(calc(100% - 64px), var(--cc-shell));
margin-inline: auto;
}

.cc-eyebrow {
display: block;
width: fit-content;
margin: 0 0 20px;

color: var(--cc-accent);

font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 2.2px;
text-transform: uppercase;

}

.cc-section {
padding: 120px 0;
}

.cc-section-head {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
gap: 70px;
align-items: end;
margin-bottom: 58px;
}

.cc-section-head h2,
.cc-feature-panel h2,
.cc-villa-copy h2,
.cc-end-head h2,
.cc-cta h2 {
color: var(--cc-dark);
font-size: clamp(48px, 5.2vw, 72px);
line-height: .91;
}

.cc-page h1 em,
.cc-page h2 em,
.cc-page h3 em {
color: var(--cc-accent);
font-style: normal;
}

.cc-section-head > p {
max-width: 500px;
font-size: 16px;
line-height: 1.8;
}

/* =========================================================
01. HERO
========================================================= */

.cc-hero {
position: relative;
min-height: 78vh;
height: 760px;
max-height: 900px;
color: var(--cc-white);
isolation: isolate;
}

.cc-hero-media,
.cc-hero-overlay {
position: absolute;
inset: 0;
}

.cc-hero-media img {
height: 100%;
object-fit: cover;
object-position: center;
}

.cc-hero-overlay {
z-index: 1;
background:
linear-gradient(
90deg,
rgba(0,0,0,.74) 0%,
rgba(0,0,0,.47) 45%,
rgba(0,0,0,.12) 100%
),
linear-gradient(
0deg,
rgba(0,0,0,.48),
transparent 52%
);
}

.cc-hero-inner {
position: relative;
z-index: 2;

display: flex;
height: 100%;
min-height: 78vh;
flex-direction: column;
justify-content: center;

padding-top: 55px;
padding-bottom: 70px;

}

.cc-hero-copy {
max-width: 900px;
}

.cc-hero .cc-eyebrow {
color: rgba(255,255,255,.86);
margin-bottom: 20px;
}

.cc-hero h1 {
max-width: 900px;
color: var(--cc-white);
font-size: clamp(66px, 8vw, 116px);
line-height: .86;
}

.cc-hero p {
max-width: 580px;
margin-top: 30px;
color: rgba(255,255,255,.88);
font-size: clamp(16px,1.5vw,20px);
line-height: 1.65;
}

.cc-hero-scroll {
position: absolute;
right: 32px;
bottom: 34px;

display: flex;
align-items: center;
gap: 12px;

color: rgba(255,255,255,.7);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;

}

.cc-hero-scroll span {
display: block;
width: 42px;
height: 1px;
background: rgba(255,255,255,.55);
}

/* =========================================================
02. CONSTRUCTION EXPERTISE
========================================================= */

.cc-intro {
padding: 110px 0;
background: var(--cc-white);
}

.cc-intro-grid {
display: grid;
grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
min-height: 620px;
align-items: stretch;
}

.cc-intro-media {
min-height: 620px;
overflow: hidden;
}

.cc-intro-media img {
height: 100%;
object-fit: cover;
object-position: center;
}

.cc-intro-copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: 60px 0 60px clamp(46px, 7vw, 105px);
}

.cc-intro-copy .cc-eyebrow {
margin-bottom: 24px;
}

.cc-intro-copy h2 {
max-width: 650px;
margin-bottom: 30px;

color: var(--cc-dark);
font-size: clamp(52px, 5.2vw, 76px);
line-height: .9;

}

.cc-intro-copy h2 em {
display: block;
color: var(--cc-accent);
}

.cc-intro-copy p {
max-width: 590px;
margin-bottom: 18px;
font-size: 16px;
line-height: 1.82;
}

.cc-intro-copy .cc-lead {
color: var(--cc-text);
font-size: 19px;
line-height: 1.7;
}

/* =========================================================
03. SERVICES
========================================================= */

.cc-services {
padding: 115px 0 125px;
background: var(--cc-light);
}

.cc-services-head {
margin-bottom: 42px;
}

.cc-services-head > p {
padding-bottom: 4px;
}

.cc-service-list {
border-top: 1px solid var(--cc-line);
}

.cc-service-item {
display: grid;
grid-template-columns: 65px minmax(0,1fr) 45px;
gap: 28px;
align-items: center;

min-height: 120px;
padding: 24px 0;

border-bottom: 1px solid var(--cc-line);

transition:
    padding .25s ease,
    background .25s ease;

}

.cc-service-item:hover {
padding-inline: 22px;
background: var(--cc-white);
}

.cc-service-item .cc-number {
align-self: start;
padding-top: 7px;
}

.cc-number {
color: var(--cc-accent);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
}

.cc-service-item h3 {
margin-bottom: 6px;
color: var(--cc-dark);
font-size: clamp(25px,2.2vw,34px);
line-height: .98;
}

.cc-service-item p {
font-size: 14px;
line-height: 1.65;
}

.cc-arrow {
justify-self: end;
color: var(--cc-accent);
font-size: 25px;
}

/* =========================================================
04. KSA EXPERIENCE FEATURE
========================================================= */

.cc-feature {
display: grid;
grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
min-height: 690px;
}

.cc-feature-image {
min-height: 690px;
overflow: hidden;
}

.cc-feature-image img {
height: 100%;
object-fit: cover;
object-position: center;
}

.cc-feature-panel {
display: flex;
flex-direction: column;
justify-content: center;

padding: 90px clamp(48px,7vw,110px);
background: var(--cc-dark);

}

.cc-feature-panel .cc-eyebrow {
color: #e6a18b;
margin-bottom: 24px;
}

.cc-feature-panel h2 {
margin-bottom: 32px;
color: var(--cc-white);
}

.cc-feature-panel h2 em {
color: #e6a18b;
}

.cc-feature-panel p {
max-width: 560px;
margin-bottom: 18px;
color: rgba(255,255,255,.67);
font-size: 15px;
line-height: 1.82;
}

.cc-feature-panel .cc-lead {
color: rgba(255,255,255,.92);
font-size: 19px;
line-height: 1.7;
}

/* =========================================================
05. KSA LOCATIONS
========================================================= */

.cc-locations {
padding: 120px 0;
background: var(--cc-white);
}

.cc-location-grid {
display: grid;
grid-template-columns: repeat(5,minmax(0,1fr));
gap: 18px;
}

.cc-location-card {
overflow: hidden;
background: var(--cc-light);
}

.cc-location-image {
aspect-ratio: .92 / 1;
overflow: hidden;
}

.cc-location-image img {
height: 100%;
object-fit: cover;
transition: transform .55s ease;
}

.cc-location-card:hover .cc-location-image img {
transform: scale(1.045);
}

.cc-location-body {
min-height: 215px;
padding: 25px 22px 28px;
}

.cc-location-body .cc-number {
display: block;
margin-bottom: 15px;
}

.cc-location-body h3 {
margin-bottom: 12px;
color: var(--cc-dark);
font-size: 31px;
line-height: .95;
}

.cc-location-body p {
font-size: 13px;
line-height: 1.72;
}

.cc-location-actions {
display: flex;
justify-content: center;
margin-top: 46px;
}

.cc-location-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 20px;

padding: 16px 24px;

border: 1px solid var(--cc-dark);
color: var(--cc-dark);
background: transparent;

font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
line-height: 1;
text-decoration: none;
text-transform: uppercase;

transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s ease;

}

.cc-location-link:hover {
color: var(--cc-white);
background: var(--cc-dark);
border-color: var(--cc-dark);
transform: translateY(-2px);
}

.cc-location-link span {
font-size: 18px;
line-height: .5;
}

/* =========================================================
06. END-TO-END CAPABILITY
========================================================= */

.cc-end {
position: relative;
min-height: 920px;
color: var(--cc-white);
isolation: isolate;
}

.cc-end-background,
.cc-end-overlay {
position: absolute;
inset: 0;
}

.cc-end-background img {
height: 100%;
object-fit: cover;
object-position: center;
}

.cc-end-overlay {
z-index: 1;
background:
linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.84)),
linear-gradient(90deg,rgba(0,0,0,.65),transparent);
}

.cc-end-inner {
position: relative;
z-index: 2;
padding-top: 120px;
padding-bottom: 110px;
}

.cc-end-head {
max-width: 800px;
margin-bottom: 64px;
}

.cc-end-head .cc-eyebrow {
color: #e6a18b;
margin-bottom: 24px;
}

.cc-end-head h2 {
margin-bottom: 30px;
color: var(--cc-white);
}

.cc-end-head h2 em {
color: #e6a18b;
}

.cc-end-head p {
max-width: 620px;
color: rgba(255,255,255,.76);
font-size: 17px;
line-height: 1.8;
}

.cc-capability-grid {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 1px;

border: 1px solid var(--cc-line-light);
background: var(--cc-line-light);

}

.cc-capability {
min-height: 220px;
padding: 30px;
background: rgba(17,17,17,.64);
backdrop-filter: blur(3px);
}

.cc-capability > span {
display: block;
margin-bottom: 38px;
color: #e6a18b;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
}

.cc-capability h3 {
margin-bottom: 12px;
color: var(--cc-white);
font-size: 24px;
line-height: 1;
}

.cc-capability p {
max-width: 320px;
color: rgba(255,255,255,.62);
font-size: 13px;
line-height: 1.7;
}

.cc-process {
display: flex;
align-items: center;
margin-top: 58px;
}

.cc-process-step {
display: flex;
min-width: 90px;
flex-direction: column;
align-items: center;
gap: 8px;
}

.cc-process-step span {
color: #e6a18b;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
}

.cc-process-step strong {
color: var(--cc-white);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.6px;
}

.cc-process i {
flex: 1;
height: 1px;
background: rgba(255,255,255,.3);
}

/* =========================================================
07. VILLA DEVELOPMENT STORY
========================================================= */

.cc-villa {
display: grid;
grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
min-height: 710px;
background: var(--cc-light);
}

.cc-villa-image {
min-height: 710px;
overflow: hidden;
}

.cc-villa-image img {
height: 100%;
object-fit: cover;
object-position: center;
}

.cc-villa-copy {
display: flex;
flex-direction: column;
justify-content: center;

padding: 90px clamp(48px,7vw,110px);

}

.cc-villa-copy .cc-eyebrow {
margin-bottom: 24px;
}

.cc-villa-copy h2 {
margin-bottom: 30px;
}

.cc-villa-copy h2 em {
color: var(--cc-accent);
}

.cc-villa-copy p {
max-width: 560px;
margin-bottom: 17px;
font-size: 15px;
line-height: 1.82;
}

.cc-villa-copy .cc-lead {
color: var(--cc-text);
font-size: 19px;
line-height: 1.7;
}

/* =========================================================
BUTTON
========================================================= */

.cc-button {
display: inline-flex;
width: fit-content;
align-items: center;
gap: 24px;

margin-top: 22px;
padding: 15px 22px;

color: var(--cc-white);
background: var(--cc-accent);
border: 1px solid var(--cc-accent);

font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
line-height: 1;
text-decoration: none;
text-transform: uppercase;

transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease;

}

.cc-button:hover {
color: var(--cc-accent);
background: transparent;
transform: translateY(-2px);
}

.cc-button span {
font-size: 18px;
line-height: .5;
}

/* =========================================================
08. VILLA SHOWCASE
========================================================= */

.cc-villa-showcase {
padding: 120px 0;
background: var(--cc-white);
}

.cc-gallery {
display: grid;
grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr);
gap: 18px;
}

.cc-gallery figure {
position: relative;
overflow: hidden;
margin: 0;
background: var(--cc-dark);
}

.cc-gallery-main {
min-height: 650px;
}

.cc-gallery-side {
display: grid;
grid-template-rows: repeat(2,minmax(0,1fr));
gap: 18px;
}

.cc-gallery-side figure {
min-height: 316px;
}

.cc-gallery img {
height: 100%;
object-fit: cover;
transition: transform .6s ease;
}

.cc-gallery figure:hover img {
transform: scale(1.035);
}

.cc-gallery figcaption {
position: absolute;
right: 0;
bottom: 0;
left: 0;

```
display: flex;
align-items: center;
gap: 14px;

padding: 18px 22px;

color: var(--cc-white);
background: linear-gradient(0deg,rgba(0,0,0,.7),transparent);

font-size: 11px;
font-weight: 700;
letter-spacing: 1.3px;
text-transform: uppercase;
}

.cc-gallery figcaption span {
color: #e6a18b;
}

/* =========================================================
09. FINAL CTA
========================================================= */

.cc-cta {
padding: 125px 0;
background: var(--cc-dark);
text-align: center;
}

.cc-cta-inner {
display: flex;
flex-direction: column;
align-items: center;
}

.cc-cta .cc-eyebrow {
color: #e6a18b;
margin-bottom: 22px;
}

.cc-cta h2 {
max-width: 900px;
color: var(--cc-white);
}

.cc-cta h2 em {
color: #e6a18b;
}

.cc-button-light {
color: var(--cc-dark);
background: var(--cc-white);
border-color: var(--cc-white);
}

.cc-button-light:hover {
color: var(--cc-white);
background: transparent;
}

/* =========================================================
TABLET — 992px to 1199px
========================================================= */

@media (max-width: 1199px) {

.cc-shell {
    width: min(calc(100% - 52px), var(--cc-shell));
}

.cc-intro-copy {
    padding-left: 55px;
}

.cc-feature-panel,
.cc-villa-copy {
    padding-left: 55px;
    padding-right: 55px;
}

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

.cc-location-body {
    padding-inline: 20px;
}

}

/* =========================================================
TABLET — 768px to 991px
========================================================= */

@media (max-width: 991px) {

.cc-shell {
    width: min(calc(100% - 44px), var(--cc-shell));
}

.cc-section {
    padding: 90px 0;
}

.cc-hero {
    min-height: 700px;
    height: 700px;
}

.cc-hero-inner {
    min-height: 700px;
}

.cc-hero h1 {
    font-size: clamp(58px,9vw,84px);
}

.cc-intro-grid,
.cc-feature,
.cc-villa {
    grid-template-columns: 1fr;
}

.cc-intro-media,
.cc-feature-image,
.cc-villa-image {
    min-height: 500px;
}

.cc-intro-copy,
.cc-villa-copy {
    padding: 70px 0;
}

.cc-feature-panel {
    padding: 80px 11vw;
}

.cc-section-head {
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 45px;
}

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

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

.cc-end {
    min-height: auto;
}

.cc-process {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.cc-process i {
    min-width: 35px;
    flex: 0 0 35px;
}

.cc-gallery {
    grid-template-columns: 1fr;
}

.cc-gallery-main {
    min-height: 560px;
}

.cc-gallery-side {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: 300px;
}

.cc-gallery-side figure {
    min-height: 300px;
}

}

/* =========================================================
MOBILE — up to 767px
========================================================= */

@media (max-width: 767px) {

.cc-shell {
    width: min(calc(100% - 32px), var(--cc-shell));
}

.cc-section {
    padding: 72px 0;
}

.cc-eyebrow {
    margin-bottom: 16px;
    font-size: 10px;
    letter-spacing: 1.8px;
}

.cc-hero {
    min-height: 620px;
    height: 620px;
}

.cc-hero-inner {
    min-height: 620px;
    padding-top: 45px;
    padding-bottom: 55px;
}

.cc-hero-overlay {
    background:
        linear-gradient(90deg,rgba(0,0,0,.77),rgba(0,0,0,.30)),
        linear-gradient(0deg,rgba(0,0,0,.50),transparent 55%);
}

.cc-hero h1 {
    font-size: clamp(48px,14vw,66px);
    line-height: .9;
}

.cc-hero p {
    max-width: 330px;
    margin-top: 22px;
    font-size: 15px;
}

.cc-hero-scroll {
    right: 16px;
    bottom: 20px;
    font-size: 8px;
}

.cc-section-head h2,
.cc-feature-panel h2,
.cc-villa-copy h2,
.cc-end-head h2,
.cc-cta h2 {
    font-size: clamp(42px,13vw,58px);
}

.cc-intro-grid {
    width: 100%;
}

.cc-intro-media,
.cc-feature-image,
.cc-villa-image {
    min-height: 380px;
}

.cc-intro-copy,
.cc-villa-copy {
    padding: 58px 16px;
}

.cc-intro-copy .cc-eyebrow {
    margin-bottom: 18px;
}

.cc-intro-copy h2 {
    font-size: clamp(46px,13vw,60px);
    line-height: .9;
    margin-bottom: 25px;
}

.cc-intro-copy .cc-lead,
.cc-villa-copy .cc-lead,
.cc-feature-panel .cc-lead {
    font-size: 17px;
}

.cc-feature-panel {
    padding: 65px 32px;
}

.cc-service-item {
    grid-template-columns: 38px minmax(0,1fr) 25px;
    gap: 13px;
    min-height: 105px;
    padding: 20px 0;
}

.cc-service-item:hover {
    padding-inline: 10px;
}

.cc-service-item h3 {
    font-size: 23px;
}

.cc-service-item p {
    font-size: 12px;
}

.cc-arrow {
    font-size: 20px;
}

.cc-location-grid {
    grid-template-columns: 1fr;
    gap: 16px;
}

.cc-location-image {
    aspect-ratio: 1.35 / 1;
}

.cc-location-body {
    min-height: auto;
    padding: 22px;
}

.cc-location-body h3 {
    font-size: 30px;
}

.cc-location-actions {
    margin-top: 30px;
}

.cc-location-link {
    width: 100%;
    gap: 16px;
    padding: 17px 20px;
    justify-content: space-between;
    text-align: left;
}

.cc-end-inner {
    padding-top: 72px;
    padding-bottom: 72px;
}

.cc-capability-grid {
    grid-template-columns: 1fr;
}

.cc-capability {
    min-height: auto;
    padding: 25px;
}

.cc-capability > span {
    margin-bottom: 25px;
}

.cc-process {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 4px;
    margin-top: 42px;
}

.cc-process i {
    display: none;
}

.cc-process-step {
    min-width: 0;
}

.cc-process-step strong {
    font-size: 8px;
    letter-spacing: .8px;
}

.cc-villa-copy {
    padding-top: 65px;
    padding-bottom: 70px;
}

.cc-button {
    width: 100%;
    max-width: 320px;
    justify-content: space-between;
}

.cc-gallery-main {
    min-height: 420px;
}

.cc-gallery-side {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2,260px);
}

.cc-gallery-side figure {
    min-height: 260px;
}

.cc-cta {
    padding: 85px 0;
}

}

/* =========================================================
SMALL PHONES — up to 420px
========================================================= */

@media (max-width: 420px) {

.cc-shell {
    width: min(calc(100% - 26px), var(--cc-shell));
}

.cc-hero {
    min-height: 570px;
    height: 570px;
}

.cc-hero-inner {
    min-height: 570px;
}

.cc-hero h1 {
    font-size: 45px;
}

.cc-service-item {
    grid-template-columns: 30px minmax(0,1fr);
}

.cc-arrow {
    display: none;
}

.cc-process-step span {
    font-size: 8px;
}

.cc-location-link {
    font-size: 10px;
    letter-spacing: 1.1px;
}

}

/* =========================================================
ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

.cc-page *,
.cc-page *::before,
.cc-page *::after {
    scroll-behavior: auto !important;
    transition: none !important;
}

}