/* Original v2 design and interactions; v4 replaces the supplied photo assets. */
:root { --header-height: 111px; --nav-ease: cubic-bezier(.22, 1, .36, 1); }
html { scroll-padding-top: calc(var(--header-height) + 24px); }

.site-header { height: var(--header-height); z-index: 100; box-shadow: 0 8px 30px rgba(14, 45, 46, .045); }
.header__inner { height: 100%; min-height: 0; gap: 16px; }
.site-header .brand { display: block; width: 108px; }
.site-header .brand img { width: 100%; height: auto; }
.header-contact { position: relative; top: 14px; flex: 0 0 auto; }

.main-nav { position: relative; top: 14px; display: flex; align-items: center; gap: 10px; margin: 0 auto; min-width: 0; }
.main-nav a { position: relative; display: inline-flex; min-height: 42px; flex: 0 0 auto; align-items: center; padding: 9px 15px; color: #3d4d4f; background: rgba(255,255,255,.62); border: 1px solid rgba(20,37,41,.22); border-radius: 999px; box-shadow: 0 1px 3px rgba(14,45,46,.06); font-size: 14px; font-weight: 760; line-height: 1.15; white-space: nowrap; text-decoration: none; transition: color .2s, background .2s, border-color .2s, box-shadow .2s, transform .2s var(--nav-ease); }
.main-nav a::after { content: ""; position: absolute; right: 13px; bottom: 5px; left: 13px; height: 2px; background: var(--orange); border-radius: 999px; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--nav-ease); }
.main-nav a[aria-current="true"] { color: var(--ink); background: #fff1dc; border-color: rgba(169,95,0,.62); }
.main-nav a[aria-current="true"]::after, .main-nav a:focus-visible::after { transform: scaleX(1); }
.main-nav .nav-contacts, .nav-label-mobile, .nav-scroll-hint { display: none; }

@media (hover: hover) and (pointer: fine) {
  .main-nav a:hover { color: var(--ink); background: var(--white); border-color: rgba(20,37,41,.55); box-shadow: 0 5px 14px rgba(14,45,46,.1); transform: translateY(-1px); }
  .main-nav a:hover::after { transform: scaleX(1); }
}

@media (max-width: 1100px) {
  .main-nav { gap: 8px; }
  .main-nav a { padding-inline: 11px; }
}

@media (max-width: 930px) {
  :root { --header-height: 92px; }
  .header__inner { gap: 10px; }
  .site-header .brand { width: 88px; }
  .main-nav { top: 11px; flex: 1 1 auto; justify-content: flex-start; gap: 8px; margin: 0; padding: 4px 1px 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav a { display: flex; min-height: 42px; padding: 9px 14px; color: var(--ink); background: rgba(244,245,241,.86); border-color: rgba(20,37,41,.62); box-shadow: 0 1px 3px rgba(14,45,46,.08); font-weight: 800; letter-spacing: .005em; scroll-snap-align: start; }
  .main-nav a:hover { color: var(--ink); background: rgba(244,245,241,.86); border-color: rgba(20,37,41,.62); box-shadow: 0 1px 3px rgba(14,45,46,.08); transform: none; }
  .main-nav a:hover::after { transform: scaleX(0); }
  .main-nav a[aria-current="true"] { color: var(--ink); background: #fff1dc; border-color: rgba(169,95,0,.62); box-shadow: 0 1px 3px rgba(14,45,46,.06); }
  .main-nav a[aria-current="true"]::after, .main-nav a:focus-visible::after { transform: scaleX(1); }
  .main-nav .nav-contacts { display: flex; }
  .nav-label-desktop { display: none; }
  .nav-label-mobile { display: inline; }
  .nav-scroll-hint { position: relative; top: 11px; display: grid; width: 28px; height: 42px; flex: 0 0 28px; align-self: center; place-items: center; padding: 0; color: var(--ink); background: rgba(244,245,241,.86); border: 1px solid rgba(20,37,41,.62); border-radius: 9px; box-shadow: 0 1px 3px rgba(14,45,46,.08); font-size: 0; line-height: 1; cursor: pointer; appearance: none; transition: opacity .2s, transform .2s, background .2s; }
  .nav-scroll-hint::before { content: ""; width: 8px; height: 8px; margin-left: -3px; border-top: 3px solid var(--ink); border-right: 3px solid var(--ink); transform: rotate(45deg); }
  .nav-scroll-hint:hover { background: var(--mist); transform: translateX(1px); }
  .nav-scroll-hint.is-hidden, .nav-scroll-hint:disabled { opacity: 0; pointer-events: none; }
}

@media (max-width: 680px) {
  :root { --header-height: 82px; }
  .header__inner { gap: 7px; }
  .site-header .brand { width: 80px; }
  .main-nav, .nav-scroll-hint { top: 10px; }
  .nav-scroll-hint { width: 26px; flex-basis: 26px; }
}

/* Keep the faces clear of the existing landscape frame's upper curve. */
.hero__image-wrap img { object-position: center 20%; }

/* The supplied portrait stays entirely inside the existing frame.
   A softened copy fills only the spare space; the caption has its own clearance. */
.team__photo::before { content: ""; position: absolute; inset: -24px; background: url("./assets/team-portrait-v4.webp") center / cover no-repeat; filter: blur(22px); opacity: .72; }
.team__photo img { position: relative; z-index: 1; height: calc(100% - 76px); object-fit: contain; object-position: center; }
.team__photo::after { z-index: 1; pointer-events: none; }
@media (max-width: 560px) {
  .team__photo img { height: calc(100% - 96px); }
}

/* Native buttons inherit the exact typography and surfaces of the original links. */
:where(button[data-copy-email]) { margin: 0; padding: 0; border: 0; color: inherit; background: transparent; text-align: inherit; cursor: pointer; appearance: none; -webkit-tap-highlight-color: transparent; }
button[data-copy-email]:focus-visible, .nav-scroll-hint:focus-visible, .email-toast button:focus-visible, .email-toast input:focus-visible { outline: 3px solid rgba(230,135,35,.55); outline-offset: 3px; }
.document-card--action button[data-copy-email] { align-self: flex-start; padding-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.7); font-size: .86rem; font-weight: 800; }
.contact__cards button[data-copy-email] { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; padding: 22px 24px; border: 1px solid rgba(255,255,255,.15); border-radius: 18px; background: rgba(255,255,255,.055); transition: transform .2s ease, background .2s ease; }
.contact__cards button[data-copy-email]:hover { transform: translateX(4px); background: rgba(255,255,255,.09); }
.email-is-copied { animation: email-copy-flash 1s ease-in-out; }
.header-contact.email-is-copied { animation-name: email-header-flash; }
.header-contact.email-is-copied strong { animation: email-address-flash 1s ease-in-out; }
@keyframes email-copy-flash {
  35% { color: #291b0c; background-color: #f3a24b; box-shadow: 0 0 0 5px rgba(230,135,35,.18); }
}
@keyframes email-address-flash { 35% { color: var(--orange-deep); } }
@keyframes email-header-flash { 35% { box-shadow: 0 0 0 4px rgba(230,135,35,.18); } }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.email-toast { position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); z-index: 200; width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 20px; border: 1px solid rgba(230,135,35,.5); border-left: 4px solid var(--orange); border-radius: 18px; color: var(--ink); background: #fffefb; box-shadow: 0 20px 60px rgba(9,37,39,.24); animation: email-toast-enter .25s ease-out; }
.email-toast[hidden] { display: none; }
.email-toast__heading { display: grid; grid-template-columns: 26px minmax(0,1fr) 32px; gap: 10px; align-items: center; }
.email-toast__heading strong { font-size: 16px; line-height: 1.35; }
.email-toast__icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--petrol-deep); background: #f6b166; font-size: 16px; font-weight: 850; }
.email-toast__close { display: grid; place-items: center; width: 44px; height: 44px; margin: -6px; padding: 0; border: 0; border-radius: 50%; color: var(--ink-soft); background: transparent; font: inherit; font-size: 27px; line-height: 1; cursor: pointer; }
.email-toast__close:hover { background: #edf0ea; }
.email-toast__address { display: block; width: 100%; min-width: 0; margin: 14px 0 10px; padding: 10px 12px; border: 1px solid rgba(18,62,64,.15); border-radius: 10px; color: var(--petrol-deep); background: #eef2ee; font: inherit; font-size: 16px; font-weight: 700; line-height: 1.3; cursor: text; }
.email-toast__message { margin: 0; font-size: 15px; line-height: 1.55; color: #3f5052; }
@keyframes email-toast-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 560px) {
  .contact__cards button[data-copy-email] { grid-template-columns: 1fr; }
  .mobile-contact-bar button[data-copy-email] { min-width: 0; min-height: 44px; display: grid; place-items: center; padding: 0 5px; border-radius: 11px; color: #2b1a07; background: var(--orange); font-size: .86rem; font-weight: 800; line-height: 1.2; text-align: center; }
  .email-toast { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(84px + env(safe-area-inset-bottom)); width: auto; max-height: calc(100dvh - 112px - env(safe-area-inset-bottom)); padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .email-is-copied, .header-contact.email-is-copied strong, .email-toast { animation: none; }
  .email-is-copied { outline: 3px solid var(--orange); outline-offset: 3px; }
}

@media print {
  .email-toast, #email-copy-status { display: none !important; }
  .contact__cards button[data-copy-email] { break-inside: avoid; box-shadow: none; color: #000; background: #fff; border: 1px solid #bbb; }
}