/* Graphite components. Colours, spacing and radii come from tokens.css. */
body { margin: 0; font-family: var(--font-sans); background: var(--background); color: var(--foreground); -webkit-font-smoothing: antialiased; }
.gr-row { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; padding: var(--space-24); }
.gr-stack { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-24); }
.gr-icon { flex: none; display: block; }
a { color: inherit; }

/* Focus: one ring for every control */
.gr-btn:focus-visible, .gr-iconbtn:focus-visible, .gr-nav a:focus-visible, .gr-faq-q:focus-visible, .gr-status:focus-visible {
  outline: 2px solid transparent; box-shadow: var(--focus-ring);
}

/* Button */
.gr-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); border: 0; cursor: pointer; text-decoration: none;
  font-family: inherit; border-radius: var(--radius-full); white-space: nowrap;
  transition: background-color .3s cubic-bezier(.76,0,.24,1), color .3s cubic-bezier(.76,0,.24,1), transform .3s cubic-bezier(.76,0,.24,1); }
.gr-btn-md { font-size: 15px; line-height: 18px; font-weight: 700; letter-spacing: -0.12px; padding: var(--space-18) var(--space-24); }
.gr-btn-sm { font-size: 13px; line-height: 22px; font-weight: 600; padding: var(--space-10) var(--space-15); }
.gr-btn-primary { background: var(--primary); color: var(--primary-foreground); }
.gr-btn-secondary { background: var(--surface); color: var(--foreground-strong); }
.gr-btn-secondary.gr-btn-md { font-weight: 600; }
.gr-btn:hover { transform: translateY(-1px); }
.gr-btn:active { transform: translateY(0); }
.gr-btn-block { display: flex; width: 100%; }
.gr-btn-block.gr-btn-md { padding-top: 12px; padding-bottom: 12px; font-size: 14px; }

/* IconButton */
.gr-iconbtn { width: 44px; height: 44px; border-radius: var(--radius-full); border: 0; cursor: pointer; display: inline-grid; place-items: center;
  background: var(--background); color: var(--foreground); transition: background-color .3s cubic-bezier(.76,0,.24,1); }
.gr-iconbtn:hover { background: var(--border); }

/* Nav: three floating pills */
.gr-nav { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 22px; }
.gr-nav-mark { width: 42px; height: 42px; border-radius: var(--radius-full); background: var(--surface); color: var(--foreground);
  display: grid; place-items: center; font-weight: 700; font-size: 14px; text-decoration: none; }
.gr-nav-links { display: flex; gap: var(--space-15); padding: var(--space-10) var(--space-15); border-radius: var(--radius-full); background: var(--surface); }
.gr-nav-link { color: var(--muted-foreground); font-weight: 500; text-decoration: none; transition: color .5s cubic-bezier(.7,0,0,1); }
.gr-nav-link:hover, .gr-nav-link.is-active { color: var(--foreground); }
.gr-nav-cta { padding: var(--space-10) var(--space-15); border-radius: var(--radius-full); background: var(--surface); color: var(--foreground);
  font-weight: 600; text-decoration: none; transition: color .5s cubic-bezier(.7,0,0,1), background-color .5s cubic-bezier(.7,0,0,1); }

/* StatusBadge */
.gr-status { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-4) var(--space-12); border-radius: var(--radius-full);
  background: var(--surface); color: var(--muted-foreground); font-size: 13px; line-height: 24px; font-weight: 500; text-decoration: none; }
.gr-status-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--success); flex: none; }

/* Tag */
.gr-tags { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.gr-tag { display: inline-block; padding: 7.5px var(--space-12); border-radius: var(--radius-full); background: var(--chip); color: var(--on-chip);
  font-size: 10.5px; line-height: 10.5px; font-weight: 700; text-transform: uppercase; }

/* PriceTag */
.gr-price { display: inline-block; padding: 4.32px 15.84px; border-radius: var(--radius-full); background: var(--background); color: var(--foreground);
  font-size: 28.8px; line-height: 33.408px; font-weight: 700; letter-spacing: -1.08px; transform: rotate(-4deg); }

/* SectionHeader */
.gr-sechead { text-align: center; }
.gr-sechead.is-left { text-align: left; }
.gr-sechead-title { margin: 0; font-size: 36px; line-height: 41.76px; font-weight: 700; letter-spacing: -1.08px; color: var(--foreground); }
.gr-sechead-sub { margin: var(--space-12) auto 0; max-width: 360px; font-size: 14px; line-height: 22px; font-weight: 500; color: var(--muted-foreground); }
.gr-sechead.is-left .gr-sechead-sub { margin-left: 0; }

/* Panel */
.gr-panel { border-radius: var(--radius-panel); padding: var(--space-80) var(--space-90); color: var(--foreground); }
.gr-panel-surface { background: var(--surface); }
.gr-panel-dark { background: var(--background); }
@media (max-width: 720px) { .gr-panel { padding: var(--space-80) var(--space-18); } }

/* ServiceCard */
.gr-card { background: var(--surface); border-radius: var(--radius-card); padding: var(--space-18) var(--space-24); display: flex; flex-direction: column; gap: var(--space-12); }
.gr-card-title { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -0.54px; color: var(--foreground); }
.gr-card-media { flex: 1; min-height: 120px; display: grid; place-items: center; }
.gr-card-body { margin: 0; font-size: 14px; line-height: 22px; font-weight: 500; color: var(--muted-foreground); }

/* Stat */
.gr-stat { text-align: center; }
.gr-stat-value { font-size: 72px; line-height: 72px; font-weight: 700; letter-spacing: -2.16px; color: var(--foreground); }
.gr-stat-label { margin-top: var(--space-8); font-size: 14px; line-height: 22px; font-weight: 500; color: var(--muted-foreground); }

/* Testimonial */
.gr-quote { margin: 0; display: grid; grid-template-columns: 180px 1fr; gap: 32px; align-items: start; }
.gr-quote-photo { width: 180px; height: 180px; border-radius: var(--radius-card); overflow: hidden; background: var(--surface-muted);
  display: grid; place-items: center; font-size: 36px; font-weight: 700; color: var(--muted-foreground); }
.gr-quote-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gr-quote-text { margin: 0; font-size: 24px; line-height: 31.5px; font-weight: 500; letter-spacing: -0.48px; color: var(--muted-foreground); }
.gr-quote-text strong { font-weight: 700; color: var(--foreground-strong); }
.gr-quote figcaption { margin-top: var(--space-24); }
.gr-quote-name { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -0.54px; color: var(--foreground); }
.gr-quote-co { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--muted-foreground); }
@media (max-width: 560px) { .gr-quote { grid-template-columns: 1fr; } }

/* TeamMember */
.gr-member { display: flex; flex-direction: column; align-items: center; text-align: center; width: 120px; }
.gr-member-avatar { width: 102px; height: 102px; border-radius: var(--radius-card); overflow: hidden; background: var(--surface);
  display: grid; place-items: center; font-size: 32px; font-weight: 700; color: var(--foreground); margin-bottom: var(--space-10); }
.gr-member-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gr-member-name { font-size: 16px; line-height: 22px; font-weight: 700; color: var(--foreground); }
.gr-member-role { font-size: 14px; line-height: 18px; font-weight: 500; letter-spacing: -0.28px; color: var(--muted-foreground); }

/* FaqItem */
.gr-faq { background: var(--surface); border-radius: var(--radius-item); padding: var(--space-18) 16px; }
.gr-faq-q { all: unset; box-sizing: border-box; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); cursor: pointer;
  font-size: 16px; line-height: 22.4px; font-weight: 700; color: var(--foreground); border-radius: var(--radius-base); }
.gr-chevron { transition: transform .3s cubic-bezier(.76,0,.24,1); }
.gr-chevron.is-open { transform: rotate(180deg); }
.gr-faq-a { margin-top: var(--space-8); font-size: 14px; line-height: 22px; font-weight: 500; color: var(--muted-foreground); }