/* Option A — soft green background, banner = logo height, full width */
:root{ --brand-red:#C61A1A; }

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
  color:#222;
  background: url('assets/mojave-soft-5k.jpg?v=mojave1') top center / 100% auto no-repeat fixed;
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

.center{
  min-height: 100dvh;
  display: grid;
  place-items: center;
}

.banner{
  width: 100vw;
  background: #fff;
  display: grid;
  place-items: center;
  padding: 0;
}

.brand{
  max-width: min(34vw, 480px);
  height: auto;
}

.footer{
  position: fixed;
  left: 0; right: 0;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  z-index: 10;
}

.ig, .soon{
  color: var(--brand-red);
  text-decoration: none;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(18px, 3.6vw, 32px);
}

.ig:hover{ text-decoration: underline; }

@media (max-width:560px){
  .brand{ max-width: min(48vw, 420px); }
  .footer{ padding: 10px 14px; }
}