/* =========================================================
   SPIRE DIMENSIONS — CIVIL CONSTRUCTION
   Technical / structural luxury direction
========================================================= */

:root {
    --cs-black: #0c0e0e;
    --cs-black-2: #141717;
    --cs-panel: #1a1e1e;
    --cs-ivory: #f2efe7;
    --cs-paper: #e8e4da;
    --cs-gold: #b49355;
    --cs-steel: #98a09e;
    --cs-line: rgba(255,255,255,.13);
    --cs-dark-line: rgba(14,17,17,.16);
    --cs-serif: "Playfair Display", serif;
    --cs-sans: "DM Sans", sans-serif;
}

html { scroll-behavior:smooth; }
body { margin:0; background:var(--cs-black); color:#fff; overflow-x:hidden; }
main { overflow:hidden; }

.cs-hero {
    min-height:100vh;
    position:relative;
    display:flex;
    align-items:center;
    padding:150px 0 78px;
    background:var(--cs-black);
    isolation:isolate;
}

.cs-hero-photo {
    position: absolute;
    inset: 0;
    z-index: -3;

    background:
        linear-gradient(
            90deg,
            rgba(8,10,10,0.85) 0%,
            rgba(8,10,10,0.65) 47%,
            rgba(8,10,10,0.35) 100%
        ),
        url("../images/image21.webp")
        center center / cover no-repeat;

    transform: scale(1.04);
    transition: transform .15s linear;
}

.cs-blueprint-grid {
    position:absolute;
    inset:0;
    z-index:-2;
    background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:linear-gradient(90deg,#000 0 70%,transparent 100%);
}
.cs-hero::after {
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:1px;
    background:rgba(255,255,255,.18);
}
.cs-hero-inner { display:grid; grid-template-columns:1.05fr .75fr; gap:clamp(50px,8vw,140px); align-items:end; }
.cs-kicker { display:flex; align-items:center; gap:12px; margin-bottom:30px; color:#d4c5a9; font:600 10px var(--cs-sans); letter-spacing:.22em; }
.cs-kicker span { width:40px; height:1px; background:var(--cs-gold); }
.cs-title { margin:0; font:400 clamp(70px,8.8vw,140px)/.8 var(--cs-serif); letter-spacing:-.055em; }
.cs-title em { display:inline-block; color:#c7a766; font-weight:400; }
.cs-lead { margin:38px 0 0; max-width:680px; color:#c7ccca; font:400 16px/1.82 var(--cs-sans); }
.cs-actions { display:flex; align-items:center; flex-wrap:wrap; gap:28px; margin-top:38px; }
.cs-btn { min-height:54px; padding:0 24px; display:inline-flex; align-items:center; gap:22px; text-decoration:none; text-transform:uppercase; letter-spacing:.13em; font:600 10px var(--cs-sans); transition:transform .25s ease,background .25s ease; }
.cs-btn:hover { transform:translateY(-3px); }
.cs-btn-solid { background:var(--cs-gold); color:#111; }
.cs-btn-light { background:#fff; color:#101313; }
.cs-text-link { color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.42); padding-bottom:6px; font:600 10px var(--cs-sans); letter-spacing:.13em; text-transform:uppercase; }
.cs-text-link-dark { color:#111515; border-bottom-color:rgba(17,21,21,.32); display:inline-flex; gap:10px; margin-top:28px; }
.cs-hero-dashboard { background:rgba(13,16,16,.74); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(18px); box-shadow:0 30px 80px rgba(0,0,0,.28); }
.cs-dashboard-top { height:56px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--cs-line); color:#b6bdba; font:600 9px var(--cs-sans); letter-spacing:.17em; }
.cs-dashboard-top i { width:8px; height:8px; border-radius:50%; background:#9cb87d; box-shadow:0 0 0 5px rgba(156,184,125,.09); }
.cs-dashboard-grid { display:grid; grid-template-columns:repeat(2,1fr); }
.cs-dashboard-grid > div { min-height:145px; padding:24px; border-right:1px solid var(--cs-line); border-bottom:1px solid var(--cs-line); }
.cs-dashboard-grid > div:nth-child(even){border-right:0;}
.cs-dashboard-grid small { display:block; color:#8f9693; font:500 9px var(--cs-sans); letter-spacing:.16em; }
.cs-dashboard-grid strong { display:block; margin-top:21px; font:500 23px var(--cs-serif); }
.cs-dashboard-grid span { display:block; margin-top:8px; color:#959d99; font:400 11px var(--cs-sans); }
.cs-dashboard-foot { padding:18px 20px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; color:#8f9794; font:600 8px var(--cs-sans); letter-spacing:.12em; }
.cs-dashboard-foot b { color:var(--cs-gold); font-weight:400; }
.cs-hero-code { position:absolute; right:24px; bottom:25px; color:#777f7c; writing-mode:vertical-rl; font:600 8px var(--cs-sans); letter-spacing:.2em; }

.cs-control-strip { background:#111414; border-bottom:1px solid rgba(255,255,255,.1); }
.cs-control-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.cs-control-grid > div { min-height:178px; padding:34px 26px; border-right:1px solid rgba(255,255,255,.1); }
.cs-control-grid > div:first-child { border-left:1px solid rgba(255,255,255,.1); }
.cs-control-grid span { color:var(--cs-gold); font:500 9px var(--cs-sans); letter-spacing:.18em; }
.cs-control-grid strong { display:block; margin-top:20px; font:500 20px var(--cs-serif); }
.cs-control-grid p { margin:10px 0 0; color:#89918e; font:400 12px/1.65 var(--cs-sans); }

.cs-sequence { padding:128px 0; background:var(--cs-ivory); color:#111414; }
.cs-heading { display:grid; grid-template-columns:1.25fr .75fr; gap:80px; align-items:end; margin-bottom:66px; }
.cs-section-label { color:#857353; font:600 10px var(--cs-sans); letter-spacing:.2em; }
.cs-heading h2 { margin:14px 0 0; font:400 clamp(52px,5.6vw,88px)/.94 var(--cs-serif); letter-spacing:-.045em; }
.cs-heading h2 em { color:var(--cs-gold); font-weight:400; }
.cs-heading > p { margin:0; color:#626765; font:400 15px/1.8 var(--cs-sans); }
.cs-stage-list { border-top:1px solid var(--cs-dark-line); }
.cs-stage { position:relative; display:grid; grid-template-columns:80px 1.1fr 1fr 46px; gap:28px; align-items:center; min-height:150px; border-bottom:1px solid var(--cs-dark-line); transition:padding .28s ease,background .28s ease; }
.cs-stage:hover { padding-left:18px; padding-right:18px; background:#fbfaf5; }
.cs-stage-no { font:400 36px var(--cs-serif); color:#a28d67; }
.cs-stage-title small { display:block; margin-bottom:8px; color:#8c826f; font:600 9px var(--cs-sans); letter-spacing:.2em; }
.cs-stage-title h3 { margin:0; font:500 27px var(--cs-serif); }
.cs-stage > p { margin:0; color:#636966; font:400 13px/1.7 var(--cs-sans); }
.cs-stage-mark { font:300 29px var(--cs-sans); color:#a48a5c; text-align:right; }

.cs-site-feature { display:grid; grid-template-columns:1.15fr .85fr; background:#101313; min-height:760px; }
.cs-site-image { position:relative; min-height:760px; overflow:hidden; }
.cs-site-image img { width:100%; height:100%; object-fit:cover; filter:saturate(.72) contrast(1.03); transition:transform 1.1s ease; }
.cs-site-image:hover img { transform:scale(1.035); }
.cs-site-image-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(8,10,10,.75),transparent 55%); }
.cs-site-caption { position:absolute; left:38px; bottom:36px; }
.cs-site-caption span { display:block; color:#c8b58e; font:600 9px var(--cs-sans); letter-spacing:.2em; }
.cs-site-caption strong { display:block; margin-top:9px; font:400 29px var(--cs-serif); }
.cs-site-copy { padding:95px clamp(45px,7vw,110px); align-self:center; }
.cs-site-copy h2 { margin:18px 0 25px; font:400 clamp(48px,5vw,78px)/.96 var(--cs-serif); letter-spacing:-.04em; }
.cs-site-copy h2 em { color:#c1a263; font-weight:400; }
.cs-site-copy > p { max-width:590px; margin:0; color:#aeb6b2; font:400 15px/1.85 var(--cs-sans); }
.cs-checks { margin-top:44px; border-top:1px solid var(--cs-line); }
.cs-checks > div { display:grid; grid-template-columns:50px 1fr; gap:18px; padding:19px 0; border-bottom:1px solid var(--cs-line); }
.cs-checks span { color:#b79c68; font:500 10px var(--cs-sans); }
.cs-checks p { margin:0; color:#a5ada9; font:400 12px/1.6 var(--cs-sans); }
.cs-checks strong { color:#f0f0eb; font-weight:600; }

.cs-services { padding:128px 0; background:#e1ddd3; color:#101313; }
.cs-service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(16,19,19,.17); border:1px solid rgba(16,19,19,.17); }
.cs-service-card { min-height:310px; position:relative; padding:32px; background:#ebe8df; transition:background .28s ease,transform .28s ease; }
.cs-service-card:hover { background:#f7f4ec; transform:translateY(-5px); box-shadow:0 24px 60px rgba(27,30,29,.09); z-index:2; }
.cs-service-card > span { font:500 10px var(--cs-sans); color:#9e8962; }
.cs-service-card h3 { margin:62px 0 16px; font:500 29px/1.1 var(--cs-serif); }
.cs-service-card p { margin:0; color:#606664; max-width:330px; font:400 13px/1.75 var(--cs-sans); }
.cs-service-card i { position:absolute; bottom:27px; left:32px; font-style:normal; color:#93815f; font:600 8px var(--cs-sans); letter-spacing:.2em; }

.cs-quality { padding:126px 0; background:#f7f4ec; color:#111414; }
.cs-quality-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; align-items:center; }
.cs-quality-title h2 { margin:18px 0 24px; font:400 clamp(50px,5vw,80px)/.95 var(--cs-serif); letter-spacing:-.04em; }
.cs-quality-title h2 em { color:var(--cs-gold); font-weight:400; }
.cs-quality-title > p { color:#656b68; max-width:520px; font:400 15px/1.8 var(--cs-sans); }
.cs-quality-board { border:1px solid rgba(17,20,20,.2); background:#fffdf7; box-shadow:0 28px 70px rgba(26,31,29,.07); }
.cs-board-head { padding:18px 22px; display:flex; justify-content:space-between; border-bottom:1px solid var(--cs-dark-line); color:#797f7c; font:600 9px var(--cs-sans); letter-spacing:.17em; }
.cs-board-row { display:grid; grid-template-columns:54px .8fr 1fr 72px; gap:22px; align-items:center; min-height:94px; padding:0 22px; border-bottom:1px solid var(--cs-dark-line); }
.cs-board-row:last-child { border-bottom:0; }
.cs-board-row > span { color:#9b8764; font:500 10px var(--cs-sans); }
.cs-board-row strong { font:500 18px var(--cs-serif); }
.cs-board-row p { margin:0; color:#717673; font:400 11px/1.55 var(--cs-sans); }
.cs-board-row i { justify-self:end; font-style:normal; font:600 8px var(--cs-sans); letter-spacing:.15em; color:#728269; border:1px solid rgba(114,130,105,.28); padding:6px 8px; }

.cs-types { padding:126px 0; background:#111414; }
.cs-heading-light h2 { color:#fff; }
.cs-heading-light > p { color:#9ba39f; }
.cs-heading-light .cs-section-label { color:#ad9870; }
.cs-type-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--cs-line); border-left:1px solid var(--cs-line); }
.cs-type-card { min-height:300px; padding:30px 26px; border-right:1px solid var(--cs-line); border-bottom:1px solid var(--cs-line); transition:background .28s ease; }
.cs-type-card:hover { background:#191d1d; }
.cs-type-card > span { color:#b49a68; font:500 10px var(--cs-sans); }
.cs-type-card h3 { margin:78px 0 16px; font:500 27px/1.08 var(--cs-serif); }
.cs-type-card p { margin:0; color:#8f9793; font:400 12px/1.7 var(--cs-sans); }

.cs-cta { min-height:650px; position:relative; display:flex; align-items:center; background:#0d1010; }

.cs-cta-bg {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,9,9,0.85) 0%,
            rgba(7,9,9,0.65) 48%,
            rgba(7,9,9,0.30) 100%
        ),
        url("../images/image22.webp")
        center center / cover no-repeat;
}

.cs-cta-bg::after { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:72px 72px; }
.cs-cta-content { position:relative; z-index:2; }
.cs-cta h2 { margin:0; font:400 clamp(58px,6vw,94px)/.92 var(--cs-serif); letter-spacing:-.045em; }
.cs-cta h2 em { color:#c7a766; font-weight:400; }
.cs-cta p { max-width:640px; margin:28px 0 0; color:#b8c0bc; font:400 15px/1.8 var(--cs-sans); }
.cs-phone { color:white; text-decoration:none; font:500 11px var(--cs-sans); letter-spacing:.13em; }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .78s ease,transform .78s cubic-bezier(.2,.7,.2,1); }
.reveal.active { opacity:1; transform:none; }

@media (max-width:1100px) {
    .cs-hero-inner { grid-template-columns:1fr .85fr; gap:50px; }
    .cs-control-grid { grid-template-columns:repeat(2,1fr); }
    .cs-control-grid > div:nth-child(3) { border-left:1px solid rgba(255,255,255,.1); }
    .cs-control-grid > div { border-bottom:1px solid rgba(255,255,255,.1); }
    .cs-stage { grid-template-columns:66px 1fr 1fr 38px; }
    .cs-service-grid { grid-template-columns:repeat(2,1fr); }
    .cs-type-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:860px) {
    .cs-hero { min-height:auto; padding:132px 0 78px; }
    .cs-hero-inner, .cs-heading, .cs-quality-layout { grid-template-columns:1fr; }
    .cs-hero-inner { gap:58px; }
    .cs-title { font-size:clamp(68px,18vw,112px); }
    .cs-hero-dashboard { max-width:620px; }
    .cs-heading { gap:24px; margin-bottom:48px; }
    .cs-stage { grid-template-columns:62px 1fr 36px; padding:24px 0; }
    .cs-stage > p { grid-column:2/3; }
    .cs-stage-mark { grid-column:3; grid-row:1/3; }
    .cs-site-feature { grid-template-columns:1fr; }
    .cs-site-image { min-height:560px; }
    .cs-site-copy { padding:78px 7vw; }
    .cs-quality-layout { gap:58px; }
}

@media (max-width:580px) {
    .cs-hero { padding-top:114px; }
    .cs-title { font-size:64px; }
    .cs-lead { font-size:15px; }
    .cs-actions { flex-direction:column; align-items:flex-start; gap:20px; }
    .cs-dashboard-grid { grid-template-columns:1fr; }
    .cs-dashboard-grid > div { min-height:115px; border-right:0; }
    .cs-hero-code { display:none; }
    .cs-control-grid { grid-template-columns:1fr; }
    .cs-control-grid > div, .cs-control-grid > div:first-child, .cs-control-grid > div:nth-child(3) { border-left:0; border-right:0; }
    .cs-sequence, .cs-services, .cs-quality, .cs-types { padding:90px 0; }
    .cs-heading h2, .cs-quality-title h2, .cs-site-copy h2 { font-size:47px; }
    .cs-stage { grid-template-columns:46px 1fr; gap:15px; }
    .cs-stage > p { grid-column:2; }
    .cs-stage-mark { display:none; }
    .cs-stage-title h3 { font-size:23px; }
    .cs-site-image { min-height:430px; }
    .cs-site-copy { padding:72px 22px; }
    .cs-service-grid, .cs-type-grid { grid-template-columns:1fr; }
    .cs-service-card { min-height:280px; }
    .cs-board-row { grid-template-columns:38px 1fr; gap:12px; padding:18px; }
    .cs-board-row p { grid-column:2; }
    .cs-board-row i { display:none; }
    .cs-type-card { min-height:250px; }
    .cs-type-card h3 { margin-top:55px; }
    .cs-cta { min-height:610px; }
    .cs-cta h2 { font-size:51px; }
}