/* JustDinesh: base styles lifted from the Claude Design <helmet> blocks.
   Most styling lives inline in the views, exactly as exported. */
html,body{margin:0;padding:0;background:#fff;color:#000;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body.jd-audit{background:#F5F5F5}
*{box-sizing:border-box}
a{color:#D4140F;text-decoration:none}a:hover{color:#F2701E}
input,textarea,select{font:inherit;color:#000}
summary{list-style:none;cursor:pointer}summary::-webkit-details-marker{display:none}
:focus-visible{outline:2px solid #D4140F;outline-offset:2px}
body.jd-home :focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px #000}

@keyframes jdUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes jdPop{from{opacity:0;transform:scale(.88) translateY(12px)}to{opacity:1;transform:none}}
@keyframes jdDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes jdBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes jdDot{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}
@keyframes jdSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}}

/* Inline styles set display, so these helpers must win over them. */
[hidden]{display:none!important}
@media (max-width:759px){.jd-wide{display:none!important}}
@media (min-width:760px){.jd-narrow{display:none!important}}
.jd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Hover states (design style-hover attributes). */
.hv-text-white:hover{color:#fff!important}
.hv-bg-mist:hover{background:#F5F5F5!important}
.hv-bg-red:hover{background:#B5100C!important}
.hv-bg-glass:hover{background:rgba(255,255,255,.14)!important}
.hv-invert:hover{background:#000!important;color:#fff!important}
.hv-bg-white:hover{background:#fff!important}
.hv-border-orange:hover{border-color:rgba(242,112,30,.6)!important}
.hv-link-orange:hover{border-color:#F2701E!important;color:#F2701E!important}
.hv-bg-glass-strong:hover{background:rgba(255,255,255,.2)!important}

/* Hero blend: repaints the hero gradient over the top edge of the video,
   then fades out, so the video's own background never shows a hard line.
   Same size as the hero, so the gradient lines up with the section exactly. */
.jd-hero-blend{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 80% at 78% 22%,#F57A22 0%,rgba(242,112,30,0) 65%),linear-gradient(96deg,#D4140F 0%,#D8200E 40%,#E64A10 68%,#F2701E 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(6% - 6px),transparent calc(6% + 30px));
  mask-image:linear-gradient(to bottom,#000 0,#000 calc(6% - 6px),transparent calc(6% + 30px))}

/* Size each hero video to its 16:9 footage, so the element edge is the footage edge
   and the top fade lands on it. Height-limited (typical desktop) renders exactly as designed;
   width-limited (mobile, narrow windows) shrinks the element instead of letterboxing. */
.jd-hero-video-box{container-type:size}
.jd-hero-video-box--right{left:0;display:flex;justify-content:flex-end}
.jd-hero-video{align-self:flex-end;aspect-ratio:16/9;width:min(100cqw,100cqh*16/9)!important;height:auto!important;max-width:none!important}
/* Mobile hero: the width-limited 16:9 video is small on phones, so enlarge it. */
.jd-narrow .jd-hero-video{zoom:2}

/* {JustDinesh} wordmark. One word; mono braces tie it to the site's code motif. */
.jd-logo{display:inline-flex;align-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;letter-spacing:-.035em;line-height:1;white-space:nowrap}
.jd-logo__brace{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:.96em;letter-spacing:0;color:#F2701E;transform:translateY(-.04em)}
.jd-logo__brace:first-child{margin-right:-.02em}
.jd-logo__brace:last-child{margin-left:0}
.jd-logo__just{color:#000}
.jd-logo__name{color:#F2701E}
.jd-logo--light .jd-logo__just{color:#fff}
.jd-logo--onred .jd-logo__just,.jd-logo--onred .jd-logo__name{color:#fff}
.jd-logo--onred .jd-logo__brace{color:rgba(255,255,255,.62)}

/* Home header: pinned once the hero has scrolled away, on a translucent
   red-to-orange blend of the hero gradient so content shows through tinted. */
.jd-site-header.is-stuck{position:fixed!important;padding-top:10px!important;padding-bottom:10px!important;
  background:linear-gradient(96deg,rgba(212,20,15,.94) 0%,rgba(216,32,14,.94) 40%,rgba(230,74,16,.94) 68%,rgba(242,112,30,.94) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 12px 32px -12px rgba(142,10,7,.45);
  animation:jdHeaderIn .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes jdHeaderIn{from{transform:translateY(-100%)}to{transform:none}}

/* Crossfade loop: both copies share one grid cell, bottom-aligned like the original flex box. */
.jd-hero-video-box--xfade{display:grid!important;align-items:end;justify-items:center}
.jd-hero-video-box--xfade.jd-hero-video-box--right{justify-items:end}
.jd-hero-video-box--xfade > .jd-hero-video{grid-area:1/1}

/* ---------- Work: device frames, cards, testimonials ---------- */
.jd-browser{border:1px solid #E6E6E6;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.08)}
.jd-browser__bar{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#F5F5F5;border-bottom:1px solid #E6E6E6}
.jd-browser__dots{display:flex;gap:5px;flex:none}.jd-browser__dots span{width:8px;height:8px;border-radius:50%;background:#D4140F}
.jd-browser__dots span:nth-child(2){background:#F2701E}.jd-browser__dots span:nth-child(3){background:#1A1A1A;opacity:.25}
.jd-browser__url{flex:1;min-width:0;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#1A1A1A;background:#fff;border-radius:999px;padding:3px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jd-browser img,.jd-phone img{display:block;width:100%;height:auto;background:#F5F5F5}
.jd-phone{width:100%;max-width:260px;border:10px solid #1A1A1A;border-radius:34px;overflow:hidden;background:#1A1A1A;box-shadow:0 18px 50px rgba(0,0,0,.18);position:relative}
.jd-phone::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:70px;height:18px;border-radius:999px;background:#1A1A1A;z-index:1}
.jd-phone img{border-radius:24px}
.jd-work-card{display:flex;flex-direction:column;gap:14px;color:#000;text-decoration:none}
.jd-work-card:hover{color:#000}.jd-work-card:hover .jd-browser{border-color:#F2701E}
.jd-work-card .jd-browser{transition:border-color .15s ease}
.jd-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.jd-tags li{font-family:'JetBrains Mono',monospace;font-size:11.5px;padding:3px 9px;border-radius:999px;border:1px solid #E6E6E6;color:#1A1A1A;background:#fff}
.jd-tst-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px) / 3);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
@media (max-width:959px){.jd-tst-row{grid-auto-columns:calc((100% - 16px) / 2)}}
@media (max-width:640px){.jd-tst-row{grid-auto-columns:86%}}
.jd-tst{scroll-snap-align:start;background:#fff;border:1px solid #E6E6E6;border-radius:18px;padding:22px 24px 24px;display:flex;flex-direction:column;gap:12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.jd-tst__head{display:flex;align-items:center;gap:12px}
.jd-tst__avatar{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;letter-spacing:-.02em}
.jd-tst__who{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.jd-tst__name{font-weight:600;font-size:15px;color:#000}
.jd-tst__role{font-size:12.5px;line-height:1.35;color:#5C5C5C}
.jd-tst__source{flex:none;align-self:flex-start;display:grid;place-items:center;width:28px;height:28px;border-radius:6px}
.jd-tst__source:hover{background:#F5F5F5}
.jd-tst__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.jd-tst__stars{display:flex;gap:1px}
.jd-tst__via{font-size:12.5px;color:#5C5C5C}
.jd-tst__quote{margin:0;font-size:15.5px;line-height:1.6;color:#1A1A1A}
.jd-tst__quote.is-clamped{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.jd-hl{font-weight:600;color:#C4520E}
.jd-tst__more{all:unset;cursor:pointer;font-size:14px;font-weight:600;color:#D4140F;align-self:flex-start}
.jd-tst__more:focus-visible{outline:2px solid #D4140F;outline-offset:2px}
.jd-rating{display:inline-flex;align-items:center;gap:12px;color:#000;text-decoration:none;padding:8px 16px 8px 12px;border-radius:999px;background:#fff;border:1px solid #E6E6E6}
.jd-rating:hover{color:#000;border-color:#F2701E}
.jd-rating__score{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:30px;letter-spacing:-.04em;line-height:1}
.jd-rating__detail{display:flex;flex-direction:column;gap:3px}
.jd-rating__count{font-size:12.5px;color:#5C5C5C}
.jd-chip{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(0,0,0,.35);background:transparent;color:#000;font-size:14px;font-weight:500;text-decoration:none;cursor:pointer}
.jd-chip:hover{background:#F5F5F5;color:#000}.jd-chip[aria-current="true"]{background:#000;border-color:#000;color:#fff}
@media (max-width:699px){.jd-shots{grid-template-columns:1fr!important}.jd-shots .jd-phone{max-width:220px}}