/*
Theme Name: Tomas Kubilius
Theme URI: https://tomaskubilius.com
Author: Tomas Kubilius
Description: Custom black-and-white portfolio/service theme for tomaskubilius.com.
Version: 7.1
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: tomas-kubilius
*/



/* ===== merged design system + page styles ===== */


/* from home.html */
/* V7 refinement: original typography, palette and grid intentionally preserved. */
    :root{
      --ink:#0a0a0a;
      --paper:#ffffff;
      --paper-2:#f4f3ef;
      --line:#e2e0d8;
      --line-dark:#2a2a28;
      --mute:#6f6e68;
      --mute-dark:#9a9a94;
      --accent:#93764a;
    }
    * { box-sizing: border-box; margin:0; padding:0; }
    body { margin: 0; }
    a { color:inherit; text-decoration: none; }
    .display{ font-family:'Archivo',sans-serif; font-weight:900; line-height:0.95; letter-spacing:-0.01em; text-transform:uppercase; }
    .voice{ font-family:'Fraunces',serif; font-style:italic; font-weight:500; text-transform:none; }
    .wrap{ max-width:1180px; margin:0 auto; padding:0 40px; }

    .btn{ display:inline-flex; align-items:center; gap:10px; padding:16px 30px; font-family:'Inter',sans-serif; font-size:14px; font-weight:700; letter-spacing:0.02em; border:1.5px solid var(--ink); background:var(--ink); color:var(--paper); transition:background .2s ease,color .2s ease,transform .2s ease; }
    .btn:hover{ background:var(--paper); color:var(--ink); transform:translateY(-1px); }
    .btn-outline{ background:transparent; color:var(--ink); }
    .btn-outline:hover{ background:var(--ink); color:var(--paper); }
    .btn-light{ border-color:var(--paper); background:var(--paper); color:var(--ink); }
    .btn-light:hover{ background:transparent; color:var(--paper); }

    /* header */
    header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.92); border-bottom:1px solid var(--line); }
    .nav-inner{ display:flex; align-items:center; justify-content:space-between; height:84px; }
    .logo{ font-family:'Archivo',sans-serif; font-weight:900; font-size:19px; letter-spacing:-0.01em; color:var(--ink); text-transform:uppercase; }
    nav ul{ list-style:none; display:flex; gap:34px; }
    nav a{ font-family:'Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.02em; color:var(--ink); transition:color .15s ease; }
    nav a:hover{ color:var(--mute); }
    .nav-right{ display:flex; align-items:center; gap:22px; }
.nav-toggle{ display:none; align-items:center; justify-content:center; width:34px; height:34px; padding:0; margin:0; background:none; border:0; cursor:pointer; flex-direction:column; gap:5px; }
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

    /* section shared */
    .section-head{ display:grid; grid-template-columns:220px 1fr; gap:40px; padding-bottom:56px; align-items:end; }
    .kicker{ font-family:'Inter',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.1em; color:var(--mute); text-transform:uppercase; }
    .dark .kicker{ color:var(--mute-dark); }
    .sec-title{ font-size:clamp(34px,4vw,52px); color:var(--ink); }
    .dark .sec-title{ color:var(--paper); }

    /* hero */
    .hero:has(.hero-left){ display:grid; grid-template-columns:1fr 1fr; min-height:620px; container-type:inline-size; }
    .hero-left{ background:var(--ink); color:var(--paper); padding:72px 56px 0; padding-left:max(40px, calc((100cqw - 1180px) / 2 + 40px)); display:flex; flex-direction:column; justify-content:space-between; }
    .eyebrow{ font-family:'Inter',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.1em; color:var(--mute-dark); margin-bottom:26px; text-transform:uppercase; }
    .hero-h{ font-family:'Inter',sans-serif; font-size:16px; font-weight:600; margin-bottom:14px; color:var(--mute-dark); }
    .hero-title{ font-size:clamp(46px,5.6vw,68px); color:var(--paper); }
    .hero-body{ max-width:400px; margin-top:28px; padding-top:26px; padding-bottom:36px; border-top:1px solid var(--line-dark); font-family:'Inter',sans-serif; font-size:15px; color:var(--mute-dark); line-height:1.6; display:flex; justify-content:space-between; gap:20px; align-items:flex-end; }
    .hero-body svg{ flex-shrink:0; }
    .hero-cta{ margin-top:32px; padding-bottom:40px; }
    .hero-right{ position:relative; background:var(--ink); overflow:hidden; isolation:isolate; }
    .hero-right::before{ content:''; position:absolute; inset:0; background:var(--ink); z-index:0; }
    .hero-right img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; object-position:center bottom; display:block; filter:grayscale(1) contrast(1.06); transform:scale(1.015); transform-origin:center bottom; }
    .hero-stats{ position:absolute; bottom:0; left:0; right:0; display:grid; grid-template-columns:repeat(3,1fr); background:var(--paper); border-top:1px solid var(--line); }
    .hero-stat{ padding:22px 30px; }
    .hero-stat:not(:last-child){ border-right:1px solid var(--line); }
    .hero-stat .num{ font-family:'Archivo',sans-serif; font-weight:900; font-size:28px; color:var(--ink); }
    .hero-stat .lbl{ font-family:'Inter',sans-serif; font-size:11px; letter-spacing:0.05em; color:var(--mute); margin-top:2px; text-transform:uppercase; }

    /* services */
    .svc-list{ border-top:1px solid var(--line); }
    .svc-row{ display:grid; grid-template-columns:60px minmax(240px,320px) 1fr 48px; align-items:center; gap:24px; padding:32px 0; border-bottom:1px solid var(--line); cursor:pointer; transition:background .15s ease; }
    .svc-row:hover{ background:var(--paper-2); }
    .svc-num{ font-family:'Archivo',sans-serif; font-weight:900; font-size:13px; color:var(--mute); }
    .svc-name{ font-family:'Archivo',sans-serif; font-weight:700; font-size:26px; color:var(--ink); text-transform:none; }
    .svc-desc{ font-family:'Inter',sans-serif; font-size:14px; color:var(--mute); line-height:1.6; max-width:480px; }
    .svc-arrow{ position:relative; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--line-dark); color:var(--ink); transition:transform .2s ease,border-color .2s ease; }
    .svc-arrow::before{ content:''; position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--accent); animation:svcArrowPulse 2.4s ease-out infinite; pointer-events:none; }
    .svc-arrow svg{ position:relative; z-index:1; width:16px; height:16px; }
    .svc-row:hover .svc-arrow{ transform:translate(3px,-3px); border-color:var(--accent); }
    .svc-row:nth-child(2) .svc-arrow::before{ animation-delay:.5s; }
    .svc-row:nth-child(3) .svc-arrow::before{ animation-delay:1s; }
    @keyframes svcArrowPulse{ 0%{ transform:scale(1); opacity:.6; } 70%{ transform:scale(1.7); opacity:0; } 100%{ transform:scale(1.7); opacity:0; } }

    /* process */
    .process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
    .process-card{ background:var(--paper-2); padding:36px 30px; }
    .process-title{ font-family:'Archivo',sans-serif; font-weight:800; font-size:20px; margin:16px 0 12px; text-transform:none; color:var(--ink); }

    /* results (dark stats) */
    .dark{ background:var(--ink); color:var(--paper); }
    .stat-row{ display:grid; grid-template-columns:280px 1fr auto; align-items:center; gap:28px; padding:34px 0; border-top:1px solid var(--line-dark); }
    .stat-list .stat-row:last-child{ border-bottom:1px solid var(--line-dark); }
    .stat-num{ font-family:'Archivo',sans-serif; font-weight:900; font-size:clamp(48px,6vw,72px); line-height:0.9; color:var(--paper); }
    .stat-name{ font-family:'Inter',sans-serif; font-size:16px; font-weight:600; margin-bottom:4px; color:var(--paper); }
    .stat-sub{ font-family:'Inter',sans-serif; font-size:13px; color:var(--mute-dark); }
    .stat-link{ font-family:'Inter',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.04em; color:var(--paper); border-bottom:1px solid var(--paper); padding-bottom:2px; white-space:nowrap; text-transform:uppercase; }

    @keyframes case-link-pulse{
      0%,100%{ opacity:.62; transform:translateY(0); }
      50%{ opacity:1; transform:translateY(-1px); }
    }
    .stat-link{ display:inline-block; animation:case-link-pulse 1.8s ease-in-out infinite; }
    .stat-link:hover{ animation-play-state:paused; opacity:1; }
    .stat-foot{ font-family:'Inter',sans-serif; font-size:12px; color:var(--mute-dark); margin-top:28px; max-width:560px; }

    /* case study modal (pure CSS, :target-driven) */
    .case-modal{ display:none; position:fixed; inset:0; z-index:500; }
    .case-modal:target{ display:block; }
    .case-modal-overlay{ position:absolute; inset:0; background:rgba(10,10,10,0.86); }
    .case-modal-panel{ position:relative; width:760px; max-width:calc(100% - 48px); margin:64px auto; max-height:calc(100% - 128px); overflow-y:auto; background:var(--paper); color:var(--ink); padding:60px 64px 64px; }
    .case-modal-close{ position:absolute; top:26px; right:26px; width:42px; height:42px; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--ink); color:var(--ink); background:var(--paper); transition:background .15s ease,color .15s ease; }
    .case-modal-close:hover{ background:var(--ink); color:var(--paper); }
    .case-kicker{ font-family:'Inter',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.1em; color:var(--mute); text-transform:uppercase; margin-bottom:20px; }
    .case-title{ font-size:clamp(28px,3.2vw,38px); color:var(--ink); margin-bottom:24px; }
    .case-meta-row{ display:flex; gap:32px; flex-wrap:wrap; padding:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:40px; }
    .case-meta-row div .lbl{ font-family:'Inter',sans-serif; font-size:11px; letter-spacing:0.05em; color:var(--mute); text-transform:uppercase; margin-bottom:4px; }
    .case-meta-row div .val{ font-family:'Archivo',sans-serif; font-weight:800; font-size:15px; color:var(--ink); text-transform:none; }
    .case-block{ margin-bottom:34px; }
    .case-block h3{ font-family:'Archivo',sans-serif; font-weight:800; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink); margin-bottom:12px; }
    .case-block p{ font-family:'Inter',sans-serif; font-size:15px; line-height:1.75; color:var(--mute); max-width:100%; }
    .case-result-num{ font-family:'Archivo',sans-serif; font-weight:900; font-size:clamp(40px,5vw,56px); color:var(--ink); line-height:0.9; margin-bottom:6px; }
    .case-disclaimer{ font-family:'Inter',sans-serif; font-size:12px; color:var(--mute); margin-top:8px; padding-top:24px; border-top:1px solid var(--line); }
    .case-list{ list-style:none; margin:0; padding:0; }
    .case-list li{ position:relative; padding-left:22px; margin-bottom:14px; font-family:'Inter',sans-serif; font-size:15px; line-height:1.6; color:var(--mute); }
    .case-list li::before{ content:''; position:absolute; left:0; top:9px; width:6px; height:6px; background:var(--ink); }
    .case-list li strong{ color:var(--ink); font-weight:700; }
    .case-stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:10px; }
    .case-stat-cell{ background:var(--paper); padding:26px 24px; }
    .case-stat-cell .num{ font-family:'Archivo',sans-serif; font-weight:900; font-size:clamp(30px,3.2vw,40px); color:var(--ink); line-height:0.9; }
    .case-stat-cell .lbl{ font-family:'Inter',sans-serif; font-size:12px; color:var(--mute); margin-top:8px; text-transform:uppercase; letter-spacing:0.03em; }
    .case-image-link{ display:block; cursor:zoom-in; position:relative; }
    .case-image-link:after{ content:'⤢ Tap to view full size'; position:absolute; right:10px; bottom:20px; background:rgba(10,10,10,.78); color:#fff; font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.02em; padding:6px 10px; border-radius:4px; pointer-events:none; }
    .img-lightbox{ display:none; position:fixed; inset:0; z-index:700; background:rgba(8,8,8,.96); }
    .img-lightbox:target{ display:flex; align-items:center; justify-content:center; padding:40px; }
    .img-lightbox-overlay{ position:absolute; inset:0; }
    .img-lightbox img{ position:relative; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; z-index:1; box-shadow:0 10px 40px rgba(0,0,0,.5); }
    .img-lightbox-close{ position:absolute; top:18px; right:18px; z-index:2; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center; font-size:26px; line-height:1; text-decoration:none; font-family:'Inter',sans-serif; }
    .img-lightbox-close:hover{ background:rgba(255,255,255,.22); }
    .case-image{ width:100%; display:block; border:1px solid var(--line); margin-bottom:10px; }
    .case-image-cap{ font-family:'Inter',sans-serif; font-size:12px; color:var(--mute); margin-bottom:32px; }

    /* about split */
    .about-split{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
    .about-split>div{ padding:64px 56px; }
    .about-quote{ border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; }
    .quote-text{ font-family:'Inter',sans-serif; font-weight:600; font-size:20px; line-height:1.55; color:var(--ink); }
    .quote-name{ margin-top:30px; font-family:'Inter',sans-serif; font-size:13px; font-weight:700; letter-spacing:0.04em; color:var(--mute); text-transform:uppercase; }
    .about-facts p{ font-family:'Inter',sans-serif; font-size:15px; color:var(--mute); line-height:1.7; max-width:460px; margin-top:20px; }
    .about-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px; padding-top:32px; border-top:1px solid var(--line); }
    .about-stats .num{ font-family:'Archivo',sans-serif; font-weight:900; font-size:28px; color:var(--ink); }
    .about-stats .lbl{ font-family:'Inter',sans-serif; font-size:12px; color:var(--mute); margin-top:6px; }
    .about-tags{ display:flex; gap:0; margin-top:34px; border-top:1px solid var(--line); }
    .about-tags span{ flex:1; padding:16px 0 0; font-family:'Inter',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.06em; color:var(--mute); text-transform:uppercase; }
    .about-tags span:first-child{ border-right:1px solid var(--line); padding-right:20px; }
    .about-tags span:last-child{ padding-left:20px; }
    .cert-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
    .cert-badge{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; background:var(--ink); color:var(--paper); border-radius:6px; font-family:'Inter',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; }
    .cert-badge svg{ flex-shrink:0; }

    /* work */
    .work-card { transition: transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease; }
    .work-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(10,10,9,0.16); }
    .work-img { transition: transform .6s cubic-bezier(.16,.84,.44,1); }
    .work-card:hover .work-img { transform: scale(1.08); }
    .work-name{ font-family:'Archivo',sans-serif; font-weight:700; font-size:19px; color:var(--ink); margin:0 0 4px 0; text-transform:none; }
    .work-cat{ font-family:'Inter',sans-serif; font-size:13px; color:var(--mute); }

    /* testimonials */
    .test-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
    .test-card{ background:var(--paper); padding:44px 38px; }
    .test-mark{ font-family:'Fraunces',serif; font-size:42px; font-style:italic; color:var(--line); line-height:1; margin-bottom:8px; }
    .test-quote{ font-family:'Inter',sans-serif; font-size:16px; line-height:1.6; color:var(--ink); margin-bottom:22px; }
    .test-name{ font-family:'Inter',sans-serif; font-size:13px; font-weight:700; letter-spacing:0.01em; color:var(--ink); text-transform:uppercase; }
    .test-role{ font-family:'Inter',sans-serif; font-size:12px; color:var(--mute); margin-top:2px; }

    /* logos */
    .logo-strip{ padding:56px 0; border-top:1px solid var(--line); }
    .logo-marquee { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); }
    .logo-track { display: flex; align-items: center; gap: 64px; width: max-content; animation: logo-scroll 34s linear infinite; }
    .logo-track:hover { animation-play-state: paused; }
    .logo-track img { height: 40px; width: auto; flex-shrink: 0; filter:grayscale(1); opacity: 0.6; transition: opacity .15s ease; }
    .logo-track img:hover { opacity: 1; }
    @keyframes logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* faq */
    .faq-list{ border-top:1px solid var(--line); }
    .faq-row{ display:grid; grid-template-columns:360px 1fr; gap:40px; padding:32px 0; border-bottom:1px solid var(--line); }
    .faq-q{ font-family:'Archivo',sans-serif; font-weight:700; font-size:19px; color:var(--ink); text-transform:none; }
    .faq-a{ font-family:'Inter',sans-serif; font-size:14px; color:var(--mute); line-height:1.7; max-width:540px; }

    /* final cta */
    .cta{ padding:120px 0 70px; }
    .cta-title{ font-size:clamp(46px,6.5vw,80px); color:var(--paper); }
    .cta-flex{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:44px; padding-top:36px; border-top:1px solid var(--line-dark); align-items:center; }
    .cta-flex p{ color:var(--mute-dark); font-family:'Inter',sans-serif; font-size:15px; line-height:1.6; max-width:420px; }
    .cta-form{ display:flex; justify-content:flex-end; gap:14px; align-items:center; }
    .cta-form .btn{ padding:20px 30px; font-size:14px; }
    .cta-email{ font-family:'Inter',sans-serif; font-size:13px; color:var(--mute-dark); border-bottom:1px solid var(--line-dark); padding-bottom:2px; }

    /* footer */
    footer{ background:var(--ink); padding:70px 0 40px; }
    .foot-tagline{ font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:56px; line-height:1.05; color:var(--paper); text-align:center; margin-bottom:56px; }
    .foot-inner{ display:flex; align-items:center; justify-content:space-between; padding-top:28px; border-top:1px solid var(--line-dark); flex-wrap:wrap; gap:16px; }
    .foot-inner p{ font-family:'Inter',sans-serif; font-size:12px; color:var(--mute-dark); }
    .foot-links{ display:flex; gap:28px; }
    .foot-links a{ font-family:'Inter',sans-serif; font-size:12px; color:var(--mute-dark); transition:color .15s ease; }
    .foot-links a:hover{ color:var(--paper); }
  

    /* v2 layout + responsive improvements */
    html{ scroll-behavior:smooth; }
    body{ overflow-x:hidden; background:var(--paper); }
    .site-shell{ width:100%; max-width:1440px; margin:0 auto; background:var(--paper); font-family:'Inter',sans-serif; overflow-x:hidden; }
    .hero-copy{ width:100%; max-width:520px; }
    .hero-cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
    .hero-text-link{ font-family:'Inter',sans-serif; font-size:13px; font-weight:700; color:var(--paper); border-bottom:1px solid var(--line-dark); padding-bottom:3px; }
    .hero-channels{ padding:0 0 34px; font-family:'Inter',sans-serif; font-size:11px; line-height:1.5; letter-spacing:.05em; text-transform:uppercase; color:var(--mute-dark); }
    .about-quote .quote-text{ max-width:560px; }
    .test-grid{ grid-template-columns:repeat(2,1fr); }

    @media (max-width: 1050px){
      .wrap{ padding-left:28px; padding-right:28px; }
      .hero-left{ padding:58px 38px 0; padding-left:40px; }
      .about-split>div{ padding:52px 38px; }
      .process-grid{ grid-template-columns:repeat(2,1fr); }
      .section-head{ grid-template-columns:170px 1fr; gap:28px; }
      .faq-row{ grid-template-columns:280px 1fr; }
      .about-stats{ grid-template-columns:repeat(2,1fr); }
    }

    @media (max-width: 760px){
      .nav-inner{ height:70px; }
      /* mobile nav handled globally */
      .nav-right .btn{ padding:12px 16px; font-size:12px; }
      .logo{ font-size:16px; }
      .hero:has(.hero-left){ grid-template-columns:1fr; min-height:0; }
      .hero-left{ padding:54px 24px 0; min-height:590px; padding-left:22px; }
      .hero-title{ font-size:clamp(46px,15vw,70px); }
      .hero-body{ max-width:none; margin-top:34px; }
      .hero-right{ min-height:560px; order:-1; }
      .hero-right img{ position:absolute; inset:0; }
      .hero-stats{ display:none; }
      .hero-cta{ margin-top:18px; padding-bottom:20px; }
      .img-lightbox:target{ padding:10px; }
      .img-lightbox-close{ width:36px; height:36px; font-size:22px; top:10px; right:10px; }
      .hero-stat{ padding:18px 20px; }
      .hero-stat .num{ font-size:24px; }
      .hero-stat .lbl{ font-size:9px; line-height:1.4; }
      .section-head{ grid-template-columns:1fr; gap:14px; padding-bottom:34px; }
      .svc-row{ grid-template-columns:42px 1fr 24px; gap:14px; padding:26px 0; }
      .svc-desc{ grid-column:2 / 4; }
      .svc-name{ font-size:22px; }
      .about-split{ grid-template-columns:1fr; }
      .about-split>div{ padding:54px 24px; }
      .about-quote{ border-right:0; border-bottom:1px solid var(--line); min-height:0; }
      .quote-text{ font-size:18px; }
      .cert-row{ margin-top:26px; }
      .cert-badge{ font-size:10px; }
      .process-grid{ grid-template-columns:1fr; }
      .stat-row{ grid-template-columns:1fr auto; gap:10px; padding:20px 0; }
      .stat-num{ grid-column:1 / 3; }
      .stat-name{ font-size:15px; }
      .stat-link{ font-size:10px; }
      .case-modal-panel{ width:auto; max-width:calc(100% - 12px); margin:8px auto; max-height:calc(100% - 16px); padding:48px 14px 30px; }
      .case-image-link{ margin:0 -14px; }
      .case-image{ width:calc(100% + 28px); max-width:calc(100% + 28px); }
      .case-stat-grid{ grid-template-columns:1fr; }
      .test-grid{ grid-template-columns:1fr; }
      .test-card{ padding:34px 26px; }
      .logo-track{ gap:44px; }
      .logo-track img{ height:34px; }
      .logo-strip{ padding:32px 0; }
      .faq-row{ grid-template-columns:1fr; gap:12px; padding:26px 0; }
      .cta{ padding:84px 0 54px; }
      .cta-flex{ grid-template-columns:1fr; }
      .cta-form{ justify-content:flex-start; align-items:flex-start; flex-direction:column-reverse; }
      .cta-title{ font-size:clamp(44px,14vw,70px); }
      footer{ padding-top:50px; }
      .foot-inner{ align-items:flex-start; flex-direction:column; }
    }

    @media (max-width: 430px){
      .hero-left{ min-height:620px; }
      .hero-right{ min-height:500px; }
      .hero-cta .btn{ width:100%; justify-content:center; }
      .about-stats{ grid-template-columns:1fr 1fr; gap:18px 12px; }
      .about-stats .num{ font-size:24px; }
      .section-head .sec-title{ font-size:36px; }
    }



    /* Why me — bullet motion connected to About */
    .why-motion{ position:relative; overflow:hidden; padding-bottom:56px; }
    .why-panel{ position:relative; }
    .why-kicker,.why-about-kicker{ margin-bottom:20px; }
    .why-main-title{ font-size:clamp(38px,4.4vw,58px); color:var(--ink); margin-bottom:24px; }
    .why-main-title .voice{ display:inline-block; font-size:.92em; }
    .why-intro{ max-width:520px; font-family:'Inter',sans-serif; font-size:15px; line-height:1.75; color:var(--mute); }
    .why-points{ margin-top:42px; border-top:1px solid var(--line); }
    .why-point{ position:relative; padding:22px 0 21px; border-bottom:1px solid var(--line); opacity:0; transform:translate3d(58px,0,0); transition:opacity .55s ease, transform .8s cubic-bezier(.16,.84,.44,1); transition-delay:calc(var(--i) * 110ms + 120ms); }
    .why-motion.is-visible .why-point{ opacity:1; transform:translate3d(0,0,0); }
    .why-point::after{ content:''; position:absolute; right:0; bottom:-1px; width:100%; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:right; transition:transform .9s cubic-bezier(.16,.84,.44,1); transition-delay:calc(var(--i) * 110ms + 250ms); }
    .why-motion.is-visible .why-point::after{ transform:scaleX(1); }
    .why-point-top{ display:grid; grid-template-columns:46px 1fr; align-items:baseline; gap:12px; }
    .why-point-num{ font-family:'Archivo',sans-serif; font-size:11px; font-weight:900; color:var(--accent); letter-spacing:.06em; }
    .why-point h3{ font-family:'Archivo',sans-serif; font-size:18px; font-weight:800; color:var(--ink); }
    .why-point p{ margin:8px 0 0 58px; max-width:500px; font-family:'Inter',sans-serif; font-size:13px; line-height:1.65; color:var(--mute); }

    .why-title-line{ display:block; overflow:hidden; padding-bottom:.05em; }
    .why-title-line>span{ display:block; transform:translateX(105%); opacity:.1; transition:transform 1s cubic-bezier(.16,.84,.44,1), opacity .7s ease; }
    .why-title-line:nth-child(2)>span{ transition-delay:.1s; }
    .why-motion.is-visible .why-title-line>span{ transform:translateX(0); opacity:1; }
    .why-about-copy{ opacity:0; transform:translateX(52px); transition:opacity .7s ease .22s, transform .9s cubic-bezier(.16,.84,.44,1) .22s; }
    .why-motion.is-visible .why-about-copy{ opacity:1; transform:translateX(0); }

    .why-divider-motion{ position:absolute; top:0; right:-1px; width:2px; height:100%; background:var(--ink); transform:scaleY(0); transform-origin:top; transition:transform 1.05s cubic-bezier(.16,.84,.44,1) .08s; pointer-events:none; }
    .why-divider-motion i{ position:absolute; left:50%; top:0; width:8px; height:8px; border-radius:50%; background:var(--accent); transform:translate(-50%,-50%); opacity:0; transition:top 1.4s cubic-bezier(.16,.84,.44,1) .25s, opacity .25s ease .25s; }
    .why-motion.is-visible .why-divider-motion{ transform:scaleY(1); }
    .why-motion.is-visible .why-divider-motion i{ top:78%; opacity:1; }

    .why-stat{ opacity:0; transform:translateX(40px); transition:opacity .55s ease, transform .75s cubic-bezier(.16,.84,.44,1); }
    .why-motion.is-visible .why-stat{ opacity:1; transform:translateX(0); }
    .why-motion.is-visible .why-stat:nth-child(1){ transition-delay:.28s; }
    .why-motion.is-visible .why-stat:nth-child(2){ transition-delay:.36s; }
    .why-motion.is-visible .why-stat:nth-child(3){ transition-delay:.44s; }
    .why-motion.is-visible .why-stat:nth-child(4){ transition-delay:.52s; }
    .why-cert{ opacity:0; transform:translateX(30px); transition:opacity .45s ease, transform .65s cubic-bezier(.16,.84,.44,1), background .2s ease, color .2s ease; }
    .why-motion.is-visible .why-cert{ opacity:1; transform:translateX(0); }
    .why-motion.is-visible .why-cert:nth-child(1){ transition-delay:.48s; }
    .why-motion.is-visible .why-cert:nth-child(2){ transition-delay:.54s; }
    .why-motion.is-visible .why-cert:nth-child(3){ transition-delay:.60s; }
    .why-motion.is-visible .why-cert:nth-child(4){ transition-delay:.66s; }

    .why-flow{ position:absolute; left:56px; right:56px; bottom:0; height:56px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:18px; overflow:hidden; font-family:'Inter',sans-serif; font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--mute); }
    .why-flow span{ opacity:0; transform:translateX(36px); transition:opacity .5s ease, transform .8s cubic-bezier(.16,.84,.44,1); }
    .why-flow i{ display:block; height:1px; flex:1 1 auto; min-width:24px; background:var(--line); position:relative; overflow:hidden; }
    .why-flow i::after{ content:''; position:absolute; inset:0; background:var(--accent); transform:translateX(100%); transition:transform .85s cubic-bezier(.16,.84,.44,1); }
    .why-motion.is-visible .why-flow span{ opacity:1; transform:translateX(0); }
    .why-motion.is-visible .why-flow span:nth-of-type(1){ transition-delay:.38s; }
    .why-motion.is-visible .why-flow span:nth-of-type(2){ transition-delay:.50s; }
    .why-motion.is-visible .why-flow span:nth-of-type(3){ transition-delay:.62s; }
    .why-motion.is-visible .why-flow span:nth-of-type(4){ transition-delay:.74s; }
    .why-motion.is-visible .why-flow i:nth-of-type(1)::after{ transform:translateX(0); transition-delay:.46s; }
    .why-motion.is-visible .why-flow i:nth-of-type(2)::after{ transform:translateX(0); transition-delay:.58s; }
    .why-motion.is-visible .why-flow i:nth-of-type(3)::after{ transform:translateX(0); transition-delay:.70s; }

    /* FAQ accordion */
    .faq-list{ border-top:1px solid var(--line); }
    .faq-item{ border-bottom:1px solid var(--line); }
    .faq-trigger{ width:100%; appearance:none; border:0; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:27px 0; text-align:left; color:var(--ink); }
    .faq-trigger>span{ font-family:'Archivo',sans-serif; font-weight:700; font-size:19px; line-height:1.35; }
    .faq-plus{ position:relative; width:22px; height:22px; flex:0 0 22px; transition:transform .45s cubic-bezier(.16,.84,.44,1); }
    .faq-plus::before,.faq-plus::after{ content:''; position:absolute; top:50%; left:50%; width:15px; height:1.5px; background:var(--ink); transform:translate(-50%,-50%); }
    .faq-plus::after{ transform:translate(-50%,-50%) rotate(90deg); }
    .faq-item.is-open .faq-plus{ transform:rotate(45deg); }
    .faq-answer{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .48s cubic-bezier(.16,.84,.44,1), opacity .35s ease; opacity:.2; }
    .faq-answer>div{ overflow:hidden; }
    .faq-answer p{ max-width:680px; padding:0 54px 0 0; font-family:'Inter',sans-serif; font-size:14px; line-height:1.75; color:var(--mute); transform:translateY(-9px); transition:transform .4s ease, padding .4s ease; }
    .faq-item.is-open .faq-answer{ grid-template-rows:1fr; opacity:1; }
    .faq-item.is-open .faq-answer p{ padding-bottom:28px; transform:translateY(0); }

    /* Contact form */
    .contact-section{ padding:110px 0 84px; }
    .contact-grid{ display:grid; grid-template-columns:.78fr 1.22fr; gap:80px; align-items:start; }
    .contact-title{ margin-top:22px; font-size:clamp(48px,6vw,76px); color:var(--paper); }
    .contact-copy>p{ margin-top:30px; max-width:420px; color:var(--mute-dark); font-family:'Inter',sans-serif; font-size:15px; line-height:1.75; }
    .contact-alt{ margin-top:38px; padding-top:24px; border-top:1px solid var(--line-dark); display:flex; gap:18px; align-items:center; flex-wrap:wrap; font-family:'Inter',sans-serif; font-size:12px; color:var(--mute-dark); }
    .contact-alt a{ color:var(--paper); border-bottom:1px solid var(--line-dark); padding-bottom:2px; }
    .contact-form{ display:grid; gap:18px; padding-top:4px; }
    .form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
    .contact-form label{ display:grid; gap:8px; }
    .contact-form label>span{ font-family:'Inter',sans-serif; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--mute-dark); }
    .contact-form label b{ color:var(--paper); font-weight:500; }
    .contact-form input,.contact-form textarea{ width:100%; border:1px solid var(--line-dark); border-radius:0; outline:0; background:#0e0e0e; color:var(--paper); padding:15px 16px; font-family:'Inter',sans-serif; font-size:14px; transition:border-color .2s ease, background .2s ease, transform .2s ease; }
    .contact-form textarea{ resize:vertical; min-height:150px; line-height:1.6; }
    .contact-form input::placeholder,.contact-form textarea::placeholder{ color:#666660; }
    .contact-form input:focus,.contact-form textarea:focus{ border-color:#777770; background:#111; transform:translateY(-1px); }
    .form-submit-row{ display:flex; align-items:center; gap:18px; margin-top:4px; }
    .form-submit-row p{ font-family:'Inter',sans-serif; font-size:11px; color:var(--mute-dark); }
    .form-honey{ position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; opacity:0!important; pointer-events:none!important; }

    @media (max-width:1050px){
      .contact-grid{ gap:46px; }
    }
    @media (max-width:760px){
      .hero-right{ background:var(--ink); }
      .hero-right img{ object-fit:contain; object-position:center bottom; }
      .why-motion{ padding-bottom:40px; }
      .why-divider-motion{ display:none; }
      .why-point{ transform:translate3d(48px,0,0); }
      .why-point p{ margin-left:0; padding-left:58px; }
      .why-flow{ left:24px; right:24px; height:44px; gap:9px; font-size:8px; letter-spacing:.08em; }
      .why-flow i{ min-width:10px; }
      .contact-section{ padding:84px 0 62px; }
      .contact-grid{ grid-template-columns:1fr; gap:50px; }
      .form-row-2{ grid-template-columns:1fr; }
      .form-submit-row{ align-items:flex-start; flex-direction:column; }
      .faq-trigger{ padding:23px 0; }
      .faq-trigger>span{ font-size:17px; }
      .faq-answer p{ padding-right:18px; }
    }
    @media (prefers-reduced-motion:reduce){
      .why-point,.why-title-line>span,.why-about-copy,.why-stat,.why-cert,.why-divider-motion,.why-divider-motion i{ transition:none!important; transform:none!important; opacity:1!important; }
      .why-flow span,.why-flow i::after{ transition:none!important; transform:none!important; opacity:1!important; }
      .faq-answer,.faq-plus,.faq-answer p{ transition:none!important; }
    }

  
/* === V8 refinements === */

/* Unified About + Why */
.about-unified{ align-items:stretch; }
.about-unified .about-quote,
.about-unified .about-facts{ min-height:620px; }
.about-unified .about-quote{ justify-content:space-between; }
.about-unified-stats{ grid-template-columns:repeat(3,1fr); gap:24px; margin-top:58px; }
.about-unified .why-points{ margin-top:32px; }
.about-unified .unified-why-title{ margin-bottom:12px; }
.about-unified .why-point{ padding:23px 0 22px; }
.about-unified .why-point p{ max-width:520px; }

/* Process — sequential motion (reveals by default; JS/observer only adds
   a fade-in flourish where real scroll + IntersectionObserver is available.
   The canvas preview and any non-scrolling render never fire that observer,
   so the resting state below must already be the fully-visible state. */
.process-motion .process-card{
  position:relative;
  opacity:1;
  transform:translateY(0);
  transition:
    opacity .58s ease calc(var(--i) * 150ms),
    transform .86s cubic-bezier(.16,.84,.44,1) calc(var(--i) * 150ms),
    background .2s ease;
  overflow:hidden;
}
.process-motion .process-card::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--ink);
  transform:scaleX(1);
  transform-origin:left;
  transition:transform .7s cubic-bezier(.16,.84,.44,1) calc(var(--i) * 150ms + 250ms);
}
.process-motion.is-visible .process-card{
  opacity:1;
  transform:translateY(0);
}
.process-motion.is-visible .process-card::after{ transform:scaleX(1); }
.process-motion .process-card .svc-num{
  transition:color .35s ease calc(var(--i) * 150ms + 280ms), transform .5s cubic-bezier(.16,.84,.44,1) calc(var(--i) * 150ms + 280ms);
  transform:translateX(0);
}
.process-motion.is-visible .process-card .svc-num{
  color:var(--accent);
  transform:translateX(0);
}
/* Pre-hide only once JS confirms it can run the reveal animation AND the
   section isn't already on screen — prevents the permanently-invisible
   content bug in contexts (design canvas, no-JS, no real scroll) where the
   observer never fires. See the inline script near the end of this file. */
.process-motion.motion-armed .process-card{ opacity:0; transform:translateY(34px); }
.process-motion.motion-armed .process-card::after{ transform:scaleX(0); }
.process-motion.motion-armed .process-card .svc-num{ transform:translateX(-5px); }

/* FAQ — lighter typography + richer interaction */
.faq-list{ position:relative; }
.faq-item{
  position:relative;
  overflow:hidden;
}
.faq-item::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background:var(--accent);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .42s cubic-bezier(.16,.84,.44,1);
}
.faq-item:hover::before,
.faq-item.is-open::before{ transform:scaleY(1); }
.faq-trigger{
  padding:25px 4px 25px 18px;
  transition:padding-left .3s ease, background .3s ease;
}
.faq-item:hover .faq-trigger,
.faq-item.is-open .faq-trigger{
  padding-left:26px;
  background:linear-gradient(90deg, rgba(147,118,74,.055), transparent 70%);
}
.faq-question{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:14px;
  align-items:baseline;
  min-width:0;
}
.faq-question em{
  font-family:'Inter',sans-serif;
  font-style:normal;
  font-size:10px;
  font-weight:600;
  letter-spacing:.09em;
  color:var(--accent);
}
.faq-question-text{
  font-family:'Inter',sans-serif;
  font-size:16px;
  font-weight:500;
  letter-spacing:-.005em;
  line-height:1.45;
  color:var(--ink);
}
.faq-plus{
  border:1px solid var(--line);
  border-radius:50%;
  width:30px;
  height:30px;
  flex-basis:30px;
  transition:transform .45s cubic-bezier(.16,.84,.44,1), border-color .25s ease, background .25s ease;
}
.faq-item:hover .faq-plus,
.faq-item.is-open .faq-plus{
  border-color:var(--ink);
  background:var(--ink);
}
.faq-item:hover .faq-plus::before,
.faq-item:hover .faq-plus::after,
.faq-item.is-open .faq-plus::before,
.faq-item.is-open .faq-plus::after{ background:var(--paper); }
.faq-answer p{ padding-left:74px; }
.faq-item.is-open .faq-answer p{ padding-left:74px; }

/* CTA before form */

/* Standalone light message form */
.message-section{ background:var(--paper); padding:104px 0 112px; }
.message-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:88px;
  align-items:start;
}
.message-title{ margin-top:18px; font-size:clamp(42px,5vw,66px); color:var(--ink); }
.message-intro>p{
  margin-top:26px;
  max-width:430px;
  font-family:'Inter',sans-serif;
  font-size:15px;
  line-height:1.75;
  color:var(--mute);
}
.contact-form-light label>span{ color:var(--mute); }
.contact-form-light label b{ color:var(--ink); }
.contact-form-light input,
.contact-form-light textarea{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--line);
}
.contact-form-light input::placeholder,
.contact-form-light textarea::placeholder{ color:#9a9994; }
.contact-form-light input:focus,
.contact-form-light textarea:focus{
  background:var(--paper-2);
  border-color:var(--ink);
}
.contact-form-light .form-submit-row p{ color:var(--mute); }

/* Footer = call CTA only */
.footer-call{ padding:92px 0 34px; }
.footer-call-inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:50px;
  padding-bottom:54px;
  border-bottom:1px solid var(--line-dark);
}
.footer-call-title{
  margin-top:18px;
  font-size:clamp(42px,5.4vw,68px);
  color:var(--paper);
}
.footer-bottom{ padding-top:28px; }
.footer-bottom p{
  font-family:'Inter',sans-serif;
  font-size:12px;
  color:var(--mute-dark);
}

/* Slightly better 3-row results rhythm */
.stat-list .stat-row:nth-child(3){ border-bottom:1px solid var(--line-dark); }

@media (max-width:900px){
  .about-unified-stats{ grid-template-columns:repeat(3,1fr); }
  .message-grid{ grid-template-columns:1fr; gap:48px; }
  .footer-call-inner{ align-items:flex-start; flex-direction:column; }
}
@media (max-width:760px){
  .about-unified .about-quote,
  .about-unified .about-facts{ min-height:auto; }
  .about-unified-stats{ grid-template-columns:1fr 1fr; }
  .process-motion .process-card{ transform:translateY(22px); }
  .faq-trigger{ padding-left:10px; }
  .faq-item:hover .faq-trigger,
  .faq-item.is-open .faq-trigger{ padding-left:14px; }
  .faq-question{ grid-template-columns:30px 1fr; gap:10px; }
  .faq-question-text{ font-size:15px; }
  .faq-answer p,
  .faq-item.is-open .faq-answer p{ padding-left:40px; padding-right:10px; }
  .message-section{ padding:78px 0 88px; }
  .footer-call{ padding-top:76px; }
}
@media (prefers-reduced-motion: reduce){
  .process-motion .process-card,
  .process-motion .process-card::after,
  .process-motion .process-card .svc-num{
    transition:none!important;
    opacity:1!important;
    transform:none!important;
  }
}
@media (prefers-reduced-motion: reduce){ .stat-link{ animation:none !important; } }

/* from tracking-measurement.html */
:root{
  --ink:#0a0a0a;
  --paper:#ffffff;
  --paper-2:#f4f3ef;
  --line:#e2e0d8;
  --line-dark:#2a2a28;
  --mute:#6f6e68;
  --mute-dark:#9a9a94;
  --accent:#93764a;
  --soft-accent:#c9b898;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
.display{font-family:'Archivo',sans-serif;font-weight:900;line-height:.95;letter-spacing:-.025em;text-transform:uppercase}
.voice{font-family:'Fraunces',serif;font-style:italic;font-weight:500;text-transform:none}
.kicker{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--mute)}
.dark .kicker{color:var(--mute-dark)}
.sec-title{font-size:clamp(38px,4.5vw,58px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);font-size:14px;font-weight:700;transition:transform .2s ease,background .2s ease,color .2s ease}
.btn:hover{transform:translateY(-2px);background:var(--paper);color:var(--ink)}
.btn-light{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn-light:hover{background:transparent;color:var(--paper)}

/* header */
header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.93);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{height:82px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.logo{font-family:'Archivo',sans-serif;font-size:19px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em}
nav ul{display:flex;list-style:none;gap:32px}
nav a{font-size:13px;font-weight:600}
nav a:hover{color:var(--mute)}
.has-dropdown{position:relative}
.nav-dropdown-toggle{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:0.02em;color:var(--ink);background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:0;transition:color .15s ease}
.nav-dropdown-toggle:hover{color:var(--mute)}
.nav-dropdown-toggle::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.has-dropdown:hover .nav-dropdown-toggle::after,.has-dropdown:focus-within .nav-dropdown-toggle::after{transform:rotate(225deg) translateY(2px)}
.nav-dropdown{display:block;position:absolute;top:100%;left:0;transform:translateY(0);width:210px;background:#1d2327;border:0;border-radius:2px;box-shadow:0 18px 40px rgba(0,0,0,.28);padding:6px 0;margin-top:0;list-style:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s;z-index:90}
.has-dropdown:hover .nav-dropdown,.has-dropdown:focus-within .nav-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.nav-dropdown li{display:block}
.nav-dropdown a{display:block;padding:10px 18px;font-size:13px;font-weight:500;color:#f0f0f1;white-space:nowrap;transition:background .15s ease,color .15s ease}
.nav-dropdown a:hover{background:rgba(255,255,255,.08);color:#fff}


/* service-first hero */
.hero{position:relative;background:var(--ink);color:var(--paper);overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,#000,transparent 88%);pointer-events:none}
.hero-inner{position:relative;z-index:2;padding-top:64px;padding-bottom:64px}
.hero-copy .kicker{color:var(--soft-accent);margin-bottom:26px}
.problem-copy .kicker{margin-bottom:26px}
.hero-title{font-size:clamp(60px,6.4vw,92px);max-width:700px}
.hero-title .voice{display:block;color:var(--paper)}
.hero-lead{font-size:18px;line-height:1.68;color:#bebdb7;max-width:620px;margin-top:32px;padding-top:25px;border-top:1px solid var(--line-dark)}
.hero-actions{display:flex;align-items:center;gap:18px;margin-top:30px;flex-wrap:wrap}
.hero-link{font-size:13px;font-weight:700;color:#b7b6b0;border-bottom:1px solid #4b4b47;padding-bottom:3px}
.hero-micro{display:flex;gap:9px;flex-wrap:wrap;margin-top:34px}
.hero-micro span{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px solid #343430;color:#a8a7a1;padding:9px 11px}

.signal-panel{position:relative;border:1px solid var(--ink);border-radius:18px;background:var(--paper);color:var(--ink);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.10)}
.signal-showcase{background:var(--paper);padding:80px 0}
.problem + .signal-showcase{padding-top:0}
.problem:has(+ .signal-showcase){padding-bottom:56px}
.signal-showcase .signal-panel{max-width:660px;margin:0 auto}
@media(max-width:760px){.signal-showcase{padding:50px 0}}


.signal-head{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--ink)}
.signal-head strong{font-family:'Archivo',sans-serif;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.live{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.live i{width:7px;height:7px;background:var(--accent);border-radius:50%;display:block;animation:livePulse 1.4s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.signal-route{display:grid;grid-template-columns:1fr 36px 1fr 36px 1fr;align-items:center;gap:10px;padding:28px 24px;border-bottom:1px solid var(--ink)}
.node{border:1px solid var(--ink);border-radius:10px;padding:16px 14px;min-height:88px;display:flex;flex-direction:column;justify-content:space-between;position:relative;background:var(--paper-2);transition:border-color .35s ease,transform .35s ease,box-shadow .35s ease}
.node:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 14px 26px rgba(0,0,0,.10)}
.node small{font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.node strong{font-family:'Archivo',sans-serif;font-size:15px;color:var(--ink)}
.route-arrow{height:1px;background:var(--ink);position:relative;overflow:visible}
.route-arrow::after{content:'';position:absolute;right:-1px;top:-3px;border-left:5px solid var(--accent);border-top:3px solid transparent;border-bottom:3px solid transparent}
.route-arrow::before{content:'';position:absolute;left:0;top:-1px;width:12px;height:3px;background:var(--accent);animation:routeFlow 2.1s linear infinite}
@keyframes routeFlow{0%{transform:translateX(0);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(24px);opacity:0}}
.signal-events{padding:16px 22px 20px 38px}
.signal-note{margin:0 0 14px;padding-left:0;font-size:11px;font-style:italic;color:var(--mute);line-height:1.5}
.event-row{display:grid;grid-template-columns:86px 1fr auto;align-items:center;gap:14px;padding:14px 0 14px 18px;border-bottom:none;position:relative;opacity:.9;transform:none;animation:eventIn 4s ease-in-out infinite}
.event-row::before{content:'';position:absolute;left:-2px;top:50%;transform:translate(-50%,-50%);width:7px;height:7px;border-radius:50%;background:var(--paper);border:2px solid var(--accent);z-index:2}
.event-row::after{content:'';position:absolute;left:-2px;top:0;bottom:0;width:1px;background:var(--line);transform:translateX(-50%)}
.event-row:first-child::after{top:50%}
.event-row:last-child::after{bottom:50%}
.event-row:nth-child(2){animation-delay:.7s}.event-row:nth-child(3){animation-delay:1.4s}.event-row:nth-child(4){animation-delay:2.1s}
@keyframes eventIn{0%,100%{opacity:.8;transform:none}30%,70%{opacity:1;transform:none}}
.event-type{font-family:'Archivo',sans-serif;font-size:9px;letter-spacing:.06em;color:var(--accent);background:rgba(147,118,74,.08);border:1px solid rgba(147,118,74,.3);border-radius:3px;padding:4px 8px;text-align:center;justify-self:start;white-space:nowrap}
.event-name{font-size:13px;color:var(--ink);font-weight:500}
.event-state{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);border:1px solid var(--line);border-radius:20px;padding:4px 10px;white-space:nowrap;justify-self:end}
.signal-foot{position:static;display:flex;justify-content:space-between;gap:20px;color:var(--mute);font-size:10px;text-transform:uppercase;letter-spacing:.07em;border-top:1px solid var(--ink);padding:14px 20px 20px;margin:0 -2px}

.section-head{display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:end;padding-bottom:58px}

/* problems */
.problem{padding:118px 0}
.problem-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:start}
.problem-copy h2{font-size:clamp(42px,4.6vw,62px)}
.problem-copy p{margin-top:26px;max-width:480px;font-size:16px;line-height:1.75;color:var(--mute)}
.problem-list{border-top:1px solid var(--line)}
/* Motion-armed pattern: elements are fully visible by default (this is
   the resting state used by static/no-scroll renderers, e.g. the design
   canvas preview, which never fires a real scroll event). JS only ever
   ADDS the .motion-armed class, and only after confirming via
   getBoundingClientRect() that the element starts off-screen and will
   genuinely be scrolled into view — so nothing is hidden unless we can
   prove it will be revealed again. See the script at the end of body. */
.problem-row{display:grid;grid-template-columns:48px 1fr;gap:22px;padding:26px 0;border-bottom:1px solid var(--line);opacity:1;transform:none;transition:opacity .65s ease,transform .65s cubic-bezier(.22,.78,.32,1),padding-left .25s ease,background .25s ease}
.problem-row.motion-armed{opacity:0;transform:translateX(40px)}
.problem-row.in{opacity:1;transform:none}
.problem-row:hover{padding-left:12px;background:linear-gradient(90deg,var(--paper-2),transparent)}
.problem-num{font-family:'Archivo',sans-serif;font-weight:900;font-size:12px;color:var(--accent);padding-top:3px}
.problem-row h3{font-family:'Archivo',sans-serif;font-size:20px;font-weight:700;margin-bottom:7px}
.problem-row p{font-size:14px;line-height:1.65;color:var(--mute);max-width:620px}

/* before after */
.compare{padding:114px 0;background:var(--paper-2);overflow:hidden}
.compare-intro{display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:end;margin-bottom:52px}
.compare-note{font-size:12px;line-height:1.6;color:var(--mute);max-width:760px;margin-top:18px}
.compare-grid{display:grid;grid-template-columns:1fr 90px 1fr;align-items:stretch}
.data-card{background:var(--paper);border:1px solid var(--line);padding:28px 28px 20px;opacity:1;transform:none;transition:opacity .75s ease,transform .75s cubic-bezier(.22,.78,.32,1)}
.data-card.motion-armed{opacity:0}
.data-card.motion-armed.before{transform:translateX(-48px)}
.data-card.motion-armed.after{transform:translateX(48px)}
.data-card.in{opacity:1;transform:none}
.data-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.data-card-head h3{font-family:'Archivo',sans-serif;font-size:24px}
.data-card-head span{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.metric{padding:22px 0;border-bottom:1px solid var(--line)}
.metric-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:12px}
.metric-name{font-size:12px;font-weight:600;color:var(--mute)}
.metric-value{font-family:'Archivo',sans-serif;font-size:28px;font-weight:900}
.metric-track{height:4px;background:#eceae3;overflow:hidden}
.metric-fill{height:100%;background:var(--ink);width:var(--w);transition:width 1s cubic-bezier(.2,.8,.2,1)}
.after .metric-fill{background:var(--accent)}
.compare.motion-armed .metric-fill{width:0}
.compare.in .metric-fill{width:var(--w)}
.compare-arrow{display:flex;align-items:center;justify-content:center;position:relative}
.compare-arrow::before{content:'';position:absolute;width:1px;top:0;bottom:0;background:var(--line)}
.compare-arrow span{z-index:2;width:48px;height:48px;border:1px solid var(--line);background:var(--paper-2);display:grid;place-items:center;font-size:22px;color:var(--accent);animation:arrowNudge 1.9s ease-in-out infinite}
@keyframes arrowNudge{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
.compare-summary{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);display:grid;grid-template-columns:220px 1fr;gap:40px}
.compare-summary p{font-family:'Fraunces',serif;font-size:25px;font-style:italic;line-height:1.45;max-width:780px}

/* system */
.system{background:var(--paper);padding:112px 0}
.system-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);overflow:hidden}
.system-card{background:var(--paper);padding:42px 34px 38px;min-height:310px;position:relative;opacity:1;transform:none;transition:opacity .65s ease,transform .65s cubic-bezier(.22,.78,.32,1)}
.system-card.motion-armed{opacity:0;transform:translateY(36px) scale(.985)}
.system-card.in{opacity:1;transform:none}
.system-card .step{font-family:'Archivo',sans-serif;font-size:12px;font-weight:900;color:var(--accent)}
.system-card h3{font-family:'Archivo',sans-serif;font-size:27px;line-height:1.05;margin:72px 0 18px}
.system-card p{font-size:14px;line-height:1.7;color:var(--mute)}
.system-arrow{position:absolute;top:34px;right:30px;font-size:26px;color:#c6c3bb;transition:transform .35s ease,color .35s ease}
.system-card:hover .system-arrow{transform:translate(5px,5px);color:var(--accent)}
.system-caption{display:grid;grid-template-columns:220px 1fr;gap:40px;margin-top:34px}
.system-caption p{font-family:'Fraunces',serif;font-size:24px;font-style:italic;line-height:1.4;max-width:760px}

/* loop (Conversion & Growth Systems page) — 2-up card row, matches .deliver-item styling */
.loop{padding:118px 0;background:var(--paper)}
.loop-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
.loop-card{padding:40px 44px 8px 0}
.loop-card:first-child{border-right:1px solid var(--line)}
.loop-card:last-child{padding-left:44px;padding-right:0}
.loop-card .n{font-family:'Archivo',sans-serif;font-size:12px;font-weight:900;color:var(--accent);margin-bottom:16px}
.loop-card h3{font-family:'Archivo',sans-serif;font-size:24px;font-weight:700;margin-bottom:14px}
.loop-card p{font-size:14px;line-height:1.7;color:var(--mute)}

/* section-level scroll-reveal (Conversion & Growth Systems page) — compound
   selectors scoped to .reveal so no other page's .section-head/.problem-copy/
   etc. is affected; the existing IntersectionObserver script (bottom of
   page-conversion-growth-systems.php) drives .motion-armed/.in on any element
   carrying .reveal, so no JS changes were needed. */
.section-head.reveal,.problem-copy.reveal,.compare-intro.reveal,.compare-summary.reveal,.system-caption.reveal,.contact-intro.reveal{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.22,.78,.32,1)}
.section-head.reveal.motion-armed,.problem-copy.reveal.motion-armed,.compare-intro.reveal.motion-armed,.compare-summary.reveal.motion-armed,.system-caption.reveal.motion-armed,.contact-intro.reveal.motion-armed{opacity:0;transform:translateY(26px)}
.section-head.reveal.in,.problem-copy.reveal.in,.compare-intro.reveal.in,.compare-summary.reveal.in,.system-caption.reveal.in,.contact-intro.reveal.in{opacity:1;transform:none}

.loop-card{opacity:1;transform:none;transition:opacity .65s ease,transform .65s cubic-bezier(.22,.78,.32,1)}
.loop-card.motion-armed{opacity:0;transform:translateY(30px)}
.loop-card.in{opacity:1;transform:none}

/* hero text fade-up on load (Conversion & Growth Systems page only, via the
   hero-copy-cgs modifier class so Paid Media / Tracking & Measurement heroes,
   which reuse plain .hero-copy, are untouched) */
.hero-copy-cgs>*{opacity:0;transform:translateY(18px);animation:cgsHeroIn .8s cubic-bezier(.22,.78,.32,1) forwards}
.hero-copy-cgs .kicker{animation-delay:.05s}
.hero-copy-cgs .hero-title{animation-delay:.15s}
.hero-copy-cgs .hero-lead{animation-delay:.3s}
.hero-copy-cgs .hero-actions{animation-delay:.42s}
.hero-copy-cgs .hero-micro{animation-delay:.52s}
@keyframes cgsHeroIn{to{opacity:1;transform:none}}



/* deliverables */
.deliver{padding:118px 0;background:var(--paper-2)}
.deliver-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
.deliver-item{display:grid;grid-template-columns:55px 1fr;gap:22px;padding:33px 30px 33px 0;border-bottom:1px solid var(--line);opacity:1;transform:none;transition:opacity .65s ease,transform .65s cubic-bezier(.22,.78,.32,1)}
.deliver-item:nth-child(odd){border-right:1px solid var(--line);padding-right:44px}
.deliver-item:nth-child(even){padding-left:44px}
.deliver-item.motion-armed:nth-child(odd){transform:translateX(-35px)}
.deliver-item.motion-armed:nth-child(even){transform:translateX(35px)}
.deliver-item.motion-armed{opacity:0}
.deliver-item.in{opacity:1;transform:none}
.deliver-item .n{font-family:'Archivo',sans-serif;font-size:12px;font-weight:900;color:var(--mute)}
.deliver-item h3{font-family:'Archivo',sans-serif;font-size:22px;margin-bottom:8px}
.deliver-item p{font-size:14px;color:var(--mute);line-height:1.65}

/* budget calculator (Paid Media page) */
.calculator{padding:118px 0;background:var(--paper-2)}
.calc-lead{font-size:16px;line-height:1.7;color:var(--mute);max-width:640px;margin-top:-20px;margin-bottom:54px}
.calc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.calc-card{background:var(--paper);padding:40px 38px 36px;opacity:1;transform:none;transition:opacity .65s ease,transform .65s cubic-bezier(.22,.78,.32,1)}
.calc-card.motion-armed{opacity:0;transform:translateY(30px)}
.calc-card.in{opacity:1;transform:none}
.platform-tag{display:inline-block;font-family:'Archivo',sans-serif;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);padding:6px 11px;border:1px solid var(--accent);margin-bottom:20px}
.calc-card h3{font-family:'Archivo',sans-serif;font-size:24px;font-weight:700;margin-bottom:30px}
.calc-field{margin-bottom:28px}
.calc-field label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--mute);margin-bottom:13px}
.calc-field-value{font-family:'Archivo',sans-serif;font-weight:900;font-size:15px;color:var(--ink)}
.calc-field input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--line);border-radius:2px;outline:none;cursor:pointer;display:block}
.calc-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--ink);border:3px solid var(--paper);box-shadow:0 0 0 1px var(--ink);cursor:pointer;transition:background .2s ease}
.calc-field input[type=range]:hover::-webkit-slider-thumb{background:var(--accent)}
.calc-field input[type=range]::-moz-range-track{background:var(--line);height:4px;border-radius:2px}
.calc-field input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--ink);border:3px solid var(--paper);box-shadow:0 0 0 1px var(--ink);cursor:pointer;transition:background .2s ease}
.calc-field input[type=range]:hover::-moz-range-thumb{background:var(--accent)}
.calc-output{margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}
.calc-output .lbl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:9px}
.calc-output-num{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(32px,3.4vw,40px);color:var(--ink);margin-bottom:16px}
.calc-note{font-size:12.5px;line-height:1.65;color:var(--mute)}
.calc-note + .calc-note{margin-top:12px}
.calc-floor-note{color:var(--accent);font-weight:600}
.calc-foot{margin-top:46px;font-size:13px;line-height:1.7;color:var(--mute);max-width:760px}

/* results / case proof (Paid Media, Conversion & Growth Systems pages) */
.results{padding:118px 0;background:var(--paper)}
.results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.result-card{background:var(--paper);padding:38px 32px 34px;opacity:1;transform:none;transition:opacity .65s ease,transform .65s cubic-bezier(.22,.78,.32,1)}
.result-card.motion-armed{opacity:0;transform:translateY(30px)}
.result-card.in{opacity:1;transform:none}
.result-num{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(36px,4vw,48px);line-height:1;color:var(--accent);margin-bottom:20px}
.result-name{font-family:'Archivo',sans-serif;font-size:19px;font-weight:700;line-height:1.3;margin-bottom:12px}
.result-sub{font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--mute);margin-bottom:24px}
.result-link{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px;transition:color .2s ease,border-color .2s ease}
.result-link:hover{color:var(--accent);border-color:var(--accent)}
.results-foot{margin-top:42px;font-size:13px;line-height:1.7;color:var(--mute);max-width:720px}


/* process */
.process{padding:112px 0;background:var(--ink);color:var(--paper)}
.process .section-head{border-bottom:1px solid var(--line-dark);margin-bottom:0}
.process .sec-title{color:var(--paper)}
.process-row{display:grid;grid-template-columns:90px 290px 1fr;gap:30px;padding:34px 0;border-bottom:1px solid var(--line-dark);opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.78,.3,1)}
.process-row.motion-armed{opacity:0;transform:translateX(80px)}
.process-row.in{opacity:1;transform:none}
.process-row .num{font-family:'Archivo',sans-serif;font-size:13px;font-weight:900;color:var(--accent);position:relative}
.process-row .num::after{content:'';position:absolute;left:0;top:27px;width:44px;height:1px;background:var(--accent);transition:width .6s ease .25s}
.process-row.motion-armed .num::after{width:0}
.process-row.in .num::after{width:44px}
.process-row h3{font-family:'Archivo',sans-serif;font-size:24px;font-weight:700}
.process-row p{font-size:14px;line-height:1.7;color:#b7b6b0;max-width:600px}

/* FAQ — service-page variant (numbered index + separate question text).
   Scoped with :has(.faq-index) so it never collides with the homepage's
   own .faq-question/.faq-question-text markup, which shares the same
   .faq-item/.faq-trigger/.faq-plus/.faq-answer class names. */
.faq{padding:112px 0 118px;background:var(--paper)}
.faq-item:has(.faq-index){border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.faq-item:has(.faq-index)::before{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent);transition:width .35s ease}
.faq-item:has(.faq-index):hover::before,.faq-item.open:has(.faq-index)::before{width:100%}
.faq-trigger:has(.faq-index){width:100%;border:0;background:none;text-align:left;display:grid;grid-template-columns:72px 1fr 36px;align-items:center;padding:29px 0;cursor:pointer;color:var(--ink)}
.faq-index{font-family:'Archivo',sans-serif;font-size:11px;font-weight:900;color:var(--accent)}
.faq-q{font-family:'Inter',sans-serif;font-size:18px;font-weight:500;letter-spacing:-.01em;transition:transform .25s ease,letter-spacing .25s ease}
.faq-trigger:hover .faq-q{transform:translateX(10px);letter-spacing:0}
.faq-item:has(.faq-index) .faq-plus{width:24px;height:24px;position:relative;justify-self:end;transition:transform .35s ease}
.faq-item:has(.faq-index) .faq-plus:before,.faq-item:has(.faq-index) .faq-plus:after{content:'';position:absolute;left:4px;right:4px;top:11px;height:1.5px;background:var(--ink);transition:transform .3s ease;transform:none}
.faq-item:has(.faq-index) .faq-plus:after{transform:rotate(90deg)}
.faq-trigger:has(.faq-index)[aria-expanded="true"] .faq-plus{transform:rotate(180deg)}
.faq-trigger:has(.faq-index)[aria-expanded="true"] .faq-plus:after{transform:rotate(0)}
.faq-item:has(.faq-index) .faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.22,.78,.32,1);opacity:1}
.faq-item:has(.faq-index) .faq-answer>div{overflow:hidden}
.faq-item:has(.faq-index) .faq-answer p{padding:0 72px 29px;font-size:14px;line-height:1.75;color:#48473f;max-width:820px;opacity:0;transform:translateY(-8px);transition:opacity .3s ease .08s,transform .3s ease .08s}
.faq-item.open:has(.faq-index) .faq-answer{grid-template-rows:1fr}
.faq-item.open:has(.faq-index) .faq-answer p{opacity:1;transform:none}

/* contact */
.contact{padding:118px 0;background:var(--paper-2)}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:start}
.contact-intro h2{font-size:clamp(46px,5vw,68px);margin:20px 0 24px}
.contact-intro p{font-size:15px;line-height:1.75;color:var(--mute);max-width:430px}
.contact-note{margin-top:35px;padding-top:24px;border-top:1px solid var(--line);font-size:12px!important}
.contact-form{display:grid;gap:20px}
.contact-form label span{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;color:var(--mute)}
.contact-form b{color:var(--accent)}
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-form input,.contact-form textarea{width:100%;border:1px solid var(--line);background:var(--paper);padding:15px 16px;color:var(--ink);outline:none;transition:border-color .2s ease,transform .2s ease}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--ink);transform:translateY(-1px)}
.contact-form textarea{resize:vertical;min-height:150px}
.form-submit{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form-submit p{font-size:12px;color:var(--mute)}
.honey{position:absolute!important;left:-9999px!important}

/* footer */
footer{background:var(--ink);color:var(--paper);padding:78px 0 38px}
.footer-cta{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;padding-bottom:60px}
.footer-cta h2{font-size:clamp(40px,5vw,68px)}
.footer-bottom{border-top:1px solid var(--line-dark);padding-top:28px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-bottom p,.footer-bottom a{font-size:12px;color:var(--mute-dark)}
.footer-links{display:flex;gap:24px}

@media(max-width:980px){.loop-grid{grid-template-columns:1fr}.loop-card:first-child{border-right:0;border-bottom:1px solid var(--line);padding-bottom:30px}.loop-card:last-child{padding-left:0;padding-top:30px}.calc-grid{grid-template-columns:1fr}.results-grid{grid-template-columns:1fr}
  nav{position:fixed;top:70px;left:0;right:0;max-height:calc(100vh - 70px);overflow-y:auto;background:var(--paper);border-bottom:1px solid var(--line);padding:10px 20px 24px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;z-index:60}nav.nav-open{opacity:1;visibility:visible;transform:translateY(0)}nav ul{flex-direction:column;gap:2px}nav li{width:100%}nav a{display:block;padding:14px 4px}.nav-dropdown-toggle{display:flex;width:100%;justify-content:space-between;padding:14px 4px}.nav-dropdown{position:static;display:block;width:100%;background:transparent;box-shadow:none;padding:0;margin:0;opacity:1;visibility:visible;pointer-events:auto;max-height:0;overflow:hidden;transition:max-height .2s ease}.has-dropdown.dropdown-open .nav-dropdown{max-height:300px}.nav-dropdown a{color:var(--mute-dark);padding:10px 4px 10px 14px}.nav-toggle{display:inline-flex}.nav-right{margin-left:auto}
  .hero-inner{grid-template-columns:1fr;gap:50px;min-height:auto}
  
  .problem-grid,.contact-grid{grid-template-columns:1fr;gap:55px}
  .system-flow{grid-template-columns:1fr}
  .system-card{min-height:240px}.system-card h3{margin-top:48px}
  .system-caption{grid-template-columns:1fr;gap:18px}
  .compare-grid{grid-template-columns:1fr}
  .compare-arrow{height:70px}.compare-arrow::before{top:0;bottom:0}.compare-arrow span{transform:rotate(90deg)}
  .compare-arrow span{animation:none}
}
@media(max-width:760px){
  .wrap{padding:0 22px}.nav-inner{height:72px}.nav-right .btn{padding:12px 16px}
  .hero-inner{padding-top:58px;padding-bottom:58px;gap:38px}
  .hero-title{font-size:clamp(48px,15vw,70px)}.hero-lead{font-size:16px}.hero-actions{margin-top:18px}.hero-micro{margin-top:18px}
  .signal-route{grid-template-columns:1fr;gap:10px}.route-arrow{height:22px;width:1px;justify-self:center}.route-arrow::before{display:none}.route-arrow::after{right:-3px;top:auto;bottom:-1px;border-left:3px solid transparent;border-right:3px solid transparent;border-top:5px solid var(--accent);border-bottom:0}
  .signal-foot{position:static;padding:16px 20px 20px}
  .section-head,.compare-intro{grid-template-columns:1fr;gap:18px;padding-bottom:38px}
  .hero-copy .kicker,.problem-copy .kicker{margin-bottom:18px}
  .contact-intro h2{margin-top:18px}.compare-intro{margin-bottom:0}
  .problem,.deliver,.faq,.contact,.compare,.calculator,.results{padding:40px 0}.system,.process{padding:40px 0}.cta{padding:40px 0}.contact-section{padding:40px 0}.message-section{padding:40px 0}.loop{padding:40px 0}
  .problem-grid{gap:42px}.deliver-grid{grid-template-columns:1fr}.deliver-item:nth-child(odd){border-right:0;padding-right:0}.deliver-item:nth-child(even){padding-left:0}
  .process-row{grid-template-columns:52px 1fr;gap:18px}.process-row p{grid-column:2}
  .compare-summary{grid-template-columns:1fr;gap:18px}.compare-summary p{font-size:22px}
  .faq-trigger:has(.faq-index){grid-template-columns:48px 1fr 30px}.faq-q{font-size:16px}.faq-item:has(.faq-index) .faq-answer p{padding-left:48px;padding-right:20px}
  .form-2{grid-template-columns:1fr}.footer-cta{align-items:center;flex-direction:column;text-align:center;padding-bottom:90px}.footer-cta .btn{align-self:center}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .system-card,.process-row,.problem-row,.deliver-item,.data-card,.calc-card,.result-card{opacity:1!important;transform:none!important}
  .section-head.reveal,.problem-copy.reveal,.compare-intro.reveal,.compare-summary.reveal,.system-caption.reveal,.contact-intro.reveal,.loop-card{opacity:1!important;transform:none!important}
  .hero-copy-cgs>*{animation:none!important;opacity:1!important;transform:none!important}
  .metric-fill{width:var(--w)!important}
}

.grecaptcha-badge{ visibility:hidden !important; }

.recaptcha-disclosure{ font-family:'Inter',sans-serif; font-size:10px; color:#6b6b6b; text-align:center; margin:0; padding:8px 20px; line-height:1.5; background:var(--ink); }
.recaptcha-disclosure a{ color:#6b6b6b; text-decoration:underline; }
.recaptcha-disclosure a:hover{ color:var(--paper); }


/* Section wrap top/bottom padding - now driven by --pt/--pb custom props set inline per section, so mobile can override it (previously hardcoded inline px values ignored all responsive rules) */
.wrap{ padding-top:var(--pt, 0px); padding-bottom:var(--pb, 0px); }
@media (max-width:760px){
  .wrap[style*="--pt"]{ padding-top:40px; padding-bottom:40px; }
}

@media (max-width:760px){
  footer{ padding-top:40px; }
}

@media (max-width:760px){
  .footer-links{ margin-left:auto; }
}

@media (min-width:761px){
  .footer-cta{ align-items:center; }
}

/* Privacy policy content: bigger breathing room + uppercase section headings */
.legal h1{ margin-bottom:24px; }
.legal .updated{ margin-bottom:40px; color:var(--mute-dark); }
.legal p{ margin:0 0 24px; }
.legal h2{ text-transform:uppercase; letter-spacing:.02em; margin:56px 0 20px; }
.legal h2:first-of-type{ margin-top:40px; }
.legal ul{ margin:0 0 24px; padding-left:20px; }
.legal li{ margin-bottom:12px; }
.legal li:last-child{ margin-bottom:0; }

/* ===== Blog index (home.php) ===== */
.blog-hero{ padding:160px 0 60px; }
.blog-hero .kicker{ margin-bottom:18px; }
.blog-hero-lead{ font-family:'Inter',sans-serif; font-size:16px; line-height:1.7; color:var(--mute); max-width:520px; margin-top:20px; }

.blog-list{ padding-bottom:100px; }
.blog-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; }
.blog-card{ border:1px solid var(--line); }
.blog-card-link{ display:block; color:inherit; text-decoration:none; height:100%; }
.blog-card-image{ aspect-ratio:16/10; overflow:hidden; background:var(--paper-2); }
.blog-card-image img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.blog-card-link:hover .blog-card-image img{ transform:scale(1.05); }
.blog-card-image-fallback{ background:var(--ink); }
.blog-card-body{ padding:26px 24px 30px; }
.blog-card-date{ font-family:'Inter',sans-serif; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mute-dark); margin-bottom:12px; }
.blog-card-title{ font-family:'Archivo',sans-serif; font-weight:800; font-size:20px; line-height:1.3; color:var(--ink); margin-bottom:14px; }
.blog-card-excerpt{ font-family:'Inter',sans-serif; font-size:14px; line-height:1.65; color:var(--mute); margin-bottom:18px; }
.blog-card-more{ font-family:'Inter',sans-serif; font-size:13px; font-weight:700; color:var(--ink); }

.blog-pagination{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:14px; margin-top:60px; }
.blog-pagination .page-numbers{ font-family:'Inter',sans-serif; font-size:14px; font-weight:700; color:var(--mute); padding:10px 16px; border:1.5px solid var(--line); text-decoration:none; }
.blog-pagination .page-numbers.current{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.blog-pagination a.page-numbers:hover{ border-color:var(--ink); color:var(--ink); }

@media (max-width:980px){
  .blog-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:700px){
  .blog-hero{ padding:120px 0 40px; }
  .blog-grid{ grid-template-columns:1fr; gap:28px; }
}

/* ===== Single post (single.php) ===== */
.post-hero{ padding:160px 0 40px; }
.post-back{ display:inline-block; font-family:'Inter',sans-serif; font-size:13px; font-weight:700; color:var(--mute); text-decoration:none; margin-bottom:24px; }
.post-back:hover{ color:var(--ink); }
.post-title{ margin-top:16px; font-size:clamp(32px,4.5vw,52px); max-width:820px; }
.post-featured-image{ margin-bottom:20px; }
.post-featured-image img{ width:100%; height:auto; display:block; max-height:520px; object-fit:cover; }
.post-content-section{ padding-bottom:100px; }
.post-content{ max-width:760px; margin:0 auto; }
.post-content p{ font-family:'Inter',sans-serif; font-size:16px; line-height:1.8; color:var(--mute); margin:0 0 24px; }
.post-content h2{ font-family:'Archivo',sans-serif; font-weight:800; font-size:clamp(24px,3vw,32px); margin:48px 0 18px; color:var(--ink); }
.post-content h3{ font-family:'Archivo',sans-serif; font-weight:700; font-size:20px; margin:36px 0 14px; color:var(--ink); }
.post-content ul, .post-content ol{ margin:0 0 24px; padding-left:22px; }
.post-content li{ margin-bottom:10px; font-family:'Inter',sans-serif; font-size:16px; line-height:1.7; color:var(--mute); }
.post-content img{ max-width:100%; height:auto; margin:20px 0; }
.post-content a{ color:var(--ink); text-decoration:underline; }
.post-content blockquote{ border-left:3px solid var(--ink); padding-left:20px; margin:30px 0; font-family:'Fraunces',serif; font-style:italic; font-size:20px; color:var(--ink); }
.post-footer-nav{ max-width:760px; margin:0 auto; padding-top:20px; border-top:1px solid var(--line); }

@media (max-width:700px){
  .post-hero{ padding:120px 0 30px; }
}


/* ================================================================
   HOMEPAGE REDESIGN PASS (hero rebalance, results cards, client
   logos, working-directly section, misc). Appended at end of file
   so these rules win on source order for equal-specificity selectors
   already defined earlier in this stylesheet.
   ================================================================ */

/* Hero: ~55/45 desktop split, tighter headline-to-paragraph gap */
@media (min-width:761px){
  .hero:has(.hero-left){ grid-template-columns:55fr 45fr; }
}
.hero-left{ justify-content:flex-start; }
.hero-copy{ margin-top:22px; }
.hero-subline{ font-family:'Inter',sans-serif; font-size:15px; line-height:1.6; color:var(--mute-dark); max-width:420px; margin:16px 0 0; }

@media (max-width:760px){
  .hero:has(.hero-left){ grid-template-columns:1fr; min-height:0; }
  .hero-right{ order:-1; height:auto; min-height:0; max-height:none; overflow:visible; }
  .hero-right img{ position:relative; inset:auto; height:auto; width:100%; max-height:none; object-fit:contain; object-position:center top; }
  .hero-break{ display:none; }
  .hero-left{ justify-content:flex-start; }
}

/* Compact static client logo strip (replaces the moving logo carousel) */
.client-logos{ background:var(--paper); border-bottom:1px solid var(--line); overflow:hidden; }
.client-logos-viewport{ overflow:hidden; -webkit-mask-image:linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); mask-image:linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); }
.client-logos-track{ display:flex; width:max-content; animation:client-logos-scroll 80s linear infinite; }
.client-logos:hover .client-logos-track{ animation-play-state:paused; }
.client-logos-set{ display:flex; align-items:center; gap:52px; padding:34px 26px; flex-shrink:0; }
.client-logos-track img{ height:26px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.62; transition:opacity .15s ease; flex-shrink:0; }
.client-logos-track img:hover{ opacity:1; }
@keyframes client-logos-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (max-width:760px){
  .client-logos-set{ gap:30px; padding:24px 16px; }
  .client-logos-track img{ height:20px; }
  .client-logos-track{ animation-duration:58s; }
}
@media (prefers-reduced-motion: reduce){
  .client-logos-track{ animation:none; }
  .client-logos-viewport{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
}

/* Services: intro paragraph + inline "Learn more" link text */
.section-intro{ font-family:'Inter',sans-serif; font-size:16px; line-height:1.6; color:var(--mute); max-width:600px; margin-top:18px; }
.dark .section-intro{ color:var(--mute-dark); }
.svc-link-text{ display:inline-block; margin-left:6px; font-family:'Inter',sans-serif; font-size:13px; font-weight:700; color:var(--ink); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }

/* Results: compact 3-card layout with smaller headline numbers */
.results-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); margin-top:8px; }
.result-card{ background:var(--ink); padding:36px 30px; display:flex; flex-direction:column; }
.result-industry{ font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:var(--mute-dark); margin-bottom:18px; }
.result-num{ font-family:'Archivo',sans-serif; font-weight:900; font-size:clamp(30px,3vw,40px); line-height:1; color:var(--paper); }
.result-metric{ font-family:'Inter',sans-serif; font-size:14px; font-weight:600; color:var(--paper); margin-top:8px; }
.result-period{ font-family:'Inter',sans-serif; font-size:12px; color:var(--mute-dark); margin-top:4px; margin-bottom:18px; }
.result-note{ font-family:'Inter',sans-serif; font-size:14px; line-height:1.6; color:var(--mute-dark); flex-grow:1; }
.result-link{ display:inline-block; margin-top:20px; font-family:'Inter',sans-serif; font-size:13px; font-weight:700; color:var(--paper); border-bottom:1px solid var(--line-dark); padding-bottom:3px; align-self:flex-start; }
@media (max-width:760px){
  .results-grid{ grid-template-columns:1fr; }
}

/* Working Directly With Tomas (reuses .process-grid/.process-card, 3 columns) */
.working-grid{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1050px){
  .working-grid{ grid-template-columns:1fr; }
}

/* Testimonials heading, reduced size vs other section titles */
.sec-title-sm{ font-size:clamp(26px,3vw,38px); }


/* ================================================================
   PAID MEDIA PAGE REDESIGN PASS (hero, channels, scope, first-month
   approach, scenario calculator, evidence, contact). Appended at end
   so these rules win on source order for equal-specificity selectors
   defined earlier in this stylesheet.
   ================================================================ */
.calc-type{
  width:100%;
  font-family:'Inter',sans-serif;
  font-size:14px;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  padding:10px 12px;
  border-radius:0;
  appearance:auto;
}
.calc-formula-note{ font-weight:600; color:var(--ink); }


/* ================================================================
   FIX: contact form focus state readability + website field.
   An older dark-theme rule for .contact-form input:focus/textarea:focus
   set background:#111 without the later light-theme focus rule
   redeclaring background, so on the service pages (.contact-form,
   not .contact-form-light) focusing a field left near-black text on a
   near-black background. Appended here (source-order win) to force a
   readable light focus state on both contact-form variants.
   ================================================================ */
.contact-form input:focus,
.contact-form textarea:focus{
  background:var(--paper) !important;
  color:var(--ink) !important;
  border-color:var(--ink);
}
.contact-form-light input:focus,
.contact-form-light textarea:focus{
  background:var(--paper) !important;
  color:var(--ink) !important;
}


/* ================================================================
   Inline "thank you" message shown after a contact form is submitted
   via AJAX (footer.php), replacing formsubmit.co's own redirect page.
   ================================================================ */
.form-success{
  padding:24px 0 8px;
  max-width:440px;
}
.form-success h3{
  font-family:'Archivo',sans-serif;
  font-weight:900;
  font-size:clamp(24px,2.6vw,32px);
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:14px;
}
.form-success p{
  font-family:'Inter',sans-serif;
  font-size:15px;
  line-height:1.6;
  color:var(--mute);
}
.contact-form-light + .form-success h3,
.dark .form-success h3{ color:var(--ink); }