@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&family=Libre+Bodoni:wght@500;600;700&display=swap');

:root{
  --navy:#09284f;
  --green:#075f3d;
  --gold:#e79b00;
  --ink:#101b2b;
  --s:calc(100vw / 1024);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#FCFAF8;color:var(--navy);font-family:"DM Sans",Arial,sans-serif}
.page{position:relative;width:100%;max-width:none;margin:0 auto;overflow:hidden;background:#FCFAF8}

/* Base artwork is 1024px wide. Every desktop measurement below scales with viewport width. */
.header{position:relative;width:100%;height:calc(142 * var(--s));min-height:100px;background:#FCFAF8}
.logo-link{position:absolute;left:calc(18 * var(--s));top:calc(12 * var(--s));width:calc(327 * var(--s));height:calc(125 * var(--s));display:block}
.logo-link img{width:100%;height:100%;object-fit:contain;display:block}
.nav{position:absolute;left:calc(445 * var(--s));top:calc(47 * var(--s));right:calc(34 * var(--s));height:calc(25 * var(--s));display:flex;justify-content:space-between;align-items:center}
.nav a{font-size:clamp(11px,calc(15 * var(--s)),22px);line-height:1;color:#091f43;text-decoration:none;white-space:nowrap;font-weight:500}

.hero{position:relative;width:100%;height:calc(856 * var(--s));min-height:600px;background:#FCFAF8}
.photos{position:absolute;inset:0;pointer-events:none}
.photo{position:absolute;display:block;height:auto;object-fit:contain}
.photos-left .lt{left:0;top:calc(-1 * var(--s));width:calc(334 * var(--s))}
.photos-left .lm{left:0;top:calc(195 * var(--s));width:calc(340 * var(--s))}
.photos-left .lb{left:0;top:calc(474 * var(--s));width:calc(315 * var(--s))}
.photos-right .rt{right:0;top:calc(-38 * var(--s));width:calc(326 * var(--s))}
.photos-right .rm{right:0;top:calc(235 * var(--s));width:calc(327 * var(--s))}
.photos-right .rb{right:0;top:calc(479 * var(--s));width:calc(326 * var(--s))}

.hero-copy{position:absolute;left:calc(327 * var(--s));top:calc(27 * var(--s));width:calc(370 * var(--s));text-align:center;z-index:5}
.hero-title-image{width:calc(386 * var(--s));height:auto;display:block;margin-left:calc(-7 * var(--s))}
.hero-script-image{width:calc(304 * var(--s));height:auto;display:block;margin:calc(4 * var(--s)) auto 0}
.hero-gold-heart{display:block;color:var(--gold);font:calc(46 * var(--s))/1 Georgia,serif;height:calc(49 * var(--s));margin-top:calc(1 * var(--s))}
.hero-copy h1{font-size:clamp(17px,calc(23 * var(--s)),34px);line-height:1.18;margin:0;font-weight:700;color:var(--navy);letter-spacing:-.02em}
.hero-copy>p{font-size:clamp(11px,calc(15 * var(--s)),22px);line-height:1.57;margin:calc(13 * var(--s)) 0 0;color:#172235;font-weight:400}

.login-card{position:absolute;top:calc(526 * var(--s));left:calc(1 * var(--s));width:calc(367 * var(--s));height:calc(279 * var(--s));background:#FCFAF8;border:0;border-radius:calc(12 * var(--s));box-shadow:0 calc(4 * var(--s)) calc(18 * var(--s)) rgba(16,31,51,.12);padding:calc(42 * var(--s)) calc(23 * var(--s)) calc(12 * var(--s));margin:0}
.login-badge{position:absolute;left:50%;top:calc(-17 * var(--s));transform:translateX(-50%);width:calc(48 * var(--s));height:calc(48 * var(--s));border-radius:50%;background:#08734a;border:calc(4 * var(--s)) solid #FCFAF8;color:#FCFAF8;display:flex;align-items:center;justify-content:center;font-size:calc(24 * var(--s))}
.login-card h2{font-size:clamp(17px,calc(23 * var(--s)),33px);line-height:1.1;margin:0 0 calc(5 * var(--s));color:var(--navy)}
.login-subtitle{font-size:clamp(10px,calc(13 * var(--s)),19px);line-height:1.45;margin:0 0 calc(15 * var(--s));color:#172337}
.search-area{position:relative}
.search-box{height:calc(49 * var(--s));min-height:38px;border:1px solid #ccd1d9;border-radius:calc(8 * var(--s));background:#FCFAF8;display:flex;align-items:center;padding:0 calc(12 * var(--s));gap:calc(10 * var(--s))}
.building-icon{font-size:calc(19 * var(--s));color:#7a8290;line-height:1}
.search-box input[type=text]{border:0;outline:0;flex:1;min-width:0;background:transparent;font:clamp(11px,calc(14 * var(--s)),20px)/1 "DM Sans",Arial,sans-serif;color:#303b4b}
.search-box input::placeholder{color:#747b87}
.chevron{font-size:calc(22 * var(--s));line-height:1;color:#20344a}
.clear-school{border:0;background:none;color:#6d7581;cursor:pointer;font-size:calc(20 * var(--s));padding:0}
.results{position:absolute;left:0;right:0;top:calc(53 * var(--s));max-height:calc(180 * var(--s));overflow:auto;background:#FCFAF8;border:1px solid #d0d5dd;border-radius:calc(8 * var(--s));box-shadow:0 calc(8 * var(--s)) calc(20 * var(--s)) rgba(0,0,0,.15);z-index:30;text-align:left;line-height:normal}
.result{display:block;width:100%;padding:calc(9 * var(--s)) calc(12 * var(--s));border:0;border-bottom:1px solid #edf0f3;background:#FCFAF8;text-align:left;cursor:pointer;color:var(--navy)}
.result:hover,.result.active{background:#f1f6ed}
.result strong{display:block;font-size:clamp(10px,calc(12 * var(--s)),17px);line-height:1.3}
.result small{display:block;font-size:clamp(9px,calc(10 * var(--s)),15px);color:#777f8a;margin-top:2px}
.empty{padding:calc(11 * var(--s));font-size:clamp(10px,calc(12 * var(--s)),17px);line-height:1.4;color:#777f8a}
.error,.status{min-height:calc(13 * var(--s));font-size:clamp(8px,calc(10 * var(--s)),14px);line-height:1.2;text-align:left}
.error{color:#b32626}
.status{color:#075f3d}
.login-button{display:block;width:100%;height:calc(43 * var(--s));min-height:35px;border:0;border-radius:calc(6 * var(--s));background:#08734a;color:#FCFAF8;font:500 clamp(13px,calc(17 * var(--s)),24px)/1 "DM Sans",Arial,sans-serif;cursor:pointer;margin-top:calc(1 * var(--s));box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)}
.help{font-size:clamp(10px,calc(13 * var(--s)),19px);line-height:1.2;margin-top:calc(5 * var(--s));color:#172337}
.help a{color:#172337;text-decoration:underline;text-underline-offset:2px}

.left-city{position:absolute;left:calc(53 * var(--s));top:calc(762 * var(--s));width:calc(250 * var(--s));height:auto}
.right-bridge{position:absolute;right:calc(31 * var(--s));top:calc(759 * var(--s));width:calc(267 * var(--s));height:auto}

.market-section{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:calc(18 * var(--s));padding:0 calc(37 * var(--s)) calc(18 * var(--s));background:#FCFAF8}
.feature{height:calc(291 * var(--s));min-height:220px;border-radius:calc(11 * var(--s));padding:calc(15 * var(--s)) calc(20 * var(--s)) calc(13 * var(--s));overflow:hidden}
.green-feature{background:linear-gradient(120deg,#f2f8ed 0%,#f8faf5 100%)}
.gold-feature{background:linear-gradient(120deg,#FCFAF87e4 0%,#FCFAF89ee 100%)}
.feature-main{display:flex;align-items:center;height:calc(142 * var(--s));gap:calc(18 * var(--s))}
.feature-icon{width:calc(130 * var(--s));height:calc(130 * var(--s));object-fit:contain;flex:0 0 calc(130 * var(--s))}
.feature-text h2{font-size:clamp(19px,calc(25 * var(--s)),36px);line-height:1.08;margin:0 0 calc(6 * var(--s));font-weight:700}
.green-feature h2{color:var(--green)}
.gold-feature h2{color:var(--navy)}
.feature-text p{font-size:clamp(10px,calc(13 * var(--s)),19px);line-height:1.35;margin:0 0 calc(10 * var(--s));color:#121d2d}
.cta{height:calc(34 * var(--s));min-height:28px;width:calc(202 * var(--s));display:flex;align-items:center;justify-content:space-between;padding:0 calc(12 * var(--s));border-radius:calc(5 * var(--s));font-size:clamp(10px,calc(13 * var(--s)),18px);line-height:1;text-decoration:none;color:#FCFAF8}
.cta.green{background:#08734a}.cta.navy{background:#092d5c}.cta span{font-size:calc(22 * var(--s))}
.divider{height:1px;background:#b8c3b8;margin:calc(12 * var(--s)) 0 calc(12 * var(--s))}
.mini-row{display:grid;grid-template-columns:1fr 1fr;height:calc(92 * var(--s))}
.mini{display:flex;gap:calc(10 * var(--s));align-items:flex-start;padding-left:calc(2 * var(--s))}
.mini+.mini{border-left:1px solid #bcc6c0;padding-left:calc(17 * var(--s))}
.mini img{width:calc(64 * var(--s));height:calc(64 * var(--s));object-fit:contain;flex:0 0 calc(64 * var(--s))}
.mini h3{font-size:clamp(11px,calc(14 * var(--s)),20px);line-height:1.15;margin:calc(5 * var(--s)) 0 calc(5 * var(--s));color:#102a4c}
.green-feature .mini h3{color:#075f3d}
.mini p{font-size:clamp(9px,calc(11 * var(--s)),16px);line-height:1.4;margin:0;color:#172235}

.values{height:calc(127 * var(--s));display:grid;grid-template-columns:repeat(4,1fr);padding:calc(14 * var(--s)) calc(35 * var(--s));border-top:1px solid #eef0f1;background:#FCFAF8}
.values article{display:flex;gap:calc(12 * var(--s));align-items:flex-start;padding:0 calc(18 * var(--s))}
.values article+article{border-left:1px solid #c8ced3}
.values img{width:calc(70 * var(--s));height:calc(70 * var(--s));object-fit:contain;flex:0 0 calc(70 * var(--s))}
.values h3{font-size:clamp(11px,calc(14 * var(--s)),20px);line-height:1.15;margin:calc(10 * var(--s)) 0 calc(5 * var(--s));color:var(--navy)}
.values p{font-size:clamp(9px,calc(11 * var(--s)),16px);line-height:1.4;margin:0;color:#172235}

.footer{height:calc(108 * var(--s));position:relative;overflow:hidden;background:#092c52}
.skyline{position:absolute;left:0;bottom:0;width:100%;height:calc(94 * var(--s));object-fit:cover}
.footer-title-image{position:absolute;z-index:2;left:calc(198 * var(--s));top:calc(14 * var(--s));width:calc(626 * var(--s));height:auto}

/* True full-width desktop scaling. At 1024px this aligns to the supplied reference. */
@media(max-width:767px){
  .header{height:145px}
  .logo-link{left:16px;top:8px;width:270px;height:104px}
  .nav{left:12px;right:12px;top:118px;gap:8px;justify-content:space-between}
  .nav a{font-size:10px}
  .hero{height:1040px}
  .photos-left .lt{left:-8px;top:0;width:54vw}
  .photos-left .lm{left:-8px;top:145px;width:55vw}
  .photos-left .lb{display:none}
  .photos-right .rt{right:-8px;top:0;width:54vw}
  .photos-right .rm{right:-8px;top:145px;width:55vw}
  .photos-right .rb{display:none}
  .hero-copy{left:4vw;top:380px;width:92vw}
  .hero-title-image{width:70vw;margin:0 auto}
  .hero-script-image{width:58vw;margin-top:4px}
  .hero-copy h1{font-size:21px}
  .hero-copy>p{font-size:12px}
  .login-card{top:365px;left:50%;transform:translateX(-50%);width:min(367px,92vw);height:279px;padding:42px 23px 12px}
  .left-city{top:935px;left:3vw;width:42vw}
  .right-bridge{top:940px;right:1vw;width:46vw}
  .market-section{grid-template-columns:1fr;padding:0 16px 16px;gap:14px}
  .feature{height:auto;min-height:300px}
  .feature-main{height:145px}
  .feature-icon{width:125px;height:125px;flex-basis:125px}
  .values{height:auto;grid-template-columns:1fr 1fr;padding:12px}
  .values article{padding:10px;gap:8px}
  .values article+article{border-left:0}
  .footer{height:100px}
  .footer-title-image{left:6%;top:12px;width:88%}
}

@media(max-width:430px){
  .nav a{font-size:9px}
  .hero{height:1010px}
  .hero-copy{top:360px}
  .hero-copy h1{font-size:18px}
  .hero-copy>p{font-size:11px}
  .login-card{top:340px}
  .feature-main{gap:8px}
  .feature-icon{width:105px;height:105px;flex-basis:105px}
  .feature-text h2{font-size:21px}
  .mini img{width:52px;height:52px;flex-basis:52px}
}


/* =========================================================
   MOBILE REBUILD
   The desktop uses the reference coordinate system above.
   Mobile deliberately switches to a clean stacked composition:
   no clipped photo edges, no overlapping cards, and a real menu.
   ========================================================= */

.menu-toggle{
  display:none;
  position:absolute;
  right:16px;
  top:18px;
  width:44px;
  height:44px;
  padding:9px;
  border:1px solid rgba(9,40,79,.14);
  border-radius:10px;
  background:#FCFAF8;
  z-index:100;
  cursor:pointer;
}
.menu-toggle span{
  display:block;
  width:24px;
  height:2px;
  margin:5px auto;
  background:#09284f;
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.menu-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.is-open span:nth-child(2){opacity:0}
.menu-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.footer-headline{
  position:absolute;
  z-index:5;
  left:5%;
  right:5%;
  top:16px;
  text-align:center;
  white-space:nowrap;
  line-height:1;
  font-size:clamp(23px,5.9vw,52px);
  letter-spacing:-.02em;
}
.footer-white,
.footer-gold{
  font-family:"Caveat","Brush Script MT","Segoe Script",cursive;
  font-weight:500;
}
.footer-white{color:#FCFAF8}
.footer-gold{color:#f2a400}
.footer-heart{
  color:#f2a400;
  font-family:Georgia,serif;
  font-size:.95em;
  margin-left:7px;
  vertical-align:-.02em;
}

@media (max-width: 767px){

  body{overflow-x:hidden}
  .page{width:100%;overflow:hidden}

  /* Header: sharp logo, then a real hamburger. */
  .header{
    height:88px;
    min-height:88px;
    background:#FCFAF8;
    position:relative;
    z-index:80;
  }
  .logo-link{
    left:14px;
    top:8px;
    width:238px;
    height:72px;
  }
  .logo-link img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:left center;
  }
  .menu-toggle{display:block}

  .nav{
    position:absolute;
    left:10px;
    right:10px;
    top:78px;
    width:auto;
    height:auto;
    display:none;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding:7px;
    background:#FCFAF8;
    border:1px solid #e3e7eb;
    border-radius:12px;
    box-shadow:0 12px 28px rgba(7,31,55,.16);
  }
  .nav.is-open{display:flex}
  .nav a{
    display:block;
    padding:13px 14px;
    font-size:15px;
    line-height:1;
    border-radius:8px;
  }
  .nav a:hover{background:#f2f6f0}

  /* Mobile hero is a vertical, non-overlapping composition. */
  .hero{
    height:auto;
    min-height:0;
    padding:0 14px 28px;
    background:#FCFAF8;
  }

  .photos{
    position:relative;
    inset:auto;
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    padding:7px 0 10px;
  }
  .photo{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    width:100%!important;
    height:auto!important;
    max-width:none;
    display:block;
    object-fit:contain;
    object-position:center;
  }
  /* Preserve all of each framed image rather than cropping it. */
  .photos-left,.photos-right{
    position:absolute;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    padding:0;
    pointer-events:none;
  }
  .photos-left{
    left:14px;
    right:14px;
    top:0;
    width:auto;
  }
  .photos-right{
    display:none;
  }
  .photos-left .lt,
  .photos-left .lm,
  .photos-left .lb{
    grid-column:span 1;
  }
  .photos-left .lb{display:block}

  /* Put the six images into one mobile collage using both containers. */
  .photos-left{
    visibility:visible;
  }
  .photos-left .lt{grid-area:a}
  .photos-left .lm{grid-area:b}
  .photos-left .lb{grid-area:c}
  .photos-left{
    grid-template-areas:
      "a b"
      "c d";
  }
  .photos-right{
    display:grid;
    left:14px;
    right:14px;
    width:auto;
    top:0;
    visibility:visible;
    grid-template-areas:"a b" "c d";
  }
  .photos-right .rt{grid-area:a}
  .photos-right .rm{grid-area:b}
  .photos-right .rb{grid-area:c}

  /* Since the two photo groups occupy the same grid, merge them visually
     by hiding the first group's empty fourth slot and let the hero copy
     begin after a predictable image band. */
  .photos-left .lt,
  .photos-left .lm,
  .photos-left .lb,
  .photos-right .rt,
  .photos-right .rm,
  .photos-right .rb{
    width:100%!important;
  }

  /* Mobile image band: two columns, all images fully visible. */
  .photos-left{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "a c";
    height:auto;
    z-index:1;
  }
  .photos-left .lt{grid-area:a}
  .photos-left .lm{display:none}
  .photos-left .lb{grid-area:c}
  .photos-right{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "a c";
    z-index:2;
  }
  .photos-right .rt{grid-area:a}
  .photos-right .rm{display:none}
  .photos-right .rb{grid-area:c}

  /* Make the two photo groups form one clean row. */
  .photos-left,
  .photos-right{
    top:8px;
    height:155px;
    align-items:start;
  }
  .photos-left .lt,
  .photos-left .lb,
  .photos-right .rt,
  .photos-right .rb{
    max-height:155px;
    object-fit:contain;
  }

  .hero-copy{
    position:relative;
    left:auto;
    top:auto;
    width:100%;
    z-index:10;
    padding-top:165px;
    text-align:center;
  }
  .hero-title-image{
    width:min(390px,88vw);
    margin:0 auto;
    height:auto;
  }
  .hero-script-image{
    width:min(320px,75vw);
    margin:6px auto 0;
  }
  .hero-gold-heart{
    font-size:38px;
    height:40px;
    margin-top:1px;
  }
  .hero-copy h1{
    font-size:22px;
    line-height:1.18;
    margin:0;
  }
  .hero-copy>p{
    font-size:13px;
    line-height:1.52;
    margin:10px auto 0;
    max-width:430px;
  }

  .login-card{
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    width:min(390px,100%);
    height:auto;
    min-height:278px;
    margin:22px auto 0;
    padding:42px 20px 13px;
  }
  .login-badge{
    width:48px;height:48px;top:-18px;
  }
  .login-card h2{font-size:22px}
  .login-subtitle{font-size:13px}
  .search-box{height:50px}
  .search-box input[type=text]{font-size:14px}
  .login-button{height:44px;font-size:17px}
  .help{font-size:13px}

  .left-city,.right-bridge{
    display:none;
  }

  .market-section{
    display:block;
    padding:0 14px 18px;
  }
  .feature{
    width:100%;
    height:auto;
    min-height:0;
    margin-bottom:14px;
    padding:15px 16px 14px;
  }
  .feature-main{
    height:auto;
    min-height:145px;
    gap:12px;
  }
  .feature-icon{
    width:112px;
    height:112px;
    flex:0 0 112px;
  }
  .feature-text h2{
    font-size:24px;
  }
  .feature-text p{
    font-size:12px;
  }
  .cta{
    width:100%;
    max-width:205px;
    font-size:12px;
  }
  .mini-row{
    height:auto;
    grid-template-columns:1fr 1fr;
  }
  .mini{
    gap:7px;
    min-width:0;
  }
  .mini+.mini{
    padding-left:10px;
  }
  .mini img{
    width:50px;
    height:50px;
    flex:0 0 50px;
  }
  .mini h3{font-size:13px}
  .mini p{font-size:10px}

  .values{
    height:auto;
    grid-template-columns:1fr 1fr;
    padding:10px 8px 14px;
    gap:0;
  }
  .values article{
    min-width:0;
    padding:10px 7px;
    gap:7px;
  }
  .values article:nth-child(odd){
    border-left:0;
  }
  .values article:nth-child(even){
    border-left:1px solid #c8ced3;
  }
  .values img{
    width:55px;
    height:55px;
    flex:0 0 55px;
  }
  .values h3{font-size:12px;margin-top:4px}
  .values p{font-size:9px}

  .footer{
    height:112px;
  }
  .skyline{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center bottom;
  }
  .footer-headline{
    top:15px;
    font-size:clamp(25px,7vw,36px);
  }
}

@media (max-width: 430px){
  .logo-link{width:220px;height:68px}
  .menu-toggle{right:12px;top:14px}
  .hero-copy{padding-top:160px}
  .hero-title-image{width:90vw}
  .hero-script-image{width:78vw}
  .hero-copy h1{font-size:20px}
  .hero-copy>p{font-size:12px}
  .feature-main{min-height:132px}
  .feature-icon{width:96px;height:96px;flex-basis:96px}
  .feature-text h2{font-size:21px}
  .mini img{width:45px;height:45px;flex-basis:45px}
  .mini h3{font-size:12px}
  .mini p{font-size:9px}
  .footer{height:105px}
  .footer-headline{font-size:25px;white-space:normal;line-height:.95}
}

@media (min-width:768px){
  .menu-toggle{display:none!important}
}


/* =========================================================
   V5 MOBILE — dedicated, deterministic layout
   ========================================================= */

.mobile-gallery{display:none}

@media (max-width:767px){
  /* Keep the desktop photo layers completely out of mobile flow.
     Mobile gets a dedicated six-image gallery instead. */
  .photos-left,

  .photos-right{
    display:none !important;
  }

  .hero{
    height:auto !important;
    min-height:0 !important;
    padding:0 14px 28px !important;
  }

  .mobile-gallery{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    width:100%;
    padding:8px 0 4px;
    position:relative;
    z-index:2;
  }

  .mobile-gallery img{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    object-fit:contain;
    object-position:center;
    align-self:start;
  }

  /* Every photo is fully visible. */
  .mobile-gallery img:nth-child(1),
  .mobile-gallery img:nth-child(2){
    aspect-ratio:329 / 265;
  }
  .mobile-gallery img:nth-child(3),
  .mobile-gallery img:nth-child(4){
    aspect-ratio:339 / 305;
  }
  .mobile-gallery img:nth-child(5),
  .mobile-gallery img:nth-child(6){
    aspect-ratio:315 / 276;
  }

  .hero-copy{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    padding-top:10px !important;
    z-index:10;
  }

  .hero-title-image{
    width:min(390px,92vw) !important;
    margin:0 auto !important;
  }

  .hero-script-image{
    width:min(325px,78vw) !important;
    margin:5px auto 0 !important;
  }

  .hero-gold-heart{
    font-size:37px !important;
    height:41px !important;
  }

  .hero-copy h1{
    font-size:21px !important;
    line-height:1.2 !important;
  }

  .hero-copy>p{
    font-size:12.5px !important;
    line-height:1.52 !important;
    margin:10px auto 0 !important;
  }

  .login-card{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    width:min(390px,100%) !important;
    height:auto !important;
    min-height:278px;
    margin:22px auto 0 !important;
  }

  .left-city,.right-bridge{display:none !important}

  /* Footer: fixed vertical bands, never overlap. */
  .footer{
    height:155px !important;
    min-height:155px !important;
    position:relative !important;
    overflow:hidden !important;
    background:#092c52;
  }

  .footer-headline{
    position:absolute !important;
    left:10px !important;
    right:10px !important;
    top:15px !important;
    height:52px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    white-space:normal !important;
    line-height:1 !important;
    font-family:"Caveat","Brush Script MT","Segoe Script",cursive !important;
    font-size:clamp(26px,7.2vw,38px) !important;
    z-index:5 !important;
  }

  .footer-white,
  .footer-gold{
    font-family:"Caveat","Brush Script MT","Segoe Script",cursive !important;
    font-weight:600 !important;
    display:inline-block;
  }

  .footer-heart{
    font-family:Georgia,serif !important;
    font-size:.95em !important;
    line-height:1 !important;
  }

  .skyline{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:80px !important;
    object-fit:cover !important;
    object-position:center bottom !important;
    z-index:1 !important;
  }
}

@media (max-width:430px){
  .header{height:82px !important}
  .logo-link{
    width:215px !important;
    height:65px !important;
    left:12px !important;
    top:7px !important;
  }
  .menu-toggle{
    right:10px !important;
    top:13px !important;
  }

  .mobile-gallery{
    gap:8px !important;
    padding-top:7px !important;
  }

  .hero-copy{padding-top:8px !important}
  .hero-title-image{width:91vw !important}
  .hero-script-image{width:79vw !important}
  .hero-copy h1{font-size:19px !important}
  .hero-copy>p{font-size:11.5px !important}

  .footer{
    height:145px !important;
    min-height:145px !important;
  }
  .footer-headline{
    top:13px !important;
    font-size:25px !important;
    gap:4px !important;
  }
  .skyline{
    height:74px !important;

  }
}