/*
 * Mobile-first breakpoints, per Tina's engineering convention:
 *   <768px   : base rules in layout.css / components.css, no query needed
 *   >=768px  : tablet — this file, first block
 *   >=1200px : desktop — this file, second block
 * Loaded last (after base/layout/components) so these min-width
 * overrides win the cascade regardless of selector order elsewhere.
 *
 * Each breakpoint's values come from Tina's actual Figma frames
 * ("01 home < 768" / "≧ 768" / "≧ 1200"), not scaled-down guesses —
 * grid/container max-width genuinely changes at each tier, and some
 * sections change structure entirely (not just size):
 *   - service section image: stacked on top at <768 and >=768, only
 *     goes side-by-side at >=1200
 *   - security cards: 2x2 grid at <768 and >=768, single row of 4
 *     only at >=1200
 *   - stats row: stacked at <768, back to a row at >=768
 *   - news list / hero gallery: horizontal scroll at <768 (combined
 *     width exceeds the container), fixed row from >=768 up
 *
 * clients-section and cta-section have no Figma reference below
 * 1200px (the placeholder frames were left empty at those
 * breakpoints in the file) — their >=768 layout inherits the mobile
 * generic stack from layout.css; only >=1200 below is Figma-verified.
 */

@media (min-width: 768px) {
  /* sys/layout/sec redefined for this breakpoint (Tina, 2026-09-05) —
     each section's --comp-* token keeps pointing at the SAME step name
     across every breakpoint (e.g. always --sys-layout-sec-xl); what
     actually changes per breakpoint is this step's own value. Only
     2xl (64->80) was confirmed directly (Tina's screenshot); the other
     5 steps are derived using that exact same x1.25 ratio, since no
     per-step values were given for xl/lg/md/def/sm at this breakpoint —
     flag if any of these don't match your actual design. */
  :root {
    --sys-layout-sec-2xl: var(--space-80);
    --sys-layout-sec-xl: var(--space-68);
    --sys-layout-sec-lg: var(--space-60);
    --sys-layout-sec-md: var(--space-52);
    --sys-layout-sec-def: var(--space-40);
    --sys-layout-sec-sm: var(--space-28);
    --sys-grid-margin: var(--space-24);

    --sys-layout-sec-gap-sm: var(--space-28);
    --sys-layout-sec-gap-def: var(--space-32);
    --sys-layout-sec-gap-lg: var(--space-32);
    --sys-layout-sec-gap-xl: var(--space-48);

    /* sys/{category}-{tier} redefined for this breakpoint (Tina,
       2026-09-08) — the --type-* aliases in base.css automatically pick
       up these new values, no redefinition needed on the --type-*
       names themselves. See base.css for what each sys token means. */
    --sys-headline-xl: var(--fs-32);
    --sys-headline-md: var(--fs-28);
    --sys-headline-xs: var(--fs-18);
    --sys-headline-xxs: var(--fs-base);
    --sys-headline-sm: var(--fs-20);
    --sys-headline-def: var(--fs-24);
    --sys-headline-2xl: var(--fs-40);
    --sys-body-xs: var(--fs-base);
    --sys-body-md: var(--fs-18);
    --sys-body-def: var(--fs-18);
    --sys-body-xxs: var(--fs-14);
  }

  /* <768 just changed button height/min-width (40px/156px); restore
     the original height here since >=768 wasn't part of that pass
     (font-size comes from --type-label-def, no override needed here).
     min-width is intentionally different from <768 (220px vs 156px)
     per Tina's request. */
  .btn {
    height: 48px;
    min-width: 220px;
  }

  .navbar {
    --navbar-pad-y: 16px;
    --navbar-pad-x: 24px;
  }

  .navbar__links {
    display: flex;
  }

  .navbar__right {
    display: flex;
  }

  .navbar__toggle,
  .mobile-menu {
    display: none;
  }

  .navbar__logo img {
    width: 40px;
    height: 40px;
  }

  /* The scroll animation needs a full-viewport stage at every
     breakpoint, so the Figma 1024x512 / 1440x720 banner ratios no
     longer apply to .hero. */
  /* 單行版純 vw、不封頂（Tina 2026-09-11：原本 clamp 的 96px 上限
     讓 ≥1333px 的螢幕上文字反而愈看愈小）。8vw 讓這行字固定佔視窗
     寬 83%，左右留白同時是安全邊：字體還沒載入、fallback 比
     Montserrat 寬時才不會被 stage 的 overflow 裁掉。 */
  .hero__mask-text {
    font-size: calc(8vw * var(--hero-mask-scale, 1));
  }

  /* 單行版整體往上 80px（padding 的一半）：底部要留給捲動提示，
     純置中會顯得偏下。用 padding 推 flex 置中的基準，不用 transform
     ——transform 被入場動畫的 scale 佔著。 */
  .hero__mask {
    padding-bottom: 160px;
  }

  .hero__mask-text--stacked {
    display: none;
  }

  .hero__mask-text--inline {
    display: block;
  }

  .info-section {
    padding: var(--comp-info-sec-p-top) 24px var(--comp-info-sec-p-bottom);
    gap: 40px;
  }

  /* font-size/line-height/letter-spacing now come from --type-display-*
     (base.css/responsive.css :root) — see the shared rule in layout.css. */

  .info-section__intro {
    max-width: 1152px;
  }

  .info-section__gallery {
    gap: 16px;
    width: calc(100% + 48px);
    margin: 0 -24px;
  }

  .service-section {
    padding: var(--comp-service-sec-p-top) 24px var(--comp-service-sec-p-bottom);
  }

  /* Card and pagination share a row here (confirmed: node 7158:8164),
     with image alone on the row above — image (809px) leaves too
     little of the 952px row for card (455px) to fit beside it, so it
     wraps to its own line naturally; card + pagination together
     (455+439px) fit on the line after. */
  /* Confirmed against node 7158:8161 ("content", 952px wide): image
     sits alone on its own row, card+pagination nest together on a
     second row (node 7158:8164). Real DOM nesting (.service-section__row,
     see layout.css) replaces the old flex-wrap-on-flat-siblings
     approach — that couldn't reproduce the 24px image/card overlap
     reliably across a wrap break (negative margin on a second-line
     item doesn't pull into the first line's space) and used the wrong
     24px gap between card/pagination (Figma's own gap there is 10px,
     the 24px was the outer content padding, not the sibling gap).
     padding here mirrors the 24px inset Figma applies inside both div
     wrappers (7158:8162 / 7158:8164) individually — moved up to the
     shared parent since both children use the same value. */
  .service-section__content {
    max-width: 952px;
    flex-direction: column;
    padding: 0 24px;
    box-sizing: border-box;
  }

  /* Width is 85% of this flex row (Tina, 2026-09-04), capped at 810px —
     was a fixed 809px max-width with no relative sizing. */
  .service-section__image {
    align-self: flex-end;
    width: 85%;
    max-width: 810px;
    margin-bottom: -24px;
  }

  .service-section__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }

  /* card content sizing at this breakpoint (node 7158:8165) — was just
     inheriting the <768 base values (30px num badge, fs/20 title, fs/14
     desc, uniform 20/20/24 padding). */
  .service-card {
    flex: 1 0 0;
    padding: 24px 24px 28px;
    gap: 20px;
  }

  .service-card__num {
    width: 36px;
    height: 36px;
    font-size: var(--fs-24);
  }

  .service-card__body {
    gap: 12px;
  }


  .service-section__pagination {
    flex: 1 0 0;
    margin-top: 0;
    padding: 0;
  }

  /* Base rule centers this block with margin:0 auto and caps it at
     --container-md (642px) — at this breakpoint it sits flush-left
     with no width cap instead (Tina, 2026-09-04). */
  .service-section__top {
    margin: 0;
    max-width: none;
  }

  /* Confirmed against the "01 home >=768" tablet master (node
     7158:7798): securitySec's own container caps at 952px at this
     breakpoint, not the generic 1196px site container — reset back to
     1196px at >=1200 below, since this frame doesn't cover desktop. */
  .security-section .container {
    max-width: 952px;
  }

  .security-section {
    padding-top: var(--comp-security-sec-p-top);
    padding-bottom: var(--comp-security-sec-p-bottom);
  }

  /* Re-measured against node 7158:7160 ("container", clientSec) —
     952px was copy-pasted from the security-section rule above
     without its own check; this section's real container is 800px
     (x:112/width:800 inside the 1024px tablet reference frame, not
     952). */
  .clients-section .container {
    max-width: 800px;
  }

  .clients-section {
    padding-top: var(--comp-clients-sec-p-top);
    padding-bottom: var(--comp-clients-sec-p-bottom);
  }

  /* Confirmed against node 7158:7168 ("content"): 3 independent flex
     columns (.client-grid__col, see layout.css for why it's
     display:contents at <768) of differing height — list1 h404,
     list2 h464, list3 h424 — centered against each other via
     items-center on the row, plus each column's own padding-top/
     padding-bottom (20/0/40 top, 0/80/0 bottom) pushing its cards
     within that. Real per-column flexbox (matching Figma's actual
     structure) instead of a shared-grid-row approximation, so the
     stagger reproduces exactly instead of only on the first row. */
  .client-card {
    height: 180px;
  }

  .client-grid {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .client-grid__col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1 0 0;
  }

  .client-grid__col:nth-child(1) { padding-top: 20px; }
  .client-grid__col:nth-child(2) { padding-bottom: 80px; }
  .client-grid__col:nth-child(3) { padding-top: 40px; }

  /* Side-by-side row (not just >=1200) confirmed via node 7158:7219,
     plus this breakpoint's own "md"-size text/icon values. */
  .cta-cards {
    flex-direction: row;
    align-items: stretch;
    gap: 32px;
  }

  .cta-card {
    padding: 24px;
    gap: 24px;
  }

  .cta-card__icon {
    width: 28px;
    height: 28px;
  }

  .cta-card__icon img {
    width: 24px;
    height: 24px;
  }


  .cta-card__arrow {
    width: 38px;
    height: 38px;
  }

  .cta-section .container {
    max-width: 952px;
  }

  .cta-section {
    padding-top: var(--comp-cta-sec-p-top);
    padding-bottom: var(--comp-cta-sec-p-bottom);
  }

  .stats-section .container {
    max-width: 1152px;
  }

  .news-section__container,
  .news-list {
    max-width: 1152px;
  }

  .brand-section .container {
    max-width: 1120px;
  }

  .security-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* card-security "md" size variant at this breakpoint (was "sm"
     at <768) — horizontal 16px confirmed via node 7158:9701; vertical
     corrected to 60px per Tina (2026-09-04), overriding that node's
     48px reading. */
  .security-card {
    padding: 60px 16px;
  }

  .security-card img {
    width: 40px;
    height: 40px;
  }

  .brand-section {
    padding: var(--comp-brand-sec-p-top) 24px var(--comp-brand-sec-p-bottom);
  }

  .brand-logos__row img {
    width: 92px;
    height: 92px;
  }

  .stats-section {
    padding: var(--comp-stats-sec-p-top) 24px var(--comp-stats-sec-p-bottom);
  }

  .stats-grid {
    flex-direction: row;
    justify-content: center;
    gap: 40px;
  }

  /* Items expand to fill the row (Tina, 2026-09-04), not just natural
     content width with the leftover space distributed as gaps — flex:1
     grows them all off the same base, but each is individually capped
     so they settle at different final widths rather than three equal
     columns. */
  .stat-item {
    flex: 1;
  }

  .stat-item:nth-child(1) {
    max-width: 300px;
  }

  .stat-item:nth-child(2) {
    max-width: 160px;
  }

  .stat-item:nth-child(3) {
    max-width: 280px;
  }

  .news-section {
    padding: var(--comp-news-sec-p-top) 24px var(--comp-news-sec-p-bottom);
  }

  .news-list {
    overflow-x: visible;
  }

  .news-card {
    width: auto;
    flex: 1;
  }

  /* ----- newsSec 從這個斷點起就是「標題列（左標題 + 右按鈕）／整寬
     清單」兩列（Tina, 2026-09-10），不再是置中堆疊；≧1200 只是把
     容器寬、列距、左右 padding 換成 node 7125:6329 的值。

     用 grid 而非 flex-wrap：DOM 順序是 top → list → 按鈕，只有明確
     指定 grid-area 才能把第三個子元素拉回第一列右側，不用改 DOM、
     也不用 display:contents。列1 = 標題(1fr) + 按鈕(auto)，
     列2 = 清單跨兩欄；align-items:end 讓按鈕底部對齊標題底部。
     列距沿用原本容器的 32px（這個斷點沒有 Figma 依據，維持既有間距）。 ----- */
  .news-section__container {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: var(--grid-gutter);
  }

  .news-section__top {
    grid-area: 1 / 1;
    align-items: flex-start;
  }

  .news-list {
    grid-area: 2 / 1 / 3 / 3;
  }

  /* 220x48 已是 .btn 在 ≧768 的 min-width/height，不用再指定尺寸；
     只需歸零 <768 的 8px 補正（列距改由 row-gap 提供）。 */
  .news-section__more {
    grid-area: 1 / 2;
    margin-top: 0;
  }

  /* 標題從「置中＋左右各一條紅槓」改成「靠左＋單一左槓」，同
     .clients-section__top 的處理。槓子 6x32（node 7125:6335 的 32px
     line），文字左內距 24px（node 7125:6333 pl-24）。 */
  .news-section__title.news-section__title {
    justify-content: flex-start;
    width: 100%;
    padding: 0 0 0 24px;
  }

  .news-section__title.news-section__title::before {
    height: 32px;
  }

  .news-section__title.news-section__title::after {
    display: none;
  }

  .site-footer__inner {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .site-footer__col-info {
    flex: 1;
    min-width: 320px;
    max-width: none;
  }

  .site-footer__info {
    border-left-width: 4px;
    padding-left: 24px;
  }

  .site-footer__nav-area {
    flex: 1;
    align-items: flex-end;
  }

  .site-footer__nav {
    flex-direction: row;
  }

  .site-footer__nav-col {
    flex: 1;
    gap: 16px;
  }

  .site-footer__nav-col ul {
    gap: 12px;
  }

  .site-footer__nav-col ul a {
    line-height: 1.5;
  }

  .site-footer__bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .fab {
    width: 56px;
    height: 56px;
    font-size: var(--fs-24);
  }

  .fab__arrow {
    width: 28px;
    height: 28px;
  }

  /* ===== 02 About Page (≧768) ===== */
  .about-hero,
  .about-intro,
  .about-philosophy,
  .about-testimony,
  .about-videos,
  .about-reviews,
  .about-contact,
  .breadcrumb-section {
    padding-left: 24px;
    padding-right: 24px;
  }

  .about-philosophy__container,
  .about-testimony__container {
    max-width: 780px;
  }

  .about-philosophy__list,
  .about-testimony__cards {
    flex-direction: row;
  }

  .about-testimony__cards {
    gap: 24px;
  }

  .about-philosophy__card,
  .about-testimony__card {
    flex: 1 0 0;
  }

  .about-testimony__actions {
    gap: 24px;
  }

  .about-video-card-link {
    max-width: 780px;
  }

  .about-video-card__head {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }

  .about-video-card__heading {
    flex: 1 0 0;
    min-width: 0;
    width: auto;
  }

  .about-reviews__content {
    gap: 24px;
  }

  .about-reviews__list {
    flex-direction: row;
  }

  .about-reviews__list .about-review-card {
    flex: 1 0 0;
  }

  .about-review-card__quote {
    font-weight: 500;
    line-height: 24px;
  }

  .about-review-card__author {
    line-height: 1.5;
  }

  .about-contact__container {
    max-width: 952px;
  }

  /* ===== 02-1 Our Clients Page (≧768) ===== */

  /* "md" size variant (node 9112:34869): fs-18, border-bottom 5px when
     selected, px-8/py-12 padding. flex:1 fill and the scroll fallback
     are already set at base (layout.css) and apply unchanged here. */
  .our-clients-tabs {
    padding: 16px 24px 0;
  }

  .our-clients-tabs__item {
    padding: 12px 8px;
  }

  /* Shared by every .tabs-indicator instance (our-clients/ubiquiti ×2/
     news/dealership tabs) — see components.css for what this is. */
  .tabs-indicator {
    height: 5px;
  }

  /* Literal 40/80 in Figma at this breakpoint, off the
     --comp-our-clients-grid-sec-p-* pinned "sm/xl" scale's own 768
     steps (30/70) — top(40) matches "def" and bottom(80) matches
     "2xl" at this breakpoint instead, but must stay literal here
     (not var()) since this value freezes through >=1200 too (no
     further override below), and either token would keep growing. */
  .our-clients-grid-section {
    padding-top: 40px;
    padding-bottom: 80px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .our-clients-grid-wrap {
    max-width: 780px;
  }

  .our-clients-grid {
    grid-template-columns: repeat(5, 1fr);
    row-gap: var(--grid-gutter);
  }

  .our-clients-cover {
    height: 168px;
  }

  /* ===== 02-2 Authorized Brand Page (≧768) ===== */

  /* Literal 60px in Figma at this breakpoint (matches --sys-layout-sec-lg's
     own 768 value of 60px — a deliberate step-up from the "def" this
     section is pinned to at <768, not the pinned step's own cascade). */
  .brand-cards {
    padding: var(--sys-layout-sec-lg) 24px;
  }

  /* Both groups render identically at this breakpoint (2 columns) —
     the main/featured column-count split only starts at ≧1200, see
     below. Row-gap 32 / column-gap 24 confirmed against node
     9112:19460 (sec) / 9112:19461 (row). */
  .brand-cards__group {
    grid-template-columns: repeat(2, 1fr);
    max-width: 780px;
  }

  .brand-card {
    padding: 24px;
    gap: 24px;
  }

  .brand-card__content {
    gap: 20px;
  }


  /* ===== 02-3 ESG Page (≧768) =====
     .esg-impact excluded from this shared side-gutter: its cards are
     full-bleed edge-to-edge photos (own internal padding handles the
     text gutter instead), not contained text like the other sections. */
  .esg-hero,
  .esg-conduct,
  .esg-csr,
  .esg-talent {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* --comp-esg-conduct-sec-p-* is pinned to "md" (matches <768), but
     >=768 wants a literal 60px that then stays flat through >=1200 too
     (no further override there — see the ESG >=1200 block further
     down: it only touches horizontal padding for this selector).
     60px happens to equal "lg"'s >=768 value, but must stay a literal
     here rather than var(--sys-layout-sec-lg) — that token keeps
     growing to 90px at >=1200, which this section doesn't want. */
  .esg-conduct {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .esg-conduct__container {
    max-width: 780px;
    padding: 48px;
  }

  .esg-csr__container {
    max-width: 780px;
  }

  .esg-benefit-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .esg-benefit-card {
    gap: 20px;
    padding: 24px;
  }

  .esg-benefit-card__head {
    gap: 16px;
  }

  .esg-benefit-card__num {
    width: 28px;
    height: 28px;
  }


  .esg-talent__container {
    max-width: 780px;
  }

  /* top freezes at 40px here instead of following "md"'s natural
     >=768 value (50px) — bottom's own "2xl" step already gives 80px
     naturally, no override needed for it. */
  .esg-talent {
    padding-top: 40px;
  }

  /* Figma row DOM order is always image-then-text (matches <768); at
     ≧768 the 2nd row (text-then-image visually) is achieved with
     row-reverse rather than reordering markup — see node 9112:21865
     vs 9112:21861 (row1 keeps normal order, row2 doesn't). */
  .esg-talent__row {
    flex-direction: row;
    align-items: center;
  }

  .esg-talent__row:first-child {
    align-items: flex-start;
  }

  .esg-talent__row--reverse {
    flex-direction: row-reverse;
  }

  .esg-talent__row > * {
    flex: 1 0 0;
    min-width: 0;
  }

  /* ----- 社會公益 / 環境永續 (≧768): side-by-side row. Hover behavior
     (opacity/color) is breakpoint-independent — see layout.css. Card
     uses an aspect-ratio box here (384/396, node 9112:21869/21877);
     ≧1200 switches to an explicit min-height instead (see the 1200
     block). */
  .esg-impact {
    flex-direction: row;
  }

  .esg-impact__card {
    aspect-ratio: 384 / 396;
    padding: 60px;
    flex: 1 0 0;
    min-width: 0;
  }

  .esg-impact__card--social {
    border-right: 1px solid var(--color-neutral-200);
  }

  /* ===== 03 Ubiquiti Page (≧768) ===== */
  /* padding-top 掛在 .ubiquiti-hero__top（白底帶）上，不是 section 本身
     ——白底要連標題上方的留白一起蓋住影片。 */
  .ubiquiti-hero__top {
    padding-top: 80px;
  }


  .ubiquiti-hero__title-break {
    display: none;
  }

  /* "md" size variant (node 9112:28590 / 9112:28609): fs-18,
     border-bottom 5px when selected — 952px÷5 and 720px÷4 (this page's
     two tab groups) both divide evenly, so the fill/scroll-fallback
     already set at base (layout.css) just fills here, no scrolling. */
  .ubiquiti-tabs__item {
    padding: 12px 8px;
  }


  .ubiquiti-categories {
    padding-top: 60px;
  }

  .ubiquiti-categories__grid {
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
  }

  .ubiquiti-category-card {
    flex: 1 0 0;
    padding: 24px;
  }

  .ubiquiti-category-card__icon {
    width: 68px;
    height: 68px;
  }

  .ubiquiti-principles-heading {
    padding: 28px 24px;
  }

  .ubiquiti-principles-tabs-section {
    padding: 24px 24px 0;
  }

  .ubiquiti-principles-panel {
    padding-bottom: 80px;
  }

  /* Content column reads 720px wide in Figma's own ≧768 symbol
     (get_metadata: container x=24 width=720 within a 768px frame) —
     kept as the precise literal rather than the ≈780 the reference
     code approximates. */
  .ubiquiti-principles-panel__container {
    flex-direction: row;
    align-items: center;
    max-width: 720px;
  }

  .ubiquiti-principles-panel__text {
    flex: 1 0 0;
  }

  .ubiquiti-principles-panel__title {
    font-size: var(--fs-24);
  }

  .ubiquiti-principles-panel__list {
    padding-left: 24px;
  }

  .ubiquiti-principles-panel__image-wrap {
    flex: 1 0 0;
    aspect-ratio: 464 / 376;
  }

  /* 60px matches "lg"'s own >=768 value — no explicit padding-top/
     bottom override needed, only horizontal changes here. */
  .ubiquiti-more {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* button/filled "前往線上購物" grows past the site's shared 156×40
     default at this page's own two wider breakpoints (Figma: 220×48,
     fs-base at ≧768 AND ≧1200 — same value both times, one override
     covers both) — scoped to this one button via a modifier rather
     than changing the shared .btn default used elsewhere on the site. */
  .ubiquiti-more__btn {
    min-width: 220px;
    height: 48px;
    font-size: var(--fs-base);
  }

  /* ===== 04 News List Page (≧768) ===== */
  .news-hero {
    padding: 28px 24px;
  }

  .news-tabs {
    padding: 24px 24px 0;
  }

  .news-tabs__item {
    padding: 12px 8px;
  }

  .news-list-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .news-list-section__wrap {
    max-width: 780px;
  }

  .news-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 24px;
  }

  .news-pagination-section {
    padding-top: 20px;
    padding-bottom: 100px;
  }

  .news-pagination {
    gap: 24px;
  }

  /* ===== 04-1 News Detail Page (≧768) ===== */
  .news-detail-head {
    padding-top: 40px;
  }

  .news-detail-head__container {
    max-width: 780px;
  }

  .news-detail-head__info {
    flex-direction: row;
    align-items: center;
  }

  .news-detail-head__tag,
  .news-detail-head__tail {
    order: 0;
  }

  .news-detail-head__cover {
    max-width: 780px;
  }

  .news-detail-content {
    padding-top: 40px;
  }

  .news-detail-content__container {
    max-width: 780px;
  }

  .wp-block-heading {
    margin-top: 16px;
  }

  .news-detail-content__container > p {
    margin-top: 12px;
  }

  .wp-block-quote,
  .wp-block-pullquote {
    margin-top: 16px;
  }

  .wp-block-table,
  .wp-block-columns {
    margin-top: 24px;
  }

  h1.wp-block-heading,
  [role="heading"][aria-level="2"].wp-block-heading {
    font-size: var(--fs-32);
  }

  h2.wp-block-heading {
    font-size: var(--fs-28);
  }

  h3.wp-block-heading {
    font-size: var(--fs-24);
  }

  h4.wp-block-heading {
    font-size: var(--fs-20);
  }

  h5.wp-block-heading {
    font-size: var(--fs-18);
  }

  h6.wp-block-heading {
    font-size: var(--fs-base);
  }

  ul.wp-block-list,
  ol.wp-block-list,
  :is(ul, ol).wp-block-list + :is(ul, ol).wp-block-list {
    margin-top: 24px;
  }

  ul.wp-block-list,
  ol.wp-block-list {
    padding-left: 24px;
  }

  .wp-block-quote {
    gap: 24px;
  }

  .wp-block-quote p {
    font-size: var(--fs-base);
  }

  .wp-block-pullquote {
    width: 282px;
  }

  .wp-block-pullquote blockquote {
    padding: 24px;
  }

  .wp-block-pullquote blockquote p {
    font-size: var(--fs-18);
  }

  .wp-block-pullquote cite {
    font-size: var(--fs-14);
  }

  .wp-block-table {
    width: 354px;
  }

  .wp-block-table th,
  .wp-block-table td {
    padding: 12px 24px;
    font-size: var(--fs-base);
  }

  .wp-block-columns {
    gap: 24px;
  }

  .wp-element-caption {
    padding-top: 16px;
    font-size: var(--fs-base);
  }

  .news-related {
    padding-bottom: 80px;
  }

  /* Homepage's own .news-list/.news-card responsive rules above
     (overflow-x:visible, flex:1) already apply here since this
     section's markup reuses those same classes verbatim — only the
     wider max-width (1196px vs the homepage's 952px) needs its own
     override. */
  .news-related__list {
    max-width: 1196px;
  }

  /* ===== 06 Dealership Page (≧768) ===== */

  .dealership-banner {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .dealership-banner__box {
    max-width: 780px;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 8px 0;
  }

  .dealership-banner__logo-frame {
    flex: 1 0 0;
    width: auto;
  }

  .dealership-banner__cta {
    flex: 1 0 0;
    width: auto;
    padding: 0 40px 0 0;
  }

  .dealership-tabs-section {
    padding: 16px 24px 0;
  }

  .dealership-tabs__item {
    padding: 12px 8px;
  }

  .dealership-stores {
    padding-top: 40px;
    padding-bottom: 60px;
  }

  .dealership-stores__grid {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 24px;
    max-width: 780px;
  }

  .dealership-store-card {
    gap: 16px;
  }

  .dealership-store-card__icon-box {
    height: auto;
    aspect-ratio: 281 / 120;
  }

  .dealership-store-card__icon {
    width: 80px;
    height: 80px;
  }


  .dealer-form-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .dealer-form-section__panel-wrap {
    max-width: 780px;
  }

  .dealer-form-panel {
    padding: 28px;
    min-height: 540px;
  }

  .dealer-form__row {
    flex-direction: row;
    gap: 24px;
  }


  .form-input,
  .dealer-form__submit,
  .contact-form__submit {
    height: 48px;
  }

  .form-textarea {
    height: 140px;
  }

  .form-select-group > legend {
    margin-bottom: 16px;
  }

  .form-select-list {
    gap: 16px 24px;
  }

  .form-upload {
    padding: 32px;
  }

  .form-upload__icon {
    width: 40px;
    height: 40px;
  }

  /* ===== 07 Contact Us Page (≧768) ===== */

  .contact-info-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .contact-info-section__container {
    flex-direction: row;
    align-items: flex-start;
    max-width: 952px;
  }

  .contact-info {
    flex: 1 0 0;
    gap: 24px;
  }

  .contact-info__list {
    gap: 8px;
  }

  .contact-info__note {
    line-height: 1.5;
  }

  .contact-map {
    flex: 1 0 0;
    align-self: stretch;
    width: auto;
    aspect-ratio: auto;
  }


  .contact-form-section__panel-wrap {
    max-width: 780px;
  }

  .contact-form-panel {
    padding: 28px;
    min-height: 540px;
  }

  .contact-form__intro,
  .wpforms-description {
    font-size: var(--fs-18) !important;
    line-height: 24px;
  }

  .contact-form__content {
    gap: 24px;
  }

  .contact-form__row {
    flex-direction: row;
    gap: 24px;
  }

  .contact-form__thankyou-icon,
  .dealer-form__thankyou-icon {
    width: 126px;
    height: 88px;
  }

  .contact-form__thankyou-text,
  .dealer-form__thankyou-text {
    font-size: var(--fs-18);
    line-height: 24px;
  }

  .contact-form__thankyou-btn,
  .dealer-form__thankyou-btn {
    width: 220px;
    height: 48px;
  }
}

@media (min-width: 1200px) {
  /* sys/layout/sec redefined for this breakpoint (Tina, 2026-09-05) —
     2xl (80->120, x1.5 from the >=768 value) was confirmed directly;
     the other 5 steps are derived using that same x1.5 ratio applied to
     their own >=768 value, same caveat as the >=768 block above (flag
     if any of these don't match your actual design). */
  :root {
    --sys-layout-sec-2xl: var(--space-120);
    --sys-layout-sec-xl: var(--space-100);
    --sys-layout-sec-lg: var(--space-88);
    --sys-layout-sec-md: var(--space-76);
    --sys-layout-sec-def: var(--space-60);
    --sys-layout-sec-sm: var(--space-44);
    --sys-grid-margin: var(--space-40);

    --sys-layout-sec-gap-def: var(--space-40);
    --sys-layout-sec-gap-lg: var(--space-48);
    --sys-layout-sec-gap-xl: var(--space-64);

    /* sys/{category}-{tier} redefined for this breakpoint (Tina,
       2026-09-08). */
    --sys-headline-xl: var(--fs-40);
    --sys-headline-2xl: var(--fs-48);
    --sys-headline-lg: var(--fs-32);
    --sys-body-md: var(--fs-20);
  }

  .navbar__logo img {
    width: 40px;
    height: 40px;
  }


  .info-section {
    padding: var(--comp-info-sec-p-top) 40px var(--comp-info-sec-p-bottom);
    gap: 48px;
  }

  /* font-size/line-height/letter-spacing now come from --type-display-*
     (redefined for this breakpoint in this file's :root above). */
  .info-section__display {
    flex-direction: row;
  }

  /* Bleeds edge-to-edge, canceling .info-section's own 40px side
     padding (Tina, 2026-09-04) — overriding the earlier "no bleed at
     this breakpoint" reading (node 4018:11935), same cancellation
     pattern as the <768/>=768 rules above. */
  .info-section__gallery {
    gap: 24px;
    width: calc(100% + 80px);
    margin: 0 -40px;
  }

  /* Center/plateau tier capped at 632px (Tina, 2026-09-05); the two
     flanking tiers scale down proportionally with it (Tina, 2026-09-05
     follow-up) instead of keeping their own independent % once the cap
     engages — each cap here is 632px scaled by that image's own width
     ratio to the center (33.333%/50% = 2/3, 40%/50% = 4/5), not a
     separately-chosen number. 2026-09-09：改用 nth-child/nth-last-child
     雙向配對（理由同 layout.css 的 base 規則），不寫死共 5 張。 */
  .info-section__gallery img {
    max-width: 632px;
  }

  .info-section__gallery img:nth-child(1),
  .info-section__gallery img:nth-last-child(1) {
    max-width: calc(632px * 2 / 3);
  }

  .info-section__gallery img:nth-child(2),
  .info-section__gallery img:nth-last-child(2) {
    max-width: calc(632px * 4 / 5);
  }

  /*
   * Deliberate overlap, re-measured against node 4018:11935's exact
   * child coordinates (get_metadata, not the get_design_context
   * approximation): inside the 1196px container, the text column
   * ("left") sits at x:-102 (bleeds 102px past the container's own
   * left edge) width 500, and the image sits at x:298 width 1000 —
   * i.e. the image starts *inside* the text column's span, overlapping
   * it by 100px, not flush after it. The previous version only
   * shifted the image (-100px) and left the text column flush at the
   * container edge, which put the whole pairing 102px too far right.
   *
   * The 500/1000/-102/-202 numbers are fixed px lifted straight off
   * node 4018:11935, whose canvas is 1440px wide — only exactly
   * correct AT 1440px. An earlier vw+clamp() attempt scaled the -102/
   * -202 bleeds down proportionally as the viewport narrowed, but that
   * still clipped text at 1200px — proportional scaling doesn't know
   * how much cushion is actually available, it just shrinks the bleed
   * by a fixed ratio regardless.
   *
   * Fixed properly below using --edge-bleed: the *available* cushion
   * on each side of .container is 40px + half of whatever room is left
   * once .container has grown to its 1196px cap (0 below that cap) —
   * i.e. exactly how much .container's own margin:auto centering
   * already leaves between it and the section's padding edge.
   *
   * FIX (Tina flagged 2026-09-04): the previous clamp — min(102px,
   * cushion) — let the bleed consume the *entire* cushion, so the
   * text column sat flush against the viewport edge (x:0, no
   * breathing room) from 1200px up to ~1400px. Technically "no
   * clipping" but visually reads as a bug ("貼邊"). Now the bleed
   * also reserves this section's own 40px padding as a floor, so the
   * text column never renders closer than 40px to the viewport edge.
   * Full -102px bleed (matching the 1440px reference exactly) now
   * engages once the cushion exceeds 142px (~1480px+ viewport)
   * instead of ~1400px — not re-verified against a Figma frame in
   * that narrower range, so if Tina has the actual >=1200 frame open,
   * worth a quick eyeball check that 40px reads right at ~1200-1400px.
   * --container-actual-width mirrors .container's own
   * min(available, 1196px) sizing so the image's margin (derived from
   * both) stays consistent with wherever .container's right edge
   * actually is.
   */
  .service-section {
    padding: var(--comp-service-sec-p-top) 40px var(--comp-service-sec-p-bottom);
  }

  /* >=1200 needs image standing alone next to a title+card+pagination
     column — a genuine 2D regroup, not just a flex-direction switch —
     so .container becomes a grid here. .service-section__content
     (the real image+card wrapper used below this breakpoint) switches
     to display:contents so its two children join this grid directly
     as their own items, instead of needing a second copy of the
     markup nested differently. */
  .service-section .container {
    display: grid;
    grid-template-columns: 500px 1fr;
    grid-template-areas:
      "top        image"
      "card       image"
      "pagination image";
    align-items: center;
    /* 列距（標題→卡片）跟其他五個 container 綁同一個 token；欄距 0，
       圖片是靠自己的 grid 欄寬定位。 */
    gap: var(--sys-layout-sec-gap-xl) 0;
    --container-left: calc(40px + max(0px, (100vw - 1276px) / 2));
    --edge-bleed: min(102px, max(0px, var(--container-left) - 40px));
    --container-actual-width: min(calc(100vw - 80px), 1196px);
  }

  .service-section__content,
  .service-section__row {
    display: contents;
  }

  /* margin-left below is the missing left-column bleed described
     above — top/card/pagination all share the text column's offset
     from node 4018:11935 (-102px at the 1440px reference, clamped to
     the available cushion at narrower desktop widths). */
  .service-section__top {
    grid-area: top;
    align-items: flex-start;
    max-width: 360px;
    padding: 0;
    margin-left: calc(-1 * var(--edge-bleed));
  }

  .service-section .section-title--center {
    justify-content: flex-start;
    padding-left: 24px;
    padding-right: 0;
  }

  .service-section .section-title--center::after {
    display: none;
  }

  .service-section__desc {
    text-align: left;
  }

  /* Width is 65% of the viewport, capped at 1000px (Tina, 2026-09-04) —
     --img-width holds that min(65vw, 1000px) so both the box's own width
     and the margin-left formula stay consistent whether or not the cap
     is actually engaged. margin-left is still set so the image's right
     edge lands at exactly container-right + --edge-bleed (the same
     capped cushion as the text column above): at the 500px+1fr grid, the
     image's own track starts at x:500 relative to .container, so
     margin = (--container-actual-width + --edge-bleed) - 500(track) -
     --img-width(own width). */
  .service-section__image {
    grid-area: image;
    align-self: stretch;
    --img-width: min(65vw, 1000px);
    width: var(--img-width);
    max-width: none;
    height: 420px;
    aspect-ratio: auto;
    margin-left: calc(var(--container-actual-width) + var(--edge-bleed) - 500px - var(--img-width));
    margin-bottom: 0;
  }

  /* card content sizing at this breakpoint (node 7125:4341) — was just
     inheriting the <768 base values (30px num badge, fs/20 title, fs/14
     desc), never individually checked against this frame. */
  .service-card {
    grid-area: card;
    align-self: stretch;
    flex-direction: row;
    width: 100%;
    max-width: none;
    padding: 28px;
    gap: 24px;
    margin-left: calc(-1 * var(--edge-bleed));
  }

  .service-card__num {
    width: 40px;
    height: 40px;
    font-size: var(--fs-28);
  }

  .service-card__body {
    gap: 16px;
  }


  .service-section__pagination {
    grid-area: pagination;
    justify-content: flex-start;
    align-self: auto;
    margin-top: 0;
    margin-left: calc(-1 * var(--edge-bleed));
    /* label row's own buttons: 24px apart (node 4018:11935), not the
       16px base value which was never re-checked at this breakpoint. */
    gap: 24px;
  }

  .security-cards {
    display: flex;
    grid-template-columns: none;
  }

  /* card-security "lg" size variant, corrected per Tina (2026-09-04) —
     vertical 60px, horizontal 20px — overriding node 7043:6102's
     20px/60px reading (axes were swapped from what's actually in the
     design). */
  .security-card {
    padding: 60px 20px;
  }

  .security-card img {
    width: 48px;
    height: 48px;
  }

  .brand-section {
    padding: var(--comp-brand-sec-p-top) 40px var(--comp-brand-sec-p-bottom);
  }

  /* Row and per-logo gaps both measure 24px against node 4018:11935
     (5-logo row: 412-280-108=24; row-to-row: 264-132-108=24) — the
     16px "sm" gutter was never re-checked at this breakpoint. */
  .brand-logos {
    gap: var(--grid-gutter);
  }

  .brand-logos__row {
    gap: var(--grid-gutter);
  }

  .brand-logos__row img {
    width: 108px;
    height: 108px;
  }

  /* 斜邊轉完（--sys-motion-duration）才輪到 stats 的內容淡入——Tina
     指定的先後順序。--fade-offset 由 .fade-section / .fade-children
     的 transition-delay 讀取（components.css）。 */
  .stats-section {
    --fade-offset: var(--sys-motion-duration);
  }

  /* ----- numSec ≧1200 改版（node 7111:12618，2026-09-10）：整塊置中改成
     靠左，標題列與 3 組數字都貼齊 container 左緣 ----- */

  /* padding-top 走 --sys-layout-sec-def（Tina, 2026-09-10），不是
     --comp-stats-sec-p-top 在這個斷點的 xl（100px）——上方留白已經有
     .section-slash 斜線帶補足。原本照 node 7111:12618 量到的是 40px，
     不在這個斷點的級距上（120/100/88/76/60/44），改綁 def 之後是 60px，
     同 .brand-cards「直接綁級距、不留字面值」的先例。
     padding-bottom 維持 --comp-stats-sec-p-bottom（2xl = 120px，
     命中 node 7111:12618 的 470-350=120）。 */
  .stats-section {
    padding: var(--sys-layout-sec-def) 40px var(--comp-stats-sec-p-bottom);
  }

  /* container 內容靠左（node 7111:12624 的 top／content 都從 x=0 起算），
     間距 60px＝top 底(76) 到 content 頂(136)。 */
  .stats-section .container {
    align-items: flex-start;
  }

  .stats-section .section-heading {
    align-items: flex-start;
  }

  /* 標題在 <768／≧768 跟 clientSec 一樣是「置中＋左右各一條紅槓」
     （markup 已補 .section-title--center）；只有這個斷點翻成
     「靠左＋單一左槓」，同 .news-section__title／.clients-section__top
     在這裡的處理。槓子 6x32、文字左內距 24px（node 7111:12621／12623）。 */
  .stats-section .section-title {
    justify-content: flex-start;
    width: 100%;
    padding: 0 0 0 24px;
  }

  .stats-section .section-title::before {
    height: 32px;
  }

  .stats-section .section-title::after {
    display: none;
  }

  /* Items expand (flex:1, set at >=768) but each caps at its own
     max-width (Tina, 2026-09-04) — 300/160/280px, matching the original
     node 4018:11935 measurement (item1 0-300, item2 406-566, item3
     672-952) almost exactly. Once every item hits its cap (300+160+280
     = 740px of the 952px container), there's no flex-grow left to
     redistribute, so space-between turns the 212px leftover into the
     two ~106px gaps between items instead of dead space after item 3. */
  .stats-grid {
    justify-content: space-between;
  }

  .stat-item:nth-child(1) {
    max-width: 300px;
  }
  .stat-item:nth-child(2) {
    max-width: 160px;
  }
  .stat-item:nth-child(3) {
    max-width: 280px;
  }

  /* <768 just corrected this to 56px (was wrongly using the 80px
     desktop value everywhere); restore 80px here since >=1200 wasn't
     part of that pass. */
  .stat-item__number strong {
    font-size: var(--fs-huge);
  }

  .clients-section {
    padding: var(--comp-clients-sec-p-top) 40px var(--comp-clients-sec-p-bottom);
  }

  .cta-section {
    padding: var(--comp-cta-sec-p-top) 40px var(--comp-cta-sec-p-bottom);
  }

  .clients-section__top {
    flex-direction: row;
    align-items: flex-end;
    text-align: left;
  }

  /* section-heading layout for this breakpoint (node 7125:5628) — was a
     fixed 342px width reusing the shared centered/two-bar treatment
     (no Figma reference existed for this area before). Now: fills
     instead of a fixed width, capped at the same width as the 3-column
     client-grid below it (both share .container's 800px cap, so this
     max-width is just an explicit safety net, not a new value) — and
     the title switches to left-aligned with a single left accent bar
     instead of the centered two-bar style. */
  /* flex:1 belongs on .section-heading, not .section-title: .section-title
     sits inside .section-heading's own column flex context, where flex:1
     grows the vertical axis, not width — .clients-section__top (the
     actual row) is the flex parent that needs the fill applied to its
     direct child. .section-title's own width:100% (base rule) then
     stretches it to match .section-heading automatically. */
  .clients-section__top .section-heading {
    align-items: flex-start;
    /* flex-basis 342px (its old fixed width) as a floor — flex-basis:0
       let the <p> sibling's own large content-based basis starve this
       down to ~56px in testing. shrink:0 keeps that floor, grow:1 lets
       it still expand into any real leftover space, up to max-width. */
    flex: 1 0 342px;
    max-width: 800px;
  }

  .clients-section__top .section-title {
    justify-content: flex-start;
    padding: 0 0 0 24px;
  }

  .clients-section__top .section-title::before {
    height: 32px;
    background: var(--color-primary-400);
  }

  .clients-section__top .section-title::after {
    display: none;
  }

  /* clientSec has no content in node 4018:11935 (the ≧1200 master) —
     empty placeholder frame, no Figma reference to verify a distinct
     desktop layout against. Per Tina: reuse the >=768 per-column flex
     layout as-is at this breakpoint too (no grid override here), only
     bump card height for desktop. */
  .client-card {
    height: 220px;
  }

  .cta-cards {
    flex-direction: row;
    align-items: stretch;
  }

  /* cta "lg" size variant (node 7051:7047) — cta-card had no Figma
     reference at any breakpoint before this (generic stack default,
     see layout.css comment); this is the first confirmed sizing for
     it, so only >=1200 changes here — mobile/tablet stay as the
     unverified generic default until Tina provides those too. */
  .cta-card {
    padding: 32px;
    gap: 32px;
  }


  .cta-card__arrow {
    width: 40px;
    height: 40px;
  }

  /* ----- newsSec ≧1200 改版（node 7125:6329，2026-09-10）：置中堆疊
     改成「標題列（左標題 + 右按鈕）／整寬清單」兩列 ----- */

  /* 上下 padding 不對稱：node 7125:6329 是 pt-80 / pb-100。100px 命中
     --sys-layout-sec-xl（= --comp-news-sec-p-bottom 現值，不動）；
     80px 在這個斷點的 --sys-layout-sec-* 六個級距（120/100/88/76/
     60/44）上都沒有對應值，Reference 層的 --space-80 又不直接給
     元件用，故寫字面值——同 .brand-cards 的「literal, off this
     scale's own 1200 step」先例。只覆寫 padding-top，
     --comp-news-sec-p-top 本身不動（<768／≧768 不受影響）。 */
  .news-section {
    padding: 80px 40px var(--comp-news-sec-p-bottom);
  }

  /* >=768 just capped these at tablet-specific widths (952/1152/1120px,
     confirmed against the tablet master); restore each section's
     pre-existing >=1200 behavior here since this pass didn't touch
     desktop. */
  .security-section .container,
  .info-section__intro,
  .brand-section .container {
    max-width: var(--container-max);
  }

  .security-section {
    padding-top: var(--comp-security-sec-p-top);
    padding-bottom: var(--comp-security-sec-p-bottom);
  }

  .stats-section .container,
  .news-list {
    max-width: 952px;
  }

  /* 兩列 grid 的結構在 ≧768 就已經套好（見上面的區塊）；這裡只換容器寬
     952px（node 7125:6330／6337）。列距跟其他五個 container 一樣吃
     --sys-layout-sec-gap-xl，不再寫 node 量到的 48px。 */
  .news-section__container {
    max-width: 952px;
  }

  /* 3 cards, 24px apart against node 4018:11935 (325.33-301.33=24) —
     the 16px "sm" gutter (news-list's base rule) was never re-checked
     at this breakpoint. */
  .news-list {
    gap: var(--grid-gutter);
  }

  .site-footer__top {
    padding: 40px;
  }

  .site-footer__bottom {
    padding: 12px 40px;
  }

  /* ===== 02 About Page (≧1200) ===== */
  .about-hero,
  .about-intro,
  .about-philosophy,
  .about-testimony,
  .about-videos,
  .about-reviews,
  .about-contact,
  .breadcrumb-section {
    padding-left: 40px;
    padding-right: 40px;
  }

  /* --comp-about-intro-sec-p-* stays pinned to "md" (matches
     <768/>=768), but >=1200 wants 60px, not md's natural 75px — that's
     the "def" step's >=1200 value instead. */
  .about-intro {
    padding-top: var(--sys-layout-sec-def);
    padding-bottom: var(--sys-layout-sec-def);
  }

  /* top matches the "def" step's >=1200 value (60px), same override
     pattern as .about-intro above. bottom (80px) doesn't land on any
     scale step (md:75/lg:90 at this breakpoint) and the <768/>=768
     bottoms (56/70) don't converge with the other sections that also
     need 80 here (see design-token-conventions skill) — kept a
     literal exception rather than forcing a new scale step. */
  .about-philosophy {
    padding-top: var(--sys-layout-sec-def);
    padding-bottom: 80px;
  }

  .about-philosophy__container {
    max-width: 952px;
  }

  .about-philosophy__list {
    gap: 32px;
  }

  .about-philosophy__card {
    gap: 16px;
  }


  /* 80/80 doesn't land on any scale step at this breakpoint (md:75/
     lg:90) — same documented exception as .about-philosophy's bottom. */
  .about-testimony {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .about-testimony__container {
    max-width: 952px;
  }

  .about-testimony__top {
    gap: 24px;
  }

  .about-testimony__cards {
    gap: 32px;
  }

  .about-testimony__card {
    padding: 24px;
    gap: 16px;
  }

  .about-testimony__card-head {
    gap: 16px;
  }

  .about-testimony__card-num {
    width: 28px;
    height: 28px;
  }


  /* 80/80 doesn't land on any scale step at this breakpoint (md:75/
     lg:90) — same documented exception as .about-philosophy's bottom. */
  .about-videos {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .about-video-card-link {
    max-width: 952px;
  }

  .about-video-card {
    padding: 24px;
    gap: 24px;
  }

  .about-video-card__num {
    width: 28px;
    height: 28px;
  }


  /* Same "lg" pinned <768/>=768, overridden to "def" at >=1200 pattern
     as .about-contact above. */
  .about-reviews {
    padding-top: var(--sys-layout-sec-def);
    padding-bottom: var(--sys-layout-sec-def);
  }

  .about-reviews__container {
    max-width: 708px;
  }

  .about-review-card {
    padding: 24px;
    gap: 16px;
  }

  /* This section's own --comp-* token stays pinned to "lg" (matches
     <768/>=768), but at >=1200 Figma wants 60px, not lg's natural 90px
     — that happens to equal the "def" step's >=1200 value, so this
     overrides straight to that step instead of a bare literal. */
  .about-contact {
    padding-top: var(--sys-layout-sec-def);
    padding-bottom: var(--sys-layout-sec-def);
  }

  .about-contact__container {
    max-width: 952px;
  }

  .about-contact__content {
    gap: 8px;
  }

  /* ===== 02-1 Our Clients Page (≧1200) ===== */

  /* "lg" size variant (node 7006:19382): fs-20, border-bottom 6px when
     selected, px-8/py-16 padding. */
  .our-clients-tabs {
    padding: 16px 40px 0;
  }

  .our-clients-tabs__item {
    padding: 16px 8px;
  }

  /* 跟全站容器上限同一個值，置中在捲動容器裡。 */
  .our-clients-tabs__list {
    max-width: var(--container-max);
    margin: 0 auto;
  }

  .tabs-indicator {
    height: 6px;
  }

  /* Same literal 40/80 as ≧768 — Figma doesn't scale this section
     further at desktop. */
  .our-clients-grid-section {
    padding-left: 40px;
    padding-right: 40px;
  }

  .our-clients-grid-wrap {
    max-width: var(--container-max);
  }

  .our-clients-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  /* ===== 02-2 Authorized Brand Page (≧1200) ===== */

  /* Literal 60px in Figma at this breakpoint too — NOT scaled up via
     --sys-layout-sec-lg (which would give 90px here), same "literal,
     off this scale's own 1200 step" precedent as the about-page
     sections in layout.css — 60px here equals "def"'s own >=1200
     value, so it's wired directly to that step instead of a literal. */
  .brand-cards {
    padding: var(--sys-layout-sec-def) 40px;
  }

  /* Row-gap 48 / column-gap 40 confirmed against node 7006:22972 (sec)
     / 7006:22973 (row). Column count now diverges between the two
     groups (below) — this is the only breakpoint where Figma's "後 4
     張排成 2 欄（較大尺寸）" actually shows a different column count;
     at <768/≧768 both groups are already the same column count. */
  .brand-cards__group {
    max-width: var(--container-max);
    column-gap: 40px;
  }

  .brand-cards__group--main {
    grid-template-columns: repeat(3, 1fr);
  }

  .brand-cards__group--featured {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ===== 02-3 ESG Page (≧1200) =====
     .esg-impact excluded — see the ≧768 block above for why. */
  .esg-hero,
  .esg-conduct,
  .esg-csr,
  .esg-talent {
    padding-left: 40px;
    padding-right: 40px;
  }

  .esg-conduct__container {
    max-width: 952px;
    padding: 48px;
  }

  /* 80/80 doesn't land on any scale step at this breakpoint (md:75/
     lg:90) — same documented exception as .about-philosophy's bottom. */
  .esg-csr {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .esg-csr__container {
    max-width: 952px;
  }

  .esg-talent__container {
    max-width: 952px;
  }

  /* top (80px) doesn't land on any scale step here (md:75/lg:90) —
     same documented exception pattern as .about-philosophy's bottom.
     bottom's own "2xl" step already gives 120px naturally. */
  .esg-talent {
    padding-top: 80px;
  }

  /* Both rows use align-items:center at this breakpoint (node
     7007:24258/7007:24261 — unlike ≧768, where row1 is flex-start,
     see node 9112:21861). */
  .esg-talent__row:first-child {
    align-items: center;
  }

  /* ----- 社會公益 / 環境永續 (≧1200): min-height replaces the ≧768
     aspect-ratio box (node 7136:21204/7136:21212 — px-120/py-80,
     min-h-560, no aspect-ratio at this breakpoint). */
  .esg-impact__card {
    aspect-ratio: unset;
    min-height: 560px;
    padding: 80px 120px;
  }

  /* ===== 03 Ubiquiti Page (≧1200) ===== */


  /* "lg" size variant (node 7092:10561 / 7056:10130): fs-20,
     border-bottom 6px when selected. */
  .ubiquiti-tabs__item {
    padding: 16px 8px;
  }

  .ubiquiti-categories {
    padding-top: 80px;
  }

  .ubiquiti-category-card {
    padding: 32px;
  }

  .ubiquiti-category-card__icon {
    width: 80px;
    height: 80px;
  }


  .ubiquiti-principles-heading {
    padding: 28px 40px;
  }

  .ubiquiti-principles-tabs-section {
    padding: 24px 40px 0;
  }

  .ubiquiti-principles-panel {
    padding-top: var(--sys-layout-sec-def);
  }

  .ubiquiti-principles-panel__container {
    max-width: 952px;
  }

  .ubiquiti-principles-panel__title {
    font-size: var(--fs-28);
  }

  /* Pinned "lg" stays at <768/>=768, but >=1200 wants 60px, not lg's
     natural 90px — the "def" step's >=1200 value instead, same
     override pattern as .about-contact. */
  .ubiquiti-more {
    padding: var(--sys-layout-sec-def) 40px;
  }

  /* ===== 04 News List Page (≧1200) ===== */
  .news-hero {
    padding: 28px 40px;
  }

  .news-tabs {
    padding: 24px 40px 0;
  }

  .news-tabs__item {
    padding: 16px 8px;
  }

  .news-list-section {
    padding-top: var(--sys-layout-sec-def);
    padding-bottom: var(--sys-layout-sec-def);
  }

  .news-list-section__wrap {
    max-width: 952px;
  }

  .news-grid {
    grid-template-columns: repeat(3, 1fr);
  }


  /* ===== 04-1 News Detail Page (≧1200) ===== */
  .news-detail-head__container,
  .news-detail-head__cover,
  .news-detail-content__container {
    max-width: 952px;
  }

  h1.wp-block-heading,
  [role="heading"][aria-level="2"].wp-block-heading {
    font-size: var(--fs-36);
  }

  h2.wp-block-heading {
    font-size: var(--fs-32);
  }

  h3.wp-block-heading {
    font-size: var(--fs-28);
  }

  h4.wp-block-heading {
    font-size: var(--fs-24);
  }

  h5.wp-block-heading {
    font-size: var(--fs-20);
  }

  h6.wp-block-heading {
    font-size: var(--fs-18);
  }

  .wp-block-quote p {
    font-size: var(--fs-18);
  }

  .news-related {
    padding-top: var(--sys-layout-sec-def);
  }

  /* ===== 06 Dealership Page (≧1200) ===== */


  .dealership-banner__box {
    max-width: 952px;
  }

  .dealership-tabs-section {
    padding: 16px 40px 0;
  }

  .dealership-tabs__item {
    padding: 16px 8px;
  }

  .dealership-stores {
    padding-top: 40px;
    padding-bottom: 80px;
  }

  .dealership-stores__grid {
    max-width: 1196px;
  }

  .dealership-store-card__icon-box {
    aspect-ratio: 281 / 188;
  }

  .dealership-store-card__icon {
    width: 120px;
    height: 120px;
  }



  .dealer-form-section__panel-wrap {
    max-width: 952px;
  }

  /* ===== 07 Contact Us Page (≧1200) ===== */


  .contact-form-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .contact-form-section__panel-wrap {
    max-width: 952px;
  }
}