/* Devgru under-construction — cream / charcoal / oxblood
   Layout: two-column hero on desktop (logo+meta left, portrait right).
   Mobile: single column, logo above portrait (firm ID first). */
:root {
  --cream:    #f2ece0;
  --cream-2:  #efe9dc;
  --charcoal: #141414;
  --oxblood:  #7a1f2b;
  --muted:    #4a4a4a;
  --muted-2:  #6a6a6a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--cream);
  color: var(--charcoal);
  font-family: Georgia, "Times New Roman", "Iowan Old Style", serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 3rem 1.5rem;
}

.wrap {
  max-width: 1080px;
  width: 100%;
  text-align: center;
}

/* ==================
   HERO — logo/meta on left, portrait on right
   ================== */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  text-align: left;
}

.hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
}

.hero-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* Wrap logo to visually absorb any background-tone bleed from the JPG.
   The logo source has a slightly warm cream that differs subtly from our
   page cream; a soft equalizing overlay hides the seam without altering the mark. */
.logo-wrap {
  display: block;
  width: 100%;
  max-width: 420px;
  /* Match the JPG's baked-in cream to make the transition invisible */
  background: var(--cream-2);
  padding: 8px 6px;
}

.logo {
  display: block;
  width: 100%;
  height: auto;
}

.portrait {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  /* Editorial framing: thin oxblood rule around the photo */
  border: 1px solid var(--oxblood);
  padding: 6px;
  background: var(--cream-2);
  box-shadow: 0 6px 18px rgba(20, 20, 20, 0.10);
}

.photo-credit {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0.5rem 0 0;
}

/* Status band */
.status {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--oxblood);
  align-self: stretch;
  max-width: 420px;
}

.contact {
  font-style: normal;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}

.email {
  color: var(--oxblood);
  text-decoration: none;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(122, 31, 43, 0.35);
  padding-bottom: 2px;
  transition: border-color 180ms ease, color 180ms ease;
}
.email:hover, .email:focus {
  color: var(--charcoal);
  border-bottom-color: var(--charcoal);
}

.addr {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  line-height: 1.55;
}

.responsible {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--muted-2);
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(122, 31, 43, 0.2);
  align-self: stretch;
  max-width: 420px;
}

/* ==================
   MOBILE — single column, firm ID first

   On mobile we want the logo card and the portrait card to render at the
   EXACT SAME OUTER WIDTH so they visually line up as stacked blocks.
   Both use box-sizing: border-box so width includes padding + border.
   ================== */
@media (max-width: 780px) {
  body { padding: 2rem 1.25rem; }

  .hero {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    text-align: center;
    justify-items: center;
  }

  /* Firm identity FIRST on mobile */
  .hero-left {
    align-items: center;
    order: 1;
    gap: 1.5rem;
    width: 100%;
  }

  .hero-right {
    order: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .contact { align-items: center; }
  .status,
  .responsible {
    text-align: center;
    max-width: 360px;
    align-self: center;
  }

  /* Both blocks lock to the same outer width. border-box ensures the
     border + padding are included in that 360px measurement so their
     outer edges align perfectly. */
  .logo-wrap,
  .portrait {
    width: 100%;
    max-width: 360px;
    box-sizing: border-box;
  }

  /* Give the logo the same visual treatment as the portrait on mobile so
     they read as matched pair of stacked cards. */
  .logo-wrap {
    padding: 6px;
    border: 1px solid var(--oxblood);
    background: var(--cream-2);
    box-shadow: 0 6px 18px rgba(20, 20, 20, 0.10);
  }
}

@media (max-width: 420px) {
  .logo-wrap,
  .portrait { max-width: 100%; }
  .status { font-size: 0.72rem; letter-spacing: 0.28em; }
  .email { font-size: 0.98rem; }
  .addr { font-size: 0.85rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}