/* Ikonik Studio shared page system (extracted from homepage). Loaded after hub.css, before salient.css */
  /* ---------- Page-specific layout (Salient structure, Ikonik palette) ---------- */
  :root { --tint: #f0f2f6; --gutter: 20px; }
  @media (max-width: 768px) { :root { --gutter: 10px; } }
  html, body { background: var(--paper); }
  button { font-family: inherit; border: 0; background: transparent; cursor: pointer; padding: 0; color: inherit; }
  .wrap { max-width: none; margin: 0; padding: 0 calc(var(--gutter) + clamp(24px, 5vw, 72px)); }
  section.finalcta .wrap { padding: 0; }
  section { padding: 110px 0; position: relative; scroll-margin-top: 80px; }
  @media (max-width: 900px) { section { padding: 72px 0; } }

  /* Section heads */
  .sec-head { max-width: 760px; margin-bottom: 56px; }
  .sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
  .sec-head p { margin-top: 18px; font-size: 17px; line-height: 1.6; color: rgba(18,18,26,0.68); }
  .on-ink .sec-head p { color: rgba(255,255,255,0.7); }
  .on-ink h2 { color: var(--paper); }

  /* ---------- Mega menu (Salient) ---------- */
  header.header .header-nav { display: flex; align-items: center; gap: 4px !important; }
  .nav-item { position: static; }
  .nav-item .nav-top { position: relative; display: inline-block; padding: 10px 12px; font-size: 15px; font-weight: 500; color: var(--ink); }
  .nav-item .nav-top::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); }
  .nav-item:hover .nav-top::after, .nav-item:focus-within .nav-top::after { transform: scaleX(1); }
  .mega { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% - 6px); background: var(--paper); border: 1px solid rgba(18,18,26,0.08); border-radius: 20px; padding: 36px; display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr)); gap: 40px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 260ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 260ms; z-index: 200; }
  .mega::before { content: ''; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
  .nav-item:hover .mega, .nav-item:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 260ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; }
  .mega-feature { position: relative; min-height: 340px; border-radius: 14px; overflow: hidden; background-size: cover; background-position: center; padding: 36px 34px; display: flex; flex-direction: column; gap: 14px; color: var(--paper); isolation: isolate; }
  .mega-feature::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(18,18,26,0.62) 0%, rgba(74,55,236,0.25) 60%, rgba(18,18,26,0.1) 100%); transition: opacity 300ms; }
  .mega-feature .mf-title { font-size: 34px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
  .mega-feature .mf-text { font-size: 16px; line-height: 1.5; font-weight: 500; max-width: 22ch; color: rgba(255,255,255,0.92); }
  .mega-feature:hover::before { opacity: 0.8; }
  header.header .header-nav a.mega-feature, header.header .header-nav a.mega-feature * { color: var(--paper) !important; }
  .mf-hl { display: inline; background: linear-gradient(var(--lime), var(--lime)) no-repeat 0 55% / 0% 100%; padding: 0 0.14em; margin-left: -0.14em; color: var(--ink) !important; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 700ms cubic-bezier(0.16, 1, 0.3, 1) 180ms; }
  header.header .header-nav a.mega-feature .mf-hl { color: var(--ink) !important; }
  .nav-item:hover .mf-hl, .nav-item:focus-within .mf-hl { background-size: 100% 100%; }

  .mega-col { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
  .mega-col .mega-h { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 10px; }
  .mega-col a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 16px; color: rgba(18,18,26,0.78); letter-spacing: -0.01em; transition: color 180ms, transform 220ms cubic-bezier(0.16, 1, 0.3, 1); }
  .mega-col a:hover { color: var(--violet); transform: translateX(4px); }
  .bdg { font-style: normal; font-size: 12px; font-weight: 500; line-height: 1; padding: 5px 9px; border-radius: 200px; }
  .bdg.hot { background: rgba(255,122,128,0.16); color: #d9474e; }
  .bdg.new { background: rgba(74,55,236,0.10); color: var(--violet); }
  .nav-item:hover .mega-col a, .nav-item:focus-within .mega-col a { animation: megaIn 420ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .mega-col a:nth-child(3) { animation-delay: 30ms; } .mega-col a:nth-child(4) { animation-delay: 60ms; } .mega-col a:nth-child(5) { animation-delay: 90ms; } .mega-col a:nth-child(6) { animation-delay: 120ms; } .mega-col a:nth-child(7) { animation-delay: 150ms; }
  @keyframes megaIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  body::after { content: ''; position: fixed; inset: 0; background: rgba(18,18,26,0.18); z-index: 90; pointer-events: none; opacity: 0; transition: opacity 260ms ease; }
  body:has(.has-mega:hover)::after { opacity: 1; }
  @media (max-width: 1100px) { .mega { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mega-feature { display: none; } }
  @media (max-width: 900px) { .mega { display: none; } }

  /* ---------- Hero ---------- */
  section.hero.sal-hero {
    margin: 0 var(--gutter); padding: 0; border-radius: 20px; overflow: hidden;
    background: var(--violet); color: var(--paper);
    min-height: min(88vh, 900px); display: flex; align-items: center; position: relative;
  }
  .sal-hero > video { position: absolute; top: 0; right: 0; height: 100%; width: 54%; object-fit: cover; object-position: center top; pointer-events: none; z-index: 1; background: transparent; }
  .sal-hero > .dhh-img-mobile { display: none; }
  .sal-hero .hero-inner { position: relative; z-index: 5; width: 100%; padding: 96px clamp(24px, 5vw, 72px) 80px; display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 40px; align-items: end; }
  .sal-hero .hero-copy { max-width: 560px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
  .sal-hero h1 { color: var(--paper); font-family: var(--sans); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; font-size: clamp(44px, 5vw, 72px); }
  .sal-hero h1 em { color: var(--lime); font-style: normal; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.14em; }
  .sal-hero .hero-desc { color: rgba(255,255,255,0.86); font-size: 17px; line-height: 1.6; max-width: 46ch; }
  .sal-hero .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
  .sal-hero .hero-trust { display: flex; align-items: center; gap: 14px; margin-top: 12px; color: rgba(255,255,255,0.86); font-size: 15px; }
  .sal-hero .hero-trust strong { color: var(--paper); font-weight: 600; }
  .avatars { display: inline-flex; }
  .avatars span { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--violet); margin-left: -10px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--ink); }
  .avatars span:first-child { margin-left: 0; }
  .avatars span:nth-child(1) { background: var(--lime); }
  .avatars span:nth-child(2) { background: var(--coral); }
  .avatars span:nth-child(3) { background: var(--paper); }
  .avatars span:nth-child(4) { background: var(--ink); color: var(--paper); }
  .hero-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--lime); color: var(--ink); padding: 14px 26px; border-radius: 9999px; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 1; transition: background 200ms, color 200ms; }
  .hero-btn-primary:hover { background: var(--paper); }
  .hero-btn-primary svg { width: 15px; height: 15px; }
  .hero-btn-ghost { display: inline-flex; align-items: center; gap: 8px; color: var(--paper); border: 1.6px solid rgba(255,255,255,0.55); padding: 14px 26px; border-radius: 9999px; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 1; transition: background 200ms, color 200ms, border-color 200ms; }
  .hero-btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
  .sal-hero .hero-side { justify-self: end; align-self: end; display: flex; flex-direction: column; gap: 10px; max-width: 320px; }
  .sal-hero .hero-side a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-radius: 14px; background: rgba(18,18,26,0.55); color: var(--paper); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; transition: background 200ms; }
  .sal-hero .hero-side a:hover { background: var(--ink); }
  .sal-hero .hero-side a span:last-child { opacity: 0.6; }
  @media (max-width: 1100px) { .sal-hero .hero-side { display: none; } .sal-hero .hero-inner { grid-template-columns: 1fr; } }
  @media (max-width: 900px) {
    section.hero.sal-hero { min-height: 0; }
    .sal-hero > video { display: none; }
    .sal-hero > .dhh-img-mobile { display: block; position: absolute; top: 0; right: 0; height: 100%; width: 62%; object-fit: contain; object-position: 30% center; pointer-events: none; z-index: 1; }
    .sal-hero .hero-inner { padding: 72px 22px 56px; }
    .sal-hero h1 { font-size: 40px; }
    .sal-hero .hero-desc { max-width: 60%; }
  }

  /* ---------- Statement type ---------- */
  section.statement { background: var(--paper); padding: 96px 0 40px; }
  .statement-lines { display: flex; flex-direction: column; font-family: var(--sans); font-weight: 700; letter-spacing: -0.045em; line-height: 0.92; font-size: clamp(58px, 9.6vw, 148px); color: var(--ink); text-transform: uppercase; }
  .statement-lines > span { display: flex; align-items: center; gap: 0.18em; }
  .statement-lines > span:nth-child(2) { justify-content: flex-end; }
  .statement-lines > span:nth-child(3) { justify-content: center; }
  .statement-lines .mark { width: 0.55em; height: 0.55em; flex-shrink: 0; color: var(--violet); }
  .statement-lines .mark svg { width: 100%; height: 100%; }
  .statement-lines em { color: var(--violet); }

  /* ---------- Sticky media section (Salient) ---------- */
  section.sticky-feat { background: var(--paper); padding: 60px 0 40px; }
  .sf-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
  .sf-media { position: sticky; top: 96px; aspect-ratio: 4 / 4.6; max-height: calc(100vh - 120px); border-radius: 20px; overflow: hidden; }
  .sf-panel { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms ease; }
  .sf-panel.on { opacity: 1; }
  .sf-panel.violet { background: var(--violet); }
  .sf-panel.coral { background: var(--coral); }
  .sf-panel.lime { background: var(--lime); }
  .sf-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.05); transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1); }
  .sf-panel.on img { transform: scale(1); }
  
  
  .sf-copy { display: flex; flex-direction: column; }
  .sf-block { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 40px 0; }
  .sf-block .step { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(18,18,26,0.55); }
  .sf-block h2 { font-size: clamp(30px, 3vw, 44px); }
  .sf-block p { font-size: 17px; line-height: 1.65; color: rgba(18,18,26,0.72); max-width: 54ch; }
  .sf-block p strong { color: var(--ink); font-weight: 600; }
  .sf-block ul { list-style: disc; padding-left: 1.2em; margin: 6px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 16px; color: var(--ink); }
  .sf-block .lead { font-size: 20px; line-height: 1.55; color: var(--ink); max-width: 30em; letter-spacing: -0.015em; }
  .sf-block .lead strong { font-weight: 700; }
  .sf-quote { margin: 18px 0 0; padding: 34px 36px; max-width: 30em; background: var(--paper); border: 1px solid rgba(18,18,26,0.08); border-radius: 20px; display: flex; flex-direction: column; gap: 24px; }
  .sf-quote blockquote { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
  .sf-quote figcaption { display: flex; align-items: center; gap: 14px; }
  .sf-quote .av { width: 48px; height: 48px; border-radius: 50%; background: var(--coral); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; }
  .sf-quote figcaption span:last-child { display: flex; flex-direction: column; font-size: 15px; }
  .sf-quote figcaption strong { font-weight: 600; }
  .sf-quote figcaption em { font-style: normal; color: rgba(18,18,26,0.55); font-size: 14px; }
  .sf-block .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 15px; font-weight: 500; color: var(--violet); }
  .sf-block .go::after { content: '→'; }
  @media (max-width: 900px) {
    .sf-grid { grid-template-columns: 1fr; gap: 24px; }
    .sf-media { position: relative; top: auto; aspect-ratio: 4 / 3; max-height: none; }
    .sf-block { min-height: 0; padding: 32px 0; }
    .sf-mobile-img { display: block; }
  }

  /* ---------- Services bento ---------- */
  section.bento { padding-top: 20px; }
  .btn-primary { background: var(--ink); color: var(--paper); }
  .btn-primary:hover { background: var(--violet); color: var(--paper); }
  .btn-lime { background: var(--lime); color: var(--ink); }
  .btn-lime:hover { background: var(--paper); color: var(--ink); }
  .bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .bcard { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 52px 40px 0; border-radius: 20px; background: var(--paper); color: var(--ink); overflow: hidden; min-height: 440px; transition: background 200ms; }
  .bcard .tag { align-self: flex-start; font-size: 12px; font-weight: 500; letter-spacing: 0.01em; padding: 6px 11px; border-radius: 200px; background: rgba(74,55,236,0.10); color: var(--violet); line-height: 1; margin-bottom: 6px; }
  .bcard h3 { font-family: var(--sans); font-weight: 600; font-size: 22px; letter-spacing: -0.025em; line-height: 1.2; }
  .bcard p { font-size: 15.5px; line-height: 1.55; color: rgba(18,18,26,0.68); }
  .bcard .go { margin-top: 4px; }
  .bcard figure { margin: auto -40px 0; padding: 20px 0 0; width: auto; }
  .bcard figure img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: center; border-radius: 0; display: block; }
  .bcard.violet { background: #5134f2; color: var(--paper); }
  .bcard.violet p { color: rgba(255,255,255,0.78); }
  .bcard.violet .tag { background: rgba(255,255,255,0.14); color: var(--paper); }
  .bcard.violet h3, .bcard.violet .go { color: var(--paper); }
  .bcard.lime { background: #c8fa50; }
  .bcard.lime .tag { background: rgba(18,18,26,0.10); color: var(--ink); }
  .bcard.lime p { color: rgba(18,18,26,0.7); }
  .bcard.ink { background: #0b0b13; color: var(--paper); grid-column: 1 / -1; min-height: 560px; padding: 0; flex-direction: row; align-items: stretch; }
  .bcard.ink .ink-copy { flex: 1 1 48%; padding: 88px 64px; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
  .bcard.ink .tag { background: rgba(201,255,61,0.14); color: var(--lime); }
  .bcard.ink h3 { color: var(--paper); font-size: 28px; }
  .bcard.ink p { color: rgba(255,255,255,0.74); max-width: 52ch; }
  .bcard.ink .go { color: var(--lime); }
  .bcard.ink .ink-list { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; margin-top: 18px; }
  .bcard.ink .ink-list div { display: flex; flex-direction: column; gap: 6px; white-space: nowrap; font-size: 14px; color: rgba(255,255,255,0.68); }
  .bcard.ink .ink-list strong { color: var(--paper); font-weight: 500; font-size: 15px; }
  .bcard.ink .ink-media { flex: 1 1 52%; min-height: 460px; position: relative; padding: 0; background: #0b0b13; }
  .bcard.ink .ink-media img { position: absolute; inset: 40px 40px 40px 0; width: calc(100% - 40px); height: calc(100% - 80px); object-fit: contain; object-position: center; display: block; }
  .bcard.ink:hover { background: #0b0b13; }
  .bcard:hover { background: var(--paper); }
  .bcard figure video { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
  .bcard figure img { }
  .bcard.violet:hover { background: #5134f2; }
  .bcard.lime:hover { background: #c8fa50; }
  .bcard .go { display: none; }
  .bcard .go::after { content: '→'; }
  .bcard.lime .go { color: var(--ink); }
  .tag-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 56px; }
  .tag-row a { padding: 10px 16px; border-radius: 200px; background: var(--paper); border: 1px solid rgba(18,18,26,0.08); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); transition: background 200ms, color 200ms, border-color 200ms; }
  .tag-row a:hover { background: var(--violet); color: var(--paper); border-color: var(--violet); }
  .bento-cta { text-align: center; margin-top: 40px; }
  @media (max-width: 1000px) { .bento-grid { grid-template-columns: 1fr 1fr; } .bcard.ink { flex-direction: column; } .bcard.ink .ink-media { min-height: 280px; } }
  @media (max-width: 600px) { .bento-grid { grid-template-columns: 1fr; } .bcard { min-height: 0; } }

  /* Duo row (Salient help-center / importer pair) */
  .duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; }
  .duo { position: relative; border-radius: 20px; overflow: hidden; min-height: 560px; display: flex; flex-direction: column; color: var(--ink); background: var(--paper); }
  .duo .duo-copy { position: relative; z-index: 2; padding: 64px 64px 0; max-width: 540px; display: flex; flex-direction: column; gap: 14px; }
  .duo h3 { font-size: clamp(26px, 2.4vw, 36px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; }
  .duo p { font-size: 16px; line-height: 1.6; color: rgba(18,18,26,0.72); }
  .duo .go { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--violet); margin-top: 4px; }
  .duo .go::after { content: '→'; }
  .duo.cut img { order: 2; display: block; width: 100%; height: auto; margin-top: auto; padding-top: 28px; }
  .duo.cut .duo-copy { order: 1; }
  .duo.photo { color: var(--paper); }
  .duo.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1); }
  .duo.photo::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(160deg, rgba(18,18,26,0.45) 0%, rgba(18,18,26,0) 55%); }
  .duo.photo h3 { color: var(--paper); }
  .duo.photo p { color: rgba(255,255,255,0.86); }
  .duo.photo .go { color: var(--lime); }
  .duo.photo:hover img { transform: scale(1.03); }
  @media (max-width: 900px) { .duo-grid { grid-template-columns: 1fr; } .duo { min-height: 460px; } .duo .duo-copy { padding: 40px 32px 0; } }

  /* ---------- Parallax band ---------- */
  .parallax-band { height: 60vh; min-height: 420px; margin: var(--gutter); border-radius: 20px; overflow: hidden; background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; background-color: var(--violet); }
  @media (max-width: 900px) { .parallax-band { background-attachment: scroll; height: 42vh; min-height: 300px; } }

  /* ---------- Work (Salient "Demos" layout) ---------- */
  /* Outlined scrolling marquee (Salient "DEMOS" strip) */
  .marquee { overflow: hidden; margin: 0 0 72px; white-space: nowrap; }
  .marquee-track { display: inline-flex; gap: 0.35em; animation: marquee 34s linear infinite; will-change: transform; }
  .marquee-track span { font-family: var(--sans); font-weight: 600; font-size: clamp(72px, 10vw, 150px); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px var(--paper); padding-right: 0.35em; }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
  section.demos { padding-top: 90px; }
  section.demos { background: var(--ink); color: var(--paper); }
  .demos-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 64px; flex-wrap: wrap; }
  .demos-head h2 { color: var(--paper); max-width: 640px; }
  .demos-head h2 em { color: var(--lime); }
  .demos-head p { color: rgba(255,255,255,0.7); max-width: 40ch; font-size: 17px; line-height: 1.6; }
  .demos-layout { display: grid; grid-template-columns: 200px 1fr; gap: 48px; align-items: start; }
  .demos-filter { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 4px; }
  .demos-filter .lbl { font-size: 15px; font-weight: 500; color: var(--paper); margin-bottom: 10px; }
  .demos-filter button { display: flex; align-items: center; gap: 10px; padding: 7px 0; background: transparent; border: 0; font-size: 15px; color: rgba(255,255,255,0.72); text-align: left; letter-spacing: -0.01em; transition: color 160ms; }
  .demos-filter button::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 1.4px solid rgba(255,255,255,0.45); flex-shrink: 0; transition: background 160ms, border-color 160ms; }
  .demos-filter button.active { color: var(--paper); }
  .demos-filter button.active::before { background: var(--lime); border-color: var(--lime); }
  .demos-filter button:hover { color: var(--paper); }
  .demos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 28px; }
  .demo { display: flex; flex-direction: column; gap: 14px; color: var(--paper); }
  .demo.hidden { display: none; }
  .demo .shot { position: relative; aspect-ratio: 16/10; border-radius: 15px; overflow: hidden; background: #1c1c26; border: 1px solid rgba(255,255,255,0.08); }
  .demo .shot iframe { width: 1400px; height: 875px; border: 0; display: block; position: absolute; top: 0; left: 0; transform-origin: top left; pointer-events: none; }
  .demo .shot.soon { display: flex; align-items: center; justify-content: center; text-align: center; padding: 32px; background: var(--violet); }
  .demo .shot.soon span { font-size: clamp(24px, 2.6vw, 36px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; color: var(--paper); }
  .demo .shot.soon span em { color: var(--lime); }
  .demo .shot.soon.coral { background: var(--coral); }
  .demo .shot.soon.coral span, .demo .shot.soon.coral span em { color: var(--ink); }
  .demo .shot.cover { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 32px; border: 0; }
  .demo .shot.cover .cv-name { font-size: clamp(28px, 3vw, 44px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
  .demo .shot.cover .cv-url { font-size: 13px; opacity: 0.7; }
  .demo .shot.cover.violet { background: var(--violet); color: var(--paper); }
  .demo .shot.cover.coral { background: var(--coral); color: var(--ink); }
  .demo .shot.cover.lime { background: var(--lime); color: var(--ink); }
  .demo .shot.cover.ink { background: #22222e; color: var(--paper); }
  .demo .shot.cover.tint { background: var(--tint); color: var(--ink); }
  /* Salient-style hover: dim cover, animated title underline, cursor-following "View" circle */
  .demo .shot { transition: filter 300ms ease; }
  .demo:hover .shot { filter: brightness(0.82); }
  .demo h3 { display: inline; align-self: flex-start; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 4px; transition: background-size 450ms cubic-bezier(0.16, 1, 0.3, 1); }
  .demo:hover h3 { background-size: 100% 2px; }
  .view-cursor { position: fixed; top: 0; left: 0; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; background: rgba(18,18,26,0.82); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; pointer-events: none; z-index: 60; transform: scale(0); transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .view-cursor.on { transform: scale(1); }
  @media (hover: none) { .view-cursor { display: none; } }
  .demo .shot .hover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(18,18,26,0.55); opacity: 0; transition: opacity 200ms; }
  .demo .shot .hover span { padding: 12px 22px; border-radius: 9999px; background: var(--lime); color: var(--ink); font-size: 14px; font-weight: 500; }
  .demo:hover .shot .hover { opacity: 1; }
  .demo h3 { color: var(--paper); font-size: 25px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; }
  .demo .tags { display: flex; gap: 12px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
  .demos-more { text-align: center; margin-top: 64px; }
  @media (max-width: 900px) { .demos-layout { grid-template-columns: 1fr; gap: 28px; } .demos-filter { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px 18px; } .demos-filter .lbl { width: 100%; margin-bottom: 4px; } .demos-grid { grid-template-columns: 1fr; gap: 36px; } }

  /* ---------- Showcase block (photo bg + rising site mockup) ---------- */
  section.showcase { margin: 0 var(--gutter); border-radius: 20px; overflow: hidden; position: relative; background: var(--violet) url('../ecom-bg.jpg') center/cover no-repeat; color: var(--paper); padding: 110px clamp(24px, 5vw, 72px) 0; min-height: 780px; text-align: center; isolation: isolate; }
  section.showcase::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(74,55,236,0.35) 0%, rgba(18,18,26,0.15) 100%); z-index: -1; }
  .showcase-head { max-width: 680px; margin: 0 auto 64px; }
  .showcase-head h2 { color: var(--paper); font-size: clamp(30px, 3vw, 44px); }
  .showcase-head p { color: rgba(255,255,255,0.88); font-size: 17px; line-height: 1.6; margin-top: 16px; }
  .showcase-head .btn { margin-top: 30px; background: var(--ink); color: var(--paper); }
  .showcase-head .btn:hover { background: var(--lime); color: var(--ink); }
  .showcase-stage { position: relative; max-width: 1040px; margin: 0 auto; }
  .showcase-frame { position: relative; aspect-ratio: 16 / 9.4; border-radius: 16px 16px 0 0; overflow: hidden; background: #1c1c26; }
  .showcase-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
  .showcase-card { position: absolute; right: -40px; bottom: -20px; width: 260px; text-align: left; background: var(--paper); color: var(--ink); border-radius: 16px; padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 14px; }
  .showcase-card .t { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; display: flex; justify-content: space-between; align-items: center; }
  .showcase-card .t span:last-child { font-size: 11px; font-weight: 400; color: rgba(18,18,26,0.5); border: 1px solid rgba(18,18,26,0.12); border-radius: 200px; padding: 4px 8px; }
  .showcase-card .row { display: flex; flex-direction: column; gap: 2px; }
  .showcase-card .row small { font-size: 12px; color: rgba(18,18,26,0.55); }
  .showcase-card .row strong { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; display: flex; justify-content: space-between; }
  .showcase-card .row strong em { font-size: 13px; color: var(--violet); }
  .showcase-card .spark { display: flex; align-items: flex-end; gap: 5px; height: 42px; }
  .showcase-card .spark i { flex: 1; background: rgba(74,55,236,0.18); border-radius: 3px 3px 0 0; }
  .showcase-card .spark i:nth-child(n+6) { background: var(--violet); }
  @media (max-width: 900px) { section.showcase { padding-top: 72px; min-height: 0; } .showcase-card { display: none; } .showcase-head { margin-bottom: 40px; } }

  /* ---------- Trusted + approach ---------- */
  .flow { position: relative; background: var(--tint); overflow: hidden; isolation: isolate; }
  .flow::before, .flow::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; filter: blur(90px); pointer-events: none; }
  .flow::before { width: 58vw; height: 34vw; left: 38vw; top: 2vw; background: radial-gradient(closest-side, rgba(255,122,128,0.62), rgba(255,122,128,0.25) 55%, transparent 100%); }
  .flow::after { width: 60vw; height: 16vw; left: -6vw; top: 14vw; background: radial-gradient(closest-side, rgba(255,122,128,0.28), rgba(255,122,128,0.08) 60%, transparent 100%); }
  .flow > section { background: transparent !important; }
  section.trusted { text-align: center; padding-bottom: 20px; }
  section.trusted .wrap { position: relative; }
  .trusted-big { font-family: var(--sans); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; font-size: clamp(48px, 6.6vw, 96px); color: var(--ink); margin: 40px auto 110px; }
  .trusted-big .rot { display: block; color: var(--ink); min-height: 1.25em; }
  .trusted-big .rot span { display: none; }
  .trusted-big .rot span.on { display: inline; }
  .approach-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: left; }
  .approach-item { background: var(--tint); border-radius: 20px; padding: 34px 30px 36px; display: flex; flex-direction: column; gap: 14px; }
  .approach-item .num { width: 44px; height: 44px; border-radius: 50%; background: var(--violet); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; }
  .approach-item:nth-child(2) .num { background: var(--coral); color: var(--ink); }
  .approach-item:nth-child(3) .num { background: var(--lime); color: var(--ink); }
  .approach-item h4 { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; }
  .approach-item p { color: rgba(18,18,26,0.68); font-size: 15.5px; line-height: 1.55; }
  .approach-cta { margin-top: 36px; }
  @media (max-width: 900px) { .approach-list { grid-template-columns: 1fr; } }

  /* ---------- Testimonials ---------- */
  section.testi { background: var(--lime); margin: 0 var(--gutter); border-radius: 20px; overflow: hidden; }
  section.testi .wrap { padding: 0 clamp(24px, 5vw, 72px); }
  .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .testi-card { background: var(--paper); color: var(--ink); border-radius: 20px; padding: 32px 30px; display: flex; flex-direction: column; gap: 22px; }
  .testi-stars { display: flex; gap: 3px; color: var(--violet); }
  .testi-stars svg { width: 16px; height: 16px; }
  .testi-quote { font-size: 18px; line-height: 1.45; font-weight: 500; letter-spacing: -0.02em; }
  .testi-person { display: flex; align-items: center; gap: 12px; margin-top: auto; }
  .testi-person .av { width: 42px; height: 42px; border-radius: 50%; background: var(--coral); display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 14px; color: var(--ink); }
  .testi-person .n { font-weight: 600; font-size: 14px; }
  .testi-person .r { font-size: 13px; color: rgba(18,18,26,0.6); }
  section.testi .sec-head p { color: rgba(18,18,26,0.7); }
  section.testi .kicker { background: rgba(18,18,26,0.10); color: var(--ink); }
  .testi-grid2 { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
  .testi-side h2 { font-size: clamp(36px, 3.8vw, 58px); }
  .testi-side h2 em { color: var(--violet); }
  .testi-rating { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 15px; font-weight: 500; color: rgba(18,18,26,0.75); }
  .testi-rating .stars { color: var(--ink); letter-spacing: 2px; font-size: 16px; }
  .testi-nav { display: flex; align-items: center; gap: 16px; margin-top: 44px; }
  .tn { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--ink) !important; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); transition: background 200ms, color 200ms; }
  .tn svg { width: 18px; height: 18px; }
  .tn:hover { background: var(--ink); color: var(--lime); }
  .tcount { font-size: 15px; font-weight: 500; color: rgba(18,18,26,0.6); min-width: 64px; text-align: center; }
  .tcount b { color: var(--ink); font-weight: 600; }
  .testi-stage { position: relative; background: var(--paper); border-radius: 20px; padding: clamp(40px, 5vw, 72px); min-height: 420px; display: grid; }
  .tq { grid-area: 1 / 1; margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; opacity: 0; transform: translateY(14px); transition: opacity 500ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; }
  .tq.on { opacity: 1; transform: none; pointer-events: auto; }
  .tq blockquote { margin: 0; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.22; font-weight: 600; letter-spacing: -0.035em; color: var(--ink); }
  .tq figcaption { display: flex; align-items: center; gap: 16px; }
  .tq .av { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; flex-shrink: 0; }
  .tq .av.coral { background: var(--coral); color: var(--ink); }
  .tq .av.violet { background: var(--violet); color: var(--paper); }
  .tq .av.ink { background: var(--ink); color: var(--lime); }
  .tq figcaption span:last-child { display: flex; flex-direction: column; font-size: 16px; }
  .tq figcaption strong { font-weight: 600; }
  .tq figcaption em { font-style: normal; color: rgba(18,18,26,0.55); font-size: 15px; }
  .tbar { position: absolute; left: clamp(40px, 5vw, 72px); right: clamp(40px, 5vw, 72px); bottom: 28px; height: 2px; background: rgba(18,18,26,0.08); border-radius: 2px; overflow: hidden; }
  .tbar i { display: block; height: 100%; width: 0; background: var(--violet); }
  .tbar i.run { animation: tfill 7s linear forwards; }
  @keyframes tfill { to { width: 100%; } }
  @media (max-width: 900px) { .testi-grid2 { grid-template-columns: 1fr; } .testi-stage { min-height: 380px; } }


  /* ---------- FAQ ---------- */
  section.faq { background: var(--paper); }
  .faq-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; align-items: start; }
  .faq-head { position: sticky; top: 110px; }
  .faq-head p { color: rgba(18,18,26,0.68); font-size: 17px; line-height: 1.6; max-width: 40ch; margin-top: 18px; }
  .faq-head .btn { margin-top: 28px; }
  .faq-list { display: flex; flex-direction: column; gap: 10px; }
  .faq-item { background: var(--paper) !important; border: 1px solid rgba(18,18,26,0.10) !important; border-radius: 15px; padding: 22px 26px; transition: border-color 200ms; }
  .faq-item:hover, .faq-item[open] { border-color: rgba(74,55,236,0.45) !important; }
  .faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; list-style: none; cursor: pointer; font-weight: 600; font-size: 19px; letter-spacing: -0.02em; line-height: 1.3; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after { content: none !important; display: none !important; }
  .faq-item .toggle { width: 30px; height: 30px; border-radius: 50%; background: var(--tint); color: var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 200ms, background 200ms, color 200ms; }
  .faq-item[open] .toggle { transform: rotate(45deg); background: var(--violet); color: var(--paper); }
  .faq-item .toggle svg { width: 13px; height: 13px; }
  .faq-item .a { margin-top: 14px; color: rgba(18,18,26,0.7); font-size: 16px; line-height: 1.6; max-width: 62ch; }
  @media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; gap: 32px; } .faq-head { position: static; } }

  /* ---------- Footer (Salient: simple dark block) ---------- */
  footer.foot { background: var(--ink); color: var(--paper); padding: 110px 0 0; }
  .foot-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: start; padding-bottom: 88px; }
  .foot-left h2 { color: var(--paper); font-size: clamp(40px, 4.6vw, 68px); line-height: 1.02; }
  .foot-btn { display: inline-flex; align-items: center; padding: 15px 28px; margin-top: 40px; border-radius: 9999px; background: var(--violet); color: var(--paper); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 1; transition: background 200ms, color 200ms; }
  .foot-btn:hover { background: var(--lime); color: var(--ink); }
  .foot-right { padding-top: 10px; }
  .foot-right h3 { color: var(--paper); font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; max-width: none; white-space: nowrap; }
  .foot-form { display: flex; align-items: center; margin-top: 34px; border-bottom: 1px solid rgba(255,255,255,0.35); padding-bottom: 12px; max-width: 520px; }
  .foot-form input[type="email"] { flex: 1; background: transparent; border: 0; outline: 0; color: var(--paper); font-size: 15px; font-family: inherit; padding: 6px 0; }
  .foot-form input::placeholder { color: rgba(255,255,255,0.55); }
  .foot-form button { color: var(--paper); font-size: 20px; line-height: 1; padding: 0 4px; }
  .foot-form button:hover { color: var(--lime); }
  .foot-social { display: flex; gap: 10px; margin-top: 44px; }
  .foot-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.28); display: inline-flex; align-items: center; justify-content: center; color: var(--paper); transition: background 200ms, color 200ms, border-color 200ms; }
  .foot-social a svg { width: 15px; height: 15px; }
  .foot-social a:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
  .foot-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 28px; font-size: 14px; color: rgba(255,255,255,0.85); }
  .foot-bar span { color: rgba(255,255,255,0.5); }
  .foot-bar nav { display: flex; gap: 24px; flex-wrap: wrap; }
  .foot-bar nav a { color: rgba(255,255,255,0.85); border-bottom: 1px solid rgba(255,255,255,0.25); padding-bottom: 2px; }
  .foot-bar nav a:hover { color: var(--lime); border-color: var(--lime); }
  footer.foot { position: relative; overflow: hidden; isolation: isolate; margin: 0 var(--gutter) var(--gutter); border-radius: 20px; }
  footer.foot::before, footer.foot::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; filter: blur(100px); pointer-events: none; }
  footer.foot::before { width: 50vw; height: 30vw; right: -10vw; top: -8vw; background: radial-gradient(closest-side, rgba(74,55,236,0.55), transparent); }
  footer.foot::after { width: 40vw; height: 24vw; left: -12vw; bottom: 6vw; background: radial-gradient(closest-side, rgba(255,122,128,0.28), transparent); }
  footer.foot .wrap { padding-left: clamp(24px, 5vw, 72px); padding-right: clamp(24px, 5vw, 72px); }
  .foot-left h2 em { color: var(--lime); }
  .foot-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 40px; padding-top: 56px; padding-bottom: 72px; border-top: 1px solid rgba(255,255,255,0.10); }
  .fl-col { display: flex; flex-direction: column; gap: 10px; }
  .fl-h { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.5); margin-bottom: 6px; }
  .fl-col a { font-size: 16px; color: var(--paper); align-self: flex-start; transition: color 180ms, transform 220ms cubic-bezier(0.16, 1, 0.3, 1); }
  .fl-col a:hover { color: var(--lime); transform: translateX(3px); }
  .fl-contact a { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
  .fl-contact p { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.6); margin-top: 6px; }
  .foot-mark { font-weight: 700; letter-spacing: -0.06em; line-height: 0.78; font-size: 17.2vw; white-space: nowrap; text-align: center; color: rgba(255,255,255,0.06); margin: -3vw 0 1.2vw; user-select: none; transition: color 600ms ease; }
  .foot-mark em { color: rgba(201,255,61,0.35); font-style: normal; }
  footer.foot:hover .foot-mark { color: rgba(255,255,255,0.09); }
  .foot-bar { position: relative; border-top: 0 !important; }
  .foot-links { border-top: 0 !important; }
  @media (max-width: 900px) { .foot-links { grid-template-columns: 1fr 1fr; } .fl-contact { grid-column: 1 / -1; } }
  @media (max-width: 900px) { footer.foot { padding-top: 72px; } .foot-grid { grid-template-columns: 1fr; gap: 48px; padding-bottom: 60px; } }

  div.parallax-band, section.showcase, section.testi { margin: var(--gutter) !important; }
  section.hero.sal-hero { margin-bottom: var(--gutter) !important; }

  /* No sub-headings / labels above headings (Salient) */
  body .bcard .tag, body .sf-block .step, body .kicker, body span.kicker { display: none !important; }

  /* ---------- Two heading sizes only ---------- */
  /* Salient scale @1400px: hero 63, section 38, card 23, display 76 */
  :root { --h-lg: clamp(28px, 3.2vw, 50px); --h-sm: clamp(20px, 1.65vw, 24px); --h-hero: clamp(46px, 5.8vw, 92px); --h-display: clamp(44px, 5.4vw, 82px); }
  body .sal-hero h1, body .statement-lines, body .trusted-big, body main h2, body section h2, body footer h2 {
    font-size: var(--h-lg) !important; line-height: 1.2 !important; letter-spacing: -0.035em !important; font-weight: 500 !important;
  }
  body .sal-hero h1 { font-weight: 600 !important; font-size: var(--h-hero) !important; line-height: 1.04 !important; letter-spacing: -0.04em !important; }
  body .trusted-big { font-weight: 600 !important; font-size: clamp(44px, 6.6vw, 110px) !important; line-height: 1 !important; letter-spacing: -0.03em !important; text-transform: uppercase; color: transparent !important; -webkit-text-stroke: 1.5px var(--ink); }
  body .trusted-big .rot { color: transparent !important; min-height: 1.05em !important; }
  body .faq-item summary { font-size: clamp(17px, 1.3vw, 19px) !important; font-weight: 500 !important; letter-spacing: -0.015em !important; line-height: 1.4 !important; }
  body section h3, body section h4, body footer h3, body .demo .shot.cover .cv-name, body .tq blockquote, body .mega-feature .mf-title {
    font-size: var(--h-sm) !important; line-height: 1.25 !important; letter-spacing: -0.03em !important; font-weight: 600 !important;
  }
  body .statement-lines { font-weight: 600 !important; font-size: clamp(58px, 9.6vw, 148px) !important; line-height: 0.92 !important; letter-spacing: -0.045em !important; }
  body .trusted-big { margin-bottom: 90px !important; }

  /* ---------- One spacing rhythm ---------- */
  :root { --sgap: 44px; --spad: clamp(88px, 8vw, 120px); --inset: clamp(24px, 5vw, 72px); }
  @media (max-width: 900px) { :root { --sgap: 20px; --spad: 64px; } }
  /* every coloured block is an inset rounded tile, same gap above and below */
  body .sal-hero, body div.parallax-band, body section.demos, body section.showcase, body .flow, body section.testi, body footer.foot {
    margin: var(--sgap) var(--gutter) !important; border-radius: 20px !important; overflow: hidden !important;
  }
  body section.hero.sal-hero { margin: 0 var(--gutter) var(--sgap) !important; }
  body footer.foot { margin-bottom: var(--gutter) !important; }
  /* inside tiles: same padding top and bottom, content aligned to the hero copy */
  body section.demos, body section.testi { padding: var(--spad) 0 !important; }
  body section.showcase { padding-top: var(--spad) !important; }
  body .flow section.trusted { padding: var(--spad) 0 0 !important; }
  body .flow section.bento { padding: 0 0 var(--spad) !important; }
  body footer.foot { padding-top: var(--spad) !important; }
  body section.demos .wrap, body .flow .wrap, body section.testi .wrap, body footer.foot .wrap { padding-left: var(--inset) !important; padding-right: var(--inset) !important; }
  /* white sections: half padding each side so white-to-white equals one full gap */
  body section.statement, body section.sticky-feat, body section.faq { padding: calc(var(--spad) / 2) 0 !important; }
  body .demos .marquee { margin-top: calc(var(--spad) * -0.35); }

  /* ---------- Highlight statement ---------- */
  section.hl-statement { background: #efedfd; margin: var(--sgap) var(--gutter) !important; border-radius: 20px; padding: var(--spad) 0 !important; }
  section.hl-statement .wrap { padding-left: var(--inset) !important; padding-right: var(--inset) !important; }
  .hl-text { margin: 0; max-width: 24em; font-size: clamp(28px, 3.2vw, 50px); line-height: 1.32; font-weight: 500; letter-spacing: -0.035em; color: var(--ink); text-indent: 2.4em; }
  .hl-text mark { color: inherit; background: linear-gradient(#cdc6fb, #cdc6fb) no-repeat 0 55% / 0% 100%; padding: 0 0.12em; margin: 0 -0.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1100ms cubic-bezier(0.16, 1, 0.3, 1); }
  .hl-text.in mark { background-size: 100% 100%; }
  .hl-text.in mark:nth-of-type(2) { transition-delay: 250ms; }
  .hl-text.in mark:nth-of-type(3) { transition-delay: 500ms; }
  @media (prefers-reduced-motion: reduce) { .hl-text mark { background-size: 100% 100%; transition: none; } }

  body .bcard.ink .ink-copy h3 { font-size: clamp(34px, 3.6vw, 58px) !important; font-weight: 600 !important; line-height: 1.02 !important; letter-spacing: -0.03em !important; text-transform: uppercase; color: transparent !important; -webkit-text-stroke: 1.2px var(--paper); }
  /* ---------- Heading highlight bars ---------- */
  mark.hl { color: inherit; background: linear-gradient(var(--hlc, #cdc6fb), var(--hlc, #cdc6fb)) no-repeat 0 55% / 0% 100%; padding: 0 0.12em; margin: 0 -0.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1000ms cubic-bezier(0.16, 1, 0.3, 1) 150ms; }
  mark.hl.on { background-size: 100% 100%; }
  section.demos mark.hl, footer.foot mark.hl { --hlc: var(--violet); color: var(--paper); }
  section.showcase mark.hl, .sal-hero mark.hl, .svc-hero mark.hl { --hlc: var(--lime); color: var(--ink) !important; text-decoration: none !important; }
  section.showcase mark.hl { color: var(--ink) !important; }
  section.testi mark.hl { --hlc: var(--paper); }
  @media (prefers-reduced-motion: reduce) { mark.hl { background-size: 100% 100%; transition: none; } }

  /* ---------- Reveal ---------- */
  .rvl { opacity: 0; transform: translateY(18px); transition: opacity 600ms ease, transform 600ms ease; }
  .rvl.in { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) { .rvl { opacity: 1; transform: none; transition: none; } }

body .faq-item summary { font-size: clamp(17px, 1.3vw, 19px) !important; font-weight: 500 !important; letter-spacing: -0.015em !important; line-height: 1.4 !important; }

/* List card styled like the strategy card: dark, outlined uppercase heading */
.duo.list-card.dark { background: #0b0b13 !important; color: var(--paper); }
body .duo.list-card.dark h3 { font-size: clamp(34px, 3.6vw, 58px) !important; font-weight: 600 !important; line-height: 1.02 !important; letter-spacing: -0.03em !important; text-transform: uppercase; color: transparent !important; -webkit-text-stroke: 1.2px var(--paper); margin-bottom: 14px; }
.duo.list-card.dark li { color: rgba(255,255,255,0.88); }
.duo.list-card.dark li::before { background-color: var(--lime) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312121a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") !important; }

/* Card title underline on hover (same as work tiles) */
.inc h3, .sc-card h3, .st-card h3, .inc-rows-list .row h3, .loc h3, .svc-card h3, .bcard h3, .m-card .val, .duo h3, .tl-step h3 { display: inline; align-self: flex-start; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 3px; transition: background-size 450ms cubic-bezier(0.16, 1, 0.3, 1); }
.inc:hover h3, .sc-card:hover h3, .st-card:hover h3, .inc-rows-list .row:hover h3, .loc:hover h3, .svc-card:hover h3, .bcard:hover h3, .m-card:hover .val, .duo:hover h3, .tl-step:hover h3 { background-size: 100% 2px; }
body .duo.list-card.dark h3 { background-image: none; }

/* More breathing room in list cards */
.duo.list-card ul { gap: 18px !important; }
.duo.list-card li { line-height: 1.6 !important; }
.duo.list-card li::before { margin-top: 3px !important; }

/* Locations on a photo tile (like the ecommerce showcase) */
body section.locs { margin: var(--sgap) var(--gutter) !important; border-radius: 20px; overflow: hidden; position: relative; isolation: isolate; background: #3a2bd0 url('../ecom-bg.jpg') center / cover no-repeat; padding: var(--spad) 0 !important; color: var(--paper); }
body section.locs::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(58,43,208,0.35) 0%, rgba(18,18,26,0.25) 100%); }
body section.locs .wrap { padding-left: var(--inset) !important; padding-right: var(--inset) !important; }
body section.locs h2 { color: var(--paper) !important; }
body section.locs mark.hl { --hlc: var(--lime); color: var(--ink) !important; }
body section.locs .loc-head p { color: rgba(255,255,255,0.86); }
body section.locs .loc { background: rgba(255,255,255,0.96); border-color: transparent; }
body section.locs .loc:hover { border-color: var(--lime); }

/* Stronger text scrim on photo duo cards */
.duo.photo::before { background: linear-gradient(155deg, rgba(18,18,26,0.78) 0%, rgba(18,18,26,0.45) 45%, rgba(18,18,26,0) 75%) !important; }

/* Mega menu feature titles: outlined uppercase like the Built for cards; lighter image fade */
header.header .header-nav a.mega-feature .mf-title, header.header .header-nav a.mega-feature .mf-title .mf-hl { font-size: clamp(34px, 2.8vw, 46px) !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: -0.03em !important; text-transform: uppercase; color: transparent !important; -webkit-text-stroke: 1.2px var(--paper); background: none !important; padding: 0 !important; margin: 0 !important; }
header.header .header-nav a.mega-feature::before { background: linear-gradient(170deg, rgba(18,18,26,0.34) 0%, rgba(18,18,26,0.08) 45%, rgba(18,18,26,0) 70%) !important; }
header.header .header-nav a.mega-feature .mf-text { text-shadow: 0 1px 12px rgba(18,18,26,0.35); }

/* Related-services heading styled like "Trusted by": big outlined uppercase, centred */
.related .rel-head { text-align: center; margin: 0 auto 64px !important; max-width: 1100px; }
body .related .rel-head h2 { font-size: clamp(40px, 5.2vw, 88px) !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: -0.03em !important; text-transform: uppercase; color: transparent !important; -webkit-text-stroke: 1.5px var(--ink); text-wrap: balance; }
body .related .rel-head h2 mark.hl { background: none !important; color: transparent !important; padding: 0; margin: 0; }

/* Taller related-services tile */
body .related-flow section.bento.related { padding-bottom: calc(var(--spad) * 1.5) !important; }
body .related-flow section.bento.related > .wrap { padding-top: calc(var(--spad) * 1.5) !important; }
.related .rel-head { margin-bottom: 96px !important; }

/* Location card links: wrap long anchor text inside the card */
.loc .go { white-space: normal !important; display: block !important; line-height: 1.4 !important; font-size: 14.5px !important; max-width: 100%; overflow-wrap: anywhere; }
.loc .go::after { content: ' →' !important; }
.loc { min-width: 0; }

/* Dark timeline tile: same glow as the footer */
body section.timeline { position: relative; overflow: hidden !important; isolation: isolate; }
body section.timeline::before, body section.timeline::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; filter: blur(100px); pointer-events: none; }
body section.timeline::before { width: 50vw; height: 30vw; right: -10vw; top: -8vw; background: radial-gradient(closest-side, rgba(74,55,236,0.55), transparent); }
body section.timeline::after { width: 40vw; height: 24vw; left: -12vw; bottom: -4vw; background: radial-gradient(closest-side, rgba(255,122,128,0.28), transparent); }

/* Solid colour text card (replaces photo in service "approach" card) */
.duo.solid { background: var(--violet); color: var(--paper); justify-content: center; }
.duo.solid .duo-copy { padding-bottom: 64px; max-width: none; }
body .duo.solid h3 { color: var(--paper) !important; }
.duo.solid p { color: rgba(255,255,255,0.86); font-size: 17px; line-height: 1.65; }
.duo.solid .go { color: var(--lime); }

/* Timeline steps: aligned titles and copy */
.tl-grid { align-items: start; }
.tl-step { display: flex; flex-direction: column; }
body .tl-step h3 { display: flex !important; align-items: flex-end; min-height: 2.5em; background-image: none !important; padding-bottom: 0 !important; margin: 0 !important; text-wrap: balance; }
.tl-step p { margin-top: 16px !important; }
.tl-step .big { margin-bottom: 32px !important; }

/* Approach card: one big statement + pills instead of a long paragraph */
.duo.solid .big-lead { font-size: clamp(24px, 2.2vw, 34px) !important; line-height: 1.3 !important; font-weight: 500; letter-spacing: -0.03em; color: var(--paper) !important; max-width: 20em; }
.duo.solid .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.duo.solid .pills span { padding: 10px 16px; border-radius: 200px; background: rgba(255,255,255,0.14); font-size: 14px; font-weight: 500; color: var(--paper); }
.duo.solid .pills span strong { color: var(--lime); font-weight: 600; }

/* Timeline steps v2: equal-height cards, titles top-aligned in a fixed 2-line slot */
.tl-grid { align-items: stretch !important; gap: 20px !important; }
.tl-step { background: rgba(255,255,255,0.05); border-radius: 20px; padding: 36px 32px 40px; height: 100%; }
body .tl-step h3 { align-items: flex-start !important; min-height: 2.6em !important; }
.tl-step .big { font-size: clamp(52px, 5vw, 80px) !important; margin-bottom: 28px !important; }

/* No page dim behind the mega menu; quicker close */
body::after { content: none !important; display: none !important; }
.mega { transition: opacity 160ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 160ms !important; }
.nav-item:hover .mega, .nav-item:focus-within .mega { transition: opacity 240ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s !important; }

/* Side-scroll cards: no numbers, no scrollbar, arrow buttons + drag */
.sc-card .num { display: none !important; }
.sc-card h3 { margin-top: auto; padding-top: 80px; }
.inc-scroll { scrollbar-width: none !important; -ms-overflow-style: none; cursor: grab; }
.inc-scroll::-webkit-scrollbar { display: none; }
.inc-scroll.dragging { cursor: grabbing; scroll-snap-type: none; }
.scroll-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; max-width: none !important; flex-wrap: wrap; }
.scroll-head > div:first-child { max-width: 760px; }
.sc-nav { display: flex; gap: 10px; }
.sc-nav button { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--ink) !important; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); transition: background 200ms, color 200ms, opacity 200ms; }
.sc-nav button:hover { background: var(--ink); color: var(--paper); }
.sc-nav button:disabled { opacity: 0.3; pointer-events: none; }
.sc-nav svg { width: 18px; height: 18px; }

/* Related cards using portrait hero art: show the whole image, no cropped tops */
.bcard figure img[src*="svc-hero-"], .bcard figure img[src*="web-hero"] { object-fit: contain !important; aspect-ratio: 1 / 0.82 !important; object-position: center bottom !important; }

/* Stats row v2: soft tiles with an icon badge */
section.stats-row .stats { gap: 20px !important; }
section.stats-row .stat { flex-direction: row !important; align-items: center; gap: 20px !important; padding: 28px 30px !important; border-radius: 20px; background: #efedfd; transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1); }
section.stats-row .stat:hover { transform: translateY(-3px); }
section.stats-row .stat::before { content: ''; width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; background: var(--violet) center / 24px no-repeat; }
section.stats-row .stat:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E"); }
section.stats-row .stat:nth-child(2)::before { background-color: var(--coral); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312121a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E"); }
section.stats-row .stat:nth-child(3)::before { background-color: var(--lime); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312121a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
section.stats-row .stat strong { display: block; font-size: clamp(26px, 2.2vw, 34px) !important; color: var(--ink) !important; line-height: 1.05 !important; }
section.stats-row .stat span { display: block; margin-top: 6px; font-size: 15px !important; color: rgba(18,18,26,0.6); }
section.stats-row .stat > * { min-width: 0; }

/* "Four steps" stack tile: footer look (ink + violet/coral glow) */
body section.stack { background: var(--ink) !important; color: var(--paper); position: relative; overflow: hidden !important; isolation: isolate; }
body section.stack::before, body section.stack::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; filter: blur(100px); pointer-events: none; }
body section.stack::before { width: 50vw; height: 30vw; right: -10vw; top: -8vw; background: radial-gradient(closest-side, rgba(74,55,236,0.55), transparent); }
body section.stack::after { width: 40vw; height: 24vw; left: -12vw; bottom: -4vw; background: radial-gradient(closest-side, rgba(255,122,128,0.28), transparent); }
body section.stack .stack-head h2 { color: var(--paper) !important; }
body section.stack .stack-head p { color: rgba(255,255,255,0.72); }
body section.stack mark.hl { --hlc: var(--violet); color: var(--paper) !important; }

/* Location cards: side-scroll when there are more than four */
.loc-grid.scroller { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 28px) / 4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; padding-bottom: 4px; }
.loc-grid.scroller::-webkit-scrollbar { display: none; }
.loc-grid.scroller > * { scroll-snap-align: start; }
.loc-grid.scroller.dragging { cursor: grabbing; scroll-snap-type: none; }
@media (max-width: 1000px) { .loc-grid.scroller { grid-auto-columns: calc((100% - 28px) / 2); } }
@media (max-width: 600px) { .loc-grid.scroller { grid-auto-columns: 85%; } }
section.locs .sc-nav button { border-color: var(--paper) !important; color: var(--paper); }
section.locs .sc-nav button:hover { background: var(--paper); color: var(--ink); }

/* Hero image fixes: let nudged images overflow their box; framed hero shows the whole image */
.svc-hero .svc-media img { max-width: none !important; }
.svc-hero.framed .svc-media { background: transparent !important; }
.svc-hero.framed .svc-media img { object-fit: contain !important; object-position: center bottom !important; left: 0 !important; width: 100% !important; }

/* Related cards: compact height */
.bento.related .bcard { min-height: 0 !important; }
.bento.related .bcard figure { padding-top: 12px !important; }
.bento.related .bcard figure img, .bento.related .bcard figure img[src*="svc-hero-"], .bento.related .bcard figure img[src*="web-hero"] { aspect-ratio: 16 / 9 !important; object-fit: contain !important; object-position: center bottom !important; }

/* Framed hero: bigger image, thinner frame */
.svc-hero.framed .svc-media { margin: 14px !important; }
.svc-hero.framed .svc-media img { object-fit: cover !important; object-position: center 40% !important; }

/* Related cards: trimmed art, one consistent scale */
.bento.related .bcard figure img[src*="card-"] { aspect-ratio: 16 / 10 !important; object-fit: cover !important; object-position: center !important; }

/* Heroes: pre-fitted art, whole image visible at one consistent scale */
.svc-hero .svc-media img[src*="fit-"] { object-fit: contain !important; object-position: center !important; left: 0 !important; width: 100% !important; }

/* Short neighbourhood statement: no first-line indent, tighter */
.hl-statement:has(.nbh-chips) .hl-text { text-indent: 0 !important; max-width: 20em; }
.hl-statement:has(.nbh-chips) .nbh-chips { margin-top: 36px; }

/* Location pages: service tag row */
section.svc-tags { padding: calc(var(--spad) / 2) 0 !important; }
section.svc-tags .tag-row { margin-top: 0; }
section.svc-tags .tag-row a { background: var(--tint); }

/* ---------- "What you get" report blocks (shared) ---------- */
body section.report { margin: var(--sgap) var(--gutter) !important; border-radius: 20px; background: #efedfd; padding: var(--spad) 0 !important; }
section.report .wrap { padding-left: var(--inset) !important; padding-right: var(--inset) !important; }
.report-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.report-grid.flip .report-card { order: -1; }
.report-copy p { margin-top: 18px; font-size: 17px; line-height: 1.65; color: rgba(18,18,26,0.72); max-width: 48ch; }
.report-copy ul { list-style: none; padding: 0; margin: 28px 0 32px; display: flex; flex-direction: column; gap: 14px; }
.report-copy li { display: flex; gap: 12px; font-size: 16.5px; line-height: 1.5; font-weight: 500; }
.report-copy li::before { content: ''; width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; border-radius: 50%; background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat; }
.report-card { background: var(--paper); border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 20px; transform: rotate(-1.5deg); }
.report-grid.flip .report-card { transform: rotate(1.5deg); }
.rc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rc-title { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.rc-pill { font-size: 12px; padding: 6px 10px; border-radius: 200px; background: var(--tint); color: rgba(18,18,26,0.6); white-space: nowrap; }
.rc-chart svg { width: 100%; height: 120px; display: block; }
.rc-rows { display: flex; flex-direction: column; gap: 10px; }
.rc-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--tint); font-size: 15px; }
.rc-row em { font-style: normal; font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 200px; white-space: nowrap; background: rgba(18,18,26,0.08); color: rgba(18,18,26,0.6); }
.rc-row em.up { background: var(--lime); color: var(--ink); }
.rc-row em.down { background: var(--violet); color: var(--paper); }
.rc-next { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 12px; background: var(--ink); color: var(--paper); font-size: 14.5px; line-height: 1.5; }
.rc-next strong { color: var(--lime); font-weight: 600; }
.rc-bars { display: flex; align-items: flex-end; gap: 10px; height: 110px; }
.rc-bars i { flex: 1; border-radius: 8px 8px 0 0; background: rgba(74,55,236,0.18); }
.rc-bars i:nth-child(n+5) { background: var(--violet); }
.rc-swatches { display: flex; align-items: center; gap: 10px; }
.rc-swatches i { width: 54px; height: 54px; border-radius: 50%; }
.rc-swatches span { margin-left: auto; font-size: 54px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--violet); }
.rc-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.rc-cal i { aspect-ratio: 1; border-radius: 8px; background: var(--tint); }
.rc-cal i.v { background: var(--violet); } .rc-cal i.c { background: var(--coral); } .rc-cal i.l { background: var(--lime); }
.rc-pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rc-pipe div { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: var(--tint); }
.rc-pipe b { font-size: 12px; font-weight: 600; color: rgba(18,18,26,0.6); }
.rc-pipe i { height: 18px; border-radius: 6px; background: var(--paper); }
.rc-pipe div:last-child i { background: var(--lime); }
.rc-chat { display: flex; flex-direction: column; gap: 10px; }
.rc-chat span { max-width: 85%; padding: 12px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; }
.rc-chat .q { align-self: flex-end; background: var(--violet); color: var(--paper); border-bottom-right-radius: 4px; }
.rc-chat .a { align-self: flex-start; background: var(--tint); border-bottom-left-radius: 4px; }
.rc-stars { display: flex; align-items: baseline; gap: 14px; font-size: 34px; letter-spacing: 4px; color: var(--violet); }
.rc-stars small { font-size: 14px; letter-spacing: 0; color: rgba(18,18,26,0.6); }
@media (max-width: 900px) { .report-grid { grid-template-columns: 1fr; } .report-grid.flip .report-card { order: 0; } .report-card, .report-grid.flip .report-card { transform: none; } }

/* Timeline era labels: outlined type, not stretched pills */
.tl-step .era { display: block !important; align-self: flex-start; background: none !important; padding: 0 !important; border-radius: 0 !important; margin-bottom: 26px !important; font-size: clamp(26px, 2.2vw, 34px) !important; font-weight: 600 !important; line-height: 1.05 !important; letter-spacing: -0.03em !important; text-transform: uppercase; color: transparent !important; -webkit-text-stroke: 1px var(--paper); min-height: 2.1em; }

/* ---------- Header v2: real logo, calmer nav, WhatsApp + CTA ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
header.header { transition: box-shadow 0s, background 250ms ease; }
header.header .header-main { padding: 16px 0 !important; transition: padding 300ms cubic-bezier(0.16, 1, 0.3, 1); }
header.header.scrolled .header-main { padding: 10px 0 !important; }
header.header .brand { display: inline-flex !important; align-items: center; gap: 10px; text-decoration: none; }
.lg-mark { position: relative; display: inline-flex; align-items: flex-end; justify-content: flex-start; width: 42px; height: 42px; padding: 0 0 7px 7px; border-radius: 11px; background: var(--violet); color: #f4f1ea; font-family: Inter, system-ui, sans-serif; font-weight: 800; font-size: 21px; letter-spacing: -0.06em; line-height: 1; transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1); }
.lg-mark i { position: absolute; right: 7px; bottom: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.lg-word { position: relative; font-family: Inter, system-ui, sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -0.055em; line-height: 1; color: var(--ink); padding-right: 9px; }
.lg-word i { position: absolute; right: 0; bottom: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
header.header .brand:hover .lg-mark { transform: rotate(-8deg); }
header.header .header-nav { background: var(--tint); border-radius: 9999px; padding: 5px !important; gap: 2px !important; }
.nav-item .nav-top { border-radius: 9999px; padding: 10px 18px !important; transition: background 200ms, color 200ms; }
.nav-item .nav-top::after { display: none !important; }
.nav-item:hover .nav-top, .nav-item:focus-within .nav-top { background: var(--paper); color: var(--violet) !important; }
.header-wa { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(18,18,26,0.14); color: var(--ink); transition: background 200ms, color 200ms, border-color 200ms; }
.header-wa svg { width: 20px; height: 20px; }
.header-wa:hover { background: #25d366; border-color: #25d366; color: var(--paper); }
header.header .header-right { gap: 10px !important; }
header.header .header-cta { padding: 14px 24px !important; font-size: 15px !important; }
@media (max-width: 900px) { .lg-word { font-size: 22px; } .lg-mark { width: 38px; height: 38px; font-size: 19px; } .header-wa { display: none; } }

/* Logo: keep the dot on the badge only */
.lg-word i { display: none !important; }
.lg-word { padding-right: 0 !important; }

/* Logo v3: plain badge, black dot on the wordmark */
.lg-mark i { display: none !important; }
.lg-mark { padding: 0 !important; justify-content: center !important; align-items: center !important; }
.lg-word i { display: block !important; background: var(--ink) !important; }
.lg-word { padding-right: 9px !important; }

/* Logo v4: "ikonik" in the violet badge, "studio" beside it */
.lg-mark { width: auto !important; height: 42px !important; padding: 0 14px 1px !important; border-radius: 11px !important; font-size: 24px !important; letter-spacing: -0.055em !important; }
.lg-word { font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.045em !important; }
@media (max-width: 900px) { .lg-mark { height: 38px !important; font-size: 21px !important; padding: 0 12px 1px !important; } .lg-word { font-size: 21px !important; } }

/* Logo v5: "ikonik" badge with a lime dot */
header.header .brand .lg-mark i { display: inline-block !important; position: static !important; width: 7px !important; height: 7px !important; margin-left: 2px; align-self: flex-end; margin-bottom: 11px; border-radius: 50%; background: var(--lime) !important; }
header.header .brand .lg-mark { align-items: center !important; }

/* ---------- Closing CTA band (work + services) ---------- */
body section.cta-band { margin: var(--sgap) var(--gutter) !important; border-radius: 20px; background: var(--violet); color: var(--paper); padding: var(--spad) 0 !important; position: relative; overflow: hidden; isolation: isolate; }
body section.cta-band::before, body section.cta-band::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; filter: blur(90px); pointer-events: none; }
body section.cta-band::before { width: 46vw; height: 30vw; right: -8vw; top: -10vw; background: radial-gradient(closest-side, rgba(201,255,61,0.35), transparent); }
body section.cta-band::after { width: 40vw; height: 26vw; left: -10vw; bottom: -10vw; background: radial-gradient(closest-side, rgba(255,122,128,0.45), transparent); }
section.cta-band .wrap { padding-left: var(--inset) !important; padding-right: var(--inset) !important; }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
body .cta-band h2 { color: var(--paper) !important; font-size: clamp(34px, 4vw, 60px) !important; line-height: 1.08 !important; }
.cta-band mark.hl { --hlc: var(--lime); color: var(--ink) !important; }
.cta-copy p { margin-top: 20px; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.86); max-width: 46ch; }
.cta-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.cta-band .btn-ghost { color: var(--paper) !important; border: 1.6px solid rgba(255,255,255,0.55) !important; background: transparent !important; }
.cta-band .btn-ghost:hover { background: var(--paper) !important; color: var(--ink) !important; }
.cta-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.cta-quick a { padding: 9px 15px; border-radius: 200px; background: rgba(18,18,26,0.28); font-size: 14px; font-weight: 500; color: var(--paper); transition: background 180ms, color 180ms; }
.cta-quick a:hover { background: var(--paper); color: var(--ink); }
.cta-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: s; }
.cta-steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; align-items: center; padding: 20px 22px; border-radius: 16px; background: rgba(255,255,255,0.1); }
.cta-steps li::before { content: counter(s); grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; background: var(--lime); color: var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; }
.cta-steps b { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.cta-steps span { font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,0.75); }
@media (max-width: 900px) { .cta-grid { grid-template-columns: 1fr; } }
section.case-quote { padding: calc(var(--spad) / 2) 0 !important; }
.cq { margin: 0 auto; max-width: 980px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.cq blockquote { margin: 0; font-size: clamp(28px, 3.2vw, 48px); line-height: 1.2; font-weight: 500; letter-spacing: -0.035em; color: var(--ink); }
.cq figcaption { display: flex; align-items: center; gap: 14px; text-align: left; }
.cq .av { width: 52px; height: 52px; border-radius: 50%; background: var(--coral); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.cq figcaption span:last-child { display: flex; flex-direction: column; font-size: 16px; }
.cq strong { font-weight: 600; }
.cq em { font-style: normal; color: rgba(18,18,26,0.55); font-size: 14.5px; }

/* ---------- Mobile homepage hero: stacked, no overlap ---------- */
@media (max-width: 900px) {
  body section.hero.sal-hero { display: flex !important; flex-direction: column !important; align-items: stretch !important; min-height: 0 !important; padding: 0 !important; }
  .sal-hero .hero-inner { order: 1; padding: 44px 24px 8px !important; gap: 0 !important; }
  .sal-hero .hero-copy { max-width: none !important; gap: 20px !important; }
  body .sal-hero h1 { font-size: 44px !important; line-height: 1.02 !important; }
  .sal-hero .hero-desc { max-width: none !important; font-size: 16.5px !important; line-height: 1.6 !important; }
  .sal-hero .hero-ctas { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; }
  .sal-hero .hero-ctas a { justify-content: center; padding: 15px 14px !important; }
  .sal-hero .hero-trust { font-size: 14px !important; margin-top: 4px !important; }
  .sal-hero > .dhh-img-mobile { order: 2; position: static !important; display: block !important; width: 100% !important; height: auto !important; max-height: 420px; object-fit: contain !important; object-position: center bottom !important; margin-top: 8px; }
}
/* ---------- Mobile cookie banner: compact strip ---------- */
@media (max-width: 560px) {
  .ik-cb { left: 10px !important; right: 10px !important; bottom: 10px !important; padding: 16px 18px !important; border-radius: 16px !important; }
  .ik-cb h4 { display: none; }
  .ik-cb p { font-size: 13.5px !important; line-height: 1.45 !important; margin-bottom: 12px !important; }
  .ik-cb .row { flex-wrap: nowrap !important; }
  .ik-cb button { padding: 11px 12px !important; font-size: 13.5px !important; }
}

@media (max-width: 900px) {
  .sal-hero .hero-ctas a { white-space: nowrap !important; font-size: 15px !important; gap: 6px !important; }
  .sal-hero .hero-ctas a svg { width: 14px !important; height: 14px !important; }
  .avatars span { font-size: 9.5px !important; letter-spacing: -0.02em; }
}

/* Mobile: hide the illustration in inner-page heroes (text-only hero) */
@media (max-width: 900px) {
  .svc-hero .svc-media { display: none !important; }
  body section.svc-hero { min-height: 0 !important; }
  .svc-hero .svc-copy { padding: 44px 24px 48px !important; }
}

/* ---------- Mobile: every card grid stacks, whatever the page sets ---------- */
@media (max-width: 1000px) {
  body .bento-grid, body section.related .bento-grid, body .inc-grid, body .loc-grid:not(.scroller), body .tl-grid, body .res-grid, body .cat-cards, body .gbp-grid, body .price-grid, body .stack-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body .demos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  body .bento-grid, body section.related .bento-grid, body .inc-grid, body .loc-grid:not(.scroller), body .tl-grid, body .res-grid, body .cat-cards, body .gbp-grid, body .price-grid, body .stack-cards, body .demos-grid, body .duo-grid, body .report-grid, body .cta-grid, body .inc-rows-grid, body .guides2-grid, body .post-grid, body .m-grid, body .faq-grid, body .testi-grid2, body .founder-grid2, body .brief-grid { grid-template-columns: 1fr !important; }
  body .bcard.ink { flex-direction: column !important; }
  body .bcard { min-height: 0 !important; padding: 36px 26px 0 !important; }
  body .bcard figure { margin: 20px -26px 0 !important; }
  body .inc, body .sc-card, body .st-card, body .loc, body .gbp-item, body .res, body .tl-step { min-height: 0 !important; }
  body .tl-step h3 { min-height: 0 !important; }
  body .inc-scroll { grid-auto-columns: 82% !important; }
  body .loc-grid.scroller { grid-auto-columns: 85% !important; }
}

/* Mobile homepage hero: match violet to the new image so they blend */
@media (max-width: 900px) {
  body section.hero.sal-hero { background: #4a39fb !important; }
  .sal-hero > .dhh-img-mobile { max-height: none !important; width: 100% !important; aspect-ratio: auto; margin-top: 0 !important; }
}

/* Mobile: strategy ink card */
@media (max-width: 640px) {
  body .bcard.ink { padding: 0 !important; }
  body .bcard.ink .ink-copy { padding: 40px 24px 8px !important; }
  body .bcard.ink .ink-list { grid-template-columns: 1fr !important; gap: 16px !important; }
  body .bcard.ink .ink-list div { white-space: normal !important; }
  body .bcard.ink .ink-media { min-height: 0 !important; aspect-ratio: 1 / 0.8; }
  body .bcard.ink .ink-media img { inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; }
  body .bcard.ink .ink-copy h3 { font-size: 32px !important; }
}

/* Mobile inner heroes: one full-width column for every variant */
@media (max-width: 900px) {
  body section.svc-hero, body section.svc-hero.flip, body section.svc-hero.framed { display: block !important; grid-template-columns: 1fr !important; }
  .svc-hero .svc-copy { width: 100% !important; max-width: none !important; }
  body .svc-hero h1 { max-width: none !important; font-size: 40px !important; }
  .svc-hero .crumbs { flex-wrap: wrap; row-gap: 6px; white-space: nowrap; font-size: 13px; padding: 8px 14px; }
  .svc-hero .ctas { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; width: 100%; }
  .svc-hero .ctas a { justify-content: center; white-space: nowrap; padding: 15px 12px !important; font-size: 15px !important; }
}
@media (max-width: 380px) { .svc-hero .ctas { grid-template-columns: 1fr; } }

/* Mobile: step titles on one line */
@media (max-width: 640px) { .tl-step h3 br { display: none; } }

/* Mobile: guide rows stack title and meta */
@media (max-width: 640px) {
  body .g-row { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; padding: 20px 22px !important; }
  body .g-row span { white-space: normal !important; }
}

/* Mobile type scale: bigger section headings and card titles */
@media (max-width: 640px) {
  :root { --h-lg: 36px; --h-sm: 23px; }
  body section h2, body footer h2, body .hl-text { font-size: 36px !important; line-height: 1.12 !important; }
  body .hl-text { font-size: 30px !important; line-height: 1.3 !important; }
  body section h3, body section h4, body footer h3 { font-size: 23px !important; }
  body .faq-item summary { font-size: 18px !important; }
  body .cta-band h2 { font-size: 38px !important; }
  body .foot-left h2 { font-size: 40px !important; }
  body .demo .shot.cover .cv-name { font-size: 28px !important; }
  body section p, body section li { font-size: 16.5px; }
}

/* Work tiles with real site covers */
.demo .shot.shot-img { background: transparent !important; border: 0 !important; padding: 0 !important; }
.demo .shot.shot-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1); }
.demo:hover .shot.shot-img img { transform: scale(1.03); }

/* Mid widths (tablet / small laptop): keep nav on one line, keep hero text clear of the video */
.nav-item .nav-top { white-space: nowrap; }
@media (max-width: 1240px) and (min-width: 901px) {
  .nav-item .nav-top { padding: 10px 12px !important; font-size: 14px !important; }
  .header-wa { display: none !important; }
  .sal-hero .hero-inner { grid-template-columns: minmax(0, 1fr) !important; }
  .sal-hero .hero-copy { max-width: 46% !important; }
  body .sal-hero h1 { font-size: clamp(40px, 4.6vw, 60px) !important; }
}