/* ===== TODOIMPALA — Unified, Mobile-first Stylesheet (v2.1) =====
   - Portrait sits directly under the About title on mobile (grid order).
===================================================================== */

:root{ --bg:#0b0b12; --card:#11121a; --accent:#fcd200; --text:#fff; --muted:#b4b7c1; }

*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
a{ color:var(--accent); text-decoration:none; }
a:focus-visible,button:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
img{ max-width:100%; height:auto; display:block; }
strong,b{ font-weight:600; }

.btn{ background:var(--accent); color:#000; padding:.65rem 1rem; border-radius:14px; font-weight:600; display:inline-block; }
.btn.outline{ background:transparent; color:var(--accent); border:1px solid var(--accent); }

.container{ max-width:1120px; margin:0 auto; padding:0 1rem; }

header{ position:sticky; top:0; z-index:50; background:rgba(0,0,0,.3); backdrop-filter:blur(6px); border-bottom:none; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.nav{ display:flex; gap:1.25rem; }
.nav a{ color:#fff; opacity:.95; }

.menu-btn{ display:none; background:transparent; border:1px solid rgba(255,255,255,.25); color:#fff; padding:.45rem .7rem; border-radius:10px; font-weight:600; }
.menu-btn .burger{ display:inline-flex; flex-direction:column; gap:4px; }
.menu-btn .burger i{ width:20px; height:2px; background:currentColor; border-radius:2px; display:block; }
.menu-btn .label{ font-weight:600; }
.mobile-nav{ display:none; }
#portfolio,#about,#contact{ scroll-margin-top:80px; }
@media (max-width: 720px){
  .nav{ display:none; }
  .menu-btn{ display:inline-flex; align-items:center; gap:.5rem; }
  .mobile-nav{ display:none; background:rgba(0,0,0,.92); border-top:1px solid rgba(255,255,255,.08); }
  .mobile-nav.open{ display:block; }
  .mobile-nav .container{ display:flex; flex-direction:column; gap:.9rem; padding:.9rem 1rem; }
  .mobile-nav a{ color:#fff; font-size:1.05rem; padding:.2rem 0; }
}

.hero{ position:relative; display:flex; align-items:center; justify-content:center; text-align:center; min-height:78vh; overflow:hidden; }
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,var(--bg),transparent 60%); }
.hero img.bg, .hero video.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero img.bg{ opacity:.60; }
.hero.has-video-poster{ background-position:center; background-size:cover; }
.hero video.bg{ opacity:0; transition:opacity .35s ease; }
.hero video.bg.is-playing{ opacity:1; }
.hero h1{ position:relative; font-family:Oswald,system-ui,sans-serif; font-size:clamp(2rem,7vw,4.6rem); letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:.1rem 0; text-shadow:0 4px 24px rgba(0,0,0,.6); }
.hero p{ position:relative; max-width:760px; margin:1rem auto 0; color:#e6e7ea; }

.page-hero .hero, .project .hero{ min-height:56vh; }
.page-hero .hero h1, .project .hero h1{ font-size:clamp(2rem,6vw,4rem); letter-spacing:.2em; }

.section{ padding:3rem 0; }
.section:not(:first-of-type){ content-visibility:auto; contain-intrinsic-size:800px; }
h2.title{ font-family:Oswald,system-ui,sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:clamp(1.4rem,3.5vw,2.6rem); color:var(--accent); margin:0 0 .9rem; }
.muted{ color:var(--muted); }

.card{ background:rgba(17,18,26,.85); border:1px solid rgba(255,255,255,.08); border-radius:16px; overflow:hidden; box-shadow:0 8px 40px rgba(0,0,0,.35); display:block; }
.card img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.card .pad{ padding:1rem 1.25rem; }
#portfolio .card .pad h3{ color:var(--accent) !important; }

.grid{ display:grid; gap:1.25rem; }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:700px){ .grid-2{ grid-template-columns:1fr; } }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .grid-3{ grid-template-columns:1fr; } }

.about{ background:var(--card); }
.about > .container{ max-width:1400px; padding-left:2rem; padding-right:2rem; }
.about-header{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; }
.about-actions{ display:flex; align-items:center; gap:.85rem; margin-top:1.35rem; padding-top:1.15rem; border-top:1px solid rgba(255,255,255,.1); }
.about-actions .social-link{ color:var(--accent); opacity:.95; display:inline-flex; line-height:0; transition:color .15s ease,opacity .15s ease; }
.about-actions .social-link:hover{ color:#fff; opacity:1; }
.about-actions .social-link svg{ width:38px; height:38px; display:block; }
.about-content{ max-width:none; font-size:1.05rem; line-height:1.85; }
.about-content p{ margin:0 0 1rem 0; }
.image-wrap{ float:right; width:min(35%,450px); margin:.25rem 0 1.25rem 1.5rem; shape-outside: polygon(0% 0%, 72% 0%, 90% 14%, 98% 36%, 98% 70%, 86% 100%, 0% 100%); -webkit-shape-outside: polygon(0% 0%, 72% 0%, 90% 14%, 98% 36%, 98% 70%, 86% 100%, 0% 100%); shape-image-threshold:.58; }
.image-wrap img{ background:transparent; border:0; border-radius:0; box-shadow:none; object-fit:contain; }

/* === About + Contact (portrait under title on mobile) === */
.about-contact{ background:var(--card); }
.about-contact__grid{
  display:grid;
  grid-template-columns:1fr;
  grid-template-areas:
    "title"
    "portrait"
    "text";
  row-gap:clamp(1rem, 4vw, 1.5rem);
  column-gap:clamp(1.2rem, 3vw, 2.2rem);
  align-items:start;
  max-width:1400px;
  margin:0 auto;
  padding:clamp(1.5rem, 3vw, 2.5rem);
}
.about-contact__about .about-header{ grid-area:title; display:flex; align-items:center; justify-content:space-between; }
.about-contact__about .about-header .title{ margin:0; text-align:left; }
.about-contact__about .about-content{ grid-area:text; text-align:left; max-width:65ch; justify-self:center; }
.about-contact__portrait{ grid-area:portrait; max-width:min(68%, 360px); justify-self:center; margin:0; }
.about-contact__portrait .image-wrap{ float:none; margin:0; width:100%; }
.about-contact__portrait .image-wrap img{ width:100%; height:auto; display:block; }
@media (min-width: 900px) {
  .about-contact__grid {
    grid-template-columns:minmax(0,1fr) minmax(320px,30%);
    grid-template-areas:
      "title portrait"
      "text portrait";
    row-gap: clamp(1.2rem, 2vw, 1.8rem);
    column-gap: 2rem;
  }

  /* Explicit placement for clarity and to defeat stray rules */
  .about-contact__about .about-header { grid-area: title; }
  .about-contact__about .about-content { grid-area: text; }
  .about-contact__portrait {
    grid-area:portrait;
    width:100%;
    max-width:none;
    height:100%;
    align-self:stretch;
    justify-self:stretch;
    overflow:visible;
    position:relative;
  }
  .about-contact__portrait .image-wrap{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
  .about-contact__portrait .image-wrap img{
    position:absolute;
    right:0;
    bottom:calc(-1 * clamp(3rem,4vw,4rem));
    width:auto;
    max-width:100%;
    height:calc(100% + clamp(5rem,7vw,7.5rem));
    object-fit:contain;
    object-position:right bottom;
  }
}

  .about-contact__about .about-content { grid-area: text; }
  .about-contact__portrait { grid-area: portrait; }


.gallery{ columns:4 280px; column-gap:1rem; }
.gallery a{ display:block; break-inside:avoid; margin:0 0 1rem 0; }
.gallery img{ border-radius:12px; border:1px solid rgba(255,255,255,.08); }

.contact-panel{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(1.5rem,4vw,3.5rem); padding:clamp(1.4rem,3.5vw,3rem); background:linear-gradient(135deg,rgba(25,26,34,.96),rgba(12,12,18,.98)); border:1px solid rgba(255,255,255,.1); border-radius:24px; box-shadow:0 22px 70px rgba(0,0,0,.32); overflow:hidden; position:relative; }
.contact-section{ background:var(--bg); }
.contact-container{ max-width:1400px; margin:0 auto; padding:0 clamp(1rem,3vw,2.5rem); }
.contact-panel::before{ content:""; position:absolute; width:280px; height:280px; left:-150px; top:-160px; border-radius:50%; background:var(--accent); filter:blur(110px); opacity:.12; pointer-events:none; }
.contact-intro{ position:relative; display:flex; flex-direction:column; align-items:flex-start; }
.contact-intro .title{ max-width:12ch; margin-bottom:1rem; font-size:clamp(2rem,4.3vw,3.6rem); line-height:1.02; }
.contact-kicker{ margin:0 0 .8rem; color:#fff; font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.contact-lead{ color:var(--muted); max-width:43ch; margin:0; font-size:1.02rem; line-height:1.7; }
.contact-email{ width:100%; margin-top:auto; padding-top:2.5rem; display:grid; grid-template-columns:1fr auto; align-items:end; gap:.25rem 1rem; color:#fff; border-bottom:1px solid rgba(252,210,0,.65); padding-bottom:.85rem; }
.contact-email span{ grid-column:1; color:var(--muted); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; }
.contact-email strong{ grid-column:1; font-size:clamp(1rem,2vw,1.2rem); font-weight:600; }
.contact-email svg{ grid-column:2; grid-row:1/3; width:24px; color:var(--accent); transition:transform .2s ease; }
.contact-email:hover svg{ transform:translateX(5px); }
.project-brief{ position:relative; display:grid; gap:1.15rem; }
.project-brief label>span,.project-brief legend{ display:block; margin:0 0 .48rem; color:#e9e9ed; font-size:.8rem; font-weight:600; letter-spacing:.05em; }
.project-brief input:not([type="checkbox"]),.project-brief textarea{ width:100%; border:1px solid rgba(255,255,255,.13); border-radius:12px; background:rgba(4,4,8,.55); color:#fff; font:inherit; padding:.88rem 1rem; outline:none; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.project-brief textarea{ resize:vertical; min-height:132px; }
.project-brief input::placeholder,.project-brief textarea::placeholder{ color:#777b87; }
.project-brief input:focus,.project-brief textarea:focus{ border-color:var(--accent); background:rgba(4,4,8,.8); box-shadow:0 0 0 3px rgba(252,210,0,.12); }
.project-brief fieldset{ margin:0; padding:0; border:0; min-width:0; }
.form-status{ margin:0; padding:.8rem 1rem; border-radius:12px; background:rgba(255,255,255,.06); color:#e9e9ed; line-height:1.5; }
.form-status.is-success{ border:1px solid rgba(252,210,0,.45); }
.form-status.is-error{ border:1px solid rgba(255,110,110,.5); }
.inquiry-options{ display:flex; flex-wrap:wrap; gap:.55rem; }
.inquiry-options label{ cursor:pointer; }
.inquiry-options input{ position:absolute; opacity:0; pointer-events:none; }
.inquiry-options span{ display:block; margin:0!important; padding:.55rem .8rem; border:1px solid rgba(255,255,255,.14); border-radius:999px; color:var(--muted)!important; font-size:.8rem!important; font-weight:500!important; letter-spacing:0!important; transition:.18s ease; }
.inquiry-options input:checked+span{ color:#090909!important; background:var(--accent); border-color:var(--accent); }
.inquiry-options input:focus-visible+span{ outline:2px solid var(--accent); outline-offset:3px; }
.contact-submit{ border:0; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1rem; font:inherit; }
.contact-submit svg{ width:22px; transition:transform .2s ease; }
.contact-submit:hover svg{ transform:translateX(5px); }
.contact-two-col{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
@media (max-width:900px){ .contact-panel{ grid-template-columns:1fr; } .contact-email{ margin-top:0; } }
@media (max-width:600px){
  .contact-two-col{ grid-template-columns:1fr; }
  .contact-panel{ padding:1.25rem; border-radius:18px; }
  #contact input,#contact textarea,#contact button{ width:100%; font-size:1rem; }
}

/* Reels */
.card .card-media{ position:relative; display:block; line-height:0; aspect-ratio:16/9; }
.card .card-media img.card-media-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .18s ease; display:block; }
.card video.card-reel-inline{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; pointer-events:none; transition:opacity .18s ease; display:block; }
@media (hover:hover){
  .card.has-reel:hover .card-reel-inline{ opacity:1; }
  .card.has-reel:hover .card-media-img{ opacity:0; }
}
.card.has-reel.playing .card-reel-inline{ opacity:1 !important; }
.card.has-reel.playing .card-media-img{ opacity:0 !important; }
@media (prefers-reduced-motion: reduce){
  .card .card-reel-inline{ opacity:0 !important; }
  .card .card-media-img{ opacity:1 !important; }
}
.card[data-project]{ cursor:pointer; }

/* Modal */
.modal{ position:fixed; inset:0; display:none; z-index:1000; }
.modal.open{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(6px); }
.modal-card{ position:relative; z-index:1; max-width:1100px; margin:5vh auto; padding:0; background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:16px; box-shadow:0 16px 80px rgba(0,0,0,.5); overflow:hidden; animation:pop .18s ease-out; display:flex; flex-direction:column; max-height:90vh; }
@keyframes pop{ from{ transform:translateY(10px) scale(.98); opacity:.7; } to{ transform:none; opacity:1; } }
.modal-close{ position:absolute; top:.6rem; right:.6rem; border:1px solid rgba(255,255,255,.15); background:rgba(17,18,26,.8); color:#fff; border-radius:10px; padding:.35rem .6rem; font-size:1.25rem; cursor:pointer; }
.modal-media{ position:relative; background:#000; flex:0 0 auto; }
.modal-media img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.nav-btn{ position:absolute; top:50%; transform:translateY(-50%); border:none; background:rgba(0,0,0,.45); color:#fff; cursor:pointer; border-radius:12px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(0,0,0,.35); }
.nav-btn svg{ width:22px; height:22px; display:block; }
.nav-btn.prev{ left:.5rem; } .nav-btn.next{ right:.5rem; }
.modal-content{ padding:1.25rem 1.6rem 1.6rem; overflow:auto; -webkit-overflow-scrolling:touch; min-height:0; font-size:1.12rem; line-height:1.85; }
.modal-content h3{ margin:.2rem 0 .4rem; font-family:Oswald,system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; font-size:1.2rem; }
@media (min-width:960px){
  .modal-card{ display:block; max-height:90vh; margin:5vh auto; }
  .modal-media img{ max-height:46vh; height:auto; aspect-ratio:auto; object-fit:cover; }
  .modal-content{ max-height:calc(90vh - 46vh); font-size:1.15rem; line-height:1.9; }
  .modal-content h3{ font-size:1.25rem; letter-spacing:.05em; margin-top:.2rem; }
}
.thumbs{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.9rem; }
.thumbs button{ border:none; background:transparent; padding:0; cursor:pointer; border-radius:10px; outline-offset:2px; }
.thumbs img{ width:120px; height:76px; object-fit:cover; border-radius:10px; border:1px solid rgba(255,255,255,.1); opacity:.9; }
.thumbs img[aria-current="true"]{ outline:2px solid var(--accent); opacity:1; }
@media (max-width:900px){ .thumbs img{ width:96px; height:60px; } .modal-card{ margin:3vh 1rem; } }

/* Lightbox */
.lightbox{ position:fixed; inset:0; display:none; z-index:2000; }
.lightbox.open{ display:block; }
.lb-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.92); backdrop-filter:blur(2px); }
.lb-stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:4vh 6vw; }
.lb-stage img{ max-width:88vw; max-height:88vh; width:auto; height:auto; object-fit:contain; border-radius:10px; box-shadow:0 10px 60px rgba(0,0,0,.6); }
.lb-caption{ position:absolute; left:0; right:0; bottom:2.5vh; text-align:center; color:#eaeaf1; font-size:1rem; opacity:.9; padding:0 2rem; }
.lb-btn{ position:absolute; top:50%; transform:translateY(-50%); border:none; background:rgba(0,0,0,.45); color:#fff; border-radius:12px; cursor:pointer; width:46px; height:46px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(0,0,0,.35); }
.lb-btn svg{ width:24px; height:24px; display:block; }
.lb-prev{ left:1rem; } .lb-next{ right:1rem; }
.lb-close{ position:absolute; top:1rem; right:1rem; border:1px solid rgba(255,255,255,.15); background:rgba(17,18,26,.8); color:#fff; border-radius:12px; width:42px; height:42px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.lb-close svg{ width:20px; height:20px; }
@media (max-width:700px){
  .lb-stage{ padding:6vh 4vw; }
  .lb-btn{ width:44px; height:44px; }
  .lb-caption{ font-size:.95rem; padding:0 1rem; }
}

/* Project pages */
.media{ columns:3 280px; column-gap:1rem; }
.media a,.media figure{ display:block; break-inside:avoid; margin:0 0 1rem; }
.media img,.media video{ width:100%; height:auto; border-radius:12px; border:1px solid rgba(255,255,255,.08); display:block; }
.credits{ background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:1rem 1.25rem; }
.project-end{ padding-top:3px; }
.project-nav{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:stretch; gap:1rem; }
.project-nav__link,.project-nav__all{ min-height:92px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:rgba(17,18,26,.82); display:flex; flex-direction:column; justify-content:center; padding:1rem 1.2rem; transition:border-color .18s ease,transform .18s ease; }
.project-nav__link:hover,.project-nav__all:hover{ border-color:rgba(252,210,0,.6); transform:translateY(-2px); }
.project-nav__link span{ color:var(--muted); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.28rem; }
.project-nav__link strong{ color:var(--accent); font-family:Oswald,system-ui,sans-serif; letter-spacing:.05em; text-transform:uppercase; }
.project-nav__link.next{ text-align:right; align-items:flex-end; }
.project-nav__all{ min-width:132px; align-items:center; color:#fff; font-weight:600; text-align:center; }
@media (max-width:700px){
  .project-nav{ grid-template-columns:1fr 1fr; }
  .project-nav__all{ grid-column:1/-1; grid-row:2; min-height:54px; }
  .project-nav__link{ min-height:84px; padding:.9rem; }
}

/* 404 page */
.cards{ display:grid; gap:1rem; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .cards{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .cards{ grid-template-columns:1fr; } }
.cards .card img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.cards .pad{ padding:1rem 1.25rem; }
.cards .pad h3{ margin:.2rem 0 0; font-family:Oswald,system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }

footer{ border-top:1px solid rgba(255,255,255,.1); padding:1.2rem 0; color:#d0d1d6; position:relative; z-index:1; background:var(--bg); }

.hidden{ display:none !important; }
.center{ text-align:center; }
.right{ text-align:right; }


/* === Authoritative About+Contact placements (no wrapper dependency) === */

/* Mobile: explicit areas already set by grid-template-areas. */
@media (max-width: 900px){
  .about-header { grid-area: title !important; }
  .about-content { grid-area: text !important; }
  .about-contact__portrait { grid-area: portrait !important; }
}

/* Desktop: title spans row 1, text/portrait row 2, contact/portrait row 3 */
@media (min-width: 900px){
  .about-header { grid-area: title !important; }
  .about-content { grid-area: text !important; }
  .about-contact__portrait { grid-area: portrait !important; }
}
.about-actions .cv-btn:hover {
  color: #fff !important;        /* force text white */
  background: transparent !important; /* keep background transparent */
  border-color: #fff !important; /* optional: border white too */
}

.about-actions .cv-btn {
  display: inline-flex;       /* flexbox container */
  align-items: center;        /* vertical centering */
  justify-content: center;    /* horizontal centering */
  padding: 0.5rem 1.2rem;     /* adjust spacing to match height of icons */
  font-size: 0.95rem;
  line-height: 1;             /* remove extra line-height that was offsetting text */
  height: 38px;
  border-width: 2px;
}