/* Extends the existing Penguin Heights green and gold theme. */
html {
    scroll-padding-top:120px}
body {
    overflow-wrap:break-word}
[hidden] {
    display:none!important}
.skip-link {
    position:fixed;
    top:-80px;
    left:16px;
    z-index:2000;
    background:#fff;
    color:var(--green-dark);
    padding:12px 20px}
.skip-link:focus {
    top:12px}
a:focus-visible,button:focus-visible {
    outline:3px solid var(--gold);
    outline-offset:4px}

.navbar .brand-logo {
    height:66px;
    width:auto;
    max-width:190px}
.navbar .nav-link {
    font-size:.9rem;
    white-space:nowrap}
.navbar button.nav-link {
    border:0;
    background:transparent}
.navbar .nav-link.active,.navbar .dropdown-item.active {
    color:var(--green-dark);
    background:#eef7eb;
    border-radius:6px}
.navbar .dropdown-menu {
    padding:10px;
    border:1px solid #e6eddf;
    border-radius:8px;
    box-shadow:0 14px 36px rgba(37,48,71,.12);
    min-width:235px}
.navbar .dropdown-item {
    padding:9px 12px;
    font-size:.9rem;
    border-radius:5px}
.navbar .dropdown-item:hover {
    background:var(--soft);
    color:var(--green-dark)}
.gallery-nav>div {
    position:relative}

.page-hero {
    position:relative;
    overflow:hidden;
    background:radial-gradient(circle at 85% 10%,#fff0c4,transparent 40%),linear-gradient(130deg,#eef9f1,#f4faf8);
    padding:30px 0 65px;
    border-bottom:1px solid #e6eddf}
.page-hero .container {
    position:relative}
.breadcrumb {
    font-size:.82rem;
    margin-bottom:42px}
.breadcrumb a {
    color:var(--green-dark)}
.page-hero-copy {
    position:relative;
    z-index:1;
    max-width:800px}
.page-hero h1 {
    font-size:clamp(2.25rem,4.2vw,3.8rem);
    line-height:1.08;
    letter-spacing:-.035em;
    font-weight:800;
    margin:14px 0 20px}
.page-hero p {
    max-width:670px;
    margin:0;
    font-size:1.1rem;
    line-height:1.7;
    color:var(--muted)}
.hero-decoration {
    position:absolute;
    right:28px;
    bottom:-85px;
    font-size:210px;
    transform:rotate(-15deg);
    color:rgba(47,155,83,.08);
    pointer-events:none}

.section-title {
    letter-spacing:-.025em;
    font-size:clamp(1.9rem,3vw,2.65rem)}
.editorial-copy {
    color:var(--muted);
    font-size:1.05rem;
    line-height:1.9}
.editorial-copy p:last-child {
    margin-bottom:0}
.brand-story {
    background:var(--soft);
    border:1px solid #e6eddf;
    border-radius:8px;
    padding:44px;
    text-align:center}
.brand-story img {
    max-height:260px;
    object-fit:contain}
.brand-story p {
    color:var(--green-dark);
    font-weight:700;
    margin:24px 0 0}

.value-card,.offering-card,.team-card {
    background:#fff;
    border:1px solid #e6eddf;
    border-radius:8px;
    box-shadow:0 12px 32px rgba(37,48,71,.05);
    overflow:hidden}
.value-card {
    padding:32px}
.value-card h3,.offering-card h2 {
    font-size:1.25rem;
    line-height:1.4;
    font-weight:800;
    margin-bottom:12px}
.value-card p,.offering-card p {
    color:var(--muted);
    line-height:1.75;
    margin-bottom:0}
.icon-tile {
    display:inline-flex;
    width:54px;
    height:54px;
    border-radius:8px;
    align-items:center;
    justify-content:center;
    color:var(--green-dark);
    background:#edf7e9;
    font-size:1.35rem;
    margin-bottom:24px}
.value-card:hover .icon-tile {
    background:#fff1cf}

.vision-card {
    position:relative;
    overflow:hidden;
    background:var(--green-dark);
    color:#fff;
    border-radius:8px;
    padding:40px}
.vision-card h2 {
    font-size:2rem;
    font-weight:800}
.vision-card p {
    font-size:1.45rem;
    line-height:1.6;
    position:relative;
    z-index:1}
.vision-card .icon-tile {
    background:rgba(255,255,255,.13);
    color:#ffe7a2}
.vision-flower {
    font-size:210px;
    color:rgba(255,255,255,.07);
    position:absolute;
    right:-12px;
    bottom:-55px}
.mission-list {
    list-style:none;
    margin:28px 0 0;
    padding:0}
.mission-list li {
    display:flex;
    gap:18px;
    padding:18px 0;
    border-top:1px solid #e6eddf}
.mission-list li>span {
    color:var(--green);
    font-weight:800;
    font-size:1.2rem}
.mission-list h3 {
    font-size:1.1rem;
    margin-bottom:6px}
.motto-panel {
    border-radius:8px;
    padding:42px 24px;
    background:#fff7df}
.motto-panel h2 {
    color:var(--green-dark);
    font-size:clamp(1.8rem,3vw,2.6rem);
    font-weight:800;
    margin:14px 0}
.motto-panel p {
    margin:0;
    color:var(--muted);
    font-size:1.3rem}

.team-card img {
    display:block;
    width:100%;
    aspect-ratio:4/4.5;
    object-fit:cover;
    object-position:top}
.team-card>div {
    padding:24px}
.team-card h3,.team-card h2 {
    font-size:1.2rem;
    font-weight:800}
.team-card p {
    color:var(--muted);
    margin:0;
    font-size:.9rem}
.leadership-card img {
    aspect-ratio:auto;
    max-height:470px;
    object-fit:contain;
    background:var(--soft)}

.gallery-categories {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:36px}
.category-pill {
    border:1px solid #e4e8dc;
    background:#fff;
    color:var(--ink);
    border-radius:30px;
    padding:10px 18px;
    font-size:.88rem;
    font-weight:600}
.category-pill:hover,.category-pill.active {
    background:var(--green-dark);
    color:#fff;
    border-color:var(--green-dark)}
.photo-card {
    display:block;
    position:relative;
    overflow:hidden;
    border-radius:8px;
    background:#eceee5;
    box-shadow:0 10px 25px rgba(37,48,71,.06)}
.photo-card img {
    display:block;
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    transition:transform .35s}
.photo-card:hover img,.photo-card:focus-visible img {
    transform:scale(1.035)}
.photo-overlay {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:32px 18px 16px;
    background:linear-gradient(transparent,rgba(14,31,23,.8));
    color:#fff;
    font-size:.85rem;
    display:flex;
    justify-content:space-between;
    align-items:center}
.viewer-image {
    max-width:100%;
    max-height:70vh;
    object-fit:contain}
#galleryViewer .modal-body {
    background:#f5f6f2}

.offering-card>img {
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover}
.offering-card .icon-tile {
    margin-bottom:16px}
.hiring-poster {
    display:block;
    padding:12px;
    border:1px solid #e6eddf;
    border-radius:8px;
    background:var(--soft)}
.hiring-poster img {
    width:100%}
.contact-link,.text-link {
    color:var(--green-dark);
    font-weight:700;
    overflow-wrap:anywhere}
.contact-link:hover,.text-link:hover {
    text-decoration:underline}
.map-panel {
    border-radius:8px;
    border:1px solid #e6eddf;
    overflow:hidden;
    background:var(--soft)}
.map-panel iframe {
    display:block;
    width:100%;
    height:350px;
    border:0}
.social-links {
    display:flex;
    gap:10px}
.social-links a {
    display:inline-flex!important;
    width:36px;
    height:36px;
    align-items:center;
    justify-content:center;
    border:1px solid currentColor;
    border-radius:50%;
    color:var(--green-dark);
    margin:0!important}

.visit-band {
    padding:54px 0;
    background:linear-gradient(120deg,var(--green-dark),var(--green));
    color:#fff}
.visit-band h2 {
    font-weight:800;
    font-size:clamp(1.8rem,3vw,2.5rem);
    margin:12px 0}
.visit-band p {
    color:rgba(255,255,255,.85);
    margin-bottom:0}
.visit-band .btn {
    flex-shrink:0;
    align-self:flex-start}
.footer-brand img {
    max-width:175px;
    max-height:80px;
    padding:8px 12px;
    background:#fff;
    border-radius:6px}
.footer-heading {
    font-size:.95rem;
    font-weight:700;
    color:#fff;
    margin:0 0 20px}
.footer-copy {
    color:#c1cad7;
    font-size:.9rem;
    line-height:1.8}
.site-footer a {
    color:#dbe3ee;
    display:block;
    font-size:.88rem;
    margin:0 0 12px;
    overflow-wrap:anywhere}
.site-footer a:hover {
    color:#ffe7a2}
.footer-bottom {
    border-top:1px solid #445064;
    padding-top:24px;
    display:flex;
    justify-content:space-between;
    gap:16px;
    color:#c1cad7}

/* Animation failure and reduced-motion fallbacks keep all content readable. */
html:not(.aos-enabled) [data-aos] {
    opacity:1!important;
    transform:none!important}

@media(max-width:1199.98px) {
    .navbar .navbar-collapse {
    padding-top:18px}
.navbar .nav-link {
    padding:10px 12px}
.navbar .dropdown-menu {
    box-shadow:none;
    margin-bottom:10px}
.gallery-nav>div {
    flex-wrap:wrap}
.gallery-nav .dropdown-menu {
    width:100%}
}

@media(max-width:575.98px) {
    html {
    scroll-padding-top:96px}
.navbar .brand-logo {
    width:auto;
    height:52px}
.page-hero {
    padding:24px 0 40px}
.breadcrumb {
    margin-bottom:28px}
.page-hero p {
    font-size:1rem}
.hero-decoration {
    font-size:150px;
    right:0;
    bottom:-55px}
.value-card,.vision-card {
    padding:26px}
.category-pill {
    padding:8px 12px;
    font-size:.8rem}
.gallery-categories {
    gap:8px}
.footer-bottom {
    flex-direction:column}
.map-panel iframe {
    height:280px}
}

@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important}
[data-aos] {
    opacity:1!important;
    transform:none!important}
}


.portrait-monogram {
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:4/4.5;
    background:linear-gradient(135deg,#eaf4e5,#fff2d2);
    color:var(--green-dark);
    font-size:5rem;
    font-weight:800;
    letter-spacing:-.06em}


@media (max-width:1199.98px) {
    .navbar-collapse.show { max-height: calc(100dvh - 100px); overflow-y: auto; }
}
@media (max-width:575.98px) {
    .container > .row.g-5 { --bs-gutter-x: 1.5rem; }
}