/* MOAS studio — shared styles
   Layout copies the original Squarespace "fluid engine" grid so every page
   scales with the window exactly like the old site:
   - desktop (768px+): 24 columns inside a max 1500px page, 3vw side gutters,
     row height = 2.15% of the page width
   - phone: 8 columns, 6vw side gutters, 24px minimum rows
   Each block sets its own grid position with --m (phone) and --d (desktop). */

:root {
  --bg: #f3ede5;
  --ink: #000;
  --placeholder-bg: #e3d9cc;
  --placeholder-line: #c9bba9;
  --placeholder-ink: #6b5f52;
  --field-bg: #fbf9f6;
  --heading: "Manrope", sans-serif;
  --body: "Poppins", sans-serif;

  /* Text sizes: Squarespace formula (size - 1) * 1.2vw + 1rem, capped at 1500px page width */
  --fs-h3: min(calc(1.44vw + 1rem), 37.6px);
  --fs-lg: min(calc(.48vw + 1rem), 23.2px);
  --fs-sm: min(calc(1rem - .12vw), 14.4px);

  /* Header: 1.7vw top/bottom, 3vw sides, 27px tall content */
  --hh: calc(3.4vw + 27px);
}

@media (max-width: 767px) {
  :root {
    /* Phone sizes scale with screen height instead */
    --fs-h3: calc(1.2 * min(1.2vh, 10.8px) + 1rem);
    --fs-lg: calc(.4 * min(1.2vh, 10.8px) + 1rem);
    --fs-sm: calc(1rem - .1 * min(1.2vh, 10.8px));
  }
}

@media (max-width: 799px) {
  :root { --hh: calc(12vw + 37px); }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5em;
  /* Short pages keep the footer at the bottom of the window, like Squarespace */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

img { display: block; }

a { color: inherit; }

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: var(--bg);
  padding: .5rem 1rem;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: var(--bg);
  padding: 1.7vw 3vw;
  box-shadow: 0 10px 10px rgba(0, 0, 0, .15);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 27px;
}

.logo {
  font-family: var(--heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.35em;
  letter-spacing: -.02em;
  text-decoration: none;
  white-space: pre;
}

.site-nav {
  display: flex;
  align-items: center;
}

.site-nav a {
  text-decoration: none;
  line-height: 24px;
  padding: 1.5px 0;
}

.site-nav a:not(.instagram) + a:not(.instagram) { margin-left: 2.8vw; }

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}

.instagram {
  display: inline-flex;
  width: 25px;
  height: 25px;
}

.site-nav .instagram { margin-left: 2vw; padding: 0; }

.instagram svg { width: 100%; height: 100%; }

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  width: 37px;
  height: 37px;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--ink);
  margin: 9px 0;
  transition: transform .25s;
}

@media (max-width: 799px) {
  .site-header { padding: 6vw; }

  .header-inner { min-height: 37px; justify-content: center; }

  .menu-toggle { display: block; position: absolute; left: 0; top: 0; }

  .site-nav {
    position: fixed;
    inset: var(--hh) 0 0 0;
    background: var(--bg);
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    font-size: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility .25s;
  }

  .site-nav a:not(.instagram) + a:not(.instagram),
  .site-nav .instagram { margin-left: 0; }

  .nav-open .site-nav { opacity: 1; visibility: visible; }
  .nav-open .menu-toggle span:first-child { transform: translateY(5px) rotate(45deg); }
  .nav-open .menu-toggle span:last-child { transform: translateY(-5px) rotate(-45deg); }
  .nav-open { overflow: hidden; }
}

/* ---------- Grid sections ---------- */

.fe {
  --gap: 20px;
  display: grid;
  gap: var(--gap);
  grid-template-columns:
    minmax(calc(6vw - var(--gap)), 1fr)
    repeat(8, minmax(0, calc((1500px - var(--gap) * 7) / 8)))
    minmax(calc(6vw - var(--gap)), 1fr);
  grid-template-rows: repeat(var(--rows-m), minmax(24px, auto));
  overflow-x: clip;
}

@media (min-width: 768px) {
  .fe {
    grid-template-columns:
      minmax(calc(3vw - var(--gap)), 1fr)
      repeat(24, minmax(0, calc((1500px - var(--gap) * 23) / 24)))
      minmax(calc(3vw - var(--gap)), 1fr);
    grid-template-rows: repeat(var(--rows-d), minmax(calc(min(1500px, 94vw) * .0215), auto));
  }
}

/* First section sits under the fixed header */
main > .fe:first-child { padding-top: var(--hh); }

.gap-0 { --gap: 0px; }
.gap-5 { --gap: 5px; }

/* A block: placed on the grid, content aligned top/centre/bottom */
.b {
  grid-area: var(--m);
  z-index: var(--z, auto);
  display: flex;
  flex-direction: column;
  justify-content: var(--vm, flex-start);
  min-width: 0;
}

@media (min-width: 768px) {
  .b {
    grid-area: var(--d);
    justify-content: var(--vd, var(--vm, flex-start));
  }
}

.b > :first-child { margin-top: 0; }
.b > :last-child { margin-bottom: 0; }
/* Blocks are flex columns, so margins don't collapse: keep one 1rem gap between paragraphs */
.b > * + * { margin-top: 0; }

/* Image blocks fill their grid area, cropped */
.i {
  position: relative;
  overflow: hidden;
  display: block;
}

.i img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

a.i img { transition: opacity .25s; }
a.i:hover img { opacity: .85; }

/* Placeholder boxes for photos still to come */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--placeholder-bg);
  border: 1px dashed var(--placeholder-line);
  color: var(--placeholder-ink);
  font-size: 15px;
  letter-spacing: .04em;
  text-align: center;
  text-decoration: none;
}

/* ---------- Text ---------- */

p, h1, h2, h3 { margin: 1rem 0; }

p { line-height: 1.5em; }

/* Squarespace keeps typed spaces (e.g. the wide gaps in the home headline) */
p, h1, h2, h3 { white-space: pre-wrap; }

.h3 {
  font-family: var(--heading);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: calc(1.2em * (1 + (1 - 2.2) / 25));
  letter-spacing: -.02em;
}

.lg { font-size: var(--fs-lg); }
.sm { font-size: var(--fs-sm); }

.tc { text-align: center; }
.tl { text-align: left; }
.tr { text-align: right; }
.tj { text-align: justify; }

p a, .text-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

h1.lg, h1.sm, h1.n { font-family: var(--body); font-weight: 400; line-height: 1.5em; }
h1.n { font-size: 16px; }

/* ---------- Services ---------- */

.accordion { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }

.accordion details { border-bottom: 1px solid var(--ink); }

.accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  line-height: normal;
}

.accordion summary::-webkit-details-marker { display: none; }

.accordion summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-right: 2px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .25s;
}

.accordion details.is-open summary::after { transform: translateY(2px) rotate(-135deg); }

.accordion .panel { font-size: var(--fs-sm); overflow: hidden; }
.accordion .panel-inner { padding: 21px 5px 21px 10px; }
.accordion .panel p { margin: 0 0 1rem; }
.accordion .panel p:last-child { margin-bottom: 0; }

.button {
  display: inline-block;
  align-self: flex-start;
  font: 16px var(--body);
  line-height: normal;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  padding: 14px 32px;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.button:hover { background: var(--ink); color: var(--bg); }

/* A button on its own in a block stretches to fill the block, like Squarespace */
.b > .button {
  flex: 1 1 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  white-space: normal;
}

/* ---------- Contact form ---------- */

.form fieldset { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }

.form legend, .form .field-label {
  display: block;
  font-size: 16px;
  line-height: 28px;
  margin: 0;
  padding: 0;
}

.name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.name-row label { font-size: var(--fs-sm); line-height: 27px; display: block; }

.form input[type="text"],
.form input[type="email"],
.form textarea {
  display: block;
  width: 100%;
  font: 16px var(--body);
  background: var(--field-bg);
  border: 1px solid transparent;
  padding: 0 10px;
  border-radius: 0;
}

.form input[type="text"], .form input[type="email"] { height: 36px; }

.form input:focus, .form textarea:focus { outline: none; border-color: var(--ink); }

.form textarea { height: 100px; padding: 6px 10px; resize: vertical; }

.checks legend { margin-bottom: 7px; }

.checks label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--fs-sm);
  line-height: 21px;
  margin-bottom: 16px;
}

.checks label:last-of-type { margin-bottom: 0; }

/* Round checkboxes like the Squarespace form */
.checks input {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  margin: 3px 0 0;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, .55);
  border-radius: 50%;
  background: transparent center / 9px no-repeat;
  cursor: pointer;
  transition: background-color .15s cubic-bezier(.33, 1, .68, 1);
}

.checks input:checked {
  background-color: var(--ink);
  border-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.8 2.8L9 1.5' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E");
}

.checks input:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }

.checks label { cursor: pointer; }
.checks label { gap: 11px; }

.form .button { display: block; margin: 0 auto; padding: 2px 32px; line-height: 24px; }

.form-note { font-size: 13px; text-align: center; margin: 10px 0 0; }
.form-note:empty { display: none; }

.hp { position: absolute; left: -9999px; }

/* ---------- Footer ---------- */

.site-footer .icon-link {
  display: inline-flex;
  align-self: center;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 24px;
  position: relative;
  top: 4px;
}

.site-footer .icon-link svg { width: 16px; height: 16px; }

/* ---------- 404 ---------- */

.not-found { text-align: center; padding: calc(var(--hh) + 100px) 6vw 100px; }
.not-found .h3 { margin-bottom: 1.5rem; }

/* ---------- Project gallery (3 columns of 2:3 photos, 0.75vw apart, like Sunce Media's gallery grid) ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75vw;
  padding: 5vw 3vw 2vw;
}
.gallery img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }

@media (max-width: 767px) {
  .gallery { grid-template-columns: repeat(2, 1fr); padding: 10vw 6vw 3vw; }
}

/* ---------- Photo tiles in rows of three (Home, Projects): half-size gaps ----------
   Tiles keep the block's outer edges and grow into the gaps: each gap shrinks to half.
   --hg / --vg are the full gaps between tiles (one grid column / row plus two grid gaps). */

@media (min-width: 768px) {
  .fe {
    --hg: calc((min(1500px, 94vw) - var(--gap) * 23) / 24 + var(--gap) * 2);
    --vg: calc(min(1500px, 94vw) * .0215 + var(--gap) * 2);
  }
  .xl { margin-right: calc(var(--hg) / -3); }
  .xm { margin-left: calc(var(--hg) / -6); margin-right: calc(var(--hg) / -6); }
  .xr { margin-left: calc(var(--hg) / -3); }
  .yt { margin-bottom: calc(var(--vg) / -3); }
  .ym { margin-top: calc(var(--vg) / -6); margin-bottom: calc(var(--vg) / -6); }
  .yb { margin-top: calc(var(--vg) / -3); }
}