/* Randhawa Property Advisers — home + shared */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --cream: #faf8f0;
    --cream-card: #f3efe4;
    --olive: #6d8a3e;
    --olive-dark: #4d6230;
    --forest: #1e3a2f;
    --stat-bar: #6d7d3f;
    --gold: #b8942e;
    --gold-bright: #d4af61;
    --gold-soft: #e8d48a;
    --bronze: #6b4e2e;
    --charcoal: #4b4b4b;
    --tan-pill: #dcd2b8;
    --text: #2c2c2c;
    --font-serif: "Cormorant Garamond", Georgia, serif;
    --font-display: "Playfair Display", Georgia, serif;
    --font-sans: "Source Sans 3", system-ui, sans-serif;
    /* Hero gallery images (e.g. about-card-*.jpg) — frame height tracks photo aspect */
    --hero-photo-aspect: 1556 / 2000;
}

body {
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--cream);
    line-height: 1.55;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
}

/* —— Brand (used in .subpage-header on every page) —— */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: var(--text);
}

.brand-mark {
    flex-shrink: 0;
}

.brand-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.05;
    gap: 0.1rem;
}

.brand-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    letter-spacing: 0.06em;
    color: var(--forest);
}

.brand-tag-block {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.32rem;
    margin-top: 0.2rem;
    width: fit-content;
}

.brand-tag-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-bright) 15%, var(--gold) 50%, var(--gold-bright) 85%, transparent);
    opacity: 0.95;
}

.brand-tag {
    font-family: var(--font-display);
    font-size: clamp(0.58rem, 1.25vw, 0.68rem);
    letter-spacing: 0.22em;
    color: var(--gold);
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    padding: 0 0.15rem;
}

.brand--logo {
    gap: 0;
}

.brand-logo-img {
    height: 76px;
    width: 280px;
    max-width: 65vw;
    object-fit: cover;
    object-position: left center;
    display: block;
    /* Helps remove the "white box" effect from logo.jpg */
    mix-blend-mode: multiply;
}

.brand-logo-img--hero {
    height: 52px;
    max-width: min(300px, 58vw);
    object-fit: cover;
    object-position: left center;
    mix-blend-mode: multiply;
}

.brand-logo-img--footer {
    height: 70px;
    max-width: 280px;
    filter: brightness(1.2) contrast(1.2);
    object-fit: cover;
    object-position: left center;
}

/* —— Hero —— */
.hero {
    padding: 1.5rem clamp(1.25rem, 4vw, 4rem) 2.5rem;
    background: var(--cream);
}

.hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

.hero-copy {
    text-align: center;
    padding: 0.5rem 0;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.65rem);
    font-weight: 600;
    font-style: italic;
    color: var(--forest);
    line-height: 1.28;
    max-width: 20ch;
    margin: 0 auto 1.25rem;
}

.hero-rule {
    width: min(100%, 220px);
    height: 1px;
    margin: 0 auto 1.35rem;
    background: rgba(30, 58, 47, 0.18);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.btn {
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
    font-size: clamp(0.68rem, 1.4vw, 0.78rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-family: var(--font-display);
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.btn-pill {
    background: var(--olive);
    color: #fff;
    padding: 0.9rem 1.5rem;
    border-radius: 999px;
    border: none;
    text-align: center;
    box-shadow: 0 2px 12px rgba(77, 98, 48, 0.2);
}

.btn-pill:hover {
    background: var(--olive-dark);
}

.btn-pill:active {
    transform: scale(0.98);
}

/* Hero image grid */
.hero-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0.65rem; /* Kept your original spacing */
    align-items: start;
    max-height: none;
}

.hero-gallery-main {
    grid-column: 1 / -1;
    width: 100%;
    aspect-ratio: 16 / 9; /* FIX: Made the top frame a wide landscape shape */
    min-height: 0;
    border-radius: 14px; /* Kept your original rounded corners */
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(44, 44, 44, 0.12); /* Kept your original shadow */
}

.hero-gallery-main img,
.hero-gallery-main video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This makes the video perfectly fill the frame */
    object-position: center;
    display: block;
}

.hero-gallery-sub {
    width: 100%;
    aspect-ratio: 4 / 3; /* FIX: Made the bottom frames a balanced rectangle shape */
    min-height: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(44, 44, 44, 0.1);
}

.hero-gallery-sub img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* —— Stat bar —— */
.stat-bar {
    background: linear-gradient(90deg, #c9a85a 0%, #a67c32 35%, #8a6228 70%, #5c4a2e 100%);
    color: #fff;
    text-align: center;
    padding: clamp(0.85rem, 2vw, 1.15rem) 1.25rem;
    font-family: var(--font-display);
    font-size: clamp(0.75rem, 1.8vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.stat-sep {
    margin: 0 0.5rem;
    opacity: 0.85;
}

/* —— Intro —— */
.intro {
    padding: clamp(2.5rem, 6vw, 4.25rem) clamp(1.25rem, 4vw, 4rem);
    background: var(--cream);
}

.intro-text {
    max-width: 46rem;
    margin: 0 auto;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(1.02rem, 2.1vw, 1.2rem);
    line-height: 1.65;
    color: var(--forest);
}

.intro-text strong {
    font-weight: 700;
    color: var(--forest);
}

/* —— Section titles —— */
.section-title {
    text-align: center;
    margin-bottom: 0.75rem;
}

.section-title-lines {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    color: var(--forest);
    display: inline-block;
    padding: 0 1rem;
    position: relative;
}

.section-title-lines::before,
.section-title-lines::after {
    content: "";
    position: absolute;
    top: 50%;
    width: min(120px, 18vw);
    height: 1px;
    background: rgba(44, 44, 44, 0.25);
}

.section-title-lines::before {
    right: 100%;
}

.section-title-lines::after {
    left: 100%;
}

.section-sub {
    text-align: center;
    font-size: 0.95rem;
    color: rgba(30, 58, 47, 0.75);
    max-width: 36rem;
    margin: 0 auto 2rem;
    font-family: var(--font-display);
}

/* —— Team —— */
.section-team {
    padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 4rem) clamp(2rem, 4vw, 3rem);
    background: var(--cream);
}

.team-grid {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 3vw, 1.75rem);
}

.team-card {
    background: var(--cream-card);
    border-radius: 14px;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    box-shadow: 0 4px 20px rgba(44, 44, 44, 0.06);
}

.team-name {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 1.2rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--forest);
    margin-bottom: 0.35rem;
}

.team-role {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.25rem;
    color: rgba(30, 58, 47, 0.65);
    margin-bottom: 0.85rem;
}

.team-bio {
    font-size: 1.2rem;
    color: #444;
    line-height: 1.6;
}

/* —— Why choose —— */
.section-why {
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 4rem) clamp(3rem, 6vw, 4.5rem);
    background: var(--cream);
}

.why-grid {
    max-width: 720px;
    margin: 2rem auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.why-pill {
    background: var(--tan-pill);
    color: var(--forest);
    text-align: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(0.8rem, 1.8vw, 0.92rem);
    padding: 1rem 1.1rem;
    border-radius: 999px;
    box-shadow: 0 2px 12px rgba(44, 44, 44, 0.06);
}

/* —— Footer —— */
.site-footer {
    background: var(--charcoal);
    color: #e8e8e8;
    padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 4rem);
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("images/transparent-background.jpg") center / cover no-repeat;
    opacity: 0.18;
    mix-blend-mode: screen;
    z-index: 0;
    pointer-events: none;
}

.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.brand--footer .brand-name {
    color: #e8eedd;
}

.brand--footer .brand-tag {
    color: var(--gold-soft);
}

.brand--footer .brand-tag-line {
    background: linear-gradient(90deg, transparent, var(--gold-soft) 20%, var(--gold) 50%, var(--gold-soft) 80%, transparent);
    opacity: 0.85;
}

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.25rem;
    text-align: right;
}

.footer-nav {
    font-size: 1.02rem;
    letter-spacing: 0.06em;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
    align-items: center;
}

.footer-nav a {
    color: #fff;
    text-decoration: none;
}

.footer-nav a:hover {
    color: var(--gold-soft);
}

.footer-nav-sep {
    color: rgba(255, 255, 255, 0.45);
    user-select: none;
}

.footer-contact {
    font-size: 1.05rem;
}

.footer-line {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.footer-line:first-child {
    margin-top: 0;
}

.footer-icon {
    flex-shrink: 0;
}

.footer-line a {
    color: #fff;
    text-decoration: none;
}

.footer-line a:hover {
    color: var(--gold-soft);
}

.contact-comma {
    margin: 0 0.15rem;
}

/* —— Properties page (legacy layout) —— */
.subpage-header {
    position: relative;
    z-index: 2;
    background: var(--cream);
    padding: 0.65rem clamp(1.25rem, 4vw, 4rem);
    box-shadow: 0 1px 0 rgba(44, 44, 44, 0.08);
}

.subpage-header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.subpage-header .nav-links {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.subpage-header .nav-links a {
    text-decoration: none;
    color: #444;
    font-weight: 500;
    font-size: 1.08rem;
}

.subpage-header .nav-links a:hover,
.subpage-header .nav-links a.active {
    color: var(--olive);
}

.container {
    padding: 3rem clamp(1.25rem, 4vw, 4rem);
    max-width: 1200px;
    margin: 0 auto;
}

.container h2 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    color: var(--forest);
}

.property-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.75rem;
    margin-top: 1.75rem;
}

.card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(44, 44, 44, 0.08);
}

.card-img {
    height: 200px;
    background-size: cover;
    background-position: center;
}

.card-info {
    padding: 1.25rem;
}

.card-info h3 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
}

.price {
    color: var(--olive-dark);
    font-weight: 700;
    font-size: 1.15rem;
    display: inline-block;
    margin-top: 0.35rem;
}

/* —— About page —— */
.page-about {
    background: #fff;
}

.about-hero-header {
    background: var(--cream);
}

.about-hero-top {
    display: grid;
    grid-template-columns: minmax(200px, 340px) 1fr;
    align-items: stretch;
    min-height: 200px;
    max-height: min(38vh, 340px);
}

.about-hero-brand {
    padding: clamp(1rem, 3vw, 1.75rem) clamp(1rem, 3vw, 2rem);
    align-self: center;
    background: var(--cream);
}

.about-hero-photo {
    overflow: hidden;
    min-height: 180px;
}

.about-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: scale(1.1);
    will-change: transform;
}

.about-hero-tagline {
    margin: 0;
    text-align: center;
    padding: clamp(0.65rem, 2vw, 0.95rem) 1rem;
    background: linear-gradient(90deg, #6b5430 0%, #8a6f3e 40%, #a68440 60%, #6b5430 100%);
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(0.82rem, 2vw, 1.05rem);
    font-style: italic;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.about-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 2.5rem) clamp(3rem, 6vw, 4rem);
    background: #fff;
}

.about-page-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 2.75rem);
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #111;
}

.about-flourish {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin: 1rem auto 1.15rem;
    max-width: 200px;
}

.about-flourish__line {
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.2);
}

.about-flourish__dot {
    font-size: 0.55rem;
    color: rgba(0, 0, 0, 0.4);
}

.about-lead {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.5vw, 1.35rem);
    font-weight: 700;
    text-align: center;
    color: #111;
    margin-bottom: 2.25rem;
}

.about-columns {
    display: grid;
    grid-template-columns: 1.25fr 0.95fr;
    gap: clamp(1.75rem, 4vw, 3rem);
    align-items: start;
}

.about-prose {
    font-family: var(--font-display);
    font-size: clamp(0.98rem, 1.8vw, 1.08rem);
    line-height: 1.7;
    color: #3a3a3a;
}

.about-prose p {
    margin-bottom: 1.1rem;
}

.about-prose p:last-child {
    margin-bottom: 0;
}

.about-prose q {
    font-style: italic;
    quotes: "“" "”";
}

.about-aside {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.about-box {
    background: #ede6d8;
    border-radius: 14px;
    padding: clamp(1.25rem, 3vw, 1.65rem);
    box-shadow: 0 4px 18px rgba(44, 36, 24, 0.08);
}

.about-box__title {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5c4a2e;
    margin-bottom: 0.75rem;
}

.about-box__text {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-style: italic;
    line-height: 1.65;
    color: #333;
}

.about-services {
    position: relative;
    padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 4vw, 2.5rem);
    background:
        linear-gradient(180deg, rgba(55, 42, 28, 0.82) 0%, rgba(40, 32, 22, 0.88) 100%),
        url("images/about-card-agricultural.jpg") center / cover no-repeat;
}

.about-services::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(180, 155, 110, 0.22);
    pointer-events: none;
}

.about-services__inner {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
}

.about-services__title {
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 3.5vw, 2.15rem);
    font-weight: 600;
    text-align: center;
    color: #d4b87a;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.about-services__flourish {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0.85rem auto 1rem;
    max-width: 180px;
}

.about-services__flourish span:first-child,
.about-services__flourish span:last-child {
    flex: 1;
    height: 1px;
    background: rgba(212, 184, 122, 0.55);
}

.about-services__orn {
    font-size: 0.5rem;
    color: rgba(212, 184, 122, 0.8);
}

.about-services__sub {
    font-family: var(--font-display);
    text-align: center;
    font-size: clamp(0.95rem, 2vw, 1.08rem);
    color: rgba(255, 248, 235, 0.92);
    max-width: 42rem;
    margin: 0 auto 2.25rem;
    line-height: 1.5;
}

.about-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 3vw, 1.5rem);
}

.about-service-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.about-service-card__img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.about-service-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.12);
    will-change: transform;
}

.about-service-card__body {
    padding: 1.1rem 1rem 1.35rem;
    text-align: center;
}

.about-service-card__icon {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.about-service-card__label {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: #2a2418;
}

.about-service-card__hint {
    font-weight: 500;
    font-size: 0.88em;
    color: #5c5346;
}

/* —— Services page —— */
.page-services {
    background: #fff;
}

.services-intro-section {
    max-width: 920px;
    margin: 0 auto;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 2rem) 2rem;
    text-align: center;
}

.services-page-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 2.85rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #1a1a1a;
}

.services-page-flourish {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 1rem auto 1.1rem;
    max-width: 240px;
}

.services-page-flourish__line {
    flex: 1;
    height: 1px;
    background: rgba(90, 70, 40, 0.35);
}

.services-page-flourish__orn {
    font-size: 1.05rem;
    color: #8a6f3e;
    line-height: 1;
}

.services-page-lead {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.5vw, 1.45rem);
    font-weight: 700;
    color: #111;
    margin-bottom: 1.5rem;
}

.services-page-blurb {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2vw, 1.12rem);
    line-height: 1.75;
    color: #444;
    font-style: italic;
    max-width: 42rem;
    margin: 0 auto;
}

.services-page-blurb em {
    font-style: italic;
    font-weight: 600;
    color: #2c2418;
}

.services-cards-section {
    background: var(--cream);
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2rem) clamp(3rem, 6vw, 4.5rem);
}

.services-cards-wrap {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: stretch;
}

.svc-card {
    background: #f7f4eb;
    border-radius: 16px;
    padding: clamp(1.35rem, 3vw, 1.85rem);
    box-shadow: 0 6px 28px rgba(44, 36, 24, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.svc-card__icon {
    margin-bottom: 0.85rem;
    display: flex;
    justify-content: center;
}

.svc-card__title {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2vw, 1.28rem);
    font-weight: 700;
    color: #5c4a2e;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.svc-card__title-note {
    font-weight: 600;
    font-size: 0.88em;
}

.svc-card__img {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.15rem;
    aspect-ratio: 4 / 3;
}

.svc-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.12);
    will-change: transform;
}

.svc-card__list {
    list-style: none;
    text-align: left;
    width: 100%;
    margin: 0 0 1rem;
    padding: 0;
}

.svc-card__list li {
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: #5c4a2e;
    padding: 0.4rem 0 0.4rem 1.15rem;
    position: relative;
    line-height: 1.45;
}

.svc-card__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #8a6f3e;
}

.svc-card__footer {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-style: italic;
    color: #6b5438;
    margin-top: auto;
    padding-top: 0.65rem;
    line-height: 1.55;
}

.services-cta {
    position: relative;
    padding: clamp(3.5rem, 8vw, 5.5rem) 1.5rem;
    background:
        linear-gradient(180deg, rgba(55, 45, 35, 0.72) 0%, rgba(80, 77, 61, 0.748) 100%),
        url("images/about-card-agricultural.jpg") center / cover no-repeat;
}

.services-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(200, 175, 130, 0.2);
    pointer-events: none;
}

.services-cta__inner {
    position: relative;
    z-index: 1;
    max-width: 46rem;
    margin: 0 auto;
    text-align: center;
}

.services-cta__title {
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 3.5vw, 2.1rem);
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
    margin-bottom: 1.75rem;
    line-height: 1.35;
}

.services-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
}

/* —— Contact page —— */
.page-contact {
    min-height: 100vh;
    position: relative;
}

.contact-page-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(253, 250, 242, 0.82) 0%, rgba(248, 244, 232, 0.88) 100%);
    filter: blur(0px);
    transform: none;
}

.contact-main {
    max-width: 1040px;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2rem) clamp(3rem, 6vw, 4rem);
    position: relative;
}

.contact-main::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: url("images/transparent-background.jpg") center / cover no-repeat;
    opacity: 0.18;
    z-index: 0;
    pointer-events: none;
}

.contact-intro {
    text-align: center;
    margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
    color: #111;
}

.contact-headline {
    font-family: "Playfair Display", var(--font-serif);
    font-weight: 600;
    font-size: clamp(1.65rem, 4vw, 2.35rem);
    line-height: 1.28;
    max-width: 22ch;
    margin: 0 auto;
    letter-spacing: 0.01em;
}

.contact-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin: 1.35rem auto 1.15rem;
    max-width: 320px;
}

.contact-divider__line {
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.22);
    min-width: 2rem;
}

.contact-divider__flourish {
    font-size: 0.65rem;
    color: rgba(0, 0, 0, 0.45);
    line-height: 1;
}

.contact-sub {
    font-family: "Playfair Display", var(--font-serif);
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    font-weight: 400;
    max-width: 36ch;
    margin: 0 auto;
    line-height: 1.45;
    color: #1a1a1a;
}

.contact-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(30, 30, 30, 0.12), 0 8px 24px rgba(30, 30, 30, 0.06);
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.contact-card__col {
    padding: clamp(2rem, 5vw, 3.25rem) clamp(1.75rem, 4vw, 3rem);
}

.contact-card__form-wrap {
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.contact-form-title {
    font-family: "Source Sans 3", var(--font-sans);
    font-size: 1.35rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 1.5rem;
}

.contact-form .field {
    margin-bottom: 1.15rem;
}

.contact-form label,
.contact-form .chip-legend {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: #111;
    margin-bottom: 0.4rem;
    font-family: var(--font-sans);
}

.contact-form .req {
    color: #c00;
}

.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid #c8c8c8;
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 1.08rem;
    color: #222;
    background: #fff;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: 2px solid rgba(255, 105, 243, 0.35);
    outline-offset: 1px;
    border-color: #bbb;
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.field-chips {
    border: none;
    margin: 0 0 1.15rem;
    padding: 0;
}

.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip {
    position: relative;
    cursor: pointer;
    margin: 0;
}

.chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.chip span {
    display: inline-block;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    border: 1px solid #c5c5c5;
    background: #f3f3f3;
    color: #333;
    font-size: 0.92rem;
    font-weight: 500;
    font-family: var(--font-sans);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.chip input:focus-visible + span {
    outline: 2px solid #111;
    outline-offset: 2px;
}

.chip input:checked + span {
    background: #e8e8e8;
    border-color: #888;
    color: #000;
}

.contact-submit {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.95rem 1.5rem;
    border: none;
    border-radius: 999px;
    background: #ff69f3;
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

.contact-submit:hover {
    background: #e952dc;
}

.contact-submit:active {
    transform: scale(0.99);
}

.form-feedback {
    margin-top: 1rem;
    font-size: 1.05rem;
    color: var(--olive-dark);
    font-weight: 600;
}

.form-disclaimer {
    margin-top: 1rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #666;
    max-width: 36rem;
}

.contact-card__direct {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: flex-start;
    padding-top: clamp(2.5rem, 6vw, 4rem);
}

.contact-direct-title {
    font-family: "Playfair Display", var(--font-serif);
    font-size: clamp(1.15rem, 2.5vw, 1.4rem);
    font-weight: 600;
    color: #111;
    margin-bottom: 2rem;
    line-height: 1.35;
    max-width: 14ch;
}

.contact-direct-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

.contact-direct-line {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: #111;
    text-align: left;
    max-width: 100%;
}

.contact-direct-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: #111;
}

.contact-direct-line a {
    color: #111;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.contact-direct-line a:hover {
    border-bottom-color: rgba(0, 0, 0, 0.35);
}

/* —— Responsive —— */
@media (max-width: 900px) {
    .hero-inner {
        grid-template-columns: 1fr;
    }

    .hero-gallery {
        max-height: none;
        order: -1;
    }

    .section-title-lines::before,
    .section-title-lines::after {
        display: none;
    }

    .team-grid {
        grid-template-columns: 1fr;
    }

    .why-grid {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        flex-direction: column;
    }

    .footer-right {
        align-items: flex-start;
        text-align: left;
    }

    .footer-line {
        justify-content: flex-start;
    }

    .footer-nav {
        justify-content: flex-start;
    }

    .contact-card {
        grid-template-columns: 1fr;
    }

    .contact-card__form-wrap {
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .contact-card__direct {
        padding-top: 2rem;
        padding-bottom: 2.5rem;
    }

    .about-hero-top {
        grid-template-columns: 1fr;
        max-height: none;
    }

    .about-hero-photo {
        min-height: 200px;
        max-height: 240px;
    }

    .about-columns {
        grid-template-columns: 1fr;
    }

    .about-service-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }

    .services-cards-wrap {
        grid-template-columns: 1fr;
        max-width: 440px;
        margin: 0 auto;
    }
}

@media (max-width: 520px) {
    .brand-logo-img {
        height: 44px;
        width: auto;
        max-width: 72vw;
    }

    .brand-logo-img--footer {
        height: 34px;
        max-width: 180px;
    }
}

@media (max-width: 640px) {
    .subpage-header .nav-links {
        gap: 0.4rem 1rem;
        font-size: 0.85rem;
    }

    .subpage-header .nav-links a {
        font-size: 0.98rem;
    }
}
/* --- MOBILE LOGO SIZE FIX --- */
@media (max-width: 768px) {
    .brand-logo-img {
        height: 135px !important; /* Increases the height */
        max-width: 125vw !important; /* Gives it more horizontal room */
        width: auto !important; 
        object-fit: contain !important; /* Ensures it scales proportionally */
    }
}
/* --- ABOUT US: FULL WIDTH PHOTO & HIDE LOGO --- */
.about-hero-top {
    grid-template-columns: 1fr !important; /* Forces the layout to be a single column */
}

/* This hides the logo box (anything inside that section that isn't the photo) */
.about-hero-top > div:not(.about-hero-photo) {
    display: none !important; 
}

/* This ensures the photo fills the new wider space */
.about-hero-photo {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important; /* Gives the photo a nice widescreen banner shape *//* Keeps the edges rounded */
}

.about-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* --- MOBILE HEADER: SAME LINE FIX --- */
@media (max-width: 768px) {
    /* 1. Force the navigation to stay in a single row */
    header nav, .subpage-header nav {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important; 
        padding: 10px 5% !important;
    }

    /* 2. Shrink the logo to leave room for the links */
    
    /* 3. Adjust the links to fit the remaining space */
    .nav-links {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        gap: 8px !important; /* Reduces space between links */
        margin: 0 !important;
        padding: 0 !important;
    }

    .nav-links a {
        font-size: 0.75rem !important; /* Smaller text so it all fits */
    }
}
/* --- FOOTER COPYRIGHT SECTION --- */
.footer-bottom {
    text-align: center;
    padding-top: 20px;
    margin-top: 30px;
    border-top: 1px solid #444; /* Adds a very subtle dark grey line above the text */
}

.footer-bottom p {
    margin: 0;
    font-size: 0.85rem; /* Slightly smaller text */
    color: #a0a0a0; /* A slightly dimmer grey so it doesn't distract from your main links */
}
/* --- FLOATING WHATSAPP BUTTON --- */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25d366; /* Official WhatsApp Green */
    color: #FFF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); /* Adds a nice drop shadow */
    z-index: 1000; /* Ensures it stays on top of all other elements */
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1); /* Makes it pop out slightly when hovered */
    background-color: #20b858;
    color: #FFF;
}

.whatsapp-icon {
    width: 35px;
    height: 35px;
    fill: white;
}

/* Slightly smaller button for mobile screens */
@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
    }
    .whatsapp-icon {
        width: 30px;
        height: 30px;
    }
}
/* --- STATS BANNER TEXT ENLARGEMENT --- */
.stat-bar { 
    width: 100vw !important; /* Forces the bar itself to span the full screen */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 30px 10px !important; /* Makes the gold bar a bit taller so the big text fits */
    
    /* The Text Fixes: */
    font-size: 1.6rem !important; /* Increases the font size significantly */
    letter-spacing: 4px !important; /* Spreads the letters out to span wider */
    word-spacing: 8px !important; /* Spreads the words apart */
    text-align: center !important;
}

/* Make it slightly smaller on mobile so it fits on a phone screen */
@media (max-width: 768px) {
    .stat-bar {
        font-size: 1.1rem !important;
        letter-spacing: 1px !important;
        word-spacing: 2px !important;
        padding: 20px 5px !important;
    }
}
.about-hero-tagline { 
    width: 100vw !important; /* Forces the bar itself to span the full screen */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 30px 10px !important; /* Makes the gold bar a bit taller so the big text fits */
    
    /* The Text Fixes: */
    font-size: 1.6rem !important; /* Increases the font size significantly */
    letter-spacing: 4px !important; /* Spreads the letters out to span wider */
    word-spacing: 8px !important; /* Spreads the words apart */
    text-align: center !important;
}

/* Make it slightly smaller on mobile so it fits on a phone screen */
@media (max-width: 768px) {
    .about-hero-tagline {
        font-size: 1.1rem !important;
        letter-spacing: 1px !important;
        word-spacing: 2px !important;
        padding: 20px 5px !important;
    }
}
/* --- HIDE SAFARI VIDEO CONTROLS --- */
.hero-gallery-main video::-webkit-media-controls {
    display: none !important;
}


/* 1. Stop Safari from stretching the layout boxes */
.about-columns > div,
.about-aside,
.about-bottom > div,
.services-cards-wrap > article,
.svc-card,
.about-image, 
.svc-card__photo,
.about-hero-photo {
    min-width: 0 !important; 
    min-height: 0 !important;
    overflow: hidden !important; /* Hard wall to prevent overlapping text */
}

/* 2. Force the images to behave inside those boxes */
.about-image img, 
.svc-card__photo img,
.about-hero-photo img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important; 
    object-fit: cover !important; /* Crops cleanly instead of squishing */
    display: block !important;
}
/* Color Palette & Global Tweaks */
:root {
    --gold-primary: #B59431;
    --gold-light: #E5D5A5;
    --cream-bg: #F9F7F2;
    --text-dark: #2D2D2D;
}

.page-why-us {
    background-color: #fff;
    color: var(--text-dark);
    font-family: 'Source Sans 3', sans-serif;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 1. Experience Section */
.top-banner {
    background-color: var(--gold-primary);
    color: white;
    text-align: center;
    padding: 10px 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.2rem;
}

.experience-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 50px;
    padding: 80px 0;
    align-items: center;
}

.big-number {
    display: block;
    font-family: var(--font-display);
    font-size: 9rem;
    color: var(--gold-primary);
    line-height: 1.2;
}

.exp-label {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.9rem;
    color: var(--gold-primary);
}

.exp-content h2, .section-tag {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    letter-spacing: 2px;
}

.ornament-divider {
    height: 2px;
    width: 100px;
    background: var(--text-dark);
    margin: 15px 0;
    position: relative;
}

.lead-text {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.lead-under-text {
    font-family: var(--font-display);
    font-size: 1rem;
}

/* 2. Features Grid */
.features-grid-section {
    background-color: var(--cream-bg);
    padding: 60px 0;
}

.features-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    text-align: center;
}

.feature-card {
    padding: 20px;
    font-family: var(--font-display);
}

.feature-card p{
    font-size: 1rem;  
    font-family: var(--font-display); 
}


.card-icon {
    font-size: 2rem;
    margin-bottom: 15px;
}

.feature-card h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    color: var(--gold-primary);
    margin-bottom: 10px;
}

/* 3. Process Section */
.process-section {
    padding: 80px 0;
    text-align: center;
}

.process-title {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 40px;
}

.process-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    font-size: 1.1rem;
    font-family: var(--font-display);
}

.step {
    flex: 1;
}

.step h4 {
    font-weight: 700;
    margin-bottom: 10px;
}

.arrow {
    padding-top: 5px;
    color: var(--gold-primary);
}

/* 4. Bottom CTA */
.bottom-cta {
    background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url('images/punjab-landscape.jpg');
    background-size: cover;
    padding: 100px 0;
    text-align: center;
}

.bottom-cta h2 {
    font-family: var(--font-display);
    font-size: 2.1rem;
    margin-bottom: 30px;
}

.cta-group {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.gold-btn {
    font-family: var(--font-display);
    background-color: #8DA051; /* Matching the olive green buttons in image */
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: transform 0.2s;
}

.gold-btn:hover {
    transform: scale(1.05);
}

/* Responsive */
@media (max-width: 768px) {
    .experience-grid, .process-wrapper {
        grid-template-columns: 1fr;
        flex-direction: column;
    }
    .arrow { display: none; }
}

/* --- BULLETPROOF MOBILE SWIPE NAV --- */
/* --- MOBILE HAMBURGER MENU --- */

/* 1. Hide the hamburger button on Desktop screens */
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 101; 
}

.hamburger-btn .bar {
    display: block;
    width: 30px;
    height: 3px;
    margin: 6px auto;
    background-color: var(--forest); /* Matches your brand green */
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

/* 2. Switch to Mobile Layout on Phones (Screens under 900px) */
@media (max-width: 900px) {
    /* Align the logo to the left and button to the right */
    header nav, 
    .subpage-header nav {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 15px 5% !important;
        position: relative;
    }

    /* Show the hamburger button */
    .hamburger-btn {
        display: block;
    }

    /* Turn the horizontal links into a vertical dropdown menu */
    .nav-links {
        display: none !important; /* Hidden completely by default */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #ffffff;
        flex-direction: column !important;
        align-items: center !important;
        padding: 25px 0 !important;
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        gap: 25px !important;
        z-index: 100;
        margin: 0 !important;
    }

    /* The script adds this class when the button is clicked to reveal the menu */
    .nav-links.show-menu {
        display: flex !important; 
    }

    /* Animate the 3 lines into an "X" when active */
    .hamburger-btn.active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .hamburger-btn.active .bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger-btn.active .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
}
/* --- INCREASE MOBILE FOOTER LOGO SIZE --- */
@media (max-width: 900px) {
    .brand-logo-img.brand-logo-img--footer {
        width: 220px !important; /* This makes it significantly larger */
        max-width: 80vw !important; /* Ensures it never breaks outside the phone screen */
        height: auto !important;/* Aligns the logo to the left for a more natural mobile layout */
    }
}

/* --- RESPONSIVE FIXES FOR MOBILE --- */

@media (max-width: 768px) {
    /* Shrink the massive "25+" so it doesn't overflow */
    .big-number {
        font-size: 6rem;
    }
    .big-number span {
        font-size: 3rem;
    }
    .stat-subtitle {
        font-size: 1.2rem;
        margin-bottom: 20px;
    }

    /* Stack Hero Content */
    .hero-grid {
        flex-direction: column;
        padding: 40px 0;
        text-align: center;
        gap: 20px;
    }

    .title-decoration {
        margin: 0 auto 20px;
    }

    /* Features: 2 columns on mobile for better readability */
    .features-wrapper {
        grid-template-columns: 1fr 1fr;
        gap: 30px 15px;
    }

    /* Process Flow: Vertical Stack */
    .process-steps-container {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    /* Rotate arrows to point DOWN instead of right */
    .process-arrow {
        transform: rotate(90deg);
        margin: 10px 0;
        font-size: 1.5rem;
    }

    .step-box h4 {
        min-height: auto;
        margin-bottom: 5px;
    }
    
    /* Center text for all process steps */
    .step-box {
        width: 100%;
        max-width: 300px;
    }
}

/* For very small screens (phones) */
@media (max-width: 480px) {
    .features-wrapper {
        grid-template-columns: 1fr; /* Single column for tiny screens */
    }
    .top-experience-bar p {
        font-size: 1rem;
        padding: 0 10px;
    }
}

/* =========================================
   WHY CHOOSE US PAGE STYLES
========================================= */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 1. Experience Section */
.experience-section {
    padding: 80px 0;
    background-color: var(--cream);
}

.experience-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.exp-badge {
    flex: 0 0 35%;
    text-align: center;
}

.big-number {
    display: block;
    font-family: var(--font-serif);
    font-size: 9rem;
    color: var(--gold-bright);
    line-height: 0.9;
}

.exp-label {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.8rem;
    color: var(--gold-bright);
    margin-top: 10px;
}

.exp-content {
    flex: 1;
}

.section-tag {
    font-family: var(--font-display);
    font-size: 2.8rem;
    color: var(--text);
    display: block;
    line-height: 1.2;
}

.ornament-divider {
    width: 80px;
    height: 2px;
    background-color: var(--text);
    margin: 20px 0;
}

.lead-text {
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--text);
}

.lead-under-text {
    font-size: 1rem;
    color: var(--charcoal);
}

/* 2. Features Grid Section */
.features-grid-section {
    background-color: var(--cream-card);
    padding: 70px 0;
}

.features-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.feature-card {
    padding: 15px;
}

.card-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.feature-card h3 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--gold);
    margin-bottom: 10px;
    line-height: 1.3;
}

/* 3. Process Section */
.process-section {
    padding: 90px 0;
    text-align: center;
    background-color: var(--cream);
}

.process-title {
    font-family: var(--font-display);
    font-size: 2.5rem;
    margin-bottom: 60px;
}

.process-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.step {
    flex: 1;
}

.step h4 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 10px;
    min-height: 45px;
}

.arrow {
    font-size: 1.5rem;
    color: var(--text);
    margin-top: 10px;
}

/* =========================================
   MOBILE RESPONSIVE RULES
========================================= */

@media (max-width: 992px) {
    /* Adjust grid for tablets */
    .features-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

@media (max-width: 768px) {
    /* Stack Hero Section */
    .experience-grid {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        padding: 20px 0;
    }

    .exp-badge {
        width: 100%;
    }

    .big-number {
        font-size: 6.5rem;
    }

    .section-tag {
        font-size: 2.2rem;
    }

    .ornament-divider {
        margin: 20px auto; /* Centers the line on mobile */
    }

    /* Features Grid to 1 Column */
    .features-columns {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Process Flow to Vertical Stack */
    .process-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .step {
        width: 100%;
        max-width: 320px;
    }

    .step h4 {
        min-height: auto;
    }

    /* Point arrows DOWN on mobile */
    .arrow {
        transform: rotate(90deg);
        margin: 15px 0;
        display: block;
    }
}
/* 1. Hide the logo by default (for mobile) */
.desktop-hero-logo {
    display: none;
}

/* 2. Show the logo only on screens wider than 768px (Tablets & Desktops) */
@media (min-width: 900px) {
    .desktop-hero-logo {
        display: block; /* Makes it visible */
        max-width: 400px; /* Adjust this number to make the logo larger or smaller */
        margin-bottom: -60px; /* Adds space between the logo and the text below it */
    }
}
@media (min-width: 1200px) {
    .desktop-hero-logo {
        display: block; /* Makes it visible */
        max-width: 550px; /* Adjust this number to make the logo larger or smaller */
        margin-bottom: -80px; /* Adds space between the logo and the text below it */
    }
}

/* =========================================
   macOS Safari Fix: Hero Image Containment
   ========================================= */

.about-hero-header {
    /* Forces Safari to clear floats and contain absolute children */
    position: relative;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
}

.about-hero-top {
    width: 100%;
    /* CRITICAL: Safari needs explicit shrink permissions on parent wrappers */
    min-height: 0; 
    min-width: 0;
    flex: 0 0 auto; 
}

.about-hero-photo {
    width: 100%;
    /* Stops Safari from using the image's original 1400px/600px size for layout calculation */
    height: fit-content;
    height: -webkit-fit-content; 
    min-height: 0;
}

.about-hero-photo img {
    width: 100%;
    height: auto;
    /* Prevent vertical bleed */
    max-height: 600px; 
    object-fit: cover;
    display: block;
}