/*
 * Sky Vista brand layer over Aleric (plan step 3). Loaded after main.css.
 * No hex values: every colour is a measured --sv-* token emitted by
 * App\Support\DesignTokens::inlineStyle() in the head.
 */
:root {
  --tp-theme-primary: var(--sv-accent);
  --tp-ff-body: var(--sv-font-body);
  --tp-ff-p: var(--sv-font-body);
}

/* Header: the live site's chrome is dark, and every Sky Vista logo is the
   for-dark-background cut, so the bar is the dark chrome ground. */
.sv-header,
.sv-header.header-sticky {
  background-color: var(--sv-bg-4);
}
.sv-header .tp-main-menu nav > ul > li > a { color: var(--sv-color-3); }
.sv-header .tp-main-menu nav > ul > li > a:hover,
.sv-header .tp-main-menu nav > ul > li.current-menu-item > a { color: var(--sv-accent); }
.sv-header .tp-menu-bar span { background-color: var(--sv-color-3); }
/* 8 nav items where the theme demo has 5: tighter spacing keeps one line. */
.sv-header .tp-main-menu nav > ul > li { margin: 0 14px; }
.sv-header .tp-main-menu nav > ul > li > a { padding: 38px 0; }
.sv-logo { width: 170px; height: auto; }
.tp-offcanvas-logo .sv-logo { width: 150px; }

/* The one CTA colour. */
.sv-btn-primary {
  background-color: var(--sv-accent);
  color: var(--sv-color-5);
}
.sv-btn-primary:hover { color: var(--sv-color-5); }
.sv-text-accent { color: var(--sv-accent); }
.sv-bg-dark { background-color: var(--sv-bg-4); }
.sv-bg-accent { background-color: var(--sv-accent); }

/* Home: our products shown as logo tiles on the dark ground (no screenshots yet). */
.sv-work-tile {
  background-color: var(--sv-bg-4);
  display: flex !important;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
}
.sv-work-tile img { width: 45%; height: auto; max-height: 45%; object-fit: contain; }
.sv-brand-item img { max-height: 60px; width: auto; }
/* Products without a logo file show a wordmark. */
.sv-wordmark { color: var(--sv-color-3); font-size: 34px; text-align: center; padding: 0 20px; }
/* Real client quotes run far longer than the theme's one-liners. */
.tp-testimonial-slider-item .sv-quote { font-size: 24px; line-height: 1.35; }

/* Offcanvas is a dark panel in the theme; the logo is the dark-bg cut. */
.tp-offcanvas { background-color: var(--sv-bg-4); }
/* Aleric's offcanvas text is dark (built for a light panel); ours is the dark ground. */
.tp-offcanvas .tp-offcanvas-menu a,
.tp-offcanvas .tp-offcanvas-title,
.tp-offcanvas .close-btn { color: var(--sv-color-3); }
.tp-offcanvas .tp-offcanvas-contact a { color: var(--sv-color-4); }
.tp-offcanvas .close-btn svg path { stroke: currentColor; }
.tp-offcanvas .tp-offcanvas-menu a:hover { color: var(--sv-accent); }

/* Footer: same dark ground as the header. */
.sv-footer { background-color: var(--sv-bg-4); }
.sv-footer-links ul { list-style: none; padding: 0; margin: 0; }
.sv-footer-links li + li { margin-top: 8px; }
.sv-footer-links a { font-size: 16px; font-weight: 500; }

/* Plain text pages (legal) on the shell. */
.sv-aleric-page { padding-top: 160px; padding-bottom: 100px; }
.sv-aleric-page .sv-page__title { margin-bottom: 10px; }
.sv-aleric-page .sv-page__updated { color: var(--sv-color-4); margin-bottom: 40px; }
.sv-aleric-prose { max-width: 820px; color: var(--sv-color-2); font-size: 17px; line-height: 1.75; }
/* Migrated policy content carries its own h1/h2; keep them below the page H1. */
.sv-aleric-prose h1,
.sv-aleric-prose h2 { font-size: 28px; line-height: 1.3; margin: 44px 0 14px; }
.sv-aleric-prose h3 { font-size: 22px; margin: 32px 0 12px; }
.sv-aleric-prose p { margin-bottom: 18px; }
.sv-aleric-prose ul,
.sv-aleric-prose ol { padding-left: 22px; margin-bottom: 18px; }
.sv-aleric-prose li { margin-bottom: 6px; }
.sv-aleric-prose a { color: var(--sv-color-6); text-decoration: underline; }

/* "Our Products" is twice as long as the theme's "Work" title: at the theme's 145px it
   overflows col-lg-8, and the para's -54px pull (sized for the short title) lands on it. */
.sv-products-area .tp-portfolio-sectitle { font-size: clamp(56px, 7.4vw, 112px); white-space: nowrap; }
.sv-products-area .tp-portfolio-para { margin-bottom: 80px; }

@media (max-width: 767px) {
  .sv-products-area .tp-portfolio-sectitle { font-size: 44px; }
  .sv-products-area .tp-portfolio-sectitle .borders { display: none; }
  .sv-products-area .tp-portfolio-para { margin-bottom: 40px; }
  .sv-aleric-page { padding-top: 130px; padding-bottom: 70px; }
  .sv-logo { width: 140px; }
  .sv-aleric-page .sv-page__title { font-size: 34px; }
  .sv-aleric-prose h1,
  .sv-aleric-prose h2 { font-size: 24px; }
}

/* Our reviews run longer than the theme's one-liners; the absolutely-placed small photo
   (164px, bottom-right) would sit on the text. Keep the review clear of its column. */
@media (min-width: 768px) {
  .tp-testimonial-slider-item { padding-right: 190px; }
}
/* The theme pins the slide counter at a fixed bottom offset, so a long review's name
   lands on it. Put it in flow under the slider (the theme already does this below 1200px). */
.tp-testimonial-slider-wrap .fraction-wrapper { position: relative; bottom: auto; margin-top: 30px; }
/* AI Agency showcase (index-ai-agency.html): the theme's blue CTA becomes the site accent;
   our photos stand in the mock-dashboard slots, rounded like the theme's cards. */
.upd-btn-black-radius.btn-blue-bg { background-color: var(--sv-accent); color: var(--sv-color-5); }
.sv-ais-photo img { border-radius: 20px; width: 100%; object-fit: cover; }
.ais-hero-thumb.sv-ais-photo img { max-height: 620px; }
.sv-ais-list { margin-top: 12px; }
.sv-ais-list li { list-style: none; padding: 4px 0; }
.sv-ais-list li::before { content: "+ "; color: var(--sv-accent); }
.sv-ais-steps ul li { line-height: 1.5; }
/* The theme floats each step at 50%, so steps of unequal length stack in a staircase.
   A two-column grid keeps rows aligned; one column on phones. */
.sv-ais-steps ul { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; }
.sv-ais-steps ul li { float: none; width: auto; margin: 0; padding-top: 18px; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
@media (max-width: 767px) { .sv-ais-steps ul { grid-template-columns: 1fr; gap: 20px; } }

/* AI Agency on the AI Startup DARK layout (rev 286): demo orange accents → site accent purple. */
.aleric-dark .title-slide-gradient { background-image: linear-gradient(90deg, #999 0%, var(--sv-accent) 50%, #999 100%); }
.aleric-dark .tp-btn-ai::after { background-image: linear-gradient(90deg, #201b17 0%, var(--sv-accent) 50%, #201b17 100%); }
.aleric-dark .tp-cta-ai-bg { background-image: radial-gradient(circle at 75% 30%, var(--sv-accent), transparent 60%), linear-gradient(135deg, var(--tp-common-black-5), var(--sv-accent)) !important; }
.aleric-dark .sv-ai-marquee-accent { background-color: var(--sv-accent) !important; }
.sv-ai-cover { aspect-ratio: 4 / 5; object-fit: cover; }
.sv-ai-items { margin: 6px 0 0 calc(24px + 30px); }
@media (max-width: 575px) { .sv-ai-items { margin-left: 0; } }

/* rev 287: phones/tablets were laid out 4x too wide (390px phone → 1560px layout viewport).
   ScrollSmoother's wrapper used to clip off-screen marquees, sliders and the offcanvas; with the
   smoother skipped on touch nothing did. clip (not hidden) keeps position:sticky working. */
html, body { overflow-x: clip; }
#smooth-wrapper, main { overflow-x: clip; }
.swiper-container { overflow: hidden; }

/* rev 289: hero intro stacked under the heading, one left edge (site-analysis item 1) */
.tp-hero-bottom-content { margin-top: 30px; }

/* rev 299: inline-SVG icons so the 358KB fa-regular font is never fetched */
.sv-ico { display: inline-block; line-height: 1; font-style: normal; }
.sv-ico svg { width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; }
.sv-brand { display: inline-block; line-height: 1; font-style: normal; }
.sv-brand svg { height: 1em; width: auto; fill: currentColor; vertical-align: -.125em; }

/* Team photo hover: the theme ships a hardcoded lime (#b4e717) fade; use the brand accent. */
.tp-team-it-thumb::before { background: linear-gradient(180deg, transparent 55.57%, var(--sv-accent) 100%); }

/* Printing page overview: left column carried only a heading beside long copy; add an image. */
.sv-print-overview-thumb img { width: 100%; height: auto; border-radius: 12px; display: block; }

/* Loomy360 lead form ships a system-font stack (--loomy-font-family = -apple-system/Segoe UI);
   point it, and anything it leaves to the browser, at the site's body font. */
.loomy360-form-wrap { --loomy-font-family: var(--tp-ff-body, "Poppins", sans-serif) !important; }
.loomy360-form-wrap, .loomy360-form-wrap *, .loomy360-form-wrap input::placeholder, .loomy360-form-wrap textarea::placeholder {
  font-family: var(--tp-ff-body, "Poppins", sans-serif) !important;
}