/*==========================================================================
  Case-study pages (case-study-*.html)
  Overview (photo + facts card) -> story blocks -> owner quote -> gallery
  -> related services. Placeholder content is marked with .cs-sample (inline)
  and .cs-sample-block (whole block) so it is never mistaken for real detail.
==========================================================================*/

/* ---------- Sample / placeholder markers ---------- */
.cs-draft-note {
    background: #fff8db;
    border-bottom: 1px solid #f0dc8a;
}

.cs-draft-note p {
    margin: 0;
    padding: 14px 0;
    font-size: 15px;
    color: #6b5500;
}

.cs-draft-note i {
    margin-right: 6px;
}

.cs-sample {
    background: #fff3b0;
    border-bottom: 1px dashed #d4b106;
    padding: 0 3px;
    border-radius: 2px;
}

.cs-sample-block {
    position: relative;
    background: #fffbea;
    border: 1px dashed #e0c24a;
    border-radius: 12px;
    padding: 26px 28px 24px;
}

.cs-sample-block::before {
    content: "Sample";
    position: absolute;
    top: -11px;
    right: 18px;
    background: #f5d24a;
    color: #5a4700;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
}

/* ---------- Overview ---------- */
.cs-overview .cs-photo {
    height: 100%;
    min-height: 420px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg);
}

.cs-overview .cs-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-facts {
    height: 100%;
    padding: 34px 32px;
    border-radius: 16px;
    background: var(--white);
    box-shadow: 0 12px 34px rgba(32, 64, 102, 0.1);
    border: 1px solid rgba(0, 152, 74, 0.12);
}

.cs-logo {
    display: flex;
    align-items: center;
    height: 90px;
    margin-bottom: 22px;
}

.cs-logo img {
    max-height: 90px;
    max-width: 220px;
    width: auto;
    object-fit: contain;
}

.cs-facts h2 {
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 14px;
}

.cs-facts > p {
    margin-bottom: 22px;
    line-height: 1.7;
}

.cs-fact-list {
    margin: 0;
    padding: 0;
}

.cs-fact {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid rgba(32, 64, 102, 0.1);
}

.cs-fact dt {
    font-weight: 600;
    color: var(--header);
    flex: 0 0 auto;
}

.cs-fact dd {
    margin: 0;
    text-align: right;
    color: var(--text);
}

.cs-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.cs-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--theme-color);
    background: rgba(0, 152, 74, 0.1);
    padding: 4px 9px;
    border-radius: 4px;
}

/* sample scope tags use the yellow placeholder look, not the green tag look */
.cs-tag.cs-sample {
    background: #fff3b0;
    color: #6b5500;
    border-bottom: 1px dashed #d4b106;
}

/* ---------- Story ---------- */
.cs-story {
    padding: 0 0 100px;
}

.cs-block + .cs-block {
    margin-top: 50px;
}

.cs-block h2 {
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 16px;
}

.cs-block h3 {
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 12px;
}

.cs-block p {
    line-height: 1.8;
    margin-bottom: 0;
}

/* Blocks that run to more than one paragraph need the gap back. */
.cs-block p + p {
    margin-top: 16px;
}

.cs-steps {
    counter-reset: cs-step;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cs-steps li {
    position: relative;
    padding: 0 0 22px 58px;
    counter-increment: cs-step;
}

.cs-steps li:last-child {
    padding-bottom: 0;
}

.cs-steps li::before {
    content: counter(cs-step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--theme-color);
    color: var(--white);
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* thin line joining the step numbers */
.cs-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 44px;
    bottom: 4px;
    width: 2px;
    background: rgba(0, 152, 74, 0.25);
}

.cs-steps strong {
    display: block;
    color: var(--header);
    font-size: 17px;
    margin-bottom: 4px;
}

.cs-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cs-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 8px;
    line-height: 1.6;
}

.cs-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--theme-color);
}

/* ---------- Owner quote ---------- */
.cs-quote-section {
    padding: 90px 0;
    background-color: #0b1f38;
    background-image:
        radial-gradient(circle at 85% 15%, rgba(0, 152, 74, 0.35) 0%, rgba(0, 152, 74, 0) 45%),
        linear-gradient(125deg, #0b1f38 0%, #1b3a5e 60%, #0f4a36 100%);
}

.cs-quote {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    color: var(--white);
}

.cs-quote > i {
    font-size: 40px;
    color: var(--theme-color);
    margin-bottom: 20px;
}

.cs-quote blockquote {
    margin: 0 0 22px;
    font-size: 24px;
    line-height: 1.6;
    color: var(--white);
}

.cs-quote cite {
    font-style: normal;
    color: rgba(255, 255, 255, 0.8);
}

/* the quote sits on a dark band, so the sample highlight is darkened */
.cs-quote .cs-sample {
    background: rgba(245, 210, 74, 0.25);
    border-bottom-color: #f5d24a;
    color: var(--white);
}

/* ---------- Gallery ---------- */
.cs-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.cs-gallery-grid figure {
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg);
}

.cs-gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.cs-gallery-grid figure:hover img {
    transform: scale(1.05);
}

.cs-gallery-grid .cs-photo-todo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px dashed #e0c24a;
    background: #fffbea;
    color: #6b5500;
    font-weight: 600;
    text-align: center;
    padding: 20px;
}

.cs-gallery-grid .cs-photo-todo i {
    font-size: 30px;
}

/* ---------- Related services ---------- */
.cs-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.cs-related-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    border-radius: 12px;
    background: var(--white);
    border: 1px solid rgba(32, 64, 102, 0.12);
    color: var(--header);
    font-weight: 600;
    font-size: 17px;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.cs-related-card:hover {
    transform: translateY(-4px);
    border-color: var(--theme-color);
    box-shadow: 0 12px 28px rgba(0, 152, 74, 0.12);
    color: var(--header);
}

.cs-related-card i {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(0, 152, 74, 0.1);
    color: var(--theme-color);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-related-card .cs-arrow {
    margin-left: auto;
    background: none;
    width: auto;
    height: auto;
    flex: 0 0 auto;
    font-size: 16px;
}

.cs-section-head {
    margin-bottom: 30px;
}

.cs-section-head h2 {
    font-size: 32px;
    font-weight: 500;
    margin: 0;
}

.cs-gallery-section,
.cs-related-section {
    padding: 90px 0 0;
}

.cs-related-section {
    padding-bottom: 100px;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .cs-overview .cs-photo { min-height: 320px; }
    .cs-gallery-grid,
    .cs-related-grid { grid-template-columns: repeat(2, 1fr); }
    .cs-story { padding-bottom: 70px; }
    .cs-quote blockquote { font-size: 20px; }
    .cs-gallery-section, .cs-related-section { padding-top: 70px; }
    .cs-related-section { padding-bottom: 70px; }
}

@media (max-width: 575px) {
    .cs-facts { padding: 26px 22px; }
    .cs-facts h2, .cs-block h2, .cs-section-head h2 { font-size: 26px; }
    .cs-fact { flex-direction: column; gap: 4px; }
    .cs-fact dd { text-align: left; }
    .cs-tags { justify-content: flex-start; }
    .cs-gallery-grid,
    .cs-related-grid { grid-template-columns: 1fr; }
    .cs-sample-block { padding: 22px 18px 20px; }
    .cs-quote-section { padding: 60px 0; }
}

.cs-gallery-grid figure {
    position: relative;
}


/* Portrait-orientation photos whose subject sits to one side: the 4:3 crop
   would otherwise centre on empty space. */
.cs-gallery-grid .cs-focus-right img {
    object-position: right center;
}

/* Provenance note under a section heading — used where photographs
   illustrate the process rather than showing that specific centre. */
.cs-section-note {
    max-width: 680px;
    margin: 10px auto 0;
    font-size: 15px;
    line-height: 1.7;
    color: #6b7280;
}

/* Hero photo with a caption underneath — used where the photograph
   illustrates the work rather than showing that specific centre. */
.cs-overview .cs-photo--captioned {
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
    background: transparent;
}

.cs-overview .cs-photo--captioned img {
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 16px;
}

.cs-overview .cs-photo--captioned figcaption {
    flex: 0 0 auto;
    padding-top: 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #6b7280;
}


/* ==========================================================================
   MORE CASE STUDIES — the other two centres at the foot of each story.
   Each card is a single anchor, so everything inside it is inline-level:
   spans doing the work of headings and lists.
   ========================================================================== */

.cs-more-section {
    padding: 90px 0 100px;
}

.cs-more-section .cs-section-head p {
    margin: 10px 0 0;
    color: #6b7280;
    font-size: 15px;
}

.cs-more-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.cs-more-card {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 6px 24px rgba(32, 64, 102, 0.09);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.cs-more-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(32, 64, 102, 0.18);
}

/* ---------- Photo ---------- */

.cs-more-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #0d1f33;
}

.cs-more-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.cs-more-card:hover .cs-more-media img {
    transform: scale(1.06);
}

.cs-more-type {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: inline-block;
    padding: 5px 12px;
    border-radius: 55px;
    background-color: var(--theme-color);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ---------- Copy ---------- */

.cs-more-body {
    display: block;
    padding: 22px 24px 24px;
}

.cs-more-name {
    display: block;
    color: #0d1f33;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
}

.cs-more-city {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    color: #6b7280;
    font-size: 13px;
}

.cs-more-city i {
    color: var(--theme-color);
    font-size: 12px;
}

/* The two headline numbers, side by side. */
.cs-more-stats {
    display: flex;
    gap: 10px;
    margin: 16px 0 18px;
}

.cs-more-stats > span {
    flex: 1 1 0;
    padding: 11px 14px;
    border-radius: 10px;
    background-color: #f2f5f7;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.4;
}

.cs-more-stats em {
    display: block;
    margin-bottom: 2px;
    color: #0d1f33;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
}

.cs-more-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--theme-color-2);
    font-size: 14px;
    font-weight: 700;
    transition: color 0.3s ease;
}

.cs-more-link i {
    font-size: 11px;
    transition: transform 0.3s ease;
}

.cs-more-card:hover .cs-more-link {
    color: var(--theme-color);
}

.cs-more-card:hover .cs-more-link i {
    transform: translateX(4px);
}

@media (max-width: 767px) {
    .cs-more-section { padding: 60px 0 70px; }
    .cs-more-grid { grid-template-columns: 1fr; gap: 22px; }
    .cs-more-body { padding: 20px 20px 22px; }
    .cs-more-name { font-size: 19px; }
}


/* ==========================================================================
   WALKTHROUGH VIDEO — click-to-play facade on a case study.
   ========================================================================== */

.cs-video-section {
    padding: 0 0 90px;
}

.cs-video-section .cs-section-head p {
    margin: 8px 0 0;
    color: #6b7280;
    font-size: 15px;
}

/* Fixed 16:9 frame. Without it a portrait clip renders at its own aspect
   once it replaces the poster - the Sree Ranga walkthrough is 432x864, so
   at 900px wide it came out 1800px tall and pushed the page apart. The box
   now stays the size of the poster and the clip is fitted inside it. */
.cs-video {
    position: relative;
    max-width: 900px;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;
    background-color: #0d1f33;
    box-shadow: 0 18px 46px rgba(13, 31, 51, 0.20);
}

.cs-video-play {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: none;
    line-height: 0;
}

.cs-video-play img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-video-play::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(13, 31, 51, 0.28);
    transition: background-color 0.3s ease;
}

.cs-video-play:hover::after {
    background-color: rgba(13, 31, 51, 0.16);
}

.cs-video-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background-color: var(--theme-color);
    color: #fff;
    font-size: 22px;
    box-shadow: 0 0 0 10px rgba(0, 152, 74, 0.22);
    transition: transform 0.3s ease;
}

.cs-video-play:hover .cs-video-icon {
    transform: translate(-50%, -50%) scale(1.08);
}

/* Swapped in by the facade script once play is pressed. Fitted to the frame
   above rather than sizing itself, so a portrait clip letterboxes instead of
   stretching the section. */
.cs-video video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background-color: #000;
}

@media (max-width: 767px) {
    .cs-video-section { padding-bottom: 60px; }
    .cs-video-icon { width: 54px; height: 54px; font-size: 18px; box-shadow: 0 0 0 8px rgba(0, 152, 74, 0.22); }
}