/* ============================================================
   szyler.com — Samsung Internet dark-mode fix
   ------------------------------------------------------------
   Samsung Internet forces a dark recolour on every site and
   offers no opt-out; the page also can't detect that it's on
   (it reports prefers-color-scheme: light). Only colours that
   come from IMAGES survive, so on this browser:
     - light / brand surfaces  -> solid SVG colour tiles
     - dark text on them       -> a black PNG tile clipped to glyphs
     - soft glows              -> a solid tile shaped by a CSS mask
   Everything is scoped under html.sb (set by a UA check in the
   <head>) AND per theme, so:
     - other browsers are untouched
     - Samsung's own LIGHT mode renders identically to normal
     - the site's light + dark themes both keep working
   Dark theme mostly survives on its own; we only repair the
   bright orange accents there. Light theme gets the full set.

   NB: every custom property here is prefixed --i* so it can't
   collide with the site's own tokens (e.g. the site's --muted).
   A plain background-COLOR would be recoloured by Samsung; the
   text tiles MUST stay images.
   ============================================================ */

html.sb{
  /* brand + neutral tiles (theme-independent) */
  --iorange:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23ff5c00'/%3E%3C/svg%3E");
  --iorange2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23ff8a3d'/%3E%3C/svg%3E");
  --iwhite:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23ffffff'/%3E%3C/svg%3E");
  /* black / grey text must be raster — a black SVG gets inverted to grey */
  --iink:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mOUkpL9z4AEmBjQAGEBAFXzAVjH9xJMAAAAAElFTkSuQmCC");
  --isoft:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mO0snL4z4AEmBjQAGEBAG92AbujQjQSAAAAAElFTkSuQmCC");
  --imuted:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mPMzS3+z4AEmBjQAGEBAJboAlSsf+ihAAAAAElFTkSuQmCC");
}
/* light-theme palette tiles */
html.sb[data-theme="light"]{
  --ibg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23f4f2ee'/%3E%3C/svg%3E");
  --ibg2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23ece9e3'/%3E%3C/svg%3E");
  --icard:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23ffffff'/%3E%3C/svg%3E");
  --inav:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23ffffff' fill-opacity='.72'/%3E%3C/svg%3E");
  --itri:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23b9b6b0'/%3E%3C/svg%3E");
}
/* dark-theme palette tiles */
html.sb[data-theme="dark"]{
  --ibg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%230b0b0d'/%3E%3C/svg%3E");
  --icard:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%231a1a1f'/%3E%3C/svg%3E");
  --inav:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23141418' fill-opacity='.72'/%3E%3C/svg%3E");
  --itri:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%2333333b'/%3E%3C/svg%3E");
}

/* ============================================================
   SHARED (both themes) — orange brand fills & shapes
   Samsung turns orange into a dark red; repaint from a tile.
   ============================================================ */
/* orange TEXT -> clip an orange tile to the glyphs */
html.sb .accent,
html.sb .svc-num,
html.sb .fp-eyebrow,
html.sb .stat-plus,
html.sb .marquee-track i,
html.sb .nav-logo-fallback b,
html.sb .hero-logo-text b,
html.sb .footer-brand b{
  color:transparent;text-shadow:none;
  background:var(--iorange);-webkit-background-clip:text;background-clip:text;
}
/* solid orange buttons / blocks (white text stays light, survives) */
html.sb .btn-solid,
html.sb .nav-burger,
html.sb .work-item::after{
  background-image:var(--iorange);
}
html.sb .btn-solid::before{ background-image:var(--iorange2); }
/* the custom desktop cursor ring + spotlight can't work on a touch phone,
   and Samsung Internet doesn't honour @media(hover:none) (S-Pen hover),
   so they'd otherwise sit frozen on screen — hide them here */
html.sb .cursor,
html.sb .cursor-dot,
html.sb .spotlight{ display:none !important; }
/* small orange shapes */
html.sb .eyebrow .dot,
html.sb .hero-scroll-line i{ background-image:var(--iorange); }
html.sb .scroll-progress span{ background-image:var(--iorange); }

/* decorative background: keep the orange glows & triangles on brand.
   A gradient image gets darkened by Samsung, so the glow is a solid
   orange tile shaped by a CSS mask instead. */
html.sb .glow{
  background-image:var(--iorange);
  -webkit-mask-image:radial-gradient(circle,#000 0%,transparent 70%);
  mask-image:radial-gradient(circle,#000 0%,transparent 70%);
}
html.sb .tri-a{ background-image:var(--iorange); }
html.sb .tri-b{ background-image:var(--itri); }
/* On dark, Samsung LIGHTENS small dark tiles, so the grey triangles —
   near-invisible (#2c2c33) on Chrome — render as prominent light-grey
   shapes. They add nothing, so drop them on Samsung dark to match Chrome. */
html.sb[data-theme="dark"] .tri-b{ display:none; }

/* ============================================================
   LIGHT THEME — full treatment
   ============================================================ */
/* --- surfaces --- */
html.sb[data-theme="light"] body,
html.sb[data-theme="light"] .bg-scene,
html.sb[data-theme="light"] .menu-overlay{ background-image:var(--ibg); }
html.sb[data-theme="light"] .nav{ background-image:var(--inav); }
html.sb[data-theme="light"] .work-item,
html.sb[data-theme="light"] .work-thumb{ background-image:var(--ibg2); }
html.sb[data-theme="light"] .service-card,
html.sb[data-theme="light"] .feature-project,
html.sb[data-theme="light"] .svc-row:hover,
html.sb[data-theme="light"] .process-step:hover{ background-image:var(--icard); }

/* --- primary dark text (--fg) -> ink clip --- */
html.sb[data-theme="light"] .nav-logo-fallback,
html.sb[data-theme="light"] .menu-overlay-links a,
html.sb[data-theme="light"] .hero-logo-text,
html.sb[data-theme="light"] .hero-heading,
html.sb[data-theme="light"] .marquee-track span,
html.sb[data-theme="light"] .section-title,
html.sb[data-theme="light"] .svc-row h3,
html.sb[data-theme="light"] .work-sub,
html.sb[data-theme="light"] .fp-title,
html.sb[data-theme="light"] .stat-num,
html.sb[data-theme="light"] .contact-title,
html.sb[data-theme="light"] .contact-phone,
html.sb[data-theme="light"] .footer-brand{
  color:transparent;text-shadow:none;
  background:var(--iink);-webkit-background-clip:text;background-clip:text;
}
/* --- secondary text (--fg-soft) -> soft clip --- */
html.sb[data-theme="light"] .hero-sub,
html.sb[data-theme="light"] .fp-tags span{
  color:transparent;text-shadow:none;
  background:var(--isoft);-webkit-background-clip:text;background-clip:text;
}
/* --- muted text (--muted) -> muted clip --- */
html.sb[data-theme="light"] .nav-links a,
html.sb[data-theme="light"] .eyebrow,
html.sb[data-theme="light"] .hero-scroll,
html.sb[data-theme="light"] .section-lead,
html.sb[data-theme="light"] .svc-row p,
html.sb[data-theme="light"] .fp-desc,
html.sb[data-theme="light"] .stat p,
html.sb[data-theme="light"] .contact-sub,
html.sb[data-theme="light"] .footer{
  color:transparent;text-shadow:none;
  background:var(--imuted);-webkit-background-clip:text;background-clip:text;
}
/* the dot inside an eyebrow keeps its own orange tile */
html.sb[data-theme="light"] .eyebrow .dot{ background-image:var(--iorange); }

/* filter chips: white pill + grey text together (two background layers) */
html.sb[data-theme="light"] .filter{
  color:transparent;text-shadow:none;
  background:var(--imuted),var(--icard);
  -webkit-background-clip:text,border-box;background-clip:text,border-box;
}
html.sb[data-theme="light"] .filter.active,
html.sb[data-theme="dark"] .filter.active{
  color:transparent;text-shadow:none;
  background:var(--iwhite),var(--iorange);
  -webkit-background-clip:text,border-box;background-clip:text,border-box;
}
/* ghost button: dark text clipped; the plain border is left to Samsung
   (it shows as grey — an accepted limit). The label sits in an inner
   <span>, so the clip has to go on the span, not the <a>. */
html.sb[data-theme="light"] .btn-ghost{ color:transparent; }
html.sb[data-theme="light"] .btn-ghost span{
  color:transparent;
  background:var(--iink);-webkit-background-clip:text;background-clip:text;
}

/* --- kill hover colour swaps on clipped text (text would otherwise
       reappear in a recoloured colour) --- */
html.sb[data-theme="light"] .nav-links a:hover,
html.sb[data-theme="light"] .filter:hover,
html.sb[data-theme="light"] .contact-phone:hover,
html.sb[data-theme="light"] .menu-overlay-links a:hover,
html.sb[data-theme="light"] .btn-ghost:hover{ color:transparent; }
html.sb .btn-solid:hover,
html.sb .btn-solid:hover span{ color:#fff; }

/* ============================================================
   DARK THEME — only the bright accents needed fixing, and those
   are handled by the SHARED block above. The near-black base,
   light text, translucent cards and dark browser-frame mock are
   left untouched: Samsung leaves dark surfaces alone.
   ============================================================ */