@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #FFFDF7;
  --accent: #A44027;
  --text: #1A1A1A;
  --border: rgba(26, 26, 26, 0.12);
  --font-head: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Geist Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }

::selection {
  background: var(--accent);
  color: #fff;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 20px;
  background: rgba(255, 253, 247, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.logo {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.02em;
}

/* ---------- Hero ---------- */
.hero {
  max-width: 900px;
  margin: 0 auto;
  padding: 76px 24px 16px;
  text-align: center;
}

.hero-preline {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.6;
  margin: 0 0 24px;
}

.hero-main {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(40px, 8.5vw, 92px);
  line-height: 1.08;
  margin: 0 0 28px;
  letter-spacing: -0.02em;
  text-shadow: 0 8px 40px rgba(26, 26, 26, 0.14);
}

.hero-main .accent {
  color: var(--accent);
  text-shadow:
    0 8px 40px rgba(26, 26, 26, 0.14),
    0 0 22px rgba(164, 64, 39, 0.42),
    0 0 50px rgba(164, 64, 39, 0.23);
}

.hero-sub {
  font-size: 17px;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto;
  opacity: 0.85;
}

/* ---------- About strip ---------- */
.about-strip {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 72px;
  text-align: center;
}

.about-photo {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.about-caption {
  margin: 28px 0 0;
  font-size: 13px;
  opacity: 0.65;
}

/* ---------- Scatter section ---------- */
.scatter-section {
  padding-top: 0;
}

.scatter-layout {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.scatter-col {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.scatter-item {
  overflow: hidden;
  border-radius: 3px;
  flex: 0 0 auto;
  transition: transform 0.25s ease;
  will-change: transform;
}

.scatter-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scatter-item.lean-left { transform: rotate(var(--rot, -3deg)); }
.scatter-item.lean-right { transform: rotate(var(--rot, 3deg)); }

.scatter-item:hover {
  transform: rotate(0deg) scale(1.02);
  z-index: 2;
}

.scatter-item.size-s { width: 150px; height: 200px; }
.scatter-item.size-m { width: 190px; height: 254px; }
.scatter-item.size-l { width: 240px; height: 200px; }

.scatter-below {
  max-width: 900px;
  margin: 24px auto 0;
  padding: 0 20px 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
}

/* ---------- Enquiry / form ---------- */
.enquiry-wrap {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px 24px;
}

.enquiry-intro {
  text-align: center;
  margin-bottom: 40px;
}

.enquiry-intro h2 {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 26px;
  margin: 0 0 10px;
}

.enquiry-intro p {
  font-size: 14px;
  opacity: 0.7;
  margin: 0;
}

.enquiry-form {
  display: grid;
  gap: 22px;
}

.field {
  display: grid;
  gap: 8px;
}

.field label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.75;
}

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.15s ease;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text);
  opacity: 0.35;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.field textarea { resize: vertical; }

.field input[type="file"] {
  padding: 10px 14px;
  font-size: 13px;
}

.submit-btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 14px 24px;
  cursor: pointer;
  margin-top: 6px;
  transition: background 0.18s ease, color 0.18s ease;
}

.submit-btn:hover {
  background: var(--accent);
  color: #fff;
}

.submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-error {
  color: #b00020;
  font-size: 13px;
  margin: 0;
  min-height: 18px;
}

.success-state {
  text-align: center;
  padding: 40px 0 100px;
}

.success-state h2 {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 26px;
  margin: 0 0 10px;
}

.success-state p {
  font-size: 14px;
  opacity: 0.75;
  margin: 0;
}

/* ---------- Footer ---------- */
.site-footer {
  text-align: center;
  padding: 28px 20px 40px;
}

.site-footer p {
  font-size: 12px;
  opacity: 0.5;
  margin: 0;
}

/* ---------- Responsive ---------- */

/* Flank the form with photo columns once there's enough room for
   both side columns plus a comfortable form width without squeezing. */
@media (min-width: 1000px) {
  .scatter-layout {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
  }

  .scatter-col {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    flex: 0 0 260px;
    width: 260px;
  }

  .enquiry-wrap {
    flex: 0 1 640px;
  }
}

/* Below the flanking breakpoint, photos stack above and below the form.
   The "above" block reads as clutter on small screens, so drop it and
   keep only the block that already sits below the form. */
@media (max-width: 999px) {
  .scatter-col-left {
    display: none;
  }
}

@media (max-width: 600px) {
  .hero { padding: 48px 20px 12px; }
  .scatter-item.size-s { width: 120px; height: 160px; }
  .scatter-item.size-m { width: 148px; height: 198px; }
  .scatter-item.size-l { width: 180px; height: 150px; }
  .enquiry-wrap { padding: 0 20px 24px; }
}

@media (max-width: 380px) {
  .scatter-item.size-s { width: 100px; height: 134px; }
  .scatter-item.size-m { width: 122px; height: 163px; }
  .scatter-item.size-l { width: 150px; height: 125px; }
}