/*
Theme Name: Tangerine Design
Theme URI: https://tangerinedesign.hu
Author: Tangerine Design
Author URI: https://tangerinedesign.hu
Description: Egyedi üzleti rendszerek és webfejlesztés — világos, minimal, technikai megjelenésű WordPress sablon egyoldalas bemutatkozóhoz. Tartalmaz hero szekciót, animált "káoszból rendszer" vizualizációt, szolgáltatás kártyákat, fejlesztési modell idővonalat, élő-hatású dashboard mockupot, referenciákat, CTA bannert, kapcsolat űrlapot és láblécet.
Version: 1.7.1
Tested up to: 6.5
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tangerine-design
Tags: business, portfolio, one-page, custom-menu, custom-logo, threaded-comments, translation-ready
*/

:root {
    --bg: #faf9f7;
    --bg-1: #f3f2ee;
    --bg-2: #eceae5;
    --bg-3: #e3e0da;
    --line: #e3e0da;
    --line-2: #d3cfc7;
    --ink: #111111;
    --ink-2: #45463f;
    --ink-3: #8a877f;
    --ink-4: #b6b2a8;
    --accent: #ea580c;
    --accent-soft: rgba(234, 88, 12, 0.10);
    --accent-line: rgba(234, 88, 12, 0.35);
    --green: #16a34a;
    --red: #dc2626;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --sans: 'Inter', system-ui, -apple-system, sans-serif;
    --maxw: 1240px;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
  body { font-size: 15px; line-height: 1.55; letter-spacing: -0.005em; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; }
  h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.03em; }
  p { margin: 0; }

  /* ---------- Layout helpers ---------- */
  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
  .eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--accent);
  }
  .section { padding: 120px 0; border-top: 1px solid var(--line); position: relative; }
  .section-head { display: grid; grid-template-columns: 220px 1fr; gap: 64px; margin-bottom: 64px; }
  .section-head h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.05; max-width: 720px; }
  .section-head .lede { color: var(--ink-2); font-size: 16px; max-width: 600px; margin-top: 18px; }
  .section-head .col-left { position: sticky; top: 100px; align-self: start; }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 20px;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    border: 1px solid var(--line-2);
    background: transparent;
    color: var(--ink);
    transition: background .18s, border-color .18s, transform .18s;
  }
  .btn:hover { background: var(--bg-2); border-color: #3a3a3a; }
  .btn .arr { transition: transform .2s; }
  .btn:hover .arr { transform: translateX(3px); }
  .btn-accent {
    background: var(--accent);
    color: #fff7ee;
    border-color: var(--accent);
    font-weight: 600;
  }
  .btn-accent:hover { background: #c2410c; border-color: #c2410c; }
  .btn-sm { padding: 9px 14px; font-size: 13px; }

  /* ---------- Nav ---------- */
  .nav {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(16px);
    background: rgba(250,249,247,0.82);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 64px;
    max-width: var(--maxw); margin: 0 auto; padding: 0 28px;
  }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.02em; font-size: 15px; }
  .brand-mark {
    width: 22px; height: 22px; border-radius: 4px;
    background: var(--accent);
    position: relative;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset;
  }
  .brand-mark::after {
    content: ""; position: absolute; inset: 4px;
    border: 1.5px solid #fff7ee; border-radius: 2px;
    border-right-color: transparent; border-bottom-color: transparent;
  }
  .brand-mark::before {
    content: ""; position: absolute; top: -2px; right: -2px;
    width: 6px; height: 6px; background: var(--accent); border-radius: 50%;
    border: 2px solid var(--bg);
  }
  .nav-links { display: flex; gap: 28px; align-items: center; }
  .nav-links a { font-size: 13.5px; color: var(--ink-2); transition: color .15s; }
  .nav-links a:hover { color: var(--ink); }

  /* Home (house) icon link in the nav. Always visible on desktop. */
  .nav-home {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    margin-right: 0;
    border-radius: 6px;
    color: var(--ink-2);
    transition: background .15s, color .15s;
  }
  .nav-home:hover { background: var(--bg-2); color: var(--ink); }
  .nav-home svg { display: block; }

  /* Anchor scroll offset so sticky nav doesn't overlap the target heading. */
  .section[id],
  [id].section,
  main [id] { scroll-margin-top: 88px; }
  .admin-bar .section[id],
  .admin-bar main [id] { scroll-margin-top: 120px; }
  .nav-right { display: flex; align-items: center; gap: 18px; }
  .lang { display: inline-flex; font-family: var(--mono); font-size: 11px; color: var(--ink-3); gap: 0; line-height: 1; align-items: center; }
  .lang > span,
  .lang > a {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 5px 9px; min-width: 30px;
    border: 1px solid var(--line-2); border-right-width: 0;
    text-decoration: none; color: inherit;
    cursor: pointer; transition: background .15s, color .15s;
  }
  .lang > :first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
  .lang > :last-child  { border-right-width: 1px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
  .lang > a:hover { color: var(--ink); background: var(--bg-2); }
  .lang > .on { color: var(--ink); background: var(--bg-2); cursor: default; }

  /* ---------- Hamburger button ---------- */
  .nav-toggle {
    display: none;
    width: 42px; height: 42px;
    padding: 0; margin: 0;
    background: transparent; border: 1px solid var(--line-2);
    border-radius: 8px; cursor: pointer;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 5px;
    transition: background .15s, border-color .15s;
  }
  .nav-toggle:hover { background: var(--bg-2); }
  .nav-toggle__bar {
    display: block; width: 18px; height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .25s ease, opacity .15s ease;
    transform-origin: center;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ---------- Mobile drawer ---------- */
  .nav-drawer {
    position: fixed;
    top: 64px; left: 0; right: 0;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
    z-index: 49;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .nav-drawer.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity .2s ease, transform .25s ease, visibility 0s linear 0s;
  }
  .admin-bar .nav-drawer { top: calc(64px + 32px); }
  @media (max-width: 782px) {
    .admin-bar .nav-drawer { top: calc(64px + 46px); }
  }
  .nav-drawer__inner {
    padding: 20px 24px 28px;
    display: flex; flex-direction: column; gap: 20px;
    max-width: var(--maxw);
    margin: 0 auto;
  }
  .nav-drawer__home {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    margin-bottom: 4px;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    color: var(--ink);
    font-size: 14px;
    transition: background .15s, color .15s;
    align-self: flex-start;
  }
  .nav-drawer__home:hover { background: var(--bg-2); color: var(--accent); }
  .nav-drawer__home svg { display: block; }

  .nav-drawer__nav .menu,
  .nav-drawer__nav ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column;
  }
  .nav-drawer__nav li { margin: 0; }
  .nav-drawer__nav li a {
    display: block;
    padding: 14px 4px;
    font-size: 16px;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    transition: color .15s, padding-left .15s;
  }
  .nav-drawer__nav li:last-child a { border-bottom: none; }
  .nav-drawer__nav li a:hover,
  .nav-drawer__nav li.current-menu-item > a {
    color: var(--accent);
    padding-left: 8px;
  }
  .nav-drawer__lang {
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px 0 4px;
  }
  .nav-drawer__label {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
  }
  /* Bigger, touch-friendly language switcher inside the drawer */
  .nav-drawer__lang .tml-switcher,
  .nav-drawer__lang .lang {
    display: flex; flex-wrap: wrap; gap: 8px;
    font-size: 14px;
  }
  .nav-drawer__lang .tml-switcher a,
  .nav-drawer__lang .tml-switcher span,
  .nav-drawer__lang .lang > a,
  .nav-drawer__lang .lang > span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 64px; min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-2);
    text-decoration: none;
    background: var(--bg);
    transition: background .15s, color .15s, border-color .15s;
  }
  .nav-drawer__lang .tml-switcher a:hover,
  .nav-drawer__lang .lang > a:hover {
    background: var(--bg-2);
    color: var(--ink);
  }
  .nav-drawer__lang .tml-switcher .is-current,
  .nav-drawer__lang .tml-switcher .current,
  .nav-drawer__lang .lang > .on {
    background: var(--accent);
    color: #fff7ee;
    border-color: var(--accent);
  }
  .nav-drawer__cta {
    justify-content: center;
    width: 100%;
    padding: 14px 18px;
    font-size: 15px;
  }

  body.nav-drawer-open { overflow: hidden; }

  @media (max-width: 900px) {
    .nav-links { display: none; }
    .nav-right { display: none; }
    .nav-toggle { display: inline-flex; }
  }

  /* ---------- Hero ---------- */
  .hero { position: relative; padding: 140px 0 140px; overflow: hidden; border-top: none; }
  .hero-grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(0,0,0,0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,0,0,0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 90% 60% at 50% 30%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 30%, #000 30%, transparent 75%);
    pointer-events: none;
  }
  .hero-glow {
    position: absolute; top: 10%; left: 50%; transform: translateX(-50%);
    width: 700px; height: 320px;
    background: radial-gradient(ellipse, rgba(234,88,12,0.16), transparent 70%);
    filter: blur(40px);
    pointer-events: none;
  }
  .hero-inner { position: relative; z-index: 2; }
  .hero-badge {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 12px 6px 8px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font-family: var(--mono); font-size: 11px; color: var(--ink-2);
    background: #ffffff;
    margin-bottom: 28px;
  }
  .hero-badge .dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--green);
    position: relative;
  }
  .hero-badge .dot::before {
    content: ""; position: absolute; inset: -3px;
    border-radius: 50%;
    background: rgba(22,163,74,0.35);
    transform-origin: center;
    will-change: transform, opacity;
    animation: pulse 2.2s infinite ease-in-out;
  }
  /* Transform + opacity are GPU-accelerated in Safari — box-shadow is not. */
  @keyframes pulse {
    0%, 100% { transform: scale(1);   opacity: 0.6; }
    50%      { transform: scale(1.8); opacity: 0; }
  }
  .hero h1 {
    font-size: clamp(36px, 5.6vw, 72px);
    line-height: 1.02;
    max-width: 920px;
    letter-spacing: -0.035em;
  }
  .hero h1 .accent { color: var(--accent); }
  .hero h1 .strike {
    position: relative;
    color: var(--ink-3);
    font-weight: 500;
  }
  .hero h1 .strike::after {
    content: ""; position: absolute; left: -2%; right: -2%; top: 53%;
    height: 3px; background: var(--accent);
    transform: rotate(-2deg);
  }
  .hero-sub {
    margin-top: 26px;
    font-size: 18px;
    color: var(--ink-2);
    max-width: 640px;
    line-height: 1.55;
  }
  .hero-ctas { margin-top: 38px; display: flex; gap: 12px; flex-wrap: wrap; }
  .hero-meta {
    margin-top: 84px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .hero-meta > div {
    padding: 22px 0;
    border-right: 1px solid var(--line);
    padding-right: 24px;
    padding-left: 24px;
  }
  .hero-meta > div:first-child { padding-left: 0; }
  .hero-meta > div:last-child { border-right: none; }
  .hero-meta .num {
    font-family: var(--mono);
    font-size: 26px; color: var(--ink);
    letter-spacing: -0.02em;
    font-weight: 500;
  }
  .hero-meta .lbl {
    font-family: var(--mono);
    font-size: 11px; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-top: 6px;
  }
  @media (max-width: 720px) {
    .hero-meta { grid-template-columns: repeat(2, 1fr); }
    .hero-meta > div:nth-child(2) { border-right: none; }
    .hero-meta > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  }

  /* ---------- Káoszból rendszer viz ---------- */
  .chaos-card {
    border: 1px solid var(--line);
    background: var(--bg-1);
    border-radius: 4px;
    overflow: hidden;
  }
  .chaos-grid {
    display: grid; grid-template-columns: 1fr 80px 1fr;
    min-height: 480px;
    position: relative;
  }
  .chaos-side { padding: 40px; position: relative; overflow: hidden; }
  .chaos-side.left { border-right: 1px dashed var(--line-2); }
  .chaos-label {
    font-family: var(--mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--ink-3);
    margin-bottom: 24px;
    display: flex; justify-content: space-between; align-items: center;
  }
  .chaos-label .tag {
    padding: 3px 8px; border-radius: 2px;
    background: var(--bg-3); color: var(--ink-2);
  }
  .chaos-side.right .chaos-label .tag { background: var(--accent-soft); color: var(--accent); }

  /* Left (chaos) — scattered items */
  .chaos-items { position: relative; height: 360px; }
  .chip {
    position: absolute;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--line-2);
    background: var(--bg-2);
    border-radius: 4px;
    font-size: 12.5px;
    color: var(--ink-2);
    font-family: var(--mono);
    will-change: transform;
    /* Paused until the chaos section is in the viewport (JS adds .is-visible). */
    animation: jitter 5s infinite ease-in-out;
    animation-play-state: paused;
  }
  .chaos-card.is-visible .chip { animation-play-state: running; }
  .chip svg { width: 14px; height: 14px; flex: none; }
  .chip.c1 { top: 4%; left: 6%; transform: rotate(-4deg); animation-delay: 0s; }
  .chip.c2 { top: 16%; left: 48%; transform: rotate(3deg); animation-delay: .6s; }
  .chip.c3 { top: 38%; left: 12%; transform: rotate(-2deg); animation-delay: 1.2s; }
  .chip.c4 { top: 52%; left: 55%; transform: rotate(5deg); animation-delay: 1.8s; }
  .chip.c5 { top: 70%; left: 8%; transform: rotate(-3deg); animation-delay: 2.4s; }
  .chip.c6 { top: 78%; left: 48%; transform: rotate(2deg); animation-delay: 3s; }
  .chip.c7 { top: 28%; left: 70%; transform: rotate(-5deg); animation-delay: 3.6s; }
  .chip.c8 { top: 60%; left: 35%; transform: rotate(1deg); animation-delay: 4.2s; }
  @keyframes jitter {
    0%, 100% { transform: translate(0,0) rotate(var(--r, 0deg)); }
    50% { transform: translate(2px, -3px) rotate(var(--r, 0deg)); }
  }
  .stickynote {
    position: absolute;
    width: 80px; height: 70px;
    background: #f5d76e;
    color: #2a1c00;
    padding: 8px;
    font-family: var(--mono);
    font-size: 9px;
    box-shadow: 2px 4px 10px rgba(0,0,0,0.12);
    transform: rotate(-6deg);
    top: 42%; left: 72%;
  }
  .stickynote.alt { background: #f4a8a6; top: 8%; left: 28%; transform: rotate(4deg); }

  /* Arrow middle */
  .chaos-arrow {
    display: flex; align-items: center; justify-content: center;
    position: relative;
    background:
      linear-gradient(180deg, transparent 0%, var(--bg-1) 50%, transparent 100%);
  }
  .arrow-wrap {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff7ee;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 8px rgba(234,88,12,0.10), 0 0 32px rgba(234,88,12,0.25);
    position: relative; z-index: 2;
  }
  .arrow-wrap::before, .arrow-wrap::after {
    content: ""; position: absolute;
    width: 80px; height: 1px;
    background: var(--accent-line);
    top: 50%;
  }
  .arrow-wrap::before { left: -88px; }
  .arrow-wrap::after { right: -88px; }

  /* Right (order) — structured */
  .order-stack { display: grid; gap: 12px; }
  .order-row {
    display: grid; grid-template-columns: 24px 1fr auto;
    gap: 12px; align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--line);
    background: var(--bg-2);
    border-radius: 3px;
    font-size: 13px;
    opacity: 0;
    animation: rowIn .6s forwards ease-out;
  }
  .order-row:nth-child(1) { animation-delay: 0.2s; }
  .order-row:nth-child(2) { animation-delay: 0.45s; }
  .order-row:nth-child(3) { animation-delay: 0.7s; }
  .order-row:nth-child(4) { animation-delay: 0.95s; }
  .order-row:nth-child(5) { animation-delay: 1.2s; }
  @keyframes rowIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
  .order-row .icon {
    width: 24px; height: 24px;
    border-radius: 4px;
    background: var(--bg-3);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
  }
  .order-row .icon svg { width: 14px; height: 14px; }
  .order-row .name { color: var(--ink); font-weight: 500; }
  .order-row .meta { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
  .order-row .status {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 2px rgba(22,163,74,0.18);
  }
  @media (max-width: 800px) {
    .chaos-grid { grid-template-columns: 1fr; }
    .chaos-side.left { border-right: none; border-bottom: 1px dashed var(--line-2); }
    .chaos-arrow { padding: 20px; }
    .arrow-wrap::before, .arrow-wrap::after { display: none; }
    .arrow-wrap svg { transform: rotate(90deg); transition: transform .2s; }

    /* Replace the absolutely-positioned chip mosaic with a clean vertical stack
       so post-its don't overlap chips and chips don't pile on top of each other. */
    .chaos-items {
      position: static;
      height: auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 4px 0;
    }
    .chip {
      position: static;
      transform: rotate(-1.5deg);
      align-self: flex-start;
      animation: none;
      max-width: 90%;
    }
    .chip:nth-child(even) { transform: rotate(1.5deg); align-self: flex-end; }
    .stickynote {
      position: static;
      transform: rotate(-3deg);
      margin: 8px 0 8px auto;
    }
    .stickynote.alt { transform: rotate(3deg); margin-left: 0; margin-right: auto; }
  }

  /* ---------- Services ---------- */
  .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
  .service {
    background: var(--bg);
    padding: 36px 32px 40px;
    position: relative;
    transition: background .25s;
  }
  .service:hover { background: var(--bg-1); }
  .service-num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.12em;
    margin-bottom: 36px;
  }
  .service-icon {
    width: 44px; height: 44px;
    border: 1px solid var(--line-2);
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
    background: var(--bg-1);
    margin-bottom: 28px;
  }
  .service:hover .service-icon { border-color: var(--accent-line); background: var(--accent-soft); }
  .service h3 { font-size: 22px; margin-bottom: 14px; letter-spacing: -0.025em; }
  .service p { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
  .service-tags { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 6px; }
  .tag {
    font-family: var(--mono); font-size: 10.5px;
    padding: 3px 8px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--ink-3);
  }
  @media (max-width: 900px) { .services-grid { grid-template-columns: 1fr; } }

  /* ---------- Dev model ---------- */
  .dev-flow {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-1);
  }
  .dev-step {
    padding: 28px 24px;
    border-right: 1px solid var(--line);
    position: relative;
    background: var(--bg-1);
  }
  .dev-step:last-child { border-right: none; }
  .dev-step::after {
    content: "";
    position: absolute;
    right: -7px; top: 50%; transform: translateY(-50%);
    width: 12px; height: 12px;
    background: var(--bg-1);
    border-top: 1px solid var(--line);
    border-right: 1px solid var(--line);
    transform: translateY(-50%) rotate(45deg);
    z-index: 2;
  }
  .dev-step:last-child::after { display: none; }
  .step-num {
    font-family: var(--mono); font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.1em;
    margin-bottom: 14px;
  }
  .step-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.015em; }
  .step-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
  .dev-callout {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .callout {
    padding: 22px 24px;
    border: 1px solid var(--line);
    background: var(--bg-1);
    border-radius: 4px;
    display: flex; gap: 16px; align-items: center;
  }
  .callout-icon {
    width: 36px; height: 36px; flex: none;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
  }
  .callout-icon svg { width: 18px; height: 18px; }
  .callout .txt { font-size: 14px; }
  .callout .txt b { color: var(--ink); font-weight: 600; }
  .callout .txt .muted { color: var(--ink-3); font-size: 12.5px; display: block; margin-top: 2px; font-family: var(--mono); }

  .keywords {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 24px;
  }
  .keywords .kw {
    font-family: var(--mono);
    font-size: 11.5px;
    padding: 5px 10px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--ink-2);
    border-radius: 2px;
  }
  .keywords .kw::before { content: "// "; color: var(--ink-4); }

  @media (max-width: 900px) {
    .dev-flow { grid-template-columns: 1fr; }
    .dev-step { border-right: none; border-bottom: 1px solid var(--line); }
    .dev-step::after { display: none; }
    .dev-callout { grid-template-columns: 1fr; }
  }

  /* ---------- Dashboard demo ---------- */
  .dash {
    border: 1px solid var(--line);
    background: var(--bg-1);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 30px 80px -30px rgba(0,0,0,0.18), 0 1px 0 rgba(0,0,0,0.02);
  }
  .dash-top {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
  }
  .dots { display: flex; gap: 6px; }
  .dot-b { width: 10px; height: 10px; border-radius: 50%; background: #d3cfc7; }
  .dash-title {
    font-family: var(--mono); font-size: 11px; color: var(--ink-3);
    display: flex; align-items: center; gap: 8px;
  }
  .dash-title .bm {
    width: 14px; height: 14px; border-radius: 3px; background: var(--accent);
  }
  .dash-right {
    margin-left: auto;
    display: flex; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  }
  .dash-right .live {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--green);
  }
  /* Use a stacked pseudo for the pulse halo so we can animate transform+opacity
     instead of box-shadow (which Safari can't GPU-accelerate). */
  .dash-right .live { position: relative; }
  .dash-right .live::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green);
    position: relative;
  }
  .dash-right .live::after {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(22,163,74,0.35);
    will-change: transform, opacity;
    animation: pulse 2s infinite;
  }
  .dash-body {
    display: grid;
    grid-template-columns: 180px 1fr 240px;
    min-height: 540px;
  }
  .dash-side {
    border-right: 1px solid var(--line);
    padding: 18px 14px;
    background: var(--bg);
  }
  .side-section {
    font-family: var(--mono); font-size: 10px;
    color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.12em;
    padding: 10px 8px 8px;
  }
  .side-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 3px;
    font-size: 13px;
    color: var(--ink-2);
    cursor: default;
  }
  .side-item svg { width: 13px; height: 13px; color: var(--ink-3); }
  .side-item.active { background: var(--bg-2); color: var(--ink); }
  .side-item.active svg { color: var(--accent); }
  .side-item .badge {
    margin-left: auto; font-family: var(--mono); font-size: 10px;
    background: var(--accent); color: #fff7ee;
    padding: 1px 6px; border-radius: 8px;
  }

  .dash-main { padding: 22px 24px; }
  .stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
    margin-bottom: 22px;
  }
  .stat {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--bg-2);
  }
  .stat-lbl {
    font-family: var(--mono); font-size: 10.5px;
    color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em;
  }
  .stat-val {
    font-size: 22px; font-weight: 600; margin-top: 8px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }
  .stat-trend {
    font-family: var(--mono); font-size: 11px;
    margin-top: 4px;
    display: flex; align-items: center; gap: 4px;
  }
  .stat-trend.up { color: var(--green); }
  .stat-trend.down { color: var(--red); }

  .charts { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-bottom: 20px; }
  .chart-card {
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 18px;
    background: var(--bg-2);
  }
  .chart-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 16px;
  }
  .chart-head h4 { font-size: 13px; font-weight: 500; }
  .chart-head .legend {
    font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
    display: flex; gap: 10px;
  }
  .lg { display: inline-flex; align-items: center; gap: 6px; }
  .lg::before { content: ""; width: 8px; height: 8px; border-radius: 2px; }
  .lg.a::before { background: var(--accent); }
  .lg.b::before { background: #b6b2a8; }

  .bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; }
  .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .bar { width: 100%; background: #d3cfc7; border-radius: 2px 2px 0 0; position: relative; }
  .bar.fg { background: var(--accent); }
  .bar-lbl { font-family: var(--mono); font-size: 9.5px; color: var(--ink-4); }

  .table {
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-2);
  }
  .table-head, .table-row {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 80px;
    gap: 12px; padding: 10px 14px;
    font-size: 12.5px;
    align-items: center;
  }
  .table-head {
    font-family: var(--mono); font-size: 10.5px;
    color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em;
    background: var(--bg-3);
    border-bottom: 1px solid var(--line);
  }
  .table-row + .table-row { border-top: 1px solid var(--line); }
  .table-row .pill {
    display: inline-block; padding: 2px 8px; border-radius: 99px;
    font-family: var(--mono); font-size: 10px;
  }
  .pill.ok { background: rgba(22,163,74,0.12); color: var(--green); }
  .pill.warn { background: var(--accent-soft); color: var(--accent); }
  .pill.muted { background: var(--bg-3); color: var(--ink-3); }

  .dash-feed {
    border-left: 1px solid var(--line);
    padding: 20px 18px;
    background: var(--bg);
  }
  .feed-head { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 14px; }
  .feed-item {
    display: grid; grid-template-columns: 28px 1fr;
    gap: 10px; padding: 10px 0;
    border-bottom: 1px dashed var(--line);
    font-size: 12.5px;
  }
  .feed-item:last-child { border-bottom: none; }
  .feed-av {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--bg-3); border: 1px solid var(--line-2);
    color: var(--ink-2);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 10px;
  }
  .feed-text { line-height: 1.45; color: var(--ink-2); }
  .feed-text b { color: var(--ink); font-weight: 500; }
  .feed-time { font-family: var(--mono); font-size: 10px; color: var(--ink-4); display: block; margin-top: 2px; }

  .dash-cap {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
    color: var(--ink-3);
    max-width: 640px;
    margin-left: auto; margin-right: auto;
  }
  .dash-cap b { color: var(--ink); }

  @media (max-width: 1000px) {
    .dash-body { grid-template-columns: 1fr; }
    .dash-side, .dash-feed { border-right: none; border-left: none; border-bottom: 1px solid var(--line); }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .charts { grid-template-columns: 1fr; }
  }

  /* ---------- References ---------- */
  .refs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
  .ref {
    background: var(--bg);
    padding: 36px;
    transition: background .2s;
  }
  .ref:hover { background: var(--bg-1); }
  .ref-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px;
  }
  .ref-logo {
    display: flex; align-items: center; gap: 12px;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.02em;
  }
  .ref-logo .glyph {
    width: 30px; height: 30px;
    border-radius: 6px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
  }
  .ref-cat {
    font-family: var(--mono); font-size: 10.5px;
    color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em;
  }
  .ref-grid {
    display: grid; grid-template-columns: 90px 1fr; gap: 14px 18px;
    margin-top: 8px;
  }
  .ref-label {
    font-family: var(--mono); font-size: 10.5px;
    color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.1em;
    padding-top: 2px;
  }
  .ref-val { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
  .ref-val.result { color: var(--ink); }
  .ref-tech { display: flex; gap: 6px; flex-wrap: wrap; }
  .ref-tech .t {
    font-family: var(--mono); font-size: 10.5px;
    padding: 3px 8px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--ink-3);
  }
  @media (max-width: 800px) {
    .refs { grid-template-columns: 1fr; }
    .ref-grid { grid-template-columns: 80px 1fr; }
  }

  /* ---------- CTA banner ---------- */
  .cta-banner {
    margin-top: 0;
    padding: 80px 0;
    border-top: 1px solid var(--line);
    background:
      radial-gradient(ellipse 50% 80% at 70% 50%, rgba(249,115,22,0.12), transparent 70%),
      var(--bg);
    position: relative; overflow: hidden;
  }
  .cta-inner {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px;
    align-items: center;
  }
  .cta-inner h2 {
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.035em;
  }
  .cta-inner p { color: var(--ink-2); margin-top: 18px; font-size: 16px; max-width: 480px; }
  .cta-action { display: flex; gap: 12px; justify-content: flex-end; }
  @media (max-width: 800px) {
    .cta-inner { grid-template-columns: 1fr; }
    .cta-action { justify-content: flex-start; }
  }

  /* ---------- Contact ---------- */
  .contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; }
  .contact-left h2 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 16px; line-height: 1.05; }
  .contact-left p { color: var(--ink-2); }
  .contact-meta {
    margin-top: 36px;
    border-top: 1px solid var(--line);
    padding-top: 22px;
    display: grid; gap: 18px;
  }
  .contact-meta-row {
    display: grid; grid-template-columns: 100px 1fr; gap: 16px;
    font-size: 14px;
  }
  .contact-meta-row .k {
    font-family: var(--mono); font-size: 10.5px;
    color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.1em;
    padding-top: 4px;
  }
  .contact-meta-row .v { color: var(--ink); }
  .contact-meta-row .v.mono { font-family: var(--mono); font-size: 13px; }
  .contact-meta-row .v a:hover { color: var(--accent); }

  form.contact {
    display: grid; gap: 18px;
    padding: 36px;
    border: 1px solid var(--line);
    background: var(--bg-1);
    border-radius: 4px;
  }
  .field { display: grid; gap: 8px; }
  .field label {
    font-family: var(--mono); font-size: 10.5px;
    color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em;
  }
  .field input, .field textarea {
    background: var(--bg);
    border: 1px solid var(--line-2);
    border-radius: 3px;
    padding: 12px 14px;
    color: var(--ink);
    font-family: inherit; font-size: 14px;
    transition: border-color .15s, background .15s;
    resize: vertical;
  }
  .field input:focus, .field textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-2);
  }
  .field textarea { min-height: 120px; }
  .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .form-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 4px; gap: 14px;
  }
  .form-foot .note {
    font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  }
  .form-success {
    padding: 14px;
    background: rgba(22,163,74,0.10);
    border: 1px solid rgba(22,163,74,0.30);
    border-radius: 3px;
    font-size: 13px;
    color: var(--green);
    display: none;
  }
  .form-success.show { display: block; }

  @media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .row-2 { grid-template-columns: 1fr; }
  }

  /* ---------- Footer ---------- */
  footer.foot {
    border-top: 1px solid var(--line);
    padding: 48px 0 36px;
    color: var(--ink-3);
    font-size: 13px;
  }
  .foot-grid {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 40px; flex-wrap: wrap;
  }
  .foot-brand { max-width: 320px; }
  .foot-brand p { margin-top: 16px; color: var(--ink-3); font-size: 13px; line-height: 1.6; }
  .foot-links { display: flex; gap: 28px; flex-wrap: wrap; }
  .foot-links ul,
  .foot-links .menu { list-style: none; padding: 0; margin: 0; display: flex; gap: 28px; flex-wrap: wrap; }
  .foot-links li { list-style: none; margin: 0; padding: 0; }
  .foot-links li::marker { content: ""; }
  .foot-links a { color: var(--ink-3); transition: color .15s; }
  .foot-links a:hover { color: var(--ink); }
  .foot-bottom {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--mono); font-size: 11px;
    color: var(--ink-4);
    flex-wrap: wrap; gap: 12px;
  }

  /* ---------- Section head responsive ---------- */
  @media (max-width: 800px) {
    .section { padding: 80px 0; }
    .section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
    .section-head .col-left { position: static; }
  }

  /* ---------- Reveal on scroll ---------- */
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
  .reveal.in { opacity: 1; transform: none; }

  ::selection { background: var(--accent); color: #fff7ee; }

/* ---------- WP-specific overrides ---------- */
.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .nav { top: 46px; }
}
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important;
  width: 1px; word-wrap: normal !important;
}
.skip-link {
  position: absolute; left: -9999px; top: 16px;
  background: var(--accent); color: #fff7ee; padding: 10px 14px;
  font-family: var(--mono); font-size: 12px; z-index: 100;
  border-radius: 3px;
}
.skip-link:focus { left: 16px; }

/* Nav menu — WP default menu output mapped to nav-links style */
.nav-links ul,
.nav-links .menu {
  display: flex; gap: 28px;
  list-style: none; margin: 0; padding: 0;
}
.nav-links li { margin: 0; }
.nav-links li a {
  font-size: 13.5px; color: var(--ink-2); transition: color .15s;
}
.nav-links li a:hover,
.nav-links li.current-menu-item > a {
  color: var(--ink);
}

/* ---------- Mobile overhaul ----------
   The base `.wrap` padding (28px) and `.section` padding (120px) are sized
   for desktop. On phones they eat too much of the viewport. This block
   normalises everything to a tight, readable mobile layout. */
@media (max-width: 720px) {
  /* Tighter side padding on every container, including builder blocks.
     !important wins over inline-style from the Customizer "fluid" mode
     so even with that setting the phone still gets sane margins. */
  .wrap,
  .tdb-container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Vertical breathing room — less on phones. */
  .section { padding: 56px 0; }
  .hero    { padding: 80px 0 64px; }

  /* Hero typography scales down. clamp() handles most of it, but the
     letter-spacing / line-height look better tightened on phones. */
  .hero h1 { letter-spacing: -0.02em; line-height: 1.08; }
  .hero-sub { font-size: 15px; }
  .hero-meta > div { padding: 16px 0; padding-right: 14px; padding-left: 14px; }
  .hero-meta .num { font-size: 22px; }

  /* Buttons full-width on phones so they're easier to tap. */
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .hero-ctas { flex-direction: column; align-items: stretch; }

  /* Chaos card padding reduced — 40px on each side was crowding the chips. */
  .chaos-side { padding: 24px; }

  /* Services / refs / dev-flow inner spacing */
  .service     { padding: 28px 22px; }
  .ref         { padding: 22px 20px; }
  .dev-step    { padding: 18px 16px; }

  /* CTA banner */
  .cta-banner .cta-inner { padding: 32px 22px; }
  .cta-banner h2 { font-size: 24px; }

  /* Contact section: stack to one column */
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .contact { padding: 24px 20px; }

  /* Footer */
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .foot-brand { max-width: none; }
  .foot-brand p { font-size: 13px; }
  .foot-links,
  .foot-links ul,
  .foot-links .menu {
    flex-direction: column;
    gap: 0;
  }
  .foot-links a {
    display: block;
    padding: 12px 0;
    font-size: 14px;
    color: var(--ink-2);
    border-bottom: 1px solid var(--line);
  }
  .foot-links li:last-child a,
  .foot-links > a:last-child { border-bottom: none; }
  footer.foot { padding: 40px 0 28px; }
  .foot-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 24px;
    padding-top: 20px;
  }
}

/* Even tighter on very narrow phones (iPhone SE-era width). */
@media (max-width: 380px) {
  .wrap,
  .tdb-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .section { padding: 48px 0; }
  .hero    { padding: 64px 0 48px; }
}

/* ---------- Performance hints ----------
   Keep paint and layout costs scoped so Safari doesn't redraw the whole
   page when a chip animates or a chart bar grows. */
.chaos-card { contain: layout paint; }
.dash        { contain: layout paint; }
.chaos-items { contain: layout paint; }

/* ---------- Reduced motion ----------
   Honor the system preference: a user with "Reduce motion" gets a static
   page with zero infinite animations. Big CPU and battery win on Mac. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Tangerine — extra builder blocks (team / stack / process / timeline / signals / columns)
   ============================================================ */

/* Shared "tag pill" used by team/timeline blocks. */
.tg-tag {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--bg-1);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ---------- Team (portrait cards) ---------- */
.tg-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}
.tg-team-card {
  display: flex; flex-direction: column;
  gap: 24px;
}
.tg-team-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  background-color: var(--bg-1);
  background-image:
    repeating-linear-gradient(135deg,
      transparent 0 12px,
      rgba(0,0,0,0.04) 12px 13px
    );
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.tg-team-role {
  position: absolute; top: 16px; right: 16px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 6px 10px;
}
.tg-team-initial {
  font-family: var(--mono);
  font-size: 180px;
  line-height: 1;
  color: rgba(0,0,0,0.18);
  font-weight: 500;
  letter-spacing: -0.04em;
}
.tg-team-cap {
  position: absolute; bottom: 14px; left: 16px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}
.tg-team-body { display: flex; flex-direction: column; gap: 14px; }
.tg-team-name {
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 0;
}
.tg-team-meta {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  margin: 0;
}
.tg-team-desc {
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
}
.tg-team-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* ---------- Stack (categorized tech rows) ---------- */
.tg-stack-table {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-1);
}
.tg-stack-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 26px 28px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.tg-stack-row:last-child { border-bottom: none; }
.tg-stack-cat { display: flex; flex-direction: column; gap: 6px; }
.tg-stack-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
}
.tg-stack-label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.tg-stack-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.tg-stack-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--ink);
}
.tg-stack-pill.is-muted { color: var(--ink-4); }
.tg-stack-pill.is-muted .tg-stack-dot { background: var(--ink-4); opacity: 0.6; }
.tg-stack-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ---------- Process (2-col grid of cards) ---------- */
.tg-process-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-1);
  overflow: hidden;
}
.tg-process-card {
  padding: 32px 36px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 12px;
}
.tg-process-card:nth-child(2n) { border-right: none; }
.tg-process-card:nth-last-child(-n+2):not(:nth-child(2n-1)) { border-bottom: none; }
.tg-process-card:last-child { border-bottom: none; }
.tg-process-grid > .tg-process-card:nth-child(2n-1):last-child { border-bottom: none; }
.tg-process-eyebrow { display: flex; align-items: center; gap: 12px; }
.tg-process-num {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
}
.tg-process-label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.tg-process-title {
  font-size: 19px;
  letter-spacing: -0.02em;
  margin: 0;
}
.tg-process-desc {
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
}

/* ---------- Timeline (vertical) ---------- */
.tg-timeline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.tg-timeline-list::before {
  content: "";
  position: absolute;
  left: 11px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--line-2);
}
.tg-tl-item {
  position: relative;
  padding: 0 0 36px 48px;
}
.tg-tl-item:last-child { padding-bottom: 0; }
.tg-tl-dot {
  position: absolute;
  left: 4px; top: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  box-sizing: border-box;
}
.tg-tl-item.is-current .tg-tl-dot {
  background: var(--accent);
}
.tg-tl-year {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--accent);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.tg-tl-title {
  font-size: 19px;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.tg-tl-desc {
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0 0 12px;
  max-width: 720px;
}
.tg-tl-tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Signals (list rows with side meta + CTA) ---------- */
.tg-signals-list {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-1);
  overflow: hidden;
}
.tg-signal-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 32px;
  align-items: center;
  padding: 22px 28px;
  border-bottom: 1px solid var(--line);
}
.tg-signal-row:last-child { border-bottom: none; }
.tg-signal-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tg-signal-title {
  font-size: 17px;
  letter-spacing: -0.02em;
  margin: 0;
}
.tg-signal-desc {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  margin: 0;
}
.tg-signal-badge {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-2);
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  white-space: nowrap;
}
.tg-signal-cta {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-3);
  font-size: 13.5px;
  text-decoration: none;
  transition: color .15s;
}
.tg-signal-cta:hover { color: var(--accent); }
.tg-signal-cta svg { transition: transform .15s; }
.tg-signal-cta:hover svg { transform: translateX(3px); }

/* ---------- Columns (generic responsive 2/3/4/5) ---------- */
.tg-cols-grid {
  display: grid;
  gap: 24px;
}
.tg-cols-2 { grid-template-columns: repeat(2, 1fr); }
.tg-cols-3 { grid-template-columns: repeat(3, 1fr); }
.tg-cols-4 { grid-template-columns: repeat(4, 1fr); }
.tg-cols-5 { grid-template-columns: repeat(5, 1fr); }

.tg-col {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
}
.tg-cols-style-card .tg-col {
  padding: 24px 22px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.tg-cols-style-numbered .tg-col {
  padding: 24px 22px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 6px;
  gap: 14px;
}
.tg-col-num {
  font-family: var(--mono);
  font-size: 32px;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
}
.tg-col-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.tg-col-title {
  font-size: 17px;
  letter-spacing: -0.02em;
  margin: 0;
}
.tg-col-content {
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.65;
}
.tg-col-content > *:first-child { margin-top: 0; }
.tg-col-content > *:last-child { margin-bottom: 0; }

/* ---------- Responsive (≤ 960px: collapse to fewer columns) ---------- */
@media (max-width: 960px) {
  .tg-team-grid       { grid-template-columns: 1fr; gap: 28px; }
  .tg-process-grid    { grid-template-columns: 1fr; }
  .tg-process-card    { border-right: none; }
  .tg-process-card:not(:last-child) { border-bottom: 1px solid var(--line); }
  .tg-signal-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px 22px;
  }
  .tg-signal-badge { justify-self: start; }
  .tg-cols-5 { grid-template-columns: repeat(3, 1fr); }
  .tg-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .tg-cols-3 { grid-template-columns: repeat(2, 1fr); }
  .tg-stack-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 22px;
  }
}

@media (max-width: 720px) {
  .tg-team-initial    { font-size: 120px; }
  .tg-process-card    { padding: 24px 22px; }
  .tg-signal-title    { font-size: 16px; }
  .tg-cols-grid       { gap: 16px; }
  .tg-cols-5,
  .tg-cols-4,
  .tg-cols-3,
  .tg-cols-2          { grid-template-columns: 1fr; }
  .tg-cols-style-card .tg-col,
  .tg-cols-style-numbered .tg-col { padding: 20px 18px; }
  .tg-stack-row       { padding: 20px 18px; }
  .tg-stack-pill      { font-size: 13px; padding: 7px 14px; }
  .tg-tl-item         { padding-left: 38px; padding-bottom: 28px; }
  .tg-timeline-list::before { left: 7px; }
  .tg-tl-dot          { left: 0; width: 14px; height: 14px; }
}

/* ============================================================
   Tangerine Builder ↔ theme bridge.
   The builder is theme-agnostic and emits its own .tdb-* classes.
   Here we map them to the Tangerine look so pages built with the
   builder visually match the rest of the site.
   ============================================================ */

/* Eyebrow — same orange dash + uppercase mono as native theme eyebrows. */
.tdb-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}
.tdb-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
}

/* Heading — match the theme's section heading typography. */
.tdb-heading {
  font-family: var(--sans);
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink);
  max-width: 720px;
  margin: 0 0 24px;
}

/* Body text — readable color + line-height; respects narrow/normal width
   classes defined on the parent .tdb-text block. */
.tdb-text__body {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.65;
}
.tdb-text__body p { margin: 0 0 1em; }
.tdb-text__body p:last-child { margin-bottom: 0; }
.tdb-text__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.tdb-text__body a:hover { color: var(--accent-2, #c2410c); }
.tdb-text__body h2 { font-size: clamp(22px, 2.4vw, 30px); margin: 28px 0 14px; letter-spacing: -0.02em; color: var(--ink); }
.tdb-text__body h3 { font-size: 19px; margin: 22px 0 10px; letter-spacing: -0.02em; color: var(--ink); }
.tdb-text__body ul,
.tdb-text__body ol { padding-left: 22px; margin: 0 0 1em; }
.tdb-text__body li { margin: 6px 0; }
.tdb-text__body strong { color: var(--ink); font-weight: 600; }
.tdb-text__body code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--bg-1);
  padding: 2px 6px;
  border-radius: 3px;
}

/* Hero block bridge — match the theme's hero typography. */
.tdb-hero__title {
  font-family: var(--sans);
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 24px;
}
.tdb-hero__subtitle {
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.55;
  max-width: 640px;
  margin: 0 0 32px;
}

/* CTA block bridge */
.tdb-cta__heading {
  font-family: var(--sans);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink);
}
.tdb-cta__sub {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.6;
}

/* Button bridge — builder buttons inherit the theme's button system so
   builder pages match native theme buttons (square 2px corners, theme
   colours). Without this, the builder's neutral fallback (4px rounded)
   would clash with the theme's near-square buttons. */
.tdb-builder .tdb-btn {
  padding: 13px 20px;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: 1px solid var(--line-2);
  gap: 10px;
  transition: background .18s, border-color .18s, transform .18s;
}
.tdb-builder .tdb-btn--ghost,
.tdb-builder .tdb-btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.tdb-builder .tdb-btn--ghost:hover,
.tdb-builder .tdb-btn--outline:hover {
  background: var(--bg-2);
  border-color: #3a3a3a;
}
.tdb-builder .tdb-btn--primary,
.tdb-builder .tdb-btn--accent {
  background: var(--accent);
  color: #fff7ee;
  border-color: var(--accent);
  font-weight: 600;
}
.tdb-builder .tdb-btn--primary:hover,
.tdb-builder .tdb-btn--accent:hover {
  background: #c2410c;
  border-color: #c2410c;
}
.tdb-builder .tdb-btn--dark {
  background: var(--ink);
  color: #ffffff;
  border-color: var(--ink);
}
.tdb-builder .tdb-btn--dark:hover {
  background: #333333;
  border-color: #333333;
}

/* Builder block section spacing — match the theme's vertical rhythm. */
.tdb-builder .tdb-block { padding: 80px 0; }
.tdb-builder .tdb-block + .tdb-block { border-top: 1px solid var(--line); }
@media (max-width: 720px) {
  .tdb-builder .tdb-block { padding: 56px 0; }
}

/* Builder containers respect the theme's max width. */
.tdb-builder .tdb-container {
  max-width: var(--maxw);
  padding-left: 28px;
  padding-right: 28px;
}
@media (max-width: 720px) {
  .tdb-builder .tdb-container { padding-left: 18px; padding-right: 18px; }
}

/* ============================================================
   Builder bridge — Feature grid / Media row / Comparison table.
   The builder ships these as generic blocks with neutral styling;
   here the Tangerine theme restyles them to match its own look.
   ============================================================ */

/* ---------- Feature grid ---------- */
.tdb-builder .tdb-features__grid {
  background: var(--line);
  border-color: var(--line);
  border-radius: 8px;
  gap: 1px;
}
.tdb-builder .tdb-feature {
  background: var(--bg-1);
  padding: 32px 28px;
  gap: 12px;
}
.tdb-builder .tdb-feature__num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
}
.tdb-builder .tdb-feature__icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}
.tdb-builder .tdb-feature__title {
  font-size: 17px;
  letter-spacing: -0.02em;
  margin: 4px 0 0;
  color: var(--ink);
}
.tdb-builder .tdb-feature__desc {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- Media row ---------- */
.tdb-builder .tdb-media-row__grid { gap: 56px; }
.tdb-builder .tdb-media-row__text .tdb-eyebrow { margin-bottom: 14px; }
.tdb-builder .tdb-media-row__text .tdb-heading {
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.12;
  margin-bottom: 16px;
}
.tdb-builder .tdb-media-row__desc {
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.65;
}
.tdb-builder .tdb-checklist li { font-size: 14.5px; color: var(--ink); }
.tdb-builder .tdb-checklist__icon { background: var(--green); }
.tdb-builder .tdb-media-row__img {
  border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: 0 12px 36px rgba(0,0,0,0.07);
}
.tdb-builder .tdb-media-row__ph {
  border: 2px dashed var(--line-2);
  border-radius: 10px;
  background: var(--bg-1);
  color: var(--ink-3);
}

/* ---------- Comparison table ---------- */
.tdb-builder .tdb-compare__table {
  border: 1px solid var(--line);
  border-radius: 8px;
}
.tdb-builder .tdb-compare__row { border-bottom: 1px solid var(--line); }
.tdb-builder .tdb-compare__cat,
.tdb-builder .tdb-compare__them,
.tdb-builder .tdb-compare__us { padding: 18px 22px; font-size: 14.5px; }
.tdb-builder .tdb-compare__cat {
  font-weight: 600;
  color: var(--ink);
  background: var(--bg-1);
  border-right: 1px solid var(--line);
}
.tdb-builder .tdb-compare__them {
  color: var(--ink-3);
  border-right: 1px solid var(--line);
}
.tdb-builder .tdb-compare__us {
  color: var(--ink);
  background: var(--accent-soft);
}
.tdb-builder .tdb-compare__row--head .tdb-compare__cat,
.tdb-builder .tdb-compare__row--head .tdb-compare__them,
.tdb-builder .tdb-compare__row--head .tdb-compare__us {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
}
.tdb-builder .tdb-compare__row--head .tdb-compare__us { color: var(--accent); }

@media (max-width: 600px) {
  .tdb-builder .tdb-compare__them,
  .tdb-builder .tdb-compare__us { border-top: 1px solid var(--line); }
}