/*
Theme Name: Transpyre
Theme URI: https://transpyre.digital
Author: Transpyre
Author URI: https://transpyre.digital
Description: A modern, fully editable WordPress theme for Transpyre — a digital agency site with an editable homepage, Services, Agency, Case Studies, and a built-in multi-step lead-generation form on Start a Project. Every major section is customizable via Appearance > Customize, and Services / Case Studies / Testimonials / Partners are managed as content types in wp-admin.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: transpyre
*/


  :root{
    --ink:#17150F;
    --ink-2:#F1ECE2;
    --paper:#FBF9F5;
    --paper-dim:#5C5648;
    --ash:#6C6755;
    --line:#E6E0D2;
    --ember-1:#2768FC;
    --ember-1-text:#235DE2;
    --ember-2:#143FBD;
    --ember-grad: linear-gradient(100deg, var(--ember-1) 0%, var(--ember-2) 100%);
    --display: 'Plus Jakarta Sans', sans-serif;
    --body: 'Inter', sans-serif;
    --mono: 'Inter', sans-serif;
    --maxw: 1180px;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; overflow-x:hidden; }
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--body);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    max-width:100%;
  }
  a{ color:inherit; text-decoration:none; }
  ::selection{ background:var(--ember-1); color:var(--paper); }

  /* Visible keyboard focus everywhere — browsers only show their default
     ring for :focus, which can include mouse clicks in some browsers; this
     targets :focus-visible so it only shows for keyboard/AT navigation. */
  :focus-visible{
    outline:2px solid var(--ember-1);
    outline-offset:2px;
  }

  /* "Skip to main content" link — invisible until it receives keyboard
     focus (always the very first focusable element on the page), so
     keyboard and screen-reader users can jump past the header/nav on
     every single page load instead of tabbing through it every time. */
  .skip-link{
    position:absolute;
    top:-100px;
    left:16px;
    z-index:9999;
    background:var(--ink);
    color:var(--paper);
    padding:12px 20px;
    border-radius:8px;
    font-family:var(--mono);
    font-size:13px;
    font-weight:600;
    transition:top 0.2s ease;
  }
  .skip-link:focus{
    top:16px;
  }

  .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
  .eyebrow{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--ember-1);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:16px; height:1px;
    background:var(--ember-grad);
  }
  .eyebrow-back::before{ display:none; }
  /* Contrast fix (2026-09-03): the base .eyebrow color (--ember-1) only
     hits ~4.0:1 on --ink-2 and ~4.5:1 on --paper — just under the 4.5:1
     AA text minimum, flagged by an audit on these light-background
     sections. Left the base rule alone (it's also used on the dark
     showcase-banner photo overlay, where full-brightness --ember-1 is
     needed and already passes), and instead override just these light
     sections to the darker --ember-1-text token (~4.8-5.4:1, same blue,
     imperceptibly darker). Add any future light-background section that
     reuses bare .eyebrow to this selector list rather than editing the
     base rule. */
  .about .eyebrow,
  .process .eyebrow,
  .partners .eyebrow,
  .insights .eyebrow,
  .cta-band .eyebrow{
    color:var(--ember-1-text);
  }

  /* ---------- Ignite signature: accent color + gradient flicker underline ---------- */
  .ignite{
    color:var(--ember-1);
  }
  @keyframes flicker{
    0%,100%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
  }
  .ignite-underline{
    position:relative;
    display:inline-block;
  }
  .ignite-underline::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-6px;
    height:3px;
    background:var(--ember-grad);
    background-size:200% 100%;
    animation: flicker 6s ease-in-out infinite;
    border-radius:2px;
  }

  @media (prefers-reduced-motion: reduce){
    .ignite-underline::after{ animation:none; }
  }

  /* ---------- Nav ---------- */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(251,249,245,0.86);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 32px;
    max-width:var(--maxw); margin:0 auto;
  }
  .logo{
    display:flex; align-items:center;
  }
  .logo img{
    height:26px;
    width:auto;
    display:block;
  }
  .footer-logo img{
    height:30px;
    width:auto;
    display:block;
  }
  .nav-links{
    display:flex; gap:36px;
    font-size:14px; font-weight:500;
  }
  /* wp_nav_menu() wraps items in a <ul class="menu-list"> (required for
     valid list markup / screen readers); display:contents on both the
     <ul> and its <li>s keeps the <a> tags acting as direct flex children,
     preserving the exact layout this was already built for. */
  .menu-list{
    display:contents;
    list-style:none;
    margin:0;
    padding:0;
  }
  .nav-links li,
  .mobile-nav li{
    list-style:none;
    margin:0;
    display:contents;
  }
  .nav-links a{
    color:var(--paper-dim);
    transition:color 0.2s ease;
    position:relative;
  }
  .nav-links a:hover{ color:var(--ink); }
  /* Active state: WP core marks the current page's menu item with
     current-menu-item/current_page_item (and current-menu-parent /
     current-menu-ancestor for CPT archives + their singles) on the <li>,
     and adds aria-current="page" to its <a> automatically — no extra
     markup needed here. The <a> stays the actual positioned box even
     though its <li> is display:contents, so the ::after underline
     anchors correctly. */
  .nav-links a[aria-current="page"],
  .nav-links .current-menu-item > a,
  .nav-links .current_page_item > a,
  .nav-links .current-menu-parent > a,
  .nav-links .current_page_parent > a,
  .nav-links .current-menu-ancestor > a,
  .nav-links .current_page_ancestor > a{
    color:var(--ink);
  }
  .nav-links a[aria-current="page"]::after,
  .nav-links .current-menu-item > a::after,
  .nav-links .current_page_item > a::after,
  .nav-links .current-menu-parent > a::after,
  .nav-links .current_page_parent > a::after,
  .nav-links .current-menu-ancestor > a::after,
  .nav-links .current_page_ancestor > a::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-8px;
    height:2px;
    border-radius:2px;
    background:var(--ember-grad);
  }
  .nav-cta{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    padding:10px 20px;
    border:1px solid var(--ash);
    border-radius:100px;
    transition: all 0.25s ease;
    white-space:nowrap;
  }
  .nav-cta:hover{
    border-color:var(--ember-1);
    background:var(--ember-1);
    color:var(--paper);
  }
  .nav-toggle{
    display:none;
    width:38px; height:38px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--paper);
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex-shrink:0;
  }
  .nav-toggle svg{ width:18px; height:18px; }
  .mobile-nav{
    display:none;
    flex-direction:column;
    gap:2px;
    background:var(--paper);
    border-top:1px solid var(--line);
    padding:10px 32px 20px;
  }
  .mobile-nav.open{ display:flex; }
  @media (min-width:961px){ .mobile-nav{ display:none !important; } }
  .mobile-nav a{
    padding:14px 0;
    border-bottom:1px solid var(--line);
    font-size:15px;
    font-weight:500;
    color:var(--ink);
  }
  .mobile-nav a:last-of-type{ border-bottom:none; }
  .mobile-nav a[aria-current="page"],
  .mobile-nav .current-menu-item > a,
  .mobile-nav .current_page_item > a,
  .mobile-nav .current-menu-parent > a,
  .mobile-nav .current_page_parent > a,
  .mobile-nav .current-menu-ancestor > a,
  .mobile-nav .current_page_ancestor > a{
    color:var(--ember-1);
    font-weight:600;
  }
  .mobile-nav .nav-cta{
    margin-top:14px;
    text-align:center;
    display:block;
  }

  /* ---------- Hero ---------- */
  .hero{
    padding:120px 32px 90px;
    position:relative;
    background:
      radial-gradient(ellipse 60% 50% at 85% 10%, rgba(39,104,252,0.10), transparent 60%),
      radial-gradient(ellipse 40% 40% at 100% 100%, rgba(20,63,189,0.07), transparent 60%);
  }
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 700'%3E%3Cdefs%3E%3ClinearGradient id='hbg' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232768FC'/%3E%3Cstop offset='1' stop-color='%23143FBD'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1440' height='700' fill='url(%23hbg)'/%3E%3C/svg%3E");
    background-size:cover;
    background-position:center;
    opacity:0.06;
    z-index:0;
    pointer-events:none;
  }
  .hero-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:1;
    pointer-events:none;
  }
  .hero-canvas{
    position:absolute;
    inset:0;
  }
  .hero-glow{
    position:absolute;
    top:0; left:0;
    width:560px; height:560px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(39,104,252,0.16) 0%, rgba(39,104,252,0.06) 45%, transparent 72%);
    filter:blur(4px);
    transform:translate(-50%,-50%);
    opacity:0;
    transition:opacity 0.4s ease;
  }
  .hero-glow.is-visible{ opacity:1; }
  .hero-inner{ max-width:var(--maxw); margin:0 auto; position:relative; z-index:2; }
  .hero h1{
    font-family:var(--display);
    font-weight:800;
    font-size:clamp(42px, 6.4vw, 88px);
    line-height:1.02;
    letter-spacing:-0.02em;
    max-width:920px;
    margin:26px 0 30px;
  }
  .hero h1 .kw{
    display:inline-block;
    opacity:0;
    transform:translateY(16px);
    animation:kineticIn 0.7s cubic-bezier(0.2,0.7,0.2,1) forwards;
  }
  @keyframes kineticIn{
    to{ opacity:1; transform:translateY(0); }
  }
  @media (prefers-reduced-motion: reduce){
    .hero h1 .kw{ animation:none; opacity:1; transform:none; }
  }
  .hero p.sub{
    font-size:19px;
    line-height:1.6;
    color:var(--paper-dim);
    max-width:560px;
    margin-bottom:44px;
  }
  .hero-actions{
    display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  }
  .btn-primary{
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    background:var(--ember-grad);
    color:var(--paper);
    font-weight:500;
    padding:16px 30px;
    border-radius:100px;
    display:inline-flex; align-items:center; gap:10px;
    transition:transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow:0 10px 30px -10px rgba(39,104,252,0.5);
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -10px rgba(39,104,252,0.65); }
  .btn-ghost-link{
    font-size:14px; font-weight:500;
    color:var(--ink);
    border-bottom:1px solid var(--ash);
    padding-bottom:2px;
    transition:border-color 0.2s ease, color 0.2s ease;
  }
  .btn-ghost-link:hover{ border-color:var(--ember-1); color:var(--ember-1); }

  .hero-stats{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1px;
    background:var(--line);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    margin-top:70px;
    width:100%;
  }
  .hero-stats div{
    background:var(--paper);
    padding:24px 32px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .hero-stats .num{
    font-family:var(--display);
    font-size:26px;
    font-weight:700;
    line-height:1.1;
  }
  .hero-stats .label{
    font-family:var(--mono);
    font-size:11px;
    color:var(--ash);
    text-transform:uppercase;
    letter-spacing:0.06em;
    margin-top:0;
    line-height:1.3;
  }

  /* ---------- Section shared ---------- */
  section{ padding:110px 32px; }
  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:20px;
    margin-bottom:60px;
  }
  .section-head h2{
    font-family:var(--display);
    font-size:clamp(30px, 3.6vw, 46px);
    font-weight:700;
    letter-spacing:-0.01em;
    margin-top:14px;
  }
  .section-head p{
    max-width:380px;
    color:var(--paper-dim);
    font-size:15px;
    line-height:1.6;
  }

  /* ---------- Services (bento) — dark, stands apart from the light page ---------- */
  .services{
    background:var(--ink);
    position:relative;
  }
  .services::before{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse 50% 40% at 90% 0%, rgba(39,104,252,0.10), transparent 60%);
    pointer-events:none;
  }
  .services .eyebrow{ color:var(--ember-1); }
  .services .section-head h2{ color:var(--paper); }
  .services .section-head p{ color:#A9A297; }
  .services-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1px;
    background:#2E2B24;
    border:1px solid #2E2B24;
    position:relative;
  }
  .svc-card{
    background:#1C1A15;
    padding:32px 30px;
    display:flex;
    flex-direction:column;
    gap:18px;
    transition:background 0.3s ease, transform 0.3s ease;
    position:relative;
    overflow:hidden;
  }
  .svc-card:hover{ background:#241F17; transform:translateY(-3px); }
  .svc-mono{
    font-family:var(--display);
    font-weight:700;
    font-size:26px;
    width:46px; height:46px;
    border-radius:10px;
    border:1px solid #37332A;
    display:flex; align-items:center; justify-content:center;
    color:var(--ember-1);
    flex-shrink:0;
    transition:transform 0.35s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.35s ease, border-color 0.35s ease;
  }
  .svc-card:hover .svc-mono{
    transform:scale(1.08) rotate(-5deg);
    border-color:transparent;
    box-shadow:0 0 0 1px rgba(39,104,252,0.4), 0 8px 20px -4px rgba(39,104,252,0.35);
  }
  @media (prefers-reduced-motion: reduce){
    .svc-card, .svc-card:hover, .svc-mono, .svc-card:hover .svc-mono{ transition:none; transform:none; }
  }
  .svc-card h3{
    font-family:var(--display);
    font-size:18.5px;
    font-weight:600;
    color:var(--paper);
    margin:0;
  }
  .svc-card p{
    font-size:13.5px;
    color:#A9A297;
    line-height:1.6;
    margin:0;
  }
  .svc-cta-tile{
    grid-column:span 2;
    background:linear-gradient(135deg, rgba(39,104,252,0.14), rgba(20,63,189,0.05));
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:32px 34px;
    transition:background 0.3s ease;
  }
  .svc-cta-tile:hover{ background:linear-gradient(135deg, rgba(39,104,252,0.22), rgba(20,63,189,0.09)); }
  .svc-cta-tile .cta-tile-label{
    font-family:var(--mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--ember-1);
    margin-bottom:8px;
  }
  .svc-cta-tile h3{
    font-family:var(--display);
    font-size:20px;
    font-weight:700;
    color:var(--paper);
    margin:0;
  }
  .svc-cta-tile .cta-tile-arrow{
    width:46px; height:46px;
    border-radius:50%;
    background:var(--ember-grad);
    color:var(--paper);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    transition:transform 0.3s ease;
  }
  .svc-cta-tile:hover .cta-tile-arrow{ transform:rotate(45deg); }

  /* ---------- About ---------- */
  .about-grid{
    display:grid;
    grid-template-columns: 0.85fr 1fr;
    gap:80px;
    align-items:center;
  }
  .about-visual{
    aspect-ratio: 4/5;
    border-radius:18px;
    position:relative;
    background:
      linear-gradient(160deg, #F1ECE2 0%, #FBF9F5 100%);
    border:1px solid var(--line);
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .about-visual .about-logomark{
    width:46%;
    height:auto;
    filter:drop-shadow(0 18px 34px rgba(39,104,252,0.28));
  }
  .about-visual::before{
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(circle at 30% 20%, rgba(39,104,252,0.16), transparent 55%);
  }
  .about-copy ul{
    list-style:none;
    margin:34px 0 42px;
    display:flex; flex-direction:column; gap:16px;
  }
  .about-copy li{
    display:flex; align-items:flex-start; gap:14px;
    font-size:15px;
    color:var(--paper-dim);
    line-height:1.5;
  }
  .about-copy li svg{
    flex-shrink:0;
    width:20px; height:20px;
    margin-top:1px;
  }
  .about-copy h2{
    font-family:var(--display);
    font-size:clamp(28px,3.2vw,38px);
    font-weight:700;
    line-height:1.15;
    letter-spacing:-0.01em;
    margin:16px 0 22px;
    max-width:480px;
  }
  .about-copy > p{
    color:var(--paper-dim);
    font-size:16px;
    line-height:1.65;
    max-width:480px;
  }

  /* ---------- Process ---------- */
  .process{ background:var(--ink-2); }
  .process-track{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:40px;
  }
  .process-track::before{
    content:"";
    position:absolute;
    top:19px; left:0; right:0;
    height:1px;
    background:var(--line);
  }
  .process-step{ position:relative; padding-top:56px; }
  .process-step .step-num{
    position:absolute; top:0; left:0;
    font-family:var(--mono);
    font-size:13px;
    color:var(--paper);
    background:var(--ember-grad);
    width:38px; height:38px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-weight:500;
    z-index:2;
  }
  .process-step h3{
    font-family:var(--display);
    font-size:19px;
    font-weight:600;
    margin-bottom:10px;
  }
  .process-step p{
    font-size:14px;
    color:var(--ash);
    line-height:1.6;
  }

  /* ---------- Ideal partner ---------- */
  .partners-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    margin-bottom:52px;
  }
  .partner-card{
    background:var(--paper);
    padding:38px 32px;
  }
  .partner-card .idx{
    font-family:var(--mono);
    font-size:12px;
    color:var(--ember-1-text);
    display:block;
    margin-bottom:20px;
  }
  .partner-card h3{
    font-family:var(--display);
    font-size:21px;
    font-weight:600;
    margin-bottom:12px;
  }
  .partner-card p{
    font-size:14.5px;
    color:var(--ash);
    line-height:1.6;
  }

  /* ---------- Insights ---------- */
  .insights-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:30px;
  }
  .post-card{ display:flex; flex-direction:column; }
  .post-thumb{
    aspect-ratio:16/9;
    border-radius:12px;
    margin-bottom:22px;
    position:relative;
    overflow:hidden;
    border:1px solid var(--line);
  }
  .post-thumb img{
    transition:transform 0.5s ease;
  }
  .post-card:hover .post-thumb img{ transform:scale(1.06); }
  .post-thumb .g1{ background:linear-gradient(135deg,#F1ECE2,#E9E2D2); position:absolute; inset:0; }
  .post-thumb .glow{
    position:absolute; width:140%; height:140%; top:-20%; left:-20%;
    background:radial-gradient(circle at 30% 30%, rgba(39,104,252,0.28), transparent 55%);
  }
  .post-thumb .tag{
    position:absolute; bottom:16px; left:16px;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--paper-dim);
    background:rgba(255,255,255,0.72);
    padding:6px 10px;
    border-radius:100px;
    border:1px solid var(--line);
  }
  .post-card h3{
    font-family:var(--display);
    font-size:19px;
    font-weight:600;
    line-height:1.3;
    margin-bottom:14px;
  }
  .post-card .read{
    font-family:var(--mono);
    font-size:12px;
    color:var(--ember-1-text);
    letter-spacing:0.04em;
    text-transform:uppercase;
    margin-top:auto;
  }

  /* ---------- Entry content (rich WYSIWYG prose — posts, pages, case studies) ---------- */
  .entry-content{
    font-size:16.5px;
    line-height:1.8;
    color:var(--paper-dim);
  }
  .entry-content > *:first-child{ margin-top:0; }
  .entry-content p{ margin:0 0 26px; }
  .entry-content h2{
    font-family:var(--display);
    font-weight:700;
    font-size:clamp(24px,2.8vw,32px);
    color:var(--ink);
    letter-spacing:-0.01em;
    line-height:1.3;
    margin:48px 0 20px;
  }
  .entry-content h3{
    font-family:var(--display);
    font-weight:600;
    font-size:20px;
    color:var(--ink);
    line-height:1.35;
    margin:36px 0 16px;
  }
  .entry-content h4{
    font-family:var(--display);
    font-weight:600;
    font-size:17px;
    color:var(--ink);
    margin:28px 0 12px;
  }
  .entry-content ul, .entry-content ol{
    margin:0 0 26px;
    padding-left:22px;
  }
  .entry-content li{ margin-bottom:10px; }
  .entry-content ul li{ list-style:disc; }
  .entry-content ol li{ list-style:decimal; }
  .entry-content li::marker{ color:var(--ember-1); }
  .entry-content a{
    color:var(--ink);
    text-decoration:underline;
    text-decoration-color:var(--ember-1);
    text-underline-offset:2px;
  }
  .entry-content a:hover{ color:var(--ember-1); }
  .entry-content strong{ color:var(--ink); font-weight:600; }
  .entry-content blockquote{
    margin:32px 0;
    padding:4px 0 4px 24px;
    border-left:3px solid var(--ember-1);
    font-size:18px;
    font-style:normal;
    color:var(--ink);
    line-height:1.6;
  }
  .entry-content img{
    max-width:100%;
    height:auto;
    margin:8px 0 26px;
    display:block;
  }
  .entry-content figure{ margin:0 0 26px; }
  .entry-content figcaption{
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--ash);
    margin-top:10px;
    text-align:center;
  }
  .entry-content hr{
    border:none;
    border-top:1px solid var(--line);
    margin:40px 0;
  }
  .entry-content table{
    width:100%;
    border-collapse:collapse;
    margin:0 0 26px;
    font-size:14.5px;
  }
  .entry-content th, .entry-content td{
    text-align:left;
    padding:12px 14px;
    border-bottom:1px solid var(--line);
  }
  .entry-content th{
    font-family:var(--mono);
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:0.04em;
    color:var(--ash);
  }
  .entry-content code{
    font-family:var(--mono);
    font-size:0.9em;
    background:var(--ink-2);
    padding:2px 6px;
    border-radius:4px;
  }

  /* ---------- Single post: reading progress bar ---------- */
  .reading-progress{
    position:fixed;
    top:0; left:0;
    height:3px;
    width:0%;
    background:var(--ember-grad);
    z-index:200;
    transition:width 0.1s linear;
  }

  /* ---------- Single post: byline ---------- */
  .post-byline{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:22px;
  }
  .post-byline img{
    width:38px; height:38px;
    border-radius:50%;
    display:block;
  }
  .post-byline .byline-text{
    font-size:13.5px;
    color:var(--paper-dim);
    line-height:1.4;
  }
  .post-byline .byline-text b{ color:var(--ink); font-weight:600; }
  .post-byline .byline-dot{
    display:inline-block;
    width:3px; height:3px;
    border-radius:50%;
    background:var(--ash);
    margin:0 8px;
    vertical-align:middle;
  }
  .post-cat-badge{
    display:inline-block;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--ember-1);
    border:1px solid var(--line);
    border-radius:100px;
    padding:6px 14px;
    margin-top:20px;
  }

  /* ---------- Single post: two-column layout ---------- */
  .post-layout{
    display:grid;
    grid-template-columns:1fr 260px;
    gap:64px;
    align-items:start;
    max-width:980px;
    margin:0 auto;
  }
  .post-sidebar{
    position:sticky;
    top:110px;
    display:flex;
    flex-direction:column;
    gap:28px;
  }
  .post-toc{
    border-left:2px solid var(--line);
    padding-left:18px;
  }
  .post-toc-label{
    font-family:var(--mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--ash);
    margin-bottom:14px;
  }
  .post-toc ul{ list-style:none; }
  .post-toc li{ margin-bottom:10px; }
  .post-toc li.toc-level-3{ padding-left:14px; }
  .post-toc a{
    font-size:13.5px;
    color:var(--paper-dim);
    line-height:1.4;
    transition:color 0.2s ease;
  }
  .post-toc a:hover{ color:var(--ember-1); }

  .post-share{
    display:flex;
    gap:10px;
  }
  .post-share a, .post-share button{
    width:36px; height:36px;
    border-radius:50%;
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    color:var(--ink);
    background:var(--paper);
    cursor:pointer;
    transition:all 0.2s ease;
  }
  .post-share svg{ width:15px; height:15px; }
  .post-share a:hover, .post-share button:hover{
    border-color:var(--ember-1);
    color:var(--ember-1);
  }

  .author-card{
    background:var(--ink);
    border-radius:16px;
    padding:26px;
  }
  .author-card img{
    width:44px; height:44px;
    border-radius:50%;
    margin-bottom:14px;
  }
  .author-card .author-name{
    font-family:var(--display);
    font-weight:600;
    font-size:15px;
    color:var(--paper);
    margin-bottom:6px;
  }
  .author-card .author-bio{
    font-size:13px;
    color:#A9A297;
    line-height:1.6;
  }

  /* ---------- Single post: tags ---------- */
  .post-tags{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin-top:48px;
    padding-top:32px;
    border-top:1px solid var(--line);
  }
  .post-tags .tags-label{
    font-family:var(--mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--ash);
    margin-right:4px;
  }
  .post-tags a{
    font-size:12.5px;
    color:var(--paper-dim);
    border:1px solid var(--line);
    border-radius:100px;
    padding:6px 14px;
    transition:all 0.2s ease;
  }
  .post-tags a:hover{ border-color:var(--ember-1); color:var(--ember-1); }

  /* ---------- Single post: prev/next navigation ---------- */
  .post-nav{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:16px;
    overflow:hidden;
    margin-top:20px;
  }
  .post-nav a{
    background:var(--paper);
    padding:26px 28px;
    display:flex;
    flex-direction:column;
    gap:8px;
    transition:background 0.2s ease;
  }
  .post-nav a:hover{ background:var(--ink-2); }
  .post-nav .nav-dir{
    font-family:var(--mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--ash);
  }
  .post-nav .nav-title{
    font-family:var(--display);
    font-weight:600;
    font-size:15px;
    color:var(--ink);
    line-height:1.4;
  }
  .post-nav .nav-next{ text-align:right; align-items:flex-end; }

  @media (max-width:900px){
    .post-layout{ grid-template-columns:1fr; }
    .post-sidebar{ position:static; flex-direction:row; flex-wrap:wrap; }
    .post-toc{ width:100%; }
    .post-nav{ grid-template-columns:1fr; }
    .post-nav .nav-next{ text-align:left; align-items:flex-start; }
  }

  /* ---------- Showcase banner (pre-CTA image) ---------- */
  .showcase{ padding:0 32px 110px; }
  .showcase-banner{
    position:relative;
    aspect-ratio:1180/460;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 30px 60px -24px rgba(23,21,15,0.25);
  }
  .showcase-img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }
  .showcase-banner::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(20,18,15,0.55) 0%, rgba(20,18,15,0.05) 55%);
  }
  .showcase-caption{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:36px 40px;
    z-index:2;
  }
  .showcase-caption .eyebrow{ margin-bottom:12px; }
  .showcase-caption h3{
    font-family:var(--display);
    font-weight:700;
    font-size:clamp(22px,3vw,32px);
    color:var(--paper);
    max-width:560px;
    line-height:1.25;
  }

  /* ---------- Real estate landing: pain points (dark, problem framing) ---------- */
  .re-pain-section{
    background:var(--ink);
    position:relative;
  }
  .re-pain-section::before{
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(ellipse 50% 40% at 90% 0%, rgba(39,104,252,0.10), transparent 60%);
    pointer-events:none;
  }
  .re-pain-section .eyebrow{ color:var(--ember-1); }
  .re-pain-section .section-head h2{ color:var(--paper); }
  .re-pain-section .section-head p{ color:#A9A297; }
  .re-pain-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:1px;
    background:#2E2B24;
    border:1px solid #2E2B24;
    position:relative;
  }
  .re-pain-card{
    background:#1C1A15;
    padding:36px 34px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .re-pain-card .re-mark{
    width:38px; height:38px;
    border-radius:50%;
    border:1.5px solid #4A2530;
    color:#E8677E;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--display);
    font-weight:700;
    font-size:18px;
    flex-shrink:0;
  }
  .re-pain-card h3{
    font-family:var(--display);
    font-weight:600;
    font-size:19px;
    color:var(--paper);
  }
  .re-pain-card p{
    font-size:14px;
    color:#A9A297;
    line-height:1.65;
  }

  /* ---------- Real estate landing: how we help (light, solution framing) ---------- */
  .re-solve-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:28px;
  }
  .re-solve-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:16px;
    padding:30px 28px;
    display:flex;
    flex-direction:column;
    gap:14px;
    transition:box-shadow 0.3s ease, transform 0.3s ease;
  }
  .re-solve-card:hover{
    box-shadow:0 24px 44px -28px rgba(23,21,15,0.18);
    transform:translateY(-3px);
  }
  .re-solve-card .re-check{
    width:38px; height:38px;
    border-radius:50%;
    background:var(--ember-grad);
    color:var(--paper);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .re-solve-card .re-check svg *{ stroke:#FBF9F5 !important; }
  .re-solve-card h3{
    font-family:var(--display);
    font-weight:600;
    font-size:18px;
    color:var(--ink);
  }
  .re-solve-card p{
    font-size:14px;
    color:var(--paper-dim);
    line-height:1.6;
  }

  @media (max-width:700px){
    .re-pain-grid{ grid-template-columns:1fr; }
    .re-solve-grid{ grid-template-columns:1fr; }
  }

  /* ---------- CTA band ---------- */
  .cta-band{
    background:var(--ink-2);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .cta-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:36px;
  }
  .cta-inner h2{
    font-family:var(--display);
    font-size:clamp(30px,4.4vw,52px);
    font-weight:700;
    letter-spacing:-0.01em;
    max-width:560px;
    line-height:1.1;
  }
  .cta-right{ display:flex; flex-direction:column; gap:18px; align-items:flex-start; }
  .cta-right p{ color:var(--paper-dim); font-size:15px; max-width:320px; line-height:1.6; }

  /* ---------- Footer ---------- */
  footer{ padding:80px 32px 40px; }
  .footer-top{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:40px;
    padding-bottom:60px;
    border-bottom:1px solid var(--line);
  }
  .footer-logo{
    font-family:var(--display);
    font-weight:700;
    font-size:24px;
    display:flex; align-items:center; gap:8px;
    margin-bottom:16px;
  }
  .footer-top p{ color:var(--ash); font-size:14px; max-width:260px; line-height:1.6; }
  /* Footer column labels are navigation labels, not content headings —
     using <p> instead of <h4> keeps them out of the page's heading
     outline (a footer h4 was flagging "heading order" audits as a level
     skip on pages whose last content heading was h2, since footer.php
     is shared across every template and can't know what heading level
     came before it on any given page). Visual style is unchanged. */
  .footer-col-heading{
    font-family:var(--mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--ash);
    margin-bottom:20px;
  }
  .footer-col li{
    list-style:none;
    margin:0;
    display:contents;
  }
  .footer-col a{
    display:block;
    font-size:14.5px;
    color:var(--paper-dim);
    margin-bottom:14px;
    transition:color 0.2s ease;
    width:fit-content;
  }
  .footer-col a:hover{ color:var(--ember-1); }
  .footer-col a[aria-current="page"],
  .footer-col .current-menu-item > a,
  .footer-col .current_page_item > a,
  .footer-col .current-menu-parent > a,
  .footer-col .current_page_parent > a,
  .footer-col .current-menu-ancestor > a,
  .footer-col .current_page_ancestor > a{
    color:var(--ember-1);
  }
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center;
    padding-top:30px;
    font-size:13px;
    color:var(--ash);
    flex-wrap:wrap; gap:16px;
  }
  .footer-legal{
    display:flex; align-items:center;
    flex-wrap:wrap; gap:16px;
  }
  .footer-legal a{
    color:var(--ash);
    transition:color 0.2s ease;
  }
  .footer-legal a:hover{ color:var(--ember-1); }
  .socials{ display:flex; gap:18px; }
  .socials a{
    width:36px; height:36px;
    border:1px solid var(--line);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:border-color 0.2s ease, color 0.2s ease;
  }
  .socials a:hover{ border-color:var(--ember-1); color:var(--ember-1); }

  /* ---------- Responsive ---------- */
  @media (max-width:960px){
    .nav-links{ display:none; }
    .nav-toggle{ display:flex; }
    header nav > .nav-cta{ display:none; }
    .services-grid{ grid-template-columns:repeat(2,1fr); }
    .about-grid{ grid-template-columns:1fr; gap:50px; }
    .about-visual{ max-width:360px; margin:0 auto; }
    .process-track{ grid-template-columns:1fr 1fr; row-gap:44px; }
    .process-track::before{ display:none; }
    .partners-grid, .insights-grid{ grid-template-columns:1fr; }
    .footer-top{ grid-template-columns:1fr 1fr; gap:36px; }
    .hero-stats{ grid-template-columns:repeat(2,1fr); }
    .hero-stats div{ padding:22px 24px; }
  }
  @media (max-width:600px){
    section{ padding:70px 20px; }
    .hero{ padding:90px 20px 60px; }
    .services-grid{ grid-template-columns:1fr; }
    .svc-cta-tile{ grid-column:span 1; padding:26px 24px; }
    .svc-cta-tile > div{ min-width:0; }
    .footer-top{ grid-template-columns:1fr; }
    .process-track{ grid-template-columns:1fr; }
    .cta-inner{ flex-direction:column; align-items:flex-start; }
    .hero-stats{ grid-template-columns:1fr 1fr; }
    .hero-stats div{ padding:18px 18px; }
    .hero-stats .num{ font-size:22px; }
    .showcase-banner{ aspect-ratio:4/3; }
  }

  /* ---------- Agile features (reuses process-track pattern) ---------- */
  .agile{ background:var(--paper); }

  /* ---------- Intro statement ---------- */
  .intro-statement{ max-width:760px; }
  .intro-statement h2{
    font-family:var(--display);
    font-size:clamp(26px,3.2vw,38px);
    font-weight:700;
    line-height:1.3;
    letter-spacing:-0.01em;
    margin:16px 0 22px;
  }
  .intro-statement p{
    font-size:17px;
    line-height:1.7;
    color:var(--paper-dim);
  }

  /* ---------- Industries cloud ---------- */
  .industries-cloud{
    display:flex; flex-wrap:wrap; gap:12px;
  }
  .industries-cloud span, .industries-cloud a{
    font-size:14px; font-weight:500;
    padding:10px 20px;
    border:1px solid var(--line);
    border-radius:100px;
    color:var(--paper-dim);
    transition:all 0.2s ease;
    display:inline-block;
  }
  .industries-cloud span:hover, .industries-cloud a:hover{ border-color:var(--ember-1); color:var(--ember-1); }
  .industries-cloud a{ cursor:pointer; }

  /* ---------- Testimonials ---------- */
  .testimonials{ background:var(--ink-2); }
  .testimonials-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .testimonial-card{
    background:var(--paper);
    padding:40px;
    display:flex; flex-direction:column;
  }
  .testimonial-card .quote-mark{
    font-family:var(--display);
    font-size:42px;
    font-weight:700;
    color:var(--ember-1);
    line-height:1;
    margin-bottom:14px;
  }
  .testimonial-card p{
    font-size:15.5px;
    line-height:1.65;
    color:var(--ink);
    margin-bottom:20px;
  }
  .testimonial-card .attribution{
    font-family:var(--mono);
    font-size:12px;
    color:var(--ash);
    text-transform:uppercase;
    letter-spacing:0.05em;
    margin-top:auto;
  }

  /* ---------- Partner logos strip ---------- */
  .partners-strip{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:40px;
  }
  .partners-strip img{
    height:26px;
    width:auto;
    object-fit:contain;
    filter:grayscale(1);
    opacity:0.45;
    transition:opacity 0.25s ease, filter 0.25s ease;
  }
  .partners-strip img:hover{ filter:grayscale(0); opacity:1; }

  @media (max-width:960px){
    .testimonials-grid{ grid-template-columns:1fr; }
  }
  /* ---------- Capability marquee ticker ---------- */
  .cap-marquee{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    overflow:hidden;
    padding:18px 0;
    background:var(--paper);
  }
  .cap-marquee-track{
    display:flex;
    width:max-content;
    animation:marquee 28s linear infinite;
  }
  .cap-marquee-track span{
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--paper-dim);
    white-space:nowrap;
    display:flex;
    align-items:center;
  }
  .cap-marquee-track span::after{
    content:"/";
    font-family:var(--display);
    font-size:14px;
    font-weight:600;
    color:var(--ember-1);
    opacity:0.6;
    margin:0 28px;
  }
  @keyframes marquee{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){
    .cap-marquee-track{ animation:none; }
  }

  /* ---------- Capability index list (replaces bento grid) ---------- */
  .cap-section{
    background:var(--ink);
    position:relative;
  }
  .cap-section::before{
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(ellipse 50% 40% at 90% 0%, rgba(39,104,252,0.10), transparent 60%);
    pointer-events:none;
  }
  .cap-section .eyebrow{ color:var(--ember-1); }
  .cap-section .section-head h2{ color:var(--paper); }
  .cap-section .section-head p{ color:#A9A297; }
  .cap-list{ border-top:1px solid #2E2B24; position:relative; }
  .cap-row{
    display:grid;
    grid-template-columns:56px 1fr 48px;
    align-items:center;
    gap:28px;
    padding:34px 20px;
    border-bottom:1px solid #2E2B24;
    transition:background 0.3s ease, padding-left 0.3s ease;
    scroll-margin-top:100px;
  }
  .cap-row:hover{ background:rgba(39,104,252,0.06); padding-left:32px; }
  .cap-num{
    font-family:var(--mono);
    font-size:14px;
    color:#6B6558;
    transition:color 0.3s ease;
  }
  .cap-row:hover .cap-num{ color:var(--ember-1); }
  .cap-body h3{
    font-family:var(--display);
    font-weight:700;
    font-size:clamp(21px,2.4vw,30px);
    color:var(--paper);
    letter-spacing:-0.01em;
  }
  .cap-body p{
    font-size:14.5px;
    color:#A9A297;
    max-width:520px;
    margin-top:8px;
    line-height:1.6;
  }
  .cap-arrow{
    width:42px; height:42px;
    border-radius:50%;
    border:1px solid #37332A;
    display:flex; align-items:center; justify-content:center;
    color:var(--paper);
    transition:all 0.3s ease;
    flex-shrink:0;
  }
  .cap-row:hover .cap-arrow{
    background:var(--ember-grad);
    border-color:transparent;
    color:var(--paper);
    transform:rotate(45deg);
  }

  /* ---------- Agile: split intro + timeline ---------- */
  .agile-split{
    display:grid;
    grid-template-columns:0.8fr 1.2fr;
    gap:70px;
  }
  .agile-intro{ align-self:start; position:sticky; top:110px; }
  .agile-intro h2{
    font-family:var(--display);
    font-size:clamp(28px,3.2vw,40px);
    font-weight:700;
    letter-spacing:-0.01em;
    line-height:1.15;
    margin:14px 0 18px;
  }
  .agile-intro p{
    color:var(--paper-dim);
    font-size:15.5px;
    line-height:1.65;
    max-width:400px;
  }
  .agile-list{ display:flex; flex-direction:column; }
  .agile-item{
    display:flex;
    gap:24px;
    padding:30px 0;
    border-top:1px solid var(--line);
    transition:padding-left 0.3s ease;
  }
  .agile-item:hover{ padding-left:10px; }
  .agile-item:last-child{ border-bottom:1px solid var(--line); }
  .agile-item .dot{
    width:36px; height:36px;
    border-radius:50%;
    border:1.5px solid var(--ember-1);
    color:var(--ember-1);
    font-family:var(--mono);
    font-size:12px;
    font-weight:600;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .agile-item h3{
    font-family:var(--display);
    font-size:18px;
    font-weight:600;
    margin-bottom:6px;
  }
  .agile-item p{
    font-size:14px;
    color:var(--ash);
    line-height:1.6;
    max-width:460px;
  }

  /* ---------- Insights: asymmetric featured + list ---------- */
  .insights-split{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:50px;
    align-items:start;
  }
  .insight-list{ display:flex; flex-direction:column; }
  .insight-list-item{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    padding:26px 0;
    border-top:1px solid var(--line);
    transition:padding-left 0.25s ease;
  }
  .insight-list-item:hover{ padding-left:8px; }
  .insight-list-item:last-child{ border-bottom:1px solid var(--line); }
  .insight-list-item h3{
    font-family:var(--display);
    font-size:16.5px;
    font-weight:600;
    line-height:1.4;
    max-width:280px;
  }
  .insight-list-item .tag-sm{
    font-family:var(--mono);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--ash);
    display:block;
    margin-bottom:8px;
  }
  .insight-list-item .arrow-sm{
    font-size:14px;
    color:var(--ember-1);
    flex-shrink:0;
    margin-top:4px;
  }

  @media (max-width:960px){
    .cap-row{ grid-template-columns:40px 1fr; }
    .cap-arrow{ display:none; }
    .agile-split{ grid-template-columns:1fr; gap:36px; }
    .agile-intro{ position:static; }
    .insights-split{ grid-template-columns:1fr; gap:36px; }
  }


  /* ---------- Start Your Project: compact hero ---------- */
  .sp-hero{
    padding:80px 32px 60px;
    position:relative;
  }
  .sp-hero-inner{ max-width:var(--maxw); margin:0 auto; }
  .sp-hero h1{
    font-family:var(--display);
    font-weight:800;
    font-size:clamp(34px,4.6vw,56px);
    line-height:1.1;
    letter-spacing:-0.02em;
    max-width:780px;
    margin:18px 0 20px;
  }
  .sp-hero p.sub{
    font-size:17px;
    line-height:1.65;
    color:var(--paper-dim);
    max-width:560px;
  }
  .sp-trustline{
    display:flex; flex-wrap:wrap; gap:26px;
    margin-top:28px;
  }
  .sp-trustline div{
    display:flex; align-items:center; gap:8px;
    font-size:13.5px;
    color:var(--ink);
    font-weight:500;
  }
  .sp-trustline svg{ width:16px; height:16px; flex-shrink:0; }

  /* ---------- Layout: form + trust panel ---------- */
  .sp-layout{
    padding:20px 32px 130px;
  }
  .sp-layout-inner{
    max-width:var(--maxw);
    margin:0 auto;
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:48px;
    align-items:start;
  }

  /* ---------- Form card ---------- */
  .form-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:20px;
    padding:48px;
    box-shadow:0 30px 60px -30px rgba(23,21,15,0.15);
    position:relative;
    overflow:hidden;
  }

  .step-progress{
    display:flex;
    align-items:center;
    margin-bottom:40px;
  }
  .step-progress .sp-dot{
    width:30px; height:30px;
    border-radius:50%;
    border:1.5px solid var(--line);
    color:var(--ash);
    font-family:var(--mono);
    font-size:12px;
    font-weight:600;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    transition:all 0.3s ease;
    background:var(--paper);
    z-index:1;
  }
  .step-progress .sp-dot.active{
    border-color:var(--ember-1);
    color:var(--paper);
    background:var(--ember-grad);
  }
  .step-progress .sp-dot.done{
    border-color:var(--ember-1);
    color:var(--ember-1);
    background:var(--paper);
  }
  .step-progress .sp-line{
    flex:1;
    height:1.5px;
    background:var(--line);
    position:relative;
    margin:0 -1px;
  }
  .step-progress .sp-line-fill{
    position:absolute; inset:0;
    background:var(--ember-grad);
    width:0%;
    transition:width 0.4s ease;
  }

  .form-step{ display:none; }
  .form-step.active{ display:block; animation:stepIn 0.35s ease; }
  @keyframes stepIn{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .form-step .step-eyebrow{
    font-family:var(--mono);
    font-size:11.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ember-1);
    margin-bottom:10px;
  }
  .form-step h2{
    font-family:var(--display);
    font-weight:700;
    font-size:clamp(22px,2.6vw,28px);
    letter-spacing:-0.01em;
    margin-bottom:8px;
  }
  .form-step .step-hint{
    font-size:14px;
    color:var(--ash);
    margin-bottom:28px;
  }

  .chip-grid{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .chip{
    font-size:14px;
    font-weight:500;
    padding:12px 20px;
    border:1.5px solid var(--line);
    border-radius:100px;
    color:var(--ink);
    cursor:pointer;
    transition:all 0.2s ease;
    user-select:none;
  }
  .chip:hover{ border-color:var(--ember-1); }
  .chip.selected{
    border-color:transparent;
    background:var(--ember-grad);
    color:var(--paper);
  }
  .chip:focus-visible{
    outline:2px solid var(--ember-1);
    outline-offset:2px;
  }

  /* Honeypot spam trap — present in the DOM for bots, invisible and
     unreachable for real (sighted, keyboard, or screen-reader) users. */
  .tp-hp{
    position:absolute !important;
    left:-9999px !important;
    top:-9999px !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
  }

  .field{ margin-bottom:20px; }
  .field label{
    display:block;
    font-size:13px;
    font-weight:600;
    margin-bottom:8px;
    color:var(--ink);
  }
  .field label .opt{
    font-weight:400;
    color:var(--ash);
    text-transform:none;
    letter-spacing:0;
  }
  .field input, .field textarea{
    width:100%;
    font-family:var(--body);
    font-size:15px;
    padding:13px 16px;
    border:1.5px solid var(--line);
    border-radius:10px;
    background:var(--paper);
    color:var(--ink);
    transition:border-color 0.2s ease;
  }
  .field input:focus, .field textarea:focus{
    outline:none;
    border-color:var(--ember-1);
  }
  .field textarea{ resize:vertical; min-height:100px; font-family:var(--body); }
  .field-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
  }

  .form-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:36px;
    padding-top:28px;
    border-top:1px solid var(--line);
  }
  .form-back{
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--ash);
    cursor:pointer;
    transition:color 0.2s ease;
    background:none;
    border:none;
    visibility:hidden;
  }
  .form-back.show{ visibility:visible; }
  .form-back:hover{ color:var(--ink); }
  .form-continue{
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    background:var(--ember-grad);
    color:var(--paper);
    font-weight:500;
    padding:15px 28px;
    border-radius:100px;
    border:none;
    cursor:pointer;
    display:inline-flex; align-items:center; gap:10px;
    transition:transform 0.2s ease, opacity 0.2s ease;
  }
  .form-continue:hover{ transform:translateY(-2px); }
  .form-continue:disabled{
    opacity:0.35;
    cursor:not-allowed;
    transform:none;
  }

  /* ---------- Success state ---------- */
  .form-success{
    display:none;
    text-align:center;
    padding:40px 10px;
  }
  .form-success.active{ display:block; animation:stepIn 0.4s ease; }
  .form-success .check-circle{
    width:64px; height:64px;
    border-radius:50%;
    background:var(--ember-grad);
    color:var(--paper);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 24px;
    font-size:28px;
  }
  .form-success h2{
    font-family:var(--display);
    font-weight:700;
    font-size:26px;
    margin-bottom:12px;
  }
  .form-success p{
    color:var(--paper-dim);
    font-size:15px;
    max-width:380px;
    margin:0 auto;
    line-height:1.6;
  }

  /* ---------- Trust panel ---------- */
  .trust-panel{
    position:sticky;
    top:110px;
    display:flex;
    flex-direction:column;
    gap:28px;
  }
  .trust-card{
    background:var(--ink);
    border-radius:20px;
    padding:36px;
    position:relative;
    overflow:hidden;
  }
  .trust-card::before{
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(ellipse 60% 50% at 100% 0%, rgba(39,104,252,0.18), transparent 60%);
    pointer-events:none;
  }
  .trust-card h3{
    font-family:var(--display);
    font-weight:700;
    font-size:19px;
    color:var(--paper);
    margin-bottom:20px;
    position:relative;
  }
  .trust-list{
    display:flex; flex-direction:column; gap:16px;
    position:relative;
  }
  .trust-list li{
    display:flex; align-items:flex-start; gap:12px;
    font-size:14px;
    color:#C9C4B8;
    line-height:1.5;
    list-style:none;
  }
  .trust-list svg{ flex-shrink:0; margin-top:2px; width:16px; height:16px; }
  .trust-list b{ color:var(--paper); font-weight:600; }

  .project-meta{ margin-bottom:24px; }
  .project-meta-row{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:16px;
    padding:14px 0;
    border-bottom:1px solid #2E2B24;
  }
  .project-meta-row:first-child{ padding-top:0; }
  .project-meta-row .pm-label{
    font-family:var(--mono);
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:#8A8375;
    flex-shrink:0;
  }
  .project-meta-row .pm-value{
    font-size:14px;
    color:var(--paper);
    font-weight:500;
    text-align:right;
  }

  /* ---------- Case studies: compact grid (below the top 3 featured) ---------- */
  .cs-compact-head{
    padding:50px 0 34px;
    border-top:1px solid var(--line);
  }
  .cs-compact-head .eyebrow{ margin-bottom:10px; }
  .cs-compact-head h3{
    font-family:var(--display);
    font-weight:700;
    font-size:22px;
    letter-spacing:-0.01em;
  }
  .cs-compact-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
    padding-bottom:20px;
  }
  .cs-compact-card{
    display:flex;
    flex-direction:column;
    border-radius:16px;
    overflow:hidden;
    background:var(--paper);
    border:1px solid var(--line);
    transition:box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  }
  a.cs-compact-card:hover{
    box-shadow:0 24px 44px -28px rgba(23,21,15,0.24);
    transform:translateY(-3px);
    border-color:transparent;
  }
  .cs-compact-card.no-link{ cursor:default; }
  .cs-compact-media{
    aspect-ratio:4/3;
    position:relative;
    overflow:hidden;
  }
  .cs-compact-media img, .cs-compact-media svg{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition:transform 0.5s ease;
  }
  a.cs-compact-card:hover .cs-compact-media img{ transform:scale(1.06); }
  .cs-compact-media .tag-overlay{
    position:absolute;
    top:14px; left:14px;
    font-family:var(--mono);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--paper);
    background:rgba(20,18,15,0.55);
    padding:5px 12px;
    border-radius:100px;
    z-index:1;
  }
  .cs-compact-body{
    padding:20px 20px 22px;
    display:flex;
    flex-direction:column;
    gap:10px;
    flex:1;
  }
  .cs-compact-card h4{
    font-family:var(--display);
    font-size:16px;
    font-weight:600;
    color:var(--ink);
    line-height:1.35;
    margin:0;
  }
  .cs-compact-card p{
    font-size:13px;
    color:var(--paper-dim);
    line-height:1.5;
    margin:0;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .cs-compact-results{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .cs-compact-results div{
    display:flex;
    align-items:flex-start;
    gap:6px;
  }
  .cs-compact-results svg{
    width:13px; height:13px;
    flex-shrink:0;
    margin-top:2px;
  }
  .cs-compact-results span{
    font-size:12px;
    color:var(--ink);
    line-height:1.4;
  }
  .cs-compact-cta{
    font-family:var(--mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.04em;
    color:var(--ember-1);
    margin-top:auto;
    padding-top:4px;
  }
  .cs-compact-card.no-link .cs-compact-body{ padding-bottom:20px; }

  .industry-hub-card{
    display:flex;
    flex-direction:column;
    gap:10px;
    border-radius:16px;
    background:var(--paper);
    border:1px solid var(--line);
    padding:28px 26px 24px;
    transition:box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  }
  .industry-hub-card:hover{
    box-shadow:0 24px 44px -28px rgba(23,21,15,0.24);
    transform:translateY(-3px);
    border-color:transparent;
  }
  .industry-hub-card h4{
    font-family:var(--display);
    font-size:16px;
    font-weight:600;
    color:var(--ink);
    line-height:1.35;
    margin:0;
  }
  .industry-hub-card p{
    font-size:13px;
    color:var(--paper-dim);
    line-height:1.5;
    margin:0;
    flex:1;
  }

  @media (max-width:900px){
    .cs-compact-grid{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:600px){
    .cs-compact-grid{ grid-template-columns:1fr; }
  }

  /* ---------- Related case studies ---------- */
  .related-cs-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:30px;
  }
  @media (max-width:900px){
    .related-cs-grid{ grid-template-columns:1fr; }
  }

  .trust-direct{
    border-top:1px solid #2E2B24;
    margin-top:24px;
    padding-top:24px;
    position:relative;
  }
  .trust-direct p{
    font-size:12.5px;
    color:#8A8375;
    text-transform:uppercase;
    letter-spacing:0.05em;
    font-family:var(--mono);
    margin-bottom:10px;
  }
  .trust-direct a{
    display:block;
    font-size:14.5px;
    color:var(--paper);
    font-weight:500;
    margin-bottom:6px;
    transition:color 0.2s ease;
  }
  .trust-direct a:hover{ color:var(--ember-1); }

  .trust-quote{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:20px;
    padding:32px;
  }
  .trust-quote .quote-mark{
    font-family:var(--display);
    font-size:32px;
    font-weight:700;
    color:var(--ember-1);
    line-height:1;
    margin-bottom:10px;
  }
  .trust-quote p{
    font-size:14.5px;
    line-height:1.6;
    color:var(--ink);
    margin-bottom:14px;
  }
  .trust-quote .attribution{
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--ash);
    text-transform:uppercase;
    letter-spacing:0.05em;
  }

  @media (max-width:960px){
    .sp-layout-inner{ grid-template-columns:1fr; }
    .trust-panel{ position:static; }
    .form-card{ padding:32px 24px; }
    .field-row{ grid-template-columns:1fr; }
  }
  @media (max-width:600px){
    .sp-hero{ padding:60px 20px 40px; }
    .sp-layout{ padding:10px 20px 90px; }
    .form-card{ padding:26px 18px; border-radius:16px; }
    .step-progress .sp-dot{ width:26px; height:26px; font-size:11px; }
  }
  /* ---------- Case studies: filter bar ---------- */
  .cs-filter{
    padding:56px 32px 60px;
  }
  .cs-filter-inner{
    max-width:var(--maxw);
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .cs-chip{
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:0.03em;
    padding:10px 18px;
    border:1.5px solid var(--line);
    border-radius:100px;
    color:var(--paper-dim);
    cursor:pointer;
    transition:all 0.2s ease;
    user-select:none;
    flex-shrink:0;
    white-space:nowrap;
  }
  .cs-chip:hover{ border-color:var(--ember-1); color:var(--ink); }
  .cs-chip.active{
    border-color:transparent;
    background:var(--ember-grad);
    color:var(--paper);
  }
  @media (max-width:700px){
    .cs-filter{ padding:40px 0 40px; }
    .cs-filter-inner{
      flex-wrap:nowrap;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      scroll-behavior:smooth;
      padding:0 32px;
      margin:0;
      scrollbar-width:none;
    }
    .cs-filter-inner::-webkit-scrollbar{ display:none; }
  }

  /* ---------- Case study rows ---------- */
  .cs-list{
    padding:0 32px 60px;
  }
  .cs-list-inner{ max-width:var(--maxw); margin:0 auto; }
  .cs-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:center;
    padding:64px 0;
    border-top:1px solid var(--line);
    transition:opacity 0.3s ease;
  }
  .cs-row:last-child{ border-bottom:1px solid var(--line); }
  .cs-hidden{ display:none !important; }
  .cs-row.reverse .cs-media{ order:2; }
  .cs-row.reverse .cs-content{ order:1; }

  .cs-media{
    position:relative;
    aspect-ratio:5/4;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 30px 60px -28px rgba(23,21,15,0.22);
  }
  .cs-media img, .cs-media svg{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }
  .cs-media::after{
    content:"";
    position:absolute; inset:0;
    background-image: radial-gradient(rgba(255,255,255,0.3) 1.5px, transparent 1.5px);
    background-size:20px 20px;
    mix-blend-mode:overlay;
    pointer-events:none;
  }

  .cs-tags{
    display:flex; flex-wrap:wrap; gap:8px;
    margin-bottom:18px;
  }
  .cs-tags span{
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--ember-1);
    border:1px solid var(--line);
    border-radius:100px;
    padding:5px 12px;
  }
  .cs-content h3{
    font-family:var(--display);
    font-weight:700;
    font-size:clamp(22px,2.6vw,30px);
    letter-spacing:-0.01em;
    line-height:1.25;
    margin-bottom:14px;
  }
  .cs-content p{
    font-size:15px;
    line-height:1.65;
    color:var(--paper-dim);
    max-width:480px;
    margin-bottom:26px;
  }
  .cs-results{
    display:flex;
    flex-wrap:wrap;
    gap:28px;
    margin-bottom:28px;
  }
  .cs-results div{
    display:flex;
    align-items:flex-start;
    gap:10px;
    max-width:200px;
  }
  .cs-results svg{ flex-shrink:0; margin-top:2px; width:16px; height:16px; }
  .cs-results span{
    font-size:13.5px;
    color:var(--ink);
    font-weight:500;
    line-height:1.4;
  }

  @media (max-width:900px){
    .cs-row, .cs-row.reverse{
      grid-template-columns:1fr;
      gap:32px;
      padding:44px 0;
    }
    .cs-row .cs-media, .cs-row.reverse .cs-media{ order:1; }
    .cs-row .cs-content, .cs-row.reverse .cs-content{ order:2; }
  }

  /* ---------- FAQ accordion (Services / Agency pages) ----------
     Mirrors the site's established numbered-row language (.agile-item's
     mono-numbered dot, .cap-row's num/body/arrow grid, .chip.selected's
     ember-fill "active" state) rather than a generic accordion. */
  .faq-list{ border-top:1px solid var(--line); max-width:780px; }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-item summary{
    cursor:pointer;
    list-style:none;
    display:grid;
    grid-template-columns:40px 1fr 36px;
    align-items:center;
    gap:22px;
    padding:28px 0;
    transition:padding-left 0.3s ease;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item:hover summary{ padding-left:10px; }
  .faq-num{
    font-family:var(--mono);
    font-size:12.5px;
    font-weight:600;
    color:var(--ember-1);
    border:1.5px solid var(--ember-1);
    border-radius:50%;
    width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .faq-q{
    font-family:var(--display);
    font-weight:600;
    font-size:18px;
    line-height:1.4;
    color:var(--ink);
    transition:color 0.25s ease;
  }
  .faq-item:hover .faq-q, .faq-item[open] .faq-q{ color:var(--ember-1); }
  .faq-toggle{
    width:34px; height:34px;
    border-radius:50%;
    border:1.5px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono);
    font-size:16px;
    color:var(--ember-1);
    flex-shrink:0;
    transition:transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  }
  .faq-item:hover .faq-toggle{ border-color:var(--ember-1); }
  .faq-item[open] .faq-toggle{
    background:var(--ember-grad);
    border-color:transparent;
    color:var(--paper);
    transform:rotate(135deg);
  }
  .faq-a{
    margin:0 0 28px;
    padding-left:62px;
    max-width:620px;
    color:var(--paper-dim);
    font-size:15px;
    line-height:1.7;
  }
  @media (max-width:640px){
    .faq-item summary{ grid-template-columns:34px 1fr 30px; gap:14px; padding:22px 0; }
    .faq-num{ width:32px; height:32px; font-size:11px; }
    .faq-q{ font-size:16px; }
    .faq-toggle{ width:28px; height:28px; font-size:14px; }
    .faq-a{ padding-left:0; margin-bottom:22px; }
  }

  /* Respect the OS-level "reduce motion" preference: turn off smooth
     scrolling and stop/shorten every animation and transition on the
     site (marquee, kinetic hero text, flicker, step transitions, hover
     effects) for anyone who's told their system they get motion
     sickness or distraction from it. */
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *, *::before, *::after{
      animation-duration:0.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.01ms !important;
      scroll-behavior:auto !important;
    }
  }