/* Papagikos Law — Coming Soon
   Design reference: Figma node 433:1107 (1920 × 1080 canvas)

   Fully fluid: every font size and spacing value is a clamp() that scales
   linearly from a mobile value at 375px to the exact Figma value at 1920px.
   Only the layout itself changes at breakpoints (2 columns → stacked). */

:root {
  /* Colours */
  --navy: #0c0f21;
  --gold: #ceb173;
  --gold-light: #dac880;
  --gold-dark: #815a29;
  --ink: #1e1e1e;
  --white-85: rgba(255, 255, 255, 0.85);
  --white-60: rgba(255, 255, 255, 0.6);

  --font-nexa: "nexa-text", "Helvetica Neue", Arial, sans-serif;
  --font-figtree: "figtree", "Helvetica Neue", Arial, sans-serif;

  /* Font sizes: clamp(375px value, fluid, 1920px value) */
  --fs-logo:    clamp(1.625rem, 1.349rem + 1.175vw, 2.76rem);
  --fs-eyebrow: clamp(0.875rem, 0.784rem + 0.3883vw, 1.25rem);
  --fs-title:   clamp(2rem, 1.681rem + 1.359vw, 3.3125rem);
  --fs-lead:    clamp(1rem, 0.9393rem + 0.2589vw, 1.25rem);
  --fs-label:   clamp(1.0625rem, 1.017rem + 0.1942vw, 1.25rem);
  --fs-body:    clamp(0.9375rem, 0.9223rem + 0.06472vw, 1rem);
  --fs-name:    clamp(1.25rem, 1.189rem + 0.2589vw, 1.5rem);
  --fs-firm:    clamp(0.75rem, 0.7197rem + 0.1294vw, 0.875rem);
  --fs-footer:  clamp(0.75rem, 0.7197rem + 0.1294vw, 0.875rem);

  /* Spacing: clamp(375px value, fluid, 1920px value) */
  --gutter:             clamp(20px, -31.46px + 13.72vw, 232px);
  --sp-page-top:        clamp(32px, 26.17px + 1.553vw, 56px);
  --sp-page-bottom:     clamp(32px, 29.33px + 0.712vw, 43px);
  --sp-logo-gap:        clamp(9px, 8.029px + 0.2589vw, 13px);
  --sp-logo-content:    clamp(40px, 29.81px + 2.718vw, 82px);
  --sp-intro-top:       clamp(0px, -6.068px + 1.618vw, 25px);
  --sp-eyebrow-title:   clamp(16px, 13.09px + 0.7767vw, 28px);
  --sp-title-lead:      clamp(20px, 17.09px + 0.7767vw, 32px);
  --sp-lead-divider:    clamp(32px, 28.12px + 1.036vw, 48px);
  --sp-divider-contact: clamp(28px, 25.09px + 0.7767vw, 40px);
  --sp-label-value:     clamp(8px, 6.544px + 0.3883vw, 14px);
  --sp-contact-col:     clamp(32px, 21.81px + 2.718vw, 74px);
  --sp-contact-row:     clamp(20px, 18.54px + 0.3883vw, 24px);
  --sp-call-extra:      clamp(0px, -8.738px + 2.33vw, 36px);
  --sp-contact-btn:     clamp(32px, 27.87px + 1.1vw, 49px);
  --sp-columns:         clamp(40px, 16.7px + 6.214vw, 136px);
  --sp-stack:           clamp(48px, 44.12px + 1.036vw, 64px);
  --sp-footer-top:      clamp(48px, 44.12px + 1.036vw, 64px);
  --sp-plate-y:         clamp(16px, 15.51px + 0.1294vw, 18px);
  --sp-plate-x:         clamp(20px, 18.06px + 0.5178vw, 28px);
  --sp-plate-offset:    clamp(28px, 25.09px + 0.7767vw, 40px);
  --sp-firm-bottom:     clamp(16px, 14.3px + 0.4531vw, 23px);
  --mark-w:             clamp(50px, 41.91px + 2.158vw, 83.337px);
  --sp-plate-gap:       8px;
}

/* Desktop (two columns): pure proportional scaling of the 1920px design.
   Every token = Figma value × (viewport / 1920), via vw, capped at the Figma
   value. So 1400–1440px screens are an exact scaled-down copy of the design.
   Font floors (70%) only start to apply below ~1344px. */
@media (min-width: 1025px) {
  :root {
    --fs-logo:    clamp(1.932rem, 2.3vw, 2.76rem);
    --fs-eyebrow: clamp(0.875rem, 1.042vw, 1.25rem);
    --fs-title:   clamp(2.319rem, 2.76vw, 3.3125rem);
    --fs-lead:    clamp(0.875rem, 1.042vw, 1.25rem);
    --fs-label:   clamp(0.875rem, 1.042vw, 1.25rem);
    /* small text stops shrinking below 1400px (floor = its 1400px size) */
    --fs-body:    clamp(0.7292rem, 0.8333vw, 1rem);
    --fs-name:    clamp(1.05rem, 1.25vw, 1.5rem);
    --fs-firm:    clamp(0.638rem, 0.7292vw, 0.875rem);
    --fs-footer:  clamp(0.638rem, 0.7292vw, 0.875rem);

    --gutter:             clamp(123.7px, 12.08vw, 232px);
    --sp-page-top:        clamp(29.85px, 2.917vw, 56px);
    --sp-page-bottom:     clamp(22.92px, 2.24vw, 43px);
    --sp-logo-gap:        clamp(6.929px, 0.6771vw, 13px);
    --sp-logo-content:    clamp(43.71px, 4.271vw, 82px);
    --sp-intro-top:       clamp(13.33px, 1.302vw, 25px);
    --sp-eyebrow-title:   clamp(14.92px, 1.458vw, 28px);
    --sp-title-lead:      clamp(17.06px, 1.667vw, 32px);
    --sp-lead-divider:    clamp(25.58px, 2.5vw, 48px);
    --sp-divider-contact: clamp(21.32px, 2.083vw, 40px);
    --sp-label-value:     clamp(7.462px, 0.7292vw, 14px);
    --sp-contact-col:     clamp(39.44px, 3.854vw, 74px);
    --sp-contact-row:     clamp(12.79px, 1.25vw, 24px);
    --sp-call-extra:      clamp(19.19px, 1.875vw, 36px);
    --sp-contact-btn:     clamp(26.12px, 2.552vw, 49px);
    --sp-columns:         clamp(72.49px, 7.083vw, 136px);
    --sp-footer-top:      clamp(34.11px, 3.333vw, 64px);
    --sp-plate-y:         clamp(9.594px, 0.9375vw, 18px);
    --sp-plate-x:         clamp(14.92px, 1.458vw, 28px);
    --sp-plate-offset:    clamp(21.32px, 2.083vw, 40px);
    --sp-firm-bottom:     clamp(12.26px, 1.198vw, 23px);
    --sp-plate-gap:       clamp(4.8px, 0.4688vw, 9px);
    --mark-w:             clamp(44.42px, 4.34vw, 83.337px);
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-nexa);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.nowrap { white-space: nowrap; }

/* ---------- Background video ---------- */
.hero-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--navy) url("assets/hero-poster.jpg") center / cover no-repeat;
}

.hero-bg__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-bg__overlay {
  position: absolute;
  inset: 0;
  background: rgba(12, 15, 33, 0.72);
}


/* ---------- Page shell ---------- */
.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: var(--sp-page-top) var(--gutter) var(--sp-page-bottom);
}

/* ---------- Logo ---------- */
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-logo-gap);
}

.logo__mark {
  position: relative;
  flex: none;
  width: var(--mark-w);
  aspect-ratio: 83.337 / 96.778;
  overflow: hidden;
}

.logo__mark img {
  position: absolute;
  left: -61.29%;
  top: -11.29%;
  width: 222.58%;
  height: 180.9%;
  max-width: none;
}

.logo__text {
  font-family: var(--font-nexa);
  font-weight: 400;
  font-size: var(--fs-logo);
  line-height: normal;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(to bottom, var(--gold-light), var(--gold-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: translateY(-0.16em);
}

/* ---------- Main content (2 columns) ---------- */
.content {
  flex: 1;
  width: 100%;
  max-width: 1456px;
  margin: var(--sp-logo-content) auto 0;
  display: grid;
  grid-template-columns: minmax(0, 720fr) minmax(0, 600fr);
  column-gap: var(--sp-columns);
  row-gap: var(--sp-stack);
  align-items: start;
}

.intro { padding-top: var(--sp-intro-top); }

.eyebrow {
  margin: 0;
  font-size: var(--fs-eyebrow);
  line-height: normal;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}

.title {
  margin: var(--sp-eyebrow-title) 0 0;
  font-family: var(--font-figtree);
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: normal;
  letter-spacing: 0.04em;
  color: var(--gold);
}

.title span { color: #fff; }

.lead {
  max-width: 32em;           /* 640px at 20px */
  margin: var(--sp-title-lead) 0 0;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--white-85);
}

.divider {
  width: 100%;
  height: 1px;
  margin-top: var(--sp-lead-divider);
}

/* Contact */
.contact {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--sp-contact-col);
  row-gap: var(--sp-contact-row);
  margin: var(--sp-divider-contact) 0 0;
}

.contact__item--call { margin-right: 10px; }
.contact__item--visit { flex: 1 1 12em; }

.contact dt {
  font-family: var(--font-figtree);
  font-weight: 700;
  font-size: var(--fs-label);
  line-height: normal;
  color: var(--gold);
}

.contact dd {
  margin: var(--sp-label-value) 0 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: #fff;
}

.contact address { font-style: normal; }

.contact a { transition: color 0.2s ease; }
.contact a:hover,
.contact a:focus-visible { color: var(--gold); }

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625em;
  margin-top: var(--sp-contact-btn);
  padding: 0.625em 1.375em;
  border-radius: 0.25em;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-nexa);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn img { width: 0.75em; height: 0.75em; flex: none; }

.btn:hover { background: var(--gold-light); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Portrait ---------- */
.portrait {
  position: relative;
  width: 100%;
  margin: 0 0 var(--sp-plate-offset);
}

.portrait__photo {
  aspect-ratio: 600 / 610;
  border-radius: clamp(8px, 7.515px + 0.1294vw, 10px);
  overflow: hidden;
  background: #1a1a1a;
}

.portrait__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16.7%;
}

/* Plate: 420/600 of the photo width, starting 220/600 in → overhangs right */
.portrait__plate {
  position: absolute;
  left: 36.67%;
  bottom: calc(var(--sp-plate-offset) * -1);
  width: 70%;
  min-width: max-content;
  padding: var(--sp-plate-y) var(--sp-plate-x) var(--sp-firm-bottom);
  border-radius: 6px;
  background: rgba(12, 15, 33, 0.92);
  display: flex;
  flex-direction: column;
  gap: var(--sp-plate-gap);
}

.portrait__name {
  font-family: var(--font-figtree);
  font-weight: 700;
  font-size: var(--fs-name);
  line-height: normal;
  white-space: nowrap;
}

.portrait__firm {
  font-size: var(--fs-firm);
  line-height: normal;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

/* ---------- Footer ---------- */
.footer {
  margin-top: var(--sp-footer-top);
  font-size: var(--fs-footer);
  line-height: normal;
  text-align: center;
  color: var(--white-60);
}

/* ---------- Layout breakpoints (sizes stay fluid via the tokens) ---------- */
@media (max-width: 1024px) {
  .content {
    grid-template-columns: minmax(0, 1fr);
    max-width: 720px;
  }

  .intro { padding-top: 0; }

  .portrait { max-width: 600px; }

  /* keep the overhang inside the gutter */
  .portrait__plate { left: auto; right: calc(var(--gutter) * -0.5); }
}

@media (max-width: 640px) {
  .portrait__plate {
    right: 12px;
    width: calc(100% - 24px);
    min-width: 0;
  }
}

/* =========================================================
   Accessibility
   ========================================================= */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Visible keyboard focus on the dark background (WCAG 2.4.7 / 2.4.11) */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 2px;
}
.btn:focus-visible { outline-color: #fff; }

/* Pause / play the background video (WCAG 2.2.2) */
.video-toggle {
  position: fixed;
  right: clamp(12px, 1.25vw, 24px);
  bottom: clamp(12px, 1.25vw, 24px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(206, 177, 115, 0.6);
  border-radius: 50%;
  background: rgba(12, 15, 33, 0.85);
  color: var(--gold);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.video-toggle[hidden] { display: none; }   /* stays hidden if JS doesn't run */
.video-toggle:hover { background: var(--gold); color: var(--navy); }
.video-toggle__play { display: none; }
.video-toggle.is-paused .video-toggle__play { display: block; }
.video-toggle.is-paused .video-toggle__pause { display: none; }

/* keep the footer text clear of the fixed button on small screens */
@media (max-width: 640px) {
  .footer { padding-inline: 48px; }
}

/* Windows High Contrast / forced colours: gradient text would vanish */
@media (forced-colors: active) {
  .logo__text {
    background: none;
    color: CanvasText;
  }
  .btn,
  .video-toggle { border: 1px solid ButtonText; }
}