/* Fotoconic website : shared stylesheet
   Layout is inline-styled per element; this file carries only what inline styles cannot express:
   font faces, keyframes, media queries, hover/focus states and resets. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #ffffff; font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; color: #383A47; }
img, svg, canvas { max-width: 100%; }
img { height: auto; }
:where(a, button, [tabindex]):focus-visible { outline: 2px solid #18CB96; outline-offset: 3px; }
[hidden] { display: none !important; }

/* interactive states lifted from the design */
.x0:hover{background:#18CB96;color:#123A2C}
.x1:hover{border-color:#18CB96;color:#0B6B4E}
.x2:hover{color:#18CB96}
.x3:hover{background:#F4F6F5}
.x4:focus{outline:2px solid #18CB96;outline-offset:-2px}
.x5:focus{outline:2px solid #18CB96;outline-offset:6px}
.x6:hover{background:#ffffff}
.x7:focus{outline:2px solid #18CB96;outline-offset:3px}
.x8:focus{outline:none;border-color:#18CB96;box-shadow:0 0 0 3px rgba(24,203,150,.16)}
.x9:hover{color:#383A47;border-bottom-color:#18CB96}
.xa:focus{outline:2px solid #18CB96;outline-offset:2px}
.xb:hover{color:#ffffff}
.xc:focus{outline:2px solid #ffffff;outline-offset:3px}
.xd:hover{border-color:#18CB96;color:#18CB96}
.xnav:hover { color: #383A47 !important; border-bottom-color: #18CB96 !important; }
.xlang:hover { border-color: #18CB96 !important; color: #0B6B4E !important; }
.xcta:hover { background: #18CB96 !important; color: #123A2C !important; }
a[data-anchor="1"] { color: inherit; text-decoration: none; }

body { margin: 0; background: #ffffff; }
  html[lang^="zh"] body { font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', 'Source Sans 3', sans-serif; }
  html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3, html[lang^="zh"] h4 { letter-spacing: 0 !important; line-height: 1.28 !important; }
  html[lang^="zh"] p, html[lang^="zh"] li { line-height: 1.9 !important; letter-spacing: 0 !important; }
  html[lang^="zh"] [data-zh-tight] { line-height: 1.4 !important; }
  @keyframes fcRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes fcFade { from { opacity: 0; } to { opacity: 1; } }
  @media (max-width: 900px) {
    [data-desk-nav] { display: none !important; }
    [data-mob-bar] { display: flex !important; }
    header > div { padding: 14px 22px !important; }
  }
  @media (max-width: 860px) {
    [data-hero-grid] { position: static !important; }
    [data-hero-mark] {
      position: absolute !important; inset: 0 !important;
      aspect-ratio: auto !important; min-height: 0 !important;
      z-index: 0; opacity: .42; pointer-events: none;
    }
    [data-hero-copy] { position: relative; z-index: 1; }
  }
  @media (max-width: 760px) {
    main section > div { padding-left: 22px !important; padding-right: 22px !important; }
    main [style*="grid-template-columns"] { grid-template-columns: minmax(0,1fr) !important; }
    main [data-work-row] > * { order: 0 !important; }
    main h1 { font-size: clamp(30px, 8.4vw, 44px) !important; }
    main h2 { font-size: clamp(25px, 6.6vw, 34px) !important; }
    main section > div { padding-top: 56px !important; padding-bottom: 56px !important; }
    footer > div { padding-left: 22px !important; padding-right: 22px !important; grid-template-columns: minmax(0,1fr) !important; row-gap: 36px !important; }
    footer [style*="justify-content:space-between"] { flex-direction: column; gap: 12px; align-items: flex-start !important; }
  }

  @keyframes fcPanel { from { opacity: 0; transform: translateY(14px) scale(.995); } to { opacity: 1; transform: none; } }
  @keyframes fcFlowDot { 0% { left: 0; opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
  @keyframes fcFlowDotV { 0% { top: 0; opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
  @media (max-width: 1000px) {
    #fcStages { grid-template-columns: 1fr !important; gap: 0 !important; }
    #fcStageVis { display: none !important; }
    #fcFlow { grid-template-columns: 1fr !important; }
    #fcFlow [data-flow-arrow] { min-height: 52px !important; }
    #fcFlow [data-flow-line] { width: 1px !important; height: 100% !important; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.42)) !important; }
    #fcFlow [data-flow-dot] { left: -2px !important; animation-name: fcFlowDotV !important; }
    #fcFlow [data-flow-head] { right: auto !important; bottom: -1px; transform: rotate(90deg); }
  }
  @media (prefers-reduced-motion: reduce) { [data-flow-dot] { animation: none !important; opacity: .9 !important; left: 50% !important; } }
  @media (max-width: 860px) {
    [data-hero-grid] { position: static !important; }
    [data-hero-mark] {
      position: absolute !important; inset: 0 !important;
      aspect-ratio: auto !important; min-height: 0 !important;
      z-index: 0; opacity: .42; pointer-events: none;
    }
    [data-hero-copy] { position: relative; z-index: 1; }
  }
  @media (max-width: 760px) {
    [data-fc-form] { grid-template-columns: minmax(0,1fr) !important; }
    [data-fc-submit] { width: 100% !important; }
  }
  @media (max-width: 720px) {
    [data-fc-scrim] { padding: 0 !important; background: rgba(32,34,43,.7) !important; }
    [data-fc-dialog] { max-width: none !important; min-height: 100vh; max-height: none !important; border-radius: 0 !important; box-shadow: none !important; }
    [data-fc-dialog] > div:last-child { border-radius: 0 !important; }
    [data-fc-cta] { grid-template-columns: minmax(0,1fr) !important; }
    [data-fc-work] { grid-template-columns: minmax(0,1fr) !important; }
    [data-fc-btns] { display: grid !important; grid-template-columns: minmax(0,1fr) !important; }
    [data-fc-btns] button { width: 100% !important; }
  }
  @media (max-width: 1100px) and (min-width: 901px) { [data-about-info] { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } }
  @media (max-width: 900px) {
    [data-work-head], [data-work-pair], [data-work-row] { grid-template-columns: minmax(0,1fr) !important; gap: 32px !important; }
    [data-work-row] > * { order: 0 !important; }
    [data-about-info] { grid-template-columns: minmax(0,1fr) !important; }
    [data-about-info] > div { padding-right: 0 !important; border-bottom: 1px solid #E2E4E3; }
  }
  @media (max-width: 1000px) {
    [data-how-grid] { grid-template-columns: minmax(0,1fr) !important; gap: 32px !important; }
    [data-how-img1], [data-how-img2] { aspect-ratio: 4/3 !important; }
  }
  @media (max-width: 860px) {
    [data-wwd-grid] { grid-template-columns: minmax(0,1fr) !important; gap: 32px !important; }
    [data-wwd-photo] img { min-height: 0 !important; aspect-ratio: 4/3 !important; }
    [data-wwd-photo] > div, [data-wwd-photo] > svg { display: none !important; }
    [data-wwd-break] { aspect-ratio: 4/3 !important; min-height: 0 !important; max-height: none !important; }
  }
  a { color: #0B6B4E; text-decoration: none; }
  a:hover { color: #18CB96; }
  ::selection { background: rgba(24,203,150,.25); }