/* =========================================================
   Home visual refresh — DESIGN ONLY
   No navigation, links, content, IDs or page structure changed.
   ========================================================= */

:root{
  --hm-navy:#06182f;
  --hm-navy-2:#092748;
  --hm-blue:#1678ff;
  --hm-cyan:#28a6ff;
  --hm-gold:#d5a04a;
  --hm-ink:#101828;
  --hm-text:#455468;
  --hm-muted:#6b778a;
  --hm-line:#e5ebf3;
  --hm-soft:#f5f8fc;
  --hm-soft-blue:#eef5fd;
  --hm-warm:#fbf7ef;
  --hm-white:#fff;
  --hm-radius:26px;
  --hm-shadow:0 18px 50px rgba(16,24,40,.08);
}

body{
  background:#fff;
  color:var(--hm-ink);
}

/* Shared vertical rhythm */
#about,
#brand-dna,
#portfolio,
#services,
#portfolio-other,
#publishing,
#articles,
.testmonial,
#contact{
  position:relative;
}

#about,
#brand-dna,
#portfolio,
#services,
#portfolio-other,
#articles,
.testmonial,
#contact{
  padding-top:82px !important;
  padding-bottom:82px !important;
}

.section-intro{
  max-width:760px !important;
  color:var(--hm-muted) !important;
  line-height:2 !important;
  margin-bottom:34px !important;
}

/* ---------------------------------------------------------
   HERO — dark executive panel, inspired by approved mockup
   --------------------------------------------------------- */
.hero-section.ai-hero{
  background:#fff !important;
  padding:28px 0 34px !important;
  overflow:visible !important;
}

#hero-network{
  display:none !important;
}

.hero-section.ai-hero .container{
  max-width:1200px;
}

.ai-hero-inner{
  position:relative;
  display:grid !important;
  grid-template-columns:minmax(0,1.06fr) minmax(340px,.94fr) !important;
  gap:42px !important;
  align-items:center !important;
  min-height:600px;
  padding:48px 54px !important;
  border-radius:30px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 78% 18%,rgba(40,166,255,.23),transparent 27%),
    radial-gradient(circle at 91% 78%,rgba(22,120,255,.13),transparent 25%),
    linear-gradient(135deg,var(--hm-navy) 0%,#08203d 58%,#06172d 100%);
  box-shadow:0 30px 72px rgba(6,24,47,.18);
}

.ai-hero-inner:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.32;
  background-image:
    linear-gradient(rgba(40,166,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(40,166,255,.08) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.78) 55%,#000 100%);
}

.ai-hero-content,
.ai-portrait-wrap{
  position:relative;
  z-index:2;
}

.ai-hero-content{
  text-align:right !important;
}

.ai-hero-content .eyebrow{
  background:rgba(22,120,255,.08) !important;
  border:1px solid rgba(40,166,255,.32);
  color:#a9d9ff !important;
  box-shadow:none !important;
}

.ai-hero-content .eyebrow:before{
  background:var(--hm-cyan) !important;
  box-shadow:0 0 0 5px rgba(40,166,255,.12) !important;
}

.ai-hero-content h1{
  color:#fff !important;
  font-size:clamp(48px,5vw,68px) !important;
  line-height:1.2 !important;
  margin:18px 0 5px !important;
  letter-spacing:-1.3px;
}

.ai-hero-content h1 span{
  color:#fff !important;
}

.ai-hero-content .hero-tagline{
  color:#fff !important;
  font-size:29px !important;
  line-height:1.6 !important;
  margin-bottom:15px !important;
}

.hero-positioning-sub{
  color:#2b9fff !important;
  font-size:.72em !important;
  margin-top:0 !important;
}

.ai-hero-content .paragraph{
  color:#d5e1ef !important;
  font-size:15px !important;
  line-height:2.1 !important;
  max-width:650px !important;
}

.hero-focus{
  margin:0 0 20px !important;
}

.hero-focus span{
  color:#d5e6f8 !important;
  background:rgba(255,255,255,.05) !important;
  border-color:rgba(255,255,255,.11) !important;
  box-shadow:none !important;
}

.hero-cta{
  margin:22px 0 16px !important;
}

.hero-cta .btn{
  border-radius:11px !important;
  min-width:145px;
  box-shadow:none !important;
}

.hero-cta .btn-blue{
  background:var(--hm-blue) !important;
  border-color:var(--hm-blue) !important;
}

.hero-cta .btn-black{
  background:transparent !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.36) !important;
}

.hero-cta .btn-black:hover{
  background:rgba(255,255,255,.08) !important;
}

.ai-hero-content .social{
  margin-top:10px;
}

.ai-hero-content .social img{
  filter:brightness(0) invert(1);
  opacity:.8;
}

.hero-stats{
  grid-template-columns:repeat(4,1fr) !important;
  gap:9px !important;
  margin-top:26px !important;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);
}

.stat-chip{
  min-width:0;
  padding:10px 8px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

.stat-chip strong{
  color:#fff !important;
  font-size:18px !important;
  margin-bottom:2px !important;
}

.stat-chip span{
  color:#aebfd3 !important;
  font-size:10px !important;
  line-height:1.7 !important;
}

.ai-portrait-wrap{
  flex:auto !important;
  padding:18px 12px 18px 20px;
}

.ai-portrait-wrap:before{
  content:"";
  position:absolute;
  width:93%;
  height:90%;
  border:2px solid rgba(39,145,255,.62);
  border-left-color:rgba(213,160,74,.82);
  border-radius:50%;
  right:1%;
  top:1%;
  transform:rotate(-11deg);
  z-index:0;
}

.ai-portrait-card{
  position:relative !important;
  z-index:1 !important;
  width:min(100%,430px) !important;
  max-width:430px !important;
  margin:0 auto !important;
  padding:0 !important;
  border:1px solid rgba(52,144,255,.44) !important;
  border-radius:28px !important;
  overflow:hidden !important;
  background:#fff !important;
  box-shadow:0 24px 64px rgba(0,0,0,.25) !important;
}

.ai-portrait-card img{
  width:100% !important;
  aspect-ratio:4/5 !important;
  height:auto !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center 31% !important;
  border-radius:27px !important;
  filter:saturate(.9) contrast(1.02);
}

.ai-portrait-glow,
.hero-floating-note{
  display:none !important;
}

/* ---------------------------------------------------------
   ABOUT — clean executive profile card
   --------------------------------------------------------- */
#about{
  background:#fff !important;
}

#about .about-inner{
  display:grid !important;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr) !important;
  gap:46px !important;
  align-items:center !important;
  padding:40px 44px !important;
  border:1px solid var(--hm-line);
  border-radius:28px;
  background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:var(--hm-shadow);
}

#about .about-col-left{
  display:flex;
  justify-content:center;
}

#about .about-col-left picture{
  position:relative;
  display:block;
  width:min(100%,300px);
  aspect-ratio:1/1;
  border-radius:50%;
  padding:4px;
  background:linear-gradient(145deg,var(--hm-blue),var(--hm-gold));
  box-shadow:0 18px 45px rgba(16,24,40,.12);
}

#about .about-col-left img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 27% !important;
  border-radius:50% !important;
  border:6px solid #fff;
}

#about .about-heading{
  font-size:36px !important;
  color:var(--hm-ink) !important;
  margin-bottom:4px !important;
}

#about .about2{
  color:var(--hm-blue) !important;
  font-size:20px !important;
  margin-bottom:16px !important;
}

#about .about3{
  color:var(--hm-text) !important;
  line-height:2.05 !important;
  font-size:14px !important;
}

#about .about-btn-blk{
  display:inline-block;
  margin:18px 0 0 8px !important;
}

#about .about-btn{
  border-radius:10px !important;
}

/* ---------------------------------------------------------
   BRAND DNA — soft blue separation
   --------------------------------------------------------- */
#brand-dna{
  background:linear-gradient(180deg,#f1f6fd,#f7faff) !important;
}

#brand-dna h2{
  color:var(--hm-ink) !important;
}

.dna-grid{
  gap:18px !important;
}

.dna-card{
  border:1px solid #dfe8f4 !important;
  border-radius:22px !important;
  padding:26px !important;
  box-shadow:0 12px 34px rgba(16,24,40,.05) !important;
}

.dna-card:hover{
  transform:translateY(-5px) !important;
  box-shadow:0 20px 42px rgba(16,24,40,.09) !important;
}

.dna-card .vector-icon{
  background:#edf5ff !important;
  border-color:#dbeaff !important;
}

/* ---------------------------------------------------------
   DOCUMENT CASE — dark emphasis
   --------------------------------------------------------- */
#document-digitization{
  padding:70px 0 !important;
  background:linear-gradient(135deg,#071a33,#0a2748) !important;
}

.document-case-card{
  border-radius:25px !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:none !important;
  background:rgba(255,255,255,.045) !important;
}

.document-case-link{
  border-radius:10px !important;
  background:var(--hm-blue) !important;
  color:#fff !important;
}

/* ---------------------------------------------------------
   PROJECTS — white cards, precise executive feel
   --------------------------------------------------------- */
#portfolio{
  background:#fff !important;
}

#portfolio > .container > h2,
#services > .container > h2,
#portfolio-other > .container > h2,
#articles > .container > h2,
.testmonial h2{
  color:var(--hm-ink);
  font-size:36px;
  margin-bottom:8px;
}

#portfolio .projects-inner{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:20px !important;
  align-items:stretch !important;
}

#portfolio .project-item{
  border:1px solid var(--hm-line) !important;
  border-radius:21px !important;
  background:#fff !important;
  box-shadow:0 12px 34px rgba(16,24,40,.055) !important;
  overflow:hidden !important;
  transition:transform .22s ease,box-shadow .22s ease !important;
}

#portfolio .project-item:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 48px rgba(16,24,40,.10) !important;
}

#portfolio .project-image{
  aspect-ratio:16/9;
  overflow:hidden;
  background:#edf2f7;
}

#portfolio .project-image img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  transition:transform .3s ease;
}

#portfolio .project-main-link:hover .project-image img{
  transform:scale(1.035);
}

#portfolio .project-content{
  padding:19px 19px 8px !important;
}

#portfolio .project-content h3{
  font-size:18px !important;
  line-height:1.65 !important;
  color:var(--hm-ink) !important;
  margin-bottom:10px !important;
}

#portfolio .project-role,
#portfolio .project-value{
  color:#59677a !important;
  font-size:12px !important;
  line-height:1.95 !important;
}

#portfolio .project-role strong,
#portfolio .project-value strong{
  color:#172033 !important;
}

#portfolio .project-intro-btn{
  border-radius:999px !important;
  border-color:#c8ddfb !important;
  background:#edf5ff !important;
  color:#0c67db !important;
  min-height:38px;
}

/* Popup keeps its existing behavior; only visual polish */
.project-dialog{
  border-radius:24px !important;
  box-shadow:0 30px 90px rgba(8,24,45,.32) !important;
}

/* ---------------------------------------------------------
   SERVICES — alternate soft background
   --------------------------------------------------------- */
#services{
  background:var(--hm-soft-blue) !important;
}

.services-inner.services-modern{
  gap:18px !important;
}

.services-modern .services-block{
  border-radius:21px !important;
  border-color:#dfe8f4 !important;
  box-shadow:0 12px 34px rgba(16,24,40,.05) !important;
}

/* ---------------------------------------------------------
   IDEA LAB — monochrome until hover, full content visible
   --------------------------------------------------------- */
#portfolio-other{
  background:#f6f8fb !important;
}

#portfolio-other .projects-inner{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important;
}

#portfolio-other .project-item{
  border:1px solid var(--hm-line) !important;
  border-radius:20px !important;
  background:#fff !important;
  box-shadow:0 10px 30px rgba(16,24,40,.045) !important;
  overflow:hidden !important;
  filter:grayscale(100%) !important;
  -webkit-filter:grayscale(100%) !important;
  transition:filter .28s ease,-webkit-filter .28s ease,transform .22s ease,box-shadow .22s ease !important;
}

#portfolio-other .project-item:hover,
#portfolio-other .project-item:focus-within{
  filter:grayscale(0%) !important;
  -webkit-filter:grayscale(0%) !important;
  transform:translateY(-3px);
  box-shadow:0 18px 42px rgba(16,24,40,.09) !important;
}

#portfolio-other .project-image{
  aspect-ratio:16/9;
  overflow:hidden;
}

#portfolio-other .project-image img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

#portfolio-other .project-content{
  padding:18px 19px 20px !important;
}

#portfolio-other .project-content h3{
  font-size:17px !important;
  line-height:1.7 !important;
}

#portfolio-other .project-view span{
  color:#5f6c7f !important;
  font-size:12px !important;
  line-height:2 !important;
}

/* ---------------------------------------------------------
   PUBLISHING — warm knowledge section
   --------------------------------------------------------- */
#publishing{
  padding:82px 0 !important;
  background:linear-gradient(180deg,#fbf7ef,#fffaf3) !important;
}

.publishing-container{
  gap:38px !important;
}

.publishing-content h2{
  font-size:36px !important;
}

.publishing-stat{
  border-color:#efe3d1 !important;
  box-shadow:none !important;
}

.publishing-btn{
  border-radius:10px !important;
  background:var(--hm-navy) !important;
}

/* ---------------------------------------------------------
   ARTICLES — clean white cards
   --------------------------------------------------------- */
#articles{
  background:#fff !important;
}

#articles .projects-inner{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important;
}

#articles .project-item{
  border:1px solid var(--hm-line) !important;
  border-radius:19px !important;
  overflow:hidden !important;
  box-shadow:0 10px 28px rgba(16,24,40,.05) !important;
  background:#fff !important;
}

#articles .project-image{
  aspect-ratio:16/9;
  overflow:hidden;
}

#articles .project-image img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* Keep article text behavior intact; visually hide accidental generic button only if it was already nonfunctional */
#articles .project-intro-btn{
  display:none !important;
}

/* ---------------------------------------------------------
   AWARDS + NAMESAKES
   --------------------------------------------------------- */
.testmonial{
  background:var(--hm-soft-blue) !important;
  padding-top:76px !important;
  padding-bottom:76px !important;
}

.testmonial-item{
  border-radius:19px !important;
  border:1px solid #dfe8f4;
  background:#fff !important;
}

.namesakes-mini{
  padding:54px 0 !important;
  background:#fff;
}

.namesakes-card{
  border-radius:20px !important;
  background:#f7faff !important;
  border-color:#dfe8f4 !important;
  box-shadow:none !important;
}

/* ---------------------------------------------------------
   CONTACT — dark closing panel
   --------------------------------------------------------- */
#contact{
  background:linear-gradient(135deg,#06172d,#092744) !important;
  padding-top:76px !important;
  padding-bottom:76px !important;
}

.contact-panel{
  max-width:860px !important;
}

.contact-panel h2{
  font-size:36px !important;
}

.contact-action{
  border-radius:10px !important;
}

.contact-action.primary{
  background:var(--hm-blue) !important;
  border-color:var(--hm-blue) !important;
  color:#fff !important;
}

/* Footer remains structurally and visually untouched except spacing continuity */
footer{
  margin-top:0 !important;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media(max-width:1040px){
  .ai-hero-inner{
    grid-template-columns:1fr 390px !important;
    padding:42px 38px !important;
  }
  #portfolio .projects-inner,
  #portfolio-other .projects-inner,
  #articles .projects-inner{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:820px){
  .hero-section.ai-hero{
    padding:18px 0 28px !important;
  }
  .ai-hero-inner{
    grid-template-columns:1fr !important;
    padding:30px 22px 26px !important;
    gap:20px !important;
    border-radius:22px;
  }
  .ai-hero-content{
    order:2;
  }
  .ai-portrait-wrap{
    order:1;
    padding:4px !important;
  }
  .ai-portrait-card{
    max-width:320px !important;
  }
  .ai-hero-content h1{
    font-size:43px !important;
  }
  .ai-hero-content .hero-tagline{
    font-size:23px !important;
  }
  .hero-stats{
    grid-template-columns:repeat(2,1fr) !important;
  }

  #about .about-inner{
    grid-template-columns:1fr !important;
    padding:30px 24px !important;
    gap:26px !important;
  }
  #about .about-col-left picture{
    width:220px;
  }

  #portfolio .projects-inner,
  #portfolio-other .projects-inner,
  #articles .projects-inner{
    grid-template-columns:1fr !important;
  }

  #about,
  #brand-dna,
  #portfolio,
  #services,
  #portfolio-other,
  #publishing,
  #articles,
  .testmonial,
  #contact{
    padding-top:60px !important;
    padding-bottom:60px !important;
  }
}

@media(max-width:520px){
  .ai-hero-inner{
    padding:24px 17px !important;
  }
  .ai-hero-content h1{
    font-size:37px !important;
  }
  #about .about-inner{
    padding:24px 18px !important;
  }
}