/* Shared page chrome: base styles, navbar and footer used by about.html and
   building_india_case_study_competition.html. Load before the page's own stylesheet. */
@font-face {
    font-family: Helvetica;
    src: url('../font/helvetica-255/Helvetica.ttf') format('truetype');
    font-display: swap
}

@font-face {
    font-family: Helvetica;
    src: url('../font/helvetica-255/Helvetica-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap
}

:root {
    --navy: #00123a;
    --ink: #151c28;
    --gold: #f5b123;
    --rust: #da591b;
    --sans: Helvetica, 'Helvetica Neue', Arial, sans-serif;
    --display: 'DM Serif Display', Georgia, serif;
    --text-serif: 'DM Serif Text', Georgia, serif;
    --gutter: max(80px, calc((100% - 1280px) / 2));
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; font-family: var(--sans); color: var(--ink); font-size: 16px; line-height: 1.5; background: #fff }
h1, h2, h3, h4, p, ul { margin: 0 }
ul { padding: 0; list-style: none }
img { display: block; max-width: 100% }
a { color: inherit; text-decoration: none }
button, input { font: inherit }
button { cursor: pointer }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px }

.sr-only, .skip-link:not(:focus) {
    position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap
}
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 99; background: #fff; padding: 12px; color: var(--navy) }

/* Type scale matches conclave.html: 12px eyebrows, 45px section headings, 16px body. */
.eyebrow {
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 3.36px;
    text-transform: uppercase;
    color: var(--rust)
}

.section-heading { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center }
.section-heading h2 { font: 400 45px/54px var(--text-serif) }
.section-heading em { font-style: italic }

/* Header: shared with conclave.html (conclave-2027.css + conclave-design.css). */
.site-header {
    position: absolute;
    z-index: 5;
    top: 0;
    left: var(--gutter);
    width: calc(100% - 2 * var(--gutter));
    height: 96px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    color: #fff
}
.site-header>a img { width: 110px; height: 120px; object-fit: cover; object-position: bottom; border-radius: 0 0 12px 12px }
.site-header nav { display: flex; align-items: center; gap: 30px; padding-top: 16px; font-size: 14px; font-weight: 500; line-height: 21px }
.contact-button {
    margin-left: -14px;
    padding: 12px 20px;
    border-radius: 1000px;
    background: #F5B123;
    color: var(--navy);
    white-space: nowrap
}
.contact-button:hover { background: #e39e0e }
.menu-toggle { display: none }
.work-dropdown { position: relative }
.work-toggle { display: flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: #f2f2f7; font: inherit }
.work-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform 180ms ease }
.work-toggle[aria-expanded="true"] svg { transform: rotate(180deg) }
.work-links {
    position: absolute;
    top: calc(100% + 16px);
    right: 0;
    width: 330px;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    color: #12283f;
    box-shadow: 0 12px 32px #0003
}
.work-links[hidden] { display: none }
.work-links a { display: block; padding: 12px; border-radius: 6px; line-height: 21px; color: #12283f }
.work-links a:hover, .work-links a:focus-visible { background: transparent; color: inherit }

/* Keep dropdown link text in its normal color on hover and keyboard focus (from conclave page). */
#main-nav .work-links a:hover,
#main-nav .work-links a:focus-visible {
    color: inherit;
    background: transparent;
}

/* Navigation emphasis without shifting adjacent items as the text thickens (from conclave page). */
#main-nav > a:not(.contact-button), #main-nav .work-toggle, #main-nav .work-links a {
    position: relative;
    transition: text-shadow 220ms ease;
}
#main-nav > a:not(.contact-button)::after, #main-nav .work-toggle::after, #main-nav .work-links a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 280ms cubic-bezier(.22,1,.36,1);
    pointer-events: none;
}
#main-nav .work-links a::after { left: 12px; right: 12px; bottom: 4px; }
#main-nav > a:not(.contact-button):focus-visible, #main-nav .work-toggle:focus-visible, #main-nav .work-links a:focus-visible {
    text-shadow: .3px 0 currentColor, -.3px 0 currentColor;
}
#main-nav > a:not(.contact-button):focus-visible::after, #main-nav .work-toggle:focus-visible::after, #main-nav .work-links a:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) {
    #main-nav > a:not(.contact-button):hover, #main-nav .work-toggle:hover, #main-nav .work-links a:hover { text-shadow: .3px 0 currentColor, -.3px 0 currentColor; }
    #main-nav > a:not(.contact-button):hover::after, #main-nav .work-toggle:hover::after, #main-nav .work-links a:hover::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
    #main-nav > a:not(.contact-button), #main-nav .work-toggle, #main-nav .work-links a,
    #main-nav > a:not(.contact-button)::after, #main-nav .work-toggle::after, #main-nav .work-links a::after { transition: none; }
}

/* Active page indicator */
#main-nav > a[aria-current="page"] {
    text-shadow: .3px 0 currentColor, -.3px 0 currentColor;
}
#main-nav > a[aria-current="page"]::after {
    transform: scaleX(1);
}

/* Footer: shared with conclave.html. */
.about-footer { min-height: 304px; padding: 50px var(--gutter) 22px; background: var(--navy); color: #fff }
.footer-top { display: grid; grid-template-columns: 396fr 283fr 117fr 404fr; gap: 30px; align-items: start }
.foundation { display: flex; align-items: flex-start; gap: 16px }
.foundation img { flex: none; width: 80px; height: 81px; object-fit: contain }
.foundation h4 { margin: 0 0 13px; font: 400 20px/1.2 var(--text-serif) }
.foundation p { font-size: 14px; color: #cecece }
.footer-top h3 { margin-bottom: 16px; font: 400 12px/14px Helvetica, Arial, sans-serif; letter-spacing: 1.2px; color: #5a677c }
.footer-top>div:not(.foundation)>a { display: block; font-size: 14px; line-height: 23.68px; letter-spacing: .16px }
.footer-top>div:not(.foundation)>a:hover { color: #F5B123 }
.subscribe form { display: flex; gap: 9px; height: 41px }
.subscribe input {
    flex: 1;
    min-width: 0;
    padding: 10px 20px;
    border: 1px solid #5a6780;
    border-radius: 1000px;
    background: transparent;
    color: #fff;
    font-size: 14px
}
.subscribe input::placeholder { color: #5a6780 }
.subscribe button { flex: 0 0 95px; border: 0; border-radius: 1000px; background: #F5B123; color: var(--navy); font-size: 14px }
.subscribe button:hover { background: #e39e0e }
.subscribe button:disabled { opacity: .7; cursor: progress }
#subscribe-status { margin-top: 8px; font-size: 13px }
#subscribe-status:empty { display: none }
.socials { display: flex; gap: 14px; margin: 10px 0 0 9px }
.socials a { width: 20px; height: 20px }
.socials svg, .footer-bottom svg { display: block }
.footer-bottom { display: grid; grid-template-columns: 1fr auto 45px; align-items: center; gap: 30px; margin-top: 52px }
.footer-bottom>small { grid-column: 1; grid-row: 1; font-size: 12px; line-height: 17.76px; letter-spacing: .12px; color: #354e6d }
.footer-bottom>p { grid-column: 2; grid-row: 1; font: italic 400 30px/36px var(--text-serif) }
.footer-bottom>p em { color: #fff }
.footer-bottom .round { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px }

@media (max-width: 1199px) {
    :root { --gutter: 40px }
    .about-footer { padding: 40px 32px }
    .footer-top { grid-template-columns: 2fr 1.5fr 1fr }
    .subscribe { grid-column: 1 / -1; width: 100%; max-width: 404px }
    .footer-bottom { grid-template-columns: minmax(0, 1fr) auto 45px; gap: 16px }
    .footer-bottom>p { font-size: 24px; line-height: 30px }
}

@media (max-width: 767px) {
    :root { --gutter: 20px }
    .site-header { height: 80px }
    .site-header>a img { width: 85px; height: 93px; border-radius: 0 0 10px 10px }
    .menu-toggle { display: block; margin-top: 20px; padding: 2px 10px; border: 1px solid #ffffff70; border-radius: 6px; background: none; color: #fff; font-size: 22px }
    .site-header nav {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        padding: 22px;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        border: 1px solid #354e6d;
        border-radius: 12px;
        background: #0d1b2a
    }
    .site-header nav.open { display: flex }
    .contact-button { margin-left: 0 }
    .work-dropdown { width: 100% }
    .work-links { position: static; width: 100%; margin-top: 12px }
    .about-footer { padding: 40px 20px 24px }
    .footer-top { grid-template-columns: 1fr 1fr }
    .foundation, .subscribe { grid-column: 1 / -1 }
    .subscribe { max-width: none }
    .footer-bottom { grid-template-columns: 1fr 45px; gap: 20px; margin-top: 36px }
    .footer-bottom>p { grid-column: 1 / -1; grid-row: 1 }
    .footer-bottom>small { grid-column: 1; grid-row: 2 }
    .footer-bottom .round { grid-column: 2; grid-row: 2 }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto }
    .work-toggle svg { transition: none }
}