/*
 * inaivu IT — modern Tamil identity layer
 * Logo blue + ink black, with subtle olai-chuvadi linework and connected-node motifs.
 */
:root {
  --inaivu-blue: #118fd1;
  --inaivu-blue-deep: #0874b3;
  --inaivu-sky: #eaf7fd;
  --inaivu-ink: #172536;
  --inaivu-muted: #5d6d7e;
  --inaivu-line: #d9e8f0;
  --inaivu-white: #ffffff;
  --inaivu-accent: #d79b22;
}

body {
  color: var(--inaivu-ink);
  background: var(--inaivu-white);
}

.site-header {
  background: rgba(255,255,255,.95);
  border-bottom-color: var(--inaivu-line);
}

/* The wordmark rule stays consistent in header, footer and brand-story. */
.brand > span,
.inaivu-name {
  color: var(--inaivu-blue) !important;
}

.brand > span b,
.inaivu-name .it {
  color: #111820 !important;
}

.site-nav a { color: var(--inaivu-ink); }

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 21%, rgba(17,143,209,.10) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 72%, rgba(17,143,209,.09) 0 3px, transparent 4px),
    linear-gradient(135deg, #fff 0%, #f4fbff 58%, #e9f7fd 100%);
  background-size: 88px 88px, 112px 112px, auto;
}

/* Connected atoms: a quiet visual expression of "inaivu". */
.hero::before {
  content: "";
  position: absolute;
  inset: 8% -5% auto auto;
  width: min(38vw, 520px);
  height: 240px;
  opacity: .22;
  background:
    radial-gradient(circle at 12% 32%, var(--inaivu-blue) 0 5px, transparent 6px),
    radial-gradient(circle at 48% 62%, var(--inaivu-blue) 0 7px, transparent 8px),
    radial-gradient(circle at 82% 20%, var(--inaivu-blue) 0 5px, transparent 6px),
    linear-gradient(25deg, transparent 47.8%, var(--inaivu-blue) 48% 48.8%, transparent 49%) 0 0/62% 100%,
    linear-gradient(-30deg, transparent 48%, var(--inaivu-blue) 48.2% 49%, transparent 49.2%) 100% 0/58% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.hero h1,
.section-heading h2,
.about h2,
.contact h2,
.profile-dialog h2 {
  color: var(--inaivu-ink);
  letter-spacing: -.035em;
}

.hero h1 span { color: var(--inaivu-blue-deep); }

.tamil-signature,
.tamil-note,
.heritage-band [lang="ta"] {
  font-family: "Noto Sans Tamil", "Latha", "Tamil MN", sans-serif;
}

.tamil-signature {
  margin: .35rem 0 1rem;
  color: var(--inaivu-blue-deep);
  font-size: clamp(.9rem,1.4vw,1.05rem);
  font-weight: 700;
  letter-spacing: .035em;
}

.tamil-note {
  margin: 1rem 0 0;
  color: #93dbfb;
  font-size: 1rem;
  font-weight: 650;
}

.eyebrow { color: var(--inaivu-blue-deep); }
.eyebrow::before { background: var(--inaivu-blue); }

.button {
  background: var(--inaivu-blue-deep);
  border: 1px solid var(--inaivu-blue-deep);
  box-shadow: none;
}

.button:hover,
.button:focus-visible {
  background: var(--inaivu-ink);
  border-color: var(--inaivu-ink);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(8,116,179,.18);
}

.hero-visual img {
  border: 1px solid var(--inaivu-line);
  border-radius: 1.25rem;
  filter: none;
}

.floating-card {
  border-left: 4px solid var(--inaivu-blue);
  border-radius: .75rem;
}

.trust-row strong { color: var(--inaivu-ink); }

/* Palm-leaf manuscript reference: fine horizontal incisions, kept light and modern. */
.heritage-band {
  position: relative;
  z-index: 2;
  color: #dff5ff;
  background:
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(255,255,255,.045) 12px 13px),
    var(--inaivu-ink);
  border-block: 1px solid rgba(17,143,209,.55);
}

.heritage-band::before,
.heritage-band::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7%;
  height: 1px;
  background: var(--inaivu-blue);
}

.heritage-band::before { left: 0; }
.heritage-band::after { right: 0; }

.heritage-band .container {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem,4vw,3.5rem);
  font-weight: 700;
  letter-spacing: .05em;
}

.heritage-band i {
  color: var(--inaivu-blue);
  font-style: normal;
}

.services,
.process,
.team { background: #fff; }

.service-card,
.project-card,
.person {
  border-color: var(--inaivu-line);
  border-radius: .85rem;
}

.service-card {
  border-top: 3px solid var(--inaivu-blue);
  box-shadow: 0 12px 32px rgba(23,37,54,.055);
}

.service-card:nth-child(3n+2) { border-top-color: #59bae6; }
.service-card:nth-child(3n) { border-top-color: var(--inaivu-blue-deep); }
.service-card .number,
.service-card .icon { color: var(--inaivu-blue-deep); }

/* Light manuscript lines replace the former brown retro surface. */
.about {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 29px, rgba(255,255,255,.03) 29px 30px),
    var(--inaivu-ink);
  border-block: 3px double rgba(17,143,209,.75);
}

.about-grid {
  align-items: start;
}

.about-statement {
  display: block !important;
  align-self: start;
  height: auto !important;
  min-height: 0 !important;
}

.about h2 {
  color: #fff;
}

.about-visual {
  position: relative;
  z-index: 1;
  display: block;
  flex: none !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  margin: 1.25rem 0 0;
  overflow: hidden;
  border: 1px solid rgba(147,219,251,.34);
  border-radius: 1rem;
  box-shadow: 0 18px 42px rgba(0,0,0,.22);
}

.about-visual img {
  display: block;
  width: 100%;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center 62%;
}

.about-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 45px rgba(15,31,48,.35);
  pointer-events: none;
}

.about::after {
  content: "";
  position: absolute;
  right: -35px;
  bottom: -35px;
  width: 180px;
  height: 180px;
  opacity: .18;
  background:
    radial-gradient(circle at 50% 8%, #fff 0 5px, transparent 6px),
    radial-gradient(circle at 92% 50%, #fff 0 5px, transparent 6px),
    radial-gradient(circle at 50% 92%, #fff 0 5px, transparent 6px),
    radial-gradient(circle at 8% 50%, #fff 0 5px, transparent 6px),
    linear-gradient(45deg, transparent 49%, #fff 49.5% 50.5%, transparent 51%),
    linear-gradient(-45deg, transparent 49%, #fff 49.5% 50.5%, transparent 51%);
  transform: rotate(45deg);
  pointer-events: none;
}

.brand-meaning {
  margin-top: 2rem;
  padding: 1.25rem 1.4rem;
  color: var(--inaivu-ink);
  background: #fff;
  border: 1px solid rgba(147,219,251,.7);
  border-left: 4px solid var(--inaivu-blue);
  border-radius: .75rem;
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}

.brand-meaning .meaning-word {
  display: flex;
  align-items: baseline;
  gap: .15rem;
  margin-bottom: .55rem;
  font-size: clamp(1.45rem,2.4vw,2rem);
  font-weight: 800;
  letter-spacing: -.04em;
}

.meaning-word .in,
.meaning-word .vu { color: var(--inaivu-ink); }

.meaning-word .ai {
  color: var(--inaivu-blue);
  text-transform: uppercase;
}

.brand-meaning p {
  margin: 0;
  color: var(--inaivu-muted);
  line-height: 1.7;
}

.brand-meaning strong { color: var(--inaivu-blue-deep); }

.projects {
  background:
    linear-gradient(90deg, rgba(17,143,209,.035) 1px, transparent 1px) 0 0/32px 32px,
    #f6fbfe;
}

.project-card {
  background: #fff;
  box-shadow: 0 10px 28px rgba(23,37,54,.055);
}

.project-card:hover {
  border-color: var(--inaivu-blue);
  box-shadow: 0 15px 32px rgba(8,116,179,.13);
}

.project-mark {
  background: var(--inaivu-blue-deep);
  color: #fff;
  border-radius: 50%;
}

.project-card.featured {
  background: var(--inaivu-ink);
  border-color: var(--inaivu-blue);
}

.person {
  background: #fff;
  box-shadow: 0 0 0 1px var(--inaivu-line);
}

.person:hover,
.person:focus-visible {
  box-shadow: 0 0 0 2px var(--inaivu-blue), 0 14px 30px rgba(8,116,179,.10);
}

.person img { filter: none; }

.person span,
.project-card span { color: var(--inaivu-blue-deep); }

.contact {
  position: relative;
  background:
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(255,255,255,.025) 30px 31px),
    var(--inaivu-ink);
  border-top: 3px solid var(--inaivu-blue);
}

.contact-form {
  border-radius: .85rem;
  border: 1px solid rgba(17,143,209,.45);
}

.location-card {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: minmax(240px,.7fr) minmax(320px,1.3fr);
  overflow: hidden;
  min-height: 330px;
  margin-top: 1rem;
  background: #fff;
  border: 1px solid rgba(17,143,209,.42);
  border-radius: 1rem;
}

.location-copy {
  padding: clamp(1.5rem,4vw,2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--inaivu-ink);
}

.location-copy .eyebrow { margin-bottom: .7rem; }
.location-copy h3 { margin: 0 0 .8rem; font-size: clamp(1.5rem,2.8vw,2rem); }
.location-copy p { margin: 0; color: var(--inaivu-muted); line-height: 1.7; }

.location-map iframe {
  display: block;
  width: 100%;
  min-height: 330px;
  height: 100%;
  border: 0;
}

.profile-dialog {
  border: 2px solid var(--inaivu-blue);
  border-radius: .85rem;
  background: #fff;
}

footer {
  background: #0f1f30;
  border-top: 1px solid rgba(17,143,209,.55);
}

.footer-brand {
  width: max-content;
  padding: .4rem .7rem;
  background: #fff;
  border-radius: .65rem;
}

@media (max-width: 760px) {
  .heritage-band .container {
    min-height: 58px;
    gap: .65rem 1rem;
    flex-wrap: wrap;
    padding-block: .65rem;
    font-size: .88rem;
  }

  .heritage-band i:nth-of-type(2) { display: none; }
  .hero::before { width: 75vw; opacity: .12; }
  .hero-visual img { border-radius: 1rem; }
  .location-card { grid-template-columns: 1fr; }
  .location-map iframe { min-height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .button:hover,
  .button:focus-visible { transform: none; }
}


/* A wide connection visual fills the contact column without competing with the form. */
.contact-copy {
  min-width: 0;
}

.contact-visual {
  width: 100%;
  aspect-ratio: 8 / 3;
  margin: clamp(.85rem, 1.5vw, 1.25rem) 0 0;
  overflow: hidden;
  border: 1px solid rgba(147, 219, 251, .42);
  border-radius: .9rem;
  background: #071b2c;
  box-shadow: 0 18px 48px rgba(3, 18, 31, .28);
}

.contact-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 900px) {
  .contact-visual {
    aspect-ratio: 16 / 7;
    max-width: 720px;
  }
}

@media (max-width: 520px) {
  .contact-visual {
    aspect-ratio: 16 / 9;
  }
}

.contact-copy h2 {
  margin-top: clamp(1.35rem, 2.2vw, 2rem);
  color: var(--inaivu-white);
}