/*
 * pages.css: page-specific sections (home hero, about, What We Create, marquee, showcase; About strengths and
 * certificates; Our Focus and Insights lists and posts; Contact). Sizes at 0.8× of the 1920px design.
 */

/* Home: hero slider (1920 × 890, radius 50) -------------------------------- */
/* The rounded top corners are filled by the header's corner pieces (main.css, .site-header::after) */
.hero { padding-bottom: 0; overflow: hidden; border-radius: var(--banner-radius); }
.hero__slide { position: relative; display: flex; align-items: center; height: clamp(520px, calc(100svh - var(--header-height, 146px)), 712px); overflow: hidden; background: var(--color-surface); }
.hero__media { position: absolute; inset: 0; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--color-white) 80%, transparent) 0%, color-mix(in srgb, var(--color-white) 55%, transparent) 35%, transparent 60%); }
.hero__content { position: relative; max-width: calc(800px + var(--side-gap) * 2); }
/* EN breaks the three phrases with <br>; CN runs them on one row (client), so no width cap there */
:lang(zh) .hero__eyebrow { max-width: none; }
.hero__eyebrow { max-width: 24em; margin: 0 0 calc(var(--inner-row-gap) * 0.6); font-size: var(--font-size-6); font-weight: 500; line-height: 1.3; letter-spacing: 0.02em; }
/* Home slider title: the Figma has it at 70px against the inner banners' 60px, so it scales with --banner-title */
.hero__title { max-width: 12em; margin-bottom: calc(var(--inner-row-gap) * 0.6); font-family: var(--font-heading); font-size: calc(var(--banner-title) * 7 / 6); font-weight: 600; line-height: 1.3; color: var(--color-text); }
.hero__text { max-width: 31em; margin-bottom: var(--inner-large-row-gap); font-size: var(--font-size-6); font-weight: 500; line-height: 1.5; color: var(--color-hero-text); }
.hero__pagination.swiper-pagination { bottom: 8px; --swiper-pagination-bullet-horizontal-gap: 0px; }
/* 8px dot drawn inside a 24px tap area (padding + content-box background) */
.hero .swiper-pagination-bullet { box-sizing: content-box; width: 8px; height: 8px; padding: 8px; background: var(--color-white); background-clip: content-box; border-radius: 12px; opacity: 0.8; transition: width 0.3s, background-color 0.3s; }
.hero .swiper-pagination-bullet-active { width: 22px; background-color: var(--color-accent); opacity: 1; }

/* Home: about ---------------------------------------------------------------- */
.home-about__lead { margin-bottom: var(--inner-large-row-gap); font-size: calc(var(--font-size-t) * 1.05); font-weight: 500; line-height: 1.5; color: var(--color-text); text-align: justify; }
.tabs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: calc(var(--inner-row-gap) * 0.7); border: 1px solid var(--color-border); }
.tabs__tab { position: relative; min-height: 43px; padding: 8px 10px; font-size: var(--font-size-7); color: var(--color-tab); background: var(--color-white); border: 0; cursor: pointer; }
.tabs__tab + .tabs__tab { border-left: 1px solid var(--color-border); }
.tabs__tab[aria-selected="true"] { font-weight: 600; color: var(--color-primary); }
.tabs__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--color-primary); }
.tabs__panel > p { margin-bottom: calc(var(--inner-row-gap) * 0.75); font-size: calc(var(--font-size-t) * 1.05); line-height: 1.5; color: var(--color-body); text-align: justify; }
.check-list { display: flex; flex-wrap: wrap; gap: 12px calc(var(--inner-side-gap) * 1.2); list-style: none; }
.check-list li { display: flex; align-items: center; gap: 10px; font-size: calc(var(--font-size-t) * 1.05); font-weight: 500; color: var(--color-text); }
.check-list .icon { width: 22px; height: 22px; color: var(--color-accent); }

/* Home: What We Create ------------------------------------------------------ */
.create__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--inner-large-row-gap) * 1.32) calc(var(--inner-side-gap) * 0.9); }
.create { padding-top: var(--row-gap); }
.create__intro { align-self: start; padding-top: 0; }
.create__text { max-width: 21.5em; margin-bottom: var(--inner-large-row-gap); font-size: var(--font-size-7); line-height: 1.5; color: var(--color-text); }

/* Home: marquee -------------------------------------------------------------- */
.marquee { padding: calc(var(--inner-large-row-gap) * 0.9) 0; margin-bottom: 0; overflow: hidden; background: var(--color-band); }
main > .marquee { padding-bottom: calc(var(--inner-large-row-gap) * 0.9); }
.marquee__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee__item { flex: none; padding-right: 0.5em; font-family: var(--font-display); font-size: calc(var(--font-size-1) * 2.4); font-weight: 700; line-height: 1.3; white-space: nowrap; -webkit-text-stroke: 1px var(--color-outline); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* Home: product showcase ----------------------------------------------------- */
.showcase__head { max-width: 920px; margin: 0 auto var(--inner-large-row-gap); text-align: center; }
.showcase__head .section-title { margin: 0; font-size: calc(var(--font-size-1) * 0.9); }
.showcase__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--inner-row-gap) * 1.4) calc(var(--inner-side-gap) * 1.4); list-style: none; }
.showcase__grid > li { width: calc((100% - 5 * var(--inner-side-gap) * 1.4) / 6); max-width: 230px; }

/* About: strengths ---------------------------------------------------------- */
/* The fruit background runs from the intro's lower half to below these cards (design) */
.about-intro { position: relative; z-index: 1; }
.strengths { --fruit-top: -185px; --fruit-bottom: -45px; padding-top: calc(var(--row-gap) * 0.25); }
.strengths__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--inner-large-row-gap) calc(var(--inner-side-gap) * 1.55); }
.strength { position: relative; padding-bottom: 20px; }
.strength__media { width: 58.4%; aspect-ratio: 457 / 350; overflow: hidden; border-radius: 40px; }
.strength__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.strength:hover .strength__img { transform: scale(1.05); }
.strength:hover .strength__card { background: var(--color-mint); }
.strength__icon { position: absolute; top: 4%; left: 62%; width: 14.3%; height: auto; }
.strength__card { transition: background-color 0.3s ease; position: relative; width: 69.2%; margin: -24.5% 0 0 auto; padding: calc(var(--inner-row-gap) * 0.95) calc(var(--inner-side-gap) * 1.3) calc(var(--inner-row-gap) * 1.2); background: var(--color-surface); border-radius: 40px; overflow: hidden; }
/* Teal band along the bottom, cut by the rounded corners (a straight line, as in the design: 7px → 5.6px) */
.strength__card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5.6px; background: var(--color-accent); }
.strength__title { margin-bottom: calc(var(--inner-row-gap) * 0.45); font-size: var(--font-size-5); font-weight: 600; color: var(--color-black); }
.strength__card p { margin: 0; font-size: var(--font-size-t); line-height: 1.5; color: var(--color-body); text-align: justify; }

/* About: certified quality ---------------------------------------------------- */
.certified__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; gap: var(--inner-large-side-gap) calc(var(--inner-large-side-gap) * 2.5); }
.certified__text p:last-child { max-width: 30em; font-size: var(--font-size-7); color: var(--color-text); }
.certified__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--inner-row-gap) * 0.85) calc(var(--inner-side-gap) * 1.3); list-style: none; }
.product-tile--cert .product-tile__img { top: 20%; left: 18%; width: 64%; height: 60%; }

/* Our Focus: listing --------------------------------------------------------- */
.focus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--inner-row-gap) * 0.8) calc(var(--inner-side-gap) * 0.57); list-style: none; }
.photo-card--focus .photo-card__body { width: 71.7%; min-height: 0; padding: calc(var(--inner-row-gap) * 0.5) calc(var(--inner-side-gap) * 0.5) calc(var(--inner-row-gap) * 0.55); }
.photo-card--focus .photo-card__title { font-size: var(--font-size-t); }
.photo-card--focus .link-more { align-self: flex-start; margin: auto 0; }

/* Our Focus: a post ------------------------------------------------------------ */
.focus-article__title { margin-bottom: calc(var(--inner-row-gap) * 0.85); font-size: calc(var(--font-size-1) * 0.84); }
.prose { font-size: var(--font-size-7); line-height: 1.5; color: var(--color-body); }
.prose > *:last-child { margin-bottom: 0; }
.prose p { margin-bottom: 1.4em; text-align: justify; }
.prose h2 { margin: 0 0 calc(var(--inner-row-gap) * 0.45); font-size: var(--font-size-3); color: var(--color-ink); }
.prose h3 { margin: 1.6em 0 0.5em; font-size: var(--font-size-6); color: var(--color-ink); }
.prose a { color: var(--color-accent); }
.prose strong { font-weight: 600; color: var(--color-text); }
.prose .lead { color: var(--color-body); }
.post-figure { margin: 0 0 var(--inner-large-row-gap); overflow: hidden; border-radius: 40px; background: var(--color-surface); }
.post-figure img { width: 100%; height: auto; }

/* Insights: listing ------------------------------------------------------------ */
.insight-list { display: grid; list-style: none; }
.insight-item { padding-bottom: calc(var(--inner-large-row-gap) * 0.8); }
.insight-item + .insight-item { padding-top: calc(var(--inner-large-row-gap) * 0.8); border-top: 1px solid var(--color-border); }
.insight-item__media { display: block; margin-bottom: calc(var(--inner-row-gap) * 0.85); overflow: hidden; aspect-ratio: 1136 / 617; border-radius: 32px; }
.insight-item__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.insight-item:hover .insight-item__media img { transform: scale(1.04); }
.insight-item .post-date { margin-bottom: 10px; }
.insight-item__title { margin-bottom: 10px; overflow: hidden; font-size: var(--font-size-6); font-weight: 600; color: var(--color-text); text-overflow: ellipsis; white-space: nowrap; }
.insight-item__title a { text-decoration: none; }
.insight-item__title a:hover { color: var(--color-accent); }
.insight-item__excerpt { display: -webkit-box; margin-bottom: calc(var(--inner-row-gap) * 0.6); overflow: hidden; font-size: var(--font-size-7); line-height: 1.5; color: var(--color-soft); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Insights: a post --------------------------------------------------------------- */
.insight-article__media { margin: 0 0 calc(var(--inner-row-gap) * 0.85); overflow: hidden; border-radius: 32px; }
.insight-article__media img { width: 100%; height: auto; aspect-ratio: 1136 / 617; object-fit: cover; }
.insight-article .post-date { margin-bottom: 10px; }
.insight-article__title { margin-bottom: calc(var(--inner-row-gap) * 0.6); font-size: var(--font-size-6); font-weight: 600; line-height: 1.3; color: var(--color-text); }

/* Contact ---------------------------------------------------------------------- */
.contact-details__brand { margin-bottom: var(--inner-large-row-gap); text-align: center; }
.contact-details__brand img { width: 238px; margin: 0 auto calc(var(--inner-row-gap) * 0.45); }
.contact-details__name { margin-bottom: 4px; font-size: var(--font-size-6); font-weight: 600; color: var(--color-text); }
.contact-details__reg { margin: 0; font-size: var(--font-size-t); color: var(--color-body); }
.contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--inner-side-gap) * 0.7); list-style: none; }
.contact-card { display: flex; flex-direction: column; align-items: center; min-height: 250px; padding: calc(var(--inner-row-gap) * 0.85) calc(var(--inner-side-gap) * 0.45); text-align: center; border: 1px solid var(--color-border); border-radius: 24px; }
.contact-card__icon { display: grid; place-items: center; width: 63px; height: 62px; margin-bottom: calc(var(--inner-row-gap) * 0.7); color: var(--color-text); background: var(--color-surface); border-radius: 16px; transition: background-color 0.6s ease, color 0.6s ease; }
.contact-card:hover .contact-card__icon { color: var(--color-white); background: var(--color-accent); }
.contact-card__icon .icon { width: 28px; height: 28px; stroke-width: 1.3; }
.contact-card__title { margin-bottom: calc(var(--inner-row-gap) * 0.35); font-size: var(--font-size-7); font-weight: 700; color: var(--color-accent); }
.contact-card p { margin: auto 0; font-size: var(--font-size-t); line-height: 1.5; color: var(--color-body); }
.contact-card a { text-decoration: none; }
.contact-card a:hover { color: var(--color-accent); }
.enquiry__panel { padding: calc(var(--inner-large-row-gap) * 1.2) clamp(var(--inner-side-gap), 10%, 135px); text-align: center; background: var(--color-surface); border-radius: 32px; position: relative; overflow: hidden; }
/* Teal band along the top, cut by the rounded corners (a straight line, as in the design: 13px → 10.4px) */
.enquiry__panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10.4px; background: var(--color-accent); }
.enquiry__title { margin-bottom: calc(var(--inner-row-gap) * 0.45); font-size: calc(var(--font-size-1) * 0.9); font-weight: 700; color: var(--color-text); }
.enquiry__intro { max-width: 50em; margin: 0 auto calc(var(--inner-row-gap) * 0.9); font-size: var(--font-size-7); color: var(--color-soft); }
.enquiry .form { text-align: left; }
.map { padding-bottom: 0; }
main > .map { padding-bottom: 0; }
.map__frame { width: 100%; height: calc(var(--map-height) * 1.1); border: 0; } /* 549px in the design */
.page-contact .page-banner__img { object-position: center 20%; }

/* 404 */
.not-found__inner { text-align: center; }
.not-found__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: var(--inner-row-gap); list-style: none; }

/* Breakpoints ------------------------------------------------------------- */
@media only screen and (min-width:2560px) {
    .create__grid, .strengths__grid, .certified__inner { max-width: 2200px; margin: 0 auto; }
}

@media only screen and (max-width:1365.98px) {
    .showcase__grid > li { width: calc((100% - 5 * var(--inner-side-gap)) / 6); }
    .showcase__grid { gap: var(--inner-row-gap) var(--inner-side-gap); }
    .focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media only screen and (max-width:1179.98px) {
    .strength__card { width: 80%; margin-top: -20%; }
    .certified__inner { gap: var(--inner-large-side-gap); }
}

@media only screen and (max-width:999.98px) {
    .hero__slide { height: auto; min-height: 520px; padding: var(--inner-large-row-gap) 0 calc(var(--inner-large-row-gap) * 1.2); }
    .hero__media::after { background: linear-gradient(90deg, color-mix(in srgb, var(--color-white) 85%, transparent) 0%, color-mix(in srgb, var(--color-white) 55%, transparent) 60%, color-mix(in srgb, var(--color-white) 20%, transparent) 100%); }
    .create__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .showcase__grid > li { width: calc((100% - 3 * var(--inner-side-gap)) / 4); }
    .strengths__grid { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin: 0 auto; }
    .certified__inner { grid-template-columns: minmax(0, 1fr); }
    .focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-cards { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
    .contact-card { min-height: 0; }
}

@media only screen and (max-width:767.98px) {
    /* Paragraphs that are left-aligned on desktop are justified on phones too */
    .hero__text, .create__text, .cta__text p, .certified__text p, .insight-item__excerpt, .site-footer__address { text-align: justify; }
    /* Phones hyphenate long words (iOS Safari, Android Chrome) so justified lines in narrow columns keep small gaps */
    .hero__text, .create__text, .cta__text p, .certified__text p, .insight-item__excerpt, .site-footer__address, .tabs__panel > p, .home-about__lead, .about-intro__text p, .strength__card p, .prose p, .feature-list__text, .disclaimer li { -webkit-hyphens: auto; hyphens: auto; }
    .hero__slide { min-height: 480px; }
    /* The text runs the full width on phones: a top-down wash keeps it readable over the photo */
    .hero__media::after { background: linear-gradient(180deg, color-mix(in srgb, var(--color-white) 80%, transparent) 0%, color-mix(in srgb, var(--color-white) 75%, transparent) 70%, color-mix(in srgb, var(--color-white) 40%, transparent) 100%); }
    .hero__eyebrow, .hero__text { font-size: var(--font-size-t); }
    .tabs__tab { font-size: var(--font-size-s); }
    .create__grid { grid-template-columns: minmax(0, 1fr); }
    /* Phones use the full column width: no text or box caps */
    .hero__content, .hero__eyebrow, .hero__title, .hero__text, .create__text, .showcase__head, .certified__text p:last-child, .enquiry__intro, .strengths__grid, .contact-cards, .showcase__grid > li, .product-tile { max-width: none; }
    .photo-card--focus .photo-card__body { padding-left: var(--inner-side-gap); padding-right: var(--inner-side-gap); }
    .marquee__item { font-size: calc(var(--font-size-1) * 1.6); }
    .showcase__grid > li { width: calc((100% - 2 * var(--inner-side-gap)) / 3); }
    .focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .strength__media, .strength__card { border-radius: 24px; }
    .post-figure, .insight-item__media, .insight-article__media { border-radius: 20px; }
    .insight-item__title { white-space: normal; }
    .enquiry__panel { border-radius: 24px; }
}

@media only screen and (max-width:449.98px) {
    .showcase__grid > li { width: calc((100% - var(--inner-side-gap)) / 2); }
    .certified__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .focus-grid { grid-template-columns: minmax(0, 1fr); }
    .check-list { flex-direction: column; }
    .strength__media { width: 75%; }
    .strength__icon { left: 80%; width: 18%; }
    .strength__card { width: 92%; margin-top: -12%; }
}

/* About: intro text (25px in the design) */
.about-intro__text p { font-size: var(--font-size-6); line-height: 1.5; color: var(--color-text); text-align: justify; }