/* ========================================================================== */
/* 01) SETTINGS & GLOBALS                                                     */
/* ========================================================================== */

:root{
  --header-h:110px;
  --ui-dur: 450ms;
  --ui-ease: cubic-bezier(.22,.61,.36,1); /* nice ease-out */

  /* Panel side paddings */
  --panel-edge: 200px;
  --panel-edge-lg: 100px;
  --panel-edge-md: 100px;
  --panel-edge-sm: 64px;
  --panel-edge-xs: 16px;
}

/* Optional font-face (kept commented, as in your file)
@font-face{
  font-family:"ourFont";
  src:url("akzidgrocffreg.otf") format("opentype");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}
*/

/* ========================================================================== */
/* 02) BASE / RESET                                                           */
/* ========================================================================== */

html, body{ height:100%; }

body{
  margin:0;
  font-family: "Armino", sans-serif;
  font-size:.875em;
  color:#ffffff;
  background:#000000;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.no-scroll{ overflow:hidden; }

a:link:not(.site-header a),
a:visited:not(.site-header a){
  color:#fff;
  text-decoration:underline;
  cursor:pointer;
}

a,
button,
[role="button"]{
  cursor:pointer;
}

/* ========================================================================== */
/* 03) UTILITIES                                                              */
/* ========================================================================== */

.u-bold{ font-weight:600; }
.u-semibold{ font-weight:500; }
.u-light{ font-weight:300; }

.u-sm  { font-size: var(--fs-sm); }
.u-lg  { font-size: var(--fs-lg); }
.u-xl  { font-size: var(--fs-xl); }
.u-xxl { font-size: var(--fs-xxl); }

.indent    { padding-left: .5em; }
.indent-sec{ padding-left: 2em; }

.u-right{ text-align:right; }
.u-hide{ transition: color 650ms var(--ui-ease); }

/* background helper used when panels open */
body.panel-open .u-background{ background-color: rgb(0, 0, 0); }

body.panel-open .u-hide{ color: rgba(255, 255, 255, 0); }



/* ========================================================================== */
/* 04) HERO (FULLSCREEN BACKGROUND)                                           */
/* ========================================================================== */

#hero{
  position:fixed; inset:0; overflow:hidden; z-index:0; background:#000;
}
#hero .hero-media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block; user-select:none;
}
/* The hero <img> is only kept in the DOM as a metadata source — hero-sequence.js
   reads its src and then replaces it with a <canvas>. Hiding it via opacity
   prevents the browser from briefly painting its broken-image placeholder
   before JS runs. The canvas (also classed .hero-media) is a different element
   and is unaffected by this rule. */
#hero img.hero-media{ opacity:0; }
.hero-fade-overlay{
  position:absolute;
  inset:0;
  background:#000;
  opacity:0;
  pointer-events:none;
  transition:opacity 500ms;
  z-index:5;
}
.hero-fade-overlay.is-active{
  opacity:1;
}
#hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.20), rgba(0, 0, 0, 0) 40%, rgba(0,0,0,.20));
  pointer-events:none;
}

.hero-overlay{
  position:absolute;
  top:50%;
  left:0;
  width:100vw;
  height:auto;
  transform:translateY(-50%);
  z-index:120;
  pointer-events:none;
  display:block;
  opacity:0;
  animation:heroOverlayFade 700ms var(--ui-ease) 200ms forwards;
}

@keyframes heroOverlayFade{
  from{ opacity:0; }
  to{ opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .hero-overlay{
    animation:none;
    opacity:1;
  }
}

/* ========================================================================== */
/* 05) HEADER & NAV                                                           */
/* ========================================================================== */

.site-header{
  position:fixed; inset:0 0 auto 0; height:var(--header-h);
  display:flex; align-items:center;
  background:transparent;
  z-index:260;
  --hdr-bg: 0;

  opacity: 1;

  transition:
    transform var(--ui-dur) var(--ui-ease),
    opacity var(--ui-dur) var(--ui-ease);
  will-change: transform, opacity;
}

.main-nav{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

.site-header::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,0);
  opacity:var(--hdr-bg, 0);
  transition: opacity var(--ui-dur) var(--ui-ease);
  pointer-events:none;
  z-index:0;
}
.site-header > *{ position:relative; z-index:1; }

.site-header.header-dark{ --hdr-bg:1; }     /* full black when panels active */
.site-header.panel-active{ background-color:rgba(0,0,0,0); }
.site-header.nav-open{ --hdr-bg:1; background-color:#000; }

.site-header.is-hidden{
  transform: translate3d(0, -100%, 0);
  opacity: 0;
  pointer-events: none;
}

.site-header .container{
  width:100%;
  display:flex; align-items:center; justify-content:flex-end;
}

.site-header.header-white .main-nav a,
.site-header.header-white .brand{ color:#000 !important; }

.brand{
  color:#fff; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
}
.brand img{ height:28px; width:auto; display:block; }

.main-nav a{
  color:#ffff00; text-decoration:none; padding:8px 4px; border-radius:0; display:inline-block;
  cursor:pointer;
}
.main-nav a:hover,
.main-nav a:focus-visible{ background:rgba(0,0,0,0); outline:none; }

.site-header a{ cursor:pointer; }


/* ========================================================================== */
/* 07) LAYOUT SPACERS                                                         */
/* ========================================================================== */

main{
  padding-top:var(--header-h);
  position:relative; z-index:1;
}
.hero-spacer{
  height:calc(100dvh - var(--header-h));
  height:calc(100svh - var(--header-h));
  pointer-events:none;
}

body.hero-locked:not(.panel-open){
  overflow:hidden;
  height:100dvh;
  height:100svh;
}

/* ========================================================================== */
/* 08) PANELS                                                                 */
/* ========================================================================== */

.panel{
  position:fixed; inset:0; z-index:200;
  padding-top:var(--header-h);
  background:#000000; color:#ffffff;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;

  opacity:0; visibility:hidden; pointer-events:none;
  transition:
    opacity var(--ui-dur) var(--ui-ease),
    visibility 0s linear var(--ui-dur),
    padding-top var(--ui-dur) var(--ui-ease);
}
.panel.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:
    opacity var(--ui-dur) var(--ui-ease),
    visibility 0s;
  will-change: padding-top;
}

.panel .panel-header{
  position:sticky; top:0; background:#000; z-index:1;
}
.panel .panel-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--header-h);
}

.panel h2{ margin:0; }

.panel .panel-close{
  border:0; background:#000000; color:#ffffff; padding:8px 12px;
  cursor:pointer; text-align:right; text-decoration:underline;
}

.panel .panel-body{
  padding-block:clamp(32px, 16px + 3vw, 64px);
}
.panel .panel-body p{ line-height:1.29em; color:#ffffff; }

body.panel-open::before{
  content:"";
  position:fixed;
  inset:0;
  background:#000;
  z-index:19;
  pointer-events:none;
}

body.panel-open{ overflow-x:hidden; }

body.nav-backdrop::before{
  content:"";
  position:fixed;
  inset:0;
  background:#000;
  z-index:254;
}

/* Containers inside panels use fixed side margins from root vars */
.panel :is(.panel-header, .panel-body) > .container{
  max-width:none;
  margin:0;
  padding-inline:var(--panel-edge);
  width:100%;
  box-sizing:border-box;
}

.panel .row{ --gutter-x: min(3rem, calc(var(--panel-edge) * 2)); }

/* Panel action row (right-aligned button) */
.panel-actions{
  padding-right:0;
  display:flex;
  justify-content:flex-end;
}

/* ===== Client Video Preview (Building panel) ===== */
.client-preview {
  position: fixed;              /* follow cursor, independent of layout */
  top: 0;
  left: 0;
  width: 18rem;                 /* ~288px, tweak as needed */
  max-width: 40vw;              /* responsive limit */
  height: auto;
  max-height: 22rem;            /* prevent too tall */
  pointer-events: none;         /* don’t block mouse events */
  object-fit: cover;            /* fill nicely */
  background: rgba(0, 0, 0, 0.3);             /* fallback if no video frame */
  opacity: 0;                   /* hidden by default */
  transform: translateY(-50%); /* only vertical centering */
  transition: opacity 0.25s ease;
  z-index: 9999;                /* on top of everything */
}

.client-list {
  text-decoration: underline;
}

.client-preview.has-frame {
  background: transparent;
}

.client-preview.is-visible {
  opacity: 1;
}

/* ========================================================================== */
/* 09) HERO CAPTION                                                           */
/* ========================================================================== */

.hero-caption{
  position:fixed;
  bottom:calc(clamp(24px, 4vw, 56px) + 48px);
  left:50%;
  right:auto;
  transform:translateX(-50%);
  width:min(100vw, calc(100% - 2 * var(--container-px)));
  z-index:15;
  color:#ffff00;
  font-size: var(--fs-xl);
  font-weight:500;
  line-height:1.4;
  opacity:0;
  transition:opacity .22s ease;
  pointer-events:none;
  text-align:center;
}
.hero-caption.is-visible{ opacity:1; }

.hero-nav{
  position:fixed;
  bottom:clamp(24px, 4vw, 56px);
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:12px;
  z-index:15;
  pointer-events:auto;
}

.hero-dot{
  width:25px;
  height:4px;
  border:2px solid #ffff00;
  background:#ffff00;
  display:block;
  padding:0;
  margin:0;
  cursor:pointer;
  transition:transform .2s ease, background-color .2s ease, border-color .2s ease;
}

.hero-dot.is-active{
  transform:scale(0.6);
}

.hero-dot:hover{
  transform:scale(1.1);
}

.hero-dot:focus-visible{
  outline:2px solid #ffff00;
  outline-offset:2px;
}

.site-email{
  position:fixed;
  bottom:clamp(24px, 4vw, 56px);
  right:var(--container-px);
  z-index:15;
}

@media (min-width: 768px){
  .site-email{ right:50px; }
}

@media (max-width: 767.98px){
  .u-mob-none{ display:none !important; }
}

/* ========================================================================== */
/* 10) TABLES (CV LISTS)                                                      */
/* ========================================================================== */

table, th, td{
  font-weight:normal;
  font-style:normal;
  font-variant:normal;
  border-collapse:collapse;
  color:#fff;
  margin:0 0 0 0 !important;
  padding:0 0 0 0em !important;
}

.tdIndent{
  padding:.3em 0 .5em 1em !important;
  line-height:normal !important;
}
.tdList{ line-height:1.3 !important; }

#publicartList table.cv-ellipsis-table{
  width:100%;
  table-layout:fixed;
}
#publicartList table.cv-ellipsis-table td.tdList:nth-child(2){
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  outline:none;
}
#publicartList table.cv-ellipsis-table td.tdList:nth-child(2).is-truncated{
  cursor:pointer;
}
#publicartList table.cv-ellipsis-table td.tdList:nth-child(2):focus{
  outline:1px dashed #aaa;
}
#publicartList table.cv-ellipsis-table td.tdList:nth-child(2).expanded{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}

/* ========================================================================== */
/* 11) FOOTER                                                                 */
/* ========================================================================== */

/* Align footer content flush with container edges */
.footer-row > [class*="col-"]:last-child{ padding-right:0; }

/* Even 5-column row at xl+ (overrides the col-xl-* width with exact 20% each) */
@media (min-width: 1200px){
  .footer-row > [class*="col-"]{
    flex: 0 0 20%;
    max-width: 20%;
  }
}

/* Tight vertical rhythm on phones (one column, items closer together) */
@media (max-width: 575.98px){
  .footer-row{ --gutter-y: 0.5rem; }
}

/* Sit close to the bottom edge inside the contact panel */
#panel-about .panel-body{ padding-bottom: 1rem; }

/* ========================================================================== */
/* 12) RESPONSIVE                                                             */
/* ========================================================================== */

/* --- Mobile (<= 767.98px) ------------------------------------------------- */
@media (max-width: 767.98px){
  .site-header.nav-open{ --hdr-bg: 1; }

  .burger{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border:0; background:transparent; cursor:pointer;
    color:#FFFF00; position:relative; z-index:11;
  }
  .burger-box{ position:relative; width:26px; height:18px; }
  .burger-inner,
  .burger-inner::before,
  .burger-inner::after{
    position:absolute; left:0; width:100%; height:2px; background:currentColor; content:"";
    transition:transform .2s ease, opacity .2s ease, top .2s ease, bottom .2s ease;
  }
  .burger-inner{ top:50%; transform:translateY(-50%); }
  .burger-inner::before{ top:-8px; }
  .burger-inner::after{ bottom:-8px; }

  .site-header.nav-open .burger{ color:#FFFF00; }
  .site-header.nav-open .burger-inner{ transform:rotate(45deg); }
  .site-header.nav-open .burger-inner::before{ top:0; opacity:0; }
  .site-header.nav-open .burger-inner::after{ bottom:0; transform:rotate(-90deg); }

  .main-nav{ display:none; }
  .site-header.nav-open .main-nav{
    display:block; position:fixed; inset:var(--header-h) 0 0 0; z-index:255;
    background:#000; padding:32px var(--container-px);
    transform:none;   /* override desktop translateX(-50%) which would push the full-screen nav off-screen */
  }
  .site-header.nav-open .main-nav a{
    display:block; color:#ffff00; font-size: var(--fs-xxl);
    font-weight:normal; padding:14px 0;
  }
  .site-header.nav-open .main-nav a:hover{ background:rgba(0,0,0,0); }
  .site-header.nav-open .main-nav span{ display:none; }   /* hide "—" separators in stacked mobile nav */
}

/* Footer copyright left-aligns only on phones (1-col); stays right-aligned at sm+ */
@media (max-width: 575.98px){
  .footer-row .u-right{ text-align:left; }
}

/* --- Desktop (>= 768px) --------------------------------------------------- */
@media (min-width: 768px){
  .burger{ display:none; }
  .main-nav{ display:block; }
  .site-header .container{
    max-width:none !important;
    padding-left:50px;
    padding-right:50px;
  }
  #hero .hero-media{
    transform:scale(1);
    transform-origin:center;
  }
}

/* --- Panel side paddings across widths ----------------------------------- */
@media (max-width: 1600px){ :root{ --panel-edge: var(--panel-edge-lg); } }
@media (max-width: 1400px){ :root{ --panel-edge: var(--panel-edge-lg); } }
@media (max-width: 1200px){ :root{ --panel-edge: var(--panel-edge-lg); } }
@media (max-width:  992px){ :root{ --panel-edge: var(--panel-edge-sm); } }
@media (max-width:  600px){ :root{ --panel-edge: var(--panel-edge-xs); } }

/* ===== ABOUT panel: collapse spacer cells on phone ======================== */
/* Spacers (.col-1.col-md-1) exist only to indent intro paragraphs at md+. On
   phone, hide them and let the col-10 intro cells span full width so all text
   shares the same left margin as the col-12 cells. */
@media (max-width: 767.98px){
  #panel-research .row > .col-1.col-md-1{ display:none; }
  #panel-research .row > .col-10{
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
}

/* ===== Team row (ABOUT panel) ============================================= */
/* "Team" header sits in its own full-width col above the 3 founder bios. We
   collapse the row's vertical gutter and the header's bottom margin so the
   spacing matches the Property/Shelter title-to-body gap (single <p> margin). */
.team-row{ --gutter-y: 0; margin-top: 4rem; }
.team-row > .col-md-12 > p{ margin-bottom: 0; }

/* ===== Logo row (ABOUT panel) ============================================= */
.logo-row{ margin-top: 2rem; }
.logo-row .logo-img{
  display:block;
  height:50px;
  width:auto;
  max-width:100%;
  margin:0 auto;
}

/* ===== Contact panel layout (form centered, footer pinned to bottom) ====== */
#panel-about .panel-body{
  min-height: calc(100dvh - var(--header-h));
  display:flex;
  flex-direction:column;
}
#panel-about .panel-body > .container{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
}
/* Form row: take all spare vertical space and center its content */
#panel-about .panel-body > .container > .row:first-child{
  flex:1 1 auto;
  align-items:center;
}
/* Footer row: pin to the bottom even if the form row above shrinks */
#panel-about .panel-body > .container > .row.footer-row{
  margin-top:auto;
}

/* ===== Contact form (pill style) ========================================== */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(1px,1px,1px,1px); clip-path: inset(50%);
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:1rem;
  max-width:720px;
  margin-inline:auto;
  font-size: var(--fs-lg);   /* match footer u-lg sizing; children inherit */
}

.contact-form .contact-row{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
@media (min-width: 768px){
  .contact-form .contact-row{ flex-direction:row; }
  .contact-form .contact-row > input{ flex:1 1 0; min-width:0; }
}

.contact-form input,
.contact-form textarea{
  width:100%;
  font:inherit;
  color:#fff;
  background:transparent;
  border:1px solid #fff;
  padding:14px 22px;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
  transition: border-color .15s ease, color .15s ease;
}
.contact-form input{ border-radius:999px; }
.contact-form textarea{ border-radius:24px; resize:vertical; min-height:140px; line-height:1.29em; }

.contact-form input::placeholder,
.contact-form textarea::placeholder{ color:rgba(255,255,255,.5); }

.contact-form input:focus,
.contact-form textarea:focus{ border-color:#ffff00; }

.contact-form input:invalid:not(:placeholder-shown),
.contact-form textarea:invalid:not(:placeholder-shown){ border-color:#ffff00; }

.contact-form .cf-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }

.contact-form .contact-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:.25rem;
}

.contact-form .cf-send{
  font:inherit;
  color:#ffff00;
  background:transparent;
  border:1px solid #ffff00;
  border-radius:999px;
  padding:12px 28px;
  cursor:pointer;
  transition: background-color .15s ease, color .15s ease;
}
.contact-form .cf-send:hover,
.contact-form .cf-send:focus-visible{
  background:#ffff00;
  color:#000;
}
.contact-form .cf-send:disabled{
  opacity:.5;
  cursor:not-allowed;
  background:transparent;
  color:#ffff00;
}

.contact-form .cf-status{
  margin:0;
  min-height:1.2em;
  color:#fff;
}
.contact-form .cf-status.is-error{ color:#ffff00; }