/* JorrDaar extras on top of the live digitalpratik.com theme (style.css + skin.css + home.css).
   Tokens are the live --hv-* ones. Hard offset shadows only. */

/* the wordmark badge, in the header, phone menu and footer */
.jd-brand{gap:10px}
.jd-badge,.kh-jd-badge{width:40px;height:40px;border-radius:11px;flex:none;display:inline-grid;place-items:center;background:#133875;color:#fff;border:2px solid #16182B;font-weight:800;font-size:15px;letter-spacing:-.02em;line-height:1;box-shadow:2px 2px 0 #F6D234}
html[data-theme="dark"] .jd-badge,html[data-theme="dark"] .kh-jd-badge{border-color:#F8F8F8}

/* hero */
.jd-hero{padding:56px 0 64px}
.jd-hero-g{display:grid;grid-template-columns:1.05fr .95fr;gap:40px 56px;align-items:center}
.jd-hero h1{font-size:clamp(36px,4.6vw,62px);line-height:1.06;font-weight:800;letter-spacing:-.03em;margin:22px 0 20px}
.jd-hero-solo{text-align:center}
.jd-hero-solo .hv-lead{margin:0 auto}
.jd-hero-art{position:relative;padding:18px 0 40px}
.jd-hero-art .hv-polar img{display:block;width:100%;height:auto}
.jd-hero-art .hv-polar figcaption{font-family:'Caveat',cursive;font-weight:600;font-size:22px;color:#16182B;text-align:center;padding:10px 0 12px}
.jd-hero-shot img{display:block;width:100%;height:auto;border-radius:0 0 10px 10px}
.jd-hero-shot figcaption{font-family:'Caveat',cursive;font-weight:600;font-size:21px;color:var(--hv-blue);text-align:center;padding:10px}
.jd-hero-art .jd-stamp{position:absolute;right:-18px;top:-34px;z-index:3}
.jd-hero-art > .jd-stamp:only-child{position:relative;right:auto;bottom:auto;margin:0 auto;width:220px;height:220px}
.jd-hero-art > .jd-stamp:only-child b{font-size:84px}
.jd-ctas .hv-btn-ghost{align-self:center}

/* the round stamp */
.jd-stamp{width:150px;height:150px;border-radius:50%;background:var(--hv-yel);color:#16182B;border:3px solid #16182B;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:800;line-height:1.05;transform:rotate(-8deg);box-shadow:5px 5px 0 #16182B;flex:none}
.jd-stamp b{display:block;font-size:54px;letter-spacing:-.03em;line-height:.95}
.jd-stamp span{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
html[data-theme="dark"] .jd-stamp{box-shadow:5px 5px 0 #F8F8F8}

/* the promise band */
.jd-promise{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center;background:#0B2450;background:var(--hv-navy);color:#fff;border:2px solid #16182B;border-radius:24px;box-shadow:8px 8px 0 var(--hv-yel);padding:48px 48px 44px}
.jd-promise h2{color:#fff!important;font-size:clamp(26px,3vw,38px);line-height:1.12;font-weight:800;letter-spacing:-.02em;margin:10px 0 22px}
.jd-promise h2 em{color:#F6D234;font-style:normal}
.jd-promise .hv-btn{margin-top:26px}
.jd-rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.jd-rules li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;font-size:16px;color:rgba(226,240,255,.92);line-height:1.45}
.jd-n{width:30px;height:30px;border-radius:50%;background:var(--hv-yel);color:#16182B;border:2px solid #16182B;display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px}

/* service tiles */
.jd-svc{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.jd-svc-c{display:flex;flex-direction:column;padding:16px 16px 22px;position:relative;color:var(--hv-ink)!important;transition:transform .12s ease,box-shadow .12s ease}
.jd-svc-c:hover{transform:translate(-2px,-2px)}
.jd-svc-c img{display:block;width:100%;height:auto;aspect-ratio:1024/688;object-fit:cover;border-radius:10px;border:2px solid var(--hv-line);margin-bottom:16px}
.jd-svc-c .hv-tag{padding:0 6px}
.jd-svc-c h3{font-size:20px;font-weight:800;letter-spacing:-.015em;line-height:1.2;padding:0 6px}
.jd-svc-c p{font-size:15.5px;color:var(--hv-mute);margin:6px 0 0;padding:0 6px}
.jd-svc-new{background:var(--hv-yel)!important;color:#16182B!important;border-color:#16182B!important;justify-content:center;padding:28px 24px}
.jd-svc-new .hv-tag,.jd-svc-new p{color:#16182B}
.jd-svc-new h3{font-size:26px}
.jd-new{position:absolute;top:-16px;right:18px;background:#16182B;color:#fff;font-weight:800;font-size:13px;padding:7px 12px;border-radius:10px;transform:rotate(-3deg);box-shadow:3px 3px 0 #133875}

/* icons in a square */
.jd-ico{width:56px;height:56px;border-radius:16px;display:inline-grid;place-items:center;background:var(--hv-cream);border:2px solid var(--hv-line);margin-bottom:14px;flex:none}
.jd-ico svg{width:32px;height:32px;color:var(--hv-ink)}
.jd-ico-y{background:#fff;border-color:#16182B}
.jd-ico-y svg{color:#16182B}

/* AI team */
.jd-ai{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.jd-ai-c{padding:26px 24px 24px;display:flex;flex-direction:column;align-items:flex-start}
.jd-ai-foot{margin-top:auto;width:100%;display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:2px dashed rgba(127,130,150,.3)}
.jd-ai-foot .jd-mind,.jd-ai-foot .jd-ai-note{margin:0!important}
.jd-ai-c p:not(.jd-ai-note){margin-bottom:16px}
.jd-ai-c h3{font-size:21px;font-weight:800;letter-spacing:-.015em}
.jd-ai-c p{font-size:15.5px;color:var(--hv-mute);margin-top:6px}
.jd-mind{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,max-content);gap:8px}
.jd-mind li{white-space:nowrap;font-size:13.5px;line-height:1;padding:7px 10px;border:2px solid var(--hv-line);border-radius:999px;background:var(--hv-cream);color:var(--hv-ink)}
.jd-mind b{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--hv-blue)}
.jd-ai-note{margin-top:12px!important;padding:8px 12px;border:2px dashed var(--hv-line);border-radius:12px;font-family:'JetBrains Mono',monospace;font-size:12.5px!important;line-height:1.5;color:var(--hv-ink)!important}
.jd-ai-note b{color:var(--hv-blue)}
.jd-mind li.more{border-style:dashed;background:transparent;color:var(--hv-mute)}

/* steps, facts, bring list, days */
.jd-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.jd-steps li{padding:34px 22px 22px;position:relative}
.jd-steps h3{font-size:19px;font-weight:800;line-height:1.2}
.jd-steps p{font-size:15px;color:var(--hv-mute);margin-top:8px}
.jd-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.jd-fact{padding:24px 22px;display:flex;flex-direction:column}
.jd-fact b{font-size:18px;font-weight:800}
.jd-fact span:last-child{font-size:15px;color:var(--hv-mute);margin-top:4px}
.jd-bring{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.jd-bring li{display:flex;align-items:center;gap:16px;padding:18px 20px}
.jd-bring .jd-ico{margin:0}
.jd-bring b{font-size:18px;font-weight:800}
.jd-days{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.jd-day{padding:0;overflow:hidden}
.jd-day-top{padding:18px 22px;background:var(--hv-yel);color:#16182B;border-bottom:2px solid var(--hv-line)}
.jd-day:nth-child(2) .jd-day-top{background:#2E6BD3;color:#fff}
.jd-day:nth-child(3) .jd-day-top{background:#133875;color:#fff}
.jd-day-top b{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em}
.jd-day-top span{display:block;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.jd-day ul{list-style:none;margin:0;padding:12px 22px 20px}
.jd-day li{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;padding:10px 0;border-top:1px dashed rgba(127,130,150,.35);font-size:16px}
.jd-day li:first-child{border-top:0}
.jd-ck{width:22px;height:22px;border-radius:6px;background:var(--hv-yel);border:2px solid #16182B;display:grid;place-items:center;margin-top:1px}
.jd-ck svg{width:13px;height:13px}

/* industries */
.jd-ind{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:920px}
.jd-ind li{background:var(--hv-card);border:2px solid var(--hv-line);border-radius:999px;padding:10px 18px;font-weight:700;font-size:15.5px;box-shadow:3px 3px 0 var(--hv-shadow)}

/* learn line */
.jd-learn{padding-top:0!important}
.jd-learn-line{text-align:center;font-size:18px;font-weight:600}
.jd-learn-line a{color:var(--hv-blue);font-weight:800;display:inline-flex;align-items:center;gap:6px}
.jd-learn-line svg{width:18px;height:18px}

@media (max-width:1120px){
  .jd-ai{grid-template-columns:1fr 1fr}
}
@media (max-width:1020px){
  .jd-hero-g{grid-template-columns:1fr}
  .jd-svc,.jd-ai,.jd-facts,.jd-bring{grid-template-columns:1fr 1fr}
  .jd-steps{grid-template-columns:1fr 1fr;gap:34px 22px}
  .jd-days{grid-template-columns:1fr}
  .jd-promise{grid-template-columns:1fr;justify-items:start;padding:40px 30px}
  .jd-rules{grid-template-columns:1fr}
}
@media (max-width:640px){
  .jd-ai{grid-auto-rows:auto}
  .jd-mind{display:flex;flex-wrap:wrap}
  .jd-hero{padding:34px 0 46px}
  .jd-svc,.jd-ai,.jd-facts,.jd-bring,.jd-steps{grid-template-columns:1fr}
  .jd-hero-art .jd-stamp{width:110px;height:110px;right:-4px;top:-30px}
  .jd-hero-art .jd-stamp b{font-size:38px}
  .jd-hero-art .jd-stamp span{font-size:8.5px}
  .jd-promise{padding:34px 22px}
  .jd-brand .wm{font-size:20px}
}

/* ===== PRIVACY POLICY (8 Nov 2026): numbered cards, label rows, tick lists. Same block in dp-slim/assets/home-v2/slim.css ===== */
.pp{max-width:860px;margin:0 auto;display:grid;gap:40px}
.hv .pp-date{margin-top:14px;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--hv-mute)}
.pp-short .hv-lined{margin:12px 0 0}
.pp-card{padding:34px 28px 26px}
.pp-card h2{font-size:clamp(21px,2.5vw,27px);line-height:1.2;font-weight:800;letter-spacing:-.02em;margin:0}
.hv .pp-card p{margin-top:12px;font-size:16.5px;line-height:1.6;color:var(--hv-ink)}
.pp-card a{color:var(--hv-blue);font-weight:700;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.pp-rows{margin-top:14px}
.pp-row{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:4px 22px;padding:13px 0;border-top:2px dashed var(--hv-line);font-size:16px;line-height:1.55;color:var(--hv-ink)}
.pp-row:first-child{border-top:0;padding-top:4px}
.pp-row b{font-weight:800}
.pp-li{list-style:none;margin:14px 0 0;padding:0}
.pp-li li{position:relative;padding:6px 0 6px 30px;font-size:16.5px;line-height:1.55;color:var(--hv-ink)}
.pp-li li::before{content:"";position:absolute;left:3px;top:13px;width:14px;height:8px;border-left:3px solid var(--hv-blue);border-bottom:3px solid var(--hv-blue);transform:rotate(-45deg)}
@media (max-width:640px){
  .pp{gap:34px}
  .pp-card{padding:30px 18px 20px}
  .pp-row{grid-template-columns:minmax(0,1fr);gap:2px}
}
.pp-short a{color:var(--hv-blue);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.jd-hero .pp-date{margin-top:18px}

/* 8 Nov 2026: the longer hero label (AI digital transformation) must never widen the hero past a phone screen */
.jd-hero-g>*{min-width:0}
.jd-hero .hv-pill{max-width:100%;white-space:normal;text-align:left;line-height:1.35}
@media (max-width:1020px){.jd-hero-g{grid-template-columns:minmax(0,1fr)}}

/* PHONE HERO (his word, 8 Nov 2026): no boxed label, one short line instead; Request Consultation stays the big button,
   See what we do is small and sits under it. */
.jd-kick-m{display:none}
@media (max-width:760px){
  .jd-hero .hv-pill:has(+ .jd-kick-m){display:none}
  .jd-hero .jd-kick-m{display:inline-block;font-size:24px;white-space:nowrap;margin:0 0 4px}
  .jd-hero h1{margin-top:6px}
  .jd-hero .jd-ctas{gap:14px}
  .jd-hero .jd-ctas .hv-btn-ghost{width:auto;align-self:center;font-size:15px;padding:10px 20px;border-radius:12px;box-shadow:3px 3px 0 var(--hv-shadow)}
}

/* 8 Nov 2026, his word: the big refund circle on the home hero was too loud. A small asterisk line under the
   screenshot instead. The stamp still marks the promise sections lower down. */
.hv .jd-ast{margin:34px 0 0;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.02em;line-height:1.5;color:var(--hv-mute);text-align:center}

/* 8 Nov 2026, his word: no floating "Request Consultation" corner button on desktop, the sticky top bar already has it.
   The top bar button shows from 1021px (style.css hides it at 1020px and under), so the corner button goes at the same
   width. Phones and tablets keep the round corner icon: their top bar has no button. */
@media (min-width:1021px){.call-float{display:none!important}}

/* 8 Nov 2026, his word: the "learn it first" line looked like a stray band of its own. It now sits under the navy
   card, inside the same section, as one short line and a small button. */
.jd-learn-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 18px;margin-top:44px;text-align:center}
.jd-learn-row span{font-size:17px;font-weight:700;color:var(--hv-ink)}
.jd-learn-row .hv-btn{width:auto;flex-direction:row;gap:8px;font-size:15px;padding:10px 18px;border-radius:12px;box-shadow:3px 3px 0 var(--hv-shadow)}
.jd-learn-row .hv-btn svg{width:16px;height:16px}
@media (max-width:640px){.jd-learn-row{flex-direction:column;margin-top:36px}}

/* 8 Nov 2026, his word: on desktop the top bar "Request Consultation" is WHITE (the card colour, so dark in dark mode)
   and turns yellow only on hover, so the sticky bar does not shout while people scroll. Phones are unchanged. */
@media (min-width:1021px){
  body.hv2 header.site .nav-cta .btn-primary,
  header .kh-btn-primary[href="/request-consultation"]{background:var(--hv-card,#fff)!important;color:var(--hv-ink,#16182B)!important;transition:background-color .15s ease,color .15s ease,transform .12s ease,box-shadow .12s ease}
  body.hv2 header.site .nav-cta .btn-primary svg,
  header .kh-btn-primary[href="/request-consultation"] svg{stroke:currentColor!important}
  body.hv2 header.site .nav-cta .btn-primary:hover,body.hv2 header.site .nav-cta .btn-primary:focus-visible,
  header .kh-btn-primary[href="/request-consultation"]:hover,header .kh-btn-primary[href="/request-consultation"]:focus-visible{background:var(--hv-yel,#F6D234)!important;color:#16182B!important}
}

/* 8 Nov 2026, his words for Who we are, on 3 lines: "The AI powered / growth marketing firm, / founded by Digital Pratik."
   Each line stays whole; the size steps down so the longest line fits a phone. */
.jd-hero h1.jd-who-h1{white-space:nowrap;font-size:clamp(22px,6.6vw,58px)}
@media (min-width:1021px){.jd-hero h1.jd-who-h1{font-size:clamp(34px,3.4vw,48px)}}
.jd-nw{white-space:nowrap}   /* "AI-run" never breaks at its hyphen (8 Nov 2026) */