/* Daiviksoft Technologies — daiviksoft.com
 *
 * Carried over from the Blocksy/Elementor site so the migration is not also an
 * unannounced rebrand: Roboto Slab headings, #24417C headings, #355575 body,
 * #102136 for dark bands. The old site shipped ~336 KB of generated inline CSS
 * per page; this is the entire stylesheet.
 */

:root {
  --ink:      #355575;
  --ink-soft: #6a819b;
  --heading:  #24417c;
  --deep:     #102136;
  --accent:   #c53727;
  --rule:     #e2e9f1;
  --wash:     #f6f9fc;
  --bg:       #ffffff;
  --wrap:     1140px;
  --measure:  72ch;
  --serif:    "Roboto Slab", Georgia, serif;
  --sans:     Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow:   0 1px 2px rgba(16,33,54,.04), 0 8px 24px rgba(16,33,54,.06);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  color: var(--heading);
  line-height: 1.22;
  margin: 0 0 .7rem;
  text-wrap: balance;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 1.3rem + 2.9vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.05rem); }
h3 { font-size: 1.28rem; }
h4 { font-size: 1.08rem; }

p  { margin: 0 0 1.15rem; }
a  { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
strong { color: var(--heading); font-weight: 650; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 1.2rem; padding-left: 1.25rem; }
li { margin: .4rem 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

.skip-link { position: absolute; left: -9999px; background: var(--deep); color: #fff;
             padding: .6rem 1rem; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; top: 0; z-index: 100; }

:focus-visible { outline: 2px solid var(--heading); outline-offset: 2px; border-radius: 3px; }

/* ================================================================= header */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(8px);
  position: sticky; top: 0; z-index: 50;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem 2rem; min-height: 78px; flex-wrap: wrap; padding-block: .6rem;
}
/* the nav sat high against the 48px mark because the links carry a 2px
   underline border that is only painted on hover — reserving it on both states
   keeps the row on one optical baseline */
.nav a { border-bottom: 2px solid transparent; line-height: 1.9; }
.brand { font-family: var(--serif); font-weight: 700; font-size: 1.22rem;
         color: var(--heading); text-decoration: none; letter-spacing: -.02em; }
.nav { display: flex; flex-wrap: wrap; gap: .1rem 1.35rem; align-items: center; }
.nav a { color: var(--ink); text-decoration: none; font-size: .93rem;
         font-weight: 500; padding: .4rem 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--heading); border-bottom-color: var(--accent); }
.nav .cta { background: var(--deep); color: #fff; padding: .55rem 1.25rem;
            border-radius: 999px; border-bottom: 0; font-weight: 600; }
.nav .cta:hover { background: var(--heading); color: #fff; border-bottom-color: transparent; }

/* ================================================================ layout */
main { display: block; }
main > * { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

/* the hero spans full width and sits on a tinted band */
main > .page-hero {
  max-width: none; padding: 3.4rem 24px 3rem;
  background: linear-gradient(180deg, var(--wash), #fff 92%);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.8rem;
}
.page-hero > * { max-width: var(--wrap); margin-inline: auto; }
.page-hero h1 { margin-bottom: .6rem; }
.kicker {
  font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .7rem;
}
.lede { font-size: 1.16rem; line-height: 1.6; color: var(--ink); max-width: 62ch; margin: 0; }

main > section { margin-bottom: 2.6rem; }
main > section > * { max-width: var(--measure); }
main > section > .card-grid,
main > section > dl { max-width: none; }

.hero-figure { max-width: var(--wrap); margin: -1rem auto 2.6rem; padding-inline: 24px; }
.hero-figure img { border-radius: 16px; box-shadow: var(--shadow); width: 100%; }

/* ---- case studies: narrative beside a fact panel ---- */
.with-aside {
  display: grid; gap: 2.5rem;
  grid-template-columns: minmax(0,1fr) 300px;
  align-items: start;
}
.with-aside .content > section { margin-bottom: 2.4rem; }
.with-aside .content > section > * { max-width: var(--measure); }
.fact-panel {
  position: sticky; top: 96px;
  background: var(--wash); border: 1px solid var(--rule);
  border-radius: 16px; padding: 1.4rem 1.5rem;
}
.fact-panel h2 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
                 color: var(--ink-soft); font-family: var(--sans); font-weight: 700; margin-bottom: 1rem; }
.fact-panel dl { margin: 0; border: 0; background: none; }

dl { margin: 1.5rem 0; }
dt { font-size: .72rem; letter-spacing: .11em; text-transform: uppercase;
     color: var(--ink-soft); font-weight: 700; margin-top: .9rem; }
dt:first-child { margin-top: 0; }
dd { margin: .15rem 0 0; font-weight: 600; color: var(--heading); }

/* ================================================================= cards */
.card-grid {
  display: grid; gap: 1.15rem;
  /* auto-FIT with a 250px floor, not auto-FILL at 290px. At the 1140px wrap the
     old rule gave exactly 3 columns, so the homepage's four cards wrapped 3+1 and
     looked like a mistake. 250px yields 4 columns at full width, and auto-fit
     makes a short final row stretch to fill rather than leaving dead track. */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  list-style: none; padding-left: 0; margin: 1.6rem 0 0;
}

/* A FOUR-item grid between ~800 and 1080px gets 3 columns from the rule above,
   which leaves a single orphan on the second row — it reads as a mistake rather
   than a layout. A CSS quantity query (an element that is both the first child
   and the fourth from last has exactly four siblings) forces 2x2 through that
   band only. Grids of 3, 41 or 39 cards are untouched. */
@media (min-width: 760px) and (max-width: 1080px) {
  .card-grid:has(li:first-child:nth-last-child(4)) { grid-template-columns: repeat(2, 1fr); }
}
.card-grid li { margin: 0; }
.card {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--rule); border-radius: 16px; padding: 1.4rem 1.5rem;
  text-decoration: none; background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.card:hover { border-color: #c3d3e6; box-shadow: var(--shadow); transform: translateY(-3px); }
.card h3 { margin: 0 0 .5rem; font-size: 1.06rem; }
.card p  { margin: 0; font-size: .94rem; color: var(--ink); line-height: 1.6; }
.card .meta { margin-top: .85rem; font-size: .78rem; color: var(--ink-soft); font-weight: 600; }

/* ---- logo wall (/technologies/) ----
 * Scoped to .logo-wall, NOT to "any image after a heading". The earlier selector
 * (main section h2 + img, main section img + img) also matched the About page's
 * leadership photos: the first head-shot followed an <h2> so it rendered as a
 * 38px tile while the others, following paragraphs, rendered full width. One
 * selector, three differently-sized portraits, and it looked broken because it
 * was. Presentation rules have to be scoped to the thing they describe.
 *
 * No greyscale either — these are low-contrast marks on transparent
 * backgrounds, and desaturating them made the wall almost invisible. */
.logo-wall img {
  display: inline-block; vertical-align: middle;
  width: auto; height: 38px; box-sizing: content-box;
  margin: .45rem .7rem .45rem 0; padding: .7rem 1.1rem;
  background: var(--wash); border: 1px solid var(--rule); border-radius: 12px;
  transition: border-color .16s ease, transform .16s ease;
}
.logo-wall img:hover { border-color: #c3d3e6; transform: translateY(-2px); }

/* ---- people ----
 * Portraits arrive at wildly different source sizes and aspect ratios, so they
 * are normalised rather than trusted. */
.person-photo, main section > img.person-photo {
  width: 104px; height: 104px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  margin: 1.6rem 0 .7rem; box-shadow: none;
  border: 3px solid #fff; outline: 1px solid var(--rule);
}

/* content images that are not the hero */
main section > img {
  border-radius: 14px; box-shadow: var(--shadow); margin: 1.4rem 0;
  max-height: 460px; object-fit: cover; width: 100%;
}

/* ---- cards carrying a banner ---- */
.card-with-media { padding: 0; overflow: hidden; }
.card-media { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.card-with-media h3 { margin: 1.1rem 1.3rem .45rem; }
.card-with-media p { margin: 0 1.3rem; }
.card-with-media .meta { margin: .8rem 1.3rem 1.2rem; }

/* ================================================================= forms */
.contact-form { max-width: 34rem; margin: 1.5rem 0 2.5rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .85rem; font-weight: 650;
               color: var(--heading); margin-bottom: .32rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .68rem .85rem; border: 1px solid var(--rule);
  border-radius: 10px; font: inherit; color: var(--ink); background: #fff;
}
.field textarea { resize: vertical; }
.contact-form button {
  background: var(--deep); color: #fff; border: 0; padding: .75rem 1.8rem;
  border-radius: 999px; font: inherit; font-weight: 650; cursor: pointer;
}
.contact-form button:hover { background: var(--heading); }
.form-status { margin: .9rem 0 0; font-size: .92rem; min-height: 1.4em; }
.form-status.error { color: var(--accent); }
.form-status.ok { color: var(--heading); }

/* ================================================================ footer */
.site-footer { background: var(--deep); color: #b9cadd; margin-top: 4rem; padding: 3.2rem 0 1.6rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer h2 { color: #fff; font-size: .95rem; margin: 0 0 .8rem; font-family: var(--sans); }
.site-footer .brand { color: #fff; display: block; margin-bottom: .5rem; font-size: 1.1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: .35rem 0; }
.site-footer p { font-size: .92rem; line-height: 1.65; }
.cols { display: grid; gap: 2.4rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.legal { border-top: 1px solid rgba(255,255,255,.13); margin-top: 2.4rem;
         padding-top: 1.2rem; font-size: .85rem; color: #8aa0ba; }

/* ============================================================ responsive */
@media (max-width: 900px) {
  .with-aside { grid-template-columns: 1fr; }
  .fact-panel { position: static; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  main > .page-hero { padding: 2.4rem 20px 2.2rem; margin-bottom: 2rem; }
  .lede { font-size: 1.06rem; }
  .site-header .wrap { min-height: 60px; padding-block: .5rem; }
  .nav { gap: .1rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------ brand mark */
/* The mark is 1080x647 — roughly 1.67:1 — so height alone decides how legible the
   "DAIVIKSOFT" wordmark under it is. At 34px it rendered ~57px wide and could not
   be read at all. */
.brand { display: flex; align-items: center; }
.brand img { height: 48px; width: auto; display: block; }
.footer-logo { height: 54px; width: auto; margin-bottom: 1rem; }
@media (max-width: 640px) { .brand img { height: 40px; } }