/* UGC by Ema: shared public-site design system. */
:root {
  --color-primary: #14cfc3;
  --color-accent: #14cfc3;
  --color-accent-ink: #007f79;
  --color-accent-soft: #d9f8f5;
  --color-background: #fff;
  --color-surface: #effbf9;
  --color-text: #172d35;
  --color-text-muted: #52666e;
  --color-border: #dcebea;
  --color-focus: #007f79;
  --radius: 5px;
  --content-width: 1320px;
  --display: 'DM Serif Display', Georgia, serif;
  --body: 'Outfit', Arial, sans-serif;
  /* Compatibility aliases keep existing page components working. */
  --white: var(--color-background); --off-white: #f7fbfa; --warm-bg: var(--color-surface);
  --navy: var(--color-text); --navy-mid: var(--color-surface); --navy-light: var(--color-surface);
  --cyan: var(--color-accent-ink); --cyan-soft: #a7ece5; --cyan-dim: var(--color-surface); --cyan-glow: #d9f8f5;
  --cta-bg: var(--color-accent); --text-primary: var(--color-text); --text-secondary: var(--color-text-muted);
  --text-muted: #62757b; --text-on-dark: var(--color-text); --text-on-dark-mid: var(--color-text-muted);
  --text-on-dark-muted: var(--color-text-muted); --border-light: var(--color-border); --border-dark: var(--color-border);
}
* { box-sizing: border-box; }
html { scroll-padding-top: 100px; }
body { font-family: var(--body); background: var(--color-background); color: var(--color-text); }
h1,h2,.section-title,.page-hero h1,.hero h1,.landing h1,.case-post h1,.blog-post h1 { font-family: var(--display); font-weight: 400; }
h1,h2 { text-wrap: balance; }
p { text-wrap: pretty; }
a,button,input,select,textarea { -webkit-tap-highlight-color: transparent; }
button,input,select,textarea { font-family: var(--body); }
button,a { touch-action: manipulation; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 5px; }
img,video { max-width: 100%; }
.skip-link { position: fixed; left: 20px; top: -80px; z-index: 2000; padding: 12px 20px; background: white; color: var(--color-text); }
.skip-link:focus { top: 10px; }
body > nav,nav.top-nav,nav.top-nav.scrolled {
  height: 82px; padding: 0 max(32px, calc((100vw - var(--content-width))/2)); position: fixed;
  inset: 0 0 auto; z-index: 1000; display:flex; justify-content:space-between; align-items:center;
  background: rgb(255 255 255 / .97); border-bottom: 1px solid var(--color-border); box-shadow:none;
  backdrop-filter: blur(12px); transition: background .2s;
}
body .nav-logo,nav.top-nav.scrolled .nav-logo { color:var(--color-text); font:400 27px/1 var(--display); letter-spacing:-1px; white-space:nowrap; text-decoration:none; }
.nav-logo span { color:var(--color-accent-ink); }
body .nav-links { display:flex; align-items:center; list-style:none; gap:30px; }
body .nav-links a,nav.top-nav.scrolled .nav-links a { color:var(--color-text-muted); font:400 14px/1.4 var(--body); letter-spacing:0; text-decoration:none; }
body .nav-links a:hover { color:var(--color-accent-ink); }
body .nav-links .nav-cta,body nav.top-nav.scrolled .nav-cta,body .nav-links.open .nav-cta {
  color:var(--color-text) !important; background:var(--color-accent) !important; border:1px solid var(--color-accent) !important;
  border-radius:var(--radius); padding:12px 24px; font-weight:500 !important; min-height:44px;
}
body .mobile-toggle { border:0; background:transparent; width:28px; height:22px; position:relative; cursor:pointer; z-index:1001; }
body .mobile-toggle::after { content:''; position:absolute; inset:-12px; }
body .mobile-toggle span,body nav.top-nav.scrolled .mobile-toggle span { background:var(--color-text); }
body .btn-primary,body .btn-cta,body .cta-btn,body .final-cta-btn,body .form-submit {
  background:var(--color-accent); color:var(--color-text); border-radius:var(--radius); font-family:var(--body); font-weight:500; box-shadow:none;
}
body .btn-primary:hover,body .btn-cta:hover,body .cta-btn:hover,body .final-cta-btn:hover,body .form-submit:hover { background:#8ee7de; color:var(--color-text); box-shadow:none; }
body .btn-secondary { color:var(--color-accent-ink); border-color:var(--color-accent-ink); font-family:var(--body); border-radius:var(--radius); }
body .section-label,body .case-tag,body .blog-post-tag { font-family:var(--body); color:var(--color-accent-ink); }
body .container { max-width:var(--content-width); }
body .page-hero { background:var(--color-surface); padding-top:150px; padding-bottom:75px; }
body .page-hero h1 { font-size:clamp(38px,4.5vw,66px); font-weight:400; }
body .page-hero p { max-width:780px; font-size:17px; }
body .section-title { font-weight:400; }
body .service-card,body .case-card,body .testimonial-card,body .blog-card,body .custom-form,body .card { border-radius:var(--radius); box-shadow:none; border-color:var(--color-border); }
body .service-card:hover,body .case-card:hover,body .blog-card:hover { box-shadow:none; border-color:var(--color-accent-ink); }
body footer { background:var(--color-background); color:var(--color-text); padding:40px max(24px, calc((100vw - var(--content-width))/2)); border-top:1px solid var(--color-border); }
body .footer-inner { max-width:var(--content-width); gap:24px; flex-wrap:wrap; }
body .footer-brand { font-family:var(--body); color:var(--color-text-muted); font-weight:400; }
body nav.footer-links { position:static; inset:auto; display:flex; flex-wrap:wrap; padding:0; height:auto; background:transparent; border:0; box-shadow:none; backdrop-filter:none; gap:18px; z-index:auto; }
body .footer-links a,body .footer-copy { color:var(--color-text-muted); }
body .footer-links a:hover { color:var(--color-accent-ink); }
body .form-group input:not([type=checkbox]),body .form-group select,body .form-group textarea { border:1px solid #b3ccca; border-radius:var(--radius); background:#fff; color:var(--color-text); }
body .form-group > label,body .form-section-label { font-family:var(--body); font-weight:500; }
body .visual-01,body .visual-02,body .visual-03 { background:var(--color-surface); }
body .hero-brand,body .hero h1,body .service-title { color:var(--color-text); }
body .bio-photo { border-radius:var(--radius); }
body .result-stat { background:var(--color-surface); color:var(--color-text); border:1px solid var(--color-border); }
body .result-stat .stat-number { color:var(--color-accent-ink); }
body .final-cta { background:var(--color-surface); color:var(--color-text); }
/* Dark media backdrops are intentional for readable playback controls. */
body .lightbox { background:rgb(12 26 32 / .9); }
body .lightbox-close { color:white; }
body .video-controls button { color:white; }
@media (max-width:1050px) { body .nav-links { gap:19px; } }
@media (max-width:850px) {
  body > nav,nav.top-nav,nav.top-nav.scrolled { height:72px; padding:0 24px; }
  body .mobile-toggle { display:block; }
  body .nav-links { display:none; position:fixed; inset:72px 0 auto; max-height:calc(100dvh - 72px); overflow:auto; padding:24px; flex-direction:column; align-items:stretch; gap:0; background:white; border-bottom:1px solid var(--color-border); }
  body .nav-links.open { display:flex; }
  body .nav-links.open a { color:var(--color-text) !important; display:block; padding:15px 8px; font-size:18px; }
  body .nav-links.open .nav-cta { margin-top:12px; padding:14px; text-align:center; }
  body > nav.menu-open,nav.top-nav.menu-open { backdrop-filter:none; }
  body .footer-inner { flex-direction:column; align-items:flex-start; text-align:left; }
  body .footer-links { justify-content:flex-start; }
  body .page-hero { padding-top:120px; }
}
@media (min-width:851px) { body .mobile-toggle { display:none; } }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto !important; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-animate],.reveal { opacity:1 !important; transform:none !important; }
}
/* Existing long-form comparison tables scroll locally on narrow screens. */
.table-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
.table-scroll table { min-width:540px; }
body .marquee,body .marquee-strip { background:var(--color-accent-soft); }
body .marquee span,body .marquee-strip span { color:var(--color-text); font-family:var(--body); }
body .step-card,body .timeline-step { background:white; border-color:var(--color-border); }
body .stat-num,body .stat-number,body .case-result-num,body .proof-num,body .result-num { font-family:var(--body); font-weight:500; }
body .mobile-toggle span { display:block; position:absolute; left:0; width:100%; height:2px; transition:transform .2s,opacity .2s; }
body .mobile-toggle span:nth-child(1) { top:0; }
body .mobile-toggle span:nth-child(2) { top:50%; transform:translateY(-50%); }
body .mobile-toggle span:nth-child(3) { bottom:0; }
body .mobile-toggle.active span:nth-child(1) { top:50%; transform:translateY(-50%) rotate(45deg); }
body .mobile-toggle.active span:nth-child(2) { opacity:0; }
body .mobile-toggle.active span:nth-child(3) { bottom:50%; transform:translateY(50%) rotate(-45deg); }
body .step,body .timeline-item,body .video-card,body .collage-cell { border-radius:var(--radius); }
body .video-wrapper { box-shadow:none; border-radius:var(--radius); }