/* ============================================================
   SightSeeker — Design System (Single Source of Truth)
   Quiet-luxury B2B agency. Deep Navy + Teal. Editorial grade.
   Loaded first, everywhere (theme + Elementor). All widgets
   inherit from these tokens — never hardcode a value.
   ============================================================ */

:root {
  /* ---- Brand color (locked to Figma) ---- */
  --ss-navy:        #184058;   /* primary / ink / CTA — the ONE brand color */
  --ss-navy-700:    #123347;
  --ss-navy-600:    #1E4E6B;
  --ss-navy-050:    #EAF0F3;   /* navy tint */
  /* accent == navy (the Figma is monochrome; no teal). Alias kept so older
     widget code referencing --ss-teal* still resolves to brand navy. */
  --ss-teal:        var(--ss-navy);
  --ss-teal-600:    var(--ss-navy-600);
  --ss-teal-050:    var(--ss-navy-050);

  /* ---- Neutrals (from Figma) ---- */
  --ss-ink:         #0A0A0A;
  --ss-charcoal:    #2B2B2B;   /* body text */
  --ss-slate:       #5B5C67;   /* body secondary / muted copy */
  --ss-muted:       #8A8B95;
  --ss-line:        #E3E3E4;   /* hairlines / form borders */
  --ss-line-soft:   #DDE0F5;   /* blog dividers */
  --ss-mist:        #EEF2F6;
  --ss-cloud:       #F5F5F5;   /* section alt bg / footer */
  --ss-media:       #D9D9D9;   /* image placeholder */
  --ss-white:       #FEFEFE;

  /* ---- Semantic ---- */
  --ss-bg:          var(--ss-white);
  --ss-bg-alt:      var(--ss-cloud);
  --ss-bg-dark:     var(--ss-navy);
  --ss-text:        var(--ss-charcoal);
  --ss-text-soft:   var(--ss-slate);
  --ss-text-invert: #FEFEFE;
  --ss-heading:     var(--ss-navy);
  --ss-accent:      var(--ss-navy);
  --ss-accent-ink:  #FEFEFE;    /* text on navy */
  --ss-success:     #1FAE73;

  /* ---- Typography (Figma: Plus Jakarta Sans + Manrope + Open Sans) ---- */
  --ss-font-display: "Plus Jakarta Sans", "Noto Sans TC", system-ui, sans-serif; /* headings, nav, footer */
  --ss-font-alt:     "Manrope", "Noto Sans TC", system-ui, sans-serif;           /* editorial / blog / contact */
  --ss-font-ui:      "Open Sans", "Noto Sans TC", system-ui, sans-serif;          /* nav pills */
  --ss-font-body:    "Plus Jakarta Sans", "Noto Sans TC", system-ui, sans-serif;
  --ss-font-zh:      "Noto Sans TC", "Plus Jakarta Sans", system-ui, sans-serif;

  --ss-fs-display: clamp(2.75rem, 1.2rem + 5.4vw, 4rem);    /* hero 64px @ desktop */
  --ss-fs-h1:      clamp(2rem, 1.3rem + 3vw, 3.1rem);
  --ss-fs-h2:      clamp(1.6rem, 1.2rem + 1.9vw, 2.25rem);  /* 36px */
  --ss-fs-h3:      clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);
  --ss-fs-h4:      clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --ss-fs-lead:    clamp(1.075rem, 1rem + 0.35vw, 1.25rem);
  --ss-fs-body:    1rem;
  --ss-fs-sm:      0.875rem;
  --ss-fs-xs:      0.78rem;
  --ss-fs-eyebrow: 0.78rem;

  --ss-lh-tight:   1.1;
  --ss-lh-snug:    1.22;
  --ss-lh-body:    1.7;
  --ss-tracking-tight: -0.03em;   /* Plus Jakarta Sans signature tracking */
  --ss-tracking-alt:   -0.02em;   /* Manrope */
  --ss-tracking-eyebrow: 0.14em;

  --ss-fw-regular: 400;
  --ss-fw-medium:  500;
  --ss-fw-semi:    600;
  --ss-fw-bold:    700;
  --ss-fw-x:       800;

  /* ---- Spacing (8pt) ---- */
  --ss-sp-1: 4px;   --ss-sp-2: 8px;   --ss-sp-3: 12px;  --ss-sp-4: 16px;
  --ss-sp-5: 24px;  --ss-sp-6: 32px;  --ss-sp-7: 48px;  --ss-sp-8: 64px;
  --ss-sp-9: 96px;  --ss-sp-10: 128px;

  --ss-section-y:  clamp(64px, 4vw + 40px, 128px);  /* vertical section rhythm */

  /* ---- Layout ---- */
  --ss-container:  100%;          /* full width */
  --ss-container-wide: 100%;      /* full width */
  --ss-container-narrow: 880px;   /* reading width for FAQ / prose */
  --ss-gutter:     5%;            /* 5% left/right padding sitewide */

  /* ---- Radius ---- */
  --ss-r-xs: 4px;  --ss-r-sm: 8px;  --ss-r-md: 14px;  --ss-r-lg: 22px;  --ss-r-pill: 999px;

  /* ---- Elevation (subtle, luxury) ---- */
  --ss-shadow-xs: 0 1px 2px rgba(10,37,64,0.04);
  --ss-shadow-sm: 0 4px 16px rgba(10,37,64,0.06);
  --ss-shadow-md: 0 14px 40px rgba(10,37,64,0.09);
  --ss-shadow-lg: 0 30px 70px rgba(10,37,64,0.12);
  --ss-ring: 0 0 0 1px var(--ss-line);

  /* ---- Motion ---- */
  --ss-ease:       cubic-bezier(0.22, 1, 0.36, 1);   /* easeOutExpo */
  --ss-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ss-dur-1: 0.25s;  --ss-dur-2: 0.45s;  --ss-dur-3: 0.7s;

  /* ---- Header ---- */
  --ss-header-h: 76px;
}

/* ============================================================
   Base reset / elements
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--ss-font-body);
  font-size: var(--ss-fs-body);
  line-height: var(--ss-lh-body);
  color: var(--ss-text);
  background: var(--ss-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5 {
  font-family: var(--ss-font-display);
  color: var(--ss-heading);
  font-weight: var(--ss-fw-bold);
  line-height: var(--ss-lh-snug);
  letter-spacing: var(--ss-tracking-tight);
  margin: 0 0 0.5em;
}
h1 { font-size: var(--ss-fs-h1); line-height: var(--ss-lh-tight); }
h2 { font-size: var(--ss-fs-h2); }
h3 { font-size: var(--ss-fs-h3); }
h4 { font-size: var(--ss-fs-h4); }
p  { margin: 0 0 1.15em; color: var(--ss-text-soft); }

/* Hero display — Figma: 64px / weight 800 / tight tracking */
.ss-display { font-family: var(--ss-font-display); font-weight: var(--ss-fw-x); font-size: var(--ss-fs-display); line-height: var(--ss-lh-tight); letter-spacing: var(--ss-tracking-tight); color: var(--ss-navy); margin: 0 0 0.35em; }
.ss-display--alt { font-family: var(--ss-font-alt); font-weight: var(--ss-fw-medium); letter-spacing: var(--ss-tracking-alt); } /* contact card style */

a { color: var(--ss-navy); text-decoration: none; transition: color var(--ss-dur-1) var(--ss-ease); }
a:hover { color: var(--ss-teal-600); }
img { max-width: 100%; height: auto; display: block; }

:lang(zh), [lang="zh-Hant"], .ss-zh { font-family: var(--ss-font-zh); letter-spacing: 0; }

/* ============================================================
   Utility primitives (used by widgets + templates)
   ============================================================ */
.ss-container { width: 100%; max-width: var(--ss-container); margin-inline: auto; padding-inline: var(--ss-gutter); }
/* narrow reading blocks keep a centred, comfortable measure (not 5% squeeze) */
.ss-container--narrow { padding-inline: clamp(20px, 4vw, 40px); }
.ss-container--wide  { max-width: var(--ss-container-wide); }
.ss-container--narrow{ max-width: var(--ss-container-narrow); }
.ss-section { padding-block: var(--ss-section-y); position: relative; }
.ss-section--alt  { background: var(--ss-bg-alt); }
.ss-section--dark { background: var(--ss-bg-dark); color: var(--ss-text-invert); }
.ss-section--dark h1,.ss-section--dark h2,.ss-section--dark h3 { color: #fff; }
.ss-section--dark p { color: rgba(234,241,248,0.78); }

.ss-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ss-font-body);
  font-size: var(--ss-fs-eyebrow); font-weight: var(--ss-fw-semi);
  letter-spacing: var(--ss-tracking-eyebrow); text-transform: uppercase;
  color: var(--ss-teal-600); margin-bottom: var(--ss-sp-4);
}
.ss-eyebrow::before { content:""; width:26px; height:1px; background: var(--ss-teal); display:inline-block; }
.ss-section--dark .ss-eyebrow { color: var(--ss-teal); }

.ss-lead { font-size: var(--ss-fs-lead); line-height: 1.6; color: var(--ss-text-soft); }
.ss-section-head { max-width: 720px; margin-bottom: var(--ss-sp-8); }
.ss-section-head.is-center { margin-inline: auto; text-align: center; }

/* ---- Buttons ---- */
.ss-btn {
  --_bg: var(--ss-navy); --_fg: #FEFEFE;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--ss-font-display); font-weight: var(--ss-fw-bold); font-size: 0.95rem;
  letter-spacing: var(--ss-tracking-tight); line-height: 1;
  padding: 15px 26px; border-radius: var(--ss-r-pill);
  background: var(--_bg); color: var(--_fg); border: 1px solid transparent;
  cursor: pointer; transition: transform var(--ss-dur-1) var(--ss-ease), background var(--ss-dur-1) var(--ss-ease), box-shadow var(--ss-dur-1) var(--ss-ease), color var(--ss-dur-1) var(--ss-ease);
  will-change: transform;
}
.ss-btn:hover { background: var(--ss-navy-700); color: #FEFEFE; transform: translateY(-2px); box-shadow: var(--ss-shadow-md); }
.ss-btn:active { transform: translateY(0); }
.ss-btn--ghost { --_bg: transparent; --_fg: var(--ss-navy); border-color: var(--ss-navy); }
.ss-btn--ghost:hover { --_bg: var(--ss-navy); color:#FEFEFE; border-color: var(--ss-navy); }
.ss-btn--invert { --_bg: #FEFEFE; --_fg: var(--ss-navy); }
.ss-btn--invert:hover { --_bg: var(--ss-navy-050); color: var(--ss-navy); }
.ss-btn--lg { padding: 19px 36px; font-size: 1rem; }
.ss-btn .ss-btn__arrow { transition: transform var(--ss-dur-1) var(--ss-ease); }
.ss-btn:hover .ss-btn__arrow { transform: translateX(4px); }

.ss-link-arrow { display:inline-flex; align-items:center; gap:7px; font-weight: var(--ss-fw-semi); color: var(--ss-navy); }
.ss-link-arrow svg { transition: transform var(--ss-dur-1) var(--ss-ease); }
.ss-link-arrow:hover svg { transform: translateX(4px); }

/* ---- Card ---- */
.ss-card {
  background: var(--ss-white); border: 1px solid var(--ss-line);
  border-radius: var(--ss-r-md); padding: var(--ss-sp-6);
  transition: transform var(--ss-dur-2) var(--ss-ease), box-shadow var(--ss-dur-2) var(--ss-ease), border-color var(--ss-dur-2) var(--ss-ease);
}
.ss-card:hover { transform: translateY(-6px); box-shadow: var(--ss-shadow-md); border-color: transparent; }

/* ---- Grid helpers ---- */
.ss-grid { display: grid; gap: var(--ss-sp-5); }
.ss-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ss-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ss-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px){ .ss-grid--3,.ss-grid--4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 600px){ .ss-grid--2,.ss-grid--3,.ss-grid--4 { grid-template-columns: 1fr;} }

.ss-divider { height:1px; background: var(--ss-line); border:0; margin:0; }

/* ---- Motion: reveal-on-scroll (driven by main.js / GSAP) ---- */
[data-ss-reveal] { opacity: 0; transform: translateY(24px); }
.ss-revealed [data-ss-reveal], [data-ss-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--ss-dur-3) var(--ss-ease), transform var(--ss-dur-3) var(--ss-ease);
}
@media (prefers-reduced-motion: reduce){ [data-ss-reveal]{ opacity:1; transform:none; } }

/* ---- Visually hidden (a11y) ---- */
.ss-vh { position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }

/* ---- Focus visibility (a11y) ---- */
:where(a,button,input,textarea,select,[tabindex]):focus-visible {
  outline: 2px solid var(--ss-teal); outline-offset: 3px; border-radius: var(--ss-r-xs);
}

/* In the Elementor editor, scroll-reveal JS doesn't run — show content so it's
   visible/editable on the canvas (and as a no-JS safety net). */
.elementor-editor-active [data-ss-reveal],
.elementor-editor-active .ss-rw__i { opacity: 1 !important; transform: none !important; }
.elementor-editor-active .ss-rw { overflow: visible; }