/* ============================================================
   Hub for Engineering and Architecture — shared site stylesheet
   Layer on top of the per-page styles. Holds three things the
   static mockup did not need: link behaviour, real form controls,
   and the breakpoints that collapse the 1440px layouts.
   ============================================================ */

html { scroll-behavior: smooth; }

/* Links that should take the colour of their surroundings
   (project titles, card headings). */
.plain { color: inherit; text-decoration: none; }
.plain:hover { color: #0070BF; }

/* Buttons and CTAs are anchors; kill the underline and inherit. */
a.btn { text-decoration: none; }

/* Chips and tags never break mid-label. */
.chip, .chip-on, .chip-btn, .tag, .tag-solid { white-space: nowrap; }

/* ---------- Images ----------
   Every render on the site is a design visualisation, not a photograph
   of a finished building. The mark says so, on the image itself. */
.viz {
  position: absolute; left: 10px; bottom: 10px;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px;
  padding: 5px 9px;
  background: rgba(20, 23, 26, 0.78);
  color: #F4F2ED;
  pointer-events: none;
}
img { max-width: 100%; }
footer img { max-width: 280px; }

/* ---------- Header / mobile menu ---------- */
.menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-right: -10px;
  border: none; background: none; cursor: pointer; padding: 0;
}

/* ---------- Real form controls ----------
   The mockup drew inputs as divs. These are the same boxes,
   now typeable. */
input.inp, textarea.inp, select.inp {
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  color: #14171A;
  width: 100%;
  border: 1px solid #CFCAC0;
  background: #FFFFFF;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
input.inp, select.inp { height: 52px; padding: 0 16px; }
textarea.inp { height: 150px; padding: 16px; line-height: 1.6; resize: vertical; }
select.inp {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236E6A62' stroke-width='1.4'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}
input.inp::placeholder, textarea.inp::placeholder { color: #A9A399; }
input.inp:focus, textarea.inp:focus, select.inp:focus {
  outline: none;
  border-color: #0070BF;
  box-shadow: inset 0 0 0 1px #0070BF;
}
input[type="checkbox"].box {
  width: 20px; height: 20px; flex-shrink: 0; margin: 2px 0 0 0;
  accent-color: #0070BF;
}

/* Selectable option chips (the "What do you need?" row). */
.chip-btn {
  display: flex; align-items: center; height: 44px; padding: 0 16px;
  border: 1px solid #CFCAC0; background: transparent; color: #3A3E42;
  font: inherit; cursor: pointer;
}
.chip-btn[aria-pressed="true"] {
  border-color: #14171A; background: #14171A; color: #F4F2ED;
}

/* File drop zone */
.dropzone input[type="file"] { display: none; }
.dropzone label { cursor: pointer; }

/* ============================================================
   RESPONSIVE
   The pages are authored at 1440px with inline styles, so the
   breakpoints below override those inline declarations by
   matching on the style attribute itself.
   ============================================================ */

/* ---------- Tablet: 12-col becomes 1-col, 3/4-up becomes 2-up ---------- */
@media (max-width: 1100px) {
  header, section, footer { padding-left: 40px !important; padding-right: 40px !important; }

  [style*="grid-template-columns:repeat(12"] {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 40px !important;
  }
  [style*="grid-column"] { grid-column: auto !important; }

  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(6"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  h1 { font-size: 42px !important; }
  h2 { font-size: 30px !important; }
}

/* ---------- Nav collapses early ----------
   Six items plus a button stop fitting well before phone width. */
@media (max-width: 1000px) {
  .menu-btn { display: flex; }
  header { position: relative; height: 64px !important; }
  nav.nav {
    display: none !important;
    position: absolute; top: 64px; left: 0; right: 0; z-index: 40;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 8px 20px 20px !important;
    background: #F4F2ED;
    border-bottom: 1px solid #CFCAC0;
    box-shadow: 0 12px 24px rgba(20, 23, 26, 0.08);
  }
  nav.nav.open { display: flex !important; }
  nav.nav a {
    padding: 16px 0 !important;
    border-bottom: 1px solid #DDD9D0 !important;
    border-bottom-width: 1px !important;
    color: #14171A !important;
  }
  nav.nav .btn {
    height: 52px !important;
    margin-top: 16px;
    color: #14171A !important;
    border-bottom: none !important;
  }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  header, section, footer { padding-left: 20px !important; padding-right: 20px !important; }

  /* Everything stacks */
  [style*="grid-template-columns:repeat"] {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  /* …except the two-up figure rows, which read fine side by side */
  section[data-keep-2up] [style*="grid-template-columns:repeat"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Rows that were laid out left/right now stack */
  [style*="justify-content:space-between"] {
    flex-wrap: wrap;
    gap: 20px;
  }

  /* Type scale */
  h1 { font-size: 32px !important; line-height: 1.06 !important; }
  h2 { font-size: 24px !important; }
  h3 { font-size: 18px !important; }
  /* Display numerals (the figures row) are spans, not headings. */
  [style*="font-size:42px"] { font-size: 30px !important; }
  [style*="font-size:19px"] { font-size: 17px !important; }

  /* Section rhythm tightens again. The first rule catches the sections
     that deliberately start at zero so they butt against the one above. */
  [style*="padding:0 64px"] { padding-bottom: 32px !important; }
  [style*="padding:64px 64px"], [style*="padding:60px 64px"], [style*="padding:56px 64px"] {
    padding-top: 34px !important; padding-bottom: 34px !important;
  }
  [style*="padding:48px 64px"], [style*="padding:44px 64px"], [style*="padding:40px 64px"] {
    padding-top: 30px !important; padding-bottom: 30px !important;
  }

  /* Actions go full width and stack, rather than splitting a row
     narrow enough to break the label across two lines. */
  div:has(> a.btn),
  div:has(> button[type="submit"]) {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  a.btn,
  button[type="submit"] { width: 100%; justify-content: center; }
  /* The contact form's option chips must wrap, not scroll. */
  .chip-btn { flex: 0 0 auto; }

  /* Drawing panels shrink rather than crop */
  [style*="height:460px"] { height: 220px !important; }
  [style*="height:400px"] { height: 220px !important; }
  [style*="height:300px"], [style*="height:270px"] { height: 200px !important; }

  /* Filter chips wrap onto as many lines as they need */
  .filter-row { flex-wrap: wrap !important; }
  .filter-row > * { flex: 0 0 auto; }

  /* Download rows (title / category / format / button) stack */
  .dl {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    align-items: start !important;
  }
  .dl > div:last-child { justify-self: start; padding: 0 24px !important; }

  /* Wide tables become label-over-value */
  .trow, .row { grid-template-columns: 1fr !important; gap: 6px !important; }
}

/* ---------- Print ---------- */
@media print {
  .menu-btn, nav.nav { display: none !important; }
  a { text-decoration: none; color: inherit !important; }
}

/* ============================================================
   APPEARANCE LAYER
   Depth, motion and interaction. Everything here is additive —
   the pages are fully legible with this stylesheet removed.
   ============================================================ */

/* ---------- Motion defaults ---------- */
a, .btn, button, .chip, .chip-on, .chip-btn, .tag, .tag-solid {
  transition: color .16s ease, background-color .16s ease,
              border-color .16s ease, transform .16s ease;
}

/* ---------- Buttons ---------- */
a.btn, button[type="submit"] { cursor: pointer; }
a.btn[style*="background:#FFBF00"]:hover,
button[type="submit"]:hover { background: #E8AE00 !important; }
a.btn[style*="background:#14171A"]:hover { background: #2A3036 !important; }
a.btn[style*="border:1px solid #4A4F55"]:hover { border-color: #F4F2ED !important; }
a.btn[style*="border:1px solid #14171A"]:hover { background: #14171A !important; color: #F4F2ED !important; }

/* ---------- Section kickers get a short gold rule ---------- */
.mono.kicker::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  background: #FFBF00;
  vertical-align: middle;
  margin-right: 11px;
  margin-bottom: 2px;
}

/* ---------- Image fields ---------- */
.field, .shot {
  position: relative;
  overflow: hidden;
  background: #14171A;
}
.field img, .shot img, .tile img {
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
  will-change: transform;
}
.card-link:hover .field img,
.card-link:hover .shot img,
.tile:hover img { transform: scale(1.045); }

/* The visualisation mark fades back on hover so the image reads */
.field .viz, .shot .viz { transition: opacity .2s ease; }
.card-link:hover .viz { opacity: .55; }

/* Project cards */
.card-link { display: block; color: inherit; text-decoration: none; }
.card-link h3 { transition: color .16s ease; }
.card-link:hover h3 { color: #0070BF; }

/* ---------- Gallery tiles ---------- */
.tile {
  position: relative;
  overflow: hidden;
  background: #14171A;
  cursor: zoom-in;
  border: none !important;
}
.tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,23,26,.42), rgba(20,23,26,0) 46%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.tile:hover::after { opacity: 1; }
.tile-n {
  position: absolute; left: 12px; bottom: 10px;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: #F4F2ED;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.tile:hover .tile-n { opacity: 1; transform: translateY(0); }

/* ---------- Lightbox ---------- */
#lightbox {
  position: fixed; inset: 0; z-index: 9000;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(12, 14, 16, .94);
  padding: 40px;
}
#lightbox.open { display: flex; }
#lightbox img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
#lightbox .lb-close,
#lightbox .lb-prev,
#lightbox .lb-next {
  position: absolute;
  background: rgba(244,242,237,.1);
  border: 1px solid rgba(244,242,237,.25);
  color: #F4F2ED;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 20px; line-height: 1;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}
#lightbox .lb-close:hover,
#lightbox .lb-prev:hover,
#lightbox .lb-next:hover { background: rgba(244,242,237,.2); }
#lightbox .lb-close { top: 24px; right: 24px; }
#lightbox .lb-prev { left: 24px; top: 50%; margin-top: -24px; }
#lightbox .lb-next { right: 24px; top: 50%; margin-top: -24px; }
#lightbox .lb-count {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .14em; color: #8C8880;
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .field img, .shot img, .tile img { transition: none; }
  .card-link:hover .field img, .tile:hover img { transform: none; }
}

/* ---------- Hero ---------- */
@media (max-width: 1000px) {
  .hero-media { min-height: 340px !important; }
  section > div[style*="grid-template-columns:1.08fr"] {
    grid-template-columns: 1fr !important;
  }
  section > div[style*="grid-template-columns:1.08fr"] > div:first-child {
    padding: 56px 40px 48px !important;
  }
}
@media (max-width: 760px) {
  .hero-media { min-height: 260px !important; }
  section > div[style*="grid-template-columns:1.08fr"] > div:first-child {
    padding: 44px 20px 40px !important;
  }
  #lightbox { padding: 16px; }
  #lightbox .lb-prev { left: 10px; }
  #lightbox .lb-next { right: 10px; }
  #lightbox .lb-close { top: 12px; right: 12px; }
}