/* ============================================================
   FONTS
   ============================================================ */

@font-face {
  font-family: 'Lark';
  src: url('assets/fonts/Lark-Regular.woff2') format('woff2'),
       url('assets/fonts/Lark-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('assets/fonts/Manrope-Regular.woff2') format('woff2'),
       url('assets/fonts/Manrope-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   RESET
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================================
   TOKENS
   ============================================================ */

:root {
  --bg:  #f4f0ee;
  --ink: #0f291c;
}

/* ============================================================
   BASE — mobile first
   ============================================================ */

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

/* ---- Photo (top on mobile) -------------------------------- */

.panel--right {
  order: 1;
  width: 100%;
  height: clamp(220px, 60vw, 380px);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background-color: var(--ink);
}

.photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transform: scaleX(-1); /* mirrors to orient the subject toward the content */
}

.decorative {
  display: none; /* shown only on desktop */
}

/* ---- Content (below photo on mobile) ---------------------- */

.panel--left {
  order: 2;
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 40px 28px 52px;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.heading {
  font-family: 'Lark', Georgia, serif;
  font-weight: 400;
  font-size: 30.526px;
  line-height: normal;
}

.body-text {
  font-size: 18px;
  line-height: normal;
}
/* ---- Agencies --------------------------------------------- */

.agencies {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  position: relative;
}

.agencies::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--ink);
  opacity: 0.15;
}

.agency-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  line-height: normal;
}

.agency-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 26px;
  font-size: 18px;
  line-height: normal;
}

.agency-address {
  font-style: normal;
  color: var(--ink);
}

.agency-link {
  color: rgba(15, 41, 28, 0.70);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.agency-link:hover {
  opacity: 0.5;
}

/* Logo pushed to bottom via margin-top: auto */
.logo {
  margin-top: auto;
  padding-top: 48px;
}

.logo img {
  display: block;
  width: min(40rem, 78vw);
  height: auto;
}


/* ============================================================
   SMALL TABLET  768–1023 px — tighter spacing
   ============================================================ */

@media (min-width: 768px) and (max-width: 1439px) {
  .panel--left {
    padding: clamp(24px, 4vh, 48px) clamp(20px, 2.5vw, 40px);
  }

  .agencies {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
  }

  .agency-details{
    margin-top:1rem;
  }
}

/* ============================================================
   TABLET + DESKTOP  ≥ 768 px — side-by-side layout
   ============================================================ */

@media (min-width: 768px) {
  body {
    overflow: hidden;
    height: 100dvh;
  }

  .page {
    flex-direction: row;
    min-height: unset;
    height: 100%;
    justify-content: space-between;
  }

  /* ---- Left panel ----------------------------------------- */

  .panel--left {
    order: 0;
    width: 50%;
    flex-grow: 0;
    flex-shrink: 0;
    padding: clamp(40px, 6.89vh, 88px) clamp(28px, 3.76vw, 72px);
  }

  .content {
    gap: clamp(14px, 2.33vh, 30px);
    max-width: clamp(300px, 36.8vw, 700px);
  }

  /* ---- Agencies ------------------------------------------- */

  .agencies {
    flex-direction: row;
    gap: clamp(24px, 3vw, 50px);
    width: fit-content;
  }

  .agency {
    flex: none;
  }

  .agency-details {
    font-size: 15px;
  }

  .logo img {
    width: clamp(220px, 30vw, 420px);
  }

  /* ---- Right panel ---------------------------------------- */

  .panel--right {
    order: 0;
    width: 50%;
    height: auto;
    flex-shrink: 0;
  }

  /*
    Decorative overlay — logo&.svg is 620 × 1117 px, designed to match
    the frame height exactly. Opacity (0.3) and white stroke are baked
    into the SVG so no CSS filter or opacity override needed.
    Positioned at 29.28 % from the right panel's left edge, mirroring
    the Figma value: (1117 − 864) / 864 = 29.28 %.
  */
  .decorative {
    display: block;
    position: absolute;
    top: 0;
    right:0;
    height: 100%;
    width: auto;
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
}

/* ============================================================
   LARGE DESKTOP  ≥ 1440 px — full-size logo
   ============================================================ */

@media (min-width: 1440px) {
  .logo img {
    width: clamp(420px, 40.28vw, 40rem);
  }

  .agency {
    flex: none;
    width: 262px;
  }

  .agencies {
    gap: 95px;
    margin-top: 5rem;
    padding-top: 5rem;
  }

  .agency-details {
    font-size: 18px;
  }
}

/* ============================================================
   ULTRA-WIDE  ≥ 2560 px — centre page, backgrounds bleed
   ============================================================

   The body gradient 50% point always aligns with the page's
   panel split, regardless of viewport width. Proof:
     gradient 50% = W/2
     panel right edge = (W − 2560)/2 + 1280 = W/2  ✓

   ============================================================ */

@media (min-width: 2560px) {
  /*
    Sizes are already capped by clamp() around 1920 px, so they
    won't grow further here. We only need to centre the page and
    bleed the backgrounds to the screen edges.

    The gradient 50% point aligns exactly with the panel split
    at any viewport width W ≥ 2560 px:
      gradient 50% = W/2
      panel right edge = (W − 2560)/2 + 1280 = W/2  ✓
  */
  body {
    background: linear-gradient(90deg, var(--bg) 50%, var(--ink) 50%);
    display: flex;
    justify-content: center;
    align-items: stretch;
  }

  .page {
    width: 2560px;
    flex-shrink: 0;
  }
}