:root{--border:rgba(17,17,17,.14);--green-soft:rgba(11,79,49,.12)}
button,input,textarea{font:inherit}

.agent-panel{min-width:0}
.agent-intro{
  margin-bottom:6px
}

.eyebrow{
  margin:0;
  font-size:10px;
  letter-spacing:.24em;
  color:var(--green);
  font-weight:600
}

.subhead{
  margin:6px 0 0;
  max-width:420px;
  font-size:14px;
  line-height:1.5;
  color:var(--muted)
}

.visual-wrap{
  min-width:0;
  margin-top:2px
}

#geminiSvg{
  display:block;
  width:100%;
  height:auto
}







.constellation-stars circle{
  
  
  
  transform-box:fill-box;
  transform-origin:center
;}



















.helper-text{
  margin:0 0 12px;
  max-width:560px;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
  transition:opacity .35s ease,transform .35s ease,max-height .35s ease,margin .35s ease
}

.helper-text.is-hidden{
  opacity:0;
  transform:translateY(-4px);
  max-height:0;
  overflow:hidden;
  margin:0
}

.ask-form{
  display:flex;
  gap:8px
}

.ask-form input{
  min-width:0;
  flex:1;
  min-height:50px;
  border:1px solid var(--border);
  border-radius:999px;
  background:transparent;
  padding:0 18px;
  color:var(--ink);
  font-size:16px;
  outline:none
}

.ask-form input:focus{
  border-color:var(--green);
  box-shadow:0 0 0 3px var(--green-soft)
}

.ask-form button{
  width:50px;
  height:50px;
  border:0;
  border-radius:999px;
  background:var(--ink);
  color:var(--bg);
  cursor:pointer;
  font-size:20px;
  transition:background .2s ease
}

.ask-form button:hover{
  background:var(--green)
}

.ask-form button:disabled,
.ask-form input:disabled{
  opacity:.55;
  cursor:not-allowed
}

.response-area{
  min-height:86px;
  padding:18px 4px 0
}

.thinking-mode{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--green);
  min-height:14px
}

.response-area p{
  margin:8px 0 0;
  max-width:650px;
  font-size:16px;
  line-height:1.65
}

.action-area{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px
}

.action-btn{
  min-height:42px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:0 15px;
  background:transparent;
  color:var(--ink);
  cursor:pointer
}

.action-btn.primary{
  background:var(--ink);
  color:var(--bg);
  border-color:var(--ink)
}

.action-btn:hover{
  border-color:var(--green);
  color:var(--green)
}

.action-btn.primary:hover{
  background:var(--green);
  color:#fff
}

.inline-form{
  width:100%;
  display:grid;
  gap:8px;
  margin-top:4px
}

.inline-form input,
.inline-form textarea{
  width:100%;
  border:1px solid var(--border);
  background:transparent;
  border-radius:15px;
  padding:12px 14px;
  color:var(--ink);
  font-size:16px;
  outline:none
}

.inline-form input:focus,
.inline-form textarea:focus{
  border-color:var(--green)
}

.inline-form textarea{
  min-height:96px;
  resize:vertical
}

.inline-form button{
  justify-self:start;
  min-height:42px;
  border:0;
  border-radius:999px;
  background:var(--ink);
  color:var(--bg);
  padding:0 16px;
  cursor:pointer
}

.micro-note{
  margin:16px 2px 0;
  color:rgba(17,17,17,.28);
  font-size:10px;
  letter-spacing:.08em
}

@media(max-width:560px){
  .shell{
    width:min(100% - 18px,760px);
    padding-top:10px
  }

  .visual-wrap{
    margin-left:-4px;
    margin-right:-4px
  }

  .subhead,
  .helper-text{
    max-width:320px
  }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    transition-duration:.001ms!important
  }
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}


.form-back{
  justify-self:start!important;
  min-height:auto!important;
  padding:0!important;
  margin:0 0 2px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--muted)!important;
  font-size:11px!important;
  letter-spacing:.04em;
  cursor:pointer
}

.form-back:hover{
  color:var(--green)!important
}

.micro-footer{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  margin:16px 2px 0;
  color:rgba(17,17,17,.28);
  font-size:10px;
  letter-spacing:.08em
}

.micro-footer span::after{
  content:"·";
  margin-left:5px
}

.micro-link{
  border:0;
  background:transparent;
  padding:0;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  cursor:pointer
}

.micro-link:hover{
  color:var(--green)
}

.trust-panel{
  margin:10px 2px 0;
  max-width:560px;
  padding-top:10px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:11px;
  line-height:1.6
}

.trust-panel[hidden]{
  display:none
}

.trust-panel p{
  margin:0 0 8px
}

.trust-panel .micro-link{
  color:var(--green);
  font-size:10px
}

.trust-heading{
  margin:0 0 8px;
  color:var(--ink);
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em
}

.agent-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  margin:12px 0
}

.agent-meta div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:12px
}

.agent-meta span{
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.12em
}

.agent-meta strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--ink);
  font-size:10px;
  font-weight:600
}

.architecture-flow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  margin:12px 0;
  color:var(--muted);
  font-size:9px;
  letter-spacing:.03em
}

.architecture-flow span{
  padding:4px 7px;
  border:1px solid var(--border);
  border-radius:999px
}

.architecture-flow b{
  color:rgba(17,17,17,.22);
  font-weight:400
}

@media(max-width:560px){
  .agent-meta{
    grid-template-columns:1fr
  }

  .architecture-flow{
    gap:4px
  }
}

.prompt-section{
  margin:12px 0 0
}

.prompt-intro{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:5px;
  margin:0 0 8px;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.02em
}

.prompt-intro strong{
  color:var(--ink);
  font-weight:600
}

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

.prompt-grid.is-hidden,
.prompt-section:has(.prompt-grid.is-hidden){
  display:none
}

.prompt-card{
  position:relative;
  min-height:92px;
  border:1px solid var(--border);
  border-radius:14px;
  background:transparent;
  padding:11px 12px 12px;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease
}

.prompt-card:hover{
  transform:translateY(-2px);
  border-color:var(--green);
  background:rgba(11,106,70,.035)
}

.prompt-card-top{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
  font-size:8px;
  letter-spacing:.14em;
  text-transform:uppercase
}

.prompt-number{
  color:rgba(17,17,17,.24)
}

.prompt-category{
  color:var(--green)
}

.prompt-card-text{
  display:block;
  max-width:88%;
  margin-top:15px;
  font-size:13px;
  line-height:1.35
}

.prompt-arrow{
  position:absolute;
  right:11px;
  bottom:10px;
  color:rgba(17,17,17,.30);
  font-size:14px;
  transition:
    transform .22s ease,
    color .22s ease
}

.prompt-card:hover .prompt-arrow{
  transform:translate(2px,-2px);
  color:var(--green)
}

.prompt-footnote{
  margin:8px 2px 0;
  color:rgba(17,17,17,.30);
  font-size:9px;
  letter-spacing:.03em
}

@media(max-width:560px){
  .prompt-grid{
    grid-template-columns:1fr 1fr;
    gap:7px
  }

  .prompt-card{
    min-height:88px;
    padding:10px 11px
  }

  .prompt-card-text{
    margin-top:13px;
    font-size:12px
  }
}

@media(max-width:380px){
  .prompt-grid{
    grid-template-columns:1fr
  }

  .prompt-card{
    min-height:78px
  }
}



/* =========================================================
   Digital Navjot integrated into the ORIGINAL homepage.
   The original intro, headline, Selected Work and page geometry
   remain untouched. Only the old radial artwork is replaced.
   ========================================================= */

.digital-navjot-stage{
  position:absolute;
  z-index:3;
  left:57%;
  top:4%;
  width:43%;
  height:88%;
  min-width:520px;
  display:grid;
  grid-template-rows:minmax(300px,1fr) auto;
  align-content:center;
  pointer-events:none;
}

.digital-navjot-visual{
  position:relative;
  min-height:300px;
  width:100%;
  pointer-events:none;
}

.digital-navjot-visual::after{
  content:"";
  position:absolute;
  left:50%;
  top:55%;
  width:92%;
  height:62%;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(
      ellipse at center,
      rgba(38,221,111,.22),
      rgba(38,221,111,.09) 48%,
      rgba(38,221,111,0) 76%
    );
  filter:blur(18px);
  z-index:-1;
  pointer-events:none;
}

#geminiSvg{
  position:absolute;
  left:50%;
  top:50%;
  width:118%;
  max-width:none;
  transform:translate(-50%,-50%);
}

.digital-navjot-stage .agent-panel{
  position:relative;
  width:100%;
  max-width:590px;
  justify-self:end;
  pointer-events:auto;
  background:transparent;
  padding:0 0 14px;
}

.digital-navjot-stage .agent-intro{
  margin-bottom:8px;
}

.digital-navjot-stage .eyebrow{
  font-size:11px;
  letter-spacing:.20em;
}

.digital-navjot-stage .subhead{
  max-width:540px;
  font-size:12px;
  line-height:1.45;
}

.digital-navjot-stage .ask-form{
  gap:8px;
}

.digital-navjot-stage .ask-form input{
  min-height:46px;
  font-size:14px;
  padding:0 16px;
  background:rgba(247,247,243,.68);
  backdrop-filter:blur(10px);
}

.digital-navjot-stage .ask-form button{
  width:46px;
  height:46px;
  flex:0 0 46px;
  font-size:18px;
}

.digital-navjot-stage .prompt-section{
  margin-top:9px;
}

.digital-navjot-stage .prompt-intro{
  display:none;
}

.digital-navjot-stage .prompt-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}

.digital-navjot-stage .prompt-card{
  min-height:58px;
  padding:9px 28px 9px 10px;
  border-radius:11px;
  background:rgba(247,247,243,.42);
  backdrop-filter:blur(8px);
}

.digital-navjot-stage .prompt-card-top{
  font-size:7px;
}

.digital-navjot-stage .prompt-card-text{
  margin-top:6px;
  font-size:10px;
}

.digital-navjot-stage .prompt-arrow{
  right:9px;
  bottom:8px;
}

.digital-navjot-stage .prompt-footnote{
  display:none;
}

.digital-navjot-stage .helper-text{
  display:none;
}

.digital-navjot-stage .response-area{
  min-height:56px;
  padding:10px 2px 0;
}

.digital-navjot-stage .response-area p{
  max-width:560px;
  font-size:13px;
  line-height:1.5;
}

.digital-navjot-stage .thinking-mode{
  font-size:9px;
}

.digital-navjot-stage .action-area{
  margin-top:10px;
}

.digital-navjot-stage .micro-footer{
  margin-top:8px;
  font-size:8px;
  letter-spacing:.04em;
}

.digital-navjot-stage .trust-panel{
  max-width:570px;
  max-height:220px;
  overflow:auto;
  background:rgba(247,247,243,.96);
  backdrop-filter:blur(12px);
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
}

.digital-navjot-stage .agent-meta{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

/* Keep Selected Work exactly in the original lower-right position. */
.selected-work{
  z-index:12;
}

/* Desktop short screens: compress the agent, not the original homepage. */
@media (min-width:901px) and (max-height:850px){
  .digital-navjot-stage{
    top:2%;
    height:90%;
    grid-template-rows:minmax(240px,1fr) auto;
  }

  .digital-navjot-visual{
    min-height:240px;
  }

  #geminiSvg{
    width:108%;
  }

  .digital-navjot-stage .agent-panel{
    max-width:560px;
  }

  .digital-navjot-stage .prompt-card{
    min-height:52px;
  }

  .digital-navjot-stage .response-area{
    min-height:46px;
  }
}

/* Mobile/tablet: preserve the original headline first, then place
   the constellation + agent underneath in normal document flow. */
@media (max-width:900px){
  .digital-navjot-stage{
    position:relative;
    left:auto;
    top:auto;
    width:100%;
    height:auto;
    min-width:0;
    display:grid;
    grid-template-rows:minmax(300px,58vw) auto;
    margin-top:32px;
    pointer-events:auto;
  }

  .digital-navjot-visual{
    min-height:300px;
  }

  #geminiSvg{
    width:min(860px,105vw);
  }

  .digital-navjot-stage .agent-panel{
    width:min(620px,100%);
    max-width:none;
    justify-self:start;
  }

  .selected-work{
    position:static;
    width:min(320px,100%);
    margin-top:30px;
    margin-left:auto;
  }
}

@media (max-width:560px){
  .digital-navjot-stage{
    grid-template-rows:minmax(245px,72vw) auto;
    margin-top:22px;
  }

  .digital-navjot-visual{
    min-height:245px;
  }

  #geminiSvg{
    width:116vw;
  }

  .digital-navjot-stage .prompt-grid{
    grid-template-columns:1fr;
  }

  .digital-navjot-stage .prompt-card{
    min-height:54px;
  }

  .digital-navjot-stage .subhead{
    max-width:300px;
  }
}

/* The old radial system is gone. */
.burst,
.orbit,
.core,
.ray{
  display:none!important;
}

/* =========================================================
   V8 — LIVING CONSTELLATION
   The constellation is a background field, not a UI panel.
   ========================================================= */
@media (min-width:901px){
  .hero{isolation:isolate;}

  /* Let the artwork occupy the same broad spatial role as the original burst. */
  .digital-navjot-stage{
    position:absolute;
    z-index:3;
    left:28%;
    right:-2%;
    top:-7%;
    bottom:-5%;
    width:auto;
    height:auto;
    min-width:0;
    display:block;
    pointer-events:none;
  }

  .digital-navjot-visual{
    position:absolute;
    inset:-3% -4% 3% 0;
    width:auto;
    min-height:0;
    pointer-events:none;
  }

  .digital-navjot-visual::after{
    left:43%;
    top:47%;
    width:78%;
    height:76%;
    opacity:.9;
    filter:blur(26px);
  }

  #geminiSvg{
    position:absolute;
    left:47%;
    top:44%;
    width:112%;
    height:100%;
    max-width:none;
    transform:translate(-50%,-50%) scale(1.18);
    overflow:visible;
  }

  
  
  
  

  /* The agent floats over the field — no container/card visual language. */
  .digital-navjot-stage .agent-panel{
    position:absolute;
    z-index:8;
    left:48%;
    top:57%;
    width:min(520px,47%);
    max-width:none;
    padding:0;
    background:transparent;
    pointer-events:auto;
  }

  .digital-navjot-stage .agent-intro{margin-bottom:12px;}
  .digital-navjot-stage .eyebrow{font-size:10px;letter-spacing:.22em;}
  .digital-navjot-stage .subhead{font-size:13px;line-height:1.45;max-width:500px;}

  .digital-navjot-stage .ask-form{
    position:relative;
    display:flex;
    align-items:center;
    gap:0;
    border-bottom:1px solid rgba(8,8,8,.48);
  }

  .digital-navjot-stage .ask-form input{
    min-height:46px;
    border:0;
    border-radius:0;
    padding:0 52px 0 0;
    background:transparent;
    backdrop-filter:none;
    box-shadow:none;
    font-size:15px;
  }

  .digital-navjot-stage .ask-form input:focus{box-shadow:none;border:0;}

  .digital-navjot-stage .ask-form button{
    position:absolute;
    right:0;
    width:38px;
    height:38px;
    flex:0 0 38px;
    font-size:17px;
  }

  .digital-navjot-stage .prompt-section{margin-top:13px;}
  .digital-navjot-stage .prompt-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:24px;
    row-gap:0;
  }

  .digital-navjot-stage .prompt-card{
    min-height:48px;
    display:grid;
    grid-template-columns:54px 1fr 16px;
    align-items:center;
    gap:8px;
    padding:0;
    border:0;
    border-bottom:1px solid rgba(8,8,8,.13);
    border-radius:0;
    background:transparent;
    overflow:visible;
    transform:none;
  }

  .digital-navjot-stage .prompt-card:hover{
    transform:none;
    border-color:rgba(11,79,49,.55);
    background:transparent;
  }

  .digital-navjot-stage .prompt-card-top{
    display:block;
    font-size:7px;
    letter-spacing:.13em;
  }
  .digital-navjot-stage .prompt-number{display:none;}
  .digital-navjot-stage .prompt-card-text{
    margin:0;
    max-width:none;
    font-size:10px;
    line-height:1.25;
  }
  .digital-navjot-stage .prompt-arrow{
    position:static;
    justify-self:end;
    font-size:12px;
  }

  .digital-navjot-stage .response-area{
    min-height:0;
    max-height:128px;
    overflow:auto;
    padding:12px 0 0;
  }
  .digital-navjot-stage .response-area:has(#answerText:empty):not(:has(.action-btn)):not(:has(.inline-form)){
    padding-top:0;
  }
  .digital-navjot-stage .response-area p{font-size:13px;line-height:1.5;}
  .digital-navjot-stage .micro-footer{margin-top:10px;font-size:7px;}

  /* Preserve original Selected Work as a separate editorial element. */
  .selected-work{z-index:12;}
}

@media (min-width:1400px){
  .digital-navjot-stage{left:25%;right:-1%;top:-9%;bottom:-6%;}
  .digital-navjot-stage .agent-panel{left:51%;top:58%;width:min(540px,44%);}
  #geminiSvg{width:116%;transform:translate(-50%,-50%) scale(1.22);}
}

@media (min-width:901px) and (max-height:780px){
  .digital-navjot-stage{top:-12%;bottom:-8%;}
  .digital-navjot-stage .agent-panel{top:54%;}
  .digital-navjot-stage .prompt-card{min-height:42px;}
  .digital-navjot-stage .response-area{max-height:90px;}
}

/* Mobile becomes one flowing editorial composition, not squeezed desktop UI. */
@media (max-width:900px){
  .digital-navjot-stage{
    position:relative;
    width:100%;
    min-width:0;
    height:auto;
    margin:26px 0 0;
    display:block;
    pointer-events:auto;
  }
  .digital-navjot-visual{
    position:absolute;
    left:-16vw;
    right:-18vw;
    top:-70px;
    height:470px;
    min-height:0;
    pointer-events:none;
  }
  .digital-navjot-visual::after{width:95%;height:75%;left:48%;top:48%;}
  #geminiSvg{
    position:absolute;
    width:126vw;
    max-width:none;
    left:48%;
    top:45%;
    transform:translate(-50%,-50%);
  }
  .digital-navjot-stage .agent-panel{
    position:relative;
    z-index:8;
    width:min(620px,100%);
    max-width:none;
    margin-left:auto;
    padding-top:290px;
    background:transparent;
  }
  .digital-navjot-stage .ask-form{border-bottom:1px solid rgba(8,8,8,.45);gap:0;position:relative;}
  .digital-navjot-stage .ask-form input{border:0;border-radius:0;background:transparent;padding-left:0;box-shadow:none;}
  .digital-navjot-stage .ask-form button{width:42px;height:42px;flex:0 0 42px;}
  .digital-navjot-stage .prompt-grid{grid-template-columns:1fr 1fr;gap:0 18px;}
  .digital-navjot-stage .prompt-card{
    min-height:54px;border:0;border-bottom:1px solid rgba(8,8,8,.13);border-radius:0;background:transparent;padding:8px 20px 8px 0;
  }
  .digital-navjot-stage .prompt-card:hover{transform:none;background:transparent;}
  .digital-navjot-stage .prompt-card-text{margin-top:7px;}
  .digital-navjot-stage .response-area{min-height:0;}
  .selected-work{position:static;width:min(320px,100%);margin:34px 0 0 auto;}
}

@media (max-width:560px){
  .digital-navjot-visual{top:-40px;height:380px;}
  #geminiSvg{width:145vw;}
  .digital-navjot-stage .agent-panel{padding-top:235px;}
  .digital-navjot-stage .prompt-grid{grid-template-columns:1fr;}
  .digital-navjot-stage .prompt-card{min-height:50px;}
}

/* =========================================================
   Precision pass: keep the living-constellation concept,
   but restore the original portfolio's visual balance.
   ========================================================= */

/* Remove the accidental dark hover/gradient artifact entirely. */
.digital-navjot-stage .prompt-card,
.digital-navjot-stage .prompt-card:hover,
.digital-navjot-stage .prompt-card:focus,
.digital-navjot-stage .prompt-card:active{
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Desktop only: reserve a real far-right lane for Selected Work. */
@media (min-width:901px){

  /* Background field stays large and atmospheric. */
  .digital-navjot-stage{
    left:24%!important;
    right:2%!important;
    top:-11%!important;
    bottom:-7%!important;
    overflow:visible!important;
  }

  .digital-navjot-visual{
    inset:-4% -3% 0 -4%!important;
    overflow:visible!important;
  }

  #geminiSvg{
    left:47%!important;
    top:43%!important;
    width:116%!important;
    height:100%!important;
    transform:translate(-50%,-50%) scale(1.18)!important;
    overflow:visible!important;
  }

  /* Nodes should behave like the original artwork: mostly fine points,
     with only a few stronger anchors. */
  .constellation-stars circle{
    transform:scale(.62)!important;
    
  }

  .constellation-stars circle:nth-child(1),
  .constellation-stars circle:nth-child(4),
  .constellation-stars circle:nth-child(7),
  .constellation-stars circle:nth-child(10){
    transform:scale(.88)!important;
    
  }

  

  .orbit-particle{
    
    transform:scale(.72)!important;
    transform-box:fill-box;
    transform-origin:center;
  }

  .orbit-particle.anchor{
    
    transform:scale(.86)!important;
  }

  /* Concentrate the green wash through the headline / constellation seam
     instead of flooding the full right side. */
  .digital-navjot-visual::after{
    left:38%!important;
    top:49%!important;
    width:67%!important;
    height:62%!important;
    opacity:.82!important;
    filter:blur(30px)!important;
    background:
      radial-gradient(
        ellipse at center,
        rgba(38,221,111,.21) 0%,
        rgba(38,221,111,.10) 43%,
        rgba(38,221,111,0) 74%
      )!important;
  }

  /* Agent floats higher and farther left, clear of Selected Work. */
  .digital-navjot-stage .agent-panel{
    left:42%!important;
    top:49%!important;
    width:min(500px,40%)!important;
    max-width:500px!important;
  }

  .digital-navjot-stage .agent-intro{
    margin-bottom:10px!important;
  }

  .digital-navjot-stage .eyebrow{
    font-size:10px!important;
    letter-spacing:.2em!important;
  }

  .digital-navjot-stage .subhead{
    max-width:470px!important;
    font-size:13px!important;
    line-height:1.45!important;
  }

  .digital-navjot-stage .ask-form input{
    min-height:46px!important;
    font-size:15px!important;
  }

  .digital-navjot-stage .prompt-grid{
    column-gap:20px!important;
  }

  .digital-navjot-stage .prompt-card{
    min-height:50px!important;
    grid-template-columns:58px minmax(0,1fr) 14px!important;
    column-gap:8px!important;
  }

  .digital-navjot-stage .prompt-card-top{
    font-size:8px!important;
  }

  .digital-navjot-stage .prompt-card-text{
    font-size:11px!important;
    line-height:1.3!important;
  }

  .digital-navjot-stage .prompt-arrow{
    font-size:11px!important;
  }

  .digital-navjot-stage .response-area{
    max-height:120px!important;
  }

  .digital-navjot-stage .response-area p{
    font-size:13px!important;
  }

  /* Keep the original Selected Work editorial block in its own far-right lane.
     It should never overlap the agent. */
  .selected-work{
    right:0!important;
    bottom:clamp(18px,3vh,34px)!important;
    width:min(210px,15vw)!important;
    z-index:20!important;
  }

  .selected-work-title{
    font-size:9px!important;
    margin-bottom:10px!important;
  }

  .selected-work-list{
    gap:9px!important;
  }

  .selected-work-name{
    font-size:11px!important;
  }

  .selected-work-description{
    font-size:9px!important;
    line-height:1.3!important;
  }

  /* Fade constellation strokes specifically behind the UI / work region,
     without boxing either element. */
  .digital-navjot-stage::after{
    content:"";
    position:absolute;
    z-index:6;
    right:-1%;
    bottom:4%;
    width:46%;
    height:48%;
    pointer-events:none;
    background:
      linear-gradient(
        180deg,
        rgba(247,247,243,0) 0%,
        rgba(247,247,243,.12) 24%,
        rgba(247,247,243,.55) 68%,
        rgba(247,247,243,.83) 100%
      );
    mask-image:linear-gradient(90deg,transparent 0%,black 35%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,black 35%);
  }

  .digital-navjot-stage .agent-panel{
    z-index:9!important;
  }

  .selected-work{
    z-index:21!important;
  }
}

@media (min-width:1400px){
  .digital-navjot-stage .agent-panel{
    left:43%!important;
    top:48%!important;
    width:min(520px,39%)!important;
  }

  .selected-work{
    width:min(220px,14vw)!important;
  }
}

@media (min-width:901px) and (max-height:800px){
  .digital-navjot-stage{
    top:-14%!important;
    bottom:-9%!important;
  }

  .digital-navjot-stage .agent-panel{
    top:46%!important;
  }

  .digital-navjot-stage .prompt-card{
    min-height:45px!important;
  }

  .selected-work{
    bottom:14px!important;
  }
}

/* Mobile: keep constellation substantial, then let the agent and work
   flow naturally with no overlap. */
@media (max-width:900px){
  .digital-navjot-visual::after{
    left:44%!important;
    width:88%!important;
    opacity:.76!important;
  }

  .constellation-stars circle{
    transform:scale(.72)!important;
    transform-box:fill-box;
    transform-origin:center;
  }

  .digital-navjot-stage .agent-panel{
    padding-top:275px!important;
  }

  .digital-navjot-stage .prompt-card-text{
    font-size:12px!important;
    line-height:1.3!important;
  }

  .selected-work{
    position:static!important;
    width:min(300px,100%)!important;
    margin:38px 0 0 auto!important;
  }
}

@media (max-width:560px){
  .digital-navjot-stage .agent-panel{
    padding-top:225px!important;
  }

  .selected-work{
    width:100%!important;
    margin-top:30px!important;
  }
}



/* =========================================================
   V3 — scale + confidence pass
   Preserve left composition. Make constellation the dominant
   right-side background field; make the agent genuinely legible.
   ========================================================= */

@media (min-width:901px){
  html, body{
    height:100%;
    min-height:100%;
    overflow:hidden!important;
  }

  .page,
  .home,
  main{
    min-height:100vh;
  }

  /* Do not solve the right side by shrinking it. */
  .digital-navjot-stage{
    position:absolute!important;
    left:38%!important;
    right:-2%!important;
    top:-8%!important;
    bottom:-8%!important;
    width:auto!important;
    height:auto!important;
    overflow:visible!important;
    pointer-events:none;
  }

  .digital-navjot-visual{
    position:absolute!important;
    inset:-8% -8% -5% -10%!important;
    overflow:visible!important;
    pointer-events:none;
  }

  /* Large background constellation — comparable in authority to
     the original radial artwork. */
  #geminiSvg{
    position:absolute!important;
    left:50%!important;
    top:43%!important;
    width:130%!important;
    height:118%!important;
    max-width:none!important;
    transform:translate(-50%,-50%) scale(1.32)!important;
    transform-origin:center!important;
    overflow:visible!important;
  }

  

  .constellation-stars circle{
    transform:scale(.78)!important;
    transform-box:fill-box;
    transform-origin:center;
    
  }

  .constellation-stars circle:nth-child(1),
  .constellation-stars circle:nth-child(4),
  .constellation-stars circle:nth-child(7),
  .constellation-stars circle:nth-child(10){
    transform:scale(1.12)!important;
    
  }

  .orbit-particle{
    
    transform:scale(.82)!important;
    transform-box:fill-box;
    transform-origin:center;
  }

  .orbit-particle.anchor{
    
    transform:scale(1)!important;
  }

  /* Atmospheric glow, not a rectangular fog bank. */
  .digital-navjot-visual::after{
    content:""!important;
    position:absolute!important;
    left:22%!important;
    top:29%!important;
    width:68%!important;
    height:62%!important;
    opacity:1!important;
    filter:blur(34px)!important;
    border-radius:50%!important;
    background:
      radial-gradient(
        ellipse at 42% 48%,
        rgba(48,224,116,.22) 0%,
        rgba(48,224,116,.12) 30%,
        rgba(48,224,116,.045) 52%,
        rgba(48,224,116,0) 74%
      )!important;
    mask-image:radial-gradient(ellipse at center,#000 0 48%,transparent 76%)!important;
    -webkit-mask-image:radial-gradient(ellipse at center,#000 0 48%,transparent 76%)!important;
  }

  /* Remove the V2 lower-right fade overlay. */
  .digital-navjot-stage::after{
    display:none!important;
  }

  /* Agent lives INSIDE the visual field and is large enough to read. */
  .digital-navjot-stage .agent-panel{
    position:absolute!important;
    left:39%!important;
    top:52%!important;
    width:min(610px,47vw)!important;
    max-width:610px!important;
    z-index:12!important;
    pointer-events:auto!important;
    transform:none!important;
  }

  .digital-navjot-stage .agent-intro{
    margin-bottom:14px!important;
  }

  .digital-navjot-stage .eyebrow{
    font-size:11px!important;
    line-height:1.2!important;
    letter-spacing:.2em!important;
  }

  .digital-navjot-stage .subhead{
    max-width:580px!important;
    font-size:14px!important;
    line-height:1.5!important;
    margin-top:7px!important;
  }

  .digital-navjot-stage .ask-form{
    margin-top:12px!important;
  }

  .digital-navjot-stage .ask-form input{
    min-height:52px!important;
    height:52px!important;
    font-size:16px!important;
    padding-right:62px!important;
  }

  .digital-navjot-stage .ask-form button{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    font-size:19px!important;
  }

  .digital-navjot-stage .prompt-grid{
    margin-top:8px!important;
    column-gap:24px!important;
    row-gap:0!important;
  }

  .digital-navjot-stage .prompt-card{
    min-height:55px!important;
    grid-template-columns:62px minmax(0,1fr) 16px!important;
    column-gap:10px!important;
    border-bottom:1px solid rgba(0,0,0,.16)!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  .digital-navjot-stage .prompt-card-top{
    font-size:8.5px!important;
    letter-spacing:.12em!important;
  }

  .digital-navjot-stage .prompt-card-text{
    font-size:12px!important;
    line-height:1.3!important;
  }

  .digital-navjot-stage .prompt-arrow{
    font-size:13px!important;
    opacity:.55!important;
  }

  .digital-navjot-stage .agent-meta{
    margin-top:15px!important;
    font-size:8px!important;
  }

  .digital-navjot-stage .response-area{
    max-height:125px!important;
    overflow:auto!important;
  }

  .digital-navjot-stage .response-area p{
    font-size:13px!important;
    line-height:1.45!important;
  }

  /* Restore Selected Work as an editorial corner element rather
     than part of the agent layout. */
  .selected-work{
    position:absolute!important;
    right:clamp(18px,2.1vw,42px)!important;
    bottom:clamp(22px,3.2vh,38px)!important;
    width:205px!important;
    z-index:24!important;
  }

  .selected-work-title{
    font-size:10px!important;
    letter-spacing:.14em!important;
    margin-bottom:11px!important;
  }

  .selected-work-list{
    gap:9px!important;
  }

  .selected-work-name{
    font-size:12px!important;
    line-height:1.15!important;
  }

  .selected-work-description{
    font-size:9.5px!important;
    line-height:1.3!important;
  }
}

/* Very wide screens: let the visual breathe without shrinking UI. */
@media (min-width:1500px){
  .digital-navjot-stage{
    left:36%!important;
  }

  #geminiSvg{
    width:126%!important;
    height:116%!important;
    transform:translate(-50%,-50%) scale(1.34)!important;
  }

  .digital-navjot-stage .agent-panel{
    left:40%!important;
    top:51%!important;
    width:620px!important;
    max-width:620px!important;
  }

  .selected-work{
    width:215px!important;
  }
}

/* Short desktop viewports: compress vertical rhythm, not scale. */
@media (min-width:901px) and (max-height:760px){
  .digital-navjot-stage{
    top:-11%!important;
    bottom:-10%!important;
  }

  #geminiSvg{
    top:40%!important;
    height:112%!important;
  }

  .digital-navjot-stage .agent-panel{
    top:47%!important;
  }

  .digital-navjot-stage .prompt-card{
    min-height:48px!important;
  }

  .digital-navjot-stage .agent-meta{
    margin-top:8px!important;
  }

  .selected-work{
    bottom:14px!important;
  }
}

/* Mobile: retain a real constellation, then flow UI naturally. */
@media (max-width:900px){
  html, body{
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  .digital-navjot-stage{
    overflow:visible!important;
  }

  .digital-navjot-visual{
    min-height:340px!important;
  }

  #geminiSvg{
    width:132%!important;
    height:390px!important;
    max-width:none!important;
    transform:translateX(-8%) scale(1.08)!important;
    transform-origin:center!important;
  }

  

  .constellation-stars circle{
    transform:scale(.82)!important;
    transform-box:fill-box;
    transform-origin:center;
  }

  .digital-navjot-visual::after{
    left:22%!important;
    top:15%!important;
    width:82%!important;
    height:70%!important;
    border-radius:50%!important;
    filter:blur(28px)!important;
    background:
      radial-gradient(
        ellipse at center,
        rgba(48,224,116,.19) 0%,
        rgba(48,224,116,.08) 43%,
        rgba(48,224,116,0) 74%
      )!important;
  }

  .digital-navjot-stage .agent-panel{
    padding-top:300px!important;
  }

  .digital-navjot-stage .eyebrow{
    font-size:10px!important;
  }

  .digital-navjot-stage .subhead{
    font-size:14px!important;
  }

  .digital-navjot-stage .ask-form input{
    font-size:16px!important;
  }

  .digital-navjot-stage .prompt-card-text{
    font-size:12px!important;
  }
}

@media (max-width:560px){
  .digital-navjot-visual{
    min-height:285px!important;
  }

  #geminiSvg{
    height:325px!important;
    width:145%!important;
    transform:translateX(-14%) scale(1.04)!important;
  }

  .digital-navjot-stage .agent-panel{
    padding-top:250px!important;
  }
}


/* =========================================================
   V4 — ORIGINAL-FIRST COMPOSITION
   Constellation is a quiet full-canvas BACKGROUND.
   Digital Navjot is a clean foreground layer.
   ========================================================= */

@media (min-width:901px){
  html, body{
    height:100%;
    overflow:hidden!important;
  }

  /* The constellation is no longer a right-side object.
     It begins behind the left/headline and spans the canvas. */
  .digital-navjot-stage{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
    pointer-events:none!important;
    z-index:1!important;
  }

  .digital-navjot-visual{
    position:absolute!important;
    inset:-7% -3% -6% 13%!important;
    width:auto!important;
    height:auto!important;
    overflow:visible!important;
    z-index:1!important;
    pointer-events:none!important;
  }

  #geminiSvg{
    position:absolute!important;
    left:50%!important;
    top:47%!important;
    width:112%!important;
    height:112%!important;
    max-width:none!important;
    transform:translate(-50%,-50%) scale(1.08)!important;
    transform-origin:center!important;
    overflow:visible!important;
    opacity:.78!important;
  }

  /* IMPORTANT: tiny points, like the original artwork.
     No giant black circles. */
  .constellation-stars circle{
    transform:scale(.25)!important;
    transform-box:fill-box!important;
    transform-origin:center!important;
    
  }

  .constellation-stars circle:nth-child(1),
  .constellation-stars circle:nth-child(4),
  .constellation-stars circle:nth-child(7),
  .constellation-stars circle:nth-child(10){
    transform:scale(.36)!important;
    
  }

  

  .orbit-particle{
    transform:scale(.35)!important;
    transform-box:fill-box!important;
    transform-origin:center!important;
    
  }

  .orbit-particle.anchor{
    transform:scale(.48)!important;
    
  }

  /* Soft organic glow behind the headline/constellation seam. */
  .digital-navjot-visual::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:17%!important;
    top:27%!important;
    width:53%!important;
    height:61%!important;
    border-radius:50%!important;
    filter:blur(38px)!important;
    opacity:.9!important;
    background:
      radial-gradient(
        ellipse at 42% 50%,
        rgba(52,221,117,.19) 0%,
        rgba(52,221,117,.095) 35%,
        rgba(52,221,117,.025) 57%,
        rgba(52,221,117,0) 76%
      )!important;
    mask-image:radial-gradient(ellipse at center,#000 0 44%,transparent 77%)!important;
    -webkit-mask-image:radial-gradient(ellipse at center,#000 0 44%,transparent 77%)!important;
  }

  .digital-navjot-stage::after{
    display:none!important;
  }

  /* Agent: unequivocally foreground. No constellation interference. */
  .digital-navjot-stage .agent-panel{
    position:absolute!important;
    left:46%!important;
    top:37%!important;
    width:min(590px,38vw)!important;
    max-width:590px!important;
    z-index:30!important;
    pointer-events:auto!important;
    padding:18px 20px 14px!important;
    transform:none!important;
    isolation:isolate!important;
  }

  /* A very soft canvas veil — NOT a card — just enough to keep
     background lines from visually cutting through the agent. */
  .digital-navjot-stage .agent-panel::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:-26px -34px -30px -34px;
    pointer-events:none;
    background:radial-gradient(
      ellipse at center,
      rgba(248,248,244,.97) 0%,
      rgba(248,248,244,.91) 58%,
      rgba(248,248,244,.56) 76%,
      rgba(248,248,244,0) 100%
    );
    filter:blur(7px);
  }

  .digital-navjot-stage .eyebrow{
    font-size:11px!important;
    font-weight:700!important;
    letter-spacing:.21em!important;
    line-height:1.2!important;
  }

  .digital-navjot-stage .subhead{
    margin-top:8px!important;
    max-width:520px!important;
    font-size:14px!important;
    line-height:1.48!important;
  }

  .digital-navjot-stage .ask-form{
    margin-top:20px!important;
  }

  .digital-navjot-stage .ask-form input{
    height:54px!important;
    min-height:54px!important;
    font-size:17px!important;
    background:transparent!important;
  }

  .digital-navjot-stage .ask-form button{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
  }

  .digital-navjot-stage .prompt-grid{
    margin-top:10px!important;
    column-gap:28px!important;
  }

  .digital-navjot-stage .prompt-card{
    min-height:57px!important;
    grid-template-columns:62px minmax(0,1fr) 15px!important;
    background:transparent!important;
    box-shadow:none!important;
    border-bottom:1px solid rgba(0,0,0,.15)!important;
  }

  .digital-navjot-stage .prompt-card-top{
    font-size:8.5px!important;
  }

  .digital-navjot-stage .prompt-card-text{
    font-size:12px!important;
    line-height:1.3!important;
  }

  .digital-navjot-stage .agent-meta{
    margin-top:15px!important;
    font-size:8px!important;
  }

  /* Keep selected work crisp and above the background artwork. */
  .selected-work{
    z-index:35!important;
    right:clamp(22px,2.4vw,46px)!important;
    bottom:clamp(24px,3.4vh,40px)!important;
    width:205px!important;
  }

  /* Portfolio foreground always wins over the background field. */
  .intro,
  .hero-copy,
  .headline,
  .about-link,
  .copyright,
  .selected-work{
    position:relative;
    z-index:20;
  }
}

@media (min-width:1500px){
  .digital-navjot-stage .agent-panel{
    left:47%!important;
    top:36%!important;
    width:600px!important;
    max-width:600px!important;
  }

  .digital-navjot-visual{
    inset:-8% -2% -6% 12%!important;
  }

  #geminiSvg{
    width:110%!important;
    height:114%!important;
  }
}

@media (min-width:901px) and (max-height:760px){
  .digital-navjot-stage .agent-panel{
    top:32%!important;
  }

  .digital-navjot-stage .prompt-card{
    min-height:49px!important;
  }

  .digital-navjot-stage .ask-form{
    margin-top:13px!important;
  }

  .digital-navjot-stage .agent-meta{
    margin-top:8px!important;
  }
}

/* Mobile: constellation remains background, never foreground. */
@media (max-width:900px){
  .digital-navjot-stage{
    overflow:visible!important;
  }

  .digital-navjot-visual{
    opacity:.72!important;
    pointer-events:none!important;
  }

  .constellation-stars circle{
    transform:scale(.34)!important;
    transform-box:fill-box!important;
    transform-origin:center!important;
    
  }

  

  .orbit-particle{
    transform:scale(.4)!important;
    transform-box:fill-box!important;
    transform-origin:center!important;
    
  }

  .digital-navjot-stage .agent-panel{
    position:relative!important;
    z-index:20!important;
  }

  .digital-navjot-stage .agent-panel::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:-20px -18px;
    pointer-events:none;
    background:radial-gradient(
      ellipse at center,
      rgba(248,248,244,.97) 0%,
      rgba(248,248,244,.88) 62%,
      rgba(248,248,244,0) 100%
    );
  }
}


/* =========================================================
   V5 — prominence + real tablet/mobile composition
   ========================================================= */

/* Slightly stronger background artwork on desktop, still behind content. */
@media (min-width:901px){
  #geminiSvg{
    opacity:.92!important;
  }

  

  

  

  

  
}

/* TABLET
   Stop trying to squeeze the desktop poster into a narrow viewport.
   Keep the editorial intro first, constellation as background,
   then give Digital Navjot a full readable row. */
@media (min-width:601px) and (max-width:900px){
  html, body{
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  body{
    min-height:100vh!important;
  }

  .digital-navjot-stage{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    min-height:690px!important;
    height:auto!important;
    margin-top:-150px!important;
    overflow:hidden!important;
    z-index:1!important;
  }

  .digital-navjot-visual{
    position:absolute!important;
    left:-18%!important;
    right:-24%!important;
    top:0!important;
    height:520px!important;
    min-height:0!important;
    opacity:.9!important;
    overflow:visible!important;
  }

  #geminiSvg{
    position:absolute!important;
    left:50%!important;
    top:46%!important;
    width:145%!important;
    height:500px!important;
    max-width:none!important;
    transform:translate(-50%,-50%)!important;
    opacity:.88!important;
  }

  

  .constellation-stars circle{
    transform:scale(.28)!important;
    transform-box:fill-box!important;
    transform-origin:center!important;
    
  }

  .constellation-stars circle:nth-child(1),
  .constellation-stars circle:nth-child(4),
  .constellation-stars circle:nth-child(7),
  .constellation-stars circle:nth-child(10){
    transform:scale(.38)!important;
  }

  .digital-navjot-visual::after{
    left:12%!important;
    top:12%!important;
    width:72%!important;
    height:74%!important;
    opacity:.9!important;
    filter:blur(32px)!important;
  }

  .digital-navjot-stage .agent-panel{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    width:calc(100% - 64px)!important;
    max-width:680px!important;
    margin:0 auto!important;
    padding:350px 0 0!important;
    z-index:20!important;
  }

  .digital-navjot-stage .agent-panel::before{
    inset:310px -35px -25px!important;
  }

  .digital-navjot-stage .eyebrow{
    font-size:11px!important;
  }

  .digital-navjot-stage .subhead{
    font-size:14px!important;
    max-width:580px!important;
  }

  .digital-navjot-stage .ask-form{
    margin-top:17px!important;
  }

  .digital-navjot-stage .ask-form input{
    height:52px!important;
    min-height:52px!important;
    font-size:16px!important;
  }

  .digital-navjot-stage .prompt-grid{
    grid-template-columns:1fr 1fr!important;
    column-gap:26px!important;
  }

  .digital-navjot-stage .prompt-card{
    min-height:55px!important;
  }

  .digital-navjot-stage .prompt-card-text{
    font-size:12px!important;
  }

  .selected-work{
    position:relative!important;
    right:auto!important;
    bottom:auto!important;
    width:calc(100% - 64px)!important;
    max-width:680px!important;
    margin:30px auto 34px!important;
    z-index:20!important;
  }

  .selected-work-list{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    column-gap:34px!important;
    row-gap:15px!important;
  }
}

/* PHONE — deliberately recompose rather than scale desktop. */
@media (max-width:600px){
  html, body{
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  body{
    min-height:100vh!important;
  }

  /* Background constellation bridges hero -> agent. */
  .digital-navjot-stage{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:610px!important;
    margin-top:-72px!important;
    overflow:hidden!important;
    z-index:1!important;
  }

  .digital-navjot-visual{
    position:absolute!important;
    left:-42%!important;
    right:-44%!important;
    top:0!important;
    width:auto!important;
    height:330px!important;
    min-height:0!important;
    opacity:.92!important;
    overflow:visible!important;
  }

  #geminiSvg{
    position:absolute!important;
    left:50%!important;
    top:48%!important;
    width:180%!important;
    height:325px!important;
    max-width:none!important;
    transform:translate(-50%,-50%)!important;
    opacity:.9!important;
  }

  

  .constellation-stars circle{
    transform:scale(.28)!important;
    transform-box:fill-box!important;
    transform-origin:center!important;
    
  }

  .constellation-stars circle:nth-child(1),
  .constellation-stars circle:nth-child(4),
  .constellation-stars circle:nth-child(7),
  .constellation-stars circle:nth-child(10){
    transform:scale(.38)!important;
    
  }

  .orbit-particle{
    transform:scale(.34)!important;
    
  }

  .digital-navjot-visual::after{
    left:22%!important;
    top:10%!important;
    width:62%!important;
    height:76%!important;
    opacity:.82!important;
    filter:blur(27px)!important;
  }

  .digital-navjot-stage .agent-panel{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    width:calc(100% - 40px)!important;
    max-width:none!important;
    margin:0 auto!important;
    padding:245px 0 0!important;
    z-index:20!important;
  }

  .digital-navjot-stage .agent-panel::before{
    inset:215px -20px -20px!important;
  }

  .digital-navjot-stage .eyebrow{
    font-size:10px!important;
    letter-spacing:.19em!important;
  }

  .digital-navjot-stage .subhead{
    margin-top:7px!important;
    max-width:100%!important;
    font-size:13px!important;
    line-height:1.45!important;
  }

  .digital-navjot-stage .ask-form{
    margin-top:15px!important;
  }

  .digital-navjot-stage .ask-form input{
    height:50px!important;
    min-height:50px!important;
    font-size:16px!important;
    padding-left:0!important;
  }

  .digital-navjot-stage .ask-form button{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
  }

  .digital-navjot-stage .prompt-grid{
    display:block!important;
    margin-top:9px!important;
  }

  .digital-navjot-stage .prompt-card{
    display:grid!important;
    width:100%!important;
    min-height:49px!important;
    grid-template-columns:54px minmax(0,1fr) 15px!important;
    column-gap:8px!important;
    border-bottom:1px solid rgba(0,0,0,.14)!important;
  }

  .digital-navjot-stage .prompt-card-top{
    font-size:8px!important;
  }

  .digital-navjot-stage .prompt-card-text{
    font-size:11.5px!important;
    line-height:1.28!important;
  }

  .digital-navjot-stage .agent-meta{
    margin-top:13px!important;
    font-size:7.5px!important;
  }

  .digital-navjot-stage .response-area{
    max-height:none!important;
  }

  .selected-work{
    position:relative!important;
    right:auto!important;
    bottom:auto!important;
    width:calc(100% - 40px)!important;
    max-width:none!important;
    margin:30px auto 32px!important;
    z-index:20!important;
  }

  .selected-work-title{
    font-size:10px!important;
  }

  .selected-work-list{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    column-gap:22px!important;
    row-gap:15px!important;
  }

  .selected-work-name{
    font-size:12px!important;
  }

  .selected-work-description{
    font-size:9px!important;
  }
}

/* Very narrow phones: one-column work list and slightly tighter agent. */
@media (max-width:390px){
  .digital-navjot-stage .agent-panel,
  .selected-work{
    width:calc(100% - 30px)!important;
  }

  .digital-navjot-stage .agent-panel{
    padding-top:225px!important;
  }

  .selected-work-list{
    grid-template-columns:1fr!important;
  }
}

/* =========================================================
   V6 — tablet/mobile rebuild
   Desktop remains untouched.
   ========================================================= */

@media (max-width:900px){

  html,
  body{
    width:100%!important;
    max-width:100%!important;
    min-height:100%!important;
    height:auto!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  body{
    position:relative!important;
  }

  .page,
  .home,
  main{
    width:100%!important;
    max-width:100%!important;
    min-height:100svh!important;
    height:auto!important;
    overflow:visible!important;
  }

  /* Reset desktop poster positioning completely. */
  .layout,
  .hero,
  .hero-copy,
  .left-composition,
  .digital-navjot-stage,
  .digital-navjot-stage .agent-panel,
  .selected-work{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
  }

  /* Keep ABOUT floating at the top-right. */
  .about-link{
    position:absolute!important;
    top:18px!important;
    right:20px!important;
    z-index:60!important;
  }

  /* The original headline is first and fully visible. */
  .hero,
  .hero-copy{
    order:1!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
    margin:0!important;
    padding:88px 20px 0!important;
    display:block!important;
  }

  #hero-title,
  .headline,
  .hero h1{
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    transform:none!important;
    font-size:clamp(66px,14vw,108px)!important;
    line-height:.84!important;
    letter-spacing:-.075em!important;
    overflow:visible!important;
    word-break:normal!important;
  }

  /* Constellation is purely background. */
  .digital-navjot-stage{
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0 20px 0!important;
    overflow:visible!important;
    z-index:1!important;
  }

  .digital-navjot-visual{
    position:absolute!important;
    left:-18vw!important;
    right:-18vw!important;
    top:-260px!important;
    height:620px!important;
    min-height:0!important;
    width:auto!important;
    opacity:.9!important;
    overflow:hidden!important;
    z-index:0!important;
    pointer-events:none!important;
  }

  #geminiSvg{
    position:absolute!important;
    left:50%!important;
    top:48%!important;
    width:138vw!important;
    height:600px!important;
    max-width:none!important;
    transform:translate(-50%,-50%)!important;
    opacity:.88!important;
  }

  

  .constellation-stars circle{
    transform:scale(.28)!important;
    transform-box:fill-box!important;
    transform-origin:center!important;
    
  }

  .constellation-stars circle:nth-child(1),
  .constellation-stars circle:nth-child(4),
  .constellation-stars circle:nth-child(7),
  .constellation-stars circle:nth-child(10){
    transform:scale(.38)!important;
    
  }

  .orbit-particle{
    transform:scale(.32)!important;
    transform-box:fill-box!important;
    transform-origin:center!important;
    
  }

  .digital-navjot-visual::after{
    left:20%!important;
    top:17%!important;
    width:64%!important;
    height:68%!important;
    opacity:.78!important;
    filter:blur(28px)!important;
  }

  /* Bio follows headline. */
  .intro{
    position:relative!important;
    width:calc(100% - 40px)!important;
    max-width:420px!important;
    margin:38px 20px 0!important;
    padding:0!important;
    left:auto!important;
    top:auto!important;
    transform:none!important;
    font-size:15px!important;
    line-height:1.5!important;
    z-index:20!important;
  }

  .intro::before{
    margin-bottom:18px!important;
  }

  /* Digital Navjot in normal flow and readable. */
  .digital-navjot-stage .agent-panel{
    width:100%!important;
    max-width:700px!important;
    margin:54px auto 0!important;
    padding:0!important;
    z-index:30!important;
    background:transparent!important;
  }

  .digital-navjot-stage .agent-panel::before{
    inset:-22px -18px -24px!important;
    opacity:.96!important;
  }

  .digital-navjot-stage .eyebrow{
    font-size:11px!important;
    letter-spacing:.2em!important;
  }

  .digital-navjot-stage .subhead{
    max-width:560px!important;
    margin-top:7px!important;
    font-size:14px!important;
    line-height:1.45!important;
  }

  .digital-navjot-stage .ask-form{
    margin-top:18px!important;
  }

  .digital-navjot-stage .ask-form input{
    width:100%!important;
    min-height:52px!important;
    height:52px!important;
    font-size:16px!important;
  }

  .digital-navjot-stage .ask-form button{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    flex:0 0 48px!important;
  }

  .digital-navjot-stage .prompt-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:24px!important;
    row-gap:0!important;
    margin-top:12px!important;
  }

  .digital-navjot-stage .prompt-card{
    min-height:58px!important;
    grid-template-columns:56px minmax(0,1fr) 16px!important;
    column-gap:8px!important;
    background:transparent!important;
    border-bottom:1px solid rgba(0,0,0,.14)!important;
  }

  .digital-navjot-stage .prompt-card-text{
    font-size:12px!important;
    line-height:1.3!important;
  }

  .digital-navjot-stage .micro-footer,
  .digital-navjot-stage .agent-meta{
    margin-top:14px!important;
  }

  .digital-navjot-stage .response-area{
    max-height:none!important;
    overflow:visible!important;
  }

  /* Selected Work follows normally. */
  .selected-work{
    width:calc(100% - 40px)!important;
    max-width:700px!important;
    margin:42px auto 36px!important;
    padding:0!important;
    z-index:30!important;
  }

  .selected-work-list{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:30px!important;
    row-gap:16px!important;
  }

  .selected-work-title{
    font-size:10px!important;
    margin-bottom:12px!important;
  }

  .selected-work-name{
    font-size:12px!important;
  }

  .selected-work-description{
    font-size:9.5px!important;
  }

  .copyright,
  .footer-meta{
    position:relative!important;
    left:auto!important;
    bottom:auto!important;
    margin:0 20px 22px!important;
    padding:0!important;
    z-index:30!important;
  }
}

/* PHONE */
@media (max-width:600px){

  .hero,
  .hero-copy{
    padding:78px 16px 0!important;
  }

  #hero-title,
  .headline,
  .hero h1{
    font-size:clamp(56px,16.5vw,82px)!important;
    line-height:.85!important;
    letter-spacing:-.076em!important;
  }

  .intro{
    width:calc(100% - 32px)!important;
    margin:30px 16px 0!important;
    max-width:330px!important;
    font-size:14px!important;
  }

  .digital-navjot-stage{
    padding:0 16px!important;
  }

  .digital-navjot-visual{
    left:-35vw!important;
    right:-35vw!important;
    top:-185px!important;
    height:420px!important;
  }

  #geminiSvg{
    width:170vw!important;
    height:410px!important;
  }

  .digital-navjot-stage .agent-panel{
    margin-top:44px!important;
  }

  .digital-navjot-stage .subhead{
    max-width:100%!important;
    font-size:13px!important;
  }

  .digital-navjot-stage .prompt-grid{
    grid-template-columns:1fr!important;
    column-gap:0!important;
  }

  .digital-navjot-stage .prompt-card{
    min-height:52px!important;
    grid-template-columns:50px minmax(0,1fr) 16px!important;
  }

  .digital-navjot-stage .prompt-card-text{
    font-size:11.5px!important;
  }

  .selected-work{
    width:calc(100% - 32px)!important;
    margin:36px 16px 30px!important;
  }

  .selected-work-list{
    grid-template-columns:1fr!important;
    row-gap:13px!important;
  }

  .copyright,
  .footer-meta{
    margin:0 16px 18px!important;
  }
}

/* VERY SMALL PHONES */
@media (max-width:390px){

  #hero-title,
  .headline,
  .hero h1{
    font-size:clamp(52px,16vw,68px)!important;
  }

  .digital-navjot-visual{
    top:-155px!important;
    height:360px!important;
  }

  #geminiSvg{
    height:350px!important;
    width:178vw!important;
  }

  .digital-navjot-stage .agent-panel{
    margin-top:34px!important;
  }
}

/* =========================================================
   V7 — real responsive ordering + compact laptop mode
   Desktop >= 1181px remains the approved V5/V6 composition.
   ========================================================= */

/* LAPTOP: 901–1180px
   Preserve approved desktop scale; only reflow the right-hand composition. */
@media (min-width:901px) and (max-width:1180px){
  html,body{height:100%;overflow:hidden!important}
  .page{padding-left:24px!important;padding-right:24px!important}
  .layout{
    position:relative!important;
    min-height:calc(100vh - 84px)!important;
    grid-template-columns:176px minmax(0,1fr)!important;
    column-gap:24px!important;
  }
  .intro{
    width:176px!important;max-width:176px!important;
    font-size:14px!important;line-height:1.48!important;align-self:center!important;
  }
  .hero{min-height:calc(100vh - 92px)!important;overflow:visible!important}
  #hero-title{
    width:min(430px,43vw)!important;
    font-size:clamp(62px,7.2vw,84px)!important;
    line-height:.82!important;
  }

  /* same artwork scale language as desktop; only reposition it */
  .digital-navjot-stage{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
    pointer-events:none!important;overflow:visible!important;z-index:1!important;
  }
  .digital-navjot-visual{
    position:absolute!important;left:28%!important;right:-12%!important;top:-9%!important;bottom:-3%!important;
    opacity:.92!important;overflow:visible!important;
  }
  #geminiSvg{
    left:49%!important;top:42%!important;width:112%!important;height:106%!important;opacity:.9!important;
  }
  /* preserve small elegant nodes from approved desktop, not enlarged cleanup nodes */
  .constellation-stars circle{transform:scale(.24)!important;transform-box:fill-box!important;transform-origin:center!important}
  .constellation-stars circle:nth-child(1),
  .constellation-stars circle:nth-child(4),
  .constellation-stars circle:nth-child(7),
  .constellation-stars circle:nth-child(10){transform:scale(.34)!important}

  /* reserve an actual lane between headline and selected work */
  .digital-navjot-stage .agent-panel{
    position:absolute!important;left:47%!important;top:27%!important;
    width:min(455px,43vw)!important;max-width:455px!important;
    padding:14px 14px 10px!important;pointer-events:auto!important;z-index:30!important;
  }
  .digital-navjot-stage .eyebrow{font-size:10px!important}
  .digital-navjot-stage .subhead{font-size:12.5px!important;max-width:410px!important}
  .digital-navjot-stage .ask-form{margin-top:13px!important}
  .digital-navjot-stage .ask-form input{height:47px!important;min-height:47px!important;font-size:15px!important}
  .digital-navjot-stage .ask-form #askButton{width:43px!important;height:43px!important;min-width:43px!important;min-height:43px!important;flex-basis:43px!important}
  .digital-navjot-stage .prompt-grid{grid-template-columns:1fr 1fr!important;column-gap:18px!important}
  .digital-navjot-stage .prompt-card{min-height:50px!important}
  .digital-navjot-stage .prompt-card-text{font-size:11.5px!important;line-height:1.28!important}
  .digital-navjot-stage .prompt-card-top{font-size:8px!important}
  .digital-navjot-stage .micro-footer{margin-top:9px!important;font-size:8.5px!important}
  .digital-navjot-stage .response-area p{font-size:13px!important;line-height:1.5!important;max-width:52ch!important}

  .selected-work{right:16px!important;bottom:16px!important;width:168px!important;z-index:35!important}
  .selected-work-title{font-size:9px!important}
  .selected-work-name{font-size:10px!important}
  .selected-work-description{font-size:8px!important}

  /* expanded content is allowed to escape instead of clipping into selected work */
  body.trust-panel-open{height:auto!important;min-height:100%!important;overflow-y:auto!important}
  body.trust-panel-open .page,
  body.trust-panel-open .layout,
  body.trust-panel-open .hero{height:auto!important;min-height:100vh!important;overflow:visible!important}
}

/* TABLET + MOBILE: explicit document flow.
   Order: headline -> bio -> constellation/agent -> selected work. */
@media (max-width:900px){
  html, body{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  .page{
    width:100%!important;
    min-height:100svh!important;
    height:auto!important;
    overflow:visible!important;
  }

  .layout{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    height:auto!important;
    gap:0!important;
    padding:0!important;
    overflow:visible!important;
  }

  .hero{
    order:1!important;
    position:relative!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:86px 22px 0!important;
    overflow:visible!important;
  }

  #hero-title{
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    left:auto!important;
    top:auto!important;
    transform:none!important;
    font-size:clamp(62px,13.8vw,106px)!important;
    line-height:.84!important;
    letter-spacing:-.075em!important;
  }

  .intro{
    order:2!important;
    position:relative!important;
    width:calc(100% - 44px)!important;
    max-width:390px!important;
    margin:34px 22px 0!important;
    padding:0!important;
    left:auto!important;
    top:auto!important;
    transform:none!important;
    font-size:15px!important;
    line-height:1.5!important;
  }

  .intro::before{
    margin-bottom:16px!important;
  }

  .digital-navjot-stage{
    order:3!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    min-height:620px!important;
    height:auto!important;
    margin:44px 0 0!important;
    padding:0 22px 30px!important;
    overflow:hidden!important;
    pointer-events:auto!important;
    z-index:1!important;
  }

  /* Give constellation real visual presence above/behind the agent. */
  .digital-navjot-visual{
    position:absolute!important;
    left:-18%!important;
    right:-18%!important;
    top:0!important;
    height:330px!important;
    min-height:330px!important;
    opacity:.94!important;
    overflow:visible!important;
    pointer-events:none!important;
  }

  #geminiSvg{
    position:absolute!important;
    left:50%!important;
    top:46%!important;
    width:132%!important;
    height:330px!important;
    max-width:none!important;
    transform:translate(-50%,-50%)!important;
    opacity:.92!important;
  }

  

  .constellation-stars circle{
    transform:scale(.30)!important;
    transform-box:fill-box!important;
    transform-origin:center!important;
    
  }

  .constellation-stars circle:nth-child(1),
  .constellation-stars circle:nth-child(4),
  .constellation-stars circle:nth-child(7),
  .constellation-stars circle:nth-child(10){
    transform:scale(.40)!important;
    
  }

  .digital-navjot-visual::after{
    left:22%!important;
    top:12%!important;
    width:66%!important;
    height:74%!important;
    opacity:.82!important;
  }

  .digital-navjot-stage .agent-panel{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    width:100%!important;
    max-width:680px!important;
    margin:0 auto!important;
    padding:300px 0 0!important;
    z-index:20!important;
  }

  .digital-navjot-stage .agent-panel::before{
    inset:270px -22px -24px!important;
  }

  .digital-navjot-stage .eyebrow{
    font-size:11px!important;
  }

  .digital-navjot-stage .subhead{
    font-size:14px!important;
    max-width:560px!important;
  }

  .digital-navjot-stage .ask-form{
    margin-top:16px!important;
  }

  .digital-navjot-stage .ask-form input{
    min-height:52px!important;
    height:52px!important;
    font-size:16px!important;
  }

  .digital-navjot-stage .prompt-grid{
    grid-template-columns:1fr 1fr!important;
    column-gap:24px!important;
  }

  .digital-navjot-stage .prompt-card{
    min-height:55px!important;
    grid-template-columns:54px minmax(0,1fr) 15px!important;
  }

  .digital-navjot-stage .prompt-card-text{
    font-size:12px!important;
  }

  .selected-work{
    position:relative!important;
    right:auto!important;
    bottom:auto!important;
    width:calc(100% - 44px)!important;
    max-width:680px!important;
    margin:34px auto 36px!important;
    z-index:20!important;
  }

  .selected-work-list{
    grid-template-columns:1fr 1fr!important;
    column-gap:30px!important;
    row-gap:16px!important;
  }

  .footer-meta{
    position:relative!important;
    margin:0 22px 20px!important;
  }
}

@media (max-width:600px){
  .hero{
    padding:74px 16px 0!important;
  }

  #hero-title{
    font-size:clamp(54px,16.3vw,80px)!important;
    line-height:.85!important;
  }

  .intro{
    width:calc(100% - 32px)!important;
    max-width:320px!important;
    margin:28px 16px 0!important;
    font-size:14px!important;
  }

  .digital-navjot-stage{
    min-height:650px!important;
    margin-top:38px!important;
    padding:0 16px 28px!important;
  }

  .digital-navjot-visual{
    left:-38%!important;
    right:-38%!important;
    height:290px!important;
    min-height:290px!important;
  }

  #geminiSvg{
    width:170%!important;
    height:290px!important;
    opacity:.94!important;
  }

  .digital-navjot-stage .agent-panel{
    padding-top:260px!important;
  }

  .digital-navjot-stage .agent-panel::before{
    inset:230px -18px -20px!important;
  }

  .digital-navjot-stage .subhead{
    max-width:100%!important;
    font-size:13px!important;
  }

  .digital-navjot-stage .prompt-grid{
    grid-template-columns:1fr!important;
    column-gap:0!important;
  }

  .digital-navjot-stage .prompt-card{
    min-height:51px!important;
    grid-template-columns:48px minmax(0,1fr) 15px!important;
  }

  .digital-navjot-stage .prompt-card-text{
    font-size:11.5px!important;
  }

  .selected-work{
    width:calc(100% - 32px)!important;
    margin:30px 16px!important;
  }

  .selected-work-list{
    grid-template-columns:1fr!important;
  }

  .footer-meta{
    margin:0 16px 18px!important;
  }
}

@media (max-width:390px){
  #hero-title{
    font-size:clamp(50px,15.8vw,66px)!important;
  }

  .digital-navjot-stage{
    min-height:620px!important;
  }

  .digital-navjot-visual{
    height:255px!important;
    min-height:255px!important;
  }

  #geminiSvg{
    height:255px!important;
    width:176%!important;
  }

  .digital-navjot-stage .agent-panel{
    padding-top:228px!important;
  }

  .digital-navjot-stage .agent-panel::before{
    inset:200px -14px -18px!important;
  }
}


/* ============================================================
   FINAL AGENT UI CONTROL FIX
   Preserve the portfolio composition; repair only interaction UI.
   Original agent implementation is the reference for proportions.
   ============================================================ */
.digital-navjot-stage .ask-form{
  display:flex!important; align-items:center!important; gap:10px!important;
  overflow:visible!important;
}
.digital-navjot-stage .ask-form input{
  min-width:0!important; flex:1 1 auto!important;
}
.digital-navjot-stage .ask-form #askButton{
  width:46px!important; height:46px!important; min-width:46px!important; min-height:46px!important;
  flex:0 0 46px!important; padding:0!important; margin:0!important;
  border:0!important; border-radius:50%!important; background:#050505!important; color:#f6f5ef!important;
  display:grid!important; place-items:center!important; font-size:0!important; line-height:1!important;
  appearance:none!important; -webkit-appearance:none!important; overflow:hidden!important;
}
.digital-navjot-stage .ask-form #askButton::before{
  content:"↑"; display:block; color:#f6f5ef; font-size:19px; font-weight:400; line-height:1;
}

/* Suggested prompts: editorial rows, but readable. */
.digital-navjot-stage .prompt-card{
  min-height:48px!important; padding:9px 24px 9px 0!important;
  overflow:visible!important;
}
.digital-navjot-stage .prompt-card-top{
  font-size:8px!important; line-height:1.2!important; letter-spacing:.12em!important;
}
.digital-navjot-stage .prompt-card-text{
  margin-top:5px!important; max-width:100%!important; font-size:11px!important; line-height:1.25!important;
  overflow:visible!important; white-space:normal!important;
}
.digital-navjot-stage .prompt-arrow{
  right:4px!important; bottom:50%!important; transform:translateY(50%)!important;
  font-size:13px!important;
}

/* Answers must expand naturally; never become an inner scroll box. */
.digital-navjot-stage .response-area{
  height:auto!important; max-height:none!important; overflow:visible!important;
  min-height:0!important; padding-bottom:0!important;
}
.digital-navjot-stage .response-area p{
  max-height:none!important; overflow:visible!important; font-size:13px!important; line-height:1.52!important;
}
.digital-navjot-stage .action-area{
  width:100%!important; max-height:none!important; overflow:visible!important;
  align-items:flex-start!important;
}

/* Action CTAs are text-sized pills, never giant circles. */
.digital-navjot-stage .action-btn,
.digital-navjot-stage .action-btn.primary{
  width:auto!important; height:auto!important; min-width:0!important; min-height:34px!important;
  padding:7px 13px!important; border-radius:999px!important; font-size:11px!important; line-height:1.2!important;
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
}

/* Lead/contact form: use the original agent's restrained form language. */
.digital-navjot-stage .inline-form{
  width:100%!important; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px 10px!important; margin:6px 0 0!important; overflow:visible!important;
}
.digital-navjot-stage .inline-form .form-back{
  grid-column:1/-1!important; width:auto!important; height:auto!important; min-width:0!important; min-height:0!important;
  justify-self:start!important; padding:0!important; margin:0 0 4px!important;
  border:0!important; border-radius:0!important; background:transparent!important; color:rgba(17,17,17,.48)!important;
  font-size:10px!important; line-height:1.3!important; letter-spacing:.04em!important;
}
.digital-navjot-stage .inline-form input,
.digital-navjot-stage .inline-form textarea{
  width:100%!important; min-width:0!important; height:auto!important; min-height:38px!important;
  border:1px solid rgba(17,17,17,.14)!important; border-radius:10px!important; background:rgba(246,245,239,.35)!important;
  padding:9px 11px!important; color:#111!important; font-size:12px!important; line-height:1.35!important;
  box-shadow:none!important; appearance:none!important; -webkit-appearance:none!important;
}
.digital-navjot-stage .inline-form textarea{
  grid-column:1/-1!important; min-height:78px!important; resize:vertical!important;
}
.digital-navjot-stage .inline-form button[type="submit"]{
  width:auto!important; height:auto!important; min-width:0!important; min-height:36px!important;
  justify-self:start!important; padding:8px 14px!important; border-radius:999px!important;
  background:#111!important; color:#f6f5ef!important; font-size:11px!important; line-height:1.2!important;
}
.digital-navjot-stage .lead-form-status{grid-column:1/-1!important; font-size:10px!important; line-height:1.4!important;}
.digital-navjot-stage .lead-honeypot{position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important;}

@media (max-width: 700px){
  .digital-navjot-stage .ask-form #askButton{
    width:40px!important; height:40px!important; min-width:40px!important; min-height:40px!important; flex-basis:40px!important;
  }
  .digital-navjot-stage .ask-form #askButton::before{font-size:17px!important;}
  .digital-navjot-stage .prompt-card{min-height:52px!important; padding:10px 23px 10px 0!important;}
  .digital-navjot-stage .prompt-card-text{font-size:12px!important; line-height:1.28!important;}
  .digital-navjot-stage .inline-form{grid-template-columns:1fr!important; gap:8px!important;}
  .digital-navjot-stage .inline-form .form-back,
  .digital-navjot-stage .inline-form textarea,
  .digital-navjot-stage .lead-form-status{grid-column:1!important;}
  .digital-navjot-stage .inline-form input,
  .digital-navjot-stage .inline-form textarea{font-size:16px!important;} /* prevents iOS input zoom */
  .digital-navjot-stage .response-area p{font-size:14px!important; line-height:1.55!important;}
}

/* ============================================================
   RESPONSIVE AGENT POLISH — interaction components only.
   Portfolio composition / constellation placement remains intact.
   ============================================================ */

/* Native-looking controls only; never emoji artwork. */
.digital-navjot-stage .prompt-arrow{
  position:absolute!important;
  right:4px!important;
  top:50%!important;
  bottom:auto!important;
  width:14px!important;
  height:14px!important;
  transform:translateY(-50%)!important;
  display:grid!important;
  place-items:center!important;
  color:rgba(11,79,49,.62)!important;
  font-family:Arial,Helvetica,sans-serif!important;
}
.digital-navjot-stage .prompt-arrow svg{width:12px;height:12px;display:block;overflow:visible}
.digital-navjot-stage .prompt-arrow path{fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}

/* Prompt rows use real columns so labels can never collide with copy. */
.digital-navjot-stage .prompt-card{
  position:relative!important;
  display:grid!important;
  grid-template-columns:34px minmax(58px,76px) minmax(0,1fr) 16px!important;
  align-items:center!important;
  column-gap:8px!important;
  min-height:48px!important;
  padding:8px 0!important;
  text-align:left!important;
}
.digital-navjot-stage .prompt-card-top{display:contents!important}
.digital-navjot-stage .prompt-number{grid-column:1!important;color:rgba(8,8,8,.25)!important;white-space:nowrap!important}
.digital-navjot-stage .prompt-category{grid-column:2!important;color:var(--green)!important;white-space:nowrap!important}
.digital-navjot-stage .prompt-card-text{
  grid-column:3!important;
  margin:0!important;
  min-width:0!important;
  font-size:12px!important;
  line-height:1.28!important;
  overflow-wrap:anywhere!important;
}
.digital-navjot-stage .prompt-arrow{grid-column:4!important;position:static!important;transform:none!important;justify-self:end!important}

/* Submit remains visually restrained at every breakpoint. */
.digital-navjot-stage .ask-form #askButton{
  width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;flex:0 0 44px!important;
  box-shadow:none!important;
}
.digital-navjot-stage .ask-form #askButton::before{font-size:18px!important;font-family:Arial,Helvetica,sans-serif!important;font-weight:400!important}

/* Readable, but still micro typography. */
.digital-navjot-stage .micro-footer{font-size:9px!important;line-height:1.4!important;color:rgba(8,8,8,.36)!important}
.digital-navjot-stage .micro-footer span,.digital-navjot-stage .micro-link{color:inherit!important;opacity:1!important}
.digital-navjot-stage .micro-link{font-size:inherit!important;text-decoration:none!important;border-bottom:1px solid rgba(8,8,8,.22)!important}

/* Answers/actions/forms are document flow — no chat-window scroll box. */
.digital-navjot-stage .response-area,
.digital-navjot-stage .action-area,
.digital-navjot-stage .inline-form,
.digital-navjot-stage .trust-panel{
  height:auto!important;max-height:none!important;overflow:visible!important;
}
.digital-navjot-stage .response-area{padding-top:14px!important}
.digital-navjot-stage .response-area p{font-size:14px!important;line-height:1.55!important;max-width:62ch!important}
.digital-navjot-stage .thinking-mode{font-size:9px!important;line-height:1.35!important;letter-spacing:.18em!important}

/* Trust panel becomes editorial content, not a dashboard/card. */
.digital-navjot-stage .trust-panel{
  position:relative!important;
  margin:18px 0 0!important;
  padding:16px 0 2px!important;
  border:0!important;
  border-top:1px solid rgba(8,8,8,.18)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.digital-navjot-stage .trust-panel[hidden]{display:none!important}
.digital-navjot-stage .trust-heading{font-size:10px!important;letter-spacing:.18em!important;text-transform:uppercase!important;color:var(--green)!important}
.digital-navjot-stage .trust-panel p{font-size:13px!important;line-height:1.55!important;max-width:64ch!important}
.digital-navjot-stage .agent-meta{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 20px!important;margin:14px 0!important;
}
.digital-navjot-stage .agent-meta>div{
  min-width:0!important;display:grid!important;grid-template-columns:minmax(82px,.8fr) minmax(0,1.2fr)!important;gap:8px!important;
  padding:9px 0!important;border:0!important;border-bottom:1px solid rgba(8,8,8,.14)!important;border-radius:0!important;background:transparent!important;
}
.digital-navjot-stage .agent-meta span{font-size:9px!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:rgba(8,8,8,.48)!important}
.digital-navjot-stage .agent-meta strong{min-width:0!important;font-size:12px!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
.digital-navjot-stage .architecture-flow{display:flex!important;flex-wrap:wrap!important;gap:7px!important;align-items:center!important;margin:12px 0!important}
.digital-navjot-stage .architecture-flow span{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;font-size:11px!important;color:rgba(8,8,8,.62)!important}
.digital-navjot-stage .architecture-flow b{font-weight:400!important;color:rgba(8,8,8,.25)!important}

/* Lead form: reliable columns and restrained controls. */
.digital-navjot-stage .inline-form{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px 10px!important}
.digital-navjot-stage .inline-form input,.digital-navjot-stage .inline-form textarea{font-size:13px!important;line-height:1.4!important;min-height:42px!important}
.digital-navjot-stage .inline-form textarea{grid-column:1/-1!important;min-height:92px!important}
.digital-navjot-stage .inline-form .form-back{grid-column:1/-1!important;font-size:11px!important;color:rgba(8,8,8,.55)!important}
.digital-navjot-stage .inline-form button[type="submit"]{min-height:38px!important;font-size:12px!important;padding:8px 15px!important}

/* Intermediate laptop/tablet widths: keep labels legible without changing composition. */
@media (max-width:1180px){
  .digital-navjot-stage .prompt-card{grid-template-columns:28px minmax(54px,68px) minmax(0,1fr) 14px!important;column-gap:7px!important}
  .digital-navjot-stage .prompt-card-text{font-size:11.5px!important}
  .digital-navjot-stage .response-area p{font-size:13.5px!important}
}

@media (max-width:900px){
  .digital-navjot-stage .ask-form #askButton{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;flex-basis:42px!important}
  .digital-navjot-stage .prompt-card{grid-template-columns:30px minmax(62px,74px) minmax(0,1fr) 14px!important;min-height:50px!important}
  .digital-navjot-stage .prompt-card-text{font-size:12px!important}
  .digital-navjot-stage .micro-footer{font-size:9px!important}
}

@media (max-width:700px){
  .digital-navjot-stage .ask-form #askButton{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;flex-basis:40px!important}
  .digital-navjot-stage .prompt-grid{grid-template-columns:1fr!important;gap:0!important}
  .digital-navjot-stage .prompt-card{grid-template-columns:28px 72px minmax(0,1fr) 14px!important;column-gap:8px!important;min-height:54px!important;padding:9px 0!important}
  .digital-navjot-stage .prompt-card-text{font-size:12.5px!important;line-height:1.3!important}
  .digital-navjot-stage .prompt-card-top{font-size:8.5px!important}
  .digital-navjot-stage .response-area p{font-size:14px!important;line-height:1.55!important}
  .digital-navjot-stage .inline-form{grid-template-columns:1fr!important}
  .digital-navjot-stage .inline-form textarea,.digital-navjot-stage .inline-form .form-back,.digital-navjot-stage .lead-form-status{grid-column:1!important}
  .digital-navjot-stage .inline-form input,.digital-navjot-stage .inline-form textarea{font-size:16px!important}
  .digital-navjot-stage .agent-meta{grid-template-columns:1fr!important;gap:0!important}
  .digital-navjot-stage .trust-panel p{font-size:14px!important}
  .digital-navjot-stage .architecture-flow{gap:6px 8px!important}
  .digital-navjot-stage .architecture-flow span{font-size:11px!important}
}

@media (max-width:420px){
  .digital-navjot-stage .prompt-card{grid-template-columns:24px 66px minmax(0,1fr) 12px!important;column-gap:6px!important}
  .digital-navjot-stage .prompt-card-text{font-size:12px!important}
  .digital-navjot-stage .prompt-category{font-size:8px!important;letter-spacing:.1em!important}
  .digital-navjot-stage .prompt-number{font-size:8px!important}
  .digital-navjot-stage .micro-footer{font-size:8.5px!important}
}

/* =========================================================
   V11 — trust panel + input text + stronger constellation drama
   No layout redesign.
   ========================================================= */

/* 1) HOW THIS WORKS: desktop/laptop must expand fully, not clip. */
.digital-navjot-stage .trust-panel{
  max-height:none!important;
  height:auto!important;
  overflow:visible!important;
  clip:auto!important;
}

.digital-navjot-stage .agent-panel{
  overflow:visible!important;
}

@media (min-width:901px){
  .digital-navjot-stage .agent-panel:has(.trust-panel:not([hidden])){
    width:min(640px,43vw)!important;
    max-width:640px!important;
  }

  .digital-navjot-stage .trust-panel{
    width:100%!important;
    max-width:none!important;
    padding-top:12px!important;
    margin-top:12px!important;
    border-top:1px solid rgba(17,17,17,.14)!important;
    background:transparent!important;
    border-radius:0!important;
  }

  .digital-navjot-stage .agent-meta{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .digital-navjot-stage .architecture-flow{
    overflow:visible!important;
    max-width:100%!important;
  }
}

/* 2) INPUT TEXT: keep typed text black; placeholder stays muted.
   Prevent browser autofill/native white text weirdness. */
.digital-navjot-stage .ask-form input{
  color:var(--ink)!important;
  -webkit-text-fill-color:var(--ink)!important;
  caret-color:var(--green)!important;
  opacity:1!important;
}

.digital-navjot-stage .ask-form input::placeholder{
  color:rgba(17,17,17,.42)!important;
  -webkit-text-fill-color:rgba(17,17,17,.42)!important;
  opacity:1!important;
}

.digital-navjot-stage .ask-form input:focus,
.digital-navjot-stage .ask-form input:active{
  color:var(--ink)!important;
  -webkit-text-fill-color:var(--ink)!important;
}

.digital-navjot-stage .ask-form input:-webkit-autofill,
.digital-navjot-stage .ask-form input:-webkit-autofill:hover,
.digital-navjot-stage .ask-form input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink)!important;
  caret-color:var(--green)!important;
  transition:background-color 9999s ease-out 0s!important;
}

/* 3) CONSTELLATION DRAMA: stronger active paths/nodes only.
   Base state remains subtle. */






/* Add a second lingering glow feel after activation without changing JS. */




/* On smaller screens, keep the activation dramatic but not oversized. */
@media (max-width:900px){
  

  
}



/* =========================================================
   V12 — balanced constellation activation
   Same interaction, same layout, responsive intensity.
   ========================================================= */

/* Base activated route:
   visible enough to feel deliberate, but still a background layer. */




/* Nodes give the moment of drama; line settles quieter afterward. */




/* Large/wide desktop: slightly more presence because the canvas is larger. */
@media (min-width:1400px){
  

  
}

/* Laptop / tablet landscape: retain drama without visually thickening the route. */
@media (min-width:901px) and (max-width:1399px){
  

  

  
}

/* Tablet / mobile: thinner route because the constellation occupies less physical space. */
@media (max-width:900px){
  

  

  
}

/* Small phones: keep the effect clear, but never let it overpower text. */
@media (max-width:600px){
  

  

  
}

/* Accessibility: preserve the final highlighted state without motion. */
@media (prefers-reduced-motion:reduce){
  
}

/* =========================================================
   CONSTELLATION VISUAL BEHAVIOR — ORIGINAL SOURCE OF TRUTH
   Homepage geometry and responsive placement intentionally untouched.
   Backend brain/moon_state values drive these states.
   ========================================================= */
.constellation-lines line{
  stroke:var(--ink);
  stroke-width:.78;
  opacity:.032;
  transition:opacity .65s ease,stroke-width .65s ease,stroke .65s ease;
}

.constellation-lines line.is-active{
  stroke:var(--green);
  opacity:var(--activation,.65);
  stroke-width:1.45;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:pathLight 1.05s ease forwards;
}

@keyframes pathLight{
  0%{stroke-dashoffset:1;opacity:.02}
  28%{opacity:var(--activation,.65)}
  100%{stroke-dashoffset:0;opacity:var(--activation,.65)}
}

.constellation-stars circle{
  fill:var(--ink);
  opacity:.82;
  transition:opacity .8s ease,fill .65s ease,transform .55s ease;
  transform-box:fill-box;
  transform-origin:center;
}

.constellation-stars circle.pulse{
  fill:var(--green);
  animation:starPulse .78s ease;
}

/* Use individual scale so existing responsive transform sizing is preserved. */
@keyframes starPulse{
  0%,100%{scale:1}
  50%{scale:1.5}
}

.orbit-particle{
  fill:var(--ink);
  opacity:.13;
}

.orbit-particle.anchor{
  fill:var(--green);
  opacity:.38;
}

body.phase-full .constellation-stars circle{opacity:.94}
body.phase-half .constellation-stars circle:nth-child(even){opacity:.30}
body.phase-half .constellation-stars circle:nth-child(odd){opacity:.80}
body.phase-none .constellation-stars circle{opacity:.21}
body.phase-none .constellation-stars circle:nth-child(-n+2){opacity:.46}

@media(prefers-reduced-motion:reduce){
  .constellation-lines line.is-active,
  .constellation-stars circle.pulse{
    animation-duration:.001ms!important;
  }
}


/* =========================================================
   INTERACTION POLISH — constellation / cursor / trust panel only
   Homepage composition and responsive geometry are unchanged.
   ========================================================= */

/* Electrical wiring language.
   The network remains legible at rest; activation behaves like current moving
   through a circuit rather than a line simply changing colour. */
.constellation-lines line{
  stroke:rgba(17,17,17,.72)!important;
  stroke-width:.58!important;
  opacity:.105!important;
  stroke-linecap:round!important;
  vector-effect:non-scaling-stroke;
  transition:opacity .5s ease,stroke .5s ease,stroke-width .5s ease!important;
}

.constellation-lines line.is-active{
  stroke:var(--green)!important;
  stroke-width:.88!important;
  stroke-dasharray:none!important;
  stroke-dashoffset:0!important;
  opacity:calc(.46 + (var(--activation,.65) * .42))!important;
  filter:none!important;
  animation:circuitSettle .82s cubic-bezier(.16,.8,.24,1) forwards!important;
}

@keyframes circuitSettle{
  0%{opacity:.10;stroke-width:.58}
  34%{opacity:1;stroke-width:1.08}
  100%{opacity:calc(.46 + (var(--activation,.65) * .42));stroke-width:.88}
}

/* Resting nodes are junctions, not dominant black dots. */
.constellation-stars circle{
  fill:rgba(17,17,17,.78)!important;
  opacity:.48!important;
}
body.phase-full .constellation-stars circle{opacity:.66!important}
body.phase-half .constellation-stars circle:nth-child(even){opacity:.34!important}
body.phase-half .constellation-stars circle:nth-child(odd){opacity:.58!important}
body.phase-none .constellation-stars circle{opacity:.25!important}
body.phase-none .constellation-stars circle:nth-child(-n+2){opacity:.42!important}

.constellation-signals{
  pointer-events:none;
  overflow:visible;
}

/* A short bright packet runs over the persistent wire. */
.constellation-signals line{
  stroke:#39b77c;
  stroke-width:1.7;
  stroke-linecap:round;
  fill:none;
  opacity:0;
  stroke-dasharray:.075 .925;
  stroke-dashoffset:1;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 1.6px rgba(57,183,124,.72)) drop-shadow(0 0 5px rgba(11,106,70,.24));
}

.constellation-signals line.is-travelling{
  animation:electricPacket .64s linear forwards;
}

@keyframes electricPacket{
  0%{stroke-dashoffset:1;opacity:0;stroke-width:1.2}
  8%{opacity:.72}
  36%{opacity:1;stroke-width:2.05}
  72%{opacity:.94;stroke-width:1.72}
  100%{stroke-dashoffset:-.075;opacity:0;stroke-width:1.25}
}

/* Moving current head. JS places this directly on each activated wire. */
.circuit-spark{
  fill:#52c98f;
  opacity:0;
  pointer-events:none;
  transform-box:fill-box;
  transform-origin:center;
  filter:drop-shadow(0 0 2px rgba(82,201,143,.95)) drop-shadow(0 0 7px rgba(11,106,70,.38));
}
.circuit-spark.is-live{opacity:1}

.constellation-stars circle.pulse{
  fill:var(--green)!important;
  opacity:1!important;
  filter:drop-shadow(0 0 1.5px rgba(11,106,70,.48))!important;
  animation:junctionCharge .56s cubic-bezier(.12,.75,.2,1)!important;
}

@keyframes junctionCharge{
  0%{scale:1}
  28%{scale:1.5}
  52%{scale:.96}
  72%{scale:1.18}
  100%{scale:1}
}

/* Restore the original portfolio cursor dot on fine-pointer devices only. */
.cursor-dot{
  opacity:0;
}
body.cursor-ready .cursor-dot{
  opacity:1;
}
@media (hover:hover) and (pointer:fine){
  .cursor-dot{
    display:block;
  }
}
@media (hover:none), (pointer:coarse){
  .cursor-dot{
    display:none!important;
  }
}

/* Desktop How-this-works must be allowed to become document content.
   Normal homepage remains unchanged; scrolling is enabled only while open. */
@media (min-width:901px){
  html.trust-panel-open,
  body.trust-panel-open{
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  body.trust-panel-open .page,
  body.trust-panel-open main{
    height:auto!important;
    min-height:100vh!important;
    overflow:visible!important;
  }

  body.trust-panel-open .layout,
  body.trust-panel-open .hero{
    overflow:visible!important;
  }

  body.trust-panel-open .digital-navjot-stage,
  body.trust-panel-open .digital-navjot-stage .agent-panel,
  body.trust-panel-open .digital-navjot-stage .trust-panel{
    overflow:visible!important;
    max-height:none!important;
  }

  body.trust-panel-open .digital-navjot-stage .trust-panel{
    padding-bottom:28px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .constellation-lines line.is-active,
  .constellation-signals line.is-travelling,
  .constellation-stars circle.pulse{
    animation-duration:.001ms!important;
  }
  .cursor-dot{display:none!important}
}






/* OFF SIGNAL discovery — persistent top beacon */
.digital-navjot-stage{
  position:absolute;
}

.off-signal-beacon{
  position:absolute;
  z-index:14;
  left:34.8%;
  top:13.5%;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
  outline:none;
}

.off-signal-beacon-core{
  position:absolute;
  left:50%;
  top:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#745C78;
  transform:translate(-50%,-50%);
  opacity:.58;
  box-shadow:0 0 0 0 rgba(116,92,120,.22);
  animation:offSignalBeacon 2.8s ease-in-out infinite;
}

.off-signal-beacon:hover .off-signal-beacon-core,
.off-signal-beacon.is-open .off-signal-beacon-core{
  opacity:1;
  transform:translate(-50%,-50%) scale(1.18);
  box-shadow:0 0 0 8px rgba(116,92,120,.14);
}

/* Never show the browser's blue focus ring; use the site's green language. */
.off-signal-beacon:focus,
.off-signal-beacon:focus-visible{
  outline:none;
}

.off-signal-beacon:focus-visible::after{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid #745C78;
  border-radius:50%;
  box-shadow:0 0 0 3px rgba(116,92,120,.14);
}

@keyframes offSignalBeacon{
  0%,100%{
    opacity:.42;
    transform:translate(-50%,-50%) scale(.92);
    box-shadow:0 0 0 0 rgba(116,92,120,.14);
  }
  50%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.32);
    box-shadow:0 0 0 9px rgba(11,79,49,.055);
  }
}

.off-signal-reveal{
  position:absolute;
  z-index:15;
  right:4%;
  top:22%;
  width:min(230px,44%);
  padding:13px 0 0;
  border-top:1px solid rgba(11,79,49,.4);
  opacity:0;
  transform:translateY(7px);
  transition:opacity .25s ease,transform .25s ease;
  pointer-events:auto;
}

.off-signal-reveal.is-visible{
  opacity:1;
  transform:none;
}

.off-signal-reveal span,
.off-signal-reveal small,
.off-signal-reveal strong{
  display:block;
}

.off-signal-reveal span{
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
  color:var(--green);
}

.off-signal-reveal strong{
  margin-top:7px;
  font-size:13px;
  line-height:1.25;
}

.off-signal-reveal small{
  margin-top:3px;
  font-size:11px;
  color:rgba(17,17,17,.58);
}

.off-signal-reveal a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  color:var(--green);
  text-decoration:none;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  -webkit-tap-highlight-color:transparent;
}

.off-signal-reveal a:focus,
.off-signal-reveal a:focus-visible{
  outline:none;
}

.off-signal-reveal a:focus-visible{
  box-shadow:0 2px 0 var(--green);
}

.off-signal-reveal svg{
  width:10px;
  height:10px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
}

/* Stage itself is non-interactive, but the beacon/reveal remain clickable. */
.digital-navjot-stage{
  pointer-events:none;
}
.off-signal-beacon,
.off-signal-reveal,
.off-signal-reveal *{
  pointer-events:auto;
}

@media(max-width:900px){
  .off-signal-beacon{
    left:35%;
    top:10%;
    width:48px;
    height:48px;
  }

  .off-signal-reveal{
    right:6%;
    top:17%;
    width:210px;
  }
}

@media(max-width:560px){
  .off-signal-beacon{
    left:34%;
    top:8%;
    width:52px;
    height:52px;
  }

  .off-signal-beacon-core{
    width:7px;
    height:7px;
  }

  .off-signal-reveal{
    right:4%;
    top:16%;
    width:min(210px,58%);
    padding-top:10px;
  }

  .off-signal-reveal strong{
    font-size:12px;
  }
}

@media(max-width:390px){
  .off-signal-beacon{
    left:33%;
    top:7%;
  }

  .off-signal-reveal{
    top:15%;
    width:min(205px,62%);
  }
}

@media(prefers-reduced-motion:reduce){
  .off-signal-beacon-core{
    animation:none;
    opacity:.9;
  }

  .off-signal-reveal{
    transition:none;
  }
}


/* =========================================================
   PRODUCTION MOBILE HOTFIX — OFF SIGNAL beacon + ask arrow
   Final-authority overrides only.
   ========================================================= */

/* Real SVG icon: never let iOS/browser native glyph styling leak through. */
.digital-navjot-stage .ask-form #askButton{
  color:#f6f5ef!important;
  background:#050505!important;
  border:0!important;
  -webkit-appearance:none!important;
  appearance:none!important;
  -webkit-tap-highlight-color:transparent!important;
}
.digital-navjot-stage .ask-form #askButton::before{
  content:none!important;
  display:none!important;
}
.digital-navjot-stage .ask-form #askButton .ask-button-icon{
  display:block!important;
  width:18px!important;
  height:18px!important;
  overflow:visible!important;
  pointer-events:none!important;
  color:#f6f5ef!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.55!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.digital-navjot-stage .ask-form #askButton:focus,
.digital-navjot-stage .ask-form #askButton:focus-visible{
  outline:none!important;
}
.digital-navjot-stage .ask-form #askButton:focus-visible{
  box-shadow:0 0 0 2px #f7f7f3,0 0 0 4px var(--green)!important;
}

/* Beacon must sit above the visual AND agent on touch layouts. */
.off-signal-beacon{
  isolation:isolate!important;
  touch-action:manipulation!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}

/* Give the tiny visible point a large invisible hit halo. */
.off-signal-beacon::before{
  content:""!important;
  position:absolute!important;
  inset:-8px!important;
  border-radius:50%!important;
  background:transparent!important;
  pointer-events:auto!important;
}

@media (hover:none), (pointer:coarse), (max-width:900px){
  .digital-navjot-stage{
    pointer-events:none!important;
  }

  .off-signal-beacon{
    z-index:60!important;
    width:64px!important;
    height:64px!important;
    min-width:64px!important;
    min-height:64px!important;
    pointer-events:auto!important;
  }

  .off-signal-beacon-core{
    width:9px!important;
    height:9px!important;
    opacity:.9!important;
    pointer-events:none!important;
  }

  /* The visual SVG can never steal the tap. */
  .digital-navjot-visual,
  #geminiSvg,
  .constellation-lines,
  .constellation-stars{
    pointer-events:none!important;
  }

  /* Agent stays interactive despite the stage being transparent to events. */
  .digital-navjot-stage .agent-panel,
  .digital-navjot-stage .agent-panel *{
    pointer-events:auto;
  }

  /* Mobile tap goes directly to OFF SIGNAL, so the reveal card is desktop-only. */
  .off-signal-reveal{
    pointer-events:none!important;
  }
}

@media(max-width:560px){
  .off-signal-beacon{
    left:34%!important;
    top:8%!important;
  }
}

@media(max-width:390px){
  .off-signal-beacon{
    left:33%!important;
    top:7%!important;
  }
}


/* Mobile link-color regression fix */
.topbar a,
.topbar a:link,
.topbar a:visited,
.signal-link,
.signal-link:link,
.signal-link:visited,
.signal-link *,
.signal-link svg,
.selected-work-link,
.selected-work-link:link,
.selected-work-link:visited{
  color:inherit!important;
  text-decoration:none;
}

.signal-link svg,
.signal-link svg path,
.selected-work-arrow svg,
.selected-work-arrow svg path{
  stroke:currentColor!important;
  fill:none!important;
}

/* Preserve the intentional green accent rather than browser blue. */
.signal-link .signal-link-arrow,
.signal-link .signal-link-arrow svg{
  color:var(--green)!important;
}

@media (hover:none), (pointer:coarse){
  a,
  button{
    -webkit-tap-highlight-color:transparent;
  }
}


/* Exact homepage micro-footer Signal arrow fix.
   Do not use the Unicode ↗ glyph: iOS can render it as an emoji/native blue symbol. */
.digital-navjot-stage .micro-footer .micro-link{
  display:inline-flex!important;
  align-items:center!important;
  gap:4px!important;
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
}
.digital-navjot-stage .micro-footer .micro-link .micro-link-arrow{
  display:block!important;
  width:11px!important;
  height:11px!important;
  flex:0 0 11px!important;
  overflow:visible!important;
  color:var(--green)!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.15!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  pointer-events:none!important;
}