*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
    background: #000;
    color: #fff;
}

.page {
    display: block;
    max-width: 1920px;
    margin: 0 auto;
}


/* ----- Header section: desktop default (1920 × 1080) ----- */

.header-section {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 1080;
    background-image: url("assets/header-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.header-title {
    position: absolute;
    /* Source 1920×1080: title box left 1243.82, top 447.10, width 518.43, height 175.80 */
    left: 64.78%;
    top: 41.40%;
    width: 27%;
    height: auto;
    display: block;
    user-select: none;
    pointer-events: none;
}


/* ----- Header section: mobile (900 × 1442) ----- */

@media (max-width: 768px) {
    .header-section {
        aspect-ratio: 900 / 1442;
        background-image: url("assets/header-bg-mobile.jpg");
    }
    .header-title {
        /* Source 900×1442: title box left 232.63, top 315.25, width 434.73, height 457.72 */
        left: 25.85%;
        top: 21.86%;
        width: 48.3%;
    }
}


/* ----- Aerial section: desktop default (1920pt artboard) ----- */

.aerial-section {
    background: #fff;
    color: #222;
    padding: 8% 0 5.5%;
    /* top gap above title 154pt / 1920 ≈ 8% */
    text-align: center;
}

.aerial-copy {
    margin: 0;
}

.aerial-title {
    display: block;
    margin: 0 auto;
    width: 25.06%;
    /* title 481.24 / 1920 */
    min-width: 320px;
    height: auto;
    user-select: none;
}

.aerial-desc {
    margin: 4.1vw auto 0;
    /* gap 79pt / 1920 ≈ 4.1% */
    max-width: 920px;
    /* fixed cap matching AI source 922.5pt */
    padding: 0 24px;
    /* breathing room when viewport < max-width */
    font-size: 22px;
    line-height: 1.95;
    letter-spacing: 0.06em;
    text-align: center;
}

.aerial-photo-wrap {
    position: relative;
    display: block;
    margin: 6.2vw auto 0;
    /* gap 119pt / 1920 ≈ 6.2% */
    width: 89.61%;
    /* clip 1720.46 / 1920 */
}

.aerial-photo {
    display: block;
    width: 100%;
}

.aerial-photo img {
    display: block;
    width: 100%;
    height: auto;
}

.aerial-caption {
    position: absolute;
    right: 16px;
    bottom: 12px;
    z-index: 6;
    color: #fff;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}


/* ----- Aerial section: mobile (900pt artboard) ----- */

@media (max-width: 768px) {
    .aerial-section {
        padding: 12% 0 8%;
    }
    .aerial-title {
        width: 53.47%;
        /* 481.24 / 900 */
        min-width: 0;
    }
    .aerial-desc {
        margin-top: 8.7vw;
        /* gap ~80pt / 900 */
        max-width: 85.29%;
        /* 767.6 / 900 */
        font-size: clamp(0.8rem, 3.4vw, 1rem);
        line-height: 1.85;
        letter-spacing: 0.04em;
        text-align: center;
    }
    .aerial-photo-wrap {
        width: 100%;
        max-width: 100dvw;
        margin-top: 11vw;
    }
    .aerial-caption {
        right: 12px;
        bottom: 10px;
        font-size: 12px;
    }
    .aerial-photo {
        width: 100%;
        max-width: 100dvw;
        overflow: auto;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* old Edge / IE */
    }
    .aerial-photo::-webkit-scrollbar {
        display: none;
        /* Chromium Edge / WebKit */
    }
    .aerial-photo img {
        width: auto;
        height: 50dvh;
        max-width: none;
    }
    .aerial-hint {
        position: absolute;
        inset: 0;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.3);
        color: #000;
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.4s ease;
    }
    .aerial-hint.is-hiding {
        opacity: 0;
    }
    .aerial-hint-inner {
        display: flex;
        align-items: center;
        gap: 14px;
    }
    .aerial-hint svg {
        display: block;
        width: 36px;
        height: 36px;
    }
    .aerial-hint-grab {
        width: 44px;
        height: 44px;
    }
}


/* ----- Features section: desktop default (1920pt artboard) ----- */

.features-section {
    background: #fff;
    color: #2a3933;
    /* deep teal matching title PNGs */
    padding: 4% 0 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}


/* Decorative V-line waves and soft mask overlay (matches AI groups
   "feature deco" and "mask"). Positioned behind feature-row content. */

.feature-deco,
.features-mask,
.features-mask-mobile {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.feature-deco img {
    display: block;
    width: 100%;
    height: auto;
}

.feature-row,
.brand-showcase {
    position: relative;
    z-index: 1;
}

.feature-deco {
    /* AI: top 150 / 4820 ≈ 3.1% from features section top, width 1666 / 1920 ≈ 87% */
    top: 3%;
    right: 0;
    width: 87%;
}

.features-mask {
    /* Desktop only — AI "mask" group (uuid 2960):
     top 1793 / 4820 ≈ 37%, width 2211 / 1920 ≈ 115% (overflows both edges) */
    top: 37%;
    left: -2%;
    width: 115%;
    height: auto;
}


/* Mobile mask is anchored inside the 3rd feature-row instead — hide here. */

.features-mask-mobile {
    display: none;
}

.feature-row {
    display: grid;
    align-items: center;
    column-gap: 5.2vw;
    padding: 10% 5.5%;
    /* gap between rows ~380pt / 1920 → ~20% combined (10% top + 10% bottom) */
}

.feature-row--text-left {
    grid-template-columns: 35fr 65fr;
    /* text 35% / photo 65% */
}

.feature-row--text-right {
    grid-template-columns: 65fr 35fr;
    /* photo 65% / text 35% */
}

.feature-row--text-left .feature-text {
    order: 0;
}

.feature-row--text-left .feature-photo {
    order: 1;
}

.feature-row--text-right .feature-photo {
    order: 0;
}

.feature-row--text-right .feature-text {
    order: 1;
}

.feature-text {
    justify-self: center;
    text-align: center;
}

.feature-title {
    margin: 0;
    /* h2 keeps semantics; the SVG inside renders the typographic art */
}

.feature-title img {
    display: inline-block;
    width: auto;
    max-width: 70%;
    /* relative to .feature-text column (35% of row), keeps title compact */
    height: auto;
    user-select: none;
}

.feature-rule {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #D78C55 12%, #D78C55 88%, transparent);
    margin: 2.4vw 0 1.8vw;
}

.feature-desc {
    margin: 0;
    font-size: 22px;
    line-height: 1.85;
    letter-spacing: 0.04em;
    text-align: justify;
}

.feature-photo img {
    display: block;
    width: 100%;
    height: auto;
}

.brand-showcase {
    display: block;
    margin: 3.5% 0 0;
    padding: 0 5%;
    /* match AI side margins (1920-1723)/2 ≈ 5% */
}

.brand-showcase img {
    display: block;
    width: 100%;
    height: auto;
}


/* ----- Features section: mobile (≤768px) ----- */

@media (max-width: 768px) {
    .features-section {
        padding: 8% 0 0;
    }
    .feature-deco {
        /* mobile artboard 900: deco PNG is 1070 / 900 ≈ 119% wide; bleed past right */
        top: 2%;
        right: -10%;
        width: 119%;
    }
    /* Desktop mask hidden on mobile; mobile mask is rendered inside the 3rd
     feature-row (matches AI "mask-mobile" group / uuid 7297). */
    .features-mask {
        display: none;
    }
    .features-mask-mobile {
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translateY(-20%);
        z-index: -1;
    }
    .feature-row,
    .feature-row--text-left,
    .feature-row--text-right {
        grid-template-columns: 1fr;
        row-gap: 5vw;
        padding: 14% 7%;
        /* mobile vertical breathing room ~149pt / 900 ≈ 16% combined */
    }
    /* on mobile: title/desc always above photo regardless of desktop ordering */
    .feature-row .feature-text {
        order: 0;
    }
    .feature-row .feature-photo {
        order: 1;
    }
    .feature-text {
        max-width: 100%;
        text-align: center;
    }
    .feature-title img {
        max-width: 60%;
    }
    .feature-rule {
        margin: 10vw auto;
        width: 80%;
    }
    .feature-desc {
        font-size: clamp(0.82rem, 3.4vw, 1rem);
        line-height: 1.95;
        letter-spacing: 0.04em;
        text-align: center;
    }
    .brand-showcase {
        margin-top: 6%;
        padding: 0 4%;
        /* mobile side padding ≈ 33pt / 900 */
    }
}


/* ----- Corporation section ----- */

.corp-section {
    background: #fff;
    color: #2a3933;
    padding: 5% 0 8%;
    /* no horizontal padding — children align to corp-section edges */
    position: relative;
    overflow: hidden;
    /* keep V-line bleed contained within section */
}


/* awards-blocks share the same horizontal inset so they sit inboard of corp-section */


/* Tagline composite SVG (V-line/KHAA decoration + orange frame + title text)
   exported from Illustrator as one merged group, so positioning is baked in. */

.corp-tagline {
    display: block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.corp-tagline-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    user-select: none;
}

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

.corp-tagline--bottom {
    margin-top: 6%;
}


/* Awards block (header label + list of bordered boxes) */

.awards-block {
    margin: 4% auto 0;
    padding: 0 6%;
    text-align: center;
}

.awards-label {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 0.9rem;
    letter-spacing: 0.4em;
    color: #D78C55;
}

.awards-label::before,
.awards-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #D78C55;
}

.awards-label::before {
    margin-right: 1em;
}

.awards-label::after {
    margin-left: 1em;
}

.awards-list {
    list-style: none;
    margin: 1.6em 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.2vw;
}


/* Each award li renders as an SVG (frame + text) at every breakpoint, so the
   square never deforms when the column gets narrow. The original text node is
   kept for screen readers but visually hidden. */

.awards-list li {
    display: block;
    padding: 0;
    border: 0;
}

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

.awards-list .award-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.awards-list li {
    aspect-ratio: 1 / 1;
    /* SVG draws the frame; aspect-ratio keeps the cell square */
}

.awards-list--bottom {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}


/* awards lists: hover swaps the framed SVG for the actual award logo and
   scales the icon up. Keep the li as the positioning anchor so the
   scaled icon can sit above its neighbors via z-index. */

.awards-list li {
    position: relative;
}

.awards-list .award-icon {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transform-origin: center;
    transition: transform 0.3s ease;
}

.awards-list li:hover .award-icon,
.awards-list li:focus-within .award-icon {
    transform: scale(1.2);
    z-index: 2;
}

.awards-list .award-icon .award-svg,
.awards-list .award-icon .award-logo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
}

.awards-list .award-icon .award-logo {
    opacity: 0;
    object-fit: contain;
    pointer-events: none;
}

.awards-list li:hover .award-svg,
.awards-list li:focus-within .award-svg {
    opacity: 0;
}

.awards-list li:hover .award-logo,
.awards-list li:focus-within .award-logo {
    opacity: 1;
}


/* ----- Constructor & form section ----- */

.constructor-section {
    position: relative;
    background: #fff;
    color: #1f4035;
    padding: 6% 6% 8%;
    overflow: hidden;
    isolation: isolate;
}


/* AI group "form deco" (V-line waves stacked over the full constructor
   section). Anchored top-right and sized by section height so the three
   waves stack proportionally; width follows the natural aspect ratio. */

.form-deco {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.form-deco img {
    display: block;
    height: 100%;
    width: auto;
}

.constructor-architect {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 50/50 split */
    column-gap: 5%;
    align-items: stretch;
}

.architect-portrait {
    margin: 0;
}

.architect-portrait img {
    display: block;
    width: 100%;
    height: auto;
}

.architect-info {
    display: flex;
    flex-direction: column;
    gap: 1.4em;
    align-items: center;
    /* center content within 50% column on desktop */
    text-align: center;
}

.architect-khaa {
    display: block;
    margin: 0 auto;
    /* horizontally center on desktop */
    width: auto;
    max-width: 130px;
    height: auto;
    user-select: none;
}

.architect-desc {
    margin: 0;
    font-size: 22px;
    line-height: 1.95;
    letter-spacing: 0.04em;
    text-align: justify;
    width: 100%;
}

.architect-works {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4%;
    width: 100%;
    max-width: 100%;
    margin-top: 0.4em;
    flex-grow: 1;
    align-content: end;
}

.architect-works figure {
    margin: 0;
}

.architect-works figure img {
    display: block;
    width: 100%;
    height: auto;
}


/* Contact form */

.contact-form {
    position: relative;
    z-index: 1;
    margin: 7% auto 0;
    max-width: 720px;
    text-align: center;
}

.contact-title {
    display: block;
    width: auto;
    max-width: 280px;
    height: auto;
    margin: 0 auto;
    user-select: none;
}

.contact-subtitle {
    margin: 1.8em auto 1.5em;
    display: block;
    text-align: center;
}

.contact-subtitle img {
    display: inline-block;
    width: auto;
    max-width: 80%;
    height: auto;
    user-select: none;
}

.contact-fields {
    display: flex;
    flex-direction: column;
    gap: 0.8em;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8em;
}

.field-row:has(.field-input[type="email"]),
.field-row>.field-input[type="email"] {
    /* email row spans full width via single column */
}

.field-row>.field-input[type="email"] {
    grid-column: 1 / -1;
}

.field-input {
    appearance: none;
    border: 1px solid #D78C55;
    border-radius: 4px;
    background: #fff;
    padding: 0.95em 1.2em;
    font-size: 0.95rem;
    font-family: inherit;
    color: #1f4035;
    text-align: center;
    outline: none;
}

.field-input::placeholder {
    color: #6f8b80;
    letter-spacing: 0.18em;
}

.field-input:focus {
    border-color: #1f4035;
}

.field-select {
    background-image: linear-gradient(45deg, transparent 50%, #D78C55 50%), linear-gradient(135deg, #D78C55 50%, transparent 50%);
    background-position: calc(100% - 18px) center, calc(100% - 12px) center;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2.5em;
}

.contact-fields [data-role="county"] select,
.contact-fields [data-role="district"] select {
    width: 100%;
    display: block;
}

.field-captcha-btn {
    appearance: none;
    border: 0;
    border-radius: 4px;
    background: linear-gradient(180deg, #e7a172, #D78C55);
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    letter-spacing: 0.2em;
    padding: 0.95em 1.2em;
    cursor: pointer;
}

.field-privacy {
    margin-top: 0.5em;
    text-align: left;
}

.privacy-intro {
    margin: 0 0 0.4em;
    font-size: 0.85rem;
    color: #4a6058;
}

.privacy-list {
    margin: 0;
    padding-left: 1.4em;
    font-size: 0.82rem;
    line-height: 1.7;
    color: #4a6058;
    list-style: none;
    counter-reset: item;
}

.privacy-list li {
    counter-increment: item;
}

.privacy-list li::before {
    content: "(" counter(item, cjk-decimal) ") ";
    margin-right: 0.2em;
}

.privacy-consent {
    margin-top: 0.6em;
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.85rem;
    color: #4a6058;
    cursor: pointer;
}

.privacy-consent input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #D78C55;
}

.privacy-link {
    color: #D78C55;
    text-decoration: underline;
    margin-left: 0.2em;
}

.contact-submit {
    display: block;
    margin: 1.4em auto 0;
    width: 100%;
    border: 1px solid #D78C55;
    border-radius: 4px;
    background: #fff;
    font-family: inherit;
    font-size: 1rem;
    letter-spacing: 0.4em;
    color: #1f4035;
    padding: 1em;
    cursor: pointer;
    transition: background 0.2s;
}

.contact-submit:hover {
    background: rgba(215, 140, 85, 0.08);
}


/* Constructor & form section: mobile (≤768px) */

@media (max-width: 768px) {
    .constructor-section {
        padding: 10% 7% 14%;
    }
    .constructor-architect {
        grid-template-columns: 1fr;
        row-gap: 6vw;
    }
    /* Flatten architect-info so its children become siblings of architect-portrait,
     letting us reorder via grid `order` to match mobile spec. */
    .architect-info {
        display: contents;
    }
    .architect-khaa {
        order: 1;
        margin: 0 auto;
        max-width: 110px;
    }
    .architect-desc {
        order: 2;
        text-align: center;
        font-size: 1rem;
    }
    .architect-portrait {
        order: 3;
    }
    .architect-works {
        order: 4;
        max-width: 100%;
        width: 100%;
        margin: 0;
        gap: 3%;
    }
    .contact-form {
        max-width: none;
        margin-top: 12%;
    }
    .contact-title {
        max-width: 220px;
    }
    .contact-subtitle img {
        max-width: 90%;
    }
    .field-row {
        grid-template-columns: 1fr;
    }
    /* Allow side-by-side rows where layout supports it */
    .field-row:has(select),
    .field-row:has(.field-captcha-btn) {
        grid-template-columns: 1fr 1fr;
    }
    .field-input,
    .field-captcha-btn {
        padding: 0.85em 1em;
        font-size: 0.9rem;
    }
}


/* Brand showcase (main photo + detail + gallery + nav arrows) */

.corp-brand {
    margin: 6% auto 0;
}

.corp-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 11vw;
    margin: 0 auto 1.6em;
    user-select: none;
}

.corp-brand-body {
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas: "main detail" "main gallery";
    column-gap: 2.4%;
    row-gap: 1.6%;
    align-items: stretch;
}

.corp-main {
    grid-area: main;
    margin: 0;
    position: relative;
    overflow: hidden;
}

.corp-main img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.corp-detail {
    grid-area: detail;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0.5% 9%;
    text-align: center;
}

.corp-desc {
    margin: 0 0 1em;
    font-size: 22px;
    line-height: 1.95;
    letter-spacing: 0.04em;
    text-align: justify;
}

.corp-desc:last-of-type {
    margin-bottom: 0;
}


/* Nav arrows: positioned at the end of corp-detail, right-aligned, so they sit
   directly above the rightmost gallery photo (聯上國泰石牌大樓). */

.corp-nav {
    display: flex;
    gap: 0.8em;
    margin-top: auto;
    padding-top: 1em;
    align-self: flex-end;
}

.corp-nav-btn {
    width: 56px;
    height: 56px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.corp-nav-btn img {
    display: block;
    width: 100%;
    height: 100%;
}

.corp-gallery {
    grid-area: gallery;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4%;
    align-self: end;
}

.corp-gallery figure {
    margin: 0;
    position: relative;
    overflow: hidden;
}

.corp-gallery img {
    display: block;
    width: 100%;
    height: auto;
}

.corp-fade-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 500ms ease;
    pointer-events: none;
}

.corp-fade-img.is-visible {
    opacity: 1;
}

.corp-dots {
    display: none;
}

.corp-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
}

.corp-dot.is-active {
    background: #fff;
    transform: scale(1.2);
}


/* ----- Corporation section: mobile (≤768px) ----- */

@media (max-width: 768px) {
    .corp-section {
        padding: 10% 8% 12%;
    }
    .corp-tagline h2 {
        font-size: clamp(1.25rem, 5vw, 1.7rem);
        letter-spacing: 0.06em;
    }
    .awards-label::before,
    .awards-label::after {
        width: clamp(40px, 18vw, 120px);
    }
    .awards-block {
        padding: 0;
    }
    .awards-list {
        /* mobile: top awards stay in a single row of 5 — text wraps inside boxes */
        gap: 1.6vw;
    }
    /* Awards SVGs already enforce square aspect-ratio at every breakpoint;
     no extra mobile-specific rules needed for the li itself. */
    /* Mobile bottom awards: 4 columns × 2 rows, with the 榮耀殊榮 label between rows.
     We use display:contents on the ul so its <li>s become direct grid children
     of .awards-block--bottom, then explicit `order` puts the label between rows. */
    .awards-block--bottom {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2.4vw;
    }
    .awards-block--bottom>.awards-label {
        grid-column: 1 / -1;
        order: 2;
        /* between the two rows of items */
        margin: 0;
    }
    .awards-list--bottom {
        display: contents;
    }
    .awards-list--bottom li {
        min-width: 0;
    }
    .awards-list--bottom li:nth-child(-n+4) {
        order: 1;
    }
    .awards-list--bottom li:nth-child(n+5) {
        order: 3;
    }
    .corp-logo {
        max-width: 38vw;
        margin-bottom: 1.4em;
    }
    .corp-brand-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: "detail" "main" "gallery";
        gap: 6vw;
    }
    .corp-main img {
        height: auto;
    }
    .corp-detail {
        padding: 0;
    }
    .corp-desc {
        font-size: 0.92rem;
        line-height: 1.9;
        text-align: center;
    }
    .corp-nav {
        align-self: flex-end;
        margin-top: 1.4em;
        padding-top: 0;
    }
    .corp-nav-btn {
        width: 48px;
        height: 48px;
    }
    /* Hide gallery thumbnails on mobile — slider implementation pending. */
    .corp-gallery {
        display: none;
    }
    .corp-dots {
        display: flex;
        position: absolute;
        bottom: 14px;
        left: 50%;
        transform: translateX(-50%);
        gap: 8px;
        z-index: 2;
    }
}

.jc-bs3-container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.jc-bs3-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.jconfirm-box {
    color: #000;
}