@font-face {
  font-family: 'Lovelo';
  src: url('../img/Lovelo.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Smooth rendering */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* === Make Lovelo the default everywhere === */
:root {
  --font-sans: 'Lovelo', system-ui, -apple-system, 'Segoe UI',
               Roboto, Helvetica, Arial, sans-serif;
}

/* Keep body text readable */
html, body, p, li, a, input, textarea, button,
.w3-content, .w3-container, .w3-panel, .w3-table {
  font-family: "Lato", sans-serif !important;
  text-transform: none !important;
}

/* Use Lovelo just for headings & navbar items */
h1, h2, h3, h4, h5, h6,
.w3-bar .w3-bar-item {
  font-family: 'Lovelo', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  text-transform: none !important; /* stop any accidental uppercase */
  letter-spacing: .02em;
}

.heading {
  color: #1e2c34;
  font-weight: 700;
  font-size: 45px;
  margin: 0 0;
}

.subheading {
  color:#1e2c34;
  font-size: 17px;
  margin: 0 0;
}

/* HERO / PARALLAX (safe default = no parallax) */
.bgimg-1,
.bgimg-2,
.bgimg-3 {
  /* no fixed attachment — avoids Windows/GPU blank-image bug */
  background-attachment: scroll;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg-1 {
  /* use an absolute path so it never depends on CSS file location */
  background-image: url('../img/cover.png');
  min-height: 100vh;     /* more robust than 100% */
  position: relative;
}

/* dim overlay */
.bgimg-1::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  pointer-events: none;
  z-index: 0;
}
/* ensure hero content sits above the overlay */
.bgimg-1 .w3-display-middle { z-index: 1; }

/* Other sections that reuse the same image */
.bgimg-2,
.bgimg-3 {
  background-image: url('/assets/img/cover.png');
  min-height: 400px;
}

/* OPTIONAL: try parallax only on larger screens (if you still want it) */
@media (min-width: 1024px) {
  .bgimg-1,
  .bgimg-2,
  .bgimg-3 {
    background-attachment: fixed;   /* remove this block if you never want parallax */
  }
}

.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1600px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
    min-height: 400px;
  }
} 
.hero-logo {
  width: clamp(320px, 42vw, 1100px);
  aspect-ratio: 2 / 1;   /* <- width : height = 2 : 1 */
  height: auto;          /* height is derived from aspect-ratio */
  object-fit: contain;   /* show the whole image, no stretch (letterboxes if needed) */
  display: block;        /* safer for centering/layout */
  max-width: 95vw;       /* optional safety */
}
@media (max-width: 480px) {
  .hero-logo { width: 70vw; }
}

.thumb {
  width: 100%;
  aspect-ratio: 4 / 3;     /* consistent tiles */
  object-fit: cover;        /* crop nicely without distortion */
  border-radius: 6px;       /* small rounding, tweak if you want */
}
/* Modal: full-viewport stage that works on mobile */
#modal01{
  padding-top:0 !important;
  display:none;                 /* JS sets to flex */
  align-items:center;
  justify-content:center;
  touch-action: pan-y;
  overscroll-behavior: contain;
  overflow:hidden;              /* kill sideways scroll without clipping imgs */
  z-index:10000;
}

/* Make the content a true fullscreen stage using dynamic VH units */
#modal01 .w3-modal-content{
  position:fixed;
  inset:0;                      /* top:0;right:0;bottom:0;left:0 */
  width:100vw;
  height:100dvh;                /* dynamic viewport height fixes iOS toolbar jumps */
  max-width:100vw;
  max-height:100dvh;
  margin:0;
  background:transparent;
  box-shadow:none;
  padding:0;
  /* no overflow here */
}

/* Fallbacks for older browsers */
@supports not (height:100dvh){
  #modal01 .w3-modal-content{
    height:100svh;              /* small viewport height */
    max-height:100svh;
  }
}
@supports not (height:100svh){
  #modal01 .w3-modal-content{
    height:100vh;
    max-height:100vh;
  }
}

/* Two stacked images that slide */
#modal01 .modal-img{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%);
  max-width:92vw;
  max-height:92dvh;             /* respect dynamic VH on mobile */
  width:auto; height:auto;
  will-change:transform;
}
@supports not (max-height:92dvh){
  #modal01 .modal-img{ max-height:92vh; }
}
#modal01 .modal-img.anim{ transition:transform 300ms ease; }

/* Desktop arrows (hidden on phones) */
#modal01 .modal-arrow{
  position:absolute; top:50%;
  transform:translateY(-50%);
  font-size:40px;
  background:transparent;
  color:#fff;
  border:0;
  padding:12px 16px;
  cursor:pointer;
  z-index:10001;
}
#modal01 .modal-arrow.left{ left:12px; }
#modal01 .modal-arrow.right{ right:12px; }
#modal01 .modal-arrow:hover{ background:rgba(255,255,255,0.12); border-radius:8px; }
@media (max-width:768px){ #modal01 .modal-arrow{ display:none; } }

/* Close X */
#modal01 .w3-display-topright{
  position:fixed; top:16px; right:16px; z-index:10002;
}


/* Phones: 2-up square grid for portfolio thumbnails */
@media (max-width: 600px) {
  #portfolio .w3-row-padding { margin: 0 -6px; }                         /* tighter gutters */
  #portfolio .w3-row-padding .w3-col { width: 50% !important; padding: 6px !important; }
  

  /* make each thumb a square and crop nicely */
  #portfolio img.thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 8px;
  }
}

#portfolio .w3-row-padding > .w3-col { padding-bottom: 16px; }


.w3-top { z-index: 9999 !important; }


/* 1) Initial state (over the hero): make links ghostwhite */
#myNavbar { background: transparent; }
#myNavbar .w3-bar-item { color: ghostwhite !important; }

/* Optional nicer hover while over hero */
#myNavbar .w3-bar-item:hover { background: rgba(255,255,255,.18) !important; color: ghostwhite !important; }

/* 2) Scrolled state: when JS adds .w3-white, switch to your dark color */
#myNavbar.w3-white .w3-bar-item { color: #1e2c34 !important; }
#myNavbar.w3-white .w3-bar-item:hover { background: #eee !important; color: #1e2c34 !important; }

/* Ensure the top bar stays above the hero/logo */
.w3-top { z-index: 9999 !important; }
/* Desktop/top bar */
#myNavbar .w3-bar-item,
#navDemo  .w3-bar-item {
  font-family: 'Lovelo', sans-serif !important;
  font-size: 23px !important;
}

/* Brand button (matches your dark UI color) */
.btn-primary{background:#1e2c34!important;color:ghostwhite!important;border-radius:6px}
.btn-primary:hover{filter:brightness(1.1)}

/* Right-align the buttons only on large screens */
@media (min-width:993px){
  .w3-right-align-on-large{ text-align:right; }
}

/* Center the two contact columns vertically on desktop */
@media (min-width: 993px){
  #contact .w3-row{
    display:flex;
    align-items:center;
  }
  #contact .w3-row > .w3-col{ float:none; }
}

/* Center buttons inside the right column */
#contact .actions{ text-align:center; }
#contact .actions .w3-button{
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  width: 260px;
  margin: 12px auto;
}

.contact-text {
  font-size: 20px;
}

.service-card { min-height: 150px; }