/* ==========================================================================
   Sinsim PRI — Design System
   Brand: industrial teal (#0FA396) + charcoal slate (#1B2430), warm paper neutrals
   Type: Archivo (display/heading) + Inter (body/UI)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Fraunces:ital,opsz,wght@1,9..144,400..600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root{
  /* ---- Brand color ramps ---- */
  --teal-50:#EAF7F5;
  --teal-100:#CFEEE9;
  --teal-200:#9FDCD3;
  --teal-400:#2CB6A8;
  --teal-500:#0FA396;
  --teal-600:#0B8A7F;
  --teal-700:#086F66;
  --teal-900:#063D38;

  --slate-900:#131B24;
  --slate-800:#1B2430;
  --slate-700:#26313D;
  --slate-600:#3A4856;
  --slate-500:#5A6E80;
  --slate-300:#9AACB8;
  --slate-100:#DCE3E7;

  --ink:#10151B;
  --paper:#FAF9F6;
  --paper-alt:#F1F2EE;
  --paper-deep:#EAECE7;
  --white:#FFFFFF;
  --line:#E4E6E1;
  --line-strong:#D3D7D0;

  --amber:#C99A45; /* sparing premium accent — badges, ratings only */
  --danger:#C0392B;

  /* ---- Semantic tokens ---- */
  --color-bg:var(--paper);
  --color-surface:var(--white);
  --color-ink:var(--ink);
  --color-muted:var(--slate-500);
  --color-primary:var(--teal-500);
  --color-primary-dark:var(--teal-700);
  --color-dark:var(--slate-800);
  --color-border:var(--line);
  --color-ring:var(--teal-500);

  /* ---- Type scale ---- */
  --font-display:'Archivo', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --font-serif:'Fraunces', Georgia, serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

  --step-hero: clamp(2.6rem, 5.2vw + 1rem, 5.6rem);
  --step-h1: clamp(2.2rem, 3.2vw + 1rem, 3.6rem);
  --step-h2: clamp(1.7rem, 2vw + 1rem, 2.6rem);
  --step-h3: clamp(1.3rem, 1vw + 1rem, 1.6rem);
  --step-lead: clamp(1.05rem, 0.4vw + 1rem, 1.3rem);
  --step-body: 1rem;
  --step-small: 0.875rem;
  --step-xs: 0.75rem;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --section-pad: clamp(4rem, 7vw, 8rem);
  --container-w: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16,21,27,0.06), 0 1px 1px rgba(16,21,27,0.04);
  --shadow-md: 0 8px 24px rgba(16,21,27,0.08), 0 2px 8px rgba(16,21,27,0.05);
  --shadow-lg: 0 24px 64px rgba(16,21,27,0.14), 0 8px 24px rgba(16,21,27,0.08);
  --shadow-teal: 0 12px 32px rgba(15,163,150,0.28);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 450ms;

  --header-h: 84px;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--step-body);
  line-height:1.6;
  color:var(--color-ink);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img, picture, video, canvas, svg{ display:block; max-width:100%; height:auto; }
h1,h2,h3,h4,p,figure{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input, textarea, select{ font:inherit; color:inherit; }
table{ border-collapse:collapse; width:100%; }

:focus-visible{
  outline:3px solid var(--color-ring);
  outline-offset:2px;
  border-radius:2px;
}

h1,h2,h3,.font-display{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-0.02em;
  color:var(--slate-900);
}

/* ==========================================================================
   Layout
   ========================================================================== */
.container{
  width:100%;
  max-width:var(--container-w);
  margin-inline:auto;
  padding-inline:var(--container-pad);
}
.section{ padding-block:var(--section-pad); }
.section-tight{ padding-block:calc(var(--section-pad) * 0.6); }
.section-dark{ background:var(--slate-800); color:var(--slate-100); }
.section-dark h1,.section-dark h2,.section-dark h3{ color:var(--white); }
.section-alt{ background:var(--paper-alt); }

.grid{ display:grid; gap:var(--space-lg); }
.grid-2{ grid-template-columns:repeat(2, 1fr); }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
.grid-4{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:1024px){
  .grid-4{ grid-template-columns:repeat(2, 1fr); }
  .grid-3{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
}

.flex{ display:flex; }
.flex-center{ display:flex; align-items:center; justify-content:center; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.flex-col{ display:flex; flex-direction:column; }
.gap-xs{ gap:var(--space-xs); }
.gap-sm{ gap:var(--space-sm); }
.gap-md{ gap:var(--space-md); }
.gap-lg{ gap:var(--space-lg); }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2xs);
  font-family:var(--font-mono);
  font-size:var(--step-xs);
  font-weight:500;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--teal-700);
}
.eyebrow::before{
  content:'';
  width:20px; height:2px;
  background:var(--teal-500);
  display:inline-block;
}
.section-dark .eyebrow{ color:var(--teal-400); }

h1{ font-size:var(--step-h1); }
h2{ font-size:var(--step-h2); }
h3{ font-size:var(--step-h3); }
.lead{ font-size:var(--step-lead); color:var(--color-muted); line-height:1.6; font-weight:400; }
.section-dark .lead{ color:var(--slate-300); }

.text-center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.max-w-prose{ max-width:640px; }
.mt-2xs{margin-top:var(--space-2xs)} .mt-xs{margin-top:var(--space-xs)} .mt-sm{margin-top:var(--space-sm)}
.mt-md{margin-top:var(--space-md)} .mt-lg{margin-top:var(--space-lg)} .mt-xl{margin-top:var(--space-xl)}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2xs);
  padding:0.95rem 1.75rem;
  min-height:48px;
  border-radius:var(--radius-pill);
  font-weight:600;
  font-size:0.95rem;
  letter-spacing:0.01em;
  white-space:nowrap;
  cursor:pointer;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  border:1.5px solid transparent;
}
.btn svg{ width:18px; height:18px; flex-shrink:0; transition:transform var(--dur-base) var(--ease-out); }
.btn-primary{
  background:var(--teal-700);
  color:var(--white);
  box-shadow:var(--shadow-teal);
}
.btn-primary:hover{ background:var(--teal-900); transform:translateY(-2px); box-shadow:0 16px 36px rgba(8,111,102,0.36); }
.btn-dark{ background:var(--slate-800); color:var(--white); }
.btn-dark:hover{ background:var(--slate-900); transform:translateY(-2px); }
.btn-outline{
  background:transparent;
  border-color:var(--slate-800);
  color:var(--slate-800);
}
.btn-outline:hover{ background:var(--slate-800); color:var(--white); }
.section-dark .btn-outline{ border-color:rgba(255,255,255,0.4); color:var(--white); }
.section-dark .btn-outline:hover{ background:var(--white); color:var(--slate-900); }
.btn-ghost{ background:transparent; color:var(--slate-800); padding-inline:0.25rem; }
.btn-ghost:hover{ color:var(--teal-600); }
.btn-ghost svg{ }
.btn-ghost:hover svg{ transform:translateX(4px); }
.btn-lg{ padding:1.15rem 2.25rem; font-size:1.02rem; }
.btn-block{ width:100%; }
.btn-wa{ background:#0E7364; color:#fff; }
.btn-wa:hover{ background:#0B5D51; transform:translateY(-2px); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  height:var(--header-h);
  display:flex;
  align-items:center;
  background:rgba(250,249,246,0.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled{
  background:rgba(250,249,246,0.92);
  border-bottom-color:var(--line);
  box-shadow:var(--shadow-sm);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg); }

.brand{ display:flex; align-items:center; gap:0.6rem; flex-shrink:0; }
.brand img{ height:38px; width:auto; }
.brand-word{ font-family:var(--font-display); font-weight:900; font-size:1.15rem; letter-spacing:-0.01em; color:var(--slate-900); }
.brand-word span{ color:var(--teal-500); }
.brand-sub{ font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.16em; color:var(--slate-500); text-transform:uppercase; margin-top:2px; }

.nav-main{ display:flex; align-items:center; gap:var(--space-lg); }
.nav-links{ display:flex; align-items:center; gap:var(--space-md); }
.nav-links a{
  position:relative;
  font-size:0.92rem;
  font-weight:600;
  color:var(--slate-700);
  padding:0.5rem 0.1rem;
  transition:color var(--dur-base) var(--ease-out);
}
.nav-links a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  height:2px; width:0;
  background:var(--teal-500);
  transition:width var(--dur-base) var(--ease-out);
}
.nav-links a:hover{ color:var(--teal-600); }
.nav-links a:hover::after, .nav-links a.is-active::after{ width:100%; }
.nav-links a.is-active{ color:var(--teal-600); }

.header-cta{ display:flex; align-items:center; gap:var(--space-sm); }
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  width:44px; height:44px;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-md);
}
.nav-toggle span{ width:22px; height:2px; background:var(--slate-900); transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Header phone number label: only show on wide desktops */
@media (max-width:1279px){
  .sr-only-tablet{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
}

@media (max-width:960px){
  .site-header .container{ gap:var(--space-sm); }
  .nav-main{ gap:var(--space-sm); }
  .header-cta{ gap:var(--space-2xs); }
  .nav-links{
    position:fixed;
    inset:var(--header-h) 0 0 0;
    background:var(--paper);
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    padding:var(--space-lg) var(--container-pad);
    gap:var(--space-md);
    transform:translateX(100%);
    transition:transform var(--dur-slow) var(--ease-in-out);
    overflow-y:auto;
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-links a{ font-size:1.4rem; width:100%; padding-block:0.5rem; }
  .nav-toggle{ display:flex; }
  .header-cta .btn-lg-desktop{ display:none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-top:var(--header-h);
  background:var(--slate-900);
  color:var(--white);
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img, .hero-media video{ width:100%; height:100%; object-fit:cover; opacity:0.55; }
.hero-slide{ position:absolute; inset:0; opacity:0; }
.hero-slide.is-active{ opacity:1; }
.hero-dots{
  position:absolute; z-index:2;
  right:var(--container-pad, 2rem); bottom:3.4rem;
  display:flex; gap:0.5rem; align-items:center;
}
.hero-dot{
  width:22px; height:3px; border:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,0.3); border-radius:2px;
  transition:width var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.hero-dot.is-active{ width:44px; background:var(--teal-400); }
.hero-dot:hover{ background:rgba(255,255,255,0.6); }
.hero-dot.is-active:hover{ background:var(--teal-400); }
@media (max-width:640px){ .hero-dots{ bottom:3rem; right:50%; transform:translateX(50%); } }
.hero-media::after{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 85% 10%, transparent 40%, rgba(11,138,127,0.16) 100%),
             linear-gradient(180deg, rgba(19,27,36,0.55) 0%, rgba(19,27,36,0.35) 40%, rgba(19,27,36,0.94) 100%),
             linear-gradient(90deg, rgba(19,27,36,0.88) 0%, rgba(19,27,36,0.25) 55%);
}
/* Cinematic film grain over the hero photo */
.hero::before{
  content:'';
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:var(--grain);
  background-size:160px 160px;
  opacity:0.07;
  mix-blend-mode:overlay;
}
.hero-content{ position:relative; z-index:1; padding-block:var(--space-2xl); }
.hero-content .eyebrow{ color:var(--teal-400); }
.hero-title{
  font-size:var(--step-hero);
  font-family:var(--font-display);
  font-weight:900;
  line-height:1.02;
  letter-spacing:-0.03em;
  color:var(--white);
  max-width:16ch;
  margin-top:var(--space-sm);
}
/* The couture counterpoint: accent phrases set in Fraunces italic */
.hero-title em, .hero-title .wi-accent{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:480;
  font-variation-settings:'opsz' 100;
  letter-spacing:-0.015em;
  color:var(--teal-400);
}
h2 em{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--teal-700);
}
.cta-band h2 em, .section-dark h2 em{ color:var(--teal-400); }
.hero-lead{ font-size:var(--step-lead); color:var(--slate-100); max-width:46ch; margin-top:var(--space-md); opacity:0.9; }
.hero-actions{ display:flex; gap:var(--space-sm); flex-wrap:wrap; margin-top:var(--space-lg); }
.hero-stats{
  display:flex;
  gap:var(--space-xl);
  margin-top:var(--space-2xl);
  padding-top:var(--space-lg);
  border-top:1px solid rgba(255,255,255,0.16);
  flex-wrap:wrap;
}
.hero-stat b{ display:block; font-family:var(--font-display); font-size:2rem; font-weight:800; color:var(--white); }
.hero-stat span{ font-size:0.82rem; color:var(--slate-300); }
.hero-scroll-cue{
  position:absolute; bottom:var(--space-lg); left:50%; transform:translateX(-50%);
  z-index:1; display:flex; flex-direction:column; align-items:center; gap:var(--space-2xs);
  color:var(--slate-300); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; font-family:var(--font-mono);
}
.scroll-line{ width:1px; height:36px; background:linear-gradient(var(--teal-400), transparent); overflow:hidden; }

@media (max-width:640px){
  .hero-stats{ gap:var(--space-lg); }
  .hero-title{ max-width:100%; }
}

/* Page (non-home) header banner */
.page-hero{
  position:relative;
  padding-top:calc(var(--header-h) + var(--space-2xl));
  padding-bottom:var(--space-2xl);
  background:var(--slate-900);
  color:var(--white);
  overflow:hidden;
}
.page-hero-media{ position:absolute; inset:0; }
.page-hero-media img{ width:100%; height:100%; object-fit:cover; opacity:0.32; }
.page-hero-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(19,27,36,0.7), rgba(19,27,36,0.96)); }
.page-hero .container{ position:relative; z-index:1; }
.page-hero h1{ color:var(--white); font-size:var(--step-h1); max-width:20ch; }
.breadcrumb{ display:flex; gap:var(--space-2xs); font-size:0.82rem; color:var(--slate-300); margin-bottom:var(--space-md); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.08em; }
.breadcrumb a:hover{ color:var(--teal-400); }

/* ==========================================================================
   Cards
   ========================================================================== */
.card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--teal-200); }

.category-card{ position:relative; display:flex; flex-direction:column; }
.category-card-media{ aspect-ratio:4/3; overflow:hidden; background:var(--paper-alt); }
.category-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); }
.category-card:hover .category-card-media img{ transform:scale(1.06); }
.category-card-body{ padding:var(--space-md); display:flex; flex-direction:column; gap:var(--space-2xs); flex:1; }
.category-card-body h3{ font-size:1.15rem; }
.category-card-body p{ color:var(--color-muted); font-size:0.92rem; line-height:1.55; }
.category-card-link{
  margin-top:var(--space-sm);
  display:inline-flex; align-items:center; gap:0.4rem;
  font-size:0.85rem; font-weight:700; color:var(--teal-700);
  text-transform:uppercase; letter-spacing:0.04em;
}
.category-card-link svg{ width:15px; height:15px; transition:transform var(--dur-base) var(--ease-out); }
.category-card:hover .category-card-link svg{ transform:translateX(4px); }

.feature-card{ padding:var(--space-lg); background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); }
.feature-icon{
  width:52px; height:52px; border-radius:var(--radius-md);
  background:var(--teal-50); color:var(--teal-600);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-md);
}
.feature-icon svg{ width:26px; height:26px; }
.feature-card h3{ font-size:1.1rem; margin-bottom:var(--space-2xs); }
.feature-card p{ color:var(--color-muted); font-size:0.92rem; line-height:1.6; }

.badge{
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.3rem 0.75rem; border-radius:var(--radius-pill);
  font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  background:var(--teal-50); color:var(--teal-700);
}
.badge-dark{ background:rgba(255,255,255,0.12); color:var(--white); }
.badge-amber{ background:#FBF1DE; color:#8A6416; }

/* ==========================================================================
   Stats strip
   ========================================================================== */
.stats-strip{
  position:relative;
  background:var(--slate-800);
  color:var(--white);
  padding-block:var(--space-xl);
  overflow:hidden;
}
/* Faint diagonal thread hatch */
.stats-strip::before{
  content:'';
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 16px);
}
.stats-strip .container{ position:relative; }
.stats-strip .grid{ gap:var(--space-md); }
.stat-item{ text-align:center; padding-inline:var(--space-sm); border-left:1px solid rgba(255,255,255,0.14); }
.stat-item:first-child{ border-left:0; }
.stat-item b{ display:block; font-family:var(--font-display); font-size:clamp(2rem,3vw,3rem); font-weight:800; color:var(--teal-400); }
.stat-item span{ font-size:0.85rem; color:var(--slate-300); }
@media (max-width:768px){ .stat-item{ border-left:0; border-top:1px solid rgba(255,255,255,0.14); padding-top:var(--space-md); } }

/* ==========================================================================
   Testimonials / marquee
   ========================================================================== */
.marquee{ overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track{ display:flex; gap:var(--space-2xl); width:max-content; animation:marquee 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee-item{ font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--slate-300); white-space:nowrap; opacity:0.6; }

.testi-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-lg); display:flex; flex-direction:column; gap:var(--space-md); height:100%; }
.testi-stars{ display:flex; gap:2px; color:var(--amber); }
.testi-stars svg{ width:16px; height:16px; }
.testi-quote{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:440;
  font-size:1.12rem;
  line-height:1.6;
  color:var(--slate-800);
}
.testi-person{ display:flex; align-items:center; gap:var(--space-sm); margin-top:auto; padding-top:var(--space-sm); border-top:1px solid var(--line); }
.testi-avatar{ width:44px; height:44px; border-radius:50%; background:var(--teal-100); color:var(--teal-700); display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-display); flex-shrink:0; }
.testi-person b{ display:block; font-size:0.92rem; }
.testi-person span{ font-size:0.8rem; color:var(--color-muted); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  position:relative;
  background:var(--teal-700);
  color:var(--white);
  border-radius:var(--radius-lg);
  padding:var(--space-2xl) var(--space-lg);
  overflow:hidden;
  text-align:center;
}
.cta-band::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(60% 100% at 15% 0%, rgba(255,255,255,0.16), transparent 60%),
             radial-gradient(50% 90% at 100% 100%, rgba(44,182,168,0.35), transparent 60%);
}
.cta-band::after{
  content:'';
  position:absolute; inset:0; pointer-events:none;
  background-image:var(--grain);
  background-size:160px 160px;
  opacity:0.05;
  mix-blend-mode:overlay;
}
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ color:var(--white); max-width:22ch; margin-inline:auto; }
.cta-band .lead{ color:rgba(255,255,255,0.85); }
.cta-band .btn-primary{ background:var(--white); color:var(--teal-700); }
.cta-band .btn-primary:hover{ background:var(--paper); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--slate-900); color:var(--slate-300); padding-top:var(--space-2xl); }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:var(--space-lg); padding-bottom:var(--space-xl); border-bottom:1px solid rgba(255,255,255,0.1); }
.footer-brand p{ color:var(--slate-300); font-size:0.92rem; line-height:1.65; max-width:34ch; margin-top:var(--space-sm); }
.footer-col h4{ font-family:var(--font-display); font-size:0.85rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--white); margin-bottom:var(--space-sm); }
.footer-col ul{ display:flex; flex-direction:column; gap:0.65rem; }
.footer-col a{ font-size:0.9rem; color:var(--slate-300); transition:color var(--dur-base) var(--ease-out); }
.footer-col a:hover{ color:var(--teal-400); }
.footer-social{ display:flex; gap:var(--space-sm); margin-top:var(--space-md); }
.footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; transition:all var(--dur-base) var(--ease-out); }
.footer-social a:hover{ background:var(--teal-500); border-color:var(--teal-500); transform:translateY(-3px); }
.footer-social svg{ width:16px; height:16px; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding-block:var(--space-md); font-size:0.8rem; color:var(--slate-500); flex-wrap:wrap; gap:var(--space-sm); }
.footer-bottom a:hover{ color:var(--teal-400); }

@media (max-width:900px){
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .footer-top{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Forms
   ========================================================================== */
.field{ display:flex; flex-direction:column; gap:0.4rem; }
.field label{ font-size:0.85rem; font-weight:600; color:var(--slate-800); }
.field .required{ color:var(--danger); }
.field input, .field select, .field textarea{
  padding:0.85rem 1rem;
  border:1.5px solid var(--line-strong);
  border-radius:var(--radius-md);
  background:var(--white);
  font-size:0.95rem;
  transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  min-height:48px;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--teal-500); box-shadow:0 0 0 4px var(--teal-50);
}
.field-hint{ font-size:0.78rem; color:var(--color-muted); }
.field-error{ font-size:0.78rem; color:var(--danger); display:none; }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:var(--danger); }
.field.has-error .field-error{ display:block; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md); }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.form-note{ font-size:0.8rem; color:var(--color-muted); display:flex; align-items:flex-start; gap:0.4rem; }
.form-success{
  display:none; align-items:center; gap:var(--space-sm);
  background:var(--teal-50); color:var(--teal-700); border:1px solid var(--teal-200);
  border-radius:var(--radius-md); padding:var(--space-md); font-size:0.92rem; font-weight:600;
}
.form-success.is-visible{ display:flex; }
.form-success svg{ width:22px; height:22px; flex-shrink:0; }
.form-fail{
  display:none; align-items:flex-start; gap:var(--space-sm);
  background:#FDECEA; color:#8C2B21; border:1px solid #F0B9B2;
  border-radius:var(--radius-md); padding:var(--space-md); font-size:0.92rem; font-weight:600;
}
.form-fail.is-visible{ display:flex; }
.form-fail svg{ width:22px; height:22px; flex-shrink:0; margin-top:1px; }

/* ==========================================================================
   Accordion
   ========================================================================== */
.accordion-item{ border-bottom:1px solid var(--line); }
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-md);
  padding:var(--space-md) 0; text-align:left; font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:var(--slate-900);
}
.accordion-trigger svg{ width:20px; height:20px; flex-shrink:0; transition:transform var(--dur-base) var(--ease-out); color:var(--teal-600); }
.accordion-item.is-open .accordion-trigger svg{ transform:rotate(45deg); }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height var(--dur-slow) var(--ease-in-out); }
.accordion-panel-inner{ padding-bottom:var(--space-md); color:var(--color-muted); font-size:0.94rem; line-height:1.65; max-width:70ch; }

/* ==========================================================================
   Spec table / comparison
   ========================================================================== */
.spec-table{ width:100%; border-collapse:collapse; font-size:0.92rem; }
.spec-table th, .spec-table td{ padding:0.9rem 1rem; text-align:left; border-bottom:1px solid var(--line); }
.spec-table th{ font-family:var(--font-display); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--slate-500); background:var(--paper-alt); }
.spec-table tr:last-child td{ border-bottom:0; }
.table-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); }
.table-scroll::-webkit-scrollbar{ height:8px; }
.table-scroll::-webkit-scrollbar-thumb{ background:var(--slate-300); border-radius:4px; }

/* ==========================================================================
   Product filter chips
   ========================================================================== */
.filter-bar{ display:flex; flex-wrap:wrap; gap:0.6rem; }
.chip{
  padding:0.55rem 1.1rem; border-radius:var(--radius-pill); border:1.5px solid var(--line-strong);
  font-size:0.85rem; font-weight:600; color:var(--slate-700); transition:all var(--dur-base) var(--ease-out);
}
.chip:hover{ border-color:var(--teal-400); color:var(--teal-600); }
.chip.is-active{ background:var(--slate-900); border-color:var(--slate-900); color:var(--white); }

/* ==========================================================================
   Modal (quick view)
   ========================================================================== */
.modal-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(16,21,27,0.6);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:var(--space-md);
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out);
}
.modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.modal-box{
  background:var(--white); border-radius:var(--radius-lg); max-width:920px; width:100%;
  max-height:88vh; overflow-y:auto; position:relative;
  transform:translateY(24px) scale(0.98); opacity:0;
  transition:transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}
.modal-overlay.is-open .modal-box{ transform:translateY(0) scale(1); opacity:1; }
.modal-close{
  position:absolute; top:var(--space-sm); right:var(--space-sm); z-index:2;
  width:40px; height:40px; border-radius:50%; background:var(--white); box-shadow:var(--shadow-md);
  display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{ background:var(--slate-900); color:var(--white); }
.modal-grid{ display:grid; grid-template-columns:1fr 1fr; }
.modal-media{ aspect-ratio:4/3; background:var(--paper-alt); }
.modal-media img{ width:100%; height:100%; object-fit:cover; }
.modal-body{ padding:var(--space-lg); }
@media (max-width:720px){ .modal-grid{ grid-template-columns:1fr; } .modal-media{ aspect-ratio:16/10; } }

/* ==========================================================================
   Utility reveal states (GSAP sets inline transforms; these are safe fallbacks)
   ========================================================================== */
.reveal{ opacity:0; }
html.no-js .reveal, .reduced-motion .reveal{ opacity:1; }

/* WhatsApp float button */
.wa-float{
  position:fixed; right:var(--space-md); bottom:var(--space-md); z-index:90;
  width:58px; height:58px; border-radius:50%; background:#0E7364; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(14,115,100,0.45);
  transition:transform var(--dur-base) var(--ease-out);
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:28px; height:28px; }

/* Back to top */
.to-top{
  position:fixed; right:var(--space-md); bottom:calc(var(--space-md) + 70px); z-index:90;
  width:46px; height:46px; border-radius:50%; background:var(--slate-900); color:#fff;
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.to-top.is-visible{ opacity:1; pointer-events:auto; }
.to-top svg{ width:18px; height:18px; }

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:0; z-index:999;
  background:var(--teal-500); color:#fff; padding:0.8rem 1.2rem; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* Lazy image shimmer */
img[loading="lazy"]{ background:linear-gradient(100deg, var(--paper-alt) 20%, var(--paper-deep) 40%, var(--paper-alt) 60%); background-size:200% 100%; }

/* Two-col split section */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2xl); align-items:center; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:var(--space-xl); } }
.split-media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; }
.split-media img{ width:100%; height:100%; object-fit:cover; }

.check-list{ display:flex; flex-direction:column; gap:0.75rem; }
.check-list li{ display:flex; align-items:flex-start; gap:0.7rem; font-size:0.95rem; color:var(--slate-700); }
.check-list svg{ width:20px; height:20px; color:var(--teal-600); flex-shrink:0; margin-top:1px; }

.region-list{ display:flex; flex-direction:column; }
.region-item{ display:flex; justify-content:space-between; align-items:center; padding:var(--space-md) 0; border-bottom:1px solid var(--line); gap:var(--space-md); flex-wrap:wrap; }
.region-item b{ font-family:var(--font-display); font-size:1.05rem; }
.region-item span{ color:var(--color-muted); font-size:0.88rem; }

.timeline{ position:relative; padding-left:var(--space-lg); border-left:2px solid var(--line-strong); display:flex; flex-direction:column; gap:var(--space-xl); }
.timeline-item{ position:relative; }
.timeline-item::before{ content:''; position:absolute; left:calc(var(--space-lg) * -1 - 6px); top:4px; width:12px; height:12px; border-radius:50%; background:var(--teal-500); box-shadow:0 0 0 4px var(--teal-50); }
.timeline-item b{ font-family:var(--font-mono); font-size:0.85rem; color:var(--teal-600); letter-spacing:0.06em; }
.timeline-item h3{ margin-top:0.3rem; }
.timeline-item p{ color:var(--color-muted); margin-top:0.4rem; max-width:60ch; }

/* Print-safe util */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ==========================================================================
   Premium motion layer
   ========================================================================== */

/* Scroll progress bar */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:130; pointer-events:none;
}
.scroll-progress b{
  display:block; height:100%;
  background:linear-gradient(90deg, var(--teal-600), var(--teal-400));
  transform-origin:0 50%; transform:scaleX(0);
}

/* Custom magnetic cursor (desktop pointer devices only) */
html.has-cursor-fx, html.has-cursor-fx body,
html.has-cursor-fx a, html.has-cursor-fx button,
html.has-cursor-fx input, html.has-cursor-fx select, html.has-cursor-fx textarea,
html.has-cursor-fx label{ cursor:none; }
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  border-radius:50%; will-change:transform;
}
.cursor-dot{
  width:8px; height:8px; background:var(--teal-500);
}
.cursor-ring{
  width:38px; height:38px;
  border:1.5px solid rgba(15,163,150,0.5);
  transition:width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.cursor-ring.is-active{
  width:58px; height:58px;
  border-color:rgba(15,163,150,0.9);
  background:rgba(15,163,150,0.08);
}
.cursor-ring.is-pressed{ width:30px; height:30px; }
@media (pointer:coarse){ .cursor-dot, .cursor-ring{ display:none; } }

/* Kinetic slogan band — outlined industrial type, serif accent filled */
.kinetic-band{
  overflow:hidden;
  padding-block:var(--space-xl);
  border-block:1px solid var(--line);
  background:var(--white);
}
.kinetic-track{
  display:inline-flex;
  white-space:nowrap;
  will-change:transform;
  animation:kinetic-scroll 38s linear infinite;
}
.kinetic-track > span{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(3rem, 7.5vw, 6rem);
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  color:transparent;
  -webkit-text-stroke:1.5px var(--slate-300);
  padding-right:0.6em;
}
.kinetic-track > span em{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:500;
  text-transform:none;
  letter-spacing:-0.015em;
  color:var(--teal-500);
  -webkit-text-stroke:0;
}
@keyframes kinetic-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .kinetic-track{ animation:none; }
}

/* Stitch-line section divider (thread that sews itself in) */
.stitch-divider{
  max-width:var(--container-w);
  margin-inline:auto;
  padding-inline:var(--container-pad);
  height:44px;
  display:flex; align-items:center;
}
.stitch-divider svg{ width:100%; height:34px; overflow:visible; }
.stitch-divider .stitch-bg{
  fill:none; stroke:var(--line-strong); stroke-width:2;
  stroke-dasharray:9 7; stroke-linecap:round; opacity:0.6;
}
.stitch-divider .stitch-fg{
  fill:none; stroke:var(--teal-500); stroke-width:2;
  stroke-dasharray:9 7; stroke-linecap:round;
}
.stitch-divider .stitch-needle{ fill:var(--teal-600); opacity:0; }

/* Split-text words (hero + section headings) */
.hero-title .w, h2 .w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:0.14em; margin-bottom:-0.14em; }
.hero-title .wi, h2 .wi{ display:inline-block; will-change:transform; }
h2 .wi-accent{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--teal-700);
}
.cta-band h2 .wi-accent{ color:var(--teal-400); }

/* Branded preloader — cinematic title card */
html.is-loading{ overflow:hidden; }
.preloader{
  position:fixed; inset:0; z-index:9998;
  background:var(--slate-900);
  display:flex; align-items:center; justify-content:center;
}
.preloader-grain{
  position:absolute; inset:0; pointer-events:none;
  background-image:var(--grain);
  background-size:160px 160px;
  opacity:0.07; mix-blend-mode:overlay;
}
.preloader-center{
  width:min(86vw, 1080px);
  display:flex; flex-direction:column; align-items:center; gap:clamp(1rem, 3vh, 2rem);
}
.preloader-word{
  display:flex; align-items:baseline;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(3.4rem, 13vw, 8.5rem);
  line-height:1;
  letter-spacing:-0.03em;
  color:var(--white);
  text-transform:uppercase;
}
.pl-lm{ display:inline-block; overflow:hidden; padding-bottom:0.12em; margin-bottom:-0.12em; }
.pl-l{ display:inline-block; will-change:transform; }
.pl-sp{ margin-left:0.22em; }
.pl-serif{
  font-family:var(--font-serif);
  font-style:italic; font-weight:500;
  font-size:0.92em; letter-spacing:-0.01em;
  color:var(--teal-400); text-transform:none;
}
.preloader-stitch{ width:100%; height:clamp(26px, 4vh, 44px); overflow:visible; }
.preloader .pl-bg{ fill:none; stroke:rgba(255,255,255,0.14); stroke-width:2; stroke-dasharray:9 7; stroke-linecap:round; }
.preloader .pl-fg{ fill:none; stroke:var(--teal-400); stroke-width:2; stroke-dasharray:9 7; stroke-linecap:round; }
.preloader .pl-needle{ fill:var(--teal-300, #7fd6cd); opacity:0; }
.preloader-tag{
  position:absolute; bottom:clamp(1.5rem, 5vh, 3rem); left:50%; transform:translateX(-50%);
  font-family:var(--font-mono);
  font-size:0.72rem; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--slate-300); opacity:0; white-space:nowrap;
}
.preloader-count{
  position:absolute; right:clamp(1.5rem, 4vw, 3rem); bottom:clamp(1.25rem, 4.5vh, 2.75rem);
  font-family:var(--font-mono);
  font-size:clamp(1.1rem, 2vw, 1.6rem);
  color:rgba(255,255,255,0.45);
  font-variant-numeric:tabular-nums;
}
.preloader-count::after{ content:'%'; font-size:0.6em; color:var(--teal-400); margin-left:0.1em; }

/* Hero machine-series ticker */
.hero-ticker{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  border-top:1px solid rgba(255,255,255,0.12);
  overflow:hidden;
  padding-block:0.7rem;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.hero-ticker-track{
  display:inline-flex; white-space:nowrap;
  animation:kinetic-scroll 46s linear infinite;
}
.hero-ticker-track span{
  font-family:var(--font-mono);
  font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--slate-300); opacity:0.75;
  padding-right:2.5rem;
}
.hero-ticker-track span b{ color:var(--teal-400); font-weight:500; }
@media (prefers-reduced-motion: reduce){ .hero-ticker-track{ animation:none; } }

/* Card light sheen (position driven by cursor via --mx/--my) */
.category-card.has-tilt{ transform-style:preserve-3d; }
.category-card.has-tilt::after{
  content:'';
  position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.14), transparent 45%);
  opacity:0;
  transition:opacity var(--dur-base) var(--ease-out);
}
.category-card.has-tilt:hover::after{ opacity:1; }

/* Button shine sweep */
.btn-primary, .btn-dark{ position:relative; overflow:hidden; }
.btn-primary::after, .btn-dark::after{
  content:'';
  position:absolute; top:0; bottom:0; left:-80%; width:50%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,0.28), transparent);
  transform:skewX(-20deg);
  transition:left 0.55s var(--ease-out);
  pointer-events:none;
}
.btn-primary:hover::after, .btn-dark:hover::after{ left:130%; }

/* Oversized serif quote mark on testimonials */
.testi-card{ position:relative; }
.testi-card::before{
  content:'\201C';
  position:absolute; top:-0.18em; right:0.08em;
  font-family:var(--font-serif); font-style:italic; font-weight:600;
  font-size:6rem; line-height:1; color:var(--teal-100);
  pointer-events:none;
}
.testi-card > *{ position:relative; }