/* digitalpratik.com SITE SKIN (Digital Pratik, 2 Nov 2026: "change all the pages according to our new theme").
   Loaded LAST on every page, after the template CSS (assets/ks/style.css, blog.css, notes.css, projects.css),
   and only fires under body.hv2. It moves the whole site to the new home page look: cream dotted paper, navy ink,
   the brand blue, yellow buttons with a hard ink shadow, ink-bordered cards, Caveat labels, his photos as taped
   polaroids and a comic sticker of him on each page top. Delete the link and every page is back as it was. */
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/caveat600-normal-latin.woff2') format('woff2')}

body.hv2{
  --paper:#FBFAF6;--paper-2:#F3F0E8;--ink:#16182B;--muted:#4F5263;--line:rgba(19,22,40,.16);
  --bar:rgba(251,250,246,.94);--menu:#FBFAF6;--field:#FFFFFF;--field-focus:#FFFFFF;
  --hv-card:#FFFFFF;--hv-line:#16182B;--hv-shadow:#16182B;--hv-yel:#F6D234;--hv-blue:#2E6BD3;
  --hv-dot:rgba(19,22,40,.10);--hv-hand:'Caveat',cursive;
  background-color:var(--paper);
  background-image:radial-gradient(var(--hv-dot) 1.2px,transparent 1.2px);background-size:22px 22px;
}
html[data-theme="dark"] body.hv2{
  --paper:#070707;--paper-2:#0E1320;--ink:#F8F8F8;--muted:#B4B9C6;--line:rgba(255,255,255,.14);
  --bar:rgba(7,7,7,.92);--menu:#141414;--field:#141A2A;--field-focus:#18203A;
  --hv-card:#141A2A;--hv-line:rgba(248,248,248,.82);--hv-shadow:#2E6BD3;--hv-dot:rgba(255,255,255,.07);
}
body.hv2 .tint{background:var(--paper-2)}
html[data-theme="dark"] body.hv2 .tint{background:var(--paper-2)}

/* ---------- header: cream bar, ink rule, yellow door. Logo and menu untouched ---------- */
body.hv2 header.site{background:var(--paper);border-bottom:2px solid var(--hv-line)}
body.hv2 header.site .nav-cta .btn-primary{background:var(--hv-yel);color:#16182B;border:2px solid #16182B;box-shadow:3px 3px 0 #16182B}
html[data-theme="dark"] body.hv2 header.site .nav-cta .btn-primary{box-shadow:3px 3px 0 #F8F8F8}
body.hv2 .call-float{background:var(--hv-yel);color:#16182B;border:2px solid #16182B;box-shadow:3px 3px 0 #16182B}
body.hv2 .call-float svg{stroke:#16182B}

/* ---------- buttons ---------- */
body.hv2 .btn-primary,body.hv2 .on-dark .btn-primary{background:var(--hv-yel);color:#16182B;border:2px solid #16182B;box-shadow:4px 4px 0 #16182B;font-weight:800}
body.hv2 .btn-primary:hover,body.hv2 .on-dark .btn-primary:hover{background:var(--hv-yel);transform:translate(-2px,-2px);box-shadow:6px 6px 0 #16182B}
html[data-theme="dark"] body.hv2 .btn-primary{box-shadow:4px 4px 0 #F8F8F8}
body.hv2 .btn-primary svg{stroke:#16182B}
body.hv2 .btn-ghost{background:var(--hv-card);color:var(--ink);border:2px solid var(--hv-line);box-shadow:4px 4px 0 var(--hv-shadow);font-weight:800}
body.hv2 .btn-ghost:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--hv-shadow)}
body.hv2 .on-dark .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7);box-shadow:4px 4px 0 rgba(0,0,0,.35)}

/* ---------- section labels become handwritten notes ---------- */
body.hv2 .eyebrow{font-family:var(--hv-hand);font-weight:600;font-size:27px;letter-spacing:0;text-transform:none;color:var(--hv-blue);transform:rotate(-2.5deg);line-height:1.1}
body.hv2 .eyebrow::before,body.hv2 .eyebrow::after{display:none}
html[data-theme="dark"] body.hv2 .eyebrow{color:#5E92E8}
body.hv2 .on-dark .eyebrow{color:var(--hv-yel)}
/* in a page top the label is a white pill with an ink edge, like the home page */
body.hv2 .eyebrow.on-photo{display:inline-flex;align-items:center;gap:9px;font-family:var(--font);font-size:14px;font-weight:800;color:var(--ink);background:var(--hv-card);border:2px solid var(--hv-line);border-radius:999px;padding:7px 16px;box-shadow:3px 3px 0 var(--hv-shadow);transform:none}
body.hv2 .eyebrow.on-photo::before{display:block;content:'';width:9px;height:9px;border-radius:50%;background:var(--hv-blue);flex:none}

/* ---------- page tops: cream paper, ink words, his photo as a taped polaroid ---------- */
body.hv2 .page-hero{background:transparent;color:var(--ink);border-bottom:2px solid var(--hv-line)}
body.hv2 .page-hero h1{color:var(--ink)}
body.hv2 .page-hero h1 em{color:var(--hv-blue)}
html[data-theme="dark"] body.hv2 .page-hero h1 em{color:#5E92E8}
body.hv2 .page-hero p,body.hv2 .hero-split .hs-copy>p{color:var(--muted)}
body.hv2 .crumbs{color:var(--muted)}
body.hv2 .crumbs b{color:var(--ink)}
body.hv2 .crumbs a:hover{color:var(--hv-blue)}
body.hv2 .hero-split .hs-photo{overflow:visible;display:flex;align-items:center;justify-content:center;padding:56px 40px 56px 60px;min-height:0}
body.hv2 .hero-split .hs-photo::before{display:none}
body.hv2 .hero-split .hs-photo img:not(.hv-pt){position:relative;inset:auto;width:100%;max-width:400px;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;background:#fff;border:12px solid #fff;border-bottom-width:52px;border-radius:4px;transform:rotate(2deg);box-shadow:0 22px 44px -20px rgba(19,22,40,.5),0 2px 6px rgba(19,22,40,.14);-webkit-mask-image:none;mask-image:none;left:auto;right:auto}
body.hv2 .hv-pol{position:relative;display:block;width:100%;max-width:400px}
body.hv2 .hv-pol picture{display:block}
body.hv2 .hv-tape-pt{position:absolute;top:-12px;left:50%;width:96px;height:26px;margin-left:-40px;background:rgba(246,210,52,.82);transform:rotate(-4deg);z-index:3}
body.hv2 .hero-split .hs-photo img.hv-pt{position:absolute;inset:auto;top:auto;right:auto;z-index:4;width:150px;height:auto;max-width:none;object-fit:contain;left:4px;bottom:24px;filter:drop-shadow(0 10px 14px rgba(19,22,40,.25));pointer-events:none}
html[data-theme="dark"] body.hv2 .hero-split .hs-photo img.hv-pt{filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}
@media (prefers-reduced-motion:no-preference){body.hv2 .hv-pt{animation:hvBob 5.5s ease-in-out infinite}@keyframes hvBob{0%,100%{translate:0 0}50%{translate:0 -7px}}}
@media (max-width:1020px){
  body.hv2 .hero-split .hs-photo{order:0;aspect-ratio:auto;height:auto;max-height:none;padding:20px 20px 44px 96px}
  body.hv2 .hero-split .hs-photo img:not(.hv-pt){max-width:320px;border-width:10px;border-bottom-width:40px}
  body.hv2 .hv-pol{max-width:320px}
  body.hv2 .hero-split .hs-photo img.hv-pt{width:118px;left:max(0px,calc(50% - 230px));bottom:14px}
}
@media (max-width:640px){
  body.hv2 .hero-split .hs-photo{padding:14px 10px 40px 84px}
  body.hv2 .hero-split .hs-photo img:not(.hv-pt){max-width:250px}
  body.hv2 .hv-pol{max-width:250px}
  body.hv2 .hero-split .hs-photo img.hv-pt{width:96px;left:6px}
}

/* ---------- cards get an ink edge and a hard shadow ---------- */
body.hv2 .card,body.hv2 .faq-item,body.hv2 .side-box,body.hv2 .sw-row,body.hv2 .notfor,body.hv2 .form-card,body.hv2 .plan:not(.fill),body.hv2 .step,body.hv2 .office{background:var(--hv-card);border:2px solid var(--hv-line);border-radius:16px;box-shadow:6px 6px 0 var(--hv-shadow)}
body.hv2 a.card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--hv-shadow)}
body.hv2 .on-dark .card{background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.5);box-shadow:5px 5px 0 rgba(0,0,0,.35)}
body.hv2 .faq-item{box-shadow:4px 4px 0 var(--hv-shadow)}
body.hv2 .faq-item[open]{border-color:var(--hv-line);box-shadow:4px 4px 0 var(--hv-shadow)}
body.hv2 .faq-item summary .pm{background:var(--hv-yel);color:#16182B;border:2px solid #16182B}
body.hv2 .faq-item[open] summary .pm{background:var(--hv-yel);border-color:#16182B;color:#16182B}
body.hv2 .pcard img{border-bottom:2px solid var(--hv-line)}
body.hv2 .story-n{font-family:var(--hv-hand);font-size:22px;letter-spacing:0;text-transform:none;color:var(--hv-blue)}

/* the navy signature cards keep their navy and gain the yellow shadow */
body.hv2 .answer-nv{border:2px solid #16182B;box-shadow:8px 8px 0 var(--hv-yel)}
body.hv2 .svc-side .side-box h4{background:var(--dark)}
/* the contact page's first card is a navy card with white words; the white card rule above hid them (his catch, 3 Nov) */
body.hv2 .office.office-main{background:linear-gradient(150deg,#1E4A96 0%,#133875 55%,#0B2450 100%);border:2px solid #16182B;box-shadow:8px 8px 0 var(--hv-yel)}
body.hv2 .office.office-main h3,body.hv2 .office.office-main p,body.hv2 .office.office-main h3 svg{color:#fff}
body.hv2 .office.office-main a{color:var(--hv-yel);font-weight:800;text-decoration:underline;text-underline-offset:4px}
body.hv2 .office.office-main .wmark{color:rgba(255,255,255,.06)}
/* the "A good fit" card (about, contact): navy with white words, same reason */
body.hv2 .card.fit-yes{background:linear-gradient(150deg,#1E4A96 0%,#133875 55%,#0B2450 100%);border:2px solid #16182B;box-shadow:8px 8px 0 var(--hv-yel)}
body.hv2 .card.fit-yes h3,body.hv2 .card.fit-yes .fit-list b{color:#fff}
body.hv2 .card.fit-yes .fit-list li,body.hv2 .card.fit-yes .fit-list span{color:rgba(255,255,255,.92)}
body.hv2 .card.fit-yes .fit-tag{background:var(--hv-yel);color:#16182B;border:2px solid #16182B}

/* project page tops: the two ticks under the buttons were white for the old dark top */
body.hv2 .hero-badges{color:var(--ink)}
body.hv2 .hero-badges svg{color:var(--hv-blue)}
html[data-theme="dark"] body.hv2 .hero-badges svg{color:#5E92E8}

/* the navy strip above the header: smaller words (his ask, 3 Nov) */
body.hv2 .topbar{font-size:14.5px}
body.hv2 .topbar svg{width:13px;height:13px}

/* full width navy bands and the closing photo band stay navy (the brand signature) */
body.hv2 .on-dark h2 em{color:var(--hv-yel)}
body.hv2 .cta-band h2 em{color:var(--hv-yel)}

/* forms */
body.hv2 .nl-form input:not([type=hidden]),body.hv2 .field input,body.hv2 .field textarea,body.hv2 .field select{border:2px solid var(--hv-line);border-radius:12px}

/* talks slider arrows */
body.hv2 .talks-a button{border:2px solid var(--hv-line);background:var(--hv-card);color:var(--ink);box-shadow:3px 3px 0 var(--hv-shadow)}

/* the blog search box was 6px wider than a 360px phone on the live site too; keep it inside the screen */
body.hv2 .bh-search{max-width:100%;min-width:0;box-sizing:border-box}
body.hv2 .bh-search input{min-width:0;width:100%}

/* THE DROPDOWNS IN THE NEW THEME (his ask, 3 Nov 2026: the beige taped notes and grey sketches no longer fit).
   Topics become pill buttons, the newest editions sit on the navy signature card as clean white cards with each
   article's own photo, the services tabs become a yellow pill and the notes become framed cards. */
body.hv2 .mm-panel{background:var(--paper,#FAF8F3);border-top:2px solid var(--hv-line);border-bottom:2px solid var(--hv-line);box-shadow:0 30px 50px -30px rgba(0,0,0,.35)}
html[data-theme="dark"] body.hv2 .mm-panel{background:#0B0D14}
body.hv2 .mm-k{margin:0 0 2px}
body.hv2 .mm-k .hand,body.hv2 .mm-desk-h .hand{font-family:var(--hv-hand);font-size:26px;font-weight:600;line-height:1;color:var(--hv-blue);white-space:nowrap;transform:rotate(-2deg);display:inline-block}
html[data-theme="dark"] body.hv2 .mm-k .hand{color:#8FB4F0}
body.hv2 .mm-h.mm-h2{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink);padding-bottom:16px;border-bottom:2px solid var(--hv-line);margin-bottom:20px;white-space:nowrap}
body.hv2 .mm-catlist{display:flex;flex-wrap:wrap;gap:10px}
body.hv2 .mm-catlist a{display:inline-flex;align-items:center;padding:8px 16px;border:2px solid var(--hv-line);border-radius:999px;background:var(--hv-card);font-size:15px;font-weight:700;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
body.hv2 .mm-catlist a::before{content:none}
body.hv2 .mm-catlist a:hover{background:var(--hv-yel);color:#16182B;transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--hv-shadow)}
body.hv2 .mm-cats>.mm-all{margin-top:24px;padding:11px 20px;border:2px solid #16182B;border-radius:999px;background:var(--hv-yel);color:#16182B;box-shadow:4px 4px 0 #16182B;font-weight:800}
body.hv2 .mm-cats>.mm-all:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #16182B}
/* the newest editions: the navy signature card, the same in both themes */
body.hv2 .mm-recent.mm-desk{background:linear-gradient(150deg,#1E4A96 0%,#133875 55%,#0B2450 100%);border-left:2px solid #16182B;padding:28px 30px 32px}
body.hv2 .mm-desk::before{content:none}
body.hv2 .mm-desk-h.mm-new{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0 0 16px}
body.hv2 .mm-desk-h.mm-new .hand{color:var(--hv-yel)}
body.hv2 .mm-desk-h.mm-new b{font-size:22px;font-weight:800;letter-spacing:-.02em;color:#fff;white-space:nowrap}
body.hv2 .mm-note,body.hv2 .mm-slip{background:#fff;color:#16182B;border:2px solid #16182B;border-radius:12px;box-shadow:4px 4px 0 rgba(10,18,40,.55);transform:none;margin:0}
body.hv2 .mm-note{grid-template-columns:150px minmax(0,1fr);padding:10px 16px 10px 10px}
body.hv2 .mm-note::before{content:none}
body.hv2 .mm-slip:nth-child(3){transform:none;margin:0}
body.hv2 .mm-note img,body.hv2 .mm-slip img{border:0;border-radius:8px;object-fit:cover;object-position:60% 30%}
body.hv2 .mm-note img{width:150px;height:100px}
body.hv2 .mm-slip img{width:64px;height:48px}
body.hv2 .mm-note i,body.hv2 .mm-slip i{display:inline-block;padding:3px 8px;border-radius:999px;background:#EEF3FC;color:#1C4FA8;font-size:10px;margin-bottom:6px}
body.hv2 .mm-note .hand{color:#1C4FA8;font-size:20px}
body.hv2 .mm-note:hover,body.hv2 .mm-slip:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--hv-yel)}
/* services */
body.hv2 .mm-tabs{border-bottom:2px solid var(--hv-line)}
body.hv2 .mm-tab{border:2px solid transparent;border-radius:999px;padding:8px 18px;justify-self:center}
body.hv2 .mm-tab.on{background:var(--hv-yel);color:#16182B;border-color:#16182B;box-shadow:3px 3px 0 #16182B}
body.hv2 .mm-tab.on svg{color:#16182B}
body.hv2 .mm-sdesk{background-color:transparent;background-image:none;padding:6px 6px 8px;margin:0}
body.hv2 .mm-grid a.mm-snote,body.hv2 .mm-grid a.mm-snote:nth-child(2),body.hv2 .mm-grid a.mm-snote:nth-child(3){background:#fff;color:#16182B;border:2px solid #16182B;border-radius:12px;box-shadow:4px 4px 0 var(--hv-shadow);transform:none;padding:8px 8px 12px;margin-top:0}
body.hv2 .mm-snote::before{content:none}
body.hv2 .mm-snote img{border:0;border-radius:8px}
body.hv2 .mm-grid .mm-snote b{color:#16182B}
body.hv2 .mm-grid .mm-snote span{color:#4A5363}
body.hv2 .mm-grid a.mm-snote:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--hv-yel)}
body.hv2 .mm-grid a.mm-snote:hover b{color:#1C4FA8}

/* ---------- sign up boxes on a page top (his catch, 3 Nov 2026: in light the boxes showed nothing). The template
   made them white letters on a see-through box for its dark photo tops; the tops are paper now ---------- */
body.hv2 .page-hero .nl-form input:not([type=hidden]),body.hv2 .nl-hero .nl-form input:not([type=hidden]){background:var(--field);color:var(--ink);border:2px solid var(--hv-line)}
body.hv2 .page-hero .nl-form input::placeholder,body.hv2 .nl-hero .nl-form input::placeholder{color:var(--muted);opacity:1}

/* ---------- article headlines on the smallest phones (found by the 3 Nov 2026 sweep): "Entrepreneurship College"
   is kept together so no word sits alone, and at the template's 32px floor the pair was 26px wider than a 360px
   phone, so the page scrolled sideways. A touch smaller on phones up to 380px ---------- */
@media(max-width:380px){body.hv2 .article-head h1{font-size:min(29px,7.4vw)}}


/* ---------- more room at the sides on phones (his ask, 3 Nov 2026: "the text on the mobile looks way too much on the
   left"). The template kept 4% each side, about 16px on a phone; now 24px. Swipe rows still reach the screen edge ---------- */
@media(max-width:720px){
  body.hv2 .wrap{width:calc(100% - 48px)}
  body.hv2 .swipe-m,body.hv2 .sw-chips{margin-inline:-24px;padding-inline:24px;scroll-padding-inline:24px}
  body.hv2 .hv-swipe{margin:0 -24px;padding-left:24px;padding-right:24px}
}

/* the header on the smallest phones (found by the 3 Nov 2026 check after the wider sides): logo, theme and menu
   buttons need 303px, so the spacing tightens under 360px and under 340px the header alone keeps 16px sides */
@media(max-width:360px){body.hv2 header.site .wrap{gap:10px}body.hv2 header.site .nav-cta{gap:6px}}
@media(max-width:340px){body.hv2 header.site .wrap{width:calc(100% - 32px)}}
/* the video cards on /about: two side by side left 77px for the words on a phone and clipped them; one per row */
@media(max-width:480px){body.hv2 .vid2{grid-template-columns:1fr}}
/* the edition headlines on the smallest phones (same reason as the article headlines above): "between meetings."
   at 32px was wider than a 320px phone; they scale down under 364px */
@media(max-width:380px){body.hv2 .art-hero h1{font-size:min(32px,8.8vw)}}
/* the project tiles on /projects swipe sideways on a phone; at 320px a tile left 139px for its name and
   "Entrepreneurship" needs 163px, so on the smallest phones each tile is wider */
@media(max-width:360px){body.hv2 .lv.swipe-m>*{flex-basis:78%}}

/* NO CALL TO ACTION on the 2 pages the booking form lands on (6 Nov 2026): the reader has just asked for the
   call, so the menu button, the corner button and the phone notes button all go. The theme switch stays. */
body.no-cta header.site .btn,body.no-cta .m-nav .btn,body.no-cta .call-float,body.no-cta .notes-float,body.no-cta .nf-tip{display:none!important}