@charset "UTF-8";
/* ==========================================================================
   金孚餐飲集團 — repair layer
   Loaded after app-index-min-*.css. Contains only what the archive lost:
   1. Fallbacks for artwork that no longer exists
   2. Brand-page layout (replaces the fullPage.js stylesheet)
   3. Site navigation
   4. Responsive corrections
   5. Scroll reveal (replaces AOS)
   ========================================================================== */

:root {
  --teal:        #74c6be;  /* decorative fills only — 1.99:1 on white */
  --teal-dark:   #4f9a92;
  --teal-deep:   #3d7d76;  /* 4.78:1 on white — use wherever white text sits */
  --brown:       #694f45;
  --brown-dark:  #4a3730;
  --orange:      #f08200;
  --ink:         #333;
  --paper:       #fff;
  --hairline:    rgba(0, 0, 0, .12);
  --shell:       1180px;   /* nav and content-page width */
  --gutter:      16px;
}

/* --- 1. Baseline -------------------------------------------------------- */

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

img { max-width: 100%; height: auto; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* The scraper left an always-hidden loader whose spinner art is gone. */
#loading { display: none !important; }

/* --- 2. Site navigation ------------------------------------------------- */

.site-nav {
  position: relative;
  z-index: 40;
  background: var(--brown);
}

.site-nav__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.site-nav a {
  display: block;
  padding: 14px 16px;
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible { color: #fff; background: rgba(255, 255, 255, .1); }

.site-nav a[aria-current="page"] {
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--teal);
}

.site-nav__home { margin-right: auto; font-weight: 700; letter-spacing: .04em; }

/* Five links fit in two rows on a 360–390px phone only with tighter padding. */
@media (max-width: 479px) {
  .site-nav__inner { padding: 0 8px; }
  .site-nav a { padding: 12px 10px; }
}

/* --- 3. Fallbacks for artwork lost with the domain ---------------------- */
/* Each block below replaced a photographic background that is not in the
   archive and could not be recovered. Swap the fallback for the real image
   when new artwork is available — selectors are unchanged. */

/* 中央廚房 — the section was a 100vh photo pane with the copy absolutely
   parked in a narrow column over it. With the photo gone that left a tall
   empty band, so the section now sizes to its text. */
.kick {
  background: linear-gradient(135deg, var(--brown) 0%, var(--brown-dark) 100%);
  overflow: hidden;     /* contains any residual float */
}

.kick .cov_kick,
.kick .cov_chef { display: none; }

.kick .block_kick {
  position: static;
  float: none;          /* original floated it right; without this .kick collapses */
  top: auto;
  right: auto;
  width: auto;
  max-width: 66ch;
  margin: 0 auto;
  padding: 64px 22px;
  background: none;
  text-align: left;
}

.kick .block_kick .title { margin: 0 0 18px; }

.kick .block_kick p { margin: 0; line-height: 1.95; }

/* .block_plan keeps its original #333 panel — .item_meta text is white.
   A light fallback here drops the card text to 1.08:1. */
.block_plan { background-color: #333; }

.block_train {
  background: linear-gradient(160deg, #f2faf9 0%, #e3f2f0 100%);
}

.block_train .train_cover { display: none; }

.contact {
  background: linear-gradient(160deg, var(--brown) 0%, var(--brown-dark) 100%);
}

/* 規劃設計 hexagons — the six hex PNGs are gone, drawn in CSS instead. */
.block_tut ul li {
  background: var(--teal-deep);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: background-color .2s ease;
}

.block_tut ul li:hover { background: #33645e; }

/* The li takes its height from padding-bottom, so its content box is nearly
   zero — centring has to stay absolute, as in the original. */
.block_tut ul li span {
  width: 76%;
  color: #fff;
  line-height: 1.5;
  text-align: center;
}

/* News bullet icon replaced with a drawn marker. */
.news_item::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  background: var(--orange);
  border-radius: 50%;
  vertical-align: middle;
}

/* --- 4. Brand pages: normal document flow ------------------------------- */
/* These pages were built for fullPage.js, which locked every section to a
   fixed 100vh viewport pane. That stylesheet is gone, and the pattern clipped
   long content on short screens. Sections now flow and scroll normally. */

#fullpage { width: 100%; }

#fullpage > .section {
  position: relative;
  width: 100%;
  overflow: visible;
}

.brand-page #home {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 78vh;
  padding: 96px 20px 64px;
  text-align: center;
  color: #fff;
  background: var(--brown-dark);
}

.brand-page #home > .home_cov {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: .55;
}

/* .home is fixed to the corner, so it must stay out of this reset. */
.brand-page #home > *:not(.home_cov):not(.home) { position: relative; z-index: 2; }

.brand-page .brand_logo { max-width: 300px; margin: 0 auto 20px; }

.brand-page .brand_logo img { display: block; width: 100%; }

.brand-page #brand_slogan {
  font-size: clamp(18px, 3.4vw, 30px);
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 28px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}

.brand-page .hero_scroll {
  font-size: 14px;
  letter-spacing: .12em;
  opacity: .9;
}

.brand-page .hero_scroll .chevron {
  display: block;
  margin-top: 6px;
  font-size: 26px;
  animation: jf-bob 1.9s ease-in-out infinite;
}

@keyframes jf-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

/* Home button */
.brand-page a.home {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 22px;
  text-decoration: none;
  transition: background-color .2s ease;
}

.brand-page a.home:hover,
.brand-page a.home:focus-visible { background: var(--orange); }

/* On phones the top-left corner is taken by the nav, so the button sits
   bottom-left, opposite the back-to-top button. */
@media (max-width: 899px) {
  .brand-page a.home { top: auto; bottom: 16px; left: 16px; }
}

/* Intro blocks — photo above, copy below; side-by-side from tablet up. */
.brand-page .intro_block {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--hairline);
}

.brand-page .intro_cover {
  min-height: 240px;
  background-color: #ddd8d4;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.brand-page .intro_txt {
  padding: 32px 22px 40px;
  max-width: 68ch;
}

.brand-page .intro_txt h2 {
  margin: 0 0 14px;
  font-size: clamp(20px, 2.6vw, 27px);
  line-height: 1.4;
  color: var(--brown);
}

.brand-page .intro_txt p {
  margin: 0;
  font-size: 16px;
  line-height: 1.95;
  color: #4a4a4a;
}

@media (min-width: 768px) {
  .brand-page .intro_block { flex-direction: row; align-items: stretch; }
  .brand-page .intro_block > .intro_cover { flex: 1 1 50%; min-height: 380px; }
  .brand-page .intro_block > .intro_txt {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 44px 5%;
  }
  .brand-page .intro_block:nth-child(even) { flex-direction: row-reverse; }
}

/* Blocks whose photograph was lost with the domain run as centred text so
   they read as intentional rather than as a gap waiting for an image. */
.brand-page .intro_block.no-media {
  background: #fff;
  border-bottom: 1px solid var(--hairline);
}

.brand-page .intro_block.no-media:nth-of-type(even) { background: #faf9f7; }

.brand-page .intro_block.no-media > .intro_txt {
  flex: 1 1 100%;
  max-width: 74ch;
  margin: 0 auto;
  padding: 46px 22px;
  text-align: center;
}

.brand-page .intro_block.no-media h2 {
  display: inline-block;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--teal);
}

/* Brand tiles */
#brand > ul > li.is-hoverable { transition: flex-grow .35s ease; }

#brand > ul > li .brand-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #3f3f3f;
}

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

/* News */
.brand-page .news_wrap { padding: 56px 0; background: #faf9f7; }

.brand-page .news_cover {
  min-height: 180px;
  margin-bottom: 34px;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  background-position: center;
  background-size: cover;
}

.brand-page .news_block { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

.brand-page .news_block > .title {
  margin: 0 0 26px;
  font-size: 24px;
  color: var(--brown);
}

.brand-page .news_list { display: grid; gap: 0 40px; }

@media (min-width: 768px) {
  .brand-page .news_list { grid-template-columns: 1fr 1fr; }
}

.brand-page .news_list ul { margin: 0; padding: 0; list-style: none; }

.brand-page .news_list li { border-bottom: 1px solid var(--hairline); }

.brand-page .news_item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 4px;
  text-decoration: none;
  transition: background-color .18s ease;
}

.brand-page .news_item:hover { background: rgba(116, 198, 190, .14); }

.brand-page .news_item .news_date {
  flex: 0 0 auto;
  color: var(--teal-deep);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.brand-page .news_item p { margin: 0; font-size: 16px; color: var(--ink); }

/* News detail panels: collapsed by default, opened by the list links. */
.brand-page .news_post {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
  scroll-margin-top: 24px;
}

.brand-page .news_post[hidden] { display: none; }

.brand-page .news_post .news_date {
  margin-top: 30px;
  color: var(--teal-deep);
  font-size: 14px;
}

.brand-page .news_post .news_title {
  margin: 6px 0 16px;
  font-size: 21px;
  line-height: 1.5;
  color: var(--brown);
}

.brand-page .news_content {
  font-size: 16px;
  line-height: 1.95;
  color: #4a4a4a;
  overflow-wrap: anywhere;
}

.brand-page .news_content img { display: block; margin: 16px 0; border-radius: 3px; }

.brand-page .news-close {
  display: inline-block;
  margin: 18px 0 34px;
  padding: 9px 20px;
  border: 1px solid var(--teal-deep);
  border-radius: 3px;
  background: none;
  color: var(--teal-deep);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.brand-page .news-close:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }

/* Promotion band */
.brand-page #mode {
  padding: 0;
  text-align: center;
  background: var(--teal-deep);
}

.brand-page #mode .mode_cov { display: none; }

/* The original painted this band in the light teal with white text. */
.brand-page #mode .sec_title {
  background: none;
  padding: 54px 20px;
}

.brand-page #mode .title { margin: 0; color: #fff; font-size: clamp(19px, 2.6vw, 26px); line-height: 1.5; }

/* Franchise / seminar panel */
.brand-page #meta { display: flex; flex-direction: column; }

.brand-page #meta > .left { background: var(--brown-dark); }

.brand-page .meta_cov {
  min-height: 260px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.brand-page #meta > .right { background: #fff; }

.brand-page .meta_content { max-width: 640px; margin: 0 auto; padding: 48px 22px; }

.brand-page .meta_block { margin-bottom: 38px; }

.brand-page .meta_block h3 {
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--teal);
  font-size: 20px;
  color: var(--brown);
}

.brand-page .meta_block p { margin: 0 0 10px; font-size: 16px; line-height: 1.85; color: #4a4a4a; }

.brand-page .seminar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 16px 0;
}

@media (min-width: 620px) {
  .brand-page .seminar { grid-template-columns: repeat(4, 1fr); }
}

.brand-page .seminar_item {
  padding: 14px 8px;
  border: 1px solid var(--teal);
  border-radius: 3px;
  text-align: center;
  background: rgba(116, 198, 190, .1);
}

.brand-page .seminar_item p { margin: 0; font-size: 14px; line-height: 1.6; }

.brand-page .meta_btn,
.brand-page .meta_btn2 {
  display: inline-block;
  margin-top: 10px;
  padding: 11px 26px;
  border-radius: 3px;
  background: var(--teal-deep);
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  transition: background-color .2s ease;
}

.brand-page .meta_btn:hover,
.brand-page .meta_btn2:hover { background: #33645e; }

.brand-page .meta_btn2 { background: var(--brown); }
.brand-page .meta_btn2:hover { background: var(--brown-dark); }

.brand-page .meta_info { margin: 0 0 8px; font-size: 16px; }

.brand-page .meta_post {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 22px 54px;
  scroll-margin-top: 24px;
}

.brand-page .meta_post ul { padding-left: 22px; line-height: 1.9; }

@media (min-width: 900px) {
  .brand-page #meta { flex-direction: row; flex-wrap: wrap; }
  .brand-page #meta > .left  { flex: 1 1 42%; }
  .brand-page #meta > .right { flex: 1 1 58%; }
  .brand-page .meta_cov { height: 100%; min-height: 520px; }
  .brand-page .meta_post { flex: 1 1 100%; }
}

/* --- 5. Contact section ------------------------------------------------- */

.contact { padding: 56px 0 0; color: #fff; }

.contact .container { max-width: 860px; margin: 0 auto; padding: 0 20px; }

.contact_title { margin: 0 0 16px; font-size: clamp(20px, 3vw, 28px); }

.contact > .container > p { font-size: 15px; line-height: 1.95; opacity: .92; }

/* Direct contact routes: phone and LINE. */
.contact-direct {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.contact-direct a {
  display: inline-block;
  padding: 11px 20px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 3px;
  font-size: 15px;
  text-decoration: none;
  transition: background-color .2s ease;
}

.contact-direct a:hover { background: rgba(255, 255, 255, .16); }

/* Pinned to the bottom of a 100vh pane in the original, which overlapped the
   section's content once it began to flow. */
.footer {
  position: static;
  bottom: auto;
  left: auto;
  margin-top: 46px;
  padding: 22px 20px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  background-color: rgba(0, 0, 0, .3);
  text-align: center;
}

.footer p { font-size: 13px; }

.footer p { margin: 0; font-size: 13px; opacity: .8; }

/* The original sets .footer to weight 100, which renders the Chinese in the
   address as a hairline next to the Latin text. */
.footer p { font-weight: 400; }

.footer p span { margin-right: 0; }
.footer p span + span::before { content: " · "; opacity: .55; }

/* On phones the two parts stack, rather than wrapping with the dot first.
   Must follow the rule above, which has the same specificity. */
@media (max-width: 479px) {
  .footer p span { display: block; }
  .footer p span + span::before { content: none; }
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
  margin: 0 0 10px;
}

.footer-links a {
  padding: 4px 0;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
}

.footer-links a:hover,
.footer-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }

/* --- 6. Responsive corrections ------------------------------------------ */

/* The training matrix was a fixed table that overflowed narrow screens.
   Below 700px each row becomes a labelled stack. */
.train_table table { width: 100%; border-collapse: collapse; }

.train_table th,
.train_table td { padding: 12px 10px; font-size: 15px; line-height: 1.6; }

@media (max-width: 699px) {
  .train_table thead { display: none; }
  .train_table table, .train_table tbody, .train_table tr, .train_table td { display: block; width: 100%; }
  .train_table tr {
    margin-bottom: 16px;
    border: 1px solid var(--hairline);
    border-radius: 3px;
    overflow: hidden;
  }
  .train_table td { text-align: center; border-bottom: 1px solid var(--hairline); }
  .train_table td:last-child { border-bottom: 0; }
  .train_table td:nth-child(2) {
    background: var(--teal-deep);
    color: #fff;
    font-size: 14px;
    letter-spacing: .05em;
  }
}

/* Brand tiles: full width stack on phones, row from tablet up. */
@media (max-width: 899px) {
  #brand > ul { display: block; }
  #brand > ul > li {
    width: 100% !important;
    margin-left: 0 !important;
    min-height: 210px;
    background-position: center;
    background-size: cover;
  }
}

/* 品牌規劃 cards: two per row on phones rather than one. */
@media (max-width: 599px) {
  .block_plan .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .block_plan .item_plan { width: auto !important; float: none !important; margin: 0 !important; }
  .item_plan .item_meta h3 { font-size: 16px; }
  .item_plan .item_meta p { font-size: 13px; line-height: 1.65; }
}

/* Header contact list was nested inside a <p>, which browsers auto-closed
   and left unstyled. */
.logo_info ul,
.m_info ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.85; }

.m_info { transition: opacity .2s ease; }
.m_info.is-hidden { display: none; }

/* Long Chinese strings must not force horizontal scroll. */
body { overflow-x: hidden; }
.block_txt p, .sec_title p, .kick p { overflow-wrap: break-word; }

/* --- 7. Scroll reveal (replaces AOS) ------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.is-visible,
.inview-show { opacity: 1; transform: none; }

.gotop, .gotop2 {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 3px;
  background: var(--brown);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease, background-color .2s ease;
}

.gotop.is-shown, .gotop2.is-shown { opacity: 1; visibility: visible; }
.gotop:hover, .gotop2:hover { background: var(--orange); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --- 8. Contrast corrections to the original palette --------------------- */
/* Three colours carried in from the original stylesheet placed white text
   below 4.5:1. Each is darkened within its own hue, so the design reads the
   same. Values verified against white: 4.60, 4.66 and 4.64:1. */

.block_train table tbody tr:nth-of-type(2) td span { background-color: #b85c00; }
.block_train table tbody tr:nth-of-type(3) td span { background-color: #55802b; }

.block_txt a { background-color: #956d3c; }

.block_txt a:hover,
.block_txt a:focus-visible { background-color: #7d5b31; }

/* --- 9. Undoing the fullPage.js positioning ------------------------------ */
/* At desktop widths the original parked several blocks absolutely inside
   100vh panes (left:60%, top:50%, translate(-50%,-50%) and so on). Those
   panes are gone, so the same rules pushed the news column off-screen and
   collapsed its parents to zero height. Selectors here are specific enough
   to beat the originals. */

.brand-page .news_wrap .news_block {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
  height: auto;
  float: none;
  transform: none;
}

.brand-page .intro_wrap .intro_txt {
  position: static;
  top: auto;
  left: auto;
  transform: none;
}

.brand-page .intro_wrap .intro_txt p {
  width: 100%;
  margin: 0;
  text-align: left;
}

.brand-page .intro_block.no-media .intro_txt p { text-align: center; }

.brand-page .meta_content {
  position: static;
  top: auto;
  left: auto;
  width: auto;
  transform: none;
  text-align: left;
}

/* The news bullet was a 44px floated box holding an icon that no longer
   exists, which left a gap before every headline. */
.brand-page .news_list .news_item::before {
  content: "";
  width: 8px;
  height: 8px;
  min-width: 8px;
  margin-right: 10px;
  float: none;
  background: var(--orange);
  border-radius: 50%;
  align-self: center;
}

/* --- 10. Training matrix on small screens ------------------------------- */
/* The original hid the table below 898px and showed train-m.png instead.
   That image was never captured, so the section was empty on every phone.
   The table now shows at all widths, stacked per row under 700px. */

.block_train .train_table { display: block; height: auto; margin: 32px 0; }

.block_train table thead { font-size: 18px; }
.block_train table tbody { font-size: 16px; }

@media (max-width: 899px) {
  .block_train table span {
    width: 100%;
    margin: 0;
    padding: 12px 10px;
    border-radius: 4px;
    font-size: 15px;
  }
  /* decorative arrow nubs would poke outside the stacked cells */
  .block_train table span::before,
  .block_train table span::after { display: none; }
}

@media (min-width: 900px) {
  .block_train table thead { font-size: 24px; }
  .block_train table tbody { font-size: 18px; }
  .block_train table span { padding: 18px 16px; }
}

/* --- 11. Brand hero ------------------------------------------------------ */
/* The logo was absolutely centred over a 100vh cover, and the slogan and
   scroll hint were pulled up into it with negative top values (-4rem to
   -14rem). With the hero now sized by its content those offsets threw the
   text out of the section and collapsed its wrapper to zero height. */

.brand-page #home h1.brand_logo,
.brand-page #home #brand_slogan,
.brand-page #home .hero_scroll {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  width: auto;
  transform: none;
}

.brand-page #home > .home_cov {
  height: 100%;
  min-height: 0;
}

.brand-page #home .container_wrap.hero_item {
  width: 100%;
  max-width: 900px;
  color: #fff;
}

.brand-page #home #brand_slogan span { margin-right: 0; }

/* --- 12. News and enrolment panels ------------------------------------- */
/* Both were lity lightbox targets, so the original stylesheet keeps them at
   display:none and relied on the plugin to reveal them. lity is gone, so
   without this every news article and the enrolment panel stayed invisible
   even after the accordion removed [hidden]. */

.brand-page .news_post { display: block; }
.brand-page .news_post[hidden] { display: none; }

.brand-page .meta_post { display: block; }

/* --- 13. No-JavaScript fallback ----------------------------------------- */
/* .inview starts at opacity:0 in the original stylesheet and .reveal does
   here, both waiting for a class that only script adds. With scripting
   unavailable that content never appeared — true of the original site too.
   The inline snippet in <head> marks the document before first paint, so
   there is no flash. */

html:not(.js) .reveal,
html:not(.js) .inview,
html:not(.js) .inview2 {
  opacity: 1;
  transform: none;
}

/* --- 14. Content pages: about, contact, privacy, terms ------------------ */
/* Copy spans the nav width. The doubled gutter lines the text up with the
   first nav label, which sits inside its link's own 16px padding. */

.doc-shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 calc(var(--gutter) * 2);
}

@media (max-width: 479px) {
  .doc-shell { padding: 0 22px; }
}

.doc-hero {
  padding: 36px 0 34px;
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(160deg, #f2faf9 0%, #e3f2f0 100%);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.6;
  color: #5a5a5a;
}

.breadcrumb li + li::before { content: "›"; margin: 0 8px; }

/* Brown, not teal: --teal-deep drops to 4.1:1 on the light teal band. */
.breadcrumb a { color: var(--brown); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }

.doc-hero h1 {
  margin: 0;
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--brown);
}

.doc-hero__lead {
  max-width: 46em;
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.9;
  color: #4a4a4a;
}

.doc-body { padding: 44px 0 64px; background: #fff; }

.doc-body h2 {
  margin: 44px 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--teal);
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.45;
  color: var(--brown);
  scroll-margin-top: 16px;
}

.doc-body h2:first-child { margin-top: 0; }

.doc-body h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.5; color: var(--brown); }

.doc-body p,
.doc-body li { font-size: 16px; line-height: 1.95; color: #4a4a4a; }

.doc-body p { margin: 0 0 14px; }

.doc-body ul,
.doc-body ol { margin: 0 0 16px; padding-left: 1.6em; }

.doc-body ul { list-style: disc; }
.doc-body ol { list-style: decimal; }
.doc-body li + li { margin-top: 4px; }

.doc-body a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; }
.doc-body a:hover { color: #33645e; }

.doc-body .doc-updated { margin-top: 36px; font-size: 14px; color: #5a5a5a; }

.doc-body .doc-note {
  padding: 14px 18px;
  border-left: 4px solid var(--teal);
  background: #f2faf9;
  font-size: 15px;
}

/* Table of contents on the legal pages */
.doc-body .doc-toc {
  margin: 0 0 40px;
  padding: 18px 22px;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: #faf9f7;
}

.doc-body .doc-toc__title { margin: 0 0 6px; font-weight: 700; color: var(--brown); }

.doc-body .doc-toc ol {
  margin: 0;
  padding-left: 2.4em;
  list-style-type: cjk-ideographic;  /* 一、二、 to match the headings */
  columns: 2 16em;
  column-gap: 40px;
}

.doc-body .doc-toc li { font-size: 15px; line-height: 1.9; break-inside: avoid; }
.doc-body .doc-toc li + li { margin-top: 0; }

/* Cards: two-up on phones, like the homepage 品牌規劃 cards. */
.doc-body .doc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .doc-body .doc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

.doc-body .doc-grid > li { margin: 0; }

.doc-card {
  position: relative;
  height: 100%;
  padding: 18px 18px 16px;
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--teal);
  border-radius: 3px;
  background: #faf9f7;
  transition: border-color .2s ease;
}

.doc-body .doc-card p { margin: 0; font-size: 15px; line-height: 1.8; }

.doc-body .doc-card__link {
  display: inline-block;
  margin: 2px 0 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* The card's one link covers the whole card. */
.doc-body .doc-card__link::after { content: ""; position: absolute; inset: 0; }
.doc-body .doc-card__link:hover { text-decoration: underline; }

.doc-card:has(.doc-card__link:hover) { border-color: var(--teal-deep); }

@media (max-width: 599px) {
  .doc-card { padding: 14px 12px; }
  .doc-body .doc-card h3 { font-size: 16px; }
  .doc-body .doc-card p { font-size: 13px; line-height: 1.65; }
  .doc-body .doc-card__link { font-size: 16px; }
}

/* Brand tiles on the about page: white logos over the homepage tile photos.
   The .68 scrim keeps white text above 4.5:1 on the brightest photo areas. */
.doc-body .doc-brands {
  display: grid;
  gap: 12px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .doc-body .doc-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

.doc-body .doc-brands > li { margin: 0; }

.doc-body .doc-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  min-height: 250px;
  padding: 26px 18px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--brown-dark) center / cover no-repeat;
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition: box-shadow .2s ease;
}

.doc-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(40, 28, 24, .68);
}

.doc-brand > * { position: relative; }

a.doc-brand:hover { box-shadow: inset 0 -5px 0 var(--teal); }
.doc-body .doc-brand:hover { color: #fff; }

.doc-body .doc-brand--soon { background: #3f3f3f; }
.doc-brand--soon::before { display: none; }
.doc-body .doc-brand--soon img { max-height: 170px; }

.doc-brand img { width: auto; max-width: 70%; max-height: 124px; }

.doc-brand__name { font-size: 18px; font-weight: 700; line-height: 1.4; }
.doc-brand__tag { font-size: 14px; line-height: 1.6; }

@media (max-width: 599px) {
  .doc-body .doc-brand { min-height: 210px; }
}

/* Call to action and footer band */
.doc-cta { padding: 48px 0; background: var(--teal-deep); color: #fff; }

.doc-cta h2 { margin: 0 0 10px; font-size: clamp(20px, 2.8vw, 26px); line-height: 1.45; }

.doc-cta p { margin: 0; font-size: 16px; line-height: 1.9; }

.doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.doc-btn {
  display: inline-block;
  padding: 12px 26px;
  border: 1px solid #fff;
  border-radius: 3px;
  background: #fff;
  color: var(--teal-deep);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.doc-btn:hover { background: #f2faf9; }

.doc-btn--ghost { background: none; color: #fff; font-weight: 400; }
.doc-btn--ghost:hover { background: rgba(255, 255, 255, .16); }

/* Footer band on the content pages; the same colour as the bottom of the
   .contact band that holds the footer on the other pages. */
.site-footer { background: var(--brown-dark); color: #fff; }

.site-footer .footer { margin-top: 0; }