/*
Theme Name: James Cushman v1.5.3
Theme URI: https://jamescushman.com
Author: James Cushman
Description: A custom personal brand and portfolio theme inspired by the James Cushman homepage concept.
Version: 1.5.3
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: jamescushman
*/

:root{
  --jc-navy:#031a34;
  --jc-navy-2:#06294e;
  --jc-blue:#1477ff;
  --jc-blue-2:#42a5ff;
  --jc-ink:#0f1726;
  --jc-muted:#536078;
  --jc-pale:#f4f8fe;
  --jc-line:#d9e5f5;
  --jc-white:#ffffff;
  --jc-max:1460px;
  --jc-radius:12px;
  --jc-shadow:0 12px 32px rgba(13,42,80,.09);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

html,
body{
  width:100%;
  max-width:none;
}

body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--jc-ink);
  background:#fff;
  line-height:1.55;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  height:auto;
}

button,
input,
textarea{
  font:inherit;
}

.jc-container{
  width:min(var(--jc-max),calc(100% - 64px));
  margin-inline:auto;
}

.jc-section{
  padding:52px 0;
}

.jc-eyebrow{
  margin:0 0 8px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.78rem;
  font-weight:800;
  color:var(--jc-blue);
}

.jc-section-title{
  margin:0;
  font-size:clamp(1.75rem,2.35vw,2.45rem);
  line-height:1.05;
  letter-spacing:-.03em;
}

.jc-section-copy{
  max-width:800px;
  margin:10px auto 0;
  color:var(--jc-muted);
  font-size:.95rem;
}

.jc-center{
  text-align:center;
}

/* ==========================================================
   HEADER / HERO
   ========================================================== */

.jc-hero{
  position:relative;
  overflow:hidden;
  color:#fff;
  min-height:clamp(450px,39vw,620px);
  background-color:#010817;
}

.jc-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(1,9,22,.30) 0%,
    rgba(1,9,22,.13) 35%,
    rgba(1,9,22,0) 62%
  );
  pointer-events:none;
}

.jc-site-header{
  position:relative;
  z-index:10;
  padding:8px 0;
}
.jc-site-header{
  position:relative;
  z-index:100;
}
.jc-header-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}

.jc-brand{
  display:flex;
  align-items:center;
  gap:9px;
}

.jc-monogram{
  font-size:2.15rem;
  font-weight:500;
  line-height:.82;
  letter-spacing:-.08em;
  color:var(--jc-blue);
}

.jc-brand-text strong{
  display:block;
  font-size:.95rem;
  letter-spacing:.05em;
  font-weight:500;
}

.jc-brand-text small{
  display:block;
  font-size:.71rem;
  font-weight:500;
  letter-spacing:.02em;
}

.jc-domain-name{
  color:#1949a1;
}

.jc-domain-ext{
  color:rgba(255,255,255,.55);
}

.jc-nav ul{
  display:flex;
  align-items:center;
  gap:clamp(20px,2vw,34px);
  margin:0;
  padding:0;
  list-style:none;
}

/* ==========================================================
   PRIMARY NAVIGATION
   ========================================================== */

.jc-nav a{
  position:relative;
  display:inline-flex;
  align-items:center;

  padding:5px 0 8px;

  font-size:.71rem;
  font-weight:700;
  line-height:1;
  letter-spacing:.055em;
  text-transform:uppercase;

  color:rgba(247,251,255,.88);

  transition:
    color 220ms ease,
    text-shadow 220ms ease;
}

/* Animated underline */
.jc-nav a::after{
  content:"";
  position:absolute;

  left:50%;
  bottom:2px;

  width:100%;
  height:1px;

  border-radius:999px;
background:linear-gradient(
  90deg,
  rgba(20,119,255,0),
  var(--jc-blue),
  rgba(20,119,255,0)
);

  opacity:0;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;

  transition:
    transform 220ms cubic-bezier(.22,.61,.36,1),
    opacity 180ms ease;
}

/* Hover and keyboard focus */
.jc-nav a:hover,
.jc-nav a:focus-visible{
  color:#ffffff;
  text-shadow:0 0 14px rgba(72,165,255,.38);
}

.jc-nav a:hover::after,
.jc-nav a:focus-visible::after{
  opacity:1;
  transform:translateX(-50%) scaleX(1);
}

/* Current page */
.jc-nav .current-menu-item > a,
.jc-nav .current_page_item > a,
.jc-nav .current-menu-ancestor > a{
  color:#62b5ff;
}

.jc-nav .current-menu-item > a::after,
.jc-nav .current_page_item > a::after,
.jc-nav .current-menu-ancestor > a::after{
  opacity:.9;
  transform:translateX(-50%) scaleX(1);
}

/* Accessible keyboard outline */
.jc-nav a:focus-visible{
  outline:2px solid rgba(98,181,255,.75);
  outline-offset:5px;
  border-radius:2px;
}

.jc-menu-toggle{
  display:none;
  background:none;
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  border-radius:8px;
  padding:9px 12px;
}

.jc-hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,535px) minmax(0,1fr);
  gap:clamp(24px,2.5vw,46px);

  align-items:start;

  min-height:clamp(440px,28vw,525px);

  padding:80px 0 48px;
}

.jc-hero-copy{
  max-width:535px;
}

.jc-hero h1{
  margin:0 0 14px;
  font-size:clamp(3.25rem,4.45vw,4.95rem);
  line-height:.88;
  letter-spacing:-.045em;
  font-weight:500;
}

.jc-hero h1 span{
  display:block;
}

/* ==========================================================
   HERO NETWORK PULSES
   Coordinates mapped to the 1983 × 793 source artwork
   ========================================================== */

.jc-hero-artwork{
  position:absolute;
  left:95%;
  top:50%;

  width:min(110vw,1700px);
  aspect-ratio:1983 / 793;

  transform:translate(-95%,-50%);

  z-index:0;
  pointer-events:none;
}

.jc-hero-artwork-image{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
}

.jc-hero-pulses{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.jc-pulse-node{
  position:absolute;
  left:var(--node-x);
  top:var(--node-y);

  width:7px;
  height:7px;

  border-radius:50%;

  background:#fff;

  border:1px solid rgba(20,119,255,.95);

  opacity:0;

  transform:translate(-50%,-50%) scale(.7);

  will-change:transform,opacity,box-shadow;
}

.jc-pulse-node.is-active{
  animation:jcNodePulse 2.4s ease-in-out forwards;
}

.jc-pulse-node.is-strong{
  animation:jcNodePulseStrong 2.9s ease-in-out forwards;
}

@keyframes jcNodePulse{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.6);

    box-shadow:
      0 0 0 0 rgba(255,255,255,0),
      0 0 0 0 rgba(72,165,255,0);
  }

  20%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);

    box-shadow:
      0 0 6px 2px rgba(255,255,255,1),
      0 0 16px 5px rgba(72,165,255,.95),
      0 0 34px 12px rgba(20,119,255,.5);
  }

  52%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.2);

    box-shadow:
      0 0 8px 3px rgba(255,255,255,1),
      0 0 22px 8px rgba(72,165,255,1),
      0 0 48px 18px rgba(20,119,255,.62),
      0 0 76px 30px rgba(20,119,255,.22);
  }

  75%{
    opacity:.75;
    transform:translate(-50%,-50%) scale(1);

    box-shadow:
      0 0 7px 2px rgba(255,255,255,.8),
      0 0 18px 6px rgba(72,165,255,.7),
      0 0 38px 14px rgba(20,119,255,.3);
  }

  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.7);

    box-shadow:
      0 0 0 0 rgba(255,255,255,0),
      0 0 0 0 rgba(72,165,255,0);
  }
}

@keyframes jcNodePulseStrong{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.55);

    box-shadow:
      0 0 0 0 rgba(255,255,255,0),
      0 0 0 0 rgba(72,165,255,0);
  }

  24%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.1);

    box-shadow:
      0 0 8px 3px rgba(255,255,255,1),
      0 0 24px 9px rgba(72,165,255,1),
      0 0 52px 20px rgba(20,119,255,.72);
  }

  52%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.45);

    box-shadow:
      0 0 10px 4px rgba(255,255,255,1),
      0 0 30px 12px rgba(72,165,255,1),
      0 0 66px 26px rgba(20,119,255,.78),
      0 0 96px 42px rgba(20,119,255,.28);
  }

  80%{
    opacity:.7;
    transform:translate(-50%,-50%) scale(1.05);

    box-shadow:
      0 0 8px 2px rgba(255,255,255,.75),
      0 0 22px 8px rgba(72,165,255,.62),
      0 0 46px 18px rgba(20,119,255,.34);
  }

  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.65);

    box-shadow:
      0 0 0 0 rgba(255,255,255,0),
      0 0 0 0 rgba(72,165,255,0);
  }
}

/* Respect reduced-motion accessibility preferences */
@media (prefers-reduced-motion:reduce){
  .jc-pulse-node{
    display:none;
  }
}

/* Keep the page content above the pulses */
.jc-hero-inner{
  position:relative;
  z-index:10;
}




.jc-role{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.34em;
  color:#43a0ff;
  font-size:clamp(.74rem,.88vw,.92rem);
  letter-spacing:.07em;
  text-transform:uppercase;
}

.jc-role-text{
  font-weight:500;
}

.jc-role-sep{
  color:#fff;
  font-weight:300;
}

.jc-hero-lead{
  margin:0;
  max-width:500px;
  font-size:clamp(1.02rem,1.22vw,1.36rem);
  line-height:1.42;
}

.jc-rule{
  width:52px;
  height:3px;
  margin:20px 0 18px;
  background:#3a95ff;
  border-radius:99px;
}

.jc-traits{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:24px;
}

.jc-trait{
  display:grid;
  grid-template-columns:30px 1fr;
  gap:8px;
  align-items:start;
  min-width:0;
}

.jc-trait svg{
  width:26px;
  height:26px;
  stroke:#48a5ff;
  fill:none;
  stroke-width:1.5;
}

.jc-trait strong{
  display:block;
  margin-bottom:4px;
  font-size:.64rem;
  text-transform:uppercase;
}

.jc-trait span{
  font-size:.69rem;
  line-height:1.55;
  color:#e1ecf9;
}

.jc-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.jc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  padding:0 16px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.75);
  font-size:.69rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  transition:.2s ease;
}

.jc-btn-primary{
  background:linear-gradient(135deg,#1a83ff,#0b63e9);
  border-color:transparent;
  box-shadow:0 10px 24px rgba(0,102,238,.28);
}

.jc-btn:hover{
  transform:translateY(-2px);
}

.jc-hero-visual{
  min-height:1px;
}

/* ==========================================================
   SERVICES
   ========================================================== */

.jc-intro{
  padding:20px 0 10px;
  background:#fff;
}

.jc-services-wrap{
  padding:14px 0 40px;
  background:linear-gradient(180deg,#f7faff,#f0f6fd);
}

.jc-card-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.jc-service-card{
  min-height:195px;
  padding:22px;
  background:#fff;
  border:1px solid var(--jc-line);
  border-radius:9px;
  box-shadow:var(--jc-shadow);
}

.jc-service-icon{
  width:44px;
  height:44px;
  margin-bottom:16px;
  color:var(--jc-blue);
}

.jc-service-card h3{
  margin:0 0 9px;
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.01em;
}

.jc-service-card p{
  margin:0;
  color:#39455a;
  font-size:.9rem;
}

/* ==========================================================
   PROJECTS
   ========================================================== */

.jc-projects{
  padding:52px 0 66px;
}

.jc-project-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:20px;
  margin-top:26px;
}

.jc-project-card{
    display:grid;
    grid-template-columns:100px minmax(0,1fr);
    gap:20px;

    align-items:center;

    min-height:200px;

    padding:24px;
  background:#fff;
  border:1px solid #b9d4fa;
  border-radius:10px;
}

.jc-project-card.green{
  border-color:#a9d8ad;
}

.jc-project-card.gold{
  border-color:#efca79;
}

.jc-project-mark{
  width:120px;
  height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.jc-project-logo{
  width:110px;
  height:110px;
  display:block;
  object-fit:contain;
}

.jc-project-card.gold .jc-project-mark{
  color:#d59c16;
}

.jc-project-card.blue .jc-project-mark{
  color:#2479e6;
}

.jc-project-card h3{
  margin:0 0 10px;
  font-size:.95rem;
}

.jc-project-card p{
  margin:0 0 14px;
  color:#3d4758;
  font-size:.92rem;
}

.jc-project-link{
  font-weight:700;
  color:#1b75e8;
  font-size:.9rem;
}

.jc-outline-button{
    display:inline-flex;
    align-items:center;
    gap:8px;
 margin-top:24px;
    padding:0;

    border:0;
    background:transparent;

    color:var(--jc-blue);

    font-size:15px;
    font-weight:700;

    text-decoration:none;

    transition:
        color .25s ease,
        transform .25s ease;
}

.jc-outline-button:hover{
    color:#0d63d8;
    transform:translateX(3px);
}

.jc-outline-button:focus-visible{
    outline:3px solid rgba(20,119,255,.20);
    outline-offset:6px;
    border-radius:4px;
}

/* ==========================================================
   JC APPROACH PREVIEW
   ========================================================== */

.jc-belief{
  border-top:1px solid rgba(20,119,255,.09);
  border-bottom:1px solid rgba(20,119,255,.09);
  background:
    linear-gradient(
      90deg,
      rgba(232,242,255,.72),
      rgba(247,250,255,.96)
    );
}

.jc-belief-layout{
  display:grid;
  grid-template-columns:minmax(380px,1.05fr) minmax(600px,1.65fr);
  align-items:stretch;
  min-height:190px;
}


/* Quote side */

.jc-quote{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:24px;
  align-items:center;
  padding:32px 42px 32px 0;
  border-right:1px solid rgba(20,119,255,.15);
}

.jc-quote-icon{
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  border:1px solid rgba(20,119,255,.35);
  border-radius:50%;
  color:#1477ff;
  font-size:34px;
  font-weight:800;
  line-height:1;
}

.jc-quote-copy p{
  margin:0;
  color:#172237;
  font-size:16px;
  line-height:1.55;
}

.jc-quote-copy strong{
  display:block;
  margin-top:8px;
  color:#1477ff;
  font-size:19px;
  line-height:1.4;
}


/* Principles side */

.jc-belief-content{
  display:grid;
  grid-template-rows:1fr auto;
  min-width:0;
  padding:32px 0 25px 34px;
}

.jc-belief-values{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  align-items:start;
}

.jc-value{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:13px;
  align-items:start;
  min-width:0;
}

.jc-value-icon{
  padding-top:2px;
  color:#172237;
  font-size:16px;
  line-height:1;
}

.jc-value h4{
  margin:0 0 7px;
  color:#1477ff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.035em;
  text-transform:uppercase;
}

.jc-value p{
  margin:0;
  max-width:190px;
  color:#172237;
  font-size:14px;
  line-height:1.5;
}


/* Modal link */

.jc-approach-action{
  display:flex;
  justify-content:center;
  padding-top:22px;
}

.jc-approach-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0;
  border:0;
  background:none;
  color:#1477ff;
  font:inherit;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:
    color .22s ease,
    transform .22s ease;
}

.jc-approach-link span{
  transition:transform .22s ease;
}

.jc-approach-link:hover{
  color:#095fcf;
  transform:translateY(-1px);
}

.jc-approach-link:hover span{
  transform:translateX(3px);
}

.jc-approach-link:focus-visible{
  outline:3px solid rgba(20,119,255,.24);
  outline-offset:6px;
  border-radius:4px;
}


/* Responsive */

@media (max-width:1050px){

  .jc-belief-layout{
    grid-template-columns:1fr;
  }

  .jc-quote{
    padding:30px 0;
    border-right:0;
    border-bottom:1px solid rgba(20,119,255,.12);
  }

  .jc-belief-content{
    padding:28px 0;
  }
}

@media (max-width:720px){

  .jc-quote{
    grid-template-columns:58px minmax(0,1fr);
    gap:18px;
  }

  .jc-quote-icon{
    width:56px;
    height:56px;
    font-size:27px;
  }

  .jc-belief-values{
    grid-template-columns:1fr;
    gap:22px;
  }

  .jc-value p{
    max-width:none;
  }

  .jc-approach-action{
    justify-content:flex-start;
    padding-left:43px;
  }
}

/* ==========================================================
   JOURNEY
   ========================================================== */

.jc-journey{
  padding:60px 0 66px;
}

.jc-timeline{
  position:relative;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
  margin-top:34px;
}

.jc-timeline::before{
  content:"";
  position:absolute;
  left:5%;
  right:5%;
  top:34px;
  height:1px;
  background:#6ea9ff;
}

.jc-step{
  position:relative;
  z-index:1;
  text-align:center;
}

.jc-step-icon{
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
  margin:0 auto 14px;
  background:#fff;
  border:1px solid #80b3ff;
  border-radius:50%;
  color:#176ee2;
  font-size:1.55rem;
}

.jc-step h4{
  margin:0 0 7px;
  color:#176ee2;
  text-transform:uppercase;
  font-size:.78rem;
}

.jc-step p{
  margin:0;
  color:#354157;
  font-size:.76rem;
}

/* ==========================================================
   CONTACT / FOOTER
   ========================================================== */

.jc-contact-strip{
  padding:22px 0;
  background:#f1f6fc;
  border-top:1px solid #e2ebf6;
}

.jc-contact-inner{
  display:grid;
  grid-template-columns:1.2fr repeat(3,.75fr);
  gap:24px;
  align-items:center;
}

.jc-contact-title h2{
  margin:0 0 2px;
  font-size:1.45rem;
}

.jc-contact-title p{
  margin:0;
  color:#46536a;
  font-size:.82rem;
}

.jc-contact-item{
  display:flex;
  gap:13px;
  align-items:center;
  padding-left:24px;
  border-left:1px solid #cbd9ea;
}

.jc-contact-item svg{
  width:36px;
  height:36px;
  color:#1373e8;
}

.jc-contact-item strong{
  display:block;
  color:#176fe0;
  text-transform:uppercase;
  font-size:.69rem;
}

.jc-contact-item span{
  font-size:.78rem;
}

.jc-footer{
  padding:20px 0;
  background:linear-gradient(90deg,#03162c,#061f3c);
  color:#fff;
}

.jc-footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.jc-footer small{
  color:#9eb5d1;
}

.jc-top{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
}

/* ==========================================================
   WORDPRESS DEFAULTS
   ========================================================== */

.jc-page{
  min-height:65vh;
  padding:70px 0;
}

.jc-page h1{
  font-size:clamp(2.5rem,5vw,5rem);
  letter-spacing:-.04em;
}

.entry-content{
  font-size:1.06rem;
}

.entry-content > *{
  max-width:820px;
}

.entry-content .alignwide{
  max-width:1200px;
}

.entry-content .alignfull{
  max-width:none;
}

/* ==========================================================
   JC FOUR PILLARS — INTERACTIVE CARDS
   ========================================================== */

.jc-service-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:100%;
  min-width:0;
  min-height:100%;
  padding:28px 22px 24px;
  border:1px solid rgba(32,112,255,.20);
  border-radius:9px;
  background:#fff;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  appearance:none;
  overflow:hidden;
  box-shadow:
    0 8px 24px rgba(15,39,77,.035),
    0 1px 2px rgba(15,39,77,.025);
  transition:
    transform .28s cubic-bezier(.2,.7,.2,1),
    border-color .28s ease,
    box-shadow .28s ease,
    background-color .28s ease;
}

.jc-service-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(
      circle at 16% 12%,
      rgba(30,119,255,.07),
      transparent 34%
    );
  opacity:0;
  transition:opacity .28s ease;
}

.jc-service-card:hover{
  transform:translateY(-5px);
  border-color:rgba(30,119,255,.42);
  box-shadow:
    0 18px 40px rgba(15,39,77,.10),
    0 4px 12px rgba(30,119,255,.07);
}

.jc-service-card:hover::before{
  opacity:1;
}

.jc-service-card:focus-visible{
  outline:3px solid rgba(30,119,255,.30);
  outline-offset:4px;
}

.jc-service-card .jc-service-icon{
  position:relative;
  z-index:1;
  width:42px;
  height:42px;
  margin-bottom:19px;
  color:#1477ff;
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}

.jc-service-card:hover .jc-service-icon{
  transform:translateY(-2px) scale(1.04);
}

.jc-service-card h3{
  position:relative;
  z-index:1;
  margin:0 0 11px;
}

.jc-service-card p{
  position:relative;
  z-index:1;
  margin:0;
}

.jc-card-more{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding-top:20px;
  color:#1477ff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.055em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(5px);
  transition:
    opacity .25s ease,
    transform .25s ease;
}

.jc-service-card:hover .jc-card-more,
.jc-service-card:focus-visible .jc-card-more{
  opacity:1;
  transform:translateY(0);
}

.jc-card-more span{
  transition:transform .25s ease;
}

.jc-service-card:hover .jc-card-more span{
  transform:translateX(3px);
}


/* ==========================================================
   JC FOUR PILLARS — MODAL LAYER
   ========================================================== */

.jc-modal-layer{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  padding:24px;
}

.jc-modal-layer[hidden]{
  display:none;
}

.jc-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(3,13,28,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  animation:jcBackdropIn .28s ease forwards;
}

.jc-modal{
  position:relative;
  z-index:1;
  width:min(720px,100%);
  max-height:min(760px,calc(100vh - 48px));
  overflow:auto;
  padding:clamp(30px,4vw,48px);
  border:1px solid rgba(255,255,255,.62);
  border-radius:24px;
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(30,119,255,.08),
      transparent 30%
    ),
    rgba(255,255,255,.98);
  color:#142136;
  box-shadow:
    0 32px 90px rgba(0,12,30,.34),
    0 5px 20px rgba(0,12,30,.16);
  opacity:0;
  transform:translateY(16px) scale(.975);
  animation:jcModalIn .34s cubic-bezier(.2,.8,.2,1) forwards;
  scrollbar-width:thin;
}

.jc-modal[hidden]{
  display:none;
}

.jc-modal-close{
  position:absolute;
  top:18px;
  right:18px;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid rgba(17,41,76,.08);
  border-radius:50%;
  background:rgba(245,248,252,.92);
  color:#172337;
  font:inherit;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  transition:
    transform .22s ease,
    background-color .22s ease,
    border-color .22s ease;
}

.jc-modal-close:hover{
  transform:rotate(6deg) scale(1.04);
  border-color:rgba(30,119,255,.22);
  background:#fff;
}

.jc-modal-close:focus-visible{
  outline:3px solid rgba(30,119,255,.30);
  outline-offset:3px;
}

.jc-modal-icon-wrap{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  margin-bottom:18px;
  border:1px solid rgba(30,119,255,.15);
  border-radius:16px;
  background:rgba(30,119,255,.06);
}

.jc-modal-icon{
  width:32px;
  height:32px;
  color:#1477ff;
}

.jc-modal-eyebrow{
  margin:0 0 8px;
  color:#1477ff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.jc-modal h2{
  max-width:610px;
  margin:0 56px 22px 0;
  color:#101a2b;
  font-size:clamp(28px,4vw,42px);
  line-height:1.08;
  letter-spacing:-.035em;
}

.jc-modal-copy{
  display:grid;
  gap:16px;
}

.jc-modal-copy p{
  margin:0;
  color:#42516a;
  font-size:16px;
  line-height:1.75;
}

.jc-modal-copy p:first-child{
  color:#172337;
  font-size:18px;
  font-weight:700;
}

.jc-modal-statement{
  position:relative;
  margin:30px 0 0;
  padding:22px 24px 22px 27px;
  border:0;
  border-left:3px solid #1477ff;
  border-radius:0 14px 14px 0;
  background:rgba(30,119,255,.055);
  color:#172337;
  font-size:18px;
  font-style:italic;
  font-weight:650;
  line-height:1.5;
}

body.jc-modal-open{
  overflow:hidden;
}
/* ==========================================================
   JC APPROACH MODAL
   ========================================================== */

.jc-approach-modal{
  width:min(1080px,100%);
  max-height:calc(100vh - 48px);
  padding:clamp(32px,4vw,52px);
}

.jc-approach-intro{
  max-width:820px;
  margin:0 0 34px;
  color:#394960;
  font-size:clamp(17px,2vw,20px);
  line-height:1.72;
}

.jc-approach-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.jc-approach-card{
  padding:24px;
  border:1px solid rgba(20,119,255,.12);
  border-radius:17px;
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(20,119,255,.055),
      transparent 42%
    ),
    rgba(249,251,255,.92);
}

.jc-approach-card h3{
  margin:0 0 13px;
  color:#111c2d;
  font-size:18px;
  line-height:1.25;
}

.jc-approach-card p{
  margin:0 0 12px;
  color:#536178;
  font-size:15px;
  line-height:1.7;
}

.jc-approach-card p:last-child{
  margin-bottom:0;
}

.jc-approach-card ul{
  margin:4px 0 14px;
  padding-left:20px;
  color:#536178;
}

.jc-approach-card li{
  margin-bottom:7px;
  font-size:15px;
  line-height:1.55;
}

.jc-principles-panel,
.jc-lessons-panel{
  margin-top:28px;
  padding:28px;
  border:1px solid rgba(20,119,255,.10);
  border-radius:18px;
  background:rgba(20,119,255,.045);
}

.jc-principles-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 28px;
}

.jc-principle-row{
  display:grid;
  gap:5px;
  padding-bottom:13px;
  border-bottom:1px solid rgba(18,41,76,.08);
}

.jc-principle-row strong{
  color:#142037;
  font-size:14px;
}

.jc-principle-row span{
  color:#5a687e;
  font-size:14px;
  line-height:1.5;
}

.jc-lessons-panel ul{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 28px;
  margin:0;
  padding:0;
  list-style:none;
}

.jc-lessons-panel li{
  position:relative;
  padding-left:20px;
  color:#47556c;
  font-size:15px;
  line-height:1.6;
}

.jc-lessons-panel li::before{
  content:"";
  position:absolute;
  top:.68em;
  left:0;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#1477ff;
}

.jc-approach-closing{
  display:grid;
  gap:9px;
}

.jc-approach-closing strong{
  color:#142037;
  font-size:23px;
  font-style:normal;
}

.jc-approach-closing span{
  color:#4e5c72;
  font-size:15px;
  font-style:normal;
  font-weight:500;
  line-height:1.65;
}

@media (max-width:820px){

  .jc-approach-grid,
  .jc-principles-grid,
  .jc-lessons-panel ul{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){

  .jc-approach-modal{
    padding:30px 21px 26px;
  }

  .jc-approach-card,
  .jc-principles-panel,
  .jc-lessons-panel{
    padding:21px;
  }
}

.jc-approach-footer{
    display:flex;
    justify-content:center;
    margin-top:34px;
}

.jc-approach-link{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:0;

    border:0;
    background:none;

    color:var(--jc-blue,#1477ff);

    font-size:15px;
    font-weight:600;

    cursor:pointer;

    transition:
        color .25s ease,
        transform .25s ease,
        opacity .25s ease;
}

.jc-approach-link:hover{
    color:#0f63db;
    transform:translateY(-1px);
}

.jc-approach-link:focus-visible{
    outline:3px solid rgba(20,119,255,.25);
    outline-offset:5px;
    border-radius:4px;
}

.jc-belief-inner{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    align-items:start;
}
@keyframes jcBackdropIn{
  to{
    opacity:1;
  }
}

@keyframes jcModalIn{
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@media (max-width:640px){

  .jc-modal-layer{
    align-items:end;
    padding:10px;
  }

  .jc-modal{
    width:100%;
    max-height:calc(100vh - 20px);
    padding:30px 22px 28px;
    border-radius:22px;
  }

  .jc-modal-close{
    top:14px;
    right:14px;
  }

  .jc-modal h2{
    margin-right:42px;
    font-size:30px;
  }

  .jc-modal-copy p{
    font-size:15px;
    line-height:1.68;
  }

  .jc-card-more{
    opacity:1;
    transform:none;
  }
}

@media (prefers-reduced-motion:reduce){

  .jc-service-card,
  .jc-service-card::before,
  .jc-service-icon,
  .jc-card-more,
  .jc-card-more span,
  .jc-modal,
  .jc-modal-backdrop,
  .jc-modal-close{
    animation:none !important;
    transition:none !important;
  }

  .jc-modal,
  .jc-modal-backdrop{
    opacity:1;
    transform:none;
  }
}

/* ==========================================================
   JC CONTACT MODAL
   ========================================================== */

.jc-contact-dialog{
  width:min(760px,calc(100vw - 32px));
  max-height:calc(100vh - 32px);
  overflow-y:auto;
}

.jc-contact-intro{
  max-width:650px;
  margin:18px 0 28px;
  color:#435675;
  font-size:17px;
  line-height:1.72;
}

.jc-contact-form{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.jc-contact-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.jc-form-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.jc-form-field label{
  color:#152238;
  font-size:14px;
  font-weight:750;
  letter-spacing:-.01em;
}

.jc-form-field input,
.jc-form-field select,
.jc-form-field textarea{
  width:100%;
  border:1px solid rgba(38,92,168,.15);
  border-radius:14px;
  outline:none;
  background:#f7f9fd;
  color:#132037;
  font:inherit;
  font-size:15px;
  line-height:1.5;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background-color .2s ease;
}

.jc-form-field input,
.jc-form-field select{
  min-height:54px;
  padding:0 16px;
}

.jc-form-field textarea{
  min-height:150px;
  padding:15px 16px;
  resize:vertical;
}

.jc-form-field input::placeholder,
.jc-form-field textarea::placeholder{
  color:#8190a8;
}

.jc-form-field input:hover,
.jc-form-field select:hover,
.jc-form-field textarea:hover{
  border-color:rgba(36,110,255,.3);
  background:#fff;
}

.jc-form-field input:focus,
.jc-form-field select:focus,
.jc-form-field textarea:focus{
  border-color:#2472ff;
  background:#fff;
  box-shadow:0 0 0 4px rgba(36,114,255,.1);
}

.jc-select-wrap{
  position:relative;
}

.jc-select-wrap select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:48px;
  cursor:pointer;
}

.jc-select-wrap > svg{
  position:absolute;
  top:50%;
  right:17px;
  width:18px;
  height:18px;
  pointer-events:none;
  transform:translateY(-50%);
  fill:none;
  stroke:#557094;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.jc-contact-actions{
  display:flex;
  align-items:center;
  gap:18px;
  min-height:52px;
  margin-top:2px;
}

.jc-contact-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 22px;
  border:0;
  border-radius:13px;
  background:#176cff;
  color:#fff;
  font:inherit;
  font-size:14px;
  font-weight:750;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(23,108,255,.2);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease;
}

.jc-contact-submit:hover{
  transform:translateY(-2px);
  background:#075ee9;
  box-shadow:0 14px 30px rgba(23,108,255,.27);
}

.jc-contact-submit:active{
  transform:translateY(0);
}

.jc-contact-submit:disabled{
  opacity:.68;
  cursor:wait;
  transform:none;
}

.jc-contact-submit svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.jc-contact-status{
  margin:0;
  color:#52637c;
  font-size:14px;
  line-height:1.45;
}

.jc-contact-status.is-success{
  color:#16724a;
}

.jc-contact-status.is-error{
  color:#b23a3a;
}

.jc-contact-direct{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:28px;
  padding:20px 24px;
  border-left:3px solid #2472ff;
  border-radius:0 14px 14px 0;
  background:#f1f5fd;
  color:#263753;
  font-size:14px;
}

.jc-contact-direct span{
  font-weight:650;
}

.jc-contact-direct a{
  color:#176cff;
  font-weight:750;
  text-decoration:none;
}

.jc-contact-direct a:hover{
  text-decoration:underline;
}

.jc-contact-honeypot{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

@media (max-width:640px){
  .jc-contact-dialog{
    width:min(100% - 20px,760px);
    max-height:calc(100vh - 20px);
  }

  .jc-contact-grid{
    grid-template-columns:1fr;
  }

  .jc-contact-actions{
    align-items:flex-start;
    flex-direction:column;
  }

  .jc-contact-submit{
    width:100%;
  }

  .jc-contact-direct{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (min-width:1900px){
  :root{
    --jc-max:1680px;
  }

  .jc-hero{
    min-height:clamp(560px,32vw,650px);

  }

  .jc-hero-inner{
    grid-template-columns:minmax(0,560px) minmax(0,1fr);
    min-height:clamp(455px,26vw,535px);
  }
}

@media (max-width:1180px){
  .jc-container{
    width:min(var(--jc-max),calc(100% - 40px));
  }

  .jc-hero{

  }

  .jc-hero-inner{
    grid-template-columns:minmax(0,500px) minmax(0,1fr);
  }

  .jc-hero h1{
    font-size:clamp(3.05rem,5.6vw,4.55rem);
  }

  .jc-traits{
    grid-template-columns:1fr;
    max-width:400px;
  }
}

@media (max-width:1050px){
  .jc-hero{
    min-height:auto;
  }

  .jc-hero-inner{
    grid-template-columns:1fr;
  }

  .jc-hero-visual{
    display:none;
  }

  .jc-card-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .jc-project-grid{
    grid-template-columns:1fr;
  }

  .jc-belief-inner{
    grid-template-columns:1fr 1fr;
  }

  .jc-quote{
    grid-column:1 / -1;
    padding:0 0 24px;
    border-right:0;
    border-bottom:1px solid #cfdff2;
  }

  .jc-timeline{
    grid-template-columns:repeat(3,1fr);
    row-gap:34px;
  }

  .jc-timeline::before{
    display:none;
  }

  .jc-contact-inner{
    grid-template-columns:1fr 1fr;
  }

  .jc-contact-title{
    grid-column:1 / -1;
  }

  .jc-contact-item{
    padding-left:0;
    border-left:0;
  }
}

@media (max-width:820px){
  .jc-hero{
    min-height:auto;

  }

  .jc-hero::after{
    background:linear-gradient(
      90deg,
      rgba(1,9,22,.88) 0%,
      rgba(1,9,22,.70) 52%,
      rgba(1,9,22,.20) 100%
    );
  }

  .jc-hero-inner{
    display:block;
    min-height:auto;
    padding:38px 0 60px;
  }

  .jc-hero-copy{
    max-width:520px;
  }

  .jc-hero h1{
    font-size:clamp(2.9rem,11.5vw,4.15rem);
  }

  .jc-hero-visual{
    display:none;
  }
}

@media (max-width:800px){
  .jc-container{
    width:min(100% - 34px,var(--jc-max));
  }

  .jc-nav{
    display:none;
    position:absolute;
    left:17px;
    right:17px;
    top:78px;
    padding:18px;
    background:#061f3c;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
  }

  .jc-nav.is-open{
    display:block;
  }

  .jc-nav ul{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  .jc-menu-toggle{
    display:block;
  }

  .jc-traits{
    grid-template-columns:1fr;
  }

  .jc-card-grid,
  .jc-belief-inner,
  .jc-contact-inner{
    grid-template-columns:1fr;
  }

  .jc-timeline{
    grid-template-columns:repeat(2,1fr);
  }

  .jc-project-card{
    grid-template-columns:90px 1fr;
  }

  .jc-project-mark{
    width:90px;
    height:90px;
  }

  .jc-project-logo{
    width:82px;
    height:82px;
  }

  .jc-contact-item{
    padding-top:16px;
    border-top:1px solid #d4e0ef;
  }
  .jc-nav a{
  width:100%;
  padding:8px 0;
}

.jc-nav a::after{
  left:0;
  bottom:2px;
  width:28px;
  transform:scaleX(0);
  transform-origin:left;
}

.jc-nav a:hover::after,
.jc-nav a:focus-visible::after,
.jc-nav .current-menu-item > a::after,
.jc-nav .current_page_item > a::after,
.jc-nav .current-menu-ancestor > a::after{
  transform:scaleX(1);
}
}

@media (max-width:560px){
  .jc-container{
    width:calc(100% - 28px);
  }

  .jc-hero{
    background-position:58% center;
  }

  .jc-hero h1{
    font-size:clamp(2.75rem,14vw,3.95rem);
  }

  .jc-role{
    gap:.3em;
    font-size:.71rem;
    line-height:1.55;
    letter-spacing:.045em;
  }

  .jc-role-sep{
    margin-inline:.05em;
  }

  .jc-hero-lead{
    font-size:1.02rem;
  }

  .jc-buttons{
    display:grid;
    grid-template-columns:1fr;
  }

  .jc-btn{
    width:100%;
  }

  .jc-card-grid,
  .jc-timeline{
    grid-template-columns:1fr;
  }

  .jc-project-card{
    grid-template-columns:1fr;
    text-align:center;
  }

  .jc-project-mark{
    width:100%;
    height:86px;
  }

  .jc-project-logo{
    width:82px;
    height:82px;
  }

  .jc-brand-text strong{
    font-size:.9rem;
  }

  .jc-monogram{
    font-size:1.9rem;
  }
}

/* ==========================================================
   HOMEPAGE HARDENING
   ========================================================== */

body.home,
body.front-page{
  overflow-x:hidden;
  background:#fff;
}

body.home > *,
body.front-page > *{
  max-width:none;
}

body.home .jc-hero,
body.front-page .jc-hero{
  width:100%;
  margin:0;
}

.admin-bar .jc-site-header{
  top:0;
}

@media (max-width:782px){
  .admin-bar .jc-site-header{
    top:0;
  }
}

/* ==========================================================
   BLUEPRINT SVG SIZE + ALIGNMENT OVERRIDES
   Added July 12, 2026

   These rules intentionally live at the very end of style.css
   so they override earlier legacy icon sizing without requiring
   the existing sections to be deleted or reorganized immediately.

   Covers:
   - What I Do glyphs
   - Project glyphs
   - Approach quote + primitives
   - Journey glyphs
   - Modal glyph sizing
   ========================================================== */

/* ----------------------------------------------------------
   WHAT I DO — BLUEPRINT GLYPHS

   The earlier stylesheet defines .jc-service-icon more than once
   at 42–44px. These SVGs are designed to display substantially
   larger, so this final rule restores the intended visual scale.
   ---------------------------------------------------------- */

.jc-service-card .jc-service-icon{
  position:relative;
  z-index:1;

  width:76px;
  height:76px;
  max-width:none;

  display:block;
  flex:0 0 76px;
  object-fit:contain;

  margin:0 0 18px;

  color:var(--jc-blue);
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}

.jc-service-card:hover .jc-service-icon{
  transform:translateY(-2px) scale(1.035);
}


/* ----------------------------------------------------------
   PROJECT GLYPHS

   Keeps all three project illustrations within the same visual
   footprint while allowing the internal SVG whitespace to breathe.
   ---------------------------------------------------------- */

.jc-project-mark{
  width:120px;
  height:120px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:visible;
}

.jc-project-logo{
  width:118px;
  height:118px;
  max-width:none;

  display:block;
  object-fit:contain;
}


/* ----------------------------------------------------------
   APPROACH — QUOTE GLYPH

   The SVG already contains its complete construction circle, so
   the old CSS border is removed to avoid a doubled outer ring.
   ---------------------------------------------------------- */

.jc-quote-icon{
  display:grid;
  place-items:center;

  width:82px;
  height:82px;

  border:0;
  border-radius:0;

  color:var(--jc-blue);
  font-size:0;
  line-height:1;
}

.jc-quote-icon img{
  width:82px;
  height:82px;
  max-width:none;

  display:block;
  object-fit:contain;
}


/* ----------------------------------------------------------
   APPROACH — PURPOSE / SIMPLICITY / IMPACT

   The previous text-symbol layout reserved only 30px. The new SVG
   primitives require a wider first column and a larger icon box.
   ---------------------------------------------------------- */

.jc-value{
  grid-template-columns:58px minmax(0,1fr);
  gap:15px;
}

.jc-value-icon{
  display:grid;
  place-items:start center;

  width:58px;
  min-width:58px;
  padding-top:0;

  color:var(--jc-blue);
  font-size:0;
  line-height:1;
}

.jc-value-icon img{
  width:58px;
  height:58px;
  max-width:none;

  display:block;
  object-fit:contain;
}


/* ----------------------------------------------------------
   JOURNEY GLYPHS

   Each Journey SVG already includes its own outer construction
   circle and registration marks. The old CSS circle is removed so
   the artwork is not framed twice or visually compressed.
   ---------------------------------------------------------- */

.jc-timeline::before{
  top:47px;
}

.jc-step-icon{
  width:96px;
  height:96px;

  display:grid;
  place-items:center;

  margin:0 auto 16px;

  background:transparent;
  border:0;
  border-radius:0;

  color:var(--jc-blue);
  font-size:0;
  overflow:visible;
}

.jc-step-icon img{
  width:96px;
  height:96px;
  max-width:none;

  display:block;
  object-fit:contain;
}


/* ----------------------------------------------------------
   MODAL GLYPHS

   Keeps the modal version larger and clearer than the former
   32px inline icon while retaining the existing modal tile.
   ---------------------------------------------------------- */

.jc-modal-icon-wrap{
  width:76px;
  height:76px;
}

.jc-modal-icon{
  width:58px;
  height:58px;
  max-width:none;

  display:block;
  object-fit:contain;
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width:1050px){

  .jc-service-card .jc-service-icon{
    width:72px;
    height:72px;
    flex-basis:72px;
  }

  .jc-step-icon,
  .jc-step-icon img{
    width:90px;
    height:90px;
  }
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width:800px){

  .jc-project-mark{
    width:94px;
    height:94px;
  }

  .jc-project-logo{
    width:90px;
    height:90px;
  }

  .jc-value{
    grid-template-columns:52px minmax(0,1fr);
  }

  .jc-value-icon,
  .jc-value-icon img{
    width:52px;
    height:52px;
    min-width:52px;
  }

  .jc-step-icon,
  .jc-step-icon img{
    width:86px;
    height:86px;
  }

  .jc-timeline::before{
    display:none;
  }
}

@media (max-width:560px){

  .jc-service-card .jc-service-icon{
    width:68px;
    height:68px;
    flex-basis:68px;
  }

  .jc-project-mark{
    width:100%;
    height:94px;
  }

  .jc-project-logo{
    width:90px;
    height:90px;
  }

  .jc-quote-icon,
  .jc-quote-icon img{
    width:64px;
    height:64px;
  }

  .jc-step-icon,
  .jc-step-icon img{
    width:88px;
    height:88px;
  }
}


/* ----------------------------------------------------------
   REDUCED MOTION

   Retains accessible motion preferences for the newly converted
   SVG image elements.
   ---------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){

  .jc-service-card .jc-service-icon{
    transition:none !important;
    transform:none !important;
  }
}


/* ==========================================================
   JOURNEY — BLUEPRINT TIMELINE ANIMATION
   Drop-in replacement for the existing Journey animation block.

   Behavior:
   - Timeline draws from left to right
   - Icons remain hidden until the line reaches them
   - Titles and descriptions reveal with each milestone
   - Product Architect finishes with one restrained pulse
   ========================================================== */

.jc-journey{
  padding:60px 0 66px;
}

.jc-timeline{
  --jc-journey-progress:0;

  position:relative;

  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;

  margin-top:34px;
}

.jc-timeline::before{
  content:none;
}

/* ----------------------------------------------------------
   TIMELINE TRACK
   ---------------------------------------------------------- */

.jc-timeline-track{
  position:absolute;

  left:calc(100% / 12);
  right:calc(100% / 12);
  top:48px;

  height:1px;

  z-index:0;
  pointer-events:none;
}

.jc-timeline-line{
  position:absolute;
  inset:0;

  height:1px;

  background:linear-gradient(
    90deg,
    rgba(110,169,255,.75),
    #1477ff 55%,
    rgba(110,169,255,.75)
  );

  transform:scaleX(var(--jc-journey-progress));
  transform-origin:left center;

  box-shadow:0 0 8px rgba(20,119,255,.16);

  will-change:transform;
}

/* Moving drafting point */

.jc-timeline-plotter{
  position:absolute;

  top:50%;
  left:calc(var(--jc-journey-progress) * 100%);

  width:7px;
  height:7px;

  border:1px solid #1477ff;
  border-radius:50%;

  background:#fff;

  box-shadow:
    0 0 0 3px rgba(20,119,255,.10),
    0 0 14px rgba(20,119,255,.48);

  opacity:0;

  transform:translate(-50%,-50%) scale(.72);

  transition:opacity 180ms ease;

  will-change:left,transform;
}

.jc-timeline.is-running .jc-timeline-plotter{
  opacity:1;
}

.jc-timeline.is-complete .jc-timeline-plotter{
  opacity:0;
}

/* ----------------------------------------------------------
   MILESTONES
   ---------------------------------------------------------- */

.jc-step{
  position:relative;

  z-index:1;

  min-width:0;

  text-align:center;
}

.jc-step-icon{
  position:relative;

  width:96px;
  height:96px;

  display:grid;
  place-items:center;

  margin:0 auto 16px;

  background:transparent;
  border:0;

  overflow:visible;
}

/* ----------------------------------------------------------
   ICONS
   Hidden until the line reaches the milestone
   ---------------------------------------------------------- */

.jc-journey-object{
  display:block;

  width:96px;
  height:96px;

  border:0;

  pointer-events:none;

  opacity:0;
  visibility:hidden;

  transform:scale(.88);

  filter:saturate(.72);

  transition:
    opacity .42s ease,
    transform .52s cubic-bezier(.2,.8,.2,1),
    filter .28s ease,
    visibility 0s linear .42s;
}

/* Reveal icon when activated */

.jc-step.is-active .jc-journey-object{
  opacity:1;
  visibility:visible;

  transform:scale(1.045);

  filter:none;

  transition-delay:0s;
}

/* Settle icon after activation */

.jc-step.is-complete .jc-journey-object{
  opacity:1;
  visibility:visible;

  transform:scale(1);

  filter:none;

  transition-delay:0s;
}

/* ----------------------------------------------------------
   ARRIVAL PULSE
   ---------------------------------------------------------- */

.jc-step-arrival{
  position:absolute;

  left:50%;
  top:50%;

  width:8px;
  height:8px;

  border:1px solid #1477ff;
  border-radius:50%;

  background:#fff;

  opacity:0;

  transform:translate(-50%,-50%) scale(.3);

  pointer-events:none;
}

.jc-step.is-active .jc-step-arrival{
  animation:
    jcJourneyArrival
    .58s
    cubic-bezier(.2,.8,.2,1)
    both;
}

/* ----------------------------------------------------------
   TITLES + DESCRIPTIONS
   Hidden until milestone activation
   ---------------------------------------------------------- */

.jc-step h4{
  margin:0 0 7px;

  color:#176ee2;

  text-transform:uppercase;

  font-size:.78rem;

  opacity:0;

  transform:translateY(7px);

  transition:
    opacity .34s ease,
    transform .42s cubic-bezier(.2,.8,.2,1),
    color .25s ease;
}

.jc-step p{
  margin:0;

  color:#354157;

  font-size:.76rem;

  opacity:0;

  transform:translateY(7px);

  transition:
    opacity .34s ease .06s,
    transform .42s cubic-bezier(.2,.8,.2,1) .06s;
}

/* Reveal text when activated */

.jc-step.is-active h4,
.jc-step.is-active p,
.jc-step.is-complete h4,
.jc-step.is-complete p{
  opacity:1;

  transform:translateY(0);
}

.jc-step.is-active h4{
  color:#176ee2;
}

/* ----------------------------------------------------------
   FINAL MILESTONE
   "This is where I am now."
   ---------------------------------------------------------- */

.jc-step.is-current.is-complete .jc-step-icon{
  animation:
    jcCurrentPosition
    1.35s
    cubic-bezier(.2,.8,.2,1)
    1;
}

.jc-step.is-current.is-complete .jc-journey-object{
  filter:
    drop-shadow(0 0 5px rgba(20,119,255,.18))
    drop-shadow(0 0 14px rgba(20,119,255,.10));
}

.jc-step.is-current.is-complete h4{
  color:#0a57cc;
}

/* ----------------------------------------------------------
   KEYFRAMES
   ---------------------------------------------------------- */

@keyframes jcJourneyArrival{

  0%{
    opacity:0;

    transform:
      translate(-50%,-50%)
      scale(.25);

    box-shadow:
      0 0 0 0 rgba(20,119,255,0);
  }

  38%{
    opacity:1;

    transform:
      translate(-50%,-50%)
      scale(1);

    box-shadow:
      0 0 0 5px rgba(20,119,255,.12),
      0 0 18px rgba(20,119,255,.42);
  }

  100%{
    opacity:0;

    transform:
      translate(-50%,-50%)
      scale(1.75);

    box-shadow:
      0 0 0 12px rgba(20,119,255,0);
  }
}

@keyframes jcCurrentPosition{

  0%,
  100%{
    transform:scale(1);

    filter:none;
  }

  30%{
    transform:scale(1.045);

    filter:
      drop-shadow(
        0 0 4px rgba(20,119,255,.20)
      );
  }

  58%{
    transform:scale(1);

    filter:
      drop-shadow(
        0 0 11px rgba(20,119,255,.30)
      );
  }

  78%{
    transform:scale(1.025);

    filter:
      drop-shadow(
        0 0 5px rgba(20,119,255,.18)
      );
  }
}

/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width:1050px){

  .jc-step-icon,
  .jc-journey-object{
    width:90px;
    height:90px;
  }

  .jc-timeline-track{
    top:45px;
  }
}

/* ----------------------------------------------------------
   SMALL TABLET
   ---------------------------------------------------------- */

@media (max-width:800px){

  .jc-timeline{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:28px 14px;
  }

  .jc-timeline-track{
    display:none;
  }

  .jc-step-icon,
  .jc-journey-object{
    width:86px;
    height:86px;
  }
}

/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width:560px){

  .jc-timeline{
    grid-template-columns:1fr;

    gap:30px;
  }

  .jc-step{
    display:grid;

    grid-template-columns:
      92px minmax(0,1fr);

    grid-template-rows:
      auto auto;

    column-gap:16px;

    align-items:center;

    text-align:left;
  }

  .jc-step-icon{
    grid-row:1 / span 2;

    width:88px;
    height:88px;

    margin:0;
  }

  .jc-journey-object{
    width:88px;
    height:88px;
  }

  .jc-step h4{
    align-self:end;
  }

  .jc-step p{
    align-self:start;
  }
}

/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){

  .jc-timeline{
    --jc-journey-progress:1 !important;
  }

  .jc-timeline-plotter,
  .jc-step-arrival{
    display:none !important;
  }

  .jc-journey-object,
  .jc-step,
  .jc-step-icon,
  .jc-step h4,
  .jc-step p{
    animation:none !important;
    transition:none !important;

    transform:none !important;

    opacity:1 !important;
    visibility:visible !important;

    filter:none !important;
  }
}

/* ==========================================================
   PROJECT CARDS — BLUEPRINT HOVER SYSTEM
   ========================================================== */

.jc-project-card{
  position:relative;
  overflow:hidden;

  transition:
    transform .32s cubic-bezier(.2,.8,.2,1),
    border-color .28s ease,
    box-shadow .32s ease,
    background-color .28s ease;
}

/* Soft blueprint field behind each project glyph */
.jc-project-card::before{
  content:"";

  position:absolute;
  left:16px;
  top:50%;

  width:150px;
  height:150px;

  border-radius:50%;

  opacity:0;

  transform:
    translateY(-50%)
    scale(.82);

  transition:
    opacity .32s ease,
    transform .42s cubic-bezier(.2,.8,.2,1);

  pointer-events:none;
}

/* Project-specific glow color */

.jc-project-card.green::before{
  background:
    radial-gradient(
      circle,
      rgba(71,164,97,.13) 0%,
      rgba(71,164,97,.06) 42%,
      transparent 72%
    );
}

.jc-project-card.gold::before{
  background:
    radial-gradient(
      circle,
      rgba(213,156,22,.15) 0%,
      rgba(213,156,22,.07) 42%,
      transparent 72%
    );
}

.jc-project-card.blue::before{
  background:
    radial-gradient(
      circle,
      rgba(36,121,230,.14) 0%,
      rgba(36,121,230,.06) 42%,
      transparent 72%
    );
}

/* Lift and strengthen */

.jc-project-card:hover{
  transform:translateY(-6px);

  box-shadow:
    0 20px 42px rgba(15,39,77,.10),
    0 5px 14px rgba(15,39,77,.05);
}

.jc-project-card.green:hover{
  border-color:rgba(71,164,97,.58);
}

.jc-project-card.gold:hover{
  border-color:rgba(213,156,22,.62);
}

.jc-project-card.blue:hover{
  border-color:rgba(36,121,230,.58);
}

.jc-project-card:hover::before{
  opacity:1;

  transform:
    translateY(-50%)
    scale(1);
}

/* Keep content above the glow */

.jc-project-card > *{
  position:relative;
  z-index:1;
}

/* Glyph activation */

.jc-project-logo{
  transition:
    transform .42s cubic-bezier(.2,.8,.2,1),
    filter .32s ease;
}

.jc-project-card:hover .jc-project-logo{
  transform:
    translateY(-3px)
    scale(1.045);
}

/* Per-project glyph glow */

.jc-project-card.green:hover .jc-project-logo{
  filter:
    drop-shadow(0 0 7px rgba(71,164,97,.16));
}

.jc-project-card.gold:hover .jc-project-logo{
  filter:
    drop-shadow(0 0 7px rgba(213,156,22,.18));
}

.jc-project-card.blue:hover .jc-project-logo{
  filter:
    drop-shadow(0 0 7px rgba(36,121,230,.17));
}

/* Title response */

.jc-project-card h3{
  transition:
    color .25s ease,
    transform .3s cubic-bezier(.2,.8,.2,1);
}

.jc-project-card:hover h3{
  transform:translateX(2px);
}

/* Link activation */

.jc-project-link{
  display:inline-flex;
  align-items:center;
  gap:7px;

  transition:
    color .25s ease,
    transform .3s cubic-bezier(.2,.8,.2,1);
}

.jc-project-card:hover .jc-project-link{
  transform:translateX(4px);
}

/* Keyboard accessibility */

.jc-project-card:focus-within{
  transform:translateY(-6px);

  box-shadow:
    0 20px 42px rgba(15,39,77,.10),
    0 5px 14px rgba(15,39,77,.05);
}

.jc-project-link:focus-visible{
  outline:3px solid rgba(20,119,255,.22);
  outline-offset:5px;
  border-radius:4px;
}

/* Mobile: no floating cards */

@media (max-width:800px){

  .jc-project-card:hover,
  .jc-project-card:focus-within{
    transform:none;
  }

  .jc-project-card::before{
    left:50%;
    top:48px;

    transform:
      translate(-50%,0)
      scale(.82);
  }

  .jc-project-card:hover::before{
    transform:
      translate(-50%,0)
      scale(1);
  }
}

/* Reduced motion */

@media (prefers-reduced-motion:reduce){

  .jc-project-card,
  .jc-project-card::before,
  .jc-project-logo,
  .jc-project-card h3,
  .jc-project-link{
    transition:none !important;
    transform:none !important;
  }
}

.jc-journey-intro{
    width:min(760px,100%);
    margin:18px auto 44px;

    color:#59687d;

    font-size:1.08rem;
    line-height:1.8;

    font-style:italic;
    text-align:center;
}


.jc-contact-icon{
    width:64px;
    height:64px;

    transform:translateY(0);

    flex-shrink:0;

    transition:
        transform .15s cubic-bezier(.2,.8,.2,1),
        filter .15s ease;
}

.jc-contact-item:hover .jc-contact-icon{
    transform:scale(1.08);

    filter:
        drop-shadow(0 0 8px rgba(20,119,255,.18));
}
.jc-contact-title .jc-eyebrow{
    color:#1477ff;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.jc-project-card{
    display:flex;          /* or whatever you're currently using */
    text-decoration:none;
    color:inherit;
    cursor:pointer;
}

.jc-project-card:hover,
.jc-project-card:focus-visible{
    text-decoration:none;
}

.jc-project-card:focus-visible{
    outline:2px solid rgba(20,119,255,.25);
    outline-offset:4px;
}
/* ==========================================================
   FIXED NAVIGATION — TRANSPARENT HERO + SCROLL GLASS
   Updated July 13, 2026

   At the top, the header is completely transparent so the live
   hero network and node glows remain visible. After scrolling,
   a soft dark gradient and backdrop blur fade in behind the nav.
   ========================================================== */

:root{
  --jc-fixed-header-height:80px;
}

.jc-site-header{
  position:fixed !important;
  top:0;
  left:0;
  right:0;
  width:100%;
  height:var(--jc-fixed-header-height);
  padding:0 !important;
  z-index:10000;
  isolation:isolate;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* No copied image: the real animated hero remains visible through
   the header. This layer exists only for the scrolled glass state. */
.jc-site-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(
    to bottom,
    rgba(2,10,25,.78) 0%,
    rgba(3,16,35,.62) 58%,
    rgba(3,18,39,.42) 100%
  );
  -webkit-backdrop-filter:blur(0);
  backdrop-filter:blur(0);
  transition:
    opacity 280ms ease,
    -webkit-backdrop-filter 280ms ease,
    backdrop-filter 280ms ease;
}

.jc-site-header::after{
  content:none !important;
}

.jc-site-header.is-scrolled::before{
  opacity:1;
  -webkit-backdrop-filter:blur(14px) saturate(118%);
  backdrop-filter:blur(14px) saturate(118%);
}

.jc-site-header .jc-header-inner{
  height:100%;
  align-items:center;
}

/* Keep the bottom of the compact header approximately 10px below
   the brand/domain block while preserving the current alignment. */
.jc-site-header .jc-brand,
.jc-site-header .jc-nav,
.jc-site-header .jc-menu-toggle{
  position:relative;
  z-index:1;
}

body:not(.home):not(.front-page){
  padding-top:var(--jc-fixed-header-height);
}

html{
  scroll-padding-top:calc(var(--jc-fixed-header-height) + 18px);
}

body.admin-bar .jc-site-header{
  top:32px;
}

@media (max-width:782px){
  body.admin-bar .jc-site-header{
    top:46px;
  }
}

@media (max-width:800px){
  :root{
    --jc-fixed-header-height:72px;
  }
}

@media (prefers-reduced-motion:reduce){
  .jc-site-header::before{
    transition:none;
  }
}


/* ==========================================================
   CLEAN NAVIGATION FOUNDATION — v1.4.5
   Smaller fixed header and compact blueprint markers
   ========================================================== */

:root{
  --jc-fixed-header-height:68px;
}

.jc-site-header .jc-header-inner{
  height:100%;
}

.jc-site-header .jc-monogram{
  font-size:1.9rem;
}

.jc-site-header .jc-brand-text strong{
  font-size:.86rem;
}

.jc-site-header .jc-brand-text small{
  font-size:.66rem;
}

.jc-nav a{
  padding:5px 0 9px;
}

/* Compact blueprint marker instead of a full-width underline. */
.jc-nav a::after{
  left:50%;
  bottom:1px;
  width:24px;
  height:1px;
  opacity:0;
  transform:translateX(-50%) scaleX(.35);
}

/* JavaScript owns the active homepage section. */
.jc-nav a.is-active{
  color:#62b5ff;
  text-shadow:0 0 14px rgba(72,165,255,.28);
}

.jc-nav a.is-active::after{
  opacity:.95;
  transform:translateX(-50%) scaleX(1);
}

/* WordPress page-current classes must not lock Home in place. */
.jc-nav .current-menu-item > a:not(.is-active),
.jc-nav .current_page_item > a:not(.is-active),
.jc-nav .current-menu-ancestor > a:not(.is-active){
  color:rgba(247,251,255,.88);
  text-shadow:none;
}

.jc-nav .current-menu-item > a:not(.is-active)::after,
.jc-nav .current_page_item > a:not(.is-active)::after,
.jc-nav .current-menu-ancestor > a:not(.is-active)::after{
  opacity:0;
  transform:translateX(-50%) scaleX(.35);
}

@media (max-width:800px){
  :root{
    --jc-fixed-header-height:64px;
  }
}


/* ==========================================================
   BOTTOM SCROLL RUNWAY — v1.4.6

   Extends the existing dark footer visually so the final homepage
   sections can reach the fixed-header anchor position. This does
   not alter section IDs, navigation observer tuning, modal state,
   or Journey animation behavior.
   ========================================================== */

body.home::after,
body.front-page::after{
  content:"";
  display:block;
  width:100%;
  height:clamp(190px,24vh,280px);
  background:linear-gradient(90deg,#03162c,#061f3c);
}

@media (max-width:800px){
  body.home::after,
  body.front-page::after{
    height:clamp(150px,20vh,220px);
  }
}


/* ==========================================================
   BLUEPRINT NAVIGATION — NODE + LINE INDICATORS
   v1.4.7

   Purely visual. Active state is supplied by .is-active.
   ========================================================== */

@media (min-width:801px){
  .jc-nav a{
    display:inline-flex;
    align-items:center;
    gap:14px;
    padding:5px 0 8px;
    overflow:visible;
  }

  .jc-nav a::before,
  .jc-nav a::after{
    content:"";
    position:relative;
    left:auto;
    bottom:auto;
    flex:0 0 18px;
    width:18px;
    height:1px;
    border-radius:999px;
    opacity:.2;
    transform:none;
    background:
      radial-gradient(
        circle at left center,
        transparent 0 1px,
        rgba(120,190,255,.62) 1px 2px,
        transparent 2px
      ),
      linear-gradient(
        90deg,
        rgba(120,190,255,.62) 0 2px,
        rgba(120,190,255,.30) 2px 100%
      );
    box-shadow:none;
    transition:
      opacity 220ms ease,
      filter 260ms ease,
      transform 260ms cubic-bezier(.22,.61,.36,1);
  }

  .jc-nav a::after{
    transform:scaleX(-1);
  }

  .jc-nav a:hover::before,
  .jc-nav a:hover::after,
  .jc-nav a:focus-visible::before,
  .jc-nav a:focus-visible::after{
    opacity:.72;
    filter:
      drop-shadow(0 0 3px rgba(98,181,255,.72))
      drop-shadow(0 0 8px rgba(20,119,255,.34));
  }

  .jc-nav a.is-active{
    color:#62b5ff;
    text-shadow:0 0 12px rgba(72,165,255,.38);
  }

  .jc-nav a.is-active::before,
  .jc-nav a.is-active::after{
    opacity:1;
    filter:
      drop-shadow(0 0 3px rgba(255,255,255,.72))
      drop-shadow(0 0 9px rgba(20,119,255,.58));
    animation:jcNavDraftIn 300ms cubic-bezier(.22,.61,.36,1) both;
  }

  .jc-nav .current-menu-item > a:not(.is-active),
  .jc-nav .current_page_item > a:not(.is-active),
  .jc-nav .current-menu-ancestor > a:not(.is-active){
    color:rgba(247,251,255,.88);
    text-shadow:none;
  }

  .jc-nav .current-menu-item > a:not(.is-active)::before,
  .jc-nav .current-menu-item > a:not(.is-active)::after,
  .jc-nav .current_page_item > a:not(.is-active)::before,
  .jc-nav .current_page_item > a:not(.is-active)::after,
  .jc-nav .current-menu-ancestor > a:not(.is-active)::before,
  .jc-nav .current-menu-ancestor > a:not(.is-active)::after{
    opacity:.2;
    filter:none;
  }
}

@keyframes jcNavDraftIn{
  0%{ opacity:.2; filter:none; }
  55%{ opacity:1; }
  100%{
    opacity:1;
    filter:
      drop-shadow(0 0 3px rgba(255,255,255,.72))
      drop-shadow(0 0 9px rgba(20,119,255,.58));
  }
}

@media (prefers-reduced-motion:reduce){
  .jc-nav a::before,
  .jc-nav a::after{
    animation:none !important;
    transition:none !important;
  }
}
/* ==========================================================
   BLUEPRINT NAVIGATION ACTIVATION
   ========================================================== */

@media (min-width:801px){

  .jc-nav a{
    position:relative;
    padding:5px 0 8px 28px;
    overflow:visible;
  }

  /* Blueprint node */
  .jc-nav a::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;

    width:6px;
    height:6px;

    border:1px solid #62b5ff;
    border-radius:50%;
    background:rgba(3,18,40,.9);

    opacity:0;
    transform:
      translateY(-50%)
      scale(.65);

    transition:
      opacity 180ms ease,
      transform 240ms cubic-bezier(.2,.8,.2,1),
      background-color 180ms ease,
      box-shadow 240ms ease;
  }

  /* Drafting line — replaces the old underline */
  .jc-nav a::after{
    content:"";
    position:absolute;

    left:8px;
    top:50%;
    bottom:auto;

    width:15px;
    height:1px;

    border-radius:0;
    background:linear-gradient(
      90deg,
      #62b5ff,
      rgba(98,181,255,.35)
    );

    opacity:0;

    transform:
      translateY(-50%)
      scaleX(0);

    transform-origin:left center;

    transition:
      opacity 180ms ease,
      transform 260ms cubic-bezier(.2,.8,.2,1);
  }

  /* Hover / keyboard activation */
  .jc-nav a:hover::before,
  .jc-nav a:focus-visible::before{
    opacity:1;

    transform:
      translateY(-50%)
      scale(1);

    background:#fff;

    box-shadow:
      0 0 0 3px rgba(98,181,255,.12),
      0 0 10px rgba(98,181,255,.65);
  }

  .jc-nav a:hover::after,
  .jc-nav a:focus-visible::after{
    opacity:1;

    transform:
      translateY(-50%)
      scaleX(1);
  }

  /* Active section */
  .jc-nav a.is-active,
  .jc-nav .current-menu-item > a,
  .jc-nav .current_page_item > a{
    color:#62b5ff;
    text-shadow:0 0 12px rgba(72,165,255,.28);
  }

  .jc-nav a.is-active::before,
  .jc-nav .current-menu-item > a::before,
  .jc-nav .current_page_item > a::before{
    opacity:1;

    transform:
      translateY(-50%)
      scale(1);

    background:#fff;

    box-shadow:
      0 0 0 3px rgba(98,181,255,.12),
      0 0 10px rgba(98,181,255,.55);
  }

  .jc-nav a.is-active::after,
  .jc-nav .current-menu-item > a::after,
  .jc-nav .current_page_item > a::after{
    opacity:1;

    transform:
      translateY(-50%)
      scaleX(1);
  }
}

/* ==========================================================
   APPROACH MODAL — OPENING HIERARCHY
   ========================================================== */

.jc-approach-heading{
  margin-bottom:34px;
}

.jc-approach-heading .jc-modal-icon-wrap{
  margin-bottom:18px;
}

/* Eyebrow + full-width blueprint rule */

.jc-approach-eyebrow{
  display:flex;
  align-items:center;
  gap:8px;

  width:99%;
  margin:0 0 24px;
  padding:0;

  color:var(--jc-accent,#2077ff);
  font-size:13px;
  font-weight:700;
  letter-spacing:.10em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
}

.jc-approach-eyebrow::after{
  content:"";
  flex:1;
  min-width:0;
  height:1px;
  background:rgba(20,119,255,.28);
}

.jc-approach-eyebrow::before{
  content:"";
  order:2;
  flex:0 0 5px;

  width:5px;
  height:5px;
  margin-left:-17px;

  border:1px solid rgba(20,119,255,.75);
  border-radius:50%;
  background:#fff;
}

/* Headline */

.jc-approach-heading h2{
  max-width:980px;
  margin:0 0 20px;
}

/* Intro statement */

.jc-approach-intro{
  display:grid;
  gap:8px;

  max-width:980px;
  margin:0;

  color:#4e5d74;

  font-size:16px;
  font-style:italic;
  font-weight:450;
  line-height:1.6;
}

.jc-approach-intro span{
  display:block;
}

@media (max-width:640px){

  .jc-approach-heading{
    margin-bottom:28px;
  }

  .jc-approach-eyebrow{
    gap:10px;
    margin-bottom:20px;
  }

  .jc-approach-eyebrow::before{
    margin-left:-13px;
  }

  .jc-approach-intro{
    font-size:15px;
    line-height:1.65;
  }
}

/* ==========================================================
   HERO FINAL POSITIONING
   ========================================================== */

@media (min-width:821px){



  /* Move the hero copy downward */
  .jc-hero-copy{
    transform:translateY(30px);
  }

  /* Add more separation before the buttons */
  .jc-buttons{
    margin-top:40px;
  }
}
/* ==========================================================
   BLUEPRINT MODAL EYEBROW
   ========================================================== */

.jc-modal-eyebrow-line{
  display:flex;
  align-items:center;
  gap:8px;

  width:100%;
  margin:0 0 24px;
  padding:0;

  color:var(--jc-accent,#2077ff);

  font-size:13px;
  font-weight:700;
  letter-spacing:.10em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
}

.jc-modal-eyebrow-line::after{
  content:"";

  flex:0 1 380px;
  width:380px;
  max-width:calc(100% - 210px);
  height:1px;

  background:rgba(20,119,255,.28);
}

.jc-modal-eyebrow-line::before{
  content:"";

  order:2;
  flex:0 0 5px;

  width:5px;
  height:5px;
  margin-left:-17px;

  border:1px solid rgba(20,119,255,.75);
  border-radius:50%;
  background:#fff;
}

/* Contact modal title only */
#jc-modal-contact #jc-modal-title-contact{
  max-width:none;
  margin:0 56px 14px 0;
  font-size:30px !important;
  line-height:1.05;
}

