/* Liudmila Borga portfolio — v3.15 focused layout fixes
   Scope: hero, experience proof, education. Loaded after the main personal stylesheet. */

/* ---------- HERO: exactly one desktop viewport ---------- */
@media (min-width: 769px) {
  .personal-hero {
    height: calc(100vh - 94px) !important;
    height: calc(100svh - 94px) !important;
    min-height: 620px !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  .personal-hero-grid {
    height: 100% !important;
    min-height: 0 !important;
    padding: 34px var(--pad) 28px !important;
    align-items: center !important;
  }
  .personal-hero-copy {
    align-self: center !important;
    padding-bottom: 0 !important;
  }
  .personal-hero-portrait {
    top: 0 !important;
    height: 100% !important;
  }
}

.personal-hero h1 {
  margin: 0;
}
.personal-role {
  color: var(--blue) !important;
  font-size: .56em !important;
  line-height: 1.03 !important;
  margin-top: .16em !important;
}
.personal-promise {
  color: #fff !important;
  font-size: .47em !important;
  line-height: 1.14 !important;
  margin-top: .40em !important;
  max-width: 680px;
  letter-spacing: -.012em;
}
.personal-hero-lede {
  margin-top: 22px !important;
}
.personal-hero-actions {
  margin-top: 24px !important;
}
.personal-hero-actions .button-blue {
  min-width: 180px;
}
.personal-hero-actions .personal-text-link {
  color: rgba(255,255,255,.74) !important;
  padding-left: 4px;
}
.personal-hero-actions .personal-text-link:hover {
  color: #fff !important;
}

/* ---------- EXPERIENCE SNAPSHOT ---------- */
.experience-proof-v315 {
  position: relative;
  overflow: hidden;
  padding: 64px var(--pad) 0 !important;
  background:
    radial-gradient(circle at 91% 4%, rgba(111,145,244,.12), transparent 24%),
    linear-gradient(180deg, #f7f6f3 0%, #fff 74%);
}
.experience-proof-v315::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(7,26,37,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,26,37,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 58%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 58%);
}
.experience-proof-v315 > * {
  position: relative;
  z-index: 2;
}
.snapshot-proof-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .65fr);
  gap: 64px;
  align-items: end;
  margin-top: 22px;
}
.snapshot-proof-intro h2 {
  margin: 0;
  font-family: "Anton", sans-serif;
  font-size: clamp(54px, 5.7vw, 92px);
  line-height: .92;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--navy);
}
.snapshot-proof-intro h2 span {
  color: var(--blue);
}
.snapshot-subline {
  max-width: 780px;
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--charcoal);
}
.snapshot-proof-intro > p {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.72;
  color: #4f5960;
}

.proof-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}
.proof-card {
  position: relative;
  overflow: hidden;
  min-height: 196px;
  padding: 24px;
  border-radius: 26px;
  color: #fff;
  box-shadow: 0 18px 40px rgba(7,26,37,.08);
  transform: translateZ(0);
}
.proof-card::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  top: -54px;
  right: -34px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  box-shadow: 0 0 0 26px rgba(255,255,255,.045);
}
.proof-card::after {
  content: "";
  position: absolute;
  inset: auto 18px 16px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.32), transparent);
}
.proof-blue { background: linear-gradient(145deg,#4e76e7 0%,#6d8df2 58%,#4965d0 100%); }
.proof-violet { background: linear-gradient(145deg,#6d58dd 0%,#8451d6 54%,#ad54bd 100%); }
.proof-navy { background: linear-gradient(145deg,#0b2331 0%,#173b50 54%,#22556f 100%); }
.proof-magenta { background: linear-gradient(145deg,#8b347f 0%,#b44383 50%,#e05d75 100%); }
.proof-card-value {
  position: relative;
  z-index: 2;
  min-height: 56px;
  font-family: "Anton", sans-serif;
  font-size: clamp(36px, 3.1vw, 52px);
  line-height: .96;
  text-transform: uppercase;
  letter-spacing: -.015em;
}
.proof-card h3 {
  position: relative;
  z-index: 2;
  margin: 20px 0 6px;
  font-size: 17px;
  line-height: 1.15;
}
.proof-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 290px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,.82);
}

.brand-marquee-block {
  margin: 24px calc(var(--pad) * -1) 0;
  border-top: 1px solid rgba(7,26,37,.09);
  border-bottom: 1px solid rgba(7,26,37,.09);
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(10px);
}
.brand-marquee-label {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 24px;
  align-items: center;
  padding: 16px var(--pad) 12px;
}
.brand-marquee-label span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
  color: var(--blue);
}
.brand-marquee-label p {
  margin: 0;
  max-width: 820px;
  font-size: 12px;
  line-height: 1.55;
  color: #687078;
}
.brand-marquee-window {
  position: relative;
  overflow: hidden;
  padding: 12px 0 20px;
}
.brand-marquee-window::before,
.brand-marquee-window::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  width: 9vw;
  pointer-events: none;
}
.brand-marquee-window::before { left: 0; background: linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.brand-marquee-window::after { right: 0; background: linear-gradient(270deg,#fff,rgba(255,255,255,0)); }
.brand-marquee-track {
  display: flex;
  width: max-content;
  animation: brandRail 32s linear infinite;
  will-change: transform;
}
.brand-marquee-group {
  display: flex;
  flex: none;
  gap: 12px;
  padding-right: 12px;
}
.brand-logo-slot {
  width: 172px;
  height: 78px;
  flex: 0 0 172px;
  display: grid;
  place-items: center;
  padding: 14px 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(7,26,37,.075);
  box-shadow: 0 8px 20px rgba(7,26,37,.035);
}
.brand-logo-slot img {
  display: block;
  width: 112px;
  height: 42px;
  object-fit: contain;
}
.brand-logo-slot img[alt="Panthera Uplift"] { height: 48px; }
.brand-logo-slot img[alt="Zeitun"] { height: 38px; }
.brand-logo-slot img[alt="I Love My Pet"] { height: 44px; }
@keyframes brandRail {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.brand-marquee-window:hover .brand-marquee-track { animation-play-state: paused; }

/* ---------- EDUCATION: 3 equal full-width cards ---------- */
.credentials-v315 {
  padding: 64px var(--pad) 76px !important;
  background:
    radial-gradient(circle at 8% 12%, rgba(111,145,244,.11), transparent 22%),
    #f6f5f2 !important;
}
.education-v315-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, .62fr);
  gap: 64px;
  align-items: end;
  margin: 22px 0 30px;
}
.education-v315-intro h2 {
  margin: 0;
  font-family: "Anton", sans-serif;
  font-size: clamp(54px,5.7vw,90px);
  line-height: .92;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--navy);
}
.education-v315-intro h2 span { color: var(--blue); }
.education-v315-intro p {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.72;
  color: #59636a;
}
.education-v315-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.education-v315-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(7,26,37,.09);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(7,26,37,.045);
  display: flex;
  flex-direction: column;
}
.education-v315-cover {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  padding: 26px 28px 28px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.education-v315-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .4;
  pointer-events: none;
}
.edu-formal .education-v315-cover { background: linear-gradient(145deg,#071b27,#163c54 58%,#255e7d); }
.edu-current .education-v315-cover { background: linear-gradient(145deg,#365edc,#6c72ef 55%,#8653d0); }
.edu-certs .education-v315-cover { background: linear-gradient(145deg,#1d2740,#263a5e 55%,#3c4e70); }
.education-v315-cover small,
.education-v315-cover h3,
.education-v315-cover p { position: relative; z-index: 2; }
.education-v315-cover small {
  margin-bottom: 14px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  color: rgba(255,255,255,.74);
}
.education-v315-cover h3 {
  margin: 0 0 10px;
  font-family: "Anton", sans-serif;
  font-size: clamp(38px,3.8vw,56px);
  line-height: .92;
  text-transform: uppercase;
  font-weight: 400;
}
.education-v315-cover p {
  margin: 0;
  max-width: 430px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.82);
}
.education-cover-symbol {
  position: absolute;
  z-index: 1;
  right: 18px;
  top: 12px;
  font-family: "Anton", sans-serif;
  font-size: 86px;
  line-height: 1;
  color: rgba(255,255,255,.10);
  letter-spacing: -.04em;
}
.education-v315-list {
  padding: 8px 26px 24px;
  flex: 1;
}
.institution-row {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr);
  gap: 16px;
  align-items: center;
  min-height: 128px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.institution-row:first-child { border-top: 0; }
.institution-mark {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f3f5f7;
  border: 1px solid rgba(7,26,37,.07);
}
.mark-rea { color:#132e69; background:linear-gradient(145deg,#eff4ff,#fff); }
.mark-rea span { font-family:"Anton",sans-serif; font-size:30px; letter-spacing:.02em; }
.mark-iee { position:relative; background:#f4f1ed; }
.mark-iee i { position:absolute; width:34px; height:34px; border-radius:50%; background:#a9c2dc; transform:translate(8px,-8px); }
.mark-iee i + i { width:24px; height:24px; background:#64768b; transform:translate(-12px,10px); }
.mark-wa { background:linear-gradient(145deg,#10151c,#303945); color:#fff; }
.mark-wa span { font-family:"Anton",sans-serif; font-size:28px; }
.mark-skillbox { background:#101010; color:#fff; }
.mark-skillbox span { font-family:"Anton",sans-serif; font-size:24px; }
.institution-row b,
.credential-row-v315 b {
  display:block;
  font-size:14px;
  line-height:1.3;
  color:var(--navy);
}
.institution-row span,
.credential-row-v315 span {
  display:block;
  margin-top:5px;
  font-size:12px;
  line-height:1.48;
  color:#555f66;
}
.institution-row small,
.credential-row-v315 small {
  display:block;
  margin-top:6px;
  font-size:10px;
  line-height:1.45;
  color:#899197;
}
.institution-row a {
  display:inline-block;
  margin-top:7px;
  font-size:10px;
  font-weight:800;
  color:var(--blue);
}
.credentials-v315 .credential-proof {
  margin: 8px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  color:#899197;
}
.credential-list-v315 { padding-top: 12px; }
.credential-row-v315 {
  display:grid;
  grid-template-columns:86px minmax(0,1fr);
  gap:16px;
  align-items:center;
  padding:14px 0;
  border-top:1px solid var(--line);
  color:inherit;
  text-decoration:none;
}
.credential-row-v315:first-child { border-top:0; }
.credential-row-v315 img {
  width:86px;
  height:86px;
  object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(7,26,37,.08);
  background:#fff;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .snapshot-proof-intro,
  .education-v315-intro { grid-template-columns:1fr; gap:20px; }
  .proof-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .education-v315-grid { grid-template-columns:1fr; }
  .education-v315-card { display:grid; grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr); }
  .education-v315-cover { min-height:100%; }
}

@media (max-width: 768px) {
  .personal-hero {
    height:auto !important;
    min-height:0 !important;
  }
  .personal-promise { color:#fff !important; font-size:.50em !important; margin-top:.35em !important; }
  .personal-hero-actions { display:grid !important; grid-template-columns:1fr !important; }
  .personal-hero-actions .button,
  .personal-hero-actions .personal-text-link { width:100%; justify-content:center; text-align:center; }
  .experience-proof-v315,
  .credentials-v315 { padding-left:20px !important; padding-right:20px !important; }
  .proof-card-grid { grid-template-columns:1fr; }
  .proof-card { min-height:0; }
  .brand-marquee-block { margin-left:-20px; margin-right:-20px; }
  .brand-marquee-label { grid-template-columns:1fr; gap:5px; padding-left:20px; padding-right:20px; }
  .brand-logo-slot { width:148px; flex-basis:148px; }
  .education-v315-card { display:flex; }
  .education-v315-cover { min-height:220px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-marquee-track { animation:none; }
}

/* ===== v3.15.1 targeted repair: hero + education ===== */

/* Brand subtitle should visually match the width of the name above it. */
.personal-brand{
  display:grid!important;
  width:max-content!important;
  min-width:0!important;
  line-height:1!important;
}
.personal-brand strong{
  display:block;
  width:100%;
}
.personal-brand .brand-scope{
  display:flex!important;
  width:100%!important;
  min-width:0!important;
  align-items:center;
  justify-content:space-between;
  gap:0;
  margin-top:7px!important;
  padding:0 1px;
  font-size:8.5px!important;
  line-height:1;
  letter-spacing:.055em!important;
  color:rgba(255,255,255,.72)!important;
}
.personal-brand .brand-scope em,
.personal-brand .brand-scope i{
  font-style:normal;
  font-weight:800;
}
.personal-brand .brand-scope i{opacity:.68}

/* Desktop hero occupies exactly one browser viewport, including the fixed header.
   Content and portrait begin below the header, so nothing is hidden under it. */
@media (min-width:769px){
  .personal-hero{
    height:100vh!important;
    height:100svh!important;
    min-height:690px!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  .personal-hero-grid{
    height:100%!important;
    min-height:0!important;
    padding:calc(var(--header-h) + 26px) var(--pad) 28px!important;
    align-items:center!important;
  }
  .personal-hero-copy{
    align-self:center!important;
    padding:0!important;
    max-width:820px!important;
  }
  .personal-hero h1{
    font-size:clamp(48px,4.55vw,76px)!important;
  }
  .personal-role{
    font-size:.54em!important;
    margin-top:.18em!important;
  }
  .personal-promise{
    font-size:.43em!important;
    line-height:1.14!important;
    margin-top:.52em!important;
    max-width:660px!important;
  }
  .personal-hero-lede{
    margin-top:22px!important;
    font-size:clamp(15px,1.04vw,17px)!important;
    line-height:1.58!important;
    max-width:680px!important;
  }
  .personal-hero-actions{
    margin-top:24px!important;
  }
  .personal-availability{
    margin-top:18px!important;
  }
  .personal-hero-portrait{
    top:var(--header-h)!important;
    height:calc(100% - var(--header-h))!important;
    bottom:auto!important;
    border-radius:0 0 0 34px!important;
  }
  .personal-hero-portrait img{
    object-position:center 28%!important;
  }
}

/* Education must not inherit the generic .credentials grid used elsewhere on the site. */
.credentials-v315{
  display:block!important;
  grid-template-columns:none!important;
  gap:0!important;
  margin:0!important;
  width:100%!important;
  max-width:none!important;
}
.credentials-v315 .section-topline,
.credentials-v315 .education-v315-intro,
.credentials-v315 .education-v315-grid{
  width:100%!important;
  max-width:none!important;
}
.education-v315-intro{
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.65fr)!important;
  gap:64px!important;
  align-items:end!important;
  margin:22px 0 34px!important;
}
.education-v315-intro h2{
  max-width:920px;
  font-size:clamp(54px,5.6vw,88px)!important;
  line-height:.92!important;
}
.education-v315-intro p{
  max-width:560px;
  justify-self:end;
}
.education-v315-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
  align-items:stretch!important;
  margin:0!important;
}
.education-v315-card{
  min-width:0!important;
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border-radius:28px!important;
  background:#fff!important;
}
.education-v315-cover{
  min-height:232px!important;
  padding:24px 26px 26px!important;
  justify-content:flex-end!important;
}
.education-v315-cover::before{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  right:-30px;
  top:-52px;
  border-radius:50%;
  background:rgba(255,255,255,.11);
  box-shadow:0 0 0 28px rgba(255,255,255,.04);
  z-index:1;
}
.education-v315-cover h3{
  font-size:clamp(38px,3.35vw,54px)!important;
  line-height:.92!important;
  max-width:92%;
}
.education-v315-cover p{
  max-width:430px!important;
}
.education-cover-symbol{
  right:22px!important;
  top:18px!important;
  font-size:72px!important;
  opacity:.75;
}
.education-v315-list{
  display:flex!important;
  flex-direction:column!important;
  flex:1!important;
  padding:12px 24px 24px!important;
}
.institution-row,
.credential-row-v315{
  min-height:122px!important;
  grid-template-columns:72px minmax(0,1fr)!important;
  gap:14px!important;
  align-items:center!important;
}
.institution-mark{
  width:68px!important;
  height:68px!important;
  border-radius:18px!important;
}
.credential-row-v315 img{
  width:72px!important;
  height:72px!important;
  border-radius:14px!important;
}
.credential-row-v315{
  grid-template-columns:72px minmax(0,1fr)!important;
}

@media (max-width:1100px){
  .education-v315-intro{
    grid-template-columns:1fr!important;
    gap:16px!important;
  }
  .education-v315-intro p{justify-self:start!important}
  .education-v315-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .education-v315-card{
    display:flex!important;
  }
  .education-v315-cover{
    min-height:220px!important;
  }
  .education-v315-cover h3{
    font-size:clamp(32px,4vw,44px)!important;
  }
}

@media (max-width:900px){
  .education-v315-grid{
    grid-template-columns:1fr!important;
  }
  .education-v315-card{
    display:grid!important;
    grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr)!important;
  }
  .education-v315-cover{min-height:100%!important}
}

@media (max-width:768px){
  .personal-brand .brand-scope{font-size:7.2px!important}
  .education-v315-card{display:flex!important}
  .education-v315-cover{min-height:210px!important}
}

/* Exact viewport correction: do not let legacy min-height expose the next section. */
@media (min-width:769px){
  .personal-hero{min-height:0!important;}
}