:root{
  --page-pad: clamp(16px, 4vw, 64px);
  --section-y: clamp(32px, 6vw, 80px);
}

html, body {
  width: 100%;
  margin: 0;
  overflow-x: clip;
}

body {
  background: #fff;
}

.container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--section-y) var(--page-pad);
  box-sizing: border-box;
}

.header-inner{display:flex;align-items:center;justify-content:space-between}
.site-header{background:#fff;position:relative;top:0;z-index:50;border-bottom:1px solid #fff}
.logo-svg, .wordmark-svg{height:48px;display:block}

/* Two-column layout helper */
.two-column {
  display: flex;
  width: 100%;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  justify-content: space-between;
}
.two-column.reverse{flex-direction:row-reverse}

/* HERO */
.hero-left h1{font-size:2rem;margin-bottom:10px}
.lead{color:var(--muted)}

/* Rotator styles */
.gallery-rotator {
  position: relative;
  flex: 1 1 0;
  min-width: 300px;
  min-height: 420px;
  height: 60vh;   /* VERY IMPORTANT */
  border-radius: px;
  background: #f7f7f7;
}

.rotator-clip {
  width: 100%;
  height: 100%;
  overflow: hidden;       /* this keeps images cropped */
  border-radius: 0px;
}

.rotator-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.rotator-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease, transform .6s ease;
  transform: scale(1.02);
  z-index: 1;
}

.rotator-item.active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

.rotator-controls { position: absolute; right: 12px; top: 12px; z-index: 5; display:flex; gap:8px; }
.rotator-controls button { background: rgba(255,255,255,0.95); border:1px solid #e6e6e6; padding:6px 8px; border-radius:6px; cursor:pointer; }


/* overlay svg bottom-left */
.overlay-svg{position:absolute;z-index:4;pointer-events:none}
.overlay-bottom-left{left:8px;bottom:8px;width:72px;height:auto;opacity:.95}

/* gallery-right-text */
.gallery-right-text{flex:1;padding:20px}
.small-decor{  margin-left: 122px;width:300px;height:auto;margin-top:40px;opacity:.95}

/* About section: black background for text column and image on right */
.about {
  width: 100%;
  background: #000;   /* full-width black */
  padding: var(--section-y) 0;    /* vertical spacing */
}

.about .container {
  display: flex;
  width: 100%;
  max-width: none;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

.about-text {
  flex: 1;
  color: white;
}

.about-image {
  flex: 1;
}

.about-image img {
  width: 100%;
  border-radius: 0px;
}

.small-decor2{  margin-left: 122px;width:120px;height:auto;margin-top:40px;opacity:.95}

/* project gallery */
.project-gallery {
  margin: 0;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
  box-sizing: border-box;
}
.project-gallery .gallery-stage {
  width: 100%;
  height: min(70vh, 820px);
  min-height: 360px;
}
.gallery-controls{
  position: static;  display: flex;  justify-content: center;  align-items: center;  gap: 18px;  margin-top: 20px; }
.gallery-controls button{padding:6px 10px;border-radius:6px;border:1px solid #ddd;background:#fff;cursor:pointer}
.gallery-scroll{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;padding:12px 0}
.gallery-item{flex:0 0 300px;border-radius:6px;overflow:hidden}
.gallery-item img{width:100%;height:220px;object-fit:cover}

/* contact */
.contact {
  width: 100%;
  background: #000;
  color: #fff;
  padding: var(--section-y) 0 80px;
  margin: 0;
}

.contact-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 var(--page-pad);
  box-sizing: border-box;
  display: flex;
  gap: 48px;
  align-items: center;
}

.contact-section{align-items:center;padding-bottom:120px}
.contact-left{flex:0 0 260px}
.contact-decor{width:220px}
.contact-right{flex:1;padding-left:20px}

/* responsive */
@media (max-width: 900px){
  .two-column{flex-direction:column}
  .gallery-rotator { height: 50vh; min-height: 300px; }
  .gallery-controls{position:static;margin-top:10px}
  .decor-arrow { width: 80px; bottom: 12px; right: 12px; }
  .header-inner{padding:12px var(--gutter)}
  .logo-svg, .wordmark-svg{height:40px}
}

/* visually-hidden for screen readers */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* position of top-right svg */
.top-right-controls { display:flex; align-items:center; gap:12px; }
.contact-link { display:inline-flex; align-items:center; }
.contact-svg { height:42px; width:auto; display:block; pointer-events:auto; }
@media (max-width:600px){
  .contact-svg { height:34px; }
}

.top-right-controls {
  position: fixed;   /* makes it follow scroll */
  top: 24px;         /* distance from top */
  right: var(--page-pad);/* distance from right, 1100 here is container width */
  z-index: 9999;     /* above everything */
  background: transparent;
}

.contact-link {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.contact-svg {
  height: 42px;  /* adjust to suit */
  width: auto;
  margin-bottom: 6px; /* space between svg and text */
}

.contact-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.85rem;
  color: #111;
  text-transform: lowercase;
  pointer-events: none; /* ensures full link is clickable */
}

/* subtle hover */
.contact-link:hover .contact-text {
  text-decoration: underline;
}

.hero-headline-svg {
  width: 100%;
  max-width: 700px;   /* adjust to match your layout */
  height: auto;
  display: block;
  margin-bottom: 20px;
}

/* flip horizontally (mirror) */
.arrow-invert { transform: rotate(270deg); transform-origin: center; }

/* or flip vertically: scaleY(-1) */

.decor-arrow {
  position: absolute;
  z-index: 6;
  pointer-events: none;     /* let clicks pass through to controls or images */
  bottom: -140px;   /* negative moves it outside/overlapping the gallery */
  right: 374px;    /* negative or 0 depending on desired overlap */
  width: 120px;    /* quarter/desired size — tweak as needed */
  height: auto;
  opacity: 0.98;
  transform-origin: center;
}

/* left logo */
.logo-left-svg {
  display: block !important;
  width: 350px !important;
  max-width: 600px !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 60 !important;
}

/* parent container sanity */
.hero-left, .logo-link {
  display: block;
  min-width: 120px;
  min-height: 48px;
  align-self: start;
}

.hero-left {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex: 0 0 auto;               /* prevent unexpected stretching/shrinking */
  align-self: center !important;
}


/* thin divider line between items (not before first) */
.service-block + .service-block {
  border-top: 1px solid #e9e9e9;
}

/* image column */
.service-image {
  position: relative;    /* needed for overlay positioning */
  flex: 0 0 500px;       /* control image width */
  max-width: 50%;
}

/* image styling */
.service-image img {
  width: 100%;
  height: 220px;         /* tweak to taste */
  object-fit: cover;
  border-radius: 0px;
  display: block;
}

/* text column */
.service-text {
  flex: 1 1 0;
}

/* headings & paragraph */
.service-text h3 { margin:0 0 12px 0; font-size:1.15rem; }
.service-text p { margin:0; color:var(--muted); line-height:1.6; }

/* layout columns */
.contact-left { flex: 0 0 auto; }
.contact-right { flex: 1 1 0; text-align: center; }

.contact-decor {
  width: 220px;
  height: auto;
}

/* Project gallery: big single image with controls underneath */
.project-gallery {
  width: 100%;
  max-width: var(--container, 1100px); /* keep grid alignment */
  margin: 60px auto;
}

.project-gallery .gallery-stage {
  position: relative;
  width: 100%;
  height: 60vh;                 /* adjust to taste (use px or vh) */
  min-height: 360px;
  overflow: hidden;
  border-radius: 0px;
  background: #f3f3f3;
}

/* slides fill the stage */
.pj-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}

.pj-item.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* controls row under the image */
.project-gallery .gallery-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
}

/* prev/next buttons */
.pj-prev, .pj-next {
  background: #fff;
  border: 1px solid #e6e6e6;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.pj-prev:focus, .pj-next:focus { outline: 3px solid rgba(0,0,0,0.08); }

/* dot indicators */
.pj-dots {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.pj-dots button {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: none;
  background: #ddd;
  cursor: pointer;
  padding: 0;
}
.pj-dots button.active {
  background: #222;
}

.contact-link {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.contact-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20000;
  padding: var(--page-pad);
}

.contact-modal.is-open {
  display: flex;
}

.contact-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.contact-modal__box {
  position: relative;
  z-index: 1;
  width: min(1100px, calc(100vw - (2 * var(--page-pad))));
  background: #000;
  color: #fff;
  padding: clamp(20px, 4vw, 40px);
  box-sizing: border-box;
}

.contact-modal__topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: clamp(20px, 4vw, 36px);
}

.contact-modal__logo {
  width: clamp(110px, 14vw, 180px);
  height: auto;
  display: block;
}

.contact-modal__close {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.contact-modal__close img {
  width: 28px;
  height: 28px;
  display: block;
}

.contact-modal__content {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 5vw, 56px);
  align-items: center;
}

.contact-modal__art {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
}

.contact-modal__info a {
  color: #fff;
}


/* Small screen behaviour */
@media (max-width: 900px) {
  html, body {
    overflow-x: clip; /* or hidden if clip is not supported */
  }

  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .two-column {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .hero-left,
  .gallery-right-text,
  .about-text,
  .about-image,
  .contact-inner {
    width: 100%;
    max-width: 100%;
  }

  .logo-left-svg {
    width: min(320px, 85vw);
    max-width: 100%;
  }

  .gallery-rotator {
    width: 100%;
    min-width: 0;
    height: 50vh;
    min-height: 300px;
  }

  .gallery-right-text {
    padding: 0;
    box-sizing: border-box;
  }

  .small-decor,
  .small-decor2 {
    margin-left: 0;
    width: min(180px, 60vw);
    margin-top: 24px;
  }

  .project-gallery {
    width: 100%;
    max-width: 100%;
    margin: 40px 0;
    padding-left: 0;
    padding-right: 0;
  }

  .project-gallery .gallery-stage {
    height: 45vh;
    min-height: 260px;
  }

  .pj-prev,
  .pj-next {
    padding: 8px 10px;
    font-size: 14px;
  }

  .contact {
    left: auto;
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    margin: 0px 0;
    padding-left: 0;
    padding-right: 0;
    background: #000;
    background-color: rgb(0, 0, 0);
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-attachment: scroll;
    background-image: none;
    background-size: auto;
    background-origin: padding-box;
    background-clip: border-box;
  }

  .contact-inner {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .top-right-controls {
    top: 12px;
    right: 12px;
  }

  .decor-arrow {
    width: 72px;
    bottom: 12px;
    right: 12px;
  }

  .contact-modal__content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .contact-modal__art {
    margin: 0 auto;
  }
}